Add trait header colors and shadow contrast

This commit is contained in:
Carlos Fernandez 2026-05-26 23:11:07 -04:00
parent 988dc82c36
commit b96c71fab6
5 changed files with 24 additions and 14 deletions

View file

@ -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;
@ -279,6 +278,7 @@
}
.trait-value-area {
--color-border: @trait-color-border;
--background: light-dark(#e8e6e3, @dark-blue);
display: flex;
position: relative;

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;
}
}
}

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;
}
}

View file

@ -25,7 +25,7 @@
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;
@ -34,7 +34,7 @@
&:hover[type='text'],
&:focus[type='text'] {
outline: 2px solid light-dark(@dark-blue, @golden);
outline: 2px solid @color-border;
}
}