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;
box-sizing: border-box;
border: 1px solid var(--main-border);
border-radius: 10px;
border-radius: var(--input-border-radius-size);
-moz-appearance: none;
-webkit-appearance: none;
background-color: var(--input-bg);

View File

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

View File

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

View File

@ -45,6 +45,7 @@
grid-row-gap: 5px;
padding: 20px;
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%)) {

View File

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

View File

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

View File

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

View File

@ -1,6 +1,8 @@
:root {
$deemphasized-color: lighten($main-bg-color, 54%);
--input-placeholder-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-active: #{lighten($deemphasized-color, 5%)};