diff --git a/styles/less/sheets/actors/adversary/header.less b/styles/less/sheets/actors/adversary/header.less index d4a7812e..7bafdba3 100644 --- a/styles/less/sheets/actors/adversary/header.less +++ b/styles/less/sheets/actors/adversary/header.less @@ -17,17 +17,52 @@ padding-bottom: 8px; 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; + } } } diff --git a/templates/sheets/actors/adversary/header.hbs b/templates/sheets/actors/adversary/header.hbs index e6f829b8..74084367 100644 --- a/templates/sheets/actors/adversary/header.hbs +++ b/templates/sheets/actors/adversary/header.hbs @@ -2,8 +2,22 @@

- +
+ + +