Subversion Repositories ALCASAR

Rev

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