wip

src/app.css

@@ -19,14 +19,6 @@ button {
   @apply cursor-default focus:outline-none;
 }
 
-iframe {
-  height: auto !important;
-}
-
-span[data-slate-placeholder] {
-  margin-top: 0;
-}
-
 input::-ms-reveal,
 input::-ms-clear {
   display: none;
@@ -40,13 +32,20 @@ input::-ms-clear {
   background-clip: padding-box;
 }
 
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
+.player {
+  --brand-color: #f5f5f5;
+  --focus-color: #4e9cf6;
+  --audio-brand: var(--brand-color);
+  --audio-focus-ring-color: var(--focus-color);
+  --audio-border-radius: 2px;
+  --video-brand: var(--brand-color);
+  --video-focus-ring-color: var(--focus-color);
+  --video-border-radius: 8px;
+  width: 100%;
 }
 
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+.player[data-view-type='video'] {
+  aspect-ratio: 16 /9;
 }
 
 .ProseMirror p.is-empty::before {
@@ -60,33 +59,3 @@ input::-ms-clear {
 .ProseMirror img.ProseMirror-selectednode {
   @apply outline-fuchsia-500;
 }
-
-.player {
-  --brand-color: #f5f5f5;
-  --focus-color: #4e9cf6;
-
-  --audio-brand: var(--brand-color);
-  --audio-focus-ring-color: var(--focus-color);
-  --audio-border-radius: 2px;
-
-  --video-brand: var(--brand-color);
-  --video-focus-ring-color: var(--focus-color);
-  --video-border-radius: 8px;
-
-  /* 👉 https://vidstack.io/docs/player/components/layouts/default#css-variables for more. */
-
-  width: 100%;
-}
-
-.player[data-view-type='video'] {
-  aspect-ratio: 16 /9;
-}
-
-.src-buttons {
-  display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-  margin-top: 40px;
-  margin-inline: auto;
-  max-width: 300px;
-}