chapoi
120 lines
2.9 KiB
SCSS
120 lines
2.9 KiB
SCSS
:root {
|
|
--main-grid-gap: 2em;
|
|
}
|
|
|
|
html:not(:has(.has-full-page-chat)) {
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
#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;
|
|
}
|
|
}
|
|
}
|
|
|
|
body.has-sidebar-page #main-outlet-wrapper {
|
|
grid-template-columns: var(--d-sidebar-width) minmax(0, 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 minmax(0, 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);
|
|
}
|
|
#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,
|
|
.welcome-banner,
|
|
.container .user-main,
|
|
.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;
|
|
}
|
|
background-color: var(--d-content-background);
|
|
}
|
|
}
|
|
}
|
|
|
|
#list-area {
|
|
.show-more.has-topics {
|
|
@include breakpoint(medium, $rule: min-width) {
|
|
width: auto;
|
|
right: 50%;
|
|
transform: translateX(50%);
|
|
|
|
.alert {
|
|
padding: var(--spacing-block-sm) var(--spacing-inline-m);
|
|
border-radius: var(--d-border-radius-large);
|
|
font-size: var(--font-down-1-rem);
|
|
}
|
|
}
|
|
}
|
|
.topic-list-body {
|
|
padding-top: var(--spacing-block-m);
|
|
}
|
|
}
|
|
|
|
aside.onebox {
|
|
background-color: var(--d-content-background);
|
|
}
|
|
|
|
.d-editor-preview-wrapper {
|
|
border-radius: var(--d-border-radius);
|
|
padding: 1em;
|
|
background-color: var(--d-content-background);
|
|
}
|