cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-06-06 04:44:16 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add trait header colors and shadow contrast

Browse source
This commit is contained in:
Carlos Fernandez 2026-05-26 23:11:07 -04:00
parent 988dc82c36
commit b96c71fab6
5 changed files with 24 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

10
styles/less/sheets/actors/character/header.less
View file

@ -226,7 +226,6 @@
padding-left: 0.5rem; padding-left: 0.5rem;
.trait { .trait {
--color-border: light-dark(@semi-transparent-dark-blue, @golden-60);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -238,10 +237,10 @@
.trait-name { .trait-name {
position: relative; position: relative;
background-color: light-dark(@semi-transparent-dark-blue, @golden-40); background-color: @trait-color-bg;
border: 1px solid var(--color-border); border: 1px solid @trait-color-border;
border-radius: 3px; border-radius: 3px;
color: light-dark(var(--color-light-1), @golden); color: @color-text-emphatic;
font-size: var(--font-size-12); font-size: var(--font-size-12);
font-weight: 600; font-weight: 600;
height: 1rem; height: 1rem;
@ -250,7 +249,7 @@
width: 100%; width: 100%;
padding: 0 0.1876px 0 0.375rem; padding: 0 0.1876px 0 0.375rem;
margin-right: 0.125rem; /* makes it center SLIGHTLY */ margin-right: 0.125rem; /* makes it center SLIGHTLY */
text-shadow: 1px 1px 2px @light-black; text-shadow: 1px 1px 3px @color-text-shadow-contrast;
display: flex; display: flex;
align-items: center; align-items: center;
@ -279,6 +278,7 @@
} }
.trait-value-area { .trait-value-area {
--color-border: @trait-color-border;
--background: light-dark(#e8e6e3, @dark-blue); --background: light-dark(#e8e6e3, @dark-blue);
display: flex; display: flex;
position: relative; position: relative;

6
styles/less/sheets/actors/companion/header.less
View file

@ -30,14 +30,14 @@
font-size: var(--font-size-24); font-size: var(--font-size-24);
outline: 2px solid transparent; outline: 2px solid transparent;
box-shadow: unset; box-shadow: unset;
text-shadow: 0 0 4px light-dark(white, @dark-80), 0 0 8px light-dark(white, @dark-80), 0 0 14px light-dark(white, @dark-80); text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
height: 2rem; height: 2rem;
text-align: center; text-align: center;
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
outline: 2px solid light-dark(@dark, @golden); outline: 2px solid @color-border;
} }
} }
} }

5
styles/less/sheets/actors/environment/header.less
View file

@ -36,15 +36,14 @@
transition: all 0.3s ease; transition: all 0.3s ease;
outline: 2px solid transparent; outline: 2px solid transparent;
box-shadow: none; box-shadow: none;
text-shadow: 0 0 4px light-dark(white, @dark-80), 0 0 8px light-dark(white, @dark-80), 0 0 14px light-dark(white, @dark-80); text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
padding-left: 0; padding-left: 0;
height: 2.625rem; height: 2.625rem;
&:hover[type='text'], &:hover[type='text'],
&:focus[type='text'] { &:focus[type='text'] {
box-shadow: none; box-shadow: none;
outline: 2px solid light-dark(@dark-blue, @golden); outline: 2px solid @color-border;
} }
} }

4
styles/less/sheets/actors/party/header.less
View file

@ -25,7 +25,7 @@
font-size: var(--font-size-32); font-size: var(--font-size-32);
outline: 2px solid transparent; outline: 2px solid transparent;
box-shadow: unset; box-shadow: unset;
text-shadow: 0 0 4px light-dark(white, @dark-80), 0 0 8px light-dark(white, @dark-80), 0 0 14px light-dark(white, @dark-80); text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
text-align: center; text-align: center;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -34,7 +34,7 @@
&:hover[type='text'], &:hover[type='text'],
&:focus[type='text'] { &:focus[type='text'] {
outline: 2px solid light-dark(@dark-blue, @golden); outline: 2px solid @color-border;
} }
} }

13
styles/less/utils/colors.less
View file

@ -71,6 +71,7 @@
--beige-filter: brightness(0) saturate(100%) invert(87%) sepia(25%) saturate(164%) hue-rotate(339deg) brightness(106%) contrast(87%); --beige-filter: brightness(0) saturate(100%) invert(87%) sepia(25%) saturate(164%) hue-rotate(339deg) brightness(106%) contrast(87%);
--bright-beige-filter: brightness(0) saturate(100%) invert(87%) sepia(15%) saturate(343%) hue-rotate(333deg) brightness(110%) contrast(87%); --bright-beige-filter: brightness(0) saturate(100%) invert(87%) sepia(15%) saturate(343%) hue-rotate(333deg) brightness(110%) contrast(87%);
--light-white: rgba(255, 255, 255, 0.3);
--soft-white-shadow: rgba(255, 255, 255, 0.05); --soft-white-shadow: rgba(255, 255, 255, 0.05);
--light-black: rgba(0, 0, 0, 0.3); --light-black: rgba(0, 0, 0, 0.3);
@ -101,8 +102,11 @@
--color-text-emphatic: @dark-blue; --color-text-emphatic: @dark-blue;
--color-text-subtle: #555; --color-text-subtle: #555;
--dh-color-text-shadow-contrast: #ffffffa0;
--dh-input-color-border: @dark; --dh-input-color-border: @dark;
--dh-input-color-text: @dark; --dh-input-color-text: @dark;
--dh-trait-color-bg: #b1afb6;
--dh-trait-color-border: #8e8d96;
} }
} }
@scope (.theme-dark) to (.themed) { @scope (.theme-dark) to (.themed) {
@ -115,8 +119,11 @@
--color-text-emphatic: @golden; --color-text-emphatic: @golden;
--color-text-subtle: #a29086; --color-text-subtle: #a29086;
--dh-color-text-shadow-contrast: @dark-80;
--dh-input-color-border: @beige; --dh-input-color-border: @beige;
--dh-input-color-text: @beige; --dh-input-color-text: @beige;
--dh-trait-color-bg: #50433F;
--dh-trait-color-border: #927952;
} }
} }
@ -194,6 +201,7 @@
@soft-white-shadow: var(--soft-white-shadow, rgba(255, 255, 255, 0.05)); @soft-white-shadow: var(--soft-white-shadow, rgba(255, 255, 255, 0.05));
@light-white: var(--light-white, rgba(255, 255, 255, 0.3));
@light-black: var(--light-black, rgba(0, 0, 0, 0.3)); @light-black: var(--light-black, rgba(0, 0, 0, 0.3));
@soft-shadow: var(--soft-shadow, rgba(0, 0, 0, 0.05)); @soft-shadow: var(--soft-shadow, rgba(0, 0, 0, 0.05));
@ -232,5 +240,8 @@
@color-text-emphatic: var(--color-text-emphatic); @color-text-emphatic: var(--color-text-emphatic);
@color-text-primary: var(--color-text-primary); @color-text-primary: var(--color-text-primary);
@color-text-subtle: var(--color-text-subtle); @color-text-subtle: var(--color-text-subtle);
@color-text-shadow-contrast: var(--dh-color-text-shadow-contrast);
@input-color-border: var(--dh-input-color-border); @input-color-border: var(--dh-input-color-border);
@input-color-text: var(--dh-input-color-text); @input-color-text: var(--dh-input-color-text);
@trait-color-bg: var(--dh-trait-color-bg);
@trait-color-border: var(--dh-trait-color-border);