Commit | Line | Data |
---|---|---|
328248ba | 1 | /* default font and colors */ |
460b9539 | 2 | body { |
3 | color: black; | |
3225872d RK |
4 | background-color: white; |
5 | font-family: times,serif; | |
328248ba | 6 | font-weight: normal; |
7 | font-size: 12pt; | |
8 | font-variant: normal | |
460b9539 | 9 | } |
10 | ||
3225872d RK |
11 | input { |
12 | font-family: helvetica,sans-serif; | |
13 | font-weight: normal; | |
14 | font-size: 12pt; | |
15 | font-variant: normal | |
460b9539 | 16 | } |
17 | ||
3225872d RK |
18 | /* general link colors */ |
19 | a { | |
460b9539 | 20 | color: blue |
21 | } | |
22 | ||
23 | a:active { | |
24 | color: red | |
25 | } | |
26 | ||
328248ba | 27 | /* title bars */ |
3225872d RK |
28 | h1 { |
29 | font-family: helvetica,sans-serif; | |
460b9539 | 30 | font-weight: bold; |
328248ba | 31 | font-size: 18pt; |
32 | font-variant: normal; | |
460b9539 | 33 | text-align: center; |
328248ba | 34 | border: 1px solid black; |
35 | padding: 0.2em; | |
21c8e53a | 36 | background-color: #e0e0e0; |
37 | display: block | |
328248ba | 38 | } |
39 | ||
40 | /* secondary titles */ | |
41 | h2 { | |
3225872d | 42 | font-family: helvetica,sans-serif; |
328248ba | 43 | font-weight: bold; |
44 | font-size: 16pt; | |
45 | font-variant: normal; | |
21c8e53a | 46 | display: block |
460b9539 | 47 | } |
48 | ||
3225872d RK |
49 | /* Some titles are links too, but we don't want them to go blue */ |
50 | h2 a { | |
51 | color: black | |
52 | } | |
460b9539 | 53 | |
3225872d RK |
54 | /* Use the same table model everywhere */ |
55 | table { | |
56 | border-collapse: collapse | |
460b9539 | 57 | } |
58 | ||
3225872d RK |
59 | /* tabular data **************************************************************/ |
60 | ||
61 | /* playing, recent and new classes correspond to the tables in playing.html, | |
62 | * recent.html and new.html */ | |
e7ce7665 | 63 | table.playing, table.recent, table.new, table.search { |
3225872d | 64 | width: 100% /* use full screen width */ |
460b9539 | 65 | } |
66 | ||
e7ce7665 | 67 | table.playing th, table.recent th, table.new th, table.search th { |
3225872d | 68 | text-align: left /* titles should be left-aligned */ |
78efa64e RK |
69 | } |
70 | ||
e7ce7665 | 71 | table.playing td, table.recent td, table.new td, table.search td { |
3225872d | 72 | vertical-align: middle /* centre cell contents vertically */ |
460b9539 | 73 | } |
74 | ||
e7ce7665 | 75 | table.playing a, table.recent a, table.new a, table.search a { |
3225872d | 76 | color: black |
460b9539 | 77 | } |
78 | ||
3225872d | 79 | /* tr.headings is the row containing column headings */ |
460b9539 | 80 | tr.headings { |
3225872d | 81 | background-color: black; /* heading rows are white on black */ |
460b9539 | 82 | color: white |
83 | } | |
84 | ||
3225872d RK |
85 | /* tr.nowplaying and tr.next are the section heading rows */ |
86 | tr.nowplaying td, tr.next td { | |
87 | background-color: #d0d0d0; /* table section headings are black on grey */ | |
88 | color: black; | |
89 | font-weight: bold; /* table section headings are bold */ | |
460b9539 | 90 | text-align: center |
91 | } | |
92 | ||
3225872d | 93 | /* tr.playing is the row for the currently playing track */ |
460b9539 | 94 | tr.playing { |
3225872d RK |
95 | background-color: #e0ffe0; /* playing track is black on pastel green */ |
96 | color: back | |
460b9539 | 97 | } |
98 | ||
3225872d | 99 | /* tr.even and tr.odd are odd and even rows of the main body of the table */ |
460b9539 | 100 | tr.even { |
3225872d RK |
101 | background-color: #ffecec; /* even rows are black on red */ |
102 | color: black | |
460b9539 | 103 | } |
104 | ||
460b9539 | 105 | tr.odd { |
3225872d RK |
106 | background-color: #ffffff; /* odd rows are black on white */ |
107 | color: black | |
460b9539 | 108 | } |
109 | ||
3225872d RK |
110 | /* th/td.length are the length column */ |
111 | table th.length { | |
112 | text-align: right /* track length column is right-aligned */ | |
460b9539 | 113 | } |
114 | ||
115 | td.length { | |
3225872d RK |
116 | text-align: right; /* track length column is right-aligned */ |
117 | font-size: 10pt /* track length is slightly smaller */ | |
460b9539 | 118 | } |
119 | ||
3225872d RK |
120 | /* p.mgmt is the bar of management buttons */ |
121 | /* form.volume is the form for setting the volume */ | |
122 | /* This is needed to stop FF breaking the management button line in two */ | |
123 | p.mgmt, form.volume { | |
460b9539 | 124 | display: inline |
125 | } | |
126 | ||
f230d1d6 | 127 | /* choose ********************************************************************/ |
460b9539 | 128 | |
3225872d | 129 | /* p.choosealpha is the bar of first-letter links */ |
460b9539 | 130 | p.choosealpha { |
328248ba | 131 | text-align: center; |
3225872d RK |
132 | font-size: 17pt; /* links are one letter so make them big... */ |
133 | font-weight: bold; /* ...and bold */ | |
134 | border: 1px solid black; /* border the link list */ | |
ebd70276 | 135 | padding: 0.2em |
460b9539 | 136 | } |
137 | ||
3225872d | 138 | /* p.directoryname contains the current directory when navigating */ |
460b9539 | 139 | p.directoryname { |
21c8e53a | 140 | font-weight: bold; |
141 | background-color: #ffffe0; /* pastel yellow */ | |
3225872d | 142 | color: black; |
21c8e53a | 143 | padding: 0.2em |
460b9539 | 144 | } |
145 | ||
3225872d | 146 | p.directoryname a { |
460b9539 | 147 | color: black |
148 | } | |
149 | ||
3225872d RK |
150 | /* section headings */ |
151 | div.filesdirectories p.heading { | |
21c8e53a | 152 | display: block; |
3225872d RK |
153 | background-color: #e0ffe0; /* heading are black on pastel green */ |
154 | color: black; | |
155 | font-weight: bold; /* ...and bold */ | |
21c8e53a | 156 | padding: 0.2em; |
157 | padding-left: 1.2em | |
460b9539 | 158 | } |
159 | ||
3225872d RK |
160 | /* one file or directory */ |
161 | div.filesdirectories p.entry { | |
162 | margin-left: 2em /* indent files & directories two steps */ | |
460b9539 | 163 | } |
164 | ||
3225872d RK |
165 | div.filesdirectories a { |
166 | text-decoration: none /* don't underline file/directory names */ | |
460b9539 | 167 | } |
168 | ||
3225872d | 169 | div.filesdirectories a { |
460b9539 | 170 | color: black |
171 | } | |
172 | ||
3225872d | 173 | div.filesdirectories a:active { |
460b9539 | 174 | color: red |
175 | } | |
176 | ||
21c8e53a | 177 | /* all files */ |
3225872d RK |
178 | div.filesdirectories p.all { |
179 | margin-left: 1em /* indent play all button only one step */ | |
21c8e53a | 180 | } |
181 | ||
f230d1d6 | 182 | /* buttons *******************************************************************/ |
460b9539 | 183 | |
49e57291 RK |
184 | button { |
185 | border: 0px; | |
186 | background-color: transparent; | |
187 | padding: 0px; | |
188 | cursor: pointer | |
189 | font-family: helvetica,sans-serif; | |
190 | font-weight: normal; | |
191 | font-variant: normal; | |
192 | font-size: 12pt; | |
193 | } | |
194 | ||
3225872d | 195 | /* Buttons and links that look like buttons share the same formatting */ |
8b15f02d | 196 | span.buttonouter, a.button { |
49e57291 | 197 | padding-top: 2px; |
3225872d RK |
198 | border-width: 3px; |
199 | border-color: #fefefe; /* Off-white */ | |
460b9539 | 200 | border-style: inset; |
3225872d | 201 | background-color: #c0c0c0; /* Black on light grey */ |
460b9539 | 202 | color: #000000; |
3225872d RK |
203 | text-decoration: none; /* Don't underline links */ |
204 | font-family: helvetica,sans-serif; | |
205 | font-weight: normal; | |
206 | font-variant: normal; | |
8e4b76bc | 207 | font-size: 12pt; |
49e57291 RK |
208 | cursor: pointer |
209 | } | |
210 | ||
211 | a.button { | |
212 | padding-left: 4px; | |
213 | padding-right: 4px; | |
460b9539 | 214 | } |
215 | ||
3225872d | 216 | a.button:active,button:active { |
460b9539 | 217 | background-color: #c0c0c0; |
218 | color: #ffffff | |
219 | } | |
220 | ||
3225872d RK |
221 | /* Images that act like buttons aren't styled in the same way, but do want |
222 | * to lose their border */ | |
460b9539 | 223 | img.button { |
224 | border-width: 0 | |
225 | } | |
226 | ||
f230d1d6 | 227 | /* searching *****************************************************************/ |
460b9539 | 228 | |
460b9539 | 229 | span.search_artist { |
3225872d | 230 | font-weight: bold /* Artist in bold */ |
460b9539 | 231 | } |
232 | ||
233 | div.search_album { | |
3225872d | 234 | margin-left: 1em /* Indent album one step */ |
460b9539 | 235 | } |
236 | ||
237 | div.search_title { | |
3225872d | 238 | margin-left: 1em /* Indent title two steps */ |
460b9539 | 239 | } |
240 | ||
3225872d RK |
241 | div.search_title p { |
242 | margin-top: 0; /* Titles are compressed relative to ... */ | |
243 | margin-bottom: 0 /* ...artists and albums */ | |
460b9539 | 244 | } |
245 | ||
3225872d | 246 | div.search_title a { |
460b9539 | 247 | color: black |
248 | } | |
249 | ||
3225872d | 250 | div.search_title a:active { |
460b9539 | 251 | color: red |
252 | } | |
253 | ||
328248ba | 254 | form.search { |
3225872d | 255 | border: 1px solid black; /* Give the search box a border */ |
ebd70276 | 256 | padding: 0.2em |
328248ba | 257 | } |
258 | ||
3225872d | 259 | /* menu bar *******************************************************************/ |
460b9539 | 260 | |
5d30e04b RK |
261 | div.top { |
262 | background-color: #e0e0e0; | |
263 | border: 1px solid black | |
264 | } | |
265 | ||
266 | div.logo { | |
267 | float:right; | |
268 | margin-top:4px; | |
269 | margin-right:4px | |
270 | } | |
271 | ||
3225872d | 272 | /* p.menubar is the menu bar at the top */ |
460b9539 | 273 | p.menubar { |
5d30e04b RK |
274 | float:left; |
275 | margin-left: 4px; | |
fd4bfc4f | 276 | word-spacing: 0px |
460b9539 | 277 | } |
278 | ||
3225872d RK |
279 | /* Subelements are A for usable menus or SPAN for unusable ones */ |
280 | p.menubar a, p.menubar span { | |
281 | font-family: helvetica,sans-serif; | |
a84eb605 | 282 | font-size: 24px; |
fd4bfc4f RK |
283 | text-decoration: none; |
284 | padding: 4px | |
460b9539 | 285 | } |
286 | ||
3225872d | 287 | /* a.activemenu is the current menu item */ |
153115c0 RK |
288 | img.activemenu, a.activemenu { |
289 | background-color: #d0d0d0; | |
290 | color: black; | |
291 | padding: 4px; | |
292 | border: none | |
460b9539 | 293 | } |
294 | ||
3225872d | 295 | /* a.inactivemenu is a non-current but choosable menu item */ |
153115c0 | 296 | img.inactivemenu, a.inactivemenu { |
fd4bfc4f RK |
297 | color: black; |
298 | padding:4px; | |
153115c0 | 299 | border:none |
460b9539 | 300 | } |
301 | ||
3225872d | 302 | /* span.invaliemenu is a non-choosable menu item */ |
d7ce365e | 303 | span.invalidmenu { |
3225872d | 304 | color: #808080 |
d7ce365e | 305 | } |
306 | ||
3225872d | 307 | /* track preferences *********************************************************/ |
460b9539 | 308 | |
3225872d RK |
309 | /* p.prefs_head is the per-track heading */ |
310 | p.prefs_head { | |
311 | background-color: #ffffe0; /* Pastel yellow on black */ | |
312 | color: black; | |
313 | font-weight: bold; | |
314 | padding: 0.2em | |
460b9539 | 315 | } |
316 | ||
3225872d | 317 | /* table.prefs contains the prefs for one track */ |
460b9539 | 318 | table.prefs { |
3225872d RK |
319 | border-spacing: 0; |
320 | margin-left: 1em /* Indent each track's details */ | |
460b9539 | 321 | } |
322 | ||
3225872d RK |
323 | table.prefs th { |
324 | text-align: left /* Titles should be left-aligned */ | |
460b9539 | 325 | } |
326 | ||
3225872d | 327 | table.prefs td { |
460b9539 | 328 | vertical-align: top |
329 | } | |
330 | ||
3225872d | 331 | table.prefs input { |
460b9539 | 332 | font-family: monospace |
333 | } | |
334 | ||
5d30e04b RK |
335 | /* text with sectiosn *******************************************************/ |
336 | ||
337 | /* h2.sectiontitle is used for subsection headings */ | |
338 | h2.sectiontitle { | |
339 | background-color: #e0ffe0; /* Black on pastel green */ | |
340 | color: black; | |
341 | padding: 0.2em | |
342 | } | |
343 | ||
344 | /* There is a div.section for each subsection */ | |
345 | div.section { | |
346 | margin-left: 1em | |
347 | } | |
348 | ||
f230d1d6 | 349 | /* help **********************************************************************/ |
460b9539 | 350 | |
3225872d RK |
351 | /* table.helpbuttons is used for various tables of buttons */ |
352 | table.helpbuttons td { | |
460b9539 | 353 | vertical-align: top |
354 | } | |
355 | ||
3225872d RK |
356 | table.helpbuttons { |
357 | margin-left: 2em; | |
358 | margin-right: 2em | |
460b9539 | 359 | } |
360 | ||
3225872d | 361 | /* span.configuration marks configuration directives */ |
21c8e53a | 362 | span.configuration { |
363 | font-family: monospace | |
364 | } | |
365 | ||
f230d1d6 | 366 | /* volume ********************************************************************/ |
460b9539 | 367 | |
368 | p.volume { | |
369 | text-align: center | |
370 | } | |
371 | ||
f230d1d6 | 372 | /* login page ****************************************************************/ |
373 | ||
328248ba | 374 | form.login { |
375 | border: 1px solid black; | |
376 | background-color: #e0ffe0 /* pastel green */ | |
377 | } | |
378 | ||
6207d2f3 | 379 | form.reminder { |
380 | border: 1px solid black; | |
381 | background-color: #e0e0ff /* pastel blue */ | |
382 | } | |
383 | ||
328248ba | 384 | form.register { |
385 | border: 1px solid black; | |
386 | background-color: #e0e0ff /* pastel blue */ | |
387 | } | |
388 | ||
389 | form.edituser { | |
390 | border: 1px solid black; | |
391 | background-color: #ffffe0 /* pastel yellow */ | |
f230d1d6 | 392 | } |
393 | ||
3225872d RK |
394 | form.login table, form.reminder table, form.register table, form.edituser table { |
395 | margin: 0.2em /* Space login boxes nicely */ | |
396 | } | |
397 | ||
f230d1d6 | 398 | form.logout { |
399 | border-style: none; | |
400 | } | |
401 | ||
328248ba | 402 | div.loginstatus { |
403 | border: 1px solid black; | |
404 | background-color: #ffff00 /* solid yellow */ | |
405 | } | |
406 | ||
3225872d | 407 | div.loginstatus p { |
328248ba | 408 | color: #0000ff; /* solid blue */ |
3225872d RK |
409 | font-size: 18pt; |
410 | font-weight: bold; | |
411 | margin: 0.2em | |
f230d1d6 | 412 | } |
413 | ||
414 | /* errors ********************************************************************/ | |
415 | ||
328248ba | 416 | div.error { |
417 | border: 1px solid black; | |
3225872d | 418 | background-color: #ff0000; /* White on solid red */ |
328248ba | 419 | color: white; |
3225872d | 420 | font-size: 18pt; |
328248ba | 421 | font-weight: bold |
422 | } | |
423 | ||
3225872d | 424 | div.error p { |
ebd70276 | 425 | margin: 0.2em |
426 | } | |
427 | ||
f230d1d6 | 428 | /* miscelleanous *************************************************************/ |
460b9539 | 429 | |
430 | /* credits */ | |
431 | p.credits { | |
3225872d | 432 | font-size: 10pt; /* because visually intrusive */ |
21c8e53a | 433 | text-align: right; |
434 | background-color: #e0e0e0; | |
3225872d | 435 | color: black; |
21c8e53a | 436 | padding: 0.2em |
460b9539 | 437 | } |
438 | /* | |
439 | This file is part of DisOrder. | |
3225872d | 440 | Copyright (C) 2003-2008 Richard Kettlewell |
460b9539 | 441 | |
442 | This program is free software; you can redistribute it and/or modify | |
443 | it under the terms of the GNU General Public License as published by | |
444 | the Free Software Foundation; either version 2 of the License, or | |
445 | (at your option) any later version. | |
446 | ||
447 | This program is distributed in the hope that it will be useful, but | |
448 | WITHOUT ANY WARRANTY; without even the implied warranty of | |
449 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | |
450 | General Public License for more details. | |
451 | ||
452 | You should have received a copy of the GNU General Public License | |
453 | along with this program; if not, write to the Free Software | |
454 | Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 | |
455 | USA | |
456 | */ |