style level up application (#632)

This commit is contained in:
Murilo Brito 2025-08-06 05:11:42 -03:00 committed by GitHub
parent a8862d40d2
commit d8187ac521
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 290 additions and 144 deletions

View file

@ -3,6 +3,7 @@
@import './level-up/sheet.less';
@import './level-up/summary-container.less';
@import './level-up/tiers-container.less';
@import './level-up/footer.less';
@import './resource-dice/sheet.less';

View file

@ -0,0 +1,19 @@
@import '../../utils/fonts.less';
.daggerheart.levelup {
.tab-footer {
margin-top: 10px;
.levelup-navigation-actions,
.levelup-footer {
display: flex;
justify-content: end;
gap: 10px;
button {
font-family: @font-body;
font-weight: bold;
height: 40px;
}
}
}
}

View file

@ -1,3 +1,6 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
.daggerheart.levelup {
.levelup-navigation-container {
display: flex;
@ -7,23 +10,18 @@
nav {
flex: 1;
border: none;
.levelup-tab-container {
display: flex;
align-items: center;
gap: 4px;
}
}
.levelup-navigation-actions {
width: 306px;
display: flex;
justify-content: end;
gap: 16px;
margin-right: 4px;
* {
width: calc(50% - 8px);
a,
span {
font-family: @font-body;
color: light-dark(@dark-blue, @golden);
}
}
}
}

View file

@ -1,18 +1,38 @@
@import '../../utils/fonts.less';
@import '../../utils/colors.less';
.daggerheart.levelup {
.levelup-selections-container {
overflow: auto;
padding: 10px 0;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
max-height: 500px;
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
.achievement-experience-cards {
display: flex;
gap: 8px;
.achievement-experience-card {
border: 1px solid;
border-radius: 4px;
padding-right: 4px;
font-size: 18px;
display: flex;
justify-content: space-between;
align-items: center;
background: light-dark(@dark-blue-40, @golden-40);
border-radius: 3px;
padding: 5px;
font-size: 16px;
gap: 4px;
width: 100%;
input {
background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
width: 80%;
}
span {
font-family: @font-body;
}
.achievement-experience-marker {
border: 1px solid;
@ -30,10 +50,13 @@
.levelup-card-selection {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
height: 190px;
.card-preview-container {
width: calc(100% * (1 / 5));
height: 100%;
max-width: 200px;
}
.levelup-domains-selection-container {
@ -89,10 +112,30 @@
}
}
.card-section {
flex: 1 1 100%;
.card-section-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 10px;
h3 {
font-family: @font-subtitle;
color: light-dark(@dark, @beige);
margin: 0;
white-space: nowrap;
}
}
}
.levelup-selections-title {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
font-weight: bold;
padding: 0 12px;
}
.levelup-radio-choices {

View file

@ -25,9 +25,11 @@
section {
.section-container {
display: flex;
flex-direction: column;
gap: 8px;
flex-direction: row;
justify-content: center;
gap: 20px 8px;
margin-top: 8px;
flex-wrap: wrap;
}
}

View file

@ -1,5 +1,28 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
.daggerheart.levelup {
.summary-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 10px;
h3 {
font-family: @font-subtitle;
color: light-dark(@dark, @beige);
margin: 0;
white-space: nowrap;
}
}
.levelup-summary-container {
overflow: auto;
padding: 10px 0;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
max-height: 700px;
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
.level-achievements-container,
.level-advancements-container {
display: flex;
@ -11,7 +34,7 @@
h4,
h5 {
margin: 0;
color: var(--color-text-secondary);
color: light-dark(@dark, @beige);
}
}
@ -19,7 +42,19 @@
display: flex;
align-items: center;
gap: 4px;
font-size: 20px;
font-size: 14px;
font-family: @font-body;
color: light-dark(@dark, @beige);
}
h5.summary-section {
display: flex;
align-items: center;
gap: 4px;
font-size: 16px;
font-family: @font-subtitle;
color: light-dark(@dark, @beige);
margin-bottom: 5px;
}
.summary-selection-container {
@ -28,9 +63,11 @@
.summary-selection {
border: 2px solid;
border-radius: 6px;
border-radius: 3px;
padding: 0 4px;
font-size: 18px;
font-size: 14px;
font-family: @font-body;
color: light-dark(@dark, @beige);
}
}
}

View file

@ -1,3 +1,6 @@
@import '../../utils/colors.less';
@import '../../utils/fonts.less';
.daggerheart.levelup {
.tiers-container {
display: flex;
@ -38,7 +41,7 @@
height: min-content;
&.multi {
border: 2px solid grey;
border: 2px solid light-dark(@dark-blue-40, @golden-40);
padding: 2.4px 2.5px 0;
border-radius: 4px;
gap: 2px;
@ -56,7 +59,8 @@
}
.checkbox-group-label {
font-size: 14px;
font-family: @font-body;
font-size: 12px;
font-style: italic;
}
}