diff --git a/ui/public/global.css b/ui/public/global.css
deleted file mode 100644
index 8b13789..0000000
--- a/ui/public/global.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/ui/public/index.html b/ui/public/index.html
index 0c75cb7..a48646e 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -10,7 +10,8 @@
Svelte app
-
+
+
diff --git a/ui/public/less/global.less b/ui/public/less/global.less
new file mode 100644
index 0000000..30cf1f1
--- /dev/null
+++ b/ui/public/less/global.less
@@ -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";
\ No newline at end of file
diff --git a/ui/public/less/lesslib/basics.less b/ui/public/less/lesslib/basics.less
new file mode 100644
index 0000000..492f295
--- /dev/null
+++ b/ui/public/less/lesslib/basics.less
@@ -0,0 +1,85 @@
+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;
+ }
+ div.zelle > label {
+
+ }
+ }
+ }
+ &.http-error {
+ header {
+ background: hsl(340, 90%, 50%);
+ color: hsl(0, 0%, 95%);
+ }
+ }
+}
diff --git a/ui/public/less/lesslib/colors.less b/ui/public/less/lesslib/colors.less
new file mode 100644
index 0000000..beab906
--- /dev/null
+++ b/ui/public/less/lesslib/colors.less
@@ -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);
\ No newline at end of file
diff --git a/ui/public/less/lesslib/fonts.less b/ui/public/less/lesslib/fonts.less
new file mode 100644
index 0000000..58d1ddc
--- /dev/null
+++ b/ui/public/less/lesslib/fonts.less
@@ -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;
+}
diff --git a/ui/public/less/lesslib/layout.less b/ui/public/less/lesslib/layout.less
new file mode 100644
index 0000000..eba1944
--- /dev/null
+++ b/ui/public/less/lesslib/layout.less
@@ -0,0 +1,235 @@
+@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;
+ }
+ ul, ol {
+ margin: initial;
+ li {
+ margin: initial;
+ padding: initial;
+ }
+ }
+ dl {
+ dd {
+ margin-left: 2em;
+ }
+ }
+ 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, textarea {
+ display: inline-block;
+ width: @formItemWidth;
+ padding: 0.25rem;
+ 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;
+ }
+ }
+ }
+ }
+ }
+ }
+ 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;
+ }
+ }
+}
+
+aside {
+ background: @mainColorLight ;
+ li {
+ background: @mainColorLight;
+ color: @mainColor;
+ font-weight: bold ;
+ &:not(:first-child) {
+ margin-top: 1rem;
+ }
+ a {
+ display: block;
+ padding: 1.25rem .5rem;
+ text-decoration: none;
+ color: @mainColor;
+ &:hover, &:active, &:focus {
+ color: darken(@mainColor,10%,relative);
+ }
+ }
+ &:hover, &:active, &:focus {
+ background: lighten(@mainColorLight,10%,relative);
+ }
+ }
+ form {
+ @paddingForm: 0.5rem;
+ @paddingInput: @paddingForm/2;
+ background: @mainColorLight;
+ color: @mainColor;
+ padding: 2 * @paddingForm @paddingForm;
+ input {
+ display: block;
+ width: @breiteNavBereich - (@paddingForm + @paddingInput) * 2 ;
+ border: none;
+ margin-bottom: @paddingForm;
+ padding: @paddingInput;
+ }
+ }
+ p {
+ line-height: 1.5em;
+ text-align: left;
+ .hyphens();
+ margin: 1em;
+ font-size: 85%;
+ }
+}
diff --git a/ui/public/less/lesslib/media_queries.less b/ui/public/less/lesslib/media_queries.less
new file mode 100644
index 0000000..a651da0
--- /dev/null
+++ b/ui/public/less/lesslib/media_queries.less
@@ -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) {
+}
\ No newline at end of file
diff --git a/ui/public/less/lesslib/mixins.framework.less b/ui/public/less/lesslib/mixins.framework.less
new file mode 100644
index 0000000..28424a4
--- /dev/null
+++ b/ui/public/less/lesslib/mixins.framework.less
@@ -0,0 +1,188 @@
+.clearfix() {
+ &:after {
+ content: ".";
+ display: block;
+ height: 0;
+ line-height: 0;
+ clear: both;
+ visibility: hidden;
+ }
+}
+
+.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;
+}
+
+.mywrap() {
+ white-space: normal;
+}
+
+.hamburgerMenu() {
+ color: white;
+ width: 3rem;
+ height: 2rem;
+ top: 0.5rem;
+ right: 0.5rem;
+ left: auto;
+ .border-radius(4px);
+ border: none;
+ .vertical-gradient(#555; #000);
+ > ul {
+ height: auto;
+ width: auto;
+ position: absolute;
+ right: 0;
+ top: 100%;
+ background: fade(black,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(#59b4fd; #0560e8);
+ }
+ }
+ &:first-child {
+ a {
+ .border-radius( 5px 5px 0 0 );
+ }
+ }
+ &:last-child {
+ a {
+ .border-radius( 0 0 5px 5px );
+ }
+ }
+ }
+ }
+ &:hover, &:focus, &:active {
+ ul {
+ display: block;
+ }
+ }
+ &:before {
+ content: "\2261";
+ font-size: 2rem;
+ text-align: center;
+ line-height: 0.8em;
+ display: block;
+ cursor: pointer;
+ }
+}
+
+.transition(@property) {
+ -moz-transition: ~"@{property}";
+ -webkit-transition: ~"@{property}";
+ -o-transition: ~"@{property}";
+ -ms-transition: ~"@{property}";
+ transition: ~"@{property}";
+ -moz-transition-duration: 0.5s;
+ -webkit-transition-duration: 0.5s;
+ -o-transition-duration: 0.5s;
+ -ms-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+}
+
+.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;
+}
+
+.background-size(...) {
+ -webkit-background-size: @arguments;
+ -moz-background-size: @arguments;
+ background-size: @arguments;
+}
+
+.transform(...) {
+ -ms-transform: @arguments;
+ -webkit-transform: @arguments;
+ -o-transform: @arguments;
+ -moz-transform: @arguments;
+ transform: @arguments;
+}
\ No newline at end of file
diff --git a/ui/public/less/lesslib/mixins.less b/ui/public/less/lesslib/mixins.less
new file mode 100644
index 0000000..ccd66be
--- /dev/null
+++ b/ui/public/less/lesslib/mixins.less
@@ -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;
+}
\ No newline at end of file
diff --git a/ui/public/less/lesslib/print/basics.less b/ui/public/less/lesslib/print/basics.less
new file mode 100644
index 0000000..4ac0a48
--- /dev/null
+++ b/ui/public/less/lesslib/print/basics.less
@@ -0,0 +1,83 @@
+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 {
+ header {
+ background: hsl(340, 90%, 50%);
+ color: hsl(0, 0%, 95%);
+ }
+ }
+}
diff --git a/ui/public/less/lesslib/print/colors.less b/ui/public/less/lesslib/print/colors.less
new file mode 100644
index 0000000..7caf68d
--- /dev/null
+++ b/ui/public/less/lesslib/print/colors.less
@@ -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);
\ No newline at end of file
diff --git a/ui/public/less/lesslib/print/layout.less b/ui/public/less/lesslib/print/layout.less
new file mode 100644
index 0000000..857d30c
--- /dev/null
+++ b/ui/public/less/lesslib/print/layout.less
@@ -0,0 +1,218 @@
+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;
+ }
+ }
+ > footer {
+ color: contrast(@mainColor);
+ }
+ }
+}
+
+#inhalts-bereich {
+ background-color: @mainColorLight;
+ color: @mainColor;
+}
+
+main {
+ * {
+ border-style: none;
+ border-color: @mainColorDark;
+ border-width: medium;
+ }
+ section {
+ @sectionMargin: 1rem;
+ header {
+ text-align: center;
+ }
+ h1, h2 {
+ margin: @sectionMargin;
+ }
+ p, ul, ol, dl {
+ margin: @sectionMargin;
+ text-indent: @sectionMargin * 2;
+ }
+ ul, ol {
+ margin: initial;
+ li {
+ margin: initial;
+ padding: initial;
+ }
+ }
+ dl {
+ dd {
+ margin-left: 2em;
+ }
+ }
+ 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 {
+ @formLabelWidth: 10rem;
+ @formItemWidth: 40rem;
+ fieldset {
+ width: @formItemWidth + @formLabelWidth + 2rem;
+ margin: 1rem auto;
+ border-style: solid ;
+ padding: @sectionMargin;
+ &.tasten {
+ border: none;
+ background-color: @mainColorLight;
+ }
+ legend {
+ margin: @sectionMargin;
+ margin-left: @sectionMargin * 2;
+ }
+ }
+ div.zelle {
+ & > label {
+ width: @formLabelWidth;
+ display: inline-block;
+ margin: 0.5rem;
+ }
+ input, textarea {
+ display: inline-block;
+ width: @formItemWidth;
+ padding: 0.25rem;
+ 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;
+ }
+ }
+ button {
+ @farbeHintergrund: @mainColorLight;
+ @farbeHintergrundHell: lighten(@farbeHintergrund,50%,relativ);
+ @farbeText: spin(lighten(@farbeHintergrund,66%,relativ),@mainColor);
+ @farbeSchatten: fade(@farbeHintergrund,50%);
+ height: 2.5em;
+ .border-radius(1.25em);
+ padding: 0.5em 1.25em;
+ .vertical-gradient(@farbeHintergrundHell,@farbeHintergrund);
+ .box-shadow(0.1em 0.2em 0.5em @farbeSchatten);
+ color: @farbeText;
+ font-weight: bold;
+ &:hover {
+ .vertical-gradient(@farbeHintergrund,@farbeHintergrundHell);
+ }
+ margin: 0.25rem;
+ }
+ }
+ 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;
+ }
+ }
+}
+
+aside {
+ background: @subColorLight ;
+ li {
+ background: @mainColorLight;
+ color: @mainColor;
+ font-weight: bold ;
+ &:not(:first-child) {
+ margin-top: 1rem;
+ }
+ a {
+ display: block;
+ padding: 1.25rem .5rem;
+ text-decoration: none;
+ color: @mainColor;
+ &:hover, &:active, &:focus {
+ color: darken(@mainColor,10%,relative);
+ }
+ }
+ &:hover, &:active, &:focus {
+ background: lighten(@mainColor,10%,relative);
+ }
+ }
+ form {
+ @paddingForm: 0.5rem;
+ @paddingInput: @paddingForm/2;
+ background: @mainColorLight;
+ color: @mainColor;
+ padding: 2 * @paddingForm @paddingForm;
+ input {
+ display: block;
+ width: @mainColor - (@paddingForm + @paddingInput) * 2 ;
+ border: none;
+ margin-bottom: @paddingForm;
+ padding: @paddingInput;
+ }
+ }
+ p {
+ line-height: 1.5em;
+ text-align: left;
+ .hyphens();
+ margin: 1em;
+ font-size: 85%;
+ }
+}
diff --git a/ui/public/less/print.less b/ui/public/less/print.less
new file mode 100644
index 0000000..ec2126c
--- /dev/null
+++ b/ui/public/less/print.less
@@ -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";
\ No newline at end of file
diff --git a/ui/public/meyer_resets.css b/ui/public/meyer_resets.css
new file mode 100644
index 0000000..ed7cd93
--- /dev/null
+++ b/ui/public/meyer_resets.css
@@ -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 */
\ No newline at end of file