From f64dbcd42fe8236ae15c9d87077a9fbdb0fbc241 Mon Sep 17 00:00:00 2001 From: Oliver Date: Wed, 29 Apr 2026 00:15:52 -0600 Subject: [PATCH] Update the styling of the actor sheet --- styles/Apps/PlayerSheet.css | 46 ++++++++++++++++---- styles/Apps/common.css | 20 ++++++--- styles/elements/button.css | 15 +++++++ styles/elements/hr.css | 2 +- styles/elements/prose-mirror.css | 46 +++++++++++++++++++- styles/themes/dark.css | 32 +++++++++++--- templates/PlayerSheet/primary-attributes.hbs | 1 + 7 files changed, 137 insertions(+), 25 deletions(-) diff --git a/styles/Apps/PlayerSheet.css b/styles/Apps/PlayerSheet.css index f83f335..3e7f281 100644 --- a/styles/Apps/PlayerSheet.css +++ b/styles/Apps/PlayerSheet.css @@ -1,7 +1,6 @@ .taf.PlayerSheet { - .sheet-header, fieldset, .content { - border-radius: 8px; - border: 1px solid rebeccapurple; + > .window-content { + background: var(--actor-sheet-background); } .sheet-header { @@ -9,19 +8,36 @@ flex-direction: row; align-items: center; gap: 0.5rem; - padding: 4px; + padding: 0.5rem; + margin: -0.5rem -0.5rem 0; + color: var(--actor-sheet-header-colour); + background: var(--actor-sheet-header-background); + border-bottom: 1px solid var(--actor-sheet-divider-colour); img { border-radius: 4px; } + + input { + color: var(--actor-sheet-header-input-colour); + background: var(--actor-sheet-header-input-background); + } } .attributes { display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: space-around; - gap: 0.5rem; + justify-content: space-evenly; + gap: 0.25rem; + + fieldset { + color: var(--attribute-colour); + background: var(--attribute-background); + border-radius: 6px; + border: none; + padding: 6px; + } } .attr-range { @@ -33,7 +49,11 @@ margin: 0 auto; > input { + color: var(--attribute-colour); + background: var(--attribute-input-background); text-align: center; + height: 24px; + min-height: unset; } } @@ -197,12 +217,19 @@ } input, button { - background: var(--item-card-header-input-background); - color: var(--item-card-header-input-colour); + border: none; + background: var(--attribute-input-background); + color: var(--attribute-input-colour); text-align: center; + height: 24px; + min-height: unset; + + &:focus-visible { + outline: 1px solid var(--attribute-input-focus-colour); + } &:disabled { - color: var(--item-card-header-disabled-input-colour); + color: var(--attribute-disabled-input-colour); } } @@ -219,6 +246,7 @@ } .content { + border-radius: 6px; flex-grow: 1; overflow: hidden; --table-row-color-odd: var(--table-header-bg-color); diff --git a/styles/Apps/common.css b/styles/Apps/common.css index d673ac7..7e7b5ac 100644 --- a/styles/Apps/common.css +++ b/styles/Apps/common.css @@ -12,19 +12,27 @@ flex-direction: row; justify-content: left; align-items: center; - gap: 8px; + margin: 0 -0.5rem; + border-bottom: 1px solid var(--tab-nav-divider-colour); button { + color: var(--tab-button-colour); border: none; text-shadow: none; box-shadow: none; - - &.active { - outline: 1px solid var(--tab-button-active-border); - } + outline: none; + background: transparent; + border-radius: 0; + border: 2px solid transparent; &:hover { - background: var(--tab-button-hover-bg); + color: var(--tab-button-hover-colour); + } + + &.active { + color: var(--tab-button-active-colour); + border-bottom: 2px solid currentColor; + outline: none; } } } diff --git a/styles/elements/button.css b/styles/elements/button.css index ddda02d..3343304 100644 --- a/styles/elements/button.css +++ b/styles/elements/button.css @@ -1,4 +1,19 @@ .taf > .window-content button { + &.inline { + color: inherit; + min-height: unset; + height: auto; + padding: 0; + background: none; + border: none; + outline: none; + text-decoration: underline; + + &:hover { + background: none; + } + } + &:disabled { cursor: not-allowed; } diff --git a/styles/elements/hr.css b/styles/elements/hr.css index f5b37f8..e027393 100644 --- a/styles/elements/hr.css +++ b/styles/elements/hr.css @@ -2,7 +2,7 @@ color: inherit; display: block; height: 1px; - background: var(--divider-colour, rebeccapurple); + background: var(--divider-colour, var(--steel-100, currentColor)); border-radius: 0; margin: 0; padding: 0; diff --git a/styles/elements/prose-mirror.css b/styles/elements/prose-mirror.css index 85420d7..6f257f0 100644 --- a/styles/elements/prose-mirror.css +++ b/styles/elements/prose-mirror.css @@ -1,13 +1,55 @@ .taf > .window-content prose-mirror { + color: var(--prosemirror-colour); + --table-row-color-odd: var(--steel-550); + --table-row-color-even: var(--steel-600); background: var(--prosemirror-background); gap: 0; + menu { + background: var(--prosemirror-menu-background); + } + + button { + color: var(--prosemirror-menu-colour); + + &.icon.toggle { + border: none; + background: var(--prosemirror-toggle-background); + padding: 6px; + + &:hover { + background: var(--prosemirror-toggle-hover-background); + } + } + } + .editor-content { padding: 8px; } + p { + color: inherit; + } + .tableWrapper th, - .tableWrapper td { - border-color: rebeccapurple; + .tableWrapper td, + table th, + table td { + border-color: var(--prosemirror-divider-colour); + } + + table td, table th { + border: 1px solid var(--prosemirror-divider-colour); + } + + pre:has(> code), code:not(pre > code) { + padding: 4px 6px; + background: var(--steel-700); + color: var(--steel-200); + } + + blockquote { + color: inherit; + border-left: 2px solid var(--steel-200); } } diff --git a/styles/themes/dark.css b/styles/themes/dark.css index 3d008e2..96990a8 100644 --- a/styles/themes/dark.css +++ b/styles/themes/dark.css @@ -1,5 +1,12 @@ .theme-dark { - --prosemirror-background: var(--color-cool-5); + /* Prose Mirror Elements */ + --prosemirror-colour: var(--steel-100); + --prosemirror-background: var(--steel-650); + --prosemirror-toggle-background: var(--steel-700); + --prosemirror-toggle-hover-background: var(--steel-600); + --prosemirror-menu-colour: var(--steel-100); + --prosemirror-menu-background: var(--steel-750); + --prosemirror-divider-colour: var(--steel-250); --spinner-outer-colour: white; --spinner-inner-colour: #FF3D00; @@ -8,26 +15,36 @@ --toggle-slider-unchecked-colour: maroon; --toggle-slider-checked-colour: green; - --tab-button-active-border: rebeccapurple; - --tab-button-hover-bg: var(--color-cool-3); + --tab-nav-divider-colour: var(--steel-750); + --tab-button-colour: var(--steel-200); + --tab-button-hover-colour: var(--steel-100); + --tab-button-active-colour: white; /* Actor Sheet Variables */ - /* Use --steel-850 as the main sheet background */ - --inventory-summary-background: var(--steel-800); + --actor-sheet-colour: var(--steel-100); + --actor-sheet-background: var(--steel-850); + --actor-sheet-divider-colour: var(--steel-700); + --actor-sheet-header-colour: var(--steel-100); + --actor-sheet-header-background: var(--steel-900); + --actor-sheet-header-input-colour: var(--steel-100); + --actor-sheet-header-input-background: var(--steel-650); + + --inventory-summary-background: var(--steel-750); --inventory-summary-colour: var(--steel-100); --inventory-input-background: var(--steel-650); --inventory-input-colour: var(--steel-100); --inventory-input-disabled-colour: var(--steel-350); - --embedded-list-header-background: var(--steel-800); + --embedded-list-header-background: var(--steel-750); --embedded-list-header-colour: var(--steel-100); --embedded-list-header-input-background: var(--steel-650); --embedded-list-header-input-colour: var(--steel-100); --attribute-background: var(--steel-700); --attribute-colour: var(--steel-100); - --attribute-input-background: var(--steel-650); + --attribute-input-background: var(--steel-600); --attribute-input-colour: var(--steel-100); + --attribute-input-focus-colour: var(--zinc-250); --attribute-disabled-input-colour: var(--steel-350); --item-card-background: #1d262f; @@ -36,6 +53,7 @@ --item-card-header-colour: var(--steel-100); --item-card-header-input-background: var(--steel-650); --item-card-header-input-colour: var(--steel-100); + --item-card-header-input-focus-colour: var(--zinc-250); --item-card-header-disabled-input-colour: var(--steel-350); /* Item Sheet Variables */ diff --git a/templates/PlayerSheet/primary-attributes.hbs b/templates/PlayerSheet/primary-attributes.hbs index bb3d294..1912d2d 100644 --- a/templates/PlayerSheet/primary-attributes.hbs +++ b/templates/PlayerSheet/primary-attributes.hbs @@ -9,6 +9,7 @@ {{#if attr.system.trigger}}