@bylqwjc/media-editor-react 1.0.12

package/theme.css

@@ -0,0 +1,1214 @@
+/**
+ * @media-editor/styles/theme.css —— 双主题 CSS 变量(亮 + 暗,Vercel × Linear)。
+ *
+ * 风格:中性低彩度灰阶 + 单一靛蓝强调(Linear)、近纯黑白底与发丝边框(Vercel)。
+ * 参考 UI(<VideoEditor> 等 .me-* 内联样式)都用 var(--me-*) 且自带回退,引入即统一主题。
+ *
+ * 切换:默认跟随系统(prefers-color-scheme),可在根元素加 data-theme="light|dark" 强制覆盖。
+ *   document.documentElement.dataset.theme = 'light' | 'dark'  // 强制
+ *   delete document.documentElement.dataset.theme             // 回到跟随系统
+ */
+
+/* 亮色档(默认) */
+:root {
+  --me-editor-tool-icon-size: 20px;
+  --me-editor-tool-label-size: 12px;
+  --me-editor-tool-button-width: 72px;
+  --me-editor-tool-button-height: 66px;
+  --me-editor-tool-button-radius: 8px;
+  --me-editor-tool-button-gap: 6px;
+  --me-editor-home-icon-size: 40px;
+  --me-editor-home-title-size: 16px;
+  --me-editor-home-subtitle-size: 12px;
+  --me-editor-shell-min-height: 640px;
+  --me-editor-shell-max-height: 920px;
+  --me-editor-shell-height: clamp(
+    var(--me-editor-shell-min-height),
+    calc(100dvh - var(--me-editor-shell-offset, 148px)),
+    var(--me-editor-shell-max-height)
+  );
+  --me-bg: #ffffff;
+  --me-surface: #fafafa;
+  --me-chip: #f1f1f3;
+  --me-elevated: #ffffff;
+  --me-border: #e6e6e8;
+  --me-border-strong: #d4d4d8;
+  --me-fg: #0a0a0a;
+  --me-fg-muted: #6b6b76;
+  --me-accent: #5b5bd6;
+  --me-accent-hover: #4f4fc9;
+  --me-accent-fg: #ffffff;
+  --me-danger: #dc2626;
+  --me-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* 暗色档(系统暗色且未被 data-theme=light 覆盖) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --me-bg: #08080a;
+    --me-surface: #141416;
+    --me-chip: #1c1c20;
+    --me-elevated: #1c1c20;
+    --me-border: #26262b;
+    --me-border-strong: #34343a;
+    --me-fg: #ededf0;
+    --me-fg-muted: #9a9aa3;
+    --me-accent: #7c7cf0;
+    --me-accent-hover: #8f8ff5;
+    --me-accent-fg: #ffffff;
+    --me-danger: #f87171;
+    --me-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* 显式强制暗色 */
+:root[data-theme='dark'] {
+  --me-bg: #08080a;
+  --me-surface: #141416;
+  --me-chip: #1c1c20;
+  --me-elevated: #1c1c20;
+  --me-border: #26262b;
+  --me-border-strong: #34343a;
+  --me-fg: #ededf0;
+  --me-fg-muted: #9a9aa3;
+  --me-accent: #7c7cf0;
+  --me-accent-hover: #8f8ff5;
+  --me-accent-fg: #ffffff;
+  --me-danger: #f87171;
+  --me-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+/* 显式强制亮色(覆盖系统暗色) —— 值同默认亮色档 */
+:root[data-theme='light'] {
+  --me-bg: #ffffff;
+  --me-surface: #fafafa;
+  --me-chip: #f1f1f3;
+  --me-elevated: #ffffff;
+  --me-border: #e6e6e8;
+  --me-border-strong: #d4d4d8;
+  --me-fg: #0a0a0a;
+  --me-fg-muted: #6b6b76;
+  --me-accent: #5b5bd6;
+  --me-accent-hover: #4f4fc9;
+  --me-accent-fg: #ffffff;
+  --me-danger: #dc2626;
+  --me-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.me-video {
+  background: var(--me-surface);
+  color: var(--me-fg);
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid var(--me-border);
+}
+.me-video .me-btn:hover {
+  background: var(--me-accent-hover);
+}
+.me-video-export-spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(255, 255, 255, 0.18);
+  border-top-color: var(--me-accent, #7c7cf0);
+  border-radius: 999px;
+  animation: me-video-export-spin 0.8s linear infinite;
+}
+@keyframes me-video-export-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 入口选择卡(<MediaEditor> home) */
+.me-card {
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
+}
+.me-card:hover {
+  border-color: var(--me-border-strong) !important;
+  box-shadow: var(--me-shadow);
+}
+.me-card:active {
+  transform: translateY(1px);
+}
+
+/* Shared fullscreen shell: Pintura-like dark workspace with chrome floating above the canvas. */
+.me-fullscreen-host {
+  background: var(--me-bg);
+}
+.me-fullscreen-host:fullscreen,
+.me-fullscreen-host.me-is-fullscreen {
+  --me-video-done-bg: var(--me-accent, #7c7cf0);
+  --me-video-done-fg: #ffffff;
+  width: 100vw !important;
+  height: 100dvh !important;
+  min-height: 100dvh !important;
+  max-width: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  overflow: hidden !important;
+  background: #030303 !important;
+  color: #f4f4f5 !important;
+}
+.me-fullscreen-toggle {
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
+}
+.me-fullscreen-toggle:hover {
+  background: var(--me-surface, #141416) !important;
+  border-color: var(--me-border-strong, #34343a) !important;
+}
+.me-fullscreen-host:fullscreen .me-fullscreen-toggle,
+.me-fullscreen-host.me-is-fullscreen .me-fullscreen-toggle {
+  width: 32px !important;
+  height: 32px !important;
+  border-radius: 999px !important;
+  background: rgba(17, 17, 18, 0.76) !important;
+  border-color: rgba(255, 255, 255, 0.14) !important;
+  color: #fff !important;
+  backdrop-filter: blur(10px);
+}
+.editor-shell {
+  display: flex;
+  flex-direction: column;
+  height: var(--me-editor-shell-height);
+  min-height: 0;
+  position: relative;
+}
+.editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.editor-shell .me-fullscreen-toggle[data-mode='overlay'] {
+  display: none !important;
+}
+.editor-shell:fullscreen .editor-actions,
+.editor-shell.me-is-fullscreen .editor-actions {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 90;
+  margin: 0 !important;
+  gap: 4px;
+}
+.editor-shell:fullscreen .editor-actions button,
+.editor-shell.me-is-fullscreen .editor-actions button {
+  min-width: 32px;
+  height: 32px;
+}
+.editor-shell:fullscreen .editor-actions > button:first-child,
+.editor-shell.me-is-fullscreen .editor-actions > button:first-child {
+  display: none !important;
+}
+
+/* Video fullscreen composition. Inline styles own the default layout, so fullscreen uses important overrides. */
+.me-fullscreen-host:fullscreen .me-video-editor,
+.me-fullscreen-host.me-is-fullscreen .me-video-editor {
+  flex: 1 1 0 !important;
+  min-height: 0 !important;
+  height: 100% !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: #030303 !important;
+  overflow: hidden !important;
+  position: relative !important;
+}
+.me-fullscreen-host:fullscreen .me-video-topbar,
+.me-fullscreen-host.me-is-fullscreen .me-video-topbar {
+  position: absolute !important;
+  inset: 0 0 auto 0 !important;
+  height: 64px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  z-index: 70 !important;
+  pointer-events: none !important;
+}
+.me-fullscreen-host:fullscreen .me-video-history,
+.me-fullscreen-host.me-is-fullscreen .me-video-history {
+  position: absolute !important;
+  top: 16px !important;
+  left: calc(50% - 150px) !important;
+  transform: translateX(-50%) !important;
+  height: 32px !important;
+  padding: 0 6px !important;
+  border-radius: 999px !important;
+  background: rgba(17, 17, 18, 0.68) !important;
+  border: 1px solid rgba(255, 255, 255, 0.12) !important;
+  pointer-events: auto !important;
+  backdrop-filter: blur(10px);
+}
+.me-fullscreen-host:fullscreen .me-video-preview-zoom,
+.me-fullscreen-host.me-is-fullscreen .me-video-preview-zoom {
+  top: 16px !important;
+  left: calc(50% + 92px) !important;
+  transform: translateX(-50%) !important;
+  pointer-events: auto !important;
+  z-index: 80 !important;
+}
+.me-fullscreen-host:fullscreen .me-video-poster,
+.me-fullscreen-host.me-is-fullscreen .me-video-poster {
+  display: none !important;
+}
+.me-fullscreen-host:fullscreen .me-video-done,
+.me-fullscreen-host.me-is-fullscreen .me-video-done {
+  position: absolute !important;
+  top: 16px !important;
+  right: 16px !important;
+  height: 32px !important;
+  border-radius: 999px !important;
+  background: var(--me-video-done-bg, var(--me-accent, #7c7cf0)) !important;
+  color: var(--me-video-done-fg, #fff) !important;
+  pointer-events: auto !important;
+}
+.me-fullscreen-host:fullscreen .me-video-workspace,
+.me-fullscreen-host.me-is-fullscreen .me-video-workspace {
+  height: 100% !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  gap: 0 !important;
+  align-items: stretch !important;
+}
+.me-video-toolrail button {
+  width: var(--me-editor-tool-button-width, 72px) !important;
+  min-height: var(--me-editor-tool-button-height, 66px) !important;
+  border: 1px solid transparent !important;
+  border-radius: var(--me-editor-tool-button-radius, 8px) !important;
+  box-shadow: none !important;
+  box-sizing: border-box !important;
+}
+.me-video-toolrail button svg,
+.me-video-tool-icon,
+.me-video-history-icon {
+  width: var(--me-editor-tool-icon-size, 20px) !important;
+  height: var(--me-editor-tool-icon-size, 20px) !important;
+  display: block !important;
+  color: currentColor !important;
+  fill: none !important;
+  stroke: currentColor !important;
+  stroke-width: 1.75 !important;
+  stroke-linecap: round !important;
+  stroke-linejoin: round !important;
+}
+.me-video-topbar {
+  overflow: visible !important;
+  z-index: 30 !important;
+}
+.me-video-topbar .me-video-preview-zoom {
+  display: none !important;
+}
+.me-video-preview-zoom {
+  z-index: 40 !important;
+}
+.me-video-preview-tool-button,
+.me-video-preview-zoom-menu button {
+  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
+}
+.me-video-preview-tool-button:hover,
+.me-video-preview-zoom-menu button:hover {
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 10%, transparent) !important;
+}
+.me-video-preview-zoom-popover {
+  backdrop-filter: blur(14px);
+  z-index: 4000 !important;
+}
+.me-video-preview-zoom-slider {
+  accent-color: var(--me-accent, #7c7cf0);
+}
+.me-video-preview-zoom-input {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.me-video-preview-zoom-input::-webkit-outer-spin-button,
+.me-video-preview-zoom-input::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+}
+.me-video-preview-zoom-stepper button:hover {
+  color: var(--me-fg, #ededf0) !important;
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 8%, transparent) !important;
+}
+.me-video-canvas-scroll {
+  isolation: isolate;
+  overflow: auto !important;
+  max-width: 100% !important;
+  contain: layout paint;
+}
+.me-video-main {
+  overflow: hidden !important;
+  isolation: isolate;
+}
+.me-video-toolrail {
+  position: relative !important;
+  z-index: 20 !important;
+}
+.me-video-fixed-controls {
+  z-index: 3;
+}
+.me-video-selection-frame {
+  z-index: 6;
+}
+.me-video-overlay-actions {
+  z-index: 9;
+}
+.me-video-overlay-action-icon,
+.me-video-overlay-tool-icon {
+  width: 15px;
+  height: 15px;
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.9;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.me-video-overlay-tool-icon {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+.me-video-selection-rotate-handle .me-video-overlay-action-icon {
+  width: 14px;
+  height: 14px;
+}
+.me-video-selection-handle .me-video-overlay-action-icon {
+  width: 14px;
+  height: 14px;
+}
+.me-video-selection-handle .me-video-overlay-resize-icon {
+  width: 10px;
+  height: 10px;
+}
+.me-video-selection-handle .me-video-overlay-resize-icon,
+.me-video-selection-handle .me-video-overlay-resize-icon path {
+  fill: currentColor !important;
+  stroke: none !important;
+}
+.me-video-overlay-text-editor {
+  caret-color: currentColor;
+}
+.me-video-ratio-menu button,
+.me-video-ratio-menu-panel button {
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.me-video-toolrail button.is-active {
+  color: var(--me-accent, #7c7cf0) !important;
+  background: color-mix(in srgb, var(--me-accent, #7c7cf0) 16%, transparent) !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+.me-video-toolrail button:hover {
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 7%, transparent) !important;
+}
+.me-fullscreen-host:fullscreen .me-video-toolrail,
+.me-fullscreen-host.me-is-fullscreen .me-video-toolrail {
+  position: absolute !important;
+  left: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  z-index: 60 !important;
+  gap: 8px !important;
+}
+.me-fullscreen-host:fullscreen .me-video-main,
+.me-fullscreen-host.me-is-fullscreen .me-video-main {
+  box-sizing: border-box !important;
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  justify-content: center !important;
+  padding: 76px 112px 64px !important;
+}
+.me-fullscreen-host:fullscreen .me-video-preview-scroll,
+.me-fullscreen-host.me-is-fullscreen .me-video-preview-scroll {
+  width: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  overflow: auto !important;
+}
+
+.me-video-preview-scroll,
+.me-video-canvas-scroll,
+.me-video-timeline-scroll {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.me-video-preview-scroll::-webkit-scrollbar,
+.me-video-canvas-scroll::-webkit-scrollbar,
+.me-video-timeline-scroll::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+}
+
+.me-video-preview-shell {
+  min-height: 0;
+  gap: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+  background: var(--me-bg) !important;
+  border-radius: 0 !important;
+  overflow: hidden !important;
+}
+
+.me-video-preview-shell > .me-video-preview-scroll {
+  padding: 0 !important;
+  margin: 0 !important;
+  background: var(--me-bg) !important;
+  border-radius: 0 !important;
+}
+
+.me-video-preview-footer {
+  min-height: 34px !important;
+  padding: 0 12px 12px !important;
+  border-radius: 0 !important;
+  background: var(--me-elevated, var(--me-surface)) !important;
+  color: var(--me-fg) !important;
+  box-shadow: none !important;
+}
+
+.me-video-preview-footer > div:first-child span:last-child {
+  color: var(--me-fg-muted) !important;
+}
+
+.me-video-preview-footer > button,
+.me-video-preview-footer .me-video-preview-zoom-menu > button {
+  background: var(--me-chip) !important;
+  color: var(--me-fg) !important;
+  border-radius: 0 !important;
+  min-height: 32px !important;
+  height: 32px !important;
+  box-sizing: border-box !important;
+}
+
+.me-video-preview-footer > button {
+  width: 32px !important;
+  min-width: 32px !important;
+  border-radius: 999px !important;
+}
+
+.me-video-preview-footer .me-video-preview-zoom-menu > button {
+  min-height: 30px !important;
+  height: 30px !important;
+  padding: 0 10px 0 12px !important;
+}
+
+.me-video-preview-footer .me-video-preview-zoom-menu > button[disabled] {
+  color: var(--me-fg-muted) !important;
+}
+
+.me-video-preview-footer .me-video-preview-zoom-popover {
+  border: 1px solid var(--me-border) !important;
+  background: var(--me-elevated, var(--me-surface)) !important;
+  color: var(--me-fg) !important;
+  border-radius: 0 !important;
+  box-shadow: var(--me-shadow) !important;
+}
+
+.me-video-preview-footer .me-video-preview-zoom-popover > div:first-child,
+.me-video-preview-footer .me-video-preview-zoom-shortcut span:last-child,
+.me-video-preview-footer .me-video-preview-zoom-stepper button {
+  color: var(--me-fg-muted) !important;
+}
+
+.me-video-preview-footer .me-video-preview-zoom-number {
+  background: var(--me-chip) !important;
+  color: var(--me-fg) !important;
+  border-radius: 0 !important;
+}
+
+.me-video-preview-footer .me-video-preview-zoom-input,
+.me-video-preview-footer .me-video-preview-zoom-shortcut {
+  color: var(--me-fg) !important;
+}
+
+.me-video-preview-footer .me-video-preview-zoom-stepper {
+  border-left: 1px solid var(--me-border) !important;
+}
+
+/* Desktop video editor: keep the editing workspace in three columns and move the timeline below. */
+@media (min-width: 961px) {
+  .me-video-workspace,
+  .me-fullscreen-host:fullscreen .me-video-workspace,
+  .me-fullscreen-host.me-is-fullscreen .me-video-workspace {
+    display: grid !important;
+    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
+    grid-template-rows: minmax(0, 1fr) auto !important;
+    grid-template-areas:
+      'tool main inspector'
+      'timeline timeline timeline' !important;
+    align-items: stretch !important;
+    gap: 0 !important;
+    min-height: 0 !important;
+    overflow: hidden !important;
+    box-sizing: border-box !important;
+  }
+
+  .me-video-toolrail,
+  .me-fullscreen-host:fullscreen .me-video-toolrail,
+  .me-fullscreen-host.me-is-fullscreen .me-video-toolrail {
+    grid-area: tool;
+    position: relative !important;
+    left: auto !important;
+    top: auto !important;
+    transform: none !important;
+    align-self: stretch !important;
+    justify-self: start !important;
+    width: max-content !important;
+    min-width: max-content !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: flex-start !important;
+  }
+
+  .me-video-main,
+  .me-fullscreen-host:fullscreen .me-video-main,
+  .me-fullscreen-host.me-is-fullscreen .me-video-main {
+    display: contents !important;
+    width: auto !important;
+    height: auto !important;
+    min-height: 0 !important;
+    padding: 0 !important;
+    justify-content: initial !important;
+  }
+
+  .me-video-inspector-rail {
+    grid-area: inspector;
+    justify-self: stretch !important;
+    width: min(380px, 32vw) !important;
+    min-width: 320px !important;
+    max-width: 420px !important;
+    min-height: 0 !important;
+    max-height: 100% !important;
+  }
+
+  .me-video-preview-shell,
+  .me-video-preview-scroll,
+  .me-video-crop-view,
+  .me-video-overlay-view {
+    grid-area: main;
+    align-self: stretch !important;
+    justify-self: stretch !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    height: 100% !important;
+    max-height: 100% !important;
+  }
+
+  .me-video-preview-shell {
+    display: flex !important;
+    flex-direction: column !important;
+    width: 100% !important;
+    overflow: hidden !important;
+    box-sizing: border-box !important;
+  }
+
+  .me-video-preview-shell .me-video-preview-scroll {
+    flex: 1 1 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    max-height: none !important;
+  }
+
+  .me-video-preview-scroll {
+    padding-bottom: 0 !important;
+  }
+
+  .me-video-trim-panel {
+    grid-area: timeline;
+    width: 100% !important;
+    min-width: 0 !important;
+    margin-top: 0 !important;
+    padding-bottom: 0 !important;
+    align-self: stretch !important;
+    max-height: none !important;
+  }
+
+  .me-video-timeline-area,
+  .me-video-timeline-scroll {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+}
+
+/* Mobile video editor: collapse the desktop side rail into a bottom tool dock and
+   keep the preview/timeline inside the viewport instead of overflowing sideways. */
+@media (max-width: 760px) {
+  :root {
+    --me-editor-tool-icon-size: 18px;
+    --me-editor-tool-label-size: 11px;
+    --me-editor-tool-button-width: 52px;
+    --me-editor-tool-button-height: 52px;
+    --me-editor-shell-min-height: 0px;
+    --me-editor-shell-height: 100dvh;
+  }
+
+  .editor-shell {
+    height: var(--me-editor-shell-height, 100dvh) !important;
+    max-height: min(var(--me-editor-shell-height, 100dvh), 100dvh) !important;
+    min-height: 0 !important;
+    overflow: hidden !important;
+  }
+
+  .me-video-editor {
+    height: min(100%, 100dvh) !important;
+    min-height: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    border-radius: 0 !important;
+    border: 0 !important;
+    background: #030303 !important;
+    overflow: hidden !important;
+  }
+
+  .me-video-topbar {
+    flex: 0 0 48px !important;
+    min-height: 48px !important;
+    padding: max(6px, env(safe-area-inset-top)) 8px 6px !important;
+    border: 0 !important;
+    background: #030303 !important;
+    box-sizing: border-box !important;
+  }
+
+  .me-video-history {
+    position: absolute !important;
+    left: calc(50% - 118px) !important;
+    top: calc(max(6px, env(safe-area-inset-top)) + 4px) !important;
+    transform: none !important;
+    flex: 0 0 auto !important;
+    max-width: 86px !important;
+    overflow: hidden !important;
+    z-index: 90 !important;
+  }
+
+  .me-video-history button {
+    width: 28px !important;
+    height: 28px !important;
+    min-width: 28px !important;
+    min-height: 28px !important;
+  }
+
+  .me-video-preview-zoom {
+    position: absolute !important;
+    left: calc(50% - 22px) !important;
+    top: calc(max(6px, env(safe-area-inset-top)) + 4px) !important;
+    transform: none !important;
+    max-width: min(160px, calc(100vw - 124px)) !important;
+    z-index: 90 !important;
+  }
+
+  .me-video-preview-resolution {
+    display: none !important;
+  }
+
+  .me-video-preview-tool-button {
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    min-height: 32px !important;
+  }
+
+  .me-video-preview-zoom-menu > button {
+    width: 96px !important;
+    min-width: 96px !important;
+    max-width: 96px !important;
+    height: 32px !important;
+  }
+
+  .me-video-preview-zoom-popover {
+    left: 50% !important;
+    right: auto !important;
+    transform: translateX(-50%) !important;
+    width: min(300px, calc(100vw - 24px)) !important;
+    max-width: calc(100vw - 24px) !important;
+  }
+
+  .me-video-poster {
+    display: none !important;
+  }
+
+  .me-video-done {
+    position: absolute !important;
+    right: 8px !important;
+    top: max(6px, env(safe-area-inset-top)) !important;
+    width: 34px !important;
+    min-width: 34px !important;
+    height: 34px !important;
+    min-height: 34px !important;
+    padding: 0 !important;
+    border-radius: 999px !important;
+    font-size: 0 !important;
+  }
+
+  .me-video-done::after {
+    content: '✓';
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  .me-video-workspace {
+    flex: 1 1 0 !important;
+    min-height: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 8px !important;
+    padding: 0 8px max(8px, env(safe-area-inset-bottom)) !important;
+    overflow: hidden !important;
+    box-sizing: border-box !important;
+  }
+
+  .me-video-main {
+    order: 1 !important;
+    flex: 1 1 0 !important;
+    width: 100% !important;
+    min-height: 0 !important;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+    overscroll-behavior: contain !important;
+    -webkit-overflow-scrolling: touch !important;
+    padding: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+  }
+
+  .me-video-toolrail {
+    order: 2 !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    height: 58px !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    gap: 8px !important;
+    padding: 4px 8px !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    scrollbar-width: none !important;
+    box-sizing: border-box !important;
+    z-index: 80 !important;
+  }
+
+  .me-video-toolrail::-webkit-scrollbar {
+    display: none;
+  }
+
+  .me-video-toolrail button {
+    flex: 0 0 48px !important;
+    width: 48px !important;
+    min-width: 48px !important;
+    max-width: 48px !important;
+    min-height: 48px !important;
+    height: 48px !important;
+    padding: 0 !important;
+    border-radius: 999px !important;
+    gap: 0 !important;
+  }
+
+  .me-video-toolrail button span:last-child {
+    display: none !important;
+  }
+
+  .me-video-canvas-scroll,
+  .me-video-preview-scroll {
+    width: 100% !important;
+    max-width: 100% !important;
+    max-height: none !important;
+    flex: 1 1 0 !important;
+    min-height: 0 !important;
+    overflow: auto !important;
+  }
+
+  .me-video-crop-view,
+  .me-video-overlay-view {
+    flex: 1 1 0 !important;
+    min-height: 0 !important;
+    height: 100% !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    gap: 6px !important;
+    overflow: hidden !important;
+    box-sizing: border-box !important;
+  }
+
+  .me-video-crop-view .me-video-canvas-scroll,
+  .me-video-overlay-view .me-video-canvas-scroll {
+    flex: 1 1 0 !important;
+    height: auto !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    width: 100% !important;
+  }
+
+  .me-video-overlay-view-annotate .me-video-canvas-scroll,
+  .me-video-overlay-view-sticker .me-video-canvas-scroll {
+    max-height: none !important;
+  }
+
+  .me-video-crop-view .me-video-canvas-stage,
+  .me-video-overlay-view .me-video-canvas-stage {
+    max-width: 100% !important;
+  }
+
+  .me-video-crop-controls,
+  .me-video-crop-dial,
+  .me-video-overlay-controls,
+  .me-video-sticker-controls {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .me-video-crop-controls {
+    position: relative !important;
+    z-index: 140 !important;
+    flex-wrap: nowrap !important;
+    justify-content: center !important;
+    gap: 6px !important;
+    padding: 8px 0 2px !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  .me-video-crop-dial {
+    max-height: 44px !important;
+    min-height: 34px !important;
+    overflow: hidden !important;
+  }
+
+  .me-video-crop-action {
+    flex: 0 0 auto !important;
+    height: 28px !important;
+    min-height: 28px !important;
+    padding: 0 8px !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 4px !important;
+    font-size: 11px !important;
+    white-space: nowrap !important;
+  }
+
+  .me-video-crop-action-icon-only {
+    width: 28px !important;
+    min-width: 28px !important;
+    max-width: 28px !important;
+    padding: 0 !important;
+    gap: 0 !important;
+  }
+
+  .me-video-crop-action-icon {
+    width: 15px !important;
+    height: 15px !important;
+    display: block !important;
+  }
+
+  .me-video-crop-action-label,
+  .me-video-crop-action::after {
+    display: none !important;
+    content: none !important;
+  }
+
+  .me-video-ratio-menu > button {
+    height: 28px !important;
+    min-height: 28px !important;
+    min-width: 86px !important;
+    max-width: 108px !important;
+    padding: 0 8px !important;
+    font-size: 11px !important;
+  }
+
+  .me-video-ratio-menu {
+    position: relative !important;
+    z-index: 150 !important;
+  }
+
+  .me-video-ratio-menu > button span:nth-child(2) {
+    min-width: 0 !important;
+    max-width: 48px !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+
+  .me-video-ratio-menu-panel {
+    left: 50% !important;
+    right: auto !important;
+    top: calc(100% + 8px) !important;
+    transform: translateX(-50%) !important;
+    z-index: 9999 !important;
+    width: min(190px, calc(100vw - 24px)) !important;
+    min-width: min(190px, calc(100vw - 24px)) !important;
+    max-width: calc(100vw - 24px) !important;
+  }
+
+  .me-video-ratio-menu-panel button {
+    height: 30px !important;
+    min-height: 30px !important;
+    font-size: 11px !important;
+  }
+
+  .me-video-trim-panel {
+    flex: 0 0 184px !important;
+    width: 100% !important;
+    margin-top: 6px !important;
+    max-height: 184px !important;
+    overflow: hidden !important;
+    padding-bottom: 12px !important;
+    box-sizing: border-box !important;
+  }
+
+  .me-video-main:has(.me-video-trim-panel) {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: flex-start !important;
+  }
+
+  .me-video-main:has(.me-video-trim-panel) .me-video-preview-scroll {
+    flex: 1 1 0 !important;
+    min-height: 0 !important;
+    max-height: none !important;
+  }
+
+  .me-video-trim-actions {
+    max-width: 100% !important;
+    justify-content: flex-start !important;
+    gap: 6px !important;
+    padding: 2px 6px !important;
+    min-width: 0 !important;
+    min-height: 28px !important;
+    margin-bottom: 0 !important;
+    overflow-x: auto !important;
+    scrollbar-width: none !important;
+  }
+
+  .me-video-trim-actions::-webkit-scrollbar {
+    display: none;
+  }
+
+  .me-video-trim-actions > button,
+  .me-video-trim-action-btn {
+    flex: 0 0 auto !important;
+    width: 32px !important;
+    min-width: 32px !important;
+    max-width: 32px !important;
+    height: 28px !important;
+    padding: 0 !important;
+    justify-content: center !important;
+    gap: 0 !important;
+  }
+
+  .me-video-trim-action-label {
+    display: none !important;
+  }
+
+  .me-video-trim-action-icon {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 14px !important;
+    line-height: 1 !important;
+  }
+
+  .me-video-timeline-zoom {
+    display: flex !important;
+    align-items: center !important;
+    flex: 0 0 auto !important;
+    gap: 4px !important;
+    margin-left: auto !important;
+  }
+
+  .me-video-timeline-zoom-btn,
+  .me-video-timeline-zoom button {
+    width: 28px !important;
+    min-width: 28px !important;
+    max-width: 28px !important;
+    height: 28px !important;
+    min-height: 28px !important;
+    padding: 0 !important;
+    border-radius: 999px !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 14px !important;
+    line-height: 1 !important;
+  }
+
+  .me-video-timeline-fit-label {
+    display: none !important;
+  }
+
+  .me-video-timeline-fit-icon {
+    width: 14px !important;
+    height: 14px !important;
+  }
+
+  .me-video-timeline-area {
+    min-width: 0 !important;
+    width: 100% !important;
+    max-height: 132px !important;
+    overflow: hidden !important;
+  }
+
+  .me-video-timeline-scroll {
+    max-width: 100% !important;
+    overflow-x: auto !important;
+  }
+
+  .me-video-fixed-controls {
+    flex: 0 0 auto !important;
+    max-width: 100% !important;
+    overflow-x: auto !important;
+    overflow-y: visible !important;
+    scrollbar-width: none !important;
+    padding: 2px 0 !important;
+    box-sizing: border-box !important;
+  }
+
+  .me-video-fixed-controls.me-video-crop-controls {
+    overflow: visible !important;
+    overflow-x: visible !important;
+    overflow-y: visible !important;
+  }
+
+  .me-video-fixed-controls::-webkit-scrollbar {
+    display: none;
+  }
+
+  .me-video-overlay-tool-row {
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-x: auto !important;
+    overflow-y: visible !important;
+    flex-wrap: nowrap !important;
+    justify-content: center !important;
+    scrollbar-width: none !important;
+    padding: 0 4px !important;
+    box-sizing: border-box !important;
+  }
+
+  .me-video-overlay-tool-row::-webkit-scrollbar {
+    display: none;
+  }
+
+  .me-video-overlay-tool-row > button {
+    flex: 0 0 auto !important;
+    min-width: 42px !important;
+    height: 34px !important;
+    padding: 0 10px !important;
+    font-size: 0 !important;
+  }
+
+  .me-video-overlay-tool-row > button span {
+    display: none !important;
+  }
+
+  .me-video-overlay-style-row {
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-x: auto !important;
+    overflow-y: visible !important;
+    flex-wrap: nowrap !important;
+    justify-content: center !important;
+    scrollbar-width: none !important;
+    padding: 0 6px !important;
+    box-sizing: border-box !important;
+  }
+
+  .me-video-overlay-style-row::-webkit-scrollbar {
+    display: none;
+  }
+
+  .me-video-sticker-controls {
+    max-height: 156px !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+    align-content: flex-start !important;
+    justify-content: center !important;
+    padding: 4px 8px 14px !important;
+    scrollbar-width: thin !important;
+  }
+
+  .me-video-sticker-controls > button {
+    flex: 0 0 auto !important;
+  }
+
+  .me-video-sticker-controls > button:first-child {
+    max-width: 42px !important;
+    width: 42px !important;
+    min-width: 42px !important;
+    height: 34px !important;
+    padding: 0 !important;
+  }
+
+  .me-video-sticker-controls > button:first-child span {
+    display: none !important;
+  }
+
+  .me-video-sticker-controls > button:not(:first-child) {
+    width: 30px !important;
+    height: 30px !important;
+    padding: 0 !important;
+    font-size: 20px !important;
+  }
+
+  .me-video-sticker-controls > span {
+    display: none !important;
+  }
+
+  .me-fullscreen-host:fullscreen .me-video-topbar,
+  .me-fullscreen-host.me-is-fullscreen .me-video-topbar {
+    position: relative !important;
+    inset: auto !important;
+    height: 48px !important;
+    pointer-events: auto !important;
+  }
+
+  .me-fullscreen-host:fullscreen .me-video-history,
+  .me-fullscreen-host.me-is-fullscreen .me-video-history,
+  .me-fullscreen-host:fullscreen .me-video-preview-zoom,
+  .me-fullscreen-host.me-is-fullscreen .me-video-preview-zoom,
+  .me-fullscreen-host:fullscreen .me-video-done,
+  .me-fullscreen-host.me-is-fullscreen .me-video-done {
+    top: max(6px, env(safe-area-inset-top)) !important;
+  }
+
+  .me-fullscreen-host:fullscreen .me-video-history,
+  .me-fullscreen-host.me-is-fullscreen .me-video-history {
+    position: absolute !important;
+    left: calc(50% - 118px) !important;
+    transform: none !important;
+  }
+
+  .me-fullscreen-host:fullscreen .me-video-workspace,
+  .me-fullscreen-host.me-is-fullscreen .me-video-workspace {
+    padding: 0 8px max(8px, env(safe-area-inset-bottom)) !important;
+    gap: 8px !important;
+  }
+
+  .me-fullscreen-host:fullscreen .me-video-toolrail,
+  .me-fullscreen-host.me-is-fullscreen .me-video-toolrail {
+    position: relative !important;
+    left: auto !important;
+    top: auto !important;
+    transform: none !important;
+  }
+
+  .me-fullscreen-host:fullscreen .me-video-main,
+  .me-fullscreen-host.me-is-fullscreen .me-video-main {
+    padding: 0 !important;
+    justify-content: center !important;
+  }
+}