@layers-app/editor-video 0.1.4 → 0.1.6

package/dist/index.css

@@ -3,6 +3,12 @@ div.doc-space-styles-provider .video-upload-container div.video-upload-plugin {
   box-sizing: border-box;
 }
 
+.resizable-container--video:has(.video-upload-container:not([data-state=video-preview])) {
+  width: 100% !important;
+  max-width: 100% !important;
+  padding-right: 0 !important;
+}
+
 div.doc-space-styles-provider .video-upload-container,
 div.doc-space-styles-provider .video-upload-container *,
 div.doc-space-styles-provider .video-upload-container *::before,
@@ -18,8 +24,8 @@ div.doc-space-styles-provider .video-upload-container *::after {
   align-items: flex-start;
   width: 100%;
   align-self: stretch;
-  padding: 0 4px 4px 4px;
-  border-radius: var(--mantine-radius-md, 8px);
+  border-radius: 12px;
+  overflow: hidden;
   background: var(--mantine-color-gray-light, rgba(134, 142, 150, 0.1));
   gap: 0;
 }
@@ -35,6 +41,10 @@ div.doc-space-styles-provider .video-upload-container *::after {
   background: transparent;
 }
 
+.video-upload-container[data-state=video-preview][data-ready=true]:has(.video-upload-processing-banner) {
+  background: var(--mantine-color-gray-light, rgba(134, 142, 150, 0.1));
+}
+
 .video-upload-header {
   display: flex;
   align-items: center;
@@ -67,13 +77,15 @@ div.doc-space-styles-provider .video-upload-container *::after {
   width: auto;
   min-width: 0;
   white-space: nowrap;
-  border-radius: var(--mantine-radius-md, 8px);
+  border-radius: 6px;
   background-color: var(--mantine-color-body, #fff);
   font-size: 14px;
+  font-weight: 400;
   line-height: 1.45;
-  padding: 0 32px 0 12px;
-  border: 1px solid var(--mantine-color-body, #fff);
-  border-color: var(--mantine-color-body, #fff);
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 8px;
+  border: 2px solid var(--mantine-color-body, #fff);
   pointer-events: auto !important;
   cursor: pointer;
 }
@@ -82,6 +94,24 @@ div.doc-space-styles-provider .video-upload-container *::after {
   pointer-events: auto !important;
 }
 
+.media-actions .media-action {
+  border: none;
+  background-color: var(--mantine-color-body, white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.media-wrapper:has(.video-upload-container:not([data-state=video-preview])) > .media-actions {
+  top: 5px;
+  right: 6px;
+}
+
+.media-wrapper:has(.video-upload-processing-banner) > .media-actions {
+  top: 44px;
+  right: 4px;
+}
+
 .video-upload-link {
   display: flex;
   flex-direction: column;
@@ -97,15 +127,7 @@ div.doc-space-styles-provider .video-upload-container *::after {
 }
 
 .video-upload-link-input .mantine-TextInput-input {
-  background: var(--input-filled-input-bg, #f1f3f5);
   border: 1px solid transparent;
-  height: 36px;
-  min-height: 36px;
-  border-radius: var(--mantine-radius-md, 8px);
-  padding: 0 12px;
-  font-size: 14px;
-  line-height: 1.45;
-  width: 100%;
   pointer-events: auto !important;
 }
 
@@ -135,7 +157,7 @@ div.doc-space-styles-provider .video-upload-container *::after {
   width: 100%;
   aspect-ratio: 16/9;
   min-height: 200px;
-  border-radius: 12px;
+  border-radius: var(--mantine-radius-default, 8px);
   background: #000;
   overflow: hidden;
   pointer-events: auto;
@@ -149,22 +171,26 @@ div.doc-space-styles-provider .video-upload-container *::after {
   display: block;
 }
 
-.video-upload-container[data-state=video-preview] .video-upload-processing-banner,
 .video-upload-container[data-state=video-preview] .video-upload-title-text {
   width: calc(100% - 16px);
   margin: 0 8px;
   height: 32px;
   border-radius: 8px;
   background: transparent;
-  color: #1f2328;
+  color: var(--mantine-color-text);
   box-shadow: none;
   border: none;
 }
 
+.video-upload-container[data-state=video-preview] .video-upload-processing-banner {
+  height: 40px;
+  padding: 0 var(--mantine-spacing-xs);
+}
+
 .video-upload-container[data-state=video-preview] .video-upload-processing-text,
 .video-upload-container[data-state=video-preview] .video-upload-title-text {
   color: var(--mantine-color-default-color, #000);
-  font-size: var(--font-size-font-size-sm, 14px);
+  font-size: var(--mantine-font-size-sm, 14px);
   font-style: normal;
   font-weight: 500;
   display: flex;
@@ -188,10 +214,11 @@ div.doc-space-styles-provider .video-upload-container *::after {
   align-items: center;
   gap: var(--mantine-spacing-xs);
   width: 100%;
-  height: 32px;
+  height: 40px;
+  padding: 0 var(--mantine-spacing-xs);
 }
 
-.video-upload-processing-text {
+.video-upload-processing-text.video-upload-processing-text {
   color: var(--mantine-color-bright);
   font-size: var(--mantine-font-size-sm, 14px);
   font-style: normal;
@@ -239,7 +266,7 @@ div.doc-space-styles-provider .video-upload-container *::after {
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: var(--mantine-spacing-xs);
+  gap: 6px;
 }
 
 .video-upload-progress-header {
@@ -253,8 +280,30 @@ div.doc-space-styles-provider .video-upload-container *::after {
   display: flex;
   gap: var(--mantine-spacing-xs);
   align-items: center;
+  justify-content: center;
+  padding-top: 8px;
   font-size: var(--mantine-font-size-xs);
-  color: var(--mantine-color-gray-6);
+  color: var(--mantine-color-dimmed);
+}
+
+.video-upload-progress-dot {
+  width: 2px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--mantine-color-dimmed);
+  flex-shrink: 0;
+}
+
+@keyframes video-upload-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.video-upload-spinner {
+  animation: video-upload-spin 1s linear infinite;
 }
 
 .video-upload-actions {
@@ -514,8 +563,8 @@ div.doc-space-styles-provider .video-upload-container *::after {
   min-height: 200px;
   overflow: hidden;
   --video-timeline-hitbox-padding: 6px;
-  --video-timeline-height: 10px;
-  --video-controls-gap: 6px;
+  --video-timeline-height: 12px;
+  --video-controls-gap: 4px;
   --video-controls-row-height: 28px;
   --video-controls-padding-bottom: 12px;
   --video-subtitles-offset: 48px;
@@ -540,33 +589,32 @@ div.doc-space-styles-provider .video-upload-container *::after {
 .video-player-container--with-player {
   aspect-ratio: 16/9;
   cursor: pointer;
-  border-radius: 12px;
+  border-radius: var(--mantine-radius-default, 8px);
   background: #000;
 }
 
 .video-player-container video {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   display: block;
 }
 
 .video-player-media {
   width: 100%;
   height: 100%;
-  border-radius: 12px;
+  border-radius: var(--mantine-radius-default, 8px);
   display: block;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .video-player-container video::cue {
   color: #fff;
-  background: rgba(0, 0, 0, 0.7);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.4;
-  padding: 0.2em 0.4em;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.8);
+  font-size: var(--mantine-font-size-md, 16px);
+  font-weight: 400;
+  line-height: 1.55;
+  padding: 0 4px;
 }
 
 .video-player-container .shaka-text-container {
@@ -584,13 +632,11 @@ div.doc-space-styles-provider .video-upload-container *::after {
 .video-player-container .shaka-text-container .shaka-text-wrapper span,
 .video-player-container .shaka-text-container span {
   color: #fff;
-  background: rgba(0, 0, 0, 0.7);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.4;
-  padding: 0.2em 0.4em;
-  border-radius: 4px;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.8);
+  font-size: var(--mantine-font-size-md, 16px);
+  font-weight: 400;
+  line-height: 1.55;
+  padding: 0 4px;
 }
 
 .video-player-overlay {
@@ -598,7 +644,7 @@ div.doc-space-styles-provider .video-upload-container *::after {
   left: 0;
   right: 0;
   bottom: 0;
-  padding: 10px 14px 12px;
+  padding: 0 12px 12px;
   pointer-events: none;
 }
 
@@ -611,8 +657,8 @@ div.doc-space-styles-provider .video-upload-container *::after {
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  width: 56px;
-  height: 56px;
+  width: 64px;
+  height: 64px;
   border-radius: 999px;
   border: none;
   background: transparent;
@@ -637,8 +683,8 @@ div.doc-space-styles-provider .video-upload-container *::after {
   left: 0;
   right: 0;
   bottom: 0;
-  height: 148px;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 52%, rgba(0, 0, 0, 0.78) 100%);
+  height: 136px;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.31) 51.56%, rgba(0, 0, 0, 0.7) 100%);
   pointer-events: none;
 }
 
@@ -646,7 +692,7 @@ div.doc-space-styles-provider .video-upload-container *::after {
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
   width: 100%;
   pointer-events: auto;
 }
@@ -654,7 +700,7 @@ div.doc-space-styles-provider .video-upload-container *::after {
 .video-player-timeline {
   position: relative;
   width: 100%;
-  height: 10px;
+  height: 12px;
   display: flex;
   align-items: center;
 }
@@ -673,7 +719,7 @@ div.doc-space-styles-provider .video-upload-container *::after {
   width: 100%;
   height: 4px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.28);
+  background: rgba(255, 255, 255, 0.4);
   cursor: pointer;
 }
 
@@ -728,19 +774,19 @@ div.doc-space-styles-provider .video-upload-container *::after {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--mantine-spacing-lg, 20px);
 }
 
 .video-player-left,
 .video-player-right {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
 .video-player-button {
-  width: 20px;
-  height: 20px;
+  width: 28px;
+  height: 28px;
   border-radius: 8px;
   border: none;
   background: transparent;
@@ -756,6 +802,46 @@ div.doc-space-styles-provider .video-upload-container *::after {
   background: rgba(255, 255, 255, 0.16);
 }
 
+.video-player-volume-slider .mantine-Slider-root {
+  height: 10px;
+}
+.video-player-volume-slider .mantine-Slider-track {
+  height: 3px !important;
+  border: none !important;
+  background: transparent !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  cursor: pointer;
+}
+.video-player-volume-slider .mantine-Slider-track::after {
+  content: "";
+  position: absolute;
+  inset: -8px 0;
+}
+.video-player-volume-slider .mantine-Slider-track::before {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+.video-player-volume-slider .mantine-Slider-bar {
+  height: 3px !important;
+  background: #fff !important;
+  left: 0 !important;
+  inset-inline-start: 0 !important;
+  width: calc(var(--slider-bar-width) - 2 * var(--slider-size)) !important;
+}
+.video-player-volume-slider .mantine-Slider-thumb {
+  width: 10px;
+  height: 10px;
+  min-width: 10px;
+  background: #fff;
+  border: 2px solid #fff;
+  box-shadow: none;
+}
+.video-player-volume-slider .mantine-Slider-thumb::before {
+  content: "";
+  position: absolute;
+  inset: -8px;
+}
+
 .video-player-time {
   font-size: var(--mantine-font-size-sm, 14px);
   font-weight: 400;
@@ -764,19 +850,20 @@ div.doc-space-styles-provider .video-upload-container *::after {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 0 4px;
+  padding: 0 6px;
 }
 
 .video-player-title {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 0 6px;
+  padding: 0 8px;
   color: #fff;
   font-size: var(--mantine-font-size-sm, 14px);
   font-weight: 400;
   line-height: 1.45;
-  max-width: 320px;
+  height: 28px;
+  max-width: 427px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -786,12 +873,13 @@ div.doc-space-styles-provider .video-upload-container *::after {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 0 6px;
+  padding: 0 8px;
   color: #fff;
   font-size: var(--mantine-font-size-sm, 14px);
   font-weight: 400;
   line-height: 1.45;
-  max-width: 320px;
+  height: 28px;
+  max-width: 427px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -806,14 +894,14 @@ div.doc-space-styles-provider .video-upload-container *::after {
   display: flex;
   gap: 2px;
   width: 100%;
-  height: 3px;
+  height: 4px;
 }
 
 .video-player-chapter-segment {
   position: relative;
-  height: 3px;
+  height: 4px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.28);
+  background: rgba(255, 255, 255, 0.4);
   overflow: hidden;
 }
 
@@ -822,8 +910,9 @@ div.doc-space-styles-provider .video-upload-container *::after {
   top: 0;
   left: 0;
   height: 100%;
-  background: #2f80ed;
+  background: var(--mantine-primary-color-filled);
   border-radius: 4px;
+  z-index: 1;
 }
 
 .video-player-chapter-segment-buffered {
@@ -879,9 +968,10 @@ div.doc-space-styles-provider .video-upload-container *::after {
   display: flex;
   gap: 2px;
   overflow-x: auto;
-  padding: 6px 8px;
-  background: #0b0d10;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  overflow-y: hidden;
+  padding: 6px;
+  background: black;
+  border-top: 1px solid var(--mantine-color-dark-5, #3b3b3b);
   border-radius: 0 0 var(--mantine-radius-default, 8px) var(--mantine-radius-default, 8px);
 }
 .video-player-chapters-list::-webkit-scrollbar {
@@ -891,7 +981,7 @@ div.doc-space-styles-provider .video-upload-container *::after {
   background: transparent;
 }
 .video-player-chapters-list::-webkit-scrollbar-thumb {
-  background: #424242;
+  background: var(--mantine-color-dark-4, #424242);
   border-radius: 8px;
 }
 
@@ -907,9 +997,9 @@ div.doc-space-styles-provider .video-upload-container *::after {
 
 .video-player-chapters-item {
   display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 8px;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 8px;
   border-radius: var(--mantine-radius-default, 8px);
   border: none;
   background: transparent;
@@ -924,7 +1014,7 @@ div.doc-space-styles-provider .video-upload-container *::after {
 }
 
 .video-player-chapters-item--active .video-player-chapters-item-time {
-  background: #2f80ed;
+  background: var(--mantine-color-blue-filled, #1971c2);
   color: #fff;
 }
 
@@ -934,12 +1024,12 @@ div.doc-space-styles-provider .video-upload-container *::after {
   justify-content: center;
   padding: 0 4px;
   min-width: 45px;
-  background: rgba(47, 128, 237, 0.2);
+  background: rgba(34, 139, 230, 0.2);
   border-radius: 16px;
   font-size: var(--mantine-font-size-xs, 12px);
   font-weight: 600;
   line-height: 1.4;
-  color: #2f80ed;
+  color: var(--mantine-color-blue-text, #4dabf7);
 }
 
 .video-player-chapters-item-title {
@@ -948,7 +1038,6 @@ div.doc-space-styles-provider .video-upload-container *::after {
   line-height: 1.45;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 223px;
 }
 
 .video-settings-anchor {
@@ -957,8 +1046,42 @@ div.doc-space-styles-provider .video-upload-container *::after {
   align-items: center;
 }
 
+div.video-player-menu-dropdown.mantine-Menu-dropdown {
+  --menu-bg: rgba(0, 0, 0, 0.9);
+  --menu-bd: none;
+  background: rgba(0, 0, 0, 0.9) !important;
+  border: none !important;
+  backdrop-filter: blur(4px);
+  border-radius: var(--mantine-radius-md, 8px);
+}
+div.video-player-menu-dropdown.mantine-Menu-dropdown .mantine-Menu-item + .mantine-Menu-item {
+  margin-top: 2px;
+}
+div.video-player-menu-dropdown.mantine-Menu-dropdown .mantine-Menu-item {
+  color: #fff;
+}
+div.video-player-menu-dropdown.mantine-Menu-dropdown .mantine-Menu-item:hover, div.video-player-menu-dropdown.mantine-Menu-dropdown .mantine-Menu-item[data-hovered] {
+  background: rgba(255, 255, 255, 0.1);
+}
+div.video-player-menu-dropdown.mantine-Menu-dropdown .mantine-Menu-itemSection {
+  color: #fff;
+}
+div.video-player-menu-dropdown.mantine-Menu-dropdown .mantine-Menu-divider {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+div.video-player-menu-dropdown.mantine-Menu-dropdown::-webkit-scrollbar {
+  width: 4px;
+}
+div.video-player-menu-dropdown.mantine-Menu-dropdown::-webkit-scrollbar-track {
+  background: transparent;
+}
+div.video-player-menu-dropdown.mantine-Menu-dropdown::-webkit-scrollbar-thumb {
+  background: var(--mantine-color-dark-4, #424242);
+  border-radius: 8px;
+}
+
 div.video-player-menu-dropdown .video-menu-header {
-  font-size: var(--font-size-font-size-sm, 14px);
+  font-size: var(--mantine-font-size-sm, 14px);
   font-style: normal;
   font-weight: 600;
 }
@@ -967,24 +1090,37 @@ div.video-player-menu-dropdown div.mantine-Menu-item,
 div.video-player-menu-dropdown div.mantine-Menu-itemLabel,
 div.video-player-menu-dropdown div.mantine-Menu-itemSection,
 div.video-player-menu-dropdown .video-menu-item-text {
-  font-size: var(--font-size-font-size-sm, 14px);
+  font-size: var(--mantine-font-size-sm, 14px);
   font-weight: 400;
 }
 
-.video-menu-item {
+.video-menu-item.video-menu-item {
   display: flex;
   height: 36px;
   min-height: 36px;
-  padding: 6px var(--mantine-spacing-xs);
+  padding: 6px var(--mantine-spacing-sm, 12px) !important;
   align-items: center;
   gap: var(--mantine-spacing-xs, 10px);
 }
 
-.video-menu-item-text {
-  font-size: var(--font-size-font-size-sm, 14px);
+.video-menu-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.video-menu-item-text.video-menu-item-text {
+  font-size: var(--mantine-font-size-sm, 14px);
   font-weight: 400;
 }
 
+.video-menu-hd-badge {
+  font-size: 9px;
+  font-weight: 600;
+  vertical-align: super;
+}
+
 .video-menu-row {
   display: flex;
   align-items: center;
@@ -1006,10 +1142,11 @@ div.video-player-menu-dropdown .video-menu-item-text {
 
 .video-menu-value {
   text-align: right;
+  color: var(--mantine-color-gray-4, #ced4da);
 }
 
 .video-menu-chevron {
-  width: 20px;
+  width: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
@@ -1022,30 +1159,80 @@ div.video-player-menu-dropdown .video-menu-item-text {
   display: none !important;
 }
 
+.video-settings-modal .mantine-Modal-content {
+  display: flex;
+  flex-direction: column;
+  max-height: min(664px, 100dvh - 2 * var(--mantine-spacing-xl, 32px));
+  overflow: hidden;
+}
+.video-settings-modal .mantine-Modal-header {
+  padding: var(--mantine-spacing-md, 16px);
+}
+.video-settings-modal .mantine-Modal-close {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: var(--mantine-radius-sm, 4px);
+  color: var(--mantine-color-gray-7, #495057);
+}
+.video-settings-modal .mantine-Modal-close svg {
+  width: 20px !important;
+  height: 20px !important;
+}
+.video-settings-modal .mantine-Modal-title {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 700;
+  line-height: 21px;
+  color: var(--mantine-color-bright);
+}
 .video-settings-modal .mantine-Modal-body {
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+}
+.video-settings-modal .video-settings-modal-body {
+  padding: 0 var(--mantine-spacing-md, 16px) var(--mantine-spacing-md, 16px);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+.video-settings-modal .video-settings-modal-body::-webkit-scrollbar {
+  width: 6px;
+}
+.video-settings-modal .video-settings-modal-body::-webkit-scrollbar-track {
+  background: transparent;
 }
-.video-settings-modal .video-settings-modal-header {
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--mantine-color-default-border);
+.video-settings-modal .video-settings-modal-body::-webkit-scrollbar-thumb {
+  background: var(--mantine-color-gray-3);
+  border-radius: 3px;
+}
+.video-settings-modal .video-settings-modal-body::-webkit-scrollbar-thumb:hover {
+  background: var(--mantine-color-gray-5);
 }
 .video-settings-modal .video-settings-modal-body {
-  padding: 16px 20px 20px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--mantine-color-gray-3) transparent;
+}
+.video-settings-modal .mantine-Switch-track {
+  cursor: pointer;
 }
 .video-settings-modal .video-settings-modal-section-title {
-  font-size: var(--mantine-h5-font-size, 16px);
-  font-weight: var(--mantine-h5-font-weight, 700);
+  font-size: var(--mantine-font-size-md, 16px);
+  font-weight: 700;
+  line-height: var(--mantine-line-height-md, 24px);
   color: var(--mantine-color-bright);
 }
 .video-settings-modal .video-settings-modal-text-label {
   color: var(--mantine-color-bright);
-  font-size: var(--font-size-font-size-sm, 14px);
+  font-size: var(--mantine-font-size-sm, 14px);
   font-weight: 500;
 }
 .video-settings-modal .video-settings-modal-cover-carousel {
   position: relative;
-  margin-top: 10px;
-  margin-bottom: 12px;
 }
 .video-settings-modal .video-settings-modal-cover-controls {
   top: 50%;
@@ -1055,11 +1242,10 @@ div.video-player-menu-dropdown .video-menu-item-text {
 .video-settings-modal .video-settings-modal-cover-control {
   width: 28px;
   height: 28px;
-  border-radius: 50%;
-  border: 1px solid var(--mantine-color-gray-3);
-  background: var(--mantine-color-white);
-  color: var(--mantine-color-gray-7);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+  border-radius: var(--mantine-radius-default, 8px);
+  border: 1px solid var(--mantine-color-default-border);
+  background: var(--mantine-color-default);
+  color: var(--mantine-color-default-color);
 }
 .video-settings-modal .video-settings-modal-cover-control[data-inactive] {
   opacity: 0;
@@ -1070,42 +1256,40 @@ div.video-player-menu-dropdown .video-menu-item-text {
   height: 80px;
 }
 .video-settings-modal .video-settings-modal-cover-cell {
-  width: 129.333px;
+  width: 100%;
   height: 80px;
-  border-radius: var(--radius-radius-default, 8px);
+  border-radius: var(--mantine-radius-default, 8px);
   overflow: hidden;
   min-height: 0;
-  flex: 0 0 auto;
 }
 .video-settings-modal .video-settings-modal-cover-upload {
   width: 100%;
   height: 100%;
   min-height: 0;
-  border: 1px dashed #d0d7de;
-  border-radius: var(--radius-radius-default, 8px);
-  background: #ffffff;
+  border: 1px dashed var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-default, 8px);
+  background: var(--mantine-color-body);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 10px;
   cursor: pointer;
-  transition: border-color 0.15s, background 0.15s;
+  transition: background 0.15s;
 }
 .video-settings-modal .video-settings-modal-cover-upload:hover {
-  border-color: #9db6d6;
-  background: #ffffff;
+  background: var(--mantine-color-default-hover);
 }
 .video-settings-modal .video-settings-modal-cover-upload-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 10px;
   text-align: center;
 }
 .video-settings-modal .video-settings-modal-cover-upload-label {
-  font-size: var(--font-size-font-size-sm, 14px);
+  font-size: var(--mantine-font-size-sm, 14px);
   font-style: normal;
   font-weight: 500;
   line-height: 1.2;
@@ -1114,10 +1298,9 @@ div.video-player-menu-dropdown .video-menu-item-text {
 .video-settings-modal .video-settings-modal-cover-thumb {
   width: 100%;
   height: 100%;
-  border-radius: var(--radius-radius-default, 8px);
+  border-radius: var(--mantine-radius-default, 8px);
   overflow: hidden;
   position: relative;
-  border: 2px solid transparent;
   cursor: pointer;
 }
 .video-settings-modal .video-settings-modal-cover-thumb img {
@@ -1126,19 +1309,15 @@ div.video-player-menu-dropdown .video-menu-item-text {
   object-fit: cover;
   display: block;
 }
-.video-settings-modal .video-settings-modal-cover-thumb.loading img {
-  filter: blur(4px);
-}
-.video-settings-modal .video-settings-modal-cover-thumb.error img {
-  filter: blur(4px);
-}
 .video-settings-modal .video-settings-modal-cover-thumb .video-settings-modal-cover-spinner {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(1px);
+  border-radius: var(--mantine-radius-default, 8px);
 }
 .video-settings-modal .video-settings-modal-cover-thumb .video-settings-modal-cover-error-icon {
   position: absolute;
@@ -1146,111 +1325,115 @@ div.video-player-menu-dropdown .video-menu-item-text {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(1px);
+  border-radius: var(--mantine-radius-default, 8px);
   color: #fff;
-  font-size: 20px;
-  font-weight: 600;
 }
 .video-settings-modal .video-settings-modal-cover-thumb.selected {
-  border-color: var(--mantine-color-blue-5);
+  border: none;
 }
 .video-settings-modal .video-settings-modal-cover-thumb.selected .video-settings-modal-cover-check {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: var(--mantine-color-blue-5);
-  backdrop-filter: blur(2px);
-  color: #fff;
+  width: 32px;
+  height: 32px;
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
 }
-[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-header {
-  border-bottom: 1px solid var(--mantine-color-dark-4);
-}
 [data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-body {
   background: var(--mantine-color-dark-7);
+  scrollbar-color: var(--mantine-color-dark-4) transparent;
 }
-[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-section-title {
-  color: var(--mantine-color-bright);
+[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-body::-webkit-scrollbar-thumb {
+  background: var(--mantine-color-dark-4);
 }
-[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-cover-control {
-  border-color: var(--mantine-color-dark-4);
-  background: var(--mantine-color-dark-6);
-  color: var(--mantine-color-gray-2);
-}
-[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-cover-upload {
-  border-color: var(--mantine-color-dark-4);
-  background: var(--mantine-color-dark-6);
+[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-body::-webkit-scrollbar-thumb:hover {
+  background: var(--mantine-color-dark-3);
 }
-[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-cover-upload:hover {
-  border-color: var(--mantine-color-blue-4);
-  background: var(--mantine-color-dark-5);
+[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-section-title {
+  color: var(--mantine-color-bright);
 }
 [data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-cover-upload-label {
   color: var(--mantine-color-gray-0, #f1f3f5);
 }
-[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-cover-thumb {
-  border-color: transparent;
+[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-cover-upload {
+  background: #1f1f1f;
+}
+
+.video-settings-modal-subtitles {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs, 10px);
 }
-[data-mantine-color-scheme=dark] .video-settings-modal .video-settings-modal-cover-thumb.selected {
-  border-color: var(--mantine-color-blue-4);
+.video-settings-modal-subtitles .video-settings-modal-link {
+  margin-top: 2px;
 }
 
 .video-settings-modal-subtitles-row {
   align-items: center;
-  gap: 10px;
-  margin-bottom: var(--mantine-spacing-sm);
+  gap: var(--mantine-spacing-xs, 10px);
 }
+.video-settings-modal-subtitles-row .mantine-InputBase-root,
 .video-settings-modal-subtitles-row .mantine-Select-root {
   flex: 1;
 }
-.video-settings-modal-subtitles-row .mantine-Select-input,
 .video-settings-modal-subtitles-row .mantine-Button-root {
   height: 36px;
-}
-.video-settings-modal-subtitles-row .mantine-Button-root {
   min-width: 140px;
   border-radius: 10px;
 }
 
+.video-settings-modal-select-fullwidth {
+  width: 100% !important;
+}
+
+.video-settings-modal-language-select {
+  height: 36px;
+  min-height: 36px;
+  border: 1px solid var(--mantine-color-default-border, #ced4da);
+  border-radius: var(--mantine-radius-default, 8px);
+  background-color: var(--input-bg, var(--mantine-color-body, white));
+  font-size: var(--mantine-font-size-sm, 14px);
+  line-height: 1.45;
+  padding: 6px 12px;
+  padding-right: 32px;
+  cursor: pointer;
+  color: var(--mantine-color-default-color, black);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .video-settings-modal-subtitles-row:first-of-type {
-  margin-top: var(--mantine-spacing-xs);
+  margin-top: 0;
 }
 
 .video-settings-modal-subtitles-row:last-of-type {
   margin-bottom: 0;
 }
 
-.video-settings-modal-subtitles-label {
-  color: #ff3b30;
+.video-settings-modal-subtitles-label.video-settings-modal-subtitles-label {
+  color: var(--mantine-color-bright);
   font-weight: 500;
 }
 
-.video-settings-modal-link {
+.video-settings-modal-link.video-settings-modal-link {
   appearance: none;
   border: none;
   background: none;
   padding: 0;
   margin: 0;
   color: var(--mantine-primary-color-light-color, #4c6ef5);
-  font-size: 14px;
-  font-weight: 500;
+  font-size: var(--mantine-font-size-sm, 14px);
+  font-weight: 400;
   cursor: pointer;
   text-decoration: none;
-}
-
-.video-settings-modal .video-settings-modal-link {
-  color: var(--mantine-primary-color-light-color, #4c6ef5);
-  text-decoration: none;
-}
-
-.video-settings-modal .video-settings-modal-link.mantine-Text-root {
-  color: var(--mantine-primary-color-light-color, #4c6ef5);
+  text-align: left;
 }
 
 .video-settings-modal-link:disabled {
@@ -1258,7 +1441,7 @@ div.video-player-menu-dropdown .video-menu-item-text {
   cursor: default;
 }
 
-.video-settings-modal-upload-button {
+.video-settings-modal-upload-button.video-settings-modal-upload-button {
   height: var(--button-height-sm, 36px);
   padding: 6px var(--button-padding-x-sm, 18px);
   border-radius: var(--mantine-radius-default, 8px);
@@ -1268,8 +1451,7 @@ div.video-player-menu-dropdown .video-menu-item-text {
   font-weight: 500;
   border: none !important;
 }
-
-.video-settings-modal-upload-button:hover {
+.video-settings-modal-upload-button.video-settings-modal-upload-button:hover {
   background: var(--mantine-primary-color-light-hover, rgba(76, 110, 245, 0.16)) !important;
 }
 
@@ -1298,26 +1480,26 @@ div.video-player-menu-dropdown .video-menu-item-text {
   display: flex;
   align-items: center;
   justify-content: center;
-}._dropzone_8gcr8_1 {
+}._dropzone_12otc_1 {
   border-radius: var(--mantine-radius-default, 8px);
-  padding: 31px 60px;
+  padding: 32px 60px;
   cursor: pointer;
   transition: all 0.2s ease;
   border: 1px dashed var(--mantine-color-default-border);
   background-color: light-dark(#fff, var(--mantine-color-dark-8));
 }
-._dropzone_8gcr8_1:hover:not(._disabled_8gcr8_9) {
+._dropzone_12otc_1:hover:not(._disabled_12otc_9) {
   background-color: var(--mantine-color-default-hover);
 }
-._dropzone_8gcr8_1._focused_8gcr8_12, ._dropzone_8gcr8_1[data-accept=true] {
-  border: 1px dashed var(--primary-color-outline, #4c6ef5);
-  background: linear-gradient(0deg, var(--mantine-primary-color-light-hover) 0%, rgba(76, 110, 245, 0.12) 100%), var(--Sidebar-app-container-bg, #fff);
+._dropzone_12otc_1._focused_12otc_12, ._dropzone_12otc_1[data-accept=true] {
+  border: 1px dashed var(--primary-color-outline, #748ffc);
+  background: linear-gradient(0deg, rgba(76, 110, 245, 0.12) 0%, rgba(76, 110, 245, 0.12) 100%), light-dark(#fff, var(--mantine-color-dark-8));
 }
-._dropzone_8gcr8_1._disabled_8gcr8_9 {
+._dropzone_12otc_1._disabled_12otc_9 {
   cursor: not-allowed;
 }
 
-._dropzoneContent_8gcr8_20 {
+._dropzoneContent_12otc_20 {
   border: none;
   background: transparent !important;
   padding: 0;
@@ -1333,11 +1515,11 @@ div.video-player-menu-dropdown .video-menu-item-text {
   border-radius: var(--mantine-radius-default, 8px);
   transition: background-color 0.2s ease;
 }
-._dropzoneContent_8gcr8_20._disabled_8gcr8_9 {
+._dropzoneContent_12otc_20._disabled_12otc_9 {
   cursor: not-allowed;
 }
 
-._iconContainer_8gcr8_40 {
+._iconContainer_12otc_40 {
   width: 32px;
   height: 32px;
   display: flex;
@@ -1345,7 +1527,7 @@ div.video-player-menu-dropdown .video-menu-item-text {
   justify-content: center;
 }
 
-._contentWrapper_8gcr8_48 {
+._contentWrapper_12otc_48 {
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -1354,11 +1536,11 @@ div.video-player-menu-dropdown .video-menu-item-text {
   width: 100%;
 }
 
-._contentWrapper_8gcr8_48 ._title_8gcr8_57 {
+._contentWrapper_12otc_48 ._title_12otc_57 {
   line-height: 1.55;
   color: var(--mantine-color-bright);
 }
 
-._description_8gcr8_62 {
+._description_12otc_62 {
   line-height: 1.45;
 }