Phanpy for Creatures by irasponsible

/* ==UserStyle==
@name           phanpy.social - May 2024
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Phanpy - Critter Cafe Theme. Only intended for the Phanpy Dark Theme!
@author         critter.cafe/@irina
==/UserStyle== */
@-moz-document domain("phanpy.social") {
    :root {

        /* Fonts */
        --monospace-font: monospace;

        /*
        --text-size: 16px;
        --main-width: 40em;
        text-size-adjust: none;
        --hairline-width: 1px;
        */
        /* Custom Colours */
        --critter-cafe-accent-hi: hsl(0, 53%, 61%);
        --critter-cafe-accent-mid: hsl(2, 19%, 29%);

        --critter-cafe-bg-dark: hsl(8, 15%, 10%);
        --critter-cafe-bg-mid: hsl(345, 10%, 16%);

        --critter-cafe-text-accent-lo: hsla(7, 100%, 77%, 0.75);
        --critter-cafe-text-accent: hsl(7, 100%, 77%);
        --critter-cafe-text-dark: hsl(8, 16%, 45%);

        --critter-cafe-link: hsl(24, 25%, 88%);

        --critter-cafe-border-color: #443331;


        --cohost-notWhite: hsl(32, 100%, 97%);
        --cohost-notBlack: hsl(0, 0%, 10%);
        --cohost-cherry: hsl(333, 56%, 33%);
        --cohost-strawberry: hsl(358, 70%, 66%);
        --cohost-mango: hsl(29, 100%, 68%);
        --cohost-longan: hsl(33, 100%, 83%);


        /* Colours */
        --blue-color: CornflowerBlue;
        --purple-color: #b190f1;
        --purple-fg-color: color-mix(in srgb-linear,
        var(--purple-color) 60%,
        var(--text-color) 40%);
        --purple-bg-color: color-mix(in srgb, var(--purple-color) 10%, transparent);
        --green-color: lightgreen;
        --orange-color: var(--critter-cafe-accent-hi);
        --orange-light-bg-color: color-mix(in srgb,
        var(--orange-color) 20%,
        transparent);
        --orange-fg-color: color-mix(in srgb-linear,
        var(--orange-color) 60%,
        var(--text-color) 40%);
        --orange-bg-color: color-mix(in srgb, var(--orange-color) 10%, transparent);
        --red-color: orangered;
        --red-text-color: color-mix(in srgb-linear,
        var(--red-color) 60%,
        var(--text-color) 40%);
        --red-bg-color: color-mix(in lch, var(--red-color) 40%, transparent);

        --bg-color: var(--critter-cafe-bg-mid);
        --bg-faded-color: var(--critter-cafe-bg-dark);
        --bg-blur-color: #24252699;
        --bg-faded-blur-color: #18191a99;

        /*text*/
        --text-color: #f0f2f5;
        --text-insignificant-color: var(--critter-cafe-text-dark);

        --link-color: var(--criter-cafe-text-accent-hi);
        --link-bg-color: hsla(8, 73%, 57%, .133);
        --link-light-color: var(--critter-cafe-accent-hi);
        --link-faded-color: var(--criter-cafe-text-accent-lo);
        --link-bg-hover-color: hsla(8, 3%, 21%, .6);
        --link-visited-color: hsl(0, 80%, 67%);
        --link-text-color: color-mix(in lch,
        var(--link-color) 60%,
        var(--text-color) 40%);
        --focus-ring-color: var(--link-color);


        /* Button Colours */
        --button-bg-color: var(--critter-cafe-accent-hi);
        --button-bg-blur-color: hsla(0, 53%, 61%, 50%);
        --button-text-color: hsl(32, 100%, 97%);
        --button-plain-bg-hover-color: rgba(128, 128, 128, 0.1);

        /* Share */
        --reblog-color: hsl(333, 56%, 70%);
        --reblog-faded-color: hsla(333, 56%, 33%, 0.3);
        /* ...group? i dont even know where this applies */
        --group-color: var(--green-color);
        --group-faded-color: #00640020;
        /* Reply */
        --reply-to-color: var(--cohost-mango);
        --reply-to-text-color: var(--reply-to-color);
        --reply-to-faded-color: hsla(29, 100%, 50%, 0.09);
        /* Like */
        --favourite-color: var(--cohost-strawberry);

        --hashtag-color: var(--critter-cafe-text-accent);
        --hashtag-faded-color: color-mix(in srgb,
        var(--hashtag-color) 15%,
        transparent);
        --hashtag-text-color: color-mix(in lch,
        var(--hashtag-color) 40%,
        var(--text-color) 60%);

        /* All these are todo*/
        --outline-color: var(--critter-cafe-border-colour);
        --outline-stronger-color: rgba(128, 128, 128, 0.4);
        --outline-hover-color: rgba(128, 128, 128, 0.7);

        --divider-color: rgba(255, 255, 255, 0.1);
        --backdrop-color: rgba(0, 0, 0, 0.5);
        --backdrop-solid-color: color-mix(in srgb, var(--bg-color) 50%, #000 50%);
        --backdrop-theme-color: #121213;
        --backdrop-darker-color: rgba(0, 0, 0, 0.25);
        --img-bg-color: rgba(128, 128, 128, 0.2);
        --loader-color: #f0f2f599;
        --comment-line-color: #565656;

        --drop-shadow-color: rgba(0, 0, 0, 0.5);
        --close-button-bg-color: rgba(255, 255, 255, 0.2);
        --close-button-bg-active-color: rgba(255, 255, 255, 0.15);
        --close-button-color: rgba(255, 255, 255, 0.5);
        --close-button-hover-color: rgba(255, 255, 255, 1);
        --private-note-border-color: rgba(255, 255, 255, 0.2);

        --media-fg-color: #f0f2f5;
        --media-bg-color: #242526;
        --media-outline-color: color-mix(in lch, var(--media-fg-color), transparent);

        --timing-function: cubic-bezier(0.3, 0.5, 0, 1);
        --spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);

        --min-dimension: 88px;
    }

    /* Use the actual system UI font, not Segoe UI, or Inter if you have it installed */
    body {
        font-family: "Inter Variable", "Inter Var", "Inter", ui-sans-serif, system-ui, sans-serif, "Noto Color Emoji" !important;
        font-weight: 300 color: var(--cohost-notWhite)
    }

    /* Todo - Colourful Like, Boost, Bookmark, and Reply Buttons */
    /*span[title="Like"] {}*/

    
    /* -- Post Header -- */
    /* Squarer Avatars*/
    .avatar {
        border-radius: 22.5%;
    }

    /* Usernames */
    a.name-text b {
        color: var(--critter-cafe-link)
    }
    a.name-text i {
        color: var(--critter-cafe-text-dark)
    }
    
    /* -- Post Text -- */
    /* Mentions */
    a.mention.u-url span {
        color: var(--critter-cafe-link)
    }
    /** Dim the @-sign **/
    a.mention.u-url {
        color: color-mix(in srgb, var(--critter-cafe-link) 70%, transparent)
    }
    
    /* Hashtags */
    a.mention.hashtag span {
        color: var(--critter-cafe-text-accent);
        text-decoration-line: none;
    }
    
    /** Dim the #-sign **/
    a.mention.hashtag {
        color: color-mix(in srgb, var(--critter-cafe-text-accent-lo) 50%, transparent)
    }

    b i.bidi-isolate {
        color: var(--critter-cafe-text-dark)
    }

    /* -- Profile Fields -- */
    .profile-field p a {
        color: var(--link-visited-color);
        text-decoration-line: none;
    }

    .profile-verified p a {
        color: var(--green-color) !important
    }



    .status .content p code {
        color: var(--critter-cafe-text-accent)
    }

    blockquote::before {
        background-color: var(--critter-cafe-link)
    }

    button.plain:not(.does-not-exist),
    .button.plain {
        color: var(--critter-cafe-accent-hi) !important
    }

    /*Hide -1 Followers, but not the word "followers" since otherwise i can't get to the list */
    span[title="-1"] {
        display: none;
    }

    /* Semi-abandoned Idea - outlines instead of the gradients on replies/boosts etc */
    /*li:has(a.timeline-item):has(article.status-reply-to)
    {
        border: 1px solid var(--reply-to-color)
    }*/
}