wangxin/help
1
0
Fork 0
forked from amazingfate/help
Code Pull Requests Activity

Improve donation link in Help online

Browse Source 
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>
This commit is contained in:
Olivier Hallot
2019-03-03 14:05:43 -03:00
parent 8e550a4a31
commit bd26e706b3
1 changed files with 66 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
help3xsl/default.css
View File

@ -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;