badblocks/pkmntrade.club
1
1
Fork 0
Code Issues 14 Pull requests Projects 1 Releases Packages Wiki Activity

fix card_multiselect filtering and quantity controls

Browse source
This commit is contained in:
badblocks 2025-03-13 15:48:26 -07:00
parent 6e4c6040bd
commit b97ddde71c
52 changed files with 1689 additions and 2268 deletions
Download patch file Download diff file Expand all files Collapse all files

132
static/css/base.css
View file

@ -1,109 +1,49 @@
/* /* Helper classes
-------------------------------------------------- */
/* .min-width-fit-content {
min-width: fit-content;
} */
/* Sticky footer styles
-------------------------------------------------- */
/* html {
position: relative;
min-height: 100%;
font-size: 14px;
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
background-color: var(--color-neutral);
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
.choices[data-type*=select-one] .choices__input {
border-bottom: 1px solid var(--btn-shadow);
background-color: var(--color-base-100);
}
body {
margin-bottom: 60px; /* Margin bottom by footer height
.choices[data-type*=select-one] .choices__button:focus {
box-shadow: 0 0 0 2px #005F75;
}
.container {
max-width: 960px;
.choices__inner {
background-color: var(--color-base-100);
border: 1px solid var(--btn-shadow);
}
.pricing-header {
max-width: 700px;
.is-focused .choices__inner, .is-open .choices__inner {
border-color: var(--btn-shadow);
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here
line-height: 60px; /* Vertically center the text there
background-color: #f5f5f5;
} */
/* Trade Offer
-------------------------------------------------- */
.trade-offer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
.choices__list--multiple .choices__item {
background-color: var(--color-base-100);
border: 1px solid var(--btn-shadow);
color: var(--color-primary);
}
.trade-offer-cell {
display: flex;
flex-direction: column;
.choices__list--multiple .choices__item.is-highlighted {
background-color: var(--color-base-100);
border: 1px solid var(--btn-shadow);
}
.trade-offer-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
.is-disabled .choices__list--multiple .choices__item {
background-color: var(--color-neutral);
border: 1px solid var(--btn-shadow);
}
.trade-offer-header .avatar {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
.choices__list--dropdown, .choices__list[aria-expanded] {
background-color: var(--color-base-100);
border: 1px solid var(--btn-shadow);
}
.trade-offer-cards {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
border-color: var(--btn-shadow);
}
.bg-trade-offer {
background: linear-gradient(to right, var(--bs-gray-400) 50%, var(--bs-white) 50%);
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background-color: var(--color-base-100);
border: 1px solid var(--btn-shadow);
}
/* Card Badge
-------------------------------------------------- */
/* Responsive: On narrow viewports, stack the Has and Wants sections */
@media (max-width: 576px) {
.trade-offer-grid {
grid-template-columns: 1fr;
}
.choices__heading {
border-bottom: 1px solid var(--btn-shadow);
color: var(--color-neutral);
}
/* Fix for the remove item button */
button.select2-selection__choice__remove {
height: 100%;
}
/* Trade Offer Card Body with Vertical Separator
-------------------------------------------------- */
.trade-offer-body {
position: relative; /* Required for the absolute separator */
background-color: var(--bs-white); /* Use a single background color */
}
.trade-offer-body::before {
content: "";
position: absolute;
left: 50%; /* Centered horizontally */
transform: translateX(-50%);
top: 1rem; /* Gap from the top */
bottom: 1rem; /* Gap from the bottom */
width: 1px; /* The thickness of the separator */
background-color: var(--bs-gray-300); /* Color for the separator */
z-index: 1;
.choices__input {
background-color: var(--color-base-100);
}