From d6edff24d3019dfab2b92d10e0fe9009794b8602 Mon Sep 17 00:00:00 2001 From: Christine Slotty Date: Mon, 20 Jul 2020 17:54:30 +0200 Subject: [PATCH] styles --- .gitignore | 1 - src/Template/Element/user_menu.ctp | 2 +- src/Template/Layout/frontend.ctp | 12 +- webroot/css/grd_styles.css | 1772 ++++++++++++++++++++++++++++ websrc/src/less/01-layout.less | 13 +- websrc/src/less/02-colors.less | 7 +- websrc/src/less/05-screen.less | 5 + websrc/src/less/06-messages.less | 4 +- websrc/src/less/07-user.less | 25 +- websrc/src/less/10-center.less | 17 +- websrc/src/less/20-list.less | 10 + websrc/src/less/30-form.less | 37 + 12 files changed, 1879 insertions(+), 26 deletions(-) create mode 100644 webroot/css/grd_styles.css diff --git a/.gitignore b/.gitignore index b630c3eb1..88fcf2859 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,5 @@ websrc/node_modules/ websrc/gulpfile.js websrc/package-lock.json mithril_client/ -webroot/css/grd_styles.css websrc/src/less-files.css diff --git a/src/Template/Element/user_menu.ctp b/src/Template/Element/user_menu.ctp index 00b800be1..633674233 100644 --- a/src/Template/Element/user_menu.ctp +++ b/src/Template/Element/user_menu.ctp @@ -23,7 +23,7 @@ if(intval($transactionPendings) > 0) { } ?>
- + account_circle
diff --git a/src/Template/Layout/frontend.ctp b/src/Template/Layout/frontend.ctp index 7ad146bed..425073374 100644 --- a/src/Template/Layout/frontend.ctp +++ b/src/Template/Layout/frontend.ctp @@ -74,13 +74,13 @@ $GLOBALS["self"] = $this;
-
-
-
- Flash->render() ?> -
- element('navi_center'); ?> +
+
+ Flash->render() ?>
+ element('navi_center'); ?> +
+
fetch('header')): ?>
fetch('header') ?> diff --git a/webroot/css/grd_styles.css b/webroot/css/grd_styles.css new file mode 100644 index 000000000..3fda8b4ad --- /dev/null +++ b/webroot/css/grd_styles.css @@ -0,0 +1,1772 @@ +/* ============================================================ + + Grid Layout Page + + Datei : layout.less + Datum : 2020-04-30 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +/*==================================== += BREAK POINTS = +====================================*/ +/* https://scotch.io/courses/getting-started-with-less/responsive-and-media-queries */ +/* GRID */ +.layout { + display: grid; + grid-template-rows: [top] 8vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end]; + grid-template-columns: [left1] auto [left2] 1fr [left3] 12fr [right3] 1fr [right2] auto [right1]; + grid-template-areas: "header header header header header" "left . center center ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; + margin: 0; + padding: 0; +} +@media (max-width:1199px) { + .layout { + grid-template-areas: "header header header header header" "left . center center center" "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; + } +} +@media (max-width:767px) { + .layout { + position: relative; + display: grid; + grid-template-rows: [top] 12vh [line2] 80vh [footer1] 3vh [footer2] 8vh [end]; + grid-template-columns: [left1] 100vw [right1]; + grid-template-areas: "header" "center" "footer" "bottom"; + margin: 0; + padding: 0; + } +} +.header-notify { + grid-area: header; + grid-column-start: right3; + grid-column-end: right2; +} +.header-user { + grid-area: header; + grid-column-start: right2; + grid-column-end: right1; +} +.sidebar1 { + grid-area: left; + grid-row-start: top; + grid-row-end: end; +} +@media (max-width:767px) { + .sidebar1 { + position: relative; + grid-area: header; + z-index: 2; + top: -300px; + right: 0px; + } + .header-user, + .header-notify { + grid-area: header; + } +} +.center-form-single, +.content { + grid-area: center; + grid-row-start: line2; + grid-row-end: footer1; +} +.footer { + grid-area: footer; + grid-row-start: footer1; + grid-row-end: footer2; +} +.nav-bottom { + grid-area: bottom; + grid-row-start: footer2; + grid-row-end: end; +} +/* ============================================================ + + Generic Color Definitions + + Vars and some generic CSS rules. + + Datei : colors.less + Datum : 2020-05-26 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +/* MAIN */ +/* MENU */ +/* CONTENT */ +/* CONTENT-NAV */ +/* CONTENT-ITEMS */ +/* CONTENT-TABLE */ +/* FORMS */ +/* VARIOUS INDIVIDUAL */ +/* XXX TODO XXX */ +/*rgba(0, 0, 0, 0.5) ??? */ +/* NOTIFICATION */ +/* https://www.w3schools.com/colors/colors_shades.asp */ +.info-color { + color: grey; +} +.success-color { + color: #047006; +} +.alert-color { + color: #ff5f66; +} +.orange-color { + color: #ffa600; +} +.blue-color { + color: blue; +} +.unobtrusive { + color: grey; +} +.info-icon { + color: grey; + background-color: #80808026; +} +.success-icon { + color: #047006; + background-color: rgba(4, 112, 6, 0.2); +} +.alert-icon { + color: #ff5f66; + background-color: #ff5f662e; +} +/* ======================= + Gradido + =======================*/ +/* Gradido */ +.grd-negative-currency { + color: red; +} +/* Gradido Transform */ +.gdt-text-color { + color: #a27824; +} +.grd_clickable { + cursor: pointer; +} +/* ============================================================ + + Typography Definitions + + Datei : typography.less + Datum : 2020-05-26 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +.small-font { + font-size: 0.75em; + font-weight: 300; +} +/* ============================================================ + + Basic screen styles. + + Datei : screen.less + Datum : 2020-04-30 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +@font-face { + font-family: 'Material Icons Outlined'; + font-style: normal; + font-weight: 400; + src: url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.eot); + /* For IE6-8 */ + src: local('Material Icons Outlined'), local('Material-Icons-Outlined'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff2) format('woff2'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff) format('woff'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.ttf) format('truetype'); +} +.material-icons-outlined { + font-family: 'Material Icons Outlined'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + vertical-align: middle; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} +@media screen { + /* ======================= + Basis + =======================*/ + html, + body { + font-family: 'Roboto', sans-serif; + font-size: 100%; + line-height: 27px; + color: #212529; + background-color: #f9fafb; + margin: 0; + overflow: hidden; + } + div { + border-collapse: collapse; + box-sizing: border-box; + } + /* ======================= + Kopfbereich + =======================*/ + .header { + display: flex; + justify-content: space-between; + align-items: center; + flex: flex-grow; + width: 100%; + padding: 1em; + background-color: #fff; + } + /* ======================= + Fußbereich + =======================*/ + .footer { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + font-size: 70%; + font-style: italic; + line-height: 0; + } + .bottomright { + position: fixed; + bottom: 0; + right: 0; + color: grey; + font-size: smaller; + line-height: 0.125em; + padding-right: 0.25em; + text-align: right; + } + .bottomleft { + position: fixed; + bottom: 0; + left: 0; + color: grey; + font-size: smaller; + line-height: 1.125em; + padding-left: 0.25em; + } + /* ======================= + Sonstige + =======================*/ + /* Hyperlinks */ + a { + text-decoration: none; + color: inherit; + } + main a { + text-decoration: underline; + font-style: italic; + } + a:link, + a:visited { + color: inherit; + } + a:hover, + a:focus { + text-decoration: underline; + } + a:active { + background-color: #fff; + color: #000; + } + a:focus, + a:active { + outline: none; + } + a.grd_invisible_link { + color: #000; + text-decoration: none; + } + a.grd_invisible_link:hover { + color: grey; + } + [type=button]:not(:disabled), + [type=reset]:not(:disabled), + [type=submit]:not(:disabled), + button:not(:disabled) { + cursor: pointer; + } +} +@media screen and (max-width:767px) { + .bottomright { + font-size: 0.7em; + font-weight: 300; + line-height: 1em; + width: 100px; + } + .bottomright p { + margin-block-start: 0; + margin-block-end: 2px; + margin-inline-start: 0; + margin-inline-end: 0; + } +} +/* Ende @media screen */ +/* +To change this license header, choose License Headers in Project Properties. +To change this template file, choose Tools | Templates +and open the template in the editor. +*/ +/* ============================================================ + + Screen styles for flash messages. + + Datei : messages.css + Datum : 30.10.2019, 16:04:16 + Autor : einhornimmond, Christine Slotty + Copyright : Gradio + + ============================================================*/ +@media screen { + .flash-messages { + width: 30%; + position: absolute; + top: 57px; + left: 241px; + text-align: center; + } + .flash-messages .alert { + margin: 0; + padding: 1em; + vertical-align: middle; + border-radius: 5px; + } + .flash-messages .alert-success { + color: #1A1A1A !important; + background-color: #06c50a; + border: 1px solid #04700675; + } + .flash-messages .alert-error { + color: #fff !important; + background-color: red; + border: 1px solid rgba(255, 0, 0, 0.5); + } + .flash-messages .message { + padding: 5px; + } + .flash-messages .success { + color: #047006; + } + .flash-messages .error { + color: red; + } + .flash-messages.hidden { + display: none; + } + /* messages, update flash */ + .grd-error { + color: red; + border: 1px solid rgba(255, 0, 0, 0.5); + padding: 5px; + } + .grd-info { + border: 1px dotted gray; + padding: 5px; + } + .grd-success { + padding: 5px; + color: #047006; + } +} +@media screen and (max-width:767px) { + .flash-messages { + width: 90%; + top: 0; + left: 0; + text-align: center; + } +} +/* ============================================================ + + User Menu + + Datei : user.less + Datum : 2020-07-03 + Autor : Christine Slotty + Copyright : Gradido + + ============================================================*/ +@media screen { + .header-user { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-end; + align-content: flex-end; + position: relative; + width: 100%; + min-width: 12em; + height: 40px; + background-color: #fff; + border: 1px solid #f2f4f5; + border-radius: 0 0 0 18px; + } + .user-menu-container { + display: flex; + justify-content: flex-end; + align-items: center; + font-size: 0.8em; + font-weight: 300; + padding: 0.25em 0.5em; + z-index: 20; + height: 40px; + } + .user-name, + .user-icon { + display: inline-block; + vertical-align: middle; + cursor: pointer; + } + .user-name { + padding-right: 0.25em; + } + .nav-vertical.user-menu { + display: none; + background-color: #fff; + border-left: 1px solid #f2f4f5; + border-bottom: 1px solid #f2f4f5; + border-radius: 0 0 16px 16px; + z-index: 15; + font-size: 0.9em; + margin-top: 0 !important; + position: fixed; + top: 39px; + right: 0; + } + .nav-vertical.user-menu.visible { + display: inherit; + } + .nav-vertical.user-menu > ul { + padding: 2em; + padding-top: 0.5em; + padding-bottom: 1em; + margin-block-end: 0; + margin-block-start: 0; + } + .nav-vertical.user-menu li { + padding: 0.0125em; + } + .nav-top > ul { + padding: 0; + padding-right: 2em; + } + .material-icons-outlined.user-info { + color: grey; + } + .material-icons-outlined.user-info.success { + color: #047006; + } +} +@media screen and (max-width:767px) { + .header-user { + position: relative; + min-width: 3em; + background-color: transparent; + justify-content: center; + height: 100%; + margin-top: -13px; + margin-left: -16px; + color: #047006; + } + .user-menu-container { + margin: 0; + padding: 0; + } + .user-name { + display: none; + } + .nav-vertical { + margin-top: 55px; + } + .nav-vertical.user-menu { + position: fixed; + top: 1px; + right: 0; + margin-top: 0; + } + .nav-vertical.user-menu > ul { + padding: 1em 1em; + padding-top: 3em; + } +} +/* ============================================================ + + Navigation + + Datei : navi.less + Datum : 2020-04-30 + Autor : einhornimmond / Christine Slotty + Copyright : Gradido + + ============================================================*/ +@media screen { + .logo { + display: none; + vertical-align: middle; + height: 30px; + padding: 0.5em; + } + .logo.big.visible, + .logo.small.visible { + display: block !important; + } + .logo.mobile { + display: none; + } + .logo.small.visible { + padding-left: 41px; + } + /* + SIDEBARS + */ + .sidebar1 { + background-color: #fff; + font-size: 0.8em; + font-weight: 500; + line-height: 2.5em; + padding: 0; + border-right: 1px solid #f2f4f5; + } + .sidebar2 { + padding: 1em; + background-color: #f9fafb; + } + .sidebar1-header { + font-size: 0.75em; + font-style: italic; + color: grey; + } + /* set general icons size here! */ + .nav-icon { + font-size: 18px !important; + color: #4F4F4F; + vertical-align: middle; + padding-right: 1em; + } + /* important! order matters! we need to overwrite the main button's size here */ + .nav-main-button { + font-size: 32px !important; + color: grey; + margin: 0.3em; + } + /* Hide mobile menu button! */ + .nav-main-button.mobile { + display: none; + } + .nav-menu.nav-menu-maximized { + width: 280px; + height: 100%; + } + .nav-menu.nav-menu-minimized { + width: 120px; + height: 100%; + } + .nav-menu-maximized { + -webkit-animation: slide-out 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-out 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + } + .nav-menu-minimized { + -webkit-animation: slide-in 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-in 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + } + .nav-menu-minimized .link-title { + display: none; + } + .nav-menu-minimized .nav-icon, + .nav-menu-minimized .nav-main-button { + padding-left: 72px; + } + /** + * ---------------------------------------- + * animations slide-in / slide-out + * ---------------------------------------- + */ + /* slide-in */ + @-webkit-keyframes slide-in { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 0; + } + 100% { + -webkit-transform: translateX(-74px); + transform: translateX(-74px); + opacity: 1; + } + } + @keyframes slide-in { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 0; + } + 100% { + -webkit-transform: translateX(-74px); + transform: translateX(-74px); + opacity: 1; + } + } + /* slide-out */ + @-webkit-keyframes slide-out { + 0% { + -webkit-transform: translateX(-74px); + transform: translateX(-74px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + } + @keyframes slide-out { + 0% { + -webkit-transform: translateX(-74px); + transform: translateX(-74px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + } + /* + NAVI MOBILE + */ + /* END navi mobile base */ + .selected { + color: #047006; + } + .link-title { + vertical-align: middle; + line-height: normal; + background-color: transparent; + } + .nav-horizontal { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: flex-end; + list-style-type: none; + gap: 5%; + padding: 1em; + } + .footer .nav-horizontal { + gap: 0; + padding: 0 1em; + padding-inline-start: 0 !important; + } + .nav-top-smaller { + margin: 0; + padding: 0; + } + .nav-smaller { + justify-content: left; + align-items: flex-start; + gap: 0; + padding: 0; + } + .nav-smaller li { + padding: 0 !important; + padding: 0.2em 0.5em !important; + border: 1px solid #047006; + margin: 0.1em 0.3em; + border-radius: 12px; + } + .nav-smaller .heading { + font-weight: bold; + } + .nav-vertical { + margin-top: -2em; + } + .nav-horizontal li { + padding: 0.5em; + } + .nav-vertical > ul { + display: flex; + flex-direction: column; + list-style-type: none; + gap: 5%; + padding: 1em; + } + .nav-vertical li { + padding: 0.5em; + } + .nav-top > ul { + padding: 0; + padding-right: 2em; + } + .nav-bottom { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + list-style-type: none; + } + .nav-bottom p { + font-size: 0.9em; + color: grey; + margin: 0; + } + nav.grd-left-bar { + position: fixed; + top: 80.5px; + } + nav .grd-nav-bn { + width: 100px; + } + nav ul { + margin-top: 0; + padding-left: 0; + } + /* buttons */ + .grd-nav-bn:hover, + .grd-active { + background-color: lightgray; + border-color: #000; + } + .grd-nav-bn { + padding: 10px; + border: 1px solid grey; + display: table-cell; + text-align: center; + vertical-align: middle; + color: grey; + } + .grd-nav-bn-large { + width: 40vw; + height: 18vh; + font-size: 35px; + } + a.grd-nav-bn, + a.grd-nav-bn:visited { + color: #000; + text-decoration: none; + } +} +@media screen and (max-width:767px) { + .logo.big, + .logo.small { + display: none; + } + .logo.visible { + padding: 0 !important; + } + .logo, + .logo.mobile, + .logo.mobile.visible { + display: block; + position: fixed; + top: 12px; + left: 12px; + } + .logo.big, + .logo.big.visible { + display: none !important; + } + .nav-main-button { + display: none; + } + .nav-main-button.mobile { + display: block; + position: fixed; + top: 2px; + right: 46px; + z-index: 3; + } + .nav-menu.nav-menu-minimized, + .nav-menu.nav-menu-maximized { + width: 280px; + height: 300px; + } + .nav-menu-minimized .nav-icon, + .nav-menu-minimized .nav-main-button { + padding-left: 0; + } + .nav-menu-maximized { + -webkit-animation: slide-down 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-down 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + } + .nav-menu-minimized { + -webkit-animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + } + @-webkit-keyframes slide-down { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 0; + } + 100% { + -webkit-transform: translateY(300px); + transform: translateX(300px); + opacity: 1; + } + } + @keyframes slide-down { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 0; + } + 100% { + -webkit-transform: translateY(300px); + transform: translateY(300px); + opacity: 1; + } + } + @-webkit-keyframes slide-up { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + -webkit-transform: translateY(-300px); + transform: translateY(-300px); + } + } + @keyframes slide-up { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + -webkit-transform: translateY(-300px); + transform: translateY(-300px); + } + } +} +@media screen and (max-width:767px) { + .nav-vertical { + margin-top: 55px; + } +} +@media screen and (max-width:767px) { + .nav-bottom p { + font-size: 0.8em; + margin-top: -10px; + } +} +/* ============================================================ + + Notification + + Datei : notification.css + Datum : 2020-06-10 + Autor : Christine Slotty + Copyright : Gradido + + ============================================================*/ +@media screen { + .header-notify { + display: flex; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; + z-index: 10; + } + .notify { + display: block; + padding: 0.5rem 0.3rem; + color: #525c5d; + animation: blinkingNotifySymbol 1.2s infinite; + } + .notify-alert { + color: #ff5f66; + animation: blinkingAlertSymbol 1.2s infinite; + } + @keyframes blinkingNotifySymbol { + 0% { + color: #525c5d; + } + 49% { + color: #525c5d; + } + 60% { + color: #525c5d82; + } + 99% { + color: #525c5d82; + } + 100% { + color: #525c5d; + } + } + @keyframes blinkingAlertSymbol { + 0% { + color: #ff5f66; + } + 49% { + color: #ff5f66; + } + 60% { + color: #ff5f669e; + } + 99% { + color: #ff5f669e; + } + 100% { + color: #ff5f66; + } + } + /* + .notification-indicator-primary { + background: #047006; + } + + .notification-indicator-warning { + background: #f0825f + } + .notification-indicator-secondary { + background: grey + } + + .notification-indicator-secondary:before { + content: ""; + background: rgba(128, 128, 128, .5) + } + + .notification-indicator-success { + background: #00e093 + } + + .notification-indicator-success:before { + content: ""; + background: rgba(0, 224, 147, .5) + } + + .notification-indicator-info { + background: #6c61f6 + } + + .notification-indicator-info:before { + content: ""; + background: rgba(108, 97, 246, .5) + } + + + .notification-indicator-danger { + background: #ff5f66 + } + + .notification-indicator-danger:before { + content: ""; + background: rgba(255, 95, 102, .5) + } + + .notification-indicator-light { + background: #dfdfdf + } + + .notification-indicator-light:before { + content: ""; + background: rgba(223, 223, 223, .5) + } + + .notification-indicator-dark { + background: #74767b + } + + .notification-indicator-dark:before { + content: ""; + background: rgba(116, 118, 123, .5) + } + + .notification-indicator-white { + background: #fff + } + + .notification-indicator-white:before { + content: ""; + background: rgba(255, 255, 255, .5) + } + */ +} +@media screen and (max-width:767px) { + .header-notify { + justify-content: flex-end; + margin-right: 93px; + margin-top: 8px; + } +} +/* ============================================================ + + Screen styles for the regular center part. + + Datei : center.css + Datum : 2020-04-30 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +@media screen { + /* ========= + CONTENT + =========*/ + .content-default { + display: flex; + justify-content: center; + max-width: 90%; + } + .content { + display: flex; + justify-content: flex-start; + flex-direction: column; + overflow: auto; + width: 100%; + background-color: #f9fafb; + line-height: 1.5em; + letter-spacing: 0.03rem; + font-family: Roboto, sans-serif; + font-weight: 500; + font-size: 1rem; + padding-right: 5em; + } + /* Center Navigation Top */ + .nav-content { + position: relative; + color: #565656; + margin: 0 0.25em; + } + .nav-content-list { + display: flex; + list-style-type: none; + padding: 0; + margin-left: 0.25em; + } + .nav-content-separator { + margin: 0 1em; + } + /* Center Content Container */ + .content-container { + background-color: #fff; + color: #212529; + border-radius: 0.5em; + box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2); + border: 1px solid rgba(238, 238, 238, 0.75); + margin: 1em 0.25em; + } + /* Block Container Above Main */ + .block-container { + width: 100%; + display: flex; + } + /* Top Info Above Main */ + .info-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 70%; + padding: 1em 25px; + } + /* Main Container */ + .main-container { + width: 100%; + } + .default-container { + width: 90%; + margin: auto; + padding: 1em; + } + /* Content Block */ + .content-block { + width: 170px; + padding: 20px 25px 20px; + border: 1px dashed grey; + border-radius: 16px; + margin: 1em; + display: flex; + flex-direction: column; + justify-content: center; + justify-items: center; + align-items: center; + } + .block-img { + width: 40px; + height: 40px; + line-height: 20px; + font-size: 24px; + padding: 8px; + border-radius: 20px; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); + overflow: hidden; + border-style: none; + box-sizing: border-box; + } + /* Generic Content */ + .content-region h3 { + color: #21252969; + } + .content-region { + border-bottom: 1px dashed #F5F5F5; + padding: 0 25px; + padding-bottom: 2em; + margin: 1em 0.25em; + } + .content-collection { + display: flex; + } + .content-item { + margin: 0.5em 0; + margin-right: 5em; + width: 220px; + padding: 1em 2em; + } + .action-button { + background: #f9fafb; + border-left: 3px solid #047006; + } + .info-item { + border-left: 2px solid grey; + } + .inline-header { + display: inline; + } + .show-profile-img { + display: block; + height: 100px; + vertical-align: middle; + border-radius: 10px; + border: 2px dotted #80808026; + } + /* OTHER */ + .info-item i, + .info-item-link, + .action-button i, + .action-button-link { + vertical-align: middle; + } +} +@media screen and (max-width:767px) { + .content { + padding-right: 0; + } +} +@media screen and (max-width:767px) { + .nav-content-list { + display: flex; + font-size: small; + margin-bottom: 0; + justify-content: center; + } +} +@media screen and (max-width:767px) { + .info-container { + max-width: 90%; + } +} +@media screen and (max-width:767px) { + .main-container { + max-width: 97%; + } +} +@media screen and (max-width:767px) { + .content-region { + padding-left: 5px; + } + .content-collection { + flex-direction: column; + align-items: center; + } + .content-item { + margin: 0.5em 0; + margin-right: 0; + width: 160px; + padding: 1em 2em; + } +} +/* Ende @media screen */ +/* ============================================================ + + Screen styles for the simple center form. (login etc) + + Datei : center-form-single.css + Datum : 2020-07-10 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +@media screen { + .center-form-single { + width: 50%; + margin: auto; + } + .center-form-header { + margin-bottom: 50px; + } + .center-logo { + display: block; + margin: 0 auto; + width: 280px; + } + .center-logo img { + width: 100%; + vertical-align: middle; + border-style: none; + } + .center-form-container { + display: flex; + flex-direction: column; + padding: 2em 8em; + background-color: #fff; + border-radius: 6px; + box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2); + margin-bottom: 1.5rem; + border: 1px solid rgba(238, 238, 238, 0.75); + } + .center-form-title h1 { + margin-block-start: 0; + } + .center-form-selectors { + display: flex; + justify-content: flex-end; + align-items: center; + height: 38px; + padding: 5px 0; + margin-bottom: 2em; + } + .center-form-form, + .center-form-form form { + display: flex; + flex-direction: column; + } + .center-form-form .form-label { + text-align: left; + } + .center-form-form .form-control { + width: 100%; + margin: auto; + box-sizing: border-box; + margin-bottom: 0.5em; + } + .center-form-submit { + width: 100%; + margin: 1em 0; + } + .reset-pwd-link, + .signup-link { + padding: 0 20px; + } + .reset-pwd-link a, + .signup-link a { + color: #047006; + } + .reset-pwd-link p, + .signup-link p { + display: inline-block; + margin-block-start: 0; + margin-block-end: 0; + } + .center-bottom { + color: grey; + text-align: center; + padding-top: 30px; + } + .flag-btn { + text-align: center; + vertical-align: middle; + padding: 3px 11px; + } + .flag { + display: block; + } + .flag-germany { + background: red; + border-top: 9px solid #000; + border-bottom: 9px solid #fc0; + width: 40px; + height: 10px; + } + .flag-england { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJmbGFnLWljb24tY3NzLWdiIiB2aWV3Qm94PSIwIDAgNjQwIDQ4MCI+CiAgPHBhdGggZmlsbD0iIzAxMjE2OSIgZD0iTTAgMGg2NDB2NDgwSDB6Ii8+CiAgPHBhdGggZmlsbD0iI0ZGRiIgZD0iTTc1IDBsMjQ0IDE4MUw1NjIgMGg3OHY2Mkw0MDAgMjQxbDI0MCAxNzh2NjFoLTgwTDMyMCAzMDEgODEgNDgwSDB2LTYwbDIzOS0xNzhMMCA2NFYwaDc1eiIvPgogIDxwYXRoIGZpbGw9IiNDODEwMkUiIGQ9Ik00MjQgMjgxbDIxNiAxNTl2NDBMMzY5IDI4MWg1NXptLTE4NCAyMGw2IDM1TDU0IDQ4MEgwbDI0MC0xNzl6TTY0MCAwdjNMMzkxIDE5MWwyLTQ0TDU5MCAwaDUwek0wIDBsMjM5IDE3NmgtNjBMMCA0MlYweiIvPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yNDEgMHY0ODBoMTYwVjBIMjQxek0wIDE2MHYxNjBoNjQwVjE2MEgweiIvPgogIDxwYXRoIGZpbGw9IiNDODEwMkUiIGQ9Ik0wIDE5M3Y5Nmg2NDB2LTk2SDB6TTI3MyAwdjQ4MGg5NlYwaC05NnoiLz4KPC9zdmc+Cg==); + background-size: cover; + width: 40px; + height: 28px; + } + .group { + padding-left: 10px; + padding-top: 10px; + padding-bottom: 10px; + } + .group-is-invalid { + background-color: rgba(240, 130, 95, 0.2); + border-color: #dc3545; + padding-right: calc(1.5em + 0.75rem); + background-image: url("data:image/svg+xml,%3csvg xmlns=!string!fill=!string!viewBox=!string!%3e%3cpath stroke=!string!d=!string!/%3e%3ccircle r=!string!/%3e%3ccircle cx=!string!r=!string!/%3e%3ccircle cy=!string!r=!string!/%3e%3ccircle cx=!string!cy=!string!r=!string!/%3e%3c/svg%3E"); + background-repeat: no-repeat; + background-position: center right calc(0.375em + 0.1875rem); + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); + } + .group-is-invalid .radio label .input-frame::before { + border-color: red; + } +} +@media screen and (max-width:767px) { + .center-form-header { + margin-bottom: 30px; + margin-top: -50px; + } + .center-form-single { + width: 97%; + margin: auto; + } + .center-form-container { + padding: 1em 0.5em; + } +} +/* Ende @media screen */ +/* +To change this license header, choose License Headers in Project Properties. +To change this template file, choose Tools | Templates +and open the template in the editor. +*/ +/* ============================================================ + + Screen styles for plain facts. + + Datei : facts.css + Datum : 08.07.2020 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +@media screen { + .fact-list { + display: flex; + flex-direction: column; + list-style-type: none; + width: 100%; + padding-inline-start: 0; + font-weight: 300; + } + .fact { + display: inline-block; + padding-left: 1em; + } + .label { + width: 150px; + text-align: right; + font-weight: bold; + } +} +@media screen and (max-width:767px) { + .fact-list { + margin-block-start: 0; + margin-block-end: 0; + } + li.fact { + display: flex; + flex-direction: column; + } + .fact { + padding-left: 0.5em; + } + .label { + width: 250px; + text-align: left; + font-size: 0.9em; + font-weight: normal; + } +} +/* ============================================================ + + Screen styles for lists. + + Datei : list.css + Datum : 2020-06-09 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +@media screen { + /* ========= + LISTS + =========*/ + /* List Content */ + .content-list { + width: 100%; + } + .content-list-title { + font-size: 1rem; + margin: 0; + padding: 20px 25px; + color: #313131; + } + .content-list-table { + display: flex; + flex-direction: column; + width: 100%; + overflow: auto; + font-size: 16px; + color: #212529; + } + .row { + display: flex; + width: 100%; + border-top: 1px solid #f2f4f9; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + } + .row:hover { + background-color: #f6f7f9; + } + .cell { + display: flex; + flex-wrap: wrap; + align-items: center; + padding: 1em 1.5em; + } + .cell-dense { + padding: 0.1em 0.5em; + } + .centered { + justify-content: center; + } + .c0 { + flex-grow: 5; + min-width: 20%; + } + .c1 { + min-width: 40px; + flex: 0 0 40px; + } + .c2 { + min-width: 80px; + flex: 0 0 80px; + } + .c3 { + min-width: 160px; + flex: 0 0 160px; + } + .c4 { + min-width: 240px; + flex: 0 0 240px; + } + .c5 { + min-width: 320px; + flex: 0 0 320px; + } + .c6 { + min-width: 400px; + flex: 0 0 400px; + } + .header-cell { + border-top: 1px solid #f2f4f9; + background-color: #fafafa; + color: #101010; + } + .content-list-table img, + .content-list-table i { + vertical-align: middle; + } + .content-list-table > span { + font-size: 0.8em; + padding: 0.5em 2em; + vertical-align: middle; + } + /* Individual Tables XXX rm!! */ + .error-list { + grid-template-columns: 2fr 2fr 5fr 1fr; + } + .transactions { + grid-template-columns: 1fr 4fr 2fr 2fr; + } + .profile-img { + width: 30px; + height: 30px; + border-radius: 6px; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); + overflow: hidden; + border-style: none; + box-sizing: border-box; + margin-right: 40px; + } + .tx-email { + cursor: pointer; + display: block; + color: #101010; + font-weight: 400; + } + .small { + font-size: 80%; + font-weight: 400; + } + /*, + .cell-icon .material-icons-outlined */ + .cell-icon { + /*noch ungeklärt - icon ist nicht aligned */ + /*font-size: 1.25em;*/ + vertical-align: middle; + } + /* ===================================== + FORM TOP CONTENT (checkTransaction) + =====================================*/ + .form-content { + padding: 35px; + padding-top: 20px; + max-width: 80%; + margin: auto; + } + .content-table { + border: 1px solid #f2f4f9; + border-top: none; + margin-bottom: 1.5rem; + } + .content-row { + display: flex; + justify-content: space-between; + font-weight: 400; + border-top: 1px solid #f2f4f9; + } + .content-row-header { + font-weight: 500; + color: #101010; + } + .content-row-bg { + background-color: #f0f2f5; + } + .content-cell { + display: block; + border-collapse: collapse; + padding: 10px 15px; + } + .form-button .material-icons-outlined { + font-size: 1.25em; + } +} +@media screen and (max-width:767px) { + .row { + flex-direction: column; + } +} +@media screen and (max-width:767px) { + .cell { + padding: 0.25em 1.5em; + } + .c1 { + flex-basis: auto; + } + .c2 { + flex-basis: auto; + } + .c3 { + flex-basis: auto; + } + .c4 { + flex-basis: auto; + } + .c5 { + flex-basis: auto; + } + .c6 { + flex-basis: auto; + } +} +/* +To change this license header, choose License Headers in Project Properties. +To change this template file, choose Tools | Templates +and open the template in the editor. +*/ +/* ============================================================ + + Screen styles for forms. + + Datei : form.css + Datum : 2020-06-07 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +@media screen { + /* ========= + FORMS + =========*/ + /* Form Content */ + .action-form { + width: 100%; + } + .form-header { + border-left: 3px solid #047006; + background: #f9fafb; + padding: 15px 20px; + margin: 0; + margin-bottom: 15px; + border-radius: 0 6px 0 0; + } + .form-label { + grid-column: 0.5; + font-weight: 400; + text-align: right; + } + .form-control { + grid-column: 0.66666667; + padding: 0.4em 0.75em; + padding-left: 20px; + padding-right: 20px; + margin: 0; + color: rgba(16, 16, 16, 0.8); + display: block; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #6c757d; + background-color: #f6f7f9; + background-clip: padding-box; + border: 1px solid #f0f2f5; + border-radius: 0.25rem; + -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + } + .form-control:focus { + color: #495057; + background-color: #f6f7f9; + border-color: #d7dee5; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); + } + textarea { + resize: vertical; + } + .badge { + display: inline-block; + padding: 0.45rem 1rem; + font-size: 80%; + font-weight: 700; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + } + .badge-warning { + color: #fff; + background-color: #00e093; + } + .badge-error { + color: #fff; + background-color: #ff5f66; + } + .form-full-width { + grid-column-start: 1; + grid-column-end: 3; + display: flex; + flex-direction: column; + } + .form-button { + cursor: pointer; + font: 600 13.3333px Arial; + font-size: 0.875rem; + line-height: 1.5; + text-align: center; + vertical-align: middle; + color: #fff; + background-color: #047006; + border-color: #047006; + border: 1px solid transparent; + border-radius: 0.2rem; + height: 35px; + max-height: 35px; + padding: 4px 15px; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); + } + .form-button:hover { + background-color: #034b04; + border-color: #023f03; + } + .button-cancel { + color: #fff !important; + background-color: #f0825f; + border-color: #f0825f; + } + .button-cancel:hover { + background-color: #ec5e30; + border-color: #eb5425; + } + .link-button { + display: inline-block; + background: #f9fafb; + color: #fff; + height: 17px; + padding: 1em 2em; + line-height: 1em; + border-radius: 6px; + text-align: center; + vertical-align: middle; + } + .action-link { + color: #047006 !important; + } + .action-link-button { + background-color: #047006 !important; + color: #fff !important; + margin-top: 1em; + padding: 0.5em 1em; + } + .edit-profile-img { + width: 100px; + } + .note-smaller { + font-size: smaller; + } + .form-row, + .grid-row { + display: flex; + justify-content: flex-start; + align-items: center; + align-content: center; + width: 100%; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + } + .form-row { + border-top: 1px solid #f2f4f9; + } + .form-row:hover { + background-color: #f6f7f9; + } + /* CENTER FORM SPECIFICS */ + .form-body form { + display: grid; + grid-template-columns: 200px 1fr; + margin: 36px 75px; + grid-gap: 1em; + } + .center-form { + width: 450px; + } + .center-form .form-control { + width: 90%; + } + .center-form fieldset { + margin-bottom: 1em; + } +} +@media screen and (max-width:767px) { + .grid-row { + flex-direction: column; + } +} +@media screen and (max-width:767px) { + .form-body form { + grid-template-columns: 1fr; + margin: 20px; + grid-gap: 0.25em; + } + .form-label { + text-align: left; + } +} diff --git a/websrc/src/less/01-layout.less b/websrc/src/less/01-layout.less index 18bca3a6c..2aed60860 100644 --- a/websrc/src/less/01-layout.less +++ b/websrc/src/less/01-layout.less @@ -26,13 +26,23 @@ grid-template-rows: [top] 8vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end]; grid-template-columns: [left1] auto [left2] 1fr [left3] 12fr [right3] 1fr [right2] auto [right1]; grid-template-areas: "header header header header header" - "left . center . ." + "left . center center ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; margin: 0; padding: 0; } +@media @wide-screen-down { + .layout { + grid-template-areas: "header header header header header" + "left . center center center" + "footer footer footer footer footer" + "bottom bottom bottom bottom bottom"; + } + +} + @media @tablet-down { .layout { position: relative; @@ -101,4 +111,3 @@ grid-row-start: footer2; grid-row-end: end; } - diff --git a/websrc/src/less/02-colors.less b/websrc/src/less/02-colors.less index b8b8d49c7..90eff9346 100644 --- a/websrc/src/less/02-colors.less +++ b/websrc/src/less/02-colors.less @@ -84,8 +84,9 @@ @error: red; @error-border: rgba(255, 0, 0, 0.5); @success: #047006; +@success-message: #1A1A1A; +@success-message-background: #06c50a; @success-border: #04700675; -@success-background: rgba(4, 112, 6, 0.2); @success-background-icon: rgba(4, 112, 6, 0.2); @success-background-hover: lightgreen; @alert: #ff5f66; @@ -117,6 +118,10 @@ color: @orange } +.blue-color { + color: blue +} + .unobtrusive { color: @unobtrusive; } diff --git a/websrc/src/less/05-screen.less b/websrc/src/less/05-screen.less index 5e1be1123..e92f7a8f7 100644 --- a/websrc/src/less/05-screen.less +++ b/websrc/src/less/05-screen.less @@ -49,6 +49,11 @@ overflow: hidden; } + div { + border-collapse: collapse; + box-sizing: border-box; + } + /* ======================= Kopfbereich =======================*/ diff --git a/websrc/src/less/06-messages.less b/websrc/src/less/06-messages.less index ca4f6d4e1..4c4d0fcb7 100644 --- a/websrc/src/less/06-messages.less +++ b/websrc/src/less/06-messages.less @@ -30,8 +30,8 @@ and open the template in the editor. } .alert-success { - color: @alert-color !important; - background-color: @success; + color: @success-message !important; + background-color: @success-message-background; border: 1px solid @success-border; } diff --git a/websrc/src/less/07-user.less b/websrc/src/less/07-user.less index 627726a03..50270ff49 100644 --- a/websrc/src/less/07-user.less +++ b/websrc/src/less/07-user.less @@ -15,27 +15,37 @@ justify-content: flex-start; align-items: flex-end; align-content: flex-end; + position: relative; width: 100%; min-width: 12em; + height: 40px; background-color: @container-background; border: 1px solid @menu-border-color; border-radius: 0 0 0 18px; } .user-menu-container { + display: flex; + justify-content: flex-end; + align-items: center; font-size: .8em; font-weight: 300; - margin: auto; - padding: .25em 1em; + padding: .25em .5em; z-index: 20; + height: 40px; } + .user-name, .user-icon { display: inline-block; - vertical-align: center; + vertical-align: middle; cursor: pointer; } + .user-name { + padding-right: .25em; + } + .nav-vertical.user-menu { display: none; background-color: @container-background; @@ -45,6 +55,9 @@ z-index: 15; font-size: .9em; margin-top: 0 !important; + position: fixed; + top: 39px; + right: 0; } .nav-vertical.user-menu.visible { @@ -82,7 +95,8 @@ min-width: 3em; background-color: transparent; justify-content: center; - margin-top: -4px; + height: 100%; + margin-top: -13px; margin-left: -16px; color: @action-button-background1; } @@ -92,6 +106,9 @@ padding: 0; } + .user-icon { + + } .user-name { display: none; } diff --git a/websrc/src/less/10-center.less b/websrc/src/less/10-center.less index f3ed59733..44f8bad73 100644 --- a/websrc/src/less/10-center.less +++ b/websrc/src/less/10-center.less @@ -30,16 +30,15 @@ letter-spacing: @content-letter-spacing; font-family: Roboto, sans-serif; font-weight: 500; - font-size: 1rem; /*padding-top: 2em;*/ - padding-right: 10em; + font-size: 1rem; + padding-right: 5em; } - @media @phone-down { + @media @tablet-down { + .content { + padding-right: 0; + } - /* .content { - flex-direction: column; - } - */ } /* Center Navigation Top */ @@ -89,7 +88,7 @@ /* Top Info Above Main */ .info-container { display: flex; - justify-content: space-around; + justify-content: space-between; align-items: center; max-width: 70%; padding: 1em 25px; @@ -166,7 +165,7 @@ .content-item { margin: .5em 0; margin-right: 5em; - width: 160px; + width: 220px; padding: 1em 2em; } diff --git a/websrc/src/less/20-list.less b/websrc/src/less/20-list.less index 415d8a149..d09fe0594 100644 --- a/websrc/src/less/20-list.less +++ b/websrc/src/less/20-list.less @@ -71,6 +71,7 @@ .c0 { flex-grow: 5; + min-width: 20%; } .c1 { @@ -98,6 +99,11 @@ flex: 0 0 320px; } + .c6 { + min-width: 400px; + flex: 0 0 400px; + } + @media @tablet-down { .cell { padding: .25em 1.5em; @@ -123,6 +129,10 @@ flex-basis: auto; } + .c6 { + flex-basis: auto; + } + } .header-cell { diff --git a/websrc/src/less/30-form.less b/websrc/src/less/30-form.less index 02d076e9b..571c31787 100644 --- a/websrc/src/less/30-form.less +++ b/websrc/src/less/30-form.less @@ -97,6 +97,13 @@ and open the template in the editor. background-color: @badge-background-error; } + .form-full-width { + grid-column-start: 1; + grid-column-end: 3; + display: flex; + flex-direction: column; + } + .form-button { cursor: pointer; font: 600 13.3333px Arial; @@ -158,6 +165,36 @@ and open the template in the editor. width: 100px; } + .note-smaller { + font-size: smaller; + } + + .form-row, + .grid-row { + display: flex; + justify-content: flex-start; + align-items: center; + align-content: center; + width: 100%; + -webkit-transition-duration: .5s; + transition-duration: .5s; + } + + @media @tablet-down { + .grid-row { + flex-direction: column; + } + + } + + .form-row { + border-top: 1px solid #f2f4f9; + } + + .form-row:hover { + background-color: #f6f7f9; + } + /* CENTER FORM SPECIFICS */ .form-body form { display: grid;