discourse/app/assets/stylesheets/common/admin/admin_config_area.scss
Martin Brennan fa9606016c
UX: Site setting filter background inconsistencies (#30393)
Followup 203f93bcaf

This commit makes sure the background for all the admin
site settings filters (including the filter input and
override checkbox) is consistent no matter what the theme,
as it currently changes based on theme.
2024-12-20 10:51:35 +10:00

120 lines
2.0 KiB
SCSS

.admin-config-area {
.btn-back {
margin-bottom: 1em;
}
}
.admin-config-area-card {
padding: 20px 5px 20px 20px;
border: 1px solid var(--primary-low);
border-radius: 2px;
background-color: var(--secondary);
margin-bottom: 1em;
&__label-optional {
color: var(--primary-medium);
font-size: var(--font-down-1);
margin-left: 5px;
}
&__additional-help {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
&__warning-banner {
color: var(--primary-high);
background-color: var(--danger-low);
font-size: var(--font-down-1);
padding: 10px 10px;
}
&__control-group-horizontal {
display: flex;
margin-bottom: 18px;
label {
margin-right: 1em;
}
}
&__title {
flex: 2;
margin-bottom: 0;
}
&__header-wrapper {
display: flex;
align-items: center;
flex: 1;
}
&__content {
margin-top: 0.5rem;
padding-right: 15px;
}
}
.admin-config-page {
&__main-area {
.admin-detail {
padding-top: 15px;
border-left: 0;
padding-left: 0;
width: 100%;
}
}
}
.admin-config-area {
display: flex;
flex-wrap: nowrap;
gap: var(--space-4);
align-items: flex-start;
@media (max-width: $mobile-breakpoint) {
flex-direction: column;
}
&__primary-content {
flex: 0 1 70%;
@media (max-width: $mobile-breakpoint) {
flex: 0 1 auto;
}
}
&__aside {
/* use for help inset */
flex: 0 1 30%;
padding: var(--space-2);
@media (max-width: $mobile-breakpoint) {
flex: 0 1 auto;
}
}
&__settings {
.setting-label {
margin-left: 18px;
}
}
}
.admin-site-settings-filter-controls {
background: var(--primary-very-low);
margin-bottom: 1em;
.controls,
.search.controls {
background: var(--primary-very-low);
}
}
.admin-config-area-empty-list {
padding: 1em;
border: 1px solid var(--primary-low);
&__cta-button {
display: flex;
margin-top: 1em;
}
}