From 1f4d7a819cb3104f925083c5cdd42f3a9295c5b1 Mon Sep 17 00:00:00 2001 From: ulrich <ulrich> Date: Thu, 21 May 2020 09:23:46 +0000 Subject: [PATCH] Verweis zur Startseite auf Logout-Seite angepasst --- web/profil/stile.css | 386 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 361 insertions(+), 25 deletions(-) diff --git a/web/profil/stile.css b/web/profil/stile.css index f990909..30d3a8a 100644 --- a/web/profil/stile.css +++ b/web/profil/stile.css @@ -1,42 +1,378 @@ +/* aus App-Vorlage */ - -#inhalt { - margin-top: 0.5em; - margin-left: 0.5em; - margin-right: 0.5em; +html, body { + margin: 0; + padding: 0; + height: 100%; /* Anmerkung 2 */ + font-size: larger; + font-family: 'Roboto Condensed'; + -webkit-text-size-adjust: none; + /* touch-action: manipulation;*/ +} +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 */ + /* background-color: #ededed; */ + overflow: hidden; +} +.nord { + background-color: #eee; + display: flex; + flex-flow: row; + height: 2em; + align-items: center; + justify-content: space-between; +} +.sued { + height: 1.5em; + overflow: hidden; + transition: all 0.3s ease-in; + background-color: lightgray; +} +.west { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 4em; + background-color: white; + transition: all 0.3s ease-in; + overflow: hidden; + white-space: nowrap; +} +.ost { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 6em; + transition: all 0.3s ease-in; + background-color: antiquewhite; + overflow: hidden; +} +.zentrum-behaelter { + display: flex; + flex-flow: column; + /* background-color: #eaeaea; */ + height: 100%; + width: 100%; + padding: 0 0.4em 0 0.4em; } -#nutzerliste { - height: 10em; - width: 80% +.zentrum { + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; } -#nutzerrollen { - height: 5em; - width: 80% +.zentraler-inhalt { + padding: 0.5em; + overflow-x: hidden; + overflow-y: auto; } -#rollen { - height: 5em; - width: 80% +.zentrum-liste { + overflow-x: hidden; + overflow-y: auto; +} +/* + 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. +*/ + +/* Kopfleiste */ + +.app-titel { + margin-left: 0.1em; + color: black; } -#nav { - margin-top: 1em; +.zurueck-btn, .zurueck-btn:focus { + border: 0; + margin: 0 1.2em 0 0.6em; + padding: 0; + color: black; } -#role-form { - margin-top: 1em; +.zurueck-btn:hover { + color: #888; } -#user-role-form { - margin-top: 1em; +.top-btn-area { + display: flex; + flex-flow: row; + justify-content: flex-end; + padding: 0 0.3em 0 0; + width: 4em; } -.eingabe { - margin-top: 0.5em; +.top-btn { + margin: 0; + padding: 0 0.2em 0 0.2em; + height: 28px; + line-height: 24px; + text-align: center; + font-size: large; + background-color: white; + /* width: 1em; */ } -.role-select { - margin-bottom: 0.5em; -} \ No newline at end of file +.del-user-btn { + margin: 0 1.5em 0 1em; + height: 28px; + line-height: 24px; + text-align: center; +} + +.danger-btn { + background-color: lightcoral; +} + +#user-form { + display: flex; + flex-flow: column; +} + +.profil-angabe { + margin: 0.8em 0 0 0; +} + +.user-save-btn { + margin: 2.5em 0 0 0; + width: 16em; +} + +@media (min-width: 800px) { + .zentrum-behaelter { + padding: 0 1em 0 1em; + } + .zentrum-behaelter, .nord { + margin: 0 10% 0 10%; + } + .profil-angabe { + width: 70%; + } + .user-save-btn { + width: 16em; + } +} +@media (min-width: 1200px) { + .zentrum-behaelter { + padding: 0 1.5em 0 1.5em; + } + .zentrum-behaelter, .nord { + margin: 0 15% 0 15%; + } + .profil-angabe { + width: 70%; + } + .user-save-btn { + width: 16em; + } +} + +@font-face { + font-family: 'Roboto Condensed'; + src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + + +/* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */ + +@font-face { + font-family: 'picto'; + src: url('../font/picto.eot?52325148'); + src: url('../font/picto.eot?52325148#iefix') format('embedded-opentype'), + url('../font/picto.woff2?52325148') format('woff2'), + url('../font/picto.woff?52325148') format('woff'), + url('../font/picto.ttf?52325148') format('truetype'), + url('../font/picto.svg?52325148#picto') format('svg'); + font-weight: normal; + font-style: normal; +} +/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ +/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ +/* +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: 'picto'; + src: url('../font/picto.svg?52325148#picto') format('svg'); + } +} +*/ + + [class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "picto"; + font-style: normal; + font-weight: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + /* opacity: .8; */ + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} + +.icon-user:before { content: '\e800'; } /* '' */ +.icon-cog:before { content: '\e801'; } /* '' */ +.icon-off:before { content: '\e802'; } /* '' */ +.icon-user-plus:before { content: '\f234'; } /* '' */ +.icon-user-times:before { content: '\f235'; } /* '' */ + + + +/* von Skeleton */ + +/* 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; } + + +/* 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 { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } -- Gitblit v1.9.3