<!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
</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&regexp=^(the )?a">A</a> |
- <a class=choosealpha
- title="Directories starting with 'b'"
+ <a title="Directories starting with 'b'"
href="@url@?action=choose&regexp=^(the )?b">B</a> |
- <a class=choosealpha
- title="Directories starting with 'c'"
+ <a title="Directories starting with 'c'"
href="@url@?action=choose&regexp=^(the )?c">C</a> |
- <a class=choosealpha
- title="Directories starting with 'd'"
+ <a title="Directories starting with 'd'"
href="@url@?action=choose&regexp=^(the )?d">D</a> |
- <a class=choosealpha
- title="Directories starting with 'e'"
+ <a title="Directories starting with 'e'"
href="@url@?action=choose&regexp=^(the )?e">E</a> |
- <a class=choosealpha
- title="Directories starting with 'f'"
+ <a title="Directories starting with 'f'"
href="@url@?action=choose&regexp=^(the )?f">F</a> |
- <a class=choosealpha
- title="Directories starting with 'g'"
+ <a title="Directories starting with 'g'"
href="@url@?action=choose&regexp=^(the )?g">G</a> |
- <a class=choosealpha
- title="Directories starting with 'h'"
+ <a title="Directories starting with 'h'"
href="@url@?action=choose&regexp=^(the )?h">H</a> |
- <a class=choosealpha
- title="Directories starting with 'i'"
+ <a title="Directories starting with 'i'"
href="@url@?action=choose&regexp=^(the )?i">I</a> |
- <a class=choosealpha
- title="Directories starting with 'j'"
+ <a title="Directories starting with 'j'"
href="@url@?action=choose&regexp=^(the )?j">J</a> |
- <a class=choosealpha
- title="Directories starting with 'k'"
+ <a title="Directories starting with 'k'"
href="@url@?action=choose&regexp=^(the )?k">K</a> |
- <a class=choosealpha
- title="Directories starting with 'l'"
+ <a title="Directories starting with 'l'"
href="@url@?action=choose&regexp=^(the )?l">L</a> |
- <a class=choosealpha
- title="Directories starting with 'm'"
+ <a title="Directories starting with 'm'"
href="@url@?action=choose&regexp=^(the )?m">M</a> |
- <a class=choosealpha
- title="Directories starting with 'n'"
+ <a title="Directories starting with 'n'"
href="@url@?action=choose&regexp=^(the )?n">N</a> |
- <a class=choosealpha
- title="Directories starting with 'o'"
+ <a title="Directories starting with 'o'"
href="@url@?action=choose&regexp=^(the )?o">O</a> |
- <a class=choosealpha
- title="Directories starting with 'p'"
+ <a title="Directories starting with 'p'"
href="@url@?action=choose&regexp=^(the )?p">P</a> |
- <a class=choosealpha
- title="Directories starting with 'q'"
+ <a title="Directories starting with 'q'"
href="@url@?action=choose&regexp=^(the )?q">Q</a> |
- <a class=choosealpha
- title="Directories starting with 'r'"
+ <a title="Directories starting with 'r'"
href="@url@?action=choose&regexp=^(the )?r">R</a> |
- <a class=choosealpha
- title="Directories starting with 's'"
+ <a title="Directories starting with 's'"
href="@url@?action=choose&regexp=^(the )?s">S</a> |
- <a class=choosealpha
- title="Directories starting with 't'"
+ <a title="Directories starting with 't'"
href="@url@?action=choose&regexp=^(?!the [^t])t">T</a> |
- <a class=choosealpha
- title="Directories starting with 'u'"
+ <a title="Directories starting with 'u'"
href="@url@?action=choose&regexp=^(the )?u">U</a> |
- <a class=choosealpha
- title="Directories starting with 'v'"
+ <a title="Directories starting with 'v'"
href="@url@?action=choose&regexp=^(the )?v">V</a> |
- <a class=choosealpha
- title="Directories starting with 'w'"
+ <a title="Directories starting with 'w'"
href="@url@?action=choose&regexp=^(the )?w">W</a> |
- <a class=choosealpha
- title="Directories starting with 'x'"
+ <a title="Directories starting with 'x'"
href="@url@?action=choose&regexp=^(the )?x">X</a> |
- <a class=choosealpha
- title="Directories starting with 'y'"
+ <a title="Directories starting with 'y'"
href="@url@?action=choose&regexp=^(the )?y">Y</a> |
- <a class=choosealpha
- title="Directories starting with 'z'"
+ <a title="Directories starting with 'z'"
href="@url@?action=choose&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&regexp=^[^a-z]">*</a>
</p>
}@
@if{@ne{@arg:directory@}{}@}{
<p class=directoryname>@navigate{@arg:directory@}{/<a
- class=thisdirectory
href="@url@?action=choose&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&directory=@urlquote{@file@}@"
title="@label:choose.directory@">
<img class=button
</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&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&file=@urlquote{@file@}@&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&directory=@urlquote{@arg:directory@}@&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&directory=@urlquote{@arg:directory@}@&back=@urlquote{@thisurl@}@">
+ <a class=button href="@url@?action=play&directory=@urlquote{@arg:directory@}@&back=@urlquote{@thisurl@}@">
@label:choose.playall@
</a>
</p>
- </div>
+ </div></div>
}@
@include{topbarend}@
<!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
</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&regexp=^(the )?a">A</a> |
- <a class=choosealpha
- title="Directories starting with 'b'"
+ <a title="Directories starting with 'b'"
href="@url@?action=choose&regexp=^(the )?b">B</a> |
- <a class=choosealpha
- title="Directories starting with 'c'"
+ <a title="Directories starting with 'c'"
href="@url@?action=choose&regexp=^(the )?c">C</a> |
- <a class=choosealpha
- title="Directories starting with 'd'"
+ <a title="Directories starting with 'd'"
href="@url@?action=choose&regexp=^(the )?d">D</a> |
- <a class=choosealpha
- title="Directories starting with 'e'"
+ <a title="Directories starting with 'e'"
href="@url@?action=choose&regexp=^(the )?e">E</a> |
- <a class=choosealpha
- title="Directories starting with 'f'"
+ <a title="Directories starting with 'f'"
href="@url@?action=choose&regexp=^(the )?f">F</a> |
- <a class=choosealpha
- title="Directories starting with 'g'"
+ <a title="Directories starting with 'g'"
href="@url@?action=choose&regexp=^(the )?g">G</a> |
- <a class=choosealpha
- title="Directories starting with 'h'"
+ <a title="Directories starting with 'h'"
href="@url@?action=choose&regexp=^(the )?h">H</a> |
- <a class=choosealpha
- title="Directories starting with 'i'"
+ <a title="Directories starting with 'i'"
href="@url@?action=choose&regexp=^(the )?i">I</a> |
- <a class=choosealpha
- title="Directories starting with 'j'"
+ <a title="Directories starting with 'j'"
href="@url@?action=choose&regexp=^(the )?j">J</a> |
- <a class=choosealpha
- title="Directories starting with 'k'"
+ <a title="Directories starting with 'k'"
href="@url@?action=choose&regexp=^(the )?k">K</a> |
- <a class=choosealpha
- title="Directories starting with 'l'"
+ <a title="Directories starting with 'l'"
href="@url@?action=choose&regexp=^(the )?l">L</a> |
- <a class=choosealpha
- title="Directories starting with 'm'"
+ <a title="Directories starting with 'm'"
href="@url@?action=choose&regexp=^(the )?m">M</a> |
- <a class=choosealpha
- title="Directories starting with 'n'"
+ <a title="Directories starting with 'n'"
href="@url@?action=choose&regexp=^(the )?n">N</a> |
- <a class=choosealpha
- title="Directories starting with 'o'"
+ <a title="Directories starting with 'o'"
href="@url@?action=choose&regexp=^(the )?o">O</a> |
- <a class=choosealpha
- title="Directories starting with 'p'"
+ <a title="Directories starting with 'p'"
href="@url@?action=choose&regexp=^(the )?p">P</a> |
- <a class=choosealpha
- title="Directories starting with 'q'"
+ <a title="Directories starting with 'q'"
href="@url@?action=choose&regexp=^(the )?q">Q</a> |
- <a class=choosealpha
- title="Directories starting with 'r'"
+ <a title="Directories starting with 'r'"
href="@url@?action=choose&regexp=^(the )?r">R</a> |
- <a class=choosealpha
- title="Directories starting with 's'"
+ <a title="Directories starting with 's'"
href="@url@?action=choose&regexp=^(the )?s">S</a> |
- <a class=choosealpha
- title="Directories starting with 't'"
+ <a title="Directories starting with 't'"
href="@url@?action=choose&regexp=^(?!the [^t])t">T</a> |
- <a class=choosealpha
- title="Directories starting with 'u'"
+ <a title="Directories starting with 'u'"
href="@url@?action=choose&regexp=^(the )?u">U</a> |
- <a class=choosealpha
- title="Directories starting with 'v'"
+ <a title="Directories starting with 'v'"
href="@url@?action=choose&regexp=^(the )?v">V</a> |
- <a class=choosealpha
- title="Directories starting with 'w'"
+ <a title="Directories starting with 'w'"
href="@url@?action=choose&regexp=^(the )?w">W</a> |
- <a class=choosealpha
- title="Directories starting with 'x'"
+ <a title="Directories starting with 'x'"
href="@url@?action=choose&regexp=^(the )?x">X</a> |
- <a class=choosealpha
- title="Directories starting with 'y'"
+ <a title="Directories starting with 'y'"
href="@url@?action=choose&regexp=^(the )?y">Y</a> |
- <a class=choosealpha
- title="Directories starting with 'z'"
+ <a title="Directories starting with 'z'"
href="@url@?action=choose&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&regexp=^[^a-z]">*</a>
</p>
/* 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
}
}
/* 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 {
- 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 {
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
<!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
</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>
</head>
<body>
@include{topbar}@
- <h1 class=title>@label{help.title}@</h1>
+ <h1>@label{help.title}@</h1>
<h2 class=helptitle>Introduction</h2>
<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>
<!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
</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}@
@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>
}@
</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@}{
</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@}{
<p class=mgmt>
@if{@paused@}{
<!-- paused -->
- <span class=button>
<a class=button
href="@url@?action=resume&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&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&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&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&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&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
</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>
}@}@
@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@>
<!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
</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>
<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>
</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@}{
<!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
</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>
<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&file=@urlquote{@file@}@&back=@urlquote{@thisurl@}@">@part:title@</a>
@if{@eq{@trackstate{@file@}@}{playing}@}{[<b>playing</b>]}@
@if{@eq{@trackstate{@file@}@}{queued}@}{[<b>queued</b>]}@
</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>
~mdw / disorder / commitdiff