/* 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,button {
+ font-family: helvetica,sans-serif;
+ font-weight: normal;
+ font-size: 12pt;
+ font-variant: normal
}
-a:visited {
+/* general link colors */
+a {
color: blue
}
}
/* title bars */
-h1.title {
- font-family: sans-serif;
+h1 {
+ font-family: helvetica,sans-serif;
font-weight: bold;
font-size: 18pt;
font-variant: normal;
/* 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 {
- 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 {
- 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, table.search {
+ width: 100% /* use full screen width */
}
-/* table of newly added played tracks */
-table.new {
- width: 100%; /* use the full available width */
- border-spacing: 0 /* no unsightly gaps between cells */
+table.playing th, table.recent th, table.new th, table.search 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, table.search 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, table.search 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
}
-/* 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 {
-}
-
-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;
-}
-
-a.file:link {
- color: black
+div.filesdirectories a {
+ text-decoration: none /* don't underline file/directory names */
}
-a.file:visited {
+div.filesdirectories a {
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 {
- padding: 1px;
- border-color: #fefefe;
- border-style: inset;
- background-color: #c0c0c0;
- color: #000000;
- text-decoration: none;
- font-family: sans-serif
+form.button {
+ display: inline
}
+/* Buttons and links that look like buttons share the same formatting */
a.button {
- text-decoration: none;
- font-family: sans-serif
+ padding-top: 2px;
+ 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;
+ cursor: pointer
}
-a.button:link,a.button:visited,a.allfiles:link,a.allfiles:visited {
- background-color: #c0c0c0;
- color: #000000
+a.button {
+ 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 {
- 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
+form.search p {
+ display: inline
}
-a.sidebarlink:visited {
- color: black
-}
+/* menu bar *******************************************************************/
-a.sidebarlink:active {
- color: red
+div.top {
+ background-color: #e0e0e0;
+ border: 1px solid black
}
-a.sidebarlink:visited {
- color: black
+div.logo {
+ float:right;
+ margin-top:4px;
+ margin-right:4px
}
-/* 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
+ float:left;
+ margin-left: 4px;
+ word-spacing: 0px
}
-.inactivemenu {
- font-family: sans-serif;
- font-weight: bold;
- font-size: 14pt
-}
-
-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 {
-}
-
-th.prefs_value {
+ border-spacing: 0;
+ margin-left: 1em /* Indent each track's details */
}
-td.prefs_name {
- vertical-align: top
-}
-
-td.prefs_value {
- vertical-align: top
+table.prefs th {
+ text-align: left /* Titles should be left-aligned */
}
-td.prefs_delete {
+table.prefs td {
vertical-align: top
}
-input.prefs_name,input.prefs_value {
+table.prefs input {
font-family: monospace
}
-/* help **********************************************************************/
+/* text with sectiosn *******************************************************/
-.helpbuttons,.helpprefs,.helpcontexts {
- margin-left: 2em;
- margin-right: 2em;
- vertical-align: top
+/* h2.sectiontitle is used for subsection headings */
+h2.sectiontitle {
+ background-color: #e0ffe0; /* Black on pastel green */
+ color: black;
+ padding: 0.2em
}
-.helpsection {
- margin-left: 1em;
+/* There is a div.section for each subsection */
+div.section {
+ margin-left: 1em
}
-.helppref {
- font-family: monospace
-}
+/* help **********************************************************************/
-.helpprefbit {
- font-family: monospace;
- font-style: italic
+/* table.helpbuttons is used for various tables of buttons */
+table.helpbuttons td {
+ vertical-align: top
}
-.helpcontext {
- font-weight: bold
+table.helpbuttons {
+ margin-left: 2em;
+ margin-right: 2em
}
+/* span.configuration marks configuration directives */
span.configuration {
font-family: monospace
}
-h2.helptitle {
- background-color: #e0ffe0; /* pastel green */
- padding: 0.2em
-}
-
/* volume ********************************************************************/
p.volume {
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 */
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;
}
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
~mdw / disorder / blobdiff