styles.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683
  1. @import 'animate.css';
  2. /* noto-serif-regular - latin */
  3. @font-face {
  4. font-family: 'Noto Serif';
  5. font-style: normal;
  6. font-weight: 400;
  7. src: url('/css/fonts/noto-serif-v21-latin-regular.eot'); /* IE9 Compat Modes */
  8. src: local(''),
  9. url('/css/fonts/noto-serif-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  10. url('/css/fonts/noto-serif-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  11. url('/css/fonts/noto-serif-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
  12. url('/css/fonts/noto-serif-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  13. url('/css/fonts/noto-serif-v21-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
  14. }
  15. /* noto-serif-italic - latin */
  16. @font-face {
  17. font-family: 'Noto Serif';
  18. font-style: italic;
  19. font-weight: 400;
  20. src: url('/css/fonts/noto-serif-v21-latin-italic.eot'); /* IE9 Compat Modes */
  21. src: local(''),
  22. url('/css/fonts/noto-serif-v21-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  23. url('/css/fonts/noto-serif-v21-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
  24. url('/css/fonts/noto-serif-v21-latin-italic.woff') format('woff'), /* Modern Browsers */
  25. url('/css/fonts/noto-serif-v21-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
  26. url('/css/fonts/noto-serif-v21-latin-italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
  27. }
  28. /* noto-serif-700 - latin */
  29. @font-face {
  30. font-family: 'Noto Serif';
  31. font-style: normal;
  32. font-weight: 700;
  33. src: url('/css/fonts/noto-serif-v21-latin-700.eot'); /* IE9 Compat Modes */
  34. src: local(''),
  35. url('/css/fonts/noto-serif-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  36. url('/css/fonts/noto-serif-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  37. url('/css/fonts/noto-serif-v21-latin-700.woff') format('woff'), /* Modern Browsers */
  38. url('/css/fonts/noto-serif-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  39. url('/css/fonts/noto-serif-v21-latin-700.svg#NotoSerif') format('svg'); /* Legacy iOS */
  40. }
  41. /* noto-serif-700italic - latin */
  42. @font-face {
  43. font-family: 'Noto Serif';
  44. font-style: italic;
  45. font-weight: 700;
  46. src: url('/css/fonts/noto-serif-v21-latin-700italic.eot'); /* IE9 Compat Modes */
  47. src: local(''),
  48. url('/css/fonts/noto-serif-v21-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  49. url('/css/fonts/noto-serif-v21-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
  50. url('/css/fonts/noto-serif-v21-latin-700italic.woff') format('woff'), /* Modern Browsers */
  51. url('/css/fonts/noto-serif-v21-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
  52. url('/css/fonts/noto-serif-v21-latin-700italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
  53. }
  54. .noto {
  55. font-family: 'Noto Serif', serif;
  56. }
  57. .modal-header {
  58. border-bottom: none !important;
  59. }
  60. .nav-item a.active {
  61. font-weight: bold;
  62. }
  63. div#amplitude-player {
  64. background: #FFFFFF;
  65. box-shadow: 0 2px 12px 8px rgba(0, 0, 0, 0.1);
  66. margin: auto;
  67. margin-top: 20px;
  68. margin-bottom: 20px;
  69. display: flex;
  70. max-width: 900px; }
  71. /* Small only */
  72. @media screen and (max-width: 39.9375em) {
  73. div#amplitude-player {
  74. flex-direction: column; } }
  75. /* Medium only */
  76. @media screen and (min-width: 40em) and (max-width: 63.9375em) {
  77. div#amplitude-player {
  78. max-height: 715px; } }
  79. /* Large and up */
  80. @media screen and (min-width: 64em) {
  81. div#amplitude-player {
  82. max-height: 715px; } }
  83. div#amplitude-left {
  84. padding: 0px;
  85. border-right: 1px solid #CFD8DC;
  86. width: 50%;
  87. display: flex;
  88. flex-direction: column; }
  89. div#amplitude-left img.album-art {
  90. width: 100%; }
  91. div#amplitude-left div#player-left-bottom {
  92. flex: 1;
  93. background-color: #F1F1F1;
  94. padding: 20px 10px; }
  95. div#amplitude-left div#player-left-bottom div#volume-container:after {
  96. content: "";
  97. display: table;
  98. clear: both; }
  99. /* Small only */
  100. @media screen and (max-width: 39.9375em) {
  101. div#amplitude-player div#amplitude-left {
  102. width: 100%; }
  103. div#amplitude-player div#amplitude-left img[amplitude-song-info="cover_art_url"] {
  104. width: auto;
  105. height: auto; } }
  106. div#amplitude-right {
  107. padding: 0px;
  108. overflow-y: scroll;
  109. width: 50%;
  110. display: flex;
  111. flex-direction: column; }
  112. div#amplitude-right div.song {
  113. cursor: pointer;
  114. padding: 10px; }
  115. div#amplitude-right div.song div.song-now-playing-icon-container {
  116. float: left;
  117. width: 20px;
  118. height: 20px;
  119. margin-right: 10px; }
  120. div#amplitude-right div.song div.song-now-playing-icon-container img.now-playing {
  121. display: none;
  122. margin-top: 15px; }
  123. div#amplitude-right div.song div.play-button-container {
  124. display: none;
  125. background: url("/img/audio/list-play-light.png") no-repeat;
  126. width: 22px;
  127. height: 22px;
  128. margin-top: 10px; }
  129. div#amplitude-right div.song div.play-button-container:hover {
  130. background: url("/img/audio/list-play-hover.png") no-repeat; }
  131. div#amplitude-right div.song.amplitude-active-song-container div.song-now-playing-icon-container img.now-playing {
  132. display: block; }
  133. div#amplitude-right div.song.amplitude-active-song-container:hover div.play-button-container {
  134. display: none; }
  135. div#amplitude-right div.song div.song-meta-data {
  136. float: left;
  137. width: calc( 100% - 110px ); }
  138. div#amplitude-right div.song div.song-meta-data span.song-title {
  139. color: #272726;
  140. font-size: 16px;
  141. display: block;
  142. font-weight: 600;
  143. white-space: nowrap;
  144. overflow: hidden;
  145. text-overflow: ellipsis; }
  146. div#amplitude-right div.song div.song-meta-data span.song-artist {
  147. color: #767676;
  148. font-size: 14px;
  149. font-weight: bold;
  150. display: block;
  151. white-space: nowrap;
  152. overflow: hidden;
  153. text-overflow: ellipsis; }
  154. div#amplitude-right div.song span.song-duration {
  155. float: left;
  156. width: 55px;
  157. text-align: center;
  158. line-height: 45px;
  159. color: #6b6b6b;
  160. font-size: 16px;
  161. font-weight: 500; }
  162. div#amplitude-right div.song:after {
  163. content: "";
  164. display: table;
  165. clear: both; }
  166. /* Small only */
  167. @media screen and (max-width: 39.9375em) {
  168. div#amplitude-player div#amplitude-right {
  169. width: 100%; } }
  170. div#progress-container {
  171. width: 70%;
  172. float: left;
  173. position: relative;
  174. height: 20px;
  175. cursor: pointer;
  176. /*
  177. IE 11
  178. */ }
  179. div#progress-container:hover input[type=range].amplitude-song-slider::-webkit-slider-thumb {
  180. display: block; }
  181. div#progress-container:hover input[type=range].amplitude-song-slider::-moz-range-thumb {
  182. visibility: visible; }
  183. div#progress-container progress#song-played-progress {
  184. width: 100%;
  185. position: absolute;
  186. left: 0;
  187. top: 8px;
  188. right: 0;
  189. width: 100%;
  190. z-index: 60;
  191. -webkit-appearance: none;
  192. -moz-appearance: none;
  193. appearance: none;
  194. height: 4px;
  195. border-radius: 5px;
  196. background: transparent;
  197. border: none;
  198. /* Needed for Firefox */ }
  199. @media all and (-ms-high-contrast: none) {
  200. div#progress-container *::-ms-backdrop, div#progress-container progress#song-played-progress {
  201. color: #4e4e4e;
  202. border: none;
  203. background-color: #CFD8DC; } }
  204. @supports (-ms-ime-align: auto) {
  205. div#progress-container progress#song-played-progress {
  206. color: #4e4e4e;
  207. border: none; } }
  208. div#progress-container progress#song-played-progress[value]::-webkit-progress-bar {
  209. background: none;
  210. border-radius: 5px; }
  211. div#progress-container progress#song-played-progress[value]::-webkit-progress-value {
  212. background-color: #4e4e4e;
  213. border-radius: 5px; }
  214. div#progress-container progress#song-played-progress::-moz-progress-bar {
  215. background: none;
  216. border-radius: 5px;
  217. background-color: #4e4e4e;
  218. height: 5px;
  219. margin-top: -2px; }
  220. div#progress-container progress#song-buffered-progress {
  221. position: absolute;
  222. left: 0;
  223. top: 8px;
  224. right: 0;
  225. width: 100%;
  226. z-index: 10;
  227. -webkit-appearance: none;
  228. -moz-appearance: none;
  229. appearance: none;
  230. height: 4px;
  231. border-radius: 5px;
  232. background: transparent;
  233. border: none;
  234. background-color: #D7DEE3; }
  235. div#progress-container progress#song-buffered-progress[value]::-webkit-progress-bar {
  236. background-color: #CFD8DC;
  237. border-radius: 5px; }
  238. div#progress-container progress#song-buffered-progress[value]::-webkit-progress-value {
  239. background-color: #999999;
  240. border-radius: 5px;
  241. transition: width .1s ease; }
  242. div#progress-container progress#song-buffered-progress::-moz-progress-bar {
  243. background: none;
  244. border-radius: 5px;
  245. background-color: #999999;
  246. height: 5px;
  247. margin-top: -2px; }
  248. div#progress-container progress::-ms-fill {
  249. border: none; }
  250. @-moz-document url-prefix() {
  251. div#progress-container progress#song-buffered-progress {
  252. top: 9px;
  253. border: none; } }
  254. @media all and (-ms-high-contrast: none) {
  255. div#progress-container *::-ms-backdrop, div#progress-container progress#song-buffered-progress {
  256. color: #696969;
  257. border: none; } }
  258. @supports (-ms-ime-align: auto) {
  259. div#progress-container progress#song-buffered-progress {
  260. color: #6c6c6c;
  261. border: none; } }
  262. div#progress-container input[type=range] {
  263. -webkit-appearance: none;
  264. width: 100%;
  265. margin: 7.5px 0;
  266. position: absolute;
  267. z-index: 61;
  268. top: -7px;
  269. height: 20px;
  270. cursor: pointer;
  271. background-color: inherit; }
  272. div#progress-container input[type=range]:focus {
  273. outline: none; }
  274. div#progress-container input[type=range]::-webkit-slider-runnable-track {
  275. width: 100%;
  276. height: 0px;
  277. cursor: pointer;
  278. box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  279. background: #505050;
  280. border-radius: 0px;
  281. border: 0px solid #010101; }
  282. div#progress-container input[type=range]::-webkit-slider-thumb {
  283. box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  284. border: 1px solid #4e4e4e;
  285. height: 15px;
  286. width: 15px;
  287. border-radius: 16px;
  288. background: #4e4e4e;
  289. cursor: pointer;
  290. -webkit-appearance: none;
  291. margin-top: -7.5px; }
  292. div#progress-container input[type=range]:focus::-webkit-slider-runnable-track {
  293. background: #5d5d5d; }
  294. div#progress-container input[type=range]::-moz-range-track {
  295. width: 100%;
  296. height: 0px;
  297. cursor: pointer;
  298. box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  299. background: #585858;
  300. border-radius: 0px;
  301. border: 0px solid #010101; }
  302. div#progress-container input[type=range]::-moz-range-thumb {
  303. box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  304. border: 1px solid #4e4e4e;
  305. height: 15px;
  306. width: 15px;
  307. border-radius: 16px;
  308. background: #4e4e4e;
  309. cursor: pointer; }
  310. div#progress-container input[type=range]::-ms-track {
  311. width: 100%;
  312. height: 0px;
  313. cursor: pointer;
  314. background: transparent;
  315. border-color: transparent;
  316. color: transparent; }
  317. div#progress-container input[type=range]::-ms-fill-lower {
  318. background: #686868;
  319. border: 0px solid #010101;
  320. border-radius: 0px;
  321. box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); }
  322. div#progress-container input[type=range]::-ms-fill-upper {
  323. background: #686868;
  324. border: 0px solid #010101;
  325. border-radius: 0px;
  326. box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); }
  327. div#progress-container input[type=range]::-ms-thumb {
  328. box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  329. border: 1px solid #4e4e4e;
  330. height: 15px;
  331. width: 15px;
  332. border-radius: 16px;
  333. background: #4e4e4e;
  334. cursor: pointer;
  335. height: 0px;
  336. display: block; }
  337. @media all and (-ms-high-contrast: none) {
  338. div#progress-container *::-ms-backdrop, div#progress-container input[type="range"].amplitude-song-slider {
  339. padding: 0px; }
  340. div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-thumb {
  341. height: 15px;
  342. width: 15px;
  343. border-radius: 10px;
  344. cursor: pointer;
  345. margin-top: -8px; }
  346. div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-track {
  347. border-width: 15px 0;
  348. border-color: transparent; }
  349. div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-fill-lower {
  350. background: #CFD8DC;
  351. border-radius: 10px; }
  352. div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-fill-upper {
  353. background: #CFD8DC;
  354. border-radius: 10px; } }
  355. @supports (-ms-ime-align: auto) {
  356. div#progress-container input[type=range].amplitude-song-slider::-ms-thumb {
  357. height: 15px;
  358. width: 15px;
  359. margin-top: 3px; } }
  360. div#progress-container input[type=range]:focus::-ms-fill-lower {
  361. background: #8e8e8e; }
  362. div#progress-container input[type=range]:focus::-ms-fill-upper {
  363. background: #6c6c6c; }
  364. div#control-container {
  365. margin-top: 50px; }
  366. div#control-container div#repeat-container {
  367. width: 25%;
  368. float: left;
  369. padding-top: 20px; }
  370. div#control-container div#repeat-container div#repeat {
  371. width: 24px;
  372. height: 19px;
  373. cursor: pointer; }
  374. div#control-container div#repeat-container div#repeat.amplitude-repeat-off {
  375. background: url("/img/audio/repeat-off.svg"); }
  376. div#control-container div#repeat-container div#repeat.amplitude-repeat-on {
  377. background: url("/img/audio/repeat-on.svg"); }
  378. div#control-container div#repeat-container div#shuffle {
  379. width: 23px;
  380. height: 19px;
  381. cursor: pointer;
  382. float: right; }
  383. div#control-container div#repeat-container div#shuffle.amplitude-shuffle-off {
  384. background: url("/img/audio/shuffle-off.svg"); }
  385. div#control-container div#repeat-container div#shuffle.amplitude-shuffle-on {
  386. background: url("/img/audio/shuffle-on.svg"); }
  387. @media all and (-ms-high-contrast: none) {
  388. div#control-container *::-ms-backdrop, div#control-container div#control-container {
  389. margin-top: 40px;
  390. float: none; } }
  391. div#control-container div#central-control-container {
  392. width: 50%;
  393. float: left; }
  394. div#control-container div#central-control-container div#central-controls {
  395. width: 130px;
  396. margin: auto; }
  397. div#control-container div#central-control-container div#central-controls div#previous {
  398. display: inline-block;
  399. width: 40px;
  400. height: 40px;
  401. cursor: pointer;
  402. background: url("/img/audio/prev.svg");
  403. background-repeat: no-repeat;
  404. float: left;
  405. margin-top: 10px;
  406. margin-right: -5px; }
  407. div#control-container div#central-control-container div#central-controls div#play-pause {
  408. display: inline-block;
  409. width: 60px;
  410. height: 60px;
  411. cursor: pointer;
  412. float: left; }
  413. div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-paused {
  414. background: url("/img/audio/play.svg"); }
  415. div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-playing {
  416. background: url("/img/audio/pause.svg"); }
  417. div#control-container div#central-control-container div#central-controls div#next {
  418. display: inline-block;
  419. width: 40px;
  420. height: 40px;
  421. cursor: pointer;
  422. background: url("/img/audio/next.svg");
  423. background-repeat: no-repeat;
  424. float: left;
  425. margin-top: 10px;
  426. margin-left: -5px; }
  427. div#control-container div#volume-container {
  428. width: 25%;
  429. float: left;
  430. padding-top: 20px; }
  431. div#control-container div#volume-container div#shuffle-right {
  432. width: 23px;
  433. height: 19px;
  434. cursor: pointer;
  435. margin: auto; }
  436. div#control-container div#volume-container div#shuffle-right.amplitude-shuffle-off {
  437. background: url("/img/audio/shuffle-off.svg"); }
  438. div#control-container div#volume-container div#shuffle-right.amplitude-shuffle-on {
  439. background: url("/img/audio/shuffle-on.svg"); }
  440. div#control-container div.amplitude-mute {
  441. cursor: pointer;
  442. width: 25px;
  443. height: 19px;
  444. float: left; }
  445. div#control-container div.amplitude-mute.amplitude-not-muted {
  446. background: url("/img/audio/volume.svg");
  447. background-repeat: no-repeat; }
  448. div#control-container div.amplitude-mute.amplitude-muted {
  449. background: url("/img/audio/mute.svg");
  450. background-repeat: no-repeat; }
  451. div#control-container:after {
  452. content: "";
  453. display: table;
  454. clear: both; }
  455. /* Small only */
  456. @media screen and (max-width: 39.9375em) {
  457. div#amplitude-player div#repeat-container div#repeat {
  458. margin-left: auto;
  459. margin-right: auto;
  460. float: none; }
  461. div#amplitude-player div#repeat-container div#shuffle {
  462. display: none; }
  463. div#amplitude-player div#volume-container div.volume-controls {
  464. display: none; }
  465. div#amplitude-player div#volume-container div#shuffle-right {
  466. display: block; } }
  467. /* Medium only */
  468. @media screen and (min-width: 40em) and (max-width: 63.9375em) {
  469. div#amplitude-player div#repeat-container div#repeat {
  470. margin-left: auto;
  471. margin-right: auto;
  472. float: none; }
  473. div#amplitude-player div#repeat-container div#shuffle {
  474. display: none; }
  475. div#amplitude-player div#volume-container div.volume-controls {
  476. display: none; }
  477. div#amplitude-player div#volume-container div#shuffle-right {
  478. display: block; } }
  479. /* Large and up */
  480. @media screen and (min-width: 64em) {
  481. div#amplitude-player div#repeat-container div#repeat {
  482. margin-left: 10px;
  483. margin-right: 20px;
  484. float: left; }
  485. div#amplitude-player div#volume-container div#shuffle-right {
  486. display: none; } }
  487. input[type=range].amplitude-volume-slider {
  488. -webkit-appearance: none;
  489. width: calc( 100% - 33px);
  490. float: left;
  491. margin-top: 10px;
  492. margin-left: 5px; }
  493. @-moz-document url-prefix() {
  494. input[type=range].amplitude-volume-slider {
  495. margin-top: 0px; } }
  496. @supports (-ms-ime-align: auto) {
  497. input[type=range].amplitude-volume-slider {
  498. margin-top: 3px;
  499. height: 12px;
  500. background-color: rgba(255, 255, 255, 0) !important;
  501. z-index: 999;
  502. position: relative; }
  503. div.ms-range-fix {
  504. height: 1px;
  505. background-color: #A9A9A9;
  506. width: 67%;
  507. float: right;
  508. margin-top: -6px;
  509. z-index: 9;
  510. position: relative; } }
  511. @media all and (-ms-high-contrast: none) {
  512. *::-ms-backdrop, input[type=range].amplitude-volume-slider {
  513. margin-top: -24px;
  514. background-color: rgba(255, 255, 255, 0) !important; } }
  515. input[type=range].amplitude-volume-slider:focus {
  516. outline: none; }
  517. input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
  518. width: 75%;
  519. height: 1px;
  520. cursor: pointer;
  521. animate: 0.2s;
  522. background: #CFD8DC; }
  523. input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
  524. height: 10px;
  525. width: 10px;
  526. border-radius: 10px;
  527. background: #4e4e4e;
  528. cursor: pointer;
  529. margin-top: -4px;
  530. -webkit-appearance: none; }
  531. input[type=range].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
  532. background: #CFD8DC; }
  533. input[type=range].amplitude-volume-slider::-moz-range-track {
  534. width: 100%;
  535. height: 1px;
  536. cursor: pointer;
  537. animate: 0.2s;
  538. background: #CFD8DC; }
  539. input[type=range].amplitude-volume-slider::-moz-range-thumb {
  540. height: 10px;
  541. width: 10px;
  542. border-radius: 10px;
  543. background: #4e4e4e;
  544. cursor: pointer;
  545. margin-top: -4px; }
  546. input[type=range].amplitude-volume-slider::-ms-track {
  547. width: 100%;
  548. height: 1px;
  549. cursor: pointer;
  550. animate: 0.2s;
  551. background: transparent;
  552. /*leave room for the larger thumb to overflow with a transparent border */
  553. border-color: transparent;
  554. border-width: 15px 0;
  555. /*remove default tick marks*/
  556. color: transparent; }
  557. input[type=range].amplitude-volume-slider::-ms-fill-lower {
  558. background: #CFD8DC;
  559. border-radius: 10px; }
  560. input[type=range].amplitude-volume-slider::-ms-fill-upper {
  561. background: #CFD8DC;
  562. border-radius: 10px; }
  563. input[type=range].amplitude-volume-slider::-ms-thumb {
  564. height: 10px;
  565. width: 10px;
  566. border-radius: 10px;
  567. background: #4e4e4e;
  568. cursor: pointer;
  569. margin-top: 2px; }
  570. input[type=range].amplitude-volume-slider:focus::-ms-fill-lower {
  571. background: #CFD8DC; }
  572. input[type=range].amplitude-volume-slider:focus::-ms-fill-upper {
  573. background: #CFD8DC; }
  574. input[type=range].amplitude-volume-slider::-ms-tooltip {
  575. display: none; }
  576. div#time-container {
  577. padding-top:15px
  578. }
  579. div#time-container span.current-time {
  580. color: #607D8B;
  581. font-size: 14px;
  582. font-weight: 700;
  583. float: left;
  584. width: 15%;
  585. text-align: center; }
  586. div#time-container span.duration {
  587. color: #607D8B;
  588. font-size: 14px;
  589. font-weight: 700;
  590. float: left;
  591. width: 15%;
  592. text-align: center; }
  593. div#time-container:after {
  594. content: "";
  595. display: table;
  596. clear: both; }
  597. div#meta-container {
  598. text-align: center;
  599. margin-top: 5px; }
  600. div#meta-container span.song-name {
  601. display: block;
  602. color: #272726;
  603. font-size: 20px;
  604. font-family: 'Open Sans', sans-serif;
  605. white-space: nowrap;
  606. overflow: hidden;
  607. text-overflow: ellipsis; }
  608. div#meta-container div.song-artist-album {
  609. color: #636363;
  610. font-size: 14px;
  611. font-weight: 700;
  612. font-family: 'Open Sans', sans-serif;
  613. white-space: nowrap;
  614. overflow: hidden;
  615. text-overflow: ellipsis; }
  616. div#meta-container div.song-artist-album span {
  617. display: block; }
  618. /*
  619. 3. Layout
  620. */
  621. body {
  622. background-image: -webkit-linear-gradient(316deg, #3d3d3d 0%, #e9e9e9 100%);
  623. background-image: linear-gradient(-226deg, #757575 0%, #cbcbcb 100%);
  624. height: 100vh;
  625. -webkit-font-smoothing: antialiased;
  626. font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  627. line-height: 1.5;
  628. }
  629. div.amplitude-wave-form{
  630. margin-top: -65px;
  631. }
  632. div.amplitude-wave-form svg{
  633. stroke: #5f5f5f;
  634. height: 150px;
  635. width: 100%;
  636. stroke-width: .5px;
  637. }
  638. div.amplitude-wave-form svg g{
  639. stroke: #6a6a6a;
  640. height: 50px;
  641. width: 100%;
  642. }
  643. div.amplitude-wave-form svg g path{
  644. stroke: #5c5c5c;
  645. height: 50px;
  646. width: 100%;
  647. }
  648. div#large-visualization{
  649. width: 100%;
  650. background-color: black;
  651. visibility: hidden;
  652. }