cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-18 16:09:03 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add style to textarea element, add spellcasting and domain class into char sheet and move rest buttons to another place

Browse source
This commit is contained in:
moliloo 2025-08-01 01:12:42 -03:00
parent 870fb32c40
commit ea40be45d3
7 changed files with 196 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

15
styles/less/global/elements.less
View file

@ -5,22 +5,26 @@
border: 1px solid light-dark(@dark-blue, @golden);
input[type='text'],
input[type='number'] {
input[type='number'],
textarea {
background: light-dark(transparent, transparent);
border-radius: 6px;
box-shadow: 0 4px 30px @soft-shadow;
backdrop-filter: blur(9.5px);
-webkit-backdrop-filter: blur(9.5px);
outline: none;
outline: 2px solid transparent;
color: light-dark(@dark-blue, @golden);
border: 1px solid light-dark(@dark, @beige);
transition: all 0.3s ease;
&::placeholder {
color: light-dark(@dark-40, @beige-50);
}
&:hover,
&:hover[type='text'],
&:hover[type='number'],
&:focus,
&:focus[type='text'],
&:focus[type='number'] {
background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
@ -70,6 +74,13 @@
}
}
textarea {
color: light-dark(@dark, @beige);
font-family: @font-body;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
}
button {
background: light-dark(transparent, @golden);
border: 1px solid light-dark(@dark-blue, @dark-blue);

6
styles/less/sheets-settings/adversary-settings/experiences.less
View file

@ -9,6 +9,12 @@
margin-bottom: 12px;
}
.experience-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.experience-item {
display: flex;
flex-direction: column;

76
styles/less/sheets/actors/character/header.less
View file

@ -4,12 +4,24 @@
// Theme header backgrounds
.appTheme({
.character-header-sheet .trait {
background: url(../assets/svg/trait-shield.svg) no-repeat;
.character-header-sheet {
.trait {
background: url(../assets/svg/trait-shield.svg) no-repeat;
}
.character-row .domains-section img {
filter: invert(88%) sepia(98%) saturate(1784%) hue-rotate(311deg) brightness(104%) contrast(91%);
}
}
}, {
.character-header-sheet .trait {
.character-header-sheet {
.trait {
background: url('../assets/svg/trait-shield-light.svg') no-repeat;
}
.character-row .domains-section img {
filter: invert(87%) sepia(15%) saturate(343%) hue-rotate(333deg) brightness(110%) contrast(87%);
}
}
});
@ -112,14 +124,27 @@
.character-row {
display: flex;
gap: 20px;
align-items: center;
justify-content: space-between;
padding: 0;
margin-bottom: 15px;
.hope-section {
margin-right: 20px;
}
.downtime-section {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
button {
flex: 1;
}
}
.hope-section,
.threshold-section {
.domains-section {
position: relative;
display: flex;
gap: 10px;
@ -137,21 +162,24 @@
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
&.threshold-value {
color: light-dark(@dark, @beige);
}
}
.threshold-legend {
position: absolute;
bottom: -21px;
color: light-dark(@golden, @dark-blue);
background-color: light-dark(@dark-blue, @golden);
padding: 3px;
justify-self: anchor-center;
border-radius: 0 0 3px 3px;
text-transform: capitalize;
.domain {
display: flex;
align-items: center;
gap: 5px;
.label {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
}
img {
height: 20px;
width: 20px;
}
}
.hope-value {
@ -198,15 +226,5 @@
}
}
}
.character-downtime-container {
display: flex;
align-items: center;
gap: 2px;
button {
flex: 1;
}
}
}
}

116
styles/less/sheets/actors/character/sidebar.less
View file

@ -55,6 +55,62 @@
}
}
}
.icons-list {
position: absolute;
display: flex;
flex-direction: column;
gap: 5px;
align-items: end;
justify-content: center;
top: 45px;
right: 10px;
.spellcast-icon {
display: flex;
align-items: center;
justify-content: end;
text-align: center;
padding-right: 8px;
max-width: 50px;
height: 50px;
font-size: 1.2rem;
background: light-dark(@dark-blue-60, @dark-golden-80);
backdrop-filter: blur(8px);
border: 4px double light-dark(@beige, @golden);
color: light-dark(@beige, @golden);
border-radius: 999px;
transition: all 0.3s ease;
.spellcast-label {
font-size: 14px;
opacity: 0;
margin-right: 0.3rem;
transition: all 0.3s ease;
}
i {
height: 24px;
width: 24px;
align-content: center;
margin-right: 3px;
}
&:not(.no-label):hover {
max-width: 300px;
padding: 0 10px;
border-radius: 60px;
.spellcast-label {
opacity: 1;
}
i {
margin-right: 0px;
}
}
}
}
}
.info-section {
@ -62,12 +118,13 @@
display: flex;
flex-direction: column;
top: -20px;
gap: 30px;
gap: 10px;
margin-bottom: -16px;
.resources-section {
display: flex;
justify-content: space-evenly;
margin-bottom: 20px;
.status-bar {
display: flex;
@ -345,6 +402,32 @@
}
}
}
.threshold-section {
position: relative;
display: flex;
align-self: center;
gap: 10px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
align-items: center;
width: fit-content;
height: 30px;
h4 {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
&.threshold-value {
color: light-dark(@dark, @beige);
}
}
}
}
.items-sidebar-list {
@ -360,7 +443,7 @@
.shortcut-items-section {
overflow-y: hidden;
max-height: 56%;
padding-top: 16px;
padding-top: 10px;
padding-bottom: 20px;
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
@ -393,35 +476,24 @@
.experience-row {
display: flex;
gap: 5px;
width: 250px;
align-items: center;
justify-content: space-between;
input[type='text'] {
height: 32px;
width: 180px;
border: 1px solid transparent;
outline: 2px solid transparent;
.experience-value {
height: 25px;
width: 35px;
font-size: 14px;
font-family: @font-body;
transition: all 0.3s ease;
color: light-dark(@dark, @beige);
&:hover {
outline: 2px solid light-dark(@dark, @beige);
}
align-content: center;
text-align: center;
margin-right: 5px;
}
}
.experience-value {
height: 25px;
width: 35px;
font-size: 14px;
font-family: @font-body;
color: light-dark(@dark, @beige);
align-content: center;
text-align: center;
.controls {
margin-left: auto;
}
}
}
}