www/include/styles/plate.css

Code
Comments
Other
Rev Date Author Line
7604 25 Feb 19 nicklas 1 @charset "UTF-8";
7604 25 Feb 19 nicklas 2 /* $Id $
7604 25 Feb 19 nicklas 3   ------------------------------------------------------------------
7604 25 Feb 19 nicklas 4   Copyright (C) 2010 Nicklas Nordborg
7604 25 Feb 19 nicklas 5
7604 25 Feb 19 nicklas 6   This file is part of BASE - BioArray Software Environment.
7604 25 Feb 19 nicklas 7   Available at http://base.thep.lu.se/
7604 25 Feb 19 nicklas 8
7604 25 Feb 19 nicklas 9   BASE is free software; you can redistribute it and/or
7604 25 Feb 19 nicklas 10   modify it under the terms of the GNU General Public License
7604 25 Feb 19 nicklas 11   as published by the Free Software Foundation; either version 3
7604 25 Feb 19 nicklas 12   of the License, or (at your option) any later version.
7604 25 Feb 19 nicklas 13
7604 25 Feb 19 nicklas 14   BASE is distributed in the hope that it will be useful,
7604 25 Feb 19 nicklas 15   but WITHOUT ANY WARRANTY; without even the implied warranty of
7604 25 Feb 19 nicklas 16   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
7604 25 Feb 19 nicklas 17   GNU General Public License for more details.
7604 25 Feb 19 nicklas 18
7604 25 Feb 19 nicklas 19   You should have received a copy of the GNU General Public License
7604 25 Feb 19 nicklas 20   along with BASE. If not, see <http://www.gnu.org/licenses/>.
7604 25 Feb 19 nicklas 21   ------------------------------------------------------------------
7604 25 Feb 19 nicklas 22
7604 25 Feb 19 nicklas 23   Stylesheet used to display plates.
7604 25 Feb 19 nicklas 24
7604 25 Feb 19 nicklas 25   @author Nicklas
7604 25 Feb 19 nicklas 26 */
7604 25 Feb 19 nicklas 27 .plate 
7604 25 Feb 19 nicklas 28 {
7604 25 Feb 19 nicklas 29   background-color: #FFFFFF;
7604 25 Feb 19 nicklas 30   color: #000000;
7604 25 Feb 19 nicklas 31   border-width: 1px;
7604 25 Feb 19 nicklas 32   border-collapse: separate;
7604 25 Feb 19 nicklas 33 }
7604 25 Feb 19 nicklas 34
7604 25 Feb 19 nicklas 35 /* Plate name is in bold */
7604 25 Feb 19 nicklas 36 .platename 
7604 25 Feb 19 nicklas 37 {
7604 25 Feb 19 nicklas 38   font-weight: bold;
7604 25 Feb 19 nicklas 39   border-bottom-width: 1px;
7604 25 Feb 19 nicklas 40   padding: 1px 1px 1px 8px;
7604 25 Feb 19 nicklas 41   height: 1.5em;
7604 25 Feb 19 nicklas 42 }
7604 25 Feb 19 nicklas 43
7604 25 Feb 19 nicklas 44 /* Column and row headers are bold and center-aligned and use smaller font */
7604 25 Feb 19 nicklas 45 .columnheader, .rowheader 
7604 25 Feb 19 nicklas 46 {
7604 25 Feb 19 nicklas 47   font-weight: bold;
7604 25 Feb 19 nicklas 48   text-align: center;
7604 25 Feb 19 nicklas 49   padding: 1px;
7604 25 Feb 19 nicklas 50   font-size: smaller;
7604 25 Feb 19 nicklas 51 }
7604 25 Feb 19 nicklas 52
7604 25 Feb 19 nicklas 53 /* Big plates need even smaller font */
7604 25 Feb 19 nicklas 54 .bigplate .columnheader, .bigplate .rowheader 
7604 25 Feb 19 nicklas 55 {
7604 25 Feb 19 nicklas 56   font-size: xx-small;
7604 25 Feb 19 nicklas 57 }
7604 25 Feb 19 nicklas 58
7604 25 Feb 19 nicklas 59 /* A well is fixed in size */
7604 25 Feb 19 nicklas 60 .well 
7604 25 Feb 19 nicklas 61 {
7604 25 Feb 19 nicklas 62   width: 28px;
7604 25 Feb 19 nicklas 63   height: 28px;
7604 25 Feb 19 nicklas 64   max-width: 28px;
7604 25 Feb 19 nicklas 65   max-height: 28px;
7604 25 Feb 19 nicklas 66   border-top: 1px solid #E8E8E8;
7604 25 Feb 19 nicklas 67   border-left: 1px solid #E8E8E8;
7604 25 Feb 19 nicklas 68   border-bottom: 1px solid transparent;
7604 25 Feb 19 nicklas 69   border-right: 1px solid transparent;
7604 25 Feb 19 nicklas 70   padding: 1px;
7604 25 Feb 19 nicklas 71   text-align: right;
7604 25 Feb 19 nicklas 72   vertical-align: bottom;
7604 25 Feb 19 nicklas 73   overflow: hidden;
7604 25 Feb 19 nicklas 74   background: #FFFFFF;
7604 25 Feb 19 nicklas 75   background-repeat: no-repeat;
7604 25 Feb 19 nicklas 76   background-position: center;
7604 25 Feb 19 nicklas 77 }
7604 25 Feb 19 nicklas 78
7604 25 Feb 19 nicklas 79 /* Text inside a well is smaller */
7604 25 Feb 19 nicklas 80 .well .info 
7604 25 Feb 19 nicklas 81 {
7604 25 Feb 19 nicklas 82   font-size: xx-small;
7604 25 Feb 19 nicklas 83   font-weight: bold;
7604 25 Feb 19 nicklas 84 }
7604 25 Feb 19 nicklas 85
7604 25 Feb 19 nicklas 86 /* Do not display well info */
7604 25 Feb 19 nicklas 87 .bigplate .well .info, .noinfo .plate .well .info 
7604 25 Feb 19 nicklas 88 {
7604 25 Feb 19 nicklas 89   display: none;
7604 25 Feb 19 nicklas 90 }
7604 25 Feb 19 nicklas 91
7604 25 Feb 19 nicklas 92 /* Wells on a big plate are smaller */
7604 25 Feb 19 nicklas 93 .bigplate .well 
7604 25 Feb 19 nicklas 94 {
7604 25 Feb 19 nicklas 95   width: 18px;
7604 25 Feb 19 nicklas 96   height: 18px;
7604 25 Feb 19 nicklas 97   max-width: 18px;
7604 25 Feb 19 nicklas 98   max-height: 18px;
7604 25 Feb 19 nicklas 99   min-height: 18px;
7604 25 Feb 19 nicklas 100   min-width: 18px;
7604 25 Feb 19 nicklas 101 }
7604 25 Feb 19 nicklas 102
7604 25 Feb 19 nicklas 103 /* No border if for the first well on each row */
7604 25 Feb 19 nicklas 104 .well:first-child 
7604 25 Feb 19 nicklas 105 {
7604 25 Feb 19 nicklas 106   border-left: 0px;
7604 25 Feb 19 nicklas 107 }
7604 25 Feb 19 nicklas 108
7604 25 Feb 19 nicklas 109 /* Display border around a well that we draw a link to */
7604 25 Feb 19 nicklas 110 .well.linked
7604 25 Feb 19 nicklas 111 {
7604 25 Feb 19 nicklas 112   padding: 0px;
7604 25 Feb 19 nicklas 113   border: 2px dashed #2288AA;
7604 25 Feb 19 nicklas 114   border-radius: 4px;
7604 25 Feb 19 nicklas 115 }
7604 25 Feb 19 nicklas 116
7604 25 Feb 19 nicklas 117 /* A well that can be edited or used in a wizard */
7604 25 Feb 19 nicklas 118 .well.editable 
7604 25 Feb 19 nicklas 119 {
7604 25 Feb 19 nicklas 120   cursor: pointer;
7604 25 Feb 19 nicklas 121 }
7604 25 Feb 19 nicklas 122
7604 25 Feb 19 nicklas 123 /* Display a border around active wells */
7604 25 Feb 19 nicklas 124 .well.editable:hover 
7604 25 Feb 19 nicklas 125 {
7604 25 Feb 19 nicklas 126   padding: 0px;
7604 25 Feb 19 nicklas 127   border: 2px solid #2288AA;
7604 25 Feb 19 nicklas 128   border-radius: 4px;
7604 25 Feb 19 nicklas 129 }
7604 25 Feb 19 nicklas 130
7604 25 Feb 19 nicklas 131
7604 25 Feb 19 nicklas 132
7604 25 Feb 19 nicklas 133 /* An empty well */
7604 25 Feb 19 nicklas 134 .well.empty 
7604 25 Feb 19 nicklas 135 {}
7604 25 Feb 19 nicklas 136
7604 25 Feb 19 nicklas 137 /* A well that currently has biomaterial in it */
7604 25 Feb 19 nicklas 138 .well.used
7604 25 Feb 19 nicklas 139 {
7604 25 Feb 19 nicklas 140   background-image: url('../../images/well_info.png');
7604 25 Feb 19 nicklas 141 }
7604 25 Feb 19 nicklas 142
7604 25 Feb 19 nicklas 143 /* A well that is empty but has been used before */
7604 25 Feb 19 nicklas 144 .well.empty.wasused 
7604 25 Feb 19 nicklas 145 {
7604 25 Feb 19 nicklas 146   background-image: url('../../images/well_info_used.png');
7604 25 Feb 19 nicklas 147 }
7604 25 Feb 19 nicklas 148
7604 25 Feb 19 nicklas 149 /* An empty well that is locked for modifications */
7604 25 Feb 19 nicklas 150 .well.empty.locked:hover 
7604 25 Feb 19 nicklas 151 {
7604 25 Feb 19 nicklas 152   background-image: url('../../images/well_locked.png');
7604 25 Feb 19 nicklas 153 }
7604 25 Feb 19 nicklas 154
7604 25 Feb 19 nicklas 155 /* An empty well that it is possible to add biomaterial to */
7604 25 Feb 19 nicklas 156 .well.empty.editable:hover 
7604 25 Feb 19 nicklas 157 {
7604 25 Feb 19 nicklas 158   background-image: url('../../images/add.png');
7604 25 Feb 19 nicklas 159 }
7604 25 Feb 19 nicklas 160
7604 25 Feb 19 nicklas 161 /* A used well that is locked for modifications */
7604 25 Feb 19 nicklas 162 .well.used.locked 
7604 25 Feb 19 nicklas 163 {
7604 25 Feb 19 nicklas 164   background-image: url('../../images/well_info_locked.png');
7604 25 Feb 19 nicklas 165 }
7604 25 Feb 19 nicklas 166
7604 25 Feb 19 nicklas 167 /* A used well that the current user doesn't have permission to access */
7604 25 Feb 19 nicklas 168 .well.used.denied 
7604 25 Feb 19 nicklas 169 {
7604 25 Feb 19 nicklas 170   background-image: url('../../images/error.png');
7604 25 Feb 19 nicklas 171 }
7604 25 Feb 19 nicklas 172
7604 25 Feb 19 nicklas 173 /* A well that can't be used by a wizard */
7604 25 Feb 19 nicklas 174 .well.unmappable 
7604 25 Feb 19 nicklas 175 {
7604 25 Feb 19 nicklas 176   background-image: url('../../images/well_locked.png');
7604 25 Feb 19 nicklas 177 }
7604 25 Feb 19 nicklas 178
7604 25 Feb 19 nicklas 179 /* A well that has been selected in a wizard */
7604 25 Feb 19 nicklas 180 .well.selected
7604 25 Feb 19 nicklas 181 {
7604 25 Feb 19 nicklas 182   background-color: #2288AA;
7604 25 Feb 19 nicklas 183 }
7604 25 Feb 19 nicklas 184
7604 25 Feb 19 nicklas 185 /* A well that is empty but has been mapped in a wizard to recieve new biomaterial */
7604 25 Feb 19 nicklas 186 .well.empty.mapped {
7604 25 Feb 19 nicklas 187   background-image: url('../../images/add.png');
7604 25 Feb 19 nicklas 188 }
7604 25 Feb 19 nicklas 189
7604 25 Feb 19 nicklas 190 /* A used well that has been mapped in a wizard */
7604 25 Feb 19 nicklas 191 .well.used.mapped 
7604 25 Feb 19 nicklas 192 {
7604 25 Feb 19 nicklas 193   background-image: url('../../images/well_move.png');
7604 25 Feb 19 nicklas 194 }
7604 25 Feb 19 nicklas 195
7604 25 Feb 19 nicklas 196 .biomateriallist
7604 25 Feb 19 nicklas 197 {
7604 25 Feb 19 nicklas 198   overflow: auto;
7604 25 Feb 19 nicklas 199   background: #FFFFFF;
7604 25 Feb 19 nicklas 200   color: #000000;
7604 25 Feb 19 nicklas 201 }
7604 25 Feb 19 nicklas 202
7604 25 Feb 19 nicklas 203 .biomateriallist .item .label
7604 25 Feb 19 nicklas 204 {
7604 25 Feb 19 nicklas 205   padding: 2px;
7604 25 Feb 19 nicklas 206 }
7604 25 Feb 19 nicklas 207
7604 25 Feb 19 nicklas 208 .biomateriallist .item:hover .label, .biomateriallist .item.linked .label
7604 25 Feb 19 nicklas 209 {
7604 25 Feb 19 nicklas 210   cursor: pointer;
7604 25 Feb 19 nicklas 211   border-width: 2px;
7604 25 Feb 19 nicklas 212   border-style: dashed;
7604 25 Feb 19 nicklas 213   border-radius: 4px;
7604 25 Feb 19 nicklas 214   padding: 0px;
7604 25 Feb 19 nicklas 215 }
7604 25 Feb 19 nicklas 216
7604 25 Feb 19 nicklas 217 .biomateriallist .item:hover .label
7604 25 Feb 19 nicklas 218 {
7604 25 Feb 19 nicklas 219   border-style: solid;
7604 25 Feb 19 nicklas 220 }
7604 25 Feb 19 nicklas 221
7604 25 Feb 19 nicklas 222
7604 25 Feb 19 nicklas 223 .biomateriallist .item.selected .label 
7604 25 Feb 19 nicklas 224 {
7604 25 Feb 19 nicklas 225   color: #FFFFFF;
7604 25 Feb 19 nicklas 226   background: #2288AA;
7604 25 Feb 19 nicklas 227   font-weight: bold;
7604 25 Feb 19 nicklas 228 }
7604 25 Feb 19 nicklas 229
7604 25 Feb 19 nicklas 230 .biomateriallist .item .info 
7604 25 Feb 19 nicklas 231 {
7604 25 Feb 19 nicklas 232   width: 20px;
7604 25 Feb 19 nicklas 233   font-size: smaller;
7604 25 Feb 19 nicklas 234   padding-left: 3px;
7604 25 Feb 19 nicklas 235   padding-right: 3px;
7604 25 Feb 19 nicklas 236   border-right-width: 1px;
7604 25 Feb 19 nicklas 237   text-align: center;
7604 25 Feb 19 nicklas 238   vertical-align: middle;
7604 25 Feb 19 nicklas 239 }
7604 25 Feb 19 nicklas 240
7604 25 Feb 19 nicklas 241 .biomateriallist .item .label {
7604 25 Feb 19 nicklas 242   padding-left: 2px;
5527 13 Dec 10 nicklas 243 }