UX: More desktop tweaks (#20)

about.json

@@ -1,5 +1,5 @@
 {
-  "name": "next-gen",
+  "name": "Horizon Theme",
   "authors": "Design Team",
   "about_url": "TODO: Put your theme's public repo or Meta topic URL here",
   "license_url": "TODO: Put your theme's LICENSE URL here",
@@ -17,7 +17,7 @@
     "https://github.com/discourse/discourse-full-width-component.git"
   ],
   "color_schemes": {
-    "next_gen": {
+    "Horizon": {
       "primary": "1A1A1A",
       "primary-low": "ebecf9",
       "primary-500": "8591ad",
@@ -29,7 +29,7 @@
       "selected": "d8d9f3",
       "hover": "ebebf9"
     },
-    "next_gen_dark": {
+    "Horizon Dark": {
       "primary": "F1EFF9",
       "secondary": "1e1a36",
       "header_background": "00091d",

scss/box-view.scss

@@ -5,6 +5,18 @@
   }
 }
 
+.chat-drawer-active.chat-drawer-expanded {
+  .experimental-screen {
+    &__top-left,
+    &__top-right,
+    &__bottom-left,
+    &__bottom-right,
+    &__bottom-bar {
+      z-index: 199;
+    }
+  }
+}
+
 .has-full-page-chat .experimental-screen {
   display: none;
 }

scss/buttons.scss

@@ -34,9 +34,8 @@
   }
 }
 
-.btn-default,
-.select-kit .select-kit-header {
-  border: 1px solid var(--accent-color);
+.btn-default {
+  border: 1px solid var(--primary-300);
   //id like to use rgba of the accent colour but how to derive that?
   // box-shadow: 0px 0px 8px 2px oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
   background: var(--secondary);
@@ -46,8 +45,9 @@
   }
   &:hover {
     .discourse-no-touch & {
-      border: 1px solid transparent;
-      box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
+      border: 1px solid var(--accent-color);
+      box-shadow: 0px 0px 8px 2px
+        oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
       background: var(--secondary);
       color: var(--accent-color);
       .d-icon {

scss/chat.scss

@@ -1,16 +1,43 @@
 .full-page-chat.full-page-chat-sidebar-enabled {
   border-top-left-radius: var(--d-border-radius-large);
-  box-shadow: 0px 0px 1px 2px var(--tertiary-100),
-    0px 0px 24px 4px var(--tertiary-100);
+  border-top-right-radius: var(--d-border-radius-large);
+  box-shadow: 0px 0px 0px 2px
+      oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
+    0px 0px 8px 2px
+      oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h);
   border: none;
 }
 
 .c-navbar-container {
   border-top-left-radius: var(--d-border-radius-large);
-  padding: 0 1.5rem;
+  border-top-right-radius: var(--d-border-radius-large);
+  padding: 0 1.5em;
   background-color: var(--d-content-background);
 }
 
 body.has-full-page-chat {
   background-color: var(--background-color);
 }
+
+.chat-drawer .chat-drawer-container {
+  box-shadow: 0px 0px 0px 2px
+      oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
+    0px 0px 8px 2px
+      oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h);
+  border: none;
+}
+
+.chat-drawer .channels-list-container .chat-channel-row {
+  margin-bottom: var(--spacing-block-xs);
+  font-size: var(--font-up-1);
+  border-radius: var(--d-border-radius);
+  &:hover {
+    background-color: var(--d-sidebar-active-background);
+  }
+}
+
+.channel-title {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: var(--font-down-1);
+}

scss/main.scss

@@ -6,6 +6,17 @@ html:not(:has(.has-full-page-chat)) {
   --main-grid-gap: 2em;
 }
 
+body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
+  grid-column-gap: var(--main-grid-gap);
+}
+
+body.has-sidebar-page #main-outlet-wrapper {
+  grid-template-columns: var(--d-sidebar-width) 1fr 0px;
+  #main-outlet {
+    max-width: unset;
+  }
+}
+
 body:not(.has-full-page-chat) {
   background-color: var(--background-color);
   #main-outlet-wrapper {
@@ -45,7 +56,8 @@ body:not(.has-full-page-chat) {
       .discourse-post-event-upcoming-events,
       .container.groups-index,
       .body-page,
-      .container.badges {
+      .container.badges,
+      .topic-above-footer-buttons-outlet .presence-users {
         max-width: 1000px;
         margin-inline: auto;
         padding-inline: 1.5em;

scss/nav-pills.scss

@@ -12,13 +12,17 @@
       order: 1;
     }
   }
-  .combo-box .combo-box-header,
-  .discourse-post-event .discourse-post-event-widget {
+  .combo-box .combo-box-header {
     // needs more specificy than just in the button file
     background-color: var(--secondary);
-    border: 1px solid var(--accent-color);
     border-radius: var(--d-border-radius-large);
+    border: 1px solid var(--primary-300);
     // font-size: var(--font-up-1-rem);
+    &:hover {
+      border: 1px solid var(--accent-color);
+      box-shadow: 0px 0px 8px 2px
+        oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
+    }
   }
   .select-kit.combo-box.category-drop.has-selection
     .category-drop-header:hover {

scss/sidebar.scss

@@ -15,8 +15,11 @@
     // dont want to change fonts here just yet as font-size can be changed as a user pref.
     // – charlie: sure but I want it to be bigger by default
     // letter-spacing: 0.5px;
-    border-radius: 10px; // visually somewhat consistent with border on main outlet (?)
     transition: none;
+    border-radius: var(--d-border-radius);
+  }
+  .dropdown-menu__item .sidebar-section-link {
+    border-radius: 0px;
   }
 }
 .sidebar-section-wrapper {

scss/topic.scss

@@ -62,6 +62,23 @@
   padding: 0 24px;
 }
 
+.container.posts {
+  grid-template-columns: auto 150px;
+  @media screen and (max-width: 924px) {
+    grid-template-columns: auto auto;
+  }
+}
+
+.timeline-container .topic-timeline .timeline-ago {
+  max-width: unset;
+  overflow: unset;
+  text-overflow: unset;
+}
+
+.timeline-container .topic-timeline .timeline-scroller-content {
+  overflow: unset;
+}
+
 .more-topics__container
   .more-topics__list
   .topic-list-body

scss/variables.scss

@@ -1,5 +1,6 @@
 :root {
   color-scheme: light dark;
+  --d-max-width: 1000px;
   --d-border-radius-large: 20px;
   --d-border-radius: 8px;
   --d-input-border-radius: 6px;