framework7/components/color-picker/color-picker.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-color-picker-popover-width:350px;--f7-color-picker-slider-size:6px;--f7-color-picker-bar-size:50px;--f7-color-picker-bar-min-height:260px;--f7-color-picker-value-width:64px;--f7-color-picker-value-height:32px;--f7-color-picker-value-font-size:16px;--f7-color-picker-value-border-radius:8px;--f7-color-picker-hex-value-width:84px;--f7-color-picker-label-font-size:14px;--f7-color-picker-label-width:10px;--f7-color-picker-label-height:14px;--f7-color-picker-sb-spectrum-height:260px;--f7-color-picker-sb-spectrum-handle-size:16px;--f7-color-picker-wheel-width:330px;--f7-color-picker-palette-value-width:36px;--f7-color-picker-palette-value-height:36px;--f7-color-picker-initial-current-color-height:40px;--f7-color-picker-sheet-bg-color:#fff;--f7-color-picker-popup-bg-color:#fff;--f7-color-picker-value-bg-color:#0000000d;--f7-color-picker-group-bg-color:#0000000d;--f7-color-picker-group-value-bg-color:#fff}:root .dark,:root.dark{--f7-color-picker-sheet-bg-color:#121212;--f7-color-picker-popup-bg-color:#121212;--f7-color-picker-value-bg-color:#ffffff1a;--f7-color-picker-group-bg-color:#000;--f7-color-picker-group-value-bg-color:#ffffff1f}.ios{--f7-color-picker-initial-current-color-border-radius:16px}.md{--f7-color-picker-initial-current-color-border-radius:4px}.color-picker{display:flex;flex-direction:column;overflow:hidden;width:100%}.color-picker-popover .color-picker,.color-picker-popup .color-picker,.color-picker.color-picker-inline{position:relative}.color-picker-sheet-modal{background:var(--f7-color-picker-sheet-bg-color)}.color-picker-sheet-modal:before{z-index:600}.color-picker-sheet-modal .sheet-modal-inner{margin-bottom:var(--f7-safe-area-bottom)}.color-picker-popup .page{background:var(--f7-color-picker-popup-bg-color)}.color-picker-popup .page-content{padding-bottom:var(--f7-safe-area-bottom)}.color-picker-page .color-picker,.color-picker-popover .color-picker,.color-picker-popup .color-picker{height:100%}.color-picker-page .color-picker .toolbar,.color-picker-popover .color-picker .toolbar,.color-picker-popup .color-picker .toolbar{position:absolute}.color-picker-popover{max-height:80vh;max-width:90vw;width:var(--f7-color-picker-popover-width)}.md .color-picker-popover .popover-inner{padding:8px}.color-picker-popover .color-picker{max-height:80vh}.color-picker-popover .toolbar-top{border-top-left-radius:var(--f7-popover-border-radius);border-top-right-radius:var(--f7-popover-border-radius)}.color-picker-popover .color-picker-module-palette{flex-shrink:0;overflow:hidden}.color-picker-popover .color-picker-module-palette:first-child{border-top-left-radius:var(--f7-popover-border-radius);border-top-right-radius:var(--f7-popover-border-radius)}.color-picker-popover .color-picker-module-palette:last-child{border-bottom-left-radius:var(--f7-popover-border-radius);border-bottom-right-radius:var(--f7-popover-border-radius)}.color-picker-popover .color-picker-module-palette:first-child:last-child{border-radius:var(--f7-popover-border-radius)}.color-picker-popover .toolbar~.page-content .color-picker-module-palette:first-child{border-top-left-radius:0;border-top-right-radius:0}.color-picker-page .page-content,.color-picker-popover .page-content,.color-picker-popup .page-content,.color-picker-sheet-modal .page-content{align-items:stretch;display:flex;flex-direction:column;justify-content:flex-start;overflow-x:hidden}.color-picker-module{margin-top:5px}.color-picker-module:last-child{margin-bottom:5px}.color-picker-module-hs-spectrum,.color-picker-module-sb-spectrum{margin-left:10px;margin-right:10px}.color-picker-module-hs-spectrum:first-child,.color-picker-module-sb-spectrum:first-child{margin-top:10px}.color-picker-module-hs-spectrum .color-picker-hs-spectrum,.color-picker-module-hs-spectrum .color-picker-sb-spectrum,.color-picker-module-sb-spectrum .color-picker-hs-spectrum,.color-picker-module-sb-spectrum .color-picker-sb-spectrum{height:var(--f7-color-picker-sb-spectrum-height)}.ios .color-picker-module-hs-spectrum .color-picker-hs-spectrum,.ios .color-picker-module-hs-spectrum .color-picker-sb-spectrum,.ios .color-picker-module-sb-spectrum .color-picker-hs-spectrum,.ios .color-picker-module-sb-spectrum .color-picker-sb-spectrum{border-radius:4px}.md .color-picker-module-hs-spectrum .color-picker-hs-spectrum,.md .color-picker-module-hs-spectrum .color-picker-sb-spectrum,.md .color-picker-module-sb-spectrum .color-picker-hs-spectrum,.md .color-picker-module-sb-spectrum .color-picker-sb-spectrum{border-radius:12px}.md .color-picker-module-hs-spectrum .color-picker-hs-spectrum:after,.md .color-picker-module-hs-spectrum .color-picker-sb-spectrum:after,.md .color-picker-module-sb-spectrum .color-picker-hs-spectrum:after,.md .color-picker-module-sb-spectrum .color-picker-sb-spectrum:after{border-radius:inherit}.color-picker-sb-spectrum{background-color:#000;background-image:linear-gradient(180deg,#0000 0,#000),linear-gradient(270deg,#fff0 0,#fff);position:relative}.color-picker-hs-spectrum{background-image:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);position:relative}.color-picker-hs-spectrum:after{background-image:linear-gradient(180deg,#fff0,#fff);content:"";height:100%;left:0;position:absolute;top:0;width:100%}.color-picker-hs-spectrum-handle,.color-picker-sb-spectrum-handle{height:4px;left:-2px;position:absolute;top:-2px;width:4px;z-index:1}.color-picker-hs-spectrum-handle:after,.color-picker-sb-spectrum-handle:after{background-color:inherit;border:1px solid #fff;border-radius:50%;box-shadow:0 0 2px #00000080;box-sizing:border-box;content:"";height:var(--f7-color-picker-sb-spectrum-handle-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transform-origin:center;transition:.15s;transition-property:transform;width:var(--f7-color-picker-sb-spectrum-handle-size)}.color-picker-hs-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after,.color-picker-hs-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,.color-picker-sb-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after,.color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after{transform:scale(1.5) translate(-33.333%,-33.333%)}.color-picker-module-wheel{margin-left:10px;margin-right:10px}.color-picker-wheel{font-size:0;height:auto;margin-left:auto;margin-right:auto;max-width:100%;position:relative;width:var(--f7-color-picker-wheel-width)}.color-picker-wheel svg{height:auto;width:100%}.color-picker-wheel .color-picker-wheel-handle{background:red;border:2px solid #fff;border-radius:50%;box-shadow:0 0 5px #00000080;box-sizing:border-box;height:16.66666667%;left:0;position:absolute;top:0;width:16.66666667%}.color-picker-wheel .color-picker-sb-spectrum{height:45%;left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0);width:45%}.color-picker-slider-wrap{align-items:center;display:flex;margin-bottom:2px}.color-picker-slider-wrap+.color-picker-slider-wrap{margin-top:5px}.color-picker-hex-wrap{align-items:center;display:flex;justify-content:space-between}.color-picker-hex-label,.color-picker-slider-label{flex-shrink:0;font-size:var(--f7-color-picker-label-font-size);margin-right:12px;width:var(--f7-color-picker-label-size)}.color-picker-hex-label{width:auto}.color-picker-bar-value,.color-picker-hex-value,.color-picker-slider-value{align-items:center;background:var(--f7-color-picker-value-bg-color);border-radius:var(--f7-color-picker-value-border-radius);display:flex;flex-shrink:0;font-size:var(--f7-color-picker-value-font-size);height:var(--f7-color-picker-value-height);justify-content:center;margin-left:10px;text-align:center;width:var(--f7-color-picker-value-width)}.color-picker-bar-value input,.color-picker-hex-value input,.color-picker-slider-value input{appearance:none;background:#0000;border:none;border-radius:inherit;color:inherit;display:block;font-family:inherit;font-size:inherit;height:100%;outline:0;text-align:center;width:100%}.color-picker-bar-value input::-webkit-inner-spin-button,.color-picker-bar-value input::-webkit-outer-spin-button,.color-picker-hex-value input::-webkit-inner-spin-button,.color-picker-hex-value input::-webkit-outer-spin-button,.color-picker-slider-value input::-webkit-inner-spin-button,.color-picker-slider-value input::-webkit-outer-spin-button{appearance:none;display:none;margin:0}.color-picker-hex-value{width:var(--f7-color-picker-hex-value-width)}.color-picker-hex-value:first-child{margin-left:auto}.color-picker-slider{--f7-range-bar-active-bg-color:#0000;--f7-range-bar-size:var(--f7-color-picker-slider-size);--f7-range-bar-border-radius:var(--f7-color-picker-slider-size)}.color-picker-slider .range-knob{transition-duration:.2s;transition-property:transform}.color-picker-slider .range-knob-active-state .range-knob{transform:scale(1.5)}.md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob{background:var(--f7-range-knob-color)!important;border:none}.color-picker-module-rgb-bars{align-items:stretch;box-sizing:border-box;display:flex;height:100%;justify-content:space-around;justify-content:space-evenly;min-height:var(--f7-color-picker-bar-min-height);padding-bottom:10px;padding-top:10px}.color-picker-bar-wrap{align-items:center;display:flex;flex-direction:column-reverse}.color-picker-bar{--f7-range-bar-active-bg-color:#0000;--f7-range-bar-size:var(--f7-color-picker-bar-size)}.color-picker-bar .range-knob-wrap{--f7-range-knob-width:6px;--f7-range-knob-height:calc(var(--f7-color-picker-bar-size) - 4px)}.md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob{background:var(--f7-range-knob-color)!important;border:none}.color-picker-bar-label{flex-shrink:0;font-size:var(--f7-color-picker-label-size);height:var(--f7-color-picker-label-height);line-height:1;margin-top:12px}.color-picker-bar-value{margin-bottom:10px;margin-left:0}.color-picker-slider-alpha{--f7-range-knob-color:#fff}.color-picker-slider-alpha .range-bar{background-image:linear-gradient(90deg,#0000,#000),linear-gradient(90deg,#fff3 50%,#0003 0),linear-gradient(270deg,#fff3 50%,#0003 0);background-position:0 0,0 3px,0 0;background-repeat:repeat-y,repeat-x,repeat-x;background-size:100% 100%,6px 3px,6px 3px}.color-picker-slider-hue .range-bar{background-image:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker-slider-brightness .range-bar{background-image:linear-gradient(90deg,#000,#fff)}.color-picker-module-palette{margin-top:16px}.color-picker-module-palette:first-child{margin-top:0}.color-picker-module-palette:last-child{margin-bottom:0}.color-picker-module-palette:first-child:last-child{margin:0}.color-picker-palette{display:flex;flex-wrap:wrap}.color-picker-palette-row{display:flex;flex-wrap:nowrap;width:100%}.color-picker-palette-row .color-picker-palette-value{width:100%}.color-picker-palette-value{cursor:pointer;height:var(--f7-color-picker-palette-value-height);width:var(--f7-color-picker-palette-value-width)}.color-picker-module-current-color,.color-picker-module-initial-current-colors{border-radius:var(--f7-color-picker-initial-current-color-border-radius);flex-shrink:0;margin-left:10px;margin-right:10px;overflow:hidden}.color-picker-current-color,.color-picker-initial-color{height:var(--f7-color-picker-initial-current-color-height)}.color-picker-initial-current-colors{display:flex}.color-picker-initial-current-colors .color-picker-current-color,.color-picker-initial-current-colors .color-picker-initial-color{width:50%}.color-picker-module-alpha-slider,.color-picker-module-brightness-slider,.color-picker-module-hex,.color-picker-module-hsb-sliders,.color-picker-module-hue-slider,.color-picker-module-rgb-sliders{margin-left:10px;margin-right:10px}.color-picker-grouped-modules .color-picker-module-alpha-slider,.color-picker-grouped-modules .color-picker-module-brightness-slider,.color-picker-grouped-modules .color-picker-module-hex,.color-picker-grouped-modules .color-picker-module-hsb-sliders,.color-picker-grouped-modules .color-picker-module-hue-slider,.color-picker-grouped-modules .color-picker-module-rgb-sliders{background:var(--f7-color-picker-group-bg-color);border-radius:8px;margin-left:8px;margin-right:8px;margin-top:16px;padding:8px}.color-picker-grouped-modules .color-picker-module-alpha-slider:last-child,.color-picker-grouped-modules .color-picker-module-brightness-slider:last-child,.color-picker-grouped-modules .color-picker-module-hex:last-child,.color-picker-grouped-modules .color-picker-module-hsb-sliders:last-child,.color-picker-grouped-modules .color-picker-module-hue-slider:last-child,.color-picker-grouped-modules .color-picker-module-rgb-sliders:last-child{margin-bottom:16px}.color-picker-grouped-modules .color-picker-hex-value,.color-picker-grouped-modules .color-picker-slider-value{background:var(--f7-color-picker-group-value-bg-color)}.color-picker-grouped-modules .color-picker-hex-label,.color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:first-child,.color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:first-child,.color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:first-child,.color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:first-child,.color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:first-child,.color-picker-grouped-modules .color-picker-slider-label{margin-left:5px}.color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:last-child,.color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:last-child,.color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:last-child,.color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:last-child,.color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:last-child{margin-right:5px}.ios .color-picker-popover .color-picker,.ios .color-picker-popover .page-content{overflow:visible}.ios .color-picker-popover .popover-inner{padding:16px 8px}.md .color-picker-bar:after,.md .color-picker-bar:before,.md .color-picker-slider:after,.md .color-picker-slider:before{display:none}.md .color-picker-bar{--f7-range-bar-border-radius:4px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 0px 3px #0000004d}.md .color-picker-slider{--f7-range-knob-height:16px}