Subversion Repositories ALCASAR

Rev

Rev 2743 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log

Rev Author Line No. Line
1992 richard 1 
 
360 richard 2 
/*
1992 richard 3 
	CSS for ALCASAR interception page
509 richard 4 
	Auteur : Stéphane ERARD
360 richard 5 
	Licence : GNU GPL
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 
}
2136 richard 30 
#acces_controle, #box_url, #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 
 
1410 richard 42 
INPUT, #contenu_acces, #contenu_error, #logon, #auth_reussi {
509 richard 43 
	background-color: #ffffff;
360 richard 44 
}
45 
 
1992 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 {
1999 richard 58 
	background-image: url(/images/fond.png);
509 richard 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 */
2743 rexy 113 
/* pour desktop */
2747 rexy 114 
.mobile-only {
115 
	display: none;
354 richard 116 
}
2747 rexy 117 
#logon {
118 
	position: relative;
119 
	width: 620px;
120 
	top: 20px;
121 
/* ombrage css3*/
122 
	-moz-box-shadow: 0px 0px 12px #000;
123 
	-webkit-box-shadow: 0px 0px 12px #000;
124 
	box-shadow: 0px 0px 12px #000;
125 
}
126 
#boite-logon {
127 
	background-image: linear-gradient(#efefef, #d5d5d5);
128 
	padding: 10px;
129 
	width: 420px;
130 
	height: 189px;
131 
}
132 
#boite-logon TD {
133 
	padding-top: 10px;
134 
	padding-left: 30px;
135 
}
136 
#boite-info {
137 
	border: 0px;
138 
	margin-top: 25px;
139 
	width: 580px;
140 
	padding-top: 10px;
141 
}
142 
#username_input,
143 
#password_input {
144 
	align: left;
145 
}
146 
/* hide placeholders for desktops */
147 
::-webkit-input-placeholder {
148 
/* WebKit browsers */
149 
	color: transparent;
150 
}
151 
:-moz-placeholder {
152 
/* Mozilla Firefox 4 to 18 */
153 
	color: transparent;
154 
}
155 
::-moz-placeholder {
156 
/* Mozilla Firefox 19+ */
157 
	color: transparent;
158 
}
159 
:-ms-input-placeholder {
160 
/* Internet Explorer 10+ */
161 
	color: transparent;
162 
}
163 
input::placeholder {
164 
	color: transparent;
165 
}
166 
textarea::-webkit-input-placeholder {
167 
/* WebKit browsers */
168 
	color: transparent;
169 
}
170 
textarea:-moz-placeholder {
171 
/* Mozilla Firefox 4 to 18 */
172 
	color: transparent;
173 
}
174 
textarea::-moz-placeholder {
175 
/* Mozilla Firefox 19+ */
176 
	color: transparent;
177 
}
178 
textarea:-ms-input-placeholder {
179 
/* Internet Explorer 10+ */
180 
	color: transparent;
181 
}
182 
textarea::placeholder {
183 
	color: transparent;
184 
}
2743 rexy 185 
/* pour mobile */
186 
@media (max-width: 900px)
187 
{
188 
	.desktop-only {
189 
		display: none;
190 
	}
191 
 
192 
	#logon {
193 
		position: relative;
194 
		width: 100%;
195 
		top: 10px;
196 
	/* ombrage css3*/
2747 rexy 197 
		-moz-box-shadow: 0px 0px 12px #000;
2743 rexy 198 
		-webkit-box-shadow: 0px 0px 12px #000;
199 
		box-shadow: 0px 0px 12px #000;
200 
	}
201 
	#boite-logon {
202 
		background-image: linear-gradient(#efefef, #d5d5d5);
203 
		padding: 10px;
204 
		width: 90%;
205 
		height: 189px;
206 
	}
207 
	#boite-logon TD {
208 
		padding-top: 10px;
209 
	}
210 
	input[type="text"]
211 
	{
212 
	    font-size:30px;
2747 rexy 213 
	    color: grey;
2743 rexy 214 
	}
215 
	input[type="password"]
216 
	{
217 
	    font-size:30px;
2747 rexy 218 
	    color: grey;
2743 rexy 219 
	}
220 
	#boite-logon INPUT {
221 
		border: #666666 1px solid;
222 
		padding: 2px;
223 
		font-family: arial;
224 
		height: 30px;
225 
	}
226 
	#authenticate-button {
227 
		font-size: 30px;
228 
	}
229 
	#boite-info {
230 
		border: 0px;
231 
		margin-top: 25px;
232 
		width: 580px;
233 
		padding-top: 10px;
234 
	}
2747 rexy 235 
	#username_input,
236 
	#password_input {
237 
		align: center;
238 
	}
239 
 
240 
	/* Placeholders */
241 
	::-webkit-input-placeholder {
242 
	/* WebKit browsers */
243 
	 color: lightgrey;
244 
	}
245 
	:-moz-placeholder {
246 
	/* Mozilla Firefox 4 to 18 */
247 
		color: lightgrey;
248 
	}
249 
	::-moz-placeholder {
250 
	/* Mozilla Firefox 19+ */
251 
		color: lightgrey;
252 
	}
253 
	:-ms-input-placeholder {
254 
	/* Internet Explorer 10+ */
255 
		color: lightgrey;
256 
	}
257 
	input::placeholder {
258 
		color: lightgrey;
259 
	}
260 
	textarea::-webkit-input-placeholder {
261 
	/* WebKit browsers */
262 
		color: lightgrey;
263 
	}
264 
	textarea:-moz-placeholder {
265 
	/* Mozilla Firefox 4 to 18 */
266 
		color: lightgrey;
267 
	}
268 
	textarea::-moz-placeholder {
269 
	/* Mozilla Firefox 19+ */
270 
		color: lightgrey;
271 
	}
272 
	textarea:-ms-input-placeholder {
273 
	/* Internet Explorer 10+ */
274 
		color: lightgrey;
275 
	}
276 
	textarea::placeholder {
277 
		color: lightgrey;
278 
	}
354 richard 279 
}
2743 rexy 280 
/*boite de dialogue de deconnection*/
281 
/* pour desktop */
2747 rexy 282 
.mobile-only {
283 
	display: none;
284 
}
285 
#contenu_acces {
286 
	position: relative;
287 
	width: 640px;
288 
	height: 400px;
289 
	top: -20px;
290 
	padding-top: 0px;
291 
	margin-left: auto;
292 
	margin-right: auto;
293 
	z-index: 1;
2743 rexy 294 
 
2747 rexy 295 
/* ombrage CSS3 */
2743 rexy 296 
 
2747 rexy 297 
	-moz-box-shadow: 1px 1px 10px #000;
298 
	-webkit-box-shadow: 1px 1px 10px #000;
299 
	box-shadow: 1px 1px 10px #000;
300 
}
301 
#cadre_titre{
302 
	position: relative;
303 
	width: 730px;
304 
	height: 98px;
305 
	margin-top: 40px;
306 
	margin-left: auto;
307 
	margin-right: auto;
308 
	z-index: 2;
2743 rexy 309 
 
2747 rexy 310 
/* ombrage css3 */
2743 rexy 311 
 
2747 rexy 312 
	-moz-box-shadow: 1px 4px 10px #000;
313 
	-webkit-box-shadow: 1px 4px 10px #000;
314 
	box-shadow: 1px 4px 10px #000;
354 richard 315 
}
2747 rexy 316 
#boite_logo{
317 
	position: absolute;
318 
	top: -30px;
319 
	left: -50px;
320 
	width: 150px;
321 
	height: 150px;
322 
	z-index: 2;
323 
}
2743 rexy 324 
/* pour mobile */
325 
@media (max-width: 900px)
326 
{
327 
	.desktop-only {
328 
		display: none;
329 
	}
2747 rexy 330 
	.mobile-only {
331 
		display: inline;
332 
	}
2743 rexy 333 
	#contenu_acces {
334 
		position: relative;
335 
		width: 90%;
336 
		height: 400px;
337 
		top: -20px;
338 
		padding-top: 0px;
339 
		margin-left: auto;
340 
		margin-right: auto;
341 
		z-index: 1;
342 
 
343 
	/* ombrage CSS3 */
344 
 
2747 rexy 345 
		-moz-box-shadow: 1px 1px 10px #000;
2743 rexy 346 
		-webkit-box-shadow: 1px 1px 10px #000;
347 
		box-shadow: 1px 1px 10px #000;
348 
	}
349 
	#cadre_titre{
350 
		position: relative;
351 
		width: 100%;
352 
		height: 98px;
353 
		margin-top: 40px;
354 
		margin-left: auto;
355 
		margin-right: auto;
356 
		z-index: 2;
357 
 
358 
	/* ombrage css3 */
359 
 
2747 rexy 360 
		-moz-box-shadow: 1px 4px 10px #000;
2743 rexy 361 
		-webkit-box-shadow: 1px 4px 10px #000;
362 
		box-shadow: 1px 4px 10px #000;
363 
	}
364 
	#boite_logo{
365 
		position: absolute;
366 
		top: -30px;
367 
		left: -10px;
368 
		width: 150px;
369 
		height: 150px;
370 
		z-index: 2;
371 
	}
354 richard 372 
}
373 
 
374 
#auth_reussi {
509 richard 375 
	width: 450px;
376 
	margin-top: 12px;
377 
	padding-top: 5px;
378 
	padding-left: 10px;
379 
	padding-right: 10px;
380 
	padding-bottom: 0px;
354 richard 381 
}
382 
.text_auth {
509 richard 383 
	font-size: 20px;
354 richard 384 
}
385 
.lien_deco {
509 richard 386 
	text-align: center;
387 
	font-size: 18px;
388 
	margin-bottom: 15px;
354 richard 389 
}
390 
.log_out {
509 richard 391 
	font-size: 24px;
392 
	text-align: center;
393 
	margin-top: 30px;
354 richard 394 
}
360 richard 395 
#boite-logon, #auth_reussi, #logon {
509 richard 396 
	border: 1px #efefef solid;
360 richard 397 
 
398 
/* ombrage css3*/
399 
 
2747 rexy 400 
	-moz-box-shadow: 0px 0px 6px #000;
360 richard 401 
	-webkit-box-shadow: 0px 0px 6px #000;
402 
	box-shadow: 0px 0px 6px #000;
403 
}
509 richard 404 
#liens_redir {
405 
	position: relative;
406 
	bottom: -100px;
407 
	left: 90px;
408 
	text-align: center;
409 
}
410 
#liens_redir P A {
411 
	font-size: 12px;
412 
	text-align: center;
413 
	margin: 15px;
414 
}
415 
/* style de la page accès controlé*/
360 richard 416 
 
359 richard 417 
#cadre_titre .titre_controle {
1999 richard 418 
	background-image: url(/images/fond-bandeau.png);
509 richard 419 
	background-repeat: repeat-x;
359 richard 420 
}
421 
#cadre_titre .titre_refus  {
1999 richard 422 
	background-image: url(/images/fond-bandeau-rouge.png);
509 richard 423 
	background-repeat: repeat-x;
359 richard 424 
}
425 
#acces_controle {
509 richard 426 
	text-align: center;
427 
	font-size: 40px;
428 
	padding-top: 25px;
429 
	padding-bottom: 27px;
430 
	margin: 0px;
359 richard 431 
}
432 
#logo_acces {
509 richard 433 
	position: relative;
434 
	top: 0px;
435 
	left: 0px;
359 richard 436 
}
1410 richard 437 
#contenu_error {
438 
	position: relative;
439 
	width: 640px;
440 
	height: auto;
441 
	top: -20px;
442 
	padding-top: 40px;
443 
	padding-bottom: 40px;
444 
	padding-left: 40px;
445 
	padding-right: 40px;
446 
	margin-left: auto;
447 
	margin-right: auto;
448 
	z-index: 1;
449 
 
450 
/* ombrage CSS3 */
451 
 
2747 rexy 452 
	-moz-box-shadow: 1px 1px 10px #000;
1410 richard 453 
	-webkit-box-shadow: 1px 1px 10px #000;
454 
	box-shadow: 1px 1px 10px #000;
455 
}
456 
 
359 richard 457 
#logo_acces IMG, #box_refuse IMG {
509 richard 458 
	width: 95px;
459 
	height: 95px;
359 richard 460 
}
461 
 
462 
/* Boite des liens*/
463 
 
464 
#box_url {
509 richard 465 
	position: relative;
466 
	top: 35px;
467 
	text-align: right;
468 
	font-size: 14px;
469 
	margin-right: 20px;
359 richard 470 
}
471 
#cadre_titre SPAN {
509 richard 472 
	position: absolute;
473 
	top: 70px;
474 
	width: 510px;
475 
	left: 110px;
476 
	font-size: 14px;
477 
	color: red;
478 
	text-align: center;
479 
	border: 2px red solid;
480 
	padding: 2px;
481 
	background-color: white;
359 richard 482 
}
363 richard 483 
#contenu_acces SPAN {
509 richard 484 
	position: relative;
485 
	bottom: -150px;
486 
	font-family: "courier new";
363 richard 487 
}
1410 richard 488 
#contenu_error SPAN {
489 
	position: relative;
490 
	bottom: -150px;
491 
	font-family: "courier new";
492 
}
359 richard 493 
#box_refuse {
509 richard 494 
	font-size: 16px;
495 
	margin-left: 130px;
496 
	margin-right: 20px;
497 
	margin-top: 40px;
498 
	width: 460px;
359 richard 499 
}
500 
#box_refuse IMG {
509 richard 501 
	position: absolute;
502 
	top: -10px;
503 
	left: -110px;
359 richard 504 
}
2136 richard 505 
#box_refuse {
509 richard 506 
	position: relative;
507 
	top: 55px;
359 richard 508 
}
509 richard 509 
 
510 
.box_menu IMG {
511 
	position: absolute;
512 
	width: 70px;
513 
	height: 70px;
514 
	top: -25px;
359 richard 515 
}
1410 richard 516 
.box_menu, #logon , #contenu_acces, #contenu_error, #acces_controle, #cadre_titre, #box_info{
509 richard 517 
/* Arrondi CSS3 Firefox*/
518 
	-moz-border-radius: 10px;
519 
/* Arrondi CSS3 Autres Nav*/
520 
	border-radius: 10px;
359 richard 521 
}
509 richard 522 
.box_menu {
523 
	position: absolute;
524 
	height: 35px;
525 
	width: 310px;
1999 richard 526 
	background-image: url(/images/fond-bdd.png);
509 richard 527 
	background-repeat: repeat-x;
360 richard 528 
 
529 
/* ombrage CSS3 */
2747 rexy 530 
	-moz-box-shadow: 1px 1px 6px #666;
360 richard 531 
	-webkit-box-shadow: 1px 1px 6px #666;
532 
	box-shadow: 1px 1px 6px #666;
359 richard 533 
}
509 richard 534 
.div-cache {
535 
	visibility: hidden;
536 
	position: absolute;
537 
	top: -1000px;
359 richard 538 
}
509 richard 539 
#box_conn {
540 
	top: 120px;
359 richard 541 
}
509 richard 542 
#box_certif {
543 
	top: 190px;
359 richard 544 
}
509 richard 545 
#box_mdp {
546 
	top: 260px;
359 richard 547 
}
509 richard 548 
#box_acc {
549 
	top: 330px;
359 richard 550 
}
509 richard 551 
#box_certif, #box_acc {
552 
	left: 60px;
553 
	text-align: right;
554 
}
555 
#box_conn, #box_mdp {
556 
	left: 20px;
557 
	text-align: left;
558 
}
559 
#box_conn IMG, #box_mdp IMG {
560 
	left: 5px;
561 
}
562 
#box_certif IMG, #box_acc IMG {
563 
	right: 5px;
564 
}
565 
#box_conn SPAN, #box_certif SPAN, #box_mdp SPAN, #box_acc SPAN {
566 
	position: relative;
567 
	font-size: 12px;
568 
	font-weight: bold;
569 
	top: 10px;
570 
}
571 
#box_conn SPAN, #box_mdp SPAN {
572 
	margin-left: 80px;
573 
}
574 
#box_certif SPAN, #box_acc SPAN {
575 
	margin-right: 80px;
576 
}
577 
 
578 
/*Animation visuel des cadres liens (Gecko et ie9)*/
579 
#box_conn:hover, #box_certif:hover, #box_mdp:hover, #box_acc:hover  {
580 
/*	cursor: pointer;*/
1999 richard 581 
	background-image: url(/images/fond-bdd_rouge.png);
509 richard 582 
	background-repeat: repeat-x;
583 
 
584 
/* ombrage CSS3 */
2747 rexy 585 
	-moz-box-shadow: 0px 0px 0px #fff;
509 richard 586 
	-webkit-box-shadow: 0px 0px 0px #fff;
587 
	box-shadow: 0px 0px 0px #fff;
588 
}
2612 tom.houday 589 
#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 {
509 richard 590 
	color: red;
2612 tom.houday 591 
}
509 richard 592 
 
2612 tom.houday 593 
/* overwrite default rules for disabled menu boxes */
594 
.box_menu.box-menu-disabled {
595 
	opacity: .2;
509 richard 596 
}
2612 tom.houday 597 
.box_menu.box-menu-disabled:hover a {
598 
	color: #000000 !important;
599 
	cursor: not-allowed !important;
600 
}
601 
.box_menu.box-menu-disabled:hover {
602 
	cursor: not-allowed !important;
603 
	background-image: url(/images/fond-bdd.png) !important;
604 
	background-repeat: repeat-x !important;
509 richard 605 
 
2612 tom.houday 606 
/* ombrage CSS3 */
2747 rexy 607 
	-moz-box-shadow: 1px 1px 6px #666 !important;
2612 tom.houday 608 
	-webkit-box-shadow: 1px 1px 6px #666 !important;
609 
	box-shadow: 1px 1px 6px #666 !important;
610 
}
611 
 
509 richard 612 
/*Mise en page de la bulle d'info (coté droit)*/
613 
#box_info H2 {
614 
	font-size: 14px;
615 
	margin: 10px auto;
616 
}
617 
#box_info P {
618 
	font-size: 11px;
619 
	margin: 10px;
620 
}
621 
#box_info IMG {
622 
	position: absolute;
623 
	bottom: -60px;
624 
	right: 10px;
625 
	height: 120px;
626 
}
627 
#box_info {
628 
	position: absolute;
629 
	top: 118px;
630 
	right: 20px;
631 
	width: 230px;
632 
	height: 250px;
633 
	background-color: #efefef;
634 
 
635 
/* ombrage CSS3 */
2747 rexy 636 
	-moz-box-shadow: 1px 1px 6px #666;
509 richard 637 
	-webkit-box-shadow: 1px 1px 6px #666;
638 
	box-shadow: 1px 1px 6px #666;
639 
}
640 
#box_info :link, #box_info :visited  {
641 
	text-decoration: none;
642 
}
566 stephane 643 
#box_info UL{
644 
	text-align: left;
645 
	padding : 0 0 0 15px;
646 
	margin : 10px;
647 
}
648 
#box_info LI{
649 
	text-align: left;
650 
	font-size: 10px;
651 
	list-style-type : disc;
652 
	padding : 0 0 0 0;
913 richard 653 
}
654 
#authorized_domain{
655 
	height: 40px;
656 
	width: 450px;
657 
	text-align: left;
658 
	display: block;
659 
/*	border: 1px solid red;*/
660 
	margin-right: 50px;
661 
}
662 
#authorized_domain LI{
663 
	text-align: center;
664 
	list-style-type : none;
665 
	margin-right : 10px;
666 
	display: block;
667 
	float: left;
1410 richard 668 
}
1452 richard 669 
 
670 
#corner {
671 
	position: fixed;
672 
	bottom: 0;
673 
	right: 0;
674 
 
675 
}
676 
 
677 
#adm {
678 
	display: block;
679 
	width: 100px;
680 
	height: 100px;
681 
}
682 
.corn IMG:hover {
683 
	position: absolute;
684 
	width: 100px;
685 
	height: 100px;
686 
	top: 0px;
687 
	left: 0px;
688 
}
689 
 
690 
.corn IMG {
691 
	position: absolute;
692 
	width: 50px;
693 
	height: 50px;
694 
	top: 75px;
695 
	left: 75px;
2614 tom.houday 696 
	transition: .2s;
1989 raphael.pi 697 
}