diff --git a/css/fvtt-oath-hammer.css b/css/fvtt-oath-hammer.css index c9809cb..c8c63dd 100644 --- a/css/fvtt-oath-hammer.css +++ b/css/fvtt-oath-hammer.css @@ -184,8 +184,6 @@ color: #084a74; } .oathhammer .actor-img { - height: 150px; - width: auto; border: 2px solid #084a74; border-radius: 4px; cursor: pointer; @@ -200,45 +198,24 @@ .oathhammer .character-main .character-pc { display: flex; gap: 10px; + align-items: flex-start; flex: 1; } -.oathhammer .character-main .character-left { - min-width: 180px; - max-width: 180px; - display: flex; - flex-direction: column; - align-items: center; - gap: 4px; -} .oathhammer .character-main .character-portrait { - display: flex; - justify-content: center; + flex-shrink: 0; + width: 150px; } -.oathhammer .character-main .character-resource { - display: flex; - align-items: center; - flex-wrap: nowrap; - gap: 4px; - margin-bottom: 2px; -} -.oathhammer .character-main .character-resource div.form-group { - display: contents; -} -.oathhammer .character-main .character-resource input { - min-width: 2.5rem; - max-width: 2.5rem; - text-align: center; -} -.oathhammer .character-main .resource-label { - min-width: 3.5rem; - font-family: "BlueDragon", "Palatino Linotype", serif; - font-size: calc(0.82rem * 0.9); +.oathhammer .character-main .character-portrait .actor-img { + width: 150px; + height: 150px; + -o-object-fit: cover; + object-fit: cover; } .oathhammer .character-main .character-right { flex: 1; display: flex; flex-direction: column; - gap: 6px; + gap: 5px; min-width: 0; } .oathhammer .character-main .character-name { @@ -326,17 +303,54 @@ font-size: calc(0.82rem * 0.85); padding: 1px 2px; } -.oathhammer .attributes-stress-row { +.oathhammer .character-main .character-stats-band { display: flex; - align-items: flex-start; + align-items: stretch; gap: 6px; -} -.oathhammer .attributes-stress-row .character-attributes { flex: 1; } -.oathhammer .attributes-stress-row .character-arcane-stress { +.oathhammer .character-main .character-stats-band .character-resources { + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: space-evenly; + gap: 2px; + padding: 3px 6px; + border: 1px solid #535128; + border-radius: 3px; + background: rgba(0, 0, 0, 0.08); +} +.oathhammer .character-main .character-stats-band .character-resources .character-resource { + display: flex; + align-items: center; + gap: 3px; + white-space: nowrap; +} +.oathhammer .character-main .character-stats-band .character-resources .character-resource div.form-group { + display: contents; +} +.oathhammer .character-main .character-stats-band .character-resources .character-resource input { + width: 2.4rem; + text-align: center; + font-size: calc(0.82rem * 0.85); + padding: 1px 2px; +} +.oathhammer .character-main .character-stats-band .character-resources .character-resource .res-sep { + opacity: 0.5; + font-size: calc(0.82rem * 0.9); +} +.oathhammer .character-main .character-stats-band .character-resources .resource-label { + min-width: 3.8rem; + font-family: "BlueDragon", "Palatino Linotype", serif; + font-size: calc(0.82rem * 0.9); + color: #535128; +} +.oathhammer .character-main .character-stats-band .character-attributes { + flex: 1; + min-width: 0; +} +.oathhammer .character-main .character-stats-band .character-arcane-stress { flex-shrink: 0; - width: auto; } .oathhammer .attributes-grid { display: grid; diff --git a/lang/en.json b/lang/en.json index c314dcf..a08d7e2 100644 --- a/lang/en.json +++ b/lang/en.json @@ -206,6 +206,7 @@ "StressValue": "Stress", "Attributes": "Attributes", "Biodata": "Background", + "Background": "Background", "Experience": "Experience", "Level": "Level", "XP": "Current XP", diff --git a/less/actor-sheet.less b/less/actor-sheet.less index 76fe443..bf8a169 100644 --- a/less/actor-sheet.less +++ b/less/actor-sheet.less @@ -5,8 +5,6 @@ .oathhammer { .actor-img { - height: @portrait-height; - width: auto; border: 2px solid @color-blue; border-radius: 4px; cursor: pointer; @@ -18,59 +16,36 @@ flex-direction: column; gap: 4px; + // Portrait + right column layout .character-pc { display: flex; gap: 10px; + align-items: flex-start; flex: 1; } - .character-left { - min-width: @left-panel-width; - max-width: @left-panel-width; - display: flex; - flex-direction: column; - align-items: center; - gap: 4px; - } - + // Portrait alone on the left, fixed square .character-portrait { - display: flex; - justify-content: center; - } + flex-shrink: 0; + width: @portrait-height; - .character-resource { - display: flex; - align-items: center; - flex-wrap: nowrap; - gap: 4px; - margin-bottom: 2px; - - // formInput renders a