source: extensions/sobre/theme.css @ 5809

Last change on this file since 5809 was 5809, checked in by Gotcha, 14 years ago

Optimize the "Scroll to top"
bug:1599

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