homepage/static/other/jellyfin.css

/*
This file styles jellyfin and can be imported by adding:
@import url("https://bocken.org/other/jellyfin.css");
under Server -> General -> Custom CSS Code

Also requires jellyfin.js loaded via the Custom CSS/JS Injector plugin:
https://bocken.org/other/jellyfin.js
*/
:root{
--nord0: #2E3440;
--blue: #5E81AC;
--lightblue: #81A1C1;
--swiper-theme-color: var(--blue);
}

.selectionCommandsPanel,
.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator,
.itemProgressBarForeground,
.mdl-slider-background-lower,
.iconOsdProgressInner{
  background-color: var(--blue);
}
.mdl-slider,
.emby-tab-button:hover{
    color: var(--blue);
}
@media (hover: hover) and (pointer: fine){
.paper-icon-button-light:hover:not(:disabled) {
   color: var(--lightblue);
   background-color: rgba(var(--blue), 0.2);
}
}

/* Loading spinner */
.mdl-spinner__layer{
 border-color: var(--blue);
}

/* volume and timeline button color */
/* Need to be separate to apply*/
input[type="range"]::-moz-range-thumb{
   background-color: var(--blue);
}
input[type="range"]::-webkit-slider-thumb{
   background-color: var(--blue);
}

.listItemIcon:not(.listItemIcon-transparent),
.navMenuOption-selected,
.button-submit,
.defaultCardBackground1,
.defaultCardBackground2,
.defaultCardBackground3,
.defaultCardBackground4,
.defaultCardBackground5,
.emby-checkbox:checked + span + .checkboxOutline, .itemProgressBarForeground
{
    background-color: var(--blue) !important;
}
.button-link,
.button-flat:hover{
   color: var(--blue);
}
.emby-checkbox:checked + span + .checkboxOutline{
border-color: var(--blue);
}
.btnUserRating:hover,
.cardOverlayButton:has(.favorite):hover{
    color: #BF616A !important;
}

.emby-input:focus, .emby-textarea:focus{
 border-color: var(--blue);
}
.emby-select-withcolor:focus{
    border-color: var(--blue) !important;
}
.listItemIcon:not(.listItemIcon-transparent),
.navMenuOption-selected,
.button-submit,
.defaultCardBackground1,
.defaultCardBackground2,
.defaultCardBackground3,
.defaultCardBackground4,
.defaultCardBackground5,
.emby-checkbox:checked + span + .checkboxOutline,
.itemProgressBarForeground,
.taskProgressInner,
.sliderMarker.watched
{
    background-color: var(--blue) !important;
}

#divRunningTasks > p > progress + span,
div.taskProgressOuter + span{
    color: var(--blue) !important;
}
progress[value] {
    background-color: var(--blue);
}
progress[value]::-webkit-progress-value {
   background-color: var(--blue);
}

/* For Mozilla-based browsers (Firefox) */
progress[value]::-moz-progress-bar {
   background-color: var(--blue);
}

/* ═══════════════════════════════════════════
   FLOATING GLASS PILL HEADER
   Matches bocken.org homepage header style
   ═══════════════════════════════════════════ */

/* Base glass effect for all header states */
.skinHeader {
  background: rgba(20, 20, 20, 0.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Float as a pill (non-OSD) */
.skinHeader:not(.osdHeader) {
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: fit-content !important;
  min-width: min(600px, calc(100% - 1.5rem));
  max-width: calc(100% - 1.5rem);
  border-radius: 100px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  z-index: 999;
  padding: 0 0.4rem !important;
  overflow: visible !important;
}

/* Push page content below the floating header */
.skinBody {
  padding-top: 5rem !important;
}

/* Compact the top bar row */
.skinHeader:not(.osdHeader) .headerTop {
  padding: 0 0.2rem !important;
  min-height: 3rem !important;
}

/* ── Header buttons ─────────────────────── */
.skinHeader:not(.osdHeader) .headerButton {
  color: #999 !important;
  transition: all 150ms;
  border-radius: 100px;
}
.skinHeader:not(.osdHeader) .headerButton:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.1);
}

/* ── Hide the tab bar — replaced by icon buttons via JS ── */
.skinHeader:not(.osdHeader) .headerTabs {
  display: none !important;
}

/* ── Active state for injected nav buttons (home/favorites) ── */
.bocken-nav-active {
  color: white !important;
  background: rgba(136, 192, 208, 0.25) !important;
}

/* Hide the original home button — replaced by our injected one */
.headerHomeButton {
  display: none !important;
}

/* ═══════════════════════════════════════════
   SIDEBAR DRAWER
   ═══════════════════════════════════════════ */
.mainDrawer {
  background: rgba(20, 20, 20, 0.95) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ═══════════════════════════════════════════
   CARDS & LIST ITEMS
   ═══════════════════════════════════════════ */
.card {
  transition: 200ms;
}
.card:hover {
  scale: 1.05;
}

/* Play overlay on card thumbnails */
.bocken-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
  border-radius: inherit;
}
.bocken-play-overlay .material-icons {
  font-size: 3rem;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.cardImageContainer:hover .bocken-play-overlay {
  opacity: 1;
}

.listItem {
   transition: 200ms;
}
.listItem:hover {
    scale: 1.02;
}
@media (max-width: 64em){
.listItemImageButton, .listItemIndicators {
    font-size: initial !important;
}
}
.backgroundContainer {
    background-color: #000;
}
.pageTitleWithDefaultLogo {
    background-image: url(https://bocken.org/static/css/logos/logo_full_light.png);
}

/* Bocken logo link */
.bocken-logo-link {
  display: flex;
  text-decoration: none;
  transition: filter 150ms;
}
.bocken-logo-link:hover .pageTitleWithDefaultLogo {
  /* Tint white logo to Nord lightblue (#81A1C1) */
  filter: brightness(0) saturate(100%) invert(61%) sepia(52%) saturate(212%) hue-rotate(169deg) brightness(92%) contrast(94%);
}

/* Toast notification */
.bocken-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.9);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 100px;
  font-size: 0.85rem;
  z-index: 9999;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  opacity: 1;
  transition: opacity 400ms;
}
.bocken-toast-hide {
  opacity: 0;
}

/* ═══════════════════════════════════════════
   VIDEO DETAIL PAGE
   ═══════════════════════════════════════════ */
.detailPagePrimaryContainer,
.detailPageSecondaryContainer,
.detailRibbon {
  background-color: #000 !important;
}

/* Always show the detail logo, not just on large screens */
.detailLogo {
  display: block !important;
}

/* ═══════════════════════════════════════════
   MOBILE ADJUSTMENTS
   ═══════════════════════════════════════════ */
@media (max-width: 800px) {
  .skinHeader:not(.osdHeader) {
    min-width: unset;
    width: calc(100% - 1rem);
    top: 8px !important;
    border-radius: 20px !important;
    padding: 0 0.2rem !important;
  }
}