73 lines
1.2 KiB
SCSS
73 lines
1.2 KiB
SCSS
|
html {
|
||
|
|
margin-left:0;
|
||
|
|
@include lg() {
|
||
|
|
margin-left:320px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#searchfield {
|
||
|
|
outline-color: $color-background-alt;
|
||
|
|
border-radius: $card-radius;
|
||
|
|
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#mobile-sidebar {
|
||
|
|
position: fixed;
|
||
|
|
top:0;
|
||
|
|
left:-100vw;
|
||
|
|
width: 320px;
|
||
|
|
height:100vh;
|
||
|
|
transition: left 0.2s;
|
||
|
|
padding: 1rem;
|
||
|
|
overflow: hidden;
|
||
|
|
&.shown {
|
||
|
|
left:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include lg() {
|
||
|
|
left:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
z-index:10;
|
||
|
|
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.6);
|
||
|
|
}
|
||
|
|
|
||
|
|
img.myavatar {
|
||
|
|
height: 140px;
|
||
|
|
width: auto;
|
||
|
|
display: block;
|
||
|
|
margin: 1rem auto 1.5rem auto;
|
||
|
|
border: 3px solid $color-background;
|
||
|
|
box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.5);
|
||
|
|
border-radius: 8px;
|
||
|
|
@include old() {
|
||
|
|
height: 128px;
|
||
|
|
margin: 0.25rem auto 1rem auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-button {
|
||
|
|
position:fixed;
|
||
|
|
bottom: 24px;
|
||
|
|
right: 24px;
|
||
|
|
background-color:rgba(0,0,0,0.2);
|
||
|
|
color:$color-font-light;
|
||
|
|
padding:0.75em;
|
||
|
|
border:none;
|
||
|
|
font-size:1.2rem;
|
||
|
|
display:flex;
|
||
|
|
align-content: center;
|
||
|
|
justify-content: center;
|
||
|
|
aspect-ratio: 1;
|
||
|
|
border-radius:999px;
|
||
|
|
z-index: 12;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: $color-primary;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include lg() {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|