Persoenliche Mediazentrale
ulrich
2021-04-10 50e53e791b318e29a9deb9228a6d1b615b8a9053
commit | author | age
cfa858 1 html, body {
U 2   margin: 0;
3   padding: 0;
4   height: 100%; /* Anmerkung 2 */
5   font-size: larger;
6   font-family: 'Roboto Condensed';
7 }
8 body {
9   min-height: 0; /* Anmerkung 1 */
10   display: flex;
11   flex-flow: column;
12 }
13 .inhalt {
14   display: flex;
15   flex-flow: row;
16   height: 100%; /* Anmerkung 2 */
17   min-height: 0; /* Anmerkung 1 */
18   background-color: #ededed;
19   overflow: hidden;
20 }
21 .nord {
22   background-color: black;
23   display: flex;
24   flex-flow: row;
25   height: 2em;
26   align-items: center;
bebd47 27   justify-content: space-between;
cfa858 28 }
U 29 .sued {
30   height: 1.5em;
31   overflow: hidden;
32   transition: all 0.3s ease-in;
33   background-color: lightgray;
34 }
35 .west {
36   flex-grow: 0;
37   flex-shrink: 0;
38   flex-basis: 4em;
faab2d 39   background-color: #ececec; /* white; */
cfa858 40   transition: all 0.3s ease-in;
U 41   overflow: hidden;
42   white-space: nowrap;
43 }
44 .ost {
45   flex-grow: 0;
46   flex-shrink: 0;
47   flex-basis: 6em;
48   transition: all 0.3s ease-in;
49   background-color: antiquewhite;
50   overflow: hidden;
51 }
52 .zentrum-behaelter {
53   display: flex;
54   flex-flow: column;
55   /* background-color: #eaeaea; */
56   width: 100%;
57 }
58
59 .zentrum {
60   width: 100%;
61   height: 100%;
62   overflow-x: hidden;
63   overflow-y: auto;
64   -webkit-overflow-scrolling: touch;
faab2d 65   background-color: white;
cfa858 66 }
U 67
68 .zentraler-inhalt {
69   padding: 0.5em;
70 }
71
72 /*
73   Anmerkungen:
74   1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
75       http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
76   2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
77       immer ueber das gesamte Browserfenster ausdehnt.
78 */
79
80 .app-titel {
81   margin-left: 0.6em;
82   color: white;
83 }
84
85 .pointer-cursor {
86   cursor: pointer;
87 }
88
50e53e 89 .top-band {
U 90   display: flex;
91   flex-flow: row;
92 }
93
94 .bereich-name {
95   padding-left: 0.4rem;
96 }
97
cfa858 98 .dialog {
U 99   position: relative;
100   /* height: 0.1em; */
101   transition: all 0.3s ease-in;
102 }
103
8239d1 104 .dialog-unten {
bebd47 105   /* position: relative; */
8239d1 106   /* height: 0.1em; */
bebd47 107   /* transition: all 0.3s ease-in; */
8239d1 108 }
U 109
cfa858 110 .dlg-behaelter {
U 111   line-height: 1.6;
112   padding: 0.4em;
113 }
114
115 .dlg-info {
faab2d 116   background-color: #dcf2fb; /* blau */
cfa858 117   padding: 0.4em;
U 118 }
119
120 /*
121   Close Button
122
123   <div>
124     <span class="close-btn">&#10006;</span>
125   </div>
126 */
127
128 .close-btn {
129   position: absolute;
130   top: 0px;
131   right: 0.4em;
132   margin: 0;
133   padding: 0;
134   font-size: 1.3em;
135   color: #b8b8b8;
136 }
b379f5 137
U 138 /* ab hier Mediazentrale */
139
140 .entity-formular {
141   display: flex;
142   flex-flow: column;
143 }
144
faab2d 145 .entity-liste-kopf {
U 146   display: flex;
147   flex-flow: row;
148   justify-content: space-between;
149   vertical-align: middle;
150 }
151
152 .entity-liste-kopf .button {
153   /* margin-left: 1rem; */
154   /* margin-top: -0.2rem; */
155 }
156
b379f5 157 .entity-element {
U 158   margin: 0.4rem;
faab2d 159 }
U 160
161 .entity-element:hover {
7c22a2 162   background-color: #ececec;
b379f5 163 }
U 164
a43e1a 165 .entity-liste {
U 166   list-style-type: none;
50e53e 167   padding: 0;
U 168   margin: 0;
a43e1a 169 }
U 170
171 .entity-eintrag {
50e53e 172   margin-top: 0.3rem;
a43e1a 173   margin-left: 0;
U 174   margin-right: 0;
175   margin-bottom: 0;
faab2d 176   cursor: pointer;
U 177 }
178
179 .entity-eintrag:hover {
180   background-color: background;
a43e1a 181 }
U 182
7c22a2 183 .entity-typ-folder:before {
U 184   font-family: "pikto";
185   content: '\f114';
186   padding-right: 0.3rem;
187 }
188
189 .entity-typ-audio:before {
190   font-family: "pikto";
191   content: '\e817'; /* icon-music */
192   padding-right: 0.3rem;
193 }
194
195 .entity-typ-video:before {
196   font-family: "pikto";
197   content: '\e816'; /* icon-video */
198   padding-right: 0.3rem;
199 }
200
201 .entity-typ-file:before {
202   font-family: "pikto";
203   content: '\e805';  /* icon-doc */
204   padding-right: 0.3rem;
205 }
206
90d368 207 .entity-typ-katalog:before {
U 208   font-family: "pikto";
209   content: '\f1c0';  /* icon-database */
210   padding-right: 0.3rem;
211 }
212
5b7356 213 .form-button-footer {
U 214   display: flex;
215   flex-flow: row;
7c22a2 216 }
U 217
218 .selected {
219   background-color: #ececec;
5b7356 220 }
U 221
222 .dlg-btn {
223   margin-left: 0.4rem;
224 }
225
bebd47 226 .ctrl {
U 227   display: flex;
228   flex-flow: column;
229 }
230
231 .ctrl-btns {
232   display: flex;
233   flex-flow: row;
234   justify-content: center;
235 }
236
237 .ctrl-item {
238   margin-left: 0.2rem;
239   margin-top: 0.2rem;
240 }
241
8d7d35 242 .ctrl-btn, .ctrl-btn:focus {
50e53e 243   width: 2rem;
b90d67 244   font-size: medium;
U 245   display: inline-block;
246   height: 2rem;
247   /* padding: 0 30px; */
7c22a2 248   color: black;
b90d67 249   text-align: center;
U 250   font-weight: 600;
251   line-height: 2rem;
252   letter-spacing: .1rem;
253   text-transform: none;
254   text-decoration: none;
255   white-space: nowrap;
8d7d35 256   /* background-color: transparent; */
b90d67 257   border-radius: 4px;
8d7d35 258   border: 0;
b90d67 259   cursor: pointer;
U 260   box-sizing: border-box; 
8d7d35 261 }
U 262
263 .ctrl-btn:hover {
264   color: white;
265   background-color: #707070; /* #e1e1e1;*/  /* #707070; */
bebd47 266 }
U 267
268 .ctrl-select {
269   width: 4rem;
270 }
271
272 .ctrl-orte {
273   display: flex;
274   flex-flow: row;
275   justify-content: center;
276 }
277
278 .top-btn-area {
8d7d35 279   display: flex;
U 280   flex-flow: row;
bebd47 281   /*margin-left: auto;*/
U 282   margin: -0.5em 1em 0 2em;
283 }
284
8d7d35 285 .top-btn, .top-btn:focus {
bebd47 286   margin: 0;
U 287   padding: 0 0.2em 0 0.2em;
288   height: 1.3em;
289   line-height: 1em;
290   text-align: center;
291   font-size: large;
8d7d35 292   color: white;
U 293   border-radius: 4px;
294   border: 0;
295   /* background-color: white; */
bebd47 296   /* width: 1em; */
U 297 }
298
8d7d35 299 .top-btn:hover {
U 300   color: black;
301   background-color: #e1e1e1; /* #707070; */
302 }
faab2d 303
b379f5 304 @media (min-width: 800px) {
faab2d 305   .zentraler-inhalt {
b379f5 306     margin: 0 10% 0 10%;
U 307   }
308 }
309
b90d67 310 /* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */
U 311
312 @font-face {
313   font-family: 'pikto';
314   src: url('font/pikto.ttf?49751252') format('truetype');
315   font-weight: normal;
316   font-style: normal;
317 }
318 /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
319 /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
320 /*
321 @media screen and (-webkit-min-device-pixel-ratio:0) {
322   @font-face {
323     font-family: 'pikto';
324     src: url('../font/pikto.svg?49751252#pikto') format('svg');
325   }
326 }
327 */
328  
329  [class^="icon-"]:before, [class*=" icon-"]:before {
330   font-family: "pikto";
331   font-style: normal;
332   font-weight: normal;
333   speak: never;
334  
335   display: inline-block;
336   text-decoration: inherit;
337   width: 1em;
338   margin-right: .2em;
339   text-align: center;
340   /* opacity: .8; */
341  
342   /* For safety - reset parent styles, that can break glyph codes*/
343   font-variant: normal;
344   text-transform: none;
345  
346   /* fix buttons height, for twitter bootstrap */
347   line-height: 1em;
348  
349   /* Animation center compensation - margins should be symmetric */
350   /* remove if not needed */
351   margin-left: .2em;
352  
353   /* you can be more comfortable with increased icons size */
354   /* font-size: 120%; */
355  
356   /* Font smoothing. That was taken from TWBS */
357   -webkit-font-smoothing: antialiased;
358   -moz-osx-font-smoothing: grayscale;
359  
360   /* Uncomment for 3D effect */
361   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
362 }
363  
364 .icon-cancel:before { content: '\e800'; } /* '' */
365 .icon-th-large:before { content: '\e801'; } /* '' */
366 .icon-th-list:before { content: '\e802'; } /* '' */
367 .icon-folder:before { content: '\e803'; } /* '' */
368 .icon-folder-open:before { content: '\e804'; } /* '' */
369 .icon-doc:before { content: '\e805'; } /* '' */
370 .icon-pencil:before { content: '\e806'; } /* '' */
371 .icon-trash-empty:before { content: '\e807'; } /* '' */
372 .icon-down-dir:before { content: '\e808'; } /* '' */
373 .icon-up-dir:before { content: '\e809'; } /* '' */
374 .icon-left-dir:before { content: '\e80a'; } /* '' */
375 .icon-right-dir:before { content: '\e80b'; } /* '' */
376 .icon-down-open:before { content: '\e80c'; } /* '' */
377 .icon-left-open:before { content: '\e80d'; } /* '' */
378 .icon-right-open:before { content: '\e80e'; } /* '' */
379 .icon-up-open:before { content: '\e80f'; } /* '' */
380 .icon-floppy:before { content: '\e810'; } /* '' */
381 .icon-eye:before { content: '\e811'; } /* '' */
382 .icon-logout:before { content: '\e812'; } /* '' */
383 .icon-play:before { content: '\e813'; } /* '' */
384 .icon-stop:before { content: '\e814'; } /* '' */
385 .icon-pause:before { content: '\e815'; } /* '' */
386 .icon-video:before { content: '\e816'; } /* '' */
387 .icon-music:before { content: '\e817'; } /* '' */
388 .icon-forward:before { content: '\e818'; } /* '' */
389 .icon-list:before { content: '\e819'; } /* '' */
390 .icon-docs:before { content: '\f0c5'; } /* '' */
391 .icon-menu:before { content: '\f0c9'; } /* '' */
392 .icon-doc-text:before { content: '\f0f6'; } /* '' */
393 .icon-angle-left:before { content: '\f104'; } /* '' */
394 .icon-angle-right:before { content: '\f105'; } /* '' */
395 .icon-angle-up:before { content: '\f106'; } /* '' */
396 .icon-angle-down:before { content: '\f107'; } /* '' */
397 .icon-tablet:before { content: '\f10a'; } /* '' */
398 .icon-folder-empty:before { content: '\f114'; } /* '' */
399 .icon-folder-open-empty:before { content: '\f115'; } /* '' */
400 .icon-ellipsis:before { content: '\f141'; } /* '' */
401 .icon-ellipsis-vert:before { content: '\f142'; } /* '' */
402 .icon-doc-inv:before { content: '\f15b'; } /* '' */
403 .icon-doc-text-inv:before { content: '\f15c'; } /* '' */
404 .icon-database:before { content: '\f1c0'; } /* '' */
405 .icon-sliders:before { content: '\f1de'; } /* '' */
406 .icon-trash:before { content: '\f1f8'; } /* '' */
407
bebd47 408 /* Dropdown Menu */
U 409
410 /* Style The Dropdown Button */
411 .dropbtn {
412   background-color: white;
413   width: 3em;
414   padding: 0;
415   font-size: medium;
416   cursor: pointer;
417 }
418
419 /* The container <div> - needed to position the dropdown content */
420 .dropdown {
421   position: relative;
422   display: inline-block;
423 }
424
425 /* Dropdown Content (Hidden by Default) */
426 .dropdown-content {
427   display: none;
428   position: absolute;
429   background-color: #f9f9f9;
430   width: 12em;
431   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
432   z-index: 1;
433   right: 0;
434   font-size: medium;
435 }
436
437 /* Links inside the dropdown */
438 .dropdown-content a {
439   color: black;
440   padding: 0.5em 0.8em;
441   text-decoration: none;
442   display: block;
443   cursor: pointer;
444 }
445
446 /* Change color of dropdown links on hover */
447 .dropdown-content a:hover {background-color: #f1f1f1}
448
449 /* Show the dropdown menu on hover */
450 .dropdown:hover .dropdown-content {
451   display: block;
452 }
453
454 /* Change the background color of the dropdown button when the dropdown content is shown */
455 .dropdown:hover .dropbtn {
456   background-color: #33C3F0; /* #3e8e41; */
457   color: white;
458   border: none;
459 }
b379f5 460
U 461 /* von Skeleton */
462
463 /* Buttons
464 –––––––––––––––––––––––––––––––––––––––––––––––––– */
465 .button,
466 button,
467 input[type="submit"],
468 input[type="reset"],
469 input[type="button"] {
470   display: inline-block;
471   height: 38px;
bebd47 472   /* padding: 0 30px; */
b379f5 473   color: #555;
U 474   text-align: center;
475   font-size: 11px;
476   font-weight: 600;
477   line-height: 38px;
478   letter-spacing: .1rem;
479   text-transform: uppercase;
480   text-decoration: none;
481   white-space: nowrap;
482   background-color: transparent;
483   border-radius: 4px;
484   border: 1px solid #bbb;
485   cursor: pointer;
486   box-sizing: border-box; }
487 .button:hover,
488 button:hover,
489 input[type="submit"]:hover,
490 input[type="reset"]:hover,
491 input[type="button"]:hover,
492 .button:focus,
493 button:focus,
494 input[type="submit"]:focus,
495 input[type="reset"]:focus,
496 input[type="button"]:focus {
497   color: #333;
498   border-color: #888;
499   outline: 0; }
500 .button.button-primary,
501 button.button-primary,
502 input[type="submit"].button-primary,
503 input[type="reset"].button-primary,
504 input[type="button"].button-primary {
505   color: #FFF;
506   background-color: #33C3F0;
507   border-color: #33C3F0; }
508 .button.button-primary:hover,
509 button.button-primary:hover,
510 input[type="submit"].button-primary:hover,
511 input[type="reset"].button-primary:hover,
512 input[type="button"].button-primary:hover,
513 .button.button-primary:focus,
514 button.button-primary:focus,
515 input[type="submit"].button-primary:focus,
516 input[type="reset"].button-primary:focus,
517 input[type="button"].button-primary:focus {
518   color: #FFF;
519   background-color: #1EAEDB;
520   border-color: #1EAEDB; }
521
522
523 /* Forms
524 –––––––––––––––––––––––––––––––––––––––––––––––––– */
525 input[type="email"],
526 input[type="number"],
527 input[type="search"],
528 input[type="text"],
529 input[type="tel"],
530 input[type="url"],
531 input[type="password"],
532 textarea,
533 select {
534   height: 38px;
bebd47 535   padding: 3px 2px; /* The 6px vertically centers text on FF, ignored by Webkit */
b379f5 536   background-color: #fff;
U 537   border: 1px solid #D1D1D1;
538   border-radius: 4px;
539   box-shadow: none;
540   box-sizing: border-box; }
541 /* Removes awkward default styles on some inputs for iOS */
542 input[type="email"],
543 input[type="number"],
544 input[type="search"],
545 input[type="text"],
546 input[type="tel"],
547 input[type="url"],
548 input[type="password"],
549 textarea {
550   -webkit-appearance: none;
551      -moz-appearance: none;
552           appearance: none; }
553 textarea {
554   min-height: 65px;
555   padding-top: 6px;
556   padding-bottom: 6px; }
557 input[type="email"]:focus,
558 input[type="number"]:focus,
559 input[type="search"]:focus,
560 input[type="text"]:focus,
561 input[type="tel"]:focus,
562 input[type="url"]:focus,
563 input[type="password"]:focus,
564 textarea:focus,
565 select:focus {
566   border: 1px solid #33C3F0;
567   outline: 0; }
568 label,
569 legend {
570   display: block;
571   margin-bottom: .5rem;
572   font-weight: 600; }
573 fieldset {
574   padding: 0;
575   border-width: 0; }
576 input[type="checkbox"],
577 input[type="radio"] {
578   display: inline; }
579 label > .label-body {
580   display: inline-block;
581   margin-left: .5rem;
582   font-weight: normal; }