1
Fork 0
tildes-reextended/source/scss/_settings.scss

166 lines
2.8 KiB
SCSS
Raw Normal View History

.setting {
&.enabled {
--setting-color: var(--green);
--setting-color-alt: var(--dark-green);
}
&.disabled {
--setting-color: var(--red);
--setting-color-alt: var(--dark-red);
}
header {
border-bottom: 2px solid var(--setting-color);
display: flex;
margin-bottom: 8px;
padding-bottom: 8px;
h2 {
margin-right: auto;
}
button {
background-color: var(--setting-color);
color: var(--foreground);
border: none;
font-weight: bold;
min-width: 10rem;
padding: 4px 0;
&:hover {
background-color: var(--setting-color-alt);
cursor: pointer;
}
}
}
.content {
br {
margin-bottom: 8px;
}
code {
background-color: var(--background-primary);
}
p {
line-height: 125%;
margin-bottom: 8px;
}
}
.info {
border: 1px solid var(--blue);
padding: 8px;
}
.divider {
border-top: 1px solid var(--blue);
margin: 16px 0;
}
.button {
@include button;
}
.import-export {
display: grid;
gap: 8px;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 8px;
p {
grid-column: 1 / 3;
margin: 0;
}
}
.misc-utilities .inner {
display: grid;
gap: 8px;
grid-template-columns: repeat(2, 1fr);
}
.checkbox-list {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
label {
cursor: pointer;
display: inline-flex;
user-select: none;
}
input {
cursor: pointer;
margin-right: 8px;
}
}
.user-label-values {
display: flex;
flex-direction: column;
gap: 8px;
list-style: square;
padding: 8px 8px 8px 24px;
}
2022-02-25 00:06:24 +00:00
.username-colors-controls {
display: grid;
gap: 8px;
grid-template-columns: repeat(3, 1fr);
.save-button.unsaved-changes {
background-color: var(--yellow);
}
2022-02-25 00:06:24 +00:00
}
.username-colors-editor {
display: grid;
gap: 8px;
grid-template-columns: auto auto min-content;
margin-top: 8px;
input {
background-color: var(--background-primary);
border: 1px solid var(--save-status-color);
2022-02-25 00:06:24 +00:00
color: var(--foreground);
padding: 8px;
}
.button {
min-width: 10rem;
}
}
.has-save-status {
--save-status-color: var(--blue);
&.unsaved-changes {
--save-status-color: var(--unsaved-changes-color);
}
}
.styled-checkbox {
align-items: center;
background-color: var(--background-primary);
border: 1px solid var(--blue);
cursor: pointer;
display: flex;
padding: 8px;
input[type="checkbox"] {
margin-right: 1rem;
}
}
.styled-select {
background-color: var(--background-primary);
border: 1px solid var(--save-status-color, var(--blue));
color: var(--foreground);
padding: 8px;
}
}