u/Upbeat-Trifle-4023

my theme.

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

EMBY CYBER NEON THEME v2.0

Author: Sketchcatt

Optimized by ChatGPT (Part 1 - Core System)

✔ Colors preserved exactly

✔ Duplicates removed

✔ Broken CSS fixed

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

/* ===================== 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 (DEDUPED) ===================== */

.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 (DEDUPED) ===================== */

.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);

}

/* ===================== CUSTOM LOGO (FIXED) ===================== */

/* Hide default Emby logos */

.headerLogo img,

.headerLeft img,

.headerLeft .logo,

.headerLeft .logoImage,

.imgLogoIcon,

.adminDrawerLogo img {

display: none !important;

}

/* Main header logo */

.headerLogo,

.headerLeft {

background: url(https://i.imgur.com/Jr7pGQX.png) no-repeat center / contain !important;

width: 220px !important;

height: 60px !important;

display: flex !important;

align-items: center !important;

justify-content: flex-start !important;

filter: drop-shadow(0 0 10px rgba(255,0,230,.7));

}

/* Admin drawer logo */

.adminDrawerLogo {

background: url(https://i.imgur.com/Jr7pGQX.png) no-repeat center / contain !important;

height: 52px !important;

margin: 8px 0 !important;

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

filter: drop-shadow(0 0 8px rgba(31, 240, 255, 0.6));

}

/* Page title logo fallback */

.pageTitleWithDefaultLogo {

background-image: url(https://i.imgur.com/Jr7pGQX.png) !important;

background-size: contain !important;

background-repeat: no-repeat !important;

background-position: 90px center !important;

}

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

EMBY CYBER NEON THEME v2.0

Part 2 - UI & Layout System

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

/* ===================== 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);

}

/* ===================== SIDE MENU / DRAWER ===================== */

.mainDrawer .navMenuOption:hover {

background: rgba(31, 240, 255, 0.12) !important;

color: #ffffff !important;

border-left: 4px solid var(--neon-cyan);

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

}

.mainDrawer .navMenuOption:hover i {

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

text-shadow: 0 0 10px var(--neon-cyan);

}

/* ===================== 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;

}

/* Primary buttons */

.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);

}

/* ===================== TOP NAV TABS ===================== */

.emby-tab-button {

color: rgba(255, 255, 255, 0.75) !important;

background: transparent !important;

border-radius: 20px !important;

padding: 8px 14px !important;

margin: 0 4px !important;

transition: all 0.2s ease;

}

.emby-tab-button:hover {

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

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

transform: translateY(-1px);

}

.emby-tab-button-active {

color: #ffffff !important;

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

border-radius: 25px !important;

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

}

/* ===================== MAIN ACTION BUTTONS ===================== */

.detailButton,

.detailButton span,

.detailButton i {

transition: all 0.25s ease;

}

.detailButton:hover {

background: linear-gradient(

135deg,

var(--neon-cyan),

var(--accent-blue)

) !important;

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

box-shadow:

0 0 12px rgba(31, 240, 255, 0.8),

0 0 24px rgba(31, 240, 255, 0.4);

transform: translateY(-2px) scale(1.05);

}

.detailButton:hover span {

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

text-shadow: 0 0 8px var(--text-gold);

}

.detailButton:hover i,

.detailButton:hover .button-icon {

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

text-shadow: 0 0 10px var(--neon-pink);

}

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

EMBY CYBER NEON THEME v2.0

Part 3 - Final Polish Layer

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

/* ===================== 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 OPTIMIZATION ===================== */

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 BACKDROP SYSTEM ===================== */

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

/* Clear Emby default backgrounds */

.detailPageWrapperContainer,

.detailPagePrimaryContainer,

.detailPageSecondaryContainer,

.detailPageContent,

.itemBackdrop,

.skinBody {

background: transparent !important;

}

/* Ensure background layer is visible */

.backgroundContainer {

opacity: 1 !important;

visibility: visible !important;

filter: none !important;

}

/* Remove default overlay layers */

.backgroundContainer::before,

.backgroundContainer::after {

display: none !important;

}

/* Main drawer gradient system */

.mainDrawer {

background: linear-gradient(

180deg,

#050505,

#0b0b12,

#120a20,

#070710

) !important;

border-right: 1px solid rgba(31, 240, 255, 0.15);

}

/* Ambient background overlay */

.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 button hover enhancement */

.btnPlay:hover {

background: #00C853 !important;

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

}

}

{

margin: 0px;

padding: 0px;

}/* =====================================================

🎬 EMBY CUSTOM CSS – NEON CYBER THEME

Author: Sketchcatt

Version: 1.0

Install: Dashboard → Settings → Custom CSS

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

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

*{

margin:0;

padding:0;

box-sizing:border-box;

scrollbar-width:thin;

scrollbar-color:#fc2de7 #080808

}

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

:root{

--dark-bg:#080808;

--neon-cyan:#1ff0ff;

--neon-pink:#ff00e6;

--neon-orange:#ff8a05;

--neon-green:#02facd;

--accent-blue:#0c57d6;

--scrollbar:#fc2de7

}

/* ===================== POSTER IMAGE ======================== */

.card {

transition: all .3s ease;

}

.card:hover {

transform: scale(1.08);

box-shadow:

0 0 10px #00c8ff,

0 0 20px #00c8ff,

0 0 40px #00c8ff;

border-radius: 12px;

}

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

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

border-color:#fa2c02!important

}

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

background:#1ff0ff;

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

}

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

background:#ff14d4!important;

opacity:.26!important

}

.button-submit,.button-accent,.raised{

background:#0f98fa!important;

color:#000!important

}

.raised-mini.emby-button{

background:#2df7a6!important;

color:#000!important

}

/* Change video title color on mouse hover */

.cardText:hover,

.cardTextButton:hover,

.cardText-secondary:hover {

color: #FFD700 !important; /* Gold */

}

.emby-scrollbars h2,

.emby-scrollbars h3 {

color: #00d4ff !important;

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

}

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

HEADER

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

.skinHeader {

background: rgba(15,15,20,.45) !important;

backdrop-filter: blur(18px);

}

.pageTitle {

font-size: 2rem !important;

font-weight: bold;

}

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

TABS

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

.emby-tab-button {

border-radius: 30px;

transition: .3s;

}

.emby-tab-button:hover {

transform: scale(1.05);

}

.emby-tab-button-active {

background: linear-gradient(90deg,#00d4ff,#7b2cff) !important;

color: white !important;

}

/* ===================== BACKGROUND ===================== */

/* 🌈 Dark Rainbow Blend */

.backgroundContainer,

.skinBody,

.mainAnimatedPage,

.page {

background:

radial-gradient(circle at 10% 20%, rgba(255, 0, 80, .30), transparent 35%),

radial-gradient(circle at 85% 15%, rgba(255, 120, 0, .28), transparent 35%),

radial-gradient(circle at 90% 75%, rgba(255, 220, 0, .22), transparent 40%),

radial-gradient(circle at 20% 85%, rgba(0, 180, 120, .25), transparent 35%),

radial-gradient(circle at 50% 50%, rgba(0, 140, 255, .30), transparent 40%),

radial-gradient(circle at 70% 30%, rgba(140, 60, 255, .35), transparent 40%),

linear-gradient(

135deg,

#050505 0%,

#0d0816 20%,

#140b20 40%,

#0b101f 60%,

#150d12 80%,

#050505 100%

) !important;

background-attachment: fixed;

}

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

.skinHeader,.skinHeader-withBackground,.appfooter{

background:#080808;

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

color:#02fabc!important

}

.pageTitle{

color:#2e8cff!important;

text-shadow:0 0 8px rgba(255,79,220,.45)

}

.emby-tab-button-active{

color:#ff8a05!important;

border-bottom:2px solid #ff8a05!important

}

.emby-tab-button:not(.emby-tab-button-active){

color:#02facd!important;

opacity:.75

}

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

.headerButton i,.paper-icon-button-light i{

color:#0cfa60!important;

transition:color .2s ease,text-shadow .2s ease

}

.headerButton:hover i{

color:#f50505!important;

text-shadow:0 0 10px rgba(255,138,0,.55)

}

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

.headerUserButtonImage{

border-radius:50%;

border:2px solid #ff4fdc!important;

box-shadow:0 0 10px rgba(255,79,220,.4)

}

/* ===================== CUSTOM LOGO ===================== */

.headerLogo img,

.headerLeft img,

.headerLeft .logo,

.headerLeft .logoImage,

.imgLogoIcon,

.adminDrawerLogo img {

display: none !important;

}

.headerLogo,

.headerLeft {

background: url(https://i.imgur.com/5dYSOWC.png) no-repeat center/contain !important;

width: 220px !important;

height: 60px !important;

display: flex !important;

align-items: center !important;

justify-content: flex-start !important; /* Ensures logo stays left */

filter: drop-shadow(0 0 10px rgba(255,0,230,.7));

}

.adminDrawerLogo {

background: url(https://i.imgur.com/5dYSOWC.png) no-repeat center/contain !important;

height: 52px !important;

margin: 8px 0 !important;

border-bottom: 1px solid #ff8a05 !important;

filter: drop-shadow(0 0 8px rgba(31,240,255,.6));

}

.pageTitleWithDefaultLogo {

background-image: url(https://i.imgur.com/5dYSOWC.png) !important;

}

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

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

.headerLogo{

width:56px!important;

min-width:56px!important;

height:56px!important;

background-position:center!important

}

}

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

::-webkit-scrollbar{

width:10px;

height:10px;

background:#fc2de7

}

::-webkit-scrollbar-thumb{

background:#fc2de7;

border-radius:2px

}

::-webkit-scrollbar-corner{

background:#080808

}

/* ===================== MEDIA ITEMS ===================== */

.item-title{color:#3af02e!important}

/* Trailer button */

.emby-button.trailerButton{

background-color:#e50914!important;

color:#fff!important

}

.emby-button.trailerButton:hover{

background-color:#ff2a2a!important

}

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

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

*{animation:none!important;transition:none!important}

}

.media-overview,

.media-overview * {

color: #ff6600;

}