fix: clean-up actor image alignment

xdy · Jan 12, 2025 · 1ebecbb · 1ebecbb
1 parent 117a396
commit 1ebecbb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/static/styles/twodsix.css b/static/styles/twodsix.css
@@ -476,7 +476,6 @@ h2 {
   flex-direction: column;
   justify-content: space-between;
   flex-wrap: nowrap;
-  flex-basis: fit-content;
 }
 
 .npc-bgi-stats {
@@ -895,25 +894,28 @@ h2 {
 }
 
 .character-photo {
-  margin-top: 6%;
+  /*margin-top: 6%;*/
   margin-left: 18px;
   /* position: absolute; */
   /* width: 100%; */
   /* height: -webkit-fill-available; */
   text-align: center;
   /* z-index: 0; */
-  object-fit: contain;
+  /*object-fit: contain;*/
   /* height: auto; */
   grid-area: character-photo;
   /* width: -webkit-fill-available; */
   overflow: hidden;
+  display: flex;
+  justify-content: center;
 }
 
 .character-photo img {
   vertical-align: middle;
   max-height: 100%;
   width: 100%;
-  z-index: -1;
+  margin: 0;
+  object-fit: contain;
 }
 
 .character-photo.npc {

diff --git a/static/templates/actors/npc-sheet.html b/static/templates/actors/npc-sheet.html
@@ -6,15 +6,15 @@
   {{/if}}
     <div class="npc-name-photo">
       <div class="character-photo npc">
-        <img class="profile-img" style="height: 100%;" src="{{actor.img}}" {{#unless limited}}data-edit="img"{{/unless}} data-tooltip="{{actor.name}}" alt='{{localize "TWODSIX.Actor.CharacterImage"}}' />
+        <img class="profile-img" src="{{actor.img}}" {{#unless limited}}data-edit="img"{{/unless}} data-tooltip="{{actor.name}}" alt='{{localize "TWODSIX.Actor.CharacterImage"}}' />
         {{#if settings.showStatusIcons}}
         <span class="status-icons npc">
             {{#each effects as |anEffect|}}
             {{#unless (or anEffect.disabled anEffect.isSuppressed)}}<img class="condition-icon" src="{{anEffect.img}}" data-tooltip="{{anEffect.name}}" data-uuid= "{{anEffect.uuid}}" style="border: 1px solid {{anEffect.tint.css}} !important;"/>{{/unless}}
             {{/each}}
         {{/if}}
       </div>
-      <div class="character-name npc" style="width: 100% !important; height: 3ch !important;"><input name="name" type="text" value="{{actor.name}}" placeholder='{{localize "TWODSIX.Actor.CharacterName"}}'
+      <div class="character-name npc"><input name="name" type="text" value="{{actor.name}}" placeholder='{{localize "TWODSIX.Actor.CharacterName"}}'
                   onClick="this.select();" autocomplete="off"/></div>
       {{#if settings.showInitiativeButton}}
         <div class = "initiative">