Skip to content

Instantly share code, notes, and snippets.

@zoonderkins
Last active July 21, 2019 20:14
Show Gist options
  • Save zoonderkins/9cd22cf04b145709f45e277dbf5a3cdc to your computer and use it in GitHub Desktop.
Save zoonderkins/9cd22cf04b145709f45e277dbf5a3cdc to your computer and use it in GitHub Desktop.
Blur.page some idea
## Javascript
## CSS
```
.___blur-about-container.svelte-kidrsn{color:#222831;text-align:center}.___blur-about-container.svelte-kidrsn div.svelte-kidrsn{line-height:1.5}.___blur-about-container.svelte-kidrsn a.svelte-kidrsn,.___blur-about-container.svelte-kidrsn a.svelte-kidrsn:hover{color:#222831;text-decoration:none}
.___blur-modal-overlay.svelte-1e1hqwk{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(34, 40, 49, 0.9);z-index:9999}.___blur-modal.svelte-1e1hqwk{position:absolute;left:50%;top:50%;width:300px;overflow:auto;transform:translate(-50%, -50%);border-radius:4px;background:#fff}.___blur-modal-header.svelte-1e1hqwk{align-items:center;background:#eeeeee;color:#111;display:flex;padding:8px;border-bottom:1px solid #ddd}.___blur-modal-header.svelte-1e1hqwk button.svelte-1e1hqwk{background:transparent;border:none;cursor:pointer;margin-left:auto}.___blur-modal-header.svelte-1e1hqwk button.svelte-1e1hqwk:focus{outline:none}.___blur-modal-body.svelte-1e1hqwk{padding:16px}
.___blur-tooltip{cursor:pointer;position:relative}.___blur-tooltip:before,.___blur-tooltip-content{bottom:100%;left:50%;opacity:0;pointer-events:none;position:absolute;transform:translate3d(0, 0, 0);transition:opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);visibility:hidden}.___blur-tooltip:hover:before,.___blur-tooltip:hover .___blur-tooltip-content{opacity:1;transform:translateY(-12px);visibility:visible}.___blur-tooltip:before{background:transparent;border:6px solid transparent;border-top-color:#222831;content:"";margin-bottom:-12px;margin-left:-6px}.___blur-tooltip-content{background-color:#222831;border-radius:4px;color:#fff;font-size:14px;margin-left:-66px;padding:8px;text-align:center;width:120px}
.___blur-hover{box-shadow:0 0 0 0.2rem rgba(0,123,255,1)}.___blur-cursor *{cursor:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PGc+PHBhdGggZD0iTTAuNTE1LDIzLjk0NGMtMC4xMzQsMC0wLjI2LTAuMDUyLTAuMzU0LTAuMTQ3Yy0wLjA5NC0wLjA5NS0wLjE0Ni0wLjIyMS0wLjE0Ni0wLjM1NGMwLTAuMTM0LDAuMDUzLTAuMjU5LDAuMTQ4LTAuMzUzIEwxNS44MTYsNy41MzNsLTIuODAzLTAuNjQ1Yy0wLjQ4NC0wLjExMi0wLjU4LTAuNDM1LTAuNTk5LTAuNTY5Yy0wLjAxOS0wLjEzMy0wLjAxNy0wLjQ3LDAuNDE4LTAuNzEybDIuOTY1LTEuNjQ0IGMwLjA3OC0wLjA0OSwwLjEzMi0wLjE1OSwwLjEyNS0wLjI3M2wtMC4zMTgtMi44MjNjLTAuMDU1LTAuNTAyLDAuMjItMC42OTMsMC4zNDEtMC43NTJjMC4wODEtMC4wMzksMC4xNjgtMC4wNTksMC4yNTktMC4wNTljMC4xODksMCwwLjM3MywwLjA4NiwwLjU0NiwwLjI1NWwxLjg1OSwxLjg1NmMwLjA1NCwwLjA0OCwwLjE0NCwwLjA4MSwwLjIzNiwwLjA4MWMwLjAzNiwwLDAuMDcxLTAuMDA1LDAuMTA1LTAuMDE0bDIuODY1LTAuOTU1YzAuMTAyLTAuMDM0LDAuMjAyLTAuMDUxLDAuMjk5LTAuMDUxYzAuMTk2LDAsMC4zNjgsMC4wNjgsMC40OTcsMC4xOTZjMC4xOTUsMC4xOTIsMC4yNTMsMC40OSwwLjE1NiwwLjc5N2wtMC45NjcsMi44OThjLTAuMDI3LDAuMTAzLDAuMDA4LDAuMjM3LDAuMDk2LDAuMzM0bDEuODM1LDEuODM1YzAuMzU3LDAuMzU3LDAuMjYsMC42OCwwLjIwMSwwLjgwM2MtMC4wNTEsMC4xMDYtMC4yMTQsMC4zNTQtMC42MzIsMC4zNTRsMCwwYy0wLjAzNywwLTAuMDc3LTAuMDAyLTAuMTE5LTAuMDA2bC0yLjg0OC0wLjMxNWMtMC4xLDAuMDAxLTAuMjA1LDAuMDYxLTAuMjYxLDAuMTVsLTEuNjM2LDIuOTQxYy0wLjIwNCwwLjM2OS0wLjQ4LDAuNDI0LTAuNjI2LDAuNDI0Yy0wLjAzMSwwLTAuMDU5LTAuMDAyLTAuMDg0LTAuMDA2Yy0wLjEzMy0wLjAxOS0wLjQ1Ny0wLjExNC0wLjU2OS0wLjU5OGwtMC42NDMtMi43ODVMMC44NjcsMjMuNzk5QzAuNzczLDIzLjg5MiwwLjY0OCwyMy45NDQsMC41MTUsMjMuOTQ0eiBNMTYuNDIzLDYuNjQ2YzAuNDc5LDAuMTM3LDAuODM3LDAuNDksMC45NjgsMC45NDlsMC41NjIsMi40MzJsMS4yNi0yLjI2NGMwLjI1My0wLjQwNSwwLjY3NC0wLjY0LDEuMTMzLTAuNjRjMC4wMjQsMCwwLjA0OCwwLjAwMSwwLjA3MiwwLjAwMmwxLjk1NiwwLjIxNmwtMS4yLTEuMmMtMC4zMzMtMC4zNjUtMC40NTMtMC44NTMtMC4zMjktMS4zMTJsMC44MTUtMi40NDVsLTIuNDE3LDAuODA1Yy0wLjEzOSwwLjAzOS0wLjI2OCwwLjA1Ny0wLjM5NywwLjA1N2MtMC4zNDEsMC0wLjY2OS0wLjEyNS0wLjkyMy0wLjM1NGwtMS4yMjEtMS4yMTlsMC4yMTcsMS45M2MwLjAzMSwwLjUwMS0wLjIwNCwwLjk2NC0wLjYxMywxLjIybC0yLjI4NywxLjI2OUwxNi40MjMsNi42NDZ6Ii8+PC9nPjwvc3ZnPg==), crosshair !important}.___blur-cursor .___blur-container *{cursor:initial !important}.___blur-cursor .___blur-container a, .___blur-cursor .___blur-container button, .___blur-cursor .___blur-container img{cursor:pointer !important}.___blur-blur{filter:blur(5px)}.___blur-blur-mark{background-color:transparent !important;filter:blur(5px);padding:0 !important}.___blur-container{bottom:32px;display:flex;height:auto;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;justify-content:center;position:fixed;width:100%;z-index:200}.___blur-control{align-items:center;background-color:#222831;border-radius:9999px;box-shadow:0 10px 40px 0 rgba(17,38,57,.4);color:#fff;display:flex;justify-content:center;padding:4px;transition:all .2s ease}.___blur-button{align-items:center;background-color:transparent;border:none;border-radius:9999px;cursor:pointer;display:flex;height:40px;justify-content:center;margin:0;width:40px}.___blur-button img{height:16px;height:16px}.___blur-button:hover{background-color:#393e46}.___blur-button:focus{outline:none}.___blur-separator{background-color:#eee;height:50%;margin:0 4px;width:1px}
.check.svelte-17dicvi{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDAsMCkiPjxwYXRoIGQ9Ik0gMjEuNSwxLjk5OUw5LDE3LjQ5OWwtNS01ICIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjxwYXRoIGQ9Ik0gMTguNSwxMnYxMC41YzAsMC41NTItMC40NDgsMS0xLDFoLTE2Yy0wLjU1MiwwLTEtMC40NDgtMS0xdi0xNiBjMC0wLjU1MiwwLjQ0OC0xLDEtMUgxMyIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvZz48L3N2Zz4=);background-position:center center;background-repeat:no-repeat;height:16px;width:16px}
/* sourceMappingURL=./index.d44652a0.css.map */
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment