]> git.proxmox.com Git - proxmox-widget-toolkit.git/commit - src/Makefile
dark-theme: add initial version of the proxmox-dark theme
authorDaniel Tschlatscher <d.tschlatscher@proxmox.com>
Wed, 8 Mar 2023 16:33:12 +0000 (17:33 +0100)
committerThomas Lamprecht <t.lamprecht@proxmox.com>
Wed, 8 Mar 2023 16:49:19 +0000 (17:49 +0100)
commit6bf5e1256e4b7da23a502d796c05d7050dc29ac3
tree9911e560783ff628bc37a8c7010055b8dff94a36
parent7e66b73ce4860679173b5e260b16e2e8e1def65c
dark-theme: add initial version of the proxmox-dark theme

adds an initial version of a dark theme for all proxmox products. the
theme works by simply loading an additional css file that adjust the
colors of the original theme "crisp" to be more suitable for a dark
theme.

the theme itself is written in scss, so we need to add sassc as a
build dependency. while sassc is deprecated, it is still maintained in
the debian repositories and, thus, needs no additional packaging on
our end.

this version adds the following on-top of Daniel Tschlatscher's
original draft:

* removes checked-in build artifacts and other stuff that shouldn't be
  tracked
* code clean-up and removal of redundant code
* refactors:
    * icon styling
    * color handling for charts (moved to css variables)
    * color variables, consolidates them and makes the "functional"
    * color values, improves contrast and makes the theme appear more
      consistent
    * using the "theme-" prefix
* adds:
    * markdown note styles
    * combo-box trigger styles
    * even more icon styles (e.g., template icons, check boxes etc.)
    * loading spinners styles
    * number field up and down arrow styles
    * an additional auto theme that switches between light and dark
      theme dynamically
    * widget toolkit hints
    * ceph install mask
    * grid group headers
    * color to toggled buttons
    * date picker styles
    * drag and drop proxy styles
* fixes:
    * contrast on control elements for "scrollable" sidebars
    * make the general appearance closer to the light theme ("crisp")
    * buttons (when hovered, toggled etc)
    * background masking (e.g., when showing the log-in form)
    * grid header separator (adds an outline)
    * separator lines in some menus
    * makes the custom unknown icon more discernible
    * makes headers more readable
    * color adjustments to several components for consistency
    * reduces brightness of dividers in toolbars
    * border color on chart legend elements
    * removes a black border from docked toolbars (e.g., tag edit)
    * dims the "invalid" color to appear less aggressive
    * add hover effects in grids and make them consistent with "crisp"
    * summary rows
    * selected and hovered elements in boundlists
    * row numberers in grids
    * contrast of links in hints
    * ceph overview border colors (e.g., OSD in/out/up/down grid)
    * bottom splitter contrast in certain situations
    * tag visibility
    * pbs compatibility (help buttons stylings, icons, tabs)
    * pmg compatibility:
         * remove border around the spanning element in the header
         * style spam score grid
         * style tracking center rows
         * add appropriate colors to buttons in the quarantine
         * style mail-info element in the quarantine

Co-authored-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
Co-authored-by: Stefan Sterz <s.sterz@proxmox.com>
Signed-off-by: Daniel Tschlatscher <d.tschlatscher@proxmox.com>
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
33 files changed:
debian/control
src/Makefile
src/defines.mk
src/proxmox-dark/Makefile [new file with mode: 0644]
src/proxmox-dark/scss/ProxmoxDark.scss [new file with mode: 0644]
src/proxmox-dark/scss/abstracts/_mixins.scss [new file with mode: 0644]
src/proxmox-dark/scss/abstracts/_variables.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_body.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_grid.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_menu.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_panel.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_presentation.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_progress.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_splitter.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_tabbar.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_tip.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_toolbar.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_treepanel.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/_window.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/form/_button.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/form/_combobox.scss [new file with mode: 0644]
src/proxmox-dark/scss/extjs/form/_formfield.scss [new file with mode: 0644]
src/proxmox-dark/scss/other/_charts.scss [new file with mode: 0644]
src/proxmox-dark/scss/other/_icons.scss [new file with mode: 0644]
src/proxmox-dark/scss/proxmox/_datepicker.scss [new file with mode: 0644]
src/proxmox-dark/scss/proxmox/_general.scss [new file with mode: 0644]
src/proxmox-dark/scss/proxmox/_helpbutton.scss [new file with mode: 0644]
src/proxmox-dark/scss/proxmox/_loadingindicator.scss [new file with mode: 0644]
src/proxmox-dark/scss/proxmox/_markdown.scss [new file with mode: 0644]
src/proxmox-dark/scss/proxmox/_nodes.scss [new file with mode: 0644]
src/proxmox-dark/scss/proxmox/_quarantine.scss [new file with mode: 0644]
src/proxmox-dark/scss/proxmox/_storages.scss [new file with mode: 0644]
src/proxmox-dark/scss/proxmox/_tags.scss [new file with mode: 0644]