From ca74ff4a884f38d59c9cccb76367f671b02a4987 Mon Sep 17 00:00:00 2001 From: LeRatierBretonnier Date: Thu, 6 Aug 2026 22:26:36 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20lisibilit=C3=A9=20des=20textes=20-=20bla?= =?UTF-8?q?ncs/gris=20illisibles=20pass=C3=A9s=20en=20sombre?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Textes blancs sur fond clair (fiches, dialogues, cartes de chat) → couleurs sombres - dialogs.less : conteneur roll-dialog-content + labels, options, boutons, valeurs - actor.less : inputs/select/textarea des fiches + badges Adaptation/Mutation - community.less : info taille, hint, valeur de jauge, niveau de moral - vehicle.less : unités ; npc.less : bouton de jet ; items.less : select - Textes gris des dialogues core Foundry (FilePicker, compendiums, tables, journaux) → noirs : suppression des overrides gris theme-dark, texte sombre sur .window-content, sidebar sombre conservée en texte clair, messages de tchat en sombre - CSS : moins/actor/totem.less (ligne influence + bouton en sombre) --- less/actor/actor.less | 6 +-- less/actor/community.less | 10 ++--- less/actor/npc.less | 6 +-- less/actor/totem.less | 8 ++-- less/actor/vehicle.less | 2 +- less/base.less | 80 +++++++++++++++++++-------------------- less/dialogs.less | 48 +++++++++++------------ less/items.less | 3 +- 8 files changed, 79 insertions(+), 84 deletions(-) diff --git a/less/actor/actor.less b/less/actor/actor.less index 7118f4e..2119a04 100644 --- a/less/actor/actor.less +++ b/less/actor/actor.less @@ -21,7 +21,7 @@ input:not([type="radio"]):not([type="checkbox"]), select, textarea { - color: @color-text-light-0; + color: #333; line-height: 1.2; padding: 1px 4px; } @@ -706,13 +706,13 @@ border-radius: 3px; &.adaptation { - color: @color-text-light-0; + color: @color-text-dark-header; background: fade(@color-acid-green, 25%); border: 1px solid @color-acid-green; } &.mutation { - color: @color-text-light-0; + color: @color-text-dark-header; background: fade(@color-hemolymph, 30%); border: 1px solid @color-hemolymph; } diff --git a/less/actor/community.less b/less/actor/community.less index 7779be1..35ab726 100644 --- a/less/actor/community.less +++ b/less/actor/community.less @@ -76,7 +76,7 @@ .community-size-info { margin: 6px 0 0; font-size: @font-size-11; - color: @color-text-light-0; + color: @color-text-dark-secondary; opacity: 0.85; } @@ -94,8 +94,8 @@ margin: 0; font-size: @font-size-11; font-style: italic; - color: @color-text-light-0; - opacity: 0.7; + color: @color-text-dark-secondary; + opacity: 0.8; } // Jauges de Domaines @@ -123,7 +123,7 @@ .gauge-value { font-family: "DistressBlack", sans-serif; font-size: @font-size-16; - color: @color-text-light-0; + color: @color-text-dark-header; } .gauge-state { @@ -145,7 +145,7 @@ font-weight: 700; &.high { color: @color-acid-green; } - &.normal { color: @color-text-light-0; } + &.normal { color: @color-text-dark-secondary; } &.low { color: @color-honeycomb; } &.crisis { color: @color-hemolymph; } } diff --git a/less/actor/npc.less b/less/actor/npc.less index 35b9848..0643c56 100644 --- a/less/actor/npc.less +++ b/less/actor/npc.less @@ -71,13 +71,13 @@ } .npc-roll-btn { - color: @color-text-light-primary; - opacity: 0.7; + color: @color-text-dark-secondary; + opacity: 0.75; transition: opacity 0.15s ease; &:hover { opacity: 1; - color: @color-text-light-1; + color: @theme-color-dark; text-shadow: 0 0 6px @theme-color-highlight; } } diff --git a/less/actor/totem.less b/less/actor/totem.less index 9a332ce..b93c5f5 100644 --- a/less/actor/totem.less +++ b/less/actor/totem.less @@ -134,7 +134,7 @@ font-size: 0.75rem; .totem-influence-label { - color: @color-text-light-0; + color: @color-text-dark-header; strong.totem-human { color: @totem-human-color; } strong.totem-adapted { color: @totem-adapted-color; } @@ -144,9 +144,9 @@ flex: none; padding: 2px 8px; cursor: pointer; - color: @color-text-light-0; - background: fade(@color-hemolymph, 20%); - border: 1px solid @color-hemolymph; + color: @color-text-dark-header; + background: fade(@color-text-light-0, 30%); + border: 1px solid @color-text-dark-secondary; border-radius: 3px; .transition(); diff --git a/less/actor/vehicle.less b/less/actor/vehicle.less index 92f6ee1..5fff482 100644 --- a/less/actor/vehicle.less +++ b/less/actor/vehicle.less @@ -152,7 +152,7 @@ .unit { font-size: @font-size-11; - color: @color-text-light-0; + color: @color-text-dark-secondary; opacity: 0.8; } diff --git a/less/base.less b/less/base.less index d3e77ef..52bbd99 100644 --- a/less/base.less +++ b/less/base.less @@ -13,28 +13,42 @@ body.system-vermine2047 { } // Override Foundry Core default CSS custom properties -// for better readability on the dark Vermine2047 theme. +// for better readability on the light Vermine2047 theme. -// AppV2 windows (sheets) use .themed.theme-dark on their content -.system-vermine2047 .themed.theme-dark { - --color-text-primary: #888888; - --color-text-emphatic: #999999; - --color-text-secondary: #777777; - --color-text-subtle: #666666; - --color-text-light-highlight: #888888; - --color-text-light-heading: #777777; - --color-text-light-primary: #666666; +// Core windows (FilePicker, dialogs, compendium, RollTable, Journal, …) and chat +// messages sit on the light box_background texture: force dark readable text. +// The dark sidebar keeps Foundry's default light-on-dark text colors. +body.system-vermine2047.theme-dark { + .window-content, + .roll-table-sheet, + .journal-sheet, + .document-sheet, + .settings-sheet { + color: @color-text-dark-primary; + --color-text-primary: @color-text-dark-primary; + --color-text-emphatic: @color-text-dark-header; + --color-text-secondary: @color-text-dark-secondary; + --color-text-subtle: #666666; + --color-text-light-highlight: @color-acid-green; + --color-text-light-heading: @color-text-dark-header; + --color-text-light-primary: @color-text-dark-secondary; + --color-text-dark-primary: @color-text-dark-primary; + --color-text-dark-secondary: @color-text-dark-secondary; + --color-text-dark-header: @color-text-dark-header; + --text-color: @color-text-dark-primary; + } } -// Old-style Application windows (settings-config, dialogs) inherit from body.theme-dark -body.system-vermine2047.theme-dark { - --color-text-primary: #888888; - --color-text-emphatic: #999999; - --color-text-secondary: #777777; - --color-text-subtle: #666666; - --color-text-light-highlight: #888888; - --color-text-light-heading: #777777; - --color-text-light-primary: #666666; +#chat-log .message, +.chat-log .message { + .message-content { + color: @color-text-dark-primary; + } + + header.message-header { + color: #fff; + text-shadow: 0 0 5px #000; + } } #settings-config button, @@ -44,31 +58,13 @@ body.system-vermine2047.theme-dark { color: #000000; } -// Core sheets the system doesn't restyle (RollTable, Journal, …) inherit the -// gray text overrides above, which are unreadable on their dark backgrounds. -// Restore Foundry's default light-on-dark text colors for those apps (dark theme only). -body.system-vermine2047.theme-dark { - .roll-table-sheet, - .journal-sheet, - .document-sheet, - .settings-sheet { - --color-text-primary: var(--color-light-2); - --color-text-emphatic: var(--color-light-1); - --color-text-secondary: var(--color-light-3); - --color-text-subtle: var(--color-light-5); - --color-text-light-highlight: #f0f0e0; - --color-text-light-heading: #c9c7b8; - --color-text-light-primary: #b5b3a4; - } -} - body.system-vermine2047.theme-dark .form-group > label { - color: #777777; + color: @color-text-dark-secondary; } #settings-config p, #settings-config .hint { - color: #777777; + color: @color-text-dark-secondary; } img { @@ -907,7 +903,7 @@ ol.chat-log { font-size: @font-size-11; padding: 3px 12px; cursor: pointer; - color: @color-text-light-0; + color: @theme-color-dark; background: fade(@color-hemolymph, 25%); border: 1px solid @color-hemolymph; border-radius: 3px; @@ -962,7 +958,7 @@ ol.chat-log { font-size: @font-size-11; padding: 3px 12px; cursor: pointer; - color: @color-text-light-0; + color: @theme-color-dark; background: fade(@color-hemolymph, 25%); border: 1px solid @color-hemolymph; border-radius: 3px; @@ -1084,7 +1080,7 @@ ol.chat-log { font-size: @font-size-12; padding: 5px 14px; cursor: pointer; - color: @color-text-light-0; + color: @theme-color-dark; background: fade(@color-hemolymph, 20%); border: 1px solid @color-hemolymph; border-radius: 3px; diff --git a/less/dialogs.less b/less/dialogs.less index 45c63d4..8cabffe 100644 --- a/less/dialogs.less +++ b/less/dialogs.less @@ -148,7 +148,7 @@ iframe { padding: 10px; height: 100%; overflow-y: auto; - color: @color-text-light-0; + color: @theme-color-dark; .dice-pool { flex: 1; @@ -201,7 +201,7 @@ iframe { .ability-score { gap: 4px; font-size: @font-size-12; - color: @color-text-light-0; + color: @color-text-dark-secondary; opacity: 0.85; #abilityScoreValue { @@ -290,11 +290,11 @@ iframe { font-size: @font-size-12; font-family: "Roboto", sans-serif; text-transform: none; - color: @color-text-light-0; + color: @color-text-dark-primary; cursor: pointer; &:hover { - color: @color-text-light-highlight; + color: @color-acid-green; } } @@ -317,7 +317,7 @@ iframe { > label.label { font-size: @font-size-11; - color: @color-text-light-0; + color: @color-text-dark-secondary; white-space: nowrap; } @@ -331,7 +331,7 @@ iframe { font-size: @font-size-12; font-family: "Roboto", sans-serif; text-transform: none; - color: @color-text-light-0; + color: @color-text-dark-primary; } .item-list { @@ -343,11 +343,11 @@ iframe { font-size: @font-size-11; font-family: "Roboto", sans-serif; text-transform: none; - color: @color-text-light-0; + color: @color-text-dark-primary; cursor: pointer; &:hover { - color: @color-text-light-highlight; + color: @color-acid-green; } } } @@ -374,14 +374,14 @@ iframe { display: flex; align-items: center; gap: 4px; - color: @color-text-light-0; + color: @color-text-dark-primary; font-size: @font-size-12; font-family: "Roboto", sans-serif; text-transform: none; cursor: pointer; &:hover { - color: @color-text-light-highlight; + color: @color-acid-green; } small { @@ -392,8 +392,8 @@ iframe { .totem-hint { width: 100%; font-size: @font-size-11; - color: @color-text-light-0; - opacity: 0.6; + color: @color-text-dark-secondary; + opacity: 0.8; font-style: italic; } } @@ -448,7 +448,7 @@ iframe { .weapon-detail { font-family: "Roboto", sans-serif; font-size: @font-size-11; - color: @color-text-light-0; + color: @color-text-dark-primary; strong { text-transform: uppercase; } } @@ -466,7 +466,7 @@ iframe { font-family: "Roboto", sans-serif; text-transform: none; font-size: @font-size-12; - color: @color-text-light-0; + color: @color-text-dark-primary; cursor: pointer; input[type="radio"] { flex: none; } @@ -494,7 +494,7 @@ iframe { padding: 2px 8px; font-size: @font-size-11; font-family: "Roboto", sans-serif; - color: @color-text-light-0; + color: @color-text-dark-header; background: fade(@color-hemolymph, 20%); border: 1px solid fade(@color-hemolymph, 50%); border-radius: 3px; @@ -550,12 +550,12 @@ iframe { font-family: "Roboto", sans-serif; text-transform: none; font-size: @font-size-12; - color: @color-text-light-0; + color: @color-text-dark-primary; cursor: pointer; input[type="radio"] { flex: none; } - &:hover { color: @color-text-light-highlight; } + &:hover { color: @color-acid-green; } } } @@ -571,8 +571,8 @@ iframe { margin: 0; font-size: @font-size-11; font-style: italic; - color: @color-text-light-0; - opacity: 0.75; + color: @color-text-dark-secondary; + opacity: 0.8; } } @@ -600,7 +600,7 @@ iframe { font-family: "Roboto", sans-serif; font-size: @font-size-13; font-weight: 700; - color: @color-text-light-0; + color: @color-text-dark-primary; } } } @@ -613,7 +613,7 @@ iframe { .experience-group { font-size: @font-size-11; - color: @color-text-light-0; + color: @color-text-dark-secondary; opacity: 0.8; #exp-group { @@ -628,7 +628,7 @@ iframe { font-size: @font-size-11; padding: 3px 12px; cursor: pointer; - color: @color-text-light-0; + color: @theme-color-dark; background: fade(@color-acid-green, 15%); border: 1px solid @color-acid-green; border-radius: 3px; @@ -779,7 +779,7 @@ iframe { font-family: "Roboto", sans-serif; font-size: @font-size-14; font-weight: 700; - color: @color-text-light-0; + color: @color-text-dark-header; } } } @@ -798,7 +798,7 @@ iframe { font-size: @font-size-12; padding: 6px 10px; cursor: pointer; - color: @color-text-light-0; + color: @theme-color-dark; background: fade(@color-hemolymph, 15%); border: 1px solid @color-hemolymph; border-radius: 3px; diff --git a/less/items.less b/less/items.less index 296ffe0..142c52d 100644 --- a/less/items.less +++ b/less/items.less @@ -66,11 +66,10 @@ select { .custom-select-style(); - color: @color-text-light-1; + color: @color-text-dark-primary; font-family: "DistressBlack", sans-serif; font-size: 0.875rem; text-align: center; - text-shadow: 0 0 3px rgba(0, 0, 0, 0.9); option { background: @color-bg-option;