Nutzerverwaltung
view | history | commit | commitdiff
ulrich
2020-05-19 80269a1b29d06eba178ee84cf3d7fcfa4f432b4a
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 }
2b837d 132
U 133 .profil-angabe {
134   margin: 0.8em 0 0 0;
135 }
136
137 .user-save-btn {
138   margin: 2.5em 0 0 0;
139   width: 16em;
140 }
141
142 @media (min-width: 800px) {
143   .zentrum-behaelter {
144     padding: 0 1em 0 1em;
145   }
146   .zentrum-behaelter, .nord {
147     margin: 0 10% 0 10%;
148   }
149   .profil-angabe {
150       width: 70%;
151   }
152   .user-save-btn {
153     width: 16em;
154   }
155 }
156 @media (min-width: 1200px) {
157   .zentrum-behaelter {
158     padding: 0 1.5em 0 1.5em;
159   }
160   .zentrum-behaelter, .nord {
161     margin: 0 15% 0 15%;
162   }
163   .profil-angabe {
164       width: 70%;
165   }
166   .user-save-btn {
167     width: 16em;
168   }
169 }
170
171 @font-face {
172   font-family: 'Roboto Condensed';
173   src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
174   font-weight: normal;
175   font-style: normal;
176 }
177
178
179
180 /* von Skeleton */
181
182 /* Buttons
183 –––––––––––––––––––––––––––––––––––––––––––––––––– */
184 .button,
185 button,
186 input[type="submit"],
187 input[type="reset"],
188 input[type="button"] {
189   display: inline-block;
190   height: 38px;
191   padding: 0 30px;
192   color: #555;
193   text-align: center;
194   font-size: 11px;
195   font-weight: 600;
196   line-height: 38px;
197   letter-spacing: .1rem;
198   text-transform: uppercase;
199   text-decoration: none;
200   white-space: nowrap;
201   background-color: transparent;
202   border-radius: 4px;
203   border: 1px solid #bbb;
204   cursor: pointer;
205   box-sizing: border-box; }
206 .button:hover,
207 button:hover,
208 input[type="submit"]:hover,
209 input[type="reset"]:hover,
210 input[type="button"]:hover,
211 .button:focus,
212 button:focus,
213 input[type="submit"]:focus,
214 input[type="reset"]:focus,
215 input[type="button"]:focus {
216   color: #333;
217   border-color: #888;
218   outline: 0; }
219 .button.button-primary,
220 button.button-primary,
221 input[type="submit"].button-primary,
222 input[type="reset"].button-primary,
223 input[type="button"].button-primary {
224   color: #FFF;
225   background-color: #33C3F0;
226   border-color: #33C3F0; }
227 .button.button-primary:hover,
228 button.button-primary:hover,
229 input[type="submit"].button-primary:hover,
230 input[type="reset"].button-primary:hover,
231 input[type="button"].button-primary:hover,
232 .button.button-primary:focus,
233 button.button-primary:focus,
234 input[type="submit"].button-primary:focus,
235 input[type="reset"].button-primary:focus,
236 input[type="button"].button-primary:focus {
237   color: #FFF;
238   background-color: #1EAEDB;
239   border-color: #1EAEDB; }
240
241
242 /* Forms
243 –––––––––––––––––––––––––––––––––––––––––––––––––– */
244 input[type="email"],
245 input[type="number"],
246 input[type="search"],
247 input[type="text"],
248 input[type="tel"],
249 input[type="url"],
250 input[type="password"],
251 textarea,
252 select {
253   height: 38px;
254   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
255   background-color: #fff;
256   border: 1px solid #D1D1D1;
257   border-radius: 4px;
258   box-shadow: none;
259   box-sizing: border-box; }
260 /* Removes awkward default styles on some inputs for iOS */
261 input[type="email"],
262 input[type="number"],
263 input[type="search"],
264 input[type="text"],
265 input[type="tel"],
266 input[type="url"],
267 input[type="password"],
268 textarea {
269   -webkit-appearance: none;
270      -moz-appearance: none;
271           appearance: none; }
272 textarea {
273   min-height: 65px;
274   padding-top: 6px;
275   padding-bottom: 6px; }
276 input[type="email"]:focus,
277 input[type="number"]:focus,
278 input[type="search"]:focus,
279 input[type="text"]:focus,
280 input[type="tel"]:focus,
281 input[type="url"]:focus,
282 input[type="password"]:focus,
283 textarea:focus,
284 select:focus {
285   border: 1px solid #33C3F0;
286   outline: 0; }
287 label,
288 legend {
289   display: block;
290   margin-bottom: .5rem;
291   font-weight: 600; }
292 fieldset {
293   padding: 0;
294   border-width: 0; }
295 input[type="checkbox"],
296 input[type="radio"] {
297   display: inline; }
298 label > .label-body {
299   display: inline-block;
300   margin-left: .5rem;
301   font-weight: normal; }