www/include/styles/main.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) 2005 Nicklas Nordborg
7604 25 Feb 19 nicklas 5   Copyright (C) 2006 Jari Häkkinen, Nicklas Nordborg, Martin Svensson
7604 25 Feb 19 nicklas 6   Copyright (C) 2007 Nicklas Nordborg
7604 25 Feb 19 nicklas 7
7604 25 Feb 19 nicklas 8   This file is part of BASE - BioArray Software Environment.
7604 25 Feb 19 nicklas 9   Available at http://base.thep.lu.se/
7604 25 Feb 19 nicklas 10
7604 25 Feb 19 nicklas 11   BASE is free software; you can redistribute it and/or
7604 25 Feb 19 nicklas 12   modify it under the terms of the GNU General Public License
7604 25 Feb 19 nicklas 13   as published by the Free Software Foundation; either version 3
7604 25 Feb 19 nicklas 14   of the License, or (at your option) any later version.
7604 25 Feb 19 nicklas 15
7604 25 Feb 19 nicklas 16   BASE is distributed in the hope that it will be useful,
7604 25 Feb 19 nicklas 17   but WITHOUT ANY WARRANTY; without even the implied warranty of
7604 25 Feb 19 nicklas 18   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
7604 25 Feb 19 nicklas 19   GNU General Public License for more details.
7604 25 Feb 19 nicklas 20
7604 25 Feb 19 nicklas 21   You should have received a copy of the GNU General Public License
7604 25 Feb 19 nicklas 22   along with BASE. If not, see <http://www.gnu.org/licenses/>.
7604 25 Feb 19 nicklas 23   ------------------------------------------------------------------
7604 25 Feb 19 nicklas 24
7604 25 Feb 19 nicklas 25   Main style sheet. Is included on every page.
7604 25 Feb 19 nicklas 26
7604 25 Feb 19 nicklas 27   @author Nicklas
7604 25 Feb 19 nicklas 28   @version 2.0
7604 25 Feb 19 nicklas 29 */
7604 25 Feb 19 nicklas 30
7604 25 Feb 19 nicklas 31 /* 
7604 25 Feb 19 nicklas 32   Basic elements 
7604 25 Feb 19 nicklas 33   --------------  
7604 25 Feb 19 nicklas 34 */
7604 25 Feb 19 nicklas 35 *
7604 25 Feb 19 nicklas 36 {
7604 25 Feb 19 nicklas 37   border-color: #A0A0A0;
7604 25 Feb 19 nicklas 38   border-style: solid;
7604 25 Feb 19 nicklas 39   border-width: 0;
7604 25 Feb 19 nicklas 40   margin: 0;
7604 25 Feb 19 nicklas 41   padding: 0;
7604 25 Feb 19 nicklas 42   box-sizing: border-box;
7604 25 Feb 19 nicklas 43 }
7604 25 Feb 19 nicklas 44
7604 25 Feb 19 nicklas 45 body 
7604 25 Feb 19 nicklas 46 {
7604 25 Feb 19 nicklas 47   color: #000000;
7604 25 Feb 19 nicklas 48   background-color: #FFFFFF;
7604 25 Feb 19 nicklas 49   font-family: verdana, arial, sans-serif;
7604 25 Feb 19 nicklas 50 }
7604 25 Feb 19 nicklas 51
7604 25 Feb 19 nicklas 52 /* Align with text */
7604 25 Feb 19 nicklas 53 img
7604 25 Feb 19 nicklas 54 {
7604 25 Feb 19 nicklas 55   vertical-align: text-bottom;
7604 25 Feb 19 nicklas 56 }
7604 25 Feb 19 nicklas 57
7604 25 Feb 19 nicklas 58 /* Monospace:ed elements should use same font size in IE and Firefox */
7604 25 Feb 19 nicklas 59 textarea, pre, code
7604 25 Feb 19 nicklas 60 {
7604 25 Feb 19 nicklas 61   font-family: monospace,Courier New;
7604 25 Feb 19 nicklas 62 }
7604 25 Feb 19 nicklas 63
7604 25 Feb 19 nicklas 64 ul, ol
7604 25 Feb 19 nicklas 65 {
7604 25 Feb 19 nicklas 66   padding-left: 2em;  
7604 25 Feb 19 nicklas 67 }
7604 25 Feb 19 nicklas 68
8160 07 Jun 23 nicklas 69 /* User for annotations with multiple values when a simple comma-separated list is not good enough */
8160 07 Jun 23 nicklas 70 ul.bullet-list
8160 07 Jun 23 nicklas 71 {
8160 07 Jun 23 nicklas 72   padding-left: 1em;
8160 07 Jun 23 nicklas 73 }
8160 07 Jun 23 nicklas 74 ul.bullet-list > li
8160 07 Jun 23 nicklas 75 {
8160 07 Jun 23 nicklas 76   margin: 0.25em;
8160 07 Jun 23 nicklas 77 }
8160 07 Jun 23 nicklas 78
8160 07 Jun 23 nicklas 79
7604 25 Feb 19 nicklas 80 /* Tables should have no border, padding or cellspacing by default */
7604 25 Feb 19 nicklas 81 table
7604 25 Feb 19 nicklas 82 {
7604 25 Feb 19 nicklas 83   border-spacing: 0;
7604 25 Feb 19 nicklas 84   border-collapse: collapse;
7604 25 Feb 19 nicklas 85 }
7604 25 Feb 19 nicklas 86
7604 25 Feb 19 nicklas 87
7604 25 Feb 19 nicklas 88 /* Linked elements should display a pointer cursor and be underlined on hover only */
7604 25 Feb 19 nicklas 89 a, label, .link
7604 25 Feb 19 nicklas 90 {
7604 25 Feb 19 nicklas 91   color: #0000CC;
7604 25 Feb 19 nicklas 92   cursor: pointer;
7604 25 Feb 19 nicklas 93   text-decoration: none;
7604 25 Feb 19 nicklas 94 }
7604 25 Feb 19 nicklas 95
7604 25 Feb 19 nicklas 96 a:hover, label:hover, .link:hover
7604 25 Feb 19 nicklas 97 {
7604 25 Feb 19 nicklas 98   text-decoration: underline;
7604 25 Feb 19 nicklas 99 }
7604 25 Feb 19 nicklas 100
7604 25 Feb 19 nicklas 101 /* Disabled links are grayed out and not underlined */
7604 25 Feb 19 nicklas 102 a.disabled, label.disabled, .link.disabled 
7604 25 Feb 19 nicklas 103 {
7604 25 Feb 19 nicklas 104   pointer-events: none;
7604 25 Feb 19 nicklas 105   cursor: default;
7604 25 Feb 19 nicklas 106 }
7604 25 Feb 19 nicklas 107 a.disabled:hover, label.disabled:hover, .link.disabled:hover 
7604 25 Feb 19 nicklas 108 {
7604 25 Feb 19 nicklas 109   text-decoration: none;
7604 25 Feb 19 nicklas 110 }
7604 25 Feb 19 nicklas 111
7604 25 Feb 19 nicklas 112 /* Draggable items have a 'drag' cursor */
7604 25 Feb 19 nicklas 113 *[draggable]
7604 25 Feb 19 nicklas 114 {
7604 25 Feb 19 nicklas 115   cursor: move; /* IE only support 'move', but 'grab' is looking better in FF */
7604 25 Feb 19 nicklas 116   cursor: grab;
7604 25 Feb 19 nicklas 117 }
7604 25 Feb 19 nicklas 118
7604 25 Feb 19 nicklas 119 /* Common header styles (eg. color, font-size, etc.) */
7604 25 Feb 19 nicklas 120 h1
7604 25 Feb 19 nicklas 121 {
7604 25 Feb 19 nicklas 122   font-size: 1.4em;
7604 25 Feb 19 nicklas 123   font-weight: bold;
7604 25 Feb 19 nicklas 124   color: #224488;
7604 25 Feb 19 nicklas 125   white-space: nowrap;
7604 25 Feb 19 nicklas 126 }
7604 25 Feb 19 nicklas 127
7604 25 Feb 19 nicklas 128 .default h1
7604 25 Feb 19 nicklas 129 {
7604 25 Feb 19 nicklas 130   position: absolute;
7604 25 Feb 19 nicklas 131   left: 0;
7604 25 Feb 19 nicklas 132   right: 0;
7604 25 Feb 19 nicklas 133   /* NOTE! Use 'rem' unit to avoid font-size multiplier */
7604 25 Feb 19 nicklas 134   top:  2.25rem;
7604 25 Feb 19 nicklas 135   height: 2.25rem;
7604 25 Feb 19 nicklas 136 }
7604 25 Feb 19 nicklas 137
7604 25 Feb 19 nicklas 138 .default h1:before
7604 25 Feb 19 nicklas 139 {
7604 25 Feb 19 nicklas 140   color: #2288AA;
7604 25 Feb 19 nicklas 141   content: '::';
7604 25 Feb 19 nicklas 142   padding-left: 8px;
7604 25 Feb 19 nicklas 143   padding-right: 4px;
7604 25 Feb 19 nicklas 144 }
7604 25 Feb 19 nicklas 145
7604 25 Feb 19 nicklas 146 .default .content
7604 25 Feb 19 nicklas 147 {
7604 25 Feb 19 nicklas 148   position: absolute;
7604 25 Feb 19 nicklas 149   left: 0px;
7604 25 Feb 19 nicklas 150   right: 0px;
7604 25 Feb 19 nicklas 151   top:  4.5em;
7604 25 Feb 19 nicklas 152   bottom: 0px;
7604 25 Feb 19 nicklas 153   overflow: auto;
7604 25 Feb 19 nicklas 154 }
7604 25 Feb 19 nicklas 155
7894 08 Dec 20 nicklas 156 .content.disabled
7894 08 Dec 20 nicklas 157 {
7894 08 Dec 20 nicklas 158   opacity: 0.5;
7894 08 Dec 20 nicklas 159   filter: url(filters.svg#grayscale);
7894 08 Dec 20 nicklas 160   pointer-events: none;
7894 08 Dec 20 nicklas 161   cursor: default;
7894 08 Dec 20 nicklas 162 }
7894 08 Dec 20 nicklas 163
7604 25 Feb 19 nicklas 164 /* h2 is a section header */
7604 25 Feb 19 nicklas 165 h2
7604 25 Feb 19 nicklas 166 {
7604 25 Feb 19 nicklas 167   font-size: 1.10em;
7604 25 Feb 19 nicklas 168   font-weight: bold;
7604 25 Feb 19 nicklas 169   color: #224488;
7604 25 Feb 19 nicklas 170   white-space: nowrap;
7604 25 Feb 19 nicklas 171 }
7604 25 Feb 19 nicklas 172
7604 25 Feb 19 nicklas 173 /*
7604 25 Feb 19 nicklas 174   A hideable section can be opened/collapsed
7604 25 Feb 19 nicklas 175 */
7604 25 Feb 19 nicklas 176 .hideablesection
7604 25 Feb 19 nicklas 177 {
7604 25 Feb 19 nicklas 178   border-bottom-width: 1px;
7604 25 Feb 19 nicklas 179   border-bottom-style: dotted;
7604 25 Feb 19 nicklas 180   margin-top: 0.5em;
7604 25 Feb 19 nicklas 181   padding-bottom: 0.5em;
7604 25 Feb 19 nicklas 182 }
7604 25 Feb 19 nicklas 183
7604 25 Feb 19 nicklas 184 /* The title of the section */
7604 25 Feb 19 nicklas 185 .hideablesection > h2
7604 25 Feb 19 nicklas 186 {
7604 25 Feb 19 nicklas 187   padding: 0 2px 2px 2px;
7604 25 Feb 19 nicklas 188 }
7604 25 Feb 19 nicklas 189
7604 25 Feb 19 nicklas 190 /* The contents of the section */
7604 25 Feb 19 nicklas 191 .hideablesection > div
7604 25 Feb 19 nicklas 192 {
7604 25 Feb 19 nicklas 193   padding-left: 18px; 
7604 25 Feb 19 nicklas 194   padding-right: 8px;
7604 25 Feb 19 nicklas 195 }
7604 25 Feb 19 nicklas 196
7604 25 Feb 19 nicklas 197
7604 25 Feb 19 nicklas 198 /* 
7604 25 Feb 19 nicklas 199   Buttons and related 
7604 25 Feb 19 nicklas 200   -------------------
7604 25 Feb 19 nicklas 201 */
7604 25 Feb 19 nicklas 202
7604 25 Feb 19 nicklas 203 /* A button group is a single-row table with one button in each cell */
7604 25 Feb 19 nicklas 204 .buttongroup
7604 25 Feb 19 nicklas 205 {}
7604 25 Feb 19 nicklas 206
7604 25 Feb 19 nicklas 207 .buttongroup > table
7604 25 Feb 19 nicklas 208 {
7604 25 Feb 19 nicklas 209   /* Center the table inside the div */
7604 25 Feb 19 nicklas 210   margin-left: auto; 
7604 25 Feb 19 nicklas 211   margin-right: auto;
7604 25 Feb 19 nicklas 212   /* Adds 6px between each button */
7604 25 Feb 19 nicklas 213   border-spacing: 6px 0px;
7604 25 Feb 19 nicklas 214   border-collapse: separate;
7604 25 Feb 19 nicklas 215 }
7604 25 Feb 19 nicklas 216
7604 25 Feb 19 nicklas 217 .buttongroup.vertical > table
7604 25 Feb 19 nicklas 218 {
7604 25 Feb 19 nicklas 219   border-spacing: 0px 6px;
7604 25 Feb 19 nicklas 220 }
7604 25 Feb 19 nicklas 221
7604 25 Feb 19 nicklas 222 /* Generic button, standalone or in a toolbar, define colors only */
8083 20 Oct 22 nicklas 223 .button, .tab, ::file-selector-button
7604 25 Feb 19 nicklas 224 {
7604 25 Feb 19 nicklas 225   background-color: #E8E8E8;
7604 25 Feb 19 nicklas 226   cursor: pointer; 
7604 25 Feb 19 nicklas 227   white-space: nowrap;
7604 25 Feb 19 nicklas 228 }
7604 25 Feb 19 nicklas 229
7604 25 Feb 19 nicklas 230 .interactable:focus
7604 25 Feb 19 nicklas 231 {
7604 25 Feb 19 nicklas 232   outline: 0;
7604 25 Feb 19 nicklas 233 }
7604 25 Feb 19 nicklas 234
7604 25 Feb 19 nicklas 235 .interactable:hover, .interactable:focus, .interactable.active,
8083 20 Oct 22 nicklas 236 input:hover, textarea:hover, select:hover, input:focus, textarea:focus, select:focus, ::file-selector-button:hover
7604 25 Feb 19 nicklas 237 {
7604 25 Feb 19 nicklas 238   border-color: #2288AA;
7604 25 Feb 19 nicklas 239 }
7604 25 Feb 19 nicklas 240
7604 25 Feb 19 nicklas 241 .interactable.selected, .selected .interactable
7604 25 Feb 19 nicklas 242 {
7604 25 Feb 19 nicklas 243   background-color: #2288AA;
7604 25 Feb 19 nicklas 244   color: #FFFFFF;
7604 25 Feb 19 nicklas 245 }
7604 25 Feb 19 nicklas 246
7604 25 Feb 19 nicklas 247 .interactable.disabled, label.disabled, .link.disabled
7604 25 Feb 19 nicklas 248 {
7604 25 Feb 19 nicklas 249   color: #666666;
7604 25 Feb 19 nicklas 250 }
7604 25 Feb 19 nicklas 251
7604 25 Feb 19 nicklas 252 .interactable.disabled img, img.disabled, .link.disabled img
7604 25 Feb 19 nicklas 253 {
7604 25 Feb 19 nicklas 254   opacity: 0.5;
7604 25 Feb 19 nicklas 255   filter: url(filters.svg#grayscale);
7604 25 Feb 19 nicklas 256 }
7604 25 Feb 19 nicklas 257
7894 08 Dec 20 nicklas 258
7604 25 Feb 19 nicklas 259 .button.disabled
7604 25 Feb 19 nicklas 260 {
7604 25 Feb 19 nicklas 261   pointer-events: none;
7604 25 Feb 19 nicklas 262   cursor: default;
7604 25 Feb 19 nicklas 263 }
7604 25 Feb 19 nicklas 264
7604 25 Feb 19 nicklas 265 /* A single standalone button */
8083 20 Oct 22 nicklas 266 .basicbutton, ::file-selector-button
7604 25 Feb 19 nicklas 267 {
7604 25 Feb 19 nicklas 268   display: inline-block;
7604 25 Feb 19 nicklas 269   margin: 1px;
7604 25 Feb 19 nicklas 270   border-width: 1px;
7604 25 Feb 19 nicklas 271   border-radius: 4px;
7604 25 Feb 19 nicklas 272   padding: 1px 5px 2px 5px;
7604 25 Feb 19 nicklas 273   text-align: center;
7604 25 Feb 19 nicklas 274   white-space: nowrap;
7604 25 Feb 19 nicklas 275   box-sizing: content-box;
7604 25 Feb 19 nicklas 276 }
7604 25 Feb 19 nicklas 277
8083 20 Oct 22 nicklas 278 /* We need some additional styling for resetting */
8083 20 Oct 22 nicklas 279 ::file-selector-button
8083 20 Oct 22 nicklas 280 {
8083 20 Oct 22 nicklas 281   border-style: solid;
8083 20 Oct 22 nicklas 282   border-color: inherit;
8083 20 Oct 22 nicklas 283   margin-right: 4px;
8083 20 Oct 22 nicklas 284   padding-top: 2px;
8083 20 Oct 22 nicklas 285 }
8083 20 Oct 22 nicklas 286
7604 25 Feb 19 nicklas 287 .buttongroup .basicbutton
7604 25 Feb 19 nicklas 288 {
7604 25 Feb 19 nicklas 289   display: block;
7604 25 Feb 19 nicklas 290 }
7604 25 Feb 19 nicklas 291
7604 25 Feb 19 nicklas 292 /* Make room for the icon */
7604 25 Feb 19 nicklas 293 .basicbutton > img
7604 25 Feb 19 nicklas 294 {
7604 25 Feb 19 nicklas 295   padding-right: 2px;
7604 25 Feb 19 nicklas 296 }
7604 25 Feb 19 nicklas 297
8144 21 Apr 23 nicklas 298 .basicbutton.icon-to-right > img
8144 21 Apr 23 nicklas 299 {
8144 21 Apr 23 nicklas 300   float: right;
8144 21 Apr 23 nicklas 301   padding-left: 2px;
8144 21 Apr 23 nicklas 302 }
8144 21 Apr 23 nicklas 303
7604 25 Feb 19 nicklas 304 /* Highlight the button when the mouse is over it */
8083 20 Oct 22 nicklas 305 .basicbutton:hover, .basicbutton:focus, ::file-selector-button:hover
7604 25 Feb 19 nicklas 306 {
7604 25 Feb 19 nicklas 307   /* 1+1=0+2 so that the button is not moving */
7604 25 Feb 19 nicklas 308   margin: 0;
7604 25 Feb 19 nicklas 309   border-width: 2px;
7604 25 Feb 19 nicklas 310   cursor: pointer;
7604 25 Feb 19 nicklas 311 }
7604 25 Feb 19 nicklas 312
8083 20 Oct 22 nicklas 313 ::file-selector-button:hover
8083 20 Oct 22 nicklas 314 {
8083 20 Oct 22 nicklas 315   /* Since we have 4px without hover */
8083 20 Oct 22 nicklas 316   margin-right: 3px;
8083 20 Oct 22 nicklas 317 }
8083 20 Oct 22 nicklas 318
8083 20 Oct 22 nicklas 319
7604 25 Feb 19 nicklas 320 .basicbutton.square 
7604 25 Feb 19 nicklas 321 {
7604 25 Feb 19 nicklas 322   padding: 4px;
7604 25 Feb 19 nicklas 323 }
7604 25 Feb 19 nicklas 324
7604 25 Feb 19 nicklas 325 .basicbutton.leftaligned
7604 25 Feb 19 nicklas 326 {
7604 25 Feb 19 nicklas 327   text-align: left;
7604 25 Feb 19 nicklas 328 }
7604 25 Feb 19 nicklas 329
7604 25 Feb 19 nicklas 330 /* A disabled button should be more gray */
7604 25 Feb 19 nicklas 331 .basicbutton.disabled, .basicbutton.disabled:hover
7604 25 Feb 19 nicklas 332 {
7604 25 Feb 19 nicklas 333   margin: 1px;
7604 25 Feb 19 nicklas 334   border-width: 1px;
7604 25 Feb 19 nicklas 335 }
7604 25 Feb 19 nicklas 336
7604 25 Feb 19 nicklas 337
7604 25 Feb 19 nicklas 338 img.helpicon, img.zoomicon
7604 25 Feb 19 nicklas 339 {
7604 25 Feb 19 nicklas 340   cursor: pointer;
7604 25 Feb 19 nicklas 341 }
7604 25 Feb 19 nicklas 342
7604 25 Feb 19 nicklas 343
7604 25 Feb 19 nicklas 344 /* 
7604 25 Feb 19 nicklas 345   Notes and messages
7604 25 Feb 19 nicklas 346   ------------------
7604 25 Feb 19 nicklas 347 */
7604 25 Feb 19 nicklas 348
7604 25 Feb 19 nicklas 349 /* Container that apply padding, margin and border to messages */
7604 25 Feb 19 nicklas 350 .messagecontainer
7604 25 Feb 19 nicklas 351 {
7604 25 Feb 19 nicklas 352   margin: 0.25em;
7604 25 Feb 19 nicklas 353   padding: 0.25em;
7604 25 Feb 19 nicklas 354   border-width: 1px;
7604 25 Feb 19 nicklas 355   border-radius: 5px;
7604 25 Feb 19 nicklas 356 }
7604 25 Feb 19 nicklas 357
7604 25 Feb 19 nicklas 358 /* Error messages have red background */
7604 25 Feb 19 nicklas 359 .error 
7604 25 Feb 19 nicklas 360 {
7604 25 Feb 19 nicklas 361   color: #FFFFFF !important;
7604 25 Feb 19 nicklas 362   background-color: #C80000 !important;
7604 25 Feb 19 nicklas 363   font-weight: normal !important;
7604 25 Feb 19 nicklas 364   border-color: #A00000 !important;
7604 25 Feb 19 nicklas 365 }
7604 25 Feb 19 nicklas 366
7604 25 Feb 19 nicklas 367 .messagecontainer.error
7604 25 Feb 19 nicklas 368 {
7604 25 Feb 19 nicklas 369   border-width: 2px;
7604 25 Feb 19 nicklas 370 }
7604 25 Feb 19 nicklas 371
7604 25 Feb 19 nicklas 372 .help, .note
7604 25 Feb 19 nicklas 373 {
7604 25 Feb 19 nicklas 374   background-color: #F8F8E8;
7604 25 Feb 19 nicklas 375 }
7604 25 Feb 19 nicklas 376
7604 25 Feb 19 nicklas 377 .stacktrace 
7604 25 Feb 19 nicklas 378 {
7604 25 Feb 19 nicklas 379   white-space: pre;
7604 25 Feb 19 nicklas 380   font-family: monospace,Courier new;
7604 25 Feb 19 nicklas 381   font-size: 0.9em;
7604 25 Feb 19 nicklas 382   overflow: auto;
7604 25 Feb 19 nicklas 383 }
7604 25 Feb 19 nicklas 384
7604 25 Feb 19 nicklas 385
7604 25 Feb 19 nicklas 386 /* A notification with a small pointer to indicate an invalid form value */
7604 25 Feb 19 nicklas 387 .notify
7604 25 Feb 19 nicklas 388 {
7604 25 Feb 19 nicklas 389   position: absolute;
7604 25 Feb 19 nicklas 390   width: 20em;
7604 25 Feb 19 nicklas 391   background-color: #FFD8D8;
7604 25 Feb 19 nicklas 392   color: #000000;
7604 25 Feb 19 nicklas 393   border-color: #AA8844;
7604 25 Feb 19 nicklas 394   border-width: 2px;
7604 25 Feb 19 nicklas 395   font-weight: bold;
7604 25 Feb 19 nicklas 396   padding: 4px;
7604 25 Feb 19 nicklas 397   border-radius: 4px;
7604 25 Feb 19 nicklas 398   box-shadow: 0px 0px 2px 5px #FFFFFF;
7993 09 Aug 21 nicklas 399   z-index: 999;
7604 25 Feb 19 nicklas 400 }
7604 25 Feb 19 nicklas 401
7604 25 Feb 19 nicklas 402 /* First child div is the outermost "pointer" */
7604 25 Feb 19 nicklas 403 .notify > div:first-child
7604 25 Feb 19 nicklas 404 {
7604 25 Feb 19 nicklas 405   border-color: inherit;
7604 25 Feb 19 nicklas 406   border-width: 6px;
7604 25 Feb 19 nicklas 407 }
7604 25 Feb 19 nicklas 408
7604 25 Feb 19 nicklas 409 /* 
7604 25 Feb 19 nicklas 410   Second child div is the innermost "pointer" and should use 
7604 25 Feb 19 nicklas 411   the same color as the 'notify' background
7604 25 Feb 19 nicklas 412 */
7604 25 Feb 19 nicklas 413 .notify > div:first-child > div
7604 25 Feb 19 nicklas 414 {
7604 25 Feb 19 nicklas 415   border-color: #FFD8D8;
7604 25 Feb 19 nicklas 416   border-width: 6px;
7604 25 Feb 19 nicklas 417 }
7604 25 Feb 19 nicklas 418
7604 25 Feb 19 nicklas 419 /* A less wide notification */
7604 25 Feb 19 nicklas 420 .notify.small
7604 25 Feb 19 nicklas 421 {
7604 25 Feb 19 nicklas 422   width: 15em;
7604 25 Feb 19 nicklas 423 }
7604 25 Feb 19 nicklas 424
7604 25 Feb 19 nicklas 425 /* The pointer is above the 'notify' message */
7604 25 Feb 19 nicklas 426 .notify > div.pointer-above
7604 25 Feb 19 nicklas 427 {
7604 25 Feb 19 nicklas 428   position: absolute;  
7604 25 Feb 19 nicklas 429   width: 0;
7604 25 Feb 19 nicklas 430   height: 0;
7604 25 Feb 19 nicklas 431   top: -8px;
7604 25 Feb 19 nicklas 432   left: 10px;
7604 25 Feb 19 nicklas 433   border-top-width: 0;
7604 25 Feb 19 nicklas 434   border-left-color:  transparent !important;
7604 25 Feb 19 nicklas 435   border-right-color: transparent !important
7604 25 Feb 19 nicklas 436 }
7604 25 Feb 19 nicklas 437
7604 25 Feb 19 nicklas 438 /* Inner div is filling the pointer with the same background as the notification */
7604 25 Feb 19 nicklas 439 .notify > div.pointer-above > div
7604 25 Feb 19 nicklas 440 {
7604 25 Feb 19 nicklas 441   position: absolute;
7604 25 Feb 19 nicklas 442   width: 0;
7604 25 Feb 19 nicklas 443   height: 0;
7604 25 Feb 19 nicklas 444   left: -6px;
7604 25 Feb 19 nicklas 445   top: 3px;
7604 25 Feb 19 nicklas 446    border-top-width: 0;
7604 25 Feb 19 nicklas 447   border-left-color: transparent !important;
7604 25 Feb 19 nicklas 448   border-right-color: transparent !important;
7604 25 Feb 19 nicklas 449 }
7604 25 Feb 19 nicklas 450
7604 25 Feb 19 nicklas 451 /* The pointer is below the 'notify' message */
7604 25 Feb 19 nicklas 452 .notify > div.pointer-below
7604 25 Feb 19 nicklas 453 {
7604 25 Feb 19 nicklas 454   position: absolute;  
7604 25 Feb 19 nicklas 455   width: 0;
7604 25 Feb 19 nicklas 456   height: 0;
7604 25 Feb 19 nicklas 457   bottom: -8px;
7604 25 Feb 19 nicklas 458   left: 10px;
7604 25 Feb 19 nicklas 459   border-bottom-width: 0;
7604 25 Feb 19 nicklas 460   border-left-color:  transparent !important;
7604 25 Feb 19 nicklas 461   border-right-color: transparent !important;
7604 25 Feb 19 nicklas 462 }
7604 25 Feb 19 nicklas 463
7604 25 Feb 19 nicklas 464 /* Inner div is filling the pointer with the same background as the notification */
7604 25 Feb 19 nicklas 465 .notify > div.pointer-below > div
7604 25 Feb 19 nicklas 466 {
7604 25 Feb 19 nicklas 467   position: absolute;
7604 25 Feb 19 nicklas 468   width: 0;
7604 25 Feb 19 nicklas 469   height: 0;
7604 25 Feb 19 nicklas 470   left: -6px;
7604 25 Feb 19 nicklas 471   bottom: 3px;
7604 25 Feb 19 nicklas 472    border-bottom-width: 0;
7604 25 Feb 19 nicklas 473   border-left-color:  transparent !important;
7604 25 Feb 19 nicklas 474   border-right-color: transparent !important;
7604 25 Feb 19 nicklas 475 }
7604 25 Feb 19 nicklas 476
7604 25 Feb 19 nicklas 477 /* The pointer is to the left the 'notify' message */
7604 25 Feb 19 nicklas 478 .notify > div.pointer-left
7604 25 Feb 19 nicklas 479 {
7604 25 Feb 19 nicklas 480   position: absolute;  
7604 25 Feb 19 nicklas 481   width: 0;
7604 25 Feb 19 nicklas 482   height: 0;
7604 25 Feb 19 nicklas 483   top: 10px;
7604 25 Feb 19 nicklas 484   left: -8px;
7604 25 Feb 19 nicklas 485   border-left-width: 0;
7604 25 Feb 19 nicklas 486   border-top-color:  transparent !important;
7604 25 Feb 19 nicklas 487   border-bottom-color: transparent !important;
7604 25 Feb 19 nicklas 488 }
7604 25 Feb 19 nicklas 489
7604 25 Feb 19 nicklas 490 /* Inner div is filling the pointer with the same background as the notification */
7604 25 Feb 19 nicklas 491 .notify > div.pointer-left > div
7604 25 Feb 19 nicklas 492 {
7604 25 Feb 19 nicklas 493   position: absolute;
7604 25 Feb 19 nicklas 494   width: 0;
7604 25 Feb 19 nicklas 495   height: 0;
7604 25 Feb 19 nicklas 496   top: -6px;
7604 25 Feb 19 nicklas 497   left: 3px;
7604 25 Feb 19 nicklas 498    border-left-width: 0;
7604 25 Feb 19 nicklas 499   border-top-color: transparent !important;
7604 25 Feb 19 nicklas 500   border-bottom-color: transparent !important;
7604 25 Feb 19 nicklas 501 }
7604 25 Feb 19 nicklas 502
7604 25 Feb 19 nicklas 503 /* Leave room for the icon */
7604 25 Feb 19 nicklas 504 .notify .notify-message
7604 25 Feb 19 nicklas 505 {
7604 25 Feb 19 nicklas 506   margin-left: 20px;
7604 25 Feb 19 nicklas 507 }
7604 25 Feb 19 nicklas 508
7604 25 Feb 19 nicklas 509 /* Add an icon to the left */
7604 25 Feb 19 nicklas 510 .notify .notify-message:before
7604 25 Feb 19 nicklas 511 {
7604 25 Feb 19 nicklas 512   margin-left: -20px;
7604 25 Feb 19 nicklas 513   content: url('../../images/notify.png');
7604 25 Feb 19 nicklas 514   float: left;
7604 25 Feb 19 nicklas 515 }
7604 25 Feb 19 nicklas 516
7604 25 Feb 19 nicklas 517 /*
7604 25 Feb 19 nicklas 518   Invisible data-holder container
7604 25 Feb 19 nicklas 519   -------------------------------
7604 25 Feb 19 nicklas 520 */
7604 25 Feb 19 nicklas 521 .datacontainer
7604 25 Feb 19 nicklas 522 {
7604 25 Feb 19 nicklas 523   display: none;
7604 25 Feb 19 nicklas 524 }
7604 25 Feb 19 nicklas 525
7604 25 Feb 19 nicklas 526 /* 
7604 25 Feb 19 nicklas 527   Form input fields
7604 25 Feb 19 nicklas 528   -----------------
7604 25 Feb 19 nicklas 529 */
7604 25 Feb 19 nicklas 530
7604 25 Feb 19 nicklas 531 /* Regular text-field controls + selection list */
7604 25 Feb 19 nicklas 532 input, textarea, select, .interactable.input
7604 25 Feb 19 nicklas 533 {
7604 25 Feb 19 nicklas 534   /* content-box, otherwise the content will jump around when we modify border */
7604 25 Feb 19 nicklas 535   box-sizing: content-box;
7604 25 Feb 19 nicklas 536   font-size: 1em;
7604 25 Feb 19 nicklas 537   margin: 1px;
7604 25 Feb 19 nicklas 538   border-width: 1px;
7604 25 Feb 19 nicklas 539   border-radius: 4px;
7604 25 Feb 19 nicklas 540   padding: 1px 2px 1px 2px;
7604 25 Feb 19 nicklas 541   background: #FFFFFF;
7604 25 Feb 19 nicklas 542   color: #000000;
7604 25 Feb 19 nicklas 543 }
7604 25 Feb 19 nicklas 544
7604 25 Feb 19 nicklas 545 option
7604 25 Feb 19 nicklas 546 {
7604 25 Feb 19 nicklas 547   padding-right: 8px;
7604 25 Feb 19 nicklas 548 }
7604 25 Feb 19 nicklas 549
7604 25 Feb 19 nicklas 550 /* Make a bigger blue-ish border when the field is active */
7604 25 Feb 19 nicklas 551 input:focus, textarea:focus, select:focus, .input:focus
7604 25 Feb 19 nicklas 552 {
7604 25 Feb 19 nicklas 553   margin: 0;
7604 25 Feb 19 nicklas 554   border-width: 2px;
7604 25 Feb 19 nicklas 555   outline: 0;
7604 25 Feb 19 nicklas 556 }
7604 25 Feb 19 nicklas 557
7604 25 Feb 19 nicklas 558 /* Input fields should be "close to" 100% wide,  need to use lower value due to padding */
7604 25 Feb 19 nicklas 559 .input100 input, .input100 textarea
7604 25 Feb 19 nicklas 560 {
7604 25 Feb 19 nicklas 561   width: 98%;
7604 25 Feb 19 nicklas 562   width: calc(100% - 8px);
7604 25 Feb 19 nicklas 563 }
7604 25 Feb 19 nicklas 564
7604 25 Feb 19 nicklas 565 input[type="radio"], input[type="checkbox"]
7604 25 Feb 19 nicklas 566 {
7604 25 Feb 19 nicklas 567   cursor: pointer;
7604 25 Feb 19 nicklas 568   vertical-align: text-bottom;
7604 25 Feb 19 nicklas 569   margin: 0 3px 0 3px;
7604 25 Feb 19 nicklas 570   padding: 0;
7604 25 Feb 19 nicklas 571   width: auto;
7604 25 Feb 19 nicklas 572 }
7604 25 Feb 19 nicklas 573
7604 25 Feb 19 nicklas 574 /* Make sure focus is not lost on radio buttons and checkboxes */
7604 25 Feb 19 nicklas 575 input[type="radio"]:focus, input[type="checkbox"]:focus
7604 25 Feb 19 nicklas 576 {
7604 25 Feb 19 nicklas 577   outline-width: 1px;
7604 25 Feb 19 nicklas 578   outline-style: dotted;
7604 25 Feb 19 nicklas 579 }
7604 25 Feb 19 nicklas 580
7604 25 Feb 19 nicklas 581 /* Dynamically resize textarea, should be "close to" 100% but must be lower due to padding */
7604 25 Feb 19 nicklas 582 textarea.autoheight
7604 25 Feb 19 nicklas 583 {
7604 25 Feb 19 nicklas 584   height: 97%;
7604 25 Feb 19 nicklas 585   height: calc(100% - 6px);
7604 25 Feb 19 nicklas 586 }
7604 25 Feb 19 nicklas 587
7604 25 Feb 19 nicklas 588 /* Fixed size selection list */
7604 25 Feb 19 nicklas 589 .selectionlist select, select.selectionlist 
7604 25 Feb 19 nicklas 590 {
7604 25 Feb 19 nicklas 591   width: 18em;
7604 25 Feb 19 nicklas 592   margin-right: 5px;
7604 25 Feb 19 nicklas 593 }
7604 25 Feb 19 nicklas 594
7604 25 Feb 19 nicklas 595 .input100 .selectionlist > table
7604 25 Feb 19 nicklas 596 {
7604 25 Feb 19 nicklas 597   width: 100%;
7604 25 Feb 19 nicklas 598 }
7604 25 Feb 19 nicklas 599
7604 25 Feb 19 nicklas 600 .input100 .selectionlist > table > tbody > tr > td:first-child
7604 25 Feb 19 nicklas 601 {
7604 25 Feb 19 nicklas 602   width: 90%;
7604 25 Feb 19 nicklas 603   padding-right: 5px;
7604 25 Feb 19 nicklas 604 }
7604 25 Feb 19 nicklas 605
7604 25 Feb 19 nicklas 606 .input100 .selectionlist select
7604 25 Feb 19 nicklas 607 {
7604 25 Feb 19 nicklas 608   width: 98%;
7604 25 Feb 19 nicklas 609   width: calc(100% - 10px);
7604 25 Feb 19 nicklas 610 }
7604 25 Feb 19 nicklas 611
7604 25 Feb 19 nicklas 612 /* required fields have a blue-ish background and solid border */
7604 25 Feb 19 nicklas 613 input.required, select.required, textarea.required, .input.required
7604 25 Feb 19 nicklas 614 {
7604 25 Feb 19 nicklas 615   background-color: #D0F0FF;
7604 25 Feb 19 nicklas 616   border-color: #2288AA;
7604 25 Feb 19 nicklas 617 }
7604 25 Feb 19 nicklas 618 /* Unchangeable fields have a yellow-ish background */
7604 25 Feb 19 nicklas 619
7604 25 Feb 19 nicklas 620 input.unchangeable, select.unchangeable, textarea.unchangeable, .unchangeable select 
7604 25 Feb 19 nicklas 621 {
7604 25 Feb 19 nicklas 622   background-color: #FFF0D0;
7604 25 Feb 19 nicklas 623 }
7604 25 Feb 19 nicklas 624
7604 25 Feb 19 nicklas 625 /* Disabled input fields are grayed out and inactive */
7604 25 Feb 19 nicklas 626 input:disabled, textarea:disabled, select:disabled, input.disabled, .input.disabled
7604 25 Feb 19 nicklas 627 {
7604 25 Feb 19 nicklas 628   border-width: 1px;
7604 25 Feb 19 nicklas 629   border-style: dashed;
7604 25 Feb 19 nicklas 630   border-color: #A0A0A0;
7604 25 Feb 19 nicklas 631   background-color: #F0F0F0;
7604 25 Feb 19 nicklas 632   color: #666666;
7604 25 Feb 19 nicklas 633   pointer-events: none;
7604 25 Feb 19 nicklas 634   cursor: default;
7604 25 Feb 19 nicklas 635 }
7604 25 Feb 19 nicklas 636
7604 25 Feb 19 nicklas 637
7604 25 Feb 19 nicklas 638 /* Special header-like options in selection lists */
7604 25 Feb 19 nicklas 639 .selectoptionheader, .recentheader, .defaultheader
7604 25 Feb 19 nicklas 640 {
7604 25 Feb 19 nicklas 641   font-weight: bold;
7604 25 Feb 19 nicklas 642   color: #000000;
7604 25 Feb 19 nicklas 643 }
7604 25 Feb 19 nicklas 644
7604 25 Feb 19 nicklas 645 .selectoptionautodetect 
7604 25 Feb 19 nicklas 646 {
7604 25 Feb 19 nicklas 647   font-style: italic;
7604 25 Feb 19 nicklas 648 }
7604 25 Feb 19 nicklas 649
7604 25 Feb 19 nicklas 650 .selectoptionindent 
7604 25 Feb 19 nicklas 651 {
7604 25 Feb 19 nicklas 652   padding-left: 0.5em;
7604 25 Feb 19 nicklas 653 }
7604 25 Feb 19 nicklas 654
7604 25 Feb 19 nicklas 655 .selectionlist .removed 
7604 25 Feb 19 nicklas 656 {
7604 25 Feb 19 nicklas 657   font-style: italic;
7604 25 Feb 19 nicklas 658   color: #999999;      
7604 25 Feb 19 nicklas 659 }
7604 25 Feb 19 nicklas 660
7604 25 Feb 19 nicklas 661
7604 25 Feb 19 nicklas 662
7604 25 Feb 19 nicklas 663
7604 25 Feb 19 nicklas 664
7604 25 Feb 19 nicklas 665 /*
7604 25 Feb 19 nicklas 666   Generic commonly used styles
7604 25 Feb 19 nicklas 667   ----------------------------
7604 25 Feb 19 nicklas 668 */
7604 25 Feb 19 nicklas 669
7604 25 Feb 19 nicklas 670 /* Add a 1-pixel border around the element */
7604 25 Feb 19 nicklas 671 .fullborder
7604 25 Feb 19 nicklas 672 {
7604 25 Feb 19 nicklas 673   border-width: 1px;
7604 25 Feb 19 nicklas 674 }
7604 25 Feb 19 nicklas 675
7604 25 Feb 19 nicklas 676 /* Add a 1-pixel border to the bottom om an element */
7604 25 Feb 19 nicklas 677 .bottomborder
7604 25 Feb 19 nicklas 678 {
7604 25 Feb 19 nicklas 679   border-bottom-width: 1px;
7604 25 Feb 19 nicklas 680 }
7604 25 Feb 19 nicklas 681
7604 25 Feb 19 nicklas 682 /* Add a 1-pixel border to the top of an element */
7604 25 Feb 19 nicklas 683 .topborder
7604 25 Feb 19 nicklas 684 {
7604 25 Feb 19 nicklas 685   border-top-width: 1px;
7604 25 Feb 19 nicklas 686 }
7604 25 Feb 19 nicklas 687
7604 25 Feb 19 nicklas 688 /* Add a 1-pixel border to the right of an element */
7604 25 Feb 19 nicklas 689 .rightborder
7604 25 Feb 19 nicklas 690 {
7604 25 Feb 19 nicklas 691   border-right-width: 1px;
7604 25 Feb 19 nicklas 692 }
7604 25 Feb 19 nicklas 693
7604 25 Feb 19 nicklas 694 /* Add a 1-pixel border to the left of an element */
7604 25 Feb 19 nicklas 695 .leftborder
7604 25 Feb 19 nicklas 696 {
7604 25 Feb 19 nicklas 697   border-left-width: 1px;
7604 25 Feb 19 nicklas 698 }
7604 25 Feb 19 nicklas 699
7604 25 Feb 19 nicklas 700 /* Fill the element with the common background color */
7604 25 Feb 19 nicklas 701 .bg-filled-100, .filled, table.fullform > tbody > tr > th
7604 25 Feb 19 nicklas 702 {
7604 25 Feb 19 nicklas 703   background-color: rgb(232, 232, 232);
7604 25 Feb 19 nicklas 704 }
7604 25 Feb 19 nicklas 705
7604 25 Feb 19 nicklas 706 /* Semi-transparant versions of the above */
7604 25 Feb 19 nicklas 707 .bg-filled-50
7604 25 Feb 19 nicklas 708 {
7604 25 Feb 19 nicklas 709   background-color: rgba(208, 208, 208, 0.5);
7604 25 Feb 19 nicklas 710 }
7604 25 Feb 19 nicklas 711
7604 25 Feb 19 nicklas 712 /* Makes the element absolutely positioned filling the entire parent area */
7604 25 Feb 19 nicklas 713 .absolutefull
7604 25 Feb 19 nicklas 714 {
7604 25 Feb 19 nicklas 715   position: absolute; 
7604 25 Feb 19 nicklas 716   top: 0; 
7604 25 Feb 19 nicklas 717   bottom: 0; 
7604 25 Feb 19 nicklas 718   left: 0; 
7604 25 Feb 19 nicklas 719   right: 0;
7604 25 Feb 19 nicklas 720   overflow: auto;
7604 25 Feb 19 nicklas 721 }
7604 25 Feb 19 nicklas 722
7604 25 Feb 19 nicklas 723 /* Outline for a colored box; background should be set on the element */
7604 25 Feb 19 nicklas 724 .colorbox 
7604 25 Feb 19 nicklas 725 {
7604 25 Feb 19 nicklas 726   width: 1em; 
7604 25 Feb 19 nicklas 727   height: 1em; 
7604 25 Feb 19 nicklas 728   border: 1px solid #A0A0A0; 
7604 25 Feb 19 nicklas 729 }
7604 25 Feb 19 nicklas 730
7604 25 Feb 19 nicklas 731 /* Color box inline with other text */
7604 25 Feb 19 nicklas 732 .colorbox.inline 
7604 25 Feb 19 nicklas 733 {
7604 25 Feb 19 nicklas 734   display: inline-block;
7604 25 Feb 19 nicklas 735 }
7604 25 Feb 19 nicklas 736
7604 25 Feb 19 nicklas 737 .colorbox.large
7604 25 Feb 19 nicklas 738 {
7604 25 Feb 19 nicklas 739   width: 1.25em;
7604 25 Feb 19 nicklas 740   height: 1.25em;
7604 25 Feb 19 nicklas 741 }
7604 25 Feb 19 nicklas 742
7604 25 Feb 19 nicklas 743 /* A colorbox without color */
7604 25 Feb 19 nicklas 744 .colorbox.nan 
7604 25 Feb 19 nicklas 745 {
7604 25 Feb 19 nicklas 746   border: 0px;
7604 25 Feb 19 nicklas 747 }
7604 25 Feb 19 nicklas 748
7759 27 Nov 19 nicklas 749 .file-actions
7759 27 Nov 19 nicklas 750 {
7759 27 Nov 19 nicklas 751   white-space: nowrap;
7759 27 Nov 19 nicklas 752 }
7759 27 Nov 19 nicklas 753
7759 27 Nov 19 nicklas 754 .file-actions > span + span
7759 27 Nov 19 nicklas 755 {
7759 27 Nov 19 nicklas 756   padding-left: 2px;
7759 27 Nov 19 nicklas 757 }
7759 27 Nov 19 nicklas 758
7604 25 Feb 19 nicklas 759 .highlight:hover
7604 25 Feb 19 nicklas 760 {
7604 25 Feb 19 nicklas 761   background-color: #F8F8E8 !important;
8083 20 Oct 22 nicklas 762   color: inherit !important;
7604 25 Feb 19 nicklas 763   border-top: 1px solid #2288AA !important;
7604 25 Feb 19 nicklas 764   border-bottom: 1px solid #2288AA !important;
7604 25 Feb 19 nicklas 765   transition: all 0.3s ease 0.1s;
7604 25 Feb 19 nicklas 766   -moz-transition: all 0.3s ease 0.1s;
7604 25 Feb 19 nicklas 767   -webkit-transition: all 0.3s ease 0.1s;
7604 25 Feb 19 nicklas 768 }
7604 25 Feb 19 nicklas 769
7943 04 May 21 nicklas 770 .highlight:hover > td, .highlight:hover > th
7943 04 May 21 nicklas 771 {
7943 04 May 21 nicklas 772   background-color: #F8F8E8 !important;
8083 20 Oct 22 nicklas 773   color: inherit !important;
7943 04 May 21 nicklas 774   border-top: 1px solid #2288AA !important;
7943 04 May 21 nicklas 775   border-bottom: 1px solid #2288AA !important;
7943 04 May 21 nicklas 776   transition: all 0.3s ease 0.1s;
7943 04 May 21 nicklas 777   -moz-transition: all 0.3s ease 0.1s;
7943 04 May 21 nicklas 778   -webkit-transition: all 0.3s ease 0.1s;
7943 04 May 21 nicklas 779 }
7943 04 May 21 nicklas 780
7943 04 May 21 nicklas 781
7604 25 Feb 19 nicklas 782 /* The subtype of an item */ 
7604 25 Feb 19 nicklas 783 .itemsubtype 
7604 25 Feb 19 nicklas 784 {
7604 25 Feb 19 nicklas 785   font-size: 0.85em;
7604 25 Feb 19 nicklas 786   color: #777777;
7604 25 Feb 19 nicklas 787 }
7604 25 Feb 19 nicklas 788
7604 25 Feb 19 nicklas 789 /* A project-specific annotation value */
7604 25 Feb 19 nicklas 790 .ps-annotation:after
7604 25 Feb 19 nicklas 791 {
7604 25 Feb 19 nicklas 792   content: '¤';
7604 25 Feb 19 nicklas 793   color: #777777;
7604 25 Feb 19 nicklas 794   margin-left: 0.25em;
7604 25 Feb 19 nicklas 795 }
7604 25 Feb 19 nicklas 796
7604 25 Feb 19 nicklas 797 /* Displays a "tooltip"-like message when hovering */
7604 25 Feb 19 nicklas 798 .ps-annotation:hover:before
7604 25 Feb 19 nicklas 799 {  
7604 25 Feb 19 nicklas 800   content: 'This is a project-specific annotation value';
7604 25 Feb 19 nicklas 801   position: absolute;
7604 25 Feb 19 nicklas 802   margin-top: 2em;
7604 25 Feb 19 nicklas 803   margin-left: -1em;
7604 25 Feb 19 nicklas 804   background-color: #ffffff;
7604 25 Feb 19 nicklas 805   color: #000000;
7604 25 Feb 19 nicklas 806   border-color: #999999;
7604 25 Feb 19 nicklas 807   border-style: solid;
7604 25 Feb 19 nicklas 808   border-width: 1px;
7604 25 Feb 19 nicklas 809   font-size: 0.9em;
7604 25 Feb 19 nicklas 810   padding: 0.25em 0.5em;
7604 25 Feb 19 nicklas 811 }
7604 25 Feb 19 nicklas 812
7604 25 Feb 19 nicklas 813 /*
7604 25 Feb 19 nicklas 814   Table listings
7604 25 Feb 19 nicklas 815   --------------
7604 25 Feb 19 nicklas 816 */
7604 25 Feb 19 nicklas 817 /*
7604 25 Feb 19 nicklas 818   A 100% wide and high table with two columns (prompt+value)
7604 25 Feb 19 nicklas 819   * Table rows are max one line high by default
7604 25 Feb 19 nicklas 820     Use <tr class="double"> to get two or <tr class="dynamic"> 
7604 25 Feb 19 nicklas 821     to get more
7604 25 Feb 19 nicklas 822   * Header column is 150px wide by default
7604 25 Feb 19 nicklas 823     Use <table class="fullform smaller"> to get 100px
7604 25 Feb 19 nicklas 824     or <table class="fullform larger">
7604 25 Feb 19 nicklas 825 */
7604 25 Feb 19 nicklas 826 table.fullform
7604 25 Feb 19 nicklas 827 {
7604 25 Feb 19 nicklas 828   width: 100%;
7604 25 Feb 19 nicklas 829   height: 100%;
7604 25 Feb 19 nicklas 830 }
7604 25 Feb 19 nicklas 831
7604 25 Feb 19 nicklas 832 /* Default table row is one line only */
7604 25 Feb 19 nicklas 833 table.fullform > tbody > tr
7604 25 Feb 19 nicklas 834 {
7604 25 Feb 19 nicklas 835   /* height is really minimum height */
7604 25 Feb 19 nicklas 836   height: 1.6em;
7604 25 Feb 19 nicklas 837   max-height: 1.75em;
7604 25 Feb 19 nicklas 838 }
7604 25 Feb 19 nicklas 839
7604 25 Feb 19 nicklas 840 /* A double hight table row */
7604 25 Feb 19 nicklas 841 table.fullform > tbody > tr.double
7604 25 Feb 19 nicklas 842 {
7604 25 Feb 19 nicklas 843   /* height is really minimum height */
7604 25 Feb 19 nicklas 844   height: 3.2em;
7604 25 Feb 19 nicklas 845   max-height: 3.5em;
7604 25 Feb 19 nicklas 846   vertical-align: top;
7604 25 Feb 19 nicklas 847 }
7604 25 Feb 19 nicklas 848
7604 25 Feb 19 nicklas 849 /* No max hight specified, but expected to be bigger than two lines */
7604 25 Feb 19 nicklas 850 table.fullform > tbody > tr.big
7604 25 Feb 19 nicklas 851 {
7604 25 Feb 19 nicklas 852   vertical-align: top;
7604 25 Feb 19 nicklas 853   height: auto;
7604 25 Feb 19 nicklas 854   max-height: 100%;
7604 25 Feb 19 nicklas 855 }
7604 25 Feb 19 nicklas 856
7604 25 Feb 19 nicklas 857 table.fullform > tbody > tr.dynamic
7604 25 Feb 19 nicklas 858 {
7604 25 Feb 19 nicklas 859   height: auto;
7604 25 Feb 19 nicklas 860   max-height: 100%;
7604 25 Feb 19 nicklas 861   vertical-align: top;
7604 25 Feb 19 nicklas 862 }
7604 25 Feb 19 nicklas 863
7604 25 Feb 19 nicklas 864 /* Expands vertically as needed if only a single tbody */
7604 25 Feb 19 nicklas 865 table.fullform > tbody:first-child > tr.dynamic
7604 25 Feb 19 nicklas 866 {
7604 25 Feb 19 nicklas 867   height: 100%;
7604 25 Feb 19 nicklas 868   max-height: 100%;
7604 25 Feb 19 nicklas 869   vertical-align: top;
7604 25 Feb 19 nicklas 870 }
7604 25 Feb 19 nicklas 871
7604 25 Feb 19 nicklas 872 /* The first column should be a header */
7604 25 Feb 19 nicklas 873 table.fullform > tbody > tr > th
7604 25 Feb 19 nicklas 874 {
7604 25 Feb 19 nicklas 875   width: 10em;
7604 25 Feb 19 nicklas 876   max-width: 12em;
7604 25 Feb 19 nicklas 877   overflow: hidden;
7604 25 Feb 19 nicklas 878   text-overflow: ellipsis;
7604 25 Feb 19 nicklas 879   font-weight: bold;
7604 25 Feb 19 nicklas 880   white-space: nowrap;
7604 25 Feb 19 nicklas 881   text-align: left;
7604 25 Feb 19 nicklas 882   padding: 1px 4px 1px 6px;
7604 25 Feb 19 nicklas 883   border-top-width: 1px;
7604 25 Feb 19 nicklas 884   border-top-style: dotted;
7604 25 Feb 19 nicklas 885   border-right-width: 1px;
7604 25 Feb 19 nicklas 886 }
7604 25 Feb 19 nicklas 887
7604 25 Feb 19 nicklas 888 /* Regular cells have a white background */
7604 25 Feb 19 nicklas 889 table.fullform > tbody > tr > td
7604 25 Feb 19 nicklas 890 {
7604 25 Feb 19 nicklas 891   padding: 0 2px 0 2px;
7604 25 Feb 19 nicklas 892 }
7604 25 Feb 19 nicklas 893
7604 25 Feb 19 nicklas 894 /* First row has no top border */
7604 25 Feb 19 nicklas 895 table.fullform > tbody > tr:first-child > th, table.fullform > tbody > tr:first-child > td
7604 25 Feb 19 nicklas 896 {
7604 25 Feb 19 nicklas 897   padding-top: 3px;
7604 25 Feb 19 nicklas 898   border-top-width: 0;
7604 25 Feb 19 nicklas 899 }
7604 25 Feb 19 nicklas 900
7604 25 Feb 19 nicklas 901 table.fullform > tbody > tr > th.subprompt
7604 25 Feb 19 nicklas 902 {
7604 25 Feb 19 nicklas 903   font-weight: normal;
7604 25 Feb 19 nicklas 904   text-align: right;
7604 25 Feb 19 nicklas 905   border-top-width: 0;
7604 25 Feb 19 nicklas 906 }
7604 25 Feb 19 nicklas 907
7604 25 Feb 19 nicklas 908 /* A section row should span the entire table */
7604 25 Feb 19 nicklas 909 table.fullform > tbody.sectionheader > tr > th, table.fullform > tbody.sectionheader > tr > td
7604 25 Feb 19 nicklas 910 {
7604 25 Feb 19 nicklas 911   border-top-width: 1px;
7604 25 Feb 19 nicklas 912   border-top-style: solid;
7604 25 Feb 19 nicklas 913   border-bottom-width: 1px;
7604 25 Feb 19 nicklas 914   border-bottom-style: solid;
7604 25 Feb 19 nicklas 915   border-right-width: 0;
7604 25 Feb 19 nicklas 916   white-space: normal;
7604 25 Feb 19 nicklas 917   width: auto;
7604 25 Feb 19 nicklas 918   max-width: none;
7604 25 Feb 19 nicklas 919 }
7604 25 Feb 19 nicklas 920
7604 25 Feb 19 nicklas 921 /* First child after a section header shouldn't have a top border */
7604 25 Feb 19 nicklas 922 table.fullform > tbody.sectionheader:first-child > tr > th
7604 25 Feb 19 nicklas 923 {
7604 25 Feb 19 nicklas 924   border-top-width: 0;
7604 25 Feb 19 nicklas 925 }
7604 25 Feb 19 nicklas 926
7604 25 Feb 19 nicklas 927 /* A simple section has a solid top border on the first child row */
7604 25 Feb 19 nicklas 928 table.fullform > tbody.simplesection > tr:first-child > *
7604 25 Feb 19 nicklas 929 {
7604 25 Feb 19 nicklas 930   border-top-width: 1px;
7604 25 Feb 19 nicklas 931 }
7604 25 Feb 19 nicklas 932
7604 25 Feb 19 nicklas 933 /* A smaller header column */
7604 25 Feb 19 nicklas 934 table.fullform.smaller > tbody > tr > th
7604 25 Feb 19 nicklas 935 {
7604 25 Feb 19 nicklas 936   width: 7em;
7604 25 Feb 19 nicklas 937   max-width: 9em;
7604 25 Feb 19 nicklas 938 }
7604 25 Feb 19 nicklas 939
7604 25 Feb 19 nicklas 940 /* A larger header column */
7604 25 Feb 19 nicklas 941 table.fullform.larger > tbody > tr > th
7604 25 Feb 19 nicklas 942 {
7604 25 Feb 19 nicklas 943   width: 13em;
7604 25 Feb 19 nicklas 944   max-width: 15em;
7604 25 Feb 19 nicklas 945 }
7604 25 Feb 19 nicklas 946
7604 25 Feb 19 nicklas 947 /* Make sure that dynamic textarea fill the table row */
7604 25 Feb 19 nicklas 948 table.fullform > tbody > tr.dynamic textarea
7604 25 Feb 19 nicklas 949 {
7604 25 Feb 19 nicklas 950   height: 95%;
7604 25 Feb 19 nicklas 951   height: calc(100% - 10px);
7604 25 Feb 19 nicklas 952 }
7604 25 Feb 19 nicklas 953
7604 25 Feb 19 nicklas 954 /* Use borders between td elements as well (for read-only tables) */
7604 25 Feb 19 nicklas 955 table.fullform.outlined > tbody > tr > td
7604 25 Feb 19 nicklas 956 {
7604 25 Feb 19 nicklas 957   border-top-width: 1px;
7604 25 Feb 19 nicklas 958   border-top-style: dotted;
7604 25 Feb 19 nicklas 959 }
7604 25 Feb 19 nicklas 960 table.fullform.outlined > tbody > tr:first-child > td
7604 25 Feb 19 nicklas 961 {
7604 25 Feb 19 nicklas 962   border-top-width: 0;
7604 25 Feb 19 nicklas 963 }
7604 25 Feb 19 nicklas 964
7604 25 Feb 19 nicklas 965 /* no border for a subprompt */
7604 25 Feb 19 nicklas 966 table.fullform.outlined > tbody > tr > th.subprompt + td
7604 25 Feb 19 nicklas 967 {
7604 25 Feb 19 nicklas 968   border-top-width: 0;
7604 25 Feb 19 nicklas 969 }
7604 25 Feb 19 nicklas 970
7604 25 Feb 19 nicklas 971 table.fullform th.itemstatus
7604 25 Feb 19 nicklas 972 {
7604 25 Feb 19 nicklas 973   text-align: center;
7604 25 Feb 19 nicklas 974 }
7604 25 Feb 19 nicklas 975
7604 25 Feb 19 nicklas 976 /* 
7604 25 Feb 19 nicklas 977   Our own implementation of a dropdown multi-select list control 
7604 25 Feb 19 nicklas 978   --------------------------------------------------------------
7604 25 Feb 19 nicklas 979 */
7604 25 Feb 19 nicklas 980 /* The main <tag> container */
7604 25 Feb 19 nicklas 981 div.smartinput, div.multiselect 
7604 25 Feb 19 nicklas 982 {
7604 25 Feb 19 nicklas 983   border-width: 1px;
7604 25 Feb 19 nicklas 984   margin: 1px;
7604 25 Feb 19 nicklas 985   background: #FFFFFF;
7604 25 Feb 19 nicklas 986   border-radius: 4px;
7604 25 Feb 19 nicklas 987   font-weight: normal;
7604 25 Feb 19 nicklas 988 }
7604 25 Feb 19 nicklas 989
7604 25 Feb 19 nicklas 990 div.smartinput > table, div.multiselect > table
7604 25 Feb 19 nicklas 991 {
7604 25 Feb 19 nicklas 992   width: 100%;
7604 25 Feb 19 nicklas 993   min-width: 120px;
7604 25 Feb 19 nicklas 994   border-collapse: separate;
7604 25 Feb 19 nicklas 995 }
7604 25 Feb 19 nicklas 996
7604 25 Feb 19 nicklas 997 /* 'Interactive' border when mouse is over the element */
7604 25 Feb 19 nicklas 998 div.smartinput.active, div.multiselect.active
7604 25 Feb 19 nicklas 999 {
7604 25 Feb 19 nicklas 1000   border-width: 2px;
7604 25 Feb 19 nicklas 1001   margin: 0px;
7604 25 Feb 19 nicklas 1002 }
7604 25 Feb 19 nicklas 1003
7604 25 Feb 19 nicklas 1004
7604 25 Feb 19 nicklas 1005 /* The underlying input field should not behave as other input fields */
7604 25 Feb 19 nicklas 1006 .multiselect input, .multiselect input:hover, .multiselect input:focus, .smartinput input, .smartinput input:hover, .smartinput input:focus
7604 25 Feb 19 nicklas 1007 {
7604 25 Feb 19 nicklas 1008   box-sizing: border-box;
7604 25 Feb 19 nicklas 1009   border: 0px;
7604 25 Feb 19 nicklas 1010   border-radius: 0px;
7604 25 Feb 19 nicklas 1011   margin: 0px 2px 0px 2px;
7604 25 Feb 19 nicklas 1012 }
7604 25 Feb 19 nicklas 1013
7604 25 Feb 19 nicklas 1014 /* Get rid of small '×' icon in IE */
7604 25 Feb 19 nicklas 1015 .multiselect-display::-ms-clear
7604 25 Feb 19 nicklas 1016 {
7604 25 Feb 19 nicklas 1017   display: none;
7604 25 Feb 19 nicklas 1018 }
7604 25 Feb 19 nicklas 1019
7604 25 Feb 19 nicklas 1020 /* The drop-down image */
7604 25 Feb 19 nicklas 1021 div.smartinput .dropdown, div.multiselect .dropdown
7604 25 Feb 19 nicklas 1022 {
7604 25 Feb 19 nicklas 1023   border-left-width: 0;
7604 25 Feb 19 nicklas 1024   cursor: pointer;
7604 25 Feb 19 nicklas 1025   width: 16px;
7604 25 Feb 19 nicklas 1026 }
7604 25 Feb 19 nicklas 1027
7604 25 Feb 19 nicklas 1028 /* The <div> containing list options */
7604 25 Feb 19 nicklas 1029 div.smartenum, div.multioptions
7604 25 Feb 19 nicklas 1030 {
7604 25 Feb 19 nicklas 1031   position: absolute;
7604 25 Feb 19 nicklas 1032   background-color: #FFFFFF;
7604 25 Feb 19 nicklas 1033   color: #000000;
7604 25 Feb 19 nicklas 1034   border-width: 1px;
7604 25 Feb 19 nicklas 1035   z-index: 999;
7604 25 Feb 19 nicklas 1036   overflow: auto;
7604 25 Feb 19 nicklas 1037   box-shadow: 3px 3px 5px #CCCCCC;
7604 25 Feb 19 nicklas 1038   margin-left: -2px;
7604 25 Feb 19 nicklas 1039   margin-top: 2px;
7604 25 Feb 19 nicklas 1040   min-width: 150px;
7604 25 Feb 19 nicklas 1041 }
7604 25 Feb 19 nicklas 1042
7604 25 Feb 19 nicklas 1043 div.smartenum
7604 25 Feb 19 nicklas 1044 {
7604 25 Feb 19 nicklas 1045   min-height: 15em;
7604 25 Feb 19 nicklas 1046   max-height: 30em;
7604 25 Feb 19 nicklas 1047 }
7604 25 Feb 19 nicklas 1048
7604 25 Feb 19 nicklas 1049 /* Individual options */
7604 25 Feb 19 nicklas 1050 div.smartoption, div.multioption 
7604 25 Feb 19 nicklas 1051 {
7604 25 Feb 19 nicklas 1052   cursor: pointer;
7604 25 Feb 19 nicklas 1053   padding: 2px;
7604 25 Feb 19 nicklas 1054   white-space: nowrap;
7604 25 Feb 19 nicklas 1055   overflow: hidden;
7604 25 Feb 19 nicklas 1056   border-radius: 4px;
7604 25 Feb 19 nicklas 1057 }
7604 25 Feb 19 nicklas 1058
7604 25 Feb 19 nicklas 1059 /* Put 'interactive' border around the 'active' option */
7604 25 Feb 19 nicklas 1060 div.smartoption.active, div.multioption.active 
7604 25 Feb 19 nicklas 1061 {
7604 25 Feb 19 nicklas 1062   border-width: 2px;
7604 25 Feb 19 nicklas 1063   padding: 0;
7604 25 Feb 19 nicklas 1064 }
7604 25 Feb 19 nicklas 1065
7604 25 Feb 19 nicklas 1066 /* The 'control pad' for the multi-option drop-down */
7604 25 Feb 19 nicklas 1067 div.multioptioncontrol 
7604 25 Feb 19 nicklas 1068 {
7604 25 Feb 19 nicklas 1069   border-bottom-width: 1px;
7604 25 Feb 19 nicklas 1070   padding: 2px;
7604 25 Feb 19 nicklas 1071 }
7604 25 Feb 19 nicklas 1072
7604 25 Feb 19 nicklas 1073 /* The submit icon is floated to the right */
7604 25 Feb 19 nicklas 1074 div.multioptioncontrol .submit, div.multioptioncontrol .clear
7604 25 Feb 19 nicklas 1075 {
7604 25 Feb 19 nicklas 1076   float: right;
7604 25 Feb 19 nicklas 1077   margin-left: 4px;
7604 25 Feb 19 nicklas 1078 }
7604 25 Feb 19 nicklas 1079
7604 25 Feb 19 nicklas 1080 /* Icon for displaying = or ≠ */
7604 25 Feb 19 nicklas 1081 div.multioptioncontrol .equal-or-not-equal
7604 25 Feb 19 nicklas 1082 {
7604 25 Feb 19 nicklas 1083   padding-right: 3px;
7604 25 Feb 19 nicklas 1084 }
7604 25 Feb 19 nicklas 1085
7604 25 Feb 19 nicklas 1086 div.multioptions.multiple .multioption:before
7604 25 Feb 19 nicklas 1087 {
7604 25 Feb 19 nicklas 1088   content: url('../../images/option_unselected.png');
7604 25 Feb 19 nicklas 1089   vertical-align: -0.25em;
7604 25 Feb 19 nicklas 1090 }
7604 25 Feb 19 nicklas 1091
7604 25 Feb 19 nicklas 1092 div.multioptions.multiple .multioption.checked:before
7604 25 Feb 19 nicklas 1093 {
7604 25 Feb 19 nicklas 1094   content: url('../../images/option_selected.png');
7604 25 Feb 19 nicklas 1095 }
7604 25 Feb 19 nicklas 1096
7604 25 Feb 19 nicklas 1097 div.multioptions.single .multioption:before
7604 25 Feb 19 nicklas 1098 {
7604 25 Feb 19 nicklas 1099   content: url('../../images/option_single_unselected.png');
7604 25 Feb 19 nicklas 1100   vertical-align: -0.25em;
7604 25 Feb 19 nicklas 1101 }
7604 25 Feb 19 nicklas 1102
7604 25 Feb 19 nicklas 1103 div.multioptions.single .multioption.checked:before
7604 25 Feb 19 nicklas 1104 {
7604 25 Feb 19 nicklas 1105   content: url('../../images/option_single_selected.png');
7604 25 Feb 19 nicklas 1106 }
7604 25 Feb 19 nicklas 1107
7604 25 Feb 19 nicklas 1108 .multioptionoptions 
7604 25 Feb 19 nicklas 1109 {
7604 25 Feb 19 nicklas 1110   min-height: 15em;
7604 25 Feb 19 nicklas 1111   max-height: 30em;
7604 25 Feb 19 nicklas 1112   overflow: auto;
7604 25 Feb 19 nicklas 1113 }
7604 25 Feb 19 nicklas 1114
7894 08 Dec 20 nicklas 1115 /* Main <div> for a "popup"-like message that is displayed when a list page takes a long time to load */
7894 08 Dec 20 nicklas 1116 /* See Forms.submit() in main-2.js */
7894 08 Dec 20 nicklas 1117 .please-wait
7894 08 Dec 20 nicklas 1118 {
7894 08 Dec 20 nicklas 1119   display: block;
7894 08 Dec 20 nicklas 1120   position: absolute;
7894 08 Dec 20 nicklas 1121   left: 35%;
7894 08 Dec 20 nicklas 1122   right: 35%;
7894 08 Dec 20 nicklas 1123   top: 25%;
7894 08 Dec 20 nicklas 1124   height: 6em;
7894 08 Dec 20 nicklas 1125   z-index: 9999;
7894 08 Dec 20 nicklas 1126   text-align: center;
7894 08 Dec 20 nicklas 1127   padding-top: 1.75em;
7894 08 Dec 20 nicklas 1128   font-weight: bold;
7894 08 Dec 20 nicklas 1129   border-width: 2px;
7894 08 Dec 20 nicklas 1130   border-radius: 8px;
7894 08 Dec 20 nicklas 1131   border-color: #000000;
7894 08 Dec 20 nicklas 1132 }
7894 08 Dec 20 nicklas 1133
7894 08 Dec 20 nicklas 1134 /* Animation */
7894 08 Dec 20 nicklas 1135 .please-wait .loader 
7894 08 Dec 20 nicklas 1136 {
7894 08 Dec 20 nicklas 1137   display: inline-block;
7894 08 Dec 20 nicklas 1138   position: relative;
7894 08 Dec 20 nicklas 1139   left: 4em;
7894 08 Dec 20 nicklas 1140   top: 0.25em;
7894 08 Dec 20 nicklas 1141   width: 1.75em;
7894 08 Dec 20 nicklas 1142   height: 1.75em;
7894 08 Dec 20 nicklas 1143   border-width: 3px;
7894 08 Dec 20 nicklas 1144   border-top-color: #2288AA;
7894 08 Dec 20 nicklas 1145   border-left-color: #D0D0D0;
7894 08 Dec 20 nicklas 1146   border-right-color: #D0D0D0;
7894 08 Dec 20 nicklas 1147   border-bottom-color: #D0D0D0;
7894 08 Dec 20 nicklas 1148   border-radius: 50%;
7894 08 Dec 20 nicklas 1149   animation: spin 1s linear infinite;
7894 08 Dec 20 nicklas 1150 }
7894 08 Dec 20 nicklas 1151
7894 08 Dec 20 nicklas 1152 .please-wait.waiting-more
7894 08 Dec 20 nicklas 1153 {
7894 08 Dec 20 nicklas 1154   padding-top: 1em;
7894 08 Dec 20 nicklas 1155 }
7894 08 Dec 20 nicklas 1156
7894 08 Dec 20 nicklas 1157 .please-wait.waiting-more .loader
7894 08 Dec 20 nicklas 1158 {
7894 08 Dec 20 nicklas 1159   top: 1em;
7894 08 Dec 20 nicklas 1160 }
7894 08 Dec 20 nicklas 1161
7894 08 Dec 20 nicklas 1162
7894 08 Dec 20 nicklas 1163 @keyframes spin 
7894 08 Dec 20 nicklas 1164 {
7894 08 Dec 20 nicklas 1165   0% { transform: rotate(0deg); }
7894 08 Dec 20 nicklas 1166   100% { transform: rotate(360deg); }
7894 08 Dec 20 nicklas 1167 }
7894 08 Dec 20 nicklas 1168
7894 08 Dec 20 nicklas 1169 /* Additional message displayed after a waiting a longer time */
7894 08 Dec 20 nicklas 1170 .please-wait-more
7894 08 Dec 20 nicklas 1171 {
7894 08 Dec 20 nicklas 1172   font-weight: normal;
7894 08 Dec 20 nicklas 1173   margin-right: 1.75em; /* To compensate for the width of the .loader */
7894 08 Dec 20 nicklas 1174 }
7894 08 Dec 20 nicklas 1175
7894 08 Dec 20 nicklas 1176

Generated on Sat Oct  7 02:46:04 2023 (UTC) by svndigest 0.11.2pre (dev build 1672)