bookmark-audio-fragment/app/assets/ waveform-playlist.css
161 lines
5.1 KiB

  1. .playlist {
  2. margin: 2em 0; }
  3. .playlist .playlist-time-scale {
  4. height: 30px; }
  5. .playlist .playlist-tracks {
  6. background: #E0EFF1; }
  7. .playlist .channel {
  8. background: grey; }
  9. .playlist .channel-progress {
  10. background: orange; }
  11. .playlist .cursor {
  12. background: black; }
  13. .playlist .wp-fade {
  14. background-color: rgba(0, 0, 0, 0.1); }
  15. .playlist .state-cursor,
  16. .playlist .state-select {
  17. cursor: text; }
  18. .playlist .state-fadein {
  19. cursor: w-resize; }
  20. .playlist .state-fadeout {
  21. cursor: e-resize; }
  22. .playlist .state-shift {
  23. cursor: ew-resize; }
  24. .playlist .selection.point {
  25. background: red; }
  26. .playlist .selection.segment {
  27. background: rgba(0, 0, 0, 0.1); }
  28. .playlist .channel-wrapper.silent .channel {
  29. opacity: 0.3; }
  30. .playlist .controls {
  31. background: white;
  32. text-align: center; }
  33. .playlist .controls header {
  34. overflow: hidden;
  35. color: white;
  36. background-color: blueviolet;
  37. margin-bottom: 1em;
  38. height: 20px; }
  39. .playlist .controls label {
  40. margin: 1em auto;
  41. width: 100%;
  42. display: inline-block;
  43. font: normal normal normal 14px/1 FontAwesome;
  44. font-size: inherit;
  45. text-rendering: auto;
  46. -webkit-font-smoothing: antialiased;
  47. -moz-osx-font-smoothing: grayscale;
  48. transform: translate(0, 0); }
  49. .playlist .controls label:before {
  50. content: "\f027";
  51. color: black;
  52. font-size: 18px;
  53. padding-right: 5px;
  54. -moz-osx-font-smoothing: grayscale; }
  55. .playlist .controls label:after {
  56. content: "\f028";
  57. color: black;
  58. font-size: 18px;
  59. padding-left: 5px; }
  60. .playlist .controls input[type=range] {
  61. -webkit-appearance: none;
  62. -moz-appearance: none;
  63. appearance: none;
  64. display: inline-block;
  65. width: 75%; }
  66. .playlist .controls input[type=range]::-webkit-slider-runnable-track {
  67. height: 8px;
  68. background: #ddd;
  69. border: none;
  70. border-radius: 3px;
  71. padding: 1px; }
  72. .playlist .controls input[type=range]::-moz-range-track {
  73. height: 8px;
  74. background: #ddd;
  75. border: none;
  76. border-radius: 3px;
  77. padding: 1px; }
  78. .playlist .controls input[type=range]::-webkit-slider-thumb {
  79. -webkit-appearance: none;
  80. -moz-appearance: none;
  81. appearance: none;
  82. border: none;
  83. height: 16px;
  84. width: 16px;
  85. border-radius: 50%;
  86. background: goldenrod;
  87. margin-top: -5px;
  88. cursor: ew-resize; }
  89. .playlist .controls input[type=range]::-moz-range-thumb {
  90. border: none;
  91. height: 16px;
  92. width: 16px;
  93. border-radius: 50%;
  94. background: goldenrod;
  95. margin-top: -5px;
  96. cursor: ew-resize; }
  97. .playlist .controls input[type=range]:focus {
  98. outline: none; }
  99. .playlist .controls input[type=range]:focus::-webkit-slider-runnable-track {
  100. background: #ccc; }
  101. .playlist .controls input[type=range]:focus::-moz-range-track {
  102. background: #ccc; }
  103. .playlist .annotations .annotations-boxes {
  104. text-align: center; }
  105. .playlist .annotations .annotation-box {
  106. border: 2px dashed grey;
  107. padding: 0 10px; }
  108. .playlist .annotations .annotation-box .resize-handle {
  109. background: grey;
  110. opacity: 0.3;
  111. cursor: ew-resize; }
  112. .playlist .annotations .annotation-box .id {
  113. cursor: pointer;
  114. display: inline-block;
  115. width: 100%;
  116. height: 100%; }
  117. .playlist .annotations .annotations-text {
  118. font-size: 19px;
  119. font-weight: 300;
  120. margin-top: 1em;
  121. height: 160px;
  122. overflow-x: hidden;
  123. overflow-y: auto; }
  124. .playlist .annotations .annotations-text .annotation {
  125. display: flex;
  126. flex-direction: row;
  127. flex-wrap: nowrap;
  128. justify-content: flex-start;
  129. align-items: stretch; }
  130. .playlist .annotations .annotations-text .annotation span {
  131. margin: 0.3rem 0.6rem; }
  132. .playlist .annotations .annotations-text .annotation span:last-of-type {
  133. margin-right: 1.2rem; }
  134. .playlist .annotations .annotations-text .annotation .annotation-id {
  135. font-size: 16px;
  136. line-height: 27px; }
  137. .playlist .annotations .annotations-text .annotation .annotation-start {
  138. font-size: 16px;
  139. line-height: 27px; }
  140. .playlist .annotations .annotations-text .annotation .annotation-end {
  141. font-size: 16px;
  142. line-height: 27px; }
  143. .playlist .annotations .annotations-text .annotation .annotation-lines {
  144. flex-grow: 10; }
  145. .playlist .annotations .annotations-text .annotation .annotation-actions {
  146. flex-basis: auto;
  147. width: 80px;
  148. text-align: right;
  149. font-size: 16px; }
  150. .playlist .annotations .annotations-text .annotation .annotation-actions i {
  151. margin-right: 0.6rem; }
  152. .playlist .annotations .annotations-text .annotation .annotation-actions i:last-of-type {
  153. margin-right: 0; }
  154. .playlist .annotations .annotations-text .annotation .annotation-actions i:hover {
  155. color: orange;
  156. cursor: pointer; }
  157. .playlist .annotations .current {
  158. background-color: #EBF4F6; }
  159. /*# sourceMappingURL=test.css.map */