Files
discourse_theme_ran/scss/main.scss
T
2025-03-11 11:24:20 -05:00

121 lines
3.0 KiB
SCSS

html:not(:has(.has-full-page-chat)) {
background-color: var(--background-color);
}
:root {
--main-grid-gap: 2em;
}
#main-outlet-wrapper {
gap: var(--main-grid-gap);
}
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
grid-column-gap: var(--main-grid-gap);
}
body.has-full-page-chat:not(.has-sidebar-page) {
.d-header {
background-color: var(--background-color);
}
#main-outlet-wrapper {
gap: var(--main-grid-gap);
@include breakpoint("medium") {
gap: 0;
}
.full-page-chat.full-page-chat-sidebar-enabled,
.c-navbar-container {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
}
}
body.has-sidebar-page #main-outlet-wrapper {
grid-template-columns: var(--d-sidebar-width) 1fr 0px;
#main-outlet {
max-width: unset;
}
}
body:not(.has-sidebar-page) #main-outlet-wrapper {
@include breakpoint("medium", $rule: min-width) {
grid-template-columns: 0px 1fr 0px;
}
}
body:not(.has-full-page-chat) {
@include breakpoint(extra-large, $rule: min-width) {
background-color: var(--background-color);
}
#main-outlet-wrapper {
@include breakpoint(medium) {
--main-grid-gap: 0;
}
@include breakpoint(tablet, $rule: min-width) {
gap: var(--main-grid-gap);
}
// height: calc(100vh - var(--header-offset) - 4rem);
// box-sizing: border-box;
// > * {
// height: inherit;
// box-sizing: border-box;
// }
#main-outlet {
width: 100%;
padding-bottom: var(--spacing-block-l);
max-width: unset;
//thanks to random container elements on the page, I can't do a direct child selector here because it targets all the randomness, so I see no other option than MANUALLY adding every possible element that can appear in the main outlet YAY
.list-controls,
.list-container,
#topic-title,
.container.posts,
#topic-footer-buttons,
.more-topics__container,
.search-banner,
.container.viewing-self,
.reviewable,
.admin-content,
.discourse-post-event-upcoming-events,
.container.groups-index,
.body-page,
.container.badges,
.topic-above-footer-buttons-outlet .presence-users,
.global-notice {
@include breakpoint(medium, $rule: min-width) {
max-width: 1000px;
margin-inline: auto;
padding-inline: var(--spacing-inline-l);
}
}
border-radius: var(--d-border-radius-large);
@include breakpoint(medium) {
border-radius: 0px;
}
// box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
background-color: var(--d-content-background);
}
}
// .global-notice {
// margin-top: var(--spacing-block-m);
// }
}
.list-container {
.topic-list-body {
padding-top: var(--spacing-block-m);
}
}
aside.onebox {
background-color: var(--d-content-background);
}
.d-editor-preview-wrapper {
// box-shadow: 0px 0px 0px 2px var(--accent-color);
border-radius: var(--d-border-radius);
padding: 1em;
background-color: var(--d-content-background);
}