/* BEGIN STYLESHEET */ .ia_inputField { font-size: 1rem; } /* Overrides the default scrollbar styles */ .psc-nav::-webkit-scrollbar { width: 3px; scrollbar-width: thin; scrollbar-color: var(--neutral-20) var(--neutral-90); } .psc-nav::-webkit-scrollbar-track { background: transparent; } .psc-nav::-webkit-scrollbar-thumb { background: var(--neutral-50); border-radius: 1px; } .psc-nav::-webkit-scrollbar-thumb:hover { background: var(--neutral-70); } /* Keyframes for the continuous flip animation */ @keyframes flipHorizontalContinuous { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } } /* Class to apply the continuous flip animation */ .psc-flip-horizontal-continuous { animation: flipHorizontalContinuous 3.2s ease-in-out infinite; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .psc-fade-in-animation { animation-name: fadeIn; animation-duration: 1.4s; /* Adjust the time as needed */ animation-fill-mode: forwards; /* Keeps the element at opacity 1 after animation ends */ animation-iteration-count: 1; /* Run only once */ animation-timing-function: ease-in-out; /* Adds the ease-in-out style */ } .psc-artek\/effect\/interactive:hover { --container-bg: var(--neutral-30); box-shadow: var(--boxShadow2); cursor: pointer; background-color: var(--container-bg); } .psc-artek\/effect\/active { box-shadow: var(--boxShadow--inset); cursor: pointer; } .ia_table__body__row--odd { background-color: transparent !important; } .ia_table__body__row--even { background-color: transparent !important; } .ia_table__headContainer, .ia_table__footContainer { box-shadow: none; } .ia_table__header { border-bottom: 1px solid var(--border); } .ia_tableComponent { border: none; } .ia_popup[id^="popup-"] .psc-dcblox\/popup\/auto-height { height: auto !important; } .popup-header.ia_popup__header { text-align: center; } @keyframes flash-fill { 0% { fill: currentColor; } /* uses element's color */ 50% { fill: var(--flash-color); } 100% { fill: currentColor; } } .psc-artek\/effect\/flash-fill { --flash-color: transparent; animation: flash-fill 0.8s steps(1, end) infinite; } @keyframes pulse-fill { 0%, 100% { fill: currentColor; } 50% { fill: transparent; } } .psc-artek\/effect\/pulse-fill { --pulse-color: #ffb300; animation: pulse-fill 1.2s ease-in-out infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .psc-artek\/effect\/rotating { --rotate-speed: 3s; /* default */ animation: rotate var(--rotate-speed) linear infinite; } /* Speed variations */ .psc-artek\/effect\/rotating-fast { --rotate-speed: 1.5s; } .psc-artek\/effect\/rotating-medium { --rotate-speed: 2s; } .psc-artek\/effect\/rotating-slow { --rotate-speed: 2.5s; } .psc-calendar-category-instance > .view-parent { flex: 1 0 auto !important; } .psc-tbl-reveal { transform-origin: left top; transform: scale(0.6) rotate(-2deg) translateX(-20px); opacity: 0; transition: transform 0.6s cubic-bezier(0.42,0,0.58,1), opacity 0.9s ease 0.15s; /* fade lags 150 ms */ } .psc-on { transform: scale(1) rotate(0deg) translateX(0); opacity: 1; } .ia_labelComponent { line-height: var(--leading-normal); } /* ============================================================ ARTEK DESIGN SYSTEM — variables.css Place in: stylesheet.css or a custom theme's variables.css ARCHITECTURE: - Layer 1: Raw tokens (space, radius, font, shadow scales) - Layer 2: Semantic aliases (map native Perspective vars → our own names, so style classes never reference Perspective internals directly) - Layer 3: Component tokens (consumed by style classes only) ============================================================ */ /* ============================================================ LAYER 1 — RAW TOKENS These never appear in style class rules directly. They are referenced by Layer 2 and Layer 3 only. ============================================================ */ :root { /* --- Spacing --- */ --space-xs: 4px; /* Tight inline gaps — icon-to-label, badge padding */ --space-sm: 8px; /* Inner padding on compact components — chips, small buttons */ --space-md: 16px; /* Standard component padding — cards, inputs, default button */ --space-lg: 24px; /* Generous padding — section containers, modals */ --space-xl: 40px; /* Large layout gaps — between major page sections */ --space-2xl: 64px; /* Hero / full-bleed section breathing room */ /* --- Border radius --- */ --radius-none: 0px; /* Sharp corners — tables, toolbars, flush-edge panels */ --radius-sm: 4px; /* Subtle rounding — inputs, tags, secondary cards */ --radius-md: 8px; /* Standard rounding — primary cards, buttons, modals */ --radius-lg: 16px; /* Prominent rounding — feature cards, popovers */ --radius-full: 9999px; /* Full pill — badges, status indicators, toggle buttons */ /* --- Font size --- */ --font-xs: 10px; /* Timestamps, sub-labels, chart axis ticks */ --font-sm: 12px; /* Secondary labels, captions, helper text */ --font-md: 14px; /* Body text baseline — most labels and data values */ --font-lg: 16px; /* Emphasized body — section intros, prominent values */ --font-xl: 20px; /* Small headings — card titles, panel headers */ --font-2xl: 28px; /* Page-level headings */ --font-3xl: 40px; /* KPI values, large metric displays */ --font-4xl: 56px; /* Hero numbers — fullscreen dashboards only */ /* --- Line height --- */ --leading-tight: 1.2; /* Headings, KPI labels, single-line display text */ --leading-normal: 1.5; /* All body text — the safe default */ --leading-relaxed: 1.75; /* Multi-line instructional or help text only */ /* --- Font weight --- */ --weight-regular: 400; /* All body text and data values */ --weight-medium: 500; /* Labels, column headers, secondary emphasis */ --weight-bold: 700; /* Headings, KPI values, critical callouts */ /* --- Transition duration --- */ --transition-fast: 80ms ease; /* Hover highlight, focus ring */ --transition-normal: 150ms ease; /* Color/border state changes */ --transition-slow: 300ms ease; /* Panel open/close, expand/collapse */ /* --- Opacity --- */ --opacity-disabled: 0.40; /* Disabled components — not interactive */ --opacity-muted: 0.60; /* De-emphasized content — secondary, inactive */ } /* ============================================================ LAYER 2 — SEMANTIC ALIASES Maps Perspective native variables → our semantic names. Native Perspective variables confirmed from dark/variables.css: --neutral-10 … --neutral-100 (grayscale ramp) --containerRoot (page/root bg, depth 0) --container (standard container, depth 1) --containerNested (nested container, depth 2) --label (primary text) --border (default border) --error (red — fault/alarm) --warning (bronze/amber — warn) --info (blue — informational) --success (green — safe/ok) --boxShadow1 … --boxShadow5 (elevation shadows) --boxShadow--inset (pressed state shadow) NOTE: --subtext, --warn-label, --alarm-label etc. do NOT exist in this theme. We define fallbacks ourselves. ============================================================ */ :root { /* --- Surfaces --- Use Perspective's semantic container vars, not raw neutrals. These are more stable across theme variants. */ --surface-0: var(--containerRoot); /* page background, outermost */ --surface-1: var(--container); /* default card / panel bg */ --surface-2: var(--containerNested); /* nested container, hover state */ --surface-3: var(--neutral-40); /* high contrast — no semantic var available */ /* --- Text --- --subtext does not exist in this theme. We derive it from the neutral ramp instead. */ --text-primary: var(--label); /* --neutral-90 in dark theme */ --text-secondary: var(--neutral-70); /* muted but readable */ --text-muted: var(--neutral-60); /* de-emphasized, captions */ --text-on-color: var(--white); /* text on saturated/dark fills */ --text-disabled: var(--label--disabled); /* matches Perspective's own disabled state */ /* --- Borders --- */ --border-subtle: var(--neutral-40); /* very quiet — dividers, table rules */ --border-default: var(--border); /* --neutral-50, standard component border */ --border-strong: var(--neutral-60); /* emphasized border */ /* --- Shadows --- Reference Perspective's existing shadow vars directly. No point redefining what's already there. */ --shadow-none: none; --shadow-sm: var(--boxShadow1); /* subtle lift */ --shadow-md: var(--boxShadow2); /* elevated */ --shadow-lg: var(--boxShadow4); /* prominent — modal, popup */ --shadow-inset: var(--boxShadow--inset); /* pressed state */ /* --- Status: Warn --- Perspective uses --warning (bronze/amber). No label variant exists, so we derive readable text ourselves. */ --color-warn: var(--warning); --color-warn-label: var(--neutral-90); /* light text readable on bronze */ --color-warn-subtle: color-mix(in srgb, var(--warning) 15%, var(--surface-1)); --color-warn-border: color-mix(in srgb, var(--warning) 50%, transparent); /* --- Status: Danger --- Perspective uses --error (red). */ --color-danger: var(--error); --color-danger-label: var(--neutral-90); --color-danger-subtle: color-mix(in srgb, var(--error) 15%, var(--surface-1)); --color-danger-border: color-mix(in srgb, var(--error) 50%, transparent); /* --- Status: Info --- */ --color-info: var(--info); --color-info-label: var(--neutral-90); --color-info-subtle: color-mix(in srgb, var(--info) 15%, var(--surface-1)); --color-info-border: color-mix(in srgb, var(--info) 50%, transparent); /* --- Status: Success --- */ --color-success: var(--success); --color-success-label: var(--neutral-90); --color-success-subtle: color-mix(in srgb, var(--success) 15%, var(--surface-1)); --color-success-border: color-mix(in srgb, var(--success) 50%, transparent); /* --- Status: Neutral --- */ --color-neutral: var(--neutral-50); --color-neutral-label: var(--text-primary); --color-neutral-subtle: var(--surface-1); --color-neutral-border: var(--border-default); /* --- Status: Primary --- */ --color-primary: var(--callToAction); --color-primary-label: var(--neutral-90); --color-primary-subtle: color-mix(in srgb, var(--callToAction) 15%, var(--surface-1)); --color-primary-border: color-mix(in srgb, var(--callToAction) 50%, transparent); } /* ============================================================ LAYER 3 — COMPONENT TOKENS These are the variables that style class rules actually set and consume. Palette + variant classes override these. Base component classes (card, badge, button) declare them with defaults and consume them. ============================================================ */ :root { /* --- Shared component token defaults --- Base classes declare these. Modifier classes override them. Keeping them here documents the full contract. */ /* Surface / fill */ --comp-bg: var(--surface-1); --comp-bg-hover: var(--surface-2); --comp-bg-active: var(--surface-3); /* Border */ --comp-border-color: var(--border-default); --comp-border-width: 1px; --comp-border-radius: var(--radius-md); /* Text */ --comp-color: var(--text-primary); --comp-color-muted: var(--text-secondary); --comp-font-size: var(--font-md); /* Spacing */ --comp-padding: var(--space-md); --comp-gap: var(--space-md); /* Elevation */ --comp-shadow: var(--shadow-sm); /* Transition (interactive components) */ --comp-transition: var(--transition-normal); } /* ============================================================ ARTEK DESIGN SYSTEM — Style Classes USAGE PATTERN: Apply a base class first, then palette, then variant. Example: "artek/container/card artek/palette/warn artek/variant/soft" Base class — declares --comp-* defaults, consumes them Palette class — overrides --comp-bg/border/color for status Variant class — overrides --comp-bg/border to change the visual treatment (soft fill, outline, solid) Palette and variant are independent — any palette works with any variant. You get the full matrix for free. SIZE CLASSES: Size modifier classes override --comp-padding and --comp-gap locally. They work on any base component. ============================================================ */ /* ============================================================ BASE COMPONENT CLASSES Each base class: 1. Sets local --comp-* defaults appropriate for that component 2. Consumes those tokens in real CSS properties 3. Never hardcodes a color — always via --comp-* tokens ============================================================ */ /* --- Card --- A general-purpose surface container. Use for grouping related content, data panels, form sections, and status displays. Default padding and gap are generous — use size modifiers to tighten when space is constrained. */ .psc-artek\/comp\/card { --comp-bg: var(--surface-1); --comp-bg-hover: var(--surface-2); --comp-border-color: var(--border-default); --comp-border-width: 1px; --comp-border-radius: var(--radius-md); --comp-color: var(--text-primary); --comp-color-muted: var(--text-secondary); --comp-padding: var(--space-md); --comp-gap: var(--space-md); --comp-shadow: var(--shadow-sm); background: var(--comp-bg); border: var(--comp-border-width) solid var(--comp-border-color); border-radius: var(--comp-border-radius); color: var(--comp-color); padding: var(--comp-padding); gap: var(--comp-gap); box-shadow: var(--comp-shadow); font-size: var(--comp-font-size); } /* --- Badge --- A compact inline label for status, category, or count. Defaults to pill shape and tight padding. Pair with a palette class for meaningful color — a colorless badge is just noise. */ .psc-artek\/comp\/badge { --comp-bg: var(--surface-2); --comp-border-color: transparent; --comp-border-width: 1px; --comp-border-radius: var(--radius-full); --comp-color: var(--text-primary); --comp-padding: var(--space-xs) var(--space-sm); --comp-gap: var(--space-xs); --comp-shadow: var(--shadow-none); background: var(--comp-bg); border: var(--comp-border-width) solid var(--comp-border-color); border-radius: var(--comp-border-radius); color: var(--comp-color); padding: var(--comp-padding); gap: var(--comp-gap); box-shadow: var(--comp-shadow); /* Typography defaults for badge */ font-size: var(--comp-font-size); font-weight: var(--weight-medium); line-height: var(--leading-tight); white-space: nowrap; } /* --- Button --- An interactive trigger. Defaults to a filled solid appearance so it reads as actionable without requiring a variant class. Always pair with a palette class — a button with no palette is neutral/secondary by default. Note: Perspective's ia_button styles may compete here. Target .ia_button overrides in the theme file if needed. */ .psc-artek\/comp\/button { --comp-bg: var(--surface-3); --comp-bg-hover: var(--surface-2); --comp-bg-active: var(--surface-1); --comp-border-color: var(--border-default); --comp-border-width: 1px; --comp-border-radius: var(--radius-md); --comp-color: var(--text-primary); --comp-padding: var(--space-sm) var(--space-md); --comp-gap: var(--space-xs); --comp-shadow: var(--shadow-none); --comp-transition: var(--transition-fast); background: var(--comp-bg); border: var(--comp-border-width) solid var(--comp-border-color); border-radius: var(--comp-border-radius); color: var(--comp-color); padding: var(--comp-padding); gap: var(--comp-gap); box-shadow: var(--comp-shadow); font-size: var(--comp-font-size); cursor: pointer; transition: background var(--comp-transition), border-color var(--comp-transition), color var(--comp-transition), box-shadow var(--comp-transition); } .psc-artek\/comp\/button:hover { background: var(--comp-bg-hover); box-shadow: var(--shadow-md); } .psc-artek\/comp\/button:active { background: var(--comp-bg-active); box-shadow: var(--shadow-inset); } /* ============================================================ SIZE MODIFIERS Override --comp-padding, --comp-gap, --comp-border-radius, and --comp-font-size locally on any base component. Apply after the base class. Can also be applied independently of base class. Example: "artek/container/card artek/size/sm" ============================================================ */ .psc-artek\/size\/xs { --comp-padding: var(--space-xs); --comp-gap: var(--space-xs); --comp-border-radius: var(--radius-sm); --comp-font-size: var(--font-xs); padding: var(--comp-padding); gap: var(--comp-gap); border-radius: var(--comp-border-radius); font-size: var(--comp-font-size); } .psc-artek\/size\/sm { --comp-padding: var(--space-sm); --comp-gap: var(--space-sm); --comp-border-radius: var(--radius-sm); --comp-font-size: var(--font-sm); padding: var(--comp-padding); gap: var(--comp-gap); border-radius: var(--comp-border-radius); font-size: var(--comp-font-size); } .psc-artek\/size\/md { /* Matches base card default — explicit override for clarity */ --comp-padding: var(--space-md); --comp-gap: var(--space-md); --comp-border-radius: var(--radius-md); --comp-font-size: var(--font-md); padding: var(--comp-padding); gap: var(--comp-gap); border-radius: var(--comp-border-radius); font-size: var(--comp-font-size); } .psc-artek\/size\/lg { --comp-padding: var(--space-lg); --comp-gap: var(--space-lg); --comp-border-radius: var(--radius-lg); --comp-font-size: var(--font-lg); padding: var(--comp-padding); gap: var(--comp-gap); border-radius: var(--comp-border-radius); font-size: var(--comp-font-size); } /* ============================================================ PALETTE CLASSES Set the semantic color intent. These only override the --comp-* color tokens — never spacing or radius. Each palette sets four tokens: --comp-bg → tinted surface (used by soft variant) --comp-border-color → status-tinted border --comp-color → text color on that surface --comp-accent → the pure status color (used by solid/outlined) The variant class decides *how* those colors are applied. ============================================================ */ .psc-artek\/palette\/neutral { --comp-bg: var(--color-neutral-subtle); --comp-border-color: var(--color-neutral-border); --comp-color: var(--color-neutral-label); --comp-accent: var(--color-neutral); background: var(--comp-bg); border-color: var(--comp-border-color); color: var(--comp-color); } .psc-artek\/palette\/warn { --comp-bg: var(--color-warn-subtle); --comp-border-color: var(--color-warn-border); --comp-color: var(--text-primary); --comp-accent: var(--color-warn); background: var(--comp-bg); border-color: var(--comp-border-color); color: var(--comp-color); } .psc-artek\/palette\/danger { --comp-bg: var(--color-danger-subtle); --comp-border-color: var(--color-danger-border); --comp-color: var(--text-primary); --comp-accent: var(--color-danger); background: var(--comp-bg); border-color: var(--comp-border-color); color: var(--comp-color); } .psc-artek\/palette\/info { --comp-bg: var(--color-info-subtle); --comp-border-color: var(--color-info-border); --comp-color: var(--text-primary); --comp-accent: var(--color-info); background: var(--comp-bg); border-color: var(--comp-border-color); color: var(--comp-color); } .psc-artek\/palette\/success { --comp-bg: var(--color-success-subtle); --comp-border-color: var(--color-success-border); --comp-color: var(--text-primary); --comp-accent: var(--color-success); background: var(--comp-bg); border-color: var(--comp-border-color); color: var(--comp-color); } .psc-artek\/palette\/primary { --comp-bg: var(--color-primary-subtle); --comp-border-color: var(--color-primary-border); --comp-color: var(--text-primary); --comp-accent: var(--color-primary); background: var(--comp-bg); border-color: var(--comp-border-color); color: var(--comp-color); } /* ============================================================ VARIANT CLASSES Control the visual treatment — how saturated and prominent the palette color appears. Apply after the palette class. soft — tinted subtle background, status-tinted border. The default palette behavior. Low visual weight. Good for cards and containers that convey status without demanding attention. outlined — transparent background, full-strength border. Medium visual weight. Good for badges and secondary buttons where the border carries the meaning. solid — full-strength background, text flips to --text-on-color. High visual weight. Use sparingly — active states, critical alerts, primary action buttons. ghost — no background, no border, text color only. Lowest visual weight. Good for tertiary buttons and de-emphasized inline indicators. ============================================================ */ /* soft — tinted bg, subtle border (this is what palette sets by default, but explicit class is useful for resetting from another variant) */ .psc-artek\/variant\/soft { background: var(--comp-bg); border-color: var(--comp-border-color); color: var(--comp-color); } /* outlined — transparent bg, full-strength accent border */ .psc-artek\/variant\/outlined { --comp-border-color: var(--comp-accent); background: transparent; border-color: var(--comp-border-color); color: var(--comp-color); } /* solid — full accent bg, inverse text */ .psc-artek\/variant\/solid { --comp-bg: var(--comp-accent); --comp-color: var(--text-on-color); background: var(--comp-bg); border-color: var(--comp-bg); color: var(--comp-color); } /* ghost — no bg, no border, accent text color */ .psc-artek\/variant\/ghost { background: transparent; border-color: transparent; color: var(--comp-accent); box-shadow: var(--shadow-none); } /* ============================================================ INTERACTIVE STATE OVERRIDES These extend the button hover/active states to respect whatever palette + variant is currently applied. Without these, the base button hover would always show --surface-2 regardless of palette. ============================================================ */ /* soft hover */ .psc-artek\/variant\/soft.psc-artek\/comp\/button:hover, .psc-artek\/comp\/button.psc-artek\/variant\/soft:hover { --comp-bg: color-mix(in srgb, var(--comp-accent) 25%, var(--surface-1)); background: var(--comp-bg); } /* outlined hover — fills in softly */ .psc-artek\/variant\/outlined.psc-artek\/comp\/button:hover, .psc-artek\/comp\/button.psc-artek\/variant\/outlined:hover { background: color-mix(in srgb, var(--comp-accent) 12%, transparent); } /* solid hover — darkens slightly */ .psc-artek\/variant\/solid.psc-artek\/comp\/button:hover, .psc-artek\/comp\/button.psc-artek\/variant\/solid:hover { background: color-mix(in srgb, var(--comp-accent) 85%, black); } /* ghost hover — subtle tint appears */ .psc-artek\/variant\/ghost.psc-artek\/comp\/button:hover, .psc-artek\/comp\/button.psc-artek\/variant\/ghost:hover { background: color-mix(in srgb, var(--comp-accent) 10%, transparent); } /* ============================================================ ARTEK DESIGN SYSTEM — Typography & Layout Utilities ============================================================ */ /* ============================================================ TYPOGRAPHY Apply to textStyle.classes on label components. Two families: body/* — running text, data values, descriptions. Regular weight, readable sizes. title/* — labels, headings, KPI callouts. Medium or bold weight, full size range. h1–h3 — Agency FB display headings. Uppercase. Use for page/section titles only. These classes only set font properties — never color, background, or spacing. Combine with palette classes on a parent container to get color inheritance. ============================================================ */ /* --- Body --- */ .psc-artek\/typography\/body-sm { font-size: var(--font-sm); /* 12px — captions, helper text, timestamps */ font-weight: var(--weight-regular); line-height: var(--leading-normal); } .psc-artek\/typography\/body-md { font-size: var(--font-md); /* 14px — default body, most label text */ font-weight: var(--weight-regular); line-height: var(--leading-normal); } .psc-artek\/typography\/body-lg { font-size: var(--font-lg); /* 16px — emphasized body, section intros */ font-weight: var(--weight-regular); line-height: var(--leading-normal); } /* --- Title --- Titles are bold weight. Use for card headers, panel labels, column headings, and KPI value displays. */ .psc-artek\/typography\/title-sm { font-size: var(--font-sm); /* 12px — column headers, secondary labels */ font-weight: var(--weight-bold); line-height: var(--leading-tight); } .psc-artek\/typography\/title-md { font-size: var(--font-md); /* 14px — card labels, form field titles */ font-weight: var(--weight-bold); line-height: var(--leading-tight); } .psc-artek\/typography\/title-lg { font-size: var(--font-lg); /* 16px — card titles, panel headers */ font-weight: var(--weight-bold); line-height: var(--leading-tight); } /* --- Display headings --- Agency FB, uppercase, bold. For page and section titles only. h1 > h2 > h3 in visual hierarchy */ .psc-artek\/typography\/h1 { font-size: var(--font-4xl); font-family: "Agency FB", sans-serif; font-weight: var(--weight-bold); line-height: var(--leading-tight); text-transform: uppercase; } .psc-artek\/typography\/h2 { font-size: var(--font-3xl); font-family: "Agency FB", sans-serif; font-weight: var(--weight-bold); line-height: var(--leading-tight); text-transform: uppercase; } .psc-artek\/typography\/h3 { font-size: var(--font-2xl); font-family: "Agency FB", sans-serif; font-weight: var(--weight-bold); line-height: var(--leading-tight); text-transform: uppercase; } /* --- Modifiers --- Apply alongside any typography class to adjust alignment or add muted color */ .psc-artek\/typography\/muted { color: var(--text-muted); /* de-emphasized — captions, secondary values */ } .psc-artek\/typography\/secondary { color: var(--text-secondary); /* readable but not primary — supporting labels */ } .psc-artek\/typography\/align-center { text-align: center; } .psc-artek\/typography\/align-right { text-align: right; } .psc-artek\/typography\/bold { font-weight: bold; } /* ============================================================ LAYOUT UTILITIES Apply to style.classes on flex containers that are NOT comp/card. For section wrappers, page regions, and any layout container that needs spacing control without the full card treatment (background, border, shadow). gap/* — controls gap between children padding/* — controls padding on the container itself These override --comp-gap and --comp-padding locally, so they also work inside a card to override its defaults on a nested container. ============================================================ */ /* --- Gap --- */ .psc-artek\/layout\/gap-none { --comp-gap: var(--space-0, 0px); gap: var(--comp-gap); } .psc-artek\/layout\/gap-xs { --comp-gap: var(--space-xs); /* 4px — tight icon rows, dense lists */ gap: var(--comp-gap); } .psc-artek\/layout\/gap-sm { --comp-gap: var(--space-sm); /* 8px — compact component groups */ gap: var(--comp-gap); } .psc-artek\/layout\/gap-md { --comp-gap: var(--space-md); /* 16px — standard section gap */ gap: var(--comp-gap); } .psc-artek\/layout\/gap-lg { --comp-gap: var(--space-lg); /* 24px — generous section spacing */ gap: var(--comp-gap); } .psc-artek\/layout\/gap-xl { --comp-gap: var(--space-xl); /* 40px — major layout regions */ gap: var(--comp-gap); } /* --- Padding --- */ .psc-artek\/layout\/padding-none { --comp-padding: var(--space-0, 0px); padding: var(--comp-padding); } .psc-artek\/layout\/padding-xs { --comp-padding: var(--space-xs); /* 4px — very tight inset */ padding: var(--comp-padding); } .psc-artek\/layout\/padding-sm { --comp-padding: var(--space-sm); /* 8px — compact container inset */ padding: var(--comp-padding); } .psc-artek\/layout\/padding-md { --comp-padding: var(--space-md); /* 16px — standard container inset */ padding: var(--comp-padding); } .psc-artek\/layout\/padding-lg { --comp-padding: var(--space-lg); /* 24px — spacious container inset */ padding: var(--comp-padding); } .psc-artek\/layout\/padding-xl { --comp-padding: var(--space-xl); /* 40px — hero / full-bleed sections */ padding: var(--comp-padding); } /* --- Divider --- */ .psc-artek\/layout\/divider { background-color: var(--border-default); border-radius: 0; flex-shrink: 0; } /* ============================================================ EFFECT UTILITIES Apply to any clickable container that isn't a button. Adds hover feedback — background lift, shadow, and cursor. Compose with a palette class to get palette-aware hover color. Without a palette, defaults to --surface-2. Example: artek/comp/card artek/effect/interactive Example: artek/comp/card artek/palette/primary artek/effect/interactive ============================================================ */ .psc-artek\/effect\/interactive { cursor: pointer; transition: background var(--transition-fast), box-shadow var(--transition-fast); } .psc-artek\/effect\/interactive:hover { --comp-bg: color-mix(in srgb, var(--comp-accent, var(--border-default)) 15%, var(--surface-1)); background: var(--comp-bg); box-shadow: var(--shadow-md); } .psc-artek\/effect\/interactive:active { --comp-bg: color-mix(in srgb, var(--comp-accent, var(--border-default)) 25%, var(--surface-1)); background: var(--comp-bg); box-shadow: var(--shadow-inset); } /* ============================================================ SURFACE UTILITIES Override the background depth of any container. Use when you need to shift a container's depth without applying a full card treatment or status color. These are mutually exclusive with palette classes — do not combine them. If a container carries status meaning, use a palette class instead. Surface classes are for structural containers that need depth control only. surface/page — outermost, deepest background surface/default — standard container depth surface/raised — slightly elevated, draws mild attention surface/overlay — highest contrast, popups and modals Example: artek/surface/raised on a nested flex container that groups content without implying status ============================================================ */ .psc-artek\/surface\/page { --comp-bg: var(--surface-0); /* --containerRoot, outermost page bg */ background: var(--comp-bg); } .psc-artek\/surface\/default { --comp-bg: var(--surface-1); /* --container, standard card bg */ background: var(--comp-bg); } .psc-artek\/surface\/raised { --comp-bg: var(--surface-2); /* --containerNested, elevated */ background: var(--comp-bg); } .psc-artek\/surface\/overlay { --comp-bg: var(--surface-3); /* --neutral-40, highest contrast */ background: var(--comp-bg); } /* ============================================================================= ARTEK RESPONSIVE NAV — STYLESHEET Ignition Perspective 8.3 | Artek Design System ============================================================================= TABLE OF CONTENTS ----------------- 1. Nav Tokens (Layer 2 — semantic aliases for nav-specific values) 2. Dock Layout (push/cover geometry — alterDock() owns all sizing) 3. Top Bar 4. Nav Container 5. Nav Logo 6. Nav Link 7. Nav Section 8. Nav Scrollbar 9. Responsive Overrides (breakpoint-scoped behavior) BREAKPOINTS (for reference — mirrored in alterDock() script logic) ------------------------------------------------------------------ Mobile : < 768px — cover mode, dock hidden when closed Tablet : 768–1024px — cover mode, icon strip always visible Desktop : > 1024px — push mode, respects session.custom.navOpen CLASS NAMING CONVENTION ----------------------- Perspective automatically adds psc- to the root element of each embedded view. Classes set via style bindings on the root element are NOT prefixed. Classes set on child elements are also NOT prefixed. psc- prefix applied by Perspective to view root wrappers: psc-nav, psc-nav-open, psc-topbar, psc-nav-link, psc-nav-section, psc-nav-button Classes set via style.classes bindings (no psc- prefix): nav-section-open — modifier on Nav Section Tree root selected — modifier on Nav Link root not-a-link — modifier on Nav Link root selected-parent — modifier on Nav Link root Classes on child elements within views (no psc- prefix): nav-icon, nav-label, nav-arrow, nav-arrow-hidden nav-logo-area, nav-logo-1, nav-logo-2, nav-repeater ============================================================================= */ /* ============================================================================= 1. NAV TOKENS ============================================================================= */ :root { --nav-open-width: 260px; --nav-closed-width: 56px; --topbar-height: 48px; --nav-link-height: 40px; --nav-icon-size: 40px; --nav-padding-x: var(--space-xs); --nav-gap: var(--space-xs); --nav-link-px: var(--space-xs); --nav-bg: var(--surface-0); --nav-border: var(--border-default); --nav-color: var(--text-primary); --nav-link-hover-bg: color-mix(in srgb, var(--callToAction) 30%, transparent); --nav-link-hover-color: var(--text-primary); --nav-link-active-bg: var(--color-primary); --nav-link-active-color: var(--text-on-color); --nav-section-bg: color-mix(in srgb, var(--surface-2) 70%, transparent); --topbar-bg: var(--surface-1); --topbar-color: var(--text-primary); --topbar-border: var(--border-default); --nav-transition: width 0.22s ease-in-out, opacity 0.15s ease-in-out, transform 0.22s ease-in-out; --nav-label-transition: opacity 0.12s ease-in-out 0.1s; --z-topbar: 100; --z-nav: 90; --z-nav-cover: 200; } /* ============================================================================= 2. DOCK LAYOUT ============================================================================= */ .psc-nav { width: 100% !important; height: 100% !important; } /* ============================================================================= 3. TOP BAR ============================================================================= */ .psc-topbar { height: var(--topbar-height); background-color: var(--topbar-bg); color: var(--topbar-color); border-bottom: 1px solid var(--topbar-border); padding: 0 var(--space-sm); gap: var(--space-sm); overflow: visible; z-index: var(--z-topbar); } .psc-nav-button { width: var(--nav-icon-size); height: var(--nav-icon-size); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--nav-color); cursor: pointer; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; flex-shrink: 0; } .psc-nav-button:hover { background-color: var(--nav-link-hover-bg); color: var(--nav-link-hover-color); } .psc-nav-button:active { background-color: var(--nav-link-active-bg); color: var(--nav-link-active-color); } /* ============================================================================= 4. NAV CONTAINER ============================================================================= */ .psc-nav { background-color: var(--nav-bg); border-right: 1px solid var(--nav-border); color: var(--nav-color); padding: var(--nav-padding-x); gap: var(--nav-gap); overflow-x: hidden; overflow-y: auto; flex-shrink: 0; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } /* Hover-to-expand visual effects — desktop only. Dock resizing via onMouseEnter/onMouseLeave → alterDock(). Section 9 suppresses these on tablet/mobile. */ .psc-nav:not(.psc-nav-open):hover .psc-nav-label, .psc-nav:not(.psc-nav-open):hover .psc-nav-arrow { opacity: 1; transition: var(--nav-label-transition); } .psc-nav:not(.psc-nav-open):hover .psc-nav-logo-2 { max-width: 200px; opacity: 1; } .psc-nav:not(.psc-nav-open):hover .psc-nav-logo-1 { max-width: 0; opacity: 0; } /* ============================================================================= 5. NAV LOGO ============================================================================= */ .psc-nav-logo-area { height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .psc-nav-logo-1 { flex-shrink: 0; transition: max-width 0.18s ease-in-out 0.14s, opacity 0.18s ease-in-out 0.14s; } .psc-nav-logo-2 { max-width: 0; opacity: 0; overflow: hidden; } .psc-nav-open .psc-nav-logo-2 { max-width: 200px; opacity: 1; transition: max-width 0.2s ease-in-out 0.12s, opacity 0.2s ease-in-out 0.12s; } /* ============================================================================= 6. NAV LINK ============================================================================= */ .psc-nav-link { height: var(--nav-link-height); min-height: var(--nav-link-height); border-radius: var(--radius-sm); color: var(--nav-color); padding: 0 var(--nav-link-px); gap: 0; overflow: hidden; flex-shrink: 0; cursor: pointer; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } .psc-nav-link .psc-nav-icon { width: var(--nav-icon-size); min-width: var(--nav-icon-size); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .psc-nav-link .psc-nav-label { opacity: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--font-sm); flex-grow: 1; transition: opacity 0.1s ease-in-out; } .psc-nav-link .psc-nav-arrow { width: var(--nav-icon-size); min-width: var(--nav-icon-size); display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transition: opacity 0.1s ease-in-out, transform 0.2s ease-in-out; } /* showArrow=false — zero width, no hit area, stays hidden regardless of nav state */ .psc-nav-arrow.psc-nav-arrow-hidden { width: 0 !important; min-width: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none; overflow: hidden; } /* Labels and arrows visible when nav is pinned open — scoped to section headers only via :not(.psc-nav-arrow-hidden) */ .psc-nav-open .psc-nav-link .psc-nav-label { opacity: 1; transition: var(--nav-label-transition); } .psc-nav-open .psc-nav-link .psc-nav-arrow:not(.psc-nav-arrow-hidden) { opacity: 1; transition: var(--nav-label-transition); } /* Hover — same scope for arrow */ .psc-nav:not(.psc-nav-open):hover .psc-nav-label { opacity: 1; transition: var(--nav-label-transition); } .psc-nav:not(.psc-nav-open):hover .psc-nav-arrow:not(.psc-nav-arrow-hidden) { opacity: 1; transition: var(--nav-label-transition); } .psc-nav-link:hover { background-color: var(--nav-link-hover-bg); color: var(--nav-link-hover-color); } .psc-nav-link.psc-selected { background-color: var(--nav-link-active-bg); color: var(--nav-link-active-color); font-weight: 600; } .psc-nav-link.psc-selected:hover { background-color: var(--nav-link-active-bg); color: var(--nav-link-active-color); } .psc-nav:not(.psc-nav-open) .psc-nav-link.psc-selected-parent { background-color: var(--nav-link-active-bg); color: var(--nav-link-active-color); } .psc-nav-link.psc-not-a-link { cursor: default; } .psc-nav-link.psc-not-a-link:hover { background-color: transparent; color: var(--nav-color); } .psc-nav:not(.psc-nav-open) .psc-not-a-link { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.2s ease-in-out, opacity 0.1s ease-in-out; } .psc-nav-open .psc-not-a-link, .psc-nav:not(.psc-nav-open):hover .psc-not-a-link { max-height: var(--nav-link-height); opacity: 1; transition: max-height 0.2s ease-in-out, opacity 0.15s ease-in-out 0.1s; } /* ============================================================================= 7. NAV SECTION ============================================================================= */ .psc-nav-section { overflow: hidden; flex-shrink: 0; border-radius: var(--radius-sm); } .psc-nav-open .psc-nav-section.psc-nav-section-open, .psc-nav:not(.psc-nav-open):hover .psc-nav-section.psc-nav-section-open { background-color: var(--nav-section-bg); padding-bottom: var(--nav-gap); } /* Arrow rotation when section open */ .psc-nav-section.psc-nav-section-open .psc-nav-link .psc-nav-arrow { transform: rotate(90deg); } /* Child repeater */ .psc-nav-section .psc-nav-repeater { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease-in-out, opacity 0.15s ease-in-out; gap: var(--nav-gap); } .psc-nav-open .psc-nav-section.psc-nav-section-open .psc-nav-repeater, .psc-nav:not(.psc-nav-open):hover .psc-nav-section.psc-nav-section-open .psc-nav-repeater { max-height: 800px; opacity: 1; transition: max-height 0.35s ease-in-out, opacity 0.2s ease-in-out 0.1s; } .psc-nav-section .psc-nav-repeater .psc-nav-link { padding-left: calc(var(--nav-icon-size) + var(--nav-link-px)); } .psc-nav-section .psc-nav-repeater .psc-nav-link .psc-nav-icon { display: none; } /* Tree — max-height:0 removes from layout when closed */ .psc-nav-section .tree { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease-in-out, opacity 0.15s ease-in-out; } .psc-nav-open .psc-nav-section.psc-nav-section-open .tree, .psc-nav:not(.psc-nav-open):hover .psc-nav-section.psc-nav-section-open .tree { max-height: 800px; opacity: 1; transition: max-height 0.35s ease-in-out, opacity 0.2s ease-in-out 0.1s; } .psc-nav .tree .node-wrapper { display: block; } .psc-nav .ia_treeComponent__node { border-radius: var(--radius-sm); color: var(--nav-color); cursor: pointer; font-size: var(--font-sm); } .psc-nav .tree-row { margin-bottom: var(--space-xs); } .psc-nav .ia_treeComponent__node:hover { color: var(--nav-link-hover-color); background-color: var(--nav-link-hover-bg); transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } .psc-nav .ia_treeComponent__node--selected { background-color: var(--nav-link-active-bg); color: var(--nav-link-active-color); } .psc-nav .ia_treeComponent__node .tree-item { height: var(--nav-link-height) !important; } /* FIX: match tree item label font size to nav link labels */ .psc-nav .ia_treeComponent__node .tree-item-label { font-size: var(--font-sm); font-weight: normal; } .psc-nav .ia_treeComponent__alignmentGuide, .psc-nav .terminal-node .ia_treeComponent__node__icon { display: none; } .psc-nav .ia_treeComponent__node .node-icon, .psc-nav .ia_treeComponent__node .expand-icon { fill: var(--nav-color); } .psc-nav .ia_treeComponent__node:hover .node-icon, .psc-nav .ia_treeComponent__node:hover .expand-icon { fill: var(--nav-link-hover-color); } .psc-nav .ia_treeComponent__node--selected .node-icon, .psc-nav .ia_treeComponent__node--selected .expand-icon { fill: var(--nav-link-active-color); } /* ============================================================================= 8. NAV SCROLLBAR ============================================================================= */ .psc-nav::-webkit-scrollbar { width: 3px; } .psc-nav::-webkit-scrollbar-track { background: transparent; } .psc-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 40%, transparent); border-radius: var(--radius-full); } .psc-nav::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ============================================================================= 9. RESPONSIVE OVERRIDES ============================================================================= */ /* Tablet: manually offset content to clear icon strip */ @media (min-width: 768px) and (max-width: 1024px) { .center.view-parent { margin-left: var(--nav-closed-width) !important; transition: margin-left 0.22s ease-in-out !important; } } /* Mobile: no offset */ @media (max-width: 767px) { .center.view-parent { margin-left: 0 !important; } } /* Tablet + Mobile: suppress hover-to-expand visual effects */ @media (max-width: 1024px) { .psc-nav:not(.psc-nav-open):hover .psc-nav-label, .psc-nav:not(.psc-nav-open):hover .psc-nav-arrow { opacity: 0; transition: none; } .psc-nav:not(.psc-nav-open):hover .psc-nav-logo-1 { max-width: unset; opacity: 1; } .psc-nav:not(.psc-nav-open):hover .psc-nav-logo-2 { max-width: 0; opacity: 0; } .psc-nav:not(.psc-nav-open):hover .psc-not-a-link { max-height: 0; opacity: 0; } .psc-nav:not(.psc-nav-open):hover .psc-nav-section.psc-nav-section-open .psc-nav-repeater { max-height: 0; opacity: 0; } } /* BEGIN STYLE CLASSES */ .psc-Alerts\/alertButton { background-color: var(--info); box-shadow: none; } @keyframes psc-Alerts\/alertButton-0-anim { 0% { background-color: var(--info); box-shadow: none; } 100% { background-color: #448BB7; box-shadow: none; } } .psc-Alerts\/alertButton:hover { animation-name: psc-Alerts\/alertButton-0-anim; animation-delay: 0s; animation-direction: normal; animation-duration: 0.2s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; } .psc-Alerts\/alertButton:active { background-color: var(--info); box-shadow: none; } .psc-Alerts\/alertButtonSecondary { background-color: var(--neutral-10); border-color: var(--neutral-100); border-style: solid; border-width: 1px; font-weight: normal; } @keyframes psc-Alerts\/alertButtonSecondary-0-anim { 0% { } 100% { border-width: 2px; } } .psc-Alerts\/alertButtonSecondary:hover { animation-name: psc-Alerts\/alertButtonSecondary-0-anim; animation-delay: 0s; animation-direction: normal; animation-duration: 0.2s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; } .psc-Alerts\/alertClose { cursor: pointer; fill: var(--callToAction); } .psc-Alerts\/alertClose:hover { fill: var(--callToAction--hover); } .psc-Alerts\/alertMessage { color: var(--neutral-100); font-size: 14px; } .psc-Alerts\/alertTitle { font-size: 20px; font-weight: bold; line-height: 32px; } .psc-Alerts\/states\/error { background-color: var(--neutral-10); border-top-color: var(--error); border-top-style: solid; border-top-width: 4px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .psc-Alerts\/states\/errorBtn1 { background-color: var(--error); border-style: none; box-shadow: none; text-transform: uppercase; } .psc-Alerts\/states\/errorBtn1:hover { background-color: var(--error); } .psc-Alerts\/states\/errorBtn1:active { color: var(--neutral-30); } .psc-Alerts\/states\/errorBtn2 { background-color: var(--neutral-10); border-color: var(--error); border-style: solid; border-width: 1px; box-shadow: none; color: var(--error); font-weight: normal; text-transform: uppercase; fill: var(--error); } @keyframes psc-Alerts\/states\/errorBtn2-0-anim { 0% { } 100% { background-color: var(--neutral-20); } } .psc-Alerts\/states\/errorBtn2:hover { animation-name: psc-Alerts\/states\/errorBtn2-0-anim; animation-delay: 0s; animation-direction: normal; animation-duration: 0.2s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; } .psc-Alerts\/states\/info { background-color: var(--neutral-10); border-top-color: var(--info); border-top-style: solid; border-top-width: 4px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .psc-Alerts\/states\/infoBtn1 { background-color: var(--info); border-style: none; box-shadow: none; text-transform: uppercase; } .psc-Alerts\/states\/infoBtn1:hover { background-color: var(--info); } .psc-Alerts\/states\/infoBtn1:active { color: var(--neutral-30); } .psc-Alerts\/states\/infoBtn2 { background-color: var(--neutral-10); border-color: var(--info); border-style: solid; border-width: 1px; box-shadow: none; color: var(--info); font-weight: normal; text-transform: uppercase; fill: var(--info); } @keyframes psc-Alerts\/states\/infoBtn2-0-anim { 0% { } 100% { background-color: var(--neutral-20); } } .psc-Alerts\/states\/infoBtn2:hover { animation-name: psc-Alerts\/states\/infoBtn2-0-anim; animation-delay: 0s; animation-direction: normal; animation-duration: 0.2s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; } .psc-Alerts\/states\/success { background-color: var(--neutral-10); border-top-color: var(--success); border-top-style: solid; border-top-width: 4px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .psc-Alerts\/states\/successBtn1 { background-color: var(--success); border-style: none; box-shadow: none; text-transform: uppercase; } .psc-Alerts\/states\/successBtn1:hover { background-color: var(--success); } .psc-Alerts\/states\/successBtn1:active { color: var(--neutral-30); } .psc-Alerts\/states\/successBtn2 { background-color: var(--neutral-10); border-color: var(--success); border-style: solid; border-width: 1px; box-shadow: none; color: var(--success); font-weight: normal; text-transform: uppercase; fill: var(--success); } @keyframes psc-Alerts\/states\/successBtn2-0-anim { 0% { } 100% { background-color: var(--neutral-20); } } .psc-Alerts\/states\/successBtn2:hover { animation-name: psc-Alerts\/states\/successBtn2-0-anim; animation-delay: 0s; animation-direction: normal; animation-duration: 0.2s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; } .psc-Alerts\/states\/warning { background-color: var(--neutral-10); border-top-color: var(--warning); border-top-style: solid; border-top-width: 4px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .psc-Alerts\/states\/warningBtn1 { background-color: var(--warning); border-style: none; box-shadow: none; text-transform: uppercase; } .psc-Alerts\/states\/warningBtn1:hover { background-color: var(--warning); } .psc-Alerts\/states\/warningBtn1:active { color: var(--neutral-30); } .psc-Alerts\/states\/warningBtn2 { background-color: var(--neutral-10); border-color: var(--warning); border-style: solid; border-width: 1px; box-shadow: none; color: var(--warning); font-weight: normal; text-transform: uppercase; fill: var(--warning); } @keyframes psc-Alerts\/states\/warningBtn2-0-anim { 0% { } 100% { background-color: var(--neutral-20); } } .psc-Alerts\/states\/warningBtn2:hover { animation-name: psc-Alerts\/states\/warningBtn2-0-anim; animation-delay: 0s; animation-direction: normal; animation-duration: 0.2s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; } .psc-Components\/Buttons\/ButtonDefault { background-color: #AC0000; color: #FFFFFF; cursor: pointer; } .psc-Components\/Buttons\/ButtonDefault:hover { background-color: #D90000; color: #2B2B2B; cursor: pointer; } .psc-Components\/Buttons\/ButtonDefault:disabled { background-color: #D5D5D5; color: #AAAAAA; cursor: not-allowed; } .psc-Components\/Buttons\/ButtonDelete { background-color: #AC0000; color: #FFFFFF; } .psc-Components\/Buttons\/ButtonDelete:hover { background-color: #D90000; color: #FFFFFF; } .psc-Components\/Buttons\/ButtonDelete:disabled { background-color: #D5D5D5; color: #AAAAAA; } .psc-Components\/Buttons\/HoverEmpty { } .psc-Components\/Buttons\/HoverEmpty:hover { cursor: pointer; } .psc-Components\/Labels\/BoldSmall { font-size: 10px; font-weight: bold; } .psc-Components\/Labels\/Header { font-size: 16px; font-weight: bold; text-align: center; } .psc-Components\/Labels\/NormalSmall { font-size: 12px; } .psc-Components\/Table\/SelectedRowEven { background-color: #C9DAE8; } .psc-Components\/Table\/SelectedRowOdd { background-color: #C5D6E4; } .psc-Containers\/Body { border-bottom-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: #D5D5D5; border-left-style: solid; border-left-width: 1px; border-right-color: #D5D5D5; border-right-style: solid; border-right-width: 1px; border-top-style: none; padding: 10px; } .psc-Containers\/Header { background-color: #E6E6E6; border-bottom-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: #D5D5D5; border-left-style: solid; border-left-width: 1px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-right-color: #D5D5D5; border-right-style: solid; border-right-width: 1px; border-top-color: #D5D5D5; border-top-style: solid; border-top-width: 1px; } .psc-Docks\/Dock { background-color: #E6E6E6; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #E7F5FF; font-size: 14px; line-height: 17px; margin-bottom: 5px; margin-left: 10px; padding-bottom: 2px; padding-right: 5px; padding-top: 5px; fill: #FFFFFF; } .psc-Docks\/DropDown { background-color: var(--neutral-20); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: var(--neutral-100); margin-bottom: 25px; margin-left: 10px; margin-right: 10px; margin-top: 10px; } .psc-Docks\/Menu\/Item { background-color: #FFFFFF; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; color: #555555; font-size: 14px; line-height: 16px; margin-bottom: 2px; margin-top: 2px; text-align: center; text-transform: uppercase; } .psc-Docks\/Menu\/Item:hover { } .psc-Docks\/Menu\/ItemSelected { background-color: #AC0000; color: #FFFFFF; } .psc-Docks\/Menu\/ItemSelected:hover { color: #000000; } .psc-Embr-Charts\/Button { background-color: #FFFFFF; border-color: #808080; border-style: solid; border-width: 1pt; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #808080; font-family: sans-serif; font-size: 10pt; font-weight: bold; margin: 0.5rem; padding: 0.25rem; fill: #808080; } .psc-Embr-Charts\/Button:hover { background-color: #008FFB; color: #FFFFFF; font-weight: bold; } .psc-Embr-Charts\/Button:disabled { background-color: #D5D5D5; color: #808080; } .psc-Header\/Header { background-color: #B8BEBE; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #E7F5FF; font-size: 14px; line-height: 17px; margin-bottom: 2px; margin-left: 10px; margin-right: 10px; margin-top: 5px; padding-bottom: 2px; padding-top: 5px; fill: #FFFFFF; } .psc-Header\/Icon { color: #FFFFFF; cursor: pointer; fill: #FFFFFF; } .psc-Hover\/DefaultHover { color: #4B4B46; font-family: Helvetica; } .psc-Hover\/DefaultHover:hover { color: #D7004B; } .psc-Hover\/HoverCursor { } .psc-Hover\/HoverCursor:hover { cursor: pointer; } .psc-Hover\/HoverUnderline { } .psc-Hover\/HoverUnderline:hover { text-decoration: underline; } .psc-Popup\/Popup_Hover { } .psc-Popup\/Popup_Hover:hover { background-color: #EBEBEB; } .psc-SAW\/AdHocTrends\/CancelButton { border-top-left-radius: 4px; border-top-right-radius: 0px; border-bottom-left-radius: 4px; border-bottom-right-radius: 0px; } .psc-SAW\/AdHocTrends\/CancelButtonMobile { border-top-left-radius: 8px; border-top-right-radius: 0px; border-bottom-left-radius: 8px; border-bottom-right-radius: 0px; } .psc-SAW\/AdHocTrends\/Control { padding: 1px; } .psc-SAW\/AdHocTrends\/ControlBar { padding-bottom: 8px; padding-left: 14px; padding-right: 16px; padding-top: 16px; } .psc-SAW\/AdHocTrends\/DropDown { background-color: var(--neutral-10); color: var(--neutral-90); } .psc-SAW\/AdHocTrends\/FullRadius { border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .psc-SAW\/AdHocTrends\/FullRadiusMobile { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .psc-SAW\/AdHocTrends\/FunctionBar { background-color: var(--neutral-20); padding-bottom: 2px; padding-left: 8px; padding-right: 16px; padding-top: 2px; } .psc-SAW\/AdHocTrends\/FunctionTitle { font-size: 12px; font-weight: bold; text-align: right; } .psc-SAW\/AdHocTrends\/Header { background-color: var(--neutral-30); border-color: var(--neutral-50); border-style: solid; border-width: 1px; } .psc-SAW\/AdHocTrends\/HeaderTitle { font-weight: bold; } .psc-SAW\/AdHocTrends\/LeftRadius { border-top-left-radius: 4px; border-top-right-radius: 0px; border-bottom-left-radius: 4px; border-bottom-right-radius: 0px; } .psc-SAW\/AdHocTrends\/LeftRadiusMobile { border-top-left-radius: 8px; border-top-right-radius: 0px; border-bottom-left-radius: 8px; border-bottom-right-radius: 0px; } .psc-SAW\/AdHocTrends\/MobileControl { padding: 1px; } .psc-SAW\/AdHocTrends\/MobileControlBar { padding-bottom: 6px; padding-left: 12px; padding-right: 12px; padding-top: 8px; } .psc-SAW\/AdHocTrends\/MobileFunctionBar { background-color: var(--neutral-20); padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px; } .psc-SAW\/AdHocTrends\/RightRadius { border-top-left-radius: 0px; border-top-right-radius: 4px; border-bottom-left-radius: 0px; border-bottom-right-radius: 4px; } .psc-SAW\/AdHocTrends\/RightRadiusMobile { border-top-left-radius: 0px; border-top-right-radius: 8px; border-bottom-left-radius: 0px; border-bottom-right-radius: 8px; } .psc-SAW\/AdHocTrends\/SaveLoadButton { border-top-left-radius: 0px; border-top-right-radius: 4px; border-bottom-left-radius: 0px; border-bottom-right-radius: 4px; } .psc-SAW\/AdHocTrends\/SaveLoadButtonMobile { border-top-left-radius: 0px; border-top-right-radius: 8px; border-bottom-left-radius: 0px; border-bottom-right-radius: 8px; } .psc-SAW\/AlarmAnalysis\/Label { color: #2B2B2B; font-size: 14px; font-weight: 300; line-height: 16px; } .psc-SAW\/Docks\/Dock { background-color: #B8BEBE; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #E7F5FF; font-size: 14px; line-height: 17px; margin-bottom: 5px; margin-left: 10px; padding-bottom: 2px; padding-right: 5px; padding-top: 5px; fill: #FFFFFF; } .psc-SAW\/Docks\/DropDown { background-color: var(--neutral-20); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: var(--neutral-100); margin-bottom: 25px; margin-left: 10px; margin-right: 10px; margin-top: 10px; } .psc-SAW\/Docks\/Menu\/Item { background-color: var(--neutral-20); border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; color: var(--neutral-80); font-size: 14px; line-height: 16px; margin-bottom: 2px; margin-top: 2px; text-align: center; text-transform: uppercase; } .psc-SAW\/Docks\/Menu\/Item:hover { background-color: var(--callToActionHighlight); } .psc-SAW\/Docks\/Menu\/ItemSelected { background-color: #CCFFCC; } .psc-SAW\/Docks\/Menu\/ItemSelected:hover { background-color: #CCFFCC; color: #000000; } .psc-SAW\/Footer\/Label { background-color: #D5D5D5; border-bottom-style: solid; border-left-style: solid; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-right-style: solid; border-top-style: solid; color: #000000; font-weight: bold; margin: 5px; text-align: justify-all; } .psc-SAW\/Framework\/Card\/Bold_Text { font-weight: bold; } .psc-SAW\/Framework\/Card\/Card { background-color: #FAFAFA; border-color: #D5D5D5; border-style: solid; border-width: 1px; border-radius: 4px; box-shadow: 0px 2px 4px rgba(0, 0, 40, 0.15); margin: 5px; } .psc-SAW\/Framework\/Card\/Embedded { margin: 5px; } .psc-SAW\/Framework\/Card\/Item { padding-bottom: 4px; padding-left: 18px; padding-right: 18px; padding-top: 4px; } .psc-SAW\/Framework\/Card\/Item_Border { border-bottom-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 1px; } .psc-SAW\/Framework\/Card\/Label { color: #8E8E8E; font-size: 12px; font-weight: 300; line-height: 16px; margin-right: 10px; text-transform: uppercase; } .psc-SAW\/Framework\/Card\/Row { margin-bottom: 2px; } .psc-SAW\/Framework\/Card\/Title { background-color: #E6EAEEAD; border-bottom-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 1px; color: #2E2E2E; font-size: 12px; font-weight: bold; padding-left: 6px; padding-right: 6px; text-transform: uppercase; fill: #2E2E2E; } .psc-SAW\/Framework\/Card\/Value { color: #000080; font-size: 12px; font-weight: bold; line-height: 16px; } .psc-SAW\/Framework\/TableCardLayout\/Label { color: #2B2B2B; font-size: 14px; font-weight: 300; line-height: 16px; } .psc-SAW\/HP\/ClickPlate { border-color: #C4C4C4; border-style: double; border-width: 5px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .psc-SAW\/HP\/Color\/Alarm\/AlarmActive { color: #FF0000; } .psc-SAW\/HP\/Color\/Alarm\/AlarmInactive { color: #808080; } .psc-SAW\/HP\/Color\/Val_Fbdk-1 { fill: #FFFFFF; } .psc-SAW\/HP\/Color\/Val_Fbdk-3 { fill: #4747FF; } .psc-SAW\/HP\/Color\/Val_Fbdk-4 { fill: #4747FF; } .psc-SAW\/HP\/Color\/Val_Fdbk-0 { fill: #555555; } .psc-SAW\/HP\/Color\/Val_Sts-0 { fill: #AAAAAA; } .psc-SAW\/HP\/Color\/Val_Sts-1 { fill: #555555; } .psc-SAW\/HP\/Color\/Val_Sts-10 { stroke: #4747FF; stroke-width: 35; fill: #FFFFFF; } .psc-SAW\/HP\/Color\/Val_Sts-2 { stroke: #FFFFFF; stroke-width: 20; fill: #FFFFFF; } .psc-SAW\/HP\/Color\/Val_Sts-5 { fill: #4747FF; } .psc-SAW\/HP\/FacePlate\/CheckBoxLabelIndicator { margin-left: 25px; margin-right: 25px; text-align: center; } .psc-SAW\/HP\/FacePlate\/Container-Header-Buttons { background-color: #AAAAAA; } .psc-SAW\/HP\/FacePlate\/FacePlateAckButton { background-color: #808080; margin: 2px; } .psc-SAW\/HP\/FacePlate\/FacePlateAckButtonInverted { background-color: #FFFFFF; color: #000000; margin: 2px; } .psc-SAW\/HP\/FacePlate\/FacePlateButtonGreen-Off { background-color: #FFFFFF; color: #000000; } .psc-SAW\/HP\/FacePlate\/FacePlateButtonGreen-On { background-color: #00AC00; color: #2B2B2B; } .psc-SAW\/HP\/FacePlate\/FacePlateHeaderLabel { font-weight: bold; text-align: center; } .psc-SAW\/HP\/FacePlate\/FacePlateNavButtons { background-color: #808080; margin: 2px; } .psc-SAW\/HP\/FacePlate\/FacePlateNavButtonsSelected { background-color: #FFFFFF; color: #000000; margin: 2px; } .psc-SAW\/HP\/FacePlate\/FacePlateRadioGroup { } .psc-SAW\/HP\/FacePlate\/FacePlateRadioGroup:checked { color: #FF47FF; fill: #FF47FF; } .psc-SAW\/HP\/FacePlate\/FacePlateRadioGroup:active { color: #00FF00; fill: #00FF00; } .psc-SAW\/HP\/FacePlate\/FacePlateRowInputs { margin: 5px; } .psc-SAW\/HP\/FacePlate\/FacePlateTabLabel { background-color: #D5D5D5; font-weight: bold; margin-bottom: 5px; text-align: center; } .psc-SAW\/HP\/FacePlate\/Junk\/FacePlateAlarmButtonFaulted { color: #FFAC47; } .psc-SAW\/HP\/FacePlate\/LiveLabelOutput { margin-left: 5px; margin-right: 5px; text-align: right; } .psc-SAW\/HP\/FacePlate\/NumericEntryField { border-bottom-color: #000000; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: #000000; border-left-style: solid; border-left-width: 1px; border-right-color: #000000; border-right-style: solid; border-right-width: 1px; border-top-color: #000000; border-top-style: solid; border-top-width: 1px; } .psc-SAW\/HP\/HMI_Buttons { background-color: #808080; margin: 2px; } .psc-SAW\/HP\/HMI_Clickable { border-color: #FFFFFF00; border-style: solid; border-width: 2px; border-radius: 4px; cursor: pointer; } .psc-SAW\/HP\/HMI_Clickable:hover { border-color: #2E2E2E; border-style: solid; border-width: 2px; border-radius: 4px; } .psc-SAW\/HP\/HMI_Comp_Alarm_Indicator { background-color: #FF0000; color: #000000; text-align: center; } .psc-SAW\/HP\/HMI_Comp_Label { background-color: #DDE1E6; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #2E2E2E; font-family: Roboto; font-size: 12px; text-align: center; } .psc-SAW\/HP\/HMI_Fault_Indicator { background-color: #FF0000; text-align: center; } .psc-SAW\/HP\/HMI_HOA_Hand_Label { background-color: #FFFF8A; text-align: center; } .psc-SAW\/HP\/HMI_Live_Value { background-color: #F2F2F2; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #0000FF; font-weight: bold; text-align: center; } .psc-SAW\/HP\/HMI_Off { background-color: #808080; color: #FFFFFF; stroke: #2E2E2E; stroke-width: 10px; fill: #808080; } .psc-SAW\/HP\/HMI_On { background-color: #FFFFFF; color: #FFFFFF; stroke: #2E2E2E; stroke-width: 10px; fill: #CCFFCC; } .psc-SAW\/HP\/HMI_Sim_Indicator { background-color: #FFFF8A; text-align: center; } .psc-SAW\/HP\/HMI_StartOrStop { background-color: #FFFFFF; color: #FFFFFF; stroke: #2E2E2E; stroke-width: 10px; fill: #8AFFFF; } .psc-SAW\/HP\/HMI_Value { color: #000080; font-family: Roboto; font-size: 12px; font-weight: bold; } .psc-SAW\/HP\/HideDisabledHoover { } .psc-SAW\/HP\/HideDisabledHoover:disabled { cursor: none; } .psc-SAW\/HP\/MultiStateButton { font-weight: bold; margin-left: 10px; margin-right: 10px; text-align: center; } .psc-SAW\/Header\/Backups\/Header { background-color: #003E69; color: #E7F5FF; font-size: 14px; line-height: 17px; fill: #FFFFFF; } .psc-SAW\/Header\/Backups\/Icon { cursor: pointer; fill: #FFFFFF; } .psc-SAW\/Header\/DropDown { background-color: var(--neutral-10); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: var(--neutral-100); margin-bottom: 10px; margin-top: 10px; } .psc-SAW\/Header\/Header { background-color: #B8BEBE; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #E7F5FF; font-size: 14px; line-height: 17px; margin-bottom: 2px; margin-left: 10px; margin-right: 10px; margin-top: 5px; padding-bottom: 2px; padding-top: 5px; fill: #FFFFFF; } .psc-SAW\/Header\/Icon { color: #FFFFFF; cursor: pointer; fill: #FFFFFF; } .psc-SAW\/Menu\/All_Header { background-color: var(--neutral-80); color: var(--neutral-10); font-size: 14px; font-weight: bold; line-height: 17px; text-transform: none; } .psc-SAW\/Menu\/Item_Horizontal { background-color: unset; color: #FFFFFF; font-size: 14px; line-height: 16px; text-transform: uppercase; } .psc-SAW\/Menu\/Item_Horizontal:hover { background-color: #0D72B633; } .psc-SAW\/Menu\/Item_Vertical { background-color: var(--neutral-20); border-bottom-style: none; border-top-color: var(--neutral-60); border-top-style: solid; border-top-width: 1px; color: var(--neutral-80); font-size: 14px; line-height: 16px; text-transform: uppercase; } .psc-SAW\/Menu\/Item_Vertical:last-child { border-bottom-color: var(--neutral-60); border-bottom-style: solid; border-bottom-width: 1px; } .psc-SAW\/Menu\/Item_Vertical:hover { background-color: var(--callToActionHighlight); } .psc-SAW\/Menu\/Menu_Horizontal { background-color: #00000000; border-style: none; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #FFFFFF; } .psc-SAW\/Menu\/Menu_Vertical { background-color: var(--neutral-30); border-bottom-color: var(--neutral-60); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: var(--neutral-60); border-left-style: solid; border-left-width: 1px; border-right-color: var(--neutral-60); border-right-style: solid; border-right-width: 1px; border-top-color: var(--neutral-60); border-top-style: solid; border-top-width: 1px; } .psc-SAW\/Page\/Alarm\/Alarm { border-bottom-style: none; border-left-color: var(--neutral-40); border-left-style: solid; border-left-width: 1px; border-right-color: var(--neutral-40); border-right-style: solid; border-right-width: 1px; border-top-style: none; } .psc-SAW\/Page\/Alarm\/Page { background-color: var(--neutral-20); } .psc-SAW\/Page\/Bold { font-weight: bold; } .psc-SAW\/Page\/Margins { margin-left: 12px; margin-right: 12px; } .psc-SAW\/Page\/Page { font-size: 14px; line-height: 20px; margin: 5px; } .psc-SAW\/Page\/Text { color: var(--neutral-100); font-size: 14px; line-height: 20px; } .psc-SAW\/Title\/Icon { fill: var(--neutral-90); } .psc-SAW\/Title\/Text { color: var(--neutral-90); font-size: 16px; font-weight: bold; line-height: 19px; padding-left: 6px; fill: var(--neutral-90); } .psc-SAW\/Title\/Title { background-color: var(--neutral-30); border-bottom-color: var(--neutral-60); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: var(--neutral-60); border-top-style: solid; border-top-width: 1px; } .psc-SAW\/UserManagement\/Headers { background-color: #2B2B2B; color: #FFFFFF; font-family: Arial; font-size: 20px; font-weight: lighter; text-align: start; text-indent: 6px; } .psc-SAW\/UserManagement\/InputFont { font-family: Arial; font-size: 14px; } .psc-SAW\/UserManagement\/LeftVerticalHeaderBar { border-left-color: #4A4A4A63; border-left-style: solid; border-left-width: 1px; } .psc-SAW\/UserManagement\/SectionHeaders { font-family: Arial; font-size: 15px; margin-bottom: 9px; } .psc-SAW\/UserManagement\/TableEditorIcons { cursor: pointer; margin-bottom: 1px; margin-top: 5px; } .psc-TimeClock\/Buttons\/Background { background-color: #D5D5D5; } .psc-TimeClock\/Buttons\/Default { background-color: #D5D5D5; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; color: #000000; } .psc-TimeClock\/Buttons\/Text { color: #000000; } .psc-TimeClock\/Docks\/Dock { background-color: #B8BEBE; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #E7F5FF; font-size: 14px; line-height: 17px; margin-bottom: 5px; margin-left: 10px; padding-bottom: 2px; padding-right: 5px; padding-top: 5px; fill: #FFFFFF; } .psc-TimeClock\/Docks\/DropDown { background-color: var(--neutral-20); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: var(--neutral-100); margin-bottom: 25px; margin-left: 10px; margin-right: 10px; margin-top: 10px; } .psc-TimeClock\/Docks\/Menu\/Item { background-color: var(--neutral-20); border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; color: var(--neutral-80); font-size: 14px; line-height: 16px; margin-bottom: 2px; margin-top: 2px; text-align: center; text-transform: uppercase; } .psc-TimeClock\/Docks\/Menu\/Item:hover { background-color: var(--callToActionHighlight); } .psc-TimeClock\/Docks\/Menu\/ItemSelected { background-color: #CCFFCC; } .psc-TimeClock\/Docks\/Menu\/ItemSelected:hover { background-color: #CCFFCC; color: #000000; } .psc-TimeClock\/Header\/Header { background-color: #B8BEBE; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #E7F5FF; font-size: 14px; line-height: 17px; margin-bottom: 2px; margin-left: 10px; margin-right: 10px; margin-top: 5px; padding-bottom: 2px; padding-top: 5px; fill: #FFFFFF; } .psc-TimeClock\/Header\/Icon { color: #FFFFFF; cursor: pointer; fill: #FFFFFF; } .psc-TimeClock\/Main { background-color: #F2F2F2; } .psc-TimeClock\/Menu\/All_Header { background-color: var(--neutral-80); color: var(--neutral-10); font-size: 14px; font-weight: bold; line-height: 17px; text-transform: none; } .psc-TimeClock\/Menu\/Item { background-color: var(--neutral-20); border-bottom-style: none; border-top-color: var(--neutral-60); border-top-style: solid; border-top-width: 1px; color: var(--neutral-80); font-size: 14px; line-height: 16px; text-transform: uppercase; } .psc-TimeClock\/Menu\/Item:last-child { border-bottom-color: var(--neutral-60); border-bottom-style: solid; border-bottom-width: 1px; } .psc-TimeClock\/Menu\/Item:hover { background-color: var(--callToActionHighlight); } .psc-TimeClock\/Menu\/Menu { background-color: var(--neutral-30); } .psc-TimeClock\/Page\/EmbeddedRow { margin-top: 5px; } .psc-TimeClock\/Page\/KPIGauge\/Gauge { margin: 10px; } .psc-TimeClock\/Page\/KPIGauge\/Label { font-weight: bold; text-align: center; } .psc-TimeClock\/Page\/Label\/CenterSubInfo { margin-top: 10px; text-align: center; } .psc-TimeClock\/Page\/PageEmbedded { margin-bottom: 5px; margin-right: 10px; } .psc-TimeClock\/Page\/Title\/Icon { fill: var(--neutral-90); } .psc-TimeClock\/Page\/Title\/Text { color: var(--neutral-90); font-size: 16px; font-weight: bold; line-height: 19px; fill: var(--neutral-90); } .psc-TimeClock\/Page\/Title\/Title { background-color: var(--neutral-30); border-bottom-color: var(--neutral-60); border-bottom-style: solid; border-bottom-width: 1px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-color: var(--neutral-60); border-top-style: solid; border-top-width: 1px; margin-right: 10px; } .psc-TimeClock\/Selected { background-color: #CCFFCC; } .psc-TimeClock\/Tabs\/Tab { background-color: var(--neutral-20); border-style: solid; border-width: 1px; border-top-left-radius: 7px; border-top-right-radius: 7px; color: var(--neutral-80); font-size: 14px; line-height: 16px; margin-bottom: 2px; margin-top: 2px; text-align: center; text-transform: uppercase; } .psc-TimeClock\/Tabs\/Tab:hover { background-color: var(--callToActionHighlight); } .psc-TimeClock\/Tabs\/TabSelected { background-color: #CCFFCC; border-style: solid; border-width: 1px; border-top-left-radius: 7px; border-top-right-radius: 7px; font-weight: bold; } .psc-TimeClock\/Tabs\/TabSelected:hover { background-color: #CCFFCC; color: #000000; } .psc-Utilities\/m-b-16 { margin-bottom: 16px; } .psc-Utilities\/m-r-16 { margin-right: 16px; } .psc-Utilities\/m-r-8 { margin-right: 8px; } .psc-Utilities\/p-16 { padding: 16px; } .psc-Utilities\/p-8 { padding: 8px; } .psc-Utilities\/p-rl-8 { padding-left: 8px; padding-right: 8px; } .psc-artek\/background\/hover { } .psc-artek\/background\/surface { } .psc-artek\/comp\/badge { } .psc-artek\/comp\/button { } .psc-artek\/comp\/card { } .psc-artek\/effect\/interactive { } .psc-artek\/layout\/gap-lg { } .psc-artek\/layout\/gap-md { } .psc-artek\/layout\/gap-none { } .psc-artek\/layout\/gap-sm { } .psc-artek\/layout\/gap-xl { } .psc-artek\/layout\/gap-xs { } .psc-artek\/layout\/padding-lg { } .psc-artek\/layout\/padding-md { } .psc-artek\/layout\/padding-none { } .psc-artek\/layout\/padding-sm { } .psc-artek\/layout\/padding-xl { } .psc-artek\/layout\/padding-xs { } .psc-artek\/layout\/radius-lg { } .psc-artek\/layout\/radius-md { } .psc-artek\/layout\/radius-sm { } .psc-artek\/palette\/danger { } .psc-artek\/palette\/info { } .psc-artek\/palette\/neutral { } .psc-artek\/palette\/primary { } .psc-artek\/palette\/success { } .psc-artek\/palette\/warn { } .psc-artek\/popup\/auto-height { } .psc-artek\/popup\/auto-width { } .psc-artek\/size\/lg { } .psc-artek\/size\/md { } .psc-artek\/size\/sm { } .psc-artek\/size\/xs { } .psc-artek\/surface\/default { } .psc-artek\/surface\/overlay { } .psc-artek\/surface\/page { } .psc-artek\/surface\/raised { } .psc-artek\/typography\/align-center { } .psc-artek\/typography\/align-right { } .psc-artek\/typography\/body-lg { } .psc-artek\/typography\/body-md { } .psc-artek\/typography\/body-sm { } .psc-artek\/typography\/bold { } .psc-artek\/typography\/h1 { } .psc-artek\/typography\/h2 { } .psc-artek\/typography\/h3 { } .psc-artek\/typography\/muted { } .psc-artek\/typography\/secondary { } .psc-artek\/typography\/title-lg { } .psc-artek\/typography\/title-md { } .psc-artek\/typography\/title-sm { } .psc-artek\/variant\/ghost { } .psc-artek\/variant\/outlined { } .psc-artek\/variant\/soft { } .psc-artek\/variant\/solid { } .psc-exchange\/DocumentManagement\/Header\/Header { background-color: #003E69; font-size: 14px; fill: #FFFFFF; } .psc-exchange\/DocumentManagement\/Header\/Icon { color: #FFFFFF; cursor: pointer; fill: #FFFFFF; } .psc-exchange\/DocumentManagement\/Header\/Title { color: #FFFFFF; font-size: 20px; } .psc-exchange\/DocumentManagement\/Menu\/Icon { color: #535C69; fill: #535C69; } .psc-exchange\/DocumentManagement\/Menu\/Item { color: #535C69; font-size: 12px; font-weight: bolder; margin-left: 5px; text-transform: uppercase; fill: #535C69; } .psc-exchange\/DocumentManagement\/Menu\/Menu { background-color: #EEF2F4; padding-bottom: 10px; padding-left: 10px; padding-top: 10px; } .psc-exchange\/DocumentManagement\/Menu\/Text { color: #535C69; font-size: 12px; } .psc-exchange\/DocumentManagement\/Page\/Bold { font-weight: bold; } .psc-exchange\/DocumentManagement\/Page\/Header { color: #535C69; font-size: 12px; font-weight: bolder; text-transform: uppercase; } .psc-exchange\/DocumentManagement\/Page\/Link { color: var(--callToAction); cursor: pointer; font-size: 12px; } .psc-exchange\/DocumentManagement\/Page\/Margins { margin-left: 10px; margin-right: 10px; } .psc-exchange\/DocumentManagement\/Page\/Page { background-color: #FFFFFF; border-bottom-color: #EEF2F4; border-bottom-style: solid; border-bottom-width: 14px; border-left-color: #EEF2F4; border-left-style: solid; border-left-width: 14px; border-right-color: #EEF2F4; border-right-style: solid; border-right-width: 14px; font-size: 14px; } .psc-exchange\/DocumentManagement\/Page\/Text { color: #535C69; font-size: 12px; } .psc-exchange\/DocumentManagement\/Popup\/Page { background-color: #FFFFFF; font-size: 14px; } .psc-exchange\/DocumentManagement\/Tag\/Tag { background-color: #DCE2E5; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #8A9096; font-size: 10px; font-weight: bolder; } .psc-exchange\/DocumentManagement\/Title\/Icon { color: #535C69; fill: #535C69; } .psc-exchange\/DocumentManagement\/Title\/Text { color: #535C69; font-size: 24px; margin-left: 6px; fill: var(--neutral-90); } .psc-exchange\/DocumentManagement\/Title\/Title { background-color: #EEF2F4; } .psc-exchange\/IconManager\/console { border-color: #00000052; border-style: solid; border-width: 1px; font-size: 0.875rem; font-weight: 300; padding: 0.5rem; } .psc-exchange\/IconManager\/icon { padding: 0.5rem; } .psc-exchange\/IconManager\/icon:hover { border-color: var(--toggleSwitch--selected); border-style: solid; border-width: 1px; } .psc-exchange\/IconManager\/icon-selected { background-color: var(--toggleSwitch--selected); } .psc-exchange\/IconManager\/icon-tooltip { font-size: 1.25rem; } .psc-exchange\/IconManager\/typography-header { font-size: 0.875rem; font-weight: 500; } .psc-exchange\/artekcalendar\/container\/background { background-color: var(--neutral-10); } .psc-exchange\/artekcalendar\/container\/hover { } .psc-exchange\/artekcalendar\/container\/hover:hover { background-color: var(--neutral-30); color: var(--neutral-90); cursor: pointer; } .psc-exchange\/artekcalendar\/container\/padding-md { padding: 10px; } .psc-exchange\/artekcalendar\/container\/radius-md { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .psc-exchange\/artekcalendar\/container\/selected { background-color: var(--neutral-30); } .psc-exchange\/artekcalendar\/container\/today { background-color: var(--neutral-50); } .psc-exchange\/artekcalendar\/typography\/align-center { text-align: center; } .psc-exchange\/artekcalendar\/typography\/bold { } .psc-exchange\/artekcalendar\/typography\/hover { } .psc-exchange\/artekcalendar\/typography\/hover:hover { font-weight: bold; } .psc-exchange\/artekcalendar\/typography\/lg { font-size: 1.2em; } .psc-exchange\/artekcalendar\/typography\/md { font-size: 0.9em; } .psc-exchange\/artekcalendar\/typography\/out-of-month { color: var(--neutral-50); } .psc-exchange\/artekcalendar\/typography\/sm { font-size: 0.8em; } .psc-exchange\/artekcalendar\/typography\/upper { text-transform: uppercase; } .psc-exchange\/artekcalendar\/typography\/xs { font-size: 0.7em; } .psc-exchange\/comtrade\/section { border-color: var(--neutral-30); border-style: solid; border-width: 1px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin: 8px; padding: 8px; } .psc-exchange\/datacenter\/equipment\/common\/base { font-size: 5px; font-weight: bold; text-align: center; } .psc-exchange\/datacenter\/equipment\/common\/text { color: var(--neutral-90); font-size: 15px; font-weight: bold; text-align: center; } .psc-exchange\/datacenter\/equipment\/common\/value { color: var(--callToAction); } .psc-exchange\/datacenter\/faceplates\/active-alarm-count\/container { border-color: var(--neutral-30); border-style: solid; border-width: 1px; border-top-left-radius: 7.5px; border-top-right-radius: 7.5px; border-bottom-left-radius: 7.5px; border-bottom-right-radius: 7.5px; padding: 10px; } .psc-exchange\/datacenter\/faceplates\/active-alarm-count\/container:hover { background-color: var(--neutral-20); cursor: pointer; } .psc-exchange\/datacenter\/faceplates\/active-alarm-count\/label { color: var(--label); font-family: Roboto; font-size: 15px; font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ahu\/discharge-metrics\/base { font-family: Roboto; font-size: 14px; font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ahu\/discharge-metrics\/units { color: var(--label); text-align: left; } .psc-exchange\/datacenter\/faceplates\/ahu\/discharge-metrics\/value { color: var(--callToAction); text-align: right; } .psc-exchange\/datacenter\/faceplates\/ahu\/energy-consumed { font-family: Roboto; font-size: 21px; font-weight: 500; text-align: center; } .psc-exchange\/datacenter\/faceplates\/ahu\/status\/base { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; font-family: Roboto; font-size: 14px; padding: 7.5px; text-align: center; } .psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/dark\/error { background-color: var(--error); color: var(--neutral-100); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/dark\/off { background-color: var(--neutral-20); color: var(--neutral-100); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/dark\/on { background-color: var(--callToAction); color: var(--neutral-100); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/extraLeftRightPadding { padding-left: 20px; padding-right: 20px; } .psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/light\/error { background-color: var(--error); color: var(--neutral-100); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/light\/off { background-color: var(--neutral-50); color: var(--neutral-10); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/light\/on { background-color: var(--callToAction); color: var(--neutral-10); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/container { background-color: var(--neutral-10); padding: 5px; } .psc-exchange\/datacenter\/faceplates\/section { border-color: var(--neutral-30); border-style: solid; border-width: 1px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 10px; } .psc-exchange\/datacenter\/faceplates\/section-title\/base { font-family: Roboto; font-size: 14px; text-align: center; white-space: pre-wrap; } .psc-exchange\/datacenter\/faceplates\/section-title\/bold { font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/section-title\/important { color: var(--label); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/section-title\/left-aligned { text-align: left; } .psc-exchange\/datacenter\/faceplates\/section-title\/primary { color: var(--label); } .psc-exchange\/datacenter\/faceplates\/section-title\/secondary { color: var(--neutral-50); } .psc-exchange\/datacenter\/faceplates\/ups\/discharge-metrics\/base { font-family: Roboto; font-size: 14px; font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ups\/discharge-metrics\/units { color: var(--label); text-align: left; } .psc-exchange\/datacenter\/faceplates\/ups\/discharge-metrics\/value { color: var(--callToAction); text-align: right; } .psc-exchange\/datacenter\/faceplates\/ups\/energy-consumed { font-family: Roboto; font-size: 21px; font-weight: 500; text-align: center; } .psc-exchange\/datacenter\/faceplates\/ups\/status\/base { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; font-family: Roboto; font-size: 14px; padding: 7.5px; text-align: center; } .psc-exchange\/datacenter\/faceplates\/ups\/status\/generic\/dark\/off { background-color: var(--neutral-20); color: var(--neutral-100); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ups\/status\/generic\/dark\/on { background-color: var(--callToAction); color: var(--neutral-100); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ups\/status\/generic\/extraLeftRightPadding { padding-left: 20px; padding-right: 20px; } .psc-exchange\/datacenter\/faceplates\/ups\/status\/generic\/light\/off { background-color: var(--neutral-50); color: var(--neutral-10); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/ups\/status\/generic\/light\/on { background-color: var(--callToAction); color: var(--neutral-10); font-weight: 500; } .psc-exchange\/datacenter\/faceplates\/value\/important { font-family: Roboto; font-size: 28px; font-weight: 500; text-align: center; } .psc-exchange\/datacenter\/framework\/data\/base { font-family: Roboto; font-size: 14px; font-weight: 500; text-align: center; } .psc-exchange\/datacenter\/framework\/data\/numeric-value { color: var(--callToAction); font-weight: bold; text-align: right; } .psc-exchange\/datacenter\/framework\/data\/text-value { color: var(--callToAction); font-weight: bold; text-align: center; } .psc-exchange\/datacenter\/kpi-details\/container { border-color: var(--neutral-30); border-style: solid; border-width: 1px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 5px; } .psc-exchange\/datacenter\/kpi-details\/current-value { color: var(--callToAction); font-family: Roboto; font-size: 22px; text-align: center; } .psc-exchange\/datacenter\/kpi-details\/title { color: var(--label); font-family: Roboto; font-size: 17px; text-align: center; } .psc-exchange\/datacenter\/kpi-details\/trend\/dropdown-option { background-color: #FFFFFF00; color: var(--label); font-family: Roboto; font-size: 13px; padding: 7.5px; } .psc-exchange\/datacenter\/kpi-details\/trend\/dropdown-selected-value { background-color: #FFFFFF00; border-color: var(--neutral-30); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: var(--label); font-family: Roboto; font-size: 13px; padding: 0.15vmin; } .psc-exchange\/datacenter\/kpi-details\/trend\/value\/name { color: var(--label); font-family: Roboto; font-size: 12px; text-align: center; } .psc-exchange\/datacenter\/kpi-details\/trend\/value\/value { color: var(--callToAction); font-family: Roboto; font-size: 14px; text-align: center; } .psc-exchange\/datacenter\/overview\/popup-button { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 20px; } .psc-exchange\/datacenter\/overview\/section\/container { border-color: var(--neutral-30); border-style: solid; border-width: 1px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 5px; } .psc-exchange\/datacenter\/overview\/section\/root-container { padding: 5px; } .psc-exchange\/datacenter\/overview\/section\/widget-container { border-color: var(--neutral-30); border-style: solid; border-width: 1px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 5px; } .psc-exchange\/datacenter\/overview\/text\/description { color: var(--label); font-family: Roboto; font-size: 13px; overflow-wrap: break-word; } .psc-exchange\/datacenter\/overview\/text\/primary-title { color: var(--label); font-family: Roboto; font-size: 21px; text-align: center; } .psc-exchange\/datacenter\/overview\/text\/secondary-title { color: var(--label); font-family: Roboto; font-size: 18.5px; text-align: center; } .psc-exchange\/gridcalendar\/container\/hover { } .psc-exchange\/gridcalendar\/container\/hover:hover { background-color: var(--neutral-30); cursor: pointer; } .psc-exchange\/gridcalendar\/container\/selected { background-color: var(--neutral-30); } .psc-exchange\/gridcalendar\/container\/today { background-color: var(--neutral-90); color: var(--neutral-10); } .psc-exchange\/gridcalendar\/typography\/align-center { text-align: center; } .psc-exchange\/gridcalendar\/typography\/bold { } .psc-exchange\/gridcalendar\/typography\/lg { font-size: 1.2em; } .psc-exchange\/gridcalendar\/typography\/md { font-size: 0.9em; } .psc-exchange\/gridcalendar\/typography\/out-of-month { color: var(--neutral-50); } .psc-exchange\/gridcalendar\/typography\/sm { font-size: 0.8em; } .psc-exchange\/gridcalendar\/typography\/xs { font-size: 0.7em; } .psc-exchange\/task-toggler\/icon-button { background-color: transparent; border-style: none; box-shadow: none !important; outline-style: none; } .psc-exchange\/task-toggler\/large-label { font-size: 1.5rem; font-weight: 600; } .psc-exchange\/task-toggler\/small-label { font-size: 12px; font-weight: 600; text-transform: uppercase; white-space: pre-wrap; } @keyframes psc-SAW\/Header\/Alarm_Active-anim { 0% { color: #FFFFFF; fill: #FFFFFF; } 100% { color: #FFCCCC; fill: #FFCCCC; } } .psc-SAW\/Header\/Alarm_Active { animation-name: psc-SAW\/Header\/Alarm_Active-anim; animation-delay: 0s; animation-direction: alternate; animation-duration: 2s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: linear; }