feat: Adapt new hippie-style structure
Sass deprecations removed.
This commit is contained in:
parent
d9f7ae1ff9
commit
c1fea8064e
11 changed files with 166 additions and 147 deletions
|
|
@ -2,15 +2,15 @@
|
|||
// Then import your config and hippie
|
||||
// NOTE: No css rules allowed in here
|
||||
// ------------------------------------------------------------------------------
|
||||
@import "demo_config";
|
||||
@import "hippie-style/hippie";
|
||||
@use "demo_config";
|
||||
@use "hippie-style/hippie";
|
||||
|
||||
// Additional Modules and variables
|
||||
// in dependency to other basic styles
|
||||
// could be defined here
|
||||
// -----------------------------------------------------------------------------
|
||||
@import "modules/card/card_module";
|
||||
@import "modules/portal/portal_module";
|
||||
@import "modules/songbook/songbook_module";
|
||||
@import "modules/demo/demo_module";
|
||||
// @import "modules/YOUR-MODULE/YOUR-FILES";
|
||||
@use "modules/card/card_module";
|
||||
@use "modules/portal/portal_module";
|
||||
@use "modules/songbook/songbook_module";
|
||||
@use "modules/demo/demo_module";
|
||||
// @use "modules/YOUR-MODULE/YOUR-FILES";
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
// Then import your config and hippie
|
||||
// NOTE // No css rules allowed in here
|
||||
// ------------------------------------------------------------------------------
|
||||
@import "demo_config";
|
||||
@import "hippie-style/basic";
|
||||
@use "demo_config";
|
||||
@use "hippie-style/basic";
|
||||
|
||||
|
||||
// Additional Modules and variables
|
||||
// in dependency to other basic styles
|
||||
// could be defined here
|
||||
// -----------------------------------------------------------------------------
|
||||
// @import "modules/YOUR-MODULE/YOUR-FILES";
|
||||
// @use "modules/YOUR-MODULE/YOUR-FILES";
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 867e96ea0a51054762ce615efa0224ccf1157ca2
|
||||
Subproject commit 4e4f8814d319c2f2a26a3ae5ab1c812e1aac8483
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../../hippie-style/hippie";
|
||||
|
||||
// Card module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
|
|
@ -26,7 +28,7 @@
|
|||
height: 100vh;
|
||||
|
||||
* {
|
||||
font-family: $family_text_card;
|
||||
font-family: hippie.$family_text_card;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -58,10 +60,14 @@
|
|||
// padding-left: 1em;
|
||||
// text-indent: -1em;
|
||||
|
||||
&::before { content: "*\0000a0" }
|
||||
&::before {
|
||||
content: "*\0000a0"
|
||||
}
|
||||
}
|
||||
|
||||
.decent { color: #666 }
|
||||
.decent {
|
||||
color: #666
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@use "sass:color";
|
||||
|
||||
@use "../../hippie-style/hippie";
|
||||
|
||||
.demo__intro {
|
||||
@extend .sec_main_center;
|
||||
@extend .sec_main_status;
|
||||
|
|
@ -9,7 +11,7 @@
|
|||
@extend .sec_main_status;
|
||||
position: relative;
|
||||
min-height: 50vh;
|
||||
border-color: $foxtrot_color;
|
||||
border-color: hippie.basic_color(foxtrot);
|
||||
|
||||
h1:first-of-type {
|
||||
margin-top: 0;
|
||||
|
|
@ -24,7 +26,7 @@
|
|||
}
|
||||
|
||||
.demo__header {
|
||||
padding: $space_double;
|
||||
padding: hippie.$space_double;
|
||||
|
||||
nav {
|
||||
|
||||
|
|
@ -35,19 +37,19 @@
|
|||
}
|
||||
|
||||
.header_fancy {
|
||||
background-color: color.adjust($bravo_color, $alpha: -0.4);
|
||||
background-color: color.adjust(hippie.basic_color(bravo), $alpha: -0.4);
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
background-color: color.adjust($alpha_color, $alpha: -0.4);
|
||||
color: $alpha_color;
|
||||
background-color: color.adjust(hippie.basic_color(alpha), $alpha: -0.4);
|
||||
color: hippie.basic_color(alpha);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($color_brightest, 0.2);
|
||||
color: $color_brightest;
|
||||
background-color: rgba(hippie.$color_brightest, 0.2);
|
||||
color: hippie.$color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +60,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: color.adjust($charlie_color, $alpha: -0.4);
|
||||
background-color: color.adjust(hippie.basic_color(charlie), $alpha: -0.4);
|
||||
|
||||
nav {
|
||||
|
||||
|
|
@ -67,8 +69,8 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($color_brightest, 0.2);
|
||||
color: $color_brightest;
|
||||
background-color: rgba(hippie.$color_brightest, 0.2);
|
||||
color: hippie.$color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -77,20 +79,20 @@
|
|||
.demo__footer {
|
||||
width: 100%;
|
||||
// height: 128px;
|
||||
padding: $space_double 0;
|
||||
background-color: $color_dark;
|
||||
color: $color_bright;
|
||||
padding: hippie.$space_double 0;
|
||||
background-color: hippie.$color_dark;
|
||||
color: hippie.$color_bright;
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
color: $color_brightest;
|
||||
color: hippie.$color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo__sprite_down {
|
||||
@include sprite($down);
|
||||
@include hippie.sprite(hippie.$down);
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
|
|
@ -98,7 +100,7 @@
|
|||
}
|
||||
|
||||
.demo__sprite_up {
|
||||
@include sprite($up);
|
||||
@include hippie.sprite(hippie.$up);
|
||||
// width: 32px;
|
||||
// height: 64px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
|
|
@ -106,7 +108,7 @@
|
|||
}
|
||||
|
||||
.demo__sprite_meta {
|
||||
@include sprite($meta);
|
||||
@include hippie.sprite(hippie.$meta);
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
|
|
@ -122,7 +124,7 @@
|
|||
min-width: 128px;
|
||||
min-height: 128px;
|
||||
border-radius: 50%;
|
||||
background-color: $delta_color;
|
||||
background-color: hippie.basic_color(delta);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -131,123 +133,123 @@
|
|||
}
|
||||
|
||||
.demo__credits {
|
||||
margin: $space_small 0 $space_basic 0;
|
||||
margin: hippie.$space_small 0 hippie.$space_basic 0;
|
||||
}
|
||||
|
||||
.demo__queries > p {
|
||||
padding: $padding_basic;
|
||||
padding: hippie.$padding_basic;
|
||||
}
|
||||
|
||||
.query_phoneUp {
|
||||
@include forPhoneUp {
|
||||
background-color: rgba($color_text_basic, 0.2)
|
||||
@include hippie.forPhoneUp {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2)
|
||||
}
|
||||
;
|
||||
}
|
||||
|
||||
.query_phoneOnly {
|
||||
@include forPhoneOnly {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forPhoneOnly {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletPortaitOnly {
|
||||
@include forTabletPortraitOnly {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
.query_tabletPortraitOnly {
|
||||
@include hippie.forTabletPortraitOnly {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletPortraitUp {
|
||||
@include forTabletPortraitUp {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forTabletPortraitUp {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletLandscapeOnly {
|
||||
@include forTabletLandscapeOnly {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forTabletLandscapeOnly {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletLandscapeUp {
|
||||
@include forTabletLandscapeUp {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forTabletLandscapeUp {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_desktopOnly {
|
||||
@include forDesktopOnly {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forDesktopOnly {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_desktopUp {
|
||||
@include forDesktopUp {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forDesktopUp {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_bigDesktopUp {
|
||||
@include forBigDesktopUp {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forBigDesktopUp {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.demo__query_example {
|
||||
@include goingLarge($screen_tiny) {
|
||||
background-color: $alpha_color;
|
||||
@include hippie.goingLarge(hippie.$screen_tiny) {
|
||||
background-color: hippie.basic_color(alpha);
|
||||
}
|
||||
@include goingLarge($screen_small) {
|
||||
background-color: $bravo_color;
|
||||
@include hippie.goingLarge(hippie.$screen_small) {
|
||||
background-color: hippie.basic_color(bravo);
|
||||
}
|
||||
@include goingLarge($screen_medium) {
|
||||
background-color: $charlie_color;
|
||||
@include hippie.goingLarge(hippie.$screen_medium) {
|
||||
background-color: hippie.basic_color(charlie);
|
||||
}
|
||||
@include goingLarge($screen_large) {
|
||||
background-color: $delta_color;
|
||||
@include hippie.goingLarge(hippie.$screen_large) {
|
||||
background-color: hippie.basic_color(delta);
|
||||
}
|
||||
@include goingLarge($screen_huge) {
|
||||
background-color: $echo_color;
|
||||
@include hippie.goingLarge(hippie.$screen_huge) {
|
||||
background-color: hippie.basic_color(echo);
|
||||
}
|
||||
@include goingLarge($screen_gigantic) {
|
||||
background-color: $foxtrot_color;
|
||||
@include hippie.goingLarge(hippie.$screen_gigantic) {
|
||||
background-color: hippie.basic_color(foxtrot);
|
||||
}
|
||||
margin-bottom: $space_small;
|
||||
padding: $space_small;
|
||||
margin-bottom: hippie.$space_small;
|
||||
padding: hippie.$space_small;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
@extend code;
|
||||
@include goingLarge($screen_tiny) {
|
||||
@include hippie.goingLarge(hippie.$screen_tiny) {
|
||||
& {
|
||||
content: '768px';
|
||||
}
|
||||
}
|
||||
@include goingLarge($screen_small) {
|
||||
@include hippie.goingLarge(hippie.$screen_small) {
|
||||
& {
|
||||
content: '1024px';
|
||||
}
|
||||
}
|
||||
@include goingLarge($screen_medium) {
|
||||
@include hippie.goingLarge(hippie.$screen_medium) {
|
||||
& {
|
||||
content: '1280px';
|
||||
}
|
||||
}
|
||||
@include goingLarge($screen_huge) {
|
||||
@include hippie.goingLarge(hippie.$screen_huge) {
|
||||
& {
|
||||
content: '1680px';
|
||||
}
|
||||
}
|
||||
@include goingLarge($screen_gigantic) {
|
||||
@include hippie.goingLarge(hippie.$screen_gigantic) {
|
||||
& {
|
||||
content: '1920px';
|
||||
}
|
||||
}
|
||||
content: '< 768px';
|
||||
padding: $padding_basic;
|
||||
border-radius: $radius_basic;
|
||||
color: $color_brightest;
|
||||
background-color: rgba($color_front_basic, 0.2);
|
||||
padding: hippie.$padding_basic;
|
||||
border-radius: hippie.$radius_basic;
|
||||
color: hippie.$color_brightest;
|
||||
background-color: rgba(hippie.$color_front_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,11 +263,11 @@
|
|||
}
|
||||
|
||||
.demo__td_pr {
|
||||
padding-right: $space_double;
|
||||
padding-right: hippie.$space_double;
|
||||
}
|
||||
|
||||
.demo__td_pl {
|
||||
padding-left: $space_double;
|
||||
padding-left: hippie.$space_double;
|
||||
}
|
||||
|
||||
// Index
|
||||
|
|
@ -283,6 +285,6 @@
|
|||
|
||||
ul {
|
||||
padding: 1em 5em;
|
||||
background-color: $color_darker;
|
||||
background-color: hippie.$color_darker;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
@use "sass:color";
|
||||
|
||||
$portal_highlight: $color_highlight_basic;
|
||||
$portal_margin: $space_double;
|
||||
@use "../../hippie-style/hippie";
|
||||
|
||||
$portal_highlight: hippie.$color_highlight_basic;
|
||||
$portal_margin: hippie.$space_double;
|
||||
$portal_link_size: 128px;
|
||||
$portal_icon_size: 64px;
|
||||
|
||||
|
|
@ -23,7 +25,7 @@ $portal_icon_size: 64px;
|
|||
padding-left: $portal_margin;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition: $transition_best;
|
||||
transition: hippie.$transition_best;
|
||||
|
||||
&:hover {
|
||||
flex: 3;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../../hippie-style/hippie";
|
||||
|
||||
.songbook_song {
|
||||
pre {
|
||||
@extend .pre_code
|
||||
|
|
@ -5,16 +7,16 @@
|
|||
|
||||
header {
|
||||
h2 {
|
||||
margin-bottom: $space_basic;
|
||||
margin-bottom: hippie.$space_basic;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: $color_brightest;
|
||||
color: hippie.$color_brightest;
|
||||
}
|
||||
|
||||
h2+h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: $space_small;
|
||||
margin-bottom: hippie.$space_small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
@use "../../hippie-style/hippie";
|
||||
|
||||
#grid {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: minmax(64px, auto);
|
||||
margin-inline: $space_small;
|
||||
margin-inline: hippie.$space_small;
|
||||
}
|
||||
|
||||
#grid>div {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@use "sass:color";
|
||||
|
||||
@use "../../hippie-style/hippie";
|
||||
|
||||
@mixin nav-spacer($name, $size, $orientation) {
|
||||
.spacer.#{$name} {
|
||||
width: $size;
|
||||
|
|
@ -9,7 +11,7 @@
|
|||
.body_frame {
|
||||
@extend %flex-column;
|
||||
|
||||
background-color: $color_back_basic;
|
||||
background-color: hippie.$color_back_basic;
|
||||
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
@ -37,10 +39,10 @@
|
|||
|
||||
& > header,
|
||||
& > footer {
|
||||
background-color: color.adjust($color_back_io, $alpha: -.5);
|
||||
background-color: color.adjust(hippie.$color_back_io, $alpha: -.5);
|
||||
|
||||
&:hover {
|
||||
background-color: $color_back_io;
|
||||
background-color: hippie.$color_back_io;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -84,21 +86,20 @@
|
|||
textarea {
|
||||
resize: none;
|
||||
max-height: 128px;
|
||||
margin: $margin_io;
|
||||
margin: hippie.$margin_io;
|
||||
border: 0;
|
||||
padding: $space_half;
|
||||
// color: $color_text_io;
|
||||
padding: hippie.$space_half;
|
||||
// color: hippie.$color_text_io;
|
||||
color: white;
|
||||
// background-color: $color_back_io;
|
||||
// background-color: hippie.$color_back_io;
|
||||
background-color: transparent;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#content {
|
||||
background-color: $color_back_io;
|
||||
background-color: hippie.$color_back_io;
|
||||
|
||||
& > table {
|
||||
width: 100%;
|
||||
|
|
@ -106,31 +107,30 @@
|
|||
border: 0;
|
||||
|
||||
tr:hover td {
|
||||
background-color: $color_highlight_basic;
|
||||
background-color: hippie.$color_highlight_basic;
|
||||
}
|
||||
|
||||
th {
|
||||
border: 1px solid $color_border_io;
|
||||
border: 1px solid hippie.$color_border_io;
|
||||
}
|
||||
|
||||
td {
|
||||
border-width: 0 1px;
|
||||
border-style: solid;
|
||||
border-color: $color_border_io;
|
||||
border-color: hippie.$color_border_io;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.io {
|
||||
.spacer {
|
||||
margin: 0;
|
||||
border: $border_dotted;
|
||||
border: hippie.$border_dotted;
|
||||
padding: 0;
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
@include nav-spacer('a', $space_double, false);
|
||||
@include nav-spacer('b', $space_small, false);
|
||||
@include nav-spacer('a', hippie.$space_double, false);
|
||||
@include nav-spacer('b', hippie.$space_small, false);
|
||||
}
|
||||
|
|
@ -1,15 +1,17 @@
|
|||
@use "sass:color";
|
||||
|
||||
@use "../../hippie-style/hippie";
|
||||
|
||||
$module_top_height: 32px;
|
||||
$body_top_space: $module_top_height + $space_basic;
|
||||
$body_top_space: $module_top_height + hippie.$space_basic;
|
||||
|
||||
.body_new {
|
||||
@extend %flex-column;
|
||||
padding: $body_top_space $space_basic $space_basic;
|
||||
padding: $body_top_space hippie.$space_basic hippie.$space_basic;
|
||||
}
|
||||
|
||||
.area {
|
||||
transition: $transition_best;
|
||||
transition: hippie.$transition_best;
|
||||
|
||||
&:hover {
|
||||
background-color: #999;
|
||||
|
|
@ -28,13 +30,13 @@ $body_top_space: $module_top_height + $space_basic;
|
|||
|
||||
.item {
|
||||
// height: unset;
|
||||
border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
|
||||
border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
|
||||
border-style: dotted;
|
||||
border-width: $width_border_8;
|
||||
border-radius: $width_border_8;
|
||||
padding: $space_basic;
|
||||
background-color: rgb($color_back_basic, .5);
|
||||
// background-color: lighten($color_back_basic, $color_diff_tiny);
|
||||
border-width: hippie.$width_border_8;
|
||||
border-radius: hippie.$width_border_8;
|
||||
padding: hippie.$space_basic;
|
||||
background-color: rgb(hippie.$color_back_basic, .5);
|
||||
// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
|
||||
// background-color: gold;
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +52,7 @@ $body_top_space: $module_top_height + $space_basic;
|
|||
width: 100%;
|
||||
height: $module_top_height;
|
||||
background-color: rgb(0, 0, 0, .8);
|
||||
z-index: $z_top;
|
||||
z-index: hippie.$z_top;
|
||||
|
||||
div:last-child {
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
Loading…
Add table
Add a link
Reference in a new issue