Dateiverwaltung für die WebBox
ulrich
2021-01-21 8cab6e94514c38151b2e0c53c9df47c6e1682e28
commit | author | age
05e9c4 1 /* 
U 2     Created on : 24.01.2020, 09:08:45
3     Author     : ulrich
4 */
5
6
7 /* aus App-Vorlage */
8
9 html, body {
10   margin: 0;
11   padding: 0;
12   height: 100%; /* Anmerkung 2 */
13   font-size: larger;
14   font-family: 'Roboto Condensed';
15 }
16 body {
17   min-height: 0; /* Anmerkung 1 */
18   display: flex;
19   flex-flow: column;
20 }
21 .inhalt {
ffc2b7 22   padding: 0;
U 23   margin: 0;
05e9c4 24   display: flex;
U 25   flex-flow: row;
26   height: 100%; /* Anmerkung 2 */
27   min-height: 0; /* Anmerkung 1 */
28   background-color: #ededed;
29   overflow: hidden;
30 }
31 .nord {
b20b74 32   background-color: #3f3f3f;
05e9c4 33   display: flex;
U 34   flex-flow: row;
35   height: 2em;
36   align-items: center;
ffc2b7 37   margin: 0;
d9cdb1 38   padding: 0;  
U 39   justify-content:space-between;  
05e9c4 40 }
U 41 .sued {
42   height: 1.5em;
43   overflow: hidden;
44   transition: all 0.3s ease-in;
e3cec2 45   background-color: #fcfce1;
05e9c4 46 }
U 47 .west {
48   flex-grow: 0;
49   flex-shrink: 0;
50   flex-basis: 4em;
ffc2b7 51   background-color: aliceblue;
05e9c4 52   transition: all 0.3s ease-in;
U 53   overflow: hidden;
54   white-space: nowrap;
55 }
56 .ost {
57   flex-grow: 0;
58   flex-shrink: 0;
59   flex-basis: 6em;
60   transition: all 0.3s ease-in;
61   background-color: antiquewhite;
62   overflow: hidden;
63 }
64 .zentrum-behaelter {
ffc2b7 65   padding: 0;
U 66   margin: 0;
05e9c4 67   display: flex;
U 68   flex-flow: column;
69   /* background-color: #eaeaea; */
ffc2b7 70   background-color: white;
05e9c4 71   width: 100%;
U 72 }
73
74 .zentrum {
75   width: 100%;
76   height: 100%;
ffc2b7 77   padding: 0;
U 78   margin: 0;
05e9c4 79   overflow-x: hidden;
U 80   overflow-y: auto;
81   -webkit-overflow-scrolling: touch;
82 }
83
84 .zentraler-inhalt {
ffc2b7 85   padding: 0;
U 86   margin: 0;
87   background-color: white;
05e9c4 88 }
U 89
6648a8 90 .zentrum-liste {
ffc2b7 91   padding: 0;
U 92   margin: 0;
6648a8 93   display: flex;
U 94   flex-flow: row;
95   flex-wrap: wrap;
96 }
97
05e9c4 98 /*
U 99   Anmerkungen:
100   1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
101       http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
102   2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
103       immer ueber das gesamte Browserfenster ausdehnt.
104 */
105
106 .app-titel {
ffc2b7 107   margin: 0 0 0 0.6em;
U 108   padding: 0;
05e9c4 109   color: white;
ffc2b7 110   font-size: 1em;
05e9c4 111 }
U 112
113 .pointer-cursor {
114   cursor: pointer;
115 }
116
ffc2b7 117 /* file-cms stile */
U 118
b65512 119 .top-btn-area {
U 120   /*margin-left: auto;*/
121   margin: 0 1em 0 2em;
122 }
123
124 .top-btn {
125   margin: 0;
126   padding: 0 0.2em 0 0.2em;
127   height: 28px;
128   line-height: 24px;
129   text-align: center;
130   font-size: large;
131   background-color: white;
132   /* width: 1em; */
133 }
134
d61a61 135 .breadcrumb {
b20b74 136   background-color: #f2f2f2;
d61a61 137   padding: 0.2em;
U 138   font-size: medium;
ffc2b7 139 }
U 140
141 .breadcrumb a {
142   text-decoration: none;
143   color: #0033ff;
d61a61 144 }
U 145
4f01b8 146 .pull-right {
U 147   float: right;
148 }
149
05e9c4 150 .dialog {
U 151   position: relative;
152   transition: all 0.3s ease-in;
153 }
154
155 .dlg-behaelter {
156   line-height: 1.6;
157   padding: 0.4em;
39e714 158   font-size: 1em;
05e9c4 159 }
U 160
161 .dlg-info {
39e714 162   /* background-color: #f5fbe3; */
05e9c4 163   padding: 0.4em;
39e714 164   font-size: 0.9em;  
05e9c4 165 }
U 166
167 /*
168   Close Button
169
170   <div>
171     <span class="close-btn">&#10006;</span>
172   </div>
173 */
174
175 .close-btn {
176   position: absolute;
177   top: 0px;
178   right: 0.4em;
179   margin: 0;
180   padding: 0;
181   font-size: 1.3em;
182   color: #b8b8b8;
183 }
184
e3cec2 185 .close-btn-fuss {
U 186   /*position: absolute;
187   top: 0px;
188   right: 0.4em;*/
189   float: right;
190   margin: 0;
191   padding: 0;
192   font-size: 1.3em;
193   color: #b8b8b8;
194 }
195
122cf8 196 .system-out {
U 197   height: 8em;
198   overflow-y: auto;
199 }
200
ffc2b7 201 .figure {
U 202   padding: 0.2em;
203   margin: 0.2em;  
204 }
205
206 .datei-figure {
207   width: 2em;
208   cursor: pointer;
209   font-size: 1.6em;
210   text-align: center;
211   /*background-color: blanchedalmond;*/
212 }
213
214 .figure-caption {
215   font-size: medium;
216   /*background-color: ivory;*/
217   text-align: center;
218 }
219
39e714 220 .datei-zeile {
U 221   font-size: smaller;  
222   cursor: pointer;
223 }
224
225 .datei-zeile:hover {
226   background-color: #e5e5e5;
227 }
228
229 .datei-zeile-ueberschrift {
230   font-size: smaller;  
231 }
232
ffc2b7 233 .datei-gewaehlt {
U 234   background-color: lightblue;
235 }
236
237 .ordner {
238   color: navajowhite;
239 }
240
241 .datei {
242   color: lightgray;
243 }
244
6648a8 245 .datei-gewaehlt {
U 246   background-color: lightblue;
247 }
248
249
05e9c4 250
b20b74 251 /* Stile Code-Editor */
U 252
253 /* der div-Behaelter fuer die Textarea */
254 .codeeditor-space {
255   /*
256   width: 100%;
257   height: 100%;
258   border: 1px solid lightgrey;
259   */
260   flex:1 1 auto;
261   margin-top:0;
262   height:100%;
263   position:relative;
264 }
265
266 /* Textarea fuer CodeMirror */
267 /*
268 .codeeditor {
269   height: 100%;
270 }
271 */
272 /* die Codemirror-Instanz selbst */
273 .CodeMirror {
274   position:absolute;
275   top:0;
276   bottom:0;
277   left:0;
278   right:0;
279   height: 100%;
280 }
281
282 /* Stile MCE-Editor */
283
284 .mce-editor {
285   width: 100%;
286   height: 100%;  
287 }
288 .text-editor {
289   width: 100%;
290   height: 100%;
291 }
292
293
294
ffc2b7 295
U 296 /* für app-menu */
05e9c4 297
U 298 .app-menu {
299   margin: 0;
300   padding: 0;
b20b74 301   font-size: 0.8em;
05e9c4 302 }
U 303 .app-menu-kopf {
304   text-align: center;
ffc2b7 305   font-size: 0.9em;
05e9c4 306 }
U 307 ul.app-menu {
308     list-style: none;
309 }
310 .app-menu-item-back {
ffc2b7 311   margin-bottom: 0.4em;
05e9c4 312   cursor: pointer;
U 313 }
8cab6e 314 .app-menu-item-back:hover {
U 315   background-color: #e5e5e5;
316 }
05e9c4 317 .app-menu-item {
U 318   text-align: right;
319   cursor: pointer;
ffc2b7 320   margin-bottom: 0.1em;
05e9c4 321 }
b20b74 322 .app-menu-item:hover {
U 323   background-color: #e5e5e5;
324 }
05e9c4 325 .app-menu-item-submark {
U 326   color: transparent;
327   cursor: pointer;
328 }
329 /*
330   Das div-Element, das das Menue aufnimmt erhaelt
331   die Klasse app-menu-content
332 */
333 .app-menu-content {
334   overflow: hidden;
335 }
336
337 /* für Hamburger Icon */
338
339 .hamburger {
340   display: inline-block;
341   cursor: pointer;
342   transition-property: opacity, filter;
343   transition-duration: 0.15s;
344   transition-timing-function: linear;
345   font: inherit;
346   color: inherit;
347   text-transform: none;
348   background-color: transparent;
349   border: 0;
350   margin: 0;
ffc2b7 351   padding: 0 0 0 0.3em;
05e9c4 352   overflow: visible;
U 353 }
354
355 .hamburger:hover {
356   opacity: 0.7;
357 }
358
359 .hamburger-box {
360   width: 40px;
ffc2b7 361   height: 24px; /* war 24px */
05e9c4 362   display: inline-block;
U 363   position: relative;
364 }
365
366 .hamburger-inner {
367   display: block;
ffc2b7 368   /* top: 50%; */
05e9c4 369   margin: 0;
ffc2b7 370   padding: 0;
05e9c4 371 }
U 372
373 .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
374   width: 30px;
375   height: 4px;
376   background-color: white; /* #000; */
377   border-radius: 4px;
378   position: absolute;
379   transition-property: transform;
380   transition-duration: 0.15s;
381   transition-timing-function: ease;
382 }
383
384 .hamburger-inner::before, .hamburger-inner::after {
385   content: "";
386   display: block;
387 }
388
389 .hamburger-inner::before {
390   top: -10px;
391 }
392
393 .hamburger-inner::after {
394   bottom: -10px;
395 }
396
397 /*
398  * Elastic
399  */
400 .hamburger--elastic .hamburger-inner {
401   top: 2px;
402   transition-duration: 0.275s;
403   transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
404 }
405
406 .hamburger--elastic .hamburger-inner::before {
407   top: 10px;
408   transition: opacity 0.125s 0.275s ease;
409 }
410
411 .hamburger--elastic .hamburger-inner::after {
412   top: 20px;
413   transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
414 }
415
416 .hamburger--elastic.is-active .hamburger-inner {
417   transform: translate3d(0, 10px, 0) rotate(135deg);
418   transition-delay: 0.075s;
419 }
420
421 .hamburger--elastic.is-active .hamburger-inner::before {
422   transition-delay: 0s;
423   opacity: 0;
424 }
425
426 .hamburger--elastic.is-active .hamburger-inner::after {
427   transform: translate3d(0, -20px, 0) rotate(-270deg);
428   transition-delay: 0.075s;
429 }
430
d9cdb1 431 /* Fonts */
U 432
433 @font-face {
434   font-family: 'Roboto Condensed';
435   src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
436   font-weight: normal;
437   font-style: normal;
438 }
439
05e9c4 440 /* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */
U 441
442 @font-face {
443   font-family: 'pikto';
f32042 444   src: url('font/pikto.ttf?22834745') format('truetype');
05e9c4 445   font-weight: normal;
U 446   font-style: normal;
447 }
f32042 448 /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
U 449 /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
450 /*
451 @media screen and (-webkit-min-device-pixel-ratio:0) {
452   @font-face {
453     font-family: 'pikto';
454     src: url('../font/pikto.svg?22834745#pikto') format('svg');
455   }
456 }
457 */
05e9c4 458  
U 459  [class^="icon-"]:before, [class*=" icon-"]:before {
460   font-family: "pikto";
461   font-style: normal;
462   font-weight: normal;
f32042 463   speak: never;
05e9c4 464  
U 465   display: inline-block;
466   text-decoration: inherit;
467   width: 1em;
468   margin-right: .2em;
469   text-align: center;
470   /* opacity: .8; */
471  
472   /* For safety - reset parent styles, that can break glyph codes*/
473   font-variant: normal;
474   text-transform: none;
475  
476   /* fix buttons height, for twitter bootstrap */
477   line-height: 1em;
478  
479   /* Animation center compensation - margins should be symmetric */
480   /* remove if not needed */
481   margin-left: .2em;
482  
483   /* you can be more comfortable with increased icons size */
484   /* font-size: 120%; */
485  
486   /* Font smoothing. That was taken from TWBS */
487   -webkit-font-smoothing: antialiased;
488   -moz-osx-font-smoothing: grayscale;
489  
490   /* Uncomment for 3D effect */
491   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
492 }
493  
f32042 494 .icon-cancel:before { content: '\e800'; } /* '' */
U 495 .icon-th-large:before { content: '\e801'; } /* '' */
496 .icon-th-list:before { content: '\e802'; } /* '' */
497 .icon-folder:before { content: '\e803'; } /* '' */
498 .icon-folder-open:before { content: '\e804'; } /* '' */
499 .icon-doc:before { content: '\e805'; } /* '' */
500 .icon-trash-empty:before { content: '\e806'; } /* '' */
501 .icon-pencil:before { content: '\e807'; } /* '' */
502 .icon-docs:before { content: '\f0c5'; } /* '' */
503 .icon-menu:before { content: '\f0c9'; } /* '' */
05e9c4 504 .icon-doc-text:before { content: '\f0f6'; } /* '' */
U 505 .icon-folder-empty:before { content: '\f114'; } /* '' */
506 .icon-folder-open-empty:before { content: '\f115'; } /* '' */
507 .icon-doc-inv:before { content: '\f15b'; } /* '' */
ebc1f3 508 .icon-doc-text-inv:before { content: '\f15c'; } /* '' */
f32042 509 .icon-trash:before { content: '\f1f8'; } /* '' */
ebc1f3 510
U 511 /* von Skeleton */
512
513 /* Buttons
514 –––––––––––––––––––––––––––––––––––––––––––––––––– */
515 .button,
516 button,
517 input[type="submit"],
518 input[type="reset"],
519 input[type="button"] {
520   display: inline-block;
521   height: 38px;
522   padding: 0 30px;
523   color: #555;
524   text-align: center;
525   font-size: 11px;
526   font-weight: 600;
527   line-height: 38px;
528   letter-spacing: .1rem;
529   text-transform: uppercase;
530   text-decoration: none;
531   white-space: nowrap;
532   background-color: transparent;
533   border-radius: 4px;
534   border: 1px solid #bbb;
535   cursor: pointer;
536   box-sizing: border-box; }
537 .button:hover,
538 button:hover,
539 input[type="submit"]:hover,
540 input[type="reset"]:hover,
541 input[type="button"]:hover,
542 .button:focus,
543 button:focus,
544 input[type="submit"]:focus,
545 input[type="reset"]:focus,
546 input[type="button"]:focus {
547   color: #333;
548   border-color: #888;
549   outline: 0; }
550 .button.button-primary,
551 button.button-primary,
552 input[type="submit"].button-primary,
553 input[type="reset"].button-primary,
554 input[type="button"].button-primary {
555   color: #FFF;
556   background-color: #33C3F0;
557   border-color: #33C3F0; }
558 .button.button-primary:hover,
559 button.button-primary:hover,
560 input[type="submit"].button-primary:hover,
561 input[type="reset"].button-primary:hover,
562 input[type="button"].button-primary:hover,
563 .button.button-primary:focus,
564 button.button-primary:focus,
565 input[type="submit"].button-primary:focus,
566 input[type="reset"].button-primary:focus,
567 input[type="button"].button-primary:focus {
568   color: #FFF;
569   background-color: #1EAEDB;
570   border-color: #1EAEDB; }
571
572
573 /* Forms
574 –––––––––––––––––––––––––––––––––––––––––––––––––– */
575 input[type="email"],
576 input[type="number"],
577 input[type="search"],
578 input[type="text"],
579 input[type="tel"],
580 input[type="url"],
581 input[type="password"],
582 textarea,
583 select {
584   height: 38px;
585   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
586   background-color: #fff;
587   border: 1px solid #D1D1D1;
588   border-radius: 4px;
589   box-shadow: none;
590   box-sizing: border-box; }
591 /* Removes awkward default styles on some inputs for iOS */
592 input[type="email"],
593 input[type="number"],
594 input[type="search"],
595 input[type="text"],
596 input[type="tel"],
597 input[type="url"],
598 input[type="password"],
599 textarea {
600   -webkit-appearance: none;
601      -moz-appearance: none;
602           appearance: none; }
603 textarea {
604   min-height: 65px;
605   padding-top: 6px;
606   padding-bottom: 6px; }
607 input[type="email"]:focus,
608 input[type="number"]:focus,
609 input[type="search"]:focus,
610 input[type="text"]:focus,
611 input[type="tel"]:focus,
612 input[type="url"]:focus,
613 input[type="password"]:focus,
614 textarea:focus,
615 select:focus {
616   border: 1px solid #33C3F0;
617   outline: 0; }
618 label,
619 legend {
620   display: block;
621   margin-bottom: .5rem;
622   font-weight: 600; }
623 fieldset {
624   padding: 0;
625   border-width: 0; }
626 input[type="checkbox"],
627 input[type="radio"] {
628   display: inline; }
629 label > .label-body {
630   display: inline-block;
631   margin-left: .5rem;
632   font-weight: normal; }
633