Added support of print and unselectable styles, updated vimeo and youtube parsing method for this

2 files changed, 43 insertions, 13 deletions

diff --git a/public/css/extra.css b/public/css/extra.css
index 6d9d137f..12be9f4b 100644
--- a/public/css/extra.css
+++ b/public/css/extra.css
@@ -2,6 +2,7 @@
 
 .vimeo,
 .youtube {
+    position: relative;
     cursor: pointer;
     display: table;
     max-width: 540px;
@@ -11,17 +12,28 @@
     background-size: contain;
     background-color: black;
 }
+.vimeo img,
+.youtube img {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
 .vimeo .icon,
 .youtube .icon {
-    opacity: 0.3;
-    display: table-cell;
-    vertical-align: middle;
-    height: inherit;
-    margin: 0 auto;
+    position: absolute;
+    height: auto;
+    width: auto;
+    top: 50%;
+    left: 50%;
+    margin-top: -40px;
+    margin-left: -40px;
     color: white;
+    opacity: 0.3;
     -webkit-transition: opacity 0.2s; /* Safari */
     transition: opacity 0.2s;
-    
 }
 .vimeo:hover .icon,
 .youtube:hover .icon {
@@ -214,4 +226,21 @@ small .dropdown {
 
 small .dropdown a:focus, small .dropdown a:hover {
     text-decoration: none;
+}
+
+.unselectable {
+    -moz-user-select: none; 
+    -khtml-user-select: none; 
+    -webkit-user-select: none; 
+    -o-user-select: none;
+    user-select: none;
+}
+
+@media print {
+    div, table, img, pre, blockquote {
+        page-break-inside: avoid !important;
+    }
+    a[href]:after {
+        font-size: 12px !important;
+    }
 }
\ No newline at end of file
diff --git a/public/css/index.css b/public/css/index.css
index 2c0e4c04..ab5605d2 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -209,13 +209,6 @@ div[contenteditable]:empty:not(:focus):before{
 .CodeMirror-scrollbar-filler {
     background: inherit;
 }
-.unselectable {
-    -moz-user-select: none; 
-    -khtml-user-select: none; 
-    -webkit-user-select: none; 
-    -o-user-select: none;
-    user-select: none;
-}
 
 .btn-file {
     position: relative;
@@ -295,4 +288,12 @@ div[contenteditable]:empty:not(:focus):before{
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+@media print {
+    body {
+        padding-top: 0 !important;
+    }
+    .CodeMirror {
+        height: auto !important;
+    }
 }
\ No newline at end of file