244 lines
7.6 KiB
CSS
244 lines
7.6 KiB
CSS
:root {
|
|
/* company color pallete */
|
|
--streamnavy: #263367;
|
|
--streamblue: #014ea8;
|
|
--darkbluegray: #191928;
|
|
--darkgray: #53575a;
|
|
--gray: #b1b3b2;
|
|
--lightgray: #d9d8d4;
|
|
--darkred: #9e272b;
|
|
--alarmred: #e22028;
|
|
--sunsetorange: #de7c33;
|
|
--goldenyellow: #f4b834;
|
|
--coolpurple: #7266b7;
|
|
--tagvalue-color: var(--streamblue);
|
|
--units-color: var(--gray);
|
|
/* Alarm status */
|
|
--alarm-diag: var(--darkgray);
|
|
--alarm-low: var(--coolpurple);
|
|
--alarm-medium: var(--goldenyellow);
|
|
--alarm-high: var(--sunsetorange);
|
|
--alarm-critical: var(--alarmred);
|
|
|
|
/* Electrical color */
|
|
--elec-on: #e23030;
|
|
--elec-off: #8fca94;
|
|
--elec-tripped: var(--goldenyellow);
|
|
--elec-maintenance: var(--sunsetorange);
|
|
--elec-disabled: var(--gray);
|
|
/* Flow */
|
|
--flow-supply: #09B858;
|
|
--flow-return: #EB9809;
|
|
/* States Performance */
|
|
--state-running: #E3F2FD;
|
|
--state-standby: var(--gray);
|
|
--state-faulted: var(--alarmred);
|
|
--state-auto: #013d85;
|
|
--state-manual: var(--coolpurple);
|
|
--state-maintenance:var(--sunsetorange);
|
|
|
|
/* Acción Principal (Control de Proceso) */
|
|
--action-primary: var(--streamblue);
|
|
--action-primary-hover: #013d85;
|
|
--action-primary-text: #ffffff;
|
|
|
|
/* Acción Crítica (Impacto Físico) */
|
|
--action-danger: var(--alarmred);
|
|
--action-danger-hover: var(--darkred);
|
|
--action-danger-text: #ffffff;
|
|
|
|
/* Acción Neutra (Navegación / Cancelar) */
|
|
--action-secondary: var(--lightgray);
|
|
--action-secondary-hover: var(--gray);
|
|
--action-secondary-text: var(--darkgray);
|
|
|
|
/* Estado Deshabilitado */
|
|
--action-disabled: var(--gray);
|
|
--action-disabled-text: #767676;
|
|
|
|
/* --- MONITOREO DE DATOS --- */
|
|
--data-normal: #2073d3;
|
|
--data-high: #d32020;
|
|
--data-low: #20d3bb;
|
|
--units-color: var(--gray);
|
|
|
|
/* Texto */
|
|
--text-primary: #263367;
|
|
--text-primary-inverse: #FFFFFF;
|
|
--text-on-dark: #1E1E1E;
|
|
--text-on-light: #F2F2F2;
|
|
--text-secondary: #53575a;
|
|
--text-eu: #909497;
|
|
--text-muted: #767676; /* Unidades y detalles */
|
|
|
|
/* nav styles */
|
|
--navtree-bgcolor: #0e1742;
|
|
--navtree-color: var(--lightgray);
|
|
--navtreeitem-hover-color: var(--white);
|
|
--navtreeitem-hover-bgcolor: var(--navtree-bgcolor);
|
|
--navtreeitem-active-color: var(--white);
|
|
--navtreeitem-active-bgcolor: #143663;
|
|
--idk-what: #0d1741;
|
|
|
|
/*Begin Standard Ignition*/
|
|
--white: var(--lightgray);
|
|
--black: #000000;
|
|
--red-20: #FAD4D4;
|
|
--red-30: #F99797;
|
|
--red-50: #F55353;
|
|
--red-60: #DE1B1B;
|
|
--red-90: #661414;
|
|
|
|
/* Neutrals */
|
|
--neutral-10: var(--lightgray);
|
|
--neutral-20: #F4F4F4;
|
|
--neutral-30: #D8D8D8;
|
|
--neutral-40: #BDBDBD;
|
|
--neutral-50: #A1A1A1;
|
|
--neutral-60: #767676;
|
|
--neutral-70: #5E5E5E;
|
|
--neutral-80: #515151;
|
|
--neutral-90: #323232;
|
|
--neutral-100: #161616;
|
|
|
|
/* Sequential */
|
|
--seq-1: #AE74E8; /* purple-50 */
|
|
--seq-2: #9659D6; /* purple-60 */
|
|
--seq-3: #7D3CBD; /* purple-70 */
|
|
--seq-4: #642B9E; /* purple-80 */
|
|
--seq-5: #4B2175; /* purple-90 */
|
|
--seq-6: #371C52; /* purple-100 */
|
|
|
|
/* Data Viz: Diverging */
|
|
--div-1: #642B9E; /* purple-80 */
|
|
--div-2: #7D3CBD; /* purple-70 */
|
|
--div-3: #9656D6; /* purple-60 */
|
|
--div-4: #AE74E8; /* purple-50 */
|
|
--div-5: #C79BF2; /* purple-40 */
|
|
--div-6: #DABCF7; /* purple-30 */
|
|
--div-7: #EAD9FA; /* purple-20 */
|
|
--div-8: #F5F0FA; /* purple-10 */
|
|
--div-9: #D7FAF8; /* teal-10 */
|
|
--div-10: #83F2EB; /* teal-20 */
|
|
--div-11: #43DED3; /* teal-30 */
|
|
--div-12: #21C2B7; /* teal-40 */
|
|
--div-13: #0EA197; /* teal-50 */
|
|
--div-14: #08827A; /* teal-60 */
|
|
--div-15: #086962; /* teal-70 */
|
|
--div-16: #09524D; /* teal-80 */
|
|
|
|
/* Data Viz: Qualitative */
|
|
--qual-1: #7D3CBD; /* purple-70 */
|
|
--qual-2: #229AD6; /* primary-50 */
|
|
--qual-3: #086962; /* teal-70 */
|
|
--qual-4: #B01355; /* magenta-70 */
|
|
--qual-5: var(--red-50); /* red-50 */
|
|
--qual-6: var(--red-90); /* red-90 */
|
|
--qual-7: #038537; /* green-60 */
|
|
--qual-8: #114599; /* blue-80 */
|
|
--qual-9: #ED5393; /* magenta-50 */
|
|
--qual-10: #CF7911; /* bronze-50 */
|
|
|
|
--containerRoot: #F2F2F2; /* var(--neutral-10) the root container, depth 0 */
|
|
--container: var(--neutral-20); /* standard container, depth 1 */
|
|
--containerNested: var(--neutral-30); /* nested container, depth 2 */
|
|
|
|
--icon: var(--neutral-70);
|
|
--icon--hover: var(--neutral-60);
|
|
--icon--disabled: var(--neutral-40);
|
|
--icon--selecte:wqd: var(--neutral-10);
|
|
|
|
/* Borders */
|
|
--border: var(--neutral-50);
|
|
--border--disabled: var(--neutral-50);
|
|
--containerBorder: 1px solid var(--border);
|
|
/* Box Shadow */
|
|
--boxShadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
--boxShadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
--boxShadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
|
--boxShadow4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
--boxShadow5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
|
|
--boxShadow--inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);
|
|
/* Spaces */
|
|
--space-xs: 2px;
|
|
--space-sm: 4px;
|
|
--space-md: 8px;
|
|
--space-lg: 12px;
|
|
--space-xl: 20px;
|
|
|
|
/* Border Radius */
|
|
--borderRadius: 4px;
|
|
--borderRadiusInput: 2px;
|
|
/* Opacity */
|
|
--opacity-25: rgba(0, 0, 0, 0.25); /* black, 50% opacity */
|
|
--opacity-50: rgba(0, 0, 0, 0.50); /* black, 50% opacity */
|
|
--opacity-85: rgba(0, 0, 0, 0.85); /* black, 85% opacity */
|
|
/* Typography */
|
|
--font-NotoSans: 'Nunito Sans', 'Nunito', "Segoe UI", Arial, sans-serif;
|
|
--font-main: 'Nunito Sans', 'Nunito', "Segoe UI", Arial, sans-serif;
|
|
/* Component Context Menu */
|
|
--contextBackground: var(--white);
|
|
}
|
|
|
|
|
|
.psc-navtree {
|
|
font-family: 'Nunito Sans';
|
|
font-size: 16px;
|
|
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);
|
|
}
|