| | |
|---|
| | | #app {
|
|---|
| | |
|
|---|
| | | .main-container {
|
|---|
| | | min-height: 100%;
|
|---|
| | | transition: margin-left .28s;
|
|---|
| | | margin-left: $base-sidebar-width;
|
|---|
| | | position: relative;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .sidebarHide {
|
|---|
| | | margin-left: 0!important;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .sidebar-container {
|
|---|
| | | -webkit-transition: width .28s;
|
|---|
| | | transition: width 0.28s;
|
|---|
| | | width: $base-sidebar-width !important;
|
|---|
| | | background-color: $base-menu-background;
|
|---|
| | | height: 100%;
|
|---|
| | | position: fixed;
|
|---|
| | | font-size: 0px;
|
|---|
| | | top: 0;
|
|---|
| | | bottom: 0;
|
|---|
| | | left: 0;
|
|---|
| | | z-index: 1001;
|
|---|
| | | overflow: hidden;
|
|---|
| | | -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
|---|
| | | box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
|---|
| | |
|
|---|
| | | // reset element-ui css
|
|---|
| | | .horizontal-collapse-transition {
|
|---|
| | | transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .scrollbar-wrapper {
|
|---|
| | | overflow-x: hidden !important;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .el-scrollbar__bar.is-vertical {
|
|---|
| | | right: 0px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .el-scrollbar {
|
|---|
| | | height: 100%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | &.has-logo {
|
|---|
| | | .el-scrollbar {
|
|---|
| | | height: calc(100% - 50px);
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .is-horizontal {
|
|---|
| | | display: none;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | a {
|
|---|
| | | display: inline-block;
|
|---|
| | | width: 100%;
|
|---|
| | | overflow: hidden;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .svg-icon {
|
|---|
| | | margin-right: 16px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .el-menu {
|
|---|
| | | border: none;
|
|---|
| | | height: 100%;
|
|---|
| | | width: 100% !important;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .el-menu-item, .menu-title {
|
|---|
| | | overflow: hidden !important;
|
|---|
| | | text-overflow: ellipsis !important;
|
|---|
| | | white-space: nowrap !important;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .el-menu-item .el-menu-tooltip__trigger {
|
|---|
| | | display: inline-block !important;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // menu hover
|
|---|
| | | .sub-menu-title-noDropdown,
|
|---|
| | | .el-sub-menu__title {
|
|---|
| | | &:hover {
|
|---|
| | | background-color: rgba(0, 0, 0, 0.06) !important;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | & .theme-dark .is-active > .el-sub-menu__title {
|
|---|
| | | color: $base-menu-color-active !important;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | & .nest-menu .el-sub-menu>.el-sub-menu__title,
|
|---|
| | | & .el-sub-menu .el-menu-item {
|
|---|
| | | min-width: $base-sidebar-width !important;
|
|---|
| | |
|
|---|
| | | &:hover {
|
|---|
| | | background-color: rgba(0, 0, 0, 0.06) !important;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
|
|---|
| | | & .theme-dark .el-sub-menu .el-menu-item {
|
|---|
| | | background-color: $base-sub-menu-background !important;
|
|---|
| | |
|
|---|
| | | &:hover {
|
|---|
| | | background-color: $base-sub-menu-hover !important;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .hideSidebar {
|
|---|
| | | .sidebar-container {
|
|---|
| | | width: 54px !important;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .main-container {
|
|---|
| | | margin-left: 54px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .sub-menu-title-noDropdown {
|
|---|
| | | padding: 0 !important;
|
|---|
| | | position: relative;
|
|---|
| | |
|
|---|
| | | .el-tooltip {
|
|---|
| | | padding: 0 !important;
|
|---|
| | |
|
|---|
| | | .svg-icon {
|
|---|
| | | margin-left: 20px;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .el-sub-menu {
|
|---|
| | | overflow: hidden;
|
|---|
| | |
|
|---|
| | | &>.el-sub-menu__title {
|
|---|
| | | padding: 0 !important;
|
|---|
| | |
|
|---|
| | | .svg-icon {
|
|---|
| | | margin-left: 20px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .el-menu--collapse {
|
|---|
| | | .el-sub-menu {
|
|---|
| | | &>.el-sub-menu__title {
|
|---|
| | | &>span {
|
|---|
| | | height: 0;
|
|---|
| | | width: 0;
|
|---|
| | | overflow: hidden;
|
|---|
| | | visibility: hidden;
|
|---|
| | | display: inline-block;
|
|---|
| | | }
|
|---|
| | | &>i {
|
|---|
| | | height: 0;
|
|---|
| | | width: 0;
|
|---|
| | | overflow: hidden;
|
|---|
| | | visibility: hidden;
|
|---|
| | | display: inline-block;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .el-menu--collapse .el-menu .el-sub-menu {
|
|---|
| | | min-width: $base-sidebar-width !important;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // mobile responsive
|
|---|
| | | .mobile {
|
|---|
| | | .main-container {
|
|---|
| | | margin-left: 0px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .sidebar-container {
|
|---|
| | | transition: transform .28s;
|
|---|
| | | width: $base-sidebar-width !important;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | &.hideSidebar {
|
|---|
| | | .sidebar-container {
|
|---|
| | | pointer-events: none;
|
|---|
| | | transition-duration: 0.3s;
|
|---|
| | | transform: translate3d(-$base-sidebar-width, 0, 0);
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .withoutAnimation {
|
|---|
| | |
|
|---|
| | | .main-container,
|
|---|
| | | .sidebar-container {
|
|---|
| | | transition: none;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // when menu collapsed
|
|---|
| | | .el-menu--vertical {
|
|---|
| | | &>.el-menu {
|
|---|
| | | .svg-icon {
|
|---|
| | | margin-right: 16px;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .nest-menu .el-sub-menu>.el-sub-menu__title,
|
|---|
| | | .el-menu-item {
|
|---|
| | | &:hover {
|
|---|
| | | // you can use $sub-menuHover
|
|---|
| | | background-color: rgba(0, 0, 0, 0.06) !important;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // the scroll bar appears when the sub-menu is too long
|
|---|
| | | >.el-menu--popup {
|
|---|
| | | max-height: 100vh;
|
|---|
| | | overflow-y: auto;
|
|---|
| | |
|
|---|
| | | &::-webkit-scrollbar-track-piece {
|
|---|
| | | background: #d3dce6;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | &::-webkit-scrollbar {
|
|---|
| | | width: 6px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | &::-webkit-scrollbar-thumb {
|
|---|
| | | background: #99a9bf;
|
|---|
| | | border-radius: 20px;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | #app { |
|---|
| | | .main-container { |
|---|
| | | min-height: 100vh; |
|---|
| | | margin-left: var(--sidebar-width); |
|---|
| | | transition: margin-left 0.25s ease; |
|---|
| | | position: relative; |
|---|
| | | background: transparent; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sidebarHide { |
|---|
| | | margin-left: 0 !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sidebar-container { |
|---|
| | | transition: width 0.25s ease; |
|---|
| | | width: var(--sidebar-width) !important; |
|---|
| | | height: 100vh; |
|---|
| | | position: fixed; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | z-index: 1001; |
|---|
| | | overflow: hidden; |
|---|
| | | padding: 0; |
|---|
| | | font-size: 0; |
|---|
| | | background: linear-gradient(180deg, #123b63 0%, #153f69 48%, #0f2d4f 100%); |
|---|
| | | border-right: 1px solid rgba(255, 255, 255, 0.08); |
|---|
| | | box-shadow: 8px 0 24px rgba(15, 23, 42, 0.08); |
|---|
| | | isolation: isolate; |
|---|
| | | |
|---|
| | | &::before { |
|---|
| | | content: ""; |
|---|
| | | position: absolute; |
|---|
| | | inset: -24% -48% -14% -34%; |
|---|
| | | z-index: 0; |
|---|
| | | pointer-events: none; |
|---|
| | | background: |
|---|
| | | radial-gradient(circle at 10% 14%, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.5), transparent 42%), |
|---|
| | | radial-gradient(circle at 88% 24%, rgba(56, 189, 248, 0.34), transparent 46%), |
|---|
| | | radial-gradient(circle at 26% 88%, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.24), transparent 42%), |
|---|
| | | radial-gradient(circle at 62% 58%, rgba(125, 211, 252, 0.18), transparent 48%); |
|---|
| | | filter: blur(6px) saturate(1.18); |
|---|
| | | opacity: 0.94; |
|---|
| | | transform: translate3d(0, 0, 0); |
|---|
| | | transform-origin: 44% 58%; |
|---|
| | | animation: |
|---|
| | | sidebarAuroraDrift 19.7s cubic-bezier(0.36, 0.02, 0.19, 0.98) infinite, |
|---|
| | | sidebarAuroraBreath 11.3s ease-in-out infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &::after { |
|---|
| | | content: ""; |
|---|
| | | position: absolute; |
|---|
| | | inset: 0; |
|---|
| | | z-index: 0; |
|---|
| | | pointer-events: none; |
|---|
| | | background: |
|---|
| | | linear-gradient( |
|---|
| | | 112deg, |
|---|
| | | transparent 10%, |
|---|
| | | rgba(255, 255, 255, 0.14) 36%, |
|---|
| | | rgba(255, 255, 255, 0.03) 48%, |
|---|
| | | transparent 72% |
|---|
| | | ), |
|---|
| | | linear-gradient( |
|---|
| | | 198deg, |
|---|
| | | rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.18) 0%, |
|---|
| | | transparent 34%, |
|---|
| | | rgba(56, 189, 248, 0.14) 66%, |
|---|
| | | transparent 100% |
|---|
| | | ), |
|---|
| | | radial-gradient(circle at 74% 12%, rgba(125, 211, 252, 0.2), transparent 48%); |
|---|
| | | background-size: 210% 100%, 170% 170%, 150% 150%; |
|---|
| | | background-position: 210% 0, 12% 18%, 80% 10%; |
|---|
| | | opacity: 0.42; |
|---|
| | | transform: translate3d(0, 0, 0); |
|---|
| | | animation: |
|---|
| | | sidebarSheenSweep 14.9s linear infinite, |
|---|
| | | sidebarSheenJitter 5.3s steps(29, end) infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | > * { |
|---|
| | | position: relative; |
|---|
| | | z-index: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .horizontal-collapse-transition { |
|---|
| | | transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .scrollbar-wrapper { |
|---|
| | | overflow-x: hidden !important; |
|---|
| | | overflow-y: auto !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-scrollbar__bar.is-vertical { |
|---|
| | | right: 2px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-scrollbar { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.has-logo { |
|---|
| | | .el-scrollbar { |
|---|
| | | height: calc(100% - 78px); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .is-horizontal { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | a { |
|---|
| | | display: inline-block; |
|---|
| | | width: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu { |
|---|
| | | border: none !important; |
|---|
| | | height: 100%; |
|---|
| | | width: 100% !important; |
|---|
| | | padding: 10px 0 16px; |
|---|
| | | border-radius: 0; |
|---|
| | | background: transparent !important; |
|---|
| | | box-shadow: none; |
|---|
| | | backdrop-filter: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu-item, |
|---|
| | | .el-sub-menu__title, |
|---|
| | | .menu-title { |
|---|
| | | overflow: hidden !important; |
|---|
| | | text-overflow: ellipsis !important; |
|---|
| | | white-space: nowrap !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu-item .el-menu-tooltip__trigger { |
|---|
| | | display: inline-flex !important; |
|---|
| | | width: 100%; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .submenu-title-noDropdown, |
|---|
| | | .el-sub-menu__title, |
|---|
| | | .el-menu-item { |
|---|
| | | min-width: 0 !important; |
|---|
| | | width: calc(100% - 24px) !important; |
|---|
| | | margin: 0 12px 8px !important; |
|---|
| | | height: 50px; |
|---|
| | | line-height: 50px; |
|---|
| | | border-radius: 14px; |
|---|
| | | padding-left: 16px !important; |
|---|
| | | padding-right: 36px !important; |
|---|
| | | box-sizing: border-box; |
|---|
| | | transition: all 0.28s ease; |
|---|
| | | color: var(--sidebar-text); |
|---|
| | | background: linear-gradient(128deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); |
|---|
| | | border: 1px solid rgba(255, 255, 255, 0.06) !important; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .submenu-title-noDropdown::after, |
|---|
| | | .el-sub-menu__title::after, |
|---|
| | | .el-menu-item::after { |
|---|
| | | content: ""; |
|---|
| | | position: absolute; |
|---|
| | | inset: 0; |
|---|
| | | background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.16), transparent 78%); |
|---|
| | | transform: translateX(-100%); |
|---|
| | | opacity: 0; |
|---|
| | | transition: transform 0.45s ease, opacity 0.26s ease; |
|---|
| | | pointer-events: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .submenu-title-noDropdown:hover, |
|---|
| | | .el-sub-menu__title:hover, |
|---|
| | | .el-menu-item:hover { |
|---|
| | | background: linear-gradient(128deg, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.28), rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.08)) !important; |
|---|
| | | border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.32) !important; |
|---|
| | | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(8, 36, 76, 0.24); |
|---|
| | | transform: translateX(3px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .submenu-title-noDropdown:hover::after, |
|---|
| | | .el-sub-menu__title:hover::after, |
|---|
| | | .el-menu-item:hover::after, |
|---|
| | | .el-menu-item.is-active::after, |
|---|
| | | .el-sub-menu.is-active > .el-sub-menu__title::after { |
|---|
| | | transform: translateX(100%); |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & .theme-light .is-active > .el-sub-menu__title, |
|---|
| | | & .theme-dark .is-active > .el-sub-menu__title, |
|---|
| | | & .el-menu-item.is-active { |
|---|
| | | color: #fff !important; |
|---|
| | | background: var(--menu-active-bg, linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3))) !important; |
|---|
| | | background-size: 180% 180%; |
|---|
| | | box-shadow: var(--menu-active-glow, 0 10px 24px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.34)); |
|---|
| | | border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.5) !important; |
|---|
| | | animation: sidebarActiveFlow 4.6s ease infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & .nest-menu .el-sub-menu > .el-sub-menu__title, |
|---|
| | | & .el-sub-menu .el-menu-item { |
|---|
| | | min-width: 0 !important; |
|---|
| | | width: calc(100% - 24px) !important; |
|---|
| | | margin: 0 12px 8px !important; |
|---|
| | | height: 46px; |
|---|
| | | line-height: 46px; |
|---|
| | | padding-left: 14px !important; |
|---|
| | | padding-right: 14px !important; |
|---|
| | | border-radius: 12px; |
|---|
| | | transition: all 0.24s ease; |
|---|
| | | color: var(--sidebar-text); |
|---|
| | | border: 1px solid rgba(255, 255, 255, 0.06) !important; |
|---|
| | | background: linear-gradient(128deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); |
|---|
| | | |
|---|
| | | &:hover { |
|---|
| | | background: linear-gradient(128deg, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.24), rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.07)) !important; |
|---|
| | | border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.3) !important; |
|---|
| | | transform: translateX(2px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.is-active { |
|---|
| | | background: var(--menu-active-bg, linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3))) !important; |
|---|
| | | background-size: 180% 180%; |
|---|
| | | color: #fff !important; |
|---|
| | | font-weight: 500; |
|---|
| | | box-shadow: var(--menu-active-glow, 0 10px 24px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.34)); |
|---|
| | | animation: sidebarActiveFlow 4.6s ease infinite; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .hideSidebar { |
|---|
| | | .sidebar-container { |
|---|
| | | width: var(--sidebar-collapsed-width) !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main-container { |
|---|
| | | margin-left: var(--sidebar-collapsed-width); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .submenu-title-noDropdown { |
|---|
| | | padding: 0 !important; |
|---|
| | | position: relative; |
|---|
| | | display: flex !important; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | .svg-icon { |
|---|
| | | margin-right: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-tooltip { |
|---|
| | | padding: 0 !important; |
|---|
| | | display: inline-flex !important; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | width: 100%; |
|---|
| | | |
|---|
| | | .svg-icon { |
|---|
| | | margin-left: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu-tooltip__trigger { |
|---|
| | | width: 100%; |
|---|
| | | display: inline-flex !important; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | .svg-icon { |
|---|
| | | width: 22px; |
|---|
| | | height: 22px; |
|---|
| | | margin-right: 0; |
|---|
| | | flex-shrink: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-sub-menu { |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | & > .el-sub-menu__title { |
|---|
| | | padding: 0 !important; |
|---|
| | | display: flex !important; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | .svg-icon { |
|---|
| | | margin-left: 0; |
|---|
| | | margin-right: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu--collapse { |
|---|
| | | width: 100% !important; |
|---|
| | | padding: 12px 0 16px; |
|---|
| | | |
|---|
| | | > .el-menu-item, |
|---|
| | | .el-sub-menu { |
|---|
| | | & > .el-sub-menu__title, |
|---|
| | | &.el-menu-item { |
|---|
| | | width: calc(100% - 12px) !important; |
|---|
| | | margin: 0 6px 8px !important; |
|---|
| | | padding-left: 0 !important; |
|---|
| | | padding-right: 0 !important; |
|---|
| | | box-sizing: border-box; |
|---|
| | | display: flex !important; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | .svg-icon { |
|---|
| | | width: 22px; |
|---|
| | | height: 22px; |
|---|
| | | margin-right: 0; |
|---|
| | | flex-shrink: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > span { |
|---|
| | | height: 0; |
|---|
| | | width: 0; |
|---|
| | | overflow: hidden; |
|---|
| | | visibility: hidden; |
|---|
| | | display: inline-block; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu--collapse .el-menu .el-sub-menu { |
|---|
| | | min-width: var(--sidebar-width) !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mobile { |
|---|
| | | .main-container { |
|---|
| | | margin-left: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sidebar-container { |
|---|
| | | transition: transform 0.25s; |
|---|
| | | width: var(--sidebar-width) !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.hideSidebar { |
|---|
| | | .sidebar-container { |
|---|
| | | pointer-events: none; |
|---|
| | | transition-duration: 0.3s; |
|---|
| | | transform: translate3d(calc(-1 * var(--sidebar-width)), 0, 0); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .withoutAnimation { |
|---|
| | | .main-container, |
|---|
| | | .sidebar-container { |
|---|
| | | transition: none; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu--vertical { |
|---|
| | | & > .el-menu { |
|---|
| | | .svg-icon { |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .nest-menu .el-sub-menu > .el-sub-menu__title, |
|---|
| | | .el-menu-item { |
|---|
| | | min-width: 0 !important; |
|---|
| | | margin: 0 10px 8px; |
|---|
| | | width: calc(100% - 20px); |
|---|
| | | height: 46px; |
|---|
| | | line-height: 46px; |
|---|
| | | padding-left: 12px !important; |
|---|
| | | padding-right: 12px !important; |
|---|
| | | box-sizing: border-box; |
|---|
| | | border-radius: 12px; |
|---|
| | | color: var(--sidebar-text); |
|---|
| | | border: 1px solid rgba(255, 255, 255, 0.06) !important; |
|---|
| | | background: linear-gradient(128deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); |
|---|
| | | transition: all 0.24s ease; |
|---|
| | | |
|---|
| | | &:hover { |
|---|
| | | background: linear-gradient(128deg, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.24), rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.07)) !important; |
|---|
| | | border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.3) !important; |
|---|
| | | transform: translateX(2px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.is-active { |
|---|
| | | background: var(--menu-active-bg, linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3))) !important; |
|---|
| | | background-size: 180% 180%; |
|---|
| | | color: #fff !important; |
|---|
| | | border-radius: 12px; |
|---|
| | | box-shadow: var(--menu-active-glow, 0 10px 24px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.34)); |
|---|
| | | border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.5) !important; |
|---|
| | | animation: sidebarActiveFlow 4.6s ease infinite; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | > .el-menu--popup { |
|---|
| | | max-height: 100vh; |
|---|
| | | overflow-y: auto; |
|---|
| | | padding: 10px; |
|---|
| | | border-radius: 14px; |
|---|
| | | border: 1px solid rgba(163, 194, 236, 0.26); |
|---|
| | | box-shadow: var(--shadow-md); |
|---|
| | | background: rgba(16, 49, 89, 0.96); |
|---|
| | | backdrop-filter: blur(16px); |
|---|
| | | |
|---|
| | | &::-webkit-scrollbar-track-piece { |
|---|
| | | background: var(--surface-muted); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &::-webkit-scrollbar { |
|---|
| | | width: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &::-webkit-scrollbar-thumb { |
|---|
| | | background: var(--accent-light); |
|---|
| | | border-radius: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes sidebarActiveFlow { |
|---|
| | | 0% { |
|---|
| | | background-position: 0% 50%; |
|---|
| | | } |
|---|
| | | 50% { |
|---|
| | | background-position: 100% 50%; |
|---|
| | | } |
|---|
| | | 100% { |
|---|
| | | background-position: 0% 50%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes sidebarAuroraDrift { |
|---|
| | | 0% { |
|---|
| | | transform: translate3d(-4.8%, -1.2%, 0) scale(1.03) rotate(-1.2deg); |
|---|
| | | } |
|---|
| | | 7% { |
|---|
| | | transform: translate3d(2.6%, -3.9%, 0) scale(1.06) rotate(0.4deg); |
|---|
| | | } |
|---|
| | | 19% { |
|---|
| | | transform: translate3d(-2.9%, 3.7%, 0) scale(1.08) rotate(1.7deg); |
|---|
| | | } |
|---|
| | | 28% { |
|---|
| | | transform: translate3d(4.7%, 1.5%, 0) scale(1.02) rotate(-0.8deg); |
|---|
| | | } |
|---|
| | | 41% { |
|---|
| | | transform: translate3d(-3.8%, -2.4%, 0) scale(1.07) rotate(1.2deg); |
|---|
| | | } |
|---|
| | | 53% { |
|---|
| | | transform: translate3d(2.1%, 4.2%, 0) scale(1.03) rotate(-1.1deg); |
|---|
| | | } |
|---|
| | | 67% { |
|---|
| | | transform: translate3d(-5.2%, 0.7%, 0) scale(1.06) rotate(0.3deg); |
|---|
| | | } |
|---|
| | | 79% { |
|---|
| | | transform: translate3d(3.8%, -3.4%, 0) scale(1.04) rotate(1.1deg); |
|---|
| | | } |
|---|
| | | 91% { |
|---|
| | | transform: translate3d(-1.6%, 2.5%, 0) scale(1.08) rotate(-0.6deg); |
|---|
| | | } |
|---|
| | | 100% { |
|---|
| | | transform: translate3d(4.5%, -1.8%, 0) scale(1.03) rotate(-1.4deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes sidebarAuroraBreath { |
|---|
| | | 0% { |
|---|
| | | opacity: 0.7; |
|---|
| | | filter: blur(4px) saturate(1.05); |
|---|
| | | } |
|---|
| | | 23% { |
|---|
| | | opacity: 0.96; |
|---|
| | | filter: blur(6px) saturate(1.2); |
|---|
| | | } |
|---|
| | | 54% { |
|---|
| | | opacity: 0.76; |
|---|
| | | filter: blur(7px) saturate(1.08); |
|---|
| | | } |
|---|
| | | 79% { |
|---|
| | | opacity: 0.98; |
|---|
| | | filter: blur(5px) saturate(1.22); |
|---|
| | | } |
|---|
| | | 100% { |
|---|
| | | opacity: 0.82; |
|---|
| | | filter: blur(6px) saturate(1.12); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes sidebarSheenSweep { |
|---|
| | | 0% { |
|---|
| | | background-position: 220% 0, 8% 20%, 80% 12%; |
|---|
| | | } |
|---|
| | | 11% { |
|---|
| | | background-position: 166% 0, 14% 28%, 76% 18%; |
|---|
| | | } |
|---|
| | | 29% { |
|---|
| | | background-position: 94% 0, 32% 8%, 60% 26%; |
|---|
| | | } |
|---|
| | | 46% { |
|---|
| | | background-position: 24% 0, 48% 24%, 42% 14%; |
|---|
| | | } |
|---|
| | | 63% { |
|---|
| | | background-position: -36% 0, 30% 52%, 20% 20%; |
|---|
| | | } |
|---|
| | | 81% { |
|---|
| | | background-position: -90% 0, 12% 36%, 34% 34%; |
|---|
| | | } |
|---|
| | | 100% { |
|---|
| | | background-position: -132% 0, 8% 20%, 80% 12%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes sidebarSheenJitter { |
|---|
| | | 0% { |
|---|
| | | opacity: 0.2; |
|---|
| | | transform: translate3d(0, 0, 0); |
|---|
| | | } |
|---|
| | | 34% { |
|---|
| | | opacity: 0.48; |
|---|
| | | transform: translate3d(1.4%, -0.4%, 0); |
|---|
| | | } |
|---|
| | | 68% { |
|---|
| | | opacity: 0.26; |
|---|
| | | transform: translate3d(-0.9%, 0.6%, 0); |
|---|
| | | } |
|---|
| | | 100% { |
|---|
| | | opacity: 0.44; |
|---|
| | | transform: translate3d(1.9%, -0.2%, 0); |
|---|
| | | } |
|---|
| | | } |
|---|
