add style to textarea element, add spellcasting and domain class into char sheet and move rest buttons to another place

styles/less/global/elements.less

@@ -5,22 +5,26 @@
     border: 1px solid light-dark(@dark-blue, @golden);
 
     input[type='text'],
-    input[type='number'] {
+    input[type='number'],
+    textarea {
         background: light-dark(transparent, transparent);
         border-radius: 6px;
         box-shadow: 0 4px 30px @soft-shadow;
         backdrop-filter: blur(9.5px);
         -webkit-backdrop-filter: blur(9.5px);
-        outline: none;
+        outline: 2px solid transparent;
         color: light-dark(@dark-blue, @golden);
         border: 1px solid light-dark(@dark, @beige);
+        transition: all 0.3s ease;
 
         &::placeholder {
             color: light-dark(@dark-40, @beige-50);
         }
 
+        &:hover,
         &:hover[type='text'],
         &:hover[type='number'],
+        &:focus,
         &:focus[type='text'],
         &:focus[type='number'] {
             background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
@@ -70,6 +74,13 @@
         }
     }
 
+    textarea {
+        color: light-dark(@dark, @beige);
+        font-family: @font-body;
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+    }
+
     button {
         background: light-dark(transparent, @golden);
         border: 1px solid light-dark(@dark-blue, @dark-blue);

styles/less/sheets-settings/adversary-settings/experiences.less

@@ -9,6 +9,12 @@
             margin-bottom: 12px;
         }
 
+        .experience-list {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+
         .experience-item {
             display: flex;
             flex-direction: column;

styles/less/sheets/actors/character/header.less

@@ -4,13 +4,25 @@
 
 // Theme header backgrounds
 .appTheme({
-    .character-header-sheet .trait {
+    .character-header-sheet {
+        .trait {
             background: url(../assets/svg/trait-shield.svg) no-repeat;
         }
+
+        .character-row .domains-section img {
+            filter: invert(88%) sepia(98%) saturate(1784%) hue-rotate(311deg) brightness(104%) contrast(91%);
+        }
+    }
 }, {
-    .character-header-sheet .trait {
+    .character-header-sheet {
+        .trait {
             background: url('../assets/svg/trait-shield-light.svg') no-repeat;
         }
+
+        .character-row .domains-section img {
+            filter: invert(87%) sepia(15%) saturate(343%) hue-rotate(333deg) brightness(110%) contrast(87%);
+        }
+    }
 });
 
 .application.sheet.daggerheart.actor.dh-style.character {
@@ -112,14 +124,27 @@
 
         .character-row {
             display: flex;
-            gap: 20px;
             align-items: center;
-            justify-content: space-between;
             padding: 0;
             margin-bottom: 15px;
 
+            .hope-section {
+                margin-right: 20px;
+            }
+
+            .downtime-section {
+                display: flex;
+                align-items: center;
+                gap: 2px;
+                margin-left: auto;
+
+                button {
+                    flex: 1;
+                }
+            }
+
             .hope-section,
-            .threshold-section {
+            .domains-section {
                 position: relative;
                 display: flex;
                 gap: 10px;
@@ -137,21 +162,24 @@
                     font-weight: bold;
                     text-transform: uppercase;
                     color: light-dark(@dark-blue, @golden);
-
-                    &.threshold-value {
-                        color: light-dark(@dark, @beige);
-                    }
                 }
 
-                .threshold-legend {
+                .domain {
-                    position: absolute;
+                    display: flex;
-                    bottom: -21px;
+                    align-items: center;
-                    color: light-dark(@golden, @dark-blue);
+                    gap: 5px;
-                    background-color: light-dark(@dark-blue, @golden);
+
-                    padding: 3px;
+                    .label {
-                    justify-self: anchor-center;
+                        font-size: 14px;
-                    border-radius: 0 0 3px 3px;
+                        font-weight: bold;
-                    text-transform: capitalize;
+                        text-transform: uppercase;
+                        color: light-dark(@dark-blue, @golden);
+                    }
+
+                    img {
+                        height: 20px;
+                        width: 20px;
+                    }
                 }
 
                 .hope-value {
@@ -198,15 +226,5 @@
                 }
             }
         }
-
-        .character-downtime-container {
-            display: flex;
-            align-items: center;
-            gap: 2px;
-
-            button {
-                flex: 1;
-            }
-        }
     }
 }

styles/less/sheets/actors/character/sidebar.less

@@ -55,6 +55,62 @@
                 }
             }
         }
+
+        .icons-list {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            align-items: end;
+            justify-content: center;
+            top: 45px;
+            right: 10px;
+
+            .spellcast-icon {
+                display: flex;
+                align-items: center;
+                justify-content: end;
+                text-align: center;
+                padding-right: 8px;
+                max-width: 50px;
+                height: 50px;
+                font-size: 1.2rem;
+                background: light-dark(@dark-blue-60, @dark-golden-80);
+                backdrop-filter: blur(8px);
+                border: 4px double light-dark(@beige, @golden);
+                color: light-dark(@beige, @golden);
+                border-radius: 999px;
+                transition: all 0.3s ease;
+
+                .spellcast-label {
+                    font-size: 14px;
+                    opacity: 0;
+                    margin-right: 0.3rem;
+                    transition: all 0.3s ease;
+                }
+
+                i {
+                    height: 24px;
+                    width: 24px;
+                    align-content: center;
+                    margin-right: 3px;
+                }
+
+                &:not(.no-label):hover {
+                    max-width: 300px;
+                    padding: 0 10px;
+                    border-radius: 60px;
+
+                    .spellcast-label {
+                        opacity: 1;
+                    }
+
+                    i {
+                        margin-right: 0px;
+                    }
+                }
+            }
+        }
     }
 
     .info-section {
@@ -62,12 +118,13 @@
         display: flex;
         flex-direction: column;
         top: -20px;
-        gap: 30px;
+        gap: 10px;
         margin-bottom: -16px;
 
         .resources-section {
             display: flex;
             justify-content: space-evenly;
+            margin-bottom: 20px;
 
             .status-bar {
                 display: flex;
@@ -345,6 +402,32 @@
                 }
             }
         }
+
+        .threshold-section {
+            position: relative;
+            display: flex;
+            align-self: center;
+            gap: 10px;
+            background-color: light-dark(transparent, @dark-blue);
+            color: light-dark(@dark-blue, @golden);
+            padding: 5px 10px;
+            border: 1px solid light-dark(@dark-blue, @golden);
+            border-radius: 6px;
+            align-items: center;
+            width: fit-content;
+            height: 30px;
+
+            h4 {
+                font-size: 14px;
+                font-weight: bold;
+                text-transform: uppercase;
+                color: light-dark(@dark-blue, @golden);
+
+                &.threshold-value {
+                    color: light-dark(@dark, @beige);
+                }
+            }
+        }
     }
 
     .items-sidebar-list {
@@ -360,7 +443,7 @@
     .shortcut-items-section {
         overflow-y: hidden;
         max-height: 56%;
-        padding-top: 16px;
+        padding-top: 10px;
         padding-bottom: 20px;
         mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
 
@@ -393,27 +476,10 @@
 
             .experience-row {
                 display: flex;
-                gap: 5px;
                 width: 250px;
                 align-items: center;
                 justify-content: space-between;
 
-                input[type='text'] {
-                    height: 32px;
-                    width: 180px;
-                    border: 1px solid transparent;
-                    outline: 2px solid transparent;
-                    font-size: 14px;
-                    font-family: @font-body;
-                    transition: all 0.3s ease;
-                    color: light-dark(@dark, @beige);
-
-                    &:hover {
-                        outline: 2px solid light-dark(@dark, @beige);
-                    }
-                }
-            }
-
                 .experience-value {
                     height: 25px;
                     width: 35px;
@@ -422,6 +488,12 @@
                     color: light-dark(@dark, @beige);
                     align-content: center;
                     text-align: center;
+                    margin-right: 5px;
+                }
+
+                .controls {
+                    margin-left: auto;
+                }
             }
         }
     }

templates/sheets-settings/character-settings/experiences.hbs

@@ -17,7 +17,6 @@
                         <input class="modifier" type="text" name="system.experiences.{{key}}.value" value="{{experience.value}}" data-dtype="Number" />
                         {{#unless @root.levelupAuto}}<a data-action="removeExperience" data-experience="{{key}}" data-tooltip="{{localize 'CONTROLS.CommonDelete'}}"><i class="fa-solid fa-trash"></i></a>{{/unless}}
                     </div>
-
                     <textarea name="system.experiences.{{key}}.description">{{experience.description}}</textarea>
                 </li>
             {{/each}}

templates/sheets/actors/character/header.hbs

@@ -85,12 +85,23 @@
                 </span>
             {{/times}}
         </div>
-        <div class="threshold-section">
+        {{#if document.system.class.value}}
-            <h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}</h4>
+            <div class="domains-section">
-            <h4 class="threshold-value">{{document.system.damageThresholds.major}}</h4>
+                {{#each document.system.class.value.system.domains as |domain|}}
-            <h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.major"}}</h4>
+                    <div class="domain">
-            <h4 class="threshold-value">{{document.system.damageThresholds.severe}}</h4>
+                        <span class="label">{{localize (concat 'DAGGERHEART.GENERAL.Domain.' domain '.label')}}</span>
-            <h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}</h4>
+                        <img src="{{concat 'systems/daggerheart/assets/icons/domains/' domain '.svg'}}" alt="">
+                    </div>
+                {{/each}}
+            </div>
+        {{/if}}
+        <div class="downtime-section">
+            <button type="button" data-action="useDowntime" data-type="shortRest" data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.Downtime.shortRest.title"}}">
+                <i class="fa-solid fa-utensils"></i>
+            </button>
+            <button type="button" data-action="useDowntime" data-type="longRest" data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.Downtime.longRest.title"}}">
+                <i class="fa-solid fa-bed"></i>
+            </button>
         </div>
     </div>
 
@@ -118,13 +129,5 @@
 
     {{#> 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs'}}
         <button data-action="openSettings" data-tooltip-text="{{localize "DAGGERHEART.UI.Tooltip.openSheetSettings"}}"><i class="fa-solid fa-wrench"></i></button>
-        <div class="character-downtime-container">
-            <button type="button" data-action="useDowntime" data-type="shortRest" data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.Downtime.shortRest.title"}}">
-                <i class="fa-solid fa-chair"></i>
-            </button>
-            <button type="button" data-action="useDowntime" data-type="longRest" data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.Downtime.longRest.title"}}">
-                <i class="fa-solid fa-bed"></i>
-            </button>
-        </div>
     {{/'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs'}}
 </header>

templates/sheets/actors/character/sidebar.hbs

@@ -1,6 +1,17 @@
 <aside class="character-sidebar-sheet">
     <div class="portrait {{#if isDeath}}death-roll{{/if}}">
         <img src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
+        {{#if document.system.class.subclass.system.spellcastingTrait}}
+            <div class="icons-list">
+                <span class="spellcast-icon {{#if isDeath}}no-label{{/if}}">
+                    <span class="spellcast-label">
+                        {{localize "DAGGERHEART.ITEMS.Subclass.spellcastingTrait"}}: 
+                        {{localize (concat 'DAGGERHEART.CONFIG.Traits.' document.system.class.subclass.system.spellcastingTrait '.short')}}
+                    </span>
+                    <i class="fa-solid fa-wand-sparkles"></i>
+                </span>
+            </div>
+        {{/if}}
         <a class="death-roll-btn" data-tooltip="DAGGERHEART.UI.Tooltip.makeDeathMove" {{#if
             isDeath}}data-action="makeDeathMove" {{/if}}><i class="fas fa-skull death-save"></i></a>
     </div>
@@ -87,6 +98,13 @@
                 </div>
             </div>
         </div>
+        <div class="threshold-section">
+            <h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}</h4>
+            <h4 class="threshold-value">{{document.system.damageThresholds.major}}</h4>
+            <h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.major"}}</h4>
+            <h4 class="threshold-value">{{document.system.damageThresholds.severe}}</h4>
+            <h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}</h4>
+        </div>
     </div>
 
     <div class="shortcut-items-section">
@@ -146,7 +164,7 @@
                         <div class="experience-value">
                             +{{experience.value}}
                         </div>
-                        <div>{{experience.name}}</div>
+                        <span>{{experience.name}}</span>
                         <div class="controls">
                             <a data-action="sendExpToChat" data-type="experience" data-id="{{id}}">
                                 <i class="fa-regular fa-message"></i>