fix: 🐛 Bazarr: mobile fixes, 4k addon fix

css/addons/bazarr/bazarr-4k-logo/bazarr-4k-logo.css

@@ -1,35 +1,19 @@
-/* Desktop */ 
-@media (min-width: 752px) {
-    .header-icon.px-3.m-0.d-none.d-md-block img  {
+    .mantine-Avatar-root[class*="bazarr-"] img {
         display: none !important;
     }
-    .header-icon.px-3.m-0.d-none.d-md-block:before {
-        background-image: url("/css/addons/bazarr/bazarr-4k-logo/bazarr4k.png");
-        display: inline-block;
-        width: 32px; 
-        height: 32px;
-        content:"";
-        background-size:  cover;
-        -webkit-background-size:  cover;
-        -moz-background-size:  cover;
-        -o-background-size: cover;
-    }    
-} 
 
-/* Mobile */
-@media (max-width: 767px) {
-   .sidebar-title.d-flex.align-items-center.d-md-none.container img  {
-        display: none !important;
-    }   
-   .sidebar-title.d-flex.align-items-center.d-md-none.container:before {
+    .mantine-Avatar-root[class*="bazarr-"]:before {
         background-image: url("/css/addons/bazarr/bazarr-4k-logo/bazarr4k.png");
         display: inline-block;
-        width: 32px; 
+        width: 32px;
         height: 32px;
-        content:"";
-        background-size:  cover;
-        -webkit-background-size:  cover;
-        -moz-background-size:  cover;
+        content: "";
+        background-size: cover;
+        -webkit-background-size: cover;
+        -moz-background-size: cover;
         -o-background-size: cover;
-    } 
-}
+    }
+
+    #root>div>nav>div>div.mantine-Group-root.mantine-Group-child[class*="bazarr-"]>div>span:after {
+        content: " 4K";
+    }

css/base/bazarr/bazarr-base.css

@@ -69,7 +69,7 @@ h6,
 
 /* SIDEMENU */
 
-.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] {
+.mantine-Navbar-root[class*="bazarr-"] {
     background: var(--transparency-dark-25);
     border-right: 1px solid var(--transparency-light-15);
 }
@@ -78,17 +78,17 @@ h6,
     border-top-color: var(--transparency-light-10);
 }
 
-.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root[class*="bazarr-"] a[aria-current="page"] {
+.mantine-Navbar-root[class*="bazarr-"] .mantine-Stack-root[class*="bazarr-"] a[aria-current="page"] {
     background: var(--transparency-dark-15) !important;
     border-left: 2px solid rgb(var(--accent-color));
 }
 
-.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root[class*="bazarr-"] a {
+.mantine-Navbar-root[class*="bazarr-"] .mantine-Stack-root[class*="bazarr-"] a {
     border-left: 2px solid var(--transparency-light-10);
 }
 
-.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root a [class*="bazarr-"]:hover:not(.mantine-Badge-light):not(.mantine-Badge-inner),
-.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root [class*="bazarr-"]:hover:not(.mantine-Badge-light):not(.mantine-Badge-inner) {
+.mantine-Navbar-root[class*="bazarr-"] .mantine-Stack-root a [class*="bazarr-"]:hover:not(.mantine-Badge-light):not(.mantine-Badge-inner),
+.mantine-Navbar-root[class*="bazarr-"] .mantine-Stack-root [class*="bazarr-"]:hover:not(.mantine-Badge-light):not(.mantine-Badge-inner) {
     color: rgb(var(--accent-color));
     background: transparent;
 }