discourse/app/assets/stylesheets/common/components/empty-states.scss
Kris 3c75a0a514
DEV: introduce additional CSS variables for theming (#38765)
This introduces some new CSS variables that I would have found useful
while building some themes recently:

for /categories — this helps control the category box width
`--category-boxes-min-width`
`--category-boxes-max-width`

rather than a mixin, just a couple simple variables for quotes 
`--d-post-aside-background`
`--d-post-aside-border-left`

nice to be able to control the heading font-weight in one place with 
`--heading-font-weight`

managing the button colors in the header
`--d-header-icon-color`
`--d-header-icon-color--hover`
`--d-header-icon-color--active`
`--d-header-icon-background--hover`
`--d-header-icon-background--active`

we have some calculations in the welcome banner for the search dropdown
height, these help there and make it easier to adjust styles generally:
`--d-welcome-banner-text-alignment`
`--d-welcome-banner-header-size`
`--d-welcome-banner-padding-top`
`--d-welcome-banner-padding-right`
`--d-welcome-banner-padding-bottom`
`--d-welcome-banner-padding-left`
`--d-welcome-banner-title-margin-bottom`

for links, if you'd like to change the decoration
`--d-link-text-decoration`
2026-03-23 09:47:28 -04:00

75 lines
1.2 KiB
SCSS
Vendored

@use "lib/viewport";
.empty-state {
&__container {
&.--with-image {
text-align: center;
}
&.--text-only {
.empty-state__title {
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
font-size: var(--font-up-1);
}
}
&.--empty-topic-filter {
margin: 0 auto;
width: 75%;
@include viewport.from(sm) {
padding-top: 7rem;
}
}
&.--empty-channels-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
height: 100%;
.empty-state__image {
margin-top: 0;
}
}
}
&__image {
svg {
width: 200px;
@include viewport.until(sm) {
width: 65vw;
}
}
@include viewport.until(sm) {
margin-top: 8vh;
}
}
&__cta {
margin-top: 2rem;
}
&__tip {
margin-top: 2rem;
font-size: var(--font-down-1);
color: var(--primary-medium);
.d-icon {
font-size: var(--font-down-1);
}
@include viewport.until(sm) {
position: absolute;
bottom: 3rem;
margin-inline: auto;
margin-top: 0;
left: 0;
}
}
}