User:Clarification needed/Sandbox/Pedometer.css: Difference between revisions

.pm-frame {
  background: black;
  /*width: fit-content;*/
  margin: 0.5em auto;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border-radius: 5px;
}
.pm-disclaimer {
  display: flex;
  flex-direction: row;
  gap: 10px;
  text-align: center;
  font-size: 120%;
  background: black;
  color: white;
}
.pm-bar {
  margin-top: 5px;
  position: relative;
  width: 100%;
  height: 20px;
  border-radius: 6px;
  box-shadow: 0 0 4px #000 inset;
  line-height: 15px;
  background: linear-gradient(to bottom, rgba(249, 249, 249, 0.26) 0%,rgba(234, 234, 234, 0.64) 50%, rgba(249, 249, 249, 0.12) 51%, rgba(245, 245, 245, 0.5) 100%), linear-gradient(to right, #0f0, #80ff00, #ff0, #ff8000, #f00);
  /*background-blend-mode: hard-light;*/
}
.pm-indicator {
  position:absolute;
  top:50%;
  font-size:150%;
  color:black;
}
/* POSSIBLY PEDO */
.pm-indicator.possiblypedo {
  animation: pm-possiblypedo-start 2.5s 1 ease-in-out,1s pm-possiblypedo-shake 0s infinite ease-in-out;
}
@keyframes pm-possiblypedo-shake {
  0% {transform: translateX(12px);}
  50% {transform: translateX(-12px);}
  100% {transform: translateX(12px);}
}
@keyframes pm-possiblypedo-start {
  0% {left: 0;} 
}
/* DEFINITELY PEDO */
.pm-indicator.pedo {
  right: 0;
  animation: pm-pedo-start 1.2s 1 cubic-bezier(0.71, 0, 0.8, 1.2),0.17s pm-pedo-shake-x 1.2s infinite ease-in-out, 0.2s pm-pedo-shake-y 1.2s linear infinite
}
@keyframes pm-pedo-shake-x {
  0% {right: -6px;}
  50% {right: 6px;}
  100% {right: -6px;}
}
@keyframes pm-pedo-shake-y {
  0% {transform: translateY(-2px);}
  50% {transform: translateY(2px);}
  100% {transform: translateY(-2px);}
}
@keyframes pm-pedo-start {
  0% {right: 97%;}
  100% {right: 0;}
}
/* SUPERPEDO */
.pm-bar.superpedo {
  background: linear-gradient(to bottom, rgba(249, 249, 249, 0.26) 0%,rgba(234, 234, 234, 0.64) 50%, rgba(249, 249, 249, 0.12) 51%, rgba(245, 245, 245, 0.5) 100%), linear-gradient(to right, lime, #80ff00, #ff0, #ff8000, #f00, #a0a, #000);
}
.pm-indicator.superpedo {
  right: 0;
  animation: pm-super-start 1s 1 cubic-bezier(0.71, 0, 0.8, 1.5),0.15s pm-super-shake-x 1s infinite ease-in-out, 0.17s pm-super-shake-y 1s linear infinite
}
@keyframes pm-super-shake-x {
  0% {right: -12px;}
  50% {right: 12px;}
  100% {right: -12px;}
}
@keyframes pm-super-shake-y {
  0% {transform: translateY(-7px);}
  50% {transform: translateY(7px);}
  100% {transform: translateY(-7px);}
}
@keyframes pm-super-start {
  0% {right: 97%;}
  100% {right: 0;}
}