From 419bb3475accc8fa6c7e4f6cf29ba2374800451c Mon Sep 17 00:00:00 2001 From: Kris Date: Thu, 17 Aug 2023 16:51:57 -0400 Subject: [PATCH] UX: add banner bg, chat styles, regression fixes (#20) --- about.json | 8 ++++-- common/common.scss | 61 +++++++++++++++----------------------------- desktop/desktop.scss | 2 +- scss/chat.scss | 33 ++++++++++++++++++++++++ scss/sidebar.scss | 22 +++++++++++++++- 5 files changed, 82 insertions(+), 44 deletions(-) create mode 100644 scss/chat.scss diff --git a/about.json b/about.json index 8bf6282..37d8cb6 100644 --- a/about.json +++ b/about.json @@ -8,7 +8,9 @@ "secondary": "F6FBFC", "tertiary": "4F8A7C", "header_background": "ffffff", - "header_primary": "111111" + "header_primary": "111111", + "selected": "e3efec", + "hover": "e3efec" }, "mint-dark": { "primary": "e0e0e0", @@ -16,7 +18,9 @@ "tertiary": "4F8A7C", "header_background": "202020", "header_primary": "e0e0e0", - "highlight": "b2b235" + "highlight": "b2b235", + "selected": "1c302b", + "hover": "1c302b" } }, "components": [ diff --git a/common/common.scss b/common/common.scss index 9dbb2c7..5423d3b 100644 --- a/common/common.scss +++ b/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); diff --git a/desktop/desktop.scss b/desktop/desktop.scss index 6016b52..5637da5 100644 --- a/desktop/desktop.scss +++ b/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 { diff --git a/scss/chat.scss b/scss/chat.scss new file mode 100644 index 0000000..39d7dfd --- /dev/null +++ b/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); +} diff --git a/scss/sidebar.scss b/scss/sidebar.scss index 0dc8951..1b3330c 100644 --- a/scss/sidebar.scss +++ b/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); +}