mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-06-07 05:14: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
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue