Fix several style quirks in attack popout (#15568)

foundryvtt · Jul 25, 2024 · 76b9055 · 76b9055
1 parent 1d00850
commit 76b9055
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 55 deletions.
diff --git a/src/module/actor/character/attack-popouts.ts → src/module/actor/character/attack-popout.ts b/src/module/actor/character/attack-popouts.ts → src/module/actor/character/attack-popout.ts
@@ -1,9 +1,9 @@
+import type { EffectTrait } from "@item/abstract-effect/types.ts";
 import { ErrorPF2e, htmlClosest, htmlQuery } from "@util";
 import type { CharacterStrike } from "./data.ts";
 import type { CharacterPF2e } from "./document.ts";
 import type { ElementalBlastConfig } from "./elemental-blast.ts";
 import { CharacterSheetPF2e, type CharacterSheetData } from "./sheet.ts";
-import { EffectTrait } from "@item/abstract-effect/types.ts";
 
 class AttackPopout<TActor extends CharacterPF2e> extends CharacterSheetPF2e<TActor> {
     type: "strike" | "blast" = "strike";
@@ -25,11 +25,13 @@ class AttackPopout<TActor extends CharacterPF2e> extends CharacterSheetPF2e<TAct
     }
 
     static override get defaultOptions(): ActorSheetOptions {
+        const options = super.defaultOptions;
         return {
-            ...super.defaultOptions,
+            ...options,
+            classes: [...options.classes, "attack-popout"],
             submitOnChange: false,
             submitOnClose: false,
-            width: 480,
+            width: 520,
             height: "auto",
             resizable: false,
         };

diff --git a/src/scripts/macros/hotbar.ts b/src/scripts/macros/hotbar.ts
@@ -1,5 +1,5 @@
 import { ActorPF2e } from "@actor";
-import { AttackPopout } from "@actor/character/attack-popouts.ts";
+import { AttackPopout } from "@actor/character/attack-popout.ts";
 import { ElementalBlast } from "@actor/character/elemental-blast.ts";
 import type { ConditionPF2e, EffectPF2e } from "@item";
 import { EffectTrait } from "@item/abstract-effect/types.ts";

diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
@@ -56,13 +56,13 @@
         -moz-appearance: none;
         -webkit-appearance: none;
         appearance: none;
-        background-color: var(--alt);
+        background-color: var(--color-pf-alternate);
         background-image: url("/assets/icons/chevron-down.svg");
         background-position: right 0.25em top 50%;
         background-repeat: no-repeat;
         background-size: 1em auto;
         border-radius: 2px;
-        border: 1px solid #53422a;
+        border: 1px solid var(--color-pf-alternate-dark);
         color: var(--text-light);
         font: 500 var(--font-size-14) var(--serif);
         height: auto;
@@ -76,7 +76,7 @@
         }
 
         option {
-            background-color: var(--alt);
+            background-color: var(--color-pf-alternate);
         }
     }
 

diff --git a/src/styles/actor/_index.scss b/src/styles/actor/_index.scss
@@ -258,42 +258,6 @@
 
                 @import "spell-collection";
 
-                ul.option-toggles {
-                    @include frame-elegant;
-                    display: flex;
-                    flex-flow: column wrap;
-                    list-style: none;
-                    margin-bottom: var(--space-8);
-                    padding: var(--space-8) 1rem;
-
-                    > li {
-                        align-items: center;
-                        display: flex;
-                        height: 1.5rem;
-                        width: 100%;
-
-                        label {
-                            align-items: center;
-                            display: flex;
-                            gap: var(--space-4);
-
-                            input[type="checkbox"] {
-                                height: 1.125rem;
-                                margin: 0;
-                                padding: 0;
-                            }
-
-                            .unchecked-disabled {
-                                color: var(--color-text-dark-inactive);
-                            }
-
-                            select {
-                                margin-left: 0.25em;
-                            }
-                        }
-                    }
-                }
-
                 .directory-list {
                     > h3,
                     > li > h3 {
@@ -500,13 +464,18 @@
 
 .actor.sheet {
     &.character section.window-content {
-        @import "character/attack-popout";
-
         .crb-style {
             @import "character";
         }
     }
 
+    &.attack-popout section.window-content {
+        background-image: url("/assets/sheet/background.webp");
+        background-position: 75% 10%;
+
+        @import "character/attack-popout";
+    }
+
     &.vehicle .crb-style {
         @import "vehicle";
     }

diff --git a/src/styles/actor/character/_attack-popout.scss b/src/styles/actor/character/_attack-popout.scss
@@ -1,20 +1,58 @@
-.attack-popout {
-    @import "./actions";
+.tab {
+    @import "actions";
+}
+
+.tab.actions {
     @import "../tabs/actions";
+    @import "option-toggles";
 
-    &.actions {
-        margin: 0.25em 0.1em 0 0.4em;
-    }
+    margin: 0.25em var(--space-4) 0;
 
     .actions-container {
-        padding: 0.5em 0 0.5em 0.4em;
+        padding: 0 var(--space-2);
+    }
+
+    ul.option-toggles {
+        margin-bottom: 0;
+
+        select {
+            appearance: none;
+            background: var(--color-pf-alternate);
+            border-color: var(--color-pf-alternate-dark);
+            color: var(--text-light);
+            font: 500 var(--font-size-14) var(--serif);
+            line-height: 1;
+            padding: var(--space-4) 1.1rem var(--space-4) var(--space-4);
+
+            &:not(:disabled) {
+                cursor: pointer;
+            }
+        }
+
+        option {
+            background-color: var(--color-pf-alternate);
+        }
     }
 
     ol.actions-list {
         list-style: none;
 
         li.strike {
             border: unset;
+            grid-template:
+                "img content" min-content
+                "summary summary" min-content/2rem 1fr;
+
+            .item-image {
+                height: 1.5rem;
+                width: 1.5rem;
+            }
+
+            .button-groups {
+                display: flex;
+                flex-direction: column;
+            }
+
             .ammo {
                 select.linked {
                     -moz-appearance: none;

diff --git a/src/styles/actor/character/_index.scss b/src/styles/actor/character/_index.scss
@@ -37,6 +37,8 @@ nav.sheet-navigation {
     & > .tab.active {
         display: flex;
         height: 100%;
+
+        @import "option-toggles";
     }
 
     & > .tab:not(.inventory, .actions),

diff --git a/src/styles/actor/character/_option-toggles.scss b/src/styles/actor/character/_option-toggles.scss
@@ -0,0 +1,37 @@
+ul.option-toggles {
+    @include frame-elegant;
+    display: flex;
+    flex-flow: column wrap;
+    font-family: var(--body-serif);
+    gap: var(--space-1);
+    list-style: none;
+    margin-bottom: var(--space-8);
+    padding: var(--space-8) 1rem;
+
+    > li {
+        align-items: center;
+        display: flex;
+        height: 1.5rem;
+        width: 100%;
+
+        label {
+            align-items: center;
+            display: flex;
+            gap: var(--space-4);
+
+            input[type="checkbox"] {
+                height: 1.125rem;
+                margin: 0;
+                padding: 0;
+            }
+
+            .unchecked-disabled {
+                color: var(--color-text-dark-inactive);
+            }
+
+            select {
+                margin-left: 0.25em;
+            }
+        }
+    }
+}
diff --git a/static/templates/actors/character/attack-popout.hbs b/static/templates/actors/character/attack-popout.hbs
@@ -1,8 +1,8 @@
 <div class="content">
-    <div class="tab actions active attack-popout" data-tab="actions">
+    <div class="tab actions active" data-tab="actions">
         {{#if (eq popoutType "blast")}}
             <div class="actions-container">
-                <div class=" actions-panels">
+                <div class="actions-panels">
                     {{> "systems/pf2e/templates/actors/partials/toggles.hbs" toggles=toggles.actions}}
                 </div>
             </div>

diff --git a/static/templates/actors/character/partials/elemental-blast.hbs b/static/templates/actors/character/partials/elemental-blast.hbs
@@ -4,10 +4,10 @@
     data-item-id="{{action.item.id}}"
     data-item-type="{{action.item.type}}"
 >
-    <div class="item-image strike framed">
+    <div class="item-image framed">
         <img src="{{action.img}}" /> <i class="fa-solid fa-message"></i>
     </div>
-    <section>
+    <section class="button-groups">
         {{#unless omitName}}
             <h4 class="name" data-tooltip-direction="UP">
                 <a data-action="toggle-summary">{{localize action.label}}</a>