The spotlight in a browser

[arrbee99 1841]

Anyone know any css to make the big spotlight in Firefox bigger vertically but keep the same horizontally. All I could get was the same size as at present but with more space top and bottom around it. Thanks.

[Luke 42530]

In case it helps it's been made slightly larger for the next build.

[Aleas 91]

On 5/16/2026 at 10:02 PM, arrbee99 said:

Anyone know any css to make the big spotlight in Firefox bigger vertically but keep the same horizontally. All I could get was the same size as at present but with more space top and bottom around it. Thanks.

You can play with this CSS to further customize spotlight

:root {
  /* --- SPOTLIGHT VARIABLES --- */
  --spotlight-width: 100%;                  /* OVERALL WIDTH: 100% (Full screen), 95% (Small edge gap), 1200px (Max size lock) */
  --spotlight-height: auto;                 /* OVERALL HEIGHT: auto (Uses Aspect Ratio), 50vh (Half screen), 400px (Fixed height) */
  --spotlight-aspect-ratio: 21 / 9;         /* SHAPE & SCALE: 16/9 (Default), 21/9 (Ultra-Wide), 3/1 (Extreme Banner), none (Disables ratio if using fixed height) */
  --spotlight-fit: cover;                   /* CROP BEHAVIOR: cover (Fills box, no bars), contain (Uncropped, has bars), 100% (Stretches) */
  --spotlight-position: center top;         /* ANCHOR POINT: right top (Protects logos/faces), center top, center (Default), left top */
  --spotlight-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%); /* TEXT SCRIM: Change the dark fade behind text. (Use 'transparent' to remove) */

  /* --- Some example options to try out: --- */

  /* --- The Cinematic Ribbon --- */
  /* --spotlight-width: 100%; --spotlight-height: auto; --spotlight-aspect-ratio: 32 / 9; --spotlight-fit: cover; --spotlight-position: center 20%; --spotlight-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%); */
  
  /* --- Extreme Letterbox --- */
  /* --spotlight-width: 100%; --spotlight-height: auto; --spotlight-aspect-ratio: 4 / 1; --spotlight-fit: cover; --spotlight-position: center 25%; --spotlight-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, transparent 90%); */
  
  /* --- Framed Billboard --- */
  /* --spotlight-width: 1400px; --spotlight-height: auto; --spotlight-aspect-ratio: 24 / 9; --spotlight-fit: cover; --spotlight-position: center 15%; --spotlight-overlay: linear-gradient(to top, rgba(0, 8, 20, 1) 0%, transparent 100%); */
  
  /* --- Uncut Showcase --- */
  /* --spotlight-width: 98%; --spotlight-height: 40vh; --spotlight-aspect-ratio: none; --spotlight-fit: contain; --spotlight-position: center; --spotlight-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%); */
  
  /* --- Thin Letterbox Showcase --- */
  /* --spotlight-width: 100%; --spotlight-height: 30vh; --spotlight-aspect-ratio: none; --spotlight-fit: contain; --spotlight-position: center; --spotlight-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, transparent 100%); */
  
  /* --- Extreme Slit --- */
  /* --spotlight-width: 100%; --spotlight-height: auto; --spotlight-aspect-ratio: 5 / 1; --spotlight-fit: cover; --spotlight-position: center 20%; --spotlight-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%); */ 
}

html[class*="theme-"] body .spotlightCard {
  width: var(--spotlight-width) !important;
  margin: 0 auto !important; 
}

html[class*="theme-"] body .spotlightCard .cardImageContainer {
  padding-bottom: 0 !important; 
  aspect-ratio: var(--spotlight-aspect-ratio) !important; 
  height: var(--spotlight-height) !important; 
  background-size: var(--spotlight-fit) !important;
  background-position: var(--spotlight-position) !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important; 
}

html[class*="theme-"] body .spotlightCard .cardImageContainer img,
html[class*="theme-"] body .spotlightCard .coveredImage {
  object-fit: var(--spotlight-fit) !important;
  object-position: var(--spotlight-position) !important;
}

html[class*="theme-"] .spotlightCardFooter {
  background:      var(--spotlight-overlay) !important;
  display:         flex !important;
  flex-direction:  column !important;
  justify-content: flex-end !important;
}

html[class*="theme-"] div.spotlightCardText:not(.mediaInfoItems):not(.spotlightCardText-first) {
  text-shadow:             0px 2px 10px rgba(0, 0, 0, 0.9) !important;
  color:                   #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight:             500 !important;
}

 

[arrbee99 1841]

Thanks for the css. Will see what Luke's 'slightly larger' means first though...

[arrbee99 1841]

Anyone noticed any difference with .12. I haven't unless my css is doing something.