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