cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-15 21:21:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

[PR] [Party Sheets] Sidebar character sheet changes (#1249)

Browse source 
* Something experimenting

* I am silly (wearning Dunce hat)

* Stressful task

* Armor functional to be hit

* CSS Changes to accomadate pip boy

* last minute change to resource section for better visual feeling

* restoring old css for toggle

* Added setting to toggle pip/number display

* toggle functionality added

* Fixed light-mode in characterSheet

* Fixed multi-row resource pips display for character

* Fixed separators

* Added pip-display to Adversary and Companion. Some fixing on armor display

---------

Co-authored-by: WBHarry <williambjrklund@gmail.com>
This commit is contained in:
Nikhil Nagarajan 2025-11-10 10:28:49 -05:00 • committed by GitHub
parent a50fb9f9ac
commit ad90f74d20
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 774 additions and 383 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,9 +6,16 @@
.appTheme({
.character-sidebar-sheet {
background-image: url('../assets/parchments/dh-parchment-dark.png');
.experience-value {
background: url(../assets/svg/experience-shield.svg) no-repeat;
}
.info-section .status-section .status-bar.armor-slots {
.slot-value .slot-bar {
background: @dark-blue;
}
}
}
}, {
&.sheet.actor.dh-style.character .character-sidebar-sheet {
@ -21,6 +28,12 @@
.portrait.death-roll .death-roll-btn {
filter: brightness(0) drop-shadow(0 0 3px @dark-blue);
}
.info-section .status-section .status-bar.armor-slots {
.slot-value .slot-bar {
background-image: url('../assets/parchments/dh-parchment-light.png');
}
}
}
});
@ -127,6 +140,15 @@
gap: 10px;
margin-bottom: -16px;
&.pip-display {
gap: 15px;
.resources-section {
justify-content: space-around;
margin: 8px 2px 8px 2px;
}
}
.resources-section {
display: flex;
justify-content: space-evenly;
@ -136,7 +158,7 @@
display: flex;
justify-content: center;
position: relative;
width: 100px;
width: 120px;
height: 40px;
.status-label {
@ -154,13 +176,14 @@
color: light-dark(@beige, @dark-blue);
}
}
.status-value {
position: absolute;
display: flex;
padding: 0 6px;
padding: 0 5px;
font-size: 1.5rem;
align-items: center;
width: 100px;
width: 140px;
height: 40px;
justify-content: center;
text-align: center;
@ -237,6 +260,28 @@
gap: 5px;
justify-content: center;
&.pip-display {
align-items: end;
.status-bar.armor-slots {
width: 100px;
height: auto;
.slot-value {
position: relative;
height: auto;
.slot-bar {
border-radius: 6px 6px 0 0;
}
}
.status-value {
padding: 0 5px;
}
}
}
.status-bar.armor-slots {
display: flex;
justify-content: center;
@ -252,6 +297,7 @@
width: 95px;
border-radius: 3px;
background: light-dark(@dark-blue, @golden);
clip-path: none;
h4 {
font-weight: bold;
@ -261,6 +307,66 @@
font-size: var(--font-size-12);
}
}
.slot-value {
position: absolute;
display: flex;
padding: 0 5px;
font-size: 1.2rem;
align-items: center;
width: 80px;
height: 30px;
justify-content: center;
text-align: center;
z-index: 2;
color: light-dark(@dark-blue, @beige);
flex-direction: column;
.slot-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 5px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
z-index: 1;
background: @dark-blue;
justify-content: center;
color: light-dark(@dark-blue, @golden);
.armor-slot {
cursor: pointer;
transition: all 0.3s ease;
font-size: var(--font-size-12);
.fa-shield-halved {
color: light-dark(@dark-blue-40, @golden-40);
}
}
}
.slot-label {
display: flex;
align-items: center;
color: light-dark(@beige, @dark-blue);
background: light-dark(@dark-blue, @golden);
padding: 0 5px;
width: 120%;
font-weight: bold;
border-radius: 5px;
font-size: var(--font-size-12);
flex-wrap: wrap;
justify-content: center;
.label {
padding-right: 1px;
border-bottom: 1px solid @dark-golden;
}
.value {
padding-left: 6px;
border-left: 0;
}
}
}
.status-value {
position: absolute;
display: flex;
@ -292,8 +398,6 @@
color: light-dark(@dark-blue, @beige);
backdrop-filter: none;
background: transparent;
transition: all 0.3s ease;
&:hover,
&:focus {
background: @semi-transparent-dark-blue;
@ -306,7 +410,6 @@
width: 30px;
}
}
.progress-bar {
position: absolute;
appearance: none;
@ -318,7 +421,6 @@
background: light-dark(transparent, @dark-blue);
border-bottom: none;
border-radius: 6px 6px 0 0;
&::-webkit-progress-bar {
border: none;
background: light-dark(transparent, @dark-blue);