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 b31f217..ca856d6 100644 --- a/src/app/converter-selector/converter-selector.component.scss +++ b/src/app/converter-selector/converter-selector.component.scss @@ -1,74 +1,84 @@ -.selectwrapper { +.select_wrapper { margin: 0 0 1em 0; padding: 0; text-align: center; + &.error { > .arrow_box { border-color: red; + &:before { border-top-color: red; } } + select { color: red; + transition: background-color ease-in-out 200ms, color ease-in-out 200ms; } } } -.select { - background-color: #fff; +select { + background-color: #222; border: none; - color: #000; + color: #eee; 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: #333; + color: #fff; + } } .arrow_box { + border: 1px solid #888; position: relative; - background: #fff; - border: 1px solid #aaa; - &:focus { - border-color: #888; - } - &:hover { - border-color: #333; - } + 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 { border-color: rgba(255, 255, 255, 0); - border-top-color: #fff; + border-top-color: #222; border-width: 1em; margin-left: -1em; } + &:before { - border-color: rgba(170, 170, 170, 0); - border-top-color: #aaa; + border-top-color: #888; border-width: calc(1em + 1px); margin-left: calc(-1em - 1px); } - &:focus:before { - border-color: rgba(136, 136, 136, 0); - border-top-color: #888; + + &:has(>select:focus, >select:hover) { + &:after { + border-top-color: #333; + } + + &:before { + border-top-color: #bbb; + } } - &:hover:before { - border-color: rgba(51, 51, 51, 0); - border-top-color: #333; + + &:hover { + border-color: #bbb; } - .selectwrapper > & { + + .select_wrapper > & { display: inline-block; } } - -.option { - /* font-family: "ABeeZee", sans-serif;*/ -} diff --git a/src/app/text-input-field/text-input-field.component.html b/src/app/text-input-field/text-input-field.component.html index 7000fb7..4f6f3ec 100644 --- a/src/app/text-input-field/text-input-field.component.html +++ b/src/app/text-input-field/text-input-field.component.html @@ -1,4 +1,2 @@ -
- -
+ 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 89dc5f9..a026e44 100644 --- a/src/app/text-input-field/text-input-field.component.scss +++ b/src/app/text-input-field/text-input-field.component.scss @@ -1,69 +1,65 @@ -.textwrapper { +:host { + border: 1px solid #888; + display: block; margin: 0 0 1em 0; padding: 0 1em 0 0; -} - -.arrow_box { position: relative; - background: #fff; - border: 1px solid #aaa; - &:focus { - border-color: #888; - } - &:hover { - border-color: #333; - } + transition: 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 { - border-color: rgba(255, 255, 255, 0); - border-top-color: #fff; + border-top-color: #222; border-width: 1em; margin-left: -1em; } + &:before { - border-color: rgba(170, 170, 170, 0); - border-top-color: #aaa; + border-top-color: #888; border-width: calc(1em + 1px); margin-left: calc(-1em - 1px); } - &:focus:before { - border-color: rgba(136, 136, 136, 0); - border-top-color: #888; + + &:has(>textarea:focus, >textarea:hover) { + &:after { + border-top-color: #333; + } + + &:before { + border-top-color: #bbb; + } } - &:hover:before { - border-color: rgba(51, 51, 51, 0); - border-top-color: #333; + + &:hover { + border-color: #bbb; } } -.textinput { - background-color: #fff; +textarea { + background-color: #222; border: none; - color: #000; - font-family: "Free Monospaced", monospace; + color: #ddd; + font-family: "Liberation Mono", monospace; height: 10em; margin: 0; padding: 0.5em; resize: vertical; + transition: background-color ease-in-out 200ms, border-color ease-in-out 200ms, color ease-in-out 200ms; width: 100%; - &:focus { - border-color: #888; - } - &:hover { - border-color: #333; - } -} -.errormessage { - color: red; - text-align: center; + &:focus, &:hover { + background-color: #333; + border-color: #bbb; + color: #fff; + } } diff --git a/src/assets/fonts/freemono.eot b/src/assets/fonts/freemono.eot deleted file mode 100644 index 2646fe5..0000000 Binary files a/src/assets/fonts/freemono.eot and /dev/null differ diff --git a/src/assets/fonts/freemono.svg b/src/assets/fonts/freemono.svg deleted file mode 100644 index 0f698ba..0000000 --- a/src/assets/fonts/freemono.svg +++ /dev/null @@ -1,636 +0,0 @@ - - - - - Created by FontForge 20110222 at Fri Feb 17 12:20:04 2012 - By www-data - Copyleft 2002, 2003, 2005, 2008, 2009, 2010 Free Software Foundation. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/fonts/freemono.ttf b/src/assets/fonts/freemono.ttf deleted file mode 100644 index 3a661a3..0000000 Binary files a/src/assets/fonts/freemono.ttf and /dev/null differ diff --git a/src/assets/fonts/freemono.woff b/src/assets/fonts/freemono.woff deleted file mode 100644 index 97fe047..0000000 Binary files a/src/assets/fonts/freemono.woff and /dev/null differ diff --git a/src/assets/fonts/liberationmono-regular.ttf b/src/assets/fonts/liberationmono-regular.ttf new file mode 100644 index 0000000..e774859 Binary files /dev/null and b/src/assets/fonts/liberationmono-regular.ttf differ diff --git a/src/index.html b/src/index.html index 42c6ac3..a8dc30f 100644 --- a/src/index.html +++ b/src/index.html @@ -11,12 +11,12 @@

Convert it all

-