chiark / gitweb /
Macroize submit buttons so we can mess with them more easily
[disorder] / templates / disorder.css
CommitLineData
328248ba 1/* default font and colors */
460b9539 2body {
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
11input {
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 */
19a {
460b9539 20 color: blue
21}
22
23a:active {
24 color: red
25}
26
328248ba 27/* title bars */
3225872d
RK
28h1 {
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 */
41h2 {
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 */
50h2 a {
51 color: black
52}
460b9539 53
3225872d
RK
54/* Use the same table model everywhere */
55table {
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 63table.playing, table.recent, table.new, table.search {
3225872d 64 width: 100% /* use full screen width */
460b9539 65}
66
e7ce7665 67table.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 71table.playing td, table.recent td, table.new td, table.search td {
3225872d 72 vertical-align: middle /* centre cell contents vertically */
460b9539 73}
74
e7ce7665 75table.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 80tr.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 */
86tr.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 94tr.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 100tr.even {
3225872d
RK
101 background-color: #ffecec; /* even rows are black on red */
102 color: black
460b9539 103}
104
460b9539 105tr.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 */
111table th.length {
112 text-align: right /* track length column is right-aligned */
460b9539 113}
114
115td.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 */
123p.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 130p.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 139p.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 146p.directoryname a {
460b9539 147 color: black
148}
149
3225872d
RK
150/* section headings */
151div.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 */
161div.filesdirectories p.entry {
162 margin-left: 2em /* indent files & directories two steps */
460b9539 163}
164
3225872d
RK
165div.filesdirectories a {
166 text-decoration: none /* don't underline file/directory names */
460b9539 167}
168
3225872d 169div.filesdirectories a {
460b9539 170 color: black
171}
172
3225872d 173div.filesdirectories a:active {
460b9539 174 color: red
175}
176
21c8e53a 177/* all files */
3225872d
RK
178div.filesdirectories p.all {
179 margin-left: 1em /* indent play all button only one step */
21c8e53a 180}
181
f230d1d6 182/* buttons *******************************************************************/
460b9539 183
49e57291
RK
184button {
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 196span.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
211a.button {
212 padding-left: 4px;
213 padding-right: 4px;
460b9539 214}
215
3225872d 216a.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 223img.button {
224 border-width: 0
225}
226
f230d1d6 227/* searching *****************************************************************/
460b9539 228
460b9539 229span.search_artist {
3225872d 230 font-weight: bold /* Artist in bold */
460b9539 231}
232
233div.search_album {
3225872d 234 margin-left: 1em /* Indent album one step */
460b9539 235}
236
237div.search_title {
3225872d 238 margin-left: 1em /* Indent title two steps */
460b9539 239}
240
3225872d
RK
241div.search_title p {
242 margin-top: 0; /* Titles are compressed relative to ... */
243 margin-bottom: 0 /* ...artists and albums */
460b9539 244}
245
3225872d 246div.search_title a {
460b9539 247 color: black
248}
249
3225872d 250div.search_title a:active {
460b9539 251 color: red
252}
253
328248ba 254form.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
261div.top {
262 background-color: #e0e0e0;
263 border: 1px solid black
264}
265
266div.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 273p.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 */
280p.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
288img.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 296img.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 303span.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 */
310p.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 318table.prefs {
3225872d
RK
319 border-spacing: 0;
320 margin-left: 1em /* Indent each track's details */
460b9539 321}
322
3225872d
RK
323table.prefs th {
324 text-align: left /* Titles should be left-aligned */
460b9539 325}
326
3225872d 327table.prefs td {
460b9539 328 vertical-align: top
329}
330
3225872d 331table.prefs input {
460b9539 332 font-family: monospace
333}
334
5d30e04b
RK
335/* text with sectiosn *******************************************************/
336
337/* h2.sectiontitle is used for subsection headings */
338h2.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 */
345div.section {
346 margin-left: 1em
347}
348
f230d1d6 349/* help **********************************************************************/
460b9539 350
3225872d
RK
351/* table.helpbuttons is used for various tables of buttons */
352table.helpbuttons td {
460b9539 353 vertical-align: top
354}
355
3225872d
RK
356table.helpbuttons {
357 margin-left: 2em;
358 margin-right: 2em
460b9539 359}
360
3225872d 361/* span.configuration marks configuration directives */
21c8e53a 362span.configuration {
363 font-family: monospace
364}
365
f230d1d6 366/* volume ********************************************************************/
460b9539 367
368p.volume {
369 text-align: center
370}
371
f230d1d6 372/* login page ****************************************************************/
373
328248ba 374form.login {
375 border: 1px solid black;
376 background-color: #e0ffe0 /* pastel green */
377}
378
6207d2f3 379form.reminder {
380 border: 1px solid black;
381 background-color: #e0e0ff /* pastel blue */
382}
383
328248ba 384form.register {
385 border: 1px solid black;
386 background-color: #e0e0ff /* pastel blue */
387}
388
389form.edituser {
390 border: 1px solid black;
391 background-color: #ffffe0 /* pastel yellow */
f230d1d6 392}
393
3225872d
RK
394form.login table, form.reminder table, form.register table, form.edituser table {
395 margin: 0.2em /* Space login boxes nicely */
396}
397
f230d1d6 398form.logout {
399 border-style: none;
400}
401
328248ba 402div.loginstatus {
403 border: 1px solid black;
404 background-color: #ffff00 /* solid yellow */
405}
406
3225872d 407div.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 416div.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 424div.error p {
ebd70276 425 margin: 0.2em
426}
427
f230d1d6 428/* miscelleanous *************************************************************/
460b9539 429
430/* credits */
431p.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/*
439This file is part of DisOrder.
3225872d 440Copyright (C) 2003-2008 Richard Kettlewell
460b9539 441
442This program is free software; you can redistribute it and/or modify
443it under the terms of the GNU General Public License as published by
444the Free Software Foundation; either version 2 of the License, or
445(at your option) any later version.
446
447This program is distributed in the hope that it will be useful, but
448WITHOUT ANY WARRANTY; without even the implied warranty of
449MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
450General Public License for more details.
451
452You should have received a copy of the GNU General Public License
453along with this program; if not, write to the Free Software
454Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
455USA
456*/