Application Styles

You can customize the appearance of the application and the documentation portal to align with corporate branding requirements.

Styles Overview

Styles are set directly within the application.
Styles apply only to a specific instance of the application (browser or desktop) on a specific device.
Styles can be shared with colleagues or published on the documentation portal.

To set styles: сlick on the name of the workspace on the home page. Then click .

Style example

#custom-style {
    --grey-05: #f9f9f9;
    --grey-10: #f2f2f2;
    --grey-20: #e5e5e5;
    --grey-30: #d6d6d6;
    --grey-60: #808080;
    --grey-70: #656565;
    --grey-90: #333333;
    --grey-100: #111111; 

    --accent-80: #2183c4;
    --accent-100: #005cc5;
}

#custom-style[data-theme="light"] {
	/* Link color in the application */
	--color-link: var(--accent-80);

	/* Text color */
	--color-primary: var(--grey-100);
	--color-primary-general: var(--grey-60);

	/* Background color for tooltips, previews, inline, and main panels */
	--color-tooltip-background: var(--grey-90);

	/* Left sidebar (navigation) */
	--color-nav-item: var(--grey-70);
	--color-nav-menu-bg: var(--grey-10);

	/* Right sidebar */
	--color-right-nav-bg: var(--grey-10);

	/* Git panel in the left navigation (bottom) */
	--version-control-primary: var(--accent-100);

	/* Article */
	/* These variables are also used in article components and modal windows */
	--color-article-heading-text: var(--grey-100);
	--color-article-text: var(--grey-100);

	/* NOTES */
	
	/* For notes with type 'quote' only */
	--color-admonition-quote-border: var(--grey-70);
	--color-admonition-quote-bg: var(--grey-10);
	--color-admonition-text: var(--grey-70);

	/* BUTTONS */

	/* Standard */
	--color-btn-default-bg: var(--accent-100);
	--color-btn-default-text: #fff;
	--border-btn-default: 1px solid transparent;
	--opacity-btn-default-bg-hover: 1;
	--color-btn-default-text-hover: #fff;
	--color-btn-default-bg-hover: var(--accent-80);

	/* Underlined */
	--color-btn-underline-text: var(--grey-100);
	--color-btn-underline-text-hover: var(--accent-100);
}

#custom-style[data-theme="light"] {
	/* Background color for the homepage */
	--color-home-bg: var(--grey-05);

	/* Card (catalog) text color */
	--color-home-card-link: var(--grey-70);
	--color-home-card-link-hover: var(--grey-70);

	/* Card background color */
	--color-home-card-bg: var(--color-white);
	--color-home-card-bg-hover: var(--grey-10);

	/* Card border color */
	--color-home-card-border: var(--grey-20);
	--color-home-card-border-hover: var(--grey-30);

	/* Card shadow on hover */
	--box-shadow-home-card: 0px 0px 12px -5px #00000040;
}

Variables and Examples

Home Page

Text Colors

--color-home-card-link — Card text color.
--color-home-card-link-hover — Card text color on hover.

Background and Border Colors

--color-home-bg — General background color.
--color-home-card-bg — Card background color.
--color-home-card-bg-hover — Card background color on hover.
--color-home-card-border — Card border color.
--color-home-card-border-hover — Card border color on hover.

Shadows

--box-shadow-home-card — Card shadow.

Text Colors in the Application

--color-primary-general — Main text color.
--color-primary — Highlighted text color.

Icon Colors

--color-primary-general — Icon color (inherits the main text color).

Link Colors

--color-link — Link color.

--color-tooltip-background — Tooltip background color.

Side Panels

Left Menu Text Colors

--color-nav-item — Menu item text color.
--color-nav-item-selected — Active menu item text color.

Panel Background Colors

--color-nav-menu-bg — Left panel background.
--color-right-nav-bg — Right panel background.

Repository Status Bar

Located in the bottom-left corner of the catalog.

Colors

--version-control-primary — Main version control color.

Articles and Modals

Includes the main content area and pop-up windows.

Text Colors

--color-article-heading-text — Heading text color.
--color-article-text — Main text color.

Notes

Special blocks styled as quotes in articles.

Colors

--color-admonition-quote-border — Border color.
--color-admonition-quote-bg — Background color.
--color-admonition-text — Text color inside notes.

Buttons

Default Button

--color-btn-default-bg — Background color.
--color-btn-default-text — Text color.
--border-btn-default — Border color.
--opacity-btn-default-bg-hover — Hover opacity.
--color-btn-default-text-hover — Text color on hover.
--color-btn-default-bg-hover — Background color on hover.

Underlined Button

--color-btn-underline-text — Text color.
--font-weight-btn-underline — Font weight.
--padding-btn-underline — Inner padding.
--margin-btn-underline — Outer margin.
--color-btn-underline-text-hover — Text color on hover.
--color-btn-underline-bg-hover — Background color on hover.
--text-decoration-btn-underline-hover — Text decoration on hover.

Light and Dark Themes

By default, styles are set for the light theme. To define styles for the dark theme, change the data-theme selector from light to dark.

Fonts

You can change the font for the entire application by including a font in the CSS and assigning it to the --app-font-family variable.

Example:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

#custom-style {
	--app-font-famaly: 'Montserrat', sans-serif;
}

For proper functionality, ensure the font includes:

Italic styles.
Multiple weights (e.g., 300/400/500/600).

Fonts can be selected from Google Fonts.

Home Page Logo

You can customize the logo displayed in the upper-left corner of the homepage. To do this, click on the workspace name on the homepage and then click .

The logo can be configured for both light and dark themes. If a logo is provided only for the light theme, it will also be used for the dark theme.

Format: SVG
Maximum file size: 500 KB
Default height: 40px (This can be adjusted or replaced by modifying the relevant style variables.)

Catalog Logo

Catalog logos are stored in the repository and defined in a system file. Displayed in the top-right corner of the catalog card.

For a specific catalog:

[data-catalog-card="gramax"] .catalog-title-logo {
	height: 5.5rem;
	top: 0.5rem;
	right: 0;
}

For all catalogs:

.catalog-title-logo {
	height: 5.5rem;
    top: 0.5rem;
    right: 0;
}

Settings

Catalog