1,122 → 1,124 |
/* |
Feuille de style pour les pages d'interceptions coté utilisateurs d'ALCASAR |
Auteur : Stéphane ERARD |
Feuille de style pour les pages d'interceptions coté utilisateurs d'ALCASAR |
Auteur : Stéphane ERARD |
Licence : GNU GPL |
|
*/ |
|
|
/* règles générales */ |
/* règles générales */ |
|
/* Couleurs de polices */ |
:link, :visited, :hover:link, :hover:visited, H2, #box_url, #box_refuse { |
COLOR: #000000; |
color: #000000; |
} |
BODY, H, #boite-logon { |
COLOR: #666666; |
color: #666666; |
} |
#acces_controle, .log_out { |
COLOR: white; |
color: white; |
} |
|
/* Style de police */ |
|
BODY, :link, :visited, :hover:link, :hover:visited { |
FONT-FAMILY: "DejaVu Sans"; |
font-family: "DejaVu Sans"; |
} |
INPUT, #box_url { |
FONT-FAMILY: Arial; |
font-family: arial; |
} |
#acces_controle, #box_url, #box_bienvenue, #cadre_titre SPAN { |
FONT-WEIGHT: bold; |
font-weight: bold; |
} |
|
.box_menu :link , .box_menu :visited, .box_menu :hover:link, .box_menu :hover:visited { |
text-decoration: none; |
} |
/*Couleurs de fond */ |
|
BODY { |
BACKGROUND-COLOR: #666666; |
background-color: #666666; |
} |
|
INPUT, #contenu_acces, #logon, #auth_reussi { |
BACKGROUND-COLOR: #ffffff; |
background-color: #ffffff; |
} |
|
/* Règles des balises HTML */ |
/* R�gles des balises HTML */ |
|
H1, H2, #aide-certif { |
TEXT-ALIGN: center; |
text-align: center; |
padding: 0px; |
margin: 3px; |
} |
P, UL, LI{ |
TEXT-ALIGN: justify; |
text-align: justify; |
} |
|
BODY { |
BACKGROUND-IMAGE: url(/images/fond.png); |
BACKGROUND-REPEAT: repeat-x; |
TEXT-ALIGN: center; |
FONT-SIZE: 12px; |
MARGIN: 0px; |
background-image: url(../images/fond.png); |
background-repeat: repeat-x; |
text-align: center; |
font-size: 12px; |
margin: 0px; |
} |
H1 { |
FONT-SIZE: 55px; |
font-size: 55px; |
} |
H2 { |
FONT-SIZE: 30px; |
font-size: 30px; |
} |
H6, #aide-certif{ |
FONT-SIZE: 100%; |
font-size: 100%; |
} |
UL { |
MARGIN: 5px; |
PADDING-BOTTOM: 5px; |
PADDING-LEFT: 10px; |
PADDING-RIGHT: 115px; |
PADDING-TOP: 5px; |
margin: 5px; |
padding-bottom: 5px; |
padding-left: 10px; |
padding-right: 115px; |
padding-top: 5px; |
} |
LI { |
LIST-STYLE-TYPE: square; |
PADDING-TOP: 2px; |
list-style-type: square; |
padding-top: 2px; |
} |
TABLE { |
FONT-SIZE: 90%; |
font-size: 90%; |
} |
IMG { |
HEIGHT: 150px; |
height: 150px; |
} |
INPUT { |
BORDER: #666666 1px solid; |
PADDING: 2px; |
FONT-FAMILY: Arial; |
HEIGHT: 22px; |
border: #666666 1px solid; |
padding: 2px; |
font-family: arial; |
height: 22px; |
} |
|
/* Taille et position des logos */ |
/* taille et position des logos */ |
|
#logo-alcasar { |
POSITION: absolute; |
BOTTOM: 25px; |
RIGHT: 5px; |
HEIGHT: 130px; |
position: absolute; |
bottom: 25px; |
right: 5px; |
height: 130px; |
} |
#logo-organ { |
POSITION: relative; |
TOP: 0px; |
RIGHT: -10px; |
MAX-WIDTH: 150px; |
MAX-HEIGHT: 150px; |
position: relative; |
top: 0px; |
right: -10px; |
max-width: 150px; |
max-height: 150px; |
} |
|
/* Placement et proportion de la boite de saisie et de l'aide */ |
/* placement et proportion de la boite de saisie et de l'aide */ |
|
#logon { |
POSITION: relative; |
WIDTH: 620px; |
TOP: 20px; |
position: relative; |
width: 620px; |
top: 20px; |
|
|
/* ombrage CSS3*/ |
/* ombrage css3*/ |
|
-moz-box-shadow: 0px 0px 12px #000; |
-webkit-box-shadow: 0px 0px 12px #000; |
124,46 → 126,46 |
} |
|
#boite-logon { |
BACKGROUND-IMAGE: url(/images/fond-bdd.png); |
BACKGROUND-REPEAT: repeat-x; |
PADDING: 10px; |
WIDTH: 420px; |
HEIGHT: 189px; |
background-image: url(../images/fond-bdd_grand.png); |
background-repeat: repeat-x; |
padding: 10px; |
width: 420px; |
height: 189px; |
} |
#boite-logon TD { |
PADDING-TOP: 10px; |
padding-top: 10px; |
} |
#boite-info { |
BORDER: 0px; |
MARGIN-TOP: 25px; |
WIDTH: 580px; |
PADDING-TOP: 10px; |
border: 0px; |
margin-top: 25px; |
width: 580px; |
padding-top: 10px; |
} |
/*Boite de dialogue de deconnection*/ |
/*boite de dialogue de deconnection*/ |
|
#auth_reussi { |
WIDTH: 450px; |
MARGIN-TOP: 12px; |
PADDING-TOP: 5px; |
PADDING-LEFT: 10px; |
PADDING-RIGHT: 10px; |
PADDING-BOTTOM: 0px; |
width: 450px; |
margin-top: 12px; |
padding-top: 5px; |
padding-left: 10px; |
padding-right: 10px; |
padding-bottom: 0px; |
} |
.text_auth { |
FONT-SIZE: 20px; |
font-size: 20px; |
} |
.lien_deco { |
TEXT-ALIGN: center; |
FONT-SIZE: 18px; |
MARGIN-BOTTOM: 15px; |
text-align: center; |
font-size: 18px; |
margin-bottom: 15px; |
} |
.log_out { |
FONT-SIZE: 24px; |
TEXT-ALIGN: center; |
MARGIN-TOP: 30px; |
font-size: 24px; |
text-align: center; |
margin-top: 30px; |
} |
#boite-logon, #auth_reussi, #logon { |
BORDER: 1px #efefef solid; |
border: 1px #efefef solid; |
|
/* ombrage css3*/ |
|
171,17 → 173,27 |
-webkit-box-shadow: 0px 0px 6px #000; |
box-shadow: 0px 0px 6px #000; |
} |
#liens_redir { |
position: relative; |
bottom: -100px; |
left: 90px; |
text-align: center; |
} |
#liens_redir P A { |
font-size: 12px; |
text-align: center; |
margin: 15px; |
} |
/* style de la page accès controlé*/ |
|
/* style de la page accès contrôlé*/ |
|
#cadre_titre{ |
POSITION: relative; |
WIDTH: 730px; |
HEIGHT: 98px; |
MARGIN-TOP: 40px; |
MARGIN-LEFT: auto; |
MARGIN-RIGHT: auto; |
Z-INDEX: 2; |
position: relative; |
width: 730px; |
height: 98px; |
margin-top: 40px; |
margin-left: auto; |
margin-right: auto; |
z-index: 2; |
|
/* ombrage css3 */ |
|
190,42 → 202,42 |
box-shadow: 1px 4px 10px #000; |
} |
#cadre_titre .titre_controle { |
BACKGROUND-IMAGE: url(/images/fond-bandeau.png); |
BACKGROUND-REPEAT: repeat-x; |
background-image: url(../images/fond-bandeau.png); |
background-repeat: repeat-x; |
} |
#cadre_titre .titre_refus { |
BACKGROUND-IMAGE: url(/images/fond-bandeau-rouge.png); |
BACKGROUND-REPEAT: repeat-x; |
background-image: url(../images/fond-bandeau-rouge.png); |
background-repeat: repeat-x; |
} |
#boite_logo{ |
POSITION: absolute; |
TOP: -30px; |
LEFT: -30px; |
WIDTH: 150px; |
HEIGHT: 150px; |
Z-INDEX: 2; |
position: absolute; |
top: -30px; |
left: -50px; |
width: 150px; |
height: 150px; |
z-index: 2; |
} |
#acces_controle { |
TEXT-ALIGN: center; |
FONT-SIZE: 40px; |
PADDING-TOP: 25px; |
PADDING-BOTTOM: 27px; |
MARGIN: 0px; |
text-align: center; |
font-size: 40px; |
padding-top: 25px; |
padding-bottom: 27px; |
margin: 0px; |
} |
#logo_acces { |
POSITION: relative; |
TOP: 0px; |
LEFT: 0px; |
position: relative; |
top: 0px; |
left: 0px; |
} |
#contenu_acces { |
POSITION: relative; |
WIDTH: 640px; |
HEIGHT: 400px; |
TOP: -20px; |
PADDING-TOP: 0px; |
MARGIN-LEFT: auto; |
MARGIN-RIGHT: auto; |
Z-INDEX: 1; |
position: relative; |
width: 640px; |
height: 400px; |
top: -20px; |
padding-top: 0px; |
margin-left: auto; |
margin-right: auto; |
z-index: 1; |
|
/* ombrage CSS3 */ |
|
234,87 → 246,74 |
box-shadow: 1px 1px 10px #000; |
} |
#logo_acces IMG, #box_refuse IMG { |
WIDTH: 95px; |
HEIGHT: 95px; |
width: 95px; |
height: 95px; |
} |
|
/* Boite des liens*/ |
|
#box_url { |
POSITION: relative; |
TOP: 35px; |
TEXT-ALIGN: right; |
FONT-SIZE: 14px; |
MARGIN-RIGHT: 20px; |
position: relative; |
top: 35px; |
text-align: right; |
font-size: 14px; |
margin-right: 20px; |
} |
#box_bienvenue { |
FONT-SIZE: 18px; |
font-size: 18px; |
} |
#cadre_titre SPAN { |
POSITION: absolute; |
TOP: 70px; |
WIDTH: 510px; |
LEFT: 110px; |
FONT-SIZE: 14px; |
COLOR: red; |
TEXT-ALIGN: center; |
BORDER: 2px red solid; |
PADDING: 2px; |
BACKGROUND-COLOR: white; |
position: absolute; |
top: 70px; |
width: 510px; |
left: 110px; |
font-size: 14px; |
color: red; |
text-align: center; |
border: 2px red solid; |
padding: 2px; |
background-color: white; |
} |
#contenu_acces SPAN { |
POSITION: relative; |
BOTTOM: -150px; |
FONT-FAMILY: "courier new"; |
position: relative; |
bottom: -150px; |
font-family: "courier new"; |
} |
#box_refuse { |
FONT-SIZE: 16px; |
MARGIN-LEFT: 130px; |
MARGIN-RIGHT: 20px; |
MARGIN-TOP: 40px; |
WIDTH: 460px; |
font-size: 16px; |
margin-left: 130px; |
margin-right: 20px; |
margin-top: 40px; |
width: 460px; |
} |
#box_refuse IMG { |
POSITION: absolute; |
TOP: -10px; |
LEFT: -110px; |
position: absolute; |
top: -10px; |
left: -110px; |
} |
#box_refuse, #box_bienvenue { |
POSITION: relative; |
TOP: 55px; |
position: relative; |
top: 55px; |
} |
#box_1 { |
LEFT: 40px; |
|
.box_menu IMG { |
position: absolute; |
width: 70px; |
height: 70px; |
top: -25px; |
} |
#box_2 { |
LEFT: 350px; |
.box_menu, #logon , #contenu_acces, #acces_controle, #cadre_titre, #box_info{ |
/* Arrondi CSS3 Firefox*/ |
-moz-border-radius: 10px; |
/* Arrondi CSS3 Autres Nav*/ |
border-radius: 10px; |
} |
#box_3 { |
WIDTH: 575px; |
LEFT: 40px; |
BOTTOM: 20px; |
} |
#box_1 P, #box_2 P, #box_3 P { |
MARGIN-LEFT: 80px; |
MARGIN-RIGHT: 25px; |
MARGIN-TOP: 8px; |
FONT-SIZE: 10px; |
} |
#box_1 SPAN, #box_2 SPAN, #box_3 SPAN { |
POSITION: relative; |
MARGIN-LEFT: 75px; |
MARGIN-RIGHT: 5px; |
FONT-SIZE: 12px; |
TOP: 2px; |
} |
.box_menu_courte, .box_menu_large { |
POSITION: absolute; |
HEIGHT: 80px; |
BACKGROUND-IMAGE: url(/images/fond-bdd.png); |
BACKGROUND-REPEAT: repeat-x; |
VERTICAL-ALIGN: bottom; |
TEXT-ALIGN: left; |
BORDER: 2px #efefef solid; |
.box_menu { |
position: absolute; |
height: 35px; |
width: 310px; |
background-image: url(../images/fond-bdd.png); |
background-repeat: repeat-x; |
|
/* ombrage CSS3 */ |
-moz-box-shadow: 1px 1px 6px #666; |
321,31 → 320,94 |
-webkit-box-shadow: 1px 1px 6px #666; |
box-shadow: 1px 1px 6px #666; |
} |
.box_menu_courte { |
WIDTH: 265px; |
TOP: 150px; |
.div-cache { |
visibility: hidden; |
position: absolute; |
top: -1000px; |
} |
.box_menu_courte IMG, .box_menu_large IMG { |
POSITION: absolute; |
WIDTH: 100px; |
HEIGHT: 100px; |
TOP: -40px; |
LEFT: -30px; |
#box_conn { |
top: 120px; |
} |
.box_menu_courte, .box_menu_large, #logon , #contenu_acces, #acces_controle, #cadre_titre { |
/* Arrondi CSS3 Firefox*/ |
-moz-border-radius: 10px; |
/* Arrondi CSS3 Autres Nav*/ |
border-radius: 10px; |
#box_certif { |
top: 190px; |
} |
#liens_redir { |
POSITION: relative; |
BOTTOM: -100px; |
LEFT: 90px; |
TEXT-ALIGN: center; |
#box_mdp { |
top: 260px; |
} |
#liens_redir P A { |
FONT-SIZE: 12px; |
TEXT-ALIGN: center; |
MARGIN: 15px; |
#box_acc { |
top: 330px; |
} |
#box_certif, #box_acc { |
left: 60px; |
text-align: right; |
} |
#box_conn, #box_mdp { |
left: 20px; |
text-align: left; |
} |
#box_conn IMG, #box_mdp IMG { |
left: 5px; |
} |
#box_certif IMG, #box_acc IMG { |
right: 5px; |
} |
#box_conn SPAN, #box_certif SPAN, #box_mdp SPAN, #box_acc SPAN { |
position: relative; |
font-size: 12px; |
font-weight: bold; |
top: 10px; |
} |
#box_conn SPAN, #box_mdp SPAN { |
margin-left: 80px; |
} |
#box_certif SPAN, #box_acc SPAN { |
margin-right: 80px; |
} |
|
/*Animation visuel des cadres liens (Gecko et ie9)*/ |
#box_conn:hover, #box_certif:hover, #box_mdp:hover, #box_acc:hover { |
/* cursor: pointer;*/ |
background-image: url(../images/fond-bdd_rouge.png); |
background-repeat: repeat-x; |
|
/* ombrage CSS3 */ |
-moz-box-shadow: 0px 0px 0px #fff; |
-webkit-box-shadow: 0px 0px 0px #fff; |
box-shadow: 0px 0px 0px #fff; |
} |
#box_conn:hover a, #box_certif:hover a, #box_mdp:hover a, #box_acc:hover a .box_menu a:hover, .box_menu a:visited:hover, #box_info :link:hover, #box_info :visited:hover { |
color: red; |
|
} |
|
/*Mise en page de la bulle d'info (coté droit)*/ |
#box_info H2 { |
font-size: 14px; |
margin: 10px auto; |
} |
#box_info P { |
font-size: 11px; |
margin: 10px; |
} |
#box_info IMG { |
position: absolute; |
bottom: -60px; |
right: 10px; |
height: 120px; |
} |
#box_info { |
position: absolute; |
top: 118px; |
right: 20px; |
width: 230px; |
height: 250px; |
background-color: #efefef; |
|
/* ombrage CSS3 */ |
-moz-box-shadow: 1px 1px 6px #666; |
-webkit-box-shadow: 1px 1px 6px #666; |
box-shadow: 1px 1px 6px #666; |
} |
#box_info :link, #box_info :visited { |
text-decoration: none; |
} |