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 | 401 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 272 insertions(+), 129 deletions(-)
diff --git a/web/ui2/stile.css b/web/ui2/stile.css
index e3ee310..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 */
@@ -27,11 +24,11 @@
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;
@@ -64,7 +61,9 @@
display: flex;
flex-flow: column;
/* background-color: #eaeaea; */
+ height: 100%;
width: 100%;
+ padding: 0 0.4em 0 0.4em;
}
.zentrum {
@@ -77,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,10 +92,58 @@
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 {
+ 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;
@@ -102,21 +155,53 @@
font-size: medium;
}
+/* Dialoge (Info, Neuer Nutzer, ..) */
+
.dialog {
+ display: flex;
+ flex-flow: column;
position: relative;
- /* height: 0.1em; */
transition: all 0.3s ease-in;
+ /* white-space: nowrap; */
}
-.dlg-behaelter {
- line-height: 1.6;
+.dlg-behaelter {
+ display: flex;
+ flex-flow: column;
+ /* line-height: 1.6; */
+ height: 100%;
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 {
+ padding: 0.3em;
+}
+
+.nutzer-eingabe {
+ width: 100%;
+ margin: 0.3em;
+}
+
+.form-button-footer {
+ padding: 0.4em;
+}
+
+.bold-text {
+ font-weight: bold;
+}
+
/*
Close Button
@@ -136,135 +221,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 */
@@ -319,4 +337,129 @@
.icon-folder-empty:before { content: '\f114'; } /* '' */
.icon-folder-open-empty:before { content: '\f115'; } /* '' */
.icon-doc-inv:before { content: '\f15b'; } /* '' */
-.icon-doc-text-inv:before { content: '\f15c'; } /* '' */
\ No newline at end of file
+.icon-doc-text-inv:before { content: '\f15c'; } /* '' */
+
+
+/* von Skeleton */
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ display: inline-block;
+ height: 38px;
+ padding: 0 30px;
+ color: #555;
+ text-align: center;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 38px;
+ letter-spacing: .1rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: transparent;
+ border-radius: 4px;
+ border: 1px solid #bbb;
+ cursor: pointer;
+ box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+ color: #333;
+ border-color: #888;
+ outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+ color: #FFF;
+ background-color: #33C3F0;
+ border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+ color: #FFF;
+ background-color: #1EAEDB;
+ border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+ height: 38px;
+ padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+ background-color: #fff;
+ border: 1px solid #D1D1D1;
+ border-radius: 4px;
+ box-shadow: none;
+ box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none; }
+textarea {
+ min-height: 65px;
+ padding-top: 6px;
+ padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+ border: 1px solid #33C3F0;
+ outline: 0; }
+label,
+legend {
+ display: block;
+ margin-bottom: .5rem;
+ font-weight: 600; }
+fieldset {
+ padding: 0;
+ border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+ display: inline; }
+label > .label-body {
+ display: inline-block;
+ margin-left: .5rem;
+ font-weight: normal; }
+
--
Gitblit v1.9.3