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 | 221 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 203 insertions(+), 18 deletions(-) diff --git a/app.css b/app.css index 89e9593..bfceca5 100644 --- a/app.css +++ b/app.css @@ -1,11 +1,17 @@ -/* ehem. app-layout anfang */ +/* + app-layout anfang + + Aus dem app-layout-Projekt übernommen und + teilweise angepasst +*/ html, body { margin: 0; padding: 0; height: 100%; /* Anmerkung 2 */ - font-size: initial; + 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; @@ -26,7 +32,8 @@ background-color: lightgray; display: flex; flex-flow: row; - height: 1.6em; + height: 2.5em; + align-items: center; } .sued { background-color: lightgray; @@ -34,7 +41,7 @@ .west { flex-grow: 0; flex-shrink: 0; - flex-basis: 10em; + flex-basis: 4em; background-color: antiquewhite; transition: all 0.3s ease-in; overflow: hidden; @@ -47,14 +54,6 @@ flex-basis: 10em; background-color: antiquewhite; } -/* -.zentrum { - width: 100%; - height: 100%; - overflow: auto; - -webkit-overflow-scrolling: touch; -} -*/ .zentrum { display: flex; flex-flow: row; @@ -70,31 +69,195 @@ immer ueber das gesamte Browserfenster ausdehnt. */ -/* ehem. app-layout ende */ +/* app-layout ende */ - +#nav-menu { + /* padding-top: 0.5em;*/ + width: 1.8em; +} #app-titel { - padding-left: 2em; + padding-left: 1em; } .pointer-cursor { cursor: pointer; } +.sendersuche { + padding-left: 0.5em; +} + +/* 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; + border-width: 0; } +input[type="checkbox"], +input[type="radio"] { + display: inline; } +label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } + + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + height: 38px; + padding: 0 30px; + color: #555; + text-align: center; + font-size: 11px; + font-weight: 600; + line-height: 38px; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: 4px; + border: 1px solid #bbb; + cursor: pointer; + box-sizing: border-box; } +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.button:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + color: #333; + border-color: #888; + outline: 0; } +.button.button-primary, +button.button-primary, +input[type="submit"].button-primary, +input[type="reset"].button-primary, +input[type="button"].button-primary { + color: #FFF; + background-color: #33C3F0; + border-color: #33C3F0; } +.button.button-primary:hover, +button.button-primary:hover, +input[type="submit"].button-primary:hover, +input[type="reset"].button-primary:hover, +input[type="button"].button-primary:hover, +.button.button-primary:focus, +button.button-primary:focus, +input[type="submit"].button-primary:focus, +input[type="reset"].button-primary:focus, +input[type="button"].button-primary:focus { + color: #FFF; + background-color: #1EAEDB; + border-color: #1EAEDB; } + +/* Ende Skeleton */ + .zentrum-behaelter { display: flex; flex-flow: column; } +.inline-label { + display: inline-block; + width: 4em; + text-align: right; +} /* Dialogfeld */ .dialog { - background-color: #fffbde; 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 @@ -114,8 +277,29 @@ color: #b8b8b8; } -.dlg-info { - background-color: #dcf2fb; +/* 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 */ @@ -140,6 +324,7 @@ margin: 0.4em; padding: 0.4em; background-color: white; + cursor: pointer; } .sender-name { -- Gitblit v1.9.3