/root/css/style.scss

http://github.com/motemen/Teto · Sass · 226 lines · 204 code · 19 blank · 3 comment · 0 complexity · 3d00ebe01306beacf6a6fb83b80d4ead MD5 · raw file

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