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

279 lines
4.0 KiB
SCSS

// stylelint-disable-next-line scss/partial-no-import
@import 'utilities';
html {
font-size: 62.5%;
}
body {
background-color: adjust-color($background, $lightness: -5%);
color: $foreground;
font-family: sans-serif;
font-size: 2rem;
}
a,
a:visited {
color: adjust-color($blue, $lightness: 10%);
&:hover {
color: $magenta;
}
}
h1,
h2,
p,
ul {
margin: 0;
}
ul {
padding-left: 2rem;
}
button {
&:hover {
cursor: pointer;
}
}
code {
background-color: adjust-color($background, $lightness: -5%);
}
details {
border: 0.25rem solid $blue;
margin-bottom: 1rem;
padding: 1rem;
> summary {
cursor: pointer;
&::after {
content: 'Click to expand.';
}
}
&[open] > summary {
margin-bottom: 0.25rem;
&::after {
content: 'Click to collapse.';
}
}
}
p {
margin-bottom: 1rem;
}
*:last-child > p:last-child {
margin-bottom: 0;
}
.red-re {
color: $red;
}
p > .red-re {
font-weight: bolder;
}
.asterisk-link {
font-family: monospace;
text-decoration: none;
}
#wrapper {
padding: 1rem;
}
#header {
align-items: center;
display: flex;
padding-bottom: 1rem;
> img {
height: 4rem;
margin: 0 1rem 0 0;
}
> h1 {
margin-right: auto;
}
> #version {
align-self: flex-end;
}
}
#main {
background-color: $background;
border-top: 0.25rem solid $blue;
border-bottom: 0.25rem solid $cyan;
display: grid;
grid-template-columns: 35% 65%;
padding: 1rem;
}
#settings-list {
display: flex;
flex-direction: column;
margin-right: 1rem;
> a {
background-color: adjust-color($background, $lightness: 5%);
border-bottom: 0.25rem solid adjust-color($background, $lightness: -5%);
color: $foreground;
padding: 2rem;
&:last-child {
border-bottom: none;
}
&:hover:not(.active) {
background-color: adjust-color($blue, $lightness: -20%);
cursor: pointer;
}
&.active {
background-color: adjust-color($blue, $lightness: -10%);
}
}
}
.setting {
> header {
border-bottom: 0.25rem solid $red;
margin-bottom: 1rem;
display: flex;
padding-bottom: 0.5rem;
> h2 {
margin-right: auto;
}
> button {
align-self: flex-start;
background-color: $red;
border: none;
color: $foreground;
padding: 0.5rem;
min-width: 10rem;
&:hover {
background-color: adjust-color($red, $lightness: -10%);
}
}
}
&.enabled > header {
border-color: $green;
> button {
background-color: $green;
&:hover {
background-color: adjust-color($green, $lightness: -10%);
}
}
}
&:not(.active) {
display: none;
}
}
#debug {
display: flex;
flex-direction: column;
height: 100%;
&:not(.active) {
display: none;
}
&-buttons {
align-self: flex-end;
margin-top: auto;
}
}
#hide-votes {
form {
margin-left: 1rem;
> div {
margin-bottom: 0.5rem;
}
}
}
#import-export {
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 1rem;
> button {
border: none;
color: $foreground;
background-color: $cyan;
padding: 1rem;
&:hover {
background-color: adjust-color($cyan, $lightness: -10%);
}
&:last-child {
margin-left: 1rem;
}
}
}
#footer {
align-items: center;
display: flex;
justify-content: center;
padding: 2rem 0;
p {
margin: 0;
}
}
#copy-bug-template-button,
#log-stored-data-button,
#remove-all-data-button {
align-self: flex-end;
border: none;
color: $foreground;
padding: 0.5rem 1rem;
width: auto;
}
#copy-bug-template-button,
#log-stored-data-button {
background-color: $blue;
&:hover {
background-color: adjust-color($blue, $lightness: -10%);
}
}
#remove-all-data-button {
background-color: $red;
&:hover {
background-color: adjust-color($red, $lightness: -10%);
}
}
@media (min-width: $large-breakpoint) {
#wrapper {
margin: 0 auto;
width: $large-breakpoint;
}
}