Subversion Repositories ALCASAR

Rev

Rev 2614 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

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
}