From 98c715874527ef6c96b346da180e7fb323c20148 Mon Sep 17 00:00:00 2001
From: ulrich <undisclosed>
Date: Fri, 26 Jan 2018 08:05:18 +0000
Subject: [PATCH] ..

---
 app.css |  423 +++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 284 insertions(+), 139 deletions(-)

diff --git a/app.css b/app.css
index da5d47d..bfceca5 100644
--- a/app.css
+++ b/app.css
@@ -1,29 +1,59 @@
+
+/*
+  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: large;
+  /* 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 {
-  height: 2em;
+  background-color: lightgray;
+  display: flex;
+  flex-flow: row;
+  height: 2.5em;
+  align-items: center;
 }
-
+.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;
 }
-
-#app-titel {
-  padding-left: 2em;
+.ost {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 10em;
+  background-color: antiquewhite;
 }
-
-.pointer-cursor {
-  cursor: pointer;
-}
-
 .zentrum {
   display: flex;
   flex-flow: row;
@@ -31,84 +61,102 @@
   margin: 0;
 }
 
-.cond {
-  display: none;
+/*
+  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 */
+
+#nav-menu {
+  /* padding-top: 0.5em;*/
+  width: 1.8em;
 }
 
-@media (min-width: 35em) {
-  .cond {
-    display: block;
-    background-color: aliceblue;
-    text-align: right;
-    width: 40%;
-  }
-  .zentrum {
-    width: 60%;
-    background-color: white;
-  }
+#app-titel {
+  padding-left: 1em;
 }
 
-@media (min-width: 55em) {
-  .cond {
-    display: block;
-    background-color: aliceblue;
-    text-align: right;
-    width: 60%;
-  }
-  .zentrum {
-    width: 40%;
-    background-color: white;
-  }
+.pointer-cursor {
+  cursor: pointer;
 }
 
+.sendersuche {
+  padding-left: 0.5em;
+}
 
-.button-liste {
-  display: flex;
-  flex-flow: column;
-  flex-wrap: wrap;
+/* aus Skeleton (leicht angepasst) */
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box;
+  font-family: RobotoCondensed;
+  font-size: 0.8em;
+}
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+/* font-weight: 600; */ }
+fieldset {
   padding: 0;
-  margin: 0 0.2em 0 0.2em;
-}
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
 
-.button-liste .button {
-  text-align: left;
-  margin: 0 0 0.2em 0;
-  padding: 0 0.4em 0 0.4em;
-}
-
-.abspieler-auswahl {
-  margin: 0.3em 0 0.3em 0.5em;
-}
-
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  src: url(../jslib/fonts/Raleway/Raleway-Regular.ttf) format('truetype');
-}
-
-/* aus Skeleton */
-
-.docs-header {
-  text-transform: uppercase;
-  font-size: 1.4rem;
-  letter-spacing: .2rem;
-  font-weight: 600; }
-
-/* Typography
-?????????????????????????????????????????????????? */
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 2rem;
-  font-weight: 300; }
-h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
-h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
-h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
-h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
-h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
-h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
 
 /* Buttons
-?????????????????????????????????????????????????? */
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
 .button,
 button,
 input[type="submit"],
@@ -166,63 +214,160 @@
   background-color: #1EAEDB;
   border-color: #1EAEDB; }
 
-/* Forms
-?????????????????????????????????????????????????? */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea,
-select {
-  height: 38px;
-  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
-  background-color: #fff;
-  border: 1px solid #D1D1D1;
-  border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box; }
-/* Removes awkward default styles on some inputs for iOS */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none; }
-textarea {
-  min-height: 65px;
-  padding-top: 6px;
-  padding-bottom: 6px; }
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
-  border: 1px solid #33C3F0;
-  outline: 0; }
-label,
-legend {
-  display: block;
-  margin-bottom: .5rem;
-  font-weight: 600; }
-fieldset {
-  padding: 0;
-  border-width: 0; }
-input[type="checkbox"],
-input[type="radio"] {
-  display: inline; }
-label > .label-body {
+/* Ende Skeleton */
+
+.zentrum-behaelter {
+  display: flex;
+  flex-flow: column;
+}
+
+.inline-label {
   display: inline-block;
-  margin-left: .5rem;
-  font-weight: normal; }
+  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">&#10006;</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%;
+  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;
+}
+
+/* fonts */
+
+@font-face {
+    font-family: 'Amethysta';
+    font-style: normal;
+    font-weight: 700;
+    src: url(/lib/fonts/Amethysta/Amethysta-Regular.ttf) format('truetype');
+}
+@font-face {
+    font-family: 'Oswald';
+    font-style: normal;
+    font-weight: 700;
+    src: url(/lib/fonts/Oswald/Oswald-Regular.ttf) format('truetype');
+}
+@font-face {
+    font-family: 'OswaldBold';
+    font-weight: bold;
+    src: url(/lib/fonts/Oswald/Oswald-Bold.ttf) format('truetype');
+}
+@font-face {
+    font-family: 'RobotoCondensed';
+    font-weight: normal;
+    src: url(/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf) format('truetype');
+}
+@font-face {
+    font-family: 'RobotoCondensedBold';
+    font-weight: bold;
+    src: url(/lib/fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf) format('truetype');
+}

--
Gitblit v1.9.3