[Fix] selecting multiclass and multiple sheet issues (#1884)

* Fix error with adding multiclass

* Make it more card like

* Fix issues with responsiveness when resized

* Fix cards spilling out of container when multiple lines

* Remove mask and fix regression in scrollbar
This commit is contained in:
Carlos Fernandez 2026-05-15 03:23:55 -04:00 committed by GitHub
parent 855f4549ec
commit dd2aa10871
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 90 additions and 85 deletions

View file

@ -114,9 +114,6 @@
.card-preview-container {
flex: 1;
}
.card-preview-container {
border-color: light-dark(@dark-blue, @golden);
}

View file

@ -1,10 +1,5 @@
@import './attribution/sheet.less';
@import './level-up/navigation-container.less';
@import './level-up/selections-container.less';
@import './level-up/sheet.less';
@import './level-up/summary-container.less';
@import './level-up/tiers-container.less';
@import './level-up/footer.less';
@import './level-up/index.less';
@import './resource-dice/sheet.less';

View file

@ -0,0 +1,6 @@
@import './navigation-container.less';
@import './selections-container.less';
@import './summary-container.less';
@import './tiers-container.less';
@import './footer.less';
@import './sheet.less';

View file

@ -3,10 +3,7 @@
.daggerheart.levelup {
.levelup-selections-container {
overflow: auto;
padding: 10px 0;
max-height: 500px;
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
.achievement-experience-cards {
display: flex;
@ -43,20 +40,22 @@
.levelup-card-selection {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
height: 190px;
align-items: stretch;
.card-preview-container {
height: 100%;
height: 190px;
max-width: 200px;
}
.levelup-domains-selection-container {
display: flex;
flex-direction: column;
gap: 8px;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, minmax(0, 1fr));
height: 100%;
gap: 4px;
.levelup-domain-selection-container {
display: flex;
@ -64,6 +63,8 @@
align-items: center;
position: relative;
cursor: pointer;
overflow: hidden;
width: 93px;
&.disabled {
pointer-events: none;
@ -72,16 +73,20 @@
.levelup-domain-label {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
top: 4px;
background: grey;
padding: 0 12px;
border-radius: 6px;
padding: 2px 12px;
z-index: 2;
line-height: 1;
}
img {
height: 124px;
object-fit: cover;
width: auto;
height: auto;
&.svg {
filter: @beige-filter;
@ -90,17 +95,18 @@
.levelup-domain-selected {
position: absolute;
height: 54px;
width: 54px;
height: 40px;
width: 40px;
border-radius: 50%;
border: 2px solid;
font-size: var(--font-size-48);
border: 2px solid @golden;
font-size: var(--font-size-24);
display: flex;
align-items: center;
justify-content: center;
background-image: url(../assets/parchments/dh-parchment-light.png);
color: var(--color-dark-5);
top: calc(50% - 29px);
background: @dark-golden;
color: @golden;
top: 10px;
z-index: 2;
i {
position: relative;

View file

@ -11,9 +11,11 @@
});
.daggerheart.levelup {
.window-content {
max-height: 960px;
.tab.active {
flex: 1;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
}
div[data-application-part='form'] {
@ -22,15 +24,13 @@
gap: 8px;
}
section {
.section-container {
display: flex;
flex-direction: row;
justify-content: center;
gap: 20px 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.section-container {
display: flex;
flex-direction: row;
justify-content: center;
gap: 20px 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.levelup-footer {