Vorbereitungen für selbstgewählte Farben im Wettkampfplaner
geändert: homepage/wkParticipo/index.php geändert: homepage/wkParticipo/wkParticipo.css
This commit is contained in:
Marko Bunzel
@@ -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;
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
@@ -33,10 +51,28 @@ setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'de', 'ge');
|
||||
<link rel="icon" href="/ressourcen/graphiken/icons/cwsv.ico" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="wkParticipo.css">
|
||||
<link rel="stylesheet" href="http://cwsvjudo.bplaced.net/ressourcen/css/cwsvJudoNavBar.css">
|
||||
|
||||
<style>
|
||||
<?php
|
||||
$css = file_get_contents( $basePath."/pages/desktop/wkParticipo/wkParticipo.css");
|
||||
if(!empty($_SESSION['login'])){
|
||||
try{
|
||||
if(!empty($_SESSION['user']['userConfig'])){
|
||||
var_dump($_SESSION);
|
||||
#$config = json_decode($_SESSION['user']['userConfig'], true);
|
||||
#$css = str_replace ( "#FFAE00", $config['color1'], $css );
|
||||
#$css = str_replace ( "#ffae00", $config['color1'], $css );
|
||||
#$css = str_replace ( "#FF8100", $config['color2'], $css );
|
||||
#$css = str_replace ( "#ff8100", $config['color2'], $css );
|
||||
}
|
||||
}
|
||||
catch (Exception $e) {
|
||||
echo 'Exception abgefangen: ', $e->getMessage(), "\n";
|
||||
}
|
||||
}
|
||||
echo(colorThemeCss($_SESSION['user']['userConfig']));
|
||||
echo($css);
|
||||
?>
|
||||
</style>
|
||||
<?php PHPCount::AddHit("Wettkampfplaner (".htmlspecialchars($_SESSION['user']['username']).")");?>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user