forked from amazingfate/help
e37c19a9dd
Fuse.js has Apache License 2.0 and paginathing.js has Expat License (aka MIT). Paginathing is a paginating utility and it was originally jQuery, but due to performance concerns I converted it to pure JavaScript and rather brutally adapted it to our needs. Fuse.js gives us fuzzy search with multiple strings. The settings can be refined, if needed. Settings can be easily tested with the live demo: http://fusejs.io/ Change-Id: I1cf6a6f7d06adbcac95760db90187ee26be8e908 Reviewed-on: https://gerrit.libreoffice.org/48906 Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org> Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>
697 lines
14 KiB
CSS
697 lines
14 KiB
CSS
/*
|
|
* This file is part of the LibreOffice project.
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*
|
|
* This file incorporates work covered by the following license notice:
|
|
*
|
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
|
* contributor license agreements. See the NOTICE file distributed
|
|
* with this work for additional information regarding copyright
|
|
* ownership. The ASF licenses this file to you under the Apache
|
|
* License, Version 2.0 (the "License"); you may not use this file
|
|
* except in compliance with the License. You may obtain a copy of
|
|
* the License at http://www.apache.org/licenses/LICENSE-2.0 .
|
|
*/
|
|
/*
|
|
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
|
+ LIBREOFFICE HELP IN BROWSER +
|
|
+ DEFAULT STYLESHEET +
|
|
+ WESTERN LANGUAGES +
|
|
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
|
|
|
We use px as the unit for navigation elements and fonts because we do
|
|
not want them to scale with browser-set font size.
|
|
We use rem as the unit for article and footer contents because they
|
|
do not break anything related to layout by scaling.
|
|
|
|
*/
|
|
|
|
body,
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
.listitem,
|
|
.listitemintable,
|
|
.tablecontent,
|
|
.tablecontentintable {
|
|
font-family: "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
line-height: normal;
|
|
}
|
|
a {
|
|
color: #18A303;
|
|
}
|
|
pre,
|
|
.code,
|
|
.codeintable,
|
|
.example,
|
|
.exampleintable,
|
|
.literal,
|
|
.literalintable,
|
|
.path,
|
|
.pathintable {
|
|
font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
|
|
margin: 0.08rem 0;
|
|
}
|
|
.acronym {
|
|
font-weight: bold;
|
|
}
|
|
.related {
|
|
font-weight: bold;
|
|
margin-top: 1.67rem;
|
|
border-top: 1px solid black;
|
|
}
|
|
.emph,
|
|
.menuitem,
|
|
.keycode {
|
|
font-weight: bold;
|
|
}
|
|
.tablehead,
|
|
.tableheadintable {
|
|
font-weight: bold;
|
|
margin-top: 0px;
|
|
background: #CCF4C6;
|
|
text-align: center;
|
|
}
|
|
.howtogetheader {
|
|
font-weight: bold;
|
|
border: 1px solid #999999;
|
|
background: #FFFFFF;
|
|
padding: 3px;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-bottom: 0.67rem;
|
|
color: #18A303;
|
|
}
|
|
p,
|
|
td {
|
|
font-size: 1.17rem;
|
|
margin: 2px 2px 2px 2px;
|
|
}
|
|
h1 {
|
|
font-size: 1.83rem;
|
|
font-weight: 300;
|
|
border-bottom: 3px solid #18A303;
|
|
padding-bottom: 6px;
|
|
}
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
h3 {
|
|
font-size: 1.33rem;
|
|
}
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-size: 1.17rem;
|
|
}
|
|
.avis {
|
|
/* background-color: #EEEEEE;*/
|
|
}
|
|
.relatedtopics {
|
|
font-weight: normal;
|
|
}
|
|
.relatedbody {
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
margin-left: 5px;
|
|
}
|
|
.howtoget {
|
|
background: #CCF4C6;
|
|
}
|
|
.howtogetbody {
|
|
background: #CCF4C6;
|
|
margin: 0px;
|
|
}
|
|
.wide {
|
|
width: 100%;
|
|
}
|
|
.topalign {
|
|
vertical-align: top;
|
|
border: 1px;
|
|
}
|
|
.bug {
|
|
color: red;
|
|
}
|
|
.debug {
|
|
border: 1px solid black;
|
|
padding: 3px;
|
|
display: show;
|
|
background-color: #222;
|
|
color: red;
|
|
text-align: left;
|
|
}
|
|
.bascode {
|
|
background-color: #fafafa;
|
|
margin-left: 30px;
|
|
margin-right: 30px;
|
|
}
|
|
/* Basic code syntax highlight */
|
|
|
|
.identifier,
|
|
.unknown {
|
|
color: green;
|
|
}
|
|
.keyword {
|
|
color: blue;
|
|
}
|
|
.comment {
|
|
color: gray;
|
|
}
|
|
.number,
|
|
.string {
|
|
color: red;
|
|
}
|
|
.operator,
|
|
.parameter {
|
|
color: black;
|
|
}
|
|
.hotlink {
|
|
color: blue;
|
|
}
|
|
.infopage {
|
|
color: green;
|
|
font-size: 1.33rem;
|
|
font-weight: bold;
|
|
}
|
|
.topmenu {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
padding: 1px;
|
|
border: solid 1px #18A303;
|
|
}
|
|
#DisplayArea {
|
|
overflow: auto;
|
|
padding: 10px;
|
|
grid-area: main;
|
|
margin-bottom: 50px;
|
|
}
|
|
.mediabutton {
|
|
background-color: cyan;
|
|
}
|
|
.tintro {
|
|
color: white;
|
|
background-color: green;
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
font-size: 2rem;
|
|
border: 1px solid black;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.embedded {}
|
|
.header-extrawurst {
|
|
grid-area: header;
|
|
}
|
|
header {
|
|
background-color: #18A303;
|
|
color: #fff;
|
|
height: 64px;
|
|
padding: 8px 8px 8px 16px;
|
|
}
|
|
.logo-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.logo {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
display: flex;
|
|
}
|
|
.logo p {
|
|
font-size: 24px;
|
|
}
|
|
.logo .symbol {
|
|
background-image: url(media/navigation/libo-symbol-white.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
width: 52px;
|
|
height: 60px;
|
|
margin-right: 10px;
|
|
}
|
|
.lang nav, .modules nav {
|
|
z-index: 100;
|
|
/* line them up horizontally */
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* allow for scrolling */
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
/* make it smooth on iOS */
|
|
-webkit-overflow-scrolling: touch;
|
|
text-align: center;
|
|
}
|
|
.lang nav a, .modules nav a {
|
|
color: #fff;
|
|
background-color: #31363A;
|
|
display: block;
|
|
line-height: 1.5;
|
|
padding: 3px 6px;
|
|
text-decoration: none;
|
|
font-size: 24px;
|
|
flex-shrink: 0;
|
|
z-index: 100;
|
|
white-space: nowrap;
|
|
}
|
|
footer {
|
|
color: #333;
|
|
border-top: 1px solid #18A303;
|
|
padding: 20px 0 0 0;
|
|
margin: 20px 0 0 0;
|
|
}
|
|
footer p {
|
|
font-size: 1rem;
|
|
}
|
|
.breadcrumbs ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #333;
|
|
}
|
|
.breadcrumbs li {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-right: 24px;
|
|
margin: 0;
|
|
}
|
|
.breadcrumbs li:after {
|
|
content: '>';
|
|
position: absolute;
|
|
display: inline-block;
|
|
right: 0;
|
|
width: 24px;
|
|
text-align: center;
|
|
}
|
|
.breadcrumbs li:last-child {
|
|
font-weight: bold;
|
|
}
|
|
.breadcrumbs li:last-child:after {
|
|
content: '';
|
|
}
|
|
.breadcrumbs a {
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
}
|
|
.breadcrumbs a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.gsc-control-cse {
|
|
border-color: transparent !important;
|
|
background-color: transparent !important;
|
|
padding: 3px 0 0 0 !important;
|
|
}
|
|
.modules input[type=checkbox], .lang input[type=checkbox],
|
|
.contents-treeview input[type=checkbox], aside input[type=checkbox] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
label[for=accordion-1] {
|
|
text-decoration: underline;
|
|
color: #18A303;
|
|
cursor: pointer;
|
|
display: block;
|
|
padding: 10px 0 10px 20px;
|
|
font-size: 29px;
|
|
line-height: .6;
|
|
}
|
|
label[for=accordion-1]:after {
|
|
font-size: 44px;
|
|
content:"⌄";
|
|
}
|
|
aside input[type=checkbox] ~ .contents-treeview {
|
|
display: none;
|
|
}
|
|
aside input[type=checkbox]:checked ~ .contents-treeview {
|
|
color: #333;
|
|
z-index: 6;
|
|
display: block;
|
|
padding: 0 0 0 20px;
|
|
}
|
|
.index-label {
|
|
float: left;
|
|
font-size: 29px;
|
|
color: #18A303;
|
|
padding-left: 20px;
|
|
margin: 20px 0 0 0;
|
|
}
|
|
#Index {
|
|
margin-top: 10px;
|
|
}
|
|
.list {
|
|
padding-left: 15px;
|
|
}
|
|
.list li {
|
|
list-style: none;
|
|
font-size: 16px;
|
|
margin-bottom: 5px;
|
|
}
|
|
#Bookmarks {
|
|
padding: 0 20px;
|
|
}
|
|
#Bookmarks p {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #18A303;
|
|
}
|
|
#writer::before {
|
|
content: "WRITER";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #18A303;
|
|
}
|
|
#calc::before {
|
|
content: "CALC";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #18A303;
|
|
}
|
|
#impress::before {
|
|
content: "IMPRESS";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #18A303;
|
|
}
|
|
#draw::before {
|
|
content: "DRAW";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #18A303;
|
|
}
|
|
#base::before {
|
|
content: "BASE";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #18A303;
|
|
}
|
|
#math::before {
|
|
content: "MATH";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #18A303;
|
|
}
|
|
#chart::before {
|
|
content: "CHART";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #18A303;
|
|
}
|
|
#basic::before {
|
|
content: "BASIC";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #18A303;
|
|
}
|
|
#shared::before {
|
|
content: "GLOBAL";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #18A303;
|
|
}
|
|
.pagination {
|
|
padding: 0;
|
|
}
|
|
.pagination li {
|
|
display: inline-block;
|
|
padding: 4px;
|
|
}
|
|
.pagination a {
|
|
text-decoration: none;
|
|
}
|
|
.fuseshown {
|
|
display: block;
|
|
}
|
|
.fusehidden {
|
|
display: none;
|
|
}
|
|
.fuseshown.hidden {
|
|
display: none;
|
|
}
|
|
li.active {
|
|
background-color: #18A303;
|
|
}
|
|
li.active a {
|
|
color: #fff;
|
|
}
|
|
li.disabled a {
|
|
color: #bedcba;
|
|
}
|
|
#search-bar {
|
|
margin-top: 10px;
|
|
}
|
|
.google-search {
|
|
max-width: 300px;
|
|
margin: 0 auto;
|
|
}
|
|
.modules {
|
|
border-bottom: 2px solid #f3f3f3;
|
|
}
|
|
.modules label:after, .lang label:after {
|
|
font-size: 30px;
|
|
color: #fff;
|
|
content:"⌄";
|
|
}
|
|
.lang label, .modules label {
|
|
display: none;
|
|
}
|
|
.modules nav div {
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
float: left;
|
|
display: none;
|
|
}
|
|
.calc-icon,
|
|
.chart-icon,
|
|
.writer-icon,
|
|
.impress-icon,
|
|
.draw-icon,
|
|
.math-icon,
|
|
.basic-icon,
|
|
.base-icon {
|
|
width: 21.5px;
|
|
height: 26px;
|
|
position: relative;
|
|
margin-right: 5px;
|
|
}
|
|
.calc-icon {
|
|
background-image: url(media/navigation/libo-calc.svg);
|
|
}
|
|
.writer-icon {
|
|
background-image: url(media/navigation/libo-writer.svg);
|
|
}
|
|
.impress-icon {
|
|
background-image: url(media/navigation/libo-impress.svg);
|
|
}
|
|
.draw-icon {
|
|
background-image: url(media/navigation/libo-draw.svg);
|
|
}
|
|
.math-icon {
|
|
background-image: url(media/navigation/libo-math.svg);
|
|
}
|
|
.base-icon {
|
|
background-image: url(media/navigation/libo-base.svg);
|
|
}
|
|
.chart-icon {
|
|
background-image: url(media/navigation/libo-chart.svg);
|
|
}
|
|
.basic-icon {
|
|
background-image: url(media/navigation/libo-basic.svg);
|
|
}
|
|
/* tree view */
|
|
|
|
.contents-treeview ul,
|
|
.contents-treeview li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
font-size: 16px;
|
|
}
|
|
.contents-treeview {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.contents-treeview a, .list a {
|
|
text-decoration: none;
|
|
}
|
|
.contents-treeview a:hover, .list a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.contents-treeview input + label + ul {
|
|
margin: 0 0 0 22px;
|
|
}
|
|
.contents-treeview input ~ ul {
|
|
display: none;
|
|
}
|
|
.contents-treeview label,
|
|
.contents-treeview label:before {
|
|
cursor: pointer;
|
|
color: #111;
|
|
}
|
|
.contents-treeview input:disabled + label {
|
|
cursor: default;
|
|
opacity: .6;
|
|
}
|
|
.contents-treeview input:checked:not(:disabled) ~ ul {
|
|
display: block;
|
|
}
|
|
.contents-treeview label,
|
|
.contents-treeview a,
|
|
.contents-treeview label::before {
|
|
height: 16px;
|
|
line-height: 16px;
|
|
vertical-align: middle;
|
|
}
|
|
.contents-treeview label {
|
|
background-position: 18px 0;
|
|
}
|
|
.contents-treeview label:before {
|
|
content: "⊞";
|
|
color: #18A303;
|
|
width: 16px;
|
|
margin: 0 5px 0 0;
|
|
display: inline-block;
|
|
}
|
|
.contents-treeview input:checked + label::before {
|
|
content: "⊟";
|
|
}
|
|
/* webkit adjacent element selector bugfix */
|
|
|
|
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
.contents-treeview {
|
|
-webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
|
|
}
|
|
@-webkit-keyframes webkit-adjacent-element-selector-bugfix {
|
|
from {
|
|
padding: 0;
|
|
}
|
|
to {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (min-width: 960px) {
|
|
.lang nav {
|
|
display: none;
|
|
}
|
|
.lang nav a {
|
|
font-size: 19px;
|
|
white-space: normal;
|
|
}
|
|
.lang label, .modules label {
|
|
cursor: pointer;
|
|
color: #fff;
|
|
font-size: 19px;
|
|
position: relative;
|
|
top: 40px;
|
|
display: block;
|
|
}
|
|
/* change the menu direction to stacked */
|
|
|
|
.lang input[type="checkbox"]:checked ~ nav, .modules input[type="checkbox"]:checked ~ nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 120px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
max-height: 480px;
|
|
position: absolute;
|
|
top: 80px;
|
|
}
|
|
.modules input[type="checkbox"]:checked ~ nav {
|
|
background-color: #31363A;
|
|
text-align: left;
|
|
}
|
|
.modules nav {
|
|
display: none;
|
|
}
|
|
.modules nav div {
|
|
display: block;
|
|
}
|
|
.modules nav a {
|
|
font-size: 19px;
|
|
}
|
|
aside {
|
|
border-right: 5px solid #19A303;
|
|
float: left;
|
|
width: 320px;
|
|
grid-area: sidebar;
|
|
}
|
|
.google-search {
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 19px;
|
|
left: 860px;
|
|
}
|
|
.lang {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 200px;
|
|
}
|
|
.modules {
|
|
width: 120px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 80px;
|
|
border: none;
|
|
}
|
|
label[for=accordion-1] {
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
label[for=accordion-1]:hover {
|
|
background-color: transparent;
|
|
}
|
|
label[for=accordion-1]:after {
|
|
content: "";
|
|
}
|
|
#DisplayArea {
|
|
padding: 10px 50px;
|
|
width: 800px;
|
|
}
|
|
#Contents {
|
|
color: #333;
|
|
z-index: 6;
|
|
display: block;
|
|
padding: 0 0 0 20px;
|
|
}
|
|
#search-bar {
|
|
max-width: 290px;
|
|
}
|
|
}
|
|
@supports (grid-area: auto) {
|
|
@media screen and (min-width: 960px) {
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 320px 1fr;
|
|
grid-template-rows: 1fr minmax(1em, auto);
|
|
grid-template-areas: "header header"
|
|
"sidebar main"
|
|
}
|
|
}
|
|
}
|