diff --git a/www/css/style.css b/www/css/style.css index 0c1929b47ce0e3ec8eb668177bfcf84416cf45b7..388ddaa39b91f2542c10db317f3c80f3e257def6 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -19,6 +19,7 @@ header left: 0; background:#26346D; height: 120px; + z-index:100; } footer{ @@ -222,37 +223,81 @@ div.submit input[type=submit], div.submit input[type=reset] { margin-right:5px; } -.connexion-form{ +.connexion-form, .inscription-form{ margin: auto; display: block; width: 300px; } -.inscription-form{ - margin: auto; - display: block; - width: 400px; -} .addjeu-form{ margin: auto; display: block; width: 324px; } -.connexion-form label , .addjeu-form label { +.connexion-form label , .inscription-form label, .addjeu-form label { display: block; - min-width: 140px; + min-width: 150px; float: left; } -.inscription-form label { - display: block; - min-width: 210px; - float: left; -} .inscription-form textarea { - width: 170px; + width: 160px; +} + +.form-line { + margin-bottom:10px; +} + +.validation-container-left { + position: relative; + display: flex; +} + +.validation-container { + min-height: 25px; + min-width:120px; + max-width:130px; + position: relative; + margin-top:-2px; + margin-left:150px; + padding-left:7px; + padding-right:7px; + background: red; + color:white; + box-shadow: 0 0 2px black; + /*display: flex;*/ + display:none; +} + +.validation-container-content { + margin: auto; +} + +.validation-container:before, +.validation-container:after { + content: ''; + width: .7em; height: .7em; + position: absolute; top: -.35em; left: 3.5em; + margin-left: .35em; + background: red; + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.validation-container:before { + -webkit-box-shadow: 0 0 5px black; + -moz-box-shadow: 0 0 5px black; + box-shadow: 0 0 5px black; + z-index: -1; +} + +.validation-checkbox { + display:none; } .connexion-form input, .inscription-form input{ @@ -331,6 +376,16 @@ article h2{ } + + + + + + + + + + @media only screen and (min-width: 600px) { /* For tablets: */ .col-m-1 {width: 8.33%;}