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

Decentraland's UI components and styles

.dcl.footer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: var(--footer-height);
  margin-top: var(--footer-margin-top);
}

.dcl.footer.fullscreen {
  margin-top: 0px;
}

.dcl.footer .main-footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height: 20px;
}

.dcl.footer .main-footer .links {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.dcl.footer .main-footer .links a {
  color: var(--secondary-text);
  font-weight: normal;
  margin-left: 16px;
  margin-bottom: 8px;
}

.dcl.footer .secondary-footer {
  display: flex;
}

.dcl.footer .social-links {
  margin-right: 24px;
}

.dcl.footer .social-links .social-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: var(--secondary-text);
  background-repeat: no-repeat;
  background-position: center;
  background-clip: content-box;
}

.dcl.footer .social-links .social-icon:hover {
  color: var(--primary);
}

.dcl.footer .social-links a + a {
  margin-left: 26px;
}

.dcl.footer .social-links .social-icon.discord {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-1-3h20v20H-1z'/%3E%3Cpath fill='%23676370' fill-rule='nonzero' d='M6.546.778c-.235 0-2.185.056-4.241 1.584 0 0-2.194 3.946-2.194 8.805 0 0 1.28 2.194 4.646 2.3 0 0 .564-.67 1.021-1.249-1.935-.578-2.666-1.782-2.666-1.782s.153.107.427.26c.015 0 .03.014.06.03.046.03.092.045.138.076.38.213.761.38 1.112.518.624.259 1.37.487 2.24.655 1.142.213 2.482.29 3.945.015a10.925 10.925 0 0 0 2.209-.655 8.717 8.717 0 0 0 1.751-.899s-.761 1.234-2.757 1.798c.457.563 1.006 1.218 1.006 1.218 3.366-.106 4.646-2.3 4.646-2.285 0-4.86-2.194-8.805-2.194-8.805C13.517.732 11.43.778 11.43.778l-.213.244c2.59.777 3.793 1.92 3.793 1.92a12.664 12.664 0 0 0-4.586-1.448 12.89 12.89 0 0 0-3.077.03c-.091 0-.167.016-.259.03-.533.062-1.828.245-3.458.96-.564.244-.899.427-.899.427s1.25-1.203 3.992-1.98L6.57.778h-.024zM6.16 6.399c.868 0 1.569.747 1.554 1.676 0 .93-.686 1.676-1.554 1.676-.853 0-1.554-.747-1.554-1.676 0-.93.686-1.676 1.554-1.676zm5.56 0c.853 0 1.554.747 1.554 1.676 0 .93-.685 1.676-1.554 1.676-.853 0-1.554-.747-1.554-1.676 0-.93.686-1.676 1.554-1.676z'/%3E%3C/g%3E%3C/svg%3E");
}

.dcl.footer .social-links .social-icon.reddit {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='17' viewBox='0 0 19 17'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-.333-1h20v20h-20z'/%3E%3Cpath fill='%23676370' fill-rule='nonzero' d='M18.556 8.532c0 .417-.084.75-.333 1.084a1.633 1.633 0 0 1-.747.75c.083.334.083.584.083.918 0 1-.333 2-1.08 2.834-.665.834-1.662 1.585-2.825 2.085-1.163.5-2.492.75-3.987.75-1.413 0-2.742-.25-3.905-.75-1.246-.5-2.16-1.167-2.824-2.085-.665-.833-1.08-1.834-1.08-2.834 0-.334 0-.584.083-.918-.332-.166-.582-.416-.83-.75C.943 9.283.777 8.95.777 8.532c0-.5.166-1 .581-1.417.416-.417.831-.584 1.413-.584.581 0 .996.167 1.412.584 1.412-1 3.157-1.501 5.067-1.584L10.414.36c0-.083.083-.167.166-.167.084-.083.167-.083.25-.083l3.655.834c.083-.25.332-.417.498-.584.25-.167.499-.25.748-.25.415 0 .748.167 1.08.417.25.25.415.667.415 1.084 0 .417-.166.75-.415 1.084-.25.333-.665.417-1.08.417-.415 0-.748-.167-1.08-.417-.25-.25-.415-.667-.415-1.084l-3.323-.75-.997 4.669c1.994.083 3.655.583 5.15 1.584.416-.417.831-.584 1.413-.584.581 0 .997.167 1.412.584.498.417.665.917.665 1.417zM5.015 10.533c0 .417.166.75.415 1.084.25.334.664.417 1.08.417.415 0 .748-.167 1.08-.417.249-.25.415-.667.415-1.084 0-.417-.166-.75-.415-1.084-.25-.25-.665-.417-1.08-.417-.416 0-.748.167-.997.417-.25.25-.498.667-.498 1.084zm7.975 3.502c.083-.083.083-.167.083-.25 0-.083 0-.167-.083-.25-.083-.084-.167-.084-.25-.084-.083 0-.166 0-.249.084-.249.25-.664.5-1.163.583-.498.167-1.08.167-1.578.167-.499 0-1.08-.083-1.579-.167-.498-.166-.913-.333-1.163-.583-.083-.084-.166-.084-.249-.084-.083 0-.166 0-.25.084-.082.083-.082.167-.082.25 0 .083 0 .167.083.25.25.25.664.5 1.163.667.498.167.914.25 1.246.334.332 0 .582.083.914.083.332 0 .581 0 .914-.083.332 0 .747-.167 1.246-.334.332-.167.747-.333.997-.667zm0-2.001c.415 0 .747-.167 1.08-.417.332-.25.415-.667.415-1.084 0-.417-.166-.75-.415-1a1.53 1.53 0 0 0-.997-.417c-.416 0-.748.167-1.08.417-.25.25-.416.667-.416 1.084 0 .416.167.75.416 1.083.249.167.581.334.997.334z'/%3E%3C/g%3E%3C/svg%3E");
}

.dcl.footer .social-links .social-icon.github {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-2.667-2h20v20h-20z'/%3E%3Cpath fill='%23676370' fill-rule='nonzero' d='M9.963 11.928V15.57c0 .174 0 .26-.177.174H6.067c-.177 0-.177-.087-.177-.174v-1.647c0-.087.089-.174-.088-.174h-.266a4.387 4.387 0 0 1-1.505 0c-.885-.26-1.505-.693-1.86-1.56a8.574 8.574 0 0 0-.973-1.475c-.089-.173-.354-.173-.443-.346-.088-.087-.088-.087-.088-.174s.088-.087.177-.087c.797-.086 1.416.347 1.77.954.355.607.886 1.04 1.506 1.214.53.087.973.087 1.505-.086.088 0 .177-.087.177-.26 0-.52.177-.954.531-1.388-.177 0-.266-.087-.354-.087A4.213 4.213 0 0 1 3.677 9.5 3.685 3.685 0 0 1 2.26 7.246a11.937 11.937 0 0 1 0-2.515c.089-.607.266-1.214.709-1.734.177-.173.177-.26.088-.52-.265-.694-.177-1.388.089-2.081 0-.174.088-.174.265-.174.532.174.974.434 1.328.78.177.174.354.347.532.608.088.086.088.086.177 0 .265-.26.62-.26.974-.347a8.773 8.773 0 0 1 3.01 0c.354.086.708.086.974.347.177.086.177.086.265-.087.266-.347.62-.694.974-.954.266-.173.531-.26.797-.347.089 0 .177 0 .266.087.265.78.354 1.474 0 2.254 0 .087-.089.174 0 .26.53.434.708 1.041.796 1.648.089.78.177 1.561.089 2.341-.177 1.301-.885 2.342-2.036 2.949-.089 0-.089 0-.089.086 0 0-.088 0-.088.087-.089 0-.178.087-.266.087h-.089c-.088 0-.088 0-.088.086h-.089a.684.684 0 0 0-.442.174h-.089c-.088 0-.265 0-.354.087H9.52c-.088 0 0 .086 0 .086 0 .087 0 .087.089.087 0 .087.088.087.088.173 0 .087 0 .174.089.26v.087c0 .087 0 .26.088.347v.26c.089.174.089.174.089.26z'/%3E%3C/g%3E%3C/svg%3E");
}

.dcl.footer .social-links .social-icon.twitter {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' enable-background='new 0 0 72 72' viewBox='0 0 72 72'%3E%3Cswitch%3E%3Cg fill='%23676370' class='color000000 svgShape'%3E%3Cpath d='M42.5%2C31.2L66%2C6h-6L39.8%2C27.6L24%2C6H4l24.6%2C33.6L4%2C66 h6l21.3-22.8L48%2C66h20L42.5%2C31.2z M12.9%2C10h8l38.1%2C52h-8L12.9%2C10z' fill='%23676370' class='color000000 svgShape'/%3E%3C/g%3E%3C/switch%3E%3C/svg%3E");
}

.dcl.footer .copyright {
  color: var(--secondary-text);
}

@media (max-width: 1300px) {
  .dcl.footer {
    flex-flow: column nowrap;
    margin-bottom: 12px;
  }

  .dcl.footer .main-footer {
    margin-bottom: 12px;
  }
}

@media (max-width: 1024px) {
  .dcl.footer {
    flex-flow: column nowrap;
    justify-content: center;
    margin-bottom: 48px;
    height: auto;
  }

  .dcl.footer .main-footer {
    margin-bottom: 48px;
    height: auto;
  }

  .dcl.footer .social-links {
    margin-right: 0px;
  }

  .dcl.footer .social-links {
    margin-bottom: 12px;
  }

  .dcl.footer .dcl.language-dropdown {
    margin-bottom: 18px;
  }

  .dcl.footer .secondary-footer {
    flex-flow: column;
    align-items: center;
  }

  .dcl.footer.fullscreen {
    padding: 20px 0px;
  }
}

@media (max-width: 768px) {
  .dcl.footer {
    margin-top: var(--footer-margin-top);
    padding-bottom: 80px;
  }
  .dcl.footer.fullscreen {
    padding: var(--footer-margin-top) 0px;
  }
}