|
|
@ -1,4 +1,5 @@
|
|
|
|
@import './_variables.scss';
|
|
|
|
@import './_variables.scss';
|
|
|
|
|
|
|
|
|
|
|
|
#app {
|
|
|
|
#app {
|
|
|
|
background-size: cover;
|
|
|
|
background-size: cover;
|
|
|
|
background-attachment: fixed;
|
|
|
|
background-attachment: fixed;
|
|
|
@ -33,18 +34,22 @@ body {
|
|
|
|
font-family: sans-serif;
|
|
|
|
font-family: sans-serif;
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
color: var(--fg);
|
|
|
|
color: $fallback--fg;
|
|
|
|
|
|
|
|
color: var(--fg, $fallback--fg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
a {
|
|
|
|
text-decoration: none;
|
|
|
|
text-decoration: none;
|
|
|
|
color: var(--link);
|
|
|
|
color: $fallback--link;
|
|
|
|
|
|
|
|
color: var(--link, $fallback--link);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
button{
|
|
|
|
button{
|
|
|
|
user-select: none;
|
|
|
|
user-select: none;
|
|
|
|
color: var(--faint);
|
|
|
|
color: $fallback--faint;
|
|
|
|
background-color: var(--btn);
|
|
|
|
color: var(--faint, $fallback--faint);
|
|
|
|
|
|
|
|
background-color: $fallback--btn;
|
|
|
|
|
|
|
|
background-color: var(--btn, $fallback--btn);
|
|
|
|
border: none;
|
|
|
|
border: none;
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
@ -54,8 +59,6 @@ button{
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
font-family: sans-serif;
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
&:hover {
|
|
|
|
box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
|
|
|
|
box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -66,8 +69,10 @@ button{
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.pressed {
|
|
|
|
&.pressed {
|
|
|
|
color: var(--faint);
|
|
|
|
color: $fallback--faint;
|
|
|
|
background-color: var(--bg)
|
|
|
|
color: var(--faint, $fallback--faint);
|
|
|
|
|
|
|
|
background-color: $fallback--bg;
|
|
|
|
|
|
|
|
background-color: var(--bg, $fallback--bg)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -78,11 +83,13 @@ input, textarea, select {
|
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
|
box-shadow: 0px 0px 2px black inset;
|
|
|
|
box-shadow: 0px 0px 2px black inset;
|
|
|
|
background-color: var(--lightBg);
|
|
|
|
background-color: $fallback--lightBg;
|
|
|
|
color: var(--lightFg);
|
|
|
|
background-color: var(--lightBg, $fallback--lightBg);
|
|
|
|
|
|
|
|
color: $fallback--lightFg;
|
|
|
|
|
|
|
|
color: var(--lightFg, $fallback--lightFg);
|
|
|
|
font-family: sans-serif;
|
|
|
|
font-family: sans-serif;
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
padding: 5px;
|
|
|
|
padding: 8px 7px 4px;
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: Restyle <select> in a decent way. Needs different markup
|
|
|
|
// TODO: Restyle <select> in a decent way. Needs different markup
|
|
|
|
// -webkit-appearance:none;
|
|
|
|
// -webkit-appearance:none;
|
|
|
@ -93,7 +100,8 @@ input, textarea, select {
|
|
|
|
&[type=checkbox] {
|
|
|
|
&[type=checkbox] {
|
|
|
|
display: none;
|
|
|
|
display: none;
|
|
|
|
&:checked + label::before {
|
|
|
|
&:checked + label::before {
|
|
|
|
color: var(--fg);
|
|
|
|
color: $fallback--fg;
|
|
|
|
|
|
|
|
color: var(--fg, $fallback--fg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
+ label::before {
|
|
|
|
+ label::before {
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
@ -106,7 +114,8 @@ input, textarea, select {
|
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
|
box-shadow: 0px 0px 2px black inset;
|
|
|
|
box-shadow: 0px 0px 2px black inset;
|
|
|
|
margin-right: .5em;
|
|
|
|
margin-right: .5em;
|
|
|
|
background-color: var(--btn);
|
|
|
|
background-color: $fallback--btn;
|
|
|
|
|
|
|
|
background-color: var(--btn, $fallback--btn);
|
|
|
|
vertical-align: baseline;
|
|
|
|
vertical-align: baseline;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 1.1em;
|
|
|
|
line-height: 1.1em;
|
|
|
@ -126,7 +135,8 @@ input, textarea, select {
|
|
|
|
.icon-binoculars,
|
|
|
|
.icon-binoculars,
|
|
|
|
.icon-plus-squared,
|
|
|
|
.icon-plus-squared,
|
|
|
|
.icon-spin4 {
|
|
|
|
.icon-spin4 {
|
|
|
|
color: var(--icon)
|
|
|
|
color: $fallback--icon;
|
|
|
|
|
|
|
|
color: var(--icon, $fallback--icon)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -202,9 +212,12 @@ main-router {
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
margin: 0.5em;
|
|
|
|
margin: 0.5em;
|
|
|
|
|
|
|
|
|
|
|
|
background-color: var(--bg);
|
|
|
|
background-color: $fallback--bg;
|
|
|
|
|
|
|
|
background-color: var(--bg, $fallback--bg);
|
|
|
|
|
|
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
|
|
border-radius: $fallback--panelRadius;
|
|
|
|
|
|
|
|
border-radius: var(--panelRadius, 10px);
|
|
|
|
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
|
|
|
|
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -223,7 +236,8 @@ main-router {
|
|
|
|
text-align: left;
|
|
|
|
text-align: left;
|
|
|
|
font-size: 1.3em;
|
|
|
|
font-size: 1.3em;
|
|
|
|
line-height: 24px;
|
|
|
|
line-height: 24px;
|
|
|
|
background-color: var(--btn);
|
|
|
|
background-color: $fallback--btn;
|
|
|
|
|
|
|
|
background-color: var(--btn, $fallback--btn);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.panel-footer {
|
|
|
|
.panel-footer {
|
|
|
@ -246,8 +260,10 @@ main-router {
|
|
|
|
|
|
|
|
|
|
|
|
nav {
|
|
|
|
nav {
|
|
|
|
z-index: 1000;
|
|
|
|
z-index: 1000;
|
|
|
|
background-color: var(--bg);
|
|
|
|
background-color: $fallback--btn;
|
|
|
|
color: var(--faint);
|
|
|
|
background-color: var(--btn, $fallback--btn);
|
|
|
|
|
|
|
|
color: $fallback--faint;
|
|
|
|
|
|
|
|
color: var(--faint, $fallback--faint);
|
|
|
|
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
|
|
|
|
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|