website: Blurry background for dialog box

2014-12-06 13:40:15 +01:00 · 2014-12-06 13:40:15 +01:00 · e18e0f6ea4
commit e18e0f6ea4
parent b4e455e845
2 changed files with 68 additions and 28 deletions
--- a/index.html
+++ b/index.html
@ -9,16 +9,16 @@ purposes.'>
 <link href='//fonts.googleapis.com/css?family=Lekton' rel='stylesheet'>
 <!-- Warning: this file was generated from try.html -->
 <style>
-html { background-attachment: fixed; transition: background-color 0.5s;
+html { background-attachment: fixed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iNDgwIj48ZmlsdGVyIGlkPSJhIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii4wOCIgbnVtT2N0YXZlcz0iOCIgc3RpdGNoVGlsZXM9InN0aXRjaCIgc2VlZD0iMzQ2Ii8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIxIDAgMCAwIDAgIDEgMCAwIDAgMCAgMSAwIDAgMCAuOSAgLjAxIDAgMCAwIC4wMSIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNhKSIvPjwvc3ZnPg==);
 }
-:root { text-align: center; font-family: Lekton, sans-serif; color: #534; }
-code, #copyMarkdown, #copyreStructuredText {
-  white-space: pre-wrap; padding: 0 4px; border: 1px solid grey;
+:root, dialog { text-align: center; font-family: Lekton, sans-serif; color: #534; }
+code, .code { font-family: Lekton; white-space: pre-wrap; padding: 0 4px;
  background: #eef; border-radius: 4px; }
 input.short { width: 5em; }
 input { text-align: center; border: solid #b9a; color: #534; border-width: 0 0 1px 0;
-  width: 40%; background-color: transparent; }
+  width: 40%; height: 15px; padding: 0; background-color: transparent; }
+input:focus { outline: 0; }
 hr { width: 40%; border-width: 1px 0 0 0; }
 a.photo { text-decoration: none; }
 a.photo>img { padding: 2px; border: 1px solid grey; }
@ -32,15 +32,19 @@ h2::after { content: ' ❧'; }
 h2 { margin-top: 12mm; font-variant: small-caps; }
 hr.spacing { border: 0; display: block; height: 3mm; }
 .highlights { font-style: italic; }
-#copyDialog { display: none; position: fixed; background: rgba(100, 100, 100, 0.5); }
+#main { transition: filter 1s, -webkit-filter 1s; }
+#main.blur { filter: url(#gaussian-blur); filter: blur(1px); -webkit-filter: blur(1px); }
+#copyDialog { display: none; position: fixed; border: 0; opacity: 0;
+  background-color: rgba(50,50,55,0.7); transition: opacity 0.5s; }
 #copyForm { background: #fafaff; position: fixed; width: 100%;
-  top: 50%; left: 0; transform: translate(0, -75%);
+  top: 50%; left: 0; transform: translate(0, -80%);
  border-top: 15px solid #eaeaff;
  border-bottom: 15px solid #eaeaff;
 }
 table.badge > tbody > tr > td > img { cursor: pointer; }
 </style>

+<main id='main'>
 <img alt='Shields IO' src='logo.svg'/>
 <hr class='spacing'/>

@ -449,9 +453,9 @@ When that is implemented, change the placeholder to
  </td><td>  →
  </td><td>  <code>_</code> Underscore <br/>
  </td></tr>
-  <tr><td>   <code>_</code> or Space <code> </code>
+  <tr><td>   <code>_</code> or Space <code>&nbsp;</code>
  </td><td>  →
-  </td><td>  <code> </code> Space
+  </td><td>  <code>&nbsp;</code> Space
  </td></tr>
 </tbody></table>

@ -606,6 +610,7 @@ is where the current server got started.
  <img alt='nitram509' src='https://www.gravatar.com/avatar/fa01e907fd400c42d481f431c4410954.png'>
 </a>
 <p><small>:wq</small></p>
+</main>

 <dialog id='copyDialog'>
 <form id='copyForm'>
@ -620,12 +625,18 @@ is where the current server got started.
    </select>
  </label>
  </p><p> Markdown
-  <output id=copyMarkdown>&nbsp;</output>
+  <input class=code id=copyMarkdown>
  </p><p> reStructuredText
-  <output id=copyreStructuredText>&nbsp;</output>
+  <input class=code id=copyreStructuredText>
 </form>
 </dialog>

+<svg style='height:0'>
+  <filter id='gaussian-blur'>
+    <feGaussianBlur stdDeviation='0.7' />
+  </filter>
+</svg>
+
 <script>
 // Search
 var searchBadgeDb = {index: [], tr: []};
@ -708,15 +719,24 @@ function markupDialog(tr) {
  copyFormUrlEventListener();
  markupDialogShow();
 }
+var isFirefox = /Firefox\/[\.0-9]+$/.test(navigator.userAgent);
 function markupDialogShow() {
-  document.documentElement.style.backgroundColor = '#777';
  document.body.addEventListener('click', markupDialogHide);
+  // We must draw it once displayed before changing the opacity to transition.
+  setTimeout(function() { copyDialog.style.opacity = '1'; }, 20);
+  if (!isFirefox) {
+    main.classList.add('blur');
+  } else {
+    // We must delay blurring to avoid sloppy transition in Firefox.
+    setTimeout(function() { main.classList.add('blur'); }, 500);
+  }
  copyDialog.style.display = 'block';
 }
 function markupDialogHide() {
-  document.documentElement.style.backgroundColor = 'white';
  document.body.removeEventListener('click', markupDialogHide);
-  copyDialog.style.display = 'none';
+  copyDialog.style.opacity = '0';
+  main.classList.remove('blur');
+  setTimeout(function() { copyDialog.style.display = 'none'; }, 500);
 }
 copyForm.addEventListener('click', function(event) {
  event.stopPropagation();
--- a/try.html
+++ b/try.html
@ -8,16 +8,16 @@ purposes.'>
 <link rel='icon' type='image/png' href='favicon.png'>
 <link href='//fonts.googleapis.com/css?family=Lekton' rel='stylesheet'>
 <style>
-html { background-attachment: fixed; transition: background-color 0.5s;
+html { background-attachment: fixed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iNDgwIj48ZmlsdGVyIGlkPSJhIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii4wOCIgbnVtT2N0YXZlcz0iOCIgc3RpdGNoVGlsZXM9InN0aXRjaCIgc2VlZD0iMzQ2Ii8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIxIDAgMCAwIDAgIDEgMCAwIDAgMCAgMSAwIDAgMCAuOSAgLjAxIDAgMCAwIC4wMSIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNhKSIvPjwvc3ZnPg==);
 }
-:root { text-align: center; font-family: Lekton, sans-serif; color: #534; }
-code, #copyMarkdown, #copyreStructuredText {
-  white-space: pre-wrap; padding: 0 4px; border: 1px solid grey;
+:root, dialog { text-align: center; font-family: Lekton, sans-serif; color: #534; }
+code, .code { font-family: Lekton; white-space: pre-wrap; padding: 0 4px;
  background: #eef; border-radius: 4px; }
 input.short { width: 5em; }
 input { text-align: center; border: solid #b9a; color: #534; border-width: 0 0 1px 0;
-  width: 40%; background-color: transparent; }
+  width: 40%; height: 15px; padding: 0; background-color: transparent; }
+input:focus { outline: 0; }
 hr { width: 40%; border-width: 1px 0 0 0; }
 a.photo { text-decoration: none; }
 a.photo>img { padding: 2px; border: 1px solid grey; }
@ -31,15 +31,19 @@ h2::after { content: ' ❧'; }
 h2 { margin-top: 12mm; font-variant: small-caps; }
 hr.spacing { border: 0; display: block; height: 3mm; }
 .highlights { font-style: italic; }
-#copyDialog { display: none; position: fixed; background: rgba(100, 100, 100, 0.5); }
+#main { transition: filter 1s, -webkit-filter 1s; }
+#main.blur { filter: url(#gaussian-blur); filter: blur(1px); -webkit-filter: blur(1px); }
+#copyDialog { display: none; position: fixed; border: 0; opacity: 0;
+  background-color: rgba(50,50,55,0.7); transition: opacity 0.5s; }
 #copyForm { background: #fafaff; position: fixed; width: 100%;
-  top: 50%; left: 0; transform: translate(0, -75%);
+  top: 50%; left: 0; transform: translate(0, -80%);
  border-top: 15px solid #eaeaff;
  border-bottom: 15px solid #eaeaff;
 }
 table.badge > tbody > tr > td > img { cursor: pointer; }
 </style>

+<main id='main'>
 <img alt='Shields IO' src='logo.svg'/>
 <hr class='spacing'/>

@ -448,9 +452,9 @@ When that is implemented, change the placeholder to
  </td><td>  →
  </td><td>  <code>_</code> Underscore <br/>
  </td></tr>
-  <tr><td>   <code>_</code> or Space <code> </code>
+  <tr><td>   <code>_</code> or Space <code>&nbsp;</code>
  </td><td>  →
-  </td><td>  <code> </code> Space
+  </td><td>  <code>&nbsp;</code> Space
  </td></tr>
 </tbody></table>

@ -605,6 +609,7 @@ is where the current server got started.
  <img alt='nitram509' src='https://www.gravatar.com/avatar/fa01e907fd400c42d481f431c4410954.png'>
 </a>
 <p><small>:wq</small></p>
+</main>

 <dialog id='copyDialog'>
 <form id='copyForm'>
@ -619,12 +624,18 @@ is where the current server got started.
    </select>
  </label>
  </p><p> Markdown
-  <output id=copyMarkdown>&nbsp;</output>
+  <input class=code id=copyMarkdown>
  </p><p> reStructuredText
-  <output id=copyreStructuredText>&nbsp;</output>
+  <input class=code id=copyreStructuredText>
 </form>
 </dialog>

+<svg style='height:0'>
+  <filter id='gaussian-blur'>
+    <feGaussianBlur stdDeviation='0.7' />
+  </filter>
+</svg>
+
 <script>
 // Search
 var searchBadgeDb = {index: [], tr: []};
@ -707,15 +718,24 @@ function markupDialog(tr) {
  copyFormUrlEventListener();
  markupDialogShow();
 }
+var isFirefox = /Firefox\/[\.0-9]+$/.test(navigator.userAgent);
 function markupDialogShow() {
-  document.documentElement.style.backgroundColor = '#777';
  document.body.addEventListener('click', markupDialogHide);
+  // We must draw it once displayed before changing the opacity to transition.
+  setTimeout(function() { copyDialog.style.opacity = '1'; }, 20);
+  if (!isFirefox) {
+    main.classList.add('blur');
+  } else {
+    // We must delay blurring to avoid sloppy transition in Firefox.
+    setTimeout(function() { main.classList.add('blur'); }, 500);
+  }
  copyDialog.style.display = 'block';
 }
 function markupDialogHide() {
-  document.documentElement.style.backgroundColor = 'white';
  document.body.removeEventListener('click', markupDialogHide);
-  copyDialog.style.display = 'none';
+  copyDialog.style.opacity = '0';
+  main.classList.remove('blur');
+  setTimeout(function() { copyDialog.style.display = 'none'; }, 500);
 }
 copyForm.addEventListener('click', function(event) {
  event.stopPropagation();