interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Adapt new hippie-style structure

Browse source 
Sass deprecations removed.
This commit is contained in:
sthag 2025-10-26 11:37:47 +01:00
parent d9f7ae1ff9
commit c1fea8064e
11 changed files with 166 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

63
source/style/ui.scss
View file

@ -1,16 +1,24 @@
@use "sass:map";
@import "demo_config";
@import "hippie-style/hippie";
@use "demo_config";
@use "hippie-style/hippie";
$color_gui_back: $color_dark;
@use "modules/ui/frame_module";
@use "modules/ui/new_module";
@use "modules/ui/drag_module";
@use "modules/ui/form_module";
@use "modules/ui/game_module";
@use "modules/ui/gallery_module";
$color_gui_back: hippie.$color_dark;
$space_gui_half: hippie.$space_half;
.op_show {
transition: $transition_show;
transition: hippie.$transition_show;
}
.op_hide {
transition: $transition_hide;
transition: hippie.$transition_hide;
}
.html_ui {
@ -46,7 +54,7 @@ $color_gui_back: $color_dark;
#wrap {
flex: 1;
background-color: $color_back_basic;
background-color: hippie.$color_back_basic;
}
#progress {
@ -64,9 +72,9 @@ $color_gui_back: $color_dark;
flex-shrink: 0;
justify-content: center;
align-items: center;
margin-inline: $space_half;
padding-block: calc($space_half - 1px) $space_half;
line-height: $line_basic;
margin-inline: $space_gui_half;
padding-block: calc($space_gui_half - 1px) $space_gui_half;
line-height: hippie.$line_basic;
text-align: center;
}
@ -78,7 +86,7 @@ $color_gui_back: $color_dark;
#spinner {
width: 2.5em;
background-color: $color_back_basic;
background-color: hippie.$color_back_basic;
color: black;
span {
@ -97,7 +105,7 @@ $color_gui_back: $color_dark;
}
#intro {
z-index: map.get($z-indexes, "content-top");
z-index: map.get(hippie.$z-indexes, "content-top");
overflow: hidden;
display: flex;
flex-direction: column;
@ -123,8 +131,8 @@ $color_gui_back: $color_dark;
}
*+h1 {
margin-top: $space_small;
margin-bottom: $space_large;
margin-top: hippie.$space_small;
margin-bottom: hippie.$space_large;
}
}
@ -134,7 +142,7 @@ $color_gui_back: $color_dark;
li {
list-style: none;
padding-inline: $space_double;
padding-inline: hippie.$space_double;
}
}
@ -148,49 +156,44 @@ $color_gui_back: $color_dark;
#agreement {
flex-direction: column;
background-color: $bravo_color;
background-color: map.get(hippie.$color_palette, bravo);
user-select: none;
h1 {
margin-top: 0;
color: $color_brightest;
color: hippie.$color_brightest;
}
}
#idle {
background-color: $color_back_basic;
background-color: hippie.$color_back_basic;
transition: background-color 4s;
&:hover>.mouse-overlay {
background-color: transparent !important;
transition: background-color $duration_basic $timing_basic 0s !important;
transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
}
}
.toast {
z-index: map.get($z-indexes, "toast");
z-index: map.get(hippie.$z-indexes, "toast");
position: fixed;
right: $space_half;
bottom: $space_double;
right: $space_gui_half;
bottom: hippie.$space_double;
p {
color: white;
}
kbd {
border-color: $color_brighter;
color: $color_back_io;
border-color: hippie.$color_brighter;
color: hippie.$color_back_io;
}
}
.hello {
flex: 0 1 auto;
padding: 1em 2em;
background-color: rgba($color_bright, .5);
font-family: $family_text_mono;
background-color: rgba(hippie.$color_bright, .5);
font-family: hippie.$family_text_mono;
}
@import "modules/ui/frame_module";
@import "modules/ui/new_module";
@import "modules/ui/drag_module";
@import "modules/ui/form_module";