// ============================================================ // SETTLEMENT SHEET // ============================================================ .oathhammer .settlement-main { padding: 0 0 8px; border-bottom: 1px solid fade(@color-dark, 25%); margin-bottom: 4px; } .oathhammer .settlement-header { align-items: flex-start; gap: 10px; } .oathhammer .settlement-header .actor-img { width: 72px; height: 72px; object-fit: cover; border: 2px solid fade(@color-dark, 40%); border-radius: 4px; cursor: pointer; flex-shrink: 0; } .oathhammer .settlement-header-info { flex: 1; display: flex; flex-direction: column; gap: 6px; } .oathhammer .settlement-name-row { align-items: center; gap: 8px; } .oathhammer .settlement-archetype-badge { font-size: @font-size-sm; color: darken(@color-paper, 40%); background: fade(@color-gold, 15%); border: 1px solid fade(@color-gold, 40%); border-radius: 3px; padding: 1px 6px; white-space: nowrap; } .oathhammer .settlement-stats { gap: 8px; flex-wrap: wrap; align-items: flex-start; .stat-item { display: flex; flex-direction: column; gap: 2px; min-width: 80px; label { font-size: 0.72rem; color: @color-dark; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.03em; } input { padding: 2px 4px; } &--flags { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; min-width: unset; label { display: flex; align-items: center; gap: 4px; font-size: @font-size-sm; text-transform: none; letter-spacing: 0; cursor: pointer; } } } } .oathhammer .settlement-badge { font-size: 0.75rem; font-weight: bold; border-radius: 3px; padding: 2px 7px; &--capital { background: fade(@color-gold, 20%); border: 1px solid fade(@color-gold, 50%); color: darken(@color-gold, 30%); } &--siege { background: rgba(180, 40, 40, 0.12); border: 1px solid rgba(180, 40, 40, 0.4); color: #8a1a1a; } } .oathhammer .settlement-content .tab { padding: 8px 0; } // Overview grid: garrison | founded | tax notes .oathhammer .settlement-overview-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 8px; margin-bottom: 8px; } .oathhammer .settlement-hint { font-size: 0.78rem; color: @color-dark; opacity: 0.7; margin: 0 0 8px; font-style: italic; } // Buildings item list .oathhammer .item-list--buildings { .item-list-header, .item-entry { display: grid; grid-template-columns: 28px 1fr 3rem 5rem 4rem 3rem; align-items: center; gap: 4px; } } .oathhammer .item-entry.building-constructed { background: rgba(60, 140, 60, 0.08); .item-name { font-weight: 600; } } .oathhammer .item-constructed { text-align: center; font-size: 1rem; color: #3a7a3a; } .oathhammer .item-tax { font-size: @font-size-sm; color: darken(@color-olive, 10%); text-align: center; &--inactive { opacity: 0.4; } } .oathhammer .item-cost { font-size: @font-size-sm; color: darken(@color-gold, 20%); text-align: right; } .oathhammer .construct-toggle { color: #3a7a3a; cursor: pointer; font-size: 1rem; &:hover { color: darken(#3a7a3a, 15%); } }