mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-06-07 13:24:16 +02:00
[Refactor] Define more border and input color variables (#1937)
* 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:
parent
48f9ffc318
commit
1ab8170d2f
31 changed files with 120 additions and 200 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue