Rev 509 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 360 | richard | 1 | /* |
| 509 | richard | 2 | Feuille de style pour les pages d'interceptions coté utilisateurs d'ALCASAR |
| 3 | Auteur : Stéphane ERARD |
||
| 360 | richard | 4 | Licence : GNU GPL |
| 5 | |||
| 6 | */ |
||
| 7 | |||
| 8 | |||
| 509 | richard | 9 | /* règles générales */ |
| 354 | richard | 10 | |
| 360 | richard | 11 | /* Couleurs de polices */ |
| 12 | :link, :visited, :hover:link, :hover:visited, H2, #box_url, #box_refuse { |
||
| 509 | richard | 13 | color: #000000; |
| 354 | richard | 14 | } |
| 360 | richard | 15 | BODY, H, #boite-logon { |
| 509 | richard | 16 | color: #666666; |
| 360 | richard | 17 | } |
| 18 | #acces_controle, .log_out { |
||
| 509 | richard | 19 | color: white; |
| 360 | richard | 20 | } |
| 354 | richard | 21 | |
| 360 | richard | 22 | /* Style de police */ |
| 23 | |||
| 24 | BODY, :link, :visited, :hover:link, :hover:visited { |
||
| 509 | richard | 25 | font-family: "DejaVu Sans"; |
| 360 | richard | 26 | } |
| 27 | INPUT, #box_url { |
||
| 509 | richard | 28 | font-family: arial; |
| 360 | richard | 29 | } |
| 30 | #acces_controle, #box_url, #box_bienvenue, #cadre_titre SPAN { |
||
| 509 | richard | 31 | font-weight: bold; |
| 360 | richard | 32 | } |
| 509 | richard | 33 | .box_menu :link , .box_menu :visited, .box_menu :hover:link, .box_menu :hover:visited { |
| 34 | text-decoration: none; |
||
| 35 | } |
||
| 360 | richard | 36 | /*Couleurs de fond */ |
| 37 | |||
| 38 | BODY { |
||
| 509 | richard | 39 | background-color: #666666; |
| 360 | richard | 40 | } |
| 41 | |||
| 42 | INPUT, #contenu_acces, #logon, #auth_reussi { |
||
| 509 | richard | 43 | background-color: #ffffff; |
| 360 | richard | 44 | } |
| 45 | |||
| 509 | richard | 46 | /* R�gles des balises HTML */ |
| 360 | richard | 47 | |
| 354 | richard | 48 | H1, H2, #aide-certif { |
| 509 | richard | 49 | text-align: center; |
| 354 | richard | 50 | padding: 0px; |
| 51 | margin: 3px; |
||
| 52 | } |
||
| 53 | P, UL, LI{ |
||
| 509 | richard | 54 | text-align: justify; |
| 354 | richard | 55 | } |
| 56 | |||
| 57 | BODY { |
||
| 509 | richard | 58 | background-image: url(../images/fond.png); |
| 59 | background-repeat: repeat-x; |
||
| 60 | text-align: center; |
||
| 61 | font-size: 12px; |
||
| 62 | margin: 0px; |
||
| 354 | richard | 63 | } |
| 64 | H1 { |
||
| 509 | richard | 65 | font-size: 55px; |
| 354 | richard | 66 | } |
| 67 | H2 { |
||
| 509 | richard | 68 | font-size: 30px; |
| 354 | richard | 69 | } |
| 70 | H6, #aide-certif{ |
||
| 509 | richard | 71 | font-size: 100%; |
| 354 | richard | 72 | } |
| 73 | UL { |
||
| 509 | richard | 74 | margin: 5px; |
| 75 | padding-bottom: 5px; |
||
| 76 | padding-left: 10px; |
||
| 77 | padding-right: 115px; |
||
| 78 | padding-top: 5px; |
||
| 354 | richard | 79 | } |
| 80 | LI { |
||
| 509 | richard | 81 | list-style-type: square; |
| 82 | padding-top: 2px; |
||
| 354 | richard | 83 | } |
| 84 | TABLE { |
||
| 509 | richard | 85 | font-size: 90%; |
| 354 | richard | 86 | } |
| 87 | IMG { |
||
| 509 | richard | 88 | height: 150px; |
| 354 | richard | 89 | } |
| 90 | INPUT { |
||
| 509 | richard | 91 | border: #666666 1px solid; |
| 92 | padding: 2px; |
||
| 93 | font-family: arial; |
||
| 94 | height: 22px; |
||
| 354 | richard | 95 | } |
| 96 | |||
| 509 | richard | 97 | /* taille et position des logos */ |
| 354 | richard | 98 | #logo-alcasar { |
| 509 | richard | 99 | position: absolute; |
| 100 | bottom: 25px; |
||
| 101 | right: 5px; |
||
| 102 | height: 130px; |
||
| 354 | richard | 103 | } |
| 104 | #logo-organ { |
||
| 509 | richard | 105 | position: relative; |
| 106 | top: 0px; |
||
| 107 | right: -10px; |
||
| 108 | max-width: 150px; |
||
| 109 | max-height: 150px; |
||
| 354 | richard | 110 | } |
| 111 | |||
| 509 | richard | 112 | /* placement et proportion de la boite de saisie et de l'aide */ |
| 354 | richard | 113 | #logon { |
| 509 | richard | 114 | position: relative; |
| 115 | width: 620px; |
||
| 116 | top: 20px; |
||
| 117 | /* ombrage css3*/ |
||
| 360 | richard | 118 | -moz-box-shadow: 0px 0px 12px #000; |
| 119 | -webkit-box-shadow: 0px 0px 12px #000; |
||
| 120 | box-shadow: 0px 0px 12px #000; |
||
| 354 | richard | 121 | } |
| 122 | #boite-logon { |
||
| 509 | richard | 123 | background-image: url(../images/fond-bdd_grand.png); |
| 124 | background-repeat: repeat-x; |
||
| 125 | padding: 10px; |
||
| 126 | width: 420px; |
||
| 127 | height: 189px; |
||
| 354 | richard | 128 | } |
| 129 | #boite-logon TD { |
||
| 509 | richard | 130 | padding-top: 10px; |
| 354 | richard | 131 | } |
| 132 | #boite-info { |
||
| 509 | richard | 133 | border: 0px; |
| 134 | margin-top: 25px; |
||
| 135 | width: 580px; |
||
| 136 | padding-top: 10px; |
||
| 354 | richard | 137 | } |
| 509 | richard | 138 | /*boite de dialogue de deconnection*/ |
| 354 | richard | 139 | |
| 140 | #auth_reussi { |
||
| 509 | richard | 141 | width: 450px; |
| 142 | margin-top: 12px; |
||
| 143 | padding-top: 5px; |
||
| 144 | padding-left: 10px; |
||
| 145 | padding-right: 10px; |
||
| 146 | padding-bottom: 0px; |
||
| 354 | richard | 147 | } |
| 148 | .text_auth { |
||
| 509 | richard | 149 | font-size: 20px; |
| 354 | richard | 150 | } |
| 151 | .lien_deco { |
||
| 509 | richard | 152 | text-align: center; |
| 153 | font-size: 18px; |
||
| 154 | margin-bottom: 15px; |
||
| 354 | richard | 155 | } |
| 156 | .log_out { |
||
| 509 | richard | 157 | font-size: 24px; |
| 158 | text-align: center; |
||
| 159 | margin-top: 30px; |
||
| 354 | richard | 160 | } |
| 360 | richard | 161 | #boite-logon, #auth_reussi, #logon { |
| 509 | richard | 162 | border: 1px #efefef solid; |
| 360 | richard | 163 | |
| 164 | /* ombrage css3*/ |
||
| 165 | |||
| 166 | -moz-box-shadow: 0px 0px 6px #000; |
||
| 167 | -webkit-box-shadow: 0px 0px 6px #000; |
||
| 168 | box-shadow: 0px 0px 6px #000; |
||
| 169 | } |
||
| 509 | richard | 170 | #liens_redir { |
| 171 | position: relative; |
||
| 172 | bottom: -100px; |
||
| 173 | left: 90px; |
||
| 174 | text-align: center; |
||
| 175 | } |
||
| 176 | #liens_redir P A { |
||
| 177 | font-size: 12px; |
||
| 178 | text-align: center; |
||
| 179 | margin: 15px; |
||
| 180 | } |
||
| 181 | /* style de la page accès controlé*/ |
||
| 360 | richard | 182 | |
| 359 | richard | 183 | #cadre_titre{ |
| 509 | richard | 184 | position: relative; |
| 185 | width: 730px; |
||
| 186 | height: 98px; |
||
| 187 | margin-top: 40px; |
||
| 188 | margin-left: auto; |
||
| 189 | margin-right: auto; |
||
| 190 | z-index: 2; |
||
| 360 | richard | 191 | |
| 192 | /* ombrage css3 */ |
||
| 193 | |||
| 194 | -moz-box-shadow: 1px 4px 10px #000; |
||
| 195 | -webkit-box-shadow: 1px 4px 10px #000; |
||
| 196 | box-shadow: 1px 4px 10px #000; |
||
| 359 | richard | 197 | } |
| 198 | #cadre_titre .titre_controle { |
||
| 509 | richard | 199 | background-image: url(../images/fond-bandeau.png); |
| 200 | background-repeat: repeat-x; |
||
| 359 | richard | 201 | } |
| 202 | #cadre_titre .titre_refus { |
||
| 509 | richard | 203 | background-image: url(../images/fond-bandeau-rouge.png); |
| 204 | background-repeat: repeat-x; |
||
| 359 | richard | 205 | } |
| 206 | #boite_logo{ |
||
| 509 | richard | 207 | position: absolute; |
| 208 | top: -30px; |
||
| 209 | left: -50px; |
||
| 210 | width: 150px; |
||
| 211 | height: 150px; |
||
| 212 | z-index: 2; |
||
| 359 | richard | 213 | } |
| 214 | #acces_controle { |
||
| 509 | richard | 215 | text-align: center; |
| 216 | font-size: 40px; |
||
| 217 | padding-top: 25px; |
||
| 218 | padding-bottom: 27px; |
||
| 219 | margin: 0px; |
||
| 359 | richard | 220 | } |
| 221 | #logo_acces { |
||
| 509 | richard | 222 | position: relative; |
| 223 | top: 0px; |
||
| 224 | left: 0px; |
||
| 359 | richard | 225 | } |
| 226 | #contenu_acces { |
||
| 509 | richard | 227 | position: relative; |
| 228 | width: 640px; |
||
| 229 | height: 400px; |
||
| 230 | top: -20px; |
||
| 231 | padding-top: 0px; |
||
| 232 | margin-left: auto; |
||
| 233 | margin-right: auto; |
||
| 234 | z-index: 1; |
||
| 360 | richard | 235 | |
| 236 | /* ombrage CSS3 */ |
||
| 237 | |||
| 238 | -moz-box-shadow: 1px 1px 10px #000; |
||
| 239 | -webkit-box-shadow: 1px 1px 10px #000; |
||
| 240 | box-shadow: 1px 1px 10px #000; |
||
| 359 | richard | 241 | } |
| 242 | #logo_acces IMG, #box_refuse IMG { |
||
| 509 | richard | 243 | width: 95px; |
| 244 | height: 95px; |
||
| 359 | richard | 245 | } |
| 246 | |||
| 247 | /* Boite des liens*/ |
||
| 248 | |||
| 249 | #box_url { |
||
| 509 | richard | 250 | position: relative; |
| 251 | top: 35px; |
||
| 252 | text-align: right; |
||
| 253 | font-size: 14px; |
||
| 254 | margin-right: 20px; |
||
| 359 | richard | 255 | } |
| 256 | #box_bienvenue { |
||
| 509 | richard | 257 | font-size: 18px; |
| 359 | richard | 258 | } |
| 259 | #cadre_titre SPAN { |
||
| 509 | richard | 260 | position: absolute; |
| 261 | top: 70px; |
||
| 262 | width: 510px; |
||
| 263 | left: 110px; |
||
| 264 | font-size: 14px; |
||
| 265 | color: red; |
||
| 266 | text-align: center; |
||
| 267 | border: 2px red solid; |
||
| 268 | padding: 2px; |
||
| 269 | background-color: white; |
||
| 359 | richard | 270 | } |
| 363 | richard | 271 | #contenu_acces SPAN { |
| 509 | richard | 272 | position: relative; |
| 273 | bottom: -150px; |
||
| 274 | font-family: "courier new"; |
||
| 363 | richard | 275 | } |
| 359 | richard | 276 | #box_refuse { |
| 509 | richard | 277 | font-size: 16px; |
| 278 | margin-left: 130px; |
||
| 279 | margin-right: 20px; |
||
| 280 | margin-top: 40px; |
||
| 281 | width: 460px; |
||
| 359 | richard | 282 | } |
| 283 | #box_refuse IMG { |
||
| 509 | richard | 284 | position: absolute; |
| 285 | top: -10px; |
||
| 286 | left: -110px; |
||
| 359 | richard | 287 | } |
| 288 | #box_refuse, #box_bienvenue { |
||
| 509 | richard | 289 | position: relative; |
| 290 | top: 55px; |
||
| 359 | richard | 291 | } |
| 509 | richard | 292 | |
| 293 | .box_menu IMG { |
||
| 294 | position: absolute; |
||
| 295 | width: 70px; |
||
| 296 | height: 70px; |
||
| 297 | top: -25px; |
||
| 359 | richard | 298 | } |
| 509 | richard | 299 | .box_menu, #logon , #contenu_acces, #acces_controle, #cadre_titre, #box_info{ |
| 300 | /* Arrondi CSS3 Firefox*/ |
||
| 301 | -moz-border-radius: 10px; |
||
| 302 | /* Arrondi CSS3 Autres Nav*/ |
||
| 303 | border-radius: 10px; |
||
| 359 | richard | 304 | } |
| 509 | richard | 305 | .box_menu { |
| 306 | position: absolute; |
||
| 307 | height: 35px; |
||
| 308 | width: 310px; |
||
| 309 | background-image: url(../images/fond-bdd.png); |
||
| 310 | background-repeat: repeat-x; |
||
| 360 | richard | 311 | |
| 312 | /* ombrage CSS3 */ |
||
| 313 | -moz-box-shadow: 1px 1px 6px #666; |
||
| 314 | -webkit-box-shadow: 1px 1px 6px #666; |
||
| 315 | box-shadow: 1px 1px 6px #666; |
||
| 359 | richard | 316 | } |
| 509 | richard | 317 | .div-cache { |
| 318 | visibility: hidden; |
||
| 319 | position: absolute; |
||
| 320 | top: -1000px; |
||
| 359 | richard | 321 | } |
| 509 | richard | 322 | #box_conn { |
| 323 | top: 120px; |
||
| 359 | richard | 324 | } |
| 509 | richard | 325 | #box_certif { |
| 326 | top: 190px; |
||
| 359 | richard | 327 | } |
| 509 | richard | 328 | #box_mdp { |
| 329 | top: 260px; |
||
| 359 | richard | 330 | } |
| 509 | richard | 331 | #box_acc { |
| 332 | top: 330px; |
||
| 359 | richard | 333 | } |
| 509 | richard | 334 | #box_certif, #box_acc { |
| 335 | left: 60px; |
||
| 336 | text-align: right; |
||
| 337 | } |
||
| 338 | #box_conn, #box_mdp { |
||
| 339 | left: 20px; |
||
| 340 | text-align: left; |
||
| 341 | } |
||
| 342 | #box_conn IMG, #box_mdp IMG { |
||
| 343 | left: 5px; |
||
| 344 | } |
||
| 345 | #box_certif IMG, #box_acc IMG { |
||
| 346 | right: 5px; |
||
| 347 | } |
||
| 348 | #box_conn SPAN, #box_certif SPAN, #box_mdp SPAN, #box_acc SPAN { |
||
| 349 | position: relative; |
||
| 350 | font-size: 12px; |
||
| 351 | font-weight: bold; |
||
| 352 | top: 10px; |
||
| 353 | } |
||
| 354 | #box_conn SPAN, #box_mdp SPAN { |
||
| 355 | margin-left: 80px; |
||
| 356 | } |
||
| 357 | #box_certif SPAN, #box_acc SPAN { |
||
| 358 | margin-right: 80px; |
||
| 359 | } |
||
| 360 | |||
| 361 | /*Animation visuel des cadres liens (Gecko et ie9)*/ |
||
| 362 | #box_conn:hover, #box_certif:hover, #box_mdp:hover, #box_acc:hover { |
||
| 363 | /* cursor: pointer;*/ |
||
| 364 | background-image: url(../images/fond-bdd_rouge.png); |
||
| 365 | background-repeat: repeat-x; |
||
| 366 | |||
| 367 | /* ombrage CSS3 */ |
||
| 368 | -moz-box-shadow: 0px 0px 0px #fff; |
||
| 369 | -webkit-box-shadow: 0px 0px 0px #fff; |
||
| 370 | box-shadow: 0px 0px 0px #fff; |
||
| 371 | } |
||
| 372 | #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 { |
||
| 373 | color: red; |
||
| 374 | |||
| 375 | } |
||
| 376 | |||
| 377 | /*Mise en page de la bulle d'info (coté droit)*/ |
||
| 378 | #box_info H2 { |
||
| 379 | font-size: 14px; |
||
| 380 | margin: 10px auto; |
||
| 381 | } |
||
| 382 | #box_info P { |
||
| 383 | font-size: 11px; |
||
| 384 | margin: 10px; |
||
| 385 | } |
||
| 386 | #box_info IMG { |
||
| 387 | position: absolute; |
||
| 388 | bottom: -60px; |
||
| 389 | right: 10px; |
||
| 390 | height: 120px; |
||
| 391 | } |
||
| 392 | #box_info { |
||
| 393 | position: absolute; |
||
| 394 | top: 118px; |
||
| 395 | right: 20px; |
||
| 396 | width: 230px; |
||
| 397 | height: 250px; |
||
| 398 | background-color: #efefef; |
||
| 399 | |||
| 400 | /* ombrage CSS3 */ |
||
| 401 | -moz-box-shadow: 1px 1px 6px #666; |
||
| 402 | -webkit-box-shadow: 1px 1px 6px #666; |
||
| 403 | box-shadow: 1px 1px 6px #666; |
||
| 404 | } |
||
| 405 | #box_info :link, #box_info :visited { |
||
| 406 | text-decoration: none; |
||
| 407 | } |
||
| 566 | stephane | 408 | #box_info UL{ |
| 409 | text-align: left; |
||
| 410 | padding : 0 0 0 15px; |
||
| 411 | margin : 10px; |
||
| 412 | } |
||
| 413 | #box_info LI{ |
||
| 414 | text-align: left; |
||
| 415 | font-size: 10px; |
||
| 416 | list-style-type : disc; |
||
| 417 | padding : 0 0 0 0; |
||
| 418 | } |