From e62473b629b362808fe6dd3958389454ac854519 Mon Sep 17 00:00:00 2001
From: ulrich@undisclosed <ulrich@ulrich-vaio>
Date: Tue, 19 May 2020 13:12:08 +0000
Subject: [PATCH] In Arbeit: Piktogramme, Abmelden, Stile verfeinert

---
 web/ui2/stile.css |  206 +++++++++++++++++---------------------------------
 1 files changed, 71 insertions(+), 135 deletions(-)

diff --git a/web/ui2/stile.css b/web/ui2/stile.css
index 0792961..de58c20 100644
--- a/web/ui2/stile.css
+++ b/web/ui2/stile.css
@@ -3,11 +3,6 @@
     Author     : ulrich
 */
 
-
-
-
-
-
 /* aus App-Vorlage */
 
 html, body {
@@ -16,6 +11,8 @@
   height: 100%; /* Anmerkung 2 */
   font-size: larger;
   font-family: 'Roboto Condensed';
+	-webkit-text-size-adjust: none;
+	/* touch-action: manipulation;*/
 }
 body {
   min-height: 0; /* Anmerkung 1 */
@@ -35,7 +32,9 @@
   display: flex;
   flex-flow: row;
   height: 2em;
+  justify-content: space-between;
   align-items: center;
+  /*align-self: stretch;*/
 }
 .sued {
   height: 1.5em;
@@ -66,6 +65,7 @@
   /* background-color: #eaeaea; */
   height: 100%;
   width: 100%;
+  padding: 0 0.4em 0 0.4em;
 }
 
 .zentrum {
@@ -73,13 +73,18 @@
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
 }
 
 .zentraler-inhalt {
   padding: 0.5em;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
+.zentrum-liste {
+  overflow-x: hidden;
+  overflow-y: auto;  
+}
 /*
   Anmerkungen:
   1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
@@ -106,13 +111,29 @@
   color: #888;
 }
 
+.top-btn-area {
+  /*margin-left: auto;*/
+}
+
 .top-btn {
   margin: 0 1em 0 1em;
-
   height: 28px;
   line-height: 24px;
   text-align: center;
   font-size: large;
+  background-color: white;
+}
+
+.del-user-btn {
+  margin: 0 1.5em 0 1em;
+  margin-left: auto;
+  height: 32px;
+  line-height: 12px;
+  text-align: center;
+}
+
+.danger-btn {
+  background-color: #ffcccc;
 }
 
 /* Nutzerliste */
@@ -146,6 +167,7 @@
   flex-flow: column;
   position: relative;
   transition: all 0.3s ease-in;
+  height: 100%;
   /* white-space: nowrap; */
 }
 
@@ -165,6 +187,10 @@
   padding: 0.4em;
 }
 
+.dlg-info-app-titel {
+  margin-bottom: 0.4em;
+}
+
 .nutzer-form {
   padding: 0.3em;
 }
@@ -176,6 +202,10 @@
 
 .form-button-footer {
   padding: 0.4em;
+}
+
+.bold-text {
+  font-weight: bold;
 }
 
 
@@ -200,8 +230,13 @@
 /* Nutzer-Rollen */
 
 .rollen-ansicht-titel {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  align-self: stretch;
   margin: 0;
   padding: 0;
+  vertical-align: central;
 }
 
 .rollen-ueberschrift {
@@ -215,144 +250,45 @@
 }
 
 .granted-role-btn {
+  height: 2.5em;
+  padding: 0 0.5em;
   margin: 0.2em;
-  background-color: lightcoral;
+  text-transform: none;
+  background-color: #fdfbe2;
+  font-size: medium;
 }
 
 .avl-role-btn {
+  height: 2.5em;
+  padding: 0 0.5em;
   margin: 0.2em;
-  background-color: darkseagreen;
-}
-
-/* für app-menu */
-
-
-.app-menu {
-  margin: 0;
-  padding: 0;
-}
-
-.app-menu-kopf {
-  text-align: center;
-}
-
-ul.app-menu {
-	list-style: none;
-}
-
-.app-menu-item-back {
-  margin-bottom: 0.3em;
-  cursor: pointer;
-}
-
-.app-menu-item {
-  text-align: right;
-  cursor: pointer;
-}
-
-.app-menu-item-submark {
-  color: transparent;
-  cursor: pointer;
-}
-
-/*
-  Das div-Element, das das Menue aufnimmt erhaelt
-  die Klasse app-menu-content
-*/
-.app-menu-content {
-  overflow: hidden;
-}
-
-/* für Hamburger Icon */
-
-.hamburger {
-  display: inline-block;
-  cursor: pointer;
-  transition-property: opacity, filter;
-  transition-duration: 0.15s;
-  transition-timing-function: linear;
-  font: inherit;
-  color: inherit;
+  background-color: #eee;
   text-transform: none;
-  background-color: transparent;
-  border: 0;
-  margin: 0;
-  overflow: visible;
+  font-size: medium;
 }
 
-.hamburger:hover {
-  opacity: 0.7;
+@media (min-width: 800px) {
+  .zentrum-behaelter {
+    padding: 0 1em 0 1em;
+  }
+  .zentrum-behaelter, .nord {
+    margin: 0 10% 0 10%;
+  }
+}
+@media (min-width: 1200px) {
+  .zentrum-behaelter {
+    padding: 0 1.5em 0 1.5em;
+  }
+  .zentrum-behaelter, .nord {
+    margin: 0 15% 0 15%;
+  }
 }
 
-.hamburger-box {
-  width: 40px;
-  height: 24px;
-  display: inline-block;
-  position: relative;
-}
-
-.hamburger-inner {
-  display: block;
-  top: 50%;
-  margin: 0;
-}
-
-.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
-  width: 30px;
-  height: 4px;
-  background-color: white; /* #000; */
-  border-radius: 4px;
-  position: absolute;
-  transition-property: transform;
-  transition-duration: 0.15s;
-  transition-timing-function: ease;
-}
-
-.hamburger-inner::before, .hamburger-inner::after {
-  content: "";
-  display: block;
-}
-
-.hamburger-inner::before {
-  top: -10px;
-}
-
-.hamburger-inner::after {
-  bottom: -10px;
-}
-
-/*
- * Elastic
- */
-.hamburger--elastic .hamburger-inner {
-  top: 2px;
-  transition-duration: 0.275s;
-  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-.hamburger--elastic .hamburger-inner::before {
-  top: 10px;
-  transition: opacity 0.125s 0.275s ease;
-}
-
-.hamburger--elastic .hamburger-inner::after {
-  top: 20px;
-  transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-.hamburger--elastic.is-active .hamburger-inner {
-  transform: translate3d(0, 10px, 0) rotate(135deg);
-  transition-delay: 0.075s;
-}
-
-.hamburger--elastic.is-active .hamburger-inner::before {
-  transition-delay: 0s;
-  opacity: 0;
-}
-
-.hamburger--elastic.is-active .hamburger-inner::after {
-  transform: translate3d(0, -20px, 0) rotate(-270deg);
-  transition-delay: 0.075s;
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
 }
 
 /* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */

--
Gitblit v1.9.3