From 720f0bb12746a49bb00a0cfb11000b2ab27789ff Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Fri, 28 Feb 2025 07:28:45 +0800
Subject: [PATCH] some styling + scope chat (#3)

---
 scss/chat.scss      |  10 ----
 scss/main.scss      | 128 +++++++++++++++++++++-----------------------
 scss/nav-pills.scss |   3 +-
 scss/sidebar.scss   |   9 ++--
 4 files changed, 68 insertions(+), 82 deletions(-)
 delete mode 100644 scss/chat.scss

diff --git a/scss/chat.scss b/scss/chat.scss
deleted file mode 100644
index e0e5264..0000000
--- a/scss/chat.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.c-navbar-container {
-  background-color: light-dark(#ffffff, #000000);
-  border-top-right-radius: var(--d-border-radius-large);
-  border-top-left-radius: var(--d-border-radius-large);
-}
-
-.chat-message-container,
-.chat-transcript {
-  background: transparent;
-}
diff --git a/scss/main.scss b/scss/main.scss
index c6d459b..5bb42fa 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,73 +1,69 @@
-body,
-html {
+html:not(:has(.has-full-page-chat)) {
   background-color: #f5f8ff;
 }
 
-body:not(.archetype-regular, .has-full-page-chat)
-  #main-outlet-wrapper
-  #main-outlet {
-  overflow: scroll;
-  border-radius: var(--d-border-radius-large);
-}
-
-#main-outlet-wrapper {
-  margin-top: 1.5rem;
-  gap: 2em !important;
-  height: calc(100vh - var(--header-offset) - 4rem);
-  box-sizing: border-box;
-  > * {
-    height: inherit;
+body:not(.has-full-page-chat) {
+  background-color: #f5f8ff;
+  #main-outlet-wrapper {
+    margin-top: 1.5rem;
+    gap: 2em !important;
+    height: calc(100vh - var(--header-offset) - 4rem);
     box-sizing: border-box;
+    > * {
+      height: inherit;
+      box-sizing: border-box;
+    }
+    #main-outlet {
+      width: 100%;
+      height: inherit;
+      overflow: scroll;
+      &:has(.list-controls) {
+        padding-top: 0;
+      }
+      &:has(#topic-title) {
+        padding-top: 0;
+      }
+      > *:not(.full-page-chat) {
+        max-width: 1000px;
+        margin-inline: auto;
+        padding-inline: 1.5em;
+      }
+      border-radius: var(--d-border-radius-large);
+      border-radius: 1.25rem;
+      .navigation-topics & {
+        background: radial-gradient(
+            100.59% 70.87% at 41.19% 73.28%,
+            rgba(188, 241, 238, 0.2) 0%,
+            rgba(255, 255, 255, 0) 100%
+          ),
+          radial-gradient(
+            67.07% 61.36% at 66.47% 64.15%,
+            rgba(162, 164, 225, 0.2) 0%,
+            rgba(255, 255, 255, 0) 100%
+          ),
+          #fff;
+      }
+      box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
+      background-color: light-dark(#ffffff, #000000);
+    }
   }
-  #main-outlet {
-    width: 100%;
-    height: inherit;
-    overflow: scroll;
-    &:has(.list-controls) {
-      padding-top: 0;
-    }
-    &:has(#topic-title) {
-      padding-top: 0;
-    }
-    > *:not(.full-page-chat) {
-      max-width: 1000px;
-      margin-inline: auto;
-    }
-    border-radius: var(--d-border-radius-large);
-    border-radius: 1.25rem;
-    .navigation-topics & {
-      background: radial-gradient(
-          100.59% 70.87% at 41.19% 73.28%,
-          rgba(188, 241, 238, 0.2) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        radial-gradient(
-          75.11% 79.17% at 66.02% 41.71%,
-          rgba(162, 164, 225, 0.2) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        #fff;
-    }
-    box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
-    background-color: light-dark(#ffffff, #000000);
+
+  #topic-title {
+    z-index: 999;
+    margin-bottom: 1em;
+    padding: 1.5rem 2rem 0.5em;
+    position: sticky;
+    top: 0;
+    background: var(--secondary);
+  }
+
+  .container.posts,
+  .more-topics__container,
+  #topic-footer-buttons {
+    padding: 0 24px;
+  }
+
+  .container.posts .topic-navigation {
+    top: calc(var(--header-offset, 60px) + 4em);
   }
 }
-
-#topic-title {
-  z-index: 999;
-  margin-bottom: 1em;
-  padding: 1.5rem 2rem 0.5em;
-  position: sticky;
-  top: 0;
-  background: var(--secondary);
-}
-
-.container.posts,
-.more-topics__container,
-#topic-footer-buttons {
-  padding: 0 24px;
-}
-
-.container.posts .topic-navigation {
-  top: calc(var(--header-offset, 60px) + 4em);
-}
diff --git a/scss/nav-pills.scss b/scss/nav-pills.scss
index d750469..b067742 100644
--- a/scss/nav-pills.scss
+++ b/scss/nav-pills.scss
@@ -3,9 +3,8 @@
   top: 0;
   background: var(--secondary);
   z-index: 100;
-  padding-top: 1.5rem;
+  padding: 1.5rem 0 1rem 0;
   max-width: unset;
-  width: 100%;
 
   .navigation-container {
     .category-breadcrumb {
diff --git a/scss/sidebar.scss b/scss/sidebar.scss
index c6841a5..b525f5e 100644
--- a/scss/sidebar.scss
+++ b/scss/sidebar.scss
@@ -1,8 +1,9 @@
-:root {
-  --d-sidebar-background: #f5f8ff;
-}
-
 .sidebar-wrapper {
+  background: #f5f8ff;
+
+  .has-full-page-chat & {
+    background: transparent;
+  }
   .sidebar-container {
     border-right: none;
   }