diff --git a/common/common.scss b/common/common.scss index 05858bc..d3c631e 100644 --- a/common/common.scss +++ b/common/common.scss @@ -7,10 +7,4 @@ @import "nav-pills"; @import "buttons"; @import "chat"; - -.list-controls .combo-box .combo-box-header, -.select-kit.is-expanded .select-kit-body, -.discourse-post-event .discourse-post-event-widget { - background-color: light-dark(#ffffff, #000000); - border-radius: var(--d-input-border-radius); -} +@import "hiddenstuff"; diff --git a/scss/buttons.scss b/scss/buttons.scss index eb7ccdb..4c81aa9 100644 --- a/scss/buttons.scss +++ b/scss/buttons.scss @@ -1,3 +1,15 @@ +:root { + --d-button-border-radius: 6.25rem; +} + +.btn { + padding: 0.5em 1rem; +} + +.btn-default { + border: 1px solid var(--accent-color); + background: var(--secondary); +} #create-topic.btn { background-color: var(--accent-color); color: var(--accent-text-color); diff --git a/scss/header.scss b/scss/header.scss index 2722230..1d70591 100644 --- a/scss/header.scss +++ b/scss/header.scss @@ -1,6 +1,6 @@ .d-header { box-shadow: none; } -.desktop-view .navigation-topics .d-header { +.desktop-view .d-header { background: transparent; } diff --git a/scss/hiddenstuff.scss b/scss/hiddenstuff.scss new file mode 100644 index 0000000..1964c13 --- /dev/null +++ b/scss/hiddenstuff.scss @@ -0,0 +1,5 @@ +.sidebar__panel-switch-button, +.sidebar-section[data-section-name="messages"], +.list-controls #create-topic { + display: none; +} diff --git a/scss/main.scss b/scss/main.scss index be0fa86..c6d459b 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -1,54 +1,65 @@ +body, +html { + background-color: #f5f8ff; +} + body:not(.archetype-regular, .has-full-page-chat) #main-outlet-wrapper #main-outlet { - height: 85vh; overflow: scroll; - padding: 16px 24px; border-radius: var(--d-border-radius-large); - background: radial-gradient( - 600px 600px at 50% 75%, - rgba(188, 241, 238, 0.2), - rgba(255, 255, 255, 0.2) - ), - radial-gradient( - 600px 600px at 75% 50%, - rgba(162, 165, 225, 0.2), - rgba(255, 255, 255, 0) - ); - background-color: light-dark(#ffffff, #000000); } -#main-outlet-wrapper #main-outlet { - border-radius: var(--d-border-radius-large); - // padding: 0 24px; - box-shadow: 0 10px 24px 4px #e2e8f8, 0 0 0 3px #e2e8f8, - 0 0 0 1px var(--primary-low); - width: calc(100% - 48px); - max-width: 1000px !important; - background: radial-gradient( - 600px 600px at 50% 75%, - rgba(188, 241, 238, 0.2), - rgba(255, 255, 255, 0.2) - ), - radial-gradient( - 600px 600px at 75% 50%, - rgba(162, 165, 225, 0.2), - rgba(255, 255, 255, 0) - ); - background-color: light-dark(#ffffff, #000000); +#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; + } + 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: 0.5em 24px; + padding: 1.5rem 2rem 0.5em; position: sticky; top: 0; - background-image: linear-gradient( - to right, - rgba(255, 255, 255, 1) 50%, - rgba(255, 255, 255, 0) 100% - ); + background: var(--secondary); } .container.posts, @@ -56,3 +67,7 @@ body:not(.archetype-regular, .has-full-page-chat) #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 4dc8681..d750469 100644 --- a/scss/nav-pills.scss +++ b/scss/nav-pills.scss @@ -1,3 +1,24 @@ +.list-controls { + position: sticky; + top: 0; + background: var(--secondary); + z-index: 100; + padding-top: 1.5rem; + max-width: unset; + width: 100%; + + .navigation-container { + .category-breadcrumb { + order: 1; + } + } + .combo-box .combo-box-header, + .select-kit.is-expanded .select-kit-body, + .discourse-post-event .discourse-post-event-widget { + background-color: var(--secondary); + border-radius: 6.25rem; + } +} .nav-pills > li > a:hover, .nav-pills > li button:hover { background: transparent; diff --git a/scss/sidebar.scss b/scss/sidebar.scss index 1f37ad8..c6841a5 100644 --- a/scss/sidebar.scss +++ b/scss/sidebar.scss @@ -1,3 +1,13 @@ -.sidebar-wrapper .sidebar-container { - border-right: none; +:root { + --d-sidebar-background: #f5f8ff; +} + +.sidebar-wrapper { + .sidebar-container { + border-right: none; + } + + .sidebar-sections { + padding: 0; + } } diff --git a/scss/variables.scss b/scss/variables.scss index ec46695..60c7af1 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -1,8 +1,9 @@ :root { --d-border-radius-large: 20px; - --d-border-radius: 8px; - --d-input-border-radius: 8px; + --d-border-radius: 6px; + --d-input-border-radius: 6px; --accent-color: #595bca; --accent-text-color: #ffffff; --d-nav-color--active: var(--accent-color); + --primary: #0c0d27; }