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] =?UTF-8?q?Die=20Definition=20der=20Gestaltung=20wird=20du?= =?UTF-8?q?rch=20LESS=20=C3=BCbernommen.=20Alle=20Ger=C3=A4te=20bis=20zum?= =?UTF-8?q?=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