Fix the visuals of the color picker on mobile / Firefox on Windows

See https://www.woltlab.com/community/thread/303691-im-acp-unter-style-der-farbw%C3%A4hler/

diff --git a/wcfsetup/install/files/style/ui/colorPicker.scss b/wcfsetup/install/files/style/ui/colorPicker.scss
index 6262a52edd2bb5fd3e87474224a497495bdb3baa..c490517c136a99c918a4a464bb8e7755dd1935ca 100644 (file)
--- a/wcfsetup/install/files/style/ui/colorPicker.scss
+++ b/wcfsetup/install/files/style/ui/colorPicker.scss
@@ -19,6 +19,7 @@
        border: 1px solid rgba(0, 0, 0, 1);
        box-sizing: content-box;
        display: block;
+       min-height: 50px;
 
        > span {
                display: block;
@@ -59,8 +60,8 @@
        input[type="number"] {
                padding: 4px;
                text-align: center;
-               /* Firefox requires those fields to be wider due to the overlapping controls. */
-               width: 6ch;
+               /* Firefox on Windows requires those fields to be wider due to the overlapping controls. */
+               width: 56px;
        }
 }
 
@@ -203,3 +204,11 @@
        grid-template-columns: min-content auto;
        margin-top: 20px;
 }
+
+@include screen-xs {
+       .colorPickerValueContainer {
+               display: flex;
+               flex-direction: column;
+               row-gap: 20px;
+       }
+}