profile-picture-generator/src/style.css

FridaysForFuture profile picture generator

.fff-profile-picture-generator {
  max-width: 350px;
}

.fff-profile-picture-generator--button {
  display: flex;
  background-color: #1da64a !important;
  border-radius: 4px;
  color: #fff !important;
  font-family: "jost-semi", sans-serif;
  cursor: pointer;
  margin: 10px 0;
  text-decoration: inherit;
  text-align: center;
  flex-grow: 1;
  min-height: 32px;
  justify-content: center;
  flex-direction: column;
}

.fff-profile-picture-generator--language-select {
  display: block;
  padding: 6.5px 8px !important;
  background-color: #1da64a !important;
  border-radius: 4px;
  color: #fff;
  font-family: "jost-semi", sans-serif;
  cursor: pointer;
  margin: 10px 0;
  text-decoration: inherit;
  text-align: center;
  text-align-last: center;
  margin-right: 5px;
}

.fff-profile-picture-generator--button-group {
  display: flex;
  margin-bottom: 27px;
}

.fff-profile-picture-generator--dropdown {
  position: relative;
  margin-left: 5px;
  height: 32px;
  width: 32px;
  max-width: 32px;
}

.fff-profile-picture-generator--dropdown label {
  display: flex;
  justify-content: center;
}

.fff-profile-picture-generator--dropdown-menu {
  display: none;
  visibility: hidden;
  position: absolute;
  width: 28px;
  height: 100px;
  margin-top: calc(100px + 32px + 5px);
  -webkit-appearance: slider-vertical;
}

.fff-profile-picture-generator--dropdown:hover > .fff-profile-picture-generator--dropdown-menu,
.fff-profile-picture-generator--dropdown:focus-within > .fff-profile-picture-generator--dropdown-menu,
.fff-profile-picture-generator--dropdown-menu:hover {
  display: block;
  visibility: visible;
}

.fff-profile-picture-generator--image {
  max-width: 350px;
  text-align: center;
}

.fff-profile-picture-generator--privacy-note {
  display: block;
  padding: 5px 8px;
  font-family: "jost-semi", sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  margin: 10px 0;
  text-align: center;
  text-align-last: center;
  margin-right: 5px;
  width: unset;
}

.fff-profile-picture-generator-spinner {
  width: 40px;
  height: 40px;
  position: relative;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner-child:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: fff-profile-picture-generator-spinner-bounce-delay 1.2s
    infinite ease-in-out both;
  animation: fff-profile-picture-generator-spinner-bounce-delay 1.2s infinite
    ease-in-out both;
}
.fff-profile-picture-generator-spinner .fff-profile-picture-generator-spinner2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.fff-profile-picture-generator-spinner .fff-profile-picture-generator-spinner3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.fff-profile-picture-generator-spinner .fff-profile-picture-generator-spinner4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fff-profile-picture-generator-spinner .fff-profile-picture-generator-spinner5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.fff-profile-picture-generator-spinner .fff-profile-picture-generator-spinner6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.fff-profile-picture-generator-spinner .fff-profile-picture-generator-spinner7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fff-profile-picture-generator-spinner .fff-profile-picture-generator-spinner8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.fff-profile-picture-generator-spinner .fff-profile-picture-generator-spinner9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.fff-profile-picture-generator-spinner
  .fff-profile-picture-generator-spinner12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes fff-profile-picture-generator-spinner-bounce-delay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes fff-profile-picture-generator-spinner-bounce-delay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}