ele-admin-plus 1.5.1-beta.4 → 1.6.0-beta.2

package/es/style/themes/modern-dark.scss

@@ -8,7 +8,10 @@ $ele-modern-dark: () !default;
 $ele-modern-dark: map.deep-merge(
   (
     'card': (
-      'radius': 12px
+      'radius': 12px,
+      'none-border': 1px solid elVar('border-color', 'extra-light'),
+      'none-shadow': 0 0 12px 0 rgba(0, 0, 0, 0.42),
+      'shadow': elVar('box-shadow')
     ),
     'modal': (
       'radius': 12px
@@ -24,53 +27,53 @@ $ele-modern-dark: map.deep-merge(
 @include set-theme-var($theme-modern-dark-selector, $ele-modern-dark);
 
 #{$theme-modern-dark-selector} {
+  $layout-padding: 8px;
+  $layout-body-radius: 14px;
   $layout-primary-bg: (
     linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)) center / 102% 102%,
     elVar('color-primary')
   );
   .ele-pro-layout {
-    padding: 8px;
+    padding: 0 $layout-padding $layout-padding 0;
     background: $layout-primary-bg;
-    #{eleVarName('layout', 'bg')}: #1f1f1f;
+    #{eleVarName('layout', 'bg')}: elVar('bg-color');
     #{eleVarName('layout', 'button-tab-page-pt')}: 12px;
     #{eleVarName('header', 'bg')}: eleVar('layout', 'bg');
     #{eleVarName('header', 'height')}: 46px;
-    #{eleVarName('header', 'line-color')}: transparent;
-    #{eleVarName('header', 'ghost-bg')}: eleVar('layout', 'bg');
+    #{eleVarName('header', 'divider-shadow')}: none;
+    #{eleVarName('header', 'ghost-bg')}: $layout-primary-bg;
     #{eleVarName('header', 'shadow')}: none;
-    #{eleVarName('header', 'primary-bg')}: (
-      linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) center / 102% 102%,
-      elVar('color-primary', 'dark-2')
-    );
+    #{eleVarName('header', 'primary-bg')}: elVar('color-primary', 'light-5');
     #{eleVarName('header', 'primary-shadow')}: none;
-    #{eleVarName('header', 'tool-radius')}: calc(
-      (#{eleVar('header', 'height')} - #{eleVar('header', 'tool-height')}) * 1.5
-    );
-    #{eleVarName('header', 'primary-active-bg')}: elVar('color-primary');
-    #{eleVarName('sidebar', 'bg')}: transparent;
+    #{eleVarName('header', 'menu-height')}: 38px;
+    #{eleVarName('sidebar', 'bg')}: $layout-primary-bg;
     #{eleVarName('sidebar', 'shadow')}: none;
-    #{eleVarName('sidebar', 'dark-bg')}: transparent;
-    #{eleVarName('sidebar', 'ghost-bg')}: transparent;
-    #{eleVarName('sidebar', 'mobile-bg')}: elVar('color-primary');
-    #{eleVarName('sidebar', 'mobile-dark-bg')}: elVar('color-primary');
+    #{eleVarName('sidebar', 'divider-shadow')}: none;
+    #{eleVarName('sidebar', 'dark-bg')}: $layout-primary-bg;
+    #{eleVarName('sidebar', 'ghost-bg')}: $layout-primary-bg;
+    #{eleVarName('sidebar', 'mobile-bg')}: $layout-primary-bg;
+    #{eleVarName('sidebar', 'mobile-dark-bg')}: $layout-primary-bg;
     #{eleVarName('sidebar', 'dark-shadow')}: none;
-    #{eleVarName('sidebar', 'collapse-width')}: 62px;
-    #{eleVarName('sidebox', 'width')}: 88px;
+    #{eleVarName('sidebar', 'dark-line-color')}: -0.8px 0 0 0
+      rgba(255, 255, 255, 0.16) inset;
+    #{eleVarName('sidebar', 'collapse-width')}: 56px;
+
+    &.is-row-direction {
+      padding-top: $layout-padding;
+    }
 
     & > .ele-admin-main > .ele-admin-body > .ele-admin-wrapper {
       background: eleVar('layout', 'bg');
-      border-bottom-left-radius: 24px;
-      border-bottom-right-radius: 24px;
+      border-bottom-left-radius: $layout-body-radius;
+      border-bottom-right-radius: $layout-body-radius;
     }
 
     & > .ele-admin-main > .ele-admin-header {
-      border-top-left-radius: 24px;
-      border-top-right-radius: 24px;
+      border-top-left-radius: $layout-body-radius;
+      border-top-right-radius: $layout-body-radius;
     }
 
     & > .ele-admin-header {
-      margin-top: -8px;
-      backdrop-filter: blur(48px);
       #{eleVarName('header', 'bg')}: $layout-primary-bg;
       #{eleVarName('header', 'dark-bg')}: $layout-primary-bg;
       #{eleVarName('header', 'dark-shadow')}: none;
@@ -78,30 +81,15 @@ $ele-modern-dark: map.deep-merge(
       #{eleVarName('header', 'primary-shadow')}: none;
       #{eleVarName('header', 'ghost-bg')}: $layout-primary-bg;
 
-      & > .ele-admin-tabs {
+      &.is-primary > .ele-admin-tabs {
         #{eleVarName('tab', 'simple-active-bg')}: eleVar('layout', 'bg');
-        #{eleVarName('tab', 'simple-line-display')}: none;
-        #{eleVarName('tab', 'indicator-dot-color')}: rgba(255, 255, 255, 0.4);
-      }
-
-      &:not(.is-ghost) > .ele-admin-tabs {
-        #{eleVarName('tab', 'button-hover-color')}: #fff;
       }
+    }
 
-      &.is-dark > .ele-admin-tabs {
-        #{eleVarName('tab', 'simple-active-bg')}: elVar(
-          'color',
-          'primary',
-          'dark-2'
-        );
-        #{eleVarName('tab', 'button-active-bg')}: elVar(
-          'color',
-          'primary',
-          'dark-2'
-        );
-        #{eleVarName('tab', 'button-active-shadow')}: 0 0 0 0.8px
-          rgba(255, 255, 255, 0.6);
-      }
+    & > .ele-admin-header > .ele-admin-tools,
+    & > .ele-admin-main > .ele-admin-header > .ele-admin-tools {
+      #{eleVarName('header', 'tool-height')}: 38px;
+      #{eleVarName('header', 'tool-radius')}: 38px;
     }
 
     & > .ele-admin-header .ele-menu,
@@ -109,31 +97,55 @@ $ele-modern-dark: map.deep-merge(
     & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebar .ele-menu,
     & > .ele-admin-side > .ele-admin-sidebox .ele-menu,
     & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebox .ele-menu {
-      #{eleVarName('menu', 'arrow-size')}: 13px;
+      $menu-hover-bg: rgba(255, 255, 255, 0.1);
+      #{eleVarName('menu', 'arrow-margin')}: 0 -8px 0 6px;
+      #{eleVarName('menu', 'padding')}: 2px 0;
       #{eleVarName('menu', 'child-bg')}: transparent;
       #{eleVarName('menu', 'dark-child-bg')}: transparent;
-      #{eleVarName('menu', 'item-radius')}: 12px;
-      #{eleVarName('menu', 'item-hover-bg')}: rgba(255, 255, 255, 0.1);
-      #{eleVarName('menu', 'item-focus-bg')}: rgba(255, 255, 255, 0.1);
-      #{eleVarName('menu', 'item-active-bg')}: #fff;
+      #{eleVarName('menu', 'item-padding')}: $layout-padding;
+      #{eleVarName('menu', 'item-radius')}: 20px;
+      #{eleVarName('menu', 'item-hover-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'item-focus-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'item-active-line')}: 0;
+      #{eleVarName('menu', 'horizontal-padding')}: 0 6px;
+      #{eleVarName('menu', 'horizontal-item-padding')}: 12px;
+      #{eleVarName('menu', 'horizontal-item-margin')}: 4px;
+      #{eleVarName('menu', 'horizontal-item-radius')}: 20px;
+      #{eleVarName('menu', 'horizontal-hover-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-focus-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-arrow-margin')}: 0 -4px 0 4px;
+      #{eleVarName('menu', 'horizontal-line-size')}: 0;
+      #{eleVarName('menu', 'colorful-icon-radius')}: 50%;
+      #{eleVarName('menu', 'colorful-icon-size')}: 22px;
+    }
+
+    & > .ele-admin-header.is-dark .ele-menu,
+    & > .ele-admin-header.is-primary .ele-menu,
+    & > .ele-admin-side > .ele-admin-sidebar.is-dark .ele-menu,
+    & > .ele-admin-main > .ele-admin-side .ele-admin-sidebar.is-dark .ele-menu,
+    & > .ele-admin-side > .ele-admin-sidebox.is-dark .ele-menu,
+    & > .ele-admin-main > .ele-admin-side .ele-admin-sidebox.is-dark .ele-menu {
+      $menu-hover-bg: rgba(255, 255, 255, 0.12);
+      $menu-dot-color: rgba(255, 255, 255, 0.6);
+      $menu-dot-active-color: elVar('color-primary');
+      #{eleVarName('menu', 'item-hover-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'item-focus-bg')}: $menu-hover-bg;
       #{eleVarName('menu', 'item-active-color')}: eleVar('menu', 'item-color');
+      #{eleVarName('menu', 'item-active-bg')}: #fff;
+      #{eleVarName('menu', 'horizontal-hover-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-focus-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-active-bg')}: #fff;
+      #{eleVarName('menu', 'horizontal-dark-hover-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-dark-focus-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-dark-active-bg')}: #fff;
+      #{eleVarName('menu', 'dark-hover-bg')}: $menu-hover-bg;
       #{eleVarName('menu', 'dark-active-bg')}: #fff;
-      #{eleVarName('menu', 'colorful-dot-color')}: rgba(255, 255, 255, 0.6);
+      #{eleVarName('menu', 'colorful-dot-color')}: $menu-dot-color;
       #{eleVarName('menu', 'colorful-dot-hover-color')}: #fff;
-      #{eleVarName('menu', 'colorful-dot-active-color')}: elVar(
-        'color-primary'
-      );
-      #{eleVarName('menu', 'colorful-dark-dot-color')}: rgba(
-        255,
-        255,
-        255,
-        0.6
-      );
+      #{eleVarName('menu', 'colorful-dot-active-color')}: $menu-dot-active-color;
+      #{eleVarName('menu', 'colorful-dark-dot-color')}: $menu-dot-color;
       #{eleVarName('menu', 'colorful-dark-dot-hover-color')}: #fff;
-      #{eleVarName('menu', 'colorful-dark-dot-active-color')}: elVar(
-        'color-primary'
-      );
-      #{eleVarName('menu', 'horizontal-dark-active-bg')}: #fff;
+      #{eleVarName('menu', 'colorful-dark-dot-active-color')}: $menu-dot-active-color;
 
       .el-menu-item.is-active,
       .el-sub-menu.is-active > .el-sub-menu__title.el-tooltip__trigger {
@@ -141,30 +153,13 @@ $ele-modern-dark: map.deep-merge(
       }
     }
 
-    & > .ele-admin-side,
-    & > .ele-admin-main > .ele-admin-side {
-      & > .ele-admin-sidebar,
-      & > .ele-admin-sidebox {
-        border: none;
-
-        .el-scrollbar__view > .ele-menu {
-          padding-right: 8px;
-        }
-      }
-
-      & > .ele-admin-sidebox {
-        backdrop-filter: blur(80px);
-
-        & + .ele-admin-sidebar {
-          #{eleVarName('sidebar', 'shadow')}: 0.8px 0 0 rgba(255, 255, 255, 0.2)
-            inset;
-          #{eleVarName('sidebar', 'dark-shadow')}: 0.8px 0 0
-            rgba(255, 255, 255, 0.2) inset;
+    & > .ele-admin-side > .ele-admin-sidebox,
+    & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebox {
+      #{eleVarName('sidebar', 'divider-shadow')}: 0 0 0 0.8px
+        rgba(255, 255, 255, 0.16);
 
-          .el-scrollbar__view > .ele-menu {
-            padding-left: 8px;
-          }
-        }
+      &:not(.is-compact) .ele-menu {
+        #{eleVarName('menu', 'item-radius')}: $layout-body-radius;
       }
     }
 
@@ -173,13 +168,19 @@ $ele-modern-dark: map.deep-merge(
         #{eleVarName('tab', 'height')}: 38px;
         #{eleVarName('tab', 'button-padding')}: 4px;
         #{eleVarName('tab', 'button-space')}: 12px;
+        #{eleVarName('tab', 'button-shadow')}:
+          0 0 0 0.8px elVar('border-color', 'extra-light') inset,
+          0 0 4px 0 rgba(0, 0, 0, 0.42);
+        #{eleVarName('tab', 'button-active-shadow')}:
+          0 0 0 0.8px elVar('border-color', 'lighter') inset,
+          0 0 4px 0 rgba(0, 0, 0, 0.42);
       }
 
       & > .ele-admin-side + .ele-admin-body > .ele-admin-tabs,
       & > .ele-admin-body:first-child > .ele-admin-tabs,
       & > .ele-admin-body > .ele-admin-wrapper:first-child {
-        border-top-left-radius: 24px;
-        border-top-right-radius: 24px;
+        border-top-left-radius: $layout-body-radius;
+        border-top-right-radius: $layout-body-radius;
       }
 
       & > .ele-admin-header + .ele-admin-body > .ele-admin-wrapper {
@@ -192,26 +193,23 @@ $ele-modern-dark: map.deep-merge(
       }
     }
 
-    &.is-mobile > .ele-admin-side > .ele-admin-sidebox,
-    &.is-mobile > .ele-admin-side > .ele-admin-sidebar {
-      border-top-left-radius: 24px;
-      border-bottom-left-radius: 24px;
-      #{eleVarName('sidebar', 'collapse-width')}: 70px;
-      #{eleVarName('sidebox', 'width')}: 96px;
+    &.is-top-layout {
+      padding-left: $layout-padding;
+    }
+
+    &.is-mobile {
+      padding-left: $layout-padding;
 
-      .el-scrollbar__view > .ele-menu,
-      .el-scrollbar__view > .ele-menu {
-        padding-left: 8px;
+      & > .ele-admin-side > .ele-admin-sidebox,
+      & > .ele-admin-side > .ele-admin-sidebar {
+        border-top-left-radius: $layout-body-radius;
+        border-bottom-left-radius: $layout-body-radius;
       }
-    }
 
-    &.is-mobile > .ele-admin-side > .ele-admin-sidebox + .ele-admin-sidebar {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      & > .ele-admin-side > .ele-admin-sidebox + .ele-admin-sidebar {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     }
   }
-
-  #nprogress {
-    #{elVarName('color-primary')}: #fff;
-  }
 }

package/es/style/themes/modern.scss

@@ -8,7 +8,9 @@ $ele-modern: () !default;
 $ele-modern: map.deep-merge(
   (
     'card': (
-      'radius': 12px
+      'radius': 12px,
+      'none-border': 1px solid elVar('border-color', 'extra-light'),
+      'none-shadow': 0 0 4px 1px rgba(0, 0, 0, 0.04)
     ),
     'modal': (
       'radius': 12px
@@ -24,77 +26,69 @@ $ele-modern: map.deep-merge(
 @include set-theme-var($theme-modern-selector, $ele-modern);
 
 #{$theme-modern-selector} {
+  $layout-padding: 8px;
+  $layout-body-radius: 14px;
+  $layout-primary-bg: (
+    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)) center / 102% 102%,
+    elVar('color-primary', 'dark-2')
+  );
   .ele-pro-layout {
-    padding: 8px;
-    background: elVar('color-primary');
-    #{eleVarName('layout', 'bg')}: #f4f4fb;
+    padding: 0 $layout-padding $layout-padding 0;
+    background: $layout-primary-bg;
+    #{eleVarName('layout', 'bg')}: #fff;
     #{eleVarName('layout', 'button-tab-page-pt')}: 12px;
     #{eleVarName('header', 'bg')}: eleVar('layout', 'bg');
     #{eleVarName('header', 'height')}: 46px;
-    #{eleVarName('header', 'line-color')}: transparent;
+    #{eleVarName('header', 'divider-shadow')}: none;
     #{eleVarName('header', 'ghost-bg')}: eleVar('layout', 'bg');
     #{eleVarName('header', 'shadow')}: none;
     #{eleVarName('header', 'primary-bg')}: elVar('color-primary', 'dark-2');
     #{eleVarName('header', 'primary-shadow')}: none;
-    #{eleVarName('header', 'tool-radius')}: calc(
-      (#{eleVar('header', 'height')} - #{eleVar('header', 'tool-height')}) * 1.5
-    );
-    #{eleVarName('header', 'primary-active-bg')}: elVar('color-primary');
-    #{eleVarName('sidebar', 'bg')}: transparent;
+    #{eleVarName('header', 'menu-height')}: 38px;
+    #{eleVarName('sidebar', 'bg')}: $layout-primary-bg;
     #{eleVarName('sidebar', 'shadow')}: none;
-    #{eleVarName('sidebar', 'dark-bg')}: transparent;
-    #{eleVarName('sidebar', 'ghost-bg')}: transparent;
-    #{eleVarName('sidebar', 'mobile-bg')}: elVar('color-primary');
-    #{eleVarName('sidebar', 'mobile-dark-bg')}: elVar('color-primary');
+    #{eleVarName('sidebar', 'divider-shadow')}: none;
+    #{eleVarName('sidebar', 'dark-bg')}: $layout-primary-bg;
+    #{eleVarName('sidebar', 'ghost-bg')}: $layout-primary-bg;
+    #{eleVarName('sidebar', 'mobile-bg')}: $layout-primary-bg;
+    #{eleVarName('sidebar', 'mobile-dark-bg')}: $layout-primary-bg;
     #{eleVarName('sidebar', 'dark-shadow')}: none;
-    #{eleVarName('sidebar', 'collapse-width')}: 62px;
-    #{eleVarName('sidebox', 'width')}: 88px;
+    #{eleVarName('sidebar', 'dark-divider-shadow')}: -0.8px 0 0 0
+      rgba(255, 255, 255, 0.16) inset;
+    #{eleVarName('sidebar', 'collapse-width')}: 56px;
+
+    &.is-row-direction {
+      padding-top: $layout-padding;
+    }
 
     & > .ele-admin-main > .ele-admin-body > .ele-admin-wrapper {
       background: eleVar('layout', 'bg');
-      border-bottom-left-radius: 24px;
-      border-bottom-right-radius: 24px;
+      border-bottom-left-radius: $layout-body-radius;
+      border-bottom-right-radius: $layout-body-radius;
     }
 
     & > .ele-admin-main > .ele-admin-header {
-      border-top-left-radius: 24px;
-      border-top-right-radius: 24px;
+      border-top-left-radius: $layout-body-radius;
+      border-top-right-radius: $layout-body-radius;
     }
 
     & > .ele-admin-header {
-      margin-top: -8px;
-      backdrop-filter: blur(48px);
-      #{eleVarName('header', 'bg')}: elVar('color-primary');
-      #{eleVarName('header', 'dark-bg')}: elVar('color-primary');
+      #{eleVarName('header', 'bg')}: $layout-primary-bg;
+      #{eleVarName('header', 'dark-bg')}: $layout-primary-bg;
       #{eleVarName('header', 'dark-shadow')}: none;
-      #{eleVarName('header', 'primary-bg')}: elVar('color-primary');
+      #{eleVarName('header', 'primary-bg')}: $layout-primary-bg;
       #{eleVarName('header', 'primary-shadow')}: none;
-      #{eleVarName('header', 'ghost-bg')}: elVar('color-primary');
+      #{eleVarName('header', 'ghost-bg')}: $layout-primary-bg;
 
-      & > .ele-admin-tabs {
+      &.is-primary > .ele-admin-tabs {
         #{eleVarName('tab', 'simple-active-bg')}: eleVar('layout', 'bg');
-        #{eleVarName('tab', 'simple-line-display')}: none;
-        #{eleVarName('tab', 'indicator-dot-color')}: rgba(255, 255, 255, 0.4);
-      }
-
-      &:not(.is-ghost) > .ele-admin-tabs {
-        #{eleVarName('tab', 'button-hover-color')}: #fff;
       }
+    }
 
-      &.is-dark > .ele-admin-tabs {
-        #{eleVarName('tab', 'simple-active-bg')}: elVar(
-          'color',
-          'primary',
-          'dark-2'
-        );
-        #{eleVarName('tab', 'button-active-bg')}: elVar(
-          'color',
-          'primary',
-          'dark-2'
-        );
-        #{eleVarName('tab', 'button-active-shadow')}: 0 0 0 0.8px
-          rgba(255, 255, 255, 0.6);
-      }
+    & > .ele-admin-header > .ele-admin-tools,
+    & > .ele-admin-main > .ele-admin-header > .ele-admin-tools {
+      #{eleVarName('header', 'tool-height')}: 38px;
+      #{eleVarName('header', 'tool-radius')}: 38px;
     }
 
     & > .ele-admin-header .ele-menu,
@@ -102,31 +96,55 @@ $ele-modern: map.deep-merge(
     & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebar .ele-menu,
     & > .ele-admin-side > .ele-admin-sidebox .ele-menu,
     & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebox .ele-menu {
-      #{eleVarName('menu', 'arrow-size')}: 13px;
+      $menu-hover-bg: rgba(0, 0, 0, 0.04);
+      #{eleVarName('menu', 'arrow-margin')}: 0 -8px 0 6px;
+      #{eleVarName('menu', 'padding')}: 2px 0;
       #{eleVarName('menu', 'child-bg')}: transparent;
       #{eleVarName('menu', 'dark-child-bg')}: transparent;
-      #{eleVarName('menu', 'item-radius')}: 12px;
-      #{eleVarName('menu', 'item-hover-bg')}: rgba(255, 255, 255, 0.1);
-      #{eleVarName('menu', 'item-focus-bg')}: rgba(255, 255, 255, 0.1);
-      #{eleVarName('menu', 'item-active-bg')}: #fff;
+      #{eleVarName('menu', 'item-padding')}: $layout-padding;
+      #{eleVarName('menu', 'item-radius')}: 20px;
+      #{eleVarName('menu', 'item-hover-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'item-focus-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'item-active-line')}: 0;
+      #{eleVarName('menu', 'horizontal-padding')}: 0 6px;
+      #{eleVarName('menu', 'horizontal-item-padding')}: 12px;
+      #{eleVarName('menu', 'horizontal-item-margin')}: 4px;
+      #{eleVarName('menu', 'horizontal-item-radius')}: 20px;
+      #{eleVarName('menu', 'horizontal-hover-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-focus-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-arrow-margin')}: 0 -4px 0 4px;
+      #{eleVarName('menu', 'horizontal-line-size')}: 0;
+      #{eleVarName('menu', 'colorful-icon-radius')}: 50%;
+      #{eleVarName('menu', 'colorful-icon-size')}: 22px;
+    }
+
+    & > .ele-admin-header.is-dark .ele-menu,
+    & > .ele-admin-header.is-primary .ele-menu,
+    & > .ele-admin-side > .ele-admin-sidebar.is-dark .ele-menu,
+    & > .ele-admin-main > .ele-admin-side .ele-admin-sidebar.is-dark .ele-menu,
+    & > .ele-admin-side > .ele-admin-sidebox.is-dark .ele-menu,
+    & > .ele-admin-main > .ele-admin-side .ele-admin-sidebox.is-dark .ele-menu {
+      $menu-hover-bg: rgba(255, 255, 255, 0.12);
+      $menu-dot-color: rgba(255, 255, 255, 0.6);
+      $menu-dot-active-color: elVar('color-primary');
+      #{eleVarName('menu', 'item-hover-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'item-focus-bg')}: $menu-hover-bg;
       #{eleVarName('menu', 'item-active-color')}: eleVar('menu', 'item-color');
+      #{eleVarName('menu', 'item-active-bg')}: #fff;
+      #{eleVarName('menu', 'horizontal-hover-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-focus-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-active-bg')}: #fff;
+      #{eleVarName('menu', 'horizontal-dark-hover-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-dark-focus-bg')}: $menu-hover-bg;
+      #{eleVarName('menu', 'horizontal-dark-active-bg')}: #fff;
+      #{eleVarName('menu', 'dark-hover-bg')}: $menu-hover-bg;
       #{eleVarName('menu', 'dark-active-bg')}: #fff;
-      #{eleVarName('menu', 'colorful-dot-color')}: rgba(255, 255, 255, 0.6);
+      #{eleVarName('menu', 'colorful-dot-color')}: $menu-dot-color;
       #{eleVarName('menu', 'colorful-dot-hover-color')}: #fff;
-      #{eleVarName('menu', 'colorful-dot-active-color')}: elVar(
-        'color-primary'
-      );
-      #{eleVarName('menu', 'colorful-dark-dot-color')}: rgba(
-        255,
-        255,
-        255,
-        0.6
-      );
+      #{eleVarName('menu', 'colorful-dot-active-color')}: $menu-dot-active-color;
+      #{eleVarName('menu', 'colorful-dark-dot-color')}: $menu-dot-color;
       #{eleVarName('menu', 'colorful-dark-dot-hover-color')}: #fff;
-      #{eleVarName('menu', 'colorful-dark-dot-active-color')}: elVar(
-        'color-primary'
-      );
-      #{eleVarName('menu', 'horizontal-dark-active-bg')}: #fff;
+      #{eleVarName('menu', 'colorful-dark-dot-active-color')}: $menu-dot-active-color;
 
       .el-menu-item.is-active,
       .el-sub-menu.is-active > .el-sub-menu__title.el-tooltip__trigger {
@@ -134,30 +152,13 @@ $ele-modern: map.deep-merge(
       }
     }
 
-    & > .ele-admin-side,
-    & > .ele-admin-main > .ele-admin-side {
-      & > .ele-admin-sidebar,
-      & > .ele-admin-sidebox {
-        border: none;
-
-        .el-scrollbar__view > .ele-menu {
-          padding-right: 8px;
-        }
-      }
-
-      & > .ele-admin-sidebox {
-        backdrop-filter: blur(80px);
-
-        & + .ele-admin-sidebar {
-          #{eleVarName('sidebar', 'shadow')}: 0.8px 0 0 rgba(255, 255, 255, 0.2)
-            inset;
-          #{eleVarName('sidebar', 'dark-shadow')}: 0.8px 0 0
-            rgba(255, 255, 255, 0.2) inset;
+    & > .ele-admin-side > .ele-admin-sidebox,
+    & > .ele-admin-main > .ele-admin-side > .ele-admin-sidebox {
+      #{eleVarName('sidebar', 'divider-shadow')}: 0 0 0 0.8px
+        rgba(255, 255, 255, 0.16);
 
-          .el-scrollbar__view > .ele-menu {
-            padding-left: 8px;
-          }
-        }
+      &:not(.is-compact) .ele-menu {
+        #{eleVarName('menu', 'item-radius')}: $layout-body-radius;
       }
     }
 
@@ -166,13 +167,19 @@ $ele-modern: map.deep-merge(
         #{eleVarName('tab', 'height')}: 38px;
         #{eleVarName('tab', 'button-padding')}: 4px;
         #{eleVarName('tab', 'button-space')}: 12px;
+        #{eleVarName('tab', 'button-shadow')}:
+          0 0 0 0.8px elVar('border-color', 'lighter') inset,
+          0 0 4px 1px rgba(0, 0, 0, 0.04);
+        #{eleVarName('tab', 'button-active-shadow')}:
+          0 0 0 0.8px elVar('border-color') inset,
+          0 0 4px 1px rgba(0, 0, 0, 0.04);
       }
 
       & > .ele-admin-side + .ele-admin-body > .ele-admin-tabs,
       & > .ele-admin-body:first-child > .ele-admin-tabs,
       & > .ele-admin-body > .ele-admin-wrapper:first-child {
-        border-top-left-radius: 24px;
-        border-top-right-radius: 24px;
+        border-top-left-radius: $layout-body-radius;
+        border-top-right-radius: $layout-body-radius;
       }
 
       & > .ele-admin-header + .ele-admin-body > .ele-admin-wrapper {
@@ -185,26 +192,23 @@ $ele-modern: map.deep-merge(
       }
     }
 
-    &.is-mobile > .ele-admin-side > .ele-admin-sidebox,
-    &.is-mobile > .ele-admin-side > .ele-admin-sidebar {
-      border-top-left-radius: 24px;
-      border-bottom-left-radius: 24px;
-      #{eleVarName('sidebar', 'collapse-width')}: 70px;
-      #{eleVarName('sidebox', 'width')}: 96px;
+    &.is-top-layout {
+      padding-left: $layout-padding;
+    }
+
+    &.is-mobile {
+      padding-left: $layout-padding;
 
-      .el-scrollbar__view > .ele-menu,
-      .el-scrollbar__view > .ele-menu {
-        padding-left: 8px;
+      & > .ele-admin-side > .ele-admin-sidebox,
+      & > .ele-admin-side > .ele-admin-sidebar {
+        border-top-left-radius: $layout-body-radius;
+        border-bottom-left-radius: $layout-body-radius;
       }
-    }
 
-    &.is-mobile > .ele-admin-side > .ele-admin-sidebox + .ele-admin-sidebar {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      & > .ele-admin-side > .ele-admin-sidebox + .ele-admin-sidebar {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     }
   }
-
-  #nprogress {
-    #{elVarName('color-primary')}: #fff;
-  }
 }