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

Rework styling of traits section of the character sheet

Browse source
This commit is contained in:
Carlos Fernandez 2026-05-04 02:39:43 -04:00
parent 85ca7efc6d
commit d39849d1a1
6 changed files with 61 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,20 +5,12 @@
// Theme header backgrounds
.appTheme({
.character-header-sheet {
.trait {
background: url(../assets/svg/trait-shield.svg) no-repeat;
}
.character-row .domains-section img {
filter: @golden-filter;
}
}
}, {
.character-header-sheet {
.trait {
background: url('../assets/svg/trait-shield-light.svg') no-repeat;
}
.character-row .domains-section img {
filter: brightness(0) saturate(100%);
}
@ -131,7 +123,7 @@
display: flex;
align-items: center;
padding: 0;
margin-bottom: 15px;
margin-bottom: 12px;
.resource-section {
display: flex;
@ -217,37 +209,68 @@
.character-traits {
display: flex;
justify-content: space-between;
padding: 0;
margin-bottom: 15px;
gap: 8px;
.trait {
height: 60px;
width: 60px;
height: 3.625rem;
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;
justify-content: center;
flex-direction: column;
.trait-name {
display: flex;
align-items: center;
padding-top: 5px;
color: light-dark(@dark-blue, @golden);
font-size: var(--font-size-14);
font-size: var(--font-size-12);
font-weight: 600;
align-items: center;
justify-content: center;
gap: 3px;
i {
line-height: 17px;
font-size: var(--font-size-10);
}
}
.trait-value {
font-style: normal;
font-weight: 400;
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 {
bottom: 1px;
left: 3px;
}
.spellcasting-mark {
bottom: 1px;
right: 3px;
}
&:hover {
.trait-name {
color: light-dark(@dark, @beige);
text-shadow: 0 0 8px light-dark(@dark-80, @beige-80);
}
}
}
}