| commit | author | age | ||
| d3a2d9 | 1 | html, body { |
| U | 2 | margin: 0; |
| 3 | padding: 0; | |
| 4 | height: 100%; /* Anmerkung 2 */ | |
| 5 | font-size: larger; | |
| 403f2f | 6 | font-family: 'Roboto Condensed'; |
| d3a2d9 | 7 | } |
| U | 8 | body { |
| 9 | min-height: 0; /* Anmerkung 1 */ | |
| 10 | display: flex; | |
| 11 | flex-flow: column; | |
| 12 | } | |
| 13 | .inhalt { | |
| 14 | display: flex; | |
| 15 | flex-flow: row; | |
| 16 | height: 100%; /* Anmerkung 2 */ | |
| 17 | min-height: 0; /* Anmerkung 1 */ | |
| 403f2f | 18 | background-color: #ededed; |
| 34aa39 | 19 | overflow: hidden; |
| d3a2d9 | 20 | } |
| U | 21 | .nord { |
| df8c52 | 22 | background-color: black; |
| U | 23 | display: flex; |
| 24 | flex-flow: row; | |
| 34aa39 | 25 | height: 2em; |
| df8c52 | 26 | align-items: center; |
| d3a2d9 | 27 | } |
| U | 28 | .sued { |
| 34aa39 | 29 | height: 1.5em; |
| U | 30 | overflow: hidden; |
| 31 | transition: all 0.3s ease-in; | |
| d3a2d9 | 32 | background-color: lightgray; |
| U | 33 | } |
| 34 | .west { | |
| 35 | flex-grow: 0; | |
| 36 | flex-shrink: 0; | |
| df8c52 | 37 | flex-basis: 4em; |
| U | 38 | background-color: white; |
| 39 | transition: all 0.3s ease-in; | |
| 40 | overflow: hidden; | |
| 41 | white-space: nowrap; | |
| d3a2d9 | 42 | } |
| U | 43 | .ost { |
| 44 | flex-grow: 0; | |
| 45 | flex-shrink: 0; | |
| 403f2f | 46 | flex-basis: 6em; |
| 34aa39 | 47 | transition: all 0.3s ease-in; |
| d3a2d9 | 48 | background-color: antiquewhite; |
| 34aa39 | 49 | overflow: hidden; |
| d3a2d9 | 50 | } |
| 34aa39 | 51 | .zentrum-behaelter { |
| U | 52 | display: flex; |
| 53 | flex-flow: column; | |
| 54 | /* background-color: #eaeaea; */ | |
| 55 | width: 100%; | |
| 56 | } | |
| 57 | ||
| d3a2d9 | 58 | .zentrum { |
| U | 59 | width: 100%; |
| 60 | height: 100%; | |
| 34aa39 | 61 | overflow-x: hidden; |
| U | 62 | overflow-y: auto; |
| d3a2d9 | 63 | -webkit-overflow-scrolling: touch; |
| 34aa39 | 64 | } |
| U | 65 | |
| 66 | .zentraler-inhalt { | |
| 403f2f | 67 | padding: 0.5em; |
| d3a2d9 | 68 | } |
| U | 69 | |
| 70 | /* | |
| 71 | Anmerkungen: | |
| 72 | 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl. | |
| 73 | http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto | |
| 74 | 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles | |
| 75 | immer ueber das gesamte Browserfenster ausdehnt. | |
| 76 | */ | |
| df8c52 | 77 | |
| U | 78 | .app-titel { |
| 403f2f | 79 | margin-left: 0.6em; |
| df8c52 | 80 | color: white; |
| U | 81 | } |
| 34aa39 | 82 | |
| U | 83 | .pointer-cursor { |
| 84 | cursor: pointer; | |
| 85 | } | |
| 86 | ||
| 87 | .dialog { | |
| 88 | position: relative; | |
| 89 | } | |
| 90 | ||
| 91 | .dlg-behaelter { | |
| 92 | line-height: 1.6; | |
| 93 | padding: 0.4em; | |
| 94 | } | |
| 95 | ||
| 96 | .dlg-info { | |
| 97 | background-color: #dcf2fb; // blau | |
| 98 | padding: 0.4em; | |
| 99 | } | |
| 100 | ||
| 101 | /* | |
| 102 | Close Button | |
| 103 | ||
| 104 | <div> | |
| 105 | <span class="close-btn">✖</span> | |
| 106 | </div> | |
| 107 | */ | |
| 108 | ||
| 109 | .close-btn { | |
| 110 | position: absolute; | |
| 111 | top: 0px; | |
| 112 | right: 0.4em; | |
| 113 | margin: 0; | |
| 114 | padding: 0; | |
| 115 | font-size: 1.3em; | |
| 116 | color: #b8b8b8; | |
| 117 | } | |
