extensions/net.sf.basedb.skincollection/trunk/resources/gold/skin.css

Code
Comments
Other
Rev Date Author Line
2967 21 Nov 14 nicklas 1 @charset "UTF-8";
2967 21 Nov 14 nicklas 2
2967 21 Nov 14 nicklas 3 /* 
2967 21 Nov 14 nicklas 4   Default border color.
2967 21 Nov 14 nicklas 5 */
2967 21 Nov 14 nicklas 6 *
2967 21 Nov 14 nicklas 7 {
2967 21 Nov 14 nicklas 8   border-color: rgb(224, 154, 81);
2967 21 Nov 14 nicklas 9 }
2967 21 Nov 14 nicklas 10
2967 21 Nov 14 nicklas 11 /* 
2967 21 Nov 14 nicklas 12   Default background and text color 
2967 21 Nov 14 nicklas 13   can be set here, but we leave it at 
2967 21 Nov 14 nicklas 14   white/black.
2967 21 Nov 14 nicklas 15 */
2967 21 Nov 14 nicklas 16 body
2967 21 Nov 14 nicklas 17 {}
2967 21 Nov 14 nicklas 18
2967 21 Nov 14 nicklas 19 /* 
2967 21 Nov 14 nicklas 20   Background color for filled non-transparent elements 
2967 21 Nov 14 nicklas 21 */
2967 21 Nov 14 nicklas 22 .bg-filled-100, table.fullform > tbody > tr > th
2967 21 Nov 14 nicklas 23 {
2967 21 Nov 14 nicklas 24   background-color: rgb(240, 240, 208);
2967 21 Nov 14 nicklas 25 }
2967 21 Nov 14 nicklas 26
2967 21 Nov 14 nicklas 27 /*
2967 21 Nov 14 nicklas 28   This should be a semi-transparant color that
2967 21 Nov 14 nicklas 29   results in the same color as bg-filled-100 when
2967 21 Nov 14 nicklas 30   layed over the 'body' background color.
2967 21 Nov 14 nicklas 31   Can be somewhat difficult to generate.
2967 21 Nov 14 nicklas 32 */
2967 21 Nov 14 nicklas 33 .bg-filled-50
2967 21 Nov 14 nicklas 34 {
2967 21 Nov 14 nicklas 35   background-color: rgba(224, 224, 160, 0.5);
2967 21 Nov 14 nicklas 36 }
2967 21 Nov 14 nicklas 37
2967 21 Nov 14 nicklas 38 /*
2967 21 Nov 14 nicklas 39   Background color for buttons, tabs and menu-items.
2967 21 Nov 14 nicklas 40 */
2967 21 Nov 14 nicklas 41 .button, .tab, .menuitem
2967 21 Nov 14 nicklas 42 {
2967 21 Nov 14 nicklas 43   background-color: rgb(240, 224, 160);
2967 21 Nov 14 nicklas 44 }
2967 21 Nov 14 nicklas 45
2969 24 Nov 14 nicklas 46
2967 21 Nov 14 nicklas 47 /*
2969 24 Nov 14 nicklas 48   Sections in the menu that has their own 
2969 24 Nov 14 nicklas 49   header-like entry. See the 'recently used items' menu.
2969 24 Nov 14 nicklas 50 */
2969 24 Nov 14 nicklas 51 .menu .menusection
2969 24 Nov 14 nicklas 52 {
2969 24 Nov 14 nicklas 53   background-color: rgb(224, 154, 81);
2969 24 Nov 14 nicklas 54   color: rgb(255, 255, 255);
2969 24 Nov 14 nicklas 55 }
2969 24 Nov 14 nicklas 56
2969 24 Nov 14 nicklas 57 /*
2967 21 Nov 14 nicklas 58   We set background color of the active tab to
2967 21 Nov 14 nicklas 59   the same color as bg-filled-100 since it 
2967 21 Nov 14 nicklas 60   look better in dialogs.
2967 21 Nov 14 nicklas 61 */
2967 21 Nov 14 nicklas 62 .tab.active
2967 21 Nov 14 nicklas 63 {
2967 21 Nov 14 nicklas 64   background-color: rgb(240, 240, 208);
2967 21 Nov 14 nicklas 65 }
2967 21 Nov 14 nicklas 66
2967 21 Nov 14 nicklas 67 /*
2967 21 Nov 14 nicklas 68   We also want to change border-color for the active tab,
2967 21 Nov 14 nicklas 69   but we need different side depending on if the tabs are
2967 21 Nov 14 nicklas 70   at top or bottom.
2967 21 Nov 14 nicklas 71 */
2967 21 Nov 14 nicklas 72 .tabsatbottom .tab.active
2967 21 Nov 14 nicklas 73 {
2967 21 Nov 14 nicklas 74   border-bottom-color: rgb(175, 60, 60);
2967 21 Nov 14 nicklas 75 }
2967 21 Nov 14 nicklas 76 .tabsattop .tab.active
2967 21 Nov 14 nicklas 77 {
2967 21 Nov 14 nicklas 78   border-top-color: rgb(175, 60, 60);
2967 21 Nov 14 nicklas 79 }
2967 21 Nov 14 nicklas 80
2967 21 Nov 14 nicklas 81 /*
2969 24 Nov 14 nicklas 82   Selected items in file browser, plug-in parameters, etc.
2969 24 Nov 14 nicklas 83 */
2969 24 Nov 14 nicklas 84 .interactable.selected, .selected .interactable
2969 24 Nov 14 nicklas 85 {
2969 24 Nov 14 nicklas 86   background-color: rgb(224, 154, 81);
2969 24 Nov 14 nicklas 87   color: rgb(255, 255, 255);
2969 24 Nov 14 nicklas 88 }
2969 24 Nov 14 nicklas 89
2969 24 Nov 14 nicklas 90 /*
2967 21 Nov 14 nicklas 91   Interactable + all form elements get a darker border when
2967 21 Nov 14 nicklas 92   we 'hover' or they have the focus.
2967 21 Nov 14 nicklas 93 */
2967 21 Nov 14 nicklas 94 .interactable:hover, .interactable:focus, .interactable.active, 
2967 21 Nov 14 nicklas 95 input:hover, textarea:hover, select:hover, input:focus, textarea:focus, select:focus
2967 21 Nov 14 nicklas 96 {
2967 21 Nov 14 nicklas 97   border-color: rgb(175, 60, 60);
2967 21 Nov 14 nicklas 98 }
2967 21 Nov 14 nicklas 99
2967 21 Nov 14 nicklas 100 /* 
2967 21 Nov 14 nicklas 101   Table listings should have different semi-transparent 
2967 21 Nov 14 nicklas 102   background color for odd and even rows
2967 21 Nov 14 nicklas 103 */
2967 21 Nov 14 nicklas 104 .bg-oddrow
2967 21 Nov 14 nicklas 105 {
2967 21 Nov 14 nicklas 106   background-color: rgba(248, 248, 224, 0.5);
2967 21 Nov 14 nicklas 107 }
2967 21 Nov 14 nicklas 108 .bg-evenrow
2967 21 Nov 14 nicklas 109 {
2967 21 Nov 14 nicklas 110   background-color: rgba(232, 232, 180, 0.5);
2967 21 Nov 14 nicklas 111 }
2967 21 Nov 14 nicklas 112
6224 05 May 21 nicklas 113 /* 
6224 05 May 21 nicklas 114   Variants of the above that result in the same color but
6224 05 May 21 nicklas 115   without the transparency.
6224 05 May 21 nicklas 116 */
6224 05 May 21 nicklas 117 .bg-oddrow .bg-filled-100
6224 05 May 21 nicklas 118 {
6224 05 May 21 nicklas 119   background-color: rgba(252, 252, 240, 1);
6224 05 May 21 nicklas 120 }
6224 05 May 21 nicklas 121 .bg-evenrow .bg-filled-100
6224 05 May 21 nicklas 122 {
6224 05 May 21 nicklas 123   background-color: rgba(244, 244, 218, 1);
6224 05 May 21 nicklas 124 }
6224 05 May 21 nicklas 125
2967 21 Nov 14 nicklas 126 /*
2967 21 Nov 14 nicklas 127   To indicate which table row the mouse is over.
2967 21 Nov 14 nicklas 128   Need !important to override other definitions.
2967 21 Nov 14 nicklas 129 */
6224 05 May 21 nicklas 130 .highlight:hover, .highlight:hover > td, .highlight:hover > th
2967 21 Nov 14 nicklas 131 {
2975 25 Nov 14 nicklas 132   background-color: rgb(255, 255, 255) !important;
2967 21 Nov 14 nicklas 133   border-top: 1px solid rgb(175, 60, 60) !important;
2967 21 Nov 14 nicklas 134   border-bottom: 1px solid rgb(175, 60, 60) !important;
2967 21 Nov 14 nicklas 135 }
2967 21 Nov 14 nicklas 136
2967 21 Nov 14 nicklas 137
2967 21 Nov 14 nicklas 138 /*
2967 21 Nov 14 nicklas 139   Notes and help messages
2967 21 Nov 14 nicklas 140 */
2967 21 Nov 14 nicklas 141 .help, .note
2967 21 Nov 14 nicklas 142 {
2975 25 Nov 14 nicklas 143   background-color: rgb(240, 240, 208);
2967 21 Nov 14 nicklas 144 }
2975 25 Nov 14 nicklas 145 /* White in lists */
2975 25 Nov 14 nicklas 146 .itemlist .note
2975 25 Nov 14 nicklas 147 {
2975 25 Nov 14 nicklas 148   background-color: rgb(255, 255, 255);
2975 25 Nov 14 nicklas 149 }
2967 21 Nov 14 nicklas 150
2967 21 Nov 14 nicklas 151 /*
2969 24 Nov 14 nicklas 152   This kind of notification shows up in the gui for
2969 24 Nov 14 nicklas 153   missing form information.
2969 24 Nov 14 nicklas 154 */
2969 24 Nov 14 nicklas 155 .notify
2969 24 Nov 14 nicklas 156 {
2969 24 Nov 14 nicklas 157   background-color: rgb(240, 224, 160);
2969 24 Nov 14 nicklas 158   border-color: rgb(0, 0, 0);
2969 24 Nov 14 nicklas 159 }
2969 24 Nov 14 nicklas 160
2969 24 Nov 14 nicklas 161 /*
2969 24 Nov 14 nicklas 162   To get the "pointer" effect we need to set the
2969 24 Nov 14 nicklas 163   border color here to the same as the background
2969 24 Nov 14 nicklas 164   color for '.notify'!
2969 24 Nov 14 nicklas 165 */
2969 24 Nov 14 nicklas 166 .notify > div:first-child > div
2969 24 Nov 14 nicklas 167 {
2969 24 Nov 14 nicklas 168   border-color: rgb(240, 224, 160);
2969 24 Nov 14 nicklas 169 }
2969 24 Nov 14 nicklas 170
2972 24 Nov 14 nicklas 171 /*
2972 24 Nov 14 nicklas 172   Progress bar
2972 24 Nov 14 nicklas 173 */
2972 24 Nov 14 nicklas 174 .progressbar .percentDone
2972 24 Nov 14 nicklas 175 {
2972 24 Nov 14 nicklas 176   background-color: rgb(240, 224, 160);
2972 24 Nov 14 nicklas 177 }
2972 24 Nov 14 nicklas 178 .progressbar .percentRemain 
2972 24 Nov 14 nicklas 179 {
2972 24 Nov 14 nicklas 180   background-color: rgb(255, 255, 255);
2972 24 Nov 14 nicklas 181 }
2969 24 Nov 14 nicklas 182
2969 24 Nov 14 nicklas 183 /*
2967 21 Nov 14 nicklas 184   Set color for headers.
2967 21 Nov 14 nicklas 185 */
2967 21 Nov 14 nicklas 186 h1, h1 a, .popup h1, h2, h2.link, h3
2967 21 Nov 14 nicklas 187 {
2967 21 Nov 14 nicklas 188   color: rgb(138, 50, 50);
2967 21 Nov 14 nicklas 189
2967 21 Nov 14 nicklas 190 }
2967 21 Nov 14 nicklas 191
2967 21 Nov 14 nicklas 192 /*
2967 21 Nov 14 nicklas 193   We use a slightly brighter color for the little 'gadget' before the title.
2967 21 Nov 14 nicklas 194 */
2971 24 Nov 14 nicklas 195 .default h1:before, .popup h1:before, h1 .pathelement:before
2967 21 Nov 14 nicklas 196 {
2967 21 Nov 14 nicklas 197   color: rgb(208, 124, 40);
2967 21 Nov 14 nicklas 198 }
2967 21 Nov 14 nicklas 199
2967 21 Nov 14 nicklas 200 /*
2967 21 Nov 14 nicklas 201   Change the background for popup dialog titles and
2967 21 Nov 14 nicklas 202   regular section titles on default pages.
2967 21 Nov 14 nicklas 203   We use text-shadow since the text color interfere somewhat
2967 21 Nov 14 nicklas 204   with the background image.
2967 21 Nov 14 nicklas 205 */
2967 21 Nov 14 nicklas 206 .popup h1, .default h3
2967 21 Nov 14 nicklas 207 {
2967 21 Nov 14 nicklas 208   background-color: rgb(240, 240, 208);
2967 21 Nov 14 nicklas 209   background-image: url('dna_spiral.png');
2967 21 Nov 14 nicklas 210   border-bottom-width: 1px;
2967 21 Nov 14 nicklas 211   text-shadow: 0px 2px 4px #F0f0d0, 0px -2px 4px #F0F0d0, 2px 0px 4px #F0F0d0, -2px 0px 4px #F0F0d0;
2967 21 Nov 14 nicklas 212 }
2967 21 Nov 14 nicklas 213
2967 21 Nov 14 nicklas 214 /*
2967 21 Nov 14 nicklas 215   Full border around headers.
2967 21 Nov 14 nicklas 216 */
2967 21 Nov 14 nicklas 217 .default h3
2967 21 Nov 14 nicklas 218 {
2967 21 Nov 14 nicklas 219   border-width: 1px;
2967 21 Nov 14 nicklas 220 }
2967 21 Nov 14 nicklas 221
2967 21 Nov 14 nicklas 222 /*
2967 21 Nov 14 nicklas 223   Changes to the logo section on the login page.
2967 21 Nov 14 nicklas 224 */
2967 21 Nov 14 nicklas 225 .base-logo
2967 21 Nov 14 nicklas 226 {
2967 21 Nov 14 nicklas 227   background-color: rgb(240, 240, 208);
2967 21 Nov 14 nicklas 228   border-width: 1px 0 1px 1px;
2967 21 Nov 14 nicklas 229   border-radius: 4px 0 0 4px;
2967 21 Nov 14 nicklas 230 }
3027 11 Dec 14 nicklas 231
3027 11 Dec 14 nicklas 232 /*
3027 11 Dec 14 nicklas 233   ------------------------------------------------------
3027 11 Dec 14 nicklas 234   Special selectors for Reggie and compatible extensions
3027 11 Dec 14 nicklas 235   ------------------------------------------------------
3027 11 Dec 14 nicklas 236 */
3027 11 Dec 14 nicklas 237 /*
3027 11 Dec 14 nicklas 238   We get rid of the background DNA spiral and use the 
3027 11 Dec 14 nicklas 239   darker background color.
3027 11 Dec 14 nicklas 240 */
3027 11 Dec 14 nicklas 241 #wizard h3
3027 11 Dec 14 nicklas 242 {
3027 11 Dec 14 nicklas 243   background-color: rgb(240, 224, 160);
3027 11 Dec 14 nicklas 244   background-image: none;
3027 11 Dec 14 nicklas 245   text-shadow: none;
3027 11 Dec 14 nicklas 246   color: rgb(138, 50, 50);
3027 11 Dec 14 nicklas 247 }
3027 11 Dec 14 nicklas 248
3027 11 Dec 14 nicklas 249 /*
3027 11 Dec 14 nicklas 250   Lists in Reggie usually have white background
3027 11 Dec 14 nicklas 251   so the highligt must be darker.
3027 11 Dec 14 nicklas 252 */
3027 11 Dec 14 nicklas 253 #wizard .highlight:hover
3027 11 Dec 14 nicklas 254 {
3027 11 Dec 14 nicklas 255   background-color: rgb(240, 224, 160) !important;
3027 11 Dec 14 nicklas 256 }
3027 11 Dec 14 nicklas 257
3027 11 Dec 14 nicklas 258 /*
3027 11 Dec 14 nicklas 259   Same background as regular border color with white text
3027 11 Dec 14 nicklas 260 */
3027 11 Dec 14 nicklas 261 #wizard .step-no
3027 11 Dec 14 nicklas 262 {
3027 11 Dec 14 nicklas 263   background-color: rgb(224, 154, 81);
3027 11 Dec 14 nicklas 264   color: rgb(255, 255, 255);
3027 11 Dec 14 nicklas 265 }
3027 11 Dec 14 nicklas 266
3027 11 Dec 14 nicklas 267
3027 11 Dec 14 nicklas 268 /*
3027 11 Dec 14 nicklas 269   Same as bg-filled-100 + black text
3027 11 Dec 14 nicklas 270 */
3027 11 Dec 14 nicklas 271 #wizard .step-title, 
3027 11 Dec 14 nicklas 272 #wizard .step-form .section-header td:not(.help)
3027 11 Dec 14 nicklas 273 {
3027 11 Dec 14 nicklas 274   background-color: rgb(240, 240, 208);
3027 11 Dec 14 nicklas 275   color: rgb(0, 0, 0);
3027 11 Dec 14 nicklas 276 }
3027 11 Dec 14 nicklas 277
3027 11 Dec 14 nicklas 278 /*
3027 11 Dec 14 nicklas 279   Same as bg-filled-50 + black text
3027 11 Dec 14 nicklas 280 */
3027 11 Dec 14 nicklas 281 #wizard .step-form .help
3027 11 Dec 14 nicklas 282 {
3027 11 Dec 14 nicklas 283   background-color: rgba(224, 224, 160, 0.5);
3027 11 Dec 14 nicklas 284   color: rgb(0, 0, 0);
3027 11 Dec 14 nicklas 285   
3027 11 Dec 14 nicklas 286 }
3027 11 Dec 14 nicklas 287
3027 11 Dec 14 nicklas 288 /*
3027 11 Dec 14 nicklas 289   Lighter, semi-transparent but not on headers or in the help section.
3027 11 Dec 14 nicklas 290 */
3027 11 Dec 14 nicklas 291 #wizard .step-form .info-section tr:not(.section-header) td:not(.help)
3027 11 Dec 14 nicklas 292 {
3027 11 Dec 14 nicklas 293   background-color: rgba(240, 240, 192, 0.5);
3027 11 Dec 14 nicklas 294 }
3027 11 Dec 14 nicklas 295
3027 11 Dec 14 nicklas 296 /*
3027 11 Dec 14 nicklas 297   Colorize the prefix on section headers
3027 11 Dec 14 nicklas 298 */
3027 11 Dec 14 nicklas 299 #wizard .step-form .section-header td:first-child:before
3027 11 Dec 14 nicklas 300 {
3027 11 Dec 14 nicklas 301   color: rgb(208, 124, 40);
3027 11 Dec 14 nicklas 302 }
3027 11 Dec 14 nicklas 303
3027 11 Dec 14 nicklas 304
3027 11 Dec 14 nicklas 305
3027 11 Dec 14 nicklas 306
3027 11 Dec 14 nicklas 307