stremio-web/src/routes/Settings/styles.less
2018-11-07 14:58:31 +02:00

104 lines
No EOL
2.9 KiB
Text

@import 'stremio-colors';
.settings {
height: 100%;
display: flex;
color: @colorwhite60;
font-family: LatoLight;
.side-menu {
width: 240px;
padding: 20px;
display: flex;
font-size: 14px;
flex-direction: column;
background: @colordarkest;
.menu-option {
padding: 14px;
font-weight: 600;
&:hover {
cursor: pointer;
color: @colorwhite;
background: @colorglass;
}
&.menu-option-selected {
cursor: pointer;
color: @colorwhite;
background: @colorglass;
}
}
}
.player-preferences-menu {
height: 145px;
margin: 40px 50px;
border-bottom: 1px solid @colormedium;
.preferences-section {
display: flex;
cursor: pointer;
margin-bottom: 30px;
align-items: center;
.preference {
width: 280px;
}
.default-checkbox {
display: none;
}
.checkbox {
width: 14px;
height: 14px;
cursor: pointer;
border: 2px solid @colorwhite60;
.checkmark {
width: 10px;
height: 10px;
display: none;
fill: @colorwhite;
}
}
input:checked ~ .checkbox {
background-color: @colorprimlight;
border: 2px solid @colorprimlight;
.checkmark {
display: block;
}
}
input:checked ~ .preference {
color: @colorwhite;
}
}
}
.language-menu {
margin: 40px 50px;
.language-section {
border-bottom: 1px solid @colormedium;
.headline {
font-weight: 600;
color: @colorwhite40;
}
.selected-language {
height: 40px;
width: 280px;
padding: 20px;
display: flex;
margin: 30px 0px;
align-items: center;
justify-content: space-between;
font-weight: 600;
color: @colorwhite;
background-color: @colordarkest;
border: 1px solid @colortransparent;
.arrow-down {
width: 8px;
height: 10px;
fill: @colorwhite40;
}
&:hover {
cursor: pointer;
border: 1px solid @colormedium;
}
}
&:not(:last-child) {
margin-bottom: 30px;
}
}
}
}