diff --git a/javascripts/discourse/components/custom-user-pallette.gjs b/javascripts/discourse/components/custom-user-pallette.gjs index 2bc295f..bc49f0e 100644 --- a/javascripts/discourse/components/custom-user-pallette.gjs +++ b/javascripts/discourse/components/custom-user-pallette.gjs @@ -18,7 +18,7 @@ const PALLETTES = [ }, { name: "clover", - color: "#4caf50", + color: "#45a06e", }, { name: "royal", diff --git a/scss/buttons.scss b/scss/buttons.scss index 04cc157..d9d8c87 100644 --- a/scss/buttons.scss +++ b/scss/buttons.scss @@ -20,6 +20,19 @@ // } } +.btn.btn-transparent.btn-icon-text { + background-color: transparent; + .d-icon { + color: inherit; + } + &.--active .d-icon { + color: var(--accent-color); + } + &:hover { + box-shadow: none; + } +} + .sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text { background: var(--accent-color); &:hover { @@ -52,7 +65,6 @@ .btn-icon-text, .select-kit .select-kit-header.btn-default { background: var(--primary-100); - .d-icon { color: var(--accent-color); } @@ -118,11 +130,32 @@ } .post-controls { - svg.d-icon { + svg.d-icon:not(.d-icon-heart, .d-icon-far-heart) { color: inherit !important; //something we should honestly implement in core imo, when do we ever NOT want the same colour for icon and text? } } +.discourse-reactions-double-button:hover .reactions-counter { + color: var(--love); +} + +.discourse-no-touch + .discourse-reactions-actions.has-reacted + .discourse-reactions-double-button:hover, +.discourse-no-touch + .discourse-reactions-actions.has-reacted.can-toggle-reaction + .discourse-reactions-reaction-button:hover + .reaction-button, +.discourse-no-touch + .discourse-reactions-actions.has-reacted:not(.can-toggle-reaction) + .discourse-reactions-reaction-button:hover + .reaction-button { + background: var(--love-low); + .d-icon-heart { + color: var(--love); + } +} + //undoing the outline for select-kit, since Im using a custom visual cue .select-kit.single-select.is-expanded .select-kit-header:not(.btn), .select-kit.single-select .select-kit-header:not(.btn):focus, diff --git a/scss/color-choice.scss b/scss/color-choice.scss index e79cfef..e30573e 100644 --- a/scss/color-choice.scss +++ b/scss/color-choice.scss @@ -34,11 +34,11 @@ html.custom-color-violet { } html.custom-color-lily { - --accent-base-color: #cc336f; + --accent-base-color: #cc338c; } html.custom-color-clover { - --accent-base-color: #4caf50; + --accent-base-color: #45a06e; } html.custom-color-royal { diff --git a/scss/color-exploration.scss b/scss/color-exploration.scss index 0a769da..4c9888a 100644 --- a/scss/color-exploration.scss +++ b/scss/color-exploration.scss @@ -23,9 +23,14 @@ ); --primary-100: light-dark(#f2f2f2, #333333); --primary-300: light-dark(#d1d1d1, #838383); - --primary-low: var(--primary-300); + --primary-low: light-dark(#e8e8e8, #414350); --d-hover: oklch(from var(--d-selected) l c h / 0.75); --tertiary-med-or-tertiary: var(--accent-color); + --tertiary-low: light-dark( + oklch(from var(--accent-color) calc(l * 1.6) calc(c * 0.25) h), + oklch(from var(--accent-color) calc(l * 0.6) calc(c * 0.25) h) + ); + --tertiary: var(--accent-color); --d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color); --search-color: light-dark( oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h), @@ -53,7 +58,7 @@ oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h) ); --d-chat-border: light-dark( - oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h), + oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h), oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h) ); --accent-text-color: light-dark(#ffffff, #0f1024); @@ -85,4 +90,5 @@ --d-sidebar-highlight-background: var(--d-selected); --d-sidebar-section-link-icon-size: 1em; --d-input-bg-color: var(--d-content-background); + --tertiary-hover: var(--accent-color); } diff --git a/scss/header.scss b/scss/header.scss index 80bf18f..e48756e 100644 --- a/scss/header.scss +++ b/scss/header.scss @@ -81,3 +81,13 @@ .menu-panel .panel-body-bottom .btn:hover { background-color: var(--d-content-background); } + +body.login-page, +body.signup-page, +body.invite-page, +body.password-reset-page, +body.activate-account-page { + .d-header { + background: var(--background-color); + } +} diff --git a/scss/sidebar.scss b/scss/sidebar.scss index 2f4e157..e19c695 100644 --- a/scss/sidebar.scss +++ b/scss/sidebar.scss @@ -52,6 +52,10 @@ } } +.sidebar-wrapper .sidebar-sections { + --scrollbarThumbBg: var(--d-selected); +} + .sidebar-section-link-wrapper .sidebar-section-link:focus, .sidebar-section-link-wrapper .sidebar-section-link:hover { .d-icon { diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss index 961a613..f6aea8c 100644 --- a/scss/topic-cards.scss +++ b/scss/topic-cards.scss @@ -17,6 +17,9 @@ $extra-large: 1280px; .topic-list > .topic-list-body > .topic-list-item.last-visit { border-bottom: 1px solid var(--primary-300); + &:hover { + border-color: var(--accent-color); + } } .topic-list-body { @@ -362,7 +365,7 @@ body.user-messages-page .topic-list-item { box-shadow: 0px 0px 26px 1px var(--topic-card-shadow); &:hover { .discourse-no-touch & { - border: 1px solid var(--accent-color); + border-color: var(--accent-color); background: var(--d-content-background); } }