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

00573c09 · Mike Alhayek · GitHub · 7e1bd5cb · 00573c09 · 00573c09
5 changed file
--- 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 {

--- 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";

--- 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>


--- 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);

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