ulrich
2020-05-18 5daeb20e992d5d0c6ab5c68051a2448c062ffe53
commit | author | age
5daeb2 1 /* aus App-Vorlage */
U 2
3 html, body {
4   margin: 0;
5   padding: 0;
6   height: 100%; /* Anmerkung 2 */
7   font-size: larger;
8   font-family: 'Roboto Condensed';
9     -webkit-text-size-adjust: none;
10     /* touch-action: manipulation;*/
11 }
12 body {
13   min-height: 0; /* Anmerkung 1 */
14   display: flex;
15   flex-flow: column;
16 }
17 .inhalt {
18   display: flex;
19   flex-flow: row;
20   height: 100%; /* Anmerkung 2 */
21   min-height: 0; /* Anmerkung 1 */
22   /* background-color: #ededed; */
23   overflow: hidden;
24 }
25 .nord {
26   background-color: #eee;
27   display: flex;
28   flex-flow: row;
29   height: 2em;
30   align-items: center;
31 }
32 .sued {
33   height: 1.5em;
34   overflow: hidden;
35   transition: all 0.3s ease-in;
36   background-color: lightgray;
37 }
38 .west {
39   flex-grow: 0;
40   flex-shrink: 0;
41   flex-basis: 4em;
42   background-color: white;
43   transition: all 0.3s ease-in;
44   overflow: hidden;
45   white-space: nowrap;
46 }
47 .ost {
48   flex-grow: 0;
49   flex-shrink: 0;
50   flex-basis: 6em;
51   transition: all 0.3s ease-in;
52   background-color: antiquewhite;
53   overflow: hidden;
54 }
55 .zentrum-behaelter {
56   display: flex;
57   flex-flow: column;
58   /* background-color: #eaeaea; */
59   height: 100%;
60   width: 100%;
61   padding: 0 0.4em 0 0.4em;
62 }
63
64 .zentrum {
65   width: 100%;
66   height: 100%;
67   overflow-x: hidden;
68   overflow-y: auto;
69   -webkit-overflow-scrolling: touch;
70 }
71
72 .zentraler-inhalt {
73   padding: 0.5em;
74   overflow-x: hidden;
75   overflow-y: auto;
76 }
77
78 .zentrum-liste {
79   overflow-x: hidden;
80   overflow-y: auto;  
81 }
82 /*
83   Anmerkungen:
84   1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
85       http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
86   2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
87       immer ueber das gesamte Browserfenster ausdehnt.
88 */
89
90 /* Kopfleiste */
91
92 .app-titel {
93   margin-left: 0.1em;
94   color: black;
95 }
96
97 .zurueck-btn, .zurueck-btn:focus {
98   border: 0;
99   margin: 0 1.2em 0 0.6em;
100   padding: 0;
101   color: black;
102 }
103
104 .zurueck-btn:hover {
105   color: #888;
106 }
107
108 .top-btn {
109   margin: 0 1em 0 1em;
110   height: 28px;
111   line-height: 24px;
112   text-align: center;
113   font-size: large;
114   background-color: white;
115 }
116
117 .del-user-btn {
118   margin: 0 1.5em 0 1em;
119   height: 28px;
120   line-height: 24px;
121   text-align: center;
122 }
123
124 .danger-btn {
125   background-color: lightcoral;
126 }
127
128 #user-form {
129   display: flex;
130   flex-flow: column;  
131 }