Subversion Repositories ALCASAR

Rev

Rev 2743 | 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 */
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
}