common-lottery/dist/style.css

A Vue 3 lottery component

.lottery-container[data-v-efb40495]{width:100%;max-width:600px;margin:0 auto;padding:20px;display:flex;flex-direction:column;align-items:center}.lottery-wheel-wrapper[data-v-efb40495]{position:relative;width:100%;max-width:400px;aspect-ratio:1/1;margin-bottom:30px}.lottery-pointer[data-v-efb40495]{position:absolute;left:50%;top:calc(50% - 70px);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:40px solid #FFD700;transform:translate(-50%);z-index:20;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}.lottery-wheel[data-v-efb40495]{width:100%;height:100%;display:block;border-radius:50%;box-shadow:0 0 30px #e5e1d8,0 0 20px #00000014;background:#fff}.prize-name[data-v-efb40495]{font-size:18px;font-weight:700;fill:#8a6d1b;pointer-events:none;-webkit-user-select:none;user-select:none}.lottery-button[data-v-efb40495]{margin-top:10px;padding:12px 30px;font-size:18px;color:#fff;background-color:gold;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #0000001a;font-weight:700;letter-spacing:2px}.lottery-button[data-v-efb40495]:hover:not(:disabled){background-color:#e6be00;transform:scale(1.05);box-shadow:0 6px 8px #00000026}.lottery-button[data-v-efb40495]:disabled{background-color:#ccc;cursor:not-allowed;box-shadow:none}.lottery-button.running[data-v-efb40495]{background-color:#ccc;color:#fff;cursor:pointer}.lottery-button.running[data-v-efb40495]:hover{background-color:#ccc;transform:none;box-shadow:0 4px 6px #0000001a}