tiny-dices/dist/TinyDices.min.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! 🎲✨

.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))}}