Add css for army and new item cohort/fortif

This commit is contained in:
Mandar
2021-11-18 13:32:50 +01:00
parent b0629ef19b
commit 9be0ed3571
5 changed files with 142 additions and 50 deletions

View File

@@ -10,6 +10,7 @@
@import "../scss/dices-chat";
@import "../scss/sheets";
@import "../scss/npc";
@import "../scss/army";
@import "../scss/nav";
@import "../scss/rings";
@import "../scss/skills";

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,87 @@
/** Sheets **/
&.sheet {
&.army {
.sheet-header {
height: auto;
h1 {
flex: 1;
}
.warlord,
.commander {
display: flex;
fieldset {
flex: content;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
strong {
color: $l5r5e-label;
}
label {
flex: 100%;
}
}
}
.readiness,
.standing {
align-items: flex-start;
h2 {
flex: 0 0 100%;
}
ul > li {
position: relative;
padding: 0.25rem;
display: flex;
flex-direction: column-reverse;
strong {
text-align: center;
}
input {
background: transparent;
border: 0 none;
text-align: center;
}
&:after {
content: "";
width: 2rem;
height: 2rem;
position: absolute;
right: calc(50% - 0.95rem);
top: calc(50% - 1.6rem);
background: transparent url("../assets/icons/circle.svg") no-repeat 0 0;
background-size: contain;
opacity: 0.25;
}
&:nth-child(1) {
&:after {
transform: rotate(0deg);
}
}
&:nth-child(2) {
&:after {
transform: rotate(90deg);
}
}
&:nth-child(3) {
&:after {
transform: rotate(180deg);
}
}
&:nth-child(4) {
&:after {
transform: rotate(-90deg);
}
}
}
}
.readiness {
ul {
display: flex;
flex-wrap: wrap;
li {
flex: 50%;
}
}
}
}
}
}

View File

@@ -98,6 +98,8 @@
}
// Advancement Sheet, Armor Sheet, Item Sheet, Peculiarity Sheet, Property Sheet, Technique Sheet, Weapon Sheet
&.advancement,
&.army-cohort,
&.army-fortification,
&.armor,
&.bond,
&.item,

View File

@@ -2,74 +2,76 @@
{{!-- Sheet Header --}}
<header class="sheet-header">
<img class="profile-img" src="{{data.img}}" data-edit="img" title="{{data.name}}"/>
<div class="header-fields identity-wrapper">
<h1 class="charname"><input name="name" type="text" value="{{data.name}}" placeholder="Name"/></h1>
</div>
<div class="header-fields">
<div class="warlord">
<h1 class="charname"><input name="name" type="text" value="{{data.name}}" placeholder="Name"/></h1>
<div class="header-fields warlord">
<fieldset>
<p>
{{localize 'l5r5e.army.warlord'}}
<strong>{{localize 'l5r5e.army.warlord'}}</strong>
<input name="data.warlord" type="text" value="{{data.data.warlord}}" />
</p>
<p>
{{localize 'l5r5e.army.allies_backers'}}
<strong>{{localize 'l5r5e.army.allies_backers'}}</strong>
<textarea type="text" name="data.allies_backers">{{data.data.allies_backers}}</textarea>
</p>
<p>
{{localize 'l5r5e.army.purpose_mustering'}}
<strong>{{localize 'l5r5e.army.purpose_mustering'}}</strong>
<textarea type="text" name="data.purpose_mustering">{{data.data.purpose_mustering}}</textarea>
</p>
<div class="attributes-wrapper">
{{localize 'l5r5e.army.battle_readiness.title'}}
<p>
{{localize 'l5r5e.army.battle_readiness.strength'}}
</fieldset>
<fieldset class="readiness">
<h2>{{localize 'l5r5e.army.battle_readiness.title'}}</h2>
<ul>
<li>
<strong>{{localize 'l5r5e.army.battle_readiness.strength'}}</strong>
<input name="data.battle_readiness.casualties_strength.max" type="text" value="{{data.data.battle_readiness.casualties_strength.max}}" />
</p>
<p>
{{localize 'l5r5e.army.battle_readiness.casualties'}}
</li>
<li>
<strong>{{localize 'l5r5e.army.battle_readiness.casualties'}}</strong>
<input name="data.battle_readiness.casualties_strength.value" type="text" value="{{data.data.battle_readiness.casualties_strength.value}}" />
</p>
<p>
{{localize 'l5r5e.army.battle_readiness.discipline'}}
</li>
<li>
<strong>{{localize 'l5r5e.army.battle_readiness.discipline'}}</strong>
<input name="data.battle_readiness.panic_discipline.max" type="text" value="{{data.data.battle_readiness.panic_discipline.max}}" />
</p>
<p>
{{localize 'l5r5e.army.battle_readiness.panic'}}
</li>
<li>
<strong>{{localize 'l5r5e.army.battle_readiness.panic'}}</strong>
<input name="data.battle_readiness.panic_discipline.value" type="text" value="{{data.data.battle_readiness.panic_discipline.value}}" />
</p>
</div>
</div>
<div class="commander">
<p>
{{localize 'l5r5e.army.commander'}}
</li>
</ul>
</fieldset>
</div>
<div class="header-fields commander">
<fieldset>
<label>
<strong>{{localize 'l5r5e.army.commander'}}</strong>
<input name="data.commander" type="text" value="{{data.data.commander}}" />
</p>
<p>
{{localize 'l5r5e.army.commander_abilities'}}
</label>
<label>
<strong>{{localize 'l5r5e.army.commander_abilities'}}</strong>
<textarea type="text" name="data.commander_abilities">{{data.data.commander_abilities}}</textarea>
</p>
<p>
{{localize 'l5r5e.army.army_abilities'}}
</label>
<label>
<strong>{{localize 'l5r5e.army.army_abilities'}}</strong>
<textarea type="text" name="data.army_abilities">{{data.data.army_abilities}}</textarea>
</p>
<div class="attributes-wrapper">
{{localize 'l5r5e.army.commander_standing'}}
<p>
{{localize 'l5r5e.social.honor'}}
</label>
</fieldset>
<fieldset class="standing">
<h2>{{localize 'l5r5e.army.commander_standing'}}</h2>
<ul>
<li>
<strong>{{localize 'l5r5e.social.honor'}}</strong>
<input name="data.commander_standing.honor" type="text" value="{{data.data.commander_standing.honor}}" />
</p>
<p>
{{localize 'l5r5e.social.glory'}}
</li>
<li>
<strong>{{localize 'l5r5e.social.glory'}}</strong>
<input name="data.commander_standing.glory" type="text" value="{{data.data.commander_standing.glory}}" />
</p>
<p>
{{localize 'l5r5e.social.status'}}
</li>
<li>
<strong>{{localize 'l5r5e.social.status'}}</strong>
<input name="data.commander_standing.status" type="text" value="{{data.data.commander_standing.status}}" />
</p>
</div>
</div>
</li>
</ul>
</fieldset>
</div>
</header>
{{!-- Sheet Body --}}