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

Implement new button styling

Browse source
This commit is contained in:
Carlos Fernandez 2026-05-13 06:31:04 -04:00
parent 24813e7e4f
commit b2bda3e76c
4 changed files with 37 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
assets/parchments/dh-parchment-button-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

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

@ -100,16 +100,17 @@
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
}
button:where(:not(.plain)) {
background: light-dark(transparent, @golden);
border: 1px solid light-dark(@dark-blue, @dark-blue);
color: light-dark(@dark-blue, @dark-blue);
button:where(:not(.plain, .icon)) {
background: var(--button-background);
border: 1px solid light-dark(@dark-blue, #efe6d850);
color: light-dark(@dark-blue, #efe6d8);
outline: none;
box-shadow: none;
border-radius: 0;
&:hover {
background: light-dark(@light-black, @dark-blue);
color: light-dark(@dark-blue, @golden);
background-color: @golden-40;
background-blend-mode: lighten;
}
&.glow {
@ -117,15 +118,8 @@
}
&:disabled {
background: light-dark(transparent, @golden);
color: light-dark(@dark-blue, @dark-blue);
opacity: 0.6;
cursor: not-allowed;
&:hover {
background: light-dark(transparent, @golden);
color: light-dark(@dark-blue, @dark-blue);
}
}
&.reverted {
@ -551,38 +545,31 @@
.item-button {
display: flex;
border: 1px solid light-dark(#18162e, #18162e);
color: light-dark(#18162e, #18162e);
outline: none;
box-shadow: none;
border-radius: 6px;
border-radius: 0;
button {
border-radius: 3px 0px 0px 3px;
color: light-dark(@dark-blue, @dark-blue);
--button-size: 2.25em;
font-size: var(--font-size-12);
font-family: @font-body;
font-weight: 500;
white-space: nowrap;
border: 0;
&:hover {
color: light-dark(@dark-blue, @golden);
&:not(:last-child) {
border-right-width: 0;
}
&:not(:first-child) {
padding: 6px;
background: light-dark(@dark-blue-10, @golden-secondary);
border-radius: 0px 3px 3px 0px;
color: light-dark(@dark-blue, @dark-golden);
&:hover {
background: light-dark(@light-black, @dark-blue);
color: light-dark(@dark-blue, @golden-secondary);
}
border-left-width: 0;
}
}
.spacer {
border-right: 1px solid black;
border-right: 1px solid light-dark(#18162e, #efe6d850);
content: '';
margin-left: -1px;
}
}
}
@ -747,6 +734,8 @@
}
.theme-light {
--button-background: transparent;
.application {
&.sheet.dh-style {
button.glow {
@ -769,6 +758,11 @@
}
}
.theme-dark .dh-style,
.theme-dark.dh-style {
--button-background: url('../assets/parchments/dh-parchment-button-dark.png');
}
.application .component.dh-style.card-preview-container {
position: relative;
border: 2px solid transparent;

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

@ -93,6 +93,17 @@
}
}
.status-label {
position: relative;
background: light-dark(@dark-blue, @golden);
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
color: light-dark(@beige, @dark-blue);
}
}
.resources-section {
display: flex;
justify-content: space-evenly;
@ -106,19 +117,10 @@
height: 40px;
.status-label {
position: relative;
top: 40px;
height: 22px;
width: 79px;
clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
background: light-dark(@dark-blue, @golden);
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
color: light-dark(@beige, @dark-blue);
}
}
.status-value {
@ -253,12 +255,10 @@
.status-label {
padding: 2px 2px;
position: relative;
top: 30px;
height: 22px;
width: 95px;
border-radius: 3px;
background: light-dark(@dark-blue, @golden);
clip-path: none;
display: flex;
align-items: center;
@ -268,10 +268,6 @@
transition: all 0.3s ease;
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
color: light-dark(@beige, @dark-blue);
font-size: var(--font-size-12);
}
@ -494,14 +490,8 @@
padding: 2px 10px;
width: 100%;
border-radius: 3px;
background: light-dark(@dark-blue, @golden);
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
font-size: var(--font-size-12);
color: light-dark(@beige, @dark-blue);
}
}
}

2
templates/sheets/actors/character/features.hbs
View file

@ -8,6 +8,7 @@
type='feature'
actorType='character'
collection=category.values
isGlassy=true
canCreate=@root.editable
showActions=@root.editable
}}
@ -17,6 +18,7 @@
type='feature'
actorType='character'
collection=category.values
isGlassy=true
canCreate=false
showActions=@root.editable
}}