From a52c39a698c68fa04789629a79c45ad1f882e627 Mon Sep 17 00:00:00 2001
From: ulrich
Date: Tue, 19 May 2020 10:23:09 +0000
Subject: [PATCH] Stile des Rollen-Dialogs verfeinert
---
web/ui2/stile.css | 236 +++++++++++++++++++++++-----------------------------------
1 files changed, 94 insertions(+), 142 deletions(-)
diff --git a/web/ui2/stile.css b/web/ui2/stile.css
index 8c68991..89935dd 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 */
@@ -66,6 +63,7 @@
/* background-color: #eaeaea; */
height: 100%;
width: 100%;
+ padding: 0 0.4em 0 0.4em;
}
.zentrum {
@@ -78,8 +76,14 @@
.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.
@@ -87,6 +91,8 @@
2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
immer ueber das gesamte Browserfenster ausdehnt.
*/
+
+/* Kopfleiste */
.app-titel {
margin-left: 0.1em;
@@ -106,12 +112,38 @@
.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;
@@ -122,6 +154,8 @@
padding: 0.2em;
font-size: medium;
}
+
+/* Dialoge (Info, Neuer Nutzer, ..) */
.dialog {
display: flex;
@@ -139,25 +173,16 @@
padding: 0.4em;
}
-.rollen-behaelter {
-
-}
-
-.granted-role-btn {
- margin: 0.2em;
- background-color: lightcoral;
-}
-
-.avl-role-btn {
- margin: 0.2em;
- background-color: darkseagreen;
-}
.dlg-info {
display: flex;
flex-flow: column;
background-color: #dcf2fb; /* blau */
padding: 0.4em;
+}
+
+.dlg-info-app-titel {
+ margin-bottom: 0.4em;
}
.nutzer-form {
@@ -171,6 +196,10 @@
.form-button-footer {
padding: 0.4em;
+}
+
+.bold-text {
+ font-weight: bold;
}
@@ -192,145 +221,68 @@
color: #b8b8b8;
}
-/* Nutzerliste */
+/* Nutzer-Rollen */
-.nutzer-liste-eintrag {
- cursor: pointer;
+.rollen-ansicht-titel {
+ display: flex;
+ flex-flow: row;
+ align-items: center;
+ align-self: stretch;
+ margin: 0;
+ padding: 0;
+ vertical-align: central;
}
-.nutzer-gewaehlt {
- background-color: lightsteelblue;
+.rollen-ueberschrift {
+ margin: 1.2em 0 0.2em 0;
+ padding: 0;
}
-/* für app-menu */
-
-
-.app-menu {
+.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