Platform Styles
Overview
Available since io.Connect Browser 4.0
io.Connect Browser and all its default system web apps (Home App, Workspaces App, Launchpad, and more) use the io.Connect styles provided by the @interopio/theme package.
The following sections describe the CSS variables which you can use to override the default io.Connect theme styles.
Home App
CSS variables for overriding the Home App styles.
General
| Variable | Description |
|---|---|
--home-app-background-color |
Background color for the Home App. |
--home-app-logo-height |
Height of the Home App logo. |
--home-app-logo-margin |
Margin below the Home App logo. |
--home-app-logo-width |
Width of the Home App logo. |
--home-notifications-badge-z-index |
Z-index for the Home App notification badge. |
--home-overlay-z-index |
Z-index for the Home App overlays. |
--home-system-buttons-gap |
Gap between the Home App system buttons. |
--home-system-buttons-padding |
Padding for the Home App system buttons. |
--home-system-menu-width |
Width for the Home App system menu. |
Setup Flow
| Variable | Description |
|---|---|
--home-setup-page-background |
Background color for the login page and the system loader. |
--home-setup-page-card-description-margin |
Margin for the setup page, login page, and error page card descriptions. |
--home-setup-page-card-max-width |
Maximum width for the setup page and error page cards. |
--home-setup-page-card-title-margin |
Margin for the setup page and error page card titles. |
--home-setup-page-container-padding |
Padding for the setup page and error page containers. |
--home-setup-page-error-help-center-info-margin |
Margin for the help center info paragraph shown in the error page. |
--home-setup-page-error-message-margin |
Margin before the error message on the error page. |
--home-setup-page-error-title-margin |
Margin for the title on the error page. |
--home-setup-page-error-title-size |
Font size for the title on the error page. |
--home-setup-page-gap |
Gap between sections or elements on the setup page, error page, and login page. |
--home-setup-page-login-container-margin |
Margin for the login page and system loader containers. |
--home-setup-page-login-container-padding |
Padding for the login page and system loader containers. |
--home-setup-page-login-container-radius |
Border radius for the login page and system loader containers. |
--home-setup-page-login-container-width |
Fixed width for the login page and system loader containers. |
--home-setup-page-login-input-gap |
Gap between login input fields. |
--home-setup-page-login-input-width |
Width of login input fields. |
--home-setup-page-login-title-margin |
Margin for the login title. |
--home-setup-steps-button-min-width |
Minimum width for the action buttons in the setup steps list. |
--home-setup-steps-list-bullet-gap |
Gap between the bullet and the bullet text in the setup steps list. |
--home-setup-steps-list-gap |
Vertical gap between items in the setup steps list. |
--home-setup-steps-list-icon-border-radius |
Border radius for circular icons in the setup steps list. |
--home-setup-steps-list-icon-critical-background |
Background color for critical status icons in the setup steps list. |
--home-setup-steps-list-icon-critical-color |
Color for critical status icons in the setup steps list. |
--home-setup-steps-list-icon-size |
Size of the status icons in the setup steps list. |
--home-setup-steps-list-icon-success-background |
Background color for success status icons in the setup steps list. |
--home-setup-steps-list-icon-success-color |
Color for success status icons in the setup steps list. |
--home-setup-steps-list-icon-warning-background |
Background color for warning status icons in the setup steps list. |
--home-setup-steps-list-icon-warning-color |
Color for warning status icons in the setup steps list. |
--home-setup-steps-list-item-color-active |
Color for active list items in the setup steps list. |
System Loader
| Variable | Description |
|---|---|
--home-loader-text-margin |
Margin around the loader text. |
Panel Wrapper
| Variable | Description |
|---|---|
--home-panel-wrapper-height |
Full height of the Home App panel wrapper minus its top offset. |
--home-panel-wrapper-left-radius |
Border radius for when the panel wrapper is positioned on the left side of the Home App. |
--home-panel-wrapper-right-radius |
Border radius for when the panel wrapper is positioned on the right side of the Home App. |
--home-panel-wrapper-shadow |
Shadow styling for the Home App panel wrapper. |
--home-panel-wrapper-shadow-overflow-clip-margin |
Margin around the Home App panel wrapper to ensure that the panel shadow won't be clipped. |
--home-panel-wrapper-top-position |
Top offset position of the Home App panel wrapper (below the Workspace header). |
--home-panel-wrapper-width |
Width of the Home App panel wrapper. |
--home-panel-wrapper-z-index |
Z-index to ensure that the Home App panel wrapper sits correctly in the UI stacking context. |
Context Menu
| Variable | Description |
|---|---|
--home-context-menu-background |
Background color for the context menus. |
--home-context-menu-border |
Context menu border. |
--home-context-menu-padding |
Padding for the context menus. |
--home-context-menu-radius |
Border radius for rounded corners of the context menus. |
--home-context-menu-separator-color |
Color of the separator between context menu items. |
--home-context-menu-separator-margin |
Margin around the context menu separator. |
--home-context-menu-separator-size |
Thickness of the context menu separator. |
--home-context-menu-shadow |
Drop shadow for the context menus. |
--home-context-menu-width |
Width for the context menus. |
--home-context-menu-z-index |
Z-index to ensure that the context menus appear above most content. |
Workspaces
CSS variables for overriding the Workspaces App styles.
General
| Variable | Description |
|---|---|
--workspace-general-background |
Background for the Workspaces App. |
--workspace-general-border |
Border for the Workspaces App. |
--workspace-general-font-family |
Font family for the Workspaces App. |
--workspace-general-font-size |
Font size for the Workspaces App. |
Splitters & Drop Target
| Variable | Description |
|---|---|
--workspace-drop-tab-placeholder |
Width of the tab placeholder for the Workspace drop target. |
--workspace-drop-target-color |
Color for the Workspace drop target. |
--workspace-drop-target-opacity |
Opacity for the Workspace drop target. |
--workspace-splitter-color-active |
Color for the Workspace splitters when active. |
--workspace-splitter-color-hover |
Color for the Workspace splitters when hovered. |
--workspace-splitter-color-inactive |
Color for the Workspace splitters when inactive. |
--workspace-splitter-cursor-horizontal |
Cursor style for horizontal Workspace splitters. |
--workspace-splitter-cursor-vertical |
Cursor style for vertical Workspace splitters. |
Header & System Buttons
| Variable | Description |
|---|---|
--workspace-header-background-color |
Background color for the Workspace header. |
--workspace-header-bottom-border |
Bottom border for the Workspace header. |
--workspace-header-gap |
Gap between the Workspace header elements (logo, tabs, controls). |
--workspace-header-height |
Height for the Workspace header. |
--workspace-header-move-area-min-width |
Minimum width for the Workspace move area. |
--workspace-header-system-controls-background-active |
Background for the Workspace header system buttons when active. |
--workspace-header-system-controls-background-close |
Background for the "Close" system button. |
--workspace-header-system-controls-gap |
Gap between the Workspace header system buttons. |
--workspace-header-system-controls-height |
Height for the Workspace header system buttons. |
--workspace-header-system-controls-padding |
Padding for the Workspace header system buttons. |
--workspace-header-system-controls-text-close |
Text color for the "Close" system button. |
--workspace-header-system-controls-radius |
Border radius for the Workspace header system buttons. |
--workspace-header-system-controls-width |
Width for the Workspace header system buttons. |
--workspace-header-tabs-add-margin |
Margin for the "Add Workspace" button. |
--workspace-header-tabs-padding |
Padding for the Workspace tabs in the Workspace header. |
--workspace-header-tabs-start-point |
Offset before the first Workspace tab. |
--workspace-pin-icon |
Default SVG icon for pinned Workspaces. |
--workspace-pin-icon-size |
Size (width and height) for the icons of pinned Workspaces. |
Workspace Tab
| Variable | Description |
|---|---|
--workspace-tab-background-active |
Background color for the Workspace tabs when active. |
--workspace-tab-background-hover |
Background color for the Workspace tabs when hovered. |
--workspace-tab-bottom-radius |
Border radius for the bottom corners of the Workspace tabs. |
--workspace-tab-bottom-corners |
Set to block to display the additional rounded corners at the bottom of the active Workspace tab. Set to none to remove the additional rounded corners. |
--workspace-tab-gap |
Gap between Workspace tabs. |
--workspace-tab-margin |
Margin for the Workspace tabs. |
--workspace-tab-max-width |
Maximum width for the Workspace tabs. |
--workspace-tab-min-width |
Minimum width for the Workspace tabs. |
--workspace-tab-padding |
Padding for the Workspace tabs. |
--workspace-tab-padding-active |
Padding for the Workspace tabs when active. |
--workspace-tab-radius |
Border radius for the Workspace tabs. |
--workspace-tab-separator-color |
Color for the separator between the Workspace tabs and the "Add Workspace" button. |
--workspace-tab-separator-height |
Height for the separator between the Workspace tabs and the "Add Workspace" button. |
--workspace-tab-text-mask |
Used for text fade-out effect on text overflow in the Workspace tabs. |
--workspace-tab-title-color |
Color for the Workspace tab title. |
--workspace-tab-title-color-active |
Color for the Workspace tab title when active. |
--workspace-tab-title-margin |
Margin for the Workspace tab title. |
--workspace-tab-width |
Width for the Workspace tabs. |
--workspace-tab-width-hide-button-close |
The "Close" button of the Workspace tab will be hidden when the Workspace tab shrinks to the specified width. |
--workspace-tab-width-hide-button-lock |
The "Lock" button of the Workspace tab will be hidden when the Workspace tab shrinks to the specified width. |
--workspace-tab-width-hide-title |
The title of the Workspace tab will be hidden when the Workspace tab shrinks to the specified width. |
Workspace Windows
| Variable | Description |
|---|---|
--workspace-channel-icon-color-black |
Text color for the Channel Selector icon to be used with light icon backgrounds to achieve higher contrast ration. |
--workspace-channel-icon-color-default |
Default color for the Channel Selector icon in the Workspace window tabs. |
--workspace-channel-icon-color-hover |
Color for the Channel Selector icon in the Workspace window tabs when hovered. |
--workspace-channel-icon-color-white |
Text color for the Channel Selector icon to be used with dark icon backgrounds to achieve higher contrast ration. |
--workspace-channel-icon-radius |
Border radius for the corners of the Channel Selector icon in the Workspace window tabs. |
--workspace-channel-icon-size |
Size (width and height) for the Channel Selector icon in the Workspace window tabs. |
--workspace-window-controls-gap |
Gap between the buttons in the Workspace window group ("Extract", "Maximize"/"Restore"). |
--workspace-window-controls-padding |
Padding for the container of the "Extract" and "Maximize"/"Restore" buttons in the Workspace window group. |
--workspace-window-header-gap |
Gap between the elements in the headers of Workspace window groups (tabs, "Add App" button, move area, system buttons). |
--workspace-window-header-height |
Height for the headers of Workspace window groups. |
--workspace-window-header-tabs-start-point |
Offset for the first tab in the headers of Workspace window groups. |
--workspace-window-tab-background |
Background for the tabs of Workspace windows. |
--workspace-window-tab-background-active |
Background for the tabs of Workspace windows when active. |
--workspace-window-tab-gap |
Gap between the items in the Workspace window tabs. |
--workspace-window-tab-margin |
Margin for the Workspace window tabs. |
--workspace-window-tab-max-width |
Maximum width for the Workspace window tabs. |
--workspace-window-tab-min-width |
Minimum width for the Workspace window tabs. |
--workspace-window-tab-padding |
Padding for the Workspace window tabs. |
--workspace-window-tab-radius |
Border radius for the tab corners of Workspace windows. |
--workspace-window-tab-title-color |
Color for the titles of Workspace window tabs. |
--workspace-window-tab-title-color-active |
Color for the titles of Workspace window tabs when active. |
--workspace-window-tab-title-margin |
Margin for the titles of Workspace window tabs. |
--workspace-window-tab-width |
Width for the Workspace window tabs. |
Logo
| Variable | Description |
|---|---|
--workspace-logo-icon |
Default icon for the logo of the Workspaces App. |
--workspace-logo-icon-color-default |
Default color for the Workspaces App logo icon. |
--workspace-logo-icon-color-hover |
Color for the Workspaces App logo icon when hovered. |
--workspace-logo-icon-size |
Size (width and height) for the Workspaces App logo icon. |
--workspace-logo-wrapper-height |
Height for the Workspaces App logo container. |
--workspace-logo-wrapper-padding |
Padding for the Workspaces App logo container. |
--workspace-logo-wrapper-width |
Width for the Workspaces App logo container. |
Dialogs & Popups
General
| Variable | Description |
|---|---|
--workspace-dialog-max-width |
Maximum width for Workspace dialogs. |
--workspace-dialog-min-width |
Minimum width for Workspace dialogs. |
--workspace-popup-item-gap |
Gap between the items in Workspace popups. |
--workspace-popup-panel-shadow |
Drop shadow for the Workspace popups. |
--workspace-popup-top-position |
Top position for the Workspace popup relative to the top border of the respective button that triggers the popup. |
"Add Apps" Popup
| Variable | Description |
|---|---|
--workspace-popup-app-max-height |
Maximum height for the "Add App" Workspace popup. |
--workspace-popup-app-padding |
Padding for the "Add App" Workspace popup. |
--workspace-popup-app-placement-section-font-size |
Font size for the "App Placement" section in the "Add App" Workspace popup. |
--workspace-popup-app-placement-section-lh |
Line height for the "App Placement" section in the "Add App" Workspace popup. |
--workspace-popup-app-title-lh |
Line height for the title of the "Add App" Workspace popup. |
--workspace-popup-app-title-margin |
Margin for the title of the "Add App" Workspace popup. |
"Add Workspace" Popup
| Variable | Description |
|---|---|
--workspace-popup-wsp-max-height |
Maximum height for the "Add Workspace" Workspace popup. |
--workspace-popup-wsp-separator |
Thickness, color, and type for the section separator used in the "Add Workspace" Workspace popup. |
--workspace-popup-wsp-title-lh |
Line height for the title of the "Add Workspace" Workspace popup. |
--workspace-popup-wsp-title-padding |
Padding for the title of the "Add Workspace" Workspace popup. |
Settings Panel
| Variable | Description |
|---|---|
--workspace-settings-h-padding |
Horizontal padding for the Workspace "Settings" panel. |
--workspace-settings-item-gap |
Gap between the section items in the Workspace "Settings" panel. |
--workspace-settings-max-height |
Maximum height for the Workspace "Settings" panel. |
--workspace-settings-section-gap |
Gap between the sections in the Workspace "Settings" panel. |
--workspace-settings-title-panel-lh |
Line height for the title of the Workspace "Settings" panel. |
--workspace-settings-title-section-lh |
Line height for the section titles of the Workspace "Settings" panel. |
--workspace-settings-title-sub-section-lh |
Line height for the sub-section titles of the Workspace "Settings" panel. |
--workspace-settings-v-padding |
Vertical padding for the Workspace "Settings" panel. |
--workspace-settings-width |
Width for the Workspace "Settings" panel. |
Loader
| Variable | Description |
|---|---|
--workspace-loader-animation |
Animation style for the Workspace loading animation. |
--workspace-loader-background |
Background color for the Workspace loading animation. |
--workspace-loader-mask |
Overlay mask for the Workspace loading animation. |
--workspace-loader-radius |
Border radius for the Workspace loading animation. |
--workspace-loader-size |
Size (width & height) the Workspace loading animation. |
--workspace-loader-text-color |
Text color for the Workspace loading animation. |
--workspace-loader-wrapper-background |
Background color of the loading wrapper |
--workspace-loader-wrapper-gap |
Gap between the items within the Workspace loader wrapper. |
--workspace-loader-wrapper-height |
Height for the Workspace loader wrapper. |
--workspace-loader-wrapper-width |
Width for the Workspace loader wrapper. |
Launchpad
CSS variables for overriding the io.Connect Launchpad styles.
General
| Variable | Description |
|---|---|
--launchpad-active-icon-background |
Background color for when the Launchpad icon is active (i.e., when the Launchpad is open). |
Panel
| Variable | Description |
|---|---|
--launchpad-panel-background |
Background color for the main Launchpad panel. |
--launchpad-panel-border |
Border for the Launchpad panel. |
--launchpad-panel-desktop-width |
Width of the Launchpad panel on desktop devices. |
--launchpad-panel-mobile-width |
Width of the Launchpad panel on mobile devices. |
Header
| Variable | Description |
|---|---|
--launchpad-header-padding |
Padding for the Launchpad header. |
Search
| Variable | Description |
|---|---|
--launchpad-search-bar-margin |
Margin around the Launchpad search bar. |
--launchpad-search-no-result-padding |
Padding for the "No results" and "Loading..." messages in the Launchpad search results section. |
Section Separator
| Variable | Description |
|---|---|
--launchpad-section-header-background |
Background for the header of the main sections to make them appear above other items when sticky. |
--launchpad-section-header-z-index |
Z-index for the header of the main sections to make them appear above other items when sticky. |
--launchpad-section-item-actions-desktop-gap |
Gap between the actions of a section item on desktop devices. |
--launchpad-section-item-actions-margin |
Margin around the actions of a section item. |
--launchpad-section-item-actions-mobile-gap |
Gap between the actions of a section item on mobile devices. |
--launchpad-section-separator-color |
Color for the Launchpad section separators. |
--launchpad-section-separator-margin |
Margin for the Launchpad section separators. |
--launchpad-section-separator-size |
Thickness (height) of the section separators. |
Layouts Section
| Variable | Description |
|---|---|
--launchpad-layouts-check-icon-size |
Size of the check icon of the active Layout in the Layouts section. |
--launchpad-layouts-create-button-margin |
Margin for the "Create Layout" button. |
--launchpad-layouts-header-height |
Height for the Layouts section header. |
--launchpad-layouts-header-padding |
Padding for the Layouts section header. |
--launchpad-layouts-no-active-padding |
Padding for the "Choose which Layout to load" text. |
--launchpad-layouts-separator-color |
Color for the Layouts section separator. |
--launchpad-layouts-separator-margin |
Margin for the Layouts section separator. |
--launchpad-layouts-separator-size |
Size (height) of the Layouts section separator. |
--launchpad-layouts-wrapper-margin |
Margin for the Layouts section. |
Modals
CSS variables for overriding the styles of the io.Connect modal windows.
Alerts
| Variable | Description |
|---|---|
--modal-alert-container-bottom-position |
Distance from the bottom of the container in which the alert is displayed. |
--modal-alert-container-width |
Width for the container in which the alert is displayed. |
--modal-alert-container-z-index |
Z-index for the container in which the alert is displayed. |
Dialogs
CSS variables for customizing the styles of the io.Connect dialogs.
| Variable | Description |
|---|---|
--dialog-box-background |
Background for the dialogs. |
--dialog-box-btn-min-width |
Minimum width for the dialog buttons. |
--dialog-box-inner-border |
Inner border for the dialogs. |
--dialog-box-max-height |
Maximum height for the dialogs. |
--dialog-box-padding |
Padding for the dialogs. |
--dialog-box-padding-top |
Padding for the dialogs header. |
--dialog-box-radius |
Border radius for the dialogs. |
--dialog-box-vertical-gap |
Gap between the dialog heading and the "Close" button. |