Nicebox now printable (dw2pdf). Removed *.less-files because of cachi…

…ng problems
practical-solutions · May 12, 2020 · f630eab · f630eab
1 parent 759ffb9
commit f630eab
Show file tree

Hide file tree

Showing 7 changed files with 269 additions and 196 deletions.
diff --git a/README.md b/README.md
@@ -52,15 +52,11 @@ Content
 Origin: https://www.dokuwiki.org/plugin:wrap:extensions
 Function: Adds simple message boxes
 
-Printable (dw2pdf): no
+Printable (dw2pdf): yes
 
 ```
 <WRAP nicebox red|orange|green|purple|yellow|blue|marine>
 Any content
 </WRAP>
 ```
 
-## Issues/Todos
-
-* Make nicebox-container printable
-* Reintegration of styles into picbutton.less (for debugging purposes in style.css)
diff --git a/print.css b/print.css
@@ -1,2 +1,131 @@
-@import 'styles/picbutton.less';
-@import 'styles/borders.less';
+/*********************************************************************** 
+    Button for navigation
+************************************************************************/
+.wrap_picbutton {
+	width:140px;
+    min-height: 185px;
+    margin-left: 2em;
+    background:#F6F6F6;
+    padding:0.5em;
+    text-align:center;
+    cursor:pointer;
+
+	box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
+              0 2px 2px rgba(0,0,0,0.11), 
+              0 4px 4px rgba(0,0,0,0.11), 
+              0 6px 8px rgba(0,0,0,0.11),
+              0 8px 16px rgba(0,0,0,0.11);
+
+	transition:100ms;
+	display:inline-block;
+
+}
+
+.wrap_picbutton:hover {
+	transition: 200ms;
+	transform: rotate(2deg);
+}
+
+.wrap_picbutton img {
+	width:60%;
+	margin:0 auto;
+	margin-top:15% !important;
+	margin-bottom:15% !important;
+}
+
+
+
+.wrap_picbutton a {
+	font-size:16px !important;
+}
+
+.wrap_picbutton p {
+	margin: 0;
+	width:100%;
+	display:inline-block;
+	text-align:center;
+}
+/*---------------------------------------------------------------------*/
+
+div.dokuwiki div.wrap_border {
+	border:1px solid black;
+    padding:5px;
+    margin:2px;
+}
+
+div.dokuwiki div.wrap_border h1,
+div.dokuwiki div.wrap_border h2,
+div.dokuwiki div.wrap_border h3,
+div.dokuwiki div.wrap_border h4,
+div.dokuwiki div.wrap_border h5
+{
+    padding-top:0;
+    margin:0;
+}
+
+
+/*---------------------------------------------------------------------
+Simpler boxes
+
+From: https://www.dokuwiki.org/plugin:wrap:extensions
+
+CSS Compounds not possible yet (in the mpdf-version used by dw2pdf). The mpdf issue has apparently been solved
+be now see https://github.com/mpdf/mpdf/issues/538)
+ 
+Thus the css definitions can be changed as soon as the integration of the new mpdf version has been accomplished
+---------------------------------------------------------------------*/
+.wrap_nicebox {
+    margin-top: 17px;
+    margin-bottom: 17px;
+    margin-left: 5px;
+    width:90%;
+    padding: 0px 12px;
+    border-top-right-radius: 7px;
+    border-bottom-right-radius: 7px;
+    background: #f5f9f7;
+    border-left: 10px solid #B2EFFF;
+    color: #0587af;
+}
+
+.wrap_orange {
+    background: #fcf8f2;
+    color: #c97500;
+    border-left: 10px solid #fbaf43;
+}
+
+.wrap_red {
+    border-left: 10px solid #d9534f;
+    background: #fdf7f7;
+    color: #b52b27;
+}
+
+.wrap_green {
+    border-left: 10px solid #8dde4e;
+    background: #f4ffee;
+    color: #57aa16;
+}
+
+.wrap_yellow {
+    border-left: 10px solid #fff15a;
+    background: #fffded;
+    color: #b6a91a;
+}
+
+.wrap_blue {
+    border-left: 10px solid #4f8cdf;
+    background: #f5f7fa;
+    color: #195ab3;
+
+}
+
+.wrap_purple {
+    border-left: 10px solid #c489ef;
+    background: #f1eef4;
+    color: #7625b1;
+}
+
+.wrap_marine {
+    border-left: 10px solid #4bd29c;
+    background: #f5f9f7;
+    color: #1aaf73;
+}
diff --git a/style.css b/style.css
@@ -1,4 +1,138 @@
-@import 'styles/list-deep.less';
-@import 'styles/nicebox.less';
-@import 'styles/borders.less';
+/*--------------------------------------------------------------------- 
+                             List deep
+---------------------------------------------------------------------*/
+div.dokuwiki div.wrap_list-deep ol {
+  list-style-type: none;
+}
+
+div.dokuwiki div.wrap_list-deep > ol {
+  counter-reset: leva 0; /* set to one lower than intended value of first list item */
+}
+
+div.dokuwiki div.wrap_list-deep ol li div.li::before {
+  counter-increment: leva;
+  content: counter(leva) ". ";
+  color: inherit;
+  font-weight: bold;
+}
+/* ~~~~~~ */
+
+div.dokuwiki div.wrap_list-deep ol ol {
+  list-style-type: none;
+}
+
+div.dokuwiki div.wrap_list-deep > ol ol {
+  counter-reset: levb 0; /* set to one lower than intended value of first list item */
+}
+
+div.dokuwiki div.wrap_list-deep ol li li div.li::before {
+  counter-increment: levb;
+  content: counter(leva) "." counter(levb) ". ";
+  color: inherit;
+  font-weight: bold;
+}
+
+/* ~~~~~~ */
+
+div.dokuwiki div.wrap_list-deep ol ol ol {
+  list-style-type: none;
+}
+
+div.dokuwiki div.wrap_list-deep > ol ol ol {
+  counter-reset: levc 0; /* set to one lower than intended value of first list item */
+}
+
+div.dokuwiki div.wrap_list-deep ol ol ol div.li::before {
+  counter-increment: levc;
+  content: counter(leva) "." counter(levb) "." counter(levc) ". ";
+  color: inherit;
+  font-weight: bold;
+}
+
+
+/*--------------------------------------------------------------------- 
+                              Nicebox
+From: https://www.dokuwiki.org/plugin:wrap:extensions
+---------------------------------------------------------------------*/
+div.dokuwiki {
+  div.plugin_wrap {
+    &.wrap_nicebox {
+      /* Inspired by hugo template seen on  https://thomas-leister.de/en/mailserver-debian-stretch/ */
+      margin-left: 40px;
+      margin-right: 40px;
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+      padding: 20px 25px;
+      border-radius: 5px;
+      text-align: left;
+      width: auto !important;
+      background-image: initial;
+      min-height: initial;
+      background: #f5f9f7;
+      color: #0587af;
+      border-left: 10px solid #B2EFFF;
+      p:last-child {
+        margin: 0;
+      }
+      &.wrap_red {
+        /* From hugo template seen on  https://thomas-leister.de/en/mailserver-debian-stretch/ */
+        border-left: 10px solid #d9534f;
+        background: #fdf7f7;
+        color: #b52b27;
+      }
+      &.wrap_orange {
+        /* From hugo template seen on  https://thomas-leister.de/en/mailserver-debian-stretch/ */
+        border-left: 10px solid #fbaf43;
+        background: #fcf8f2;
+        color: #c97500;
+      }
+      &.wrap_green {
+        border-left: 10px solid #8dde4e;
+        background: #f4ffee;
+        color: #57aa16;
+      }
+      &.wrap_yellow {
+        border-left: 10px solid #fff15a;
+        background: #fffded;
+        color: #b6a91a;
+      }
+      &.wrap_blue {
+        border-left: 10px solid #4f8cdf;
+        background: #f5f7fa;
+        color: #195ab3;
+      }
+      &.wrap_purple {
+        border-left: 10px solid #c489ef;
+        background: #f1eef4;
+        color: #7625b1;
+      }
+      &.wrap_marine {
+        border-left: 10px solid #4bd29c;
+        background: #f5f9f7;
+        color: #1aaf73;
+      }
+    }
+  }
+}
+
+
+/*---------------------------------------------------------------------
+                              Borders
+---------------------------------------------------------------------*/
+
+div.dokuwiki div.wrap_border {
+	border:1px solid black;
+    padding:5px;
+    margin:2px;
+}
+
+div.dokuwiki div.wrap_border h1,
+div.dokuwiki div.wrap_border h2,
+div.dokuwiki div.wrap_border h3,
+div.dokuwiki div.wrap_border h4,
+div.dokuwiki div.wrap_border h5
+{
+    padding-top:0;
+    margin:0;
+}
 
diff --git a/styles/borders.less b/styles/borders.less
diff --git a/styles/list-deep.css b/styles/list-deep.css