-
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 @@
-
-
-
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
-