Improve donation link in Help online

redmine#2815

Addressed responsiveness: for screen width < 960px the
button goes to the bottom of the screen and the header is
not fixed anymore.

Artists are invited to improve button rendering.

Button max width is 300px, the en-US text and the translated
text should fit in 2 lines of 300px each. Text is centered.

Change-Id: I51860be2ad998e85f247118e44b21af3e2efa060
Reviewed-on: https://gerrit.libreoffice.org/68644
Tested-by: Jenkins
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>

1 files changed, 66 insertions, 12 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 61d8394011..f475d83ef9 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -293,13 +293,11 @@ h6 {
     color: red;
     text-align: left;
 }
-.donation {
-    padding: 0 0 10px 0;
-    margin-bottom: 1em;
-    border-bottom: 1px dashed rgba(0,0,0,0.1);
-}
+
 .donation p{
     font-size:1.2rem;
+    padding: 3px 0 0 0 !important;
+    text-align: center;
 }
 .bascode {
     margin-top:15px;
@@ -569,6 +567,35 @@ li.disabled a {
 #search-bar::placeholder {
     font-style: italic;
 }
+.donation {
+    margin-bottom: 1em;
+    background: #0379BC;
+    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
+    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
+    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
+    background-image: -o-linear-gradient(top, #3498db, #2980b9);
+    background-image: linear-gradient(to bottom, #3498db, #2980b9);
+    -webkit-border-radius: 8;
+    -moz-border-radius: 8;
+    border-radius: 8px;
+    padding: 5px 10px 5px 10px;
+    margin: 0 auto;
+    max-width: 300px;
+    color: #ffffff;
+    text-decoration: none;
+}
+.donation a {
+    color: white;
+}
+.donation:hover{
+    background: #0379BC;
+    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
+    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
+    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
+    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
+    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
+    text-decoration: none;
+}
 .google-search {
     max-width: 300px;
     margin: 0 auto;
@@ -707,6 +734,14 @@ li.disabled a {
     }
 }
 @media screen and (min-width: 960px) {
+    .header-extrawurst {
+        position: fixed;
+        width: 100%;
+        top: 0px;
+    }
+    body {
+        padding-top: 60px;
+    }
     .lang nav {
         display: none;
     }
@@ -757,12 +792,6 @@ li.disabled a {
     .rightside {
         grid-area: rightside;
     }
-    .google-search {
-        margin: 0;
-        position: absolute;
-        top: 19px;
-        left: 860px;
-    }
     .lang {
         position: absolute;
         top: 0;
@@ -775,14 +804,39 @@ li.disabled a {
         left: 80px;
         border: none;
     }
+    .donation {
+        position: fixed;
+        top: 10px;
+        left: 400px;
+    }
     #DisplayArea {
         background-color: #FCFCFC;
         box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
         padding: 10px 50px;
-        width: 800px;
     }
 }
 @media screen and (min-width: 1440px) {
+    .header-extrawurst {
+        position: fixed;
+        width: 100%;
+        top: 0px;
+    }
+    body {
+        padding-top: 60px;
+    }
+    .google-search {
+        margin: 0;
+        position: fixed;
+        top: 19px;
+        left: 860px;
+        border-radius: 8px;
+    }
+    .donation {
+        position: fixed;
+        max-width: 300px;
+        top: 10px;
+        left: 400px;
+    }
     #Contents {
         color: #333;
         z-index: 6;