Subversion Repositories ALCASAR

Rev

Details | Last modification | View Log

Rev Author Line No. Line
2809 rexy 1
 
2
/* 	
3
	CSS for ALCASAR interception page 
4
	Auteur : Stéphane ERARD
5
	Licence : GNU GPL
6
*/
7
 
8
 
9
/* règles générales */
10
 
11
/* Couleurs de polices */
12
:link, :visited, :hover:link, :hover:visited, H2, #box_url, #box_refuse {
13
	color: #000000;
14
}
15
BODY, H, #boite-logon {
16
	color: #666666;
17
}
18
#acces_controle, .log_out {
19
	color: white;
20
}
21
 
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, #cadre_titre SPAN {
31
	font-weight: bold;
32
}
33
.box_menu :link , .box_menu :visited, .box_menu :hover:link, .box_menu :hover:visited  {
34
	text-decoration: none;
35
}
36
/*Couleurs de fond */
37
 
38
BODY {
39
	background-color: #666666;
40
}
41
 
42
INPUT, #contenu_acces, #contenu_error, #logon, #auth_reussi {
43
	background-color: #ffffff;
44
}
45
 
46
/* Règles des balises HTML */
47
 
48
H1, H2, #aide-certif {
49
	text-align: center;	
50
	padding: 0px;
51
	margin: 3px;
52
}
53
P, UL, LI{
54
	text-align: justify;
55
}
56
 
57
BODY {
58
	background-image: url(/images/fond.png);
59
	background-repeat: repeat-x;
60
	text-align: center;
61
	font-size: 12px;
62
	margin: 0px;
63
}
64
H1 {
65
	font-size: 55px;
66
}
67
H2 {
68
	font-size: 30px;
69
}
70
H6, #aide-certif{
71
	font-size: 100%;
72
}
73
UL {
74
	margin: 5px;
75
	padding-bottom: 5px;
76
	padding-left: 10px;
77
	padding-right: 115px;
78
	padding-top: 5px;
79
}
80
LI {
81
	list-style-type: square;
82
	padding-top: 2px;
83
}
84
TABLE {
85
	font-size: 90%;
86
}
87
IMG {
88
	height: 150px;
89
}
90
INPUT {
91
	border: #666666 1px solid;
92
	padding: 2px;
93
	font-family: arial;
94
	height: 22px;
95
}
96
 
97
/* taille et position des logos */
98
#logo-alcasar {
99
	position: absolute;
100
	bottom: 25px;
101
	right: 5px;
102
	height: 130px;
103
}
104
#logo-organ {
105
	position: relative;
106
	top: 0px;
107
	right: -10px;
108
	max-width: 150px;
109
	max-height: 150px;
110
}
111
 
112
/* placement et proportion de la boite de saisie et de l'aide */
113
/* pour desktop */
114
.mobile-only {
115
	display: none;
116
}
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
}
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*/	
197
		-moz-box-shadow: 0px 0px 12px #000;
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;
213
	    color: grey;
214
	}
215
	input[type="password"]
216
	{
217
	    font-size:30px;
218
	    color: grey;
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
	}
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
	}
279
}
280
/*boite de dialogue de deconnection*/
281
/* pour desktop */
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;
294
 
295
/* ombrage CSS3 */
296
 
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;
309
 
310
/* ombrage css3 */
311
 
312
	-moz-box-shadow: 1px 4px 10px #000;
313
	-webkit-box-shadow: 1px 4px 10px #000;
314
	box-shadow: 1px 4px 10px #000;
315
}
316
#boite_logo{
317
	position: absolute;
318
	top: -30px;
319
	left: -50px;
320
	width: 150px;
321
	height: 150px;
322
	z-index: 2;
323
}
324
/* pour mobile */
325
@media (max-width: 900px)
326
{
327
	.desktop-only {
328
		display: none;
329
	}
330
	.mobile-only {
331
		display: inline;
332
	}
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
 
345
		-moz-box-shadow: 1px 1px 10px #000;
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
 
360
		-moz-box-shadow: 1px 4px 10px #000;
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
	}
372
}
373
 
374
#auth_reussi {
375
	width: 450px;
376
	margin-top: 12px;
377
	padding-top: 5px;
378
	padding-left: 10px;
379
	padding-right: 10px;
380
	padding-bottom: 0px;
381
}
382
.text_auth {
383
	font-size: 20px;
384
}
385
.lien_deco {
386
	text-align: center;
387
	font-size: 18px;
388
	margin-bottom: 15px;
389
}
390
.log_out {
391
	font-size: 24px;
392
	text-align: center;
393
	margin-top: 30px;
394
}
395
#boite-logon, #auth_reussi, #logon {
396
	border: 1px #efefef solid;
397
 
398
/* ombrage css3*/
399
 
400
	-moz-box-shadow: 0px 0px 6px #000;
401
	-webkit-box-shadow: 0px 0px 6px #000;
402
	box-shadow: 0px 0px 6px #000;
403
}
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é*/
416
 
417
#cadre_titre .titre_controle {
418
	background-image: url(/images/fond-bandeau.png);
419
	background-repeat: repeat-x;
420
}
421
#cadre_titre .titre_refus  {
422
	background-image: url(/images/fond-bandeau-rouge.png);
423
	background-repeat: repeat-x;
424
}
425
#acces_controle {
426
	text-align: center;
427
	font-size: 40px;
428
	padding-top: 25px;
429
	padding-bottom: 27px;
430
	margin: 0px;
431
}
432
#logo_acces {
433
	position: relative;
434
	top: 0px;
435
	left: 0px;
436
}
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
 
452
	-moz-box-shadow: 1px 1px 10px #000;
453
	-webkit-box-shadow: 1px 1px 10px #000;
454
	box-shadow: 1px 1px 10px #000;
455
}
456
 
457
#logo_acces IMG, #box_refuse IMG {
458
	width: 95px;
459
	height: 95px;
460
}
461
 
462
/* Boite des liens*/
463
 
464
#box_url {
465
	position: relative;
466
	top: 35px;
467
	text-align: right;
468
	font-size: 14px;
469
	margin-right: 20px;
470
}
471
#cadre_titre SPAN {
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;
482
}
483
#contenu_acces SPAN {
484
	position: relative;
485
	bottom: -150px;
486
	font-family: "courier new";
487
}
488
#contenu_error SPAN {
489
	position: relative;
490
	bottom: -150px;
491
	font-family: "courier new";
492
}
493
#box_refuse {
494
	font-size: 16px;
495
	margin-left: 130px;
496
	margin-right: 20px;
497
	margin-top: 40px;
498
	width: 460px;
499
}
500
#box_refuse IMG {
501
	position: absolute;
502
	top: -10px;
503
	left: -110px;
504
}
505
#box_refuse {
506
	position: relative;
507
	top: 55px;
508
}
509
 
510
.box_menu IMG {
511
	position: absolute;
512
	width: 70px;
513
	height: 70px;
514
	top: -25px;
515
}
516
.box_menu, #logon , #contenu_acces, #contenu_error, #acces_controle, #cadre_titre, #box_info{
517
/* Arrondi CSS3 Firefox*/
518
	-moz-border-radius: 10px;
519
/* Arrondi CSS3 Autres Nav*/
520
	border-radius: 10px;
521
}
522
.box_menu {
523
	position: absolute;
524
	height: 35px;
525
	width: 310px;
526
	background-image: url(/images/fond-bdd.png);
527
	background-repeat: repeat-x;
528
 
529
/* ombrage CSS3 */
530
	-moz-box-shadow: 1px 1px 6px #666;
531
	-webkit-box-shadow: 1px 1px 6px #666;
532
	box-shadow: 1px 1px 6px #666;
533
}
534
.div-cache {
535
	visibility: hidden;
536
	position: absolute;
537
	top: -1000px;
538
}
539
#box_conn {
540
	top: 120px;
541
}
542
#box_certif {
543
	top: 190px;
544
}
545
#box_mdp {
546
	top: 260px;
547
}
548
#box_acc {
549
	top: 330px;
550
}
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;*/
581
	background-image: url(/images/fond-bdd_rouge.png);
582
	background-repeat: repeat-x;
583
 
584
/* ombrage CSS3 */
585
	-moz-box-shadow: 0px 0px 0px #fff;
586
	-webkit-box-shadow: 0px 0px 0px #fff;
587
	box-shadow: 0px 0px 0px #fff;
588
}
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 {
590
	color: red;
591
}
592
 
593
/* overwrite default rules for disabled menu boxes */
594
.box_menu.box-menu-disabled {
595
	opacity: .2;
596
}
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;
605
 
606
/* ombrage CSS3 */
607
	-moz-box-shadow: 1px 1px 6px #666 !important;
608
	-webkit-box-shadow: 1px 1px 6px #666 !important;
609
	box-shadow: 1px 1px 6px #666 !important;
610
}
611
 
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 */
636
	-moz-box-shadow: 1px 1px 6px #666;
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
}
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;
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;
668
}
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;
696
	transition: .2s;
697
}