304 lines
15 KiB
CSS
304 lines
15 KiB
CSS
/* ========================================================= */
|
|
/* Foundations */
|
|
/* ========================================================= */
|
|
|
|
:root {
|
|
/* Colors */
|
|
--color-darkblue: #4661A9;
|
|
--color-midblue: #657FBA;
|
|
--color-darkgreen: #4D646E;
|
|
--color-darkbrown: #665F57;
|
|
--color-light-grey: #E2E5E9;
|
|
--color-medium-grey: #CDCFD4;
|
|
--color-dark-grey: #7B879D;
|
|
--color-black: #000000;
|
|
--color-white: #FFFFFF;
|
|
--color-process-inactive: #FFAE79;
|
|
--color-signal-green: #009101;
|
|
--color-signal-yellow: #9C7A00;
|
|
--color-signal-red: #9B3B2F;
|
|
--color-font-dark: #414959;
|
|
--color-font-light: #FFFFFF;
|
|
--color-font-hyperlink: #FF6900;
|
|
--color-background-purple: #373C4A;
|
|
--color-background-purple-light: #656C7D;
|
|
--color-transparent: transparent;
|
|
|
|
/* Semantic component tokens: Cards */
|
|
--surface-card: var(--color-light-grey);
|
|
--surface-card-body: var(--color-light-grey);
|
|
--surface-card-segment-neutral: var(--color-light-grey);
|
|
--surface-card-group: var(--color-background-purple-light);
|
|
--surface-card-transparent: var(--color-transparent);
|
|
--surface-card-header-primary: var(--color-darkblue);
|
|
--surface-card-header-alternative: var(--color-darkgreen);
|
|
--surface-card-header-muted: var(--color-darkbrown);
|
|
--divider-card-segment: var(--color-white);
|
|
--text-card-header: var(--color-font-light);
|
|
--text-card-body: var(--color-font-dark);
|
|
--text-card-transparent: var(--color-font-light);
|
|
--layout-card-body-content-justify: flex-start;
|
|
--layout-card-segment-content-gap: var(--spacing-small);
|
|
|
|
/* Semantic component tokens: Interactive elements */
|
|
--surface-form-preview: var(--color-light-grey);
|
|
--surface-control-default: var(--color-white);
|
|
--surface-control-active: var(--color-white);
|
|
--surface-control-inactive: var(--color-white);
|
|
--surface-control-disabled: var(--color-white);
|
|
--surface-button-active: var(--color-medium-grey);
|
|
--surface-button-process: var(--color-font-hyperlink);
|
|
--surface-button-process-inactive: var(--color-process-inactive);
|
|
--surface-button-inactive: var(--color-light-grey);
|
|
--surface-tab-selected: var(--color-dark-grey);
|
|
--surface-tab-unselected: var(--color-white);
|
|
--surface-tab-compact-background: var(--surface-form-preview);
|
|
--surface-tab-compact-unselected: var(--color-medium-grey);
|
|
--surface-input-clear: var(--color-medium-grey);
|
|
--surface-toggle-track: var(--color-medium-grey);
|
|
--surface-toggle-handle: var(--color-darkblue);
|
|
--surface-menu-panel-portal: var(--color-light-grey);
|
|
--surface-help-icon: var(--color-medium-grey);
|
|
--surface-help-panel: var(--color-light-grey);
|
|
--surface-pulldown-panel: var(--color-light-grey);
|
|
--surface-activatable-remove: var(--surface-control-default);
|
|
--surface-slider-track: var(--color-medium-grey);
|
|
--surface-slider-progress: var(--color-dark-grey);
|
|
--surface-slider-thumb: var(--color-dark-grey);
|
|
--surface-checkbox-default: var(--color-white);
|
|
--surface-checkbox-on-context: var(--color-white);
|
|
--surface-radio-default: var(--color-white);
|
|
--layout-pulldown-panel-padding-inline: var(--compact-interaction-padding-horizontal);
|
|
--layout-pulldown-option-padding-inline: var(--compact-interaction-padding-horizontal);
|
|
--layout-pulldown-padding-inline: var(--compact-interaction-padding-horizontal);
|
|
--layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal);
|
|
--layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
|
|
--layout-pulldown-chevron-reserved-space: var(--spacing-large);
|
|
--layout-pulldown-panel-form-mobile-width: 90%;
|
|
--layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
|
|
--layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
|
|
--layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
|
|
--layout-multiselect-pulldown-label-column-width-fallback: max-content;
|
|
--layout-input-label-width: var(--dimension-input-label-width);
|
|
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
|
|
--layout-input-field-max-width: var(--dimension-input-field-max-width);
|
|
--layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
|
|
--layout-search-field-width: var(--dimension-search-field-width);
|
|
--layout-mode-toggle-local-height: var(--compact-interaction-height);
|
|
--layout-mode-toggle-local-width-factor: 3;
|
|
--layout-mode-toggle-width: calc(var(--interaction-height) * 3.5);
|
|
--layout-help-panel-width: calc(var(--interaction-height) * 8);
|
|
--text-control-default: var(--color-font-dark);
|
|
--text-control-disabled: var(--color-dark-grey);
|
|
--text-button-process: var(--color-font-light);
|
|
--text-tab-selected: var(--color-font-light);
|
|
--text-tab-unselected: var(--color-dark-grey);
|
|
--text-toggle-label-active: var(--color-font-light);
|
|
--text-menu-link-portal: var(--color-font-dark);
|
|
--text-help-icon: var(--color-font-dark);
|
|
--text-help-panel: var(--color-font-dark);
|
|
--text-activatable-remove: var(--text-control-default);
|
|
--text-hyperlink: var(--color-font-hyperlink);
|
|
--icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
|
|
--icon-sandwich-line-portal: var(--color-font-dark);
|
|
--icon-radio-mark: var(--color-font-dark);
|
|
|
|
/* Semantic component tokens: Charts */
|
|
--surface-score-bar-track: var(--color-medium-grey);
|
|
--surface-chart-area: var(--color-light-grey);
|
|
--chart-value-positive: var(--color-signal-green);
|
|
--chart-value-neutral: var(--color-signal-yellow);
|
|
--chart-value-negative: var(--color-signal-red);
|
|
--chart-value-primary: var(--color-darkblue);
|
|
--chart-value-reference: var(--color-medium-grey);
|
|
--chart-grid-line: var(--color-medium-grey);
|
|
--chart-axis-line: var(--color-font-dark);
|
|
--chart-marker-line: var(--color-font-dark);
|
|
--chart-median-line: var(--color-font-dark);
|
|
--text-chart-default: var(--color-font-dark);
|
|
--text-score-state-positive: var(--chart-value-positive);
|
|
--layout-score-bar-item-columns: max-content 1fr;
|
|
--layout-score-bar-item-gap: var(--spacing-large);
|
|
--layout-score-bar-item-single-score-columns: max-content 1fr max-content;
|
|
|
|
/* Semantic component tokens: Data display */
|
|
--surface-data-table: var(--color-light-grey);
|
|
--surface-data-table-header: var(--color-light-grey);
|
|
--surface-data-table-cell: var(--color-light-grey);
|
|
--surface-data-table-help-icon: var(--color-medium-grey);
|
|
|
|
--text-data-table-default: var(--color-font-dark);
|
|
--text-data-table-warning: var(--color-signal-yellow);
|
|
--text-data-table-help-icon: var(--color-font-dark);
|
|
|
|
/* Semantic component tokens: Typography */
|
|
--text-typography-preview: var(--color-font-light);
|
|
--layout-preview-align-items: flex-start;
|
|
|
|
/* Semantic pattern tokens: Portal header */
|
|
--surface-portal-header: var(--color-darkblue);
|
|
--surface-portal-header-tab: var(--color-midblue);
|
|
--surface-portal-header-tab-active: var(--color-light-grey);
|
|
--text-portal-header-brand: var(--color-font-light);
|
|
--font-size-portal-header-brand: calc(var(--font-size-brand) * 1.1);
|
|
--text-portal-header-tab: var(--color-font-light);
|
|
--text-portal-header-tab-active: var(--color-font-dark);
|
|
--layout-page-content-inset-inline: var(--card-segment-padding-horizontal);
|
|
--surface-options-row: var(--color-light-grey);
|
|
--surface-options-row-control: var(--surface-control-default);
|
|
--surface-options-row-control-selected: var(--surface-control-active);
|
|
--surface-options-row-input-clear: var(--surface-input-clear);
|
|
--surface-options-row-toggle-track: var(--surface-toggle-track);
|
|
--surface-options-row-toggle-handle: var(--surface-toggle-handle);
|
|
--surface-options-row-help-icon: var(--surface-help-icon);
|
|
--surface-options-row-help-panel: var(--surface-help-panel);
|
|
--divider-options-row-mobile: var(--color-white);
|
|
--text-options-row-default: var(--text-control-default);
|
|
--text-options-row-placeholder: var(--text-control-disabled);
|
|
--text-options-row-help-icon: var(--color-font-light);
|
|
--text-options-row-help-panel: var(--text-help-panel);
|
|
--text-options-row-description: var(--color-font-light);
|
|
--layout-options-row-margin-top: var(--spacing-small);
|
|
--layout-options-row-main-gap: var(--spacing-large);
|
|
--layout-options-row-group-gap: var(--spacing-small);
|
|
--layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width);
|
|
--layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width);
|
|
--layout-object-card-min-width: var(--dimension-object-card-min-width);
|
|
--layout-object-card-max-width: var(--dimension-object-card-max-width);
|
|
--layout-object-card-height: var(--dimension-object-card-height);
|
|
--layout-object-card-content-grow: var(--dimension-object-card-content-grow);
|
|
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
|
|
--layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
|
|
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
|
|
--layout-notifications-card-flex-basis: var(--layout-object-card-min-width);
|
|
--layout-notifications-card-min-width: var(--layout-object-card-min-width);
|
|
--layout-notifications-card-max-width: var(--layout-object-card-max-width);
|
|
--layout-notifications-text-segment-fixed-height: 150px;
|
|
--layout-object-group-card-min-width: var(--dimension-object-group-card-min-width);
|
|
--layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
|
|
--surface-object-card-lower-segment: var(--color-white);
|
|
--text-company-card-data-negative: var(--chart-value-negative);
|
|
--text-company-card-moat-neutral: var(--chart-value-neutral);
|
|
--layout-company-card-analysis-gap-after-moat: var(--spacing-large);
|
|
--surface-navigation-card: var(--color-white);
|
|
--surface-navigation-card-body: var(--color-white);
|
|
--surface-content-block-card-title: var(--color-light-grey);
|
|
--surface-content-block-card-content: var(--color-white);
|
|
--layout-content-cards-group-gap: var(--spacing-small);
|
|
--surface-card-list-drawer: var(--color-background-purple);
|
|
--text-content-block-card-title: var(--color-font-dark);
|
|
--text-content-block-card-content: var(--color-font-dark);
|
|
--text-card-list-drawer: var(--color-font-dark);
|
|
--layout-card-list-drawer-width: var(--dimension-card-list-drawer-width);
|
|
--surface-vsf-drawer-object-card-header: var(--color-darkblue);
|
|
--surface-vsf-drawer-object-card-body: var(--color-darkblue);
|
|
--text-vsf-drawer-object-card-heading: var(--color-font-light);
|
|
--text-vsf-drawer-object-card-body: var(--color-font-light);
|
|
--layout-vsf-drawer-object-card-column-gap: var(--spacing-large);
|
|
--text-vsf-list-card-limit-note: var(--color-signal-red);
|
|
--layout-vsf-list-card-summary-offset-block-start: var(--layout-company-card-analysis-gap-after-moat);
|
|
--layout-vsf-list-card-delete-confirmation-target-max-width: var(--layout-object-group-card-max-width);
|
|
--surface-text-layout-preview: var(--color-light-grey);
|
|
--layout-text-layout-column-gap: var(--spacing-large);
|
|
--layout-text-layout-two-column-columns: repeat(2, minmax(0, 1fr));
|
|
--layout-text-layout-three-column-columns: repeat(3, minmax(0, 1fr));
|
|
--text-align-text-layout-column-left: left;
|
|
--text-align-text-layout-column-center: center;
|
|
--text-align-text-layout-column-right: right;
|
|
--surface-delete-confirmation-overlay: var(--color-light-grey);
|
|
--surface-delete-confirmation-target-dim-overlay: var(--color-black);
|
|
--text-delete-confirmation-overlay: var(--color-font-dark);
|
|
--layout-delete-confirmation-target-max-width: 35rem;
|
|
--layout-delete-confirmation-overlay-width-factor: 0.8;
|
|
--layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
|
|
--layout-delete-confirmation-content-gap: var(--spacing-small);
|
|
--layout-delete-confirmation-actions-gap: var(--spacing-small);
|
|
--layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
|
|
--layout-delete-confirmation-label-width: var(--dimension-input-label-width);
|
|
--layout-delete-confirmation-target-dim-opacity: 0.5;
|
|
--layer-delete-confirmation-overlay: 50;
|
|
|
|
/* Typography */
|
|
--font-family-base: "Open Sans", sans-serif;
|
|
--font-size-base: 1rem;
|
|
--font-size-small: 0.8rem;
|
|
--font-size-brand: 1.6rem;
|
|
--font-size-h1: 1.5rem;
|
|
--font-size-h2: 1.25rem;
|
|
--font-weight-regular: 400;
|
|
--font-weight-semibold: 600;
|
|
--line-height-base: 1.5;
|
|
|
|
/* Spacing */
|
|
--spacing-small: 0.3rem;
|
|
--spacing-large: 1rem;
|
|
--card-segment-padding-vertical: 0.75rem;
|
|
--card-segment-padding-horizontal: 1rem;
|
|
--card-segment-padding-horizontal-mobile: 0.5rem;
|
|
--interaction-padding-vertical: 0.25rem;
|
|
--interaction-padding-horizontal: 1rem;
|
|
|
|
/* Dimensions */
|
|
--interaction-height: 2rem;
|
|
--compact-interaction-height: 1.5rem;
|
|
--compact-interaction-padding-vertical: 0.15rem;
|
|
--compact-interaction-padding-horizontal: 0.75rem;
|
|
--small-interaction-element-size: 1.25rem;
|
|
--disabled-opacity: 0.7;
|
|
--sandwich-line-width: 1.25rem;
|
|
--sandwich-line-height: 4px;
|
|
--sandwich-line-gap: 3px;
|
|
--score-bar-height: 1rem;
|
|
--score-marker-width: 6px;
|
|
--score-marker-height: calc(var(--score-bar-height) + 2px);
|
|
--chart-height-bar: 24rem;
|
|
--chart-height-line: 18rem;
|
|
--chart-axis-label-column-width: 4rem;
|
|
--chart-axis-label-gap: 5px;
|
|
--chart-grid-line-width: 1px;
|
|
--chart-line-width: 2px;
|
|
--chart-label-position-default: 50%;
|
|
--dimension-object-card-min-width: 395px;
|
|
--dimension-object-card-max-width: 600px;
|
|
--dimension-object-card-height: 600px;
|
|
--dimension-object-card-content-grow: 1;
|
|
--dimension-object-card-mobile-width: 100%;
|
|
--dimension-object-card-mobile-height: auto;
|
|
--dimension-object-card-desktop-breakpoint: 768px;
|
|
--dimension-object-group-card-min-width: 550px;
|
|
--dimension-object-group-card-max-width: 800px;
|
|
--dimension-input-label-width: 9rem;
|
|
--dimension-input-field-desktop-width: 400px;
|
|
--dimension-input-field-max-width: 600px;
|
|
--dimension-search-field-width: 15.3rem;
|
|
--dimension-layer-pulldown-panel: 40;
|
|
--dimension-multiselect-pulldown-panel-desktop-width: 500px;
|
|
--dimension-multiselect-pulldown-panel-mobile-width: 80vw;
|
|
--dimension-options-row-mode-toggle-width: 7rem;
|
|
--dimension-options-row-help-panel-width: 16rem;
|
|
--dimension-card-list-drawer-width: 40%;
|
|
--dimension-slider-track-height: 6px;
|
|
--dimension-slider-thumb-size: 22px;
|
|
--dimension-slider-thumb-offset-top: -8px;
|
|
--radius-slider-track: 999px;
|
|
|
|
/* Radius */
|
|
--radius-card: 8px;
|
|
--radius-graph-bar: 2px;
|
|
--radius-interaction: 4px;
|
|
|
|
/* Shadows */
|
|
--shadow-none: none;
|
|
--shadow-overlay: 0 10px 24px rgba(0, 0, 0, 0.22);
|
|
--shadow-interaction-inset: none;
|
|
|
|
/* Borders */
|
|
--border-none: none;
|
|
--border-control: none;
|
|
|
|
/* Runtime defaults */
|
|
--layout-object-card-shared-width: auto;
|
|
--sg-slider-progress: 0%;
|
|
--chart-label-position: var(--chart-label-position-default);
|
|
}
|