Helponline: New .howtoget, small tweaks to other boxes, tiny changes to colors

Change-Id: I3d7d396482df4143b09776230c571c0c69ab0b5a
Reviewed-on: https://gerrit.libreoffice.org/56040
Tested-by: Jenkins
Reviewed-by: Adolfo Jayme Barrientos <fitojb@ubuntu.com>
(cherry picked from commit 5bc297bf12e0d0010047559d8f8d058f1e848adf)
Reviewed-on: https://gerrit.libreoffice.org/56136
Tested-by: Adolfo Jayme Barrientos <fitojb@ubuntu.com>

1 files changed, 35 insertions, 37 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 09c818bddc..b27e96622a 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -46,7 +46,7 @@ h6,
 .input {
     transition-property: background-color;
     transition-duration: 150ms;
-    border-bottom: 1px dashed #E8E8E8;
+    border-bottom: 1px dashed rgba(0,0,0,0.1);
 }
 [data-tooltip]{
   position:relative;
@@ -90,10 +90,7 @@ body {
     line-height: normal;
 }
 ::selection {
-    background: #CCF4C6;
-}
-::-moz-selection { /* moz#509958 */
-    background: #CCF4C6;
+    background: #BFFFB7;
 }
 a {
     text-decoration: none;
@@ -112,8 +109,7 @@ pre,
 .literalintable,
 .path,
 .pathintable {
-    background-color: rgba(0, 0, 0, 0.03);
-    border: 1px solid rgba(0,0,0,0.04);
+    background-color: rgba(0,0,0,0.04);
     border-radius: 2px;
     display: inline;
     padding: 1px 3px;
@@ -138,12 +134,12 @@ pre,
 .warning {
     display:flex;
     align-items: center;
-    padding:0.3em;
-    border-bottom: 1px solid rgba(0,0,0,0.05);
     border-radius: 0 4px 4px 0;
+    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+    padding: 0.2em;
 }
 .note {
-    border-left: 4px solid #FFE74C;
+    border-left: 4px solid #FFDE09;
     background-color: #FFFADE;
 }
 .tip {
@@ -195,7 +191,7 @@ table, th, td {
     margin-top: 0px;
 }
 .tableheadcell {
-    background: #18A303;
+    background: #4F8A10;
     color: white;
     vertical-align:top;
 }
@@ -207,7 +203,7 @@ h4,
 h5,
 h6 {
     margin-bottom: 0.67rem;
-    color: #18A303;
+    color: #4F8A10;
 }
 p,
 ol,
@@ -218,7 +214,7 @@ td {
 h1 {
     font-size: 1.83rem;
     font-weight: 300;
-    border-bottom: 2px solid #18A303;
+    border-bottom: 2px solid #4F8A10;
     padding-bottom: 6px;
 }
 h1 a {
@@ -248,19 +244,22 @@ h6 {
 }
 .howtoget {
     background: #CCF4C6;
+    border-left: 4px solid #4F8A10;
+    border-radius: 0 4px 4px 0;
+    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
     padding: 0.3em;
     display: flex;
     flex-direction: column;
-    border: 1px #999999 solid;
 }
 .howtogetheader {
+    background: #FFF;
+    border-radius: 2px;
+    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+    display: inline-block;
     font-weight: bold;
-    border: 1px solid #999999;
-    background: #FFFFFF;
     padding: 0.3em;
 }
 .howtogetbody {
-    margin: 0px;
 }
 .samplefilesection{
 }
@@ -285,7 +284,7 @@ h6 {
 .donation {
     padding: 0 0 10px 0;
     margin-bottom: 1em;
-    border-bottom: 1px dashed #E8E8E8;
+    border-bottom: 1px dashed rgba(0,0,0,0.1);
 }
 .donation p{
     font-size:1.2rem;
@@ -295,7 +294,7 @@ h6 {
     margin-left: 30px;
     margin-right: 30px;
 }
-.bascodepar{
+.bascodepar {
     font-family: monospace;
 }
 
@@ -331,7 +330,7 @@ h6 {
     font-size: 1rem;
     font-weight: bold;
     padding: 1px;
-    border: solid 1px #18A303;
+    border: solid 1px #4F8A10;
 }
 #DisplayArea {
     overflow: auto;
@@ -419,14 +418,13 @@ header {
     white-space: nowrap;
 }
 footer {
-    color: #333;
-    border-top: 2px solid #18A303;
+    border-top: 2px solid #4F8A10;
     background: linear-gradient(to bottom, rgba(0,0,0,0.025) 0%,rgba(0,0,0,0) 100%);
     padding: 15px 10px 0 10px;
     margin: 25px 0 0 0;
 }
 footer p {
-    font-size: 1rem;
+    font-size: 0.98rem;
 }
 .gsc-control-cse {
     border-color: transparent !important;
@@ -439,7 +437,7 @@ footer p {
     opacity: 0;
 }
 label[for=accordion-1] {
-    color: #18A303;
+    color: #4F8A10;
     display: block;
     padding: 10px 0 10px 20px;
     font-size: 22px;
@@ -461,7 +459,7 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
 .index-label {
     float: left;
     font-size: 22px;
-    color: #18A303;
+    color: #4F8A10;
     padding-left: 20px;
     margin: 20px 0 0 0;
 }
@@ -481,70 +479,70 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
 #Bookmarks p {
     font-size: 22px;
     font-weight: bold;
-    color: #18A303;
+    color: #4F8A10;
 }
 #WRITER::before {
     content: "WRITER";
     display: block;
     font-size: 22px;
     font-weight: bold;
-    color: #18A303;
+    color: #4F8A10;
 }
 #CALC::before {
     content: "CALC";
     display: block;
     font-size: 22px;
     font-weight: bold;
-    color: #18A303;
+    color: #4F8A10;
 }
 #IMPRESS::before {
     content: "IMPRESS";
     display: block;
     font-size: 22px;
     font-weight: bold;
-    color: #18A303;
+    color: #4F8A10;
 }
 #DRAW::before {
     content: "DRAW";
     display: block;
     font-size: 22px;
     font-weight: bold;
-    color: #18A303;
+    color: #4F8A10;
 }
 #BASE::before {
     content: "BASE";
     display: block;
     font-size: 22px;
     font-weight: bold;
-    color: #18A303;
+    color: #4F8A10;
 }
 #MATH::before {
     content: "MATH";
     display: block;
     font-size: 22px;
     font-weight: bold;
-    color: #18A303;
+    color: #4F8A10;
 }
 #CHART::before {
     content: "CHART";
     display: block;
     font-size: 22px;
     font-weight: bold;
-    color: #18A303;
+    color: #4F8A10;
 }
 #BASIC::before {
     content: "BASIC";
     display: block;
     font-size: 22px;
     font-weight: bold;
-    color: #18A303;
+    color: #4F8A10;
 }
 #GLOBAL::before {
     content: "GLOBAL";
     display: block;
     font-size: 22px;
     font-weight: bold;
-    color: #18A303;
+    color: #4F8A10;
 }
 .pagination {
     padding: 0;
@@ -682,7 +680,7 @@ li.disabled a {
 }
 .contents-treeview label:before {
     content: "⊞";
-    color: #18A303;
+    color: #4F8A10;
     width: 16px;
     margin: 0 5px 0 0;
     display: inline-block;
@@ -756,7 +754,7 @@ li.disabled a {
     }
     aside {
         background-color: #F5F5F5;
-        border-right: 1px solid #E8E8E8;
+        border-right: 1px solid rgba(0,0,0,0.04);
         float: left;
         width: 320px;
         grid-area: sidebar;