0,0 → 1,324 |
html { |
background: url(/images/background.jpg) no-repeat center center fixed; |
-webkit-background-size: cover; |
-moz-background-size: cover; |
-o-background-size: cover; |
background-size: cover; |
} |
|
body { |
} |
|
.error-margin { |
margin-left: 0; |
margin-right: 0; |
} |
|
#gui { |
min-width: 452px; |
/* |
position: relative; |
top: 3vh; |
max-width: 950px;*/ |
} |
|
.explanation_net_pb { |
color: red; |
margin-bottom: 2px; |
font-size: calc(12px + 0.2vw); |
} |
|
#contenu_acces { |
border-bottom-left-radius: 10px; |
border-bottom-right-radius: 10px; |
|
/* get the main box under banner*/ |
padding-top: 5px; |
z-index: 5; |
top: -5px; |
/* ombrage css3 */ |
|
-moz-box-shadow: 1px 4px 10px #000; |
-webkit-box-shadow: 1px 4px 10px #000; |
box-shadow: 0px 10px 10px #000; |
} |
|
|
/* style de la page accès controlé*/ |
.banner { |
z-index:10; |
display: flex; |
align-items: center; |
margin-top: 5vh; |
position: relative; |
background-image: linear-gradient(black,#222222); |
/* ombrage CSS3 */ |
-moz-box-shadow: 1px 1px 6px #666; |
-webkit-box-shadow: 1px 1px 6px #666; |
box-shadow: 1px 1px 6px #666; |
border-radius: 10px; |
} |
#cadre_titre .titre_controle { |
color: white; |
font-size: calc(20px + 2.2vw); |
} |
#cadre_titre .titre_refus { |
color: red; |
font-size: calc(20px + 2.2vw); |
} |
#acces_controle { |
text-align: center; |
font-size: calc(20px + 1.5vw); |
padding-top: 25px; |
padding-bottom: 32px; |
margin: 0px; |
} |
@media(max-width:420px) { |
|
#acces_controle { |
text-align: left !important; |
} |
} |
.domain_allowed_title { |
margin-bottom: 0px; |
} |
|
/* Style de police */ |
|
BODY, :link, :visited, :hover:link, :hover:visited { |
font-family: "DejaVu Sans"; |
} |
INPUT, #box_url { |
font-family: arial; |
} |
#acces_controle, #box_url, #cadre_titre SPAN { |
font-weight: bold; |
} |
.box_menu :link , .box_menu :visited, .box_menu :hover:link, .box_menu :hover:visited { |
text-decoration: none; |
color: black; |
font-size: calc(14px + 0.2vw); |
font-weight: bold; |
} |
.box_menu:hover { |
background-color: rgba(5,55,64,0.2); |
} |
.box_menu { |
display: flex; |
align-items: center; |
height: 60px; |
position: relative; |
background-color: #efefef; |
padding: 10px; |
border-radius: 10px; |
/* ombrage CSS3 */ |
-moz-box-shadow: 1px 1px 6px #666; |
-webkit-box-shadow: 1px 1px 6px #666; |
box-shadow: 1px 1px 6px #666; |
margin-top: 30px; |
margin-bottom: 30px; |
|
|
} |
.box_menu SPAN { |
display: flex; |
align-items: center; |
} |
.box_menu A{ |
position: absolute; |
left: calc(100px + 1vw); |
} |
.box_menu IMG { |
width: calc(80px + 1vw); |
} |
|
.img-organisme{ |
margin-top: 1vh; |
margin-bottom: 1vh; |
margin-right: auto; |
margin-left: auto; |
} |
/* shift menu items left and right in an alternating fashion if enough space: */ |
@media(min-width:500px){ |
.box_menu { |
max-width: 90%; |
} |
|
.box_menu_right { |
max-width: 90%; |
left: 10%; |
} |
.box_menu_right A { |
right: 100px !important; |
left: 5% !important; |
} |
|
.box_menu_right IMG { |
position: absolute; |
top: -18px; |
right: 0px; |
} |
} |
|
#box_infos IMG { |
position: absolute; |
bottom: -15px; |
right: 0px; |
width: 80px; |
} |
|
|
.div-cache { |
visibility: hidden; |
position: absolute; |
top: -1000px; |
} |
|
/*Couleurs de fond */ |
|
INPUT, #contenu_acces, #contenu_error, #logon, #auth_reussi { |
background-color: #ffffff; |
} |
|
/* Règles des balises HTML */ |
|
H1, H2, #aide-certif { |
text-align: center; |
padding: 0px; |
margin: 3px; |
} |
P, UL, LI{ |
text-align: justify; |
} |
|
BODY { |
text-align: center; |
font-size: 12px; |
margin: 0px; |
} |
H1 { |
font-size: 55px; |
} |
H2 { |
font-size: 30px; |
} |
H6, #aide-certif{ |
font-size: 100%; |
} |
UL { |
padding-left: 20px; |
margin: 0px; |
margin-bottom: 5px; |
} |
LI { |
list-style-type: square; |
} |
TABLE { |
font-size: 90%; |
} |
INPUT { |
border: #666666 1px solid; |
padding: 2px; |
font-family: arial; |
height: 22px; |
} |
|
#contenu_acces SPAN { |
font-family: "courier new"; |
} |
#contenu_error SPAN { |
font-family: "courier new"; |
} |
|
.info-box-container { |
margin-top: 30px; |
margin-bottom: 30px; |
height: 100%; |
} |
|
|
#box_infos { |
background-color: #efefef; |
padding-left: 10px; |
padding-right: 10px; |
padding-top: 5px; |
padding-bottom: 5px; |
border-radius: 10px; |
/* ombrage CSS3 */ |
-moz-box-shadow: 1px 1px 6px #666; |
-webkit-box-shadow: 1px 1px 6px #666; |
box-shadow: 1px 1px 6px #666; |
} |
|
/* When the the infobox goes bellow the main one (col-xs), it gets a dynamic height*/ |
@media(max-width:768px){ |
#box_infos { |
height:100%; |
} |
} |
|
.box_infos_titles { |
font-size: calc(14px + 0.15vw); |
font-weight: bold; |
color: black; |
margin-top: 5px; |
} |
|
.box_infos_explanations { |
font-size: calc(13px + 0.11vw); |
margin-bottom: 0px; |
} |
|
.box_infos_titles A { |
color: black; |
} |
/* |
#box_infos :link, #box_info :visited { |
text-decoration: none; |
} |
#box_infos IMG { |
max-width: 100px; |
} |
#box_infos h2 { |
color: black; |
font-weight: bold; |
font-size: calc(14px + 0.4vw); |
margin-bottom: 5px; |
|
} |
|
#box_infos P { |
font-size: calc(12px + 0.3vw); |
} |
|
#box_infos A { |
color: black; |
font-weight: bold; |
}*/ |
#corner { |
position: fixed; |
bottom: 0; |
right: 0; |
|
} |
#adm { |
display: block; |
width: 100px; |
height: 100px; |
} |
.corn IMG:hover { |
position: absolute; |
width: 100px; |
height: 100px; |
top: 0px; |
left: 0px; |
} |
|
.corn IMG { |
position: absolute; |
width: 50px; |
height: 50px; |
top: 75px; |
left: 75px; |
transition: .2s; |
} |