mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-12 11:41:08 +01:00
style level up application (#632)
This commit is contained in:
parent
a8862d40d2
commit
d8187ac521
14 changed files with 290 additions and 144 deletions
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
19
styles/less/dialog/level-up/footer.less
Normal file
19
styles/less/dialog/level-up/footer.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue