Mercurial > hg > fapweb
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 } |