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