1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
market/src/global/_web3modal.css
Matthias Kretschmann a760935564
Add Portis wallet connection (#291)
* add portis

* library loading tinkering

* bump packages

* typings fix

* pip as addon

* remove setuptools

* revert typings fix

* modal styling

* show portis button

* provider name workaround

* for faulty getInjectedProviderName()
* fixes https://github.com/oceanprotocol/market/issues/332

* more usage of provider info object

* output respective wallet logos

* add network switcher for Portis

* add functionality

* prototype for portis network switching

* improve user experience when reconnecting to cached provider

* support mainnet only, leave networking switching code commented out
2021-01-29 13:40:54 +01:00

123 lines
2.4 KiB
CSS

div.web3modal-modal-lightbox,
div.walletconnect-qrcode__base {
background: var(--background-body-transparent);
backdrop-filter: blur(3px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
animation: fadeIn 0.2s ease-out backwards;
}
div.web3modal-modal-card {
border-radius: var(--border-radius);
padding: var(--spacer);
margin: var(--spacer) auto;
max-width: 100%;
border: 1px solid var(--border-color);
box-shadow: 0 6px 15px 0 var(--box-shadow-color);
animation: moveUp 0.2s ease-out backwards;
grid-template-columns: 1fr;
}
div.web3modal-provider-wrapper {
border: 0;
border-bottom: 1px solid var(--border-color);
padding: 0;
}
div.web3modal-provider-wrapper:last-child {
border-bottom: 0;
}
div.web3modal-provider-container {
border-radius: 0;
padding: var(--spacer);
}
@media (min-width: 40rem) {
div.web3modal-modal-card {
grid-template-columns: 1fr 1fr;
max-width: var(--break-point--small);
}
div.web3modal-provider-wrapper {
border-bottom: 0;
}
div.web3modal-provider-wrapper:nth-child(1),
div.web3modal-provider-wrapper:nth-child(2) {
border-bottom: 1px solid var(--border-color);
}
div.web3modal-provider-wrapper:nth-child(2n + 1) {
border-right: 1px solid var(--border-color);
}
}
div.web3modal-provider-icon {
filter: grayscale(1) contrast(150%);
transition: filter 0.2s ease-out;
}
div.web3modal-provider-wrapper:hover div.web3modal-provider-icon {
filter: none;
}
div.web3modal-provider-name {
font-size: var(--font-size-large);
font-weight: var(--font-weight-bold);
font-family: var(--font-family-heading);
}
div.web3modal-provider-description {
font-size: var(--font-size-base);
margin-top: 0;
}
div.walletconnect-modal__base {
background: var(--background-body);
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
box-shadow: 0 6px 17px 0 var(--box-shadow-color);
}
div.walletconnect-modal__header p {
color: var(--font-color-heading);
}
p.walletconnect-qrcode__text {
color: var(--color-secondary);
}
svg.walletconnect-qrcode__image path:first-child {
fill: var(--background-body);
}
svg.walletconnect-qrcode__image path:last-child {
stroke: var(--font-color-heading);
}
#torusIframe {
z-index: 3;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes moveUp {
from {
transform: translate3d(0, 1rem, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}