diff options
| -rw-r--r-- | web/source/css/base.css | 10 | ||||
| -rw-r--r-- | web/source/css/status.css | 4 | ||||
| -rw-r--r-- | web/source/settings/components/form/inputs.tsx | 28 | ||||
| -rw-r--r-- | web/source/settings/style.css | 15 |
4 files changed, 44 insertions, 13 deletions
diff --git a/web/source/css/base.css b/web/source/css/base.css index 630e4a6d2..e1ac7f82e 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -178,6 +178,16 @@ input, select, textarea, .input { } } +select { + /* + By default this looks awful on Gnome + Web so restyle a bit to try to make + it consistent with firefox + chrome. + */ + appearance: none; + line-height: 1.5rem; +} + /* Squeeze emojis so they fit inline in text. */ diff --git a/web/source/css/status.css b/web/source/css/status.css index 21dc3416e..a9ffbf7dd 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -308,6 +308,10 @@ main { "eye sensitive ." ". sensitive ."; + &::-webkit-details-marker { + display: none; /* Safari */ + } + .eye.button { grid-area: eye; align-self: start; diff --git a/web/source/settings/components/form/inputs.tsx b/web/source/settings/components/form/inputs.tsx index e6c530b53..06075ea87 100644 --- a/web/source/settings/components/form/inputs.tsx +++ b/web/source/settings/components/form/inputs.tsx @@ -170,19 +170,21 @@ export function Select({ <label> {label} {children} - <select - onChange={(e: React.ChangeEvent<HTMLSelectElement>) => { - onChange(e); - if (onChangeCallback !== undefined) { - onChangeCallback(e.target.value); - } - }} - value={value} - ref={ref as RefObject<HTMLSelectElement>} - {...props} - > - {options} - </select> + <div className="select-wrapper"> + <select + onChange={(e: React.ChangeEvent<HTMLSelectElement>) => { + onChange(e); + if (onChangeCallback !== undefined) { + onChangeCallback(e.target.value); + } + }} + value={value} + ref={ref as RefObject<HTMLSelectElement>} + {...props} + > + {options} + </select> + </div> </label> </div> ); diff --git a/web/source/settings/style.css b/web/source/settings/style.css index ad4b1c3c5..d34dd0eb7 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -374,6 +374,21 @@ section.with-sidebar > form { flex-wrap: wrap; gap: 0.4rem; } + + .select-wrapper { + /* + Selects are normalized in base.css to not have a down arrow on the side. + Overcome this on settings panel forms by replacing the down arrow. + */ + position: relative; + &::after { + content: "▼"; + font-size: 0.8rem; + top: 0.3rem; + right: 1rem; + position: absolute; + } + } } .form-flex { |