diff --git a/package-lock.json b/package-lock.json index 4fa42b16..3036667f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,9 @@ "license": "MIT", "dependencies": { "rdflib": "^2.3.3", - "solid-logic": "^4.0.0", - "solid-panes": "^4.0.0", - "solid-ui": "^3.0.0" + "solid-logic": "^4.0.1", + "solid-panes": "4.0.0-newStyle-525515fb", + "solid-ui": "^3.0.1" }, "devDependencies": { "@babel/cli": "^7.28.0", @@ -1743,6 +1743,19 @@ "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, + "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/@eslint-community/regexpp": { "version": "4.12.2", "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz", @@ -1873,16 +1886,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@eslint/eslintrc/node_modules/ignore": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", - "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 4" - } - }, "node_modules/@eslint/eslintrc/node_modules/import-fresh": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", @@ -2330,6 +2333,44 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/@rdfjs/types": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@rdfjs/types/-/types-2.0.1.tgz", @@ -2480,9 +2521,9 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "24.10.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.0.tgz", - "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==", + "version": "24.10.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", + "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "license": "MIT", "dependencies": { "undici-types": "~7.16.0" @@ -2589,16 +2630,16 @@ } }, "node_modules/@typescript-eslint/parser": { - "version": "8.48.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.48.1.tgz", - "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==", + "version": "8.47.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.47.0.tgz", + "integrity": "sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/scope-manager": "8.48.1", - "@typescript-eslint/types": "8.48.1", - "@typescript-eslint/typescript-estree": "8.48.1", - "@typescript-eslint/visitor-keys": "8.48.1", + "@typescript-eslint/scope-manager": "8.47.0", + "@typescript-eslint/types": "8.47.0", + "@typescript-eslint/typescript-estree": "8.47.0", + "@typescript-eslint/visitor-keys": "8.47.0", "debug": "^4.3.4" }, "engines": { @@ -2614,14 +2655,14 @@ } }, "node_modules/@typescript-eslint/project-service": { - "version": "8.48.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.48.1.tgz", - "integrity": "sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==", + "version": "8.47.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.47.0.tgz", + "integrity": "sha512-2X4BX8hUeB5JcA1TQJ7GjcgulXQ+5UkNb0DL8gHsHUHdFoiCTJoYLTpib3LtSDPZsRET5ygN4qqIWrHyYIKERA==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/tsconfig-utils": "^8.48.1", - "@typescript-eslint/types": "^8.48.1", + "@typescript-eslint/tsconfig-utils": "^8.47.0", + "@typescript-eslint/types": "^8.47.0", "debug": "^4.3.4" }, "engines": { @@ -2636,14 +2677,14 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "8.48.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.48.1.tgz", - "integrity": "sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==", + "version": "8.47.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.47.0.tgz", + "integrity": "sha512-a0TTJk4HXMkfpFkL9/WaGTNuv7JWfFTQFJd6zS9dVAjKsojmv9HT55xzbEpnZoY+VUb+YXLMp+ihMLz/UlZfDg==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/types": "8.48.1", - "@typescript-eslint/visitor-keys": "8.48.1" + "@typescript-eslint/types": "8.47.0", + "@typescript-eslint/visitor-keys": "8.47.0" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -2654,9 +2695,9 @@ } }, "node_modules/@typescript-eslint/tsconfig-utils": { - "version": "8.48.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.48.1.tgz", - "integrity": "sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==", + "version": "8.47.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.47.0.tgz", + "integrity": "sha512-ybUAvjy4ZCL11uryalkKxuT3w3sXJAuWhOoGS3T/Wu+iUu1tGJmk5ytSY8gbdACNARmcYEB0COksD2j6hfGK2g==", "dev": true, "license": "MIT", "engines": { @@ -2671,9 +2712,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "8.48.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.48.1.tgz", - "integrity": "sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==", + "version": "8.47.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.47.0.tgz", + "integrity": "sha512-nHAE6bMKsizhA2uuYZbEbmp5z2UpffNrPEqiKIeN7VsV6UY/roxanWfoRrf6x/k9+Obf+GQdkm0nPU+vnMXo9A==", "dev": true, "license": "MIT", "engines": { @@ -2685,20 +2726,21 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "8.48.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.48.1.tgz", - "integrity": "sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==", + "version": "8.47.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.47.0.tgz", + "integrity": "sha512-k6ti9UepJf5NpzCjH31hQNLHQWupTRPhZ+KFF8WtTuTpy7uHPfeg2NM7cP27aCGajoEplxJDFVCEm9TGPYyiVg==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/project-service": "8.48.1", - "@typescript-eslint/tsconfig-utils": "8.48.1", - "@typescript-eslint/types": "8.48.1", - "@typescript-eslint/visitor-keys": "8.48.1", + "@typescript-eslint/project-service": "8.47.0", + "@typescript-eslint/tsconfig-utils": "8.47.0", + "@typescript-eslint/types": "8.47.0", + "@typescript-eslint/visitor-keys": "8.47.0", "debug": "^4.3.4", + "fast-glob": "^3.3.2", + "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", - "tinyglobby": "^0.2.15", "ts-api-utils": "^2.1.0" }, "engines": { @@ -2726,13 +2768,13 @@ } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "8.48.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.48.1.tgz", - "integrity": "sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==", + "version": "8.47.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.47.0.tgz", + "integrity": "sha512-SIV3/6eftCy1bNzCQoPmbWsRLujS8t5iDIZ4spZOBHqrM+yfX2ogg8Tt3PDTAVKw3sSCiUgg30uOAvK2r9zGjQ==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/types": "8.48.1", + "@typescript-eslint/types": "8.47.0", "eslint-visitor-keys": "^4.2.1" }, "engines": { @@ -2743,19 +2785,6 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz", - "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, "node_modules/@webassemblyjs/ast": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz", @@ -3373,9 +3402,9 @@ "license": "MIT" }, "node_modules/baseline-browser-mapping": { - "version": "2.8.25", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.25.tgz", - "integrity": "sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA==", + "version": "2.8.30", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.30.tgz", + "integrity": "sha512-aTUKW4ptQhS64+v2d6IkPzymEzzhw+G0bA1g3uBRV3+ntkH+svttKseW5IOR4Ed6NUVKqnY7qT3dKvzQ7io4AA==", "dev": true, "license": "Apache-2.0", "bin": { @@ -3420,24 +3449,24 @@ "license": "MIT" }, "node_modules/body-parser": { - "version": "1.20.3", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", - "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", + "version": "1.20.4", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz", + "integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==", "dev": true, "license": "MIT", "dependencies": { - "bytes": "3.1.2", + "bytes": "~3.1.2", "content-type": "~1.0.5", "debug": "2.6.9", "depd": "2.0.0", - "destroy": "1.2.0", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "on-finished": "2.4.1", - "qs": "6.13.0", - "raw-body": "2.5.2", + "destroy": "~1.2.0", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "on-finished": "~2.4.1", + "qs": "~6.14.0", + "raw-body": "~2.5.3", "type-is": "~1.6.18", - "unpipe": "1.0.0" + "unpipe": "~1.0.0" }, "engines": { "node": ">= 0.8", @@ -3454,6 +3483,27 @@ "ms": "2.0.0" } }, + "node_modules/body-parser/node_modules/http-errors": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", + "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "depd": "~2.0.0", + "inherits": "~2.0.4", + "setprototypeof": "~1.2.0", + "statuses": "~2.0.2", + "toidentifier": "~1.0.1" + }, + "engines": { + "node": ">= 0.8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/body-parser/node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -3461,20 +3511,14 @@ "dev": true, "license": "MIT" }, - "node_modules/body-parser/node_modules/qs": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", - "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", + "node_modules/body-parser/node_modules/statuses": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", + "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==", "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "side-channel": "^1.0.6" - }, + "license": "MIT", "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "node": ">= 0.8" } }, "node_modules/bonjour-service": { @@ -3669,9 +3713,9 @@ } }, "node_modules/browserslist": { - "version": "4.27.0", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.27.0.tgz", - "integrity": "sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==", + "version": "4.28.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz", + "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==", "dev": true, "funding": [ { @@ -3689,10 +3733,10 @@ ], "license": "MIT", "dependencies": { - "baseline-browser-mapping": "^2.8.19", - "caniuse-lite": "^1.0.30001751", - "electron-to-chromium": "^1.5.238", - "node-releases": "^2.0.26", + "baseline-browser-mapping": "^2.8.25", + "caniuse-lite": "^1.0.30001754", + "electron-to-chromium": "^1.5.249", + "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { @@ -3948,9 +3992,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001754", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz", - "integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==", + "version": "1.0.30001756", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001756.tgz", + "integrity": "sha512-4HnCNKbMLkLdhJz3TToeVWHSnfJvPaq6vu/eRP0Ahub/07n484XHhBF5AJoSGHdVrS8tKFauUQz8Bp9P7LVx7A==", "dev": true, "funding": [ { @@ -4314,9 +4358,9 @@ } }, "node_modules/core-js": { - "version": "3.46.0", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.46.0.tgz", - "integrity": "sha512-vDMm9B0xnqqZ8uSBpZ8sNtRtOdmfShrvT6h2TuQGLs0Is+cR0DYbj/KWP6ALVNbWPpqA/qPLoOuppJN07humpA==", + "version": "3.47.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.47.0.tgz", + "integrity": "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==", "hasInstallScript": true, "license": "MIT", "funding": { @@ -4325,13 +4369,13 @@ } }, "node_modules/core-js-compat": { - "version": "3.46.0", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.46.0.tgz", - "integrity": "sha512-p9hObIIEENxSV8xIu+V68JjSeARg6UVMG5mR+JEUguG3sI6MsiS1njz2jHmyJDvA+8jX/sytkBHup6kxhM9law==", + "version": "3.47.0", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.47.0.tgz", + "integrity": "sha512-IGfuznZ/n7Kp9+nypamBhvwdwLsW6KC8IOaURw2doAK5e98AG3acVLdh0woOnEqCfUtS+Vu882JE4k/DAm3ItQ==", "dev": true, "license": "MIT", "dependencies": { - "browserslist": "^4.26.3" + "browserslist": "^4.28.0" }, "funding": { "type": "opencollective", @@ -4626,9 +4670,9 @@ "license": "MIT" }, "node_modules/default-browser": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.2.1.tgz", - "integrity": "sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.4.0.tgz", + "integrity": "sha512-XDuvSq38Hr1MdN47EDvYtx3U0MTqpCEn+F6ft8z2vYDzMrvQhVp0ui9oQdqW3MvK3vqUETglt1tVGgjLuJ5izg==", "dev": true, "license": "MIT", "dependencies": { @@ -4643,9 +4687,9 @@ } }, "node_modules/default-browser-id": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.0.tgz", - "integrity": "sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz", + "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==", "dev": true, "license": "MIT", "engines": { @@ -4913,9 +4957,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.248", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.248.tgz", - "integrity": "sha512-zsur2yunphlyAO4gIubdJEXCK6KOVvtpiuDfCIqbM9FjcnMYiyn0ICa3hWfPr0nc41zcLWobgy1iL7VvoOyA2Q==", + "version": "1.5.259", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.259.tgz", + "integrity": "sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==", "dev": true, "license": "ISC" }, @@ -5162,13 +5206,13 @@ } }, "node_modules/eslint-visitor-keys": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", - "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz", + "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==", "dev": true, "license": "Apache-2.0", "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "url": "https://opencollective.com/eslint" @@ -5185,19 +5229,6 @@ "concat-map": "0.0.1" } }, - "node_modules/eslint/node_modules/eslint-visitor-keys": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz", - "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, "node_modules/eslint/node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", @@ -5211,16 +5242,6 @@ "node": ">=10.13.0" } }, - "node_modules/eslint/node_modules/ignore": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", - "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 4" - } - }, "node_modules/eslint/node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -5252,19 +5273,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/espree/node_modules/eslint-visitor-keys": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz", - "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, "node_modules/esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -5344,13 +5352,6 @@ "node": ">=6" } }, - "node_modules/eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", - "dev": true, - "license": "MIT" - }, "node_modules/events": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", @@ -5442,6 +5443,23 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-glob": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.8" + }, + "engines": { + "node": ">=8.6.0" + } + }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -5483,6 +5501,16 @@ "node": ">= 4.9.1" } }, + "node_modules/fastq": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz", + "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==", + "dev": true, + "license": "ISC", + "dependencies": { + "reusify": "^1.0.4" + } + }, "node_modules/faye-websocket": { "version": "0.11.4", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz", @@ -6312,6 +6340,13 @@ } } }, + "node_modules/http-proxy/node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", + "dev": true, + "license": "MIT" + }, "node_modules/https-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", @@ -6381,6 +6416,16 @@ ], "license": "BSD-3-Clause" }, + "node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, "node_modules/import-fresh": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz", @@ -7255,9 +7300,9 @@ } }, "node_modules/lit-html": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.1.tgz", - "integrity": "sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.2.tgz", + "integrity": "sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw==", "license": "BSD-3-Clause", "dependencies": { "@types/trusted-types": "^2.0.2" @@ -7441,9 +7486,9 @@ } }, "node_modules/memfs": { - "version": "4.50.0", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.50.0.tgz", - "integrity": "sha512-N0LUYQMUA1yS5tJKmMtU9yprPm6ZIg24yr/OVv/7t6q0kKDIho4cBbXRi1XKttUmNYDYgF/q45qrKE/UhGO0CA==", + "version": "4.51.0", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.51.0.tgz", + "integrity": "sha512-4zngfkVM/GpIhC8YazOsM6E8hoB33NP0BCESPOA6z7qaL6umPJNqkO8CNYaLV2FB2MV6H1O3x2luHHOSqppv+A==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7476,6 +7521,16 @@ "dev": true, "license": "MIT" }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, "node_modules/methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", @@ -7769,9 +7824,9 @@ } }, "node_modules/node-forge": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.2.tgz", - "integrity": "sha512-6xKiQ+cph9KImrRh0VsjH2d8/GXA4FIMlgU4B757iI1ApvcyA9VlouP0yZJha01V+huImO+kKMU7ih+2+E14fw==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.3.tgz", + "integrity": "sha512-rLvcdSyRCyouf6jcOIPe/BgwG/d7hKjzMKOas33/pHEr6gbq18IK9zV7DiPvzsz0oBJPme6qr6H6kGZuI9/DZg==", "dev": true, "license": "(BSD-3-Clause OR GPL-2.0)", "engines": { @@ -8511,20 +8566,20 @@ "license": "MIT" }, "node_modules/profile-pane": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/profile-pane/-/profile-pane-2.0.0.tgz", - "integrity": "sha512-YOaG9Ep9IM05HjognsPenfPzjvgqnftQyieUY46ASxpp84VvPx8sPC8w4+jvms6gqtyRkf5+LRn/u32Fkvb1VQ==", + "version": "2.0.0-newStyle-e00e593f", + "resolved": "https://registry.npmjs.org/profile-pane/-/profile-pane-2.0.0-newStyle-e00e593f.tgz", + "integrity": "sha512-iUUw9PPeP59h8E5gA/P8JmMsNog/zivrnTrd2j+kEGGLZtRZBT2AIp6k+zsxmMXNRQ7oOXCHSIOXuCHo60XYDg==", "license": "MIT", "dependencies": { - "lit-html": "^3.2.1", + "lit-html": "^3.3.2", "pane-registry": "^3.0.0", "qrcode": "^1.5.4", "validate-color": "^2.2.4" }, "peerDependencies": { "rdflib": "^2.3.0", - "solid-logic": "^4.0.0", - "solid-ui": "^3.0.0" + "solid-logic": "^4.0.1", + "solid-ui": "^3.0.1" } }, "node_modules/prop-types": { @@ -8633,6 +8688,27 @@ "node": ">=0.4.x" } }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -8664,17 +8740,48 @@ } }, "node_modules/raw-body": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", - "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz", + "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==", "dev": true, "license": "MIT", "dependencies": { - "bytes": "3.1.2", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" + "bytes": "~3.1.2", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/raw-body/node_modules/http-errors": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", + "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "depd": "~2.0.0", + "inherits": "~2.0.4", + "setprototypeof": "~1.2.0", + "statuses": "~2.0.2", + "toidentifier": "~1.0.1" }, + "engines": { + "node": ">= 0.8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/raw-body/node_modules/statuses": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", + "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==", + "dev": true, + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -8692,9 +8799,9 @@ } }, "node_modules/rdflib": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/rdflib/-/rdflib-2.3.3.tgz", - "integrity": "sha512-bd/Wl+yVvw8vMpdfRUgVuCMS5d6imEJFAHqbVFn5m9ekcrl6vuYwVP+qa9yiTzPIkbdwoWE4wWb8DXa7smQEQQ==", + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/rdflib/-/rdflib-2.3.5.tgz", + "integrity": "sha512-dXW3GbHSKx3vctY3YUm7O/EVj4pNVueUgrm3GBsWjwrRkkFBu2+9Sd5zjhi/skbzhpQ9d45rO/2HGD8zi0oubw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.4", @@ -8708,9 +8815,9 @@ } }, "node_modules/react": { - "version": "19.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", - "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", + "version": "19.2.1", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz", + "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==", "license": "MIT", "engines": { "node": ">=0.10.0" @@ -8723,15 +8830,15 @@ "license": "MIT" }, "node_modules/react-dom": { - "version": "19.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", - "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", + "version": "19.2.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz", + "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==", "license": "MIT", "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^19.2.0" + "react": "^19.2.1" } }, "node_modules/react-is": { @@ -8981,6 +9088,17 @@ "node": ">= 4" } }, + "node_modules/reusify": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz", + "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==", + "dev": true, + "license": "MIT", + "engines": { + "iojs": ">=1.0.0", + "node": ">=0.10.0" + } + }, "node_modules/ripemd160": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.3.tgz", @@ -9071,6 +9189,30 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "queue-microtask": "^1.2.2" + } + }, "node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -9638,9 +9780,9 @@ "license": "MIT" }, "node_modules/solid-panes": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/solid-panes/-/solid-panes-4.0.0.tgz", - "integrity": "sha512-d05ajtDH1/2MeXK/A2eVdpGoyPNhjBGmYkWTXzgYKbTjFD188DMyt+vdasiiJ97mRC8s8pc4MhRPFOM9zFxJuw==", + "version": "4.0.0-newStyle-525515fb", + "resolved": "https://registry.npmjs.org/solid-panes/-/solid-panes-4.0.0-newStyle-525515fb.tgz", + "integrity": "sha512-UQyhFO1kE8YHa9g0jx+672R5zcmwQvCFOaquPwjDPBA+gdVMhm2tp1Wb6RmpQtg2yX/nmv5P5a3s7pzpJ74fRQ==", "license": "MIT", "dependencies": { "@solid/better-simple-slideshow": "^0.1.0", @@ -9654,7 +9796,7 @@ "meeting-pane": "^3.0.0", "mime-types": "^3.0.1", "pane-registry": "^3.0.0", - "profile-pane": "^2.0.0", + "profile-pane": "^2.0.0-newStyle-e00e593f", "solid-namespace": "^0.5.4", "source-pane": "^3.0.0" } @@ -10250,9 +10392,9 @@ } }, "node_modules/undici": { - "version": "6.22.0", - "resolved": "https://registry.npmjs.org/undici/-/undici-6.22.0.tgz", - "integrity": "sha512-hU/10obOIu62MGYjdskASR3CUAiYaFTtC9Pa6vHyf//mAipSvSQg6od2CnJswq7fvzNS3zJhxoRkgNVaHurWKw==", + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/undici/-/undici-6.23.0.tgz", + "integrity": "sha512-VfQPToRA5FZs/qJxLIinmU59u0r7LXqoJkCzinq3ckNJp3vKEh7jTWN589YQ5+aoAC/TGRLyJLCPKcLQbM8r9g==", "license": "MIT", "engines": { "node": ">=18.17" diff --git a/package.json b/package.json index 270b21d8..d16fc233 100644 --- a/package.json +++ b/package.json @@ -50,9 +50,16 @@ "homepage": "https://github.com/solidos/mashlib", "dependencies": { "rdflib": "^2.3.3", - "solid-logic": "^4.0.0", - "solid-panes": "^4.0.0", - "solid-ui": "^3.0.0" + "solid-logic": "^4.0.1", + "solid-panes": "4.0.0-newStyle-525515fb", + "solid-ui": "^3.0.1" + }, + "overrides": { + "rdflib": "^2.3.3", + "solid-logic": "^4.0.1", + "solid-panes": "4.0.0-newStyle-525515fb", + "solid-ui": "^3.0.1", + "profile-pane": "2.0.0-newStyle-e00e593f" }, "devDependencies": { "@babel/cli": "^7.28.0", diff --git a/src/databrowser.html b/src/databrowser.html index fcd8a6cf..97416471 100644 --- a/src/databrowser.html +++ b/src/databrowser.html @@ -9,13 +9,26 @@ }) - + + - -
-
-
-
- + +
+
+ + + + + + + + + + +
+
+
+
+ diff --git a/src/index.ts b/src/index.ts index d0d11afe..320cdee7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,11 +2,39 @@ import * as $rdf from 'rdflib' import * as panes from 'solid-panes' import { authn, solidLogicSingleton, authSession, store } from 'solid-logic' import versionInfo from './versionInfo' -import { mashStyle } from './styles/mashlib-style' import './styles/mash.css' const global: any = window +// Theme Management +const initializeTheme = () => { + const savedTheme = localStorage.getItem('mashlib-theme') + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches + const theme = savedTheme || (prefersDark ? 'dark' : 'light') + + if (theme === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark') + } else { + document.documentElement.removeAttribute('data-theme') + } +} + +const setTheme = (theme: 'light' | 'dark') => { + if (theme === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark') + } else { + document.documentElement.removeAttribute('data-theme') + } + localStorage.setItem('mashlib-theme', theme) +} + +const getTheme = (): 'light' | 'dark' => { + return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' +} + +// Initialize theme on load +initializeTheme() + global.$rdf = $rdf global.panes = panes global.SolidLogic = { @@ -16,15 +44,15 @@ global.SolidLogic = { solidLogicSingleton } global.mashlib = { - versionInfo + versionInfo, + theme: { + set: setTheme, + get: getTheme, + init: initializeTheme + } } global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) { - document.getElementById('PageBody')?.setAttribute('style', mashStyle.dbLayout) - document.getElementById('PageHeader')?.setAttribute('style', mashStyle.dbLayoutHeader) - document.getElementById('PageFooter')?.setAttribute('style', mashStyle.dbLayoutFooter) - document.getElementById('DummyUUID')?.setAttribute('style', mashStyle.dbLayoutContent) - // Set up cross-site proxy const fetcher: any = $rdf.Fetcher fetcher.crossSiteProxyTemplate = window.origin + '/xss/?uri={uri}' diff --git a/src/styles/mash.css b/src/styles/mash.css index 5d1d971c..e7afb218 100644 --- a/src/styles/mash.css +++ b/src/styles/mash.css @@ -1,25 +1,52 @@ -/* Some common style for the Solid Data Browser -** -** -** Do NOT use physical measures, but font-relative measures. -** 2006-10-21 timbl converted px to em at approx 1em = 12px +/* +** ------SolidOS Styles------ ** */ - -/* If you need style in a pane, insert it in the dom (2016)*/ +@import url("./themes.css"); /* I couldn't find the code for the collapse image. this is a quick work around to make the collapsing easier to use ( the triangles dont jump 20 pixels). ~cm2 */ -img[title="Hide details."]{ float:left } +img[title="Hide details."] { + float: left; +} -html { height: 100%; line-height:1.15 } -body { height: 100%; background-color: white ; font-family: sans-serif } /* was: font-size: 80%; */ +html { + height: 100%; + line-height: 1.15; +} +body { + height: 100%; + background-color: var(--color-background); + color: var(--color-text); + font-family: var(--font-family-base); +} + +/* Main page elements in databrowser.html */ +#PageBody { + display: flex; + flex-direction: column; +} +#DummyUUID { + flex: 1 0 auto; +} +#PageHeader { + flex-shrink: 0; +} +#PageFooter { + flex-shrink: 0; +} -.warning { color: red; } -.selected { background-color: #8F3 } +.warning { + color: var(--color-warning); +} +.selected { + background-color: var(--color-selected-bg); +} -.licOkay { background-color: #dfd } +.licOkay { + background-color: var(--color-success-bg); +} /* ** other potential colors for CC: @@ -28,24 +55,50 @@ body { height: 100%; background-color: white ; font-family: sans-serif } /* was ** #ccff99, mit page color */ -strong { font-size: 120%; color: #333; font-weight: bold; } -div.Outliner { margin-top: 2em; padding: 0.8em; } -form#TabulateForm { padding: 0.8em } -div#addViewForm { padding: 0.8em } -iframe { background: white } +strong { + font-size: 120%; + color: var(--color-text); + font-weight: bold; +} +div.Outliner { + margin-top: 2em; + padding: 0.8em; +} +form#TabulateForm { + padding: 0.8em; +} +div#addViewForm { + padding: 0.8em; +} +iframe { + background: var(--color-iframe-bg); +} /* Map */ -img.pic { max-height: 20em } +img.pic { + max-height: 20em; +} /* Sources */ -.fetched { background-color: #eeffee } -.requested { background-color: yellow } -.failed { color: red; background-color: white } -.unparseable { background-color: #ffcc00; } +.fetched { + background-color: var(--color-fetch-bg); +} +.requested { + background-color: var(--color-request-bg); +} +.failed { + color: var(--color-warning); + background-color: var(--color-error-bg); +} +.unparseable { + background-color: var(--color-unparseable-bg); +} -pre#status { font-size: 100% } +pre#status { + font-size: 100%; +} /* Panes */ /* @@ -62,13 +115,13 @@ div.instancePane { /* ***************** For the Justification UI Panes **********/ div.container { -border-top: solid 5px black; -border-left: solid 5px black; -border-bottom: solid 5px black; -border-right: solid 5px black; -margin-top: 0.5em; -margin-bottom: 0.5em; -border-radius: 0.75em; + border-top: solid 5px var(--color-container-border); + border-left: solid 5px var(--color-container-border); + border-bottom: solid 5px var(--color-container-border); + border-right: solid 5px var(--color-container-border); + margin-top: 0.5em; + margin-bottom: 0.5em; + border-radius: 0.75em; } /* div.nonCompliantPane { @@ -94,136 +147,209 @@ div.compliantPane { } */ div.justification { -font-size: 100%; -padding: 0 5px; -width: 80%; /* @@ Don't use pixels -- use em */ -background-color: white; -margin-top: 0.5em; margin-bottom: 0.5em; + font-size: 100%; + padding: 0 5px; + width: 80%; /* @@ Don't use pixels -- use em */ + background-color: var(--color-background); + margin-top: 0.5em; + margin-bottom: 0.5em; } - div.description { -font-size: 120%; -border-top: solid 1px yellow; -border-left: solid 1px yellow; -border-bottom: solid 1px yellow; -border-right: solid 1px yellow; -padding: 15px; -width: 100%; -background-color: #ffffdd; -margin-top: 0.5em; -margin-bottom: 0.5em; -margin-left: 0.5em; -margin-right: 0.5em; -border-radius: 0.75em; -position:relative; -left:0% + font-size: 120%; + border-top: solid 1px var(--color-alert-border); + border-left: solid 1px var(--color-alert-border); + border-bottom: solid 1px var(--color-alert-border); + border-right: solid 1px var(--color-alert-border); + padding: 15px; + width: 100%; + background-color: var(--color-alert-bg); + margin-top: 0.5em; + margin-bottom: 0.5em; + margin-left: 0.5em; + margin-right: 0.5em; + border-radius: 0.75em; + position: relative; + left: 0%; } div.premises { -font-size: 100%; -border-top: solid 1px #3399ff; -border-left: solid 1px #3399ff; -border-bottom: solid 1px #3399ff; -border-right: solid 1px #3399ff; -padding: 0.5px; -width: 100%; -background-color: #ccccff; -margin-top: 0.5em; -margin-bottom: 0.5em; -margin-left: 0.5em; -margin-right: 0.5em; -border-radius: 0.75em; -position:relative; -left:0% /*May be we could shift the left margin a bit?*/ + font-size: 100%; + border-top: solid 1px var(--color-info-border); + border-left: solid 1px var(--color-info-border); + border-bottom: solid 1px var(--color-info-border); + border-right: solid 1px var(--color-info-border); + padding: 0.5px; + width: 100%; + background-color: var(--color-info-bg); + margin-top: 0.5em; + margin-bottom: 0.5em; + margin-left: 0.5em; + margin-right: 0.5em; + border-radius: 0.75em; + position: relative; + left: 0%; /*May be we could shift the left margin a bit?*/ } /* ***************** Social Pane **********/ div.socialPane { -border-top: solid 1px #777; border-bottom: solid 1px #777; -padding-top: 0.5em; padding-bottom: 0.5em; -margin: 0 } - -img.foafPic { width: 100% ; border: none; margin: 0; padding: 0; -/*float:right; */} + border-top: solid 1px var(--color-border-dark); + border-bottom: solid 1px var(--color-border-dark); + padding-top: 0.5em; + padding-bottom: 0.5em; + margin: 0; +} +img.foafPic { + width: 100%; + border: none; + margin: 0; + padding: 0; + /*float:right; */ +} div.mildNotice { -border: dashed 0.1em #777; margin: 1em; padding: 1em; -width: 80%; /* float: right; */ -background-color: #ffe; } - -.friendBox { /* height: 4em; */ border-top: solid 0.01em #ccc; margin: 0; padding: 0.3em; -/* float: left; */} -.friendBoxBig { height: 20em; border-top: solid 0.01em #202; /* float: left; */} - -.socialPane a { color: #3B5998; text-decoration: none; font-weight: bold} -.socialPane a:link { color: #3B5998; text-decoration: none; font-weight: bold} -.socialPane a:visited { color: #3B5998; text-decoration: none; font-weight: bold} -.socialPane a:hover { color: #3B5998; text-decoration: underline; font-weight: bold} -.socialPane a:active { color: #888; text-decoration: none; } - -img.foafThumb { height: 3em ; border: 0px; margin: 0.1em; padding: 0.1em; -vertical-align: middle; + border: dashed 0.1em var(--color-border-dark); + margin: 1em; + padding: 1em; + width: 80%; /* float: right; */ + background-color: var(--color-mild-notice-bg); +} + +.friendBox { + /* height: 4em; */ + border-top: solid 0.01em var(--color-border); + margin: 0; + padding: 0.3em; + /* float: left; */ +} +.friendBoxBig { + height: 20em; + border-top: solid 0.01em var(--color-text-dark-gray); /* float: left; */ +} + +.socialPane a { + color: var(--color-text-link); + text-decoration: none; + font-weight: bold; +} +.socialPane a:link { + color: var(--color-text-link); + text-decoration: none; + font-weight: bold; +} +.socialPane a:visited { + color: var(--color-text-link-visited); + text-decoration: none; + font-weight: bold; +} +.socialPane a:hover { + color: var(--color-text-link-hover); + text-decoration: underline; + font-weight: bold; +} +.socialPane a:active { + color: var(--color-text-link-active); + text-decoration: none; +} + +img.foafThumb { + height: 3em; + border: 0px; + margin: 0.1em; + padding: 0.1em; + vertical-align: middle; } /* Thumbnail of a fiend etc */ -.friendBox .confirmed { font-weight: bold; } +.friendBox .confirmed { + font-weight: bold; +} -table.inputForm { font-size: 100% } +table.inputForm { + font-size: 100%; +} .mainBlock { -background: #fff; -color: #000; -float: left; -width: 46%; -margin: 0; -border-left: 1px solid #ccc; -border-right: 1px solid #ccc; -border-bottom: 1px solid #ccc; -padding: 0; + background: var(--color-main-block-bg); + color: var(--color-text); + float: left; + width: 46%; + margin: 0; + border-left: 1px solid var(--color-border); + border-right: 1px solid var(--color-border); + border-bottom: 1px solid var(--color-border); + padding: 0; } .navBlock { -background-color: #eee; -float: left; -width: 25%; -border: 0; -padding: 0.5em; -margin: 0; + background-color: var(--color-nav-block-bg); + float: left; + width: 25%; + border: 0; + padding: 0.5em; + margin: 0; } .navBlock .navSection { -border: solid 0.05em gray; -padding: 0.5em; -border-radius: 0.5em; /* CSS3: border-radius: .4em; */ + border: solid 0.05em var(--color-nav-block-border); + padding: 0.5em; + border-radius: 0.5em; /* CSS3: border-radius: .4em; */ } -div.socialPane h2 { color: #202 } -div.socialPane h3 { color: #202 } +div.socialPane h2 { + color: var(--color-text-dark-gray); +} +div.socialPane h3 { + color: var(--color-text-dark-gray); +} div.social_linkButton { -width: 80%; -background-color: #fff; -border: solid 0.05em #ccc; -margin-top: 0.1em; margin-bottom: 0.1em; -padding: 0.1em; -text-align: center; + width: 80%; + background-color: var(--color-background); + border: solid 0.05em var(--color-border); + margin-top: 0.1em; + margin-bottom: 0.1em; + padding: 0.1em; + text-align: center; } /* For question-and-answer stuff for new web id but quite reusable. */ -.answer { font-style: italic; color: #00c; text-decoration: underline; } -.tip { font-style: normal; color: #333; margin: 1em;} -.task { font-style: normal; color: #333; margin: 1em; -background-color: #ffe; padding: 1em; -border-radius: 1em; /* CSS3: border-radius: 1em; */ -} -.success {background-color: #efe } -.failure {background-color: white ; border: 0.5em red} -div.unknown { display:none } -div.yes > div.negative { display: none } -div.no > div.affirmative { display: none } +.answer { + font-style: italic; + color: var(--color-text-answer); + text-decoration: underline; +} +.tip { + font-style: normal; + color: var(--color-text); + margin: 1em; +} +.task { + font-style: normal; + color: var(--color-text); + margin: 1em; + background-color: var(--color-mild-notice-bg); + padding: 1em; + border-radius: 1em; /* CSS3: border-radius: 1em; */ +} +.success { + background-color: var(--color-success-bg); +} +.failure { + background-color: var(--color-failure-bg); + border: 0.5em var(--color-failure-border); +} +div.unknown { + display: none; +} +div.yes > div.negative { + display: none; +} +div.no > div.affirmative { + display: none; +} /******************* Exception Pane ******** ** @@ -231,228 +357,301 @@ div.no > div.affirmative { display: none } ** throws an exception **/ -div.exceptionPane pre { background-color: #fee; } - - +div.exceptionPane pre { + background-color: var(--color-error-notice-bg); +} /******************* Category Pane *********/ -.categoryPane a { color: #3B5998; text-decoration: none; font-weight: bold} -.categoryPane a:link { color: #3B5998; text-decoration: none; font-weight: bold} -.categoryPane a:visited { color: #3B5998; text-decoration: none; font-weight: bold} -.categoryPane a:hover { color: #3B5998; text-decoration: underline; font-weight: bold} -.categoryPane a:active { color: #888; text-decoration: none; } +.categoryPane a { + color: var(--color-text-link); + text-decoration: none; + font-weight: bold; +} +.categoryPane a:link { + color: var(--color-text-link); + text-decoration: none; + font-weight: bold; +} +.categoryPane a:visited { + color: var(--color-text-link-visited); + text-decoration: none; + font-weight: bold; +} +.categoryPane a:hover { + color: var(--color-text-link-hover); + text-decoration: underline; + font-weight: bold; +} +.categoryPane a:active { + color: var(--color-text-link-active); + text-decoration: none; +} -.categoryBottomClass { background-color: #efe ; border: 0.1em solid green } +.categoryBottomClass { + background-color: var(--color-category-class-bg); + border: 0.1em solid var(--color-category-class-border); +} -.categoryTable { padding-left: 2em;} -.categoryPane { background-color: #f8fff8; padding: 0.5em; -border-width: 0.1em; border-color: #777777; -border-radius: 1em; /* CSS3: border-radius: .4em; */ } +.categoryTable { + padding-left: 2em; +} +.categoryPane { + background-color: var(--color-category-bg); + padding: 0.5em; + border-width: 0.1em; + border-color: var(--color-category-border); + border-radius: 1em; /* CSS3: border-radius: .4em; */ +} -.categoryPane a.categoryWhy { color: #ddd} -.categoryPane a.categoryWhy:link { color: #ddd; text-decoration: none; font-weight: bold} -.categoryPane a.categoryWhy:visited { color: #ddd; text-decoration: none; font-weight: bold} -.categoryPane a.categoryWhy:hover { color: #3B5998; text-decoration: underline; font-weight: bold} -.categoryPane a.categoryWhy:active { color: #ddd; text-decoration: none; } +.categoryPane a.categoryWhy { + color: var(--color-border-pale); +} +.categoryPane a.categoryWhy:link { + color: var(--color-border-pale); + text-decoration: none; + font-weight: bold; +} +.categoryPane a.categoryWhy:visited { + color: var(--color-border-pale); + text-decoration: none; + font-weight: bold; +} +.categoryPane a.categoryWhy:hover { + color: var(--color-text-link-hover); + text-decoration: underline; + font-weight: bold; +} +.categoryPane a.categoryWhy:active { + color: var(--color-border-pale); + text-decoration: none; +} -.categoryPane a.categoryWhy { color:grey } +.categoryPane a.categoryWhy { + color: grey; +} /* a.categoryWhy:hover { color: #3B5998 } */ - /******************* PubsPane *********/ .pubsPane { -background-color: #F2F6DA; -border-width: 0.1em; -border-color: #777777; -border-radius: 1em; /* CSS3: border-radius: .4em; */ -padding: 1em; + background-color: var(--color-pubs-pane-bg); + border-width: 0.1em; + border-color: var(--color-pubs-pane-border); + border-radius: 1em; /* CSS3: border-radius: .4em; */ + padding: 1em; -text-decoration: none; -font-weight: bold; + text-decoration: none; + font-weight: bold; } .pubsPane h2 { -margin: 0; -padding: 0; + margin: 0; + padding: 0; } .pubsPane form { -padding-left: 1em; + padding-left: 1em; } /*Clear both - start things on individula lines */ .pubsRow { -margin: 0.5em 3em 0.5em 0em; -clear: both; + margin: 0.5em 3em 0.5em 0em; + clear: both; } /*inputs float right to line up */ .pubsRow input { -float: right; -width: 20em; -height: 1em; + float: right; + width: 20em; + height: 1em; } #inpid_book_description { -float: right; -height: 8em; -width: 17em; + float: right; + height: 8em; + width: 17em; } .pubsRow button { -float: left; -height: 2em; -padding: 0.5em; -margin: 0.5em; + float: left; + height: 2em; + padding: 0.5em; + margin: 0.5em; } -.hideit -{ -display: none; +.hideit { + display: none; } .active { -/* display: visible; */ + /* display: visible; */ } .submitRow { -clear: both; -height: 5em; + clear: both; + height: 5em; } .submitRow button { -width: 7em; -height: 100%; + width: 7em; + height: 100%; } #buttonid { -display: none; + display: none; } -#buttonid.active{ -display: inline; +#buttonid.active { + display: inline; } - - - /******************* CV Pane *****************/ .CVclass { -background-color: LightSkyBlue; + background-color: var(--color-cv-pane-bg); } /******************* Data Content Pane *****************/ div.dataContentPane { -border-top: solid 1px black; -border-left: solid 1px black; -border-bottom: solid 1px #777; -border-right: solid 1px #777; -padding: 0.5em; /* color: #404; */ -margin-top: 0.5em; margin-bottom: 0.5em; + border-top: solid 1px var(--color-data-pane-border-top); + border-left: solid 1px var(--color-data-pane-border-top); + border-bottom: solid 1px var(--color-data-pane-border-side); + border-right: solid 1px var(--color-data-pane-border-side); + padding: 0.5em; /* color: #404; */ + margin-top: 0.5em; + margin-bottom: 0.5em; } .nestedFormula { -border-top: solid 1px black; -border-left: solid 1px black; -border-bottom: solid 1px #777; -border-right: solid 1px #777; -padding: 0.5em; -border-radius: 0.5em; + border-top: solid 1px var(--color-data-pane-border-top); + border-left: solid 1px var(--color-data-pane-border-top); + border-bottom: solid 1px var(--color-data-pane-border-side); + border-right: solid 1px var(--color-data-pane-border-side); + padding: 0.5em; + border-radius: 0.5em; } div.dataContentPane td { -padding-left: 0.2em; -padding-top: 0.1em; -padding-right: 0.2em; -padding-bottom: 0.05em; -/* vertical-align: middle; /*@@ Lalana's request*/ -vertical-align: top; /*@@ Tims's request*/ -/* With middel, you can't tell what is with what */ -/* background-color: white; */ + padding-left: 0.2em; + padding-top: 0.1em; + padding-right: 0.2em; + padding-bottom: 0.05em; + /* vertical-align: middle; /*@@ Lalana's request*/ + vertical-align: top; /*@@ Tims's request*/ + /* With middel, you can't tell what is with what */ + /* background-color: white; */ } div.dataContentPane tr { -margin-bottom: 0.6em; -padding-top: 1em; -padding-bottom: 1em; - + margin-bottom: 0.6em; + padding-top: 1em; + padding-bottom: 1em; } -.dataContentPane a { color: #3B5998; text-decoration: none; font-weight: bold} -.dataContentPane a:link { color: #3B5998; text-decoration: none; font-weight: bold} -.dataContentPane a:visited { color: #3B5998; text-decoration: none; font-weight: bold} -.dataContentPane a:hover { color: #3B5998; text-decoration: underline; font-weight: bold} -.dataContentPane a:active { color: #888; text-decoration: none; } +.dataContentPane a { + color: var(--color-text-link); + text-decoration: none; + font-weight: bold; +} +.dataContentPane a:link { + color: var(--color-text-link); + text-decoration: none; + font-weight: bold; +} +.dataContentPane a:visited { + color: var(--color-text-link-visited); + text-decoration: none; + font-weight: bold; +} +.dataContentPane a:hover { + color: var(--color-text-link-hover); + text-decoration: underline; + font-weight: bold; +} +.dataContentPane a:active { + color: var(--color-text-link-active); + text-decoration: none; +} -.dataContentPane.embeddedText { white-space: pre-wrap;} -.dataContentPane.embeddedXHTML {} +.dataContentPane.embeddedText { + white-space: pre-wrap; +} +.dataContentPane.embeddedXHTML { +} /* div.dataContentPane a { text-decoration: none; color: #006} /* Only very slightly blue */ -div.dataContentPane td.pred { min-width: 12em } /* Keep aligned with others better */ -div.dataContentPane td.pred a { color: #444 } /* Greyish as form field names have less info value */ +div.dataContentPane td.pred { + min-width: 12em; +} /* Keep aligned with others better */ +div.dataContentPane td.pred a { + color: var(--color-text-muted); +} /* Greyish as form field names have less info value */ /* .collectionAsTables {border-right: green 1px; margin: 0.2em;} */ - - div.n3Pane { -padding: 1em; -border-top: solid 1px black; -border-left: solid 1px black; -border-bottom: solid 1px #777; -border-right: solid 1px #777; -color: #004; + padding: 1em; + border-top: solid 1px var(--color-data-pane-border-top); + border-left: solid 1px var(--color-data-pane-border-top); + border-bottom: solid 1px var(--color-data-pane-border-side); + border-right: solid 1px var(--color-data-pane-border-side); + color: var(--color-text-blue); } -.imageView { border: 1em white; margin: 1em; } +.imageView { + border: 1em var(--color-background); + margin: 1em; +} -.n3Pane pre { font-size: 120%; } -div.n3Pane { } +.n3Pane pre { + font-size: 120%; +} +div.n3Pane { +} -.RDFXMLPane pre { font-size: 120%; } -div.RDFXMLPane { } +.RDFXMLPane pre { + font-size: 120%; +} +div.RDFXMLPane { +} div.RDFXMLPane { -padding: 1em; -border-top: solid 2px black; -border-left: solid 2px black; -border-bottom: solid 2px #777; -border-right: solid 2px #777; -color: #440; + padding: 1em; + border-top: solid 2px var(--color-data-pane-border-top); + border-left: solid 2px var(--color-data-pane-border-top); + border-bottom: solid 2px var(--color-data-pane-border-side); + border-right: solid 2px var(--color-data-pane-border-side); + color: var(--color-text-brown); } /* Generic things useful anywhere */ - img.hideTillHover { -visibility:hidden; + visibility: hidden; } -img.hideTillHover:hover { -visibility:visible; +img.hideTillHover:hover { + visibility: visible; } -.hideTillHover img{ -visibility:hidden; +.hideTillHover img { + visibility: hidden; } .hideTillHover:hover img { -visibility:visible; + visibility: visible; } -.hideTillHover a{ -visibility:hidden; +.hideTillHover a { + visibility: hidden; } .hideTillHover:hover a { -visibility:visible; + visibility: visible; } -.hoverControl .hoverControlHide{ -visibility:hidden; +.hoverControl .hoverControlHide { + visibility: hidden; } .hoverControl:hover .hoverControlHide { -visibility:visible; + visibility: visible; } - /* Pane icons: */ /* @@ -478,311 +677,369 @@ visibility:visible; .hoverControl:hover .paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px; visibility:visible; } */ - - /* outline object view */ -img.outlineImage { max-height: 20em; max-width: 30em } /* save vertical space */ +img.outlineImage { + max-height: 20em; + max-width: 30em; +} /* save vertical space */ /* Compare facebook which only limits width -> lots of tall images! */ -img.phoneIcon { border: 0; margin-left: 1em} +img.phoneIcon { + border: 0; + margin-left: 1em; +} -table#sources { width: 100% } +table#sources { + width: 100%; +} -table { border-spacing: 0} +table { + border-spacing: 0; +} -table { margin: 0em } +table { + margin: 0em; +} -td { font-size: 100%; -border-left: none; -border-top: none; -border-right: none; -border-bottom: none; -margin: 0.2em; -/* border-right: solid purple 0.1em ; +td { + font-size: 100%; + border-left: none; + border-top: none; + border-right: none; + border-bottom: none; + margin: 0.2em; + /* border-right: solid purple 0.1em ; border-bottom: solid purple 0.1em; */ -vertical-align: top; -/* display: compact; Causes console errors in ffox */ + vertical-align: top; + /* display: compact; Causes console errors in ffox */ } -td.pred { padding-left: 0.5em } +td.pred { + padding-left: 0.5em; +} /*td.optButton { display: none } tr[parentOfSelected] > td.pred td.optButton { display: block } */ -table.results { width: 100% } - -table.results td { font-size: 100%; -background-color:#fff; -border-left: none; -border-top: none; -border-right: none; -border-bottom: none; -margin: 0.1em; -border-right: solid #777 0.1em ; -border-bottom: solid #777 0.1em; +table.results { + width: 100%; +} -vertical-align: top } +table.results td { + font-size: 100%; + background-color: var(--color-table-result-bg); + border-left: none; + border-top: none; + border-right: none; + border-bottom: none; + margin: 0.1em; + border-right: solid var(--color-table-border-dark) 0.1em; + border-bottom: solid var(--color-table-border-dark) 0.1em; + vertical-align: top; +} -table.results th { font-size: 100%; -background-color: #ddf; -border-left: none; -border-top: none; -border-right: solid #777 0.1em; -border-bottom: solid #777 0.1em; -margin: 0.3em; -padding-top: 0.5em; padding-right: 0.5em; -border-right: solid #777 0.1em ; -border-bottom: solid #777 0.1em; +table.results th { + font-size: 100%; + background-color: var(--color-table-header-bg); + border-left: none; + border-top: none; + border-right: solid var(--color-table-border-dark) 0.1em; + border-bottom: solid var(--color-table-border-dark) 0.1em; + margin: 0.3em; + padding-top: 0.5em; + padding-right: 0.5em; + border-right: solid var(--color-table-border-dark) 0.1em; + border-bottom: solid var(--color-table-border-dark) 0.1em; -vertical-align: top } + vertical-align: top; +} /* Hide sections of the display. Collpase not actually in CSS1 except for table row and col. Supposed to leave layoutunchanged. So we float it too. */ -.collapse { display: none } -.expand { display: block } +.collapse { + display: none; +} +.expand { + display: block; +} /* log classes */ -.nrml { color: black; } -.info { color: black; } -.warn { color: black; background-color: #ffd; } -.eror { color: black; background-color: #fdd; } -.mesg { color: green; } -.dbug { color: black; background-color: #ddf;} /* Blue */ +.nrml { + color: var(--color-log-normal); +} +.info { + color: var(--color-log-info); +} +.warn { + color: var(--color-log-warn); + background-color: var(--color-log-warn-bg); +} +.eror { + color: var(--color-log-error); + background-color: var(--color-log-error-bg); +} +.mesg { + color: var(--color-log-message); +} +.dbug { + color: var(--color-log-debug); + background-color: var(--color-log-debug-bg); +} /* Blue */ /* Try to get the icons to flush right in the cell */ .sortheader { -color: black; -text-decoration: none; -position: relative; -border:none; /* Jim's commented out */ + color: var(--color-log-normal); + text-decoration: none; + position: relative; + border: none; /* Jim's commented out */ } -.colclose { float: right; color: #aaa } /* Should be 67% transp black */ -.sortarrow { float: left; color: #aaa; border: none;} - +.colclose { + float: right; + color: var(--color-col-close); +} /* Should be 67% transp black */ +.sortarrow { + float: left; + color: var(--color-sort-arrow); + border: none; +} /* CSS Stuff for tabbed Views.. */ table.viewTable { -padding: 0; -margin: 0; -border-style: none; -border-width: 0; -height: 40em; -width: 100%; -border-spacing: 0; + padding: 0; + margin: 0; + border-style: none; + border-width: 0; + height: 40em; + width: 100%; + border-spacing: 0; } div.viewTabs { -background-color: #fff; -padding:0; + background-color: var(--color-view-tab-bg); + padding: 0; } div.viewWindows { -width: 100%; -height:100%; -overflow: auto; -margin: 0em; -padding:0em; -border-right: solid #aaa 0.1em; /* was 2px */ -border-left: solid #aaa 0.1em; -border-bottom: solid #aaa 0.1em; -background-color: #ccc; + width: 100%; + height: 100%; + overflow: auto; + margin: 0em; + padding: 0em; + border-right: solid var(--color-border-light) 0.1em; /* was 2px */ + border-left: solid var(--color-border-light) 0.1em; + border-bottom: solid var(--color-border-light) 0.1em; + background-color: var(--color-view-window-bg); } div.querySelect { -background-color: #ccc; -width:100%; -height:100%; -border-left: solid #aaa 0.1em; -border-bottom: solid #aaa 0.1em; -overflow:auto; -margin: 0em; -padding:0em; + background-color: var(--color-query-select-bg); + width: 100%; + height: 100%; + border-left: solid var(--color-border-light) 0.1em; + border-bottom: solid var(--color-border-light) 0.1em; + overflow: auto; + margin: 0em; + padding: 0em; } td.viewTableData { -padding: 0em; -margin: 0em; -height:100%; -width:80%; + padding: 0em; + margin: 0em; + height: 100%; + width: 80%; } td.queryTableData { -padding: 0em; -margin: 0em; -border-width: 0em; -height:100%; -width:20%; -border-style:none; + padding: 0em; + margin: 0em; + border-width: 0em; + height: 100%; + width: 20%; + border-style: none; } table.viewTable tr { -height: 100%; -margin: 0em; -padding: 0em; -border-style:none; + height: 100%; + margin: 0em; + padding: 0em; + border-style: none; } - a { -color: #3B5998; -text-decoration: none; -cursor: pointer; -} -a.inactive{ -background-color: #eee; -border-right:solid #ddd 0.1em; -border-top:solid #aaa 0.1em; -border-left:solid #aaa 0.1em; -padding-top: 0.3em; -padding-left: 0.8em; -padding-right: 0.8em; -padding-bottom: 0em; -margin-right: 0.1em; -color: #99f; -text-decoration:none; -} - -a.active{ -background-color: #ccc; -border-right:solid #ddd 0.1em; -border-top:solid #aaa 0.1em; -border-left:solid #aaa 0.1em; -padding-top: 0.3em; -padding-left: 0.8em; -padding-right: 0.8em; -padding-bottom:0em; -margin-right:0.1em; -color: #22f; -text-decoration:none; + color: var(--color-text-link); + text-decoration: none; + cursor: pointer; +} +a.inactive { + background-color: var(--color-tab-inactive-bg); + border-right: solid var(--color-tab-inactive-border) 0.1em; + border-top: solid var(--color-tab-inactive-border-light) 0.1em; + border-left: solid var(--color-tab-inactive-border-light) 0.1em; + padding-top: 0.3em; + padding-left: 0.8em; + padding-right: 0.8em; + padding-bottom: 0em; + margin-right: 0.1em; + color: var(--color-tab-inactive-text); + text-decoration: none; +} + +a.active { + background-color: var(--color-tab-active-bg); + border-right: solid var(--color-tab-active-border) 0.1em; + border-top: solid var(--color-tab-active-border-light) 0.1em; + border-left: solid var(--color-tab-active-border-light) 0.1em; + padding-top: 0.3em; + padding-left: 0.8em; + padding-right: 0.8em; + padding-bottom: 0em; + margin-right: 0.1em; + color: var(--color-tab-active-text); + text-decoration: none; } input.tabQueryName { -border: solid #aaa 0.1em; -width:100%; -padding:0em; + border: solid var(--color-border-light) 0.1em; + width: 100%; + padding: 0em; } input.delQueryButton { -border:none; -color:#c00; -background-color:#ccc; -cursor:pointer; -padding:0em; + border: none; + color: var(--color-warning); + background-color: var(--color-tab-active-bg); + cursor: pointer; + padding: 0em; } td.checkboxTD { -padding-right:0.5em; + padding-right: 0.5em; } .sourceHighlight { -background-color:yellow; + background-color: var(--color-source-highlight); } #MenuBar { -padding: 0.5em; -position: fixed; -top: 0; -bottom: auto; -left: 0; -right: 0; -background-color: #eee; -border: 0.1em solid #aaa; + padding: 0.5em; + position: fixed; + top: 0; + bottom: auto; + left: 0; + right: 0; + background-color: var(--color-nav-block-bg); + border: 0.1em solid var(--color-border-light); } #TabulatorStatusWidget { -position: fixed; -top: 0; -bottom: auto; -left: auto; -right: 0; + position: fixed; + top: 0; + bottom: auto; + left: auto; + right: 0; } div.mapKeyDiv { -position:relative; -float:right; -margin: 0.3em; -color: #777; -background:#fff; -border:solid #777 0.1em; -padding:0.1em; + position: relative; + float: right; + margin: 0.3em; + color: var(--color-border-dark); + background: var(--color-background); + border: solid var(--color-border-dark) 0.1em; + padding: 0.1em; } span.closeQuerySpan { -float:right; -text-align:right; -height: 0.1em; -overflow:visible; + float: right; + text-align: right; + height: 0.1em; + overflow: visible; } span.openQuerySpan { -float:left; -overflow:visible; -height:0em; -text-align:left; -position:relative; -top:0em; -z-index:1; + float: left; + overflow: visible; + height: 0em; + text-align: left; + position: relative; + top: 0em; + z-index: 1; } -input.textinput{ -width: 100%; -border: none; -font-size:95%; -padding: 0em; -margin: 0; +input.textinput { + width: 100%; + border: none; + font-size: 95%; + padding: 0em; + margin: 0; } -textarea.textinput{ -border: none; +textarea.textinput { + border: none; } .pendingedit { -color: #bbb; + color: var(--color-pending-edit); } -td.undetermined{ -color: gray; -font-style: italic; +td.undetermined { + color: var(--color-nav-block-border); + font-style: italic; } /*revert back*/ -td.undetermined table{ -color: black; -font-style: normal; +td.undetermined table { + color: var(--color-text); + font-style: normal; } /*color style from http://developer.yahoo.com/yui/docs/module_menu.html*/ -.outlineMenu{ -position:absolute; -/*width:10em;*/ -height:10em; /* Jim's commented out */ -background: #FFFFFF none repeat scroll 0%; -overflow-x: hidden; -overflow-y: auto; -border: 1px solid; -/*padding:.2em;*/ +.outlineMenu { + position: absolute; + /*width:10em;*/ + height: 10em; /* Jim's commented out */ + background: var(--color-menu-bg) none repeat scroll 0%; + overflow-x: hidden; + overflow-y: auto; + border: 1px solid; + /*padding:.2em;*/ +} +.outlineMenu table { + cursor: default; + width: 100%; + text-align: left; + padding: 5px 5px; +} +.outlineMenu div { + /*width:6em;*/ + overflow: auto; + white-space: nowrap; +} +.outlineMenu td { + color: var(--color-menu-item-text); +} +.outlineMenu .activeItem { + background: var(--color-menu-item-active); +} /* @@ Jim's: #f4e8fc; */ +.outlineMenu input { + margin: 0.2em; } -.outlineMenu table{cursor:default;width:100%;text-align:left;padding:5px 5px;} -.outlineMenu div{/*width:6em;*/ overflow:auto; white-space:nowrap;} -.outlineMenu td{color:#654d6c;} -.outlineMenu .activeItem{background: #D1C6DA;} /* @@ Jim's: #f4e8fc; */ -.outlineMenu input{margin: 0.2em;} -div.bottom-border{ -border: .2em solid transparent; -width: 100%; +div.bottom-border { + border: 0.2em solid transparent; + width: 100%; } -div.bottom-border-active{ -cursor: copy; -border: .2em solid; -border-color: rgb(100%,65%,0%); +div.bottom-border-active { + cursor: copy; + border: 0.2em solid; + border-color: var(--color-bottom-border-highlight); } /* The thing below was for the kenny's orange bar*/ @@ -794,199 +1051,195 @@ td{ */ .deleteIcon { -margin-left: 0.1em; + margin-left: 0.1em; } .deleteCol { -float: right; -display: inline; + float: right; + display: inline; } -.suggestion_list -{ -background: white; -border: 1px solid; -padding: 4px; +.suggestion_list { + background: var(--color-suggestion-bg); + border: 1px solid var(--color-suggestion-border); + padding: 4px; } -.suggestion_list ul -{ -padding: 0; -margin: 0; -list-style-type: none; +.suggestion_list ul { + padding: 0; + margin: 0; + list-style-type: none; } -.suggestion_list a -{ -text-decoration: none; -color: navy; +.suggestion_list a { + text-decoration: none; + color: var(--color-suggestion-link); } -.suggestion_list .selected -{ -background: navy; -color: white; +.suggestion_list .selected { + background: var(--color-suggestion-selected-bg); + color: var(--color-suggestion-selected-text); } -.suggestion_list .selected a -{ -color: white; +.suggestion_list .selected a { + color: var(--color-suggestion-selected-text); } -#autosuggest -{ -display: none; +#autosuggest { + display: none; } - - /* Start of styles for the photoPane, by albert08@csail.mit.edu */ div.PhotoContentPane { -float: left; -width: 900px; -border: 1px solid #AAAAAA; -padding: 10px; + float: left; + width: 900px; + border: 1px solid var(--color-photo-border); + padding: 10px; } div.PhotoListPanel { -float: left; -padding: 5px ; -border: 1px solid #AAAAAA; -width: 540px; -min-height: 300px; + float: left; + padding: 5px; + border: 1px solid var(--color-photo-border); + width: 540px; + min-height: 300px; } div.PhotoInfoPanel { -float: left; -padding: 10px; -border: 1px solid #AAAAAA; -width: 300px; -text-align: center; -margin: 0px 0px 10px 10px; + float: left; + padding: 10px; + border: 1px solid var(--color-photo-border); + width: 300px; + text-align: center; + margin: 0px 0px 10px 10px; } div.TagMenu { -float: left; -padding: 10px; -border: 1px solid #AAAAAA; -width: 300px; -margin: 0px 0px 0px 10px; -text-align: justify; + float: left; + padding: 10px; + border: 1px solid var(--color-photo-border); + width: 300px; + margin: 0px 0px 0px 10px; + text-align: justify; } .tagItem { -float: left; -padding: 2px; -margin: 2px; -cursor:pointer; + float: left; + padding: 2px; + margin: 2px; + cursor: pointer; } .tagItem_h { -float: left; -padding: 2px; -margin: 1px; -border: 1px solid #DDBB99; -background-color: #DDEEFF; -cursor:pointer; + float: left; + padding: 2px; + margin: 1px; + border: 1px solid var(--color-photo-tag-highlight-border); + background-color: var(--color-photo-tag-highlight); + cursor: pointer; } div.photoItem { -float: left; -width: 100%; + float: left; + width: 100%; } div.photoFrame { -border-right: 1px solid #AAAAAA; -width: 260px; -padding: 10px; -margin: 10px 10px 10px 10px; -text-align: center; -float: left; + border-right: 1px solid var(--color-photo-border); + width: 260px; + padding: 10px; + margin: 10px 10px 10px 10px; + text-align: center; + float: left; } img.photoThumbnail { -border: 1px solid #CCCCCC; -margin: auto auto auto auto; + border: 1px solid var(--color-photo-thumb-border); + margin: auto auto auto auto; } .photoListTags { -width:200px; -margin-top: 10px; -padding-top: 10px; -float: left; + width: 200px; + margin-top: 10px; + padding-top: 10px; + float: left; } .photoList_tag { -background: transparent url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px 1px no-repeat; -padding: 1px 0px 1px 18px; -margin-left: 5px; + background: transparent + url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px + 1px no-repeat; + padding: 1px 0px 1px 18px; + margin-left: 5px; } .TagMenu_tag { -background: transparent url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px 1px no-repeat; -padding: 1px 0px 1px 18px; -margin-left: 5px; + background: transparent + url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px + 1px no-repeat; + padding: 1px 0px 1px 18px; + margin-left: 5px; } div.photoImportContentPane { -float: left; -padding: 0px; -width: 930px; -border: 1px solid #AAAAAA; -padding: 10px; + float: left; + padding: 0px; + width: 930px; + border: 1px solid var(--color-photo-border); + padding: 10px; } .photoImportTitle { -font-size: 16px; -font-weight: bold; + font-size: 1rem; + font-weight: bold; } .photoItemPanel { -width: 260px; -height: 300px; -float: left; -padding: 10px; -border: 1px solid #AAAAAA; -margin: 0px 10px 10px 0px; + width: 260px; + height: 300px; + float: left; + padding: 10px; + border: 1px solid var(--color-photo-border); + margin: 0px 10px 10px 0px; } .photoControlImg { -border: 0px; -cursor: pointer; + border: 0px; + cursor: pointer; } .photoControlImgInactive { -opacity: .5; -border: 0px; + opacity: 0.5; + border: 0px; } #photoPageInfo { -font-family: Arial; -font-size: 14px; -font-weight: bold; + font-family: var(--font-family-ui); + font-size: 0.875rem; + font-weight: bold; } .controls { -clear: both; -text-align: right; -margin: 15px 15px 0px 0px; + clear: both; + text-align: right; + margin: 15px 15px 0px 0px; } .controlButton { -margin: 0px 0px 0px 10px; + margin: 0px 0px 0px 10px; } div.TagPane { -min-width: 500px; -border: 1px solid #AAAAAA; -padding: 10px; + min-width: 500px; + border: 1px solid var(--color-photo-border); + padding: 10px; } div.TagSemanticsPanel { -margin: 5px 0px 20px 0px; + margin: 5px 0px 20px 0px; } div.TagSemanticsTable { -width: 100%; -font-family: Arial; -font-size: 12px; + width: 100%; + font-family: var(--font-family-ui); + font-size: 0.75rem; } div.AddTagSemantics { -margin: 50px 0px 10px 0px; + margin: 50px 0px 10px 0px; } .controlSelect { -margin: 5px; -font-family: Arial; -font-size: 12px; + margin: 5px; + font-family: var(--font-family-ui); + font-size: 0.75rem; } .tagURIInput { -margin: 5px; -font-family: Arial; -font-size: 12px; -width: 300px; + margin: 5px; + font-family: var(--font-family-ui); + font-size: 0.75rem; + width: 300px; } -div.TagPane hr{ -border: 1px solid #AAAAAA; +div.TagPane hr { + border: 1px solid var(--color-photo-border); } /* End of styles for the photoPane @@ -997,89 +1250,123 @@ Styles for tableViewPane */ .tableViewPane table th { -background-color: #eee; -color: black; + background-color: var(--color-tab-inactive-bg); + color: var(--color-log-normal); } .tableViewPane table th a { -color: #555; + color: var(--color-text-secondary); } .tableViewPane table .selectors td { -background-color: #ccc; + background-color: var(--color-tab-active-bg); } .tableViewPane table td { -border-bottom: 1px solid black; -border-right: 1px solid black; + border-bottom: 1px solid var(--color-data-pane-border-top); + border-right: 1px solid var(--color-data-pane-border-top); } .tableViewPane .toolbar td { -border: none; + border: none; } .tableViewPane .sparqlButton { -width: 16px; -height: 16px; -border: 1px solid black; + width: 16px; + height: 16px; + border: 1px solid var(--color-data-pane-border-top); } .tableViewPane .sparqlDialog { -position: fixed; -top: 40px; -left: 100px; -width: 600px; -background: white; -border: 1px solid black; -padding: 5px; + position: fixed; + top: 40px; + left: 100px; + width: 600px; + background: var(--color-background); + border: 1px solid var(--color-data-pane-border-top); + padding: 5px; } .tableViewPane .sparqlDialog textarea { -width: 590px; -height: 250px; + width: 590px; + height: 250px; } /* These should be the same as with hthe dataContentPane */ -.tableViewPane a { color: #3B5998; text-decoration: none; font-weight: bold} -.tableViewPane a:link { color: #3B5998; text-decoration: none; font-weight: bold} -.tableViewPane a:visited { color: #3B5998; text-decoration: none; font-weight: bold} -.tableViewPane a:hover { color: #3B5998; text-decoration: underline; font-weight: bold} -.tableViewPane a:active { color: #888; text-decoration: none; } - -.tableViewPane tr {border-color: #444; padding-left: 0.3em; padding-right: 0.3em } - +.tableViewPane a { + color: var(--color-text-link); + text-decoration: none; + font-weight: bold; +} +.tableViewPane a:link { + color: var(--color-text-link); + text-decoration: none; + font-weight: bold; +} +.tableViewPane a:visited { + color: var(--color-text-link-visited); + text-decoration: none; + font-weight: bold; +} +.tableViewPane a:hover { + color: var(--color-text-link-hover); + text-decoration: underline; + font-weight: bold; +} +.tableViewPane a:active { + color: var(--color-text-link-active); + text-decoration: none; +} +.tableViewPane tr { + border-color: var(--color-border-darker); + padding-left: 0.3em; + padding-right: 0.3em; +} /*The 'display explanation' feature*/ .inquiry { -padding-left: 0.2em; -color: red; -font-family: Arial; -font-weight: bold; + padding-left: 0.2em; + color: var(--color-warning); + font-family: var(--font-family-ui); + font-weight: bold; } /* End of styles for tableViewPane */ - - /* Styles for FORM PANE ** ** Colors from data cotent pane */ -.formPane a { color: #3B5998; text-decoration: none; } -.formPane a:link { color: #3B5998; text-decoration: none; } -.formPane a:visited { color: #3B5998; text-decoration: none; } -.formPane a:hover { color: #3B5998; font-weight: bold} /* was text-decoration: underline; */ -.formPane a:active { color: #888; text-decoration: none; } +.formPane a { + color: var(--color-text-link); + text-decoration: none; +} +.formPane a:link { + color: var(--color-text-link); + text-decoration: none; +} +.formPane a:visited { + color: var(--color-text-link-visited); + text-decoration: none; +} +.formPane a:hover { + color: var(--color-text-link-hover); + font-weight: bold; +} /* was text-decoration: underline; */ +.formPane a:active { + color: var(--color-text-link-active); + text-decoration: none; +} /* ends */ @mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 4px, $color: $default) { -box-shadow: $x-axis $y-axis $blur $color; --webkit-box-shadow: $x-axis $y-axis $blur $color; --moz-box-shadow: $x-axis $y-axis $blur $color; --o-box-shadow: $x-axis $y-axis $blur $color; -} \ No newline at end of file + box-shadow: $x-axis $y-axis $blur $color; + -webkit-box-shadow: $x-axis $y-axis $blur $color; + -moz-box-shadow: $x-axis $y-axis $blur $color; + -o-box-shadow: $x-axis $y-axis $blur $color; +} diff --git a/src/styles/mashlib-style.ts b/src/styles/mashlib-style.ts deleted file mode 100644 index b0ab56bd..00000000 --- a/src/styles/mashlib-style.ts +++ /dev/null @@ -1,17 +0,0 @@ -export interface MashStyle { - dbLayout: string; - dbLayoutContent: string; - dbLayoutHeader: string; - dbLayoutFooter: string; - setStyle: (ele: HTMLElement, styleName: keyof Omit) => void; -} - -export const mashStyle: MashStyle = { - dbLayout: 'display: flex; flex-direction: column;', - dbLayoutContent: 'flex: 1 0 auto;', - dbLayoutHeader: 'flex-shrink: 0;', - dbLayoutFooter: 'flex-shrink: 0;', - setStyle: function setStyle(ele: HTMLElement, styleName: keyof Omit) { - ele.setAttribute('style', mashStyle[styleName]) - } -} \ No newline at end of file diff --git a/src/styles/themes.css b/src/styles/themes.css new file mode 100644 index 00000000..4615b259 --- /dev/null +++ b/src/styles/themes.css @@ -0,0 +1,8 @@ +/* +** ------SolidOS Themes------ +** Theme variables for light and dark modes +*/ + +@import url('./themes/light.css'); +/* @import url('./themes/dark.css'); */ + diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css new file mode 100644 index 00000000..c55c5b35 --- /dev/null +++ b/src/styles/themes/dark.css @@ -0,0 +1,171 @@ +/* +** Dark Theme +** Dark color scheme for SolidOS with high contrast and reduced eye strain +*/ + +html[data-theme="dark"] { + /* Background and Text */ + --color-background: #1e1e1e; + --color-text: #e0e0e0; + --color-text-secondary: #999; + --color-text-light: #555; + --color-text-link: #66b3ff; + --color-text-link-visited: #66b3ff; + --color-text-link-hover: #66b3ff; + --color-text-link-active: #aaa; + --color-text-answer: #66b3ff; + --color-text-muted: #bbb; + --color-text-dark-gray: #d4d4d4; + --color-text-blue: #7cb9ff; + --color-text-brown: #c4a660; + + /* Borders */ + --color-border: #444; + --color-border-dark: #555; + --color-border-darker: #333; + --color-border-light: #666; + --color-border-pale: #555; + + /* Status Colors */ + --color-selected-bg: #4a6e3a; + --color-warning: #ff6b6b; + --color-success-bg: #2a5f2a; + --color-success-border: #4db84d; + --color-failure-bg: #3a3a3a; + --color-failure-border: #ff6b6b; + + /* Info and Alert Colors */ + --color-info-bg: #2a2a5a; + --color-info-border: #6699ff; + --color-alert-bg: #5a5a2a; + --color-alert-border: #ccaa00; + --color-fetch-bg: #2a5a2a; + --color-request-bg: #6b6b00; + --color-error-bg: #3a3a3a; + --color-error-notice-bg: #5a3a3a; + --color-unparseable-bg: #6b5a00; + + /* Component Colors */ + --color-container-border: #555; + --color-iframe-bg: #2a2a2a; + --color-main-block-bg: #252525; + --color-nav-block-bg: #2a2a2a; + --color-nav-block-border: #555; + --color-category-bg: #1f2b1f; + --color-category-border: #555; + --color-category-class-bg: #2a5f2a; + --color-category-class-border: #4db84d; + --color-pubs-pane-bg: #3a3a2a; + --color-pubs-pane-border: #555; + --color-cv-pane-bg: #1f4a5a; + + /* Data Content Pane */ + --color-data-pane-border-top: #888; + --color-data-pane-border-side: #555; + --color-table-header-bg: #2a3a5a; + --color-table-result-bg: #252525; + --color-table-border-dark: #555; + + /* Notification Colors */ + --color-log-normal: #e0e0e0; + --color-log-info: #e0e0e0; + --color-log-warn: #e0e0e0; + --color-log-warn-bg: #5a5a2a; + --color-log-error: #e0e0e0; + --color-log-error-bg: #5a3a3a; + --color-log-message: #66bb66; + --color-log-debug: #e0e0e0; + --color-log-debug-bg: #2a3a5a; + + /* Suggestion List */ + --color-suggestion-bg: #2a2a2a; + --color-suggestion-border: #4db8ff; + --color-suggestion-link: #4db8ff; + --color-suggestion-selected-bg: #4db8ff; + --color-suggestion-selected-text: #1e1e1e; + + /* Photo Pane */ + --color-photo-border: #555; + --color-photo-tag-highlight: #2a4a7a; + --color-photo-tag-highlight-border: #5a6b4a; + --color-photo-thumb-border: #444; + + /* Menu and Tab Colors */ + --color-menu-bg: #2a2a2a; + --color-menu-item-text: #c4b4d4; + --color-menu-item-active: #4a5a7a; + --color-view-tab-bg: #252525; + --color-view-window-bg: #3a3a3a; + --color-query-select-bg: #3a3a3a; + --color-tab-inactive-bg: #2a2a2a; + --color-tab-inactive-border: #444; + --color-tab-inactive-border-light: #555; + --color-tab-inactive-text: #6b7baa; + --color-tab-active-bg: #3a3a3a; + --color-tab-active-border: #444; + --color-tab-active-border-light: #555; + --color-tab-active-text: #66b3ff; + + /* Special Highlights */ + --color-source-highlight: #6b6b00; + --color-hover-visibility: visible; + --color-hidden-visibility: hidden; + --color-mild-notice-bg: #3a3a2a; + --color-bottom-border-highlight: rgb(60%,80%,100%); + --color-col-close: #555; + --color-sort-arrow: #555; + + /* Typography */ + --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-size-base: 100%; + --font-size-strong: 120%; + --font-weight-normal: normal; + --font-weight-bold: bold; + --line-height-base: 1.5; + --line-height-tight: 1.4; + --line-height-loose: 1.6; + --letter-spacing-wide: 0.025em; + --font-size-sm: 0.875rem; + --font-size-lg: 1.125rem; + --font-size-xl: 1.25rem; + + /* Spacing and Sizing */ + --spacing-tiny: 0.05em; + --spacing-small: 0.1em; + --spacing-xs: 0.2em; + --spacing-sm: 0.3em; + --spacing-base: 0.5em; + --spacing-md: 0.8em; + --spacing-lg: 1em; + --spacing-xl: 2em; + --spacing-2xl: 3em; + --border-width-thin: 1px; + --border-width-medium: 2px; + --border-width-bold: 5px; + --border-radius-base: 0.5em; + --border-radius-lg: 0.75em; + --border-radius-full: 1em; + + /* Primary/Accent Colors */ + --color-primary: #B388FF; + --color-secondary: #4FC3F7; + --color-accent: #FFE082; + --color-error: #FF5252; + --color-success: #69F0AE; + + /* Card/Section Backgrounds */ + --color-card-bg: #2a2a2a; + --color-section-bg: #1a1a1a; + + /* Shadows */ + --box-shadow: 0 2px 8px rgba(0,0,0,0.3); + --box-shadow-sm: 0 1px 4px rgba(0,0,0,0.2); + + /* Accessibility */ + --min-touch-target: 44px; + --focus-ring-width: 2px; + --focus-indicator-width: 3px; + --animation-duration: 0.2s; + --animation-duration-slow: 0.3s; +} diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css new file mode 100644 index 00000000..28eeaa2d --- /dev/null +++ b/src/styles/themes/light.css @@ -0,0 +1,172 @@ +/* +** Light Theme (Default) +** Default color scheme for SolidOS +*/ + +:root { + /* Background and Text */ + --color-background: white; + --color-text: #333; + --color-text-secondary: #666; + --color-text-light: #aaa; + --color-text-link: #3B5998; + --color-text-link-visited: #3B5998; + --color-text-link-hover: #3B5998; + --color-text-link-active: #888; + --color-text-answer: #00c; + --color-text-muted: #444; + --color-text-dark-gray: #202; + --color-text-blue: #004; + --color-text-brown: #440; + + /* Borders */ + --color-border: #ccc; + --color-border-dark: #777; + --color-border-darker: #444; + --color-border-light: #aaa; + --color-border-pale: #ddd; + + /* Status Colors */ + --color-selected-bg: #8F3; + --color-warning: red; + --color-success-bg: #dfd; + --color-success-border: green; + --color-failure-bg: white; + --color-failure-border: red; + + /* Info and Alert Colors */ + --color-info-bg: #ccccff; + --color-info-border: #3399ff; + --color-alert-bg: #ffffdd; + --color-alert-border: yellow; + --color-fetch-bg: #eeffee; + --color-request-bg: yellow; + --color-error-bg: white; + --color-error-notice-bg: #fee; + --color-unparseable-bg: #ffcc00; + + /* Component Colors */ + --color-container-border: black; + --color-iframe-bg: white; + --color-main-block-bg: #fff; + --color-nav-block-bg: #eee; + --color-nav-block-border: gray; + --color-category-bg: #f8fff8; + --color-category-border: #777777; + --color-category-class-bg: #efe; + --color-category-class-border: green; + --color-pubs-pane-bg: #F2F6DA; + --color-pubs-pane-border: #777777; + --color-cv-pane-bg: LightSkyBlue; + + /* Data Content Pane */ + --color-data-pane-border-top: black; + --color-data-pane-border-side: #777; + --color-table-header-bg: #ddf; + --color-table-result-bg: #fff; + --color-table-border-dark: #777; + + /* Notification Colors */ + --color-log-normal: black; + --color-log-info: black; + --color-log-warn: black; + --color-log-warn-bg: #ffd; + --color-log-error: black; + --color-log-error-bg: #fdd; + --color-log-message: green; + --color-log-debug: black; + --color-log-debug-bg: #ddf; + + /* Suggestion List */ + --color-suggestion-bg: white; + --color-suggestion-border: navy; + --color-suggestion-link: navy; + --color-suggestion-selected-bg: navy; + --color-suggestion-selected-text: white; + + /* Photo Pane */ + --color-photo-border: #AAAAAA; + --color-photo-tag-highlight: #DDEEFF; + --color-photo-tag-highlight-border: #DDBB99; + --color-photo-thumb-border: #CCCCCC; + + /* Menu and Tab Colors */ + --color-menu-bg: #FFFFFF; + --color-menu-item-text: #654d6c; + --color-menu-item-active: #D1C6DA; + --color-view-tab-bg: #fff; + --color-view-window-bg: #ccc; + --color-query-select-bg: #ccc; + --color-tab-inactive-bg: #eee; + --color-tab-inactive-border: #ddd; + --color-tab-inactive-border-light: #aaa; + --color-tab-inactive-text: #99f; + --color-tab-active-bg: #ccc; + --color-tab-active-border: #ddd; + --color-tab-active-border-light: #aaa; + --color-tab-active-text: #22f; + + /* Special Highlights */ + --color-source-highlight: yellow; + --color-hover-visibility: visible; + --color-hidden-visibility: hidden; + --color-mild-notice-bg: #ffe; + --color-bottom-border-highlight: rgb(100%,65%,0%); + --color-col-close: #aaa; + --color-sort-arrow: #aaa; + --color-pending-edit: #bbb; + + /* Typography */ + --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-size-base: 100%; + --font-size-strong: 120%; + --font-weight-normal: normal; + --font-weight-bold: bold; + --line-height-base: 1.5; + --line-height-tight: 1.4; + --line-height-loose: 1.6; + --letter-spacing-wide: 0.025em; + --font-size-sm: 0.875rem; + --font-size-lg: 1.125rem; + --font-size-xl: 1.25rem; + + /* Spacing and Sizing */ + --spacing-tiny: 0.05em; + --spacing-small: 0.1em; + --spacing-xs: 0.2em; + --spacing-sm: 0.3em; + --spacing-base: 0.5em; + --spacing-md: 0.8em; + --spacing-lg: 1em; + --spacing-xl: 2em; + --spacing-2xl: 3em; + --border-width-thin: 1px; + --border-width-medium: 2px; + --border-width-bold: 5px; + --border-radius-base: 0.5em; + --border-radius-lg: 0.75em; + --border-radius-full: 1em; + + /* Primary/Accent Colors */ + --color-primary: #7C4DFF; + --color-secondary: #0077B6; + --color-accent: #FFD600; + --color-error: #B00020; + --color-success: #00C853; + + /* Card/Section Backgrounds */ + --color-card-bg: #FFFFFF; + --color-section-bg: #F5F5F5; + + /* Shadows */ + --box-shadow: 0 2px 8px rgba(124,77,255,0.08); + --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12); + + /* Accessibility */ + --min-touch-target: 44px; + --focus-ring-width: 2px; + --focus-indicator-width: 3px; + --animation-duration: 0.2s; + --animation-duration-slow: 0.3s; +} diff --git a/static/browse-test.html b/static/browse-test.html index 2ef6e111..2178e69f 100644 --- a/static/browse-test.html +++ b/static/browse-test.html @@ -33,7 +33,7 @@ const goButton = dom.getElementById('goButton') const loginButtonArea = document.getElementById("loginButtonArea"); const webIdArea = dom.getElementById('webId') - const banner = dom.getElementById('inputArea') + const inputArea = dom.getElementById('inputArea') uriField.addEventListener('keyup', function (e) { if (e.keyCode === 13) { @@ -59,11 +59,8 @@ const logoutButton = loginButtonArea.querySelector('input'); logoutButton.value = "Logout"; let displayId = `<${me.value}>`; - webIdArea.innerHTML = displayId; - banner.style.backgroundColor="#bbccbb"; - } else { - banner.style.backgroundColor="#ccbbbb"; - } + webIdArea.innerHTML = displayId; + } loginButtonArea.style.display="inline-block"; } @@ -87,33 +84,52 @@ + -
-
- The SolidOS Databrowser + +
+ +
+ Viewing
-
- Viewing -
-
- As user <public user> +
+ As user <public user> +
- - -
-
-
-
- - +
+ + + + + + + + + + +
+
+
+ +
diff --git a/static/browse.html b/static/browse.html index f7c45657..5adc74cd 100644 --- a/static/browse.html +++ b/static/browse.html @@ -87,33 +87,51 @@ + -
-
- The SolidOS Databrowser + +
+
+ Viewing
-
- Viewing -
-
- As user <public user> +
+ As user <public user> +
- - -
-
-
-
- - +
+ + + + + + + + + + +
+
+
+ +