linux/Documentation/sphinx-static/custom.css
Vegard Nossum 7418ec5b15 docs: translations: add translations links when they exist
Add a new Sphinx extension that knows about the translations of kernel
documentation and can insert links to the translations at the top of
the document.

It basically works like this:

1. Register a new node type, LanguagesNode.

2. Register a new transform, TranslationsTransform, that inserts a new
   LanguageNode at the top of every document. The LanguageNode contains
   "pending references" to translations of the document. The key here
   is that these are pending (i.e. unresolved) references that may or
   may not actually exist.

3. Register a 'doctree-resolved' event that iterates over all the
   LanguageNode nodes. Any unresolved references are filtered out; the
   list of resolved references is passed to the 'translations.html'
   template and rendered as an HTML node (if HTML output is selected).

Testing: make htmldocs, make latexdocs with Sphinx v4.3.2 and Firefox.

v2:
- changed bar into a drop-down menu
- fixed language labels
- fixed hysteresis reported by Akira Yokosawa

Cc: Federico Vaga <federico.vaga@vaga.pv.it>
Cc: Jani Nikula <jani.nikula@linux.intel.com>
Cc: Akira Yokosawa <akiyks@gmail.com>
Cc: Yanteng Si <siyanteng@loongson.cn>
Signed-off-by: Vegard Nossum <vegard.nossum@oracle.com>
Signed-off-by: Jonathan Corbet <corbet@lwn.net>
Link: https://lore.kernel.org/r/20231215123701.2712807-1-vegard.nossum@oracle.com
2023-12-19 14:34:59 -07:00

139 lines
3.2 KiB
CSS

/* SPDX-License-Identifier: GPL-2.0 */
/*
* CSS tweaks for the Alabaster theme
*/
/* Shrink the headers a bit */
div.body h1 { font-size: 180%; }
div.body h2 { font-size: 150%; }
div.body h3 { font-size: 130%; }
div.body h4 { font-size: 110%; }
/* toctree captions are styled like h2 */
div.toctree-wrapper p.caption[role=heading] { font-size: 150%; }
/* Tighten up the layout slightly */
div.body { padding: 0 15px 0 10px; }
div.sphinxsidebarwrapper { padding: 1em 0.4em; }
div.sphinxsidebar { font-size: inherit;
max-height: 100%;
overflow-y: auto; }
/* Tweak document margins and don't force width */
div.document {
margin: 20px 10px 0 10px;
width: auto;
}
/* Size the logo appropriately */
img.logo {
width: 104px;
margin-bottom: 20px;
}
/*
* Parameters for the display of function prototypes and such included
* from C source files.
*/
dl.function, dl.struct, dl.enum { margin-top: 2em; background-color: #ecf0f3; }
/* indent lines 2+ of multi-line function prototypes */
dl.function dt { margin-left: 10em; text-indent: -10em; }
dt.sig-object { font-size: larger; }
div.kernelindent { margin-left: 2em; margin-right: 4em; }
/*
* Tweaks for our local TOC
*/
div.kerneltoc li.toctree-l1 { font-size: smaller;
text-indent: -1em;
margin-left: 1em; }
div.kerneltoc li.current > a {font-weight: bold; }
div.kerneltoc li.toctree-l2,li.toctree-l3 { font-size: small;
text-indent: -1em;
margin-left: 1em;
list-style-type: none;
}
div.kerneltoc li.current ul { margin-left: 0; }
div.kerneltoc { background-color: #eeeeee; }
div.kerneltoc li.current ul { background-color: white; }
/*
* The CSS magic to toggle the contents on small screens.
*/
label.kernel-toc-title { display: none; }
label.kernel-toc-title:after {
content: "[Hide]";
}
input[type=checkbox]:checked ~ label.kernel-toc-title:after {
content: "[Show]";
}
/* Hide the toggle on large screens */
input.kernel-toc-toggle { display: none; }
/*
* Show and implement the toggle on small screens.
* The 875px width seems to be wired into alabaster.
*/
@media screen and (max-width: 875px) {
label.kernel-toc-title { display: inline;
font-weight: bold;
font-size: larger; }
input[type=checkbox]:checked ~ div.kerneltoc {
display: none;
}
h3.kernel-toc-contents { display: inline; }
div.kerneltoc a { color: black; }
}
/* Language selection menu */
div.admonition {
/*
* Make sure we don't overlap notes and warnings at the top of the
* document.
*/
clear: both;
}
div.language-selection {
background: #eeeeee;
border: 1px solid #cccccc;
margin-bottom: 1em;
padding: .5em;
position: relative;
float: right;
}
div.language-selection a {
display: block;
padding: 0.5em;
color: #333333;
text-decoration: none;
}
div.language-selection ul {
display: none;
position: absolute;
/* Align with the parent div */
top: 100%;
right: 0;
margin: 0;
list-style: none;
background: #fafafa;
border: 1px solid #cccccc;
/* Never break menu item lines */
white-space: nowrap;
}
div.language-selection:hover ul {
display: block;
}
div.language-selection ul li:hover {
background: #dddddd;
}