* [pve-devel] [PATCH widget-toolkit 0/1] Proxmox Dark Theme - AsciiDoc @ 2023-03-15 16:11 ` Stefan Sterz 0 siblings, 0 replies; 6+ messages in thread From: Stefan Sterz @ 2023-03-15 16:11 UTC (permalink / raw) To: pve-devel, pmg-devel this series add a dark theme for the asciidoc-based documentation for pve and pmg. first it adds a new css dependency to the proxmox-widget-toolkit-dev package. then the following two commits, one for pve and for pmg each, uses that css file to add a dark theme to the respective documentation. it behaves like the api viewer or the gui's 'auto' theme (that is to say, the dark theme is used based on a user's preference). Stefan Sterz (1): dark-theme: add a dark theme for the asciidoc-based documentation 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 -- 2.30.2 ^ permalink raw reply [flat|nested] 6+ messages in thread
* [pmg-devel] [PATCH widget-toolkit 0/1] Proxmox Dark Theme - AsciiDoc @ 2023-03-15 16:11 ` Stefan Sterz 0 siblings, 0 replies; 6+ messages in thread From: Stefan Sterz @ 2023-03-15 16:11 UTC (permalink / raw) To: pve-devel, pmg-devel this series add a dark theme for the asciidoc-based documentation for pve and pmg. first it adds a new css dependency to the proxmox-widget-toolkit-dev package. then the following two commits, one for pve and for pmg each, uses that css file to add a dark theme to the respective documentation. it behaves like the api viewer or the gui's 'auto' theme (that is to say, the dark theme is used based on a user's preference). Stefan Sterz (1): dark-theme: add a dark theme for the asciidoc-based documentation 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 -- 2.30.2 ^ permalink raw reply [flat|nested] 6+ messages in thread
* [pve-devel] [PATCH widget-toolkit 1/1] dark-theme: add a dark theme for the asciidoc-based documentation 2023-03-15 16:11 ` [pmg-devel] " Stefan Sterz @ 2023-03-15 16:11 ` Stefan Sterz -1 siblings, 0 replies; 6+ messages in thread From: Stefan Sterz @ 2023-03-15 16:11 UTC (permalink / raw) To: pve-devel, pmg-devel 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 <s.sterz@proxmox.com> --- 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 ^ permalink raw reply [flat|nested] 6+ messages in thread
* [pmg-devel] [PATCH widget-toolkit 1/1] dark-theme: add a dark theme for the asciidoc-based documentation @ 2023-03-15 16:11 ` Stefan Sterz 0 siblings, 0 replies; 6+ messages in thread From: Stefan Sterz @ 2023-03-15 16:11 UTC (permalink / raw) To: pve-devel, pmg-devel 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 <s.sterz@proxmox.com> --- 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 ^ permalink raw reply [flat|nested] 6+ messages in thread
* [pve-devel] [PATCH docs] html conf: add support for a dark mode in the documentation 2023-03-15 16:11 ` [pmg-devel] " Stefan Sterz (?) (?) @ 2023-03-15 16:11 ` Stefan Sterz -1 siblings, 0 replies; 6+ messages in thread From: Stefan Sterz @ 2023-03-15 16:11 UTC (permalink / raw) To: pve-devel this commit adds support for a dark theme that behaves similarly to that one used by the api viewer. Signed-off-by: Stefan Sterz <s.sterz@proxmox.com> --- asciidoc/pve-html.conf | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/asciidoc/pve-html.conf b/asciidoc/pve-html.conf index 8a089d3..99b767d 100644 --- a/asciidoc/pve-html.conf +++ b/asciidoc/pve-html.conf @@ -629,6 +629,10 @@ div .toclevel1 { </style> endif::toc2[] +<style type="text/css"> +include1::{stylesdir=/usr/share/javascript/proxmox-widget-toolkit-dev}/theme-proxmox-dark-adocs.css[] +</style> + ifndef::disable-javascript[] ifdef::linkcss[] <script type="text/javascript" src="{scriptsdir=.}/asciidoc.js"></script> -- 2.30.2 ^ permalink raw reply [flat|nested] 6+ messages in thread
* [pmg-devel] [PATCH pmg-docs] html conf: add support for a dark mode in the documentation 2023-03-15 16:11 ` [pmg-devel] " Stefan Sterz ` (2 preceding siblings ...) (?) @ 2023-03-15 16:11 ` Stefan Sterz -1 siblings, 0 replies; 6+ messages in thread From: Stefan Sterz @ 2023-03-15 16:11 UTC (permalink / raw) To: pmg-devel this commit adds support for a dark theme that behaves similarly to that one used by the api viewer. Signed-off-by: Stefan Sterz <s.sterz@proxmox.com> --- asciidoc/pmg-html.conf | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/asciidoc/pmg-html.conf b/asciidoc/pmg-html.conf index 707a83f..7fc1d4f 100644 --- a/asciidoc/pmg-html.conf +++ b/asciidoc/pmg-html.conf @@ -632,6 +632,10 @@ div .toclevel1 { </style> endif::toc2[] +<style type="text/css"> +include1::{stylesdir=/usr/share/javascript/proxmox-widget-toolkit-dev}/theme-proxmox-dark-adocs.css[] +</style> + ifndef::disable-javascript[] ifdef::linkcss[] <script type="text/javascript" src="{scriptsdir=.}/asciidoc.js"></script> -- 2.30.2 ^ permalink raw reply [flat|nested] 6+ messages in thread
end of thread, other threads:[~2023-03-15 16:11 UTC | newest] Thread overview: 6+ messages (download: mbox.gz / follow: Atom feed) -- links below jump to the message on this page -- 2023-03-15 16:11 [pve-devel] [PATCH widget-toolkit 0/1] Proxmox Dark Theme - AsciiDoc Stefan Sterz 2023-03-15 16:11 ` [pmg-devel] " Stefan Sterz 2023-03-15 16:11 ` [pve-devel] [PATCH widget-toolkit 1/1] dark-theme: add a dark theme for the asciidoc-based documentation Stefan Sterz 2023-03-15 16:11 ` [pmg-devel] " Stefan Sterz 2023-03-15 16:11 ` [pve-devel] [PATCH docs] html conf: add support for a dark mode in the documentation Stefan Sterz 2023-03-15 16:11 ` [pmg-devel] [PATCH pmg-docs] " Stefan Sterz
This is an external index of several public inboxes, see mirroring instructions on how to clone and mirror all data and code used by this external index.