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 | 254 +++++++++++++++++++++++++-------------------------
1 files changed, 128 insertions(+), 126 deletions(-)
diff --git a/web/ui2/stile.css b/web/ui2/stile.css
index 304cfd7..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 */
@@ -27,15 +24,17 @@
flex-flow: row;
height: 100%; /* Anmerkung 2 */
min-height: 0; /* Anmerkung 1 */
- background-color: #ededed;
+ /* background-color: #ededed; */
overflow: hidden;
}
.nord {
- background-color: black;
+ background-color: #eee;
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.
@@ -88,10 +93,62 @@
immer ueber das gesamte Browserfenster ausdehnt.
*/
+/* Kopfleiste */
+
.app-titel {
- margin-left: 0.6em;
- color: white;
+ margin-left: 0.1em;
+ color: black;
}
+
+.zurueck-btn, .zurueck-btn:focus {
+ border: 0;
+ margin: 0 1.2em 0 0.6em;
+ padding: 0;
+ color: black;
+}
+
+.zurueck-btn:hover {
+ 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 */
+
+.nutzer-liste-eintrag {
+ margin: 0;
+ padding: 0.3em 0 0 0;
+ cursor: pointer;
+}
+
+.nutzer-gewaehlt {
+ background-color: lightsteelblue;
+}
+
+/* ... */
.pointer-cursor {
cursor: pointer;
@@ -103,11 +160,14 @@
font-size: medium;
}
+/* Dialoge (Info, Neuer Nutzer, ..) */
+
.dialog {
display: flex;
flex-flow: column;
position: relative;
transition: all 0.3s ease-in;
+ height: 100%;
/* white-space: nowrap; */
}
@@ -119,11 +179,16 @@
padding: 0.4em;
}
+
.dlg-info {
display: flex;
flex-flow: column;
background-color: #dcf2fb; /* blau */
padding: 0.4em;
+}
+
+.dlg-info-app-titel {
+ margin-bottom: 0.4em;
}
.nutzer-form {
@@ -137,6 +202,10 @@
.form-button-footer {
padding: 0.4em;
+}
+
+.bold-text {
+ font-weight: bold;
}
@@ -158,135 +227,68 @@
color: #b8b8b8;
}
-/* für app-menu */
+/* Nutzer-Rollen */
+.rollen-ansicht-titel {
+ display: flex;
+ flex-flow: row;
+ align-items: center;
+ align-self: stretch;
+ margin: 0;
+ padding: 0;
+ vertical-align: central;
+}
-.app-menu {
+.rollen-ueberschrift {
+ margin: 1.2em 0 0.2em 0;
+ padding: 0;
+}
+
+.rollen-behaelter {
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;
+.granted-role-btn {
+ height: 2.5em;
+ padding: 0 0.5em;
+ margin: 0.2em;
text-transform: none;
- background-color: transparent;
- border: 0;
- margin: 0;
- overflow: visible;
+ background-color: #fdfbe2;
+ font-size: medium;
}
-.hamburger:hover {
- opacity: 0.7;
+.avl-role-btn {
+ height: 2.5em;
+ padding: 0 0.5em;
+ margin: 0.2em;
+ background-color: #eee;
+ text-transform: none;
+ font-size: medium;
}
-.hamburger-box {
- width: 40px;
- height: 24px;
- display: inline-block;
- position: relative;
+@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-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