musictaste.space - Dark Theme by dark-themes

/* ==UserStyle==
@name         musictaste.space - Dark Theme
@namespace    Dark-Themes
@version      1.0.0
@description  musictaste.space - Dark Theme
@author       Dark-Themes
@supportURL   https://github.com/KanashiiDev/personal-stylesheets/issues
@var text     primary 'Primary Color (RGB)' '200,200,200'
@var text     theme 'Theme Color (RGB)' '10,10,10'
@var color    dark1 'Dark Color' #111
@var color    dark2 'Dark Color 2' #181818
@var color    dark3 'Dark Color 3' #1e1e1e
@var color    text1 'Text Color' #c5c5c5
@var color    text2 'Text Color 2' #8d8d8d
@var color    border1 'Border Color' #383838
@var color    border1_hover 'Border Hover Color' #666
@preprocessor stylus
==/UserStyle== */
@-moz-document domain("musictaste.space") {
    :root {
        --color-primary: primary;
        --color-theme: theme;
        --color-dark1: dark1;
        --color-dark2: dark2;
        --color-dark3: dark3;
        --color-text: text1;
        --color-text2: text2;
        --color-border1: border1;
        --color-border1-hover: border1_hover
    }

    .bg-theme,
    div:not(div#home) > .w-full.bg-theme.text-primary.relative.overflow-hidden,
    .pb-4.bg-primary.text-theme.max-w-lg.rounded-xl.w-full.flex.flex-col.items-start.px-4.z-10 {
        background: var(--color-dark1)
    }

    button.w-fit.mx-auto.flex.flex-row.items-center.px-4.gap-2.py-2.rounded-full.bg-primary.text-theme.font-mono.text-sm,
    a.inline-flex.font-mono.justify-center.rounded-full.text-sm.font-medium.transition-all.duration-100.flex.justify-center.items-center.gap-2.uppercase,
    .w-full.flex.items-center.justify-center.p-3.bg-primary.rounded-b-sm.cursor-pointer,
    button.inline-flex.font-mono.justify-center.rounded-full.text-sm.font-medium.transition-all.duration-100.flex.justify-center.items-center.gap-2.uppercase,
    button.inline-flex.font-mono.justify-center.rounded-full.text-sm.font-medium.py-3.px-8.mt-8,
    input.border-primary.border.p-2.rounded-md.w-full.text-gray-500.font-mono.text-sm.bg-opacity-20,
    .border.border-primary.bg-gradient-to-r.from-theme.via-theme.to-transparent.rounded-xl.cursor-pointer,
    footer.bg-primary.py-4,
    .my-10.flex.flex-col.w-full.mx-auto.max-w-screen-sm .bg-theme,
    .ring-opacity-5,
    .ring-accent,
    .bg-accent {
        background: var(--color-dark2)
    }

    .bg-gray-100,
    .ring-accent:hover {
        background: var(--color-dark3)
    }

    h2,
    h1#top-genres,
    h1#top-artists,
    h1#top-tracks,
    h1.font-serif.text-4xl,
    .w-full.bg-theme.text-primary.relative.overflow-hidden > .container.mx-auto.px-4 > .mt-24.p-2.min-h-screen.mb-12 h1,
    .w-full.bg-theme.text-primary.relative.overflow-hidden > .container.mx-auto.px-4 > .mt-24.p-2.min-h-screen.mb-12 ul,
    .w-full.bg-theme.text-primary.relative.overflow-hidden > .container.mx-auto.px-4 > .mt-24.p-2.min-h-screen.mb-12 ol,
    .w-full.bg-theme.text-primary.relative.overflow-hidden > .container.mx-auto.px-4 > .mt-24.p-2.min-h-screen.mb-12 p,
    .w-full.bg-theme.text-primary.relative.overflow-hidden > .container.mx-auto.px-4 > .pt-40.p-2.min-h-screen > h1.text-3xl.font-extrabold.font-serif.text-primary.pb-4,
    .w-full.bg-theme.text-primary.relative.overflow-hidden > .container.mx-auto.px-4 > .pt-40.p-2.min-h-screen > p.font-body.text-primary.pb-4.text-left,
    .w-full.bg-theme.text-primary.relative.overflow-hidden > .container.mx-auto.px-4 > .mt-24.p-2.min-h-screen.mb-12 > h3.mt-6.pb-2.text-2xl,
    .w-full.bg-theme.text-primary.relative.overflow-hidden > .container.mx-auto.px-4 > .mt-24.p-2.min-h-screen.mb-12 > h4.mt-4.pb-2.text-xl,
    .w-full.bg-theme.text-primary.relative.overflow-hidden > .container.mx-auto.px-4 > .mt-24.p-2.min-h-screen.mb-12 > h5.mt-4.pb-2.text-lg.font-bold,
    p.text-4xl.font-serif,
    p.font-body.text-center.mb-8.mt-8,
    .text-4xl.font-bold.font-serif.mt-4.text-accent,
    .flex.flex-row.gap-2.items-center,
    .font-bold.text-ellipsis.overflow-hidden,
    a.inline-flex.font-mono.justify-center.rounded-full.text-sm.font-medium.transition-all.duration-100.flex.justify-center.items-center.gap-2.uppercase,
    button.px-2.border-primary.border-opacity-50.transition-colors.uppercase.tracking-wide.text-sm.bg-accent.text-theme.border-accent.border-opacity-100,
    .font-body.mt-1.w-full.min-w-0.text-center p.overflow-ellipsis.overflow-hidden.whitespace-nowrap,
    button.inline-flex.font-mono.justify-center.rounded-full.text-sm.font-medium.transition-all.duration-100.flex.justify-center.items-center.gap-2.uppercase,
    h1.text-3xl.mt-2.text-center.w-full,
    .opacity-50.font-mono.text-3xl.my-auto svg,
    button.inline-flex.font-mono.justify-center.rounded-full.text-sm.font-medium.py-3.px-8.mt-8,
    p.text-xl,
    h3.font-serif.text-2xl,
    h3.text-4xl.font-bold.mb-4.text-center,
    .text-center.text-sm.font-mono.mt-4.text-primary.h-16,
    button.flex.flex-row.items-center.px-2.gap-2.py-1.rounded-full.border-primary.border.text-primary.font-mono.text-xs,
    .text-sm.font-body,
    .text-xl.font-bold.font-serif.text-center,
    .font-mono.uppercase.text-xs.mx-auto.my-2.text-center,
    h3.text-lg.font-serif,
    .font-mono.text-sm.opacity-50.flex.items-center.gap-2.tracking-wider,
    .mix-blend-hard-light > div > svg,
    footer p,
    p.text-mono.uppercase.tracking-wider.font-bold.text-sm,
    .ring-opacity-5 button,
    a {
        color: var(--color-text)
    }

    .flex.items-start.justify-between.w-full > .w-28.mt-4.text-theme.text-xl.opacity-20 > span.p-1.cursor-pointer.rounded-full.w-2.h-2,
    p.font-body.text-lg.text-primary.mt-8,
    .flex.flex-col.items-center.justify-center p.text-lg.font-mono.font-bold,
    .flex.flex-col.items-center.justify-center p.text-md.font-body.font-bold,
    p.text-sm.font-mono,
    button.px-2.border.border-primary.border-opacity-50.transition-colors.uppercase.tracking-wide.text-sm,
    .font-body.mt-8.text-center.max-w-md,
    .text-xl.font-serif.text-center,
    .text-sm.opacity-50.text-ellipsis.overflow-hidden,
    span.font-mono.text-xs.bg-accent.rounded-md.tracking-wider.py-1.px-2.uppercase.text-theme.text-center,
    p.text-lg.tracking-wider.w-full,
    p.text-center.max-w-sm.text-lg.font-body,
    p.text-4xl.mt-4.font-bold,
    .font-mono.uppercase.text-xs.mx-auto.mt-10.text-center.opacity-30,
    p.text-sm.font-mono.-mt-1 {
        color: var(--color-text2)
    }

    .border-primary,
    .bg-gray-100,
    .border-accent {
        border-color: var(--color-border1)
    }

    .w-16.h-16.rounded-full.border-2.border-accent.overflow-hidden:hover,
    .border-accent:hover {
        border-color: var(--color-border1-hover)
    }

    .w-full.bg-theme.text-primary.relative.overflow-hidden {
        box-shadow: 0px -2px 2px var(--color-border1)!important
    }

    input.border-primary.border.p-2.rounded-md.w-full.text-gray-500.font-mono.text-sm.bg-opacity-20:focus {
        outline: var(--color-border1) solid 2px
    }

    .font-mono.uppercase.text-xs.mx-auto.mt-10.text-center.opacity-30,
    .border.border-primary.bg-gradient-to-r.from-theme.via-theme.to-transparent.rounded-xl .h-6.w-12.opacity-80.overflow-hidden,
    .flex.flex-row.items-center.gap-2.text-primary .font-normal {
        filter: brightness(1.5)
    }

    section.flex.flex-col.w-full.h-72 .div {
        animation: 0;
        border-radius: 10px
    }
}