Update global HTML architecture

This commit is contained in:
Kujiu 2021-12-04 20:04:51 +01:00
parent 8b596c0f6e
commit 5fcb946d10
Signed by: kujiu
GPG key ID: ABBB2CAC6855599F
18 changed files with 1689 additions and 1639 deletions

View file

@ -6,23 +6,36 @@ const {t} = useI18n({useScope: 'local'});
</script> </script>
<template> <template>
<ReloadPWA/> <div id="appflex">
<main> <div id="page">
<router-view></router-view> <div class="action-bar">
</main> <router-view name="ActionBar"></router-view>
<header> </div>
<router-link to='/apps'> <main id="content">
<img alt="" src="./assets/logo.svg"/> <ReloadPWA/>
{{ t('home.apps') }} <router-view></router-view>
</main>
</div>
<div id="sidebar" class="sidebar">
<router-view name="Sidebar"></router-view>
</div>
</div>
<header class="navbar">
<router-link :to="{name: 'Apps'}" class="home-link">
<img id="main-logo" alt="" src="./assets/logo.svg"/>
<span id="site-name">{{ t('home.apps') }}</span>
</router-link> </router-link>
<select v-model="$i18n.locale" @change="$i18n.loadMessages()"> <div class="links">
<option value="de">Deutsch</option> <router-view name="Links"></router-view>
<option value="en">English</option> <select v-model="$i18n.locale" @change="$i18n.loadMessages()">
<option value="fr">Français</option> <option value="de">Deutsch</option>
<option value="nl">Nederlands</option> <option value="en">English</option>
</select> <option value="fr">Français</option>
<option value="nl">Nederlands</option>
</select>
</div>
</header> </header>
<footer> <footer class="footer">
</footer> </footer>
</template> </template>
@ -42,8 +55,5 @@ const {t} = useI18n({useScope: 'local'});
@import './assets/css/theme-dark-hc.less'; @import './assets/css/theme-dark-hc.less';
</style> </style>
<script>
</script>
<i18n lang="json" locale="en" src="./locale/en.json"/> <i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/> <i18n lang="json" locale="fr" src="./locale/fr.json"/>

View file

@ -1,25 +1,25 @@
.arrow { .arrow {
display: inline-block; display: inline-block;
width: 0; width: 0;
height: 0; height: 0;
&.up { &.up {
border-left: 0.3rem solid transparent; border-left: 0.3rem solid transparent;
border-right: 0.3rem solid transparent; border-right: 0.3rem solid transparent;
border-bottom: 0.5rem solid var(--ArBgClr); border-bottom: 0.5rem solid var(--ArBgClr);
} }
&.down { &.down {
border-left: 0.3rem solid transparent; border-left: 0.3rem solid transparent;
border-right: 0.3rem solid transparent; border-right: 0.3rem solid transparent;
border-top: 0.5rem solid var(--ArBgClr); border-top: 0.5rem solid var(--ArBgClr);
} }
&.right { &.right {
border-top: 0.3rem solid transparent; border-top: 0.3rem solid transparent;
border-bottom: 0.3rem solid transparent; border-bottom: 0.3rem solid transparent;
border-left: 0.5rem solid var(--ArBgClr); border-left: 0.5rem solid var(--ArBgClr);
} }
&.left { &.left {
border-top: 0.3rem solid transparent; border-top: 0.3rem solid transparent;
border-bottom: 0.3rem solid transparent; border-bottom: 0.3rem solid transparent;
border-right: 0.5rem solid var(--ArBgClr); border-right: 0.5rem solid var(--ArBgClr);
} }
} }

View file

@ -1,187 +1,187 @@
pre { pre {
white-space: pre-wrap; white-space: pre-wrap;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.content { #content {
td.linenos, td.code { td.linenos, td.code {
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
> .highlight pre { > .highlight pre {
border: none; border: none;
}
} }
}
code {
color: var(--CdTClr);
padding: 0.25rem 0.1rem;
margin: 0;
font-size: 0.85em;
background-color: var(--CdBgClr);
border-bottom: var(--CdBClr) solid 0.2em;
a, a:visited {
color: var(--CdLClr);
&:hover {
color: var(--CdLHClr);
}
}
}
td.linenos pre, pre span.lineno {
border-right: solid 0.3em var(--CdLnBClr);
background-color: var(--CdLnBgClr);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: var(--CdLnTClr);
white-space: pre;
overflow-wrap: normal;
margin: 0;
}
pre span.lineno {
float: left;
margin: 0 0.5rem 0 -0.5rem;
padding-left: 0.5rem;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
pre, pre[class*="language-"] {
line-height: 1.4;
padding: 1.25rem 1.5rem 1.25rem 0.5rem;
margin: 0.85rem 0;
background-color: var(--PrBgClr);
color: var(--PrTClr);
border-left: var(--PrBClr) solid 0.5em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
code { code {
color: var(--PrTClr); color: var(--CdTClr);
padding: 0; padding: 0.25rem 0.1rem;
background-color: transparent; margin: 0;
font-size: 0.85em;
background-color: var(--CdBgClr);
border-bottom: var(--CdBClr) solid 0.2em;
a, a:visited {
color: var(--CdLClr);
&:hover {
color: var(--CdLHClr);
}
}
} }
a, a:visited {
color: var(--PrLClr); td.linenos pre, pre span.lineno {
&:hover { border-right: solid 0.3em var(--CdLnBClr);
color: var(--PrLHClr); background-color: var(--CdLnBgClr);
} box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: var(--CdLnTClr);
white-space: pre;
overflow-wrap: normal;
margin: 0;
}
pre span.lineno {
float: left;
margin: 0 0.5rem 0 -0.5rem;
padding-left: 0.5rem;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
pre, pre[class*="language-"] {
line-height: 1.4;
padding: 1.25rem 1.5rem 1.25rem 0.5rem;
margin: 0.85rem 0;
background-color: var(--PrBgClr);
color: var(--PrTClr);
border-left: var(--PrBClr) solid 0.5em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
code {
color: var(--PrTClr);
padding: 0;
background-color: transparent;
}
a, a:visited {
color: var(--PrLClr);
&:hover {
color: var(--PrLHClr);
}
}
} }
}
} }
div[class*="language-"] { div[class*="language-"] {
position: relative;
background-color: var(--CdBgClr);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
.highlight-lines {
padding-top: 1.3rem;
width: 100%;
line-height: 1.4;
.highlighted {
background-color: var(--CdBgAClr);
color: var(--CdAClr);
}
}
pre, pre[class*="language-"] {
background: transparent;
position: relative; position: relative;
z-index: 1; background-color: var(--CdBgClr);
} box-decoration-break: clone;
&::before { -webkit-box-decoration-break: clone;
z-index: 3;
font-size: 0.75rem;
color: var(--CdT2Clr);
}
&:not(.line-numbers-mode) {
.line-numbers-wrapper {
display: none;
}
}
&.line-numbers-mode {
.highlight-lines { .highlight-lines {
.highlighted { padding-top: 1.3rem;
position: relative; width: 100%;
&:before { line-height: 1.4;
content: ' '; .highlighted {
z-index: 3; background-color: var(--CdBgAClr);
display: block; color: var(--CdAClr);
width: var(--lineNumbersWrapperWidth);
height: 100%;
background-color: var(--CdBgAClr);
color: var(--CdBgClr);
} }
}
} }
pre { pre, pre[class*="language-"] {
padding-left: var(--lineNumbersWrapperWidth); background: transparent;
vertical-align: middle;
}
.line-numbers-wrapper {
width: var(--lineNumbersWrapperWidth);
text-align: center;
color: var(--PrLNClr);
padding: 1.25rem 0;
line-height: 1.4;
.line-number {
position: relative; position: relative;
z-index: 4; z-index: 1;
font-size: 0.85em;
}
} }
&::after { &::before {
content: ''; z-index: 3;
z-index: 2; font-size: 0.75rem;
width: var(--lineNumbersWrapperWidth); color: var(--CdT2Clr);
height: 100%; }
border-left: 0.5rem solid var(--PrB2Clr); &:not(.line-numbers-mode) {
background-color: var(--PrBgClr); .line-numbers-wrapper {
display: none;
}
}
&.line-numbers-mode {
.highlight-lines {
.highlighted {
position: relative;
&:before {
content: ' ';
z-index: 3;
display: block;
width: var(--lineNumbersWrapperWidth);
height: 100%;
background-color: var(--CdBgAClr);
color: var(--CdBgClr);
}
}
}
pre {
padding-left: var(--lineNumbersWrapperWidth);
vertical-align: middle;
}
.line-numbers-wrapper {
width: var(--lineNumbersWrapperWidth);
text-align: center;
color: var(--PrLNClr);
padding: 1.25rem 0;
line-height: 1.4;
.line-number {
position: relative;
z-index: 4;
font-size: 0.85em;
}
}
&::after {
content: '';
z-index: 2;
width: var(--lineNumbersWrapperWidth);
height: 100%;
border-left: 0.5rem solid var(--PrB2Clr);
background-color: var(--PrBgClr);
}
} }
}
} }
//for lang in js ts html md vue css sass scss less stylus go java c sh yaml rst rust zsh gdscript esc //for lang in js ts html md vue css sass scss less stylus go java c sh yaml rst rust zsh gdscript esc
// div{'[class~="language-' + lang + '"]'} // div{'[class~="language-' + lang + '"]'}
// &:before // &:before
// content ('' + lang) // content ('' + lang)
div[class~="language-javascript"] { div[class~="language-javascript"] {
&:before { &:before {
content: "js"; content: "js";
} }
} }
div[class~="language-typescript"] { div[class~="language-typescript"] {
&:before { &:before {
content: "ts"; content: "ts";
} }
} }
div[class~="language-markup"] { div[class~="language-markup"] {
&:before { &:before {
content: "html"; content: "html";
} }
} }
div[class~="language-markdown"] { div[class~="language-markdown"] {
&:before { &:before {
content: "md"; content: "md";
} }
} }
div[class~="language-json"]:before { div[class~="language-json"]:before {
content: "json"; content: "json";
} }
div[class~="language-ruby"]:before { div[class~="language-ruby"]:before {
content: "rb"; content: "rb";
} }
div[class~="language-python"]:before { div[class~="language-python"]:before {
content: "py"; content: "py";
} }
div[class~="language-bash"]:before { div[class~="language-bash"]:before {
content: "sh"; content: "sh";
} }

File diff suppressed because it is too large Load diff

View file

@ -1,120 +1,120 @@
.custom-block { .custom-block {
background-color: var(--AaBgClr); background-color: var(--AaBgClr);
border-color: var(--AaBClr); border-color: var(--AaBClr);
color: var(--AaTClr); color: var(--AaTClr);
a, a:visited {
color: var(--AaLClr);
:hover {
color: var(--AaLHClr);
}
}
.custom-block-title {
font-weight: 600;
margin-bottom: 0.4rem;
}
&.tip, &.warning, &.danger {
padding: .1rem 1.5rem;
border-left-width: .5rem;
border-left-style: solid;
margin: 1rem 0;
}
&.tip {
background-color: var(--AtBgClr);
border-color: var(--AtBClr);
color: var(--AtTClr);
a, a:visited { a, a:visited {
color: var(--AtLClr); color: var(--AaLClr);
:hover { :hover {
color: var(--AtLHClr); color: var(--AaLHClr);
} }
} }
} .custom-block-title {
&.hint { font-weight: 600;
background-color: var(--AhBgClr); margin-bottom: 0.4rem;
border-color: var(--AhBClr);
color: var(--AhTClr);
a, a:visited {
color: var(--AhLClr);
:hover {
color: var(--AhLHClr);
}
} }
} &.tip, &.warning, &.danger {
&.important { padding: .1rem 1.5rem;
background-color: var(--AiBgClr); border-left-width: .5rem;
border-color: var(--AiBClr); border-left-style: solid;
color: var(--AiTClr); margin: 1rem 0;
a, a:visited {
color: var(--AiLClr);
:hover {
color: var(--AiLHClr);
}
} }
} &.tip {
&.note { background-color: var(--AtBgClr);
background-color: var(--AnBgClr); border-color: var(--AtBClr);
border-color: var(--AnBClr); color: var(--AtTClr);
color: var(--AnTClr); a, a:visited {
a, a:visited { color: var(--AtLClr);
color: var(--AnLClr); :hover {
:hover { color: var(--AtLHClr);
color: var(--AnLHClr); }
} }
} }
} &.hint {
&.success { background-color: var(--AhBgClr);
background-color: var(--AsBgClr); border-color: var(--AhBClr);
border-color: var(--AsBClr); color: var(--AhTClr);
color: var(--AsTClr); a, a:visited {
a, a:visited { color: var(--AhLClr);
color: var(--AsLClr); :hover {
:hover { color: var(--AhLHClr);
color: var(--AsLHClr); }
} }
} }
} &.important {
&.warning { background-color: var(--AiBgClr);
background-color: var(--AwBgClr); border-color: var(--AiBClr);
border-color: var(--AwBClr); color: var(--AiTClr);
color: var(--AwTClr); a, a:visited {
a, a:visited { color: var(--AiLClr);
color: var(--AwLClr); :hover {
:hover { color: var(--AiLHClr);
color: var(--AwLHClr); }
} }
} }
} &.note {
&.caution { background-color: var(--AnBgClr);
background-color: var(--AcBgClr); border-color: var(--AnBClr);
border-color: var(--AcBClr); color: var(--AnTClr);
color: var(--AcTClr); a, a:visited {
a, a:visited { color: var(--AnLClr);
color: var(--AcLClr); :hover {
:hover { color: var(--AnLHClr);
color: var(--AcLHClr); }
} }
} }
} &.success {
&.danger { background-color: var(--AsBgClr);
background-color: var(--AdBgClr); border-color: var(--AsBClr);
border-color: var(--AdBClr); color: var(--AsTClr);
color: var(--AdTClr); a, a:visited {
a, a:visited { color: var(--AsLClr);
color: var(--AdLClr); :hover {
:hover { color: var(--AsLHClr);
color: var(--AdLHClr); }
} }
} }
} &.warning {
&.error { background-color: var(--AwBgClr);
background-color: var(--AeBgClr); border-color: var(--AwBClr);
border-color: var(--AeBClr); color: var(--AwTClr);
color: var(--AeTClr); a, a:visited {
a, a:visited { color: var(--AwLClr);
color: var(--AeLClr); :hover {
:hover { color: var(--AwLHClr);
color: var(--AeLHClr); }
} }
}
&.caution {
background-color: var(--AcBgClr);
border-color: var(--AcBClr);
color: var(--AcTClr);
a, a:visited {
color: var(--AcLClr);
:hover {
color: var(--AcLHClr);
}
}
}
&.danger {
background-color: var(--AdBgClr);
border-color: var(--AdBClr);
color: var(--AdTClr);
a, a:visited {
color: var(--AdLClr);
:hover {
color: var(--AdLHClr);
}
}
}
&.error {
background-color: var(--AeBgClr);
border-color: var(--AeBClr);
color: var(--AeTClr);
a, a:visited {
color: var(--AeLClr);
:hover {
color: var(--AeLHClr);
}
}
} }
}
} }

View file

@ -1,37 +1,37 @@
input, textarea { input, textarea {
background-color: var(--InBgClr); background-color: var(--InBgClr);
color: var(--InTClr); color: var(--InTClr);
border: solid 0.1em var(--InBClr); border: solid 0.1em var(--InBClr);
text-decoration: none; text-decoration: none;
border-radius: 0.3em; border-radius: 0.3em;
padding: 0.2em 0.8em 0.2em 0.8em; padding: 0.2em 0.8em 0.2em 0.8em;
margin: 0.2em; margin: 0.2em;
font-size: 1rem; font-size: 1rem;
+ span.validity { + span.validity {
height: 1.5em; height: 1.5em;
width: 1.5ex; width: 1.5ex;
&:invalid { &:invalid {
border: solid 0.12em var(--AeBClr); border: solid 0.12em var(--AeBClr);
}
&:focus {
border: solid 0.1em var(--InBClr);
}
+ span.validity::after {
content: "✘";
color: var(--AeBClr);
}
} }
&:focus {
border: solid 0.1em var(--InBClr);
}
+ span.validity::after {
content: "✘";
color: var(--AeBClr);
}
}
&:valid { &:valid {
border: solid 0.12em var(--AsBClr); border: solid 0.12em var(--AsBClr);
&:focus { &:focus {
border: solid 0.1em var(--InBClr); border: solid 0.1em var(--InBClr);
}
+ span.validity::after {
content: "✓";
color: var(--AsBClr);
}
} }
+ span.validity::after {
content: "✓";
color: var(--AsBClr);
}
}
} }

View file

@ -1,53 +1,53 @@
// narrow desktop / iPad // narrow desktop / iPad
@media (max-width: var(--MQNarrow)) { @media (max-width: var(--MQNarrow)) {
.sidebar { .sidebar {
font-size: 1.1rem; font-size: 1.1rem;
width: var(--sidebarWidth); width: var(--sidebarWidth);
} }
.page { #page {
padding-left: 0; padding-left: 0;
} }
} }
// wide mobile // wide mobile
@media (max-width: var(--MQMobile)) { @media (max-width: var(--MQMobile)) {
.sidebar { .sidebar {
top: 0; top: 0;
transform: translateX(-100%); transform: translateX(-100%);
transition: transform .2s ease; transition: transform .2s ease;
margin-right: calc(0rem - var(--sidebarWidth)); margin-right: calc(0rem - var(--sidebarWidth));
}
.page {
padding-left: 0;
margin-left: 0;
}
.home-link {
text-align: right;
flex-grow: 1;
}
.theme-container {
&.sidebar-open {
.sidebar {
transform: translateX(0);
}
} }
&.no-navbar { #page {
.sidebar { padding-left: 0;
padding-top: 0; margin-left: 0;
} }
.home-link {
text-align: right;
flex-grow: 1;
}
.theme-container {
&.sidebar-open {
.sidebar {
transform: translateX(0);
}
}
&.no-navbar {
.sidebar {
padding-top: 0;
}
}
} }
}
} }
// narrow mobile // narrow mobile
@media (max-width: var(--MQMobileNarrow)) { @media (max-width: var(--MQMobileNarrow)) {
h1 { h1 {
font-size: 1.9rem; font-size: 1.9rem;
} }
.content { #content {
div[class*="language-"] { div[class*="language-"] {
margin: 0.85rem -1.5rem; margin: 0.85rem -1.5rem;
border-radius: 0; border-radius: 0;
}
} }
}
} }

View file

@ -1,203 +1,203 @@
@media print { @media print {
@page { @page {
margin: 0mm !important; margin: 0mm !important;
size: A4; size: A4;
orphans:4; orphans:4;
widows:3; widows:3;
}
.print-only {
display: block;
}
.no-print {
display: none !important;
div, section, span {
display: none !important;
}
}
main.content {
width: 100%;
margin: 0;
padding: 0;
}
.sidebar, .sidebar-mask, .nav-links,
.sidebar-button {
display: none;
}
html, body {
padding: 0;
margin: 0;
font-size: 11pt;
size: A4;
height: 297mm;
width: 210mm;
hyphens: auto;
hyphenate-character: "\2013";
-webkit-hyphenate-character: "\2013";
overflow-wrap: break-word;
word-break: break-word;
text-align: justify;
}
#main_layout_table {
> tbody {
overflow: hidden;
}
> tfoot {
display: table-footer-group !important;
}
> thead {
display: table-header-group !important;
}
> thead #layout_header {
display: inline-block;
height: calc(var(--PrintHeaderHeight) + 1rem + 10mm);
min-height: calc(var(--PrintHeaderHeight) + 1rem + 10mm);
}
> tfoot #layout_footer {
display: inline-block;
height: calc(var(--PrintFooterHeight) + 1rem + 10mm);
min-height: calc(var(--PrintFooterHeight) + 1rem + 10mm);
}
}
#app {
display: block !important;
flex-flow: row nowrap !important;
justify-content: normal !important;
> * {
flex-grow: 0 !important;
flex-basis: auto !important;
flex-shrink: 0 !important;
}
#appflex {
display: block !important;
flex-flow: row nowrap !important;
flex-grow: 0 !important;
flex-basis: auto !important;
justify-content: normal !important;
> * {
flex-grow: 0 !important;
flex-basis: auto !important;
flex-shrink: 0 !important;
}
} }
footer.footer { .print-only {
position: fixed !important; display: block;
bottom: 0; }
left: 0; .no-print {
margin: 0 10mm 0 10mm; display: none !important;
padding: 0 0 10mm 0; div, section, span {
width: calc(100% - 20mm); display: none !important;
height: var(--PrintFooterHeight); }
z-index: 1000; }
box-shadow: none;
p { main#content {
width: 100%;
margin: 0; margin: 0;
padding: 0.5em 0 0 0; padding: 0;
line-height: 1.2em !important;
}
p, h1, h2, h3, h4, h5, h6 {
text-indent: 0;
}
a[href*='//']:after {
content:"";
}
#pagecount {
float: right;
height: 2em;
font-weight: bold;
content: counter(page) "/" counter(pages);
}
} }
header.navbar { .sidebar, .sidebar-mask, .nav-links,
position: fixed !important; .sidebar-button {
box-shadow: none;
top: 0;
left: 0;
width: calc(100% - 20mm);
height: calc(var(--PrintHeaderHeight) + 10mm);
overflow: hidden;
z-index: 1000;
margin: 0 10mm 0 10mm;
padding: 10mm 0 0 0;
.home-link {
display: none; display: none;
}
} }
h1 { html, body {
column-span: all; padding: 0;
break-after: right; margin: 0;
text-align: center; font-size: 11pt;
margin-top: 25%; size: A4;
font-size: 3em; height: 297mm;
} width: 210mm;
h2 { hyphens: auto;
text-align: right; hyphenate-character: "\2013";
column-span: all; -webkit-hyphenate-character: "\2013";
break-before: page; overflow-wrap: break-word;
break-after: avoid; word-break: break-word;
padding-top: 0; text-align: justify;
} }
img, svg, h1, h2, h3, h4, h5, h6, span, a[data-lightbox] { #main_layout_table {
break-inside: avoid !important; > tbody {
} overflow: hidden;
h3, h4, h5, h6 { }
break-before: auto; > tfoot {
break-after: avoid-page; display: table-footer-group !important;
margin-bottom: 1.2em; }
} > thead {
pre, table, form, svg, .colspan { display: table-header-group !important;
column-span: all; }
margin-top: 1.5em; > thead #layout_header {
margin-bottom: 1.5em; display: inline-block;
} height: calc(var(--PrintHeaderHeight) + 1rem + 10mm);
.flexgroup, .postlist-style-flex { min-height: calc(var(--PrintHeaderHeight) + 1rem + 10mm);
display: block !important; }
flex-flow: row nowrap !important; > tfoot #layout_footer {
justify-content: normal !important; display: inline-block;
> * { height: calc(var(--PrintFooterHeight) + 1rem + 10mm);
border: none !important; min-height: calc(var(--PrintFooterHeight) + 1rem + 10mm);
box-shadow: none !important; }
flex-grow: 0 !important;
flex-basis: auto !important;
flex-shrink: 0 !important;
}
}
p, li, span, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
hyphens: auto !important;
hyphenate-character: "\2013";
-webkit-hyphenate-character: "\2013";
word-break: break-word;
}
p, h1, h2, h3, h4, h5, h6 {
text-indent: 1.2em;
} }
#app {
display: block !important;
flex-flow: row nowrap !important;
justify-content: normal !important;
> * {
flex-grow: 0 !important;
flex-basis: auto !important;
flex-shrink: 0 !important;
}
#appflex {
display: block !important;
flex-flow: row nowrap !important;
flex-grow: 0 !important;
flex-basis: auto !important;
justify-content: normal !important;
> * {
flex-grow: 0 !important;
flex-basis: auto !important;
flex-shrink: 0 !important;
}
}
a[href*='//']:after { footer.footer {
content:" [" attr(href) "]"; position: fixed !important;
font-style: italic; bottom: 0;
text-decoration: underline; left: 0;
} margin: 0 10mm 0 10mm;
padding: 0 0 10mm 0;
width: calc(100% - 20mm);
height: var(--PrintFooterHeight);
z-index: 1000;
box-shadow: none;
p {
margin: 0;
padding: 0.5em 0 0 0;
line-height: 1.2em !important;
}
p, h1, h2, h3, h4, h5, h6 {
text-indent: 0;
}
a[href*='//']:after {
content:"";
}
#pagecount {
float: right;
height: 2em;
font-weight: bold;
content: counter(page) "/" counter(pages);
}
}
.toctree-wrapper.compound, div.section, ul, ol, pre, blockquote, .admonition, form { header.navbar {
display: block; position: fixed !important;
box-shadow: none;
top: 0;
left: 0;
width: calc(100% - 20mm);
height: calc(var(--PrintHeaderHeight) + 10mm);
overflow: hidden;
z-index: 1000;
margin: 0 10mm 0 10mm;
padding: 10mm 0 0 0;
.home-link {
display: none;
}
}
h1 {
column-span: all;
break-after: right;
text-align: center;
margin-top: 25%;
font-size: 3em;
}
h2 {
text-align: right;
column-span: all;
break-before: page;
break-after: avoid;
padding-top: 0;
}
img, svg, h1, h2, h3, h4, h5, h6, span, a[data-lightbox] {
break-inside: avoid !important;
}
h3, h4, h5, h6 {
break-before: auto;
break-after: avoid-page;
margin-bottom: 1.2em;
}
pre, table, form, svg, .colspan {
column-span: all;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.flexgroup, .postlist-style-flex {
display: block !important;
flex-flow: row nowrap !important;
justify-content: normal !important;
> * {
border: none !important;
box-shadow: none !important;
flex-grow: 0 !important;
flex-basis: auto !important;
flex-shrink: 0 !important;
}
}
p, li, span, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
hyphens: auto !important;
hyphenate-character: "\2013";
-webkit-hyphenate-character: "\2013";
word-break: break-word;
}
p, h1, h2, h3, h4, h5, h6 {
text-indent: 1.2em;
}
a[href*='//']:after {
content:" [" attr(href) "]";
font-style: italic;
text-decoration: underline;
}
.toctree-wrapper.compound, div.section, ul, ol, pre, blockquote, .admonition, form {
display: block;
}
.toctree-wrapper.compound, div.section, ul, ol, pre, blockquote, .admonition, table, form {
height: min-content;
justify-self: normal;
justify-content: normal;
break-inside: auto;
break-before: auto;
break-after: auto;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
} }
.toctree-wrapper.compound, div.section, ul, ol, pre, blockquote, .admonition, table, form {
height: min-content;
justify-self: normal;
justify-content: normal;
break-inside: auto;
break-before: auto;
break-after: auto;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
}
} }

View file

@ -1,445 +1,445 @@
@import './wrapper.less'; @import './wrapper.less';
.navbar { .navbar {
padding: 0.7rem 1.5rem; padding: 0.7rem 1.5rem;
background: var(--NvBgClr); background: var(--NvBgClr);
color: var(--NvTClr);
a, span, img {
display: inline-block;
}
.logo {
margin-right: 0.8rem;
vertical-align: top;
}
.site-name {
font-size: 1.3rem;
font-weight: 600;
color: var(--NvTClr); color: var(--NvTClr);
} a, span, img {
.links { display: inline-block;
font-size: 0.9rem; }
right: 1.5rem; .logo {
top: 0.7rem; margin-right: 0.8rem;
} vertical-align: top;
}
#site-name {
font-size: 1.3rem;
font-weight: 600;
color: var(--NvTClr);
}
.links {
font-size: 0.9rem;
right: 1.5rem;
top: 0.7rem;
}
} }
.nav-links { .nav-links {
display: inline-block;
a, a:visited {
line-height: 1.4rem;
color: inherit;
&.link-active {
margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--NvAClr);
}
&:hover {
margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--NvLHClr);
}
}
.nav-item {
display: inline-block; display: inline-block;
margin-left: 1.5rem; a, a:visited {
line-height: 2rem; line-height: 1.4rem;
} color: inherit;
.repo-link { &.link-active {
margin-left: 1.5rem; margin-bottom: -0.2em;
} border-bottom: 0.2em solid var(--NvAClr);
.nav-links summary { }
&:hover, &.link-active { &:hover {
margin-bottom: -0.2em; margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--NvLClr); border-bottom: 0.2em solid var(--NvLHClr);
cursor: pointer; }
}
.nav-item {
display: inline-block;
margin-left: 1.5rem;
line-height: 2rem;
}
.repo-link {
margin-left: 1.5rem;
}
.nav-links summary {
&:hover, &.link-active {
margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--NvLClr);
cursor: pointer;
}
} }
}
} }
.icon.outbound { .icon.outbound {
color: var(--TClr); color: var(--TClr);
display: inline-block; display: inline-block;
} }
.page { #page {
padding-top: 0rem; padding-top: 0rem;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.page-nav { .page-nav {
.wrapper(); .wrapper();
padding-top: 1rem;
padding-bottom: 0;
.inner {
min-height: 2rem;
margin-top: 0;
border-top: 0.1em solid var(--BClr);
padding-top: 1rem; padding-top: 1rem;
overflow: auto // clear float; padding-bottom: 0;
} .inner {
.next { min-height: 2rem;
float: right; margin-top: 0;
} border-top: 0.1em solid var(--BClr);
padding-top: 1rem;
overflow: auto // clear float;
}
.next {
float: right;
}
} }
.sidebar { .sidebar {
font-size: 0.95em; font-size: 0.95em;
background-color: var(--SdBgClr); background-color: var(--SdBgClr);
width: var(--sidebarWidth); width: var(--sidebarWidth);
min-height: 100%; min-height: 100%;
z-index: 10; z-index: 10;
box-sizing: border-box;
border-right: 0.2em solid var(--SdBClr);
box-shadow: 0 0 var(--SdBClr), -0.3em 0.1em 0.2em 0.3em var(--NvBgClr);
padding-left: 1em;
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
a, a:visited {
display: inline-block;
}
.nav-links {
display: none;
border-bottom: 0.3em solid var(--SdBClr);
padding: 0.5rem 0 0.75rem 0;
a, a:visited {
font-weight: 600;
}
.nav-item, .repo-link {
display: block;
line-height: 1.25rem;
font-size: 1.1em;
padding: 0.5rem 0 0.5rem 1.5rem;
}
}
.searchbox {
font-weight: 600;
font-size: 1.1em;
line-height: 1.5rem;
padding: 1rem 0 1.5rem 1.5rem;
border-bottom: 0.1em solid var(--BClr);
input[type='text'] {
width: calc(var(--sidebarWidth) - 4.5rem) !important;
margin-right: 1.5em;
}
}
.sidebar-links {
padding: 1.5rem 0;
}
.toctree-l1 a, .toctree-l2 a, .toctree-l3 a, .toctree-l4 a {
font-weight: 400;
display: inline-block;
color: var(--SdTClr);
line-height: 1.4;
width: 100%;
box-sizing: border-box; box-sizing: border-box;
border-left: 0.5rem solid transparent; border-right: 0.2em solid var(--SdBClr);
&.current { box-shadow: 0 0 var(--SdBClr), -0.3em 0.1em 0.2em 0.3em var(--NvBgClr);
color: var(--SdAClr); padding-left: 1em;
font-weight: 600;
ul {
padding: 0;
margin: 0;
list-style-type: none;
} }
&:hover { a, a:visited {
color: var(--SdLHClr); display: inline-block;
}
.nav-links {
display: none;
border-bottom: 0.3em solid var(--SdBClr);
padding: 0.5rem 0 0.75rem 0;
a, a:visited {
font-weight: 600;
}
.nav-item, .repo-link {
display: block;
line-height: 1.25rem;
font-size: 1.1em;
padding: 0.5rem 0 0.5rem 1.5rem;
}
}
.searchbox {
font-weight: 600;
font-size: 1.1em;
line-height: 1.5rem;
padding: 1rem 0 1.5rem 1.5rem;
border-bottom: 0.1em solid var(--BClr);
input[type='text'] {
width: calc(var(--sidebarWidth) - 4.5rem) !important;
margin-right: 1.5em;
}
}
.sidebar-links {
padding: 1.5rem 0;
}
.toctree-l1 a, .toctree-l2 a, .toctree-l3 a, .toctree-l4 a {
font-weight: 400;
display: inline-block;
color: var(--SdTClr);
line-height: 1.4;
width: 100%;
box-sizing: border-box;
border-left: 0.5rem solid transparent;
&.current {
color: var(--SdAClr);
font-weight: 600;
}
&:hover {
color: var(--SdLHClr);
}
} }
}
} }
.sidebar-group .caption { .sidebar-group .caption {
color: var(--SdT2Clr); color: var(--SdT2Clr);
transition: color .15s ease; transition: color .15s ease;
cursor: pointer; cursor: pointer;
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
padding: 0 1.5rem; padding: 0 1.5rem;
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
&.open, &:hover { &.open, &:hover {
color: inherit; color: inherit;
} }
.arrow { .arrow {
top: -0.12em; top: -0.12em;
left: 0.5em; left: 0.5em;
} }
&.open .arrow { &.open .arrow {
top: -0.18em; top: -0.18em;
} }
} }
.sidebar .toctree-l1 ul { .sidebar .toctree-l1 ul {
font-size: 0.95em; font-size: 0.95em;
} }
.toctree-l1.current a { .toctree-l1.current a {
border-left: .5rem solid var(--SdA2Clr); border-left: .5rem solid var(--SdA2Clr);
} }
.toctree-l1 a { .toctree-l1 a {
padding: 0.35rem 1rem 0.35rem 1.25rem; padding: 0.35rem 1rem 0.35rem 1.25rem;
&.current { &.current {
border-left-color: var(--SdAClr); border-left-color: var(--SdAClr);
} }
} }
.toctree-l2 a { .toctree-l2 a {
padding: 0.25rem 1rem 0.25rem 1.75rem; padding: 0.25rem 1rem 0.25rem 1.75rem;
} }
.toctree-l3 a { .toctree-l3 a {
padding: 0.15rem 1rem 0.15rem 1.75rem; padding: 0.15rem 1rem 0.15rem 1.75rem;
} }
.toctree-l4 a { .toctree-l4 a {
padding: 0.05rem 1rem 0.05rem 1.75rem; padding: 0.05rem 1rem 0.05rem 1.75rem;
} }
.home { .home {
padding: var(--navbarHeight) 2rem 0; padding: var(--navbarHeight) 2rem 0;
max-width: 96em; max-width: 96em;
margin: 0 auto; margin: 0 auto;
.hero { .hero {
text-align: center; text-align: center;
img { img {
max-height: 28em; max-height: 28em;
display: block; display: block;
margin: 3rem auto 1.5rem; margin: 3rem auto 1.5rem;
}
h1 {
font-size: 3rem;
}
h1, .description, .action {
margin: 1.8rem auto;
}
.description {
max-width: 35rem;
font-size: 1.6rem;
line-height: 1.3;
color: var(--T2Clr);
}
} }
h1 { .footer {
font-size: 3rem; padding: 2.5rem;
border-top: 0.1em solid var(--BClr);
text-align: center;
color: var(--FoTClr);
} }
h1, .description, .action {
margin: 1.8rem auto;
}
.description {
max-width: 35rem;
font-size: 1.6rem;
line-height: 1.3;
color: var(--T2Clr);
}
}
.footer {
padding: 2.5rem;
border-top: 0.1em solid var(--BClr);
text-align: center;
color: var(--FoTClr);
}
} }
.sidebar-button { .sidebar-button {
display: none; display: none;
width: 1.65rem; width: 1.65rem;
height: 1.65rem; height: 1.65rem;
padding: 0.2rem; padding: 0.2rem;
border: 0.1em solid var(--NvBClr) !important; border: 0.1em solid var(--NvBClr) !important;
border-radius: 0.1em !important; border-radius: 0.1em !important;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
svg { svg {
display: block; display: block;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
fill: var(--NvTClr); fill: var(--NvTClr);
} }
} }
.sidebar-group { .sidebar-group {
&:not(.first) { &:not(.first) {
margin-top: 1em; margin-top: 1em;
} }
.sidebar-group { .sidebar-group {
padding-left: 0.5em; padding-left: 0.5em;
} }
&:not(.collapsable) { &:not(.collapsable) {
.sidebar-heading { .sidebar-heading {
cursor: auto; cursor: auto;
color: inherit; color: inherit;
}
} }
}
} }
.sidebar-heading { .sidebar-heading {
color: var(--SdTClr); color: var(--SdTClr);
transition: color .15s ease; transition: color .15s ease;
cursor: pointer; cursor: pointer;
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
padding: 0 1.5rem; padding: 0 1.5rem;
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
&.open, &:hover { &.open, &:hover {
color: inherit; color: inherit;
} }
.arrow { .arrow {
top: -0.12em; top: -0.12em;
left: 0.5em; left: 0.5em;
} }
&.open .arrow { &.open .arrow {
top: -0.18em; top: -0.18em;
} }
} }
.sidebar-group-items { .sidebar-group-items {
transition: height .1s ease-out; transition: height .1s ease-out;
overflow: hidden; overflow: hidden;
} }
.sidebar .sidebar-sub-headers { .sidebar .sidebar-sub-headers {
padding-left: 1rem; padding-left: 1rem;
font-size: 0.95em; font-size: 0.95em;
} }
a.sidebar-link, a:visited.sidebar-link { a.sidebar-link, a:visited.sidebar-link {
font-weight: 400; font-weight: 400;
display: inline-block; display: inline-block;
color: var(--SdLClr); color: var(--SdLClr);
border-left: 0.25rem solid transparent; border-left: 0.25rem solid transparent;
padding: 0.35rem 1rem 0.35rem 1.25rem; padding: 0.35rem 1rem 0.35rem 1.25rem;
line-height: 1.4; line-height: 1.4;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
&:hover { &:hover {
color: var(--SdLHClr); color: var(--SdLHClr);
} }
&.active { &.active {
font-weight: 600; font-weight: 600;
color: var(--SdAClr); color: var(--SdAClr);
border-left-color: var(--SdAClr); border-left-color: var(--SdAClr);
} }
.sidebar-group & { .sidebar-group & {
padding-left: 2rem; padding-left: 2rem;
} }
.sidebar-sub-headers & { .sidebar-sub-headers & {
padding-top: 0.25rem; padding-top: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
border-left: none; border-left: none;
&.active { &.active {
font-weight: 500; font-weight: 500;
}
} }
}
} }
@media (max-width: var(--MQMobile)) { @media (max-width: var(--MQMobile)) {
.navbar { .navbar {
.can-hide { .can-hide {
display: none; display: none;
}
} }
}
.nav-links {
.nav-item, .repo-link {
margin-left: 0;
}
}
.sidebar {
z-index: 9;
.nav-links { .nav-links {
display: block; .nav-item, .repo-link {
margin-left: 0;
}
} }
.sidebar-links {
padding: 1rem 0;
}
&[opened] {
transform: translateX(0%);
transition: transform .2s ease;
}
}
.nav-links details { .sidebar {
summary { z-index: 9;
font-size: 1.2em; .nav-links {
font-weight: bold; display: block;
margin-bottom: 0.2em; }
.sidebar-links {
padding: 1rem 0;
}
&[opened] {
transform: translateX(0%);
transition: transform .2s ease;
}
} }
font-size: 0.9em;
font-weight: normal; .nav-links details {
ul li.nav-link { summary {
margin-left: 2.4em; font-size: 1.2em;
a, a:visited, a:focus { font-weight: bold;
margin-bottom: 0.2em;
}
font-size: 0.9em;
font-weight: normal; font-weight: normal;
} ul li.nav-link {
margin-left: 2.4em;
a, a:visited, a:focus {
font-weight: normal;
}
}
} }
}
.sidebar-button { .sidebar-button {
display: inline; display: inline;
} }
} }
@media (min-width: var(--MQMobile)) { @media (min-width: var(--MQMobile)) {
.nav-links a, .nav-links a:visited { .nav-links a, .nav-links a:visited {
&:hover, &.link-active { &:hover, &.link-active {
color: var(--NvLClr); color: var(--NvLClr);
}
} }
} .nav-item > a:not(.external),
.nav-item > a:not(.external), .nav-item > a:visited:not(.external) {
.nav-item > a:visited:not(.external) { &:hover, &.link-active {
&:hover, &.link-active { margin-bottom: -0.2em;
margin-bottom: -0.2em; border-bottom: 0.2em solid var(--NvBClr);
border-bottom: 0.2em solid var(--NvBClr); color: var(--NvLHClr);
color: var(--NvLHClr); }
} }
}
} }
@media (min-width: var(--MQMobile)) { @media (min-width: var(--MQMobile)) {
.nav-links summary { .nav-links summary {
cursor: pointer; cursor: pointer;
color: var(--NvLClr); color: var(--NvLClr);
&.link-active, .link-active { &.link-active, .link-active {
color: var(--NvAClr); color: var(--NvAClr);
margin-bottom: -0.2em; margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--NvAClr); border-bottom: 0.2em solid var(--NvAClr);
}
&:hover {
color: var(--NvLHClr);
margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--NvLHClr);
}
} }
&:hover { .nav-item > a:not(.external),
color: var(--NvLHClr); .nav-item > a:visited:not(.external) {
margin-bottom: -0.2em; &.link-active {
border-bottom: 0.2em solid var(--NvLHClr); margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--NvAClr);
}
&:hover {
margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--NvLHClr);
}
} }
}
.nav-item > a:not(.external),
.nav-item > a:visited:not(.external) {
&.link-active {
margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--NvAClr);
}
&:hover {
margin-bottom: -0.2em;
border-bottom: 0.2em solid var(--NvLHClr);
}
}
} }
@media (max-width: var(--MQMobileNarrow)) { @media (max-width: var(--MQMobileNarrow)) {
.home { .home {
padding-left: 1.5rem; padding-left: 1.5rem;
padding-right: 1.5rem; padding-right: 1.5rem;
.hero { .hero {
img { img {
max-height: 21em; max-height: 21em;
margin: 2rem auto 1.2rem; margin: 2rem auto 1.2rem;
} }
h1 { h1 {
font-size: 2rem; font-size: 2rem;
} }
h1, .description, .action { h1, .description, .action {
margin: 1.2rem auto; margin: 1.2rem auto;
} }
.description { .description {
font-size: 1.2rem; font-size: 1.2rem;
} }
}
} }
}
} }
@media (min-width: calc(var(--MQMobile) + 0.2ex)) { @media (min-width: calc(var(--MQMobile) + 0.2ex)) {
.theme-container.no-sidebar { .theme-container.no-sidebar {
.sidebar { .sidebar {
display: none; display: none;
}
#page {
padding-left: 0;
}
img.align-right, figure.align-right {
float: none;
margin-left: auto;
margin-right: auto;
}
} }
.page {
padding-left: 0;
}
img.align-right, figure.align-right {
float: none;
margin-left: auto;
margin-right: auto;
}
}
} }

View file

@ -1,245 +1,245 @@
.content .section { #content .section {
margin-bottom: 0; margin-bottom: 0;
&:hover { &:hover {
.headerlink { .headerlink {
opacity: 1; opacity: 1;
}
} }
}
} }
.content { #content {
// FIXME: sphinx should provide a citation-reference? // FIXME: sphinx should provide a citation-reference?
& a:focus { & a:focus {
// remove outline because padding mess it up // remove outline because padding mess it up
outline: none; outline: none;
} }
} }
/* Use # as symbol for anchor headerlinks */ /* Use # as symbol for anchor headerlinks */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
&:hover a.headerlink, &:hover a:visited.headerlink { &:hover a.headerlink, &:hover a:visited.headerlink {
&::after { &::after {
visibility: visible; visibility: visible;
content: "#"; content: "#";
}
} }
}
} }
a.headerlink, a:visited.headerlink { a.headerlink, a:visited.headerlink {
font-size: 0.85em; font-size: 0.85em;
visibility: hidden; visibility: hidden;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
} }
ul.page-nav { ul.page-nav {
list-style: none; list-style: none;
& li { & li {
display: inline-block; display: inline-block;
} }
} }
.body-header { .action-bar {
display: flex; display: flex;
& ul.page-nav { & ul.page-nav {
flex-grow: 1; flex-grow: 1;
list-style: none; list-style: none;
list-style-position: inside; list-style-position: inside;
text-align: right; text-align: right;
margin-right: 2em; margin-right: 2em;
& li + li:before { & li + li:before {
content: "|"; content: "|";
padding: 0 1em; padding: 0 1em;
}
} }
}
} }
ul.breadcrumbs { ul.breadcrumbs {
list-style: none; list-style: none;
& li { & li {
display: inline-block; display: inline-block;
} }
} }
/** index page **/ /** index page **/
.toctree-wrapper .caption { .toctree-wrapper .caption {
// same as h2 // same as h2
font-weight: 600; font-weight: 600;
line-height: 1.25em; line-height: 1.25em;
font-size: 1.65rem; font-size: 1.65rem;
padding-bottom: .3rem; padding-bottom: .3rem;
border-bottom: 0.1em solid var(--BClr); border-bottom: 0.1em solid var(--BClr);
} }
/** footer **/ /** footer **/
.footer { .footer {
clear: both; clear: both;
min-height: 2rem; min-height: 2rem;
padding-top: 1rem; padding-top: 1rem;
color: var(--FoTClr); color: var(--FoTClr);
font-size: small; font-size: small;
line-height: 1.5rem; line-height: 1.5rem;
} }
/** pygments style **/ /** pygments style **/
.content .highlight { #content .highlight {
border-radius: 0.5em; border-radius: 0.5em;
} }
// force background color from pygments // force background color from pygments
.content .highlight pre { #content .highlight pre {
background-color: inherit; background-color: inherit;
} }
.content .highlighted { #content .highlighted {
background-color: var(--AClr); //#fbe54e; background-color: var(--AClr); //#fbe54e;
font-weight: bold; font-weight: bold;
padding: 0 4px; padding: 0 4px;
} }
/*** admonitions based on custom-blocks.styl */ /*** admonitions based on custom-blocks.styl */
.admonition { .admonition {
padding: .1rem 1.5rem; padding: .1rem 1.5rem;
border-left-width: .5rem; border-left-width: .5rem;
border-left-style: solid; border-left-style: solid;
box-decoration-break: clone; box-decoration-break: clone;
-webkit-box-decoration-break: clone; -webkit-box-decoration-break: clone;
height: min-content; height: min-content;
margin: 1rem 0; margin: 1rem 0;
// default color // default color
background-color: var(--AaBgClr); background-color: var(--AaBgClr);
border-color: var(--AaBClr); border-color: var(--AaBClr);
color: var(--AaTClr); color: var(--AaTClr);
a, a:visited { a, a:visited {
color: var(--AaLClr); color: var(--AaLClr);
&:hover { &:hover {
color: var(--AaLHClr); color: var(--AaLHClr);
}
} }
}
.admonition-title { .admonition-title {
font-weight: 600; font-weight: 600;
margin-bottom: -0.4rem; margin-bottom: -0.4rem;
}
&.success {
background-color: var(--AsBgClr);
border-color: var(--AsBClr);
color: var(--AsTClr);
a, a:visited {
color: var(--AsLClr);
&:hover {
color: var(--AsLHClr);
}
} }
} &.success {
&.hint { background-color: var(--AsBgClr);
background-color: var(--AhBgClr); border-color: var(--AsBClr);
border-color: var(--AhBClr); color: var(--AsTClr);
color: var(--AhTClr); a, a:visited {
a, a:visited { color: var(--AsLClr);
color: var(--AhLClr); &:hover {
&:hover { color: var(--AsLHClr);
color: var(--AhLHClr); }
} }
} }
} &.hint {
&.tip { background-color: var(--AhBgClr);
background-color: var(--AtBgClr); border-color: var(--AhBClr);
border-color: var(--AtBClr); color: var(--AhTClr);
color: var(--AtTClr); a, a:visited {
a, a:visited { color: var(--AhLClr);
color: var(--AtLClr); &:hover {
&:hover { color: var(--AhLHClr);
color: var(--AtLHClr); }
} }
} }
} &.tip {
&.important { background-color: var(--AtBgClr);
background-color: var(--AiBgClr); border-color: var(--AtBClr);
border-color: var(--AiBClr); color: var(--AtTClr);
color: var(--AiTClr); a, a:visited {
a, a:visited { color: var(--AtLClr);
color: var(--AiLClr); &:hover {
&:hover { color: var(--AtLHClr);
color: var(--AiLHClr); }
} }
} }
} &.important {
&.note { background-color: var(--AiBgClr);
background-color: var(--AnBgClr); border-color: var(--AiBClr);
border-color: var(--AnBClr); color: var(--AiTClr);
color: var(--AnTClr); a, a:visited {
a, a:visited { color: var(--AiLClr);
color: var(--AnLClr); &:hover {
&:hover { color: var(--AiLHClr);
color: var(--AnLHClr); }
} }
} }
} &.note {
&.warning { background-color: var(--AnBgClr);
background-color: var(--AwBgClr); border-color: var(--AnBClr);
border-color: var(--AwBClr); color: var(--AnTClr);
color: var(--AwTClr); a, a:visited {
a, a:visited { color: var(--AnLClr);
color: var(--AwLClr); &:hover {
&:hover { color: var(--AnLHClr);
color: var(--AwLHClr); }
} }
} }
} &.warning {
&.danger { background-color: var(--AwBgClr);
background-color: var(--AdBgClr); border-color: var(--AwBClr);
border-color: var(--AdBClr); color: var(--AwTClr);
color: var(--AdTClr); a, a:visited {
a, a:visited { color: var(--AwLClr);
color: var(--AdLClr); &:hover {
&:hover { color: var(--AwLHClr);
color: var(--AdLHClr); }
} }
} }
} &.danger {
&.caution { background-color: var(--AdBgClr);
background-color: var(--AcBgClr); border-color: var(--AdBClr);
border-color: var(--AcBClr); color: var(--AdTClr);
color: var(--AcTClr); a, a:visited {
a, a:visited { color: var(--AdLClr);
color: var(--AcLClr); &:hover {
&:hover { color: var(--AdLHClr);
color: var(--AcLHClr); }
} }
} }
} &.caution {
&.danger { background-color: var(--AcBgClr);
background-color: var(--AdBgClr); border-color: var(--AcBClr);
border-color: var(--AdBClr); color: var(--AcTClr);
color: var(--AdTClr); a, a:visited {
a, a:visited { color: var(--AcLClr);
color: var(--AdLClr); &:hover {
&:hover { color: var(--AcLHClr);
color: var(--AdLHClr); }
} }
}
&.danger {
background-color: var(--AdBgClr);
border-color: var(--AdBClr);
color: var(--AdTClr);
a, a:visited {
color: var(--AdLClr);
&:hover {
color: var(--AdLHClr);
}
}
} }
}
} }
blockquote { blockquote {
background-color: var(--BqBgClr); background-color: var(--BqBgClr);
border-color: var(--BqBClr); border-color: var(--BqBClr);
box-decoration-break: clone; box-decoration-break: clone;
-webkit-box-decoration-break: clone; -webkit-box-decoration-break: clone;
margin-left: -0.4rem; margin-left: -0.4rem;
color: var(--BqTClr); color: var(--BqTClr);
a, a:visited { a, a:visited {
color: var(--BqLClr); color: var(--BqLClr);
&:hover { &:hover {
color: var(--BqLHClr); color: var(--BqLHClr);
}
} }
}
} }

View file

@ -1,5 +1,5 @@
.table-of-contents { .table-of-contents {
.badge { .badge {
vertical-align: middle; vertical-align: middle;
} }
} }

View file

@ -1,6 +1,6 @@
.wrapper { .wrapper {
max-width: var(--contentWidth); max-width: var(--contentWidth);
margin: 0 auto; margin: 0 auto;
padding: 2rem 2.5rem; padding: 2rem 2.5rem;
} }

View file

@ -1,11 +1,11 @@
.wrapper { .wrapper {
max-width: var(--contentWidth); max-width: var(--contentWidth);
margin: 0 auto; margin: 0 auto;
padding: 2rem 2.5rem; padding: 2rem 2.5rem;
@media (max-width: var(--MQNarrow)) { @media (max-width: var(--MQNarrow)) {
padding: 2rem; padding: 2rem;
} }
@media (max-width: var(--MQMobileNarrow)) { @media (max-width: var(--MQMobileNarrow)) {
padding: 1.5rem; padding: 1.5rem;
} }
} }

View file

@ -5,6 +5,12 @@ const {t} = useI18n({useScope: 'local'});
</script> </script>
<template> <template>
<div class="admonition danger" v-if="$route.params.errorPath" role="alert">
<p class="admonition-title">{{ t('apps.not_found') }}</p>
<p>
{{ t('apps.route_not_found', {route: $route.params.errorPath.join('/')}) }}
</p>
</div>
<h1>{{ t('apps.communication') }}</h1> <h1>{{ t('apps.communication') }}</h1>
<h1>{{ t('apps.accounting') }}</h1> <h1>{{ t('apps.accounting') }}</h1>
<h1>{{ t('apps.ordering') }}</h1> <h1>{{ t('apps.ordering') }}</h1>

View file

@ -1,20 +1,20 @@
<template> <template>
<div v-if="offlineReady || needRefresh" role="alert"> <div v-if="offlineReady || needRefresh" role="alert">
<div class="admonition warning"> <div class="admonition warning">
<span v-if="offlineReady"> <p v-if="offlineReady">
{{ t('pwa.ready') }} {{ t('pwa.ready') }}
</span> </p>
<span v-else> <p v-else>
{{ t('pwa.new_content') }} {{ t('pwa.new_content') }}
</span> </p>
</div> <div class="">
<div class=""> <button v-if="needRefresh" @click="updateServiceWorker()">
<button v-if="needRefresh" @click="updateServiceWorker()"> {{ t('pwa.reload') }}
{{ t('pwa.reload') }} </button>
</button> <button @click="close">
<button @click="close"> {{ t('pwa.close') }}
{{ t('pwa.close') }} </button>
</button> </div>
</div> </div>
</div> </div>
</template> </template>

View file

@ -1,10 +1,12 @@
{ {
"apps": { "apps": {
"communication": "", "communication": "Communication",
"accounting": "", "accounting": "Accounting",
"ordering": "", "ordering": "Ordering",
"stocks": "", "stocks": "Stocks",
"monitoring": "" "monitoring": "Monitoring",
"not_found": "Page not found",
"route_not_found": "Url {route} does not exist."
}, },
"home": { "home": {
"apps": "Applications" "apps": "Applications"

View file

@ -4,7 +4,9 @@
"accounting": "Comptabilité", "accounting": "Comptabilité",
"ordering": "Commande", "ordering": "Commande",
"stocks": "Stocks", "stocks": "Stocks",
"monitoring": "Veille" "monitoring": "Veille",
"not_found": "Page introuvable",
"route_not_found": "La route {route} n'existe pas."
}, },
"home": { "home": {
"apps": "Applications" "apps": "Applications"

View file

@ -7,8 +7,36 @@ const Apps = () => import('./components/NervTNApps.vue');
const Dashboard = () => import('./components/Dashboard.vue'); const Dashboard = () => import('./components/Dashboard.vue');
const routes = [ const routes = [
{path: '/', component: Dashboard}, {
{path: '/apps', component: Apps} path: '/',
name: "Dashboard",
components: {
default: Dashboard,
//Links: {},
//Sidebar: {},
//ActionBar: {}
}
},
{
path: '/apps',
name: "Apps",
components: {
default: Apps,
//Links: {},
//Sidebar: {},
//ActionBar: {}
}
},
{
path: '/:errorPath(.*)*',
name: "NotFound",
components: {
default: Apps,
//Links: {},
//Sidebar: {},
//ActionBar: {}
}
}
]; ];
const router = VueRouter.createRouter({ const router = VueRouter.createRouter({