From dafb7981427d5ec80b21dc9f5dd6cebed6eda128 Mon Sep 17 00:00:00 2001 From: Aaron Lutomski Date: Fri, 29 May 2026 21:02:15 -0700 Subject: [PATCH] Refactor CSS into Sass --- .github/workflows/format-lint-check.yml | 11 + .github/workflows/publish-dev-release.yml | 6 + .github/workflows/publish-prod-release.yml | 6 + .gitignore | 4 + .prettierignore | 4 + .vscode/extensions.json | 3 +- CONTRIBUTING.md | 34 +- css/.gitkeep | 0 package-lock.json | 612 +++++++++++++++- package.json | 8 +- scss/_editor.scss | 28 + scss/_fonts.scss | 39 ++ scss/_mixins.scss | 60 ++ scss/_utilities.scss | 214 ++++++ scss/_variables.scss | 7 + scss/deltagreen.scss | 16 + scss/deltagreen/_active-effects.scss | 76 ++ scss/deltagreen/_agent-sheet.scss | 581 +++++++++++++++ scss/deltagreen/_character-sheet-cont.scss | 294 ++++++++ scss/deltagreen/_character-sheet.scss | 265 +++++++ scss/deltagreen/_chat-cards.scss | 109 +++ scss/deltagreen/_effects-tab.scss | 107 +++ scss/deltagreen/_foundry-theme.scss | 90 +++ scss/deltagreen/_global.scss | 8 + scss/deltagreen/_item-sheets.scss | 305 ++++++++ scss/deltagreen/_profession.scss | 115 +++ scss/deltagreen/_prose-mirror.scss | 154 ++++ scss/deltagreen/_stats-edit.scss | 56 ++ scss/dg-dialog.scss | 2 + scss/dg-dialog/_base.scss | 98 +++ scss/dg-dialog/_dialogs.scss | 778 +++++++++++++++++++++ scss/dialogue.scss | 28 + 32 files changed, 4108 insertions(+), 10 deletions(-) create mode 100644 css/.gitkeep create mode 100644 scss/_editor.scss create mode 100644 scss/_fonts.scss create mode 100644 scss/_mixins.scss create mode 100644 scss/_utilities.scss create mode 100644 scss/_variables.scss create mode 100644 scss/deltagreen.scss create mode 100644 scss/deltagreen/_active-effects.scss create mode 100644 scss/deltagreen/_agent-sheet.scss create mode 100644 scss/deltagreen/_character-sheet-cont.scss create mode 100644 scss/deltagreen/_character-sheet.scss create mode 100644 scss/deltagreen/_chat-cards.scss create mode 100644 scss/deltagreen/_effects-tab.scss create mode 100644 scss/deltagreen/_foundry-theme.scss create mode 100644 scss/deltagreen/_global.scss create mode 100644 scss/deltagreen/_item-sheets.scss create mode 100644 scss/deltagreen/_profession.scss create mode 100644 scss/deltagreen/_prose-mirror.scss create mode 100644 scss/deltagreen/_stats-edit.scss create mode 100644 scss/dg-dialog.scss create mode 100644 scss/dg-dialog/_base.scss create mode 100644 scss/dg-dialog/_dialogs.scss create mode 100644 scss/dialogue.scss 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; +}