Fix sudevars abd scrolling, ready to ship

This commit is contained in:
conzer 2024-12-05 15:12:02 -05:00
parent 45c765a6bc
commit d28f8ee07e
4 changed files with 112 additions and 7 deletions

View file

@ -3,6 +3,10 @@
$variant: 'dark';
html {
scroll-behavior: smooth;
}
body {
background-color: $bg_color;
color: $fg_color;
@ -52,6 +56,9 @@ button:hover {
};
.header {
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
padding: 10px;
background-color: $headerbar_bg_color;
@ -62,17 +69,19 @@ button:hover {
}
.sidebar {
position: fixed;
top: 50px;
width: 200px;
height: 100%;
background-color: $sidebar_bg_color;
background-color: $headerbar_bg_color;
color: $text_color;
border-radius: 0 20px 20px 0;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: hidden;
}
.sb_button {
min-height: 48px;
width: 185px;
@ -121,3 +130,23 @@ button:hover {
max-width: 400px;
margin: auto;
}
.col-btn {
display: flex;
flex-direction: column;
width: 200px;
}
.col-btn:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.col-btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.col-btn:last-child {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}

View file

@ -4,6 +4,11 @@
$variant: 'light';
html {
scroll-behavior: smooth;
}
body {
background-color: $bg_color;
color: $fg_color;
@ -53,6 +58,9 @@ button:hover {
};
.header {
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
padding: 10px;
background-color: $headerbar_bg_color;
@ -63,8 +71,10 @@ button:hover {
}
.sidebar {
position: fixed;
top: 50px;
width: 200px;
height: 100%;
height: calc(100vh - 50px);
background-color: $porcelain;
color: $text_color;
border-radius: 0 20px 20px 0;
@ -72,6 +82,7 @@ button:hover {
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: hidden;
}
.sb_button {
@ -123,3 +134,26 @@ button:hover {
margin: auto;
}
.col-btn {
display: flex;
flex-direction: column;
width: 200px;
}
.col-btn:first-child {
background-color: $porcelain;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.col-btn:not(:first-child):not(:last-child) {
border-radius: 0;
background-color: $porcelain;
}
.col-btn:last-child {
background-color: $porcelain;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}