Mercurial > hg > fapweb
annotate fap.css @ 102:53b35cb4111b
Animate a bit.
| author | Matti Hamalainen <ccr@tnsp.org> |
|---|---|
| date | Mon, 21 Oct 2013 13:45:11 +0300 |
| parents | 71256605546b |
| children | 324f3a415237 |
| rev | line source |
|---|---|
| 41 | 1 /* |
| 2 http://colorschemedesigner.com/#0351ZuJm6iKUB | |
| 3 */ | |
| 4 | |
| 1 | 5 html { |
| 6 -webkit-backface-visibility: hidden; | |
| 7 } | |
| 8 | |
| 9 body { | |
| 41 | 10 font-family: monospace; |
| 1 | 11 font-size: 12pt; |
| 41 | 12 color: black; |
| 1 | 13 margin: 0px; |
| 14 padding: 0px; | |
| 44 | 15 background: black url(img/grid.png); |
| 1 | 16 } |
| 17 | |
| 18 img { | |
| 19 border: none; | |
| 20 } | |
| 21 | |
| 22 a:hover { | |
| 23 text-decoration: underline; | |
| 24 } | |
| 25 | |
| 26 a:active { | |
| 27 outline: none; | |
| 28 } | |
| 29 | |
| 30 a:focus { | |
| 31 outline-style: none; | |
| 32 } | |
| 33 | |
| 34 a, a:visited, a:active { | |
| 35 text-decoration: underline; | |
| 36 color: white; | |
| 37 } | |
| 38 | |
| 39 #contents { | |
| 40 position: absolute; | |
| 41 width: 100%; | |
| 42 height: 100%; | |
| 43 } | |
| 44 | |
| 45 #header h1 { | |
| 46 margin: 0px; | |
| 47 } | |
| 48 | |
| 49 #header { | |
| 41 | 50 position: fixed; |
| 51 top: 0em; | |
| 52 left: 0em; | |
| 53 right: 0em; | |
| 54 height: 4em; | |
| 1 | 55 margin: 0px; |
| 41 | 56 padding: 0.25em; |
| 57 | |
| 58 color: white; | |
| 59 | |
| 1 | 60 font-family: Impact; |
| 61 font-size: 20pt; | |
| 62 text-align: center; | |
| 63 text-shadow: 2px 2px 1px rgba(0,0,0,0.4); | |
| 41 | 64 |
| 65 border-radius: 5pt; | |
| 66 border: 5pt dashed rgba(0,0,0,0.2); | |
| 1 | 67 } |
| 68 | |
| 69 .logo { | |
| 70 font-size: 30pt; | |
| 71 } | |
| 72 | |
| 73 #menu { | |
| 41 | 74 position: fixed; |
| 75 top: 10em; | |
| 76 left: 0.5em; | |
| 77 right: 1em; | |
| 44 | 78 min-height: 10em; |
| 1 | 79 margin: 0px; |
| 80 padding: 5pt; | |
| 41 | 81 width: 8em; |
| 82 | |
| 44 | 83 color: #0f0; |
| 84 text-shadow: 0px 0px 3px #0f0; | |
| 85 | |
| 41 | 86 background: rgba(0,0,0,0.6); |
| 87 border-top: 2pt solid #0f0; | |
| 88 border-left: 2pt solid #0f0; | |
| 89 border-right: 2pt solid #060; | |
| 90 border-bottom: 2pt solid #060; | |
| 91 | |
| 92 font-family: Impact; | |
| 93 font-size: 15pt; | |
| 94 | |
| 95 border-radius: 5pt; | |
| 44 | 96 box-shadow: 8px 8px 16px #000; |
| 97 } | |
| 98 | |
| 99 #menu div { | |
| 100 text-align: center; | |
| 101 font-size: 20pt; | |
| 1 | 102 } |
| 103 | |
| 104 #menu a { | |
| 105 text-decoration: none; | |
| 106 padding: 5pt; | |
| 107 margin: 5pt; | |
| 41 | 108 background: rgba(0,50,0,0.7); |
| 44 | 109 |
| 41 | 110 color: #0d0; |
| 44 | 111 text-shadow: 0px 0px 3px #0f0; |
| 41 | 112 |
| 113 border-top: 2pt solid #0f0; | |
| 114 border-left: 2pt solid #0f0; | |
| 115 border-right: 2pt solid #060; | |
| 116 border-bottom: 2pt solid #060; | |
| 117 | |
| 118 text-shadow: 1px 1px 1px rgba(0,0,0,0.4); | |
| 119 | |
| 120 box-shadow: 2px 2px 2px rgba(0,0,0,0.4); | |
| 44 | 121 border-top-right-radius: 10pt; |
| 122 border-bottom-left-radius: 10pt; | |
| 41 | 123 display: block; |
| 44 | 124 |
| 125 transition: all 0.3s; | |
| 1 | 126 } |
| 127 | |
| 128 #menu a:hover { | |
| 41 | 129 background: rgba(0,50,0,0.4); |
| 130 color: #fff; | |
| 44 | 131 box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset; |
| 102 | 132 margin-left: 1pt; |
| 133 margin-right: 1pt; | |
| 44 | 134 } |
| 41 | 135 |
| 44 | 136 #infobox { |
| 137 position: fixed; | |
| 138 top: 8.5em; | |
| 139 left: 12em; | |
| 140 min-width: 10em; | |
| 141 | |
| 142 margin: 0px; | |
| 143 padding: 5pt; | |
| 144 | |
| 145 z-index: 15; | |
| 146 | |
| 147 font-family: Impact; | |
| 148 font-size: 15pt; | |
| 149 text-align: center; | |
| 150 color: #0f0; | |
| 151 text-shadow: 0px 0px 3px #0f0; | |
| 152 | |
| 153 background: rgba(0,0,0,0.6); | |
| 154 border-top: 2pt solid #0f0; | |
| 155 border-left: 2pt solid #0f0; | |
| 156 border-right: 2pt solid #060; | |
| 157 border-bottom: 2pt solid #060; | |
| 158 | |
| 159 border-radius: 5pt; | |
| 160 box-shadow: 8px 8px 16px #000; | |
| 1 | 161 } |
| 162 | |
| 163 #date { | |
| 164 font-size: 15pt; | |
| 165 text-align: right; | |
| 166 position: absolute; | |
| 167 right: 0.5em; | |
| 168 top: 0.5em; | |
| 41 | 169 |
| 170 padding: 5pt; | |
| 171 | |
| 172 background: rgba(0,0,0,0.6); | |
| 173 border-top: 2pt solid #0f0; | |
| 174 border-left: 2pt solid #0f0; | |
| 175 border-right: 2pt solid #060; | |
| 176 border-bottom: 2pt solid #060; | |
| 177 | |
| 178 border-radius: 5pt; | |
| 44 | 179 box-shadow: 8px 8px 16px #000; |
| 1 | 180 } |
| 181 | |
| 182 #maincontent { | |
| 183 position: fixed; | |
| 41 | 184 left: 13em; |
| 185 right: 1em; | |
| 186 top: 12em; | |
| 187 bottom: 1em; | |
| 188 padding: 1em; | |
| 1 | 189 margin: 0px; |
| 41 | 190 background: rgba(0,0,0,0.8); |
| 191 | |
| 192 border: 1pt solid #0f0; | |
| 193 | |
| 194 box-shadow: 4px 4px 4px rgba(0,255,0,0.7), -4px -4px 4px rgba(0,255,0,0.7), 8px 8px 32px rgba(0,255,0,0.4) inset; | |
| 195 | |
| 1 | 196 text-shadow: 1px 1px 1px rgba(0,0,0,0.6); |
| 197 -moz-border-radius: 8pt; | |
| 198 border-radius: 8pt; | |
| 41 | 199 color: white; |
| 1 | 200 } |
| 201 | |
| 202 #maincontent > div { | |
| 203 width: 100%; | |
| 204 height: 100%; | |
| 205 overflow-y: auto; | |
| 206 } | |
| 207 | |
| 208 #maincontent h1, #maincontent h2 { | |
| 209 margin: 0px; | |
| 210 margin-top: 1em; | |
| 211 padding: 2pt; | |
| 212 padding-left: 1em; | |
| 41 | 213 background: rgba(0,255,0,0.3); |
| 214 border-bottom: 2px solid rgba(0,0,0,0.2); | |
| 1 | 215 -moz-border-radius: 8pt; |
| 216 border-radius: 8pt; | |
| 217 } | |
| 218 | |
| 219 #maincontent h1 { | |
| 220 margin: 0px; | |
| 221 } | |
| 222 | |
| 223 div.newsitem { | |
| 224 } | |
| 225 | |
| 226 div.newsitem div.text { | |
| 227 margin-top: 0.5em; | |
| 228 margin-left: 1.5em; | |
| 229 margin-right: 1.5em; | |
| 230 padding-bottom: 1em; | |
| 231 border-bottom: 1px dotted white; | |
| 232 } | |
| 233 | |
| 234 div.newsitem div.sig { | |
| 235 padding: 5pt; | |
| 236 font-family: Impact; | |
| 237 text-align: right; | |
| 238 } | |
| 239 | |
| 240 | |
| 49 | 241 |
| 242 | |
|
5
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
243 table.attendees,table.misc,table.vote { |
| 1 | 244 width: 100%; |
| 245 font-size: 10pt; | |
| 246 } | |
| 247 | |
| 49 | 248 table td, table th { |
| 249 -moz-border-radius: 2pt; | |
| 250 border-radius: 2pt; | |
| 251 } | |
| 252 | |
|
5
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
253 table th { |
| 49 | 254 background: rgba(0,255,0,0.25); |
| 1 | 255 } |
| 256 | |
| 257 table.attendees th.regtime { | |
| 258 width: 20%; | |
| 259 } | |
| 260 | |
| 261 table.attendees th.oneliner { | |
| 262 width: 50%; | |
| 263 } | |
| 264 | |
| 265 tr.rodd td { | |
| 49 | 266 background: rgba(0,255,0,0.05); |
| 267 -moz-border-radius: 2pt; | |
| 268 border-radius: 2pt; | |
| 1 | 269 } |
| 270 | |
| 271 tr.reven td { | |
| 49 | 272 background: rgba(0,255,0,0.15); |
| 1 | 273 } |
| 274 | |
|
5
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
275 table.misc, table.vote { |
| 1 | 276 padding-top: 1em; |
| 277 } | |
| 278 | |
|
5
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
279 table.misc tr:hover td, table.vote tr:hover td { |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
280 background: rgba(0,50,0,0.50); |
| 1 | 281 } |
| 282 | |
| 283 div.reglink { | |
| 284 text-align: center; | |
| 285 padding: 0.5em; | |
| 286 font-size: 15pt; | |
| 287 color: red; | |
| 288 border: 2pt solid rgba(0,0,0,0.35); | |
| 289 margin: 5pt; | |
| 290 -moz-border-radius: 8pt; | |
| 291 border-radius: 8pt; | |
| 292 } | |
| 293 | |
| 294 .notice { | |
| 295 color: red; | |
| 296 text-align: center; | |
| 297 font-size: 15pt; | |
| 298 } | |
| 299 | |
| 41 | 300 .quote { |
| 301 font-size: 20pt; | |
| 302 color: #0f0; | |
| 303 text-shadow: 2px 2px 3px #0f0; | |
| 304 } | |
| 1 | 305 |
| 306 .overbooked { | |
| 307 color: red; | |
| 308 } | |
| 309 | |
| 310 #pageTabs { | |
| 311 margin-top: 10pt; | |
| 312 margin-bottom: 0px; | |
| 313 border-bottom: 5pt solid #595F23; | |
| 314 } | |
| 315 | |
| 316 #pageTabs a { | |
| 317 text-decoration: none; | |
| 318 padding: 5pt; | |
| 319 margin: 5pt; | |
| 320 background: #595F23; | |
| 321 text-shadow: 2px 2px 1px rgba(0,0,0,0.4); | |
| 322 border-top-left-radius: 5pt; | |
| 323 border-top-right-radius: 5pt; | |
| 324 } | |
| 325 | |
| 326 #pageTabs a:hover { | |
| 327 background: #C8D286; | |
| 328 } | |
| 329 | |
| 330 #pageTabs a:active { | |
| 331 background: #C8D286; | |
| 332 } | |
| 333 | |
| 334 #pageTabs a.admin { | |
| 335 position: relative; | |
| 336 right: -2em; | |
| 337 } | |
| 4 | 338 |
|
5
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
339 table.vote th.vvalue { |
| 4 | 340 width: 1%; |
|
5
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
341 min-width: 2.5em; |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
342 } |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
343 |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
344 table.vote td.vvalue { |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
345 text-align: center; |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
346 } |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
347 |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
348 td.vactive, td.vid { |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
349 text-align: center; |
| 4 | 350 } |
| 351 | |
|
5
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
352 td.vid { |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
353 padding-right: 1em; |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
354 padding-left: 1em; |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
355 } |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
356 |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
357 td.vkey { |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
358 width: 25%; |
| 4 | 359 } |
|
5
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
360 |
|
53
71256605546b
More work on admin interface.
Matti Hamalainen <ccr@tnsp.org>
parents:
49
diff
changeset
|
361 table.attendees th.rname { |
|
71256605546b
More work on admin interface.
Matti Hamalainen <ccr@tnsp.org>
parents:
49
diff
changeset
|
362 width: 15%; |
|
71256605546b
More work on admin interface.
Matti Hamalainen <ccr@tnsp.org>
parents:
49
diff
changeset
|
363 } |
|
71256605546b
More work on admin interface.
Matti Hamalainen <ccr@tnsp.org>
parents:
49
diff
changeset
|
364 |
|
71256605546b
More work on admin interface.
Matti Hamalainen <ccr@tnsp.org>
parents:
49
diff
changeset
|
365 tr.vactive td.vkey, tr.vactive td.vactive { |
|
71256605546b
More work on admin interface.
Matti Hamalainen <ccr@tnsp.org>
parents:
49
diff
changeset
|
366 background: rgba(0,255,0,0.7); |
|
5
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
367 } |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
368 |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
369 div.votectrl { |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
370 padding: 1em; |
|
76c3b89d7b11
Improve voting, clean up the code, etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
4
diff
changeset
|
371 } |
| 44 | 372 |
| 373 | |
| 374 .mblink { | |
| 375 animation: mblink 1s steps(5, start) infinite; | |
| 376 } | |
| 377 | |
| 378 @keyframes mblink { | |
| 379 to { | |
| 380 visibility: hidden; | |
| 381 } | |
| 382 } |