Help editor: Housekeeping on CSS

Bring some classes and settings from recent CSS in help/default.css

Change-Id: I9287c1570e4e76c9eb5bc19f248d6db3a7cb6a45
Reviewed-on: https://gerrit.libreoffice.org/c/dev-tools/+/161246
Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>

1 files changed, 36 insertions, 29 deletions

diff --git a/help3/xhpeditor/DisplayArea.css b/help3/xhpeditor/DisplayArea.css
index 6b4df043..c6351c0f 100644
--- a/help3/xhpeditor/DisplayArea.css
+++ b/help3/xhpeditor/DisplayArea.css
@@ -9,6 +9,14 @@
 
 
 /* Imported from default css for DisplayArea */
+
+:root {
+  --font_mono: Menlo, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace;
+  --font_body: Ubuntu, Cantarell, "Segoe UI Variable", "Segoe UI", "Noto Sans", "DejaVu Sans", "Lucida Grande", sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
+  --background-color: #f7f8f7;
+  --module-color: #18A303;
+}
+
 #DisplayArea {
     background-color: white;
     overflow: auto;
@@ -26,14 +34,14 @@
 .listitemintable,
 .paragraph,
 .tablecontent {
-    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
+    font-family: var(--font_body);
 }
 .input {
     background-color: rgba(0,0,0,0.04);
     transition-property: background-color;
     transition-duration: 150ms;
     border-bottom: 1px dashed rgba(0,0,0,0.1);
-    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+    font-family: var(--font_mono);
 }
 
 #DisplayArea  ::selection {
@@ -60,12 +68,16 @@
     border-radius: 2px;
     display: inline;
     padding: 1px 3px;
-    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+    font-family: var(--font_mono);
+    word-wrap: anywhere;
+}
+.literal {
+    white-space: normal;
 }
 .smathcode {
     border-radius: 2px;
     padding: 1px 3px;
-    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+    font-family: var(--font_mono);
 }
 
 .acronym {
@@ -82,7 +94,7 @@
 }
 .keycode {
     /*font-weight: bold;*/
-    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+    font-family: var(--font_mono);
 }
 .widget{
     padding: 1px 10px;
@@ -100,33 +112,27 @@
 .warning {
     display:flex;
     align-items: center;
-    border-radius: 0 4px 4px 0;
-    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+    border-radius: 2px;
+    box-shadow: 0 2px 5px -3px rgb(0 0 0 / 10%);
     padding: 0.2em;
     margin-top: 15px;
 }
 .note {
-    border-left: 4px solid #FFDE09;
-    background-color: #FFF4D0;
+    border-left: 2px solid #309048;
+    background-color: #d9f1dd;
 }
 .tip {
-    border-left: 4px solid #38618C;
-    background-color: #DAE2EA;
+    border-left: 2px solid #0063b1;
+    background-color: #cde5f7;
 }
 .warning {
-    border-left: 4px solid #FF5964;
-    background-color: #FFE0E2;
-}
-.noteicon {
-    padding:0.3em;
-    transition: transform .2s; /* Animation */
-}
-.noteicon:hover {
-    transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+    border-left: 2px solid #ed8733;
+    background-color: #f6f1d2;
 }
-.notetext {
+.noteicon, .notetext {
     padding:0.3em;
 }
+
 #DisplayArea h1,
 #DisplayArea h2,
 #DisplayArea h3,
@@ -207,19 +213,13 @@
     border-bottom: 1px solid #E8E8E8;
 }
 /* Special case of icon table*/
-icontable {
+.icontable {
     display:flex;
     align-items:center;
 }
 .iconcell {
     padding:0.3em;
 }
-.imageicon {
-    transition: transform .2s; /* Animation */
-}
-.imageicon:hover{
-    transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
-}
 
 #DisplayArea table {
     box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
@@ -235,16 +235,23 @@ icontable {
     border-right: 0;
     padding: 0.3em;
 }
+
 .tablehead,
 .tableheadintable {
     font-weight: bold;
     margin-top: 0px;
 }
+
 .tableheadcell {
-    background: #148603;
+    background: var(--module-color);
     color: white;
     vertical-align:top;
 }
+
+.table_font_small {
+    font-size: 0.98rem;
+}
+
 #DisplayArea footer {
     border-top: 2px solid #148603;
     padding: 15px 10px 0 10px;