diff --git a/style.css b/style.css
index fc6c2d3aaf6304b7c8099da7927073ca1588fc4e..e5a8775df1a85478f2c75e0dc6e13b61f2cb40be 100644
--- a/style.css
+++ b/style.css
@@ -3,45 +3,21 @@
--default-body-bottom-margin: 2vmin;
}
-body {
- display: flex;
- flex-direction: column;
- height: 100%
-}
+/* *****************************************************************************
-main {
- display: flex;
- flex-direction: column;
- height: 100%
-}
+ personal header styling
-.max-height {
- display: flex;
- flex-direction: column;
- height: 100%
-}
-
-.max-height > .two-column {
- flex-grow: 1;
- flex-basis: auto;
- height: 100%
-}
-
-.left, .right {
- height: 100%;
- display: flex;
- flex-direction: column;
-}
+***************************************************************************** */
body {
- height: calc(100vh - 3vmin); /* abzüglich margin-top */
+ height: calc(100vh - 3vmin); /* minus margin-top - margin bottom is 0 */
font-family: helvetica, Arial, sans-serif;
font-size: 2vmin;
background-color: #555;
color: white;
- /* margin-bottom errechnet sich hier zu 0
- dieses margin muss von den untersten Elementen gesetzt werden,
- da sie bis ganz unten gehen sollen */
+ /* margin-bottom is calculated here to 0
+ this margin must be set by the lowest elements,
+ because they should go to the very bottom */
margin: 3vmin 4vmin calc(var(--default-body-bottom-margin) - var(--default-body-bottom-margin)) 4vmin;
}
@@ -50,6 +26,58 @@ body {
outline-offset: 2px;
}
+a {
+ color: #ffffff;
+}
+
+header a {
+ text-decoration: none;
+}
+
+/* kind of disabled link - text-decoration will be none automatically */
+a:not([href]) {
+ color: #AAAAAA;
+}
+
+header {
+ margin-bottom: 1.5em;
+}
+
+nav {
+ display: flex;
+ align-items: center;
+ column-gap: 0.7em;
+}
+
+h1 {
+ font-size: 1.5em;
+ margin: 0;
+}
+
+#github {
+ margin-left: auto;
+}
+
+#github-cat {
+ height: 1.5em;
+}
+
+/* *****************************************************************************
+
+ reset user agent styles
+
+***************************************************************************** */
+
+button, input, select {
+ font-size: inherit;
+}
+
+/* *****************************************************************************
+
+ style dialog for error or busy messages
+
+***************************************************************************** */
+
dialog {
color: white;
}
@@ -92,228 +120,296 @@ dialog.busy-dialog button {
display: none;
}
-a {
- color: #ffffff;
-}
+/* *****************************************************************************
-header a {
- text-decoration: none;
-}
+ colors
-/* kind of disabled link - text-decoration will be none automatically */
-a:not([href]) {
- color: #AAAAAA;
+***************************************************************************** */
+
+button, input {
+ color: white;
+ background-color: #333;
}
-header {
- margin-bottom: 1.5em;
+select {
+ color: black;
+ background-color: white;
}
-nav {
- display: flex;
- align-items: center;
- column-gap: 0.7em;
+input[type="file"] {
+ background-color: inherit;
}
-h1 {
- font-size: 1.5em;
- margin: 0;
+button:disabled, input:disabled, textarea:disabled,
+div.disabled, p.disabled, label.disabled,
+#input.disabled, #output.disabled,
+label:has(> input:disabled) {
+ color: #AAAAAA;
+ background-color: inherit;
}
-#output h1 {
- font-size: 2em;
+/* *****************************************************************************
+
+ borders and outlines
+
+***************************************************************************** */
+
+details[open] > #details {
+ outline: 2px solid white;
+ /* margin above needed this outline offset */
+ outline-offset: calc(1.5vmin - 1px);
}
-#github {
- margin-left: auto;
+input[type=checkbox]:focus {
+ outline: 1.2px solid white;
+ outline-offset: 1px;
}
-#github-cat {
- height: 1.5em;
+button, input, select {
+ border: 2px solid;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ border-color: white;
}
-main .first-in-main {
- padding-top: calc(var(--default-top-padding) - 0.8em);
+input[type="file"] {
+ border: 0;
}
-details {
- padding-top: var(--default-top-padding);
+#input, #output {
+ border: 1px solid white;
+ outline: 1px solid white;
}
-details[open] > #details {
+#input:focus {
outline: 2px solid white;
- outline-offset: calc(1.5vmin - 1px);
}
-details summary {
- cursor: pointer;
+button:disabled, input:disabled, textarea:disabled,
+div.disabled, p.disabled, label.disabled,
+#input.disabled, #output.disabled {
+ border-color: #AAAAAA;
+ outline-color: #AAAAAA;
}
-details[open] summary {
- padding-bottom: 1vmin;
- margin-bottom: 2vmin;
- margin-left: 3px;
-}
+/* *****************************************************************************
+
+ specials
+***************************************************************************** */
+
+button, input, select,
details summary {
- padding-bottom: 0;
+ cursor: pointer;
}
-#details {
- margin: 1.5vmin;
+summary {
+ /* just to avoid a big white border on focus */
+ width: 8ch;
}
-#checkboxes, #selects {
- display: flex;
- column-gap: 3vmin;
- row-gap: 2vmin;
+p.label {
+ font-size: 1.2em;
+ display: inline;
+ pointer-events: none;
}
-#selects {
- padding-top: var(--default-top-padding);
+button:disabled, input:disabled, textarea:disabled,
+div.disabled, p.disabled, label.disabled,
+#input.disabled, #output.disabled {
+ pointer-events: none;
}
-summary {
- width: 8ch;
+/* *****************************************************************************
+
+ styles below are necessary for *not* styling the preview in the #output
+
+***************************************************************************** */
+
+pre {
+ text-wrap: pretty;
+ word-break: break-word;
+ margin: 0;
+ font-family: inherit;
}
-input[type=checkbox] {
- margin-top: 0;
- margin-right: 1vmin;
- /* make the checkbox a bit bigger and move a bit down */
- transform: scale(1.5) translateY(2px);
+th {
+ text-align: left;
}
-input[type=checkbox]:focus {
- outline: 1.2px solid white;
- outline-offset: 1px;
+/* *****************************************************************************
+
+ all margins and paddings to have them together
+
+***************************************************************************** */
+
+main .first-in-main {
+ padding-top: calc(var(--default-top-padding) - 0.8em);
}
-select {
- font-size: inherit;
- margin-left: 1vmin;
+.two-column {
+ padding-top: var(--default-top-padding);
}
-label {
- font-size: 1em;
+details {
+ padding-top: var(--default-top-padding);
}
-.labelLikeHeading {
- font-size: 1.2em
+details summary {
+ padding-bottom: 0;
}
-p.label {
- margin:0;
- font-size: 1.2em;
- display: inline;
- pointer-events: none;
+details[open] summary {
+ margin-bottom: 2vmin;
+ margin-left: 3px;
+ padding-bottom: 1vmin;
}
-/* select shall fill the rest of the column right from label */
-.label-w-select {
- display: flex;
- justify-content: start;
- flex-direction: row;
+#details {
+ margin: 1.5vmin;
}
-.label-w-select select {
- flex-grow: 1;
+button, input[type=button] {
+ padding: 5px 10px;
}
-#input:focus {
- outline: 2px solid white;
+select {
+ padding-right: 0px;
}
-button, input {
- font-size: 1em;
- padding: 5px 10px;
- color: white;
- border: 2px solid;
- cursor: pointer;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- border-color: white;
- background-color: #333;
+input[type=checkbox] {
+ margin: 0;
+ margin-right: 1vmin;
}
input[type="file"] {
padding: 0;
- color: white;
- border: 0;
- background-color: inherit;
-}
-
-button:disabled, input:disabled, textarea:disabled {
- background-color: inherit;
- color: #AAAAAA;
- border-color: #AAAAAA;
- outline-color: #AAAAAA;
- pointer-events: none;
}
-div.disabled, p.disabled, label.disabled, #input.disabled, #output.disabled {
- background-color: inherit;
- color: #AAAAAA;
- border-color: #AAAAAA;
- outline-color: #AAAAAA;
- pointer-events: none;
+#selects {
+ padding-top: var(--default-top-padding);
}
-label:has(> input:disabled) {
- color: #AAAAAA;
+#example {
+ margin-top: var(--default-top-padding);
}
form.file {
- padding-top: var(--default-top-padding);
+ padding-top: calc(var(--default-top-padding) / 2);
}
div.download {
/* + 5px to align with the button in the left segment */
- padding-top: calc(var(--default-top-padding) + 5px);
+ padding-top: calc(var(--default-top-padding) / 2 + 2px);
}
-#example {
+p.label {
+ margin:0;
+}
+
+#input, #output {
margin-top: var(--default-top-padding);
+ /* replaces the margin-bottom of the body
+ as these elements should go till the end */
+ margin-bottom: var(--default-body-bottom-margin);
+ padding: 0.5rem;
}
+/* *****************************************************************************
+
+ positioning of elements
+
+***************************************************************************** */
+
.two-column {
- padding-top: var(--default-top-padding);
display: grid;
- /* exactly the same size
- instead of "grid-template-columns: 1fr 1fr;" */
+ /* columns with exactly the same size
+ instead of "grid-template-columns: 1fr 1fr;" <-- buggy */
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 3vmin;
row-gap: 2vmin;
}
+#checkboxes, #selects {
+ display: flex;
+ column-gap: 3vmin;
+ row-gap: 2vmin;
+}
+
+#selects > label {
+ display: flex;
+ column-gap: 1vmin;
+}
+
+/* used to set both buttons on the right side of both columns */
.flex-space-between {
display: flex;
justify-content: space-between;
align-items: baseline;
}
-#input, #output {
- margin-top: var(--default-top-padding);
- /* ersetzt den margin-bottom vom body
- da dieses Element bis zum Ende gehen soll */
- margin-bottom: var(--default-body-bottom-margin);
- padding: 0.5rem;
- border: 1px solid white;
- outline: 1px solid white;
+/* select shall fill the rest of the column right from label */
+.left.label-w-select, .right.label-w-select {
+ display: flex;
+ justify-content: start;
+ flex-direction: row;
+ column-gap: 1vmin;
+}
+
+.label-w-select select {
flex-grow: 1;
}
-pre {
- text-wrap: pretty;
- word-break: break-word;
- margin: 0;
- font-family: inherit;
+/* *****************************************************************************
+
+ positioning of elements - special
+ following styles keep track, that at least both last divs #input and #output
+ side by side will always fill up to the end of the page
+
+***************************************************************************** */
+
+body {
+ display: flex;
+ flex-direction: column;
+ /* disabled here because my personal default body seen on top */
+ /* height: 100%; */
}
-th {
- text-align: left;
+main {
+ display: flex;
+ flex-direction: column;
+ height: 100%
+}
+
+.max-height {
+ display: flex;
+ flex-direction: column;
+ height: 100%
+}
+
+.max-height > .two-column {
+ flex-grow: 1;
+ flex-basis: auto;
+ height: 100%
+}
+
+.left, .right {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+#input, #output {
+ flex-grow: 1;
}
+
+/* *****************************************************************************
+
+ media queries here
+
+***************************************************************************** */
+
/* from here two columns side by side are not working */
@media (max-width: 850px) {
body {
@@ -322,6 +418,9 @@ th {
.two-column {
grid-template-columns: minmax(0, 1fr);
}
+ #selects > label {
+ display: block;
+ }
}
/* iPad portait */