💄 (ui): Restyle the native file-input button to match the design system
Changes
1 file changed, +24 -0
MODIFY
src/main/resources/META-INF/resources/shark.css
+24 -0
@@ -659,6 +659,30 @@
659
659
resize: vertical;
660
660
}
661
661
662
+/* replace the ugly native "Browse…" button with a design-system secondary button */
663
+input[type="file"] {
664
+ padding: var(--s2) var(--s3);
665
+ cursor: pointer;
666
+}
667
+
668
+input[type="file"]::file-selector-button {
669
+ margin-right: var(--s3);
670
+ padding: 8px 16px;
671
+ border: 1px solid var(--border);
672
+ border-radius: var(--radius-sm);
673
+ background: var(--surface);
674
+ color: var(--ink);
675
+ font: 600 14px/1 var(--font);
676
+ cursor: pointer;
677
+ transition: background .12s, border-color .12s, color .12s;
678
+}
679
+
680
+input[type="file"]::file-selector-button:hover {
681
+ background: var(--canvas);
682
+ border-color: var(--border-strong);
683
+ color: var(--accent-deep);
684
+}
685
+
662
686
form.inline {
663
687
display: inline;
664
688
}