Theming

Many aspects of the widget UI can be modified via CSS Variables.

Overriding the Defaults

To override the defaults simply use .annoto CSS class selector. For Example:

.annoto {
    --nnc-color-dark: #333333;
}

Widget Utility Classes

The widget has different utility classes that are appended to the .annoto class based on a situation. The styling can be modified using combinations of those classes. For example, the most common state is dark theme of the widget:

.annoto.nnc-dark-theme {
    --nnc-color-dark: #cecece;
}

For dark theme styling but only when the player is in full screen:

.annoto.nnc-dark-theme.nn-player-fs {
    --nnc-color-dark: #b2b2b2;
}

Below is a list of the most useful utility classes:

Utility Class	Description
nnc-dark-theme	Used it different cases such as when widget is an overlay inside the player, player is in full screen, or configured as the default theme in the widget configuration.
nn-player-fs	Added when player is in full screen
nnc-mobile	Added when the user uses a mobile device, and the widget applies UX for mobile devices.
nn-is-open	Widget is in open state.
nn-[PAGE]-page	Changed based on the view the widget is showing. Common views: nn-notes-page nn-comments-page nn-preferences-page
nnc-rtl	Widget has Right to Left layout.

Please notice in most cases nnc prefix is used. but in some cases nn is used instead.

Colors Palette

Main Colors

The main colors used by the widget are: primary, secondary, tertiary, light, medium, dark, darkest, success, warning, notice, danger.

Each main color has variants for different effects: contrast, shade and tint

Some or all the colors can be modified.

If for example primary color is modified, please make sure to set all it's variants to appropriate values, a great helper tool by Ionic can be used to generate the variants: https://ionicframework.com/docs/theming/color-generator

.annoto {
    --nnc-color-primary: #ea5451;
    --nnc-color-primary-contrast: #ffffff;
    --nnc-color-primary-shade: #ce4a47;
    --nnc-color-primary-tint: #ec6562;
    --nnc-color-primary-rgb: 234,84,81;
    --nnc-color-primary-contrast-rgb: 255,255,255;
    
    --nnc-color-secondary: #00a9a4;
    --nnc-color-secondary-contrast: #ffffff;
    --nnc-color-secondary-shade: #009590;
    --nnc-color-secondary-tint: #1ab2ad;
    --nnc-color-secondary-rgb: 0,169,164;
    --nnc-color-secondary-contrast-rgb: 255,255,255;
    
    --nnc-color-tertiary: #5450e8;
    --nnc-color-tertiary-contrast: #ffffff;
    --nnc-color-tertiary-shade: #4a46cc;
    --nnc-color-tertiary-tint: #6562ea;
    --nnc-color-tertiary-rgb: 84,80,232;
    --nnc-color-tertiary-contrast-rgb: 255,255,255;
    
    --nnc-color-light: #f4f5f8;
    --nnc-color-light-contrast: #000000;
    --nnc-color-light-shade: #d7d8da;
    --nnc-color-light-tint: #f5f6f9;
    --nnc-color-light-rgb: 244,245,248;
    --nnc-color-light-contrast-rgb: 0,0,0;
    
    --nnc-color-dark: #35353a;
    --nnc-color-dark-contrast: #ffffff;
    --nnc-color-dark-shade: #2f2f33;
    --nnc-color-dark-tint: #49494e;
    --nnc-color-dark-rgb: 53,53,58;
    --nnc-color-dark-contrast-rgb: 255,255,255;
    
    
    /** same format is used for the other colors
     * medium, darkest, success, warning, notice, and danger
     */
}

Base Colors

.annoto {
    --nnc-bg: #ffffff;
    --nnc-bg-color: #ffffff;
    --nnc-color: #000000;
    --nnc-item-bg: #fafafa;
    --nnc-border-color: #e2e2e5;
    --nnc-color-text: rgba(0, 0, 0, .87);
    --nn-widget-bg: rgb(255, 255, 255);
    --nn-widget-bg-secondary: rgb(247, 247, 247);
}

Utility Colors

.annoto {
    --nnc-color-text-disabled: rgba(0, 0, 0, .26);
    --nnc-focused-box-shadow: 0 0 0 2px rgba(37, 137, 218, .9);
    --nnc-bg-hover: var(--nnc-color-step-950, #eeeeee);
}

Vendor Colors

Those are standard colors of third party, usually they do not need to be changed.

.annoto {
    --nnc-color-docx: #2B579A;
    --nnc-color-xlsx: #217346;
    --nnc-color-pptx: #B7472A;
}

Step Colors

Those colors are different shades of grey used by the widget. Please notice, the main colors light, medium, dark and darkest are used for styling.

In most cases there is no need to change any of the steps.

.annoto {
    --nnc-color-step-950: #eeeeee;
    --nnc-color-step-900: #e1e1e1;
    --nnc-color-step-850: #d5d5d5;
    --nnc-color-step-800: #c8c8c8;
    --nnc-color-step-750: #bcbcbc;
    --nnc-color-step-700: #afafaf;
    --nnc-color-step-650: #a3a3a3;
    --nnc-color-step-600: #969696;
    --nnc-color-step-550: #8a8a8a;
    --nnc-color-step-500: #7d7d7d;
    --nnc-color-step-550: #717171;
    --nnc-color-step-400: #646464;
    --nnc-color-step-450: #585858;
    --nnc-color-step-300: #4b4b4b;
    --nnc-color-step-250: #3f3f3f;
    --nnc-color-step-200: #323232;
    --nnc-color-step-150: #262626;
    --nnc-color-step-100: #191919;
    --nnc-color-step-50: #0d0d0d;
    --nnc-color-step-950-rgb: 238, 238, 238;
    --nnc-color-step-900-rgb: 225, 225, 225;
    --nnc-color-step-850-rgb: 213, 213, 213;
    --nnc-color-step-800-rgb: 200, 200, 200;
    --nnc-color-step-750-rgb: 188, 188, 188;
    --nnc-color-step-700-rgb: 175, 175, 175;
    --nnc-color-step-650-rgb: 163, 163, 163;
    --nnc-color-step-600-rgb: 150, 150, 150;
    --nnc-color-step-550-rgb: 138, 138, 138;
    --nnc-color-step-500-rgb: 125, 125, 125;
    --nnc-color-step-450-rgb: 113, 113, 113;
    --nnc-color-step-400-rgb: 100, 100, 100;
    --nnc-color-step-350-rgb: 88, 88, 88;
    --nnc-color-step-300-rgb: 75, 75, 75;
    --nnc-color-step-250-rgb: 63, 63, 63;
    --nnc-color-step-200-rgb: 50, 50, 50;
    --nnc-color-step-150-rgb: 38, 38, 38;
    --nnc-color-step-100-rgb: 25, 25, 25;
    --nnc-color-step-50-rgb: 13, 13, 13;
}

Typography

Font Family

.annoto {
    --nnc-font-family: 'Roboto','Helvetica','Arial',sans-serif;
}

Fonts

.annoto {
    --nnc-typo-body-size: 1em;
    --nnc-typo-body-weight: 400;
    
    --nnc-typo-title-size: 1.125em;
    --nnc-typo-title-weight: 400;
    
    --nnc-typo-subhead-size: 1em;
    --nnc-typo-subhead-weight: 500;
    
    --nnc-typo-caption-size: 0.75em;
    --nnc-typo-caption-weight: 400;
}

Components

Timeline

.annoto {
    --nnc-timeline-cta-size: 36px;
}

Comments

.annoto {  
    --nnc-comment-bubble-bg: rgba(90, 101, 114, 0.06);
    --nnc-comment-font-size: 15px;
    --nnc-comment-avatar-size: 2.25em;
}

Notes

.annoto {
    --nnc-note-font-size: 15px;
}

Chat

.annoto {
    --nnc-message-font-size: 15px;
    --nnc-message-bubble-bg: rgba(90, 101, 114, .06);
}

Interactions

.annoto {
    --nnc-cta-item-bg: rgba(90, 101, 114, .06);
}

Tooltips

.annoto {
    --nnc-tooltip-color: #fff;
    --nnc-tooltip-bg: rgba(66,66,66, 0.9);
}

Scrollbar

.annoto {
    --nnc-scrollbar-width: 6px;
    --nnc-scrollbar-thumb-color: var(--nnc-color-step-750, #bcbcbc);
    --nnc-scrollbar-thumb-hover-color: var(--nnc-color-step-600, #969696);
    --nnc-scrollbar-bg: var(--nnc-color-step-850, #d5d5d5);
}

Misc

.annoto {
    --nnc-card-bg: #ffffff;
    --nnc-form-layout-bg: #ffffff;
    --nnc-item-bg: #ffffff;
}