jam/src/components/Send.css
Thebora Kompanioni fa131ca596
ui: small ui fixes (#201)
* ui: adapt info alert color to match figma more closely

* ui: adapt connection indicator icon to match figma more closely

* ui: better visibility of disabled input fields in dark-mode

* ui: reorder form fields on send page to match figma

* ui: default to sending as collaborative transaction

* ui: add icons to receive/withdraw buttons in CurrentWalletMagic

* review: use Send/Receive instead of Deposit/Withdraw

* fix: spacing on send screen

* fix: make collapsed accordion buttons visible in dark mode

Co-authored-by: Daniel <10026790+dnlggr@users.noreply.github.com>
2022-04-12 10:30:53 +02:00

124 lines
2.2 KiB
CSS

.send form input:not(.collaborators-selector input) {
height: 3.5rem;
width: 100%;
}
/* Chrome, Safari, Edge, Opera */
.send input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
.send input[type='number'] {
-moz-appearance: textfield;
}
.send form .button-sweep {
width: 6rem;
height: 2rem;
position: absolute;
top: 50%;
right: 0.75rem;
transform: translate(0%, -50%);
padding: 0.2rem 0.5rem;
}
:root[data-theme='dark'] .send form .button-sweep {
color: var(--bs-gray-800);
}
:root[data-theme='dark'] .send form .button-sweep:hover {
color: var(--bs-white);
}
.send form .button-sweep div {
display: flex;
align-items: center;
justify-content: center;
gap: 0.2rem;
padding-right: 0.2rem;
font-size: 0.9rem;
}
.send .sweep-breakdown {
font-size: 0.8rem;
}
.send .sweep-breakdown table {
color: var(--bs-black);
}
.send .sweep-breakdown table .balance-col {
text-align: right;
}
.send .sweep-breakdown .accordion-button {
background-color: transparent;
color: var(--bs-black);
font-size: 0.8rem;
height: 1rem;
padding: 0;
box-shadow: none;
}
.send .sweep-breakdown .accordion-button:hover {
text-decoration: underline;
}
.send .sweep-breakdown .accordion-button::after {
width: 0rem;
height: 0rem;
background-image: none;
}
.send .sweep-breakdown a {
font-size: 0.8rem;
color: var(--bs-black);
}
.send select {
height: 3.5rem;
width: 100%;
}
.send button {
height: 3rem;
width: 100%;
}
.collaborators-selector button {
min-width: 6rem;
flex: 1;
}
.collaborators-selector input {
min-width: 6rem;
flex: 1;
}
.collaborators-selector .d-flex {
gap: 0.5rem;
}
:root[data-theme='dark'] .send .sweep-breakdown table {
color: var(--bs-white);
}
:root[data-theme='dark'] .send .sweep-breakdown a {
color: var(--bs-white);
}
:root[data-theme='dark'] .send .sweep-breakdown p {
color: var(--bs-white);
}
:root[data-theme='dark'] .collaborators-selector input {
background-color: var(--bs-gray-800);
color: var(--bs-white);
}
:root[data-theme='dark'] .collaborators-selector .selected-dark {
background-color: var(--bs-gray-dark);
border-color: var(--bs-gray-dark) !important;
}