Fix right/left drawers animations

2a70086ef1439a4df439c223bc653c75766d6b06

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 8c384a03bbdf262cd21920466f06238db7388abf
1 files changed, +24 -5Showing whitespace changes
public/style.css+24 -5
@@ -4180,7 +4180,8 @@ input[type='checkbox'].del_checkbox {
4180 background-repeat: no-repeat !important;4180 background-repeat: no-repeat !important;
4181 box-shadow: inset 0 0 2px var(--black50a) !important;4181 box-shadow: inset 0 0 2px var(--black50a) !important;
4182 cursor: ew-resize !important;4182 cursor: ew-resize !important;
4183 z-index: 1;4183 /* Causes the slider to linger for one frame when switching drawers */
4184 /* z-index: 1; */
4184}4185}
41854186
4186.neo-range-slider:hover,4187.neo-range-slider:hover,
@@ -5000,8 +5001,7 @@ a:hover {
5000 width: calc((100dvw - var(--sheldWidth) - 2px) /2);5001 width: calc((100dvw - var(--sheldWidth) - 2px) /2);
5001 max-height: calc(100vh - var(--topBarBlockSize));5002 max-height: calc(100vh - var(--topBarBlockSize));
5002 max-height: calc(100dvh - var(--topBarBlockSize));5003 max-height: calc(100dvh - var(--topBarBlockSize));
5003 height: calc(100vh - var(--topBarBlockSize));5004 height: 0;
5004 height: calc(100dvh - var(--topBarBlockSize));
5005 position: fixed;5005 position: fixed;
5006 top: 0;5006 top: 0;
5007 margin: 0;5007 margin: 0;
@@ -5023,6 +5023,16 @@ a:hover {
5023 min-width: 100px;5023 min-width: 100px;
5024}5024}
50255025
5026#right-nav-panel.openDrawer {
5027 height: calc(100vh - var(--topBarBlockSize));
5028 height: calc(100dvh - var(--topBarBlockSize));
5029 height: calc-size((100dvh - var(--topBarBlockSize)), size);
5030
5031 @starting-style {
5032 height: 0;
5033 }
5034}
5035
5026#nav-toggle {5036#nav-toggle {
5027 position: fixed;5037 position: fixed;
5028 right: 13px;5038 right: 13px;
@@ -5442,8 +5452,7 @@ body:not(.movingUI) .drawer-content.maximized {
5442.fillLeft {5452.fillLeft {
5443 width: calc((100vw - var(--sheldWidth) - 2px) /2);5453 width: calc((100vw - var(--sheldWidth) - 2px) /2);
5444 width: calc((100dvw - var(--sheldWidth) - 2px) /2);5454 width: calc((100dvw - var(--sheldWidth) - 2px) /2);
5445 height: calc(100vh - var(--topBarBlockSize));5455 height: 0;
5446 height: calc(100dvh - var(--topBarBlockSize));
5447 max-height: calc(100vh - var(--topBarBlockSize));5456 max-height: calc(100vh - var(--topBarBlockSize));
5448 max-height: calc(100dvh - var(--topBarBlockSize));5457 max-height: calc(100dvh - var(--topBarBlockSize));
5449 position: fixed;5458 position: fixed;
@@ -5457,6 +5466,16 @@ body:not(.movingUI) .drawer-content.maximized {
5457 border: 1px solid var(--SmartThemeBorderColor);5466 border: 1px solid var(--SmartThemeBorderColor);
5458}5467}
54595468
5469.fillLeft.openDrawer {
5470 height: calc(100vh - var(--topBarBlockSize));
5471 height: calc(100dvh - var(--topBarBlockSize));
5472 height: calc-size((100dvh - var(--topBarBlockSize)), size);
5473
5474 @starting-style {
5475 height: 0;
5476 }
5477}
5478
5460.scrollableInner {5479.scrollableInner {
5461 overflow-x: hidden;5480 overflow-x: hidden;
5462 height: calc(100% - 30px);5481 height: calc(100% - 30px);