Improve the behavior and visuals of the color picker button

Author: dtdesign

com.woltlab.wcf/templates/shared_colorFormField.tpl

@@ -3,9 +3,9 @@
 		<span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
 	</span>
 {else}
-	<a href="#" class="colorPickerButton jsTooltip" id="{$field->getPrefixedId()}_colorPickerButton" title="{lang}wcf.style.colorPicker.button.changeColor{/lang}" data-store="{$field->getPrefixedId()}">
-		<span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
-	</a>
+	<button type="button" class="colorPickerButton jsTooltip" id="{$field->getPrefixedId()}_colorPickerButton" title="{lang}wcf.style.colorPicker.button.changeColor{/lang}" data-store="{$field->getPrefixedId()}">
+		<span class="colorPickerButton__color"{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
+	</button>
 	<input type="hidden" {*
 		*}id="{$field->getPrefixedId()}" {*
 		*}name="{$field->getPrefixedId()}" {*

wcfsetup/install/files/style/ui/colorPicker.scss

@@ -18,21 +18,18 @@
 	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
 	border: 1px solid rgba(0, 0, 0, 1);
 	box-sizing: content-box;
-	display: block;
+	display: flex;
 	min-height: 50px;
-
-	> span {
-		display: block;
-	}
 }
 
 .colorPickerButton {
-	height: 32px;
+	border-radius: var(--wcfBorderRadius);
+	overflow: hidden;
 	width: 50px;
+}
 
-	> span {
-		height: 32px;
-	}
+.colorPickerButton__color {
+	flex: 1 auto;
 }
 
 .colorPickerComparison {