Foundry/taf
1
0
Fork 0
Code Issues 13 Pull requests Releases 9 Wiki Activity Actions

Update the theming for Actor sheets #80

Merged
Oliver merged 5 commits from theming/actor-sheet into main 2026-04-30 01:57:13 +00:00
Conversation 0 Commits 5 Files changed 11 +168 -33
11 changed files with 168 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.vscode/settings.json vendored
View file

@ -10,7 +10,8 @@
"*.lock": true,
"node_modules": true,
"packs": true,
"foundry": true
"foundry": true,
"scripts": true,
},
"html.customData": [
"./.vscode/components.html-data.json"

3
langs/en-ca.json
View file

@ -73,7 +73,8 @@
},
"attribute": {
"key": {
"hint": "This is the computer-friendly identifier for the attribute. When accessing the attribute in rolls, this is the name you will need to use. Changing this WILL break any existing macros you have."
"label": "Identifier",
"hint": "This is the computer-friendly name for the attribute. When accessing the attribute in rolls, this is the name you will need to use. Changing this will most likely break any existing macros you have."
},
"always-visible": "Always Visible",
"minimum": "Minimum",

2
module/data/Item/attribute.mjs
View file

@ -145,7 +145,7 @@ export class AttributeItemData extends foundry.abstract.TypeDataModel {
});
};
await macro?.execute({ item });
await macro?.execute({ item: this.parent });
};
// #endregion Methods
};

66
styles/Apps/PlayerSheet.css
View file

@ -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,15 @@
margin: 0 auto;
> input {
color: var(--attribute-colour);
background: var(--attribute-input-background);
text-align: center;
height: 24px;
min-height: unset;
&:focus {
outline: 1px solid var(--attribute-input-focus-colour);
}
}
}
@ -192,17 +216,32 @@
font-size: 1.1rem;
}
input {
width: 50px;
}
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;
&:disabled {
color: var(--item-card-header-disabled-input-colour);
color: var(--attribute-disabled-input-colour);
}
}
input {
width: 50px;
&:focus {
outline: 1px solid var(--attribute-input-focus-colour);
}
}
button {
&:active {
background: var(--attribute-button-active-background);
}
&:focus-visible {
outline: 1px solid var(--attribute-input-focus-colour);
}
}
@ -219,6 +258,7 @@
}
.content {
border-radius: 6px;
flex-grow: 1;
overflow: hidden;
--table-row-color-odd: var(--table-header-bg-color);

27
styles/Apps/common.css
View file

@ -12,19 +12,34 @@
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;
transition: unset;
&:hover {
background: var(--tab-button-hover-bg);
color: var(--tab-button-hover-colour);
}
&:focus-visible {
color: var(--tab-button-focus-colour);
border-color: var(--tab-button-focus-colour);
border-radius: 4px;
}
&.active {
color: var(--tab-button-active-colour);
border-bottom: 2px solid currentColor;
outline: none;
}
}
}

15
styles/elements/button.css
View file

@ -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;
}

2
styles/elements/hr.css
View file

@ -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;

46
styles/elements/prose-mirror.css
View file

@ -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);
}
}

34
styles/themes/dark.css
View file

@ -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,38 @@
--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-focus-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-button-active-background: var(--steel-650);
--attribute-disabled-input-colour: var(--steel-350);
--item-card-background: #1d262f;
@ -36,6 +55,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 */

2
templates/AttributeItemSheet/settings.hbs
View file

@ -1,7 +1,7 @@
<div>
<div class="property">
<label for="{{meta.idp}}-key">
{{ localize "taf.misc.key" }}
{{ localize "taf.misc.attribute.key.label" }}
</label>
<input
type="text"

1
templates/PlayerSheet/primary-attributes.hbs
View file

@ -9,6 +9,7 @@
{{#if attr.system.trigger}}
<button
type="button"
class="inline"
data-action="executeTrigger"
>
{{ attr.name }}