* index: optimize transition of left menu.

This commit is contained in:
sunhao
2024-04-26 17:25:17 +08:00
parent 1ed615f0bd
commit ced04db655
+3 -3
View File
@@ -8,7 +8,7 @@
}
[lang^='en'] {--zt-menu-width: 106px;}
#menu {position: fixed; left: 0; top: 0; bottom: 0; background: var(--zt-menu-bg); width: var(--zt-menu-width); color: rgba(var(--color-canvas-rgb), .8); transition: width .2s; user-select: none; z-index: 10;}
#menu {position: fixed; left: 0; top: 0; bottom: 0; background: var(--zt-menu-bg); width: var(--zt-menu-width); color: rgba(var(--color-canvas-rgb), .8); transition: width .1s; user-select: none; z-index: 10;}
#menu .nav {flex-direction: column; align-items: stretch;}
#menu .nav > li {display: block; height: var(--zt-menu-height, 38px); padding: 4px 8px; transition: padding .2s;}
#menu .nav > .divider {background: var(--color-canvas); opacity: .12; height: 1px; padding: 0; margin: 6px 12px;}
@@ -40,10 +40,10 @@
.hide-menu #menu #menuMoreNav .nav > li > a > .text {display: flex;}
.hide-menu #menu .menu-toggle > .icon {transform: rotate(180deg);}
#apps {position: fixed; left: var(--zt-menu-width); top: 0; bottom: var(--zt-apps-bar-height); right: 0; background-color: var(--zt-page-bg); transition: left .2s;}
#apps {position: fixed; left: var(--zt-menu-width); top: 0; bottom: var(--zt-apps-bar-height); right: 0; background-color: var(--zt-page-bg); transition: left .1s;}
.hide-menu #apps {left: var(--zt-menu-fold-width)!important;}
#appsBar {display: flex; flex-wrap: nowrap; align-items: center; position: fixed; left: var(--zt-menu-width); bottom: 0; right: 0; height: var(--zt-apps-bar-height); padding: 0 4px; background: var(--zt-apps-bar-bg); box-shadow: 0 -2px 12px rgba(0,0,0,.02); transition: left .2s; border-top-width: 1px;}
#appsBar {display: flex; flex-wrap: nowrap; align-items: center; position: fixed; left: var(--zt-menu-width); bottom: 0; right: 0; height: var(--zt-apps-bar-height); padding: 0 4px; background: var(--zt-apps-bar-bg); box-shadow: 0 -2px 12px rgba(0,0,0,.02); transition: left .1s; border-top-width: 1px;}
.hide-menu #appsBar {left: var(--zt-menu-fold-width)!important;}
#appTabs {flex: auto; user-select: none; --nav-active-color: currentColor}
#appTabs > li > a {border-radius: var(--radius-md); opacity: .6;}