ChatGPT Nord Theme by gonlad-x

/* ==UserStyle==
@name ChatGPT Nord Theme
@namespace https://github.com/nordtheme/nord
@homepageURL https://github.com/nordtheme/nord
@version 1.1.9
@supportURL https://github.com/nordtheme/nord
@description Soothing pastel theme for Last.fm
@author Mth
@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("chatgpt.com") {
  @import url("https://unpkg.com/@catppuccin/highlightjs@0.1.2/css/catppuccin.variables.css");

  :root.light {
    #catppuccin(@lightFlavor, @accentColor);
  }

  :root.dark {
    #catppuccin(@darkFlavor, @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];

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

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

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

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

    code.hljs {
      background: none;
    }
    pre {
      .bg-token-main-surface-secondary {
        background-color: @surface0;
      }
      .bg-gray-950 {
        background-color: @crust;
      }
      .text-token-text-secondary {
        color: @subtext0;
      }
    }

    color: @text;

    @white: lighten(if(@lookup=latte, @base, @text), 5%);
    @black: darken(if(@lookup=latte, @text, @base), 5%);
    --white: @white;
    --black: @black;

    & when not (@lookup = latte) {
      --gray-50: lighten(mix(@text, @subtext0), 5%);
      --gray-100: @text;
      --gray-200: @subtext0;
      --gray-300: @subtext1;
      --gray-400: @overlay0;
      --gray-500: @surface2;
      --gray-600: @surface1;
      --gray-700: @surface0;
      --gray-800: @base;
      --gray-900: @mantle;
      --gray-950: @crust;
      --brand-purple: @accent-color;
      --text-primary: var(--gray-100);
      --text-secondary: var(--gray-300);
      --text-tertiary: var(--gray-400);
      --text-quaternary: var(--gray-700);
      --main-surface-primary: var(--gray-800);
      --main-surface-secondary: var(--gray-700);
      --main-surface-tertiary: var(--gray-600);
      --sidebar-surface-primary: var(--gray-900);
      --sidebar-surface-secondary: var(--gray-800);
      --sidebar-surface-tertiary: var(--gray-700);
      .popover,
      .dark .popover,
      .dark.popover,
      .popover .dark {
        --main-surface-primary: var(--gray-700) !important;
        --main-surface-secondary: var(--gray-600) !important;
        --main-surface-tertiary: var(--gray-500) !important;
        --text-primary: var(--white) !important;
        --text-secondary: var(--gray-200) !important;
        --text-tertiary: var(--gray-300) !important;
      }
    }
    & when (@lookup = latte) {
      --gray-50: @crust;
      --gray-100: @mantle;
      --gray-200: @base;
      --gray-300: @surface0;
      --gray-400: @surface1;
      --gray-500: @surface2;
      --gray-600: @overlay0;
      --gray-700: @overlay1;
      --gray-800: @subtext0;
      --gray-900: @subtext1;
      --gray-950: @text;
      --brand-purple: @accent-color;
      --text-primary: var(--gray-950);
      --text-secondary: var(--gray-600);
      --text-tertiary: var(--gray-400);
      --text-quaternary: var(--gray-300);
      --main-surface-primary: var(--gray-200);
      --main-surface-secondary: var(--gray-100);
      --main-surface-tertiary: var(--gray-50);
      --sidebar-surface-primary: var(--gray-100);
      --sidebar-surface-secondary: var(--gray-200);
      --sidebar-surface-tertiary: var(--gray-300);
      .popover,
      .dark .popover,
      .dark.popover,
      .popover .dark {
        --main-surface-primary: var(--gray-200) !important;
        --main-surface-secondary: var(--gray-100) !important;
        --main-surface-tertiary: var(--gray-50) !important;
        --text-primary: var(--gray-950) !important;
        --text-secondary: var(--gray-600) !important;
        --text-tertiary: var(--gray-500) !important;
      }
    }

    --border-light: fade(@text, 10%);
    --border-medium: fade(@text, 15%);
    --border-heavy: fade(@text, 20%);
    --border-xheavy: fade(@text, 25%);
    --link: @accent-color;
    --link-hover: if(
      @lookup = latte,
      lighten(@accent-color, 10%),
      darken(@accent-color, 10%)
    );

    *:focus {
      --tw-ring-offset-color: @base;
      --tw-ring-color: @accent-color;
    }

    /* ChatGPT logo */
    [style*="background-color: rgb(25, 195, 125);"] {
      background-color: @green !important;
      color: @base !important;
    }

    /* Input */

    select {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="@{overlay2}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6 8 4 4 4-4"/></svg>'
      );
      background-image: url("data:image/svg+xml;@{svg}");
    }

    [multiple],
    [type="date"],
    [type="datetime-local"],
    [type="email"],
    [type="month"],
    [type="number"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="text"],
    [type="time"],
    [type="url"],
    [type="week"],
    select,
    textarea {
      background-color: @base;
      border-color: @overlay2;
    }

    [type="checkbox"],
    [type="radio"] {
      background-color: @base;
      border-color: @overlay2;
      color: @accent-color;
    }

    .form-input,
    .form-multiselect,
    .form-select,
    .form-textarea {
      background-color: @base;
      border-color: @overlay2;
    }

    .form-input:focus,
    .form-multiselect:focus,
    .form-select:focus,
    .form-textarea:focus {
      border-color: @accent-color;
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
      color: @overlay2;
    }

    /* Buttons */

    .btn-primary {
      background-color: @green;
      color: @base;
    }

    .btn-primary:hover {
      background-color: darken(@green, 10%);
    }

    .btn-primary.focus-visible {
      --tw-ring-color: lighten(@green, 10%) !important;
    }

    .btn-primary:focus-visible {
      --tw-ring-color: lighten(@green, 10%) !important;
    }

    .btn-danger {
      background-color: @red;
      color: @base;
    }

    .btn-danger:hover {
      background-color: darken(@red, 10%);
    }

    .btn-danger.focus-visible {
      --tw-ring-color: lighten(@red, 10%) !important;
    }

    .btn-danger:focus-visible {
      --tw-ring-color: lighten(@red, 10%) !important;
    }

    .btn-danger:disabled:hover {
      background-color: @red;
    }

    .btn-danger-outline {
      border-color: @red;
      color: @red;
    }

    .btn-danger-outline.focus-visible {
      --tw-ring-color: lighten(@red, 10%) !important;
    }

    .btn-danger-outline:focus-visible {
      --tw-ring-color: lighten(@red, 10%) !important;
    }

    .btn-neutral.focus-visible {
      --tw-ring-color: @overlay0 !important;
    }

    .btn-neutral:focus-visible {
      --tw-ring-color: @overlay0 !important;
    }

    .btn-dark {
      background-color: @surface0;
      border-color: @overlay0;
      color: @text;
    }

    .btn-dark:hover {
      background-color: @surface1;
    }

    .btn-light {
      background-color: @text;
      color: @black;
    }

    .btn-light:hover {
      background-color: @base;
    }

    .btn-disabled,
    .btn-disabled:hover {
      background-color: @text;
    }

    /...