UX: add banner bg, chat styles, regression fixes (discourse#20)

about.json

@@ -8,15 +8,19 @@
       "secondary": "F6FBFC",
       "tertiary": "4F8A7C",
       "header_background": "ffffff",
-      "header_primary": "111111"
+      "header_primary": "111111",
+      "selected": "e3efec",
+      "hover": "e3efec"
     },
     "mint-dark": {
       "primary": "e0e0e0",
       "secondary": "2d2d2d",
       "tertiary": "4F8A7C",
       "header_background": "202020",
       "header_primary": "e0e0e0",
-      "highlight": "b2b235"
+      "highlight": "b2b235",
+      "selected": "1c302b",
+      "hover": "1c302b"
     }
   },
   "components": [

common/common.scss

@@ -1,47 +1,14 @@
 @import "variables";
 @import "sidebar";
+@import "chat";
 
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"],
 .d-editor-textarea-wrapper,
 .select-kit-header {
   border-radius: var(--mint-border-radius);
 }
 
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="datetime"]:focus,
-input[type="datetime-local"]:focus,
-input[type="date"]:focus,
-input[type="month"]:focus,
-input[type="time"]:focus,
-input[type="week"]:focus,
-input[type="number"]:focus,
-input[type="email"]:focus,
-input[type="url"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="color"]:focus,
-.d-editor-textarea-wrapper.in-focus,
-.select-kit.multi-select.is-expanded .multi-select-header,
-.select-kit.single-select.is-expanded .select-kit-header:not(.btn),
-.select-kit.single-select .select-kit-header:not(.btn):focus,
-.select-kit.single-select .select-kit-header:not(.btn):active {
-  border-radius: var(--mint-border-radius);
-  box-shadow: none;
-  outline: none;
+:root {
+  --d-input-border-radius: var(--mint-border-radius);
 }
 
 .d-header {
@@ -55,12 +22,13 @@ input[type="color"]:focus,
 
 .custom-homepage-columns {
   margin: 2em 0 2em 0;
+  padding: 0;
   .col {
     position: relative;
     border-radius: var(--mint-border-radius);
     @include mint-card-bg;
     padding: 2em 2em 1em;
-    border-top: 8px solid $tertiary;
+    border-top: 8px solid var(--tertiary);
     box-shadow: 0 8px 60px 0 rgba(103, 151, 255, 0.1),
       0 12px 90px 0 rgba(133, 255, 103, 0.1);
     .header-wrapper {
@@ -85,6 +53,10 @@ input[type="color"]:focus,
       }
     }
   }
+
+  .loading-container:not(:has(.spinner)) {
+    min-height: unset;
+  }
 }
 
 .navigation-categories .search-banner {
@@ -107,7 +79,7 @@ input[type="color"]:focus,
       0 12px 90px 0 rgba(133, 255, 103, 0.1);
     padding: 2em;
     @include mint-card-bg;
-    border-top: 8px solid $tertiary;
+    border-top: 8px solid var(--tertiary);
     margin-top: 0.8em;
   }
 }
@@ -285,8 +257,8 @@ a {
   color: var(--tertiary-hover);
 }
 
-.discourse-no-touch .btn:hover,
-.discourse-no-touch .btn.btn-hover {
+.discourse-no-touch .btn:not(.btn-flat):hover,
+.discourse-no-touch .btn:not(.btn-flat).btn-hover {
   color: var(--secondary);
   background: var(--tertiary-hover);
   border-radius: 5px;
@@ -364,6 +336,15 @@ a:hover {
   }
 }
 
+.custom-search-banner-wrap {
+  border-radius: var(--mint-border-radius);
+  background: linear-gradient(
+    270deg,
+    var(--tertiary-medium) 0%,
+    var(--tertiary) 100%
+  );
+}
+
 .custom-search-banner-wrap h1,
 .custom-search-banner-wrap p {
   color: var(--primary-very-low);

desktop/desktop.scss

@@ -7,7 +7,7 @@ body:not(.navigation-categories):not(.navigation-topics) #main-outlet {
   padding: 2em;
   @include mint-card-bg;
   border-top: 8px solid $tertiary;
-  margin-top: 0.8em;
+  margin-top: 1em;
 }
 
 .boxed {

scss/chat.scss

@@ -0,0 +1,33 @@
+html body.has-sidebar-page.has-full-page-chat {
+  #main-outlet-wrapper {
+    gap: 2em;
+  }
+  #main-outlet {
+    padding: 0 !important;
+  }
+}
+
+.chat-composer__wrapper {
+  background: transparent;
+}
+
+.full-page-chat .chat-full-page-header {
+  background: var(--primary-very-low);
+}
+
+.desktop-view .has-full-page-chat {
+  .chat-channel {
+    height: calc(100vh - (var(--header-offset) + 3em));
+  }
+}
+
+.chat-message-container,
+.chat-transcript {
+  background: transparent;
+}
+
+.chat-drawer .chat-drawer-container {
+  border-radius: var(--mint-border-radius) var(--mint-border-radius) 0 0;
+  box-shadow: 0 8px 60px 0 rgba(103, 151, 255, 0.1),
+    0 12px 90px 0 rgba(133, 255, 103, 0.1);
+}

scss/sidebar.scss

@@ -1,7 +1,27 @@
+:root {
+  --d-sidebar-highlight-background: var(--tertiary-low);
+  --d-sidebar-highlight-hover-background: var(--tertiary);
+  --d-sidebar-header-icon-color: var(--tertiary);
+}
+
 #main-outlet-wrapper {
   .sidebar-wrapper {
-    background-color: var(--secondary);
+    background-color: var(--primary-very-low);
     box-shadow: 0 8px 60px 0 rgba(103, 151, 255, 0.1),
       0 12px 90px 0 rgba(133, 255, 103, 0.1);
+    margin-top: 1em;
+    border-top: 8px solid var(--tertiary);
+    border-radius: var(--mint-border-radius);
+    height: calc(
+      var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) - 3em
+    );
+    top: calc(var(--header-offset) + 1em);
+    .sidebar-container {
+      border: none;
+    }
   }
 }
+
+.sidebar-footer-wrapper {
+  background: var(--primary-very-low);
+}