Overriding Styles

CSS variables for the Annotation tools are provided to enable developers to overwrite them.

Listed below are examples of CSS variables for the Annotation tools. All other variables can be found in our GitHub

    --vpv-annotation-free-text__padding: 2px
    --vpv-annotation-free-text__line-height: 1.35
    --vpv-annotation-outline-width: 1px
    --vpv-annotation-outline-hovered-color: #0082ff
    --vpv-annotation-outline-selected-offset: 0.25rem
    --vpv-annotation-outline-selected-color: #0082ff
    --vpv-annotation-outline-resizer-size: 0.3125rem
    --vpv-annotation-outline-resizer-border-color: var(--vpv-annotation-outline-selected-color)
    --vpv-annotation-highlight__outline-width: 1px
    --vpv-annotation-highlight__outline-hover-color: var(--vpv-secondary-color)
    --vpv-annotation-highlight__outline-selected-color: #0082ff

For example: How to change the image outline width when hover

<style scoped>
:deep(.vpv-variables) {
    --vpv-annotation-outline-width: 4px;
}
</style>

Annotation image with default outlined: 1px

Annotation image with custom outlined: 4px