@ -1,87 +1,198 @@
. toolbar { @import ' ../../../styles ' ;
& . dark-theme {
background-color : black !important ;
/ / region Colors
$color-sun : #E4C74D ;
$color-cloud-inner : #FFFFFF ;
$color-cloud-outer : #D4D4D2 ;
$color-parent-outer : #81C0D5 ;
$color-parent-inner : #C0E6F6 ;
$color-moon-inner : #FFFDF2 ;
$color-moon-outer : #DEE1C5 ;
$color-stars : #FCFCFC ;
/ / endregion
/ / region Mixins
@mixin crater ( $top , $left , $size ) {
content : ' ' ;
position : absolute ;
top : $top ;
left : $left ;
width : $size ;
height : $size ;
background-color : #EFEEDA ;
border-radius : 100 % ;
border : 4 px solid $color-moon-outer ;
} }
& . light-theme {
@mixin cloudBubble ( $top , $right , $width , $height , $deg ) {
background-color : white !important ;
content : ' ' ;
display : block ;
position : relative ;
top : $top ;
right : $right ;
width : $width ;
height : $height ;
border : 8 px solid $color-cloud-outer ;
border-radius : 100 % ;
border-right-color : transparent ;
border-bottom-color : transparent ;
transform : rotateZ ( $deg ) ;
background-color : $color-cloud-inner ;
} }
padding : 0 1 rem ;
/ / endregion
$theme-transition : all .3 s ease-in-out ;
. header {
position : relative ;
padding : 1 rem ;
display : flex ;
display : flex ;
flex-direction : row ;
flex-direction : row ;
align-items : center ;
align-items : center ;
justify-content : space-between ;
justify-content : space-between ;
gap : 4 rem ;
gap : 2 rem ;
}
. left_part {
. left_part {
display : flex ;
display : flex ;
flex-direction : row ;
flex-direction : row ;
gap : 4 rem ;
}
. left_part . logo_container { & __logo {
& - - container {
display : flex ;
display : flex ;
flex-direction : row ;
flex-direction : row ;
gap : 2 rem ;
gap : 2 rem ;
}
}
. left_part . menu { & - - sandkasten {
display : flex ;
width : 4 rem ;
flex-direction : row ;
height : auto ;
gap : 2 rem ;
aspect-ratio : 1 ;
}
align-items : flex-end ;
}
}
}
. left_part . menu a { . right_part , . mobile_menu {
& . dark-theme {
/ / Dark mode button
color : black !important ;
. wrapper {
text-align : center ;
. toggle {
position : relative ;
display : inline-block ;
width : 100 px ;
padding : 4 px ;
border-radius : 40 px ;
}
}
& . light-theme {
& : before , &: after {
color : white !important ;
content : ' ' ;
display : table ;
}
}
text-decoration : none ;
padding : .5 rem .5 rem 0 ;
& : after {
clear : both ;
}
}
. left_part . menu a : hover { . toggle-bg {
& . dark-theme {
position : absolute ;
background-color : black !important ;
top : - 4 px ;
left : - 4 px ;
width : 100 % ;
height : 100 % ;
background-color : $color-parent-inner ;
border-radius : 40 px ;
border : 4 px solid $color-parent-outer ;
transition : all .1 s cubic-bezier ( 0 .250 , 0 .460 , 0 .450 , 0 .940 ) ;
}
}
& . light-theme {
. toggle-input {
background-color : white !important ;
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
border : 1 px solid red ;
border-radius : 40 px ;
z-index : 2 ;
opacity : 0 ;
& : checked ~ . toggle-switch {
margin-left : 0 ;
border-color : $color-moon-outer ;
background-color : $color-moon-inner ;
}
}
transition : background-color .3 s ease ;
& : checked ~ . toggle-bg {
background-color : #484848 ;
border-color : #202020 ;
}
}
. left_part . menu a . active { & : checked ~ . toggle-switch . toggle-switch-figure {
& . dark-theme {
margin-left : 40 px ;
background-color : black !important ;
opacity : 0 ;
transform : scale ( 0 .1 ) ;
}
}
& . light-theme {
& : checked ~ . toggle-switch . toggle-switch-figureAlt {
background-color : white !important ;
transform : scale ( 1 ) ;
}
}
}
}
. sandkasten-logo { . toggle-switch {
width : 4 rem ;
position : relative ;
height : auto ;
width : 30 px ;
aspect-ratio : 1 ;
height : 30 px ;
margin-left : 60 px ;
background-color : #F5EB42 ;
border : 4 px solid $color-sun ;
border-radius : 50 % ;
transition : all .1 s cubic-bezier ( 0 .250 , 0 .460 , 0 .450 , 0 .940 ) ;
. toggle-switch-figure {
position : absolute ;
bottom : - 14 px ;
left : - 50 px ;
display : block ;
width : 80 px ;
height : 30 px ;
border : 8 px solid $color-cloud-outer ;
border-radius : 20 px ;
background-color : #fff ;
transform : scale ( 0 .4 ) ;
transition : all .12 s cubic-bezier ( 0 .250 , 0 .460 , 0 .450 , 0 .940 ) ;
& : after {
@include cloudBubble ( - 65 px , - 42 px , 15 px , 15 px , 70 deg ) ;
}
& : before {
@include cloudBubble ( - 25 px , - 10 px , 30 px , 30 px , 30 deg ) ;
}
}
}
. toggle-switch-figureAlt {
@include crater ( 5 px , 2 px , 2 px ) ;
. logo_title { box-shadow :
font-size : 1 .5 rem ;
42px - 7px 0 - 3px $ color-stars ,
font-weight : 500 ;
75px - 10px 0 - 3px $ color-stars ,
& . dark-theme {
54px 4px 0 - 4px $ color-stars ,
color : black !important ;
83px 7px 0 - 2px $ color-stars ,
63px 18px 0 - 4px $ color-stars ,
44px 23px 0 - 2px $ color-stars ,
78px 21px 0 - 3px $ color-stars ;
transition : all .12 s cubic-bezier ( 0 .250 , 0 .460 , 0 .450 , 0 .940 ) ;
transform : scale ( 0 ) ;
& : before {
@include crater ( - 6 px , 12 px , 7 px ) ;
}
}
& . light-theme {
& : after {
color : white !important ;
@include crater ( 10 px , 6 px , 2 px ) ;
}
}
}
}
}
}
}
@ -90,33 +201,197 @@
flex-direction : row ;
flex-direction : row ;
align-items : center ;
align-items : center ;
gap : 2 rem ;
gap : 2 rem ;
& . dark-theme {
color : black !important ;
}
& . light-theme {
& - - menu {
color : white !important ;
display : flex ;
flex-direction : row ;
flex-wrap : wrap ;
gap : 1 rem ;
a {
color : $color-black ;
text-decoration : none ;
white-space : nowrap ;
transition : $theme-transition ;
}
}
}
}
. gitea_logo_container . gitea-logo { & - - menu_mobile {
width : 4 rem ;
cursor : pointer ;
height : auto ;
display : none ;
aspect-ratio : 1 ;
z-index : 100 ;
}
}
@media ( max-width : 1024 px ) { & - - bottom {
. toolbar {
display : flex ;
flex-direction : row ;
gap : 2 rem ;
align-items : center ;
}
& - - toggles {
display : flex ;
flex-direction : row ;
gap : 2 rem ;
gap : 2 rem ;
align-items : center ;
}
& __lang {
height : fit-content ;
}
& __connexion {
display : flex ;
flex-direction : row ;
gap : 1 rem ;
& - - login {
cursor : pointer ;
display : flex ;
align-items : center ;
gap : .5 rem ;
color : $color-purple ;
white-space : nowrap ;
}
& - - register {
cursor : pointer ;
border : 1 px solid $color-black ;
border-radius : 10 px ;
padding : .75 rem 2 rem ;
white-space : nowrap ;
transition : border .3 s ease-in-out ;
}
}
}
}
. mobile_menu {
position : absolute ;
top : 0 ;
right : 0 ;
width : 50 % ;
height : 100 vh ;
background : $color-white ;
transform : translateX ( 100 % ) ;
z-index : 99 ;
. toolbar . left_part {
transition : transform .3 s ease-in-out , box-shadow .3 s ease-in-out , background .3 s ease-in-out ;
& . opened {
transform : translateX ( 0 ) ;
box-shadow : $color-black 0 0 5 px 0 ;
}
& - - wrapper {
//padding-top : 6 rem ;
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
gap : 3 rem ;
height : 100 % ;
}
& - - toggles {
display : flex ;
flex-direction : column ;
align-items : center ;
gap : 2 rem ;
gap : 2 rem ;
}
}
. toolbar . left_part . logo_container . logo_title {
& - - menu {
display : flex ;
flex-direction : column ;
align-items : center ;
gap : 1 rem ;
a {
color : $color-black ;
text-decoration : none ;
white-space : nowrap ;
transition : $theme-transition ;
}
}
& __connexion {
display : flex ;
flex-direction : column ;
align-items : center ;
gap : 1 rem ;
}
}
}
. dark-theme {
. right_part {
& - - menu {
a {
color : $color-white ;
}
}
& __connexion {
& - - register {
border-color : $color-white ;
}
}
}
. mobile_menu {
background : $color-light-black ;
& . opened {
box-shadow : $color-white 0 0 5 px 0 ;
}
& - - menu {
a {
color : $color-white ;
}
}
& __connexion {
& - - register {
border-color : $color-white ;
}
}
}
}
@media ( max-width : 1024 px ) {
. header {
. right_part {
flex-direction : column-reverse ;
& - - menu_mobile {
display : flex ;
}
& - - menu {
display : none ;
}
& __connexion {
display : none ;
}
& - - toggles {
display : none ;
display : none ;
}
}
}
}
}
}
@media ( max-width : 767px ) {
. header {
. mobile_menu {
width : 75 % ;
}
}
}
