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

THIS is the real dark mode.
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse source
This commit is contained in:
Manuel Friedli 2024-01-28 02:40:04 +01:00
parent c212afee39
commit 9f6bad0320
Signed by: manuel
GPG key ID: 41D08ABA75634DA1
2 changed files with 54 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,22 +20,22 @@
}
select {
background-color: #eee;
background-color: #222;
border: none;
color: #111;
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: #fff;
color: #000;
background-color: #333;
color: #fff;
}
}
.arrow_box {
border: 1px solid transparent;
border: 1px solid #888;
position: relative;
transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
@ -53,18 +53,29 @@ select {
&:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #eee;
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(>select:focus, >select:hover):after {
border-top-color: #fff;
&:has(>select:focus, >select:hover) {
&:after {
border-top-color: #333;
}
&:before {
border-top-color: #bbb;
}
}
&:hover {
border-color: #bbb;
}
.select_wrapper > & {

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

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