army sheet : some css pass
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -3,9 +3,11 @@
|
||||
&.army {
|
||||
.sheet-header {
|
||||
height: auto;
|
||||
|
||||
h1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.readiness {
|
||||
flex: 0 0 100%;
|
||||
display: flex;
|
||||
@@ -21,18 +23,22 @@
|
||||
flex: 25%;
|
||||
display: inline-grid;
|
||||
position: relative;
|
||||
|
||||
strong {
|
||||
color: $l5r5e-label;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 2rem;
|
||||
@@ -45,21 +51,25 @@
|
||||
opacity: 0.25;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&: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);
|
||||
@@ -67,106 +77,119 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
h2 {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
&.army {
|
||||
.warlord,
|
||||
.commander {
|
||||
display: flex;
|
||||
fieldset {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
strong {
|
||||
color: $l5r5e-label;
|
||||
}
|
||||
label {
|
||||
flex: 100%;
|
||||
}
|
||||
p {
|
||||
width: 100%;
|
||||
}
|
||||
textarea {
|
||||
height: calc(100% - 22px);
|
||||
}
|
||||
.actor-remove-control {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.standing {
|
||||
flex: 0 0 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
h2 {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
ul {
|
||||
.tab {
|
||||
&.army {
|
||||
.warlord,
|
||||
.commander {
|
||||
display: flex;
|
||||
position: relative;
|
||||
li {
|
||||
flex: 33%;
|
||||
display: inline-grid;
|
||||
position: relative;
|
||||
padding: 0.25rem;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
fieldset {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
strong {
|
||||
text-align: center;
|
||||
color: $l5r5e-label;
|
||||
}
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
text-align: center;
|
||||
label {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
right: calc(50% - 0.95rem);
|
||||
top: calc(50% - 0.2rem);
|
||||
background: transparent url("../assets/icons/circle.svg") no-repeat 0 0;
|
||||
background-size: contain;
|
||||
opacity: 0.25;
|
||||
z-index: -1;
|
||||
p {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
&:after {
|
||||
transform: rotate(0deg);
|
||||
textarea {
|
||||
height: calc(100% - 22px);
|
||||
}
|
||||
|
||||
.actor-remove-control {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.standing {
|
||||
flex: 0 0 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
h2 {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
li {
|
||||
flex: 33%;
|
||||
display: inline-grid;
|
||||
position: relative;
|
||||
padding: 0.25rem;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
strong {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&:after {
|
||||
transform: rotate(90deg);
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
&:after {
|
||||
transform: rotate(180deg);
|
||||
content: "";
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
right: calc(50% - 0.95rem);
|
||||
top: calc(50% - 0.2rem);
|
||||
background: transparent url("../assets/icons/circle.svg") no-repeat 0 0;
|
||||
background-size: contain;
|
||||
opacity: 0.25;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
&:after {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&:after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
&:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.others {
|
||||
flex-direction: column;
|
||||
.editor-content {
|
||||
min-height: 8rem;
|
||||
max-height: 14rem;
|
||||
|
||||
&.others {
|
||||
flex-direction: column;
|
||||
|
||||
.editor-content {
|
||||
min-height: 8rem;
|
||||
max-height: 14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -405,6 +405,39 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.army-cohort {
|
||||
.sheet-body {
|
||||
height: calc(100% - 92px - 3.6rem);
|
||||
}
|
||||
article {
|
||||
&.attributes {
|
||||
height: 10.5rem;
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
.flx50 {
|
||||
flex: 0 0 calc(50% - 0.5rem);
|
||||
}
|
||||
.flx100 {
|
||||
flex: 0 0 calc(100% - 0.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.army-fortification {
|
||||
.sheet-body {
|
||||
height: calc(100% - 92px);
|
||||
}
|
||||
article {
|
||||
&.infos {
|
||||
height: calc(100% - 4.5rem);
|
||||
}
|
||||
&.attributes {
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-list {
|
||||
> li {
|
||||
.item-description {
|
||||
|
||||
@@ -7,15 +7,15 @@
|
||||
<section class="sheet-body">
|
||||
{{!-- properties Tab --}}
|
||||
<article class="attributes" data-group="primary" data-tab="description">
|
||||
<label class="attribute army-cohort-types">
|
||||
<label class="attribute army-cohort-types flx50">
|
||||
{{localize 'l5r5e.army.cohort.leader'}}
|
||||
<input class="select-on-focus" type="text" name="data.leader" value="{{data.data.leader}}" data-dtype="String"/>
|
||||
</label>
|
||||
<label class="attribute army-cohort-types">
|
||||
<label class="attribute army-cohort-types flx50">
|
||||
{{localize 'l5r5e.equipment'}}
|
||||
<input class="select-on-focus" type="text" name="data.equipment" value="{{data.data.equipment}}" data-dtype="String"/>
|
||||
</label>
|
||||
<label class="attribute army-cohort-types">
|
||||
<label class="attribute army-cohort-types flx100">
|
||||
{{localize 'l5r5e.army.cohort.abilities'}}
|
||||
<input class="select-on-focus" type="text" name="data.abilities" value="{{data.data.abilities}}" data-dtype="String"/>
|
||||
</label>
|
||||
|
||||
Reference in New Issue
Block a user