0
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-05 18:46:18 +08:00
discourse/app/assets/stylesheets/admin/site-settings.scss
Kris 1b559b6bc5
UX: improve admin filters, add to users and permalinks (#42029)
This makes some consistency improvements to our `DFilterControls`
component and applies it to the admin/users and admin/config/permalinks
pages


Before:
<img width="2250" height="592" alt="image"
src="https://github.com/user-attachments/assets/23eafb7a-948c-4414-93f0-a906ffedb714"
/>


After: 
<img width="2190" height="648" alt="image"
src="https://github.com/user-attachments/assets/e9cb4545-5b3a-4bd1-87ac-140113cee033"
/>


Before:
<img width="2234" height="886" alt="image"
src="https://github.com/user-attachments/assets/efc51dac-4f95-4731-8c83-5285ba5e2528"
/>


After:
<img width="2298" height="872" alt="image"
src="https://github.com/user-attachments/assets/d6434f44-311a-48cb-aeb6-b34fba7b9f05"
/>


Before:
<img width="2258" height="894" alt="image"
src="https://github.com/user-attachments/assets/95972f51-b306-4c27-93ad-2a7c6c66080a"
/>


After:
<img width="2236" height="932" alt="image"
src="https://github.com/user-attachments/assets/9cbfd319-e0ce-4bb5-97ea-c9e09c91dcf9"
/>
2026-07-24 17:04:26 -04:00

87 lines
1.6 KiB
SCSS
Vendored

@use "lib/viewport";
.admin-controls.admin-site-settings-filter-controls
.controls
.admin-site-settings-filter-controls__input {
max-width: 300px;
}
.fk-d-menu-modal.admin-site-settings-category-nav-content {
.admin-site-settings-category-nav__list a.active {
background: var(--d-selected);
}
}
.admin-filtered-site-settings {
padding: 1em;
}
body.has-admin-changes-banner #main-outlet {
// makes space so banner doesn't overlap content
padding-bottom: 6em;
}
.admin-changes-banner {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: var(--space-3);
padding: var(--space-3);
background-color: var(--secondary);
border: 1px solid var(--primary-300);
border-radius: var(--d-border-radius);
box-shadow: var(--shadow-card);
z-index: 1;
.footer-nav-visible & {
bottom: calc(
var(--footer-nav-height) + env(safe-area-inset-bottom) + var(--space-4)
);
}
@include viewport.until(sm) {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: var(--space-3);
}
.controls {
display: flex;
gap: var(--space-3);
}
em {
font-style: normal;
font-weight: 700;
}
}
.admin-theme-site-settings-row {
&__setting {
.setting-label {
margin: 0;
}
.setting-description {
color: var(--primary-high);
font-size: var(--font-down-1);
}
}
@include viewport.from(sm) {
&__setting {
width: 40%;
}
&__default {
width: 10%;
}
&__overridden {
width: 50%;
}
}
}