waveform-playlist.css 5.1 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  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. box-sizing: border-box; }
  109. .playlist .annotations .annotation-box .resize-handle {
  110. background: grey;
  111. opacity: 0.3;
  112. cursor: ew-resize; }
  113. .playlist .annotations .annotation-box .id {
  114. cursor: pointer;
  115. display: inline-block;
  116. width: 100%;
  117. height: 100%; }
  118. .playlist .annotations .annotations-text {
  119. font-size: 19px;
  120. font-weight: 300;
  121. margin-top: 1em;
  122. height: 160px;
  123. overflow-x: hidden;
  124. overflow-y: auto; }
  125. .playlist .annotations .annotations-text .annotation {
  126. display: flex;
  127. flex-direction: row;
  128. flex-wrap: nowrap;
  129. justify-content: flex-start;
  130. align-items: stretch; }
  131. .playlist .annotations .annotations-text .annotation span {
  132. margin: 0.3rem 0.6rem; }
  133. .playlist .annotations .annotations-text .annotation span:last-of-type {
  134. margin-right: 1.2rem; }
  135. .playlist .annotations .annotations-text .annotation .annotation-id {
  136. font-size: 16px;
  137. line-height: 27px; }
  138. .playlist .annotations .annotations-text .annotation .annotation-start {
  139. font-size: 16px;
  140. line-height: 27px; }
  141. .playlist .annotations .annotations-text .annotation .annotation-end {
  142. font-size: 16px;
  143. line-height: 27px; }
  144. .playlist .annotations .annotations-text .annotation .annotation-lines {
  145. flex-grow: 10; }
  146. .playlist .annotations .annotations-text .annotation .annotation-actions {
  147. flex-basis: auto;
  148. width: 80px;
  149. text-align: right;
  150. font-size: 16px; }
  151. .playlist .annotations .annotations-text .annotation .annotation-actions i {
  152. margin-right: 0.6rem; }
  153. .playlist .annotations .annotations-text .annotation .annotation-actions i:last-of-type {
  154. margin-right: 0; }
  155. .playlist .annotations .annotations-text .annotation .annotation-actions i:hover {
  156. color: orange;
  157. cursor: pointer; }
  158. .playlist .annotations .current {
  159. background-color: #EBF4F6; }