cdnutter / Plex Kuma CSS

/* Import Inter for a clean look, though we will prioritize System Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); :root { --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --apple-green: #32d74b; /* macOS Green */ --glass-border: rgba(255, 255, 255, 0.15); --glass-highlight: rgba(255, 255, 255, 0.1); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); } /* --- Global Background (The "Liquid") --- */ body { /* Rich Mesh Gradient - Mimics macOS Wallpaper */ background: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%); background-color: #000; /* Fallback */ background-attachment: fixed; background-size: cover; /* Apple Typography Stack */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif !important; color: var(--text-primary) !important; -webkit-font-smoothing: antialiased; } .container { max-width: 1000px !important; padding-top: 50px; } /* --- Reset the Default Containers --- */ .shadow-box, .card { background-color: transparent !important; box-shadow: none !important; border: none !important; } .monitor-list { padding: 0 !important; background: transparent !important; } /* --- The Glass Card Effect (Shared Class) --- */ /* This logic applies to the banner and the items */ .overall-status, .item, .btn { background: rgba(255, 255, 255, 0.03) !important; /* Very subtle fill */ backdrop-filter: blur(25px) saturate(180%) !important; /* The "Apple" Frost */ -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border) !important; /* Subtle inner white glow at top to simulate light */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), var(--glass-shadow) !important; border-radius: 18px !important; /* Larger Apple-style radius */ } /* --- Top Buttons --- */ .btn { color: var(--text-primary) !important; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; } .btn:hover { background: rgba(255, 255, 255, 0.15) !important; transform: scale(1.02); } /* --- "All Systems Operational" Banner --- */ .overall-status { /* Slight green tint for the status box */ background: rgba(50, 215, 75, 0.1) !important; color: var(--apple-green) !important; border: 1px solid rgba(50, 215, 75, 0.3) !important; padding: 25px !important; margin-bottom: 50px !important; font-weight: 600; font-size: 1.2rem; text-shadow: 0 0 20px rgba(50, 215, 75, 0.4); } /* --- Group Headers --- */ .group-title { color: var(--text-secondary) !important; font-size: 1rem !important; font-weight: 600; margin-bottom: 15px !important; margin-top: 40px !important; padding-left: 10px; border: none !important; opacity: 0.9; text-shadow: 0 2px 4px rgba(0,0,0,0.5); } /* --- Service Items (The Cards) --- */ .item { margin-bottom: 15px; padding: 18px 25px !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .item-inner { margin: 0 !important; padding: 0 !important; } /* Hover effect: Lifts and brightens the glass */ .item:hover { transform: translateY(-5px) scale(1.01); background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important; } /* Service Name */ .item .info { font-weight: 500; font-size: 1.1rem; letter-spacing: -0.02em; /* Tight Apple kerning */ } /* 100% Badge - Pill Shape */ .badge { border-radius: 50px !important; /* Pill shape */ padding: 6px 12px !important; font-weight: 600; font-size: 0.75rem; backdrop-filter: none !important; /* Optimization */ } .badge-success { background-color: var(--apple-green) !important; color: #000 !important; /* Black text on neon green matches iOS */ box-shadow: 0 0 10px rgba(50, 215, 75, 0.4); } /* --- Uptime Bars --- */ .uptime-bar { height: 30px !important; margin-top: 5px; } /* Use Apple Green for bars */ .uptime-bar rect[fill="#28a745"], .uptime-bar rect[fill="#5cd65c"] { fill: var(--apple-green) !important; } /* --- Footer --- */ footer { margin-top: 60px !important; color: var(--text-secondary); opacity: 0.6; font-size: 0.8rem; } /* --- Scrollbar (Invisible/Glassy) --- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }