allow more triangle styling and better placement

[malteludwig]

PR Checklist

Please check if your PR fulfills the following requirements:

• [ ] Tests for the changes have been added (for bug fixes / features)
• [x] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [ x] Feature
• [ ] Code style update (formatting)
• [ ] Refactoring (no functional changes)
• [ ] Documentation content changes

Other information

• draw triangle using border-top to permit better size and placement handling.
• add a drop-shadow to mimic your design (instead of border-box)
• add vars allow styling from outside

Issue Number: N/A

[peterpeterparker]

Thanks for the PR 👍.

Had to make few adjustements after merge and I released it v0.0.44 afterwards.

[malteludwig]

@peterpeterparker There is a case where the triangle is off the toolbar, when you select text at the very left:

I had added this: left: max(var(--stylo-toolbar-triangle-start), calc(var(--stylo-triangle-width) / 2)); to prevent the triangle going to far to the left if --stylo-toolbar-triangle-star is negative

[peterpeterparker]

@malteludwig thanks for the ping. this did not work if the position was set in percent - i.e. when the menu set 50% the triangle was not correct positioned neither.

I fixed this edge case in this commit https://github.com/papyrs/stylo/commit/d9b66960863d6bad95129b9ca8c96f9ec0192ce3

Thanks for the ping