diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less index e3566bb7e7..990d144380 100644 --- a/styles/crates.io/catppuccin.user.less +++ b/styles/crates.io/catppuccin.user.less @@ -102,6 +102,8 @@ input, textarea { + background-color: var(--csstools-light-dark-toggle--66); + border-color: @surface0; &::placeholder { color: @subtext0 !important; } @@ -122,61 +124,78 @@ --link-color: @accent; --link-hover-color: darken(@accent, 5%); --footer-header-color: @text; + --disabled-text-color: @surface2; /* Main article/readme background */ - --csstools-light-dark-toggle--63: @base; - + --csstools-light-dark-toggle--125: @base; + /* Inline code background */ - --csstools-light-dark-toggle--92: @mantle; + --csstools-light-dark-toggle--76: @mantle !important; /* Code block background */ - --csstools-light-dark-toggle--91: @mantle; + --csstools-light-dark-toggle--75: @mantle !important; /* Copyable text hover */ - --csstools-light-dark-toggle--78: @base; - + --csstools-light-dark-toggle--53: @base; + /* Versions cards */ - --csstools-light-dark-toggle--111: @text; - --csstools-light-dark-toggle--113: @base; - --csstools-light-dark-toggle--114: fade(@green, 15%); - --csstools-light-dark-toggle--117: fade(@yellow, 15%); - --csstools-light-dark-toggle--109: @surface0; - --csstools-light-dark-toggle--110: @surface0; - --csstools-light-dark-toggle--115: @surface0; - --csstools-light-dark-toggle--118: @surface0; - --csstools-light-dark-toggle--126: @text; + --csstools-light-dark-toggle--93: @surface0; + --csstools-light-dark-toggle--94: @surface0; + --csstools-light-dark-toggle--95: @yellow; + --csstools-light-dark-toggle--97: @base; + --csstools-light-dark-toggle--98: fade(@green, 10%); + --csstools-light-dark-toggle--99: fade(@green, 10%); + --csstools-light-dark-toggle--100: @green; + --csstools-light-dark-toggle--101: fade(@yellow, 5%); + --csstools-light-dark-toggle--102: fade(@yellow, 5%); + --csstools-light-dark-toggle--107: @surface2; + --csstools-light-dark-toggle--108: @subtext0 !important; + --csstools-light-dark-toggle--110: @text; + --csstools-light-dark-toggle--111: @accent !important; [class*="_new"] { color: @green; } - /* Dependencies cards */ - --csstools-light-dark-toggle--83: @base; - --csstools-light-dark-toggle--79: @surface0; - --csstools-light-dark-toggle--80: @text; - --csstools-light-dark-toggle--81: @text; - --csstools-light-dark-toggle--84: @subtext0; - --grey600: @subtext0; - --grey700: @text; + /* Dependents cards */ - --csstools-light-dark-toggle--89: @base; - --csstools-light-dark-toggle--86: @surface0; + --csstools-light-dark-toggle--61: @surface0; + --csstools-light-dark-toggle--62: @text; + --csstools-light-dark-toggle--64: @base; + --grey600: @subtext1; + + /* Dependencies cards */ + --csstools-light-dark-toggle--54: @surface0; + --csstools-light-dark-toggle--55: @text; + --csstools-light-dark-toggle--56: @text; + --csstools-light-dark-toggle--58: @base; + + /* crate settings */ + --csstools-light-dark-toggle--27: @base; + --csstools-light-dark-toggle--121: @base !important; + /* Search results cards */ - --csstools-light-dark-toggle--2: @base; + --csstools-light-dark-toggle--13: @base; + /* Homepage cards */ - --csstools-light-dark-toggle--74: @base; - --csstools-light-dark-toggle--77: @surface0; - --csstools-light-dark-toggle--75: @subtext1; - --csstools-light-dark-toggle--76: @text; - --csstools-light-dark-toggle--19: @subtext0; - --csstools-light-dark-toggle--20: @subtext0; - + --csstools-light-dark-toggle--7: @subtext0; + --csstools-light-dark-toggle--8: @subtext0; + --csstools-light-dark-toggle--48: @subtext1; + --csstools-light-dark-toggle--49: @base; + --csstools-light-dark-toggle--50: @text; + --csstools-light-dark-toggle--51: @text; + --csstools-light-dark-toggle--52: @surface0; + /* Header search bar */ - --csstools-light-dark-toggle--34: @crust; + --csstools-light-dark-toggle--65: @text !important; + --csstools-light-dark-toggle--66: @crust !important; + --csstools-light-dark-toggle--67: @surface0 !important; --yellow500: @accent; --yellow700: darken(@accent, 5%); - + /* Dropdown */ --csstools-light-dark-toggle--23: @mantle; --csstools-light-dark-toggle--35: @mantle; + /* Dropdown items */ [class*="_item_"] { + background-color: @mantle; button:hover, > a:hover, [class*="_selected_"] { @@ -184,6 +203,13 @@ color: @text !important; } } + + /* Dashboard cards */ + --csstools-light-dark-toggle--11: @base; + --csstools-light-dark-toggle--10: @subtext1; + + /* Pending invites */ + --csstools-light-dark-toggle--131: @base; } /* Toasts */ @@ -211,9 +237,6 @@ } /* Icons and icon badges */ - [class*="downloads_"] [fill="#FFF"] { - fill: @surface0 !important; - } [fill="#B13B89"], [fill="#B84D94"], svg[class*="_download-icon"] { @@ -222,6 +245,9 @@ [stroke="#B84D94"] { stroke: @accent !important; } + div[class*="_crate-downloads_"] [fill="#FFF"] { + fill: @surface0 !important; + } /* Footer links */ ._content_hautyr { @@ -258,8 +284,8 @@ } /* Primary buttons */ - [class*="_tan-button_"], - [class*="_yellow-button_"] { + [class*="button--tan"], + [class*="button--yellow"] { color: @crust !important; background: @accent; @@ -268,11 +294,22 @@ } } - [class*="_red-button_"] { + [class*="button--small"] { + --bg-color-top: @yellow; + --bg-color-bottom: @yellow; + --bg-color-top-light: @yellow; + --bg-color-bottom-light: @yellow; + --bg-color-top-dark: darken(@yellow, 5%); + --bg-color-bottom-dark: darken(@yellow, 5%); + --text-color: @crust; + color: @crust; + } + [class*="button--red"] { --bg-color-top: @maroon; --bg-color-bottom: @maroon; --bg-color-top-dark: @red; --bg-color-bottom-dark: @red; + --text-color: @crust; } /* User email settings */ @@ -291,7 +328,7 @@ text-shadow: none; } [class*="_hero-button_"] [class*="_icon_"] { - color: @crust; + color: if(@flavor = latte, @text, @crust); } [class*="_blurb_"] [class*="_stats-value_"] { [class*="_label_"],