@toheeb/base 1.4.3 → 1.5.1

package/base-settings.js

@@ -158,7 +158,7 @@ class BaseSettings extends HTMLElement {
     `;
 
     document.addEventListener("click", e => {
-      if (e.target.classList.contains("base-settings")) {
+      if (e.target.closest(".base-settings")) {
         this.querySelector("dialog").showModal();
       }
     })
@@ -337,20 +337,25 @@ class BaseSettings extends HTMLElement {
       
       // Color Scheme
       {
-        const color_scheme = document.querySelector("meta[name=color-scheme]")?.content.split(" ");
-        const node_color_scheme = this.querySelector("#base-color-scheme");
-        const has_light = color_scheme.includes("light");
-        const has_dark = color_scheme.includes("dark");
-
-        if (has_light && has_dark) {
-          node_color_scheme.value = "";
-        } else if (has_light) {
-          node_color_scheme.value = "light";
-        } else if (has_dark) {
-          node_color_scheme.value = "dark";
+        const color_scheme = document.querySelector("meta[name=color-scheme]");
+        const label_color_scheme = this.querySelector("#base-color-scheme").closest("label");
+
+        if (color_scheme) {
+          const content = color_scheme.content.split(" ");
+          const node_color_scheme = this.querySelector("#base-color-scheme");
+          const has_light = content.includes("light");
+          const has_dark = content.includes("dark");
+
+          if (has_light && has_dark) {
+            node_color_scheme.value = "";
+            label_color_scheme.hidden = false;
+          } else {
+            label_color_scheme.hidden = true;
+          }
         } else {
-          node_color_scheme.value = "";
+          label_color_scheme.hidden = true;
         }
+
       }
     }
 

package/base.css

@@ -398,8 +398,19 @@ main, td, caption {
 }
 
 
-:where(a[href]:not(:has(p, pre, details, fieldset, table, dl)) + a[href]:not(:has(p, pre, details, fieldset, table, dl))) {
-  margin-inline-start: 1em;
+:where(a[href]:not(:has(p, pre, details, fieldset, table, dl))) {
+  text-decoration: none;
+}
+
+:where(a[href]:not(:has(p, pre, details, fieldset, table, dl))):hover {
+  text-decoration: underline;
+}
+
+:where(a[href]:not(:has(p, pre, details, fieldset, table, dl)))::after {
+  content: "\000bb";
+  vertical-align: top;
+  line-height: 1;
+  padding: 0 .1em;
 }
 
 

package/base.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="./base.css">
-  <meta name="color-scheme" content="darks light">
+  <meta name="color-scheme" content="darks slight">
   <script src="./base-settings.js"></script>
 </head>
 

package/package.json

@@ -1,12 +1,12 @@
-{
-  "name": "@toheeb/base",
-  "version": "1.4.3",
-  "description": "A classless stylesheet for Personalizable Web Design",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": ["css"],
-  "author": "2",
-  "license": "AGPL-3.0-or-later"
-}
+{
+  "name": "@toheeb/base",
+  "version": "1.5.1",
+  "description": "A classless stylesheet for Personalizable Web Design",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["css"],
+  "author": "2",
+  "license": "AGPL-3.0-or-later"
+}