UNPKG

@remjx/clappy-button-web-component

Version:

clappy button svelte

github.com/remjx/clappy-button

remjx/clappy-button

11 lines • 6.74 kB
1
2
3
4
5
6
7
8
9
10
11
#clappy-button-wrapper div, #clappy-button-wrapper button, #clappy-button-wrapper span{font-family:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif} #clappy-button-wrapper h1, #clappy-button-wrapper h2, #clappy-button-wrapper h3, #clappy-button-wrapper h4, #clappy-button-wrapper h5, #clappy-button-wrapper h6 {font-family:'Signika', sans-serif;margin-top:0}#clappy-button-wrapper .text-center{text-align:center}#clappy-button-wrapper .text-success{color:#28bd14 }#clappy-button-wrapper iframe{border:none}#clappy-button-wrapper .flex-center{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap}#clappy-button-wrapper .btn{margin:0px 5px}#clappy-button-wrapper button.primary{background-color:#14854f;color:white}#clappy-button-wrapper button.primary:hover{background-color:hsla(151, 74%, 30%, 0.972)}#clappy-button-wrapper button:hover{opacity:90%;cursor:pointer}#btn-container.svelte-fqe1h4{display:flex;flex-direction:column;position:relative;width:100px;align-items:center;margin-top:75px}#settings-btn.svelte-fqe1h4{position:absolute;bottom:70px;border:0;padding:8px;z-index:1;background-color:transparent}#cog.svelte-fqe1h4{height:20px;width:20px}a.svelte-fqe1h4{padding:8px 8px 4px 8px;margin:0;color:grey}.prevent-blue-highlight.svelte-15za7im.svelte-15za7im{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.fitty-container.svelte-15za7im.svelte-15za7im{white-space:nowrap;display:inline-block}#tipSection.svelte-15za7im.svelte-15za7im{display:inline-block;position:relative}#tipCountContainer.svelte-15za7im.svelte-15za7im{position:relative;left:2px;top:6px;width:75px;height:75px;border-radius:50%;font-size:20px;background-color:#000;color:#fff;display:grid;pointer-events:none;will-change:transform, opacity;margin-top:-45px}#tipCount.svelte-15za7im.svelte-15za7im{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:0 5px;font-family:'Open Sans', 'Noto Sans JP', sans-serif}#tipBtn.svelte-15za7im.svelte-15za7im{border:none;outline:none;background-color:transparent;position:relative;z-index:0;padding:0px 0px;touch-action:none}#btn-circle.svelte-15za7im.svelte-15za7im{background-color:#e6e6e6;width:50px;height:50px;border-radius:50%;position:absolute;z-index:-1;top:50%;left:50%;transform:translate3d(-50%, -50%, -1px) scale(1);transform-origin:center}#tipSVG.svelte-15za7im.svelte-15za7im{width:80px;overflow:visible;margin-top:-10px}#tipBtn.svelte-15za7im>.svelte-15za7im{vertical-align:middle}.hidden.svelte-15za7im.svelte-15za7im{visibility:hidden}#confetti.svelte-15za7im.svelte-15za7im{will-change:transform, opacity}#hands.svelte-15za7im.svelte-15za7im{will-change:transform}#noise.svelte-15za7im.svelte-15za7im,#inner.svelte-15za7im.svelte-15za7im{will-change:opacity}.svelte-3eyn57{box-sizing:border-box}.bg.svelte-3eyn57{position:fixed;z-index:1000;top:0;left:0;display:flex;flex-direction:column;justify-content:center;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.66)}.window-wrap.svelte-3eyn57{position:relative;margin:2rem;max-height:100%}.window.svelte-3eyn57{position:relative;width:40rem;max-width:100%;max-height:100%;margin:2rem auto;color:black;border-radius:0.5rem;background:white}.content.svelte-3eyn57{position:relative;padding:1rem;max-height:calc(100vh - 4rem);overflow:auto}.close.svelte-3eyn57{display:block;box-sizing:border-box;position:absolute;z-index:1000;top:1rem;right:1rem;margin:0;padding:0;width:1.5rem;height:1.5rem;border:0;color:black;border-radius:1.5rem;background:white;box-shadow:0 0 0 1px black;transition:transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);-webkit-appearance:none}.close.svelte-3eyn57:before,.close.svelte-3eyn57:after{content:'';display:block;box-sizing:border-box;position:absolute;top:50%;width:1rem;height:1px;background:black;transform-origin:center;transition:height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1)}.close.svelte-3eyn57:before{transform:translate(0, -50%) rotate(45deg);left:0.25rem}.close.svelte-3eyn57:after{transform:translate(0, -50%) rotate(-45deg);left:0.25rem}.close.svelte-3eyn57:hover{background:black}.close.svelte-3eyn57:hover:before,.close.svelte-3eyn57:hover:after{height:2px;background:white}.close.svelte-3eyn57:focus{border-color:#3399ff;box-shadow:0 0 0 2px #3399ff}.close.svelte-3eyn57:active{transform:scale(0.9)}.close.svelte-3eyn57:hover,.close.svelte-3eyn57:focus,.close.svelte-3eyn57:active{outline:none}.modal-content.svelte-1lh6mql{position:relative;display:flex;justify-content:center}.modal-content.svelte-1lh6mql button{font-size:18px;padding:0.75rem 1.5rem;border-radius:24px;border:none;background-color:#d2d6dd;color:dimgray;cursor:pointer}.modal-content.svelte-1lh6mql button:hover{opacity:90%}.bullet-container.svelte-tvykst{margin-top:2rem;margin-bottom:12px}.action-btns.svelte-tvykst{display:flex;justify-items:center;justify-content:center;flex-wrap:wrap;margin-top:1rem;margin-bottom:1rem}.action-btn.svelte-tvykst{margin-top:8px;margin-left:4px;margin-right:4px}#modal-content-error.svelte-1aapqf0{width:350px}p.svelte-1aapqf0{margin:1rem 0}a.svelte-1aapqf0{color:blue}.text.svelte-11hv09r{font-family:'Noto Sans JP', 'Open Sans', sans-serif;font-size:20px;margin-bottom:1rem}#modal-content-clap-confirmation.svelte-11hv09r{width:100%}#optional-message.svelte-11hv09r{text-align:center}input.svelte-11hv09r{padding:10px;width:80%;margin-bottom:1rem;text-align:center;border:1px dashed #718096}input.svelte-11hv09r:focus{outline:2px solid #3182CE;border:1px solid transparent}button[type=submit].svelte-11hv09r:focus{outline:none}.text.svelte-1oqn0sv{margin-right:8px;color:#545454;text-transform:none;font-family:'Noto Sans JP', 'Open Sans', sans-serif;font-size:20px}.container.svelte-1oqn0sv{margin-bottom:4px}.center-logo.svelte-198twtw{display:flex;justify-content:center}.modal-header.svelte-198twtw{font-size:36px;font-weight:600;text-align:center;font-family:'Signika', sans-serif}.flex.svelte-1nvmbnz{display:flex;align-items:center;justify-content:center}.modal-header.svelte-1nvmbnz{font-size:36px;font-weight:600;text-align:center;font-family:'Signika', sans-serif;margin-bottom:0px}#btn-circle.svelte-1ejjx9n{transform-origin:center;background-color:#e6e6e6;border-radius:50%;position:absolute;z-index:-1;top:50%;left:50%;transform:translate(-50%, -50%)}#tipSVG.svelte-1ejjx9n{overflow:visible;margin-top:-10px}#confetti.svelte-1ejjx9n{will-change:transform, opacity}#hands.svelte-1ejjx9n{will-change:transform}