From 1b4983a06fd9bb42e0272e968d5fe697844da0e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Wed, 14 Apr 2021 14:11:20 +0200 Subject: [PATCH 1/4] =?UTF-8?q?Definitionen=20erweitert,=20um=20die=20Gest?= =?UTF-8?q?altung=20besser=20zu=20erm=C3=B6glichen.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/components/Nav.svelte | 10 +++++----- ui/src/routes/Views.svelte | 6 ++++++ ui/src/routes/WorkingHours.svelte | 7 ++++++- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/ui/src/components/Nav.svelte b/ui/src/components/Nav.svelte index 9819453..a8fad56 100644 --- a/ui/src/components/Nav.svelte +++ b/ui/src/components/Nav.svelte @@ -1,11 +1,11 @@ diff --git a/ui/src/routes/Views.svelte b/ui/src/routes/Views.svelte index 8c7ee11..5401f0b 100644 --- a/ui/src/routes/Views.svelte +++ b/ui/src/routes/Views.svelte @@ -16,6 +16,12 @@

Loading...

{:else} + + + + + + diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte index 7ce8567..15b7682 100644 --- a/ui/src/routes/WorkingHours.svelte +++ b/ui/src/routes/WorkingHours.svelte @@ -153,6 +153,11 @@
Zeitraum
+ + + + + @@ -201,7 +206,7 @@ - From 338c3ce5e432eb0ee91629bdca4068f95fce2c2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Wed, 14 Apr 2021 14:13:12 +0200 Subject: [PATCH 2/4] =?UTF-8?q?Die=20Definition=20der=20Gestaltung=20wird?= =?UTF-8?q?=20durch=20LESS=20=C3=BCbernommen.=20Alle=20Ger=C3=A4te=20bis?= =?UTF-8?q?=20zum=20iPad=20und=20gr=C3=B6=C3=9Fer=20werden=20beachtet.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/public/global.css | 1 - ui/public/index.html | 3 +- ui/public/less/global.less | 19 ++ ui/public/less/lesslib/basics.less | 85 ++++++ ui/public/less/lesslib/colors.less | 13 + ui/public/less/lesslib/fonts.less | 43 +++ ui/public/less/lesslib/layout.less | 235 ++++++++++++++++ ui/public/less/lesslib/media_queries.less | 267 +++++++++++++++++++ ui/public/less/lesslib/mixins.framework.less | 188 +++++++++++++ ui/public/less/lesslib/mixins.less | 16 ++ ui/public/less/lesslib/print/basics.less | 83 ++++++ ui/public/less/lesslib/print/colors.less | 13 + ui/public/less/lesslib/print/layout.less | 218 +++++++++++++++ ui/public/less/print.less | 15 ++ ui/public/meyer_resets.css | 51 ++++ 15 files changed, 1248 insertions(+), 2 deletions(-) delete mode 100644 ui/public/global.css create mode 100644 ui/public/less/global.less create mode 100644 ui/public/less/lesslib/basics.less create mode 100644 ui/public/less/lesslib/colors.less create mode 100644 ui/public/less/lesslib/fonts.less create mode 100644 ui/public/less/lesslib/layout.less create mode 100644 ui/public/less/lesslib/media_queries.less create mode 100644 ui/public/less/lesslib/mixins.framework.less create mode 100644 ui/public/less/lesslib/mixins.less create mode 100644 ui/public/less/lesslib/print/basics.less create mode 100644 ui/public/less/lesslib/print/colors.less create mode 100644 ui/public/less/lesslib/print/layout.less create mode 100644 ui/public/less/print.less create mode 100644 ui/public/meyer_resets.css 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 From b74e9bbd699d41bfd2683860b7d735e2d2e5764c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Wed, 14 Apr 2021 17:10:01 +0200 Subject: [PATCH 3/4] =?UTF-8?q?Es=20wurde=20an=20die=20Darstellung=20auf?= =?UTF-8?q?=20einen=20iPhone=20bzw.=20=C3=A4hnlichen=20Ger=C3=A4ten=20ange?= =?UTF-8?q?passt.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/public/less/lesslib/media_queries.less | 53 +++++++++++++++++--- ui/public/less/lesslib/mixins.framework.less | 15 +++--- 2 files changed, 53 insertions(+), 15 deletions(-) diff --git a/ui/public/less/lesslib/media_queries.less b/ui/public/less/lesslib/media_queries.less index a651da0..0b57d01 100644 --- a/ui/public/less/lesslib/media_queries.less +++ b/ui/public/less/lesslib/media_queries.less @@ -137,6 +137,7 @@ width: @breiteNavBereich; } } + @media screen and (max-width: 830px) { html body { @boxHeight: 5rem; @@ -145,19 +146,21 @@ font-size: @boxHeight; text-align: center; padding: 1rem; - + } + & > footer { + padding: 1rem; } & > nav { - background: none; - left:auto; ul { li { display: inline-block; border: none; width: auto; - a { - padding: 0.75rem; - } + height: 1.5em; + padding-top: 0.25em; + a { + padding: 0.75rem; + } &:not(:first-child) { border-left: none; } @@ -184,6 +187,7 @@ @formLabelWidth: 10rem; @formItemWidth: 40rem; @sectionMargin: 1rem; + margin: @sectionMargin; fieldset { width: auto; margin: 1rem auto; @@ -262,6 +266,41 @@ } } } - @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(); + } + } + } + } } \ No newline at end of file diff --git a/ui/public/less/lesslib/mixins.framework.less b/ui/public/less/lesslib/mixins.framework.less index 28424a4..258c97e 100644 --- a/ui/public/less/lesslib/mixins.framework.less +++ b/ui/public/less/lesslib/mixins.framework.less @@ -67,19 +67,18 @@ color: white; width: 3rem; height: 2rem; - top: 0.5rem; - right: 0.5rem; - left: auto; + top: 0.25rem; + left: 0.25rem; .border-radius(4px); border: none; - .vertical-gradient(#555; #000); + .vertical-gradient(@mainColorDark; @mainColor); > ul { height: auto; width: auto; position: absolute; - right: 0; + left: 0; top: 100%; - background: fade(black,80%); + background: fade(@mainColorDark,80%); .border-radius(5px); display: none; > li { @@ -100,7 +99,7 @@ &:hover, &:focus { color: white; - .vertical-gradient(#59b4fd; #0560e8); + .vertical-gradient(@mainColorLight; @mainColor); } } &:first-child { @@ -115,7 +114,7 @@ } } } - &:hover, &:focus, &:active { + &:hover, &:focus, &:active, &:checked { ul { display: block; } From de0535be3280ac7d5eeac1d9d96944924d5d71d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Wed, 14 Apr 2021 17:23:31 +0200 Subject: [PATCH 4/4] =?UTF-8?q?Bereinigung=20von=20Altlasten,=20da=20die?= =?UTF-8?q?=20Texte=20von=20woanders=20=C3=BCbernommen=20wurden.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/public/less/lesslib/basics.less | 9 -- ui/public/less/lesslib/layout.less | 91 +----------- ui/public/less/lesslib/mixins.framework.less | 42 ------ ui/public/less/lesslib/print/basics.less | 5 +- ui/public/less/lesslib/print/layout.less | 137 ++----------------- 5 files changed, 11 insertions(+), 273 deletions(-) diff --git a/ui/public/less/lesslib/basics.less b/ui/public/less/lesslib/basics.less index 492f295..830ac73 100644 --- a/ui/public/less/lesslib/basics.less +++ b/ui/public/less/lesslib/basics.less @@ -71,15 +71,6 @@ section article { 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/layout.less b/ui/public/less/lesslib/layout.less index eba1944..50f30b2 100644 --- a/ui/public/less/lesslib/layout.less +++ b/ui/public/less/lesslib/layout.less @@ -72,18 +72,6 @@ main { 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 { @@ -116,7 +104,7 @@ main { display: inline-block; margin: 0.5rem; } - input, textarea { + input { display: inline-block; width: @formItemWidth; padding: 0.25rem; @@ -124,38 +112,6 @@ main { 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; - } - } - } } } } @@ -188,48 +144,3 @@ main { } } } - -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/mixins.framework.less b/ui/public/less/lesslib/mixins.framework.less index 258c97e..f453374 100644 --- a/ui/public/less/lesslib/mixins.framework.less +++ b/ui/public/less/lesslib/mixins.framework.less @@ -1,14 +1,3 @@ -.clearfix() { - &:after { - content: "."; - display: block; - height: 0; - line-height: 0; - clear: both; - visibility: hidden; - } -} - .hyphens() { -webkit-hyphens: auto; -moz-hyphens: auto; @@ -59,10 +48,6 @@ text-overflow: ellipsis; } -.mywrap() { - white-space: normal; -} - .hamburgerMenu() { color: white; width: 3rem; @@ -129,19 +114,6 @@ } } -.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; @@ -170,18 +142,4 @@ -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/print/basics.less b/ui/public/less/lesslib/print/basics.less index 4ac0a48..63acfce 100644 --- a/ui/public/less/lesslib/print/basics.less +++ b/ui/public/less/lesslib/print/basics.less @@ -75,9 +75,6 @@ section article { } } &.http-error { - header { - background: hsl(340, 90%, 50%); - color: hsl(0, 0%, 95%); - } + display: none; } } diff --git a/ui/public/less/lesslib/print/layout.less b/ui/public/less/lesslib/print/layout.less index 857d30c..0864ddf 100644 --- a/ui/public/less/lesslib/print/layout.less +++ b/ui/public/less/lesslib/print/layout.less @@ -21,17 +21,15 @@ html { margin: 1rem; } } + > nav { + display: none; + } > footer { color: contrast(@mainColor); } } } -#inhalts-bereich { - background-color: @mainColorLight; - color: @mainColor; -} - main { * { border-style: none; @@ -46,22 +44,10 @@ main { h1, h2 { margin: @sectionMargin; } - p, ul, ol, dl { + p { 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; @@ -86,70 +72,10 @@ main { } } 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; - } + display: none; + } + button { + display: none; } footer { text-align: right; @@ -170,49 +96,4 @@ main { 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%; - } -} +} \ No newline at end of file
Datum