fix(css): file-modifications for backwards compatability with 7.0

Author: Ajit-Mehrotra

api/src/unraid-api/unraid-file-modifier/modifications/__test__/snapshots/default-azure.css.modified.snapshot

@@ -1,5 +1,6 @@
 html{font-family:clear-sans,sans-serif;font-size:62.5%;height:100%}
 body{font-size:1.3rem;color:#606e7f;background-color:#e4e2e4;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+@layer default {
 @scope (:root) to (.unapi) {
 img{border:none;text-decoration:none;vertical-align:middle}
 p{text-align:left}
@@ -274,4 +275,5 @@ a.bannerInfo {cursor:pointer;text-decoration:none}
 ::-webkit-scrollbar-corner{background:lightgray;border-radius:10px}
 ::-webkit-scrollbar-thumb:hover{background:gray}
 
+}
 }

api/src/unraid-api/unraid-file-modifier/modifications/__test__/snapshots/default-black.css.modified.snapshot

@@ -1,5 +1,6 @@
 html{font-family:clear-sans,sans-serif;font-size:62.5%;height:100%}
 body{font-size:1.3rem;color:#f2f2f2;background-color:#1c1b1b;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+@layer default {
 @scope (:root) to (.unapi) {
 img{border:none;text-decoration:none;vertical-align:middle}
 p{text-align:justify}
@@ -262,4 +263,5 @@ a.bannerInfo {cursor:pointer;text-decoration:none}
 ::-webkit-scrollbar-corner{background:gray;border-radius:10px}
 ::-webkit-scrollbar-thumb:hover{background:lightgray}
 
+}
 }

api/src/unraid-api/unraid-file-modifier/modifications/__test__/snapshots/default-gray.css.modified.snapshot

@@ -1,5 +1,6 @@
 html{font-family:clear-sans,sans-serif;font-size:62.5%;height:100%}
 body{font-size:1.3rem;color:#606e7f;background-color:#1b1d1b;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+@layer default {
 @scope (:root) to (.unapi) {
 img{border:none;text-decoration:none;vertical-align:middle}
 p{text-align:left}
@@ -274,4 +275,5 @@ a.bannerInfo {cursor:pointer;text-decoration:none}
 ::-webkit-scrollbar-corner{background:gray;border-radius:10px}
 ::-webkit-scrollbar-thumb:hover{background:lightgray}
 
+}
 }

api/src/unraid-api/unraid-file-modifier/modifications/__test__/snapshots/default-white.css.modified.snapshot

@@ -1,5 +1,6 @@
 html{font-family:clear-sans,sans-serif;font-size:62.5%;height:100%}
 body{font-size:1.3rem;color:#1c1b1b;background-color:#f2f2f2;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+@layer default {
 @scope (:root) to (.unapi) {
 img{border:none;text-decoration:none;vertical-align:middle}
 p{text-align:justify}
@@ -262,4 +263,5 @@ a.bannerInfo {cursor:pointer;text-decoration:none}
 ::-webkit-scrollbar-corner{background:lightgray;border-radius:10px}
 ::-webkit-scrollbar-thumb:hover{background:gray}
 
+}
 }

api/src/unraid-api/unraid-file-modifier/modifications/default-azure-css.modification.ts

@@ -50,6 +50,6 @@ export default class DefaultAzureCssModification extends FileModification {
         const before = source.slice(0, insertIndex);
         const after = source.slice(insertIndex);
 
-        return `${before}\n@scope (:root) to (.unapi) {${after}\n}`;
+        return `${before}\n@layer default {\n@scope (:root) to (.unapi) {${after}\n}\n}`;
     }
 }

api/src/unraid-api/unraid-file-modifier/modifications/default-black-css.modification.ts

@@ -50,6 +50,6 @@ export default class DefaultBlackCssModification extends FileModification {
         const before = source.slice(0, insertIndex);
         const after = source.slice(insertIndex);
 
-        return `${before}\n@scope (:root) to (.unapi) {${after}\n}`;
+        return `${before}\n@layer default {\n@scope (:root) to (.unapi) {${after}\n}\n}`;
     }
 }

api/src/unraid-api/unraid-file-modifier/modifications/default-gray-css.modification.ts

@@ -50,6 +50,6 @@ export default class DefaultGrayCssModification extends FileModification {
         const before = source.slice(0, insertIndex);
         const after = source.slice(insertIndex);
 
-        return `${before}\n@scope (:root) to (.unapi) {${after}\n}`;
+        return `${before}\n@layer default {\n@scope (:root) to (.unapi) {${after}\n}\n}`;
     }
 }

api/src/unraid-api/unraid-file-modifier/modifications/default-white-css.modification.ts

@@ -57,6 +57,6 @@ export default class DefaultWhiteCssModification extends FileModification {
         const before = source.slice(0, insertIndex);
         const after = source.slice(insertIndex);
 
-        return `${before}\n@scope (:root) to (.unapi) {${after}\n}`;
+        return `${before}\n@layer default {\n@scope (:root) to (.unapi) {${after}\n}\n}`;
     }
 }

api/src/unraid-api/unraid-file-modifier/modifications/patches/default-azure-css-modification.patch

@@ -2,21 +2,23 @@ Index: /usr/local/emhttp/plugins/dynamix/styles/default-azure.css
 ===================================================================
 --- /usr/local/emhttp/plugins/dynamix/styles/default-azure.css	original
 +++ /usr/local/emhttp/plugins/dynamix/styles/default-azure.css	modified
-@@ -1,7 +1,8 @@
+@@ -1,7 +1,9 @@
  html{font-family:clear-sans,sans-serif;font-size:62.5%;height:100%}
  body{font-size:1.3rem;color:#606e7f;background-color:#e4e2e4;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
++@layer default {
 +@scope (:root) to (.unapi) {
  img{border:none;text-decoration:none;vertical-align:middle}
  p{text-align:left}
  p.centered{text-align:left}
  p:empty{display:none}
  a:hover{text-decoration:underline}
-@@ -270,5 +271,7 @@
+@@ -270,5 +272,8 @@
  .bannerInfo::before {content:"\f05a";font-family:fontAwesome;color:#e68a00}
  ::-webkit-scrollbar{width:8px;height:8px;background:transparent}
  ::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}
  ::-webkit-scrollbar-corner{background:lightgray;border-radius:10px}
  ::-webkit-scrollbar-thumb:hover{background:gray}
 +
 +}
++}
 \ No newline at end of file

api/src/unraid-api/unraid-file-modifier/modifications/patches/default-black-css-modification.patch

@@ -2,21 +2,23 @@ Index: /usr/local/emhttp/plugins/dynamix/styles/default-black.css
 ===================================================================
 --- /usr/local/emhttp/plugins/dynamix/styles/default-black.css	original
 +++ /usr/local/emhttp/plugins/dynamix/styles/default-black.css	modified
-@@ -1,7 +1,8 @@
+@@ -1,7 +1,9 @@
  html{font-family:clear-sans,sans-serif;font-size:62.5%;height:100%}
  body{font-size:1.3rem;color:#f2f2f2;background-color:#1c1b1b;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
++@layer default {
 +@scope (:root) to (.unapi) {
  img{border:none;text-decoration:none;vertical-align:middle}
  p{text-align:justify}
  p.centered{text-align:left}
  p:empty{display:none}
  a:hover{text-decoration:underline}
-@@ -258,5 +259,7 @@
+@@ -258,5 +260,8 @@
  .bannerInfo::before {content:"\f05a";font-family:fontAwesome;color:#e68a00}
  ::-webkit-scrollbar{width:8px;height:8px;background:transparent}
  ::-webkit-scrollbar-thumb{background:gray;border-radius:10px}
  ::-webkit-scrollbar-corner{background:gray;border-radius:10px}
  ::-webkit-scrollbar-thumb:hover{background:lightgray}
 +
 +}
++}
 \ No newline at end of file