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 |
} |