club.userstyles.alpha.userstyle
Samples
54 randomly sampled records from the AT Protocol firehose
club.userstyles.alpha.userstyle (54 samples)
{
"$type": "club.userstyles.alpha.userstyle",
"title": "npm Catppuccin",
"license": "MIT",
"createdAt": "2026-06-13T20:17:47.304Z",
"sourceCode": "/* ==UserStyle==\n@name npm Catppuccin\n@namespace github.com/catppuccin/userstyles/styles/npm\n@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/npm\n@version 2025.09.06\n@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anpm\n@description Soothing pastel theme for npm\n@author Catppuccin\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\n@import \"https://userstyles.catppuccin.com/lib/lib.less\";\n\n@-moz-document domain(\"www.npmjs.com\") {\n :root {\n @media (prefers-color-scheme: light) {\n #catppuccin(@lightFlavor);\n }\n @media (prefers-color-scheme: dark) {\n #catppuccin(@darkFlavor);\n }\n }\n\n #catppuccin(@flavor) {\n #lib.palette();\n #lib.defaults();\n\n input,\n textarea {\n background-color: transparent;\n\n &:focus {\n box-shadow: 0 0 0 2px @accent;\n }\n }\n\n // TODO: Should accent-color be set in defaults?\n accent-color: @accent;\n\n @npmGradient: linear-gradient(139deg, @peach, @maroon, @red, @pink);\n\n --color-fg-default: @text;\n --color-fg-muted: @subtext1;\n --color-fg-subtle: @subtext0;\n --color-fg-on-emphasis: @base;\n --color-fg-brand: @accent;\n --color-fg-accent: @blue;\n --color-fg-success: @green;\n --color-fg-attention: @yellow;\n --color-fg-danger: @red;\n --color-border-strong: @surface0;\n\n --header-color: @text;\n /* Used on deprecation confirmation page */\n --wombat-red: @maroon;\n --wombat-red-hover: @red;\n\n --search-fg-muted: @subtext1;\n --search-border: @surface0;\n --search-bg-subtle: @surface0;\n\n &,\n main {\n background-color: @base !important;\n color: @text;\n }\n\n /* Primary background */\n .bg-white,\n ._4ea0e50d {\n background-color: @base;\n }\n\n /* Background layer background */\n .bg-black-05,\n ._7eb68a55,\n .e9998f88 {\n background-color: @mantle;\n }\n\n /* Primary text */\n .black,\n .black-90,\n .black-80,\n a {\n color: @text;\n }\n\n /* Secondary text */\n .black-70,\n .black-60,\n .dim:focus,\n .dim:hover {\n color: @subtext0;\n }\n\n /* Inverse text */\n .white {\n color: @base;\n }\n\n /* Border colors */\n .b--black-10,\n .b--black-20 {\n border-color: @surface0;\n }\n\n /* --- ARBITRARY --- */\n\n /* Top loading bar */\n div.fixed.top-0.left-0.z-999 {\n background-color: @accent;\n }\n\n /* Magnifying glass icon (search box, discover packages) */\n svg g[stroke=\"#777777\"] {\n stroke: @subtext0;\n }\n\n /* \"Beta\" pill */\n .a17280e0 {\n color: @green;\n border-color: @green;\n }\n /* Green checkmark */\n [fill=\"#107010\"] {\n fill: @green;\n }\n\n /* --- HEADER --- */\n [data-test-id=\"notification-banner\"] {\n background-color: if(\n @flavor = latte,\n desaturate(lighten(@green, 30%), 5%),\n desaturate(darken(@green, 5%), 5%)\n );\n border-color: @green;\n\n #notification,\n button[aria-label=\"Close notification\"] {\n color: if(@flavor = latte, @text, @base);\n }\n }\n header {\n border-bottom-color: @surface0;\n\n /* Top bar gradient */\n .e7070742 {\n border-image: @npmGradient 3;\n }\n\n /* Heart icon */\n ._0edb515f {\n color: @text;\n }\n\n /* Logo */\n a[href=\"/\"] > svg > path {\n fill: @text;\n }\n\n /* Search box */\n form#search {\n /* Search button */\n button[type=\"submit\"] {\n background-color: @subtext1;\n }\n\n /* Search input wrapper */\n > div {\n border-color: @surface0;\n\n &:focus-within {\n border-color: @subtext1;\n }\n\n /* Search input */\n div:has(input[type=\"search\"]) {\n background-color: @mantle;\n\n input[type=\"search\"] {\n color: @text;\n\n &:focus {\n box-shadow: none;\n }\n\n &::-webkit-search-cancel-button {\n display: none;\n }\n }\n }\n\n /* Search results (floating box) */\n div.list {\n background-color: @base;\n\n ul[aria-label=\"Search results\"] li {\n border-bottom-color: @surface0;\n\n &:hover {\n background-color: @surface1;\n }\n }\n }\n }\n }\n\n /* Profile picture navigation */\n nav:has(> button[aria-label=\"Profile menu\"]) {\n > button {\n /* Dropdown arrow */\n img[alt=\"avatar\"] {\n border-color: @text;\n\n + div > svg {\n fill: @text;\n }\n }\n }\n\n /* Popup */\n > div > div {\n border-color: @surface0;\n\n /* Popup triangle */\n &::after {\n border-bottom-color: @base;\n }\n &::before {\n border-bottom-color: @surface0;\n }\n\n /* Username */\n h2 {\n border-bottom-color: @surface1;\n\n span {\n color: @text;\n }\n }\n\n /* Navigation options */\n ul li a {\n &:hover,\n &:focus {\n background-color: @crust;\n }\n\n /* Red \"Add Organization\" button */\n &[href=\"/org/create\"] {\n border-color: @surface0;\n color: @accent;\n svg {\n fill: @accent;\n }\n }\n }\n }\n }\n }\n\n /* --- HOME PAGE --- */\n\n ._8c1ee087 {\n background-image:\n linear-gradient(\n 270deg,\n fade(@red, 16%) 0%,\n fade(@red, 56%) 18.45%,\n fade(@red, 80%) 49.67%,\n fade(@red, 56%) 82.52%,\n fade(@red, 19%) 99.7%,\n fade(@red, 0%) 99.71%,\n fade(@red, 0%) 99.72%,\n fade(@red, 16%) 99.73%\n ),\n url(\"https://static-production.npmjs.com/abf53a31b2da4657a1a004ee9358551c.png\");\n\n a[href=\"/signup\"] {\n background-color: @yellow;\n }\n a[href=\"/products/pro\"] {\n background-color: @red;\n border-color: @text;\n }\n }\n article > section:nth-of-type(2) {\n color: @text;\n }\n\n /* Popular libraries section */\n #popular-libraries-header + hr {\n border-color: @accent;\n }\n ul[aria-labelledby=\"popular-libraries-header\"] {\n li a {\n border-bottom-color: @surface0;\n }\n }\n\n /* Discover packages section */\n #discover-packages-header + hr {\n border-color: mix(@red, @yellow);\n }\n ul[aria-labelledby=\"discover-packages-header\"] li {\n a {\n color: @text;\n border-color: @surface0;\n }\n &:nth-of-type(6n+1):hover a {\n color: @mauve;\n border-bottom-color: @mauve;\n }\n &:nth-of-type(6n+2):hover a {\n color: @green;\n border-bottom-color: @green;\n }\n &:nth-of-type(6n+3):hover a {\n color: @sky;\n border-bottom-color: @sky;\n }\n &:nth-of-type(6n+4):hover a {\n color: @red;\n border-bottom-color: @red;\n }\n &:nth-of-type(6n+5):hover a {\n color: @yellow;\n border-bottom-color: @yellow;\n }\n &:nth-of-type(6n+6):hover a {\n color: @pink;\n border-bottom-color: @pink;\n }\n }\n\n /* By the numbers section */\n ._8f26e3fd {\n border-color: @yellow;\n }\n\n /* Recently updated packages section */\n #recently-updated-packages-header + hr {\n border-color: @accent;\n }\n\n /* --- PACKAGE PAGES --- */\n\n /* Deprecation warning */\n .bg-washed-red {\n background-color: fade(@red, 30%);\n\n code {\n background-color: @mantle;\n color: @text;\n }\n }\n .red {\n color: @red !important;\n }\n\n /* \"public\" text */\n ._813b53b2 {\n color: @green;\n }\n /* TypeScript logo */\n img[alt=\"TypeScript icon, indicating that this package has built-in type declarations\"] {\n @svg: escape(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" xml:space=\"preserve\"><path fill=\"@{blue}\" d=\"M0 0h256v256H0z\"/><path d=\"M150.5 200.5v27.6c4.5 2.3 9.8 4 15.9 5.2s12.6 1.7 19.4 1.7c6.6 0 12.9-.6 18.9-1.9s11.2-3.4 15.7-6.3 8-6.7 10.7-11.4q3.9-7.05 3.9-17.4c0-5-.7-9.4-2.2-13.2s-3.7-7.1-6.5-10.1c-2.8-2.9-6.2-5.6-10.1-7.9s-8.4-4.5-13.3-6.6c-3.6-1.5-6.9-2.9-9.8-4.4-2.9-1.4-5.3-2.8-7.3-4.3s-3.6-3-4.7-4.7-1.6-3.5-1.6-5.6q0-2.85 1.5-5.1c1.5-2.25 2.4-2.8 4.1-3.9 1.8-1.1 4-1.9 6.6-2.5s5.5-.9 8.6-.9c2.3 0 4.7.2 7.3.5s5.1.9 7.7 1.6 5.1 1.6 7.6 2.7c2.4 1.1 4.7 2.4 6.8 3.8v-25.8q-6.3-2.4-13.8-3.6c-7.5-1.2-10.7-1.2-17.1-1.2-6.6 0-12.8.7-18.7 2.1s-11 3.6-15.5 6.6-8 6.8-10.6 11.4-3.9 10.2-3.9 16.6c0 8.2 2.4 15.2 7.1 21.1 4.8 5.8 12 10.7 21.6 14.8 3.8 1.6 7.3 3.1 10.6 4.6s6.1 3 8.5 4.7 4.3 3.4 5.7 5.3 2.1 4.1 2.1 6.5c0 1.8-.4 3.4-1.3 5-.9 1.5-2.2 2.8-3.9 4s-3.9 2-6.6 2.6-5.7.9-9.2.9c-6 0-11.9-1.1-17.8-3.2-5.9-2-11.4-5.1-16.4-9.3m-46-68.8H140V109H41v22.7h35.3V233h28.1V131.7z\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"@{base}\"/></svg>'\n );\n content: url(\"data:image/svg+xml,@{svg}\");\n }\n /* DefinitelyTyped logo */\n img[alt=\"DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/bootstrap package\"] {\n @svg: escape(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" xml:space=\"preserve\"><path fill=\"@{blue}\" d=\"M0 0h256v256H0z\"/><path fill=\"@{base}\" d=\"M6 6h244v244H6z\"/><path fill=\"@{blue}\" d=\"M41.8 111.5c8.6-1.6 19.9-2.5 31.8-2.5 19.7 0 32.6 4.2 42.6 13 10.8 9.4 17.6 24.5 17.6 46 0 23.4-7.3 39.5-17.3 49.5-11 10.7-27.6 15.8-48 15.8-12.2 0-20.8-.9-26.7-1.8zm23.6 99.7c2 .5 5.2.5 8.2.5 21.3.2 35.2-13.6 35.2-42.7.2-25.4-12.5-38.8-32.7-38.8-5.2 0-8.6.5-10.6 1.1v79.9zm104-76.5h-32.2v-22.8h92.3v22.8h-32.8V232h-27.3z\"/></svg>'\n );\n content: url(\"data:image/svg+xml,@{svg}\");\n }\n /* Navigation tabs */\n #package-tab(@color) {\n border-color: @color;\n\n &:has(> a[aria-selected=\"false\"]):hover,\n &:has(> a[aria-selected=\"true\"]) {\n background-color: fade(@color, 20%);\n }\n\n a {\n color: @color;\n }\n }\n ul[aria-owns*=\"package-tab-\"] {\n li {\n &:has(#package-tab-readme),\n &:has(#package-tab-members) {\n #package-tab(@yellow);\n }\n &:has(#package-tab-code),\n &:has(#package-tab-admin),\n &:has(#package-tab-packages) {\n #package-tab(@red);\n }\n &:has(#package-tab-dependents),\n &:has(#package-tab-billing) {\n #package-tab(@mauve);\n }\n &:has(#package-tab-dependencies) {\n #package-tab(@pink);\n }\n &:has(#package-tab-versions) {\n #package-tab(@sapphire);\n }\n &:has(#package-tab-orgs),\n &:has(#package-tab-teams) {\n #package-tab(@green);\n }\n }\n }\n\n /* Sidebar icons */\n svg:has(+ p > [aria-label=\"Copy install command line\"]),\n button[aria-label=\"Copy install command line\"] svg path,\n [aria-labelledby=\"repository repository-link\"] svg g,\n [aria-labelledby=\"homePage homePage-link\"] svg path,\n [aria-label=\"Showing weekly downloads\"] svg {\n fill: @text;\n }\n /* Copy install command box */\n p:has(button[aria-label=\"Copy install command line\"]) {\n border-color: @surface0;\n }\n /* Weekly downloads chart */\n div:has(> svg > [class^=\"sparkline--\"]) {\n border-bottom-color: fade(@accent, 20%);\n\n svg {\n stroke: @accent;\n fill: fade(@accent, 20%);\n }\n }\n\n /* Sidebar provenance popup */\n button[aria-label=\"View more provenance details\"] {\n + div > div > div {\n background-color: @base;\n border-color: @surface0;\n\n &::after {\n border-bottom-color: @base;\n }\n\n &::before {\n border-bottom-color: @surface0;\n }\n\n > div {\n div:nth-of-type(2) {\n border-color: @surface0;\n }\n }\n }\n }\n ._1e07caeb {\n color: @text;\n }\n ._9666fddd,\n ._861fb12a,\n ._2160593e {\n color: @subtext0;\n }\n /* Provenance icon */\n .f97c6116 {\n fill: @green;\n }\n /* Provenance section at bottom */\n #provenance-details-header + div {\n border-color: @surface0;\n }\n\n /* Sidebar text */\n .c84e15be {\n color: @subtext0;\n }\n\n /* Tab headings */\n\n [id^=\"tabpanel-\"] h2 {\n color: @text;\n }\n\n /* File explorer tab */\n #tabpanel-explore > div > div {\n border-color: @surface0;\n\n > div:has(h2),\n div:has(+ pre) {\n border-bottom-color: @surface0;\n }\n\n /* Back button inside file */\n ._450b46e9 {\n @svg: escape(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 125\" fill=\"@{text}\"><path d=\"M50.4 74.7 23.7 50l26.7-24.7-5.4-5.9L11.9 50 45 80.6z\"/><path d=\"M82.6 19.4 49.6 50l33 30.6 5.5-5.9L61.4 50l26.7-24.7z\"/></svg>'\n );\n content: url(\"data:image/svg+xml,@{svg}\");\n }\n\n ul li {\n border-bottom-color: @surface0;\n\n &:hover {\n background-color: @surface0;\n }\n\n img {\n @folder: escape(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 98 122.5\" fill=\"@{subtext0}\"><path d=\"M37.9 18.4H13v61.2h72V25H49zM79 73.6H19V44h60zM79 38H19V24.4h17.2L47.3 31H79z\"/></svg>'\n );\n @file: escape(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 125\" fill=\"@{subtext0}\"><path d=\"M82.2 10.7H38.7l-20.9 19v59.6h64.4zm-44.6 6.4v11.2H25.3zm40.6 68.2H21.8v-53h19.8V14.7h36.6z\"/><path d=\"M34.3 44.7h31.4v4H34.3zm0 13.2h31.4v4H34.3zm0 13.1h31.4v4H34.3z\"/></svg>'\n );\n &._1528cda6 {\n content: url(\"data:image/svg+xml,@{folder}\");\n }\n &._7ec1ed32 {\n content: url(\"data:image/svg+xml,@{file}\");\n }\n }\n }\n\n /* File paths/link */\n button,\n /* Loading spinner */\n svg:has(> circle) {\n color: @text !important;\n }\n\n div:has(+ pre) {\n background-color: @mantle;\n }\n pre {\n background-color: @base !important;\n color: @text !important;\n\n .react-syntax-highlighter-line-number {\n color: @subtext1 !important;\n }\n\n [style=\"color: rgb(102, 102, 102);\"] {\n color: var(--color-prettylights-syntax-comment) !important;\n }\n [style=\"color: rgb(150, 152, 150);\"] {\n color: @overlay0 !important;\n }\n [style=\"color: rgb(0, 92, 197);\"] {\n color: var(--color-prettylights-syntax-constant) !important;\n }\n [style=\"color: rgb(215, 58, 73);\"],\n [style=\"color: rgb(0, 134, 179);\"] {\n color: var(--color-prettylights-syntax-keyword) !important;\n }\n [style=\"color: rgb(3, 47, 98);\"] {\n color: var(--color-prettylights-syntax-string) !important;\n }\n [style=\"color: rgb(111, 66, 193);\"] {\n color: var(--color-prettylights-syntax-entity) !important;\n }\n [style*=\"color: rgb(223, 80, 0);\"] {\n color: @peach !important;\n }\n [style*=\"color: rgb(99, 163, 92);\"] {\n color: @green !important;\n }\n\n .hljs-subst,\n .hljs-built_in {\n color: var(--color-prettylights-syntax-storage-modifier-import)\n !important;\n }\n }\n }\n\n /* Versions tab */\n #tabpanel-versions {\n ul li[class] div {\n border-bottom-color: @surface0;\n }\n }\n\n /* Dependencies/dependents tab */\n #tabpanel-dependencies,\n #tabpanel-dependents {\n ul a {\n color: @accent;\n\n &:hover {\n color: @text;\n }\n }\n }\n\n /* Readme tab */\n #tabpanel-readme #readme {\n color: @text;\n a {\n color: @accent;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: @text;\n a,\n svg {\n color: @text;\n fill: @text;\n }\n }\n p,\n li {\n color: @subtext0;\n }\n strong {\n color: @text;\n }\n pre,\n code {\n background-color: @mantle;\n color: @text;\n }\n pre.editor.editor-colors {\n .keyword,\n .storage.type {\n color: var(--color-prettylights-syntax-keyword);\n font-weight: normal; // stylelint-disable-line property-disallowed-list\n }\n .string {\n color: var(--color-prettylights-syntax-string);\n }\n .variable {\n color: var(--color-prettylights-syntax-variable);\n }\n .entity,\n .function {\n color: var(--color-prettylights-syntax-entity);\n }\n .comment {\n color: var(--color-prettylights-syntax-comment);\n }\n .storage.type.function {\n color: var(--color-prettylights-syntax-keyword);\n }\n .punctuation.definition:not(.string) {\n color: @text;\n }\n .constant {\n color: var(--color-prettylights-syntax-constant);\n }\n }\n h1,\n h2 {\n border-bottom-color: @surface1;\n }\n h4 {\n border-bottom-color: @surface0;\n }\n blockquote {\n background-color: lighten(@surface0, 2%);\n border-left-color: @surface2;\n }\n table {\n color: @text;\n border-bottom-style: none;\n td,\n th {\n background-color: @base;\n border-color: @surface0;\n }\n }\n }\n\n /* Keyword links */\n #user-content-keywords {\n color: @text;\n\n + ul a {\n color: @accent;\n\n &:hover {\n color: @text;\n }\n }\n }\n /* Share provenance feedback link */\n #user-content-provenance a[href=\" https://github.com/npm/feedback\"] {\n color: @text;\n }\n\n /* Settings */\n div[role=\"listitem\"],\n div[role=\"radiogroup\"] {\n background: @base;\n }\n\n /* --- PROFILE PAGES --- */\n\n .eaac77a6 {\n color: @surface2;\n }\n ._34da67ba {\n @svg: escape(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14.48 16.27\"><path fill=\"@{overlay2}\" d=\"M5.16 16.27v-2.4c-.31 0-.6.08-.89.1a2.61 2.61 0 0 1-2.77-1.66 2.65 2.65 0 0 0-1.14-1.42 1.2 1.2 0 0 1-.3-.26c-.06-.13-.06-.24.09-.28a1.5 1.5 0 0 1 .42 0 2 2 0 0 1 1.51 1 2.21 2.21 0 0 0 3 .93c.06 0 .15-.09.16-.14a2.5 2.5 0 0 1 .63-1.32c-.51-.11-1-.19-1.48-.32a4.13 4.13 0 0 1-2.83-2.15A6 6 0 0 1 1 6.08a4.27 4.27 0 0 1 1-3.16.37.37 0 0 0 0-.25A3.83 3.83 0 0 1 2 .52c.15-.55.2-.58.76-.47A6.7 6.7 0 0 1 4.92 1a.45.45 0 0 0 .34.07 9.7 9.7 0 0 1 5 0 .52.52 0 0 0 .33-.07c.49-.24 1-.54 1.46-.74A4.4 4.4 0 0 1 13.13 0a.27.27 0 0 1 .2.13 3.87 3.87 0 0 1 .15 2.4.44.44 0 0 0 .11.46 3.8 3.8 0 0 1 .75 1.5 6 6 0 0 1 0 2.38 4 4 0 0 1-2.19 3.2 6.7 6.7 0 0 1-1.23.46c-.41.11-.85.17-1.29.26a2.74 2.74 0 0 1 .67 2v3.41Z\"/></svg>'\n );\n background-image: url(\"data:image/svg+xml,@{svg}\");\n }\n ._69ab2ca0 {\n border-color: @surface0;\n background-color: @mantle;\n }\n\n /* --- SETTINGS PAGES --- */\n\n /* Headings */\n ._7fb5e603 h1 {\n color: @text;\n }\n\n /* Left panel */\n aside.e9998f88 {\n box-shadow: none;\n\n ul.c63ae7fc li:hover {\n background-color: @crust;\n }\n\n /* Create organization button */\n #organizationsHeader + a[href=\"/org/create\"] {\n color: @green;\n border-color: @green;\n\n &:hover {\n color: @mantle;\n background-color: @green;\n }\n }\n }\n\n /* Linked accounts & recovery option settings */\n .b49405c7 {\n color: @text;\n }\n\n /* Email and password settings */\n p:has(\n + div\n > a[href^=\"/settings/\"][href$=\"/email\"]\n + a[href^=\"/settings/\"][href$=\"/password\"]\n ),\n /* Delete account */\n p:has(+ a[href^=\"/settings/\"][href$=\"/delete-account\"]) {\n color: @text;\n }\n\n /* Access tokens settings */\n form#tokens {\n table {\n td {\n span {\n color: @subtext1;\n\n &:hover {\n color: @text;\n }\n }\n code {\n color: @subtext0;\n }\n }\n + div {\n color: @text;\n }\n }\n }\n ._305a9f55 ._038c0473 {\n border-color: @accent;\n background-color: fade(@accent, 20%);\n }\n button[aria-label^=\"Delete token ending in\"] {\n ._305a9f55 ._038c0473 & {\n border-color: @surface2;\n }\n &.b55db0e2:hover {\n border-color: @red;\n background-color: @red;\n color: @base;\n }\n }\n\n /* 2FA authentication page */\n ._75ce47e7 {\n background-color: @base;\n\n ._71252860,\n .d7eb966d {\n color: @text;\n }\n\n [fill=\"#65C6C9\"],\n [fill=\"url(#paint1_linear_449_428)\"],\n [fill=\"url(#paint0_linear_110_3043)\"] {\n fill: @blue;\n }\n [fill=\"url(#paint2_linear_449_428)\"],\n [fill=\"url(#paint1_linear_110_3043)\"] {\n fill: @base;\n }\n\n &::before {\n background-image: @npmGradient;\n }\n }\n ._320f7a67 {\n background-color: @base;\n\n &::before {\n background-image: @npmGradient;\n }\n\n section {\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);\n }\n\n div[role=\"radiogroup\"] {\n color: @text;\n background-color: @surface0;\n }\n\n #gat-banner span {\n color: @yellow;\n }\n }\n\n /* Create organization page */\n .acb78000::before {\n background-image: @npmGradient;\n }\n /* Step 1: create an org */\n .e99f3f5d {\n color: @green;\n }\n img[src=\"https://static-production.npmjs.com/28dd82ec6e5fe3cfbb4d2c4ec492076b.svg\"] {\n @svg: escape(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 38.36 38.36\"><circle cx=\"19.18\" cy=\"19.18\" r=\"18.53\" fill=\"none\" stroke=\"@{green}\" stroke-miterlimit=\"10\" stroke-width=\"1.3\"/><path d=\"M25.63 26.84h-4.46a.37.37 0 0 1-.37-.36v-6h-3v6a.36.36 0 0 1-.36.36h-4.51a.94.94 0 0 1-.93-.94V19a1.6 1.6 0 0 1-.38 0 .89.89 0 0 1-.74-.31A1.31 1.31 0 0 1 11 16.9l7.42-6.42a1.28 1.28 0 0 1 1.58-.05.2.2 0 0 1 .09.05l7.42 6.42a1.31 1.31 0 0 1 .14 1.82.86.86 0 0 1-.74.31 1.5 1.5 0 0 1-.37 0v6.87a.94.94 0 0 1-.91.94\" fill=\"@{green}\"/></svg>'\n );\n content: url(\"data:image/svg+xml,@{svg}\");\n }\n /* Step 2: invite members */\n img[src=\"https://static-production.npmjs.com/d6654c911c7cf2159948148754c95bb6.svg\"] {\n @svg: escape(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 38.36 38.36\"><circle cx=\"19.18\" cy=\"19.18\" r=\"18.53\" fill=\"none\" stroke=\"@{surface2}\" stroke-miterlimit=\"10\" stroke-width=\"1.3\"/><path d=\"M25.67 20.87a4.95 4.95 0 1 0 4.94 4.94 5 5 0 0 0-4.94-4.94m0 9a4 4 0 1 1 4-4.05 4.06 4.06 0 0 1-4 4.04Z\" fill=\"@{text}\"/><path d=\"M28.2 25.41h-2v-2a.45.45 0 0 0-.9 0v2h-2a.45.45 0 0 0 0 .9h2v2a.45.45 0 0 0 .9 0v-2h2a.45.45 0 0 0 0-.9m-7.12-8.58A5 5 0 0 1 19.9 19a.48.48 0 0 0-.13.32v.86a.7.7 0 0 0 0 .14c.17.54.37.66 1.28 1.14a.45.45 0 0 0 .61-.19.44.44 0 0 0-.19-.6c-.69-.37-.77-.41-.82-.56v-.61a5.9 5.9 0 0 0 1.23-2.26 1.82 1.82 0 0 0 .33-2.44V13c0-2.41-1.5-3.8-4.11-3.8S14 10.62 14 13v1.78a1.8 1.8 0 0 0-.3 1.29 1.84 1.84 0 0 0 .63 1.15 5.9 5.9 0 0 0 1.23 2.26v.59c-.14.24-1 1-5.8 2.87a1.07 1.07 0 0 0-.68 1v2.15a1.07 1.07 0 0 0 1.06 1.07h9.23a.45.45 0 0 0 0-.9h-9.23a.17.17 0 0 1-.16-.17v-2.16a.15.15 0 0 1 .1-.15c5.28-2 6.18-2.9 6.36-3.49a.3.3 0 0 0 0-.13v-.86a.44.44 0 0 0-.13-.32 5.1 5.1 0 0 1-1.18-2.15.44.44 0 0 0-.17-.25.93.93 0 0 1-.18-1.36.5.5 0 0 0 .1-.29V13c0-1.87 1.14-2.9 3.22-2.9s3.21 1 3.21 2.9v1.93a.46.46 0 0 0 .11.29 1 1 0 0 1 .21.73.94.94 0 0 1-.39.63.45.45 0 0 0-.16.25\" fill=\"@{text}\"/></svg>'\n );\n content: url(\"data:image/svg+xml,@{svg}\");\n }\n div:has(> form[action=\"/org/create\"]) {\n color: @text;\n\n &,\n + div {\n border-color: @surface0;\n }\n }\n\n /* Billing information page */\n .bg-washed-green {\n background-color: fade(\n lighten(@teal, 10%),\n if(@flavor = latte, 50%, 100%)\n );\n }\n .b--light-green {\n border-color: @teal;\n }\n\n /* Pricing page */\n\n .dark-gray {\n color: @text !important;\n }\n\n .light-silver {\n color: @subtext1;\n }\n\n .npm-red {\n color: @accent;\n }\n\n .a11y-light-gray,\n .bg-gray {\n background-color: @subtext0 !important;\n }\n\n .bg-dark-gray {\n background-color: @text;\n }\n\n .bg-light-gray,\n .bg-near-white {\n background-color: @surface0 !important;\n }\n\n .npm-bg-hero,\n .npm-bg-teams {\n background: none;\n\n > .white {\n color: @text;\n }\n }\n\n .npm-bg-gradient {\n background-image: @npmGradient;\n }\n\n .npm-rainbow-circle {\n background-image:\n linear-gradient(@crust, @crust),\n @npmGradient;\n }\n\n .npm-btn-red {\n background-color: @red;\n border-bottom-color: @yellow;\n }\n\n a[href=\"/products/teams\"].npm-title {\n background-color: @red;\n color: @crust;\n border-color: @text;\n }\n\n ul.featureComparisonList img[alt=\"feature included\"] {\n filter: @red-filter;\n }\n\n /* --- GENERIC --- */\n\n /* Buttons/button links */\n ._24a1e9c7 {\n background-image: none;\n background-color: @surface0;\n color: @text;\n border-color: @surface1;\n\n &:not([disabled]):hover {\n background-color: @surface1;\n }\n\n &[disabled] {\n background-color: @mantle;\n color: @subtext0;\n }\n\n /* Danger */\n &._4a3f8f21 {\n & when (@flavor = latte) {\n background-color: lighten(@red, 30%);\n\n &:hover {\n background-color: lighten(@red, 25%);\n }\n }\n\n & when not(@flavor = latte) {\n background-color: @red;\n color: @surface1;\n\n &:hover {\n background-color: lighten(@red, 5%);\n }\n }\n }\n\n /* Success */\n &.c37751f6 {\n & when (@flavor = latte) {\n background-color: lighten(@green, 30%);\n\n &:hover {\n background-color: lighten(@green, 25%);\n }\n }\n\n & when not(@flavor = latte) {\n background-color: @green;\n color: @surface1;\n\n &:hover {\n background-color: lighten(@green, 5%);\n }\n }\n }\n }\n\n /* Signup form */\n #signup {\n /* Logged out signup button in header */\n &[href=\"/signup\"] {\n border-color: @surface0;\n }\n\n #signup_email_error_message,\n #signup_password_error_message {\n color: @red;\n }\n\n fieldset {\n color: @text;\n }\n }\n\n button[name=\"show-hide-password\"] {\n background-color: transparent;\n color: @text;\n\n &:hover {\n background-color: @mantle;\n }\n\n &::before {\n background-color: @surface0;\n }\n }\n\n /* Dropdowns */\n details ul[class*=\"Dropdown__DropdownMenu\"] {\n background-color: @base;\n border-color: @surface0;\n\n li a:hover {\n background-color: @mantle !important;\n color: @text !important;\n }\n }\n /* Select menus */\n select {\n background-color: @surface0;\n border-color: @surface2;\n color: @text;\n }\n\n /* --- SEARCH RESULTS --- */\n nav[aria-label=\"Pagination Navigation\"] {\n div > a {\n background-color: @base;\n border-color: @surface0;\n\n &:hover {\n background-color: @mantle;\n }\n }\n }\n #pkg-list-exact-match {\n color: @base;\n background-color: @accent;\n }\n\n /* Username links */\n a[aria-label^=\"publisher\"]:hover {\n color: @accent;\n }\n\n /* --- FOOTER --- */\n\n footer {\n h3 {\n color: @text;\n }\n ul a:hover {\n color: @accent;\n }\n a[href=\"https://github.com/npm\"] svg {\n > polygon {\n fill: @base;\n }\n\n > rect {\n fill: @text;\n }\n }\n a[href=\"https://github.com\"] svg {\n fill: @text;\n }\n &::after {\n background-image: @npmGradient;\n }\n }\n\n --color-prettylights-syntax-comment: @overlay2;\n --color-prettylights-syntax-constant: @teal;\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: @mauve;\n --color-prettylights-syntax-string: @green;\n --color-prettylights-syntax-variable: @peach;\n --color-prettylights-syntax-invalid-illegal-text: @red;\n --color-prettylights-syntax-invalid-illegal-bg: fade(@red, 15%);\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: fade(@red, 40%);\n --color-prettylights-syntax-markup-inserted-text: @text;\n --color-prettylights-syntax-markup-inserted-bg: fade(@green, 40%);\n --color-prettylights-syntax-markup-changed-text: @text;\n --color-prettylights-syntax-markup-changed-bg: fade(@yellow, 40%);\n --color-prettylights-syntax-markup-ignored-text: @text;\n\n /* stylelint-disable declaration-block-single-line-max-declarations */\n /* deno-fmt-ignore */\n div.highlight pre {.pl-mb,.pl-mdr,.pl-c{color:var(--color-prettylights-syntax-comment)}.pl-c1,.pl-s .pl-v{color:var(--color-prettylights-syntax-constant)}.pl-e,.pl-en{color:var(--color-prettylights-syntax-entity)}.pl-s .pl-s1,.pl-smi{color:var(--color-prettylights-syntax-storage-modifier-import)}.pl-ent{color:var(--color-prettylights-syntax-entity-tag)}.pl-k{color:var(--color-prettylights-syntax-keyword)}.pl-pds,.pl-s,.pl-s .pl-pse .pl-s1,.pl-sr,.pl-sr .pl-cce,.pl-sr .pl-sra,.pl-sr .pl-sre{color:var(--color-prettylights-syntax-string)}.pl-smw,.pl-v{color:var(--color-prettylights-syntax-variable)}.pl-bu{color:var(--color-prettylights-syntax-brackethighlighter-unmatched)}.pl-ii{color:var(--color-prettylights-syntax-invalid-illegal-text);background-color:var(--color-prettylights-syntax-invalid-illegal-bg)}.pl-c2{color:var(--color-prettylights-syntax-carriage-return-text);background-color:var(--color-prettylights-syntax-carriage-return-bg)}.pl-sr .pl-cce{color:var(--color-prettylights-syntax-string-regexp)}.pl-ml{color:var(--color-prettylights-syntax-markup-list)}.pl-mh,.pl-mh .pl-en,.pl-ms{color:var(--color-prettylights-syntax-markup-heading)}.pl-mi{color:var(--color-prettylights-syntax-markup-italic)}.pl-mb{color:var(--color-prettylights-syntax-markup-bold)}.pl-md{color:var(--color-prettylights-syntax-markup-deleted-text);background-color:var(--color-prettylights-syntax-markup-deleted-bg)}.pl-mi1{color:var(--color-prettylights-syntax-markup-inserted-text);background-color:var(--color-prettylights-syntax-markup-inserted-bg)}.pl-mc{color:var(--color-prettylights-syntax-markup-changed-text);background-color:var(--color-prettylights-syntax-markup-changed-bg)}.pl-mi2{color:var(--color-prettylights-syntax-markup-ignored-text);background-color:var(--color-prettylights-syntax-markup-ignored-bg)}.pl-mdr{color:var(--color-prettylights-syntax-meta-diff-range)}.pl-ba{color:var(--color-prettylights-syntax-brackethighlighter-angle)}.pl-sg{color:var(--color-prettylights-syntax-sublimelinter-gutter-mark)}.pl-corl{text-decoration:underline;color:var(--color-prettylights-syntax-constant-other-reference-link)}}\n /* stylelint-enable declaration-block-single-line-max-declarations */\n }\n}\n",
"description": "Soothing pastel theme for npm",
"homepageUrl": "https://github.com/catppuccin/userstyles/tree/main/styles/npm",
"upstreamUrl": "https://github.com/catppuccin/userstyles/raw/main/styles/npm/catppuccin.user.less"
}did:plc:rkm6m4dsc4da2yzdlvxorhf3 | at://did:plc:rkm6m4dsc4da2yzdlvxorhf3/club.userstyles.alpha.userstyle/3mo736r25u327