From d284bd739805febd739162e0a6c8eacec5e35234 Mon Sep 17 00:00:00 2001
From: Nikhil Nagarajan <potter.nikhil@gmail.com>
Date: Tue, 31 Mar 2026 11:31:21 -0400
Subject: [PATCH] [Fix] Fix CSS trait consistency in Character Creator and
 Sheet (#1737)

* Fixed on CC and sheet

* SVG fixes

* Revert "SVG fixes"

This reverts commit 72c5075f3f03db684b1d17fff7d20f17aa74deaf.

* SVG repaired and CSS padding revert

* Remove comments

---------

Co-authored-by: WBHarry <williambjrklund@gmail.com>
---
 assets/svg/trait-shield-light.svg                    |  2 +-
 assets/svg/trait-shield.svg                          |  2 +-
 .../character-creation/selections-container.less     | 10 +++++++---
 .../sheets-settings/character-settings/sheet.less    | 12 +++++++++---
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/assets/svg/trait-shield-light.svg b/assets/svg/trait-shield-light.svg
index dc6f77c3..c4d1824d 100644
--- a/assets/svg/trait-shield-light.svg
+++ b/assets/svg/trait-shield-light.svg
@@ -1,3 +1,3 @@
 <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.12012 0.5H51.8799C55.2901 0.500041 57.8779 3.57175 57.2998 6.93262L50.4639 46.6777C50.1604 48.4411 49.0179 49.9467 47.4014 50.7139L31.3584 58.3271C29.8661 59.0354 28.1339 59.0354 26.6416 58.3271L10.5986 50.7139C8.98214 49.9467 7.83959 48.4411 7.53613 46.6777L0.700195 6.93262C0.122088 3.57175 2.7099 0.500042 6.12012 0.5Z" fill="transparent" stroke="#18162e"/>
+<path d="M 7.12 0.5 H 52.88 C 56.29 0.5 58.88 3.57 58.3 6.93 L 51.46 46.68 C 51.16 48.44 50.02 49.95 48.4 50.71 L 32.36 58.33 C 30.87 59.04 29.13 59.04 27.64 58.33 L 11.6 50.71 C 9.98 49.95 8.84 48.44 8.54 46.68 L 1.7 6.93 C 1.12 3.57 3.71 0.5 7.12 0.5 Z" fill="transparent" stroke="#18162e"/>
 </svg>
diff --git a/assets/svg/trait-shield.svg b/assets/svg/trait-shield.svg
index 87c18dd7..dcb87cf4 100644
--- a/assets/svg/trait-shield.svg
+++ b/assets/svg/trait-shield.svg
@@ -1,3 +1,3 @@
 <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.12012 0.5H51.8799C55.2901 0.500041 57.8779 3.57175 57.2998 6.93262L50.4639 46.6777C50.1604 48.4411 49.0179 49.9467 47.4014 50.7139L31.3584 58.3271C29.8661 59.0354 28.1339 59.0354 26.6416 58.3271L10.5986 50.7139C8.98214 49.9467 7.83959 48.4411 7.53613 46.6777L0.700195 6.93262C0.122088 3.57175 2.7099 0.500042 6.12012 0.5Z" fill="#18152E" stroke="#F3C267"/>
+<path d="M 7.12 0.5 H 52.88 C 56.29 0.5 58.88 3.57 58.3 6.93 L 51.46 46.68 C 51.16 48.44 50.02 49.95 48.4 50.71 L 32.36 58.33 C 30.87 59.04 29.13 59.04 27.64 58.33 L 11.6 50.71 C 9.98 49.95 8.84 48.44 8.54 46.68 L 1.7 6.93 C 1.12 3.57 3.71 0.5 7.12 0.5 Z" fill="#18152E" stroke="#F3C267"/>
 </svg>
diff --git a/styles/less/dialog/character-creation/selections-container.less b/styles/less/dialog/character-creation/selections-container.less
index 1de3d870..f9569fca 100644
--- a/styles/less/dialog/character-creation/selections-container.less
+++ b/styles/less/dialog/character-creation/selections-container.less
@@ -240,12 +240,16 @@
                 display: flex;
                 align-items: center;
                 justify-content: space-evenly;
-                gap: 8px;
+                gap: 2px;
 
                 .trait-container {
-                    width: 60px;
-                    height: 60px;
+                    span {
+                        font-size: var(--font-size-10);
+                    }
+                    width: 65px;
+                    height: 65px;
                     background: url(../assets/svg/trait-shield.svg) no-repeat;
+                    background-size: 100%;
 
                     div {
                         filter: drop-shadow(0 0 3px black);
diff --git a/styles/less/sheets-settings/character-settings/sheet.less b/styles/less/sheets-settings/character-settings/sheet.less
index f0c7c94e..f7f16df4 100644
--- a/styles/less/sheets-settings/character-settings/sheet.less
+++ b/styles/less/sheets-settings/character-settings/sheet.less
@@ -20,16 +20,22 @@
             display: flex;
             align-items: center;
             justify-content: space-evenly;
-            gap: 8px;
+            gap: 2px;
 
             .trait-container {
-                width: 60px;
-                height: 60px;
+                width: 65px;
+                height: 65px;
                 background: url(../assets/svg/trait-shield.svg) no-repeat;
+                background-size: 100%;
+                padding-top: 4px;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
 
+                span {
+                    font-size: var(--font-size-10);
+                }
+
                 div {
                     filter: drop-shadow(0 0 3px black);
                     text-shadow: 0 0 3px black;