Update style button on dice + equipped + attributes

This commit is contained in:
Mandar
2021-01-20 21:04:11 +01:00
parent a5dd8e3eda
commit bc7c80f428
6 changed files with 68 additions and 38 deletions

View File

@@ -2,19 +2,14 @@
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M115.6,20c-23.7,3.2-45.2,30.9-45.2,66.8c0,19.7,6.9,37.4,17,49.4l11.9,14.4l-18.4,3.4c-13.1,2.5-22.5,9.4-30.7,20.5
c-8.2,11.3-14.4,26.9-18.8,44.9c-8.1,32.6-9.8,72.5-10.1,107.7h43.5l11.9,159.6c30.2,6.9,62.4,6.6,91.6,0l10.6-159.6H220
c0-35.7-0.5-76.1-7.7-109.1c-4-18-9.9-33.7-18.2-44.8c-8.3-11.1-18.3-17.9-33-20.1l-18.8-3l11.9-14.8c9.7-12.1,16-29.4,16-48.6
c0-38.3-24-66.7-50-66.7C120.3,20.1,115.6,20,115.6,20z"/>
<g transform="translate(0,0)">
<path d="M360.6,41.8c-14.2,0-25.8,11.6-25.8,25.8c0,8.1,3.8,15.4,9.7,20.1h-24.2l-30.2,90.6h141l-30.2-90.6h-24.2
c5.9-4.7,9.7-12,9.7-20.1C386.4,53.5,374.8,41.8,360.6,41.8z M360.6,53.2c8.1,0,14.5,6.4,14.5,14.5s-6.4,14.5-14.5,14.5
c-8.1,0-14.5-6.4-14.5-14.5S352.5,53.2,360.6,53.2z M334.7,117h7.4v10.5l10.7-10.5h8.6l-13.8,13.6l15.2,15.1h-9.3l-11.4-11.3v11.3
h-7.4V117L334.7,117z M372.5,123.7c1.5,0,2.8,0.3,4,0.9c1.1,0.6,2.2,1.5,3.1,2.8v-3.2h6.9v19.3c0,3.5-1.1,6.1-3.3,7.9
c-2.2,1.8-5.3,2.7-9.5,2.7c-1.3,0-2.6-0.1-3.9-0.3c-1.3-0.2-2.5-0.5-3.8-0.9v-5.4c1.2,0.7,2.4,1.2,3.5,1.5c1.2,0.3,2.3,0.5,3.5,0.5
c2.3,0,3.9-0.5,5-1.5c1.1-1,1.6-2.5,1.6-4.6v-1.5c-0.9,1.3-2,2.2-3.1,2.8c-1.1,0.6-2.5,0.9-4,0.9c-2.6,0-4.8-1-6.5-3.1
c-1.7-2.1-2.6-4.7-2.6-7.9c0-3.2,0.9-5.8,2.6-7.9C367.7,124.8,369.8,123.7,372.5,123.7z M375,128.7c-1.4,0-2.5,0.5-3.3,1.6
c-0.8,1.1-1.2,2.5-1.2,4.5c0,2,0.4,3.5,1.2,4.5c0.8,1,1.9,1.5,3.4,1.5c1.4,0,2.5-0.5,3.3-1.6c0.8-1.1,1.2-2.5,1.2-4.4
c0-1.9-0.4-3.4-1.2-4.5C377.6,129.2,376.5,128.7,375,128.7L375,128.7z"/>
<g>
<path d="M284.4,473.6c0-2.8,0-4.6,0-6.4c0-67.8,0.1-135.7-0.1-203.5c0-4.9,1.3-7.3,6.2-8.9c23.3-7.5,46.4-15.5,69.7-23
c4.9-1.6,6.6-3.9,6.3-8.9c-0.4-5.5-0.3-11,0-16.5c0.2-4.2-1.2-6.4-5.7-5.9c-0.7,0.1-1.3,0-2,0c-68.5,0-137,0-205.5,0
c-7.8,0-7.8,0-7.8,7.6c0,5.3,0.3,10.7-0.1,16c-0.3,4.1,1.5,5.9,5.2,7.1c23.6,7.7,47,15.7,70.6,23.3c4.7,1.5,6.4,3.6,6.4,8.7
c-0.2,68-0.1,136-0.1,204c0,1.7,0,3.5,0,6.3c-8.6-4.1-16.3-7.7-23.9-11.4C163.5,442.7,123.2,423,83,403.4
c-15.4-7.5-20.1-18-15.9-34.8c6-23.9,12.4-47.7,17.7-71.7c5.1-23.3,8-46.9,7.7-70.8c-0.5-30.2,9.3-56.8,27-80.9
c20.7-28.1,46.6-50.8,75.4-70.1c18.2-12.2,37.5-22.8,56.3-34.2c3.3-2,6.2-2,9.7-0.1c38.6,20.1,74.6,44,105.9,74.5
c20.9,20.4,39,43.1,47.6,71.7c3,10.1,5,20.9,5.1,31.4c0.2,41.3,7.2,81.4,17.8,121.1c2.9,10.9,6.1,21.8,8.6,32.8
c3,13-2,23.7-13.8,29.6c-36.6,18-73.3,35.9-110,53.8c-10.6,5.2-21.3,10.3-31.9,15.5C288.6,471.7,287.1,472.4,284.4,473.6z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

File diff suppressed because one or more lines are too long

View File

@@ -67,6 +67,7 @@
text-align: center;
background: none;
border: none;
height: calc(100% - 3rem);
td:first-child {
width: 200px;

View File

@@ -8,7 +8,7 @@
}
&.actor {
.sheet-header {
height: 27rem;
height: 26rem;
h1 {
flex: auto;
margin: 0 0 0.25rem 0.5rem;
@@ -216,14 +216,14 @@
width: 40%;
padding: 0;
position: relative;
top: -2.5rem;
top: -1.5rem;
}
.social-content,
.attributes-wrapper {
flex: none;
float: left;
width: 30%;
flex-direction: column;
flex-wrap: wrap;
display: flex;
padding: 0.5rem 0 0 0.25rem;
border-left: 2px solid $l5r5e-title;
@@ -270,12 +270,33 @@
margin: 0 0.25rem;
height: 2rem;
&[disabled] {
flex: 0 0 3rem;
background: $l5r5e-white-light;
}
}
}
}
.focus-content,
.vigilance-content {
flex: 0 0 50%;
padding-bottom: 0.5rem;
.attribute-label {
flex-wrap: wrap;
height: auto;
strong {
flex: 100%;
text-align: center;
}
input {
flex: 1 0 3rem;
}
&:before {
top: auto;
bottom: 0.1rem;
height: calc(100% - 1.45rem);
width: calc(100% - 0.4rem);
}
}
}
.attributes-wrapper {
padding: 0.5rem 0.25rem 0 0;
border-left: 0 none;
@@ -285,11 +306,21 @@
left: auto;
right: -0.25rem;
}
&.void-content {
&.focus-content {
&:before {
width: 0;
}
}
&.vigilance-content {
&:before {
width: 160%;
}
}
&.void-content {
&:before {
width: 90%;
}
}
}
label {
flex-direction: row;
@@ -330,11 +361,8 @@
}
}
.void-content {
display: flex;
position: absolute;
bottom: 0.25rem;
right: 35%;
width: 10rem;
width: 100%;
padding-top: 0.25rem;
label {
margin: 0;
strong {
@@ -343,7 +371,7 @@
&:after {
content: "/";
position: absolute;
right: 2.9rem;
right: 1.25rem;
font-size: 1rem;
bottom: 0.6rem;
color: $l5r5e-bold;
@@ -361,8 +389,9 @@
text-align: right;
padding-left: 0.25rem;
padding-top: 0.75rem;
position: relative;
right: 2rem;
position: absolute;
right: 0.25rem;
width: 1rem;
}
}
}
@@ -400,6 +429,12 @@
}
}
}
.focus-content,
.vigilance-content {
p {
bottom: -3.75rem;
}
}
}
.attribute-label {
position: relative;
@@ -443,7 +478,8 @@
&:nth-child(2) {
&:before {
left: auto;
right: 2.65rem;
right: 3.15rem;
width: 2.6rem;
}
}
&:before {
@@ -455,9 +491,7 @@
.void-content {
.attribute-label {
&:before {
left: auto;
right: 1.85rem;
width: 2.9rem;
width: 3.85rem;
}
}
}

View File

@@ -1,34 +1,34 @@
<ul class="rings">
<li id="earth">
<label class="attribute-label earth centered-input">
<label class="earth">
<i class="i_earth"></i>
<strong>{{ localizeRing 'earth' }}</strong>
<input class="centered-input select-on-focus" type="number" name="data.rings.earth" value="{{data.rings.earth}}" data-dtype="Number" min="1" max="9" placeholder="0"/>
</label>
</li>
<li id="air">
<label class="attribute-label air centered-input">
<label class="air">
<i class="i_air"></i>
<strong>{{ localizeRing 'air' }}</strong>
<input class="centered-input select-on-focus" type="number" name="data.rings.air" value="{{data.rings.air}}" data-dtype="Number" min="1" max="9" placeholder="0"/>
</label>
</li>
<li id="water">
<label class="attribute-label water centered-input">
<label class="water">
<i class="i_water"></i>
<strong>{{ localizeRing 'water' }}</strong>
<input class="centered-input select-on-focus" type="number" name="data.rings.water" value="{{data.rings.water}}" data-dtype="Number" min="1" max="9" placeholder="0"/>
</label>
</li>
<li id="fire">
<label class="attribute-label fire centered-input">
<label class="fire">
<i class="i_fire"></i>
<strong>{{ localizeRing 'fire' }}</strong>
<input class="centered-input select-on-focus" type="number" name="data.rings.fire" value="{{data.rings.fire}}" data-dtype="Number" min="1" max="9" placeholder="0"/>
</label>
</li>
<li id="void">
<label class="attribute-label void centered-input">
<label class="void">
<i class="i_void"></i>
<strong>{{ localizeRing 'void' }}</strong>
<input class="centered-input select-on-focus" type="number" name="data.rings.void" value="{{data.rings.void}}" data-dtype="Number" min="1" max="9" placeholder="0"/>

View File

@@ -3,7 +3,7 @@
<li class="item-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ item.name }} <sub>x{{ item.data.quantity }}</sub></li>
{{#if editable}}
<li data-item-id="{{item._id}}" data-type="equipped" class="item-equip equip-readied-control" title="{{localize 'l5r5e.armors.equipped'}}"><i class="fas {{#if item.data.equipped}}fa-hiking{{else}}fa-weight-hanging{{/if}}"></i></li>
<li data-item-id="{{item._id}}" data-type="equipped" class="item-equip equip-readied-control" title="{{localize 'l5r5e.armors.equipped'}}"><i class="fas {{#if item.data.equipped}}fa-tshirt{{else}}fa-weight-hanging{{/if}}"></i></li>
<li data-item-id="{{item._id}}" class="item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
<li data-item-id="{{item._id}}" class="item-delete" title="{{localize 'l5r5e.global.delete'}}"><i class="fas fa-trash"></i></li>
{{/if}}