Merge pull request 'feature/css-datei' (#11) from feature/css-datei into master
Reviewed-on: #11
This commit was merged in pull request #11.
This commit is contained in:
@@ -1 +0,0 @@
|
|||||||
|
|
||||||
@@ -10,7 +10,8 @@
|
|||||||
<title>Svelte app</title>
|
<title>Svelte app</title>
|
||||||
|
|
||||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||||
<link rel="stylesheet" href="/global.css">
|
<link rel="stylesheet" href="/global.css" media="screen">
|
||||||
|
<link rel="stylesheet" href="/print.css" media="print">
|
||||||
<link rel="stylesheet" href="/bundle.css">
|
<link rel="stylesheet" href="/bundle.css">
|
||||||
<script type="module" src="https://unpkg.com/dimport?module" data-main="/index.js"></script>
|
<script type="module" src="https://unpkg.com/dimport?module" data-main="/index.js"></script>
|
||||||
<script nomodule src="https://unpkg.com/dimport/nomodule" data-main="/index.js"></script>
|
<script nomodule src="https://unpkg.com/dimport/nomodule" data-main="/index.js"></script>
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
// Einstellungen auf die Grundlagen zurücksetzen,
|
||||||
|
// beinhaltet auch Einstellungen für die neuen HTML5-Tags
|
||||||
|
//noinspection CssUnknownTarget
|
||||||
|
@import "meyer_resets.css";
|
||||||
|
// Import und Einbindung der Zeichensätze
|
||||||
|
@import "lesslib/fonts.less";
|
||||||
|
// Bestimmung der Farben
|
||||||
|
@import "lesslib/colors.less";
|
||||||
|
// Mixins des Layouts
|
||||||
|
@import "lesslib/mixins.less";
|
||||||
|
// Layout-Unabhängige Mixins
|
||||||
|
@import "lesslib/mixins.framework.less";
|
||||||
|
// Bestimmung des grundsätzlichen Erscheinungsbildes der einzelnen Elemente,
|
||||||
|
// einschließlich des Hauptbereiches
|
||||||
|
@import "lesslib/basics.less";
|
||||||
|
// Darstellung unabhängig der Darstellungsgrößen
|
||||||
|
@import "lesslib/layout.less";
|
||||||
|
// Darstellung in den verschiedenen Ansichtsgrößen
|
||||||
|
@import "lesslib/media_queries.less";
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
html {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #000;
|
||||||
|
font-size: 1em;
|
||||||
|
font-family: OpenSans, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
|
||||||
|
text-align: left;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong, b {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
em, i {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section article {
|
||||||
|
font-size: 95%;
|
||||||
|
p, ul, ol, dl {
|
||||||
|
line-height: 1.5em;
|
||||||
|
.hyphens();
|
||||||
|
font-size: 1.00em;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
ul, ol {
|
||||||
|
li {
|
||||||
|
list-style: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dl {
|
||||||
|
dt {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h1, h2, h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.50em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.30em;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1.20em;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
colgroup:not(:first-child) col:first-child{
|
||||||
|
border-left: solid thin;
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
th {
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
fieldset {
|
||||||
|
legend {
|
||||||
|
font-size: 1.30em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
/**
|
||||||
|
Definition der Farben
|
||||||
|
*/
|
||||||
|
|
||||||
|
@hueMain: 35;
|
||||||
|
@hueSub: 215;
|
||||||
|
|
||||||
|
@mainColor: hsl(@hueMain, 90%, 29%);
|
||||||
|
@mainColorDark: darken(@mainColor,66%,relativ);
|
||||||
|
@mainColorLight: lighten(@mainColor,66%,relativ);
|
||||||
|
@subColor: hsl(@hueSub, 90%, 29%);
|
||||||
|
@subColorDark: darken(@subColor,66%,relativ);
|
||||||
|
@subColorLight: lighten(@subColor,66%,relativ);
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: OpenSans;
|
||||||
|
src: url(../fonts/opensans-regular.eot);
|
||||||
|
src: url(../fonts/opensans-regular.eot?#iefix) format("embedded-opentype"),
|
||||||
|
url(../fonts/opensans-regular.woff) format("woff"),
|
||||||
|
url(../fonts/opensans-regular.ttf) format("truetype"),
|
||||||
|
url(../fonts/opensans-regular.svg#open_sansregular) format("svg");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: OpenSans;
|
||||||
|
src: url(../fonts/opensans-italic.eot);
|
||||||
|
src: url(../fonts/opensans-italic.eot?#iefix) format("embedded-opentype"),
|
||||||
|
url(../fonts/opensans-italic.woff) format("woff"),
|
||||||
|
url(../fonts/opensans-italic.ttf) format("truetype"),
|
||||||
|
url(../fonts/opensans-italic.svg#open_sansitalic) format("svg");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: OpenSans;
|
||||||
|
src: url(../fonts/opensans-bold.eot);
|
||||||
|
src: url(../fonts/opensans-bold.eot?#iefix) format("embedded-opentype"),
|
||||||
|
url(../fonts/opensans-bold.woff) format("woff"),
|
||||||
|
url(../fonts/opensans-bold.ttf) format("truetype"),
|
||||||
|
url(../fonts/opensans-bold.svg#open_sansbold) format("svg");
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: OpenSans;
|
||||||
|
src: url(../fonts/opensans-bolditalic.eot);
|
||||||
|
src: url(../fonts/opensans-bolditalic.eot?#iefix) format("embedded-opentype"),
|
||||||
|
url(../fonts/opensans-bolditalic.woff) format("woff"),
|
||||||
|
url(../fonts/opensans-bolditalic.ttf) format("truetype"),
|
||||||
|
url(../fonts/opensans-bolditalic.svg#open_sansbold_italic) format("svg");
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
@@ -0,0 +1,146 @@
|
|||||||
|
@breiteMainBereich: 70rem;
|
||||||
|
@breiteTextBereich: 60rem;
|
||||||
|
@breiteNavBereich: @breiteMainBereich - @breiteTextBereich;
|
||||||
|
|
||||||
|
html {
|
||||||
|
body {
|
||||||
|
background: @mainColorLight;
|
||||||
|
> header, > footer {
|
||||||
|
color: @mainColorDark;
|
||||||
|
background: @mainColor;
|
||||||
|
font-family: serif;
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-indent: inherit;
|
||||||
|
&:first-letter {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> header h1 {
|
||||||
|
margin: 1rem auto;
|
||||||
|
}
|
||||||
|
> footer {
|
||||||
|
color: contrast(@mainColorDark);
|
||||||
|
}
|
||||||
|
& > nav {
|
||||||
|
ul {
|
||||||
|
background: darken(@mainColorLight,33%,relativ);
|
||||||
|
li {
|
||||||
|
font-weight: bold;
|
||||||
|
&:not(:first-child) {
|
||||||
|
border-left: @mainColorDark solid thin;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: @mainColorDark;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: lighten(@mainColor,20%,relativ);
|
||||||
|
a {
|
||||||
|
color: lighten(@mainColor,66%,relativ);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.selected, &.selected:hover {
|
||||||
|
background: lighten(@mainColor,10%,relativ);
|
||||||
|
a {
|
||||||
|
color: lighten(@mainColor,66%,relativ);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
* {
|
||||||
|
border-style: none;
|
||||||
|
border-color: @mainColorDark;
|
||||||
|
border-width: medium;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
@sectionMargin: 1rem;
|
||||||
|
h1, h2 {
|
||||||
|
margin: @sectionMargin;
|
||||||
|
}
|
||||||
|
p, ul, ol, dl {
|
||||||
|
margin: @sectionMargin;
|
||||||
|
text-indent: @sectionMargin * 2;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
thead {
|
||||||
|
tr:last-child {
|
||||||
|
td, th {
|
||||||
|
border-bottom: @mainColor solid thin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
@formLabelWidth: 10rem;
|
||||||
|
@formItemWidth: 40rem;
|
||||||
|
fieldset {
|
||||||
|
width: @formItemWidth + @formLabelWidth + 2rem;
|
||||||
|
margin: 1rem auto;
|
||||||
|
border-style: solid ;
|
||||||
|
border-color: @mainColor;
|
||||||
|
padding: @sectionMargin;
|
||||||
|
&.tasten {
|
||||||
|
border: none;
|
||||||
|
background-color: @mainColorLight;
|
||||||
|
}
|
||||||
|
legend {
|
||||||
|
margin: @sectionMargin;
|
||||||
|
margin-left: @sectionMargin * 2;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
& > label {
|
||||||
|
width: @formLabelWidth;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
display: inline-block;
|
||||||
|
width: @formItemWidth;
|
||||||
|
padding: 0.25rem;
|
||||||
|
margin-bottom: 1.0rem;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: thin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
.button(@mainColor, spin(lighten(@mainColor,66%,relativ),@subColor));
|
||||||
|
&.sub-button {
|
||||||
|
.button(lighten(@mainColor,20%,relativ), spin(@mainColor,@subColor));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
text-align: right;
|
||||||
|
padding: 0;
|
||||||
|
p {
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin: inherit;
|
||||||
|
text-indent: inherit;
|
||||||
|
&:first-letter {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
background: @mainColorLight ;
|
||||||
|
color: @mainColor ;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 85%;
|
||||||
|
}
|
||||||
|
nav li {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
border-bottom-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,306 @@
|
|||||||
|
//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;
|
||||||
|
}
|
||||||
|
& > footer {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
& > nav {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
border: none;
|
||||||
|
width: auto;
|
||||||
|
height: 1.5em;
|
||||||
|
padding-top: 0.25em;
|
||||||
|
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;
|
||||||
|
margin: @sectionMargin;
|
||||||
|
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) {
|
||||||
|
html body {
|
||||||
|
@boxHeight: 2.5rem;
|
||||||
|
& > header {
|
||||||
|
height: @boxHeight;
|
||||||
|
font-size: @boxHeight;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > nav {
|
||||||
|
.hamburgerMenu();
|
||||||
|
}
|
||||||
|
main section header {
|
||||||
|
h1, h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.5rem auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
margin: 1rem 0;
|
||||||
|
td, th {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
colgroup:not(:first-child) col:first-child{
|
||||||
|
border-left: solid thin;
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
th {
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: bold;
|
||||||
|
.hyphens();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
.hyphens() {
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
-moz-hyphens: auto;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-box() {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-gradient(@stop1, @stop2) {
|
||||||
|
.gradient(0deg, @stop1, @stop2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-gradient(@stop1, @stop2) {
|
||||||
|
.gradient(-90deg, @stop1, @stop2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient(@winkel, @stop1, @stop2) {
|
||||||
|
@winkelOld: @winkel + 90deg;
|
||||||
|
@groundColor: @stop2;
|
||||||
|
background: @groundColor -moz-linear-gradient(@winkelOld, @stop2, @stop1);
|
||||||
|
background: @groundColor -webkit-linear-gradient(@winkelOld, @stop2, @stop1);
|
||||||
|
background: @groundColor -o-linear-gradient(@winkelOld, @stop2, @stop1);
|
||||||
|
background: @groundColor -ms-linear-gradient(@winkelOld, @stop2, @stop1);
|
||||||
|
background: @groundColor linear-gradient(@winkel, @stop2, @stop1);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-shadow(...) {
|
||||||
|
-webkit-box-shadow: @arguments;
|
||||||
|
-moz-box-shadow: @arguments;
|
||||||
|
box-shadow: @arguments;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-radius(...) {
|
||||||
|
-webkit-border-radius: @arguments;
|
||||||
|
-moz-border-radius: @arguments;
|
||||||
|
border-radius: @arguments;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nowrap() {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburgerMenu() {
|
||||||
|
color: white;
|
||||||
|
width: 3rem;
|
||||||
|
height: 2rem;
|
||||||
|
top: 0.25rem;
|
||||||
|
left: 0.25rem;
|
||||||
|
.border-radius(4px);
|
||||||
|
border: none;
|
||||||
|
.vertical-gradient(@mainColorDark; @mainColor);
|
||||||
|
> ul {
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 100%;
|
||||||
|
background: fade(@mainColorDark,80%);
|
||||||
|
.border-radius(5px);
|
||||||
|
display: none;
|
||||||
|
> li {
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
line-height: normal;
|
||||||
|
border: none;
|
||||||
|
&:not(:first-child) {
|
||||||
|
border-top: 1px #888 solid;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
.nowrap();
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
color: white;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: white;
|
||||||
|
.vertical-gradient(@mainColorLight; @mainColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
a {
|
||||||
|
.border-radius( 5px 5px 0 0 );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
a {
|
||||||
|
.border-radius( 0 0 5px 5px );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover, &:focus, &:active, &:checked {
|
||||||
|
ul {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
content: "\2261";
|
||||||
|
font-size: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0.8em;
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexEltern() {
|
||||||
|
display:-ms-flexbox;
|
||||||
|
display: flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexEltern(column) {
|
||||||
|
display:-ms-flexbox;
|
||||||
|
display: flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexKinder(flow, @rest...) {
|
||||||
|
-webkit-flex-flow: @rest;
|
||||||
|
-ms-flex-flow: @rest;
|
||||||
|
flex-flow: @rest;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexKinder(glow, @num) {
|
||||||
|
-webkit-flex-grow: @num;
|
||||||
|
-ms-flex: @num;
|
||||||
|
flex: @num;
|
||||||
|
flex-grow: @num;
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
.button(@color, @colorFont) {
|
||||||
|
@colorBackground: @color;
|
||||||
|
@colorBackgroundLight: lighten(@colorBackground,50%,relativ);
|
||||||
|
@colorShadow: fade(@colorBackground,50%);
|
||||||
|
height: 2.5em;
|
||||||
|
.border-radius(1.25em);
|
||||||
|
padding: 0.5em 1.25em;
|
||||||
|
.vertical-gradient(@colorBackgroundLight, @colorBackground);
|
||||||
|
.box-shadow(0.1em 0.2em 0.5em @colorShadow);
|
||||||
|
color: @colorFont;
|
||||||
|
font-weight: bold;
|
||||||
|
&:hover {
|
||||||
|
.vertical-gradient(@colorBackground, @colorBackgroundLight);
|
||||||
|
}
|
||||||
|
margin: 0.25rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
html {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #000;
|
||||||
|
font-size: 1em;
|
||||||
|
font-family: OpenSans, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
|
||||||
|
text-align: left;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong, b {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
em, i {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section article {
|
||||||
|
font-size: 95%;
|
||||||
|
p, ul, ol, dl {
|
||||||
|
line-height: 1.5em;
|
||||||
|
//noinspection TaskProblemsInspection,LessResolvedByNameOnly
|
||||||
|
.hyphens();
|
||||||
|
font-size: 1.00em;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
ul, ol {
|
||||||
|
li {
|
||||||
|
list-style: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dl {
|
||||||
|
dt {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h1, h2, h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.50em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.30em;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1.20em;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
thead {
|
||||||
|
th {
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
fieldset {
|
||||||
|
legend {
|
||||||
|
font-size: 1.30em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
div.zelle > label {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.http-error {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
/**
|
||||||
|
Definition der Farben
|
||||||
|
*/
|
||||||
|
|
||||||
|
@hueMain: 180;
|
||||||
|
@hueSub: 60;
|
||||||
|
|
||||||
|
@mainColor: hsl(@hueMain, 90%, 29%);
|
||||||
|
@mainColorDark: darken(@mainColor,66%,relativ);
|
||||||
|
@mainColorLight: lighten(@mainColor,66%,relativ);
|
||||||
|
@subColor: hsl(@hueSub, 90%, 29%);
|
||||||
|
@subColorDark: darken(@subColor,66%,relativ);
|
||||||
|
@subColorLight: lighten(@subColor,66%,relativ);
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
html {
|
||||||
|
body {
|
||||||
|
> header, > footer {
|
||||||
|
background: none;
|
||||||
|
font-family: serif;
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-indent: inherit;
|
||||||
|
&:first-letter {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> header {
|
||||||
|
border-bottom: black solid thick;
|
||||||
|
h1 {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
> footer {
|
||||||
|
color: contrast(@mainColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
* {
|
||||||
|
border-style: none;
|
||||||
|
border-color: @mainColorDark;
|
||||||
|
border-width: medium;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
@sectionMargin: 1rem;
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1, h2 {
|
||||||
|
margin: @sectionMargin;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: @sectionMargin;
|
||||||
|
text-indent: @sectionMargin * 2;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
colgroup:not(:first-child) col:first-child{
|
||||||
|
border-left: solid medium;
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
tr:last-child {
|
||||||
|
td, th {
|
||||||
|
border-bottom: @mainColorDark solid thick;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
th {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem 0.5rem;
|
||||||
|
}
|
||||||
|
th, td {
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-bottom: solid thin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
text-align: right;
|
||||||
|
padding: 0;
|
||||||
|
p {
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin: inherit;
|
||||||
|
text-indent: inherit;
|
||||||
|
&:first-letter {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
background: @mainColorLight ;
|
||||||
|
color: @mainColor ;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 85%;
|
||||||
|
}
|
||||||
|
border-bottom-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
// Einstellungen auf die Grundlagen zurücksetzen,
|
||||||
|
// beinhaltet auch Einstellungen für die neuen HTML5-Tags
|
||||||
|
//noinspection CssUnknownTarget
|
||||||
|
@import "meyer_resets.css";
|
||||||
|
// Bestimmung der Farben
|
||||||
|
@import "lesslib/colors.less";
|
||||||
|
// Mixins des Layouts
|
||||||
|
@import "lesslib/mixins.less";
|
||||||
|
// Layout-Unabhängige Mixins
|
||||||
|
@import "lesslib/mixins.framework.less";
|
||||||
|
// Bestimmung des grundsätzlichen Erscheinungsbildes der einzelnen Elemente,
|
||||||
|
// einschließlich des Hauptbereiches
|
||||||
|
@import "lesslib/print/basics.less";
|
||||||
|
// Darstellung unabhängig der Darstellungsgrößen
|
||||||
|
@import "lesslib/print/layout.less";
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
@media screen {
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
main, /* Korektur: Torsten Lücke 2016-09-01 */
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* END: meyer_ressets */
|
||||||
@@ -1,11 +1,11 @@
|
|||||||
<!--suppress HtmlUnknownTarget -->
|
<!--suppress HtmlUnknownTarget -->
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a class="{ isActive('home') }" href="/">Home</a></li>
|
<li class="{ isActive('home') }"><a href="/">Home</a></li>
|
||||||
<li><a class="{ isActive('weekly') }" href="/views/weekly">Wochenansicht</a></li>
|
<li class="{ isActive('weekly') }"><a href="/views/weekly">Wochenansicht</a></li>
|
||||||
<li><a class="{ isActive('monthly') }" href="/views/monthly">Monatsansicht</a></li>
|
<li class="{ isActive('monthly') }"><a href="/views/monthly">Monatsansicht</a></li>
|
||||||
<li><a class="{ isActive('yearly') }" href="/views/yearly">Jahresansicht</a></li>
|
<li class="{ isActive('yearly') }"><a href="/views/yearly">Jahresansicht</a></li>
|
||||||
<li><a class="{ isActive('working-hours') }" href="/working-hours">Einträge</a></li>
|
<li class="{ isActive('working-hours') }"><a href="/working-hours">Einträge</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|||||||
@@ -16,6 +16,12 @@
|
|||||||
<p>Loading...</p>
|
<p>Loading...</p>
|
||||||
{:else}
|
{:else}
|
||||||
<table>
|
<table>
|
||||||
|
<colgroup>
|
||||||
|
<col />
|
||||||
|
<col />
|
||||||
|
<col />
|
||||||
|
<col />
|
||||||
|
</colgroup>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Zeitraum</th>
|
<th>Zeitraum</th>
|
||||||
|
|||||||
@@ -153,6 +153,11 @@
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
<table>
|
<table>
|
||||||
|
<colgroup>
|
||||||
|
<col />
|
||||||
|
<col />
|
||||||
|
<col />
|
||||||
|
</colgroup>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Datum</th>
|
<th>Datum</th>
|
||||||
@@ -201,7 +206,7 @@
|
|||||||
<button on:click={Controller.saveRecord} type="button">Übernehmen
|
<button on:click={Controller.saveRecord} type="button">Übernehmen
|
||||||
<IconifyIcon icon={checkIcon} color="green"/>
|
<IconifyIcon icon={checkIcon} color="green"/>
|
||||||
</button>
|
</button>
|
||||||
<button on:click={Controller.cancelActiveRecord} type="button">Abbrechen
|
<button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
|
||||||
<IconifyIcon icon={xIcon}/>
|
<IconifyIcon icon={xIcon}/>
|
||||||
</button>
|
</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|||||||
Reference in New Issue
Block a user