prettier

common/common.scss

@@ -1,14 +1,13 @@
-@import "buttons";
-@import "compose";
-@import "header";
-@import "hiddenstuff";
-@import "main";
-@import "nav-pills";
-@import "search-banner";
-@import "sidebar";
-@import "topic";
-@import "topic-cards";
 @import "variables";
-@import "box-view";
+@import "header";
+@import "sidebar";
+@import "main";
+@import "topic-cards";
+@import "search-banner";
+@import "nav-pills";
+@import "buttons";
 @import "chat";
+@import "hiddenstuff";
+@import "topics";
 @import "misc";
+@import "box-view";

mobile/mobile.scss

@@ -1,3 +0,0 @@
-#main-outlet-wrapper {
-  padding: 0;
-}

scss/box-view.scss

@@ -1,15 +1,8 @@
-@media screen and (min-width: 1300px) {
-  #main-outlet {
-    border-top-right-radius: var(--d-border-radius-large);
-    border-top-left-radius: var(--d-border-radius-large);
-  }
-}
 .experimental-screen {
-  max-width: unset !important;
-  .has-full-page-chat & {
+  @media screen and (max-width: 488px) {
     display: none;
   }
-  @media screen and (max-width: 488px) {
+  @media screen and (min-width: 1600px) {
     display: none;
   }
   width: 100%;
@@ -41,7 +34,7 @@
   }
   &__top-left {
     top: var(--header-offset);
-    left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
+    left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
     @media screen and (max-width: 768px) {
       left: var(--main-grid-gap);
     }
@@ -51,7 +44,7 @@
     transform: rotate(90deg);
     @container content-width (width > 1px) {
       left: calc(
-        var(--main-grid-gap) + var(--d-sidebar-width) + 100cqw -
+        var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
           var(--d-border-radius-large)
       );
       @media screen and (max-width: 768px) {
@@ -64,7 +57,7 @@
   &__bottom-left {
     transform: rotate(-90deg);
     bottom: var(--d-border-radius-large);
-    left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
+    left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
     @media screen and (max-width: 768px) {
       left: var(--main-grid-gap);
       bottom: calc(var(--d-border-radius-large) * 2);
@@ -75,7 +68,7 @@
     bottom: var(--d-border-radius-large);
     @container content-width (width > 1px) {
       left: calc(
-        var(--main-grid-gap) + var(--d-sidebar-width) + 100cqw -
+        var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
           var(--d-border-radius-large)
       );
       @media screen and (max-width: 768px) {
@@ -92,7 +85,7 @@
     z-index: 999;
     background-color: var(--secondary);
     bottom: 0;
-    left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
+    left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
     @media screen and (max-width: 768px) {
       left: var(--main-grid-gap);
       height: calc(var(--d-border-radius-large) * 2);

scss/buttons.scss

@@ -1,137 +1,15 @@
-:root {
-  --d-button-border-radius: 6.25rem;
+.btn {
+  padding: 0.5em 1rem;
 }
 
-.discourse-no-touch .topic-body .actions .fade-out {
-  transition: none;
+.sidebar-new-topic-button__wrapper {
+  margin: 1.5rem 1rem;
 }
 
-.btn-default,
-.btn-primary,
-.btn-danger,
-.select-kit .select-kit-header {
-  padding: var(--spacing-block-s) var(--spacing-inline-m);
-  // font-size: var(--font-up-1-rem);
-  // border-radius: var(--d-button-border-radius);
-
-  &.no-text {
-    padding-inline: 0.665rem;
-  }
-}
-
-.sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
-  background: var(--accent-color);
-  &:hover {
-    background: radial-gradient(
-        90% 110% at 50% 50%,
-        rgba(255, 255, 255, 0.3) 0%,
-        rgba(255, 255, 255, 0) 100%
-      ),
-      var(--accent-color);
-  }
-  svg {
-    color: var(--secondary);
-  }
-}
-
-.btn-default,
-.select-kit .select-kit-header {
-  border: 1px solid var(--accent-color);
-  //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);
-
-  .d-icon {
-    color: var(--accent-color);
-  }
-  &:hover {
-    .discourse-no-touch & {
-      border: 1px solid transparent;
-      box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
-      background: var(--secondary);
-      color: var(--accent-color);
-      .d-icon {
-        color: var(--accent-color);
-      }
-    }
-  }
-  &:focus-visible {
-    .discourse-no-touch & {
-      background: var(--secondary);
-      color: var(--accent-color);
-      box-shadow: 0px 0px 0px 2px var(--secondary),
-        0px 0px 0px 4px var(--accent-color);
-      .d-icon {
-        color: var(--accent-color);
-      }
-    }
-  }
-}
-//not shared with select-kit
-.btn-default {
-  &:active {
-    .discourse-no-touch & {
-      color: var(--secondary);
-      background: oklch(from var(--accent-color) 30% c h) !important;
-      .d-icon {
-        color: var(--secondary);
-      }
-    }
-  }
-}
-.btn-primary,
-#create-topic.btn {
+.sidebar-new-topic-button__wrapper .btn {
   background-color: var(--accent-color);
   color: var(--accent-text-color);
-  .d-icon {
+  svg {
     color: var(--accent-text-color);
   }
-  &:hover {
-    .discourse-no-touch & {
-      background: radial-gradient(
-          90% 110% at 50% 50%,
-          rgba(255, 255, 255, 0.3) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        var(--accent-color);
-      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
-    }
-  }
-  &:focus-visible {
-    .discourse-no-touch & {
-      background: radial-gradient(
-          90% 110% at 50% 50%,
-          rgba(255, 255, 255, 0.3) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        var(--accent-color);
-      box-shadow: 0px 0px 0px 2px var(--secondary),
-        0px 0px 0px 4px var(--accent-color);
-    }
-  }
-  &:active {
-    .discourse-no-touch & {
-      // background: radial-gradient(
-      //     65% 95% at 50% 50%,
-      //     rgba(0, 0, 0, 0.4) 0%,
-      //     rgba(0, 0, 0, 0) 100%
-      //   ),
-      //   var(--accent-color) !important;
-      background: oklch(from var(--accent-color) 30% c h) !important;
-    }
-  }
-}
-
-.post-controls {
-  svg.d-icon {
-    color: inherit !important; //something we should honestly implement in core imo, when do we ever NOT want the same colour for icon and text?
-  }
-}
-
-//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,
-.select-kit.single-select .select-kit-header:not(.btn):active {
-  outline: transparent;
-  border-color: var(--accent-color);
 }

scss/chat.scss

@@ -1,15 +1,10 @@
-.full-page-chat.full-page-chat-sidebar-enabled {
-  border-top-left-radius: var(--d-border-radius-large);
-  box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
-  border: none;
-}
+// .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);
+// }
 
-.has-full-page-chat .d-header {
-  background-color: transparent;
-}
-
-.c-navbar-container {
-  border-top-left-radius: var(--d-border-radius-large);
-  padding: 0 1.5rem;
-  background-color: var(--d-content-background);
-}
+// .chat-message-container,
+// .chat-transcript {
+//   background: transparent;
+// }

scss/compose.scss

@@ -1,3 +0,0 @@
-#reply-control {
-  z-index: 999;
-}

scss/hiddenstuff.scss

@@ -1,8 +1,5 @@
 .sidebar__panel-switch-button,
 .sidebar-section[data-section-name="messages"],
-.list-controls #create-topic,
-.notifications-button-footer .reason .text,
-.pinned-button .reason .text,
-.more-topics__browse-more {
+.list-controls #create-topic {
   display: none;
 }

scss/main.scss

@@ -2,74 +2,71 @@ html:not(:has(.has-full-page-chat)) {
   background-color: #f5f8ff;
 }
 
-:root {
-  --main-grid-gap: 2em;
+body.has-sidebar-page #main-outlet-wrapper {
+  grid-template-columns: 0px 1fr minmax(0, var(--d-max-width)) 1fr;
+  grid-template-areas:
+    "space sidebar content"
+    "space sidebar content";
+  gap: 0 var(--main-grid-gap);
+}
+
+@media screen and (max-width: 488px) {
+  #main-outlet-wrapper {
+    gap: 0;
+  }
+}
+
+.powered-by-discourse {
+  display: none;
 }
 
 body:not(.has-full-page-chat) {
-  background-color: #f5f8ff;
+  #main-outlet {
+    // 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;
+    background-color: #ffffff;
+    padding-bottom: calc(var(--d-border-radius-large) * 2);
+  }
   #main-outlet-wrapper {
     // margin-top: 1.5rem;
-    @media screen and (max-width: 485px) {
-      --main-grid-gap: 0;
-    }
-    gap: var(--main-grid-gap);
+    // gap: 2em !important;
     // height: calc(100vh - var(--header-offset) - 4rem);
     // box-sizing: border-box;
+    // what does this do?
     // > * {
-    // height: inherit;
-    // box-sizing: border-box;
+    //   height: inherit;
+    //   box-sizing: border-box;
     // }
     #main-outlet {
-      width: 100%;
+      position: relative;
       // height: inherit;
       // overflow: scroll;
       // &:has(.list-controls) {
-      // padding-top: 0;
+      //   padding-top: 0;
       // }
       // &:has(#topic-title) {
-      // padding-top: 0;
+      //   padding-top: 0;
       // }
       > *:not(.full-page-chat) {
-        max-width: 1000px;
-        margin-inline: auto;
         padding-inline: 1.5em;
-        @media screen and (max-width: 425px) {
-          padding-inline: 0.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: var(--d-content-background);
+      // background-color: light-dark(#ffffff, #000000);
     }
   }
-
-  // .global-notice {
-  //   margin-top: var(--spacing-block-m);
-  // }
 }
 
-aside.onebox {
-  background-color: var(--d-content-background);
-}
-
-.d-editor-preview-wrapper {
-  box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
-  border-radius: var(--d-border-radius-large);
-  padding: 1em;
-  background-color: var(--d-content-background);
+.boxed.white {
+  background-color: #fff;
 }

scss/misc.scss

@@ -1,45 +1,3 @@
 .user-main .about.collapsed-info .details {
-  background: var(--d-content-background);
-}
-
-.user-menu .quick-access-panel .read,
-.user-notifications-list .read {
-  background: var(--d-content-background);
-}
-
-.powered-by-discourse {
-  z-index: 9999;
-}
-
-.boxed.white {
-  background-color: var(--d-content-background);
-}
-
-.admin-area .sidebar-wrapper .admin-panel {
-  background-color: transparent;
-}
-
-.admin-report .main .report-alert.no-data,
-.admin-report .main .report-alert.rate-limited {
-  background-color: var(--d-content-background);
-}
-
-.admin-detail {
-  background-color: var(--d-content-background);
-}
-
-.select-kit.combo-box .select-kit-header,
-.select-kit.multi-select .multi-select-header,
-.d-editor-textarea-wrapper,
-.fk-d-menu__inner-content,
-.menu-panel {
-  background-color: var(--d-content-background);
-}
-
-.fk-d-menu .btn {
-  border-radius: 0;
-}
-
-.d-editor-button-bar {
-  padding: 3px;
+  background: #fff;
 }

scss/nav-pills.scss

@@ -1,37 +1,23 @@
 .list-controls {
   position: sticky;
   top: var(--header-offset);
-  background: var(--d-content-background);
+  background: #ffffff;
   z-index: 100;
   padding: 1.5rem 0 1rem 0;
   max-width: unset;
 
   .navigation-container {
-    gap: 1rem;
     .category-breadcrumb {
       order: 1;
     }
   }
   .combo-box .combo-box-header,
+  .select-kit.is-expanded .select-kit-body,
   .discourse-post-event .discourse-post-event-widget {
-    // 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);
-    // font-size: var(--font-up-1-rem);
-  }
-  .select-kit.combo-box.category-drop.has-selection
-    .category-drop-header:hover {
-    border-color: transparent;
+    background-color: #ffffff;
+    border-radius: var(--d-border-radius);
   }
 }
-
-.select-kit.is-expanded .select-kit-body {
-  border-radius: var(--d-border-radius);
-  border: 1px solid var(--accent-color);
-  background-color: var(--d-content-background);
-}
-
 .nav-pills > li > a:hover,
 .nav-pills > li button:hover {
   background: transparent;

scss/search-banner.scss

@@ -5,11 +5,13 @@
   grid-column-gap: 1em;
   grid-row-gap: 0.5em;
   border-bottom: 1px solid var(--primary-300);
-  padding: 1.5em 0 2.5em;
-  margin-bottom: 0;
+  padding: 2.5em 0 2.5em;
+  margin-bottom: 2.5em;
   --search-color: #595bca;
-  @media screen and (max-width: 900px) {
-    padding-bottom: 1em;
+  @media screen and (max-width: 700px) {
+    padding: 1em 1em 0 1em;
+    margin-bottom: 0.5em;
+    border-bottom: none;
   }
   h1 {
     grid-column: 1/2;
@@ -62,7 +64,7 @@
     display: none;
   }
   .search-input {
-    background: var(--d-content-background);
+    background: light-dark(#ffffff, #1f1f1f);
     border: 1px solid oklch(from var(--search-color) 80% calc(c * 2.5) h);
     box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
   }
@@ -75,10 +77,7 @@
   .search-menu .searching .d-icon {
     color: var(--search-color);
   }
-  .panel-body {
-    z-index: z("dropdown");
-  }
   .results {
-    background: var(--d-content-background);
+    background: light-dark(#ffffff, #1f1f1f);
   }
 }

scss/sidebar.scss

@@ -1,4 +1,14 @@
+:root {
+  // --d-sidebar-background: #f5f8ff;
+}
+
+.sidebar-section-link-wrapper .sidebar-section-link {
+  border-radius: var(--d-border-radius);
+}
+
 .sidebar-wrapper {
+  background: #f5f8ff;
+
   .has-full-page-chat & {
     background: transparent;
   }
@@ -9,43 +19,8 @@
   .sidebar-sections {
     padding: 0;
   }
-  .sidebar-section-link {
-    // font-size: var(--font-up-1); // dont want to change fonts here just yet as font-size can be changed as a user pref.
-    // font-family: "inter";
-    letter-spacing: 0.5px;
-    border-radius: 10px; //visually somewhat consistent with border on main outlet (?)
-    transition: none;
-  }
-}
-.sidebar-section-wrapper {
-  padding-block: 0.45em;
-  .sidebar-section-header {
-    // font-size: var(--font-down-1);
-  }
-  .sidebar-section-content {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-block-xs);
-  }
 }
 
-.sidebar-section-link-wrapper .sidebar-section-link:focus,
-.sidebar-section-link-wrapper .sidebar-section-link:hover {
-  .d-icon {
-    color: var(--primary);
-  }
-}
-
-.sidebar-new-topic-button__wrapper {
-  margin-bottom: 1.5rem;
-  @media screen and (max-width: 1000px) {
-    .sidebar-new-topic-button .d-icon {
-      display: none;
-    }
-  }
-}
-
-.sidebar-wrapper .sidebar-sections {
-  padding: 0 1rem;
+.admin-area .sidebar-wrapper .admin-panel {
+  background-color: var(--secondary);
 }

scss/topic-cards.scss

@@ -1,7 +1,7 @@
 .topic-list-item {
-  background: var(--d-content-background);
+  background: light-dark(#ffffff, #1f1f1f);
   &:hover {
-    background: oklch(from var(--d-content-background) 97% c h);
+    background: light-dark(#fcfcfc, #161616);
   }
   border: 1px solid #cedde3;
 }

scss/topic.scss

@@ -1,76 +0,0 @@
-.post-stream {
-  .contents p {
-    // font-size: var(--font-up-1);
-    line-height: 1.25;
-  }
-}
-
-.container.posts .topic-navigation {
-  top: calc(var(--header-offset, 60px) + 6em);
-}
-
-.timeline-container .topic-timeline {
-  min-width: unset; //why we have this?
-  .timeline-scrollarea {
-    border-left: 1px solid var(--accent-color);
-  }
-  .timeline-scroller {
-    padding: 0.25em;
-    border: 1px solid var(--accent-color);
-    border-radius: 0.75em;
-    padding-left: 0.5em;
-    margin-left: calc(-0.5em - 2.5px);
-    background: var(--secondary);
-    height: 40px !important; //height is coming from element style have no other choice
-  }
-  .timelime-scroller-content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25em;
-  }
-  .timeline-replies,
-  .timeline-ago {
-    line-height: 1;
-  }
-  .timeline-ago {
-    // font-size: var(--font-down-1);
-  }
-  .timeline-handle {
-    background-color: var(--accent-color);
-    width: 3px;
-    border-radius: 2px;
-    height: calc(100% - 6px);
-  }
-}
-
-#topic-title {
-  z-index: 999;
-  margin-bottom: 1em;
-  padding: 1.5rem 2rem 0.5em;
-  position: sticky;
-  top: var(--header-offset);
-  background: var(--d-content-background);
-}
-
-.container.posts,
-.more-topics__container,
-#topic-footer-buttons {
-  padding: 0 24px;
-}
-
-.more-topics__container
-  .more-topics__list
-  .topic-list-body
-  .topic-list-item:last-of-type {
-  border-bottom: 1px solid #cedde3;
-}
-
-.discourse-post-event .discourse-post-event-widget {
-  background: var(--d-content-background);
-}
-
-.more-topics__container .nav {
-  position: unset;
-  margin-block: unset;
-  margin-bottom: 1em;
-}

scss/topics.scss

@@ -0,0 +1,29 @@
+#topic-title {
+  z-index: 999;
+  margin-bottom: 1em;
+  padding: 1.5rem 2rem 0.5em;
+  position: sticky;
+  top: var(--header-offset);
+  background: #ffffff;
+}
+
+// .container.posts,
+// .more-topics__container,
+// #topic-footer-buttons {
+//   padding: 0 24px;
+// }
+
+.container.posts .topic-navigation {
+  top: calc(var(--header-offset, 60px) + 6em);
+}
+
+.discourse-post-event .discourse-post-event-widget {
+  background-color: #ffffff;
+}
+
+.more-topics__container
+  .more-topics__list
+  .topic-list-body
+  .topic-list-item:last-of-type {
+  border-bottom: 1px solid #cedde3;
+}

scss/variables.scss

@@ -1,36 +1,12 @@
 :root {
   --d-border-radius-large: 20px;
-  --d-border-radius: 8px;
+  --d-button-border-radius: 20px;
+  --d-border-radius: 6px;
   --d-input-border-radius: 6px;
-  --accent-color: #3c41c3;
+  --accent-color: #595bca;
   --accent-text-color: #ffffff;
-  --d-content-background: #fff;
   --d-nav-color--active: var(--accent-color);
-  --primary: #14171f;
-  --header-background: #f5f8ff;
-  --d-post-control-background--hover: #ebecf9;
-  --d-post-control-text-color--hover: #242775;
-  --d-sidebar-link-color: var(--primary);
-  --d-sidebar-highlight-color: var(--primary);
-  --d-sidebar-link-icon-color: #8591ad;
-  --d-sidebar-section-link-icon-size: 1em;
-  --d-sidebar-highlight-background: #ebecf9;
-  --d-sidebar-active-background: #d8d9f3;
-  --d-input-bg-color: var(--d-content-background);
-  // --d-sidebar-row-height: 2.8em;
-  //the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
-  --spacing-block-xs: 0.25em;
-  --spacing-block-s: 0.5em;
-  --spacing-block-sm: 0.75em;
-  --spacing-block-m: 1em;
-  --spacing-block-l: 1.5em;
-  --spacing-block-xl: 2em;
-  --spacing-block-xxl: 4em;
-  --spacing-inline-xs: 0.25em;
-  --spacing-inline-s: 0.5rem;
-  --spacing-inline-sm: 0.75rem;
-  --spacing-inline-m: 1rem;
-  --spacing-inline-l: 1.5rem;
-  --spacing-inline-xl: 2rem;
-  --spacing-inline-xxl: 4rem;
+  --primary: #0c0d27;
+  --main-grid-gap: 2em;
+  --d-max-width: 1000px;
 }