From 947abde25885452292f4a56508042172b4d303e6 Mon Sep 17 00:00:00 2001 From: ulrich Date: Sun, 17 May 2020 13:07:25 +0000 Subject: [PATCH] Stile verfeinert --- web/ui2/data/tpl/dlg-del-conf.tpl | 2 web/ui2/stile.css | 161 ++++++++--------------------------------------------- 2 files changed, 27 insertions(+), 136 deletions(-) diff --git a/web/ui2/data/tpl/dlg-del-conf.tpl b/web/ui2/data/tpl/dlg-del-conf.tpl index e96713c..f4ade37 100644 --- a/web/ui2/data/tpl/dlg-del-conf.tpl +++ b/web/ui2/data/tpl/dlg-del-conf.tpl @@ -2,7 +2,7 @@ <span class="close-btn pointer-cursor">✖</span> <div class="dlg-behaelter"> <div class="dlg-info-app-titel">Löschen bestätigen</div> - <div class="dlg-info-app-info">Soll der Nutzer {{nutzername}} wirklich gelöscht werden?</div> + <div class="dlg-info-app-info">Soll der Nutzer <span class="bold-text">{{nutzername}}</span> wirklich gelöscht werden?</div> <div class="form-button-footer"> <button type="button" class="danger-btn" id="nutzer-loeschen-btn">Löschen</button> </div> diff --git a/web/ui2/stile.css b/web/ui2/stile.css index ec9221c..4cb0d21 100644 --- a/web/ui2/stile.css +++ b/web/ui2/stile.css @@ -3,11 +3,6 @@ Author : ulrich */ - - - - - /* aus App-Vorlage */ html, body { @@ -66,6 +61,7 @@ /* background-color: #eaeaea; */ height: 100%; width: 100%; + padding: 0 0.4em 0 0.4em; } .zentrum { @@ -112,6 +108,7 @@ line-height: 24px; text-align: center; font-size: large; + background-color: white; } .del-user-btn { @@ -175,6 +172,10 @@ padding: 0.4em; } +.dlg-info-app-titel { + margin-bottom: 0.4em; +} + .nutzer-form { padding: 0.3em; } @@ -186,6 +187,10 @@ .form-button-footer { padding: 0.4em; +} + +.bold-text { + font-weight: bold; } @@ -229,7 +234,7 @@ padding: 0 0.5em; margin: 0.2em; text-transform: none; - background-color: #fff8c4; + background-color: #fdfbe2; font-size: medium; } @@ -237,140 +242,26 @@ height: 2.5em; padding: 0 0.5em; margin: 0.2em; - background-color: #fff8c4; + background-color: #eee; text-transform: none; font-size: medium; } -/* für app-menu */ - - -.app-menu { - margin: 0; - padding: 0; +@media (min-width: 800px) { + .zentrum-behaelter { + padding: 0 1em 0 1em; + } + .zentrum-behaelter, .nord { + margin: 0 10% 0 10%; + } } - -.app-menu-kopf { - text-align: center; -} - -ul.app-menu { - list-style: none; -} - -.app-menu-item-back { - margin-bottom: 0.3em; - cursor: pointer; -} - -.app-menu-item { - text-align: right; - cursor: pointer; -} - -.app-menu-item-submark { - color: transparent; - cursor: pointer; -} - -/* - Das div-Element, das das Menue aufnimmt erhaelt - die Klasse app-menu-content -*/ -.app-menu-content { - overflow: hidden; -} - -/* für Hamburger Icon */ - -.hamburger { - display: inline-block; - cursor: pointer; - transition-property: opacity, filter; - transition-duration: 0.15s; - transition-timing-function: linear; - font: inherit; - color: inherit; - text-transform: none; - background-color: transparent; - border: 0; - margin: 0; - overflow: visible; -} - -.hamburger:hover { - opacity: 0.7; -} - -.hamburger-box { - width: 40px; - height: 24px; - display: inline-block; - position: relative; -} - -.hamburger-inner { - display: block; - top: 50%; - margin: 0; -} - -.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { - width: 30px; - height: 4px; - background-color: white; /* #000; */ - border-radius: 4px; - position: absolute; - transition-property: transform; - transition-duration: 0.15s; - transition-timing-function: ease; -} - -.hamburger-inner::before, .hamburger-inner::after { - content: ""; - display: block; -} - -.hamburger-inner::before { - top: -10px; -} - -.hamburger-inner::after { - bottom: -10px; -} - -/* - * Elastic - */ -.hamburger--elastic .hamburger-inner { - top: 2px; - transition-duration: 0.275s; - transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -} - -.hamburger--elastic .hamburger-inner::before { - top: 10px; - transition: opacity 0.125s 0.275s ease; -} - -.hamburger--elastic .hamburger-inner::after { - top: 20px; - transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); -} - -.hamburger--elastic.is-active .hamburger-inner { - transform: translate3d(0, 10px, 0) rotate(135deg); - transition-delay: 0.075s; -} - -.hamburger--elastic.is-active .hamburger-inner::before { - transition-delay: 0s; - opacity: 0; -} - -.hamburger--elastic.is-active .hamburger-inner::after { - transform: translate3d(0, -20px, 0) rotate(-270deg); - transition-delay: 0.075s; +@media (min-width: 1200px) { + .zentrum-behaelter { + padding: 0 1.5em 0 1.5em; + } + .zentrum-behaelter, .nord { + margin: 0 15% 0 15%; + } } @font-face { -- Gitblit v1.9.3