discourse/app/assets/stylesheets/common/admin/settings.scss

140 lines
3.2 KiB
SCSS

// styles for admin/settings
.settings {
.setting {
padding-bottom: 20px;
.setting-label {
float: left;
width: 17.6576%;
margin-right: 12px;
@media (max-width: $mobile-breakpoint) {
float: none;
margin-right: 0;
width: 100%;
h3 {
margin-bottom: 6px;
}
}
.history-icon {
opacity: 0;
transition: opacity 0.3s;
color: var(--primary-medium);
}
&:hover .history-icon {
opacity: 1;
}
}
.setting-value {
float: left;
width: 53%;
padding-right: 20px;
input[type="checkbox"],
input[type="radio"] {
flex: 0 0 auto;
}
.category-selector {
width: 95%;
}
@media (max-width: $mobile-breakpoint) {
width: 100%;
padding-right: 0;
}
.select-kit {
width: 100% !important; // Needs !important to override hard-coded value
@media (max-width: $mobile-breakpoint) {
width: 100% !important; // !important overrides hard-coded mobile width of 68px
}
}
.image-uploader {
display: flex;
}
.uploaded-image-preview {
background-size: contain;
background-repeat: no-repeat;
background-color: var(--primary-medium);
}
}
.setting-controls {
float: left;
}
.input-setting-string,
.input-setting-textarea {
width: 100%;
@media (max-width: $mobile-breakpoint) {
width: 100%;
}
}
.input-setting-textarea {
height: 150px;
}
.input-setting-list {
@media (max-width: $mobile-breakpoint) {
width: 100%;
}
padding: 1px;
background-color: var(--secondary);
border: 1px solid var(--primary-low);
border-radius: 3px;
transition: border linear 0.2s, box-shadow linear 0.2s;
li.sortable-placeholder {
@include unselectable;
padding: 3px 5px 3px 18px;
margin: 3px 0 3px 5px;
position: relative;
line-height: var(--line-height-small);
cursor: default;
border: 1px dashed var(--primary-low-mid);
border-radius: 3px;
background-clip: padding-box;
background-color: transparent;
width: 3em;
height: 1em;
}
}
.desc,
.validation-error {
padding-top: 3px;
font-size: var(--font-down-1);
line-height: var(--line-height-large);
}
.validation-error {
color: var(--danger);
}
.desc {
color: var(--primary-medium);
}
h3 {
font-size: var(--font-0);
font-weight: normal;
}
}
.setting.overridden {
input {
background-color: var(--highlight-medium);
}
h3 {
position: relative;
&:before {
content: "";
position: absolute;
top: 0.5rem;
left: -1rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
background-color: var(--highlight-high);
}
}
}
.setting.overridden.string {
input[type="text"],
input[type="password"],
textarea {
background-color: var(--highlight-medium);
}
}
.warning {
color: var(--danger);
}
}