Foundry/.dungeon
0
0
Fork 0
Code Issues 57 Pull requests Projects Releases 7 Packages Wiki Activity Actions

Move some of the new design language CSS into a common location

Browse source
This commit is contained in:
Oliver-Akins 2024-02-04 20:34:43 -07:00
parent e284529a45
commit acd4d35da0
4 changed files with 69 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

55
styles/global/design-v2.scss Normal file
View file

@ -0,0 +1,55 @@
.item--custom,
.actor--mob {
input {
border: 2px solid black;
background: none;
box-shadow: none;
&.left { text-align: left; }
&.center { text-align: center; }
&.right { text-align: right; }
&:focus {
transform: scale(102%);
}
}
label.masked-input.masked-input {
display: flex;
flex-direction: row;
align-items: center;
transition: all ease-in-out 50ms;
&:focus-within {
transform: scale(102%);
}
> input {
border: none;
background: none;
border-radius: 0;
border: none;
&:focus, &:focus-visible {
box-shadow: none;
}
}
}
label.masked-textarea.masked-textarea {
display: flex;
flex-direction: column;
transition: all ease-in-out 50ms;
&:focus-within {
transform: scale(102%);
}
textarea {
flex-grow: 1;
resize: none;
border: none;
box-shadow: none;
background: none;
}
}
}

1
styles/root.scss
View file

@ -6,6 +6,7 @@
@use "./global/icons.scss";
@use "./global/buttons.scss";
@use "./global/design-v2.scss";
@use "./dialog/DiceList.scss";

45
styles/sheets/actor/mob/mob.scss
View file

@ -34,55 +34,10 @@
}
}
label.mask-input {
display: flex;
flex-direction: row;
align-items: center;
transition: all ease-in-out 50ms;
&:focus-within {
transform: scale(102%);
}
input {
text-align: right;
border: none;
background: none;
border-radius: 0;
border-bottom: 1px solid black;
&:focus, &:focus-visible {
box-shadow: none;
}
}
input.left {
text-align: left;
}
}
.wide {
grid-column: span 2;
}
.mask-textarea {
display: flex;
flex-direction: column;
transition: all ease-in-out 50ms;
&:focus-within {
transform: scale(102%);
}
textarea {
flex-grow: 1;
resize: none;
border: none;
box-shadow: none;
background: none;
}
}
// Area-specific stylings
.name {

22
templates/actors/mobs/main.hbs
View file

@ -6,23 +6,25 @@
name="name"
value="{{actor.name}}"
>
<label class="initiative mask-input">
<label class="initiative masked-input">
Initiative:
<input
type="number"
class="right"
name="system.initiative"
value="{{system.initiative}}"
>
</label>
<label class="bytes mask-input">
<label class="bytes masked-input">
Bytes:
<input
type="number"
class="right"
name="system.bytes"
value="{{system.bytes}}"
>
</label>
<label class="immune wide mask-input">
<label class="immune wide masked-input">
Drops:
<input
type="text"
@ -31,23 +33,25 @@
value="{{system.drops}}"
>
</label>
<label class="bonus mask-input">
<label class="bonus masked-input">
Bonus:
<input
type="number"
class="right"
name="system.bonus"
value="{{system.bonus}}"
>
</label>
<label class="morale mask-input">
<label class="morale masked-input">
Morale:
<input
type="number"
class="right"
name="system.morale"
value="{{system.morale}}"
>
</label>
<label class="weak wide mask-input">
<label class="weak wide masked-input">
Weak:
<input
type="text"
@ -56,7 +60,7 @@
value="{{system.weak}}"
>
</label>
<label class="immune wide mask-input">
<label class="immune wide masked-input">
Immune:
<input
type="text"
@ -82,13 +86,13 @@
<div style="flex-grow: 1"></div>
<button class="confirm edit-dice">Edit</button>
</div>
<label class="description mask-textarea">
<label class="description masked-textarea">
Description:
<textarea
name="system.description"
>{{system.description}}</textarea>
</label>
<label class="stunts mask-textarea">
<label class="stunts masked-textarea">
Stunts:
<textarea
name="system.stunts"