react-roulette-pro/dist/index.css

The best React roulette

/*!***********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/designs/Regular/Regular.css ***!
  \***********************************************************************************/
/* Top */
.roulette-pro-regular-design-top {
  position: absolute;
  z-index: 10;
  background: #ff7524 linear-gradient(0deg, #ef3a28, #ff9305);
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.roulette-pro-regular-design-top.horizontal {
  width: 4px;
  height: 100%;
}

.roulette-pro-regular-design-top.vertical {
  width: 100%;
  height: 4px;
}

/* Prize item */
.roulette-pro-regular-prize-item {
  text-align: center;
}

/* .roulette-pro-regular-prize-item:first-child .roulette-pro-regular-prize-item-wrapper {
  border-left: none;
} */

.roulette-pro-regular-prize-item-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  /* height: 215px; */
  /* height: calc(100% - 10px); */
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  border: 2px solid #383f48;
  background-color: #2e3640;
  background: radial-gradient(farthest-corner, #2e3640 0, #13161a 100%);
}

.roulette-pro-regular-prize-item-wrapper.center {
  justify-content: center;
}

.roulette-pro-regular-image-wrapper {
  height: 170px;
  overflow: hidden;
}

.roulette-pro-regular-prize-item-image {
  max-width: 100%;
  max-height: 100%;
}

.roulette-pro-regular-prize-item-text {
  box-sizing: border-box;
  display: block;
  padding: 16px;
  margin: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
  height: 60px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  white-space: break-spaces;
}

.roulette-pro-regular-design-prize-item-horizontal:first-child .roulette-pro-regular-prize-item-wrapper {
  border-left: 0px;
}

.roulette-pro-regular-design-prize-item-vertical .roulette-pro-regular-prize-item-wrapper {
  border-bottom: 0px;
}

/*!**************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/Wrapper/Wrapper.css ***!
  \**************************************************************************************/
.roulette-pro-wrapper {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  overflow: hidden;
  height: 100%;
}
/*!**************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/PrizesWrapper/PrizesWrapper.css ***!
  \**************************************************************************************************/
.roulette-pro-prize-list {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.roulette-pro-prize-list.horizontal {
  width: max-content;
}

.roulette-pro-prize-list.vertical {
  flex-direction: column;
  align-items: center;
}

.roulette-pro-prize-list.with-animation.horizontal {
  animation: roulette-horizontal-animation 100s linear infinite;
}

.roulette-pro-prize-list.with-animation.vertical {
  animation: roulette-vertical-animation 100s linear infinite;
}

@keyframes roulette-horizontal-animation {
  0% {
    /* transform: translateX(0); */
    /* left: 0; */
    transform: translate3d(0);
  }

  100% {
    /* transform: translateX(-3000px); */
    /* left: -3000px; */
    transform: translate3d(-3000px, 0, 0);
  }
}

@keyframes roulette-vertical-animation {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translate3d(0, -3000px, 0);
  }
}


/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguY3NzIiwibWFwcGluZ3MiOiI7OztBQUFBLFFBQVE7QUFDUjtFQUNFLGtCQUFrQjtFQUNsQixXQUFXO0VBQ1gsMkRBQTJEO0VBQzNELGtCQUFrQjtFQUNsQiwyQ0FBMkM7RUFDM0MsTUFBTTtFQUNOLE9BQU87RUFDUCxRQUFRO0VBQ1IsU0FBUztFQUNULFlBQVk7QUFDZDs7QUFFQTtFQUNFLFVBQVU7RUFDVixZQUFZO0FBQ2Q7O0FBRUE7RUFDRSxXQUFXO0VBQ1gsV0FBVztBQUNiOztBQUVBLGVBQWU7QUFDZjtFQUNFLGtCQUFrQjtBQUNwQjs7QUFFQTs7R0FFRzs7QUFFSDtFQUNFLGtCQUFrQjtFQUNsQixVQUFVO0VBQ1YsV0FBVztFQUNYLG1CQUFtQjtFQUNuQiwrQkFBK0I7RUFDL0Isa0JBQWtCO0VBQ2xCLGFBQWE7RUFDYixzQkFBc0I7RUFDdEIseUJBQXlCO0VBQ3pCLHlCQUF5QjtFQUN6QixxRUFBcUU7QUFDdkU7O0FBRUE7RUFDRSx1QkFBdUI7QUFDekI7O0FBRUE7RUFDRSxhQUFhO0VBQ2IsZ0JBQWdCO0FBQ2xCOztBQUVBO0VBQ0UsZUFBZTtFQUNmLGdCQUFnQjtBQUNsQjs7QUFFQTtFQUNFLHNCQUFzQjtFQUN0QixjQUFjO0VBQ2QsYUFBYTtFQUNiLGdCQUFnQjtFQUNoQixhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLHVCQUF1QjtFQUN2QixrQkFBa0I7RUFDbEIsVUFBVTtFQUNWLGdCQUFnQjtFQUNoQixZQUFZO0VBQ1osK0JBQStCO0VBQy9CLFdBQVc7RUFDWCxnQkFBZ0I7RUFDaEIsZ0JBQWdCO0VBQ2hCLHlCQUF5QjtBQUMzQjs7QUFFQTtFQUNFLGdCQUFnQjtBQUNsQjs7QUFFQTtFQUNFLGtCQUFrQjtBQUNwQjs7Ozs7QUN0RkE7RUFDRSxzQkFBc0I7RUFDdEIsa0JBQWtCO0VBQ2xCLFVBQVU7RUFDVixTQUFTO0VBQ1QsV0FBVztFQUNYLGdCQUFnQjtFQUNoQixZQUFZO0FBQ2QsQzs7OztBQ1JBO0VBQ0Usa0JBQWtCO0VBQ2xCLGFBQWE7RUFDYixXQUFXO0VBQ1gsWUFBWTtFQUNaLGdCQUFnQjtFQUNoQixTQUFTO0VBQ1QsVUFBVTtBQUNaOztBQUVBO0VBQ0Usa0JBQWtCO0FBQ3BCOztBQUVBO0VBQ0Usc0JBQXNCO0VBQ3RCLG1CQUFtQjtBQUNyQjs7QUFFQTtFQUNFLDZEQUE2RDtBQUMvRDs7QUFFQTtFQUNFLDJEQUEyRDtBQUM3RDs7QUFFQTtFQUNFO0lBQ0UsOEJBQThCO0lBQzlCLGFBQWE7SUFDYix5QkFBeUI7RUFDM0I7O0VBRUE7SUFDRSxvQ0FBb0M7SUFDcEMsbUJBQW1CO0lBQ25CLHFDQUFxQztFQUN2QztBQUNGOztBQUVBO0VBQ0U7SUFDRSx3QkFBd0I7RUFDMUI7O0VBRUE7SUFDRSxxQ0FBcUM7RUFDdkM7QUFDRiIsInNvdXJjZXMiOlsid2VicGFjazovL1JlYWN0Um91bGV0dGVQcm8vLi9zcmMvZGVzaWducy9SZWd1bGFyL1JlZ3VsYXIuY3NzIiwid2VicGFjazovL1JlYWN0Um91bGV0dGVQcm8vLi9zcmMvY29tcG9uZW50cy9XcmFwcGVyL1dyYXBwZXIuY3NzIiwid2VicGFjazovL1JlYWN0Um91bGV0dGVQcm8vLi9zcmMvY29tcG9uZW50cy9Qcml6ZXNXcmFwcGVyL1ByaXplc1dyYXBwZXIuY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi8qIFRvcCAqL1xuLnJvdWxldHRlLXByby1yZWd1bGFyLWRlc2lnbi10b3Age1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHotaW5kZXg6IDEwO1xuICBiYWNrZ3JvdW5kOiAjZmY3NTI0IGxpbmVhci1ncmFkaWVudCgwZGVnLCAjZWYzYTI4LCAjZmY5MzA1KTtcbiAgYm9yZGVyLXJhZGl1czogMnB4O1xuICBib3gtc2hhZG93OiAwIDJweCA0cHggMCByZ2JhKDAsIDAsIDAsIDAuNTApO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDA7XG4gIG1hcmdpbjogYXV0bztcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLWRlc2lnbi10b3AuaG9yaXpvbnRhbCB7XG4gIHdpZHRoOiA0cHg7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLWRlc2lnbi10b3AudmVydGljYWwge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiA0cHg7XG59XG5cbi8qIFByaXplIGl0ZW0gKi9cbi5yb3VsZXR0ZS1wcm8tcmVndWxhci1wcml6ZS1pdGVtIHtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4vKiAucm91bGV0dGUtcHJvLXJlZ3VsYXItcHJpemUtaXRlbTpmaXJzdC1jaGlsZCAucm91bGV0dGUtcHJvLXJlZ3VsYXItcHJpemUtaXRlbS13cmFwcGVyIHtcbiAgYm9yZGVyLWxlZnQ6IG5vbmU7XG59ICovXG5cbi5yb3VsZXR0ZS1wcm8tcmVndWxhci1wcml6ZS1pdGVtLXdyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHotaW5kZXg6IDI7XG4gIHdpZHRoOiAxMDAlO1xuICAvKiBoZWlnaHQ6IDIxNXB4OyAqL1xuICAvKiBoZWlnaHQ6IGNhbGMoMTAwJSAtIDEwcHgpOyAqL1xuICAvKiBoZWlnaHQ6IDEwMCU7ICovXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJvcmRlcjogMnB4IHNvbGlkICMzODNmNDg7XG4gIGJhY2tncm91bmQtY29sb3I6ICMyZTM2NDA7XG4gIGJhY2tncm91bmQ6IHJhZGlhbC1ncmFkaWVudChmYXJ0aGVzdC1jb3JuZXIsICMyZTM2NDAgMCwgIzEzMTYxYSAxMDAlKTtcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLXByaXplLWl0ZW0td3JhcHBlci5jZW50ZXIge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLWltYWdlLXdyYXBwZXIge1xuICBoZWlnaHQ6IDE3MHB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xufVxuXG4ucm91bGV0dGUtcHJvLXJlZ3VsYXItcHJpemUtaXRlbS1pbWFnZSB7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgbWF4LWhlaWdodDogMTAwJTtcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLXByaXplLWl0ZW0tdGV4dCB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwYWRkaW5nOiAxNnB4O1xuICBtYXJnaW46IGF1dG8gMCAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB6LWluZGV4OiAyO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBoZWlnaHQ6IDYwcHg7XG4gIGJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC4yNSk7XG4gIGNvbG9yOiAjZmZmO1xuICBmb250LXdlaWdodDogNzAwO1xuICBsaW5lLWhlaWdodDogMS4yO1xuICB3aGl0ZS1zcGFjZTogYnJlYWstc3BhY2VzO1xufVxuXG4ucm91bGV0dGUtcHJvLXJlZ3VsYXItZGVzaWduLXByaXplLWl0ZW0taG9yaXpvbnRhbDpmaXJzdC1jaGlsZCAucm91bGV0dGUtcHJvLXJlZ3VsYXItcHJpemUtaXRlbS13cmFwcGVyIHtcbiAgYm9yZGVyLWxlZnQ6IDBweDtcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLWRlc2lnbi1wcml6ZS1pdGVtLXZlcnRpY2FsIC5yb3VsZXR0ZS1wcm8tcmVndWxhci1wcml6ZS1pdGVtLXdyYXBwZXIge1xuICBib3JkZXItYm90dG9tOiAwcHg7XG59XG4iLCIucm91bGV0dGUtcHJvLXdyYXBwZXIge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHotaW5kZXg6IDI7XG4gIG1hcmdpbjogMDtcbiAgY29sb3I6ICNmZmY7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGhlaWdodDogMTAwJTtcbn0iLCIucm91bGV0dGUtcHJvLXByaXplLWxpc3Qge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbn1cblxuLnJvdWxldHRlLXByby1wcml6ZS1saXN0Lmhvcml6b250YWwge1xuICB3aWR0aDogbWF4LWNvbnRlbnQ7XG59XG5cbi5yb3VsZXR0ZS1wcm8tcHJpemUtbGlzdC52ZXJ0aWNhbCB7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG5cbi5yb3VsZXR0ZS1wcm8tcHJpemUtbGlzdC53aXRoLWFuaW1hdGlvbi5ob3Jpem9udGFsIHtcbiAgYW5pbWF0aW9uOiByb3VsZXR0ZS1ob3Jpem9udGFsLWFuaW1hdGlvbiAxMDBzIGxpbmVhciBpbmZpbml0ZTtcbn1cblxuLnJvdWxldHRlLXByby1wcml6ZS1saXN0LndpdGgtYW5pbWF0aW9uLnZlcnRpY2FsIHtcbiAgYW5pbWF0aW9uOiByb3VsZXR0ZS12ZXJ0aWNhbC1hbmltYXRpb24gMTAwcyBsaW5lYXIgaW5maW5pdGU7XG59XG5cbkBrZXlmcmFtZXMgcm91bGV0dGUtaG9yaXpvbnRhbC1hbmltYXRpb24ge1xuICAwJSB7XG4gICAgLyogdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDApOyAqL1xuICAgIC8qIGxlZnQ6IDA7ICovXG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwKTtcbiAgfVxuXG4gIDEwMCUge1xuICAgIC8qIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMzAwMHB4KTsgKi9cbiAgICAvKiBsZWZ0OiAtMzAwMHB4OyAqL1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoLTMwMDBweCwgMCwgMCk7XG4gIH1cbn1cblxuQGtleWZyYW1lcyByb3VsZXR0ZS12ZXJ0aWNhbC1hbmltYXRpb24ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDApO1xuICB9XG5cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAtMzAwMHB4LCAwKTtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9*/