/* ==================== Actor Sheet Styles ==================== */ // NOTE: Ce fichier surcharge certaines règles de simple-converted.less // Les sélecteurs .fvtt-mournblade-cyd-2-0.actor sont plus spécifiques et prennent priorité .fvtt-mournblade-cyd-2-0.actor { // Background pour toute la fiche d'acteur background: url("../assets/ui/pc_sheet_bg.webp") repeat; // AppV2 - Structure flex pour permettre le scroll .window-content { height: 100%; padding: 0; margin: 0; display: flex; flex-direction: column; overflow: hidden; // AppV2 PARTS wrapper — direct child section with data-application-part attribute > section { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } } // SURCHARGE: simple-converted.less définit flex: 0 0 210px .sheet-header { background: url("../assets/ui/pc_sheet_bg.webp") repeat; padding: 0.4rem 0.5rem; margin: 0; flex: 0 0 auto !important; overflow: visible !important; // ── Bannière : image + nom + toggle ────────────────────────────── .header-banner { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; .profile-img { flex: 0 0 90px; width: 90px; height: 90px; object-fit: cover; object-position: 50% 0; border: 2px solid rgba(180, 130, 30, 0.8); border-radius: 4px; box-shadow: 2px 2px 8px rgba(0,0,0,0.6), inset 0 0 4px rgba(180,130,30,0.2); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; &:hover { border-color: #ffd700; box-shadow: 2px 2px 12px rgba(0,0,0,0.7), 0 0 6px rgba(255,215,0,0.4); } } .charname { flex: 1; margin: 0; padding: 0; font-family: "CentaurMT", "Charlemagne Std", serif; font-size: 1.8rem; line-height: 1; input[type="text"] { font-family: inherit; font-size: inherit; font-weight: bold; color: #f5e0c0; background: transparent; border: none; border-bottom: 1px solid rgba(180,130,30,0.4); width: 100%; padding: 0 0 2px 0; text-shadow: 1px 1px 4px rgba(0,0,0,0.8); letter-spacing: 1px; &:focus { outline: none; border-bottom-color: #ffd700; } } } .sheet-mode-toggle { flex: 0 0 auto; background: rgba(0,0,0,0.3); border: 1px solid rgba(180,130,30,0.5); border-radius: 3px; color: rgba(245,224,192,0.7); padding: 4px 8px; cursor: pointer; font-size: 0.9rem; line-height: 1; transition: all 0.2s ease; &:hover { color: #ffd700; border-color: #ffd700; box-shadow: 0 0 6px rgba(255,215,0,0.4); } } } // ── Cartes de statistiques ──────────────────────────────────────── .header-stat-cards { display: flex; flex-direction: row; gap: 5px; .stat-card { flex: 1; min-width: 0; display: flex; flex-direction: column; background: rgba(8, 4, 0, 0.55); border: 1px solid rgba(120, 75, 20, 0.5); border-top: 3px solid rgba(120, 75, 20, 0.7); border-radius: 3px; overflow: visible; transition: box-shadow 0.2s; &.dominant { box-shadow: 0 0 10px rgba(255,200,30,0.35); } // Titres colorés par type &.card-loi { border-top-color: #b89020; .stat-card-title { background: rgba(90,65,0,0.6); color: #ffe090; } &.dominant { border-top-color: #ffd700; box-shadow: 0 0 12px rgba(255,215,0,0.4); } } &.card-chaos { border-top-color: #8b1010; .stat-card-title { background: rgba(70,0,0,0.6); color: #ffb0b0; } &.dominant { border-top-color: #cc2020; box-shadow: 0 0 12px rgba(200,30,30,0.4); } } &.card-ba { border-top-color: #2a7a2a; .stat-card-title { background: rgba(0,45,0,0.6); color: #a0e8a0; } } &.card-vigueur { border-top-color: #7a2222; .stat-card-title { background: rgba(50,10,10,0.6); color: #ffb8b8; } } &.card-ame { border-top-color: #224480; .stat-card-title { background: rgba(10,20,55,0.6); color: #a0c0ff; } } .stat-card-title { font-size: 0.68rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 5px; text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.9); border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; .stat-sub { font-size: 0.6rem; opacity: 0.75; font-style: italic; text-transform: none; letter-spacing: 0; } } .stat-card-content { display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 3px; flex: 1; } // Ligne label + champ .stat-field { display: flex; align-items: center; gap: 3px; min-height: 20px; label { font-size: 0.6rem; font-weight: 700; color: #b0a090; text-transform: uppercase; white-space: nowrap; min-width: 26px; margin: 0; padding: 0; line-height: 1; } input[type="text"] { flex: 1; min-width: 0; height: 20px; line-height: 20px; font-size: 0.72rem; font-weight: 600; padding: 0 3px; background: rgba(35, 20, 5, 0.85); border: 1px solid rgba(120,75,20,0.55); border-radius: 2px; color: #f0dfc0; text-align: center; text-shadow: none; &:hover { border-color: rgba(200,150,40,0.7); background: rgba(50,30,10,0.9); } &:focus { outline: none; border-color: #ffd700; box-shadow: 0 0 4px rgba(255,215,0,0.3); } &:disabled { opacity: 0.6; cursor: default; } } select { flex: 1; min-width: 0; height: auto; min-height: 20px; font-size: 0.72rem; font-weight: 600; padding: 1px 14px 1px 3px; line-height: 1.2; background: rgba(35, 20, 5, 0.85); border: 1px solid rgba(120,75,20,0.55); border-radius: 2px; color: #f0dfc0; text-align: center; text-shadow: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23b09060' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 3px center; &:hover { border-color: rgba(200,150,40,0.7); background-color: rgba(50,30,10,0.9); } &:focus { outline: none; border-color: #ffd700; box-shadow: 0 0 4px rgba(255,215,0,0.3); } &:disabled { opacity: 0.6; cursor: default; } } // Valeur centrale (Vigueur) &.stat-field-center { justify-content: center; } } // Valeur numérique large (ex: score de Vigueur) .stat-big-value { display: block; font-size: 1.6rem; font-weight: 900; font-family: "Signika", "Arial Narrow", "Arial", sans-serif; font-variant-numeric: lining-nums tabular-nums; color: #f5e0c0; text-shadow: 1px 1px 4px rgba(0,0,0,0.9); text-align: center; line-height: 1.1; letter-spacing: 2px; } // Valeur dérivée (Aspect, Marge) .stat-derived { font-size: 0.62rem; color: #a09070; text-align: center; font-style: italic; padding: 1px 0 0; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 1px; } } } } // Sheet navigation tabs // SURCHARGE: simple-converted.less définit flex: 0 .sheet-tabs { margin: 0; padding: 0 0.5rem; flex: 0 0 auto !important; // Override simple-converted } // Sheet body - section scrollable // SURCHARGE CRITIQUE: simple-converted.less définit height: auto sur .sheet-body et .tab // Ces surcharges permettent le scroll vertical .sheet-body { margin: 0; padding: 0.5rem; flex: 1 !important; // Override simple-converted min-height: 0 !important; // Critique pour le scroll overflow-y: auto !important; // Override simple-converted .tab { padding: 0; height: auto !important; // Override simple-converted qui met height: auto &:not(.active) { display: none; } // Assurer que les grilles peuvent scroller .grid, .grid-2col { height: auto; overflow: visible; } .sheet-box { height: auto; } } // Listes compactes dans les sections .compact-list { list-style: none; margin: 0; padding: 0; li.item { padding: 0.2rem 0.4rem; margin-bottom: 0.15rem; background: rgba(0, 0, 0, 0.1); border: 1px solid rgba(139, 69, 19, 0.3); border-radius: 3px; &:hover { background: rgba(0, 0, 0, 0.15); } &.items-title-bg { background: rgba(0, 0, 0, 0.3); border-color: rgba(139, 69, 19, 0.5); font-weight: 600; margin-bottom: 0.3rem; .item-name-label-header { color: #f5e6d3; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); } } } } // Contrôles d'items (edit, delete, equip, etc.) .item-controls { display: flex; align-items: center; gap: 0.3rem; justify-content: flex-end; .item-control { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #5a3a1a; text-decoration: none; cursor: pointer; border-radius: 3px; transition: all 0.2s; &:hover { color: #2a1a0a; background: rgba(139, 69, 19, 0.2); transform: scale(1.1); } i { font-size: 0.85rem; } &.item-edit { color: #4a7c59; &:hover { color: #2d5a3a; background: rgba(74, 124, 89, 0.2); } } &.item-delete { color: #a04040; &:hover { color: #802020; background: rgba(160, 64, 64, 0.2); } } &.item-equip { color: #6b5b3a; &:hover { color: #4a3a1a; background: rgba(107, 91, 58, 0.2); } i.fa-circle { color: #4a7c59; } i.fa-genderless { color: #8a6a4a; } } &.item-add { color: #4a7c59; &:hover { color: #2d5a3a; background: rgba(74, 124, 89, 0.2); } } } } .item-controls-fixed { min-width: 3.2rem; max-width: 3.2rem; } // Couleurs pour les labels et textes dans les onglets h4, h3, label, span.item-name-label, span.competence-name, .label-name, .generic-label, .item-field-label-short, .item-field-label-medium, .item-field-label-long, .short-label, .items-title-text { color: #3a2a1a !important; text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.3); } // Inputs dans le corps input[type="text"], input[type="number"], select { color: #2a1a0a; background: rgba(255, 250, 240, 0.8); border: 1px solid rgba(139, 69, 19, 0.5); height: 24px; padding: 0.15rem 0.3rem; line-height: 1.2; &:focus { background: rgba(255, 255, 245, 0.95); border-color: rgba(139, 69, 19, 0.8); } } // Titres de sections h3, h4 { font-weight: bold; color: #2a1a0a !important; } // Titres de sections Santé, Âme, Combat h4.item-name-label.competence-name { font-size: 0.85rem; margin-top: 0.2rem; margin-bottom: 0.3rem; padding-top: 0; } // Section grids pour Santé, Âme, Combat .section-grid { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.3rem 0.4rem; margin-bottom: 0.3rem; background: rgba(0, 0, 0, 0.15); border: 2px solid rgba(139, 69, 19, 0.5); border-radius: 4px; .section-title { font-size: 0.85rem; font-weight: bold; color: #f5e6d3; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 0.2rem 0; padding: 0.2rem 0.4rem; background: rgba(0, 0, 0, 0.3); border-left: 3px solid rgba(139, 69, 19, 0.8); border-radius: 2px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); } .grid-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0.4rem; padding: 0.25rem 0.4rem; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(139, 69, 19, 0.4); border-radius: 3px; input { width: 60px; min-width: 60px; } &.attr-row { grid-template-columns: 40px 1fr auto; gap: 0.5rem; .item-name-img { width: 32px; height: 32px; border-radius: 3px; border: 1px solid rgba(139, 69, 19, 0.5); } .label-name { display: flex; align-items: center; a { color: #f5e6d3; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); font-weight: 600; cursor: pointer; &:hover { color: #fff; text-shadow: 0 0 4px rgba(255, 200, 100, 0.8); } } } select { width: 80px; } } .label-name { font-weight: 600; font-size: 0.9rem; color: #d4c5b0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); } .stat-label { font-weight: 600; font-size: 0.9rem; color: #d4c5b0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); } .value-display { text-align: center; font-weight: bold; font-size: 1rem; color: #fff; background: rgba(0, 0, 0, 0.4); padding: 0.2rem 0.4rem; border-radius: 3px; border: 1px solid rgba(139, 69, 19, 0.6); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); } .malus-value { text-align: center; font-weight: bold; font-size: 1rem; color: #ff9999; background: rgba(0, 0, 0, 0.4); padding: 0.2rem 0.4rem; border-radius: 3px; border: 1px solid rgba(200, 50, 50, 0.6); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); } &.damage-row { grid-template-columns: 120px 1fr; .damage-label { font-size: 0.95rem; font-weight: 600; } .damage-controls { display: flex; align-items: center; justify-content: center; gap: 0.4rem; input { width: 60px; min-width: 60px; flex-shrink: 0; text-align: center; font-size: 1.1rem; font-weight: bold; } .plus-minus-button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: bold; border-radius: 4px; border: 2px solid rgba(139, 69, 19, 0.5); background: linear-gradient(to bottom, rgba(210, 180, 140, 0.9), rgba(180, 150, 110, 0.9)); color: #2a1a0a; cursor: pointer; transition: all 0.15s; &:hover { background: linear-gradient(to bottom, rgba(230, 200, 160, 0.95), rgba(200, 170, 130, 0.95)); border-color: rgba(139, 69, 19, 0.8); transform: scale(1.08); } &:active { transform: scale(0.95); } } } } &.soul-consumed-row { grid-template-columns: 120px 1fr; } &.soul-malus-row { grid-template-columns: 90px 1fr; gap: 0.4rem; .label-name { font-size: 0.85rem; } .malus-value { font-size: 0.9rem; padding: 0.2rem 0.3rem; } } &.malus-row { grid-template-columns: 55px 60px 75px 50px; gap: 0.3rem; .label-name { font-size: 0.85rem; } input { width: 100%; min-width: unset; } .malus-value { font-size: 0.9rem; padding: 0.2rem 0.3rem; } } } &.combat-grid { .grid-row.combat-stat { grid-template-columns: 85px 50px 60px 55px; gap: 0.4rem; .stat-label { font-size: 0.85rem; } .stat-base { text-align: center; font-weight: bold; font-size: 0.85rem; color: #fff; background: rgba(0, 0, 0, 0.4); padding: 0.2rem 0.3rem; border-radius: 3px; border: 1px solid rgba(139, 69, 19, 0.6); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); } input { width: 50px; min-width: 50px; text-align: center; } .stat-total { text-align: center; font-weight: bold; font-size: 0.85rem; color: #fff; background: rgba(0, 0, 0, 0.4); padding: 0.2rem 0.3rem; border-radius: 3px; border: 1px solid rgba(139, 69, 19, 0.6); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); } } .grid-row.protection-row { grid-template-columns: 1fr 1fr; .protection-value { text-align: center; font-weight: bold; font-size: 1.2rem; color: #fff; background: rgba(0, 0, 0, 0.4); padding: 0.25rem 0.4rem; border-radius: 3px; border: 1px solid rgba(139, 69, 19, 0.6); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); } } } } // Boutons d'actions spéciales .action-buttons { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.3rem 0; button { margin: 0; } } .action-buttons-row { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.3rem 0; button { margin: 0; flex: 1; } .mounted-checkbox { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; white-space: nowrap; label { margin: 0; font-size: 0.9rem; } input[type="checkbox"] { margin: 0; cursor: pointer; } } } } /* ==================== Adversité Cards ==================== */ .adversite-section { padding: 6px 8px 8px; .adversite-section-title { font-family: "CentaurMT", "Palatino Linotype", serif; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #c8a060; text-align: center; margin: 0 0 8px 0; padding-bottom: 4px; border-bottom: 1px solid rgba(180, 130, 40, 0.35); text-shadow: 1px 1px 3px rgba(0,0,0,0.8); } .adversite-cards { display: flex; flex-direction: row; gap: 8px; .adversite-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; border-radius: 5px; border: 1px solid rgba(100,80,40,0.4); border-top: 3px solid rgba(100,80,40,0.6); background: rgba(8,4,0,0.55); transition: box-shadow 0.2s; &:hover { box-shadow: 0 0 10px rgba(200,160,60,0.2); } // Couleur par type &.adversite-bleue { border-top-color: #2255bb; background: rgba(4, 8, 30, 0.65); .adversite-card-title { color: #88aaff; } } &.adversite-rouge { border-top-color: #aa1818; background: rgba(30, 4, 4, 0.65); .adversite-card-title { color: #ff8888; } } &.adversite-noire { border-top-color: #555555; background: rgba(12, 12, 12, 0.75); .adversite-card-title { color: #aaaaaa; } } .adversite-card-title { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0,0,0,0.9); } .adversite-gem { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)); transition: transform 0.15s, filter 0.15s; &:hover { transform: scale(1.06); filter: drop-shadow(0 3px 10px rgba(180,140,60,0.5)); } } .adversite-value { font-family: "Signika", "Arial Narrow", sans-serif; font-variant-numeric: lining-nums tabular-nums; font-size: 1.6rem; font-weight: 900; color: #f5e0c0; text-shadow: 1px 1px 4px rgba(0,0,0,0.9); line-height: 1; min-height: 1.8rem; display: flex; align-items: center; justify-content: center; } .adversite-controls { display: flex; gap: 6px; align-items: center; .adv-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 900; border-radius: 4px; border: 1px solid rgba(160,120,40,0.6); background: linear-gradient(to bottom, rgba(60,35,8,0.9), rgba(30,15,3,0.9)); color: #d4aa60; cursor: pointer; transition: all 0.12s; text-decoration: none; line-height: 1; user-select: none; &:hover { background: linear-gradient(to bottom, rgba(120,60,10,0.95), rgba(80,35,5,0.95)); border-color: rgba(220,170,50,0.8); color: #ffe090; transform: scale(1.1); } &:active { transform: scale(0.92); } &.adv-minus { color: #ff9999; border-color: rgba(180,40,40,0.5); } &.adv-plus { color: #99ffaa; border-color: rgba(40,160,60,0.5); } } } } } .adversite-total { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 4px 8px; border-radius: 3px; border: 1px solid rgba(100,70,20,0.35); background: rgba(15,8,0,0.5); cursor: default; transition: all 0.2s; &.adversite-total-nonzero { border-color: rgba(200,60,30,0.6); background: rgba(40,8,4,0.7); box-shadow: 0 0 8px rgba(200,50,20,0.2); .adversite-total-value { color: #ff7755; text-shadow: 0 0 8px rgba(255,80,40,0.5); } } .adversite-total-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #9a7a50; } .adversite-total-value { font-family: "Signika", "Arial Narrow", sans-serif; font-variant-numeric: lining-nums tabular-nums; font-size: 1.1rem; font-weight: 900; color: #c0a070; line-height: 1; transition: color 0.2s; } } .adversite-modifiers { display: flex; flex-direction: row; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(120,80,20,0.3); .adversite-modifier-row { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; label { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #9a7a50; white-space: nowrap; cursor: default; } input { width: 40px; height: 20px; text-align: center; font-size: 0.8rem; font-weight: 600; padding: 0 2px; background: rgba(30,15,3,0.85); border: 1px solid rgba(120,75,20,0.5); border-radius: 2px; color: #f0dfc0; } } } } } /* ==================== Creature Sheet Specific Styles ==================== */ .fvtt-mournblade-cyd-2-0.actor.creature-sheet { // Variant background pour creatures - teinte légèrement différente .background-sheet-header-creature { background: linear-gradient(135deg, rgba(0, 60, 0, 0.15) 0%, rgba(20, 80, 20, 0.1) 100%); border: 2px solid rgba(34, 139, 34, 0.5); border-radius: 4px; padding: 0; } // Légère teinte verte pour les sections .sheet-box { &.color-bg-archetype { background: linear-gradient(135deg, rgba(0, 40, 0, 0.08) 0%, rgba(20, 60, 20, 0.05) 100%); } } // Header simplifié pour creatures .sheet-header { flex: 0 0 auto !important; padding: 0; } .profile-img { width: 80px; height: 80px; border-radius: 8px; border: 2px solid rgba(34, 139, 34, 0.6); object-fit: cover; cursor: pointer; flex-shrink: 0; } // Tabs avec teinte verte nav.tabs { .item.active { border-bottom-color: rgba(34, 139, 34, 0.8); color: #228b22; } } // Section titles avec teinte verte .section-title { color: #1a5a1a; border-bottom-color: rgba(34, 139, 34, 0.3); } // Items headers .items-title-bg { background: linear-gradient(135deg, rgba(0, 60, 0, 0.15) 0%, rgba(20, 80, 20, 0.1) 100%); border-bottom: 1px solid rgba(34, 139, 34, 0.3); } } // PNJ Sheet - Orange/Copper theme for visual distinction .fvtt-mournblade-cyd-2-0.actor.pnj-sheet { // Variant background pour PNJs - teinte orange/cuivre .background-sheet-header-creature { background: linear-gradient(135deg, rgba(80, 40, 0, 0.15) 0%, rgba(100, 50, 0, 0.1) 100%); border: 2px solid rgba(205, 127, 50, 0.5); border-radius: 4px; padding: 0; } // Légère teinte orange/cuivre pour les sections .sheet-box { &.color-bg-archetype { background: linear-gradient(135deg, rgba(60, 30, 0, 0.08) 0%, rgba(80, 40, 0, 0.05) 100%); } } // Header simplifié pour PNJs .sheet-header { flex: 0 0 auto !important; padding: 0; } .profile-img { width: 80px; height: 80px; border-radius: 8px; border: 2px solid rgba(205, 127, 50, 0.6); object-fit: cover; cursor: pointer; flex-shrink: 0; } // Tabs avec teinte orange/cuivre nav.tabs { .item.active { border-bottom-color: rgba(205, 127, 50, 0.8); color: #cd7f32; } } // Section titles avec teinte orange/cuivre .section-title { color: #b8734d; border-bottom-color: rgba(205, 127, 50, 0.3); } // Items headers .items-title-bg { background: linear-gradient(135deg, rgba(80, 40, 0, 0.15) 0%, rgba(100, 50, 0, 0.1) 100%); border-bottom: 1px solid rgba(205, 127, 50, 0.3); } } // GM Tools section - labels plus larges .gm-tools-section { .grid { .item-list .flexrow.item { .label-name { flex: 1; min-width: 12rem; } } } } // Alignment group in header .stat-group-alignment { .stat-values.alignment-values { display: flex; flex-direction: column; gap: 0.3rem; } .alignment-row { display: flex; align-items: center; gap: 0.3rem; .alignment-label { font-weight: bold; min-width: 4rem; font-size: 0.85rem; } .alignment-inputs { display: flex; align-items: center; gap: 0.2rem; flex: 1; } .stat-label-mini { font-size: 0.7rem; min-width: 2.5rem; } .stat-input-mini { width: 2.5rem; height: 1.5rem; padding: 0.1rem 0.2rem; font-size: 0.8rem; } select.stat-input-mini { width: 3rem; } } .alignment-info { display: flex; justify-content: space-around; margin-top: 0.2rem; padding-top: 0.2rem; border-top: 1px solid rgba(139, 69, 19, 0.3); .info-label { font-size: 0.75rem; color: #f5e6d3; strong { color: #ffd700; } } } }