Asunder/webserver/style.css

   1 html,body {
   2         margin: 0;
   3 }
   4
   5 body {
   6         font-family: "Geneva", sans-serif;
   7 }
   8
   9 #navigation {
  10         position: fixed;
  11         top: 0;
  12         height: 4ex;
  13         left: 0;
  14         right: 0;
  15         background-color: #ccc;
  16         color: black;
  17 }
  18
  19 #navigation div {
  20         font-size: 80%;
  21         padding: 1ex 1em;
  22 }
  23
  24 .playing #navigation {
  25         background-color: #222;
  26         color: white;
  27 }
  28
  29 .playing #playing {
  30         display: none;
  31 }
  32
  33 .playlists #back,.albums #back,.artists #back,.search #back {
  34         display: none;
  35 }
  36
  37 #back {
  38         float: left;
  39 }
  40
  41 #playing {
  42         float: right;
  43 }
  44
  45 .content {
  46         margin-top: 4ex;
  47         margin-bottom: 8ex;
  48 }
  49
  50 #playlist {
  51         margin-top: 18ex;
  52 }
  53
  54 #state {
  55         position: fixed;
  56         top: 4ex;
  57         height: 10ex;
  58         left: 0;
  59         right: 0;
  60         padding: 2ex 1em;
  61         padding-bottom: 2ex;
  62         border-bottom: solid 2px #ccc;
  63         background: white;
  64         overflow: auto;
  65 }
  66
  67 #state div {
  68         font-size: 120%;
  69 }
  70
  71 #state .artist {
  72         color: black;
  73 }
  74
  75 #state .album,#state .genre {
  76         font-size: 80%;
  77 }
  78
  79 .item {
  80         border-bottom: solid 1px #ccc;
  81         padding: 1ex 1em;
  82         display: block;
  83 }
  84
  85 .album,.artist,.title {
  86         display: block;
  87 }
  88
  89 .album,.artist,.genre {
  90         color: #888;
  91         font-size: 0.7em;
  92 }
  93
  94 .title {
  95         font-weight: bold;
  96 }
  97
  98 .id {
  99         display: none;
 100 }
 101
 102 .current {
 103         background-color: #eee;
 104 }
 105
 106 #albumart {
 107         height: 10ex;
 108         float: left;
 109         margin-right: 1em;
 110 }
 111
 112 #control {
 113         position: fixed;
 114         bottom: 0;
 115         height: 6ex;
 116         padding: 2ex 0;
 117         width: 100%;
 118         text-align: center;
 119         /*opacity: 0.8;*/
 120         background-color: rgba(204,204,204,0.8);
 121 }
 122
 123 #control div {
 124         display: inline;
 125 }
 126
 127 #control .hidden {
 128         display: none;
 129 }
 130
 131 #control #volume {
 132         display: block;
 133 }
 134
 135 #play,#pause {
 136         padding: 2ex 3em;
 137 }
 138
 139 #current {
 140         display: none;
 141 }
 142
 143 .playing #current {
 144         display: block;
 145 }
 146
 147 .playing #browse {
 148         display: none;
 149 }
 150
 151 #browse-menu {
 152         position: fixed;
 153         left: 0;
 154         right: 0;
 155         bottom: 0;
 156         height: 4ex;
 157         padding: 2ex 0;
 158         background-color: #222;
 159         color: white;
 160         text-align: center;
 161 }
 162
 163 #browse-menu div {
 164         display: inline;
 165 }
 166
 167 .debug {
 168         display: block;
 169 }
 170
 171 #browse .content {
 172         display: none;
 173 }
 174
 175 #browse .content .container {
 176         display: none;
 177 }
 178
 179 .playlists #browse-playlists, .playlist-tracks #browse-playlists {
 180         display: block;
 181 }
 182
 183 .playlists .content #browse-playlists-container {
 184         display: block;
 185 }
 186
 187 .playlist-tracks .content #browse-playlists-tracks {
 188         display: block;
 189 }
 190
 191 .artists #browse-artists,.artist-albums #browse-artists,.artist-tracks #browse-artists
 192         {
 193         display: block;
 194 }
 195
 196 .artists .content #browse-artists-container {
 197         display: block;
 198 }
 199
 200 .artist-albums .content #browse-artists-albums {
 201         display: block;
 202 }
 203
 204 .artist-tracks .content #browse-artists-tracks {
 205         display: block;
 206 }
 207
 208 .albums #browse-albums,.album-tracks #browse-albums {
 209         display: block;
 210 }
 211
 212 .albums .content #browse-albums-container {
 213         display: block;
 214 }
 215
 216 .album-tracks .content #browse-albums-tracks {
 217         display: block;
 218 }
 219
 220 .search #browse-search {
 221         display: block;
 222 }