structure-vertical.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. /* ----------< Standart structure vertical >---------------- */
  2. .sc-player {
  3. width: 270px;
  4. height: 540px;
  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: 100%;
  17. height: 50%;
  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: 25%;
  45. left: 50%;
  46. }
  47. .sc-controls > * {
  48. width: 50px;
  49. height: 50px;
  50. cursor: pointer;
  51. }
  52. /* Scrubber */
  53. .sc-scrubber {
  54. position: absolute;
  55. bottom: 280px;
  56. height: 40px;
  57. width: 250px;
  58. left: 10px;
  59. display: block;
  60. }
  61. .sc-time-span {
  62. height: 30px;
  63. margin: 5px;
  64. position: relative;
  65. }
  66. .sc-buffer,
  67. .sc-played {
  68. height: 30px;
  69. position: absolute;
  70. top: 0;
  71. }
  72. .sc-time-span img {
  73. height: 30px;
  74. width: 100%;
  75. }
  76. .sc-time-indicators {
  77. position: absolute;
  78. right: 10px;
  79. top: 235px;
  80. }
  81. .sc-player.played .sc-time-indicators,
  82. .sc-player.paused .sc-time-indicators {
  83. top: 190px;
  84. }
  85. /* Track list */
  86. .sc-trackslist {
  87. position: absolute;
  88. width: 100%;
  89. height: 50%;
  90. top: 50%;
  91. left: 0;
  92. overflow: auto;
  93. }
  94. .sc-trackslist li {
  95. cursor: pointer;
  96. margin: 5px;
  97. padding: 3px 30px 3px 5px;
  98. position: relative;
  99. }
  100. .sc-track-duration {
  101. position: absolute;
  102. right: 0;
  103. top: 3px;
  104. }
  105. /* Track info */
  106. .sc-info {
  107. position: absolute;
  108. top: 0px;
  109. width: 260px;
  110. height: 260px;
  111. padding: 5px;
  112. z-index: 1;
  113. overflow: auto;
  114. opacity: 0.9;
  115. }
  116. .sc-info-toggle {
  117. position: absolute;
  118. top: 10px;
  119. left: 10px;
  120. cursor: pointer;
  121. }
  122. .sc-info-close {
  123. position: absolute;
  124. top: 10px;
  125. right: 10px;
  126. cursor: pointer;
  127. }
  128. .sc-info,
  129. .sc-info-toggle.active,
  130. .sc-player .sc-scrubber {
  131. visibility: hidden;
  132. }
  133. .sc-info.active,
  134. .sc-player.played .sc-scrubber,
  135. .sc-player.paused .sc-scrubber {
  136. visibility: visible;
  137. }
  138. /* Volume control */
  139. .sc-volume-slider {
  140. top: -25px;
  141. left: 0px;
  142. position: absolute;
  143. width: 110px;
  144. height: 12px;
  145. background-color: white;
  146. }
  147. .sc-volume-slider .sc-volume-status {
  148. position: absolute;
  149. width: 0%;
  150. height: 10px;
  151. top: 1px;
  152. left: 1px;
  153. }
  154. /* --- */
  155. .sc-player .hidden {
  156. display: none;
  157. }