nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

i18n: full support for RTL #470

Browse source
This commit is contained in:
Sören Weber 2023-02-10 00:34:47 +01:00
parent 890d12ea92
commit d62e2f7e0e
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
15 changed files with 276 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -21,7 +21,7 @@ The theme is a fork of the great [Learn theme](https://github.com/matcornic/hugo
- Support for GFM (GitHub Flavored Markdown) - Support for GFM (GitHub Flavored Markdown)
- Print whole chapters or even the complete site - Print whole chapters or even the complete site
- Multilingual mode for English, Arabic, Simplified Chinese, Traditional Chinese, Czech, Dutch, Finnish, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese - Multilingual mode for English, Arabic, Simplified Chinese, Traditional Chinese, Czech, Dutch, Finnish, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese
- Support for languages written right to left - Full support for languages written right to left
- Unrestricted menu configuration relating to amount of items and level of nesting - Unrestricted menu configuration relating to amount of items and level of nesting
- Font Awesome icons - Font Awesome icons
- Tagging support - Tagging support

2
exampleSite/content/_index.en.md
View file

@ -26,7 +26,7 @@ See [What's New]({{% relref "basics/migration" %}}) within the latest update.
- [Support for GFM]({{% relref "cont/markdown" %}}) (GitHub Flavored Markdown) - [Support for GFM]({{% relref "cont/markdown" %}}) (GitHub Flavored Markdown)
- [Print]({{%relref "basics/configuration#activate-print-support" %}}) whole chapters or even the complete site - [Print]({{%relref "basics/configuration#activate-print-support" %}}) whole chapters or even the complete site
- [Multilingual mode]({{%relref "cont/i18n" %}}) for English, Arabic, Simplified Chinese, Traditional Chinese, Czech, Dutch, Finnish, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese - [Multilingual mode]({{%relref "cont/i18n" %}}) for English, Arabic, Simplified Chinese, Traditional Chinese, Czech, Dutch, Finnish, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese
- Support for languages written right to left - Full support for languages written right to left
- [Unrestricted menu configuration]({{%relref "cont/menushortcuts" %}}) relating to amount of items and level of nesting - [Unrestricted menu configuration]({{%relref "cont/menushortcuts" %}}) relating to amount of items and level of nesting
- [Font Awesome icons]({{%relref "shortcodes/icon" %}}) - [Font Awesome icons]({{%relref "shortcodes/icon" %}})
- [Tagging support]({{%relref "cont/tags" %}}) - [Tagging support]({{%relref "cont/tags" %}})

2
exampleSite/content/basics/migration/_index.en.md
View file

@ -20,7 +20,7 @@ This document shows you what's new in the latest release. For a detailed list of
## 5.12.0 (not yet released) ## 5.12.0 (not yet released)
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Support for languages that are written right to left (like Arabic) is expanded to the top navigation bar. This feature is not available in Internet Explorer 11. - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Support for languages that are written right to left (like Arabic) is now complete and extended to the menu, the top navigation bar and print. This feature is not available in Internet Explorer 11.
--- ---

2
exampleSite/content/cont/i18n/_index.en.md
View file

@ -8,7 +8,7 @@ The Relearn theme is fully compatible with Hugo multilingual mode.
It provides: It provides:
- Translation strings for default values (English, Arabic, Simplified Chinese, Traditional Chinese, Czech, Dutch, Finnish French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese). Feel free to contribute! - Translation strings for default values (English, Arabic, Simplified Chinese, Traditional Chinese, Czech, Dutch, Finnish French, German, Hindi, Indonesian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Spanish, Turkish, Vietnamese). Feel free to contribute!
- Support for languages written right to left - Full support for languages written right to left
- Automatic menu generation from multilingual content - Automatic menu generation from multilingual content
- In-browser language switching - In-browser language switching

2
exampleSite/layouts/partials/toc.html
View file

@ -1,5 +1,5 @@
<div class="default-animation progress"> <div class="default-animation progress">
<div class="toc-wrapper" dir="{{ T "Reading-direction" | default "ltr" }}"> <div class="toc-wrapper">
{{- partial "shortcodes/piratify.html" (dict {{- partial "shortcodes/piratify.html" (dict
"context" . "context" .
"pagefield" "TableOfContents" "pagefield" "TableOfContents"

10
layouts/partials/logo.html
View file

@ -25,7 +25,7 @@
} }
#logo svg { #logo svg {
margin-bottom: -20px; margin-bottom: -20px;
margin-left: -23.5px; margin-inline-start: -23.5px;
width: 40.5%; width: 40.5%;
} }
@media only all and (max-width: 59.938em) { @media only all and (max-width: 59.938em) {
@ -35,7 +35,7 @@
} }
#logo svg { #logo svg {
margin-bottom: -12px; margin-bottom: -12px;
margin-left: -23px; margin-inline-start: -23px;
} }
} }
@media all and (-ms-high-contrast:none) { @media all and (-ms-high-contrast:none) {
@ -45,6 +45,12 @@
} }
#logo svg { #logo svg {
margin-bottom: -62px; margin-bottom: -62px;
margin-left: -23.5px;
}
}
@media only all and (-ms-high-contrast:none) and (max-width: 59.938em) {
#logo svg {
margin-left: -23px;
} }
} }
</style> </style>

2
layouts/partials/menu.html
View file

@ -6,7 +6,7 @@
{{- if ne $outputFormat "html" }} {{- if ne $outputFormat "html" }}
{{- $basename = partial "BaseName.hugo" $format.RelPermalink }} {{- $basename = partial "BaseName.hugo" $format.RelPermalink }}
{{- end }} {{- end }}
<aside id="sidebar" class="default-animation{{ if $showvisitedlinks }} showVisitedLinks{{ end }}" dir="ltr"> <aside id="sidebar" class="default-animation{{ if $showvisitedlinks }} showVisitedLinks{{ end }}">
{{- $currentNode := . }} {{- $currentNode := . }}
<div id="header-wrapper" class="default-animation"> <div id="header-wrapper" class="default-animation">
<div id="header" class="default-animation"> <div id="header" class="default-animation">

12
layouts/partials/stylesheet.html
View file

@ -8,26 +8,26 @@
{{- $assetBusting := not .Site.Params.disableAssetsBusting }} {{- $assetBusting := not .Site.Params.disableAssetsBusting }}
{{ "<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->" | safeHTML }} {{ "<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->" | safeHTML }}
<link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript> <link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
<link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript> <link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
<link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript> <link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
<link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{- $autotemplate := resources.Get "css/theme-auto.css" }}
{{- $autocss := $autotemplate | resources.ExecuteAsTemplate "css/theme-auto.css" .Site.Home }}
{{- $c := "" }}<!-- cause Hugo to generate our theme-auto.css -->
{{- $c = "" }}<!-- link href="{{ $autocss.RelPermalink }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"-->
{{- $themevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }} {{- $themevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }}
{{- with index $themevariants 0 }} {{- with index $themevariants 0 }}
<link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="variant-style"> <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="variant-style">
{{- end }} {{- end }}
<link href="{{"css/ie.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print"> <link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print">
{{- $f := printf "/static/css/format-%s.css" $outputFormat }} {{- $f := printf "/static/css/format-%s.css" $outputFormat }}
{{- if partialCached "fileExists.hugo" $f $f }} {{- if partialCached "fileExists.hugo" $f $f }}
<link href="{{(printf "css/format-%s.css" $outputFormat) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{(printf "css/format-%s.css" $outputFormat) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{- end }} {{- end }}
{{- $autotemplate := resources.Get "css/theme-auto.css" }} <link href="{{"css/ie.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{- $autocss := $autotemplate | resources.ExecuteAsTemplate "css/theme-auto.css" .Site.Home }}
{{- $c := "" }}<!-- cause Hugo to generate our theme-auto.css -->
{{- $c = "" }}<!-- link href="{{ $autocss.RelPermalink }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"-->
<script src="{{"js/url.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script> <script src="{{"js/url.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/variant.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script> <script src="{{"js/variant.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script> <script>

2
layouts/partials/toc.html
View file

@ -1,5 +1,5 @@
<div class="default-animation progress"> <div class="default-animation progress">
<div class="toc-wrapper" dir="{{ T "Reading-direction" | default "ltr" }}"> <div class="toc-wrapper">
{{- .TableOfContents }} {{- .TableOfContents }}
</div> </div>
</div> </div>

2
static/css/auto-complete.css
View file

@ -1,5 +1,5 @@
.autocomplete-suggestions { .autocomplete-suggestions {
text-align: left; text-align: start;
cursor: default; cursor: default;
border: 1px solid #ccc; border: 1px solid #ccc;
border-top: 0; border-top: 0;

9
static/css/format-print.css
View file

@ -20,13 +20,8 @@ body {
background-color: white; background-color: white;
} }
code.copy-to-clipboard-code { code.copy-to-clipboard-code {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-right-width: 1px;
}
span > code.copy-to-clipboard-code {
border-end-end-radius: 2px;
border-start-end-radius: 2px; border-start-end-radius: 2px;
border-end-end-radius: 2px;
border-inline-end-width: 1px; border-inline-end-width: 1px;
} }
pre { pre {
@ -36,9 +31,9 @@ pre {
background-color: #fff; /* avoid background bleeding*/ background-color: #fff; /* avoid background bleeding*/
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
border-radius: 0; border-radius: 0;
color: #777;
padding-left: 0; /* for print, we want to align with the footer to ease the layout */ padding-left: 0; /* for print, we want to align with the footer to ease the layout */
padding-right: 0; padding-right: 0;
color: #777;
} }
.navigation, .navigation,
#top-print-link, #top-print-link,

238
static/css/ie.css
View file

@ -1,63 +1,201 @@
@media all and (-ms-high-contrast:none) { @media all and (-ms-high-contrast:none) {
/* ----------------------------------------------- */
/* turn off LTR support as it is dependend on CSS properties that aren't supported by IE11 */ /* turn off LTR support as it is dependend on CSS properties that aren't supported by IE11 */
html[dir="rtl"] #body #breadcrumbs { html {
float: left; direction: ltr !important;
} }
html[dir="rtl"] .navigation, /* nucleus */
html[dir="rtl"] #top-print-link, th {
html[dir="rtl"] #top-github-link { text-align: left;
}
input[type="checkbox"], input[type="radio"] {
margin-right: 0.425rem;
}
blockquote {
padding-left: 0.85rem;
}
/* theme */
#sidebar {
left: 0;
}
.searchbox > :first-child {
left: .5rem;
}
.searchbox span {
right: .5rem;
}
.searchbox input {
padding-left: 1.8rem;
padding-right: 1.6rem;
}
#sidebar ul li.visited + span {
margin-right: 16px;
}
#sidebar ul li li {
padding-left: 1rem;
}
#sidebar ul li .read-icon {
text-align: right;
}
html[dir="rtl"] #sidebar ul li .read-icon {
float: right; float: right;
} }
html[dir="rtl"] .nav i{ #sidebar .nav-title {
transform: scaleX(1); padding-left: 1rem;
} }
html[dir="rtl"] .progress { #body {
left: 4.25rem; margin-left: 300px;
}
html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
transform: scaleX(1);
}
article,
.toc-wrapper,
.tags {
direction: ltr;
} }
h2, h3, h4, h5, h6 { h2, h3, h4, h5, h6 {
padding-right: 2rem; padding-right: 2rem;
} }
blockquote { blockquote {
border-left: 10px solid rgba( 134, 134, 134, .4 ); border-left: 10px solid rgba( 134, 134, 134, .4 );
padding-left: 0.85rem;
} }
blockquote cite { blockquote cite {
text-align: right; text-align: right;
} }
th {
text-align: left;
}
.disableInlineCopyToClipboard span > code.copy-to-clipboard-code {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-right-width: 1px;
}
.anchor {
margin-left: .66em;
}
div.attachments .box-content { div.attachments .box-content {
padding-left: 1.75rem; padding-left: 1.75rem;
} }
#body-inner ul.children-h2,
#body-inner ul.children-h3,
#body-inner ul.children-h4,
#body-inner ul.children-h5,
#body-inner ul.children-h6 {
/* if we display children with style=h2 but without a containerstyle
a ul will be used for structuring; we remove default indention for uls
in this case */
padding-left: 0;
}
code.copy-to-clipboard-code {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right-width: 0;
}
html[dir="rtl"] .navigation,
html[dir="rtl"] #top-print-link,
html[dir="rtl"] #top-github-link {
float: right;
}
.nav,
.print-link,
.github-link {
border-left: thin solid rgba( 134, 134, 134, .333 );
}
html[dir="rtl"] .nav i {
transform: scaleX(1);
}
#toc-menu,
#sidebar-toggle-span {
border-right: thin solid rgba( 134, 134, 134, .333 );
}
html[dir="rtl"] #body #breadcrumbs {
float: left;
}
.progress {
left: 1rem;
}
@media screen and (max-width: 47.938em) {
.progress {
left: 4.25rem;
}
}
@media screen and (max-width: 59.938em) {
#body {
margin-left: 230px;
}
}
@media screen and (max-width: 47.938em) {
.mobile-support #sidebar {
left: -230px;
}
.mobile-support #body {
margin-left: 0;
}
.mobile-support.sidebar-flyout #sidebar {
left: 0;
}
.mobile-support.sidebar-flyout #body {
margin-left: 230px;
}
}
.copy-to-clipboard-button {
border-top-left-radius: 0;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 0;
padding-left: 22px;
}
span > .copy-to-clipboard-button {
border-top-left-radius: 0;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 0;
}
.copy-to-clipboard-button > i {
margin-left: -22px;
}
pre > .copy-to-clipboard-button {
padding-left: 25px;
padding-right: 3px;
right: 4px;
}
.disableInlineCopyToClipboard span > code.copy-to-clipboard-code {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-right-width: 1px;
}
.expand > label { .expand > label {
left: 0; left: 0;
} }
.expand > input + label > .fa-chevron-left { html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
display: none !important; transform: scaleX(1);
} }
.expand > input + label > .fa-chevron-right { .footline i{
display: inline-block !important; margin-left: .5rem;
} }
.expand > input:checked + label > .fa-chevron-right { .footline i:first-child{
display: none !important; margin-left: 0;
} }
.anchor {
margin-left: .66em;
}
/* rapi-doc
seems not be capable of RTL
*/
html[dir="rtl"] .select-container i,
html[dir="rtl"] .select-container span {
float: left;
}
.footerVisitedLinks > * {
text-align: left;
}
#sidebar ul.collapsible-menu input.toggle {
left: 1rem;
}
#sidebar .collapsible-menu input.toggle:before {
margin-left: -1rem;
}
html[dir="rtl"] #sidebar .collapsible-menu input.toggle:before {
content: "\f054";
}
.searchform input {
margin-right: .5rem;
}
.badge > .badge-title {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.badge.badge-with-title > .badge-content {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
article ul li:has(input[type="checkbox"]) {
margin-left: -1rem;
}
/* tabs */
#body .tab-nav-button { #body .tab-nav-button {
margin-left: 4px; margin-left: 4px;
} }
@ -67,28 +205,15 @@
#body .tab-nav-button:first-child { #body .tab-nav-button:first-child {
margin-left: 9px; margin-left: 9px;
} }
.searchform input { /* auto-complete */
margin-right: .5rem; .autocomplete-suggestions {
text-align: left;
} }
.autocomplete-suggestion > .context { .autocomplete-suggestion > .context {
margin-left: 1em; margin-left: 1em;
} }
.badge > .badge-title { /* ----------------------------------------------- */
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.badge.badge-with-title > .badge-content {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
article ul li:has(input[type="checkbox"]) {
margin-left: -1rem;
}
/* set default colors as in variant.css for IE11 */ /* set default colors as in variant.css for IE11 */
body { body {
background-color: #ffffff; /* var(--MAIN-BG-color) */ background-color: #ffffff; /* var(--MAIN-BG-color) */
@ -639,6 +764,7 @@
box-shadow: inset 1em 1em #7dc903; /* var(--INTERNAL-PRIMARY-color) */ box-shadow: inset 1em 1em #7dc903; /* var(--INTERNAL-PRIMARY-color) */
} }
/* ----------------------------------------------- */
/* set further styles to fix broken stuff in IE11 */ /* set further styles to fix broken stuff in IE11 */
/* turn off animiation in IE because this causes the menu /* turn off animiation in IE because this causes the menu
@ -674,3 +800,11 @@
display: none; display: none;
} }
} }
@media print and (-ms-high-contrast:none) {
code.copy-to-clipboard-code {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-right-width: 1px;
}
}

2
static/css/nucleus.css
View file

@ -242,7 +242,7 @@ textarea {
input[type="checkbox"], input[type="radio"] { input[type="checkbox"], input[type="radio"] {
display: inline; display: inline;
margin-right: 0.425rem; } margin-inline-end: 0.425rem; }
input[type="file"] { input[type="file"] {
width: 100%; } width: 100%; }

141
static/css/theme.css
View file

@ -52,6 +52,7 @@ dd {
flex-shrink: 0; flex-shrink: 0;
font-size: .953125rem; font-size: .953125rem;
height: 100%; height: 100%;
inset-inline-start: 0;
line-height: 1.574; line-height: 1.574;
min-height: 100%; min-height: 100%;
min-width: 300px; min-width: 300px;
@ -59,12 +60,6 @@ dd {
position: fixed; position: fixed;
width: 300px; width: 300px;
} }
html[dir="ltr"] #sidebar {
left: 0;
}
html[dir="rtl"] #sidebar {
right: 0;
}
#header-wrapper { #header-wrapper {
border-bottom-style: solid; border-bottom-style: solid;
@ -86,8 +81,8 @@ html[dir="rtl"] #sidebar {
} }
.searchbox > :first-child { .searchbox > :first-child {
inset-inline-start: .5rem;
position: absolute; position: absolute;
left: .5rem;
} }
.searchbox > button { .searchbox > button {
@ -106,8 +101,8 @@ html[dir="rtl"] #sidebar {
.searchbox span { .searchbox span {
cursor: pointer; cursor: pointer;
inset-inline-end: .5rem;
position: absolute; position: absolute;
right: .5rem;
top: .25rem; top: .25rem;
} }
@ -128,7 +123,10 @@ html[dir="rtl"] #sidebar {
height: 1.875rem; height: 1.875rem;
background: transparent; background: transparent;
border: 0; border: 0;
padding: 0 1.6rem 0 1.8rem; padding-bottom: 0;
padding-inline-end: 1.6rem;
padding-inline-start: 1.8rem;
padding-top: 0;
margin: 0; margin: 0;
font-weight: 300; font-weight: 300;
} }
@ -215,7 +213,7 @@ html[dir="rtl"] #sidebar {
} }
#sidebar ul li.visited + span { #sidebar ul li.visited + span {
margin-right: 16px; margin-inline-end: 16px;
} }
#sidebar ul li a, #sidebar ul li a,
@ -237,7 +235,7 @@ html[dir="rtl"] #sidebar {
} }
#sidebar ul li li { #sidebar ul li li {
padding-left: 1rem; padding-inline-start: 1rem;
} }
#sidebar ul.topics > li > a .read-icon { #sidebar ul.topics > li > a .read-icon {
@ -255,7 +253,10 @@ html[dir="rtl"] #sidebar {
font-size: 13px; font-size: 13px;
margin: 4px 0 0 0; margin: 4px 0 0 0;
min-width: 16px; min-width: 16px;
text-align: right; text-align: start;
}
html[dir="rtl"] #sidebar ul li .read-icon {
float: left;
} }
#sidebar ul li.visited > a .read-icon { #sidebar ul li.visited > a .read-icon {
@ -268,7 +269,7 @@ html[dir="rtl"] #sidebar {
letter-spacing: -1px; letter-spacing: -1px;
line-height: 110% !important; line-height: 110% !important;
margin: 1rem 0 1rem 0; margin: 1rem 0 1rem 0;
padding-left: 1rem; padding-inline-start: 1rem;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
text-transform: uppercase; text-transform: uppercase;
} }
@ -290,6 +291,7 @@ html[dir="rtl"] #sidebar {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
height: 100%; height: 100%;
margin-inline-start: 300px;
min-height: 100%; min-height: 100%;
min-width: calc( 100% - 300px); min-width: calc( 100% - 300px);
max-width: calc( 100% - 300px); max-width: calc( 100% - 300px);
@ -298,12 +300,6 @@ html[dir="rtl"] #sidebar {
width: calc( 100% - 300px); width: calc( 100% - 300px);
z-index: 70; z-index: 70;
} }
html[dir="ltr"] #body {
margin-left: 300px;
}
html[dir="rtl"] #body {
margin-right: 300px;
}
#body img:not(.lightbox-image), #body img:not(.lightbox-image),
#body img.center, #body img.center,
@ -614,18 +610,10 @@ code {
span.copy-to-clipboard { span.copy-to-clipboard {
display: inline-block; display: inline-block;
white-space: nowrap;
} }
code.copy-to-clipboard-code { code.copy-to-clipboard-code {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right-width: 0;
}
span > code.copy-to-clipboard-code {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-right-width: 1px;
border-end-end-radius: 0; border-end-end-radius: 0;
border-start-end-radius: 0; border-start-end-radius: 0;
border-inline-end-width: 0; border-inline-end-width: 0;
@ -862,7 +850,7 @@ html[dir="rtl"] #top-github-link {
.nav, .nav,
.print-link, .print-link,
.github-link { .github-link {
border-left: thin solid rgba( 134, 134, 134, .333 ); border-inline-start: thin solid rgba( 134, 134, 134, .333 );
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
@ -886,13 +874,12 @@ span.nav i{
} }
#toc-menu, #toc-menu,
#sidebar-toggle-span { #sidebar-toggle-span {
border-right: thin solid rgba( 134, 134, 134, .333 ); border-inline-end: thin solid rgba( 134, 134, 134, .333 );
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
#body #breadcrumbs { #body #breadcrumbs {
display: inline-block;
float: left; float: left;
height: auto; height: auto;
line-height: 1.4; line-height: 1.4;
@ -918,23 +905,15 @@ html[dir="rtl"] #body #breadcrumbs {
display: none; display: none;
} }
.progress { .progress {
inset-inline-start: 1rem;
top: 1rem; top: 1rem;
} }
html[dir="ltr"] .progress {
left: 1rem;
}
html[dir="rtl"] .progress {
right: 1rem;
}
@media screen and (max-width: 47.938em) { @media screen and (max-width: 47.938em) {
.mobile-support #sidebar-toggle-span { .mobile-support #sidebar-toggle-span {
display: inline; display: inline;
} }
html[dir="ltr"] .progress { .progress {
left: 4.25rem; inset-inline-start: 4.25rem;
}
html[dir="rtl"] .progress {
right: 4.25rem;
} }
} }
@ -976,24 +955,16 @@ html[dir="rtl"] .progress {
width: 230px; width: 230px;
} }
#body { #body {
margin-inline-start: 230px;
min-width: calc( 100% - 230px); min-width: calc( 100% - 230px);
max-width: calc( 100% - 230px); max-width: calc( 100% - 230px);
width: calc( 100% - 230px); width: calc( 100% - 230px);
} }
html[dir="ltr"] #body {
margin-left: 230px;
}
html[dir="rtl"] #body {
margin-right: 230px;
}
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 47.938em) {
/* we don't support sidebar flyout in mobile */ /* we don't support sidebar flyout in mobile */
html[dir="ltr"] .mobile-support #sidebar { .mobile-support #sidebar {
left: -230px; inset-inline-start: -230px;
}
html[dir="rtl"] .mobile-support #sidebar {
right: -230px;
} }
.mobile-support #navshow{ .mobile-support #navshow{
display: inline; display: inline;
@ -1003,33 +974,20 @@ html[dir="rtl"] .progress {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
html[dir="ltr"] .mobile-support #body { .mobile-support #body {
margin-left: 0; margin-inline-start: 0;
}
html[dir="rtl"] .mobile-support #body {
margin-right: 0;
} }
.mobile-support.sidebar-flyout { .mobile-support.sidebar-flyout {
overflow: hidden; overflow: hidden;
} }
.mobile-support.sidebar-flyout #sidebar { .mobile-support.sidebar-flyout #sidebar {
inset-inline-start: 0;
z-index: 90; z-index: 90;
} }
html[dir="ltr"] .mobile-support.sidebar-flyout #sidebar {
left: 0;
}
html[dir="rtl"] .mobile-support.sidebar-flyout #sidebar {
right: 0;
}
.mobile-support.sidebar-flyout #body { .mobile-support.sidebar-flyout #body {
margin-inline-start: 230px;
overflow: hidden; overflow: hidden;
} }
html[dir="ltr"] .mobile-support.sidebar-flyout #body {
margin-left: 230px;
}
html[dir="rtl"] .mobile-support.sidebar-flyout #body {
margin-right: 230px;
}
.mobile-support.sidebar-flyout #sidebar-overlay{ .mobile-support.sidebar-flyout #sidebar-overlay{
background-color: rgba(134, 134, 134, 0.5); background-color: rgba(134, 134, 134, 0.5);
bottom: 0; bottom: 0;
@ -1043,12 +1001,15 @@ html[dir="rtl"] .progress {
} }
.copy-to-clipboard-button { .copy-to-clipboard-button {
border-radius: 0 2px 2px 0; border-start-start-radius: 0;
border-start-end-radius: 2px;
border-end-end-radius: 2px;
border-end-start-radius: 0;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
cursor: pointer; cursor: pointer;
font-size: .859625rem; font-size: .934375rem;
padding-left: 22px; padding-inline-start: 22px;
} }
span > .copy-to-clipboard-button { span > .copy-to-clipboard-button {
@ -1059,9 +1020,9 @@ span > .copy-to-clipboard-button {
} }
.copy-to-clipboard-button > i { .copy-to-clipboard-button > i {
font-size: .790855rem; font-size: .859625rem;
font-weight: 500; font-weight: 500;
margin-left: -22px; margin-inline-start: -22px;
} }
.copy-to-clipboard-code + .copy-to-clipboard-button > i { .copy-to-clipboard-code + .copy-to-clipboard-button > i {
@ -1074,9 +1035,12 @@ pre > .copy-to-clipboard-button {
border-radius: 2px; border-radius: 2px;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
padding: 5px 3px 5px 25px; inset-inline-end: 4px;
padding-bottom: 5px;
padding-inline-start: 25px;
padding-inline-end: 3px;
padding-top: 5px;
position: absolute; position: absolute;
right: 4px;
top: 4px; top: 4px;
} }
@ -1085,8 +1049,8 @@ pre > .copy-to-clipboard-button {
} }
.disableInlineCopyToClipboard span > code.copy-to-clipboard-code { .disableInlineCopyToClipboard span > code.copy-to-clipboard-code {
border-end-end-radius: 2px;
border-start-end-radius: 2px; border-start-end-radius: 2px;
border-end-end-radius: 2px;
border-inline-end-width: 1px; border-inline-end-width: 1px;
} }
@ -1151,7 +1115,6 @@ option {
.expand > input + label > .fa-chevron-down { .expand > input + label > .fa-chevron-down {
display: none; display: none;
} }
.expand > input + label > .fa-chevron-left,
.expand > input + label > .fa-chevron-right { .expand > input + label > .fa-chevron-right {
display: inline-block; display: inline-block;
} }
@ -1164,7 +1127,6 @@ option {
.expand > input:checked + label > .fa-chevron-down { .expand > input:checked + label > .fa-chevron-down {
display: inline-block; display: inline-block;
} }
.expand > input:checked + label > .fa-chevron-left,
.expand > input:checked + label > .fa-chevron-right { .expand > input:checked + label > .fa-chevron-right {
display: none; display: none;
} }
@ -1179,10 +1141,10 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
} }
.footline i{ .footline i{
margin-left: .5rem; margin-inline-start: .5rem;
} }
.footline i:first-child{ .footline i:first-child{
margin-left: 0; margin-inline-start: 0;
} }
.mermaid-container { .mermaid-container {
@ -1463,6 +1425,10 @@ rapi-doc::part(section-endpoint-head-method) {
display: block; display: block;
float: left; float: left;
} }
html[dir="rtl"] .select-container i,
html[dir="rtl"] .select-container span {
float: right;
}
.select-style { .select-style {
border: 0; border: 0;
@ -1518,7 +1484,7 @@ rapi-doc::part(section-endpoint-head-method) {
appearance: none; appearance: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
text-align: left; text-align: start;
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
} }
@ -1540,7 +1506,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
height: 2rem; height: 2rem;
left: 1rem; inset-inline-start: 1rem;
padding-top: .35rem; padding-top: .35rem;
position: absolute; position: absolute;
width: 1px; width: 1px;
@ -1555,14 +1521,17 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-size: .8rem; font-size: .8rem;
font-weight: 900; font-weight: 900;
margin-left: -1rem; margin-inline-start: -1rem;
padding-bottom: .65rem; padding-bottom: .65rem;
padding-left: .2rem; padding-left: .2rem;
padding-right: .2rem; padding-right: .2rem;
padding-top: .6rem; padding-top: .6rem;
} }
html[dir="rtl"] #sidebar .collapsible-menu input.toggle:before {
content: "\f053";
}
#sidebar .collapsible-menu input.toggle:checked:before { html[dir] #sidebar .collapsible-menu input.toggle:checked:before {
content: "\f078"; content: "\f078";
padding-left: .1rem; padding-left: .1rem;
padding-right: .1rem; padding-right: .1rem;

31
static/js/theme.js
View file

@ -326,9 +326,8 @@ function initAnchorClipboard(){
var clip = new ClipboardJS( '.anchor' ); var clip = new ClipboardJS( '.anchor' );
clip.on( 'success', function( e ){ clip.on( 'success', function( e ){
e.clearSelection(); e.clearSelection();
var rtl = e.trigger.closest( '*[dir]' ).getAttribute( 'dir' ) == 'rtl';
e.trigger.setAttribute( 'aria-label', window.T_Link_copied_to_clipboard ); e.trigger.setAttribute( 'aria-label', window.T_Link_copied_to_clipboard );
e.trigger.classList.add( 'tooltipped', 'tooltipped-s'+(rtl?'e':'w') ); e.trigger.classList.add( 'tooltipped', 'tooltipped-s'+(isRtl?'e':'w') );
}); });
} }
@ -370,19 +369,17 @@ function initCodeClipboard(){
clip.on( 'success', function( e ){ clip.on( 'success', function( e ){
e.clearSelection(); e.clearSelection();
var inPre = e.trigger.parentNode.tagName.toLowerCase() == 'pre'; var inPre = e.trigger.parentNode.tagName.toLowerCase() == 'pre';
var rtl = e.trigger.closest( '*[dir]' ).getAttribute( 'dir' ) == 'rtl';
e.trigger.setAttribute( 'aria-label', window.T_Copied_to_clipboard ); e.trigger.setAttribute( 'aria-label', window.T_Copied_to_clipboard );
e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(rtl?'e':'w')) ); e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(isRtl?'e':'w')) );
}); });
clip.on( 'error', function( e ){ clip.on( 'error', function( e ){
var inPre = e.trigger.parentNode.tagName.toLowerCase() == 'pre'; var inPre = e.trigger.parentNode.tagName.toLowerCase() == 'pre';
var rtl = e.trigger.closest( '*[dir]' ).getAttribute( 'dir' ) == 'rtl';
e.trigger.setAttribute( 'aria-label', fallbackMessage(e.action) ); e.trigger.setAttribute( 'aria-label', fallbackMessage(e.action) );
e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(rtl?'e':'w')) ); e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(isRtl?'e':'w')) );
var f = function(){ var f = function(){
e.trigger.setAttribute( 'aria-label', window.T_Copied_to_clipboard ); e.trigger.setAttribute( 'aria-label', window.T_Copied_to_clipboard );
e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(rtl?'e':'w')) ); e.trigger.classList.add( 'tooltipped', 'tooltipped-' + (inPre ? 'w' : 's'+(isRtl?'e':'w')) );
document.removeEventListener( 'copy', f ); document.removeEventListener( 'copy', f );
}; };
document.addEventListener( 'copy', f ); document.addEventListener( 'copy', f );
@ -406,7 +403,6 @@ function initCodeClipboard(){
button.setAttribute( 'title', window.T_Copy_to_clipboard ); button.setAttribute( 'title', window.T_Copy_to_clipboard );
button.innerHTML = '<i class="fas fa-copy"></i>'; button.innerHTML = '<i class="fas fa-copy"></i>';
button.addEventListener( 'mouseleave', function() { button.addEventListener( 'mouseleave', function() {
var rtl = this.closest( '*[dir]' ).getAttribute( 'dir' ) == 'rtl';
this.removeAttribute( 'aria-label' ); this.removeAttribute( 'aria-label' );
this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' ); this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' );
}); });
@ -548,20 +544,23 @@ function initMenuScrollbar(){
// on resize, we have to redraw the scrollbars to let new height // on resize, we have to redraw the scrollbars to let new height
// affect their size // affect their size
window.addEventListener('resize', function(){ window.addEventListener('resize', function(){
pst && pst.update(); console.log("resize")
psm && psm.update(); pst && setTimeout( function(){ pst.update(); }, 400 );
psc && psc.update(); psm && setTimeout( function(){ psm.update(); }, 400 );
psc && setTimeout( function(){ psc.update(); }, 400 );
}); });
// now that we may have collapsible menus, we need to call a resize // now that we may have collapsible menus, we need to call a resize
// for the menu scrollbar if sections are expanded/collapsed // for the menu scrollbar if sections are expanded/collapsed
document.querySelectorAll('#sidebar .collapsible-menu input.toggle').forEach( function(e){ document.querySelectorAll('#sidebar .collapsible-menu input.toggle').forEach( function(e){
e.addEventListener('change', function(){ e.addEventListener('change', function(){
psm && psm.update(); psm && setTimeout( function(){ psm.update(); }, 400 );
}); });
}); });
// bugfix for PS in RTL mode: the initial scrollbar position is off; // bugfix for PS in RTL mode: the initial scrollbar position is off;
// calling update() once, fixes this // calling update() once, fixes this
pst && setTimeout( function(){ pst.update(); }, 0 ); pst && setTimeout( function(){ pst.update(); }, 400 );
psm && setTimeout( function(){ psm.update(); }, 400 );
psc && setTimeout( function(){ psc.update(); }, 400 );
// finally, we want to adjust the contents end padding if there is a scrollbar visible // finally, we want to adjust the contents end padding if there is a scrollbar visible
window.addEventListener('resize', adjustContentWidth ); window.addEventListener('resize', adjustContentWidth );
@ -669,7 +668,7 @@ function showToc(){
var b = document.querySelector( 'body' ); var b = document.querySelector( 'body' );
b.classList.toggle( 'toc-flyout' ); b.classList.toggle( 'toc-flyout' );
if( b.classList.contains( 'toc-flyout' ) ){ if( b.classList.contains( 'toc-flyout' ) ){
pst && pst.update(); pst && setTimeout( function(){ pst.update(); }, 400 );
pst && pst.scrollbarY.focus(); pst && pst.scrollbarY.focus();
document.querySelector( '.toc-wrapper ul a' ).focus(); document.querySelector( '.toc-wrapper ul a' ).focus();
document.addEventListener( 'keydown', tocEscapeHandler ); document.addEventListener( 'keydown', tocEscapeHandler );
@ -883,7 +882,7 @@ function mark() {
parent = parent.parentNode; parent = parent.parentNode;
} }
} }
psm && psm.update(); psm && setTimeout( function(){ psm.update(); }, 400 );
} }
window.relearn.markSearch = mark; window.relearn.markSearch = mark;
@ -971,7 +970,7 @@ function unmark() {
var highlighted = document.querySelectorAll( '.highlightable' ); var highlighted = document.querySelectorAll( '.highlightable' );
unhighlight( highlighted, { element: 'mark' } ); unhighlight( highlighted, { element: 'mark' } );
psm && psm.update(); psm && setTimeout( function(){ psm.update(); }, 400 );
} }
function unhighlight( es, options ){ function unhighlight( es, options ){