cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-12 03:31:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Bug/251-light-theme-character-sheet (#257)

Browse source 
* FEAT: add appTheme mixin on less files

* FIX: bug, themed class only is added to sheet when have a theme what ovveride the world theme

* new css

---------

Co-authored-by: Joaquin Pereyra <joaquinpereyra98@users.noreply.github.com>
This commit is contained in:
joaquinpereyra98 2025-07-04 08:17:56 -03:00 • committed by GitHub
parent d071fadf7d
commit 064011fffa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 55 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

56
styles/daggerheart.css
View file

@ -3709,11 +3709,15 @@ div.daggerheart.views.multiclass {
text-align: center; 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 { .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; 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 { .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; background: url('../assets/svg/trait-shield-light.svg') no-repeat;
} }
.application.sheet.daggerheart.actor.dh-style.character .character-header-sheet { .application.sheet.daggerheart.actor.dh-style.character .character-header-sheet {
@ -3877,19 +3881,27 @@ div.daggerheart.views.multiclass {
text-align: center; 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,
body.theme-dark .application .character-sidebar-sheet,
body.theme-dark.application .character-sidebar-sheet {
background-image: url('../assets/parchments/dh-parchment-dark.png'); 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 { .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; 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 { .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; 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,
.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; background: url('../assets/svg/experience-shield-light.svg') no-repeat;
} }
.application.sheet.dh-style .character-sidebar-sheet { .application.sheet.dh-style .character-sidebar-sheet {
@ -4814,11 +4826,15 @@ div.daggerheart.views.multiclass {
padding: 0 20px; 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,
body.theme-dark .application.environment,
body.theme-dark.application.environment {
background-image: url('../assets/parchments/dh-parchment-dark.png'); 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,
.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'); background: url('../assets/parchments/dh-parchment-light.png');
} }
.application.sheet.daggerheart.actor.dh-style.environment .tab { .application.sheet.daggerheart.actor.dh-style.environment .tab {
@ -5311,11 +5327,15 @@ div.daggerheart.views.multiclass {
background: url('../assets/svg/experience-shield-light.svg') no-repeat; 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,
body.theme-dark .application.companion,
body.theme-dark.application.companion {
background-image: url('../assets/parchments/dh-parchment-dark.png'); 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,
.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'); background: url('../assets/parchments/dh-parchment-light.png');
} }
.application.sheet.daggerheart.actor.dh-style.adversary .window-content { .application.sheet.daggerheart.actor.dh-style.adversary .window-content {
@ -5494,12 +5514,16 @@ div.daggerheart.views.multiclass {
* @param {Rules} @lightRules - Styles to apply when `.theme-light` 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,
.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); background: rgba(24, 22, 46, 0.33);
backdrop-filter: blur(9px); backdrop-filter: blur(9px);
} }
.themed.theme-light .application.sheet.dh-style, .themed.theme-light .application.sheet.dh-style,
.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; background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;
} }
.application.sheet.dh-style { .application.sheet.dh-style {
@ -5548,13 +5572,17 @@ div.daggerheart.views.multiclass {
opacity: 1; opacity: 1;
} }
.themed.theme-dark .application.sheet.dh-style.dialog, .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-image: url('../assets/parchments/dh-parchment-dark.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; 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,
body.theme-light .application.dialog,
body.theme-light.application.dialog {
background-image: url('../assets/parchments/dh-parchment-light.png'); background-image: url('../assets/parchments/dh-parchment-light.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;

1
styles/less/actors/companion/sheet.less
View file

@ -1,5 +1,4 @@
// Theme header backgrounds // Theme header backgrounds
.appTheme({ .appTheme({
&.companion { &.companion {
background-image: url('../assets/parchments/dh-parchment-dark.png'); background-image: url('../assets/parchments/dh-parchment-dark.png');

22
styles/less/utils/mixin.less
View file

@ -4,15 +4,19 @@
* @param {Rules} @lightRules - Styles to apply when `.theme-light` is present * @param {Rules} @lightRules - Styles to apply when `.theme-light` is present
*/ */
.appTheme(@darkRules, @lightRules) { .appTheme(@darkRules, @lightRules) {
.themed { // Dark theme selectors
&.theme-dark .application.sheet.dh-style, .themed.theme-dark .application.sheet.dh-style,
&.theme-dark.application.sheet.dh-style { .themed.theme-dark.application.sheet.dh-style,
@darkRules(); body.theme-dark .application,
} body.theme-dark.application {
@darkRules();
}
&.theme-light .application.sheet.dh-style, // Light theme selectors
&.theme-light.application.sheet.dh-style { .themed.theme-light .application.sheet.dh-style,
@lightRules(); .themed.theme-light.application.sheet.dh-style,
} body.theme-light .application,
body.theme-light.application {
@lightRules();
} }
} }