Skip to content

Commit

Permalink
Fixes dark theme "flash" when changing page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@genemars
genemars committed Apr 27, 2022
1 parent 7e05f11 commit 1221f5e
Show file tree
Hide file tree
Showing 149 changed files with 447 additions and 961 deletions.
6 changes: 1 addition & 5 deletions docs/about/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,14 +246,12 @@
background-color: var(--lite-color);
color: var(--lite-color-text);
font-weight: var(--lite-font--weigth);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
nav, footer {
background-color: var(--lite-nav-color);
color: var(--lite-nav-color-text);
fill: var(--lite-nav-color-text);
box-shadow: 0 4px 6px 0 rgb(0 0 0 / 20%), 0 -4px 12px 0 rgb(0 0 0 / 20%);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
nav svg, .menu-button svg {
fill:var(--lite-nav-color-text);
Expand Down Expand Up @@ -331,14 +329,12 @@
background-color: var(--dark-color);
color: var(--dark-color-text);
font-weight: var(--dark-font--weigth);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
.theme-dark nav, .theme-dark footer {
background-color: var(--dark-nav-color);
color: var(--dark-nav-color-text);
fill: var(--dark-nav-color-text);
box-shadow: 0 4px 6px 0 rgb(0 0 0 / 20%), 0 -4px 12px 0 rgb(0 0 0 / 20%);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
.theme-dark nav svg, .theme-dark .menu-button svg {
fill:var(--dark-nav-color-text);
Expand Down Expand Up @@ -607,4 +603,4 @@
}
.theme-dark footer .active {
color: var(--dark-color--accent)!important;
}</style><!-- Built with love using zUIx Web Starter --><script>let pageIndicator,pageButtons;function syncPageIndicator(e){pageButtons&&(pageButtons.eq(e.out).removeClass("active"),pageButtons.eq(e.in).addClass("active")),pageIndicator&&pageIndicator.page(e.in)}function themeSetup(){const a=zuix.$(document.body),n=a.find(".theme-toggle"),o="theme-dark",i="app.theme";function e(e){var t=e?n.checked():"true"===localStorage.getItem(i);e||n.checked(t),t?a.addClass(o):a.removeClass(o),localStorage.setItem(i,String(t))}n.on("change",e),e()}zuix.lazyLoad(!0,-window.innerWidth/4),options={pageIndicator:{contextId:"page-indicator",enablePaging:!0,startGap:40,ready:function(e){pageIndicator=e,0<(pageButtons=pageIndicator.$.find("div")).length()&&pageButtons.each(function(t,e,a){a.on("click",function(e){viewPager&&viewPager.page(t)})})}}},themeSetup()</script><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script><!-- zUIx.js inline resources bundle --><script src="index.bundle.ext.js"></script>
}</style><!-- Built with love using zUIx Web Starter --><script>let pageIndicator,pageButtons;function syncPageIndicator(e){pageButtons&&(pageButtons.eq(e.out).removeClass("active"),pageButtons.eq(e.in).addClass("active")),pageIndicator&&pageIndicator.page(e.in)}function themeSetup(){const a=zuix.$(document.body),n=a.find(".theme-toggle"),o="theme-dark",i="app.theme",e={transition:"color 300ms ease-in, background-color 300ms ease-in"};function t(e){var t=e?n.checked():"true"===localStorage.getItem(i);e||n.checked(t),t?a.addClass(o):a.removeClass(o),localStorage.setItem(i,String(t))}setTimeout(function(){a.css(e),a.find("header").css(e),a.find("nav").css(e),a.find("footer").css(e)},100),n.on("change",t),t()}zuix.lazyLoad(!0,-window.innerWidth/4),options={pageIndicator:{contextId:"page-indicator",enablePaging:!0,startGap:40,ready:function(e){pageIndicator=e,0<(pageButtons=pageIndicator.$.find("div")).length()&&pageButtons.each(function(t,e,a){a.on("click",function(e){viewPager&&viewPager.page(t)})})}}},themeSetup()</script><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script><!-- zUIx.js inline resources bundle --><script src="index.bundle.ext.js"></script>
6 changes: 1 addition & 5 deletions docs/content/europe/aca-hi-mashalhuj/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,14 +353,12 @@
background-color: var(--lite-color);
color: var(--lite-color-text);
font-weight: var(--lite-font--weigth);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
nav, footer {
background-color: var(--lite-nav-color);
color: var(--lite-nav-color-text);
fill: var(--lite-nav-color-text);
box-shadow: 0 4px 6px 0 rgb(0 0 0 / 20%), 0 -4px 12px 0 rgb(0 0 0 / 20%);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
nav svg, .menu-button svg {
fill:var(--lite-nav-color-text);
Expand Down Expand Up @@ -438,14 +436,12 @@
background-color: var(--dark-color);
color: var(--dark-color-text);
font-weight: var(--dark-font--weigth);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
.theme-dark nav, .theme-dark footer {
background-color: var(--dark-nav-color);
color: var(--dark-nav-color-text);
fill: var(--dark-nav-color-text);
box-shadow: 0 4px 6px 0 rgb(0 0 0 / 20%), 0 -4px 12px 0 rgb(0 0 0 / 20%);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
.theme-dark nav svg, .theme-dark .menu-button svg {
fill:var(--dark-nav-color-text);
Expand Down Expand Up @@ -607,4 +603,4 @@
white-space: nowrap;
}</style><!--
// TODO: List of related pages
--></main><div z-load="@lib/components/menu-overlay" class="visible-on-ready" data-o-position="center"><div #items=""><a href="javascript:closeContent()" class="button"><span>Close</span> <i class="material-icons" style="margin-right: 2px">close</i> </a><a href="javascript:printContent()" class="button"><span>Print</span> <i class="material-icons" style="margin-right: 2px">print</i> </a><a href="javascript:shareContent()" class="button"><span>Share</span> <i class="material-icons" style="margin-right: 2px">share</i></a></div><!-- custom open/close menu button --><div #menu_button=""><a class="circle-button" href="javascript:;" title="Open menu"><i class="material-icons">toc</i></a></div><div #menu_button_close=""><a class="circle-button" href="javascript:;" title="Close menu"><i class="material-icons">close</i></a></div></div><footer layout="columns center-center" style="min-height: 80px"><div self="size-large" layout="rows center-justify" style="padding: 12px; opacity: 0.75"><a href="https://pagespeed.web.dev/report?url=https://zuixjs.github.io/news-blog/content/europe/aca-hi-mashalhuj/"><div layout="row center-center" style="gap: 8px"><img width="24" height="24" alt="PageSpeed Insight logo" src="/news-blog/images/page-speed-insight-icon.png"> <span>PageSpeed Insight</span></div></a><div>powered by <a href="https://zuixjs.org"><strong>zuix.js</strong></a></div></div></footer><!-- Built with love using zUIx Web Starter --><script>function closeContent(){"/editor/"!==window.parent.location.pathname&&(window.parent.closeContentFrame?window.parent.closeContentFrame(location):"/editor/"!==parent.top.location.pathname&&(location.href="../../../home/#europe"))}function shareContent(){var t={title:document.title,text:document.querySelector('meta[name="description"]').content,url:document.location.href};navigator.share?navigator.share(t).then(()=>{console.log("Document url shared.")}).catch(console.error):(console.log(t),console.log("Sharing is not available in the current context"))}function printContent(){setTimeout(window.print,750)}document.body.addEventListener("keyup",function(t){if("Escape"===t.key){const e=zuix.context("actions-menu");e&&e.showing()||closeContent()}});const history=window.history;function themeSetup(){const o=zuix.$(document.body),n=o.find(".theme-toggle"),a="theme-dark",c="app.theme";function t(t){var e=t?n.checked():"true"===localStorage.getItem(c);t||n.checked(e),e?o.addClass(a):o.removeClass(a),localStorage.setItem(c,String(e))}n.on("change",t),t()}history&&history.pushState&&(history.pushState("back-detect",null,"#open"),window.onpopstate=function(){closeContent()}),themeSetup()</script><!-- zuix-editor data --><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script><!-- zUIx.js inline resources bundle --><script src="index.bundle.ext.js"></script></body><!-- page script -->
--></main><div z-load="@lib/components/menu-overlay" class="visible-on-ready" data-o-position="center"><div #items=""><a href="javascript:closeContent()" class="button"><span>Close</span> <i class="material-icons" style="margin-right: 2px">close</i> </a><a href="javascript:printContent()" class="button"><span>Print</span> <i class="material-icons" style="margin-right: 2px">print</i> </a><a href="javascript:shareContent()" class="button"><span>Share</span> <i class="material-icons" style="margin-right: 2px">share</i></a></div><!-- custom open/close menu button --><div #menu_button=""><a class="circle-button" href="javascript:;" title="Open menu"><i class="material-icons">toc</i></a></div><div #menu_button_close=""><a class="circle-button" href="javascript:;" title="Close menu"><i class="material-icons">close</i></a></div></div><footer layout="columns center-center" style="min-height: 80px"><div self="size-large" layout="rows center-justify" style="padding: 12px; opacity: 0.75"><a href="https://pagespeed.web.dev/report?url=https://zuixjs.github.io/news-blog/content/europe/aca-hi-mashalhuj/"><div layout="row center-center" style="gap: 8px"><img width="24" height="24" alt="PageSpeed Insight logo" src="/news-blog/images/page-speed-insight-icon.png"> <span>PageSpeed Insight</span></div></a><div>powered by <a href="https://zuixjs.org"><strong>zuix.js</strong></a></div></div></footer><!-- Built with love using zUIx Web Starter --><script>function closeContent(){"/editor/"!==window.parent.location.pathname&&(window.parent.closeContentFrame?window.parent.closeContentFrame(location):"/editor/"!==parent.top.location.pathname&&(location.href="../../../home/#europe"))}function shareContent(){var e={title:document.title,text:document.querySelector('meta[name="description"]').content,url:document.location.href};navigator.share?navigator.share(e).then(()=>{console.log("Document url shared.")}).catch(console.error):(console.log(e),console.log("Sharing is not available in the current context"))}function printContent(){setTimeout(window.print,750)}document.body.addEventListener("keyup",function(e){if("Escape"===e.key){const t=zuix.context("actions-menu");t&&t.showing()||closeContent()}});const history=window.history;function themeSetup(){const o=zuix.$(document.body),n=o.find(".theme-toggle"),c="theme-dark",a="app.theme",e={transition:"color 300ms ease-in, background-color 300ms ease-in"};function t(e){var t=e?n.checked():"true"===localStorage.getItem(a);e||n.checked(t),t?o.addClass(c):o.removeClass(c),localStorage.setItem(a,String(t))}setTimeout(function(){o.css(e),o.find("header").css(e),o.find("nav").css(e),o.find("footer").css(e)},100),n.on("change",t),t()}history&&history.pushState&&(history.pushState("back-detect",null,"#open"),window.onpopstate=function(){closeContent()}),themeSetup()</script><!-- zuix-editor data --><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script><!-- zUIx.js inline resources bundle --><script src="index.bundle.ext.js"></script></body><!-- page script -->
6 changes: 1 addition & 5 deletions docs/content/europe/ag-zoh-kuvoh/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,14 +353,12 @@
background-color: var(--lite-color);
color: var(--lite-color-text);
font-weight: var(--lite-font--weigth);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
nav, footer {
background-color: var(--lite-nav-color);
color: var(--lite-nav-color-text);
fill: var(--lite-nav-color-text);
box-shadow: 0 4px 6px 0 rgb(0 0 0 / 20%), 0 -4px 12px 0 rgb(0 0 0 / 20%);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
nav svg, .menu-button svg {
fill:var(--lite-nav-color-text);
Expand Down Expand Up @@ -438,14 +436,12 @@
background-color: var(--dark-color);
color: var(--dark-color-text);
font-weight: var(--dark-font--weigth);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
.theme-dark nav, .theme-dark footer {
background-color: var(--dark-nav-color);
color: var(--dark-nav-color-text);
fill: var(--dark-nav-color-text);
box-shadow: 0 4px 6px 0 rgb(0 0 0 / 20%), 0 -4px 12px 0 rgb(0 0 0 / 20%);
transition: color 300ms ease-in, background-color 300ms ease-in;
}
.theme-dark nav svg, .theme-dark .menu-button svg {
fill:var(--dark-nav-color-text);
Expand Down Expand Up @@ -607,4 +603,4 @@
white-space: nowrap;
}</style><!--
// TODO: List of related pages
--></main><div z-load="@lib/components/menu-overlay" class="visible-on-ready" data-o-position="center"><div #items=""><a href="javascript:closeContent()" class="button"><span>Close</span> <i class="material-icons" style="margin-right: 2px">close</i> </a><a href="javascript:printContent()" class="button"><span>Print</span> <i class="material-icons" style="margin-right: 2px">print</i> </a><a href="javascript:shareContent()" class="button"><span>Share</span> <i class="material-icons" style="margin-right: 2px">share</i></a></div><!-- custom open/close menu button --><div #menu_button=""><a class="circle-button" href="javascript:;" title="Open menu"><i class="material-icons">toc</i></a></div><div #menu_button_close=""><a class="circle-button" href="javascript:;" title="Close menu"><i class="material-icons">close</i></a></div></div><footer layout="columns center-center" style="min-height: 80px"><div self="size-large" layout="rows center-justify" style="padding: 12px; opacity: 0.75"><a href="https://pagespeed.web.dev/report?url=https://zuixjs.github.io/news-blog/content/europe/ag-zoh-kuvoh/"><div layout="row center-center" style="gap: 8px"><img width="24" height="24" alt="PageSpeed Insight logo" src="/news-blog/images/page-speed-insight-icon.png"> <span>PageSpeed Insight</span></div></a><div>powered by <a href="https://zuixjs.org"><strong>zuix.js</strong></a></div></div></footer><!-- Built with love using zUIx Web Starter --><script>function closeContent(){"/editor/"!==window.parent.location.pathname&&(window.parent.closeContentFrame?window.parent.closeContentFrame(location):"/editor/"!==parent.top.location.pathname&&(location.href="../../../home/#europe"))}function shareContent(){var t={title:document.title,text:document.querySelector('meta[name="description"]').content,url:document.location.href};navigator.share?navigator.share(t).then(()=>{console.log("Document url shared.")}).catch(console.error):(console.log(t),console.log("Sharing is not available in the current context"))}function printContent(){setTimeout(window.print,750)}document.body.addEventListener("keyup",function(t){if("Escape"===t.key){const e=zuix.context("actions-menu");e&&e.showing()||closeContent()}});const history=window.history;function themeSetup(){const o=zuix.$(document.body),n=o.find(".theme-toggle"),a="theme-dark",c="app.theme";function t(t){var e=t?n.checked():"true"===localStorage.getItem(c);t||n.checked(e),e?o.addClass(a):o.removeClass(a),localStorage.setItem(c,String(e))}n.on("change",t),t()}history&&history.pushState&&(history.pushState("back-detect",null,"#open"),window.onpopstate=function(){closeContent()}),themeSetup()</script><!-- zuix-editor data --><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script><!-- zUIx.js inline resources bundle --><script src="index.bundle.ext.js"></script></body><!-- page script -->
--></main><div z-load="@lib/components/menu-overlay" class="visible-on-ready" data-o-position="center"><div #items=""><a href="javascript:closeContent()" class="button"><span>Close</span> <i class="material-icons" style="margin-right: 2px">close</i> </a><a href="javascript:printContent()" class="button"><span>Print</span> <i class="material-icons" style="margin-right: 2px">print</i> </a><a href="javascript:shareContent()" class="button"><span>Share</span> <i class="material-icons" style="margin-right: 2px">share</i></a></div><!-- custom open/close menu button --><div #menu_button=""><a class="circle-button" href="javascript:;" title="Open menu"><i class="material-icons">toc</i></a></div><div #menu_button_close=""><a class="circle-button" href="javascript:;" title="Close menu"><i class="material-icons">close</i></a></div></div><footer layout="columns center-center" style="min-height: 80px"><div self="size-large" layout="rows center-justify" style="padding: 12px; opacity: 0.75"><a href="https://pagespeed.web.dev/report?url=https://zuixjs.github.io/news-blog/content/europe/ag-zoh-kuvoh/"><div layout="row center-center" style="gap: 8px"><img width="24" height="24" alt="PageSpeed Insight logo" src="/news-blog/images/page-speed-insight-icon.png"> <span>PageSpeed Insight</span></div></a><div>powered by <a href="https://zuixjs.org"><strong>zuix.js</strong></a></div></div></footer><!-- Built with love using zUIx Web Starter --><script>function closeContent(){"/editor/"!==window.parent.location.pathname&&(window.parent.closeContentFrame?window.parent.closeContentFrame(location):"/editor/"!==parent.top.location.pathname&&(location.href="../../../home/#europe"))}function shareContent(){var e={title:document.title,text:document.querySelector('meta[name="description"]').content,url:document.location.href};navigator.share?navigator.share(e).then(()=>{console.log("Document url shared.")}).catch(console.error):(console.log(e),console.log("Sharing is not available in the current context"))}function printContent(){setTimeout(window.print,750)}document.body.addEventListener("keyup",function(e){if("Escape"===e.key){const t=zuix.context("actions-menu");t&&t.showing()||closeContent()}});const history=window.history;function themeSetup(){const o=zuix.$(document.body),n=o.find(".theme-toggle"),c="theme-dark",a="app.theme",e={transition:"color 300ms ease-in, background-color 300ms ease-in"};function t(e){var t=e?n.checked():"true"===localStorage.getItem(a);e||n.checked(t),t?o.addClass(c):o.removeClass(c),localStorage.setItem(a,String(t))}setTimeout(function(){o.css(e),o.find("header").css(e),o.find("nav").css(e),o.find("footer").css(e)},100),n.on("change",t),t()}history&&history.pushState&&(history.pushState("back-detect",null,"#open"),window.onpopstate=function(){closeContent()}),themeSetup()</script><!-- zuix-editor data --><!-- zUIx.js inline resources bundle --><script src="index.bundle.js"></script><!-- zUIx.js inline resources bundle --><script src="index.bundle.ext.js"></script></body><!-- page script -->
Loading

0 comments on commit 1221f5e

Please sign in to comment.