299 lines
7.9 KiB
CSS
299 lines
7.9 KiB
CSS
/* ==UserStyle==
|
|
@name Gruvbox for Proxmox
|
|
@namespace git.m3.fyi/Marsn3
|
|
@version 1.0.4
|
|
@description Gruvbox Theme for Proxmox
|
|
@author Marsn3
|
|
@homepageURL https://git.m3.fyi/Marsn3/userstyles
|
|
@updateURL https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/proxmox.user.css
|
|
@license MIT
|
|
==/UserStyle== */
|
|
@-moz-document domain("pve.m3.fyi"),domain("pve.mniermann.de") {
|
|
.x-progress.critical .x-progress-bar,
|
|
.proxmox-invalid-row {
|
|
background-color: var(--red);
|
|
}
|
|
#proxmoxlogo-1018-img {
|
|
filter: invert(100%) sepia(100%);
|
|
}
|
|
.critical {
|
|
color: var(--red);
|
|
}
|
|
.warning {
|
|
color: var(--yellow);
|
|
}
|
|
.good {
|
|
color: var(--green);
|
|
}
|
|
.x-progress.warning .x-progress-bar {
|
|
background-color: var(--yellow);
|
|
}
|
|
.x-progress-default .x-progress-bar-default {
|
|
background-color: var(--green);
|
|
}
|
|
.x-progress-default {
|
|
background-color: var(--fg4);
|
|
border: none;
|
|
}
|
|
.x-mask {
|
|
background-color: rgb(var(--rgb-bg4) / 70%) !important;
|
|
}
|
|
.x-tab-icon-el-default,
|
|
.x-column-header,
|
|
.x-tab.x-tab-disabled.x-tab-default .x-tab-icon-el,
|
|
.x-tab.x-tab-active.x-tab-default .x-tab-icon-el,
|
|
.x-btn-icon-el-default-small,
|
|
.x-treelist-item-icon,
|
|
.x-treelist-item-text,
|
|
.x-btn-inner-default-small,
|
|
.x-tab-inner-default,
|
|
.proxmox-inline-button .x-btn-inner,
|
|
.x-btn-inner-default-toolbar-small,
|
|
.x-mask-msg-inner,
|
|
.x-legend-item,
|
|
.x-tip-body-form-invalid,
|
|
.x-body,
|
|
.x-menu-item-text-default,
|
|
.x-treelist-item-expander,
|
|
.x-treelist-row-over > * > .x-treelist-item-icon,
|
|
.x-treelist-row-over > * > .x-treelist-item-text {
|
|
color: var(--fg);
|
|
}
|
|
#userinfo {
|
|
background-color: var(--bg4) !important;
|
|
border-color: var(--fg) !important;
|
|
}
|
|
.x-grid-with-row-lines .x-grid-item-selected + .x-grid-item {
|
|
border-top-color: var(--fg2);
|
|
}
|
|
.x-btn-wrap-default-toolbar-small.x-btn-split-right:after,
|
|
.x-btn-wrap-default-toolbar-small.x-btn-arrow-right:after {
|
|
filter: var(--filter-reset) var(--filter-bg);
|
|
}
|
|
.x-treelist-pve-nav,
|
|
.x-grid-item {
|
|
background-color: var(--bg3);
|
|
color: var(--fg);
|
|
}
|
|
.x-treelist-item-selected > .x-treelist-row,
|
|
.x-grid-item-selected,
|
|
.x-menu-item-default.x-menu-item-focus,
|
|
.x-menu-item-default.x-menu-item-active,
|
|
.x-treelist-row-over,
|
|
.x-column-header-over,
|
|
.x-keyboard-mode .x-btn-focus.x-btn-default-toolbar-small,
|
|
.x-keyboard-mode .x-btn-focus.x-btn-pressed.x-btn-default-toolbar-small,
|
|
.x-treelist-row-over > * > .x-treelist-item-expander,
|
|
.x-keyboard-mode .x-btn-focus.x-btn-over.x-btn-default-toolbar-small,
|
|
.x-btn-over.x-btn-over.x-btn-default-toolbar-small,
|
|
#noVNC_modifiers {
|
|
border-color: var(--bg3);
|
|
box-shadow: none;
|
|
background-color: var(--fg4);
|
|
color: var(--fg);
|
|
}
|
|
.x-keyboard-mode .x-grid-item-focused,
|
|
.x-keyboard-mode .x-column-header.x-column-header-focus {
|
|
color: var(--fg2);
|
|
}
|
|
.x-grid-with-row-lines .x-grid-item {
|
|
border-color: var(--fg4);
|
|
}
|
|
.x-tree-icon-custom.stopped,
|
|
.x-grid-icon-custom.stopped,
|
|
.x-tree-icon-custom.offline,
|
|
.x-grid-icon-custom.offline {
|
|
color: var(--fg3);
|
|
}
|
|
.x-tree-icon-custom.running {
|
|
color: var(--bg);
|
|
}
|
|
.noVNC_panel,
|
|
.noVNC_panel .noVNC_heading {
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
}
|
|
.usage-wrapper {
|
|
border: 1px solid var(--bg1);
|
|
}
|
|
.usage {
|
|
background-color: var(--bg1);
|
|
}
|
|
.x-tree-icon-custom {
|
|
color: var(--bg1);
|
|
}
|
|
.x-toolbar-default .x-toolbar-separator-horizontal {
|
|
border-left-color: var(--fg4);
|
|
border-right-color: var(--fg);
|
|
}
|
|
.fa-ceph:before,
|
|
.x-tree-arrows .x-tree-expander,
|
|
.x-grid-row-console,
|
|
.pve-itype-icon-cpu,
|
|
.pve-itype-icon-memory,
|
|
.x-menu-item-icon-default,
|
|
.pve-itype-icon-serial,
|
|
.noVNC_button {
|
|
filter: var(--filter-reset) var(--filter-fg);
|
|
}
|
|
.x-btn-default-toolbar-small {
|
|
border-color: var(--fg4);
|
|
background-color: var(--fg3);
|
|
}
|
|
.x-btn.x-btn-disabled.x-btn-default-toolbar-small {
|
|
background-color: var(--fg3);
|
|
}
|
|
|
|
.x-tree-icon-custom.running:after,
|
|
.x-grid-icon-custom.running:after,
|
|
.x-window-header-title-default,
|
|
.x-panel-header-title-default,
|
|
.x-tree-icon-custom.online:after,
|
|
.x-grid-icon-custom.online:after {
|
|
text-shadow: none;
|
|
color: var(--green);
|
|
}
|
|
.x-boundlist,
|
|
.x-mask-msg,
|
|
#noVNC_control_bar,
|
|
#noVNC_control_bar_handle,
|
|
.noVNC_panel .noVNC_heading {
|
|
background: var(--bg);
|
|
border-color: var(--bg4);
|
|
}
|
|
.x-form-item-label-default {
|
|
color: var(--fg3);
|
|
}
|
|
.x-tab.x-tab-disabled.x-tab-default {
|
|
border-color: var(--bg4);
|
|
background-color: var(--bg2);
|
|
}
|
|
.x-form-invalid-field-default,
|
|
.x-form-text-default,
|
|
.x-tab-bar-default,
|
|
.x-menu-body-default {
|
|
background-color: var(--bg3);
|
|
color: var(--fg);
|
|
}
|
|
.x-form-trigger-wrap-default.x-form-trigger-wrap-focus,
|
|
.x-tool-tool-el {
|
|
border-color: var(--green);
|
|
}
|
|
.x-column-header {
|
|
border-right: 1px solid var(--bg3);
|
|
}
|
|
.x-panel-header-default,
|
|
.x-column-header,
|
|
.x-grid-header-ct {
|
|
background-color: var(--bg2);
|
|
border-color: var(--bg4);
|
|
}
|
|
.x-grid-header-ct {
|
|
border: 1px solid var(--bg4);
|
|
}
|
|
.x-column-header-trigger,
|
|
.x-menu-icon-separator-default {
|
|
background-color: var(--bg2);
|
|
border-left: 1px solid var(--bg4);
|
|
}
|
|
.x-window-header-default .x-tool-img,
|
|
.x-panel-header-default .x-tool-tool-el {
|
|
background-color: var(--bg2);
|
|
}
|
|
body.x-border-layout-ct,
|
|
div.x-border-layout-ct {
|
|
background-color: var(--bg1);
|
|
}
|
|
.x-form-trigger-wrap-default.x-form-trigger-wrap-invalid {
|
|
border-color: var(--red);
|
|
}
|
|
.x-splitter-collapsed .x-layout-split-bottom,
|
|
.x-layout-split-bottom,
|
|
.x-column-header-sort-DESC .x-column-header-text-inner {
|
|
filter: var(--filter-reset) var(--filter-fg2);
|
|
}
|
|
.x-toolbar-default {
|
|
background-color: var(--bg2);
|
|
border-color: var(--bg4);
|
|
}
|
|
.x-btn-over.x-btn-default-small {
|
|
background-color: var(--green-dim);
|
|
border-color: var(--green-dim);
|
|
}
|
|
.x-btn-default-small,
|
|
.x-tab.x-tab-active.x-tab-default,
|
|
.x-btn.x-btn-disabled.x-btn-default-small {
|
|
background-color: var(--green);
|
|
border-color: var(--green);
|
|
}
|
|
.x-body {
|
|
color: var(--fg);
|
|
background: var(--bg);
|
|
}
|
|
.x-window-default {
|
|
border-color: var(--bg4);
|
|
background-color: var(--bg4);
|
|
}
|
|
.x-window-header-default,
|
|
.x-panel-default,
|
|
.x-form-trigger-wrap-default,
|
|
.x-tab-default,
|
|
.x-grid-with-col-lines .x-grid-item-selected .x-grid-cell {
|
|
border-color: var(--bg4);
|
|
}
|
|
.x-form-trigger-default {
|
|
background-color: var(--bg1);
|
|
}
|
|
.x-window-header-default-top,
|
|
.x-toolbar-footer,
|
|
.x-tab-default-top {
|
|
background-color: var(--bg2);
|
|
}
|
|
.x-tip-form-invalid {
|
|
background-color: var(--bg3);
|
|
border: var(--bg4);
|
|
}
|
|
.x-legend-item-marker,
|
|
.x-surface,
|
|
.x-surface-canvas {
|
|
filter: brightness(60%) grayscale(100) sepia(100%);
|
|
}
|
|
.x-window-body-default,
|
|
.x-panel-body-default,
|
|
.x-message-box .x-window-body {
|
|
border-color: var(--bg4);
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
}
|
|
.x-form-text-default::placeholder {
|
|
color: var(--fg3);
|
|
}
|
|
|
|
.x-keyboard-mode .x-tab-default-top.x-tab-focus.x-tab-default,
|
|
.x-keyboard-mode .x-tab-default-top.x-tab-focus.x-tab-over.x-tab-default,
|
|
.x-keyboard-mode .x-tab-default-top.x-tab-active.x-tab-over.x-tab-default,
|
|
.x-keyboard-mode .x-btn-focus.x-btn-default-small,
|
|
.x-keyboard-mode .x-btn-focus.x-btn-pressed.x-btn-default-small,
|
|
.x-keyboard-mode .x-btn-focus.x-btn-over.x-btn-default-small {
|
|
background: var(--green-dim);
|
|
border-color: var(--green-dim);
|
|
box-shadow: none;
|
|
}
|
|
.x-boundlist-item-over,
|
|
.x-boundlist-selected,
|
|
.x-tab-over.x-tab-default {
|
|
background: var(--green);
|
|
border-color: var(--green);
|
|
}
|
|
.x-legend-horizontal .x-legend-item {
|
|
border-color: var(--fg4) !important;
|
|
}
|
|
.x-boundlist-item,
|
|
.x-legend-container,
|
|
.x-legend {
|
|
background: var(--bg2);
|
|
color: var(--fg);
|
|
box-shadow: none;
|
|
border-color: var(--bg4);
|
|
}
|
|
}
|