* [pbs-devel] [PATCH proxmox-backup 1/3] docs: make dark mode variables more consistent
2023-04-05 8:12 [pbs-devel] [PATCH proxmox-backup 0/3] Proxmox Dark Theme - PBS Doc Fix-ups Stefan Sterz
@ 2023-04-05 8:12 ` Stefan Sterz
2023-04-05 8:12 ` [pbs-devel] [PATCH proxmox-backup 2/3] docs: dark theme, dim borders and minor fixups Stefan Sterz
` (2 subsequent siblings)
3 siblings, 0 replies; 5+ messages in thread
From: Stefan Sterz @ 2023-04-05 8:12 UTC (permalink / raw)
To: pbs-devel
this commit roles some color values into variables, cleans up unused
variables and makes variable naming a bit more consistent.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
docs/custom.css | 31 +++++++++++++++++--------------
1 file changed, 17 insertions(+), 14 deletions(-)
diff --git a/docs/custom.css b/docs/custom.css
index 9408f418..8a267105 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -92,20 +92,24 @@ div.document, div.footer {
color-scheme: dark;
--pdt-grey-850: hsl(0deg, 0%, 85%);
--pdt-grey-500: hsl(0deg, 0%, 50%);
- --pdt-grey-400: hsl(0deg, 0%, 40%);
--pdt-grey-250: hsl(0deg, 0%, 25%);
--pdt-grey-200: hsl(0deg, 0%, 20%);
--pdt-grey-150: hsl(0deg, 0%, 15%);
--pdt-grey-100: hsl(0deg, 0%, 10%);
- --pdt-primary-850: hsl(205deg, 100%, 85%);
--pdt-primary-800: hsl(205deg, 100%, 80%);
--pdt-primary-700: hsl(205deg, 100%, 70%);
- --pdt-secondary-850: hsl(250deg, 100%, 85%);
+ --pdt-red-200: hsl(360deg, 30%, 20%);
+ --pdt-yellow-250: hsl(40deg, 100%, 25%);
--pdt-body-background: var(--pdt-grey-150);
--pdt-text: var(--pdt-grey-850);
+ --pdt-border: var(--pdt-grey-500);
+ --pdt-shadow: var(--pdt-grey-100);
--pdt-headline: var(--pdt-primary-800);
--pdt-link: var(--pdt-primary-700);
- --pdt-background-admonition: var(--pdt-grey-250);
+ --pdt-admonition-background: var(--pdt-grey-250);
+ --pdt-topic-background: var(--pdt-grey-200);
+ --pdt-warn: var(--pdt-yellow-250);
+ --pdt-crit: var(--pdt-red-200);
}
/* body and links */
@@ -123,19 +127,19 @@ div.document, div.footer {
a.headerlink:hover {
color: var(--pdt-text);
- background-color: var(--pdt-background-admonition)
+ background-color: var(--pdt-admonition-background)
}
div.sphinxsidebar ul ul a {
color: var(--pdt-text);
- border-bottom-color: var(--pdt-grey-500);
+ border-bottom-color: var(--pdt-border);
}
ul li.toctree-l1 > a,
div.sphinxsidebar ul,
div.sphinxsidebar a:hover {
color: var(--pdt-text);
- border-bottom-color: var(--pdt-grey-500);
+ border-bottom-color: var(--pdt-border);
}
/* highlighting backgrounds */
@@ -143,15 +147,15 @@ div.document, div.footer {
div.highlight,
a:hover code,
pre {
- background-color: var(--pdt-background-admonition);
+ background-color: var(--pdt-admonition-background);
}
div.caution, div.warning {
- background-color: #422;
+ background-color: var(--pdt-crit);
}
div.topic {
- background-color: var(--pdt-grey-200);
+ background-color: var(--pdt-topic-background);
}
img.logo {
@@ -159,7 +163,7 @@ div.document, div.footer {
}
table.docutils {
- box-shadow: 2px 2px 4px var(--pdt-grey-100);
+ box-shadow: 2px 2px 4px var(--pdt-shadow);
}
/* style headlines, titles etc. */
@@ -176,10 +180,9 @@ div.document, div.footer {
}
/* code */
-
code {
color: var(--pdt-text);
- background-color: var(--pdt-background-admonition);
+ background-color: var(--pdt-admonition-background);
}
@@ -199,6 +202,6 @@ div.document, div.footer {
}
span.highlighted {
- background-color: #a19231;
+ background-color: var(--pdt-warn);
}
}
--
2.30.2
^ permalink raw reply [flat|nested] 5+ messages in thread
* [pbs-devel] [PATCH proxmox-backup 2/3] docs: dark theme, dim borders and minor fixups
2023-04-05 8:12 [pbs-devel] [PATCH proxmox-backup 0/3] Proxmox Dark Theme - PBS Doc Fix-ups Stefan Sterz
2023-04-05 8:12 ` [pbs-devel] [PATCH proxmox-backup 1/3] docs: make dark mode variables more consistent Stefan Sterz
@ 2023-04-05 8:12 ` Stefan Sterz
2023-04-05 8:12 ` [pbs-devel] [PATCH proxmox-backup 3/3] docs: make logo path and index link absolute Stefan Sterz
2023-04-06 6:50 ` [pbs-devel] applied-series: [PATCH proxmox-backup 0/3] Proxmox Dark Theme - PBS Doc Fix-ups Thomas Lamprecht
3 siblings, 0 replies; 5+ messages in thread
From: Stefan Sterz @ 2023-04-05 8:12 UTC (permalink / raw)
To: pbs-devel
this commit adjust several border colors that weren't styled before
and appeared too brightly. also add styles to the "hide search
matches" link that had poor contrasts before.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
docs/custom.css | 32 ++++++++++++++++++++++++++++++++
1 file changed, 32 insertions(+)
diff --git a/docs/custom.css b/docs/custom.css
index 8a267105..4061d334 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -99,6 +99,7 @@ div.document, div.footer {
--pdt-primary-800: hsl(205deg, 100%, 80%);
--pdt-primary-700: hsl(205deg, 100%, 70%);
--pdt-red-200: hsl(360deg, 30%, 20%);
+ --pdt-red-350: hsl(360deg, 30%, 35%);
--pdt-yellow-250: hsl(40deg, 100%, 25%);
--pdt-body-background: var(--pdt-grey-150);
--pdt-text: var(--pdt-grey-850);
@@ -110,6 +111,7 @@ div.document, div.footer {
--pdt-topic-background: var(--pdt-grey-200);
--pdt-warn: var(--pdt-yellow-250);
--pdt-crit: var(--pdt-red-200);
+ --pdt-crit-border: var(--pdt-red-350);
}
/* body and links */
@@ -125,6 +127,10 @@ div.document, div.footer {
border-bottom-color: var(--pdt-link);
}
+ a.reference {
+ border-color: var(--pdt-border);
+ }
+
a.headerlink:hover {
color: var(--pdt-text);
background-color: var(--pdt-admonition-background)
@@ -135,6 +141,7 @@ div.document, div.footer {
border-bottom-color: var(--pdt-border);
}
+ div.sphinxsidebar a,
ul li.toctree-l1 > a,
div.sphinxsidebar ul,
div.sphinxsidebar a:hover {
@@ -152,10 +159,18 @@ div.document, div.footer {
div.caution, div.warning {
background-color: var(--pdt-crit);
+ border-color: var(--pdt-crit-border);
}
div.topic {
background-color: var(--pdt-topic-background);
+ border-color: var(--pdt-border);
+ }
+
+ div.tip,
+ div.note,
+ div.important {
+ border-color: var(--pdt-border);
}
img.logo {
@@ -166,6 +181,10 @@ div.document, div.footer {
box-shadow: 2px 2px 4px var(--pdt-shadow);
}
+ hr.docutils {
+ border-color: var(--pdt-border);
+ }
+
/* style headlines, titles etc. */
h1,
h2,
@@ -204,4 +223,17 @@ div.document, div.footer {
span.highlighted {
background-color: var(--pdt-warn);
}
+
+ .related.bottom {
+ border-color: var(--pdt-border);
+ }
+
+ /* sidebar */
+ div.sphinxsidebar hr {
+ border-color: var(--pdt-border);
+ }
+
+ div.sphinxsidebar input {
+ border-color: var(--pdt-border);
+ }
}
--
2.30.2
^ permalink raw reply [flat|nested] 5+ messages in thread
* [pbs-devel] [PATCH proxmox-backup 3/3] docs: make logo path and index link absolute
2023-04-05 8:12 [pbs-devel] [PATCH proxmox-backup 0/3] Proxmox Dark Theme - PBS Doc Fix-ups Stefan Sterz
2023-04-05 8:12 ` [pbs-devel] [PATCH proxmox-backup 1/3] docs: make dark mode variables more consistent Stefan Sterz
2023-04-05 8:12 ` [pbs-devel] [PATCH proxmox-backup 2/3] docs: dark theme, dim borders and minor fixups Stefan Sterz
@ 2023-04-05 8:12 ` Stefan Sterz
2023-04-06 6:50 ` [pbs-devel] applied-series: [PATCH proxmox-backup 0/3] Proxmox Dark Theme - PBS Doc Fix-ups Thomas Lamprecht
3 siblings, 0 replies; 5+ messages in thread
From: Stefan Sterz @ 2023-04-05 8:12 UTC (permalink / raw)
To: pbs-devel
the relative path failed as some pages are more deeply nested, such as
the man page for `proxmox-tape`. this meant that on these pages the
logo wouldn't be displayed correctly and the link lead to a non-
existent file.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
| 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
--git a/docs/_templates/sidebar-header.html b/docs/_templates/sidebar-header.html
index 61a381d0..75518b99 100644
--- a/docs/_templates/sidebar-header.html
+++ b/docs/_templates/sidebar-header.html
@@ -1,7 +1,7 @@
<p class="logo">
- <a href="index.html">
- <img class="logo" src="_static/proxmox-logo.svg" alt="Logo">
+ <a href="/docs/index.html">
+ <img class="logo" src="/docs/_static/proxmox-logo.svg" alt="Logo">
</a>
</p>
-<h1 class="logo logo-name"><a href="index.html">Proxmox Backup</a></h1>
+<h1 class="logo logo-name"><a href="/docs/index.html">Proxmox Backup</a></h1>
<hr style="width:100%;">
--
2.30.2
^ permalink raw reply [flat|nested] 5+ messages in thread
* [pbs-devel] applied-series: [PATCH proxmox-backup 0/3] Proxmox Dark Theme - PBS Doc Fix-ups
2023-04-05 8:12 [pbs-devel] [PATCH proxmox-backup 0/3] Proxmox Dark Theme - PBS Doc Fix-ups Stefan Sterz
` (2 preceding siblings ...)
2023-04-05 8:12 ` [pbs-devel] [PATCH proxmox-backup 3/3] docs: make logo path and index link absolute Stefan Sterz
@ 2023-04-06 6:50 ` Thomas Lamprecht
3 siblings, 0 replies; 5+ messages in thread
From: Thomas Lamprecht @ 2023-04-06 6:50 UTC (permalink / raw)
To: Proxmox Backup Server development discussion, Stefan Sterz
Am 05/04/2023 um 10:12 schrieb Stefan Sterz:
> this series first makes the usage of css variables in the
> documentation's dark theme more consistent and then adds some
> additional fixups. the last commit adjusts the path to the logo and
> index link so that it works on more deeply nested sub-pages like the
> man pages too (most of them can only be reached via the search
> function).
>
> Stefan Sterz (3):
> docs: make dark mode variables more consistent
> docs: dark theme, dim borders and minor fixups
> docs: make logo path and index link absolute
>
> docs/_templates/sidebar-header.html | 6 +--
> docs/custom.css | 63 ++++++++++++++++++++++-------
> 2 files changed, 52 insertions(+), 17 deletions(-)
>
applied series, thanks!
^ permalink raw reply [flat|nested] 5+ messages in thread