Prevue Guide Channel - CSS / Theme Notes

This page tracks “how to make it look more like Prevue”:

• box sizes
• fonts
• rectangular program blocks
• layout tuning

Program cells were rounded at first; change to rectangular:

In

player.css

:

.cell{
  border-radius: 0;   /* rectangles (Prevue-like) */
}

You can also tighten spacing:

.cells{ gap: 6px; }
.cell{ padding: 8px 10px; }

To avoid the video “resizing” during playback, the video/iframe are forced to fill the slot:

.top-left-slot video,
.top-left-slot iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* or contain */
  object-position: center;
  display: block;
  background: #000;
  border: 0;
}

If you want no cropping (letterbox instead), use:

• object-fit: contain;

We stabilized the left slot with an aspect ratio:

.top-left-slot{
  aspect-ratio: 16 / 9;
  width: 100%;
}

If the left panel becomes too tall, cap it (more space for the channel grid below):

.top-left-slot{
  max-height: 34vh;   /* tweak 30–36vh */
  height: auto;
}
.top{ align-items: stretch; }

Goal: optionally use the Prevue-style font later.

Approach:

• Add

  @font-face

  in

  player.css

• Apply the font to specific UI areas first (grid, channel numbers, header)
• Adjust letter spacing to match the era

Example structure:

@font-face{
  font-family: "Prevue";
  src: url("/prevue/assets/fonts/prevue.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
body{ font-family: Prevue, ui-sans-serif, system-ui; }

Possible target looks:

• Classic 90s Prevue
• “AmigaZ Cablevision” brand variant
• Retro-futuristic take (Amiga-inspired palette)

</code>