sthag
234f4e6e7d
Init example starts like an application with fullscreen steps leading to an idle or menu state. Each step has specific events to trigger the next step. - Add index screen to ui - Add own script - Update ui style
113 lines
No EOL
1.5 KiB
SCSS
113 lines
No EOL
1.5 KiB
SCSS
@use "sass:map";
|
|
|
|
@import "demo_config";
|
|
@import "hippie-style/hippie";
|
|
|
|
$z-indexes: (
|
|
"default": 0,
|
|
"content-bottom": 1,
|
|
"content-low": 2,
|
|
"content-med": 3,
|
|
"content-high": 4,
|
|
"content-top": 10,
|
|
"modal-low": 11,
|
|
"modal-med": 12,
|
|
"modal-high": 13,
|
|
"toast": 100
|
|
);
|
|
|
|
.op_show {
|
|
transition: $transition_show;
|
|
}
|
|
|
|
.op_hide {
|
|
transition: $transition_hide;
|
|
}
|
|
|
|
.html_ui {
|
|
height: 100%;
|
|
|
|
body {
|
|
position: relative;
|
|
min-height: 100%;
|
|
background-color: black;
|
|
}
|
|
}
|
|
|
|
#intro {
|
|
@extend %full_parent;
|
|
|
|
z-index: map.get($z-indexes, "content-top");
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: black;
|
|
|
|
h1,
|
|
p,
|
|
li {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.brand {
|
|
text-align: center;
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: 128px;
|
|
height: 128px;
|
|
background-color: white;
|
|
}
|
|
|
|
*+h1 {
|
|
margin-top: $space_small;
|
|
margin-bottom: $space_large;
|
|
}
|
|
}
|
|
|
|
.tech-stack {
|
|
display: flex;
|
|
padding-left: 0;
|
|
|
|
li {
|
|
list-style: none;
|
|
padding-inline: $space_double;
|
|
}
|
|
}
|
|
|
|
#agreement {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
background-color: $color_back_basic;
|
|
}
|
|
|
|
.toast {
|
|
z-index: map.get($z-indexes, "toast");
|
|
position: fixed;
|
|
right: $space_half;
|
|
bottom: $space_double;
|
|
|
|
p {
|
|
color: white;
|
|
}
|
|
|
|
kbd {
|
|
border-color: $color_brighter;
|
|
color: $color_back_io;
|
|
}
|
|
}
|
|
|
|
.hello {
|
|
flex: 0 1 auto;
|
|
padding: 1em 2em;
|
|
background-color: rgba(black, .25);
|
|
}
|
|
|
|
@import "modules/ui/new_module";
|
|
@import "modules/ui/settings_module";
|
|
@import "modules/ui/drag_module"; |