<h2>Copyright</h2>
<p><a
+ title="DisOrder web site"
href="http://www.greenend.org.uk/rjk/disorder/">DisOrder
version @version@</a> - select and play digital
audio files</p>
<body>
@include{topbar}@
<h1 class=title>@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 href="@url@?action=choose&regexp=^(the )?a">A</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?b">B</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?c">C</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?d">D</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?e">E</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?f">F</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?g">G</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?h">H</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?i">I</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?j">J</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?k">K</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?l">L</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?m">M</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?n">N</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?o">O</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?p">P</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?q">Q</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?r">R</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?s">S</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(?!the [^t])t">T</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?u">U</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?v">V</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?w">W</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?x">X</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?y">Y</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^(the )?z">Z</a> |
+ <a class=choosealpha href="@url@?action=choose&regexp=^[^a-z]">*</a>
+ </p>
+ }@
@if{@ne{@arg:directory@}{}@}{
<p class=directoryname>@navigate{@arg:directory@}{/<a
-/* default colors */
+/* default font and colors */
body {
color: black;
background-color: white
+ font-family: serif;
+ font-weight: normal;
+ font-size: 12pt;
+ font-variant: normal
}
/* general link colors */
color: red
}
+/* title bars */
h1.title {
font-family: sans-serif;
font-weight: bold;
+ font-size: 18pt;
+ font-variant: normal;
text-align: center;
- font-size: 18pt
+ border: 1px solid black;
+ padding: 0.2em;
+ background-color: #e0e0e0
+}
+
+/* secondary titles */
+h2 {
+ font-family: sans-serif;
+ font-weight: bold;
+ font-size: 16pt;
+ font-variant: normal;
}
/* playing, recent and new ***************************************************/
td.button {
text-align: center;
padding: 1px;
- border-color: black;
- border-width: 1px;
- border-style: solid;
+ border: 1px solid black;
background-color: #c0c0c0;
color: #000000
}
/* first letter choice */
p.choosealpha {
- text-align: center
+ text-align: center;
+ font-size: 140%;
+ font-weight: bold;
+ border: 1px solid black;
+ padding: 1em
}
/* containing directory */
color: red
}
+form.search {
+ border: 1px solid black;
+ padding: 1em
+}
+
/* sidebar *******************************************************************/
div#sidebar {
/* login page ****************************************************************/
-form.login,form.register,form.edituser {
- border-style: solid;
- border-width: 1px;
- border-color: black
+form.login {
+ border: 1px solid black;
+ background-color: #e0ffe0 /* pastel green */
+}
+
+form.register {
+ border: 1px solid black;
+ background-color: #e0e0ff /* pastel blue */
+}
+
+form.edituser {
+ border: 1px solid black;
+ background-color: #ffffe0 /* pastel yellow */
}
form.logout {
border-style: none;
}
+div.loginstatus {
+ border: 1px solid black;
+ background-color: #ffff00 /* solid yellow */
+}
+
p.loginstatus {
- color: green;
- font-size: 150%
+ color: #0000ff; /* solid blue */
+ font-size: 150%;
+ font-weight: bold
}
/* errors ********************************************************************/
+div.error {
+ border: 1px solid black;
+ background-color: #ff0000; /* solid red */
+ color: white;
+ font-size: 150%;
+ font-weight: bold
+}
+
p.error {
- color: red
}
/* miscelleanous *************************************************************/
@include{topbar}@
<h1 class=title>@label:error.title@</h1>
+ <div class=error>
<p class=error>@label{error.@label:error@}@</p>
<p class=error>@label:error.generic@</p>
+ </div>
@include{topbarend}@
</body>
@if{@ne{@label:error@}{error}@}{
@#{error reporting from some earlier operation}@
- <p class=error>@label{error.@label:error@}@</p>
+ <div class=error>
+ <p class=error>@label{error.@label:error@}@</p>
+ </div>
}@
@if{@ne{@label:status@}{status}@}{
@#{some action succeeded}@
- <p class=loginstatus>@label{login.@label:status@}@</p>
+ <div class=loginstatus>
+ <p class=loginstatus>@label{login.@label:status@}@</p>
+ </div>
}@
@if{@eq{@user@}{guest}@}{
label recent.title "Recently Played"
# <TITLE> for new tracks page
-label new.title "New tracks"
+label new.title "New Tracks"
# <TITLE> for choose track page
-label choose.title "Pick track"
+label choose.title "Pick Track"
# Text for play all button
label choose.playall "Play all"
label prefs.tags "Tags"
# <TITLE> for help page
-label help.title "DisOrder help"
+label help.title "DisOrder Help"
# <TITLE> for login page
label login.title "DisOrder Login"
@#{extra control buttons for the management page}@
@if{@arg:mgmt@}{
+ <div class=mgmt>
<p class=mgmt>
@if{@paused@}{
<!-- paused -->
</a>}{<img class=button src="@image:noup@">}@
</form>
</span>
+ </p>
+ </div>
}@
@#{only display the table if there is something to put in it}@
<form class=search action="@url@" method=POST
enctype="multipart/form-data" accept-charset=utf-8>
- <div class=search>
+ <p class=search>Enter search terms:
<input class=query name=query type=text value="@arg:query@"
- size=32>
+ size=50>
<button class=search name=action type=submit value=search>
@label:search.search@
</button>
<input name=nonce type=hidden value="@nonce@">
- </div>
+ </p>
</form>
<div class=searchresults>
<a class=@if{@eq{@action@}{manage}@}{activemenu}{inactivemenu}@
href="@url@?mgmt=true"
title="@label:sidebar.manageverbose@">@label:sidebar.manage@</a>
- <a class=@if{@eq{@action@}{login}@}{activemenu}{inactivemenu}@
+ <a class=@if{@or{@eq{@action@}{login}@}
+ {@eq{@action@}{logout}@}
+ {@eq{@action@}{register}@}
+ {@eq{@action@}{edituser}@}@}{activemenu}{inactivemenu}@
href="@url@?action=login&nonce=@nonce@"
title="@label:sidebar.loginverbose@">@label:sidebar.login@</a>
<a class=@if{@eq{@action@}{help}@}{activemenu}{inactivemenu}@