Instagram Catppuccin by e95h

/* ==UserStyle==
@name Instagram Catppuccin
@namespace github.com/catppuccin/userstyles/styles/instagram
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/instagram
@version 0.2.8
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainstagram
@description Soothing pastel theme for Instagram
@author Catppuccin
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */

@-moz-document domain('instagram.com') {
  ._aa4d {
    #catppuccin(@darkFlavor, @accentColor);
  }
  ._aa4c {
    #catppuccin(@lightFlavor, @accentColor);
  }

  #catppuccin(@lookup, @accent) {
    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-color: @catppuccin[@@lookup][@@accent];

    @text-filter: @catppuccin[@@lookup][@text-filter];
    @dark-color: if(@lookup = latte, @text, @crust);
    @light-color: if(@lookup = latte, @crust, @text);

    color-scheme: if(@lookup = latte, light, dark);

    ::selection {
      background-color: fade(@accent-color, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    &,
    .x1qjc9v5,
    .x9f619,
    .x78zum5,
    .xdt5ytf,
    .x1iyjqo2,
    .xl56j7k {
      --web-always-black: #rgbify(@dark-color) [];
      --ig-primary-icon: #rgbify(@text) [];
      --web-always-white: #rgbify(@light-color) [];
      --always-white: #rgbify(@light-color) [];
      --overlay-alpha-80: fadeout(@dark-color, 50);
      --grey-9: #rgbify(@crust) [];
      --ig-primary-background: #rgbify(@base) [];
      --ig-secondary-background: #rgbify(@surface0) [];
      --ig-banner-background: #rgbify(@crust) [];
      --ig-highlight-background: #rgbify(@surface0) [];
      --ig-elevated-background: #rgbify(@crust) [];
      --ig-elevated-highlight-background: #rgbify(@surface0) [];
      --ig-hover-overlay: #rgbify(@text) [], 0.1;
      --hover-overlay: fadeout(@surface0, 80);
      --ig-text-on-color: #rgbify(@crust) [];
      --ig-badge: #rgbify(@accent-color) [];
      --ig-primary-button: #rgbify(@accent-color) [];
      --ig-primary-button-hover: fadeout(@accent-color, 20);
      --ig-secondary-button-background: #rgbify(@surface0) [];
      --ig-secondary-button-hover: #rgbify(@surface1) [];
      --ig-secondary-button: #rgbify(@text) [];
      --ig-primary-text: #rgbify(@text) [];
      --ig-secondary-text: #rgbify(@subtext0) [];
      --ig-tertiary-text: #rgbify(@subtext0) [];
      --wbloks-primary-text: @text;
      --ig-text-on-media: #rgbify(@text) [];
      --ig-separator: #rgbify(@surface0) [];
      --chat-admin-text-color: #rgbify (@subtext0) [];
      --ig-elevated-separator: #rgbify(@surface0) [];
      --post-separator: #rgbify(@overlay0) [];
      --ig-stroke: #rgbify(@overlay0) [];
      --grey-2: #rgbify(@overlay0) [];
      --ig-link: #rgbify(@accent-color) [];
      --ig-error-or-destructive: #rgbify(@red) [];
      --ig-success: #rgbify(@green) [];
      --blue-2: #rgbify(@blue) [];
      --ig-close-friends-refreshed: #rgbify(@green) [];
      --ig-text-input-border-hover-prism: #rgbify(@surface1) [];
      --ig-toggle-outline-prism: #rgbify(@text) [];
      --ig-toggle-background-on-prism: #rgbify(@text) [];
      --ig-stroke-prism: #rgbify(@crust) [];
      --barcelona-logo: #rgbify (@text) [];
      --ig-bubble-background: #rgbify (@surface1) [];
      --ig-tertiary-icon: #rgbify (@accent-color) [];
      --always-dark-overlay: @accent-color;
      --secondary-text: @subtext0;
      --primary-text: @text;
      --primary-icon: @accent-color;
      --primary-button-text: @mantle !important;
      --primary-button: @blue !important;
      scrollbar-color: @accent-color @crust;
    }
    #splash-screen {
      background-color: @base !important;
    }

    /* Sidebar */
    .x1xgvd2v {
      background-color: @crust !important;
      &[style="transform: translateX(0px);"] {
        background-color: @mantle !important;
      }
    }
    .x1zvrr1 {
      background-color: @mantle;
    }
    svg[aria-label="Loading..."] {
      stroke: @text;
    }

    /* Story background */
    .x5qyhuo {
      background-color: @base;
    }

    /* Story progress bar */
    ._ac3p {
      background-color: @accent-color !important;
    }

    /* close friends story things */
    .x9bdzbf {
      color: @text !important;
    }

    /* Story seen / not seen ring */
    button:has(canvas + span > img[alt$="'s profile picture"]) {
      canvas {
        display: none;
      }

      span {
        outline-style: solid;
        outline-offset: 0.15rem;
      }

      &[aria-label^="Story by"][aria-label$="not seen"] span {
        outline-color: @accent-color;
        outline-width: 0.2rem;
      }
      &[aria-label^="Story by"]:not([aria-label$="not seen"]) span {
        outline-color: @surface2;
        outline-width: 0.075rem;
      }
    }

    /* Posts */
    ._aggc {
      background-color: @mantle;
      border-color: @overlay0 !important;
      border-radius: var(--modal-border-radius);
      box-shadow: 0 3px 5px -1px fadeout(@dark-color, 20);
      box-sizing: border-box;
    }
    ._aatc ._aasi,
    ._ae1i,
    ._aggc textarea.xvbhtw8 {
      background-color: @mantle;
    }

    /* Icons */
    svg[aria-label="Unlike"] {
      fill: @accent-color;
    }
    svg[aria-label="Close"] {
      color: @text;
    }
    svg[aria-label="Verified"] {
      fill: @accent-color;
    }

    /* new post thingy */
    ._aa1q._aa1q {
      color: @text !important;
    }

    /* sumting wong's popup box */
    .x879a55,
    .x7ywyr2,
    .x1l90r2v {
      background-color: @surface0 !important;
    }

    /* Share box */
    .xzloghq {
      background-color: @surface0;
      color: @text !important;
      &:hover {
        color: @mantle !important;
        background-color: @accent-color !important;
      }
    }
    .xk5f4mz {
      background-color: @mantle;
      &:hover {
        background-color: @accent-color;
      }
    }
    .x3nfvp2 {
      color: @text !important;
      &:hover {
        color: @crust;
      }
    }

    /* reel icon */
    .xq3z1fi {
      color: @accent-color !important;
    }

    /* Toggle sliders */
    .x1r7x56h {
      background-color: @accent-color;
    }
    .x100vrsf {
      background-color: @surface0;
    }

    .x1psfjxj {
      background-color: @mantle;
    }
    span[data-bloks-name="bk.components.TextSpan"] {
      color: @accent-color !important;
    }
    .xs7f9wi {
      background-color: @mantle !important;
    }
    .x1d72o {
      background-color: @surface0;
    }
    /* Log In With Facebook text */
    ._ab37 {
      color: @blue;
    }
    /* Excluded:  - _9ys7, _9_1f, _9ys8 (verified icon) */
    [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'],
        ._9zkj,
        ._a3ds,
        ._a3dt,
        ._a3du,
        ._a3dv,
        ._a3dw,
        ._9-b3,
        ._9znl,
        ._9z-6,
        ._a3dx,
        ._a3dy,
        ._a3dz,
        ._a3d-,
        ._a3d_,
        ._a3e0,
        ._9zm4,
        ._a3e1,
        ._a3e2,
        ._a3e3,
        ._a3e4,
        ._a3e5,
        ._a3e6,
        ._a3e7,
        ._a3e8,
        ._a3e9,
        ._a3ea,
        ._9_57,
        ._9_n5,
        ._9-y3,
        ._a3eb,
        ._a3ec,
        ._a3ed,
        ._a3ee,
        ._9zlu,
        ._9-yp,
        ._a3ef,
        ._a3eg,
        ._9_wm,
        ._a3eh,
        ._a3ei,
        ._9-j_,
        ._a3ej,
        ._a3ek,
        ._9_ij,
        ._9_d_,
        ._9_e1,
        ._9-mm,
        ._9_cx,
        ._9zm0,
        ._9zfi,
        ._9-ub,
        ._a3el,
        ._9-7-,
        ._9-1a,
        ._a3em,
        ._9zrp,
        ._a3en,
        ._9zz9,
        ._a3eo,
        ._9zmr,
        ._9-8d,
        ._9zhi,
        ._a3ep,
        ._9zs0,
        ._9-j-,
        ._a3eq,
        ._9zli,
        ._9_4y,
        ._9zm2,
        ._9zfj,
        ._9zlg,
        ._a3er,
        ._9-lv,
        ._9_ug,
        ._9_sh,
        ._9_sj,
        ._9-k0,
        ._9z-c,
        ._9_35,
        ._9_hh,
        ._a3es,
        ._a3et,
        ._a3eu,
        ._9-v-,
        ._9_4d,
        ._9zlh,
        ._a3ev,
        ._a3ew,
        ._a3ex,
        ._a3ey,
        ._9_7m,
        ._9_fv,
        ._a3ez,
        ._9-zf,
        ._9-zg,
        ._9-ze,
        ._a9fa,
        ._9-zh,
        ._9-zi,
 ...