LeetCode Catppuccin by ashish0kumar

/* ==UserStyle==
@name           LeetCode Catppuccin
@description    A soothing pastel theme for LeetCode!
@version        1.0
@namespace      github.com/ashish0kumar/LeetCode-Catppuccin
@homepageURL    https://github.com/ashish0kumar/LeetCode-Catppuccin
@supportURL     https://github.com/ashish0kumar/LeetCode-Catppuccin/issues
@author         ashish0kumar (https://github.com/ashish0kumar)
@license        MIT
==/UserStyle== */

@-moz-document domain("leetcode.com"), domain("leetcode.cn") {
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..700;1,100..700&display=swap');

    :root {
        --bg-dark: #11111b;
        --bg-code: #181825;
        --bg: #1e1e2e;
        --bg-2: #313244;
        --bg-3: #45475a;
        --bg-4: #585b70;
        --bg-blue: #1e66f5;
        --bg-green: #1AA88E;
        --bg-red: #d20f39;
        --highlight-1: #24273a;
        --highlight-2: #313244;
        --highlight-3: #514669;
        --blue-accent: #b4befe;
        --text: #cdd6f4;
        --text-dark: #9399b2;
        --cyan: #cba6f7;
        --blue: #89b4fa;
        --blue-dark: #7287fd;
        --orange: #fab387;
        --orange-dark: #e3a144;
        --red: #eba0ac;
        --red-dark: #f38ba8;
        --green: #a6e3a1;
        --green-dark: #1abc9c;
        --purple: #bb9af7;

        /* General */
        --text-primary: var(--text);
        --text-secondary: var(--text);
        --fill-secondary: var(--bg-2);
        --fill-quaternary: var(--bg);
        --text-sd-success: var(--red);
        --text-label-4: var(--red);
        --text-reverse: var(--bg-dark);
        --fill-primary: color-mix(in srgb, var(--blue), var(--bg-dark) 75%);
        --fill-tertiary: var(--bg-2);
        --border-primary: var(--blue);
        --border-secondary: var(--bg-2);
        --border-tertiary: var(--bg-2);
        --border-quaternary: var(--bg);

        /* Code */
        --layer-01: var(--bg);
        --layer-02: var(--bg-2);
        --layer-bg-gray: var(--bg-dark);
    }
    
    ::selection {
        color: var(--text);
        background: var(--highlight-3);
    }

    :is(.dark body) {
        background: var(--bg-dark);
        color: var(--text);
    }

    :is(.dark .dark\:bg-\[\#1a1a1a\]) {
        background: var(--bg-dark);
    }

    :is(.dark .dark\:bg-\[\#333333\]) {
        background: var(--bg)
    }

    :is(.dark .dark\:bg-gray-100),
    :is(.dark .dark\:text-gray-60) {
        color: var(--text-dark);
    }

    :is(.dark .dark\:bg-white) {
        background: var(--text);
    }

    :is(.dark .dark\:bg-\[linear-gradient\(rgba\(0\,0\,0\,0\)\,\#1A1A1A\)\]) {
        background-image: linear-gradient(#0000, var(--bg-dark));
    }

    :is(.dark .dark\:bg-dark-layer-bg) {
        background: var(--bg-dark);
    }

    :is(.dark .dark\:bg-dark-layer-1),
    :is(.dark .dark\:bg-dark-layer-2),
    :is(.dark .dark\:bg-dark-layer-3) {
        background: var(--bg);
    }

    :is(.dark .dark\:bg-dark-paper) {
        background: var(--bg-dark)
    }

    :is(.dark .dark\:text-dark-gray-6) {
        color: var(--text-dark);
    }

    :is(.dark .dark\:border-dark-divider-border-2) {
        border-color: var(--bg-2);
    }

    .border-dark-label-3 {
        border-color: var(--text-dark);
    }

    :is(.dark .dark\:bg-dark-fill-1),
    :is(.dark .dark\:bg-dark-fill-2),
    :is(.dark .dark\:bg-dark-fill-3),
    :is(.dark .dark\:hover\:bg-dark-fill-3:hover) {
        background: var(--highlight-1)
    }

    :is(.dark .dark\:bg-dark-fill-4),
    :is(.dark .dark\:hover\:bg-dark-fill-4:hover) {
        background: var(--highlight-1);
    }

    :is(.dark .dark\:bg-dark-gray-5) {
        background: var(--bg-4);
    }

    :is(.dark .dark\:hover\:bg-dark-fill-2:hover) {
        background: var(--bg-2);
    }

    :is(.dark .dark\:focus\:bg-dark-fill-2:focus) {
        background: var(--bg-3);
    }

    :is(.dark .dark\:text-dark-label-1),
    :is(.dark .dark\:hover\:text-dark-label-1:hover),
    .text-label-1,
    .text-label-1:hover,
    :is(.dark .dark\:text-dark-label-2),
    :is(.dark .dark\:hover\:text-dark-label-2:hover),
    :is(.dark .dark\:text-dark-label-3) {
        color: var(--text);
    }

    :is(.dark .dark\:hover\:text-dark-label-3:hover),
    :is(.dark .dark\:text-dark-label-4) {
        color: var(--text-dark);
    }

    :is(.dark .dark\:text-dark-label-r) {
        color: var(--bg-dark);
    }

    :is(.dark .dark\:text-dark-gray-4) {
        color: var(--bg-dark);
    }

    :is(.dark .dark\:text-dark-gray-5) {
        color: var(--text-dark);
    }

    :is(.dark .dark\:text-gray-7) {
        color: var(--text-dark);
    }

    :is(.dark .dark\:text-text-primary) {
        color: var(--text);
    }

    :is(.dark .dark\:text-text-secondary) {
        color: var(--text);
    }

    :is(.dark .dark\:text-text-tertiary) {
        color: var(--text-dark);
    }

    /* Loading Content (lc) */
    :is(.dark .dark\:bg-dark-lc-layer-01) {
        background: var(--bg-dark);
    }

    :is(.dark .dark\:bg-dark-lc-fill-01),
    :is(.dark .dark\:hover\:bg-dark-lc-fill-01:hover) {
        background: var(--bg-4);
    }

    :is(.dark .dark\:bg-dark-lc-fill-02),
    :is(.dark .dark\:hover\:bg-dark-lc-fill-02:hover) {
        background: var(--bg-2);
    }

    :is(.dark .dark\:bg-dark-lc-fill-03),
    :is(.dark .dark\:hover\:bg-dark-lc-fill-03:hover) {
        background: var(--bg-2);
    }

    :is(.dark .dark\:bg-dark-lc-fill-04),
    :is(.dark .dark\:hover\:bg-dark-lc-fill-04:hover) {
        background: var(--bg-2);
    }

    :is(.dark .dark\:bg-dark-lc-background-index) {
        background: var(--bg-dark);
    }

    :is(.dark .dark\:border-dark-lc-fill-01) {
        background: var(--bg);
    }

    :is(.dark .dark\:hover\:bg-dark-lc-fill-02) {
        background: var(--highlight-1);
    }

    :is(.dark .dark\:hover\:bg-dark-lc-fill-02:hover) {
        background: var(--bg-2);
    }

    :is(.dark .dark\:text-dark-lc-text-primary) {
        color: var(--text);
    }

    :is(.dark .dark\:text-dark-lc-text-secondary) {
        color: var(--text-dark);
    }

    :is(.dark .dark\:text-dark-lc-text-tertiary) {
        color: var(--text-dark);
    }

    :is(.dark .dark\:text-dark-lc-text-quaternary) {
        color: var(--text-dark);
    }

    :is(.dark .dark\:border-dark-lc-fill-02) {
        border-color: var(--bg-2);
    }

    :is(.dark .dark\:text-dark-lc-icon-secondary),
    :is(.dark .dark\:text-dark-lc-icon-tertiary) {
        color: var(--text-dark);
    }

    :is(.dark .dark\:stroke-dark-lc-fill-02) {
        stroke: var(--bg-2);
    }

    :is(.dark .group:hover .dark\:group-hover\:text-dark-blue) {
        color: var(--blue);
    }

    :is(.dark .dark\:text-dark-blue-s) {
        color: var(--blue);
    }

    :is(.dark .dark\:bg-dark-overlay-3) {
        background: var(--bg);
    }

    .bg-overlay-2,
    .bg-overlay-3,
    .bg-overlay-4,
    .bg-paper {
        background: var(--bg);
    }

    /* Table */
    :is(.dark .dark\:odd\:bg-dark-layer-1:nth-child(2n+1)) {
        background: var(--bg-dark);
    }

    :is(.dark .dark\:odd\:bg-dark-layer-bg:nth-child(2n+1)) {
        background: var(--bg-dark);
    }

    :is(.dark .dark\:even\:bg-dark-fill-4:nth-child(2n)) {
        background: var(--bg);
    }

    .even\:bg-overlay-1:nth-child(2n) {
        background: var(--bg);
    }

    tr:nth-of-type(2n+1) {
        background: var(--bg-dark) !important;
    }

    tr:nth-of-type(2n) {
        background: var(--bg) !important;
    }

    .grid> :is(.dark .dark\:bg-dark-lc-fill-01),
    :is(.dark .dark\:hover\:bg-dark-lc-fill-01:hover) {
        background: var(--highlight-1);
    }

    /* Transparents */
    .bg-gray-8 {
        background-color: var(--bg-dark);
    }

    :is(.dark .dark\:text-dark-lc-icon-primary) {
        background-color: rgba(0, 0, 0, 0.2);
    }

    .bg-gradient-to-l {
        background-image: linear-gradient(to right, #0000, var(--bg-dark));
    }

    :is(.dark .dark\:bg-\[linear-gradient\(to_right\,rgba\(0\,0\,0\,0\)\,\#282828_70\%\)\]),
    .flexlayout__tabset-overflowed .flexlayout__tabset_tabbar_inner::after {
        background-image: linear-gradient(to right, #0000, var(--bg));
    }

    .flexlayout__tabset-overflowed .flexlayout__tabset_tabbar_inner::before {
        background-image: linear-gradient(to left, #0000, var(--bg));
    }

    /* Code */
    .mtk1 {
        color: var(--text);
    }

    .mtk3 {
        color: var(--text-dark);
    }

    .mtk4 {
        color: var(--blue);
    }

    .mtk7 {
        color: var(--orange);
    }

    .mtk10 {
        color: var(--green-dark);
    }

    .mtk11 {
        color: var(--orange);
    }

    .mtk14 {
        color: var(--blue-accent);
    }

    .monaco-editor .line-numbers.active-line-number {
        color: var(--text);
    }

    .monaco-editor .line-numbers {
        color: var(--text-dark);
    }

    .dark .elfjS code {
        background-color: var(--bg-2);
        border-color: var(--bg-2);
        color: var(--text);
    }

    .monaco-scrollable-element>.scrollbar>.slider {
        background: var(--bg-2);
    }

    .decorationsOverviewRuler {
        display: none;
    }

    .view-line,
    .line-numbers {
        font-family: "JetBrains Mono", sans-serif;
    }

    .current-line {
        background: var(--highlight-1);
        border-color: var(--highlight-1) !important;
    }

    .core-guide {
        box-shadow: 2px 0 0 0 var(--highlight-2) inset !important;
    }

    .cursor {
        color: var(--text);
    }

    .bg-sd-accent {
        background-color: var(--highlight-1);
    }

    .bg-sd-card {
        background: var(--bg);
    }

    .hover\:bg-sd-secondary\/80 {
        background: var(--highlight-2);
    }

    .hover\:bg-sd-secondary\/80:hover {
        background: var(--highlight-1);
    }

    .ace-tm,
    .ace-tm .ace_gutter {
        background: var(--bg);
        color: var(--text);
    }

    .editor {
        border-color...