fix(player): default theme padding breaks due to css resets

mihar-22 · mihar-22 · commit cf9b193c4e2e · 2024-04-22T16:39:05.000+10:00
diff --git a/packages/vidstack/styles/player/default/buttons.css b/packages/vidstack/styles/player/default/buttons.css
@@ -15,9 +15,7 @@
   background: none;
   outline: none;
   border: none;
-  padding: var(--media-button-padding, 0px);
   border-radius: var(--media-button-border-radius, 8px);
-  color: var(--media-button-color, var(--media-controls-color, #f5f5f5));
   width: var(--media-button-size, 40px);
   height: var(--media-button-size, 40px);
   transition: transform 0.2s ease-out;
@@ -31,6 +29,8 @@
 
 .vds-button {
   border: var(--media-button-border);
+  color: var(--media-button-color, var(--media-controls-color, #f5f5f5));
+  padding: var(--media-button-padding, 0px);
 }
 
 :where([data-fullscreen] .vds-button) {
@@ -113,17 +113,20 @@
 }
 
 :where(.vds-live-button-text) {
-  background-color: var(--media-live-button-bg, #8a8a8a);
-  border-radius: var(--media-live-button-border-radius, 2px);
-  color: var(--media-live-button-color, #161616);
   font-family: var(--media-font-family, sans-serif);
   font-size: var(--media-live-button-font-size, 12px);
   font-weight: var(--media-live-button-font-weight, 600);
   letter-spacing: var(--media-live-button-letter-spacing, 1.5px);
-  padding: var(--media-live-button-padding, 1px 4px);
   transition: color 0.3s ease;
 }
 
+.vds-live-button-text {
+  background-color: var(--media-live-button-bg, #8a8a8a);
+  border-radius: var(--media-live-button-border-radius, 2px);
+  color: var(--media-live-button-color, #161616);
+  padding: var(--media-live-button-padding, 1px 4px);
+}
+
 :where(.vds-live-button[data-focus] .vds-live-button-text) {
   box-shadow: var(--media-focus-ring);
 }
diff --git a/packages/vidstack/styles/player/default/captions.css b/packages/vidstack/styles/player/default/captions.css
@@ -85,11 +85,14 @@
   unicode-bidi: plaintext;
   min-width: min-content;
   min-height: min-content;
-  padding: var(--media-cue-display-padding);
   background-color: var(--media-user-display-bg, var(--media-cue-display-bg));
   border-radius: var(--media-cue-display-border-radius);
 }
 
+.vds-captions [data-part='cue-display'] {
+  padding: var(--media-cue-display-padding);
+}
+
 :where(.vds-captions[data-dir='rtl'] [data-part='cue-display']) {
   direction: rtl;
 }
@@ -101,17 +104,20 @@
   border: var(--media-cue-border, unset);
   border-radius: var(--media-cue-border-radius, 2px);
   backdrop-filter: var(--media-cue-backdrop, blur(8px));
-  padding: var(--cue-padding);
   line-height: var(--cue-line-height);
-  background-color: var(--cue-bg-color);
   box-sizing: border-box;
-  color: var(--cue-color);
   box-shadow: var(--media-cue-box-shadow, var(--cue-box-shadow));
   white-space: var(--cue-white-space, pre-wrap);
   outline: var(--cue-outline);
   text-shadow: var(--media-user-text-shadow, var(--cue-text-shadow));
 }
 
+.vds-captions [data-part='cue'] {
+  background-color: var(--cue-bg-color);
+  color: var(--cue-color);
+  padding: var(--cue-padding);
+}
+
 :where(.vds-captions [data-part='cue-display'][data-vertical] [data-part='cue']) {
   --cue-padding: var(--cue-padding-x) var(--cue-padding-y);
 }
diff --git a/packages/vidstack/styles/player/default/keyboard.css b/packages/vidstack/styles/player/default/keyboard.css
@@ -26,7 +26,6 @@
 
 :where(.vds-kb-text) {
   display: inline-block;
-  padding: var(--media-kb-text-padding, 10px 20px);
   font-size: var(--media-kb-text-size, 150%);
   font-family: var(--media-font-family, sans-serif);
   backdrop-filter: blur(2px);
@@ -37,6 +36,7 @@
 .vds-kb-text {
   color: var(--media-kb-text-color, var(--default-color));
   background-color: var(--media-kb-text-bg, var(--default-bg));
+  padding: var(--media-kb-text-padding, 10px 20px);
 }
 
 .light .vds-kb-text {
diff --git a/packages/vidstack/styles/player/default/layouts/audio.css b/packages/vidstack/styles/player/default/layouts/audio.css
@@ -81,7 +81,7 @@
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  */
 
-:where(.vds-audio-layout .vds-controls) {
+.vds-audio-layout .vds-controls {
   padding-inline: 6px;
   border-radius: var(--audio-border-radius, 6px);
 }
diff --git a/packages/vidstack/styles/player/default/layouts/video.css b/packages/vidstack/styles/player/default/layouts/video.css
@@ -51,26 +51,26 @@
   );
 }
 
-:where(.vds-video-layout .vds-controls-group) {
+.vds-video-layout .vds-controls-group {
   align-items: center;
   display: flex;
   pointer-events: auto;
   z-index: 0;
   padding: 4px 6px;
 }
 
-:where(.vds-video-layout .vds-controls-group:first-child) {
+.vds-video-layout .vds-controls-group:first-child {
   z-index: 50;
 }
 
 /* second last group */
-:where(.vds-video-layout .vds-controls-group:nth-last-child(2)) {
+.vds-video-layout .vds-controls-group:nth-last-child(2) {
   padding: 0 12px;
   z-index: 11;
   margin-bottom: -16px;
 }
 
-:where(.vds-video-layout:not([data-sm]) .vds-controls-group:last-child) {
+.vds-video-layout:not([data-sm]) .vds-controls-group:last-child {
   --media-menu-y-offset: 26px;
   --media-tooltip-y-offset: 26px;
   --media-slider-preview-offset: 26px;
@@ -126,7 +126,7 @@
   border-radius: var(--video-slider-thumbnail-border-radius, 2px);
 }
 
-:where(.vds-video-layout .vds-time-slider .vds-slider-value) {
+.vds-video-layout .vds-time-slider .vds-slider-value {
   background-color: var(--video-time-bg, unset);
   text-shadow:
     -1px -1px 0 #333333,
@@ -458,7 +458,7 @@
   margin-bottom: 0;
 }
 
-:where(.vds-video-layout[data-sm] .vds-controls-group) {
+.vds-video-layout[data-sm] .vds-controls-group {
   padding: 2px;
 }
 
@@ -542,6 +542,9 @@
   margin-right: 8px;
   margin-bottom: 8px;
   z-index: 10;
+}
+
+.vds-video-layout .vds-start-duration .vds-time {
   padding: var(--video-sm-start-duration-padding, 3px 6px);
   color: var(--video-sm-start-duration-color, var(--video-controls-color));
   background-color: var(--video-sm-start-duration-bg, rgba(0 0 0 / 0.64));
diff --git a/packages/vidstack/styles/player/default/menus.css b/packages/vidstack/styles/player/default/menus.css
@@ -245,7 +245,6 @@
 }
 
 :where(.vds-menu-items[data-root]) {
-  padding: var(--root-padding);
   background-color: var(--root-bg);
   border-radius: var(--root-border-radius);
   box-shadow: var(--media-menu-box-shadow);
@@ -266,6 +265,7 @@
 
 .vds-menu-items[data-root] {
   border: var(--root-border);
+  padding: var(--root-padding);
 }
 
 :where([data-view-type='video']) :where(.vds-menu-items[data-root]) {
@@ -416,7 +416,6 @@
   border-radius: var(--item-border-radius);
   box-sizing: border-box;
   min-height: var(--item-min-height);
-  padding: var(--item-padding);
   font-size: var(--font-size);
   outline: none;
 }
@@ -425,6 +424,7 @@
 .vds-radio {
   color: var(--text-color);
   background-color: var(--item-bg);
+  padding: var(--item-padding);
 }
 
 .vds-menu-item:focus-visible,
@@ -816,21 +816,24 @@
  */
 
 :where(.vds-chapters-menu-items) {
-  padding: var(--media-chapters-padding, 0);
   min-width: var(--media-chapters-min-width, var(--media-menu-min-width, 220px));
 }
 
+.vds-chapters-menu-items {
+  padding: var(--media-chapters-padding, 0);
+}
+
 :where(.vds-menu-items:has(.vds-chapters-radio-group[data-thumbnails])) {
   min-width: var(--media-chapters-with-thumbnails-min-width, 300px);
 }
 
 :where(.vds-chapter-radio) {
   border-radius: 0;
-  padding: var(--item-padding);
 }
 
 .vds-chapters-radio {
   border-bottom: var(--chapter-divider);
+  padding: var(--item-padding);
 }
 
 :where(.vds-chapter-radio:last-child) {
@@ -879,16 +882,19 @@
 
 :where(.vds-chapters-radio-group .vds-chapter-radio-start-time) {
   display: inline-block;
-  padding: var(--media-chapters-start-time-padding, 1px 4px);
   letter-spacing: var(--media-chapters-start-time-letter-spacing, 0.4px);
   border-radius: var(--media-chapters-start-time-border-radius, 2px);
-  color: var(--text-secondary-color);
   font-size: var(--chapter-time-font-size);
   font-weight: var(--chapter-time-font-weight);
-  background-color: var(--section-bg);
   margin-top: var(--chapter-time-gap);
 }
 
+.vds-chapters-radio-group .vds-chapter-radio-start-time {
+  color: var(--text-secondary-color);
+  background-color: var(--section-bg);
+  padding: var(--media-chapters-start-time-padding, 1px 4px);
+}
+
 :where(.vds-chapters-radio-group .vds-chapter-radio-duration) {
   color: var(--text-hint-color);
   background-color: var(--chapter-duration-bg);
@@ -926,6 +932,6 @@
   flex-basis: 100%;
 }
 
-:where(.vds-menu-items[data-keyboard]) .vds-chapters-radio-group:focus-within {
+.vds-menu-items[data-keyboard] .vds-chapters-radio-group:focus-within {
   padding: var(--media-chapters-focus-padding, 4px);
 }
diff --git a/packages/vidstack/styles/player/default/sliders.css b/packages/vidstack/styles/player/default/sliders.css
@@ -192,15 +192,12 @@
   transition: opacity 0.2s ease-in;
 }
 
-:where(.vds-slider-value) {
-  padding: var(--media-slider-value-padding, 1px 10px);
-  color: var(--media-slider-value-color, white);
+.vds-slider-value {
   background-color: var(--media-slider-value-bg, black);
   border-radius: var(--media-slider-value-border-radius, 2px);
-}
-
-.vds-slider-value {
   border: var(--media-slider-value-border);
+  color: var(--media-slider-value-color, white);
+  padding: var(--media-slider-value-padding, 1px 10px);
 }
 
 :where(
diff --git a/packages/vidstack/styles/player/default/time.css b/packages/vidstack/styles/player/default/time.css
@@ -20,7 +20,6 @@
   font-size: var(--media-time-font-size, 15px);
   font-weight: var(--media-time-font-weight, 400);
   font-family: var(--media-font-family, sans-serif);
-  padding: var(--media-time-padding, 2px);
   border-radius: var(--media-time-border-radius, 2px);
   letter-spacing: var(--media-time-letter-spacing, 0.025em);
 }
@@ -30,6 +29,7 @@
   color: var(--media-time-color, var(--default-color));
   background-color: var(--media-time-bg);
   border: var(--media-time-border);
+  padding: var(--media-time-padding, 2px);
 }
 
 :where(.vds-time:focus-visible) {
diff --git a/packages/vidstack/styles/player/default/tooltips.css b/packages/vidstack/styles/player/default/tooltips.css
@@ -19,14 +19,14 @@
   white-space: nowrap;
   z-index: 10;
   will-change: transform, opacity;
-  border-radius: var(--media-tooltip-border-radius, 2px);
-  padding: var(--media-tooltip-padding, 2px 8px);
 }
 
 .vds-tooltip-content {
-  color: var(--media-tooltip-color, var(--default-color));
+  border-radius: var(--media-tooltip-border-radius, 2px);
   background-color: var(--media-tooltip-bg-color, var(--default-bg));
   border: var(--media-tooltip-border, var(--default-border));
+  color: var(--media-tooltip-color, var(--default-color));
+  padding: var(--media-tooltip-padding, 2px 8px);
 }
 
 .light .vds-tooltip-content {

Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@`
`81`	`81`	`* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
`82`	`82`	`*/`
`83`	`83`
`84`		`-:where(.vds-audio-layout .vds-controls) {`
	`84`	`+.vds-audio-layout .vds-controls {`
`85`	`85`	`padding-inline: 6px;`
`86`	`86`	`border-radius: var(--audio-border-radius, 6px);`
`87`	`87`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,6 @@`
`20`	`20`	`font-size: var(--media-time-font-size, 15px);`
`21`	`21`	`font-weight: var(--media-time-font-weight, 400);`
`22`	`22`	`font-family: var(--media-font-family, sans-serif);`
`23`		`- padding: var(--media-time-padding, 2px);`
`24`	`23`	`border-radius: var(--media-time-border-radius, 2px);`
`25`	`24`	`letter-spacing: var(--media-time-letter-spacing, 0.025em);`
`26`	`25`	`}`
`@@ -30,6 +29,7 @@`
`30`	`29`	`color: var(--media-time-color, var(--default-color));`
`31`	`30`	`background-color: var(--media-time-bg);`
`32`	`31`	`border: var(--media-time-border);`
	`32`	`+ padding: var(--media-time-padding, 2px);`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`:where(.vds-time:focus-visible) {`