Skip to content
Snippets Groups Projects
Unverified Commit dad14818 authored by Conrad Zelck's avatar Conrad Zelck
Browse files

style: cleanup and sort all styles 


Signed-off-by: default avatarConrad Zelck <git@simpel.cc>
parent 970cbcae
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 257 additions and 158 deletions
style.css
+ 257
− 158
View file @ dad14818
......@@ -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 */
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment