From 6a62bd168dd69e649ef98556a72af6be9de2c425 Mon Sep 17 00:00:00 2001 From: ulrich <not disclosed> Date: Sun, 07 Jan 2018 10:00:11 +0000 Subject: [PATCH] Doku angepasst --- app.css | 147 +++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 137 insertions(+), 10 deletions(-) diff --git a/app.css b/app.css index e79ecbd..09b008b 100644 --- a/app.css +++ b/app.css @@ -1,22 +1,73 @@ + +/* + app-layout anfang + + Aus dem app-layout-Projekt übernommen und + teilweise angepasst +*/ + 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: 4em; + 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 { + 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. +*/ + +/* app-layout ende */ #app-titel { padding-left: 2em; @@ -26,12 +77,82 @@ cursor: pointer; } -.zentrum { +.zentrum-behaelter { display: flex; - flex-flow: row; - margin: 0; + flex-flow: column; } +.inline-label { + display: inline-block; + width: 3em; + text-align: right; +} + +/* Dialogfeld */ + +.dialog { + position: relative; +} + +.dlg-behaelter { + padding: 0.4em; +} + +.dlg-info { + background-color: #dcf2fb; // blau + padding: 0.4em; +} + +.nachricht { + background-color: #fffbde; // gelb +} + +.form-button-footer { + text-align: right; +} + +.dlg-sender-edit, .dlg-sender-neu { + background-color: #f6f6f6; // grau +} + +.sender-eingabe { + width: 80%; +} + +/* + 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; +} + +/* Abspieler */ + +.abspieler-behaelter { + display: flex; + flex-flow: row; + padding: 0.6em; +} + +.abspieler-lb { + width: 4.5em; + padding-right: 0.2em; +} + +.abspieler-auswahl { + width: 70%; +} /* Sender */ .sender-behaelter { @@ -45,7 +166,6 @@ padding: 0.4em; flex-wrap: wrap; background-color: #eaeaea; - width: 100%; } .sender-kachel { @@ -55,6 +175,7 @@ margin: 0.4em; padding: 0.4em; background-color: white; + cursor: pointer; } .sender-name { @@ -66,6 +187,12 @@ background-color: #ebe6e6; } +/* Menü-Erscheinung */ + +.app-menu-kopf { + font-family: Oswald; +} + /* fonts */ @font-face { -- Gitblit v1.9.3