alwan/dist/css/alwan.min.css

A simple, lightweight, customizable, touch friendly color picker, written in vanilla javascript with zero dependencies.

:root{--alwan-pattern:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'%3E%3Cpath fill='%23D0D0D0' d='M0 0h10v10H0Z'/%3E%3Cpath fill='%23fff' d='M0 10h10v10H0Z'/%3E%3Cpath fill='%23D0D0D0' d='M10 10h10v10H10Z'/%3E%3Cpath fill='%23fff' d='M10 0h10v10H10Z'/%3E%3C/svg%3E")}.alwan{--bg:#fff;--fg:#333;--outer-bc:#ccc;--bc:#ccc;--btn-bg-hover:#f0f0f0;--thumb-bg:#fff;--thumb-bg-hover:#f0f0f0;--label-color:#555;--input-bg:#fafafa;--input-bg-hover:#f0f0f0;--input-bc-hover:#a8a8a8;--swatches-bg:#f5f5f5;background:var(--bg);border:1px solid var(--outer-bc);max-width:260px;overflow:hidden;width:260px}.alwan *{box-sizing:border-box}.alwan>div{width:260px}.alwan__popover-container{height:0;transform:translate(0);width:0}.alwan__popover-container>.alwan{border:0;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);height:auto;left:0;overflow:auto;position:fixed;top:0;z-index:999999}.alwan:not(.alwan--open){height:0;overflow:hidden;visibility:hidden}.alwan.alwan--dark{--bg:#111;--fg:#ccc;--outer-bc:#aaa;--bc:#34373a;--btn-bg-hover:#444;--thumb-bg:#151515;--thumb-bg-hover:#242424;--label-color:#d8d8d8;--input-bg:#181818;--input-bg-hover:#272727;--input-bc-hover:#484b4d;--swatches-bg:#151515}.alwan__container{align-items:center;border-top:1px solid var(--bc);display:flex;padding:10px 15px;position:relative}.alwan__container>*{width:100%}.alwan__selector{background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,hsl(var(--h,0),100%,50%));height:136px;outline:0;overflow:hidden;touch-action:none;user-select:none}.alwan__selector:focus .alwan__cursor{box-shadow:0 0 1px 2px #117ce0}.alwan__selector[tabindex]{cursor:crosshair}.alwan__selector[tabindex]:active,.alwan__selector[tabindex]:active>.alwan__cursor{cursor:grabbing}.alwan__selector[tabindex] .alwan__cursor{cursor:grab;cursor:-webkit-grab}.alwan__cursor{background:transparent;border:2px solid #fff;border-radius:100%;box-shadow:0 0 1px 1px rgba(0,0,0,.3);height:16px;left:-8px;position:relative;top:-8px;width:16px}.alwan__preview{--color:rgb(var(--rgb),var(--a));border:1px solid var(--bc);border-radius:5px;flex-shrink:0;height:42px;margin-right:15px;width:42px}.alwan__preview .alwan__cp{align-items:center;border-radius:0;color:#fff;display:flex;height:100%;justify-content:center;margin:0;opacity:0;position:relative;width:100%}.alwan__preview .alwan__cp:focus,.alwan__preview .alwan__cp:hover:not(:disabled){background-color:rgba(0,0,0,.6);opacity:1;z-index:100}.alwan__preview .alwan__cp:focus-visible{border:0}.alwan__slider{--hue-track:linear-gradient(90deg,red,#f0f,#00f,#0ff,#0f0,#ff0,red);--alpha-track:linear-gradient(90deg,transparent,rgb(var(--rgb))),var(--alwan-pattern);-webkit-appearance:none;appearance:none;background-color:transparent;cursor:pointer;display:block;height:15px;margin:0;outline:0;padding:0;touch-action:none;user-select:none;width:100%}.alwan__slider:active{cursor:grabbing;cursor:-webkit-grabbing}.alwan__slider::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;border:0;border-radius:8px;height:15px;width:100%}.alwan__slider::-moz-range-track{border:0;border-radius:8px;height:15px;width:100%}.alwan__slider:focus-visible::-webkit-slider-runnable-track{outline:2px solid rgba(17,124,224,.5);outline-offset:2px}.alwan__slider:focus-visible::-moz-range-track{outline:2px solid rgba(17,124,224,.5);outline-offset:2px}.alwan__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--thumb-bg);border:1px solid #999;border-radius:100%;box-shadow:0 0 1px 1px rgba(0,0,0,.3);height:20px;margin-top:-2.5px;width:20px}.alwan__slider::-moz-range-thumb{background-color:var(--thumb-bg);border:1px solid #999;border-radius:100%;box-shadow:0 0 1px 1px rgba(0,0,0,.3);box-sizing:border-box;height:20px;padding:0;width:20px}.alwan__slider:not(:disabled)::-webkit-slider-thumb:hover{background:var(--thumb-bg-hover);border-color:#555;cursor:grab;cursor:-webkit-grab}.alwan__slider:not(:disabled)::-moz-range-thumb:hover{background:var(--thumb-bg-hover);border-color:#555;cursor:grab;cursor:-webkit-grab}.alwan__slider:active:not(:disabled)::-webkit-slider-thumb{cursor:grabbing;cursor:-webkit-grabbing;outline:5px solid rgba(17,124,224,.3)}.alwan__slider:active:not(:disabled)::-moz-range-thumb{cursor:grabbing;cursor:-webkit-grabbing;outline:5px solid rgba(17,124,224,.3)}.alwan__slider:focus::-webkit-slider-thumb{border-color:#117ce0}.alwan__slider:focus::-moz-range-thumb{border-color:#117ce0}.alwan__slider:disabled{cursor:default;opacity:.5}.alwan__hue{direction:rtl}.alwan__hue::-webkit-slider-runnable-track{background:var(--hue-track)}.alwan__hue::-moz-range-track{background:var(--hue-track)}.alwan__alpha{margin-top:14px}.alwan__alpha::-webkit-slider-runnable-track{background:var(--alpha-track)}.alwan__alpha::-moz-range-track{background:var(--alpha-track)}.alwan__inputs{display:flex}.alwan__inputs>label{color:var(--label-color);cursor:pointer;font-family:system-ui;font-size:13px;margin-right:4px;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none}.alwan__input,.alwan__inputs>label{line-height:1;text-align:center;width:100%}.alwan__input{background-color:var(--input-bg);border:1px solid var(--bc);border-radius:2px;color:var(--fg);display:block;font-family:monospace;font-size:14px;margin-bottom:3px;padding:8px 0;transition:border-color .2s,background-color .2s}.alwan__input::selection{background-color:#117ce0;color:#fff}.alwan__input:focus{background-color:var(--bg);border-color:#117ce0;outline:0}.alwan__input:focus+span{color:#117ce0}.alwan__input:hover:not(:focus,:disabled){background-color:var(--input-bg-hover);border-color:var(--input-bc-hover)}.alwan__input:disabled,.alwan__input:disabled+span{opacity:.5}.alwan__swatches{background-color:var(--swatches-bg);border-top:1px solid var(--bc);display:flex;flex-wrap:wrap;justify-content:center;max-height:100px;overflow-y:auto;padding:10px 15px 0}.alwan__button{background:transparent;border:1px solid transparent;color:var(--fg);cursor:pointer;display:inline-block;outline:0;padding:8px 4px;transition:background-color .2s ease-in-out;width:auto}.alwan__button:disabled{cursor:not-allowed;opacity:.5}.alwan__button:hover:not(:disabled){background-color:var(--btn-bg-hover)}.alwan__button:focus-visible:not(.alwan__ref){border-color:#117ce0}.alwan__button svg{fill:currentColor;pointer-events:none;vertical-align:middle}.alwan__swatch{border-radius:3px;height:22px;margin:0 5px 10px;width:22px}.alwan__swatch:hover:not(:disabled){transform:scale(1.1)}.alwan__swatch:focus{outline:1px solid var(--color);outline-offset:1px}.alwan__ref{border:3px solid #f5f5f5;border-radius:3px;flex-shrink:0;height:26px;outline:1px solid #333;width:26px}.alwan__ref:focus,.alwan__ref:focus-visible{box-shadow:0 0 2px 2px #117ce0;outline-color:#117ce0}.alwan__cp{margin-right:15px}.alwan__preview,.alwan__ref,.alwan__swatch{background:var(--alwan-pattern);background-clip:padding-box;overflow:hidden;padding:0;position:relative}.alwan__preview:before,.alwan__ref:before,.alwan__swatch:before{background:var(--color);content:"";height:100%;left:0;position:absolute;top:0;width:100%}.alwan__toggle-button{align-items:center;border-top:1px solid var(--bc);display:flex;height:10px;justify-content:center;overflow:hidden;padding:0;width:100%}.alwan--collapse.alwan__swatches{display:none}.alwan--collapse+.alwan__toggle-button svg{transform:rotate(180deg)}
/*# sourceMappingURL=alwan.min.css.map */