src/components/Header/Wallet/Details.module.css
.details {
padding: calc(var(--spacer) / 4);
padding-right: calc(var(--spacer) / 2);
min-width: 17rem;
}
@media (min-width: 40rem) {
.details {
padding: calc(var(--spacer) / 2);
margin-right: calc(var(--spacer) / 3);
min-width: 20rem;
}
}
.details > section[class*='feedback'] {
margin-top: calc(var(--spacer) / 2);
}
.balance {
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
white-space: nowrap;
}
.symbol {
width: 22%;
text-align: right;
font-weight: var(--font-weight-base);
font-size: var(--font-size-small);
display: inline-block;
margin-right: 0.4rem;
}
.value {
color: var(--font-color-text);
}
.conversion strong {
font-weight: var(--font-weight-base);
}
.actions {
border-top: 1px solid var(--border-color);
margin-top: calc(var(--spacer) / 2);
padding-top: calc(var(--spacer) / 2);
font-size: var(--font-size-small);
color: var(--color-secondary);
display: flex;
justify-content: space-between;
}
.walletLogoWrap {
display: block;
}
.actions p {
margin: 0;
}
.actions button,
.actions button:hover {
display: block;
font-size: var(--font-size-mini);
margin-top: calc(var(--spacer) / 3);
text-align: left;
}
.actions button:first-child {
margin-top: calc(var(--spacer) / 8);
}
.walletLogo {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin-right: calc(var(--spacer) / 8);
margin-top: -0.2rem;
}
.actions select {
margin-top: calc(var(--spacer) / 4);
min-width: 6rem;
}
.walletInfo {
display: flex;
flex-direction: column;
}
.walletInfo button {
margin-top: calc(var(--spacer) / 5) !important;
}
.addToken {
margin-left: 0.3rem;
}
.addToken svg path {
fill: var(--brand-violet);
}