bookmark-audio-fragment/app/assets/ main.css
270 lines
4.8 KiB

  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. background: none;
  89. border: none;
  90. font-size: 1em;
  91. padding: 4px 20px;
  92. }
  93. .context-menu button:hover {
  94. background: #dddddd99;
  95. }
  96. .playlist .channel {
  97. background: #aaa;
  98. }
  99. .playlist .channel-progress {
  100. background: none;
  101. }
  102. .playlist .selection.point {
  103. width: 2px !important;
  104. transform: translateX(-0.5px); /* Correct for the extra 1px of width we add. */
  105. }
  106. .playlist .selection.point::after {
  107. /* Draw a triangle at the bottom */
  108. content: '';
  109. position: absolute;
  110. width: 0;
  111. height: 0;
  112. bottom: 0;
  113. left: -5px;
  114. border-left: 6px solid transparent;
  115. border-right: 6px solid transparent;
  116. border-bottom: 6px solid #f00;
  117. }
  118. .playlist .selection.segment {
  119. background: #f006;
  120. border-left: 2px solid red;
  121. border-right: 2px solid red;
  122. box-sizing: border-box;
  123. }
  124. .playlist .selection.segment:before {
  125. /* Draw a triangle at the bottom */
  126. content: '';
  127. position: absolute;
  128. width: 0;
  129. height: 0;
  130. bottom: 0;
  131. left: -7px;
  132. border-left: 6px solid transparent;
  133. border-right: 6px solid transparent;
  134. border-bottom: 6px solid red;
  135. }
  136. .playlist .selection.segment:after {
  137. /* Draw a triangle at the bottom */
  138. content: '';
  139. position: absolute;
  140. width: 0;
  141. height: 0;
  142. bottom: 0;
  143. right: -7px;
  144. border-left: 6px solid transparent;
  145. border-right: 6px solid transparent;
  146. border-bottom: 6px solid red;
  147. }
  148. .playlist .playlist-time-scale {
  149. color: #666;
  150. font-family: sans-serif;
  151. font-size: smaller;
  152. }
  153. .playlist .cursor {
  154. width: 2px !important;
  155. transform: translateX(-0.5px); /* Correct for the extra 1px of width we add. */
  156. background: #666;
  157. }
  158. .playlist .cursor::after {
  159. /* Draw a triangle at the bottom */
  160. content: '';
  161. position: absolute;
  162. width: 0;
  163. height: 0;
  164. bottom: 0;
  165. left: -5px;
  166. border-left: 6px solid transparent;
  167. border-right: 6px solid transparent;
  168. border-bottom: 6px solid #666;
  169. }
  170. .playlist .annotations .annotations-text {
  171. display: none;
  172. }
  173. .playlist .annotations a.annotation-box {
  174. color: unset;
  175. text-decoration: unset;
  176. }
  177. .playlist .annotations .annotation-box {
  178. background: #ffff0099;
  179. border: 1px solid #ff8800;
  180. border-radius: 2px;
  181. padding: 0;
  182. z-index: 3;
  183. }
  184. .playlist .annotations .annotation-box .id {
  185. overflow: hidden;
  186. text-overflow: ellipsis;
  187. white-space: nowrap;
  188. padding: 0 10px;
  189. box-sizing: border-box;
  190. }
  191. .playlist .annotations .annotation-box .resize-handle {
  192. display: none;
  193. }
  194. .playlist .annotations .annotation-box.segment-annotation {
  195. border-top: none;
  196. border-left: 2px solid #ff8800;
  197. border-right: 2px solid #ff8800;
  198. border-top-left-radius: 0;
  199. border-top-right-radius: 0;
  200. }
  201. .playlist .annotations .annotation-box.point-annotation::before {
  202. /* Draw a triangle at the top */
  203. content: '';
  204. position: absolute;
  205. left: 7px;
  206. top: -7px;
  207. width: 0;
  208. height: 0;
  209. border-left: 6px solid transparent;
  210. border-right: 6px solid transparent;
  211. border-bottom: 6px solid #ff8800;
  212. }
  213. .playlist .annotations .annotation-box.segment-annotation::before {
  214. /* Draw a triangle at the top */
  215. content: '';
  216. position: absolute;
  217. left: -7px;
  218. top: -6px;
  219. width: 0;
  220. height: 0;
  221. border-left: 6px solid transparent;
  222. border-right: 6px solid transparent;
  223. border-bottom: 6px solid #ff8800;
  224. }
  225. .playlist .annotations .annotation-box.segment-annotation::after {
  226. /* Draw a triangle at the top */
  227. content: '';
  228. position: absolute;
  229. right: -7px;
  230. top: -6px;
  231. width: 0;
  232. height: 0;
  233. border-left: 6px solid transparent;
  234. border-right: 6px solid transparent;
  235. border-bottom: 6px solid #ff8800;
  236. }