diff --git a/themes/theme-theraiwy-dark.css b/themes/theme-theraiwy-dark.css index 662ee2e..0ef3398 100644 --- a/themes/theme-theraiwy-dark.css +++ b/themes/theme-theraiwy-dark.css @@ -1,1797 +1,80 @@ /*!TheRaiwy Dark*/ /* * ProxMorph Theme: TheRaiwy Dark - * Cyber aesthetic theme for Proxmox — dark, red-accented, grid-inspired + * Cyber aesthetic theme — dark, red-accented, grid background * Version: 1.0.0 + * Based on UniFi theme framework v5.94 * - * Based on ProxMorph v2.2.23 GitHub Dark theme framework. - * Replaces Primer colors with TheRaiwy's cyber dark palette: - * #080808 body / #0d0d0d surface / #dc2626 accent - * - * TheRaiwy Cyber Dark Mode Color Palette: - * - * CANVAS (Backgrounds): - * - canvas-default: #080808 - Main page background (deep black) - * - canvas-muted: #0d0d0d - Muted/card backgrounds - * - canvas-inset: #050505 - Header, inset areas - * - canvas-subtle: #111111 - Subtle backgrounds - * - * FOREGROUND (Text): - * - fg-default: #f0ede8 - Primary text (warm white) - * - fg-muted: #b0ada8 - Secondary/muted text - * - fg-subtle: #6b6966 - Tertiary text - * - fg-onEmphasis: #ffffff - Text on colored backgrounds - * - * BORDERS: - * - border-default: #2e2e31 - Default borders - * - border-muted: rgba(46, 46, 49, 0.7) - Muted borders - * - border-subtle: rgba(240, 237, 232, 0.1) - Subtle borders - * - * ACCENT (Red): - * - accent-fg: #dc2626 - Links, accent text - * - accent-emphasis: #c62222 - Active states - * - * SUCCESS (Green): - * - success-fg: #22c55e - Success text - * - success-emphasis: #16a34a - Primary buttons - * - * BORDER RADII (UniFi-aligned): - * - radius-sm: 4px - Form inputs, checkboxes - * - radius-md: 6px - Buttons - * - radius-lg: 8px - Windows, panels, cards + * TheRaiwy Cyber Dark Palette: + * - Body: #080808 / Surface: #0d0d0d / Elevated: #111111 + * - Accent: #dc2626 (red) / Hover: #e03434 / Active: #c62222 + * - Text: #f0ede8 (warm white) / Dim: #b0ada8 / Muted: #6b6966 + * - Borders: #2e2e31 / Strong: #3a3a3d + * - Success: #22c55e / Warning: #cc9903 / Danger: #dc2626 */ /* ===================================================== CSS VARIABLES ===================================================== */ :root { - /* TheRaiwy Cyber Dark Mode Tokens */ + --trw-color-primary: #dc2626; + --trw-color-danger: #dc2626; + --trw-color-warning: #cc9903; + --trw-color-success: #22c55e; - /* CANVAS (Backgrounds) */ - --trw-canvas-default: #080808; - --trw-canvas-muted: #0d0d0d; - --trw-canvas-inset: #050505; - --trw-canvas-subtle: #111111; + /* ProxMorph semantic variables */ + --pm-accent: #dc2626; + --pm-accent-hover: #e03434; + --pm-accent-active: #c62222; - /* FOREGROUND (Text) */ - --trw-fg-default: #f0ede8; - --trw-fg-muted: #b0ada8; - --trw-fg-subtle: #6b6966; - --trw-fg-on-emphasis: #ffffff; + --pm-success: #22c55e; + --pm-warning: var(--trw-color-warning); + --pm-error: var(--trw-color-danger); - /* BORDERS */ - --trw-border-default: #2e2e31; - --trw-border-muted: rgba(46, 46, 49, 0.7); - --trw-border-subtle: rgba(240, 237, 232, 0.1); + /* Base palette */ + --pm-bg-base: #080808; + --pm-bg-surface: #0d0d0d; + --pm-bg-elevated: #111111; - /* ACCENT (Red) */ - --trw-accent-fg: #dc2626; - --trw-accent-emphasis: #c62222; - --trw-accent-muted: rgba(220, 38, 38, 0.4); - --trw-accent-subtle: rgba(220, 38, 38, 0.15); + --pm-border: #2e2e31; + --pm-border-strong: #3a3a3d; - /* SUCCESS (Green) */ - --trw-success-fg: #22c55e; - --trw-success-emphasis: #16a34a; - --trw-success-hover: #1fb954; - --trw-success-active: #22c55e; + --pm-text: #f0ede8; + --pm-text-dim: #b0ada8; + --pm-text-muted: #6b6966; + --pm-text-disabled: #5b5956; + --pm-text-bright: #ffffff; - /* DANGER (Red) */ - --trw-danger-fg: #dc2626; - --trw-danger-emphasis: #b91c1c; + --pm-hover-subtle: rgba(240, 237, 232, 0.02); + --pm-hover-medium: rgba(240, 237, 232, 0.04); + --pm-hover-strong: rgba(240, 237, 232, 0.07); - /* ATTENTION (Yellow) */ - --trw-attention-fg: #cc9903; - --trw-attention-emphasis: #a37a02; + --pm-radius-sm: 4px; + --pm-radius-md: 6px; + --pm-radius-lg: 8px; + --pm-radius-xl: 12px; - /* Select menu active - red-tinted */ - --trw-selectmenu-active: #2a0808; + --pm-focus-ring-color: rgba(220, 38, 38, 0.15); - /* Border Radii - UniFi aligned */ - --trw-radius-sm: 4px; - --trw-radius-md: 6px; - --trw-radius-lg: 8px; - - /* Hover overlay */ - --trw-hover-overlay: rgba(240, 237, 232, 0.1); - - /* Map to Proxmox widget toolkit vars */ - --pwt-panel-background: var(--trw-canvas-default); - --pwt-text-color: var(--trw-fg-default); - --pwt-gauge-default: var(--trw-accent-emphasis); - --pwt-gauge-back: #1a1a1c; - --pwt-gauge-warn: var(--trw-attention-fg); - --pwt-gauge-crit: var(--trw-danger-emphasis); - --pwt-chart-primary: var(--trw-accent-emphasis); - --pwt-chart-grid-stroke: var(--trw-border-default); + /* Proxmox widget toolkit variables */ + --pwt-panel-background: var(--pm-bg-base); + --pwt-text-color: var(--pm-text-dim); + --pwt-gauge-default: var(--pm-accent-hover); + --pwt-gauge-back: var(--pm-bg-elevated); + --pwt-gauge-warn: var(--pm-warning); + --pwt-gauge-crit: var(--pm-error); + --pwt-chart-primary: var(--pm-accent); + --pwt-chart-grid-stroke: var(--pm-border); color-scheme: dark; } /* ===================================================== - BASE / BODY - ===================================================== */ -.x-body, -.x-viewport>.x-body, -body.x-border-layout-ct, -div.x-border-layout-ct { - background-color: var(--trw-canvas-default) !important; - color: var(--trw-fg-default) !important; -} - -/* ===================================================== - LAYOUT CONTAINER RESET (Prevent ExtJS clipping) - v2.1.5: Ported from UniFi theme for consistent border handling - ===================================================== */ - -/* Tool icons - no rounded corners */ -.x-tool, -.x-tool-tool-el, -.x-tool-default, -.x-tool-img { - border-radius: 0 !important; -} - -/* Form elements - exclude from global radius, apply 6px (GitHub style) */ -.x-form-item, -.x-form-item-default, -.x-form-item-body, -.x-form-item-body-default, -.x-form-text-field-body, -.x-form-text-field-body-default, -.x-form-fieldcontainer, -.x-field, -.x-field-default, -.x-form-type-text { - border-radius: 0 !important; -} - -/* Reset layout containers that clip elements with overflow:hidden + radius */ -.x-box-layout-ct, -.x-panel-bodyWrap, -.x-panel-bodyWrap-default, -.x-autocontainer-innerCt, -.x-autocontainer-outerCt, -.x-panel.x-tabpanel-child, -.x-panel.x-box-item, -.x-box-inner, -.x-box-target, -.x-container, -.x-container-default, -.x-window .x-panel-body, -.x-window .x-window-body, -.x-window .x-window-bodyWrap { - border-radius: 0 !important; -} - -/* Reset everything inside windows to 0 - then re-apply specific radii */ -.x-window *, -.x-window .x-autocontainer-innerCt, -.x-window .x-autocontainer-outerCt, -.x-window .x-form-layout-wrap, -.x-window .x-form-layout-auto-label, -.x-window .x-form-layout-colgroup, -.x-window .x-form-layout-column, -.x-window .x-field, -.x-window .x-form-item, -.x-window .x-form-item-body { - border-radius: 0 !important; -} - -/* v2.2.0: Dialog form content padding - vertical only (horizontal causes ExtJS layout overflow). - Root cause: ExtJS uses offsetWidth for layout → CSS horizontal padding shifts form items - rightward but doesn't narrow their computed width, causing trigger wraps to overflow 16px past - the column boundary where the adjacent column's opaque background covers them. */ -.x-window .x-tabpanel-child .x-autocontainer-innerCt { - padding: 12px 0 !important; -} - -/* v2.2.17: Allow column panel bodies to show overflowed form content (e.g. trigger wraps). - overflow:visible prevents the panel's own clipping from hiding elements that extend - slightly past the panel boundary during ExtJS layout calculation. */ -.x-window .x-panel-body:not(.x-scroller) { - overflow: visible !important; -} - -/* v2.2.17: 4px side padding on column panel bodies for visual breathing room. - ExtJS reads getPaddingInfo() on panel-body when sizing child form items, so this - correctly reduces item widths by 8px total without causing any overflow. */ -.x-window .x-panel.x-box-item .x-panel-body { - padding: 0 4px !important; -} - -/* Re-apply button styling inside windows (6px) */ -.x-window .x-btn { - border-radius: var(--trw-radius-md) !important; -} - -/* Re-apply checkbox styling inside windows */ -.x-window .x-form-checkbox { - border-radius: var(--trw-radius-sm) !important; -} - -/* Re-apply form inputs inside windows (4px with split corners - UniFi style) */ -.x-window .x-form-trigger-wrap, -.x-window .x-form-trigger-wrap-default { - border-radius: var(--trw-radius-sm) !important; -} - -.x-window .x-form-text-wrap, -.x-window .x-form-text { - border-radius: var(--trw-radius-sm) 0 0 var(--trw-radius-sm) !important; -} - -.x-window .x-form-arrow-trigger { - border-radius: 0 var(--trw-radius-sm) var(--trw-radius-sm) 0 !important; -} - -/* Form trigger/text wrap - reset and re-apply */ -.x-form-trigger-wrap, -.x-form-trigger-wrap *, -.x-form-text-wrap, -.x-form-text-wrap *, -.x-form-text, -.x-form-trigger { - border-radius: 0 !important; -} - -.x-form-trigger-wrap, -.x-form-trigger-wrap-default { - border-radius: var(--trw-radius-sm) !important; - overflow: hidden !important; -} - -.x-form-text-wrap, -.x-form-text-wrap-default { - border-radius: var(--trw-radius-sm) 0 0 var(--trw-radius-sm) !important; -} - -.x-form-text, -.x-form-text-default { - border-radius: var(--trw-radius-sm) 0 0 var(--trw-radius-sm) !important; -} - -.x-form-trigger, -.x-form-trigger-default, -.x-form-arrow-trigger, -.x-form-arrow-trigger-default { - border-radius: 0 var(--trw-radius-sm) var(--trw-radius-sm) 0 !important; -} - -/* Legend items - no rounded corners */ -.x-legend-container, -.x-legend-horizontal .x-legend-item, -.x-legend-item { - border-radius: 0 !important; -} - -/* Legend color marker (dot) - keep circular */ -.x-legend-item-marker { - border-radius: 50% !important; -} - -/* Boundlist - prevent clipping (applied to parent) */ -.x-boundlist { - border-radius: var(--trw-radius-lg) !important; - overflow: hidden !important; -} - -/* Chart canvas - no rounded corners on data area */ -.x-chart-grid, -.x-chart-axis, -canvas.x-surface, -.x-chart canvas { - border-radius: 0 !important; -} - -/* Constrain autocontainer width inside windows */ -.x-window .x-autocontainer-outerCt { - max-width: 100% !important; -} - -/* Fix window header/body width consistency */ -.x-window > .x-window-header, -.x-window > .x-window-body, -.x-window > .x-window-bodyWrap, -.x-window-bodyWrap > .x-window-body { - width: 100% !important; -} - -.x-window-header > .x-box-inner, -.x-window-header > .x-box-inner > .x-box-target { - width: 100% !important; -} - -.x-window-header-title { - width: auto !important; - flex: 1 !important; - max-width: calc(100% - 30px) !important; -} - -/* ===================================================== - MASKS & OVERLAYS - ===================================================== */ -.x-mask { - background-color: rgba(1, 4, 9, 0.5) !important; -} - -.x-tool .x-mask { - backdrop-filter: blur(4px); - background-color: var(--trw-canvas-muted); - opacity: 0.6; -} - -.x-css-shadow { - box-shadow: 0 8px 24px rgba(1, 4, 9, 0.5) !important; -} - -/* ===================================================== - ICONS - Using Proxmox default colors for dark mode - v2.1.1: Restored PVE base color scheme - ===================================================== */ - -/* General icon colors - visible gray for dark backgrounds */ -.x-tree-icon-custom, -.x-grid-icon-custom, -.fa-tags::before, -.fa-file-o::before, -.fa-building::before, -.x-action-col-icon::before, -.fa-shield::before, -.fa-file-text-o::before, -.fa-clock-o::before, -.x-tab-icon-el-default, -.pve-icon-verify-lettering::after, -.x-tree-icon-leaf:not(.x-tree-icon-custom)::before, -.x-tree-icon-parent:not(.x-tree-icon-custom)::before, -.x-tree-icon-parent-expanded:not(.x-tree-icon-custom)::before, -.x-grid-filters-filtered-column .x-column-header-text::after { - color: #aaaaaa !important; -} - -/* Folder icons - invert for dark mode */ -.x-tree-icon-parent:not(.x-tree-icon-custom)::before, -.x-tree-icon-parent-expanded:not(.x-tree-icon-custom)::before { - filter: invert(90%); -} - -/* Various image-based icons - invert for visibility */ -.fa-ceph::before, -.fa-sdn::before, -.fa-network-wired::before, -.pve-itype-treelist-item-icon-cdrom, -.fa-chevron-right::before, -.x-grid-row-console, -.x-box-scroller-toolbar-default.x-box-scroller, -.x-tree-elbow-img, -.pve-itype-icon-qemu, -.x-tree-node-computer, -.x-grid-tree-node-expanded .x-tree-node-computer, -.pbs-icon-tape, -.pbs-icon-tape-drive, -.x-tree-icon-leaf:not(.x-tree-icon-custom), -.x-tree-icon-parent:not(.x-tree-icon-custom), -.x-tree-icon-parent-expanded:not(.x-tree-icon-custom) { - filter: invert(90%); -} - -/* Hardware icons */ -.pve-itype-icon-cpu, -.pve-itype-icon-cdrom, -.pve-itype-icon-memory, -.pve-itype-icon-pci, -.pve-itype-icon-serial, -.pve-itype-icon-die, -.pmx-itype-icon-processor, -.pmx-itype-icon-memory, -.pve-itype-icon-storage, -.x-tree-node-harddisk, -.x-grid-tree-node-expanded .x-tree-node-harddisk { - filter: invert(100%); -} - -/* Hardware icons — counter-invert for non-SVG icon cells */ -td.pve-itype-icon-storage .x-grid-cell-inner, -td.x-tree-node-harddisk .x-grid-cell-inner { - filter: invert(100%) !important; -} - -/* Hardware icons — hide inverted borders for non-SVG icon cells */ -td.pve-itype-icon-storage, -td.x-tree-node-harddisk { - border-color: transparent !important; -} - -/* Hardware grid icons — mask-image renders SVG icons in theme text color - Replaces filter:invert approach for pve-itype-icon-* and pmx-itype-icon-* grid cells */ -td.pve-itype-icon-cpu, -td.pve-itype-icon-cdrom, -td.pve-itype-icon-memory, -td.pve-itype-icon-pci, -td.pve-itype-icon-serial, -td.pve-itype-icon-die, -td.pmx-itype-icon-processor, -td.pmx-itype-icon-memory { - filter: none !important; - background-image: none !important; - padding-left: 0 !important; - border-color: transparent !important; -} - -td.pve-itype-icon-cpu .x-grid-cell-inner, -td.pve-itype-icon-cdrom .x-grid-cell-inner, -td.pve-itype-icon-memory .x-grid-cell-inner, -td.pve-itype-icon-pci .x-grid-cell-inner, -td.pve-itype-icon-serial .x-grid-cell-inner, -td.pve-itype-icon-die .x-grid-cell-inner, -td.pmx-itype-icon-processor .x-grid-cell-inner, -td.pmx-itype-icon-memory .x-grid-cell-inner { - padding-left: 3px !important; -} - -td.pve-itype-icon-cpu .x-grid-cell-inner::before, -td.pve-itype-icon-cdrom .x-grid-cell-inner::before, -td.pve-itype-icon-memory .x-grid-cell-inner::before, -td.pve-itype-icon-pci .x-grid-cell-inner::before, -td.pve-itype-icon-serial .x-grid-cell-inner::before, -td.pve-itype-icon-die .x-grid-cell-inner::before, -td.pmx-itype-icon-processor .x-grid-cell-inner::before, -td.pmx-itype-icon-memory .x-grid-cell-inner::before { - content: '' !important; - display: inline-block !important; - width: 18px !important; - height: 14px !important; - vertical-align: middle !important; - margin-right: 10px !important; - background-color: currentColor !important; - -webkit-mask-size: contain !important; - mask-size: contain !important; - -webkit-mask-repeat: no-repeat !important; - mask-repeat: no-repeat !important; - -webkit-mask-position: center !important; - mask-position: center !important; -} - -td.pve-itype-icon-cpu .x-grid-cell-inner::before { - -webkit-mask-image: url('/pve2/images/icon-cpu.svg') !important; - mask-image: url('/pve2/images/icon-cpu.svg') !important; -} - -td.pve-itype-icon-memory .x-grid-cell-inner::before { - -webkit-mask-image: url('/pve2/images/icon-memory.svg') !important; - mask-image: url('/pve2/images/icon-memory.svg') !important; -} - -td.pve-itype-icon-cdrom .x-grid-cell-inner::before { - -webkit-mask-image: url('/pve2/images/icon-cd-drive.svg') !important; - mask-image: url('/pve2/images/icon-cd-drive.svg') !important; -} - -td.pve-itype-icon-pci .x-grid-cell-inner::before { - -webkit-mask-image: url('/pve2/images/icon-pci.svg') !important; - mask-image: url('/pve2/images/icon-pci.svg') !important; -} - -td.pve-itype-icon-serial .x-grid-cell-inner::before { - -webkit-mask-image: url('/pve2/images/icon-serial.svg') !important; - mask-image: url('/pve2/images/icon-serial.svg') !important; -} - -td.pve-itype-icon-die .x-grid-cell-inner::before { - -webkit-mask-image: url('/pve2/images/icon-die.svg') !important; - mask-image: url('/pve2/images/icon-die.svg') !important; -} - -td.pmx-itype-icon-processor .x-grid-cell-inner::before { - -webkit-mask-image: url('../images/icon-cpu.svg') !important; - mask-image: url('../images/icon-cpu.svg') !important; -} - -td.pmx-itype-icon-memory .x-grid-cell-inner::before { - -webkit-mask-image: url('../images/icon-ram.svg') !important; - mask-image: url('../images/icon-ram.svg') !important; -} - - -/* Icon overlays - default styling */ -.x-tree-icon-custom::after, -.x-grid-icon-custom::after { - color: #aaaaaa !important; - text-shadow: -1px 0 1px rgba(0, 0, 0, 0.5); -} - -/* RUNNING VMs/CTs - Green status indicator (PVE default) */ -.x-tree-icon-custom.running::after, -.x-grid-icon-custom.running::after, -.x-treelist-item-icon.running::after { - color: rgb(33, 191, 75) !important; - text-shadow: -1px 0 1px rgba(0, 0, 0, 0.5); -} - -/* ONLINE state - Green */ -.x-tree-icon-custom.online::after, -.x-grid-icon-custom.online::after { - color: rgb(33, 191, 75) !important; - text-shadow: -1px 0 1px rgba(0, 0, 0, 0.5); -} - -/* Stopped/offline - Muted gray */ -.x-tree-icon-custom.stopped, -.x-tree-icon-custom.offline, -.x-grid-icon-custom.stopped, -.x-grid-icon-custom.offline { - color: #888888 !important; -} - -/* Unknown state - Gray */ -.x-tree-icon-custom.unknown::after, -.x-grid-icon-custom.unknown::after { - color: #888888 !important; -} - -/* ERROR states - Red (PVE default) */ -.x-tree-icon-custom.error::after, -.x-tree-icon-custom.offline::after, -.x-tree-icon-custom.ha-error::after, -.x-grid-icon-custom.error::after, -.x-grid-icon-custom.offline::after, -.x-grid-icon-custom.ha-error::after { - color: rgb(204, 24, 0) !important; - text-shadow: -1px 0 1px rgba(0, 0, 0, 0.5); -} - -/* PAUSED/SUSPENDED - Amber (PVE default) */ -.x-tree-icon-custom.paused::after, -.x-tree-icon-custom.suspended::after, -.x-tree-icon-custom.lock-suspending::after, -.x-grid-icon-custom.paused::after, -.x-grid-icon-custom.suspended::after, -.x-grid-icon-custom.lock-suspending::after { - color: rgb(204, 142, 0) !important; - text-shadow: -1px 0 1px rgba(0, 0, 0, 0.5); -} - -/* PENDING/WARNING states - Yellow (PVE default) */ -.x-tree-icon-custom.pending::after, -.x-tree-icon-custom.io-error::after, -.x-tree-icon-custom.internal-error::after, -.x-tree-icon-custom.guest-panicked::after, -.x-grid-icon-custom.pending::after, -.x-grid-icon-custom.io-error::after, -.x-grid-icon-custom.internal-error::after, -.x-grid-icon-custom.guest-panicked::after { - color: rgb(255, 204, 0) !important; - text-shadow: -1px 0 1px rgba(0, 0, 0, 0.5); -} - -/* HA MAINTENANCE - Blue (PVE default) */ -.x-tree-icon-custom.ha-maintenance::after, -.x-grid-icon-custom.ha-maintenance::after { - color: rgb(56, 146, 212) !important; - text-shadow: -1px 0 1px rgba(0, 0, 0, 0.5); -} - -/* Locked icons */ -.x-tree-icon-custom.locked::after, -.x-tree-icon-custom.lock-backup::after, -.x-tree-icon-custom.lock-migrate::after, -.x-tree-icon-custom.lock-suspended::after, -.x-grid-icon-custom.locked::after, -.x-grid-icon-custom.lock-backup::after, -.x-grid-icon-custom.lock-migrate::after, -.x-grid-icon-custom.lock-suspended::after { - color: #aaaaaa !important; -} - -/* LXC/QEMU type indicators */ -.x-tree-icon-custom.lxc::after, -.x-tree-icon-custom.qemu::after, -.x-grid-icon-custom.lxc::after, -.x-grid-icon-custom.qemu::after { - background-color: transparent; - color: #888888 !important; -} - -.x-treelist-item-icon.lxc::after, -.x-treelist-item-icon.qemu::after { - background-color: transparent; - color: #888888 !important; -} - -/* Tree expander arrows */ -.x-tree-arrows .x-tree-expander { - filter: brightness(200%); -} - -/* v2.2.18: cancel old sprite-inversion; custom CSS controls handle appearance now */ -.x-form-checkbox-default, -.x-form-radio-default, -.x-column-header-checkbox .x-column-header-checkbox::after, -.x-grid-checkcolumn::after, -.x-menu-item-checked .x-menu-item-icon-default.x-menu-item-checkbox, -.x-menu-item-unchecked .x-menu-item-icon-default.x-menu-item-checkbox { - filter: none !important; -} - -/* ===================================================== - PANELS - UniFi base radius (8px) - ===================================================== */ -.x-panel, -.x-panel-default { - border-radius: var(--trw-radius-lg) !important; - padding: 0 !important; -} - -/* Column panels — native stacked layout (Issue #23 fix) */ -.x-panel.x-column { - padding: 5px !important; - margin: 0 !important; - max-width: none !important; - box-sizing: border-box !important; -} - -/* Column panel card styling — borders for summary + chart panels */ -.x-panel.x-panel-default.x-column { - border: 1px solid var(--trw-border-default) !important; - border-radius: var(--trw-radius-lg) !important; - overflow: hidden !important; -} - -/* v2.2.1: Guest status panel and Notes panel borders */ -[id^="pveGuestStatusView-"].x-panel, -[id^="pveLxcStatusView-"].x-panel, -[id^="pveQemuStatusView-"].x-panel, -[id^="pmxNotesView-"].x-panel { - border: 1px solid var(--trw-border-default) !important; - border-radius: var(--trw-radius-lg) !important; -} - -.x-panel-body, -.x-panel-body-default { - background-color: var(--trw-canvas-default) !important; - color: var(--trw-fg-default) !important; - border: none !important; -} - -/* Panel headers - only bottom border, flush with edges */ -.x-panel-header, -.x-panel-header-default { - background-color: var(--trw-canvas-muted) !important; - border: none !important; - border-bottom: 1px solid var(--trw-border-default) !important; - border-radius: var(--trw-radius-lg) var(--trw-radius-lg) 0 0 !important; - margin: 0 !important; - padding: 8px 12px !important; - width: 100% !important; - box-sizing: border-box !important; - overflow: visible !important; -} - -/* Title text — prevent border-radius clipping */ -.x-title-text, -.x-title-text-default { - overflow: visible !important; -} - -.x-panel-bodyWrap, -.x-panel-bodyWrap-default { - margin: 0 !important; - padding: 0 !important; -} - -/* Remove borders from nested panels (like gauge widgets inside Resources) */ -.x-panel-body>.x-box-layout-ct, -.x-panel-body>.x-container, -.x-panel-body>.x-box-inner, -[id*="pmxGauge"] { - border: none !important; -} - -.x-panel-header-title-default, -.x-window-header-title-default { - color: var(--trw-fg-default) !important; -} - -.x-panel-header-default .x-tool-tool-el { - background-color: transparent; -} - -.x-tool-img { - filter: brightness(175%); -} - -.x-tool-over .x-tool-img { - filter: brightness(200%); -} - -div[id^="pveResourceTree-"][id$="-body"] { - border-color: var(--trw-canvas-default) !important; -} - -/* Resource tree: remove row separators/borders */ -[id^="pveResourceTree-"].x-tree-panel td.x-grid-cell, -[id^="pveResourceTree-"].x-tree-panel .x-grid-td, -[id^="pveResourceTree-"].x-tree-panel .x-grid-cell { - border-bottom: none !important; -} - -/* Resource tree: slightly increased row spacing */ -div[id^="pveResourceTree"] .x-grid-cell { - padding-top: 3px !important; - padding-bottom: 3px !important; -} - -.x-panel-bodyWrap { - overflow: visible !important; -} - -/* ===================================================== - SPLITTERS / SEPARATORS - v2.1.1: Fixed double border issue - ===================================================== */ -.x-splitter-vertical { - background-color: transparent !important; - border-left: 1px solid var(--trw-border-default) !important; - border-right: none !important; - width: 1px !important; -} - -.x-splitter-horizontal { - background-color: var(--trw-canvas-inset) !important; - border-top: 1px solid var(--trw-border-default) !important; -} - -/* Toolbox tree (pve-nav) right border - full height */ -/* Fix: border must be on .pve-toolbar-bg (the full-height docked toolbar), - not on .x-treelist which only stretches to cover its items. - z-index: 3 needed because content toolbar (z-index: 2, same as nav) renders - on top (later in DOM), covering the nav right border. */ -.pve-toolbar-bg { - border-right: 1px solid var(--trw-border-default) !important; - z-index: 3 !important; -} - -.x-treelist.x-treelist-pve-nav { - border-right: none !important; -} - -/* ===================================================== - TOOLBARS - ===================================================== */ -.x-toolbar, -.x-toolbar-default { - background-color: var(--trw-canvas-default) !important; - border-color: var(--trw-border-default) !important; -} - -.x-toolbar-default.x-docked-top { - border: none !important; - border-bottom: 1px solid var(--trw-border-default) !important; -} - -.x-toolbar-default .x-toolbar-separator { - border-color: var(--trw-border-default); -} - -.x-toolbar-text-default { - color: var(--trw-fg-muted); -} - -/* ===================================================== - PRIMARY BUTTONS - GitHub Green (6px radius) - ===================================================== */ -.x-btn-default-small { - background-color: var(--trw-success-emphasis) !important; - border: 1px solid rgba(255, 255, 255, 0.15) !important; - border-radius: var(--trw-radius-md) !important; -} - -.x-btn-default-small .x-btn-inner { - color: var(--trw-fg-on-emphasis) !important; -} - -.x-btn-default-small.x-btn-over, -.x-keyboard-mode .x-btn-default-small.x-btn-focus { - background-color: var(--trw-success-hover) !important; -} - -.x-btn-default-small.x-btn.x-btn-disabled { - background-color: var(--trw-success-emphasis) !important; - opacity: 0.5; -} - -.x-btn-default-small.x-btn.x-btn-pressed { - background-color: var(--trw-success-active) !important; -} - -/* ===================================================== - SECONDARY/TOOLBAR BUTTONS (4px radius) - ===================================================== */ -.x-btn-default-toolbar-small { - background-color: var(--trw-canvas-subtle) !important; - border: 1px solid var(--trw-border-default) !important; - border-radius: var(--trw-radius-md) !important; -} - -.x-btn-default-toolbar-small .x-btn-inner-default-toolbar-small, -.x-btn-default-toolbar-small .x-btn-icon-el-default-toolbar-small { - color: var(--trw-fg-default) !important; -} - -.x-btn-default-toolbar-small .x-btn-wrap-default-toolbar-small.x-btn-arrow-right::after, -.x-btn-default-toolbar-small .x-btn-wrap-default-toolbar-small.x-btn-split-right::after { - filter: brightness(150%); -} - -.x-btn-default-toolbar-small.x-btn-over, -.x-keyboard-mode .x-btn-default-toolbar-small.x-btn-focus { - background-color: var(--trw-canvas-subtle) !important; - border-color: var(--trw-border-default) !important; -} - -.x-btn-default-toolbar-small.x-btn.x-btn-disabled { - background-color: var(--trw-canvas-subtle) !important; - opacity: 0.5; -} - -.x-btn-default-toolbar-small.x-btn.x-btn-menu-active, -.x-btn-default-toolbar-small.x-btn.x-btn-pressed { - background-color: var(--trw-accent-emphasis) !important; - border-color: var(--trw-accent-emphasis) !important; - padding: 4px 8px !important; /* Fix #30: prevent width change on dropdown */ -} - -.x-btn-default-toolbar-small.x-btn.x-btn-pressed .x-btn-inner-default-toolbar-small, -.x-btn-default-toolbar-small.x-btn.x-btn-pressed .x-btn-icon-el-default-toolbar-small { - color: var(--trw-fg-on-emphasis) !important; -} - -/* ===================================================== - FORM ELEMENTS (4px radius) - ===================================================== */ -.x-form-trigger-default { - background-color: var(--trw-canvas-muted) !important; -} - -.x-form-text-default { - background-color: var(--trw-canvas-muted) !important; - color: var(--trw-fg-default) !important; - border-radius: var(--trw-radius-sm) !important; -} - -.x-form-trigger-wrap, -.x-form-trigger-wrap-default { - border-color: var(--trw-border-default) !important; - background-color: var(--trw-canvas-muted) !important; - border-radius: var(--trw-radius-sm) !important; -} - -.x-form-trigger-wrap-default.x-form-trigger-wrap-focus { - border-color: var(--trw-accent-emphasis) !important; - box-shadow: 0 0 0 3px var(--trw-accent-subtle) !important; -} - -.x-form-item-label-default, -.x-form-cb-label-default { - color: var(--trw-fg-default) !important; -} - -.x-form-display-field-default { - color: var(--trw-fg-muted) !important; -} - -.x-form-spinner-default { - background-color: var(--trw-canvas-muted) !important; -} - -.x-fieldset, -.x-fieldset-default { - border-color: var(--trw-border-default) !important; - border-radius: var(--trw-radius-lg) !important; -} - -.x-fieldset-header-default>.x-fieldset-header-text { - color: var(--trw-fg-default) !important; -} - -/* ===================================================== - BOUNDLIST / DROPDOWNS (4px radius) - ===================================================== */ -.x-boundlist { - background-color: var(--trw-canvas-muted) !important; - border: 1px solid var(--trw-border-default) !important; - border-radius: var(--trw-radius-lg) !important; - box-shadow: 0 8px 24px rgba(1, 4, 9, 0.5); - overflow: hidden !important; -} - -.x-boundlist-item { - background-color: transparent !important; - color: var(--trw-fg-default) !important; -} - -.x-boundlist-selected { - background-color: var(--trw-accent-subtle) !important; -} - -.x-boundlist-item-over { - background-color: var(--trw-hover-overlay) !important; -} - -/* ===================================================== - GRIDS / TABLES (square corners) - ===================================================== */ -.x-grid, -.x-grid-view { - border-radius: 0 !important; -} - -.x-column-header { - border-color: var(--trw-border-default) !important; - background-color: transparent !important; -} - -.x-column-header-inner, -.x-column-header-text { - color: var(--trw-fg-default) !important; - font-weight: 600 !important; -} - -.x-column-header-trigger { - border-color: var(--trw-border-muted) !important; -} - -.x-grid-item, -.x-column-header-default, -.x-grid-cell-row-numberer { - color: var(--trw-fg-default) !important; - background-color: var(--trw-canvas-default) !important; -} - -.x-grid-cell-special { - border-color: var(--trw-border-default) !important; -} - -.x-grid-group-hd { - background-color: var(--trw-canvas-default) !important; - border-color: var(--trw-border-default) !important; -} - -.x-grid-group-title { - color: var(--trw-fg-default) !important; -} - -.x-grid-header-ct { - background-color: var(--trw-canvas-muted) !important; - border: 1px solid var(--trw-border-muted) !important; - border-radius: var(--trw-radius-lg) var(--trw-radius-lg) 0 0 !important; -} - -.x-grid-item-alt { - background-color: #0c0c0c !important; -} - -.x-grid-with-row-lines .x-grid-item { - border-color: var(--trw-border-muted) !important; -} - -.x-grid-cell { - border-bottom: 1px solid var(--trw-border-subtle) !important; -} - -.x-grid-item-over, -.x-grid-with-row-lines .x-grid-item.x-grid-item-over { - background-color: var(--trw-hover-overlay) !important; -} - -.x-grid-item-selected, -.x-grid-with-row-lines .x-grid-item.x-grid-item-selected { - background-color: var(--trw-accent-subtle) !important; -} - -.x-column-header-over, -.x-column-header-open { - background-color: var(--trw-hover-overlay) !important; -} - -.x-column-header-sort-ASC, -.x-column-header-sort-DESC { - background-color: #1c0808 !important; -} - -.x-grid-row-summary .x-grid-cell, -.x-grid-row-summary .x-grid-rowwrap, -.x-grid-row-summary .x-grid-cell-rowbody { - background-color: var(--trw-canvas-default) !important; - border-color: var(--trw-border-default); -} - -.x-grid-with-col-lines .x-grid-cell, -.x-grid-with-col-lines .x-grid-item-over .x-grid-cell, -.x-grid-with-col-lines .x-grid-item-selected .x-grid-cell { - border-color: var(--trw-border-default) !important; -} - -.x-dd-drag-proxy { - background-color: var(--trw-canvas-muted); - border-color: var(--trw-border-default); - color: var(--trw-fg-default); -} - -.x-keyboard-mode .x-grid-item-focused { - background-color: var(--trw-hover-overlay) !important; - color: var(--trw-fg-on-emphasis) !important; -} - -/* v2.2.1: Remove blue outline from selected/focused items in resource tree */ -.x-keyboard-mode .x-grid-item-focused .x-grid-cell-inner::before, -.x-keyboard-mode .x-grid-item-selected .x-grid-cell-inner::before, -.x-grid-item-selected .x-grid-cell-inner::before, -.x-grid-item-focused .x-grid-cell-inner::before, -[id^="pveResourceTree"] .x-grid-item-selected .x-grid-cell-inner::before, -[id^="pveResourceTree"] .x-grid-item-focused .x-grid-cell-inner::before { - content: none !important; - display: none !important; - border: none !important; -} - -.x-grid-empty { - background-color: var(--trw-canvas-default) !important; - color: var(--trw-fg-muted) !important; -} - -/* ===================================================== -/* ===================================================== - MENUS (variable radius) - ===================================================== */ -.x-menu, -.x-menu-default { - border: 1px solid var(--trw-border-default) !important; - border-radius: var(--trw-radius-lg) !important; - box-shadow: 0 8px 24px rgba(1, 4, 9, 0.5) !important; - overflow: hidden !important; -} - -.x-menu-body-default { - background-color: var(--trw-canvas-muted) !important; -} - -.x-menu-header { - background-color: var(--trw-accent-emphasis) !important; -} - -/* Menu Layout Fix (Flexbox reordering) */ -.x-menu-item-default > .x-menu-item-link { - display: flex !important; - align-items: center !important; - flex-direction: row !important; - padding: 6px 8px !important; - line-height: 20px !important; - text-decoration: none !important; -} - -.x-menu-item-text-default { - color: var(--trw-fg-default) !important; - font-size: 14px !important; - margin-left: 0 !important; -} - -.x-menu-item-icon-default { - color: var(--trw-fg-muted) !important; - order: -1 !important; /* Move icon to start */ - position: relative !important; - float: none !important; - margin-right: 8px !important; - margin-left: 0 !important; - left: auto !important; - top: auto !important; - width: 16px !important; - text-align: center !important; -} - -/* Remove the gutter/separator line */ -.x-menu-icon-separator-default { - display: none !important; -} - -.x-menu-item-default.x-menu-item-separator { - background-color: var(--trw-canvas-muted); - border-color: var(--trw-border-default); - margin: 4px 0 !important; -} - -.x-menu-item-default.x-menu-item-focus, -.x-menu-item-default.x-menu-item-active { - background-color: var(--trw-accent-emphasis) !important; - color: var(--trw-fg-on-emphasis) !important; -} - -.x-menu-item-active .x-menu-item-text-default, -.x-menu-item-focus .x-menu-item-text-default, -.x-menu-item-active .x-menu-item-icon-default, -.x-menu-item-focus .x-menu-item-icon-default { - color: var(--trw-fg-on-emphasis) !important; -} - -/* ===================================================== - PROGRESS BARS (5px radius) - ===================================================== */ -.x-progress, -.x-progress-default { - background-color: var(--trw-canvas-subtle) !important; - border-radius: var(--trw-radius-md) !important; -} - -.x-progress-default .x-progress-bar-default { - background-color: var(--trw-accent-emphasis) !important; - border-radius: var(--trw-radius-md) !important; -} - -.x-progress-default .x-progress-text { - color: var(--trw-fg-default) !important; -} - -.x-progress.warning .x-progress-bar { - background-color: var(--pwt-gauge-warn) !important; -} - -.x-progress.critical .x-progress-bar { - background-color: var(--pwt-gauge-crit) !important; -} - -/* ===================================================== - SPLITTERS - ===================================================== */ -.x-splitter { - background-color: var(--trw-canvas-inset) !important; -} - -.x-splitter-horizontal { - background-color: var(--trw-canvas-inset) !important; - border-top: 1px solid var(--trw-border-default) !important; -} - -.x-keyboard-mode .x-splitter-focus::after { - border-color: var(--trw-accent-emphasis) !important; -} - -.x-layout-split-bottom { - opacity: 0.7; -} - -/* ===================================================== - TABS — GitHub UnderlineNav style (v2.2.21) - Flat tabs, coral ::after underline on active tab. - Uses ::after (not border-bottom — ExtJS overrides it). - ===================================================== */ -.x-tab-bar, -.x-tab-bar-default { - background-color: var(--trw-canvas-default) !important; - border-radius: 0 !important; - border-bottom: 1px solid var(--trw-border-default) !important; - padding-bottom: 0 !important; -} - -/* v2.2.23: overflow visible on ALL containers within tab bar to prevent clipping */ -.x-tab-bar .x-box-inner, -.x-tab-bar .x-box-target, -.x-tab-bar-body, -.x-tab-bar-body-default { - overflow: visible !important; -} - -/* Base tab — no margin-bottom hack, position relative, no outlines */ -.x-tab, -.x-tab-default, -.x-tab-default-top { - background-color: transparent !important; - border: none !important; - border-radius: 0 !important; - padding: 8px 16px 8px !important; - overflow: visible !important; - margin-bottom: 0 !important; - transition: color .12s ease !important; - outline: none !important; - box-shadow: none !important; -} - -/* Remove ::after from inactive tabs */ -.x-tab::after { - display: none !important; -} - -.x-tab-inner-default { - color: var(--trw-fg-muted) !important; - font-size: 13px !important; -} - -.x-tab-default.x-tab-over { - background-color: transparent !important; -} -.x-tab-default.x-tab-over .x-tab-inner-default { - color: var(--trw-fg-default) !important; -} - -/* Active tab */ -.x-tab-default.x-tab.x-tab-active { - background-color: transparent !important; - border: none !important; - overflow: visible !important; - margin-bottom: 0 !important; - outline: none !important; - box-shadow: none !important; -} - -/* v2.2.23: coral underline INSIDE the tab at bottom:0 — immune to parent clipping */ -.x-tab-default.x-tab.x-tab-active::after { - content: '' !important; - display: block !important; - position: absolute !important; - bottom: 0 !important; - left: 0 !important; - right: 0 !important; - height: 2px !important; - background: var(--trw-accent-fg) !important; - z-index: 10 !important; - border-radius: 0 !important; - pointer-events: none !important; -} - -.x-tab-active .x-tab-inner-default { - color: var(--trw-fg-default) !important; - font-weight: 600 !important; -} - -.x-tab-default.x-tab.x-tab-disabled { - background-color: transparent !important; - border: none !important; - color: var(--trw-fg-subtle) !important; - margin-bottom: 0 !important; -} - -/* Keyboard mode focus: keep the same indicator, no outline */ -.x-keyboard-mode .x-tab-default.x-tab-focus, -.x-keyboard-mode .x-tab-default.x-tab-focus.x-tab-active { - background-color: transparent !important; - border: none !important; - outline: none !important; - box-shadow: none !important; - margin-bottom: 0 !important; -} -.x-keyboard-mode .x-tab-default.x-tab-focus.x-tab-active::after { - content: '' !important; - display: block !important; - position: absolute !important; - bottom: 0 !important; - left: 0 !important; - right: 0 !important; - height: 2px !important; - background: var(--trw-accent-fg) !important; - z-index: 10 !important; - pointer-events: none !important; -} - -/* Kill ALL interaction outlines/shadows — every possible state */ -.x-tab:focus, -.x-tab *:focus, -.x-tab-focus, -.x-tab-active.x-tab-focus, -.x-tab-inner-focus, -.x-tab-button-focus, -.x-tab-pressed, -.x-tab-active.x-tab-pressed, -.x-tab-over, -.x-tab:active, -.x-tab *:active { - outline: none !important; - box-shadow: none !important; -} - -.x-tabpanel-child { - border-radius: 0 0 var(--trw-radius-lg) var(--trw-radius-lg) !important; -} - -/* ===================================================== - TOOLTIPS (6px radius) - ===================================================== */ -.x-tip, -.x-tip-default { - background-color: var(--trw-canvas-muted) !important; - border: 1px solid var(--trw-border-default) !important; - border-radius: var(--trw-radius-md) !important; - box-shadow: 0 4px 12px rgba(1, 4, 9, 0.4); -} - -.x-tip-body-default { - color: var(--trw-fg-default) !important; -} - -.x-tip-form-invalid { - background-color: var(--trw-canvas-muted) !important; - border-color: var(--trw-danger-emphasis) !important; -} - -.x-tip-body-form-invalid { - color: var(--trw-danger-fg) !important; -} - -/* ===================================================== - TREE NAVIGATION (4px radius) - ===================================================== */ -.x-treelist-item { - background-color: var(--trw-canvas-default) !important; - border-radius: var(--trw-radius-md) !important; -} - -/* v2.2.4: Pseudo-element approach for balanced hover/selected highlighting */ -.x-treelist-row { - border-radius: var(--trw-radius-md) !important; - background-color: transparent !important; - position: relative !important; - z-index: 0 !important; -} - -.x-treelist-row::before { - content: ""; - position: absolute; - top: 1px; - bottom: 1px; - left: 0; - right: 4px; - border-radius: var(--trw-radius-md); - background-color: transparent; - z-index: -1; - pointer-events: none; -} - -/* v2.1.4: Fix toolbox tree item text overlapping icons (icon is 24px absolute positioned) */ -.x-treelist-item-text { - margin-left: 28px !important; -} - -/* Toolbox tree items - increased visibility */ -.x-treelist-item-text, -.x-treelist-item-icon, -.x-treelist.x-treelist-pve-nav .x-treelist-item-text, -.x-treelist.x-treelist-pve-nav .x-treelist-item-icon { - color: var(--trw-fg-default) !important; -} - -/* Hover state - apply to pseudo-element */ -.x-treelist-row-over { - background-color: transparent !important; -} - -.x-treelist-row-over::before { - background-color: var(--trw-hover-overlay) !important; -} - -.x-treelist-row-over .x-treelist-item-icon, -.x-treelist-row-over .x-treelist-item-text { - background-color: transparent !important; - color: var(--trw-fg-default) !important; -} - -/* Toolbox tree - selected/active item uses GitHub green (pseudo-element) */ -.x-treelist-item-selected>.x-treelist-row { - background-color: transparent !important; -} - -.x-treelist-item-selected>.x-treelist-row::before, -.x-treelist-item-selected>.x-treelist-row:hover::before { - background-color: var(--trw-success-emphasis) !important; -} - -.x-treelist-item-selected .x-treelist-item-text, -.x-treelist-item-selected .x-treelist-item-icon { - color: var(--trw-fg-on-emphasis) !important; -} - -.x-treelist-pve-nav { - background-color: var(--trw-canvas-default) !important; - border-color: var(--trw-border-default) !important; -} - -/* ===================================================== - WINDOWS / MODALS (variable radius) - ===================================================== */ -.x-window, -.x-window-default { - background-color: var(--trw-canvas-inset) !important; - border: 1px solid var(--trw-border-default) !important; - border-radius: var(--trw-radius-lg) !important; - box-shadow: 0 8px 24px rgba(1, 4, 9, 0.5) !important; - overflow: hidden !important; -} - -.x-window .x-window-header, -.x-window-header-default { - background-color: var(--trw-canvas-muted) !important; - border-color: transparent !important; - border-radius: var(--trw-radius-lg) var(--trw-radius-lg) 0 0 !important; -} - -.x-window-header-default .x-mask { - background-color: rgba(1, 4, 9, 0.7); -} - -.x-window .x-window-body, -.x-window-body-default { - background-color: var(--trw-canvas-default) !important; - border-color: var(--trw-border-default) !important; - color: var(--trw-fg-default) !important; - border-radius: 0 0 var(--trw-radius-lg) var(--trw-radius-lg) !important; -} - -.x-window-ghost { - background-color: var(--trw-canvas-default) !important; -} - -.x-window-header-default .x-tool-img { - background-color: transparent; -} - -.x-message-box .x-window-body { - background-color: var(--trw-canvas-muted) !important; -} - -/* ===================================================== - LEGEND / CHARTS - ===================================================== */ -.x-legend-container { - background-color: var(--trw-canvas-default) !important; -} - -.x-legend-horizontal .x-legend-item { - background-color: var(--trw-canvas-muted) !important; - color: var(--trw-fg-default) !important; - border: 1px solid var(--trw-border-muted) !important; -} - -/* ===================================================== - PROXMOX-SPECIFIC - ===================================================== */ -img[id^="proxmoxlogo-"][id$="-img"], -img[id^="proxmoxLogoSvg-"][id$="-img"] { - filter: invert(1) hue-rotate(180deg); -} - -.proxmox-invalid-row { - background-color: #521414 !important; -} - -.proxmox-warning-row { - background-color: #640 !important; -} - -.proxmox-disabled-row td { - color: var(--trw-fg-subtle) !important; -} - -.pmx-hint { - background-color: #640 !important; -} - -.pmx-hint a { - color: var(--trw-accent-fg) !important; -} - -.info-blue { - color: var(--trw-accent-fg) !important; -} - -.critical { - color: var(--trw-danger-fg) !important; -} - -/* Inline buttons (Documentation, Help) - GitHub Primer dark secondary button style */ -.proxmox-inline-button { - height: 28px !important; - min-height: 28px !important; - display: flex !important; - align-items: center !important; - padding: 3px 8px !important; - background-color: var(--trw-canvas-subtle) !important; - border: 1px solid var(--trw-border-default) !important; - border-radius: var(--trw-radius-md) !important; - color: var(--trw-fg-default) !important; - transition: background 0.08s cubic-bezier(0.33, 1, 0.68, 1) !important; -} - -.proxmox-inline-button:hover, -.proxmox-inline-button.x-btn-over { - background-color: var(--trw-canvas-muted) !important; - border-color: var(--trw-fg-muted) !important; -} - -.proxmox-inline-button:active, -.proxmox-inline-button.x-btn-pressed { - background-color: var(--trw-canvas-muted) !important; -} - -.proxmox-inline-button .x-btn-inner, -.proxmox-inline-button .x-btn-icon-el { - color: var(--trw-fg-default) !important; -} - -/* Loading states */ -.x-grid-row-loading, -.x-treelist-item-loading .x-treelist-item-icon, -.x-mask-msg-text, -.x-grid-tree-loading .x-tree-icon { - filter: invert(90%); -} - -.x-mask-msg { - background-color: var(--trw-canvas-muted) !important; - border: 1px solid var(--trw-border-default) !important; -} - -/* Markdown */ -.pmx-md code { - background-color: var(--trw-canvas-muted) !important; -} - -.pmx-md pre code { - border-color: var(--trw-border-default) !important; -} - -.pmx-md a { - color: var(--trw-accent-fg) !important; -} - -/* Tags */ -.pve-edit-tag.editable span { - background-color: var(--trw-canvas-muted) !important; - color: var(--trw-fg-default) !important; - border-color: var(--trw-border-default) !important; -} - -/* Datepicker */ -.x-datepicker, -.x-datepicker-column-header, -.x-monthpicker { - background-color: var(--trw-canvas-default) !important; - color: var(--trw-fg-default) !important; - border-color: transparent !important; -} - -.x-datepicker-header, -.x-datepicker-footer, -.x-monthpicker-buttons { - background-color: var(--trw-canvas-inset) !important; -} - -.x-datepicker-date, -.x-monthpicker-item-inner { - color: var(--trw-fg-default) !important; -} - -.x-datepicker-selected div.x-datepicker-date, -.x-monthpicker-item a.x-monthpicker-selected, -a.x-monthpicker-item-inner:hover, -div.x-datepicker-date:hover { - background-color: var(--trw-hover-overlay) !important; - color: var(--trw-fg-on-emphasis) !important; -} - -/* ===================================================== - SCROLLBARS - Cyber red-accented styling - ===================================================== */ -::-webkit-scrollbar { - width: 6px; - height: 6px; -} - -::-webkit-scrollbar-track { - background: var(--trw-canvas-default); -} - -::-webkit-scrollbar-thumb { - background: rgba(220, 38, 38, 0.25); - border-radius: 3px; - transition: background .3s; -} - -::-webkit-scrollbar-thumb:hover { - background: rgba(220, 38, 38, 0.5); -} - -::-webkit-scrollbar-corner { - background: var(--trw-canvas-default); -} - -/* Firefox scrollbar styling */ -* { - scrollbar-width: thin; - scrollbar-color: rgba(220, 38, 38, 0.25) var(--trw-canvas-default); -} - -/* ===================================================== - USAGE BARS (Vertical progress indicators) - v2.1.2: Using Proxmox dark theme default #e6e6e6 - ===================================================== */ -.usage { - background-color: #e6e6e6 !important; -} - -/* ===================================================== - DROPDOWNS - GitHub profile menu styling (dark) - ===================================================== */ -.x-menu, -.x-menu-default { - background-color: var(--trw-canvas-inset) !important; /* #050505 */ - border: 1px solid var(--trw-border-muted) !important; - border-radius: 6px !important; - box-shadow: 0 8px 24px rgba(1, 4, 9, 0.8) !important; - padding: 4px !important; -} - -.x-menu-body-default { - background-color: transparent !important; - padding: 4px !important; -} - -.x-menu-header { - background-color: transparent !important; - color: var(--trw-fg-default) !important; -} - -.x-menu-item-default > .x-menu-item-link { - display: flex !important; - align-items: center !important; - flex-direction: row !important; - gap: 8px !important; - justify-content: flex-start !important; - flex-wrap: nowrap !important; - min-height: 28px !important; - border-radius: 6px !important; - padding: 6px 8px !important; - line-height: 20px !important; - border: none !important; - cursor: pointer !important; - outline: none !important; - box-shadow: none !important; - white-space: nowrap !important; -} - -.x-menu-item-text-default { - color: var(--trw-fg-default) !important; - font-size: 13px !important; -} - -.x-menu-item-icon-default { - color: var(--trw-fg-muted) !important; - order: -1 !important; - margin-left: 0 !important; - margin-right: 8px !important; - position: relative !important; - left: 0 !important; - right: auto !important; - text-align: left !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - height: 20px !important; - line-height: 20px !important; - vertical-align: middle !important; - top: 1px !important; - flex: 0 0 16px !important; - width: 16px !important; - align-self: center !important; - float: none !important; -} - -.x-menu-item-text-default { - order: 1 !important; - margin-left: 0 !important; - text-align: left !important; - line-height: 20px !important; - display: inline-flex !important; - align-items: center !important; - flex: 1 1 auto !important; - width: auto !important; - white-space: nowrap !important; -} - -.x-menu-item-default > .x-menu-item-link > .x-menu-item-icon-default, -.x-menu-item-default > .x-menu-item-link > .x-menu-item-text-default { - width: auto !important; - max-width: none !important; -} - -.x-menu-item-arrow, -.x-menu-item-arrow-default { - order: 2 !important; - margin-left: auto !important; -} - -.x-menu-item-default.x-menu-item-separator { - background-color: var(--trw-border-default) !important; - border: none !important; - height: 1px !important; - margin: 6px 4px !important; -} - -.x-menu-item-default.x-menu-item-focus, -.x-menu-item-default.x-menu-item-active, -.x-menu-item:hover { - background-color: var(--trw-canvas-muted) !important; - color: var(--trw-fg-default) !important; - border-radius: 6px !important; -} - -.x-menu-item-active .x-menu-item-text-default, -.x-menu-item-focus .x-menu-item-text-default { - color: var(--trw-fg-default) !important; -} - -/* Combo dropdowns (selects, boundlists) */ -.x-boundlist { - background-color: var(--trw-canvas-inset) !important; - border: 1px solid var(--trw-border-muted) !important; - border-radius: 6px !important; - box-shadow: 0 8px 24px rgba(1, 4, 9, 0.8) !important; - padding: 2px !important; - overflow: hidden !important; -} - -.x-boundlist-item { - border-radius: 6px !important; - padding: 2px 6px !important; - line-height: normal !important; - border: none !important; - cursor: pointer !important; - outline: none !important; - box-shadow: none !important; -} - -.x-boundlist-item-over { - background-color: var(--trw-canvas-muted) !important; -} - -.x-boundlist-selected { - background-color: var(--trw-selectmenu-active) !important; /* #2a0808 */ - color: var(--trw-fg-on-emphasis) !important; -} - -/* Floating grid pickers (storage/ISO selectors) */ -.x-layer.x-grid .x-grid-view, -.x-panel.x-layer.x-grid .x-grid-view, -.x-panel.x-layer.x-grid, -.x-layer.x-panel.x-grid { - border-radius: 6px !important; -} - -.x-layer.x-grid .x-grid-item-over, -.x-layer.x-grid .x-grid-item-selected, -.x-panel.x-layer.x-grid .x-grid-item-over, -.x-panel.x-layer.x-grid .x-grid-item-selected { - border-radius: 6px !important; - outline: none !important; - box-shadow: none !important; -} - -.x-layer.x-grid .x-grid-item-over td:first-child, -.x-layer.x-grid .x-grid-item-selected td:first-child, -.x-panel.x-layer.x-grid .x-grid-item-over td:first-child, -.x-panel.x-layer.x-grid .x-grid-item-selected td:first-child { - border-radius: 6px 0 0 6px !important; -} - -.x-layer.x-grid .x-grid-item-over td:last-child, -.x-layer.x-grid .x-grid-item-selected td:last-child, -.x-panel.x-layer.x-grid .x-grid-item-over td:last-child, -.x-panel.x-layer.x-grid .x-grid-item-selected td:last-child { - border-radius: 0 6px 6px 0 !important; -} - -/* ===================================================== - UNIFI BORDER-RADIUS PARITY (ported from theme-unifi.css) + GLOBAL BORDER-BOX ROUNDED CORNERS (UniFi style) ===================================================== */ .x-border-box, .x-border-box * { - border-radius: var(--trw-radius-lg); + border-radius: var(--pm-radius-lg); } /* Remove rounded corners from grids/tables/lists (Tasks, logs) */ @@ -1812,6 +95,7 @@ table *, tr, td, th, +/* Legend elements - no rounded corners */ .x-legend, .x-legend *, .x-legend-container, @@ -1823,6 +107,7 @@ th, .x-legend-horizontal .x-legend-item:last-child, .x-legend-vertical .x-legend-item:first-child, .x-legend-vertical .x-legend-item:last-child, +/* Tool icons - no rounded corners */ .x-tool, .x-tool-tool-el, .x-tool-default, @@ -1830,7 +115,8 @@ th, border-radius: 0 !important; } -/* Form elements - exclude from global radius */ +/* Form elements - exclude from global 8px, apply 4px (UniFi style) */ +/* Reset ALL form-related parent containers to prevent 8px inheritance */ .x-form-item, .x-form-item-default, .x-form-item-body, @@ -1844,7 +130,7 @@ th, border-radius: 0 !important; } -/* Reset layout containers that clip form elements */ +/* Reset layout containers that clip form elements with overflow:hidden + 8px radius */ .x-box-layout-ct, .x-panel-bodyWrap, .x-panel-bodyWrap-default, @@ -1856,13 +142,25 @@ th, .x-box-target, .x-container, .x-container-default, +/* Window/dialog inner bodies - prevent 8px clipping on form elements */ .x-window .x-panel-body, .x-window .x-window-body, .x-window .x-window-bodyWrap { border-radius: 0 !important; } -/* Reset everything inside windows to 0 - then re-apply specific radii */ +/* Restore right border for grids inside windows (fixed v5.4 over-reach) */ +.x-window .x-panel-body.x-grid-body { + border-right: 1px solid #34383D !important; +} + +/* ===================================================== + v5.73: WINDOW/MODAL BORDER-RADIUS CONSISTENCY + Reset all children to 0, then re-apply specific radii + to ensure consistent 8px corners on login/modals + ===================================================== */ + +/* 1. Reset everything inside windows to 0 - overrides global x-border-box rule */ .x-window *, .x-window .x-autocontainer-innerCt, .x-window .x-autocontainer-outerCt, @@ -1876,29 +174,54 @@ th, border-radius: 0 !important; } -.x-window, -.x-window-default { +/* 2. Window container - consistent 8px with overflow hidden */ +.x-window { border-radius: 8px !important; + overflow: hidden !important; + min-width: 295px !important; + /* v5.85: Match Proxmox default to prevent scrollbars */ } +/* v5.86: Fix dialog header/body not matching dialog width when min-width is applied + Root cause: ExtJS sets inline width on header/body that's smaller than min-width forces. + Solution: Force header/body to use 100% width so they inherit parent's computed width. */ +.x-window > .x-window-header, +.x-window > .x-window-body, +.x-window > .x-window-bodyWrap, +.x-window-bodyWrap > .x-window-body { + width: 100% !important; +} + +/* Ensure box containers inside header use full width */ +.x-window-header > .x-box-inner, +.x-window-header > .x-box-inner > .x-box-target { + width: 100% !important; +} + +/* Header title should expand appropriately */ +.x-window-header-title { + width: auto !important; + flex: 1 !important; + max-width: calc(100% - 30px) !important; +} + +/* 3. Window header - top corners only */ .x-window-header, .x-window-header-default { border-radius: 8px 8px 0 0 !important; } -.x-window .x-window-body, -.x-window-body-default { - border-radius: 0 !important; -} - +/* 4. Re-apply button styling inside windows (6px) */ .x-window .x-btn { border-radius: 6px !important; } +/* 5. Re-apply checkbox styling inside windows (4px) */ .x-window .x-form-checkbox { border-radius: 4px !important; } +/* 6. Re-apply form inputs inside windows (4px with split corners) */ .x-window .x-form-trigger-wrap, .x-window .x-form-trigger-wrap-default { border-radius: 4px !important; @@ -1922,21 +245,31 @@ th, border-radius: 0 !important; } +/* Form element containers - 4px radius (UniFi consistent) */ .x-form-trigger-wrap, .x-form-trigger-wrap-default { border-radius: 4px !important; + overflow: hidden !important; } +/* Constrain autocontainer width (Moved from L3450) */ +.x-window .x-autocontainer-outerCt { + max-width: 100% !important; +} + +/* Form text wrap - left side rounded */ .x-form-text-wrap, .x-form-text-wrap-default { border-radius: 4px 0 0 4px !important; } +/* Form input text - left side rounded */ .x-form-text, .x-form-text-default { border-radius: 4px 0 0 4px !important; } +/* Form trigger button - right side rounded */ .x-form-trigger, .x-form-trigger-default, .x-form-arrow-trigger, @@ -1944,143 +277,1593 @@ th, border-radius: 0 4px 4px 0 !important; } +/* Cursor styles for combobox/dropdown elements (pointer indicates clickable) */ +.x-form-trigger-wrap, +.x-form-text-wrap, +.x-form-field[role="combobox"], +input.x-form-text[readonly], +.x-form-trigger, +.x-form-arrow-trigger { + cursor: pointer !important; +} + +/* Cursor for dropdown list items */ +.x-boundlist-item, +.x-boundlist-item-over, +.x-boundlist-selected { + cursor: pointer !important; +} + +/* ===================================================== + BASE / BODY - Cyber dark background + grid pattern + ===================================================== */ +.x-body { + color: var(--pm-text); + background-color: var(--pm-bg-base); + background-image: + linear-gradient(rgba(255,255,255,0.008) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.008) 1px, transparent 1px); + background-size: 56px 56px; +} + +.x-viewport>.x-body { + background-color: var(--pm-bg-base); +} + +body.x-border-layout-ct, +div.x-border-layout-ct { + background-color: var(--pm-bg-base); + background-image: + linear-gradient(rgba(255,255,255,0.008) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.008) 1px, transparent 1px); + background-size: 56px 56px; +} + +/* Grid pan animation */ +@keyframes trw-grid-pan { + from { background-position: 0 0; } + to { background-position: 56px 56px; } +} + +.x-body, body.x-border-layout-ct, div.x-border-layout-ct { + animation: trw-grid-pan 30s linear infinite; +} + +/* ===================================================== + LEGEND / CHARTS - Ensure chart visibility + ===================================================== */ +.x-legend-container { + background-color: var(--pm-bg-base); + border-radius: 0 !important; +} + +.x-legend-horizontal .x-legend-item, +.x-legend-item { + background-color: var(--pm-bg-base); + color: var(--pm-text-muted); + border: none !important; + border-radius: 0 !important; +} + +/* Legend color marker (dot) - keep circular */ .x-legend-item-marker { border-radius: 50% !important; } +/* Chart canvas and SVG visibility */ +.x-chart, +.rrd-chart canvas, +canvas.x-surface { + opacity: 1 !important; +} + +/* Chart grid lines */ +.x-chart-grid-horizontal line, +.x-chart-grid-vertical line { + stroke: #34383D !important; + stroke-opacity: 1 !important; +} + +/* Chart axis text */ +.x-chart-axis-label { + fill: #B7BCC2 !important; +} + +/* RRDTool charts (Proxmox specific) - ensure PNG charts are visible */ +img.rrdimage, +.rrd-chart img, +div[class*="rrd"] img { + filter: none !important; + opacity: 1 !important; +} + /* ===================================================== - CHECKBOXES & RADIOS — GitHub Primer (v2.2.18) - ===================================================== */ + MASKS & OVERLAYS + ===================================================== */ +.x-mask { + /* v5.48: Background blur + 0.5 opacity */ + backdrop-filter: blur(4px) !important; + -webkit-backdrop-filter: blur(4px) !important; + background-color: rgba(0, 0, 0, 0.5) !important; +} -/* Base: remove sprite, styled as clean custom control */ -.x-form-checkbox, .x-form-checkbox-default, -.x-form-radio, .x-form-radio-default { +/* Disabled field-groups: keep the native "reduced opacity" look (no black mask overlay) */ +.x-item-disabled.x-masked-relative>.x-mask { + background-color: transparent !important; +} + +.x-tool .x-mask { + backdrop-filter: blur(4px); + background-color: #131416; + opacity: 0.6; +} + +/* v5.50: Hide ExtJS shadow element - use pure CSS shadow on window instead */ +.x-css-shadow { + display: none !important; +} + +/* ===================================================== + ICONS - Inverted for dark mode + ===================================================== */ +/* General icons - gray color */ +.fa-tags::before, +.fa-file-o::before, +.fa-building::before, +.x-action-col-icon::before, +.fa-shield::before, +.fa-file-text-o::before, +.fa-clock-o::before, +.x-tab-icon-el-default, +.pve-icon-verify-lettering::after, +.x-tree-icon-custom.lock-migrate::after, +.x-grid-icon-custom.lock-migrate::after, +.x-tree-icon-leaf:not(.x-tree-icon-custom)::before, +.x-tree-icon-parent:not(.x-tree-icon-custom)::before, +.x-tree-icon-parent-expanded:not(.x-tree-icon-custom)::before, +.x-grid-filters-filtered-column .x-column-header-text::after { + color: #B7BCC2; +} + +/* VM/CT icons - default gray, NOT green */ +.x-tree-icon-custom, +.x-grid-icon-custom { + color: #B7BCC2; +} + +.x-tree-icon-parent:not(.x-tree-icon-custom)::before, +.x-tree-icon-parent-expanded:not(.x-tree-icon-custom)::before { + filter: invert(90%); +} + +.fa-ceph::before, +.fa-sdn::before, +.fa-network-wired::before, +.pve-itype-treelist-item-icon-cdrom, +.fa-chevron-right::before, +.x-grid-row-console, +.x-box-scroller-toolbar-default.x-box-scroller, +.x-tree-elbow-img, +.pve-itype-icon-qemu, +.x-tree-node-computer, +.x-grid-tree-node-expanded .x-tree-node-computer, +.pbs-icon-tape, +.pbs-icon-tape-drive, +.x-tree-icon-leaf:not(.x-tree-icon-custom), +.x-tree-icon-parent:not(.x-tree-icon-custom), +.x-tree-icon-parent-expanded:not(.x-tree-icon-custom) { + filter: invert(90%); +} + +/* v5.37: Resource grid icon inversion - tree node icons only + Harddisk tree nodes are SVG background images that need inversion for dark themes */ +.x-tree-node-harddisk, +.x-grid-tree-node-expanded .x-tree-node-harddisk { + filter: invert(90%); +} + +/* Fix #27: Resource grid cells (td.pve-itype-icon-* / td.pmx-itype-icon-*) — remove + filter from TD so text is NOT inverted. Strip original background-image and reconstruct + icon via ::before pseudo-element on .x-grid-cell-inner with filter applied to icon only. + Includes pmx-itype-icon-processor/memory used by LXC Resources tab (PVE 9.x). */ +td.pve-itype-icon-cpu, +td.pve-itype-icon-memory, +td.pve-itype-icon-cdrom, +td.pve-itype-icon-pci, +td.pve-itype-icon-serial, +td.pve-itype-icon-die, +td.pmx-itype-icon-processor, +td.pmx-itype-icon-memory { + filter: none !important; background-image: none !important; - background-color: var(--trw-canvas-subtle) !important; - border: 1.5px solid var(--trw-fg-subtle) !important; - width: 16px !important; - height: 16px !important; + padding-left: 0px !important; +} + +/* Match FA row inner padding (4px) */ +td.pve-itype-icon-cpu > .x-grid-cell-inner, +td.pve-itype-icon-memory > .x-grid-cell-inner, +td.pve-itype-icon-cdrom > .x-grid-cell-inner, +td.pve-itype-icon-pci > .x-grid-cell-inner, +td.pve-itype-icon-serial > .x-grid-cell-inner, +td.pve-itype-icon-die > .x-grid-cell-inner, +td.pmx-itype-icon-processor > .x-grid-cell-inner, +td.pmx-itype-icon-memory > .x-grid-cell-inner { + padding-left: 4px !important; +} + +/* Inline-block pseudo-element icons — invert only the icon, not the text */ +td.pve-itype-icon-cpu > .x-grid-cell-inner::before, +td.pve-itype-icon-memory > .x-grid-cell-inner::before, +td.pve-itype-icon-cdrom > .x-grid-cell-inner::before, +td.pve-itype-icon-pci > .x-grid-cell-inner::before, +td.pve-itype-icon-serial > .x-grid-cell-inner::before, +td.pve-itype-icon-die > .x-grid-cell-inner::before, +td.pmx-itype-icon-processor > .x-grid-cell-inner::before, +td.pmx-itype-icon-memory > .x-grid-cell-inner::before { + content: '' !important; display: inline-block !important; - box-sizing: border-box !important; - cursor: pointer !important; - transition: border-color .12s ease, background-color .12s ease !important; + width: 14px !important; + height: 14px !important; + vertical-align: middle !important; + margin-right: 4px !important; + background-size: 14px 14px !important; + background-repeat: no-repeat !important; + background-position: center !important; + filter: invert(90%) !important; } -/* Checkbox: rounded square */ -.x-form-checkbox, .x-form-checkbox-default { - border-radius: 3px !important; +/* Individual icon URLs — pve-itype-icon-* classes are PVE-specific, so use /pve2/images/ + (icon-cpu.svg exists in /pwt/images/ too, but memory/cdrom/pci/serial/die do NOT) */ +td.pve-itype-icon-cpu > .x-grid-cell-inner::before { + background-image: url('/pve2/images/icon-cpu.svg') !important; +} +td.pve-itype-icon-memory > .x-grid-cell-inner::before { + background-image: url('/pve2/images/icon-memory.svg') !important; +} +td.pve-itype-icon-cdrom > .x-grid-cell-inner::before { + background-image: url('/pve2/images/icon-cd-drive.svg') !important; +} +td.pve-itype-icon-pci > .x-grid-cell-inner::before { + background-image: url('/pve2/images/icon-pci.svg') !important; +} +td.pve-itype-icon-serial > .x-grid-cell-inner::before { + background-image: url('/pve2/images/icon-serial.svg') !important; +} +td.pve-itype-icon-die > .x-grid-cell-inner::before { + background-image: url('/pve2/images/icon-die.svg') !important; +} +/* pmx-itype-icon-* use relative paths for PVE+PBS compatibility */ +td.pmx-itype-icon-processor > .x-grid-cell-inner::before { + background-image: url('../images/icon-cpu.svg') !important; +} +td.pmx-itype-icon-memory > .x-grid-cell-inner::before { + background-image: url('../images/icon-ram.svg') !important; } -/* Radio: circle + ::after inner dot */ -.x-form-radio, .x-form-radio-default { - border-radius: 50% !important; +/* v5.38: Summary panel icons (i elements) - reset to original Proxmox styling */ +i.pmx-itype-icon-processor, +i.pmx-itype-icon-memory, +.pmx-icon.pmx-itype-icon-processor, +.pmx-icon.pmx-itype-icon-memory { + filter: invert(90%) !important; + background-repeat: no-repeat !important; + background-position: 3px center !important; + background-size: 14px 14px !important; + padding-left: 18px !important; + position: static !important; +} + +/* v5.94: Use relative paths for PVE+PBS compatibility + PVE serves from /pwt/themes/ → ../images/ resolves to /pwt/images/ + PBS serves from /widgettoolkit/themes/ → ../images/ resolves to /widgettoolkit/images/ */ +i.pmx-itype-icon-processor, +.pmx-icon.pmx-itype-icon-processor { + background-image: url('../images/icon-cpu.svg') !important; +} + +i.pmx-itype-icon-memory, +.pmx-icon.pmx-itype-icon-memory { + background-image: url('../images/icon-ram.svg') !important; +} + +/* Disable ::before pseudo-elements on Summary panel icons */ +i.pmx-itype-icon-processor::before, +i.pmx-itype-icon-memory::before, +.pmx-icon.pmx-itype-icon-processor::before, +.pmx-icon.pmx-itype-icon-memory::before { + content: none !important; + display: none !important; +} + +/* v5.38: Summary panel SWAP and Bootdisk FontAwesome icons - consistent sizing */ +.left-aligned .fa.fa-refresh, +.left-aligned .fa.fa-hdd-o { + font-size: 14px !important; +} + +/* v5.88: Fix "More" button position in IPs section of Summary panel + Move button next to "IPs" label, vertically centered with IP addresses. + Parent containers need overflow:visible because transform moves button outside bounds. + + Key insight: ExtJS positions button at container's right edge (after IP addresses). + Solution: Anchor to top: 0, then use transform to shift button left to "IPs" label. + Value -242px moves button from right edge to just after the 35px "IPs" label. + NOTE: This value may need adjustment if Proxmox UI layout changes. */ +[id^="pveIPViewLXC-"] .x-box-inner, +[id^="pveIPViewLXC-"] > .x-box-inner { + overflow: visible !important; +} + +[id^="pveIPViewLXC-"] [id^="button-"].x-btn { + top: 0 !important; + transform: translate(-242px, 5px) !important; +} + +/* Cell inner content alignment — handled by Fix #27 td.pve-itype-icon-* rules above */ + +/* v5.37: FontAwesome icons in resource grid (Swap, Root Disk) */ +.pve-itype-fa .x-grid-cell-inner { + padding-left: 4px !important; +} + +.pve-itype-fa .pve-grid-fa, +.pve-itype-fa .pve-grid-fa.fa, +.x-grid-item .pve-itype-fa .fa { + color: #DEE0E3 !important; + margin-right: 4px !important; +} + +.x-tree-icon-custom, +.x-grid-icon-custom { + color: #B7BCC2; +} + +/* Running VMs/CTs - type icon neutral; status indicator handled separately */ +.x-tree-icon-custom.running, +.x-grid-icon-custom.running { + color: #B7BCC2; +} + +.x-tree-icon-custom::after, +.x-grid-icon-custom::after { + color: #B7BCC2; + text-shadow: none; +} + +.x-tree-icon-custom.stopped, +.x-tree-icon-custom.offline, +.x-grid-icon-custom.stopped, +.x-grid-icon-custom.offline { + color: #737C87; +} + +.x-tree-icon-custom.lxc::after, +.x-tree-icon-custom.qemu::after, +.x-grid-icon-custom.lxc::after, +.x-grid-icon-custom.qemu::after { + background-color: #131416; + color: #B7BCC2; +} + +/* v5.55: Fix LXC/QEMU icon ::after in treelist navigation */ +.x-treelist-item-icon.lxc::after, +.x-treelist-item-icon.qemu::after { + background-color: transparent !important; + color: #B7BCC2 !important; + margin-top: 4px !important; +} + +.x-tree-arrows .x-tree-expander { + filter: brightness(200%); +} + +/* ===================================================== + v5.6: Custom tree expander arrows (FontAwesome chevrons) + Replaces default sprite arrows with larger, animated icons + ===================================================== */ + +/* Base expander styling - replace sprite with FA icon */ +.x-tree-expander { + background-image: none !important; position: relative !important; - transform: translateZ(0) !important; - box-shadow: inset 0 0 0 0 transparent !important; + width: 18px !important; + height: 18px !important; + margin-right: 4px !important; + vertical-align: middle !important; } +/* Arrow icon using FontAwesome chevron-right */ +.x-tree-expander::before { + content: "\f054" !important; + /* FA chevron-right */ + font-family: "FontAwesome" !important; + font-size: 11px !important; + color: #737C87 !important; + /* UniFi tertiary/muted color */ + position: absolute !important; + top: -2px !important; + left: 3px !important; + transition: transform 0.2s ease, color 0.15s ease !important; +} + +/* Expanded state - arrow rotates 90 degrees */ +.x-grid-tree-node-expanded .x-tree-expander::before { + transform: rotate(90deg) !important; + color: #B7BCC2 !important; + /* UniFi secondary text */ +} + +/* Collapsed state - no rotation */ +tr:not(.x-grid-tree-node-expanded) .x-tree-expander::before { + transform: rotate(0deg) !important; +} + +/* Hover effect - UniFi blue accent */ +.x-tree-expander:hover::before { + color: var(--pm-accent) !important; +} + +/* Gap before node icon */ +.x-tree-icon-parent, +.x-tree-icon-leaf, +.x-tree-icon { + margin-left: 2px !important; +} + +/* Empty elbows - no extra margin */ +.x-tree-elbow-empty, +.x-tree-elbow { + margin-right: 0 !important; +} + +/* ===================================================== + v5.36: CHECKBOXES & RADIO BUTTONS - UniFi Authentic + Extracted from live UniFi Network Application + ===================================================== */ + +/* Remove the old filter-based styling */ +.x-form-checkbox-default, +.x-form-radio-default, +.x-column-header-checkbox .x-column-header-checkbox::after, +.x-grid-checkcolumn::after, +.x-menu-item-checked .x-menu-item-icon-default.x-menu-item-checkbox, +.x-menu-item-unchecked .x-menu-item-icon-default.x-menu-item-checkbox { + filter: none !important; +} + +/* The actual INPUT element that receives clicks - needs pointer cursor */ +.x-form-cb-input { + cursor: pointer !important; +} + +/* CHECKBOXES - Base styling (SPAN element - visual display) */ +.x-form-checkbox, +.x-form-checkbox-default { + display: inline-block !important; + width: 16px !important; + min-width: 16px !important; + height: 16px !important; + min-height: 16px !important; + border-radius: 4px !important; + border: 0.8px solid #737C87 !important; + background-color: rgba(0, 0, 0, 0.01) !important; + background-image: none !important; + cursor: pointer !important; + transition: border-color 0.2s linear, background-color 0.2s linear !important; + position: relative !important; + box-sizing: border-box !important; +} + +/* Checkbox - Checked state */ +.x-form-cb-checked .x-form-checkbox { + border-color: var(--pm-accent-hover) !important; + background-color: var(--pm-accent-hover) !important; + background-image: none !important; +} + +/* Checkbox checkmark using ::after pseudo-element */ +.x-form-cb-checked .x-form-checkbox::after { + content: '✓' !important; + position: absolute !important; + color: white !important; + font-size: 12px !important; + font-weight: bold !important; + top: 50% !important; + left: 50% !important; + transform: translate(-50%, -50%) !important; + pointer-events: none !important; +} + +/* Checkbox - Hover state */ +.x-form-checkbox:hover, +.x-form-cb:hover .x-form-checkbox, +.x-form-cb-wrap:hover .x-form-checkbox { + border-color: var(--pm-accent-hover) !important; +} + +/* RADIO BUTTONS - Base styling */ +.x-form-radio, +.x-form-radio-default { + display: inline-block !important; + width: 16px !important; + min-width: 16px !important; + height: 16px !important; + min-height: 16px !important; + border-radius: 50% !important; + border: 0.8px solid #737C87 !important; + background-color: rgba(0, 0, 0, 0.01) !important; + background-image: none !important; + cursor: pointer !important; + position: relative !important; + transition: border-color 0.2s linear !important; + box-sizing: border-box !important; +} + +/* Radio - Checked state border */ +.x-form-cb-checked .x-form-radio { + border-color: var(--pm-accent-hover) !important; + background-color: rgba(0, 0, 0, 0.01) !important; + background-image: none !important; +} + +/* Radio - Inner dot using ::after pseudo-element */ .x-form-radio::after { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; - width: 7px !important; - height: 7px !important; + width: 6px !important; + height: 6px !important; border-radius: 50% !important; - background: transparent !important; + background-color: transparent !important; transform: translate(-50%, -50%) scale(0) !important; - transition: transform .15s ease, background .15s ease !important; + transition: transform 0.2s ease, background-color 0.2s ease !important; pointer-events: none !important; } -/* Hover */ -.x-form-checkbox:hover, .x-form-checkbox-default:hover, -.x-form-cb-wrap:hover .x-form-checkbox { - border-color: var(--trw-accent-fg) !important; -} - -.x-form-radio:hover, .x-form-radio-default:hover, -.x-form-cb-wrap:hover .x-form-radio { - border-color: var(--trw-accent-fg) !important; -} - -/* CHECKED checkbox — .x-form-cb-checked lives on the .x-form-item ancestor */ -.x-form-cb-checked .x-form-checkbox, -.x-form-cb-checked .x-form-checkbox-default { - background-color: var(--trw-accent-emphasis) !important; - border-color: var(--trw-accent-emphasis) !important; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; - background-repeat: no-repeat !important; - background-position: center !important; - background-size: 9px 7px !important; -} - -/* SELECTED radio */ -.x-form-cb-checked .x-form-radio, -.x-form-cb-checked .x-form-radio-default { - border-color: var(--trw-accent-emphasis) !important; - background-color: var(--trw-canvas-muted) !important; -} - +/* Radio - Checked inner dot */ .x-form-cb-checked .x-form-radio::after { - background: var(--trw-accent-emphasis) !important; + background-color: var(--pm-accent-hover) !important; transform: translate(-50%, -50%) scale(1) !important; } -/* Buttons */ +/* Radio - Hover state */ +.x-form-radio:hover, +.x-form-cb-wrap:hover .x-form-radio { + border-color: var(--pm-accent-hover) !important; +} + +/* ===================================================== + BUTTONS - Clean, minimal style (UniFi authentic) + ===================================================== */ +/* v5.88: Respect inline display:none - Proxmox hides buttons dynamically and !important was overriding */ +.x-btn-default-small[style*="display: none"], +.x-btn-default-small[style*="display:none"] { + display: none !important; +} + .x-btn-default-small { - border-radius: 6px !important; + background-color: var(--pm-accent); + border: none; + border-radius: 6px; + padding: 5px 10px !important; + min-height: 26px !important; + /* v5.29: Header buttons (Create VM, Create CT, root@pam) - consistent 28px height with vertical centering */ + /* Exclude tag edit buttons (display:none when hidden, :has(.fa-check) for checkmark) */ + height: 28px !important; + min-height: 28px !important; + display: flex !important; + align-items: center !important; + padding: 3px 8px !important; } +.x-btn-default-small .x-btn-inner { + color: #ffffff; + padding: 2px 4px !important; + display: inline-flex !important; + align-items: center !important; +} + +/* Flex container logic (Merged from L3242) */ +.x-btn.x-btn-default-small .x-btn-button { + display: flex !important; + align-items: center !important; + justify-content: center !important; +} + +.x-btn.x-btn-default-small .x-btn-icon-el { + justify-content: center !important; +} + +.x-btn-default-small.x-btn-over, +.x-keyboard-mode .x-btn-default-small.x-btn-focus { + background-color: #338BFF; +} + +/* Pressed state */ +.x-btn-default-small.x-btn-pressed, +.x-btn-default-small.x-btn-menu-active { + background-color: #0056CC; +} + +/* Fix #29: Disabled buttons — explicit muted colors instead of opacity */ +.x-btn-default-small.x-btn.x-btn-disabled { + opacity: 1 !important; + background-color: #003A80 !important; + border-color: #002D66 !important; +} +.x-btn-default-small.x-btn.x-btn-disabled .x-btn-inner { + color: #8A9099 !important; +} + +/* Toolbar Buttons - Compact & Transparent */ .x-btn-default-toolbar-small { - border-radius: 4px !important; + background-color: transparent; + border: 1px solid #34383D !important; + padding: 4px 8px !important; + border-radius: 4px; } -.x-btn.x-btn-default-small:has(.fa-check) { - border-radius: 4px !important; +.x-btn-default-toolbar-small .x-btn-inner-default-toolbar-small { + color: #B7BCC2; } -/* Boundlist dropdowns */ +.x-btn-default-toolbar-small .x-btn-icon-el-default-toolbar-small { + color: #B7BCC2; +} + +/* v5.8: Toolbar button icon vertical centering fix */ +.x-btn-wrap.x-btn-wrap-default-toolbar-small { + align-items: center !important; +} + +.x-btn-icon-el.x-btn-icon-el-default-toolbar-small { + display: flex !important; + align-items: center !important; + justify-content: center !important; + line-height: 16px !important; + height: 16px !important; +} + +.x-btn-inner.x-btn-inner-default-toolbar-small { + display: flex !important; + align-items: center !important; +} + +.x-btn-default-toolbar-small .x-btn-wrap-default-toolbar-small.x-btn-arrow-right::after, +.x-btn-default-toolbar-small .x-btn-wrap-default-toolbar-small.x-btn-split-right::after { + filter: brightness(150%); +} + +.x-btn-default-toolbar-small.x-btn-over, +.x-keyboard-mode .x-btn-default-toolbar-small.x-btn-focus { + background-color: #34383D; +} + +.x-btn-default-toolbar-small.x-btn.x-btn-disabled { + opacity: 1 !important; + background-color: rgba(40, 43, 47, 0.5) !important; + border-color: #282B2F !important; +} +.x-btn-default-toolbar-small.x-btn.x-btn-disabled .x-btn-inner { + color: #555B63 !important; +} + +.x-btn-default-toolbar-small.x-btn.x-btn-menu-active, +.x-btn-default-toolbar-small.x-btn.x-btn-pressed { + background-color: var(--pm-accent); + padding: 4px 8px !important; /* Fix #30: prevent width change when dropdown opens */ +} + +.x-btn-default-toolbar-small.x-btn.x-btn-pressed .x-btn-inner-default-toolbar-small, +.x-btn-default-toolbar-small.x-btn.x-btn-pressed .x-btn-icon-el-default-toolbar-small { + color: #ffffff; +} + +/* Server View cogwheel button height - match adjacent combobox (28px) */ +.x-box-target:has(#view)>.x-btn { + height: 28px !important; + min-height: 28px !important; +} + +/* Header buttons (Create VM, Create CT, root@pam) - consistent 28px height with vertical centering */ +/* v5.29: Exclude tag edit buttons (display:none when hidden, :has(.fa-check) for checkmark) */ +.x-btn.x-btn-default-small:not(.x-btn-default-toolbar-small):not([style*="display: none"]):not([style*="display:none"]):not(:has(.fa-check)) { + height: 28px !important; + min-height: 28px !important; + display: flex !important; + align-items: center !important; + padding: 3px 8px !important; +} + +.x-btn.x-btn-default-small:not(.x-btn-default-toolbar-small):not([style*="display: none"]):not([style*="display:none"]):not(:has(.fa-check)) .x-btn-wrap { + display: flex !important; + align-items: center !important; +} + +.x-btn.x-btn-default-small:not(.x-btn-default-toolbar-small):not([style*="display: none"]):not([style*="display:none"]):not(:has(.fa-check)) .x-btn-inner { + display: flex !important; + align-items: center !important; +} + +/* Fix dropdown arrows on split/arrow buttons */ +.x-btn-wrap.x-btn-arrow-right::after, +.x-btn-wrap.x-btn-split-right::after { + height: 16px !important; + min-height: 16px !important; + width: 20px !important; + display: flex !important; + align-items: center !important; +} + +/* v5.27: Fix icon-only buttons - hide   inner element when button has no text */ +/* ExtJS adds x-btn-no-text class to buttons with only an icon */ +.x-btn-no-text .x-btn-inner, +.x-btn-button.x-btn-no-text .x-btn-inner, +.x-btn-button-default-toolbar-small.x-btn-no-text .x-btn-inner-default-toolbar-small, +.x-btn-button-default-small.x-btn-no-text .x-btn-inner-default-small, +.x-btn-button-default-small.x-btn-no-text>.x-btn-inner-default-small { + display: none !important; +} + +/* ===================================================== + v5.8: TOOLBOX SCROLL ARROWS FIX + ExtJS behavior: + - Sets inline display:none when content NOT scrollable + - Adds x-box-scroller-disabled class at boundary + - No inline style when scrollable (show arrow) + ===================================================== */ + +/* Hide disabled scrollers (at boundary) */ +.x-box-scroller.x-box-scroller-disabled { + display: none !important; +} + +/* Hide scrollers when ExtJS sets inline display:none (not scrollable) */ +/* Note: ExtJS uses "display:none" without space, check both formats */ +.x-box-scroller.x-box-scroller-toolbar[style*="display:none"], +.x-box-scroller.x-box-scroller-toolbar[style*="display: none"] { + display: none !important; +} + +/* Show scrollers when content is scrollable (no inline display style, not disabled) */ +.x-toolbar-vertical .x-box-scroller-top:not(.x-box-scroller-disabled):not([style*="display"]), +.x-toolbar-vertical .x-box-scroller-bottom:not(.x-box-scroller-disabled):not([style*="display"]) { + display: flex !important; +} + +/* Style the vertical toolbar scrollers - arrow only, no background */ +.x-toolbar-vertical .x-box-scroller-top, +.x-toolbar-vertical .x-box-scroller-bottom { + width: 100% !important; + height: 16px !important; + left: 0 !important; + right: 0 !important; + background: transparent !important; + background-image: none !important; + filter: none !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + cursor: pointer !important; + opacity: 1 !important; + z-index: 100 !important; + border: none !important; +} + +.x-toolbar-vertical .x-box-scroller-top { + top: 0 !important; +} + +.x-toolbar-vertical .x-box-scroller-bottom { + bottom: 0 !important; +} + +/* Arrow icons */ +.x-toolbar-vertical .x-box-scroller-top::before { + content: '▲' !important; + font-size: 10px !important; + color: #B7BCC2 !important; +} + +.x-toolbar-vertical .x-box-scroller-bottom::before { + content: '▼' !important; + font-size: 10px !important; + color: #B7BCC2 !important; +} + +/* Hover states */ +.x-toolbar-vertical .x-box-scroller-top:hover::before, +.x-toolbar-vertical .x-box-scroller-bottom:hover::before { + color: #F9FAFA !important; +} + +/* Re-hide disabled scrollers after styling */ +.x-toolbar-vertical .x-box-scroller.x-box-scroller-disabled { + display: none !important; +} + +/* ===================================================== + FORM ELEMENTS - Clean inputs (UniFi authentic) + ===================================================== */ +.x-form-trigger-default { + background-color: transparent; +} + +/* Boundlist dropdown popup - UniFi style 4px radius */ .x-boundlist { + background-color: #282B2F; + border: 1px solid #34383D; border-radius: 4px !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); + padding: 2px; } .x-boundlist-item { + background-color: transparent; + border: none; border-radius: 4px !important; + color: #DEE0E3; + padding: 2px 8px; } +.x-boundlist-selected { + background-color: rgba(249, 250, 250, 0.07); + color: #F9FAFA; +} + +.x-boundlist-item-over { + background-color: rgba(249, 250, 250, 0.04); + color: #DEE0E3; +} + +/* v5.38: Fix boundlist inner container inheriting 8px radius from global rule */ .x-boundlist-list-ct { border-radius: 4px !important; } -.x-boundlist-item-over, -.x-boundlist-selected { - border-radius: 4px !important; +/* Dropdown/floating grid pickers (e.g. ISO selector): readable column headers */ +.x-layer.x-grid .x-grid-header-ct, +.x-layer.x-grid .x-column-header, +.x-boundlist .x-grid-header-ct, +.x-boundlist .x-column-header { + background-color: var(--pm-bg-surface) !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } -/* Menus */ -.x-menu, +.x-layer.x-grid .x-column-header-inner, +.x-layer.x-grid .x-column-header-text, +.x-layer.x-grid .x-column-header-text-inner, +.x-layer.x-grid .x-column-header-text-default, +.x-boundlist .x-column-header-inner, +.x-boundlist .x-column-header-text, +.x-boundlist .x-column-header-text-inner, +.x-boundlist .x-column-header-text-default { + color: var(--pm-text-bright) !important; + font-weight: 700 !important; +} + +.x-layer.x-grid .x-column-header-trigger, +.x-boundlist .x-column-header-trigger { + border-left-color: rgba(255, 255, 255, 0.08) !important; +} + +.x-form-display-field-default { + color: #B7BCC2; +} + +.x-form-text-default { + background-color: transparent; + color: #F9FAFA; + border-radius: 4px 0 0 4px !important; + padding: 6px 10px !important; +} + +.x-form-trigger-wrap-default { + border-color: var(--pm-border); + border-radius: 4px !important; + background-color: var(--pm-hover-medium); +} + +.x-form-trigger-wrap-default.x-form-trigger-wrap-focus { + border-color: var(--pm-accent); + box-shadow: 0 0 0 3px var(--pm-focus-ring-color); +} + +.x-form-item-label-default { + color: #B7BCC2; +} + +.x-form-spinner-default { + background-color: #282B2F; +} + +/* v5.59: Make spinner buttons fill container with FontAwesome arrows */ +.x-form-spinner-up, +.x-form-spinner-down { + height: 13px !important; + background-image: none !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important; + font-weight: 900 !important; + font-size: 7px !important; + color: #B7BCC2 !important; +} + +.x-form-spinner-up::before { + content: '\f077' !important; + display: block !important; +} + +.x-form-spinner-down::before { + content: '\f078' !important; + display: block !important; +} + +/* v5.64: Dialog form field alignment - let ExtJS handle natural sizing */ +.x-window .x-container .x-form-trigger-wrap, +.x-window .x-form-item-body .x-form-trigger-wrap { + width: 100% !important; + max-width: none !important; +} + +/* Ensure input fills the trigger wrap */ +.x-window .x-container .x-form-trigger-wrap input.x-form-field { + width: calc(100% - 2px) !important; +} + +/* v5.63: Removed v5.61 margin-left rule that caused form alignment issues */ + +.x-form-cb-label-default { + color: #B7BCC2; +} + +/* v5.41: Reduce gap between checkbox/radio and label */ +/* Label after checkbox - reduce left padding */ +.x-form-cb-label-after { + padding-left: 6px !important; +} + +/* Label before checkbox - reduce right padding */ +.x-form-cb-label-before { + padding-right: 6px !important; +} + +.x-fieldset-default { + border-color: #34383D; +} + +.x-fieldset-header-default>.x-fieldset-header-text { + color: #F9FAFA; +} + +/* ===================================================== + GRID / TABLE - UniFi authentic row hover + ===================================================== */ +.x-column-header { + border-color: transparent !important; + background-color: transparent !important; +} + +/* Header Text - Bright White */ +.x-column-header-inner, +.x-column-header-text { + color: #F9FAFA !important; + font-weight: 700 !important; + font-size: 13px !important; +} + +.x-grid-item, +.x-column-header-default, +.x-grid-cell-row-numberer { + color: #DEE0E3 !important; + background-color: transparent !important; + border-color: transparent !important; + font-size: 13px !important; +} + +.x-column-header-trigger { + border-color: transparent !important; +} + +.x-grid-cell-special { + border-color: transparent !important; +} + +.x-grid-group-hd { + background-color: transparent !important; + border-color: transparent !important; +} + +.x-grid-group-title { + color: #F9FAFA !important; + font-weight: 700 !important; +} + +.x-grid-header-ct { + border: none !important; + background-color: transparent !important; +} + +/* Row separators (use td borders; more reliable than box-shadow on ) */ +.x-grid td, +.x-grid-td, +.x-grid-cell, +td.x-grid-cell { + border: none !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; +} + +/* v5.53: Vertically center text in grid table cells */ +.x-grid-cell { + vertical-align: middle !important; +} + +/* Keep rows themselves flat; separators handled above */ +.x-grid-item { + box-shadow: none !important; +} + +/* Slightly roomier rows (matches UniFi table density) */ +.x-grid-cell-inner { + padding-top: 6px !important; + padding-bottom: 6px !important; +} + +/* + Tasks + Cluster Log: compact rows (validated via DevTools) + - Tasks: 4px top/bottom + - Cluster Log: 4.5px top/bottom + - Keep line-height stable and prevent action-column icons from inflating row height +*/ + +/* Tasks grid (bottom Tasks panel) */ +div[id^="pveTaskViewer-"] .x-grid-cell-inner, +div[id^="pveClusterTasks-"] .x-grid-cell-inner, +[aria-label="Tasks"] .x-grid-view .x-grid-cell-inner { + padding-top: 4px !important; + padding-bottom: 4px !important; + line-height: 15px !important; +} + +/* Tasks action-column (chevron) can inflate row height unless centered */ +div[id^="pveTaskViewer-"] .x-grid-cell-inner-action-col, +div[id^="pveClusterTasks-"] .x-grid-cell-inner-action-col, +[aria-label="Tasks"] .x-grid-view .x-grid-cell-inner-action-col { + display: flex !important; + align-items: center !important; + justify-content: center !important; + padding-top: 4px !important; + padding-bottom: 4px !important; + line-height: 15px !important; +} + +/* Cluster Log grid */ +div[id^="pveClusterLog-"] .x-grid-cell-inner, +div[id^="pveLogView-"] .x-grid-cell-inner, +[aria-label="Cluster Log"] .x-grid-view .x-grid-cell-inner { + padding-top: 4.5px !important; + padding-bottom: 4.5px !important; + line-height: 15px !important; +} + +.x-grid-item-alt { + background-color: transparent !important; +} + +/* Ensure alternating rows have readable text */ +.x-grid-item-alt .x-grid-cell-inner, +.x-grid-item-alt .x-grid-cell { + color: #DEE0E3 !important; +} + +.x-grid-with-row-lines .x-grid-item { + border-bottom: none !important; + border: none !important; + box-shadow: none !important; +} + +/* Optional: no trailing divider after the last row */ +.x-grid-with-row-lines .x-grid-item:last-child td.x-grid-cell, +.x-grid-with-row-lines .x-grid-item:last-child .x-grid-td { + border-bottom: none !important; +} + +.x-grid-with-row-lines .x-grid-item.x-grid-item-over { + background-color: var(--pm-hover-subtle) !important; + border: none !important; +} + +.x-grid-with-row-lines .x-grid-item.x-grid-item-selected { + background-color: rgba(0, 110, 255, 0.08) !important; + box-shadow: rgba(71, 151, 255, 0.1) 0px 0px 0px 1000px inset !important; + border: none !important; +} + +.x-grid-item-over { + background-color: hsla(214, 8%, 98%, 0.02) !important; +} + +.x-grid-item-over .x-grid-cell { + background-color: transparent !important; +} + +/* Keep row separators stable on hover/selection (prevents 1px shift) */ +.x-grid-item-over .x-grid-cell, +.x-grid-item-over .x-grid-td, +.x-grid-item-over td.x-grid-cell, +.x-grid-item-selected .x-grid-cell, +.x-grid-item-selected .x-grid-td, +.x-grid-item-selected td.x-grid-cell { + border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; +} + +.x-grid-item-selected { + background-color: rgba(0, 110, 255, 0.08) !important; + box-shadow: rgba(71, 151, 255, 0.1) 0px 0px 0px 1000px inset !important; +} + +.x-grid-item-selected .x-grid-cell-inner { + color: hsla(0, 0%, 100%, 1) !important; +} + +/* v5.16: Remove background highlight from parent nodes (folders/servers) when focused/selected via arrow */ +/* Only leaf nodes (VMs/CTs) should show the selection/focus background */ +.x-grid-item:not(.x-grid-tree-node-leaf).x-grid-item-focused, +.x-grid-item:not(.x-grid-tree-node-leaf).x-grid-item-selected { + background-color: transparent !important; +} + +/* More visible hover state */ +.x-grid-item-over .x-grid-cell-inner, +.x-grid-item-over .x-grid-cell { + color: #F9FAFA !important; +} + +.x-column-header-over, +.x-column-header-open { + background-color: #34383D; +} + +.x-column-header-sort-ASC, +.x-column-header-sort-DESC { + background-color: #1b384c; +} + +.x-grid-row-summary .x-grid-cell, +.x-grid-row-summary .x-grid-rowwrap, +.x-grid-row-summary .x-grid-cell-rowbody { + background-color: #131416 !important; + border-color: #34383D; +} + +.x-grid-with-col-lines .x-grid-cell, +.x-grid-with-col-lines .x-grid-item-over .x-grid-cell, +.x-grid-with-col-lines .x-grid-item-selected .x-grid-cell { + border-color: hsla(214, 8%, 98%, 0.07) !important; + border-right-color: transparent !important; +} + +.x-dd-drag-proxy { + background-color: #282B2F; + border: 1px solid #34383D; + color: #B7BCC2; +} + +.x-keyboard-mode .x-grid-item-focused { + background-color: rgba(249, 250, 250, 0.07); + color: #F9FAFA; +} + +.x-keyboard-mode .x-grid-item-focused .x-grid-cell-inner::before { + border-color: var(--pm-accent); +} + +.x-grid-empty { + background-color: #131416; + color: #737C87; +} + +/* ===================================================== + MENUS - Floating, clean (UniFi authentic) + ===================================================== */ .x-menu-default { - border-radius: 8px !important; + border: 1px solid #34383D; + border-radius: 8px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); +} + +.x-menu-body-default { + background-color: #282B2F; +} + +.x-menu-header { + background-color: var(--pm-accent); +} + +.x-menu-item-default.x-menu-item-separator { + background-color: #282B2F; + border-color: #34383D; } .x-menu-item-default.x-menu-item-focus, -.x-menu-item-default.x-menu-item-active, -.x-menu-item:hover { - border-radius: 6px !important; +.x-menu-item-default.x-menu-item-active { + background-color: rgba(249, 250, 250, 0.07) !important; + color: #F9FAFA; } -/* Tooltips */ +.x-menu-item-text-default { + color: #DEE0E3; +} + +.x-menu-item-icon-default { + color: #B7BCC2; +} + +.x-menu-icon-separator-default { + background-color: transparent; + border-color: #34383D; +} + +/* ===================================================== + PANELS - Card-like containers (UniFi authentic) + ===================================================== */ +.x-panel-header-default { + background-color: #131416; + border: none; +} + +.x-panel-header-default .x-tool-tool-el { + background-color: transparent; +} + +.x-tool-img { + filter: brightness(175%); +} + +.x-tool-over .x-tool-img { + filter: brightness(200%); +} + +/* v5.39: Replace pixelated close button sprite with crisp FontAwesome icon */ +.x-tool-tool-el.x-tool-close, +.x-tool-img.x-tool-close { + background-image: none !important; + font-family: "FontAwesome" !important; + font-size: 20px !important; + line-height: 16px !important; + text-align: center !important; + color: #737C87 !important; + transition: color 0.15s ease !important; + filter: none !important; + width: 16px !important; + height: 16px !important; +} + +.x-tool-tool-el.x-tool-close::before, +.x-tool-img.x-tool-close::before { + content: "\f00d" !important; +} + +.x-tool:hover .x-tool-tool-el.x-tool-close, +.x-tool:hover .x-tool-img.x-tool-close { + color: #DEE0E3 !important; +} + +.x-panel-header-title-default { + color: #F9FAFA; +} + +/* Panel header text (VM/Container titles in toolbar) */ +.x-panel-header-text, +.x-panel-header-text-default, +.x-panel-header-text.x-box-item, +.x-toolbar .x-panel-header-text, +.x-toolbar-item.x-panel-header-text { + color: #F9FAFA !important; +} + +/* Title text general */ +.x-title-text, +.x-title-text-default { + color: #F9FAFA !important; + overflow: visible !important; +} + +/* Panel header container - ensure proper visibility */ +.x-panel-header, +.x-panel-header-default { + overflow: visible !important; +} + +.x-panel-body-default { + background-color: var(--pm-bg-base); + border-color: var(--pm-border); + color: var(--pm-text-muted); +} + +div[id^="pveResourceTree-"][id$="-body"] { + border-color: var(--pm-bg-base); +} + +/* ===================================================== + PROGRESS BARS - Clean, rounded (UniFi authentic) + v5.17: Consolidated - removed duplicate section at end of file + ===================================================== */ +/* Fix: Widget containers need overflow visible to not clip progress bars */ +.x-container[id^="pmxInfoWidget"], +.x-container.x-box-layout-ct { + overflow: visible !important; +} + +/* v5.32: Add padding gap to progress bar rows (CPU/Memory/SWAP/Bootdisk) + Only targets containers with VISIBLE progress bars (excludes Status/HA State/Node/Unprivileged) */ +/* v5.94: Reduced vertical padding from 5px to 3px to prevent PBS summary panel clipping + (ExtJS calculates body height before CSS padding → overflow hidden clips bottom rows) */ +.x-container[id^="pmxInfoWidget"].x-box-layout-ct:has(.x-progress:not([style*="display: none"]):not([style*="display:none"])) { + padding: 3px 25px !important; +} + +/* v5.51: Fix horizontal padding alignment for rows with HIDDEN progress bars + (Load average, KSM sharing, CPU(s), Kernel Version, Boot Mode, Manager Version) + Only adjusts horizontal padding to match visible progress bar rows, keeps vertical minimal */ +.x-container[id^="pmxInfoWidget"].x-box-layout-ct:has(.x-progress[style*="display: none"]), +.x-container[id^="pmxInfoWidget"].x-box-layout-ct:has(.x-progress[style*="display:none"]) { + padding-left: 25px !important; + padding-right: 25px !important; +} + +/* v5.51: Repository Status row uses different ID pattern */ +.x-container[id^="pmxNodeInfoRepoStatus"].x-box-layout-ct { + padding-left: 25px !important; + padding-right: 25px !important; +} + +/* v5.94: Fix PBS summary panel clipping - reduce body padding to fit all rows + PBS panel has 9 info widgets in a smaller body (243px); default 15px top/bottom + padding causes scrollHeight to exceed clientHeight → bottom rows clipped */ +div[id^="pbsNodeInfoPanel"][id$="-body"] { + padding-top: 5px !important; + padding-bottom: 5px !important; +} + +/* v5.22: Removed height:inherit - only min-height:auto is needed */ +/* height:inherit was breaking widget containers, ExtJS inline heights work without it */ +.x-container[id^="pmxInfoWidget"] .x-box-inner, +.x-container.x-box-layout-ct .x-box-inner { + min-height: auto !important; +} + +/* v5.22: Fix pmxInfoWidget container heights - need 24px to fit 8px progress bars */ +[id^="pmxInfoWidget"][id$="-innerCt"] { + min-height: 24px !important; + overflow: visible !important; +} + +/* Progress bar outer container (track) */ +.x-progress, +.x-progress-default { + height: 8px !important; + min-height: 8px !important; + max-height: 8px !important; + border-radius: 5px !important; + overflow: hidden !important; + background-color: var(--pwt-gauge-back) !important; + border: none !important; + padding: 0 !important; +} + +/* Progress bar inner fill - v5.31: Updated to UniFi blue var(--pm-accent-hover) */ +.x-progress-bar, +.x-progress-bar-default, +.x-progress-default .x-progress-bar-default { + height: 8px !important; + min-height: 8px !important; + max-height: 8px !important; + border-radius: 5px !important; + border: none !important; + background-color: var(--pwt-gauge-default) !important; + background-image: none !important; +} + +/* Hide progress text overlay */ +.x-progress-text, +.x-progress-default .x-progress-text { + display: none !important; +} + +/* Warning state */ +.x-progress.warning .x-progress-bar, +.x-progress.warning .x-progress-bar-default { + background-color: var(--pwt-gauge-warn) !important; +} + +/* Critical state */ +.x-progress.critical .x-progress-bar, +.x-progress.critical .x-progress-bar-default { + background-color: var(--pwt-gauge-crit) !important; +} + +/* ===================================================== + SPLITTERS - Minimal + ===================================================== */ +.x-splitter { + background-color: var(--pm-bg-base); +} + +/* Horizontal splitter (between main content and Tasks panel) - visible divider line */ +.x-splitter-horizontal, +.x-splitter[aria-orientation="horizontal"] { + background-color: transparent !important; + border-top: 1px solid var(--pm-border) !important; +} + +/* Vertical splitter - gap with visible line */ +.x-splitter-vertical { + width: 7px !important; + min-width: 7px !important; + background-color: transparent !important; + border-right: 1px solid #444444 !important; + z-index: 10 !important; +} + +.x-keyboard-mode .x-splitter-focus::after { + border-color: var(--pm-accent); +} + +/* ===================================================== + TABS - Clean, flat (UniFi authentic) + ===================================================== */ +.x-tab-bar-default { + background-color: #131416; +} + +.x-tab-default.x-tab-over { + background-color: rgba(249, 250, 250, 0.04); + border: none; +} + +/* Remove white focus border/outline from tabs (v5.46) */ +.x-tab:focus, +.x-tab.x-tab-focus, +.x-tab.x-tab-active:focus, +.x-keyboard-mode .x-tab:focus, +.x-keyboard-mode .x-tab-focus, +.x-keyboard-mode .x-tab-active.x-tab-focus, +.x-tab-default:focus, +.x-tab-default.x-tab-focus, +.x-tab-bar .x-tab:focus, +.x-tab-bar .x-tab.x-tab-focus { + outline: none !important; + box-shadow: none !important; + border-color: transparent !important; +} + +.x-tab:focus::before, +.x-tab:focus::after, +.x-tab.x-tab-focus::before, +.x-tab.x-tab-focus::after, +.x-keyboard-mode .x-tab:focus::before, +.x-keyboard-mode .x-tab:focus::after { + border: none !important; + outline: none !important; + box-shadow: none !important; +} + +.x-tab-default.x-tab.x-tab-active { + background-color: var(--pm-accent); + border: none; +} + +.x-tab-default.x-tab.x-tab-disabled { + background-color: transparent; + border: none; + color: #737C87; +} + +.x-keyboard-mode .x-tab-default.x-tab-focus, +.x-keyboard-mode .x-tab-default.x-tab-focus.x-tab-active { + background-color: var(--pm-accent); + border: none; +} + +.x-tab-default-top { + background-color: #131416; + border: none; +} + +.x-tab-inner-default { + color: #B7BCC2; +} + +.x-tab-active .x-tab-inner-default { + color: #ffffff; +} + +/* ===================================================== + TOOLTIPS (UniFi authentic) + ===================================================== */ .x-tip-default { - border-radius: 6px !important; + background-color: #282B2F; + border: 1px solid #34383D; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } -/* Tree list items */ +.x-tip-body-default { + color: #DEE0E3; +} + +.x-tip-form-invalid { + background-color: #282B2F; + border-color: #f03a3e; +} + +.x-tip-body-form-invalid { + color: #f03a3e; +} + +/* ===================================================== + TOOLBARS - Minimal borders (UniFi authentic) + ===================================================== */ +.x-toolbar { + background-color: #131416; +} + +.x-toolbar-default { + background-color: #131416; + border: none; +} + +.x-toolbar-default.x-docked-top { + border: none; + border-bottom: 1px solid #282B2F; +} + +.x-toolbar-default .x-toolbar-separator { + border-color: #34383D; +} + +.x-toolbar-text-default { + color: #B7BCC2; +} + +/* ===================================================== + TREE LIST - Sidebar navigation (UniFi authentic) + ===================================================== */ .x-treelist-item, .x-treelist-item-tool { + background-color: #131416; border-radius: 4px !important; } +/* v5.84: Fix horizontal scrollbar in resource tree + ExtJS sets inline 'overflow: hidden auto' which causes 1px horizontal scroll. + Force overflow-x: hidden while preserving vertical scroll. + Note: Must use .x-fit-item compound selector to win over rule at line ~3365 */ +[id^="pveResourceTree"] .x-tree-view, +[id^="pveResourceTree"] .x-tree-view.x-fit-item { + overflow-x: hidden !important; +} + +/* Add spacing between tree items - v5.33: Reduced padding for compactness */ +.x-treelist-row, +.x-tree-cell, +.x-grid-cell-treecolumn { + padding: 0px 8px !important; +} + +/* v5.9: UniFi-STYLE SELECTED ITEM (matching UniFi Controller) + Uses subtle background + blue icon AND text with ::before pseudo-element */ + +.x-treelist-item-text, +.x-treelist-item-icon { + color: rgba(255, 255, 255, 0.75); +} + +/* Remove ALL old hover/selected background styles */ .x-treelist-row, .x-treelist-row:hover, .x-treelist-row-over, @@ -2090,13 +1873,1313 @@ th, .x-treelist-item-expanded>.x-treelist-row-over, .x-treelist-item-expandable>.x-treelist-row, .x-treelist-item-expandable>.x-treelist-row-over { + background: none !important; + background-color: transparent !important; + box-shadow: none !important; + border-left: none !important; + position: relative !important; + z-index: 1 !important; border-radius: 4px !important; } +/* Pseudo-element for ALL background effects */ .x-treelist-row::before { + content: '' !important; + display: block !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: 100% !important; + height: 100% !important; + border-radius: 4px !important; + background: transparent !important; + opacity: 0 !important; + transform: scale(0.95) !important; + transition: opacity 0.15s ease, transform 0.15s ease !important; + z-index: -1 !important; + pointer-events: none !important; +} + +/* Hover state - ONLY via :hover pseudo-class */ +.x-treelist-row:hover::before { + background: rgb(40, 43, 47) !important; + opacity: 0.5 !important; + transform: scale(1) !important; +} + +/* DISABLE the x-treelist-row-over class effect (ExtJS adds this to parents) */ +.x-treelist-row-over::before { + opacity: 0 !important; +} + +/* But if it's ALSO being hovered directly, show the effect */ +.x-treelist-row-over:hover::before { + background: rgb(40, 43, 47) !important; + opacity: 0.5 !important; + transform: scale(1) !important; +} + +/* Selected state background */ +.x-treelist-item-selected>.x-treelist-row::before { + background: rgb(40, 43, 47) !important; + opacity: 1 !important; + transform: scale(1) !important; +} + +/* Selected + hover - slightly lighter */ +.x-treelist-item-selected>.x-treelist-row:hover::before { + background: rgb(50, 53, 57) !important; + opacity: 1 !important; +} + +/* Selected item text - BLUE like UniFi */ +.x-treelist-item-selected>.x-treelist-row .x-treelist-item-text { + color: rgb(71, 151, 255) !important; +} + +/* Selected item icon - BLUE like UniFi */ +.x-treelist-item-selected>.x-treelist-row .x-treelist-item-icon { + color: rgb(71, 151, 255) !important; +} + +/* Parent item containing selected child - WHITE text and icon */ +.x-treelist-item:has(.x-treelist-item-selected)>.x-treelist-row .x-treelist-item-text { + color: #F9FAFA !important; +} + +.x-treelist-item:has(.x-treelist-item-selected)>.x-treelist-row .x-treelist-item-icon { + color: #F9FAFA !important; +} + +/* Reset non-selected child items */ +.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected):not(:has(.x-treelist-item-selected))>.x-treelist-row::before { + opacity: 0 !important; +} + +.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected):not(:has(.x-treelist-item-selected))>.x-treelist-row:hover::before { + opacity: 0.5 !important; +} + +.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected):not(:has(.x-treelist-item-selected)) .x-treelist-item-text, +.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected):not(:has(.x-treelist-item-selected)) .x-treelist-item-icon { + color: #B7BCC2 !important; +} + +.x-treelist-pve-nav { + background-color: #131416; + border: none; +} + +/* ===================================================== + WINDOWS / DIALOGS (UniFi authentic) + ===================================================== */ +/* v5.50: Reduced shadow intensity for cleaner look */ +.x-window-default { + background-color: #131416; + border: 1px solid #34383D; + border-radius: 8px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1); +} + +.x-window-header-default { + background-color: #282B2F; + border: none; + border-radius: 8px 8px 0 0; +} + +.x-window-header-default .x-mask { + background-color: rgba(40, 43, 47, 0.7); +} + +.x-window-header-title-default { + color: #F9FAFA; +} + +.x-window-body-default { + background-color: #131416; + border: none; + color: #B7BCC2; +} + +.x-window-ghost { + background-color: #131416; +} + +.x-window-header-default .x-tool-img { + background-color: transparent; +} + +.x-message-box .x-window-body { + background-color: #282B2F; +} + +/* ===================================================== + v5.17 FIX: Dialog button overlap fix + ExtJS uses absolute positioning for buttons, but theme's + display:flex !important was overriding inline display:none + on hidden buttons (OK/Cancel in Yes/No dialogs) + ===================================================== */ +/* Respect ExtJS inline display:none on hidden dialog buttons */ +.x-message-box .x-btn.x-btn-default-small[style*="display: none"], +.x-message-box .x-btn.x-btn-default-small[style*="display:none"], +.x-window .x-toolbar-footer .x-btn[style*="display: none"], +.x-window .x-toolbar-footer .x-btn[style*="display:none"] { + display: none !important; +} + +/* ===================================================== + v5.37 FIX: Create Wizard footer clipping + Some wizards position their footer toolbar with inline top/height. + If theme tweaks change control heights/padding, the footer can extend + past the window bottom and get clipped (the window has overflow:hidden). + Anchor wizard footers to bottom to keep Back/Next/Advanced visible. + ===================================================== */ +.x-window[id^="pveQemuCreateWizard-"] .x-toolbar-footer, +.x-window[id^="pveLxcCreateWizard-"] .x-toolbar-footer { + top: auto !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + width: auto !important; + box-sizing: border-box !important; + padding: 8px 16px !important; + height: auto !important; + display: flex !important; + align-items: center !important; +} + +/* Dialog footer - use flexbox for proper button spacing */ +.x-message-box .x-toolbar-footer { + display: flex !important; + justify-content: flex-end !important; + align-items: center !important; + gap: 8px !important; + padding: 12px 16px !important; +} + +.x-message-box .x-toolbar-footer .x-box-inner, +.x-message-box .x-toolbar-footer .x-box-inner { + display: flex !important; + justify-content: flex-end !important; + align-items: center !important; + gap: 8px !important; + width: 100% !important; + height: auto !important; +} + +.x-message-box .x-toolbar-footer .x-box-target, +.x-message-box .x-toolbar-footer .x-box-target { + display: flex !important; + justify-content: flex-end !important; + align-items: center !important; + gap: 8px !important; + position: relative !important; + width: auto !important; + height: auto !important; +} + +/* Override absolute positioning on dialog buttons */ +.x-message-box .x-toolbar-footer .x-btn, +.x-message-box .x-toolbar-footer .x-btn { + position: relative !important; + left: auto !important; + top: auto !important; + margin: 0 !important; +} + +/* ===================================================== + v5.49: LOGIN MODAL / DIALOG FORM FIXES + - Form fields stretch to full width (override inline 380px) + - Footer checkbox/button gap fixed (was -7px overlap) + - Footer toolbar takes full width (override inline 374px) + v5.65: Fix mainPanel width constraint - ExtJS calculates based on + original parent width before CSS override, causing 549px instead + of ~580px. Force direct child panels to use full available width. + ===================================================== */ + +/* ===================================================== + v5.74: DIALOG LAYOUT FIXES - REMOVED OVERRIDES + Removed all forced width/padding rules for panel bodies + Removed forced width/padding rules for panel bodies to prevent layout cutoff. + ===================================================== */ + +/* Only ensure the footer toolbar behaves correctly */ +.x-window .x-toolbar-footer { + width: 100% !important; + padding-right: 10px !important; + box-sizing: border-box !important; +} + +.x-window .x-toolbar-footer .x-box-inner { + display: flex !important; + align-items: center !important; + justify-content: flex-end !important; + gap: 12px !important; + width: 100% !important; +} + +.x-window .x-toolbar-footer .x-box-target { + display: flex !important; + align-items: center !important; + justify-content: flex-end !important; + gap: 12px !important; + width: 100% !important; +} + +/* Remove absolute positioning from footer items */ +.x-window .x-toolbar-footer .x-form-type-checkbox, +.x-window .x-toolbar-footer .x-btn { + position: relative !important; + left: auto !important; + top: auto !important; + margin: 0 !important; +} + +/* Auto-width for checkbox label in footer */ +.x-window .x-toolbar-footer .x-form-type-checkbox .x-form-item-label { + width: auto !important; +} + +/* v5.75: Fix Help button alignment in dialog footers */ +/* The help button is an inline button and should be on the left */ +.x-window .x-toolbar-footer .proxmox-inline-button:first-child { + margin-right: auto !important; +} + +/* ===================================================== + PROXMOX LOGO - Invert for dark + ===================================================== */ +img[id^="proxmoxlogo-"][id$="-img"] { + filter: invert(1) hue-rotate(180deg); +} + +img[id^="proxmoxLogoSvg-"][id$="-img"] { + filter: invert(1) hue-rotate(180deg); +} + +div[id^="versioninfo-"]+div[id^="panel-"]>div[id^="panel-"][id$="-bodyWrap"]>div, +div.eol-notice+div[id^="panel-"]>div[id^="panel-"][id$="-bodyWrap"]>div { + background-color: transparent; + border: none; +} + +/* ===================================================== + PROXMOX SPECIFIC (UniFi authentic) + ===================================================== */ +.proxmox-invalid-row { + background-color: rgba(240, 58, 62, 0.15); +} + +.x-keyboard-mode .proxmox-invalid-row .x-grid-item-focused { + background-color: rgba(240, 58, 62, 0.25); +} + +.proxmox-warning-row { + background-color: rgba(245, 166, 35, 0.15); +} + +.proxmox-disabled-row td { + color: #737C87; +} + +.pmx-hint { + background-color: rgba(245, 166, 35, 0.15); + white-space: nowrap !important; +} + +/* Allow pmx-hint text to expand beyond parent container width */ +.x-container:has(> .x-box-inner > .x-box-target > .pmx-hint) .x-box-inner { + overflow: visible !important; +} + +.pmx-hint a { + color: var(--pm-accent); +} + +.proxmox-inline-button { + background-color: #34383D; + border: none; + color: #B7BCC2; +} + +.proxmox-inline-button.x-btn-over { + background-color: rgba(249, 250, 250, 0.07); +} + +.proxmox-inline-button .x-btn-inner, +.proxmox-inline-button .x-btn-icon-el { + color: #B7BCC2; +} + +/* Loading indicators */ +.x-grid-row-loading, +.x-treelist-item-loading .x-treelist-item-icon, +.x-mask-msg-text, +.x-grid-tree-loading .x-tree-icon { + filter: invert(90%); +} + +.x-mask-msg { + background-color: #282B2F; + border: 1px solid #34383D; + border-radius: 8px; +} + +/* Markdown content */ +.pmx-md code { + background-color: #131416; +} + +.pmx-md pre code { + border-color: #34383D; +} + +.pmx-md tbody tr td { + border-color: #34383D; +} + +.pmx-md tbody tr:nth-of-type(2n) { + background-color: rgba(249, 250, 250, 0.02); +} + +.pmx-md tbody tr:hover td { + background-color: rgba(249, 250, 250, 0.04); +} + +.pmx-md a { + color: var(--pm-accent); +} + +/* APT repos */ +.proxmox-apt-repos .x-grid-group-hd { + background-color: #131416; + border: none; +} + +.proxmox-apt-repos .x-grid-group-title { + color: #F9FAFA; +} + +/* Status colors */ +.info-blue { + color: var(--pm-accent) !important; +} + +.critical { + color: #f03a3e !important; +} + +/* Tags - Native contrast detection with proper visibility */ +.pve-edit-tag.editable span { + background-color: #282B2F; + color: #B7BCC2; + border-color: #34383D; +} + +/* Tags with LIGHT text (dark backgrounds like blue tags) */ +.pve-edit-tag.proxmox-tag-light, +.pve-edit-tag.proxmox-tag-light span { + color: #FFFFFF !important; +} + +/* Tags with DARK text (bright backgrounds like pink/yellow tags) - non-edit mode only */ +.pve-edit-tag.proxmox-tag-dark:not(.editable), +.pve-edit-tag.proxmox-tag-dark:not(.editable) span { + color: #1C1E21 !important; +} + +/* v5.88: In edit mode, force light text on ALL tags for better visibility */ +.pve-edit-tag.editable.proxmox-tag-dark, +.pve-edit-tag.editable.proxmox-tag-dark span { + color: #F9FAFA !important; +} + +/* Individual tag styling */ +.pve-edit-tag { + display: inline-flex !important; + align-items: center !important; + padding: 2px 8px !important; + border-radius: 6px !important; +} + +/* v5.30: Tree view tags - match header tag styling */ +.x-tree-node-text .proxmox-tag-dark, +.x-tree-node-text .proxmox-tag-light, +.x-grid-cell-inner .proxmox-tag-dark, +.x-grid-cell-inner .proxmox-tag-light, +span.proxmox-tag-dark, +span.proxmox-tag-light { + border-radius: 6px !important; + padding: 2px 8px !important; + display: inline-flex !important; + align-items: center !important; +} + +/* v5.52: Make resource tree tags match search table tag height (19px) */ +.x-tree-node-text .proxmox-tag-dark, +.x-tree-node-text .proxmox-tag-light { + padding-top: 1px !important; + padding-bottom: 1px !important; +} + +/* v5.52: Force tree row height to stay at 25px when tags have reduced padding */ +.x-tree-panel .x-grid-row { + height: 25px !important; +} + +/* Pencil button for editing tags */ +/* v5.28: Removed display override - let Proxmox control visibility via inline style */ +.pve-tag-inline-button { + /* display controlled by inline style (none when not hovering, flex when editing) */ + align-items: center !important; + justify-content: center !important; + width: 20px !important; + height: 20px !important; + background: transparent !important; + cursor: pointer !important; +} + +.pve-tag-inline-button .fa-pencil, +.pve-tag-inline-button .x-fa.fa-pencil { + color: #8A919A !important; +} + +.pve-tag-inline-button:hover .fa-pencil { + color: #F9FAFA !important; +} + +/* v5.29: Checkmark button in tag edit - match toolbar button size */ +/* The checkmark has x-btn-default-small (not toolbar-small) so we need specific sizing */ +.x-btn.x-btn-default-small:has(.fa-check) { + min-height: 24px !important; + height: 24px !important; + padding: 3px 8px !important; + border-radius: 4px !important; + background-color: var(--pm-accent) !important; + border: none !important; +} + +/* Disabled checkmark - gray/transparent */ +.x-btn.x-btn-default-small:has(.fa-check).x-btn-disabled { + background-color: transparent !important; + border: 1px solid #34383D !important; + opacity: 0.5 !important; +} + +/* Checkmark icon - white when enabled */ +.x-btn.x-btn-default-small:has(.fa-check) .fa-check { + color: #ffffff !important; +} + +/* Disabled checkmark icon - gray */ +.x-btn.x-btn-default-small:has(.fa-check).x-btn-disabled .fa-check { + color: #737C87 !important; +} + +/* Checkmark button hover - lighter blue */ +.x-btn.x-btn-default-small:has(.fa-check):not(.x-btn-disabled):hover { + background-color: #338BFF !important; +} + +/* Hide the   inner element on checkmark button */ +.x-btn.x-btn-default-small:has(.fa-check) .x-btn-inner { + display: none !important; +} + +.proxmox-tags-full .proxmox-tag-light, +.proxmox-tags-full .proxmox-tag-dark, +.proxmox-tags-circle .proxmox-tag-light, +.proxmox-tags-circle .proxmox-tag-dark { + outline: 1px solid rgba(52, 56, 61, 0.3); +} + +/* ===================================================== + DATE PICKER (UniFi authentic) + ===================================================== */ +.x-datepicker, +.x-datepicker-column-header, +.x-monthpicker { + background-color: #131416; + color: #B7BCC2; + border: none; +} + +.x-datepicker-month .x-btn-over.x-btn-default-small { + background-color: #34383D; +} + +.x-monthpicker-months { + border-color: #34383D; +} + +.x-datepicker-header { + background-color: #131416; +} + +.x-datepicker-date, +.x-monthpicker-item-inner { + color: #B7BCC2; +} + +.x-datepicker-prevday .x-datepicker-date, +.x-datepicker-nextday .x-datepicker-date { + color: #737C87; +} + +.x-datepicker-footer, +.x-monthpicker-buttons { + background-color: #131416; +} + +.x-datepicker-selected div.x-datepicker-date, +.x-monthpicker-item a.x-monthpicker-selected, +a.x-monthpicker-item-inner:hover, +div.x-datepicker-date:hover { + background-color: var(--pm-accent); + color: #fff; +} + +/* ===================================================== + USAGE BARS - UniFi authentic style + ===================================================== */ +/* v5.31: Reduced border-radius, removed wrapper padding for full-width fill */ +.usage-wrapper { + border: none !important; + border-radius: 2px !important; + background-color: #34383D !important; + overflow: hidden !important; + padding: 0 !important; +} + +.usage-negative { + background-color: transparent !important; + width: 100% !important; +} + +.usage { + background-color: var(--pm-accent) !important; + border-radius: 2px !important; + width: 100% !important; +} + +/* ===================================================== + CONSOLE / TERMINAL + ===================================================== */ +div.monitor { + border-color: #34383D; +} + +.install-mask { + background-color: #131416; + color: #B7BCC2; +} + +.x-window.install-mask { + box-shadow: rgba(0, 0, 0, 0.5) 0 4px 20px !important; +} + +/* ===================================================== + OSD TABLE + ===================================================== */ +table.osds tr { + border-color: var(--pm-border); +} + +table.osds td { + border-color: var(--pm-border); +} + +/* ===================================================== + LINKS - UniFi Blue (authentic) + ===================================================== */ +a { + color: var(--pm-accent); +} + +a:hover { + color: var(--pm-accent-hover); +} + +/* ===================================================== + STATUS DOTS (like UniFi - authentic) + ===================================================== */ +/* Proxmox uses ::before for the type icon and ::after for the status glyph. + UniFi style: keep type icon neutral and show a green dot for "running". */ +.x-tree-icon-custom.running::before, +.x-grid-icon-custom.running::before { + color: #B7BCC2 !important; +} + +.x-tree-icon-custom.running::after, +.x-grid-icon-custom.running::after { + content: "\f111" !important; + /* FontAwesome circle */ + font-family: "FontAwesome" !important; + font-size: 9px !important; + line-height: 1 !important; + color: var(--pm-success) !important; + background: transparent !important; + text-shadow: none !important; +} + +/* Align CT/LXC running dot with VM running dot (cube glyph is slightly narrower) */ +.x-tree-icon-custom.fa-cube.running::after, +.x-grid-icon-custom.fa-cube.running::after { + left: -3.8px !important; + right: 3.8px !important; +} + +/* v5.90: Lock icons (migrate, backup, suspend) override running dot + When VM is both running AND locked for operation, show the lock icon instead of green dot */ +.x-tree-icon-custom.running.lock-migrate::after, +.x-grid-icon-custom.running.lock-migrate::after { + content: "\f1d9" !important; /* FontAwesome paper-plane (migrate) */ + font-size: 0.75em !important; + color: var(--pm-warning) !important; /* Amber to indicate operation in progress */ +} + +.x-tree-icon-custom.running.lock-backup::after, +.x-grid-icon-custom.running.lock-backup::after { + content: "\f0c7" !important; /* FontAwesome save/floppy (backup) */ + font-size: 0.75em !important; + color: var(--pm-warning) !important; +} + +.x-tree-icon-custom.running.lock-suspending::after, +.x-grid-icon-custom.running.lock-suspending::after { + content: "\f019" !important; /* FontAwesome download (suspending) */ + font-size: 0.75em !important; + color: var(--pm-warning) !important; +} + +.x-tree-icon-custom.stopped::before, +.x-grid-icon-custom.stopped::before { + color: var(--pm-text-disabled); +} + +/* ===================================================== + SCROLLBARS - Cyber red-accented + ===================================================== */ +::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-track { + background: var(--pm-bg-base); +} + +::-webkit-scrollbar-thumb { + background: rgba(220, 38, 38, 0.25); + border-radius: 3px; + transition: background .3s; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(220, 38, 38, 0.5); +} + +/* Firefox scrollbar styling */ +* { + scrollbar-width: thin; + scrollbar-color: rgba(220, 38, 38, 0.25) var(--pm-bg-base); +} + +::-webkit-scrollbar-corner { + background-color: var(--pm-bg-base); +} + +/* ===================================================== + FIX: Labels and grid text - UniFi authentic colors + ===================================================== */ +.x-grid-cell-inner, +.x-grid-cell, +.x-form-display-field, +.x-form-display-field-default, +td, +.x-panel-body-default, +.x-grid-item { + color: #DEE0E3 !important; +} + +/* Column headers should be brighter */ +.x-column-header-text, +.x-column-header-text-inner, +.x-column-header-text-default { + color: var(--pm-text-bright) !important; +} + +/* Fix specific grid/table text */ +.x-grid-cell-inner span, +.x-grid-cell-inner div { + color: #DEE0E3; +} + +/* Resource panel labels */ +.x-form-item-label-inner { + color: #DEE0E3 !important; +} + +/* ===================================================== + FIX: Summary/Stats panels - add borders/cards + ===================================================== */ +.pveStatusPanel, +.x-panel-default-framed, +.x-panel-body-default-framed { + background-color: #131416 !important; + border: 1px solid #34383D !important; + border-radius: 12px !important; +} + +/* Stats panel body (Status, CPU, Memory, etc) - match Notes panel rounded corners */ +[id^="pveGuestStatusView-"][id$="-body"], +[id^="pmxNotesView-"] .x-panel-body { + border-radius: 8px !important; +} + +/* Panel headers in summary */ +.x-panel-header-default-framed { + background-color: #282B2F !important; + border: none !important; + border-bottom: 1px solid #34383D !important; + border-radius: 12px 12px 0 0 !important; +} + +/* Summary status grid - the table with CPU/Memory/etc */ +/* FIX v5.18: Removed overflow:hidden to restore content visibility */ +.pve-info-grid { + border-radius: 12px !important; +} + +/* Form display fields in summary (status fields) */ +.x-form-display-field-default { + border-radius: 6px !important; +} + +/* Graph containers - ensure visibility */ +.pve-rrdview, +.rrdview { + background-color: #131416 !important; + border: 1px solid #34383D !important; + border-radius: 12px !important; + padding: 12px !important; +} + +/* Chart/RRD panel specific - canvas should be transparent for chart lines to show */ +div[id*="rrdchart"], +.pve-rrddatastore, +.pmx-panel-rrd { + background-color: #131416 !important; +} + +/* Canvas elements - don't set background, let charts be visible */ +.proxmox-rrd-panel canvas, +.proxmox-widget-toolkit canvas, +canvas.x-surface, +.x-surface canvas { + background-color: transparent !important; + opacity: 1 !important; +} + +/* Proxmox RRD chart widget - ensure visibility */ +.proxmox-rrd-panel, +.proxmox-rrd-chart { + background-color: #131416 !important; +} + +/* Chart text/labels */ +.x-surface text, +svg text { + fill: #DEE0E3 !important; +} + +/* Summary status panel */ +.pve-summary-status, +.x-container .pve-status { + background-color: #131416 !important; + border: 1px solid #34383D !important; + border-radius: 8px !important; +} + +/* Notes panel */ +.x-panel-default[id*="notes"], +.pve-notes-view { + background-color: #131416 !important; + border: 1px solid #34383D !important; + border-radius: 8px !important; +} + +/* ===================================================== + FIX: Fieldset and form sections + ===================================================== */ +.x-fieldset { + background-color: #131416 !important; + border: 1px solid #34383D !important; + border-radius: 8px !important; + padding: 12px !important; +} + +.x-fieldset-header-text { + color: #F9FAFA !important; + font-weight: 500 !important; +} + +/* ===================================================== + FIX: UniFi-style rounded corners on hover/selection + ===================================================== */ + +/* Grid row hover/selection - rounded corners */ +.x-grid-item-over, +.x-grid-item-selected, +.x-grid-with-row-lines .x-grid-item.x-grid-item-over, +.x-grid-with-row-lines .x-grid-item.x-grid-item-selected { + border-radius: 6px !important; +} + +/* Menu items - rounded corners */ +.x-menu-item-default.x-menu-item-focus, +.x-menu-item-default.x-menu-item-active, +.x-menu-item:hover { + border-radius: 6px !important; +} + +/* Treelist/sidebar items - rounded corners (v5.9: 4px to match UniFi) */ +/* Background now handled by ::before pseudo-element in treelist section */ + +/* Boundlist dropdown items - rounded corners (v5.10: 4px to match UniFi) */ +.x-boundlist-item-over, +.x-boundlist-selected { border-radius: 4px !important; } +/* Tab hover - rounded corners */ +.x-tab-default.x-tab-over, +.x-tab-default.x-tab.x-tab-active { + border-radius: 6px 6px 0 0 !important; +} + +/* ===================================================== + FIX: Remove underlines from column headers + ===================================================== */ +.x-column-header-over, +.x-column-header-open, +.x-column-header-sort-ASC, +.x-column-header-sort-DESC, +.x-column-header-last .x-column-header-over .x-column-header-trigger { + border-bottom: none !important; + text-decoration: none !important; +} + +/* Column header text - no underline */ +.x-column-header-text, +.x-column-header-text-inner { + text-decoration: none !important; + border-bottom: none !important; +} + +/* Selected grid cells - no underlines */ +.x-grid-item-selected .x-grid-cell-inner, +.x-grid-item-over .x-grid-cell-inner { + text-decoration: none !important; +} + +/* ===================================================== + FIX: Data view and resource lists + ===================================================== */ +.x-dataview-item { + color: #DEE0E3 !important; +} + +/* Resource grid specific */ +.pve-resource-grid .x-grid-cell-inner { + color: #DEE0E3 !important; +} + +/* Override any remaining dark text */ +.x-form-item-body, +.x-form-item { + color: hsla(214, 8%, 88%, 1) !important; +} + +/* Tree node text */ +.x-tree-node-text { + color: hsla(214, 8%, 88%, 1) !important; +} + +.x-treelist-item-text { + color: rgba(255, 255, 255, 0.75) !important; +} + +/* Selected items should be white */ +.x-grid-item-selected .x-grid-cell-inner, +.x-treelist-item-selected .x-treelist-item-text, +.x-tree-selected .x-tree-node-text { + color: #ffffff !important; +} + +/* ===================================================== + FIX: Tab text readability + ===================================================== */ +.x-tab-inner-default { + color: #B7BCC2 !important; +} + +.x-tab-active .x-tab-inner-default { + color: #ffffff !important; +} + +/* ===================================================== + SMOOTH TRANSITIONS - UniFi-style animations + ===================================================== */ + +/* Base transition for all interactive elements */ +.x-btn, +.x-btn-default-small, +.x-btn-default-toolbar-small, +.x-menu-item, +.x-grid-item, +.x-grid-row, +.x-treelist-item, +.x-treelist-row, +.x-tab, +.x-boundlist-item, +.x-tree-node, +.x-dataview-item, +.x-column-header, +.x-form-trigger, +.x-tool, +.x-panel-header { + transition: background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + box-shadow 0.2s ease, + opacity 0.2s ease !important; +} + +/* Form elements transitions */ +.x-form-trigger-wrap, +.x-form-trigger-wrap-default, +.x-form-text, +.x-form-text-default, +.x-form-field { + transition: border-color 0.2s ease, + box-shadow 0.2s ease, + background-color 0.2s ease !important; +} + +/* Button hover glow effect */ +.x-btn-default-small:hover, +.x-btn-default-small.x-btn-over { + box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3) !important; +} + +/* Toolbar fade moved to Button Section */ + +/* Grid row hover - smooth background change */ +.x-grid-item:hover, +.x-grid-item.x-grid-item-over { + background-color: var(--pm-hover-subtle) !important; +} + +/* Tree item hover - handled by ::before pseudo-element in treelist section */ + +/* Menu item hover */ +.x-menu-item:hover, +.x-menu-item-active { + background-color: #22252d !important; +} + +/* Tab hover */ +.x-tab:hover, +.x-tab.x-tab-over { + background-color: #1a1c22 !important; +} + +/* Dropdown item hover - UniFi style */ +.x-boundlist-item:hover, +.x-boundlist-item-over { + background-color: rgba(249, 250, 250, 0.04) !important; + color: #F9FAFA !important; +} + +/* Panel tool icons */ +.x-tool:hover { + opacity: 1 !important; +} + +.x-tool { + opacity: 0.7 !important; +} + +/* Links hover */ +a { + transition: color 0.2s ease !important; +} + +/* Input focus glow */ +.x-form-trigger-wrap-focus, +.x-form-trigger-wrap-default.x-form-trigger-wrap-focus { + box-shadow: 0 0 0 3px var(--pm-focus-ring-color) !important; +} + +/* Selected/active states should also transition smoothly */ +.x-grid-item-selected, +.x-treelist-item-selected>.x-treelist-row, +.x-tab-active { + transition: background-color 0.15s ease !important; +} + +/* Scrollbar smooth transition */ +::-webkit-scrollbar-thumb { + transition: background-color 0.2s ease !important; +} + +/* Progress bar animation */ +.x-progress-bar, +.x-progress-bar-default { + transition: width 0.3s ease !important; +} + +/* Splitter hover */ +.x-splitter { + transition: background-color 0.2s ease !important; +} + +.x-splitter:hover { + background-color: #2a2d36 !important; +} + +/* Window/dialog fade */ +.x-window { + transition: opacity 0.2s ease, transform 0.2s ease !important; +} + +/* Tooltip fade */ +.x-tip, +.x-tip-default { + transition: opacity 0.15s ease !important; +} + +/* Mask fade */ +.x-mask { + transition: opacity 0.2s ease !important; +} + +/* ===================================================== + v5.1 FIX: Segmented buttons (Day/Hour dropdown) + Only parent should have border-radius, not children + ===================================================== */ +.x-segmented-button { + border-radius: 6px !important; + overflow: visible !important; + display: flex !important; + gap: 5px !important; +} + +.x-segmented-button .x-btn, +.x-segmented-button .x-btn-default-small, +.x-segmented-button .x-btn-inner, +.x-segmented-button .x-btn-wrap { + border-radius: 6px !important; +} + +/* v5.24: Fix segmented buttons - use flex for horizontal alignment with gap */ +.x-segmented-button .proxmox-inline-button, +.x-segmented-button .x-btn { + display: flex !important; +} + +/* v5.25: Pressed segmented button text should be white for visibility on blue background */ +.x-segmented-button .x-btn.x-btn-pressed .x-btn-inner { + color: #ffffff !important; +} + +/* ===================================================== + v5.1 FIX: Progress bars - increase container height + The bars were getting cut off at bottom + ===================================================== */ +.pve-widget-chart-container, +.proxmox-gauge-chart, +.pve-resource-chart, +div[class*="chart-container"], +div[class*="gauge"] { + overflow: visible !important; +} + +/* ===================================================== + v5.1 FIX: Separator between left panel sections + Line between server list (left) and options menu (right) + ===================================================== */ +/* Remove individual item borders */ +.x-treelist-item, +.x-grid-item { + border-bottom: none !important; +} + +/* v5.3 FIX: Single separator between resource tree and content panel */ +/* Remove double separator - only use the splitter */ +#content, +.x-container.x-border-item.x-container-default[id="content"] { + border-left: none !important; +} + + + +/* ===================================================== + v5.1 FIX: Server view dropdown - smaller and styled + ===================================================== */ +.x-btn-default-toolbar-small.x-btn-menu-active, +.x-btn.x-btn-arrow.x-btn-default-small { + padding: 4px 10px !important; + min-height: 26px !important; + font-size: 12px !important; +} + +/* View mode combo/dropdown */ +.x-form-trigger-wrap-default:not([id^="textarea-"]):not(.x-grid-body), +.x-form-trigger-wrap:not([id^="textarea-"]):not(.x-grid-body) { + height: 28px !important; +} + +/* ===================================================== + v5.5 FIX: Preserve parent icon color when children are hovered + ===================================================== */ +/* The selected parent row should ALWAYS have blue icon, regardless of child hover state */ +.x-treelist-item-selected.x-treelist-item-expanded>.x-treelist-row .x-treelist-item-icon { + color: var(--pm-accent) !important; +} + +/* Even when entire treelist has hover somewhere, selected parent icon stays blue */ +.x-treelist-item-selected>.x-treelist-row .x-treelist-item-icon { + color: var(--pm-accent) !important; +} + +/* ===================================================== + v5.2 FIX: Toolbar buttons - ensure border-radius applies + ===================================================== */ + +/* Toolbar button hover state */ +.x-btn-default-toolbar-small:hover, +.x-btn-default-toolbar-small.x-btn-over { + background-color: #34383D !important; + border-color: #4A4F56 !important; +} + +/* Pressed/active state for toolbar buttons */ +.x-btn-default-toolbar-small.x-btn-pressed, +.x-btn-default-toolbar-small.x-btn-menu-active { + background-color: var(--pm-accent) !important; + border-color: var(--pm-accent) !important; +} + +/* Disabled state for toolbar buttons */ +.x-btn-default-toolbar-small.x-btn-disabled { + opacity: 0.4 !important; + cursor: not-allowed !important; +} + +/* ===================================================== + v5.2 FIX: Pointer cursor on tree items (entire item) + ===================================================== */ +.x-tree-node-text, +.x-grid-item, +.x-grid-cell, +.x-grid-cell-inner, +.x-tree-elbow-img, +.x-tree-icon, +#pveResourceTree .x-grid-item, +#pveResourceTree .x-grid-row, +.x-treelist-item, +.x-treelist-row, +.x-treelist-item-wrap, +.x-treelist-item-text, +.x-treelist-item-icon, +.x-treelistitem { + cursor: pointer !important; +} + +/* ===================================================== + v5.2 FIX: Navigation tree - reduced gaps & centered icons + ===================================================== */ +.x-treelist-item, +.x-treelistitem { + min-height: 28px !important; + height: auto !important; +} + +.x-treelist-row { + min-height: 28px !important; + padding: 2px 0 !important; + margin-right: 4px !important; + /* v5.7: symmetric spacing */ + display: flex !important; + align-items: center !important; +} + +/* v5.33: Reduce margin between toolbox navigation items */ +.x-treelist-pve-nav .x-treelist-row { + margin-top: 2px !important; +} + +/* v5.94: Increased margin-left (20px→28px) for better icon-to-label gap */ +.x-treelist-item-text { + margin-left: 28px !important; + line-height: 24px !important; + display: flex !important; + align-items: center !important; +} + +/* Center icons vertically in tree list */ +.x-treelist-item-icon { + display: flex !important; + align-items: center !important; + justify-content: center !important; + line-height: inherit !important; +} + +.x-treelist-item-wrap { + display: flex !important; + align-items: center !important; +} + +/* ===================================================== + v5.7 FIX: Toolbox tree expand/collapse animation + v5.18 FIX: Only apply animation to child containers, not main nav + ===================================================== */ +/* Main navigation container - must be visible */ +.x-treelist-pve-nav .x-treelist-container { + display: block !important; + overflow: visible !important; + overflow-y: auto !important; +} + +/* Child containers for expand/collapse animation */ +.x-treelist-item>.x-treelist-container { + overflow: hidden !important; + transition: max-height 0.25s ease-out, opacity 0.2s ease-out !important; +} + +/* Expanded state - show children */ +.x-treelist-item-expanded>.x-treelist-container { + max-height: 500px !important; + opacity: 1 !important; +} + +/* Collapsed state - hide children with animation */ +.x-treelist-item-collapsed>.x-treelist-container { + max-height: 0 !important; + opacity: 0 !important; +} + +/* ===================================================== + v5.9 FIX: Consistent 4px border-radius on treelist items (UniFi-style) + Note: Treelist hover/selected now handled by ::before pseudo-element + ===================================================== */ + +/* v5.54: Force 4px border-radius on treelist items and containers + (overrides default 8px from widget-toolkit) */ .x-treelist-item-wrap, .x-treelist-item-text, .x-treelist-row, @@ -2107,115 +3190,330 @@ th, border-radius: 4px !important; } -/* Window message mask */ -.x-mask-msg { +/* Resource tree selections - consistent 8px */ +.x-grid-item-selected, +.x-grid-item-focused, +.x-grid-item-over { border-radius: 8px !important; } -/* Tags */ -.pve-edit-tag { - border-radius: 6px !important; +/* v5.5 FIX: Symmetric wrap padding for treelist items */ +.x-treelist-item-wrap { + padding-left: 2px !important; + padding-right: 2px !important; } -.x-tree-node-text .proxmox-tag-dark, -.x-tree-node-text .proxmox-tag-light, -.x-grid-cell-inner .proxmox-tag-dark, -.x-grid-cell-inner .proxmox-tag-light, -span.proxmox-tag-dark, -span.proxmox-tag-light { - border-radius: 6px !important; +/* v5.5 FIX: Same symmetric padding for selected items (no longer needs compensation) */ +.x-treelist-item-selected>.x-treelist-row .x-treelist-item-wrap { + padding-left: 2px !important; + padding-right: 2px !important; } -/* Usage bars */ -.usage-wrapper, -.usage { - border-radius: 2px !important; +/* v5.5 FIX: Add left margin to icon for visual balance */ +.x-treelist-item-icon { + margin-left: 4px !important; } -/* Progress bars */ -.x-progress, -.x-progress-default { - border-radius: 5px !important; +/* ===================================================== + v5.2 FIX: Remove blue focus box on grid items + ===================================================== */ +.x-keyboard-mode .x-grid-cell-inner::before, +.x-grid-item-focused .x-grid-cell-inner::before, +.x-grid-cell-inner::before { + content: none !important; + border: none !important; + display: none !important; } -.x-progress-bar, -.x-progress-bar-default, -.x-progress-default .x-progress-bar-default { - border-radius: 5px !important; +/* Remove focus outline */ +.x-grid-item-focused, +.x-grid-item-focused .x-grid-cell, +.x-grid-item-focused .x-grid-cell-inner { + outline: none !important; + box-shadow: none !important; } -/* Scrollbar thumb */ -::-webkit-scrollbar-thumb { - border-radius: 4px !important; +/* ===================================================== + v5.2 FIX: Font weight for Datacenter and Node items only + ===================================================== */ +.fa-server~.x-tree-node-text, +.fa-building~.x-tree-node-text { + font-weight: 600 !important; } -/* Summary/stats panels */ -.pveStatusPanel, -.x-panel-default-framed, -.x-panel-body-default-framed { - border-radius: 12px !important; +/* ===================================================== + v5.2 FIX: Global smooth scrolling + ===================================================== */ +html { + scroll-behavior: smooth !important; } -[id^="pveGuestStatusView-"][id$="-body"], -[id^="pmxNotesView-"] .x-panel-body { - border-radius: 8px !important; +/* ===================================================== + v5.4 FIX: Child items styling when parent is selected + ===================================================== */ +/* Reset text/icon color for non-selected children of selected parent */ +.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected) .x-treelist-item-text, +.x-treelist-item-selected .x-treelist-item:not(.x-treelist-item-selected) .x-treelist-item-icon { + color: #B7BCC2 !important; } -.x-panel-header-default-framed { - border-radius: 12px 12px 0 0 !important; +/* ===================================================== + v5.4 FIX: Remove double separator between panels + ===================================================== */ +#pveResourceTree-1011-body, +.pve-resource-tree .x-panel-body, +.x-panel-body.x-grid-body { + border-right: none !important; } -.pve-info-grid { - border-radius: 12px !important; +/* ===================================================== + v5.4 FIX: Hover state for tree items + ===================================================== */ +/* Hover background for normal items */ +.x-treelist-item-over>.x-treelist-row { + background-color: #23262A !important; } -.x-form-display-field-default { - border-radius: 6px !important; +/* Hover background for child items inside selected parent - higher specificity */ +.x-treelist-item-selected .x-treelist-item.x-treelist-item-over:not(.x-treelist-item-selected)>.x-treelist-row { + background-color: #23262A !important; } -.pve-rrdview, -.rrdview { - border-radius: 12px !important; +/* Hover text/icon color */ +.x-treelist-item-over>.x-treelist-row .x-treelist-item-text, +.x-treelist-item-over>.x-treelist-row .x-treelist-item-icon, +.x-treelist-item-selected .x-treelist-item.x-treelist-item-over:not(.x-treelist-item-selected)>.x-treelist-row .x-treelist-item-text, +.x-treelist-item-selected .x-treelist-item.x-treelist-item-over:not(.x-treelist-item-selected)>.x-treelist-row .x-treelist-item-icon { + color: #FFFFFF !important; } -.pve-summary-status, -.x-container .pve-status { - border-radius: 8px !important; +/* ===================================================== + v5.4 FIX: Resource tree (grid) - left sidebar styling + ===================================================== */ +/* Server View resource tree is not a table: disable table row separators */ +[id^="pveResourceTree-"].x-tree-panel td.x-grid-cell, +[id^="pveResourceTree-"].x-tree-panel .x-grid-td, +[id^="pveResourceTree-"].x-tree-panel .x-grid-cell { + border-bottom: none !important; } -.x-panel-default[id*="notes"], -.pve-notes-view { - border-radius: 8px !important; +/* Server View resource tree: compact VM/CT leaf rows (verified via DevTools) */ +[id^="pveResourceTree-"].x-tree-panel tr.x-grid-row.x-grid-tree-node-leaf .x-grid-cell-inner, +[id^="pveResourceTree-"].x-tree-panel .x-grid-item.x-grid-tree-node-leaf .x-grid-cell-inner { + padding-top: 2px !important; + padding-bottom: 2px !important; } -.x-fieldset { - border-radius: 8px !important; +/* Server View resource tree: prevent last-leaf indent shift (x-tree-elbow-end has extra margin) */ +[id^="pveResourceTree-"].x-tree-panel .x-tree-elbow-end { + margin-right: 0 !important; } -/* Tab hover/active corners */ -.x-tab-default.x-tab-over, -.x-tab-default.x-tab.x-tab-active { - border-radius: 6px 6px 0 0 !important; +[id^="pveResourceTree-"].x-tree-panel tr.x-grid-row.x-grid-tree-node-leaf .x-tree-node-text, +[id^="pveResourceTree-"].x-tree-panel .x-grid-item.x-grid-tree-node-leaf .x-tree-node-text { + line-height: 17px !important; } -/* Segmented buttons */ -.x-segmented-button { - border-radius: 6px !important; +/* Non-selected items should show gray text */ +.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .x-tree-node-text { + color: #B7BCC2 !important; } -.x-segmented-button .x-btn, -.x-segmented-button .x-btn-default-small, -.x-segmented-button .x-btn-inner, -.x-segmented-button .x-btn-wrap { - border-radius: 6px !important; +/* Non-selected item icons should be gray */ +.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .x-tree-icon, +.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .fa { + color: #B7BCC2 !important; } -/* Summary page widget panels */ +/* v5.94: Preserve status icon colors in grid items + The broad .fa color rule above overrides .good/.warning/.critical from ext6-pmx.css */ +.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .fa.good { + color: var(--pm-success) !important; +} +.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .fa.warning { + color: var(--pm-warning) !important; +} +.x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-focused) .fa.critical { + color: var(--pm-error) !important; +} + +/* Selected item text should be white */ +.x-grid-item-selected .x-tree-node-text, +.x-grid-item-focused .x-tree-node-text { + color: #FFFFFF !important; +} + +/* Selected item icons should be blue */ +.x-grid-item-selected .x-tree-icon, +.x-grid-item-selected .fa, +.x-grid-item-focused .x-tree-icon, +.x-grid-item-focused .fa { + color: #3B8BEB !important; +} + +/* Hover state for grid items - text stays primary color */ +.x-grid-item-over:not(.x-grid-item-selected) .x-tree-node-text { + color: #DEE0E3 !important; +} + +/* Hover state for grid items - icons color */ +.x-grid-item-over:not(.x-grid-item-selected) .x-tree-icon, +.x-grid-item-over:not(.x-grid-item-selected) .fa { + color: #DEE0E3 !important; +} + + + + + + + + + +/* Content panel margin for splitter spacing */ +#content { + margin-left: 6px !important; +} + +/* ===================================================== + CHARTS - Remove border-radius from data area only + (Outer panel container keeps its rounded corners) + ===================================================== */ +/* Remove border-radius from chart canvas/data area ONLY */ +canvas.x-surface-canvas, +.x-surface-canvas, +.x-draw-component canvas, +.proxmox-rrd-chart canvas { + border-radius: 0 !important; +} + +/* SVG surface if used */ +svg.x-surface { + border-radius: 0 !important; +} + +/* Draw container that holds the canvas */ +.x-draw-container, +.x-surface { + border-radius: 0 !important; +} + +/* ===================================================== + HEADER BUTTONS - Vertical centering fix + ===================================================== */ +/* Button flex styles moved to Button Section */ + +/* Documentation button */ +.proxmox-inline-button { + height: 28px !important; + min-height: 28px !important; + display: flex !important; + align-items: center !important; + padding: 3px 8px !important; +} + +/* Specific fix for fa-desktop icon (Create VM) - visually bottom-heavy */ +.x-btn-icon-el.fa-desktop { + transform: translateY(1.1px) !important; +} + +/* v5.27: Fix icon-only button width (hide   inner element) - MUST be at end to override earlier rules */ +/* ExtJS adds x-btn-no-text class to buttons with only an icon */ +.x-btn-no-text .x-btn-inner, +.x-btn-button.x-btn-no-text .x-btn-inner, +.x-btn-button-default-toolbar-small.x-btn-no-text .x-btn-inner-default-toolbar-small, +.x-btn-button-default-small.x-btn-no-text .x-btn-inner-default-small, +.x-btn-button-default-small.x-btn-no-text>.x-btn-inner-default-small, +.x-btn.x-btn-default-small .x-btn-button.x-btn-no-text .x-btn-inner { + display: none !important; +} + +/* ===================================================== + v5.18 FIX: Scroll and overflow fixes for content visibility + ===================================================== */ +/* FIX 1: Remove overflow:hidden from grid containers to restore content visibility */ +.pve-info-grid, +.x-panel-default .x-grid, +.x-container .x-grid-view { + overflow: visible !important; + overflow-y: auto !important; +} + +/* FIX 2: Vertical toolbar scrolling with hidden scrollbar */ +.x-toolbar.x-vertical .x-box-scroller-body-vertical { + overflow-y: auto !important; + overflow-x: hidden !important; + scrollbar-width: none !important; + -ms-overflow-style: none !important; +} + +/* Hide scrollbar for Chrome/Safari/Opera */ +.x-toolbar.x-vertical .x-box-scroller-body-vertical::-webkit-scrollbar { + display: none !important; + width: 0 !important; +} + +/* FIX 3: Make sure the vertical toolbar doesn't hide overflow */ +.x-toolbar.x-vertical { + overflow: visible !important; + overflow-y: visible !important; +} + +/* ===================================================== + v5.35 FIX: Center "IPs" label vertically with IP addresses + Works together with v5.87 button repositioning + ===================================================== */ +/* IPs label container - translate down 9px for vertical centering */ +[id^="pveIPViewLXC-"]>.x-box-inner>.x-box-target>[id^="box-"] { + transform: translateY(9px) !important; +} + +/* ===================================================== + v5.18 FIX: CRITICAL - Restore grid/tree content visibility + These must be at the END of the file to override earlier rules + ===================================================== */ +/* Remove overflow:hidden that was hiding grid content */ +.pve-info-grid, +.x-panel-default .x-grid, +.x-container .x-grid-view, +.x-tree-view, +.x-tree-panel .x-panel-body, +.x-grid-view { + overflow: visible !important; +} + +/* Tree/grid scroll containers */ +.x-tree-view.x-fit-item, +.x-grid-view.x-fit-item { + overflow: auto !important; +} + +/* Grid item containers must be visible */ +.x-grid-item-container { + overflow: visible !important; +} + +/* ===================================================== + v5.57: Fix summary page widget panels border-radius + Column-layout panels (Health, Guests, Resources, etc.) + have visible borders that need rounded corners to + match the parent panel's 8px radius. + ===================================================== */ .x-panel.x-column>.x-panel-bodyWrap>.x-panel-body.x-panel-body-default { border-radius: 8px !important; } -/* Floating grid pickers (storage/ISO selectors) */ +/* Tree navigation container */ +.x-treelist-pve-nav .x-treelist-container { + overflow: visible !important; + overflow-y: auto !important; +} + +/* ===================================================== + v5.40: Fix floating grid picker border-radius + Storage dropdown, ISO selector, etc. use grid layers + Should match 4px boundlist style, not 12px summary panels + ===================================================== */ .x-layer.x-grid .x-grid-view, .x-panel.x-layer.x-grid .x-grid-view { border-radius: 4px !important; @@ -2226,6 +3524,7 @@ span.proxmox-tag-light { border-radius: 4px !important; } +/* Grid items in floating pickers - 4px radius (matches boundlist style) */ .x-layer.x-grid .x-grid-item-over, .x-layer.x-grid .x-grid-item-selected, .x-panel.x-layer.x-grid .x-grid-item-over, @@ -2233,6 +3532,7 @@ span.proxmox-tag-light { border-radius: 4px !important; } +/* TD cells have their own background - reset and apply only to first/last */ .x-layer.x-grid .x-grid-item-over td, .x-layer.x-grid .x-grid-item-selected td, .x-layer.x-grid .x-grid-item-over .x-grid-cell, @@ -2244,6 +3544,7 @@ span.proxmox-tag-light { border-radius: 0 !important; } +/* First cell gets left radius, last cell gets right radius */ .x-layer.x-grid .x-grid-item-over td:first-child, .x-layer.x-grid .x-grid-item-selected td:first-child, .x-panel.x-layer.x-grid .x-grid-item-over td:first-child, @@ -2258,25 +3559,224 @@ span.proxmox-tag-light { border-radius: 0 4px 4px 0 !important; } -/* Charts - remove border-radius from data area only */ -canvas.x-surface-canvas, -.x-surface-canvas, -.x-draw-component canvas, -.proxmox-rrd-chart canvas { - border-radius: 0 !important; -} - -svg.x-surface { - border-radius: 0 !important; -} - -.x-draw-container, -.x-surface { - border-radius: 0 !important; -} /* ===================================================== - TOOL ICONS - FontAwesome Replacements - (Ported from UniFi v5.86) + v5.42: Fix Bulk Actions dropdown button issues + Button was growing larger (24px → 26px) and text was gray instead of white + ===================================================== */ + +/* Toolbar menu fix moved to Button Section */ + +/* ===================================================== + v5.43: Compact tab bar for Tasks/Cluster log panel + Reduces wasted vertical space in bottom panel tabs + Tab bar height: 36px → 26px, padding: 6px → 3px + ===================================================== */ + +/* Reduce tab bar height for south panel (Tasks/Cluster log) */ +.x-panel.x-border-item .x-tab-bar.x-docked.x-tab-bar-default-horizontal { + height: 26px !important; +} + +/* Reduce inner body padding */ +.x-panel.x-border-item .x-tab-bar.x-docked .x-box-inner { + padding-top: 3px !important; + padding-bottom: 3px !important; +} + +/* Adjust panel body position to account for smaller tab bar */ +/* v5.56: Exclude grids - they need ExtJS inline positioning for proper header display */ +/* .x-panel.x-border-item:not(.x-grid) .x-panel-body.x-panel-body-default { + top: 26px !important; +} */ + +/* ===================================================== + v5.72: COMPREHENSIVE MODAL SPACING & CLIPPING FIX + + Problem: The v5.43 rule (top: 26px for south panel tabs) cascaded + to ALL panel bodies inside dialogs/windows, creating 52-70px gaps + between title/tabs and tabs/content, plus content clipping. + + Solution: Reset ALL panel bodies to 0, then restore 26px ONLY for + the body that immediately follows a tab bar (using sibling selector). + Uses ultra-high specificity with 'body' prefix to win CSS battles. + ===================================================== */ + +/* Restore 26px ONLY for the panel body that immediately follows a tab bar */ +body .x-window .x-panel .x-panel-bodyWrap>.x-tab-bar+.x-panel-body.x-panel-body-default { + top: 26px !important; +} + +/* Zero out padding in bodyWraps that could cause extra gaps */ +.x-window .x-panel-bodyWrap { + padding: 0 !important; +} + +/* v5.93: REMOVED overflow: visible rule that was breaking log viewer scrolling + The original rule was: + .x-window .x-panel-body { overflow: visible !important; } + This was added to "fix overflow clipping - allow visible overflow in modal panels" + but it breaks task viewer / log viewer scroll functionality. + If clipping issues appear elsewhere, use more targeted selectors. +*/ + +/* But keep auto overflow on the main window body for scrolling */ +/* .x-window .x-window-body { + overflow: auto !important; +} */ + +/* ===================================================== + v5.58: Fix modal form field width overflow + Form fields were extending past the right edge of the modal. + Constrain autocontainer and trigger wrap widths. + v5.64: REMOVED margin-right rule - was causing input field cutoff. + The autocontainer constraint is sufficient for overflow prevention. + + +/* v5.61: Trigger-wrap width rule removed (consolidated into form layout section) */ + + + +/* ===================================================== + v5.47: Restore right border on disk list panel in wizards + Restores right border for grids inside windows (fixed v5.4 over-reach). + ===================================================== */ + + +/* ===================================================== + v5.48: MODAL ANIMATIONS - Open Animation + Background Blur + CSS-ONLY implementation (no JavaScript required) + + Features: + - Smooth fade-in + scale animation when modals/dialogs open + - Subtle backdrop blur effect for modern look + - Menu/dropdown slide-in animation + + NOTE: Close animations are NOT possible with pure CSS because + ExtJS removes the window from the DOM immediately on close. + This is a pure CSS theme - no JavaScript modifications. + ===================================================== */ + +/* Opening animation keyframe */ +@keyframes modalFadeIn { + from { + opacity: 0; + transform: scale(0.95) translateY(-10px); + } + + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +/* Menu slide animation keyframe */ +@keyframes menuSlideIn { + from { + opacity: 0; + transform: translateY(-5px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + + + +/* Window/Dialog - open animation */ +.x-window, +.x-window-default { + animation: modalFadeIn 0.2s ease-out forwards !important; + transform-origin: center top !important; +} + +/* Message boxes - centered origin */ +.x-message-box { + animation: modalFadeIn 0.2s ease-out forwards !important; + transform-origin: center center !important; +} + +/* Menus and dropdowns - slide animation */ +.x-menu, +.x-menu-default, +.x-boundlist { + animation: menuSlideIn 0.12s ease-out forwards !important; + transform-origin: top center !important; +} + +/* ===================================================== + v5.77: TREE SETTINGS DIALOG FIX + Force layout recalculation and visibility for tree settings + ===================================================== */ +.x-window[id^="pveTreeSettingsEdit"] .x-panel-body { + width: 100% !important; + min-width: 300px !important; +} + +.x-window[id^="pveTreeSettingsEdit"] .x-autocontainer-innerCt { + width: 100% !important; + display: block !important; +} + +.x-window[id^="pveTreeSettingsEdit"] .x-window-body { + overflow: visible !important; + height: auto !important; +} + +.x-window[id^="pveTreeSettingsEdit"] input { + width: 100% !important; + visibility: visible !important; + display: block !important; + opacity: 1 !important; +} + +.x-window[id^="pveTreeSettingsEdit"] .x-form-item-body, +.x-window[id^="pveTreeSettingsEdit"] .x-form-trigger-wrap, +.x-window[id^="pveTreeSettingsEdit"] .x-form-text-wrap { + width: 100% !important; + overflow: visible !important; +} + +/* v5.82: Fix Tree Settings Dialog Width (Force full width on containers) */ +.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"], +.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"] .x-panel-body, +.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"] .x-box-inner, +.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"] .x-box-target, +.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"] .x-container, +.x-window[id^="pveTreeSettingsEdit"] .x-panel[id^="inputpanel"] .x-field { + width: 100% !important; + box-sizing: border-box !important; +} + +/* ===================================================== + v5.78: LOGIN DIALOG FIXES + 1. Remove inner panel borders for cleaner "direct on window" look + 2. Rely on ExtJS natural sizing (facilitated by removing the + width:inherit rule above) + ===================================================== */ +.x-window:has(#pveloginrealm) .x-panel-body { + border: none !important; + background: transparent !important; + width: auto !important; +} + +/* ===================================================== + v5.81: VM WIZARD WIDTH FIX (REVISED) + 1. Keep window borders (user preference). + 2. Force internal elements to fit the measured content width + (718.4px) instead of overflowing at fixed 720px. + ===================================================== */ +.x-window[id^="pveQemuCreateWizard"] .x-window-body, +.x-window[id^="pveQemuCreateWizard"] .x-window-body>.x-panel, +.x-window[id^="pveQemuCreateWizard"] .x-panel-bodyWrap, +.x-window[id^="pveQemuCreateWizard"] .x-panel-body { + width: 100% !important; + box-sizing: border-box !important; +} + +/* ===================================================== + v5.86: TOOL ICONS - FontAwesome Replacements Replace sprite-based ExtJS tool icons with crisp FontAwesome icons for better consistency and clarity ===================================================== */ @@ -2299,15 +3799,13 @@ svg.x-surface { .x-tool-tool-el.x-tool-gear, .x-tool-img.x-tool-gear, .x-tool-tool-el.x-tool-refresh, -.x-tool-img.x-tool-refresh, -.x-tool-tool-el.x-tool-close, -.x-tool-img.x-tool-close { +.x-tool-img.x-tool-refresh { background-image: none !important; font-family: "FontAwesome" !important; font-size: 14px !important; line-height: 16px !important; text-align: center !important; - color: var(--pm-text-dim) !important; + color: #737C87 !important; transition: color 0.15s ease !important; filter: none !important; width: 16px !important; @@ -2317,63 +3815,64 @@ svg.x-surface { justify-content: center !important; } -/* Close button - slightly larger */ -.x-tool-tool-el.x-tool-close, -.x-tool-img.x-tool-close { - font-size: 20px !important; -} - -/* Individual glyph assignments */ +/* Undo Zoom button (minus icon) - use zoom-out icon */ .x-tool-tool-el.x-tool-minus::before, .x-tool-img.x-tool-minus::before { content: "\f010" !important; /* fa-search-minus (zoom out) */ } +/* Collapse right - single chevron pointing right (>) + Panel is expanded, clicking will collapse it to the right */ .x-tool-tool-el.x-tool-collapse-right::before, .x-tool-img.x-tool-collapse-right::before { - content: "\f054" !important; /* fa-chevron-right */ + content: "\f054" !important; /* fa-chevron-right (>) */ } +/* Expand left - single chevron pointing left (<) + Panel is collapsed on right, clicking will expand it to the left */ .x-tool-tool-el.x-tool-expand-left::before, .x-tool-img.x-tool-expand-left::before { - content: "\f053" !important; /* fa-chevron-left */ + content: "\f053" !important; /* fa-chevron-left (<) */ } +/* Collapse left - single chevron pointing left (<) + Panel is expanded, clicking will collapse it to the left */ .x-tool-tool-el.x-tool-collapse-left::before, .x-tool-img.x-tool-collapse-left::before { - content: "\f053" !important; /* fa-chevron-left */ + content: "\f053" !important; /* fa-chevron-left (<) */ } +/* Expand right - single chevron pointing right (>) + Panel is collapsed on left, clicking will expand it to the right */ .x-tool-tool-el.x-tool-expand-right::before, .x-tool-img.x-tool-expand-right::before { - content: "\f054" !important; /* fa-chevron-right */ + content: "\f054" !important; /* fa-chevron-right (>) */ } +/* Maximize (expand icon) */ .x-tool-tool-el.x-tool-maximize::before, .x-tool-img.x-tool-maximize::before { content: "\f065" !important; /* fa-expand */ } +/* Restore (compress icon) */ .x-tool-tool-el.x-tool-restore::before, .x-tool-img.x-tool-restore::before { content: "\f066" !important; /* fa-compress */ } +/* Gear/Settings icon */ .x-tool-tool-el.x-tool-gear::before, .x-tool-img.x-tool-gear::before { content: "\f013" !important; /* fa-cog */ } +/* Refresh icon */ .x-tool-tool-el.x-tool-refresh::before, .x-tool-img.x-tool-refresh::before { content: "\f021" !important; /* fa-refresh */ } -.x-tool-tool-el.x-tool-close::before, -.x-tool-img.x-tool-close::before { - content: "\f00d" !important; /* fa-times */ -} - /* Hover state - all tool icons */ .x-tool:hover .x-tool-tool-el.x-tool-minus, .x-tool:hover .x-tool-img.x-tool-minus, @@ -2392,10 +3891,8 @@ svg.x-surface { .x-tool:hover .x-tool-tool-el.x-tool-gear, .x-tool:hover .x-tool-img.x-tool-gear, .x-tool:hover .x-tool-tool-el.x-tool-refresh, -.x-tool:hover .x-tool-img.x-tool-refresh, -.x-tool:hover .x-tool-tool-el.x-tool-close, -.x-tool:hover .x-tool-img.x-tool-close { - color: var(--pm-text) !important; +.x-tool:hover .x-tool-img.x-tool-refresh { + color: #DEE0E3 !important; } /* Disabled state */ @@ -2405,10 +3902,16 @@ svg.x-surface { cursor: default !important; } -/* Inline FontAwesome tools (PVE-injected) */ +/* ===================================================== + v5.86: GENERIC TOOL ICONS (Inline FontAwesome) + Some ExtJS tools use inline style="font-family:FontAwesome" + with text content for their icons instead of ::before + ===================================================== */ + +/* Style generic tools that use text content with FontAwesome */ .x-tool-tool-el[style*="font-family:FontAwesome"], .x-tool-tool-el[style*="font-family: FontAwesome"] { - color: var(--pm-text-dim) !important; + color: #737C87 !important; font-size: 14px !important; line-height: 16px !important; display: flex !important; @@ -2421,24 +3924,28 @@ svg.x-surface { background-color: transparent !important; } +/* Enabled state - pointer cursor */ .x-tool:not(.x-tool-disabled) .x-tool-tool-el[style*="font-family:FontAwesome"], .x-tool:not(.x-tool-disabled) .x-tool-tool-el[style*="font-family: FontAwesome"] { cursor: pointer !important; } +/* Disabled state - default cursor and reduced opacity */ .x-tool.x-tool-disabled .x-tool-tool-el[style*="font-family:FontAwesome"], .x-tool.x-tool-disabled .x-tool-tool-el[style*="font-family: FontAwesome"] { cursor: default !important; opacity: 0.4 !important; } +/* Fix mask overlay on tool icons - transparent and non-blocking */ .x-tool .x-mask { background-color: transparent !important; backdrop-filter: none !important; pointer-events: none !important; } +/* Hover state for enabled generic tools */ .x-tool:not(.x-tool-disabled):hover .x-tool-tool-el[style*="font-family:FontAwesome"], .x-tool:not(.x-tool-disabled):hover .x-tool-tool-el[style*="font-family: FontAwesome"] { - color: var(--pm-text) !important; -} + color: #DEE0E3 !important; +} \ No newline at end of file