uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update item style for flex stretch css

Browse Source
This commit is contained in:
Mandar
2021-01-07 19:38:01 +01:00
parent 5449d4a4de
commit b6549b7230
7 changed files with 117 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

2
system/styles/scss/global.scss
View File

@@ -113,7 +113,7 @@ fieldset {
color: $l5r5e-label; color: $l5r5e-label;
} }
.editor { .editor {
height: calc(100% - 1.25rem); height: 100%;
} }
} }

104
system/styles/scss/items.scss
View File

@@ -92,18 +92,31 @@
&.technique, &.technique,
&.weapon { &.weapon {
.sheet-header { .sheet-header {
margin-bottom: 0.5rem;
img { img {
flex: 0 0 90px; flex: 0 0 90px;
height: 90px; height: 90px;
width: 90px; width: 90px;
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.25);
} }
h1 {
input {
height: 5.5rem;
}
}
} }
fieldset { fieldset {
input[name="data.effects"] { input[name="data.effects"] {
text-align: left; text-align: left;
} }
} }
.sheet-body {
flex: 100%;
height: calc(100% - 90px);
align-self: stretch;
display: flex;
flex-wrap: wrap;
}
article { article {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -114,8 +127,14 @@
line-height: 1.5rem; line-height: 1.5rem;
} }
&.attributes { &.attributes {
.advancement_type, align-self: flex-start;
.advancement_skill, width: 100%;
height: 6.5rem;
#advancement_type,
#advancement_skill {
flex: 0 0 calc(40% - 2rem);
margin: 0.25rem;
}
select[name="data.skill"], select[name="data.skill"],
select[name="data.ring"], select[name="data.ring"],
select[name="data.peculiarity_type"], select[name="data.peculiarity_type"],
@@ -133,7 +152,12 @@
select[name="data.skill"] { select[name="data.skill"] {
text-transform: capitalize; text-transform: capitalize;
} }
.type, .type {
flex: 100%;
label {
width: 50%;
}
}
.properties { .properties {
flex: 0 0 calc(50% - 0.5rem); flex: 0 0 calc(50% - 0.5rem);
margin: 0.25rem; margin: 0.25rem;
@@ -147,7 +171,7 @@
input[type="number"] { input[type="number"] {
width: 2rem; width: 2rem;
&.grip { &.grip {
width: 12rem; width: 100%;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
} }
@@ -173,6 +197,9 @@
} }
&.infos { &.infos {
display: flex; display: flex;
align-self: stretch;
height: calc(100% - 7.5rem);
width: 100%;
.reference { .reference {
flex: 0 0 calc(100% - 0.5rem); flex: 0 0 calc(100% - 0.5rem);
input[name="data.book_reference"] { input[name="data.book_reference"] {
@@ -180,6 +207,15 @@
width: 70%; width: 70%;
} }
} }
fieldset {
align-self: stretch;
height: calc(100% - 2rem);
}
}
&.properties {
fieldset {
margin-bottom: 0.5rem;
}
} }
} }
} }
@@ -219,35 +255,69 @@
} }
} }
} }
&.peculiarity {
article {
&.attributes {
height: 8.5rem;
}
&.infos {
height: calc(100% - 9.5rem);
}
}
}
&.item { &.item {
article { article {
&.attributes { &.attributes {
height: 4.5rem;
.properties { .properties {
flex: 100%; flex: 100%;
} }
} }
&.infos {
flex: 0 0 60%;
height: calc(100% - 5.5rem);
}
&.properties {
flex: 0 0 40%;
height: calc(100% - 5.5rem);
}
} }
} }
&.property { &.property {
.sheet-header { &.infos {
img { height: 100%;
flex: 0 0 75px;
height: 75px;
width: 75px;
background: rgba(255, 255, 255, 0.25);
}
} }
article { article {
min-height: calc(100% - 5rem); min-height: calc(100% - 5rem);
} }
} }
&.armor {
article {
&.attributes {
height: 9.5rem;
}
&.infos {
flex: 0 0 60%;
height: calc(100% - 10.5rem);
}
&.properties {
flex: 0 0 40%;
height: calc(100% - 10.5rem);
}
}
}
&.weapon { &.weapon {
article { article {
&.attributes { &.attributes {
.attribute-value, height: 18.5rem;
.stats { .stats,
.attribute-value {
flex: 0 0 calc(50% - 0.5rem); flex: 0 0 calc(50% - 0.5rem);
flex-wrap: wrap;
margin: 0.25rem; margin: 0.25rem;
label {
width: 100%;
}
} }
.value { .value {
flex: 0 0 calc(25% - 0.5rem); flex: 0 0 calc(25% - 0.5rem);
@@ -262,6 +332,14 @@
} }
} }
} }
&.infos {
flex: 0 0 60%;
height: calc(100% - 19.5rem);
}
&.properties {
flex: 0 0 40%;
height: calc(100% - 19.5rem);
}
} }
} }
.item-list { .item-list {

25
system/styles/scss/sheets.scss
View File

@@ -39,6 +39,11 @@
box-shadow: none; box-shadow: none;
} }
} }
fieldset {
&.advancement {
display: block;
}
}
.advancements-tabs { .advancements-tabs {
height: 2rem; height: 2rem;
line-height: 2rem; line-height: 2rem;
@@ -49,22 +54,10 @@
margin: 0 0 0.25rem 0.5rem; margin: 0 0 0.25rem 0.5rem;
} }
} }
&.item,
.technique,
.weapon,
.armor,
.advantages,
.disadvantages {
.sheet-header {
height: 10rem;
}
.sheet-body {
height: calc(100% - 10rem);
}
}
form { form {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start;
} }
.sheet-body { .sheet-body {
flex: 0 0 100%; flex: 0 0 100%;
@@ -430,6 +423,12 @@
.narrative-content, .narrative-content,
.narrative-note { .narrative-note {
flex: 0 0 calc(50% - 0.5rem); flex: 0 0 calc(50% - 0.5rem);
fieldset {
display: block;
label {
width: 100%;
}
}
} }
.techniques-wrapper { .techniques-wrapper {
.checklist { .checklist {

2
system/templates/items/armor/armor-sheet.html
View File

@@ -23,6 +23,8 @@
<input class="select-on-focus" type="number" name="data.armor.supernatural" value="{{data.armor.supernatural}}" data-dtype="Number" min="0" placeholder="0"/> <input class="select-on-focus" type="number" name="data.armor.supernatural" value="{{data.armor.supernatural}}" data-dtype="Number" min="0" placeholder="0"/>
</label> </label>
</fieldset> </fieldset>
</article>
<article class="properties" data-group="primary" data-tab="properties">
{{> 'systems/l5r5e/templates/items/property/properties.html' properties=data.propertiesList }} {{> 'systems/l5r5e/templates/items/property/properties.html' properties=data.propertiesList }}
</article> </article>
{{> 'systems/l5r5e/templates/items/item/item-infos.html' }} {{> 'systems/l5r5e/templates/items/item/item-infos.html' }}

4
system/templates/items/item/item-sheet.html
View File

@@ -6,12 +6,14 @@
{{!-- Sheet Body --}} {{!-- Sheet Body --}}
<section class="sheet-body"> <section class="sheet-body">
{{!-- properties Tab --}} {{!-- properties Tab --}}
<article class="attributes" data-group="primary" data-tab="properties"> <article class="attributes" data-group="primary" data-tab="checkbox">
<label class="equipped checkbox"> <label class="equipped checkbox">
<input type="checkbox" name="data.equipped" {{checked item.data.equipped}} /> <input type="checkbox" name="data.equipped" {{checked item.data.equipped}} />
{{ localize 'l5r5e.armors.equipped' }} {{ localize 'l5r5e.armors.equipped' }}
</label> </label>
{{> 'systems/l5r5e/templates/items/item/item-value.html' }} {{> 'systems/l5r5e/templates/items/item/item-value.html' }}
</article>
<article class="properties" data-group="primary" data-tab="properties">
{{> 'systems/l5r5e/templates/items/property/properties.html' properties=data.propertiesList }} {{> 'systems/l5r5e/templates/items/property/properties.html' properties=data.propertiesList }}
</article> </article>
{{> 'systems/l5r5e/templates/items/item/item-infos.html' }} {{> 'systems/l5r5e/templates/items/item/item-infos.html' }}

12
system/templates/items/weapon/weapon-sheet.html
View File

@@ -44,12 +44,14 @@
{{ localize 'l5r5e.weapons.deadliness' }} {{ localize 'l5r5e.weapons.deadliness' }}
<input class="select-on-focus" type="number" name="data.deadliness" value="{{data.deadliness}}" data-dtype="Number" min="0" placeholder="0"/> <input class="select-on-focus" type="number" name="data.deadliness" value="{{data.deadliness}}" data-dtype="Number" min="0" placeholder="0"/>
</label> </label>
<label>
{{ localize 'l5r5e.weapons.grips' }}
<input class="grip" type="text" name="data.grip_1" value="{{data.grip_1}}" />
<input class="grip" type="text" name="data.grip_2" value="{{data.grip_2}}" />
</label>
</fieldset> </fieldset>
<fieldset class="stats">
<legend class="text-block-header">{{ localize 'l5r5e.weapons.grips' }}</legend>
<input class="grip" type="text" name="data.grip_1" value="{{data.grip_1}}" />
<input class="grip" type="text" name="data.grip_2" value="{{data.grip_2}}" />
</fieldset>
</article>
<article class="properties" data-group="primary" data-tab="properties">
{{> 'systems/l5r5e/templates/items/property/properties.html' properties=data.propertiesList }} {{> 'systems/l5r5e/templates/items/property/properties.html' properties=data.propertiesList }}
</article> </article>
{{> 'systems/l5r5e/templates/items/item/item-infos.html' }} {{> 'systems/l5r5e/templates/items/item/item-infos.html' }}