custom-roulette/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;
  height: 100%;
  justify-items: center;
   justify-content: center;
   align-items: center;
   align-content: center;
  z-index: 2;
  font-size: 64px;
  width: 100%;
  /* height: 215px; */
  /* height: calc(100% - 10px); */
  /* height: 100%; */

  display: flex;
  flex-direction: column;
  border: 2px solid black;
  background-color: #222352;
  background: radial-gradient(farthest-corner, #222552 0, #222352 100%);
}

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

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

.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguY3NzIiwibWFwcGluZ3MiOiI7OztBQUFBLFFBQVE7QUFDUjtFQUNFLGtCQUFrQjtFQUNsQixXQUFXO0VBQ1gsMkRBQTJEO0VBQzNELGtCQUFrQjtFQUNsQiwyQ0FBMkM7RUFDM0MsTUFBTTtFQUNOLE9BQU87RUFDUCxRQUFRO0VBQ1IsU0FBUztFQUNULFlBQVk7QUFDZDs7QUFFQTtFQUNFLFVBQVU7RUFDVixZQUFZO0FBQ2Q7O0FBRUE7RUFDRSxXQUFXO0VBQ1gsV0FBVztBQUNiOztBQUVBLGVBQWU7QUFDZjtFQUNFLGtCQUFrQjtBQUNwQjs7QUFFQTs7R0FFRzs7QUFFSDtFQUNFLGtCQUFrQjtFQUNsQixZQUFZO0VBQ1oscUJBQXFCO0dBQ3BCLHVCQUF1QjtHQUN2QixtQkFBbUI7R0FDbkIscUJBQXFCO0VBQ3RCLFVBQVU7RUFDVixlQUFlO0VBQ2YsV0FBVztFQUNYLG1CQUFtQjtFQUNuQiwrQkFBK0I7RUFDL0Isa0JBQWtCOztFQUVsQixhQUFhO0VBQ2Isc0JBQXNCO0VBQ3RCLHVCQUF1QjtFQUN2Qix5QkFBeUI7RUFDekIscUVBQXFFO0FBQ3ZFOztBQUVBO0VBQ0UsdUJBQXVCO0FBQ3pCOztBQUVBO0VBQ0UsYUFBYTtFQUNiLGdCQUFnQjtFQUNoQixjQUFjO0FBQ2hCOztBQUVBO0VBQ0UsZUFBZTtFQUNmLGdCQUFnQjtBQUNsQjs7QUFFQTtFQUNFLHNCQUFzQjtFQUN0QixjQUFjO0VBQ2QsYUFBYTtFQUNiLGdCQUFnQjtFQUNoQixhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLHVCQUF1QjtFQUN2QixrQkFBa0I7RUFDbEIsVUFBVTtFQUNWLGdCQUFnQjtFQUNoQixZQUFZO0VBQ1osK0JBQStCO0VBQy9CLFdBQVc7RUFDWCxnQkFBZ0I7RUFDaEIsZ0JBQWdCO0VBQ2hCLHlCQUF5QjtBQUMzQjs7QUFFQTtFQUNFLGdCQUFnQjtBQUNsQjs7QUFFQTtFQUNFLGtCQUFrQjtBQUNwQjs7Ozs7QUM5RkE7RUFDRSxzQkFBc0I7RUFDdEIsa0JBQWtCO0VBQ2xCLFVBQVU7RUFDVixTQUFTO0VBQ1QsV0FBVztFQUNYLGdCQUFnQjtFQUNoQixZQUFZO0FBQ2QsQzs7OztBQ1JBO0VBQ0Usa0JBQWtCO0VBQ2xCLGFBQWE7RUFDYixXQUFXO0VBQ1gsWUFBWTtFQUNaLGdCQUFnQjtFQUNoQixTQUFTO0VBQ1QsVUFBVTtBQUNaOztBQUVBO0VBQ0Usa0JBQWtCO0FBQ3BCOztBQUVBO0VBQ0Usc0JBQXNCO0VBQ3RCLG1CQUFtQjtBQUNyQjs7QUFFQTtFQUNFLDZEQUE2RDtBQUMvRDs7QUFFQTtFQUNFLDJEQUEyRDtBQUM3RDs7QUFFQTtFQUNFO0lBQ0UsOEJBQThCO0lBQzlCLGFBQWE7SUFDYix5QkFBeUI7RUFDM0I7O0VBRUE7SUFDRSxvQ0FBb0M7SUFDcEMsbUJBQW1CO0lBQ25CLHFDQUFxQztFQUN2QztBQUNGOztBQUVBO0VBQ0U7SUFDRSx3QkFBd0I7RUFDMUI7O0VBRUE7SUFDRSxxQ0FBcUM7RUFDdkM7QUFDRiIsInNvdXJjZXMiOlsid2VicGFjazovL1JlYWN0Um91bGV0dGVQcm8vLi9zcmMvZGVzaWducy9SZWd1bGFyL1JlZ3VsYXIuY3NzIiwid2VicGFjazovL1JlYWN0Um91bGV0dGVQcm8vLi9zcmMvY29tcG9uZW50cy9XcmFwcGVyL1dyYXBwZXIuY3NzIiwid2VicGFjazovL1JlYWN0Um91bGV0dGVQcm8vLi9zcmMvY29tcG9uZW50cy9Qcml6ZXNXcmFwcGVyL1ByaXplc1dyYXBwZXIuY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi8qIFRvcCAqL1xuLnJvdWxldHRlLXByby1yZWd1bGFyLWRlc2lnbi10b3Age1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHotaW5kZXg6IDEwO1xuICBiYWNrZ3JvdW5kOiAjZmY3NTI0IGxpbmVhci1ncmFkaWVudCgwZGVnLCAjZWYzYTI4LCAjZmY5MzA1KTtcbiAgYm9yZGVyLXJhZGl1czogMnB4O1xuICBib3gtc2hhZG93OiAwIDJweCA0cHggMCByZ2JhKDAsIDAsIDAsIDAuNTApO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDA7XG4gIG1hcmdpbjogYXV0bztcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLWRlc2lnbi10b3AuaG9yaXpvbnRhbCB7XG4gIHdpZHRoOiA0cHg7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLWRlc2lnbi10b3AudmVydGljYWwge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiA0cHg7XG59XG5cbi8qIFByaXplIGl0ZW0gKi9cbi5yb3VsZXR0ZS1wcm8tcmVndWxhci1wcml6ZS1pdGVtIHtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4vKiAucm91bGV0dGUtcHJvLXJlZ3VsYXItcHJpemUtaXRlbTpmaXJzdC1jaGlsZCAucm91bGV0dGUtcHJvLXJlZ3VsYXItcHJpemUtaXRlbS13cmFwcGVyIHtcbiAgYm9yZGVyLWxlZnQ6IG5vbmU7XG59ICovXG5cbi5yb3VsZXR0ZS1wcm8tcmVndWxhci1wcml6ZS1pdGVtLXdyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogMTAwJTtcbiAganVzdGlmeS1pdGVtczogY2VudGVyO1xuICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgYWxpZ24tY29udGVudDogY2VudGVyO1xuICB6LWluZGV4OiAyO1xuICBmb250LXNpemU6IDY0cHg7XG4gIHdpZHRoOiAxMDAlO1xuICAvKiBoZWlnaHQ6IDIxNXB4OyAqL1xuICAvKiBoZWlnaHQ6IGNhbGMoMTAwJSAtIDEwcHgpOyAqL1xuICAvKiBoZWlnaHQ6IDEwMCU7ICovXG5cbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYm9yZGVyOiAycHggc29saWQgYmxhY2s7XG4gIGJhY2tncm91bmQtY29sb3I6ICMyMjIzNTI7XG4gIGJhY2tncm91bmQ6IHJhZGlhbC1ncmFkaWVudChmYXJ0aGVzdC1jb3JuZXIsICMyMjI1NTIgMCwgIzIyMjM1MiAxMDAlKTtcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLXByaXplLWl0ZW0td3JhcHBlci5jZW50ZXIge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLWltYWdlLXdyYXBwZXIge1xuICBoZWlnaHQ6IDE3MHB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjb2xvcjogI0ZGRUE2RDtcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLXByaXplLWl0ZW0taW1hZ2Uge1xuICBtYXgtd2lkdGg6IDEwMCU7XG4gIG1heC1oZWlnaHQ6IDEwMCU7XG59XG5cbi5yb3VsZXR0ZS1wcm8tcmVndWxhci1wcml6ZS1pdGVtLXRleHQge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBkaXNwbGF5OiBibG9jaztcbiAgcGFkZGluZzogMTZweDtcbiAgbWFyZ2luOiBhdXRvIDAgMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgei1pbmRleDogMjtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgaGVpZ2h0OiA2MHB4O1xuICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuMjUpO1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgbGluZS1oZWlnaHQ6IDEuMjtcbiAgd2hpdGUtc3BhY2U6IGJyZWFrLXNwYWNlcztcbn1cblxuLnJvdWxldHRlLXByby1yZWd1bGFyLWRlc2lnbi1wcml6ZS1pdGVtLWhvcml6b250YWw6Zmlyc3QtY2hpbGQgLnJvdWxldHRlLXByby1yZWd1bGFyLXByaXplLWl0ZW0td3JhcHBlciB7XG4gIGJvcmRlci1sZWZ0OiAwcHg7XG59XG5cbi5yb3VsZXR0ZS1wcm8tcmVndWxhci1kZXNpZ24tcHJpemUtaXRlbS12ZXJ0aWNhbCAucm91bGV0dGUtcHJvLXJlZ3VsYXItcHJpemUtaXRlbS13cmFwcGVyIHtcbiAgYm9yZGVyLWJvdHRvbTogMHB4O1xufVxuIiwiLnJvdWxldHRlLXByby13cmFwcGVyIHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB6LWluZGV4OiAyO1xuICBtYXJnaW46IDA7XG4gIGNvbG9yOiAjZmZmO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBoZWlnaHQ6IDEwMCU7XG59IiwiLnJvdWxldHRlLXByby1wcml6ZS1saXN0IHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBkaXNwbGF5OiBmbGV4O1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBsaXN0LXN0eWxlOiBub25lO1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDA7XG59XG5cbi5yb3VsZXR0ZS1wcm8tcHJpemUtbGlzdC5ob3Jpem9udGFsIHtcbiAgd2lkdGg6IG1heC1jb250ZW50O1xufVxuXG4ucm91bGV0dGUtcHJvLXByaXplLWxpc3QudmVydGljYWwge1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuXG4ucm91bGV0dGUtcHJvLXByaXplLWxpc3Qud2l0aC1hbmltYXRpb24uaG9yaXpvbnRhbCB7XG4gIGFuaW1hdGlvbjogcm91bGV0dGUtaG9yaXpvbnRhbC1hbmltYXRpb24gMTAwcyBsaW5lYXIgaW5maW5pdGU7XG59XG5cbi5yb3VsZXR0ZS1wcm8tcHJpemUtbGlzdC53aXRoLWFuaW1hdGlvbi52ZXJ0aWNhbCB7XG4gIGFuaW1hdGlvbjogcm91bGV0dGUtdmVydGljYWwtYW5pbWF0aW9uIDEwMHMgbGluZWFyIGluZmluaXRlO1xufVxuXG5Aa2V5ZnJhbWVzIHJvdWxldHRlLWhvcml6b250YWwtYW5pbWF0aW9uIHtcbiAgMCUge1xuICAgIC8qIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTsgKi9cbiAgICAvKiBsZWZ0OiAwOyAqL1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCk7XG4gIH1cblxuICAxMDAlIHtcbiAgICAvKiB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTMwMDBweCk7ICovXG4gICAgLyogbGVmdDogLTMwMDBweDsgKi9cbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKC0zMDAwcHgsIDAsIDApO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgcm91bGV0dGUtdmVydGljYWwtYW5pbWF0aW9uIHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwKTtcbiAgfVxuXG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTMwMDBweCwgMCk7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==*/