Rev 359 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 360 | richard | 1 | /* |
| 2 | Feuille de style pour les pages d'interceptions coté utilisateurs d'ALCASAR |
||
| 3 | Auteur : Stéphane ERARD |
||
| 4 | Licence : GNU GPL |
||
| 5 | |||
| 6 | */ |
||
| 7 | |||
| 8 | |||
| 354 | richard | 9 | /* règles générales */ |
| 10 | |||
| 360 | richard | 11 | /* Couleurs de polices */ |
| 12 | :link, :visited, :hover:link, :hover:visited, H2, #box_url, #box_refuse { |
||
| 354 | richard | 13 | COLOR: #000000; |
| 14 | } |
||
| 360 | richard | 15 | BODY, H, #boite-logon { |
| 16 | COLOR: #666666; |
||
| 17 | } |
||
| 18 | #acces_controle, .log_out { |
||
| 19 | COLOR: white; |
||
| 20 | } |
||
| 354 | richard | 21 | |
| 360 | richard | 22 | /* Style de police */ |
| 23 | |||
| 24 | BODY, :link, :visited, :hover:link, :hover:visited { |
||
| 25 | FONT-FAMILY: "DejaVu Sans"; |
||
| 26 | } |
||
| 27 | INPUT, #box_url { |
||
| 28 | FONT-FAMILY: Arial; |
||
| 29 | } |
||
| 30 | #acces_controle, #box_url, #box_bienvenue, #cadre_titre SPAN { |
||
| 31 | FONT-WEIGHT: bold; |
||
| 32 | } |
||
| 33 | |||
| 34 | /*Couleurs de fond */ |
||
| 35 | |||
| 36 | BODY { |
||
| 37 | BACKGROUND-COLOR: #666666; |
||
| 38 | } |
||
| 39 | |||
| 40 | INPUT, #contenu_acces, #logon, #auth_reussi { |
||
| 41 | BACKGROUND-COLOR: #ffffff; |
||
| 42 | } |
||
| 43 | |||
| 44 | /* Règles des balises HTML */ |
||
| 45 | |||
| 354 | richard | 46 | H1, H2, #aide-certif { |
| 47 | TEXT-ALIGN: center; |
||
| 48 | padding: 0px; |
||
| 49 | margin: 3px; |
||
| 50 | } |
||
| 51 | P, UL, LI{ |
||
| 52 | TEXT-ALIGN: justify; |
||
| 53 | } |
||
| 54 | |||
| 55 | BODY { |
||
| 56 | BACKGROUND-IMAGE: url(/images/fond.png); |
||
| 57 | BACKGROUND-REPEAT: repeat-x; |
||
| 58 | TEXT-ALIGN: center; |
||
| 59 | FONT-SIZE: 12px; |
||
| 60 | MARGIN: 0px; |
||
| 61 | } |
||
| 62 | H1 { |
||
| 63 | FONT-SIZE: 55px; |
||
| 64 | } |
||
| 65 | H2 { |
||
| 66 | FONT-SIZE: 30px; |
||
| 67 | } |
||
| 68 | H6, #aide-certif{ |
||
| 69 | FONT-SIZE: 100%; |
||
| 70 | } |
||
| 71 | UL { |
||
| 72 | MARGIN: 5px; |
||
| 73 | PADDING-BOTTOM: 5px; |
||
| 74 | PADDING-LEFT: 10px; |
||
| 75 | PADDING-RIGHT: 115px; |
||
| 76 | PADDING-TOP: 5px; |
||
| 77 | } |
||
| 78 | LI { |
||
| 79 | LIST-STYLE-TYPE: square; |
||
| 80 | PADDING-TOP: 2px; |
||
| 81 | } |
||
| 82 | TABLE { |
||
| 83 | FONT-SIZE: 90%; |
||
| 84 | } |
||
| 85 | IMG { |
||
| 86 | HEIGHT: 150px; |
||
| 87 | } |
||
| 88 | INPUT { |
||
| 89 | BORDER: #666666 1px solid; |
||
| 90 | PADDING: 2px; |
||
| 91 | FONT-FAMILY: Arial; |
||
| 92 | HEIGHT: 22px; |
||
| 93 | } |
||
| 94 | |||
| 95 | /* Taille et position des logos */ |
||
| 96 | |||
| 97 | #logo-alcasar { |
||
| 98 | POSITION: absolute; |
||
| 99 | BOTTOM: 25px; |
||
| 100 | RIGHT: 5px; |
||
| 101 | HEIGHT: 130px; |
||
| 102 | } |
||
| 103 | #logo-organ { |
||
| 104 | POSITION: relative; |
||
| 105 | TOP: 0px; |
||
| 106 | RIGHT: -10px; |
||
| 107 | MAX-WIDTH: 150px; |
||
| 108 | MAX-HEIGHT: 150px; |
||
| 109 | } |
||
| 110 | |||
| 111 | /* Placement et proportion de la boite de saisie et de l'aide */ |
||
| 112 | |||
| 113 | #logon { |
||
| 114 | POSITION: relative; |
||
| 115 | WIDTH: 620px; |
||
| 116 | TOP: 20px; |
||
| 360 | richard | 117 | |
| 118 | |||
| 119 | /* ombrage CSS3*/ |
||
| 120 | |||
| 121 | -moz-box-shadow: 0px 0px 12px #000; |
||
| 122 | -webkit-box-shadow: 0px 0px 12px #000; |
||
| 123 | box-shadow: 0px 0px 12px #000; |
||
| 354 | richard | 124 | } |
| 125 | |||
| 126 | #boite-logon { |
||
| 127 | BACKGROUND-IMAGE: url(/images/fond-bdd.png); |
||
| 360 | richard | 128 | BACKGROUND-REPEAT: repeat-x; |
| 354 | richard | 129 | PADDING: 10px; |
| 130 | WIDTH: 420px; |
||
| 131 | HEIGHT: 189px; |
||
| 132 | } |
||
| 133 | #boite-logon TD { |
||
| 134 | PADDING-TOP: 10px; |
||
| 135 | } |
||
| 136 | #boite-info { |
||
| 137 | BORDER: 0px; |
||
| 138 | MARGIN-TOP: 25px; |
||
| 139 | WIDTH: 580px; |
||
| 140 | PADDING-TOP: 10px; |
||
| 141 | } |
||
| 142 | /*Boite de dialogue de deconnection*/ |
||
| 143 | |||
| 144 | #auth_reussi { |
||
| 145 | WIDTH: 450px; |
||
| 146 | MARGIN-TOP: 12px; |
||
| 147 | PADDING-TOP: 5px; |
||
| 148 | PADDING-LEFT: 10px; |
||
| 149 | PADDING-RIGHT: 10px; |
||
| 150 | PADDING-BOTTOM: 0px; |
||
| 151 | } |
||
| 152 | .text_auth { |
||
| 153 | FONT-SIZE: 20px; |
||
| 154 | } |
||
| 155 | .lien_deco { |
||
| 156 | TEXT-ALIGN: center; |
||
| 157 | FONT-SIZE: 18px; |
||
| 359 | richard | 158 | MARGIN-BOTTOM: 15px; |
| 354 | richard | 159 | } |
| 160 | .log_out { |
||
| 161 | FONT-SIZE: 24px; |
||
| 162 | TEXT-ALIGN: center; |
||
| 359 | richard | 163 | MARGIN-TOP: 30px; |
| 354 | richard | 164 | } |
| 360 | richard | 165 | #boite-logon, #auth_reussi, #logon { |
| 166 | BORDER: 1px #efefef solid; |
||
| 167 | |||
| 168 | /* ombrage css3*/ |
||
| 169 | |||
| 170 | -moz-box-shadow: 0px 0px 6px #000; |
||
| 171 | -webkit-box-shadow: 0px 0px 6px #000; |
||
| 172 | box-shadow: 0px 0px 6px #000; |
||
| 173 | } |
||
| 174 | |||
| 359 | richard | 175 | /* style de la page accès contrôlé*/ |
| 176 | |||
| 177 | #cadre_titre{ |
||
| 178 | POSITION: relative; |
||
| 179 | WIDTH: 730px; |
||
| 180 | HEIGHT: 98px; |
||
| 181 | MARGIN-TOP: 40px; |
||
| 182 | MARGIN-LEFT: auto; |
||
| 183 | MARGIN-RIGHT: auto; |
||
| 184 | Z-INDEX: 2; |
||
| 360 | richard | 185 | |
| 186 | /* ombrage css3 */ |
||
| 187 | |||
| 188 | -moz-box-shadow: 1px 4px 10px #000; |
||
| 189 | -webkit-box-shadow: 1px 4px 10px #000; |
||
| 190 | box-shadow: 1px 4px 10px #000; |
||
| 359 | richard | 191 | } |
| 192 | #cadre_titre .titre_controle { |
||
| 193 | BACKGROUND-IMAGE: url(/images/fond-bandeau.png); |
||
| 194 | BACKGROUND-REPEAT: repeat-x; |
||
| 195 | } |
||
| 196 | #cadre_titre .titre_refus { |
||
| 197 | BACKGROUND-IMAGE: url(/images/fond-bandeau-rouge.png); |
||
| 198 | BACKGROUND-REPEAT: repeat-x; |
||
| 199 | } |
||
| 200 | #boite_logo{ |
||
| 201 | POSITION: absolute; |
||
| 202 | TOP: -30px; |
||
| 203 | LEFT: -30px; |
||
| 204 | WIDTH: 150px; |
||
| 205 | HEIGHT: 150px; |
||
| 206 | Z-INDEX: 2; |
||
| 207 | } |
||
| 208 | #acces_controle { |
||
| 209 | TEXT-ALIGN: center; |
||
| 210 | FONT-SIZE: 50px; |
||
| 211 | PADDING-TOP: 20px; |
||
| 212 | PADDING-BOTTOM: 20px; |
||
| 213 | MARGIN: 0px; |
||
| 214 | } |
||
| 215 | #logo_acces { |
||
| 216 | POSITION: relative; |
||
| 217 | TOP: 0px; |
||
| 218 | LEFT: 0px; |
||
| 219 | } |
||
| 220 | #contenu_acces { |
||
| 221 | POSITION: relative; |
||
| 222 | WIDTH: 640px; |
||
| 223 | HEIGHT: 400px; |
||
| 224 | TOP: -20px; |
||
| 225 | PADDING-TOP: 0px; |
||
| 226 | MARGIN-LEFT: auto; |
||
| 227 | MARGIN-RIGHT: auto; |
||
| 228 | Z-INDEX: 1; |
||
| 360 | richard | 229 | |
| 230 | /* ombrage CSS3 */ |
||
| 231 | |||
| 232 | -moz-box-shadow: 1px 1px 10px #000; |
||
| 233 | -webkit-box-shadow: 1px 1px 10px #000; |
||
| 234 | box-shadow: 1px 1px 10px #000; |
||
| 359 | richard | 235 | } |
| 236 | #logo_acces IMG, #box_refuse IMG { |
||
| 237 | WIDTH: 95px; |
||
| 238 | HEIGHT: 95px; |
||
| 239 | } |
||
| 240 | |||
| 241 | /* Boite des liens*/ |
||
| 242 | |||
| 243 | #box_url { |
||
| 244 | POSITION: relative; |
||
| 245 | TOP: 35px; |
||
| 246 | TEXT-ALIGN: right; |
||
| 247 | FONT-SIZE: 14px; |
||
| 248 | MARGIN-RIGHT: 20px; |
||
| 249 | } |
||
| 250 | #box_bienvenue { |
||
| 251 | FONT-SIZE: 18px; |
||
| 252 | } |
||
| 253 | #cadre_titre SPAN { |
||
| 254 | POSITION: absolute; |
||
| 255 | TOP: 80px; |
||
| 256 | WIDTH: 540px; |
||
| 257 | LEFT: 100px; |
||
| 258 | FONT-SIZE: 14px; |
||
| 259 | COLOR: red; |
||
| 260 | TEXT-ALIGN: center; |
||
| 261 | } |
||
| 262 | #box_refuse { |
||
| 263 | FONT-SIZE: 16px; |
||
| 264 | MARGIN-LEFT: 130px; |
||
| 265 | MARGIN-RIGHT: 20px; |
||
| 266 | MARGIN-TOP: 40px; |
||
| 267 | WIDTH: 460px; |
||
| 268 | } |
||
| 269 | #box_refuse IMG { |
||
| 270 | POSITION: absolute; |
||
| 271 | TOP: -10px; |
||
| 272 | LEFT: -110px; |
||
| 273 | } |
||
| 274 | #box_refuse, #box_bienvenue { |
||
| 275 | POSITION: relative; |
||
| 276 | TOP: 55px; |
||
| 277 | } |
||
| 278 | #box_1 { |
||
| 279 | LEFT: 40px; |
||
| 280 | } |
||
| 281 | #box_2 { |
||
| 282 | LEFT: 350px; |
||
| 283 | } |
||
| 284 | #box_3 { |
||
| 285 | WIDTH: 575px; |
||
| 286 | LEFT: 40px; |
||
| 287 | BOTTOM: 20px; |
||
| 288 | } |
||
| 289 | #box_1 P, #box_2 P, #box_3 P { |
||
| 290 | MARGIN-LEFT: 80px; |
||
| 291 | MARGIN-RIGHT: 25px; |
||
| 360 | richard | 292 | MARGIN-TOP: 8px; |
| 359 | richard | 293 | FONT-SIZE: 10px; |
| 294 | } |
||
| 295 | #box_1 SPAN, #box_2 SPAN, #box_3 SPAN { |
||
| 296 | POSITION: relative; |
||
| 297 | MARGIN-LEFT: 75px; |
||
| 298 | MARGIN-RIGHT: 10px; |
||
| 299 | FONT-SIZE: 12px; |
||
| 360 | richard | 300 | TOP: 2px; |
| 359 | richard | 301 | } |
| 302 | .box_menu_courte, .box_menu_large { |
||
| 303 | POSITION: absolute; |
||
| 304 | HEIGHT: 80px; |
||
| 305 | BACKGROUND-IMAGE: url(/images/fond-bdd.png); |
||
| 306 | BACKGROUND-REPEAT: repeat-x; |
||
| 360 | richard | 307 | VERTICAL-ALIGN: bottom; |
| 359 | richard | 308 | TEXT-ALIGN: left; |
| 309 | BORDER: 2px #efefef solid; |
||
| 360 | richard | 310 | |
| 311 | /* ombrage CSS3 */ |
||
| 312 | -moz-box-shadow: 1px 1px 6px #666; |
||
| 313 | -webkit-box-shadow: 1px 1px 6px #666; |
||
| 314 | box-shadow: 1px 1px 6px #666; |
||
| 359 | richard | 315 | } |
| 316 | .box_menu_courte { |
||
| 317 | WIDTH: 265px; |
||
| 360 | richard | 318 | TOP: 150px; |
| 359 | richard | 319 | } |
| 320 | .box_menu_courte IMG, .box_menu_large IMG { |
||
| 321 | POSITION: absolute; |
||
| 322 | WIDTH: 100px; |
||
| 323 | HEIGHT: 100px; |
||
| 324 | TOP: -40px; |
||
| 325 | LEFT: -30px; |
||
| 326 | } |
||
| 327 | .box_menu_courte, .box_menu_large, #logon , #contenu_acces, #acces_controle, #cadre_titre { |
||
| 328 | /* Arrondi CSS3 Firefox*/ |
||
| 329 | -moz-border-radius: 10px; |
||
| 330 | /* Arrondi CSS3 Autres Nav*/ |
||
| 331 | border-radius: 10px; |
||
| 332 | } |
||
| 333 | #liens_redir { |
||
| 334 | POSITION: relative; |
||
| 335 | BOTTOM: -100px; |
||
| 336 | LEFT: 90px; |
||
| 337 | TEXT-ALIGN: center; |
||
| 338 | } |
||
| 339 | #liens_redir P A { |
||
| 340 | FONT-SIZE: 12px; |
||
| 341 | TEXT-ALIGN: center; |
||
| 342 | MARGIN: 15px; |
||
| 343 | } |