cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-06-06 21:04:16 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Smooth gradient for headers

Browse source
This commit is contained in:
Carlos Fernandez 2026-05-24 21:02:56 -04:00
parent 0a45b75df5
commit 799ecb86e6
6 changed files with 124 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

13
styles/less/sheets/actors/companion/header.less
View file

@ -11,7 +11,7 @@
.profile {
height: 235px;
cursor: pointer;
mask-image: linear-gradient(0deg, transparent 0%, black 12%);
.smooth-gradient-ease-in-out(mask-image, to top, black, 2.25rem);
}
.actor-name {
@ -24,14 +24,17 @@
margin-bottom: -30px;
input[type='text'] {
background-color: light-dark(@dark-15, @light-black);
border: 1px solid transparent;
backdrop-filter: none;
border: none;
font-family: @font-title;
font-size: var(--font-size-24);
outline: 2px solid transparent;
box-shadow: unset;
text-shadow: 0 0 4px light-dark(white, @dark-80), 0 0 8px light-dark(white, @dark-80), 0 0 14px light-dark(white, @dark-80);
height: 2rem;
text-align: center;
outline: 2px solid transparent;
transition: all 0.3s ease;
text-shadow: 1px 1px 2px light-dark(@soft-white-shadow, @light-black);
&:hover {
outline: 2px solid light-dark(@dark, @golden);

48
styles/less/sheets/actors/environment/header.less
View file

@ -1,5 +1,6 @@
@import '../../../utils/colors.less';
@import '../../../utils/fonts.less';
@import '../../../utils/mixin.less';
.application.sheet.daggerheart.actor.dh-style.environment {
.environment-header-sheet {
@ -10,8 +11,8 @@
.profile {
height: 235px;
mask-image: linear-gradient(0deg, transparent 0%, black 20%);
cursor: pointer;
.smooth-gradient-ease-in-out(mask-image, to top, black, 3.5rem);
}
.item-container {
@ -21,10 +22,31 @@
align-items: center;
position: relative;
top: -40px;
top: -36px;
gap: 0 var(--spacer-12);
padding: 0 20px;
margin-bottom: -30px;
margin-bottom: -26px;
.item-name input[type='text'] {
backdrop-filter: none;
border: none;
font-family: @font-title;
font-size: var(--font-size-32);
text-align: start;
transition: all 0.3s ease;
outline: 2px solid transparent;
box-shadow: none;
text-shadow: 0 0 4px light-dark(white, @dark-80), 0 0 8px light-dark(white, @dark-80), 0 0 14px light-dark(white, @dark-80);
padding-left: 0;
height: 2.625rem;
&:hover[type='text'],
&:focus[type='text'] {
box-shadow: none;
outline: 2px solid light-dark(@dark-blue, @golden);
}
}
.flexrow {
align-items: baseline;
@ -107,26 +129,6 @@
}
}
}
.item-name {
input[type='text'] {
background-color: light-dark(@dark-15, @light-black);
border: 1px solid transparent;
font-size: var(--font-size-32);
height: 2.625rem;
text-align: start;
transition: all 0.3s ease;
outline: 2px solid transparent;
text-shadow: 1px 1px 2px light-dark(@soft-white-shadow, @light-black);
padding-left: 0;
&:hover[type='text'],
&:focus[type='text'] {
box-shadow: none;
outline: 2px solid light-dark(@dark-blue, @golden);
}
}
}
}
.environment-info {

35
styles/less/sheets/actors/party/header.less
View file

@ -1,5 +1,6 @@
@import '../../../utils/colors.less';
@import '../../../utils/fonts.less';
@import '../../../utils/mixin.less';
.party-header-sheet {
display: flex;
@ -9,26 +10,30 @@
.profile {
height: 235px;
mask-image: linear-gradient(0deg, transparent 0%, black 10%);
cursor: pointer;
.smooth-gradient-ease-in-out(mask-image, to top, black, 3.5rem);
}
.item-container {
.item-name {
padding: 0 20px;
input[type='text'] {
font-size: 32px;
height: 42px;
text-align: center;
transition: all 0.3s ease;
outline: 2px solid transparent;
border: 1px solid transparent;
margin-top: -2rem;
z-index: 1;
input.item-name[type='text'] {
backdrop-filter: none;
border: none;
font-family: @font-title;
font-size: var(--font-size-32);
outline: 2px solid transparent;
box-shadow: unset;
text-shadow: 0 0 4px light-dark(white, @dark-80), 0 0 8px light-dark(white, @dark-80), 0 0 14px light-dark(white, @dark-80);
&:hover[type='text'],
&:focus[type='text'] {
box-shadow: none;
outline: 2px solid light-dark(@dark-blue, @golden);
}
text-align: center;
transition: all 0.3s ease;
width: calc(100% - 40px);
height: 2.625rem;
&:hover[type='text'],
&:focus[type='text'] {
outline: 2px solid light-dark(@dark-blue, @golden);
}
}