macniel
/
foundry-dsa41-game
2
1
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 34 Wiki Activity

implements a finished look for paperdoll in darkmode and lightmode. This closes #78.

main
macniel 2026-08-05 11:30:48 +02:00
parent 5a1bdfcad6
commit 8972f3e0dd
2 changed files with 82 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/style/molecules/_paperdoll.scss
View File

@ -6,36 +6,19 @@
}
.equipped {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(0, 0, 0, 0.4);
border-radius: 4px;
border-color: rgba(255, 255, 255, 0.2);
&.munition::before {
position: absolute;
display: block;
width: 34px;
height: 34px;
left: 0;
bottom: 0;
content: '';
&::before {
background-color: rgba(255, 255, 255, 0.2);
-webkit-mask-image: url('/systems/DSA_4-1/assets/quiver.svg');
mask-image: url('/systems/DSA_4-1/assets/quiver.svg');
}
&.munition::after {
content: "";
position: relative;
display: block;
border: 5px solid rgba(255, 255, 255, 0.4);
border-left: 8px solid transparent;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
height: 4px;
background-color: transparent;
top: -20px;
width: 16px;
left: 8px;
}
}
}
@ -61,38 +44,73 @@
position: absolute !important;
&.links {
top: 230px;
top: 320px;
left: 250px;
}
&.links::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/offweapon.svg');
mask-image: url('/systems/DSA_4-1/assets/offweapon.svg');
}
&.rechts {
top: 230px;
top: 320px;
left: 20px;
}
&.rechts::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/mainweapon.svg');
mask-image: url('/systems/DSA_4-1/assets/mainweapon.svg');
}
&.brust {
top: 120px;
left: 110px;
}
&.brust::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/chest.svg');
mask-image: url('/systems/DSA_4-1/assets/chest.svg');
}
&.armlinks {
top: 180px;
left: 210px;
left: 220px;
}
&.armlinks::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/left_bracers.svg');
mask-image: url('/systems/DSA_4-1/assets/left_bracers.svg');
}
&.armrechts {
top: 180px;
left: 60px;
left: 40px;
}
&.armrechts::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/right_bracers.svg');
mask-image: url('/systems/DSA_4-1/assets/right_bracers.svg');
}
&.beinlinks {
top: 380px;
left: 210px;
top: 400px;
left: 200px;
}
&.beinlinks::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/left_boots.svg');
mask-image: url('/systems/DSA_4-1/assets/left_boots.svg');
}
&.beinrechts {
top: 380px;
left: 60px;
top: 400px;
left: 70px;
}
&.beinrechts::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/right_boots.svg');
mask-image: url('/systems/DSA_4-1/assets/right_boots.svg');
}
&.bauch {
@ -100,27 +118,52 @@
left: 136px;
}
&.bauch::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/shirt.svg');
mask-image: url('/systems/DSA_4-1/assets/shirt.svg');
}
&.kopf {
top: 40px;
left: 136px
}
&.kopf::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/head.svg');
mask-image: url('/systems/DSA_4-1/assets/head.svg');
}
&.fernkampf {
top: 40px;
top: 90px;
left: 240px;
}
&.fernkampf::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/range.svg');
mask-image: url('/systems/DSA_4-1/assets/range.svg');
}
&.ruecken {
top: 120px;
left: 160px;
}
&.ruecken::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/cape.svg');
mask-image: url('/systems/DSA_4-1/assets/cape.svg');
}
&.munition {
top: 90px;
top: 40px;
left: 240px;
}
&.munition::before {
-webkit-mask-image: url('/systems/DSA_4-1/assets/quiver.svg');
mask-image: url('/systems/DSA_4-1/assets/quiver.svg');
}
&::before {
position: absolute;
display: block;
width: 34px;
@ -128,22 +171,24 @@
left: 0;
bottom: 0;
content: '';
background-color: rgba(0, 0, 0, 0.2);
-webkit-mask-image: url('/systems/DSA_4-1/assets/quiver.svg');
mask-image: url('/systems/DSA_4-1/assets/quiver.svg');
background-color: rgba(0, 0, 0, 0.8);
}
&.worn::before {
display: none;
}
&.munition::after {
content: "";
position: relative;
position: absolute;
display: block;
border: 5px solid rgba(0, 0, 0, 0.4);
border-left: 8px solid transparent;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
height: 4px;
background-color: transparent;
top: -20px;
bottom: -20px;
width: 16px;
left: 8px;
}

2
src/templates/actor/character/tab-set.hbs
View File

@ -11,7 +11,7 @@
</svg>
{{#each this.slots}}
<div class="equipped {{this.target}}" data-item-id="{{this.id}}" data-set-id="{{../index}}" data-tooltip="{{this.tooltip}}"
<div class="equipped {{this.target}} {{#if this.icon}}worn{{/if}}" data-item-id="{{this.id}}" data-set-id="{{../index}}" data-tooltip="{{this.tooltip}}"
data-target="{{this.target}}" data-actor="{{this.actorId}}"><img
src="{{this.icon}}"/></div>
{{/each}}