SOL by sunflower

/* ==UserStyle==
@name           sunset
@namespace      sunsetcharacteraibutterroachtheme
@version        2.10.1
@description    a theme for character.ai's redesign
@author         butterroach
==/UserStyle== */
@-moz-document domain("character.ai") {
    @import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');/* THAT'S RIGHT!!!! WE ARE USING CABIN TO FIX MULTIPLE UPSTREAM ISSUES I HATE THIS I HATE THIS I HATE THIS */
    @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap&text=📌'); /* just to make sure everyone can see the emoji */
    :root {
        --surface-elevation-3: #ebba5e;
        /* background color for messages sent by the user (this also changes a little bit more but bleh) */
        --surface-elevation-2: rgb(38, 39, 43);
        /* now i have to do this because of the effect i decided to add for no reason at all */
        --sunset-theme-version: "v2.10";
        /* SO I DON'T FORGET LIKE I JUST ALMOST DID */
    }

    div[class*="bg-surface-elevation-2"] {
        border-top-left-radius: 0px !important;
        /* do cool little thingy on messages from the ai */
        transition: 0.2s;
        background-color: rgba(38, 39, 43, 75%);
        /* is there a better way of doing this */
        backdrop-filter: blur(100px) !important;
        /* SNIFFFF OH YES YES I LOVE BLUR OH YES */
    }

    div[class*="bg-surface-elevation-3"] {
        transition: 0.2s;
        border-top-right-radius: 0px !important;
        /* do cool little thing on messages from the user */
        background-color: #ebba5ebf;
        backdrop-filter: blur(100px) !important;
    }

    div[class*="bg-surface-elevation-2"]:hover {
        background-color: rgb(23, 23, 23, 75%);
    }

    div[class*="bg-surface-elevation-3"]:hover {
        background-color: #ae8947bf;
    }

    * {
        font-family: "Cabin" !important;
        /* :PPPPPP */
        scrollbar-color: var(--surface-elevation-3) #0000007f !important;
    }

    div[class*="bg-surface-elevation-3"] *,
    div[class*="bg-surface-elevation-3"] ol li::marker,
    div.space-y-2 label:not(div div div div form div div label.relative),
    div.space-y-2 input,
    div.flex div.relative div.space-y-2 div.w-full label,
    div.space-y-2 input,
    div.flex div.relative div.space-y-2 div.w-full textarea,
    button.text-secondary-foreground {
        color: black;
        font-weight: 1000 !important;
        font-size: 16.5px !important;
        /* :P */
    }

    div[class*="bg-surface-elevation-3"] a:link {
        color: blue;
        /* :P */
    }

    div[class*="bg-surface-elevation-2"] a:link {
        color: #00bcd4;
        /* :P */
    }

    div[class*="bg-surface-elevation-3"] a:visited {
        color: purple;
        /* :P */
    }

    div[class*="bg-surface-elevation-2"] a:visited {
        color: magenta;
        /* :P */
    }

    p[title*="edited"]::before {
        content: "(edited)";
        font-weight: 700 !important;
        font-size: 13px !important;
        visibility: visible;
        color: #333d;
    }

    p[title*="edited"] {
        visibility: hidden;
    }

    div[class*="bg-surface-elevation-"] div div pre code span, div[class*="bg-surface-elevation-"] div div code {
        /* fix code stuff AAAAAAAAAA */
        color: white;
        font-family: monospace !important;
        font-weight: 400 !important;
        font-size: 15px !important;
    }

    button.text-secondary-foreground:hover {
        background-color: var(--surface-elevation-3);
        /* nuh uh (isn't consistent with the other button in the same exact ui page tab but who cares) */
    }

    div[class*="bg-surface-elevation-"] * {
        font-weight: 500;
        /* make text in messages slightly bolder */
    }

    main[class^="jsx"] {
        background-image: url(https://wallpapercave.com/wp/jgbFbWR.jpg);
        /* COOL ASS BACKGROUND IMAGE !!!!! this is the only reason it's called "sunset" */
    }

    main.h-\[100dvh\] {
        backdrop-filter: blur(10px);
        /* blur background image on chat and homepage */
    }

    aside.h-\[100dvh\] {
        backdrop-filter: brightness(50%) blur(10px);
        /* i couldn't figure out how to get that one part back and simply bluring 10px would show an artifact so im just hiding the artifact :3 i hate this */
    }

    .w-80 {
        backdrop-filter: blur(100px) brightness(75%);
        /* blur and darken background image on right sidebar */
    }
    
    @supports (-webkit-font-smoothing: antialiased) {
        /* I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. I HATE CHROME. */
        .w-80 {
            background-color: #000000aa
        }
    }
    
    div div div div div div[class*="bg-surface-elevation"] div div.flex-row.gap-1.items-center p.text-sm.text-blue {
        visibility: hidden;
    }
    
    div div div div div div[class*="bg-surface-elevation"] div div.flex-row.gap-1.items-center p.text-sm.text-blue::before {
        content: "(📌pinned)";
        visibility: visible;
        font-family: "Noto Color Emoji", cabin;
        font-size: 13px;
    }
    
    div div div div div div[class*="bg-surface-elevation"] div div.flex-row.gap-1.items-center svg[style="rotate: -30deg;"] {
        display: none;
    }

    *[class*="text-muted-foreground"] {
        /* matches anything that would be unreadable due to the background image (i think) */
        font-weight: 400;
        color: var(--foreground);
        /* WHY DOESN'T THE UI USE EXACTLY WHITE AAAAAA */
    }

    div[class*="bg-surface-elevation-"] div div[class*="text-center"] svg {
        background-image: url(https://deeplor.s3.us-west-2.amazonaws.com/matting_original/2024/05/10/7cdd1e40748940f0a73b01db710fe02d.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20240510T075110Z&X-Amz-SignedHeaders=host&X-Amz-Expires=10800&X-Amz-Credential=AKIAROYXHKZUSZONTWIG%2F20240510%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Signature=55688446d13ae297f65a0c704f3d2fba6a4d34ff25cd318e72168e67fb1e0ce8);
        /* if this emoji ever gets removed it's over */
    }

    div[class*="bg-surface-elevation-"] div div[class*="text-center"] svg path {
        display: none;
    }

    .pl-6 > a:nth-child(1)::before {
        content: "sunset";
        font-weight: 750;
        font-size: 20px;
    }

    .pl-6 > a:nth-child(1)::after {
        content: var(--sunset-theme-version);
        font-weight: 300;
        font-size: 14px;
    }

    svg.text-foreground {
        display: none;
    }

    .m-4 .hover\:bg-primary\/90 {
        background-color: #644f28;
        border-width: 2px;
    }

    .m-4 .hover\:bg-primary\/90 div svg {
        color: var(--surface-elevation-3);
    }

    div.my-spacing-xl p.text-muted-foreground.flex.text-center.text-md,
    div.my-spacing-xl p.text-display {
        /* remove cringe text */
        display: none;
    }

    div.absolute:nth-child(5) > div:nth-child(1) {
        /* fix random thing in the homepage */
        color: black;
    }

    div.w-full:nth-child(3) p.absolute {
        /* remove useless warning */
        display: none;
    }

    body div div div main div div div main div div div div div div button * path {
        /* make like/dislike stuff cooler */
        color: var(--surface-elevation-3);
    }

    button,
    div.border-1:nth-child(2) {
        /* add border to buttons (also adds unintentional cool effect at the homepage) */
        border-color: var(--surface-elevation-3) !important;
    }

    main div div div button.text-foreground {
        border-width: 1px;
        /* :P */
    }

    .justify-end > div:nth-child(2),
    .w-full.flex.flex-row.justify-between.p-3.border-1.border-accent.rounded-spacing-xs {
        /* little bit of trolling down here */
        display: none;
    }

    .gap-10 {
        /* remove the stupid */
        display: none;
    }

    div[class*="bg-surface-elevation-"] {
        animation: ripple 0.2s ease-in;
    }


    @keyframes ripple {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}