tiny-dices/dist/TinyDices.css

Tiny Dices adds a sprinkle of fun and a touch of magic to your dice-rolling adventures — fully customizable with CSS and JavaScript to match your style, theme, or imagination! 🎲✨

/* 
 * Created by: Yasmin Seidel (JasminDreasond)
 * Co-developed with: ChatGPT (OpenAI) as coding assistant
*/
.tiny-dices-body {
  color: #fff;
  font-family: "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tiny-dices-body .dice-area {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  perspective: 1200px;
  margin: 30px 0px;
}
.tiny-dices-body .dice-container,
.tiny-dices-body .cube-wrapper,
.tiny-dices-body .face {
  width: 100px;
  height: 100px;
}
.tiny-dices-body .face::selection {
  background: var(--dice-selection-bg);
  color: var(--dice-selection-text);
}
.tiny-dices-body :root {
  --cube-spin-duration: 2s;
}
.tiny-dices-body .cube-wrapper {
  position: absolute;
  transform-style: preserve-3d;
  animation: tinyDiceSpinCubeCustom var(--cube-spin-duration) ease-in-out forwards;
}
.tiny-dices-body .cube-wrapper,
.tiny-dices-body .face {
  will-change: transform;
}
.tiny-dices-body .face {
  position: absolute;
  font-size: 2em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.tiny-dices-body .face:not(.face1) {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  cursor: default !important;
}
.tiny-dices-body .face1 {
  transform: rotateY(0deg) translateZ(50px);
}
.tiny-dices-body .face2 {
  transform: rotateY(90deg) translateZ(50px);
}
.tiny-dices-body .face3 {
  transform: rotateY(180deg) translateZ(50px);
}
.tiny-dices-body .face4 {
  transform: rotateY(-90deg) translateZ(50px);
}
.tiny-dices-body .face5 {
  transform: rotateX(90deg) translateZ(50px);
}
.tiny-dices-body .face6 {
  transform: rotateX(-90deg) translateZ(50px);
}
@keyframes tinyDiceSpinCube {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(1440deg) rotateY(2160deg);
  }
}
@keyframes tinyDiceSpinCubeCustom {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(var(--rotX)) rotateY(var(--rotY));
  }
}
.tiny-dices-body .cube-wrapper.spin-infinite {
  animation: tinyDiceSpinCubeInfinite 4s linear infinite !important;
}
@keyframes tinyDiceSpinCubeInfinite {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(var(--rotX)) rotateY(var(--rotY));
  }
}