mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-06-08 05:38:10 +02:00
Apply border color variable to matching borders
This commit is contained in:
parent
4f5317060a
commit
988dc82c36
26 changed files with 58 additions and 156 deletions
|
|
@ -43,7 +43,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: var(--font-size-16);
|
font-size: var(--font-size-16);
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: light-dark(@dark, @beige);
|
color: light-dark(@dark, @beige);
|
||||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
|
|
@ -164,7 +164,7 @@
|
||||||
|
|
||||||
.hybrid-data {
|
.hybrid-data {
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: light-dark(@dark, @beige);
|
color: light-dark(@dark, @beige);
|
||||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||||
|
|
@ -191,7 +191,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: light-dark(@dark, @beige);
|
color: light-dark(@dark, @beige);
|
||||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||||
|
|
@ -226,7 +226,7 @@
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
|
||||||
.trait-card {
|
.trait-card {
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
|
|
|
||||||
|
|
@ -79,7 +79,7 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
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;
|
border-radius: 6px;
|
||||||
color: light-dark(@beige, @dark);
|
color: light-dark(@beige, @dark);
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
|
|
@ -203,7 +203,7 @@
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 110px;
|
width: 110px;
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
color: light-dark(@beige, @beige);
|
color: light-dark(@beige, @beige);
|
||||||
background-color: light-dark(var(--color-warm-3), var(--color-warm-3));
|
background-color: light-dark(var(--color-warm-3), var(--color-warm-3));
|
||||||
|
|
||||||
|
|
@ -230,7 +230,7 @@
|
||||||
.suggested-trait-container {
|
.suggested-trait-container {
|
||||||
width: 56px;
|
width: 56px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: light-dark(@beige, @dark);
|
color: light-dark(@beige, @dark);
|
||||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||||
|
|
@ -345,7 +345,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
||||||
.nav-section-text {
|
.nav-section-text {
|
||||||
|
|
@ -383,7 +383,7 @@
|
||||||
width: 56px;
|
width: 56px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: light-dark(@beige, @dark);
|
color: light-dark(@beige, @dark);
|
||||||
background-image: url(../assets/parchments/dh-parchment-light.png);
|
background-image: url(../assets/parchments/dh-parchment-light.png);
|
||||||
|
|
@ -447,7 +447,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.simple-equipment {
|
.simple-equipment {
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -466,7 +466,7 @@
|
||||||
top: -8px;
|
top: -8px;
|
||||||
font-size: var(--font-size-12);
|
font-size: var(--font-size-12);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: @dark;
|
color: @dark;
|
||||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||||
|
|
|
||||||
|
|
@ -81,7 +81,7 @@
|
||||||
|
|
||||||
.mark-container {
|
.mark-container {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
padding: 0 1px;
|
padding: 0 1px;
|
||||||
|
|
@ -126,7 +126,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.chip-inner-container {
|
.chip-inner-container {
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
|
|
||||||
.activity-selected-marker {
|
.activity-selected-marker {
|
||||||
font-size: var(--font-size-14);
|
font-size: var(--font-size-14);
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: light-dark(@dark, @beige);
|
color: light-dark(@dark, @beige);
|
||||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.refreshable-container {
|
.refreshable-container {
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: light-dark(@dark, @beige);
|
color: light-dark(@dark, @beige);
|
||||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
img {
|
img {
|
||||||
width: 136px;
|
width: 136px;
|
||||||
height: 136px;
|
height: 136px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 4px 4px;
|
padding: 4px 4px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 11.5rem;
|
height: 11.5rem;
|
||||||
width: 122px;
|
width: 122px;
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
img {
|
img {
|
||||||
height: 64px;
|
height: 64px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.member-name {
|
.member-name {
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -287,7 +287,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
width: 98px;
|
width: 98px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
.slot {
|
.slot {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
background: light-dark(@dark-blue-10, @golden-10);
|
background: light-dark(@dark-blue-10, @golden-10);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
@ -148,7 +148,7 @@
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: @dark-blue;
|
background: @dark-blue;
|
||||||
|
|
|
||||||
|
|
@ -182,7 +182,7 @@
|
||||||
background-color: light-dark(transparent, @dark-blue);
|
background-color: light-dark(transparent, @dark-blue);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@
|
||||||
background-color: light-dark(transparent, @dark-blue);
|
background-color: light-dark(transparent, @dark-blue);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -191,7 +191,7 @@
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: @dark-blue;
|
background: @dark-blue;
|
||||||
|
|
@ -237,7 +237,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-radius: 6px 6px 0 0;
|
border-radius: 6px 6px 0 0;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
|
|
|
||||||
|
|
@ -172,7 +172,7 @@
|
||||||
background-color: light-dark(transparent, @dark-blue);
|
background-color: light-dark(transparent, @dark-blue);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -259,7 +259,7 @@
|
||||||
.tier-mark {
|
.tier-mark {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: @dark-blue;
|
background-color: @dark-blue;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -298,7 +298,7 @@
|
||||||
|
|
||||||
.spellcasting-mark {
|
.spellcasting-mark {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
color: @golden;
|
color: @golden;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
|
|
||||||
.btn-toggle-view {
|
.btn-toggle-view {
|
||||||
background: light-dark(@dark-blue-10, @dark-blue);
|
background: light-dark(@dark-blue-10, @dark-blue);
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
|
|
|
||||||
|
|
@ -168,7 +168,7 @@
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: @dark-blue;
|
background: @dark-blue;
|
||||||
|
|
@ -282,7 +282,7 @@
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: light-dark(@light-black, @dark-blue);
|
background: light-dark(@light-black, @dark-blue);
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
|
|
||||||
h4,
|
h4,
|
||||||
i {
|
i {
|
||||||
|
|
@ -309,7 +309,7 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: @dark-blue;
|
background: @dark-blue;
|
||||||
|
|
@ -343,7 +343,7 @@
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: light-dark(@light-black, @dark-blue);
|
background: light-dark(@light-black, @dark-blue);
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
|
|
||||||
.label,
|
.label,
|
||||||
.value,
|
.value,
|
||||||
|
|
@ -375,7 +375,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
color: light-dark(@dark-blue, @beige);
|
color: light-dark(@dark-blue, @beige);
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-radius: 6px 6px 0 0;
|
border-radius: 6px 6px 0 0;
|
||||||
|
|
||||||
|
|
@ -411,7 +411,7 @@
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: light-dark(transparent, @dark-blue);
|
background: light-dark(transparent, @dark-blue);
|
||||||
|
|
@ -450,7 +450,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-radius: 6px 6px 0 0;
|
border-radius: 6px 6px 0 0;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
|
|
@ -515,7 +515,7 @@
|
||||||
background-color: light-dark(transparent, @dark-blue);
|
background-color: light-dark(transparent, @dark-blue);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-radius: 6px 6px 0 0;
|
border-radius: 6px 6px 0 0;
|
||||||
padding: 0 6px;
|
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 {
|
.level-div {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -98,7 +98,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-radius: 6px 6px 0 0;
|
border-radius: 6px 6px 0 0;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -81,7 +81,7 @@
|
||||||
background-color: light-dark(var(--color-light-1), @dark-blue);
|
background-color: light-dark(var(--color-light-1), @dark-blue);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
padding: 4px 6px;
|
padding: 4px 6px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -134,7 +134,7 @@
|
||||||
background-color: light-dark(transparent, @dark-blue);
|
background-color: light-dark(transparent, @dark-blue);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
padding: 3px 6px;
|
padding: 3px 6px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -214,7 +214,7 @@
|
||||||
background-color: light-dark(@dark-blue-10, @dark-blue);
|
background-color: light-dark(@dark-blue-10, @dark-blue);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 0 6px 6px 0;
|
border-radius: 0 6px 6px 0;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
min-height: 22px;
|
min-height: 22px;
|
||||||
|
|
@ -232,7 +232,7 @@
|
||||||
.slot {
|
.slot {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
background: light-dark(@dark-blue-10, @golden-10);
|
background: light-dark(@dark-blue-10, @golden-10);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
@ -248,7 +248,7 @@
|
||||||
|
|
||||||
.traits {
|
.traits {
|
||||||
background-color: light-dark(@dark-blue-10, @dark-blue);
|
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;
|
border-radius: 6px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
.effect-container {
|
.effect-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
|
|
||||||
|
|
@ -266,7 +266,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: light-dark(@dark-15, @dark-golden-80);
|
background-color: light-dark(@dark-15, @dark-golden-80);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
min-height: 30px;
|
min-height: 30px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
||||||
&.selectable {
|
&.selectable {
|
||||||
|
|
@ -76,7 +76,7 @@
|
||||||
.domain-label {
|
.domain-label {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
color: light-dark(@dark, @beige);
|
color: light-dark(@dark, @beige);
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
color: light-dark(@dark, @beige);
|
color: light-dark(@dark, @beige);
|
||||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
|
|
@ -83,7 +83,7 @@
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: @dark-blue;
|
background: @dark-blue;
|
||||||
|
|
@ -118,7 +118,7 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: @dark-blue;
|
background: @dark-blue;
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
background-color: light-dark(transparent, @dark-blue);
|
background-color: light-dark(transparent, @dark-blue);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
|
||||||
|
|
@ -238,7 +238,7 @@ aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-s
|
||||||
.tooltip-chip {
|
.tooltip-chip {
|
||||||
font-size: var(--font-size-18);
|
font-size: var(--font-size-18);
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
border: 1px solid light-dark(@dark-blue, @golden);
|
border: 1px solid @color-border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: light-dark(@dark, @beige);
|
color: light-dark(@dark, @beige);
|
||||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue