IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

TX bestätigen / extra HTML; CSS WIP

Browse Source
This commit is contained in:
Christine Slotty 2020-06-11 15:47:59 +02:00
parent e0d22698ef
commit 733ac5cbcc
14 changed files with 463 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Template/Element/Flash/error.ctp
View File

@ -5,5 +5,5 @@ if (!isset($params['escape']) || $params['escape'] !== false) {
?> ?>
<!--<div class="message error" onclick="this.classList.add('hidden');"><?= $message ?></div>--> <!--<div class="message error" onclick="this.classList.add('hidden');"><?= $message ?></div>-->
<div class="alert alert-danger" role="alert" onclick="this.classList.add('hidden');"> <div class="alert alert-danger" role="alert" onclick="this.classList.add('hidden');">
<i class="mdi mdi-alert-outline grd-alert-color mdi-2x"></i> <?= $message ?> <i class="mdi mdi-alert-outline alert-color mdi-2x"></i> <?= $message ?>
</div> </div>

6
src/Template/Element/navi.ctp
View File

@ -17,7 +17,7 @@ $navi = [];
/*if($errorCount > 0) { /*if($errorCount > 0) {
$errorNaviEntry = new NaviEntry(__('Fehler '). "($errorCount)", 'mdi-alert-outline', 'StateErrors', 'showForUser'); $errorNaviEntry = new NaviEntry(__('Fehler '). "($errorCount)", 'mdi-alert-outline', 'StateErrors', 'showForUser');
$errorNaviEntry->setBGColor('bg-inverse-danger') $errorNaviEntry->setBGColor('bg-inverse-danger')
->setIconColor('grd-alert-color'); ->setIconColor('alert-color');
array_push($navi, $errorNaviEntry); array_push($navi, $errorNaviEntry);
}*/ }*/
$balanceNaviEntry = new NaviEntry( $balanceNaviEntry = new NaviEntry(
@ -27,9 +27,9 @@ $balanceNaviEntry = new NaviEntry(
'account_balance_wallet', 'StateBalances', 'overview' 'account_balance_wallet', 'StateBalances', 'overview'
); );
if($balance < 0 ) { if($balance < 0 ) {
//$balanceNaviEntry->setIconColor('grd-alert-color'); //$balanceNaviEntry->setIconColor('alert-color');
} else if($balance > 0) { } else if($balance > 0) {
//$balanceNaviEntry->setIconColor('grd-success-color'); //$balanceNaviEntry->setIconColor('success-color');
} }
array_push($navi, $balanceNaviEntry); array_push($navi, $balanceNaviEntry);
array_push($navi, new NaviEntry(__('Startseite'), 'home', 'Dashboard', 'index')); array_push($navi, new NaviEntry(__('Startseite'), 'home', 'Dashboard', 'index'));

18
src/Template/Element/navi_notify.ctp
View File

@ -23,21 +23,19 @@ class NavHeaderEntry
} }
*/ */
?> ?>
<?php if($errorCount > 0) : ?>
<?= $this->Html->link(
'<i class="material-icons-outlined grd-alert-color">announcement</i>'
. '<span class="notification-indicator notification-indicator-warning">ss</span>',
['controller' => 'StateErrors', 'action' => 'ShowForUser'],
['class' => 'nav-link', 'escape' => false, 'title' => "$errorCount " . __('Fehler')]) ?>
<?php endif; ?>
<?php if($transactionPendings > 0) : ?> <?php if($transactionPendings > 0) : ?>
<a class="nav-link" title="<?= "$transactionPendings " . __('Transaktionen sind noch zu unterzeichnen')?>" href="<?= Router::url('./', true) ?>account/checkTransactions"> <a class="notify-link" title="<?= "$transactionPendings " . __('Transaktionen sind noch zu unterzeichnen')?>" href="<?= Router::url('./', true) ?>account/checkTransactions">
<i class="material-icons-outlined">verified_user</i> <i class="material-icons-outlined notify">verified_user</i>
<!-- <!--
fingerprint fingerprint
today today
--> -->
<!--(<?= $transactionPendings ?>)--> <!--(<?= $transactionPendings ?>)-->
<span class="notification-indicator notification-indicator-primary">ss</span>
</a> </a>
<?php endif; ?> <?php endif; ?>
<?php if($errorCount > 0) : ?>
<?= $this->Html->link(
'<i class="material-icons-outlined notify notify-alert">announcement</i>',
['controller' => 'StateErrors', 'action' => 'ShowForUser'],
['class' => 'notify-link', 'escape' => false, 'title' => "$errorCount " . __('Fehler')]) ?>
<?php endif; ?>

2
src/Template/Layout/frontend.ctp
View File

@ -37,11 +37,11 @@ $GLOBALS["self"] = $this;
</head> </head>
<body> <body>
<div class="layout"> <div class="layout">
<!-- TODO save last state so that it remains unchanged, on reload! -->
<div class="header-notify"> <div class="header-notify">
<?= $this->element('navi_notify'); ?> <?= $this->element('navi_notify'); ?>
</div> </div>
<div class="sidebar1 nav-menu initial"> <div class="sidebar1 nav-menu initial">
<!-- TODO save last sidebar state so that it remains unchanged, on reload! -->
<a href="/"> <a href="/">
<picture class="logo big visible"> <picture class="logo big visible">
<source srcset="/img/logo_schrift_half.webp" type="image/webp"> <source srcset="/img/logo_schrift_half.webp" type="image/webp">

8
src/Template/StateBalances/overview.ctp
View File

@ -41,12 +41,12 @@ $this->assign('header', $header);
if(strlen($memoShort) > 30) { if(strlen($memoShort) > 30) {
$memoShort = substr($memoShort, 0, 30) . '...'; $memoShort = substr($memoShort, 0, 30) . '...';
} }
$cellColorClass = 'grd-success-color'; $cellColorClass = 'success-color';
if($send) { if($send) {
$balance = -$balance; $balance = -$balance;
$cellColorClass = 'grd-alert-color'; $cellColorClass = 'alert-color';
} else if($transaction['type'] == 'creation') { } else if($transaction['type'] == 'creation') {
$cellColorClass = 'grd-orange-color'; $cellColorClass = 'orange-color';
} }
?> ?>
<div class="row"> <div class="row">
@ -62,7 +62,7 @@ $this->assign('header', $header);
<?php endif; ?> <?php endif; ?>
<span class=" <?= $cellColorClass ?>"> <span class=" <?= $cellColorClass ?>">
<?php if($transaction['type'] == 'creation') : ?> <?php if($transaction['type'] == 'creation') : ?>
<i class="material-icons-outlined grd-orange-color">redeem</i> <i class="material-icons-outlined orange-color">redeem</i>
<?= __('Geschöpft')?> <?= __('Geschöpft')?>
<?php elseif($transaction['type'] == 'send') : ?> <?php elseif($transaction['type'] == 'send') : ?>
<i class="material-icons-outlined">arrow_right_alt</i> <i class="material-icons-outlined">arrow_right_alt</i>

2
src/Template/Transactions/decode.ctp
View File

@ -8,7 +8,7 @@
?> ?>
<?php if(isset($errors) && count($errors) > 0) : ?> <?php if(isset($errors) && count($errors) > 0) : ?>
<div class="grd-alert-color"> <div class="alert-color">
<ul> <ul>
<?php foreach($errors as $error) : ?> <?php foreach($errors as $error) : ?>
<li> <li>

179
webroot/css/grd_styles.css
View File

@ -48,7 +48,9 @@
} }
/* ============================================================ /* ============================================================
Color Definitions Generic Color Definitions
Vars and some generic CSS rules.
Datei : colors.less Datei : colors.less
Datum : 2020-05-26 Datum : 2020-05-26
@ -66,7 +68,17 @@
/* VARIOUS INDIVIDUAL */ /* VARIOUS INDIVIDUAL */
/* XXX TODO XXX */ /* XXX TODO XXX */
/*rgba(0, 0, 0, 0.5) ??? */ /*rgba(0, 0, 0, 0.5) ??? */
/* NOTIFICATION */
/* https://www.w3schools.com/colors/colors_shades.asp */ /* https://www.w3schools.com/colors/colors_shades.asp */
.alert-color {
color: #ff5f66;
}
.success-color {
color: #047006;
}
.orange-color {
color: #ffa600;
}
/* ============================================================ /* ============================================================
Typography Definitions Typography Definitions
@ -103,6 +115,7 @@
line-height: 1; line-height: 1;
letter-spacing: normal; letter-spacing: normal;
text-transform: none; text-transform: none;
vertical-align: middle;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
@ -213,15 +226,6 @@
.gdt-text-color { .gdt-text-color {
color: #a27824; color: #a27824;
} }
.grd-alert-color {
color: #ff5f66;
}
.grd-success-color {
color: #047006;
}
.grd-orange-color {
color: #ffa600;
}
.grd_clickable { .grd_clickable {
cursor: pointer; cursor: pointer;
} }
@ -485,95 +489,65 @@
============================================================*/ ============================================================*/
@media screen { @media screen {
.header-notify { .header-notify {
position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
} }
.nav-link { .notify {
display: block; display: block;
padding: 0.5rem 1rem; padding: 0.5rem 0.3rem;
color: #525c5d; color: #525c5d;
animation: blinkingNotifySymbol 1.2s infinite;
} }
.notification-indicator { .notify-alert {
display: block; color: #ff5f66;
width: 7px; animation: blinkingAlertSymbol 1.2s infinite;
height: 7px;
position: absolute;
top: 12px;
right: 12px;
border-radius: 100%;
z-index: 99000;
} }
.notification-indicator:before { @keyframes blinkingNotifySymbol {
content: ""; 0% {
display: block; color: #525c5d;
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% { 49% {
-webkit-transform: scale(0.6); color: #525c5d;
transform: scale(0.6); }
opacity: 0.8; 60% {
color: #525c5d82;
}
99% {
color: #525c5d82;
} }
100% { 100% {
opacity: 0; color: #525c5d;
-webkit-transform: scale(1.2);
transform: scale(1.2);
} }
} }
@keyframes blink { @keyframes blinkingAlertSymbol {
0%, 0% {
35% { color: #ff5f66;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
} }
50% { 49% {
-webkit-transform: scale(0.6); color: #ff5f66;
transform: scale(0.6); }
opacity: 0.8; 60% {
color: #ff5f669e;
}
99% {
color: #ff5f669e;
} }
100% { 100% {
opacity: 0; color: #ff5f66;
-webkit-transform: scale(1.2);
transform: scale(1.2);
} }
} }
.notification-indicator-primary { /*
background: #047006; .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 { }
background: #f0825f; .notification-indicator-secondary {
}
.notification-indicator-warning:before {
content: "";
background: rgba(240, 130, 95, 0.5);
}
/* .notification-indicator-secondary {
background: grey background: grey
} }
@ -852,6 +826,41 @@
font-size: 80%; font-size: 80%;
font-weight: 400; font-weight: 400;
} }
/* =====================================
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;
}
} }
/* /*
To change this license header, choose License Headers in Project Properties. To change this license header, choose License Headers in Project Properties.
@ -961,6 +970,14 @@ and open the template in the editor.
background-color: #034b04; background-color: #034b04;
border-color: #023f03; border-color: #023f03;
} }
.button-cancel {
background-color: #f0825f;
border-color: #f0825f;
}
.button-cancel:hover {
background-color: #ec5e30;
border-color: #eb5425;
}
/* CENTER FORM SPECIFICS */ /* CENTER FORM SPECIFICS */
.form-body form { .form-body form {
display: grid; display: grid;
@ -1186,13 +1203,13 @@ and open the template in the editor.
} }
.grd-success { .grd-success {
padding: 5px; padding: 5px;
color: green; color: #047006;
} }
.flash-messages .message { .flash-messages .message {
padding: 5px; padding: 5px;
} }
.flash-messages .success { .flash-messages .success {
color: green; color: #047006;
} }
.flash-messages .error { .flash-messages .error {
color: red; color: red;

129
webroot/transaktion-bestaetigen-login.html Normal file
View File

@ -0,0 +1,129 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Gradido Login Server: &Uuml;berpr&uuml;fe Transaktion</title>
<link href="/favicon.ico" type="image/x-icon" rel="icon" />
<link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link rel="stylesheet" href="/css/main.css" />
<script src="/js/basic.js"></script>
</head>
<body>
<div class="layout">
<div class="header-notify">
<a class="notify-link" title="1 Transaktionen sind noch zu unterzeichnen" href="http://192.168.178.52/./account/checkTransactions">
<i class="material-icons-outlined notify">verified_user</i>
</a>
</div>
<div class="sidebar1 nav-menu initial">
<a href="/">
<picture class="logo big visible">
<source srcset="/img/logo_schrift_half.webp" type="image/webp">
<source srcset="/img/logo_schrift_half.png" type="image/png">
<img src="/img/logo_schrift_half.png" class="logo big visible" alt="Logo">
</picture>
<picture class="logo small">
<source srcset="/img/logo_half.webp" type="image/webp">
<source srcset="/img/logo_half.png" type="image/png">
<img src="/img/logo_half.png" class="logo small" alt="Logo">
</picture>
</a>
<div>
<i class="material-icons-outlined nav-main-button">menu</i>
</div>
<div class="flash-messages">
</div>
<div class="nav-vertical">
<ul>
<li><a href="/state-balances/overview" class=""><i class="material-icons-outlined nav-icon " title="Kontoübersicht ( 950 GDD )">account_balance_wallet</i><span
class="link-title">Kontoübersicht ( 950 GDD )</span></a></li>
<li><a href="/dashboard/index" class=""><i class="material-icons-outlined nav-icon " title="Startseite">home</i><span
class="link-title">Startseite</span></a></li>
<li class=' selected'><a href="/transaction-send-coins/create" class=""><i class="material-icons-outlined nav-icon "
title="Überweisung">account_balance</i><span class="link-title">Überweisung</span></a></li>
<li><a href="https://elopage.com/s/gradido/sign_in" class="" target="_blank"><i class="material-icons-outlined nav-icon "
title="Mitgliederbereich">people_alt</i><span class="link-title">Mitgliederbereich</span></a></li>
</ul>
</div>
</div>
<div class="content">
<div class="nav-content">
<ul class='nav-content-list'>
<li><a href="/" class=""><span class="link-title">Startseite</span></a></li>
<li class='nav-content-separator'>-</li>
<li class='selected'><span class="link-title">&Uuml;berpr&uuml;fe Transaktion</span></li>
</ul>
</div>
<div class="content-container main-container">
<div class="action-form">
<p class="form-header">Transaktion unterzeichnen</p>
<div class="form-content">
<p>&Uuml;berweisung</p>
<div class="content-table">
<div class="content-row content-row-header">
<span class="content-cell">Konto</span>
<span class="content-cell">Gradido</span>
</div>
<div class="content-row content-row-bg">
<span class="content-cell">Normaler&nbsp;User&nbsp;&lt;info@software-labor.de&gt;</span>
<span class="content-cell alert-color">-10 GDD</span>
</div>
<div class="content-row">
<span class="content-cell">dario&nbsp;frodo&nbsp;&lt;dariofrodo@gmx.de&gt;</span>
<span class="content-cell success-color">10 GDD</span>
</div>
</div>
<div class="content-table">
<div class="content-row content-row-header">
<span class="content-cell">Aktives Konto</span>
</div>
<div class="content-row">
<span class="content-cell">Normaler User &lt;info@software-labor.de&gt;</span>
</div>
</div>
<div class="content-table">
<div class="content-row content-row-header">
<span class="content-cell">Verwendungszweck</span>
</div>
<div class="content-row content-row-bg">
<span class="content-cell">&nbsp;</span>
</div>
</div>
<form>
<button type="submit" class="form-button" name="ok" value="ok">
<i class="material-icons-outlined">verified_user</i>
Transaktion unterzeichnen
</button>
<button type="submit" class="form-button button-cancel" name="abort" value="abort">
<i class="material-icons-outlined">delete</i>
Transaktion verwerfen
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<ul class="nav-horizontal">
<li><a href="https://gradido.net/de/datenschutz/" target="_blank">Datenschutzerklärung</a></li>
<li><a href="https://gradido.net/de/impressum/" target="_blank">Impressum</a></li>
</ul>
</div>
<div class="nav-bottom">
<small class="">Copyright © 2020 Gradido</small>
</div>
<div class="bottomleft">
98.597 ms
</div>
<div class="bottomright">
<p>Community Server in Entwicklung</p>
<p>Alpha 0.21.KW21.05</p>
</div>
</div>
</body>
</html>

179
websrc/src/less-files.css
View File

@ -48,7 +48,9 @@
} }
/* ============================================================ /* ============================================================
Color Definitions Generic Color Definitions
Vars and some generic CSS rules.
Datei : colors.less Datei : colors.less
Datum : 2020-05-26 Datum : 2020-05-26
@ -66,7 +68,17 @@
/* VARIOUS INDIVIDUAL */ /* VARIOUS INDIVIDUAL */
/* XXX TODO XXX */ /* XXX TODO XXX */
/*rgba(0, 0, 0, 0.5) ??? */ /*rgba(0, 0, 0, 0.5) ??? */
/* NOTIFICATION */
/* https://www.w3schools.com/colors/colors_shades.asp */ /* https://www.w3schools.com/colors/colors_shades.asp */
.alert-color {
color: #ff5f66;
}
.success-color {
color: #047006;
}
.orange-color {
color: #ffa600;
}
/* ============================================================ /* ============================================================
Typography Definitions Typography Definitions
@ -103,6 +115,7 @@
line-height: 1; line-height: 1;
letter-spacing: normal; letter-spacing: normal;
text-transform: none; text-transform: none;
vertical-align: middle;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
@ -213,15 +226,6 @@
.gdt-text-color { .gdt-text-color {
color: #a27824; color: #a27824;
} }
.grd-alert-color {
color: #ff5f66;
}
.grd-success-color {
color: #047006;
}
.grd-orange-color {
color: #ffa600;
}
.grd_clickable { .grd_clickable {
cursor: pointer; cursor: pointer;
} }
@ -485,95 +489,65 @@
============================================================*/ ============================================================*/
@media screen { @media screen {
.header-notify { .header-notify {
position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
} }
.nav-link { .notify {
display: block; display: block;
padding: 0.5rem 1rem; padding: 0.5rem 0.3rem;
color: #525c5d; color: #525c5d;
animation: blinkingNotifySymbol 1.2s infinite;
} }
.notification-indicator { .notify-alert {
display: block; color: #ff5f66;
width: 7px; animation: blinkingAlertSymbol 1.2s infinite;
height: 7px;
position: absolute;
top: 12px;
right: 12px;
border-radius: 100%;
z-index: 99000;
} }
.notification-indicator:before { @keyframes blinkingNotifySymbol {
content: ""; 0% {
display: block; color: #525c5d;
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% { 49% {
-webkit-transform: scale(0.6); color: #525c5d;
transform: scale(0.6); }
opacity: 0.8; 60% {
color: #525c5d82;
}
99% {
color: #525c5d82;
} }
100% { 100% {
opacity: 0; color: #525c5d;
-webkit-transform: scale(1.2);
transform: scale(1.2);
} }
} }
@keyframes blink { @keyframes blinkingAlertSymbol {
0%, 0% {
35% { color: #ff5f66;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
} }
50% { 49% {
-webkit-transform: scale(0.6); color: #ff5f66;
transform: scale(0.6); }
opacity: 0.8; 60% {
color: #ff5f669e;
}
99% {
color: #ff5f669e;
} }
100% { 100% {
opacity: 0; color: #ff5f66;
-webkit-transform: scale(1.2);
transform: scale(1.2);
} }
} }
.notification-indicator-primary { /*
background: #047006; .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 { }
background: #f0825f; .notification-indicator-secondary {
}
.notification-indicator-warning:before {
content: "";
background: rgba(240, 130, 95, 0.5);
}
/* .notification-indicator-secondary {
background: grey background: grey
} }
@ -852,6 +826,41 @@
font-size: 80%; font-size: 80%;
font-weight: 400; font-weight: 400;
} }
/* =====================================
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;
}
} }
/* /*
To change this license header, choose License Headers in Project Properties. To change this license header, choose License Headers in Project Properties.
@ -961,6 +970,14 @@ and open the template in the editor.
background-color: #034b04; background-color: #034b04;
border-color: #023f03; border-color: #023f03;
} }
.button-cancel {
background-color: #f0825f;
border-color: #f0825f;
}
.button-cancel:hover {
background-color: #ec5e30;
border-color: #eb5425;
}
/* CENTER FORM SPECIFICS */ /* CENTER FORM SPECIFICS */
.form-body form { .form-body form {
display: grid; display: grid;
@ -1186,13 +1203,13 @@ and open the template in the editor.
} }
.grd-success { .grd-success {
padding: 5px; padding: 5px;
color: green; color: #047006;
} }
.flash-messages .message { .flash-messages .message {
padding: 5px; padding: 5px;
} }
.flash-messages .success { .flash-messages .success {
color: green; color: #047006;
} }
.flash-messages .error { .flash-messages .error {
color: red; color: red;

41
websrc/src/less/02-colors.less
View File

@ -1,6 +1,8 @@
/* ============================================================ /* ============================================================
Color Definitions Generic Color Definitions
Vars and some generic CSS rules.
Datei : colors.less Datei : colors.less
Datum : 2020-05-26 Datum : 2020-05-26
@ -20,11 +22,12 @@
@menu-link-selected: #047006; @menu-link-selected: #047006;
@menu-border-color: #f2f4f5; @menu-border-color: #f2f4f5;
/* CONTENT */ /* CONTENT */
@container-background: #fff; @container-background: #fff;
@container-text: #212529; @container-text: #212529;
@container-shadow: rgba(183,192,206,.2); @container-shadow: rgba(183, 192, 206, .2);
@container-border: rgba(238,238,238,.75); @container-border: rgba(238, 238, 238, .75);
/* CONTENT-NAV */ /* CONTENT-NAV */
@content-nav: #565656; @content-nav: #565656;
@ -41,6 +44,7 @@
@content-table-header: #101010; @content-table-header: #101010;
@content-table-header-bg: #fafafa; @content-table-header-bg: #fafafa;
@content-table-header-border: #f2f4f9; @content-table-header-border: #f2f4f9;
@content-row-bg: #f0f2f5;
/* FORMS */ /* FORMS */
@form-label: #212529; @form-label: #212529;
@ -50,40 +54,53 @@
@badge-background-error: #ff5f66; @badge-background-error: #ff5f66;
/* VARIOUS INDIVIDUAL */ /* VARIOUS INDIVIDUAL */
@grd-orange: #ffa600; @orange: #ffa600;
/* XXX TODO XXX */ /* XXX TODO XXX */
@dialog-background: #fff; @dialog-background: #fff;
/*rgba(0, 0, 0, 0.5) ??? */ /*rgba(0, 0, 0, 0.5) ??? */
@dialog-text: #000; @dialog-text: #000;
@dialog-background-extra: rgba(0, 0, 0, 0.1); @dialog-background-extra: rgba(0, 0, 0, 0.1);
@dialog-border: grey; @dialog-border: grey;
@form-text-background: rgba(0, 0, 0, 0.05);
@form-text-background: rgba(0,0,0,0.05);
@form-button-border: grey; @form-button-border: grey;
@form-button-text: #444; @form-button-text: #444;
@button-text: #000; @button-text: #000;
@button-border-color: #000; @button-border-color: #000;
@button-background-active: lightgray; @button-background-active: lightgray;
@print-background: #111; @print-background: #111;
@print-text: #000; @print-text: #000;
@print-link-text: #06c; @print-link-text: #06c;
@gdt-text: #a27824; @gdt-text: #a27824;
/* NOTIFICATION */
@info-border: gray; @info-border: gray;
@success: green; @success: green;
@success-background: lightcyan; @success-background: lightcyan;
@success-background-hover: lightgreen; @success-background-hover: lightgreen;
@error: red; @error: red;
@error-border: rgba(255, 0, 0, 0.5); @error-border: rgba(255, 0, 0, 0.5);
@success: #047006;
@grd-alert: #ff5f66; @alert: #ff5f66;
@grd-success: #047006; @alert-blink: #ff5f669e;
@notify: #525c5d;
@notify-blink: #525c5d82;
/* https://www.w3schools.com/colors/colors_shades.asp */ /* https://www.w3schools.com/colors/colors_shades.asp */
@unobtrusive: grey; @unobtrusive: grey;
@light: #F5F5F5; @light: #F5F5F5;
@verylight: #fbfbfb; @verylight: #fbfbfb;
.alert-color {
color: @alert;
}
.success-color {
color: @success;
}
.orange-color {
color: @orange
}

13
websrc/src/less/05-screen.less
View File

@ -24,6 +24,7 @@
line-height: 1; line-height: 1;
letter-spacing: normal; letter-spacing: normal;
text-transform: none; text-transform: none;
vertical-align: middle;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
@ -153,18 +154,6 @@
color: @gdt-text; color: @gdt-text;
} }
.grd-alert-color {
color: @grd-alert;
}
.grd-success-color {
color: @grd-success;
}
.grd-orange-color {
color: @grd-orange
}
.grd_clickable { .grd_clickable {
cursor: pointer; cursor: pointer;
} }

107
websrc/src/less/09-notification.less
View File

@ -10,7 +10,6 @@
============================================================*/ ============================================================*/
@media screen { @media screen {
.header-notify { .header-notify {
position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 0; padding-left: 0;
@ -18,103 +17,73 @@
list-style: none; list-style: none;
} }
.nav-link { .notify {
display: block; display: block;
padding: .5rem 1rem; padding: .5rem .3rem;
color: #525c5d; color: @notify;
animation: blinkingNotifySymbol 1.2s infinite;
} }
.notification-indicator { .notify-alert {
display: block; color: @alert;
width: 7px; animation: blinkingAlertSymbol 1.2s infinite;
height: 7px;
position: absolute;
top: 12px;
right: 12px;
border-radius: 100%;
z-index: 99000;
} }
.notification-indicator:before { @keyframes blinkingNotifySymbol {
content: ""; 0% {
display: block; color: @notify;
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% { 49% {
-webkit-transform: scale(.6); color: @notify;
transform: scale(.6); }
opacity: .8
60% {
color: @notify-blink;
}
99% {
color: @notify-blink;
} }
100% { 100% {
opacity: 0; color: @notify;
-webkit-transform: scale(1.2);
transform: scale(1.2)
} }
} }
@keyframes blink { @keyframes blinkingAlertSymbol {
0%, 0% {
35% { color: @alert;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1
} }
50% { 49% {
-webkit-transform: scale(.6); color: @alert;
transform: scale(.6); }
opacity: .8
60% {
color: @alert-blink;
}
99% {
color: @alert-blink;
} }
100% { 100% {
opacity: 0; color: @alert;
-webkit-transform: scale(1.2);
transform: scale(1.2)
} }
} }
/*
.notification-indicator-primary { .notification-indicator-primary {
background: #047006 background: #047006;
}
.notification-indicator-primary:before {
content: "";
background: rgba(4, 112, 6, .5)
} }
.notification-indicator-warning { .notification-indicator-warning {
background: #f0825f background: #f0825f
} }
.notification-indicator-secondary {
.notification-indicator-warning:before {
content: "";
background: rgba(240, 130, 95, .5)
}
/* .notification-indicator-secondary {
background: grey background: grey
} }

42
websrc/src/less/20-list.less
View File

@ -130,4 +130,46 @@
font-weight: 400; font-weight: 400;
} }
/* =====================================
FORM TOP CONTENT (checkTransaction)
=====================================*/
.form-content {
padding: 35px;
padding-top: 20px;
max-width: 80%;
margin: auto;
}
.content-table {
border: 1px solid @content-table-header-border;
border-top: none;
margin-bottom: 1.5rem;
}
.content-row {
display: flex;
justify-content: space-between;
font-weight: 400;
border-top: 1px solid @content-table-header-border;
}
.content-row-header {
font-weight: 500;
color: @content-table-header;
}
.content-row-bg {
background-color: @content-row-bg;
}
.content-cell {
display: block;
border-collapse: collapse;
padding: 10px 15px;
}
.form-button .material-icons-outlined {
font-size: 1.25em;
}
} }

10
websrc/src/less/30-form.less
View File

@ -121,6 +121,16 @@ and open the template in the editor.
border-color: #023f03; border-color: #023f03;
} }
.button-cancel {
background-color: #f0825f;
border-color: #f0825f;
}
.button-cancel:hover {
background-color: #ec5e30;
border-color: #eb5425;
}
/* CENTER FORM SPECIFICS */ /* CENTER FORM SPECIFICS */
.form-body form { .form-body form {
display: grid; display: grid;