chiark / gitweb /
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 */