nettoyage du menu, ajout du grain

This commit is contained in:
Valentin
2023-04-12 00:37:05 +02:00
parent 807dcc053e
commit 9a4ccc6d80
5 changed files with 82 additions and 159 deletions
+14 -50
View File
@@ -129,59 +129,16 @@ body {
align-items: center;
margin: $global_margins;
font-size: $UI_main_font_size;
.niveau_profondeur {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
margin-right: 30px;
width: 5vw;
p {
font-weight: 300;
cursor: pointer;
}
p.selected {
font-weight: 400;
text-decoration: underline;
}
p:hover {
font-weight: 400;
}
}
.arrow {
margin-right: $buttons_margin;
svg {
height: $large_picto_size;
width: auto;
fill: $bg_color;
stroke: $main_color;
stroke-width: 0;
cursor: pointer;
margin-top: 4px;
transition: fill $animation_style;
}
svg:hover {
fill: $grey_inactive;
}
svg:active {
fill: $grey_hover;
}
}
.arrow:last-of-type {
margin-right: 0;
margin-left: $buttons_margin;
}
mix-blend-mode: multiply;
flex-wrap: wrap;
.mode {
display: flex;
align-items: center;
justify-content: space-around;
background-color: $bg_color;
margin: 0;
margin-right: $buttons_margin;
padding: $buttons_padding;
border-radius: 50px;
cursor: pointer;
border: solid 0.8px $grey_inactive;
color: rgba(0, 0, 0, 0.5);
transition: border 0.1s ease-out, color 0.1s ease-out, padding $animation_style;
font-weight: 300;
@@ -218,7 +175,6 @@ body {
.mode.active {
padding: $buttons_padding !important;
font-weight: 400;
border: solid $buttons_border_width $main_color;
color: $main_color;
svg .thick {
stroke-width: 1.2;
@@ -239,7 +195,6 @@ body {
.mode:hover {
padding: $buttons_padding !important;
color: $grey_hover;
border-color: $grey_hover;
svg .thick, svg .thin {
stroke: $grey_hover;
}
@@ -273,8 +228,11 @@ body {
font-size: $UI_main_font_size;
h1 {
font-family: 'Ortica';
font-size: 1.7em;
font-size: 1.5em;
margin: $main_title_margin;
span {
font-size: 1.9em;
}
}
#menu {
display: flex;
@@ -320,20 +278,26 @@ body {
}
.menu_item {
font-weight: 300;
color: $grey_inactive;
display: flex;
align-items: center;
cursor: pointer;
margin: 0 10px;
padding-bottom: 2px;
transition: color $animation_style;
svg {
width: $medium_picto_size;
height: $medium_picto_size;
margin-right: 3px;
fill: $main_color;
fill: $grey_inactive;;
transition: fill $animation_style;
}
}
.menu_item:hover {
font-weight: 400;
color: $grey_hover;
svg {
fill: $grey_hover;
}
}
}
}