From cc21b1f58dfff869284507a857dd6d8d47ca3919 Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Tue, 19 Nov 2024 06:39:33 -0600 Subject: [PATCH] Added --navbar-header-mobile-x-margin and --navbar-header-mobile-y-margin to undo MrRobot's nav bar changes and make the Plex bar possible on mobile as well via a Theme --- UI/Web/src/app/app.component.scss | 1 - UI/Web/src/theme/components/_navbar.scss | 2 +- UI/Web/src/theme/themes/dark.scss | 2 ++ 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/UI/Web/src/app/app.component.scss b/UI/Web/src/app/app.component.scss index 280354da44..bc68e8372b 100644 --- a/UI/Web/src/app/app.component.scss +++ b/UI/Web/src/app/app.component.scss @@ -15,7 +15,6 @@ scrollbar-width: thin; mask-image: linear-gradient(to bottom, transparent, black 0%, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 95%, transparent 100%); - //margin-top: 7px; // For firefox @supports (-moz-appearance:none) { diff --git a/UI/Web/src/theme/components/_navbar.scss b/UI/Web/src/theme/components/_navbar.scss index 2100110877..73244bdc7d 100644 --- a/UI/Web/src/theme/components/_navbar.scss +++ b/UI/Web/src/theme/components/_navbar.scss @@ -22,6 +22,6 @@ i.fa.nav { @media (max-width: $grid-breakpoints-lg) { .navbar { - margin: 8px 12px; + margin: var(--navbar-header-mobile-x-margin) var(--navbar-header-mobile-y-margin); } } diff --git a/UI/Web/src/theme/themes/dark.scss b/UI/Web/src/theme/themes/dark.scss index 6119ecc3fa..4edab2dc47 100644 --- a/UI/Web/src/theme/themes/dark.scss +++ b/UI/Web/src/theme/themes/dark.scss @@ -108,6 +108,8 @@ --navbar-border-radius: 0px; // 4px for Plex navbar --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1); --navbar-header-margin: 0px; // 8px allows for the Plex navbar + --nav-offset: 56px; + --navbar-header-mobile-x-margin: 0px; // 8px allows for the Plex navbar + --navbar-header-mobile-y-margin: 0px; // 12px allows for the Plex navbar /* Inputs */ --input-bg-color: #343a40;