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

Decentraland's UI components and styles

.dui-chain-icon {
  min-width: 28px;
  height: 28px;
}

.dui-chain-selector__modal .ethereum,
.dui-chain-selector__button .ethereum {
  background-image: url('../../assets/6fc36cd396ba9f47.svg');
}

.dui-chain-selector__modal .bsc,
.dui-chain-selector__button .bsc {
  background-image: url('../../assets/2bb1eda4abde747b.svg');
}

.dui-chain-selector__modal .optimism,
.dui-chain-selector__button .optimism {
  background-image: url('../../assets/93c9e021d08ebd29.svg');
}

.dui-chain-selector__modal .polygon,
.dui-chain-selector__button .polygon {
  background-image: url('../../assets/b60869efa9cf4f8c.svg');
}

.dui-chain-selector__modal .fantom,
.dui-chain-selector__button .fantom {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E.cls-1 %7B fill: %23fff%3B fill-rule: evenodd%3B %7D .cls-2 %7B fill: %2313b5ec%3B %7D .cls-3 %7B mask: url%28%23mask%29%3B %7D%3C/style%3E%3Cmask id='mask' x='10' y='6' width='93.1' height='20' maskUnits='userSpaceOnUse'%3E%3Cg id='a'%3E%3Cpath class='cls-1' d='M10%2C6h93.1V26H10Z'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Ctitle%3Efa%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Ccircle class='cls-2' cx='16' cy='16' r='16'/%3E%3Cg class='cls-3'%3E%3Cpath class='cls-1' d='M17.2%2C12.9l3.6-2.1V15Zm3.6%2C9L16%2C24.7l-4.8-2.8V17L16%2C19.8%2C20.8%2C17ZM11.2%2C10.8l3.6%2C2.1L11.2%2C15Zm5.4%2C3.1L20.2%2C16l-3.6%2C2.1Zm-1.2%2C4.2L11.8%2C16l3.6-2.1Zm4.8-8.3L16%2C12.2%2C11.8%2C9.8%2C16%2C7.3ZM10%2C9.4V22.5l6%2C3.4%2C6-3.4V9.4L16%2C6Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.dui-chain-selector__modal .arbitrum,
.dui-chain-selector__button .arbitrum {
  background-image: url('../../assets/81ac9d1ac3d6324c.svg');
}

.dui-chain-selector__modal .avalanche,
.dui-chain-selector__button .avalanche {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 507.2 507.2'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23e84142%3B%7D.cls-2%7Bfill:%23fff%3B%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eavalanche-avax%3C/title%3E%3Ccircle class='cls-1' cx='253.6' cy='253.6' r='253.6'/%3E%3Cpath class='cls-2' d='M343.06%2C260.19c8.79-15.18%2C23-15.18%2C31.75%2C0l54.71%2C96.05c8.79%2C15.17%2C1.6%2C27.55-16%2C27.55H303.32c-17.37%2C0-24.56-12.38-16-27.55ZM237.23%2C75.28c8.78-15.17%2C22.76-15.17%2C31.55%2C0l12.18%2C22%2C28.75%2C50.52a52.46%2C52.46%2C0%2C0%2C1%2C0%2C45.72L213.26%2C360.63a50.66%2C50.66%2C0%2C0%2C1-39.53%2C23.16H93.65c-17.57%2C0-24.76-12.18-16-27.55Z'/%3E%3C/svg%3E");
}

.ui.button.dui-chain-selector__button {
  display: flex;
  align-items: center;
  border-radius: 14px;
  padding: 8px 10px;
}

.dui-chain-selector__element.dui-chain-selector__element-selected {
  background-color: var(--navbar-popup-hover);
}

.ui.button.dui-chain-selector__button .dui-chain-icon {
  margin-right: 8px;
}

.dui-chain-selector__list {
  padding-left: 0;
}

.dui-chain-selector__element {
  background: none;
  border-radius: 12px;
  display: flex;
  cursor: pointer;
  align-items: center;
  margin: 8px 0;
  height: 40px;
  padding: 6px 8px;
  border: none;
  color: white;
  width: 100%;
  text-wrap: nowrap;
}

.dui-chain-selector__element:hover {
  background-color: var(--navbar-popup-hover);
}

.dui-chain-selector__element .dui-chain-icon {
  margin-right: 8px;
}

.dui-chain-selector__modal.ui.modal {
  width: 360px;
}

.dui-chain-selector__modal.ui.modal .content {
  margin: 20px;
}

.selector__button-connected {
  font-size: 14px;
  margin-left: auto;
  text-wrap: wrap;
}

.selector__button-connected-circle {
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--rare);
  margin-left: 8px;
}

.selector__button-confirm-circle {
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--unique);
  margin-left: 8px;
}

@media screen and (max-width: 991px) {
  .ui.button.dui-chain-selector__button {
    min-width: 50px;
  }

  .ui.button.dui-chain-selector__button .dui-chain-icon {
    margin-right: 0;
  }
}

@media screen and (max-width: 768px) {
  .dui-chain-selector__modal.ui.modal .content {
    margin: 0;
  }
}