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 +137 -25
7 changed files with 137 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit f64dbcd42f - Show all commits

46
styles/Apps/PlayerSheet.css
View file

@ -1,7 +1,6 @@
.taf.PlayerSheet { .taf.PlayerSheet {
.sheet-header, fieldset, .content { > .window-content {
border-radius: 8px; background: var(--actor-sheet-background);
border: 1px solid rebeccapurple;
} }
.sheet-header { .sheet-header {
@ -9,19 +8,36 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 0.5rem; 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 { img {
border-radius: 4px; border-radius: 4px;
} }
input {
color: var(--actor-sheet-header-input-colour);
background: var(--actor-sheet-header-input-background);
}
} }
.attributes { .attributes {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-evenly;
gap: 0.5rem; gap: 0.25rem;
fieldset {
color: var(--attribute-colour);
background: var(--attribute-background);
border-radius: 6px;
border: none;
padding: 6px;
}
} }
.attr-range { .attr-range {
@ -33,7 +49,11 @@
margin: 0 auto; margin: 0 auto;
> input { > input {
color: var(--attribute-colour);
background: var(--attribute-input-background);
text-align: center; text-align: center;
height: 24px;
min-height: unset;
} }
} }
@ -197,12 +217,19 @@
} }
input, button { input, button {
background: var(--item-card-header-input-background); border: none;
color: var(--item-card-header-input-colour); background: var(--attribute-input-background);
color: var(--attribute-input-colour);
text-align: center; text-align: center;
height: 24px;
min-height: unset;
&:focus-visible {
outline: 1px solid var(--attribute-input-focus-colour);
}
&:disabled { &:disabled {
color: var(--item-card-header-disabled-input-colour); color: var(--attribute-disabled-input-colour);
} }
} }
@ -219,6 +246,7 @@
} }
.content { .content {
border-radius: 6px;
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
--table-row-color-odd: var(--table-header-bg-color); --table-row-color-odd: var(--table-header-bg-color);

20
styles/Apps/common.css
View file

@ -12,19 +12,27 @@
flex-direction: row; flex-direction: row;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
gap: 8px; margin: 0 -0.5rem;
border-bottom: 1px solid var(--tab-nav-divider-colour);
button { button {
color: var(--tab-button-colour);
border: none; border: none;
text-shadow: none; text-shadow: none;
box-shadow: none; box-shadow: none;
outline: none;
&.active { background: transparent;
outline: 1px solid var(--tab-button-active-border); border-radius: 0;
} border: 2px solid transparent;
&:hover { &: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;
} }
} }
} }

15
styles/elements/button.css
View file

@ -1,4 +1,19 @@
.taf > .window-content button { .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 { &:disabled {
cursor: not-allowed; cursor: not-allowed;
} }

2
styles/elements/hr.css
View file

@ -2,7 +2,7 @@
color: inherit; color: inherit;
display: block; display: block;
height: 1px; height: 1px;
background: var(--divider-colour, rebeccapurple); background: var(--divider-colour, var(--steel-100, currentColor));
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;

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

@ -1,13 +1,55 @@
.taf > .window-content prose-mirror { .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); background: var(--prosemirror-background);
gap: 0; 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 { .editor-content {
padding: 8px; padding: 8px;
} }
p {
color: inherit;
}
.tableWrapper th, .tableWrapper th,
.tableWrapper td { .tableWrapper td,
border-color: rebeccapurple; 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);
} }
} }

32
styles/themes/dark.css
View file

@ -1,5 +1,12 @@
.theme-dark { .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-outer-colour: white;
--spinner-inner-colour: #FF3D00; --spinner-inner-colour: #FF3D00;
@ -8,26 +15,36 @@
--toggle-slider-unchecked-colour: maroon; --toggle-slider-unchecked-colour: maroon;
--toggle-slider-checked-colour: green; --toggle-slider-checked-colour: green;
--tab-button-active-border: rebeccapurple; --tab-nav-divider-colour: var(--steel-750);
--tab-button-hover-bg: var(--color-cool-3); --tab-button-colour: var(--steel-200);
--tab-button-hover-colour: var(--steel-100);
--tab-button-active-colour: white;
/* Actor Sheet Variables */ /* Actor Sheet Variables */
/* Use --steel-850 as the main sheet background */ --actor-sheet-colour: var(--steel-100);
--inventory-summary-background: var(--steel-800); --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-summary-colour: var(--steel-100);
--inventory-input-background: var(--steel-650); --inventory-input-background: var(--steel-650);
--inventory-input-colour: var(--steel-100); --inventory-input-colour: var(--steel-100);
--inventory-input-disabled-colour: var(--steel-350); --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-colour: var(--steel-100);
--embedded-list-header-input-background: var(--steel-650); --embedded-list-header-input-background: var(--steel-650);
--embedded-list-header-input-colour: var(--steel-100); --embedded-list-header-input-colour: var(--steel-100);
--attribute-background: var(--steel-700); --attribute-background: var(--steel-700);
--attribute-colour: var(--steel-100); --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-colour: var(--steel-100);
--attribute-input-focus-colour: var(--zinc-250);
--attribute-disabled-input-colour: var(--steel-350); --attribute-disabled-input-colour: var(--steel-350);
--item-card-background: #1d262f; --item-card-background: #1d262f;
@ -36,6 +53,7 @@
--item-card-header-colour: var(--steel-100); --item-card-header-colour: var(--steel-100);
--item-card-header-input-background: var(--steel-650); --item-card-header-input-background: var(--steel-650);
--item-card-header-input-colour: var(--steel-100); --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-card-header-disabled-input-colour: var(--steel-350);
/* Item Sheet Variables */ /* Item Sheet Variables */

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

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