ulrich
2020-05-16 f01f9a4daa13af32a082561193ed900a26f9c9d7
commit | author | age
002c44 1 /* 
U 2     Created on : 24.01.2020, 09:08:45
3     Author     : ulrich
4 */
5
6
7
8
9
10
11 /* aus App-Vorlage */
12
13 html, body {
14   margin: 0;
15   padding: 0;
16   height: 100%; /* Anmerkung 2 */
17   font-size: larger;
18   font-family: 'Roboto Condensed';
19 }
20 body {
21   min-height: 0; /* Anmerkung 1 */
22   display: flex;
23   flex-flow: column;
24 }
25 .inhalt {
26   display: flex;
27   flex-flow: row;
28   height: 100%; /* Anmerkung 2 */
29   min-height: 0; /* Anmerkung 1 */
045d48 30   /* background-color: #ededed; */
002c44 31   overflow: hidden;
U 32 }
33 .nord {
045d48 34   background-color: #eee;
002c44 35   display: flex;
U 36   flex-flow: row;
37   height: 2em;
38   align-items: center;
39 }
40 .sued {
41   height: 1.5em;
42   overflow: hidden;
43   transition: all 0.3s ease-in;
44   background-color: lightgray;
45 }
46 .west {
47   flex-grow: 0;
48   flex-shrink: 0;
49   flex-basis: 4em;
50   background-color: white;
51   transition: all 0.3s ease-in;
52   overflow: hidden;
53   white-space: nowrap;
54 }
55 .ost {
56   flex-grow: 0;
57   flex-shrink: 0;
58   flex-basis: 6em;
59   transition: all 0.3s ease-in;
60   background-color: antiquewhite;
61   overflow: hidden;
62 }
63 .zentrum-behaelter {
64   display: flex;
65   flex-flow: column;
66   /* background-color: #eaeaea; */
e86f3c 67   height: 100%;
002c44 68   width: 100%;
U 69 }
70
71 .zentrum {
72   width: 100%;
73   height: 100%;
74   overflow-x: hidden;
75   overflow-y: auto;
76   -webkit-overflow-scrolling: touch;
77 }
78
79 .zentraler-inhalt {
80   padding: 0.5em;
81 }
82
83 /*
84   Anmerkungen:
85   1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
86       http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
87   2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
88       immer ueber das gesamte Browserfenster ausdehnt.
89 */
90
d9858d 91 /* Kopfleiste */
U 92
002c44 93 .app-titel {
045d48 94   margin-left: 0.1em;
U 95   color: black;
96 }
97
98 .zurueck-btn, .zurueck-btn:focus {
99   border: 0;
100   margin: 0 1.2em 0 0.6em;
101   padding: 0;
102   color: black;
103 }
104
105 .zurueck-btn:hover {
106   color: #888;
107 }
108
109 .top-btn {
110   margin: 0 1em 0 1em;
111
112   height: 28px;
113   line-height: 24px;
114   text-align: center;
115   font-size: large;
002c44 116 }
U 117
d9858d 118 /* Nutzerliste */
U 119
120 .nutzer-liste-eintrag {
121   margin: 0;
122   padding: 0.3em 0 0 0;
123   cursor: pointer;
124 }
125
126 .nutzer-gewaehlt {
127   background-color: lightsteelblue;
128 }
129
130 /* ... */
131
002c44 132 .pointer-cursor {
U 133   cursor: pointer;
134 }
135
136 .breadcrumb {
137   background-color: beige;
138   padding: 0.2em;
139   font-size: medium;
140 }
d9858d 141
U 142 /* Dialoge (Info, Neuer Nutzer, ..) */
002c44 143
U 144 .dialog {
e86f3c 145   display: flex;
U 146   flex-flow: column;
002c44 147   position: relative;
U 148   transition: all 0.3s ease-in;
e86f3c 149   /* white-space: nowrap; */
002c44 150 }
U 151
e86f3c 152 .dlg-behaelter { 
U 153   display: flex;
154   flex-flow: column;
155   /* line-height: 1.6; */
156   height: 100%;
002c44 157   padding: 0.4em;
U 158 }
159
c995b7 160
002c44 161 .dlg-info {
e86f3c 162   display: flex;
U 163   flex-flow: column;
002c44 164   background-color: #dcf2fb; /* blau */ 
U 165   padding: 0.4em;
166 }
167
590b02 168 .nutzer-form {
U 169   padding: 0.3em;
170 }
171
172 .nutzer-eingabe {
173   width: 100%;
174   margin: 0.3em;
175 }
176
177 .form-button-footer {
178   padding: 0.4em;
179 }
180
e86f3c 181
002c44 182 /*
U 183   Close Button
184
185   <div>
186     <span class="close-btn">&#10006;</span>
187   </div>
188 */
189
190 .close-btn {
191   position: absolute;
192   top: 0px;
193   right: 0.4em;
194   margin: 0;
195   padding: 0;
196   font-size: 1.3em;
197   color: #b8b8b8;
198 }
199
d9858d 200 /* Nutzer-Rollen */
f9d0c4 201
d9858d 202 .rollen-ansicht-titel {
U 203   margin: 0;
204   padding: 0;
d1b8b2 205 }
U 206
d9858d 207 .rollen-ueberschrift {
U 208   margin: 1.2em 0 0.2em 0;
209   padding: 0;
210 }
211
212 .rollen-behaelter {
213   margin: 0;
214   padding: 0;
215 }
216
217 .granted-role-btn {
70d6da 218   height: 2.5em;
U 219   padding: 0 0.5em;
d9858d 220   margin: 0.2em;
U 221   background-color: lightcoral;
70d6da 222   text-transform: none;
U 223   font-size: medium;
d9858d 224 }
U 225
226 .avl-role-btn {
70d6da 227   height: 2.5em;
U 228   padding: 0 0.5em;
d9858d 229   margin: 0.2em;
U 230   background-color: darkseagreen;
70d6da 231   text-transform: none;
U 232   font-size: medium;
f9d0c4 233 }
U 234
002c44 235 /* für app-menu */
U 236
237
238 .app-menu {
239   margin: 0;
240   padding: 0;
241 }
242
243 .app-menu-kopf {
244   text-align: center;
245 }
246
247 ul.app-menu {
248     list-style: none;
249 }
250
251 .app-menu-item-back {
252   margin-bottom: 0.3em;
253   cursor: pointer;
254 }
255
256 .app-menu-item {
257   text-align: right;
258   cursor: pointer;
259 }
260
261 .app-menu-item-submark {
262   color: transparent;
263   cursor: pointer;
264 }
265
266 /*
267   Das div-Element, das das Menue aufnimmt erhaelt
268   die Klasse app-menu-content
269 */
270 .app-menu-content {
271   overflow: hidden;
272 }
273
274 /* für Hamburger Icon */
275
276 .hamburger {
277   display: inline-block;
278   cursor: pointer;
279   transition-property: opacity, filter;
280   transition-duration: 0.15s;
281   transition-timing-function: linear;
282   font: inherit;
283   color: inherit;
284   text-transform: none;
285   background-color: transparent;
286   border: 0;
287   margin: 0;
288   overflow: visible;
289 }
290
291 .hamburger:hover {
292   opacity: 0.7;
293 }
294
295 .hamburger-box {
296   width: 40px;
297   height: 24px;
298   display: inline-block;
299   position: relative;
300 }
301
302 .hamburger-inner {
303   display: block;
304   top: 50%;
305   margin: 0;
306 }
307
308 .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
309   width: 30px;
310   height: 4px;
311   background-color: white; /* #000; */
312   border-radius: 4px;
313   position: absolute;
314   transition-property: transform;
315   transition-duration: 0.15s;
316   transition-timing-function: ease;
317 }
318
319 .hamburger-inner::before, .hamburger-inner::after {
320   content: "";
321   display: block;
322 }
323
324 .hamburger-inner::before {
325   top: -10px;
326 }
327
328 .hamburger-inner::after {
329   bottom: -10px;
330 }
331
332 /*
333  * Elastic
334  */
335 .hamburger--elastic .hamburger-inner {
336   top: 2px;
337   transition-duration: 0.275s;
338   transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
339 }
340
341 .hamburger--elastic .hamburger-inner::before {
342   top: 10px;
343   transition: opacity 0.125s 0.275s ease;
344 }
345
346 .hamburger--elastic .hamburger-inner::after {
347   top: 20px;
348   transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
349 }
350
351 .hamburger--elastic.is-active .hamburger-inner {
352   transform: translate3d(0, 10px, 0) rotate(135deg);
353   transition-delay: 0.075s;
354 }
355
356 .hamburger--elastic.is-active .hamburger-inner::before {
357   transition-delay: 0s;
358   opacity: 0;
359 }
360
361 .hamburger--elastic.is-active .hamburger-inner::after {
362   transform: translate3d(0, -20px, 0) rotate(-270deg);
363   transition-delay: 0.075s;
364 }
365
f01f9a 366 @font-face {
U 367   font-family: 'Roboto Condensed';
368   src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
369   font-weight: normal;
370   font-style: normal;
371 }
372
002c44 373 /* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */
U 374
375 @font-face {
376   font-family: 'pikto';
377   src: url('font/pikto.ttf?37040783') format('truetype');
378   font-weight: normal;
379   font-style: normal;
380 }
381  
382  [class^="icon-"]:before, [class*=" icon-"]:before {
383   font-family: "pikto";
384   font-style: normal;
385   font-weight: normal;
386   speak: none;
387  
388   display: inline-block;
389   text-decoration: inherit;
390   width: 1em;
391   margin-right: .2em;
392   text-align: center;
393   /* opacity: .8; */
394  
395   /* For safety - reset parent styles, that can break glyph codes*/
396   font-variant: normal;
397   text-transform: none;
398  
399   /* fix buttons height, for twitter bootstrap */
400   line-height: 1em;
401  
402   /* Animation center compensation - margins should be symmetric */
403   /* remove if not needed */
404   margin-left: .2em;
405  
406   /* you can be more comfortable with increased icons size */
407   /* font-size: 120%; */
408  
409   /* Font smoothing. That was taken from TWBS */
410   -webkit-font-smoothing: antialiased;
411   -moz-osx-font-smoothing: grayscale;
412  
413   /* Uncomment for 3D effect */
414   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
415 }
416  
417 .icon-folder:before { content: '\e800'; } /* '' */
418 .icon-folder-open:before { content: '\e801'; } /* '' */
419 .icon-th-large:before { content: '\e802'; } /* '' */
420 .icon-th-list:before { content: '\e803'; } /* '' */
421 .icon-doc-text:before { content: '\f0f6'; } /* '' */
422 .icon-folder-empty:before { content: '\f114'; } /* '' */
423 .icon-folder-open-empty:before { content: '\f115'; } /* '' */
424 .icon-doc-inv:before { content: '\f15b'; } /* '' */
cae925 425 .icon-doc-text-inv:before { content: '\f15c'; } /* '' */
U 426
427
428 /* von Skeleton */
429
430 /* Buttons
431 –––––––––––––––––––––––––––––––––––––––––––––––––– */
432 .button,
433 button,
434 input[type="submit"],
435 input[type="reset"],
436 input[type="button"] {
437   display: inline-block;
438   height: 38px;
439   padding: 0 30px;
440   color: #555;
441   text-align: center;
442   font-size: 11px;
443   font-weight: 600;
444   line-height: 38px;
445   letter-spacing: .1rem;
446   text-transform: uppercase;
447   text-decoration: none;
448   white-space: nowrap;
449   background-color: transparent;
450   border-radius: 4px;
451   border: 1px solid #bbb;
452   cursor: pointer;
453   box-sizing: border-box; }
454 .button:hover,
455 button:hover,
456 input[type="submit"]:hover,
457 input[type="reset"]:hover,
458 input[type="button"]:hover,
459 .button:focus,
460 button:focus,
461 input[type="submit"]:focus,
462 input[type="reset"]:focus,
463 input[type="button"]:focus {
464   color: #333;
465   border-color: #888;
466   outline: 0; }
467 .button.button-primary,
468 button.button-primary,
469 input[type="submit"].button-primary,
470 input[type="reset"].button-primary,
471 input[type="button"].button-primary {
472   color: #FFF;
473   background-color: #33C3F0;
474   border-color: #33C3F0; }
475 .button.button-primary:hover,
476 button.button-primary:hover,
477 input[type="submit"].button-primary:hover,
478 input[type="reset"].button-primary:hover,
479 input[type="button"].button-primary:hover,
480 .button.button-primary:focus,
481 button.button-primary:focus,
482 input[type="submit"].button-primary:focus,
483 input[type="reset"].button-primary:focus,
484 input[type="button"].button-primary:focus {
485   color: #FFF;
486   background-color: #1EAEDB;
487   border-color: #1EAEDB; }
488
489
490 /* Forms
491 –––––––––––––––––––––––––––––––––––––––––––––––––– */
492 input[type="email"],
493 input[type="number"],
494 input[type="search"],
495 input[type="text"],
496 input[type="tel"],
497 input[type="url"],
498 input[type="password"],
499 textarea,
500 select {
501   height: 38px;
502   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
503   background-color: #fff;
504   border: 1px solid #D1D1D1;
505   border-radius: 4px;
506   box-shadow: none;
507   box-sizing: border-box; }
508 /* Removes awkward default styles on some inputs for iOS */
509 input[type="email"],
510 input[type="number"],
511 input[type="search"],
512 input[type="text"],
513 input[type="tel"],
514 input[type="url"],
515 input[type="password"],
516 textarea {
517   -webkit-appearance: none;
518      -moz-appearance: none;
519           appearance: none; }
520 textarea {
521   min-height: 65px;
522   padding-top: 6px;
523   padding-bottom: 6px; }
524 input[type="email"]:focus,
525 input[type="number"]:focus,
526 input[type="search"]:focus,
527 input[type="text"]:focus,
528 input[type="tel"]:focus,
529 input[type="url"]:focus,
530 input[type="password"]:focus,
531 textarea:focus,
532 select:focus {
533   border: 1px solid #33C3F0;
534   outline: 0; }
535 label,
536 legend {
537   display: block;
538   margin-bottom: .5rem;
539   font-weight: 600; }
540 fieldset {
541   padding: 0;
542   border-width: 0; }
543 input[type="checkbox"],
544 input[type="radio"] {
545   display: inline; }
546 label > .label-body {
547   display: inline-block;
548   margin-left: .5rem;
549   font-weight: normal; }
550