Variables
Pin
snippyly-comment-pin {
--snippyly-comment-pin-ghost-color: red;
}
1
Select the Comment Pin component
You can select the Comment Pin component. Our CSS variables are set at the component level.
2
Modify a CSS variable
Set the variable to anything you want. We expose a set of variables so you can customize the component to better match your UI.
3
Check out the table below
Reference the table below to see what parts we expose. Alternatively, you can directly inspect the component HTML to see what parts are available.
| property | default value | description |
|---|---|---|
--velt-comment-pin-size | 2.5rem | Sets the comment pin size |
--velt-comment-pin-avatar-size | 1.5rem | Sets the comment pin avatar size |
--velt-comment-pin-bg-color | var(--velt-purple) | Sets the comment pin background color |
--velt-comment-pin-border-radius | 6.5em 6.5em 6.5em 0.125em | Sets the comment pin border radius |
--velt-comment-pin-box-shadow | 0px 8px 16px -8px rgba(15, 15, 15, 0.1) | Sets the comment pin box shadow |
--velt-comment-pin-ghost-color | var(--velt-grey-3-color) | Sets the comment pin ghost color |
--velt-comment-pin-popover-color | #a259fe | Sets the comment pin popover color |
--velt-comment-pin-border | 2px solid #FFFFFF | Sets the comment pin border |
--velt-comment-pin-border-width | 0 15px 15px 0 | Sets the comment pin border width |
--velt-comment-pin-border-color | transparent var(--velt-comment-pin-popover-color) transparent transparent | Sets the comment pin border color |
--velt-comment-pin-index-border | 1px solid rgb(210, 210, 210) | Sets the comment pin index border |
--velt-comment-pin-index-font-size | 0.55rem | Sets the comment pin index font size |
--velt-comment-pin-index-bg | white | Sets the comment pin index background color |
--velt-comment-pin-index-color | black | Sets the comment pin index color |
--velt-internal-lock-icon-color | white | Sets the comment pin lock icon color |
--velt-internal-lock-bg-color | grey | Sets the comment pin lock background color |
--velt-comment-pin-bubble-size | clamp(20px, 24px, 30px) | Sets the comment pin bubble size |
--velt-comment-pin-bubble-border-radius | 50% | Sets the comment pin bubble border radius |
--velt-comment-pin-bubble-offset-top | -8px | Sets the comment pin bubble offset top |
--velt-comment-pin-bubble-offset-right | -8px | Sets the comment pin bubble offset right |
--velt-comment-pin-bubble-offset-left | unset | Sets the comment pin bubble offset left |
--velt-comment-pin-bubble-offset-bottom | unset | Sets the comment pin bubble offset bottom |
snippyly-comment-pin {
--snippyly-comment-pin-ghost-color: red;
}