$value){ $cln_wgl_assoc[$value]=''; if(strpos($value,'*')!==false){ $genericLoaded[$value]=''; } } $theWidgets = array_diff_assoc($theWidgets,$cln_wgl_assoc); // theWidgets are the new ones we need //ob_start();echo 'theWidgets';print_r($theWidgets);ob_end_flush(); // >>>>>>>>> $cln_wgl is now an associative array. $cln_wgl contains the widgets loaded (in previous page loads or this one). $theWidets contains the widgets we want to load in this load <<<<<<<< /* CSS WIDTH INHERIT. Inherits the width DECLARATION, not the physical width. Therefore inheritied width of an absolutely positioned element causes that element to be the same width of its parent ONLY when the frame of reference is the same. A static div within a static div has a different frame of reference than an absolutely positioned div within a static div within a static div. Therefore we cannot use width:inherit to set the width of backgrounds or abs divs on NESTED frameworks !!! */ if(!function_exists(arrayKeyStartsWith)){ function arrayKeyStartsWith($needle, $a){ //echo 'arrayKeyStartsWith';echo $needle;print_r($a); foreach($a as $key => $value){ if(strpos($key,$needle)===0){ return true; } } } } if(!function_exists(eatNum)){ function eatNum(&$string){ // pass by reference, this changes $string $count=strlen($string); $num=''; for($i=0;$i<$count;$i++){ if(ctype_alpha($string[$i]))break; $num.=$string[$i]; } $string=substr($string,strlen($num)); return $num==''?false:+$num; } } if(!function_exists(arrayKeyEndsWith)){ function arrayKeyEndsWith($needle, $a){ //echo 'arrayKeyEndsWith ';echo $needle;print_r($a); foreach($a as $key => $value){ if(strpos($key,$needle)===strlen($key)-strlen($needle)){ return true; } } } } // the following is loaded by WebPage for the first webpage loaded for each site //ob_start();echo 'genericLoaded';print_r($genericLoaded);ob_end_flush(); /* ================================== RESIZE ============================================================================================*/ if(array_key_exists('rsz_',$theWidgets)){?> #h_.rsz_{position:fixed;width:100%;} $value){if($key=='mn_')echo $value;} echo '.mn_ li{margin-left:0;}.ms_,.h_ .ms_{overflow:hidden;}'; //echo '@media all and (min-width:'.WIDGETS_MENU_BREAK.'em){.ms_,.h_ .ms_{overflow:hidden;}}'; //echo 'input:checked+label+.ms_{overflow:visible;}'; // this causes the text in a drop down menu to appear before the background slides down underneath it } /* ================================== TILES ============================================================================================*/ if(array_key_exists('t',$theWidgets)){?> .t,.t>a{display:flex;flex-direction:column;justify-content:flex-start;} .t .i:first-child,.t>a .i:first-child{margin-bottom:0;} .t{width:100%;padding:calc(var(--gutter));z-index:1;}.t>.i,.t>a>.i{flex-grow:1;} .t>*,[class*="fx_"] .t>.i,[class*="fx_"] .t>a>.i{flex-grow:0;} .t>a{text-decoration:none;} .t_ .t>a{height:100%;padding:0;color:inherit;cursor:pointer;}a declaration for when we use an a to wrap the entire contents of a tile. color inherit on a keeps contents of tile from assuming the color of , which is often accented */?> .t,.x_>a>.t{height:100%;}.x_[class*=" g_"]>.t,.x_[class^="g_"]>.t{height:auto;}*/?> .video_{position:relative;} .video_ iframe{position:absolute;top:0;left:0;width:100%;height:100%;} ul>li{display:inline-block;clear:both;}.tbody>ul>li:before{position:absolute;}.tbody>ul>li:nth-of-type(1){font-size:1.2em;margin-left:0;width:100%;}'; } /* =============================================== FORMS =================================================== */ if(array_key_exists('form',$theWidgets)){?> form{display:flex;position:relative;flex-direction:column;} fieldset,form,label,legend{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;} label,input,textarea{font-size:1em;line-height:1.5;} input,textarea,select{padding:.5em;border:1px solid #ccc;} label,input,select{vertical-align:middle} input[type="text"],input[type="email"],input[type="file"],textarea,select{width:100%} button{display:inline-block;padding:.5em;} input[type='submit'], input[type='image'], label[for], select, button{cursor: pointer;} $value){if($key=='form')echo $value;} } /* =============================================== LISTS =================================================== */ if(array_key_exists('ul',$theWidgets)){ ?> ul{list-style-type:disc;}ol{list-style-type:decimal;}ul ul{list-style-type:circle;} .xby_ ul,.xby_ ol{margin-left:calc(var(--gutter) + 3%);text-align:left;} .by_ ul ul{font-size:100%;} .xt_ ul.txc>li,.xt_ ol.txc>li{margin-left:0;} ol{list-style-type:decimal;}ol ul{list-style-type:circle;} .by_ ol ol,.by_ ul ol,.by_ ol ul{font-size:100%;} .ctf_ label{display:block;} .ctf_ .reqd:after{content:'*';color:red;margin-left:.2em;vertical-align:top;} .wpg .ctf_err{padding:.5em;background:var(--aaa);color:var(--w);margin-bottom:1em;}.wpg .ctf_err h1,.wpg .ctf_err h2,.wpg .ctf_err h3{color:var(--w);background:transparent;} .ctf_err>p{margin:0;} .ctf_blk{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;} .ctf_blk>*{margin-bottom:var(--gutter);} .js_ .ctf_ .recaptcha{position:absolute;left:-9999px;} .recaptcha {min-width:15em;margin-right:1em;border:1px solid #ddd;padding:1em;background:#efefef;} .recaptcha label{margin-bottom:var(--gutter);} .recaptcha>div{display:flex;justify-content:space-between;} .recaptcha>div>span>span{font-size:1.5em;max-width:10em;overflow:hidden;} .recaptcha>div>span>span>span{letter-spacing:4px;} .recaptcha>div>span>span>span:nth-of-type(odd){line-height:.9;vertical-align:top;} .recaptcha>div>span>span>span:nth-of-type(2),.recaptcha>div>span>span>span:nth-of-type(5){display:none;} .recaptcha>div>span>span>span:nth-of-type(7){display:inline-block;position:relative;right:4px;transform:rotate(180deg);} .recatpcha input{max-width:10em;} $value){if($key==='ctf_')echo $value;} ?> label.hd_{border:0;clip: rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;} .i.defer_,.i.defer_~.i{display:none;} .coerce_ .i .img_,.i.coerce_ .img_{flex-grow:1;} .f_{margin-bottom:0;padding:0;border-top-width:0;border-bottom-width:0;}'; echo '.swap2u>.f_ .img_{border-width:0;}'; echo '.swap2u>.f_:first-of-type{border-top-width:1px;}'; echo '.swap2u>.f_:last-of-type{border-bottom-width:1px;}'; echo '.swap2u>.f_:nth-of-type(even).mup_>.x_:nth-of-type(2){order:1;}.swap2u>.f_:nth-of-type(even).mup_>.x_:nth-of-type(odd){order:4;}'; } if(array_key_exists('map_',$theWidgets)){/* google maps */?> #map-canvas{position:relative;overflow:hidden;width:100%;height:550px;margin-bottom:1em;border:1px solid #ccc;} $value){if($key=='map_')echo $value;}?> .mc_{position:relative;margin:0 auto;} .mc_ label{display:block;line-height:1.5em;} .mc_ ul{display:inline-block;width:39%;list-style-type:none;margin-left:0;} .mc_ ul+ul{width:59%;} .mc_ li{margin:0 0 0 10%;} .mc-inst{margin-bottom:.5rem;} #mc_submit{margin-top:1rem;} #mc_error,#mc_success{margin-top:.5em;border-radius:3px;padding:.5em;background:red;color:black;} .mc_ label{line-height:1.5em;} .mc_ input{position:relative;background:var(--bg_w);padding:.5em;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;transition:all 0.2s linear;font-size:1em;vertical-align:middle;} .mc_ input[type="email"],.mc_ input[type="text"]{width:100%;} .mc_ input[type="checkbox"]{position:static;width:22px;height:22px;margin:.2em 8px 0 0;border:0;box-shadow:none;} .mc_ input[type="checkbox"]+label{display:inline-block;} .mc_ .reqd:after{content:'*';display:inline-block;margin-left:.2em;color:red;} .mc_ button{display:block;padding:.5em;} .cti_{position:relative;font-size:1.1em;margin:1em auto;max-width:25em} .cti_>.contact>span{display:inline-block;width:100%;margin-bottom:1em;} .cti_ span>span{font-size:100%;line-height:1.5;white-space:nowrap;} .cti_>.contact{max-width:20em;margin:0 auto;} .cti_>.contact>span>span{float:right;clear:right;} .cti_>.address{margin:2em 0;} @media screen and (min-width:em){ #h_.rsz_mini{position:fixed;width:100%;} #h_.rsz_mini .logo{font-size:.7em;transition:font-size 12s;} #h_.rsz_mini .orgname{position:fixed;top:0;left:0;text-align:center;} #h_.rsz_mini nav{margin-top:2em;text-align:center;} #h_.rsz_mini .nomini_,#h_.rsz_mini>.t_ .mn_mnr{display:none;} } .blog_1>.f_>.x_>.t>.f_:last-of-type{border-top:1px solid #eee;} .img_exp .i{width:calc(100% + (2 * var(--gutter)));margin-top:0;margin-bottom:0;margin-left:calc(-1 * var(--gutter));} #html #body #wpg .img_exp .i{left:0;transform:none;} .img_exp .i .img_{border-left:0;border-right:0;} .img_exp .i:first-child .img_{border-top:0;} .img_exp .i+.i{margin-top:calc(.2em);} .img_exp .i+p{margin-top:calc(var(--vertical_rhythm) * 1em);} [class*="-share-button"]:hover{cursor:pointer;} #html #body #wpg .share_1{display:flex;justify-content:space-around;} .share_1>*{position:relative;display:inline-block;margin:.5em;line-height:1em;color:var(--bg_a);} .share_1>span:after{content:'';display:inline-block;vertical-align:middle;width:0;height:0;margin-left:.3em;border:0;border-top:.5em solid transparent;border-bottom:.5em solid transparent;border-left:.6em solid #b46627;opacity:.4;} .share_1>div{display:inline-block;margin:0 .2em;z-index:2;} .share_1 img{height:16px;width:16px;margin:.5em;vertical-align:middle;} .share_1 [class*='icon_']:before{margin:0;font-size:24px;line-height:1;} .foot_{display:flex;justify-content:space-between;margin:auto 0 0 0;} .foot_>*{margin-top:0;margin-bottom:0;} a.link_3,.link_3 a,[class*=" link_"] .link_3 a,[class^="link_"] .link_3 a{position:relative;padding-right:1em;text-decoration:none;text-transform:uppercase;} a.link_3:after,.link_3 a:after,[class*=" link_"] .link_3 a:after,[class^="link_"] .link_3 a:after{content:'>';display:inline-block;margin-left:.5em;transition:transform .5s;} a.link_3:hover:after,.link_3 a:hover:after,[class*=" link_"] .link_3 a:hover:after,[class^="link_"] .link_3 a:hover:after{transform:translateX(.5em);} .tile_0 .x_{padding:calc(var(--gutter) / 2);} .event-detail1{margin-bottom:1em;} .event-detail1>.x_:first-of-type{min-width:10em;max-width:25em;} .event-detail1 .i h2{margin-bottom:.5em;} .event-detail1>.x_:last-of-type>p:first-of-type{margin-top:.5em;} .event-detail1>.x_:last-of-type>.f_>.x_:nth-of-type(odd){padding-left:0;} .event-detail1>.x_:last-of-type>.f_>.x_:nth-of-type(odd):after{display:none;} .event-detail1 ul,.event-detail1 ol{margin-top:0;margin-bottom:0;} .event-detail1 h3{margin:0;} .blg_>._detail>table.terms td:first-child{width:10%;padding-left:0} .blg_hdg a{text-decoration:none} .blg_hdg>span{display:inline-block;position:relative;font-size:.7em;top:-.5em;margin-right:2em;padding:0 1.2em 0 .5em;} .blg_hdg>span>span{position:absolute;font-family:Lato,sans-serif;font-size:.6em;right:-.5em;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);} .blg_>._detail>h1{position:relative} .blg_>._detail>h1>span{position:absolute;bottom:-1.8em;right:0;font-size:.5em} @media all and (min-width:40em) and (max-width:60em){ .f_x50>.ssr_>.sr_>input,.blg_>.ssr_>.sr_>button{width:100%;margin-top:.3em} } @media all and (min-width:50em) and (max-width:70em){ .f_x50>.ssr_>.sr_>input,.blg_>.ssr_>.sr_>button{width:100%;margin-top:.3em} } .ico{position:absolute;top:.7em;right:.7em;width:2em;border:2px solid #8CCA23;border-radius:50%;box-shadow:inset 0 0 8px 0 #ddd;z-index:99} .ico.abs:before{padding:0 .1em;font-size:1.2em;font-weight:bold;color:#83bc21} .ico:hover{box-shadow:inset 0 0 8px 0 #8CCA23} .i_can:before{content:'X'} .lgn_,.lgn_:before{z-index:200;width:100%} .lgn_:before{background:#fff;opacity:.9;z-index:1} .lgn_>.f_.u1{position:fixed;top:0;left:0;bottom:0;right:0;height:21em;max-width:25em;margin:auto;z-index:2} .lgn_ .s_{padding-top:0 !important} .lgn_>div>div>div{text-align:center} .lgn_ .llogo{width:100%;z-index:1;text-align:left} .lgn_ .llogo>p{position:relative;z-index:1;margin:0;line-height:50px;font-size:1.5em;font-weight:bold;padding-top:5px} .lgn_ .llogo>p>span{margin-left:2.1em} .lgn_ .llogo>p:before{content:'';position:absolute;top:.5em;bottom:0;left:0;right:0;background:url() no-repeat #fff;z-index:20} .lgn_ form{margin-top:.8em;text-align:center} .lgn_ form>p.err{margin:.5em 0;min-height:3em;color:red} .lgn_ form>div{height:2em;margin:1em 0} .lgn_ form>p:last-of-type{margin:0;font-size:.8em;color:#666} .lgn_ label{display:inline-block;width:5em;line-height:2em;text-align:right} .lgn_ input{width:17em;margin-left:1em;padding:0 .5em;line-height:2em} .lgn_ button{width:100%;margin:1.5em auto .3em auto;font-size:1.5em;background:linear-gradient(#28a7df,#00397e);color:#fff} .frm_{position:relative;margin:0 auto;} .frm_ .off{position:absolute;left:-9999px;} .frm_ fieldset{position:relative;display:block;clear:both;margin-bottom:1.5em;border:1px solid #ddd;padding:1em 2%;background:#f6f6f6;} .frm_ fieldset>h3,.frm_ .fieldset>h3{font-size:1.5em;margin:0;} .frm_ input,.frm_ textarea {border:1px solid #ccc;padding:.5em;font-size:1em;} .frm_ input,.frm_ select{max-width:100%;} .frm_ select{border:1px solid #ccc;padding:.35em .5em;font-size:1em} .frm_ input,.frm_ textarea,.frm_ select,.frm_ .zedit{position:relative;background:#fff;background:linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);border-radius:3px;border:1px solid #bbb;transition:all 0.2s linear;} .frm_ input[type="radio"],.frm_ input[type="checkbox"]{position:static;width:22px;height:22px;margin:.2em 8px 0 0;border:0;box-shadow:none} .frm_ input[type="checkbox"]+label{display:inline-block} .frm_ ul{margin:0;list-style-type:none;} .frm_ ul.bull{margin-left:3em;}.frm_ ul.bull>li{list-style-type:disc;} .frm_ label,.frm_ p.label{display:block;line-height:1.5em;color:#000} .frm_ .reqd>span:first-of-type:after{content:'*';display:inline-block;margin-left:.2em;color:red} .frm_.viewonly .reqd:after{display:none} .frm_ input[type='checkbox']:focus,.frm_ input[type='radio']:focus{border:0;box-shadow:none} .wpg .frm_.viewonly input,.wpg .frm_.viewonly textarea,.wpg .frm_.viewonly select {background:#fff;border:1px solid #eee;box-shadow:none;transition:none} .wpg .frm_ input:focus,.wpg .frm_ textarea:focus,.wpg .zsrch>input:focus,.frm_ input.glow{box-shadow:0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);outline:none;} .frm_ .zdetail_ li,.frm_ li>span{display:inline-block} .frm_ li{list-style-type:none;margin-top:1em;border:3px solid transparent} .frm_ .z_yn input,.frm_ .z_yn label{display:inline-block;} .frm_ .z_yn input{margin-left:1em;} li.ind input{margin-left:1em}.frm_ fieldset>li.ind2 input{margin-left:2em} .frm_ button{margin:.5em 0;padding:.5em .8em;font-size:1.1em;text-decoration:none} .frm_ p.help,.frm_ .instructions>p,.frm_ p.err_{clear:both;margin:.2em 0;padding:0;text-align:left;font-size:.9em} .frm_ .instructions>p{margin-top:.8em} .frm_ li.err_{margin-left:-1%;margin-right:-1%;padding:0 1% .2em 1%;border:3px solid red;background:#fff;} .frm_ li.err_>p.err_{font-size:1em;color:red} .frm_ .txc p.err_{margin-left:auto;margin-right:auto;text-align:center} .frm_ li.err_>p.err_:first-child{margin-top:1em} .frm_ .mini{font-size:.8em} .frm_ li.vert label{margin-top:.5em} .frm_ li.horz>label{display:inline-block;margin-right:1em;} .frm_ .z_yn>li{margin-top:.5em} .frm_ .z_yn>li:first-child{margin-top:1em} .frm_ .z_yn>li>span{min-width:9em} .frm_ .ynfl>li>label{display:inline-block} .frm_ .ynfl>li>.z_yn{float:right;clear:right;} .frm_ .mw25{max-width:25em;margin:0 auto;} .frm_ .mw40{max-width:40em;margin:0 auto;} .frm_ .bgwt{background:#fff;padding:.1em 1em .5em 1em;border:1px solid #ddd} .frm_ .skillchk input{width:3em;margin-top:.2em;} .frm_ .cg2u label, .frm_ .cg3u label{display:inline-block;width:calc(49% - 3em);margin-top:.4em;margin-left:2%;} .frm_ .tab_>li:first-of-type>label{display:inline-block;} .frm_ .tab_>li:first-of-type>label:nth-of-type(n+2){margin-left:1.5em} .frm_ h3{margin-bottom:0;}.frm_ h3+li{margin-top:0;}.frm_ h3+li>ul>li:first-of-type{margin-top:.3em;} .frm_ .subform_container>h3{position:relative;display:inline-block;margin:1em 0 -4em -.3em;border:1px solid #ddd;border-bottom-width:0;padding:.5em;background:#f9f9f9;line-height:1;z-index:2;} .frm_ .subform_container>li{position:relative;margin:.65em -.5em 1em -.5em;border:1px solid #ddd;padding:.5em;background:#f9f9f9;z-index:1;} .frm_ .subform>.zw{position:absolute;right:.5em;top:.5em;float:none;display:inline-block;vertical-align:middle;} .frm_ .subform.nostyle>.zw{position:static;} .frm_ .subform{position:relative;padding-top:.5em;} .frm_ .subform:not(:first-of-type){margin-top:.5em;border-top:2px dashed #ddd;} @media all and (min-width:800px){ .frm_ .cg3u label{width:calc(33% - 3em);} }*/?> .frm_ {font-size:.8em} .zedit{max-height:8em;outline:2px dashed #aaa;} .zedit.rt_open{max-height:none;outline:2px dashed #3085cf} .frm_ .zedit{max-width:100%;min-height:2em;overflow:hidden;padding:.4em calc(var(--gutter));} .zedit ul>li,.zedit ol>li{margin:.8em 0 .8em calc(var(--gutter));line-height:1.5em} .frm_ .zedit li{list-style-type:disc} .frm_ .zedit a[href^=tel]{text-decoration:underline} .frm_ .zimagegroup img{margin:.5em;vertical-align:baseline;width:20%} .frm_ .zimagegroup img:hover,.frm_ .zimagegroup canvas:hover{cursor:move} .frm_ .zimagegroup img.zimageblank:hover{cursor:default} #wss_>#wimp>#wimp1 .frm_ .zimagegroup img.zimageblank.dn{position:absolute;display:block;left:-3000px;} .tab_>ul>label{position:absolute;top:0;width:25%;border:0 solid #aaa;margin-top:0;border-width:0 0 1px 1px;background:#eee;padding:1em 0;text-align:center;z-index:9;} .tab_>ul>label:first-of-type{border-left:0;} .tab_>ul>label:hover{cursor:pointer;} .tab_>ul>input{position:absolute !important;left:-9999em;} .tab_>ul>input:checked+label{background:#fff;border-bottom-color:transparent;} .tab_>ul>input:checked+label:hover{cursor:default;} .tab_>ul>label+ul{position:relative;display:none;padding-left:.5em;padding-right:.5em;overflow-y:auto;} .tab_>ul>input:checked+label+ul{display:block} .tab_u1>ul>label{width:100%;border-width:0 0 1px 0;} .tab_u2>ul>label{width:50%;}.tab_u2>ul>label:nth-of-type(2){left:50%;} .tab_u3>ul>label{width:33.3%;}.tab_u3>ul>label:nth-of-type(2){left:33.3%;}.tab_u3>ul>label:nth-of-type(3){left:66.6%;} .tab_u4>ul>label{width:25%;}.tab_u4>ul>label:nth-of-type(2){left:25%;}.tab_u4>ul>label:nth-of-type(3){left:50%;}.tab_u4>ul>label:nth-of-type(4){left:75%;} .ssr_ .sr_{position:relative;margin-bottom:1em;font-size:1.3em} .ssr_ .sr_>input{width:80%;height:3em;padding-right:6.5em;border:1px solid #ccc;} .ssr_ .sr_>button{float:right;width:19.5%;height:3em;border:1px solid #ccc;padding:.5em 0 .55em 0;letter-spacing:1px;text-align:center;} .sr_result div.hr{width:100%} .sr_result a{display:inline-block;text-decoration:underline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .iover_{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;z-index:10;} .i .iunder_{display:none;} .i .failed .iunder_{position:absolute;display:block;width:100%;max-width:rem;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;} .x_.ss_{position:relative;padding:0;overflow:hidden;} .ss_ input{position:absolute;left:-9999px;} .ss_ .ss_tools{position:absolute;display:flex;bottom:0;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.4);border-radius:5%;z-index:3;outline:0;} .ss_ .ss_tools>label{display:block;bottom:5px;width:12px;height:12px;margin:.5em;border:3px solid var(--bg);border-radius:50%;transition:background-color linear 0.1s;cursor:pointer;opacity:.8;z-index:10;} label{width:20px;height:20px;}'; /* bigger toolbox buttons on phones */?> .ss_ label:hover{opacity:1;} #wpg .ss_ .i{position:absolute;left:-100%;width:100%;height:100%;margin:0;padding:0;text-align:center;color:var(--ss_c);transition:opacity 1.2s ease-in, left ease-in 0.8s;z-index:3;transform:none;} .ss_ .i img{opacity:0.0;transition:opacity .8s ease-out;} #wpg .ss_ input:checked~.i{left:100%;} .ss_ .i[draggable="true"]:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:#ffff;opacity:.1;z-index:9;} .js_ .ss_ i:nth-of-type(n+3){display:none;} .ss_ .img_{border:0;} #wpg .ss_ input:checked+label+label+.i{position:relative;left:0;} #wpg .ss_ input:checked+label+label+.i>.img_.loaded img{opacity:1;} .ss_ .iover_{position:absolute;top:1em;display:flex;flex-direction:column;justify-content:center;align-self:center;width:auto;padding-left:var(--ss_c_pdg);padding-right:var(--ss_c_pdg);padding-bottom:.7em;background:var(--ss_c_bg);font-size:calc(.5rem + .5vw);} .ss_ .iover_{background:var(--ss_c_bg);} .ss_ .iover_ h1,.ss_ .iover_ h2,.ss_ .iover_ h3,.ss_ .iover_ h4,.ss_ .iover_ h5,.ss_ .iover_ h6{display:block;width:auto;;} .nojs_ #body .ss_ .i{max-height:none;} .nojs_ .ss_{max-width:em;margin-left:auto;margin-right:auto;} .ss_ input~label{position:absolute;display:none;width:2.5em;height:2.5em;top:calc(50% - 1.25em);border:1px solid #ccc;border-radius:50%;background:#fff;opacity:.5;cursor:pointer;z-index:10;transition:opacity linear 0.3s;} .ss_ input~label:before,.ss_ input~label:after{content:'';position:absolute;width:60%;left:25%;height:2px;background:#333;} .ss_ input~label:before{bottom:27%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .ss_ input~label:after{top:27%;-webkit-transform:rotate(-45deg);transform:rotate(45deg);} .ss_ input+label:before{top:27%;left:15%;bottom:auto;} .ss_ input+label:after{top:auto;left:15%;bottom:27%;} .ss_ input:checked+label{display:block;left:.2em;} .ss_ input:checked+label+label{display:block;right:.2em;} .t_ .ss_[data-count="1"] label,.ss_[data-count="1"] .ss_tools{display:none;} $value){$a=explode('ss_c',$value);if(count($a)>1){$oldSlideCount=+$a[1];break;}} // figure out the number of slides for which we've already sent styles foreach($theWidgets as $key => $value){$a=explode('ss_c',$key);if(count($a)>1){$oldSlideCount=+$a[1];break;}} // adjust if we're echoing styles on this page load (2 slideshows on one page) $slideCount=max($oldSlideCount,$theWidgets['ss_']['attributes']['data-count']); // if we need more slides than we already have produced css, put out enough to cover the new data-count $c=''; if($oldSlideCount+1<$slideCount){ for($i=$oldSlideCount+1;$i<=$slideCount;$i++){echo $c.'.ss_ input:nth-of-type('.$i.'):checked~.ss_tools>label:nth-of-type('.$i.')';$c=',';} echo '{background-color:var(--bg_a);}'; } $theWidgets['ss_c'.$slideCount]='';// this 'remembers' the number of slides we've loaded css for if($STYLE_CSS_VARS['ss_c_hdr2']!=='')echo '.ss_ .iover_ h2{color:var(--ss_c_hdr1);}'; if($STYLE_CSS_VARS['ss_c_hdr3']!=='')echo '.ss_ .iover_ h3{color:var(--ss_c_hdr2);}'; if($STYLE_CSS_VARS['ss_c_hdr4']!=='')echo '.ss_ .iover_ h4{color:var(--ss_c_hdr4);}'; ?> $value){if($key=='logo_')echo $value;}?> $value){if($key == 'ix_')echo $value;}?> .js_ .ix_ .i{cursor:all-scroll;} .ix_ .i.ix_current .img_:before{content:'';position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);border:4px solid #ccc;border-top:4px solid #333;border-bottom:4px solid #333;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite;opacity:0.5;z-index:999;} .ix_ .i .img_:before{display:none;} .modal_{position:fixed;top:0;right:0;left:0;bottom:0;height:100%;padding-top:.5em;padding-bottom:.5em;background:#333;z-index:98;overflow:hidden;} #ix_{font-family:;} #ix_ .i{min-width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;} #ix_ .i .img_{display:flex;flex-direction:column;justify-content:center;width:px;max-width:100vw;height:100%;opacity:0;} #ix_ .i .img_ img{width:100%;height:auto;left:50%;top:50%;transform:translate(-50%,-50%);margin:0 auto;border:0;opacity:0;transition: opacity 1s ease;} .slides_{position:absolute;top:.5em;bottom:.5em;display:flex;flex-direction:row;width:100%;height:calc(100% - 1em);cursor:pointer;} .i_control{position:absolute;top:0;bottom:0;width:99vw;height:99vh;z-index:99;} #wpg .modal_ .itxt{max-width:px;margin:0;padding:.5em;font-family:var(--font_stack_text);font-size:1em;line-height:1.5;text-align:center;color:#fff;} #ix_ .i.ix_current .img_,#ix_ .i.ix_current.loaded img{opacity:1;} #ix_ .i .img_:before{display:none;}#ix_ .i.ix_current .img_.loading:before{display:block;} #ix_ .i.ix_current>.img_.loaded~.itxt{opacity:1;transition:opacity .6s .5s;} .modal_ .itxt:empty{display:none;} #ix_ .close{position:absolute;top:1vh;right:1vw;padding:1rem;z-index:9;} #ix_ .close:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:#000;opacity:.4;} #ix_ .close>span{position:absolute;width:70%;height:70%;top:15%;left:15%;z-index:1;} #ix_ .close>span:before,#ix_ .close>span:after{content:'';position:absolute;width:100%;height:1px;top:calc(50% - 1px);left:0;background:#fff;} #ix_ .close>span:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);} #ix_ .close>span:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} #ix_ .close:hover:before{opacity:1;cursor:pointer;} #ix_ .fwd,#ix_ .bwd{position:absolute;top:calc(50% - 7px);padding:1rem;z-index:9;} #ix_ .fwd{right:1vw;}#ix_ .bwd{left:1vw;} #ix_ .fwd:before,#ix_ .bwd:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:#000;opacity:.4;} #ix_ .fwd>span,#ix_ .bwd>span{position:absolute;width:70%;height:70%;top:15%;left:15%;z-index:1;} #ix_ .fwd>span:before,#ix_ .fwd>span:after,.bwd>span:before,.bwd>span:after{content:'';position:absolute;width:80%;height:1px;background:#fff;} #ix_ .fwd>span:before,#ix_ .bwd>span:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} #ix_ .fwd>span:after,#ix_ .bwd>span:after{-webkit-transform:rotate(45deg);transform:rotate(45deg);} #ix_ .fwd:hover:before,#ix_ .bwd:hover:before{opacity:1;cursor:pointer;} #ix_ .fwd>span:before,#ix_ .fwd>span:after{left:20%;} #ix_ .bwd>span:before,#ix_ .bwd>span:after{left:5%;} #ix_ .fwd>span:before,#ix_ .bwd>span:after{bottom:20%;} #ix_ .fwd>span:after,#ix_ .bwd>span:before{top:20%;} @media all and (min-width:30rem) { #ix_ .close,#ix_ .fwd,#ix_ .bwd{padding:2rem;} } >> all the way to the element because we are using an to wrap block level elements and browsers get confused about what that a wraps // bbh_ styles are used on the home page of mini-websites ?> .g_.bbh_>li{position:relative;max-height:10.25em;overflow:hidden;margin-top:.5em;padding:0 1em;cursor:pointer;list-style:none;-webkit-transition:left 1s ease-in-out;-moz-transition:left 1s ease-in-out;-o-transition:left 1s ease-in-out;transition:left 1s ease-in-out} .g_.bbh_>li>a{text-decoration:none} .g_.bbh_>li>a>span{position:absolute;top:0;bottom:0;width:100%;background:#fff;opacity:.01;z-index:9} .g_.bbh_ .i{width:33%;float:left;margin:.5em 2% 1em -1em;max-height:8.5em;overflow:hidden;} .g_.bbh_ h3{height:1.3em;overflow:hidden;margin-top:.1em} .g_.bbh_ p:not(.ft){position:relative;max-height:4.5em;overflow:hidden;margin:0} .g_.bbh_ p:not(.ft):after{content:' ';position:absolute;text-align:right;text-decoration:underline;color:#97a848;bottom:0;right:0;width:70%;height:1.5em;background:linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1) 50%)} .g_.bbh_ .ft{margin-top:.2em} .g_.bbh_ .ft>span:first-child{margin-left:1em} .g_.bbh_ .ft>span:last-child{display:inline-block;float:right} .g_.bbh_ .ft>span:last-child:hover{color:#fc0;} .blog_1 .blogcat{text-transform:uppercase} .blog_1 .s_+.s_ .i{width:calc(25% - .5em);float:left;margin:0 .5em 1em 0;} .blog_1 h4{font-weight:normal} .blog_1 .blogcats{text-align:center;} .blog_1>.s_+.s_ li{margin-left:0;} .blog_1 .blogcats+ul>li>span+span,.blog_1 h4,.blog_1 .mini .blogdate{color:#666;} .blog_1 ul{list-style-type:none;} .blog_1 .mini h4{font-size:1em;color:#000;} .blog_1 .mini .blogdate{font-size:.9em;color:#666;} .blog_1 .expand a{text-decoration:underline;} .blog_1 a,.blog_1 .expand .blogcat a{text-decoration:none;} .blog_1 .list .expand .i{width:100%;float:none;margin:0} @media all and (min-width:700px) { .blog_1 .blogcats{margin-top:.5em;} .blog_1 .list .i+div{width:54%;float:left;} .blog_1 .mini .i+div{width:74%;float:left;} .blog_1 .mini h4{margin-top:0;} .blog_1 .s_ .i{width:calc(45% - 1em);float:left;margin:0 1em 1em 0;} .blog_1 .blogcat{display:inline-block;} } $widgetInfo){ $originalWidget=$widget; $widgetInfo['originalWidget']=$originalWidget; $key=$widget; $a=explode('_',$widget); $widgetInfo['nojs']=''; $widgetInfo['scroll']=''; $widgetInfo['bodyTag']=''; $widgetInfo['wpgTag']=''; $widgetInfo['byTag']=''; $widgetInfo['important']=''; $widgetInfo['hamburgerChecked']=''; foreach($a as $segment){ //============================ NO JAVASCRIPT ============================================== if($segment=='nojs'){ $widgetInfo['nojs']='.nojs_ '; array_shift($a); array_push($a,'nojs'); // we switch the class from the start to the end of the array, so the sort order is right, but the widget is still unique } //============================ SCROLL ============================================== if($segment=='sc'){ $widgetInfo['scroll']='.sc_ '; array_shift($a); array_push($a,'sc'); // we switch the class from the start to the end of the array, so the sort order is right, but the widget is still unique } //============================ BODY TAG ============================================ if($segment=='bdy'){ $widgetInfo['bodyTag']='#body '; // body tag overrules the widget. Instead of the widget class the rules are applied to the body array_shift($a); array_push($a,'bdy');// we switch the class from the start to the end of the array, so the sort order is right, but the widget is still unique } //============================ wpg DIV ============================================ if($segment=='wpg'){ $widgetInfo['wpgTag']='wpg '; // wpg div overrules the widget. Instead of the widget class the rules are applied to the wpg div array_shift($a); array_push($a,'wpg');// we switch the class from the start to the end of the array, so the sort order is right, but the widget is still unique } //============================ #b .by_ TAG ============================================ if($segment=='by'){ $widgetInfo['byTag']='by_ '; // #b tag overrules the widget. Instead of the widget class the rules are applied to #b .by_ array_shift($a); array_push($a,'by');// we switch the class from the start to the end of the array, so the sort order is right, but the widget is still unique } //============================ HAMBURGER CHECKED ============================================ if($segment=='hmbc'){/* hamburger is :checked */ $widgetInfo['hamburgerChecked']='#hamburger:checked+.wpg .h_ '; array_shift($a); array_push($a,'hmbc');// we switch the class from the start to the end of the array, so the sort order is right, but the widget is still unique } // !!!!!!!!!!!!!!!! you CANNOT use HAMBURGER CHECKED with IMPORTANT because the style rules clash #hamburger is outside .wpg!!!!!!!!!! //=========================== IMPORTANT =========================================== if($segment=='i'){ $widgetInfo['important']='body.body#body '; array_shift($a); array_push($a,'i'); // we switch the class from the start to the end of the array, so the sort order is right, but the widget is still unique } if($segment=='ii'){ $widgetInfo['important']='#body>#wpg '; array_shift($a); array_push($a,'ii');// we switch the class from the start to the end of the array, so the sort order is right, but the widget is still unique } } $widget=implode('_',$a); if(substr($widget,0,3)=='aw_' || strpos($widget,'_aw_') !==false){ $mediaControl[$a[1]]=false; $key='0'; if(substr($widget,0,7)=='aw_mnx_'){ $a=explode('_',$widget); $widget=$key.array_shift($a).'_'.WIDGETS_MENU_BREAK.'z_'.implode('_',$a); // we added the z so all the mnx classes sort after all the classes that have the same value as WIDGETS_MENU_BREAK. So, aw_48_pde_m_t0 sorts before aw_mnx_m_t0. }else{ $widget=$key.$widget; } } $theWidgets[$widget]=$widgetInfo; if($widget!=$originalWidget){ unset($theWidgets[$originalWidget]); } //if($widgetInfo['hamburgerChecked']){echo ' key=>'.$key.' ';print_r($theWidgets[$key]);echo 'original widget=>'.$theWidgets[$originalWidget].' ';if(isset($theWidgets[$originalWidget]))print_r($theWidgets[$originalWidget]);die;} } ksort($theWidgets,SORT_STRING); // we need this sorted so we get all our media query rules for aw 1UPS lumped together //print_r($mediaControl);print_r($theWidgets);flush();die; $currentAWClass=false; foreach($theWidgets as $widget => $widgetInfo){ // Huge loop End of this loop marked with comment: LOOPEND2 $widget is a widget stripped of all classes that might occur before aw_ classes $a=explode('_',$widget); $temp=$widget; if($a[2]=='mnx'){ $awmup=array_shift($a);array_shift($a); $widget=$awmup.'_'.implode('_',$a); // this gets rid of the WIDGETS_MENU_BREAK.'z' we inserted after aw_ to get the widget sorted right so aw_ specificity can be respected $a=explode('_',$widget); } if($a[0]=='0aw'){ $widget=substr($widget,1);// strip the 0 prefix $theWidgets[$widget]=$theWidgets[$temp]; // this keeps 0aw_ out of the widgets loaded on the loaded table unset($theWidgets[$temp]); if($currentAWClass!==$a[1]){ if($currentAWClass!==false) echo '}'; // end the previous media query $mediaControl[$currentAWClass]='finished'; $currentAWClass=$a[1]; } if($currentAWClass=='mnx'){ if($mediaControl['mnx'] === false){ $mediaControl['mnx']='started'; echo '@media all and (min-width:'.WIDGETS_MENU_BREAK.'em){'; // =========== GENERIC MENU STYLING ON THE BASIS OF aw_mnx_mnu_? on h_ class ================ //============ this puts out the mnx_mnu styling before all other classes for aw_mnx if(array_key_exists('0aw_'.WIDGETS_MENU_BREAK.'z_mnx_mnu_1',$theWidgets)){ ?> .h_,.h_ div{overflow-y:visible;} #hamburger,.hamburger{display:none;} nav{position:relative;top:auto;margin:0;max-height:none;box-shadow:none;overflow:visible;} nav .mn_{flex-direction:row;max-height:none !important;box-shadow:none;} nav .mn_mjr,nav .mn_>li{position:relative;} nav .ms_>ul{margin:0;border:0;} .ms_>ul>li>a{white-space:nowrap;} .mn_>li:hover>.ms_{border-bottom:0;} .ms_{position:absolute;min-width:100%;left:50%;transform:translate(-50%, 1px);border-bottom:0;} .ms_{box-shadow: 0 3px 17px -5px rgba(0,0,0,0.1);} nav .mn_mnr{position:absolute;top:0;right:0;width:auto;} li>label{pointer-events:none;} .nojs_ .mn_>li:hover .ms_{max-height:none;}.nojs_ .mn_>li:hover .ms_ li,.nojs_ .mn_>li:hover .ms_>ul ul{opacity:1;} */?> .tile_1 .t,.tile_1 .img_{border-radius:6px;} .tile_1 .foot_{border-top:1px solid #ccc;} .tile_1 a{text-decoration:none;} .tile_1 .t:hover{box-shadow:10px 10px 33px -4px rgba(0,0,0,0.5);} $theWidgets['tile_2']=$theWidgets[$widget];unset($theWidgets[$widget]); // remove the tile specs from the end of tile_1 (e.g. tile_1_12_2) .tile_2 .t,.tile_2 .img_{border-radius:6px;} .tile_2 .t h3{position:absolute;top:0;left:0;width:auto;margin:calc(var(--gutter));z-index:9;background:var(--a);color:var(--w);border-radius:6px;padding:.2em.5em;} .tile_2 .t:hover{box-shadow:10px 10px 33px -4px rgba(0,0,0,0.5);} .js_ .i .img_ img[jenisys_src][src=""]{transform: translateY(20%);} #wpg [id^=cls_]:checked+div{height:0;margin:0;padding:0;border:0;overflow:hidden;}'; // this is for all alerts echo '.by_{transition:padding-top .5s ease;}'; // this is for alert above header echo '#body [id^=cls_]:checked~.h_{top:0;}'; // this is for alert above header echo '#body [id^=cls_]:checked~.by_{padding-top:0;}'; // this is for alert above header echo '.'.$widget.':hover{cursor:default;}'; } } /* =============================================== TABLE BREAKS =================================================== */ if(substr($widget,0,4)=='tbr_'){ $a=explode('tbr_',$widget); if($a[1]){ echo '@media all and (min-width:';echo $a[1];echo 'em){' .'.'.$widget.'.table{display:table;table-layout:fixed;position:relative;width:100%;clear:both;border-spacing:0;border:1px solid #ddd;}' .'.'.$widget.'>.thead{display:table-header-group;}.'.$widget.'>.tbody{display:table-row-group;}.'.$widget.'>.tbody>ul>li:before{display:none;}.'.$widget.'.table>li>ul{display:table-row;}.'.$widget.'.table>li>ul>li{display:table-cell;padding:.5em;}'; echo '}'; } } /* =============================================== ELLIPSES and MULTI-LINE ELLIPSES =================================================== */ if(substr($widget,0,6)==='ellip_') { $a=explode('ellip_',$widget); // ellipsis ... if($a[1]===''){ echo '.ellip_{max-height:'.STYLE_VERTICAL_RHYTHM.'em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}'; }else{ $a=explode('_',$a[1]); if(count($a)>1){ $color='#'.$a[1]; }else{ $color='#fff'; } echo '.'.$widget.' br{display:none;}'; echo '.'.$widget.'{position:relative;max-height:'.STYLE_VERTICAL_RHYTHM * $a[0].'em;overflow:hidden;}'; //echo '.'.$widget.':before{content:\' ...\';display:inline-block;position:absolute;bottom:.1em;right:0;background-color:'.$color.';}'; echo '.'.$widget.':after{content:\' ...\';display:inline-block;position:absolute;bottom:.1em;right:0;background-color:'.$color.';color:#222;}'; } } /* =============================================== ACCORDIANS =================================================== */ if(substr($widget,0,4)=='acc_') { if($widget=='acc_'){?> #body [name="acc_"]{position:absolute;left:-9999px;visibility:hidden;} [name="acc_"]+div>label{position:relative;display:block;} [name="acc_"]+div>label+div{max-height:0;overflow:hidden;transition:max-height .5s ease;} #body [name^="acc_"]{position:absolute;left:-9999px;visibility:hidden;} #body [name^="acc_"]+label{display:block;margin:.5em 0 1em 0;padding:.5em;font-size:1.1em;} [name^="acc_"]+label+div{max-height:0;overflow:hidden;transition:.5s ease;} .acc_1 label{position:relative;display:block;margin:.5em 0 1em 0;padding:.5em;font-size:1.1em;} .acc_1 label:after{content:'+';position:absolute;right:.5em;width:1em;height:1em;top:.2em;color:#fff;text-align:center;border-radius:50%;background:#76b38f;box-shadow:-1px -1px 4px 1px rgba(0,0,0,0.22) inset;font-size:1.8em;line-height:.95;} #html>#body .acc_1 label+div+*{margin-top:1em;} .acc_1 input:checked+label:after{content:'-';} .acc_1 h2{padding:.5em 0;} .acc_2 input[type='checkbox'][name^="acc_"]+label:before{content:'+';margin-right:1em;color:blue;font-size:1.8em;vertical-align:middle;} .acc_2 input[type='checkbox'][name^="acc_"]:checked+label:before{content:'-';color:#222;} .dd_>input{position:absolute;left:-9999px;visibility:hidden;} .dd_>label{display:block;} .dd_>label:after{content:'';display:inline-block;vertical-align:middle;width:0;height:0;margin-left:0.3em;border:0;transition:transform 0.6s;border:0.6em solid transparent;border-top-color:var(--black);border-width:0.6em 0.4em;border-bottom:0;opacity:.2;} .dd_>input:checked+label:after{transform:rotate(180deg);} .dd_>input~div{height:0;transform:scaleY(0);} .dd_>input:checked~div{height:auto;transform:scaleY(1);transition:transform .3s ease;transform-origin:center top;} li{padding-left:calc(var(--gutter) + 3%);}';} if($widget=='ind2'){echo '.wpg .ind2{margin-left:calc(var(--gutter) + 6%);}.ms_ .ind2{margin-left:0;}.ms_ .ind2>li{padding-left:calc(var(--gutter) + 6%);}';} if($widget=='ind3'){echo '.wpg .ind3{margin-left:calc(var(--gutter) + 9%);}.ms_ .ind3{margin-left:0;}.ms_ .ind3>li{padding-left:calc(var(--gutter) + 9%);}';} if($widget=='ind4'){echo '.wpg .ind4{margin-left:calc(var(--gutter) + 12%);}.ms_ .ind4{margin-left:0;}.ms_ .ind4>li{padding-left:calc(var(--gutter) + 12%);}';} } /* =============================================== DATE AND TIME =================================================== */ /* dpik is the bar on top of the date picker. dpick_ is the date picker symbol in a form */ if(substr($widget,0,3)=='dt_'||substr($widget,0,3)=='tm_'){/* date or time */?> [class^="dt_"]>span,[class^="tm_"]>span{position:relative;display:inline-block;white-space:nowrap;} [class^="dt_"]>span>.dpick_,[class^="tm_"]>span>.dpick_{position:absolute;bottom:0;right:-2.2em;} [class^="dt_"].sel>span:before,[class^="tm_"].sel>span:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background:rgba(0,0,0,.2);} .wpg [class*=" g_"],.wpg [class^="g_"]{display:flex;flex-direction:row;width:100%;flex-wrap:wrap;justify-content:center;align-content:flex-start;align-items:stretch;} $value){ if($key==$widget){ echo $value; $styles=explode('{',$value)[1];$styles=explode('}',$styles)[0]; $margin=explode('margin:',$styles); $margin=$margin[1]?explode(';',$margin[1])[0]:false; } } // styles specified as descending or specified on element should override STYLE_CSS_PATTERNS foreach($classListArray as $class){ if(substr($class,0,4)=='tde_'||(substr($class,0,4)=='ide_' && !arrayKeyStartsWith('tde_',$classList))){// the assumption is you have a gallery of tiles or a gallery of images. If tiles, then tile margin takes precedence over image margin. $class=substr($class,4); if(substr($class,0,3)=='m_a' || substr($class,0,3)=='m_x'){ $b=explode('_',$class); $margin=substr(array_pop($b),1); $margin=parseSpec($margin); } } } $up=+explode('g_u',$widget)[1]; $flexBasis='flex-basis:calc('.round(100/$up,3).'%'; if($margin)$flexBasis.= ' - ('.$margin.' * 2)'; $flexBasis.=');'; echo '.wpg .x_.'.$widget.'>*{'.$flexBasis.';flex-grow:1;}'; } } //======================================================== WIDGETS BELOW CAN HAVE DESCENDANT STYLING ================================================== $classes=explode(' ','acc_ af_ bf_ bfw_ c9_ cf_ co_ db dd_ df dg dib din dpn_ dn hero_ iico_ icon_ ico9_ ide_ lh_ nb plx_ r_ tdc tde_ tdn tdu txc txl txr txu xde_ wnw');// tde_ and ide_ can be used alone $classesDescendant=explode(' ','ade_ avde_ bde_ dc_ ddc_ dde_ de_ fde_ hde1_ hde2_ hde3_ hde4_ hde5_ hde6_ ide_ ifde_ iide_ ilde_ imde_ incde_ inde_ inrde_ iode_ lbde_ lde_ lude_ mde_ nde_ pde_ rde_ sdde_ sde_ tdde_ tde_ vde_ xde_'); $classesStarting=explode(' ','af_ and_ ani_ as_ aw_ b_ bde_ bf_ bfw_ bg_ bs_ btn_ c9_ c9f_ cc_ cf_ ck_ cr_ ctf_ cu_ df_ dg_ fai_ fac_ fas_ fbs_ fdr_ ff_ fgr_ fjc_ fl_ fs_ fsh_ fw_ fwr_ fx_ fz_ gb_ h_ hv_ iico_ icon_ ico9_ ind_ of_ or_ lh_ ls_ m_ mup_ p_ plx_ o_ r_ s_ sc_ sq_ ssq_ tr_ trn_ trs_ ts_ tsh_ tt_ u va_ vb_ w_ z_'); $needStyle=false; if(in_array($widget,$classes))$needStyle=true; foreach($classes as $class){ // standalone classes can have trailing segments because of ii_,bdy_,by_,sc_, etc. if(strpos($widget,$class) === 0){ $needStyle=true;break; } } foreach($classesDescendant as $class)if(strpos($widget,$class)===0 && $widget!=$class){$needStyle=true;break;} foreach($classesStarting as $class)if(strpos($widget,$class)===0 && $widget!=$class){$needStyle=true;break;} while($needStyle){ //===================================================================================================================== //REMEMBER, if you place more highly specific rules in style.defaults you will have to override them in style.defaults) // REMEMBER if we need iii we can use #html, but we would need to make changes in case there was an iii_pn_ // REMEMBER you can't depend on proximity with style.defaults unless they are automatically loaded on first page loaded ) // REMEMBER selectors are scanned right to left. Use the most eliminating selector on the right for faster rendering // ii_ classes (.i_i_p_0) (#body>#wpg .ii_class beats everything) // | // | // i_ classes (.i_p_0) (body.body#body .class) element, .class, id, and a .class // REMEMBER i_ overrules aw_ // | // | // # aw_ (body#body .aw_) element, id, and a class // | // | // # regular classes (.p_0,.w_xe30) (#body and .class ) an id and a class (UNLESS it's .img_ p_bp, then no #body) THIS OVERRIDES CLASS SELECTORS in the site and standard style sheet // | // | // descendant classes (.tde_, .xde_) (.tde_ .t OR .lde li) 2 classes or 1 class and a tag specific descendant classes override generic descendant classes // | // | // generic descendant classes (.de_, .dde_) (.dde_>* 1 class ) // HORRIBLE RENDERING SPEED $prefix=''; $originalWidget=$widgetInfo['originalWidget']; if($widgetInfo['byTag'])$originalWidget=$widgetInfo['byTag']; if($widgetInfo['wpgTag'])$originalWidget=$widgetInfo['wpgTag']; $hasDescendant=false;$descendant=$false;$hasAVDE=false;$hasMDE=false; //====================== Recognize AW_ Classes ====================================================================== $awmup='.'; $c9f=strpos($widget,'c9f_')!==false; // fill colors for svg if(substr($widget,0,3)=='aw_'){ $a=explode('_',$widget); if($a[1]=='mnx')$a[1]=WIDGETS_MENU_BREAK; //$awmup=$finishedAW?'.aw_'.$a[1].' ':''; if we're finished doing media queries this is an .aw_ that depends on js applying the class $awmup='.aw_'.$a[1]; array_shift($a);array_shift($a); // remove the aw_?? prefix $widget=implode('_',$a); } //====================== INITIALIZE PREFIXES ====================================================================== // pull all the classes off where we already have widgetInfo on them, and they were moved to the end of the widget to keep it unique $a=explode('_',$widget); for ($i = 1; $i <= count($a); $i++){ $segment=$a[$i]; if($segment=='sc' || $segment=='bdy' || $segment=='by' || $segment=='wpg' || $segment=='i' || $segment=='ii' || $segment=='hmbc') unset($a[$i]); } $widget=implode('_',$a); $prefix=$prefix.$widgetInfo['nojs'].$widgetInfo['scroll'].$widgetInfo['bodyTag']; if(!$widgetInfo['bodyTag']){ if($widgetInfo['hamburgerChecked']){ $prefix=$prefix.$widgetInfo['hamburgerChecked']; }else{ if($widgetInfo['important']){ // you can't use i_,ii_ with hmbc_ $prefix=$widgetInfo['important'].$prefix; } } if($awmup!='.'){ // there is an aw_ class if($widgetInfo['important']){$prefix.='.'.$originalWidget;}else $prefix.='body#body .'.$originalWidget; //if($originalWidget=='i_aw_mnx_w_xsp80'){echo 'aaaa '.$widgetInfo['important'].' zzzzzzz'.$prefix.str_repeat(' x x',3000);flush();} }else{ if(strlen($prefix)>0){ $prefix.='.'.$originalWidget; } } } if(!$widget){ if(ZDEF_TEST==1){ ob_end_clean();echo ' Widget Styles, descendants with no widget '.$originalWidget.str_repeat(' x',2000);ob_flush();die; } break; } //============================================================================= // ====== PROCESS DESCENDANT WIDGETS AND WIDGET SEGMENTS THAT CAN REPEAT IN THE WIDGET =============== //============================================================================= $hadDPN=false; while(true){ $hover=''; $afbf=''; $cf=false; $nthOfType=''; //====================== DETECT DESCENDANTS and NTH-OF-TYPE =========== if(strpos($widget,'dpn_') === 0){ $hadDPN=true;// [data-pn=""] $widget=substr($widget,4); } $descendant='';$nthOfType=''; foreach($classesDescendant as $class){ if(strpos($widget,$class)===0 && $widget!=$class){ $descendant=$class; $widget=substr($widget,strlen($class)); //if($widget=='_oo_2'){echo $widget;$testMode=true;} if(ctype_digit($widget[0])||$widget[0]=='_'){ // double __ in widget means odd or even, not an nth if($widget[0]=='_'){ $nth=substr($widget,1,1); $oddEven=true; if($nth=='e'){ $nth='even'; }elseif($nth=='o'){ $nth='odd'; } $widget=substr($widget,1); // get rid of the second underscore }else{ $nth=substr($widget,0,1); } if($descendant == 'dde_' || $descendant == 'de_' || $oddEven){ $nthOfType=':nth-child('.$nth.')'; }else{ $nthOfType=':nth-of-type('.$nth.')'; } $widget=substr($widget,1); } //if($testMode){echo ' '.$widget.' '.$nthOfType;die;} break; } } // nth and nth-of-type are only on descendant classes //====================== DETECT CHECKED ================================= if( strpos($widget,'ck_') === 0 ){ if(strpos($originalWidget,'ck_')===0)$prefix.='#'.$id.':checked '; // when ck_ is the first segment then we pull the id from the element $widget=substr($widget,3); // remove ck_ from the widget //echo PHP_EOL.$prefix.' '.$widget;flush();die; } //====================== ADJACENT SIBLING ================================= if( strpos($widget,'as_') === 0 ){ $prefix=$prefix.'+*'; $widget=substr($widget,3); // remove hv_ from the widget //echo PHP_EOL.$prefix.' '.$widget;flush();die; } //====================== DETECT HOVER ================================= if( strpos($widget,'hv_') === 0 ){ $hover=':hover'; $widget=substr($widget,3); // remove hv_ from the widget } //====================== DETECT Before/after, followed by other widget segments ========================== if( strpos($widget,'af_') === 0 && $widget != 'af_'){ $afbf=':after'; $widget=substr($widget,3); } if( strpos($widget,'bf_') === 0 && $widget != 'bf_'){ $afbf=':before'; $widget=substr($widget,3); } if( strpos($widget,'bfw_') === 0 && $widget != 'bfw_'){ // $afbf=':before'; we don't add :before here because we want a position relative on the .bfw_ element $widget=substr($widget,4); } if( strpos($widget,'cf_') === 0 && $widget != 'cf_'){ $afbf=':before'; $cf=true; $widget=substr($widget,3); } $suffix=$hover.$afbf; //================== BREAK IF NOTHING TO DO ============================================ if(!$descendant)break; //====================================================================================== if($descendant)$hasDescendant=true; // custom classes: for de_ and dde_: de_cu_2 means all descendants with a class of cu_2 // custom classes: new method. for dc_ and ddc_: dc_mn_ means all descendants with a class of mn_ (you don't need the cu_ to trigger the class selection) if($descendant == 'de_'){ if(strpos($widget,'cu_') === 0){ $a=explode('_',$widget); $prefix.=' .'.array_shift($a).'_'.array_shift($a); $widget=implode('_',$a); }else{ $prefix.=' *'; } } if($descendant == 'dde_'){ if(strpos($widget,'cu_') === 0){ $a=explode('_',$widget); $prefix.=' .'.array_shift($a).'_'.array_shift($a); $widget=implode('_',$a); }else{ $prefix.='>*'; } } if($descendant == 'dc_'){ $a=explode('_',$widget); $prefix.=' .'.array_shift($a); if($a[0]==''){$prefix.='_';array_shift($a);} // this takes care of situation when descendant class has an '_' on the end. e.g. dc_mn__bg_a ==> .dc_mn__bg_a .mn_ will be background:accent $widget=implode('_',$a); } if($descendant == 'ddc_'){ $a=explode('_',$widget); $prefix.='>.'.array_shift($a); if($a[0]==''){$prefix.='_';array_shift($a);} // this takes care of situation when descendant class has an '_' on the end. e.g. dc_mn__bg_a ==> .dc_mn__bg_a .mn_ will be background:accent $widget=implode('_',$a); } if($descendant == 'tde_') { $prefix.=' .t'; } if($descendant == 'xde_') { $prefix.=' .x_'; } if($descendant == 'fde_') { $prefix.=' .f_'; } if($descendant == 'ifde_') { $prefix.=' .i'; } if($descendant == 'ide_' || $descendant == 'ilde_' ) { $w3=substr($widget,0,3); $w2=substr($widget,0,2); if($w3=='h_n' || $w3=='h_x' || $w2=='b_'){/* max, min height, border and border radius on img_, not .i */ if($descendant == 'ide_'){ $prefix.=' .img_'; }else{ $prefix.=' .i .img_'; } }else{ if($descendant == 'ide_'){ $prefix.=' .i'; }else{ $prefix.=' .i'; } } } if($descendant == 'iide_') { $prefix.=' img'; //echo $prefix.' xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';die; } if($descendant == 'imde_') { $prefix.=' .img_'; } if($descendant == 'iode_') $prefix.=' .iover_'; if($descendant == 'ade_') $prefix.=' a'; if($descendant == 'vde_') $prefix.=' a:visited'; if($descendant == 'avde_') {$hasAVDE=true;$prefix.=' a:visited';} if($descendant == 'lde_') $prefix.=' li'; if($descendant == 'lude_') $prefix.=' ul'; if($descendant == 'lbde_') $prefix.=' label'; if($descendant == 'inde_') $prefix.=' input'; if($descendant == 'incde_') $prefix.=' input[type="checkbox"]'; if($descendant == 'inrde_') $prefix.=' input[type="radio"]'; if($descendant == 'mde_') {$hasMDE=true;$prefix.=' input';} // form field descendants if($descendant == 'pde_') {$prefix.=' p';} if($descendant == 'pide_') {$prefix.=' picture';} if($descendant == 'sde_'){$prefix.=' span';}// REMEMBER!!!! sde works on all descendant spans, use sdde_ if you want child spans if($descendant == 'sdde_'){$prefix.='>span';} if($descendant == 'tdde_'){$prefix.=' td';} if($descendant == 'thde_'){$prefix.=' th';} if($descendant == 'trde_'){$prefix.=' tr';} if($descendant == 'bde_'){ $prefix.=' button'; } if($descendant == 'rde_'){ $prefix.=' textarea'; } if(substr($descendant,0,3)=='hde'){ // this follows the pattern hde1_, hde3_ etc. $hNum=substr($descendant,3,1); $prefix.=' h'.$hNum; } $a=explode('_',$widget); if($a[0]){ if($a[0]=='lc'){$prefix.=':last-child';$widget=substr($widget,3);} if($a[0]=='fc'){$prefix.=':first-child';$widget=substr($widget,3);} } $prefix=$prefix.$nthOfType.$suffix; } //================================================================================================================ // DON'T use $descendant past here. It's set to '' //=================================================================================================================== if($prefix==''){// there were NO descendants and no aw_ and no i (important) and no dpn_ and no checked as first segment if(strpos($classList,' img_ ')!==false && strpos(' '.$originalWidget,' p_bp')==0){ $prefix='.'.$originalWidget.$suffix; }else{ $prefix='#body .'.$originalWidget.$suffix; // we don't need the regular specificity wallop on the p_bp class of an image and we don't want to make it hard for fx_ to override it if( $afbf ){ $prefix='body'.$prefix; // give af_bf_??? declarations a higher specificity than solo bf_ so we can override solo bf_ } } }else{ if(!$hasDescendant)$prefix=$prefix.$suffix; } if( $hasDescendant && $awmup=='.' && !$widgetInfo['important'])$prefix='.'.$originalWidget.' '.$prefix; if( strpos($widget,'c9_') === 0 ){ $a=explode('.'.$originalWidget,$prefix); $s1=$a[0]; $s2=' .'.$originalWidget.(count($a)>1?$a[1]:''); $prefix=$s1.'[class*="c9_"]'.$s2.','.$s1.'[class*="c9_"] [class*="c9_"]'.$s2.','.$s1.'[class*="c9_"] [class*="c9_"] [class*="c9_"]'.$s2.','.$prefix; } if($hasAVDE){$prefix=$prefix.','.(str_replace(' a:visited',' a',$prefix));} // a and a:visited if($hasMDE){$prefix=$prefix.','.(str_replace(' input',' textarea',$prefix)).','.(str_replace(' input',' button',$prefix)).','.(str_replace(' input',' select',$prefix));} // form fields //======================================== PREFIX HAS BEEN SET ============================================================= //if($originalWidget=='i_bf_bg_w'){echo $prefix.' suffixsxxxx '.$suffix.' widget '.$widget;die;} // CUSTOM CLASSES: for all descendants EXCEPT de_ and dde_: sde_cu_2 means all descendants of .sde_cu_1 that are spans get cu_1 styling //if($widget=='acc_' || substr($widget,0,3)==='cu_' ){/* custom styles */ WE NOW CHECK FOR ANY CLASS THAT MATCHES IN THE SITE STYLESHEET, NOT JUST cu_. The class still has to be 'registered' above in $classes, $classesDescendent and/or $classesStarting foreach($STYLE_CSS_PATTERNS as $key => $value){ if($key==$widget){ $media=''; if(strpos($value,'@media')!==false){ // strip the media query out from the rest of the declarations $a=explode('@media',$value); $media=$a[1]; $value=$a[0]; } $a=explode('}',$value); foreach($a as $segment){ if($segment=='')continue; $c=explode('.',$segment); if(strlen($c[0])==0 && strpos($c[1],$widget)!==false){ // this catches a widget of aw_40_cu_1_bf, as well as cu_1 $b=explode('.'.$widget,$segment); $v=implode($prefix.($cf?':before':''),$b); if($cf)$v=$segment.','.implode($prefix.($cf?':after':''),$b); echo $v.'}'; }else{ // this catches p+.cu_alert in the STYLE_CSS_PATTERNS $prefix=str_replace('.'.$widget,'',$prefix); // pull the widget out of the prefix $b=explode('{',$segment); $originalSelector=$b[0]; // we do it this way to accommodate a selector like p+.cu_alert (zenally) $rule=$b[1]; $selector=$prefix.$originalSelector.($cf?':before':''); if($cf)$selector=$selector.','.$selector.':after'; echo $selector.'{'.$rule.'}'; if(1==2&&$key=='cu_alert'){ echo 'prefix '.$prefix.' cf '.($cf?'yes':'no').' selector'.$selector; } } } if($media){ // place #body in front of all the declarations in the media query $b=explode('{',$media); echo '@media'.array_shift($b).'{'; $c=explode('}',implode('{',$b)); foreach($c as $segment){ if($segment=='')continue; echo '#body '.$segment.'}'; } echo '}'; if( $originalWidget=='gb_it'){ echo PHP_EOL.' end of declare'; ob_flush();flush();die; } } break 2; } //if($widget=='acc_'){print_r($STYLE_CSS_PATTERNS);echo 'ACC_';echo $value;flush();die;} } /* if(substr($widget,0,3)==='cu_' ){// custom styles not modified by widget foreach($STYLE_CSS_PATTERNS as $key => $value){ if($key==$widget){ if(1==2 && $prefix){ $rules=explode('}',$value); // all the rules in a STYLE_CSS_PATTERN are jammed together. strip out the selectors so we can use a different one if($widget=='cu_sq'){print_r($rules);} foreach($rules as $rule){ $a=[]; $selectors=explode(',',$rule); if($widget=='cu_sq'){print_r($selectors);} foreach($selectors as $selector){ $a[]=$prefix.$selctor; } echo implode(',',$a).substr($rule,strpos('{',$rule)).'}'; } //if($widget=='cu_sq'){echo 'prefix: '.$prefix;echo 'value '.$value;print_r($rules);die;} }else{ echo $value; } } } break; } */ // ******** STANDALONE AF_, BF_, CF_ ************ if($widget=='bf_' ){ echo $prefix.':before{content:\'\';position:absolute;top:0;right:0;bottom:0;left:0;}'; break; } if(strpos($originalWidget,'bfw_')!==false){ // :before with width that expands to edge of viewport on either side. if($widget=='n'){ echo $prefix.':before{display:none;}'; break; } echo $prefix.'{position:relative;}'; $bg=($widget=='bfw_')?'':'background:var(--'.$widget.');'; echo $prefix.':before{content:\'\';position:absolute;width:var(--vww);top:0;bottom:0;left:calc(-1*(var(--vww) - 100%)/2);'.$bg.'z-index:-1;}'; break; } if($widget=='af_' ){ echo $prefix.':after{content:\'\';position:absolute;width:100%;}'; break; } if($widget=='cf_' ){ echo $prefix.':before,'.$prefix.':after{content:\'\';position:absolute;width:100%;}'; break; } if(strpos($widget, 'cf_') === 0){$prefix=$prefix.':before,'.$prefix.':after';} if($hadDPN){ $prefix='[data-pn="'.ZDEF_PNOS.'"]'.$prefix; } // **************** PREFIX IS NOW SET *************************** if(substr($widget,0,7)==='ctf_cu_'){/* custom styles for contact form */ foreach($STYLE_CSS_PATTERNS as $key => $value){ if($key===$widget){ echo $value; } } break; } /*if(substr($widget,0,4)==='trs_' ){ custom styles not modified by widget foreach($STYLE_CSS_PATTERNS as $key => $value){ if($key==$widget){echo $value;} } }*/ // ******** CUSTOM CLASSES ************ //============================ GENERIC PARALLAX ====================================================================== if(strpos($widget,'plx_') === 0){ // the parallax is triggered when there is js and when the aw_ for the specific parallax div is reached $trimmedWidget=substr($originalWidget,0,strpos($originalWidget,'plx_')).'plx_'; //echo ' TRIMMED '.$trimmedWidget;flush();die; if(!array_key_exists($trimmedWidget.'*',$genericLoaded) && !in_array($trimmedWidget.'*',$cln_wgl)){ $genericLoaded[$trimmedWidget.'*']=''; $minWidth=explode('plx_',$originalWidget)[1]; $minWidth=$minWidth?$minWidth:100; echo '[class^="'.$trimmedWidget.'"],[class*=" '.$trimmedWidget.'"]{z-index:-10;}'; echo '.wpg [class^="'.$trimmedWidget.'"],.wpg [class*=" '.$trimmedWidget.'"]{position:fixed;top:0;z-index:-10;min-height:100vh;width:auto;min-width:100vw;}'; echo '.wpg [class^="'.$trimmedWidget.'"]>.i .img_,.wpg [class*=" '.$trimmedWidget.'"]>.i .img_{min-height:100vh;height:100vh;}'; echo '.wpg [class^="'.$trimmedWidget.'"]>.i img,.wpg [class*=" '.$trimmedWidget.'"]>.i img{width:auto;min-height:100vh;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%);}'; /* need width auto here or image stretches */ foreach($STYLE_CSS_PATTERNS as $key => $value){if($key==$originalWidget)echo $value;} } echo '.wpg .'.$originalWidget.'>.i img{min-width:'.$minWidth.'vw;}'; } if( strpos($widget,'c9_') === 0 || $c9f ){ // color if($c9f){ echo $prefix.'{fill:var(--'.substr($widget,4).');}'; //svg fill }else{ echo $prefix.'{color:var(--'.substr($widget,3).');}'; } } if(strpos($widget,'fx_') === 0 ){/* fixed aspect ratio on images */ $a=explode('_',$widget); $height=floor($a[2]/$a[1]*100); /* the .img_:after is essential to hold images open at 1up */ //echo 'div .'.$widget.' .img_:after,div [class^="fx_"] .'.$widget.' .img_:after,div [class*=" fx_"] .'.$widget.' .img_:after{padding-bottom:'.$height.'%;}'; echo $prefix.' .img_:after{padding-bottom:'.$height.'%;}'; } if(strpos($widget,'u') === 0 && strpos($classList,' x_ ') !== false){ /* _u2 is 2up in galleries, specified on the aw_30_tde_u2, imp_aw_40_ide_u3 */ $margin=false; $up=+substr($widget,1); if(strpos($classList,' g_ ')!==false && (strpos($classList,'tde_m_a') !=false || strpos($classList,'ide_m_a') !=false )){// need to modify the width calc to accommodate gutters in galleries. foreach($classListArray as $class){ if((strpos($class,'tde_m_a') ===false && strpos($class,'ide_m_a') ===false) )continue; if(strpos($class,'tde_m_a')!== false){ $b=explode('tde_m_a',$class); }else{ $b=explode('ide_m_a',$class); } $units=$b[1][0]; $unitCount=str_replace('d','.',substr($b[1],1)); $unitCount=$unitCount*2; $unitCount=str_replace('.','d',$unitCount); echo $prefix.'{width:calc('.(floor(100/$up*100) / 100).'% - '.parseSpec($units.$unitCount).');}'; } }else{ echo $prefix.'{width:'.(floor(100/$up*100) / 100).'%;}'; } break; } if(strpos($widget, 'and_') === 0){ /* animation delay */ echo $prefix.'{animation-delay:'.str_replace('d','.',explode('_',$widget)[1]).'s;}'; break; } if(substr($widget,0,3)=='bg_'){ $widget=substr($widget,3); if($widget=='t'){ echo $prefix.'{background:transparent;}'; }else //if(array_key_exists($widget,$STYLE_CSS_VARS)){ echo $prefix.'{background:var(--'.$widget.');}'; break; } if(substr($widget,0,3)=='bs_'){ if(array_key_exists($widget,$STYLE_CSS_VARS)){ echo $prefix.'{box-shadow:'.$STYLE_CSS_VARS[$widget].';}'; } break; } if(strpos($widget,'cc_')===0){ $a=explode('_',$widget); echo $prefix.'{column-count:'.$a[1].';column-width:'.parseSpec($a[2]).';}'; echo $prefix.'>li{margin-left:3%;margin-right:3%;}'; break; } if(strpos($widget,'cr_')===0){ /* cursor */ $x=substr($widget,3); if($x=='d') $cursor='default'; if($x=='p') $cursor='pointer'; echo $prefix.'{cursor:'.$cursor.'}'; break; } if($widget=='db'){ echo $prefix.'{display:block;}'; break; } if($widget=='df'){ echo $prefix.'{display:flex;flex-wrap:wrap;}'; break; } if(substr($widget,0,3)=='df_'){// display: flex shorthand: flex,direction,justify-content,wrap,align-items... if row then wrap if(ctype_alpha(substr($widget,3,1))){ $shortForm=true; echo $prefix.'{display:flex;'; if(strlen($widget)>3){ if(substr($widget,3,1)=='c'){ echo 'flex-direction:column;'; }else{ // 'r' row is default echo 'flex-direction:row;'; } } $rule=substr($widget,4,1); if(strlen($widget)>4){ echo 'justify-content:'.flexRule($rule); } if(strlen($widget)>5){ $nowrap=substr($widget,5,1)=='n'; if($nowrap){ echo 'flex-wrap:nowrap;'; }else{ echo 'flex-wrap:wrap;'; } } if(strlen($widget)>6){ $rule=substr($widget,6,1); echo 'align-items:'.flexRule($rule); } $widget=substr($widget,min(strlen($widget),7)); }else{ $widget=substr($widget,3); $shortForm=false; } if($widget){ $segment=str_replace('d','.',$widget); $cc=eatNum($segment); $gridGapUnit=false; $gridGap=0; $tilePaddiing=0; $bgColor=false; if($segment){ // grid gap $gridGapUnit=$segment[0]; $segment=substr($segment,1); $gridGap=eatNum($segment); } /*if($segment){ // tile paddiing $tilePaddingUnit=$segment[0]; $segment=substr($segment,1); $tilePadding=eatNum($segment); } if($segment){ // background color $bgColor=$segment; }*/ $maxWidth=round((100-(($cc+1)*$gridGap))/$cc,3); // this only works for percentage. You need to enhance for rems, etc. But you would have to use a CALC!! echo '}'.$prefix.'>*{width:'.$maxWidth.'%;'; if($gridGapUnit){ // set grid gap, but only if grid gap was actually specified in the class echo 'margin:0 '.($gridGap/2).'% '.($gridGap).'% '.($gridGap/2).'%;'; } /*echo 'padding:'.parseSpec($tilePaddingUnit.$tilePadding).';'; // we always want to echo tile padding so we can override a standard padding if need be if($bgColor){ echo 'background:var(--'.$bgColor.');'; }*/ echo '}'; if($gridGapUnit){// set margin-top, but only if grid gap was actually specified in the class echo $prefix.'>*:nth-child(-n+'.$cc.'){margin-top:'.$gridGap.'%;}'; } }else{ if($shortForm)echo '}'; } } if($widget=='dib'){ echo $prefix.'{display:inline-block;width:auto;}'; break; } if($widget=='din'){ echo $prefix.'{display:inline;}'; break; } if($widget=='dn'){ echo $prefix.'{display:none;}'; break; } if(strpos($widget, 'fac_') === 0){ // align-content $rule=substr($widget,4); echo $prefix.'{align-content:'.flexRule($rule).'}'; break; } if(strpos($widget, 'fai_') === 0){ // align-items $rule=substr($widget,4); echo $prefix.'{align-items:'.flexRule($rule).'}'; break; } if(strpos($widget, 'fas_') === 0){ // align self $rule=substr($widget,4); echo $prefix.'{align-self:'.flexRule($rule).'}'; break; } if(strpos($widget, 'fbs_') === 0){ // flex basis //if(substr($widget,0,5)=='fbs_e'){echo '0===>'.$widget.' <== ';} $spec=str_replace('d','.',substr($widget,4)); if(!ctype_alpha(substr($spec,0,1)))$spec='p'.$spec; //default is percent $value=+substr($spec,1); //if(substr($widget,0,5)=='fbs_e'){echo '1===>'.$widget.' == spec '.$spec.' === value '.$value.' ';} if($value==33)$value=33.333; if($value==16)$value=16.666; $css=parseSpec(substr($spec,0,1).$value); //if(substr($widget,0,5)=='fbs_e'){echo $css;flush();die;} echo $prefix.'{flex-basis:'.$css.';flex-grow:0;flex-shrink:0;}'; break; } if(strpos($widget, 'fdr_') === 0){ // flex direction $rule=substr($widget,4); echo $prefix.'{flex-direction:'; if($rule=='r') echo 'row;'; if($rule=='c') echo 'column;'; echo '}'; break; } if(substr($widget,0,3)=='ff_'){ $x=substr($widget,3); if($x=='h')$x='headings'; if($x=='t')$x='text'; if($x=='l')$x='logo'; if($x=='m')$x='menu'; if($x=='o1')$x='other1'; if($x=='o2')$x='other2'; if($x=='o3')$x='other3'; echo $prefix.'{font-family:"'.$STYLE_CUSTOM_FONTS[$x].'";}'; break; } if(strpos($widget, 'fgr_') === 0){ // flex grow $spec=substr($widget,4); echo $prefix.'{flex-grow:'.$spec.'}'; break; } if(strpos($widget, 'fjc_') === 0){ // justify contents $rule=substr($widget,4); echo $prefix.'{justify-content:'.flexRule($rule).'}'; break; } if(strpos($widget, 'fl_') === 0) /* Filter */ { $spec=substr($widget,3); if($spec=='u'){ echo $prefix.'{filter:unset;}'; }else{ echo $prefix.'{filter:var(--fl_'.$spec.');}'; } break; } if(strpos($widget, 'fs_') === 0) /* Font Style */ { $a=explode('_',$widget); if($a[1]=='it') echo $prefix.'{font-style:italic;}'; break; } if(strpos($widget, 'fsh_') === 0){ // flex shrink $spec=substr($widget,4); echo $prefix.'{flex-shrink:'.$spec.'}'; break; } if(strpos($widget, 'fw_') === 0) /* Font Weight */ { $a=explode('_',$widget); echo $prefix.'{font-weight:'.($a[1]=='n'?'normal':($a[1]=='b'?'bold':$a[1])).';}'; break; } if(strpos($widget, 'fwr_') === 0) /* Flex wrap */ { $spec=substr($widget,4); if($spec=='w')$spec='wrap';else $spec='nowrap'; echo $prefix.'{flex-wrap:'.$spec.'}'; break; } if(strpos($widget,'fz_')===0){ echo $prefix.'{font-size:'.parseSpec(substr($widget,3)).';}'; break; } if(strpos($widget,'co_')===0){// coerce echo '.body [class*="_co_"] .x_{flex-direction:row;align-items:stretch;}'; echo '.body [class*="_co_"] .i,#body [class*="_co_"] .img_{flex-grow:1;overflow:hidden;}';// DO NOT even think about changing this to 0 // echo '.body [class*="_co_"] .img_:after{display:none;}'; YOU MUST SPECIFY THIS ON THE ELEMENT OR NOTHING WILL SHOW BEFORE .co_ KICKS IN!!!!! prevent the padding bottom on the img_ from messing up height once in co_ mode echo $prefix.' .img_ img{width:auto;height:auto;min-width:100%;min-height:100%;top:50%;left:50%;transform:translate(-50%,-50%);}';/* we settled on the width, height scheme because our images are always wider than they need to be. */ echo $prefix.' .img_+p{margin-bottom:0;}'; break; } if(strpos($widget,'hero_')===0){ echo $prefix.'.t_,'.$prefix.' .f_{display:flex;flex-direction:row;align-items:stretch;}'; echo '#body .'.$originalWidget.' .i{position:absolute;height:100%;max-width:none;z-index:-1;}'; echo $prefix.' .img_{flex-grow:1;top:50%;left:50%;transform:translate(-50%,-50%);}'; echo $prefix.' .img_ img{width:auto;min-height:100%;min-width:100%;}'; echo $prefix.' .img_:after{display:none;}'; foreach($STYLE_CSS_PATTERNS as $key => $value){if($key=='hero_')echo $value;} } if(strpos($widget,'iico_')===0){ // inline icon with background on icon echo $prefix.','.$prefix.' a{display:flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap;text-decoration:none;}'; echo $prefix.' .img_{flex-grow:0;}'; // need this if have a background on the icon and don't want it stretched out of shape break; } if($widget == 'ind_'){ /* indent */ $percentage=substr($widget,4)*3; echo $prefix.'{margin-left:calc(var(--gutter) + '.$percentage.'%)}'; break; } if(strpos($widget,'lh_')===0) { // line height adjust $a=explode('_',$widget); if(array_key_exists(1,$a)){ $value=str_replace('d','.',$a[1]); if(substr($value,0,1)=='v')$value=parseSpec($value); echo $prefix.'{line-height:'.$value.';}'; } break; } if(strpos($widget,'ls_')===0) { // letter-spacing $a=explode('_',$widget); if(array_key_exists(1,$a)){ //$value=str_replace('d','.',$a[1]); //if(substr($value,0,1)=='v') $value=parseSpec($a[1]); echo $prefix.'{letter-spacing:'.$value.';}'; } break; } if($widget=='nb'){ echo $prefix.'{list-style-type:none;}'; break; } if(substr($widget,0,2)=='o_')/* opacity */ { if($widget=='o_'){ echo $prefix.'{opacity:1;}'; }else{ $a=explode('_',$widget); echo $prefix.'{opacity:0.'.$a[1].';}'; } break; } if(strpos($widget,'of_h')===0){ $ofDir=substr($widget,-1)=='x'?'-x':(substr($widget,-1)=='y'?'-y':''); echo $prefix.'{overflow'.$ofDir.':hidden;}'; break; } if(strpos($widget,'of_v')===0){ $ofDir=substr($widget,-1)=='x'?'-x':(substr($widget,-1)=='y'?'-y':''); echo $prefix.'{overflow'.$ofDir.':visible;}'; break; } if(strpos($widget, 'or_') === 0){ /* order */ echo $prefix.'{order:'.explode('_',$widget)[1].';}'; break; } /*if(strpos($widget,'plx_') !== false){ // specific parallax to invoke when aw_ is reached. parallax is not used with descendants echo '.js_ '.$prefix.'.img_{display:none;}'; // Do not not display the image when there is js because this triggers lighthouse Best Practice error since aspect ratio loaded doesn't equal aspect ratio displayed }*/ if($widget=='r_'){ echo $prefix.'{position:relative;}'; break; } if($widget=='r_a'){ echo $prefix.'{position:absolute;}'; break; } if($widget=='r_f'){ echo $prefix.'{position:fixed;}'; break; } if($widget=='r_s'){ echo $prefix.'{position:sticky;}'; break; } if($widget=='r_t'){ echo $prefix.'{position:static;}'; break; } if(strpos($widget, 'sq_') === 0){ /* square */ $widget=substr($widget,3); $x=parseSpec($widget,3); if($x==0){// default to ems if no units specified $x=str_replace('d','.',$widget).'em'; } echo $prefix.'{width:'.$x.';height:'.$x.';}'; break; } if(strpos($widget, 'ssq_') === 0){ /* simple square OBSOLETE */ $widget=substr($widget,4); $x=parseSpec($widget); //if($originalWidget=='ssq_e1d4'){echo 'zzz '.$prefix.' '.$widget.' zzz '.$x.' '.$widget.' wwwwwwwwww '.str_replace('d','.',$widget).'em'.' xxxxxxxxxxxxxzzxxxxxx';echo str_repeat(' x',3000);ob_flush();flush();} if($x==0){// default to ems if no units specified $x=str_replace('d','.',$widget).'em'; } echo $prefix.'{width:'.$x.';height:'.$x.';}'; break; } $mouse=$hover?'.mouse_ ':''; //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! if(strpos($originalWidget,'tde') !== false && $widget == 'lnk'){// this class makes a whole tile clickable. You cannot nest this class echo $mouse.$awmup.'tde_'.$widget.' .t:hover{cursor:pointer;}'; // this makes the entire tile look clickable break; } if(strpos($originalWidget,'ide') !== false && $widget == 'lnk'){// this class makes a whole image block clickable. You cannot nest this class echo $mouse.$awmup.'ide_'.$widget.' .i:hover{cursor:pointer;}'; // this makes the entire tile look clickable break; } if(strpos($widget,'tdc')===0){ $a=explode('-',$widget); if(count($a)>1){ $v=$a[1]; echo $prefix.'{text-decoration-color:var(--'.$v.');}'; } break; } if($widget=='tdn'){ echo $prefix.'{text-decoration:none;}'; break; } if($widget=='tdu'){ echo $prefix.'{text-decoration:underline;}';/* we need this when we want an in a heading to be underlined */ break; } if(strpos($widget,'trn_')===0){ $widget=str_split(substr($widget,4)); echo $prefix.'{transition:'; $element=array_shift($widget); if($element=='a')$element='all'; $duration=''; while(ctype_digit($widget[0])){$duration.=array_shift($widget);} if($widget[0]=='d'){ //this is a decimal point $duration.='.'; array_shift($widget); while(ctype_digit($widget[0])){$duration.=array_shift($widget);} } echo ' '.$duration.'s'; $timing=array_shift($widget); $timing='ease'; echo ' '.$timing; $delay=str_replace('d','.',implode('',$widget)); echo ' '.$delay; echo '}'; break; } if(strpos($widget,'tsh_')===0){ $widget=substr($widget,4); $a=explode('_',$widget); echo $prefix.'{text-shadow:'.$a[0].'px '.$a[1].'px var(--'.$a[2].');}'; } // =============================== TRANSFORMS ========================================= $segments=explode('_',$widget); // can't use $originalWidget here because .by_ might have set it to by_ $transforms=[];$css=''; $transformPrefixes=array('tt','tr','ts','tw','tn'); while($segments[0]){ if(!in_array($segments[0],$transformPrefixes)){ array_shift($segments);// get rid of all the possible prefixes continue; } if($segments[0]=='tn'){ echo $prefix.'{transform:none}'; break; } if($segments[0]=='tt'){ $segments[1]=strtolower($segments[1]); if($segments[1]=='xc'){$transforms[]='translateX(-50%)';$css.='left:50%;';} elseif($segments[1]=='yc'){$transforms[]='translateY(-50%)';$css.='top:50%;';} elseif($segments[1]=='ac'){$transforms[]='translate(-50%,-50%)';$css.='top:50%;left:50%;';} else{ $dimension=substr($segments[1],0,1); $spec=substr($segments[1],1); $spec=parseSpec($spec); if($dimension=='a'){ $transforms[]='translate('.$spec.','.$spec.')'; }else{ $transforms[]='translate'.strtoupper($dimension).'('.$spec.')'; } } array_shift($segments); array_shift($segments); continue; } if($segments[0]=='tr'){ $rotate=str_replace('d','.',$segments[1]).'deg'; $transforms[]='rotate('.$rotate.')'; array_shift($segments); array_shift($segments); continue; } if($segments[0]=='ts'){ $dimension=substr($segments[1],0,1); $scale=str_replace('d','.',substr($segments[1],1)); if($dimension=='x'){$transforms[]='scaleX('.$scale.')';} elseif($dimension=='y'){$transforms[]='scaleY('.$scale.')';} elseif($dimension=='a'){$transforms[]='scale('.$scale.','.$scale.')';} // if ts_a20_-45 then transform x 20, transform&-45 array_shift($segments); array_shift($segments); continue; } if($segments[0]=='tw'){ // transform skew is defined as tw_?20 or tw_?20_?40 where ? is the unit if($widget=='tw_0'){$transforms[]='skew(0)';continue;} array_shift($segments); $specs=[]; foreach($segments as $key => $spec){ if(substr($spec,0,1)=='t')break;// we just ran into the next transform declaration if(substr($spec,0,1)=='r')$specs[]=str_replace('d','.',substr($spec,1)).'rad'; // str_replace takes care of decimal conversion if(substr($spec,0,1)=='d')$specs[]=str_replace('d','.',substr($spec,1)).'deg'; if(substr($spec,0,1)=='n')$specs[]=str_replace('n','.',substr($spec,1)).'turn'; array_shift($segments); } $transforms[]='skew('.implode(',',$specs).')'; continue; } } if(count($transforms)>0){ echo $prefix.'{transform:'.implode(' ',$transforms).';'.$css.'}'; break; } if($widget=='txc'){ echo $prefix.'{text-align:center;}'; break; } if($widget=='txl'){ echo $prefix.'{text-align:left;}'; break; } if($widget=='txr'){ echo $prefix.'{text-align:right;}'; break; } if($widget=='txu'){ echo $prefix.'{text-transform:uppercase;}'; break; } if(strpos($widget,'va_')===0) { // vertical align $widget=substr($widget,3); echo $prefix.'{vertical-align:'; if($widget=='m')echo 'middle'; if($widget=='b')echo 'baseline'; if($widget=='t')echo 'top'; if($widget=='o')echo 'bottom'; echo ';}'; break; } if(strpos($widget,'vb_')===0) { // visibility $widget=substr($widget,3); echo $prefix.'{visibility:'; if($widget=='v')echo 'visible'; if($widget=='h')echo 'hidden'; if($widget=='c')echo 'collapse'; echo ';}'; break; } if($widget=='w_a'){ echo $prefix.'{width:auto;}'; break; } if($widget=='h_a'){ echo $prefix.'{height:auto;}'; break; } if($widget=='w_na'){ echo $prefix.'{min-width:auto;}'; break; } if($widget=='wnw'){ echo $prefix.'{white-space:nowrap;}'; break; } if($widget=='w_xa'){ echo $prefix.'{max-width:none;}'; break; } if(strpos($widget,'w_xs')===0){ $widget=substr($widget,4); echo $prefix.'{max-width:'.parseSpec($widget).';}'; //if($originalWidget=='i_aw_mnx_w_xsp80'){echo ' hhhhhhhhhhhhhhhhh1 '.str_repeat('x ',3000);flush();die;} break; } if(strpos($widget,'w_fs')===0){/* width, fixed, simple spec */ $widget=substr($widget,4); echo $prefix.'{width:'.parseSpec($widget).';}'; break; } if($widget=='w_vw'){ echo $prefix.'{width:100vw;}'; break; } if(strpos($widget,'z_')===0){ echo $prefix.'{z-index:'.substr($widget,2).'}'; break; } $d1=substr($widget,2,1); $d2=substr($widget,3,1); // THIS IS FOR PADDING, MARGIN IN EMS!! p_0_a == padding: 0 auto, p_1_2 == padding:1em 2em 1em 2em; p_x3 = padding x 3em; p_xx3 = padding x 3px; p_y3 =padding y 3em; p_l3 = padding-left:3em; p_lx5 = padding-left:5px; if((strpos($widget,'p_')===0 || strpos($widget,'m_')===0) && (ctype_digit($d1) || $d1=='d' || substr($widget,3,2)=='a_')){// check for a_ so don't pick up aed2 where a stands for 'all' if(strpos($widget,'p_')===0)$spec='padding';else $spec = 'margin'; $a=explode('_',$widget); if(ctype_digit($d1) || $d1=='d' || $d1=='a'){// there is no dimension spec and no unit spec so units are ems, d is for decimal, a is for auto if(count($a)==2){$rule=parseSpec(($a[1]=='a'?'':'e').$a[1]);} if(count($a)==3){$rule=parseSpec(($a[1]=='a'?'':'e').$a[1]).' '.parseSpec(($a[2]=='a'?'':'e').$a[2]);} if(count($a)==5){$rule=parseSpec(($a[1]=='a'?'':'e').$a[1]).' '.parseSpec(($a[2]=='a'?'':'e').$a[2]).' '.parseSpec(($a[3]=='a'?'':'e').$a[3]).' '.parseSpec(($a[4]=='a'?'':'e').$a[4]);} //if($a[1]!=0){echo 'xxx '.$widget.' '.$spec.' '.$rule.' '.$a[1];die;} }else{ //if(substr($widget,3,1); //if($d=='a') test for all, x, y, top, right,bottom,left } if(substr($rule,0,3)=='0em')$rule='0'.substr($rule,3); echo $prefix.'{'.$spec.':'.str_replace (' 0em',' 0',$rule).';}'; //if(strpos($widget,'p_ed5')===0){echo $widget;print_r($a);echo 'd1 '.$d1;echo 'd2 '.$d2;die;} //if($a[1]!=0)die; break; } //if($prefix=='')break; WHAT!!! if(strlen($widget)>2){ $attribute=substr($widget,0,3); $spec=substr($widget,3); $css=parseSpec($spec); if($attribute=='p_b' && strpos($classList,' img_ ') !== false){ // padding bottom on .img_ creates a :after with a padding-bottom of the percentage specified. D //if(substr($spec,0,1)=='p')$css=+str_replace('d','.',substr($spec,1)).'%'; $css=parseSpec($spec); if($css){ if(substr($spec,0,1)!='p')echo '.img_'; // make sure that p_be and p_bx override p_bp echo $prefix.':after{padding-bottom:'.$css.';}'; } if(strpos($ancestorClassList,' co_ ') !== false ){/* coerce images */ echo '.mup_ .i.coerce_ .img_:after{margin-top:calc(-'.$css.' * .4);}'; // this allows the image to shrink to 60% of its natural height } // You have to use :after to control image height or you can't use min and max height on images!!!! }elseif($attribute=='m_a'){echo $prefix;if($spec==='0')echo '{margin:0;}'; elseif($spec==='1')echo '{margin:1em;}';elseif($css)echo '{margin:'.$css.';}';else echo '{margin:var(--'.$descendant.$widget.')}';} elseif($attribute=='m_x'){echo $prefix;if($spec==='0')echo '{margin-left:0;margin-right:0;}'; elseif($spec==='1')echo '{margin-left:1em;margin-right:1em;}'; elseif($spec==='a')echo '{margin-left:auto;margin-right:auto;}';elseif($css)echo '{margin-left:'.$css.';margin-right:'.$css.';}'; else echo '{margin-left:var(--'.$descendant.$widget.');margin-right:var(--'.$descendant.$widget.');}';} elseif($attribute=='m_y'){echo $prefix;if($spec==='0')echo '{margin-top:0;margin-bottom:0;}'; elseif($spec==='1')echo '{margin-top:1em;margin-bottom:1em;}';elseif($css)echo '{margin-top:'.$css.';margin-bottom:'.$css.';}';else echo '{margin-top:var(--'.$descendant.$widget.');margin-bottom:var(--'.$descendant.$widget.');}';} elseif($attribute=='m_t'){ if($tag=='nav' && strpos($ancestorClassList,' h_ ')!==false ){// header nav has a margin-top, need to reduce its height so it will scroll properly if($spec==='0')$top='0';elseif($spec==='1')$top='1em'; elseif($css)$top=$css; else $top=$descendant.$widget; echo '#hamburger:checked+.wpg .h_ nav{height:calc(100% - '.$top.');}'; } echo $prefix;if($spec==='0')echo '{margin-top:0;}'; elseif($spec==='1')echo '{margin-top:1em;}'; elseif($spec==='a')echo '{margin-top:auto;}';elseif($css)echo '{margin-top:'.$css.';}'; else echo '{margin-top:var(--'.$descendant.$widget.');}'; if($widgetInfo['wpgTag']){ //echo PHP_EOL.'HERE '.$widgetInfo['wpgTag'].' prefix '.$prefix.' original '.$originalWidget.str_repeat('xxxxxxxxxxx',2000);ob_flush();flush();ob_flush();die; } } elseif($attribute=='m_r'){echo $prefix;if($spec==='0')echo '{margin-right:0;}'; elseif($spec==='1')echo '{margin-right:1em;}'; elseif($spec==='a')echo '{margin-right:auto;}';elseif($css)echo '{margin-right:'.$css.';}';else echo '{margin-right:var(--'.$descendant.$widget.');}';} elseif($attribute=='m_b'){echo $prefix;if($spec==='0')echo '{margin-bottom:0;}'; elseif($spec==='1')echo '{margin-bottom:1em;}'; elseif($spec==='a')echo '{margin-bottom:auto;}';elseif($css)echo '{margin-bottom:'.$css.';}';else echo '{margin-bottom:var(--'.$descendant.$widget.');}';} elseif($attribute=='m_l'){echo $prefix;if($spec==='0')echo '{margin-left:0;}'; elseif($spec==='1')echo '{margin-left:1em;}'; elseif($spec==='a')echo '{margin-left:auto;}';elseif($css)echo '{margin-left:'.$css.';}';else echo '{margin-left:var(--'.$descendant.$widget.');}';} elseif($attribute=='p_a'){echo $prefix;if($spec==='0')echo '{padding:0;}'; elseif($spec==='1')echo '{padding:1em;}'; elseif($css)echo '{padding:'.$css.';}'; else echo '{padding:var(--'.$descendant.$widget.');}';} elseif($attribute=='p_x'){echo $prefix;if($spec==='0')echo '{padding-left:0;padding-right:0;}'; elseif($spec==='1')echo '{padding-left:1em;padding-right:1em;}'; elseif($css)echo '{padding-left:'.$css.';padding-right:'.$css.';}'; else echo '{padding-left:var(--'.$descendant.$widget.');padding-right:var(--'.$descendant.$widget.');}';} elseif($attribute=='p_y'){echo $prefix;if($spec==='0')echo '{padding-top:0;padding-bottom:0;}'; elseif($spec==='1')echo '{padding-top:1em;padding-bottom:1em;}'; elseif($css)echo '{padding-top:'.$css.';padding-bottom:'.$css.';}';else echo '{padding-top:var(--'.$descendant.$widget.');padding-bottom:var(--'.$descendant.$widget.');}';} elseif($attribute=='p_t'){echo $prefix;if($spec==='0')echo '{padding-top:0;}'; elseif($spec==='1')echo '{padding-top:1em;}'; elseif($css)echo '{padding-top:'.$css.';}';else echo '{padding-top:var(--'.$descendant.$widget.');}';} elseif($attribute=='p_r'){echo $prefix;if($spec==='0')echo '{padding-right:0;}'; elseif($spec==='1')echo '{padding-right:1em;}'; elseif($css)echo '{padding-right:'.$css.';}';else echo '{padding-right:var(--'.$descendant.$widget.');}';} elseif($attribute=='p_b'){echo $prefix;if($spec==='0')echo '{padding-bottom:0;}'; elseif($spec==='1')echo '{padding-bottom:1em;}'; elseif($css)echo '{padding-bottom:'.$css.';}';else echo '{padding-bottom:var(--'.$descendant.$widget.');}';} elseif($attribute=='p_l'){echo $prefix;if($spec==='0')echo '{padding-left:0;}'; elseif($spec==='1')echo '{padding-left:1em;}'; elseif($css)echo '{padding-left:'.$css.';}';else echo '{padding-left:var(--'.$descendant.$widget.');}';} elseif($attribute=='r_a'){echo $prefix;if($spec==='0')echo '{top:0;bottom:0;left:0;right:0;}'; elseif($spec==='1')echo '{top:1em;bottom:1em;left:1em;right:1em;}'; elseif($css)echo '{top:'.$css.';bottom:'.$css.';left:'.$css.';right:'.$css.';}';} elseif($attribute=='r_x'){echo $prefix;if($spec==='0')echo '{left:0;right:0;}'; elseif($spec==='1')echo '{left:1em;right:1em;}'; elseif($spec==='a')echo '{left:auto;right:auto;}'; elseif($css)echo '{left:'.$css.';right:'.$css.';}';} elseif($attribute=='r_y'){echo $prefix;if($spec==='0')echo '{top:0;bottom:0;}'; elseif($spec==='1')echo '{top:1em;bottom:1em;}'; elseif($spec==='a')echo '{top:auto;bottom:auto;}';elseif($css)echo '{top:'.$css.';bottom:'.$css.';}';} elseif($attribute=='r_t'){echo $prefix;if($spec==='0')echo '{top:0;}';elseif($spec==='a')echo '{top:auto;}'; elseif($spec==='1')echo '{top:1em;}'; elseif($spec==='a')echo '{top:auto;}'; elseif($css)echo '{top:'.$css.';}';} elseif($attribute=='r_r'){echo $prefix;if($spec==='0')echo '{right:0;}';elseif($spec==='a')echo '{right:auto;}'; elseif($spec==='1')echo '{right:1em;}'; elseif($spec==='a')echo '{right:auto;}'; elseif($css)echo '{right:'.$css.';}';} elseif($attribute=='r_b'){echo $prefix;if($spec==='0')echo '{bottom:0;}';elseif($spec==='a')echo '{bottom:auto;}'; elseif($spec==='1')echo '{bottom:1em;}'; elseif($spec==='a')echo '{bottom:auto;}'; elseif($css)echo '{bottom:'.$css.';}';} elseif($attribute=='r_l'){echo $prefix;if($spec==='0')echo '{left:0;}';elseif($spec==='a')echo '{left:auto;}'; elseif($spec==='1')echo '{left:1em;}'; elseif($spec==='a')echo '{left:auto;}'; elseif($css)echo '{left:'.$css.';}';} elseif($attribute=='b_s'){// border spec $widget=substr($widget,3); $widget=str_split($widget); echo $prefix.'{border'; $x=array_shift($widget); //if($x=='a') declaration stands on its own if($x=='t' || $x =='y') echo '-top'; if($x=='l' || $x=='x') echo '-left'; if($x=='r') echo '-right'; if($x=='b') echo '-bottom'; $unit=parseSpec(array_shift($widget)); $count=''; while(ctype_digit($widget[0])){$count.=array_shift($widget);} if($widget[0]=='d'){ //this is a decimal point $count.='.'; array_shift($widget); while(ctype_digit($widget[0])){$count.=array_shift($widget);} } $rule=':'.$count.$unit.' '; $style=array_shift($widget); if($style=='s')$rule.='solid'; if($style=='h')$rule.='dashed'; if($style=='t')$rule.='dotted'; if($style=='b')$rule.='double'; $color=implode('',$widget); if($color=='trans')$rule.=' transparent';else $rule.=' var(--'.$color.')'; $rule.= ';'; echo $rule; if($x=='x'||$x=='y'){ if($x == 'x') echo 'border-right'; if($x == 'y') echo 'border-bottom'; echo $rule; } echo '}'; break; } elseif($attribute=='b_a'){echo $prefix;if(strpos($spec,'c9')!==false)echo'{border-color:var(--'.substr($spec,2).');}';if($spec==='0')echo '{border:0;}'; elseif($spec==='1')echo '{border-width:1px;}';elseif($css)echo '{border-width:'.$css.';}'; else echo '{border:var(--'.$descendant.$widget.');}';} elseif($attribute=='b_x'){echo $prefix;if($spec==='0')echo '{border-left-width:0;border-right-width:0;}';elseif($spec==='1')echo '{border-left-width:1px;border-right-width:1px;}';elseif($css)echo '{border-left-width:'.$css.';border-right-width:'.$css.';}'; else echo '{border-left:var(--'.$descendant.$widget.');border-right:var(--'.$descendant.$widget.');}';} elseif($attribute=='b_y'){echo $prefix;if($spec==='0')echo '{border-top-width:0;border-bottom-width:0;}';elseif($spec==='1')echo '{border-top-width:1px;border-bottom-width:1px;}';elseif($css)echo '{border-top-width:'.$css.';border-bottom-width:'.$css.';}'; else echo '{border-top:var(--'.$descendant.$widget.');border-bottom:var(--'.$descendant.$widget.');}';if($descendant=='xde_'){echo '#body .t_.'.$descendant.$widget.':before{content:\'\';position:absolute;top:0;height:0;width:100%;border-top:var(--'.$descendant.$widget.');}';echo '#body .t_.'.$descendant.$widget.':after{content:\'\';position:absolute;bottom:0;height:0;width:100%;border-top:var(--'.$descendant.$widget.');}';}} elseif($attribute=='b_t'){echo $prefix;if(strpos($spec,'c9')!==false)echo'{border-top-color:var(--'.substr($spec,2).');}';elseif($spec==='0')echo '{border-top-width:0;}';elseif($spec==='1')echo '{border-top-width:1px;}';elseif($css)echo '{border-top-width:'.$css.';}';else echo '{border-top:var(--'.$descendant.$widget.');}';if($descendant=='xde_')echo '#body .t_.'.$descendant.$widget.':after{content:\'\';position:absolute;bottom:0;height:0;width:100%;border-top:var(--'.$descendant.$widget.');}';} elseif($attribute=='b_r'){echo $prefix;if(strpos($spec,'c9')!==false){echo'{border-right-color:var(--'.substr($spec,2).');}';}elseif($spec==='0')echo '{border-right-width:0;}';elseif($spec==='1')echo '{border-right-width:1px;}';elseif($css)echo '{border-right-width:'.$css.';}';else echo '{border-right:var(--'.$descendant.$widget.');}';} elseif($attribute=='b_b'){echo $prefix;if(strpos($spec,'c9')!==false)echo'{border-bottom-color:var(--'.substr($spec,2).');}';elseif($spec==='0')echo '{border-bottom-width:0;}';elseif($spec==='1')echo '{border-bottom-width:1px;}';elseif($css)echo '{border-bottom-width:'.$css.';}';else echo '{border-bottom:var(--'.$descendant.$widget.');}';if($descendant=='xde_')echo '#body .t_.'.$descendant.$widget.':after{content:\'\';position:absolute;bottom:0;height:0;width:100%;border-top:var(--'.$descendant.$widget.');}';} elseif($attribute=='b_l'){echo $prefix;if(strpos($spec,'c9')!==false)echo'{border-left-color:var(--'.substr($spec,2).');}';if($spec==='0')echo '{border-left-width:0;}';elseif($spec==='1')echo '{border-left-width:1px;}';elseif($css)echo '{border-left-width:'.$css.';}';else echo '{border-left:var(--'.$descendant.$widget.');}';} elseif($attribute=='b_d'){ echo $prefix; if($spec==='0'){ echo '{border-radius:0;}'; }else{ $a=explode('_',$spec); array_shift($a); if(count($a)>1){ foreach($a as $i => $corner){ if(ctype_digit($corner[0]) && $corner!=0)$a[$i]='p'.$corner; } if(count($a)==1){$rule=parseSpec($a[0]);} if(count($a)==2){$rule=parseSpec($a[0]).' '.parseSpec($a[1]);} if(count($a)==3){$rule=parseSpec($a[0]).' '.parseSpec($a[1]).' '.parseSpec($a[2]);} if(count($a)==4){$rule=parseSpec($a[0]).' '.parseSpec($a[1]).' '.parseSpec($a[2]).' '.parseSpec($a[3]);} echo '{border-radius:'.$rule.';}'; }else{ echo '{border-radius:'.$css.';}'; } } } elseif($attribute=='b_c'){echo $prefix.'{border-color:var(--'.substr($widget,4).');}';} // border color elseif($attribute=='h_0'){echo $prefix;echo '{height:0}';} elseif($attribute=='h_a'){echo $prefix;echo '{height:auto}';} elseif($attribute=='h_x'){echo $prefix;if($spec==='n')echo '{max-height:none;}';elseif($css)echo '{max-height:'.$css.';}';else echo '{max-height:'.$spec.'em;}';} /* ide_h_x26 = descendant .i has max height of 26em */ elseif($attribute=='h_n'){echo $prefix;if($spec==='n')echo '{min-height:none;}';elseif($css)echo '{min-height:'.$css.';}';else echo '{min-height:'.$spec.'em;}';} /* ide_h_n26 = descendant .img_ has min height of 26em */ elseif($attribute=='h_f'){ /* h_f26 = fixed height of 26em */ echo $prefix;if($css)echo '{flex-shrink:0;height:'.$css.';}';else echo '{flex-shrink:0;height:'.$spec.'em;}'; //if(strpos($classList,' x_ ') !== false && strpos($classList,' r_f ') !== false && strpos($originalWidget,'aw_') === false){ // we have a position:fixed header with a fixed header height. Put out a style that changes the positioning of .by_ to accommodate the fixed header. //echo $prefix. ' '.$widget;die; //echo '.by_{transform:translateX('.$css.');}'; // this means the header is fixed //} } elseif($widget=='w_vwc'){echo $prefix.'{width:100vw;left:50%;transform:translateX(-50%);}';} elseif($widget=='w_xn'){echo $prefix.'{max-width:none;}';} elseif($attribute=='w_x'){ /* xde_w_x26 = descendant .x_ has max width of 26em */ if(!$css)$css=$spec.'em'; echo $prefix.'{max-width:'.$css.';'; if(strpos($originalWidget,'xde_') === false) echo 'margin-left:auto;margin-right:auto;'; // .x_ already has margin-left:auto;margin-right:auto; echo '}'; } elseif($attribute=='w_n'){echo $prefix;if($css)echo '{min-width:'.$css.';}';elseif($spec==='n')echo '{min-width:none;}';else echo '{min-width:'.$spec.'em;}';} /* xde_w_n26 = descendant .x_ has min width of 26em */ /* DO NOT set flex-basis on an attribute of w_f because if the element is a flex-item with a flex-direction of column you will force the height equal to the width */ elseif($attribute=='w_f'){/* w_f26 = fixed width of 26em, w_fp70 = fixed width 70%, need to set width so it works on table headers, table data w_fx34.5 = fixed width of 34.5 pixels, set margin left and right auto so automatic centering */ echo $prefix; if($css){ echo '{width:'.$css.';min-width:'.$css.';max-width:'.$css.';}'; }else{ echo '{width:'.$spec.'em;min-width:'.$spec.'em;max-width:'.$spec.'em;}'; } } elseif(substr($attribute,0,2)=='w_'){/* w_80 = width:80% */ echo $prefix.'{width:'.substr($widget,2).'%;}'; //if($widget=='w_0')echo 'border:0;'; this is too hard to 'undo' } elseif(substr($attribute,0,2)=='h_'){/* h_100 = height:100% */ echo $prefix.'{height:'.substr($widget,2).'%;'; echo '}'; } elseif($attribute=='s_f'){/* s_fe26 = fixed width & height of 26em */ if(!$css)$css='0'; echo $prefix.'{width:'.$css.';height:'.$css.';}'; } elseif(substr($attribute,0,2)=='s_'){ echo $prefix.'{width:'.$css.';height:'.$css.';'; if($descendant == 'nde_'&&strpos($css,'%')===false) echo 'line-height:'.$css.'em;'; if($widget=='w_0')echo 'border:0;'; echo '}'; } //=== right here put all the general rules for class starts with if($widget=='r_'){ echo $prefix.'.r_{position:relative;}'; // .r_ .r_te1d5 .r_ must be explicitly added to any .r_... declarations as we don't want to override position:absolute anywhere } } $spec=substr($widget,2,1); if($spec==='0'||$spec==='1'){ if(substr($widget,0,2)=='b_'){ echo $prefix; if($spec=='0')echo '{border-width:0;}';elseif($spec==1)echo '{border-width:1px;}'; } if(substr($widget,0,2)=='p_'){ echo $prefix; if($spec=='0')echo '{padding:0;}';else echo '{padding:1em}'; } if(substr($widget,0,2)=='m_'){ echo $prefix; if($spec=='0')echo '{margin:0;}'; } } break; } //needStyle } //LOOPEND2 //$output = ob_get_contents(); //ob_end_clean(); //$output = preg_replace('/\s+/', ' ', $output); //echo ($output); if(!array_key_exists('**',$genericLoaded) ){ $genericLoaded['**']=''; echo '.ldg_{position:fixed;width:120px;height:120px;top:50%;left:50%;border-radius:50%;transform:translate(-50%,-50%);z-index:10;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite;}'; foreach($STYLE_CSS_PATTERNS as $key => $value){if($key=='**')echo $value;} } $theWidgets = array_merge($theWidgets,$genericLoaded); $theWidgets = array_diff_assoc($theWidgets,$cln_wgl_assoc); return; ?>