{"id":40,"date":"2019-08-06T00:47:29","date_gmt":"2019-08-05T22:47:29","guid":{"rendered":"http:\/\/m-zed.com\/z01\/?p=40"},"modified":"2020-03-29T11:22:18","modified_gmt":"2020-03-29T09:22:18","slug":"change-color-test1","status":"publish","type":"post","link":"https:\/\/m-zed.com\/z01\/change-color-test1\/","title":{"rendered":"Change color test1"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/eqcss\/1.9.2\/EQCSS.min.js\">\n<\/script><\/p>\n<style type=\"text\/css\">\n\/* EQCSS *\/<br \/>\n@element #container {<br \/>\n\t\/* Emulating:<br \/>\n\t\t\t#container:has(#color_red:checked) #chosen {}<br \/>\n\t\t\t#container:has(#color_orange:checked) #chosen {}<br \/>\n\t\t\t#container:has(#color_yellow:checked) #chosen {}<br \/>\n\t\t\t#container:has(#color_green:checked) #chosen {}<br \/>\n\t\t\t#container:has(#color_cyan:checked) #chosen {}<br \/>\n\t\t\t#container:has(#color_blue:checked) #chosen {}<br \/>\n\t\t\t#container:has(#color_magenta:checked) #chosen {}<br \/>\n\t\t\t#container:has(#color_grey:checked) #chosen {}<br \/>\n\t\t\t#container:has(#color_black:checked) #chosen {}<br \/>\n\t*\/<\/p>\n<p>\teval(\"if (document.querySelector('#color_red:checked')) { '$this' }\") #chosen { --color: red; }<br \/>\n\teval(\"if (document.querySelector('#color_orange:checked')) { '$this' }\") #chosen { --color: orange; }<br \/>\n\teval(\"if (document.querySelector('#color_yellow:checked')) { '$this' }\") #chosen { --color: yellow; }<br \/>\n\teval(\"if (document.querySelector('#color_green:checked')) { '$this' }\") #chosen { --color: lime; }<br \/>\n\teval(\"if (document.querySelector('#color_cyan:checked')) { '$this' }\") #chosen { --color: cyan; }<br \/>\n\teval(\"if (document.querySelector('#color_blue:checked')) { '$this' }\") #chosen { --color: blue; }<br \/>\n\teval(\"if (document.querySelector('#color_magenta:checked')) { '$this' }\") #chosen { --color: magenta; }<br \/>\n\teval(\"if (document.querySelector('#color_grey:checked')) { '$this' }\") #chosen { --color: silver; }<br \/>\n\teval(\"if (document.querySelector('#color_black:checked')) { '$this' }\") #chosen { --color: black; }<br \/>\n}<\/p>\n<p>\/* Not EQCSS *\/<\/p>\n<p>html {<br \/>\n\tdisplay: flex;<br \/>\n}<br \/>\nbody {<br \/>\n\tflex: 1;<br \/>\n\tdisplay: flex;<br \/>\n\talign-items: center;<br \/>\n\tjustify-content: center;<br \/>\n}<\/p>\n<p>.color {<br \/>\n\tappearance: none;<br \/>\n\tbox-sizing: border-box;<br \/>\n\tborder-radius: .5vw;<br \/>\n\tbackground-image:<br \/>\n\t\tlinear-gradient(to right, rgba(128, 128, 128, .95), rgba(128, 128, 128, .95)),<br \/>\n\t\tlinear-gradient(to bottom, #000 0%, #000 50%, #fff 50%),<br \/>\n\t\tlinear-gradient(to right, #000 0%, #000 50%, #fff 50%)<br \/>\n\t;<br \/>\n\tbackground-blend-mode: normal, difference, normal;<br \/>\n\tbackground-size: 5vw 5vw;<br \/>\n\tbox-shadow: 0 0 0 .1vw;<br \/>\n\tcursor: pointer;<br \/>\n\tdisplay: inline-flex;<br \/>\n\tmargin: .25vw;<br \/>\n\tpadding: 5vw;<br \/>\n\tposition: relative;<br \/>\n\toutline: none;<br \/>\n\ttransition: all .25s;<br \/>\n}<br \/>\n.color:before {<br \/>\n\tcontent: \"\";<br \/>\n\tposition: absolute;<br \/>\n\ttop: 0;<br \/>\n\tleft: 0;<br \/>\n\tright: 0;<br \/>\n\tbottom: 0;<br \/>\n\tborder-radius: inherit;<br \/>\n\tbackground: currentColor;<br \/>\n\tmargin: 5vw;<br \/>\n\topacity: 0;<br \/>\n\ttransition: inherit;<br \/>\n}<br \/>\n.color:hover {<br \/>\n\tbox-shadow: 0 0 0 .25vw;<br \/>\n}<br \/>\n.color:hover:before, .color:focus:before {<br \/>\n\tmargin: 3.75vw;<br \/>\n\topacity: 1;<br \/>\n}<br \/>\n.color:focus {<br \/>\n\tbox-shadow: 0 0 .25vw .25vw;<br \/>\n}<br \/>\n.color:checked:before {<br \/>\n\tmargin: 1vw;<br \/>\n\topacity: 1;<br \/>\n}<\/p>\n<p>#container {<br \/>\n\tdisplay: flex;<br \/>\n\tflex: .85;<br \/>\n\talign-items: center;<br \/>\n\tjustify-content: center;<br \/>\n}<br \/>\n#df{width:365px;<br \/>\n\theight:600px;<br \/>\n\tbackground-image:url(http:\/\/m-zed.com\/z01\/wp-content\/uploads\/2019\/08\/df_temp.jpg);<br \/>\n\tbackground-repeat:no-repeat;<br \/>\n\t}<br \/>\n.block {<br \/>\nwidth:365px;<br \/>\n\theight:235px;<br \/>\n\tcolor:#ffffff;<br \/>\n\t\/*border-radius: .5vw;*\/<br \/>\n\tbox-sizing: border-box;<br \/>\n\tmargin: .5vw;<br \/>\n\tpadding: .5vw;<br \/>\n\ttext-align: center;<br \/>\n\tflex: 1;<br \/>\n\talign-self: stretch;<br \/>\n\tborder: 1px solid rgba(0, 0, 0, .25);<br \/>\n\t}<br \/>\n#palette {<br \/>\n\tbackground: #eee;<br \/>\n}<br \/>\n#palette div {<br \/>\n\tcolor: rgba(0, 0, 0, .75);<br \/>\n\tfont-size: 3vw;<br \/>\n\tfont-weight: bold;<br \/>\n\tpadding: 1vw;<br \/>\n}<br \/>\n#chosen {<br \/>\n\tbackground: var(--color, #eee);<br \/>\n\ttransition: all .25s;<br \/>\n}<\/p>\n<p>#color_red { color: red; }<br \/>\n#color_orange { color: orange; }<br \/>\n#color_yellow { color: yellow; }<br \/>\n#color_green { color: lime; }<br \/>\n#color_cyan { color: cyan; }<br \/>\n#color_blue { color: blue; }<br \/>\n#color_magenta { color: magenta; }<br \/>\n#color_black { color: black; }<br \/>\n#color_grey { color: silver; }<br \/>\n<\/style>\n<div id=\"container\">\n<div id=\"palette\">\n<div>Pick a color<\/div>\n<p><input id=\"color_red\" class=\"color\" checked=\"checked\" name=\"color\" type=\"radio\" \/><br \/>\n<input id=\"color_orange\" class=\"color\" name=\"color\" type=\"radio\" \/><br \/>\n<input id=\"color_yellow\" class=\"color\" name=\"color\" type=\"radio\" \/><br \/>\n<input id=\"color_green\" class=\"color\" name=\"color\" type=\"radio\" \/><br \/>\n<input id=\"color_cyan\" class=\"color\" name=\"color\" type=\"radio\" \/><br \/>\n<input id=\"color_blue\" class=\"color\" name=\"color\" type=\"radio\" \/><br \/>\n<input id=\"color_magenta\" class=\"color\" name=\"color\" type=\"radio\" \/><br \/>\n<input id=\"color_grey\" class=\"color\" name=\"color\" type=\"radio\" \/><br \/>\n<input id=\"color_black\" class=\"color\" name=\"color\" type=\"radio\" \/><\/p>\n<\/div>\n<div id=\"df\">\n<div id=\"chosen\" class=\"block\">TEST<\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Pick a color TEST &nbsp;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-draftz"],"acf":[],"_links":{"self":[{"href":"https:\/\/m-zed.com\/z01\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/m-zed.com\/z01\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/m-zed.com\/z01\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/m-zed.com\/z01\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/m-zed.com\/z01\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":0,"href":"https:\/\/m-zed.com\/z01\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"wp:attachment":[{"href":"https:\/\/m-zed.com\/z01\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/m-zed.com\/z01\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/m-zed.com\/z01\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}