TorstenHettstedt/PHP-App-Timekeeping
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Die Definition der Gestaltung wird durch LESS übernommen. Alle Geräte bis zum iPad und größer werden beachtet.

Browse Source
This commit is contained in:
Torstem_JetBrain
2021-04-14 14:13:12 +02:00
parent 1b4983a06f
commit 338c3ce5e4
15 changed files with 1248 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/public/less/lesslib/media_queries.less
+267
View File
@@ -0,0 +1,267 @@
//Media Queries
@media print {
* {
font-size: 10pt;
}
header, footer, main, nav, aside {
body > & {
width: 19cm;
margin: auto;
.border-box();
}
}
header, footer{
padding: 0.5rem;
;
}
body {
& > header {
font-size: 200%;
font-weight: bolder;
}
& > nav, > header {
display: none;
}
}
main {
padding: 1.5rem 0.5rem 3.25rem;
.flexKinder(flow,'row');
width: @breiteTextBereich;
section {
padding: 0 0.5rem;
h1, h2, p {
margin-bottom: 1rem;
}
footer {
padding: 0;
p {
padding: 0.5rem;
font-size: 85%;
margin-bottom: 0;
}
}
article.liste {
page-break-after: always;
}
}
h1, h2 {
margin-left: 5em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
table {
margin: auto;
td, th {
padding: 0.5rem;
collapse: true;
}
}
}
aside {
padding-top: 2rem;
.flexKinder(flow,'row');
width: @breiteNavBereich;
}
}
@media screen and (min-width: 831px) {
header, footer, main, nav, aside {
body > & {
width: @breiteMainBereich;
margin: auto;
.border-box();
}
}
header, footer{
padding: 0.5rem;
}
body {
& > header {
font-size: 200%;
font-weight: bolder;
}
& > nav {
ul {
.flexEltern();
margin: 0;
li {
display: inline-block;
height: 1.5rem;
padding: 0.5rem 1rem;
}
}
}
}
main {
padding: 1.5rem 0.5rem 3.25rem;
.flexKinder(flow,'row');
width: @breiteTextBereich;
section {
padding: 0 0.5rem;
h1, h2, p {
margin-bottom: 1rem;
}
footer {
padding: 0;
p {
padding: 0.5rem;
font-size: 85%;
margin-bottom: 0;
}
}
}
h1, h2 {
margin-left: 5em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
table {
margin: auto;
td, th {
padding: 0.5rem;
}
}
}
aside {
padding-top: 2rem;
.flexKinder(flow,'row');
width: @breiteNavBereich;
}
}
@media screen and (max-width: 830px) {
html body {
@boxHeight: 5rem;
& > header {
height: @boxHeight;
font-size: @boxHeight;
text-align: center;
padding: 1rem;
}
& > nav {
background: none;
left:auto;
ul {
li {
display: inline-block;
border: none;
width: auto;
a {
padding: 0.75rem;
}
&:not(:first-child) {
border-left: none;
}
}
}
}
main section {
header {
padding: 0 0.5rem;
h1, h2, p {
margin-bottom: 1rem;
}
h1, h2 {
margin-left: 5em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
}
form {
@formLabelWidth: 10rem;
@formItemWidth: 40rem;
@sectionMargin: 1rem;
fieldset {
width: auto;
margin: 1rem auto;
padding: @sectionMargin;
legend {
margin: @sectionMargin;
margin-left: @sectionMargin * 2;
}
div {
& > label {
width: auto;
display: inline-block;
margin: 0.5rem;
}
input, textarea {
display: inline-block;
width: auto;
padding: 0.25rem;
margin: 0.5rem;
margin-bottom: 1.0rem;
border-style: solid;
border-width: thin;
}
div.radio-button {
padding-left: 20%;
label, input {
display: inline;
width: auto;
}
input {
margin-top: inherit;
margin-right: 1rem;
margin-left: 1rem;
margin-bottom: inherit;
}
}
textarea {
height: 10rem;
}
ul.suche {
width: 30rem;
margin-left: @formLabelWidth + 1.5rem;
margin-top: -1rem;
background: white;
position: absolute;
border: solid thin;
li {list-style: none;
text-indent: 0;
cursor: pointer;
&:hover {
background: @mainColorLight;
color: @mainColor;
}
}
}
}
}
}
}
table {
width: 90%;
margin: 5%;
td, th {
padding: 0.25rem;
}
colgroup:not(:first-child) col:first-child{
border-left: solid thin;
}
thead {
th {
font-size: 100%;
font-weight: bold;
}
}
}
}
}
@media screen and (max-width: 720px) {
}