mirror of
https://github.com/lvgl/lvgl.git
synced 2025-12-10 15:22:33 +08:00
439 lines
12 KiB
CSS
439 lines
12 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
|
|
|
|
/*-------------------------------------------------------------------------
|
|
* Connect FontAwesome file with FontAwesome family name. Supplements
|
|
* fontawesome.min.css. Without this, the codes like `fa-github` don't
|
|
# work in the Furo theme as they did with RTD theme.
|
|
*-------------------------------------------------------------------------*/
|
|
@font-face {
|
|
font-family: FontAwesome;
|
|
src: url("../fonts/fontawesome-webfont.woff2") format("woff2"),
|
|
url("../fonts/fontawesome-webfont.woff") format("woff");
|
|
}
|
|
|
|
.fa {
|
|
font-family: FontAwesome, "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*-------------------------------------------------------------------------
|
|
* Colors
|
|
*-------------------------------------------------------------------------*/
|
|
|
|
body,
|
|
body[data-theme="light"] {
|
|
--color-link: #000;
|
|
--color-sidebar-link-text--top-level: #000;
|
|
--color-sidebar-item-background--hover: #f0f0f0;
|
|
--color-toc-item-text--active: #000;
|
|
--color-toc-item-text: #000;
|
|
--color-sidebar-background: transparent;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
--color-link: #fff;
|
|
--color-sidebar-link-text--top-level: #fff;
|
|
--color-sidebar-item-background--hover: #222;
|
|
--color-toc-item-text--active: #fff;
|
|
--color-toc-item-text: #fff;
|
|
--color-sidebar-background: transparent;
|
|
}
|
|
}
|
|
|
|
body[data-theme="dark"] {
|
|
--color-link: #fff;
|
|
--color-sidebar-link-text--top-level: #fff;
|
|
--color-sidebar-item-background--hover: #222;
|
|
--color-toc-item-text--active: #fff;
|
|
--color-toc-item-text: #fff;
|
|
--color-sidebar-background: transparent;
|
|
}
|
|
|
|
/*-------------------------------------------------------------------------
|
|
* Element Overrides
|
|
*-------------------------------------------------------------------------*/
|
|
section + section {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
table,
|
|
th,
|
|
td {
|
|
border: 1px solid #bbb;
|
|
padding: 10px;
|
|
}
|
|
|
|
span.pre {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
span.pre {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
span.pre:first-child {
|
|
padding-right: 0px;
|
|
}
|
|
|
|
code.sig-name {
|
|
/*margin-left:8px;*/
|
|
}
|
|
|
|
.sidebar-drawer {
|
|
width: fit-content;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.sidebar-tree label .icon {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.main {
|
|
justify-content: center;
|
|
gap: 6rem;
|
|
padding: 3rem;
|
|
}
|
|
|
|
.content {
|
|
padding: 0;
|
|
width: 100%;
|
|
max-width: 696px;
|
|
}
|
|
|
|
.no-toc {
|
|
display: block;
|
|
}
|
|
|
|
/*-------------------------------------------------------------------------
|
|
* `home-img` class is (at this writing) exclusively used for the large
|
|
* buttons on the landing page. The rules below provide their hover
|
|
* movement behavior.
|
|
*-------------------------------------------------------------------------
|
|
*/
|
|
.home-img {
|
|
width: 32%;
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.home-img:hover {
|
|
transform: translate(0, -10px);
|
|
}
|
|
|
|
.sidebar-logo {
|
|
max-width: 120px;
|
|
align-self: left;
|
|
}
|
|
|
|
/*-------------------------------------------------------------------------
|
|
* Version Dropdown Styling
|
|
*-------------------------------------------------------------------------*/
|
|
#version_dropdown {
|
|
background-color: var(--color-sidebar-background);
|
|
color: var(--color-foreground-primary);
|
|
margin: 4px 0;
|
|
width: 150px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/*-------------------------------------------------------------------------
|
|
* `lv_example` Sections
|
|
*-------------------------------------------------------------------------
|
|
* The below contains a documented example to show the relationships of
|
|
* the rules below to their selected elements within the example itself.
|
|
*-------------------------------------------------------------------------
|
|
* `lv_example` sections are the output of `./docs/src/_ext/lv_example.py`
|
|
* custom Sphinx extension. These are generated when the `.rst` source
|
|
* file contains a pattern like this:
|
|
*
|
|
* A very simple *hello world* label // Sphinx+docutils (.rst parser) generates
|
|
* --------------------------------- // the <section> element and title from this.
|
|
*
|
|
* .. lv_example:: get_started/lv_example_get_started_1 // `lv_example.py` generates the
|
|
* :language: c // rest of the <section> content
|
|
* // below from this.
|
|
*-------------------------------------------------------------------------
|
|
* Visible layout consists of a <section> element containing:
|
|
* - <h3> element with title
|
|
* - <div> element containing live running web-assembly example of LVGL UI
|
|
* - <div> element containing [> Show C Code] [G View on GitHub] buttons
|
|
* and the C code below them.
|
|
*
|
|
* <section id="a-very-simple-hello-world-label"> // Contains whole example, buttons and code.
|
|
* <h3>A very simple <em>hello world</em> label...</h3> // The title itself.
|
|
* <div class="lv-example-container"> // Container for running example.
|
|
* <div class="lv-example" data-real-src="..." data-is-loaded="true">
|
|
* <iframe src="..."></iframe> // Running web-assembly example.
|
|
* </div>
|
|
* <div class="lv-example-description"></div> // Whole area to the right of running example.
|
|
* </div>
|
|
* <div class="toggle docutils container"> // Contains buttons + code;
|
|
* <div class="header docutils container" ...> // Contains buttons + code; `open` class is added to this to element "open" the code <div> element.
|
|
* <p>C code </p> // [C code] "button"; JS code in `page.html` template arms this "button" with its events when `$(document).ready` event fires.
|
|
* <a class="lv-example-link-button" ...> // [View on GitHub] "button"; provides hyperlink to the example code on GitHub.
|
|
* <i class="fa fa-github"></i> // "GitHub Cat" icon
|
|
* View on GitHub // text of "button"
|
|
* </a>
|
|
* </div>
|
|
* <div class="highlight-c notranslate" ...>
|
|
* <div class="highlight">
|
|
* <pre>
|
|
* ... // Highlighted C code
|
|
* </pre>
|
|
* </div>
|
|
* </div>
|
|
* </div>
|
|
* <hr>
|
|
* </section>
|
|
*/
|
|
.toggle .header {
|
|
display: block;
|
|
clear: both;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Selects <div class="header docutils container" ...> element.
|
|
* Places "disclosure triangle" icon + non-breaking space to its left.*/
|
|
.toggle .header:before {
|
|
font-family: FontAwesome, "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
|
|
content: "\f0da \00a0 Show "; /* \f0da = "closed" disclosure triangle; \f00a0 = non-breaking space */
|
|
display: inline-block;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* Selects <div class="header docutils container" ...> element when it also contains
|
|
* `open` class, which class is toggled by JS code in `page.html` template. */
|
|
.toggle .header.open:before {
|
|
content: "\f0d7 \00a0 Hide "; /* \f0d7 = "open" disclosure triangle; \f00a0 = non-breaking space */
|
|
}
|
|
|
|
/* Selects the [> C code] "button". */
|
|
.header p {
|
|
display: inline-block;
|
|
font-size: 1.1em;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Selects web-assembly example <div> and child <iframe> elements. */
|
|
.lv-example,
|
|
.lv-example > iframe {
|
|
border: none;
|
|
outline: none;
|
|
padding: 0;
|
|
display: block;
|
|
width: 320px;
|
|
height: 240px;
|
|
flex: none;
|
|
position: relative;
|
|
}
|
|
|
|
/* Selects only the <iframe> elements. */
|
|
.lv-example > iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/* Selects outer example <div> container elements. */
|
|
.lv-example-container {
|
|
display: flex;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
/* Selects <div class="lv-example-description"></div>
|
|
* which is the whole area to the right of running example. */
|
|
.lv-example-description {
|
|
flex: 1 1 auto;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
/* Selects [View on GitHub] "button". */
|
|
.lv-example-link-button {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
background-color: #2980b9;
|
|
color: white;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
/* Selects [View on GitHub] "button" when in `:hover` state. */
|
|
.lv-example-link-button:hover {
|
|
color: white;
|
|
filter: brightness(120%);
|
|
}
|
|
|
|
/* Selects [View on GitHub] "button" when in `:visited` state. */
|
|
.lv-example-link-button:visited {
|
|
color: white;
|
|
}
|
|
|
|
/*-------------------------------------------------------------------------
|
|
* The `lv-api-...` classes do not select anything at this writing (29-Mar-2025).
|
|
*-------------------------------------------------------------------------
|
|
*/
|
|
.lv-api-expansion-button {
|
|
padding: 4px;
|
|
}
|
|
|
|
/* There are no elements that these select at this writing (29-Mar-2025). */
|
|
.lv-api-expansion-button::before {
|
|
font-family: FontAwesome, "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
|
|
display: inline-block;
|
|
font-size: 1.1em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* There are no elements that these select at this writing (29-Mar-2025). */
|
|
.unexpanded .lv-api-expansion-button::before {
|
|
content: "\f0da \00a0";
|
|
}
|
|
|
|
.expanded .lv-api-expansion-button::before {
|
|
content: "\f0d7 \00a0";
|
|
}
|
|
|
|
/* This hides the <dd> elements that contain a code-element's documentation
|
|
* when it has class "unexpanded". "expanded" and "unexpanded" classes in the
|
|
* <dl> elements are added and managed dynamically via code in `custom.js`. */
|
|
dl.cpp.unexpanded dd {
|
|
display: none;
|
|
}
|
|
|
|
/* Selects all <div> elements with "body" class.
|
|
* There are no elements that this selects at this writing (29-Mar-2025). */
|
|
div.body {
|
|
min-width: 360px;
|
|
max-width: 1920px;
|
|
}
|
|
|
|
/* Selects CPP-expression content <span> elements generated from
|
|
* :cpp:expr:`...` Interpreted-Text-Role expressions in the `.rst` source files. */
|
|
.cpp-expr {
|
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace;
|
|
color: #e74c3c;
|
|
padding: 2px 5px;
|
|
border: 1px solid #e1e4e5;
|
|
font-size: 75%;
|
|
}
|
|
|
|
/*-------------------------------------------------------------------------
|
|
* Custom Banners...
|
|
*
|
|
* ...are inserted between these two elements at the top of the page:
|
|
<a class="skip-to-content muted-link" href="#furo-main-content">Skip to content</a>
|
|
|
|
<div class="lv-custom-banner-list">
|
|
<p class="lv-custom-banner highest-priority">
|
|
Highest-priority announcement!
|
|
</p>
|
|
<p class="lv-custom-banner high-priority">
|
|
We are hiring a Front-End Developer in our Editor Team (Electron, React, Node.JS)!
|
|
</p>
|
|
<a href="specified_url" class="lv-custom-banner normal-priority">
|
|
<p>
|
|
Normal-priority announcement.
|
|
</p>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="page">
|
|
...page content...
|
|
*-------------------------------------------------------------------------*/
|
|
.lv-custom-banner-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
border-top: 4px solid darkgreen;
|
|
}
|
|
|
|
.lv-custom-banner {
|
|
box-sizing: border-box;
|
|
padding: 0.5rem;
|
|
min-width: 100%;
|
|
text-align: center;
|
|
border-bottom: 4px solid darkgreen;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Hyperlinks within banners (when banner label had a hyperlink in it) */
|
|
.lv-custom-banner a {
|
|
color: var(--color-announcement-text);
|
|
text-decoration-color: var(--color-announcement-text);
|
|
}
|
|
|
|
.lv-custom-banner a:hover {
|
|
color: var(--color-announcement-text);
|
|
text-decoration-color: var(--color-link--hover);
|
|
}
|
|
|
|
/* Paragraphs within banner HTML (when Banners text contains <p> elements). */
|
|
.lv-custom-banner p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Banner priorities */
|
|
.lv-custom-banner.highest-priority {
|
|
background-image: linear-gradient(45deg, black, darkred);
|
|
color: white;
|
|
padding: 18px 3em;
|
|
}
|
|
|
|
.lv-custom-banner.high-priority {
|
|
background-image: linear-gradient(45deg, black, darkgreen);
|
|
color: white;
|
|
padding: 14px 3em;
|
|
}
|
|
|
|
.lv-custom-banner.normal-priority {
|
|
background-image: linear-gradient(45deg, black, #5e5e5e);
|
|
color: white;
|
|
padding: 10px 3em;
|
|
}
|
|
|
|
.lv-custom-banner.low-priority {
|
|
background-image: linear-gradient(45deg, black, darkblue);
|
|
color: white;
|
|
padding: 8px 3em;
|
|
}
|
|
|
|
.lv-custom-banner.lowest-priority {
|
|
background-image: linear-gradient(45deg, black, var(--color-sidebar-background));
|
|
color: var(--color-content-foreground);
|
|
padding: 8px 3em;
|
|
}
|
|
|
|
/*-------------------------------------------------------------------------
|
|
* Field Lists
|
|
*-------------------------------------------------------------------------*/
|
|
.field-list ul {
|
|
margin: 0;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.field-list p {
|
|
margin: 0;
|
|
}
|
|
|
|
dl.field-list {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(70%, 95%);
|
|
margin-bottom: 24px; /* Up from 16 */
|
|
}
|
|
|
|
dl.field-list > dt {
|
|
font-weight: 600;
|
|
word-break: break-word;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
margin-bottom: 0.15em;
|
|
display: inline-grid;
|
|
grid-template-columns: max-content auto;
|
|
}
|
|
|
|
dl.field-list > dd {
|
|
margin: 0;
|
|
}
|