diff options
Diffstat (limited to 'helpcontent2/help3xsl/default.css')
| -rw-r--r-- | helpcontent2/help3xsl/default.css | 994 |
1 files changed, 994 insertions, 0 deletions
diff --git a/helpcontent2/help3xsl/default.css b/helpcontent2/help3xsl/default.css new file mode 100644 index 000000000..374050472 --- /dev/null +++ b/helpcontent2/help3xsl/default.css @@ -0,0 +1,994 @@ +/* + * 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; +} + +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: #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: var(--font_mono); + word-wrap: anywhere; +} +.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 { + 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: #148603; +} +p, +ol, +td { + font-size: 1.15rem; + margin: 2px 0 10px 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; +} +.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; +} + +.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; +} +/* You Tube matters */ +.youtube_placeholder{ + border: 1px solid #eee; + max-width:700px; + padding: 10px; + background-color: #eee; + 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: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: "%PRODUCTNAME"; + 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; + z-index: 100; +} +.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) { + .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; + 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% + } + /* 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) { + #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; + } + } +} |