forked from amazingfate/help
301ae74e8b
Ever since the contents of the modules and lang menus started being populated upon click, the flow for screenreader users has been potentially confusing. This patch introduces a11y-toggle into the mix: https://github.com/edenspiekermann/a11y-toggle Checkboxes were changed into buttons. This hopefully makes it clear we want the user to click them. The contents tree still uses the checkbox hack, because its items are populated upon page load. Change-Id: I3482bea0c8669f96794498fc37d9d18fe3f829d5 Reviewed-on: https://gerrit.libreoffice.org/72467 Tested-by: Jenkins Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org> Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>
893 lines
19 KiB
CSS
893 lines
19 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 {
|
|
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: #BFFFB7;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
color: #0379BC;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
color: #0499EE;
|
|
}
|
|
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-weight: bold;*/
|
|
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: 0 4px 4px 0;
|
|
box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
|
|
padding: 0.2em;
|
|
margin-top: 15px;
|
|
}
|
|
.note {
|
|
border-left: 4px solid #61897C;
|
|
background-color: #D9E7E2;
|
|
}
|
|
.tip {
|
|
border-left: 4px solid #4866AD;
|
|
background-color: #CDD5E8;
|
|
}
|
|
.warning {
|
|
border-left: 4px solid #D5B177;
|
|
background-color: #F9EEDC;
|
|
}
|
|
.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 {
|
|
background: #148603;
|
|
color: white;
|
|
vertical-align:top;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-bottom: 0.67rem;
|
|
color: #148603;
|
|
}
|
|
p,
|
|
ol,
|
|
td {
|
|
font-size: 1.17rem;
|
|
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: 4px solid #4E4B55;
|
|
border-radius: 0 4px 4px 0;
|
|
box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
|
|
padding: 0.3em;
|
|
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%;
|
|
}
|
|
.topalign {
|
|
vertical-align: top;
|
|
border: 1px;
|
|
}
|
|
.bug {
|
|
color: red;
|
|
}
|
|
.debug {
|
|
border: 1px solid black;
|
|
padding: 3px;
|
|
display: none;
|
|
background-color: #222;
|
|
color: red;
|
|
text-align: left;
|
|
}
|
|
|
|
.pycode,
|
|
.bascode {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.infopage {
|
|
color: green;
|
|
font-size: 1.33rem;
|
|
font-weight: bold;
|
|
}
|
|
.topmenu {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
padding: 1px;
|
|
border: solid 1px #148603;
|
|
}
|
|
#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;
|
|
}
|
|
.switch,
|
|
.switchinline {}
|
|
|
|
.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;
|
|
position: sticky;
|
|
top: 0px;
|
|
background-color: #18A303;
|
|
z-index: 1000;
|
|
}
|
|
header {
|
|
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;
|
|
}
|
|
[aria-hidden='true'],
|
|
[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: 40px 10px 40px 10px;
|
|
background-color: #FCFCFC;
|
|
box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
|
|
}
|
|
footer p {
|
|
font-size: 0.98rem;
|
|
}
|
|
.gsc-control-cse {
|
|
border-color: transparent !important;
|
|
background-color: transparent !important;
|
|
padding: 3px 0 0 0 !important;
|
|
}
|
|
.contents-treeview input[type=checkbox], aside input[type=checkbox] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
label[for=accordion-1] {
|
|
color: #148603;
|
|
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: #148603;
|
|
padding-left: 20px;
|
|
margin: 20px 0 0 0;
|
|
}
|
|
#Index, .index {
|
|
margin-top: 10px;
|
|
}
|
|
.index {
|
|
padding-left: 15px;
|
|
}
|
|
.index a {
|
|
font-size: 16px;
|
|
}
|
|
#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: #148603;
|
|
}
|
|
#CALC::before {
|
|
content: "CALC";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #148603;
|
|
}
|
|
#IMPRESS::before {
|
|
content: "IMPRESS";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #148603;
|
|
}
|
|
#DRAW::before {
|
|
content: "DRAW";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #148603;
|
|
}
|
|
#BASE::before {
|
|
content: "BASE";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #148603;
|
|
}
|
|
#MATH::before {
|
|
content: "MATH";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #148603;
|
|
}
|
|
#CHART::before {
|
|
content: "CHART";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #148603;
|
|
}
|
|
#BASIC::before {
|
|
content: "BASIC";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #148603;
|
|
}
|
|
#SHARED::before {
|
|
content: "GLOBAL";
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #148603;
|
|
}
|
|
.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;
|
|
}
|
|
.index a {
|
|
display: block;
|
|
}
|
|
.index .hidden {
|
|
display: none;
|
|
}
|
|
li.active {
|
|
background-color: #0379BC;
|
|
}
|
|
li.active a {
|
|
color: #fff;
|
|
}
|
|
li.disabled a {
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
#search-bar {
|
|
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;
|
|
width: 100%;
|
|
}
|
|
#search-bar:focus {
|
|
border: 1px solid #0EA5FB;
|
|
}
|
|
#search-bar::placeholder {
|
|
font-style: italic;
|
|
}
|
|
.google-donation {
|
|
border-top: 2px solid #148603;
|
|
background-color: #FCFCFC;
|
|
box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
|
|
}
|
|
.donation {
|
|
background: #0379BC;
|
|
background-image: linear-gradient(to bottom, #3498db, #2980b9);
|
|
border-radius: 8px;
|
|
padding: 5px 10px 5px 10px;
|
|
margin: 20px auto 0 auto;
|
|
max-width: 200px;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
}
|
|
.donation a {
|
|
color: white;
|
|
}
|
|
.donation a:hover {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
.donation:hover{
|
|
background: #0379BC;
|
|
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
|
|
}
|
|
.donation p {
|
|
font-size:1.2rem;
|
|
text-align: center;
|
|
}
|
|
.google-search {
|
|
max-width: 300px;
|
|
margin: 40px auto 0 auto;
|
|
}
|
|
.modules {
|
|
border-bottom: 2px solid #f3f3f3;
|
|
background-color: #233336;
|
|
}
|
|
#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: 16px;
|
|
}
|
|
.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: #148603;
|
|
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.05);
|
|
border-left: 2px solid #0379BC;
|
|
font-weight: 600;
|
|
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) {
|
|
#langs-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;
|
|
position: relative;
|
|
top: 40px;
|
|
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;
|
|
max-width: 120px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
max-height: 480px;
|
|
position: absolute;
|
|
top: 80px;
|
|
}
|
|
#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;
|
|
}
|
|
.google-donation {
|
|
grid-area: google;
|
|
position: sticky;
|
|
top: 0px;
|
|
background-color: #FCFCFC;
|
|
box-shadow: none;
|
|
clear: left;
|
|
}
|
|
.donation {
|
|
max-width: 400px;
|
|
}
|
|
footer {
|
|
grid-area: footer;
|
|
}
|
|
.lang {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 200px;
|
|
background-color: transparent;
|
|
}
|
|
.modules {
|
|
width: 120px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 80px;
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
#DisplayArea {
|
|
box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
|
|
padding: 10px 50px 40px 50px;
|
|
}
|
|
}
|
|
@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: "";
|
|
}
|
|
}
|
|
/* Use @supports to sneak these rules past IE */
|
|
@supports (grid-area: auto) {
|
|
@media screen and (min-width: 960px) {
|
|
.google-donation {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #18A303;
|
|
border-top: none;
|
|
}
|
|
.google-search {
|
|
margin: 0;
|
|
}
|
|
.donation {
|
|
margin: 0 auto;
|
|
}
|
|
footer {
|
|
border-top: 2px solid #148603;
|
|
}
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 320px 80px 1fr;
|
|
grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr minmax(1em, auto);
|
|
grid-template-areas: "header header google"
|
|
"rightside main main"
|
|
"leftside main main"
|
|
". footer footer"
|
|
}
|
|
}
|
|
@media screen and (min-width: 1440px) {
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 320px 450px 450px 1fr;
|
|
grid-template-rows: 1fr minmax(1em, auto) minmax(1em, auto);
|
|
grid-template-areas: "header header google google"
|
|
"leftside main main rightside"
|
|
". footer footer ."
|
|
}
|
|
.rightside {
|
|
width: auto;
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|