From 610ca011f728c50c5421ae8d30feb4e1462f9278 Mon Sep 17 00:00:00 2001 From: krios2146 Date: Sun, 6 Nov 2022 13:42:12 +0700 Subject: [PATCH 1/3] feat: add styles for callouts resolve: #11 --- theme.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/theme.css b/theme.css index 9e9e8dc..e2c4136 100644 --- a/theme.css +++ b/theme.css @@ -655,6 +655,21 @@ button.mod-cta:hover { background-color: var(--color-btn-primary-hover-bg); } +/* Callout */ +body { + --callout-radius: 0; + --callout-border-width: 0; + --callout-padding: 0 1em; +} +.callout { + border-left: 0.25em solid var(--color-base-40); + background-color: transparent; + color: var(--text-muted); +} +.callout-content p { + margin: 0.1em 0; +} + /* Kanban */ .kanban-plugin { background-color: var(--kanban-background); From 0211918c9c84ff12d97c482c246d47f234f70524 Mon Sep 17 00:00:00 2001 From: krios2146 Date: Sun, 6 Nov 2022 14:11:40 +0700 Subject: [PATCH 2/3] fix: #10 translucent window --- theme.css | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/theme.css b/theme.css index e2c4136..5a783f4 100644 --- a/theme.css +++ b/theme.css @@ -192,8 +192,8 @@ body { --clickable-icon-radius: var(--radius-s); /* Indentation guide */ --indentation-guide-width: 1px; - --indentation-guide-color: rgba(var(--mono-rgb-0), 0.12); - --indentation-guide-color-active: rgba(var(--mono-rgb-0), 0.3); + --indentation-guide-color: rgba(var(--mono-rgb-100), 0.12); + --indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3); /* Inline title */ --inline-title-color: var(--h1-color); --inline-title-font: var(--h1-font); @@ -303,9 +303,9 @@ body { --ribbon-width: 44px; --ribbon-padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); /* Scrollbars */ - --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-0), 0.2); - --scrollbar-bg: rgba(var(--mono-rgb-0), 0.05); - --scrollbar-thumb-bg: rgba(var(--mono-rgb-0), 0.1); + --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.2); + --scrollbar-bg: rgba(var(--mono-rgb-100), 0.05); + --scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.1); /* Search */ --search-clear-button-color: var(--text-muted); --search-clear-button-size: 13px; @@ -451,7 +451,7 @@ body { --background-primary: var(--color-base-00); --background-primary-alt: var(--color-base-10); --background-secondary: var(--color-base-20); - --background-modifier-hover: rgba(var(--mono-rgb-100), var(--background-modifier-hover-alpha)); + --background-modifier-hover: rgba(var(--rgb-hover), var(--background-modifier-hover-alpha)); --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); --background-modifier-border: var(--color-base-30); --background-modifier-border-hover: var(--color-base-30); @@ -484,8 +484,9 @@ body { .theme-dark { color-scheme: dark; --highlight-mix-blend-mode: lighten; - --mono-rgb-0: 177, 186, 196; - --mono-rgb-100: 177, 186, 196; + --mono-rgb-0: 0, 0, 0; + --mono-rgb-100: 255, 255, 255; + --rgb-hover: 177, 186, 196; --color-red-rgb: 248, 81, 73; --color-red: #F47067; --color-green-rgb: 126, 231, 135; @@ -565,8 +566,9 @@ body { .theme-light { color-scheme: light; --highlight-mix-blend-mode: darken; - --mono-rgb-0: 0, 0, 0; - --mono-rgb-100: 208, 215, 222; + --mono-rgb-0: 255, 255, 255; + --mono-rgb-100: 0, 0, 0; + --rgb-hover: 208, 215, 222; --color-red-rgb: 228, 55, 75; --color-red: #cf222e; --color-green-rgb: 12, 181, 79; @@ -624,7 +626,7 @@ body { --kanban-lane-background: var(--background-primary-alt); --kanban-item-background: var(--background-primary); --kanban-lane-border: #d8dee4; - --kanban-lane-count: #afb8c133; + --kanban-lane-count: #aeb8c133; --kanban-options-btn: var(--background-primary-alt); } @@ -757,5 +759,5 @@ select:focus, .dropdown:focus { background-color: var(--inline-code-background); padding: 0.2em 0.4em; border-radius: 6px; - color: var(--color-base-100); + color: var(--text-normal); } \ No newline at end of file From 60cef25e49fe1f58523c33c07643ebae4d4e5328 Mon Sep 17 00:00:00 2001 From: krios2146 Date: Sun, 6 Nov 2022 14:23:23 +0700 Subject: [PATCH 3/3] fix: callout border color --- theme.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/theme.css b/theme.css index 5a783f4..297f180 100644 --- a/theme.css +++ b/theme.css @@ -519,8 +519,6 @@ body { --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%)); --background-secondary-alt: var(--color-base-25); - --interactive-normal: var(--color-base-35); /*???*/ - --interactive-hover: var(--color-base-40); /*???*/ --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); --background-modifier-cover: rgba(10, 10, 10, 0.4); --text-highlight-bg: rgba(255, 208, 0, 0.4); @@ -600,6 +598,7 @@ body { --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%)); --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%)); + --background-secondary-alt: var(--color-base-05); --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); --background-modifier-cover: rgba(220, 220, 220, 0.4); @@ -664,7 +663,7 @@ body { --callout-padding: 0 1em; } .callout { - border-left: 0.25em solid var(--color-base-40); + border-left: 0.25em solid var(--color-base-30); background-color: transparent; color: var(--text-muted); }