comparison examples/css/admin.css @ 829:c2839190ca54

Update example CSS files.
author Matti Hamalainen <ccr@tnsp.org>
date Tue, 25 Nov 2014 09:56:03 +0200
parents b4e0501f5588
children 04495bb47dc9
comparison
equal deleted inserted replaced
828:d9cd51966dcf 829:c2839190ca54
24 24
25 a:active, a:focus { 25 a:active, a:focus {
26 outline: none; 26 outline: none;
27 } 27 }
28 28
29
30 /*
31 * Message and image preview boxes
32 */
29 #messageBox { 33 #messageBox {
30 position: absolute; 34 position: absolute;
31 top: 0px; 35 top: 0;
32 bottom: 0px; 36 bottom: 0;
33 left: 0px; 37 left: 0;
34 right: 0px; 38 right: 0;
35 z-index: 60; 39 z-index: 60;
36 display: none; 40 display: none;
37 } 41 }
38 42
39 #messageBox div.messageBoxInner {
40 position: absolute;
41 top: 25%;
42 left: 10%;
43 height: auto;
44 min-width: 50%;
45 max-width: 80%;
46 z-index: 62;
47 background: black;
48 border: 2px solid green;
49 padding: 1.5em;
50 border-radius: 0.5em;
51 }
52
53 #messageBox div.messageBoxControls { 43 #messageBox div.messageBoxControls {
54 text-align: right; 44 text-align: right;
55 } 45 }
56 46
57 47 #messageBox > div {
48 position: absolute;
49 z-index: 62;
50 padding: 0.5em;
51 border-radius: 0.5em;
52 }
53
54 #messageBox div.messageBoxInner {
55 top: 2em;
56 left: 2em;
57 min-width: 50%;
58 height: auto;
59 background: #080;
60 border: 2px solid black;
61 color: white;
62 }
63
64 #messageBox div.imageBoxInner {
65 top: 2em;
66 left: 2em;
67 background: #444;
68 border: 2px solid black;
69 }
70
71 #messageBox div.imageBoxInner img {
72 position: relative;
73 }
74
75
76 /*
77 * Administration popup box
78 */
58 #adminPopup { 79 #adminPopup {
59 position: absolute; 80 position: absolute;
60 top: 0px; 81 top: 0px;
61 bottom: 0px; 82 bottom: 0px;
62 left: 0px; 83 left: 0px;
79 100
80 border-radius: 1em; 101 border-radius: 1em;
81 } 102 }
82 103
83 104
84 105 /*
106 * Page tabs / tab headers
107 */
85 #tabHeadersCC { 108 #tabHeadersCC {
86 position: relative; 109 position: relative;
87 top: 0.5em; 110 top: 0.5em;
88 left: 0; 111 left: 0;
89 right: 0; 112 right: 0;
90 height: 2em; 113 height: 3em;
91 114
92 z-index: 10; 115 z-index: 10;
93 margin: 0; 116 margin: 0;
94 padding-left: 1em; 117 padding-left: 1em;
95 background: #440; 118 background: #440;
98 div.tabHeadersSub { 121 div.tabHeadersSub {
99 font-size: 1em; 122 font-size: 1em;
100 line-height: 2.7em; 123 line-height: 2.7em;
101 } 124 }
102 125
103 div.tabHeadersSub a, #ctrlModeControls a { 126 div.tabHeadersSub a, div.ctrlModeControls a {
104 z-index: 15; 127 z-index: 15;
105 text-decoration: none; 128 text-decoration: none;
106 padding: 0.25em; 129 padding-left: 0.25em;
130 padding-right: 0.25em;
107 background: #060; 131 background: #060;
108 text-shadow: 2px 2px 1px rgba(0,0,0,0.4); 132 text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
109 border-radius: 5pt; 133 border-radius: 0.2em;
134
135 display: inline-block;
136 margin-bottom: 0.2em;
137 min-width: 6em;
110 } 138 }
111 139
112 #tabHeadersCC a { 140 #tabHeadersCC a {
113 position: relative; 141 position: relative;
142 display: inline-block;
114 z-index: 15; 143 z-index: 15;
115 padding: 0.5em; 144 padding: 0.5em;
116 text-decoration: none; 145 text-decoration: none;
117 background: #060; 146 background: #060;
118 text-shadow: 2px 2px 1px rgba(0,0,0,0.4); 147 text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
119 border-top-left-radius: 0.2em; 148 border-top-left-radius: 0.2em;
120 border-top-right-radius: 0.2em; 149 border-top-right-radius: 0.2em;
121 } 150 }
122 151
123 #tabHeadersCC a:hover, div.tabHeadersSub a:hover, #ctrlModeControls a:hover { 152 #tabHeadersCC a:hover, div.tabHeadersSub a:hover, div.ctrlModeControls a:hover {
124 background: #C8D286; 153 background: #C8D286;
125 } 154 }
126 155
127 #tabHeadersCC a:active, div.tabHeadersSub a:active { 156 #tabHeadersCC a:active, div.tabHeadersSub a:active {
128 background: #C8D286; 157 background: #C8D286;
188 div.vkeyActive, tr.vkeyActive { 217 div.vkeyActive, tr.vkeyActive {
189 background: #044; 218 background: #044;
190 } 219 }
191 220
192 221
193 222 /*
194 #ctrlModeControls input[type="radio"] { 223 * Compo/infoscreen controls
224 */
225 div.ctrlModeControls input[type="radio"] {
195 display: none; 226 display: none;
196 } 227 }
197 228
198 #ctrlModeControls input[type="radio"] + label:before { 229 div.ctrlModeControls input[type="radio"] + label:before {
199 content: "O"; 230 content: "O";
200 display: inline-block; 231 display: inline-block;
201 color: green; 232 color: green;
202 font-size: 1.5em; 233 font-size: 1.5em;
203 margin-right: 0.15em; 234 margin-right: 0.15em;
204 } 235 }
205 236
206 #ctrlModeControls input[type="radio"]:checked + label:before { 237 div.ctrlModeControls input[type="radio"]:checked + label:before {
207 content: "X"; 238 content: "X";
208 display: inline-block; 239 display: inline-block;
209 color: red; 240 color: red;
210 font-weight: bold; 241 font-weight: bold;
211 font-size: 1.5em; 242 font-size: 1.5em;
212 } 243 }
213 244
214 #ctrlModeControls input[type="radio"]:checked + label { 245 div.ctrlModeControls input[type="radio"]:checked + label {
215 color: white; 246 color: white;
216 font-weight: bold; 247 font-weight: bold;
217 } 248 }
218 249
219 250
220 #ctrlModeControls, #ctrlSystemControls { 251 div.ctrlModeControls, #ctrlSystemControls {
221 border: 2px solid green; 252 border: 2px solid green;
222 padding: 0.5em; 253 padding: 0.5em;
223 border-radius: 0.5em; 254 border-radius: 0.5em;
224 background: black; 255 background: black;
225 margin: 0.2em; 256 margin: 0.2em;
346 377
347 .overbooked { 378 .overbooked {
348 color: red; 379 color: red;
349 } 380 }
350 381
351 382 table.attendees,table.vote {
352 table.attendees,table.entries,table.vote {
353 width: 100%; 383 width: 100%;
354 } 384 }
355 385
356 table td, table th { 386 table td, table th {
357 border-radius: 2pt; 387 border-radius: 2pt;
378 width: 15%; 408 width: 15%;
379 } 409 }
380 410
381 tr.rodd td { 411 tr.rodd td {
382 background: #010; 412 background: #010;
383 border-radius: 2pt;
384 } 413 }
385 414
386 tr.reven td { 415 tr.reven td {
387 background: #020; 416 background: #020;
388 } 417 }
398 427
399 table.attendees tr.deleteWarning td { 428 table.attendees tr.deleteWarning td {
400 background: red; 429 background: red;
401 } 430 }
402 431
403 div.compoInfo { 432 div.compoItem, div.newsItem {
404 margin: 0; 433 margin: 0;
405 padding: 1em; 434 padding: 1em;
406 border-top: 1px solid #0f0; 435 border-top: 1px solid #0f0;
407 border-bottom: 1px solid #0f0; 436 border-bottom: 1px solid #0f0;
408 } 437 }
412 } 441 }
413 442
414 tr.active td { 443 tr.active td {
415 background: green; 444 background: green;
416 } 445 }
446
447
448
449 /*
450 * Entries
451 */
452 div.rodd {
453 background: #020;
454 }
455
456 div.reven {
457 background: #030;
458 }
459
460 div.active {
461 border: 1px solid #0f0;
462 }
463
464 div.deleteWarning {
465 background: red;
466 }
467
468
469 div.entryRow {
470 position: relative;
471 margin-top: 1em;
472 margin-bottom: 1em;
473 padding: 0.5em;
474 vertical-align: top;
475 border-radius: 0.2em;
476 }
477
478 div.entryCell {
479 display: inline-block;
480 vertical-align: top;
481 min-width: 15em;
482 }
483
484
485 /*
486 * Individual edit controls
487 */
488 div.editControl {
489 vertical-align: top;
490 padding: 0.2em;
491 }
492
493 span.editControlTitle {
494 background: black;
495 display: block;
496 text-align: center;
497 }
498
499
500 /*
501 * Specific entry items
502 */
503 div.entryShowID {
504 background: #800;
505 width: 2em;
506 min-width: 2em;
507 text-align: center;
508 }
509
510 div.entryActions {
511 position: absolute;
512 right: 0.2em;
513 bottom: 0.2em;
514
515 min-width: 1em;
516 width: auto;
517
518 vertical-align: bottom;
519 text-align: right;
520
521 padding: 0.2em;
522 background: #050;
523 border-radius: 0.4em;
524 }