Many aspects of the widget UI can be modified via .
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:
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-pagenn-comments-pagenn-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
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:
