GetColor!

root / css / GetColor.min.css

GetColor.min.css

8.6 KB CSS
.unvisible{display:none !important}.no-selection{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-khtml-user-select:none;-o-user-select:none}section{padding:0.5rem}.offset_light{-webkit-transform:translate(1px, 1px);transform:translate(1px, 1px)}.offset_standard{-webkit-transform:translate(2px, 2px);transform:translate(2px, 2px)}span,label{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.getcolor-colorsblock{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:0}.getcolor-colorsblock__color{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;border:solid 2px rgba(255,255,255,0.6);width:1rem;height:1rem;cursor:pointer;margin-right:0.5rem;margin-bottom:0.5rem}.getcolor-colorsblock__color:nth-child(12n){margin-right:0}.getcolor-colorsblock__color:active{-webkit-transform:translateY(1px) translateX(1px);transform:translateY(1px) translateX(1px)}.getcolor-colorsblock__color_c1{background:#fb8581}.getcolor-colorsblock__color_c2{background:#fffe7f}.getcolor-colorsblock__color_c3{background:#82fd80}.getcolor-colorsblock__color_c4{background:#02fe85}.getcolor-colorsblock__color_c5{background:#81fff7}.getcolor-colorsblock__color_c6{background:#047cff}.getcolor-colorsblock__color_c7{background:#fe7fc4}.getcolor-colorsblock__color_c8{background:#fd82ff}.getcolor-colorsblock__color_c9{background:red}.getcolor-colorsblock__color_c10{background:#fdfe03}.getcolor-colorsblock__color_c11{background:#80ff00}.getcolor-colorsblock__color_c12{background:#00ff41}.getcolor-colorsblock__color_c13{background:#00feff}.getcolor-colorsblock__color_c14{background:#0080bf}.getcolor-colorsblock__color_c15{background:#817ec1}.getcolor-colorsblock__color_c16{background:#f0f}.getcolor-colorsblock__color_c17{background:#804041}.getcolor-colorsblock__color_c18{background:#fe8340}.getcolor-colorsblock__color_c19{background:lime}.getcolor-colorsblock__color_c20{background:#008081}.getcolor-colorsblock__color_c21{background:#004080}.getcolor-colorsblock__color_c22{background:#807fff}.getcolor-colorsblock__color_c23{background:#810041}.getcolor-colorsblock__color_c24{background:#ff0080}.getcolor-colorsblock__color_c25{background:maroon}.getcolor-colorsblock__color_c26{background:#ff7e00}.getcolor-colorsblock__color_c27{background:#028002}.getcolor-colorsblock__color_c28{background:#008040}.getcolor-colorsblock__color_c29{background:blue}.getcolor-colorsblock__color_c30{background:#0101a1}.getcolor-colorsblock__color_c31{background:#7f017f}.getcolor-colorsblock__color_c32{background:#7f00ff}.getcolor-colorsblock__color_c33{background:#460000}.getcolor-colorsblock__color_c34{background:#7c3d00}.getcolor-colorsblock__color_c35{background:#004200}.getcolor-colorsblock__color_c36{background:#004345}.getcolor-colorsblock__color_c37{background:navy}.getcolor-colorsblock__color_c38{background:#000037}.getcolor-colorsblock__color_c39{background:#42023e}.getcolor-colorsblock__color_c40{background:#44007c}.getcolor-colorsblock__color_c41{background:#000}.getcolor-colorsblock__color_c42{background:#848000}.getcolor-colorsblock__color_c43{background:#808040}.getcolor-colorsblock__color_c44{background:gray}.getcolor-colorsblock__color_c45{background:#408080}.getcolor-colorsblock__color_c46{background:silver}.getcolor-colorsblock__color_c47{background:#400041}.getcolor-colorsblock__color_c48{background:#fff}.getcolor-pickerblock{padding-top:0}.getcolor-pickerblock__picker{width:100%;height:6rem;background:-webkit-gradient(linear, left top, right top, from(#fff), to(red));background:linear-gradient(90deg, #fff 0%, red 100%);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:crosshair;position:relative}.getcolor-pickerblock__picker::before{display:block;width:100%;height:6rem;background:-webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0,0,0,0)));background:linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 100%);-webkit-box-sizing:border-box;box-sizing:border-box;content:'.';color:transparent}.getcolor-pickerblock__picker-cursor{display:block;width:10px;height:10px;background:rgba(0,0,0,0.1);position:absolute;content:' ';border:solid 1px;-webkit-box-shadow:0 0 2px 1px rgba(0,0,0,0.5);box-shadow:0 0 2px 1px rgba(0,0,0,0.5);border-radius:5px;top:0;left:calc(100% - 12px)}.getcolor-hslcodeblock{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0.5rem 0.5rem 0.5rem;max-height:5rem;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.getcolor-hslcodeblock__prefix{max-width:6rem;font-family:'Montserrat', sans-serif;font-size:1rem;background:#413e53;color:white;padding:0.2rem;-webkit-box-sizing:border-box;box-sizing:border-box;border:solid 2px rgba(255,255,255,0.1)}.getcolor-hslcodeblock__hsl{max-width:2.5rem;padding:0;font-family:'Montserrat', sans-serif;font-size:1rem;background:#413e53;border:none;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.getcolor-huelineblock,.getcolor-satlineblock,.getcolor-lightlineblock{-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:0.3rem;position:relative}.getcolor-huelineblock__table,.getcolor-satlineblock__table,.getcolor-lightlineblock__table{width:100%;border-collapse:collapse}.getcolor-huelineblock__table_cursor,.getcolor-satlineblock__table_cursor,.getcolor-lightlineblock__table_cursor{display:none;position:absolute}.getcolor-huelineblock__table tbody,.getcolor-satlineblock__table tbody,.getcolor-lightlineblock__table tbody{position:relative}.getcolor-huelineblock__line,.getcolor-satlineblock__line,.getcolor-lightlineblock__line{padding:0;height:1.5rem}.getcolor-huelineblock__picker-cursor,.getcolor-satlineblock__picker-cursor,.getcolor-lightlineblock__picker-cursor{display:block;width:12px;height:1.5rem;background:rgba(0,0,0,0.1);position:absolute;content:' ';border:solid 1px;-webkit-box-shadow:0 0 2px 1px rgba(0,0,0,0.5);box-shadow:0 0 2px 1px rgba(0,0,0,0.5);top:-25px;left:calc(50%)}.getcolor-hexcodeblock{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0.5rem;max-height:5rem;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.getcolor-hexcodeblock__fieldblock{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}.getcolor-hexcodeblock__label{font-weight:500;text-align:center;padding-bottom:0.5rem}.getcolor-hexcodeblock__codefield{font-family:'Montserrat', sans-serif;font-size:1rem;background:#413e53;color:white;padding:0.2rem;-webkit-box-sizing:border-box;box-sizing:border-box;border:solid 2px rgba(255,255,255,0.1);text-align:center}.getcolor-hexcodeblock__codefield_rgba{max-width:3rem}.getcolor-hexcodeblock__codefield_hex{max-width:4rem;padding:0;font-family:'Montserrat', sans-serif;font-size:1rem;background:#413e53;border:none;color:white;-webkit-box-sizing:border-box;box-sizing:border-box}.getcolor-hexcodeblock__codefield_prefix{padding-right:0}.getcolor-buttonsblock{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:0.4rem}.getcolor-buttonsblock__button{font-size:0.8rem;padding:0.5rem;background:rgba(255,255,255,0.3);height:1rem;border-radius:5px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex}.getcolor-buttonsblock__button span{font-weight:500;padding-left:0.3rem}.getcolor-buttonsblock__button:active{-webkit-transform:translate(2px, 2px);transform:translate(2px, 2px)}.getcolor-buttonsblock__button_rgba{display:none}.getcolor-buttonsblock__button_hsla{display:none}.getcolor__colorwrapper{background-image:linear-gradient(45deg, gray 25%, transparent 25%),linear-gradient(-45deg, gray 25%, transparent 25%),linear-gradient(45deg, transparent 75%, gray 75%),linear-gradient(-45deg, transparent 75%, gray 75%);background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px}.getcolor__color{background:red;height:2rem;width:2rem;border-radius:5px;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;border:solid 3px rgba(255,255,255,0.3)}.getcolor__color:active{-webkit-transform:translate(2px, 2px);transform:translate(2px, 2px)}.getcolor-helpblock{-webkit-box-sizing:border-box;box-sizing:border-box}.getcolor-helpblock h2{font-size:1rem;font-weight:600;margin:0}.getcolor-helpblock p{font-size:0.8rem;font-weight:500;margin:0.5rem 0 0.3rem 0}.getcolor-helpblock a{color:#fff;text-decoration:none;cursor:pointer}

О проекте

Описание

Генератор и подбор цветов с превью в различных цветовых системах (RGB, RGBA, HEX, HSL, HSLA)

Лицензия

GPL-3.0

Технологии

PHP JavaScript CSS HTML