diff --git a/styles/global.less b/styles/global.less index a7e98f9..e702add 100644 --- a/styles/global.less +++ b/styles/global.less @@ -1,16 +1,14 @@ // ─── Variables CSS (couleurs + typo) ──────────────────────────────────────── -// ─── FVTT-wide type label fix ──────────────────────────────────────────────── -// Override window title color for celestopol sheets -.fvtt-celestopol .window-title { color: var(--cel-orange, #e07b00); } +.fvtt-celestopol .window-title { color: var(--cel-orange, #c49a1a); } :root { - // ── Palette Art Déco / nuit lunaire ───────────────────────────────────── - --cel-green: #1b3828; // jade profond, désaturé (ex rgb(12,76,12)) + // ── Palette Art Déco / nuit lunaire ────────────────────────────────────── + --cel-green: #1b3828; // jade profond, désaturé --cel-green-light: #2c5a3f; // jade moyen --cel-green-dark: #0d1f14; // jade très sombre - --cel-orange: #c49a1a; // or antique (ex #e07b00) + --cel-orange: #c49a1a; // or antique --cel-orange-light: #ddb84a; // or clair --cel-cream: #f0e8d4; // parchemin chaud @@ -39,13 +37,12 @@ overflow: hidden; display: flex; flex-direction: column; - // Very subtle grid texture evokes Art Déco marquetry background-color: var(--cel-cream); background-image: url("../assets/ui/fond_cadrille.jpg"); background-blend-mode: multiply; background-size: auto; background-repeat: repeat; - // Tint so the texture is extremely faint on the parchment + // Thin cream overlay so texture is subtle &::before { content: ''; position: absolute; @@ -56,7 +53,6 @@ z-index: 0; } } - // Ensure content sits above the pseudo texture .sheet-header, .sheet-tabs, .sheet-body, .tab { position: relative; z-index: 1; } } @@ -65,14 +61,12 @@ .sheet-header { display: flex; align-items: stretch; - // fond_cadrille overlay on jade dark gives rich Art Déco textile look background-color: var(--cel-green-dark); background-image: url("../assets/ui/fond_cadrille.jpg"); background-blend-mode: soft-light; background-size: auto; padding: 10px 12px 10px 10px; gap: 10px; - // Double-rule Art Déco bottom border border-bottom: 3px solid var(--cel-orange); box-shadow: 0 3px 0 0 rgba(196,154,26,0.25); @@ -81,7 +75,6 @@ height: 84px; object-fit: cover; border: 2px solid var(--cel-orange); - // Subtle inner glow — gold frame effect box-shadow: inset 0 0 6px rgba(196,154,26,0.4), 0 0 4px rgba(0,0,0,0.5); cursor: pointer; } @@ -157,92 +150,11 @@ } // ─── Tabs ──────────────────────────────────────────────────────────────── - // Updated: 1774698726 - Enhanced tab styling .sheet-tabs { - - // ─── Faction checkboxes ───────────────────────────────────────────────── - - .faction-checkboxes-container { - display: flex; - align-items: center; - gap: 8px; - pointer-events: auto !important; - } - - .faction-checkboxes { - display: inline-flex; - gap: 2px; - pointer-events: auto !important; - } - - .faction-checkbox-wrapper { - display: inline-block; - pointer-events: auto !important; - position: relative; - z-index: 101; - } - - .faction-checkbox { - width: 14px; - height: 14px; - cursor: pointer; - pointer-events: auto !important; - margin: 0; - padding: 0; - position: relative; - z-index: 100; - } - - .faction-checkbox:disabled { - cursor: default; - opacity: 0.7; - } - - .faction-count { - margin-left: 8px; - font-weight: bold; - color: var(--cel-orange); - min-width: 20px; - text-align: right; - } - - .faction-value-input { - width: 40px; - margin-left: 8px; - } - - // Fix pointer-events for faction checkboxes in table cells - .faction-row { - pointer-events: auto !important; - } - - .faction-row td { - pointer-events: auto !important; - } - - // Ensure labels are clickable - .faction-checkbox-wrapper label { - cursor: pointer; - pointer-events: auto !important; - display: inline-block; - } -} - -// Ensure table cells allow pointer events -.faction-row { - pointer-events: auto !important; -} - -.faction-row td { - pointer-events: auto !important; -} - -.sheet-tabs { display: flex; background: var(--cel-green-dark); padding: 0; - // Art Déco thin gold line at top + bottom separator border-top: 1px solid rgba(196,154,26,0.3); border-bottom: 2px solid var(--cel-orange); @@ -255,43 +167,23 @@ letter-spacing: 0.07em; cursor: pointer; border-right: 1px solid rgba(196,154,26,0.2); - transition: all 0.2s ease; - // Art Déco underline indicator border-bottom: 3px solid transparent; - position: relative; - background: rgba(240,232,212,0.1); - margin: 0 1px; + transition: background 0.15s, color 0.15s; &:hover { color: var(--cel-orange-light); - background: rgba(196,154,26,0.15); + background: rgba(196,154,26,0.12); } + // Onglet actif : gradient or avec texte sombre (bon contraste) &.active { - color: var(--cel-cream) !important; - background: linear-gradient(to bottom, var(--cel-orange), var(--cel-orange-light)) !important; - border-bottom: 3px solid var(--cel-accent) !important; - font-weight: bold !important; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; - transform: translateY(-1px) !important; - position: relative !important; - z-index: 2 !important; - border-right-color: transparent !important; - border: 2px solid red !important; // DEBUG: bordure rouge très visible - - // Art Déco triangle indicator - &::before { - content: '' !important; - position: absolute !important; - top: -5px !important; - left: 50% !important; - transform: translateX(-50%) !important; - width: 0 !important; - height: 0 !important; - border-left: 8px solid transparent !important; - border-right: 8px solid transparent !important; - border-bottom: 8px solid var(--cel-accent) !important; - } + color: var(--cel-green-dark); + background: linear-gradient(to bottom, var(--cel-orange-light), var(--cel-orange)); + border-bottom: 3px solid var(--cel-accent); + font-weight: bold; + transform: translateY(-1px); + position: relative; + z-index: 2; } } } @@ -310,4 +202,54 @@ overflow-y: auto; &.active { display: block; } } + + // ─── Faction checkboxes (pointer-events dans les fiches) ───────────────── + + .faction-checkboxes-container { + display: flex; + align-items: center; + gap: 8px; + pointer-events: auto !important; + } + + .faction-checkboxes { + display: inline-flex; + gap: 2px; + pointer-events: auto !important; + } + + .faction-checkbox-wrapper { + display: inline-block; + pointer-events: auto !important; + position: relative; + z-index: 101; + label { cursor: pointer; pointer-events: auto !important; display: inline-block; } + } + + .faction-checkbox { + width: 14px; + height: 14px; + cursor: pointer; + pointer-events: auto !important; + margin: 0; + padding: 0; + position: relative; + z-index: 100; + &:disabled { cursor: default; opacity: 0.7; } + } + + .faction-count { + margin-left: 8px; + font-weight: bold; + color: var(--cel-orange); + min-width: 20px; + text-align: right; + } + + .faction-value-input { width: 40px; margin-left: 8px; } + + .faction-row { + pointer-events: auto !important; + td { pointer-events: auto !important; } + } } diff --git a/styles/items.less b/styles/items.less index dc39f89..85f68a9 100644 --- a/styles/items.less +++ b/styles/items.less @@ -96,14 +96,42 @@ } &.active { - color: var(--cel-orange); - background: rgba(196,154,26,0.1); - border-bottom-color: var(--cel-orange); + color: var(--cel-green-dark); + background: linear-gradient(to bottom, var(--cel-orange-light), var(--cel-orange)); + border-bottom: 3px solid var(--cel-accent); font-weight: bold; + transform: translateY(-1px); + position: relative; + z-index: 2; } } } + // Affichage valeur en mode play + .item-value-display { + font-size: 1.1em; + font-weight: bold; + color: var(--cel-orange); + min-width: 28px; + text-align: center; + } + + // Champ quantité équipement + .item-qty { + display: flex; + align-items: center; + gap: 4px; + label { color: var(--cel-orange-light); font-size: 0.72em; text-transform: uppercase; } + input[type="number"] { + width: 44px; + background: transparent; + border: 1px solid var(--cel-orange-light); + color: var(--cel-orange); + text-align: center; + font-weight: bold; + } + } + section.tab { padding: 8px; display: none; @@ -117,7 +145,7 @@ font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--cel-orange); // gold label instead of vivid green + color: var(--cel-border); // #7a5c20 — contraste WCAG AA sur fond crème margin-bottom: 2px; } input[type="text"], input[type="number"] { .cel-input-std(); width: 100%; box-sizing: border-box; } @@ -149,6 +177,7 @@ gap: 4px; padding: 2px 0; font-size: 0.8em; + color: #1a1209; // texte sombre lisible sur fond crème &:nth-child(even) { background: rgba(224,212,184,0.35); border-radius: 2px; } diff --git a/templates/aspect.hbs b/templates/aspect.hbs index 178df47..5803f50 100644 --- a/templates/aspect.hbs +++ b/templates/aspect.hbs @@ -5,27 +5,47 @@