/* ============================================================ 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] 6vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end]; grid-template-columns: [left1] 1fr [left2] 1fr [left3] 8fr [right3] 1fr [right2] 1fr [right1]; grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; margin: 0; padding: 0; } .header-notify { grid-area: header; grid-column-start: right3; grid-column-end: right2; } .sidebar1 { grid-area: left; grid-row-start: top; grid-row-end: end; } .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; } /* ============================================================ Color Definitions 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) ??? */ /* https://www.w3schools.com/colors/colors_shades.asp */ /* ============================================================ Typography Definitions Datei : typography.less Datum : 2020-05-26 Autor : Christine Slotty Copyright : Gradio ============================================================*/ /* ============================================================ 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; 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; } /* ======================= 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: 1.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; } /* ======================= Gradido =======================*/ /* Gradido */ .grd-negative-currency { color: red; } /* Gradido Transform */ .gdt-text-color { color: #a27824; } .grd-alert-color { color: #ff5f66; } .grd-success-color { color: #047006; } .grd-orange-color { color: #ffa600; } .grd_clickable { cursor: pointer; } } /* Ende @media screen */ /* ============================================================ 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.small.visible { padding-left: 118px; } /* 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; } .nav-menu { width: 280px; 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: 224px; } /** * ---------------------------------------- * 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(-224px); transform: translateX(-224px); opacity: 1; } } @keyframes slide-in { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 0; } 100% { -webkit-transform: translateX(-224px); transform: translateX(-224px); opacity: 1; } } /* slide-out */ @-webkit-keyframes slide-out { 0% { -webkit-transform: translateX(-224px); transform: translateX(-224px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slide-out { 0% { -webkit-transform: translateX(-224px); transform: translateX(-224px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .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:480px) { .logo.big { display: none; } .logo.small { display: block; } } /* ============================================================ Notification Datei : notification.css Datum : 2020-06-10 Autor : Christine Slotty Copyright : Gradido ============================================================*/ @media screen { .header-notify { position: relative; display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-link { display: block; padding: 0.5rem 1rem; color: #525c5d; } .notification-indicator { display: block; width: 7px; height: 7px; position: absolute; top: 12px; right: 12px; border-radius: 100%; z-index: 99000; } .notification-indicator:before { content: ""; display: block; width: 26px; height: 26px; z-index: 99000; border-radius: 100%; opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; mix-blend-mode: screen; -webkit-animation: blink 1.2s ease-out; animation: blink 1.2s ease-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes blink { 0%, 35% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 50% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0.8; } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes blink { 0%, 35% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 50% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0.8; } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } } .notification-indicator-primary { background: #047006; } .notification-indicator-primary:before { content: ""; background: rgba(4, 112, 6, 0.5); } .notification-indicator-warning { background: #f0825f; } .notification-indicator-warning:before { content: ""; background: rgba(240, 130, 95, 0.5); } /* .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) } */ } /* ============================================================ Screen styles for 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-top: 6em; padding-right: 10em; } /* Center Navigation Top */ .nav-content { color: #565656; margin: 0 0.25em; margin-bottom: 1em; } .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; } /* Top Info Above Main */ .info-container { max-width: 70%; padding: 0.5em 25px; } /* Main Container */ .main-container { width: 100%; } /* Generic Content */ .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: 160px; padding: 1em 2em; } .action-button { background: #f9fafb; border-left: 3px solid #047006; } .info-item { border-left: 2px solid grey; } /* OTHER */ .info-item i, .info-item-link, .action-button i, .action-button-link { vertical-align: middle; } } @media screen and (max-width:480px) { .content { flex-direction: column; } } /* Ende @media screen */ /* ============================================================ 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; align-items: center; padding: 1em 1.5em; } .c0 { flex-grow: 5; } .c1 { width: 80px; flex: 0 0 80px; } .c2 { width: 160px; flex: 0 0 160px; } .c3 { width: 240px; flex: 0 0 240px; } .c4 { width: 320px; flex: 0 0 320px; } .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!! */ .wiretransfer { grid-template-columns: 5fr 4fr 3fr 2fr 1fr; } .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; } } /* 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-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 { color: #fff; background-color: #034b04; border-color: #023f03; } /* 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; } } /* Button .grd-form-bn:hover, .grd-active { background-color: @button-background-active; border-color: @button-border-color; } .grd-form-bn { padding: 5px; border: 1px solid @form-button-border; display: table-cell; text-align: center; vertical-align: middle; color: @form-button-text; } .grd-form-bn-small { } a.grd-form-bn, a.grd-form-bn:visited { color: @button-text; text-decoration: none; } .grd-form-bn-succeed { background-color: @success-background; color: @success; margin-top: 3px; margin-bottom: 3px; } .grd-form-bn-succeed:not([disabled]):hover { background-color: @success-background-hover; } .grd-form-bn-discard { margin-left: 5px; border: 1px solid @error; color: @error; cursor: pointer; } form elements .grd_textarea { border: 1px solid grey; background-color: @form-text-background; padding: 5px; font-style: italic; } .grd-input label { display: block; } input.grd-privkey { width: 465px; } input.grd-pubkey { width: 465px; } input.grd-non-der-keys { width: 900px; } input:not([type='radio']) { width: 200px; } label:not(.grd_radio_label) { width: 80px; display: inline-block; } */ /* ============================================================ Print styles. Datei : print.css Datum : 2020-04-30 Autor : Christine Slotty Copyright : Gradio ============================================================*/ /* --------------------------------------------------------- Print styles ---------------------------------------------------------*/ @media print { * { color: #000 !important; box-shadow: none !important; text-shadow: none !important; background: transparent !important; } html { background-color: #111; } /* Hide navigation */ nav { display: none; } /* Show link destinations in brackets after the link text */ a[href]:after { content: " (" attr(href) ") "; } a[href] { font-weight: bold; text-decoration: underline; color: #06c; border: none; } /* Don't show link destinations for JavaScript or internal links */ a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Show abbr title value in brackets after the text */ abbr[title]:after { content: " (" attr(title) ")"; } figure { margin-bottom: 1em; overflow: hidden; } figure img { border: 1px solid #000; } } /* 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. */ /* Created on : 12.07.2019, 07:59:32 Author : einhornimmond */ div[role='grd_dialog'] { position: fixed; width: 100%; height: 100%; background-color: #fff; top: 0; left: 0; } div.grd_modal-dialog { margin-top: 100px; min-height: 200px; max-width: 1000px; margin-left: auto; margin-right: auto; background-color: #fff; color: #000; border: 1px solid grey; } div.grd_modal-dialog.grd_dialog-large { margin-top: 5px; width: 90%; } div.grd_modal-body { padding: 25px; } div.grd_modal-header { background-color: rgba(0, 0, 0, 0.1); padding: 5px; padding-left: 15px; border: 1px solid grey; color: #000; } div.grd_modal-footer { background-color: rgba(0, 0, 0, 0.1); height: 40px; } .grd_modal-footer a, .grd_modal-footer button { float: right; padding: 9px; margin-right: 10px; border: 1px solid grey; } .grd_modal-footer a:hover, .grd_modal-footer button:hover { background-color: rgba(255, 255, 255, 0.5); } /* 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. */ /* Created on : 30.10.2019, 16:04:16 Author : einhornimmond */ /* 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: green; } .flash-messages .message { padding: 5px; } .flash-messages .success { color: green; } .flash-messages .error { color: red; }