mdw@git.distorted.org.uk Git - disorder/blob - templates/disorder.css

   1 /* default font and colors */
   2 body {
   3   color: black;
   4   background-color: white;
   5   font-family: times,serif;
   6   font-weight: normal;
   7   font-size: 12pt;
   8   font-variant: normal
   9 }
  10
  11 input {
  12   font-family: helvetica,sans-serif;
  13   font-weight: normal;
  14   font-size: 12pt;
  15   font-variant: normal
  16 }
  17
  18 /* general link colors */
  19 a {
  20   color: blue
  21 }
  22
  23 a:active {
  24   color: red
  25 }
  26
  27 /* title bars */
  28 h1 {
  29   font-family: helvetica,sans-serif;
  30   font-weight: bold;
  31   font-size: 18pt;
  32   font-variant: normal;
  33   text-align: center;
  34   border: 1px solid black;
  35   padding: 0.2em;
  36   background-color: #e0e0e0;
  37   display: block
  38 }
  39
  40 /* secondary titles */
  41 h2 {
  42   font-family: helvetica,sans-serif;
  43   font-weight: bold;
  44   font-size: 16pt;
  45   font-variant: normal;
  46   display: block
  47 }
  48
  49 /* Some titles are links too, but we don't want them to go blue */
  50 h2 a {
  51   color: black
  52 }
  53
  54 /* Use the same table model everywhere */
  55 table {
  56   border-collapse: collapse
  57 }
  58
  59 /* tabular data **************************************************************/
  60
  61 /* playing, recent and new classes correspond to the tables in playing.html,
  62  * recent.html and new.html */
  63 table.playing, table.recent, table.new, table.search {
  64   width: 100%                   /* use full screen width */
  65 }
  66
  67 table.playing th, table.recent th, table.new th, table.search th {
  68   text-align: left              /* titles should be left-aligned */
  69 }
  70
  71 table.playing td, table.recent td, table.new td, table.search td {
  72   vertical-align: middle        /* centre cell contents vertically */
  73 }
  74
  75 table.playing a, table.recent a, table.new a, table.search a {
  76   color: black
  77 }
  78
  79 /* tr.headings is the row containing column headings */
  80 tr.headings {
  81   background-color: black;      /* heading rows are white on black */
  82   color: white
  83 }
  84
  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 */
  90   text-align: center
  91 }
  92
  93 /* tr.playing is the row for the currently playing track */
  94 tr.playing {
  95   background-color: #e0ffe0;    /* playing track is black on pastel green */
  96   color: back
  97 }
  98
  99 /* tr.even and tr.odd are odd and even rows of the main body of the table */
 100 tr.even {
 101   background-color: #ffecec;    /* even rows are black on red */
 102   color: black
 103 }
 104
 105 tr.odd {
 106   background-color: #ffffff;    /* odd rows are black on white */
 107   color: black
 108 }
 109
 110 /* th/td.length are the length column */
 111 table th.length {
 112   text-align: right             /* track length column is right-aligned */
 113 }
 114
 115 td.length {
 116   text-align: right;            /* track length column is right-aligned */
 117   font-size: 10pt               /* track length is slightly smaller */
 118 }
 119
 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 {
 124   display: inline
 125 }
 126
 127 /* choose ********************************************************************/
 128
 129 /* p.choosealpha is the bar of first-letter links */
 130 p.choosealpha {
 131   text-align: center;
 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 */
 135   padding: 0.2em
 136 }
 137
 138 /* p.directoryname contains the current directory when navigating */
 139 p.directoryname {
 140   font-weight: bold;
 141   background-color: #ffffe0;    /* pastel yellow */
 142   color: black;
 143   padding: 0.2em
 144 }
 145
 146 p.directoryname a {
 147   color: black
 148 }
 149
 150 /* section headings */
 151 div.filesdirectories p.heading {
 152   display: block;
 153   background-color: #e0ffe0;    /* heading are black on pastel green */
 154   color: black;
 155   font-weight: bold;            /* ...and bold */
 156   padding: 0.2em;
 157   padding-left: 1.2em
 158 }
 159
 160 /* one file or directory */
 161 div.filesdirectories p.entry {
 162   margin-left: 2em              /* indent files & directories two steps */
 163 }
 164
 165 div.filesdirectories a {
 166   text-decoration: none         /* don't underline file/directory names */
 167 }
 168
 169 div.filesdirectories a {
 170   color: black
 171 }
 172
 173 div.filesdirectories a:active {
 174   color: red
 175 }
 176
 177 /* all files */
 178 div.filesdirectories p.all {
 179   margin-left: 1em              /* indent play all button only one step */
 180 }
 181
 182 /* buttons *******************************************************************/
 183
 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
 195 /* Buttons and links that look like buttons share the same formatting */
 196 span.buttonouter, a.button {
 197   padding-top: 2px;
 198   border-width: 3px;
 199   border-color: #fefefe;        /* Off-white */
 200   border-style: inset;
 201   background-color: #c0c0c0;    /* Black on light grey */
 202   color: #000000;
 203   text-decoration: none;        /* Don't underline links */
 204   font-family: helvetica,sans-serif;
 205   font-weight: normal;
 206   font-variant: normal;
 207   font-size: 12pt;
 208   cursor: pointer
 209 }
 210
 211 a.button {
 212   padding-left: 4px;
 213   padding-right: 4px;
 214 }
 215
 216 a.button:active,button:active {
 217   background-color: #c0c0c0;
 218   color: #ffffff
 219 }
 220
 221 /* Images that act like buttons aren't styled in the same way, but do want
 222  * to lose their border */
 223 img.button {
 224   border-width: 0
 225 }
 226
 227 /* searching *****************************************************************/
 228
 229 span.search_artist {
 230   font-weight: bold             /* Artist in bold */
 231 }
 232
 233 div.search_album {
 234   margin-left: 1em              /* Indent album one step */
 235 }
 236
 237 div.search_title {
 238   margin-left: 1em              /* Indent title two steps */
 239 }
 240
 241 div.search_title p {
 242   margin-top: 0;                /* Titles are compressed relative to ... */
 243   margin-bottom: 0              /* ...artists and albums */
 244 }
 245
 246 div.search_title a {
 247   color: black
 248 }
 249
 250 div.search_title a:active {
 251   color: red
 252 }
 253
 254 form.search {
 255   border: 1px solid black;      /* Give the search box a border */
 256   padding: 0.2em
 257 }
 258
 259 /* menu bar *******************************************************************/
 260
 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
 272 /* p.menubar is the menu bar at the top */
 273 p.menubar {
 274   float:left;
 275   margin-left: 4px;
 276   word-spacing: 0px
 277 }
 278
 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;
 282   font-size: 24px;
 283   text-decoration: none;
 284   padding: 4px
 285 }
 286
 287 /* a.activemenu is the current menu item */
 288 img.activemenu, a.activemenu {
 289   background-color: #d0d0d0;
 290   color: black;
 291   padding: 4px;
 292   border: none
 293 }
 294
 295 /* a.inactivemenu is a non-current but choosable menu item */
 296 img.inactivemenu, a.inactivemenu {
 297   color: black;
 298   padding:4px;
 299   border:none
 300 }
 301
 302 /* span.invaliemenu is a non-choosable menu item */
 303 span.invalidmenu {
 304   color: #808080
 305 }
 306
 307 /* track preferences *********************************************************/
 308
 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
 315 }
 316
 317 /* table.prefs contains the prefs for one track */
 318 table.prefs {
 319   border-spacing: 0;
 320   margin-left: 1em              /* Indent each track's details */
 321 }
 322
 323 table.prefs th {
 324   text-align: left              /* Titles should be left-aligned */
 325 }
 326
 327 table.prefs td {
 328   vertical-align: top
 329 }
 330
 331 table.prefs input {
 332   font-family: monospace
 333 }
 334
 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
 349 /* help **********************************************************************/
 350
 351 /* table.helpbuttons is used for various tables of buttons */
 352 table.helpbuttons td {
 353   vertical-align: top
 354 }
 355
 356 table.helpbuttons {
 357   margin-left: 2em;
 358   margin-right: 2em
 359 }
 360
 361 /* span.configuration marks configuration directives */
 362 span.configuration {
 363   font-family: monospace
 364 }
 365
 366 /* volume ********************************************************************/
 367
 368 p.volume {
 369   text-align: center
 370 }
 371
 372 /* login page ****************************************************************/
 373
 374 form.login {
 375   border: 1px solid black;
 376   background-color: #e0ffe0     /* pastel green */
 377 }
 378
 379 form.reminder {
 380   border: 1px solid black;
 381   background-color: #e0e0ff     /* pastel blue */
 382 }
 383
 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 */
 392 }
 393
 394 form.login table, form.reminder table, form.register table, form.edituser table {
 395   margin: 0.2em                 /* Space login boxes nicely */
 396 }
 397
 398 form.logout {
 399   border-style: none;
 400 }
 401
 402 div.loginstatus {
 403   border: 1px solid black;
 404   background-color: #ffff00     /* solid yellow */
 405 }
 406
 407 div.loginstatus p {
 408   color: #0000ff;               /* solid blue */
 409   font-size: 18pt;
 410   font-weight: bold;
 411   margin: 0.2em
 412 }
 413
 414 /* errors ********************************************************************/
 415
 416 div.error {
 417   border: 1px solid black;
 418   background-color: #ff0000;    /* White on solid red */
 419   color: white;
 420   font-size: 18pt;
 421   font-weight: bold
 422 }
 423
 424 div.error p {
 425   margin: 0.2em
 426 }
 427
 428 /* miscelleanous *************************************************************/
 429
 430 /* credits */
 431 p.credits {
 432   font-size: 10pt;              /* because visually intrusive */
 433   text-align: right;
 434   background-color: #e0e0e0;
 435   color: black;
 436   padding: 0.2em
 437 }
 438 /*
 439 This file is part of DisOrder.
 440 Copyright (C) 2003-2008 Richard Kettlewell
 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 */