force launch button styles for IE

docs/css/styles.css

@@ -84,7 +84,7 @@ div:not([tabindex]):focus {
     display: block;
     width: 100%;
     padding: 0.75rem;
-    color: #fff;
+    color: #fefefe;
     background: #000;
     position: absolute;
     top: -3rem;
@@ -145,7 +145,7 @@ code {
     background: #111;
 }
 .cmd code {
-    color: #fff;
+    color: #fefefe;
     white-space: nowrap;
 }
 .cmd code::before {
@@ -172,15 +172,18 @@ button {
     border-radius: 0.125em;
     font-family: inherit;
     background: #111;
-    color: #fff;
+    color: #fefefe;
     padding: 0.75rem;
     border: 0;
 }
 [data-launch] {
-  font-size: 0.75rem;
-  margin-top: 0.75rem;
-  padding: 0.5rem;
-  border-radius: 0;
+  font-size: 0.75rem !important;
+  margin-top: 0.75rem !important;
+  padding: 0.5rem !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  background: #111 !important;
+  color: #fefefe !important
 }
 
 /* Forms */
@@ -192,7 +195,7 @@ label {
 [for="themer"] {
   background: #111;
   border-radius: 0.125em;
-  color: #fff;
+  color: #fefefe;
   padding: 0.25em 0.75em;
   margin: 0.5rem;
 }
@@ -244,7 +247,7 @@ th:empty {
 .tested th {
     width: 100%;
     background-color: #111;
-    color: #fff;
+    color: #fefefe;
     outline-color: #111;
 }
 .tested img {
@@ -360,7 +363,7 @@ caption {
     background-position: 98% center;
     background-size: 125%;
     background-repeat: no-repeat;
-    color: #fff;
+    color: #fefefe;
     padding: 0.5em 1em 0.5em;
 }
 /* menu button */
@@ -550,7 +553,7 @@ pre[class*=language-] code * {
     overflow-y: hidden;
 }
 .file-tree li {
-    background: #fff;
+    background: #fefefe;
     position: relative;
     white-space: nowrap;
 }
@@ -693,7 +696,7 @@ h1 svg {
 .colors span {
     line-height: 1;
     background-color: #111;
-    color: #fff;
+    color: #fefefe;
     font-size: 0.75rem;
     padding: 0.25rem;
     position: absolute;
@@ -863,7 +866,7 @@ h1 svg {
         content: '';
     }
     .cmd code {
-        background: #fff;
+        background: #fefefe;
         color: #111;
     }
     pre code {
@@ -898,7 +901,7 @@ h1 svg {
 }
 @media (-ms-high-contrast: active) {
   img[src*=".svg"] {
-    background: #fff;
+    background: #fefefe;
     padding: 0.5rem;
   }
   .ticks li::before {

docs/patterns/coding/writing-inline-demos/index.html

@@ -506,6 +506,8 @@ toggle.addEventListener('click', function () {
     (function() {
       var root = document.getElementById('js-demo-285170a1c0812ad34ac4b853a052c8bd');
       var template = document.getElementById('template-285170a1c0812ad34ac4b853a052c8bd');
+
+      
       var demoDiv = document.createElement('div');
       demoDiv.innerHTML = template.innerHTML;
       var standaloneScript = demoDiv.querySelector('script');
@@ -540,14 +542,6 @@ toggle.addEventListener('click', function () {
         standalone.document.title = 'demo ' + "285170a1c0812ad34ac4b853a052c8bd";
       });
     })();
-    
-
-
-
-
-
-
-
   </script>
 </div>
 

docs/print-version/index.html

@@ -1880,6 +1880,8 @@ toggle.addEventListener('click', function () {
     (function() {
       var root = document.getElementById('js-demo-285170a1c0812ad34ac4b853a052c8bd');
       var template = document.getElementById('template-285170a1c0812ad34ac4b853a052c8bd');
+
+      
       var demoDiv = document.createElement('div');
       demoDiv.innerHTML = template.innerHTML;
       var standaloneScript = demoDiv.querySelector('script');
@@ -1914,14 +1916,6 @@ toggle.addEventListener('click', function () {
         standalone.document.title = 'demo ' + "285170a1c0812ad34ac4b853a052c8bd";
       });
     })();
-    
-
-
-
-
-
-
-
   </script>
 </div>
 

themes/infusion/layouts/shortcodes/demo.html

@@ -20,6 +20,8 @@
     (function() {
       var root = document.getElementById('js-demo-{{ $uniq }}');
       var template = document.getElementById('template-{{ $uniq }}');
+
+      // Save a version for the new window
       var demoDiv = document.createElement('div');
       demoDiv.innerHTML = template.innerHTML;
       var standaloneScript = demoDiv.querySelector('script');
@@ -56,45 +58,5 @@
         standalone.document.title = 'demo ' + {{ $uniq }};
       });
     })();
-    /*(function() {
-      var root = document.getElementById('js-demo-{{ $uniq }}');
-      var template = document.getElementById('template-{{ $uniq }}');
-      var script = template.content.querySelector('script');
-
-      if (script) {
-        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})();';
-        script.textContent = wrappedScript;
-      }
-
-      if (document.head.attachShadow) {
-        root.attachShadow({mode: 'open'});
-        root.shadowRoot.appendChild(document.importNode(template.content, true));
-      } else {
-        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
-      }
-
-      var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
-      launchButton.addEventListener('click', function () {
-        var standalone = window.open();
-        script.innerHTML = standaloneScript;
-        var demoDiv = document.createElement('div');
-        demoDiv.innerHTML = template.innerHTML;
-        standalone.document.body.appendChild(demoDiv);
-
-        // For activating the script :-(
-        var newScript = standalone.document.createElement('script');
-        var oldScript = standalone.document.querySelector('script');
-        newScript.textContent = oldScript.textContent;
-        oldScript.parentNode.removeChild(oldScript);
-        standalone.document.body.appendChild(newScript);
-
-        {{ if .Get "backgroundColor" }}
-          standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
-        {{ end }}
-
-        standalone.document.title = 'demo ' + {{ $uniq }};
-      });
-    })();*/
   </script>
 </div>

themes/infusion/static/css/styles.css

@@ -84,7 +84,7 @@ div:not([tabindex]):focus {
     display: block;
     width: 100%;
     padding: 0.75rem;
-    color: #fff;
+    color: #fefefe;
     background: #000;
     position: absolute;
     top: -3rem;
@@ -145,7 +145,7 @@ code {
     background: #111;
 }
 .cmd code {
-    color: #fff;
+    color: #fefefe;
     white-space: nowrap;
 }
 .cmd code::before {
@@ -172,15 +172,18 @@ button {
     border-radius: 0.125em;
     font-family: inherit;
     background: #111;
-    color: #fff;
+    color: #fefefe;
     padding: 0.75rem;
     border: 0;
 }
 [data-launch] {
-  font-size: 0.75rem;
-  margin-top: 0.75rem;
-  padding: 0.5rem;
-  border-radius: 0;
+  font-size: 0.75rem !important;
+  margin-top: 0.75rem !important;
+  padding: 0.5rem !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  background: #111 !important;
+  color: #fefefe !important
 }
 
 /* Forms */
@@ -192,7 +195,7 @@ label {
 [for="themer"] {
   background: #111;
   border-radius: 0.125em;
-  color: #fff;
+  color: #fefefe;
   padding: 0.25em 0.75em;
   margin: 0.5rem;
 }
@@ -244,7 +247,7 @@ th:empty {
 .tested th {
     width: 100%;
     background-color: #111;
-    color: #fff;
+    color: #fefefe;
     outline-color: #111;
 }
 .tested img {
@@ -360,7 +363,7 @@ caption {
     background-position: 98% center;
     background-size: 125%;
     background-repeat: no-repeat;
-    color: #fff;
+    color: #fefefe;
     padding: 0.5em 1em 0.5em;
 }
 /* menu button */
@@ -550,7 +553,7 @@ pre[class*=language-] code * {
     overflow-y: hidden;
 }
 .file-tree li {
-    background: #fff;
+    background: #fefefe;
     position: relative;
     white-space: nowrap;
 }
@@ -693,7 +696,7 @@ h1 svg {
 .colors span {
     line-height: 1;
     background-color: #111;
-    color: #fff;
+    color: #fefefe;
     font-size: 0.75rem;
     padding: 0.25rem;
     position: absolute;
@@ -863,7 +866,7 @@ h1 svg {
         content: '';
     }
     .cmd code {
-        background: #fff;
+        background: #fefefe;
         color: #111;
     }
     pre code {
@@ -898,7 +901,7 @@ h1 svg {
 }
 @media (-ms-high-contrast: active) {
   img[src*=".svg"] {
-    background: #fff;
+    background: #fefefe;
     padding: 0.5rem;
   }
   .ticks li::before {