diff --git a/.github/workflows/format-lint-check.yml b/.github/workflows/format-lint-check.yml index b4f59c4..6e238d6 100644 --- a/.github/workflows/format-lint-check.yml +++ b/.github/workflows/format-lint-check.yml @@ -29,6 +29,17 @@ jobs: - name: Check Prettier formatting run: npm run format:check + sass: + name: Compile Sass + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - name: Node Setup + uses: ./.github/actions/setup-node + + - name: Compile Sass + run: npm run build:css + defaults: run: shell: bash diff --git a/.github/workflows/publish-dev-release.yml b/.github/workflows/publish-dev-release.yml index e00daf7..5ba34d5 100644 --- a/.github/workflows/publish-dev-release.yml +++ b/.github/workflows/publish-dev-release.yml @@ -54,6 +54,12 @@ jobs: - name: Build Packs uses: ./.github/actions/build-packs + - name: Node Setup + uses: ./.github/actions/setup-node + + - name: Build CSS + run: npm run build:css + - name: Substitute Download Link uses: TomaszKandula/variable-substitution@v1.0.1 with: diff --git a/.github/workflows/publish-prod-release.yml b/.github/workflows/publish-prod-release.yml index a9337b7..d65922c 100644 --- a/.github/workflows/publish-prod-release.yml +++ b/.github/workflows/publish-prod-release.yml @@ -24,6 +24,12 @@ jobs: - name: Build Packs uses: ./.github/actions/build-packs + - name: Node Setup + uses: ./.github/actions/setup-node + + - name: Build CSS + run: npm run build:css + - name: Get Version id: get_version uses: dhkatz/get-version-action@v3.0.0 diff --git a/.gitignore b/.gitignore index 8e5ea01..7f2d7f2 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,7 @@ deltagreen.lock # Ignore npm modules node_modules + +# Sass build output (source lives in scss/) +css/*.css +css/*.css.map diff --git a/.prettierignore b/.prettierignore index e7492be..b5da478 100644 --- a/.prettierignore +++ b/.prettierignore @@ -13,3 +13,7 @@ packs/** # Ignore html/handlebars files as a different formatter is used. *.html *.hbs + +# Generated from scss/ via npm run build:css +css/*.css +css/*.css.map diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 31fe31f..4eddbc4 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -5,7 +5,8 @@ "esbenp.prettier-vscode", "monosans.djlint", "DavidAnson.vscode-markdownlint", - "EditorConfig.EditorConfig" + "EditorConfig.EditorConfig", + "syler.sass-indented" ], "unwantedRecommendations": [] } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9eca1cf..1b9b03f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,7 +12,7 @@ ### Formatters -- JavaScript, JSON, CSS: [Prettier](https://prettier.io/docs/install) +- JavaScript, JSON, SCSS: [Prettier](https://prettier.io/docs/install) - Handlebars: [DJLint](https://djlint.com/docs/getting-started/) ### Linters @@ -20,12 +20,13 @@ - JavaScript: [Eslint](https://eslint.org/docs/latest/use/getting-started) - Markdown: [Markdownlint](https://github.com/markdownlint/markdownlint) - Handlebars: DJLint (see above) -- CSS: VSCode Built-in +- SCSS: VSCode Built-in ### Misc - [EditorConfig](https://editorconfig.org/) - Used to standardize file configurations like tabs vs. spaces, end-of-line characters, etc. - [FVTT CLI](https://github.com/foundryvtt/foundryvtt-cli) - Used to package document JSON files into LevelDB packs, and vice-versa. In simpler terms, this lets us convert documents in compendia into JSON files, OR turn those JSON files back into documents in the compendia. +- [Sass](https://sass-lang.com/) (via npm) - Compiles `scss/` source into the `css/` files Foundry loads at runtime. ### VSCode Extensions @@ -81,7 +82,25 @@ npm -v 2. Install `djlint` (doesn't come through NPM). This requires `Python` and `pip`; instructions for installing these are specific to your operating system, and beyond the scope of this guide. -### 4. Set Up Your Code Editor +### 4. Compile Stylesheets + +Styles live in [`scss/`](scss/). Foundry loads compiled output from [`css/`](css/), which is **not** committed to git — you must build it locally. + +1. Run a one-off compile (required after a fresh clone, or before testing if you are not using watch mode): + + ```bash + npm run build:css + ``` + +2. While actively editing styles, run Sass in watch mode in a **separate terminal** (leave it running): + + ```bash + npm run watch:css + ``` + + Edit files under `scss/`; output is written to `css/`. Foundry's hot reload (configured in `system.json`) picks up changes to the compiled CSS when watch mode is running. + +### 5. Set Up Your Code Editor We recommend [Visual Studio Code](https://code.visualstudio.com/) for working on this project, but you're welcome to use any editor. The following extensions are **auto-recommended** by VSCode, but here they are again for special instructions, manual installation, or reference. @@ -106,7 +125,7 @@ Once these extensions are installed, your editor should automatically highlight Your pull request will automatically be checked for linting and formatting via GitHub Actions. If your changes don't pass, they can't be merged (see [Branching and Pull Requests](#branching-commits-and-pull-requests)). -### 5. Set Up a Local Foundry VTT Test Instance +### 6. Set Up a Local Foundry VTT Test Instance 1. We **highly** recommend setting up a separate instance of Foundry from your main installation. This way you are not at risk of breaking things in live worlds. @@ -136,7 +155,7 @@ Your pull request will automatically be checked for linting and formatting via G mklink /D "%localappdata%/FoundryVTT/Data/systems/deltagreen" "%cd%/delta-green-foundry-vtt-system" ``` -### 6. Start Developing +### 7. Start Developing - Use the developer console (`F12` in most browsers) to inspect logs and debug issues. - Make changes to code and refresh the browser to see them take effect. @@ -448,6 +467,8 @@ Make sure your code is clean and ready: - ✅ You’ve manually tested your change in a local Foundry world. - ✅ `npm run lint` shows no errors - ✅ `npm run format:check` passes +- ✅ `npm run build:css` succeeds (required if you changed anything under `scss/`) +- ✅ If you changed styles, you tested with `npm run watch:css` running and confirmed the UI looks correct - ✅ Your editor doesn’t show linting/formatting warnings. We use a GitHub Action to enforce code quality. If your code doesn’t meet the linting and formatting standards, your PR cannot be merged until those checks pass. @@ -467,8 +488,9 @@ It is difficult to create a one-size-fits-all procedure for testing, because eac 1. Prepare your environment + - **Styles:** On a fresh clone, run `npm run build:css` (or keep `npm run watch:css` running) so Foundry has compiled CSS to load. - Test in a safe environment (**HIGHLY RECOMMENDED**): - - We highly recommend [setting up an installation of Foundry separate from your main instance](#5-set-up-a-local-foundry-vtt-test-instance). + - We highly recommend [setting up an installation of Foundry separate from your main instance](#6-set-up-a-local-foundry-vtt-test-instance). - This way, you are never at risk of breaking anything in your main worlds. - If you do not follow the above advice, be aware that opening your main world while you have an in-progress (non-release) version of the system installed **will almost certainly break things in a way that cannot be fixed**. To go back to the release version of the system, uninstall the test build, and reinstall from the in-Foundry system browser. - Update to the target build: diff --git a/css/.gitkeep b/css/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/package-lock.json b/package-lock.json index cb4ba25..5252134 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,9 @@ "eslint-plugin-import": "^2.28.1", "eslint-plugin-prettier": "^5.0.0" }, - "devDependencies": {} + "devDependencies": { + "sass": "^1.89.0" + } }, "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", @@ -173,6 +175,348 @@ "node": ">= 8" } }, + "node_modules/@parcel/watcher": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz", + "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^2.0.3", + "is-glob": "^4.0.3", + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.5.6", + "@parcel/watcher-darwin-arm64": "2.5.6", + "@parcel/watcher-darwin-x64": "2.5.6", + "@parcel/watcher-freebsd-x64": "2.5.6", + "@parcel/watcher-linux-arm-glibc": "2.5.6", + "@parcel/watcher-linux-arm-musl": "2.5.6", + "@parcel/watcher-linux-arm64-glibc": "2.5.6", + "@parcel/watcher-linux-arm64-musl": "2.5.6", + "@parcel/watcher-linux-x64-glibc": "2.5.6", + "@parcel/watcher-linux-x64-musl": "2.5.6", + "@parcel/watcher-win32-arm64": "2.5.6", + "@parcel/watcher-win32-ia32": "2.5.6", + "@parcel/watcher-win32-x64": "2.5.6" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz", + "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz", + "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz", + "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz", + "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz", + "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==", + "cpu": [ + "arm" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz", + "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==", + "cpu": [ + "arm" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz", + "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz", + "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz", + "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz", + "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz", + "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz", + "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz", + "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/picomatch": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/@pkgr/utils": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz", @@ -580,6 +924,22 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/classic-level": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/classic-level/-/classic-level-1.4.1.tgz", @@ -743,6 +1103,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "engines": { + "node": ">=8" + } + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -1658,6 +2029,13 @@ "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==", "license": "MIT" }, + "node_modules/immutable": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.6.tgz", + "integrity": "sha512-q1swsS8K7L8usSHuOqF2TAoCCkonYz0SG38wLAggaa4Wml70zixIvt2ql4coQ2C2B3hTjltJry4r6bULwgAXLQ==", + "dev": true, + "license": "MIT" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -2297,6 +2675,14 @@ "@seald-io/nedb": "^4.0.2" } }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/node-gyp-build": { "version": "4.8.4", "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz", @@ -2622,6 +3008,20 @@ } ] }, + "node_modules/readdirp": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz", + "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/regexp.prototype.flags": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz", @@ -2846,6 +3246,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sass": { + "version": "1.100.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz", + "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": "^5.0.0", + "immutable": "^5.1.5", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=20.19.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -2904,6 +3325,16 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", @@ -3428,6 +3859,132 @@ "fastq": "^1.6.0" } }, + "@parcel/watcher": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz", + "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==", + "dev": true, + "optional": true, + "requires": { + "@parcel/watcher-android-arm64": "2.5.6", + "@parcel/watcher-darwin-arm64": "2.5.6", + "@parcel/watcher-darwin-x64": "2.5.6", + "@parcel/watcher-freebsd-x64": "2.5.6", + "@parcel/watcher-linux-arm-glibc": "2.5.6", + "@parcel/watcher-linux-arm-musl": "2.5.6", + "@parcel/watcher-linux-arm64-glibc": "2.5.6", + "@parcel/watcher-linux-arm64-musl": "2.5.6", + "@parcel/watcher-linux-x64-glibc": "2.5.6", + "@parcel/watcher-linux-x64-musl": "2.5.6", + "@parcel/watcher-win32-arm64": "2.5.6", + "@parcel/watcher-win32-ia32": "2.5.6", + "@parcel/watcher-win32-x64": "2.5.6", + "detect-libc": "^2.0.3", + "is-glob": "^4.0.3", + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.3" + }, + "dependencies": { + "picomatch": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "dev": true, + "optional": true + } + } + }, + "@parcel/watcher-android-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz", + "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==", + "dev": true, + "optional": true + }, + "@parcel/watcher-darwin-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz", + "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==", + "dev": true, + "optional": true + }, + "@parcel/watcher-darwin-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz", + "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==", + "dev": true, + "optional": true + }, + "@parcel/watcher-freebsd-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz", + "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-arm-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz", + "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-arm-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz", + "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-arm64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz", + "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-arm64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz", + "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-x64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz", + "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-x64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz", + "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==", + "dev": true, + "optional": true + }, + "@parcel/watcher-win32-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz", + "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==", + "dev": true, + "optional": true + }, + "@parcel/watcher-win32-ia32": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz", + "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==", + "dev": true, + "optional": true + }, + "@parcel/watcher-win32-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz", + "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==", + "dev": true, + "optional": true + }, "@pkgr/utils": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz", @@ -3692,6 +4249,15 @@ "supports-color": "^7.1.0" } }, + "chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "requires": { + "readdirp": "^5.0.0" + } + }, "classic-level": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/classic-level/-/classic-level-1.4.1.tgz", @@ -3805,6 +4371,13 @@ "object-keys": "^1.1.1" } }, + "detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "dev": true, + "optional": true + }, "doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -4439,6 +5012,12 @@ "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==" }, + "immutable": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.6.tgz", + "integrity": "sha512-q1swsS8K7L8usSHuOqF2TAoCCkonYz0SG38wLAggaa4Wml70zixIvt2ql4coQ2C2B3hTjltJry4r6bULwgAXLQ==", + "dev": true + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -4851,6 +5430,13 @@ "@seald-io/nedb": "^4.0.2" } }, + "node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "optional": true + }, "node-gyp-build": { "version": "4.8.4", "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz", @@ -5056,6 +5642,12 @@ "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==" }, + "readdirp": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz", + "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==", + "dev": true + }, "regexp.prototype.flags": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz", @@ -5190,6 +5782,18 @@ "is-regex": "^1.2.1" } }, + "sass": { + "version": "1.100.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz", + "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==", + "dev": true, + "requires": { + "@parcel/watcher": "^2.4.1", + "chokidar": "^5.0.0", + "immutable": "^5.1.5", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -5233,6 +5837,12 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, + "source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true + }, "string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", diff --git a/package.json b/package.json index 04ba298..affe086 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,9 @@ "main": "deltagreen.js", "scripts": { "lint": "eslint .", - "format:check": "prettier --check ." + "format:check": "prettier --check .", + "build:css": "sass scss:css --style=expanded --no-source-map", + "watch:css": "sass scss:css --watch --style=expanded --source-map" }, "repository": { "type": "git", @@ -25,5 +27,7 @@ "eslint-config-prettier": "^9.0.0", "@foundryvtt/foundryvtt-cli": "^1.1.0" }, - "devDependencies": {} + "devDependencies": { + "sass": "^1.89.0" + } } diff --git a/scss/_editor.scss b/scss/_editor.scss new file mode 100644 index 0000000..914102b --- /dev/null +++ b/scss/_editor.scss @@ -0,0 +1,28 @@ +/* TinyMCE iframe (legacy); theme is not available inside the iframe — keep Special Elite. */ +.tox .tox-editor-container, +.tox .tox-edit-area { + font-family: "SpecialElite", sans-serif !important; +} + +.cowboy-style { + .editor-host .editor .editor-content, + .editor-host prose-mirror .editor-content, + .editor-host prose-mirror .editor-content .ProseMirror, + .editor-host .tox, + .editor-host .tox-tinymce, + .editor-host .tox .tox-edit-area { + font-family: "SpecialElite", sans-serif !important; + } +} + +.outlaw-style, +.program-style { + .editor-host .editor .editor-content, + .editor-host prose-mirror .editor-content, + .editor-host prose-mirror .editor-content .ProseMirror, + .editor-host .tox, + .editor-host .tox-tinymce, + .editor-host .tox .tox-edit-area { + font-family: "PublicSans", sans-serif !important; + } +} diff --git a/scss/_fonts.scss b/scss/_fonts.scss new file mode 100644 index 0000000..f79ddd9 --- /dev/null +++ b/scss/_fonts.scss @@ -0,0 +1,39 @@ +@import url("https://fonts.googleapis.com/css2?family=Martel:wght@400;800&family=Roboto:wght@300;400;500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Didact+Gothic"); + +@font-face { + font-family: "atwriter"; + src: url("../assets/font/another-typewriter/atwriter.ttf") format("truetype"); +} + +@font-face { + font-family: TypeWriterCondensed; + src: url("../assets/font/typewriter-condensed/typewcond_regular.otf") + format("opentype"); +} + +@font-face { + font-family: TypeWriterCondensed; + font-weight: bold; + src: url("../assets/font/typewriter-condensed/typewcond_bold.otf") + format("opentype"); +} + +@font-face { + font-family: TypeWriterCondensed; + font-weight: 600; + src: url("../assets/font/typewriter-condensed/typewcond_demi.otf") + format("opentype"); +} + +@font-face { + font-family: "SpecialElite"; + src: url("../assets/font/special_elite/SpecialElite-Regular.ttf") + format("truetype"); +} + +@font-face { + font-family: "PublicSans"; + src: url("../assets/font/public-sans/PublicSans-VariableFont_wght.ttf") + format("truetype"); +} diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100644 index 0000000..b6670a2 --- /dev/null +++ b/scss/_mixins.scss @@ -0,0 +1,60 @@ +@mixin dg-window-content { + scrollbar-color: #215112 #111 !important; + padding: 0.5rem; + color: var(--dg-ink); +} + +@mixin dg-window-form-inputs { + input[type="checkbox"]:checked::before { + color: var(--dg-ink); + } + + input[type="text"], + input[type="number"], + input[type="password"] { + height: unset; + line-height: 1.5rem; + } +} + +@mixin dg-window-form-inputs-with-select { + @include dg-window-form-inputs; + + select { + height: unset; + line-height: 1.5rem; + } +} + +@mixin item-sheet-grid-2col { + display: grid; + grid-template-columns: 25% 75%; + align-items: center; + justify-content: center; + text-align: center; + grid-gap: 5px; +} + +@mixin item-sheet-horizontal-grid($label-width: 100px) { + display: grid; + grid-template-columns: $label-width auto; + align-items: center; + text-align: left; + column-gap: 10px; + row-gap: 10px; + padding-bottom: 10px; + padding-right: 5px; +} + +@mixin dg-dark-button { + background-color: var(--dg-surface-dark); + color: var(--dg-on-dark); + border: 1px solid var(--dg-surface-dark); + font-weight: bold; + + &:hover:not(:disabled) { + background-color: var(--dg-surface-dark-hover); + color: var(--dg-on-dark); + border-color: var(--dg-surface-dark-hover); + } +} diff --git a/scss/_utilities.scss b/scss/_utilities.scss new file mode 100644 index 0000000..e6528a2 --- /dev/null +++ b/scss/_utilities.scss @@ -0,0 +1,214 @@ +/* Character Sheet Style Options */ + +.window-content.outlaw-style, +.window-content.cowboy-style { + background: url("../assets/img/StainedPlainPaper10b.webp") !important; + background-size: 100% !important; +} + +.window-content.program-style { + background: url("../assets/img/StainedPlainPaper10a.webp") !important; + background-size: 100% !important; +} + +.cowboy-style { + font-family: "SpecialElite", sans-serif !important; +} + +.outlaw-style, +.program-style { + font-family: "PublicSans", sans-serif !important; +} + +.outlaw-style .tabs [data-action="tab"], +.cowboy-style .tabs [data-action="tab"] { + background: rgba(173, 151, 101, 0.3); +} + +.program-style .tabs [data-action="tab"] { + background: rgba(138, 136, 133, 0.3); +} + +.old-paper-background { + background: url("../assets/img/StainedPlainPaper10.webp") !important; +} + +.default-parchment-background { + background: url("/ui/parchment.jpg") repeat !important; +} + +.typewriter-condensed-font { + font-family: "TypeWriterCondensed", sans-serif !important; +} + +.martel-font { + font-family: "Martel", sans-serif !important; +} + +.signika-font { + font-family: "Signika", sans-serif !important; +} + +.atwriter-font { + font-family: "atwriter", sans-serif !important; +} + +.special-elite-font { + font-family: "SpecialElite", sans-serif !important; +} + +.public-sans-font { + font-family: "PublicSans", sans-serif !important; +} + +.rollable:hover, +.rollable:focus { + color: var(--dg-ink); + text-shadow: 0 0 5px #374e13; + cursor: pointer; +} + +button.rollable.inline-roll { + display: inline; + margin: 0; + padding: 0; + border: none; + background: transparent; + font: inherit; + color: var(--dg-ink); + line-height: inherit; + vertical-align: baseline; + + > i { + color: inherit; + } +} + +.not-rollable { + color: #999999; +} + +input.breaking-point-hit { + color: rgb(255, 255, 255); + background-color: rgb(117, 0, 0); + font-weight: bold; +} + +.dg-red { + color: rgb(117, 0, 0); +} + +.bottom-margin-5px { + margin-bottom: 5px !important; +} + +.grid-1col { + display: grid; + grid-column: span 1 / span 1; + gap: 3px; +} + +.grid, +.grid-2col { + display: grid; + grid-column: span 2 / span 2; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 3px; + margin: 0px 0; + padding: 0; +} + +@for $i from 3 through 12 { + .grid-#{$i}col { + grid-column: span #{$i} / span #{$i}; + grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); + } +} + +/* grid-6col historically used 5 columns — preserve behavior */ +.grid-6col { + grid-column: span 5 / span 5; + grid-template-columns: repeat(5, minmax(0, 1fr)); +} + +/* If the user wishes to sort skills by column, we need to +explicitly define a number of rows, rather than columns. */ +.grid-13row { + grid-template-rows: repeat(13, minmax(0, auto)) !important; + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; + grid-auto-flow: column !important; +} + +.flex-group-center, +.flex-group-left, +.flex-group-right { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + padding: 2px; +} + +.flex-thin-border { + border: 1px solid #999; + border-radius: 2px; + border-left-color: darkslategray; + border-left-width: 4px; +} + +/* Make sure Special Training boxes are the same height + as all other skill boxes */ +.flex-thin-border.special-training-box { + min-height: 27px; +} + +.flex-mid-border { + border: 1.5px solid rgb(0, 0, 0); + border-radius: 2px; +} + +.flex-group-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: left; + padding: 0; +} + +.flex-group-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: right; +} + +.flex-center { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; +} + +.flex-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.horizontal-flex-column { + display: flex; + flex-direction: column; +} + +.flex-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: left; +} diff --git a/scss/_variables.scss b/scss/_variables.scss new file mode 100644 index 0000000..0056d74 --- /dev/null +++ b/scss/_variables.scss @@ -0,0 +1,7 @@ +/* Color tokens — near-black ink and dark surfaces (avoid pure #000) */ +:root { + --dg-ink: #212121; + --dg-surface-dark: #1a1a1a; + --dg-surface-dark-hover: #2a2a2a; + --dg-on-dark: #f5f5f0; +} diff --git a/scss/deltagreen.scss b/scss/deltagreen.scss new file mode 100644 index 0000000..90ae16b --- /dev/null +++ b/scss/deltagreen.scss @@ -0,0 +1,16 @@ +@use "fonts"; +@use "variables"; +@use "utilities"; +@use "editor"; +@use "deltagreen/global"; +@use "deltagreen/character-sheet"; +@use "deltagreen/active-effects"; +@use "deltagreen/character-sheet-cont"; +@use "deltagreen/prose-mirror"; +@use "deltagreen/item-sheets"; +@use "deltagreen/foundry-theme"; +@use "deltagreen/chat-cards"; +@use "deltagreen/agent-sheet"; +@use "deltagreen/stats-edit"; +@use "deltagreen/effects-tab"; +@use "deltagreen/profession"; diff --git a/scss/deltagreen/_active-effects.scss b/scss/deltagreen/_active-effects.scss new file mode 100644 index 0000000..78ed368 --- /dev/null +++ b/scss/deltagreen/_active-effects.scss @@ -0,0 +1,76 @@ +/* AE-backed inputs: overlay shows effective value; focus reveals base value for editing */ +.deltagreen .ae-input-host { + position: relative; + display: inline-flex; + flex: 0 0 40px; + margin: 0 5px; + height: auto; + align-self: center; + min-width: 0; + box-sizing: border-box; +} + +.deltagreen .ae-input-host input { + position: relative; + z-index: 0; + width: 100%; + margin: 0; +} + +/* Typography + inset come from the input (mirrored in JS); only layer + AE colors here */ +.deltagreen .ae-input-host .ae-input-display { + position: absolute; + z-index: 1; + display: block; + overflow: hidden; + box-sizing: border-box; + pointer-events: none; + border: none; + background: transparent; +} + +.deltagreen .stats .physical-stats-outer-grid-3col .ae-input-host--stat { + display: block; + width: 100%; + min-width: 0; + max-width: 100%; + flex: none; + margin: 1px; + height: auto; + align-self: auto; + box-sizing: border-box; +} + +.deltagreen .stats .ae-input-host--stat input { + width: 100%; + margin: 0; +} + +.deltagreen .left-bar .stats .agent-left-bar-stat-grid { + grid-template-columns: auto 1fr; +} + +/* Hide input text only when an AE overlay is showing the effective value */ +.deltagreen .ae-input-host:has(.ae-input-display):not(:focus-within) input { + color: transparent; + -webkit-text-fill-color: transparent; + caret-color: transparent; +} + +.deltagreen .ae-input-host:has(.ae-input-display):focus-within input { + color: var(--input-text-color); + -webkit-text-fill-color: var(--input-text-color); + caret-color: auto; +} + +.deltagreen .ae-input-host:focus-within .ae-input-display { + display: none; +} + +.deltagreen .ae-input-host .ae-input-display.ae-mod-increase { + color: #00a82d; +} + +.deltagreen .ae-input-host .ae-input-display.ae-mod-decrease { + color: #ff8a8a; +} diff --git a/scss/deltagreen/_agent-sheet.scss b/scss/deltagreen/_agent-sheet.scss new file mode 100644 index 0000000..6cf977e --- /dev/null +++ b/scss/deltagreen/_agent-sheet.scss @@ -0,0 +1,581 @@ +.agent-sheet { + .window-content { + display: grid; + grid-template-columns: 240px 1fr; + grid-template-rows: auto 1fr; + column-gap: 8px; + width: 100%; + height: 100%; + } + + .left-bar { + grid-column: 1; + grid-row: 1 / -1; + padding: 3px; + } + + .left-bar .profession-subname-link { + display: block; + box-sizing: border-box; + padding: 1px 2px; + line-height: var(--line-height-18, 1.125rem); + text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .stats-wrapper { + margin-top: 8px; + margin-bottom: 8px; + } + + .mb-8 { + margin-bottom: 8px; + } + + .luck { + display: flex; + justify-content: center; + } + + .luck .bolded-label { + text-align: center; + } + + /* Override core nav.tabs gap/space-evenly and v1-compat space-around so tabs can overlap */ + .window-content > nav.sheet-tabs { + grid-column: 2; + grid-row: 1; + align-self: start; + width: 100%; + min-width: 0; + box-sizing: border-box; + margin-bottom: 0; + position: relative; + z-index: 2; + display: flex; + flex-wrap: nowrap; + gap: 0; + justify-content: flex-start; + overflow-x: auto; + overflow-y: hidden; + } + + .tabs [data-action="tab"] { + flex: 1 1 0; + min-width: 0; + position: relative; + text-align: center; + margin-left: -14px; + padding-inline: 3px; + font-size: 11px; + overflow: visible; + box-shadow: + 0 1px 2px rgba(0, 0, 0, 0.16), + -1px 0 2px rgba(0, 0, 0, 0.1), + 1px 0 2px rgba(0, 0, 0, 0.1); + + > span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &:first-child { + margin-left: 0; + } + + &:nth-child(1) { + z-index: 1; + } + &:nth-child(2) { + z-index: 2; + } + &:nth-child(3) { + z-index: 3; + } + &:nth-child(4) { + z-index: 4; + } + &:nth-child(5) { + z-index: 5; + } + &:nth-child(6) { + z-index: 6; + } + &:nth-child(7) { + z-index: 7; + } + } + + /* Opaque tab fills so stacked borders only show on the tab in front (all themes) */ + .window-content.program-style { + --dg-agent-tab-inactive-bg: rgb(186, 184, 181); + --dg-agent-tab-active-bg: var(--dg-surface-dark); + --dg-agent-tab-active-color: var(--dg-on-dark); + } + + .window-content.cowboy-style, + .window-content.outlaw-style { + --dg-agent-tab-inactive-bg: rgb(210, 190, 150); + --dg-agent-tab-active-bg: rgb(194, 168, 110); + --dg-agent-tab-active-color: var(--dg-ink); + } + + .window-content .tabs [data-action="tab"]:not(.active) { + background: var(--dg-agent-tab-inactive-bg); + } + + .window-content .tabs [data-action="tab"].active { + background: var(--dg-agent-tab-active-bg); + color: var(--dg-agent-tab-active-color); + } + + /* Pin the about tab to the right without opening a gap before it */ + .tabs [data-action="tab"][data-tab="effects"] { + margin-right: auto; + } + + .tabs [data-action="tab"][data-tab="about"] { + flex: 0 0 auto; + min-width: unset; + margin-left: -14px; + } + + .window-content > [data-application-part="rightBar"], + .window-content > .right-bar { + grid-column: 2; + grid-row: 2; + width: 100%; + min-height: 0; + box-sizing: border-box; + padding-right: 0; + margin-right: 0; + } + + .right-bar { + display: flex; + flex-direction: column; + min-width: 0; + min-height: 0; + height: 100%; + overflow: hidden; + } + + .right-bar > .tab { + flex: 1 1 auto; + min-width: 0; + min-height: 0; + box-sizing: border-box; + } + + /* Match V1: flat top edge on panel; active tab overlaps the panel top border */ + .right-bar > .tab.active { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + .tabs [data-action="tab"].active { + z-index: 10; + margin-bottom: -2px; + padding-bottom: 2px; + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.22), + -2px 0 5px rgba(0, 0, 0, 0.14), + 2px 0 5px rgba(0, 0, 0, 0.14); + } + + .profile-img { + width: 100%; + height: 194px; + object-fit: cover; + object-position: center top; + } + + .physical-stats-outer-grid-3col { + display: contents; + } + + .physical-stats-outer-grid-3col, + .resources { + font-size: 12px; + } + + .resources { + margin-bottom: 8px; + } + + .resources .resource-inner-grid-3col { + grid-template-columns: auto auto auto; + justify-content: center; + column-gap: 2px; + } + + .resources .resource-inner-grid-3col input { + box-sizing: border-box; + width: 1.5rem; + height: 1.5rem; + padding: 1px; + line-height: calc(1.5rem - 4px); + } + + .resources .resource-inner-grid-3col .max-resource-value { + box-sizing: border-box; + width: 1.5rem; + height: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; + } + + .breaking-point-inline { + display: grid; + grid-template-columns: 1fr auto auto; + align-items: center; + column-gap: 6px; + border: none; + padding: 0; + background: none; + + .breaking-point-label { + margin: 0; + white-space: nowrap; + justify-self: start; + } + + .breaking-point-input { + width: 2.5rem; + min-width: 2.5rem; + max-width: 2.5rem; + padding: 1px; + text-align: center; + font-size: 12px; + justify-self: end; + } + + .fa-refresh { + text-decoration: none; + font-size: 12px; + justify-self: end; + } + } + + .exhausted-section.resource { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + column-gap: 8px; + row-gap: 4px; + border: none; + margin-bottom: 8px; + padding: 0; + background: none; + + .exhaustion-label { + justify-self: start; + } + + .labeled-resource-checkbox, + input[type="number"] { + justify-self: end; + } + } + + .stats { + input { + margin: 1px; + } + + .ae-input-host--stat input { + margin: 0; + } + } + + .skill-util-buttons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: stretch; + gap: 8px; + width: 100%; + margin: 5px 0; + box-sizing: border-box; + + .action-pill { + flex: 1 1 0; + min-width: 0; + margin: 0; + text-align: center; + } + + .typed-skill-add { + margin-right: 0; + } + + a[data-action="applySkillImprovements"] { + float: none; + } + + .custom-skills-edit-toggle { + flex: 0 0 auto; + min-width: 2rem; + padding-inline: 6px; + } + } + + .custom-skill-group-label { + display: flex; + align-items: center; + justify-content: center; + min-height: 1.35rem; + height: auto; + margin-top: 4px; + margin-bottom: 4px; + padding: 2px 4px; + font-size: 0.7rem; + font-weight: bold; + letter-spacing: 0.02em; + text-transform: uppercase; + line-height: 1.2; + } + + &.custom-skills-edit-mode .custom-skills-edit-toggle { + background-color: rgba(0, 0, 0, 0.45); + outline: 1px solid var(--dg-ink); + } + + &.custom-skills-edit-mode .program-style .custom-skills-edit-toggle { + background-color: var(--dg-surface-dark); + color: var(--dg-on-dark); + } + + .typed-skill-row { + min-height: 27px; + align-items: center; + } + + .custom-skill-controls-slot { + position: relative; + display: flex; + flex: 0 0 70px; + min-width: 70px; + min-height: 1.2rem; + align-items: center; + justify-content: flex-end; + } + + .custom-skill-play-controls { + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: flex-end; + min-height: 1.2rem; + } + + .custom-skill-controls-slot .custom-skill-edit-controls { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 2px; + margin: 0; + } + + .special-training-box .custom-skill-edit-controls { + position: static; + flex: 0 0 auto; + align-items: center; + gap: 2px; + margin: 0; + } + + &:not(.custom-skills-edit-mode) .custom-skill-edit-controls { + display: none; + } + + &.custom-skills-edit-mode .custom-skill-play-controls { + visibility: hidden; + pointer-events: none; + } + + .typed-skills-columns { + align-items: start; + } + + .typed-skills-column { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; + } + + .skill-and-training-controls { + display: flex; + flex-direction: row; + flex: 0 0 auto; + gap: 2px; + } + + .scenario-information-grid { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + column-gap: 12px; + row-gap: 8px; + align-items: start; + width: 100%; + box-sizing: border-box; + padding-bottom: 10px; + } + + .scenario-information-left, + .scenario-information-right { + min-width: 0; + } + + .scenario-information-left.bio-grid-2col { + grid-template-columns: minmax(4rem, max-content) minmax(0, 1fr); + padding-bottom: 0; + } + + .scenario-information-corruption { + display: block; + flex: none; + max-width: 100%; + box-sizing: border-box; + padding-bottom: 10px; + } + + .scenario-information-yellow-sign-row { + display: grid; + grid-template-columns: max-content max-content max-content; + column-gap: 8px; + align-items: center; + flex: none; + width: fit-content; + max-width: 100%; + } + + .scenario-information-corruption-row { + display: grid; + grid-template-columns: max-content max-content; + column-gap: 8px; + align-items: center; + flex: none; + width: fit-content; + max-width: 100%; + margin-top: 8px; + } + + .scenario-information-yellow-sign-row > *, + .scenario-information-corruption-row > * { + flex: none; + } + + .scenario-information-corruption-label { + display: inline-flex; + align-items: baseline; + gap: 0; + flex: none; + white-space: nowrap; + } + + .scenario-information-corruption-label > .yellow-king { + flex: none; + display: inline-block; + } + + .scenario-information-corruption-row input[type="number"] { + width: 2.5rem; + min-width: 2.5rem; + } + + .adaptation-grid-4col { + display: grid; + grid-template-columns: 1fr 25px 25px 25px; + align-content: center; + align-items: center; + row-gap: 0; + margin-bottom: 0; + + > label { + justify-self: start; + } + + > input.labeled-resource-checkbox { + justify-self: end; + } + } + + .adaptation-grid-4col .adapted-label-slot { + grid-column: 1 / -1; + min-height: 1.35em; + } + + .adaptation-grid-4col .adapted-label-slot .adapted-label { + display: block; + margin: 0; + } + + .adaptation-block { + border: 1px solid var(--dg-ink); + padding: 3px; + } + + .left-bar-tabs { + font-size: 11px; + margin-bottom: 4px; + } + + .left-bar-tab-panels .tab:not(.active) { + display: none; + } + + .left-bar-action-stack { + display: flex; + flex-direction: column; + gap: 6px; + margin-top: 8px; + } + + .left-bar-action-pill { + display: block; + width: 100%; + box-sizing: border-box; + margin: 0 0 8px; + text-align: center; + padding-block: 4px; /* +8px height vs default 2px .action-pill padding */ + } + + .left-bar-action-stack .left-bar-action-pill { + margin-bottom: 0; + } + + .left-bar-action-stack .left-bar-action-pill[data-action="takeStimulants"] { + margin-bottom: 5px; + } + + .exhausted-section.resource input.is-inactive { + color: #888; + background-color: rgba(0, 0, 0, 0.04); + border-color: #bbb; + } + + .suppress-exhaustion.resource { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + column-gap: 8px; + margin-bottom: 8px; + + label.is-crossed-out { + color: #888; + text-decoration: line-through; + } + + input:disabled { + opacity: 0.45; + } + } +} diff --git a/scss/deltagreen/_character-sheet-cont.scss b/scss/deltagreen/_character-sheet-cont.scss new file mode 100644 index 0000000..399939b --- /dev/null +++ b/scss/deltagreen/_character-sheet-cont.scss @@ -0,0 +1,294 @@ +.deltagreen .sheet-header .header-top { + margin-bottom: 5px; +} + +.deltagreen .sheet-header .charname input { + /* font-family: "SpecialElite", sans-serif; */ +} + +.deltagreen .sheet-header h2.profession { + font-family: inherit; + font-size: 1.5rem; + border-bottom: 0; + margin-top: 5px; + margin-bottom: 0; +} + +.deltagreen .sheet-header h2.profession input { + width: 100%; + height: 40px; + margin: 0; +} + +div .simple-centered-flex-div { + display: flex; + align-items: center; +} + +div input.fill-remaining-space { + flex: 1; + margin: 1px; + text-align: left; +} + +div span.bio-grid-label { + margin: 1px; + text-align: left; +} + +.bio-grid-2col { + display: grid; + grid-template-columns: 100px auto; + align-items: center; + padding-bottom: 10px; + row-gap: 10px; +} + +.bio-grid-top-border { + border-top: 0px solid #aaa; + padding-top: 10px; +} + +.bio-grid-5col { + display: grid; + grid-template-columns: 100px 100px 20px 120px auto; + align-items: center; + padding-bottom: 10px; +} + +.bonds-grid-3col { + display: grid; + grid-template-columns: auto 50px max-content; + align-items: center; + padding-bottom: 10px; +} + +.centered { + text-align: center !important; +} + +.breaking-point-grid-3col { + display: grid; + grid-template-columns: 20% 70px 65px; + border-top: 0px solid #aaa; + margin-bottom: 10px; + border-bottom: 1px solid #aaa; + align-content: center; + justify-content: left; + align-items: center; + padding-bottom: 10px; + padding-top: 10px; +} + +.adaptation-grid-5col { + display: grid; + grid-template-columns: 30% 50px 50px 50px 200px; + margin-top: 10px; + margin-bottom: 10px; + align-content: center; + justify-content: left; + align-items: center; + padding-bottom: 5px; + border-bottom: 0px solid #aaa; +} + +.adapted-label { + font-weight: bold; + font-style: italic; + color: rgb(139, 0, 0); +} + +.weapon-grid-2col { + display: grid; + grid-template-columns: 48% 48%; + margin-top: 10px; + margin-bottom: 5px; + justify-content: left; + align-items: flex-end; + padding: 0px; + column-gap: 4%; +} + +.centered-item-property { + text-align: center; +} + +.bolded-label { + font-weight: bold; +} + +.resource .labeled-resource-checkbox { + vertical-align: middle; + margin-bottom: 0; +} + +.resource .first-aid-label { + vertical-align: bottom; +} + +div .motivation-section { + border-bottom: 1px solid #aaa; + margin-bottom: 10px; +} + +div .bottom-left-justified-resource { + vertical-align: bottom; + text-align: left; +} + +div .first-aid-received-section { + display: grid; + grid-template-columns: 40% 70px; + border-bottom: 1px solid #aaa; + margin-bottom: 10px; +} + +div .exhausted-section { + display: grid; + grid-template-columns: 40% 70px; + border-bottom: 1px solid #aaa; + margin-bottom: 10px; +} + +.exhausted-section input[type="number"] { + width: 75px; + + color: rgb(139, 0, 0); + text-align: center; + + background-color: rgba(0, 0, 0, 0.05); + + border: 1px solid rgb(122, 121, 113); + border-radius: 3px; + margin-left: 10px; + margin-bottom: 5px; +} + +.resource .exhaustion-label { + vertical-align: middle; +} + +.bonds-section-header { + /* border-top: 1px solid #AAA; */ + width: 100%; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 5px; +} + +.about-section-header { + border-top: 1px solid #aaa; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 5px; +} + +.tab.about .dg-about-links { + gap: 0.5rem; + margin-bottom: 1rem; +} + +.tab.about .dg-about-links a { + display: inline-flex; + align-items: center; + gap: 0.5rem; + width: fit-content; + max-width: 100%; +} + +.tab.about .dg-about-links a i { + flex: 0 0 auto; +} + +.tab.about .dg-about-links a span { + flex: 1 1 auto; + line-height: 1.4; + text-align: left; +} + +.tab.about .dg-about-legal p { + margin: 0.5rem 0; +} + +textarea.wounds { + resize: none; + height: 100px; + width: 100%; +} + +.resource-inner-grid-3col { + display: grid; + grid-template-columns: 35% 30% 35%; + align-items: center; + text-align: center; +} + +.resource-outer-grid-1col { + display: grid; + grid-template-columns: 100%; + align-items: center; + justify-content: center; + border: 1.5px solid var(--dg-ink); + padding: 5px; + grid-gap: 3px; + text-align: center; + border-radius: 2px; +} + +div.max-resource-value { + border: 1px solid rgb(122, 121, 113); + border-radius: 3px; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.physical-stats-outer-grid-3col { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: center; + justify-content: center; + text-align: center; + padding: 5px; + grid-gap: 5px; +} + +.physical-stats-and-feature { + border-radius: 2px; + border: 1.5px solid var(--dg-ink); +} + +.attributes-wrapper { + margin-block-end: 12px; +} + +div.horizontal-bar-section-divider, +div.horizontal-bar-section-divider.skills-header, +div.horizontal-bar-section-header { + box-sizing: border-box; + margin-bottom: 3px; + background: var(--dg-surface-dark); + color: var(--dg-on-dark); + border-radius: 3px; + line-height: 1.2; + min-height: 30px; + height: auto; + padding: 6px 8px; + text-align: center; +} + +div.horizontal-bar-section-divider { + display: flex; + align-items: center; + justify-content: center; +} + +div.horizontal-bar-section-divider.skills-header { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; +} diff --git a/scss/deltagreen/_character-sheet.scss b/scss/deltagreen/_character-sheet.scss new file mode 100644 index 0000000..80eebd7 --- /dev/null +++ b/scss/deltagreen/_character-sheet.scss @@ -0,0 +1,265 @@ +.deltagreen .sheet-header { + -webkit-box-flex: 0; + -ms-flex: 0 0 400px; + flex: 0 0 auto; + overflow: hidden; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + margin-bottom: 8px; +} + +.deltagreen .sheet-header .profile-img { + height: 100px; + flex: 0 0 100px; + -webkit-box-flex: 0; + -ms-flex: 0 0 100px; + + cursor: var(--cursor-pointer); /* Variable name from Foundry */ + + border: 1px solid var(--dg-ink); + margin-right: 5px; +} + +.deltagreen .sheet-header .header-fields { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.deltagreen .sheet-header h1.charname { + height: 55px; + font-family: inherit; + font-size: 2rem; + padding: 0px; + border-bottom: 0; + margin-bottom: 0; +} + +.deltagreen .sheet-header h1.charname input { + width: 100%; + height: 100%; + margin: 0; +} + +.deltagreen .resource-label { + font-weight: bold; +} + +.sheet nav.sheet-tabs { + border-bottom: transparent !important; + border-top: transparent !important; +} + +.deltagreen .tabs { + height: 1.5rem; + line-height: 1.5rem; + text-align: center; + vertical-align: middle; + margin-bottom: 0px !important; + padding-bottom: 0px !important; +} + +.deltagreen .tabs [data-action="tab"] { + font-weight: bold; + color: inherit; + vertical-align: middle !important; + height: inherit; + line-height: inherit; + padding-inline: 5px; + border-radius: 5px 5px 0px 0px; + border-color: var(--dg-ink); + border: gray; + border-width: 1px 1px 0px 1px; + border-style: solid; +} + +.deltagreen .tabs [data-action="tab"].active { + text-shadow: none; + font-style: italic; + border-color: var(--dg-ink); + border-width: 2px 2px 0px 2px; + border-style: solid; +} + +.deltagreen .tab { + height: 100%; + overflow-y: auto; + + border-color: var(--dg-ink); + border-width: 2px; + border-style: solid; + border-radius: 3px; + + padding: 5px; +} + +.deltagreen .program-style .tabs [data-action="tab"].active { + background-color: var(--dg-surface-dark); + color: var(--dg-on-dark); +} + +.deltagreen .cowboy-style .tabs [data-action="tab"].active { + background-color: rgba(156, 115, 18, 0.3); + color: var(--dg-ink); +} + +.deltagreen .items-list { + list-style: none; + /*margin: 7px 0; */ + padding: 0; + overflow-y: auto; +} + +.deltagreen .items-list .item-header { + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; +} + +.deltagreen .items-list .item { + min-height: 30px; + line-height: 24px; + padding: 3px 0; + border-bottom: 1px solid #bbb; +} + +.deltagreen .items-list .item .item-image { + -webkit-box-flex: 0; + -ms-flex: 0 0 24px; + flex: 0 0 24px; + margin-right: 5px; +} + +.deltagreen .items-list .item .item-bond-damage { + -webkit-box-flex: 0; + -ms-flex: 0 0 24px; + flex: 0 0 24px; + margin: 0; + align-self: center; + justify-self: center; +} + +.deltagreen .items-list .item img { + display: block; +} + +.deltagreen .items-list .item-name { + display: flex; + align-content: center; + + word-wrap: break-word; + + margin: 0; +} + +.deltagreen .items-list .item-controls { + -webkit-box-flex: 0; + -ms-flex: 0 0 86px; + flex: 0 0 86px; + text-align: right; +} + +.deltagreen .skill-and-training-controls { + flex: 0 0 35px; +} + +.deltagreen .action-pill, +.deltagreen button.action-pill { + padding: 2px; + border-radius: 2.5px; + font-size: 0.8rem; + font-weight: bold; + background-color: rgba(0, 0, 0, 0.185); + color: inherit; + text-decoration: none; + border: none; + cursor: pointer; +} + +.deltagreen button.action-pill { + appearance: none; +} + +.deltagreen[id^="dg-settings"] { + .window-content > div.flexcol { + gap: 1rem; + } + + .form-group label { + flex: unset; + } +} + +a.btn-tiny { + height: 26px; + margin-left: 5px; + margin-right: 5px; + font-size: 13px; + padding-top: 1px; + padding-bottom: 1px; + padding-right: 5px; + padding-left: 5px; + + text-decoration: none; + background-color: #eeeeee; + color: #333333; + + border-radius: 4px; + line-height: 25px; + border: 1px solid #333333; + min-width: 20px; + text-align: center; +} + +span.left-aligned-label { + justify-content: left; + margin-left: 5px; +} + +span.max-attribute-value-label { + border: 1px solid rgb(122, 121, 113); + border-radius: 3px; + padding-top: 3px; + padding-bottom: 1px; + padding-left: 3px; + padding-right: 3px; + height: 26px; +} + +.deltagreen .skill-label { + margin: 2px; + align-content: flex-start; +} + +.deltagreen .skill-type-label { + margin: 2px; +} + +input.percentile-skill-input { + flex: 0 0 40px; + margin: 0 5px; + height: 1.2rem; + align-self: center; + text-align: center; +} + +input.checkbox-skill-input { + flex: 0 0 20px; + line-height: 10px; + width: 1px; +} + +input.checkbox-skill-input:disabled { + visibility: hidden; +} diff --git a/scss/deltagreen/_chat-cards.scss b/scss/deltagreen/_chat-cards.scss new file mode 100644 index 0000000..143f8aa --- /dev/null +++ b/scss/deltagreen/_chat-cards.scss @@ -0,0 +1,109 @@ +/* Delta Green stylized chat cards */ +.deltagreen.chat-card.dg-chat-card { + border: 2px solid var(--dg-ink); + border-radius: 3px; + overflow: hidden; + margin: 0; +} + +.dg-chat-card__header { + display: flex; + flex-direction: row; + align-items: center; + gap: 0; + background: var(--dg-surface-dark); + color: var(--dg-on-dark); + padding: 6px 0; +} + +.dg-chat-card__icon-slot { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + align-self: center; + width: 40px; + height: 40px; + min-width: 40px; + aspect-ratio: 1 / 1; + box-sizing: border-box; + margin-left: 8px; + overflow: hidden; +} + +.dg-chat-card__icon { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center center; +} + +.dg-chat-card__titles { + flex: 1 1 auto; + min-width: 0; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 8px 0 8px; +} + +.dg-chat-card__speaker { + margin: 0; + font-size: 0.95rem; + font-weight: bold; + color: var(--dg-on-dark); + line-height: 1.2; +} + +.dg-chat-card__label { + font-size: 0.8rem; + color: var(--dg-on-dark); + line-height: 1.25; + margin-top: 2px; +} + +.dg-chat-card__body { + border-color: var(--dg-ink); + border-width: 0; + border-style: solid; + border-radius: 0; + padding: 5px; + background: inherit; +} + +.dg-chat-card__body .dice-roll { + margin-top: 0.5em; +} + +.chat-message:has(.dg-chat-card) .message-header, +.chat-message.dg-chat-card-message .message-header { + display: none; +} + +.rollback-section { + order: 99; + display: flex; + margin-top: 5px; + align-items: center; + justify-content: center; + + > i { + margin: 5px; + } +} + +[data-action="rollback-skill-failure-state"] { + align-items: center; + display: inline-flex; + justify-content: center; + min-height: unset; + width: 20px; + height: 20px; + margin-left: 5px; + font-size: 12px; +} + +.strike { + text-decoration: line-through; +} diff --git a/scss/deltagreen/_effects-tab.scss b/scss/deltagreen/_effects-tab.scss new file mode 100644 index 0000000..d604178 --- /dev/null +++ b/scss/deltagreen/_effects-tab.scss @@ -0,0 +1,107 @@ +/* Active Effects */ +.deltagreen .tab.effects { + padding: 5px; +} + +.deltagreen.item .tab[data-application-part="effects"].active { + overflow-y: auto; +} + +.deltagreen .effects-transfer-hint { + font-size: var(--font-size-12); + font-style: italic; + margin: 0 0 8px; +} + +.deltagreen .effect-add { + margin-bottom: 8px; +} + +.deltagreen .effect-add .action-pill { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 4px; + width: fit-content; + max-width: 100%; + text-align: center; + padding-inline: 6px; +} + +.deltagreen .effect-header { + font-weight: bold; + border-bottom: 1px solid #999; + margin-top: 8px; + padding-bottom: 2px; + gap: 4px; +} + +.deltagreen .effects-list { + list-style: none; + margin: 0; + padding: 0; +} + +.deltagreen .effects-list .effect { + display: grid; + grid-template-columns: 24px minmax(0, 1fr) minmax(0, 6rem) auto auto; + align-items: center; + gap: 6px; + padding: 4px 2px; + border-bottom: 1px solid #ccc; + min-width: 0; +} + +.deltagreen .effects-list .effect-label { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.deltagreen .effects-list .effect-icon { + width: 24px; + height: 24px; + border: none; +} + +.deltagreen .effects-list .effect.suppressed-effect { + opacity: 0.55; +} + +.deltagreen .effects-list .effect.disabled-effect { + opacity: 0.4; + text-decoration: line-through; +} + +.deltagreen .effects-list .effect-source { + font-size: var(--font-size-12); + max-width: 8rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.deltagreen .effects-list .effect-controls { + display: flex; + gap: 4px; +} + +.deltagreen .effects-list .effect-empty { + font-style: italic; + padding: 6px; +} + +.deltagreen .motivations .acute-episode-col { + flex: 0 0 5.5rem; + text-align: center; +} + +.deltagreen .motivations li.acute-episode-active { + background: rgba(180, 0, 0, 0.08); +} + +.deltagreen .active-effect-config .dg-effect-key-select { + width: 100%; + max-width: 14rem; +} diff --git a/scss/deltagreen/_foundry-theme.scss b/scss/deltagreen/_foundry-theme.scss new file mode 100644 index 0000000..2eddbb6 --- /dev/null +++ b/scss/deltagreen/_foundry-theme.scss @@ -0,0 +1,90 @@ +/* + Custom UI Styling Elements +*/ +:root :not(.no-theme) { + --color-shadow-primary: #374e13; + --color-shadow-highlight: #406539; + --color-border-highlight: #406539; + --color-border-highlight-alt: #374e13; + --color-underline-header: #406539; + --color-text-dark-header: #406539; + scrollbar-color: var(--color-text-dark-header) #111; +} + +#pause img { + content: url(../assets/img/DG_Pause_Icon.webp); +} + +#interface:not(.no-theme) * { + --color-shadow-primary: #215112 !important; + --color-shadow-highlight: #215112 !important; + --color-border-highlight: #215112 !important; + --color-border-highlight-alt: #215112 !important; + --color-underline-header: #215112 !important; + --color-text-dark-header: #215112 !important; + scrollbar-color: var(--color-text-dark-header) #111 !important; +} + +#interface:not(.theme-light) * { + --control-border-color: #215112; + --control-hover-border-color: #215112; +} + +/* The logo is defunct as of v13 */ +#logo { + content: url("../assets/img/Delta_Green_Logo.webp"); + width: 90px; + height: auto; + padding-top: 10px; + padding-bottom: 10px; +} + +.ae-mod-increase { + color: #00a82d; +} + +.ae-mod-decrease { + color: #e00000; +} + +/* Stats/skills: dark input chrome — brighter red (overlays keep inherited weight) */ +.deltagreen input.ae-mod-decrease, +.deltagreen input.centered.ae-mod-decrease, +.deltagreen input.percentile-skill-input.ae-mod-decrease, +.deltagreen .ae-input-host .ae-input-display.ae-mod-decrease { + color: #ff8a8a; + -webkit-text-fill-color: #ff8a8a; +} + +.deltagreen input.ae-mod-decrease, +.deltagreen input.centered.ae-mod-decrease, +.deltagreen input.percentile-skill-input.ae-mod-decrease { + font-weight: bold; +} + +.deltagreen input.percentile-skill-input.ae-mod-increase, +.deltagreen input.centered.ae-mod-increase { + color: #00a82d; + -webkit-text-fill-color: #00a82d; + font-weight: bold; +} + +.deltagreen .max-resource-value.ae-mod-increase > div, +.deltagreen .max-resource-value.ae-mod-decrease > div { + font-weight: bold; +} + +table.dg-roll-target-tooltip { + margin-top: 0.25em; + border-collapse: collapse; +} + +table.dg-roll-target-tooltip td { + padding: 1px 6px 1px 0; + vertical-align: top; +} + +table.dg-roll-target-tooltip td:last-child { + text-align: right; + white-space: nowrap; +} diff --git a/scss/deltagreen/_global.scss b/scss/deltagreen/_global.scss new file mode 100644 index 0000000..5208cad --- /dev/null +++ b/scss/deltagreen/_global.scss @@ -0,0 +1,8 @@ +@use "../mixins" as *; + +/* Global styles */ + +.deltagreen section.window-content { + @include dg-window-content; + @include dg-window-form-inputs; +} diff --git a/scss/deltagreen/_item-sheets.scss b/scss/deltagreen/_item-sheets.scss new file mode 100644 index 0000000..ca9b6aa --- /dev/null +++ b/scss/deltagreen/_item-sheets.scss @@ -0,0 +1,305 @@ +@use "../mixins" as *; + +/* + Item Sheet Common CSS +*/ + +.item-img { + -webkit-box-flex: 0; + -ms-flex: 0 0 100px; + flex: 0 0 100px; + height: 100px; + border: 0px solid var(--dg-ink); +} + +input.item-sheet-short-input { + width: 75px; + margin-right: 5px; + margin-left: 5px; + text-align: center !important; +} + +.item-grid-button-row { + vertical-align: middle !important; + line-height: inherit; + padding: 5px 0px 0px 10px; +} + +/* + Bonds Item Sheet +*/ + +.bond-sheet-grid-2col { + @include item-sheet-grid-2col; + padding-left: 5px; +} + +.bond-sheet-horizontal-grid-2col { + @include item-sheet-horizontal-grid(150px); +} + +/* + Motivation Item Sheet +*/ + +.motivation-sheet-horizontal-grid-2col { + display: grid; + grid-template-columns: 50% 50%; + align-items: center; + justify-content: center; + text-align: left; + padding-left: 5px; + padding-bottom: 10px; + grid-gap: 5px; +} + +/* + Armor Item Sheet +*/ + +.armor-sheet-grid-2col { + @include item-sheet-grid-2col; + padding-bottom: 10px; + padding-left: 5px; +} + +.armor-sheet-horizontal-grid-2col { + @include item-sheet-horizontal-grid; +} + +.armor-sheet-secondary-grid-2col { + @include item-sheet-grid-2col; + justify-content: left; + text-align: left; + padding-bottom: 10px; +} + +/* + Gear Item Sheet +*/ + +.gear-sheet-grid-2col { + @include item-sheet-grid-2col; + padding-left: 5px; +} + +.gear-sheet-horizontal-grid-2col { + @include item-sheet-horizontal-grid; +} + +/* + Weapon Item Sheet +*/ + +.weapon-sheet-grid-2col { + @include item-sheet-grid-2col; + padding-left: 5px; +} + +.weapon-sheet-horizontal-grid-2col { + @include item-sheet-horizontal-grid; +} + +.weapon-sheet-horizontal-grid-2col .resource-label { + display: flex; + align-items: center; + min-height: 1.5rem; + margin: 0; +} + +.weapon-sheet-horizontal-grid-2col input[type="text"], +.weapon-sheet-horizontal-grid-2col select { + width: 100%; + max-width: 100%; + box-sizing: border-box; + margin: 0; + line-height: 1.5rem; +} + +.weapon-sheet-header { + margin-bottom: 12px; +} + +/* One grid row per stat pair so left/right labels share the same baseline. */ +.weapon-sheet-stats-grid { + display: grid; + grid-template-columns: + minmax(5.5rem, auto) minmax(9rem, 1.35fr) minmax(5.5rem, auto) + minmax(9rem, 1.35fr); + align-items: center; + column-gap: 12px; + row-gap: 10px; + padding: 0 2px 10px; + text-align: left; +} + +.weapon-sheet-stats-grid .resource-label { + display: flex; + align-items: center; + min-height: var(--weapon-sheet-control-height, 1.75rem); + margin: 0; +} + +.weapon-sheet-stats-grid input[type="text"], +.weapon-sheet-stats-grid select { + width: 100%; + min-width: 0; + max-width: 100%; + box-sizing: border-box; + margin: 0; + height: var(--weapon-sheet-control-height, 1.75rem); + min-height: var(--weapon-sheet-control-height, 1.75rem); + line-height: 1.5rem; + padding: 0 6px; +} + +.weapon-sheet-stats-grid select.weapon-sheet-skill-select { + min-width: 9rem; +} + +.weapon-sheet-stats-grid .labeled-resource-checkbox { + justify-self: start; + align-self: center; + margin: 0; +} + +.weapon-sheet-stats-pad { + display: block; + min-height: 0; + visibility: hidden; + pointer-events: none; +} + +/* + Tome Item Sheet +*/ + +.tome-sheet-horizontal-grid-2col { + @include item-sheet-horizontal-grid; +} + +.tome-sheet-handler-info-horizontal-grid-2col { + display: grid; + grid-template-columns: max-content auto; + align-items: center; + text-align: left; + column-gap: 10px; + row-gap: 10px; + padding-bottom: 10px; + padding-right: 5px; +} + +/* + Unnatural Character Sheet Specific Classes +*/ + +.unnatural-notes-section { + display: grid; + grid-template-columns: 100%; + align-items: left; + justify-content: left; + border: 1px solid #999; + padding: 5px; + grid-gap: 3px; + text-align: left; +} + +.skill-util-buttons { + margin: 5px; + + .typed-skill-add { + margin-right: 5px; + } +} + +a[data-action="applySkillImprovements"] { + float: right; +} + +.yellow-king { + color: #a0912f; +} + +.yellow-sign { + font-weight: bold; + text-shadow: 1px 1px #313a00; +} + +.yellow-king-rotate1 { + transform: rotate(3deg); +} + +.yellow-king-rotate4 { + transform: rotate(4deg); +} + +.yellow-king-rotate2 { + transform: rotate(-1deg); +} + +.yellow-king-rotate3 { + transform: rotate(5deg); +} + +.yellow-king-grid-9col { + display: grid; + grid-template-columns: max-content 5px max-content max-content 20px max-content max-content 10px 35px; + align-items: center; + padding-bottom: 10px; +} + +.yellow-king-grid-5col { + display: grid; + grid-template-columns: min-content 275px 20px min-content auto; + align-items: center; + padding-bottom: 10px; +} + +.yellow-king-label { + margin-right: 10px; +} + +.yellow-king input, +.yellow-king select, +.yellow-king textarea { + color: #a0912f; + font-weight: bold; +} + +.yellow-king textarea:focus, +.yellow-king input:focus { + color: #a0912f; +} + +.top-div-border { + border-top: 1px solid #aaa; + margin-bottom: 10px; + padding-bottom: 10px; + padding-top: 10px; +} + +.stat-block-input { + min-height: 300px; + resize: none; +} + +.weapon-name-flexcontainer { + display: flex; + justify-content: flex-start; + flex-direction: row; + column-gap: 10px; +} + +.weapon-name-flexitem { + flex: content; + align-self: flex-start; + text-align: left; +} + +.armor-piercing-chat-card-img { + border-radius: 10%; + height: 20px !important; + width: 20px !important; + margin: 0px; + vertical-align: text-bottom; +} diff --git a/scss/deltagreen/_profession.scss b/scss/deltagreen/_profession.scss new file mode 100644 index 0000000..e8217ac --- /dev/null +++ b/scss/deltagreen/_profession.scss @@ -0,0 +1,115 @@ +/* Profession item sheet */ +.deltagreen .profession-sheet-grid-2col { + display: grid; + grid-template-columns: auto 1fr; + gap: 0.75rem; + align-items: start; +} + +.deltagreen .profession-sheet-name { + display: grid; + grid-template-columns: auto 1fr; + gap: 0.5rem; + align-items: center; +} + +.deltagreen .tab.profession-skills { + --profession-toolbar-label-width: 11rem; + --profession-toolbar-secondary-label-width: 7rem; +} + +.deltagreen .tab.profession-skills .profession-skills-section { + margin-top: 0.75rem; +} + +.deltagreen .tab.profession-skills .profession-skills-section:first-child { + margin-top: 0; +} + +.deltagreen .tab.profession-skills .profession-section-toolbar { + display: grid; + grid-template-columns: + var(--profession-toolbar-label-width) + auto + var(--profession-toolbar-secondary-label-width) + 4rem; + align-items: center; + column-gap: 0.5rem; + margin-bottom: 0.35rem; +} + +.deltagreen .tab.profession-skills .profession-skills-toolbar-label { + font-weight: bold; +} + +.deltagreen .tab.profession-skills .profession-skills-toolbar-control { + justify-self: start; +} + +.deltagreen .tab.profession-skills .profession-bonds-input, +.deltagreen .tab.profession-skills .profession-option-picks-input { + width: 100%; + text-align: center; +} + +.deltagreen .tab.profession-skills .profession-skill-list { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.25rem 1rem; + list-style: none; + margin: 0; + padding: 0; +} + +.deltagreen .tab.profession-skills .profession-skill-row { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.15rem 0; + min-width: 0; +} + +.deltagreen .tab.profession-skills .profession-skill-label { + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.deltagreen .tab.profession-skills .profession-skill-rating { + flex-shrink: 0; + min-width: 2.5rem; + text-align: right; +} + +.roll-stats-chat-table { + width: auto; + margin: 0 auto; + border-collapse: collapse; +} + +/* Override Foundry row striping; alternate per cell in reading order (checkerboard in 3 cols) */ +.dg-chat-card__body .roll-stats-chat-table tbody tr { + background-color: transparent; +} + +.dg-chat-card__body .roll-stats-chat-table td { + padding: 0.35rem 1rem; + text-align: center; + font-weight: bold; + font-size: var(--font-size-16, 1rem); + border: 1px solid var(--color-border-light-2, rgba(255, 255, 255, 0.2)); +} + +.dg-chat-card__body .roll-stats-chat-table td.roll-stats-chat-value--a { + background-color: var(--table-row-color-odd, transparent); +} + +.dg-chat-card__body .roll-stats-chat-table td.roll-stats-chat-value--b { + background-color: var(--table-row-color-even, rgba(255, 255, 255, 0.1)); +} + +.dg-chat-card__body .roll-stats-chat-table .roll-stats-chat-value { + min-width: 2rem; +} diff --git a/scss/deltagreen/_prose-mirror.scss b/scss/deltagreen/_prose-mirror.scss new file mode 100644 index 0000000..7fdd648 --- /dev/null +++ b/scss/deltagreen/_prose-mirror.scss @@ -0,0 +1,154 @@ +.deltagreen .editor-host { + align-items: stretch; + display: flex; + flex-direction: column; + min-height: 0; +} + +/* ProseMirror: compact when toggled off; expand to fill tab space while editing. */ +.deltagreen .editor-host prose-mirror { + --min-height: 5rem; + flex: 0 0 auto; +} + +.deltagreen:not(.item) .editor-host prose-mirror:not(.active) { + height: auto !important; +} + +.deltagreen .editor-host prose-mirror.active { + --min-height: 12rem; + flex: 1 1 auto; + min-height: 12rem; +} + +.deltagreen .editor-host prose-mirror.active .editor-container { + flex: 1 1 auto; + min-height: 0; +} + +/* Actor sheets: compact description when not editing. */ +.deltagreen:not(.item) .editor-host prose-mirror:not(.active) .editor-content { + position: relative; + inset: unset; + overflow: visible; + min-height: 2.5rem; +} + +/* Let the description block consume remaining tab height while editing. */ +.deltagreen:not(.item) .tab:has(.notes-wrapper prose-mirror.active) { + display: flex; + flex-direction: column; + min-height: 0; +} + +.deltagreen:not(.item) + .tab:has(.notes-wrapper prose-mirror.active) + .notes-wrapper, +.deltagreen:not(.item) + .tab:has(.notes-wrapper prose-mirror.active) + .notes-wrapper + .editor-host { + flex: 1 1 auto; + min-height: 0; +} + +/* Item sheets: description fills space below header (view and edit). */ +.deltagreen.item form { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; + overflow: hidden; +} + +.deltagreen.item .window-content { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; +} + +.deltagreen.item [data-application-part="header"], +.deltagreen.item [data-application-part="tabs"] { + flex: 0 0 auto; +} + +/* Item tab bodies — flex only when .active; do not override core display:none on inactive tabs. */ +.deltagreen.item .tab[data-tab][data-application-part].active { + flex: 1 1 auto; + display: flex; + flex-direction: column; + min-height: 0; + overflow: hidden; +} + +/* Profession skills tab: outer panel flexes; inner region scrolls (see description tab). */ +.deltagreen.item .tab.profession-skills.active, +.deltagreen.item .tab[data-application-part="skills"].active { + flex: 1 1 auto; + display: flex; + flex-direction: column; + min-height: 0; + height: auto; + max-height: 100%; + overflow: hidden; +} + +.deltagreen.item .tab.profession-skills .profession-skills-scroll { + flex: 1 1 auto; + min-height: 0; + overflow-x: hidden; + overflow-y: auto; +} + +.deltagreen.item + .tab[data-application-part="description"].active.top-div-border, +.deltagreen.item + .tab[data-application-part="handler"].active + > .tab.top-div-border { + flex: 1 1 auto; + display: flex; + flex-direction: column; + min-height: 0; +} + +.deltagreen.item .tab.top-div-border > .editor-host, +.deltagreen.item + .tab[data-application-part="description"].active + > .editor-host { + flex: 1 1 auto; + min-height: 0; +} + +.deltagreen.item .tab.top-div-border .editor-host prose-mirror { + flex: 1 1 auto; + min-height: 5rem; +} + +.deltagreen.item + .tab.top-div-border + .editor-host + prose-mirror:not(.active) + .editor-content { + position: absolute; + inset: 0; + overflow: auto; + min-height: unset; +} + +.deltagreen.item .tab.top-div-border .editor-host prose-mirror.active { + min-height: 5rem; +} + +/* Core uses display:block on hover for prose-mirror toggles, which breaks flex icon centering. */ +.deltagreen prose-mirror:hover button.toggle:enabled { + display: flex; + justify-content: center; + align-items: center; + padding: 0; +} + +.deltagreen prose-mirror button.toggle > i { + margin: 0; + line-height: 1; +} diff --git a/scss/deltagreen/_stats-edit.scss b/scss/deltagreen/_stats-edit.scss new file mode 100644 index 0000000..545154a --- /dev/null +++ b/scss/deltagreen/_stats-edit.scss @@ -0,0 +1,56 @@ +.stats-wrapper { + position: relative; +} + +/* Edit icon */ +.stats-edit-btn { + position: absolute; + top: -10px; + right: 0; + + width: 24px; + height: 24px; + + display: flex; + align-items: center; + justify-content: center; + + border-radius: 50%; + background: var(--color-border-dark, #444); + color: var(--dg-on-dark); + + font-size: 12px; + + cursor: pointer; + opacity: 0; + transition: + opacity 0.15s ease, + transform 0.15s ease; +} + +/* Show on hover of whole stats block */ +.stats-wrapper:hover .stats-edit-btn { + opacity: 1; + transform: scale(1.05); +} + +/* Hover feedback */ +.stats-edit-btn:hover { + background: var(--color-border-highlight, #c9a227); +} + +.edit-stat-form { + label { + color: var(--color-text-primary); + } +} + +.physical-stats-outer-grid-2col { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: center; + text-align: center; + padding: 5px; + grid-gap: 5px; +} diff --git a/scss/dg-dialog.scss b/scss/dg-dialog.scss new file mode 100644 index 0000000..9013130 --- /dev/null +++ b/scss/dg-dialog.scss @@ -0,0 +1,2 @@ +@use "dg-dialog/base"; +@use "dg-dialog/dialogs"; diff --git a/scss/dg-dialog/_base.scss b/scss/dg-dialog/_base.scss new file mode 100644 index 0000000..0c1f4f9 --- /dev/null +++ b/scss/dg-dialog/_base.scss @@ -0,0 +1,98 @@ +/* Delta Green — shared DialogV2 styling (.dg-dialog-app) */ + +@use "../mixins" as *; + +.dg-dialog-app { + section.window-content { + @include dg-window-content; + @include dg-window-form-inputs-with-select; + + :is(h1, h2, h3, h4, h5, h6) { + color: inherit; + } + } + + /* Foundry sets explicit light-theme tokens on headings/labels; inherit parchment body color. */ + .standard-form .form-group > label, + .form-group > label, + .dg-dialog__field-label, + .dg-dialog .dg-dialog__heading, + .dg-dialog__intro { + color: inherit; + } + + .dg-dialog input[type="text"], + .dg-dialog input[type="number"], + .dg-dialog input[type="password"], + .dg-dialog select { + background-color: rgba(0, 0, 0, 0.05); + border: 1px solid rgb(122, 121, 113); + border-radius: 3px; + color: inherit; + } + + .dg-dialog__field-label, + .dg-dialog .dg-dialog__heading { + font-weight: bold; + } + + .dg-dialog__intro { + margin: 0 0 0.5rem; + line-height: 1.4; + } + + .dg-dialog__messages { + margin-top: 0.5rem; + } + + .dg-dialog__message--error, + .dg-dialog .validation-error { + color: var(--color-text-error, #c00); + font-weight: bold; + margin: 0.25rem 0; + } + + .dg-dialog__message--warning, + .dg-dialog .cap-warning { + color: var(--color-text-warning, #c60); + font-weight: bold; + margin: 0.25rem 0; + } + + .form-footer { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + gap: 0.5rem; + margin-top: 0.75rem; + + > button { + flex: 1 1 0; + min-width: 0; + @include dg-dark-button; + + &:disabled { + background-color: #555; + color: #f0f0f0; + border-color: #555; + opacity: 1; + cursor: not-allowed; + } + } + } + + &--pick-statistics .form-footer { + display: grid; + grid-template-columns: 1fr 1fr; + + > button[data-action="skip"] { + grid-column: 1 / -1; + } + } + + &--stimulants .form-footer, + &--modify-roll .form-footer { + display: none; + } +} diff --git a/scss/dg-dialog/_dialogs.scss b/scss/dg-dialog/_dialogs.scss new file mode 100644 index 0000000..05f5531 --- /dev/null +++ b/scss/dg-dialog/_dialogs.scss @@ -0,0 +1,778 @@ +/* Assign stats */ +.dg-dialog--assign-stats .assign-stats-remaining { + margin: 0 0 0.75rem; + font-weight: bold; +} + +.dg-dialog--assign-stats .assign-stats-remaining.is-invalid { + color: var(--color-text-warning, #ff9200); +} + +.dg-dialog--assign-stats .assign-stats-rows { + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.dg-dialog--assign-stats .assign-stats-row { + display: grid; + grid-template-columns: 3rem 1fr; + align-items: center; + gap: 0.75rem; +} + +.dg-dialog--assign-stats .assign-stats-label { + font-weight: bold; +} + +.dg-dialog--assign-stats .assign-stats-row input { + width: 100%; + text-align: center; +} + +/* Roll stats */ +.dg-dialog--roll-stats .roll-stats-layout { + display: grid; + grid-template-columns: 1fr auto; + gap: 1rem; + align-items: start; +} + +.dg-dialog--roll-stats .roll-stats-pool-section { + min-width: 5.5rem; +} + +.dg-dialog--roll-stats .roll-stats-pool-hint { + margin: 0.75rem 0 0; + font-size: var(--font-size-12, 0.75rem); + text-align: center; + color: var(--color-text-dark-secondary, rgba(0, 0, 0, 0.65)); +} + +.dg-dialog--roll-stats .roll-stats-pool { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + width: 3rem; + min-height: 3rem; + padding: 0.5rem; + border: 1px dashed rgb(122, 121, 113); + border-radius: 4px; +} + +.dg-dialog--roll-stats .roll-stats-pool.drag-over { + border-color: var(--color-border-highlight, #ff6400); + background: rgba(255, 100, 0, 0.08); +} + +.dg-dialog--roll-stats .roll-stat-token { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + padding: 0; + font-weight: bold; + font-size: var(--font-size-16, 1rem); + border: 1px solid rgb(122, 121, 113); + border-radius: 4px; + background: rgba(0, 0, 0, 0.05); + cursor: grab; + user-select: none; + box-sizing: border-box; +} + +.dg-dialog--roll-stats .roll-stat-token.is-dragging { + opacity: 0.5; + cursor: grabbing; +} + +.dg-dialog--roll-stats .roll-stats-assignment-section { + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.dg-dialog--roll-stats .roll-stat-row { + display: grid; + grid-template-columns: 3rem auto; + align-items: center; + gap: 0.75rem; +} + +.dg-dialog--roll-stats .roll-stat-label { + font-weight: bold; +} + +.dg-dialog--roll-stats .roll-stat-slot { + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + flex: 0 0 auto; + padding: 0; + border: 1px dashed rgb(122, 121, 113); + border-radius: 4px; + box-sizing: border-box; +} + +.dg-dialog--roll-stats .roll-stat-slot.drag-over { + border-color: var(--color-border-highlight, #ff6400); + background: rgba(255, 100, 0, 0.08); +} + +.dg-dialog--roll-stats .roll-stat-slot .roll-stat-token { + cursor: grab; + width: 100%; + height: 100%; +} + +/* Add profession skill (item editor) */ +.dg-dialog-app.dg-dialog-app--add-profession-skill + .profession-typed-label-group.hidden, +.dg-dialog--add-profession-skill .profession-typed-label-group.hidden { + display: none; +} + +.dg-dialog-app.dg-dialog-app--add-profession-skill + .profession-typed-label-group, +.dg-dialog--add-profession-skill .profession-typed-label-group { + flex-direction: column; + align-items: stretch; + gap: 0.5rem; +} + +.dg-dialog-app.dg-dialog-app--add-profession-skill + .profession-typed-label-group + > *, +.dg-dialog--add-profession-skill .profession-typed-label-group > * { + flex: 0 0 auto; + width: 100%; + max-width: 100%; +} + +.dg-dialog-app.dg-dialog-app--add-profession-skill .profession-typed-name-field, +.dg-dialog-app.dg-dialog-app--add-profession-skill .profession-choose-one-field, +.dg-dialog--add-profession-skill .profession-typed-name-field, +.dg-dialog--add-profession-skill .profession-choose-one-field { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.2rem; +} + +.dg-dialog-app.dg-dialog-app--add-profession-skill + .profession-typed-name-field + > label, +.dg-dialog--add-profession-skill .profession-typed-name-field > label { + flex: none; + width: 100%; + line-height: 1.3; +} + +.dg-dialog--add-profession-skill .profession-typed-name-field input { + width: 100%; +} + +.dg-dialog--add-profession-skill .profession-choose-one-field { + padding-top: 0.25rem; +} + +.dg-dialog--add-profession-skill .profession-choose-one-checkbox { + display: flex; + align-items: center; + gap: 0.35rem; + margin: 0; +} + +.dg-dialog--add-profession-skill .profession-choose-one-hint { + margin: 0.25rem 0 0; +} + +/* Modify roll — keep layout in deltagreen.css under .dg-dialog--modify-roll */ + +/* Stimulants */ +.dg-dialog--stimulants .stimulants-dialog { + display: grid; + grid-template-columns: 10rem 1fr; + gap: 12px; + align-items: center; +} + +.dg-dialog--stimulants .stimulants-option { + display: contents; +} + +.dg-dialog--stimulants .stimulants-choice-btn { + width: 100%; + box-sizing: border-box; + padding: 4px 8px; + border-radius: 3px; + font-size: 0.8rem; + font-weight: bold; + background-color: var(--dg-surface-dark); + color: var(--dg-on-dark); + border: 1px solid var(--dg-surface-dark); + cursor: pointer; + white-space: nowrap; + text-align: center; +} + +.dg-dialog--stimulants .stimulants-choice-btn:hover { + background-color: var(--dg-surface-dark-hover); + color: var(--dg-on-dark); + border-color: var(--dg-surface-dark-hover); +} + +.dg-dialog--stimulants .stimulants-explanation { + margin: 0; + font-size: var(--font-size-12); + line-height: 1.35; +} + +/* Modify percentile roll */ +.dg-dialog--modify-roll .form-group { + margin-bottom: 0.5rem; +} + +.dg-dialog--modify-roll .modify-roll-readonly { + flex: 1; + font-weight: bold; +} + +.dg-dialog--modify-roll .modify-roll-section { + margin-top: 1rem; + padding-top: 0.75rem; + border-top: 1px solid rgb(122, 121, 113); +} + +.dg-dialog--modify-roll .modify-roll-section h3 { + margin: 0 0 0.35rem; + font-size: var(--font-size-14, 0.875rem); + font-weight: bold; +} + +.dg-dialog--modify-roll .modify-roll-hint { + margin: 0 0 0.65rem; + font-size: var(--font-size-12); + line-height: 1.35; +} + +.dg-dialog--modify-roll .modify-roll-quick-grid { + display: grid; + grid-template-columns: 5rem 1fr; + gap: 10px 12px; + align-items: center; +} + +.dg-dialog--modify-roll .modify-roll-quick-option { + display: contents; +} + +.dg-dialog--modify-roll .modify-roll-quick-btn, +.dg-dialog--modify-roll .modify-roll-submit-btn { + box-sizing: border-box; + padding: 4px 8px; + border-radius: 3px; + font-size: 0.8rem; + font-weight: bold; + background-color: var(--dg-surface-dark); + color: var(--dg-on-dark); + border: 1px solid var(--dg-surface-dark); + cursor: pointer; + white-space: nowrap; + text-align: center; +} + +.dg-dialog--modify-roll .modify-roll-quick-btn:hover, +.dg-dialog--modify-roll .modify-roll-submit-btn:hover { + background-color: var(--dg-surface-dark-hover); + color: var(--dg-on-dark); + border-color: var(--dg-surface-dark-hover); +} + +.dg-dialog--modify-roll .modify-roll-quick-explanation { + margin: 0; + font-size: var(--font-size-12); + line-height: 1.35; +} + +.dg-dialog--modify-roll .modify-roll-custom-row { + display: flex; + gap: 0.5rem; + align-items: center; +} + +.dg-dialog--modify-roll .modify-roll-custom-row input[type="number"] { + flex: 0 0 5rem; + text-align: center; +} + +.dg-dialog--modify-roll .modify-roll-submit-btn { + flex: 0 0 auto; + min-width: 5rem; +} + +/* Character creation — flex chain keeps footer visible; skill totals scroll */ +.dg-dialog-app.dg-dialog-app--character-creation.application { + display: flex; + flex-direction: column; +} + +.dg-dialog-app.dg-dialog-app--character-creation.application > .window-content { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; + overflow: hidden; +} + +.dg-dialog-app.dg-dialog-app--character-creation .dialog-form { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; + max-height: 100%; + overflow: hidden; +} + +.dg-dialog-app.dg-dialog-app--character-creation + .dialog-form + > .dialog-content { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; + overflow: hidden; +} + +.dg-dialog-app.dg-dialog-app--character-creation .dialog-form > .form-footer { + flex: 0 0 auto; +} + +.dg-dialog-app.dg-dialog-app--character-creation section.window-content { + min-height: 38rem; +} + +.dg-dialog--character-creation.dg-dialog { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; + overflow: hidden; +} + +.dg-dialog--character-creation .dg-dialog__layout--two-column { + display: flex; + flex-direction: row; + align-items: stretch; + gap: 40px; + flex: 1 1 auto; + min-height: 0; + min-width: 0; + overflow: hidden; +} + +.dg-dialog--character-creation .dg-dialog__column--left, +.dg-dialog--character-creation .dg-dialog__column--right { + display: flex; + flex-direction: column; + flex: 1 1 0; + min-width: 0; + min-height: 0; + overflow: hidden; +} + +.dg-dialog--character-creation + .dg-dialog__column--right + > .dg-dialog__messages { + flex: 0 0 auto; + margin-top: 0.5rem; +} + +/* Character creation tabs — same equal-width overlap as agent sheet */ +.dg-dialog--character-creation nav.character-creation-tabs { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + gap: 0; + width: 100%; + min-width: 0; + box-sizing: border-box; + margin: 0; + padding: 0; + border-top: none; + border-bottom: transparent; + height: 1.5rem; + line-height: 1.5rem; + position: relative; + z-index: 2; + overflow-x: auto; + overflow-y: hidden; +} + +.dg-dialog-app.dg-dialog-app--character-creation + section.window-content.program-style { + --dg-agent-tab-inactive-bg: rgb(186, 184, 181); + --dg-agent-tab-active-bg: var(--dg-surface-dark); + --dg-agent-tab-active-color: var(--dg-on-dark); +} + +.dg-dialog-app.dg-dialog-app--character-creation + section.window-content.cowboy-style, +.dg-dialog-app.dg-dialog-app--character-creation + section.window-content.outlaw-style { + --dg-agent-tab-inactive-bg: rgb(210, 190, 150); + --dg-agent-tab-active-bg: rgb(194, 168, 110); + --dg-agent-tab-active-color: var(--dg-ink); +} + +.dg-dialog--character-creation nav.character-creation-tabs [data-action="tab"] { + flex: 1 1 0; + min-width: 0; + position: relative; + text-align: center; + margin-left: -14px; + padding-inline: 3px; + font-size: 11px; + overflow: visible; + box-shadow: + 0 1px 2px rgba(0, 0, 0, 0.16), + -1px 0 2px rgba(0, 0, 0, 0.1), + 1px 0 2px rgba(0, 0, 0, 0.1); +} + +.dg-dialog--character-creation + nav.character-creation-tabs + [data-action="tab"]:first-child { + margin-left: 0; +} + +.dg-dialog--character-creation + nav.character-creation-tabs + [data-action="tab"]:nth-child(1) { + z-index: 1; +} + +.dg-dialog--character-creation + nav.character-creation-tabs + [data-action="tab"]:nth-child(2) { + z-index: 2; +} + +.dg-dialog--character-creation + nav.character-creation-tabs + [data-action="tab"]:nth-child(3) { + z-index: 3; +} + +.dg-dialog-app.dg-dialog-app--character-creation + section.window-content + .character-creation-tabs + [data-action="tab"]:not(.active) { + background: var(--dg-agent-tab-inactive-bg); +} + +.dg-dialog-app.dg-dialog-app--character-creation + section.window-content + .character-creation-tabs + [data-action="tab"].active { + z-index: 10; + margin-bottom: -2px; + padding-bottom: 2px; + background: var(--dg-agent-tab-active-bg); + color: var(--dg-agent-tab-active-color); + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.22), + -2px 0 5px rgba(0, 0, 0, 0.14), + 2px 0 5px rgba(0, 0, 0, 0.14); +} + +.dg-dialog--character-creation .dg-dialog__tab-panels > .tab.active { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.dg-dialog--character-creation .dg-dialog__tab-panels { + flex: 1; + min-height: 0; +} + +.dg-dialog--character-creation .dg-dialog__tab-panels > .tab { + display: none; + overflow-y: auto; + max-height: 28rem; +} + +.dg-dialog--character-creation .dg-dialog__tab-panels > .tab.active { + display: block; +} + +.dg-dialog--character-creation .character-creation-skills-section { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; + overflow: hidden; + margin-bottom: 0.5rem; +} + +.dg-dialog--character-creation .character-creation-skill-totals-header { + margin-bottom: 0.5rem; + flex: 0 0 auto; +} + +.dg-dialog--character-creation + .character-creation-skill-totals-header + .dg-dialog__intro { + margin: 0; + line-height: 1.4; +} + +.dg-dialog--character-creation .character-creation-section-heading { + font-size: var(--font-size-16); + margin: 0 0 0.5rem; + line-height: 1.35; +} + +.dg-dialog--character-creation .character-creation-skills-columns-header { + flex: 0 0 auto; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.75rem; + margin-bottom: 0.25rem; + font-size: var(--font-size-12); + font-weight: bold; +} + +.dg-dialog--character-creation .character-creation-skill-col-header { + display: grid; + grid-template-columns: 1fr auto; + gap: 0.5rem; + padding: 0 0.15rem; +} + +.dg-dialog--character-creation .character-creation-skills-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.2rem 0.75rem; + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + scrollbar-color: #215112 #111 !important; +} + +.dg-dialog--character-creation .dg-dialog__skill-entry { + display: grid; + grid-template-columns: 1fr auto; + gap: 0.25rem 0.5rem; + align-items: center; + min-width: 0; +} + +.dg-dialog--character-creation .dg-dialog__skill-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.dg-dialog--character-creation .dg-dialog__skill-value { + text-align: right; + min-width: 2.5rem; +} + +.dg-dialog--character-creation + .dg-dialog__skill-entry.is-modified + .dg-dialog__skill-label, +.dg-dialog--character-creation + .dg-dialog__skill-entry.is-modified + .dg-dialog__skill-value { + color: var(--color-text-success, #2d8a3e); +} + +.dg-dialog--character-creation .character-creation-choose-one-section { + flex: 0 0 auto; + margin: 0.5rem 0; +} + +.dg-dialog--character-creation .character-creation-choose-one-list { + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.dg-dialog--character-creation .character-creation-choose-one-row { + display: flex; + flex-direction: column; + gap: 0.2rem; +} + +.dg-dialog--character-creation .character-creation-choose-one-row input { + width: 100%; +} + +.dg-dialog--character-creation .character-creation-option-list { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 0.75rem; + margin: 0; + padding: 0; +} + +.dg-dialog--character-creation .character-creation-option-column { + flex: 1 1 0; + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.dg-dialog--character-creation .character-creation-option-row { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.25rem; + min-width: 0; +} + +.dg-dialog--character-creation .character-creation-option-row > label { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.35rem; + width: 100%; + min-width: 0; +} + +.dg-dialog--character-creation + .character-creation-option-row + .option-skill-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; + flex: 1 1 auto; +} + +.dg-dialog--character-creation + .character-creation-option-row + .option-choose-one-label { + width: 100%; +} + +.dg-dialog--character-creation + .character-creation-option-row + .option-choose-one-label:disabled { + opacity: 0.65; +} + +.dg-dialog--character-creation + .dg-dialog__tab-panels + > .tab[data-tab="bonus-skills"].active { + display: flex; + flex-direction: column; + min-height: 28rem; + box-sizing: border-box; +} + +.dg-dialog--character-creation .character-creation-bonus-intro { + flex: 0 0 auto; + margin: 0 0 0.5rem; + line-height: 1.4; +} + +.dg-dialog--character-creation .character-creation-bonus-grid { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: space-evenly; + min-height: 0; + margin: 0; + padding: 0; +} + +.dg-dialog--character-creation .character-creation-bonus-slot { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.35rem; + min-width: 0; + flex: 0 0 auto; +} + +.dg-dialog--character-creation .character-creation-bonus-slot select { + flex: 0 1 11rem; + min-width: 7rem; +} + +.dg-dialog--character-creation + .character-creation-bonus-slot + .bonus-typed-label { + flex: 1 1 0; + min-width: 5rem; +} + +.dg-dialog--character-creation + .character-creation-bonus-slot + .bonus-typed-label.hidden { + display: none; +} + +.dg-dialog--character-creation + .dg-dialog__tab-panels + > .tab[data-tab="bonds"].active { + display: flex; + flex-direction: column; + min-height: 28rem; + box-sizing: border-box; +} + +.dg-dialog--character-creation .character-creation-bonds-list { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: space-evenly; + min-height: 0; + margin: 0; + padding: 0; +} + +.dg-dialog--character-creation .character-creation-bonds-intro { + flex: 0 0 auto; + margin: 0 0 0.5rem; + line-height: 1.4; +} + +.dg-dialog--character-creation .character-creation-bond-row { + display: grid; + grid-template-columns: 1fr 1fr 3.5rem; + gap: 0.35rem 0.5rem; + align-items: end; + min-width: 0; + flex: 0 0 auto; +} + +.dg-dialog--character-creation .character-creation-bond-field { + display: flex; + flex-direction: column; + gap: 0.15rem; + min-width: 0; + font-size: var(--font-size-12); +} + +.dg-dialog--character-creation .character-creation-bond-field-label { + white-space: nowrap; +} + +.dg-dialog--character-creation .character-creation-bond-field input { + width: 100%; + min-width: 0; +} + +.dg-dialog--character-creation .character-creation-bond-field-score input { + text-align: center; +} diff --git a/scss/dialogue.scss b/scss/dialogue.scss new file mode 100644 index 0000000..094fc96 --- /dev/null +++ b/scss/dialogue.scss @@ -0,0 +1,28 @@ +.damage-modify-label-grid { + display: grid; + grid-template-columns: auto auto; + align-content: left; + justify-content: left; + align-items: left; + padding: 10px; + grid-gap: 10px 15px; +} + +.damage-modify-formula-modify-grid { + display: grid; + grid-template-columns: auto auto auto auto auto auto; + align-content: left; + justify-content: left; + align-items: left; + padding: 10px; + grid-gap: 10px 15px; +} + +.damage-roll-formula-part { + min-width: 100px !important; + text-align: center !important; +} + +.damage-modify-roll-mode { + padding: 10px; +}