diff --git a/styles/less/sheets/actors/character/header.less b/styles/less/sheets/actors/character/header.less index 99486096..91b3545a 100644 --- a/styles/less/sheets/actors/character/header.less +++ b/styles/less/sheets/actors/character/header.less @@ -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; diff --git a/styles/less/sheets/actors/companion/header.less b/styles/less/sheets/actors/companion/header.less index 7ca7c503..b4df96bf 100644 --- a/styles/less/sheets/actors/companion/header.less +++ b/styles/less/sheets/actors/companion/header.less @@ -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; } } } diff --git a/styles/less/sheets/actors/environment/header.less b/styles/less/sheets/actors/environment/header.less index 890e828c..85471af4 100644 --- a/styles/less/sheets/actors/environment/header.less +++ b/styles/less/sheets/actors/environment/header.less @@ -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; } } diff --git a/styles/less/sheets/actors/party/header.less b/styles/less/sheets/actors/party/header.less index aca246d8..58e3bc31 100644 --- a/styles/less/sheets/actors/party/header.less +++ b/styles/less/sheets/actors/party/header.less @@ -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; } } diff --git a/styles/less/utils/colors.less b/styles/less/utils/colors.less index f8ce4849..bb219ebb 100755 --- a/styles/less/utils/colors.less +++ b/styles/less/utils/colors.less @@ -71,6 +71,7 @@ --beige-filter: brightness(0) saturate(100%) invert(87%) sepia(25%) saturate(164%) hue-rotate(339deg) brightness(106%) contrast(87%); --bright-beige-filter: brightness(0) saturate(100%) invert(87%) sepia(15%) saturate(343%) hue-rotate(333deg) brightness(110%) contrast(87%); + --light-white: rgba(255, 255, 255, 0.3); --soft-white-shadow: rgba(255, 255, 255, 0.05); --light-black: rgba(0, 0, 0, 0.3); @@ -101,8 +102,11 @@ --color-text-emphatic: @dark-blue; --color-text-subtle: #555; + --dh-color-text-shadow-contrast: #ffffffa0; --dh-input-color-border: @dark; --dh-input-color-text: @dark; + --dh-trait-color-bg: #b1afb6; + --dh-trait-color-border: #8e8d96; } } @scope (.theme-dark) to (.themed) { @@ -115,8 +119,11 @@ --color-text-emphatic: @golden; --color-text-subtle: #a29086; + --dh-color-text-shadow-contrast: @dark-80; --dh-input-color-border: @beige; --dh-input-color-text: @beige; + --dh-trait-color-bg: #50433F; + --dh-trait-color-border: #927952; } } @@ -194,6 +201,7 @@ @soft-white-shadow: var(--soft-white-shadow, rgba(255, 255, 255, 0.05)); +@light-white: var(--light-white, rgba(255, 255, 255, 0.3)); @light-black: var(--light-black, rgba(0, 0, 0, 0.3)); @soft-shadow: var(--soft-shadow, rgba(0, 0, 0, 0.05)); @@ -232,5 +240,8 @@ @color-text-emphatic: var(--color-text-emphatic); @color-text-primary: var(--color-text-primary); @color-text-subtle: var(--color-text-subtle); +@color-text-shadow-contrast: var(--dh-color-text-shadow-contrast); @input-color-border: var(--dh-input-color-border); -@input-color-text: var(--dh-input-color-text); \ No newline at end of file +@input-color-text: var(--dh-input-color-text); +@trait-color-bg: var(--dh-trait-color-bg); +@trait-color-border: var(--dh-trait-color-border); \ No newline at end of file