makes talents more subtle also adds tooltips to rollable on the skill sheet.

pull/65/head
macniel 2025-11-12 20:13:21 +01:00
parent cfc5bc15b1
commit 811806a68b
8 changed files with 64 additions and 56 deletions

View File

@ -9,17 +9,17 @@ $talent-text-color: #000;
$kampftalent-color: #cc0000; $kampftalent-color: #cc0000;
$kampftalent-text-color: #FFF; $kampftalent-text-color: #FFF;
$talent-body-color: #16bd6c; $talent-body-color: #45d18c;
$talent-body-text-color: #000; $talent-body-text-color: #000;
$talent-nature-color: #46800d; $talent-nature-color: #7cb544;
$talent-nature-text-color: #000; $talent-nature-text-color: #000;
$talent-social-color: #ae9809; $talent-social-color: #c8588a;
$talent-social-text-color: #000; $talent-social-text-color: #000;
$talent-knowledge-color: #d319ba; $talent-knowledge-color: #2ba9c5;
$talent-knowledge-text-color: #000; $talent-knowledge-text-color: #000;
$talent-language-color: #573bbc; $talent-language-color: #957fe8;
$talent-language-text-color: #fff; $talent-language-text-color: #000;
$talent-crafting-color: #ae6813; $talent-crafting-color: #cd9551;
$talent-crafting-text-color: #000; $talent-crafting-text-color: #000;

View File

@ -31,11 +31,12 @@
position: absolute; position: absolute;
left: -1px; left: -1px;
width: 48px; width: 48px;
top: -1px; top: 2px;
font-size: smaller; font-size: large;
line-height: 48px; line-height: 48px;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
@if $darkmode { @if $darkmode {
color: colours.$attribute-die-label-color-darkmode; color: colours.$attribute-die-label-color-darkmode;
} @else { } @else {
@ -62,7 +63,7 @@
&.colorfulDice { &.colorfulDice {
&.Mut { .Mut {
.die svg path { .die svg path {
fill: colours.$attribute-die-co-color; fill: colours.$attribute-die-co-color;

View File

@ -52,7 +52,7 @@ $rollable_colours_font: (
.value { .value {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 1px;
width: 32px; width: 32px;
line-height: 30px; line-height: 30px;
vertical-align: middle; vertical-align: middle;
@ -126,9 +126,9 @@ $rollable_colours_font: (
// interactivity // interactivity
.block.rollable { .block.rollable {
&:hover { .die:hover {
.die svg { svg {
filter: drop-shadow(0px 0px 10px rgb(255 0 0)); filter: drop-shadow(0px 0px 10px rgb(255 0 0));
} }
@ -138,16 +138,9 @@ $rollable_colours_font: (
&:active { &:active {
.die { .die {
width: 28px; scale: 0.8;
height: 28px;
left: 2px;
top: 2px;
.value { .value {
width: 28px;
height: 28px;
left: -1px;
top: -2px;
img { img {
position: absolute; position: absolute;
@ -168,7 +161,6 @@ $rollable_colours_font: (
.#{$name}.rollable { .#{$name}.rollable {
.die { .die {
stroke-width: 0.5;
svg { svg {
@ -176,8 +168,7 @@ $rollable_colours_font: (
path { path {
fill: $color; fill: $color;
stroke: colour.$rollable-die-border-color;
stroke-width: 5px;
} }
} }
@ -189,7 +180,10 @@ $rollable_colours_font: (
} }
.container { .container {
background-image: linear-gradient(to right, rgba($color, numbers.$start_gradient), rgba($color, numbers.$end_gradient)); // background-image: linear-gradient(to right, rgba($color, numbers.$start_gradient), rgba($color, numbers.$end_gradient));
background: rgba(0, 0, 0, 0.05);
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
border-top-right-radius: 8px; border-top-right-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
} }

View File

@ -17,6 +17,13 @@
gap: unset; gap: unset;
padding: unset; padding: unset;
fieldset {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
} }
ul { ul {

View File

@ -2,8 +2,9 @@
data-tab="{{tabs.skills.id}}" data-tab="{{tabs.skills.id}}"
data-group="{{tabs.skills.group}}"> data-group="{{tabs.skills.group}}">
<div class="collapsible"> <div class="collapsible">
<div class="talent-group"> <div class="talent-group combat">
<h2>Kampftalente</h2> <fieldset>
<legend><h2>Kampftalente</h2></legend>
<ul> <ul>
{{#each skills.Kampf}} {{#each skills.Kampf}}
<li> <li>
@ -11,9 +12,11 @@
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</fieldset>
</div> </div>
<div class="talent-group"> <div class="talent-group body">
<h2>Körperliche Talente</h2> <fieldset>
<legend><h2>Körperliche Talente</h2></legend>
<ul> <ul>
<li> <li>
{{#each skills.Körperlich}} {{#each skills.Körperlich}}
@ -22,9 +25,11 @@
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</fieldset>
</div> </div>
<div class="talent-group"> <div class="talent-group social">
<h2>Gesellschaftliche Talente</h2> <fieldset>
<legend><h2>Gesellschaftliche Talente</h2></legend>
<ul> <ul>
<li> <li>
{{#each skills.Gesellschaft}} {{#each skills.Gesellschaft}}
@ -33,9 +38,11 @@
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</fieldset>
</div> </div>
<div class="talent-group"> <div class="talent-group nature">
<h2>Natur Talente</h2> <fieldset>
<legend><h2>Natur Talente</h2></legend>
<ul> <ul>
<li> <li>
{{#each skills.Natur}} {{#each skills.Natur}}
@ -44,9 +51,11 @@
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</fieldset>
</div> </div>
<div class="talent-group"> <div class="talent-group knowledge">
<h2>Wissenstalente</h2> <fieldset>
<legend><h2>Wissenstalente</h2></legend>
<ul> <ul>
<li> <li>
{{#each skills.Wissen}} {{#each skills.Wissen}}
@ -55,9 +64,11 @@
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</fieldset>
</div> </div>
<div class="talent-group"> <div class="talent-group languages">
<h2>Schriften & Sprachen</h2> <fieldset>
<legend><h2>Schriften & Sprachen</h2></legend>
<ul> <ul>
<li> <li>
{{#each skills.Schriften}} {{#each skills.Schriften}}
@ -71,9 +82,11 @@
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</fieldset>
</div> </div>
<div class="talent-group"> <div class="talent-group crafting">
<h2>Handwerkliche Talente</h2> <fieldset>
<legend><h2>Handwerkliche Talente</h2></legend>
<ul> <ul>
<li> <li>
{{#each skills.Handwerk}} {{#each skills.Handwerk}}
@ -82,6 +95,7 @@
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</fieldset>
</div> </div>
</div> </div>
</section> </section>

View File

@ -1,9 +1,5 @@
<div class="block rollable {{this.type}} {{this.gruppe}}" data-item-id="{{this.id}}" <div class="block rollable {{this.type}} {{this.gruppe}}" data-id="{{this.id}}"
data-taw="{{this.taw}}" data-tooltip="{{this.name}}<br/>TAW: {{this.taw}}<br/><hr/><i class='fa-solid fa-computer-mouse'></i>: zum Würfeln">
data-name="{{this.name}}" data-eigenschaft1="{{this.eigenschaft1}}" data-eigenschaft2="{{this.eigenschaft2}}"
data-eigenschaft3="{{this.eigenschaft3}}" data-rollEigenschaft1="{{this.rollEigenschaft1}}"
data-rollEigenschaft2="{{this.rollEigenschaft2}}" data-rollEigenschaft3="{{this.rollEigenschaft3}}">
<div class="die"> <div class="die">
{{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }} {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}

View File

@ -1,10 +1,7 @@
<div class="block rollable {{this.type}} {{this.gruppe}}" data-item-id="{{this.id}}" data-id="{{this.id}}" <div class="block rollable {{this.type}} {{this.gruppe}}" data-id="{{this.id}}"
data-taw="{{this.taw}}" data-tooltip="{{this.name}}<br/>TAW/Komplexität: {{this.taw}}/{{this.komplexität}}">
data-name="{{this.name}}" data-eigenschaft1="{{this.eigenschaft1}}" data-eigenschaft2="{{this.eigenschaft2}}"
data-eigenschaft3="{{this.eigenschaft3}}" data-rollEigenschaft1="{{this.rollEigenschaft1}}"
data-rollEigenschaft2="{{this.rollEigenschaft2}}" data-rollEigenschaft3="{{this.rollEigenschaft3}}">
<div class="die"> <div class="die unrollable">
{{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }} {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
<span class="value">{{#if this.taw}} <span class="value">{{#if this.taw}}
{{this.taw}} {{this.taw}}

View File

@ -1,11 +1,10 @@
<div class="block rollable {{this.type}} {{this.gruppe}}" data-id="{{this.id}}" data-taw="{{this.taw}}" <div class="block rollable {{this.type}} {{this.gruppe}}" data-id="{{this.id}}"
data-name="{{this.name}}" data-eigenschaft1="{{this.eigenschaft1}}" data-eigenschaft2="{{this.eigenschaft2}}" data-action="rollCombatSkill" data-tooltip="{{this.name}}<br/>{{#if this.at}}AT: {{this.at}} {{/if}}{{#if
data-eigenschaft3="{{this.eigenschaft3}}" data-taw="{{this.taw}}" data-rollEigenschaft1="{{this.rollEigenschaft1}}" this.pa}}PA: {{this.pa}}{{/if}}<hr/><i class='fa-solid fa-computer-mouse'></i>: Attacke<br/><kbd>Shift</kbd>+<i class='fa-solid fa-computer-mouse'></i>: Parrieren">
data-rollEigenschaft2="{{this.rollEigenschaft2}}" data-rollEigenschaft3="{{this.rollEigenschaft3}}">
<div class="die"> <div class="die">
{{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }} {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
<span class="value" data-action="rollCombatSkill" title="Click: Attacke; Shift+Click: Parrieren" <span class="value"
data-id="{{this.id}}">{{#if this.taw}} data-id="{{this.id}}">{{#if this.taw}}
{{this.taw}} {{this.taw}}
{{else}} {{else}}