Add css trick border + Style for equiped and review for npc input.

This commit is contained in:
Mandar
2021-01-20 04:33:07 +01:00
parent 8fbf7f9005
commit 289ec720de
12 changed files with 129 additions and 34 deletions

View File

@@ -163,7 +163,7 @@
"notes": "Notes",
"inventory": "Inventaire",
"money": {
"title": "Fortune personnelle",
"title": "Fortune",
"koku": "Koku",
"bu": "Bu",
"zeni": "Zeni"

File diff suppressed because one or more lines are too long

View File

@@ -47,11 +47,13 @@ form .form-group .form-fields button,
.dialog .dialog-buttons button,
.item-edit,
.item-delete,
.item-equip,
.technique-edit,
.technique-delete,
.peculiarity-edit,
.peculiarity-delete,
.attribute-dtype,
.equip-readied-control,
form button,
label {
cursor: url("../assets/cursors/pointer.webp"), pointer !important;

View File

@@ -188,7 +188,7 @@ fieldset {
flex: 1;
display: flex;
margin: 0 0.25rem;
padding: 0.25rem 0.5rem;
padding: 0.5rem;
border: 1px solid $l5r5e-title;
legend {
color: $l5r5e-label;
@@ -203,16 +203,21 @@ input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"] {
text-align: center;
input[type="time"],
textarea {
padding: 0.25rem;
background: $l5r5e-white;
border: 1px solid $l5r5e-title;
color: $l5r5e-bold;
resize: vertical;
border-radius: 0;
&[disabled] {
background: $l5r5e-white-light;
}
}
input[type="number"] {
text-align: center;
}
// Editors
.editor,

View File

@@ -19,6 +19,7 @@
}
.item-edit,
.item-delete,
.item-equip,
.technique-edit,
.technique-delete,
.peculiarity-edit,
@@ -29,6 +30,7 @@
font-size: 0.75rem;
flex: 0 0 1rem;
padding: 0 0.1rem;
color: $black-light;
}
.icon-stat-container {
line-height: 1rem;
@@ -38,6 +40,7 @@
}
.item-edit,
.item-delete,
.item-equip,
.technique-edit,
.technique-delete,
.peculiarity-edit,
@@ -46,6 +49,7 @@
.property-delete {
&:hover {
text-shadow: 0 0 3px $red;
color: $black;
}
}
}
@@ -68,6 +72,12 @@
margin-right: 0;
}
}
.equip-readied-control {
&:hover {
color: $l5r5e-red;
background: $white;
}
}
}
p {
font-size: 0.85rem;

View File

@@ -96,6 +96,7 @@
width: 100%;
line-height: 2rem;
font-size: 0.75rem;
margin: 0.25rem 0.25rem 0.5rem;
text-align: center;
li {
flex: 1;
@@ -144,6 +145,12 @@
flex: 0 0 calc(100% - 0.5rem);
margin: 1rem 0.25rem 0;
}
.initiative-wrapper {
margin-bottom: 0.5rem;
}
&:last-child {
padding-bottom: 1rem;
}
}
.npc-note {
.editor {

View File

@@ -34,12 +34,6 @@
line-height: 2rem;
font-size: 1rem;
}
.compromised {
input {
border: 1px solid $l5r5e-red;
box-shadow: 0 1px 5px $l5r5e-red;
}
}
}
form {
display: flex;
@@ -107,6 +101,12 @@
0% calc(100% - var(--notchSize))
);
}
.compromised {
input {
border: 1px solid $l5r5e-red;
box-shadow: 0 1px 5px $l5r5e-red;
}
}
.header-fields {
position: relative;
flex: 0 0 100%;
@@ -293,23 +293,20 @@
}
label {
flex-direction: row;
width: 100%;
strong {
text-align: right;
}
&:nth-child(2) {
position: relative;
flex: 50%;
right: 1.5rem;
strong {
position: absolute;
top: 0;
left: 0;
font-size: 0.65rem;
width: 3rem;
color: $l5r5e-black;
color: $l5r5e-black-light;
}
input {
border-top: 0 none;
font-size: 1.25rem;
padding-top: 0.75rem;
}
@@ -317,12 +314,20 @@
}
.endurance-content,
.composure-content {
input {
&[disabled] {
flex: 0 0 5rem;
label:nth-child(1) {
strong {
flex: 0 0 calc(100% - 6rem);
}
input {
flex: 0 0 5.5rem;
padding-right: 3rem;
}
}
label:nth-child(2) {
position: absolute;
right: 0;
width: 3.5rem;
}
}
.void-content {
display: flex;
@@ -396,6 +401,66 @@
}
}
}
.attribute-label {
position: relative;
&:before {
z-index: -1;
content: "";
position: absolute;
height: calc(100% - 0.85rem);
width: 3.1rem;
border: 1px solid $l5r5e-title;
border-radius: 0;
top: 0.15rem;
left: 0.15rem;
}
}
.identity-content {
.attribute-label {
&:before {
height: calc(100% - 0.6rem);
width: calc(100% - 0.65rem);
left: auto;
top: 0.15rem;
right: 0.85rem;
}
}
li:nth-child(3),
li:nth-child(5) {
.attribute-label {
&:before {
height: calc(100% - 0.6rem);
width: calc(100% + 0.25rem);
left: auto;
top: 0.15rem;
right: -0.15rem;
}
}
}
}
.attributes-wrapper {
.attribute-label {
&:nth-child(2) {
&:before {
left: auto;
right: 2.65rem;
}
}
&:before {
left: auto;
right: 0.15rem;
}
}
}
.void-content {
.attribute-label {
&:before {
left: auto;
right: 1.85rem;
width: 2.9rem;
}
}
}
}
article {
background: $l5r5e-white;
@@ -457,7 +522,9 @@
}
}
.stances-content {
flex: 0 0 100%;
flex: 100%;
height: 100%;
align-self: flex-start;
.item-list {
position: relative;
padding-top: 2rem;
@@ -510,7 +577,7 @@
}
.xp,
.money-wrapper {
flex: 0 0 5rem;
flex: 0 0 6rem;
flex-direction: column;
color: $black-light;
label {
@@ -575,9 +642,11 @@
&.npc {
.initiative {
&-wrapper {
display: block;
flex: 100%;
height: 100%;
align-self: flex-start;
text-align: center;
display: block;
}
button {
width: 22%;

View File

@@ -60,8 +60,6 @@
article {
padding: 2% 2% 2% 18%;
label {
font-size: 0.85rem;
line-height: 2rem;
&.full {
display: block;
width: 100%;
@@ -79,6 +77,10 @@
> label {
font-size: 1rem;
padding: 0 0 0 1rem;
line-height: 2rem;
> * {
line-height: 1rem;
}
}
table {
width: 100%;

View File

@@ -2,13 +2,13 @@
<fieldset>
<legend class="text-block-header">{{ localize 'l5r5e.social.title' }}</legend>
<label class="attribute-label">{{ localize 'l5r5e.social.ninjo' }}
<input type="text" name="data.social.ninjo" value="{{data.social.ninjo}}"/>
<textarea type="text" name="data.social.ninjo" value="{{data.social.ninjo}}"></textarea>
</label>
<label class="attribute-label">{{ localize 'l5r5e.social.giri' }}
<input type="text" name="data.social.giri" value="{{data.social.giri}}"/>
<textarea type="text" name="data.social.giri" value="{{data.social.giri}}"></textarea>
</label>
<label class="attribute-label">{{ localize 'l5r5e.social.titles' }}
<input type="text" name="data.social.titles" value="{{data.social.titles}}"/>
<input type="text" name="data.social.titles" value="{{data.social.titles}}" />
</label>
</fieldset>
<fieldset>

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-tshirt{{else}}fa-suitcase{{/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-hiking{{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}}

View File

@@ -14,7 +14,7 @@
</ul>
<ul class="item-properties">
<li class="equip-readied-control" data-item-id="{{item._id}}" data-type="readied">
<i class="i_readied fa{{^if item.data.readied}}r{{/if}} fa-hand-rock" title="{{#if item.data.readied}}{{localize 'l5r5e.weapons.readied'}}{{else}}{{localize 'l5r5e.weapons.sheathed'}}{{/if}}"></i>
<i class="i_readied fa{{^if item.data.readied}}r{{/if}} fa-check-circle" title="{{#if item.data.readied}}{{localize 'l5r5e.weapons.readied'}}{{else}}{{localize 'l5r5e.weapons.sheathed'}}{{/if}}"></i>
</li>
{{#each item.data.properties as |property id|}}
<li>{{{ property.name }}}</li>