Fix too wide CSS scope bleeding into page style (issue #232, thanks SuperPat45 for report).

Author: hackademix

src/common/themes.css

@@ -7,54 +7,7 @@
 .__NoScript_Theme__ {
   --focus-color-dark:  #8007;
   --focus-color-light: #f787;
-}
-
-.__NoScript_Theme__, .__NoScript_Theme__[data-theme="dark"] {
-  color-scheme: dark;
-  --accent-color: #d12027;
-  --fg-color1: #ccc;
-  --fg-color2: #fff;
-  --text-color: #ddd;
-  --bg-color1: #000;
-  --bg-color2: #212026;
-  --form-color1: #333;
-  --form-color2: #111;
-  --focus-color: var(--focus-color-dark);
-  --tab-color1: #6668;
-  --tab-color2: #3348;
-  --form-check-color: var(--accent-color);
-  --form-control-color: var(--form-color2);
-  --hilite-color: #f008;
-}
-
-.__NoScript_Theme__.vintage:not([data-theme="light"]) :is(input.preset, .icon) {
-  filter: brightness(85%);
-}
-
-
-@media (prefers-color-scheme: light) {
-  .__NoScript_Theme__ {
-    color-scheme: light;
-    --fg-color1: #555;
-    --fg-color2: #000;
-    --text-color: #333;
-    --bg-color1: #ddd;
-    --bg-color2: #fff;
-    --form-color1: #ccc;
-    --form-color2: #eee;
-    --tab-color1: #ddda;
-    --tab-color2: #8888;
-    --focus-color: var(--focus-color-light);
-  }
 
-  .__NoScript_Theme__.vintage[data-theme="dark"] :is(input.preset, .icon) {
-    filter: brightness(85%);
-  }
-
-}
-
-
-:root {
   --img-noscript-options: url(/img/noscript-options.png);
   --img-ui-revoke-temp: url(/img/ui-revoke-temp64.png);
   --img-ui-temp-all: url(/img/ui-temp-all64.png);
@@ -84,10 +37,15 @@
   --bg-focused-row: linear-gradient(to bottom, var(--form-color1) 0, var(--form-color2) 70%, var(--bg-color1) 100%) no-repeat;
   --bg-odd-row: var(--bg-color2);
   --bg-even-row: var(--form-color1);
-  --border-row-sep: none; /* 2px dotted var(--form-color2); */
+  --border-row-sep: none;
 }
 
-.vintage {
+
+.__NoScript_Theme__.vintage {
+
+  --focus-color-light: #8cf8 !important;
+  --focus-color-dark: #0468 !important;
+
   --img-noscript-options: url(/img/vintage/noscript-options.png);
   --img-ui-revoke-temp: url(/img/vintage/ui-revoke-temp64.png);
   --img-ui-temp-all: url(/img/vintage/ui-temp-all64.png);
@@ -114,12 +72,57 @@
   --line-size: 1.5em;
   --popup-size: 600px;
 
-  --focus-color-light: #8cf8 !important;
-  --focus-color-dark: #0468 !important;
-
   --bg-focused-row: var(--focus-color);
   --bg-odd-row: var(--bg-color2);
   --bg-even-row: var(--bg-color1);
   --border-row-sep: none;
 }
 
+
+.__NoScript_Theme__, .__NoScript_Theme__[data-theme="dark"] {
+  color-scheme: dark;
+  --accent-color: #d12027;
+  --fg-color1: #ccc;
+  --fg-color2: #fff;
+  --text-color: #ddd;
+  --bg-color1: #000;
+  --bg-color2: #212026;
+  --form-color1: #333;
+  --form-color2: #111;
+  --focus-color: var(--focus-color-dark);
+  --tab-color1: #6668;
+  --tab-color2: #3348;
+  --form-check-color: var(--accent-color);
+  --form-control-color: var(--form-color2);
+  --hilite-color: #f008;
+}
+
+.__NoScript_Theme__.vintage:not([data-theme="light"]) :is(input.preset, .icon) {
+  filter: brightness(85%);
+}
+
+
+@media (prefers-color-scheme: light) {
+  .__NoScript_Theme__ {
+    color-scheme: light;
+    --fg-color1: #555;
+    --fg-color2: #000;
+    --text-color: #333;
+    --bg-color1: #ddd;
+    --bg-color2: #fff;
+    --form-color1: #ccc;
+    --form-color2: #eee;
+    --tab-color1: #ddda;
+    --tab-color2: #8888;
+    --focus-color: var(--focus-color-light);
+  }
+
+  .__NoScript_Theme__.vintage[data-theme="dark"] :is(input.preset, .icon) {
+    filter: brightness(85%);
+  }
+
+}
+
+
+
+