diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index 57c1872f88..a0f1d2b483 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -75,6 +75,7 @@ collaborators: - &koibtw koibtw - &TheAnonymousCrusher TheAnonymousCrusher - &42willow 42willow + - &Jazzmedo Jazzmedo userstyles: advent-of-code: @@ -600,6 +601,13 @@ userstyles: icon: mdnwebdocs color: text current-maintainers: [*soya-daizu] + medium: + name: Medium + link: https://medium.com + categories: [blogging, social_networking] + icon: medium + color: mauve + current-maintainers: [*Jazzmedo] modrinth: name: Modrinth link: https://modrinth.com diff --git a/styles/medium/README.md b/styles/medium/README.md new file mode 100644 index 0000000000..967281508d --- /dev/null +++ b/styles/medium/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Medium + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## Current Maintainer +- [7anafi](https://github.com/Jazzmedo) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/medium/catppuccin.user.less b/styles/medium/catppuccin.user.less new file mode 100644 index 0000000000..9a2f3ff4a6 --- /dev/null +++ b/styles/medium/catppuccin.user.less @@ -0,0 +1,377 @@ +/* ==UserStyle== +@name Medium Catppuccin +@namespace github.com/catppuccin/userstyles/styles/medium +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/medium +@version 1.0.0 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/medium/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amedium +@description Soothing pastel theme for Medium +@author JazzMedo (https://github.com/Jazzmedo) +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("medium.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @accent: @@accentColor; + + /* Force base background on structural containers + wildcard divs so the + page is uniform (Medium has many nested wrapper divs of varying tints). */ + html, body, #root, main, article, section, aside, nav, header, footer, + div, ul, ol, li, form, figure { + background-color: @base !important; + border-color: @surface0 !important; + } + + /* Default text colors */ + body, p, span, li, td, th, label, figcaption, div { + color: @text !important; + } + + /* Headings */ + h2, h3, h4, h5, h6 { + color: @text !important; + } + h1, article h1, h1[class*="title"] { + color: @accent !important; + } + + article h2, article h3, + a[data-action="open-post"] h2, + a[data-action="open-post"] h3 { + color: @text !important; + } + + /* Subtitles / muted text */ + h4, h5, h6, + small, time, + [class*="subtitle"], [class*="Subtitle"], + [class*="meta"], [class*="Meta"], + [data-testid*="storyPublishDate"], + [data-testid*="authorName"] { + color: @subtext0 !important; + } + + /* Top nav */ + nav, header, [role="banner"] { + background-color: @mantle !important; + border-bottom: 1px solid @surface0 !important; + } + + /* Medium logo — force accent color on the SVG and all its paths */ + a[href="/"] svg, + a[aria-label="Homepage"] svg, + a[data-testid="headerMediumLogo"] svg, + svg[class*="logo"], + svg[aria-label*="Medium"] { + fill: @accent !important; + color: @accent !important; + } + a[href="/"] svg *, + a[aria-label="Homepage"] svg *, + a[data-testid="headerMediumLogo"] svg *, + svg[class*="logo"] *, + svg[aria-label*="Medium"] * { + fill: @accent !important; + stroke: @accent !important; + } + + /* Images: never let our wildcard background cover them */ + img, picture, video, canvas { + background-color: transparent !important; + background-image: unset; + } + + /* Hide the overlay sibling Medium puts after every avatar . + DOM:
+ Our wildcard paints that sibling with base color, covering the image behind it. */ + img[src*="miro.medium.com"] + div, + img[src*="cdn-images-1.medium.com"] + div { + display: none !important; + } + + /* Avatar containers */ + [class*="avatar"], [class*="Avatar"], + div[role="img"], + img[alt*="user"], img[alt*="User"], + img[src*="miro.medium.com/v2/resize:fill"], + a[href*="/@"] img, + a[href*="/@"] > div { + background-color: transparent !important; + } + a[href*="/@"] img, + [class*="avatar"] img, + [class*="Avatar"] img { + visibility: visible !important; + opacity: 1 !important; + } + + /* Search bar */ + input[type="search"], input[placeholder*="Search"] { + background-color: @surface0 !important; + color: @text !important; + border: 1px solid @surface1 !important; + } + + /* Top membership/announcement banner — kill the white strip */ + [class*="meterBanner"], + [class*="MeterBanner"], + [class*="paywall"], + [class*="Paywall"], + [data-testid*="meterBanner"], + div[aria-label*="member"], + div[role="banner"] + div, + body > div > div:first-child:not([id]) { + background-color: @mantle !important; + color: @text !important; + border-color: @surface0 !important; + } + + /* Left sidebar */ + aside, [class*="sidebar"], [class*="Sidebar"] { + background-color: @base !important; + border-right: 1px solid @surface0 !important; + } + + aside a, aside button, aside [role="link"] { + background-color: transparent !important; + color: @subtext0 !important; + } + aside a:hover, aside button:hover { + background-color: @surface0 !important; + color: @text !important; + } + aside a[aria-current="page"], + aside [aria-selected="true"], + aside a[class*="active"] { + background-color: @surface0 !important; + color: @accent !important; + } + + /* Tabs strip ("For you" / "Featured") */ + [role="tablist"] { + background-color: @base !important; + border-bottom: 1px solid @surface0 !important; + } + [role="tab"] { + background-color: transparent !important; + color: @subtext0 !important; + border-color: transparent !important; + } + [role="tab"][aria-selected="true"], + [role="tab"][tabindex="0"] { + color: @text !important; + border-bottom: 2px solid @accent !important; + } + + /* Right rail: trending, recommended topics, who to follow */ + aside [class*="Trending"], + aside [class*="trending"], + [aria-label*="Trending"] { + background-color: @base !important; + } + + /* Topic pills / tags */ + a[href*="/tag/"], + a[href*="/t/"], + [class*="Tag"], [class*="tag"], + [class*="chip"], [class*="Chip"], + [class*="Pill"] { + background-color: @surface0 !important; + color: @subtext1 !important; + border: 1px solid @surface1 !important; + border-radius: 999px !important; + } + a[href*="/tag/"]:hover, + [class*="Tag"]:hover { + background-color: @surface1 !important; + color: @text !important; + } + + /* Links inside articles / titles */ + a { + color: @text !important; + } + article a, p a, [class*="paragraph"] a { + color: @blue !important; + text-decoration-color: @overlay0 !important; + } + article a:hover, p a:hover { + color: @lavender !important; + } + + [aria-label*="Trending"] a, + [class*="trending"] a { + color: @text !important; + } + [aria-label*="Trending"] a:hover { + color: @accent !important; + } + + /* Cards (popovers, dialogs, menus) */ + [role="dialog"], [role="menu"], [role="listbox"], + [class*="Popover"], [class*="popover"], + [class*="Tooltip"], [class*="tooltip"], + [class*="Dropdown"], [class*="dropdown"] { + background-color: @mantle !important; + border: 1px solid @surface0 !important; + color: @text !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; + } + + /* Backdrop / scrim — semi-transparent so content shows through */ + [class*="overlay"], [class*="Overlay"], + [class*="backdrop"], [class*="Backdrop"], + [class*="scrim"], [class*="Scrim"], + div[role="presentation"] { + background-color: fade(@crust, 55%) !important; + backdrop-filter: blur(2px); + } + + /* Blockquotes */ + blockquote { + border-left: 4px solid @accent !important; + background-color: @mantle !important; + color: @subtext1 !important; + padding: 12px 16px !important; + } + + /* Inline code */ + code, kbd, samp { + background-color: @surface0 !important; + color: @peach !important; + border-radius: 4px; + padding: 2px 5px; + font-family: ui-monospace, "JetBrains Mono", "Fira Code", monospace !important; + } + + /* Code blocks */ + pre, pre > code, + [class*="graf--pre"], [class*="codeBlock"] { + background-color: @crust !important; + color: @green !important; + border: 1px solid @surface0 !important; + border-radius: 6px !important; + } + + /* Highlighted text */ + mark, .markup--quote { + background-color: @yellow !important; + color: @crust !important; + } + + /* Form fields */ + input, textarea, select { + background-color: @surface0 !important; + color: @text !important; + border: 1px solid @surface1 !important; + } + input::placeholder, textarea::placeholder { + color: @overlay0 !important; + } + + /* Buttons */ + button, a[role="button"], div[role="button"] { + color: @text !important; + } + button:hover, a[role="button"]:hover, div[role="button"]:hover { + background-color: @surface1 !important; + } + + /* Primary CTAs */ + button[class*="Follow"], + button[data-testid*="follow"], + a[href*="/membership"], + a[href*="plans"] { + background-color: @green !important; + color: @crust !important; + border: none !important; + font-weight: 600 !important; + } + + /* Icon-only buttons (clap, response, bookmark, more) */ + button[aria-label*="clap"], + button[aria-label*="Clap"], + button[aria-label*="response"], + button[aria-label*="Response"], + button[aria-label*="Save"], + button[aria-label*="More"] { + background-color: transparent !important; + border: none !important; + color: @subtext0 !important; + } + button[aria-label*="clap"]:hover, + button[aria-label*="response"]:hover, + button[aria-label*="Save"]:hover, + button[aria-label*="More"]:hover { + color: @accent !important; + background-color: @surface0 !important; + } + + /* Dividers */ + hr, [class*="divider"], [class*="Divider"] { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + + /* Tone non-avatar images down slightly on dark bg */ + img:not([alt*="avatar"]):not([alt*="Avatar"]):not([class*="avatar"]) { + filter: brightness(0.92); + } + + /* Scrollbar */ + ::-webkit-scrollbar { + width: 12px; + height: 12px; + } + ::-webkit-scrollbar-track { + background: @mantle; + } + ::-webkit-scrollbar-thumb { + background: @surface1; + border-radius: 6px; + border: 2px solid @mantle; + } + ::-webkit-scrollbar-thumb:hover { + background: @surface2; + } + + /* Selection */ + ::selection { + background-color: @accent !important; + color: @crust !important; + } + + /* Notifications badge */ + [class*="notification"][class*="badge"], + [aria-label*="notifications"] span { + background-color: @green !important; + color: @crust !important; + } + + /* Latte-specific tweaks: light flavor needs slightly different image handling */ + & when (@flavor = latte) { + img:not([alt*="avatar"]):not([alt*="Avatar"]):not([class*="avatar"]) { + filter: none; + } + } + } +}