x3d-tidy 2.2.13 → 2.2.15

package/package.json

@@ -1,65 +1,69 @@
 {
-   "name": "x3d-tidy",
-   "version": "2.2.13",
-   "description": "X3D Converter, Beautifier and Minimizer",
-   "main": "src/main.js",
-   "bin": {
-      "x3d-tidy": "bin/x3d-tidy.js"
-   },
-   "files": [
-      "bin/*",
-      "src/*"
-   ],
-   "scripts": {
-      "start": "node bin/x3d-tidy.js",
-      "test": "node build/test.js",
-      "release": "node build/release.js"
-   },
-   "repository": {
-      "type": "git",
-      "url": "git+https://github.com/create3000/x3d-tidy.git"
-   },
-   "keywords": [
-      "beautifier",
-      "Compressor",
-      "converter",
-      "GLB",
-      "glTF2",
-      "JSON",
-      "Minimizer",
-      "npx",
-      "PLY",
-      "STL",
-      "SVG",
-      "tidy",
-      "VRML",
-      "Wavefront-OBJ",
-      "wrl",
-      "x_ite",
-      "X3D",
-      "XML"
-   ],
-   "author": "Holger Seelig",
-   "license": "MIT",
-   "bugs": {
-      "url": "https://github.com/create3000/x3d-tidy/issues"
-   },
-   "homepage": "https://www.npmjs.com/package/x3d-tidy",
-   "contributors": [
-      {
-         "name": "Holger Seelig",
-         "email": "holger.seelig@gmail.com",
-         "url": "https://github.com/create3000"
-      }
-   ],
-   "dependencies": {
-      "colors": "^1.4.0",
-      "x_ite": "^12.1.8",
-      "x_ite-node": "^1.1.12",
-      "x3d-traverse": "^1.0.22",
-      "yargs": "^18.0.0"
-   },
-   "devDependencies": {
-      "shell-tools": "^1.1.9"
-   }
+  "name": "x3d-tidy",
+  "version": "2.2.15",
+  "description": "X3D Converter, Beautifier and Minimizer",
+  "main": "src/main.js",
+  "bin": {
+    "x3d-tidy": "bin/x3d-tidy.js"
+  },
+  "files": [
+    "bin/*",
+    "src/*"
+  ],
+  "scripts": {
+    "start": "node bin/x3d-tidy.js",
+    "test": "node build/test.js",
+    "release": "node build/release.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/create3000/x3d-tidy.git"
+  },
+  "keywords": [
+    "beautifier",
+    "Compressor",
+    "converter",
+    "GLB",
+    "glTF2",
+    "JSON",
+    "Minimizer",
+    "npx",
+    "PLY",
+    "STL",
+    "SVG",
+    "tidy",
+    "VRML",
+    "Wavefront-OBJ",
+    "wrl",
+    "x_ite",
+    "X3D",
+    "XML"
+  ],
+  "author": "Holger Seelig",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/create3000/x3d-tidy/issues"
+  },
+  "homepage": "https://www.npmjs.com/package/x3d-tidy",
+  "contributors": [
+    {
+      "name": "Holger Seelig",
+      "email": "holger.seelig@gmail.com",
+      "url": "https://github.com/create3000"
+    }
+  ],
+  "funding": {
+    "type": "patreon",
+    "url": "https://patreon.com/X_ITE"
+  },
+  "dependencies": {
+    "colors": "^1.4.0",
+    "x_ite": "^12.1.9",
+    "x_ite-node": "^1.1.14",
+    "x3d-traverse": "^1.0.22",
+    "yargs": "^18.0.0"
+  },
+  "devDependencies": {
+    "shell-tools": "^1.1.9"
+  }
 }

package/src/main.js

@@ -261,16 +261,38 @@ function getHTML (scene)
     <meta charset="utf-8">
     <script defer src="https://cdn.jsdelivr.net/npm/x_ite@latest/dist/x_ite.min.js"></script>
     <style>
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400&family=Source+Sans+3:ital,wght@0,400&display=swap");
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --text-color: rgb(42, 42, 42);
+    --background-color: white;
+    --link-color: rgb(0, 86, 178);
+    --link-hover-color: rgb(210, 96, 58);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-color: rgb(175, 176, 177);
+    --background-color: rgb(27, 27, 30);
+    --link-color: rgb(82, 108, 150);
+    --link-hover-color: rgb(210, 96, 58);
+  }
+}
+
 body {
   color-scheme: light dark;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   margin: 0px;
   padding: 0px;
   height: 100vh;
-  background-color: light-dark(white, rgb(27, 27, 30));
-  color: light-dark(rgb(42, 42, 42), rgb(175, 176, 177));
-  font-family: sans-serif;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-family: "Source Sans 3", sans-serif;
+  font-size: 1.08rem;
 }
 
 body > * {
@@ -278,21 +300,26 @@ body > * {
   padding: 0px 1rem;
 }
 
+h1 {
+   font-family: Lato, sans-serif;
+}
+
 x3d-canvas {
   flex: 1 1 auto;
-  border-top: 2px solid light-dark(rgb(42, 42, 42), rgb(175, 176, 177));
-  border-bottom: 2px solid light-dark(rgb(42, 42, 42), rgb(175, 176, 177));
+  box-sizing: border-box;
+  border-top: 1px solid color-mix(in srgb, var(--text-color), transparent 90%);
+  border-bottom: 1px solid color-mix(in srgb, var(--text-color), transparent 90%);
   padding: 0px;
   width: 100%;
   height: 100%;
 }
 
 a {
-  color: light-dark(rgb(0, 86, 178), rgb(82, 108, 150));
+  color: var(--link-color);
 }
 
 a:hover {
-  color: light-dark(rgb(210, 96, 58), rgb(210, 96, 58))
+  color: var(--link-hover-color);
 }
     </style>
   </head>
@@ -301,7 +328,7 @@ a:hover {
     <x3d-canvas>
 ${scene .toXMLString ({ html: true, indent: " " .repeat (6) }) .trimEnd ()}
     </x3d-canvas>
-    <p>Made with <a href="https://www.npmjs.com/package/x3d-tidy" target="_blank">x3d-tidy.</a></p>
+    <p>Made with <a href="https://www.npmjs.com/package/x3d-tidy" target="_blank">x3d-tidy</a>. If local files are not loaded <a href="https://create3000.github.io/x_ite/setup-a-localhost-server">consider setup a localhost server</a> or use <a href="https://create3000.github.io/x_ite/dom-integration">DOM integration methods</a>.</p>
   </body>
 </html>`;
 }