source: extensions/luciano/theme.css @ 16048

Last change on this file since 16048 was 16048, checked in by plg, 12 years ago

first step to make Luciano compatible with Piwigo 2.4
File size: 19.7 KB
RevLine 
[6416]1html, body, div, span, applet, object, iframe, h2, h1, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
2del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
3form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
4        { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; }
5
6body                                            { line-height: 1; }
7ol, ul                                          { list-style: none }
8blockquote, q           { quotes: none }
9blockquote:before,
10blockquote:after,
11q:before,
12q:after                                 { content: ''; content: none }
13:focus                                  { outline: 0 }/* remember to define focus styles! */
14ins                                                     { text-decoration: none }/* remember to highlight inserts somehow! */
15del                                                     { text-decoration: line-through }
16table                                           { border-collapse: collapse; border-spacing: 0 }/* tables still need 'cellspacing="0"' in the markup */
17
18/* FORM */
19fieldset, form, label, legend   { margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;        vertical-align:baseline; }
20fieldset                                                                                { margin: 0; padding-right: 2em; }
21legend                                                                                  { padding: 0; }
22label                                                                                           { float:left; width:12em; clear:left; text-align:left;  cursor:hand; }
23textarea, input, select, label, button, optgroup        { margin-top:5px; }
24input[type="checkbox"] ,input[type="radio"]     { margin-bottom:7px; }
25
26fieldset                { border:0px; }
27legend                  { display: none; }
28label                           { color:#999; }
29textarea                { border: 1px solid #666; }
[16048]30textarea:focus
31input:focus, #menubar input:focus       { border: 1px solid #666; }
[6416]32select                  { background-color: #222; color: #666; }
[16048]33input, #menubar input { border: 1px solid #444; background-color: #222; color: #666; }
34input[type="submit"], #menubar input[type="submit"] { background-color: #666; color: #222; }
35input[type="submit"]:hover, #menubar input[type="submit"]:hover { background-color: #222; color: #666; cursor: hand; }
[6416]36input[type="checkbox"]                  { color: #000; border: 0 none; vertical-align: middle; }
37input[type="radio"]                                     { background-color: transparent; border:0 none; color: #000; }
38option, optgroup                                                { background-color:#222; color:#666; }
39
40FORM.properties fieldset { border: 1px solid; margin: 15px; padding: 1em;}
41FORM.properties legend { display: block; padding:5px;}
42FORM.properties li { clear:left; line-height:1.8em; margin-bottom:0.5em; padding:0; }
43FORM.properties span.property { float:left; font-weight:bold; margin:0; padding:0 0.5em 0 0; text-align:right; width:50%; }
44FORM.properties span.property label { float:left; width:98%; display:block; clear:left; text-align:right; margin-top:0; }
45FORM #themeSelect, form #languageSelect  { float: left; line-height:0.8em; padding:0.3em 0 0.7em 0; cursor:pointer;}
46
47/***** STYLE ****/
48html, body      {
49 background-color: #111;
50 color: #666;
[9973]51 font-family: Corbel, Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Bitstream Vera Sans, Liberation Sans, Verdana, sans-serif;
[6416]52}
53
54p                                               { margin: 10px;}
55a, a:visited    { color: #ddd; text-decoration: none; }
[16048]56a:hover                         { color: #fff; text-decoration:none; border:none; }
[6416]57h2 a                                    { margin-left: 3px; }
58
[16048]59#the_page                                                                       { /* position: relative; */ width: 1024px; margin: 0 auto; text-align: center }
60#thePicturePage #the_page {position:relative;}
[6416]61#theHeader,.content                     { text-align: left }
62
63#theHeader                                                      { padding-top: 20px; margin-bottom: 20px; }
[16048]64#theHeader h1                                           { color: #fff; font-size: 1.4em; text-align:left;}
[6416]65#theHeader h1,
66#theHeader h1 a,
67#theHeader h1 a:visited,
68#theHeader h1 a:hover                   {color: #fff; border: none }
69
70#theHeader p                                                    { margin-left: 20px; margin-top: -4px; margin: -4px 0 10px 20px; color: #666; border: none }
71
72#headerMenu                                                     { position: absolute; top: 40px; right: 0  }
73#headerMenu li                                          { float: left; margin-left: 40px }
74
75#imagerotator                                           {position: relative; margin-top: 0px; height: 100px }
76#imagerotator img                               {position: absolute; top: 0; left: 0 }
77
78#copyright                                              { clear: both; margin: 20px 0 5px 0; padding-top: 5px; border-top: 2px solid #222; text-align: left; text-align: right; line-height: 1.2em }
79#copyright span                         { color: #444; }
80#copyright a,
81#copyright a:visited,
82#copyright a:hover                      { color: #444; }
83#copyright a:hover                      { color: #666; }
84#copyright .cName                       { color: #555; font-weight: bold }
85
86/***** LAYOUT GALLERY ****/
87
88#rss            { position: absolute; top: 10px; right: 0;  }
89#rss a          { display: block; width: 28px; height: 28px; text-indent: -2000px; border: 0;   background: transparent url('icon/rss.png'); }
90
[12341]91.content {
[16048]92/*
[12341]93  float: right;
[16048]94*/
[12341]95  width: 750px;
96  margin-bottom: 10px;
97  padding-bottom: 10px;
[16048]98  /* position: relative; */
[12341]99  background: transparent url(skin/750darkBottom.png) bottom left;
100}
101.content .titrePage {
102 background: transparent url(skin/750darkTop.png) no-repeat;
103}
[12532]104
105/* special for PWG Stuff blocks on picture.php with menubar available on picture.php but disabled - starts here */
106#thePicturePage .content {
107  width: 1024px;
108  background: transparent url(skin/1024darkBottom.png) bottom left;
109}
110
111#thePicturePage .content .titrePage {
112  background: transparent url(skin/1024darkTop.png) no-repeat;
113}
114/* special for PWG Stuff blocks on picture.php with menubar available on picture.php but disabled - stops here */
115
[12341]116.content dl {margin: 25px;}
[6416]117
118
[16048]119#menubar { float: left; width: 264px; margin: 0 0 20px 0; text-align: left; color: #888; }
[6416]120#menubar dl     { width: 264px; background: transparent url(skin/264grey3.png); margin-bottom: 10px; }
[16048]121#menubar dt     { margin-left: 10px; padding-top: 10px; margin-bottom: 10px; font-size: 1.2em; font-weight: 700; text-align:left; }
[6416]122
123#menubar dd                                             { width: 264px; background: transparent url(skin/264grey3.png) bottom left; }
124#menubar dd a,
125#menubar dd a:visited   { color: #eee; }
126#menubar dd a:hover             { color: #f70; }
127
128#menubar dt a,
129#menubar dt a:visited           { color: #f70; }
[16048]130#menubar dt a:hover                     { color: #eee;}
[6416]131
[16048]132#menubar ul { list-style: none outside none;}
133#menubar dd ul { padding: 0 5px 10px 30px; }
134#menubar form { padding: 0 5px 5px 5px; margin-top:-20px;}
135#menubar #quicksearch {margin-top:-10px}
[6416]136
137#menubar #menuTagCloud                  { padding: 0 10px 10px 15px; }
138#menubar #menuTagCloud span { margin-right:5px; white-space:nowrap; }
139
140#menubar dd ul ul { padding-left: 15px; }
141
142#menubar #quickconnect div { margin-bottom: 3px; }
143
144#menubar .totalImages   { margin:0 10px; padding-bottom:10px; }
145#menubar .actions                       { padding:0; }
146#menubar .button                        { float:right; margin-right:10px; }
147
148/* ELEMENTS */
149
[16048]150.content .titrePage                                             { padding: 10px 0 5px 10px; height: 30px; }
[6416]151.titrePage h1                                   { float: left; }
[16048]152.content .additional_info {padding: 10px; text-indent: 20px; color: #666; text-align:justify;font-size:100%; }
153.thumbnailCategories    { margin-left: 10px; }
[6416]154
155.thumbnailCategories li                         { background: transparent url(skin/catBg.png) 0 0; width: 355px; height: 170px; float: left; margin-right: 15px; margin-top: 10px }
156.thumbnailCategories li.hover   { background: transparent url(skin/catBg.png) 0 -170px; }
157
158.thumbnailCategories .illustration              { float: left; width: 150px; margin: 10px; }
159.thumbnailCategories .description               { float: right; width: 180px; margin-top: 10px; height: 160px; overflow:hidden; }
160.thumbnailCategories .description h3    { margin-bottom: 10px; font-weight: 700; color: #f70; }
161.thumbnailCategories .Nb_images                         { font-size: 0.8em; margin-bottom: 10px; }
162.thumbnailCategories .desc                                              { font-size: 0.9em; }
163
164.thumbnails                                                             { margin-left: 10px; min-height: 540px; height: auto !important; height: 540px; text-align: center;}
165.thumbnails li                                          { float: left; display: inline; width: 170px; height: 170px; margin-left: 10px; margin-bottom: 10px; background: transparent url(skin/thumbBg.png) 0 0;}
166.thumbnails li.hover                    { background: transparent url(skin/thumbBg.png) 0 -170px; }
167.thumbnails li .wrap2           { width:170px; height:172px; display:table-cell; vertical-align:middle;}
[16048]168.thumbnails li img                              { border: 1px solid #222; border-left: 1px solid #444; border-bottom: 1px solid #444;}
[6416]169.thumbnails li.hover img        { border: 1px solid #111; border-left: 1px solid #222; border-bottom: 1px solid #222; }
170
171.thumbnails .thumbLegend { display:none; }
172
173.categoryActions                { float:right; margin-right: 10px; }
174.categoryActions li     { float: left; margin-left:5px; display: inline; }
175#order                                                  { float: left; margin: 2px 5px 0 0;}
176#orderText                                      { float: left; margin: 2px 8px 0 0; }
177#playSlideshow                  { width: 200px; float: left; margin-left: 20px; margin-top: 10px; }
178#playSlideshow a                { color: #666; }
179
[16048]180.content .navigationBar                                                 { clear: both; color:#444; text-align: right; padding: 10px 30px }
181.content .navigationBar span,
182.content .navigationBar a                                       { border: 1px solid; padding: 0px 5px; }
183.content .navigationBar a,
184.content .navigationBar a:visited       { color: #999}
185.content .navigationBar a:hover         { color: #eee}
[6416]186
[16048]187.navigationBarSimple                                                    { color:#666; text-align: center; position:relative;}
[6416]188.navigationBarSimple span,
189.navigationBarSimple a                                          { height: 150px; width: 20px; border: 0; padding: 0; text-indent: -3000px; }
[16048]190.navigationBarSimple .prew                              { position: absolute; top: -350px; left: 0px; background: transparent url(icon/prew.png) no-repeat scroll; }
191.navigationBarSimple .next                              { position: absolute; top: -350px; right: 0px; background: transparent url(icon/next.png) no-repeat scroll;  }
[6416]192.navigationBarSimple a.prew:hover { background: transparent url(icon/prew.png) 0 -150px no-repeat scroll; }
193.navigationBarSimple a.next:hover { background: transparent url(icon/next.png) 0 -150px no-repeat scroll; }
194
195/****** CALENDAR => Not fixed yet */
196
197table.calMonth tbody td,
198table.calMonth tbody td div.calImg { height:80px; padding:1px 2px; width:80px; }
199
200.content DIV.calendarViews                      { display: block; float: right; margin: -20px 0 0; }
201.content DIV.calendarCalBar                     { margin: 10px 10px; text-align: left; }
202SPAN.calItem, SPAN.calItemEmpty { font-weight: bold; margin: 0 1px; }
203SPAN.calItem A                                                                  { border:0 }
204SPAN.calCalHead                                                                 { font-weight: bold; font-size: 110%; margin: 0 2px; }
205SPAN.calCal                                                                                     { margin: 0 2px; }
206
207.calendarBar                            { margin:15px; }
208TABLE.calMonth                  { border: none; margin:10px auto; }
209TD.calDayCellFull,
210TD.calDayCellEmpty,
211TD.calDayCellBlank      { vertical-align: top; font-weight: bold; font-size: 18px; }
212TD.calDayHead                           { font-weight: bold; font-size: 12px; text-align: center; padding:10px; }
213DIV.calImg                                      { overflow: hidden; vertical-align: bottom; z-index: 1; position: relative; }
214.calImg img                                     {       position: relative;     border: 0; }
215.calBackDate                            { padding-left: 4px;    padding-top: 0px;       z-index: 2;     position: absolute;     vertical-align: top; color: #000; }
216.calForeDate                            { padding-left: 5px;    padding-top: 1px;       z-index: 3;     position: absolute;     vertical-align: top; color: #fff; }
217
218/****** TAGS */
219#fullTagCloud                           { font-size:120%; margin:1em 2em; padding:0; text-align:justify; }
220#fullTagCloud span      { margin:0 2px; white-space:nowrap; }
221
222.tagLevel5 { font-size: 150% !important; }
223.tagLevel4 { font-size: 140% !important; }
224.tagLevel3 { font-size: 120% !important; }
225.tagLevel2 { font-size: 100% !important; }
226.tagLevel1 { font-size: 80%  !important; }
227
228#theTagsPage TABLE { width:100%; }
229#theTagsPage TD { vertical-align: top; }
230
231FIELDSET.tagLetter                      { border: 1px solid #444; margin: 0.5em; padding: 10px; }
232LEGEND.tagLetterLegend  { display:block; border: 1px solid #444;        font-size:120%; font-weight: bold; padding: 0 5px; font-style: normal; }
233TABLE.tagLetterContent  { width:100%;   border-collapse:collapse; }
234
235/****** SEARCH PAGE */
236FORM.filter FIELDSET    { border: 1px solid; padding: 1em;      margin: 1em; overflow: hidden; }
237FORM.filter legend              { display: block; padding:5px;}
238FORM.filter label                       { width:auto; clear:none; margin-top:0; }
239
240FORM.filter FIELDSET UL { margin: 0; }
241FORM.filter FIELDSET UL,
242FORM.filter FIELDSET LABEL { display: block; float: left;       margin-right: 1em; padding: 0; }
243FORM.filter FIELDSET LI {       list-style: none;       margin-bottom: 0.5em; }
244FORM.filter FIELDSET LI LABEL { display: inline; float: none; }
245FORM.filter FIELDSET UL.tagSelection LABEL { display: inline;   float: none; margin-right:0.5em; }
246
247FORM.filter FIELDSET LABEL INPUT,
248FORM.filter FIELDSET LABEL SELECT,
249FORM.filter FIELDSET LABEL SPAN,
250FORM.filter FIELDSET LABEL TEXTAREA { display: block; margin: 0.5em 0; }
251
252FORM.filter FIELDSET * LABEL INPUT,
253FORM.filter FIELDSET * LABEL SELECT,
254FORM.filter FIELDSET * LABEL TEXTAREA,
255FORM.filter FIELDSET LABEL SPAN INPUT,
256FORM.filter FIELDSET LABEL SPAN SELECT,
257FORM.filter FIELDSET LABEL SPAN TEXTAREA { display: inline;     vertical-align: top; margin: 0 0.5em 0 0; }
258
259FORM.filter FIELDSET UL.tagSelection LI LABEL INPUT {   margin-right:0; }
260FORM.filter FIELDSET LABEL SPAN SELECT { margin: 0; }
261FORM.filter FIELDSET P { clear: left;   display: block; }
262FORM.filter INPUT[type="submit"] { margin-top: 1em; }
263
264FORM.filter select.categoryList { height:20em; width:500px;}
265
266/****** PHOTO */
267#imageHeaderBar         { height: 30px;}
268
269#slidshowToolBar        { position: absolute; top: 60px; margin-left: 400px; height: 33px;  }
270
[16048]271#imageHeaderBar .imageNumber { width: 70px; font-size: 3em; font-style: italic; color: #222; position: absolute; top: 20px; right:0; }
[6416]272#imageHeaderBar .browsePath     { float: left; }
273.randomButtons  { float: right; }
274.randomButtons li       { float: left; margin-left: 15px;}
275
276#theImage                               { clear: left; text-align: left; margin-top: 20px; }
277#imageContainer { position: relative; width: 1024px; height: 600px; }
278#theImg                                 { display: block; margin: 0 auto; border: none; text-align: center; }
279
280#linkThumbs                     { position: absolute; top: 0; left: 400px; width: 224px; height: 600px; }
281#linkPrev                               { position: absolute; top: 0; left: 0; width: 150px; height: 600px; text-align: left; background: transparent url(icon/thumbPrev.png) center left no-repeat; }
282#linkNext                               { position: absolute; top: 0; left: 874px; width: 150px; height: 600px; text-align: right; background: transparent url(icon/thumbNext.png) center right no-repeat; }
283#linkPrev img           { margin-left: 0; margin-top: 225px; border: 1px solid #f70; }
284#linkNext img           { margin-right: 0; margin-top: 225px; border: 1px solid #f70; }
285
286#imageInfo                      { margin-top: 10px; }
287#imageInfoLeft  { float: left; width: 500px; text-align: left; margin-bottom: 10px; }
[11050]288#imageInfoRight { float: right; width: 350px; height: 40px; text-align: right; margin-bottom: 10px; }
[6416]289
290#imageTags                      { margin-top:5px; }
291#ratingSummary  { margin-bottom: 3px; }
292
293#rateForm input         { height: 25px; margin: 0}
294
295.rateButtonEmpty,                               
296.rateButtonReset,                               
297.rateButtonHalf,                               
298.rateButtonFull,                               
299.rateButtonUserFull,                           
300.rateButtonUserEmpty,                   
301.rateButtonUserHalf             { padding:0; border:0; cursor: pointer;}
302
303.rateButtonSelected             { font-weight:bold; font-size:120%; }
304.rateButtonEmpty                        { width:25px; background: url('icon/star.png') 0 0 no-repeat scroll; }
305.rateButtonReset                        { width:25px; background: url('icon/star.png') 0 -25px no-repeat scroll; }
306.rateButtonHalf                                 { width:25px; background: url('icon/star.png') 0 -50px no-repeat scroll; }
307.rateButtonFull                                 { width:25px; background: url('icon/star.png') 0 -75px no-repeat scroll; }
308.rateButtonUserFull             { width:25px; background: url('icon/star.png') 0 -100px no-repeat scroll; }
309.rateButtonUserEmpty    { width:25px; background: url('icon/star.png') 0 -125px no-repeat scroll; }
310.rateButtonUserHalf             { width:25px; background: url('icon/star.png') 0 -150px no-repeat scroll; }
311
312.rateButtonEmpty2                       { width:25px; background: url('icon/star.png') 0 0 no-repeat scroll; }
313.rateButtonHalf2                        { width:25px; background: url('icon/star.png') 0 -50px no-repeat scroll; }
314.rateButtonFull2                        { width:25px; background: url('icon/star.png') 0 -75px no-repeat scroll; }
315.rateButtonUserFull2    { width:25px; background: url('icon/star.png') 0 -100px no-repeat scroll; }
316.rateButtonUserEmpty2   { width:25px; background: url('icon/star.png') 0 -125px no-repeat scroll; }
317.rateButtonUserHalf2    { width:25px; background: url('icon/star.png') 0 -150px no-repeat scroll; }
318
319.rateShow                                                       { float: right; width: 125px; height: 25px; background: url('icon/star.png') repeat-x scroll;}
320.rateFull1                                              { display: block; float: left; width: 25px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;}
321.rateFull2                                              { display: block; float: left; width: 50px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;}
322.rateFull3                                              { display: block; float: left; width: 75px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;}
323.rateFull4                                              { display: block; float: left; width: 100px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;}
324.rateFull5                                              { display: block; float: left; width: 125px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;}
325.rateHalf                                                       { display: block; float: left; width: 25px; height: 25px; background: url('icon/star.png') 0 -50px repeat-x scroll;}
326
[12341]327/****** Lost Password Page */
328#lostPassword label {float:none;}
329
[6416]330/* OTHERS */
331
332.content form   { margin: 10px; }
333
334.errors,
335.infos                          { margin: 10px; color: #fff; font-weight: 700; }
336.errors p,
337.infos p                                { margin: 30px 0 10px ; color: #900; }
338.errors li,
339.infos li                               { list-style: decimal; margin-left: 30px;}
340
341.idLink                         { margin-top: 20px; }
342
343/* MOOTOOLS PLUGIN */
344
345.elSelect                                                               { width: 160px; height: 20px; background: transparent url(elSelect/select_bg.png) no-repeat 0 0; }
346.elSelect .clear                                { clear: both; }
347
348.elSelect .selected                             { color: #333 !important; background-color: #999 !important; }
349.elSelect .selectedOption       { color: #222; float: left; padding: 4px 0 0 6px; width: 87px; font-weight: bold; font-size: 12px; overflow: hidden; cursor:pointer; }
350.elSelect .option                                       { color: #555; background-color: #bbb; border-left: solid 1px #555; border-right: solid 1px #555; padding: 4px 0 5px 5px; text-align: left; font-weight: bold; font-size: 12px; }
351.elSelect .disabled                             { color:#999; background-color: #333; border-left: solid 1px #555; border-right: solid 1px #555; }
352.elSelect .dropDown                             { width: 23px; height: 20px; float: right; background: url(elSelect/select_arrow.png) no-repeat 0% 0%; cursor:pointer;}
353.elSelect .optionsContainerTop                          { background: url(elSelect/top_center.gif) repeat-x 0% 0%; position: absolute; width: 100%; height: 5px; }
354.elSelect .optionsContainerTop div                      { background: url(elSelect/top_left.gif) no-repeat 0% 0%; width: 100%; height: 5px; }
355.elSelect .optionsContainerTop div div          { background: url(elSelect/top_right.gif) no-repeat 100% 0%; width: 100%; height: 5px; }
356.elSelect .optionsContainerBottom                       { position: absolute; margin: -5px 0 0 0; width: 100%; height: 5px; background: url(elSelect/bottom_center.gif) repeat-x 0% 0%;}
357.elSelect .optionsContainerBottom div   { background: url(elSelect/bottom_left.gif) no-repeat 0% 0%; width: 100%; height: 5px; }
358.elSelect .optionsContainerBottom div div { background: url(elSelect/bottom_right.gif) no-repeat 100% 0%; width: 100%; height: 5px; }
359.elSelect .optionsContainer                                             { position: absolute; display: none; z-index: 1; }
360.icon_1         { background: url(elSelect/icon_1.gif) no-repeat 4px 50%; padding-left: 20px !important; }
[11050]361.icon_2         { background: url(elSelect/icon_2.gif) no-repeat 4px 50%; padding-left: 20px !important; }
[16048]362
363/* LanguageSwitch */
364/*
365#languageSwitchLink .pwg-button-text {display:none;}
366
367#languageSwitchLink .pwg-icon {
368  display: inline-block;
369  height: 26px;
370  overflow: hidden;
371  text-indent: -9999px;
372  vertical-align: bottom;
373  width: 26px;
374}
375*/
376
377/* icons */ 
378.pwg-icon { background-image: url(../default/s26/outline_808080.png);}
379A:hover .pwg-icon { background-image: url(../default/s26/outline_ffffff.png);}
380
381.contentWithMenu {
382  margin-left: 275px;
383}
384
385.switchBox {
386  border: 1px solid #000000;
387  background-color: #555;
388  color:#aaa;
389  font-size:14px;
390}
391
392.switchBoxTitle {
393  border-bottom: 1px solid #444444;
394}
Note: See TracBrowser for help on using the repository browser.