chiark / gitweb /
Go through CSS and rationalize it. Some cosmetic improvements too.
authorRichard Kettlewell <richard@heceptor.anjou.terraraq.org.uk>
Sun, 13 Jan 2008 21:24:19 +0000 (21:24 +0000)
committerRichard Kettlewell <richard@heceptor.anjou.terraraq.org.uk>
Sun, 13 Jan 2008 21:24:19 +0000 (21:24 +0000)
12 files changed:
templates/choose.html
templates/choosealpha.html
templates/disorder.css
templates/error.html
templates/help.html
templates/login.html
templates/new.html
templates/playing.html
templates/prefs.html
templates/recent.html
templates/search.html
templates/volume.html

index 2df2e2d..844fe9a 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <!--
 This file is part of DisOrder.
-Copyright (C) 2004, 2005 Richard Kettlewell
+Copyright (C) 2004-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
@@ -25,110 +25,82 @@ USA
  </head>
  <body>
 @include{topbar}@
-   <h1 class=title>@label:choose.title@</h1>
+   <h1>@label:choose.title@</h1>
   
   @#{always have the first-letter bar, if choosealpha enabled}@
   @if{@eq{@label:sidebar.choosewhich@}{choosealpha}@}{
 
    <p class=choosealpha>
-    <a class=choosealpha
-    title="Directories starting with 'a'"
+    <a title="Directories starting with 'a'"
     href="@url@?action=choose&#38;regexp=^(the )?a">A</a> |
-    <a class=choosealpha
-    title="Directories starting with 'b'"
+    <a title="Directories starting with 'b'"
     href="@url@?action=choose&#38;regexp=^(the )?b">B</a> |
-    <a class=choosealpha
-    title="Directories starting with 'c'"
+    <a title="Directories starting with 'c'"
     href="@url@?action=choose&#38;regexp=^(the )?c">C</a> |
-    <a class=choosealpha
-    title="Directories starting with 'd'"
+    <a title="Directories starting with 'd'"
     href="@url@?action=choose&#38;regexp=^(the )?d">D</a> |
-    <a class=choosealpha
-    title="Directories starting with 'e'"
+    <a title="Directories starting with 'e'"
     href="@url@?action=choose&#38;regexp=^(the )?e">E</a> |
-    <a class=choosealpha
-    title="Directories starting with 'f'"
+    <a title="Directories starting with 'f'"
     href="@url@?action=choose&#38;regexp=^(the )?f">F</a> |
-    <a class=choosealpha
-    title="Directories starting with 'g'"
+    <a title="Directories starting with 'g'"
     href="@url@?action=choose&#38;regexp=^(the )?g">G</a> |
-    <a class=choosealpha
-    title="Directories starting with 'h'"
+    <a title="Directories starting with 'h'"
     href="@url@?action=choose&#38;regexp=^(the )?h">H</a> |
-    <a class=choosealpha
-    title="Directories starting with 'i'"
+    <a title="Directories starting with 'i'"
     href="@url@?action=choose&#38;regexp=^(the )?i">I</a> |
-    <a class=choosealpha
-    title="Directories starting with 'j'"
+    <a title="Directories starting with 'j'"
     href="@url@?action=choose&#38;regexp=^(the )?j">J</a> |
-    <a class=choosealpha
-    title="Directories starting with 'k'"
+    <a title="Directories starting with 'k'"
     href="@url@?action=choose&#38;regexp=^(the )?k">K</a> |
-    <a class=choosealpha
-    title="Directories starting with 'l'"
+    <a title="Directories starting with 'l'"
     href="@url@?action=choose&#38;regexp=^(the )?l">L</a> |
-    <a class=choosealpha
-    title="Directories starting with 'm'"
+    <a title="Directories starting with 'm'"
     href="@url@?action=choose&#38;regexp=^(the )?m">M</a> |
-    <a class=choosealpha
-    title="Directories starting with 'n'"
+    <a title="Directories starting with 'n'"
     href="@url@?action=choose&#38;regexp=^(the )?n">N</a> |
-    <a class=choosealpha
-    title="Directories starting with 'o'"
+    <a title="Directories starting with 'o'"
     href="@url@?action=choose&#38;regexp=^(the )?o">O</a> |
-    <a class=choosealpha
-    title="Directories starting with 'p'"
+    <a title="Directories starting with 'p'"
     href="@url@?action=choose&#38;regexp=^(the )?p">P</a> |
-    <a class=choosealpha
-    title="Directories starting with 'q'"
+    <a title="Directories starting with 'q'"
     href="@url@?action=choose&#38;regexp=^(the )?q">Q</a> |
-    <a class=choosealpha
-    title="Directories starting with 'r'"
+    <a title="Directories starting with 'r'"
     href="@url@?action=choose&#38;regexp=^(the )?r">R</a> |
-    <a class=choosealpha
-    title="Directories starting with 's'"
+    <a title="Directories starting with 's'"
     href="@url@?action=choose&#38;regexp=^(the )?s">S</a> |
-    <a class=choosealpha
-    title="Directories starting with 't'"
+    <a title="Directories starting with 't'"
     href="@url@?action=choose&#38;regexp=^(?!the [^t])t">T</a> |
-    <a class=choosealpha
-    title="Directories starting with 'u'"
+    <a title="Directories starting with 'u'"
     href="@url@?action=choose&#38;regexp=^(the )?u">U</a> |
-    <a class=choosealpha
-    title="Directories starting with 'v'"
+    <a title="Directories starting with 'v'"
     href="@url@?action=choose&#38;regexp=^(the )?v">V</a> |
-    <a class=choosealpha
-    title="Directories starting with 'w'"
+    <a title="Directories starting with 'w'"
     href="@url@?action=choose&#38;regexp=^(the )?w">W</a> |
-    <a class=choosealpha
-    title="Directories starting with 'x'"
+    <a title="Directories starting with 'x'"
     href="@url@?action=choose&#38;regexp=^(the )?x">X</a> |
-    <a class=choosealpha
-    title="Directories starting with 'y'"
+    <a title="Directories starting with 'y'"
     href="@url@?action=choose&#38;regexp=^(the )?y">Y</a> |
-    <a class=choosealpha
-    title="Directories starting with 'z'"
+    <a title="Directories starting with 'z'"
     href="@url@?action=choose&#38;regexp=^(the )?z">Z</a> |
-    <a class=choosealpha
-    title="Directories starting with anything else"
+    <a title="Directories starting with anything else"
     href="@url@?action=choose&#38;regexp=^[^a-z]">*</a>
    </p>
   }@
 
    @if{@ne{@arg:directory@}{}@}{
    <p class=directoryname>@navigate{@arg:directory@}{/<a
-   class=thisdirectory
    href="@url@?action=choose&#38;directory=@urlquote{@fullname@}@">@basename@</a>}@:</p>
    }@
 
    @if{@isdirectories@}{
-   <div class=directories>
-    <p class=directories>
+   <div class=directories><div class=filesdirectories>
+    <p class=heading>
      @label:choose.directories@
     </p>
     @choose{directories}{
-    <p class=directory>
-     <a class=directory
+    <p class=entry>
+     <a
      href="@url@?action=choose&#38;directory=@urlquote{@file@}@"
      title="@label:choose.directory@">
      <img class=button
@@ -138,40 +110,40 @@ USA
      </a>
     </p>
     }@
-   </div>
+   </div></div>
    }@
    @if{@isfiles@}{
-   <div class=files>
-    <p class=files>
+   <div class=files><div class=filesdirectories>
+    <p class=heading>
      @label:choose.files@
     </p>
     @choose{files}{
-    <p class=file>
+    <p class=entry>
     @right{prefs}{<a class=imgprefs
      href="@url@?action=prefs&#38;0_file=@urlquote{@resolve{@file@}@}@"
      ><img class=button
       src="@image:edit@"
       title="@label:choose.prefsverbose@"
       alt="@label:choose.prefs@"></a>}@
-     <a class=file
+     <a
      href="@url@?action=play&#38;file=@urlquote{@file@}@&#38;back=@urlquote{@thisurl@}@"
      title="@label:choose.play@">@transform{@file@}{track}{display}@</a>
      @if{@eq{@trackstate{@file@}@}{playing}@}{[<b>playing</b>]}@
      @if{@eq{@trackstate{@file@}@}{queued}@}{[<b>queued</b>]}@
     </p>
     }@
-    <p class=allfiles>
+    <p class=all>
      @right{prefs}{<a class=imgprefs
      href="@url@?action=prefs&#38;directory=@urlquote{@arg:directory@}@&#38;back=@urlquote{@thisurl@}@"
      ><img class=button 
       src="@image:edit@"
       title="@label:choose.allprefsverbose@"
       alt="@label:choose.allprefs@"></a>}@
-     <a class=allfiles href="@url@?action=play&#38;directory=@urlquote{@arg:directory@}@&#38;back=@urlquote{@thisurl@}@">
+     <a class=button href="@url@?action=play&#38;directory=@urlquote{@arg:directory@}@&#38;back=@urlquote{@thisurl@}@">
       @label:choose.playall@
      </a>
     </p>
-   </div>
+   </div></div>
    }@
 
 @include{topbarend}@
index 5d97ab0..4027834 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <!--
 This file is part of DisOrder.
-Copyright (C) 2004, 2005, 2006 Richard Kettlewell
+Copyright (C) 2004-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
@@ -25,89 +25,62 @@ USA
  </head>
  <body>
 @include{topbar}@
-   <h1 class=title>@label:choose.title@</h1>
+   <h1>@label:choose.title@</h1>
 
    <p class=choosealpha>
-    <a class=choosealpha
-    title="Directories starting with 'a'"
+    <a title="Directories starting with 'a'"
     href="@url@?action=choose&#38;regexp=^(the )?a">A</a> |
-    <a class=choosealpha
-    title="Directories starting with 'b'"
+    <a title="Directories starting with 'b'"
     href="@url@?action=choose&#38;regexp=^(the )?b">B</a> |
-    <a class=choosealpha
-    title="Directories starting with 'c'"
+    <a title="Directories starting with 'c'"
     href="@url@?action=choose&#38;regexp=^(the )?c">C</a> |
-    <a class=choosealpha
-    title="Directories starting with 'd'"
+    <a title="Directories starting with 'd'"
     href="@url@?action=choose&#38;regexp=^(the )?d">D</a> |
-    <a class=choosealpha
-    title="Directories starting with 'e'"
+    <a title="Directories starting with 'e'"
     href="@url@?action=choose&#38;regexp=^(the )?e">E</a> |
-    <a class=choosealpha
-    title="Directories starting with 'f'"
+    <a title="Directories starting with 'f'"
     href="@url@?action=choose&#38;regexp=^(the )?f">F</a> |
-    <a class=choosealpha
-    title="Directories starting with 'g'"
+    <a title="Directories starting with 'g'"
     href="@url@?action=choose&#38;regexp=^(the )?g">G</a> |
-    <a class=choosealpha
-    title="Directories starting with 'h'"
+    <a title="Directories starting with 'h'"
     href="@url@?action=choose&#38;regexp=^(the )?h">H</a> |
-    <a class=choosealpha
-    title="Directories starting with 'i'"
+    <a title="Directories starting with 'i'"
     href="@url@?action=choose&#38;regexp=^(the )?i">I</a> |
-    <a class=choosealpha
-    title="Directories starting with 'j'"
+    <a title="Directories starting with 'j'"
     href="@url@?action=choose&#38;regexp=^(the )?j">J</a> |
-    <a class=choosealpha
-    title="Directories starting with 'k'"
+    <a title="Directories starting with 'k'"
     href="@url@?action=choose&#38;regexp=^(the )?k">K</a> |
-    <a class=choosealpha
-    title="Directories starting with 'l'"
+    <a title="Directories starting with 'l'"
     href="@url@?action=choose&#38;regexp=^(the )?l">L</a> |
-    <a class=choosealpha
-    title="Directories starting with 'm'"
+    <a title="Directories starting with 'm'"
     href="@url@?action=choose&#38;regexp=^(the )?m">M</a> |
-    <a class=choosealpha
-    title="Directories starting with 'n'"
+    <a title="Directories starting with 'n'"
     href="@url@?action=choose&#38;regexp=^(the )?n">N</a> |
-    <a class=choosealpha
-    title="Directories starting with 'o'"
+    <a title="Directories starting with 'o'"
     href="@url@?action=choose&#38;regexp=^(the )?o">O</a> |
-    <a class=choosealpha
-    title="Directories starting with 'p'"
+    <a title="Directories starting with 'p'"
     href="@url@?action=choose&#38;regexp=^(the )?p">P</a> |
-    <a class=choosealpha
-    title="Directories starting with 'q'"
+    <a title="Directories starting with 'q'"
     href="@url@?action=choose&#38;regexp=^(the )?q">Q</a> |
-    <a class=choosealpha
-    title="Directories starting with 'r'"
+    <a title="Directories starting with 'r'"
     href="@url@?action=choose&#38;regexp=^(the )?r">R</a> |
-    <a class=choosealpha
-    title="Directories starting with 's'"
+    <a title="Directories starting with 's'"
     href="@url@?action=choose&#38;regexp=^(the )?s">S</a> |
-    <a class=choosealpha
-    title="Directories starting with 't'"
+    <a title="Directories starting with 't'"
     href="@url@?action=choose&#38;regexp=^(?!the [^t])t">T</a> |
-    <a class=choosealpha
-    title="Directories starting with 'u'"
+    <a title="Directories starting with 'u'"
     href="@url@?action=choose&#38;regexp=^(the )?u">U</a> |
-    <a class=choosealpha
-    title="Directories starting with 'v'"
+    <a title="Directories starting with 'v'"
     href="@url@?action=choose&#38;regexp=^(the )?v">V</a> |
-    <a class=choosealpha
-    title="Directories starting with 'w'"
+    <a title="Directories starting with 'w'"
     href="@url@?action=choose&#38;regexp=^(the )?w">W</a> |
-    <a class=choosealpha
-    title="Directories starting with 'x'"
+    <a title="Directories starting with 'x'"
     href="@url@?action=choose&#38;regexp=^(the )?x">X</a> |
-    <a class=choosealpha
-    title="Directories starting with 'y'"
+    <a title="Directories starting with 'y'"
     href="@url@?action=choose&#38;regexp=^(the )?y">Y</a> |
-    <a class=choosealpha
-    title="Directories starting with 'z'"
+    <a title="Directories starting with 'z'"
     href="@url@?action=choose&#38;regexp=^(the )?z">Z</a> |
-    <a class=choosealpha
-    title="Directories starting with anything else"
+    <a title="Directories starting with anything else"
     href="@url@?action=choose&#38;regexp=^[^a-z]">*</a>
    </p>
 
index 84b306b..a1697c1 100644 (file)
@@ -1,19 +1,22 @@
 /* default font and colors */
 body {
   color: black;
-  background-color: white
-  font-family: serif;
+  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
 }
 
@@ -22,8 +25,8 @@ a:active {
 }
 
 /* title bars */
-h1.title {
-  font-family: sans-serif;
+h1 {
+  font-family: helvetica,sans-serif;
   font-weight: bold;
   font-size: 18pt;
   font-variant: normal;
@@ -36,489 +39,293 @@ h1.title {
 
 /* secondary titles */
 h2 {
-  font-family: sans-serif;
+  font-family: helvetica,sans-serif;
   font-weight: bold;
   font-size: 16pt;
   font-variant: normal;
   display: block
 }
 
-/* playing, recent and new ***************************************************/
+/* Some titles are links too, but we don't want them to go blue */
+h2 a {
+  color: black
+}
 
-/* table of current and future tracks */
-table.playing {
-  border-collapse: collapse;
-  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
 }
 
-/* table of recently played tracks */
-table.recent {
-  border-collapse: collapse;
-  width: 100%;                 /* use the full available width */
-  border-spacing: 0            /* no unsightly gaps between cells */
+/* 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 {
+  width: 100%                          /* use full screen width */
 }
 
-/* table of newly added played tracks */
-table.new {
-  border-collapse: collapse;
-  width: 100%;                 /* use the full available width */
-  border-spacing: 0            /* no unsightly gaps between cells */
+table.playing th, table.recent th, table.new th {
+  text-align: left             /* titles should be left-aligned */
 }
 
-/* titles in tables */
-th {
-  text-align: left
+table.playing td, table.recent td, table.new td {
+  vertical-align: middle        /* centre cell contents vertically */
 }
 
-/* ordinary cells in tables */
-td {
-  vertical-align: middle
+table.playing a, table.recent a, table.new a {
+  color: black
 }
 
-/* the headings <tr> of the table */
+/* tr.headings is the row containing column headings */
 tr.headings {
-  background-color: black;
+  background-color: black;      /* heading rows are white on black */
   color: white
 }
 
-/* The 'now playing' heading */
-tr.nowplaying {
-}
-
-td.nowplaying {
-  background-color: #d0d0d0;
-  font-weight: bold;
+/* 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
 }
 
-/* the currently playing track */
+/* tr.playing is the row for 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
+  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: 1px solid black;
-  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;
-  font-size: 140%;
-  font-weight: bold;
-  border: 1px solid black;
+  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;
   background-color: #ffffe0;   /* pastel yellow */
+  color: black;
   padding: 0.2em
 }
 
-a.thisdirectory:link {
-  color: black
-}
-
-a.thisdirectory:visited {
-  color: black
-}
-
-a.thisdirectory:active {
-  color: red
-}
-
-/* directories */
-div.directories {
-}
-
-/* heading for directories */
-p.directories {
-  font-weight: bold;
-  display: block;
-  background-color: #e0ffe0;   /* pastel green */
-  padding: 0.2em;
-  padding-left: 1.2em
-}
-
-/* one directory */
-p.directory {
-  margin-left: 2em
-}
-
-a.directory {
-  text-decoration: none;
-}
-
-a.directory:link {
-  color: black
-}
-
-a.directory:visited {
+p.directoryname a {
   color: black
 }
 
-a.directory:active {
-  color: red
-}
-
-/* files */
-div.files {
-}
-
-/* heading for files */
-p.files {
-  font-weight: bold;
+/* section headings */
+div.filesdirectories p.heading {
   display: block;
-  background-color: #e0ffe0;   /* pastel green */
+  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 */
-p.file {
-  margin-left: 2em
+/* one file or directory */
+div.filesdirectories p.entry {
+  margin-left: 2em              /* indent files & directories two steps */
 }
 
-a.file {
-  text-decoration: none;
+div.filesdirectories a {
+  text-decoration: none         /* don't underline file/directory names */
 }
 
-a.file:link {
+div.filesdirectories a {
   color: black
 }
 
-a.file:visited {
-  color: black
-}
-
-a.file:active {
+div.filesdirectories a:active {
   color: red
 }
 
 /* all files */
-p.allfiles {
-  margin-left: 1.2em
+div.filesdirectories p.all {
+  margin-left: 1em              /* indent play all button only one step */
 }
 
 /* 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 {
-}
-
 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 {
-  color: black
-}
-
-a.search_title:visited {
+div.search_title a {
   color: black
 }
 
-a.search_title:active {
+div.search_title a:active {
   color: red
 }
 
 form.search {
-  border: 1px solid black;
+  border: 1px solid black;     /* Give the search box a border */
   padding: 0.2em
 }
 
-/* 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;
-}
-
-.sidebarlink {
-  font-family: sans-serif
-}
-
-a.sidebarlink {
-  text-decoration: none;
-  color: black
-}
-
-a.sidebarlink:visited {
-  color: black
-}
-
-a.sidebarlink:active {
-  color: red
-}
-
-a.sidebarlink:visited {
-  color: black
-}
-
-/* topbar ********************************************************************/
+/* menu bar *******************************************************************/
 
+/* p.menubar is the menu bar at the top */
 p.menubar {
-  word-spacing: 1em
+  word-spacing: 1em            /* Space out menu items */
 }
 
-.activemenu {
-  font-family: sans-serif;
+/* 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
+  font-size: 14pt;
+  text-decoration: none
 }
 
-.inactivemenu {
-  font-family: sans-serif;
-  font-weight: bold;
-  font-size: 14pt
+/* a.activemenu is the current menu item */
+a.activemenu {
+  color: red;
 }
 
-a.inactivemenu,a.inactivemenu:visited {
-  text-decoration: none;
+/* a.inactivemenu is a non-current but choosable menu item */
+a.inactivemenu {
   color: black
 }
 
-a.activemenu,a.activemenu:visited {
-  text-decoration: none;
-  color: red
-}
-
-a.activemenu:active,a.inactivemenu:active {
-  text-decoration: none;
-  color: red
-}
-
+/* span.invaliemenu is a non-choosable menu item */
 span.invalidmenu {
-  text-decoration: none;
-  color: #808080;              /* 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-collapse: collapse;
-  border-spacing: 0
-}
-
-tr.prefs_headings {
-  background-color: black;
-  color: white
+  border-spacing: 0;
+  margin-left: 1em             /* Indent each track's details */
 }
 
-th.prefs_name {
+table.prefs th {
+  text-align: left             /* Titles should be left-aligned */
 }
 
-th.prefs_value {
-}
-
-td.prefs_name {
-  vertical-align: top
-}
-
-td.prefs_value {
+table.prefs td {
   vertical-align: top
 }
 
-td.prefs_delete {
-  vertical-align: top
-}
-
-input.prefs_name,input.prefs_value {
+table.prefs input {
   font-family: monospace
 }
 
 /* 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;
-}
-
-.helppref {
-  font-family: monospace
+table.helpbuttons {
+  margin-left: 2em;
+  margin-right: 2em
 }
 
-.helpprefbit {
-  font-family: monospace;
-  font-style: italic
+/* h2.helptitle is used for help subsection headings */
+h2.helptitle {
+  background-color: #e0ffe0;   /* Black on pastel green */
+  color: black;
+  padding: 0.2em
 }
 
-.helpcontext {
-  font-weight: bold
+/* There is a div.helpsection for each subsection */
+div.helpsection {
+  margin-left: 1em
 }
 
+/* span.configuration marks configuration directives */
 span.configuration {
   font-family: monospace
 }
 
-h2.helptitle {
-  background-color: #e0ffe0;   /* pastel green */
-  padding: 0.2em
-}
-
 /* volume ********************************************************************/
 
 p.volume {
@@ -547,6 +354,10 @@ form.edituser {
   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;
 }
@@ -556,45 +367,40 @@ div.loginstatus {
   background-color: #ffff00    /* solid yellow */
 }
 
-div.loginstatus > p {
-  margin: 0.2em
-}
-
-p.loginstatus {
+div.loginstatus p {
   color: #0000ff;              /* solid blue */
-  font-size: 150%;
-  font-weight: bold
+  font-size: 18pt;
+  font-weight: bold;
+  margin: 0.2em
 }
 
 /* errors ********************************************************************/
 
 div.error {
   border: 1px solid black;
-  background-color: #ff0000;   /* solid red */
+  background-color: #ff0000;   /* White on solid red */
   color: white;
-  font-size: 150%;
+  font-size: 18pt;
   font-weight: bold
 }
 
-div.error p {
+div.error p {
   margin: 0.2em
 }
 
-p.error {
-}
-
 /* miscelleanous *************************************************************/
 
 /* credits */
 p.credits {
-  font-size: small;            /* because visually intrusive */
+  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-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
index 79b1e9d..64ad6ff 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <!--
 This file is part of DisOrder.
-Copyright (C) 2005 ,2007 Richard Kettlewell
+Copyright (C) 2005, 2007, 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
@@ -25,7 +25,7 @@ USA
  </head>
  <body>
 @include{topbar}@
-   <h1 class=title>@label:error.title@</h1>
+   <h1>@label:error.title@</h1>
     
   <div class=error>
     <p class=error>@label{error.@label:error@}@</p>
index 1302926..3a55119 100644 (file)
@@ -25,7 +25,7 @@ USA
  </head>
  <body>
 @include{topbar}@
-   <h1 class=title>@label{help.title}@</h1>
+   <h1>@label{help.title}@</h1>
 
    <h2 class=helptitle>Introduction</h2>
 
@@ -176,16 +176,16 @@ USA
     <table class=helpbuttons>
      <tbody>
       <tr>
-       <td class=helpbuttons><img
+       <td><img
        class=button src="@image:edit@"
        title="@label:choose.prefs@"
        alt="@label:choose.prefs@"></td>
-       <td class=helpbuttons>This button can be used to edit the details for a
+       <td>This button can be used to edit the details for a
        track; see <a href="#prefs">Editing Preferences</a> below.</td>
       </tr>
       <tr>
-       <td class=helpbuttons><span class=button>@label{choose.playall}@</span></td>
-       <td class=helpbuttons>This button plays all the tracks in a directory,
+       <td><span class=button>@label{choose.playall}@</span></td>
+       <td>This button plays all the tracks in a directory,
        in order.  This is used to efficiently play a whole album.</td>
       </tr>
      </tbody>
index e586132..6b1acaf 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <!--
 This file is part of DisOrder.
-Copyright (C) 2007 Richard Kettlewell
+Copyright (C) 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
@@ -25,7 +25,7 @@ USA
  </head>
  <body>
 @include{topbar}@
-   <h1 class=title>@label:login.title@</h1>
+   <h1>@label:login.title@</h1>
 
    @if{@ne{@label:error@}{error}@}{
    @#{error reporting from some earlier operation}@
@@ -37,7 +37,7 @@ USA
    @if{@ne{@label:status@}{status}@}{
    @#{some action succeeded}@
    <div class=loginstatus>
-     <p class=loginstatus>@label{login.@label:status@}@</p>
+     <p>@label{login.@label:status@}@</p>
    </div>
    }@
 
index 9c43b0b..73eea2d 100644 (file)
@@ -25,7 +25,7 @@ USA
  </head>
  <body>
 @include{topbar}@
-  <h1 class=title>@label:new.title@</h1>
+  <h1>@label:new.title@</h1>
 
 @#{only display the table if there is something to put in it}@
 @if{@isnew@}{
index 4242740..b45d975 100644 (file)
@@ -25,7 +25,7 @@ USA
  </head>
  <body>
 @include{topbar}@
-   <h1 class=title>@label:playing.title@</h1>
+   <h1>@label:playing.title@</h1>
 
    @#{extra control buttons for the management page}@
    @if{@arg:mgmt@}{
@@ -33,59 +33,47 @@ USA
    <p class=mgmt>
     @if{@paused@}{
     <!-- paused -->
-    <span class=button>
     <a class=button
     href="@url@?action=resume&#38;mgmt=true"
      title="@label:playing.resumeverbose@">@label:playing.pause@</a>
     </a>
-    </span>
     <img width=16 height=16 class=imgbutton src="@image:enabled@">
     }{
     <!-- not paused -->
-    <span class=button>
     <a class=button
     href="@url@?action=pause&#38;mgmt=true"
      title="@label:playing.pauseverbose@">@label:playing.pause@</a>
     </a>
-    </span>
     <img width=16 height=16 class=imgbutton src="@image:disabled@">
     }@
     @if{@random-enabled@}{
     <!-- random played enabled -->
-    <span class=button>
     <a class=button
     href="@url@?action=random-disable&#38;mgmt=true"
      title="@label:playing.randomdisableverbose@">@label:playing.random@</a>
     </a>
-    </span>
     <img width=16 height=16 class=imgbutton src="@image:enabled@">
     }{
     <!-- random played disabled -->
-    <span class=button>
     <a class=button
     href="@url@?action=random-enable&#38;mgmt=true"
      title="@label:playing.randomenableverbose@">@label:playing.random@</a>
     </a>
-    </span>
     <img width=16 height=16 class=imgbutton src="@image:disabled@">
     }@
     @if{@enabled@}{
     <!-- playing enabled -->
-    <span class=button>
     <a class=button
     href="@url@?action=disable&#38;mgmt=true"
      title="@label:playing.disableverbose@">@label:playing.playing@</a>
     </a>
-    </span>
     <img width=16 height=16 class=imgbutton src="@image:enabled@">
     }{
     <!-- playing disabled -->
-    <span class=button>
     <a class=button
     href="@url@?action=enable&#38;mgmt=true"
      title="@label:playing.enableverbose@">@label:playing.playing@</a>
     </a>
-    </span>
     <img width=16 height=16 class=imgbutton src="@image:disabled@">
     }@
     <form class=volume action="@url@" method=POST
@@ -134,7 +122,7 @@ USA
      </tr>
      @if{@isplaying@}{
      <tr class=nowplaying>
-      <td colspan=@if{@arg:mgmt@}{11}{7}@ class=nowplaying>@label:playing.now@</td>
+      <td colspan=@if{@arg:mgmt@}{11}{7}@>@label:playing.now@</td>
      </tr>
      @playing{
      <tr class=playing>
@@ -173,7 +161,7 @@ USA
      }@}@
      @if{@isqueue@}{
      <tr class=next>
-      <td colspan=@if{@arg:mgmt@}{11}{7}@ class=next>@label:playing.next@</td>
+      <td colspan=@if{@arg:mgmt@}{11}{7}@>@label:playing.next@</td>
      </tr>
      @queue{
      <tr class=@parity@>
index 36a4f01..27adc45 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <!--
 This file is part of DisOrder.
-Copyright (C) 2004, 2005, 2006 Richard Kettlewell
+Copyright (C) 2004, 2005, 2006, 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
@@ -25,7 +25,7 @@ USA
  </head>
  <body>
 @include{topbar}@
-   <h1 class=title>@label:prefs.title@</h1>
+   <h1>@label:prefs.title@</h1>
 
    <form class=prefs action="@url@" method=POST
          enctype="multipart/form-data" accept-charset=utf-8>
@@ -35,36 +35,36 @@ USA
    <p class="prefs_head">Preferences for <span class="prefs_track">@arg{@index@_file}@</span></p>
     <input type=hidden name="@index@_file" value="@arg{@index@_file}@">
     <table class=prefs>
-      <tr class="prefs_headings">
+      <tr class="headings">
        <th class="prefs_name">@label:prefs.name@</th>
        <th class="prefs_value">@label:prefs.value@</th>
       </tr>
       <tr class=even>
        <td class="prefs_name">@label:heading.title@</td>
-       <td class="prefs_value"><input size=40 class="prefs_value" type=text name="@index@_title" value="@part{display}{title}{@arg{@index@_file}@}@"></td>
+       <td class="prefs_value"><input size=40 type=text name="@index@_title" value="@part{display}{title}{@arg{@index@_file}@}@"></td>
       </tr>
       <tr class=odd>
        <td class="prefs_name">@label:heading.album@</td>
-       <td class="prefs_value"><input size=40 class="prefs_value" type=text name="@index@_album" value="@part{display}{album}{@arg{@index@_file}@}@"></td>
+       <td class="prefs_value"><input size=40 type=text name="@index@_album" value="@part{display}{album}{@arg{@index@_file}@}@"></td>
       </tr>
       <tr class=even>
        <td class="prefs_name">@label:heading.artist@</td>
-       <td class="prefs_value"><input size=40 class="prefs_value" type=text name="@index@_artist" value="@part{display}{artist}{@arg{@index@_file}@}@"></td>
+       <td class="prefs_value"><input size=40 type=text name="@index@_artist" value="@part{display}{artist}{@arg{@index@_file}@}@"></td>
       </tr>
       <tr class=odd>
        <td class="prefs_name">@label:prefs.tags@</td>
-       <td class="prefs_value"><input size=40 class="prefs_value" type=text name="@index@_tags" value="@pref{@arg{@index@_file}@}{tags}@"></td>
+       <td class="prefs_value"><input size=40 type=text name="@index@_tags" value="@pref{@arg{@index@_file}@}{tags}@"></td>
       </tr>
       <tr class=even>
        <td class="prefs_name">@label:prefs.random@</td>
-       <td class="prefs_value"><input class="prefs_value" type=checkbox
+       <td class="prefs_value"><input type=checkbox
         name="@index@_random" value=true
        @if{@ne{@pref{@arg{@index@_file}@}{pick_at_random}@}{0}@}{ checked}{}@></td>
     </table>
    }@
     
     <p>
-     <button class="pref_set" type=submit name=submit>
+     <button type=submit name=submit>
       @label:prefs.set@
      </button>
      <input name=action type=hidden value=prefs>
index 9c62496..787b514 100644 (file)
@@ -25,7 +25,7 @@ USA
  </head>
  <body>
 @include{topbar}@
-  <h1 class=title>@label:recent.title@</h1>
+  <h1>@label:recent.title@</h1>
 
 @#{only display the table if there is something to put in it}@
 @if{@isrecent@}{
index 5201dc5..8214352 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <!--
 This file is part of DisOrder.
-Copyright (C) 2003, 2004, 2005 Richard Kettlewell
+Copyright (C) 2003, 2004, 2005, 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
@@ -25,7 +25,7 @@ USA
  </head>
  <body>
 @include{topbar}@
-   <h1 class=title>@label:search.title@</h1>
+   <h1>@label:search.title@</h1>
 
    <form class=search action="@url@" method=POST
          enctype="multipart/form-data" accept-charset=utf-8>
@@ -42,15 +42,15 @@ USA
    <div class=searchresults>
     @search{artist}{display}{
     <div class="search_artist">
-     <p class="search_artist">Artist:
+     <p>Artist:
       <span class="search_artist">@part:artist@</span></p>
      @search{album}{display}{
      <div class="search_album">
-      <p class="search_album">Album:
+      <p>Album:
        <span class="search_album">@part:album@</span></p>
       @search{title}{
       <div class="search_title">
-       <p class="search_title">Title:
+       <p>Title:
        <a href="@url@?action=play&#38;file=@urlquote{@file@}@&#38;back=@urlquote{@thisurl@}@">@part:title@</a>
        @if{@eq{@trackstate{@file@}@}{playing}@}{[<b>playing</b>]}@
        @if{@eq{@trackstate{@file@}@}{queued}@}{[<b>queued</b>]}@
index e614c91..dcc69b1 100644 (file)
@@ -25,7 +25,7 @@ USA
  </head>
  <body>
 @include{topbar}@
-   <h1 class=title>@label:volume.title@</h1>
+   <h1>@label:volume.title@</h1>
 
    <form class=volume action="@url@" method=POST>
     <p class=volume>