Dateiverwaltung für die WebBox
ulrich
2021-01-21 122cf8f3ac3dc3440075fea2ca382dba0b40b6e5
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;
45   background-color: lightgray;
46 }
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
122cf8 185 .system-out {
U 186   height: 8em;
187   overflow-y: auto;
188 }
189
ffc2b7 190 .figure {
U 191   padding: 0.2em;
192   margin: 0.2em;  
193 }
194
195 .datei-figure {
196   width: 2em;
197   cursor: pointer;
198   font-size: 1.6em;
199   text-align: center;
200   /*background-color: blanchedalmond;*/
201 }
202
203 .figure-caption {
204   font-size: medium;
205   /*background-color: ivory;*/
206   text-align: center;
207 }
208
39e714 209 .datei-zeile {
U 210   font-size: smaller;  
211   cursor: pointer;
212 }
213
214 .datei-zeile:hover {
215   background-color: #e5e5e5;
216 }
217
218 .datei-zeile-ueberschrift {
219   font-size: smaller;  
220 }
221
ffc2b7 222 .datei-gewaehlt {
U 223   background-color: lightblue;
224 }
225
226 .ordner {
227   color: navajowhite;
228 }
229
230 .datei {
231   color: lightgray;
232 }
233
6648a8 234 .datei-gewaehlt {
U 235   background-color: lightblue;
236 }
237
238
05e9c4 239
b20b74 240 /* Stile Code-Editor */
U 241
242 /* der div-Behaelter fuer die Textarea */
243 .codeeditor-space {
244   /*
245   width: 100%;
246   height: 100%;
247   border: 1px solid lightgrey;
248   */
249   flex:1 1 auto;
250   margin-top:0;
251   height:100%;
252   position:relative;
253 }
254
255 /* Textarea fuer CodeMirror */
256 /*
257 .codeeditor {
258   height: 100%;
259 }
260 */
261 /* die Codemirror-Instanz selbst */
262 .CodeMirror {
263   position:absolute;
264   top:0;
265   bottom:0;
266   left:0;
267   right:0;
268   height: 100%;
269 }
270
271 /* Stile MCE-Editor */
272
273 .mce-editor {
274   width: 100%;
275   height: 100%;  
276 }
277 .text-editor {
278   width: 100%;
279   height: 100%;
280 }
281
282
283
ffc2b7 284
U 285 /* für app-menu */
05e9c4 286
U 287 .app-menu {
288   margin: 0;
289   padding: 0;
b20b74 290   font-size: 0.8em;
05e9c4 291 }
U 292 .app-menu-kopf {
293   text-align: center;
ffc2b7 294   font-size: 0.9em;
05e9c4 295 }
U 296 ul.app-menu {
297     list-style: none;
298 }
299 .app-menu-item-back {
ffc2b7 300   margin-bottom: 0.4em;
05e9c4 301   cursor: pointer;
U 302 }
303 .app-menu-item {
304   text-align: right;
305   cursor: pointer;
ffc2b7 306   margin-bottom: 0.1em;
05e9c4 307 }
b20b74 308 .app-menu-item:hover {
U 309   background-color: #e5e5e5;
310 }
05e9c4 311 .app-menu-item-submark {
U 312   color: transparent;
313   cursor: pointer;
314 }
315 /*
316   Das div-Element, das das Menue aufnimmt erhaelt
317   die Klasse app-menu-content
318 */
319 .app-menu-content {
320   overflow: hidden;
321 }
322
323 /* für Hamburger Icon */
324
325 .hamburger {
326   display: inline-block;
327   cursor: pointer;
328   transition-property: opacity, filter;
329   transition-duration: 0.15s;
330   transition-timing-function: linear;
331   font: inherit;
332   color: inherit;
333   text-transform: none;
334   background-color: transparent;
335   border: 0;
336   margin: 0;
ffc2b7 337   padding: 0 0 0 0.3em;
05e9c4 338   overflow: visible;
U 339 }
340
341 .hamburger:hover {
342   opacity: 0.7;
343 }
344
345 .hamburger-box {
346   width: 40px;
ffc2b7 347   height: 24px; /* war 24px */
05e9c4 348   display: inline-block;
U 349   position: relative;
350 }
351
352 .hamburger-inner {
353   display: block;
ffc2b7 354   /* top: 50%; */
05e9c4 355   margin: 0;
ffc2b7 356   padding: 0;
05e9c4 357 }
U 358
359 .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
360   width: 30px;
361   height: 4px;
362   background-color: white; /* #000; */
363   border-radius: 4px;
364   position: absolute;
365   transition-property: transform;
366   transition-duration: 0.15s;
367   transition-timing-function: ease;
368 }
369
370 .hamburger-inner::before, .hamburger-inner::after {
371   content: "";
372   display: block;
373 }
374
375 .hamburger-inner::before {
376   top: -10px;
377 }
378
379 .hamburger-inner::after {
380   bottom: -10px;
381 }
382
383 /*
384  * Elastic
385  */
386 .hamburger--elastic .hamburger-inner {
387   top: 2px;
388   transition-duration: 0.275s;
389   transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
390 }
391
392 .hamburger--elastic .hamburger-inner::before {
393   top: 10px;
394   transition: opacity 0.125s 0.275s ease;
395 }
396
397 .hamburger--elastic .hamburger-inner::after {
398   top: 20px;
399   transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
400 }
401
402 .hamburger--elastic.is-active .hamburger-inner {
403   transform: translate3d(0, 10px, 0) rotate(135deg);
404   transition-delay: 0.075s;
405 }
406
407 .hamburger--elastic.is-active .hamburger-inner::before {
408   transition-delay: 0s;
409   opacity: 0;
410 }
411
412 .hamburger--elastic.is-active .hamburger-inner::after {
413   transform: translate3d(0, -20px, 0) rotate(-270deg);
414   transition-delay: 0.075s;
415 }
416
d9cdb1 417 /* Fonts */
U 418
419 @font-face {
420   font-family: 'Roboto Condensed';
421   src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
422   font-weight: normal;
423   font-style: normal;
424 }
425
05e9c4 426 /* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */
U 427
428 @font-face {
429   font-family: 'pikto';
f32042 430   src: url('font/pikto.ttf?22834745') format('truetype');
05e9c4 431   font-weight: normal;
U 432   font-style: normal;
433 }
f32042 434 /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
U 435 /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
436 /*
437 @media screen and (-webkit-min-device-pixel-ratio:0) {
438   @font-face {
439     font-family: 'pikto';
440     src: url('../font/pikto.svg?22834745#pikto') format('svg');
441   }
442 }
443 */
05e9c4 444  
U 445  [class^="icon-"]:before, [class*=" icon-"]:before {
446   font-family: "pikto";
447   font-style: normal;
448   font-weight: normal;
f32042 449   speak: never;
05e9c4 450  
U 451   display: inline-block;
452   text-decoration: inherit;
453   width: 1em;
454   margin-right: .2em;
455   text-align: center;
456   /* opacity: .8; */
457  
458   /* For safety - reset parent styles, that can break glyph codes*/
459   font-variant: normal;
460   text-transform: none;
461  
462   /* fix buttons height, for twitter bootstrap */
463   line-height: 1em;
464  
465   /* Animation center compensation - margins should be symmetric */
466   /* remove if not needed */
467   margin-left: .2em;
468  
469   /* you can be more comfortable with increased icons size */
470   /* font-size: 120%; */
471  
472   /* Font smoothing. That was taken from TWBS */
473   -webkit-font-smoothing: antialiased;
474   -moz-osx-font-smoothing: grayscale;
475  
476   /* Uncomment for 3D effect */
477   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
478 }
479  
f32042 480 .icon-cancel:before { content: '\e800'; } /* '' */
U 481 .icon-th-large:before { content: '\e801'; } /* '' */
482 .icon-th-list:before { content: '\e802'; } /* '' */
483 .icon-folder:before { content: '\e803'; } /* '' */
484 .icon-folder-open:before { content: '\e804'; } /* '' */
485 .icon-doc:before { content: '\e805'; } /* '' */
486 .icon-trash-empty:before { content: '\e806'; } /* '' */
487 .icon-pencil:before { content: '\e807'; } /* '' */
488 .icon-docs:before { content: '\f0c5'; } /* '' */
489 .icon-menu:before { content: '\f0c9'; } /* '' */
05e9c4 490 .icon-doc-text:before { content: '\f0f6'; } /* '' */
U 491 .icon-folder-empty:before { content: '\f114'; } /* '' */
492 .icon-folder-open-empty:before { content: '\f115'; } /* '' */
493 .icon-doc-inv:before { content: '\f15b'; } /* '' */
ebc1f3 494 .icon-doc-text-inv:before { content: '\f15c'; } /* '' */
f32042 495 .icon-trash:before { content: '\f1f8'; } /* '' */
ebc1f3 496
U 497 /* von Skeleton */
498
499 /* Buttons
500 –––––––––––––––––––––––––––––––––––––––––––––––––– */
501 .button,
502 button,
503 input[type="submit"],
504 input[type="reset"],
505 input[type="button"] {
506   display: inline-block;
507   height: 38px;
508   padding: 0 30px;
509   color: #555;
510   text-align: center;
511   font-size: 11px;
512   font-weight: 600;
513   line-height: 38px;
514   letter-spacing: .1rem;
515   text-transform: uppercase;
516   text-decoration: none;
517   white-space: nowrap;
518   background-color: transparent;
519   border-radius: 4px;
520   border: 1px solid #bbb;
521   cursor: pointer;
522   box-sizing: border-box; }
523 .button:hover,
524 button:hover,
525 input[type="submit"]:hover,
526 input[type="reset"]:hover,
527 input[type="button"]:hover,
528 .button:focus,
529 button:focus,
530 input[type="submit"]:focus,
531 input[type="reset"]:focus,
532 input[type="button"]:focus {
533   color: #333;
534   border-color: #888;
535   outline: 0; }
536 .button.button-primary,
537 button.button-primary,
538 input[type="submit"].button-primary,
539 input[type="reset"].button-primary,
540 input[type="button"].button-primary {
541   color: #FFF;
542   background-color: #33C3F0;
543   border-color: #33C3F0; }
544 .button.button-primary:hover,
545 button.button-primary:hover,
546 input[type="submit"].button-primary:hover,
547 input[type="reset"].button-primary:hover,
548 input[type="button"].button-primary:hover,
549 .button.button-primary:focus,
550 button.button-primary:focus,
551 input[type="submit"].button-primary:focus,
552 input[type="reset"].button-primary:focus,
553 input[type="button"].button-primary:focus {
554   color: #FFF;
555   background-color: #1EAEDB;
556   border-color: #1EAEDB; }
557
558
559 /* Forms
560 –––––––––––––––––––––––––––––––––––––––––––––––––– */
561 input[type="email"],
562 input[type="number"],
563 input[type="search"],
564 input[type="text"],
565 input[type="tel"],
566 input[type="url"],
567 input[type="password"],
568 textarea,
569 select {
570   height: 38px;
571   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
572   background-color: #fff;
573   border: 1px solid #D1D1D1;
574   border-radius: 4px;
575   box-shadow: none;
576   box-sizing: border-box; }
577 /* Removes awkward default styles on some inputs for iOS */
578 input[type="email"],
579 input[type="number"],
580 input[type="search"],
581 input[type="text"],
582 input[type="tel"],
583 input[type="url"],
584 input[type="password"],
585 textarea {
586   -webkit-appearance: none;
587      -moz-appearance: none;
588           appearance: none; }
589 textarea {
590   min-height: 65px;
591   padding-top: 6px;
592   padding-bottom: 6px; }
593 input[type="email"]:focus,
594 input[type="number"]:focus,
595 input[type="search"]:focus,
596 input[type="text"]:focus,
597 input[type="tel"]:focus,
598 input[type="url"]:focus,
599 input[type="password"]:focus,
600 textarea:focus,
601 select:focus {
602   border: 1px solid #33C3F0;
603   outline: 0; }
604 label,
605 legend {
606   display: block;
607   margin-bottom: .5rem;
608   font-weight: 600; }
609 fieldset {
610   padding: 0;
611   border-width: 0; }
612 input[type="checkbox"],
613 input[type="radio"] {
614   display: inline; }
615 label > .label-body {
616   display: inline-block;
617   margin-left: .5rem;
618   font-weight: normal; }
619