-/* 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
}
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
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
USA
*/
-/* arch-tag:tlWcgChjjqNVaC/UmG9Zaw */
~mdw / disorder / blobdiff