.walletGrid { display: grid; grid-template-columns: repeat(auto-fill, 160px); grid-gap: 20px; padding: 20px 0; justify-content: center; } @media (max-width: 440px) { .walletGrid { grid-template-columns: repeat(auto-fill, 140px); grid-gap: 15px; } .card { width: 140px; } } @media (max-width: 330px) { .walletGrid { grid-template-columns: 100%; } .walletGrid > * { justify-self: center; } } .walletFilters { grid-column: 1 / -1; margin-left: 0.2rem; user-select: none; } .drag { opacity: 33%; } .drop { box-shadow: 0 0 10px var(--bs-info); } .card { width: 160px; max-width: 100%; aspect-ratio: 160 / 180; } .indicators { display: flex; align-items: center; column-gap: 0.2rem; margin-left: auto; padding: 10px; position: absolute; top: 0; right: 0; } .walletLogo { max-width: 100%; max-height: 40%; margin: auto; text-align: center; font-size: 1.5rem; line-height: 1; } .walletBanner { max-width: min(256px, 100vw); max-height: 100px; padding: 0 15px 1rem 15px; } .badge { color: var(--theme-grey) !important; background: var(--theme-clickToContextColor) !important; vertical-align: middle; margin-bottom: 0.1rem; margin-top: 0.1rem; margin-right: 0.2rem; } .receive { color: #20c997 !important; } .send { color: var(--bs-primary) !important; } .attach { color: var(--bs-body-color) !important; text-align: center; } .attach svg { fill: var(--bs-body-color) !important; margin-left: 0.5rem; } .indicator { width: 14px; height: 14px; } .indicator.success { color: var(--bs-green) !important; background-color: var(--bs-green) !important; border: 1px solid var(--bs-success); } .indicator.error { color: var(--bs-red) !important; background-color: var(--bs-red) !important; border: 1px solid var(--bs-danger); } .indicator.warning { color: var(--bs-orange) !important; background-color: var(--bs-orange) !important; border: 1px solid var(--bs-secondary); } .indicator.disabled { color: var(--theme-toolbarHover) !important; background-color: var(--theme-toolbarHover) !important; border: 1px solid var(--theme-toolbarActive); }