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

[Refactor] Define more border and input color variables (#1937)

Browse source 
* Define more border and input color variables

* Rename custom color variables

* Fix assignment of variables

* Apply border color variable to matching borders

* Add trait header colors and shadow contrast
This commit is contained in:
Carlos Fernandez 2026-05-27 16:20:16 -04:00 • committed by GitHub
parent 48f9ffc318
commit 1ab8170d2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 120 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files

2
styles/less/sheets/actors/actor-sheet-shared.less
View file

@ -182,7 +182,7 @@
background-color: light-dark(transparent, @dark-blue);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
align-items: center;
width: fit-content;

6
styles/less/sheets/actors/adversary/sidebar.less
View file

@ -67,7 +67,7 @@
background-color: light-dark(transparent, @dark-blue);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
align-items: center;
width: fit-content;
@ -191,7 +191,7 @@
appearance: none;
width: 100px;
height: 40px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: @dark-blue;
@ -237,7 +237,7 @@
display: flex;
width: 50px;
height: 30px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 0 6px;

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

@ -172,7 +172,7 @@
background-color: light-dark(transparent, @dark-blue);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
align-items: center;
width: fit-content;
@ -226,7 +226,6 @@
padding-left: 0.5rem;
.trait {
--color-border: light-dark(@semi-transparent-dark-blue, @golden-60);
cursor: pointer;
position: relative;
@ -238,10 +237,10 @@
.trait-name {
position: relative;
background-color: light-dark(@semi-transparent-dark-blue, @golden-40);
border: 1px solid var(--color-border);
background-color: @trait-color-bg;
border: 1px solid @trait-color-border;
border-radius: 3px;
color: light-dark(var(--color-light-1), @golden);
color: @color-text-emphatic;
font-size: var(--font-size-12);
font-weight: 600;
height: 1rem;
@ -250,7 +249,7 @@
width: 100%;
padding: 0 0.1876px 0 0.375rem;
margin-right: 0.125rem; /* makes it center SLIGHTLY */
text-shadow: 1px 1px 2px @light-black;
text-shadow: 1px 1px 3px @color-text-shadow-contrast;
display: flex;
align-items: center;
@ -259,7 +258,7 @@
.tier-mark {
position: absolute;
background-color: @dark-blue;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 50%;
width: 1rem;
height: 1rem;
@ -279,6 +278,7 @@
}
.trait-value-area {
--color-border: @trait-color-border;
--background: light-dark(#e8e6e3, @dark-blue);
display: flex;
position: relative;
@ -298,7 +298,7 @@
.spellcasting-mark {
position: absolute;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
color: @golden;
left: 0;
right: 0;

2
styles/less/sheets/actors/character/loadout.less
View file

@ -45,7 +45,7 @@
.btn-toggle-view {
background: light-dark(@dark-blue-10, @dark-blue);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 15px;
padding: 0;
gap: 0;

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

@ -40,7 +40,7 @@
.application.sheet.dh-style .character-sidebar-sheet {
width: 275px;
min-width: 275px;
border-right: 1px solid light-dark(@dark-blue, @golden);
border-right: 1px solid @color-border;
.portrait {
position: relative;
@ -168,7 +168,7 @@
appearance: none;
width: 100px;
height: 40px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: @dark-blue;
@ -282,7 +282,7 @@
&:hover {
background: light-dark(@light-black, @dark-blue);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
h4,
i {
@ -309,7 +309,7 @@
flex-wrap: wrap;
gap: 4px;
padding: 5px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: @dark-blue;
@ -343,7 +343,7 @@
&:hover {
background: light-dark(@light-black, @dark-blue);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
.label,
.value,
@ -375,7 +375,7 @@
text-align: center;
z-index: 2;
color: light-dark(@dark-blue, @beige);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-bottom: none;
border-radius: 6px 6px 0 0;
@ -411,7 +411,7 @@
appearance: none;
width: 80px;
height: 30px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: light-dark(transparent, @dark-blue);
@ -450,7 +450,7 @@
display: flex;
width: 50px;
height: 30px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 0 6px;
@ -515,7 +515,7 @@
background-color: light-dark(transparent, @dark-blue);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
align-items: center;
width: fit-content;

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

@ -30,14 +30,14 @@
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);
text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
height: 2rem;
text-align: center;
transition: all 0.3s ease;
&:hover {
outline: 2px solid light-dark(@dark, @golden);
outline: 2px solid @color-border;
}
}
}
@ -68,7 +68,7 @@
display: flex;
width: 50px;
height: 40px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 0 6px;
@ -100,104 +100,6 @@
}
}
// .status-bar {
// display: flex;
// justify-content: center;
// position: relative;
// width: 100px;
// 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 {
// position: absolute;
// display: flex;
// padding: 0 6px;
// font-size: 1.5rem;
// align-items: center;
// width: 100px;
// height: 40px;
// justify-content: center;
// text-align: center;
// z-index: 2;
// color: @beige;
// input[type='number'] {
// background: transparent;
// font-size: 1.5rem;
// width: 40px;
// height: 30px;
// text-align: center;
// border: none;
// outline: 2px solid transparent;
// color: @beige;
// &.bar-input {
// padding: 0;
// color: @beige;
// backdrop-filter: none;
// background: transparent;
// transition: all 0.3s ease;
// &:hover,
// &:focus {
// background: @semi-transparent-dark-blue;
// backdrop-filter: blur(9.5px);
// }
// }
// }
// .bar-label {
// width: 40px;
// }
// }
// .progress-bar {
// position: absolute;
// appearance: none;
// width: 100px;
// height: 40px;
// border: 1px solid light-dark(@dark-blue, @golden);
// border-radius: 6px;
// z-index: 1;
// background: @dark-blue;
// &::-webkit-progress-bar {
// border: none;
// background: @dark-blue;
// border-radius: 6px;
// }
// &::-webkit-progress-value {
// background: @gradient-hp;
// border-radius: 6px;
// }
// &.stress-color::-webkit-progress-value {
// background: @gradient-stress;
// border-radius: 6px;
// }
// &::-moz-progress-bar {
// background: @gradient-hp;
// border-radius: 6px;
// }
// &.stress-color::-moz-progress-bar {
// background: @gradient-stress;
// border-radius: 6px;
// }
// }
// }
.level-div {
white-space: nowrap;
display: flex;

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

@ -36,15 +36,14 @@
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);
text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
padding-left: 0;
height: 2.625rem;
&:hover[type='text'],
&:focus[type='text'] {
box-shadow: none;
outline: 2px solid light-dark(@dark-blue, @golden);
outline: 2px solid @color-border;
}
}
@ -98,7 +97,7 @@
display: flex;
width: 50px;
height: 30px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 0 6px;

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

@ -20,11 +20,12 @@
input.item-name[type='text'] {
backdrop-filter: none;
border: none;
color: @color-text-emphatic;
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);
text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
text-align: center;
transition: all 0.3s ease;
@ -33,7 +34,7 @@
&:hover[type='text'],
&:focus[type='text'] {
outline: 2px solid light-dark(@dark-blue, @golden);
outline: 2px solid @color-border;
}
}

12
styles/less/sheets/actors/party/party-members.less
View file

@ -48,7 +48,7 @@
border-radius: 50%;
width: 24px;
height: 24px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
object-fit: cover;
}
}
@ -81,7 +81,7 @@
background-color: light-dark(var(--color-light-1), @dark-blue);
color: @color-text-emphatic;
padding: 4px 6px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 3px;
align-items: baseline;
width: fit-content;
@ -134,7 +134,7 @@
background-color: light-dark(transparent, @dark-blue);
color: @color-text-emphatic;
padding: 3px 6px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 3px;
align-items: center;
width: fit-content;
@ -214,7 +214,7 @@
background-color: light-dark(@dark-blue-10, @dark-blue);
color: @color-text-emphatic;
padding: 2px 5px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 0 6px 6px 0;
width: fit-content;
min-height: 22px;
@ -232,7 +232,7 @@
.slot {
width: 16px;
height: 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
background: light-dark(@dark-blue-10, @golden-10);
border-radius: 3px;
transition: all 0.3s ease;
@ -248,7 +248,7 @@
.traits {
background-color: light-dark(@dark-blue-10, @dark-blue);
border: 1px solid light-dark(@dark-blue, @golden);
border: 1px solid @color-border;
border-radius: 6px;
display: grid;
grid-template-columns: 1fr 1fr;