decentraland-ui/dist/components/BuyManaWithFiatModal/BuyManaWithFiatModal.css

Decentraland's UI components and styles

.dcl.buy-mana-with-fiat-modal {
  max-width: 520px;
}

.dcl.buy-mana-with-fiat-modal .dcl.modal-navigation {
  padding: 40px 80px 0px 80px;
}

.dcl.buy-mana-with-fiat-modal
  .dcl.modal-navigation
  .dcl.modal-navigation-title {
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
}

.dcl.buy-mana-with-fiat-modal
  .dcl.modal-navigation
  .dcl.modal-navigation-subtitle {
  color: var(--text);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
}

.dcl.buy-mana-with-fiat-modal .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 32px 24px 34px;
}

.dcl.buy-mana-with-fiat-modal .dcl.option {
  min-width: 392px;
  width: 100%;
  box-shadow: var(--shadow-1);
  border-radius: 8px;
  border: var(--outline);
  background-color: var(--card-on-modal);
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.dcl.buy-mana-with-fiat-modal .dcl.option:hover {
  background-color: var(--secondary-on-modal-hover);
}

.dcl.buy-mana-with-fiat-modal .dcl.option .image {
  flex: none;
  width: 48px;
  height: 48px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.dcl.buy-mana-with-fiat-modal .dcl.option.matic .image {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24Z' fill='%23242129'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 14L34 24L24 34L14 24L24 14ZM24 16.8L31.2 24L24 31.2L16.8 24L24 16.8ZM24 27.6C24.9548 27.6001 25.8705 27.2209 26.5457 26.5459C27.2209 25.8708 27.6003 24.9552 27.6004 24.0004C27.6005 23.0456 27.2213 22.1299 26.5463 21.4547C25.8712 20.7795 24.9556 20.4001 24.0008 20.4C23.0461 20.4 22.1304 20.7793 21.4552 21.4544C20.7801 22.1295 20.4008 23.0452 20.4008 24C20.4008 24.9548 20.7801 25.8705 21.4552 26.5456C22.1304 27.2207 23.0461 27.6 24.0008 27.6H24Z' fill='white'/%3E%3C/svg%3E");
}

.dcl.buy-mana-with-fiat-modal .dcl.option.ethereum .image {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24Z' fill='%23242129'/%3E%3Cpath d='M29.4048 23.9534C29.4048 21.0629 26.992 18.662 24 18.662C21.008 18.662 18.5952 21.0629 18.5952 23.9534C18.5952 26.8205 21.008 29.1515 24 29.1515C26.992 29.1515 29.4048 26.8205 29.4048 23.9534ZM28.1501 23.9534C28.1501 26.1445 26.1233 27.9394 24 27.9394C21.6595 27.9394 19.8499 26.1911 19.8499 23.9534C19.8499 21.7389 21.6595 19.8741 24 19.8741C26.1475 19.8741 28.1501 21.7389 28.1501 23.9534ZM33 29.0117V18.9883L24 14L15 18.9883V29.0117L24 34L33 29.0117ZM31.4075 28.1492L24.0241 32.2284L16.5925 28.1492V19.9207L24 15.7716L31.4075 19.9207V28.1492Z' fill='%23FF2D55'/%3E%3C/svg%3E");
}

.dcl.buy-mana-with-fiat-modal .dcl.option .info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-left: 16px;
}

.dcl.buy-mana-with-fiat-modal .dcl.option .info .cta {
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  color: var(--text);
}

.dcl.buy-mana-with-fiat-modal .dcl.option .info .ctaSubtitle {
  color: var(--text);
  margin-top: 4px;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 24px;
}

.dcl.buy-mana-with-fiat-modal .dcl.option + .dcl.option {
  margin-top: 16px;
}

.dcl.buy-mana-with-fiat-modal .message {
  margin-top: 28px;
  text-align: center;
  display: block;
  color: var(--secondary-text);
  line-height: 1.5;
  opacity: 0.9;
}

.dcl.buy-mana-with-fiat-modal .error {
  opacity: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--primary);
  margin: 20px 0;
  text-align: center;
}

.dcl.buy-mana-with-fiat-modal .error.visible {
  transition: opacity 0.25s ease;
  opacity: 1;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
}

.dcl.buy-mana-with-fiat-modal .loader-background {
  height: 100%;
  width: 100%;
  background-color: var(--background);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}