193 lines
9.9 KiB
CSS
193 lines
9.9 KiB
CSS
/*!UniFi*/
|
|
/*
|
|
* ProxMorph PDM Theme: UniFi
|
|
* Overrides the PWT Material Design tonal color system with UniFi palette
|
|
* Version: 1.0.0
|
|
* Author: ProxMorph / Ubiquiti Design System
|
|
*
|
|
* ─── UniFi Palette ─────────────────────────────────────────────
|
|
* Accent Blue: #006EFF Blue Hover: #4797FF
|
|
* Success: #37BE5F Warning: #f5a623
|
|
* Danger: #f03a3e Text: #DEE0E3
|
|
* Base: #131416 Surface: #282B2F
|
|
* Elevated: #34383D
|
|
*/
|
|
|
|
/* ===== Tonal Color Overrides ===== */
|
|
:root {
|
|
/* Primary — UniFi Blue (#006EFF) tonal scale */
|
|
--pwt-color-primary-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-primary-99: rgb(245, 250, 255) !important;
|
|
--pwt-color-primary-95: rgb(220, 238, 255) !important;
|
|
--pwt-color-primary-90: rgb(190, 222, 255) !important;
|
|
--pwt-color-primary-80: rgb(130, 190, 255) !important;
|
|
--pwt-color-primary-70: rgb(71, 151, 255) !important;
|
|
--pwt-color-primary-60: rgb(0, 110, 255) !important;
|
|
--pwt-color-primary-50: rgb(0, 90, 210) !important;
|
|
--pwt-color-primary-40: rgb(0, 72, 170) !important;
|
|
--pwt-color-primary-30: rgb(0, 55, 135) !important;
|
|
--pwt-color-primary-20: rgb(0, 40, 100) !important;
|
|
--pwt-color-primary-15: rgb(0, 30, 80) !important;
|
|
--pwt-color-primary-10: rgb(0, 22, 62) !important;
|
|
--pwt-color-primary-5: rgb(0, 12, 40) !important;
|
|
--pwt-color-primary-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Secondary — UniFi Dim Blue tonal scale */
|
|
--pwt-color-secondary-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-secondary-99: rgb(248, 250, 255) !important;
|
|
--pwt-color-secondary-95: rgb(228, 235, 248) !important;
|
|
--pwt-color-secondary-90: rgb(208, 218, 238) !important;
|
|
--pwt-color-secondary-80: rgb(175, 190, 215) !important;
|
|
--pwt-color-secondary-70: rgb(145, 162, 192) !important;
|
|
--pwt-color-secondary-60: rgb(115, 124, 135) !important;
|
|
--pwt-color-secondary-50: rgb(95, 105, 118) !important;
|
|
--pwt-color-secondary-40: rgb(75, 85, 98) !important;
|
|
--pwt-color-secondary-30: rgb(52, 56, 61) !important;
|
|
--pwt-color-secondary-20: rgb(40, 43, 47) !important;
|
|
--pwt-color-secondary-15: rgb(32, 35, 38) !important;
|
|
--pwt-color-secondary-10: rgb(24, 26, 30) !important;
|
|
--pwt-color-secondary-5: rgb(16, 17, 20) !important;
|
|
--pwt-color-secondary-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Tertiary — UniFi Cyan/Teal tonal scale */
|
|
--pwt-color-tertiary-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-tertiary-99: rgb(248, 254, 255) !important;
|
|
--pwt-color-tertiary-95: rgb(225, 248, 255) !important;
|
|
--pwt-color-tertiary-90: rgb(195, 238, 252) !important;
|
|
--pwt-color-tertiary-80: rgb(140, 215, 240) !important;
|
|
--pwt-color-tertiary-70: rgb(90, 192, 225) !important;
|
|
--pwt-color-tertiary-60: rgb(50, 168, 200) !important;
|
|
--pwt-color-tertiary-50: rgb(20, 142, 175) !important;
|
|
--pwt-color-tertiary-40: rgb(0, 118, 150) !important;
|
|
--pwt-color-tertiary-30: rgb(0, 92, 120) !important;
|
|
--pwt-color-tertiary-20: rgb(0, 68, 92) !important;
|
|
--pwt-color-tertiary-15: rgb(0, 52, 72) !important;
|
|
--pwt-color-tertiary-10: rgb(0, 38, 55) !important;
|
|
--pwt-color-tertiary-5: rgb(0, 22, 35) !important;
|
|
--pwt-color-tertiary-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Success — UniFi Green (#37BE5F) tonal scale */
|
|
--pwt-color-success-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-success-99: rgb(242, 255, 246) !important;
|
|
--pwt-color-success-95: rgb(205, 255, 220) !important;
|
|
--pwt-color-success-90: rgb(160, 248, 185) !important;
|
|
--pwt-color-success-80: rgb(100, 220, 135) !important;
|
|
--pwt-color-success-70: rgb(55, 190, 95) !important;
|
|
--pwt-color-success-60: rgb(40, 165, 78) !important;
|
|
--pwt-color-success-50: rgb(25, 140, 60) !important;
|
|
--pwt-color-success-40: rgb(12, 115, 45) !important;
|
|
--pwt-color-success-30: rgb(0, 90, 32) !important;
|
|
--pwt-color-success-20: rgb(0, 66, 20) !important;
|
|
--pwt-color-success-15: rgb(0, 50, 14) !important;
|
|
--pwt-color-success-10: rgb(0, 36, 8) !important;
|
|
--pwt-color-success-5: rgb(0, 22, 4) !important;
|
|
--pwt-color-success-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Error — UniFi Danger (#f03a3e) tonal scale */
|
|
--pwt-color-error-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-error-99: rgb(255, 248, 248) !important;
|
|
--pwt-color-error-95: rgb(255, 228, 228) !important;
|
|
--pwt-color-error-90: rgb(255, 200, 202) !important;
|
|
--pwt-color-error-80: rgb(255, 145, 148) !important;
|
|
--pwt-color-error-70: rgb(248, 95, 98) !important;
|
|
--pwt-color-error-60: rgb(240, 58, 62) !important;
|
|
--pwt-color-error-50: rgb(210, 40, 44) !important;
|
|
--pwt-color-error-40: rgb(180, 24, 28) !important;
|
|
--pwt-color-error-30: rgb(148, 10, 14) !important;
|
|
--pwt-color-error-20: rgb(110, 4, 8) !important;
|
|
--pwt-color-error-15: rgb(88, 0, 2) !important;
|
|
--pwt-color-error-10: rgb(65, 0, 0) !important;
|
|
--pwt-color-error-5: rgb(42, 0, 0) !important;
|
|
--pwt-color-error-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Warning — UniFi Warning (#f5a623) tonal scale */
|
|
--pwt-color-warning-100: rgb(255, 255, 255) !important;
|
|
--pwt-color-warning-99: rgb(255, 252, 245) !important;
|
|
--pwt-color-warning-95: rgb(255, 242, 210) !important;
|
|
--pwt-color-warning-90: rgb(255, 228, 168) !important;
|
|
--pwt-color-warning-80: rgb(252, 205, 105) !important;
|
|
--pwt-color-warning-70: rgb(245, 166, 35) !important;
|
|
--pwt-color-warning-60: rgb(218, 145, 20) !important;
|
|
--pwt-color-warning-50: rgb(190, 122, 8) !important;
|
|
--pwt-color-warning-40: rgb(158, 100, 0) !important;
|
|
--pwt-color-warning-30: rgb(125, 78, 0) !important;
|
|
--pwt-color-warning-20: rgb(92, 56, 0) !important;
|
|
--pwt-color-warning-15: rgb(72, 42, 0) !important;
|
|
--pwt-color-warning-10: rgb(52, 30, 0) !important;
|
|
--pwt-color-warning-5: rgb(32, 18, 0) !important;
|
|
--pwt-color-warning-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Neutral — UniFi Dark Background scale */
|
|
--pwt-color-neutral-100: rgb(249, 250, 250) !important;
|
|
--pwt-color-neutral-99: rgb(240, 242, 244) !important;
|
|
--pwt-color-neutral-95: rgb(222, 224, 227) !important;
|
|
--pwt-color-neutral-90: rgb(200, 205, 210) !important;
|
|
--pwt-color-neutral-80: rgb(183, 188, 194) !important;
|
|
--pwt-color-neutral-70: rgb(155, 162, 172) !important;
|
|
--pwt-color-neutral-60: rgb(115, 124, 135) !important;
|
|
--pwt-color-neutral-50: rgb(90, 98, 108) !important;
|
|
--pwt-color-neutral-40: rgb(68, 72, 78) !important;
|
|
--pwt-color-neutral-30: rgb(52, 56, 61) !important;
|
|
--pwt-color-neutral-20: rgb(40, 43, 47) !important;
|
|
--pwt-color-neutral-15: rgb(28, 30, 34) !important;
|
|
--pwt-color-neutral-10: rgb(19, 20, 22) !important;
|
|
--pwt-color-neutral-5: rgb(12, 12, 14) !important;
|
|
--pwt-color-neutral-0: rgb(0, 0, 0) !important;
|
|
|
|
/* Neutral Alt — UniFi Alt tones */
|
|
--pwt-color-neutral-alt-100: rgb(249, 250, 250) !important;
|
|
--pwt-color-neutral-alt-99: rgb(242, 245, 248) !important;
|
|
--pwt-color-neutral-alt-95: rgb(225, 230, 238) !important;
|
|
--pwt-color-neutral-alt-90: rgb(208, 215, 225) !important;
|
|
--pwt-color-neutral-alt-80: rgb(178, 188, 200) !important;
|
|
--pwt-color-neutral-alt-70: rgb(148, 158, 172) !important;
|
|
--pwt-color-neutral-alt-60: rgb(118, 128, 142) !important;
|
|
--pwt-color-neutral-alt-50: rgb(92, 102, 115) !important;
|
|
--pwt-color-neutral-alt-40: rgb(68, 76, 88) !important;
|
|
--pwt-color-neutral-alt-30: rgb(48, 54, 64) !important;
|
|
--pwt-color-neutral-alt-20: rgb(35, 40, 48) !important;
|
|
--pwt-color-neutral-alt-15: rgb(26, 30, 36) !important;
|
|
--pwt-color-neutral-alt-10: rgb(18, 20, 26) !important;
|
|
--pwt-color-neutral-alt-5: rgb(10, 12, 16) !important;
|
|
--pwt-color-neutral-alt-0: rgb(0, 0, 0) !important;
|
|
}
|
|
|
|
/* ===== Semantic Color Remapping (darker surfaces to match PVE) ===== */
|
|
:root.pwt-dark-mode {
|
|
/* Flat surfaces — panels slightly elevated above background */
|
|
--pwt-color-surface: var(--pwt-color-neutral-10) !important;
|
|
--pwt-color-on-surface: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-surface-container: var(--pwt-color-neutral-15) !important;
|
|
--pwt-color-on-surface-container: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-neutral: var(--pwt-color-neutral-15) !important;
|
|
--pwt-color-on-neutral: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-neutral-container: var(--pwt-color-neutral-10) !important;
|
|
--pwt-color-on-neutral-container: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-dark-surface: var(--pwt-color-neutral-10) !important;
|
|
--pwt-color-on-dark-surface: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-dark-surface-container: var(--pwt-color-neutral-15) !important;
|
|
--pwt-color-on-dark-surface-container: var(--pwt-color-neutral-95) !important;
|
|
--pwt-color-neutral-alt: var(--pwt-color-neutral-alt-15) !important;
|
|
--pwt-color-on-neutral-alt: var(--pwt-color-neutral-alt-80) !important;
|
|
--pwt-color-neutral-alt-container: var(--pwt-color-neutral-alt-10) !important;
|
|
--pwt-color-on-neutral-alt-container: var(--pwt-color-neutral-alt-80) !important;
|
|
--pwt-color-background: var(--pwt-color-neutral-10) !important;
|
|
--pwt-color-inverse-surface: var(--pwt-color-neutral-80) !important;
|
|
--pwt-color-on-inverse-surface: var(--pwt-color-neutral-10) !important;
|
|
--pwt-color-border: var(--pwt-color-neutral-alt-30) !important;
|
|
--pwt-color-shadow: var(--pwt-color-neutral-0) !important;
|
|
|
|
/* Vivid primary — match PVE's #006EFF accent */
|
|
--pwt-color-primary: var(--pwt-color-primary-60) !important;
|
|
--pwt-color-on-primary: var(--pwt-color-primary-100) !important;
|
|
--pwt-color-primary-container: var(--pwt-color-primary-30) !important;
|
|
--pwt-color-on-primary-container: var(--pwt-color-primary-90) !important;
|
|
|
|
background: var(--pwt-color-neutral-10) !important;
|
|
color: var(--pwt-color-neutral-95) !important;
|
|
}
|
|
|
|
body {
|
|
background-color: rgb(19, 20, 22) !important;
|
|
}
|