From ac516df601a720c7becb1473bb841f285bdd28d6 Mon Sep 17 00:00:00 2001 From: ulrich <not disclosed> Date: Wed, 03 Jan 2018 12:43:00 +0000 Subject: [PATCH] .. --- app.css | 106 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 96 insertions(+), 10 deletions(-) diff --git a/app.css b/app.css index 59ca156..595d5d6 100644 --- a/app.css +++ b/app.css @@ -1,22 +1,78 @@ + +/* ehem. app-layout anfang */ + html, body { - font-size: 10pt; + margin: 0; + padding: 0; + height: 100%; /* Anmerkung 2 */ + font-size: initial; /* font-size: 1.5em; */ /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; font-weight: 400; - /* font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; */ + font-family: RobotoCondensed; } - -.nord { +body { + min-height: 0; /* Anmerkung 1 */ + display: flex; + flex-flow: column; +} +.inhalt { display: flex; flex-flow: row; - height: 2em; + height: 100%; /* Anmerkung 2 */ + min-height: 0; /* Anmerkung 1 */ } - +.nord { + background-color: lightgray; + display: flex; + flex-flow: row; + height: 1.6em; +} +.sued { + background-color: lightgray; +} .west { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 10em; + background-color: antiquewhite; transition: all 0.3s ease-in; overflow: hidden; white-space: nowrap; + background-color: #f7f7f7; } +.ost { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 10em; + background-color: antiquewhite; +} +/* +.zentrum { + width: 100%; + height: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; +} +*/ +.zentrum { + display: flex; + flex-flow: row; + overflow-x: hidden; + margin: 0; +} + +/* + Anmerkungen: + 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl. + http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto + 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles + immer ueber das gesamte Browserfenster ausdehnt. +*/ + +/* ehem. app-layout ende */ + + #app-titel { padding-left: 2em; @@ -26,11 +82,36 @@ cursor: pointer; } -.zentrum { +.zentrum-behaelter { display: flex; - flex-flow: row; - overflow-x: hidden; + flex-flow: column; +} + + +/* Dialogfeld */ + +.dialog { + background-color: #fffbde; + position: relative; +} + + +/* + Close Button + + <div> + <span class="close-btn">✖</span> + </div> +*/ + +.close-btn { + position: absolute; + top: 0px; + right: 0.4em; margin: 0; + padding: 0; + font-size: 1.3em; + color: #b8b8b8; } /* Sender */ @@ -46,7 +127,6 @@ padding: 0.4em; flex-wrap: wrap; background-color: #eaeaea; - width: 100%; } .sender-kachel { @@ -67,6 +147,12 @@ background-color: #ebe6e6; } +/* MenĂ¼-Erscheinung */ + +.app-menu-kopf { + font-family: Oswald; +} + /* fonts */ @font-face { -- Gitblit v1.9.3