mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-11 19:25:21 +01:00
Updated name field workflow in character actor.
This commit is contained in:
parent
3fc1ce8bad
commit
66924c530f
2 changed files with 58 additions and 13 deletions
|
|
@ -34,23 +34,58 @@
|
|||
.name-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: end;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
flex: 1;
|
||||
|
||||
input[type='text'] {
|
||||
font-size: var(--font-size-32);
|
||||
height: 42px;
|
||||
text-align: start;
|
||||
.name-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
outline: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
outline: 2px solid light-dark(@dark, @golden);
|
||||
}
|
||||
input[type='text'] {
|
||||
font-size: var(--font-size-28);
|
||||
font-family: var(--dh-font-body, 'Montserrat'), sans-serif;
|
||||
height: auto;
|
||||
text-align: start;
|
||||
position:absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index:-1;
|
||||
transition: opacity 0.1s ease-out;
|
||||
&:focus {
|
||||
position: static;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
z-index: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
cursor: text;
|
||||
color:light-dark(@dark, @golden);
|
||||
font-size: var(--font-size-32);
|
||||
font-family: var(--dh-font-title, 'Cinzel Decorative'), serif;
|
||||
text-align: start;
|
||||
line-height: 1.1;
|
||||
min-height: 42px;
|
||||
word-break: break-word;
|
||||
width: 100%;
|
||||
}
|
||||
input[type='text']:focus ~ label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.level-div {
|
||||
|
|
|
|||
|
|
@ -2,12 +2,22 @@
|
|||
<line-div></line-div>
|
||||
<div class="name-row">
|
||||
<h1 class='actor-name'>
|
||||
<input
|
||||
type='text'
|
||||
name='name'
|
||||
value='{{document.name}}'
|
||||
placeholder='{{localize "DAGGERHEART.GENERAL.actorName"}}'
|
||||
/>
|
||||
<div class="name-wrapper">
|
||||
<input
|
||||
type='text'
|
||||
name='name'
|
||||
id='actor-name-{{document.id}}'
|
||||
value='{{document.name}}'
|
||||
placeholder='{{localize "DAGGERHEART.GENERAL.actorName"}}'
|
||||
/>
|
||||
<label for="actor-name-{{document.id}}">
|
||||
{{#if document.name}}
|
||||
{{document.name}}
|
||||
{{else}}
|
||||
<span>{{localize "DAGGERHEART.GENERAL.actorName"}}</span>
|
||||
{{/if}}
|
||||
</label>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<div class='level-div'>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue