112 lines
2.1 KiB
SCSS
112 lines
2.1 KiB
SCSS
@import "~@/styles/forSize.mixin";
|
|
|
|
html { font-size: 16px; }
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#app {
|
|
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
|
|
|
|
button, input, select, textarea {
|
|
font-size: inherit;
|
|
|
|
&:disabled { cursor: not-allowed; }
|
|
}
|
|
|
|
button {
|
|
color: #1084AC;
|
|
cursor: pointer;
|
|
background-color: #1084AC0A;
|
|
border: solid thin #1084AC;
|
|
border-radius: 0.25em;
|
|
font-weight: bold;
|
|
font-size: 125%;
|
|
padding: 0.5em;
|
|
|
|
&:not(:disabled) {
|
|
&:hover, &:focus {
|
|
color: white;
|
|
background-color: #1084AC;
|
|
box-shadow: 0.125em 0.125em 0.25em #aaa;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 0.125em #999;
|
|
position: relative;
|
|
top: 0.125em;
|
|
left: 0.125em;
|
|
}
|
|
}
|
|
|
|
&:disabled { opacity: 0.75; }
|
|
|
|
}
|
|
|
|
button.low-profile {
|
|
color: black;
|
|
background-color: unset;
|
|
border: none;
|
|
box-shadow: none;
|
|
font-weight: normal;
|
|
transition-property: color, font-weight;
|
|
transition-duration: 250ms;
|
|
|
|
&:not(:disabled) {
|
|
&:hover, &:focus {
|
|
color: #1084AC;
|
|
font-weight: bold;
|
|
background-color: unset;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.spin {
|
|
animation-name: spin;
|
|
animation-duration: 1000ms;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.tumble {
|
|
animation-name: spin;
|
|
animation-duration: 2000ms;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(180deg); }
|
|
}
|
|
|
|
@include forSize(mobile) {
|
|
body { margin: 0; }
|
|
|
|
#app #debug-information .mobile { display: inline-block; }
|
|
}
|
|
|
|
@include forSize(tablet) {
|
|
#app #debug-information .tablet { display: inline-block; }
|
|
}
|
|
|
|
@include forSize(desktop) {
|
|
#app #debug-information .desktop { display: inline-block; }
|
|
}
|
|
|
|
@include forSize(ultrawide) {
|
|
html { font-size: 24px; }
|
|
|
|
#app #debug-information .ultrawide { display: inline-block; }
|
|
}
|