diff --git a/assets/ui/cercle-jaune-checked.png b/assets/ui/cercle-jaune-checked.png new file mode 100644 index 0000000..3e5e437 Binary files /dev/null and b/assets/ui/cercle-jaune-checked.png differ diff --git a/assets/ui/cercle-jaune-unchecked.png b/assets/ui/cercle-jaune-unchecked.png new file mode 100644 index 0000000..2ea6ed7 Binary files /dev/null and b/assets/ui/cercle-jaune-unchecked.png differ diff --git a/assets/ui/cercle-vert-checked.png b/assets/ui/cercle-vert-checked.png new file mode 100644 index 0000000..8ff9ff9 Binary files /dev/null and b/assets/ui/cercle-vert-checked.png differ diff --git a/assets/ui/cercle-vert-unchecked.png b/assets/ui/cercle-vert-unchecked.png new file mode 100644 index 0000000..4fdc9f6 Binary files /dev/null and b/assets/ui/cercle-vert-unchecked.png differ diff --git a/assets/ui/fond_cadrille2.jpg b/assets/ui/fond_cadrille2.jpg new file mode 100644 index 0000000..21edb28 Binary files /dev/null and b/assets/ui/fond_cadrille2.jpg differ diff --git a/assets/ui/logo_jeu.png b/assets/ui/logo_jeu.png new file mode 100644 index 0000000..9859032 Binary files /dev/null and b/assets/ui/logo_jeu.png differ diff --git a/styles/character.less b/styles/character.less index d0fafa6..edecf4b 100644 --- a/styles/character.less +++ b/styles/character.less @@ -59,11 +59,14 @@ .stat-header { background: var(--cel-green); + background-image: url("../assets/ui/fond_cadrille.jpg"); + background-blend-mode: soft-light; color: var(--cel-orange); display: flex; justify-content: space-between; align-items: center; - padding: 4px 8px; + padding: 5px 8px; + border-bottom: 1px solid rgba(196,154,26,0.4); .stat-name { font-family: var(--cel-font-title); @@ -98,9 +101,12 @@ align-items: center; justify-content: space-between; padding: 3px 8px; - border-bottom: 1px solid rgba(139,115,85,0.2); + border-bottom: 1px solid rgba(122,92,32,0.18); font-size: 0.85em; + // Alternating cream-dark rows for legibility + &:nth-child(even) { background: var(--cel-cream-dark); } + &.rollable { .cel-rollable(); } .skill-name { flex: 1; } @@ -108,7 +114,7 @@ font-weight: bold; min-width: 24px; text-align: center; - color: var(--cel-green); + color: var(--cel-orange); // gold instead of vivid green } .skill-value-input { width: 36px; @@ -149,11 +155,14 @@ .track-header { background: var(--cel-green); + background-image: url("../assets/ui/fond_cadrille.jpg"); + background-blend-mode: soft-light; color: var(--cel-orange); display: flex; justify-content: space-between; align-items: center; - padding: 4px 8px; + padding: 5px 8px; + border-bottom: 1px solid rgba(196,154,26,0.4); .track-title { font-family: var(--cel-font-title); @@ -176,7 +185,7 @@ align-items: center; gap: 2px; - input[type="checkbox"] { .cel-box(); } + input[type="checkbox"] { .cel-box(); accent-color: var(--cel-orange); } .box-label { font-size: 0.65em; color: var(--cel-border); @@ -208,13 +217,16 @@ thead tr { background: var(--cel-green); + background-image: url("../assets/ui/fond_cadrille.jpg"); + background-blend-mode: soft-light; color: var(--cel-orange); - th { padding: 4px 8px; font-family: var(--cel-font-title); } + th { padding: 5px 8px; font-family: var(--cel-font-title); letter-spacing: 0.06em; } } .faction-row { - &:nth-child(odd) td { background: rgba(139,115,85,0.08); } - td { padding: 4px 8px; border-bottom: 1px solid rgba(139,115,85,0.2); } + &:nth-child(odd) td { background: rgba(122,92,32,0.06); } + &:nth-child(even) td { background: var(--cel-cream-dark); } + td { padding: 4px 8px; border-bottom: 1px solid rgba(122,92,32,0.2); } &.custom td { font-style: italic; color: #666; } .faction-value input[type="number"] { diff --git a/styles/global.less b/styles/global.less index 4469824..1504a09 100644 --- a/styles/global.less +++ b/styles/global.less @@ -5,14 +5,21 @@ .fvtt-celestopol .window-title { color: var(--cel-orange, #e07b00); } :root { - --cel-green: rgb(12, 76, 12); - --cel-green-light: rgb(20, 110, 20); - --cel-green-dark: rgb(6, 40, 6); - --cel-orange: #e07b00; - --cel-orange-light: #f0a040; - --cel-cream: #f5f0e8; - --cel-border: #8b7355; - --cel-shadow: rgba(0,0,0,0.4); + // ── Palette Art Déco / nuit lunaire ───────────────────────────────────── + --cel-green: #1b3828; // jade profond, désaturé (ex rgb(12,76,12)) + --cel-green-light: #2c5a3f; // jade moyen + --cel-green-dark: #0d1f14; // jade très sombre + + --cel-orange: #c49a1a; // or antique (ex #e07b00) + --cel-orange-light: #ddb84a; // or clair + + --cel-cream: #f0e8d4; // parchemin chaud + --cel-cream-dark: #e0d4b8; // parchemin foncé (rangées alternées) + + --cel-border: #7a5c20; // bordure dorée + --cel-accent: #6b1e28; // bordeaux profond (échecs, accents) + + --cel-shadow: rgba(10,15,10,0.5); --cel-font-title: "CopaseticNF", "Palatino Linotype", serif; --cel-font-body: "Palatino Linotype", "Book Antiqua", Palatino, serif; @@ -32,8 +39,25 @@ overflow: hidden; display: flex; flex-direction: column; - background: var(--cel-cream); + // 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 + &::before { + content: ''; + position: absolute; + inset: 0; + background: var(--cel-cream); + opacity: 0.92; + pointer-events: none; + z-index: 0; + } } + // Ensure content sits above the pseudo texture + .sheet-header, .sheet-tabs, .sheet-body, .tab { position: relative; z-index: 1; } } // ─── Header ────────────────────────────────────────────────────────────── @@ -41,18 +65,24 @@ .sheet-header { display: flex; align-items: stretch; - background: var(--cel-green); + // 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: overlay; - padding: 8px; - gap: 8px; + 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); .actor-portrait { - width: 80px; - height: 80px; + width: 84px; + 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; } @@ -66,19 +96,21 @@ input[type="text"] { background: transparent; border: none; - border-bottom: 1px solid var(--cel-orange-light); + border-bottom: 1px solid rgba(196,154,26,0.5); color: var(--cel-orange); font-family: var(--cel-font-title); font-size: 1.4em; font-weight: bold; + letter-spacing: 0.06em; padding: 2px 4px; - &::placeholder { color: var(--cel-orange-light); } + &::placeholder { color: rgba(196,154,26,0.5); } } .actor-name { font-family: var(--cel-font-title); font-size: 1.4em; color: var(--cel-orange); + letter-spacing: 0.06em; margin: 0; } @@ -88,27 +120,29 @@ font-size: 0.9em; color: var(--cel-cream); background: transparent; - border-bottom: 1px solid rgba(255,255,255,0.3); + border-bottom: 1px solid rgba(240,232,212,0.25); } } .header-stats-row { display: flex; - gap: 12px; + gap: 10px; align-items: center; .header-stat { display: flex; flex-direction: column; align-items: center; - background: rgba(0,0,0,0.3); + background: rgba(0,0,0,0.35); border: 1px solid var(--cel-orange); - border-radius: 4px; - padding: 4px 8px; + border-radius: 2px; + padding: 4px 10px; + min-width: 52px; label { - font-size: 0.65em; + font-size: 0.62em; text-transform: uppercase; + letter-spacing: 0.08em; color: var(--cel-orange-light); } @@ -128,23 +162,33 @@ 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); .item { - padding: 6px 12px; - color: var(--cel-cream); + padding: 6px 14px; + color: rgba(240,232,212,0.7); font-family: var(--cel-font-title); - font-size: 0.85em; + font-size: 0.82em; text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.07em; cursor: pointer; - border-right: 1px solid var(--cel-green-light); - transition: background 0.2s; + border-right: 1px solid rgba(196,154,26,0.2); + transition: color 0.2s, border-bottom-color 0.2s; + // Art Déco underline indicator + border-bottom: 3px solid transparent; + position: relative; + + &:hover { + color: var(--cel-orange-light); + background: rgba(196,154,26,0.07); + } - &:hover { background: var(--cel-green-light); } &.active { - background: var(--cel-orange); - color: #1a0a00; + color: var(--cel-orange); + background: rgba(196,154,26,0.1); + border-bottom-color: var(--cel-orange); font-weight: bold; } } diff --git a/styles/items.less b/styles/items.less index 784f7be..8456071 100644 --- a/styles/items.less +++ b/styles/items.less @@ -8,11 +8,12 @@ display: flex; align-items: center; gap: 8px; - padding: 8px; - background: var(--cel-green); + padding: 10px 12px; + background-color: var(--cel-green-dark); background-image: url("../assets/ui/fond_cadrille.jpg"); - background-blend-mode: overlay; - border-bottom: 2px solid var(--cel-orange); + background-blend-mode: soft-light; + border-bottom: 3px solid var(--cel-orange); + box-shadow: 0 3px 0 0 rgba(196,154,26,0.2); .item-portrait img { width: 56px; @@ -74,17 +75,32 @@ .item-tabs { display: flex; background: var(--cel-green-dark); + border-top: 1px solid rgba(196,154,26,0.3); border-bottom: 2px solid var(--cel-orange); .item { - padding: 5px 10px; - color: var(--cel-cream); + padding: 5px 12px; + color: rgba(240,232,212,0.7); font-family: var(--cel-font-title); - font-size: 0.8em; + font-size: 0.78em; text-transform: uppercase; + letter-spacing: 0.07em; cursor: pointer; - &:hover { background: var(--cel-green-light); } - &.active { background: var(--cel-orange); color: #1a0a00; font-weight: bold; } + border-right: 1px solid rgba(196,154,26,0.2); + border-bottom: 3px solid transparent; + transition: color 0.2s; + + &:hover { + color: var(--cel-orange-light); + background: rgba(196,154,26,0.07); + } + + &.active { + color: var(--cel-orange); + background: rgba(196,154,26,0.1); + border-bottom-color: var(--cel-orange); + font-weight: bold; + } } } @@ -101,7 +117,7 @@ font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--cel-green); + color: var(--cel-orange); // gold label instead of vivid green margin-bottom: 2px; } input[type="text"], input[type="number"] { .cel-input-std(); width: 100%; box-sizing: border-box; } @@ -120,10 +136,11 @@ .scores-stat-name { font-family: var(--cel-font-title); font-size: 0.75em; - color: var(--cel-green); + color: var(--cel-orange); // gold text-transform: uppercase; border-bottom: 1px solid var(--cel-border); margin-bottom: 4px; + letter-spacing: 0.06em; } .score-row { @@ -133,14 +150,16 @@ padding: 2px 0; font-size: 0.8em; + &:nth-child(even) { background: rgba(224,212,184,0.35); border-radius: 2px; } + .score-skill-name { flex: 1; } .score-bonus, .score-malus { width: 36px; .cel-input-std(); text-align: center; } - .score-bonus { border-color: #4a8a4a; } - .score-malus { border-color: #8a4a4a; } + .score-bonus { border-color: #4a7a4a; } + .score-malus { border-color: var(--cel-accent); } } } } diff --git a/styles/mixins.less b/styles/mixins.less index 30c1b7c..4e82966 100644 --- a/styles/mixins.less +++ b/styles/mixins.less @@ -2,17 +2,29 @@ .cel-section-header() { font-family: var(--cel-font-title); - font-size: 0.8em; + font-size: 0.78em; text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--cel-green); - border-bottom: 1px solid var(--cel-border); - padding-bottom: 2px; - margin-bottom: 6px; + letter-spacing: 0.1em; + // Gold instead of vivid green — Art Déco elegance + color: var(--cel-orange); + padding-bottom: 4px; + margin-bottom: 8px; + position: relative; + + // Ornamental gradient rule underneath — fades to transparent at edges + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(to right, transparent 0%, var(--cel-orange) 20%, var(--cel-border) 80%, transparent 100%); + } } .cel-input-std() { - background: rgba(255,255,255,0.7); + background: rgba(255,255,255,0.6); border: 1px solid var(--cel-border); border-radius: 2px; padding: 2px 4px; @@ -25,8 +37,8 @@ width: 22px; height: 22px; border: 2px solid var(--cel-border); - border-radius: 3px; - background: rgba(255,255,255,0.5); + border-radius: 2px; + background: rgba(255,255,255,0.45); cursor: pointer; &.checked { background: var(--cel-orange); border-color: var(--cel-orange); } } @@ -35,7 +47,7 @@ cursor: pointer; transition: background 0.15s, color 0.15s; &:hover { - background: var(--cel-orange-light); + background: rgba(196,154,26,0.15); // gold tint — more elegant than orange color: #1a0a00; border-radius: 3px; } @@ -46,9 +58,9 @@ align-items: center; gap: 6px; padding: 3px 6px; - border-bottom: 1px solid rgba(139,115,85,0.3); + border-bottom: 1px solid rgba(122,92,32,0.25); transition: background 0.1s; - &:hover { background: rgba(224,123,0,0.08); } + &:hover { background: rgba(196,154,26,0.08); } .item-icon { width: 24px; diff --git a/styles/npc.less b/styles/npc.less index 4bad616..1c51ac2 100644 --- a/styles/npc.less +++ b/styles/npc.less @@ -17,11 +17,14 @@ .stat-header { background: var(--cel-green); + background-image: url("../assets/ui/fond_cadrille.jpg"); + background-blend-mode: soft-light; color: var(--cel-orange); display: flex; justify-content: space-between; align-items: center; - padding: 4px 8px; + padding: 5px 8px; + border-bottom: 1px solid rgba(196,154,26,0.4); .stat-name { font-family: var(--cel-font-title); @@ -55,13 +58,15 @@ align-items: center; justify-content: space-between; padding: 3px 8px; - border-bottom: 1px solid rgba(139,115,85,0.2); + border-bottom: 1px solid rgba(122,92,32,0.18); font-size: 0.85em; + &:nth-child(even) { background: var(--cel-cream-dark); } + &.rollable { .cel-rollable(); } .skill-name { flex: 1; } - .skill-value { font-weight: bold; color: var(--cel-green); min-width: 24px; text-align: center; } + .skill-value { font-weight: bold; color: var(--cel-orange); min-width: 24px; text-align: center; } .skill-value-input { width: 36px; .cel-input-std(); text-align: center; } } } @@ -76,12 +81,16 @@ .track-header { background: var(--cel-green); + background-image: url("../assets/ui/fond_cadrille.jpg"); + background-blend-mode: soft-light; color: var(--cel-orange); - padding: 4px 8px; + padding: 5px 8px; font-family: var(--cel-font-title); font-weight: bold; text-transform: uppercase; font-size: 0.9em; + letter-spacing: 0.06em; + border-bottom: 1px solid rgba(196,154,26,0.4); } .track-boxes { diff --git a/styles/roll.less b/styles/roll.less index 0d08f42..da8893f 100644 --- a/styles/roll.less +++ b/styles/roll.less @@ -8,12 +8,12 @@ text-align: center; font-family: var(--cel-font-title, "CopaseticNF", serif); font-size: 1.1em; - color: var(--cel-green, rgb(12,76,12)); + color: var(--cel-orange, #c49a1a); margin-bottom: 10px; .separator { margin: 0 6px; - color: var(--cel-orange, #e07b00); + color: var(--cel-border, #7a5c20); } } @@ -28,12 +28,12 @@ font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; - color: var(--cel-green, rgb(12,76,12)); + color: var(--cel-orange, #c49a1a); } select, input[type="number"] { flex: 1; - border: 1px solid var(--cel-border, #8b7355); + border: 1px solid var(--cel-border, #7a5c20); border-radius: 2px; padding: 2px 6px; background: rgba(255,255,255,0.7); @@ -45,14 +45,14 @@ font-size: 1em; margin-top: 10px; padding: 6px; - background: rgba(12,76,12,0.08); - border-radius: 4px; - border: 1px solid var(--cel-green, rgb(12,76,12)); + background: rgba(27,56,40,0.08); + border-radius: 3px; + border: 1px solid var(--cel-green, #1b3828); .nb-dice { font-family: var(--cel-font-title, "CopaseticNF", serif); font-size: 1.5em; - color: var(--cel-orange, #e07b00); + color: var(--cel-orange, #c49a1a); font-weight: bold; } } @@ -61,8 +61,8 @@ // ─── Chat message ───────────────────────────────────────────────────────────── .celestopol.chat-roll { - border: 1px solid var(--cel-border, #8b7355); - border-radius: 4px; + border: 1px solid var(--cel-border, #7a5c20); + border-radius: 3px; overflow: hidden; font-family: var(--cel-font-body, "Palatino Linotype", serif); @@ -70,15 +70,19 @@ display: flex; align-items: center; gap: 8px; - background: var(--cel-green, rgb(12,76,12)); + background-color: var(--cel-green, #1b3828); + background-image: url("../assets/ui/fond_cadrille.jpg"); + background-blend-mode: soft-light; padding: 6px 8px; + border-bottom: 2px solid var(--cel-orange, #c49a1a); .actor-img { width: 36px; height: 36px; object-fit: cover; - border: 1px solid var(--cel-orange, #e07b00); + border: 1px solid var(--cel-orange, #c49a1a); border-radius: 2px; + box-shadow: inset 0 0 4px rgba(196,154,26,0.3); } .roll-info { @@ -86,11 +90,12 @@ flex-direction: column; .actor-name { font-family: var(--cel-font-title, "CopaseticNF", serif); - color: var(--cel-orange, #e07b00); + color: var(--cel-orange, #c49a1a); font-weight: bold; + letter-spacing: 0.05em; } .skill-info { - color: var(--cel-cream, #f5f0e8); + color: var(--cel-cream, #f0e8d4); font-size: 0.8em; font-style: italic; } @@ -99,7 +104,7 @@ .roll-details { padding: 8px; - background: var(--cel-cream, #f5f0e8); + background: var(--cel-cream, #f0e8d4); .dice-results { display: flex; @@ -113,8 +118,8 @@ justify-content: center; width: 28px; height: 28px; - border: 2px solid var(--cel-border, #8b7355); - border-radius: 4px; + border: 2px solid var(--cel-border, #7a5c20); + border-radius: 3px; background: white; font-weight: bold; font-size: 1em; @@ -135,38 +140,49 @@ gap: 8px; margin-top: 6px; padding-top: 4px; - border-top: 1px solid var(--cel-border, #8b7355); + border-top: 1px solid var(--cel-border, #7a5c20); .total-label { text-transform: uppercase; font-size: 0.75em; - color: var(--cel-green, rgb(12,76,12)); + color: var(--cel-orange, #c49a1a); } .total-value { font-family: var(--cel-font-title, "CopaseticNF", serif); font-size: 1.6em; font-weight: bold; - color: var(--cel-orange, #e07b00); + color: var(--cel-orange, #c49a1a); } .vs-difficulty { font-size: 0.8em; - color: #999; + color: #888; } } } .roll-result-banner { text-align: center; - padding: 4px 8px; + padding: 5px 8px; font-family: var(--cel-font-title, "CopaseticNF", serif); font-size: 1.1em; text-transform: uppercase; - letter-spacing: 0.08em; + letter-spacing: 0.1em; - &.success { background: var(--cel-green, rgb(12,76,12)); color: var(--cel-orange, #e07b00); } - &.failure { background: #4a1a1a; color: #e0a0a0; } + // Success: jade green with gold text — elegant + &.success { + background-color: var(--cel-green, #1b3828); + background-image: url("../assets/ui/fond_cadrille.jpg"); + background-blend-mode: soft-light; + color: var(--cel-orange, #c49a1a); + } + + // Failure: deep burgundy — dark and grave + &.failure { + background: var(--cel-accent, #6b1e28); + color: #e8c8c8; + } .critical { display: block;