From 9a5759ae86630460963cdaed207ac9517ccfaed5 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Wed, 12 Mar 2025 23:02:45 +0800
Subject: [PATCH] Tweak to color shadows, sidebar font-size, general small
 fixes (#36)

---
 scss/chat.scss              | 18 +++++++++++++++---
 scss/color-choice.scss      |  2 +-
 scss/color-exploration.scss |  4 ++--
 scss/misc.scss              |  1 -
 scss/sidebar.scss           |  1 -
 scss/topic-cards.scss       |  2 +-
 scss/topic.scss             |  7 +++++--
 7 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/scss/chat.scss b/scss/chat.scss
index 8c3a0b1..fdd4f86 100644
--- a/scss/chat.scss
+++ b/scss/chat.scss
@@ -15,9 +15,17 @@ body.has-full-page-chat {
   background-color: var(--background-color);
 }
 
-.chat-drawer .chat-drawer-container {
-  box-shadow: 0px 0px 0px 2px var(--d-chat-border);
-  border: none;
+.chat-drawer-container {
+  .is-expanded & {
+    box-shadow: 0px 0px 0px 2px var(--d-chat-border);
+  }
+  .chat-drawer.is-expanded & {
+    border: none;
+  }
+}
+
+.chat-drawer-outlet-container {
+  z-index: z("composer", "content") + 1;
 }
 
 .chat-drawer .channels-list-container .chat-channel-row {
@@ -35,3 +43,7 @@ body.has-full-page-chat {
   text-transform: uppercase;
   font-size: var(--font-down-1);
 }
+
+.chat-composer__wrapper {
+  background: var(--d-content-background);
+}
diff --git a/scss/color-choice.scss b/scss/color-choice.scss
index e30573e..b6fe387 100644
--- a/scss/color-choice.scss
+++ b/scss/color-choice.scss
@@ -21,7 +21,7 @@
   border: none;
 }
 
-html.cusom-color-horizon {
+html.custom-color-horizon {
   --accent-base-color: #595bca;
 }
 
diff --git a/scss/color-exploration.scss b/scss/color-exploration.scss
index 235cfc1..8ce562b 100644
--- a/scss/color-exploration.scss
+++ b/scss/color-exploration.scss
@@ -41,11 +41,11 @@
     oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
   );
   --topic-card-shadow: light-dark(
-    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.1) h / 0.5),
+    oklch(from var(--accent-color) calc(l * 1.85) calc(c * 0.5) h),
     oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
   );
   --button-box-shadow: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.35) h),
+    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
     oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
   );
   --d-selected: light-dark(
diff --git a/scss/misc.scss b/scss/misc.scss
index fb3c26e..33da8be 100644
--- a/scss/misc.scss
+++ b/scss/misc.scss
@@ -73,7 +73,6 @@ input[type="color"]:focus,
   background-color: var(--background-color);
 }
 
-
 .fk-d-menu__trigger.topic-list-layout-trigger {
   display: none;
 }
diff --git a/scss/sidebar.scss b/scss/sidebar.scss
index e19c695..6e7980b 100644
--- a/scss/sidebar.scss
+++ b/scss/sidebar.scss
@@ -21,7 +21,6 @@
     padding: 0;
   }
   .sidebar-section-link {
-    font-size: var(--font-up-1);
     transition: none;
     border-radius: var(--d-border-radius);
   }
diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index b9e748c..9114599 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -361,7 +361,7 @@ body.user-messages-page .topic-list-item {
 
 .topic-list-item {
   background: var(--d-content-background);
-  box-shadow: 0px 0px 26px 1px var(--topic-card-shadow);
+  box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
   &:hover {
     .discourse-no-touch & {
       border-color: var(--accent-color);
diff --git a/scss/topic.scss b/scss/topic.scss
index da44b6c..c1c8bdc 100644
--- a/scss/topic.scss
+++ b/scss/topic.scss
@@ -47,12 +47,15 @@
 }
 
 #topic-title {
-  @include breakpoint(extra-large, $rule: min-width) {
+  @include breakpoint(medium, $rule: min-width) {
     z-index: z("composer", "content") - 1;
-    padding: var(--spacing-block-l) var(--spacing-inline-xl);
+    padding: var(--spacing-block-m) var(--spacing-inline-xl);
     margin-bottom: 0;
+    position: sticky;
     top: var(--header-offset);
     background: var(--d-content-background);
+    border-top-right-radius: var(--d-border-radius-large);
+    border-top-left-radius: var(--d-border-radius-large);
   }
 }
 .container.posts,