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

diff --git a/templates/disorder.css b/templates/disorder.css
index 6062da8..3bc312d 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,button {
+  font-family: helvetica,sans-serif;
+  font-weight: normal;
+  font-size: 12pt;
+  font-variant: normal
 }
 
-a:visited {
+/* general link colors */
+a {
   color: blue
 }
 
@@ -17,441 +24,342 @@ 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
+  border: 1px solid black;
+  padding: 0.2em;
+  background-color: #e0e0e0;
+  display: block
 }
 
-/* playing, recent and new ***************************************************/
-
-/* table of current and future tracks */
-table.playing {
-  width: 100%;			/* use the full available width */
-  border-spacing: 0		/* no unsightly gaps between cells */
+/* secondary titles */
+h2 {
+  font-family: helvetica,sans-serif;
+  font-weight: bold;
+  font-size: 16pt;
+  font-variant: normal;
+  display: block
 }
 
-/* table of recently played tracks */
-table.recent {
-  width: 100%;			/* use the full available width */
-  border-spacing: 0		/* no unsightly gaps between cells */
+/* Some titles are links too, but we don't want them to go blue */
+h2 a {
+  color: black
 }
 
-/* table of newly added played tracks */
-table.new {
-  width: 100%;			/* use the full available width */
-  border-spacing: 0		/* no unsightly gaps between cells */
+/* Use the same table model everywhere */
+table {
+  border-collapse: collapse
 }
 
-/* titles in tables */
-th {
-  text-align: left
-}
+/* tabular data **************************************************************/
 
-/* ordinary cells in tables */
-td {
-  vertical-align: middle
+/* 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 */
 }
 
-/* the headings <tr> of the table */
-tr.headings {
-  background-color: black;
-  color: white
+table.playing th, table.recent th, table.new th, table.search th {
+  text-align: left		/* titles should be left-aligned */
 }
 
-/* The 'now playing' heading */
-tr.nowplaying {
+table.playing td, table.recent td, table.new td, table.search td {
+  vertical-align: middle        /* centre cell contents vertically */
 }
 
-td.nowplaying {
-  background-color: #d0d0d0;
-  font-weight: bold;
-  text-align: center
+table.playing a, table.recent a, table.new a, table.search a {
+  color: black
 }
 
-/* the currently playing track */
-tr.playing {
-  background-color: #e0ffe0	/* pastel green */
+/* tr.headings is the row containing column headings */
+tr.headings {
+  background-color: black;      /* heading rows are white on black */
+  color: white
 }
 
-/* the "next" heading */
-tr.next {
+/* 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.next {
-  background-color: #d0d0d0;
-  font-weight: 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
 }
 
-/* even-numbered rows */
+/* tr.even and tr.odd are odd and even rows of the main body of the table */
 tr.even {
-  background-color: #ffecec	/* faint pastel red */
+  background-color: #ffecec;	/* even rows are black on red */
+  color: black
 }
 
-/* odd-numbered rows */
 tr.odd {
-  background-color: #ffffff	/* white */
-}
-
-/* column titles */
-th.when {
-}
-
-th.who {
-}
-
-th.artist {
-}
-
-th.album {
-}
-
-th.title {
-}
-
-th.length {
-  text-align: right
-}
-
-th.button {
-}
-
-/* individual cells */
-
-td.when {
-}
-
-td.who {
-}
-
-td.artist {
-}
-
-td.album {
+  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 ********************************************************************/
 
-/* 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 {
+  font-weight: bold;
+  background-color: #ffffe0;	/* pastel yellow */
+  color: black;
+  padding: 0.2em
 }
 
-/* heading for directories */
-p.directories {
-  font-weight: bold
+p.directoryname a {
+  color: black
 }
 
-/* one directory */
-p.directory {
-  margin-left: 1em
+/* 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
 }
 
-a.directory {
+/* one file or directory */
+div.filesdirectories p.entry {
+  margin-left: 2em              /* indent files & directories two steps */
 }
 
-a.directory:link {
-  color: black
+div.filesdirectories a {
+  text-decoration: none         /* don't underline file/directory names */
 }
 
-a.directory:visited {
+div.filesdirectories a {
   color: black
 }
 
-a.directory:active {
+div.filesdirectories a:active {
   color: red
 }
 
-/* files */
-div.files {
-}
-
-/* heading for files */
-p.files {
-  font-weight: bold
-}
-
-/* one file */
-p.file {
-  margin-left: 1em
+/* all files */
+div.filesdirectories p.all {
+  margin-left: 1em              /* indent play all button only one step */
 }
 
-a.file {
-  text-decoration: none;
-}
-
-a.file:link {
-  color: black
-}
-
-a.file:visited {
-  color: black
-}
+/* buttons *******************************************************************/
 
-a.file:active {
-  color: red
+form.button {
+  display: inline
 }
 
-/* buttons *******************************************************************/
-
-/* a.allfiles turns up in track choice
- * button is used e.g. in searching
- */
-a.allfiles,a.prefs,button,span.button {
-  padding: 1px;
-  border-color: #fefefe;
+/* Buttons and links that look like buttons share the same formatting */
+a.button {
+  padding-top: 2px;
+  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
+  text-decoration: none;	/* Don't underline links */
+  font-family: helvetica,sans-serif;
+  font-weight: normal;
+  font-variant: normal;
+  font-size: 12pt;
+  cursor: pointer
 }
 
 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
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
-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 {
-}
-
 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
+  margin-left: 1em		/* Indent title two steps */
 }
 
-p.search_title {
-  margin-top: 0;
-  margin-bottom: 0
+div.search_title p {
+  margin-top: 0; 		/* Titles are compressed relative to ... */
+  margin-bottom: 0              /* ...artists and albums */
 }
 
-a.search_title {
-  text-decoration: underline
-}
-
-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;
-}
-
-div#content {
-  position: absolute;
-  width: auto;
-  top: 0;
-  right: 1em;
-  left: 6em;
+form.search {
+  border: 1px solid black;	/* Give the search box a border */
+  padding: 0.2em
 }
 
-.sidebarlink {
-  font-family: sans-serif
+form.search p {
+  display: inline
 }
 
-a.sidebarlink {
-  text-decoration: none;
-  color: black
-}
+/* menu bar *******************************************************************/
 
-a.sidebarlink:visited {
-  color: black
+div.top {
+  background-color: #e0e0e0;
+  border: 1px solid black
 }
 
-a.sidebarlink:active {
-  color: red
+div.logo {
+  float:right;
+  margin-top:4px;
+  margin-right:4px
 }
 
-a.sidebarlink:visited {
-  color: black
-}
-
-/* topbar ********************************************************************/
-
+/* p.menubar is the menu bar at the top */
 p.menubar {
-  word-spacing: 1em
-}
-
-.activemenu {
-  font-family: sans-serif;
-  font-weight: bold;
-  font-size: 14pt
-}
-
-.inactivemenu {
-  font-family: sans-serif;
-  font-weight: bold;
-  font-size: 14pt
+  float:left;
+  margin-left: 4px;
+  word-spacing: 0px
 }
 
-a.inactivemenu,a.inactivemenu:visited {
+/* Subelements are A for usable menus or SPAN for unusable ones */
+p.menubar a, p.menubar span {
+  font-family: helvetica,sans-serif;
+  font-size: 24px;
   text-decoration: none;
-  color: black
+  padding: 4px
 }
 
-a.activemenu,a.activemenu:visited {
-  text-decoration: none;
-  color: red
+/* a.activemenu is the current menu item */
+img.activemenu, a.activemenu {
+  background-color: #d0d0d0;
+  color: black;
+  padding: 4px;
+  border: none
 }
 
-a.activemenu:active,a.inactivemenu:active {
-  text-decoration: none;
-  color: red
+/* a.inactivemenu is a non-current but choosable menu item */
+img.inactivemenu, a.inactivemenu {
+  color: black;
+  padding:4px;
+  border:none 
 }
 
+/* span.invaliemenu is a non-choosable menu item */
 span.invalidmenu {
-  text-decoration: none;
-  color: grey;
-  font-family: sans-serif;
-  font-weight: bold;
-  font-size: 14pt
+  color: #808080
 }
 
-/* prefs *********************************************************************/
+/* track preferences *********************************************************/
 
-p.prefs_new,p.prefs_head {
-  font-weight: bold
+/* 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
-}
-
-tr.prefs_headings {
-  background-color: black;
-  color: white
-}
-
-th.prefs_name {
+  border-spacing: 0;
+  margin-left: 1em 		/* Indent each track's details */
 }
 
-th.prefs_value {
+table.prefs th {
+  text-align: left		/* Titles should be left-aligned */
 }
 
-td.prefs_name {
+table.prefs td {
   vertical-align: top
 }
 
-td.prefs_value {
-  vertical-align: top
+table.prefs input {
+  font-family: monospace
 }
 
-td.prefs_delete {
-  vertical-align: top
+/* text with sectiosn *******************************************************/
+
+/* h2.sectiontitle is used for subsection headings */
+h2.sectiontitle {
+  background-color: #e0ffe0;	/* Black on pastel green */
+  color: black;
+  padding: 0.2em
 }
 
-input.prefs_name,input.prefs_value {
-  font-family: monospace
+/* There is a div.section for each subsection */
+div.section {
+  margin-left: 1em
 }
 
 /* help **********************************************************************/
 
-.helpbuttons,.helpprefs,.helpcontexts {
-  margin-left: 2em;
-  margin-right: 2em;
+/* table.helpbuttons is used for various tables of buttons */
+table.helpbuttons td {
   vertical-align: top
 }
 
-.helpsection {
-  margin-left: 1em;
+table.helpbuttons {
+  margin-left: 2em;
+  margin-right: 2em
 }
 
-.helppref {
+/* span.configuration marks configuration directives */
+span.configuration {
   font-family: monospace
 }
 
-.helpprefbit {
-  font-family: monospace;
-  font-style: italic
-}
-
-.helpcontext {
-  font-weight: bold
-}
-
 /* volume ********************************************************************/
 
 p.volume {
@@ -460,36 +368,73 @@ p.volume {
 
 /* login page ****************************************************************/
 
-form.login,form.register,form.edituser {
-  border-style: solid;
-  border-width: 1px;
-  border-color: black
+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;
 }
 
-p.loginstatus {
-  color: green
+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 ********************************************************************/
 
-p.error {
-  color: red
+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: 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, 2007 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