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
Line 
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; }
30textarea:focus
31input:focus, #menubar input:focus       { border: 1px solid #666; }
32select                  { background-color: #222; color: #666; }
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; }
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;
51 font-family: Corbel, Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Bitstream Vera Sans, Liberation Sans, Verdana, sans-serif;
52}
53
54p                                               { margin: 10px;}
55a, a:visited    { color: #ddd; text-decoration: none; }
56a:hover                         { color: #fff; text-decoration:none; border:none; }
57h2 a                                    { margin-left: 3px; }
58
59#the_page                                                                       { /* position: relative; */ width: 1024px; margin: 0 auto; text-align: center }
60#thePicturePage #the_page {position:relative;}
61#theHeader,.content                     { text-align: left }
62
63#theHeader                                                      { padding-top: 20px; margin-bottom: 20px; }
64#theHeader h1                                           { color: #fff; font-size: 1.4em; text-align:left;}
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
91.content {
92/*
93  float: right;
94*/
95  width: 750px;
96  margin-bottom: 10px;
97  padding-bottom: 10px;
98  /* position: relative; */
99  background: transparent url(skin/750darkBottom.png) bottom left;
100}
101.content .titrePage {
102 background: transparent url(skin/750darkTop.png) no-repeat;
103}
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
116.content dl {margin: 25px;}
117
118
119#menubar { float: left; width: 264px; margin: 0 0 20px 0; text-align: left; color: #888; }
120#menubar dl     { width: 264px; background: transparent url(skin/264grey3.png); margin-bottom: 10px; }
121#menubar dt     { margin-left: 10px; padding-top: 10px; margin-bottom: 10px; font-size: 1.2em; font-weight: 700; text-align:left; }
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; }
130#menubar dt a:hover                     { color: #eee;}
131
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}
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
150.content .titrePage                                             { padding: 10px 0 5px 10px; height: 30px; }
151.titrePage h1                                   { float: left; }
152.content .additional_info {padding: 10px; text-indent: 20px; color: #666; text-align:justify;font-size:100%; }
153.thumbnailCategories    { margin-left: 10px; }
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;}
168.thumbnails li img                              { border: 1px solid #222; border-left: 1px solid #444; border-bottom: 1px solid #444;}
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
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}
186
187.navigationBarSimple                                                    { color:#666; text-align: center; position:relative;}
188.navigationBarSimple span,
189.navigationBarSimple a                                          { height: 150px; width: 20px; border: 0; padding: 0; text-indent: -3000px; }
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;  }
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
271#imageHeaderBar .imageNumber { width: 70px; font-size: 3em; font-style: italic; color: #222; position: absolute; top: 20px; right:0; }
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; }
288#imageInfoRight { float: right; width: 350px; height: 40px; text-align: right; margin-bottom: 10px; }
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
327/****** Lost Password Page */
328#lostPassword label {float:none;}
329
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; }
361.icon_2         { background: url(elSelect/icon_2.gif) no-repeat 4px 50%; padding-left: 20px !important; }
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.