colors-green.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. /* ----------< Standart color green >---------------- */
  2. .sc-player {
  3. font: .7em Arial, sans-serif;
  4. background-color: #333;
  5. color: #fff;
  6. line-height: 1.6em;
  7. box-shadow: 1px 1px 4px #333;
  8. }
  9. .sc-player a {
  10. text-decoration: none;
  11. color: #fff;
  12. }
  13. /* Artworks */
  14. .sc-artwork-list {
  15. background: #eee;
  16. background: linear-gradient( left bottom, #eee 20px, #333 350px );
  17. background: -o-linear-gradient( left bottom, #eee 20px, #333 350px );
  18. background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px );
  19. background: -webkit-gradient(linear, left bottom, right top, from(#eee), color-stop(50%, #888), to(#333));
  20. box-shadow: 1px 1px 4px rgba(0,0,0,.2);
  21. }
  22. /* Scrubber */
  23. .sc-scrubber {
  24. background-color: #e5e5e5;
  25. border-radius: 2px;
  26. }
  27. .sc-time-span {
  28. background-color: #666;
  29. }
  30. .sc-waveform-container {
  31. width: 100%;
  32. position: absolute;
  33. }
  34. .sc-buffer,
  35. .sc-played {
  36. background-color: #333;
  37. position: absolute;
  38. }
  39. .sc-played {
  40. background: #22B573;
  41. background: linear-gradient( top, black, #22B573 0, #7decba 90% );
  42. background: -o-linear-gradient( top, black, #22B573 0, #7decba 90% );
  43. background: -moz-linear-gradient( top, black, #22B573 0, #7decba 90% );
  44. background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #22B573), to(#7decba));
  45. }
  46. /* Controls */
  47. .sc-controls {
  48. border-radius: 100%;
  49. border: 2px solid white;
  50. background: #22B573;
  51. background: linear-gradient( 135deg, #fff, #22B573 50% );
  52. background: -o-linear-gradient( 135deg, #fff, #22B573 50% );
  53. background: -moz-linear-gradient( 135deg, #fff, #22B573 50% );
  54. background: -webkit-gradient(linear, left top, 30% 90%, from(#fff), color-stop(50%, #22B573), to(#22B573));
  55. box-shadow: 1px 1px 4px rgba(0,0,0,.2);
  56. }
  57. .sc-controls > * {
  58. color: transparent;
  59. }
  60. .sc-controls:hover {
  61. background: linear-gradient( 45deg, #a8e2ca, #22B573 70% );
  62. background: -o-linear-gradient( 45deg, #a8e2ca, #22B573 70% );
  63. background: -moz-linear-gradient( 45deg, #a8e2ca, #22B573 70% );
  64. background: -webkit-gradient(linear, left bottom, 90% 30%, from(#a8e2ca), color-stop(70%, #22B573), to(#22B573));
  65. }
  66. .sc-time-indicators {
  67. background: #22B573;
  68. color: #fff;
  69. border-radius: 4px;
  70. padding: 4px;
  71. box-shadow: 1px 1px 4px rgba(0,0,0,.2);
  72. }
  73. .sc-play {
  74. background: url('img/play-standart.svg') no-repeat center center / 30%;
  75. }
  76. .sc-pause {
  77. background: url('img/pause-standart.svg') no-repeat center center / 30%;
  78. }
  79. /* Track list */
  80. .sc-trackslist li {
  81. background: #333;
  82. color: #b8e9d3;
  83. border-radius: 4px;
  84. transition: background 0.3s ease-in;
  85. }
  86. .sc-trackslist li:hover {
  87. background: #22B573;
  88. }
  89. .sc-trackslist li.active {
  90. background: #22B573;
  91. border-radius: 4px;
  92. }
  93. .sc-trackslist li.active a {
  94. color: #fff;
  95. }
  96. /* Track info */
  97. .sc-info.active,
  98. .sc-info-close:hover,
  99. .sc-info-toggle:hover {
  100. background: #333;
  101. color: #fff;
  102. }
  103. .sc-info.active {
  104. opacity: .9;
  105. }
  106. .sc-info a {
  107. color: #b1e8cc;
  108. }
  109. .sc-info a:hover {
  110. color: #e1f7ee;
  111. }
  112. .sc-info-toggle {
  113. background: #22B573;
  114. color: #fff;
  115. border-radius: 4px;
  116. padding: 4px;
  117. box-shadow: 1px 1px 4px rgba(0,0,0,.2);
  118. }
  119. .sc-info-close {
  120. background: #22B573;
  121. color: #fff;
  122. border-radius: 4px;
  123. padding: 2px 4px;
  124. font-weight: bold;
  125. }
  126. /* Volume control */
  127. .sc-volume-slider {
  128. background-color: #e5e5e5;
  129. border-radius: 2px;
  130. box-shadow: 1px 1px 4px rgba(0,0,0,.2);
  131. }
  132. .sc-volume-slider .sc-volume-status {
  133. background-color: #666;
  134. border-right: 1px solid #22B573;
  135. }