Dateiverwaltung für die WebBox
ulrich
2021-01-21 bf56be31ddaaee5333625e2f5a2e733f7651c7ef
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 }
314 .app-menu-item {
315   text-align: right;
316   cursor: pointer;
ffc2b7 317   margin-bottom: 0.1em;
05e9c4 318 }
b20b74 319 .app-menu-item:hover {
U 320   background-color: #e5e5e5;
321 }
05e9c4 322 .app-menu-item-submark {
U 323   color: transparent;
324   cursor: pointer;
325 }
326 /*
327   Das div-Element, das das Menue aufnimmt erhaelt
328   die Klasse app-menu-content
329 */
330 .app-menu-content {
331   overflow: hidden;
332 }
333
334 /* für Hamburger Icon */
335
336 .hamburger {
337   display: inline-block;
338   cursor: pointer;
339   transition-property: opacity, filter;
340   transition-duration: 0.15s;
341   transition-timing-function: linear;
342   font: inherit;
343   color: inherit;
344   text-transform: none;
345   background-color: transparent;
346   border: 0;
347   margin: 0;
ffc2b7 348   padding: 0 0 0 0.3em;
05e9c4 349   overflow: visible;
U 350 }
351
352 .hamburger:hover {
353   opacity: 0.7;
354 }
355
356 .hamburger-box {
357   width: 40px;
ffc2b7 358   height: 24px; /* war 24px */
05e9c4 359   display: inline-block;
U 360   position: relative;
361 }
362
363 .hamburger-inner {
364   display: block;
ffc2b7 365   /* top: 50%; */
05e9c4 366   margin: 0;
ffc2b7 367   padding: 0;
05e9c4 368 }
U 369
370 .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
371   width: 30px;
372   height: 4px;
373   background-color: white; /* #000; */
374   border-radius: 4px;
375   position: absolute;
376   transition-property: transform;
377   transition-duration: 0.15s;
378   transition-timing-function: ease;
379 }
380
381 .hamburger-inner::before, .hamburger-inner::after {
382   content: "";
383   display: block;
384 }
385
386 .hamburger-inner::before {
387   top: -10px;
388 }
389
390 .hamburger-inner::after {
391   bottom: -10px;
392 }
393
394 /*
395  * Elastic
396  */
397 .hamburger--elastic .hamburger-inner {
398   top: 2px;
399   transition-duration: 0.275s;
400   transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
401 }
402
403 .hamburger--elastic .hamburger-inner::before {
404   top: 10px;
405   transition: opacity 0.125s 0.275s ease;
406 }
407
408 .hamburger--elastic .hamburger-inner::after {
409   top: 20px;
410   transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
411 }
412
413 .hamburger--elastic.is-active .hamburger-inner {
414   transform: translate3d(0, 10px, 0) rotate(135deg);
415   transition-delay: 0.075s;
416 }
417
418 .hamburger--elastic.is-active .hamburger-inner::before {
419   transition-delay: 0s;
420   opacity: 0;
421 }
422
423 .hamburger--elastic.is-active .hamburger-inner::after {
424   transform: translate3d(0, -20px, 0) rotate(-270deg);
425   transition-delay: 0.075s;
426 }
427
d9cdb1 428 /* Fonts */
U 429
430 @font-face {
431   font-family: 'Roboto Condensed';
432   src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
433   font-weight: normal;
434   font-style: normal;
435 }
436
05e9c4 437 /* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */
U 438
439 @font-face {
440   font-family: 'pikto';
f32042 441   src: url('font/pikto.ttf?22834745') format('truetype');
05e9c4 442   font-weight: normal;
U 443   font-style: normal;
444 }
f32042 445 /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
U 446 /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
447 /*
448 @media screen and (-webkit-min-device-pixel-ratio:0) {
449   @font-face {
450     font-family: 'pikto';
451     src: url('../font/pikto.svg?22834745#pikto') format('svg');
452   }
453 }
454 */
05e9c4 455  
U 456  [class^="icon-"]:before, [class*=" icon-"]:before {
457   font-family: "pikto";
458   font-style: normal;
459   font-weight: normal;
f32042 460   speak: never;
05e9c4 461  
U 462   display: inline-block;
463   text-decoration: inherit;
464   width: 1em;
465   margin-right: .2em;
466   text-align: center;
467   /* opacity: .8; */
468  
469   /* For safety - reset parent styles, that can break glyph codes*/
470   font-variant: normal;
471   text-transform: none;
472  
473   /* fix buttons height, for twitter bootstrap */
474   line-height: 1em;
475  
476   /* Animation center compensation - margins should be symmetric */
477   /* remove if not needed */
478   margin-left: .2em;
479  
480   /* you can be more comfortable with increased icons size */
481   /* font-size: 120%; */
482  
483   /* Font smoothing. That was taken from TWBS */
484   -webkit-font-smoothing: antialiased;
485   -moz-osx-font-smoothing: grayscale;
486  
487   /* Uncomment for 3D effect */
488   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
489 }
490  
f32042 491 .icon-cancel:before { content: '\e800'; } /* '' */
U 492 .icon-th-large:before { content: '\e801'; } /* '' */
493 .icon-th-list:before { content: '\e802'; } /* '' */
494 .icon-folder:before { content: '\e803'; } /* '' */
495 .icon-folder-open:before { content: '\e804'; } /* '' */
496 .icon-doc:before { content: '\e805'; } /* '' */
497 .icon-trash-empty:before { content: '\e806'; } /* '' */
498 .icon-pencil:before { content: '\e807'; } /* '' */
499 .icon-docs:before { content: '\f0c5'; } /* '' */
500 .icon-menu:before { content: '\f0c9'; } /* '' */
05e9c4 501 .icon-doc-text:before { content: '\f0f6'; } /* '' */
U 502 .icon-folder-empty:before { content: '\f114'; } /* '' */
503 .icon-folder-open-empty:before { content: '\f115'; } /* '' */
504 .icon-doc-inv:before { content: '\f15b'; } /* '' */
ebc1f3 505 .icon-doc-text-inv:before { content: '\f15c'; } /* '' */
f32042 506 .icon-trash:before { content: '\f1f8'; } /* '' */
ebc1f3 507
U 508 /* von Skeleton */
509
510 /* Buttons
511 –––––––––––––––––––––––––––––––––––––––––––––––––– */
512 .button,
513 button,
514 input[type="submit"],
515 input[type="reset"],
516 input[type="button"] {
517   display: inline-block;
518   height: 38px;
519   padding: 0 30px;
520   color: #555;
521   text-align: center;
522   font-size: 11px;
523   font-weight: 600;
524   line-height: 38px;
525   letter-spacing: .1rem;
526   text-transform: uppercase;
527   text-decoration: none;
528   white-space: nowrap;
529   background-color: transparent;
530   border-radius: 4px;
531   border: 1px solid #bbb;
532   cursor: pointer;
533   box-sizing: border-box; }
534 .button:hover,
535 button:hover,
536 input[type="submit"]:hover,
537 input[type="reset"]:hover,
538 input[type="button"]:hover,
539 .button:focus,
540 button:focus,
541 input[type="submit"]:focus,
542 input[type="reset"]:focus,
543 input[type="button"]:focus {
544   color: #333;
545   border-color: #888;
546   outline: 0; }
547 .button.button-primary,
548 button.button-primary,
549 input[type="submit"].button-primary,
550 input[type="reset"].button-primary,
551 input[type="button"].button-primary {
552   color: #FFF;
553   background-color: #33C3F0;
554   border-color: #33C3F0; }
555 .button.button-primary:hover,
556 button.button-primary:hover,
557 input[type="submit"].button-primary:hover,
558 input[type="reset"].button-primary:hover,
559 input[type="button"].button-primary:hover,
560 .button.button-primary:focus,
561 button.button-primary:focus,
562 input[type="submit"].button-primary:focus,
563 input[type="reset"].button-primary:focus,
564 input[type="button"].button-primary:focus {
565   color: #FFF;
566   background-color: #1EAEDB;
567   border-color: #1EAEDB; }
568
569
570 /* Forms
571 –––––––––––––––––––––––––––––––––––––––––––––––––– */
572 input[type="email"],
573 input[type="number"],
574 input[type="search"],
575 input[type="text"],
576 input[type="tel"],
577 input[type="url"],
578 input[type="password"],
579 textarea,
580 select {
581   height: 38px;
582   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
583   background-color: #fff;
584   border: 1px solid #D1D1D1;
585   border-radius: 4px;
586   box-shadow: none;
587   box-sizing: border-box; }
588 /* Removes awkward default styles on some inputs for iOS */
589 input[type="email"],
590 input[type="number"],
591 input[type="search"],
592 input[type="text"],
593 input[type="tel"],
594 input[type="url"],
595 input[type="password"],
596 textarea {
597   -webkit-appearance: none;
598      -moz-appearance: none;
599           appearance: none; }
600 textarea {
601   min-height: 65px;
602   padding-top: 6px;
603   padding-bottom: 6px; }
604 input[type="email"]:focus,
605 input[type="number"]:focus,
606 input[type="search"]:focus,
607 input[type="text"]:focus,
608 input[type="tel"]:focus,
609 input[type="url"]:focus,
610 input[type="password"]:focus,
611 textarea:focus,
612 select:focus {
613   border: 1px solid #33C3F0;
614   outline: 0; }
615 label,
616 legend {
617   display: block;
618   margin-bottom: .5rem;
619   font-weight: 600; }
620 fieldset {
621   padding: 0;
622   border-width: 0; }
623 input[type="checkbox"],
624 input[type="radio"] {
625   display: inline; }
626 label > .label-body {
627   display: inline-block;
628   margin-left: .5rem;
629   font-weight: normal; }
630