rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Make menu sliding better

Browse Source
This commit is contained in:
somebody
2022-08-29 18:40:43 -05:00
parent af292bdaae
commit 5fec0b4c34
1 changed files with 10 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
static/koboldai.css
View File

@@ -345,12 +345,12 @@ input[type="range"]::-ms-fill-upper {
.SideMenu { .SideMenu {
height: 100%; height: 100%;
z-index: 4; z-index: 4;
width: var(--flyout_menu_closed_width); width: var(--flyout_menu_width);
box-shadow: var(--left_menu_strong_shadow); box-shadow: var(--left_menu_strong_shadow);
position: fixed; position: fixed;
z-index: 3; z-index: 3;
top: 0; top: 0;
left: 0; right: 100%;
background-color: var(--flyout_background); background-color: var(--flyout_background);
overflow-x: hidden; overflow-x: hidden;
transition: 0.5s; transition: 0.5s;
@@ -360,23 +360,15 @@ input[type="range"]::-ms-fill-upper {
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 7/5) {
.SideMenu.pinned { .SideMenu.pinned {
height: 100%; right: calc(100% - var(--flyout_menu_width));
width: var(--flyout_menu_width);
position: fixed;
z-index: 3;
top: 0;
left: 0;
background-color: var(--flyout_background_pinned); background-color: var(--flyout_background_pinned);
box-shadow: var(--left_menu_light_shadow); box-shadow: var(--left_menu_light_shadow);
overflow-x: hidden;
transition: 0.5s;
border-radius: 0px; border-radius: 0px;
} }
} }
.SideMenu.open { .SideMenu.open {
width: var(--flyout_menu_width); right: calc(100% - var(--flyout_menu_width));
z-index: 3;
} }
.SideMenu .flyout_menu_contents { .SideMenu .flyout_menu_contents {
@@ -707,7 +699,6 @@ input[type="range"]::-ms-fill-upper {
.rightSideMenu { .rightSideMenu {
z-index: 3; z-index: 3;
height: 100%; height: 100%;
width: 0;
position: fixed; position: fixed;
box-shadow: var(--right_menu_strong_shadow); box-shadow: var(--right_menu_strong_shadow);
z-index: 3; z-index: 3;
@@ -719,20 +710,20 @@ input[type="range"]::-ms-fill-upper {
transition: 0.5s; transition: 0.5s;
padding-top: 8px; padding-top: 8px;
border-radius: var(--radius_unpinned_menu) 0px 0px var(--radius_unpinned_menu); border-radius: var(--radius_unpinned_menu) 0px 0px var(--radius_unpinned_menu);
width: var(--flyout_menu_width);
left: 100%;
} }
.rightSideMenu.open { .rightSideMenu.open {
width: var(--flyout_menu_width); left: calc(100% - var(--flyout_menu_width));
z-index: 3;
} }
@media only screen and (min-aspect-ratio: 7/5) { @media only screen and (min-aspect-ratio: 7/5) {
/* Desktop Mode */ /* Desktop Mode */
.rightSideMenu.pinned { .rightSideMenu.pinned {
width: var(--flyout_menu_width); left: calc(100% - var(--flyout_menu_width));
box-shadow: var(--right_menu_light_shadow); box-shadow: var(--right_menu_light_shadow);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
} }
} }