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 { .equipped {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.4);
border-radius: 4px; border-radius: 4px;
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2);
&.munition::before { &::before {
position: absolute;
display: block;
width: 34px;
height: 34px;
left: 0;
bottom: 0;
content: '';
background-color: rgba(255, 255, 255, 0.2); 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 { &.munition::after {
content: "";
position: relative;
display: block;
border: 5px solid rgba(255, 255, 255, 0.4); border: 5px solid rgba(255, 255, 255, 0.4);
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-top: 8px solid transparent; border-bottom: 8px solid transparent;
border-right: 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; position: absolute !important;
&.links { &.links {
top: 230px; top: 320px;
left: 250px; 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 { &.rechts {
top: 230px; top: 320px;
left: 20px; 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 { &.brust {
top: 120px; top: 120px;
left: 110px; 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 { &.armlinks {
top: 180px; 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 { &.armrechts {
top: 180px; 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 { &.beinlinks {
top: 380px; top: 400px;
left: 210px; 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 { &.beinrechts {
top: 380px; top: 400px;
left: 60px; 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 { &.bauch {
@ -100,27 +118,52 @@
left: 136px; 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 { &.kopf {
top: 40px; top: 40px;
left: 136px 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 { &.fernkampf {
top: 40px; top: 90px;
left: 240px; 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 { &.ruecken {
top: 120px; top: 120px;
left: 160px; 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 { &.munition {
top: 90px; top: 40px;
left: 240px; left: 240px;
} }
&.munition::before { &.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; position: absolute;
display: block; display: block;
width: 34px; width: 34px;
@ -128,22 +171,24 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
content: ''; content: '';
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.8);
-webkit-mask-image: url('/systems/DSA_4-1/assets/quiver.svg'); }
mask-image: url('/systems/DSA_4-1/assets/quiver.svg');
&.worn::before {
display: none;
} }
&.munition::after { &.munition::after {
content: ""; content: "";
position: relative; position: absolute;
display: block; display: block;
border: 5px solid rgba(0, 0, 0, 0.4); border: 5px solid rgba(0, 0, 0, 0.4);
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-top: 8px solid transparent; border-bottom: 8px solid transparent;
border-right: 8px solid transparent; border-right: 8px solid transparent;
height: 4px; height: 4px;
background-color: transparent; background-color: transparent;
top: -20px; bottom: -20px;
width: 16px; width: 16px;
left: 8px; left: 8px;
} }

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

@ -11,7 +11,7 @@
</svg> </svg>
{{#each this.slots}} {{#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 data-target="{{this.target}}" data-actor="{{this.actorId}}"><img
src="{{this.icon}}"/></div> src="{{this.icon}}"/></div>
{{/each}} {{/each}}