diff --git a/styles/kotlin/catppuccin.user.css b/styles/kotlin/catppuccin.user.css
index 68f251f81b..5e76730a3e 100644
--- a/styles/kotlin/catppuccin.user.css
+++ b/styles/kotlin/catppuccin.user.css
@@ -16,7 +16,6 @@
==/UserStyle== */
@-moz-document domain('kotlinlang.org') {
-
@media (prefers-color-scheme: light) {
:root {
#catppuccin(@lightFlavor, @accentColor);
@@ -57,35 +56,32 @@
@crust: @catppuccin[@@lookup][@crust];
@accent-color: @catppuccin[@@lookup][@@accent];
- color-scheme: if(@lookup = latte, light, dark);
+ color-scheme: if(@lookup = latte, light, dark);
- ::selection {
+ ::selection {
background-color: fade(@accent-color, 30%);
}
- input,
- textarea {
- &::placeholder {
- color: @subtext0 !important;
+ input,
+ textarea {
+ &::placeholder {
+ color: @subtext0 !important;
+ }
}
- }
-
- --ktl-light-grey: @text;
+ --ktl-light-grey: @text;
--ktl-dark-100: @surface0 !important;
--ktl-dark-bg-hard: @mantle !important;
--ktl-icon-color-dark: @crust !important;
--ktl-color-white-light: @overlay2 !important;
--ktl-color-primary-light-theme: @accent-color;
- --ktl-focus-outline: rgba(107, 87, 255, .8) 0 0 0 4px;
-
+ --ktl-focus-outline: rgba(107, 87, 255, 0.8) 0 0 0 4px;
body {
&.dark-theme {
background: @base;
}
-
}
.rs {
@@ -111,6 +107,7 @@
color: @text;
}
}
+
.cm-s-darcula,
.cm-s-kotlin-docs {
&.CodeMirror {
@@ -123,47 +120,52 @@
& span.cm {
&-keyword {
- color: @mauve
+ color: @mauve;
}
&-def {
- color: @blue
+ color: @blue;
}
&-string {
- color: @green
+ color: @green;
}
&-number {
- color: @peach
+ color: @peach;
}
&-type {
- color: @yellow
+ color: @yellow;
}
&-variable {
- color: @blue
+ color: @blue;
}
&-meta {
- color: @yellow
+ color: @yellow;
}
&-comment {
- color: @overlay2
+ color: @overlay2;
}
&-operator {
- color: @sky
+ color: @sky;
}
&-atom {
- color: @red
+ color: @red;
}
}
}
+ .cm-s-kotlin-docs.CodeMirror .CodeMirror-linenumber {
+ color: @overlay2;
+ }
+
+
[class*="hero_"] {
&[class*="heroSection"] {
background: @base;
@@ -179,7 +181,9 @@
}
&[class*="developerLogo"] {
- @svg: escape('');
+ @svg: escape(
+ ''
+ );
content: url("data:image/svg+xml,@{svg}");
}
}
@@ -224,17 +228,26 @@
}
&[class*="footer-module_logo"] {
- @svg: escape('');
+ @svg: escape(
+ ''
+ );
content: url("data:image/svg+xml,@{svg}");
}
&[class*="cta-block-module"] {
&[class*="_wrapper_"] {
- background: linear-gradient(90deg, darken(@red, 5%), darken(@pink, 5%) 50%, darken(@mauve, 5%)) !important;
+ background: linear-gradient(
+ 90deg,
+ darken(@red, 5%),
+ darken(@pink, 5%) 50%,
+ darken(@mauve, 5%)
+ ) !important;
}
- &[class*="_top-title"], &[class*="_main-title"], &[class*="_main-title"].rs-h2 {
+ &[class*="_top-title"],
+ &[class*="_main-title"],
+ &[class*="_main-title"].rs-h2 {
color: @base !important;
}
}
@@ -305,7 +318,6 @@
:hover {
border-color: rgba(@text, 1);
}
-
}
[class*="kotlin-usage-highlights_tag"] {
@@ -317,7 +329,7 @@
[class*="modeRock"] {
background-color: @accent-color;
- color: @crust
+ color: @crust;
}
[class*="foundation-preview_"] {
@@ -329,7 +341,6 @@
mix-blend-mode: multiply;
}
}
-
}
[class*="community-banner"] {
@@ -339,7 +350,7 @@
.ktl-hero,
.ktl-text-1,
.ktl-text-2 {
- color: @text
+ color: @text;
}
[class*="ktl-horizontal-menu-module_item-active_"] {
@@ -354,7 +365,7 @@
.ktl-h3,
.ktl-h2,
.ktl-h1 {
- color: @text
+ color: @text;
}
[class*="community-banner_image"] {
@@ -366,7 +377,9 @@
}
.teach-feature__icon img {
- @svg: escape('');
+ @svg: escape(
+ ''
+ );
content: url("data:image/svg+xml,@{svg}");
}
@@ -374,17 +387,18 @@
background-color: darken(@base, 2%);
& > div[class*="__checkbox"] > div[class*="_wrapper_"] > label {
- background-color: darken(@base, 2%)
+ background-color: darken(@base, 2%);
}
&__icon {
- @svg: escape('');
- content: url("data:image/svg+xml,@{svg}")
+ @svg: escape(
+ ''
+ );
+ content: url("data:image/svg+xml,@{svg}");
}
}
div.gmnoprint > div {
-
& > button {
&.gm-control-active {
background-color: @base !important;
@@ -408,9 +422,8 @@
[class*="_tab_"] {
color: @text;
-
&:hover {
- color: @sky
+ color: @sky;
}
}
@@ -433,6 +446,7 @@
--wh-color-text-heading: @text;
--wh-color-breadcrumbs-active: @subtext1;
--wh-color-breadcrumbs-text: @overlay0;
+ --wh-color-breadcrumbs-border: @overlay0;
--rs-color-danger: @red;
--wh-color-danger-t20: darken(@red, 10%);
@@ -442,72 +456,95 @@
--wh-color-success-t40: darken(@green, 15%);
--rs-color-primary-light-theme: @accent-color;
-
.kt-app__article {
--rs-color-primary-light-theme: @accent-color;
--wt-color-primary-light-theme: @accent-color;
}
- div.prompt__content> p.article__p {
+ div.prompt__content > p.article__p {
color: @crust;
}
-// Prism syntax highlighting
-.prism-- {
-
- &token {
- color: @text;
- }
-
- &keyword {
- color: @mauve;
- }
+ // Prism syntax highlighting
+ .prism-- {
+ &token {
+ color: @text;
+ }
- &operator {
- color: @sky;
- }
+ &keyword {
+ color: @mauve;
+ }
- &function {
- color: @blue;
- }
+ &operator {
+ color: @sky;
+ }
- &punctuation {
- color: @overlay2;
- }
+ &function {
+ color: @blue;
+ }
- &string {
- color: @green;
- }
+ &punctuation {
+ color: @overlay2;
+ }
- &comment {
- color: @overlay2;
- }
+ &string {
+ color: @green;
+ }
- &tag {
- color: @blue;
- }
+ &comment {
+ color: @overlay2;
+ }
- &class-name {
- color: @yellow;
- }
+ &tag {
+ color: @blue;
+ }
-}
+ &class-name {
+ color: @yellow;
+ }
+ }
-// Various element styles
+ // Various element styles
svg.wt-icon {
fill: @text;
&.prompt__icon {
- fill: @crust
+ fill: @crust;
}
}
- .compiler-info {
+
+ [class*="compiler-info__"] {
+ color: @text !important;
+ }
+
+ .fold-button.kotlin-docs {
color: @text;
+ @svg: escape(
+ ''
+ );
+ background-image: url("data:image/svg+xml,@{svg}");
+
+ &:hover {
+ @svg: escape(
+ ''
+ );
+ background-image: url("data:image/svg+xml,@{svg}");
+ }
+ }
+
+ .run-button {
+ @svg: escape('');
+ background-image: url("data:image/svg+xml,@{svg}");
}
span.kt-menu-horizontal__node,
a.kt-menu-horizontal__node {
color: @text;
+ background-color: @crust;
+
+ &:hover {
+ color: @overlay2
+ }
&.is-active {
color: @accent-color;
@@ -519,7 +556,9 @@
}
.jetbrains-logo::before {
- @svg: escape('');
+ @svg: escape(
+ ''
+ );
background-image: url("data:image/svg+xml,@{svg}");
}
@@ -558,10 +597,202 @@
}
&:hover {
- background-color: @mantle
+ background-color: @mantle;
+ }
+ }
+
+ .prompt__wrapper {
+ background-color: @surface0;
+ border-radius: 8px;
+ padding: 16px;
+ display: flex;
+ align-items: flex-start;
+ gap: 16px;
+
+ svg.wt-icon.prompt__icon {
+ fill: @accent-color;
+ flex-shrink: 0;
+ width: 24px;
+ height: 24px;
+ }
+
+ .prompt__content {
+ color: @text;
+
+ p.article__p {
+ color: @text;
+ }
+
+ .code {
+ background-color: @surface1;
+ color: @text;
+ padding: 2px 4px;
+ border-radius: 4px;
+ }
+
+ .link {
+ color: @accent-color;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
}
}
+ .breadcrumb__item:after {
+ --wh-color-breadcrumbs-border: @subtext1;
+ }
+
+ .starting-page-card:hover {
+ border-color:@subtext1
+ }
+
+ .toolbar {
+ color: @text;
+ background-color: @mantle;
+ border-bottom-color: @surface1;
+ }
+
+ .toolbar .wt-select-wrapper > [class^="_wt-select"] svg {
+ fill: @text;
+ }
+
+ div[class*="_wt-select__label_"] {
+ color: @text;
+ }
+
+ [class*="_wt-list-item_"][class*="_theme_dark_"] {
+ background-color: @base;
+ color: @text;
+
+ &[class*="_highlighted_"],
+ &[class*="_highlighted_"][class*="_selected_"]:hover {
+ background-color: @surface0;
+ color: @text;
+ }
+ }
+
+ [class*="_wt-dropdown_theme_dark_"][class*="_wt-dropdown_border-hardness_average_"] {
+ border-color: @surface1;
+ }
+
+ [class*="_modeClear_"][class*="_dark_"] {
+ color: @text;
+
+ &:hover {
+ background-color: @surface0;
+ }
+ }
+
+ [class*="_dark_"] [class*="_wrapper_"] {
+ color: @text;
+ background-color: @base;
+ border-color: @surface0;
+
+ &:hover {
+ color: @text;
+ background-color: @base;
+ border-color: @surface1;
+ }
+ }
+
+
+ [class*="_dark_"][class*="_enabled_"][class*="_classic_"][class*="_focused_"] [class*="_wrapper_"] {
+ background-color: @base;
+ border-color: @surface2;
+ }
+
+ svg[class*="_icon_"] > path{
+ fill: @text;
+ }
+
+ input[class*="_inner"],
+ [class*="_dark_"] [class*="_inner_"] {
+ background-color: @base;
+ color: @text;
+ }
+
+ div.button-run > span > button[class*="_main"]{
+ background-color: @accent-color;
+ color: @base;
+
+ &:hover {
+ background-color: darken(@accent-color, 5%);
+ }
+
+ &> svg > path {
+ fill: @base;
+ }
+ }
+
+ .playground_open .js-code-output-executor,
+ .output-wrapper.darcula {
+ background-color: @base;
+ color: @text;
+ }
+
+ div.playground__help-wrapper > span > button.help-dropdown__button {
+ background-color: @surface0;
+ border-color: @overlay0;
+
+ & > svg > path {
+ fill: @text;
+ }
+ }
+
+ div.help-dropdown__content {
+ background-color: @base;
+ }
+
+ [class*="_themeLight_"] [class*="_contentWrapper_"] {
+ background-color: @base;
+ color: @text;
+ }
+
+
+ .console-close.darcula {
+ @svg: escape('');
+ background: @surface0 url("data:image/svg+xml,@{svg}") center center no-repeat;
+ }
+
+ [class*="ktl-horizontal-menu-module_menu-item"] {
+ &[class*="expanded"],
+ &:hover {
+ border-bottom-color: @accent-color;
+ }
+ }
+
+ [class*="ktl-horizontal-menu-module_dropdown-menu"] {
+ background-color: @base;
+ color: @text;
+ border-color: @overlay0;
+
+ [class*="ktl-horizontal-menu-module_dropdown-menu-item"] {
+ &:hover {
+ background-color: @surface0;
+ color: @text;
+ }
+ }
+ }
+
+ [class*="ktl-list-module_results"] {
+ background-color: @base;
+ color: @text;
+ border-color: @overlay0;
+ }
+
+ [class*="ktl-result-module_result"] {
+ &:hover {
+ background-color: @surface0;
+ color: @text;
+ }
+
+ & em {
+ background-color: fade(@accent-color,25%);
+ }
+ }
& when (@lookup = latte) {
img[class*="hero_imageDesktop"] {
@@ -569,12 +800,9 @@
mix-blend-mode: darken;
}
}
-
}
-
}
-
/* prettier-ignore */
@catppuccin: {
@latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; };