forked from amazingfate/help
25f39b53fb
Bookmarks don't have to be visible all the time, so make them a dropdown and move the search box to header. Move Xapian search to the top of the content area. Make Contents tree appear on the left side in 960px and wider screens. Simplify/clean up some CSS and JS, for example for module colours. Change-Id: Ic50a834b758d50098868866e4b8d3e8085755423 Reviewed-on: https://gerrit.libreoffice.org/c/help/+/160870 Tested-by: Jenkins Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>
1006 lines
21 KiB
CSS
1006 lines
21 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.
|
|
|
|
*/
|
|
:root {
|
|
--font_mono: Menlo, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace;
|
|
--font_body: Ubuntu, Cantarell, "Segoe UI Variable", "Segoe UI", "Noto Sans", "DejaVu Sans", "Lucida Grande", sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
|
|
--background-color: #f7f8f7;
|
|
--module-color: #18A303;
|
|
}
|
|
|
|
body,
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
.listitem,
|
|
.listitemintable,
|
|
.tablecontent {
|
|
font-family: var(--font_body);
|
|
}
|
|
.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: var(--font_mono);
|
|
}
|
|
[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: var(--background-color);
|
|
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: var(--font_mono);
|
|
word-wrap: anywhere;
|
|
}
|
|
.literal {
|
|
white-space: normal;
|
|
}
|
|
.smathcode {
|
|
border-radius: 2px;
|
|
padding: 1px 3px;
|
|
font-family: var(--font_mono);
|
|
}
|
|
.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: var(--font_mono);
|
|
}
|
|
.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;
|
|
}
|
|
/* Override some Prism.js styles */
|
|
code[class*="language-"], pre[class*="language-"] {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
table, th, td {
|
|
border-top: 0;
|
|
border-bottom: 1px solid #E8E8E8;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
padding: 0.3em;
|
|
}
|
|
html[dir=ltr] th {
|
|
text-align: left;
|
|
}
|
|
.tablehead,
|
|
.tableheadintable {
|
|
font-weight: bold;
|
|
margin-top: 0px;
|
|
}
|
|
.tableheadcell {
|
|
background: var(--module-color);
|
|
color: white;
|
|
vertical-align:top;
|
|
}
|
|
|
|
.table_font_small {
|
|
font-size: 0.98rem;
|
|
}
|
|
|
|
/* ScriptForge service tables */
|
|
.sf_table {
|
|
min-width: 100%;
|
|
}
|
|
.sf_table thead {
|
|
display: none;
|
|
}
|
|
.sf_table tr, .sf_table td {
|
|
display: block;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-bottom: 0.67rem;
|
|
color: var(--module-color);
|
|
border-bottom-color: var(--module-color);
|
|
}
|
|
p,
|
|
ol,
|
|
td {
|
|
font-size: 1.15rem;
|
|
margin: 2px 0 10px 0;
|
|
}
|
|
h1 {
|
|
font-size: 1.83rem;
|
|
font-weight: 300;
|
|
border-bottom: 2px solid;
|
|
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;
|
|
}
|
|
.sqlcode,
|
|
.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;
|
|
}
|
|
#omega-autofocus {
|
|
width: 274px;
|
|
}
|
|
.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 {
|
|
background: var(--module-color);
|
|
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;
|
|
width: 100%;
|
|
}
|
|
.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;
|
|
}
|
|
/* You Tube matters */
|
|
.youtube_placeholder{
|
|
border: 1px dashed #eee;
|
|
max-width:700px;
|
|
padding: 10px;
|
|
background-color: var(--background-color);
|
|
text-align: center;
|
|
}
|
|
.youtube_button {
|
|
appearance: none;
|
|
backface-visibility: hidden;
|
|
background-color: #27ae60;
|
|
border-radius: 8px;
|
|
border-style: none;
|
|
box-shadow: rgba(39, 174, 96, .15) 0 4px 9px;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: normal;
|
|
line-height: 1.5;
|
|
outline: none;
|
|
overflow: hidden;
|
|
padding: 13px 20px;
|
|
position: relative;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transform: translate3d(0, 0, 0);
|
|
transition: all .3s;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
}
|
|
.youtube_button:hover {
|
|
background-color: #1e8449;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
transition-duration: .35s;
|
|
box-shadow: rgba(39, 174, 96, .2) 0 6px 12px;
|
|
}
|
|
.youtube_button:active {
|
|
transform: translateY(2px);
|
|
transition-duration: .35s;
|
|
}
|
|
|
|
#langs-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;
|
|
}
|
|
#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;
|
|
margin: 0 0 10px 10px;
|
|
font-size: 22px;
|
|
}
|
|
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 20px 20px;
|
|
}
|
|
.index-label {
|
|
font-size: 22px;
|
|
color: #233336;
|
|
padding-left: 20px;
|
|
margin: 20px 0 0 0;
|
|
}
|
|
.index {
|
|
margin-top: 10px;
|
|
}
|
|
.index {
|
|
padding-left: 15px;
|
|
}
|
|
.index a {
|
|
font-size: 15px;
|
|
display: block;
|
|
}
|
|
.index .hidden, #langs-nav[hidden], #modules-nav[hidden] {
|
|
display: none;
|
|
}
|
|
#Bookmarks {
|
|
width: 300px;
|
|
margin-left: 10px;
|
|
}
|
|
#Bookmarks p {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #148603;
|
|
}
|
|
#WRITER::before {
|
|
content: "Writer";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #083fa6;
|
|
}
|
|
#CALC::before {
|
|
content: "Calc";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #007c3c;
|
|
}
|
|
#IMPRESS::before {
|
|
content: "Impress";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #d0120d;
|
|
}
|
|
#DRAW::before {
|
|
content: "Draw";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #cb6d30;
|
|
}
|
|
#BASE::before {
|
|
content: "Base";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #7324a9;
|
|
}
|
|
#MATH::before {
|
|
content: "Math";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #c10018;
|
|
}
|
|
#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: "%PRODUCTNAME";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: darkslategray;
|
|
}
|
|
.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;
|
|
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;
|
|
}
|
|
#SearchFrame .nav-container {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: var(--background-color);
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
max-height: 80svh;
|
|
width: 300px;
|
|
}
|
|
#SearchFrame:focus-within .nav-container {
|
|
display: block;
|
|
}
|
|
.xapian-donation {
|
|
border-top: 2px solid #148603;
|
|
background-color: #FCFCFC;
|
|
box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
|
|
}
|
|
#DonationFrame {
|
|
background: var(--module-color);
|
|
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 {
|
|
top: 0px;
|
|
position: sticky;
|
|
z-index: 1;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.office-icon,
|
|
.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;
|
|
}
|
|
.office-icon {
|
|
background-image: url(media/navigation/libo-symbol-black.svg);
|
|
}
|
|
.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) {
|
|
html {
|
|
scroll-padding-top: 64px;
|
|
}
|
|
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"
|
|
"leftside main main main"
|
|
"leftside main main main"
|
|
". footer footer footer"
|
|
}
|
|
#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;
|
|
}
|
|
.index-label {
|
|
color: #fff;
|
|
}
|
|
#DonationFrame {
|
|
grid-area: donation;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
#Contents {
|
|
color: #333;
|
|
z-index: 6;
|
|
display: block;
|
|
margin: 0 20px 0 20px;
|
|
}
|
|
label[for=accordion-1] {
|
|
margin: 0;
|
|
}
|
|
label[for=accordion-1]:after {
|
|
content: "";
|
|
font-size: unset;
|
|
}
|
|
#Bookmarks {
|
|
margin-left: 0;
|
|
}
|
|
.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, #modules-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
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;
|
|
padding: 40px 10px 0 10px;
|
|
}
|
|
#DonationFrame {
|
|
grid-area: donation;
|
|
}
|
|
#SearchFrame {
|
|
background: var(--module-color);
|
|
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: 40px 50px;
|
|
}
|
|
.xapian-omega-search {
|
|
width: 100%;
|
|
}
|
|
.xapian-omega-search form {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
/* ScriptForge service tables */
|
|
.sf_table {
|
|
min-width: auto;
|
|
}
|
|
.sf_table thead {
|
|
display: table-header-group;
|
|
}
|
|
.sf_table tr {
|
|
display: table-row;
|
|
}
|
|
.sf_table td {
|
|
display: table-cell;
|
|
}
|
|
}
|
|
@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 ."
|
|
". footer footer footer ."
|
|
}
|
|
.donation {
|
|
max-width: 300px;
|
|
}
|
|
label[for=accordion-1] {
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
label[for=accordion-1]:hover {
|
|
background-color: transparent;
|
|
}
|
|
}
|