370 lines
11 KiB
CSS
370 lines
11 KiB
CSS
:root {
|
|
/* =========================================
|
|
1. PRIMITIVES
|
|
Define base color palette for the theme.
|
|
========================================= */
|
|
|
|
/* Oracle Pallete */
|
|
--palette-oracle-red: #C74634;
|
|
--palette-slate-50-1: #C2D4D4;
|
|
--palette-slate-50-2: #A0BBBB;
|
|
--palette-slate-50-3: #85A8A8;
|
|
--palette-slate-50-4: #6A9595;
|
|
--palette-slate-100-1: #697778;
|
|
--palette-slate-100-2: #778788;
|
|
--palette-slate-100-3: #8F9D9E;
|
|
--palette-slate-100-4: #A8B2B3;
|
|
--palette-slate-150-1: #3C4545;
|
|
--palette-slate-150-2: #4C5757;
|
|
--palette-slate-150-3: #617070;
|
|
--palette-slate-150-4: #778888;
|
|
--palette-slate-200-1: #2B3333;
|
|
--palette-slate-200-2: #4C5757;
|
|
--palette-slate-200-3: #617070;
|
|
--palette-slate-200-4: #778888;
|
|
--palette-neutral-30-1: #F1EFED;
|
|
--palette-neutral-30-2: #DED9D4;
|
|
--palette-neutral-30-3: #CAC2BB;
|
|
--palette-neutral-30-4: #B6ACA2;
|
|
|
|
|
|
/* Base colors */
|
|
--palette-gray-1: #b1b3b2;
|
|
--palette-gray-2: #d9d8d4;
|
|
--palette-red-10: #FAF0F0;
|
|
--palette-red-20: #661414;
|
|
--palette-red-30: #8A2020;
|
|
--palette-red-50: #F55353;
|
|
--palette-red-60: #FA8E8E;
|
|
|
|
/*Begin Standard Ignition*/
|
|
--white: #FFFFFF;
|
|
--black: hsl(0, 0%, 0%);
|
|
|
|
/* Neutrals */
|
|
--neutral-10: var(--palette-slate-100-1);
|
|
--neutral-20: #778788;
|
|
--neutral-30: #8F9D9E;
|
|
--neutral-40: #A8B2B3;
|
|
--neutral-50: #767676;
|
|
--neutral-60: #A1A1A1;
|
|
--neutral-70: #BDBDBD;
|
|
--neutral-80: #D8D8D8;
|
|
--neutral-90: #F4F4F4;
|
|
--neutral-100: #FAFAFA;
|
|
|
|
/* =========================================
|
|
2. FUNCTIONAL
|
|
Define functional color palette for the theme.
|
|
========================================= */
|
|
|
|
/* Alarm colors */
|
|
--alarm-critical: #D32F2F;
|
|
--alarm-high: #F57C00;
|
|
--alarm-medium: #FBC02D;
|
|
--alarm-low: #0288D1;
|
|
--alarm-info: #70539B;
|
|
|
|
/*One Line color*/
|
|
--oneline-green: #8fca94;
|
|
--oneline-yellow: #f4b834;
|
|
--oneline-red: #e23030;
|
|
--oneline-gray: #d9d8d4;
|
|
|
|
/*High Performance */
|
|
--high-performance-white: #ffffff;
|
|
--high-performance-gray: #9c9c9c;
|
|
--high-performance-red: #e23030;
|
|
--high-performance-blue: #a9d9ff;
|
|
--high-performance-purple: #7266b7;
|
|
--high-performance-green: #8fca94;
|
|
--high-performance-yellow: #f4b834;
|
|
|
|
/* Data Viz: Sequential */
|
|
--seq-1: #9656D6;
|
|
--seq-2: #AE74E8;
|
|
--seq-3: #C79BF2;
|
|
--seq-4: #DABCF7;
|
|
--seq-5: #EAD9FA;
|
|
--seq-6: #F5F0FA;
|
|
|
|
/* Data Viz: Diverging */
|
|
--div-1: #642B9E;
|
|
--div-2: #7D3CBD;
|
|
--div-3: #9656D6;
|
|
--div-4: #AE74E8;
|
|
--div-5: #C79BF2;
|
|
--div-6: #DABCF7;
|
|
--div-7: #EAD9FA;
|
|
--div-8: #F5F0FA;
|
|
--div-9: #D7FAF8;
|
|
--div-10: #83F2EB;
|
|
--div-11: #43DED3;
|
|
--div-12: #21C2B7;
|
|
--div-13: #0EA197;
|
|
--div-14: #08827A;
|
|
--div-15: #086962;
|
|
--div-16: #09524D;
|
|
|
|
/* Data Viz: Qualitative */
|
|
--qual-1: #9656D6;
|
|
--qual-2: #53BAED;
|
|
--qual-3: #08827A;
|
|
--qual-4: #F78BB8;
|
|
--qual-5: var(--red-50);
|
|
--qual-6: var(--red-10);
|
|
--qual-7: #46E385;
|
|
--qual-8: #5691F0;
|
|
--qual-9: #ED5393;
|
|
--qual-10: #E89C3F;
|
|
|
|
/* Functional */
|
|
--error: var(--palette-red-50);
|
|
--info: #5691F0;
|
|
--info-secondary: #114599;
|
|
--warning: #CF7911;
|
|
--warning-secondary: #693D07;
|
|
--success: #0AA648;
|
|
|
|
/* LED Display */
|
|
--indicator: #1EC963;
|
|
--indicatorOff: #0A2E18;
|
|
|
|
/* =========================================
|
|
3. OBJECTS
|
|
Define object color palette for the theme.
|
|
========================================= */
|
|
/* value styles */
|
|
--tag-value-color: var(--palette-slate-50-1);
|
|
--tag-units-color: var(--palette-slate-50-4);
|
|
|
|
/* naviagtion styles */
|
|
--navtree-color: var(--palette-neutral-30-2);
|
|
--navtree-bgcolor: var(--palette-slate-150-1);
|
|
--navtreeitem-hover-color: var(--palette-neutral-30-2);
|
|
--navtreeitem-hover-bgcolor: var(--palette-slate-150-2);
|
|
--navtreeitem-active-color: var(--palette-neutral-30-2);
|
|
--navtreeitem-active-bgcolor: var(--palette-slate-150-2);
|
|
--idk-what: #0d1741;
|
|
|
|
/* Containers */
|
|
--container-root: var(--palette-slate-200-1);
|
|
/* the root container, depth 0 */
|
|
--container: var(--palette-slate-150-1);
|
|
/* standard container, depth 1 */
|
|
--container-nested: var(--palette-slate-150-2);
|
|
/* nested container, depth 2 */
|
|
|
|
/* Inputs */
|
|
--input: var(--black);
|
|
/* standard input */
|
|
--input-disabled: var(--neutral-40);
|
|
--icon: var(--neutral-70);
|
|
--icon-hover: var(--neutral-60);
|
|
--icon-disabled: var(--neutral-40);
|
|
--icon-selected: var(--neutral-10);
|
|
--label: var(--neutral-90);
|
|
--label-disabled: var(--neutral-60);
|
|
|
|
/* Borders */
|
|
--border: var(--neutral-50);
|
|
--border-disabled: var(--neutral-50);
|
|
--container-border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
|
/* Box Shadow */
|
|
--box-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.45);
|
|
--box-shadow-2: 0 10px 20px rgba(0, 0, 0, 0.5), 0 6px 6px rgba(0, 0, 0, 0.3);
|
|
--box-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.55), 0 6px 6px rgba(0, 0, 0, 0.55);
|
|
--box-shadow-4: 0 14px 28px rgba(0, 0, 0, 0.60), 0 10px 10px rgba(0, 0, 0, 0.60);
|
|
--box-shadow-5: 0 19px 38px rgba(0, 0, 0, 0.65), 0 15px 12px rgba(0, 0, 0, 0.65);
|
|
|
|
--box-shadow-inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);
|
|
|
|
/* --- Data Grids / Tables --- */
|
|
--table-header-bg: var(--palette-slate-100-2);
|
|
--table-header-text: var(--white);
|
|
--table-row-bg: var(--palette-slate-150-1);
|
|
--table-row-alt-bg: var(--palette-slate-150-2);
|
|
/* Zebra stripe color */
|
|
--table-row-hover: var(--palette-slate-150-3);
|
|
--table-border: var(--palette-slate-100-1);
|
|
|
|
/* --- Typography Scale --- */
|
|
--text-xs: 0.75rem;
|
|
/* 12px - Labels */
|
|
--text-sm: 0.875rem;
|
|
/* 14px - Body text */
|
|
--text-md: 1rem;
|
|
/* 16px - Standard values */
|
|
--text-lg: 1.25rem;
|
|
/* 20px - Sub-headers */
|
|
--text-xl: 1.5rem;
|
|
/* 24px - Headers */
|
|
--text-2xl: 2rem;
|
|
/* 32px - KPI Values */
|
|
--text-color: var(--palette-neutral-30-3);
|
|
|
|
/* Font Weights */
|
|
--weight-light: 300;
|
|
--weight-reg: 400;
|
|
--weight-bold: 700;
|
|
|
|
/* --- Charts & Trends --- */
|
|
--chart-bg: transparent;
|
|
/* Or var(--palette-slate-150-1) */
|
|
--chart-grid-lines: var(--palette-slate-100-1);
|
|
--chart-axis-text: var(--palette-slate-50-2);
|
|
--chart-crosshair: var(--white);
|
|
--chart-tooltip-bg: var(--palette-slate-150-4);
|
|
|
|
/* Call to action. */
|
|
--call-to-action: #229AD6;
|
|
--call-to-action-highlight: #0C2938;
|
|
--call-to-action-hover: #0C7BB3;
|
|
--call-to-action-active: #53BAED;
|
|
--call-to-action-active-alt: #093952;
|
|
--call-to-action-active-alt-invis: #0A6291;
|
|
--call-to-action-disabled: var(--neutral-50);
|
|
|
|
/* Border Radius */
|
|
--border-radius: 4px;
|
|
--border-radius-input: 2px;
|
|
|
|
/* Opacity */
|
|
--opacity-25: rgba(0, 0, 0, 0.25);
|
|
--opacity-50: rgba(0, 0, 0, 0.50);
|
|
--opacity-85: rgba(0, 0, 0, 0.85);
|
|
|
|
/* Typography */
|
|
--font-NotoSans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
|
|
/* Checkbox */
|
|
--checkbox--checked: var(--call-to-action);
|
|
--checkbox--unchecked: var(--border);
|
|
--checkbox--indeterminate: var(--call-to-action);
|
|
--checkbox--disabled: var(--input-disabled);
|
|
|
|
/* Progress Bar */
|
|
--progressLinearTrack--determinate: var(--neutral-10);
|
|
--progressLinearTrack--indeterminate: var(--neutral-10);
|
|
--progressLinearBar--determinate: var(--info-secondary);
|
|
--progressLinearBar--indeterminate: var(--border);
|
|
|
|
/* Toggle Switch */
|
|
--toggleSwitch--selected: var(--call-to-action);
|
|
--toggleSwitch--unselected: var(--neutral-10);
|
|
|
|
/* Radio */
|
|
--radio--selected: var(--call-to-action);
|
|
--radio--unselected: var(--border);
|
|
--radio--disabled: var(--input-disabled);
|
|
|
|
/* Piping */
|
|
--pipePrimaryFill: var(--neutral-20);
|
|
--pipeSecondaryFill: #5a5a5a;
|
|
--pipeStroke: var(--neutral-70);
|
|
--pipeSelectStroke: var(--call-to-action);
|
|
|
|
/* Component Context Menu */
|
|
--contextBackground: var(--black);
|
|
|
|
/* Symbols */
|
|
--symbolFill--default: var(--neutral-20);
|
|
--symbolStroke--default: var(--neutral-70);
|
|
--symbolFillAnimation--default: var(--neutral-80);
|
|
--symbolFill--running: var(--neutral-50);
|
|
--symbolFillAnimation--running: var(--neutral-80);
|
|
--symbolStroke--running: var(--neutral-70);
|
|
--symbolFill--stopped: var(--black);
|
|
--symbolStroke--stopped: var(--neutral-70);
|
|
--symbolFill--faulted: #8F0E0E;
|
|
--symbolStroke--faulted: #FA8E8E;
|
|
|
|
/* Layers */
|
|
--z-background: -1;
|
|
--z-card: 10;
|
|
--z-header: 100;
|
|
--z-popup: 500;
|
|
--z-alarm-banner: 1000;
|
|
--z-tooltip: 2000;
|
|
|
|
/* Spacing Scale */
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 32px;
|
|
|
|
/* State Backgrounds (with opacity) */
|
|
--bg-error-subtle: rgba(226, 48, 48, 0.1);
|
|
/* 10% Red */
|
|
--bg-success-subtle: rgba(10, 166, 72, 0.1);
|
|
/* 10% Green */
|
|
}
|
|
|
|
.psc-navtree {
|
|
font-family: Nunito Sans;
|
|
font-size: 16;
|
|
font-weight: 100;
|
|
color: var(--navtree-color);
|
|
background-color: var(--navtree-bgcolor);
|
|
}
|
|
|
|
.psc-navtree .ia_treeComponent__node__icon {
|
|
fill: var(--navtree-color);
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.psc-navtree .tree-item-label .label-wrapper.label-wrapper-icon {
|
|
flex: 0 0 30px;
|
|
}
|
|
|
|
.psc-navtree .expand-icon,
|
|
.psc-navtree .terminal-expand-icon,
|
|
.psc-navtree .ia_treeComponent__alignmentGuide {
|
|
display: none;
|
|
}
|
|
|
|
.psc-navtree .terminal-node .label-wrapper-icon {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.psc-navtree .ia_treeComponent__node--selected {
|
|
background-color: var(--navtreeitem-active-bgcolor);
|
|
color: var(--navtreeitem-active-color);
|
|
font-weight: 100;
|
|
}
|
|
|
|
.psc-navtree .node-wrapper {
|
|
min-width: calc(100% - 20px) !important;
|
|
}
|
|
|
|
.psc-navtree .node-selected::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: -12px;
|
|
/* Adjust this value to control how far the point extends outwards */
|
|
bottom: 0;
|
|
width: 12px;
|
|
/* Adjust width to control the size of the diamond side */
|
|
background-color: var(--navtreeitem-active-bgcolor);
|
|
/* Same as the container's background */
|
|
clip-path: polygon(0 0, 100% 50%, 0 100%);
|
|
/* Points outward to create the diamond shape */
|
|
}
|
|
|
|
.psc-navtree .node-selected .ia_treeComponent__node__icon {
|
|
fill: var(--navtreeitem-active-color);
|
|
}
|
|
|
|
.psc-navtree .ia_treeComponent__node:hover:not(.psc-navtree .ia_treeComponent__node--selected) {
|
|
background-color: var(--navtreeitem-hover-bgcolor);
|
|
color: var(--navtreeitem-hover-color);
|
|
font-weight: 100;
|
|
}
|
|
|
|
.psc-navtree .ia_treeComponent__node:hover:not(.psc-navtree .ia_treeComponent__node--selected) .ia_treeComponent__node__icon {
|
|
fill: var(--navtreeitem-active-color);
|
|
} |