| 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; |
| d3a2d9 | 19 | } |
| U | 20 | .nord { |
| df8c52 | 21 | background-color: black; |
| U | 22 | display: flex; |
| 23 | flex-flow: row; | |
| 24 | height: 2.5em; | |
| 25 | align-items: center; | |
| d3a2d9 | 26 | } |
| U | 27 | .sued { |
| 28 | background-color: lightgray; | |
| 29 | } | |
| 30 | .west { | |
| 31 | flex-grow: 0; | |
| 32 | flex-shrink: 0; | |
| df8c52 | 33 | flex-basis: 4em; |
| U | 34 | background-color: white; |
| 35 | transition: all 0.3s ease-in; | |
| 36 | overflow: hidden; | |
| 37 | white-space: nowrap; | |
| d3a2d9 | 38 | } |
| U | 39 | .ost { |
| 40 | flex-grow: 0; | |
| 41 | flex-shrink: 0; | |
| 403f2f | 42 | flex-basis: 6em; |
| d3a2d9 | 43 | background-color: antiquewhite; |
| U | 44 | } |
| 45 | .zentrum { | |
| 46 | width: 100%; | |
| 47 | height: 100%; | |
| 48 | overflow: auto; | |
| 49 | -webkit-overflow-scrolling: touch; | |
| 403f2f | 50 | padding: 0.5em; |
| d3a2d9 | 51 | } |
| U | 52 | |
| 53 | /* | |
| 54 | Anmerkungen: | |
| 55 | 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl. | |
| 56 | http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto | |
| 57 | 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles | |
| 58 | immer ueber das gesamte Browserfenster ausdehnt. | |
| 59 | */ | |
| df8c52 | 60 | |
| U | 61 | .app-titel { |
| 403f2f | 62 | margin-left: 0.6em; |
| df8c52 | 63 | color: white; |
| U | 64 | } |
