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