diff --git a/src/proxmox.user.css b/src/proxmox.user.css index 8274317..03e8ae9 100644 --- a/src/proxmox.user.css +++ b/src/proxmox.user.css @@ -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); + } }