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

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

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