mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-06-06 04:44: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
|
|
@ -43,7 +43,7 @@
|
|||
text-align: center;
|
||||
font-size: var(--font-size-16);
|
||||
margin: 0 4px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
|
||||
.hybrid-data {
|
||||
padding: 0 2px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
gap: 4px;
|
||||
|
||||
.trait-card {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
opacity: 0.4;
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
font-weight: bold;
|
||||
padding: 0 2px;
|
||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@beige, @dark);
|
||||
opacity: 0.4;
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
height: 16px;
|
||||
width: 110px;
|
||||
min-height: unset;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
color: light-dark(@beige, @beige);
|
||||
background-color: light-dark(var(--color-warm-3), var(--color-warm-3));
|
||||
|
||||
|
|
@ -230,7 +230,7 @@
|
|||
.suggested-trait-container {
|
||||
width: 56px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@beige, @dark);
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
|
|
@ -345,7 +345,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
|
||||
.nav-section-text {
|
||||
|
|
@ -383,7 +383,7 @@
|
|||
width: 56px;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@beige, @dark);
|
||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||
|
|
@ -447,7 +447,7 @@
|
|||
height: 100%;
|
||||
|
||||
.simple-equipment {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -466,7 +466,7 @@
|
|||
top: -8px;
|
||||
font-size: var(--font-size-12);
|
||||
white-space: nowrap;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: @dark;
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
|
||||
.mark-container {
|
||||
cursor: pointer;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
height: 26px;
|
||||
padding: 0 1px;
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
width: 100%;
|
||||
|
||||
.chip-inner-container {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
height: 26px;
|
||||
padding: 0 4px;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
.activity-selected-marker {
|
||||
font-size: var(--font-size-14);
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
}
|
||||
|
||||
.refreshable-container {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
color: light-dark(@dark, @beige);
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
img {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
opacity: 0.4;
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-style: italic;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
border-radius: 6px;
|
||||
padding: 4px 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
align-items: stretch;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
overflow: hidden;
|
||||
height: 11.5rem;
|
||||
width: 122px;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
img {
|
||||
height: 64px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
border: 1px solid @color-border;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue