Weeb Central - Deep Dark by xiggi

/* ==UserStyle==
@name         Weeb Central - Deep Dark
@version      20250222.12.38
@namespace    https://userstyles.world/user/xiggi
@description  Deep Dark theme for Weeb Central.
@author       xiggi
@license      No License
==/UserStyle== */

@-moz-document domain("weebcentral.com") {
    :root {
        /** Backgrounds **/
        --main-bg: rgb(12, 12, 12);
        
        --second-bg: rgb(21, 21, 21);
        --second-bg-opacity: rgba(21, 21, 21, .5);
        
        --third-bg: rgb(31, 31, 31);
        --third-bg-hover: rgb(31 31 31 / 80%);;
        
        --gray-bg: rgb(31, 31, 31);
        
        --purple: #491eff;
        --purple-bg: rgba(73, 30, 255, .3);
        --purple-border: rgba(95, 67, 213, .5);
        
--fallback-p: #491eff;
    --fallback-pc: #d4dbff;
    --fallback-s: #ff41c7;
    --fallback-sc: #fff9fc;
    --fallback-a: #00cfbd;
    --fallback-ac: #00100d;
    --fallback-n: #2b3440;
    --fallback-nc: #d7dde4;
    --fallback-b1: var(--main-bg);
    --fallback-b2: var(--second-bg);
    --fallback-b3: var(--third-bg);
    --fallback-bc: #ccc;
    --fallback-in: #00b3f0;
    --fallback-inc: #000000;
    --fallback-su: #00ca92;
    --fallback-suc: #000000;
    --fallback-wa: #ffc22d;
    --fallback-wac: #000000;
    --fallback-er: #ff6f70;
    --fallback-erc: #000000;
}

.input-bordered {
    border-color: transparent;
}

.hover\:bg-base-100:hover, .hover\:bg-base-100:hover {
    color: #fff;
}

.menu li>*:not(ul,.menu-title,details,.btn):active, .menu li>*:not(ul,.menu-title,details,.btn).active, .menu li>details>summary:active {
    background-color: var(--purple-bg);
}

.menu li>*:not(ul,.menu-title,details,.btn):hover, .menu li>*:not(ul,.menu-title,details,.btn).active, .menu li>details>summary:hover {
    background-color: var(--purple);
    color: #fff;
}

.avatar img, .avatar, .w-32.rounded-full, .rounded-full {
    border-radius: 1px;
}

a.hover\:bg-base-100.p-4.flex.items-center.gap-2.opacity-50 {
    opacity: inherit;
}

.link-info:hover, a.hover\:bg-base-300.flex-1.flex.items-center.p-2:hover {
    color: #fff;
    text-decoration: none;
}

.bg-gray-200 {
    background-color: var(--third-bg);
}
.border-gray-200 {
    border-color:var(--third-bg);
}

.text-black {
    color: #fff;
}

.textarea-bordered {
    border-color: var(--third-bg);
}

.input:focus, .input:focus-within, .textarea:focus {
    border-color: var(--purple-border);
    outline-color:var(--purple-border);
    background: var(--third-bg);
    color: #fff;
}

.chat-bubble {
    background-color: var(--main-bg);
    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
}

.divide-slate-500>:not([hidden]) ~ :not([hidden]) {
    border-color: var(--main-bg);
}

.w-full.h-16.absolute.bottom-0.flex.flex-col.items-center.justify-center.bg-gradient-to-r.from-black.to-slate-900.hover\:from-slate-900.hover\:to-black.opacity-90 {
    background: linear-gradient(to top, var(--second-bg), var(--third-bg) 90%,transparent 80%);
}

.glide__slide a:hover {
    opacity: 50%;
}

.border-slate-500 {
    border-color: var(--main-bg)
}

.hover\:bg-base-300:hover {
    color: #fff;
    transition: 0.2s;
}

.alert {
    border-radius: 5px;
}

section.flex.items-center.gap-2.text-sm.opacity-50, time.opacity-50.text-sm.ml-1, .flex.items-center.gap-2.text-sm.opacity-50 {
    opacity: inherit;
}

*, ::before, ::after {
    border-color: transparent;
}

.modal-box {
    background-color: var(--second-bg);
}

ul.w-full.menu.menu-horizontal.bg-base-200.gap-2 {
    background: var(--third-bg);
}

ul.dropdown-content.menu.bg-base-100.z-\[1\].w-52.p-0.mt-2.shadow.border-2.border-base-300 {
    box-shadow: 1px 1px 20px var(--third-bg);
    border-color: var(--third-bg);
}

li.h-px.bg-base-content.opacity-40 {
    background: var(--third-bg);
}

.w-full.btn.btn-primary.btn-sm, button.md\:hidden.border-none.bg-primary.flex.items-center.justify-center.gap-2.py-2 {
    background: var(--purple-bg);
    border-color: transparent;
    color: #ccc;
}

.w-full.btn.btn-primary.btn-sm:hover, button.md\:hidden.border-none.bg-primary.flex.items-center.justify-center.gap-2.py-2:hover {
    background: var(--purple);
    color: #fff;
}

.btn-error {
    background-color: rgba(255, 111, 112, .2);
    border-color: transparent;
    color: #ccc;
    outline-color: var(--fallback-er,oklch(var(--er)/1));
}

.btn-error:hover {
    background-color: rgba(255, 111, 112, .5);
    border-color: transparent;
    color: #fff;
    outline-color: var(--fallback-er,oklch(var(--er)/1));
}

a.link.link-hover:hover {
    color: #fff;
    text-decoration: none;
}
}