manuel/converter
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

feature/dark-mode #13

Merged
manuel merged 5 commits from feature/dark-mode into main 2024-01-28 03:10:41 +01:00
Conversation 0 Commits 5 Files changed 11 +54 -21
2 changed files with 54 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 9f6bad0320 - Show all commits

27
src/app/converter-selector/converter-selector.component.scss
View file

@ -20,22 +20,22 @@
} }
select { select {
background-color: #eee; background-color: #222;
border: none; border: none;
color: #111; color: #eee;
font-family: "ABeeZee", sans-serif; font-family: "ABeeZee", sans-serif;
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
transition: background-color ease-in-out 200ms, color ease-in-out 200ms; transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
&:focus, &:hover { &:focus, &:hover {
background-color: #fff; background-color: #333;
color: #000; color: #fff;
} }
} }
.arrow_box { .arrow_box {
border: 1px solid transparent; border: 1px solid #888;
position: relative; position: relative;
transition: background-color ease-in-out 200ms, border ease-in-out 200ms; transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
@ -53,18 +53,29 @@ select {
&:after { &:after {
border-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0);
border-top-color: #eee; border-top-color: #222;
border-width: 1em; border-width: 1em;
margin-left: -1em; margin-left: -1em;
} }
&:before { &:before {
border-top-color: #888;
border-width: calc(1em + 1px); border-width: calc(1em + 1px);
margin-left: calc(-1em - 1px); margin-left: calc(-1em - 1px);
} }
&:has(>select:focus, >select:hover):after { &:has(>select:focus, >select:hover) {
border-top-color: #fff; &:after {
border-top-color: #333;
}
&:before {
border-top-color: #bbb;
}
}
&:hover {
border-color: #bbb;
} }
.select_wrapper > & { .select_wrapper > & {

48
src/app/text-input-field/text-input-field.component.scss
View file

@ -1,43 +1,65 @@
:host { :host {
border: none; border: 1px solid #888;
display: block; display: block;
margin: 0 0 1em 0; margin: 0 0 1em 0;
padding: 0 1em 0 0; padding: 0 1em 0 0;
position: relative; position: relative;
transition: border ease-in-out 200ms;
&:after { &:after, &:before {
border: 1em solid transparent; border: solid transparent;
border-top-color: #eee;
content: " "; content: " ";
height: 0; height: 0;
left: 50%; left: 50%;
margin-left: -1em;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: 100%; top: 100%;
transition: border-top-color ease-in-out 200ms; transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
width: 0; width: 0;
} }
&:has(>textarea:focus, >textarea:hover):after { &:after {
border-top-color: #fff; border-top-color: #222;
border-width: 1em;
margin-left: -1em;
}
&:before {
border-top-color: #888;
border-width: calc(1em + 1px);
margin-left: calc(-1em - 1px);
}
&:has(>textarea:focus, >textarea:hover) {
&:after {
border-top-color: #333;
}
&:before {
border-top-color: #bbb;
}
}
&:hover {
border-color: #bbb;
} }
} }
textarea { textarea {
background-color: #eee; background-color: #222;
border: none; border: none;
color: #111; color: #ddd;
font-family: "Liberation Mono", monospace; font-family: "Liberation Mono", monospace;
height: 10em; height: 10em;
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
resize: vertical; resize: vertical;
transition: background-color ease-in-out 200ms, color ease-in-out 200ms; transition: background-color ease-in-out 200ms, border-color ease-in-out 200ms, color ease-in-out 200ms;
width: 100%; width: 100%;
&:focus, &:hover { &:focus, &:hover {
background-color: #fff; background-color: #333;
color: #000; border-color: #bbb;
color: #fff;
} }
} }