structure-horizontal.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. /* ----------< Standart structure horizontal >---------------- */
  2. .sc-player {
  3. width: 540px;
  4. height: 270px;
  5. position: relative;
  6. margin: 5px;
  7. }
  8. .sc-player ol,
  9. .sc-player li {
  10. margin: 0;
  11. padding: 0;
  12. list-style-position: inside;
  13. }
  14. /* Artworks */
  15. .sc-artwork-list {
  16. width: 50%;
  17. height: 100%;
  18. list-style-type: none;
  19. position: relative;
  20. }
  21. .sc-artwork-list li {
  22. list-style-type: none;
  23. display: none;
  24. }
  25. .sc-artwork-list li.active {
  26. list-style-type: none;
  27. display: block;
  28. }
  29. .sc-artwork-list img {
  30. list-style-type: none;
  31. width: 100%;
  32. height: 100%;
  33. }
  34. .sc-no-artwork {
  35. display: none;
  36. }
  37. /* Controls */
  38. .sc-controls {
  39. position: absolute;
  40. width: 50px;
  41. height: 50px;
  42. margin-left: -25px;
  43. margin-top: -25px;
  44. top: 50%;
  45. left: 25%;
  46. }
  47. .sc-controls > * {
  48. width: 50px;
  49. height: 50px;
  50. cursor: pointer;
  51. }
  52. /* Scrubber */
  53. .sc-scrubber {
  54. position: absolute;
  55. left: 10px;
  56. bottom: 10px;
  57. height: 40px;
  58. width: 250px;
  59. box-shadow: 1px 1px 4px rgba(0,0,0,.3);
  60. display: block;
  61. }
  62. .sc-time-span {
  63. height: 30px;
  64. margin: 5px;
  65. position: relative;
  66. }
  67. .sc-buffer,
  68. .sc-played {
  69. position: absolute;
  70. height: 30px;
  71. top: 0;
  72. }
  73. .sc-time-span img {
  74. height: 30px;
  75. width: 100%;
  76. }
  77. .sc-time-indicators {
  78. position: absolute;
  79. right: 280px;
  80. bottom: 10px;
  81. }
  82. .sc-player.played .sc-time-indicators,
  83. .sc-player.paused .sc-time-indicators {
  84. bottom: 55px;
  85. }
  86. /* Track list */
  87. .sc-trackslist {
  88. position: absolute;
  89. width: 50%;
  90. height: 260px;
  91. top: 5px;
  92. left: 50%;
  93. overflow: auto;
  94. }
  95. .sc-trackslist li {
  96. cursor: pointer;
  97. margin: 1px 5px;
  98. padding: 3px 30px 3px 5px;
  99. position: relative;
  100. }
  101. .sc-track-duration {
  102. text-align: right;
  103. padding: 0 5px;
  104. margin-left: 5px;
  105. position: absolute;
  106. right: 0;
  107. top: 3px;
  108. }
  109. /* Track info */
  110. .sc-info {
  111. position: absolute;
  112. top: 0px;
  113. width: 260px;
  114. height: 260px;
  115. padding: 5px;
  116. z-index: 1;
  117. overflow: auto;
  118. opacity: 0.9;
  119. }
  120. .sc-info-toggle {
  121. position: absolute;
  122. top: 10px;
  123. left: 10px;
  124. cursor: pointer;
  125. }
  126. .sc-info-close {
  127. position: absolute;
  128. top: 10px;
  129. right: 10px;
  130. cursor: pointer;
  131. }
  132. .sc-info,
  133. .sc-info-toggle.active,
  134. .sc-player .sc-scrubber {
  135. visibility: hidden;
  136. }
  137. .sc-info.active,
  138. .sc-player.played .sc-scrubber,
  139. .sc-player.paused .sc-scrubber {
  140. visibility: visible;
  141. }
  142. /* Volume control */
  143. .sc-volume-slider {
  144. top: -25px;
  145. position: absolute;
  146. width: 110px;
  147. height: 12px;
  148. background-color: white;
  149. }
  150. .sc-volume-slider .sc-volume-status {
  151. position: absolute;
  152. width: 0%;
  153. height: 10px;
  154. top: 1px;
  155. left: 1px;
  156. }
  157. /* --- */
  158. .sc-player .hidden {
  159. display: none;
  160. }