diff --git a/front/index.html b/front/index.html index 13413ad..d4ce79c 100644 --- a/front/index.html +++ b/front/index.html @@ -44,12 +44,7 @@ - +
diff --git a/front/style.scss b/front/style.scss index 3df0cd7..623ff8d 100644 --- a/front/style.scss +++ b/front/style.scss @@ -57,23 +57,26 @@ body { } } +button, input, select { background-color: $background; border: 2px solid $border; color: $text; font: 500 14px/2 "Inter", "system-ui", sans-serif; + max-width: 145px; outline: none; padding: 3px 10px; - width: 150px; - transition: .15s ease; + transition: border .15s ease; + width: min-content; + &::placeholder { color: $placeholder; } &:hover { - border-color: #555; + border-color: #777; } &:focus-visible { @@ -90,7 +93,7 @@ select:focus { background-color: $background; transition: none; } - +² option { background-color: $background; color: $text; @@ -101,7 +104,6 @@ option { } } -button, textarea { background-color: inherit; border: none; diff --git a/static/style.css b/static/style.css index c8031a4..a2908b6 100644 --- a/static/style.css +++ b/static/style.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono&display=swap"); section#recent-plaks { bottom: 1rem; @@ -128,25 +129,30 @@ body { width: 24px; } +button, input, select { background-color: #0f0f0f; border: 2px solid #363636; color: #e5e5e7; font: 500 14px/2 "Inter", "system-ui", sans-serif; + max-width: 145px; outline: none; padding: 3px 10px; - width: 150px; - transition: 0.15s ease; + transition: border 0.15s ease; + width: min-content; } +button::placeholder, input::placeholder, select::placeholder { color: #888; } +button:hover, input:hover, select:hover { - border-color: #555; + border-color: #777; } +button:focus-visible, input:focus-visible, select:focus-visible { border: 2px solid #bbb; @@ -162,16 +168,15 @@ select:focus { transition: none; } -option { +² option { background-color: #0f0f0f; color: #e5e5e7; } -option:focus { +² option:focus { background-color: #d30f45; color: #0f0f0f; } -button, textarea { background-color: inherit; border: none;