1 files changed, 287 insertions, 0 deletions
diff --git a/help3/xhpeditor/css/xhpeditor.css b/help3/xhpeditor/css/xhpeditor.css
new file mode 100644
index 00000000..e14ea532
--- /dev/null
+++ b/help3/xhpeditor/css/xhpeditor.css
@@ -0,0 +1,287 @@
+/* -*- Mode: css; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
+/*
+ * This file is part of the LibreOffice project.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+/* css for the main editor  web page */
+
+*, ::after, ::before {
+    box-sizing: border-box;
+}
+
+#editorpageheader img {
+    height: 50px;
+}
+
+#editorpageheader h1 {
+    font-size: 1em;
+}
+
+#editorpageheader header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1em;
+}
+
+.form_area{
+    border:1px solid grey;
+    height: auto;
+}
+
+.CodeMirror {
+    border: 1px solid #eee;
+    resize: vertical;
+    }
+
+/* CSS for the menu (W3Schools) */
+.navbar {
+  overflow: hidden;
+  background-color: #333;
+}
+
+.navbar a {
+  float: left;
+  font-size: 16px;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.dropdown {
+  float: left;
+  overflow: hidden;
+}
+
+.dropdown .dropbtn {
+  font-size: 16px;  
+  border: none;
+  outline: none;
+  color: white;
+  padding: 14px 16px;
+  background-color: inherit;
+  font-family: inherit;
+  margin: 0;
+}
+
+.navbar a:hover, .dropdown:hover .dropbtn {
+  background-color: #148603;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a, .dropdown-content input {
+  float: none;
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown-content input{
+    
+}
+
+.dropdown-content a:hover, .dropdown-content input:hover {
+  background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+#editorpageheader{
+    grid-area: editorpageheader;
+    position: sticky;
+    top:0px;
+    margin: 0px;
+    z-index:100;
+    border-right: 1px solid gray;
+    border-bottom: 1px solid gray;
+}
+#editortextarea{
+    grid-area: editortextarea;
+    margin: 0px;
+    border-right: 1px solid gray;
+}
+
+#renderedpageheader{
+    grid-area:renderedpageheader;
+    position: sticky;
+    top:0px;
+    margin: 0px;
+}
+
+#renderedpage {
+    grid-area:renderedpage;
+    padding: 3px;
+    margin: 0px;
+    overflow-y:auto;
+    display:inline-block;
+}
+.buttonrow{
+    margin:6px;
+}
+
+.buttonrow input {
+    position: absolute;
+    clip: rect(0,0,0,0);
+    pointer-events: none;
+}
+
+.applbuttons {
+    padding: 16px 0;
+}
+
+.buttonrow label {
+    padding: 4px;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    border-color: lightgray;
+}
+
+.buttonrow input:checked + label{
+    background-color: white;
+}
+
+/* Use @supports to sneak these rules past IE */
+@supports (grid-area: auto) {
+    @media screen and (max-width: 800px) {
+        body {
+            display: grid;
+            grid-template-columns: 100vw;
+            grid-template-rows: minmax(10vh, auto) 90vh minmax(10vh, auto) 90vh;
+            grid-template-areas: "editorpageheader"
+                                 "editortextarea" 
+                                 "renderedpageheader"
+                                 "renderedpage";
+        }
+    }
+    @media screen and (min-width: 800px) {
+        body {
+            margin: 0;
+            overflow:hidden;
+            display: grid;
+            grid-template-columns: 50vw 50vw;
+            grid-template-rows: minmax(10vh, auto) minmax(10vh, auto) minmax(auto, 90vh);
+            grid-template-areas: "editorpageheader editorpageheader"
+                                 "editortextarea renderedpageheader"
+                                 "editortextarea renderedpage"
+        }
+    }
+}
+
+/* Toolbar */
+
+ul#editor-toolbar {
+    background-color: lightgray;
+    margin: 0;
+    line-height: 17px;
+    padding: 0;
+    list-style-type: none;  
+}
+
+ul#editor-toolbar li {
+    display: inline-block;
+    padding: 8px 12px;
+}
+
+#editor-toolbar i.bi {
+    color: black;
+}
+
+ul#editor-toolbar li:hover {
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.2);
+    background-blend-mode: darken;
+}
+
+ul#editor-toolbar li.separator {
+    border-left: 1px solid black;
+    padding: 4px 0;
+    width: 0;
+}
+
+
+/* Card */
+div.card {
+    border: 1px solid lightgray;
+    border-radius: 6px;
+    margin: 24px;
+    padding: 0px;
+}
+
+div.card div.card-header {
+    border-bottom: 1px solid lightgray;
+    padding: 12px 24px;
+    background-color: #333;
+    color: white;
+    border-radius: 6px 6px 0 0;
+}
+
+div.card div.card-header * {
+    margin: 0;
+}
+
+div.card div.card-body {
+    padding: 12px 24px;
+    border-radius: 0 0 6px 6px;
+    background-color: #fefefe;
+}
+
+/* Check mode results */
+div#renderedpage {
+  padding: 12px;
+}
+
+div#renderedpage div.no-error-message {
+  padding: 6px;
+  border-left: 4px solid green;
+}
+
+div#renderedpage div.error-message {
+    padding: 6px;
+    border-left: 4px solid gray;
+    margin-bottom: 12px;
+}
+
+div#renderedpage div.severity-fatal {
+    border-left-color: red;
+    background-color: rgba(255,0,0,0.1);
+}
+
+div#renderedpage div.severity-error {
+    border-left-color: red;
+}
+
+div#renderedpage div.severity-warning {
+    border-left-color: red;
+}
+
+div#renderedpage span.goto {
+    cursor: pointer;
+    color: blue;
+}