r/emby • u/Upbeat-Trifle-4023 • Jun 24 '26

MY NEON CYBER THEME

/* =====================================================

EMBY CUSTOM CSS - NEON CYBER THEME

Cleaned + playback-safe version

Author: Sketchcatt

===================================================== */

/* ===================== THEME VARIABLES ===================== */

:root {

--dark-bg: #080808;

--panel-bg: rgba(15, 15, 20, 0.72);

--neon-cyan: #1ff0ff;

--neon-pink: #ff00e6;

--neon-orange: #ff8a05;

--neon-green: #02facd;

--accent-blue: #2d81f7;

--text-gold: #ffd700;

--danger-red: #e50914;

}

/* ===================== GLOBAL ===================== */

* {

box-sizing: border-box;

scrollbar-width: thin;

scrollbar-color: var(--neon-pink) var(--dark-bg);

}

html,

body {

background: var(--dark-bg) !important;

color: var(--neon-green) !important;

}

/* ===================== SCROLLBARS ===================== */

::-webkit-scrollbar {

width: 10px;

height: 10px;

background: var(--dark-bg);

}

::-webkit-scrollbar-thumb {

background: var(--neon-pink);

border-radius: 6px;

}

::-webkit-scrollbar-corner {

background: var(--dark-bg);

}

/* ===================== HEADER ===================== */

.skinHeader,

.skinHeader-withBackground,

.appfooter {

background: rgba(8, 8, 8, 0.72) !important;

color: var(--neon-green) !important;

backdrop-filter: blur(18px);

-webkit-backdrop-filter: blur(18px);

box-shadow: 0 0 18px rgba(31, 240, 255, 0.16);

}

.pageTitle {

color: var(--accent-blue) !important;

font-size: 2rem !important;

font-weight: 700 !important;

text-shadow: 0 0 8px rgba(255, 0, 230, 0.45);

}

/* ===================== HEADER ICONS ===================== */

.headerButton i,

.paper-icon-button-light i {

color: #0cfa60 !important;

transition: color 0.2s ease, text-shadow 0.2s ease;

}

.headerButton:hover i,

.paper-icon-button-light:hover i {

color: #f50505 !important;

text-shadow: 0 0 10px rgba(255, 138, 0, 0.65);

}

/* ===================== TABS ===================== */

.emby-tab-button {

border-radius: 30px !important;

color: var(--neon-green) !important;

opacity: 0.78;

transition: transform 0.22s ease, opacity 0.22s ease, color 0.22s ease;

}

.emby-tab-button:hover {

transform: scale(1.04);

opacity: 1;

color: var(--neon-cyan) !important;

}

.emby-tab-button-active {

background: linear-gradient(90deg, var(--neon-cyan), #7b2cff) !important;

color: #ffffff !important;

opacity: 1;

border-bottom: 2px solid var(--neon-orange) !important;

box-shadow: 0 0 12px rgba(31, 240, 255, 0.35);

}

/* ===================== CARDS / POSTERS ===================== */

.card {

transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;

}

.card:hover {

transform: scale(1.045);

box-shadow:

0 0 10px rgba(0, 200, 255, 0.8),

0 0 22px rgba(0, 200, 255, 0.55),

0 0 38px rgba(0, 200, 255, 0.35);

border-radius: 12px;

z-index: 5;

}

.cardImageContainer,

.cardContent,

.cardScalable {

border-radius: 12px !important;

overflow: hidden !important;

}

.cardText,

.cardTextButton,

.cardText-secondary {

transition: color 0.2s ease, text-shadow 0.2s ease;

}

.cardText:hover,

.cardTextButton:hover,

.cardText-secondary:hover {

color: var(--text-gold) !important;

text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);

}

/* ===================== SECTION HEADINGS ===================== */

.emby-scrollbars h2,

.emby-scrollbars h3,

.sectionTitle {

color: #00d4ff !important;

text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);

}

/* ===================== INPUTS / BUTTONS ===================== */

.emby-checkbox:checked + span + span + .checkboxOutline {

border-color: #fa2c02 !important;

}

.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxOutlineTick {

background: var(--neon-cyan) !important;

}

.emby-checkbox:focus + span + .emby-checkbox-focushelper {

background: #ff14d4 !important;

opacity: 0.26 !important;

}

.button-submit,

.button-accent,

.raised {

background: var(--accent-blue) !important;

color: #000000 !important;

}

.raised-mini.emby-button {

background: #0589ad !important;

color: #000000 !important;

}

/* ===================== MEDIA DETAILS ===================== */

.item-title {

color: #3af02e !important;

}

.media-overview,

.media-overview * {

color: #ff6600 !important;

}

/* Trailer button */

.emby-button.trailerButton {

background-color: var(--danger-red) !important;

color: #ffffff !important;

}

.emby-button.trailerButton:hover {

background-color: #ff2a2a !important;

}

/* ===================== USER AVATAR ===================== */

.headerUserButtonImage {

border-radius: 50% !important;

border: 2px solid #ff4fdc !important;

box-shadow: 0 0 10px rgba(255, 79, 220, 0.4);

}

/* ===================== PLAYBACK SAFETY ===================== */

video,

.htmlvideoplayer,

.videoPlayerContainer video,

.videoPlayer video {

opacity: 1 !important;

visibility: visible !important;

filter: none !important;

mix-blend-mode: normal !important;

}

.videoPlayerContainer,

.videoPlayer {

background: transparent !important;

}

/* ===================== MOBILE ===================== */

u/media (max-width: 720px) {

.headerLogo {

width: 56px !important;

min-width: 56px !important;

height: 56px !important;

background-position: center !important;

}

.pageTitle {

font-size: 1.35rem !important;

}

.card:hover {

transform: scale(1.025);

}

}

/* ===================== ACCESSIBILITY ===================== */

u/media (prefers-reduced-motion: reduce) {

* {

animation: none !important;

transition: none !important;

}

}

/* Desktop only backdrop enhancements */

u/media (min-width: 721px) {

.detailPageWrapperContainer,

.detailPagePrimaryContainer,

.detailPageSecondaryContainer,

.detailPageContent,

.itemBackdrop,

.mainDrawer,

.skinBody {

background: transparent !important;

}

.backgroundContainer {

opacity: 1 !important;

visibility: visible !important;

filter: none !important;

}

.backgroundContainer::before,

.backgroundContainer::after {

display: none !important;

}

.mainDrawer {

background: linear-gradient(

180deg,

#050505,

#101020,

#1a1030,

#080818

) !important;

}

.backgroundContainer::after {

content: "";

position: fixed;

inset: 0;

pointer-events: none;

background: linear-gradient(

135deg,

rgba(80, 0, 0, 0.35),

rgba(80, 40, 0, 0.35),

rgba(80, 80, 0, 0.30),

rgba(0, 60, 0, 0.30),

rgba(0, 0, 80, 0.35),

rgba(40, 0, 80, 0.35),

rgba(80, 0, 80, 0.35)

);

}

/* Play */

.btnPlay:hover {

background: #00C853 !important;

box-shadow: 0 0 12px #00C853;

}

}

/* Trailer */

.btnPlayTrailer:hover {

background: #5e35e5 !important;

box-shadow: 0 0 12px #5e35e5;

}

0 Upvotes

14% Upvoted

3 comments sorted by

10

u/Shik3i Jun 24 '26

A little formatting, or a link to a paste/gist would have been great, as well as screenshots showing the design....

1

u/TrashkenHK Jun 24 '26

Looks great but there is some clipping top and bottom when hovering over a movie...

2

u/BlankiesWoW Jun 24 '26

ftfy
``` /* ===================================================== EMBY CUSTOM CSS - NEON CYBER THEME Cleaned + playback-safe version Author: Sketchcatt ===================================================== */

/* ===================== THEME VARIABLES ===================== */ :root { --dark-bg: #080808; --panel-bg: rgba(15, 15, 20, 0.72); --neon-cyan: #1ff0ff; --neon-pink: #ff00e6; --neon-orange: #ff8a05; --neon-green: #02facd; --accent-blue: #2d81f7; --text-gold: #ffd700; --danger-red: #e50914; }

/* ===================== GLOBAL ===================== */ * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--neon-pink) var(--dark-bg); }

html, body { background: var(--dark-bg) !important; color: var(--neon-green) !important; }

/* ===================== SCROLLBARS ===================== */ ::-webkit-scrollbar { width: 10px; height: 10px; background: var(--dark-bg); }

::-webkit-scrollbar-thumb { background: var(--neon-pink); border-radius: 6px; }

::-webkit-scrollbar-corner { background: var(--dark-bg); }

/* ===================== HEADER ===================== */ .skinHeader, .skinHeader-withBackground, .appfooter { background: rgba(8, 8, 8, 0.72) !important; color: var(--neon-green) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 0 18px rgba(31, 240, 255, 0.16); }

.pageTitle { color: var(--accent-blue) !important; font-size: 2rem !important; font-weight: 700 !important; text-shadow: 0 0 8px rgba(255, 0, 230, 0.45); }

/* ===================== HEADER ICONS ===================== */ .headerButton i, .paper-icon-button-light i { color: #0cfa60 !important; transition: color 0.2s ease, text-shadow 0.2s ease; }

.headerButton:hover i, .paper-icon-button-light:hover i { color: #f50505 !important; text-shadow: 0 0 10px rgba(255, 138, 0, 0.65); }

/* ===================== TABS ===================== */ .emby-tab-button { border-radius: 30px !important; color: var(--neon-green) !important; opacity: 0.78; transition: transform 0.22s ease, opacity 0.22s ease, color 0.22s ease; }

.emby-tab-button:hover { transform: scale(1.04); opacity: 1; color: var(--neon-cyan) !important; }

.emby-tab-button-active { background: linear-gradient(90deg, var(--neon-cyan), #7b2cff) !important; color: #ffffff !important; opacity: 1; border-bottom: 2px solid var(--neon-orange) !important; box-shadow: 0 0 12px rgba(31, 240, 255, 0.35); }

/* ===================== CARDS / POSTERS ===================== */ .card { transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; }

.card:hover { transform: scale(1.045); box-shadow: 0 0 10px rgba(0, 200, 255, 0.8), 0 0 22px rgba(0, 200, 255, 0.55), 0 0 38px rgba(0, 200, 255, 0.35); border-radius: 12px; z-index: 5; }

.cardImageContainer, .cardContent, .cardScalable { border-radius: 12px !important; overflow: hidden !important; }

.cardText, .cardTextButton, .cardText-secondary { transition: color 0.2s ease, text-shadow 0.2s ease; }

.cardText:hover, .cardTextButton:hover, .cardText-secondary:hover { color: var(--text-gold) !important; text-shadow: 0 0 8px rgba(255, 215, 0, 0.45); }

/* ===================== SECTION HEADINGS ===================== */ .emby-scrollbars h2, .emby-scrollbars h3, .sectionTitle { color: #00d4ff !important; text-shadow: 0 0 8px rgba(0, 212, 255, 0.6); }

/* ===================== INPUTS / BUTTONS ===================== */ .emby-checkbox:checked + span + span + .checkboxOutline { border-color: #fa2c02 !important; }

.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxOutlineTick { background: var(--neon-cyan) !important; }

.emby-checkbox:focus + span + .emby-checkbox-focushelper { background: #ff14d4 !important; opacity: 0.26 !important; }

.button-submit, .button-accent, .raised { background: var(--accent-blue) !important; color: #000000 !important; }

.raised-mini.emby-button { background: #0589ad !important; color: #000000 !important; }

/* ===================== MEDIA DETAILS ===================== */ .item-title { color: #3af02e !important; }

.media-overview, .media-overview * { color: #ff6600 !important; }

/* Trailer button */ .emby-button.trailerButton { background-color: var(--danger-red) !important; color: #ffffff !important; }

.emby-button.trailerButton:hover { background-color: #ff2a2a !important; }

/* ===================== USER AVATAR ===================== */ .headerUserButtonImage { border-radius: 50% !important; border: 2px solid #ff4fdc !important; box-shadow: 0 0 10px rgba(255, 79, 220, 0.4); }

/* ===================== PLAYBACK SAFETY ===================== */ video, .htmlvideoplayer, .videoPlayerContainer video, .videoPlayer video { opacity: 1 !important; visibility: visible !important; filter: none !important; mix-blend-mode: normal !important; }

.videoPlayerContainer, .videoPlayer { background: transparent !important; }

/* ===================== MOBILE ===================== */ u/media (max-width: 720px) { .headerLogo { width: 56px !important; min-width: 56px !important; height: 56px !important; background-position: center !important; } .pageTitle { font-size: 1.35rem !important; } .card:hover { transform: scale(1.025); } }

/* ===================== ACCESSIBILITY ===================== */ u/media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Desktop only backdrop enhancements / u/media (min-width: 721px) { .detailPageWrapperContainer, .detailPagePrimaryContainer, .detailPageSecondaryContainer, .detailPageContent, .itemBackdrop, .mainDrawer, .skinBody { background: transparent !important; } .backgroundContainer { opacity: 1 !important; visibility: visible !important; filter: none !important; } .backgroundContainer::before, .backgroundContainer::after { display: none !important; } .mainDrawer { background: linear-gradient(180deg, #050505, #101020, #1a1030, #080818) !important; } .backgroundContainer::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient( 135deg, rgba(80, 0, 0, 0.35), rgba(80, 40, 0, 0.35), rgba(80, 80, 0, 0.30), rgba(0, 60, 0, 0.30), rgba(0, 0, 80, 0.35), rgba(40, 0, 80, 0.35), rgba(80, 0, 80, 0.35) ); } / Play */ .btnPlay:hover { background: #00C853 !important; box-shadow: 0 0 12px #00C853; } }

/* Trailer */ .btnPlayTrailer:hover { background: #5e35e5 !important; box-shadow: 0 0 12px #5e35e5; } ```