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

Dark mode, clean up.

Browse source
This commit is contained in:
Manuel Friedli 2024-01-28 02:15:39 +01:00
parent 77d57f089c
commit c212afee39
Signed by: manuel
GPG key ID: 41D08ABA75634DA1
3 changed files with 21 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/converter-selector/converter-selector.component.html
View file

@ -1,9 +1,9 @@
<div [ngClass]="{selectwrapper: true, error: step.error}">
<div [ngClass]="{select_wrapper: true, error: step.error}">
<div class="arrow_box">
<select class="select" (change)="convert($event)">
<select (change)="convert($event)">
<option id="undefined">Select conversion ...</option>
@for (c of converters; track c.getId()) {
<option class="option" id="{{c.getId()}}">{{ c.getDisplayname() }}</option>
<option id="{{c.getId()}}">{{ c.getDisplayname() }}</option>
}
</select>
</div>

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

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

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

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