Untitled

/* Main Container - Grid Layout matching author's design */
.main {
  --scale: 1;
  --gap-below-controls: 10px;
  --gap-between-seek-and-controls: 0;
  --button-glyph-scale: var(--scale, 1);
  --base-widget-gap: calc(6px * var(--scale, 1));
  
  display: grid;
  grid-template:
    "content content content" 1fr
    "seek seek seek" auto
    ". . ." var(--gap-between-seek-and-controls, 0)
    "left-gutter controls right-gutter" auto
    ". . ." var(--gap-below-controls, min-content)
    / 1fr auto 1fr;
  
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  position: relative;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Video Content */
.content {
  grid-area: content;
  align-items: center;
  background: #000;
  display: grid;
  justify-items: center;
  max-width: 100%;
  min-height: 0;
  position: relative;
}

.youtubePlayer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
}

.youtubePlayer iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  z-index: 1;
}

/* Tray Background - spans the lower area */
.trayBackground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 69px;
  z-index: 5;
  pointer-events: none;
}

/* Seek Bar */
.seek {
  grid-area: seek;
  position: relative;
  z-index: 10;
  height: 16px;
  margin-top: -16px;
  cursor: pointer;
  user-select: none;
}

.seekTrack {
  position: absolute;
  width: 100%;
  height: calc(4px * var(--scale, 1));
  top: 50%;
  transform: translateY(-50%);
  border: calc(1px * var(--scale, 1)) solid #a8a8a9;
  border-bottom-color: #cecdcf;
  border-radius: calc(2px * var(--scale, 1));
  box-sizing: border-box;
}

.seekFill {
  position: absolute;
  height: calc(4px * var(--scale, 1));
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background: linear-gradient(180deg, #7fc9fa, #014cb6, #619ff2) left calc(1px * var(--scale, 1)) / 1px calc(3px * var(--scale, 1)) repeat-x;
  border-radius: calc(2px * var(--scale, 1)) 0 0 calc(2px * var(--scale, 1));
}

.seekThumb {
  position: absolute;
  width: calc(15px * var(--scale, 1));
  height: calc(8px * var(--scale, 1));
  top: 50%;
  transform: translateY(-50%);
  border-image: url('/images/mediaPlayer/spritesheet-slider-thumb.svg') 50% 49.9% / calc(4px * var(--scale, 1)) calc(4px * var(--scale, 1));
  cursor: pointer;
}

/* Controls Container */
.controls {
  grid-area: controls;
  position: relative;
  z-index: 10;
  
  --height: calc(31px * var(--scale, 1));
  --padding: 4px;
  --tray-spritesheet: url('/images/mediaPlayer/spritesheet-tray-background-non-overlay.svg');
  --tray-spritesheet-w: 52px;
  --tray-spritesheet-h: 219px;
  --tray-spritesheet-scale: 1;
  --tray-spritesheet-effective-scale: calc(var(--scale, 1) / var(--tray-spritesheet-scale));
  --tray-spritesheet-effective-size: calc(var(--tray-spritesheet-w) * var(--tray-spritesheet-effective-scale)) calc(var(--tray-spritesheet-h) * var(--tray-spritesheet-effective-scale));
  --tray-endcap-sprite-w: 15.5px;
  --tray-endcap-sprite-h: 31px;
  --tray-endcap-effective-w: calc(var(--tray-endcap-sprite-w) * var(--tray-spritesheet-effective-scale));
  --tray-middle-sprite-y: 32px;
  --tray-middle-sprite-h: 31px;
  --tray-bulge-sprite-y: 58px;
  --tray-bulge-sprite-w: 40.497px;
  --tray-bulge-sprite-h: 51px;
  --tray-bulge-effective-w: calc(var(--tray-bulge-sprite-w) * var(--tray-spritesheet-effective-scale));
  --tray-bulge-effective-h: calc(var(--tray-bulge-sprite-h) * var(--tray-spritesheet-effective-scale));
  --play-pause-flex-area-width: var(--tray-bulge-effective-w);
  --play-pause-flex-area-height: var(--tray-bulge-effective-h);
  --extra-diff: calc((var(--tray-bulge-sprite-h) - var(--tray-middle-sprite-h)) * var(--tray-spritesheet-effective-scale) / 2);
  
  display: grid;
  grid-template: "left play right" var(--height) / min-content var(--play-pause-flex-area-width) min-content;
  align-items: center;
  justify-content: center;
  justify-self: center;
  height: var(--height);
  margin-bottom: 12px;
  margin-top: calc(var(--extra-diff));
}

/* Tray bulge background behind play button */
.controls::before {
  content: " ";
  grid-area: play;
  align-self: center;
  justify-self: center;
  background: var(--tray-spritesheet) left calc(var(--tray-bulge-sprite-y) * -1 * var(--tray-spritesheet-effective-scale)) / var(--tray-spritesheet-effective-size) no-repeat;
  width: var(--tray-bulge-effective-w);
  height: var(--tray-bulge-effective-h);
  margin-top: -10px;
}

/* Left section */
.left {
  grid-area: left;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  gap: var(--base-widget-gap, calc(6px * var(--scale, 1)));
  height: var(--height);
  justify-content: flex-end;
  background: var(--tray-spritesheet) left calc(var(--tray-middle-sprite-y) * -1 * var(--tray-spritesheet-effective-scale)) / var(--tray-spritesheet-effective-size) repeat-x;
  box-sizing: border-box;
  position: relative;
  border-left: var(--tray-endcap-effective-w) solid transparent;
  padding-right: var(--padding);
  padding-left: calc(4px * var(--scale, 1));
}

/* Left endcap */
.left::before {
  content: " ";
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: var(--tray-endcap-effective-w);
  background: var(--tray-spritesheet) 0 0 / var(--tray-spritesheet-effective-size) no-repeat;
}

/* Right section */
.right {
  grid-area: right;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  gap: var(--base-widget-gap, calc(6px * var(--scale, 1)));
  height: var(--height);
  justify-content: flex-start;
  background: var(--tray-spritesheet) left calc(var(--tray-middle-sprite-y) * -1 * var(--tray-spritesheet-effective-scale)) / var(--tray-spritesheet-effective-size) repeat-x;
  box-sizing: border-box;
  position: relative;
  border-right: var(--tray-endcap-effective-w) solid transparent;
  padding-left: var(--padding);
  padding-right: calc(4px * var(--scale, 1));
}

/* Right endcap */
.right::before {
  content: " ";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: var(--tray-endcap-effective-w);
  background: var(--tray-spritesheet) right 0 / var(--tray-spritesheet-effective-size) no-repeat;
}

/* Gutter Right */
.gutterRight {
  grid-area: right-gutter;
  display: grid;
  grid-template: ". rearrangeables" / 1fr auto;
  align-items: center;
  padding: calc(12px * var(--scale, 1));
  position: relative;
  z-index: 10;
}

.rearrangeables {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: var(--base-widget-gap, calc(6px * var(--scale, 1)));
  grid-area: rearrangeables;
}

/* Time Display */
.currentTime {
  background: linear-gradient(180deg, #23242a 80%, #18191d);
  border: 1.2px solid #23242a;
  border-radius: 1.2em;
  box-shadow: inset 0 2px 8px 0 #111a, inset 0 1.5px 0 0 #4448, inset 0 -2px 6px 0 #000c, inset 0 4px 12px 0 #000b;
  color: #fff;
  display: inline-block;
  font-weight: 400;
  font-size: 11px;
  line-height: 2.1em;
  min-width: 13ch;
  padding: 0.1em 0.5em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  margin-right: 6px;
}

/* Buttons Base */
.prevButton,
.nextButton,
.muteButton,
.loopButton {
  all: unset;
  appearance: none;
  color: transparent;
  display: inline-block;
  pointer-events: none;
  position: relative;
  user-select: none;
  cursor: pointer;
}

.prevButton::after,
.nextButton::after,
.muteButton::after,
.loopButton::after,
.playPauseButton::after {
  content: " ";
  display: block;
  position: absolute;
  cursor: pointer;
  inset: 0;
  pointer-events: auto;
}

/* Prev/Next Buttons */
.prevButton,
.nextButton {
  --glass-spritesheet: url('/images/mediaPlayer/spritesheet-next.svg');
  --glass-sprite-count: 5;
  --glass-sprite-width: 112px;
  --glass-sprite-height: 70px;
  --glass-sprite-scale: 2;
  --glass-sprite-effective-scale: calc(var(--scale, 1) / var(--glass-sprite-scale));
  --glass-sprite-effective-width: calc(var(--glass-sprite-width) * var(--glass-sprite-effective-scale));
  --glass-sprite-effective-height: calc(var(--glass-sprite-height) * var(--glass-sprite-effective-scale));
  --glass-x: 0px;
  --glass-y: -12px;
  --glass-current-sprite: 0;
  
  --glyph-spritesheet: url('/images/mediaPlayer/spritesheet-glyphs-next.svg');
  --glyph-sprite-width: 112px;
  --glyph-sprite-height: 70px;
  --glyph-sprite-scale: 2;
  --glyph-sprite-effective-scale: calc(var(--button-glyph-scale, var(--scale, 1)) / var(--glyph-sprite-scale));
  --glyph-sprite-effective-width: calc(var(--glyph-sprite-width) * var(--glyph-sprite-effective-scale));
  --glyph-sprite-effective-height: calc(var(--glyph-sprite-height) * var(--glyph-sprite-effective-scale));
  
  width: calc(48px * var(--scale, 1));
  height: calc( 23px * var(--scale, 1));
  position: relative;
  z-index: 10;
}

.prevButton::before,
.nextButton::before {
  content: " ";
  position: absolute;
  background: url('/images/mediaPlayer/spritesheet-glyphs-next.svg') 0 0 / calc(var(--glass-sprite-count) * var(--glass-sprite-effective-width)) var(--glass-sprite-effective-height) no-repeat,
              var(--glass-spritesheet) 0 0 / calc(var(--glass-sprite-count) * var(--glass-sprite-effective-width)) var(--glass-sprite-effective-height) no-repeat;
  width: var(--glass-sprite-effective-width);
  height: var(--glass-sprite-effective-height);
  left: calc(var(--glass-x) * var(--glass-sprite-effective-scale));
  top: calc(var(--glass-y) * var(--glass-sprite-effective-scale));
}

.nextButton:hover::before {
  background-position-x: calc(-1 * var(--glass-sprite-effective-width)), calc(-1 * var(--glass-sprite-effective-width));
}

.nextButton:active::before {
  background-position-x: calc(-2 * var(--glass-sprite-effective-width)), calc(-2 * var(--glass-sprite-effective-width));
}

.prevButton {
  transform: scaleX(-1);
  transform-origin: center center;
}

.prevButton:hover::before {
  background-position-x: calc(-1 * var(--glass-sprite-effective-width)), calc(-1 * var(--glass-sprite-effective-width));
}

.prevButton:active::before {
  background-position-x: calc(-2 * var(--glass-sprite-effective-width)), calc(-2 * var(--glass-sprite-effective-width));
}

/* Play/Pause Button */
.playPauseButton {
  --diameter: calc(43px * var(--scale, 1));
  --radius: calc(var(--diameter) / 2);
  
  --glass-spritesheet: url('/images/mediaPlayer/spritesheet-jewel.svg');
  --glass-sprite-width: 100px;
  --glass-sprite-height: 100px;
  --glass-sprite-scale: 2;
  --glass-sprite-count: 4;
  --glass-sprite-effective-scale: calc(var(--scale, 1) / var(--glass-sprite-scale));
  --glass-sprite-effective-width: calc(var(--glass-sprite-width) * var(--glass-sprite-effective-scale));
  --glass-sprite-effective-height: calc(var(--glass-sprite-height) * var(--glass-sprite-effective-scale));
  --glass-x: 0px;
  --glass-y: 0px;
  --glass-current-sprite: 0;
  
  --glyph-spritesheet: url('/images/mediaPlayer/spritesheet-glyphs-play-pause.svg');
  --glyph-sprite-width: 100px;
  --glyph-sprite-height: 100px;
  --glyph-sprite-scale: 2;
  --glyph-sprite-effective-scale: calc(var(--button-glyph-scale, var(--scale, 1)) / var(--glyph-sprite-scale));
  --glyph-sprite-effective-width: calc(var(--glyph-sprite-width) * var(--glyph-sprite-effective-scale));
  --glyph-sprite-effective-height: calc(var(--glyph-sprite-height) * var(--glyph-sprite-effective-scale));
  --glyph-x: 0px;
  --glyph-y: 0px;
  --glyph-current-col: 0;
  
  all: unset;
  grid-area: play;
  justify-self: center;
  align-self: center;
  width: var(--diameter);
  height: var(--diameter);
  cursor: pointer;
  position: relative;
  z-index: 11;
  margin-top: -10px;
}

.playPauseButton::before {
  content: " ";
  position: absolute;
  background: var(--glyph-spritesheet) calc(var(--glyph-x) * var(--glyph-sprite-effective-scale) - var(--glyph-current-col) * var(--glyph-sprite-effective-width)) center / calc(2 * var(--glyph-sprite-effective-width)) var(--glyph-sprite-effective-height) no-repeat,
              var(--glass-spritesheet) calc(var(--glass-current-sprite) * -1 * var(--glass-sprite-effective-width)) 0 / calc(var(--glass-sprite-count) * var(--glass-sprite-effective-width)) var(--glass-sprite-effective-height) no-repeat;
  width: var(--glass-sprite-effective-width);
  height: var(--glass-sprite-effective-height);
  left: calc(var(--glass-x) * var(--glass-sprite-effective-scale));
  top: calc(var(--glass-y) * var(--glass-sprite-effective-scale));
}

.playPauseButton.playing::before {
  background-position-x: calc(var(--glyph-x) * var(--glyph-sprite-effective-scale) - var(--glyph-sprite-effective-width)), calc(var(--glass-current-sprite) * -1 * var(--glass-sprite-effective-width));
}

.playPauseButton:hover::before {
  background-position-x: calc(var(--glyph-x) * var(--glyph-sprite-effective-scale) - var(--glyph-current-col) * var(--glyph-sprite-effective-width)), calc(-1 * var(--glass-sprite-effective-width));
}

.playPauseButton.playing:hover::before {
  background-position-x: calc(var(--glyph-x) * var(--glyph-sprite-effective-scale) - var(--glyph-sprite-effective-width)), calc(-1 * var(--glass-sprite-effective-width));
}

.playPauseButton:active::before {
  background-position-x: calc(var(--glyph-x) * var(--glyph-sprite-effective-scale) - var(--glyph-current-col) * var(--glyph-sprite-effective-width)), calc(-2 * var(--glass-sprite-effective-width));
}

.playPauseButton.playing:active::before {
  background-position-x: calc(var(--glyph-x) * var(--glyph-sprite-effective-scale) - var(--glyph-sprite-effective-width)), calc(-2 * var(--glass-sprite-effective-width));
}

/* Basic Button (mute, loop) */
.muteButton,
.loopButton {
  --glass-spritesheet: url('/images/mediaPlayer/spritesheet-generic.svg');
  --glass-sprite-width: 58px;
  --glass-sprite-height: 60px;
  --glass-sprite-scale: 2;
  --glass-sprite-count: 4;
  --glass-sprite-effective-scale: calc(var(--scale, 1) / var(--glass-sprite-scale));
  --glass-sprite-effective-width: calc(var(--glass-sprite-width) * var(--glass-sprite-effective-scale));
  --glass-sprite-effective-height: calc(var(--glass-sprite-height) * var(--glass-sprite-effective-scale));
  --glass-x: 0px;
  --glass-y: 0px;
  --glass-current-sprite: 0;
  
  --glyph-spritesheet: url('/images/mediaPlayer/spritesheet-glyphs-general.svg');
  --glyph-spritesheet-rows: 5;
  --glyph-spritesheet-cols: 5;
  --glyph-sprite-width: 50px;
  --glyph-sprite-height: 50px;
  --glyph-sprite-scale: 2;
  --glyph-sprite-effective-scale: calc(var(--button-glyph-scale, var(--scale, 1)) / var(--glyph-sprite-scale));
  --glyph-sprite-effective-width: calc(var(--glyph-sprite-width) * var(--glyph-sprite-effective-scale));
  --glyph-sprite-effective-height: calc(var(--glyph-sprite-height) * var(--glyph-sprite-effective-scale));
  --glyph-x: -1.5px;
  --glyph-y: -2px;
  --glyph-current-row: 0;
  --glyph-current-col: 0;
  
  width: calc(23px * var(--scale, 1));
  height: calc(23px * var(--scale, 1));
  position: relative;
  z-index: 10;
}

.muteButton::before,
.loopButton::before {
  content: " ";
  position: absolute;
  width: var(--glass-sprite-effective-width);
  height: var(--glass-sprite-effective-height);
  left: calc(var(--glass-x) * var(--glass-sprite-effective-scale));
  top: calc(var(--glass-y) * var(--glass-sprite-effective-scale));
  background: var(--glyph-spritesheet) calc(var(--glyph-x) * var(--glyph-sprite-effective-scale) - var(--glyph-current-col) * var(--glyph-sprite-effective-width)) calc(var(--glyph-y) * var(--glyph-sprite-effective-scale) - var(--glyph-current-row) * var(--glyph-sprite-effective-height)) / calc(var(--glyph-spritesheet-cols) * var(--glyph-sprite-effective-width)) calc(var(--glyph-spritesheet-rows) * var(--glyph-sprite-effective-height)) no-repeat,
              var(--glass-spritesheet) calc(var(--glass-current-sprite) * -1 * var(--glass-sprite-effective-width)) 0 / calc(var(--glass-sprite-count) * var(--glass-sprite-effective-width)) var(--glass-sprite-effective-height) no-repeat;
}

.muteButton:hover::before,
.loopButton:hover::before {
  background-position-x: calc(var(--glyph-x) * var(--glyph-sprite-effective-scale) - var(--glyph-current-col) * var(--glyph-sprite-effective-width)), calc(-1 * var(--glass-sprite-effective-width));
}

/* Mute button volume glyph - row 3 */
.muteButton {
  --glyph-current-row: 3;
  --glyph-current-col: 3;
}

/* Volume levels */
.muteButton[data-volume="high"] {
  --glyph-current-col: 3;
}

.muteButton[data-volume="medium"] {
  --glyph-current-col: 2;
}

.muteButton[data-volume="low"] {
  --glyph-current-col: 1;
}

.muteButton[data-volume="muted"],
.muteButton.muted {
  --glyph-current-col: 4;
}

/* Loop/Swap Button */
.loopButton {
  --glyph-current-row: 0;
  --glyph-current-col: 0;
}

.loopButton.active {
  --glyph-current-col: 1;
}

/* Volume Slider */
.volumeSlider {
  --track-height: calc(4px * var(--scale, 1));
  
  position: relative;
  width: calc(67px * var(--scale, 1));
  height: calc(30px * var(--scale, 1));
  margin-left: calc(4px * var(--scale, 1));
  cursor: pointer;
  user-select: none;
  z-index: 10;
}

.volumeTrack {
  position: absolute;
  width: 100%;
  height: var(--track-height);
  top: 50%;
  transform: translateY(-50%);
  border: calc(1px * var(--scale, 1)) solid #a8a8a9;
  border-bottom-color: #cecdcf;
  border-radius: calc(2px * var(--scale, 1));
  box-sizing: border-box;
}

.volumeFill {
  position: absolute;
  height: var(--track-height);
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background: linear-gradient(180deg, #7fc9fa, #014cb6, #619ff2) left calc(1px * var(--scale, 1)) / 1px calc(3px * var(--scale, 1)) repeat-x;
  border-radius: calc(2px * var(--scale, 1)) 0 0 calc(2px * var(--scale, 1));
}

.volumeThumb {
  --visible-width: calc(12px * var(--scale, 1));
  --visible-height: calc(12px * var(--scale, 1));
  --corner-size: calc(var(--visible-height) / 2);
  
  position: absolute;
  width: var(--visible-width);
  height: var(--visible-height);
  top: 50%;
  transform: translateY(-50%);
  border-image: url('/images/mediaPlayer/spritesheet-slider-thumb.svg') 50% 49.9% / var(--corner-size) var(--corner-size);
  cursor: pointer;
}

/* Spacing adjustments matching author's CSS */
.nextButton {
  margin-left: calc(10px * var(--scale, 1));
}

.muteButton {
  margin-left: calc(24px * var(--scale, 1));
}

.volumeSlider {
  margin-left: calc(4px * var(--scale, 1));
}

/* Hide scrollbars */
.main::-webkit-scrollbar {
  display: none;
}

.main {
  scrollbar-width: none;
}