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

[UI] Rework styling of traits section of the character sheet (#1865)

Browse source 
* Rework styling of traits section of the character sheet

* Adjust spacing in header a smidge
This commit is contained in:
Carlos Fernandez 2026-05-04 06:34:52 -04:00 • committed by GitHub
parent c91d53b4d4
commit e95ea3c281
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 62 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

65
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%);
}
@ -101,7 +93,7 @@
display: flex;
justify-content: space-between;
padding: 5px 0;
margin-bottom: 10px;
margin-bottom: 8px;
font-size: var(--font-size-12);
color: light-dark(@dark-blue, @golden);
@ -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);
}
}
}
}

56
styles/less/sheets/actors/character/sidebar.less
View file

@ -74,62 +74,6 @@
.death-roll-btn {
display: none;
}
.icons-list {
position: absolute;
display: flex;
flex-direction: column;
gap: 5px;
align-items: end;
justify-content: center;
top: 45px;
right: 10px;
.spellcast-icon {
display: flex;
align-items: center;
justify-content: end;
text-align: center;
padding-right: 8px;
max-width: 50px;
height: 50px;
font-size: 1.2rem;
background: light-dark(@dark-blue-60, @dark-golden-80);
backdrop-filter: blur(8px);
border: 4px double light-dark(@beige, @golden);
color: light-dark(@beige, @golden);
border-radius: 999px;
transition: all 0.3s ease;
.spellcast-label {
font-size: var(--font-size-14);
opacity: 0;
margin-right: 0.3rem;
transition: all 0.3s ease;
}
i {
height: 24px;
width: 24px;
align-content: center;
margin-right: 3px;
}
&:not(.no-label):hover {
max-width: 300px;
padding: 0 10px;
border-radius: 60px;
.spellcast-label {
opacity: 1;
}
i {
margin-right: 0px;
}
}
}
}
}
.info-section {