fix: visually disable/remove interactive elements in non-editable sheets

scss/components/actor/_check.scss

@@ -7,11 +7,29 @@
 @use "../../utils/mixins";
 
 .ds4-check {
+    background: transparent;
+    border: none;
     cursor: pointer;
     display: flex;
+    font-family: inherit;
+    font-size: inherit;
     justify-content: space-between;
+    line-height: inherit;
+    margin: 0;
+
+    &:focus {
+        box-shadow: none;
+    }
 
     &:hover {
         @include mixins.foundry-highlight-text-shadow;
+        box-shadow: none;
+    }
+
+    &[disabled] {
+        cursor: auto;
+        &:hover {
+            text-shadow: none;
+        }
     }
 }

src/actor/actor-sheet.ts

@@ -323,6 +323,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Options, DS4ActorSheetD
      */
     protected onRollCheck(event: JQuery.ClickEvent): void {
         event.preventDefault();
+        event.currentTarget.blur();
         const check = event.currentTarget.dataset["check"];
         this.actor.rollCheck(check).catch((e) => notifications.error(e, { log: true }));
     }

templates/sheets/actor/components/check.hbs

@@ -12,7 +12,8 @@ SPDX-License-Identifier: MIT
 !-- @param check-label: The label for the check
 --}}
 
-<div class="ds4-check rollable-check" data-check="{{check-key}}" title="{{localize 'DS4.CheckTooltip' check=check-label}}">
+<button class="ds4-check rollable-check" data-check="{{check-key}}"
+    title="{{localize 'DS4.CheckTooltip' check=check-label}}">
     <span>{{check-label}}</span>
     <span>{{check-target-number}}</span>
-</div>
+</button>

templates/sheets/actor/components/item-list-entry.hbs

@@ -24,7 +24,7 @@ SPDX-License-Identifier: MIT
     {{/if}}
 
     {{!-- image --}}
-    {{> systems/ds4/templates/sheets/shared/components/rollable-image.hbs rollable=itemData.data.rollable
+    {{> systems/ds4/templates/sheets/shared/components/rollable-image.hbs rollable=(and itemData.data.rollable @root/editable)
     src=itemData.img alt=(localize "DS4.DocumentImageAltText" name=itemData.name) title=itemData.name
     rollableTitle=(localize "DS4.RollableImageRollableTitle" name=itemData.name) rollableClass="rollable-item"}}
 

templates/sheets/shared/components/add-button.hbs

@@ -11,6 +11,7 @@ SPDX-License-Identifier: MIT
 !-- @param title: The title to use for the link element (will be localized)
 !-- @param type: An optional property to use as data-type attribute
 }}
+{{#if @root/editable}}
 <div class="ds4-add-button">
     <a class="control-{{documentType}}" title="{{localize title}}" data-action="create" {{#if type}}data-type="{{type}}"
         {{/if}}>
@@ -18,3 +19,4 @@ SPDX-License-Identifier: MIT
         {{localize "DS4.UserInteractionAdd"}}
     </a>
 </div>
+{{/if}}

templates/sheets/shared/components/control-button-group.hbs

@@ -13,8 +13,10 @@ SPDX-License-Identifier: MIT
 !-- @param deleteTitle: The title to use for the delete link element (will be localized)
 --}}
 <div class="ds4-control-button-group">
+    {{#if @root/editable}}
     <a class="ds4-control-button-group__button control-{{documentType}}" data-action="edit"
         title="{{localize editTitle}}"><i class="fas fa-edit"></i></a>
     <a class="ds4-control-button-group__button control-{{documentType}}" data-action="delete"
         title="{{localize deleteTitle}}"><i class="fas fa-trash"></i></a>
+    {{/if}}
 </div>