From b9d4b5aa084abc09760ff817dae05efdd60d36b8 Mon Sep 17 00:00:00 2001 From: Marko Bunzel Date: Sun, 28 Jul 2019 19:12:13 +0200 Subject: [PATCH] =?UTF-8?q?Vorbereitungen=20f=C3=BCr=20selbstgew=C3=A4hlte?= =?UTF-8?q?=20Farben=20im=20Wettkampfplaner?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit geändert: homepage/wkParticipo/index.php geändert: homepage/wkParticipo/wkParticipo.css --- homepage/wkParticipo/index.php | 46 +++- homepage/wkParticipo/wkParticipo.css | 304 ++++++++++++++++++++++++++- 2 files changed, 340 insertions(+), 10 deletions(-) diff --git a/homepage/wkParticipo/index.php b/homepage/wkParticipo/index.php index 17a9c5f..956f689 100644 --- a/homepage/wkParticipo/index.php +++ b/homepage/wkParticipo/index.php @@ -18,8 +18,26 @@ setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'de', 'ge'); if ($mysqlConn->connect_error) { $sqlMessage['error'] .= 'Datenbankverbindung fehlgeschlagen: ' . $mysqlConn->connect_error; } - // var_dump($_SESSION); + +/// Stellt den cssCode mit den Variablendefinitionen bereit +function colorThemeCss($colorArray = ['backgroundColor'=>"#FFAE00", 'highlightColor'=>"#FF8100", 'buttonColor'=>"#291670"]){ +$colorTypes = ["backgroundColor", "highlightColor", "buttonColor"]; +$defaultColors =['backgroundColor'=> "#FFAE00", 'highlightColor'=>"#FF8100", 'buttonColor'=>"#291670"]; + + foreach($colorTypes as $key){ + if( !preg_match("/^#(?:[0-9a-fA-F]{3}){1,2}$/", $key) ){ + $colorThemeCss[$key] = $defaultColors[$key]; + } + } + $ret = ":root{"; + + foreach($colorArray as $key=>$value){ + $ret .= "--".$key.": ".$value."; "; + } + $ret .= "}"; +return $ret; +} ?> @@ -33,10 +51,28 @@ setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'de', 'ge'); - - - - + diff --git a/homepage/wkParticipo/wkParticipo.css b/homepage/wkParticipo/wkParticipo.css index c7bb573..8ffa86e 100644 --- a/homepage/wkParticipo/wkParticipo.css +++ b/homepage/wkParticipo/wkParticipo.css @@ -1,11 +1,257 @@ +/* cssTemplate für den Wettkampfplaner + * benötigt die Variablen + * + * - --backgroundColor + * - --highlightColor + * - --buttonColor + * + * für die Farben. + */ /* blau: #291670 */ /* gelb: #fff500*/ + +/* Box-Sizing global auf die BorderBox stellen */ +html{ + box-sizing: border-box; +} +*, ::before, ::after { + box-sizing: inherit; +} + + +.loginForm{} +.loginForm div{ + display: flex; + flex-direction: column; + width: 100%; +} +.loginForm input{ + display: block; + margin: 0; + width: 100%; + font-size: 1.5em; + border: 1px solid #bbb; +} +.loginForm button[type=submit]{ + display: block; + font-size: 1em; + line-height: 2em; + color: #333; + font-weight: bold; + width: 100%; + background: #fdfdfd; + background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%); + border: 1px solid #bbb; +} + + +/** + * Wettkampfbox + **/ + +.wkBox{ + border: 1px solid black; + display: flex; + flex-direction: column; +} +.wkBox nav{ +/* width: 32%; + float: left;*/ +} +.wkBox nav ul li{ + display: list-item; +} +.wkBoxWkData{ + border: none; +} +@media (min-width: 65em){ + .wkBox{ + flex-direction: row; + align-items: stretch; + justify-content: space-around; + padding: .5em; + } + .wkBox *{ + flex-basis: 30%; + } +} + + +/* touchable Links*/ +.touchLink{ + display: inline-block; + padding: 0.25em 0 0.25em 0; + margin: 0.25em 0 0.25em 0; + background-color: var(--highlightColor); + border-radius: .5em; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +/* touchable Buttons */ + +.touchButton{ + display: block; + margin: .5em 0; + font-size: 1em; + line-height: 1.5em; + color: #333; + font-weight: bold; + width: 100%; + background: #fdfdfd; + background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%); + border: 1px solid #bbb; +} +.touchButton[disabled]{ + color: Grey; +} + + +@media (min-width: 65em){ +/* .loginForm div{ + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + } + .loginForm div div{ + flex-direction: column; + align-items: flex-start; + width: 30%; + } + button{ + } +*/ +} + +body{ + background-color: var(--backgroundColor); +} + + +nav ul { + width: 100%; + list-style: none; + padding: 0; +} + +nav ul li a{ + text-decoration: none; + color: black; +} + +nav ul li a div{ + text-align: center; + font-size: large; + font-weight: bolder; + border: 3px gray outset; + background: linear-gradient(to bottom, var(--backgroundColor) 0%, var(--highlightColor) 100%); + padding-top: .25em; + padding-bottom: .25em; +} + +.navLink{ + text-align: center; +/* font-size: large;*/ + font-weight: bolder; + border: 3px gray outset; + background: linear-gradient(to bottom, var(--backgroundColor) 0%, var(--highlightColor) 100%); + padding-top: .25em; + padding-bottom: .25em; +} + +.navLink div{ + display: inline; +} +meldungsBox{ + border: 1px solid black; +} + + +@media only screen and (min-device-width: 481px){ + .wkInfo{ + width: 68%; + float: right; + } + + nav ul{ + display: table; + } + + nav ul li{ + display: table-cell; + } + + nav ul li a div{ + text-align: center; + } + + button[type=submit] { + display: block; + font-size: 1em; + line-height: 1.5em; + color: #333; + font-weight: bold; + width: 100%; + background: #fdfdfd; + background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%); + border: 1px solid #bbb; + } + button[disabled]{ + color: Grey; + } +} + +@media only screen and (max-device-width: 481px) { + nav ul li a div{ + text-align: left; + } + button[type=submit] { + display: block; + font-size: 1em; + line-height: 1.5em; + color: #333; + font-weight: bold; + width: 100%; + background: #fdfdfd; + background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); + background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); + background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); + background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); + background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%); + border: 1px solid #bbb; + -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; + } + button[disabled]{ + color: Grey; + } + input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] { + -webkit-appearance: none; -moz-appearance: none; + display: block; + margin: 0; + width: 100%; +/* height: 2em;*/ +/* line-height: 1.6em;*/ + font-size: 1.5em; + border: 1px solid #bbb; + } + #meldungsBox{ +/* font-size: 3em;*/ + border: 1px solid black; + } + fieldset div{ + font-size: 1em; + } +} + + + + .wkInfoCard{ - border-left: .5rem solid #291670; + border-left: .5rem solid var(--buttonColor); margin: 1rem 0; display: flex; - background-color: #FFAE00; + background-color: var(--backgroundColor); border-radius: 2px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); @@ -20,7 +266,7 @@ display: flex; flex-direction: column; align-items: center; - color: #291670; + color: var(--buttonColor); padding: 0rem 0.5rem 0rem 0rem; width: 6rem; } @@ -46,7 +292,7 @@ display: flex; flex-direction: column; flex-grow: 1; - background-color: #FF8100; + background-color: var(--highlightColor); } @media (min-width: 640px){ .wkInfoCardWkData{ @@ -91,7 +337,7 @@ } .wkInfoCardButtonSuccess { - background-color: #291670; + background-color: var(--buttonColor); color: #eee; } @@ -130,3 +376,51 @@ .material-icons { width: 1rem; } + +/* +css für Navigationsleiste +*/ + + +.navBar{ + width: 100%; + margin: 0 auto; +} + +.navBar > ul{ + display: flex; + flex-flow: column; + text-align: center; + background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%); + box-shadow: 0 0 .5em rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6); +} + +.navBar ul > li > a { + height: 100%; + padding: .25em; + text-transform:uppercase; + color: rgba(0, 35, 122, 0.5); + font-size: Large; + text-decoration: none; + display: block; +} + +.navBar > ul > li > a:hover { + box-shadow: 0 0 .2em rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.1); + color: rgba(0, 35, 122, 0.7); +} + + +@media (min-width: 640px){ + .navBar > ul{ + flex-flow: row; + justify-content: space-between; + align-items: stretch; + } + .navBar > ul > li { + align-items: center; + flex-grow: 1; + flex-basis: 100%; + } +}