New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x]

[jakamy]

Made an all glass tweak for my taste here:

• Glass play buttons and cards
  
• (commented using copilot for easy edits)
  

   
/* Base styling for detail buttons */
.detailButton {
  color: #fff; /* White text for contrast */
  background: radial-gradient(
    ellipse at center,          /* Elliptical gradient centered */
    rgba(0, 0, 0, 0.4),          /* Dark translucent center */
    rgba(0, 0, 0, 0.1)          /* Fades to lighter edge */
  );
  backdrop-filter: blur(2px);          /* Applies blur behind element */
  -webkit-backdrop-filter: blur(2px);  /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */
  border-radius: 40px; /* Rounded pill shape */
}

/* Hover effect for detail buttons */
.detailButton:hover {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 150, 0.,    /* Bright yellow center */
    rgba(255, 255, 0, 0.4)      /* Fades to yellow edge */
  );
  box-shadow: 0 0 12px rgba(255, 255, 0, 0.4); /* Yellow glow on hover */
}

/* Styling for play buttons inside detail buttons */
.detailButton.btnPlay.play-button {
  color: #fff;
  background: radial-gradient(
    ellipse at center,
    rgba(128, 128, 0, 0.4),      /* Olive yellow center */
    rgba(255, 255, 0, 0.1)      /* Fades to light yellow edge */
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 40px;
}

/* Hover effect for play buttons */
.detailButton.btnPlay.play-button:hover {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 150, 0.,    /* Bright yellow center */
    rgba(255, 255, 0, 0.4)      /* Yellow edge */
  );
  box-shadow: 0 0 12px rgba(255, 255, 0, 0.4); /* Glow effect */
}

/* Styling for Emby home library buttons */
.homeLibraryButton.emby-button {
  color: #fff;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.4),          /* Dark translucent center */
    rgba(0, 0, 0, 0.1)          /* Fades to lighter edge */
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 40px;
}

/* Hover effect for Emby buttons */
.homeLibraryButton.emby-button:hover {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 150, 0.6),    /* Bright yellow center */
    rgba(255, 255, 0, 0.2)      /* Yellow edge */
  );
  box-shadow: 0 0 12px rgba(255, 255, 0, 0.4); /* Glow effect */
}

/* Styling for card boxes */
.cardBox {
  color: #fff;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.4),          /* Dark translucent center */
    rgba(0, 0, 0, 0.1)          /* Fades to lighter edge */
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px; /* Slightly rounded corners */
}

Cheers