|
|
@@ -0,0 +1,907 @@
|
|
|
+/*
|
|
|
+ * 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 {
|
|
|
+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
|
|
|
+}
|
|
|
+.input {
|
|
|
+ background-color: rgba(0,0,0,0.04);
|
|
|
+ transition-property: background-color;
|
|
|
+ transition-duration: 150ms;
|
|
|
+ border-bottom: 1px dashed rgba(0,0,0,0.1);
|
|
|
+ font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
|
|
|
+}
|
|
|
+[data-tooltip]{
|
|
|
+ position:relative;
|
|
|
+}
|
|
|
+[data-tooltip]::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top:-6px;
|
|
|
+ left:50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ border-width: 4px 6px 0 6px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: rgba(0,0,0,0.7) transparent transparent transparent;
|
|
|
+ z-index: 100;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+[data-tooltip]::after {
|
|
|
+ content: attr(data-tooltip);
|
|
|
+ position: absolute;
|
|
|
+ left:50%;
|
|
|
+ top:-6px;
|
|
|
+ transform: translateX(-50%) translateY(-100%);
|
|
|
+ background: rgba(0,0,0,0.7);
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ padding:4px 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ min-width: 80px;
|
|
|
+ border-radius: 5px;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+[data-tooltip]:hover:before, [data-tooltip]:hover:after {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+}
|
|
|
+body {
|
|
|
+ background-color: #F7F8F7;
|
|
|
+ margin: 0;
|
|
|
+ line-height: normal;
|
|
|
+}
|
|
|
+::selection {
|
|
|
+ background: #FFEB9F;
|
|
|
+}
|
|
|
+a {
|
|
|
+ text-decoration-color: rgba(0,0,0,0.15);
|
|
|
+ color: #0461e0;
|
|
|
+}
|
|
|
+a:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ color: #023a86;
|
|
|
+}
|
|
|
+a:visited {
|
|
|
+ color: #633363;
|
|
|
+}
|
|
|
+pre,
|
|
|
+.code,
|
|
|
+.codeintable,
|
|
|
+.example,
|
|
|
+.exampleintable,
|
|
|
+.literal,
|
|
|
+.literalintable,
|
|
|
+.path,
|
|
|
+.pathintable {
|
|
|
+ background-color: rgba(0,0,0,0.04);
|
|
|
+ border-radius: 2px;
|
|
|
+ display: inline;
|
|
|
+ padding: 1px 3px;
|
|
|
+ font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
|
|
|
+}
|
|
|
+.smathcode {
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 1px 3px;
|
|
|
+ font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
|
|
|
+}
|
|
|
+.acronym {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.related {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 1.67rem;
|
|
|
+ border-top: 1px solid black;
|
|
|
+}
|
|
|
+.emph,
|
|
|
+.menuitem {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.keycode {
|
|
|
+ font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
|
|
|
+}
|
|
|
+.widget{
|
|
|
+ padding: 1px 10px;
|
|
|
+ background: #f0f0f0;
|
|
|
+ background: linear-gradient(to bottom,#f0f0f0,#fcfcfc);
|
|
|
+ border-radius: 3px;
|
|
|
+ color: #303030;
|
|
|
+ border: 1px solid #a0a0a0;
|
|
|
+ border-bottom-width: 2px;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+/* div's for warning, tip and note */
|
|
|
+.note,
|
|
|
+.tip,
|
|
|
+.warning {
|
|
|
+ display:flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 2px;
|
|
|
+ box-shadow: 0 2px 5px -3px rgb(0 0 0 / 10%);
|
|
|
+ padding: 0.2em;
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+.note {
|
|
|
+ border-left: 2px solid #309048;
|
|
|
+ background-color: #d9f1dd;
|
|
|
+}
|
|
|
+.tip {
|
|
|
+ border-left: 2px solid #0063b1;
|
|
|
+ background-color: #cde5f7;
|
|
|
+}
|
|
|
+.warning {
|
|
|
+ border-left: 2px solid #ed8733;
|
|
|
+ background-color: #f6f1d2;
|
|
|
+}
|
|
|
+.noteicon, .notetext {
|
|
|
+ padding:0.3em;
|
|
|
+}
|
|
|
+
|
|
|
+/* Table related classes */
|
|
|
+
|
|
|
+/* Special case of table with one cell*/
|
|
|
+.onecell{
|
|
|
+ box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
|
|
|
+ border-bottom: 1px solid #E8E8E8;
|
|
|
+}
|
|
|
+/* Special case of icon table*/
|
|
|
+.icontable {
|
|
|
+ display:flex;
|
|
|
+ align-items:center;
|
|
|
+}
|
|
|
+.iconcell {
|
|
|
+ padding:0.3em;
|
|
|
+}
|
|
|
+
|
|
|
+table {
|
|
|
+ background: #FEFEFE;
|
|
|
+ box-shadow: rgba(0,0,0,0.08) 0 1px 5px 0;
|
|
|
+ border-collapse: collapse;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+}
|
|
|
+table, th, td {
|
|
|
+ border-top: 0;
|
|
|
+ border-bottom: 1px solid #E8E8E8;
|
|
|
+ border-left: 0;
|
|
|
+ border-right: 0;
|
|
|
+ padding: 0.3em;
|
|
|
+}
|
|
|
+.tablehead,
|
|
|
+.tableheadintable {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 0px;
|
|
|
+}
|
|
|
+.tableheadcell {
|
|
|
+ color: white;
|
|
|
+ vertical-align:top;
|
|
|
+}
|
|
|
+
|
|
|
+h1,
|
|
|
+h2,
|
|
|
+h3,
|
|
|
+h4,
|
|
|
+h5,
|
|
|
+h6 {
|
|
|
+ margin-bottom: 0.67rem;
|
|
|
+ color: #148603;
|
|
|
+}
|
|
|
+p,
|
|
|
+ol,
|
|
|
+td {
|
|
|
+ font-size: 1.15rem;
|
|
|
+ margin: 2px 0 2px 0;
|
|
|
+}
|
|
|
+h1 {
|
|
|
+ font-size: 1.83rem;
|
|
|
+ font-weight: 300;
|
|
|
+ border-bottom: 2px solid #148603;
|
|
|
+ margin-bottom: 1.67rem;
|
|
|
+}
|
|
|
+h1 a {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+h2 {
|
|
|
+ font-size: 1.55rem;
|
|
|
+}
|
|
|
+h3 {
|
|
|
+ font-size: 1.33rem;
|
|
|
+}
|
|
|
+h4,
|
|
|
+h5,
|
|
|
+h6 {
|
|
|
+ font-size: 1.17rem;
|
|
|
+}
|
|
|
+.relatedtopics {
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+.howtoget {
|
|
|
+ background: #EBE7E9;
|
|
|
+ border-left: 2px solid #4E4B55;
|
|
|
+ border-radius: 2px;
|
|
|
+ box-shadow: 0 2px 5px -3px rgb(0 0 0 / 10%);
|
|
|
+ padding: 0.2em;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.howtogetheader {
|
|
|
+ background: #FFF;
|
|
|
+ border-radius: 2px;
|
|
|
+ box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 0.1em 0.3em;
|
|
|
+}
|
|
|
+.howtogetbody {
|
|
|
+ padding: 0 0.3em;
|
|
|
+}
|
|
|
+.samplefilesection{
|
|
|
+}
|
|
|
+.wide {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.bug {
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+.debug {
|
|
|
+ border: 1px solid black;
|
|
|
+ padding: 3px;
|
|
|
+ display: none;
|
|
|
+ background-color: #222;
|
|
|
+ color: red;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.pycode,
|
|
|
+.bascode {
|
|
|
+ border: solid 5px transparent;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+#DisplayArea {
|
|
|
+ background-color: #FCFCFC;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 10px 10px 40px 10px;
|
|
|
+ grid-area: main;
|
|
|
+}
|
|
|
+#DisplayArea > p {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.mediabutton {
|
|
|
+ background-color: cyan;
|
|
|
+}
|
|
|
+.mediadiv{
|
|
|
+ padding-bottom:5%;
|
|
|
+ height:0;
|
|
|
+ display:inline-block;
|
|
|
+ border:none;
|
|
|
+}
|
|
|
+.screenshot, .genericimage {
|
|
|
+ border: .5px solid rgba(0,0,0,.1);
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ margin-top: 2em;
|
|
|
+ margin-bottom: 2em;
|
|
|
+ display:block;
|
|
|
+ box-shadow: rgba(0,0,0,0.08) 0 1px 5px 0;
|
|
|
+}
|
|
|
+.iconimage {}
|
|
|
+
|
|
|
+.switch,
|
|
|
+.switchinline {}
|
|
|
+
|
|
|
+.embedded {}
|
|
|
+#TopLeftHeader {
|
|
|
+ grid-area: header;
|
|
|
+ position: sticky;
|
|
|
+ top: 0px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+.dropdowns {
|
|
|
+ /* allow for scrolling */
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: hidden;
|
|
|
+ /* make it smooth on iOS */
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ grid-area: dropdowns;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.symbol, .logo, .logo:hover, .logo:visited {
|
|
|
+ color: #fff;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+.logo p {
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+.symbol {
|
|
|
+ grid-area: symbol;
|
|
|
+ padding: 8px 8px 8px 20px;
|
|
|
+}
|
|
|
+.symbol div {
|
|
|
+ background-image: url(media/navigation/libo-symbol-white.svg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ width: 52px;
|
|
|
+ height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+[data-a11y-toggle]:not([aria-controls]) {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+#langs-nav:not([aria-hidden='true']), #modules-nav:not([aria-hidden='true']) {
|
|
|
+ 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;
|
|
|
+}
|
|
|
+#langs-nav a, #modules-nav a {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #233336;
|
|
|
+ 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 {
|
|
|
+ padding: 30px 20px;
|
|
|
+}
|
|
|
+footer p {
|
|
|
+ font-size: 0.98rem;
|
|
|
+}
|
|
|
+.contents-treeview input[type=checkbox], aside input[type=checkbox] {
|
|
|
+ /* from .visuallyhidden class of html5-boilerplate */
|
|
|
+ border: 0;
|
|
|
+ clip: rect(0 0 0 0);
|
|
|
+ height: 1px;
|
|
|
+ margin: -1px;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0;
|
|
|
+ position: absolute;
|
|
|
+ width: 1px;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+label[for=accordion-1] {
|
|
|
+ color: #233336;
|
|
|
+ display: block;
|
|
|
+ padding: 10px 0 10px 20px;
|
|
|
+ font-size: 22px;
|
|
|
+ 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;
|
|
|
+ margin: 0 20px 0 20px;
|
|
|
+}
|
|
|
+.index-label {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #233336;
|
|
|
+ padding-left: 20px;
|
|
|
+ margin: 20px 0 0 0;
|
|
|
+}
|
|
|
+#Index, .index {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.index {
|
|
|
+ padding-left: 15px;
|
|
|
+}
|
|
|
+.index a {
|
|
|
+ font-size: 15px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.index .hidden {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+#Bookmarks {
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+#Bookmarks p {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #148603;
|
|
|
+}
|
|
|
+#WRITER::before {
|
|
|
+ content: "WRITER";
|
|
|
+ display: block;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0369a3;
|
|
|
+}
|
|
|
+#CALC::before {
|
|
|
+ content: "CALC";
|
|
|
+ display: block;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #43c330;
|
|
|
+}
|
|
|
+#IMPRESS::before {
|
|
|
+ content: "IMPRESS";
|
|
|
+ display: block;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #a33e03;
|
|
|
+}
|
|
|
+#DRAW::before {
|
|
|
+ content: "DRAW";
|
|
|
+ display: block;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #c99c00;
|
|
|
+}
|
|
|
+#BASE::before {
|
|
|
+ content: "BASE";
|
|
|
+ display: block;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #8e03a3;
|
|
|
+}
|
|
|
+#MATH::before {
|
|
|
+ content: "MATH";
|
|
|
+ display: block;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: darkslategray;
|
|
|
+}
|
|
|
+#CHART::before {
|
|
|
+ content: "CHART";
|
|
|
+ display: block;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: darkcyan;
|
|
|
+}
|
|
|
+#BASIC::before {
|
|
|
+ content: "BASIC";
|
|
|
+ display: block;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+#SHARED::before {
|
|
|
+ content: "GLOBAL";
|
|
|
+ display: block;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: gray;
|
|
|
+}
|
|
|
+.pagination-container {
|
|
|
+ text-align: center;
|
|
|
+ margin-left: -40px; /* The normalizer fails to account for this */
|
|
|
+}
|
|
|
+.pagination li {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 5px;
|
|
|
+}
|
|
|
+.pagination a {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+li.active {
|
|
|
+ background-color: #023a86;
|
|
|
+}
|
|
|
+li.active a {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+li.disabled a {
|
|
|
+ opacity: 0.4;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+#search-bar, input {
|
|
|
+ border: 1px solid #CCC;
|
|
|
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 1.5em;
|
|
|
+ margin-top: 10px;
|
|
|
+ outline: none;
|
|
|
+ padding: 0 .25em;
|
|
|
+ transition: all 0.30s ease-in-out;
|
|
|
+}
|
|
|
+#search-bar:focus, input:focus {
|
|
|
+ border: 1px solid #0EA5FB;
|
|
|
+}
|
|
|
+#search-bar {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+#search-bar::placeholder {
|
|
|
+ font-style: italic;
|
|
|
+}
|
|
|
+.xapian-donation {
|
|
|
+ border-top: 2px solid #148603;
|
|
|
+ background-color: #FCFCFC;
|
|
|
+ box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
|
|
|
+}
|
|
|
+#DonationFrame {
|
|
|
+ background: #18A303;
|
|
|
+ position: sticky;
|
|
|
+ top: 0px;
|
|
|
+}
|
|
|
+.donation{
|
|
|
+ border: 1px solid #f1c62a;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ margin: auto;
|
|
|
+ max-width: 200px;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+.donation:hover {
|
|
|
+ background: linear-gradient(90deg, #1c71d8 0%, #30c877 100%);
|
|
|
+}
|
|
|
+.donation a {
|
|
|
+ color: white;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+.donation p {
|
|
|
+ font-size:1rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+#SearchFrame {
|
|
|
+ background: #18A303;
|
|
|
+ top: 0px;
|
|
|
+ position: sticky;
|
|
|
+}
|
|
|
+.xapian-omega-search {
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+.modules {
|
|
|
+ border-bottom: 2px solid #f3f3f3;
|
|
|
+ background-color: #233336;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+#modules:after, #langs:after {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #fff;
|
|
|
+ content:"⌄";
|
|
|
+}
|
|
|
+.lang {
|
|
|
+ background-color: #233336;
|
|
|
+}
|
|
|
+#langs, #modules {
|
|
|
+ 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: 15px;
|
|
|
+}
|
|
|
+.contents-treeview {
|
|
|
+ -moz-user-select: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+.contents-treeview a, .index a {
|
|
|
+ text-decoration: none;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+.contents-treeview a:hover, .index a:hover {
|
|
|
+ border-left: 2px solid rgba(0,0,0,0.05);
|
|
|
+ margin-left: -12px;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+.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 {
|
|
|
+ display: block;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.contents-treeview label:before {
|
|
|
+ content: "⊞";
|
|
|
+ color: #0461e0;
|
|
|
+ width: 16px;
|
|
|
+ margin: 0 5px 0 0;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.contents-treeview input:checked + label::before {
|
|
|
+ content: "⊟";
|
|
|
+}
|
|
|
+.contents-current {
|
|
|
+ background: rgba(0,0,0,0.1);
|
|
|
+ border-left: 2px solid #6E7487;
|
|
|
+ margin-left: -12px;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+/* 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) {
|
|
|
+ .dropdowns {
|
|
|
+ flex-direction: row;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ #langs-nav, #modules-nav {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ #langs-nav a {
|
|
|
+ font-size: 19px;
|
|
|
+ white-space: normal;
|
|
|
+ }
|
|
|
+ /* these are buttons, so also reset some default stylings */
|
|
|
+ #langs, #modules {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 19px;
|
|
|
+ display: block;
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ text-transform: none;
|
|
|
+ padding: 0;
|
|
|
+ line-height: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* change the menu direction to stacked */
|
|
|
+ #langs-nav:not([aria-hidden='true']), #modules-nav:not([aria-hidden='true']) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ max-width: 120px;
|
|
|
+ max-height: 480px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ #modules-nav {
|
|
|
+ background-color: #101820;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ #modules-nav div {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ #modules-nav a {
|
|
|
+ font-size: 19px;
|
|
|
+ }
|
|
|
+ aside {
|
|
|
+ float: left;
|
|
|
+ width: 320px;
|
|
|
+ }
|
|
|
+ .leftside {
|
|
|
+ grid-area: leftside;
|
|
|
+ }
|
|
|
+ .rightside {
|
|
|
+ grid-area: rightside;
|
|
|
+ }
|
|
|
+ #DonationFrame {
|
|
|
+ grid-area: donation;
|
|
|
+ }
|
|
|
+ #SearchFrame {
|
|
|
+ grid-area: search;
|
|
|
+ }
|
|
|
+ footer {
|
|
|
+ grid-area: footer;
|
|
|
+ }
|
|
|
+ .lang {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .modules {
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ #DisplayArea {
|
|
|
+ box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
|
|
|
+ padding: 10px 50px 40px 50px;
|
|
|
+ }
|
|
|
+ .xapian-omega-search {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .xapian-omega-search form {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .omega-autofocus {
|
|
|
+ max-width: 200px;
|
|
|
+ width: 100%
|
|
|
+ }
|
|
|
+}
|
|
|
+@media screen and (min-width: 1440px) {
|
|
|
+ #Contents {
|
|
|
+ color: #333;
|
|
|
+ z-index: 6;
|
|
|
+ display: block;
|
|
|
+ margin: 0 20px 0 20px;
|
|
|
+ }
|
|
|
+ label[for=accordion-1] {
|
|
|
+ background-color: transparent;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ label[for=accordion-1]:hover {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ label[for=accordion-1]:after {
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+ .omega-autofocus {
|
|
|
+ max-width: 400px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/* Use @supports to sneak these rules past IE */
|
|
|
+@supports (grid-area: auto) {
|
|
|
+ @media screen and (min-width: 960px) {
|
|
|
+ #TopLeftHeader {
|
|
|
+ display: grid;
|
|
|
+ align-items: end;
|
|
|
+ grid-template-columns: auto auto;
|
|
|
+ grid-template-rows: auto auto;
|
|
|
+ grid-template-areas: "symbol logo"
|
|
|
+ "symbol dropdowns"
|
|
|
+ }
|
|
|
+ #SearchFrame {
|
|
|
+ grid-area: search;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ #DonationFrame {
|
|
|
+ grid-area: donation;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 320px 100px 300px 1fr;
|
|
|
+ grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr minmax(1em, auto);
|
|
|
+ grid-template-areas: "header header search donation"
|
|
|
+ "rightside main main main"
|
|
|
+ "leftside main main main"
|
|
|
+ ". footer footer footer"
|
|
|
+ }
|
|
|
+ html {
|
|
|
+ scroll-padding-top: 64px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (min-width: 1440px) {
|
|
|
+ body {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 360px 100px 400px 400px 1fr;
|
|
|
+ grid-template-rows: 1fr minmax(1em, auto) minmax(1em, auto);
|
|
|
+ grid-template-areas: "header header search search donation"
|
|
|
+ "leftside main main main rightside"
|
|
|
+ ". footer footer footer ."
|
|
|
+ }
|
|
|
+ .donation {
|
|
|
+ max-width: 300px;
|
|
|
+ }
|
|
|
+ .rightside {
|
|
|
+ width: auto;
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|