source: spip-zone/_plugins_/details_interface_3/squelettes/details.css.html @ 67431

Last change on this file since 67431 was 67431, checked in by arno@…, 8 years ago
  • z-index moins fort, sinon les interfaces de ui-datepicker passent en dessous
  • article soumis à validation mieux traité et plus visible
  • graphisme quand titres du bandeau principal sur deux lignes (exemple: italien)
  • meilleure présentation interface de choix des URL
File size: 14.3 KB
Line 
1#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
2#HTTP_HEADER{Vary: Accept-Encoding}
3#CACHE{0}
4
5body {
6        font-family: 'Lucida Grande', Tahoma, Ubuntu, Arial, Verdana, sans-serif;
7        background-color: #f9f9f9;
8        background-color: #[(#ENV{claire}|couleur_luminance{0.01}|couleur_saturation{0.015})];
9}
10#bando_identite {
11        font-size: 90%;
12        padding: 1px 0px;
13        background-color: #[(#ENV{foncee}|couleur_luminance{0.15})];
14
15        color: #[(#ENV{foncee}|couleur_luminance{0.6})];;
16        a, strong {
17                color: #[(#ENV{foncee}|couleur_luminance{0.7})];;
18               
19                . :hover {
20                        color: #333;
21                }
22        }
23}
24#bando_haut {
25        ul.deroulant {
26                li {
27                        a {
28                                font-weight: normal;
29                                text-decoration: none;
30                                color: #666;
31                               
32                                . :hover {
33                                        color: black;
34                                }
35                        }
36                        ul {
37                                li {
38                                        background-color: transparent;                         
39                                }
40                                . > li:last-child {
41                                        -spip-border-bottom-left-radius: 5px;
42                                        -spip-border-bottom-right-radius: 5px;
43                                }
44                                li.actif, li.actif_tempo {
45                                        background-color: #[(#ENV{foncee}|couleur_luminance{0.15})];
46                                        -spip-box-shadow:  0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.25})] inset;
47                                        a:hover {
48                                                background-color: transparent;
49                                        }
50                                }
51                        }
52                }
53        }
54}
55               
56#bando_navigation {
57        ul {
58                li {
59                        line-height: 125%;
60                       
61                        ul {
62                                min-width: 170px;
63                                -spip-border-bottom-left-radius: 5px;
64                                -spip-border-bottom-right-radius: 5px;
65                                background-color: white;
66
67                                a {
68                                        padding: 0.5em;
69                                }
70
71                        }
72                       
73                }
74        }
75}
76#bando_navigation ul.deroulant > li {min-width: 95px;}
77.large #bando_navigation ul.deroulant > li {min-width: 105px;}
78
79.large #contenu {
80        margin-left: 24px;
81        width: 525px;
82}
83#bando_outils {
84        border-top: 1px solid #999;
85        background-color: #444;
86        -spip-gradient: top, #555555, #333333;
87       
88        ul.deroulant {
89                font-size: 0.9em;
90                line-height: 120%;
91        }
92}
93.navigation_avec_icones {
94        #bando_navigation {
95                ul.deroulant {
96                        > li {
97                                > a {
98                                        font-size: 90%;
99                                       
100                                        . :hover {
101                                                background-color: ##ENV{foncee};
102                                        }
103                                }
104                        }
105                }
106        }
107        #bando1_menu_accueil {
108                background-image: url("#CHEMIN{accueil-48.png}");
109        }
110        #bando1_menu_edition {
111                background-image: url("#CHEMIN{edition-48.png}");
112        }
113        #bando1_menu_publication {
114                background-image: url("#CHEMIN{publication-48.png}");
115        }
116        #bando1_menu_activite {
117                background-image: url("#CHEMIN{suivi-activite-48.png}");
118        }
119        #bando1_menu_squelette {
120                background-image: url("#CHEMIN{squelettes-48.png}");
121        }
122        #bando1_menu_administration {
123                background-image: url("#CHEMIN{maintenance-48.png}");
124        }
125        #bando1_menu_configuration {
126                background-image: url("#CHEMIN{configuration-48.png}");
127        }
128}
129
130
131.simple .inner {
132        -spip-border-radius: 5px;
133        border: 1px solid #e7e7e7;
134
135       
136        . :hover {
137                        -spip-box-shadow:  0px 0px 2px #dddddd;
138        }
139       
140        .hd {
141                background-color: #f0f0f0;
142                color: #444;
143                text-shadow: white 0px 1px 0px;
144                font-size: 0.85em;
145                line-height: 120%;
146        }
147}
148#contenu .fiche_objet {
149        .propose .inner {
150                -spip-box-shadow: 0px 0px 0px #ffffff;
151                -spip-border-radius: 0;
152                background-color: #ffde00;
153                margin: 0px -15px;
154               
155                p {
156                        margin: 0;
157                }
158        }
159
160
161        .inner {
162                border: 0px;
163                -spip-box-shadow:  0px 0px 20px #e0e0e0;
164
165                . :hover {
166                        -spip-box-shadow:  0px 0px 20px #cccccc;
167                }
168               
169                .hd {
170                        background-color: transparent;
171                        padding: 25px 15px 10px 15px;
172                       
173                        .surtitre, .soustitre {
174                                font-size: 1.6em;
175                                line-height: 125%;
176                        }
177                        .surtitre {
178                                margin-bottom: 8px;
179                        }
180                        .soustitre {
181                                margin-top: 8px;
182                        }
183                }
184                .bd {
185                        padding: 15px;
186                }
187        }
188        .editer_urls {
189                margin: 10px 0px;
190                .formulaire_editer_url_objet  {
191                        margin: 10px -15px 0px -15px;
192                }
193                .formulaire_editer_url_objet, .boutons {
194                        -spip-border-radius: 0px;
195                }
196        }
197}
198h1, .h1 {
199        font-size: 2em;
200        line-height: 125%;
201}
202
203
204.sous-rub {
205        .inner {
206                border: 0;
207                background-color: #[(#ENV{foncee}|couleur_luminance{0.15})];
208                -spip-box-shadow:  0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.20})] inset;
209
210                . :hover {
211                -spip-box-shadow:  0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.20})] inset;
212                }
213               
214                .hd {
215                        background-color: transparent;
216                        font-size: 100%;
217                }
218                .bd {
219                        padding: 0;
220                       
221                        .liste-items {
222                                font-size: 0.85em;
223                                line-height: 120%;
224                               
225                                .item {
226                                        padding: 0px;
227                                                                               
228                                        a {
229                                                padding: 5px 18px;
230                                                display: block;
231                                        }
232                                       
233                                        . :hover {
234                                                background-color: #[(#ENV{foncee}|couleur_luminance{0.25})];
235                                                a {
236                                                        color: black;
237                                                }
238                                        }
239                                }       
240                                > .item:last-child {
241                                        border-bottom: 0px;
242                                }
243                        }
244                }
245        }
246}
247
248
249.liste-objets {
250        -spip-border-top-left-radius: 5px;
251        -spip-border-top-right-radius: 5px;
252        position: relative;
253        z-index: 1;
254        display: block;
255
256        . :hover {
257                -spip-box-shadow:  0px 0px 0px #dddddd;
258        }
259        . :before, . :after {
260          -spip-box-shadow: 0 15px 10px rgba(0, 0, 0, .5);
261          -spip-transform: rotate(-3deg);
262          position: absolute;
263          left: 10px;
264          bottom: 20px;
265          z-index: -1;
266          width: 50%;
267          max-width: 300px;
268          height: 20%;
269          content: "";
270        }
271        . :after {
272          -spip-transform: rotate(3deg);       
273          left: auto;
274          right: 10px;
275        }
276       
277        . .selection-articles {
278                table {
279                        background-color: white;
280                        border-bottom: 1px solid #ccc;
281                }
282                form {
283                        background-color: #[(#ENV{claire}|couleur_luminance{0.25})];
284                }
285        }
286       
287        table {
288                background: transparent;
289               
290                caption {
291                        background: #e5e5e5;
292                        -spip-gradient: top, #f0f0f0, #e0e0e0;
293                       
294                        strong.caption {
295                                padding-top: 7px;
296                                padding-bottom: 7px;
297                                color: #444;
298                                background-color: transparent;
299                                text-shadow: white 0px 1px 0px;
300                                font-size: 0.85em;
301                                line-height: 120%;
302                        }
303                }
304                thead {
305                                font-size: 0.85em;
306                                line-height: 120%;
307                               
308                                th {
309                                        padding-top: 5px;
310                                        padding-bottom: 5px;
311                                }
312                }
313                tbody > tr:last-child td {
314                        border-bottom: 0;
315                }
316                tr {
317                        td {
318                                line-height: 125%;
319                        }
320                }
321        }
322}
323.liste-objets-lies {
324        . .auteurs, . .mots {
325                thead {
326                        display: none;
327                }
328        }
329}
330.icone, .en-edition {
331        line-height: 120%;
332}
333
334div.titrem, h3.titrem {
335        font-size: 1em;
336        line-height: 125%;
337        padding-top: 7px;
338        padding-bottom: 7px;
339}
340
341
342.icone {
343        a, .submit {
344                img {
345                        -spip-transition-property: background-color;
346                        -spip-transition-duration: 0.2s;
347                        border: 0;
348                        background-color: #eee;
349                        -spip-border-radius: 5px;
350                        padding: 7px;
351                }               
352                . :hover {
353                        img {
354                                background-color: #aaa;
355                        }
356                }
357        }
358}
359
360#navigation {
361        .formulaire_spip {
362                border-color: ##ENV{claire};
363                font-size: 90%;
364                line-height: 120%;
365
366                h3.titrem {
367                        background-color: ##ENV{claire};
368                        color: white;
369                        padding-top: 5px;
370                        padding-bottom: 5px;
371                }
372                input.text, input.password, textarea {
373                        font-size: 0.9em;
374                        line-height: 125%;
375                        padding: 3px;
376                }
377               
378                p.boutons {
379                        input.submit {
380                                padding: 2px 5px;
381                        }
382                }
383        }
384}
385.formulaire_spip {
386        margin: 1.3em 0em;
387        -spip-border-radius: 5px;
388       
389        h3.titrem {
390                background-color: ##ENV{foncee};
391                color: white;
392        }
393       
394        input.text, input.password, textarea {
395                border: 1px solid #e9e9e9;
396                padding: 5px;
397                font-size: 1.1em;
398                -spip-border-radius: 4px;
399        }
400        img.ui-datepicker-trigger {
401                -spip-border-radius: 0px;
402        }
403
404        li fieldset {
405                input.text, input.password, textarea {
406                        border: 1px solid #e9e9e9;
407                }
408        }
409        label {
410                color: #777;
411                font-size: 90%;
412                line-height: 120%;
413        }
414        label[for] {
415                cursor: pointer;
416        }
417        .explication {
418                padding: 5px 10px;
419                font-size: 90%;
420                line-height: 125%;
421                color: #666;
422                -spip-border-top-left-radius: 5px;
423                -spip-border-top-right-radius: 5px;
424                background-color: #e9e9e9;
425                -spip-gradient: top, #e9e9e9, #e0e0e0;
426
427               
428                + input.text, + textarea, +input.password, +div.choix:first-of-type {
429                        margin-top: 0px;
430                        -spip-border-top-left-radius: 0px;
431                        -spip-border-top-right-radius: 0px;
432                }
433        }
434        div.choix {
435                background-color: white;
436                padding: 3px 10px;
437                border: 1px solid #e9e9e9;
438                border-top: 0px;
439                border-bottom: 0px;
440               
441                + div.choix {
442                        padding-top: 0px;
443                }
444
445                + .explication {
446                        margin-top: 0px;
447                        -spip-border-top-left-radius: 0px;
448                        -spip-border-top-right-radius: 0px;
449                }
450        }
451       
452        div.choix:last-of-type {
453                -spip-border-bottom-left-radius: 5px;
454                -spip-border-bottom-right-radius: 5px;
455                border-bottom: 1px solid #e9e9e9;
456        }
457        div.choix:first-of-type {
458                -spip-border-top-left-radius: 5px;
459                -spip-border-top-right-radius: 5px;
460                border-top: 1px solid #e9e9e9;
461        }
462        .boutons {
463                -spip-border-bottom-left-radius: 5px;
464                -spip-border-bottom-right-radius: 5px;
465               
466                input.submit {
467                        background-color: ##ENV{claire};
468                        color: #[(#ENV{foncee}|couleur_luminance{0.7})];
469                        -spip-border-radius: 5px;
470                        border: 0;
471                        padding: 3px 7px;
472                        font-size: 90%;
473                       
474                        . :hover,. :focus {
475                                background-color: ##ENV{foncee};
476                                color: white;
477                                -spip-box-shadow:  0px 0px 4px #[(#ENV{foncee}|couleur_luminance{0.6})];
478                        }
479                       
480                        . :active {
481                                background-color: #[(#ENV{foncee}|couleur_luminance{0.7})];
482                        }
483                }
484        }
485
486        .toggle_box_link {
487                visibility: hidden;
488                z-index: 1;
489                font-size: 10px;
490                color: ##ENV{lien};
491               
492                button {
493                        font-size: 10px;
494                        color: ##ENV{lien};
495                }
496               
497        }
498        . :hover {
499                .toggle_box_link {
500                        visibility: visible;
501                }
502        }
503
504}
505
506#chemin {
507        font-size: 85%;
508        line-height: 120%;
509        .bouton_deplacer {
510                font-size: 10px;
511                color: ##ENV{lien};
512                visibility: hidden;
513        }
514       
515        . :hover {
516                .bouton_deplacer {
517                        visibility: visible;
518                }
519        }       
520}
521.box {
522        .inner {
523                -spip-border-radius: 5px;
524        }
525}
526.note, .notice {
527        border: 0;
528}
529.box_mediabox, .largeur {
530        .formulaire_spip.formulaire_recherche  {
531                position: relative;
532                border: 0px;
533                width: 170px;
534                background-color: transparent;
535               
536                input.text {
537                        background-color: #777;
538                        border: 0;
539                        border: 1px solid #999;
540                        font-size: 0.9em;
541                        -spip-border-radius: 4px;
542                        padding-right: 22px;
543                        width: 100%;
544                        -spip-box-sizing: border-box;
545                       
546                        . :focus {
547                                background-color: #333;
548                                border-color: white;
549                                -spip-box-shadow:  0px 0px 4px #ffffff;
550                                color: white;
551                                outline: none;
552                        }
553                }
554                input.image {
555                        position: absolute;
556                        top: 0px;
557                        right: 1px;
558                }
559        }
560}
561.entete-formulaire {
562        -spip-border-top-left-radius: 5px;
563        -spip-border-top-right-radius: 5px;
564       
565        . + .formulaire_spip {
566                -spip-border-top-left-radius: 0px;
567                -spip-border-top-right-radius: 0px;
568        }
569}
570.popin .formulaire_spip {
571                -spip-border-top-left-radius: 0px;
572                -spip-border-top-right-radius: 0px;
573}
574
575#navigation > .formulaire_spip {
576        margin: 2em 0em;
577}
578
579#wysiwyg, .preview {
580        padding: 0;
581        font-size: 1.2em;
582        line-height: 145%;
583        font-family: Cambria, Georgia, 'Times New Roman', Times, serif;
584       
585        text-align: justify;
586        text-justify:newspaper;
587        -spip-hyphens: auto;
588       
589        p {
590                margin: 0.8em 0;
591        }
592        h3.spip {
593                margin-top: 2.5em;
594                margin-bottom: 1.8em;
595                font-family: 'Lucida Grande', Tahoma, Ubuntu, Arial, Verdana, sans-serif;
596                font-weight: normal;
597        }
598        .spip_note_ref {
599                vertical-align: super;
600                font-size: 80%;
601                font-family: 'Lucida Grande', Tahoma, Ubuntu, Arial, Verdana, sans-serif;
602        }
603        .contenu_descriptif, .contenu_nom_site {
604                border: 0;
605                background-color: #eee;
606                margin-left: -15px;
607                margin-right: -15px;
608               
609                padding: 10px 15px;
610               
611                .label {
612                        font-family: 'Lucida Grande', Tahoma, Ubuntu, Arial, Verdana, sans-serif;
613                        font-size: 0.8em;
614                        display: block;
615                        margin-bottom: 0.5em;
616                        color: #999;
617                        font-weight: normal;
618                }
619                p {
620                        margin: 0.5em 0em;
621                }
622        }
623        .contenu_nom_site {
624                .label, .nom_site {
625                        display: inline-block;
626                        padding: 0;
627                        margin: 0;
628                }
629        }
630        .contenu_notes {
631                background-color: transparent;
632                border-top: 0px solid #ccc;
633                background-color: #eee;
634                margin-left: -15px;
635                margin-right: -15px;
636               
637                padding: 10px 15px;
638
639                .label {
640                        font-family: 'Lucida Grande', Tahoma, Ubuntu, Arial, Verdana, sans-serif;
641                        display: block;
642                        margin-bottom: 0.5em;
643                        color: #999;
644                        font-weight: normal;
645                }
646                .notes {
647                        p {
648                                margin: 0.5em 0;
649                               
650                                .spip_note_ref {
651                                        margin-left: -28px;
652                                }
653                        }
654                }
655        }
656       
657}
658#text_area {
659        height: 450px;
660        padding: 10px;
661        outline: none;
662        -spip-border-top-left-radius: 0px;
663        -spip-border-top-right-radius: 0px;
664}
665.formulaire_editer_liens .liste-objets tr > .action button {
666        visibility: hidden;
667       
668        font-size: 90%;
669        img {
670                float: none;
671                margin-left: 0px;
672                vertical-align: bottom;
673        }
674}
675.formulaire_editer_liens .liste-objets tr:hover > .action button {
676        visibility: visible;
677}
678.logo_du_site {
679        text-align: center;
680}
681.fiche_objet .formulaire_spip {
682        border: 1px solid #ddd;
683       
684        . .formulaire_dater {
685                border: 0;
686                -spip-border-radius: 0;
687                margin-left: -15px;
688                margin-right: -15px;
689               
690                padding: 10px 15px;
691                background-color: #eee;
692
693                label {
694                        font-size: 85%;
695                        font-weight: normal;
696                }
697                input.text {
698                        padding: 3px;
699                }
700                p.boutons {
701                        -spip-border-radius: 0px;
702                        margin: 0px -15px -10px -15px;;
703                }
704        }
705}
706
707.onglets_simple {
708        ul {
709                li {
710                        strong, a {
711                                -spip-border-top-left-radius: 5px;     
712                                -spip-border-top-right-radius: 5px;     
713                        }
714                        strong {
715                                background-color: transparent;
716                                border-bottom-color: #f9f9f9;
717                        }
718                        a {
719                                -spip-opacity: 0.3;
720                               
721                                . :hover, . :focus {
722                                        -spip-opacity: 1;
723                                }
724                        }
725                       
726                }
727        }
728}
729.infos .instituer_objet {
730        border: 0px;
731}
732.en-edition {
733        font-size: 95%;
734        line-height: 120%;
735
736        button.submit {
737                background-color: transparent;
738                border: 0;
739                color: red;
740                cursor: pointer;
741        }
742       
743        .bd {
744                padding: 0;
745                padding-bottom: 5px;
746               
747                .liste-items  {
748                        border-top: 1px solid white;
749                       
750                        li {
751                                border-bottom: 1px solid white;
752                                padding-left: 10px;
753                                padding-right: 10px;
754                               
755                        }
756                }
757        }
758}
759.barre_onglet ul {
760        li {
761                margin-right: 0px;
762                border-left-width: 0px;
763                border-color: #ccc;
764               
765                strong.on {
766                                        background-color: #[(#ENV{foncee})];
767                                        -spip-box-shadow:  0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.80})] inset;
768               
769                }
770               
771                a {
772                        background-color: #eeeeee;
773                        -spip-gradient: top, #ffffff, #eeeeee;
774                       
775                        . :hover, . :focus {
776                                background-color: white;
777                                -spip-gradient: top, #ffffff, #ffffff;
778                                color: #[(#ENV{foncee}|couleur_luminance{0.7})];
779                        }
780                }
781        }
782        . > li:first-child {
783                border-left-width: 1px;
784        }
785        . > li:first-child, . > li:first-child a {
786                -spip-border-bottom-left-radius: 5px;   
787                -spip-border-top-left-radius: 5px;     
788        }
789        . > li:last-child, . > li:last-child a {
790                -spip-border-bottom-right-radius: 5px; 
791                -spip-border-top-right-radius: 5px;     
792        }
793}
794#portfolios h3  {
795        padding: 7px 10px;
796        background-color: ##ENV{foncee};
797        color: white;
798        -spip-border-top-left-radius: 5px;     
799        -spip-border-top-right-radius: 5px;     
800       
801}
802
803.navigation .sous_navigation .item {
804        padding: 0px;
805        a {
806                margin: 0;
807                padding: 10px;
808                padding-left: 34px;
809                background-position: 10px center;
810               
811                . :hover, . :focus {
812                        background-color: #[(#ENV{foncee}|couleur_luminance{0.15})];
813                        -spip-box-shadow:  0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.20})] inset;
814                        color: black;
815                }
816        }
817}
818
819#FILTRE{css_imbriques_decouper}
Note: See TracBrowser for help on using the repository browser.