[ { "settings": { "openEditInWindow": false, "openEditInWindow.popup": false, "windowPosition": {}, "show-badge": true, "disableAll": false, "exposeIframes": false, "exposeStyleName": false, "newStyleAsUsercss": true, "styleViaXhr": false, "patchCsp": true, "urlInstaller": true, "config.autosave": true, "schemeSwitcher.enabled": "system", "schemeSwitcher.nightStart": "18:00", "schemeSwitcher.nightEnd": "06:00", "popup.breadcrumbs": true, "popup.breadcrumbs.usePath": false, "popup.enabledFirst": true, "popup.stylesFirst": true, "popup.autoResort": false, "popup.borders": false, "popup.findSort": "u", "manage.onlyEnabled": false, "manage.onlyLocal": false, "manage.onlyUsercss": false, "manage.onlyEnabled.invert": false, "manage.onlyLocal.invert": false, "manage.onlyUsercss.invert": false, "manage.actions.expanded": true, "manage.backup.expanded": true, "manage.filters.expanded": true, "manage.minColumnWidth": 750, "manage.newUI": true, "manage.newUI.favicons": false, "manage.newUI.faviconsGray": true, "manage.newUI.targets": 3, "manage.newUI.sort": "title,asc", "manage.searchMode": "meta", "editor.options": {}, "editor.toc.expanded": true, "editor.options.expanded": true, "editor.lint.expanded": true, "editor.publish.expanded": true, "editor.lineWrapping": true, "editor.smartIndent": true, "editor.indentWithTabs": false, "editor.tabSize": 4, "editor.keyMap": "default", "editor.theme": "default", "editor.beautify": { "selector_separator_newline": true, "newline_before_open_brace": false, "newline_after_open_brace": true, "newline_between_properties": true, "newline_before_close_brace": true, "newline_between_rules": false, "preserve_newlines": true, "end_with_newline": false, "indent_conditional": true, "indent_mozdoc": true, "space_around_combinator": true, "space_around_cmp": false }, "editor.beautify.hotkey": "", "editor.lintDelay": 300, "editor.linter": "csslint", "editor.lintReportDelay": 500, "editor.matchHighlight": "token", "editor.autoCloseBrackets": true, "editor.autocompleteOnTyping": false, "editor.contextDelete": false, "editor.selectByTokens": true, "editor.arrowKeysTraverse": true, "editor.appliesToLineWidget": true, "editor.autosaveDraft": 10, "editor.livePreview": true, "editor.colorpicker": true, "editor.colorpicker.hexUppercase": false, "editor.colorpicker.hotkey": "", "editor.colorpicker.color": "", "editor.colorpicker.maxHeight": 300, "hotkey._execute_browser_action": "", "hotkey.openManage": "", "hotkey.styleDisableAll": "", "sync.enabled": "none", "iconset": -1, "badgeDisabled": "#8B0000", "badgeNormal": "#006666", "headerWidth.edit": 280, "headerWidth.install": 280, "headerWidth.manage": 280, "popupWidth": 246, "updateInterval": 24 }, "order": { "main": [], "prio": [] } }, { "enabled": true, "updateUrl": "https://github.com/catppuccin/userstyles/raw/main/styles/nixos-search/catppuccin.user.css", "url": "https://github.com/catppuccin/userstyles/tree/main/styles/nixos-search", "installDate": 1698242787277, "sections": [ { "code": "" } ], "sourceCode": "/* ==UserStyle==\n@name NixOS Search Catppuccin\n@namespace github.com/catppuccin/userstyles/nixos-search\n@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-search\n@version 0.3.0\n@description Soothing pastel theme for NixOS Search\n@author Catppuccin\n@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-search/catppuccin.user.css\n@license MIT\n\n@preprocessor less\n@var select lightFlavor \"Light Flavor\" [\"latte:Latte*\", \"frappe:Frappé\", \"macchiato:Macchiato\", \"mocha:Mocha\"]\n@var select darkFlavor \"Dark Flavor\" [\"latte:Latte\", \"frappe:Frappé\", \"macchiato:Macchiato\", \"mocha:Mocha*\"]\n@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\"]\n==/UserStyle== */\n@-moz-document domain(\"search.nixos.org\") {\n @media (prefers-color-scheme: light) {\n #catppuccin(@lightFlavor, @accentColor);\n }\n\n @media (prefers-color-scheme: dark) {\n #catppuccin(@darkFlavor, @accentColor);\n }\n\n #catppuccin(@lookup, @accent) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n @accent-color: @catppuccin[@@lookup][@@accent];\n\n /* Generic */\n html,\n body {\n background-color: @base;\n color: @text;\n }\n\n code,\n pre {\n color: @red;\n background-color: @surface0;\n border: none;\n }\n\n a,\n a:hover,\n a:focus {\n color: @accent-color;\n outline: none;\n }\n\n /* Navbar */\n .navbar .navbar-static-top {\n background-color: @mantle;\n }\n\n .navbar-inner {\n background-color: @mantle;\n background-image: none;\n border: 1px solid @base;\n }\n\n .nav-tabs {\n border-bottom: 1px solid @surface0;\n }\n\n .nav-tabs > .active > a,\n .nav-tabs > .active > a:hover,\n .nav-tabs > .active > a:focus {\n background-color: @base;\n border: 1px solid @surface0;\n color: @text;\n }\n\n .navbar .nav > li > a {\n text-shadow: none;\n color: @subtext0;\n }\n\n .navbar .nav > li > a:focus,\n .navbar .nav > li > a:hover {\n color: @text;\n border: none;\n }\n\n .navbar .nav > .active > a,\n .navbar .nav > .active > a:hover,\n .navbar .nav > .active > a:focus {\n background-color: @surface0;\n color: @text;\n }\n\n /* Installation instructions tabs */\n .nav > li > a:hover,\n .nav > li > a:focus {\n background-color: @surface0;\n border: 1px solid @surface0;\n }\n\n /* \"Experimental\" label */\n .label,\n .badge {\n background-color: @accent-color;\n color: @crust;\n text-shadow: none;\n }\n\n /* Buttons */\n .btn {\n background-color: @surface0;\n background-image: none;\n text-shadow: none;\n box-shadow: none;\n color: @text;\n border: 1px solid @base;\n }\n\n .btn:focus {\n outline: none;\n color: @text;\n background-color: @surface1;\n }\n\n .btn:hover,\n .btn:active,\n .btn.active,\n .btn.disabled,\n .btn[disabled] {\n background-color: @surface1;\n color: @text;\n }\n\n /* \"Sort\" menu */\n .dropdown-menu {\n background-color: @mantle;\n border: 1px solid @crust;\n box-shadow: 0 5px 10px @mantle;\n }\n\n .dropdown-menu > li > a {\n color: @text;\n }\n\n .dropdown-menu > li > a:hover,\n .dropdown-menu > li > a:focus,\n .dropdown-submenu:hover > a,\n .dropdown-submenu:focus > a {\n background-color: @surface0;\n background-image: none;\n }\n\n .dropdown-menu .divider {\n background-color: @surface0;\n border-bottom: @surface0;\n }\n\n .dropdown .caret {\n border-top: 4px solid @text;\n }\n\n /* Overrides menu item hover color */\n .search-page\n > .search-results\n > div\n > :first-child\n > div:first-child\n > ul\n > li\n > a {\n color: @text;\n }\n\n /* Loading indicator */\n .loader {\n color: @crust;\n }\n\n /* Input box */\n textarea,\n input[type=\"text\"],\n input[type=\"password\"],\n input[type=\"datetime\"],\n input[type=\"datetime-local\"],\n input[type=\"date\"],\n input[type=\"month\"],\n input[type=\"time\"],\n input[type=\"week\"],\n input[type=\"number\"],\n input[type=\"email\"],\n input[type=\"url\"],\n input[type=\"search\"],\n input[type=\"tel\"],\n input[type=\"color\"],\n .uneditable-input {\n background-color: @surface0;\n color: @text;\n border: 1px solid @base;\n }\n\n textarea:focus,\n input[type=\"text\"]:focus,\n input[type=\"password\"]:focus,\n input[type=\"datetime\"]:focus,\n input[type=\"datetime-local\"]:focus,\n input[type=\"date\"]:focus,\n input[type=\"month\"]:focus,\n input[type=\"time\"]:focus,\n input[type=\"week\"]:focus,\n input[type=\"number\"]:focus,\n input[type=\"email\"]:focus,\n input[type=\"url\"]:focus,\n input[type=\"search\"]:focus,\n input[type=\"tel\"]:focus,\n input[type=\"color\"]:focus,\n .uneditable-input:focus {\n border-color: @accent-color;\n box-shadow:\n inset 0 1px 1px @crust,\n 0 0 8px @accent-color;\n }\n\n /* Fix input box placeholder text */\n textarea::placeholder,\n input[type=\"text\"]::placeholder,\n input[type=\"password\"]::placeholder,\n input[type=\"datetime\"]::placeholder,\n input[type=\"datetime-local\"]::placeholder,\n input[type=\"date\"]::placeholder,\n input[type=\"month\"]::placeholder,\n input[type=\"time\"]::placeholder,\n input[type=\"week\"]::placeholder,\n input[type=\"number\"]::placeholder,\n input[type=\"email\"]::placeholder,\n input[type=\"url\"]::placeholder,\n input[type=\"search\"]::placeholder,\n input[type=\"tel\"]::placeholder,\n input[type=\"color\"]::placeholder,\n .uneditable-input::placeholder {\n color: @subtext0;\n }\n\n /* Search results */\n .search-page > .search-results > div > :nth-child(2) > li {\n border-bottom: 1px solid @surface0;\n }\n\n .search-page > .search-results > div > :nth-child(2) > li > :first-child {\n color: @accent-color;\n }\n\n .search-page\n > .search-results\n > div\n > :nth-child(2)\n > li.package\n > :nth-child(5)\n > :nth-child(2)\n ul.nav-tabs\n > li\n > a {\n color: @text;\n }\n\n .search-page\n > .search-results\n > div\n > :nth-child(2)\n > li.package\n > :nth-child(5)\n > :nth-child(2)\n pre {\n color: @text;\n background-color: @mantle;\n border: none;\n }\n\n .search-page\n > .search-results\n > div\n > :nth-child(2)\n > li.package\n .result-item-show-more {\n background-color: @base;\n color: @text;\n }\n\n .search-page\n > .search-results\n > div\n > :nth-child(2)\n > li.package\n > :nth-child(3)\n > li {\n color: @text;\n }\n\n .search-page\n > .search-results\n > div\n > :nth-child(2)\n > li.package\n > :nth-child(5)\n > :nth-child(2)\n div.tab-content {\n border: 1px solid @surface0;\n }\n\n .search-page\n > .search-results\n > div\n > :nth-child(2)\n > li.option\n > :nth-child(2)\n > div:nth-child(2n)\n pre\n code {\n color: @text;\n background-color: @mantle;\n }\n\n /* Search sidebar */\n .search-page ul.search-sidebar > li {\n border-color: @surface0;\n }\n\n .search-page ul.search-sidebar > li > ul > li > a {\n color: @text;\n }\n\n .search-page ul.search-sidebar > li > ul > li > a:hover {\n background-color: @surface0;\n }\n\n .search-page ul.search-sidebar > li > ul > li > a.selected {\n color: @crust;\n background-color: @accent-color;\n }\n\n /* Override sidebar labels (number of packages) */\n .search-sidebar .label,\n .search-sidebar .badge {\n background-color: @surface0;\n color: @text;\n text-shadow: none;\n }\n\n /* Pager */\n .pager li > a,\n .pager li > span {\n color: @text;\n background-color: @surface0;\n border: none;\n border-radius: 5px;\n }\n\n .pager li > a:hover,\n .pager li > a:focus {\n background-color: @surface1;\n transition: all;\n transition-duration: 5ms;\n }\n\n .pager .disabled > a,\n .pager .disabled > a:hover,\n .pager .disabled > a:focus,\n .pager .disabled > span {\n color: @text;\n background-color: @mantle;\n border: none;\n border-radius: 5px;\n }\n }\n}\n\n@catppuccin: {\n @latte: {\n @rosewater: #dc8a78;\n @flamingo: #dd7878;\n @pink: #ea76cb;\n @mauve: #8839ef;\n @red: #d20f39;\n @maroon: #e64553;\n @peach: #fe640b;\n @yellow: #df8e1d;\n @green: #40a02b;\n @teal: #179299;\n @sky: #04a5e5;\n @sapphire: #209fb5;\n @blue: #1e66f5;\n @lavender: #7287fd;\n @text: #4c4f69;\n @subtext1: #5c5f77;\n @subtext0: #6c6f85;\n @overlay2: #7c7f93;\n @overlay1: #8c8fa1;\n @overlay0: #9ca0b0;\n @surface2: #acb0be;\n @surface1: #bcc0cc;\n @surface0: #ccd0da;\n @base: #eff1f5;\n @mantle: #e6e9ef;\n @crust: #dce0e8;\n };\n @frappe: {\n @rosewater: #f2d5cf;\n @flamingo: #eebebe;\n @pink: #f4b8e4;\n @mauve: #ca9ee6;\n @red: #e78284;\n @maroon: #ea999c;\n @peach: #ef9f76;\n @yellow: #e5c890;\n @green: #a6d189;\n @teal: #81c8be;\n @sky: #99d1db;\n @sapphire: #85c1dc;\n @blue: #8caaee;\n @lavender: #babbf1;\n @text: #c6d0f5;\n @subtext1: #b5bfe2;\n @subtext0: #a5adce;\n @overlay2: #949cbb;\n @overlay1: #838ba7;\n @overlay0: #737994;\n @surface2: #626880;\n @surface1: #51576d;\n @surface0: #414559;\n @base: #303446;\n @mantle: #292c3c;\n @crust: #232634;\n };\n @macchiato: {\n @rosewater: #f4dbd6;\n @flamingo: #f0c6c6;\n @pink: #f5bde6;\n @mauve: #c6a0f6;\n @red: #ed8796;\n @maroon: #ee99a0;\n @peach: #f5a97f;\n @yellow: #eed49f;\n @green: #a6da95;\n @teal: #8bd5ca;\n @sky: #91d7e3;\n @sapphire: #7dc4e4;\n @blue: #8aadf4;\n @lavender: #b7bdf8;\n @text: #cad3f5;\n @subtext1: #b8c0e0;\n @subtext0: #a5adcb;\n @overlay2: #939ab7;\n @overlay1: #8087a2;\n @overlay0: #6e738d;\n @surface2: #5b6078;\n @surface1: #494d64;\n @surface0: #363a4f;\n @base: #24273a;\n @mantle: #1e2030;\n @crust: #181926;\n };\n @mocha: {\n @rosewater: #f5e0dc;\n @flamingo: #f2cdcd;\n @pink: #f5c2e7;\n @mauve: #cba6f7;\n @red: #f38ba8;\n @maroon: #eba0ac;\n @peach: #fab387;\n @yellow: #f9e2af;\n @green: #a6e3a1;\n @teal: #94e2d5;\n @sky: #89dceb;\n @sapphire: #74c7ec;\n @blue: #89b4fa;\n @lavender: #b4befe;\n @text: #cdd6f4;\n @subtext1: #bac2de;\n @subtext0: #a6adc8;\n @overlay2: #9399b2;\n @overlay1: #7f849c;\n @overlay0: #6c7086;\n @surface2: #585b70;\n @surface1: #45475a;\n @surface0: #313244;\n @base: #1e1e2e;\n @mantle: #181825;\n @crust: #11111b;\n };\n};", "usercssData": { "name": "NixOS Search Catppuccin", "namespace": "github.com/catppuccin/userstyles/nixos-search", "homepageURL": "https://github.com/catppuccin/userstyles/tree/main/styles/nixos-search", "version": "0.3.0", "description": "Soothing pastel theme for NixOS Search", "author": "Catppuccin", "updateURL": "https://github.com/catppuccin/userstyles/raw/main/styles/nixos-search/catppuccin.user.css", "license": "MIT", "preprocessor": "less", "vars": { "lightFlavor": { "type": "select", "label": "Light Flavor", "name": "lightFlavor", "value": null, "default": "latte", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappé", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "darkFlavor": { "type": "select", "label": "Dark Flavor", "name": "darkFlavor", "value": null, "default": "mocha", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappé", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "accentColor": { "type": "select", "label": "Accent", "name": "accentColor", "value": null, "default": "blue", "options": [ { "name": "rosewater", "label": "Rosewater", "value": "rosewater" }, { "name": "flamingo", "label": "Flamingo", "value": "flamingo" }, { "name": "pink", "label": "Pink", "value": "pink" }, { "name": "mauve", "label": "Mauve", "value": "mauve" }, { "name": "red", "label": "Red", "value": "red" }, { "name": "maroon", "label": "Maroon", "value": "maroon" }, { "name": "peach", "label": "Peach", "value": "peach" }, { "name": "yellow", "label": "Yellow", "value": "yellow" }, { "name": "green", "label": "Green", "value": "green" }, { "name": "teal", "label": "Teal", "value": "teal" }, { "name": "blue", "label": "Blue", "value": "blue" }, { "name": "sapphire", "label": "Sapphire", "value": "sapphire" }, { "name": "sky", "label": "Sky", "value": "sky" }, { "name": "lavender", "label": "Lavender", "value": "lavender" }, { "name": "subtext0", "label": "Gray", "value": "subtext0" } ] } } }, "author": "Catppuccin", "description": "Soothing pastel theme for NixOS Search", "name": "NixOS Search Catppuccin", "updateDate": 1698242852272, "_id": "c79c1637-d3ba-4bdb-b460-bb9367f36c9c", "_rev": 1698242852272, "id": 1 }, { "enabled": true, "updateUrl": "https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.css", "url": "https://github.com/catppuccin/userstyles/tree/main/styles/brave-search", "installDate": 1698242913743, "sections": [ { "code": "" } ], "sourceCode": "/* ==UserStyle==\n@name Brave Search Catppuccin\n@namespace github.com/catppuccin/userstyles/styles/brave-search\n@homepageURL\thttps://github.com/catppuccin/userstyles/tree/main/styles/brave-search\n@version 1.0.3\n@description Soothing pastel theme for Brave Search\n@author Catppuccin\n@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.css\n@license\t\tMIT\n\n@preprocessor less\n@var select lightFlavor \"Light Flavor\" [\"latte:Latte*\", \"frappe:Frappe\", \"macchiato:Macchiato\", \"mocha:Mocha\"]\n@var select darkFlavor \"Dark Flavor\" [\"latte:Latte\", \"frappe:Frappe\", \"macchiato:Macchiato\", \"mocha:Mocha*\"]\n==/UserStyle== */\n@-moz-document domain(\"search.brave.com\") {\n :root.light {\n #catppuccin(@lightFlavor);\n }\n :root.dark {\n #catppuccin(@darkFlavor);\n }\n :root:not(.light):not(.dark) {\n @media (prefers-color-scheme: light) {\n #catppuccin(@lightFlavor);\n }\n @media (prefers-color-scheme: dark) {\n #catppuccin(@darkFlavor);\n }\n }\n\n @catppuccin: {\n @latte: {\n @color-scheme: light;\n @rosewater: #dc8a78;\n @flamingo: #dd7878;\n @pink: #ea76cb;\n @mauve: #8839ef;\n @red: #d20f39;\n @maroon: #e64553;\n @peach: #fe640b;\n @yellow: #df8e1d;\n @green: #40a02b;\n @teal: #179299;\n @sky: #04a5e5;\n @sapphire: #209fb5;\n @blue: #1e66f5;\n @lavender: #7287fd;\n @text: #4c4f69;\n @subtext1: #5c5f77;\n @subtext0: #6c6f85;\n @overlay2: #7c7f93;\n @overlay1: #8c8fa1;\n @overlay0: #9ca0b0;\n @surface2: #acb0be;\n @surface1: #bcc0cc;\n @surface0: #ccd0da;\n @base: #eff1f5;\n @mantle: #e6e9ef;\n @crust: #dce0e8;\n };\n @frappe: {\n @color-scheme: dark;\n @rosewater: #f2d5cf;\n @flamingo: #eebebe;\n @pink: #f4b8e4;\n @mauve: #ca9ee6;\n @red: #e78284;\n @maroon: #ea999c;\n @peach: #ef9f76;\n @yellow: #e5c890;\n @green: #a6d189;\n @teal: #81c8be;\n @sky: #99d1db;\n @sapphire: #85c1dc;\n @blue: #8caaee;\n @lavender: #babbf1;\n @text: #c6d0f5;\n @subtext1: #b5bfe2;\n @subtext0: #a5adce;\n @overlay2: #949cbb;\n @overlay1: #838ba7;\n @overlay0: #737994;\n @surface2: #626880;\n @surface1: #51576d;\n @surface0: #414559;\n @base: #303446;\n @mantle: #292c3c;\n @crust: #232634;\n };\n @macchiato: {\n @color-scheme: dark;\n @rosewater: #f4dbd6;\n @flamingo: #f0c6c6;\n @pink: #f5bde6;\n @mauve: #c6a0f6;\n @red: #ed8796;\n @maroon: #ee99a0;\n @peach: #f5a97f;\n @yellow: #eed49f;\n @green: #a6da95;\n @teal: #8bd5ca;\n @sky: #91d7e3;\n @sapphire: #7dc4e4;\n @blue: #8aadf4;\n @lavender: #b7bdf8;\n @text: #cad3f5;\n @subtext1: #b8c0e0;\n @subtext0: #a5adcb;\n @overlay2: #939ab7;\n @overlay1: #8087a2;\n @overlay0: #6e738d;\n @surface2: #5b6078;\n @surface1: #494d64;\n @surface0: #363a4f;\n @base: #24273a;\n @mantle: #1e2030;\n @crust: #181926;\n };\n @mocha: {\n @color-scheme: dark;\n @rosewater: #f5e0dc;\n @flamingo: #f2cdcd;\n @pink: #f5c2e7;\n @mauve: #cba6f7;\n @red: #f38ba8;\n @maroon: #eba0ac;\n @peach: #fab387;\n @yellow: #f9e2af;\n @green: #a6e3a1;\n @teal: #94e2d5;\n @sky: #89dceb;\n @sapphire: #74c7ec;\n @blue: #89b4fa;\n @lavender: #b4befe;\n @text: #cdd6f4;\n @subtext1: #bac2de;\n @subtext0: #a6adc8;\n @overlay2: #9399b2;\n @overlay1: #7f849c;\n @overlay0: #6c7086;\n @surface2: #585b70;\n @surface1: #45475a;\n @surface0: #313244;\n @base: #1e1e2e;\n @mantle: #181825;\n @crust: #11111b;\n };\n };\n\n #catppuccin(@lookup) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n @color: @catppuccin[@@lookup][@color-scheme];\n\n & {\n color-scheme: @color;\n --body-bg: @base;\n --bg-glassy: @mantle;\n --bg-1: @surface1;\n --bg-2: @surface0;\n --bg-02: @crust;\n --bg-04: @mantle;\n --bg-green: @green;\n --bg-blue: @blue;\n --bg-red: @red;\n --bg-favicon: @surface1;\n --bg-form-control-selected: @surface2;\n --bg-form-control-unselected: @surface0;\n --form-control-selected: @blue;\n --form-control-hover: @lavender;\n --form-control-focus: @text;\n --settings-header-bg: @mantle;\n --settings-header-text: @text;\n --settings-header-icon: @blue;\n --settings-widget-text: @subtext0;\n --settings-item-text: @text;\n --settings-item-icon: @blue;\n --settings-item-border: @overlay0;\n --settings-item-border-2: @overlay2;\n --settings-btn-bg: @surface0;\n --settings-btn-text: @text;\n --settings-widget-outline: @overlay0;\n --settings-independent-score: @blue;\n --settings-global-score: @peach;\n --brave-supporter-bg: @base;\n --brave-supporter-text: @text;\n --context-menu-header-border: @overlay0;\n --color-primary: @text;\n --color-primary-2: @subtext1;\n --color-primary-3: @subtext0;\n --color-white: @text;\n --color-gray-2: @subtext1;\n --color-gray-3: @subtext0;\n --color-gray-4: @overlay2;\n --color-gray-5: @overlay1;\n --color-gray-6: @overlay0;\n --color-green: @green;\n --color-red: @red;\n --color-blue: @blue;\n --info-color: @blue;\n --link-primary: @blue;\n --link-secondary: @blue;\n --link-visited: @mauve;\n --snippet-url: @subtext0;\n --separator-dot: @overlay0;\n --theme-purple: @mauve;\n --theme-yellow: @yellow;\n --border-color: @overlay0;\n --blurple-300: @lavender;\n --text-01: @text;\n --text-02: @subtext1;\n --text-03: @subtext0;\n --interactive-04: @blue;\n --interactive-05: @blue;\n --interactive-06: @blue;\n --interactive-07: @blue;\n --interactive-08: @blue;\n --focus-border: @overlay2;\n --divider-01: @overlay0;\n --disabled: @overlay1;\n --btn-filled-bg: @surface0;\n --btn-filled-bg-hover: @surface1;\n --btn-filled-text-active: @text;\n --btn-filled-bg-active: @surface2;\n --btn-filled-text-disabled: @overlay1;\n --btn-outline-border: @overlay0;\n --btn-outline-border-hover: @overlay1;\n --btn-outline-text: @text;\n --btn-outline-text-hover: @subtext1;\n --btn-outline-text-active: @text;\n --btn-outline-border-active: @overlay2;\n --btn-outline-text-disabled: @overlay1;\n --btn-icon-svg-hover: @subtext1;\n --btn-icon-bg-hover: @surface1;\n --btn-icon-svg-active: @text;\n --code-bg-0: @base;\n --code-border: @overlay0;\n --code-color-1: @surface0;\n --code-color-2: @text;\n --code-color-3: @green;\n --code-color-4: @blue;\n --code-color-5: @pink;\n --search-bgd-01: @overlay0;\n --search-bgd-02: @base;\n --search-bgd-03: @crust;\n --search-bgd-04: @mantle;\n --search-bgd-05: @base;\n --search-bgd-06: @surface0;\n --search-bgd-07: @mantle;\n --search-bgd-08: @crust;\n --search-line-01: @surface0;\n --search-line-02: @subtext0;\n --search-text-01: @text;\n --search-text-02: @subtext1;\n --search-text-03: @subtext0;\n --search-text-04: @subtext0;\n --search-text-05: @blue;\n --search-text-06: @overlay0;\n --search-text-09: @yellow;\n --search-text-10: @peach;\n --search-interactive-01: @blue;\n --search-interactive-02: @mauve;\n --search-interactive-03: @mauve;\n --search-interactive-04: @sky;\n --search-interactive-05: @mauve;\n --gray-30: @base;\n --gray-60: @surface0;\n --gray-90: @overlay0;\n --gray-110: @subtext0;\n --gray-120: @text;\n --secondary-90: @lavender;\n }\n\n #searchform > .searchbox-wrapper::after {\n background-image: none;\n }\n }\n}/* ==UserStyle==\n@name 10/25/2023, 5:08:24 PM\n@namespace github.com/openstyles/stylus\n@version 1.0.0\n@description A new userstyle\n@author Me\n==/UserStyle== */\n\n@-moz-document domain(\"example.com\") {\n /* Insert code here... */\n}", "usercssData": { "name": "Brave Search Catppuccin", "namespace": "github.com/catppuccin/userstyles/styles/brave-search", "homepageURL": "https://github.com/catppuccin/userstyles/tree/main/styles/brave-search", "version": "1.0.3", "description": "Soothing pastel theme for Brave Search", "author": "Catppuccin", "updateURL": "https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.css", "license": "MIT", "preprocessor": "less", "vars": { "lightFlavor": { "type": "select", "label": "Light Flavor", "name": "lightFlavor", "value": null, "default": "latte", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappe", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "darkFlavor": { "type": "select", "label": "Dark Flavor", "name": "darkFlavor", "value": null, "default": "mocha", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappe", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] } } }, "author": "Catppuccin", "description": "Soothing pastel theme for Brave Search", "name": "Brave Search Catppuccin", "updateDate": 1698242913743, "_id": "32352688-6557-43a8-ac09-6f44295035d0", "_rev": 1698242913744, "id": 2 }, { "enabled": true, "updateUrl": "https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.css", "url": "https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt", "installDate": 1698242984808, "sections": [ { "code": "" } ], "sourceCode": "/* ==UserStyle==\n@name ChatGPT Catppuccin\n@namespace github.com/catppuccin/userstyles/styles/chatgpt\n@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt\n@version 0.0.5\n@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.css\n@description Soothing pastel theme for ChatGPT\n@author Catppuccin\n@license MIT\n\n@preprocessor less\n@var select lightFlavor \"Light Flavor\" [\"latte:Latte*\", \"frappe:Frappe\", \"macchiato:Macchiato\", \"mocha:Mocha\"]\n@var select darkFlavor \"Dark Flavor\" [\"latte:Latte\", \"frappe:Frappe\", \"macchiato:Macchiato\", \"mocha:Mocha*\"]\n==/UserStyle== */\n@-moz-document domain(\"chat.openai.com\") {\n @import url(\"https://unpkg.com/@catppuccin/highlightjs@0.1.2/css/catppuccin.variables.css\");\n\n .light body,\n .light html {\n #catppuccin(@lightFlavor);\n }\n\n :root,\n .dark body,\n .dark html {\n #catppuccin(@darkFlavor);\n }\n\n @catppuccin: {\n @latte: {\n @rosewater: #dc8a78;\n @flamingo: #dd7878;\n @pink: #ea76cb;\n @mauve: #8839ef;\n @red: #d20f39;\n @maroon: #e64553;\n @peach: #fe640b;\n @yellow: #df8e1d;\n @green: #40a02b;\n @teal: #179299;\n @sky: #04a5e5;\n @sapphire: #209fb5;\n @blue: #1e66f5;\n @lavender: #7287fd;\n @text: #4c4f69;\n @subtext1: #5c5f77;\n @subtext0: #6c6f85;\n @overlay2: #7c7f93;\n @overlay1: #8c8fa1;\n @overlay0: #9ca0b0;\n @surface2: #acb0be;\n @surface1: #bcc0cc;\n @surface0: #ccd0da;\n @base: #eff1f5;\n @mantle: #e6e9ef;\n @crust: #dce0e8;\n };\n @frappe: {\n @rosewater: #f2d5cf;\n @flamingo: #eebebe;\n @pink: #f4b8e4;\n @mauve: #ca9ee6;\n @red: #e78284;\n @maroon: #ea999c;\n @peach: #ef9f76;\n @yellow: #e5c890;\n @green: #a6d189;\n @teal: #81c8be;\n @sky: #99d1db;\n @sapphire: #85c1dc;\n @blue: #8caaee;\n @lavender: #babbf1;\n @text: #c6d0f5;\n @subtext1: #b5bfe2;\n @subtext0: #a5adce;\n @overlay2: #949cbb;\n @overlay1: #838ba7;\n @overlay0: #737994;\n @surface2: #626880;\n @surface1: #51576d;\n @surface0: #414559;\n @base: #303446;\n @mantle: #292c3c;\n @crust: #232634;\n };\n @macchiato: {\n @rosewater: #f4dbd6;\n @flamingo: #f0c6c6;\n @pink: #f5bde6;\n @mauve: #c6a0f6;\n @red: #ed8796;\n @maroon: #ee99a0;\n @peach: #f5a97f;\n @yellow: #eed49f;\n @green: #a6da95;\n @teal: #8bd5ca;\n @sky: #91d7e3;\n @sapphire: #7dc4e4;\n @blue: #8aadf4;\n @lavender: #b7bdf8;\n @text: #cad3f5;\n @subtext1: #b8c0e0;\n @subtext0: #a5adcb;\n @overlay2: #939ab7;\n @overlay1: #8087a2;\n @overlay0: #6e738d;\n @surface2: #5b6078;\n @surface1: #494d64;\n @surface0: #363a4f;\n @base: #24273a;\n @mantle: #1e2030;\n @crust: #181926;\n };\n @mocha: {\n @rosewater: #f5e0dc;\n @flamingo: #f2cdcd;\n @pink: #f5c2e7;\n @mauve: #cba6f7;\n @red: #f38ba8;\n @maroon: #eba0ac;\n @peach: #fab387;\n @yellow: #f9e2af;\n @green: #a6e3a1;\n @teal: #94e2d5;\n @sky: #89dceb;\n @sapphire: #74c7ec;\n @blue: #89b4fa;\n @lavender: #b4befe;\n @text: #cdd6f4;\n @subtext1: #bac2de;\n @subtext0: #a6adc8;\n @overlay2: #9399b2;\n @overlay1: #7f849c;\n @overlay0: #6c7086;\n @surface2: #585b70;\n @surface1: #45475a;\n @surface0: #313244;\n @base: #1e1e2e;\n @mantle: #181825;\n @crust: #11111b;\n };\n };\n\n @color: white;\n #rgbify(@color) {\n @rgb-raw: red(@color), green(@color), blue(@color);\n }\n\n #catppuccin(@lookup) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n\n --ctp-rosewater: #rgbify(@rosewater) [];\n --ctp-flamingo: #rgbify(@flamingo) [];\n --ctp-pink: #rgbify(@pink) [];\n --ctp-mauve: #rgbify(@mauve) [];\n --ctp-red: #rgbify(@red) [];\n --ctp-maroon: #rgbify(@maroon) [];\n --ctp-peach: #rgbify(@peach) [];\n --ctp-yellow: #rgbify(@yellow) [];\n --ctp-green: #rgbify(@green) [];\n --ctp-teal: #rgbify(@teal) [];\n --ctp-sky: #rgbify(@sky) [];\n --ctp-sapphire: #rgbify(@sapphire) [];\n --ctp-blue: #rgbify(@blue) [];\n --ctp-lavender: #rgbify(@lavender) [];\n --ctp-text: #rgbify(@text) [];\n --ctp-subtext1: #rgbify(@subtext1) [];\n --ctp-subtext0: #rgbify(@subtext0) [];\n --ctp-overlay2: #rgbify(@overlay2) [];\n --ctp-overlay1: #rgbify(@overlay1) [];\n --ctp-overlay0: #rgbify(@overlay0) [];\n --ctp-surface2: #rgbify(@surface2) [];\n --ctp-surface1: #rgbify(@surface1) [];\n --ctp-surface0: #rgbify(@surface0) [];\n --ctp-base: #rgbify(@crust) [];\n --ctp-mantle: #rgbify(@mantle) [];\n --ctp-curst: #rgbify(@crust) [];\n\n /* Main page */\n div[class*=\"bg-gray-\"]:not([class*=\"bg-gray-900\"]):not(\n [class*=\"bg-gray-700\"]\n ):not(.bg-black .bg-gray-800),\n div[class*=\"bg-vert-dark-gradient\"] {\n background: @base !important;\n }\n\n /* Sidebar */\n div[class*=\"bg-gray-900\"] {\n background-color: @mantle !important;\n }\n\n .bg-gray-900 .bg-gray-800 {\n background-color: @surface0 !important;\n }\n\n .bg-gradient-to-l {\n background: none;\n }\n\n /* Upgrade Plan */\n .shim-yellow {\n display: none;\n }\n\n /* Search */\n div[class*=\"bg-gray-700\"] {\n background-color: if(@lookup = latte, @base, @surface0) !important;\n }\n\n [class*=\"text-gray-\"],\n [class*=\"text-white\"]:not(.btn-primary .text-white) {\n color: @text !important;\n }\n\n div[class*=\"border-gray\"],\n div[class*=\"border-white\"] {\n border-color: @overlay0 !important;\n }\n\n input::placeholder,\n textarea::placeholder {\n color: @overlay0;\n }\n\n input,\n textarea {\n color: @text;\n }\n\n [class*=\"bg-white/5\"] {\n background-color: @surface0 !important;\n }\n\n .px-3.py-3,\n .pt-3 {\n background: @mantle !important;\n }\n\n .px-3.py-3:hover {\n background: @base !important;\n }\n /* Bot messages */\n .prose {\n --tw-prose-body: @text !important;\n --tw-prose-bold: @text !important;\n --tw-prose-code: @text !important;\n --tw-prose-links: @text !important;\n --tw-prose-headings: @overlay1 !important;\n }\n\n .bg-black {\n background-color: @crust !important;\n }\n\n .bg-black .bg-gray-800 {\n background-color: @surface0 !important;\n }\n\n code.hljs,\n code[class*=\"language-\"],\n pre[class*=\"language-\"] {\n color: @text !important;\n }\n\n /* Buttons */\n .btn-neutral {\n background-color: if(@lookup = latte, @base, @surface1) !important;\n color: @text !important;\n }\n\n .btn-primary {\n background-color: @green !important;\n color: @crust !important;\n }\n\n .btn-primary .text-white {\n color: @crust !important;\n }\n\n .btn-danger {\n background-color: @red !important;\n color: @crust !important;\n }\n\n .text-2xl {\n color: @text !important;\n }\n\n .dark [class*=\"bg-yellow-\"] {\n color: @crust !important;\n }\n\n .light [class*=\"bg-yellow-\"] {\n color: @text !important;\n }\n\n [class*=\"text-green\"] {\n color: @green !important;\n }\n\n .dark .dark\\:hover\\:bg-\\[\\#2A2B32\\]:hover {\n background-color: @surface0;\n }\n\n .dark .dark\\:bg-gray-900 {\n background-color: @mantle;\n }\n\n .dark .dark\\:bg-gray-800 {\n background-color: @surface0;\n }\n\n .dark .dark\\:hover\\:bg-gray-800:hover {\n background-color: @surface1;\n }\n\n .radix-state-active\\:bg-gray-800[data-state=\"active\"] {\n background-color: @surface0;\n }\n }\n}", "usercssData": { "name": "ChatGPT Catppuccin", "namespace": "github.com/catppuccin/userstyles/styles/chatgpt", "homepageURL": "https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt", "version": "0.0.5", "updateURL": "https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.css", "description": "Soothing pastel theme for ChatGPT", "author": "Catppuccin", "license": "MIT", "preprocessor": "less", "vars": { "lightFlavor": { "type": "select", "label": "Light Flavor", "name": "lightFlavor", "value": null, "default": "latte", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappe", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "darkFlavor": { "type": "select", "label": "Dark Flavor", "name": "darkFlavor", "value": null, "default": "mocha", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappe", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] } } }, "author": "Catppuccin", "description": "Soothing pastel theme for ChatGPT", "name": "ChatGPT Catppuccin", "updateDate": 1698242984808, "_id": "b053cab5-a06a-4e0b-92a6-85a53326e988", "_rev": 1698242984808, "id": 3 }, { "enabled": true, "updateUrl": "https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.css", "url": "https://github.com/catppuccin/userstyles/tree/main/styles/deepl", "installDate": 1698243065084, "sections": [ { "code": "" } ], "sourceCode": "/* ==UserStyle==\n@name DeepL Catppuccin\n@namespace github.com/catppuccin/userstyles/styles/deepl\n@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/deepl\n@version 0.3.0\n@description Soothing pastel theme for DeepL\n@author Catppuccin\n@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.css\n@license \t\t MIT\n\n@preprocessor less\n@var select lightFlavor \"Light Flavor\" [\"latte:Latte*\", \"frappe:Frappé\", \"macchiato:Macchiato\", \"mocha:Mocha\"]\n@var select darkFlavor \"Dark Flavor\" [\"latte:Latte\", \"frappe:Frappé\", \"macchiato:Macchiato\", \"mocha:Mocha*\"]\n@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:Grey\"]\n@var checkbox zenMode \"Zen Mode\" 0\n==/UserStyle== */\n\n@-moz-document url-prefix(\"https://www.deepl.com/translator\")\n{\n #catppuccin(@darkFlavor, @accentColor);\n\n #catppuccin(@lookup, @accent) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n @accent-color: @catppuccin[@@lookup][@@accent];\n }\n\n @accent-text: @crust; // if(@lookup=latte, #fff, @crust) * this doesn't work for some reason. find fix\n\n body,\n button {\n color: @text;\n }\n\n p {\n color: @subtext1;\n }\n\n a {\n color: @accent-color;\n\n &:hover {\n color: darken(@accent-color, 8%);\n }\n }\n\n input {\n background-color: @base;\n }\n\n input::placeholder,\n textarea::placeholder {\n color: @overlay1;\n }\n\n // dammit tailwind\n .bg-neutral-next-50,\n .bg-deprecated-grey {\n background-color: @mantle;\n }\n\n .bg-white,\n .bg-blue-100 {\n background-color: @base;\n }\n\n .bg-dark-8 {\n background-color: @surface0;\n }\n\n .bg-mosque {\n background-color: spin(@accent-color, 30);\n\n &.text-white {\n color: @accent-text;\n }\n }\n\n .bg-blue-next-500 {\n background-color: @accent-color;\n\n &.text-white {\n color: @accent-text;\n }\n }\n\n .border-dark-7,\n .border-neutral-300 {\n border-color: @surface0;\n }\n\n .border-blue-chill,\n .bg-blue-next-500 {\n border-color: @accent-color;\n }\n\n .border-neutral-next-900 {\n border-color: @overlay1;\n }\n\n .text-deepl-blue,\n .text-blue-600 {\n color: @accent-color;\n }\n\n .text-blue-chill {\n color: spin(@accent-color, 30);\n }\n\n .text-deprecated-mid-grey {\n color: @text;\n }\n\n .text-neutral-600 {\n color: @subtext0;\n }\n\n .text-dark-1 {\n color: @subtext1;\n }\n\n .text-white,\n .text-black {\n color: @text;\n }\n\n .text-neutral-next-800 {\n color: @overlay1;\n }\n\n [class*=\"hover:bg-dark-8\"]:hover,\n [class*=\"enabled:hover:bg-dark-8\"]:hover:enabled,\n [class*=\"hover:bg-neutral-200\"]:hover,\n [class*=\"hover:bg-neutral-next-100\"]:hover {\n background-color: @surface0;\n }\n\n [class*=\"hover:bg-blue-200\"]:hover {\n background-color: mix(@accent-color, @base, 8%);\n }\n\n [class*=\"hover:bg-blue-next-700\"]:hover {\n background-color: darken(@accent-color, 8%);\n }\n\n [class*=\"hover:border-blue-next-700\"]:hover {\n border-color: darken(@accent-color, 8%);\n }\n\n [class*=\"disabled:text-dark-5:disabled\"],\n [class*=\"disabled:text-neutral-500:disabled\"] {\n color: @overlay1;\n }\n\n [class*=\"hover:text-blue-chill\"]:hover {\n color: darken(@accent-color, 15%);\n }\n\n [class*=\"bg-[#B4DAE8]\"] {\n // background-color: fadeout(@accent-color, 70%);\n }\n\n [class*=\"bg-[#E1F0F5]\"] {\n background-color: fadeout(@accent-color, 70%);\n }\n\n // span[class*=\"hover:bg-[#B4DAE8]\"],\n [class*=\"bg-[#B4DAE8]\"] {\n // background-color: fadeout(@accent-color, 55%);\n\n &[class*=\"text-[#01557C]\"] {\n color: darken(@accent-color, 50%);\n }\n }\n\n [class*=\"text-[#25282D]\"] {\n color: @text;\n }\n\n [class*=\"text-[#01557C]\"] {\n color: @accent-color;\n }\n\n .divide-dark-7 > :not([hidden]) ~ :not([hidden]) {\n border-color: @surface1;\n }\n\n // general stuff\n [class*=\"button--\"] {\n &[class*=\"variant_contained--\"],\n &[class*=\"variant_contained--\"]:hover {\n color: @accent-text;\n }\n\n &[class*=\"color_primary--\"] {\n background-color: @accent-color;\n border-color: @accent-color;\n\n &:hover {\n background-color: darken(@accent-color, 15%);\n border-color: darken(@accent-color, 15%);\n color: @accent-text;\n }\n }\n }\n\n [class*=\"IconAnchor-module--anchor--\"] {\n color: @accent-color;\n\n &:hover {\n background-color: @surface0;\n }\n }\n\n [stroke=\"#0F2B46\"] {\n stroke: @accent-color !important;\n }\n\n [stroke=\"#006494\"] {\n stroke: @subtext0 !important;\n }\n\n // header\n [class^=\"BasePageHeader-module--container\"] {\n background-color: @crust;\n }\n\n [class|=\"PageHeaderLink-module--pageHeaderLink\"],\n [class|=\"FlyoutMenuButton-module--flyoutMenuButton\"],\n [class|=\"LoginButton-module--loginButton\"] {\n color: darken(@accent-color, 8%);\n }\n\n [class|=\"SideMenuButton-module--menuButton\"] {\n &,\n &::before,\n &::after {\n border-top-color: darken(@accent-color, 8%);\n }\n\n &:hover {\n &,\n &::before,\n &::after {\n border-top-color: @accent-color;\n }\n }\n }\n\n [class*=\"PageHeaderLink-module--pageHeaderLink--\"]:not(\n [class*=\"PageHeaderLink-module--nohover--\"]\n ):hover {\n color: @accent-color;\n border-color: @accent-color;\n }\n\n [class|=\"LoginButton-module--loginButton\"]:hover {\n color: @accent-color;\n }\n\n [class*=\"badge-module--badge--\"][class*=\"badge-module--proDark--\"] {\n background-color: spin(@accent-color, 30);\n color: @accent-text;\n }\n\n [class*=\"StartFreeTrialButton-module--startFreeTrialButton--\"] {\n background-color: @accent-color;\n border-color: @accent-color;\n color: @accent-text;\n\n &:hover {\n background-color: darken(@accent-color, 8%);\n border-color: darken(@accent-color, 8%);\n color: @accent-text;\n }\n }\n\n [class|=\"ProductUpdateButton-module--updateToolTip\"] {\n background-color: @surface0;\n color: @text;\n\n &::after {\n border-bottom-color: @surface0;\n }\n }\n\n // buttons above translation container\n [class|=\"cardButton\"] {\n background-color: @base;\n border-color: @surface0;\n\n &:not([class*=\"active--\"]):hover {\n background-color: @surface0;\n }\n }\n\n [class|=\"textLower\"] {\n color: @overlay1;\n }\n\n [class|=\"logo\"],\n [class|=\"textUpper\"] {\n color: @accent-color;\n }\n\n [class*=\"active--\"] {\n [class|=\"logo\"],\n [class|=\"textUpper\"] {\n color: @text;\n }\n\n [class|=\"innerLower\"] {\n background-color: @accent-color;\n }\n }\n\n // translation container\n [class*=\"SourceTranslatorArea-module--focusBorder--\"]:has(\n div[contenteditable=\"true\"]:focus\n ) {\n border-color: @accent-color;\n }\n\n [class*=\"focus-within:border-blue-chill\"] {\n // border-color: @accent-color;\n }\n\n d-textarea > [data-placeholder],\n d-textarea > div[data-content=\"true\"]::before {\n color: @subtext0;\n }\n\n [class*=\"enabled:hover-capable:hover:bg-dark-8\"]:hover:enabled {\n background-color: @surface0;\n }\n\n // alternatives\n [data-testid=\"word-alternatives-list\"] {\n [class*=\"root--\"] {\n background-color: @base;\n\n &[class*=\"selected--\"] {\n background-color: @surface0;\n }\n }\n }\n\n div:has(> [class^=\"DictionaryContent-module--content--\"].embedded) {\n background-color: @base;\n\n .tag_lemma .dictLink {\n color: @subtext1;\n }\n\n .translation_group .translation_group_line .notascommon,\n .translation_group .translation_group_line .translation.sortablemg .sep {\n color: @overlay2;\n }\n }\n\n // dictionary\n [class*=\"DictionaryContent-module--content--\"] {\n .isForeignTerm .inflectioninfo,\n .isForeignTerm .tag_lemma,\n .isForeignTerm .tag_lemma a,\n .isForeignTerm .tag_s,\n .isForeignTerm .tag_s a,\n .isForeignTerm .tag_trans_src_context,\n .tag_trans {\n color: @subtext1;\n }\n\n .isForeignTerm .tag_t,\n .isForeignTerm .tag_t a,\n .isForeignTerm .tag_trans,\n .isForeignTerm .tag_trans a,\n .tag_lemma a {\n color: @accent-color;\n }\n\n .notascommon,\n .sep {\n color: @overlay2;\n }\n }\n\n // glossary\n .lmt__glossary_onOffSwitch_container {\n label[class|=\"label\"] {\n --background: @overlay1;\n --backgroundHover: darken(@overlay1, 8%);\n --inlineLabelColor: @accent-text;\n --outline-color: @accent-color;\n\n &[class*=\"selected--\"] {\n --background: @green;\n --backgroundHover: darken(@green, 8%);\n }\n\n [class|=\"toggle\"] [class|=\"knob\"] {\n background: @accent-text;\n }\n }\n }\n\n [class|=\"modal\"],\n .lmt__glossary_editor {\n background-color: @base;\n\n [class*=\"Form-module--form--\"] [class*=\"Form-module--submit--\"] {\n background: @accent-color;\n color: @accent-text;\n\n &:disabled {\n background: fadeout(@accent-color, 50%);\n }\n }\n }\n\n .lmt__glossary_editor {\n color: @text;\n border-color: @accent-color;\n\n form.bg-deprecated-grey\n [class|=\"wrapper\"][class*=\"Form-module--inputSource--\"],\n form.bg-deprecated-grey\n [class|=\"wrapper\"][class*=\"Form-module--inputTarget--\"] {\n --input-background: @base;\n --input-border-color: @surface1;\n --input-color: @subtext1;\n\n [class|=\"button\"][aria-expanded=\"true\"] {\n border-color: @accent-color;\n }\n\n [class|=\"controls\"] [class|=\"wrapper\"] {\n --button-background: @base;\n --button-border-color: @surface1;\n --button-color: @subtext1;\n\n [class|=\"flyout\"] {\n background: @base;\n --option-color: @subtext1;\n --option-selected-color: @subtext1;\n --option-background: fadeout(@yellow, 80%);\n --option-disabled-color: @overlay1;\n --option-icon-color: @accent-color;\n }\n }\n }\n }\n\n .lmt__glossary_editor_mainBar {\n background-color: @accent-color;\n color: @accent-text;\n\n .lmt__glossary_editorClose {\n color: inherit;\n }\n }\n\n .lmt__glossary_editor .lmt__glossary_editor_subBar_top,\n .lmt__glossary_editor_subBar_bottom {\n background-color: @mantle;\n }\n\n .lmt__glossary_editor\n .lmt__glossary_editor_subBar_top\n .lmt__glossary_editor_glossarySelect\n .lmt__glossary_editor_glossaryNameWrapper\n .lmt__glossary_editor_glossaryName {\n color: inherit;\n }\n\n .lmt__glossary_editor\n .lmt__glossary_editor_subBar_top\n .lmt__glossary_editor_glossarySelect\n .lmt__glossary_editor_glossaryNameWrapper\n .lmt__glossary_editor_glossarySelectChevron.lmt__glossary_arrowDown {\n border-right-color: darken(@accent-color, 8%);\n border-bottom-color: darken(@accent-color, 8%);\n }\n\n .lmt__glossary_button .lmt__glossary_button_label:hover,\n .lmt__glossary_highlight,\n .lmt__glossary_editor_subBar_bottom\n .lmt__glossary_editor_glossaryAddNewWrapper\n .lmt__glossary_editor_glossaryAddNew {\n color: @accent-color;\n }\n\n .lmt_firstEntry-content .lmt__glossary_newEntry_inputSource,\n .lmt_firstEntry-content .lmt__glossary_newEntry_inputTarget {\n border-color: @surface1;\n color: @subtext1;\n\n &:focus {\n border-color: @accent-color;\n }\n }\n\n .lmt__glossary_editor_langPairHeadline {\n color: inherit;\n border-bottom-color: @surface1;\n }\n\n .lmt__glossary_editorRow {\n color: inherit;\n\n .iconButton {\n color: @subtext0;\n }\n }\n\n .lmt__glossary_arrowRightWrapper .lmt__glossary_arrowRight {\n border-bottom-color: @surface1;\n border-right-color: @surface1;\n }\n\n .lmt__glossary_dialog {\n background-color: @surface0;\n border-color: @surface1;\n color: @text;\n }\n\n .lmt__glossary_dialog__line--suggestions,\n .lmt__glossary_dialog__line .choice .option {\n color: @accent-color;\n }\n\n // this this appears when you click on a word on the translated container...\n .root--Te5J3 {\n background-color: @base;\n }\n\n .divider--CI8JQ {\n color: @surface1;\n }\n\n // translate files\n [class^=\"UploadPanel-module--docTrans__help_popup--\"] {\n background-color: @base;\n }\n\n // quotes\n [class|=\"Quote-module--quote\"] {\n background-color: @base !important;\n color: @text;\n }\n\n [class|=\"Quote-module--quoteSource\"] {\n > a {\n color: darken(@accent-color, 8%);\n }\n }\n\n [class|=\"Quote-module--quote\"] {\n border-color: @surface0;\n }\n\n [class|=\"Quotes-module--quotesNavigationEntry\"] {\n background-color: @surface1;\n }\n\n [class*=\"Quotes-module--quotesNavigationEntryActive--\"] {\n background-color: @accent-color;\n }\n\n // aside\n [class^=\"ProBanner2021-module--wrapper--\"],\n [class|=\"CareerBanner-module--container\"] {\n background: @base;\n }\n\n [class|=\"CareerBanner-module--text\"] {\n h2 {\n color: @overlay1;\n }\n }\n\n [class|=\"PopularLangPairList-module--seoText\"] {\n color: @overlay0;\n\n p[class|=\"PopularLangPairList-module--title\"] {\n color: @overlay2;\n }\n }\n\n // footer\n footer [class|=\"pageFooterV2-module--footerOuterContainer\"] {\n background-color: @base;\n }\n\n [class|=\"ProBanner2021-module--textLink\"] {\n color: spin(@accent-color, 30);\n }\n\n [class|=\"pageFooterV2-module--footerOuterContainer\"]\n [class|=\"pageFooterV2-module--footerContainer\"]\n [class|=\"pageFooterV2-module--footerContentContainer\"]\n [class|=\"pageFooterV2-module--linksContainer\"]\n [class|=\"pageFooterV2-module--linkList\"]\n li {\n &:first-of-type {\n color: @overlay1;\n }\n\n &:not(:first-of-type) a {\n color: @text !important;\n }\n }\n\n [class|=\"LanguageSelector-module--wrapper\"] {\n --button-background: @surface0;\n --button-border-color: @surface1;\n --button-color: @subtext1;\n\n [class|=\"LanguageSelector-module--flyout\"] {\n background: @surface0;\n // --option-background: @surface0;\n --option-color: @subtext1;\n --option-icon-color: @accent-color;\n\n [class|=\"LanguageSelector-module--option\"][class*=\"LanguageSelector-module--active--\"] {\n --option-background: fadeout(@yellow, 80%);\n }\n }\n }\n\n // side menu\n [class|=\"classicSidemenu-module--menuContainer\"] {\n background-color: @base;\n\n [class|=\"closeButton-module--closeButton\"] {\n &::before,\n &::after {\n background-color: @accent-color;\n }\n }\n }\n\n [class|=\"classicSidemenu-module--mainContent\"] {\n border-bottom-color: @surface0;\n }\n\n [class|=\"mainMenu-module--container\"] a {\n color: @text;\n\n &:hover {\n color: @accent-color;\n }\n }\n\n [class|=\"subMenu-module--container\"] {\n button {\n color: @text !important;\n }\n\n [class|=\"button-module--button\"][class*=\"button-module--variant_text--\"] {\n &,\n &:hover {\n background-color: transparent;\n }\n }\n }\n\n // whatever\n .lmt__glossary_ad_checkmark {\n border-bottom-color: @green;\n border-right-color: @green;\n }\n\n // zen mode\n & when (@zenMode = 1) {\n header,\n [class=\"w-full bg-white px-8 lg:px-[70px]\"],\n [class=\"p-8 lg:px-[70px]\"],\n footer,\n [href=\"/write\"].block {\n display: none;\n }\n\n body {\n background: @mantle;\n }\n\n [class=\"relative pr-0 false\"] {\n height: 100%;\n }\n\n [data-testid=\"translator\"] {\n // height: 100%;\n // width: 100vw;\n display: flex;\n justify-content: center;\n align-content: center;\n align-items: center;\n\n > div:first-of-type {\n width: 100vw;\n }\n }\n }\n}\n\n@catppuccin: {\n @latte: {\n @rosewater: #dc8a78;\n @flamingo: #dd7878;\n @pink: #ea76cb;\n @mauve: #8839ef;\n @red: #d20f39;\n @maroon: #e64553;\n @peach: #fe640b;\n @yellow: #df8e1d;\n @green: #40a02b;\n @teal: #179299;\n @sky: #04a5e5;\n @sapphire: #209fb5;\n @blue: #1e66f5;\n @lavender: #7287fd;\n @text: #4c4f69;\n @subtext1: #5c5f77;\n @subtext0: #6c6f85;\n @overlay2: #7c7f93;\n @overlay1: #8c8fa1;\n @overlay0: #9ca0b0;\n @surface2: #acb0be;\n @surface1: #bcc0cc;\n @surface0: #ccd0da;\n @base: #eff1f5;\n @mantle: #e6e9ef;\n @crust: #dce0e8;\n };\n\n @frappe: {\n @rosewater: #f2d5cf;\n @flamingo: #eebebe;\n @pink: #f4b8e4;\n @mauve: #ca9ee6;\n @red: #e78284;\n @maroon: #ea999c;\n @peach: #ef9f76;\n @yellow: #e5c890;\n @green: #a6d189;\n @teal: #81c8be;\n @sky: #99d1db;\n @sapphire: #85c1dc;\n @blue: #8caaee;\n @lavender: #babbf1;\n @text: #c6d0f5;\n @subtext1: #b5bfe2;\n @subtext0: #a5adce;\n @overlay2: #949cbb;\n @overlay1: #838ba7;\n @overlay0: #737994;\n @surface2: #626880;\n @surface1: #51576d;\n @surface0: #414559;\n @base: #303446;\n @mantle: #292c3c;\n @crust: #232634;\n };\n\n @macchiato: {\n @rosewater: #f4dbd6;\n @flamingo: #f0c6c6;\n @pink: #f5bde6;\n @mauve: #c6a0f6;\n @red: #ed8796;\n @maroon: #ee99a0;\n @peach: #f5a97f;\n @yellow: #eed49f;\n @green: #a6da95;\n @teal: #8bd5ca;\n @sky: #91d7e3;\n @sapphire: #7dc4e4;\n @blue: #8aadf4;\n @lavender: #b7bdf8;\n @text: #cad3f5;\n @subtext1: #b8c0e0;\n @subtext0: #a5adcb;\n @overlay2: #939ab7;\n @overlay1: #8087a2;\n @overlay0: #6e738d;\n @surface2: #5b6078;\n @surface1: #494d64;\n @surface0: #363a4f;\n @base: #24273a;\n @mantle: #1e2030;\n @crust: #181926;\n };\n\n @mocha: {\n @rosewater: #f5e0dc;\n @flamingo: #f2cdcd;\n @pink: #f5c2e7;\n @mauve: #cba6f7;\n @red: #f38ba8;\n @maroon: #eba0ac;\n @peach: #fab387;\n @yellow: #f9e2af;\n @green: #a6e3a1;\n @teal: #94e2d5;\n @sky: #89dceb;\n @sapphire: #74c7ec;\n @blue: #89b4fa;\n @lavender: #b4befe;\n @text: #cdd6f4;\n @subtext1: #bac2de;\n @subtext0: #a6adc8;\n @overlay2: #9399b2;\n @overlay1: #7f849c;\n @overlay0: #6c7086;\n @surface2: #585b70;\n @surface1: #45475a;\n @surface0: #313244;\n @base: #1e1e2e;\n @mantle: #181825;\n @crust: #11111b;\n };\n};", "usercssData": { "name": "DeepL Catppuccin", "namespace": "github.com/catppuccin/userstyles/styles/deepl", "homepageURL": "https://github.com/catppuccin/userstyles/tree/main/styles/deepl", "version": "0.3.0", "description": "Soothing pastel theme for DeepL", "author": "Catppuccin", "updateURL": "https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.css", "license": "MIT", "preprocessor": "less", "vars": { "lightFlavor": { "type": "select", "label": "Light Flavor", "name": "lightFlavor", "value": null, "default": "latte", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappé", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "darkFlavor": { "type": "select", "label": "Dark Flavor", "name": "darkFlavor", "value": null, "default": "mocha", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappé", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "accentColor": { "type": "select", "label": "Accent", "name": "accentColor", "value": null, "default": "blue", "options": [ { "name": "rosewater", "label": "Rosewater", "value": "rosewater" }, { "name": "flamingo", "label": "Flamingo", "value": "flamingo" }, { "name": "pink", "label": "Pink", "value": "pink" }, { "name": "mauve", "label": "Mauve", "value": "mauve" }, { "name": "red", "label": "Red", "value": "red" }, { "name": "maroon", "label": "Maroon", "value": "maroon" }, { "name": "peach", "label": "Peach", "value": "peach" }, { "name": "yellow", "label": "Yellow", "value": "yellow" }, { "name": "green", "label": "Green", "value": "green" }, { "name": "teal", "label": "Teal", "value": "teal" }, { "name": "blue", "label": "Blue", "value": "blue" }, { "name": "sapphire", "label": "Sapphire", "value": "sapphire" }, { "name": "sky", "label": "Sky", "value": "sky" }, { "name": "lavender", "label": "Lavender", "value": "lavender" }, { "name": "subtext0", "label": "Grey", "value": "subtext0" } ] }, "zenMode": { "type": "checkbox", "label": "Zen Mode", "name": "zenMode", "value": null, "default": "0", "options": null } } }, "author": "Catppuccin", "description": "Soothing pastel theme for DeepL", "name": "DeepL Catppuccin", "updateDate": 1698243065084, "_id": "e083a452-5ef6-4812-8b76-5970f5c98476", "_rev": 1698243065085, "id": 4 }, { "enabled": true, "updateUrl": "https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css", "url": "https://github.com/catppuccin/userstyles/tree/main/styles/github", "installDate": 1698243112279, "sections": [ { "code": "" } ], "sourceCode": "/* ==UserStyle==\n@name Github Catppuccin\n@namespace github.com/catppuccin/userstyles/styles/github\n@homepageURL \thttps://github.com/catppuccin/userstyles/tree/main/styles/github\n@version 1.2.7\n@description Soothing pastel theme for GitHub\n@author Catppuccin\n@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css\n@license \t\tMIT\n\n@preprocessor less\n@var select lightFlavor \"Light Flavor\" [\"latte:Latte*\", \"frappe:Frappé\", \"macchiato:Macchiato\", \"mocha:Mocha\"]\n@var select darkFlavor \"Dark Flavor\" [\"latte:Latte\", \"frappe:Frappé\", \"macchiato:Macchiato\", \"mocha:Mocha*\"]\n@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\"]\n@var checkbox topbar \"Topbar colors\" 1\n@var checkbox usefont \"Use Inter font\" 0\n==/UserStyle== */\n\n@catppuccin: {\n @latte: {\n @rosewater: #dc8a78;\n @flamingo: #dd7878;\n @pink: #ea76cb;\n @mauve: #8839ef;\n @red: #d20f39;\n @maroon: #e64553;\n @peach: #fe640b;\n @yellow: #df8e1d;\n @green: #40a02b;\n @teal: #179299;\n @sky: #04a5e5;\n @sapphire: #209fb5;\n @blue: #1e66f5;\n @lavender: #7287fd;\n @text: #4c4f69;\n @subtext1: #5c5f77;\n @subtext0: #6c6f85;\n @overlay2: #7c7f93;\n @overlay1: #8c8fa1;\n @overlay0: #9ca0b0;\n @surface2: #acb0be;\n @surface1: #bcc0cc;\n @surface0: #ccd0da;\n @base: #eff1f5;\n @mantle: #e6e9ef;\n @crust: #dce0e8;\n };\n @frappe: {\n @rosewater: #f2d5cf;\n @flamingo: #eebebe;\n @pink: #f4b8e4;\n @mauve: #ca9ee6;\n @red: #e78284;\n @maroon: #ea999c;\n @peach: #ef9f76;\n @yellow: #e5c890;\n @green: #a6d189;\n @teal: #81c8be;\n @sky: #99d1db;\n @sapphire: #85c1dc;\n @blue: #8caaee;\n @lavender: #babbf1;\n @text: #c6d0f5;\n @subtext1: #b5bfe2;\n @subtext0: #a5adce;\n @overlay2: #949cbb;\n @overlay1: #838ba7;\n @overlay0: #737994;\n @surface2: #626880;\n @surface1: #51576d;\n @surface0: #414559;\n @base: #303446;\n @mantle: #292c3c;\n @crust: #232634;\n };\n @macchiato: {\n @rosewater: #f4dbd6;\n @flamingo: #f0c6c6;\n @pink: #f5bde6;\n @mauve: #c6a0f6;\n @red: #ed8796;\n @maroon: #ee99a0;\n @peach: #f5a97f;\n @yellow: #eed49f;\n @green: #a6da95;\n @teal: #8bd5ca;\n @sky: #91d7e3;\n @sapphire: #7dc4e4;\n @blue: #8aadf4;\n @lavender: #b7bdf8;\n @text: #cad3f5;\n @subtext1: #b8c0e0;\n @subtext0: #a5adcb;\n @overlay2: #939ab7;\n @overlay1: #8087a2;\n @overlay0: #6e738d;\n @surface2: #5b6078;\n @surface1: #494d64;\n @surface0: #363a4f;\n @base: #24273a;\n @mantle: #1e2030;\n @crust: #181926;\n };\n @mocha: {\n @rosewater: #f5e0dc;\n @flamingo: #f2cdcd;\n @pink: #f5c2e7;\n @mauve: #cba6f7;\n @red: #f38ba8;\n @maroon: #eba0ac;\n @peach: #fab387;\n @yellow: #f9e2af;\n @green: #a6e3a1;\n @teal: #94e2d5;\n @sky: #89dceb;\n @sapphire: #74c7ec;\n @blue: #89b4fa;\n @lavender: #b4befe;\n @text: #cdd6f4;\n @subtext1: #bac2de;\n @subtext0: #a6adc8;\n @overlay2: #9399b2;\n @overlay1: #7f849c;\n @overlay0: #6c7086;\n @surface2: #585b70;\n @surface1: #45475a;\n @surface0: #313244;\n @base: #1e1e2e;\n @mantle: #181825;\n @crust: #11111b;\n };\n};\n\n@-moz-document regexp(\"https:\\/\\/(gist\\.)*github\\.com(?!\\/(home|marketplace|organizations\\/plan)).*\") {\n [data-color-mode=\"light\"],\n [data-color-mode=\"auto\"] > .theme-light {\n #catppuccin(@lightFlavor, @accentColor);\n }\n @media (prefers-color-scheme: light) {\n [data-color-mode=\"auto\"] {\n #catppuccin(@lightFlavor, @accentColor);\n }\n }\n [data-color-mode=\"dark\"],\n [data-color-mode=\"auto\"] > .theme-dark {\n #catppuccin(@darkFlavor, @accentColor);\n }\n @media (prefers-color-scheme: dark) {\n [data-color-mode=\"auto\"] {\n #catppuccin(@darkFlavor, @accentColor);\n }\n }\n\n html:not([data-light-theme=\"light\"]) body:not(.logged-out)::after,\n html:not([data-dark-theme=\"dark\"]) body:not(.logged-out)::after {\n position: fixed;\n top: 0;\n left: 0;\n padding: 1rem;\n margin: 1rem;\n font-size: 0.9rem;\n font-weight: 600;\n border-radius: 0.5rem;\n max-width: 40ch;\n background-color: var(--color-danger-fg);\n color: var(--color-header-bg);\n content: \"Unsupported GitHub theme detected! Please switch to the default light/dark theme via the GitHub Appearance settings to get the best experience for the Catppuccin GitHub userstyle.\";\n z-index: 9999;\n }\n\n #coloredButton(@name, @color) {\n --color-btn-@{name}-text: @base;\n --color-btn-@{name}-bg: @color;\n --color-btn-@{name}-border: transparent;\n --color-btn-@{name}-shadow: 0 0 transparent;\n --color-btn-@{name}-inset-shadow: 0 0 transparent;\n --color-btn-@{name}-hover-bg: mix(@color, @text, 30%);\n --color-btn-@{name}-hover-border: rgba(240, 246, 252, 0.1);\n --color-btn-@{name}-selected-bg: mix(@color, @text, 50%);\n --color-btn-@{name}-selected-shadow: 0 0 transparent;\n --color-btn-@{name}-disabled-text: @crust;\n --color-btn-@{name}-disabled-bg: mix(@color, @base, 60%);\n --color-btn-@{name}-disabled-border: transparent;\n --color-btn-@{name}-focus-bg: #238636;\n --color-btn-@{name}-focus-border: rgba(240, 246, 252, 0.1);\n --color-btn-@{name}-focus-shadow: 0 0 0 3px rgba(46, 164, 79, 0.4);\n --color-btn-@{name}-icon: @base;\n --color-btn-@{name}-counter-bg: rgba(255, 255, 255, 0.2);\n }\n\n #catppuccin(@lookup, @accent) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n @accent-color: @catppuccin[@@lookup][@@accent];\n\n &,\n & body {\n accent-color: @accent-color;\n --bgColor-default: @base;\n --color-canvas-default-transparent: rgba(13, 17, 23, 0);\n --color-page-header-bg: @base;\n --color-marketing-icon-primary: @sky;\n --color-marketing-icon-secondary: @blue;\n --color-diff-blob-addition-num-text: @text;\n --color-diff-blob-addition-fg: @text;\n --color-diff-blob-addition-num-bg: fadeout(@green, 70%);\n --color-diff-blob-addition-line-bg: fadeout(@green, 85%);\n --color-diff-blob-addition-word-bg: fadeout(@green, 70%);\n --color-diff-blob-deletion-num-text: @text;\n --color-diff-blob-deletion-fg: @text;\n --color-diff-blob-deletion-num-bg: fadeout(@red, 70%);\n --color-diff-blob-deletion-line-bg: fadeout(@red, 85%);\n --color-diff-blob-deletion-word-bg: fadeout(@red, 70%);\n --color-diff-blob-hunk-num-bg: fadeout(@blue, 60%);\n --color-diff-blob-expander-icon: #8b949e;\n --color-diff-blob-selected-line-highlight-mix-blend-mode: screen;\n --color-diffstat-deletion-border: rgba(240, 246, 252, 0.1);\n --color-diffstat-addition-border: rgba(240, 246, 252, 0.1);\n --color-diffstat-addition-bg: @green;\n --color-search-keyword-hl: rgba(210, 153, 34, 0.4);\n --color-prettylights-syntax-comment: @overlay1;\n --color-prettylights-syntax-constant: @blue;\n --color-prettylights-syntax-entity: @blue;\n --color-prettylights-syntax-storage-modifier-import: @peach;\n --color-prettylights-syntax-entity-tag: @teal;\n --color-prettylights-syntax-keyword: @pink;\n --color-prettylights-syntax-string: @green;\n --color-prettylights-syntax-variable: @peach;\n --color-prettylights-syntax-brackethighlighter-unmatched: #f0f;\n --color-prettylights-syntax-invalid-illegal-text: @red;\n --color-prettylights-syntax-invalid-illegal-bg: fadeout(@red, 85%);\n --color-prettylights-syntax-carriage-return-text: #f0f;\n --color-prettylights-syntax-carriage-return-bg: #f0f;\n --color-prettylights-syntax-string-regexp: #f0f;\n --color-prettylights-syntax-markup-list: #f0f;\n --color-prettylights-syntax-markup-heading: @teal;\n --color-prettylights-syntax-markup-italic: @yellow;\n --color-prettylights-syntax-markup-bold: @yellow;\n --color-prettylights-syntax-markup-deleted-text: @text;\n --color-prettylights-syntax-markup-deleted-bg: fadeout(@red, 60%);\n --color-prettylights-syntax-markup-inserted-text: @text;\n --color-prettylights-syntax-markup-inserted-bg: fadeout(@green, 60%);\n --color-prettylights-syntax-markup-changed-text: @text;\n --color-prettylights-syntax-markup-changed-bg: fadeout(@yellow, 60%);\n --color-prettylights-syntax-markup-ignored-text: @text;\n --color-prettylights-syntax-markup-ignored-bg: #f0f;\n --color-prettylights-syntax-meta-diff-range: @mauve;\n --color-prettylights-syntax-brackethighlighter-angle: #f0f;\n --color-prettylights-syntax-sublimelinter-gutter-mark: #f0f;\n --color-prettylights-syntax-constant-other-reference-link: #f0f;\n --color-codemirror-text: @text;\n --color-codemirror-bg: @base;\n --color-codemirror-gutters-bg: @base;\n --color-codemirror-guttermarker-text: @base;\n --color-codemirror-guttermarker-subtle-text: #6e7681;\n --color-codemirror-linenumber-text: #8b949e;\n --color-codemirror-cursor: #c9d1d9;\n --color-codemirror-selection-bg: rgba(56, 139, 253, 0.4);\n --color-codemirror-activeline-bg: rgba(110, 118, 129, 0.1);\n --color-codemirror-matchingbracket-text: #c9d1d9;\n --color-codemirror-lines-bg: @base;\n --color-codemirror-syntax-comment: #8b949e;\n --color-codemirror-syntax-constant: #79c0ff;\n --color-codemirror-syntax-entity: #d2a8ff;\n --color-codemirror-syntax-keyword: #ff7b72;\n --color-codemirror-syntax-storage: #ff7b72;\n --color-codemirror-syntax-string: #a5d6ff;\n --color-codemirror-syntax-support: #79c0ff;\n --color-codemirror-syntax-variable: #ffa657;\n --color-checks-bg: @mantle;\n --color-checks-run-border-width: 1px;\n --color-checks-container-border-width: 1px;\n --color-checks-text-primary: @text;\n --color-checks-text-secondary: @subtext1;\n --color-checks-text-link: @sapphire;\n --color-checks-btn-icon: @text;\n --color-checks-btn-hover-icon: @text;\n --color-checks-btn-hover-bg: @crust;\n --color-checks-input-text: @surface1;\n --color-checks-input-placeholder-text: @subtext1;\n --color-checks-input-focus-text: @text;\n --color-checks-input-bg: @surface0;\n --color-checks-input-shadow: 0 0 0 1px;\n --color-checks-donut-error: @red;\n --color-checks-donut-pending: @peach;\n --color-checks-donut-success: @green;\n --color-checks-donut-neutral: @overlay2;\n --color-checks-dropdown-text: @text;\n --color-checks-dropdown-bg: @surface0;\n --color-checks-dropdown-border: @surface1;\n --color-checks-dropdown-shadow: @crust;\n --color-checks-dropdown-hover-text: @subtext0;\n --color-checks-dropdown-hover-bg: @mantle;\n --color-checks-dropdown-btn-hover-text: @text;\n --color-checks-dropdown-btn-hover-bg: @mantle;\n --color-checks-scrollbar-thumb-bg: @mantle;\n --color-checks-header-label-text: @text;\n --color-checks-header-label-open-text: @accent-color;\n --color-checks-header-border: @surface0;\n --color-checks-header-icon: @text;\n --color-checks-line-text: @subtext0;\n --color-checks-line-num-text: @subtext0;\n --color-checks-line-timestamp-text: @subtext0;\n --color-checks-line-hover-bg: @surface0;\n --color-checks-line-selected-bg: @surface0;\n --color-checks-line-selected-num-text: #dc2286;\n --color-checks-line-dt-fm-text: #dc2286;\n --color-checks-line-dt-fm-bg: #dc2286;\n --color-checks-gate-bg: rgba(187, 128, 9, 0.15);\n --color-checks-gate-text: @text;\n --color-checks-gate-waiting-text: @yellow;\n --color-checks-step-header-open-bg: @surface0;\n --color-checks-step-error-text: @maroon;\n --color-checks-step-warning-text: @peach;\n --color-checks-logline-text: @text;\n --color-checks-logline-num-text: @text;\n --color-checks-logline-debug-text: @mauve;\n --color-checks-logline-error-text: @text;\n --color-checks-logline-error-num-text: @maroon;\n --color-checks-logline-error-bg: fadeout(@maroon, 85%);\n --color-checks-logline-warning-text: @subtext1;\n --color-checks-logline-warning-num-text: @peach;\n --color-checks-logline-warning-bg: fadeout(@peach, 85%);\n --color-checks-logline-command-text: @blue;\n --color-checks-logline-section-text: @green;\n --color-checks-ansi-black: @surface1;\n --color-checks-ansi-black-bright: @surface2;\n --color-checks-ansi-white: @subtext1;\n --color-checks-ansi-white-bright: @subtext0;\n --divider-color: @surface1;\n --underlineNav-borderColor-active: @accent-color;\n\n & when (@lookup =latte) {\n // When using a light theme use the light colors instead of the dark\n --color-checks-ansi-black: @subtext1;\n --color-checks-ansi-black-bright: @subtext0;\n --color-checks-ansi-white: @surface2;\n --color-checks-ansi-white-bright: @surface1;\n }\n\n --color-checks-ansi-gray: #f0f;\n --color-checks-ansi-red: @red;\n --color-checks-ansi-red-bright: @red;\n --color-checks-ansi-green: @green;\n --color-checks-ansi-green-bright: @green;\n --color-checks-ansi-yellow: @yellow;\n --color-checks-ansi-yellow-bright: @yellow;\n --color-checks-ansi-blue: @blue;\n --color-checks-ansi-blue-bright: @blue;\n --color-checks-ansi-magenta: @pink;\n --color-checks-ansi-magenta-bright: @pink;\n --color-checks-ansi-cyan: @teal;\n --color-checks-ansi-cyan-bright: @teal;\n --color-project-header-bg: #0d1117;\n --color-project-sidebar-bg: #161b22;\n --color-project-gradient-in: #161b22;\n --color-project-gradient-out: rgba(22, 27, 34, 0);\n --color-mktg-btn-bg: #f6f8fa;\n --color-mktg-btn-shadow-outline: rgb(255, 255, 255 / 25%) 0 0 0 1px inset;\n --color-mktg-btn-shadow-focus: rgb(255, 255, 255 / 25%) 0 0 0 4px;\n --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15),\n 0 100px 80px rgba(255, 255, 255, 0.02),\n 0 42px 33px rgba(255, 255, 255, 0.024),\n 0 22px 18px rgba(255, 255, 255, 0.028),\n 0 12px 10px rgba(255, 255, 255, 0.034),\n 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);\n --color-mktg-btn-shadow-hover-muted: rgb(255, 255, 255) 0 0 0 2px inset;\n --color-avatar-bg: rgba(255, 255, 255, 0.1);\n --color-avatar-border: rgba(240, 246, 252, 0.1);\n --color-avatar-stack-fade: #30363d;\n --color-avatar-stack-fade-more: #21262d;\n --color-avatar-child-shadow: -2px -2px 0 #0d1117;\n --color-topic-tag-border: rgba(0, 0, 0, 0);\n --color-counter-border: rgba(0, 0, 0, 0);\n --color-select-menu-backdrop-border: #484f58;\n --color-select-menu-tap-highlight: rgba(48, 54, 61, 0.5);\n --color-select-menu-tap-focus-bg: #0c2d6b;\n --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1, 4, 9, 0.85);\n --color-header-text: var(--subtext2);\n --color-header-bg: @base;\n\n & when (@topbar =1) {\n // If topbar is enabled then make the topbar color different\n --color-header-bg: @mantle;\n }\n\n --color-header-divider: #8b949e;\n --color-header-logo: @text;\n --color-header-search-bg: @surface0;\n --color-header-search-border: @surface1;\n --color-sidenav-selected-bg: @surface1;\n --color-menu-bg-active: @surface2;\n --color-input-disabled-bg: rgba(110, 118, 129, 0);\n --color-timeline-badge-bg: @surface0;\n --color-ansi-black: #484f58;\n --color-ansi-black-bright: #6e7681;\n --color-ansi-white: #b1bac4;\n --color-ansi-white-bright: #ffffff;\n --color-ansi-gray: #6e7681;\n --color-ansi-red: #ff7b72;\n --color-ansi-red-bright: #ffa198;\n --color-ansi-green: #3fb950;\n --color-ansi-green-bright: #56d364;\n --color-ansi-yellow: #d29922;\n --color-ansi-yellow-bright: #e3b341;\n --color-ansi-blue: #58a6ff;\n --color-ansi-blue-bright: #79c0ff;\n --color-ansi-magenta: #bc8cff;\n --color-ansi-magenta-bright: #d2a8ff;\n --color-ansi-cyan: #39c5cf;\n --color-ansi-cyan-bright: #56d4dd;\n --color-btn-text: @text;\n --color-btn-bg: @surface0;\n --color-btn-border: transparent;\n --color-btn-shadow: 0 0 transparent;\n --color-btn-inset-shadow: 0 0 transparent;\n --color-btn-hover-bg: @surface1;\n --color-btn-hover-border: transparent;\n --color-btn-active-bg: @surface2;\n --color-btn-active-border: transparent;\n --color-btn-selected-bg: @surface2;\n --color-btn-focus-bg: #21262d;\n --color-btn-focus-border: #8b949e;\n --color-btn-focus-shadow: 0 0 0 3px rgba(139, 148, 158, 0.3);\n --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1, 4, 9, 0.15);\n --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(31, 111, 235, 0.3);\n --color-btn-counter-bg: @surface2;\n #coloredButton(primary, @green);\n --color-btn-outline-text: #58a6ff;\n --color-btn-outline-hover-text: #58a6ff;\n --color-btn-outline-hover-bg: #30363d;\n --color-btn-outline-hover-border: rgba(240, 246, 252, 0.1);\n --color-btn-outline-hover-shadow: 0 1px 0 rgba(1, 4, 9, 0.1);\n --color-btn-outline-hover-inset-shadow: inset 0 1px 0\n rgba(255, 255, 255, 0.03);\n --color-btn-outline-hover-counter-bg: rgba(255, 255, 255, 0.2);\n --color-btn-outline-selected-text: #ffffff;\n --color-btn-outline-selected-bg: #0d419d;\n --color-btn-outline-selected-border: rgba(240, 246, 252, 0.1);\n --color-btn-outline-selected-shadow: 0 0 transparent;\n --color-btn-outline-disabled-text: @subtext0;\n --color-btn-outline-disabled-bg: @surface2;\n --color-btn-outline-disabled-counter-bg: rgba(31, 111, 235, 0.05);\n --color-btn-outline-focus-border: rgba(240, 246, 252, 0.1);\n --color-btn-outline-focus-shadow: 0 0 0 3px rgba(17, 88, 199, 0.4);\n --color-btn-outline-counter-bg: rgba(31, 111, 235, 0.1);\n #coloredButton(danger, @red);\n --color-underlinenav-icon: #6e7681;\n --color-underlinenav-border-hover: rgba(110, 118, 129, 0.4);\n --color-action-list-item-inline-divider: @surface2;\n --color-action-list-item-default-hover-bg: @surface0;\n --color-action-list-item-default-hover-border: rgba(0, 0, 0, 0);\n --color-action-list-item-default-active-bg: rgba(177, 186, 196, 0.2);\n --color-action-list-item-default-active-border: rgba(0, 0, 0, 0);\n --color-action-list-item-default-selected-bg: @surface1;\n --color-action-list-item-danger-hover-bg: rgba(248, 81, 73, 0.16);\n --color-action-list-item-danger-active-bg: rgba(248, 81, 73, 0.24);\n --color-action-list-item-danger-hover-text: #ff7b72;\n --color-switch-track-bg: #010409;\n --color-switch-track-border: #6e7681;\n --color-switch-track-checked-bg: rgba(31, 111, 235, 0.35);\n --color-switch-track-checked-hover-bg: rgba(31, 111, 235, 0.5);\n --color-switch-track-checked-active-bg: rgba(31, 111, 235, 0.65);\n --color-switch-track-checked-border: #58a6ff;\n --color-switch-knob-checked-bg: #1f6feb;\n --color-switch-knob-checked-disabled-bg: #484f58;\n --color-fg-default: @text;\n --color-fg-muted: @subtext1;\n --color-fg-subtle: @subtext1;\n --color-fg-on-emphasis: @base;\n --color-canvas-default: @base;\n --color-canvas-overlay: @mantle;\n --color-canvas-inset: @surface0;\n --color-canvas-subtle: @mantle;\n --color-border-default: @surface1;\n --color-border-muted: @surface0;\n --color-border-subtle: rgba(240, 246, 252, 0.1);\n --color-shadow-small: 0 0 transparent;\n --color-shadow-medium: 0 3px 6px @crust;\n --color-shadow-large: 0 8px 24px @crust;\n --color-shadow-extra-large: 0 12px 48px @crust;\n --color-neutral-emphasis-plus: @overlay0;\n --color-neutral-emphasis: @overlay2;\n --color-neutral-muted: rgba(110, 118, 129, 0.4);\n --color-neutral-subtle: rgba(110, 118, 129, 0.1);\n --color-accent-fg: @accent-color;\n --color-accent-emphasis: @accent-color;\n --color-accent-muted: fadeout(@accent-color, 60%);\n --color-accent-subtle: fadeout(@accent-color, 85%);\n --color-success-fg: @green;\n --color-success-emphasis: @green;\n --color-success-muted: rgba(46, 160, 67, 0.4);\n --color-success-subtle: rgba(46, 160, 67, 0.15);\n --color-attention-fg: @peach;\n --color-attention-emphasis: @peach;\n --color-attention-muted: rgba(187, 128, 9, 0.4);\n --color-attention-subtle: rgba(187, 128, 9, 0.15);\n --color-severe-fg: @maroon;\n --color-severe-emphasis: @maroon;\n --color-severe-muted: rgba(219, 109, 40, 0.4);\n --color-severe-subtle: rgba(219, 109, 40, 0.15);\n --color-danger-fg: @red;\n --color-danger-emphasis: @red;\n --color-danger-muted: rgba(248, 81, 73, 0.4);\n --color-danger-subtle: rgba(248, 81, 73, 0.15);\n --color-open-fg: @green;\n --color-open-emphasis: @green;\n --color-open-muted: rgba(46, 160, 67, 0.4);\n --color-open-subtle: rgba(46, 160, 67, 0.15);\n --color-closed-fg: @red;\n --color-closed-emphasis: @red;\n --color-closed-muted: rgba(248, 81, 73, 0.4);\n --color-closed-subtle: rgba(248, 81, 73, 0.15);\n --color-done-fg: @mauve;\n --color-done-emphasis: @mauve;\n --color-done-muted: rgba(163, 113, 247, 0.4);\n --color-done-subtle: rgba(163, 113, 247, 0.15);\n --color-sponsors-fg: @mauve;\n --color-sponsors-emphasis: @mauve;\n --color-sponsors-muted: rgba(219, 97, 162, 0.4);\n --color-sponsors-subtle: rgba(219, 97, 162, 0.15);\n --color-primer-fg-disabled: fadeout(@accent-color, 50%);\n --color-primer-canvas-backdrop: rgba(1, 4, 9, 0.8);\n --color-primer-canvas-sticky: rgba(13, 17, 23, 0.95);\n --color-primer-border-active: @red;\n --color-primer-border-contrast: rgba(255, 255, 255, 0.2);\n --color-primer-shadow-highlight: 0 0 transparent;\n --color-primer-shadow-inset: 0 0 transparent;\n --color-primer-shadow-focus: 0 0 0 3px #0c2d6b;\n --color-scale-black: #010409;\n --color-scale-white: #ffffff;\n --color-scale-gray-0: #f0f6fc;\n --color-scale-gray-1: #c9d1d9;\n --color-scale-gray-2: #b1bac4;\n --color-scale-gray-3: #8b949e;\n --color-scale-gray-4: #6e7681;\n --color-scale-gray-5: #484f58;\n --color-scale-gray-6: #30363d;\n --color-scale-gray-7: #21262d;\n --color-scale-gray-8: #161b22;\n --color-scale-gray-9: #0d1117;\n --color-scale-blue-0: #cae8ff;\n --color-scale-blue-1: #a5d6ff;\n --color-scale-blue-2: #79c0ff;\n --color-scale-blue-3: #58a6ff;\n --color-scale-blue-4: #388bfd;\n --color-scale-blue-5: #1f6feb;\n --color-scale-blue-6: #1158c7;\n --color-scale-blue-7: #0d419d;\n --color-scale-blue-8: #0c2d6b;\n --color-scale-blue-9: #051d4d;\n --color-scale-green-0: #aff5b4;\n --color-scale-green-1: #7ee787;\n --color-scale-green-2: #56d364;\n --color-scale-green-3: #3fb950;\n --color-scale-green-4: #2ea043;\n --color-scale-green-5: #238636;\n --color-scale-green-6: #196c2e;\n --color-scale-green-7: #0f5323;\n --color-scale-green-8: #033a16;\n --color-scale-green-9: #04260f;\n --color-scale-yellow-0: #f8e3a1;\n --color-scale-yellow-1: #f2cc60;\n --color-scale-yellow-2: #e3b341;\n --color-scale-yellow-3: #d29922;\n --color-scale-yellow-4: #bb8009;\n --color-scale-yellow-5: #9e6a03;\n --color-scale-yellow-6: #845306;\n --color-scale-yellow-7: #693e00;\n --color-scale-yellow-8: #4b2900;\n --color-scale-yellow-9: #341a00;\n --color-scale-orange-0: #ffdfb6;\n --color-scale-orange-1: #ffc680;\n --color-scale-orange-2: #ffa657;\n --color-scale-orange-3: #f0883e;\n --color-scale-orange-4: #db6d28;\n --color-scale-orange-5: #bd561d;\n --color-scale-orange-6: #9b4215;\n --color-scale-orange-7: #762d0a;\n --color-scale-orange-8: #5a1e02;\n --color-scale-orange-9: #3d1300;\n --color-scale-red-0: #ffdcd7;\n --color-scale-red-1: #ffc1ba;\n --color-scale-red-2: #ffa198;\n --color-scale-red-3: #ff7b72;\n --color-scale-red-4: #f85149;\n --color-scale-red-5: #da3633;\n --color-scale-red-6: #b62324;\n --color-scale-red-7: #8e1519;\n --color-scale-red-8: #67060c;\n --color-scale-red-9: #490202;\n --color-scale-purple-0: #eddeff;\n --color-scale-purple-1: #e2c5ff;\n --color-scale-purple-2: #d2a8ff;\n --color-scale-purple-3: #bc8cff;\n --color-scale-purple-4: #a371f7;\n --color-scale-purple-5: #8957e5;\n --color-scale-purple-6: #6e40c9;\n --color-scale-purple-7: #553098;\n --color-scale-purple-8: #3c1e70;\n --color-scale-purple-9: #271052;\n --color-scale-pink-0: #ffdaec;\n --color-scale-pink-1: #ffbedd;\n --color-scale-pink-2: #ff9bce;\n --color-scale-pink-3: #f778ba;\n --color-scale-pink-4: #db61a2;\n --color-scale-pink-5: #bf4b8a;\n --color-scale-pink-6: #9e3670;\n --color-scale-pink-7: #7d2457;\n --color-scale-pink-8: #5e103e;\n --color-scale-pink-9: #42062a;\n --color-scale-coral-0: #ffddd2;\n --color-scale-coral-1: #ffc2b2;\n --color-scale-coral-2: #ffa28b;\n --color-scale-coral-3: #f78166;\n --color-scale-coral-4: #ea6045;\n --color-scale-coral-5: #cf462d;\n --color-scale-coral-6: #ac3220;\n --color-scale-coral-7: #872012;\n --color-scale-coral-8: #640d04;\n --color-scale-coral-9: #460701;\n }\n --color-workflow-card-connector: @overlay0;\n --color-workflow-card-connector-bg: @overlay0;\n --color-workflow-card-connector-inactive: @surface1;\n --color-workflow-card-connector-inactive-bg: @surface1;\n --color-workflow-card-connector-highlight: @accent-color;\n --color-workflow-card-connector-highlight-bg: @accent-color;\n --color-workflow-card-bg: @surface1;\n --color-workflow-card-inactive-bg: @surface0;\n --color-workflow-card-header-shadow: #dc2286;\n --color-workflow-card-progress-complete-bg: fadeout(@blue, 85%);\n --color-workflow-card-progress-incomplete-bg: @surface1;\n --color-discussions-state-answered-icon: var(--color-scale-green-3);\n --color-bg-discussions-row-emoji-box: var(--color-scale-gray-6);\n --color-notifications-button-text: var(--color-scale-white);\n --color-notifications-button-hover-text: var(--color-scale-white);\n --color-notifications-button-hover-bg: var(--color-scale-blue-4);\n --color-notifications-row-read-bg: var(--color-canvas-default);\n --color-notifications-row-bg: var(--color-canvas-subtle);\n --color-icon-directory: @text;\n --color-checks-step-error-icon: var(--color-scale-red-4);\n --color-calendar-halloween-graph-day-L1-bg: #631c03;\n --color-calendar-halloween-graph-day-L2-bg: #bd561d;\n --color-calendar-halloween-graph-day-L3-bg: #fa7a18;\n --color-calendar-halloween-graph-day-L4-bg: #fddf68;\n --color-calendar-graph-day-bg: @surface0;\n --color-calendar-graph-day-border: transparent;\n /* These could do with a bit of refining */\n --color-calendar-graph-day-L1-bg: spin(fade(@green, 40%), 15deg);\n --color-calendar-graph-day-L2-bg: spin(fade(@green, 60%), 10deg);\n --color-calendar-graph-day-L3-bg: spin(fade(@green, 80%), 5deg);\n --color-calendar-graph-day-L4-bg: @green;\n --color-calendar-graph-day-L1-border: transparent;\n --color-calendar-graph-day-L2-border: transparent;\n --color-calendar-graph-day-L3-border: transparent;\n --color-calendar-graph-day-L4-border: transparent;\n --color-user-mention-fg: var(--color-scale-yellow-0);\n --color-user-mention-bg: var(--color-scale-yellow-8);\n --color-text-white: @text;\n\n /* Buttons */\n .btn-danger,\n .Button--danger {\n background: var(--color-btn-danger-bg);\n }\n\n /* Create PR button & New branch button */\n .iRoQzU,\n .ifkUYV,\n .bOZDzN {\n background-color: @green;\n color: @base;\n }\n\n /* New branch dialog */\n .jenxrv {\n background-color: @mantle;\n color: @text;\n }\n\n /* Branch drop down */\n .fHiIQb {\n background-color: @surface0;\n }\n\n /* Compare button & Cancel new branch button */\n .idPXPh,\n .epAEYw {\n background-color: @surface0;\n color: @text;\n border-color: @surface1;\n }\n\n /* search btn */\n .header-search-button.placeholder {\n color: @text;\n }\n\n /* Issue tags */\n .hx_IssueLabel {\n --text: @text;\n }\n\n .hx_IssueLabel not when (@lookup =latte) {\n --lightness-threshold: 0.453;\n --border-threshold: 0.96;\n --border-fadeout: max(\n 0,\n min(\n calc((var(--perceived-lightness) - var(--border-threshold)) * 100),\n 1\n )\n ); //color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%)) !important;\n color: var(--text) !important;\n background: rgb(\n var(--label-r),\n var(--label-g),\n var(--label-b)\n ) !important;\n border-color: hsla(\n var(--label-h),\n calc(var(--label-s) * 1%),\n calc((var(--label-l) - 25) * 1%),\n var(--border-fadeout)\n ) !important;\n }\n\n .hx_IssueLabel when (@lookup =latte) {\n --lightness-threshold: 0.6;\n --background-fadeout: 0.18;\n --border-fadeout: 0.3;\n --lighten-by: calc(\n ((var(--lightness-threshold) - var(--perceived-lightness)) * 100) *\n var(--lightness-switch)\n );\n color: hsl(\n var(--label-h),\n calc(var(--label-s) * 1%),\n calc((var(--label-l) + var(--lighten-by)) * 1%)\n ) !important;\n background: rgba(\n var(--label-r),\n var(--label-g),\n var(--label-b),\n var(--background-fadeout)\n ) !important;\n border-color: hsla(\n var(--label-h),\n calc(var(--label-s) * 1%),\n calc((var(--label-l) + var(--lighten-by)) * 1%),\n var(--border-fadeout)\n ) !important;\n }\n\n /* Labels */\n .Label {\n color: var(--color-accent-fg);\n background-color: @surface0;\n border-color: transparent;\n }\n\n .Label--secondary {\n background-color: @surface0;\n color: @text;\n }\n\n .Label--success {\n color: @base;\n background-color: @green;\n }\n\n .Label--danger {\n background-color: var(--color-danger-emphasis);\n color: var(--color-btn-danger-text);\n }\n\n .timeline-comment-header .Label,\n .timeline-comment .Label {\n color: var(--color-fg-muted);\n }\n\n /* Search */\n .header-search-input {\n color: @text !important;\n }\n\n .header-search-input::placeholder {\n color: @subtext1 !important;\n }\n\n /* Tags */\n .topic-tag {\n --color-accent-fg: @blue;\n --color-accent-emphasis: @blue;\n --color-accent-muted: fadeout(@blue, 60%);\n --color-accent-subtle: fadeout(@blue, 85%);\n }\n\n /* Misc */\n .col-md-8 {\n background-color: @base;\n }\n\n .user-mention,\n .team-mention {\n color: @accent-color;\n }\n\n .kSmUFR[data-size=\"small\"][data-no-visuals=\"true\"] svg {\n color: @green;\n }\n .starred .starred-button-icon {\n color: @yellow;\n }\n\n /* Large notification */\n .flash {\n background: @mantle;\n border-color: transparent;\n }\n\n /* Button Fix */\n .color-bg-subtle {\n background-color: transparent !important;\n }\n\n .command-palette-details-dialog .color-bg-subtle {\n background-color: @surface0 !important;\n }\n\n /* Button selection Fix */\n .navigation-item[aria-selected=\"true\"] .color-fg-muted {\n color: @base !important;\n }\n\n /* Darker bg for new AppHeader */\n .AppHeader {\n background: var(--color-header-bg);\n }\n\n /* Headers */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: @subtext1;\n }\n\n body,\n .markdown-body {\n & when (@usefont=1) {\n font-family: inter, sans-serif;\n }\n }\n\n #check-step-header-title {\n color: var(--color-checks-text-link) !important;\n }\n\n ::selection {\n background: @surface2 !important;\n }\n\n /* New change visibility box star and watcher preview buttons Fix */\n .btn.color-fg-danger.cursor-default {\n color: var(--color-btn-danger-text) !important;\n background-color: var(--color-btn-danger-bg);\n }\n\n .btn.color-fg-danger.cursor-default:hover {\n background-color: var(--color-btn-danger-hover-bg);\n }\n\n .btn.color-fg-danger.cursor-default > svg.octicon {\n color: var(--color-btn-danger-text) !important;\n }\n\n /* New change visibility box danger buttons Fix */\n :where(\n #repo-visibility-proceed-button-public,\n #repo-visibility-proceed-button-private\n ):not([data-next-stage]) {\n color: var(--color-btn-danger-text);\n background-color: var(--color-btn-danger-bg);\n }\n\n /* 2FA authentication box header Fix */\n body.session-authentication div.Box-header {\n background-color: inherit;\n }\n\n /* Footer Logo Fix */\n .footer-octicon > svg:nth-child(1) > path:nth-child(1) {\n fill: @text;\n }\n\n /* Footer text hover fix */\n .footer nav.col-12 * {\n color: @subtext1 !important;\n }\n\n /* Notifications */\n .notification-indicator .mail-status {\n background-image: none;\n background-color: @accent-color;\n }\n\n /* Keyboard hint */\n .bdgUpN,\n .hZMmEi .TextInput-icon,\n .hZMmEi .TextInput-action {\n color: @text;\n background-color: @mantle;\n border-color: @surface0;\n }\n\n /* Merge icon */\n .fMJQEf {\n color: @text;\n background-color: @overlay0;\n }\n\n /* Branch indicator */\n .iVNDSi {\n color: @accent-color;\n background-color: fade(@accent-color, 10);\n }\n\n /* File view */\n .hwnsNO {\n color: @text;\n th {\n background: @mantle;\n }\n }\n\n .dXveNa[data-no-visuals=\"true\"] {\n color: @subtext0;\n }\n\n .dXveNa,\n .kbjJSF {\n background-color: @surface0;\n border-color: @surface1;\n }\n\n .gUecKw,\n .lcpiaz,\n .jolsUx,\n .fsSggy {\n background-color: @mantle;\n }\n\n .Cxvmo,\n .dhYcqs {\n color: @red;\n }\n\n .byJIBD,\n .dMLfZp[data-size=\"small\"][data-no-visuals=\"true\"] svg {\n color: @green;\n }\n\n .lmmHGT:not(:first-of-type),\n .fOEJrA,\n .fnFdxN,\n .huABLg,\n .dMLfZp[data-component=\"IconButton\"][data-no-visuals],\n .cwSUxL,\n .iXnXki[data-size=\"small\"][data-no-visuals=\"true\"],\n .jvzHAP,\n .hPIyzG,\n .gTeenv[data-no-visuals=\"true\"],\n .VplrY[data-no-visuals=\"true\"],\n .bqDKPR[data-component=\"IconButton\"][data-no-visuals],\n .icOaJE[data-size=\"small\"][data-no-visuals=\"true\"],\n .kKFNhh,\n .lnXbGs,\n .dTxwit {\n color: @subtext0;\n }\n\n .gssqTz {\n color: @text !important;\n }\n\n .bPgnBp,\n .jMyfUO,\n .cBrzIN {\n color: @text;\n }\n\n .eLaeIt:hover:not([disabled]),\n .dMLfZp[data-size=\"small\"][data-no-visuals=\"true\"]:hover:not([disabled]),\n .bqDKPR[data-component=\"IconButton\"][data-no-visuals],\n .bDSYgZ:hover:not([disabled]),\n .icOaJE:hover:not([disabled]) {\n background-color: @surface0;\n }\n\n .icOaJE[aria-pressed=\"true\"] {\n background-color: @surface0;\n }\n\n .cZRqXf {\n background-color: @surface0;\n &:active:not([disabled]),\n &[aria-expanded=\"true\"] {\n border-color: @surface2;\n }\n &:hover:not([disabled]) {\n border-color: @surface2;\n background-color: @surface1;\n }\n }\n\n .kdEavw,\n .ddNLNa,\n .jepClM,\n .gTeenv,\n .VplrY {\n background-color: @surface0;\n &:hover:not([disabled]) {\n border-color: @surface2;\n background-color: @surface1;\n }\n }\n\n .juEfKr {\n border-color: @surface2;\n }\n\n .eUqMHM,\n .hSXtjz {\n background-color: @base;\n }\n\n .gtXnmh,\n .ukUXs,\n .giEfVQ,\n .cKvNNO,\n .evdFFE,\n .kTUxDY {\n background-color: @mantle;\n }\n\n .hLwWNO .PRIVATE_TreeView-item-container,\n .hYaoHV,\n .rLhXz,\n .gtXnmh,\n .lmmHGT,\n .dEmXPQ {\n color: @text;\n }\n\n .bJBoUI,\n .iJtJJh {\n color: @accent-color;\n }\n\n .lhyFLG {\n background-color: @mantle;\n border-top: 1px solid @surface1;\n border-right-color: @surface1;\n border-bottom-color: @surface1;\n border-left-color: @surface1;\n }\n\n .hUWqlv,\n .bJcMWH {\n color: @blue;\n }\n\n .gxGEao {\n border-bottom-color: @surface0;\n }\n\n .hLwWNO\n .PRIVATE_TreeView-item[aria-current=\"true\"]\n > .PRIVATE_TreeView-item-container {\n background-color: @surface0;\n &::after {\n background-color: @accent-color;\n }\n }\n\n .dfAUyE,\n .gKuCoB,\n .bFrOJy {\n .segmentedControl-content {\n background-color: @mantle;\n color: @text;\n }\n }\n\n .cuqBaK,\n .fCAAcl,\n .dAXkSP {\n color: @text;\n background-color: @base;\n &:hover .segmentedControl-content {\n background: @surface0;\n }\n }\n\n @media (hover: hover) and (pointer: fine) {\n .rLhXz:hover:not([aria-disabled]) {\n background-color: @surface0;\n }\n }\n\n /* Projects */\n .ksbilD,\n .cuaLcW,\n .joCMLT,\n .jClMHS,\n .jhjELj,\n .diDjDG,\n .gFuKCf,\n .dHdESs,\n .hpfKPO,\n .jdgyJn,\n .iInViE,\n .brqMal,\n .AbCTW {\n background-color: @mantle;\n }\n\n .jEgFtJ,\n .lixtXZ:hover,\n .eNIoFu,\n .idPXPh:hover,\n .fdORwV,\n .cjFogo,\n .gIOnJa {\n background-color: @surface0;\n }\n\n .jBCpbB {\n color: @text;\n background-color: @surface0;\n }\n\n .kzrUhn.selected {\n background-color: @base;\n border-color: @surface0;\n color: @text;\n }\n\n .esIQoN,\n .kbjJSF:disabled {\n color: @subtext1;\n }\n\n .eJTCnd,\n .eTthoV {\n border-color: @surface0;\n background-color: @base;\n color: @text;\n .fixINc,\n .eDZJqt {\n color: @subtext0;\n }\n .bniVFX,\n .jtlytA {\n color: @text;\n }\n }\n\n .ikTPpF {\n box-shadow: @base 0px 3px 6px;\n border-color: @surface0;\n }\n\n .cvveTk,\n .dwoION {\n background-color: @base;\n }\n\n .FKGWN {\n background-color: @base;\n border-color: @surface0;\n }\n\n .jEgFtJ::after {\n background-color: @accent-color;\n }\n\n .khCtfm:hover {\n background-color: @surface0;\n }\n\n .khCtfm,\n .khCtfm[data-component=\"leadingVisual\"],\n .Tnbrt[data-component=\"IconButton\"][data-no-visuals] {\n color: @subtext0;\n }\n\n .Tnbrt {\n &:active,\n &[aria-expanded=\"true\"] {\n background-color: @surface2;\n }\n &:hover {\n background-color: @surface1;\n }\n }\n\n .imsxCM {\n color: @text;\n\n .is-selected::after {\n background-color: @accent-color;\n }\n }\n\n .pxYjU {\n background-color: @mantle;\n color: @text;\n border-color: @surface0;\n }\n\n .ilLRrZ {\n color: @text;\n background-color: @surface1;\n }\n\n .cnIHxk {\n background-color: @surface0;\n color: @text;\n &:disabled {\n background-color: @overlay0;\n color: @crust;\n }\n }\n\n .ghFpol {\n background-color: @base;\n }\n\n .hVmCdl,\n .fqKZNC,\n .fZFWUy,\n .kbjJSF,\n .flKHtV,\n .jolsUx,\n .ekNmOn {\n color: @text;\n }\n\n .lixtXZ[data-component=\"IconButton\"][data-no-visuals],\n .klUZzf:not(:first-of-type) {\n color: @subtext0;\n }\n\n .jvpWzR {\n &:hover {\n background-color: @surface1;\n }\n &[data-size=\"large\"][data-block=\"block\"] {\n color: @subtext0;\n }\n }\n\n .fZFWUy,\n .fzjwje {\n background-color: @base;\n }\n\n .cEYXBH {\n background-color: @accent-color;\n }\n\n .joxhcl,\n .hXyJIp,\n .fMkBhb > .segmentedControl-content {\n background-color: @mantle;\n }\n\n .dVFmxu,\n .gbKtit,\n .lnKxja,\n .jzwNMs {\n color: @subtext0;\n svg {\n fill: @subtext0;\n }\n &:hover .segmentedControl-content {\n background-color: @surface1;\n border-color: @surface0;\n }\n }\n\n .hJMtSk {\n color: @crust;\n background-color: @green;\n &:disabled {\n color: @crust;\n background-color: @overlay0;\n }\n }\n\n .iDiUTR {\n color: @text;\n background-color: @base;\n border-color: @surface0;\n &:hover {\n border-color: @surface1;\n }\n }\n\n .eQfJKc,\n .UHWYv {\n color: @red;\n }\n\n .jVIqnb {\n color: @red;\n background-color: @surface0;\n &:hover {\n color: @base;\n background-color: @red;\n }\n }\n\n .UHWYv:hover {\n background-color: fade(@red, 20);\n }\n\n .lmmHGT:hover {\n background-color: @surface0;\n }\n\n /* Project table view */\n .hYdbWk,\n .gkeKEr,\n .jzcCeu,\n .iGxiw,\n .ixFSpw,\n .koxWOe,\n .gkWKRr,\n .ikaTJo > svg,\n .dcGHGc,\n .dzMFih,\n .hYdbWk::before,\n .ixFSpw::before,\n .dSHKOE {\n background-color: @base;\n }\n\n .gkWKRr {\n border-top-color: @surface0;\n border-right-color: @surface0;\n border-left-color: @surface0;\n }\n\n .hPQRKh {\n background-color: @surface0;\n &:hover:not([disabled]) {\n background-color: @surface1;\n }\n &[data-component=\"IconButton\"][data-no-visuals] {\n color: @subtext0;\n }\n }\n\n .kfwhFa {\n &:hover:not([disabled]) {\n background-color: @surface0;\n }\n &[data-size=\"small\"][data-no-visuals=\"true\"] {\n color: @subtext0;\n }\n }\n\n .jykkjb {\n background-color: @base;\n box-shadow:\n @crust 0px -2px 0px inset,\n @crust 0px 1px 0px inset;\n }\n\n .jhjELj,\n .ixTUPS {\n border-color: @surface1;\n }\n\n .gmscZx,\n .fUaEiu {\n &:hover:not([disabled]) {\n background-color: @surface1;\n }\n &[aria-expanded=\"true\"] {\n background-color: @surface0;\n }\n & [data-component=\"leadingVisual\"],\n &[data-size=\"small\"],\n &[data-size=\"small\"][data-no-visuals=\"true\"] {\n color: @subtext0;\n }\n }\n\n .cBssZb {\n color: @text;\n }\n\n .jhjELj::before {\n border-color: transparent transparent @surface1;\n }\n\n .fHpqaf,\n .bfQVnA,\n .iGxiw,\n .fUzagb,\n .gisjeK,\n .iQkwAM {\n color: @subtext0;\n }\n\n smt {\n background-color: @base;\n &:hover {\n background-color: @surface0;\n }\n }\n\n .dtTTcd {\n background-color: @base;\n &.hoverable:hover {\n background-color: @surface0;\n }\n }\n\n .pQcjM {\n border-color: @surface1;\n &.hoverable:hover {\n background-color: @surface0;\n }\n }\n\n .eTSXcP {\n background-color: @red;\n }\n\n .iGxiw {\n border-bottom-color: @surface1;\n }\n\n /* Tree Fix */\n\n /* Tree Fix */\n\n /* Weird barely visible outlines | Can be removed if intentional*/\n .brFBoI,\n .ldUAkr,\n .gtXnmh {\n border-color: @surface1;\n }\n\n /* New Repository Overview Fix */\n .gWjhfa,\n .jMdYTc {\n background-color: @mantle;\n }\n\n .jMdYTc {\n border: 1px solid @surface1;\n\n & button {\n color: @subtext1;\n\n &:hover {\n background-color: @surface0;\n }\n\n &[aria-expanded=\"true\"] {\n background-color: @surface0;\n }\n }\n }\n\n .gwuIGu > a {\n &:hover {\n background-color: @surface0;\n }\n\n & span {\n color: @subtext1;\n }\n }\n\n /* Buttons */\n .bJYdrf:hover {\n background-color: @mantle;\n }\n\n .dSlCya:hover {\n color: @accent-color;\n }\n\n .hNNRLM,\n .hGgJQu,\n .hTcsdJ {\n background-color: @surface0;\n border-color: @surface0;\n color: @text;\n\n &:hover {\n background-color: @surface1;\n border-color: @surface1;\n }\n }\n\n .eOIzRT {\n background-color: @base;\n\n &:hover {\n background-color: @surface0;\n }\n }\n\n .hNNRLM svg {\n color: @text;\n }\n\n .react-last-commit-history-group:hover {\n background-color: @base;\n color: @text;\n }\n\n .hfRvxg {\n color: @subtext1;\n\n &:hover {\n color: @text;\n }\n }\n\n /* Scrolling top menu */\n .lbYguI {\n border-radius: 6px;\n }\n\n .hPsWZB,\n .bOUZZs {\n background-color: @mantle;\n }\n\n .react-blob-header-edit-and-raw-actions > div > a,\n .react-blob-header-edit-and-raw-actions > div > span > a,\n .react-blob-header-edit-and-raw-actions > div > span > button {\n background-color: @base;\n color: @subtext0;\n\n &:hover {\n background-color: @surface1;\n }\n }\n\n .hMOAua {\n color: @subtext1;\n\n &:hover {\n background-color: @mantle;\n border: 1px solid @surface1;\n color: @text;\n }\n }\n\n /* Fullscreen Sidebar Fixes*/\n .hMCjFU,\n .jcKsih,\n .hpgNiv {\n background-color: @base;\n color: @text;\n border: 1px solid @surface1;\n\n &:hover {\n background-color: @surface0;\n }\n }\n\n /* Dropdown Menus */\n .jfOCiu,\n .gNXjVV,\n .iGzDhH,\n .Overlay {\n background-color: @mantle;\n border: 1px solid @surface1;\n border-radius: 6px;\n box-shadow: var(--shadow-floating-large, var(--color-shadow-large));\n }\n\n .jfOCiu li {\n color: @text;\n }\n\n .kRbyXo {\n color: @text;\n }\n\n .VgnWi {\n background-color: @base;\n border: 1px solid @surface1;\n\n &:focus-within {\n border-color: @accent-color;\n box-shadow: @accent-color 0px 0px 0px 1px inset;\n }\n }\n\n .bAKGFC {\n background-color: @surface1;\n }\n\n .bdMlHy {\n border-color: @surface1;\n }\n\n .jMyfUO.selected {\n border-color: @surface1;\n background-color: @mantle;\n }\n\n .bPgnBp {\n color: @accent-color;\n }\n\n kbd {\n background-color: @surface1;\n }\n\n select option,\n optgroup {\n background-color: @mantle;\n border: 1px solid @surface1;\n border-radius: 6px;\n box-shadow: var(--shadow-floating-large, var(--color-shadow-large));\n }\n\n .hUQSCH {\n background-color: @base;\n color: @subtext1;\n border-color: @surface1;\n\n &:hover {\n background-color: @mantle;\n border-color: @surface1;\n }\n }\n\n /* Add File Menu */\n .dQPLyc {\n background-color: transparent;\n border: 1px solid @surface1;\n }\n\n .ktGGEf {\n background-color: @base;\n border: 1px solid @surface1;\n }\n\n .gkfBtX {\n background-color: @mantle;\n border-radius: 6px 0px 0px 0px;\n border-bottom: 1px solid @surface1;\n }\n\n .jproXT {\n background-color: transparent;\n border-color: transparent;\n color: @subtext1;\n\n &:hover {\n color: @text;\n }\n\n &:focus-within {\n border-color: transparent;\n box-shadow: none;\n color: @text;\n }\n }\n\n .wLDmP {\n background-color: @mantle;\n border: 1px solid @surface1;\n }\n\n .eNSiNz .segmentedControl-content,\n .gKuCoB .segmentedControl-content {\n background-color: @base;\n }\n\n /* Notification Menu Fix */\n .notifications-list-item.notification-read,\n .notifications-list-item.notification-archived {\n background-color: @base !important;\n\n &:last-child {\n border-bottom-left-radius: 6px;\n }\n }\n\n /* Loading Bar Color */\n .turbo-progress-bar {\n background-color: @accent-color;\n }\n }\n}\n@-moz-document regexp(\"https:\\/\\/notebooks\\.githubusercontent\\.com\\/view\\/ipynb.*\") {\n :root {\n #catppuccin(@darkFlavor, @accentColor);\n }\n\n #catppuccin(@lookup, @accent) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n @accent-color: @catppuccin[@@lookup][@@accent];\n\n /* Colors */\n --color-scale-black: #010409;\n --color-scale-white: #ffffff;\n --color-scale-gray-0: #f0f6fc;\n --color-scale-gray-1: #c9d1d9;\n --color-scale-gray-2: #b1bac4;\n --color-scale-gray-3: #8b949e;\n --color-scale-gray-4: #6e7681;\n --color-scale-gray-5: #484f58;\n --color-scale-gray-6: #30363d;\n --color-scale-gray-7: #21262d;\n --color-scale-gray-8: #161b22;\n --color-scale-gray-9: #0d1117;\n --color-scale-blue-0: #cae8ff;\n --color-scale-blue-1: #a5d6ff;\n --color-scale-blue-2: #79c0ff;\n --color-scale-blue-3: #58a6ff;\n --color-scale-blue-4: #388bfd;\n --color-scale-blue-5: #1f6feb;\n --color-scale-blue-6: #1158c7;\n --color-scale-blue-7: #0d419d;\n --color-scale-blue-8: #0c2d6b;\n --color-scale-blue-9: #051d4d;\n --color-scale-green-0: #aff5b4;\n --color-scale-green-1: #7ee787;\n --color-scale-green-2: #56d364;\n --color-scale-green-3: #3fb950;\n --color-scale-green-4: #2ea043;\n --color-scale-green-5: #238636;\n --color-scale-green-6: #196c2e;\n --color-scale-green-7: #0f5323;\n --color-scale-green-8: #033a16;\n --color-scale-green-9: #04260f;\n --color-scale-yellow-0: #f8e3a1;\n --color-scale-yellow-1: #f2cc60;\n --color-scale-yellow-2: #e3b341;\n --color-scale-yellow-3: #d29922;\n --color-scale-yellow-4: #bb8009;\n --color-scale-yellow-5: #9e6a03;\n --color-scale-yellow-6: #845306;\n --color-scale-yellow-7: #693e00;\n --color-scale-yellow-8: #4b2900;\n --color-scale-yellow-9: #341a00;\n --color-scale-orange-0: #ffdfb6;\n --color-scale-orange-1: #ffc680;\n --color-scale-orange-2: #ffa657;\n --color-scale-orange-3: #f0883e;\n --color-scale-orange-4: #db6d28;\n --color-scale-orange-5: #bd561d;\n --color-scale-orange-6: #9b4215;\n --color-scale-orange-7: #762d0a;\n --color-scale-orange-8: #5a1e02;\n --color-scale-orange-9: #3d1300;\n --color-scale-red-0: #ffdcd7;\n --color-scale-red-1: #ffc1ba;\n --color-scale-red-2: #ffa198;\n --color-scale-red-3: #ff7b72;\n --color-scale-red-4: #f85149;\n --color-scale-red-5: #da3633;\n --color-scale-red-6: #b62324;\n --color-scale-red-7: #8e1519;\n --color-scale-red-8: #67060c;\n --color-scale-red-9: #490202;\n --color-scale-purple-0: #eddeff;\n --color-scale-purple-1: #e2c5ff;\n --color-scale-purple-2: #d2a8ff;\n --color-scale-purple-3: #bc8cff;\n --color-scale-purple-4: #a371f7;\n --color-scale-purple-5: #8957e5;\n --color-scale-purple-6: #6e40c9;\n --color-scale-purple-7: #553098;\n --color-scale-purple-8: #3c1e70;\n --color-scale-purple-9: #271052;\n --color-scale-pink-0: #ffdaec;\n --color-scale-pink-1: #ffbedd;\n --color-scale-pink-2: #ff9bce;\n --color-scale-pink-3: #f778ba;\n --color-scale-pink-4: #db61a2;\n --color-scale-pink-5: #bf4b8a;\n --color-scale-pink-6: #9e3670;\n --color-scale-pink-7: #7d2457;\n --color-scale-pink-8: #5e103e;\n --color-scale-pink-9: #42062a;\n --color-scale-coral-0: #ffddd2;\n --color-scale-coral-1: #ffc2b2;\n --color-scale-coral-2: #ffa28b;\n --color-scale-coral-3: #f78166;\n --color-scale-coral-4: #ea6045;\n --color-scale-coral-5: #cf462d;\n --color-scale-coral-6: #ac3220;\n --color-scale-coral-7: #872012;\n --color-scale-coral-8: #640d04;\n --color-scale-coral-9: #460701;\n\n --jp-border-color0: var(--color-scale-gray-7);\n --jp-border-color1: var(--color-scale-gray-7);\n --jp-border-color2: var(--color-scale-gray-8);\n --jp-border-color3: var(--color-scale-gray-9);\n --jp-ui-font-color0: @text;\n --jp-ui-font-color1: fadeout(@text, 13%);\n --jp-ui-font-color2: fadeout(@text, 46%);\n --jp-ui-font-color3: fadeout(@text, 72%);\n --jp-ui-inverse-font-color0: @crust;\n --jp-ui-inverse-font-color1: fadeout(@crust, 20%);\n --jp-ui-inverse-font-color2: fadeout(@crust, 50%);\n --jp-ui-inverse-font-color3: fadeout(@crust, 70%);\n --jp-content-font-color0: @text;\n --jp-content-font-color1: @text;\n --jp-content-font-color2: fadeout(@text, 30%);\n --jp-content-font-color3: fadeout(@text, 50%);\n --jp-content-link-color: @sapphire;\n --jp-layout-color0: @base !important;\n --jp-layout-color1: var(--color-scale-gray-9);\n --jp-layout-color2: var(--color-scale-gray-8);\n --jp-layout-color3: var(--color-scale-gray-7);\n --jp-layout-color4: var(--color-scale-gray-6);\n --jp-inverse-layout-color0: var(--color-scale-white);\n --jp-inverse-layout-color1: var(--color-scale-white);\n --jp-inverse-layout-color2: var(--color-scale-gray-2);\n --jp-inverse-layout-color3: var(--color-scale-gray-4);\n --jp-inverse-layout-color4: var(--color-scale-gray-6);\n --jp-brand-color0: var(--color-scale-blue-7);\n --jp-brand-color1: var(--color-scale-blue-5);\n --jp-brand-color2: var(--color-scale-blue-3);\n --jp-brand-color3: var(--color-scale-blue-1);\n --jp-brand-color4: var(--color-scale-blue-0);\n --jp-accent-color0: var(--color-scale-green-7);\n --jp-accent-color1: var(--color-scale-green-5);\n --jp-accent-color2: var(--color-scale-green-3);\n --jp-accent-color3: var(--color-scale-green-1);\n --jp-warn-color0: var(--color-scale-orange-7);\n --jp-warn-color1: var(--color-scale-orange-5);\n --jp-warn-color2: var(--color-scale-orange-3);\n --jp-warn-color3: var(--color-scale-orange-1);\n --jp-error-color0: var(--color-scale-red-7);\n --jp-error-color1: var(--color-scale-red-5);\n --jp-error-color2: var(--color-scale-red-3);\n --jp-error-color3: var(--color-scale-red-1);\n --jp-success-color0: var(--color-scale-green-7);\n --jp-success-color1: var(--color-scale-green-5);\n --jp-success-color2: var(--color-scale-green-3);\n --jp-success-color3: var(--color-scale-green-1);\n --jp-info-color0: var(--color-scale-blue-7);\n --jp-info-color1: var(--color-scale-blue-5);\n --jp-info-color2: var(--color-scale-blue-3);\n --jp-info-color3: var(--color-scale-blue-1);\n --jp-cell-editor-border-color: var(--color-scale-gray-7);\n --jp-cell-editor-box-shadow: inset 0 0 2px var(--color-scale-blue-3);\n --jp-cell-prompt-not-active-font-color: fadeout(@text, 50%);\n --jp-cell-inprompt-font-color: var(--color-scale-blue-6);\n --jp-cell-outprompt-font-color: var(--color-scale-coral-6);\n --jp-notebook-multiselected-color: fadeout(@overlay2, 86%);\n --jp-rendermime-error-background: fadeout(@red, 82%);\n --jp-rendermime-table-row-background: var(--color-scale-gray-9);\n --jp-rendermime-table-row-hover-background: fadeout(@surface2, 86%);\n --jp-dialog-background: fadeout(@crust, 40%);\n --jp-toolbar-box-shadow: 0px 0px 2px 0px fadeout(@crust, 20%);\n --jp-input-box-shadow: inset 0 0 2px var(--color-scale-blue-3);\n --jp-input-background: var(--color-scale-gray-8);\n --jp-input-active-box-shadow-color: fadeout(@blue, 70%);\n --jp-editor-selected-focused-background: fadeout(@blue, 86%);\n --jp-mirror-editor-keyword-color: var(--color-scale-green-5);\n --jp-mirror-editor-atom-color: var(--color-scale-blue-3);\n --jp-mirror-editor-number-color: var(--color-scale-green-4);\n --jp-mirror-editor-def-color: var(--color-scale-blue-6);\n --jp-mirror-editor-variable-color: var(--color-scale-gray-3);\n --jp-mirror-editor-variable-2-color: var(--color-scale-blue-4);\n --jp-mirror-editor-variable-3-color: var(--color-scale-green-6);\n --jp-mirror-editor-punctuation-color: var(--color-scale-blue-4);\n --jp-mirror-editor-property-color: var(--color-scale-blue-4);\n --jp-mirror-editor-operator-color: @mauve;\n --jp-mirror-editor-comment-color: @subtext0;\n --jp-mirror-editor-string-color: @peach;\n --jp-mirror-editor-string-2-color: var(--color-scale-purple-3);\n --jp-mirror-editor-meta-color: @mauve;\n --jp-mirror-editor-qualifier-color: var(--color-scale-gray-5);\n --jp-mirror-editor-builtin-color: var(--color-scale-green-6);\n --jp-mirror-editor-bracket-color: var(--color-scale-gray-2);\n --jp-mirror-editor-tag-color: var(--color-scale-blue-7);\n --jp-mirror-editor-attribute-color: var(--color-scale-blue-7);\n --jp-mirror-editor-header-color: var(--color-scale-blue-5);\n --jp-mirror-editor-quote-color: var(--color-scale-green-3);\n --jp-mirror-editor-link-color: var(--color-scale-blue-7);\n --jp-mirror-editor-error-color: @red;\n --jp-mirror-editor-hr-color: var(--color-scale-gray-8);\n --jp-vega-background: var(--color-scale-gray-4);\n --jp-search-selected-match-background-color: @yellow;\n --jp-search-selected-match-color: @crust;\n --jp-icon-contrast-color0: var(--color-scale-purple-6);\n --jp-icon-contrast-color1: var(--color-scale-green-6);\n --jp-icon-contrast-color2: var(--color-scale-pink-6);\n --jp-icon-contrast-color3: var(--color-scale-blue-6);\n }\n}", "usercssData": { "name": "Github Catppuccin", "namespace": "github.com/catppuccin/userstyles/styles/github", "homepageURL": "https://github.com/catppuccin/userstyles/tree/main/styles/github", "version": "1.2.7", "description": "Soothing pastel theme for GitHub", "author": "Catppuccin", "updateURL": "https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css", "license": "MIT", "preprocessor": "less", "vars": { "lightFlavor": { "type": "select", "label": "Light Flavor", "name": "lightFlavor", "value": null, "default": "latte", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappé", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "darkFlavor": { "type": "select", "label": "Dark Flavor", "name": "darkFlavor", "value": null, "default": "mocha", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappé", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "accentColor": { "type": "select", "label": "Accent", "name": "accentColor", "value": null, "default": "rosewater", "options": [ { "name": "rosewater", "label": "Rosewater", "value": "rosewater" }, { "name": "flamingo", "label": "Flamingo", "value": "flamingo" }, { "name": "pink", "label": "Pink", "value": "pink" }, { "name": "mauve", "label": "Mauve", "value": "mauve" }, { "name": "red", "label": "Red", "value": "red" }, { "name": "maroon", "label": "Maroon", "value": "maroon" }, { "name": "peach", "label": "Peach", "value": "peach" }, { "name": "yellow", "label": "Yellow", "value": "yellow" }, { "name": "green", "label": "Green", "value": "green" }, { "name": "teal", "label": "Teal", "value": "teal" }, { "name": "blue", "label": "Blue", "value": "blue" }, { "name": "sapphire", "label": "Sapphire", "value": "sapphire" }, { "name": "sky", "label": "Sky", "value": "sky" }, { "name": "lavender", "label": "Lavender", "value": "lavender" }, { "name": "subtext0", "label": "Gray", "value": "subtext0" } ] }, "topbar": { "type": "checkbox", "label": "Topbar colors", "name": "topbar", "value": null, "default": "1", "options": null }, "usefont": { "type": "checkbox", "label": "Use Inter font", "name": "usefont", "value": null, "default": "0", "options": null } } }, "author": "Catppuccin", "description": "Soothing pastel theme for GitHub", "name": "Github Catppuccin", "updateDate": 1698243112279, "_id": "942b2272-4772-41b7-b97c-848a6b3b1d85", "_rev": 1698243112279, "id": 5 }, { "enabled": true, "updateUrl": "https://github.com/catppuccin/userstyles/raw/main/styles/proton/catppuccin.user.css", "url": "https://github.com/catppuccin/userstyles/tree/main/styles/proton", "installDate": 1698243214442, "sections": [ { "code": "" } ], "sourceCode": "/* ==UserStyle==\n@name Proton Catppuccin\n@namespace github.com/catppuccin/userstyles/styles/proton\n@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/proton\n@version 0.1.4\n@description Soothing pastel theme for Proton services\n@author Catppuccin\n@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/proton/catppuccin.user.css\n@license MIT\n\n@preprocessor less\n@var select flavor \"Flavor\" [\"latte:Latte\", \"frappe:Frappe\", \"macchiato:Macchiato\", \"mocha:Mocha*\"]\n@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\"]\n==/UserStyle== */\n@-moz-document regexp(\"https://(account|mail|drive|calendar).proton.me/.*$\")\n{\n :root {\n #catppuccin(@flavor, @accentColor);\n }\n\n @catppuccin: {\n @latte: {\n @rosewater: #dc8a78;\n @flamingo: #dd7878;\n @pink: #ea76cb;\n @mauve: #8839ef;\n @red: #d20f39;\n @maroon: #e64553;\n @peach: #fe640b;\n @yellow: #df8e1d;\n @green: #40a02b;\n @teal: #179299;\n @sky: #04a5e5;\n @sapphire: #209fb5;\n @blue: #1e66f5;\n @lavender: #7287fd;\n @text: #4c4f69;\n @subtext1: #5c5f77;\n @subtext0: #6c6f85;\n @overlay2: #7c7f93;\n @overlay1: #8c8fa1;\n @overlay0: #9ca0b0;\n @surface2: #acb0be;\n @surface1: #bcc0cc;\n @surface0: #ccd0da;\n @base: #eff1f5;\n @mantle: #e6e9ef;\n @crust: #dce0e8;\n };\n @frappe: {\n @rosewater: #f2d5cf;\n @flamingo: #eebebe;\n @pink: #f4b8e4;\n @mauve: #ca9ee6;\n @red: #e78284;\n @maroon: #ea999c;\n @peach: #ef9f76;\n @yellow: #e5c890;\n @green: #a6d189;\n @teal: #81c8be;\n @sky: #99d1db;\n @sapphire: #85c1dc;\n @blue: #8caaee;\n @lavender: #babbf1;\n @text: #c6d0f5;\n @subtext1: #b5bfe2;\n @subtext0: #a5adce;\n @overlay2: #949cbb;\n @overlay1: #838ba7;\n @overlay0: #737994;\n @surface2: #626880;\n @surface1: #51576d;\n @surface0: #414559;\n @base: #303446;\n @mantle: #292c3c;\n @crust: #232634;\n };\n @macchiato: {\n @rosewater: #f4dbd6;\n @flamingo: #f0c6c6;\n @pink: #f5bde6;\n @mauve: #c6a0f6;\n @red: #ed8796;\n @maroon: #ee99a0;\n @peach: #f5a97f;\n @yellow: #eed49f;\n @green: #a6da95;\n @teal: #8bd5ca;\n @sky: #91d7e3;\n @sapphire: #7dc4e4;\n @blue: #8aadf4;\n @lavender: #b7bdf8;\n @text: #cad3f5;\n @subtext1: #b8c0e0;\n @subtext0: #a5adcb;\n @overlay2: #939ab7;\n @overlay1: #8087a2;\n @overlay0: #6e738d;\n @surface2: #5b6078;\n @surface1: #494d64;\n @surface0: #363a4f;\n @base: #24273a;\n @mantle: #1e2030;\n @crust: #181926;\n };\n @mocha: {\n @rosewater: #f5e0dc;\n @flamingo: #f2cdcd;\n @pink: #f5c2e7;\n @mauve: #cba6f7;\n @red: #f38ba8;\n @maroon: #eba0ac;\n @peach: #fab387;\n @yellow: #f9e2af;\n @green: #a6e3a1;\n @teal: #94e2d5;\n @sky: #89dceb;\n @sapphire: #74c7ec;\n @blue: #89b4fa;\n @lavender: #b4befe;\n @text: #cdd6f4;\n @subtext1: #bac2de;\n @subtext0: #a6adc8;\n @overlay2: #9399b2;\n @overlay1: #7f849c;\n @overlay0: #6c7086;\n @surface2: #585b70;\n @surface1: #45475a;\n @surface0: #313244;\n @base: #1e1e2e;\n @mantle: #181825;\n @crust: #11111b;\n };\n };\n\n #catppuccin(@lookup, @accent) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n @accent-Color: @catppuccin[@@lookup][@@accent];\n\n svg.logo {\n @accentH: hue(@accent-Color);\n @protonH: hue(#6d4aff);\n\n .replaceColor(@org, @property) {\n &[@{property}=\"@{org}\"] {\n @hDiff: @protonH - hue(@org);\n @{property}: hsl(\n @accentH - @hDiff,\n saturation(@org) - 30%,\n lightness(@org)\n );\n }\n }\n\n /* prettier-ignore */\n > path {\n .replaceColor(#B8D7FF, fill);\n .replaceColor(#8F69FF, fill);\n }\n\n /* prettier-ignore */\n > defs stop {\n .replaceColor(#E3D9FF, stop-color);\n .replaceColor(#7341FF, stop-color);\n .replaceColor(#6D4AFF, stop-color);\n .replaceColor(#AA8EFF, stop-color);\n .replaceColor(#06B8FF, stop-color);\n .replaceColor(#BFE8FF, stop-color);\n .replaceColor(#BFABFF, stop-color);\n .replaceColor(#FF50C3, stop-color);\n .replaceColor(#B487FF, stop-color);\n .replaceColor(#FFC8FF, stop-color);\n .replaceColor(#8EFFEE, stop-color);\n .replaceColor(#C9C7FF, stop-color);\n .replaceColor(#00F0C3, stop-color);\n .replaceColor(#FFD580, stop-color);\n .replaceColor(#F6C592, stop-color);\n .replaceColor(#EBB6A2, stop-color);\n .replaceColor(#DFA5AF, stop-color);\n .replaceColor(#D397BE, stop-color);\n .replaceColor(#C486CB, stop-color);\n .replaceColor(#B578D9, stop-color);\n .replaceColor(#A166E5, stop-color);\n .replaceColor(#8B57F2, stop-color);\n .replaceColor(#704CFF, stop-color);\n .replaceColor(#B39FFB, stop-color);\n .replaceColor(#FFE8DB, stop-color);\n }\n }\n\n &,\n .ui-prominent,\n .ui-standard {\n .lightenOrDarken(@color, @value) {\n @result: if(\n @flavor=latte,\n lighten(@color, @value),\n darken(@color, @value)\n );\n }\n\n --primary: @accent-Color;\n --primary-contrast: @mantle;\n --signal-danger-minor-2: .lightenOrDarken(@maroon, 40%) [ @result];\n --signal-danger-minor-1: .lightenOrDarken(@maroon, 30%) [ @result];\n --signal-danger: @maroon;\n --signal-danger-major-1: saturate(@maroon, 40%);\n --signal-danger-major-2: saturate(@maroon, 30%);\n --signal-danger-major-3: saturate(@maroon, 20%);\n --signal-danger-contrast: @mantle;\n --signal-warning-minor-2: .lightenOrDarken(@peach, 40%) [ @result];\n --signal-warning-minor-1: .lightenOrDarken(@peach, 30%) [ @result];\n --signal-warning: @peach;\n --signal-warning-major-1: saturate(@peach, 40%);\n --signal-warning-major-2: saturate(@peach, 30%);\n --signal-warning-major-3: saturate(@peach, 20%);\n --signal-warning-contrast: @mantle;\n --signal-success-minor-2: .lightenOrDarken(@green, 40%) [ @result];\n --signal-success-minor-1: .lightenOrDarken(@green, 30%) [ @result];\n --signal-success: @green;\n --signal-success-major-1: saturate(@green, 40%);\n --signal-success-major-2: saturate(@green, 30%);\n --signal-success-major-3: saturate(@green, 20%);\n --signal-success-contrast: @mantle;\n --signal-info-minor-2: .lightenOrDarken(@blue, 40%) [ @result];\n --signal-info-minor-1: .lightenOrDarken(@blue, 30%) [ @result];\n --signal-info: @blue;\n --signal-info-major-1: saturate(@blue, 40%);\n --signal-info-major-2: saturate(@blue, 30%);\n --signal-info-major-3: saturate(@blue, 20%);\n --signal-info-contrast: @mantle;\n --interaction-norm-minor-2: .lightenOrDarken(@accent-Color, 40%) [\n @result];\n --interaction-norm-minor-1: .lightenOrDarken(@accent-Color, 30%) [\n @result];\n --interaction-norm: @accent-Color;\n --interaction-norm-major-1: saturate(@accent-Color, 30%);\n --interaction-norm-major-2: saturate(@accent-Color, 20%);\n --interaction-norm-major-3: saturate(@accent-Color, 10%);\n --interaction-norm-contrast: @mantle;\n --interaction-weak-minor-2: darken(@surface0, 50%);\n --interaction-weak-minor-1: darken(@surface0, 30%);\n --interaction-weak: @surface0;\n --interaction-weak-major-1: lighten(@surface0, 10%);\n --interaction-weak-major-2: lighten(@surface0, 20%);\n --interaction-weak-major-3: lighten(@surface0, 30%);\n --interaction-weak-contrast: @text;\n --text-norm: @text;\n --text-weak: @subtext0;\n --text-hint: @subtext1;\n --text-disabled: @overlay1;\n --text-invert: @crust;\n --field-norm: @overlay2;\n --field-hover: @overlay1;\n --field-disabled: @overlay0;\n --field-focus: @accent-Color;\n --field-highlight: fadeout(@accent-Color, 30%);\n --focus-outline: @accent-Color;\n --focus-ring: fadeout(@accent-Color, 60%);\n --border-norm: @overlay0;\n --border-weak: @overlay1;\n --background-norm: @base;\n --background-weak: @mantle;\n --background-strong: @crust;\n --background-invert: @text;\n --interaction-default: transparent;\n --interaction-default-hover: fadeout(@overlay1, 80%);\n --interaction-default-active: fadeout(@overlay1, 60%);\n --shadow-norm-opacity: 0.5;\n --shadow-lifted-opacity: 0.75;\n --backdrop-norm: fadeout(@crust, 50%);\n --optional-scrollbar-thumb-color: @surface0;\n --optional-scrollbar-thumb-hover-color: @surface2;\n --optional-link-norm: var(--interaction-norm-major-1);\n --optional-link-hover: var(--interaction-norm-major-2);\n --optional-link-active: var(--interaction-norm-major-3);\n --optional-background-elevated: @surface0;\n --optional-background-lowered: var(--background-norm);\n --optional-email-item-unread-background-color: var(--background-weak);\n --optional-email-item-read-background-color: var(--background-norm);\n --optional-email-item-read-text-color: var(--text-weak);\n --optional-mini-calendar-today-color: @text;\n --optional-logo-text-proton-color: @text;\n --optional-logo-text-product-color: @text;\n --favorite-icon-color: @peach;\n }\n\n .ui-prominent {\n --background-norm: @mantle;\n --background-weak: @base;\n --background-strong: @crust;\n }\n\n .button-promotion {\n --upgrade-color-stop-1: @red;\n --upgrade-color-stop-2: @blue;\n }\n\n .item-container-row:not(.item-is-selected):hover,\n .item-container:not(.item-is-selected):hover {\n box-shadow: none;\n background-color: var(--navigation-current-item-background-color);\n color: var(--email-item-unread-text-color);\n }\n }\n}", "usercssData": { "name": "Proton Catppuccin", "namespace": "github.com/catppuccin/userstyles/styles/proton", "homepageURL": "https://github.com/catppuccin/userstyles/tree/main/styles/proton", "version": "0.1.4", "description": "Soothing pastel theme for Proton services", "author": "Catppuccin", "updateURL": "https://github.com/catppuccin/userstyles/raw/main/styles/proton/catppuccin.user.css", "license": "MIT", "preprocessor": "less", "vars": { "flavor": { "type": "select", "label": "Flavor", "name": "flavor", "value": null, "default": "mocha", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappe", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "accentColor": { "type": "select", "label": "Accent", "name": "accentColor", "value": null, "default": "red", "options": [ { "name": "rosewater", "label": "Rosewater", "value": "rosewater" }, { "name": "flamingo", "label": "Flamingo", "value": "flamingo" }, { "name": "pink", "label": "Pink", "value": "pink" }, { "name": "mauve", "label": "Mauve", "value": "mauve" }, { "name": "red", "label": "Red", "value": "red" }, { "name": "maroon", "label": "Maroon", "value": "maroon" }, { "name": "peach", "label": "Peach", "value": "peach" }, { "name": "yellow", "label": "Yellow", "value": "yellow" }, { "name": "green", "label": "Green", "value": "green" }, { "name": "teal", "label": "Teal", "value": "teal" }, { "name": "blue", "label": "Blue", "value": "blue" }, { "name": "sapphire", "label": "Sapphire", "value": "sapphire" }, { "name": "sky", "label": "Sky", "value": "sky" }, { "name": "lavender", "label": "Lavender", "value": "lavender" }, { "name": "subtext0", "label": "Gray", "value": "subtext0" } ] } } }, "author": "Catppuccin", "description": "Soothing pastel theme for Proton services", "name": "Proton Catppuccin", "updateDate": 1698243214442, "_id": "25aa2163-58b2-45e3-92f2-43e0627cd34c", "_rev": 1698243214442, "id": 6 }, { "enabled": true, "updateUrl": "https://github.com/catppuccin/userstyles/raw/main/styles/stylus/catppuccin.user.css", "url": "https://github.com/catppuccin/userstyles/tree/main/styles/stylus", "installDate": 1698243263899, "sections": [ { "code": "" } ], "sourceCode": "/* ==UserStyle==\n@name Stylus Catppuccin\n@namespace github.com/catppuccin/userstyles/styles/stylus\n@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stylus\n@version 1.0.9\n@updateURL \t https://github.com/catppuccin/userstyles/raw/main/styles/stylus/catppuccin.user.css\n@description Soothing pastel theme for Stylus\n@author Catppuccin\n@license MIT\n\n@preprocessor less\n@var select lightFlavor \"Light Flavor\" [\"latte:Latte*\", \"frappe:Frappe\", \"macchiato:Macchiato\", \"mocha:Mocha\"]\n@var select darkFlavor \"Dark Flavor\" [\"latte:Latte\", \"frappe:Frappe\", \"macchiato:Macchiato\", \"mocha:Mocha*\"]\n@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\"]\n==/UserStyle== */\n\n@-moz-document url-prefix(\"moz-extension://\"), url-prefix(chrome-extension://)\n{\n @catppuccin: {\n @latte: {\n @rosewater: #dc8a78;\n @flamingo: #dd7878;\n @pink: #ea76cb;\n @mauve: #8839ef;\n @red: #d20f39;\n @maroon: #e64553;\n @peach: #fe640b;\n @yellow: #df8e1d;\n @green: #40a02b;\n @teal: #179299;\n @sky: #04a5e5;\n @sapphire: #209fb5;\n @blue: #1e66f5;\n @lavender: #7287fd;\n @text: #4c4f69;\n @subtext1: #5c5f77;\n @subtext0: #6c6f85;\n @overlay2: #7c7f93;\n @overlay1: #8c8fa1;\n @overlay0: #9ca0b0;\n @surface2: #acb0be;\n @surface1: #bcc0cc;\n @surface0: #ccd0da;\n @base: #eff1f5;\n @mantle: #e6e9ef;\n @crust: #dce0e8;\n };\n @frappe: {\n @rosewater: #f2d5cf;\n @flamingo: #eebebe;\n @pink: #f4b8e4;\n @mauve: #ca9ee6;\n @red: #e78284;\n @maroon: #ea999c;\n @peach: #ef9f76;\n @yellow: #e5c890;\n @green: #a6d189;\n @teal: #81c8be;\n @sky: #99d1db;\n @sapphire: #85c1dc;\n @blue: #8caaee;\n @lavender: #babbf1;\n @text: #c6d0f5;\n @subtext1: #b5bfe2;\n @subtext0: #a5adce;\n @overlay2: #949cbb;\n @overlay1: #838ba7;\n @overlay0: #737994;\n @surface2: #626880;\n @surface1: #51576d;\n @surface0: #414559;\n @base: #303446;\n @mantle: #292c3c;\n @crust: #232634;\n };\n @macchiato: {\n @rosewater: #f4dbd6;\n @flamingo: #f0c6c6;\n @pink: #f5bde6;\n @mauve: #c6a0f6;\n @red: #ed8796;\n @maroon: #ee99a0;\n @peach: #f5a97f;\n @yellow: #eed49f;\n @green: #a6da95;\n @teal: #8bd5ca;\n @sky: #91d7e3;\n @sapphire: #7dc4e4;\n @blue: #8aadf4;\n @lavender: #b7bdf8;\n @text: #cad3f5;\n @subtext1: #b8c0e0;\n @subtext0: #a5adcb;\n @overlay2: #939ab7;\n @overlay1: #8087a2;\n @overlay0: #6e738d;\n @surface2: #5b6078;\n @surface1: #494d64;\n @surface0: #363a4f;\n @base: #24273a;\n @mantle: #1e2030;\n @crust: #181926;\n };\n @mocha: {\n @rosewater: #f5e0dc;\n @flamingo: #f2cdcd;\n @pink: #f5c2e7;\n @mauve: #cba6f7;\n @red: #f38ba8;\n @maroon: #eba0ac;\n @peach: #fab387;\n @yellow: #f9e2af;\n @green: #a6e3a1;\n @teal: #94e2d5;\n @sky: #89dceb;\n @sapphire: #74c7ec;\n @blue: #89b4fa;\n @lavender: #b4befe;\n @text: #cdd6f4;\n @subtext1: #bac2de;\n @subtext0: #a6adc8;\n @overlay2: #9399b2;\n @overlay1: #7f849c;\n @overlay0: #6c7086;\n @surface2: #585b70;\n @surface1: #45475a;\n @surface0: #313244;\n @base: #1e1e2e;\n @mantle: #181825;\n @crust: #11111b;\n };\n };\n\n #catppuccin(@lookup, @accent) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n @color: @catppuccin[@@lookup][@@accent];\n\n &:root {\n --bg: @base;\n --fg: @text;\n --c30: @subtext1;\n --c40: @overlay0;\n --c45: @surface2;\n --c50: @subtext0;\n --c60: @subtext0;\n --c65: @surface2;\n --c75: @overlay1;\n --c80: @surface1;\n --c85: @surface0;\n --c95: @mantle;\n --accent-1: @color;\n --accent-2: @color;\n --accent-3: @color;\n }\n\n .active #filters-stats {\n background-color: @color;\n border-color: @color;\n color: @base;\n }\n #header-resizer {\n color: @surface1;\n }\n #filters label:hover,\n #filters .filter-selection:hover {\n background-color: @surface0;\n }\n .oldUI .disabled h2::after,\n .entry.usercss .style-name-link::after {\n background-color: fade(@color, 25%);\n }\n .CodeMirror-linenumber {\n color: @subtext0;\n }\n .cm-s-default .cm-string {\n color: @peach;\n }\n .cm-s-default .cm-qualifier {\n color: @peach;\n }\n .cm-s-default .cm-variable-2 {\n color: @sapphire;\n }\n .cm-s-default .cm-keyword {\n color: @mauve;\n }\n .cm-s-default .cm-atom,\n .cm-s-default .cm-number {\n color: @green;\n }\n .cm-s-default .cm-def {\n color: @sapphire;\n }\n .cm-s-default .cm-tag {\n color: @sapphire;\n }\n .cm-s-default .cm-builtin {\n color: @subtext1;\n }\n .cm-s-default .cm-variable-3 {\n color: @subtext1;\n }\n .cm-s-default .cm-comment {\n color: @subtext0;\n }\n .cm-s-default .cm-operator {\n color: @yellow;\n }\n div.CodeMirror span.CodeMirror-matchingbracket {\n color: @green;\n }\n button:disabled,\n select:disabled,\n option:disabled,\n select[disabled] > option {\n color: @subtext0;\n }\n .applies-to input,\n .applies-to select {\n background: @base;\n border: 1px solid @surface0;\n color: @subtext0;\n }\n button {\n color: @text !important;\n background: @mantle !important;\n }\n #save-button[disabled] {\n background: @surface0 !important;\n }\n #message-box-title {\n color: @base;\n }\n .svg-icon:hover {\n fill: @overlay1;\n }\n .svg-icon {\n fill: @overlay0;\n }\n .onoffswitch input:checked + span {\n background-color: fade(@color, 25%);\n }\n .onoffswitch input:checked + span::before {\n background-color: @color;\n }\n #options-title {\n color: @base;\n }\n h2 {\n color: @color !important;\n }\n .installed .configure-usercss svg {\n fill: @color !important;\n }\n .installed .configure-usercss:hover svg {\n fill: @color !important;\n }\n .cm-s-default .cm-variable {\n color: @text;\n }\n .CodeMirror-activeline-background {\n background: @mantle;\n }\n }\n [data-ui-theme=\"light\"] {\n #catppuccin(@lightFlavor, @accentColor);\n }\n [data-ui-theme=\"dark\"] {\n #catppuccin(@darkFlavor, @accentColor);\n }\n}", "usercssData": { "name": "Stylus Catppuccin", "namespace": "github.com/catppuccin/userstyles/styles/stylus", "homepageURL": "https://github.com/catppuccin/userstyles/tree/main/styles/stylus", "version": "1.0.9", "updateURL": "https://github.com/catppuccin/userstyles/raw/main/styles/stylus/catppuccin.user.css", "description": "Soothing pastel theme for Stylus", "author": "Catppuccin", "license": "MIT", "preprocessor": "less", "vars": { "lightFlavor": { "type": "select", "label": "Light Flavor", "name": "lightFlavor", "value": null, "default": "latte", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappe", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "darkFlavor": { "type": "select", "label": "Dark Flavor", "name": "darkFlavor", "value": null, "default": "mocha", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappe", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "accentColor": { "type": "select", "label": "Accent", "name": "accentColor", "value": null, "default": "sapphire", "options": [ { "name": "rosewater", "label": "Rosewater", "value": "rosewater" }, { "name": "flamingo", "label": "Flamingo", "value": "flamingo" }, { "name": "pink", "label": "Pink", "value": "pink" }, { "name": "mauve", "label": "Mauve", "value": "mauve" }, { "name": "red", "label": "Red", "value": "red" }, { "name": "maroon", "label": "Maroon", "value": "maroon" }, { "name": "peach", "label": "Peach", "value": "peach" }, { "name": "yellow", "label": "Yellow", "value": "yellow" }, { "name": "green", "label": "Green", "value": "green" }, { "name": "teal", "label": "Teal", "value": "teal" }, { "name": "blue", "label": "Blue", "value": "blue" }, { "name": "sapphire", "label": "Sapphire", "value": "sapphire" }, { "name": "sky", "label": "Sky", "value": "sky" }, { "name": "lavender", "label": "Lavender", "value": "lavender" }, { "name": "subtext0", "label": "Gray", "value": "subtext0" } ] } } }, "author": "Catppuccin", "description": "Soothing pastel theme for Stylus", "name": "Stylus Catppuccin", "updateDate": 1698243263899, "_id": "6b26ec88-4cef-48be-bdbf-8a4dcb334a9e", "_rev": 1698243263899, "id": 7 }, { "enabled": true, "updateUrl": "https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css", "url": "https://github.com/catppuccin/userstyles/tree/main/styles/youtube", "installDate": 1698243289587, "sections": [ { "code": "" } ], "sourceCode": "/* ==UserStyle==\n@name YouTube Catppuccin\n@namespace github.com/catppuccin/userstyles/styles/youtube\n@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube\n@version 3.1.0\n@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css\n@description Soothing pastel theme for YouTube\n@author Catppuccin\n@license MIT\n\n@preprocessor less\n@var select lightFlavor \"Light Flavor\" [\"latte:Latte*\", \"frappe:Frappe\", \"macchiato:Macchiato\", \"mocha:Mocha\"]\n@var select darkFlavor \"Dark Flavor\" [\"latte:Latte\", \"frappe:Frappe\", \"macchiato:Macchiato\", \"mocha:Mocha*\"]\n@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\"]\n@var checkbox logo \"Logo\" 0\n@var checkbox oledOn \"Enable black bars\" 0\n@var text scrollbar_width \"Scrollbar width\" 8px\n==/UserStyle== */\n@-moz-document regexp('https?:\\\\/\\\\/(?!gaming\\\\.)(?!consent\\\\.)(?!vr\\\\.)(?!music\\\\.)(?!tv\\\\.)(?!artists\\\\.)(?!studio\\\\.).*youtube(?!kids\\\\.).*\\\\.com\\\\/(?!premium|howyoutubeworks).*$') {\n /* youtube.com */\n :root[dark] {\n #catppuccin(@darkFlavor, @accentColor);\n #oled(@oledOn);\n #logo(@logo);\n }\n :root {\n #catppuccin(@lightFlavor, @accentColor);\n #oled(@oledOn);\n #logo(@logo);\n }\n\n /* for oled monitors */\n #oled(@oled) when (@oled =0) {\n #ytd-player #container {\n background: @base !important;\n }\n }\n\n #logo(@logo) {\n ytd-topbar-logo-renderer.style-scope a svg > g,\n svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) {\n path[fill=\"#FF0000\"] {\n fill: @accent-Color !important;\n }\n path[fill=\"white\"] {\n fill: @base !important;\n }\n }\n & when (@logo =1) {\n ytd-topbar-logo-renderer,\n svg.ytd-consent-bump-v2-lightbox {\n display: none;\n }\n }\n }\n\n #catppuccin(@lookup, @accent) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n @accent-Color: @catppuccin[@@lookup][@@accent];\n\n /* apply everywhere */\n &,\n [dark],\n html,\n html[system-icons][dark],\n html[system-icons] [dark],\n html[darker-dark-theme][dark],\n [darker-dark-theme] [dark] {\n --yt-spec-white-1: @text !important;\n --yt-spec-white-2: @subtext0 !important;\n --yt-spec-white-3: @subtext1 !important;\n --yt-spec-white-4: darken(@subtext1, 5%) !important;\n --yt-spec-black-1: @overlay1 !important;\n --yt-spec-black-2: @overlay0 !important;\n --yt-spec-black-3: @surface2 !important;\n --yt-spec-black-4: @surface1 !important;\n --yt-spec-black-pure: @surface0 !important;\n --yt-spec-grey-1: @text !important;\n --yt-spec-grey-2: @subtext0 !important;\n --yt-spec-grey-3: @subtext1 !important;\n --yt-spec-grey-4: @overlay2 !important;\n --yt-spec-grey-5: @overlay1 !important;\n --yt-brand-youtube-red: @accent-Color !important;\n --yt-brand-medium-red: @accent-Color !important;\n --yt-brand-light-red: @accent-Color !important;\n --yt-spec-red-30: @peach !important;\n --yt-spec-red-70: @red !important;\n --yt-spec-pale-blue: @sky !important;\n --yt-spec-light-blue: @sky !important;\n --yt-spec-dark-blue: @sapphire !important;\n --yt-spec-navy-blue: @teal !important;\n --yt-spec-light-green: @green !important;\n --yt-spec-dark-green: @green !important;\n --yt-spec-yellow: @peach !important;\n --yt-spec-black-pure-alpha-5: fadeout(@crust, 0.05) !important;\n --yt-spec-black-pure-alpha-10: fadeout(@crust, 0.1) !important;\n --yt-spec-black-pure-alpha-15: fadeout(@crust, 0.15) !important;\n --yt-spec-black-pure-alpha-30: fadeout(@crust, 0.3) !important;\n --yt-spec-black-pure-alpha-60: fadeout(@crust, 0.6) !important;\n --yt-spec-black-pure-alpha-80: fadeout(@crust, 0.8) !important;\n --yt-spec-black-1-alpha-98: fadeout(@crust, 0.98) !important;\n --yt-spec-black-1-alpha-95: fadeout(@crust, 0.95) !important;\n --yt-spec-white-1-alpha-10: fadeout(@text, 0.1) !important;\n --yt-spec-white-1-alpha-20: fadeout(@text, 0.2) !important;\n --yt-spec-white-1-alpha-25: fadeout(@text, 0.25) !important;\n --yt-spec-white-1-alpha-30: fadeout(@text, 0.3) !important;\n --yt-spec-white-1-alpha-70: fadeout(@text, 0.7) !important;\n --yt-spec-white-1-alpha-95: fadeout(@text, 0.95) !important;\n --yt-spec-white-1-alpha-98: fadeout(@text, 0.98) !important;\n --yt-brand-medium-red-alpha-90: fadeout(@accent-Color, 0.9) !important;\n --yt-brand-medium-red-alpha-30: fadeout(@accent-Color, 0.3) !important;\n --yt-brand-light-red-alpha-30: fadeout(@accent-Color, 0.3) !important;\n --yt-spec-light-blue-alpha-30: fadeout(@sapphire, 0.3) !important;\n --yt-spec-dark-blue-alpha-30: fadeout(@sapphire, 0.3) !important;\n\n --yt-spec-base-background: @base !important;\n --yt-spec-raised-background: @mantle !important;\n --yt-spec-menu-background: @mantle !important;\n --yt-spec-inverted-background: @text !important;\n --yt-spec-additive-background: fadeout(@surface0, 0.1) !important;\n --yt-spec-outline: @surface0 !important;\n --yt-spec-shadow: fadeout(@crust, 0.25) !important;\n --yt-spec-text-primary: @text !important;\n --yt-spec-text-secondary: @subtext0 !important;\n --yt-spec-text-disabled: @subtext1 !important;\n --yt-spec-text-primary-inverse: @crust !important;\n --yt-spec-call-to-action: @accent-Color !important;\n --yt-spec-call-to-action-inverse: @accent-Color !important;\n --yt-spec-suggested-action: fadeout(@accent-Color, 80%) !important;\n --yt-spec-suggested-action-inverse: @text !important;\n --yt-spec-icon-active-other: @overlay0 !important;\n --yt-spec-icon-inactive: @overlay1 !important;\n --yt-spec-icon-disabled: @overlay2 !important;\n --yt-spec-button-chip-background-hover: @surface1 !important;\n --yt-spec-touch-response: @surface0 !important;\n\n --yt-spec-touch-response-inverse: @accent-Color !important;\n --yt-spec-brand-icon-active: @accent-Color !important;\n --yt-spec-brand-icon-inactive: @overlay1 !important;\n --yt-spec-brand-button-background: @accent-Color !important;\n --yt-spec-brand-link-text: @sapphire !important;\n --yt-spec-wordmark-text: @text !important;\n --yt-spec-error-indicator: @red !important;\n --yt-spec-themed-blue: @sky !important;\n --yt-spec-themed-green: @green !important;\n --yt-spec-ad-indicator: @teal !important;\n --yt-spec-themed-overlay-background: fadeout(@crust, 0.8) !important;\n --yt-spec-commerce-badge-background: @green !important;\n --yt-spec-static-brand-red: @accent-Color !important;\n --yt-spec-static-brand-white: @text !important;\n --yt-spec-static-brand-black: @base !important;\n --yt-spec-static-clear-color: fadeout(@crust, 0) !important;\n --yt-spec-static-clear-black: fadeout(@crust, 0) !important;\n --yt-spec-static-ad-yellow: @peach !important;\n --yt-spec-static-grey: @subtext0 !important;\n --yt-spec-static-overlay-background-solid: @crust !important;\n --yt-spec-static-overlay-background-heavy: @surface0 !important;\n --yt-spec-static-overlay-background-medium: fadeout(\n @crust,\n 0.6\n ) !important;\n --yt-spec-static-overlay-background-medium-light: fadeout(\n @crust,\n 0.3\n ) !important;\n --yt-spec-static-overlay-background-light: fadeout(\n @crust,\n 0.1\n ) !important;\n --yt-spec-static-overlay-text-primary: @text !important;\n --yt-spec-static-overlay-text-secondary: fadeout(\n @subtext0,\n 0.7\n ) !important;\n --yt-spec-static-overlay-text-disabled: fadeout(\n @subtext0,\n 0.3\n ) !important;\n --yt-spec-static-overlay-call-to-action: @accent-Color !important;\n --yt-spec-static-overlay-icon-active-other: @text !important;\n --yt-spec-static-overlay-icon-inactive: @surface1 !important;\n --yt-spec-static-overlay-icon-disabled: @surface2 !important;\n --yt-spec-static-overlay-button-primary: @accent-Color !important;\n --yt-spec-static-overlay-button-secondary: @surface0 !important;\n --yt-spec-static-overlay-touch-response: @overlay1 !important;\n --yt-spec-static-overlay-touch-response-inverse: @surface1 !important;\n --yt-spec-static-overlay-background-brand: @accent-Color !important;\n --yt-spec-assistive-feed-themed-gradient-1: @subtext0 !important;\n --yt-spec-assistive-feed-themed-gradient-2: @lavender !important;\n --yt-spec-assistive-feed-themed-gradient-3: @red !important;\n --yt-spec-brand-background-solid: @base !important;\n --yt-spec-brand-background-primary: @surface0 !important;\n --yt-spec-brand-background-secondary: @mantle !important;\n --yt-spec-general-background-a: @base !important;\n --yt-spec-general-background-b: @mantle !important;\n --yt-spec-general-background-c: @crust !important;\n --yt-spec-error-background: @base !important;\n --yt-spec-10-percent-layer: @surface2 !important;\n --yt-spec-snackbar-background: @mantle !important;\n --yt-spec-snackbar-background-updated: @mantle !important;\n --yt-spec-badge-chip-background: if(\n @lookup = latte,\n @crust,\n @surface1\n ) !important;\n --yt-spec-verified-badge-background: @overlay0 !important;\n --yt-spec-call-to-action-fadeoutd: fadeout(@sapphire, 0.3) !important;\n --yt-spec-call-to-action-hover: @accent-Color !importantr;\n --yt-spec-brand-button-background-hover: @accent-Color !important;\n --yt-spec-brand-link-text-fadeoutd: fadeout(\n @accent-Color,\n 0.3\n ) !important;\n --yt-spec-filled-button-focus-outline: @surface0 !important;\n --yt-spec-static-overlay-button-hover: @surface1 !important;\n --yt-spec-mono-filled-hover: @surface1 !important;\n --yt-spec-commerce-filled-hover: @accent-Color !important;\n --yt-spec-mono-tonal-hover: @surface1 !important;\n --yt-spec-commerce-tonal-hover: @surface2 !important;\n --yt-spec-static-overlay-filled-hover: @overlay1 !important;\n --yt-spec-static-overlay-tonal-hover: @surface1 !important;\n --yt-spec-paper-tab-ink: fadeout(@text, 0.3);\n --yt-spec-filled-button-text: @text !important;\n --yt-spec-selected-nav-text: @text !important;\n --iron-icon-fill-color: @text !important;\n\n /* Search bar */\n --ytd-searchbox-border-color: @surface0 !important;\n --ytd-searchbox-legacy-border-color: @surface0 !important;\n --ytd-searchbox-legacy-border-shadow-color: fadeout(@crust, 0) !important;\n --ytd-searchbox-legacy-button-color: @mantle !important;\n --ytd-searchbox-legacy-button-border-color: @surface0 !important;\n --ytd-searchbox-legacy-button-focus-color: @accent-Color !important;\n --ytd-searchbox-legacy-button-hover-color: @mantle !important;\n --ytd-searchbox-legacy-button-hover-border-color: @surface0 !important;\n --ytd-searchbox-legacy-button-icon-color: @accent-Color !important;\n --ytd-searchbox-background: @base !important;\n --ytd-searchbox-text-color: @text !important;\n\n /* System icons */\n --yt-spec-icon-inactive: @overlay0 !important;\n --yt-spec-icon-disabled: @overlay1 !important;\n --yt-spec-brand-icon-inactive: @overlay2 !important;\n\n /* Yt video Page */\n --yt-live-chat-background-color: @base !important;\n --yt-live-chat-action-panel-background-color: @base !important;\n --yt-live-chat-action-panel-background-color-transparent: @base !important;\n --yt-live-chat-secondary-background-color: @surface1;\n --yt-live-chat-banner-gradient-scrim: linear-gradient(\n @mantle,\n transparent\n ) !important;\n --yt-live-chat-toast-background-color: @surface2 !important;\n --yt-live-chat-mode-change-background-color: @base !important;\n --yt-live-chat-secondary-text-color: @subtext0 !important;\n --yt-live-chat-tertiary-text-color: fadeout(@text, 0.54) !important;\n --yt-live-chat-text-input-field-inactive-underline-color: @subtext0 !important;\n --yt-live-chat-text-input-field-placeholder-color: @subtext0 !important;\n --yt-live-chat-enabled-send-button-color: @text !important;\n --yt-live-chat-disabled-icon-button-color: @subtext1 !important;\n --yt-live-chat-picker-button-hover-color: @accent-Color !important;\n --yt-live-chat-mention-background-color: @accent-Color !important;\n --yt-live-chat-mention-text-color: @text !important;\n --yt-live-chat-deleted-message-color: @subtext0;\n --yt-live-chat-deleted-message-bar-color: @subtext1 !important;\n --yt-live-chat-reconnect-message-color: @text !important;\n --yt-live-chat-disabled-button-background-color: @overlay0 !important;\n --yt-live-chat-sub-panel-background-color: @base !important;\n --yt-live-chat-sub-panel-background-color-transparent: @mantle !important;\n --yt-live-chat-moderator-color: @lavender !important;\n --yt-live-chat-owner-color: @peach !important;\n --yt-live-chat-message-highlight-background-color: @base !important;\n --yt-live-chat-sponsor-color: @green !important;\n --yt-live-chat-overlay-color: fadeout(@mantle, 0.5);\n --yt-live-chat-dialog-background-color: @base !important;\n --yt-emoji-picker-variant-selector-bg-color: @base !important;\n --yt-live-chat-moderation-mode-hover-background-color: fadeout(\n @mantle,\n 0.3\n ) !important;\n --yt-grey: @subtext0 !important;\n --yt-live-chat-text-input-field-suggestion-background-color: @subtext0 !important;\n --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1 !important;\n --yt-emoji-picker-search-background-color: @surface0 !important;\n --yt-emoji-picker-search-color: @text !important;\n --yt-emoji-picker-search-placeholder-color: @accent-Color !important;\n --yt-live-chat-slider-active-color: @accent-Color !important;\n --yt-live-chat-slider-container-color: @surface0 !important;\n --yt-live-chat-slider-markers-color: @text !important;\n --yt-live-chat-banner-gradient-scrim: linear-gradient(\n @mantle,\n transparent\n ) !important;\n --yt-live-chat-action-panel-gradient-scrim: linear-gradient(\n to top,\n @mantle,\n transparent\n ) !important;\n --yt-live-chat-automod-button-background-color-hover: fadeout(\n @crust,\n 0.5\n ) !important;\n --yt-live-chat-automod-button-explanation-color: fadeout(\n @accent-Color,\n 0.7\n ) !important;\n --yt-live-chat-shimmer-background-color: fadeout(@crust, 0.4) !important;\n --yt-live-chat-shimmer-linear-gradient: linear-gradient(\n 0deg,\n fadeout(@text, 0.1) 40%,\n fadeout(@base, 0.3) 50%,\n fadeout(@text, 0.1) 60%\n ) !important;\n --yt-live-chat-vem-background-color: @mantle !important;\n --yt-live-chat-product-picker-icon-color: fadeout(@text, 0.5) !important;\n --yt-live-chat-product-picker-hover-color: @overlay0 !important;\n --yt-live-chat-product-picker-disabled-icon-color: fadeout(\n @text,\n 0.3\n ) !important;\n --yt-live-chat-action-panel-background-color-transparent: (\n null\n ) !important;\n\n /* Tooltip */\n --paper-tooltip-background: @overlay0 !important;\n --paper-tooltip-text-color: @text !important;\n\n /* links */\n --yt-endpoint-color: @accent-Color !important;\n --yt-endpoint-visited-color: @accent-Color !important;\n --yt-endpoint-hover-color: @accent-Color !important;\n\n --sb-dark-red-outline: @accent-Color !important;\n --sb-main-bg-color: @base !important;\n --sb-main-fg-color: @text !important;\n --sb-grey-bg-color: @base !important;\n --sb-grey-fg-color: @subtext0 !important;\n --sb-red-bg-color: @accent-Color !important;\n }\n\n /* general colors */\n &:not(.style-scope) {\n --primary-text-color: @text !important;\n --primary-background-color: @base !important;\n --secondary-text-color: @subtext0 !important;\n --disabled-text-color: @subtext1 !important;\n --divider-color: @overlay0 !important;\n --error-color: @red !important;\n --primary-color: @accent-Color !important;\n --light-primary-color: @accent-Color !important;\n --dark-primary-color: @blue !important;\n --accent-color: @accent-Color !important;\n --light-accent-color: @accent-Color !important;\n --dark-accent-color: @accent-Color !important;\n --light-theme-background-color: @base !important;\n --light-theme-base-color: @text !important;\n --light-theme-text-color: @text !important;\n --light-theme-secondary-color: @subtext0 !important;\n --light-theme-disabled-color: @subtext1 !important;\n --light-theme-divider-color: @overlay0 !important;\n --dark-theme-background-color: @base !important;\n --dark-theme-base-color: @text !important;\n --dark-theme-text-color: @text !important;\n --dark-theme-secondary-color: @subtext0 !important;\n --dark-theme-disabled-color: @subtext1 !important;\n --dark-theme-divider-color: @overlay0 !important;\n }\n\n #channel-name.ytd-video-meta-block {\n --yt-endpoint-color: @accent-Color !important;\n --yt-endpoint-visited-color: @accent-Color !important;\n color: @accent-Color !important;\n }\n\n /* selected chapter */\n ytd-macro-markers-list-item-renderer {\n --ytd-macro-markers-list-item-background-color: @surface0 !important;\n --ytd-macro-markers-list-item-title-color: @text !important;\n --ytd-macro-markers-list-item-secondary-color: @subtext1 !important;\n --ytd-macro-markers-list-item-timestamp-background-color: @surface1 !important;\n }\n\n /* playlist selector */\n ytd-playlist-panel-video-renderer {\n --yt-lightsource-section2-color: @surface1 !important;\n --yt-lightsource-section4-color: @surface2 !important;\n --yt-lightsource-primary-title-color: @text !important;\n --yt-lightsource-secondary-title-color: @text !important;\n --yt-active-playlist-panel-background-color: @surface0 !important;\n }\n\n ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette]\n .header.ytd-playlist-panel-renderer {\n --iron-icon-fill-color: @text !important;\n background-color: @base !important;\n }\n\n /* explandable meta */\n ytd-expandable-metadata-renderer {\n --yt-lightsource-section1-color: @base !important;\n --yt-lightsource-section2-color: @surface0 !important;\n --yt-lightsource-section3-color: @surface1 !important;\n --yt-lightsource-section4-color: @surface2 !important;\n --yt-lightsource-primary-title-color: @text !important;\n --yt-lightsource-secondary-title-color: @subtext0 !important;\n }\n\n yt-live-chat-renderer {\n --yt-emoji-picker-renderer-height: 180px;\n --yt-button-default-text-color: @text !important;\n --yt-button-default-background-color: @base !important;\n --yt-button-dark-text-color: @base !important;\n --yt-button-dark-background-color: @accent-Color !important;\n --yt-button-payment-background-color: @accent-Color !important;\n }\n\n yt-icon.ytd-pinned-comment-badge-renderer * {\n fill: @text !important;\n }\n\n .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after {\n background: @overlay0 !important;\n }\n\n .html5-ypc-purchase {\n background: @accent-Color !important;\n &:hover {\n background: ligten(@accent-Color, 10%) !important;\n }\n }\n\n yt-notification-action-renderer[darker-dark-theme]\n tp-yt-paper-toast.yt-notification-action-renderer {\n background: @overlay0 !important;\n }\n\n /* volume bar */\n .ytp-volume-slider-handle {\n background: @accent-Color !important;\n &::before {\n background: @accent-Color !important;\n }\n &::after {\n z-index: -1;\n }\n }\n\n /* new videos dot */\n #newness-dot {\n background-color: @accent-Color !important;\n }\n\n /* subtitle */\n .ytp-chrome-controls .ytp-button[aria-pressed]:after {\n background-color: @accent-Color !important;\n }\n\n /* menu items */\n /* checkbox subitem */\n .ytp-menuitem[aria-checked=\"true\"] .ytp-menuitem-toggle-checkbox {\n background: @accent-Color !important;\n &::after {\n background: @overlay1 !important;\n }\n }\n .ytp-menuitem:not([aria-disabled=\"true\"]):hover {\n background: @surface1 !important;\n }\n .ytp-settings-button.ytp-hd-quality-badge,\n .ytp-settings-button.ytp-4k-quality-badge,\n .ytp-settings-button.ytp-5k-quality-badge,\n .ytp-settings-button.ytp-8k-quality-badge,\n .ytp-settings-button.ytp-3d-badge {\n &::after {\n background-color: @accent-Color !important;\n }\n }\n\n .ytp-panel-menu {\n color: @text;\n\n & .ytp-menuitem:not(:last-child) svg > path {\n fill: @text;\n }\n\n & .ytp-menuitem:last-child svg:last-child {\n fill: @text;\n }\n }\n\n .ytp-right-controls svg path,\n .ytp-svg-fill {\n fill: #fff !important;\n }\n\n .ytp-time-current,\n .ytp-time-separator,\n .ytp-time-duration,\n .ytp-menu-label-secondary,\n .ytp-menuitem-label-count {\n color: #fff;\n }\n\n .ytp-tooltip:not([aria-hidden=\"true\"]) {\n color: @text;\n }\n\n .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover {\n fill: @accent-Color !important;\n }\n\n .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover {\n fill: @accent-Color !important;\n }\n\n .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,\n .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {\n background-color: @accent-Color !important;\n .yt-spec-button-shape-next__icon yt-icon svg g path {\n fill: @base !important;\n }\n }\n\n /* link */\n .yt-core-attributed-string__link--call-to-action-color {\n color: @sapphire !important;\n &:hover {\n color: @teal !important;\n }\n }\n\n /* search results */\n .sbpqs_a:before,\n .sbqs_c:before {\n filter: invert(1);\n }\n\n /* Results backgrounds */\n .sbsb_a,\n .sbdd_b {\n background: @mantle !important;\n border: none !important;\n }\n\n /* text color */\n .gsfs {\n color: @text !important;\n }\n\n /* Hover and keyboard select background */\n .sbsb_c.gsfs:hover,\n .sbsb_d {\n background-color: @surface0 !important;\n }\n\n .sbfl_b {\n background-color: @mantle !important;\n &:hover {\n background-color: @surface0 !important;\n color: @accent-Color !important;\n }\n }\n\n .sbpqs_a {\n color: @accent-Color !important;\n }\n\n .sbfl_a {\n color: @subtext0 !important;\n }\n\n .sbsb_i {\n color: @subtext0;\n }\n\n /* Keyboard select text color and hover text color */\n .sbsb_c:hover .sbqs_c,\n .sbsb_c.gsfs.sbsb_d .sbqs_c {\n color: @accent-Color !important;\n }\n\n .ytp-swatch-background-color {\n background-color: @accent-Color !important;\n }\n\n /* exmplation box */\n .explanation-box[correct] * {\n color: @crust !important;\n }\n\n /* custom likes + anims */\n yt-animated-icon[animated-icon-type=\"LIKE\"]\n > ytd-lottie-player\n > lottie-component\n > svg\n > g:nth-child(2)\n > g:nth-child(2) {\n /* not liked */\n > g:nth-child(2),\n > g:nth-child(4) {\n > path:nth-child(1) {\n stroke: @text !important;\n }\n }\n /* liked */\n > g:nth-child(1),\n > g:nth-child(3) {\n > path:nth-child(1) {\n fill: @accent-Color !important;\n }\n > path:nth-child(2) {\n stroke: @accent-Color !important;\n }\n }\n }\n\n /* iv branding */\n /* Popup for when you hover over the channel avatar in the video */\n .iv-branding .branding-context-container-inner {\n background-color: @base !important;\n }\n\n .iv-branding .iv-branding-context-name {\n color: @text !important;\n text-shadow: none !important;\n }\n\n /* Popup for when you hover over the channel avatar in the video */\n .iv-branding .branding-context-container-inner {\n background-color: @base !important;\n }\n\n /* Cards */\n .iv-drawer-content {\n background-color: fadeout(@mantle, 5%) !important;\n }\n\n .iv-drawer-header-text {\n color: @text !important;\n }\n\n .iv-card-content,\n .ytp-ce-expanding-overlay-background,\n .ytp-cards-teaser .ytp-cards-teaser-text,\n .ytp-cards-teaser .ytp-cards-teaser-box {\n background-color: @base !important;\n }\n\n .ytp-cards-teaser .ytp-cards-teaser-box,\n .iv-card-image {\n border: 0px !important;\n }\n\n .iv-card-content > :first-child,\n .html5-video-player a,\n .iv-card h2,\n .ytp-cards-teaser .ytp-cards-teaser-text {\n color: @text !important;\n }\n\n /*Player tooltip background*/\n .ytp-tooltip-text {\n background: @surface0 !important;\n }\n\n .iv-card:hover .iv-card-primary-link,\n .ytp-ce-website-title {\n color: @accent-Color !important;\n }\n\n .ytp-popup {\n background: @surface0 !important;\n }\n\n tp-yt-paper-dialog {\n background-color: @base !important;\n }\n\n /* Temporary fix */\n .yt-core-attributed-string--link-inherit-color {\n color: @text !important;\n /*&:hover {\n * color: @teal !important;\n }*/\n }\n\n /* live badges */\n .badge-style-type-live-now-alternate,\n ytd-thumbnail-overlay-time-status-renderer[overlay-style=\"LIVE\"] {\n color: @crust !important;\n yt-icon svg {\n g path,\n path {\n fill: @crust !important;\n }\n }\n }\n .ytp-live-badge {\n &:before {\n background: @subtext1 !important;\n }\n &[disabled]:before {\n background: @accent-Color !important;\n }\n }\n\n /* notification idicator */\n .yt-spec-icon-badge-shape--type-notification\n .yt-spec-icon-badge-shape__badge {\n background-color: @accent-Color !important;\n color: @crust !important;\n }\n .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon {\n color: var(--yt-spec-icon-active-other) !important;\n }\n\n /* creator badges */\n ytd-author-comment-badge-renderer {\n --yt-basic-background-color: @surface0 !important;\n --yt-basic-foreground-title-color: @surface0 !important;\n --ytd-author-comment-badge-background-color: @surface0 !important;\n --ytd-author-comment-badge-name-color: @text !important;\n --ytd-author-comment-badge-icon-color: @text !important;\n padding-right: 6px;\n padding-left: 8px;\n }\n\n /* disable ambient mode */\n #cinematics > div > canvas {\n visibility: hidden;\n }\n\n /* badges e.g. popular */\n yt-chip-cloud-chip-renderer[chip-style=\"STYLE_DEFAULT\"][selected],\n yt-chip-cloud-chip-renderer[chip-style=\"STYLE_HOME_FILTER\"][selected] {\n background: @surface0 !important;\n border: 1px solid @accent-Color !important;\n color: @text !important;\n }\n\n /* Search border */\n ytd-searchbox[has-focus] #container.ytd-searchbox {\n border-color: @accent-Color !important;\n }\n\n /* Error page */\n #error-page {\n background-color: @base !important;\n }\n\n #error-page-content {\n color: @text !important;\n text-shadow: none;\n background-color: @base !important;\n > p {\n color: @text !important;\n text-shadow: none;\n }\n #masthead-search-terms.masthead-search-terms-border {\n border: 1px solid @accent-Color !important;\n box-shadow: none !important;\n }\n #yt-masthead {\n color: @text !important;\n text-shadow: none;\n #logo-container {\n .logo {\n filter: invert(1) grayscale(1);\n }\n .content-region {\n color: @text !important;\n text-shadow: none;\n }\n }\n #masthead-search #masthead-search-terms-border {\n input[type=\"text\"] {\n color: @text !important;\n &:focus {\n color: @accent-Color !important;\n }\n }\n }\n .search-button {\n background-color: @mantle !important;\n }\n }\n }\n\n /* Scrollbar */\n ::-webkit-scrollbar-thumb {\n background: @accent-Color !important;\n }\n\n ::-webkit-scrollbar {\n width: @scrollbar_width !important;\n }\n\n ::-webkit-scrollbar-track {\n background: @base !important;\n }\n\n ::-webkit-scrollbar-thumb {\n background: @accent-Color !important;\n }\n\n /* text highlight */\n ::selection {\n background: fadeout(@accent-Color, 80%) !important;\n color: @text !important;\n }\n\n ::-moz-selection {\n background: fadeout(@accent-Color, 80%) !important;\n color: @text !important;\n }\n }\n}\n@-moz-document url-prefix('https://www.youtube.com/redirect')\n{\n /* youtube.com-redirect */\n :root[dark] {\n #catppuccin(@darkFlavor, @accentColor);\n }\n :root {\n #catppuccin(@lightFlavor, @accentColor);\n }\n\n #catppuccin(@lookup, @accent) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n @accent-Color: @catppuccin[@@lookup][@@accent];\n\n h1 {\n color: @text !important;\n }\n\n #redirect-main-text {\n color: @overlay2 !important;\n .bolded {\n color: @accent-Color !important;\n }\n }\n\n /* search */\n #masthead-search-terms-border {\n border-color: @surface0 !important;\n background-color: @surface0 !important;\n box-shadow: fadeout(@crust, 10%) !important;\n }\n\n /*Community Cross-posting*/\n ytd-shared-post-renderer[uses-compact-lockup]\n #repost-context.ytd-shared-post-renderer {\n background-color: var(--second-background);\n }\n #divider-line-container.ytd-shared-post-renderer {\n background-color: var(--yt-spec-10-percent-layer);\n }\n\n #masthead-search-terms {\n color: @text !important;\n }\n\n .search-button {\n background: @surface0 !important;\n border-color: @surface0 !important;\n }\n\n .search-button-content {\n filter: invert(1);\n }\n\n #redirect-backto-safety-button:hover {\n color: @text !important;\n }\n\n #logo-container .content-region {\n color: @text !important;\n }\n\n /* text highlight */\n ::selection {\n background: fadeout(@accent-Color, 80%) !important;\n color: @text !important;\n }\n\n ::-moz-selection {\n background: fadeout(@accent-Color, 80%) !important;\n color: @text !important;\n }\n }\n}\n\n@-moz-document url-prefix('https://studio.youtube.com')\n{\n /* studio.youtube.com */\n :root[dark] {\n #catppuccin(@darkFlavor, @accentColor);\n }\n :root {\n #catppuccin(@lightFlavor, @accentColor);\n }\n\n #catppuccin(@lookup, @accent) {\n @rosewater: @catppuccin[@@lookup][@rosewater];\n @flamingo: @catppuccin[@@lookup][@flamingo];\n @pink: @catppuccin[@@lookup][@pink];\n @mauve: @catppuccin[@@lookup][@mauve];\n @red: @catppuccin[@@lookup][@red];\n @maroon: @catppuccin[@@lookup][@maroon];\n @peach: @catppuccin[@@lookup][@peach];\n @yellow: @catppuccin[@@lookup][@yellow];\n @green: @catppuccin[@@lookup][@green];\n @teal: @catppuccin[@@lookup][@teal];\n @sky: @catppuccin[@@lookup][@sky];\n @sapphire: @catppuccin[@@lookup][@sapphire];\n @blue: @catppuccin[@@lookup][@blue];\n @lavender: @catppuccin[@@lookup][@lavender];\n @text: @catppuccin[@@lookup][@text];\n @subtext1: @catppuccin[@@lookup][@subtext1];\n @subtext0: @catppuccin[@@lookup][@subtext0];\n @overlay2: @catppuccin[@@lookup][@overlay2];\n @overlay1: @catppuccin[@@lookup][@overlay1];\n @overlay0: @catppuccin[@@lookup][@overlay0];\n @surface2: @catppuccin[@@lookup][@surface2];\n @surface1: @catppuccin[@@lookup][@surface1];\n @surface0: @catppuccin[@@lookup][@surface0];\n @base: @catppuccin[@@lookup][@base];\n @mantle: @catppuccin[@@lookup][@mantle];\n @crust: @catppuccin[@@lookup][@crust];\n @accent-Color: @catppuccin[@@lookup][@@accent];\n\n &,\n html,\n html[dark],\n html[dark][dark],\n &[dark],\n &[light],\n [light],\n html[light],\n html[light][light] {\n /* disable */\n --yt-spec-black-pure-alpha-80: (null) !important;\n --yt-spec-black-pure-alpha-60: (null) !important;\n --yt-spec-black-1-alpha-98: (null) !important;\n --yt-spec-black-1-alpha-95: (null) !important;\n\n /* text */\n --yt-spec-text-primary: @text !important;\n --ytcp-text-primary: @text !important;\n --ytcp-text-primary-inverse: @base !important;\n --ytcp-static-overlay-text-primary-inverse: @base !important;\n --ytcp-wordmark-text: @text !important;\n --ytcp-text-secondary: @subtext0 !important;\n --ytcp-text-disabled: @subtext1 !important;\n --ytcp-overlay-text-primary: @overlay2 !important;\n\n /* main bg */\n --ytcp-general-background-a: @base !important;\n --yt-spec-base-background: @base !important;\n --yt-spec-black-3: @base !important;\n\n /* secondary bg */\n --yt-spec-brand-background-solid: @mantle !important;\n --ytcp-brand-background-solid: @mantle !important;\n --yt-spec-raised-background: @mantle !important;\n --ytcp-general-background-b: @mantle !important;\n --ytcp-analytics-reach-background: @mantle !important;\n --yt-spec-black-2: @mantle !important;\n\n /* additional bg */\n --ytcp-general-background-c: @crust !important;\n\n /* menu */\n --ytcp-menu-background: @surface0 !important;\n\n /* card borders */\n --ytcp-container-border-color: @surface0 !important;\n --ytcp-container-hovered-border-color: @surface0 !important;\n --ytcp-line-divider-solid: @surface0 !important;\n --ytcp-container-border-color-inverse: @subtext0 !important;\n --ytcp-line-divider-solid-inverse: @subtext0 !important;\n\n /* links */\n --ytcp-call-to-action: @sapphire !important;\n --ytcp-call-to-action-inverse: @mantle !important;\n\n /* buttons */\n --ytcp-call-to-action-raised-background: @accent-Color !important;\n --yt-spec-brand-button-background: @accent-Color !important;\n --ytcp-call-to-action-raised-disabled: @surface2 !important;\n --ytcp-call-to-action-raised-disabled-background: @overlay2 !important;\n --ytcp-call-to-action-raised-background-inverse: @base !important;\n --ytcp-call-to-action-raised-disabled-inverse: @surface2 !important;\n --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2 !important;\n\n /* dropdown */\n --yt-spec-brand-background-primary: @surface0 !important;\n\n /* icons */\n --yt-compact-link-icon-color: @overlay2 !important;\n --ytcp-icon-active: @accent-Color !important;\n --ytcp-icon-inactive: @overlay2 !important;\n --ytcp-icon-disabled: @overlay2 !important;\n --ytcp-icon-active-inverse: @overlay1 !important;\n --ytcp-icon-disabled-inverse: @subtext1 !important;\n\n /* colors */\n --ytcp-error-red: @red !important;\n --ytcp-badge-red: @red !important;\n --ytcp-error-red-inverse: @red !important;\n --ytcp-themed-red-inverse: @red !important;\n --ytcp-themed-red: @red !important;\n --ytcp-themed-blue: @blue !important;\n --ytcp-badge-blue-solid: @blue !important;\n --ytcp-themed-blue-inverse: @blue !important;\n --ytcp-themed-green: @green !important;\n --ytmus-genre-primary-melon: @green !important;\n --ytcp-themed-green-inverse: @green !important;\n --ytcp-analytics-pine: @green !important;\n --ytcp-analytics-pine-inverse: @green !important;\n --ytcp-analytics-parrot: @green !important;\n --ytcp-themed-yellow: @peach !important;\n --ytmus-genre-primary-gold: @peach !important;\n --ytcp-yellow-inverse: @peach !important;\n --ytcp-badge-yellow: @peach !important;\n --ytcp-analytics-yellow: @peach !important;\n --ytcp-analytics-apricot: @peach !important;\n --ytcp-suggested-action: @teal !important;\n --ytcp-analytics-overview: @teal !important;\n --ytcp-analytics-revenue: @teal !important;\n --ytcp-analytics-default-secondary: @teal !important;\n --ytcp-analytics-royal-blue: @lavender !important;\n --ytcp-analytics-reach: @lavender !important;\n --ytcp-analytics-audience: @lavender !important;\n --ytcp-analytics-engagement: @pink !important;\n --ytcp-analytics-revenue-secondary: @pink !important;\n --ytcp-analytics-bubblegum: @flamingo !important;\n --ytmus-genre-primary-ruby: @flamingo !important;\n --ytmus-genre-primary-salmon: @mauve !important;\n --ytmus-genre-primary-orange: @maroon !important;\n --ytmus-genre-primary-sky: @sky !important;\n --ytmus-genre-primary-sky-inverse: @sky !important;\n\n /* misc */\n --yt-spec-badge-chip-background: @surface1 !important;\n --ytcp-focus-inverse: @accent-Color !important;\n --ytcp-focus: @accent-Color !important;\n --ytcp-selected-item: @accent-Color !important;\n --ytcp-hover-item: @overlay2 !important;\n --ytcp-chip-active-focus: @accent-Color !important;\n --ytcp-playhead: @overlay2 !important;\n --ytcp-playhead-inverse: @overlay2 !important;\n }\n\n ytcp-button.destructive.ytls-error-dialog {\n color: @base !important;\n }\n\n yt-formatted-string.ytls-error-dialog,\n tp-yt-iron-icon.ytls-error-dialog {\n color: @text !important;\n }\n\n /* text highlight */\n ::selection {\n background: fadeout(@accent-Color, 80%) !important;\n color: @text !important;\n }\n\n ::-moz-selection {\n background: fadeout(@accent-Color, 80%) !important;\n color: @text !important;\n }\n }\n}\n\n@catppuccin: {\n @latte: {\n @rosewater: #dc8a78;\n @flamingo: #dd7878;\n @pink: #ea76cb;\n @mauve: #8839ef;\n @red: #d20f39;\n @maroon: #e64553;\n @peach: #fe640b;\n @yellow: #df8e1d;\n @green: #40a02b;\n @teal: #179299;\n @sky: #04a5e5;\n @sapphire: #209fb5;\n @blue: #1e66f5;\n @lavender: #7287fd;\n @text: #4c4f69;\n @subtext1: #5c5f77;\n @subtext0: #6c6f85;\n @overlay2: #7c7f93;\n @overlay1: #8c8fa1;\n @overlay0: #9ca0b0;\n @surface2: #acb0be;\n @surface1: #bcc0cc;\n @surface0: #ccd0da;\n @base: #eff1f5;\n @mantle: #e6e9ef;\n @crust: #dce0e8;\n };\n @frappe: {\n @rosewater: #f2d5cf;\n @flamingo: #eebebe;\n @pink: #f4b8e4;\n @mauve: #ca9ee6;\n @red: #e78284;\n @maroon: #ea999c;\n @peach: #ef9f76;\n @yellow: #e5c890;\n @green: #a6d189;\n @teal: #81c8be;\n @sky: #99d1db;\n @sapphire: #85c1dc;\n @blue: #8caaee;\n @lavender: #babbf1;\n @text: #c6d0f5;\n @subtext1: #b5bfe2;\n @subtext0: #a5adce;\n @overlay2: #949cbb;\n @overlay1: #838ba7;\n @overlay0: #737994;\n @surface2: #626880;\n @surface1: #51576d;\n @surface0: #414559;\n @base: #303446;\n @mantle: #292c3c;\n @crust: #232634;\n };\n @macchiato: {\n @rosewater: #f4dbd6;\n @flamingo: #f0c6c6;\n @pink: #f5bde6;\n @mauve: #c6a0f6;\n @red: #ed8796;\n @maroon: #ee99a0;\n @peach: #f5a97f;\n @yellow: #eed49f;\n @green: #a6da95;\n @teal: #8bd5ca;\n @sky: #91d7e3;\n @sapphire: #7dc4e4;\n @blue: #8aadf4;\n @lavender: #b7bdf8;\n @text: #cad3f5;\n @subtext1: #b8c0e0;\n @subtext0: #a5adcb;\n @overlay2: #939ab7;\n @overlay1: #8087a2;\n @overlay0: #6e738d;\n @surface2: #5b6078;\n @surface1: #494d64;\n @surface0: #363a4f;\n @base: #24273a;\n @mantle: #1e2030;\n @crust: #181926;\n };\n @mocha: {\n @rosewater: #f5e0dc;\n @flamingo: #f2cdcd;\n @pink: #f5c2e7;\n @mauve: #cba6f7;\n @red: #f38ba8;\n @maroon: #eba0ac;\n @peach: #fab387;\n @yellow: #f9e2af;\n @green: #a6e3a1;\n @teal: #94e2d5;\n @sky: #89dceb;\n @sapphire: #74c7ec;\n @blue: #89b4fa;\n @lavender: #b4befe;\n @text: #cdd6f4;\n @subtext1: #bac2de;\n @subtext0: #a6adc8;\n @overlay2: #9399b2;\n @overlay1: #7f849c;\n @overlay0: #6c7086;\n @surface2: #585b70;\n @surface1: #45475a;\n @surface0: #313244;\n @base: #1e1e2e;\n @mantle: #181825;\n @crust: #11111b;\n };\n};", "usercssData": { "name": "YouTube Catppuccin", "namespace": "github.com/catppuccin/userstyles/styles/youtube", "homepageURL": "https://github.com/catppuccin/userstyles/tree/main/styles/youtube", "version": "3.1.0", "updateURL": "https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css", "description": "Soothing pastel theme for YouTube", "author": "Catppuccin", "license": "MIT", "preprocessor": "less", "vars": { "lightFlavor": { "type": "select", "label": "Light Flavor", "name": "lightFlavor", "value": null, "default": "latte", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappe", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "darkFlavor": { "type": "select", "label": "Dark Flavor", "name": "darkFlavor", "value": null, "default": "mocha", "options": [ { "name": "latte", "label": "Latte", "value": "latte" }, { "name": "frappe", "label": "Frappe", "value": "frappe" }, { "name": "macchiato", "label": "Macchiato", "value": "macchiato" }, { "name": "mocha", "label": "Mocha", "value": "mocha" } ] }, "accentColor": { "type": "select", "label": "Accent", "name": "accentColor", "value": null, "default": "red", "options": [ { "name": "rosewater", "label": "Rosewater", "value": "rosewater" }, { "name": "flamingo", "label": "Flamingo", "value": "flamingo" }, { "name": "pink", "label": "Pink", "value": "pink" }, { "name": "mauve", "label": "Mauve", "value": "mauve" }, { "name": "red", "label": "Red", "value": "red" }, { "name": "maroon", "label": "Maroon", "value": "maroon" }, { "name": "peach", "label": "Peach", "value": "peach" }, { "name": "yellow", "label": "Yellow", "value": "yellow" }, { "name": "green", "label": "Green", "value": "green" }, { "name": "teal", "label": "Teal", "value": "teal" }, { "name": "blue", "label": "Blue", "value": "blue" }, { "name": "sapphire", "label": "Sapphire", "value": "sapphire" }, { "name": "sky", "label": "Sky", "value": "sky" }, { "name": "lavender", "label": "Lavender", "value": "lavender" }, { "name": "subtext0", "label": "Gray", "value": "subtext0" } ] }, "logo": { "type": "checkbox", "label": "Logo", "name": "logo", "value": null, "default": "0", "options": null }, "oledOn": { "type": "checkbox", "label": "Enable black bars", "name": "oledOn", "value": null, "default": "0", "options": null }, "scrollbar_width": { "type": "text", "label": "Scrollbar width", "name": "scrollbar_width", "value": null, "default": "8px", "options": null } } }, "author": "Catppuccin", "description": "Soothing pastel theme for YouTube", "name": "YouTube Catppuccin", "updateDate": 1698243289587, "_id": "394d935b-9e6c-4e0e-8adf-6ee7777aed72", "_rev": 1698243289587, "id": 8 } ]