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

Implement another traits redesign

Browse source
This commit is contained in:
Carlos Fernandez 2026-05-05 03:26:05 -04:00
parent 94852cec21
commit e4d8530b03
4 changed files with 105 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -211,59 +211,101 @@
display: flex;
padding: 0;
margin-bottom: 15px;
gap: 8px;
justify-content: space-between;
max-width: 38.5rem;
gap: 0.5rem;
padding-left: 0.5rem;
.trait {
height: 3.625rem;
--color-border: light-dark(@semi-transparent-dark-blue, @golden-60);
cursor: pointer;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
flex: 1;
position: relative;
background-color: light-dark(transparent, @dark-blue);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-width: 4.375rem;
.trait-name {
display: flex;
align-items: center;
padding-top: 5px;
color: light-dark(@dark-blue, @golden);
position: relative;
background-color: light-dark(@semi-transparent-dark-blue, @golden-40);
border: 1px solid var(--color-border);
border-radius: 3px;
color: light-dark(var(--color-light-1), @golden);
font-size: var(--font-size-12);
font-weight: 600;
height: 1rem;
line-height: 1rem;
white-space: nowrap;
width: 100%;
padding: 0 0.1876px 0 0.375rem;
margin-right: 0.125rem; /* makes it center SLIGHTLY */
text-shadow: 1px 1px 2px @light-black;
display: flex;
align-items: center;
justify-content: center;
}
.trait-value {
font-style: normal;
font-weight: 600;
font-size: var(--font-size-20);
text-align: center;
margin-bottom: 0.375rem;
}
.tier-mark,
.spellcasting-mark {
position: absolute;
opacity: 0.9;
color: light-dark(@dark-blue, @golden);
i {
line-height: 17px;
font-size: var(--font-size-11);
.tier-mark {
position: absolute;
background-color: @dark-blue;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 50%;
width: 1rem;
height: 1rem;
right: calc(100% - 0.4375rem);
display: flex;
justify-content: center;
align-items: center;
&.marked::before {
content: ' ';
position: absolute;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: @golden;
}
}
}
.tier-mark {
bottom: 1px;
left: 3px;
}
.trait-value-area {
--background: light-dark(#e8e6e3, @dark-blue);
display: flex;
position: relative;
.trait-value {
position: absolute;
inset: 0;
display: flex;
align-items: center;
.spellcasting-mark {
bottom: 1px;
right: 3px;
justify-content: center;
font-style: normal;
font-weight: 600;
font-size: var(--font-size-20);
text-align: center;
margin-bottom: 0.375rem;
}
.spellcasting-mark {
position: absolute;
border: 1px solid light-dark(@dark-blue, @golden);
color: @golden;
left: 0;
right: 0;
bottom: -0.375rem;
margin-inline: auto;
border-radius: 50%;
width: 1.125rem;
height: 1.125rem;
background: radial-gradient(190.63% 190.63% at 50% -80.63%, #18152E 70%, #4D4494 80%, #A0837E 90%, var(--color-border) 100%);
font-size: var(--font-size-9);
text-shadow: 0 0 2px @light-black;
display: flex;
align-items: center;
justify-content: center;
}
}
&:hover {

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

@ -5,6 +5,7 @@
--golden: #f3c267;
--golden-10: #f3c26710;
--golden-40: #f3c26740;
--golden-60: #f3c26760;
--golden-90: #f3c26790;
--golden-bg: #f3c2671a;
--golden-secondary: #eaaf42;
@ -89,6 +90,7 @@
@golden: var(--golden, #f3c267);
@golden-10: var(--golden-10, #f3c26710);
@golden-40: var(--golden-40, #f3c26740);
@golden-60: var(--golden-60, #f3c26760);
@golden-90: var(--golden-90, #f3c26790);
@golden-bg: var(--golden-bg, #f3c2671a);
@golden-secondary: var(--golden-secondary, #eaaf42);

2
styles/less/utils/fonts.less
View file

@ -7,6 +7,8 @@
--dh-font-body: 'Montserrat';
/* Include missing font sizes */
--font-size-8: 0.5rem;
--font-size-9: 0.5625rem;
--font-size-22: 1.375rem;
}