84b306b09cc6b23205b926ed9bc7dc694f0ea5ae
[disorder] / templates / disorder.css
1 /* default font and colors */
2 body {
3 color: black;
4 background-color: white
5 font-family: serif;
6 font-weight: normal;
7 font-size: 12pt;
8 font-variant: normal
9 }
10
11 /* general link colors */
12 a:link {
13 color: blue
14 }
15
16 a:visited {
17 color: blue
18 }
19
20 a:active {
21 color: red
22 }
23
24 /* title bars */
25 h1.title {
26 font-family: sans-serif;
27 font-weight: bold;
28 font-size: 18pt;
29 font-variant: normal;
30 text-align: center;
31 border: 1px solid black;
32 padding: 0.2em;
33 background-color: #e0e0e0;
34 display: block
35 }
36
37 /* secondary titles */
38 h2 {
39 font-family: sans-serif;
40 font-weight: bold;
41 font-size: 16pt;
42 font-variant: normal;
43 display: block
44 }
45
46 /* playing, recent and new ***************************************************/
47
48 /* table of current and future tracks */
49 table.playing {
50 border-collapse: collapse;
51 width: 100%; /* use the full available width */
52 border-spacing: 0 /* no unsightly gaps between cells */
53 }
54
55 /* table of recently played tracks */
56 table.recent {
57 border-collapse: collapse;
58 width: 100%; /* use the full available width */
59 border-spacing: 0 /* no unsightly gaps between cells */
60 }
61
62 /* table of newly added played tracks */
63 table.new {
64 border-collapse: collapse;
65 width: 100%; /* use the full available width */
66 border-spacing: 0 /* no unsightly gaps between cells */
67 }
68
69 /* titles in tables */
70 th {
71 text-align: left
72 }
73
74 /* ordinary cells in tables */
75 td {
76 vertical-align: middle
77 }
78
79 /* the headings <tr> of the table */
80 tr.headings {
81 background-color: black;
82 color: white
83 }
84
85 /* The 'now playing' heading */
86 tr.nowplaying {
87 }
88
89 td.nowplaying {
90 background-color: #d0d0d0;
91 font-weight: bold;
92 text-align: center
93 }
94
95 /* the currently playing track */
96 tr.playing {
97 background-color: #e0ffe0 /* pastel green */
98 }
99
100 /* the "next" heading */
101 tr.next {
102 }
103
104 td.next {
105 background-color: #d0d0d0;
106 font-weight: bold;
107 text-align: center
108 }
109
110 /* even-numbered rows */
111 tr.even {
112 background-color: #ffecec /* faint pastel red */
113 }
114
115 /* odd-numbered rows */
116 tr.odd {
117 background-color: #ffffff /* white */
118 }
119
120 /* column titles */
121 th.when {
122 }
123
124 th.who {
125 }
126
127 th.artist {
128 }
129
130 th.album {
131 }
132
133 th.title {
134 }
135
136 th.length {
137 text-align: right
138 }
139
140 th.button {
141 }
142
143 /* individual cells */
144
145 td.when {
146 }
147
148 td.who {
149 }
150
151 td.artist {
152 }
153
154 td.album {
155 }
156
157 td.title {
158 }
159
160 td.length {
161 text-align: right;
162 font-size: small /* because otherwise visually intrusive */
163 }
164
165 td.button {
166 text-align: center;
167 padding: 1px;
168 border: 1px solid black;
169 background-color: #c0c0c0;
170 color: #000000
171 }
172
173 p.mgmt,form.volume {
174 display: inline
175 }
176
177 /* choose ********************************************************************/
178
179 /* first letter choice */
180 p.choosealpha {
181 text-align: center;
182 font-size: 140%;
183 font-weight: bold;
184 border: 1px solid black;
185 padding: 0.2em
186 }
187
188 /* containing directory */
189 p.directoryname {
190 font-weight: bold;
191 background-color: #ffffe0; /* pastel yellow */
192 padding: 0.2em
193 }
194
195 a.thisdirectory:link {
196 color: black
197 }
198
199 a.thisdirectory:visited {
200 color: black
201 }
202
203 a.thisdirectory:active {
204 color: red
205 }
206
207 /* directories */
208 div.directories {
209 }
210
211 /* heading for directories */
212 p.directories {
213 font-weight: bold;
214 display: block;
215 background-color: #e0ffe0; /* pastel green */
216 padding: 0.2em;
217 padding-left: 1.2em
218 }
219
220 /* one directory */
221 p.directory {
222 margin-left: 2em
223 }
224
225 a.directory {
226 text-decoration: none;
227 }
228
229 a.directory:link {
230 color: black
231 }
232
233 a.directory:visited {
234 color: black
235 }
236
237 a.directory:active {
238 color: red
239 }
240
241 /* files */
242 div.files {
243 }
244
245 /* heading for files */
246 p.files {
247 font-weight: bold;
248 display: block;
249 background-color: #e0ffe0; /* pastel green */
250 padding: 0.2em;
251 padding-left: 1.2em
252 }
253
254 /* one file */
255 p.file {
256 margin-left: 2em
257 }
258
259 a.file {
260 text-decoration: none;
261 }
262
263 a.file:link {
264 color: black
265 }
266
267 a.file:visited {
268 color: black
269 }
270
271 a.file:active {
272 color: red
273 }
274
275 /* all files */
276 p.allfiles {
277 margin-left: 1.2em
278 }
279
280 /* buttons *******************************************************************/
281
282 /* a.allfiles turns up in track choice
283 * button is used e.g. in searching
284 */
285 a.allfiles,a.prefs,button,span.button {
286 padding: 1px;
287 border-color: #fefefe;
288 border-style: inset;
289 background-color: #c0c0c0;
290 color: #000000;
291 text-decoration: none;
292 font-family: sans-serif
293 }
294
295 a.button {
296 text-decoration: none;
297 font-family: sans-serif
298 }
299
300 a.button:link,a.button:visited,a.allfiles:link,a.allfiles:visited {
301 background-color: #c0c0c0;
302 color: #000000
303 }
304
305 a.button:active,a.allfiles:active,button:active {
306 background-color: #c0c0c0;
307 color: #ffffff
308 }
309
310 img.button {
311 border-width: 0
312 }
313
314 /* searching *****************************************************************/
315
316 div.searchresults {
317 }
318
319 div.search_artist {
320 }
321
322 p.search_artist {
323 }
324
325 span.search_artist {
326 font-weight: bold
327 }
328
329 div.search_album {
330 margin-left: 1em
331 }
332
333 p.search_album {
334 }
335
336 span.search_album {
337 }
338
339 div.search_title {
340 margin-left: 1em
341 }
342
343 p.search_title {
344 margin-top: 0;
345 margin-bottom: 0
346 }
347
348 a.search_title {
349 text-decoration: underline
350 }
351
352 a.search_title:link {
353 color: black
354 }
355
356 a.search_title:visited {
357 color: black
358 }
359
360 a.search_title:active {
361 color: red
362 }
363
364 form.search {
365 border: 1px solid black;
366 padding: 0.2em
367 }
368
369 /* sidebar *******************************************************************/
370
371 div#sidebar {
372 margin: 1em;
373 position: absolute;
374 width: 10em;
375 top: 0;
376 right: auto;
377 left: 0;
378 }
379
380 div#content {
381 position: absolute;
382 width: auto;
383 top: 0;
384 right: 1em;
385 left: 6em;
386 }
387
388 .sidebarlink {
389 font-family: sans-serif
390 }
391
392 a.sidebarlink {
393 text-decoration: none;
394 color: black
395 }
396
397 a.sidebarlink:visited {
398 color: black
399 }
400
401 a.sidebarlink:active {
402 color: red
403 }
404
405 a.sidebarlink:visited {
406 color: black
407 }
408
409 /* topbar ********************************************************************/
410
411 p.menubar {
412 word-spacing: 1em
413 }
414
415 .activemenu {
416 font-family: sans-serif;
417 font-weight: bold;
418 font-size: 14pt
419 }
420
421 .inactivemenu {
422 font-family: sans-serif;
423 font-weight: bold;
424 font-size: 14pt
425 }
426
427 a.inactivemenu,a.inactivemenu:visited {
428 text-decoration: none;
429 color: black
430 }
431
432 a.activemenu,a.activemenu:visited {
433 text-decoration: none;
434 color: red
435 }
436
437 a.activemenu:active,a.inactivemenu:active {
438 text-decoration: none;
439 color: red
440 }
441
442 span.invalidmenu {
443 text-decoration: none;
444 color: #808080; /* grey */
445 font-family: sans-serif;
446 font-weight: bold;
447 font-size: 14pt
448 }
449
450 /* prefs *********************************************************************/
451
452 p.prefs_new,p.prefs_head {
453 font-weight: bold
454 }
455
456 table.prefs {
457 border-collapse: collapse;
458 border-spacing: 0
459 }
460
461 tr.prefs_headings {
462 background-color: black;
463 color: white
464 }
465
466 th.prefs_name {
467 }
468
469 th.prefs_value {
470 }
471
472 td.prefs_name {
473 vertical-align: top
474 }
475
476 td.prefs_value {
477 vertical-align: top
478 }
479
480 td.prefs_delete {
481 vertical-align: top
482 }
483
484 input.prefs_name,input.prefs_value {
485 font-family: monospace
486 }
487
488 /* help **********************************************************************/
489
490 .helpbuttons,.helpprefs,.helpcontexts {
491 margin-left: 2em;
492 margin-right: 2em;
493 vertical-align: top
494 }
495
496 .helpsection {
497 margin-left: 1em;
498 }
499
500 .helppref {
501 font-family: monospace
502 }
503
504 .helpprefbit {
505 font-family: monospace;
506 font-style: italic
507 }
508
509 .helpcontext {
510 font-weight: bold
511 }
512
513 span.configuration {
514 font-family: monospace
515 }
516
517 h2.helptitle {
518 background-color: #e0ffe0; /* pastel green */
519 padding: 0.2em
520 }
521
522 /* volume ********************************************************************/
523
524 p.volume {
525 text-align: center
526 }
527
528 /* login page ****************************************************************/
529
530 form.login {
531 border: 1px solid black;
532 background-color: #e0ffe0 /* pastel green */
533 }
534
535 form.reminder {
536 border: 1px solid black;
537 background-color: #e0e0ff /* pastel blue */
538 }
539
540 form.register {
541 border: 1px solid black;
542 background-color: #e0e0ff /* pastel blue */
543 }
544
545 form.edituser {
546 border: 1px solid black;
547 background-color: #ffffe0 /* pastel yellow */
548 }
549
550 form.logout {
551 border-style: none;
552 }
553
554 div.loginstatus {
555 border: 1px solid black;
556 background-color: #ffff00 /* solid yellow */
557 }
558
559 div.loginstatus > p {
560 margin: 0.2em
561 }
562
563 p.loginstatus {
564 color: #0000ff; /* solid blue */
565 font-size: 150%;
566 font-weight: bold
567 }
568
569 /* errors ********************************************************************/
570
571 div.error {
572 border: 1px solid black;
573 background-color: #ff0000; /* solid red */
574 color: white;
575 font-size: 150%;
576 font-weight: bold
577 }
578
579 div.error > p {
580 margin: 0.2em
581 }
582
583 p.error {
584 }
585
586 /* miscelleanous *************************************************************/
587
588 /* credits */
589 p.credits {
590 font-size: small; /* because visually intrusive */
591 text-align: right;
592 background-color: #e0e0e0;
593 padding: 0.2em
594 }
595 /*
596 This file is part of DisOrder.
597 Copyright (C) 2003-2007 Richard Kettlewell
598
599 This program is free software; you can redistribute it and/or modify
600 it under the terms of the GNU General Public License as published by
601 the Free Software Foundation; either version 2 of the License, or
602 (at your option) any later version.
603
604 This program is distributed in the hope that it will be useful, but
605 WITHOUT ANY WARRANTY; without even the implied warranty of
606 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
607 General Public License for more details.
608
609 You should have received a copy of the GNU General Public License
610 along with this program; if not, write to the Free Software
611 Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
612 USA
613 */