Update proxmox theme
This commit is contained in:
parent
3a411c8e16
commit
3f9a8be902
1 changed files with 319 additions and 29 deletions
|
|
@ -8,7 +8,6 @@
|
|||
@updateURL https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/proxmox.user.css
|
||||
@license MIT
|
||||
==/UserStyle== */
|
||||
|
||||
@-moz-document domain("pve.m3.fyi") {
|
||||
:root {
|
||||
--bg_h: #1d2021;
|
||||
|
|
@ -43,37 +42,37 @@
|
|||
--gray-dim: #a89984;
|
||||
--orange-dim: #d65d0e;
|
||||
|
||||
--rgb-bg_h: 29, 32, 33;
|
||||
--rgb-bg: 40, 40, 40;
|
||||
--rgb-bg_s: 50, 48, 47;
|
||||
--rgb-bg1: 60, 56, 54;
|
||||
--rgb-bg2: 80, 73, 69;
|
||||
--rgb-bg3: 102, 92, 84;
|
||||
--rgb-bg4: 124, 111, 100;
|
||||
--rgb-bg_h: 29 32 33;
|
||||
--rgb-bg: 40 40 40;
|
||||
--rgb-bg_s: 50 48 47;
|
||||
--rgb-bg1: 60 56 54;
|
||||
--rgb-bg2: 80 73 69;
|
||||
--rgb-bg3: 102 92 84;
|
||||
--rgb-bg4: 124 111 100;
|
||||
|
||||
--rgb-fg: 251, 241, 199;
|
||||
--rgb-fg1: 235, 219, 178;
|
||||
--rgb-fg2: 213, 196, 161;
|
||||
--rgb-fg3: 189, 174, 147;
|
||||
--rgb-fg4: 168, 153, 132;
|
||||
--rgb-fg: 251 241 199;
|
||||
--rgb-fg1: 235 219 178;
|
||||
--rgb-fg2: 213 196 161;
|
||||
--rgb-fg3: 189 174 147;
|
||||
--rgb-fg4: 168 153 132;
|
||||
|
||||
--rgb-red: 251, 73, 52;
|
||||
--rgb-green: 184, 187, 38;
|
||||
--rgb-yellow: 250, 189, 47;
|
||||
--rgb-blue: 131, 165, 152;
|
||||
--rgb-purple: 211, 134, 155;
|
||||
--rgb-aqua: 142, 192, 124;
|
||||
--rgb-gray: 146, 131, 116;
|
||||
--rgb-orange: 254, 128, 25;
|
||||
--rgb-red: 251 73 52;
|
||||
--rgb-green: 184 187 38;
|
||||
--rgb-yellow: 250 189 47;
|
||||
--rgb-blue: 131 165 152;
|
||||
--rgb-purple: 211 134 155;
|
||||
--rgb-aqua: 142 192 124;
|
||||
--rgb-gray: 146 131 116;
|
||||
--rgb-orange: 254 128 25;
|
||||
|
||||
--rgb-red-dim: 204, 36, 18;
|
||||
--rgb-green-dim: 152, 151, 26;
|
||||
--rgb-yellow-dim: 215, 153, 33;
|
||||
--rgb-blue-dim: 69, 133, 136;
|
||||
--rgb-purple-dim: 177, 98, 134;
|
||||
--rgb-aqua-dim: 104, 157, 106;
|
||||
--rgb-gray-dim: 168, 153, 132;
|
||||
--rgb-orange-dim: 214, 93, 14;
|
||||
--rgb-red-dim: 204 36 18;
|
||||
--rgb-green-dim: 152 151 26;
|
||||
--rgb-yellow-dim: 215 153 33;
|
||||
--rgb-blue-dim: 69 133 136;
|
||||
--rgb-purple-dim: 177 98 134;
|
||||
--rgb-aqua-dim: 104 157 106;
|
||||
--rgb-gray-dim: 168 153 132;
|
||||
--rgb-orange-dim: 214 93 14;
|
||||
|
||||
--filter-reset: brightness(0) saturate(100%);
|
||||
--filter-bg_h: invert(8%) sepia(12%) saturate(391%) hue-rotate(149deg)
|
||||
|
|
@ -139,4 +138,295 @@
|
|||
--monospaceFontFamily: "ComicCodeLigatures Nerd Font", "Ubuntu Mono",
|
||||
monospace, emoji;
|
||||
}
|
||||
|
||||
.x-progress.critical .x-progress-bar,
|
||||
.proxmox-invalid-row {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.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 {
|
||||
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);
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
background-color: var(--bg1);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--bg3);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue