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
}