From 2392167996e954004b0a1d1b00e022688b61fdae Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 9 Mar 2017 19:05:44 +0100
Subject: [PATCH] Export slides as PDF

---
 customize.dist/main.css               | 200 +-----------------
 customize.dist/src/less/alertify.less |   3 +
 customize.dist/src/less/cryptpad.less | 192 -----------------
 package.json                          |   2 +-
 www/slide/inner.html                  |  51 +----
 www/slide/main.js                     |  13 ++
 www/slide/slide.css                   | 285 ++++++++++++++++++++++++++
 www/slide/slide.less                  | 278 +++++++++++++++++++++++++
 8 files changed, 587 insertions(+), 437 deletions(-)
 create mode 100644 www/slide/slide.css
 create mode 100644 www/slide/slide.less

diff --git a/customize.dist/main.css b/customize.dist/main.css
index 831d70b8a..f33c44dff 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -1,6 +1,11 @@
 /*  Logs are shown to inform the user that something has happened
     They are only displayed briefly
 */
+@media print {
+  .alertify-logs {
+    visibility: hidden;
+  }
+}
 .alertify-logs > * {
   padding: 12px 48px;
   color: #fafafa;
@@ -1000,11 +1005,6 @@ html.cp,
 .cp #main_other .buttons {
   margin-top: 15px;
 }
-.cp #fileManagerIframe {
-  width: 100%;
-  height: 500px;
-  margin-top: 15px;
-}
 .cp .create,
 .cp .action {
   display: inline-block;
@@ -1294,196 +1294,6 @@ html.cp,
 .cp div.realtime #addoption {
   border-bottom-left-radius: 5px;
 }
-.cp.slide #modal .button {
-  position: absolute;
-  cursor: pointer;
-  font-size: 30px;
-  opacity: 0.6;
-  display: none;
-}
-.cp.slide #modal .button:hover {
-  opacity: 1;
-  display: block !important;
-}
-.cp.slide #modal #button_exit {
-  left: 20px;
-  top: 20px;
-  z-index: 9001;
-}
-.cp.slide #modal #button_left {
-  left: 6vw;
-  bottom: 10vh;
-}
-.cp.slide #modal #button_right {
-  right: 6vw;
-  bottom: 10vh;
-}
-.cp.slide #modal #content p,
-.cp.slide #modal #content ul,
-.cp.slide #modal #content ol {
-  font-size: 26px;
-}
-.cp.slide #modal #content img {
-  position: relative;
-  min-width: 1%;
-  max-width: 90%;
-  max-height: 90%;
-  margin: auto;
-}
-.cp div.modal,
-.cp div#modal {
-  box-sizing: border-box;
-  z-index: 9001;
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100vh;
-  display: none;
-  background-color: #000;
-}
-.cp div.modal #content,
-.cp div#modal #content {
-  box-sizing: border-box;
-  border: 1px solid white;
-  vertical-align: middle;
-  padding: 2.5vw;
-  /* center things as much as possible
-
-            margin-top: 50vh;
-            margin-bottom: 50vh;
-            transform: translateY(-50%);
-
-        */
-  width: 100vw;
-  height: 56.25vw;
-  max-height: 100vh;
-  max-width: 177.78vh;
-  margin: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.cp div.modal #content p,
-.cp div#modal #content p,
-.cp div.modal #content li,
-.cp div#modal #content li,
-.cp div.modal #content pre,
-.cp div#modal #content pre,
-.cp div.modal #content code,
-.cp div#modal #content code {
-  font-size: 2.75vw;
-  line-height: 3.025vw;
-}
-.cp div.modal #content h1,
-.cp div#modal #content h1 {
-  font-size: 5vw;
-  line-height: 5.5vw;
-}
-.cp div.modal #content h2,
-.cp div#modal #content h2 {
-  font-size: 4.2vw;
-  line-height: 4.62vw;
-}
-.cp div.modal #content h3,
-.cp div#modal #content h3 {
-  font-size: 3.6vw;
-  line-height: 3.96vw;
-}
-.cp div.modal #content h4,
-.cp div#modal #content h4 {
-  font-size: 3vw;
-  line-height: 3.3vw;
-}
-.cp div.modal #content h5,
-.cp div#modal #content h5 {
-  font-size: 2.2vw;
-  line-height: 2.42vw;
-}
-.cp div.modal #content h6,
-.cp div#modal #content h6 {
-  font-size: 1.6vw;
-  line-height: 1.76vw;
-}
-.cp div.modal #content h1,
-.cp div#modal #content h1,
-.cp div.modal #content h2,
-.cp div#modal #content h2,
-.cp div.modal #content h3,
-.cp div#modal #content h3,
-.cp div.modal #content h4,
-.cp div#modal #content h4,
-.cp div.modal #content h5,
-.cp div#modal #content h5,
-.cp div.modal #content h6,
-.cp div#modal #content h6 {
-  color: inherit;
-}
-.cp div.modal #content pre > code,
-.cp div#modal #content pre > code {
-  display: block;
-  position: relative;
-  border: 1px solid #333;
-  width: 90%;
-  margin: auto;
-  padding-left: .25vw;
-}
-.cp div.modal #content ul,
-.cp div#modal #content ul,
-.cp div.modal #content ol,
-.cp div#modal #content ol {
-  min-width: 50%;
-  max-width: 100%;
-  display: table;
-  margin: 0 auto;
-}
-.cp div.modal .center,
-.cp div#modal .center {
-  position: relative;
-  width: 80%;
-  height: 80%;
-  margin: auto;
-  border: 1px solid #ffffff;
-  text-align: center;
-}
-.cp div.modal.shown,
-.cp div#modal.shown {
-  display: block;
-}
-.cp div.modal table,
-.cp div#modal table {
-  margin: 30px;
-  border-collapse: collapse;
-}
-.cp div.modal table input,
-.cp div#modal table input {
-  height: 100%;
-  width: 90%;
-  border: 3px solid #fff;
-}
-.cp div.modal table tfoot tr td,
-.cp div#modal table tfoot tr td {
-  z-index: 4000;
-  cursor: pointer;
-}
-.cp div.modal #addtime,
-.cp div#modal #addtime,
-.cp div.modal #adddate,
-.cp div#modal #adddate {
-  color: #46E981;
-  border: 1px solid #46E981;
-  padding: 15px;
-}
-.cp div.modal #adddate,
-.cp div#modal #adddate {
-  border-top-left-radius: 5px;
-}
-.cp div.modal #addtime,
-.cp div#modal #addtime {
-  border-bottom-left-radius: 5px;
-}
 #cors-store {
   display: none;
 }
diff --git a/customize.dist/src/less/alertify.less b/customize.dist/src/less/alertify.less
index c4bb60898..19021a564 100644
--- a/customize.dist/src/less/alertify.less
+++ b/customize.dist/src/less/alertify.less
@@ -4,6 +4,9 @@
     They are only displayed briefly
 */
 .alertify-logs {
+    @media print {
+        visibility: hidden;
+    }
     > * {
         padding: @padding-base @padding-base * 4;
         color: @alertify-fore;
diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less
index 6e0f951fb..d7fcc98c4 100644
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@@ -494,12 +494,6 @@ noscript {
     }
 }
 
-#fileManagerIframe {
-    width: 100%;
-    height: 500px;
-    margin-top: 15px;
-}
-
 /* buttons */
 
 .create, .action {
@@ -816,192 +810,6 @@ form.realtime, div.realtime {
     #adduser { .top-left; }
     #addoption { .bottom-left; }
 }
-
-// used for slides
-.viewportRatio (@x, @y, @p: 100) {
-    width: @p * 100vw;
-    height: @y * (@p * 100vw) / @x;
-    max-width: @x / @y * (@p * 100vh);
-    max-height: (@p * 100vh);
-}
-
-&.slide {
-    #modal {
-        .button {
-            position: absolute;
-            cursor: pointer;
-            font-size: 30px;
-            opacity: 0.6;
-            display: none;
-        }
-        .button:hover {
-            opacity: 1;
-            display: block !important;
-        }
-        #button_exit {
-            left: 20px;
-            top: 20px;
-            z-index: 9001;
-        }
-        #button_left {
-            left: 6vw;
-            bottom: 10vh;
-        }
-        #button_right {
-            right: 6vw;
-            bottom: 10vh;
-        }
-    }
-    #modal #content {
-        p, ul, ol { font-size: 26px; }
-
-        img {
-            position: relative;
-            min-width: 1%;
-            max-width: 90%;
-            max-height: 90%;
-            margin: auto;
-        }
-    }
-}
-
-div.modal, div#modal {
-    display: none;
-
-    #content {
-        box-sizing: border-box;
-        border: 1px solid white;
-
-        vertical-align: middle;
-        padding: 2.5vw;
-
-        /* center things as much as possible
-
-            margin-top: 50vh;
-            margin-bottom: 50vh;
-            transform: translateY(-50%);
-
-        */
-
-        width: 100vw;
-        height: 56.25vw; // height:width ratio = 9/16 = .5625
-        max-height: 100vh;
-        max-width: 177.78vh; // 16/9 = 1.778
-        margin: auto;
-        position: absolute;
-        top:0;bottom:0; // vertical center
-        left:0;right:0; // horizontal center
-
-        p, li, pre, code {
-            .size(2.75);
-        }
-
-        h1 { .size(5); }
-        h2 { .size(4.2); }
-        h3 { .size(3.6); }
-        h4 { .size (3); }
-        h5 { .size(2.2); }
-        h6 { .size(1.6); }
-
-        h1, h2, h3, h4, h5, h6 {
-            color: inherit;
-        }
-
-        pre > code {
-            display: block;
-            position: relative;
-            border: 1px solid #333;
-            width: 90%;
-            margin: auto;
-            padding-left: .25vw;
-        }
-
-        ul, ol {
-            min-width: 50%;
-            max-width: 100%;
-            display: table;
-            margin: 0 auto;
-        }
-    }
-
-    box-sizing: border-box;
-    z-index: 9001;
-    position: fixed;
-
-    top: 0px;
-    left: 0px;
-
-    width: 100%;
-    height: 100vh;
-    display: none;
-
-    background-color: @slide-default-bg;
-
-    .center {
-        position: relative;
-
-        width: 80%;
-        height: 80%;
-        margin: auto;
-        border: 1px solid @light-base;
-
-        text-align: center;
-    }
-
-    &.shown {
-        display: block;
-    }
-
-    table {
-        margin: 30px;
-
-        border-collapse: collapse;
-        tr {
-            td {
-            }
-        }
-
-        input {
-            height: 100%;
-            width: 90%;
-            border: 3px solid @base;
-        }
-
-        thead {
-            tr {
-                th {
-                    span.remove {
-                    }
-                }
-            }
-        }
-        tbody {
-            tr {
-                td {
-
-                }
-            }
-        }
-        tfoot {
-            tr {
-                td {
-                    z-index: 4000;
-                    cursor: pointer;
-                }
-            }
-        }
-    }
-
-    #addtime,
-    #adddate {
-        color: @cp-green;
-        border: 1px solid @cp-green;
-        padding: 15px;
-    }
-
-    #adddate { .top-left; }
-    #addtime { .bottom-left; }
-}
 }
 
 // hack for our cross-origin iframe
diff --git a/package.json b/package.json
index ba331a899..8eb638531 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   "scripts": {
       "lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
       "test": "node TestSelenium.js",
-      "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css",
+      "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css",
       "template": "cd customize.dist/src && node build.js"
   }
 }
diff --git a/www/slide/inner.html b/www/slide/inner.html
index 6eacab9bb..8fde658df 100644
--- a/www/slide/inner.html
+++ b/www/slide/inner.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
     <link rel="stylesheet" href="/customize/main.css">
+    <link rel="stylesheet" href="./slide.css">
     <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <script src="/bower_components/jquery/dist/jquery.min.js"></script>
     <script src="/bower_components/codemirror/lib/codemirror.js"></script>
@@ -34,55 +35,6 @@
     <script src="/bower_components/codemirror/addon/fold/markdown-fold.js"></script>
     <script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
     <script src="/bower_components/codemirror/addon/display/placeholder.js"></script>
-    <style>
-        html, body{
-            height: 100%;
-            width: 100%;
-            padding: 0px;
-            margin: 0px;
-            overflow: hidden;
-            box-sizing: border-box;
-            position: relative;
-        }
-        body {
-            display: flex;
-            flex-flow: column;
-        }
-        #modal.shown {
-            display: block;
-            position: fixed;
-            top: 0px;
-            left: 0px;
-            z-index: 100;
-            background-color: black;
-            color: white;
-            height: 100vh;
-            width: 100%;
-        }
-
-        #content h1, h2, h3, h4, h5, h6 {
-            text-align: center;
-        }
-
-        h1 { font-size: 40px; }
-        h2 { font-size: 37px; }
-        h3 { font-size: 34px; }
-        h4 { font-size: 31px; }
-        h5 { font-size: 27px; }
-        h6 { font-size: 24px; }
-
-      .CodeMirror {
-        height: 100%;
-      }
-      .CodeMirror-focused .cm-matchhighlight {
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
-        background-position: bottom;
-        background-repeat: repeat-x;
-      }
-      #colorPicker_check {
-        display: block;
-      }
-    </style>
 </head>
 <body>
     <div id="bar"></div>
@@ -98,6 +50,7 @@
         <div id="button_right" class="button"><span class="fa fa-chevron-right"></span></div>
         <div id="content"></div>
     </div>
+    <div id="print"></div>
     </span>
     <div id="nope"></div>
     <div id="colorPicker_check"></div>
diff --git a/www/slide/main.js b/www/slide/main.js
index 9b26ca921..46908dfa3 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -136,6 +136,7 @@ define([
 
             var $modal = $pad.contents().find('#modal');
             var $content = $pad.contents().find('#content');
+            var $print = $pad.contents().find('#print');
 
             Slide.setModal($modal, $content, $pad, ifrw, initialState);
 
@@ -466,6 +467,18 @@ define([
                 var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
                 $rightside.append($forgetPad);
 
+                var $printButton = $('<button>').text('PRINT').click(function () {
+                    console.log($print.html());
+                    console.log($content.html());
+                    console.log($content.html());
+                    $print.html($content.html());
+
+                    ifrw.focus();
+                    ifrw.print();
+                    console.log($print.html());
+                });
+                $rightside.append($printButton);
+
                 var $present = Cryptpad.createButton('present', true)
                     .click(function () {
                     enterPresentationMode(true);
diff --git a/www/slide/slide.css b/www/slide/slide.css
new file mode 100644
index 000000000..f7ef81ad8
--- /dev/null
+++ b/www/slide/slide.css
@@ -0,0 +1,285 @@
+html,
+body {
+  height: 100%;
+  width: 100%;
+  padding: 0px;
+  margin: 0px;
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative;
+}
+body {
+  display: flex;
+  flex-flow: column;
+}
+h1 {
+  font-size: 40px;
+}
+h2 {
+  font-size: 37px;
+}
+h3 {
+  font-size: 34px;
+}
+h4 {
+  font-size: 31px;
+}
+h5 {
+  font-size: 27px;
+}
+h6 {
+  font-size: 24px;
+}
+body .CodeMirror {
+  height: 100%;
+}
+body .CodeMirror-focused .cm-matchhighlight {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+  background-position: bottom;
+  background-repeat: repeat-x;
+}
+#colorPicker_check {
+  display: block;
+}
+#print {
+  display: none;
+}
+@media print {
+  body .CodeMirror,
+  body #cme_toolbox {
+    display: none !important;
+  }
+  body * {
+    visibility: hidden !important;
+  }
+  html,
+  body {
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+  #print {
+    position: relative;
+    display: block;
+    visibility: visible !important;
+  }
+  #print .slide-frame {
+    display: block !important;
+    page-break-before: always !important;
+    page-break-inside: avoid !important;
+    position: relative;
+  }
+  #print * {
+    visibility: visible !important;
+  }
+}
+.cp.slide #modal .button {
+  position: absolute;
+  cursor: pointer;
+  font-size: 30px;
+  opacity: 0.6;
+  display: none;
+}
+.cp.slide #modal .button:hover {
+  opacity: 1;
+  display: block !important;
+}
+.cp.slide #modal #button_exit {
+  left: 20px;
+  top: 20px;
+  z-index: 9001;
+}
+.cp.slide #modal #button_left {
+  left: 6vw;
+  bottom: 10vh;
+}
+.cp.slide #modal #button_right {
+  right: 6vw;
+  bottom: 10vh;
+}
+.cp.slide #modal #content h1,
+.cp.slide #modal #content h2,
+.cp.slide #modal #content h3,
+.cp.slide #modal #content h4,
+.cp.slide #modal #content h5,
+.cp.slide #modal #content h6 {
+  text-align: center;
+}
+.cp.slide #modal.shown {
+  display: block;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 100;
+  background-color: black;
+  color: white;
+  height: 100vh;
+  width: 100%;
+}
+.cp.slide #modal #content p,
+.cp.slide #modal #content ul,
+.cp.slide #modal #content ol {
+  font-size: 26px;
+}
+.cp.slide #modal #content img {
+  position: relative;
+  min-width: 1%;
+  max-width: 90%;
+  max-height: 90%;
+  margin: auto;
+}
+.cp div.modal,
+.cp div#modal {
+  box-sizing: border-box;
+  z-index: 9001;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100vh;
+  display: none;
+  background-color: #000;
+}
+.cp div.modal #content,
+.cp div#modal #content {
+  box-sizing: border-box;
+  border: 1px solid white;
+  vertical-align: middle;
+  padding: 2.5vw;
+  /* center things as much as possible
+
+            margin-top: 50vh;
+            margin-bottom: 50vh;
+            transform: translateY(-50%);
+
+        */
+  width: 100vw;
+  height: 56.25vw;
+  max-height: 100vh;
+  max-width: 177.78vh;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.cp div.modal #content p,
+.cp div#modal #content p,
+.cp div.modal #content li,
+.cp div#modal #content li,
+.cp div.modal #content pre,
+.cp div#modal #content pre,
+.cp div.modal #content code,
+.cp div#modal #content code {
+  font-size: 2.75vw;
+  line-height: 3.025vw;
+}
+.cp div.modal #content h1,
+.cp div#modal #content h1 {
+  font-size: 5vw;
+  line-height: 5.5vw;
+}
+.cp div.modal #content h2,
+.cp div#modal #content h2 {
+  font-size: 4.2vw;
+  line-height: 4.62vw;
+}
+.cp div.modal #content h3,
+.cp div#modal #content h3 {
+  font-size: 3.6vw;
+  line-height: 3.96vw;
+}
+.cp div.modal #content h4,
+.cp div#modal #content h4 {
+  font-size: 3vw;
+  line-height: 3.3vw;
+}
+.cp div.modal #content h5,
+.cp div#modal #content h5 {
+  font-size: 2.2vw;
+  line-height: 2.42vw;
+}
+.cp div.modal #content h6,
+.cp div#modal #content h6 {
+  font-size: 1.6vw;
+  line-height: 1.76vw;
+}
+.cp div.modal #content h1,
+.cp div#modal #content h1,
+.cp div.modal #content h2,
+.cp div#modal #content h2,
+.cp div.modal #content h3,
+.cp div#modal #content h3,
+.cp div.modal #content h4,
+.cp div#modal #content h4,
+.cp div.modal #content h5,
+.cp div#modal #content h5,
+.cp div.modal #content h6,
+.cp div#modal #content h6 {
+  color: inherit;
+  text-align: center;
+}
+.cp div.modal #content pre > code,
+.cp div#modal #content pre > code {
+  display: block;
+  position: relative;
+  border: 1px solid #333;
+  width: 90%;
+  margin: auto;
+  padding-left: .25vw;
+}
+.cp div.modal #content ul,
+.cp div#modal #content ul,
+.cp div.modal #content ol,
+.cp div#modal #content ol {
+  min-width: 50%;
+  max-width: 100%;
+  display: table;
+  margin: 0 auto;
+}
+.cp div.modal .center,
+.cp div#modal .center {
+  position: relative;
+  width: 80%;
+  height: 80%;
+  margin: auto;
+  border: 1px solid #ffffff;
+  text-align: center;
+}
+.cp div.modal.shown,
+.cp div#modal.shown {
+  display: block;
+}
+.cp div.modal table,
+.cp div#modal table {
+  margin: 30px;
+  border-collapse: collapse;
+}
+.cp div.modal table input,
+.cp div#modal table input {
+  height: 100%;
+  width: 90%;
+  border: 3px solid #fff;
+}
+.cp div.modal table tfoot tr td,
+.cp div#modal table tfoot tr td {
+  z-index: 4000;
+  cursor: pointer;
+}
+.cp div.modal #addtime,
+.cp div#modal #addtime,
+.cp div.modal #adddate,
+.cp div#modal #adddate {
+  color: #46E981;
+  border: 1px solid #46E981;
+  padding: 15px;
+}
+.cp div.modal #adddate,
+.cp div#modal #adddate {
+  border-top-left-radius: 5px;
+}
+.cp div.modal #addtime,
+.cp div#modal #addtime {
+  border-bottom-left-radius: 5px;
+}
diff --git a/www/slide/slide.less b/www/slide/slide.less
new file mode 100644
index 000000000..1aafeea26
--- /dev/null
+++ b/www/slide/slide.less
@@ -0,0 +1,278 @@
+@import "../../customize.dist/src/less/variables.less";
+@import "../../customize.dist/src/less/mixins.less";
+
+// used for slides
+.viewportRatio (@x, @y, @p: 100) {
+    width: @p * 100vw;
+    height: @y * (@p * 100vw) / @x;
+    max-width: @x / @y * (@p * 100vh);
+    max-height: (@p * 100vh);
+}
+
+html, body{
+    height: 100%;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+    overflow: hidden;
+    box-sizing: border-box;
+    position: relative;
+}
+body {
+    display: flex;
+    flex-flow: column;
+}
+
+//.cp {
+h1 { font-size: 40px; }
+h2 { font-size: 37px; }
+h3 { font-size: 34px; }
+h4 { font-size: 31px; }
+h5 { font-size: 27px; }
+h6 { font-size: 24px; }
+
+body {
+    .CodeMirror {
+        height: 100%;
+    }
+    .CodeMirror-focused .cm-matchhighlight {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+        background-position: bottom;
+        background-repeat: repeat-x;
+    }
+}
+#colorPicker_check {
+    display: block;
+}
+
+#print {
+    display: none;
+}
+
+@media print {
+    body {
+        .CodeMirror, #cme_toolbox {
+            display: none !important;
+        }
+    }
+    body * {
+        visibility: hidden !important;
+    }
+    html, body {
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+    }
+    #print {
+        position: relative;
+        display: block;
+        visibility: visible !important;
+        .slide-frame {
+                display: block !important;
+                page-break-before: always !important;
+                page-break-inside: avoid !important;
+                position: relative;
+        }
+        * {
+            visibility: visible !important;
+        }
+    }
+}
+.cp {
+
+&.slide {
+    #modal {
+        .button {
+            position: absolute;
+            cursor: pointer;
+            font-size: 30px;
+            opacity: 0.6;
+            display: none;
+        }
+        .button:hover {
+            opacity: 1;
+            display: block !important;
+        }
+        #button_exit {
+            left: 20px;
+            top: 20px;
+            z-index: 9001;
+        }
+        #button_left {
+            left: 6vw;
+            bottom: 10vh;
+        }
+        #button_right {
+            right: 6vw;
+            bottom: 10vh;
+        }
+        #content {
+            h1, h2, h3, h4, h5, h6 {
+                text-align: center;
+            }
+
+        }
+        &.shown {
+            display: block;
+            position: fixed;
+            top: 0px;
+            left: 0px;
+            z-index: 100;
+            background-color: black;
+            color: white;
+            height: 100vh;
+            width: 100%;
+        }
+    }
+    #modal #content {
+        p, ul, ol { font-size: 26px; }
+
+        img {
+            position: relative;
+            min-width: 1%;
+            max-width: 90%;
+            max-height: 90%;
+            margin: auto;
+        }
+    }
+}
+
+div.modal, div#modal {
+    display: none;
+
+    #content {
+        box-sizing: border-box;
+        border: 1px solid white;
+
+        vertical-align: middle;
+        padding: 2.5vw;
+
+        /* center things as much as possible
+
+            margin-top: 50vh;
+            margin-bottom: 50vh;
+            transform: translateY(-50%);
+
+        */
+
+        width: 100vw;
+        height: 56.25vw; // height:width ratio = 9/16 = .5625
+        max-height: 100vh;
+        max-width: 177.78vh; // 16/9 = 1.778
+        margin: auto;
+        position: absolute;
+        top:0;bottom:0; // vertical center
+        left:0;right:0; // horizontal center
+
+        p, li, pre, code {
+            .size(2.75);
+        }
+
+        h1 { .size(5); }
+        h2 { .size(4.2); }
+        h3 { .size(3.6); }
+        h4 { .size (3); }
+        h5 { .size(2.2); }
+        h6 { .size(1.6); }
+
+        h1, h2, h3, h4, h5, h6 {
+            color: inherit;
+            text-align: center;
+        }
+
+        pre > code {
+            display: block;
+            position: relative;
+            border: 1px solid #333;
+            width: 90%;
+            margin: auto;
+            padding-left: .25vw;
+        }
+
+        ul, ol {
+            min-width: 50%;
+            max-width: 100%;
+            display: table;
+            margin: 0 auto;
+        }
+    }
+
+    box-sizing: border-box;
+    z-index: 9001;
+    position: fixed;
+
+    top: 0px;
+    left: 0px;
+
+    width: 100%;
+    height: 100vh;
+    display: none;
+
+    background-color: @slide-default-bg;
+
+    .center {
+        position: relative;
+
+        width: 80%;
+        height: 80%;
+        margin: auto;
+        border: 1px solid @light-base;
+
+        text-align: center;
+    }
+
+    &.shown {
+        display: block;
+    }
+
+    table {
+        margin: 30px;
+
+        border-collapse: collapse;
+        tr {
+            td {
+            }
+        }
+
+        input {
+            height: 100%;
+            width: 90%;
+            border: 3px solid @base;
+        }
+
+        thead {
+            tr {
+                th {
+                    span.remove {
+                    }
+                }
+            }
+        }
+        tbody {
+            tr {
+                td {
+
+                }
+            }
+        }
+        tfoot {
+            tr {
+                td {
+                    z-index: 4000;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    #addtime,
+    #adddate {
+        color: @cp-green;
+        border: 1px solid @cp-green;
+        padding: 15px;
+    }
+
+    #adddate { .top-left; }
+    #addtime { .bottom-left; }
+}
+}