From 599f2fbff2ac4ddc7d8dc08367f54e4916d6cfa8 Mon Sep 17 00:00:00 2001 From: ulrich <not disclosed> Date: Sun, 07 Jan 2018 12:42:11 +0000 Subject: [PATCH] Stub für Suchfunktion hinzugefügt --- app.css | 177 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 171 insertions(+), 6 deletions(-) diff --git a/app.css b/app.css index 6e83174..d8a2e27 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; } - +body { + min-height: 0; /* Anmerkung 1 */ + display: flex; + flex-flow: column; +} +.inhalt { + display: flex; + flex-flow: row; + height: 100%; /* Anmerkung 2 */ + min-height: 0; /* Anmerkung 1 */ +} .nord { + background-color: lightgray; display: flex; flex-flow: row; height: 2em; } - +.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,10 +77,124 @@ cursor: pointer; } -.zentrum { +.sendersuche { + padding-left: 1em; +} + +.zentrum-behaelter { + display: flex; + 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; - margin: 0; + padding: 0.6em; +} + +.abspieler-lb { + width: 4.5em; + padding-right: 0.2em; +} + +.abspieler-auswahl { + width: 70%; +} +/* Sender */ + +.sender-behaelter { + display: flex; + flex-flow: column; +} + +.sender { + display: flex; + flex-flow: row; + padding: 0.4em; + flex-wrap: wrap; + background-color: #eaeaea; +} + +.sender-kachel { + display: flex; + flex-flow: column; + align-items: center; + margin: 0.4em; + padding: 0.4em; + background-color: white; + cursor: pointer; +} + +.sender-name { + font-family: RobotoCondensedBold; +} + +.sender-bild { + width: 5em; + background-color: #ebe6e6; +} + +/* Menü-Erscheinung */ + +.app-menu-kopf { + font-family: Oswald; } /* fonts */ -- Gitblit v1.9.3