main.css 4.9 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. body {
  2. all: unset;
  3. min-height: 100vh;
  4. display: flex;
  5. justify-content: center;
  6. align-items: center;
  7. user-select: none;
  8. }
  9. main {
  10. flex-grow: 1;
  11. display: flex;
  12. }
  13. #controls {
  14. margin: 20px;
  15. display: flex;
  16. flex-flow: column;
  17. justify-content: center;
  18. align-items: center;
  19. }
  20. #container {
  21. flex-grow: 1;
  22. margin: 20px;
  23. }
  24. ::-moz-focus-inner {
  25. border: none;
  26. }
  27. button#playpause {
  28. border: none;
  29. background: none;
  30. cursor: pointer;
  31. font-size: 64px;
  32. margin: 8px;
  33. vertical-align: middle;
  34. transition: all 50ms;
  35. }
  36. button#playpause:hover,
  37. button#playpause:focus {
  38. filter: brightness(120%);
  39. outline: none;
  40. }
  41. button#playpause:active {
  42. transform: translate(1px, 1px);
  43. }
  44. label#volume-label {
  45. font-size: 30px;
  46. vertical-align: middle;
  47. }
  48. input#volume {
  49. vertical-align: middle;
  50. width: 80px;
  51. height: 30px;
  52. border-radius: 3px;
  53. background: #eee;
  54. cursor: pointer;
  55. -webkit-appearance: none;
  56. }
  57. input#volume::-moz-range-thumb {
  58. height: 30px;
  59. width: 20px;
  60. background-color: #999;
  61. border-radius: 3px;
  62. border: none;
  63. }
  64. input#volume::-webkit-slider-thumb {
  65. height: 30px;
  66. width: 20px;
  67. background-color: #999;
  68. border-radius: 3px;
  69. -webkit-appearance: none;
  70. }
  71. input#volume:hover,
  72. input#volume:focus {
  73. filter: brightness(102%);
  74. outline: none;
  75. }
  76. .context-menu {
  77. list-style: none;
  78. margin: 0;
  79. padding: 0;
  80. position: absolute;
  81. z-index: 9999999;
  82. border: 1px solid #999999;
  83. border-radius: 2px;
  84. box-shadow: 2px 2px 6px #66666633;
  85. background: #fcfcfc;
  86. }
  87. .context-menu button {
  88. width: 100%;
  89. text-align: unset;
  90. background: none;
  91. border: none;
  92. font-size: 1em;
  93. padding: 4px 20px;
  94. }
  95. .context-menu button:hover,
  96. .context-menu button:focus {
  97. background: #dddddd99;
  98. }
  99. .playlist .channel {
  100. background: #aaa;
  101. }
  102. .playlist .channel-progress {
  103. background: none;
  104. }
  105. .playlist .state-cursor {
  106. cursor: default;
  107. }
  108. .playlist .selection.point {
  109. width: 2px !important;
  110. transform: translateX(-0.5px); /* Correct for the extra 1px of width we add. */
  111. }
  112. .playlist .selection.point::after {
  113. /* Draw a triangle at the bottom */
  114. content: '';
  115. position: absolute;
  116. width: 0;
  117. height: 0;
  118. bottom: 0;
  119. left: -5px;
  120. border-left: 6px solid transparent;
  121. border-right: 6px solid transparent;
  122. border-bottom: 6px solid #f00;
  123. }
  124. .playlist .selection.segment {
  125. background: #f006;
  126. border-left: 2px solid red;
  127. border-right: 2px solid red;
  128. box-sizing: border-box;
  129. }
  130. .playlist .selection.segment:before {
  131. /* Draw a triangle at the bottom */
  132. content: '';
  133. position: absolute;
  134. width: 0;
  135. height: 0;
  136. bottom: 0;
  137. left: -7px;
  138. border-left: 6px solid transparent;
  139. border-right: 6px solid transparent;
  140. border-bottom: 6px solid red;
  141. }
  142. .playlist .selection.segment:after {
  143. /* Draw a triangle at the bottom */
  144. content: '';
  145. position: absolute;
  146. width: 0;
  147. height: 0;
  148. bottom: 0;
  149. right: -7px;
  150. border-left: 6px solid transparent;
  151. border-right: 6px solid transparent;
  152. border-bottom: 6px solid red;
  153. }
  154. .playlist .playlist-time-scale {
  155. color: #666;
  156. font-family: sans-serif;
  157. font-size: smaller;
  158. }
  159. .playlist .cursor {
  160. width: 2px !important;
  161. transform: translateX(-0.5px); /* Correct for the extra 1px of width we add. */
  162. background: #666;
  163. }
  164. .playlist .cursor::after {
  165. /* Draw a triangle at the bottom */
  166. content: '';
  167. position: absolute;
  168. width: 0;
  169. height: 0;
  170. bottom: 0;
  171. left: -5px;
  172. border-left: 6px solid transparent;
  173. border-right: 6px solid transparent;
  174. border-bottom: 6px solid #666;
  175. }
  176. .playlist .annotations .annotations-text {
  177. display: none;
  178. }
  179. .playlist .annotations a.annotation-box {
  180. color: unset;
  181. text-decoration: unset;
  182. }
  183. .playlist .annotations .annotation-box {
  184. background: #ffff0099;
  185. border: 1px solid #ff8800;
  186. border-radius: 2px;
  187. padding: 0;
  188. z-index: 3;
  189. }
  190. .playlist .annotations .annotation-box .id {
  191. overflow: hidden;
  192. text-overflow: ellipsis;
  193. white-space: nowrap;
  194. padding: 0 10px;
  195. box-sizing: border-box;
  196. }
  197. .playlist .annotations .annotation-box .resize-handle {
  198. display: none;
  199. }
  200. .playlist .annotations .annotation-box.segment-annotation {
  201. border-top: none;
  202. border-left: 2px solid #ff8800;
  203. border-right: 2px solid #ff8800;
  204. border-top-left-radius: 0;
  205. border-top-right-radius: 0;
  206. }
  207. .playlist .annotations .annotation-box.point-annotation::before {
  208. /* Draw a triangle at the top */
  209. content: '';
  210. position: absolute;
  211. left: 7px;
  212. top: -7px;
  213. width: 0;
  214. height: 0;
  215. border-left: 6px solid transparent;
  216. border-right: 6px solid transparent;
  217. border-bottom: 6px solid #ff8800;
  218. }
  219. .playlist .annotations .annotation-box.segment-annotation::before {
  220. /* Draw a triangle at the top */
  221. content: '';
  222. position: absolute;
  223. left: -7px;
  224. top: -6px;
  225. width: 0;
  226. height: 0;
  227. border-left: 6px solid transparent;
  228. border-right: 6px solid transparent;
  229. border-bottom: 6px solid #ff8800;
  230. }
  231. .playlist .annotations .annotation-box.segment-annotation::after {
  232. /* Draw a triangle at the top */
  233. content: '';
  234. position: absolute;
  235. right: -7px;
  236. top: -6px;
  237. width: 0;
  238. height: 0;
  239. border-left: 6px solid transparent;
  240. border-right: 6px solid transparent;
  241. border-bottom: 6px solid #ff8800;
  242. }