upload AI custom css so people can see how custom styles work.
This commit is contained in:
KingKDot
@@ -0,0 +1,182 @@
|
||||
/* ============================================================
|
||||
Overlord — Crimson Red Theme
|
||||
Paste into Settings → Custom CSS (replaces previous version)
|
||||
============================================================ */
|
||||
|
||||
/* ── 1. CSS Variables ─────────────────────────────────────── */
|
||||
:root {
|
||||
--color-sky-50:#fff1f2; --color-sky-100:#ffe4e6; --color-sky-200:#fecdd3;
|
||||
--color-sky-300:#fda4af; --color-sky-400:#fb7185; --color-sky-500:#f43f5e;
|
||||
--color-sky-600:#e11d48; --color-sky-700:#be123c; --color-sky-800:#9f1239;
|
||||
--color-sky-900:#881337; --color-sky-950:#4c0519;
|
||||
|
||||
--color-indigo-50:#fff1f2; --color-indigo-100:#ffe4e6; --color-indigo-200:#fecdd3;
|
||||
--color-indigo-300:#fda4af; --color-indigo-400:#fb7185; --color-indigo-500:#f43f5e;
|
||||
--color-indigo-600:#e11d48; --color-indigo-700:#be123c; --color-indigo-800:#9f1239;
|
||||
--color-indigo-900:#881337; --color-indigo-950:#4c0519;
|
||||
|
||||
--color-violet-50:#fff1f2; --color-violet-100:#ffe4e6; --color-violet-200:#fecdd3;
|
||||
--color-violet-300:#fda4af; --color-violet-400:#fb7185; --color-violet-500:#f43f5e;
|
||||
--color-violet-600:#e11d48; --color-violet-700:#be123c; --color-violet-800:#9f1239;
|
||||
--color-violet-900:#881337; --color-violet-950:#4c0519;
|
||||
|
||||
--color-blue-50:#fff1f2; --color-blue-100:#ffe4e6; --color-blue-200:#fecdd3;
|
||||
--color-blue-300:#fda4af; --color-blue-400:#fb7185; --color-blue-500:#f43f5e;
|
||||
--color-blue-600:#e11d48; --color-blue-700:#be123c; --color-blue-800:#9f1239;
|
||||
--color-blue-900:#881337; --color-blue-950:#4c0519;
|
||||
|
||||
--color-cyan-50:#fff1f2; --color-cyan-100:#ffe4e6; --color-cyan-200:#fecdd3;
|
||||
--color-cyan-300:#fda4af; --color-cyan-400:#fb7185; --color-cyan-500:#f43f5e;
|
||||
--color-cyan-600:#e11d48; --color-cyan-700:#be123c; --color-cyan-800:#9f1239;
|
||||
--color-cyan-900:#881337; --color-cyan-950:#4c0519;
|
||||
|
||||
/* UI system vars (used by input focus rings, card hovers, etc.) */
|
||||
--ui-border-strong: rgba(225, 29, 72, 0.4);
|
||||
--ui-ring: rgba(225, 29, 72, 0.28);
|
||||
}
|
||||
|
||||
/* ── 2. Page Background ───────────────────────────────────── */
|
||||
body {
|
||||
background:
|
||||
radial-gradient(120% 120% at 20% 20%, #2a0010 0%, transparent 45%),
|
||||
radial-gradient(110% 110% at 80% 0%, #1a0008 0%, transparent 50%),
|
||||
#08030a !important;
|
||||
}
|
||||
|
||||
/* ── 3. App Loader / Splash Screen ───────────────────────── */
|
||||
.app-loader-bg {
|
||||
background:
|
||||
radial-gradient(60% 50% at 20% 20%, rgba(225,29,72,0.22), transparent 70%),
|
||||
radial-gradient(50% 45% at 80% 10%, rgba(159,18,57,0.20), transparent 72%),
|
||||
radial-gradient(65% 55% at 50% 100%, rgba(127, 7,31,0.12), transparent 75%) !important;
|
||||
}
|
||||
.app-loader-core {
|
||||
border-color: rgba(225, 29, 72, 0.3) !important;
|
||||
box-shadow: 0 20px 46px rgba(0,0,0,0.5), 0 0 0 1px rgba(251,113,133,0.1) !important;
|
||||
}
|
||||
.app-loader-core::before {
|
||||
background: linear-gradient(110deg, transparent 20%, rgba(251,113,133,0.14) 50%, transparent 80%) !important;
|
||||
}
|
||||
.ring-a { border-top-color: rgba(251,113,133,0.95) !important; border-right-color: rgba(225,29,72,0.65) !important; }
|
||||
.ring-b { border-left-color: rgba(251,113,133,0.90) !important; border-bottom-color: rgba(225,29,72,0.60) !important; }
|
||||
.ring-c { border-top-color: rgba(255,205,211,0.95) !important; border-right-color: rgba(251,113,133,0.70) !important; }
|
||||
.loader-title { text-shadow: 0 0 18px rgba(225,29,72,0.3) !important; }
|
||||
.loader-percent { color: #fda4af !important; }
|
||||
.loader-track { border-color: rgba(225,29,72,0.22) !important; }
|
||||
.loader-bar {
|
||||
background: linear-gradient(90deg, rgba(251,113,133,0.9), rgba(225,29,72,0.95)) !important;
|
||||
box-shadow: 0 0 14px rgba(225,29,72,0.38) !important;
|
||||
}
|
||||
|
||||
/* ── 4. Top Nav Bar ───────────────────────────────────────── */
|
||||
#top-nav nav a:hover {
|
||||
border-color: rgba(225, 29, 72, 0.45) !important;
|
||||
}
|
||||
#top-nav nav a.nav-active {
|
||||
border-color: rgba(225, 29, 72, 0.62) !important;
|
||||
background: linear-gradient(135deg, rgba(127,7,31,0.45), rgba(30,10,20,0.9)) !important;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(251,113,133,0.18),
|
||||
0 10px 26px rgba(159,18,57,0.24) !important;
|
||||
}
|
||||
#top-nav nav a.nav-active i {
|
||||
filter: drop-shadow(0 0 10px rgba(251,113,133,0.45)) !important;
|
||||
}
|
||||
|
||||
/* ── 5. Client Count Pill ─────────────────────────────────── */
|
||||
#total-pill {
|
||||
background: linear-gradient(135deg, rgba(127,7,31,0.55), rgba(20,5,10,0.75)) !important;
|
||||
border-color: rgba(225, 29, 72, 0.5) !important;
|
||||
box-shadow: 0 8px 20px rgba(159,18,57,0.25) !important;
|
||||
}
|
||||
|
||||
/* ── 6. Filter / Search Focus Glows ──────────────────────── */
|
||||
#filter-status:focus, #filter-os:focus, #sort:focus {
|
||||
border-color: rgba(225, 29, 72, 0.65) !important;
|
||||
box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18) !important;
|
||||
}
|
||||
#search-shell:focus-within {
|
||||
border-color: rgba(225, 29, 72, 0.65) !important;
|
||||
box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18) !important;
|
||||
}
|
||||
|
||||
/* ── 7. Pagination / Selection Button Hover ───────────────── */
|
||||
#select-all:hover, #clear-selection:hover, #prev:hover, #next:hover {
|
||||
border-color: rgba(225, 29, 72, 0.45) !important;
|
||||
}
|
||||
|
||||
/* ── 8. Bulk Action Toolbar ───────────────────────────────── */
|
||||
#bulk-toolbar {
|
||||
background:
|
||||
radial-gradient(120% 120% at 0% 0%, rgba(225,29,72,0.15), transparent 55%),
|
||||
rgba(127, 7, 31, 0.3) !important;
|
||||
border-color: rgba(225, 29, 72, 0.45) !important;
|
||||
}
|
||||
|
||||
/* ── 9. Client Card Hover ─────────────────────────────────── */
|
||||
#grid article.card:hover {
|
||||
border-color: rgba(225, 29, 72, 0.45) !important;
|
||||
box-shadow:
|
||||
0 18px 36px rgba(2,6,23,0.45),
|
||||
0 0 0 1px rgba(225,29,72,0.14) !important;
|
||||
}
|
||||
|
||||
/* ── 10. Primary Button ───────────────────────────────────── */
|
||||
.button.primary {
|
||||
background: linear-gradient(120deg, #be123c, #e11d48) !important;
|
||||
border-color: rgba(251, 113, 133, 0.55) !important;
|
||||
box-shadow: 0 10px 24px rgba(159,18,57,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
|
||||
}
|
||||
.button.primary:hover {
|
||||
box-shadow: 0 6px 24px rgba(225,29,72,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
|
||||
}
|
||||
|
||||
/* ── 11. Input / Form Focus ───────────────────────────────── */
|
||||
.input-row:focus-within {
|
||||
border-color: rgba(225, 29, 72, 0.5) !important;
|
||||
box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1) !important;
|
||||
}
|
||||
.input-row:focus-within i { color: #e11d48 !important; }
|
||||
|
||||
/* ── 12. Admin Crown Icon ─────────────────────────────────── */
|
||||
.header-crown {
|
||||
background: linear-gradient(135deg, #fb7185, #e11d48) !important;
|
||||
-webkit-background-clip: text !important;
|
||||
background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
}
|
||||
|
||||
/* ── 13. Login Click Particles ────────────────────────────── */
|
||||
.login-btn-particle {
|
||||
background: radial-gradient(circle, rgba(251,113,133,1), rgba(225,29,72,0.9)) !important;
|
||||
box-shadow:
|
||||
0 0 6px rgba(225,29,72,1.0),
|
||||
0 0 12px rgba(225,29,72,0.9),
|
||||
0 0 24px rgba(225,29,72,0.7),
|
||||
0 0 36px rgba(159,18,57,0.5) !important;
|
||||
}
|
||||
|
||||
/* ── 14. Console ──────────────────────────────────────────── */
|
||||
.console-output {
|
||||
background:
|
||||
radial-gradient(120% 120% at 20% 20%, rgba(225,29,72,0.08), transparent 50%),
|
||||
radial-gradient( 80% 80% at 80% 0%, rgba(159,18,57,0.08), transparent 60%),
|
||||
#0b0208 !important;
|
||||
}
|
||||
.console-body {
|
||||
background:
|
||||
radial-gradient(120% 120% at 20% 20%, #2d0a14 0%, transparent 45%),
|
||||
radial-gradient(110% 110% at 80% 0%, #1a0810 0%, transparent 50%),
|
||||
#08030a !important;
|
||||
}
|
||||
|
||||
/* ── 15. Table Row Hover ──────────────────────────────────── */
|
||||
tbody tr:hover { background: rgba(127, 7, 31, 0.2) !important; }
|
||||
|
||||
/* ── 16. Scrollbar ────────────────────────────────────────── */
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, rgba(225,29,72,0.76), rgba(159,18,57,0.7)) !important;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, rgba(251,113,133,0.88), rgba(225,29,72,0.84)) !important;
|
||||
}
|
||||
Reference in New Issue
Block a user