[pbs-devel] [PATCH proxmox-backup 0/3] Proxmox Dark Theme - PBS Doc Fix-ups

[pbs-devel] [PATCH proxmox-backup 0/3] Proxmox Dark Theme - PBS Doc Fix-ups

[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(-)

-- 
2.30.2

[pbs-devel] [PATCH proxmox-backup 1/3] docs: make dark mode variables more consistent

[Stefan Sterz]

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

[pbs-devel] [PATCH proxmox-backup 2/3] docs: dark theme, dim borders and minor fixups

[Stefan Sterz]

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

[pbs-devel] [PATCH proxmox-backup 3/3] docs: make logo path and index link absolute

[Stefan Sterz]

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>
---
 docs/_templates/sidebar-header.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --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

[pbs-devel] applied-series: [PATCH proxmox-backup 0/3] Proxmox Dark Theme - PBS Doc Fix-ups

[Thomas Lamprecht]

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!