lisn.js
Version:
Simply handle user gestures and actions. Includes widgets.
1 lines • 6.01 kB
CSS
:root{--lisn-color-dark:#171736;--lisn-color-dark-t:rgba(23,23,54,.95);--lisn-color-light:#fff;--lisn-color-light-t:hsla(0,0%,100%,.95)}.light-theme,:root{--lisn-color-fg:var(--lisn-color-dark);--lisn-color-fg-t:var(--lisn-color-dark-t);--lisn-color-bg:var(--lisn-color-light);--lisn-color-bg-t:var(--lisn-color-light-t)}.dark-theme{--lisn-color-fg:var(--lisn-color-light);--lisn-color-fg-t:var(--lisn-color-light-t);--lisn-color-bg:var(--lisn-color-dark);--lisn-color-bg-t:var(--lisn-color-dark-t)}.lisn-show{opacity:1;visibility:visible}.lisn-hide{opacity:0;visibility:hidden}.lisn-hide,.lisn-show,.lisn-transition{transition-duration:var(--animate-duration,.7s)}.lisn-hide,.lisn-show{transform:rotate(1turn);transition-property:opacity,visibility}.lisn-transition{transition-property:all}.lisn-transition__disable{transition-property:none}.lisn-animate__disable{animation-name:none}.lisn-animate__pause{animation-play-state:paused}.lisn-animate__reverse{animation-direction:reverse}.lisn-animate__infinite{animation-iteration-count:infinite}.lisn-hide-scroll::-webkit-scrollbar{display:none}.lisn-hide-scroll{scrollbar-width:none}body[data-lisn-has-modal]{overflow:hidden}.lisn-border-size{box-sizing:border-box}.lisn-undisplay{display:none}.lisn-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lisn-no-touch-action{touch-action:none}.lisn-ghost{left:0;opacity:0;pointer-events:none;position:absolute;top:0;visibility:hidden;z-index:-1000}.lisn-wrapper{position:relative}.lisn-wrapper-inline{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.lisn-overlay-container{position:relative}.lisn-overlay{contain:strict;pointer-events:none;visibility:hidden;z-index:-99999}:root{--lisn-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,rgba(0,0,0,.12) 0px 1px 18px 0px;--lisn-window--top:0px;--lisn-window--height:calc(100vh - var(--lisn-window--top))}.lisn-close-button{aspect-ratio:1;background:none;border:none;color:inherit;cursor:pointer;height:max(15px,min(10%,30px));margin:1em 2em 1em 1em;opacity:.4;outline:none;padding:0;position:absolute;right:0;top:0;width:auto}.lisn-close-button:hover{opacity:1}.lisn-close-button:after,.lisn-close-button:before{background:var(--lisn-close-button--bg,currentColor);content:"";height:100%;left:50%;position:absolute;top:0;width:2px}.lisn-close-button:before{transform:translateX(-50%) rotate(45deg)}.lisn-close-button:after{transform:translateX(-50%) rotate(-45deg)}.lisn-offcanvas__root{transition-duration:var(--animate-duration,.35s)}.lisn-offcanvas__root,.lisn-offcanvas__root *{box-sizing:border-box}.lisn-offcanvas__root .lisn-close-button{--lisn-close-button--bg:var(--lisn-offcanvas--x-color,currentColor)}.lisn-offcanvas__root{align-items:stretch;background:var(--lisn-offcanvas--bg,var(--lisn-color-bg-t));display:flex;pointer-events:none;position:fixed;visibility:hidden;z-index:999999}.lisn-offcanvas__root[data-lisn-is-open=true]{pointer-events:auto;visibility:visible}.lisn-offcanvas__root .lisn-offcanvas__outer-wrapper,.lisn-offcanvas__root .lisn-offcanvas__overlay{opacity:0;transition-duration:var(--animate-duration,.35s);transition-property:opacity}.lisn-offcanvas__root[data-lisn-is-open=true] .lisn-offcanvas__outer-wrapper,.lisn-offcanvas__root[data-lisn-is-open=true] .lisn-offcanvas__overlay{opacity:1}.lisn-offcanvas__root .lisn-close-button{opacity:0;transition-duration:.1s;transition-property:opacity}.lisn-offcanvas__root[data-lisn-is-open=true] .lisn-close-button{opacity:.4}.lisn-offcanvas__root[data-lisn-is-open=true] .lisn-close-button:hover{opacity:1}.lisn-offcanvas__root .lisn-offcanvas__overlay{height:100%;left:0;position:absolute;top:0;width:100%;--lisn_bdf:blur(6px);-webkit-backdrop-filter:var(--lisn_bdf);backdrop-filter:var(--lisn_bdf);background:none;z-index:-1}.lisn-offcanvas__root .lisn-offcanvas__outer-wrapper{--lisn_hpad:var(--lisn-offcanvas--h-padding,3em);--lisn_vpad:var(--lisn-offcanvas--v-padding,3em);height:auto;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--lisn_vpad)*1.1),transparent calc(100% - var(--lisn_vpad)*.4)),linear-gradient(-90deg,#000 var(--lisn_hpad),transparent var(--lisn_hpad));mask-image:linear-gradient(180deg,#000 calc(100% - var(--lisn_vpad)*1.1),transparent calc(100% - var(--lisn_vpad)*.4)),linear-gradient(-90deg,#000 var(--lisn_hpad),transparent var(--lisn_hpad));mask-mode:alpha;overflow:auto;padding:var(--lisn_vpad) var(--lisn_hpad);width:100%}.lisn-offcanvas__root .lisn-offcanvas__inner-wrapper{display:flex;flex-direction:column;justify-content:center;min-height:100%;position:relative}.lisn-offcanvas__root{box-shadow:var(--lisn-offcanvas--shadow,var(--lisn-shadow))}.lisn-offcanvas__root[data-lisn-place][data-lisn-is-open=true]{transform:translateZ(0)}.lisn-offcanvas__root[data-lisn-place=bottom],.lisn-offcanvas__root[data-lisn-place=top]{height:var(--lisn-offcanvas--height,auto);max-height:var(--lisn-offcanvas--max-height,100%);min-height:var(--lisn-offcanvas--min-height,auto);width:100%}.lisn-offcanvas__root[data-lisn-place=top]{bottom:auto;left:0;right:auto;top:var(--lisn-window--top);transform:translate3d(0,-100%,0)}.lisn-offcanvas__root[data-lisn-place=bottom]{bottom:0;left:0;right:auto;top:auto;transform:translate3d(0,100%,0)}.lisn-offcanvas__root[data-lisn-place=left],.lisn-offcanvas__root[data-lisn-place=right]{height:var(--lisn-window--height);max-width:var(--lisn-offcanvas--max-width,100%);min-width:var(--lisn-offcanvas--min-width,auto);width:var(--lisn-offcanvas--width,400px)}.lisn-offcanvas__root[data-lisn-place=left]{bottom:auto;left:0;right:auto;top:var(--lisn-window--top);transform:translate3d(-100%,0,0)}.lisn-offcanvas__root[data-lisn-place=right]{bottom:auto;left:auto;right:0;top:var(--lisn-window--top);transform:translate3d(100%,0,0)}.lisn-offcanvas__trigger{--openable-icon--animate-duration:var(--animate-duration,0.35s);cursor:pointer}