From c212afee3951f0576fa5e85852835f510176dc07 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sun, 28 Jan 2024 02:15:39 +0100 Subject: [PATCH] Dark mode, clean up. --- .../converter-selector.component.html | 6 ++--- .../converter-selector.component.scss | 24 +++++++++---------- .../text-input-field.component.scss | 15 ++++++------ 3 files changed, 21 insertions(+), 24 deletions(-) diff --git a/src/app/converter-selector/converter-selector.component.html b/src/app/converter-selector/converter-selector.component.html index 6dd3108..8f09eb9 100644 --- a/src/app/converter-selector/converter-selector.component.html +++ b/src/app/converter-selector/converter-selector.component.html @@ -1,9 +1,9 @@ -
+
- @for (c of converters; track c.getId()) { - + }
diff --git a/src/app/converter-selector/converter-selector.component.scss b/src/app/converter-selector/converter-selector.component.scss index e94e685..a44a0ad 100644 --- a/src/app/converter-selector/converter-selector.component.scss +++ b/src/app/converter-selector/converter-selector.component.scss @@ -1,4 +1,4 @@ -.selectwrapper { +.select_wrapper { margin: 0 0 1em 0; padding: 0; text-align: center; @@ -19,36 +19,36 @@ } } -.select { +select { background-color: #eee; border: none; color: #111; font-family: "ABeeZee", sans-serif; margin: 0; padding: 0.5em; + transition: background-color ease-in-out 200ms, color ease-in-out 200ms; &:focus, &:hover { background-color: #fff; color: #000; } - - transition: background-color ease-in-out 200ms, color ease-in-out 200ms; } .arrow_box { - position: relative; border: 1px solid transparent; + position: relative; + transition: background-color ease-in-out 200ms, border ease-in-out 200ms; &:after, &:before { - top: 100%; - left: 50%; border: solid transparent; content: " "; height: 0; - width: 0; - position: absolute; + left: 50%; pointer-events: none; + position: absolute; + top: 100%; transition: background-color ease-in-out 200ms, border ease-in-out 200ms; + width: 0; } &:after { @@ -63,13 +63,11 @@ margin-left: calc(-1em - 1px); } - &:has(>.select:focus, >.select:hover):after { + &:has(>select:focus, >select:hover):after { border-top-color: #fff; } - .selectwrapper > & { + .select_wrapper > & { display: inline-block; } - - transition: background-color ease-in-out 200ms, border ease-in-out 200ms; } diff --git a/src/app/text-input-field/text-input-field.component.scss b/src/app/text-input-field/text-input-field.component.scss index 1f42b54..56fbf07 100644 --- a/src/app/text-input-field/text-input-field.component.scss +++ b/src/app/text-input-field/text-input-field.component.scss @@ -1,22 +1,22 @@ :host { - display: block; border: none; + display: block; margin: 0 0 1em 0; padding: 0 1em 0 0; position: relative; &:after { - top: 100%; - left: 50%; border: 1em solid transparent; border-top-color: #eee; content: " "; height: 0; - width: 0; - position: absolute; - pointer-events: none; + left: 50%; margin-left: -1em; + pointer-events: none; + position: absolute; + top: 100%; transition: border-top-color ease-in-out 200ms; + width: 0; } &:has(>textarea:focus, >textarea:hover):after { @@ -33,12 +33,11 @@ textarea { margin: 0; padding: 0.5em; resize: vertical; + transition: background-color ease-in-out 200ms, color ease-in-out 200ms; width: 100%; &:focus, &:hover { background-color: #fff; color: #000; } - - transition: background-color ease-in-out 200ms, color ease-in-out 200ms; }