diff --git a/styles/daggerheart.css b/styles/daggerheart.css index faf53b95..ec100a38 100755 --- a/styles/daggerheart.css +++ b/styles/daggerheart.css @@ -3709,11 +3709,15 @@ div.daggerheart.views.multiclass { text-align: center; } .themed.theme-dark .application.sheet.dh-style .character-header-sheet .trait, -.themed.theme-dark.application.sheet.dh-style .character-header-sheet .trait { +.themed.theme-dark.application.sheet.dh-style .character-header-sheet .trait, +body.theme-dark .application .character-header-sheet .trait, +body.theme-dark.application .character-header-sheet .trait { background: url(../assets/svg/trait-shield.svg) no-repeat; } .themed.theme-light .application.sheet.dh-style .character-header-sheet .trait, -.themed.theme-light.application.sheet.dh-style .character-header-sheet .trait { +.themed.theme-light.application.sheet.dh-style .character-header-sheet .trait, +body.theme-light .application .character-header-sheet .trait, +body.theme-light.application .character-header-sheet .trait { background: url('../assets/svg/trait-shield-light.svg') no-repeat; } .application.sheet.daggerheart.actor.dh-style.character .character-header-sheet { @@ -3877,37 +3881,27 @@ div.daggerheart.views.multiclass { text-align: center; } .themed.theme-dark .application.sheet.dh-style .character-sidebar-sheet, -.themed.theme-dark.application.sheet.dh-style .character-sidebar-sheet { -.themed.theme-dark .application.sheet.dh-style .character-sidebar-sheet, -.themed.theme-dark.application.sheet.dh-style .character-sidebar-sheet { +.themed.theme-dark.application.sheet.dh-style .character-sidebar-sheet, +body.theme-dark .application .character-sidebar-sheet, +body.theme-dark.application .character-sidebar-sheet { background-image: url('../assets/parchments/dh-parchment-dark.png'); } .themed.theme-dark .application.sheet.dh-style .character-sidebar-sheet .experience-value, -.themed.theme-dark.application.sheet.dh-style .character-sidebar-sheet .experience-value { +.themed.theme-dark.application.sheet.dh-style .character-sidebar-sheet .experience-value, +body.theme-dark .application .character-sidebar-sheet .experience-value, +body.theme-dark.application .character-sidebar-sheet .experience-value { background: url(../assets/svg/experience-shield.svg) no-repeat; } .themed.theme-light .application.sheet.dh-style .character-sidebar-sheet, -.themed.theme-light.application.sheet.dh-style .character-sidebar-sheet { -.themed.theme-dark .application.sheet.dh-style .character-sidebar-sheet .experience-value, -.themed.theme-dark.application.sheet.dh-style .character-sidebar-sheet .experience-value { - background: url(../assets/svg/experience-shield.svg) no-repeat; -} -.themed.theme-light .application.sheet.dh-style .character-sidebar-sheet, -.themed.theme-light.application.sheet.dh-style .character-sidebar-sheet { +.themed.theme-light.application.sheet.dh-style .character-sidebar-sheet, +body.theme-light .application .character-sidebar-sheet, +body.theme-light.application .character-sidebar-sheet { background: transparent; } .themed.theme-light .application.sheet.dh-style .character-sidebar-sheet .experience-value, -.themed.theme-light.application.sheet.dh-style .character-sidebar-sheet .experience-value { - background: url('../assets/svg/experience-shield-light.svg') no-repeat; -} -.application.sheet.dh-style .character-sidebar-sheet { - width: 275px; - min-width: 275px; - border-right: 1px solid light-dark(#18162e, #f3c267); -} -.application.sheet.dh-style .character-sidebar-sheet .portrait { -.themed.theme-light .application.sheet.dh-style .character-sidebar-sheet .experience-value, -.themed.theme-light.application.sheet.dh-style .character-sidebar-sheet .experience-value { +.themed.theme-light.application.sheet.dh-style .character-sidebar-sheet .experience-value, +body.theme-light .application .character-sidebar-sheet .experience-value, +body.theme-light.application .character-sidebar-sheet .experience-value { background: url('../assets/svg/experience-shield-light.svg') no-repeat; } .application.sheet.dh-style .character-sidebar-sheet { @@ -3920,21 +3914,17 @@ div.daggerheart.views.multiclass { border-bottom: 1px solid light-dark(#18162e, #f3c267); cursor: pointer; } -.application.sheet.dh-style .character-sidebar-sheet .portrait img { .application.sheet.dh-style .character-sidebar-sheet .portrait img { height: 235px; width: 275px; object-fit: cover; } -.application.sheet.dh-style .character-sidebar-sheet .portrait .death-roll-btn { .application.sheet.dh-style .character-sidebar-sheet .portrait .death-roll-btn { display: none; } -.application.sheet.dh-style .character-sidebar-sheet .portrait.death-roll { .application.sheet.dh-style .character-sidebar-sheet .portrait.death-roll { filter: grayscale(1); } -.application.sheet.dh-style .character-sidebar-sheet .portrait.death-roll .death-roll-btn { .application.sheet.dh-style .character-sidebar-sheet .portrait.death-roll .death-roll-btn { display: flex; position: absolute; @@ -3943,11 +3933,9 @@ div.daggerheart.views.multiclass { font-size: 6rem; color: #efe6d8; } -.application.sheet.dh-style .character-sidebar-sheet .portrait.death-roll .death-roll-btn:hover { .application.sheet.dh-style .character-sidebar-sheet .portrait.death-roll .death-roll-btn:hover { text-shadow: 0 0 8px #efe6d8; } -.application.sheet.dh-style .character-sidebar-sheet .info-section { .application.sheet.dh-style .character-sidebar-sheet .info-section { position: relative; display: flex; @@ -3956,19 +3944,16 @@ div.daggerheart.views.multiclass { gap: 30px; margin-bottom: -10px; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section { display: flex; justify-content: space-evenly; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar { position: relative; width: 100px; height: 40px; justify-items: center; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-label { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-label { position: relative; top: 40px; @@ -3977,14 +3962,12 @@ div.daggerheart.views.multiclass { clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z'); background: light-dark(#18162e, #f3c267); } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-label h4 { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-label h4 { font-weight: bold; text-align: center; line-height: 18px; color: light-dark(#efe6d8, #18162e); } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value { position: absolute; display: flex; @@ -3998,7 +3981,6 @@ div.daggerheart.views.multiclass { z-index: 2; color: #efe6d8; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value input[type='number'] { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value input[type='number'] { background: transparent; font-size: 1.5rem; @@ -4009,7 +3991,6 @@ div.daggerheart.views.multiclass { outline: 2px solid transparent; color: #efe6d8; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value input[type='number'].bar-input { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value input[type='number'].bar-input { padding: 0; color: #efe6d8; @@ -4018,17 +3999,13 @@ div.daggerheart.views.multiclass { transition: all 0.3s ease; } .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value input[type='number'].bar-input:hover, -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value input[type='number'].bar-input:focus { -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value input[type='number'].bar-input:hover, .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value input[type='number'].bar-input:focus { background: rgba(24, 22, 46, 0.33); backdrop-filter: blur(9.5px); } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value .bar-label { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .status-value .bar-label { width: 40px; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar { position: absolute; appearance: none; @@ -4039,44 +4016,36 @@ div.daggerheart.views.multiclass { z-index: 1; background: #18162e; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar::-webkit-progress-bar { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar::-webkit-progress-bar { border: none; background: #18162e; border-radius: 6px; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar::-webkit-progress-value { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar::-webkit-progress-value { background: linear-gradient(15deg, #46140a 0%, #be0000 42%, #fcb045 100%); border-radius: 6px; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar.stress-color::-webkit-progress-value { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar.stress-color::-webkit-progress-value { background: linear-gradient(15deg, #823b01 0%, #fc8e45 65%, #be0000 100%); border-radius: 6px; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar::-moz-progress-bar { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar::-moz-progress-bar { background: linear-gradient(15deg, #46140a 0%, #be0000 42%, #fcb045 100%); border-radius: 6px; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar.stress-color::-moz-progress-bar { .application.sheet.dh-style .character-sidebar-sheet .info-section .resources-section .status-bar .progress-bar.stress-color::-moz-progress-bar { background: linear-gradient(15deg, #823b01 0%, #fc8e45 65%, #be0000 100%); border-radius: 6px; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .status-section { .application.sheet.dh-style .character-sidebar-sheet .info-section .status-section { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .status-section .status-number { .application.sheet.dh-style .character-sidebar-sheet .info-section .status-section .status-number { justify-items: center; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .status-section .status-number .status-value { .application.sheet.dh-style .character-sidebar-sheet .info-section .status-section .status-number .status-value { position: relative; display: flex; @@ -4092,19 +4061,16 @@ div.daggerheart.views.multiclass { background: light-dark(transparent, #18162e); z-index: 2; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .status-section .status-number .status-value.armor-slots { .application.sheet.dh-style .character-sidebar-sheet .info-section .status-section .status-number .status-value.armor-slots { width: 80px; height: 30px; } -.application.sheet.dh-style .character-sidebar-sheet .info-section .status-section .status-number .status-label { .application.sheet.dh-style .character-sidebar-sheet .info-section .status-section .status-number .status-label { padding: 2px 10px; width: 100%; border-radius: 3px; background: light-dark(#18162e, #f3c267); } -.application.sheet.dh-style .character-sidebar-sheet .info-section .status-section .status-number .status-label h4 { .application.sheet.dh-style .character-sidebar-sheet .info-section .status-section .status-number .status-label h4 { font-weight: bold; text-align: center; @@ -4112,54 +4078,44 @@ div.daggerheart.views.multiclass { font-size: 12px; color: light-dark(#efe6d8, #18162e); } -.application.sheet.dh-style .character-sidebar-sheet .items-sidebar-list { .application.sheet.dh-style .character-sidebar-sheet .items-sidebar-list { display: flex; flex-direction: column; gap: 5px; } -.application.sheet.dh-style .character-sidebar-sheet .items-sidebar-list .inventory-item { .application.sheet.dh-style .character-sidebar-sheet .items-sidebar-list .inventory-item { padding: 0 10px; } -.application.sheet.dh-style .character-sidebar-sheet .equipment-section .title { .application.sheet.dh-style .character-sidebar-sheet .equipment-section .title { display: flex; gap: 15px; align-items: center; } -.application.sheet.dh-style .character-sidebar-sheet .equipment-section .title h3 { .application.sheet.dh-style .character-sidebar-sheet .equipment-section .title h3 { font-size: 20px; } -.application.sheet.dh-style .character-sidebar-sheet .equipment-section .items-list { .application.sheet.dh-style .character-sidebar-sheet .equipment-section .items-list { display: flex; flex-direction: column; gap: 10px; align-items: center; } -.application.sheet.dh-style .character-sidebar-sheet .loadout-section .title { .application.sheet.dh-style .character-sidebar-sheet .loadout-section .title { display: flex; gap: 15px; align-items: center; } -.application.sheet.dh-style .character-sidebar-sheet .loadout-section .title h3 { .application.sheet.dh-style .character-sidebar-sheet .loadout-section .title h3 { font-size: 20px; } -.application.sheet.dh-style .character-sidebar-sheet .experience-section .title { .application.sheet.dh-style .character-sidebar-sheet .experience-section .title { display: flex; gap: 15px; align-items: center; } -.application.sheet.dh-style .character-sidebar-sheet .experience-section .title h3 { .application.sheet.dh-style .character-sidebar-sheet .experience-section .title h3 { font-size: 20px; } -.application.sheet.dh-style .character-sidebar-sheet .experience-section .experience-list { .application.sheet.dh-style .character-sidebar-sheet .experience-section .experience-list { display: flex; flex-direction: column; @@ -4168,7 +4124,6 @@ div.daggerheart.views.multiclass { margin-top: 10px; align-items: center; } -.application.sheet.dh-style .character-sidebar-sheet .experience-section .experience-list .experience-row { .application.sheet.dh-style .character-sidebar-sheet .experience-section .experience-list .experience-row { display: flex; gap: 5px; @@ -4176,7 +4131,6 @@ div.daggerheart.views.multiclass { align-items: center; justify-content: space-between; } -.application.sheet.dh-style .character-sidebar-sheet .experience-section .experience-list .experience-row input[type='text'] { .application.sheet.dh-style .character-sidebar-sheet .experience-section .experience-list .experience-row input[type='text'] { height: 32px; width: 180px; @@ -4187,11 +4141,9 @@ div.daggerheart.views.multiclass { transition: all 0.3s ease; color: light-dark(#222, #efe6d8); } -.application.sheet.dh-style .character-sidebar-sheet .experience-section .experience-list .experience-row input[type='text']:hover { .application.sheet.dh-style .character-sidebar-sheet .experience-section .experience-list .experience-row input[type='text']:hover { outline: 2px solid light-dark(#222, #efe6d8); } -.application.sheet.dh-style .character-sidebar-sheet .experience-section .experience-list .experience-value { .application.sheet.dh-style .character-sidebar-sheet .experience-section .experience-list .experience-value { height: 25px; width: 35px; @@ -4874,17 +4826,15 @@ div.daggerheart.views.multiclass { padding: 0 20px; } .themed.theme-dark .application.sheet.dh-style.environment, -.themed.theme-dark.application.sheet.dh-style.environment { -.themed.theme-dark .application.sheet.dh-style.environment, -.themed.theme-dark.application.sheet.dh-style.environment { +.themed.theme-dark.application.sheet.dh-style.environment, +body.theme-dark .application.environment, +body.theme-dark.application.environment { background-image: url('../assets/parchments/dh-parchment-dark.png'); } .themed.theme-light .application.sheet.dh-style.environment, -.themed.theme-light.application.sheet.dh-style.environment { - background: url('../assets/parchments/dh-parchment-light.png'); -} -.themed.theme-light .application.sheet.dh-style.environment, -.themed.theme-light.application.sheet.dh-style.environment { +.themed.theme-light.application.sheet.dh-style.environment, +body.theme-light .application.environment, +body.theme-light.application.environment { background: url('../assets/parchments/dh-parchment-light.png'); } .application.sheet.daggerheart.actor.dh-style.environment .tab { @@ -5377,17 +5327,15 @@ div.daggerheart.views.multiclass { background: url('../assets/svg/experience-shield-light.svg') no-repeat; } .themed.theme-dark .application.sheet.dh-style.companion, -.themed.theme-dark.application.sheet.dh-style.companion { -.themed.theme-dark .application.sheet.dh-style.companion, -.themed.theme-dark.application.sheet.dh-style.companion { +.themed.theme-dark.application.sheet.dh-style.companion, +body.theme-dark .application.companion, +body.theme-dark.application.companion { background-image: url('../assets/parchments/dh-parchment-dark.png'); } .themed.theme-light .application.sheet.dh-style.companion, -.themed.theme-light.application.sheet.dh-style.companion { - background: url('../assets/parchments/dh-parchment-light.png'); -} -.themed.theme-light .application.sheet.dh-style.companion, -.themed.theme-light.application.sheet.dh-style.companion { +.themed.theme-light.application.sheet.dh-style.companion, +body.theme-light .application.companion, +body.theme-light.application.companion { background: url('../assets/parchments/dh-parchment-light.png'); } .application.sheet.daggerheart.actor.dh-style.adversary .window-content { @@ -5560,6 +5508,24 @@ div.daggerheart.views.multiclass { font-family: 'Montserrat', sans-serif; opacity: 0.8; } +/** + * Applies theme-specific styles. + * @param {Rules} @darkRules - Styles to apply when `.theme-dark` is present + * @param {Rules} @lightRules - Styles to apply when `.theme-light` is present + */ +.themed.theme-dark .application.sheet.dh-style, +.themed.theme-dark.application.sheet.dh-style, +body.theme-dark .application, +body.theme-dark.application { + background: rgba(24, 22, 46, 0.33); + backdrop-filter: blur(9px); +} +.themed.theme-light .application.sheet.dh-style, +.themed.theme-light.application.sheet.dh-style, +body.theme-light .application, +body.theme-light.application { + background: url('../assets/parchments/dh-parchment-light.png') no-repeat center; +} .application.sheet.dh-style { border-radius: 10px; } @@ -5579,7 +5545,6 @@ div.daggerheart.views.multiclass { padding: 0; } .application.sheet.dh-style .window-header button:hover { - border-color: light-dark(#18162e, #f3c267); border-color: light-dark(#18162e, #f3c267); color: light-dark(#18162e, #f3c267); } @@ -5597,20 +5562,6 @@ div.daggerheart.views.multiclass { opacity: 0; transition-duration: 0.1s; } -.application.sheet.dh-style .window-content { - padding: 0; - position: relative; - top: -36px; - min-height: -webkit-fill-available; - transition: opacity 0.3s ease; -} -.application.sheet.dh-style .window-content .tab { - padding: 0 10px; -} -.application.sheet.dh-style.minimized .window-content { - opacity: 0; - transition-duration: 0.1s; -} .application.sheet.dh-style:not(.minimized) .window-title, .application.sheet.dh-style:not(.minimized) .window-icon { display: none; @@ -5620,25 +5571,18 @@ div.daggerheart.views.multiclass { .application.sheet.dh-style:not(.minimized) .window-content { opacity: 1; } -.themed.theme-dark .application.sheet.dh-style, -.themed.theme-dark.application.sheet.dh-style { - background: rgba(24, 22, 46, 0.33); - backdrop-filter: blur(9px); -} -.themed.theme-light .application.sheet.dh-style, -.themed.theme-light.application.sheet.dh-style { - background: url('../assets/parchments/dh-parchment-light.png') no-repeat center; -} .themed.theme-dark .application.sheet.dh-style.dialog, -.themed.theme-dark.application.sheet.dh-style.dialog { +.themed.theme-dark.application.sheet.dh-style.dialog, +body.theme-dark .application.dialog, +body.theme-dark.application.dialog { background-image: url('../assets/parchments/dh-parchment-dark.png'); background-repeat: no-repeat; background-position: center; } .themed.theme-light .application.sheet.dh-style.dialog, -.themed.theme-light.application.sheet.dh-style.dialog { -.themed.theme-light .application.sheet.dh-style.dialog, -.themed.theme-light.application.sheet.dh-style.dialog { +.themed.theme-light.application.sheet.dh-style.dialog, +body.theme-light .application.dialog, +body.theme-light.application.dialog { background-image: url('../assets/parchments/dh-parchment-light.png'); background-repeat: no-repeat; background-position: center;