Revamp the ColorPicker popover and ColorInput widget (#830)

* Add cancel hint to Eyedropper tool

* Improve eyedropper overlay CSS

* Make CSS for transparent checkered background reusable

* Add color choice preview to color picker

* Draw text and markers as contrasting white or black

* Add reactive color updating and new/initial swapping

* Add Hex, RGB, HSV, and Opacity inputs

* Add none color and preset buttons

* Add eyedropper button and fix alignment (now visually done)

* Wire up none colors through the backend and style the ColorInput widget

* Add color info chip to ColorInput widget

* Fix all UX bugs

* Add more tooltips

* Fix FloatingMenu recursive loop

* Prevent mouse stray from closing color picker while dragging pickers

Closes #703

* Fix deselect all layers shortcut

* Add temporary eyedropper for Chromium browsers and a coming soon fallback

frontend/src/components/layout/LayoutCol.vue

@@ -1,5 +1,11 @@
 <template>
-	<div class="layout-col" :class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }" :data-scrollable-x="scrollableX || undefined" :data-scrollable-y="scrollableY || undefined">
+	<div
+		class="layout-col"
+		:class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }"
+		:data-scrollable-x="scrollableX || undefined"
+		:data-scrollable-y="scrollableY || undefined"
+		:title="tooltip"
+	>
 		<slot></slot>
 	</div>
 </template>
@@ -25,6 +31,7 @@ export default defineComponent({
 	props: {
 		scrollableX: { type: Boolean as PropType<boolean>, default: false },
 		scrollableY: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
 });
 </script>