67 lines
1.1 KiB
SCSS
67 lines
1.1 KiB
SCSS
$fxl-gray: #263238;
|
|
$fxl-orange: #ff6e40;
|
|
|
|
@use "@material/theme" with (
|
|
$primary: $fxl-orange,
|
|
$on-primary: $fxl-gray
|
|
);
|
|
|
|
@use "@material/button/styles";
|
|
@use "@material/button/mixins" as button-mixins;
|
|
@use "@material/icon-button/icon-button";
|
|
@use "@material/top-app-bar/mdc-top-app-bar";
|
|
@use "@material/typography/mdc-typography";
|
|
|
|
html, body {
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
@include icon-button.core-styles;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
main {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
|
|
header {
|
|
ul {
|
|
align-content: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
margin: 0 0.25em;
|
|
|
|
button.active-set {
|
|
@include button-mixins.filled-accessible($fxl-gray);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
article {
|
|
display: flex;
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
canvas {
|
|
margin: 2em auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
background-color: $fxl-orange;
|
|
font-size: smaller;
|
|
text-align: center;
|
|
}
|
|
} |