[Libreoffice-commits] help.git: help3xsl/default.css

[Libreoffice Gerrit user]

 help3xsl/default.css |   78 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 66 insertions(+), 12 deletions(-)

New commits:
commit bd26e706b30dccecdeba24ba8b697ddf2fc7a615
Author:     Olivier Hallot <olivier.hallot at libreoffice.org>
AuthorDate: Sun Mar 3 14:05:43 2019 -0300
Commit:     Olivier Hallot <olivier.hallot at libreoffice.org>
CommitDate: Mon Mar 4 15:41:52 2019 +0100

    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 at libreoffice.org>

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 61d839401..f475d83ef 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;