Theming

Search…
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:
1
.annoto {
2
    --nnc-color-dark: #333333;
3
}
Copied!
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:
1
.annoto.nnc-dark-theme {
2
    --nnc-color-dark: #cecece;
3
}
Copied!
For dark theme styling but only when the player is in full screen:
1
.annoto.nnc-dark-theme.nn-player-fs {
2
    --nnc-color-dark: #b2b2b2;
3
}
Copied!
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 
1
.annoto {
2
    --nnc-color-primary: #ea5451;
3
    --nnc-color-primary-contrast: #ffffff;
4
    --nnc-color-primary-shade: #ce4a47;
5
    --nnc-color-primary-tint: #ec6562;
6
    --nnc-color-primary-rgb: 234,84,81;
7
    --nnc-color-primary-contrast-rgb: 255,255,255;
8
    
9
    --nnc-color-secondary: #00a9a4;
10
    --nnc-color-secondary-contrast: #ffffff;
11
    --nnc-color-secondary-shade: #009590;
12
    --nnc-color-secondary-tint: #1ab2ad;
13
    --nnc-color-secondary-rgb: 0,169,164;
14
    --nnc-color-secondary-contrast-rgb: 255,255,255;
15
    
16
    --nnc-color-tertiary: #5450e8;
17
    --nnc-color-tertiary-contrast: #ffffff;
18
    --nnc-color-tertiary-shade: #4a46cc;
19
    --nnc-color-tertiary-tint: #6562ea;
20
    --nnc-color-tertiary-rgb: 84,80,232;
21
    --nnc-color-tertiary-contrast-rgb: 255,255,255;
22
    
23
    --nnc-color-light: #f4f5f8;
24
    --nnc-color-light-contrast: #000000;
25
    --nnc-color-light-shade: #d7d8da;
26
    --nnc-color-light-tint: #f5f6f9;
27
    --nnc-color-light-rgb: 244,245,248;
28
    --nnc-color-light-contrast-rgb: 0,0,0;
29
    
30
    --nnc-color-dark: #35353a;
31
    --nnc-color-dark-contrast: #ffffff;
32
    --nnc-color-dark-shade: #2f2f33;
33
    --nnc-color-dark-tint: #49494e;
34
    --nnc-color-dark-rgb: 53,53,58;
35
    --nnc-color-dark-contrast-rgb: 255,255,255;
36
    
37
    
38
    /** same format is used for the other colors
39
     * medium, darkest, success, warning, notice, and danger
40
     */
41
}
Copied!
Base Colors
1
.annoto {
2
    --nnc-bg: transparent;
3
    --nnc-bg-color: transparent;
4
    --nnc-color: #000000;
5
    --nnc-item-bg: #fafafa;
6
    --nnc-border-color: #e2e2e5;
7
    --nnc-color-text: rgba(0, 0, 0, .87);
8
    --nn-widget-bg: rgba(250, 250, 250, .9);
9
    --nn-widget-solid-bg: rgb(255, 255, 255);
10
}
Copied!
Utility Colors
1
.annoto {
2
    --nnc-bg-hover: var(--nnc-color-step-50, #0d0d0d);
3
    --nnc-color-text-disabled: rgba(0, 0, 0, 0.26);
4
    --nnc-focused-box-shadow: 0 0 0 2px rgba(37, 137, 218, .9);
5
}
Copied!
Vendor Colors
Those are standard colors of third party, usually they do not need to be changed.
1
.annoto {
2
    --nnc-color-docx: #2B579A;
3
    --nnc-color-xlsx: #217346;
4
    --nnc-color-pptx: #B7472A;
5
}
Copied!
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.
1
.annoto {
2
    --nnc-color-step-950: #eeeeee;
3
    --nnc-color-step-900: #e1e1e1;
4
    --nnc-color-step-850: #d5d5d5;
5
    --nnc-color-step-800: #c8c8c8;
6
    --nnc-color-step-750: #bcbcbc;
7
    --nnc-color-step-700: #afafaf;
8
    --nnc-color-step-650: #a3a3a3;
9
    --nnc-color-step-600: #969696;
10
    --nnc-color-step-550: #8a8a8a;
11
    --nnc-color-step-500: #7d7d7d;
12
    --nnc-color-step-550: #717171;
13
    --nnc-color-step-400: #646464;
14
    --nnc-color-step-450: #585858;
15
    --nnc-color-step-300: #4b4b4b;
16
    --nnc-color-step-250: #3f3f3f;
17
    --nnc-color-step-200: #323232;
18
    --nnc-color-step-150: #262626;
19
    --nnc-color-step-100: #191919;
20
    --nnc-color-step-50: #0d0d0d;
21
    --nnc-color-step-950-rgb: 238, 238, 238;
22
    --nnc-color-step-900-rgb: 225, 225, 225;
23
    --nnc-color-step-850-rgb: 213, 213, 213;
24
    --nnc-color-step-800-rgb: 200, 200, 200;
25
    --nnc-color-step-750-rgb: 188, 188, 188;
26
    --nnc-color-step-700-rgb: 175, 175, 175;
27
    --nnc-color-step-650-rgb: 163, 163, 163;
28
    --nnc-color-step-600-rgb: 150, 150, 150;
29
    --nnc-color-step-550-rgb: 138, 138, 138;
30
    --nnc-color-step-500-rgb: 125, 125, 125;
31
    --nnc-color-step-450-rgb: 113, 113, 113;
32
    --nnc-color-step-400-rgb: 100, 100, 100;
33
    --nnc-color-step-350-rgb: 88, 88, 88;
34
    --nnc-color-step-300-rgb: 75, 75, 75;
35
    --nnc-color-step-250-rgb: 63, 63, 63;
36
    --nnc-color-step-200-rgb: 50, 50, 50;
37
    --nnc-color-step-150-rgb: 38, 38, 38;
38
    --nnc-color-step-100-rgb: 25, 25, 25;
39
    --nnc-color-step-50-rgb: 13, 13, 13;
40
}
Copied!
Typography
Font Family
1
.annoto {
2
    --nnc-font-family: 'Roboto','Helvetica','Arial',sans-serif;
3
}
Copied!
Fonts
1
.annoto {
2
    --nnc-typo-body-size: 1em;
3
    --nnc-typo-body-weight: 400;
4
    
5
    --nnc-typo-title-size: 1.125em;
6
    --nnc-typo-title-weight: 400;
7
    
8
    --nnc-typo-subhead-size: 1em;
9
    --nnc-typo-subhead-weight: 500;
10
    
11
    --nnc-typo-caption-size: 0.75em;
12
    --nnc-typo-caption-weight: 400;
13
}
Copied!
Components
Scrollbar
1
.annoto {
2
    --nnc-scrollbar-width: 6px;
3
    --nnc-scrollbar-thumb-color: var(--nnc-color-step-750, #bcbcbc);
4
    --nnc-scrollbar-thumb-hover-color: var(--nnc-color-step-600, #969696);
5
    --nnc-scrollbar-bg: var(--nnc-color-step-850, #d5d5d5);
6
}
Copied!
Timeline
1
.annoto {
2
    --nnc-timeline-bg: rgba(250, 250, 250, 0.9);
3
    --nnc-timeline-overlay-bg: rgba(var(--nnc-color-dark-rgb, 53, 53, 58), 0.15));
4
    --nn-timeline-progress-line-color: rgb(255,0,0);
5
}
Copied!
Comments
1
.annoto {  
2
    --nnc-comment-bubble-bg: rgba(90, 101, 114, 0.06);
3
    --nnc-comment-bg: var(--nn-widget-bg, rgba(250, 250, 250, .9));
4
    --nnc-comment-typo-body-size: 15px;
5
}
Copied!
Notes
1
.annoto {
2
    --nnc-note-bg: rgba(242, 246, 251, 0.9);
3
    --nnc-note-typo-body-size: 15px;
4
}
Copied!