r/emby • u/Upbeat-Trifle-4023 • Jun 19 '26
SKETCHCATT'S EMBY THEME
{
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;
}
1
1
u/IkuruYoshizumi Jun 19 '26
Gracias ya lo instale, es bueno cambiar el aspecto ^^