mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
299 lines
15 KiB
SCSS
299 lines
15 KiB
SCSS
:root {
|
|
|
|
--red-ui-primary-font: #{$primary-font};
|
|
--red-ui-primary-font-size: #{$primary-font-size};
|
|
--red-ui-monospace-font: #{$monospace-font};
|
|
|
|
--red-ui-primary-background: #{$primary-background};
|
|
|
|
--red-ui-secondary-background: #{$secondary-background};
|
|
--red-ui-secondary-background-selected: #{$secondary-background-selected};
|
|
--red-ui-secondary-background-inactive: #{$secondary-background-inactive};
|
|
--red-ui-secondary-background-hover: #{$secondary-background-hover};
|
|
--red-ui-secondary-background-disabled: #{$secondary-background-disabled};
|
|
|
|
--red-ui-tertiary-background: #{$tertiary-background};
|
|
|
|
--red-ui-shadow: #{$shadow};
|
|
|
|
// Main body text
|
|
--red-ui-primary-text-color: #{$primary-text-color};
|
|
// UI control label text
|
|
--red-ui-secondary-text-color: #{$secondary-text-color};
|
|
--red-ui-secondary-text-color-focus: #{$secondary-text-color-focus};
|
|
--red-ui-secondary-text-color-hover: #{$secondary-text-color-hover};
|
|
--red-ui-secondary-text-color-active: #{$secondary-text-color-active};
|
|
--red-ui-secondary-text-color-selected: #{$secondary-text-color-selected};
|
|
--red-ui-secondary-text-color-inactive: #{$secondary-text-color-inactive};
|
|
--red-ui-secondary-text-color-disabled: #{$secondary-text-color-disabled};
|
|
--red-ui-secondary-text-color-disabled-active: #{$secondary-text-color-disabled-active};
|
|
--red-ui-secondary-text-color-disabled-inactive: #{$secondary-text-color-disabled-inactive};
|
|
|
|
// Sub label text
|
|
--red-ui-tertiary-text-color: #{$tertiary-text-color};
|
|
// Heading text
|
|
--red-ui-header-text-color: #{$header-text-color};
|
|
|
|
--red-ui-text-color-error: #{$text-color-error};
|
|
--red-ui-text-color-warning: #{$text-color-warning};
|
|
--red-ui-text-color-success: #{$text-color-success};
|
|
--red-ui-text-color-code: #{$text-color-code};
|
|
--red-ui-text-color-link: #{$text-color-link};
|
|
|
|
|
|
--red-ui-primary-border-color: #{$primary-border-color};
|
|
--red-ui-secondary-border-color: #{$secondary-border-color};
|
|
--red-ui-tertiary-border-color: #{$tertiary-border-color};
|
|
|
|
--red-ui-border-color-error: #{$border-color-error};
|
|
--red-ui-border-color-warning: #{$border-color-warning};
|
|
--red-ui-border-color-success: #{$border-color-success};
|
|
|
|
--red-ui-form-background: #{$form-background};
|
|
--red-ui-form-placeholder-color: #{$form-placeholder-color};
|
|
--red-ui-form-text-color: #{$form-text-color};
|
|
--red-ui-form-text-color-disabled: #{$form-text-color-disabled};
|
|
--red-ui-form-input-focus-color: #{$form-input-focus-color};
|
|
--red-ui-form-input-border-color: #{$form-input-border-color};
|
|
--red-ui-form-input-border-selected-color: #{$form-input-border-selected-color};
|
|
--red-ui-form-input-border-error-color: #{$form-input-border-error-color};
|
|
--red-ui-form-input-background: #{$form-input-background};
|
|
--red-ui-form-input-background-disabled: #{$form-input-background-disabled};
|
|
--red-ui-form-button-background: #{$form-button-background};
|
|
|
|
--red-ui-form-tips-background: #{$form-tips-background};
|
|
|
|
|
|
--red-ui-text-editor-color: #{$text-editor-color};
|
|
--red-ui-text-editor-background: #{$text-editor-background};
|
|
--red-ui-text-editor-color-disabled: #{$text-editor-color-disabled};
|
|
--red-ui-text-editor-background-disabled: #{$text-editor-background-disabled};
|
|
--red-ui-text-editor-gutter-background: #{$text-editor-gutter-background};
|
|
--red-ui-text-editor-gutter-color: #{$text-editor-gutter-color};
|
|
--red-ui-text-editor-gutter-active-line-background: #{$text-editor-gutter-active-line-background};
|
|
--red-ui-text-editor-active-line-background: #{$text-editor-active-line-background};
|
|
--red-ui-text-editor-selection-background: #{$text-editor-selection-background};
|
|
|
|
--red-ui-event-log-background: #{$event-log-background};
|
|
--red-ui-event-log-color: #{$event-log-color};
|
|
--red-ui-event-log-active-line-background: #{$event-log-active-line-background};
|
|
--red-ui-event-log-selection-background: #{$event-log-selection-background};
|
|
|
|
|
|
|
|
|
|
--red-ui-list-item-color: #{$list-item-color};
|
|
--red-ui-list-item-secondary-color: #{$list-item-secondary-color};
|
|
--red-ui-list-item-background: #{$list-item-background};
|
|
--red-ui-list-item-background-disabled: #{$list-item-background-disabled};
|
|
--red-ui-list-item-background-hover: #{$list-item-background-hover};
|
|
--red-ui-list-item-background-selected: #{$list-item-background-selected};
|
|
--red-ui-list-item-border-selected: #{$list-item-border-selected};
|
|
|
|
--red-ui-tab-text-color-active: #{$tab-text-color-active};
|
|
--red-ui-tab-text-color-inactive: #{$tab-text-color-inactive};
|
|
--red-ui-tab-text-color-disabled-active: #{$tab-text-color-disabled-active};
|
|
--red-ui-tab-text-color-disabled-inactive: #{$tab-text-color-disabled-inactive};
|
|
|
|
--red-ui-tab-badge-color: #{$tab-badge-color};
|
|
--red-ui-tab-background: #{$tab-background};
|
|
--red-ui-tab-background-active: #{$tab-background-active};
|
|
--red-ui-tab-background-active-alpha: #{$tab-background-active-alpha};
|
|
--red-ui-tab-background-selected: #{$tab-background-selected};
|
|
--red-ui-tab-background-selected-alpha: #{$tab-background-selected-alpha};
|
|
--red-ui-tab-background-inactive: #{$tab-background-inactive};
|
|
--red-ui-tab-background-inactive-alpha: #{$tab-background-inactive-alpha};
|
|
--red-ui-tab-background-hover: #{$tab-background-hover};
|
|
--red-ui-tab-background-hover-alpha: #{$tab-background-hover-alpha};
|
|
|
|
--red-ui-palette-header-background: #{$palette-header-background};
|
|
--red-ui-palette-header-color: #{$palette-header-color};
|
|
--red-ui-palette-content-background: #{$palette-content-background};
|
|
|
|
|
|
--red-ui-workspace-button-background: #{$workspace-button-background};
|
|
--red-ui-workspace-button-background-hover: #{$workspace-button-background-hover};
|
|
--red-ui-workspace-button-background-active: #{$workspace-button-background-active};
|
|
|
|
--red-ui-workspace-button-color: #{$workspace-button-color};
|
|
--red-ui-workspace-button-color-disabled: #{$workspace-button-color-disabled};
|
|
--red-ui-workspace-button-color-focus: #{$workspace-button-color-focus};
|
|
--red-ui-workspace-button-color-hover: #{$workspace-button-color-hover};
|
|
--red-ui-workspace-button-color-active: #{$workspace-button-color-active};
|
|
--red-ui-workspace-button-color-selected: #{$workspace-button-color-selected};
|
|
|
|
--red-ui-workspace-button-color-primary: #{$workspace-button-color-primary};
|
|
--red-ui-workspace-button-background-primary: #{$workspace-button-background-primary};
|
|
--red-ui-workspace-button-background-primary-hover: #{$workspace-button-background-primary-hover};
|
|
|
|
--red-ui-workspace-button-color-focus-outline: #{$workspace-button-color-focus-outline};
|
|
|
|
--red-ui-shade-color: #{$shade-color};
|
|
|
|
--red-ui-popover-background: #{$popover-background};
|
|
--red-ui-popover-border: #{$popover-border};
|
|
--red-ui-popover-color: #{$popover-color};
|
|
--red-ui-popover-button-border-color: #{$popover-button-border-color};
|
|
--red-ui-popover-button-border-color-hover: #{$popover-button-border-color-hover};
|
|
|
|
|
|
|
|
--red-ui-diff-text-header-color: #{$diff-text-header-color};
|
|
--red-ui-diff-text-header-background: #{$diff-text-header-background};
|
|
--red-ui-diff-state-color: #{$diff-state-color};
|
|
--red-ui-diff-state-prefix-color: #{$diff-state-prefix-color};
|
|
--red-ui-diff-state-added: #{$diff-state-added};
|
|
--red-ui-diff-state-deleted: #{$diff-state-deleted};
|
|
--red-ui-diff-state-changed: #{$diff-state-changed};
|
|
--red-ui-diff-state-changed-background: #{$diff-state-changed-background};
|
|
--red-ui-diff-state-unchanged: #{$diff-state-unchanged};
|
|
--red-ui-diff-state-unchanged-background: #{$diff-state-unchanged-background};
|
|
|
|
--red-ui-diff-state-conflicted: #{$diff-state-conflicted};
|
|
--red-ui-diff-state-moved: #{$diff-state-moved};
|
|
--red-ui-diff-state-conflict: #{$diff-state-conflict};
|
|
--red-ui-diff-state-conflict-background: #{$diff-state-conflict-background};
|
|
|
|
--red-ui-diff-state-added-background: #{$diff-state-added-background};
|
|
--red-ui-diff-state-added-border: #{$diff-state-added-border};
|
|
--red-ui-diff-state-added-header-background: #{$diff-state-added-header-background};
|
|
--red-ui-diff-state-added-header-border: #{$diff-state-added-header-border};
|
|
|
|
--red-ui-diff-state-deleted-background: #{$diff-state-deleted-background};
|
|
--red-ui-diff-state-deleted-border: #{$diff-state-deleted-border};
|
|
--red-ui-diff-state-deleted-header-background: #{$diff-state-deleted-header-background};
|
|
--red-ui-diff-state-deleted-header-border: #{$diff-state-deleted-header-border};
|
|
|
|
--red-ui-diff-merge-header-color: #{$diff-merge-header-color};
|
|
--red-ui-diff-merge-header-background: #{$diff-merge-header-background};
|
|
--red-ui-diff-merge-header-border-color: #{$diff-merge-header-border-color};
|
|
|
|
--red-ui-menuBackground: #{$menuBackground};
|
|
--red-ui-menuDivider: #{$menuDivider};
|
|
--red-ui-menuColor: #{$menuColor};
|
|
--red-ui-menuActiveColor: #{$menuActiveColor};
|
|
--red-ui-menuActiveBackground: #{$menuActiveBackground};
|
|
--red-ui-menuDisabledColor: #{$menuDisabledColor};
|
|
--red-ui-menuHoverColor: #{$menuHoverColor};
|
|
--red-ui-menuHoverBackground: #{$menuHoverBackground};
|
|
--red-ui-menuCaret: #{$menuCaret};
|
|
|
|
--red-ui-view-navigator-background: #{$view-navigator-background};
|
|
|
|
--red-ui-view-lasso-stroke: #{$view-lasso-stroke};
|
|
--red-ui-view-lasso-fill: #{$view-lasso-fill};
|
|
|
|
--red-ui-view-background: #{$view-background};
|
|
--red-ui-view-grid-color: #{$view-grid-color};
|
|
|
|
--red-ui-node-label-color: #{$node-label-color};
|
|
--red-ui-node-port-label-color: #{$node-port-label-color};
|
|
--red-ui-node-border: #{$node-border};
|
|
--red-ui-node-border-unknown: #{$node-border-unknown};
|
|
--red-ui-node-border-placeholder: #{$node-border-placeholder};
|
|
--red-ui-node-background-placeholder: #{$node-background-placeholder};
|
|
|
|
--red-ui-node-port-background: #{$node-port-background};
|
|
--red-ui-node-port-background-hover: #{$node-port-background-hover};
|
|
--red-ui-node-icon-color: #{$node-icon-color};
|
|
--red-ui-node-icon-background-color: #{$node-icon-background-color};
|
|
--red-ui-node-icon-background-color-fill: #{$node-icon-background-color-fill};
|
|
--red-ui-node-icon-background-color-opacity: #{$node-icon-background-color-opacity};
|
|
--red-ui-node-icon-border-color: #{$node-icon-border-color};
|
|
--red-ui-node-icon-border-color-opacity: #{$node-icon-border-color-opacity};
|
|
|
|
--red-ui-node-config-background: #{$node-config-background};
|
|
--red-ui-node-config-icon-container-disabled: #{$node-config-icon-container-disabled};
|
|
|
|
--red-ui-node-link-port-background: #{$node-link-port-background};
|
|
|
|
--red-ui-node-status-error-border: #{$node-status-error-border};
|
|
--red-ui-node-status-error-background: #{$node-status-error-background};
|
|
--red-ui-node-status-changed-border: #{$node-status-changed-border};
|
|
--red-ui-node-status-changed-background: #{$node-status-changed-background};
|
|
|
|
@each $current-color in red green yellow blue grey gray {
|
|
--red-ui-node-status-colors-#{"" + $current-color}: #{map-get($node-status-colors, $current-color)};
|
|
}
|
|
|
|
|
|
--red-ui-node-selected-color: #{$node-selected-color};
|
|
--red-ui-port-selected-color: #{$port-selected-color};
|
|
|
|
--red-ui-link-color: #{$link-color};
|
|
--red-ui-link-link-color: #{$link-link-color};
|
|
--red-ui-link-disabled-color: #{$link-disabled-color};
|
|
--red-ui-link-link-active-color: #{$link-link-active-color};
|
|
--red-ui-link-unknown-color: #{$link-unknown-color};
|
|
|
|
--red-ui-clipboard-textarea-background: #{$clipboard-textarea-background};
|
|
|
|
|
|
--red-ui-deploy-button-color: #{$deploy-button-color};
|
|
--red-ui-deploy-button-color-active: #{$deploy-button-color-active};
|
|
--red-ui-deploy-button-color-disabled: #{$deploy-button-color-disabled};
|
|
--red-ui-deploy-button-background: #{$deploy-button-background};
|
|
--red-ui-deploy-button-background-hover: #{$deploy-button-background-hover};
|
|
--red-ui-deploy-button-background-active: #{$deploy-button-background-active};
|
|
--red-ui-deploy-button-background-disabled: #{$deploy-button-background-disabled};
|
|
--red-ui-deploy-button-background-disabled-hover: #{$deploy-button-background-disabled-hover};
|
|
|
|
|
|
--red-ui-header-background: #{$header-background};
|
|
--red-ui-header-button-background-active: #{$header-button-background-active};
|
|
--red-ui-header-menu-color: #{$header-menu-color};
|
|
--red-ui-header-menu-color-disabled: #{$header-menu-color-disabled};
|
|
--red-ui-header-menu-heading-color: #{$header-menu-heading-color};
|
|
--red-ui-header-menu-sublabel-color: #{$header-menu-sublabel-color};
|
|
--red-ui-header-menu-background: #{$header-menu-background};
|
|
--red-ui-header-menu-item-hover: #{$header-menu-item-hover};
|
|
--red-ui-header-menu-item-border-active: #{$header-menu-item-border-active};
|
|
--red-ui-headerMenuItemDivider: #{$headerMenuItemDivider};
|
|
--red-ui-headerMenuCaret: #{$headerMenuCaret};
|
|
|
|
--red-ui-vcCommitShaColor: #{$vcCommitShaColor};
|
|
|
|
--red-ui-dnd-background: #{$dnd-background};
|
|
--red-ui-dnd-color: #{$dnd-color};
|
|
|
|
--red-ui-notification-border-default: #{$notification-border-default};
|
|
--red-ui-notification-border-success: #{$notification-border-success};
|
|
--red-ui-notification-border-warning: #{$notification-border-warning};
|
|
--red-ui-notification-border-error: #{$notification-border-error};
|
|
|
|
--red-ui-debug-message-background: #{$debug-message-background};
|
|
--red-ui-debug-message-background-hover: #{$debug-message-background-hover};
|
|
|
|
--red-ui-debug-message-text-color: #{$debug-message-text-color};
|
|
--red-ui-debug-message-text-color-meta: #{$debug-message-text-color-meta};
|
|
--red-ui-debug-message-text-color-object-key: #{$debug-message-text-color-object-key};
|
|
--red-ui-debug-message-text-color-msg-type-other: #{$debug-message-text-color-msg-type-other};
|
|
--red-ui-debug-message-text-color-msg-type-string: #{$debug-message-text-color-msg-type-string};
|
|
--red-ui-debug-message-text-color-msg-type-null: #{$debug-message-text-color-msg-type-null};
|
|
--red-ui-debug-message-text-color-msg-type-meta: #{$debug-message-text-color-msg-type-meta};
|
|
--red-ui-debug-message-text-color-msg-type-number: #{$debug-message-text-color-msg-type-number};
|
|
|
|
--red-ui-debug-message-border: #{$debug-message-border};
|
|
--red-ui-debug-message-border-hover: #{$debug-message-border-hover};
|
|
--red-ui-debug-message-border-warning: #{$debug-message-border-warning};
|
|
--red-ui-debug-message-border-error: #{$debug-message-border-error};
|
|
|
|
--red-ui-group-default-fill: #{$group-default-fill};
|
|
--red-ui-group-default-fill-opacity: #{$group-default-fill-opacity};
|
|
--red-ui-group-default-stroke: #{$group-default-stroke};
|
|
--red-ui-group-default-stroke-opacity: #{$group-default-stroke-opacity};
|
|
--red-ui-group-default-label-color: #{$group-default-label-color};
|
|
|
|
--red-ui-tourGuide-border: #{$tourGuide-border};
|
|
--red-ui-tourGuide-heading-color: #{$tourGuide-heading-color};
|
|
|
|
--red-ui-grip-color: #{$grip-color};
|
|
|
|
--red-ui-icons-flow-color: #{$icons-flow-color};
|
|
|
|
--red-ui-spinner-color: #{$spinner-color};
|
|
|
|
--red-ui-tab-icon-color: #{$tab-icon-color};
|
|
|
|
}
|