fix(tavoo): WebKitでのズレを修正

WebKitではCSSネストを使えない
aznhe21 · Sep 4, 2023 · ec49d22 · ec49d22
1 parent 4c2d0f4
commit ec49d22
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 167 deletions.
diff --git a/crates/tavoo/omni/player/skin/caption.css b/crates/tavoo/omni/player/skin/caption.css
@@ -7,50 +7,42 @@
   display: none;
 }
 
-.background {
-  /** 背景 */
-  & rect {
-    shape-rendering: crispEdges;
-    fill: var(--caption-color-8);
-  }
+/** 背景 */
+.background rect {
+  shape-rendering: crispEdges;
+  fill: var(--caption-color-8);
+}
 
-  /** 囲み */
-  & polygon {
-    shape-rendering: crispEdges;
-    fill: var(--caption-color-7);
-  }
+/** 囲み */
+.background polygon {
+  shape-rendering: crispEdges;
+  fill: var(--caption-color-7);
 }
 
-.foreground {
-  & text {
-    font-family: "丸ゴシック", monospace;
-    dominant-baseline: text-before-edge;
-    stroke-width: 4;
-    stroke-linejoin: round;
-    paint-order: stroke;
+.foreground text {
+  font-family: "丸ゴシック", monospace;
+  dominant-baseline: text-before-edge;
+  stroke-width: 4;
+  stroke-linejoin: round;
+  paint-order: stroke;
 
-    fill: var(--caption-color-7);
-    stroke: var(--caption-color-8);
-  }
+  fill: var(--caption-color-7);
+  stroke: var(--caption-color-8);
+}
 
-  & image {
-    image-rendering: pixelated;
-  }
+.foreground image {
+  image-rendering: pixelated;
+}
 
-  & *[caption-flushing="normal"] {
-    animation: 1s step-end infinite flushing;
-  }
-  & *[caption-flushing="inverted"] {
-    animation: 1s step-start infinite flushing;
-  }
+.foreground *[caption-flushing="normal"] {
+  animation: 1s step-end infinite flushing;
+}
+.foreground *[caption-flushing="inverted"] {
+  animation: 1s step-start infinite flushing;
 }
 
-.screen[caption-caption-format="profile-c"] {
-  .foreground {
-    & text {
-      stroke-width: 2;
-    }
-  }
+.screen[caption-caption-format="profile-c"] .foreground text {
+  stroke-width: 2;
 }
 
 @keyframes flushing {

diff --git a/crates/tavoo/omni/player/skin/default.css b/crates/tavoo/omni/player/skin/default.css
@@ -46,39 +46,39 @@
   background: black;
   height: var(--seekbar-height);
   line-height: 1;
+}
 
-  #seekbar {
-    flex: 1;
+#seekbar {
+  flex: 1;
+}
 
-    &::part(slider) {
-      background: gray;
-    }
+#seekbar::part(slider) {
+  background: gray;
+}
 
-    &::part(progress) {
-      background: dodgerblue;
-    }
+#seekbar::part(progress) {
+  background: dodgerblue;
+}
 
-    &::part(scrubber) {
-      background: white;
-    }
-  }
+#seekbar::part(scrubber) {
+  background: white;
+}
 
-  #position, #duration {
-    flex: none;
-    white-space: pre;
-    user-select: none;
-    font-size: var(--time-font-size);
-    margin-top: calc((var(--seekbar-height) - var(--time-font-size)) / 2);
-  }
+#position, #duration {
+  flex: none;
+  white-space: pre;
+  user-select: none;
+  font-size: var(--time-font-size);
+  margin-top: calc((var(--seekbar-height) - var(--time-font-size)) / 2);
+}
 
-  #position {
-    color: white;
-  }
+#position {
+  color: white;
+}
 
-  #duration {
-    color: darkgray;
-    margin-right: 4px;
-  }
+#duration {
+  color: darkgray;
+  margin-right: 4px;
 }
 
 #controls {
@@ -89,80 +89,81 @@
   background: white;
   height: var(--control-size);
   line-height: var(--control-size);
+}
+
+#controls button {
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  text-align: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  cursor: default;
+  line-height: inherit;
+  width: var(--control-size);
+  height: var(--control-size);
+}
+
+#play {
+  flex: none;
+}
+
+#stop {
+  flex: none;
+}
+
+#mute {
+  flex: none;
+}
+
+#volume {
+  flex: none;
+  width: 100px;
+  height: 12px;
+  margin: calc((28px - 12px) / 2) 0 0 0;
+}
+
+#volume::part(slider) {
+  background: lightgray;
+}
+
+#playback-rate {
+  flex: none;
+  width: 60px;
+}
+
+#playback-rate > option:disabled {
+  display: none;
+}
+
+#caption-display {
+  flex: none;
+  padding-right: 6px;
+  display: flex;
+  align-items: baseline;
+}
+
+#video-streams {
+  flex: none;
+  font-size: 12px;
+  width: 120px;
+  text-overflow: ellipsis;
+}
+
+#audio-streams {
+  flex: none;
+  font-size: 12px;
+  width: 120px;
+  text-overflow: ellipsis;
+}
+
+#services {
+  flex: auto;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  width: 0;
+}
 
-  & button {
-    border: none;
-    background-color: transparent;
-    color: inherit;
-    text-align: inherit;
-    font-size: 100%;
-    font-family: inherit;
-    cursor: default;
-    line-height: inherit;
-    width: var(--control-size);
-    height: var(--control-size);
-  }
-
-  #play {
-    flex: none;
-  }
-
-  #stop {
-    flex: none;
-  }
-
-  #mute {
-    flex: none;
-  }
-
-  #volume {
-    flex: none;
-    width: 100px;
-    height: 12px;
-    margin: calc((28px - 12px) / 2) 0 0 0;
-
-    &::part(slider) {
-      background: lightgray;
-    }
-  }
-
-  #playback-rate {
-    flex: none;
-    width: 60px;
-
-    & > option:disabled {
-      display: none;
-    }
-  }
-
-  #caption-display {
-    flex: none;
-    padding-right: 6px;
-    display: flex;
-  }
-
-  #video-streams {
-    flex: none;
-    font-size: 12px;
-    width: 120px;
-    text-overflow: ellipsis;
-  }
-
-  #audio-streams {
-    flex: none;
-    font-size: 12px;
-    width: 120px;
-    text-overflow: ellipsis;
-  }
-
-  #services {
-    flex: auto;
-    font-size: 12px;
-    text-overflow: ellipsis;
-    width: 0;
-
-    & > option:disabled {
-      display: none;
-    }
-  }
+#services > option:disabled {
+  display: none;
 }
diff --git a/crates/tavoo/omni/player/skin/slider.css b/crates/tavoo/omni/player/skin/slider.css
@@ -10,38 +10,38 @@
   overflow: hidden;
   position: relative;
   height: 100%;
+}
 
-  #slider {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: var(--thumb-size);
-    right: var(--thumb-size);
-    margin: auto;
-    height: var(--bar-height);
-    border-radius: var(--progress-radius);
-    background-color: white;
-    pointer-events: none;
+#slider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--thumb-size);
+  right: var(--thumb-size);
+  margin: auto;
+  height: var(--bar-height);
+  border-radius: var(--progress-radius);
+  background-color: white;
+  pointer-events: none;
+}
 
-    #progress {
-      background-color: gray;
-      height: 100%;
-      border-radius: var(--progress-radius);
-    }
+#progress {
+  background-color: gray;
+  height: 100%;
+  border-radius: var(--progress-radius);
+}
 
-    #scrubber {
-      position: relative;
-      top: calc(var(--bar-height) * -1.5);
-      width: var(--thumb-size);
-      height: var(--thumb-size);
-      border: none;
-      border-radius: 50%;
-      background-color: currentColor;
-      transform: translateX(calc(var(--thumb-size) * -0.5));
-    }
-  }
+#scrubber {
+  position: relative;
+  top: calc(var(--bar-height) * -1.5);
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border: none;
+  border-radius: 50%;
+  background-color: currentColor;
+  transform: translateX(calc(var(--thumb-size) * -0.5));
+}
 
-  #slot-container {
-    width: 100%;
-  }
+#slot-container {
+  width: 100%;
 }