From 010cf066446c9cbb96c6bd99db8701e9329bf686 Mon Sep 17 00:00:00 2001 From: ulrich Date: Wed, 29 Sep 2021 06:16:53 +0000 Subject: [PATCH] Link zur Demo aktualisiert --- app.css | 265 +++++++++++++++++++++++++++------------------------- 1 files changed, 137 insertions(+), 128 deletions(-) diff --git a/app.css b/app.css index 938b9f1..7a11f7d 100644 --- a/app.css +++ b/app.css @@ -29,24 +29,24 @@ min-height: 0; /* Anmerkung 1 */ } .nord { - background-color: lightgray; + background-color: black; display: flex; flex-flow: row; height: 2.5em; align-items: center; } .sued { - background-color: lightgray; + background-color: #eaeaea; /* lightgray; */ } .west { flex-grow: 0; flex-shrink: 0; flex-basis: 4em; - background-color: antiquewhite; + background-color: white; transition: all 0.3s ease-in; overflow: hidden; white-space: nowrap; - background-color: #f7f7f7; + /* background-color: #f7f7f7;*/ } .ost { flex-grow: 0; @@ -76,8 +76,12 @@ width: 1.8em; } +#nav-toggle { + /*color: white;*/ +} #app-titel { padding-left: 1em; + color: white; } .pointer-cursor { @@ -87,6 +91,135 @@ .sendersuche { padding-left: 0.5em; } + +.zentrum-behaelter { + display: flex; + flex-flow: column; + background-color: #eaeaea; + width: 100%; +} + +.inline-label { + display: inline-block; + width: 4em; + 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, .dlg-abspieler-neu { + background-color: #f6f6f6; // grau +} + +.sender-eingabe, .abspieler-eingabe { + width: 80%; + margin-left: 0.4em; +} + +/* + 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, .abspieler-form-auswahl { + width: 70%; + margin-left: 0.4em; +} + +#abspielen-stoppen { + margin-left: 0.4em; + width: 2em; + font-size: 0.8em; + padding: 0 0 0 0.3em; +} + +/* 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; +} + /* aus Skeleton (leicht angepasst) */ @@ -215,130 +348,6 @@ border-color: #1EAEDB; } /* Ende Skeleton */ - -.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; - padding: 0.6em; -} - -.abspieler-lb { - width: 4.5em; - padding-right: 0.2em; -} - -.abspieler-auswahl { - width: 70%; -} - -#abspielen-stoppen { - margin-left: 0.4em; - width: 2em; - font-size: 0.8em; - padding: 0 0 0 0.3em; -} - -/* 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