Background inherit switched the whole backdrop to gray. It should be a
bit transparent.

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Otherwise marker and label are on two lines.

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

The label took more space then needed. Put the label above or below the
the touch elements.

Signed-off-by: Conrad Zelck <git@simpel.cc>

There is only one media query that makes side by side look among each
other when displays widht is smaller than 811px.

Second I made an automatically adapting font-size that fit's all I
tested.

Signed-off-by: Conrad Zelck <git@simpel.cc>

They are a bit smaller then buttons so their border radius won't fit.

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

see: https://andy-bell.co.uk/a-modern-css-reset



Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Use a div with attribute:
 - contenteditable="true"

It fixes a lot of issues:
 - height of #input needs no javascript to adapt to content
 - therefor no complex styles are needed
 - width will no longer exceed the given width by grid-template-column
 - styling etc. can be handled like the #output div next to it

You have to set two attributes for a11y:
 - role="textbox"
 - aria-multiline="true"

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

This is default. As the textarea had to get always an outline with 1px
to look like the rest it must be set thicker back to default focus
outline.

Signed-off-by: Conrad Zelck <git@simpel.cc>

As the busy dialog most of the time is very short a backdrop tends the
whole page to flicker. To avoid that let it original w/o backdrop.

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Otherwise there would be a much greater gap between header and main.
Header normally is styled by icluded style via head.php. This has the
correct margin. The padding-top from this local style.css did two gaps
together.

Signed-off-by: Conrad Zelck <git@simpel.cc>

A working website w/o file in- or output.

Signed-off-by: Conrad Zelck <git@simpel.cc>