Tinker with UI appearance a bit

[disorder] / templates / disorder.css

/* default font and colors */
body {
  color: black;
  background-color: white;
  font-family: times,serif;
  font-weight: normal;
  font-size: 12pt;
  font-variant: normal
}

input {
  font-family: helvetica,sans-serif;
  font-weight: normal;
  font-size: 12pt;
  font-variant: normal
}

/* general link colors */
a {
  color: blue
}

a:active {
  color: red
}

/* title bars */
h1 {
  font-family: helvetica,sans-serif;
  font-weight: bold;
  font-size: 18pt;
  font-variant: normal;
  text-align: center;
  border: 1px solid black;
  padding: 0.2em;
  background-color: #e0e0e0;
  display: block
}

/* secondary titles */
h2 {
  font-family: helvetica,sans-serif;
  font-weight: bold;
  font-size: 16pt;
  font-variant: normal;
  display: block
}

/* Some titles are links too, but we don't want them to go blue */
h2 a {
  color: black
}

/* Use the same table model everywhere */
table {
  border-collapse: collapse
}

/* tabular data **************************************************************/

/* playing, recent and new classes correspond to the tables in playing.html,
 * recent.html and new.html */
table.playing, table.recent, table.new, table.search {
  width: 100%  		     	/* use full screen width */
}

table.playing th, table.recent th, table.new th, table.search th {
  text-align: left		/* titles should be left-aligned */
}

table.playing td, table.recent td, table.new td, table.search td {
  vertical-align: middle        /* centre cell contents vertically */
}

table.playing a, table.recent a, table.new a, table.search a {
  color: black
}

/* tr.headings is the row containing column headings */
tr.headings {
  background-color: black;      /* heading rows are white on black */
  color: white
}

/* tr.nowplaying and tr.next are the section heading rows */
tr.nowplaying td, tr.next td {
  background-color: #d0d0d0;    /* table section headings are black on grey */
  color: black;
  font-weight: bold;            /* table section headings are bold */
  text-align: center
}

/* tr.playing is the row for the currently playing track */
tr.playing {
  background-color: #e0ffe0;	/* playing track is black on pastel green */
  color: back
}

/* tr.even and tr.odd are odd and even rows of the main body of the table */
tr.even {
  background-color: #ffecec;	/* even rows are black on red */
  color: black
}

tr.odd {
  background-color: #ffffff;	/* odd rows are black on white */
  color: black
}

/* th/td.length are the length column */
table th.length {
  text-align: right             /* track length column is right-aligned */
}

td.length {
  text-align: right;            /* track length column is right-aligned */
  font-size: 10pt		/* track length is slightly smaller */
}

/* p.mgmt is the bar of management buttons */
/* form.volume is the form for setting the volume */
/* This is needed to stop FF breaking the management button line in two */
p.mgmt, form.volume {
  display: inline
}

/* choose ********************************************************************/

/* p.choosealpha is the bar of first-letter links */
p.choosealpha {
  text-align: center;
  font-size: 17pt;              /* links are one letter so make them big... */
  font-weight: bold;            /* ...and bold */
  border: 1px solid black;      /* border the link list */
  padding: 0.2em
}

/* p.directoryname contains the current directory when navigating */
p.directoryname {
  font-weight: bold;
  background-color: #ffffe0;	/* pastel yellow */
  color: black;
  padding: 0.2em
}

p.directoryname a {
  color: black
}

/* section headings */
div.filesdirectories p.heading {
  display: block;
  background-color: #e0ffe0;	/* heading are black on pastel green */
  color: black;
  font-weight: bold;            /* ...and bold */
  padding: 0.2em;
  padding-left: 1.2em
}

/* one file or directory */
div.filesdirectories p.entry {
  margin-left: 2em              /* indent files & directories two steps */
}

div.filesdirectories a {
  text-decoration: none         /* don't underline file/directory names */
}

div.filesdirectories a {
  color: black
}

div.filesdirectories a:active {
  color: red
}

/* all files */
div.filesdirectories p.all {
  margin-left: 1em              /* indent play all button only one step */
}

/* buttons *******************************************************************/

/* Buttons and links that look like buttons share the same formatting */
button,a.button {
  padding: 1px;
  border-width: 3px;
  border-color: #fefefe;	/* Off-white */
  border-style: inset;
  background-color: #c0c0c0;	/* Black on light grey */
  color: #000000;
  text-decoration: none;	/* Don't underline links */
  font-family: helvetica,sans-serif;
  font-weight: normal;
  font-variant: normal;
  font-size: 12pt
}

a.button:active,button:active {
  background-color: #c0c0c0;
  color: #ffffff
}

/* Images that act like buttons aren't styled in the same way, but do want
 * to lose their border */
img.button {
  border-width: 0
}

/* searching *****************************************************************/

span.search_artist {
  font-weight: bold             /* Artist in bold */
}

div.search_album {
  margin-left: 1em		/* Indent album one step */
}

div.search_title {
  margin-left: 1em		/* Indent title two steps */
}

div.search_title p {
  margin-top: 0; 		/* Titles are compressed relative to ... */
  margin-bottom: 0              /* ...artists and albums */
}

div.search_title a {
  color: black
}

div.search_title a:active {
  color: red
}

form.search {
  border: 1px solid black;	/* Give the search box a border */
  padding: 0.2em
}

/* menu bar *******************************************************************/

div.top {
  background-color: #e0e0e0;
  border: 1px solid black
}

div.logo {
  float:right;
  margin-top:4px;
  margin-right:4px
}

/* p.menubar is the menu bar at the top */
p.menubar {
  float:left;
  margin-left: 4px;
  word-spacing: 1em		/* Space out menu items */
}

/* Subelements are A for usable menus or SPAN for unusable ones */
p.menubar a, p.menubar span {
  font-family: helvetica,sans-serif;
  font-weight: bold;
  font-size: 14pt;
  text-decoration: none
}

/* a.activemenu is the current menu item */
a.activemenu {
  color: red;
}

/* a.inactivemenu is a non-current but choosable menu item */
a.inactivemenu {
  color: black
}

/* span.invaliemenu is a non-choosable menu item */
span.invalidmenu {
  color: #808080
}

/* track preferences *********************************************************/

/* p.prefs_head is the per-track heading */
p.prefs_head {
  background-color: #ffffe0;	/* Pastel yellow on black */
  color: black;
  font-weight: bold;
  padding: 0.2em
}

/* table.prefs contains the prefs for one track */
table.prefs {
  border-spacing: 0;
  margin-left: 1em 		/* Indent each track's details */
}

table.prefs th {
  text-align: left		/* Titles should be left-aligned */
}

table.prefs td {
  vertical-align: top
}

table.prefs input {
  font-family: monospace
}

/* text with sectiosn *******************************************************/

/* h2.sectiontitle is used for subsection headings */
h2.sectiontitle {
  background-color: #e0ffe0;	/* Black on pastel green */
  color: black;
  padding: 0.2em
}

/* There is a div.section for each subsection */
div.section {
  margin-left: 1em
}

/* help **********************************************************************/

/* table.helpbuttons is used for various tables of buttons */
table.helpbuttons td {
  vertical-align: top
}

table.helpbuttons {
  margin-left: 2em;
  margin-right: 2em
}

/* span.configuration marks configuration directives */
span.configuration {
  font-family: monospace
}

/* volume ********************************************************************/

p.volume {
  text-align: center
}

/* login page ****************************************************************/

form.login {
  border: 1px solid black;
  background-color: #e0ffe0	/* pastel green */
}

form.reminder {
  border: 1px solid black;
  background-color: #e0e0ff	/* pastel blue */
}

form.register {
  border: 1px solid black;
  background-color: #e0e0ff	/* pastel blue */
}

form.edituser {
  border: 1px solid black;
  background-color: #ffffe0	/* pastel yellow */
}

form.login table, form.reminder table, form.register table, form.edituser table {
  margin: 0.2em			/* Space login boxes nicely */
}

form.logout {
  border-style: none;
}

div.loginstatus {
  border: 1px solid black;
  background-color: #ffff00	/* solid yellow */
}

div.loginstatus p {
  color: #0000ff;		/* solid blue */
  font-size: 18pt;
  font-weight: bold;
  margin: 0.2em
}

/* errors ********************************************************************/

div.error {
  border: 1px solid black;
  background-color: #ff0000;	/* White on solid red */
  color: white;
  font-size: 18pt;
  font-weight: bold
}

div.error p {
  margin: 0.2em
}

/* miscelleanous *************************************************************/

/* credits */
p.credits {
  font-size: 10pt;		/* because visually intrusive */
  text-align: right;
  background-color: #e0e0e0;
  color: black;
  padding: 0.2em
}
/*
This file is part of DisOrder.
Copyright (C) 2003-2008 Richard Kettlewell

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
USA
*/