/* * Bootstrap Color Picker Sliders - v3.0.1 * * Bootstrap 3 optimized responsive color selector with HSV, HSL, RGB and CIE-Lch (which supports human perceived lightness) selectors and color swatches. * http://www.virtuosoft.eu/code/bootstrap-colorpickersliders/ * * Made by István Ujj-Mészáros * Under Apache License v2.0 License * * Requirements: * * TinyColor: https://github.com/bgrins/TinyColor/ * * Using color math algorithms from EasyRGB Web site:/ * http://www.easyrgb.com/index.php?X=MATH */ .cp-container { width: auto; position: relative; box-sizing: border-box; } .cp-container .cp-transparency, .cp-container .cp-swatches .cp-swatch { background:url(data:image/gif;base64,R0lGODlhBgAGAIABAMPDw////yH5BAEKAAEALAAAAAAGAAYAAAIKhIMGGMrs0pGgAAA7) repeat; } .cp-container .cp-slider, .cp-container .cp-preview { width: auto; height: 26px; border: 1px solid #dadada; margin: 0 4px; margin-bottom: 5pt; position: relative; } .cp-container .cp-hsvpanel { width: auto; height: auto; border: none; margin-right: -6px; } .cp-container .cp-hsvpanel .cp-hsvpanel-sv, .cp-container .cp-hsvpanel .cp-hsvpanel-h, .cp-container .cp-hsvpanel .cp-hsvpanel-a { border: 1px solid #dadada; display: inline-block; position: relative; margin: 0 8px 0 4px; } .cp-container .cp-hsvpanel .cp-hsvpanel-sv { width: 122px; height: 122px; cursor: default; } .cp-container .cp-hsvpanel .cp-hsvpanel-h, .cp-container .cp-hsvpanel .cp-hsvpanel-a { width: 30px; height: 122px; cursor: ns-resize; } .cp-container.cp-container-sm .cp-hsvpanel .cp-hsvpanel-h, .cp-container.cp-container-sm .cp-hsvpanel .cp-hsvpanel-a { width: 27px; } .cp-container .cp-hsvpanel .cp-hsvpanel-h { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmYwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjE2Njk5OTk5OTk5OTk5OTk4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwZmYwMCIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzMyOTk5OTk5OTk5OTk5OTYiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDBmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjY3Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmMDBmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODMzIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, #ff0000),color-stop(0.167, #ffff00),color-stop(0.333, #00ff00),color-stop(0.5, #00ffff),color-stop(0.667, #0000ff),color-stop(0.833, #ff00ff),color-stop(1, #ff0000)); background-image: -webkit-linear-gradient(top,#ff0000 0%,#ffff00 16.7%,#00ff00 33.3%,#00ffff 50%,#0000ff 66.7%,#ff00ff 83.3%,#ff0000 100%); background-image: linear-gradient(to bottom,#ff0000 0%,#ffff00 16.7%,#00ff00 33.3%,#00ffff 50%,#0000ff 66.7%,#ff00ff 83.3%,#ff0000 100%); } .cp-container .cp-hsvpanel .cp-hsvpanel-a span, .cp-container .cp-hsvpanel .cp-hsvpanel-sv span { display: block; width: 100%; height: 100%; } .cp-container .cp-hsvpanel .cp-hsvpanel-sv span { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjEwMCUiIHgyPSIwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==); background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,color-stop(0, rgb(0, 0, 0)),color-stop(1, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 0% 0%, 100% 0%,color-stop(0, rgb(255, 255, 255)),color-stop(1, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(bottom,rgb(0, 0, 0) 0%,rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left,rgb(255, 255, 255) 0%,rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to top,rgb(0, 0, 0) 0%,rgba(0, 0, 0, 0) 100%), linear-gradient(to right,rgb(255, 255, 255) 0%,rgba(255, 255, 255, 0) 100%); } .cp-container .cp-slider { cursor: ew-resize; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cp-container .cp-preview { height: 39px; } .cp-container .cp-slider span, .cp-container .cp-preview input { display: block; width: 100%; height: 100%; text-align: center; font-family: sans-serif; line-height: 26px; font-size: 14px; } .cp-container .cp-preview input { line-height: 39px; padding: 0; outline: none; box-shadow: none; border: none; border-radius: 0; background: none; } .cp-container .cp-marker { position: absolute; display: block; width: 11px; height: 10px; margin-left: -5px; top: -2px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAMAAABVLlSxAAAAtFBMVEUAAAB1dXVsbGxwcHBqampoaGj+/v7r6+vw8PBmZmb6+vp/f39kZGTh4eGxsbHT09NlZWXX19dgYGBfX1/W1tb7+/vx8fHZ2dna2tqBgYFnZ2fg4ODe3t7j4+Pi4uL39/eampro6Ojl5eXy8vLt7e3p6emgoKCmpqatra1ra2v19fXm5ubz8/Pv7+9hYWFjY2N5eXlvb29zc3Ps7Ozd3d2ysrKCgoKDg4P9/f2zs7P4+Pj///83Bdu/AAAAAXRSTlMAQObYZgAAAGlJREFUeNo9ylcbgWAAhuG3ZZQoEkkhDe099P3//9Xg6j56Dh6cjkm623IsnTNIDsqlEsN1HBVI5evdDMtN0FOQKt14lWrArzLcnpZjvx9nshcA342jviO1hlHuTdlgVnzIt8VfNubiNwzmhAsoIAkssgAAAABJRU5ErkJggg==); } .cp-container .cp-hsvmarker-vertical { position: absolute; display: block; width: 10px; height: 11px; margin-top: -5px; right: -2px; top: 0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAbFBMVEUAAACysrLz8/NjY2Pw8PBmZmbe3t7////4+PiBgYHs7Oxra2t0dHSDg4Ozs7P9/f3p6enj4+Pa2trh4eFhYWFfX1/X19d5eXlvb2/7+/vm5ub19fXt7e2tra2mpqagoKCamprl5eXT09NwcHAw/sWYAAAAAXRSTlMAQObYZgAAAFtJREFUCNclzNsWQCAURdFDF1RIpZI7//+P6thP82GPBTjGiJtR8uL+Qcbztsa7LHVQPXFDAMLe1pu2nEA3NGNbi2QZQF9MRWKQXTXLSoUshQ6dic73CL+DUu8HF6YEcUMoNOYAAAAASUVORK5CYII=); } .cp-container .cp-marker-point { position: absolute; display: block; width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; left: 0; top: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAALVBMVEX///8AAADX19d7e3t4eHhDQ0NnZ2dzc3NLS0tbW1tTU1POzs7AwMC0tLSoqKgWXydUAAAAAnRSTlN1ACTbQIsAAAA/SURBVAjXYxAUDBcUZBCUeOQIJNcyqAgySB4QZDJkyGYUFFBmMAKS2xiEFQR5JjIIOjHcAqoR0WsEkoKlgoIAHu8JgCiLy9kAAAAASUVORK5CYII=); } .cp-container.cp-unconvertible-cie-color .cp-slider.cp-cielightness .cp-marker, .cp-container.cp-unconvertible-cie-color .cp-slider.cp-ciechroma .cp-marker, .cp-container.cp-unconvertible-cie-color .cp-slider.cp-ciehue .cp-marker { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAMAAABVLlSxAAAAvVBMVEUAAADLy8u8vLzZ2dlgYGDe3t5sbGxoaGjr6+vb29tqamrCwsJmZmZkZGTW1tbExMTw8PDj4+Pa2tpfX1/z8/PU1NTp6enX19fg4OBwcHDc3NzJycn4+Pj7+/v6+vrd3d3h4eH+/v6lpaWmpqaampqgoKBlZWWzs7Orq6tra2uxsbGBgYF1dXVnZ2d/f3/T09PMzMxhYWFjY2P19fXv7+9vb2/l5eVzc3P////n5+eysrKDg4OCgoJ5eXnoAACu7h75AAAAAXRSTlMAQObYZgAAAG1JREFUeNo1ytsaQkAAReGdkpRKRUTofEANBoOY93+sfMp/tS4WNqM4mSvSdJztEJPFkETyJNUYEmMtzvhApfsQN89cCXxJ3WOD1yXfRlx3Cv8NPK+pZedFFaCVnQ+8rGp02Kl8fPDX3Nvs/YYvAnQLhiGwga0AAAAASUVORK5CYII=); } .cp-container .cp-swatches ul { width: auto; margin: -7px -7px 0 0; padding: 0; list-style-type: none; } .cp-container .cp-swatches li { float: left; margin: 7px 7px 0 0; } .cp-swatches button { float: left; margin: 7px 7px 0 0; width: 26px; height: 26px; display: inline-block; font-size: 12px; padding: 0; } .cp-container .cp-swatch { width: 26px; height: 26px; display: inline-block; cursor: pointer; border-color: #ccc; position: relative; overflow: hidden; outline: none; padding: 0; } .cp-container .cp-swatch span { display: block; width: 100%; height: 100%; } .cp-container .cp-swatches .cp-swatch.actual { border-color: #777; -webkit-box-shadow: 0 0 5px rgb(250, 128, 0); -moz-box-shadow: 0 0 5px rgb(250, 128, 0); box-shadow: 0 0 5px rgb(250, 128, 0); } .cp-popover-container .popover { max-width: 1000px; } .popover-content .cp-container { width: 263px; } .popover-content .cp-container.cp-container-sm { width: 208px; } .popover-content .cp-container.cp-container-sm .cp-swatch, .popover-content .cp-container.cp-container-sm .cp-swatches button { width: 23px; height: 23px; } .popover-content .cp-container.cp-container-lg { width: 369px; } .popover-content .cp-container.cp-container-lg .cp-swatch, .popover-content .cp-container.cp-container-lg .cp-swatches button { width: 27px; height: 27px; } .cp-container .cp-pills { display: none; } .cp-container .cp-pills { display: inline-block; } .cp-container .cp-pills { list-style-type: none; margin-bottom: 5px; padding: 0; font-size: 12px; } .cp-container .cp-pills li { display: inline-block; margin: 3px; padding: 3px 0; } .cp-container .cp-pills li a { padding: 5px; color: #000; text-decoration: none; } .cp-container .cp-pills li a:hover, .cp-container .cp-pills li a.active { background-color: #02afff; color: #fff; } .cp-container.hsvpanel-active .cp-sliders, .cp-container.hsvpanel-active .cp-swatches { display: none; } .cp-container.sliders-active .cp-hsvpanel, .cp-container.sliders-active .cp-swatches { display: none; } .cp-container.swatches-active .cp-hsvpanel, .cp-container.swatches-active .cp-sliders { display: none; } .cp-popover-container .cp-sliders, .cp-popover-container .cp-hsvpanel { margin-top: 7px; } .form-control[readonly].cp-preventtouchkeyboardonshow { cursor: text; } .popover-content .cp-container.hsvpanel-active { width: 220px; } /* ================================== */ #post .twoj_block .arrow{ margin-left: 0px; } #post .twoj_block .twoj_slider_span{ padding-left: 10px; padding-right: 10px; } .twoj_border{ border-bottom: 1px solid #E9E9E9; } #post .twoj_block .table tbody>tr>td.vert-align{ vertical-align: middle; } #post .twoj_block input[type="text"][disabled] { background-color: #eee; opacity: 1; } #post .twoj_block a:hover, #post .twoj_block a:active, #post .twoj_block a:focus { box-shadow: none; }