colors-blue.css 3.5 KB

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