source: extensions/sobre/branches/1.4/theme.css @ 8999

Last change on this file since 8999 was 8999, checked in by Gotcha, 13 years ago

Update the CSS

File size: 12.0 KB
Line 
1/* $ Id: theme.css 2010-04-03 Par Gotcha pour son thème "Sobre" $ */
2
3/* Valide CSS3 http://jigsaw.w3.org/css-validator/validator */
4/* Compressé avec http://www.cleancss.com/ (musclé !) */
5/* Nom du fichier avant compression : theme.bak.css */
6/* Nom du fichier après compression : theme.css*/
7
8
9
10
11/* MERCI DE NE PAS TOUCHER A CE FICHIER */
12
13
14
15
16
17
18/* Importation de feuilles de styles additionnelles */
19@import "slider.css";
20
21/* Le header */
22/* Fonctionne avec l'administration du thème*/
23/* Désactivé par défaut */
24#theHeader {
25        background: transparent url("../../themes/sobre/images/header.png") no-repeat center bottom;
26    height: 144px;
27        margin: 0 auto;
28}
29#theHeader H1 {
30    margin-top: 0px;
31}
32#theHeader p {
33  margin-top:72px;
34}
35
36/* Centrage en une seule colonne */
37body {
38margin: 0 auto;
39max-width: 1190px;
40min-width: 980px;
41}
42
43/* Couleurs des textes */
44BODY, H1, H3,
45INPUT.rateButtonSelected  { /* <= why IE doesn't inherit this ? */
46        color:#d0d0d0;
47}
48H2, #menubar DT {
49        color: #fff48e;
50}
51A, INPUT.rateButton {
52        color: #fff;
53        border: none;
54}
55A:hover {
56        color: #FFF48E;
57}
58#copyright {
59        color: #000000;
60}
61#copyright a {
62        color: #FF7700;
63}
64
65/* Arrières plans */
66BODY, H3, #imageBar, #imageToolBar A:hover {
67        background: #393737
68}
69BODY {
70background: #EAEAEA url(images/background-0.png) repeat-x top;
71}
72H2 {
73        background-image: url(images/tableh1_bg.png);
74        color: #fff48e;
75}
76#imageHeaderBar H2 {
77        background-image: none;
78        background-color: transparent;
79        border: none;
80}
81#imageHeaderBar {
82        background-image: url(images/tableh2_bg.png);
83        background-repeat: repeat-x;
84        background-position: center;
85        border-top: 1px solid #000;
86}
87.content, #imageToolBar, .header_notes {
88        background-color: black;
89}
90#imageToolBar {
91        background-color:#505050;
92}
93
94/* Bordures */
95.content{
96        border: 1px solid #252525;
97        margin: 0;
98}
99H2, #imageToolBar {
100        border-bottom: 1px solid #000;
101}
102FIELDSET, INPUT, SELECT, TEXTAREA,
103.content DIV.thumbnailCategory {
104        border: 1px solid gray;
105}
106.content UL.thumbnails SPAN.wrap2 {
107        border: 1px solid #aaaaaa;      /* thumbnails border color and style */
108}
109.content UL.thumbnails SPAN.wrap2:hover,
110.content UL.thumbnailCategories DIV.thumbnailCategory:hover,
111.content UL.thumbnailCategories DIV.thumbnailCategory:hover A {
112        background-color: #faebd7;
113        border-color: yellow;   /* thumbnails border color when mouse cursor is over it */
114        color: black;
115}
116#thePicturePage {
117        border:1px solid white;
118}
119
120/* Les polices */
121h2 {
122        font-family:Mon-menu;
123        font-size:18px;
124        font-style:italic;
125        font-weight:normal;
126}
127.content ul.thumbnails span.thumbLegend {
128        height: 100%;
129}
130.content div.thumbnailCategory div.description div.text p {
131  font-family:Trebuchet MS;
132}
133.stuffs_block {
134  font-family:Comic Sans MS;
135}
136
137/* Plugin PWG_Stuff, permet d'afficher les derniers commentaires sur 2 colonnes. */
138.content #comments ul.thumbnailCategories li {
139  width:49.9%;
140}
141
142/* Affichage des tags avec le plugin Cumulus cloud tags */
143.tagLetter table.tagLetterContent {
144  font-size:100%;
145}
146
147/* Modifications pour RV Mpas & Earth */
148#theImage #mapPicture {
149  width: 280px;
150}
151#theImage #map {
152height:600px;
153min-height:512px;
154position: relative;
155background-color: rgb(229, 227, 223);
156left: 290px;
157right: -290px;
158margin-right: 290px;
159}
160
161/* Plugin Whois Online */
162.Online {
163        font-size: 11px;
164        color: #444444;
165}
166.Online a {
167        color: black;
168}
169
170/* Centrage modifications de la caractéristique de la catégorie. */
171.content div.thumbnailCategory div.description div.text p.Nb_images {
172  border-top:1px solid #808080;
173  color:#FF9960;
174  font-style:italic;
175  text-align:center;
176}
177
178/* Centrage modifications du nom de la catégorie. */
179.content div.thumbnailCategory div.description h3 {
180  font-weight: bold;
181  text-align:center;
182}
183
184/* Modifications de la description de la catégorie. */
185.content div.thumbnailCategory div.description div.text p {
186  color:#996060;
187}
188
189/* Correction du centrage de la miniature */
190.content div.thumbnailCategory div.illustration {
191  text-align: center;
192  margin: 2px;
193}
194
195/* Plus de place pour le texte des catégories */
196.content ul.thumbnails span.wrap2, .content div.thumbnailCategory div.description  {
197        height: 190px;
198}
199.content div.thumbnailCategory div.description .text {
200        text-align: justify;
201        padding-right:5px;
202}
203.content div.thumbnailCategory div.description {
204        height:100%;
205}
206
207/* Correction de l'affichage de la liste des tags */
208ul.tagSelection {
209        width:100%;
210}
211ul.tagSelection li{
212        float:left;
213        width:150px!important;
214        overflow:hidden;
215}
216
217/* Tips pour picture.tpl */
218#theImage img {
219        margin-top: 10px;
220}
221#theImage p {
222        color: #000;
223        font-style:italic;
224        margin:10px auto auto;
225        position:relative;
226        width:800px;
227}
228#linkPrev, #linkNext {
229        display: none;
230}
231/* Mise en page du tableau */
232TABLE.infoTable {
233  width:920px;
234  background: #505050;
235  border: solid 1px;
236  margin-top: 6px;
237}
238TABLE.infoTable .label {
239  background-color: #2F0000;
240  font-weight: bold;
241  text-align: left;
242  padding-right: 0.5em;
243  padding-left: 3px;
244  width: 100px;
245}
246TABLE.infoTable .value p {
247  width: 320px;
248  margin: 0px;
249}
250TABLE.infoTable .value {
251  max-width: 320px;
252}
253TABLE.infoTable .value p a, input.rateButton {
254border-width:0;
255color:#FF7700;
256}
257/* Modification de zone de commentaires */
258#comments fieldset {
259    width: 910px;
260        margin: auto;
261        padding: 0;
262        background-color: #F0F0F0;
263        color: black;
264}
265#comments fieldset legend {
266        margin-left: 10px;
267        background: #F0F0F0;
268}
269#thePicturePage form.filter fieldset ul, #thePicturePage form.filter fieldset label {
270        display:block;
271        float:none;
272        margin-right:0;
273        padding:0;
274}
275table.commentr {
276        margin-top: -20px;
277        margin-bottom: -10px;
278}
279table.commentr td.center {
280        height: 138px;
281}
282#outils {
283        padding-top: 17px;
284}
285form.filter input[type="submit"] {
286        margin-top:0;
287}
288form fieldset p {
289        margin-top:0;
290}
291#comments  {
292        border-width:0;
293        padding:5px;
294    padding-bottom: 13px;
295        width: 910px;
296        margin: 0 auto;
297        background-color: #505050;
298}
299#theImage table {
300        background-color: #D3D3D3;
301        border:1px solid #000;
302        width: 800px;
303        margin:10px auto 0;
304}
305#comments h3 {
306        margin:14px -5px;
307        padding:0 7px;
308}
309#comments table tbody tr td  select {
310        width: 95px;
311}
312#comments SPAN.author {
313        font-weight:bold;
314}
315#comments blockquote {
316        border-color:black;
317        border-style:solid;
318        border-width:0 0 0 2px;
319        padding-left:5px;
320        font-style:italic;
321}
322form.filter fieldset ul, form.filter fieldset label {
323        padding-top: 5px;
324        padding-left: 5px;
325}
326
327/* Tip pour la page d'accueil */
328/* Concerne PWG_Stuffs */
329/* A adapter */
330#stuffs_block_3 #comments {
331        width: 100%;
332}
333
334/*
335Petite bidouille pour le panneau de connection en haut du site avec PWG_Stuffs
336#stuffs_block_2 form.properties span.property {
337  width: 150px;
338  text-align: left;
339}
340*/
341
342/* Modification pûrement visuel et esthétique modifiant l'affichage de l'enveloppe sous une miniature nouvelle */
343.content ul.thumbnails span.thumbLegend img {
344  position:relative; top:-3px;
345}
346
347/* Tip personnel pour un bloc */
348/* Utilisez PWG_Stuffs */
349/* Bloc privé */
350#stuffs_block_10 div.personal_block{
351display:none;
352}
353#stuffs_block_10:hover div.personal_block{
354display:block;
355}
356
357/* Pour IE et Chrome surtout */
358.content ul.thumbnailCategories {
359width: 99%; /* Peut être à 100% */
360padding-left: 4px; /* Correction du centrage du cadre de la catégorie */
361}
362
363
364
365
366
367/* Modifications de la tailles des miniatures. L'expemple ci-dessous suppose une taille de 200px de coté pour les miniatures.*/
368/* A vous d'adapter en fonction de vos propres miniatures et choix esthétique.*/
369
370.content DIV.thumbnailCategory DIV.description {
371        padding-left: 0px                    /* For Sylvia theme only */
372}
373.content div.thumbnailCategory div.illustration {
374        text-align:center;
375}
376.content div.thumbnailCategory div.illustration { 
377        width:170px;                      /* Usable range 162px-360px , optimal : Thumbnail width + 10px */
378        margin-top:19px;
379}
380.content div.thumbnailCategory { 
381        height: 200px;                    /* Usable range 172px-250px , optimal : Thumbnail height + 10px */ /* For Slyvia theme, Thumbnail height + 40px */
382}
383.content div.thumbnailCategory div.description .text { 
384        height: 110px;                   /* Optimal : Thumbnail height - 50px */ 
385}
386#comments div.thumbnailCategory div.illustration { 
387        width: 255px;                    /* Usable range 219px-360px , optimal : Thumbnail width + 95px */ 
388}
389.content ul.thumbnails span,
390.content ul.thumbnails span.wrap2 a,
391.content ul.thumbnails label {
392        width: 170px;                        /* Optimal : Thumbnail width + 10px */ 
393}
394.content ul.thumbnails span.wrap2, .content div.thumbnailCategory div.description  {
395height:170px;
396}
397
398/* Set defaults for thumbnails legend ( modifie le nbre de ligne sous les vignettes)*/
399#content UL.thumbnails SPAN.thumbLegend {
400  display: block;    /* display: none; if you don't want legend */
401  height: 5em;        /* legend height (don't set auto to be Gecko friendly)*/
402}
403
404.content ul.categoryActions img {
405margin:2px 0 0;
406}
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425#menubar {
426height:2.1em;
427margin:-2px auto 3px;
428position:relative;
429width:980px;
430z-index:2;
431padding-bottom:25px;
432display:block;
433float:none;
434}
435
436#menubar #menuTagCloud a {
437display:inline;
438}
439
440#menubar #menuTagCloud span {
441display:block;
442padding:0.5em 0;
443text-align:left;
444}
445
446#menubar .button {
447border:medium none;
448float:right;
449left:95%;
450list-style-image:none;
451list-style-position:outside;
452list-style-type:none;
453margin:-2px 2px 2px;
454padding:0;
455position:absolute;
456text-align:center;
457text-indent:0;
458width:auto;
459}
460
461#menubar a,#menubar dt a,#menubar dd a {
462border:0;
463color:#fff;
464display:block;
465text-decoration:none;
466}
467
468#menubar a,#menubar dt,div#menubar dl:hover dd,div#menubar ul li:hover ul,div#menubar ul ul li:hover ul,div#menubar ul ul ul li:hover ul,div#menubar ul ul ul ul li:hover ul,div#menubar ul ul ul ul ul li:hover ul {
469display:block;
470}
471
472#menubar a:hover,#menubar dt:hover {
473color:#fff;
474}
475
476#menubar dd {
477background:#333;
478border:1px solid #8c8c8c;
479position:absolute;
480text-align:left;
481z-index:500;
482margin-top: -5px;
483width:25%;
484}
485
486#menubar dd a {
487padding:0.5em;
488border:1px solid #3F3F3F;
489}
490
491#menubar dd a:hover {
492background-color:#333;
493border:1px solid #8c8c8c;
494color:#FFF;
495font-style:italic;
496}
497
498#menubar dd ul ul {
499background-color:#fff;
500border:1px solid #8c8c8c;
501left:100%;
502position:absolute;
503top:0;
504z-index:500;
505}
506
507#menubar dl {
508display:inline;
509height:25px;
510text-align:center;
511width:25%;
512}
513
514#menubar dl dd p {
515margin: 0;
516padding:0 0 10px;
517}
518
519#menubar dt {
520background-image:url("images/tableh1_bg.png");
521border:0;
522color:#fff48e;
523}
524
525#menubar li {
526position:relative;
527}
528
529#menubar li a {
530background:#3f3f3f none repeat scroll 0 0;
531}
532
533#menubar li span {
534right:7px;
535}
536
537#menubar li span,#menubar li IMG {
538padding-left:4px;
539position:absolute;
540top:7px;
541}
542
543#menubar img.button {
544margin-right:17px;
545display:none;
546}
547
548#menubar li span.bullet,div#menubar dd,div#menubar ul ul,div#menubar ul li:hover ul ul,div#menubar ul ul li:hover ul ul,div#menubar ul ul ul li:hover ul ul,div#menubar ul ul ul ul li:hover ul ul {
549display:none;
550}
551
552#menubar li:hover {
553background:#3f3f3f;
554}
555
556#menubar p,#menubar p.totalimages,#menubar p,#menubar p.totalimages,form#quickconnect {
557clear:both;
558margin:0;
559padding:0.2em;
560text-align:center;
561}
562
563#menubar ul {
564width:20em;
565}
566
567#menubar ul li a {
568margin-left:25px;
569padding-right:3em;
570}
571
572#menubar ul,#menubar dl,#menubar ul#menuTagCloud {
573float:left;
574list-style:none;
575margin:0;
576padding:0;
577}
578
579#menubar ul,#menubar li {
580background:#333 none repeat scroll 0 0;
581}
582
583#menubar ul.rvTree ul {
584padding-left:0 !important;
585}
586
587body#theadminpage #menubar {
588border:none;
589display:block;
590float:none;
591margin:5px auto;
592width:898px;
593}
594
595form#quickconnect .button {
596left:50px;
597position:relative;
598top:-20px;
599}
600
601form#quickconnect fieldset {
602padding-top:5px;
603text-align:left;
604width:19em;
605}
606
607form#quickconnect label {
608clear:left;
609}
610
611form#quickconnect label input {
612font-size:1em;
613}
614
615form#quickconnect p,form#quickconnect a {
616border:none;
617padding:0;
618}
619
620form#quicksearch {
621border-bottom:1px solid #000;
622padding:0 0 0 15px;
623}
624
625
626
627
628/* Scroll to top */
629#scrolltotop {
630  bottom:14px;
631  position:fixed;
632  right:0;
633  z-index:1000;
634  opacity:0;
635  outline:none;
636}
637#scrolltotop a {
638  background-color:transparent;
639  background-image: url("images/top.gif");
640  background-position:left top; background-repeat:no-repeat; display:block;
641  height:50px; text-indent:-9999px; width:44px;
642}
643#scrolltotop a:hover {
644  border-bottom:none;
645}
Note: See TracBrowser for help on using the repository browser.