From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 7CC4E90AF4; Wed, 15 Mar 2023 17:11:15 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 5A9ABC437; Wed, 15 Mar 2023 17:11:15 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS; Wed, 15 Mar 2023 17:11:13 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 4CEB941959; Wed, 15 Mar 2023 17:11:12 +0100 (CET) From: Stefan Sterz To: pve-devel@lists.proxmox.com, pmg-devel@lists.proxmox.com Date: Wed, 15 Mar 2023 17:11:03 +0100 Message-Id: <20230315161105.1814312-2-s.sterz@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20230315161105.1814312-1-s.sterz@proxmox.com> References: <20230315161105.1814312-1-s.sterz@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.066 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pmg-devel] [PATCH widget-toolkit 1/1] dark-theme: add a dark theme for the asciidoc-based documentation X-BeenThere: pmg-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Mail Gateway development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Wed, 15 Mar 2023 16:11:15 -0000 this commit adds a css file to the proxmox-widget-toolkit-dev package that makes it possible for pve and pmg docs to use a dark theme Signed-off-by: Stefan Sterz --- debian/proxmox-widget-toolkit-dev.install | 1 + src/proxmox-dark/Makefile | 12 +- src/proxmox-dark/scss/ProxmoxDarkADocs.scss | 9 ++ src/proxmox-dark/scss/adocs/_admonition.scss | 18 +++ src/proxmox-dark/scss/adocs/_general.scss | 120 +++++++++++++++++++ 5 files changed, 159 insertions(+), 1 deletion(-) create mode 100644 src/proxmox-dark/scss/ProxmoxDarkADocs.scss create mode 100644 src/proxmox-dark/scss/adocs/_admonition.scss create mode 100644 src/proxmox-dark/scss/adocs/_general.scss diff --git a/debian/proxmox-widget-toolkit-dev.install b/debian/proxmox-widget-toolkit-dev.install index 620d69f..b0cf14b 100644 --- a/debian/proxmox-widget-toolkit-dev.install +++ b/debian/proxmox-widget-toolkit-dev.install @@ -1,2 +1,3 @@ Toolkit.js /usr/share/javascript/proxmox-widget-toolkit-dev/ api-viewer/APIViewer.js /usr/share/javascript/proxmox-widget-toolkit-dev/ +proxmox-dark/theme-proxmox-dark-adocs.css /usr/share/javascript/proxmox-widget-toolkit-dev/ diff --git a/src/proxmox-dark/Makefile b/src/proxmox-dark/Makefile index 2ac6f22..1777e36 100644 --- a/src/proxmox-dark/Makefile +++ b/src/proxmox-dark/Makefile @@ -30,8 +30,14 @@ SCSSSRC=scss/ProxmoxDark.scss \ scss/proxmox/_tags.scss \ scss/proxmox/_datepicker.scss +DOCSSCSSRC=scss/ProxmoxDarkADocs.scss \ + scss/abstracts/_mixins.scss \ + scss/abstracts/_variables.scss \ + scss/adocs/_general.scss \ + scss/adocs/_admonition.scss + .PHONY: all -all: theme-proxmox-dark.css +all: theme-proxmox-dark.css theme-proxmox-dark-adocs.css .PHONY: install install: theme-proxmox-dark.css @@ -42,6 +48,10 @@ theme-proxmox-dark.css: ${SCSSSRC} sassc -t compressed $< $@.tmp mv $@.tmp $@ +theme-proxmox-dark-adocs.css: ${DOCSSCSSRC} + sassc -t expanded $< $@.tmp + mv $@.tmp $@ + .PHONY: clean clean: rm -rf theme-proxmox-dark.css diff --git a/src/proxmox-dark/scss/ProxmoxDarkADocs.scss b/src/proxmox-dark/scss/ProxmoxDarkADocs.scss new file mode 100644 index 0000000..1efc3fa --- /dev/null +++ b/src/proxmox-dark/scss/ProxmoxDarkADocs.scss @@ -0,0 +1,9 @@ +@charset "utf-8"; + +// Abstracts +@import "abstracts/mixins"; +@import "abstracts/variables"; + +// ascii doc styles +@import "adocs/general"; +@import "adocs/admonition" diff --git a/src/proxmox-dark/scss/adocs/_admonition.scss b/src/proxmox-dark/scss/adocs/_admonition.scss new file mode 100644 index 0000000..46a47a5 --- /dev/null +++ b/src/proxmox-dark/scss/adocs/_admonition.scss @@ -0,0 +1,18 @@ +/* adjust admonition block spacing. this allows for a background on + * admonition blocks that doesn't make the elements look to tightly + * spaced. + */ +div.admonitionblock { + border-radius: 3px; + margin: 1.5em 0; + padding: 0.5em 10% 0.5em 0.5em; + + td.icon { + padding-right: 0.5em; + } + + td.icon > img { + padding: 0.15em; + box-sizing: border-box; + } +} diff --git a/src/proxmox-dark/scss/adocs/_general.scss b/src/proxmox-dark/scss/adocs/_general.scss new file mode 100644 index 0000000..d411ed1 --- /dev/null +++ b/src/proxmox-dark/scss/adocs/_general.scss @@ -0,0 +1,120 @@ +@media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + } + + body { + background-color: $background-darker; + color: $text-color; + } + + a { + color: $highlighted-text; + + &:visited { + color: $highlighted-text-alt; + } + } + + // style headlines, titles etc. + h1, + h2, + h3, + h4, + h5, + h6, + thead, + #author, + #toctitle, + div.title, + td.hdlist1, + caption.title, + p.tableblock.header { + color: $highlighted-text-alt; + } + + h1, + h2, + h3, + #footer { + border-color: $border-color; + } + + // formatted colored text + dt, + em, + pre, + code, + strong, + .monospaced { + color: $highlighted-text; + } + + // style the table of contents sidebar + div #toc { + color: $text-color; + background-color: $background-darkest; + border-color: $border-color-alt; + } + + div #toc a:link, + div #toc a:visited { + color: $text-color; + } + + // reduce the brigthness of images a bit and make it reversable + // through hovering over them. + .image > img { + filter: brightness(90%); + + &:hover { + filter: none; + } + } + + // tables + table.tableblock { + border-color: $primary-light; + } + + div.quoteblock, + div.verseblock { + color: $text-color; + border-color: $border-color; + } + + // listings (e.g. code snippet blocks) + div.listingblock > div.content { + background-color: $background-darkest; + border-color: $border-color-alt; + } + + // admonition blocks (e.g. notes, warnings etc.) + div.admonitionblock { + background-color: $background-dark; + color: $text-color; + + td.content { + border-color: $border-color; + } + + // makes the admonition icons appear a bit more consistent, by + // adding a white background the shadows in the icons look + // "correct" + td.icon > img { + background-color: white; + border-radius: 100%; + filter: brightness(95%); + } + } + + // invert the logo + #header > h1 > .image > img { + filter: invert(100%) hue-rotate(180deg) brightness(90%); + } + + // fixes the black text on unorderd lists + ul > li > * { + color: $text-color; + } +} -- 2.30.2