extensions/net.sf.basedb.meludi/trunk/resources/css/plate.css

Code
Comments
Other
Rev Date Author Line
2933 14 Nov 14 olle 1 @charset "UTF-8";
2933 14 Nov 14 olle 2
2933 14 Nov 14 olle 3 /* A bioplate */
2933 14 Nov 14 olle 4 .plate 
2933 14 Nov 14 olle 5 {
2933 14 Nov 14 olle 6   border: 1px solid #808080;
2933 14 Nov 14 olle 7   background-color: #FFFFFF;
2933 14 Nov 14 olle 8 }
2933 14 Nov 14 olle 9
2933 14 Nov 14 olle 10 /* A header for the plate typically contain row and column coordinates */
2933 14 Nov 14 olle 11 .plate th
2933 14 Nov 14 olle 12 {
2933 14 Nov 14 olle 13   background-color: #E0E0E0;
2933 14 Nov 14 olle 14   font-weight: bold;
2933 14 Nov 14 olle 15   text-align: center;
2933 14 Nov 14 olle 16   padding: 2px;
2933 14 Nov 14 olle 17 }
2933 14 Nov 14 olle 18
2933 14 Nov 14 olle 19 .plate th.pool
2933 14 Nov 14 olle 20 {
2933 14 Nov 14 olle 21   border-left: 1px solid #808080;
2933 14 Nov 14 olle 22   border-right: 1px solid #808080;
2933 14 Nov 14 olle 23   border-top: 1px solid #808080;
2933 14 Nov 14 olle 24   padding-left: 1px;
2933 14 Nov 14 olle 25 }
2933 14 Nov 14 olle 26
2933 14 Nov 14 olle 27 .plate th.pool:last-child
2933 14 Nov 14 olle 28 {
2933 14 Nov 14 olle 29   border-right: 0;
2933 14 Nov 14 olle 30 }
2933 14 Nov 14 olle 31
2933 14 Nov 14 olle 32 .plate th.nopool-before-pool, .plate th.nopool-after-pool
2933 14 Nov 14 olle 33 {
2933 14 Nov 14 olle 34   border-top: 1px solid #E0E0E0;
2933 14 Nov 14 olle 35   background-color: #FFFFFF;
2933 14 Nov 14 olle 36 }
2933 14 Nov 14 olle 37
2933 14 Nov 14 olle 38
2933 14 Nov 14 olle 39 .plate th.nopool-after-pool
2933 14 Nov 14 olle 40 {
2933 14 Nov 14 olle 41   border-left: 1px solid #A0A0A0;
2933 14 Nov 14 olle 42 }
2933 14 Nov 14 olle 43
2933 14 Nov 14 olle 44 .plate th.nopool-before-pool
2933 14 Nov 14 olle 45 {
2933 14 Nov 14 olle 46   border-right: 1px solid #A0A0A0;
2933 14 Nov 14 olle 47 }
2933 14 Nov 14 olle 48
2933 14 Nov 14 olle 49 /* A well on the bioplate */
2933 14 Nov 14 olle 50 .well
2933 14 Nov 14 olle 51 {
2933 14 Nov 14 olle 52   border-top: 1px dotted #A0A0A0;
2933 14 Nov 14 olle 53   border-left: 1px dotted #A0A0A0;
2933 14 Nov 14 olle 54   border-bottom: 1px solid transparent;
2933 14 Nov 14 olle 55   border-right: 1px solid transparent;
2933 14 Nov 14 olle 56   padding: 2px;
2933 14 Nov 14 olle 57   overflow: hidden;
2933 14 Nov 14 olle 58   vertical-align: top;
2933 14 Nov 14 olle 59   text-align: left;
2933 14 Nov 14 olle 60
2933 14 Nov 14 olle 61   height: 60px;
2933 14 Nov 14 olle 62   max-height: 60px;
2933 14 Nov 14 olle 63   min-height: 60px;
3449 28 Jul 15 olle 64   width: 100px;
3449 28 Jul 15 olle 65   max-width: 100px;
3449 28 Jul 15 olle 66   min-width: 100px;
2933 14 Nov 14 olle 67   font-size: 75%;
2933 14 Nov 14 olle 68 }
2933 14 Nov 14 olle 69
2933 14 Nov 14 olle 70 /* Pairs of columns make up a single pool and have a darker left border */
2933 14 Nov 14 olle 71 .well.pool-left
2933 14 Nov 14 olle 72 {
2933 14 Nov 14 olle 73   border-left-color: #808080;
2933 14 Nov 14 olle 74   border-left-style: solid;
2933 14 Nov 14 olle 75 }
2933 14 Nov 14 olle 76
2933 14 Nov 14 olle 77 .well.pool-right
2933 14 Nov 14 olle 78 {
2933 14 Nov 14 olle 79   border-right-color: #808080;
2933 14 Nov 14 olle 80   border-left-style: solid;
2933 14 Nov 14 olle 81   
2933 14 Nov 14 olle 82 }
2933 14 Nov 14 olle 83
2933 14 Nov 14 olle 84 /* No left border on the first well on each row  */
2933 14 Nov 14 olle 85 .well.col-0
2933 14 Nov 14 olle 86 {
2933 14 Nov 14 olle 87   border-left: 1px solid transparent;
2933 14 Nov 14 olle 88 }
2933 14 Nov 14 olle 89
2933 14 Nov 14 olle 90 .well.col-11
2933 14 Nov 14 olle 91 {
2933 14 Nov 14 olle 92   border-right: 1px solid transparent;
2933 14 Nov 14 olle 93 }
2933 14 Nov 14 olle 94
2933 14 Nov 14 olle 95 /* No top border on the first well in each column  */
2933 14 Nov 14 olle 96 .row-0 .well
2933 14 Nov 14 olle 97 {
2933 14 Nov 14 olle 98   border-top: 1px solid transparent;
2933 14 Nov 14 olle 99 }
2933 14 Nov 14 olle 100
2933 14 Nov 14 olle 101 /* The center primary wells (typically the 8 center columns) and marked with a darker background */
2933 14 Nov 14 olle 102 .well.primary
2933 14 Nov 14 olle 103 {
2933 14 Nov 14 olle 104   background-color: #F0F0F0;
2933 14 Nov 14 olle 105 }
2933 14 Nov 14 olle 106
2933 14 Nov 14 olle 107 /* Colored wells are used to indicate barcode variants */
2933 14 Nov 14 olle 108 .well.bg-green, .bg-green
2933 14 Nov 14 olle 109 {
2933 14 Nov 14 olle 110   background-color: #D8F8D8;
2933 14 Nov 14 olle 111 }
2933 14 Nov 14 olle 112 .well.bg-green-dk, .bg-green-dk
2933 14 Nov 14 olle 113 {
2933 14 Nov 14 olle 114   background-color: #A0F8A0;
2933 14 Nov 14 olle 115 }
2933 14 Nov 14 olle 116
2933 14 Nov 14 olle 117 .well.bg-blue, .bg-blue
2933 14 Nov 14 olle 118 {
2933 14 Nov 14 olle 119   background-color: #D8E8FF;
2933 14 Nov 14 olle 120 }
2933 14 Nov 14 olle 121 .well.bg-blue-dk, .bg-blue-dk
2933 14 Nov 14 olle 122 {
2933 14 Nov 14 olle 123   background-color: #B8B8FF;
2933 14 Nov 14 olle 124 }
2933 14 Nov 14 olle 125
2933 14 Nov 14 olle 126 .well.bg-yellow, .bg-yellow
2933 14 Nov 14 olle 127 {
2933 14 Nov 14 olle 128   background-color: #FFFFD8;
2933 14 Nov 14 olle 129 }
2933 14 Nov 14 olle 130 .well.bg-yellow-dk, .bg-yellow-dk
2933 14 Nov 14 olle 131 {
2933 14 Nov 14 olle 132   background-color: #FFFFA0;
2933 14 Nov 14 olle 133 }
2933 14 Nov 14 olle 134
2933 14 Nov 14 olle 135 .well.bg-modified, .bg-modified
2933 14 Nov 14 olle 136 {
2933 14 Nov 14 olle 137   background-color: #FFF800;
2933 14 Nov 14 olle 138 }
2933 14 Nov 14 olle 139
2933 14 Nov 14 olle 140
2933 14 Nov 14 olle 141 /* A well that has an error for some reason */
2933 14 Nov 14 olle 142 .well.err
2933 14 Nov 14 olle 143 {
2933 14 Nov 14 olle 144   background-image: url('../images/error.png') !important;
2933 14 Nov 14 olle 145   background-position: 98% 25%;
2933 14 Nov 14 olle 146   background-repeat: no-repeat;
2933 14 Nov 14 olle 147   background-color: #FFC8C8 !important;
2933 14 Nov 14 olle 148 }
2933 14 Nov 14 olle 149
2933 14 Nov 14 olle 150 /* A well that has an warning for some reason */
2933 14 Nov 14 olle 151 .well.warning
2933 14 Nov 14 olle 152 {
2933 14 Nov 14 olle 153   background-image: url('../images/warning.png') !important;
2933 14 Nov 14 olle 154   background-position: 98% 25%;
2933 14 Nov 14 olle 155   background-repeat: no-repeat;
2933 14 Nov 14 olle 156   background-color: #FFC8C8 !important;
2933 14 Nov 14 olle 157 }
2933 14 Nov 14 olle 158
2933 14 Nov 14 olle 159 .wizard.flash-error .well.err
2933 14 Nov 14 olle 160 {
2933 14 Nov 14 olle 161   animation: enlarge 1s infinite;
2933 14 Nov 14 olle 162 }
2933 14 Nov 14 olle 163
2933 14 Nov 14 olle 164 /* A selected well have a different background color */
2933 14 Nov 14 olle 165 .well.selected
2933 14 Nov 14 olle 166 {
2933 14 Nov 14 olle 167   background-color: #D8FFFF !important;
2933 14 Nov 14 olle 168   color: #002288;
2933 14 Nov 14 olle 169 }
2933 14 Nov 14 olle 170
2933 14 Nov 14 olle 171 /* And a bit darker for the primary wells */
2933 14 Nov 14 olle 172 .well.primary.selected
2933 14 Nov 14 olle 173 {
2933 14 Nov 14 olle 174   background-color: #B0FFFF !important;
2933 14 Nov 14 olle 175 }
2933 14 Nov 14 olle 176
2933 14 Nov 14 olle 177 .well.selected.bg-green
2933 14 Nov 14 olle 178 {
2933 14 Nov 14 olle 179   background-color: #A0E0A0 !important;
2933 14 Nov 14 olle 180   color: #002288;
2933 14 Nov 14 olle 181 }
2933 14 Nov 14 olle 182
2933 14 Nov 14 olle 183 .well.selected.bg-blue
2933 14 Nov 14 olle 184 {
2933 14 Nov 14 olle 185   background-color: #A0C0EE !important;
2933 14 Nov 14 olle 186   color: #002288;
2933 14 Nov 14 olle 187 }
2933 14 Nov 14 olle 188
2933 14 Nov 14 olle 189 .well.selected.bg-yellow
2933 14 Nov 14 olle 190 {
2933 14 Nov 14 olle 191   background-color: #FFEEA0 !important;
2933 14 Nov 14 olle 192   color: #002288;
2933 14 Nov 14 olle 193 }
2933 14 Nov 14 olle 194
2933 14 Nov 14 olle 195 .well.selected.bg-modified
2933 14 Nov 14 olle 196 {
2933 14 Nov 14 olle 197   background-color: #DDD800 !important;
2933 14 Nov 14 olle 198   color: #002288;
2933 14 Nov 14 olle 199 }
2933 14 Nov 14 olle 200
2933 14 Nov 14 olle 201
2933 14 Nov 14 olle 202 .well.err.selected, .well.warning.selected
2933 14 Nov 14 olle 203 {
2933 14 Nov 14 olle 204   background-color: #E8D8FF !important;
2933 14 Nov 14 olle 205 }
2933 14 Nov 14 olle 206
2933 14 Nov 14 olle 207 .well.clipboard
2933 14 Nov 14 olle 208 {
2933 14 Nov 14 olle 209   border: 2px dashed #2288AA;
2933 14 Nov 14 olle 210   border-radius: 4px;
2933 14 Nov 14 olle 211   padding: 1px;
2933 14 Nov 14 olle 212 }
2933 14 Nov 14 olle 213
2933 14 Nov 14 olle 214 .well .copy-text
2933 14 Nov 14 olle 215 {
2933 14 Nov 14 olle 216   color: #999999;
2933 14 Nov 14 olle 217   font-style: italic;
2933 14 Nov 14 olle 218 }
2933 14 Nov 14 olle 219
2933 14 Nov 14 olle 220 /* Name of extract is in bold */
2933 14 Nov 14 olle 221 .well .name
2933 14 Nov 14 olle 222 {
2933 14 Nov 14 olle 223   font-weight: bold;
2933 14 Nov 14 olle 224 }
2933 14 Nov 14 olle 225
2933 14 Nov 14 olle 226 /* Error and warning messages are red */
2933 14 Nov 14 olle 227 .well .err-msg, .well .warn-msg
2933 14 Nov 14 olle 228 {
2933 14 Nov 14 olle 229   color: #C80000;
2933 14 Nov 14 olle 230   font-style: italic;
2933 14 Nov 14 olle 231 }
2933 14 Nov 14 olle 232
2933 14 Nov 14 olle 233 /* Display a border around the well when pointing on it with the mouse */
2933 14 Nov 14 olle 234 .well:hover 
2933 14 Nov 14 olle 235 {
2933 14 Nov 14 olle 236   cursor: pointer;
2933 14 Nov 14 olle 237   padding: 1px;
2933 14 Nov 14 olle 238   border: 2px solid #2288AA;
2933 14 Nov 14 olle 239   border-radius: 4px;
2933 14 Nov 14 olle 240 }
2933 14 Nov 14 olle 241
2933 14 Nov 14 olle 242 /* Highlight all replicated wells when the mouse is over one */
2933 14 Nov 14 olle 243 .well.highlight-replicated
2933 14 Nov 14 olle 244 {
2933 14 Nov 14 olle 245   padding: 1px;
2933 14 Nov 14 olle 246   border: 2px dashed #2288AA;
2933 14 Nov 14 olle 247   border-radius: 4px;
2933 14 Nov 14 olle 248 }
2933 14 Nov 14 olle 249
2933 14 Nov 14 olle 250 /* When highlightning an entire row, the wells have a top and bottom border */
2933 14 Nov 14 olle 251 .well.highlight-row
2933 14 Nov 14 olle 252 {
2933 14 Nov 14 olle 253   padding-top: 1px;
2933 14 Nov 14 olle 254   padding-bottom: 1px;
2933 14 Nov 14 olle 255   border-top: 2px solid #2288AA;
2933 14 Nov 14 olle 256   border-bottom: 2px solid #2288AA;
2933 14 Nov 14 olle 257 }
2933 14 Nov 14 olle 258
2933 14 Nov 14 olle 259 /* The last well have a right border and rounded corners */
2933 14 Nov 14 olle 260 .well.highlight-row:last-child
2933 14 Nov 14 olle 261 {
2933 14 Nov 14 olle 262   padding-right: 1px;
2933 14 Nov 14 olle 263   border-right: 2px solid #2288AA;
2933 14 Nov 14 olle 264   border-radius: 0 4px 4px 0;
2933 14 Nov 14 olle 265 }
2933 14 Nov 14 olle 266
2933 14 Nov 14 olle 267 /* The header column have a left border */
2933 14 Nov 14 olle 268 th.highlight-row
2933 14 Nov 14 olle 269 {
2933 14 Nov 14 olle 270   padding-left: 1px;
2933 14 Nov 14 olle 271   border-top: 2px solid #2288AA;
2933 14 Nov 14 olle 272   border-left: 2px solid #2288AA;
2933 14 Nov 14 olle 273   border-bottom: 2px solid #2288AA;
2933 14 Nov 14 olle 274   border-radius: 4px 0 0 4px;
2933 14 Nov 14 olle 275 }
2933 14 Nov 14 olle 276
2933 14 Nov 14 olle 277 /* When highlightning an entire column, the wells have a left and right border */
2933 14 Nov 14 olle 278 .well.highlight-column
2933 14 Nov 14 olle 279 {
2933 14 Nov 14 olle 280   padding-left: 1px;
2933 14 Nov 14 olle 281   padding-right: 1px;
2933 14 Nov 14 olle 282   border-left: 2px solid #2288AA;
2933 14 Nov 14 olle 283   border-right: 2px solid #2288AA;
2933 14 Nov 14 olle 284 }
2933 14 Nov 14 olle 285
2933 14 Nov 14 olle 286 /* The last well have a bottom border */
2933 14 Nov 14 olle 287 .plate tr:last-child .well.highlight-column
2933 14 Nov 14 olle 288 {
2933 14 Nov 14 olle 289   padding-bottom: 1px;
2933 14 Nov 14 olle 290   border-bottom: 2px solid #2288AA;
2933 14 Nov 14 olle 291   border-radius: 0 0 4px 4px;
2933 14 Nov 14 olle 292 }
2933 14 Nov 14 olle 293
2933 14 Nov 14 olle 294 /* The header row has a top border */
2933 14 Nov 14 olle 295 th.highlight-column
2933 14 Nov 14 olle 296 {
2933 14 Nov 14 olle 297   padding-top: 0;
2933 14 Nov 14 olle 298   border-top: 2px solid #2288AA;
2933 14 Nov 14 olle 299   border-left: 2px solid #2288AA;
2933 14 Nov 14 olle 300   border-right: 2px solid #2288AA;
2933 14 Nov 14 olle 301   border-radius: 4px 4px 0 0;
2933 14 Nov 14 olle 302 }
2933 14 Nov 14 olle 303
2933 14 Nov 14 olle 304 /* When highlightning a pool the left column has a lefter border... */
2933 14 Nov 14 olle 305 .well.pool-left.highlight-pool
2933 14 Nov 14 olle 306 {
2933 14 Nov 14 olle 307   padding-left: 1px;
2933 14 Nov 14 olle 308   border-left: 2px solid #2288AA;
2933 14 Nov 14 olle 309 }
2933 14 Nov 14 olle 310
2933 14 Nov 14 olle 311 /* ...and the right column has a right border */
2933 14 Nov 14 olle 312 .well.pool-right.highlight-pool
2933 14 Nov 14 olle 313 {
2933 14 Nov 14 olle 314   padding-right: 1px;
2933 14 Nov 14 olle 315   border-right: 2px solid #2288AA;
2933 14 Nov 14 olle 316 }
2933 14 Nov 14 olle 317
2933 14 Nov 14 olle 318 /* First row need a top border as well */
2933 14 Nov 14 olle 319 .row-0 .well.pool-left.highlight-pool
2933 14 Nov 14 olle 320 {
2933 14 Nov 14 olle 321   padding-top: 1px;
2933 14 Nov 14 olle 322   border-top: 2px solid #2288AA;
2933 14 Nov 14 olle 323   border-radius: 4px 0 0 0;
2933 14 Nov 14 olle 324 }
2933 14 Nov 14 olle 325 .row-0 .well.pool-middle.highlight-pool
2933 14 Nov 14 olle 326 {
2933 14 Nov 14 olle 327   padding-top: 1px;
2933 14 Nov 14 olle 328   border-top: 2px solid #2288AA;
2933 14 Nov 14 olle 329 }
2933 14 Nov 14 olle 330 .row-0 .well.pool-right.highlight-pool
2933 14 Nov 14 olle 331 {
2933 14 Nov 14 olle 332   padding-top: 1px;
2933 14 Nov 14 olle 333   border-top: 2px solid #2288AA;
2933 14 Nov 14 olle 334   border-radius: 0 4px 0 0;
2933 14 Nov 14 olle 335 }
2933 14 Nov 14 olle 336
2933 14 Nov 14 olle 337 /* And the bottom pool header is a single column */
2933 14 Nov 14 olle 338 .plate th.pool.highlight-pool
2933 14 Nov 14 olle 339 {
2933 14 Nov 14 olle 340   padding-bottom: 0;
2933 14 Nov 14 olle 341   border-bottom: 2px solid #2288AA;
2933 14 Nov 14 olle 342   border-left: 2px solid #2288AA;
2933 14 Nov 14 olle 343   border-right: 2px solid #2288AA;
2933 14 Nov 14 olle 344   border-radius: 0 0 4px 4px;
2933 14 Nov 14 olle 345 }
2933 14 Nov 14 olle 346

Generated on Tue Nov 21 03:25:46 2023 (UTC) by svndigest 0.11.2pre (dev build 1672)