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 (#1871)
Some checks are pending
Project CI / build (24.x) (push) Waiting to run
Details

Browse source 
* Implement another traits redesign

* Adjust traits shape
This commit is contained in:
Carlos Fernandez 2026-05-08 09:08:25 -04:00 • committed by GitHub
parent 40804f3339
commit 9ef4929693
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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

@ -212,59 +212,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 {