Improve consistency of inputs

- Improve touch areas of tabs and buttons so more of them are 44px height
- Improve border radius of inputs so they're aligned.
This commit is contained in:
Nick Colley 2023-01-30 16:43:20 +00:00
parent 84ea7b2828
commit b17bcdd718
8 changed files with 22 additions and 14 deletions

View File

@ -39,7 +39,7 @@
line-height: 1.1; line-height: 1.1;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--main-border); border: 1px solid var(--main-border);
border-radius: 10px; border-radius: var(--input-border-radius-size);
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
background-color: var(--input-bg); background-color: var(--input-bg);

View File

@ -33,19 +33,15 @@
} }
li { li {
border: 1px solid var(--main-border);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
background: var(--tab-bg); background: var(--tab-bg);
border-left: none;
} }
li:last-child { li:not(:last-child) {
border-right: none; border-right: 1px solid var(--main-border);
} }
li:hover { li:hover {
@ -56,8 +52,8 @@
background: var(--tab-bg-non-selected); background: var(--tab-bg-non-selected);
} }
li.current { li:not(.current) {
border-bottom: none; border-bottom: 1px solid var(--main-border);
} }
li.current:hover { li.current:hover {
@ -73,7 +69,7 @@
} }
a { a {
padding: 7px 10px; padding: .75em;
color: var(--body-text-color); color: var(--body-text-color);
font-size: 1.1em; font-size: 1.1em;
flex: 1; flex: 1;

View File

@ -20,6 +20,7 @@
emoji-picker { emoji-picker {
--indicator-color: var(--main-theme-color); --indicator-color: var(--main-theme-color);
--outline-color: var(--focus-outline); --outline-color: var(--focus-outline);
--input-border-radius: var(--input-border-radius-size);
} }
@media (max-width: 479px) { @media (max-width: 479px) {

View File

@ -45,6 +45,7 @@
grid-row-gap: 5px; grid-row-gap: 5px;
padding: 20px; padding: 20px;
justify-content: center; justify-content: center;
border-bottom: var(--main-border-size) solid var(--main-border);
} }
@supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) { @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {

View File

@ -34,8 +34,8 @@
align-items: center; align-items: center;
} }
.search-input { .search-input {
padding: 10px 15px; padding: 12px 15px;
border-radius: 10px; border-radius: var(--input-border-radius-size);
flex: 1; flex: 1;
width: 0; width: 0;
min-width: 0; min-width: 0;

View File

@ -96,13 +96,19 @@ input[type=search] {
input, textarea { input, textarea {
background: inherit; background: inherit;
color: inherit; color: inherit;
border-radius: var(--input-border-radius-size);
padding: 5px 8px;
}
::placeholder {
color: var(--input-placeholder-color);
} }
button, .button { button, .button {
font-size: 1.2em; font-size: 1.2em;
background: var(--button-bg); background: var(--button-bg);
border-radius: 2px; border-radius: var(--input-border-radius-size);
padding: 10px 15px; padding: 12px 15px;
border: 1px solid var(--button-border); border: 1px solid var(--button-border);
cursor: pointer; cursor: pointer;
color: var(--button-text); color: var(--button-text);

View File

@ -14,7 +14,9 @@
--button-bg-hover: #{darken($main-bg-color, 5%)}; --button-bg-hover: #{darken($main-bg-color, 5%)};
--input-border: #{$border-color}; --input-border: #{$border-color};
--input-border-radius-size: 4px;
--input-bg: #{$main-bg-color}; --input-bg: #{$main-bg-color};
--input-placeholder-color: #{$deemphasized-color};
--anchor-text: #{$anchor-color}; --anchor-text: #{$anchor-color};
--main-bg: #{$main-bg-color}; --main-bg: #{$main-bg-color};
--body-bg: #{$body-bg-color}; --body-bg: #{$body-bg-color};

View File

@ -1,6 +1,8 @@
:root { :root {
$deemphasized-color: lighten($main-bg-color, 54%); $deemphasized-color: lighten($main-bg-color, 54%);
--input-placeholder-color: #{$deemphasized-color};
--action-button-deemphasized-fill-color: #{$deemphasized-color}; --action-button-deemphasized-fill-color: #{$deemphasized-color};
--action-button-deemphasized-fill-color-hover: #{lighten($deemphasized-color, 22%)}; --action-button-deemphasized-fill-color-hover: #{lighten($deemphasized-color, 22%)};
--action-button-deemphasized-fill-color-active: #{lighten($deemphasized-color, 5%)}; --action-button-deemphasized-fill-color-active: #{lighten($deemphasized-color, 5%)};