:root { --main-color1:#155F00; /*#1B75BC;*/ --light-color1:#1A7800; /*#80A0D3;*/ --dark-color1:#0F4500; /*#155D97;*/ --main-color2:#FFB902; /*#FAA61A;*/ --light-color2:#FFD41C; /*#FDC578;*/ --dark-color2:#E6A602; /*#C48312;*/ --main-color3:#4D4C8A; /*#5C2D91;*/ --light-color3:#5B5AA3; /*#826AAF;*/ --dark-color3:#3F3E70; /*#491D74;*/ --main-color4:#1B75BC; --light-color4:#80A0D3; --dark-color4:#155D97; } /* body { font-family: Verdana, Arial, Helvetica, Lucida, sans-serif; position: absolute; height:100%; width:100%; margin:0; padding:0; } */ #logon { font-family: inherit; width:55%; background-color: #FFFFFF; margin:1rem auto; padding:1rem 1rem; border:0px solid var(--main-color1); -moz-border-radius: 0.35rem; -webkit-border-radius: 0.35rem; border-radius: 0.35rem; color:var(--main-color3); } #account_create { width:80%; margin:1rem auto; padding:1rem 1rem; color:var(--main-color1); } #logon .cas_connexion, #logon .local_connexion { border: 2px solid var(--main-color1); padding: 0 0.5rem 0 0.5rem; margin: 0; margin-top: 1rem; } #logon .help { font-size: 80%; color: #000000; margin: 0; padding: 0; } #logon h1 { font-size: 180%; font-style: italic; text-align: center; margin-top: 0; /* suppression espace parasite du */ padding-top:0; background-color: transparent; } #logon h2, #account_create h2 { font-family: inherit; font-size: 150%; font-style: italic; color: var(--main-color1); border-bottom: 2px solid var(--main-color1); padding-bottom: 1rem; background-color: transparent; } #logon legend .help_button { color: #FFFF00; display: none; float: right; margin-bottom: 0; } #logon legend { font-family: inherit; font-style: italic; font-weight: bold; border: 1px solid var(--main-color1); padding: 0.1rem 0.75rem 0.2rem 0.75rem; background-color:var(--main-color1); color:#FFFFFF; background-image:-moz-linear-gradient(90deg,var(--dark-color1),var(--light-color1)); background-image:-o-linear-gradient(90deg,var(--dark-color1),var(--light-color1)); background-image:-webkit-gradient(linear,center bottom,center top,color-stop(0,var(--dark-color1)),color-stop(1,var(--light-color1))); } #logon h3 .help_button { color: #FFFF00; display: block; display: none; float: right; margin-bottom: 0; } #logon .message { color: #880000; font-size: 120%; text-align: center; } #logon form { padding: 0.5rem; border: 2px none #000088; background-color: #BBBBFF; } #logon #auth_login form { width:28rem; margin: 1rem auto; /* Pour centrage */ padding: 0.5rem; border: 2px none #000088; background-color: #BBBBFF; } #auth_create form, #auth_forgot form, #auth_reset form { width:75%; height:10rem; margin-bottom:1rem; } #logon form input[name='login'] { /* width:50%; */ font: inherit; } #logon form input[name='passwd'] { /* width: 100%; */ font: inherit; } #logon form label { font: inherit; text-align: left; color: inherit; padding-top:0.15rem; } #logon input { font: inherit; } #account_create ul { width:100%; list-style-type:none; float:left; } #account_create label { font: inherit; text-align: left; color: inherit; padding:0.5rem 1rem; } #account_create input { font: inherit; } #account_create input[type='submit'], #account_create input[type='reset'] { margin:1rem 1rem; padding: 0.5rem 1rem; border:0; color:#FFFFFF; background-color: var(--light-color1); background-image:-moz-linear-gradient(90deg,var(--dark-color1),var(--light-color1)); background-image:-o-linear-gradient(90deg,var(--dark-color1),var(--light-color1)); background-image:-webkit-gradient(linear,center bottom,center top,color-stop(0,var(--dark-color1)),color-stop(1,var(--light-color1))); text-decoration: none; cursor:pointer; } #auth_create_valid_info, #auth_forgot_valid_info, auth_reset_valid_info { display:none; position:absolute; z-index: 1; top:16%; left:48%; margin-left:1rem; margin-top:2rem; color:#330000; padding:0.5rem 1rem; border-radius: 1rem; background-color:#F7F7F7; } #auth_create_valid_info::after, #auth_forgot_valid_info::after, auth_reset_valid_info::after { content:""; position: absolute; top:65%; right:100%; margin-top: -1rem; border-width: 1rem; border-style: solid; border-color: transparent #F7F7F7 transparent transparent; } #auth_create_valid_info p, #auth_forgot_valid_info p, auth_reset_valid_info p { padding:0 1rem; margin:0.3rem 0; } #auth_create_valid_info p:last-child, #auth_forgot_valid_info p:last_child, auth_reset_valid_info p:last-child { padding:0 1rem; margin:0; } /* Add a green text color and a checkmark when the requirements are right */ #auth_create_valid_info .valid, #auth_forgot_valid_info .valid, auth_reset_valid_info .valid { color: #008000; } #auth_create_valid_info .valid::before, #auth_forgot_valid_info .valid::before, auth_reset_valid_info .valid::before { position: relative; left: -1rem; content: "✔"; } /* Add a red text color and an "x" when the requirements are wrong */ #auth_create_valid_info .invalid, #auth_forgot_valid_info .invalid, auth_reset_valid_info .invalid { color: #990000; } #auth_create_valid_info .invalid::before, #auth_forgot_valid_info .invalid::before, auth_reset_valid_info .invalid::before { position: relative; left: -1rem; content: "✖"; } /* Add a green text color and a checkmark when the requirements are right */ #phppasswd2.valid { background-color: #99FF99; } #phppasswd2.valid + #check::after { color: #008000; content: "✔"; } /* Add a red text color and an "x" when the requirements are wrong */ #phppasswd2.invalid { background-color:#FF9999; } #phppasswd2.invalid + #check:after { color:#990000; content:"✖"; } #logon .postform { margin-top : 1rem; font: inherit; color: inherit; font-size: 120%; text-align: center; } #logon .best_choice { color:#990000; font-size:120%; } #logon a { color: inherit; } #logon .postform { text-align: center; } .roundbox { -moz-border-radius: 0.35rem; -webkit-border-radius: 0.35rem; border-radius: 0.35rem; } .shadowbox { -webkit-box-shadow: rgba(0, 0, 0, 0.6) 3px 3px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.6) 3px 3px 5px; box-shadow: rgba(0, 0, 0, 0.6) 3px 3px 5px; } /*.shadowbox_inset { -webkit-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5); } .shadowbox_in { -webkit-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5), inset 0px 0px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5), inset 0px 0px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5), inset 0px 0px 5px rgba(0, 0, 0, 0.5); } .shadowbox_out { -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5) ; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5) ; }*/ .background_gradient { background-color:var(--main-color3); color:#330000; background-image:-moz-linear-gradient(90deg,var(--dark-color3),var(--light-color3)); background-image:-o-linear-gradient(90deg,var(--dark-color3),var(--light-color3)); background-image:-webkit-gradient(linear,center bottom,center top,color-stop(0,var(--dark-color3)),color-stop(1,var(--light-color3))); } .form_gradient { background-color:var(--main-color2); color:#330000; background-image:-moz-linear-gradient(90deg,var(--dark-color2),var(--light-color2)); background-image:-o-linear-gradient(90deg,var(--dark-color2),var(--light-color2)); background-image:-webkit-gradient(linear,center bottom,center top,color-stop(0,var(--dark-color2)),color-stop(1,var(--light-color2))); }