197 lines
3.0 KiB
SCSS
197 lines
3.0 KiB
SCSS
.menu-slider {
|
|
trough {
|
|
background: $base;
|
|
border-radius: 0.3rem;
|
|
|
|
highlight,
|
|
progress {
|
|
background: $peach;
|
|
border-radius: 0.3rem;
|
|
}
|
|
}
|
|
|
|
slider {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
min-height: 1.6rem;
|
|
min-width: 1.6rem;
|
|
border: 0rem solid transparent;
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
&:hover {
|
|
trough {
|
|
background: $surface0;
|
|
}
|
|
|
|
slider {
|
|
background: $overlay0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-switch {
|
|
background-color: $surface0;
|
|
border-radius: 0.3rem;
|
|
|
|
&:checked {
|
|
background: $sky;
|
|
}
|
|
|
|
trough {
|
|
highlight,
|
|
progress {
|
|
background-color: $peach;
|
|
border-radius: 0.3rem;
|
|
}
|
|
}
|
|
|
|
slider {
|
|
box-shadow: none;
|
|
background-color: $overlay0;
|
|
min-height: 1.2rem;
|
|
min-width: 1.2rem;
|
|
border: 0rem solid transparent;
|
|
border-radius: 0.3rem;
|
|
margin: 0.1rem 0.2rem;
|
|
}
|
|
|
|
&:hover {
|
|
trough {
|
|
background: $surface0;
|
|
}
|
|
|
|
slider {
|
|
background: $overlay0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
background-color: $sky;
|
|
highlight,
|
|
progress {
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
|
|
highlight,
|
|
progress {
|
|
}
|
|
}
|
|
|
|
trough:focus {
|
|
|
|
slider {
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-separator {
|
|
min-height: .1rem;
|
|
margin: .6rem 0rem;
|
|
background: $surface1;
|
|
}
|
|
|
|
.menu-items {
|
|
background: $mantle;
|
|
border: .25rem solid $surface0;
|
|
border-radius: .5rem;
|
|
min-width: 375px;
|
|
color: $text;
|
|
}
|
|
|
|
.menu-items-container {
|
|
margin: 1rem 1.5rem;
|
|
}
|
|
|
|
.menu-dropdown-label {
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
color: $text;
|
|
}
|
|
|
|
.menu-active {
|
|
font-size: 0.95em;
|
|
font-weight: bold;
|
|
margin: 0rem .5rem;
|
|
margin-bottom: 0.5rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.menu-active-icon {
|
|
color: $overlay1;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
margin-right: 0.7rem;
|
|
}
|
|
|
|
.menu-active-percentage {
|
|
font-size: 1em;
|
|
margin-left: 0.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.menu-active-slider {
|
|
margin-left: 1rem;
|
|
margin-right: 1.5rem;
|
|
}
|
|
|
|
.menu-active-slider * {
|
|
min-height: 1.1em;
|
|
border-radius: .2em;
|
|
}
|
|
.menu-slider-container {
|
|
margin-bottom: .7rem;
|
|
}
|
|
|
|
.menu-label {
|
|
color: $text;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.menu-label-dim {
|
|
color: $overlay0;
|
|
margin-right: 1rem;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.dim {
|
|
color: $overlay0;
|
|
}
|
|
.menu-icon-button {
|
|
&:hover {
|
|
color: $surface2;
|
|
}
|
|
}
|
|
|
|
.menu-label-container {
|
|
margin-bottom: 1.3rem;
|
|
}
|
|
|
|
.menu-button {
|
|
margin-bottom: .4em;
|
|
}
|
|
|
|
.menu-button-name {
|
|
font-size: 0.95em;
|
|
font-weight: bold;
|
|
margin-left: 1rem;
|
|
margin-right: 1.2rem;
|
|
}
|
|
|
|
.menu-button-icon {
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
color: $overlay0;
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.menu-item-box {
|
|
margin-bottom: 0.5rem;
|
|
}
|