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