/root/css/style.scss

  1body {
  2  // padding: 0 10px;
  3}
  4
  5h1, h2 {
  6  font: {
  7    family: "Lucida Grande", sans-serif;
  8  }
  9}
 10
 11section {
 12  // clear: both;
 13  border: 1px solid #BBB;
 14  padding: 0 1em;
 15  margin-bottom: 1em;
 16  h1, h2 {
 17    font-weight: normal;
 18  }
 19  h1 {
 20    img {
 21      vertical-align: middle;
 22      max-height: 36px;
 23    }
 24    a.url {
 25      font-size: small;
 26      text-decoration: none;
 27      color: #999;
 28    }
 29  }
 30}
 31
 32#container {
 33  width: 1080px;
 34  margin-left: auto;
 35  margin-right: auto;
 36}
 37
 38section#playlist {
 39  width: 690px;
 40  float: left;
 41}
 42
 43section#queue {
 44  width: 340px;
 45  float: left;
 46  font-size: 90%;
 47  // margin-left: 10px;
 48  margin-right: 10px;
 49  padding: 0;
 50
 51  h1 {
 52    font-size: medium;
 53    padding: 0.5em;
 54    margin: 0;
 55    text-align: center;
 56  }
 57
 58  li {
 59    padding-top: 0.5em;
 60    padding-bottom: 0.5em;
 61  }
 62}
 63
 64a {
 65  $color: #12F;
 66  color: $color;
 67  &:hover {
 68    color: lighten($color, 15%);
 69  }
 70}
 71
 72body {
 73  font: {
 74    family: Verdana, sans-serif;
 75  }
 76}
 77
 78#playlist {
 79  li.track {
 80    min-height: 50px;
 81  }
 82}
 83
 84li.track {
 85  font-size: 90%;
 86  padding: 0.3em;
 87  padding-left: 24px;
 88  clear: both;
 89
 90  &.even {
 91    background-color: #FAFAFA;
 92  }
 93  &.odd {
 94    background-color: #FFF;
 95  }
 96  &.system {
 97    color: #999;
 98    background-color: #EAEAFA;
 99    min-height: 0;
100    list-style: none;
101    line-height: 1.5em;
102    vertical-align: middle;
103    span.title {
104      font-size: 90%;
105    }
106  }
107  &:hover, &:focus {
108    background-color: #EFEFF5;
109  }
110  &.playing {
111    background: {
112      image: url(/image/speaker-orange.gif);
113      repeat: no-repeat;
114      position: 8px center;
115    }
116  }
117  &.load-more {
118    font-size: larger;
119    text-align: center;
120    list-style: none;
121    &:hover {
122      background-color: #D8D9F4;
123      cursor: pointer;
124    }
125  }
126
127  .title.not-loaded {
128    color: #666;
129  }
130  a.url {
131    text-decoration: none;
132    color: #999;
133  }
134  img {
135    float: right;
136    max-width:  60px;
137    max-height: 45px;
138    margin: 0.2em;
139  }
140  span.meta {
141    color: #999;
142    font-size: 90%;
143  }
144  span.status {
145    color: #AAA;
146    font-size: smaller;
147    &:before {
148      content: "status: ";
149    }
150  }
151  span.error {
152    color: #F88;
153    font-size: smaller;
154    border: 1px solid #FCC;
155    padding: 2px 4px;
156    &:before {
157      content: "error: ";
158    }
159  }
160}
161
162ul {
163  list-style: none;
164  padding: 0;
165  li {
166    margin: 0;
167  }
168}
169
170#select-playlist {
171  list-style: none;
172  margin: 0;
173  padding: 0;
174  li {
175    max-width: 20em;
176    height: 2em;
177    overflow: hidden;
178    float: left;
179    font-size: small;
180    margin-bottom: 2px;
181    margin-right: 2px;
182    border: 1px solid #DDD;
183    cursor: pointer;
184    opacity: 0.5;
185    &.selected {
186      border-color: #BBB;
187      opacity: 1;
188    }
189    &:hover, &:focus {
190      background-color: #EFEFF5;
191    }
192    .icon-container {
193      display: inline-block;
194      width: 24px;
195      height: 24px;
196      text-align: center;
197      line-height: 24px;
198      img {
199        vertical-align: middle;
200        max-width: 16px;
201        max-height: 16px;
202      }
203    }
204  }
205}
206
207a.button {
208  border: 1px solid #DDD;
209  font-size: small;
210  padding: 0.2em 0.5em;
211
212  &:hover {
213    border-color: #999;
214  }
215}
216
217span.button {
218  cursor: pointer;
219}
220
221#queue span.button {
222  color: #DDD;
223  &:hover {
224  color: #999;
225  }
226}