Fix admin menu background color on small screen. (#14434)

OrchardCMS · Oct 5, 2023 · 00573c0 · 00573c0
1 parent 7e1bd5c
commit 00573c0
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 9 deletions.
diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_sidebar-menu.scss b/src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_sidebar-menu.scss
@@ -880,8 +880,9 @@ body:not(.left-sidebar-compact) {
 
 // fixing a flickering that occurs on compact leftbar while icons load.
 html:not(.fontawesome-i2svg-complete) #left-nav ul.menu-admin > li > .item-label {
-    background-color: $gray-100 !important;
+    background-color: var(--oc-admin-menu-bg-color, $gray-100) !important;
 }
+
 // Layout 5 : leftbar compactor button
 // -----------------------------------
 .leftbar-compactor {

diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/scss/themes/dark/_index.scss b/src/OrchardCore.Themes/TheAdmin/Assets/scss/themes/dark/_index.scss
@@ -3,7 +3,7 @@
 
 @include color-mode(dark) {
     --oc-scrollbar-color: #76787A;
-    --oc-admin-menu-bg-color: var(--bs-dark-bg);
+    --oc-admin-menu-bg-color: var(--bs-dark);
 
     @import "badge";
     @import "bootstrap-select";

diff --git a/src/OrchardCore.Themes/TheAdmin/Views/Layout-Login.cshtml b/src/OrchardCore.Themes/TheAdmin/Views/Layout-Login.cshtml
@@ -26,11 +26,13 @@
 </head>
 <body>
     <div class="d-flex align-items-center justify-content-center h-100">
-        @await RenderSectionAsync("Header", required: false)
-        @await RenderSectionAsync("Messages", required: false)
+        <div class="container-fluid">
+            @await RenderSectionAsync("Header", required: false)
+            @await RenderSectionAsync("Messages", required: false)
 
-        <div class="auth-wrapper">
-            @await RenderBodyAsync()
+            <div class="auth-wrapper">
+                @await RenderBodyAsync()
+            </div>
         </div>
     </div>
 

diff --git a/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.css b/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.css
@@ -9272,7 +9272,7 @@ body:not(.left-sidebar-compact) #ta-left-sidebar #filter:focus {
 }
 
 html:not(.fontawesome-i2svg-complete) #left-nav ul.menu-admin > li > .item-label {
-  background-color: #f8f9fa !important;
+  background-color: var(--oc-admin-menu-bg-color, #f8f9fa) !important;
 }
 
 .leftbar-compactor {
@@ -9751,7 +9751,7 @@ textarea.form-control.input-validation-error {
 
 [data-bs-theme=dark] {
   --oc-scrollbar-color: #76787A;
-  --oc-admin-menu-bg-color: var(--bs-dark-bg);
+  --oc-admin-menu-bg-color: var(--bs-dark);
 }
 [data-bs-theme=dark] .ta-badge {
   background-color: var(--bs-dark);

diff --git a/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.min.css b/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.min.css