alerts and notifications refinements

templates/default-layout.lucius

@@ -1,7 +1,7 @@
 :root {
   /* THEME INDEPENDENT COLORS */
-  --color-error: #ff3860;
-  --color-warning: #ffdd57;
+  --color-error: #8c0707;
+  --color-warning: #fc9900;
   --color-success: #23d160;
   --color-info: #c4c4c4;
   --color-lightblack: #1A2A36;

templates/dsgvDisclaimer.hamlet

@@ -14,4 +14,3 @@
       Bitte melden Sie etwaige Probleme an #
         <a href="mailto:jost@tcs.ifi.lmu.de">
           jost@tcs.ifi.lmu.de
-

templates/dsgvDisclaimer.lucius

@@ -3,10 +3,9 @@
   border-radius: 3px;
   padding: 10px 20px 20px;
   margin: 40px 0;
-  color: var(--color-lighter);
+  color: var(--color-dark);
   box-shadow: 0 0 4px 2px inset currentColor;
   padding-left: 20%;
-  color: #318dc5 ;
 
   &::before {
     content: 'i';

templates/standalone/alerts.julius

@@ -6,7 +6,7 @@
   window.utils.alert = function(alertEl) {
     var closeEl = document.createElement('DIV');
     var dataDecay = alertEl.dataset.decay;
-    var autoDecay = 3;
+    var autoDecay = 30;
     if (dataDecay) {
       autoDecay = parseInt(dataDecay, 10);
     }

templates/standalone/alerts.lucius

@@ -2,13 +2,13 @@
 /**
   .alert
     Regular Info Alert
-    Disappears automatically after 3 seconds
-    Disappears after x seconds if sepcified via data-decay='x'
+    Disappears automatically after 30 seconds
+    Disappears after x seconds if explicitly specified via data-decay='x' on html element
     Can be told not to disappear with data-decay='0'
 
   .alert-warning, .alert-error
     Warning or Error alert
-    Don't disappear, only difference is color
+    These don't disappear, only difference is color
     .alert-warning is orange regardless of user's selected theme
     .alert-error is red regardless of user's selected theme
 
@@ -23,20 +23,12 @@
   flex-direction: column;
 }
 
-@media (min-width: 768px) {
-
-  .alerts {
-    top: 150px;
-    bottom: auto;
-  }
-}
-
 .alert {
   position: relative;
   display: inline-block;
   background-color: var(--color-dark);
   font-size: 1rem;
-  color: #f3f3f3;
+  color: var(--color-lightwhite);
   z-index: 0;
   max-height: 200px;
   transition: all .3s ease-in-out;
@@ -116,8 +108,6 @@
   top: 0;
   width: 60px;
   height: 100%;
-  /* TODO: remove next line as soon as messagerenderer-error in julius gets resolved */
-  color: var(--color-dark);
   transition: all .3s ease;
   z-index: 40;
 
@@ -138,7 +128,6 @@
     top: 50%;
     left: 50%;
     display: flex;
-    color: rgba(255, 255, 255, 0.5);
     align-items: center;
     justify-content: center;
     transform: translate(-50%, -50%);
@@ -158,31 +147,11 @@
 
 .alert-warning {
   background-color: var(--color-warning);
-  color: var(--color-dark);
-
-  .alert__close {
-    color: var(--color-warning);
-
-    /* TODO: remove me as soon as messagerenderer-error in julius gets resolved */
-    &::before {
-      color: var(--color-dark);
-    }
-  }
 }
 
 .alert-danger,
 .alert-error {
   background-color: var(--color-error);
-  color: var(--color-lightwhite);
-
-  .alert__close {
-    color: var(--color-error);
-
-    /* TODO: remove me as soon as messagerenderer-error in julius gets resolved */
-    &::before {
-      color: var(--color-lightwhite);
-    }
-  }
 }
 
 .alert--invisible {

templates/widgets/asidenav.lucius

@@ -181,6 +181,7 @@
   width: 0;
   overflow: hidden;
   z-index: -1;
+  box-shadow: 0 0 13px rgba(0, 0, 0, 0.4);
 }
 
 @media (max-width: 425px) {