diff --git a/src/routes/_components/Select.html b/src/routes/_components/Select.html
index 22d90066..61bffcb1 100644
--- a/src/routes/_components/Select.html
+++ b/src/routes/_components/Select.html
@@ -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);
diff --git a/src/routes/_components/TabSet.html b/src/routes/_components/TabSet.html
index a9db0dac..8fd7c012 100644
--- a/src/routes/_components/TabSet.html
+++ b/src/routes/_components/TabSet.html
@@ -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;
diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html
index d4ae3e93..54ede0f9 100644
--- a/src/routes/_components/dialog/components/EmojiDialog.html
+++ b/src/routes/_components/dialog/components/EmojiDialog.html
@@ -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) {
diff --git a/src/routes/_components/profile/AccountProfile.html b/src/routes/_components/profile/AccountProfile.html
index 19323172..a2b53e9e 100644
--- a/src/routes/_components/profile/AccountProfile.html
+++ b/src/routes/_components/profile/AccountProfile.html
@@ -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%)) {
diff --git a/src/routes/_components/search/Search.html b/src/routes/_components/search/Search.html
index 3c4ad7ff..c6ffc3e1 100644
--- a/src/routes/_components/search/Search.html
+++ b/src/routes/_components/search/Search.html
@@ -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;
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 168734f1..30201484 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -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);
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index ff91c302..b0ece97f 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -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};
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
index ad606126..bfd88c63 100644
--- a/src/scss/themes/_dark.scss
+++ b/src/scss/themes/_dark.scss
@@ -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%)};