Add crafts into the Combined Hero sheet

This commit is contained in:
Oliver-Akins 2025-02-09 16:48:32 -07:00
parent 1535e07f77
commit f6ff3247e3
6 changed files with 269 additions and 12 deletions

View file

@ -0,0 +1,36 @@
.ripcrypt.ripcrypt--CombinedHeroSheet .crafts-summary {
display: grid;
column-gap: var(--col-gap);
grid-template-columns: repeat(3, minmax(0, 3fr));
grid-template-rows: repeat(5, minmax(0, 1fr));
grid-auto-flow: column;
.col-header {
background: var(--section-header-background);
color: var(--section-header-text);
}
label, .label {
box-sizing: border-box;
padding: 2px 4px;
text-transform: uppercase;
font-size: var(--font-size-14);
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.craft-list {
grid-row: span 4;
display: contents;
> :nth-child(odd) {
background: var(--alt-row-background);
color: var(--alt-row-text);
}
}
span.name {
flex-grow: 1;
}
}

View file

@ -0,0 +1,67 @@
<div class="crafts-summary">
<div class="label col-header">Focus</div>
<ol class="craft-list num-before">
{{#each craft.focus as | craft |}}
{{#if craft}}
<li data-item-id="{{craft.uuid}}" data-ctx-menu="craft">
<span class="name">{{ craft.name }}</span>
{{#if craft.use}}
<rc-icon
name="icons/info-circle"
var:size="16px"
var:fill="currentColor"
data-tooltip="{{ craft.use }}"
data-tooltip-direction="UP"
></rc-icon>
{{/if}}
</li>
{{else}}
<li></li>
{{/if}}
{{/each}}
</ol>
<div class="label col-header">Fract</div>
<ol class="craft-list num-before">
{{#each craft.fract as | craft |}}
{{#if craft}}
<li data-item-id="{{craft.uuid}}" data-ctx-menu="craft">
<span class="name">{{ craft.name }}</span>
{{#if craft.use}}
<rc-icon
name="icons/info-circle"
var:size="16px"
var:fill="currentColor"
data-tooltip="{{ craft.use }}"
data-tooltip-direction="UP"
></rc-icon>
{{/if}}
</li>
{{else}}
<li></li>
{{/if}}
{{/each}}
</ol>
<div class="label col-header">Flect</div>
<ol class="craft-list num-before">
{{#each craft.flect as | craft |}}
{{#if craft}}
<li data-item-id="{{craft.uuid}}" data-ctx-menu="craft">
<span class="name">{{ craft.name }}</span>
{{#if craft.use}}
<rc-icon
name="icons/info-circle"
var:size="16px"
var:fill="currentColor"
data-tooltip="{{ craft.use }}"
data-tooltip-direction="UP"
></rc-icon>
{{/if}}
</li>
{{else}}
<li></li>
{{/if}}
{{/each}}
</ol>
</div>

View file

@ -1,3 +1,5 @@
@import url("./crafts.css");
.ripcrypt.ripcrypt--CombinedHeroSheet {
> .window-content {
gap: 4px;