FEAT: add appTheme mixin on less files (#256)

Co-authored-by: Joaquin Pereyra <joaquinpereyra98@users.noreply.github.com>
This commit is contained in:
joaquinpereyra98 2025-07-03 18:26:03 -03:00 committed by GitHub
parent cae659b9a5
commit 122621a57a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 472 additions and 449 deletions

View file

@ -1,21 +1,19 @@
@import '../utils/colors.less';
@import '../utils/fonts.less';
.theme-light {
.application.dialog.dh-style {
background-image: url('../assets/parchments/dh-parchment-light.png');
background-repeat: no-repeat;
background-position: center;
}
}
.theme-dark {
.application.dialog.dh-style {
.appTheme({
&.dialog {
background-image: url('../assets/parchments/dh-parchment-dark.png');
background-repeat: no-repeat;
background-position: center;
}
}
}, {
&.dialog {
background-image: url('../assets/parchments/dh-parchment-light.png');
background-repeat: no-repeat;
background-position: center;
}
});
.application.dialog.dh-style {
border: none;

View file

@ -1,91 +1,70 @@
@import '../utils/colors.less';
@import '../utils/fonts.less';
@import '../utils/mixin.less';
.application.sheet.dh-style .window-header {
background: transparent;
border-bottom: none;
justify-content: end;
// Theme handling
.appTheme({
background: @semi-transparent-dark-blue;
backdrop-filter: blur(9px);
}, {
background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;
});
h1 {
color: light-dark(@dark-blue, @beige);
font-family: @font-body;
}
button {
background: light-dark(transparent, @deep-black);
color: light-dark(@dark-blue, @beige);
border: 1px solid light-dark(@dark-blue, transparent);
padding: 0;
&:hover {
border: 1px solid light-dark(@dark-blue, @golden);
color: light-dark(@dark-blue, @golden);
}
}
}
.application.sheet.dh-style:not(.minimized) {
.window-title,
.window-icon {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
}
.application.sheet.dh-style.minimized {
.window-content {
opacity: 0;
transition: opacity 0.1s ease;
}
}
.application.sheet.dh-style:not(.minimized) {
.window-content {
opacity: 1;
transition: opacity 0.3s ease;
}
}
.theme-dark {
.application.sheet.dh-style {
background: @semi-transparent-dark-blue;
backdrop-filter: blur(9px);
}
}
.theme-light {
.application.sheet.dh-style {
background-image: url('../assets/parchments/dh-parchment-light.png');
background-repeat: no-repeat;
background-position: center;
}
}
.application.sheet.daggerheart.dh-style {
.application.sheet.dh-style {
border-radius: 10px;
// Window header styles
.window-header {
background: transparent;
border-bottom: none;
justify-content: end;
h1 {
color: light-dark(@dark-blue, @beige);
font-family: @font-body;
}
button {
background: light-dark(transparent, @deep-black);
color: light-dark(@dark-blue, @beige);
border: 1px solid light-dark(@dark-blue, transparent);
padding: 0;
&:hover {
border-color: light-dark(@dark-blue, @golden);
color: light-dark(@dark-blue, @golden);
}
}
}
// Window content transitions
.window-content {
padding: 0;
position: relative;
top: -36px;
min-height: -webkit-fill-available;
transition: opacity 0.3s ease;
.tab {
padding: 0 10px;
}
}
}
.application.sheet.daggerheart.character.dh-style {
border-radius: 10px;
// Minimized states
&.minimized .window-content {
opacity: 0;
transition-duration: 0.1s;
}
.window-content {
position: absolute;
top: 0;
.tab {
padding: 0 15px;
overflow-y: hidden;
&:not(.minimized) {
.window-title,
.window-icon {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.window-content {
opacity: 1;
}
}
}