diff --git a/styles/less/sheets/actors/character/effects.less b/styles/less/sheets/actors/character/effects.less
new file mode 100644
index 00000000..1549c834
--- /dev/null
+++ b/styles/less/sheets/actors/character/effects.less
@@ -0,0 +1,19 @@
+@import '../../../utils/colors.less';
+@import '../../../utils/fonts.less';
+
+.application.sheet.daggerheart.actor.dh-style.character {
+ .tab.effects {
+ .effects-sections {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ overflow-y: auto;
+ mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
+ padding: 20px 0;
+ padding-top: 10px;
+
+ scrollbar-width: thin;
+ scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+ }
+ }
+}
diff --git a/styles/less/sheets/actors/character/features.less b/styles/less/sheets/actors/character/features.less
index c2feb6b1..af53e11d 100644
--- a/styles/less/sheets/actors/character/features.less
+++ b/styles/less/sheets/actors/character/features.less
@@ -11,7 +11,6 @@
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
padding: 20px 0;
padding-top: 10px;
- height: 84%;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
diff --git a/styles/less/sheets/actors/character/inventory.less b/styles/less/sheets/actors/character/inventory.less
index eac1065d..48bdd682 100644
--- a/styles/less/sheets/actors/character/inventory.less
+++ b/styles/less/sheets/actors/character/inventory.less
@@ -56,7 +56,6 @@
overflow-y: auto;
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
padding: 20px 0;
- height: 73%;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
diff --git a/styles/less/sheets/actors/character/loadout.less b/styles/less/sheets/actors/character/loadout.less
index b7863e77..98fe9eed 100644
--- a/styles/less/sheets/actors/character/loadout.less
+++ b/styles/less/sheets/actors/character/loadout.less
@@ -97,7 +97,6 @@
overflow-y: auto;
mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 98%, transparent 100%);
padding: 20px 0;
- height: 84%;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
diff --git a/styles/less/sheets/actors/character/sheet.less b/styles/less/sheets/actors/character/sheet.less
index 3d19a3b2..f09ee541 100644
--- a/styles/less/sheets/actors/character/sheet.less
+++ b/styles/less/sheets/actors/character/sheet.less
@@ -11,6 +11,7 @@
width: 100%;
padding-bottom: 0;
overflow-x: auto;
+ margin-bottom: 0;
.character-sidebar-sheet {
grid-row: 1 / span 2;
@@ -25,6 +26,11 @@
.tab {
grid-row: 2;
grid-column: 2;
+ &.active {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
}
}
}
diff --git a/styles/less/sheets/actors/character/sidebar.less b/styles/less/sheets/actors/character/sidebar.less
index 2c88d14f..7cfeffac 100644
--- a/styles/less/sheets/actors/character/sidebar.less
+++ b/styles/less/sheets/actors/character/sidebar.less
@@ -63,7 +63,7 @@
flex-direction: column;
top: -20px;
gap: 30px;
- margin-bottom: -10px;
+ margin-bottom: -16px;
.resources-section {
display: flex;
@@ -357,54 +357,39 @@
}
}
- .equipment-section {
- .title {
- display: flex;
- gap: 15px;
- align-items: center;
+ .shortcut-items-section {
+ overflow-y: hidden;
+ max-height: 56%;
+ padding-top: 16px;
+ padding-bottom: 20px;
+ mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
- h3 {
- font-size: 20px;
- }
- }
- .items-list {
- display: flex;
- flex-direction: column;
- gap: 10px;
- align-items: center;
+ &:hover {
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: light-dark(@dark-blue, @golden) transparent;
}
}
- .loadout-section {
+ .equipment-section,
+ .loadout-section,
+ .experience-section {
.title {
- display: flex;
- gap: 15px;
- align-items: center;
+ .section-title();
+ }
+ }
- h3 {
- font-size: 20px;
- }
+ .equipment-section {
+ .items-list {
+ .column-list(10px);
}
}
.experience-section {
- .title {
- display: flex;
- gap: 15px;
- align-items: center;
-
- h3 {
- font-size: 20px;
- }
- }
-
.experience-list {
- display: flex;
- flex-direction: column;
- gap: 5px;
+ .column-list(5px);
width: 100%;
margin-top: 10px;
- align-items: center;
.experience-row {
display: flex;
diff --git a/styles/less/sheets/index.less b/styles/less/sheets/index.less
index 3470de37..aa2f4356 100644
--- a/styles/less/sheets/index.less
+++ b/styles/less/sheets/index.less
@@ -4,6 +4,7 @@
@import './actors/adversary/sidebar.less';
@import './actors/character/biography.less';
+@import './actors/character/effects.less';
@import './actors/character/features.less';
@import './actors/character/header.less';
@import './actors/character/inventory.less';
diff --git a/styles/less/utils/mixin.less b/styles/less/utils/mixin.less
index 39c2bee0..0e52fa82 100644
--- a/styles/less/utils/mixin.less
+++ b/styles/less/utils/mixin.less
@@ -20,3 +20,27 @@
@lightRules();
}
}
+
+/**
+ * Apply a style to sidebar titles.
+ */
+.section-title() {
+ display: flex;
+ gap: 15px;
+ align-items: center;
+
+ h3 {
+ font-size: 20px;
+ }
+}
+
+/**
+ * Apply default item list style.
+ * @param {Length} @gap - The vertical spacing between elements (e.g., 10px, 1rem)
+ */
+.column-list(@gap: 10px) {
+ display: flex;
+ flex-direction: column;
+ gap: @gap;
+ align-items: center;
+}
diff --git a/templates/sheets/actors/character/effects.hbs b/templates/sheets/actors/character/effects.hbs
index 4c4fca27..30fb31f4 100644
--- a/templates/sheets/actors/character/effects.hbs
+++ b/templates/sheets/actors/character/effects.hbs
@@ -1,21 +1,23 @@