themes/iphone/style.css
author Dan
Mon, 01 Sep 2008 13:05:52 -0400
changeset 39 38dbcda3cf20
parent 19 75dd71fe35b2
child 72 b8730fcd64a9
permissions -rw-r--r--
Fixed scroll-to-current-track being about 30 pixels off under iPhone
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
4
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
     1
/**
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
     2
 * Based upon the AmaroK WebControl interface by:
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
     3
 *    Jonas Christian Drewsen ( kde at xspect dot dk )
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
     4
 *    André Kelpe ( fs111 at web dot de )
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
     5
 *    Peter C. Ndikuwera ( pndiku at gmail dot com )
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
     6
 */
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
     7
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
     8
body {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
     9
  font-family: sans-serif;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    10
  background-color: #9cb2cd;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    11
  color: #ffffff;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    12
  margin: 0;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    13
  padding: 0;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    14
  width: 320px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    15
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    16
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    17
div.tblholder {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    18
  padding: 1px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    19
  background-color: #ffffff;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    20
  border: 1px solid #000000;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    21
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    22
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    23
div.tblholder table {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    24
  background-color: #596082;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    25
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    26
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    27
tr th {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    28
  background-color: #697092;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    29
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    30
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    31
tr.row1 td {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    32
  background-color: #394062;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    33
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    34
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    35
tr.row2 td {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    36
  background-color: #202050;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    37
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    38
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    39
tr.current td {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    40
  background-color: #495072;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    41
  color: #ffff00;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    42
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    43
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    44
div#playbar {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    45
  width: 320px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    46
  padding: 0;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    47
  margin: 0 0 10px 0;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    48
  background-image: url(images/playbar.gif);
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    49
  background-repeat: repeat-x;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    50
  background-color: #383f61;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    51
  border-bottom: 1px solid #000000;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    52
  text-align: center;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    53
  position: absolute;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    54
  top: 0px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    55
  left: 0px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    56
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    57
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    58
div.playbar-inner {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    59
  padding: 5px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    60
  line-height: 22px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    61
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    62
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    63
a img {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    64
  border-width: 0;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    65
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    66
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    67
div#playlist {
10
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
    68
  margin: 174px 8px 0 8px;
4
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    69
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    70
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    71
a.tracklink {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    72
  text-decoration: none;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    73
  color: white;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    74
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    75
5
9b96265b5918 Relicensed to GPLv2. Previous revisions should not be downloaded as they do not contain copies of appropriate licenses, which will be added in a later commit. Completed interface for mobile devices.
Dan
parents: 4
diff changeset
    76
div.track_inner {
9b96265b5918 Relicensed to GPLv2. Previous revisions should not be downloaded as they do not contain copies of appropriate licenses, which will be added in a later commit. Completed interface for mobile devices.
Dan
parents: 4
diff changeset
    77
  display: none;
9b96265b5918 Relicensed to GPLv2. Previous revisions should not be downloaded as they do not contain copies of appropriate licenses, which will be added in a later commit. Completed interface for mobile devices.
Dan
parents: 4
diff changeset
    78
}
9b96265b5918 Relicensed to GPLv2. Previous revisions should not be downloaded as they do not contain copies of appropriate licenses, which will be added in a later commit. Completed interface for mobile devices.
Dan
parents: 4
diff changeset
    79
4
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    80
div#playlist tr.current a.tracklink {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    81
  color: #ffff00;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    82
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    83
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    84
span#playmeter, span#volume_wrap {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    85
  position: relative;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    86
  top: -7px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    87
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    88
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    89
a.volume_button {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    90
  padding-right: 18px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    91
  margin-right: 1px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    92
  background-color: #33395d;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    93
  border: 1px solid #909090;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    94
  text-decoration: none;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    95
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    96
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    97
a.volume_button_active {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    98
  background-color: #9090c2;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
    99
  border-color: #d0d0d0;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
   100
}
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
   101
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
   102
div#footer {
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
   103
  background-image: url(images/playbar.gif);
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
   104
  background-repeat: repeat-x;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
   105
  text-align: center;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
   106
  margin-top: 10px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
   107
  padding: 5px;
cde92f6ec29f Should be completely iPhone/iPod Touch-friendly now :)
Dan
parents:
diff changeset
   108
}
10
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   109
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   110
/* Position slider (playhead) */
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   111
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   112
div#playhead {
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   113
  background-image: url(images/position-empty.png);
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   114
  width: 250px;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   115
  background-repeat: no-repeat;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   116
  background-position: center center;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   117
  margin: 0 auto 10px auto;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   118
}
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   119
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   120
div#playhead-filler {
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   121
  background-image: url(images/position-full.png);
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   122
  width: 150px;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   123
  background-repeat: no-repeat;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   124
  background-position: left center;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   125
}
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   126
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   127
div#playhead-button {
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   128
  background-image: url(images/playhead.png);
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   129
  width: 16px;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   130
  height: 16px;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   131
  font-size: 1px;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   132
  position: absolute;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   133
  background-repeat: no-repeat;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   134
  background-position: center center;
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   135
}
d3059e20b0fa SECURITY: Fix ability to crash server in ajax.php; added playback position slider and ability to seek through current song
Dan
parents: 5
diff changeset
   136
11
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   137
/* The list of colors that will be cycled through as playback takes place */
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   138
tr.pulsar0 td { background-color: #47507a; }
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   139
tr.pulsar1 td { background-color: #424a73; }
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   140
tr.pulsar2 td { background-color: #3c436c; }
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   141
tr.pulsar3 td { background-color: #383d64; }
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   142
tr.pulsar4 td { background-color: #31365d; }
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   143
tr.pulsar5 td { background-color: #2c3155; }
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   144
tr.pulsar6 td { background-color: #272a4e; }
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   145
tr.pulsar7 td { background-color: #222447; }
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   146
tr.pulsar8 td { background-color: #1c1d3f; }
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   147
tr.pulsar9 td { background-color: #171738; }
0faea3a6c881 Fixed some position slider issues; added a pulsing effect to the current track (fun!)
Dan
parents: 10
diff changeset
   148
19
75dd71fe35b2 Added the "powered by" link and rebranded as 0.1 alpha 1
Dan
parents: 11
diff changeset
   149
div.poweredby {
75dd71fe35b2 Added the "powered by" link and rebranded as 0.1 alpha 1
Dan
parents: 11
diff changeset
   150
  font-size: smaller;
75dd71fe35b2 Added the "powered by" link and rebranded as 0.1 alpha 1
Dan
parents: 11
diff changeset
   151
  text-align: center;
75dd71fe35b2 Added the "powered by" link and rebranded as 0.1 alpha 1
Dan
parents: 11
diff changeset
   152
  margin: 10px 0;
75dd71fe35b2 Added the "powered by" link and rebranded as 0.1 alpha 1
Dan
parents: 11
diff changeset
   153
}
75dd71fe35b2 Added the "powered by" link and rebranded as 0.1 alpha 1
Dan
parents: 11
diff changeset
   154
75dd71fe35b2 Added the "powered by" link and rebranded as 0.1 alpha 1
Dan
parents: 11
diff changeset
   155
div.poweredby a {
75dd71fe35b2 Added the "powered by" link and rebranded as 0.1 alpha 1
Dan
parents: 11
diff changeset
   156
  color: #57608a;
75dd71fe35b2 Added the "powered by" link and rebranded as 0.1 alpha 1
Dan
parents: 11
diff changeset
   157
}