Theming
Many aspects of the widget UI can be modified via CSS Variables.
To override the defaults simply use .annoto CSS class selector. For Example:
.annoto {--nnc-color-dark: #333333;}
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 |
| 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. |
| Added when player is in full screen |
| Added when the user uses a mobile device, and the widget applies UX for mobile devices. |
| Widget is in open state. |
| Changed based on the view the widget is showing. Common views:
|
| Widget has Right to Left layout. |
Please notice in most cases nnc prefix is used. but in some cases nn is used instead.
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*/}
.annoto {--nnc-bg: transparent;--nnc-bg-color: transparent;--nnc-color: #000000;--nnc-item-bg: #fafafa;--nnc-border-color: #e2e2e5;--nnc-color-text: rgba(0, 0, 0, .87);--nn-widget-bg: rgba(250, 250, 250, .9);--nn-widget-solid-bg: rgb(255, 255, 255);}
.annoto {--nnc-bg-hover: var(--nnc-color-step-50, #0d0d0d);--nnc-color-text-disabled: rgba(0, 0, 0, 0.26);--nnc-focused-box-shadow: 0 0 0 2px rgba(37, 137, 218, .9);}
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;}
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;}
.annoto {--nnc-font-family: 'Roboto','Helvetica','Arial',sans-serif;}
TBD
.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;}
.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);}
--nnc-timeline-bg: rgba(250, 250, 250, 0.9);--nnc-timeline-overlay-bg: rgba(var(--nnc-color-dark-rgb, 53, 53, 58), 0.15));--nn-timeline-progress-line-color: rgb(255,0,0);
.annoto {--nnc-comment-bubble-bg: rgba(90, 101, 114, 0.06);--nnc-comment-bg: var(--nn-widget-bg, rgba(250, 250, 250, .9));--nnc-comment-typo-body-size: 15px;}
.annoto {--nnc-note-bg: rgba(242, 246, 251, 0.9);--nnc-note-typo-body-size: 15px;}
