X-Git-Url: http://www.chiark.greenend.org.uk/ucgi/~mdw/git/disorder/blobdiff_plain/460b9539a7c15580e41a71bbc0f47ae776238915..daf0351f962a969c28bea01ed6b66453cccfe556:/templates/disorder.css

diff --git a/templates/disorder.css b/templates/disorder.css
index 8a42b45..a1697c1 100644
--- a/templates/disorder.css
+++ b/templates/disorder.css
@@ -1,15 +1,22 @@
-/* default colors */
+/* default font and colors */
 body {
   color: black;
-  background-color: white
+  background-color: white;
+  font-family: times,serif;
+  font-weight: normal;
+  font-size: 12pt;
+  font-variant: normal
 }
 
-/* general link colors */
-a:link {
-  color: blue
+input {
+  font-family: helvetica,sans-serif;
+  font-weight: normal;
+  font-size: 12pt;
+  font-variant: normal
 }
 
-a:visited {
+/* general link colors */
+a {
   color: blue
 }
 
@@ -17,443 +24,383 @@ a:active {
   color: red
 }
 
-h1.title {
-  font-family: sans-serif;
+/* title bars */
+h1 {
+  font-family: helvetica,sans-serif;
   font-weight: bold;
+  font-size: 18pt;
+  font-variant: normal;
   text-align: center;
-  font-size: 18pt
-}
-
-/* playing and recent *********************************************************/
-
-/* table of current and future tracks */
-table.playing {
-  width: 100%;			/* use the full available width */
-  border-spacing: 0		/* no unsightly gaps between cells */
-}
-
-/* table of recently played tracks */
-table.recent {
-  width: 100%;			/* use the full available width */
-  border-spacing: 0		/* no unsightly gaps between cells */
-}
-
-/* titles in tables */
-th {
-  text-align: left
+  border: 1px solid black;
+  padding: 0.2em;
+  background-color: #e0e0e0;
+  display: block
 }
 
-/* ordinary cells in tables */
-td {
-  vertical-align: center
-}
-
-/* the headings <tr> of the table */
-tr.headings {
-  background-color: black;
-  color: white
-}
-
-/* The 'now playing' heading */
-tr.nowplaying {
-}
-
-td.nowplaying {
-  background-color: #d0d0d0;
+/* secondary titles */
+h2 {
+  font-family: helvetica,sans-serif;
   font-weight: bold;
-  text-align: center
+  font-size: 16pt;
+  font-variant: normal;
+  display: block
 }
 
-/* the currently playing track */
-tr.playing {
-  background-color: #e0ffe0	/* pastel green */
-}
-
-/* the "next" heading */
-tr.next {
-}
-
-td.next {
-  background-color: #d0d0d0;
-  font-weight: bold;
-  text-align: center
-}
-
-/* even-numbered rows */
-tr.even {
-  background-color: #ffecec	/* faint pastel red */
-}
-
-/* odd-numbered rows */
-tr.odd {
-  background-color: #ffffff	/* white */
+/* Some titles are links too, but we don't want them to go blue */
+h2 a {
+  color: black
 }
 
-/* column titles */
-th.when {
+/* Use the same table model everywhere */
+table {
+  border-collapse: collapse
 }
 
-th.who {
-}
+/* tabular data **************************************************************/
 
-th.artist {
+/* playing, recent and new classes correspond to the tables in playing.html,
+ * recent.html and new.html */
+table.playing, table.recent, table.new {
+  width: 100%  		     	/* use full screen width */
 }
 
-th.album {
+table.playing th, table.recent th, table.new th {
+  text-align: left		/* titles should be left-aligned */
 }
 
-th.title {
+table.playing td, table.recent td, table.new td {
+  vertical-align: middle        /* centre cell contents vertically */
 }
 
-th.length {
-  text-align: right
+table.playing a, table.recent a, table.new a {
+  color: black
 }
 
-th.button {
+/* tr.headings is the row containing column headings */
+tr.headings {
+  background-color: black;      /* heading rows are white on black */
+  color: white
 }
 
-/* individual cells */
-
-td.when {
+/* 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
 }
 
-td.who {
+/* tr.playing is the row for the currently playing track */
+tr.playing {
+  background-color: #e0ffe0;	/* playing track is black on pastel green */
+  color: back
 }
 
-td.artist {
+/* 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
 }
 
-td.album {
+tr.odd {
+  background-color: #ffffff;	/* odd rows are black on white */
+  color: black
 }
 
-td.title {
+/* th/td.length are the length column */
+table th.length {
+  text-align: right             /* track length column is right-aligned */
 }
 
 td.length {
-  text-align: right;
-  font-size: small		/* because otherwise visually intrusive */
+  text-align: right;            /* track length column is right-aligned */
+  font-size: 10pt		/* track length is slightly smaller */
 }
 
-td.button {
-  text-align: center;
-  padding: 1px;
-  border-color: black;
-  border-width: 1px;
-  border-style: solid;
-  background-color: #c0c0c0;
-  color: #000000
-}
-
-p.mgmt,form.volume {
+/* 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 *********************************************************************/
+/* choose ********************************************************************/
 
-/* first letter choice */
+/* p.choosealpha is the bar of first-letter links */
 p.choosealpha {
-  text-align: center
+  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
 }
 
-/* containing directory */
+/* p.directoryname contains the current directory when navigating */
 p.directoryname {
-  font-weight: bold
-}
-
-/* directories */
-div.directories {
-}
-
-/* heading for directories */
-p.directories {
-  font-weight: bold
-}
-
-/* one directory */
-p.directory {
-  margin-left: 1em
-}
-
-a.directory {
-}
-
-a.directory:link {
-  color: black
+  font-weight: bold;
+  background-color: #ffffe0;	/* pastel yellow */
+  color: black;
+  padding: 0.2em
 }
 
-a.directory:visited {
+p.directoryname a {
   color: black
 }
 
-a.directory:active {
-  color: red
-}
-
-/* files */
-div.files {
+/* 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
 }
 
-/* heading for files */
-p.files {
-  font-weight: bold
+/* one file or directory */
+div.filesdirectories p.entry {
+  margin-left: 2em              /* indent files & directories two steps */
 }
 
-/* one file */
-p.file {
-  margin-left: 1em
+div.filesdirectories a {
+  text-decoration: none         /* don't underline file/directory names */
 }
 
-a.file {
-  text-decoration: none;
-}
-
-a.file:link {
+div.filesdirectories a {
   color: black
 }
 
-a.file:visited {
-  color: black
+div.filesdirectories a:active {
+  color: red
 }
 
-a.file:active {
-  color: red
+/* all files */
+div.filesdirectories p.all {
+  margin-left: 1em              /* indent play all button only one step */
 }
 
-/* buttons ********************************************************************/
+/* buttons *******************************************************************/
 
-/* a.allfiles turns up in track choice
- * button is used e.g. in searching
- */
-a.allfiles,a.prefs,button,span.button {
+/* Buttons and links that look like buttons share the same formatting */
+button,a.button {
   padding: 1px;
-  border-color: #fefefe;
+  border-width: 3px;
+  border-color: #fefefe;	/* Off-white */
   border-style: inset;
-  background-color: #c0c0c0;
+  background-color: #c0c0c0;	/* Black on light grey */
   color: #000000;
-  text-decoration: none;
-  font-family: sans-serif
-}
-
-a.button {
-  text-decoration: none;
-  font-family: sans-serif
-}
-
-a.button:link,a.button:visited,a.allfiles:link,a.allfiles:visited {
-  background-color: #c0c0c0;
-  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,a.allfiles:active,button:active {
+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 ******************************************************************/
-
-div.searchresults {
-}
-
-div.search_artist {
-}
-
-p.search_artist {
-}
+/* searching *****************************************************************/
 
 span.search_artist {
-  font-weight: bold
+  font-weight: bold             /* Artist in bold */
 }
 
 div.search_album {
-  margin-left: 1em
-}
-
-p.search_album {
-}
-
-span.search_album {
+  margin-left: 1em		/* Indent album one step */
 }
 
 div.search_title {
-  margin-left: 1em
-}
-
-p.search_title {
-  margin-top: 0;
-  margin-bottom: 0
+  margin-left: 1em		/* Indent title two steps */
 }
 
-a.search_title {
-  text-decoration: underline
+div.search_title p {
+  margin-top: 0; 		/* Titles are compressed relative to ... */
+  margin-bottom: 0              /* ...artists and albums */
 }
 
-a.search_title:link {
+div.search_title a {
   color: black
 }
 
-a.search_title:visited {
-  color: black
-}
-
-a.search_title:active {
+div.search_title a:active {
   color: red
 }
 
-/* sidebar ********************************************************************/
-
-div#sidebar {
-  margin: 1em;
-  position: absolute;
-  width: 10em;
-  top: 0;
-  right: auto;
-  left: 0;
+form.search {
+  border: 1px solid black;	/* Give the search box a border */
+  padding: 0.2em
 }
 
-div#content {
-  position: absolute;
-  width: auto;
-  top: 0;
-  right: 1em;
-  left: 6em;
-}
-
-.sidebarlink {
-  font-family: sans-serif
-}
+/* menu bar *******************************************************************/
 
-a.sidebarlink {
-  text-decoration: none;
-  color: black
+/* p.menubar is the menu bar at the top */
+p.menubar {
+  word-spacing: 1em		/* Space out menu items */
 }
 
-a.sidebarlink:visited {
-  color: black
+/* 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.sidebarlink:active {
-  color: red
+/* a.activemenu is the current menu item */
+a.activemenu {
+  color: red;
 }
 
-a.sidebarlink:visited {
+/* a.inactivemenu is a non-current but choosable menu item */
+a.inactivemenu {
   color: black
 }
 
-/* topbar *********************************************************************/
-
-p.menubar {
-  word-spacing: 1em
+/* span.invaliemenu is a non-choosable menu item */
+span.invalidmenu {
+  color: #808080
 }
 
-.activemenu {
-  font-family: sans-serif;
+/* 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;
-  font-size: 14pt
+  padding: 0.2em
 }
 
-.inactivemenu {
-  font-family: sans-serif;
-  font-weight: bold;
-  font-size: 14pt
+/* table.prefs contains the prefs for one track */
+table.prefs {
+  border-spacing: 0;
+  margin-left: 1em 		/* Indent each track's details */
 }
 
-a.inactivemenu,a.inactivemenu:visited {
-  text-decoration: none;
-  color: black
+table.prefs th {
+  text-align: left		/* Titles should be left-aligned */
 }
 
-a.activemenu,a.activemenu:visited {
-  text-decoration: none;
-  color: red
+table.prefs td {
+  vertical-align: top
 }
 
-a.activemenu:active,a.inactivemenu:active {
-  text-decoration: none;
-  color: red
+table.prefs input {
+  font-family: monospace
 }
 
-/* prefs **********************************************************************/
+/* help **********************************************************************/
 
-p.prefs_new,p.prefs_head {
-  font-weight: bold
+/* table.helpbuttons is used for various tables of buttons */
+table.helpbuttons td {
+  vertical-align: top
 }
 
-table.prefs {
-  border-spacing: 0
+table.helpbuttons {
+  margin-left: 2em;
+  margin-right: 2em
 }
 
-tr.prefs_headings {
-  background-color: black;
-  color: white
+/* h2.helptitle is used for help subsection headings */
+h2.helptitle {
+  background-color: #e0ffe0;	/* Black on pastel green */
+  color: black;
+  padding: 0.2em
 }
 
-th.prefs_name {
+/* There is a div.helpsection for each subsection */
+div.helpsection {
+  margin-left: 1em
 }
 
-th.prefs_value {
+/* span.configuration marks configuration directives */
+span.configuration {
+  font-family: monospace
 }
 
-td.prefs_name {
-  vertical-align: top
+/* volume ********************************************************************/
+
+p.volume {
+  text-align: center
 }
 
-td.prefs_value {
-  vertical-align: top
+/* login page ****************************************************************/
+
+form.login {
+  border: 1px solid black;
+  background-color: #e0ffe0	/* pastel green */
 }
 
-td.prefs_delete {
-  vertical-align: top
+form.reminder {
+  border: 1px solid black;
+  background-color: #e0e0ff	/* pastel blue */
 }
 
-input.prefs_name,input.prefs_value {
-  font-family: monospace
+form.register {
+  border: 1px solid black;
+  background-color: #e0e0ff	/* pastel blue */
 }
 
-/* help ***********************************************************************/
+form.edituser {
+  border: 1px solid black;
+  background-color: #ffffe0	/* pastel yellow */
+}
 
-.helpbuttons,.helpprefs,.helpcontexts {
-  margin-left: 2em;
-  margin-right: 2em;
-  vertical-align: top
+form.login table, form.reminder table, form.register table, form.edituser table {
+  margin: 0.2em			/* Space login boxes nicely */
 }
 
-.helpsection {
-  margin-left: 1em;
+form.logout {
+  border-style: none;
 }
 
-.helppref {
-  font-family: monospace
+div.loginstatus {
+  border: 1px solid black;
+  background-color: #ffff00	/* solid yellow */
 }
 
-.helpprefbit {
-  font-family: monospace;
-  font-style: italic
+div.loginstatus p {
+  color: #0000ff;		/* solid blue */
+  font-size: 18pt;
+  font-weight: bold;
+  margin: 0.2em
 }
 
-.helpcontext {
+/* errors ********************************************************************/
+
+div.error {
+  border: 1px solid black;
+  background-color: #ff0000;	/* White on solid red */
+  color: white;
+  font-size: 18pt;
   font-weight: bold
 }
 
-/* volume *********************************************************************/
-
-p.volume {
-  text-align: center
+div.error p {
+  margin: 0.2em
 }
 
-/* miscelleanous **************************************************************/
+/* miscelleanous *************************************************************/
 
 /* credits */
 p.credits {
-  font-size: small;		/* because visually intrusive */
-  text-align: right
+  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, 2004, 2005 Richard Kettlewell
+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
@@ -470,4 +417,3 @@ along with this program; if not, write to the Free Software
 Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
 USA
 */
-/* arch-tag:tlWcgChjjqNVaC/UmG9Zaw */