source: extensions/luciano/theme.css @ 12523

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

compatibility with Piwigo 2.3

File size: 18.2 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     { border: 1px solid #666; }
32select                  { background-color: #222; color: #666; }
33input                           { border: 1px solid #444; background-color: #222; color: #666; }
34input[type="submit"]                            { background-color: #666; color: #222; }
35input[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 }
57h2 a                                    { margin-left: 3px; }
58
59#the_page                                                                       { position: relative; width: 1024px; margin: 0 auto; text-align: center }
60#theHeader,.content                     { text-align: left }
61
62#theHeader                                                      { padding-top: 20px; margin-bottom: 20px; }
63#theHeader h1                                           { color: #fff; font-size: 1.4em }
64#theHeader h1,
65#theHeader h1 a,
66#theHeader h1 a:visited,
67#theHeader h1 a:hover                   {color: #fff; border: none }
68
69#theHeader p                                                    { margin-left: 20px; margin-top: -4px; margin: -4px 0 10px 20px; color: #666; border: none }
70
71#headerMenu                                                     { position: absolute; top: 40px; right: 0  }
72#headerMenu li                                          { float: left; margin-left: 40px }
73
74#imagerotator                                           {position: relative; margin-top: 0px; height: 100px }
75#imagerotator img                               {position: absolute; top: 0; left: 0 }
76
77#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 }
78#copyright span                         { color: #444; }
79#copyright a,
80#copyright a:visited,
81#copyright a:hover                      { color: #444; }
82#copyright a:hover                      { color: #666; }
83#copyright .cName                       { color: #555; font-weight: bold }
84
85/***** LAYOUT GALLERY ****/
86
87#rss            { position: absolute; top: 10px; right: 0;  }
88#rss a          { display: block; width: 28px; height: 28px; text-indent: -2000px; border: 0;   background: transparent url('icon/rss.png'); }
89
90.content {
91  float: right;
92  width: 750px;
93  margin-bottom: 10px;
94  padding-bottom: 10px;
95  position: relative;
96  background: transparent url(skin/750darkBottom.png) bottom left;
97}
98.content .titrePage {
99 background: transparent url(skin/750darkTop.png) no-repeat;
100}
101.content dl {margin: 25px;}
102
103
104#menubar                { float: left; width: 264px; margin-bottom: 20px; text-align: left; color: #888; }
105#menubar dl     { width: 264px; background: transparent url(skin/264grey3.png); margin-bottom: 10px; }
106#menubar dt     { margin-left: 10px; padding-top: 10px; margin-bottom: 10px; font-size: 1.2em; font-weight: 700 }
107
108#menubar dd                                             { width: 264px; background: transparent url(skin/264grey3.png) bottom left; }
109#menubar dd a,
110#menubar dd a:visited   { color: #eee; }
111#menubar dd a:hover             { color: #f70; }
112
113#menubar dt a,
114#menubar dt a:visited           { color: #f70; }
115#menubar dt a:hover                     { color: #eee; }
116
117#menubar dd ul,
118#menubar form { padding: 0 5px 10px 30px; }
119
120#menubar #menuTagCloud                  { padding: 0 10px 10px 15px; }
121#menubar #menuTagCloud span { margin-right:5px; white-space:nowrap; }
122
123#menubar dd ul ul { padding-left: 15px; }
124
125#menubar #quickconnect div { margin-bottom: 3px; }
126
127#menubar .totalImages   { margin:0 10px; padding-bottom:10px; }
128#menubar .actions                       { padding:0; }
129#menubar .button                        { float:right; margin-right:10px; }
130
131/* ELEMENTS */
132
133.titrePage                                              { padding: 10px 0 5px 10px; height: 30px; }
134.titrePage h1                                   { float: left; }
135.additional_info                        { clear: both; padding: 10px; text-indent: 50px; color: #333; text-align:justify;}
136.thumbnailCategories    { margin-left: 10px; clear:both; }
137
138.thumbnailCategories li                         { background: transparent url(skin/catBg.png) 0 0; width: 355px; height: 170px; float: left; margin-right: 15px; margin-top: 10px }
139.thumbnailCategories li.hover   { background: transparent url(skin/catBg.png) 0 -170px; }
140
141.thumbnailCategories .illustration              { float: left; width: 150px; margin: 10px; }
142.thumbnailCategories .description               { float: right; width: 180px; margin-top: 10px; height: 160px; overflow:hidden; }
143.thumbnailCategories .description h3    { margin-bottom: 10px; font-weight: 700; color: #f70; }
144.thumbnailCategories .Nb_images                         { font-size: 0.8em; margin-bottom: 10px; }
145.thumbnailCategories .desc                                              { font-size: 0.9em; }
146
147.thumbnails                                                             { margin-left: 10px; min-height: 540px; height: auto !important; height: 540px; text-align: center;}
148.thumbnails li                                          { float: left; display: inline; width: 170px; height: 170px; margin-left: 10px; margin-bottom: 10px; background: transparent url(skin/thumbBg.png) 0 0;}
149.thumbnails li.hover                    { background: transparent url(skin/thumbBg.png) 0 -170px; }
150.thumbnails li .wrap2           { width:170px; height:172px; display:table-cell; vertical-align:middle;}
151.thumbnails li img                              { margin: 10px; border: 1px solid #222; border-left: 1px solid #444; border-bottom: 1px solid #444;}
152.thumbnails li.hover img        { border: 1px solid #111; border-left: 1px solid #222; border-bottom: 1px solid #222; }
153
154.thumbnails .thumbLegend { display:none; }
155
156.categoryActions                { float:right; margin-right: 10px; }
157.categoryActions li     { float: left; margin-left:5px; display: inline; }
158#order                                                  { float: left; margin: 2px 5px 0 0;}
159#orderText                                      { float: left; margin: 2px 8px 0 0; }
160#playSlideshow                  { width: 200px; float: left; margin-left: 20px; margin-top: 10px; }
161#playSlideshow a                { color: #666; }
162
163.navigationBar                                          { clear: both; color:#444; text-align: right; padding: 10px 30px }
164.navigationBar span,
165.navigationBar a                                        { border: 1px solid; padding: 0px 5px; }
166.navigationBar a,
167.navigationBar a:visited        { color: #999}
168.navigationBar a:hover          { color: #eee}
169
170.navigationBarSimple                                                    { color:#666; text-align: center; }
171.navigationBarSimple span,
172.navigationBarSimple a                                          { height: 150px; width: 20px; border: 0; padding: 0; text-indent: -3000px; }
173.navigationBarSimple .prew                              { position: absolute; top: 235px; left: 0px; background: transparent url(icon/prew.png) no-repeat scroll; }
174.navigationBarSimple .next                              { position: absolute; top: 235px; right: 0px; background: transparent url(icon/next.png) no-repeat scroll;  }
175.navigationBarSimple a.prew:hover { background: transparent url(icon/prew.png) 0 -150px no-repeat scroll; }
176.navigationBarSimple a.next:hover { background: transparent url(icon/next.png) 0 -150px no-repeat scroll; }
177
178/****** CALENDAR => Not fixed yet */
179
180table.calMonth tbody td,
181table.calMonth tbody td div.calImg { height:80px; padding:1px 2px; width:80px; }
182
183.content DIV.calendarViews                      { display: block; float: right; margin: -20px 0 0; }
184.content DIV.calendarCalBar                     { margin: 10px 10px; text-align: left; }
185SPAN.calItem, SPAN.calItemEmpty { font-weight: bold; margin: 0 1px; }
186SPAN.calItem A                                                                  { border:0 }
187SPAN.calCalHead                                                                 { font-weight: bold; font-size: 110%; margin: 0 2px; }
188SPAN.calCal                                                                                     { margin: 0 2px; }
189
190.calendarBar                            { margin:15px; }
191TABLE.calMonth                  { border: none; margin:10px auto; }
192TD.calDayCellFull,
193TD.calDayCellEmpty,
194TD.calDayCellBlank      { vertical-align: top; font-weight: bold; font-size: 18px; }
195TD.calDayHead                           { font-weight: bold; font-size: 12px; text-align: center; padding:10px; }
196DIV.calImg                                      { overflow: hidden; vertical-align: bottom; z-index: 1; position: relative; }
197.calImg img                                     {       position: relative;     border: 0; }
198.calBackDate                            { padding-left: 4px;    padding-top: 0px;       z-index: 2;     position: absolute;     vertical-align: top; color: #000; }
199.calForeDate                            { padding-left: 5px;    padding-top: 1px;       z-index: 3;     position: absolute;     vertical-align: top; color: #fff; }
200
201/****** TAGS */
202#fullTagCloud                           { font-size:120%; margin:1em 2em; padding:0; text-align:justify; }
203#fullTagCloud span      { margin:0 2px; white-space:nowrap; }
204
205.tagLevel5 { font-size: 150% !important; }
206.tagLevel4 { font-size: 140% !important; }
207.tagLevel3 { font-size: 120% !important; }
208.tagLevel2 { font-size: 100% !important; }
209.tagLevel1 { font-size: 80%  !important; }
210
211#theTagsPage TABLE { width:100%; }
212#theTagsPage TD { vertical-align: top; }
213
214FIELDSET.tagLetter                      { border: 1px solid #444; margin: 0.5em; padding: 10px; }
215LEGEND.tagLetterLegend  { display:block; border: 1px solid #444;        font-size:120%; font-weight: bold; padding: 0 5px; font-style: normal; }
216TABLE.tagLetterContent  { width:100%;   border-collapse:collapse; }
217
218/****** SEARCH PAGE */
219FORM.filter FIELDSET    { border: 1px solid; padding: 1em;      margin: 1em; overflow: hidden; }
220FORM.filter legend              { display: block; padding:5px;}
221FORM.filter label                       { width:auto; clear:none; margin-top:0; }
222
223FORM.filter FIELDSET UL { margin: 0; }
224FORM.filter FIELDSET UL,
225FORM.filter FIELDSET LABEL { display: block; float: left;       margin-right: 1em; padding: 0; }
226FORM.filter FIELDSET LI {       list-style: none;       margin-bottom: 0.5em; }
227FORM.filter FIELDSET LI LABEL { display: inline; float: none; }
228FORM.filter FIELDSET UL.tagSelection LABEL { display: inline;   float: none; margin-right:0.5em; }
229
230FORM.filter FIELDSET LABEL INPUT,
231FORM.filter FIELDSET LABEL SELECT,
232FORM.filter FIELDSET LABEL SPAN,
233FORM.filter FIELDSET LABEL TEXTAREA { display: block; margin: 0.5em 0; }
234
235FORM.filter FIELDSET * LABEL INPUT,
236FORM.filter FIELDSET * LABEL SELECT,
237FORM.filter FIELDSET * LABEL TEXTAREA,
238FORM.filter FIELDSET LABEL SPAN INPUT,
239FORM.filter FIELDSET LABEL SPAN SELECT,
240FORM.filter FIELDSET LABEL SPAN TEXTAREA { display: inline;     vertical-align: top; margin: 0 0.5em 0 0; }
241
242FORM.filter FIELDSET UL.tagSelection LI LABEL INPUT {   margin-right:0; }
243FORM.filter FIELDSET LABEL SPAN SELECT { margin: 0; }
244FORM.filter FIELDSET P { clear: left;   display: block; }
245FORM.filter INPUT[type="submit"] { margin-top: 1em; }
246
247FORM.filter select.categoryList { height:20em; width:500px;}
248
249/****** PHOTO */
250#imageHeaderBar         { height: 30px;}
251
252#slidshowToolBar        { position: absolute; top: 60px; margin-left: 400px; height: 33px;  }
253
254#imageHeaderBar .imageNumber { width: 70px; font-size: 3em; font-style: italic; color: #222; position: absolute; top: 80px; left: 20px; }
255#imageHeaderBar .browsePath     { float: left; }
256.randomButtons  { float: right; }
257.randomButtons li       { float: left; margin-left: 15px;}
258
259#theImage                               { clear: left; text-align: left; margin-top: 20px; }
260#imageContainer { position: relative; width: 1024px; height: 600px; }
261#theImg                                 { display: block; margin: 0 auto; border: none; text-align: center; }
262
263#linkThumbs                     { position: absolute; top: 0; left: 400px; width: 224px; height: 600px; }
264#linkPrev                               { position: absolute; top: 0; left: 0; width: 150px; height: 600px; text-align: left; background: transparent url(icon/thumbPrev.png) center left no-repeat; }
265#linkNext                               { position: absolute; top: 0; left: 874px; width: 150px; height: 600px; text-align: right; background: transparent url(icon/thumbNext.png) center right no-repeat; }
266#linkPrev img           { margin-left: 0; margin-top: 225px; border: 1px solid #f70; }
267#linkNext img           { margin-right: 0; margin-top: 225px; border: 1px solid #f70; }
268
269#imageInfo                      { margin-top: 10px; }
270#imageInfoLeft  { float: left; width: 500px; text-align: left; margin-bottom: 10px; }
271#imageInfoRight { float: right; width: 350px; height: 40px; text-align: right; margin-bottom: 10px; }
272
273#imageTags                      { margin-top:5px; }
274#ratingSummary  { margin-bottom: 3px; }
275
276#rateForm input         { height: 25px; margin: 0}
277
278.rateButtonEmpty,                               
279.rateButtonReset,                               
280.rateButtonHalf,                               
281.rateButtonFull,                               
282.rateButtonUserFull,                           
283.rateButtonUserEmpty,                   
284.rateButtonUserHalf             { padding:0; border:0; cursor: pointer;}
285
286.rateButtonSelected             { font-weight:bold; font-size:120%; }
287.rateButtonEmpty                        { width:25px; background: url('icon/star.png') 0 0 no-repeat scroll; }
288.rateButtonReset                        { width:25px; background: url('icon/star.png') 0 -25px no-repeat scroll; }
289.rateButtonHalf                                 { width:25px; background: url('icon/star.png') 0 -50px no-repeat scroll; }
290.rateButtonFull                                 { width:25px; background: url('icon/star.png') 0 -75px no-repeat scroll; }
291.rateButtonUserFull             { width:25px; background: url('icon/star.png') 0 -100px no-repeat scroll; }
292.rateButtonUserEmpty    { width:25px; background: url('icon/star.png') 0 -125px no-repeat scroll; }
293.rateButtonUserHalf             { width:25px; background: url('icon/star.png') 0 -150px no-repeat scroll; }
294
295.rateButtonEmpty2                       { width:25px; background: url('icon/star.png') 0 0 no-repeat scroll; }
296.rateButtonHalf2                        { width:25px; background: url('icon/star.png') 0 -50px no-repeat scroll; }
297.rateButtonFull2                        { width:25px; background: url('icon/star.png') 0 -75px no-repeat scroll; }
298.rateButtonUserFull2    { width:25px; background: url('icon/star.png') 0 -100px no-repeat scroll; }
299.rateButtonUserEmpty2   { width:25px; background: url('icon/star.png') 0 -125px no-repeat scroll; }
300.rateButtonUserHalf2    { width:25px; background: url('icon/star.png') 0 -150px no-repeat scroll; }
301
302.rateShow                                                       { float: right; width: 125px; height: 25px; background: url('icon/star.png') repeat-x scroll;}
303.rateFull1                                              { display: block; float: left; width: 25px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;}
304.rateFull2                                              { display: block; float: left; width: 50px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;}
305.rateFull3                                              { display: block; float: left; width: 75px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;}
306.rateFull4                                              { display: block; float: left; width: 100px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;}
307.rateFull5                                              { display: block; float: left; width: 125px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;}
308.rateHalf                                                       { display: block; float: left; width: 25px; height: 25px; background: url('icon/star.png') 0 -50px repeat-x scroll;}
309
310/****** Lost Password Page */
311#lostPassword label {float:none;}
312
313/* OTHERS */
314
315.content form   { margin: 10px; }
316
317.errors,
318.infos                          { margin: 10px; color: #fff; font-weight: 700; }
319.errors p,
320.infos p                                { margin: 30px 0 10px ; color: #900; }
321.errors li,
322.infos li                               { list-style: decimal; margin-left: 30px;}
323
324.idLink                         { margin-top: 20px; }
325
326/* MOOTOOLS PLUGIN */
327
328.elSelect                                                               { width: 160px; height: 20px; background: transparent url(elSelect/select_bg.png) no-repeat 0 0; }
329.elSelect .clear                                { clear: both; }
330
331.elSelect .selected                             { color: #333 !important; background-color: #999 !important; }
332.elSelect .selectedOption       { color: #222; float: left; padding: 4px 0 0 6px; width: 87px; font-weight: bold; font-size: 12px; overflow: hidden; cursor:pointer; }
333.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; }
334.elSelect .disabled                             { color:#999; background-color: #333; border-left: solid 1px #555; border-right: solid 1px #555; }
335.elSelect .dropDown                             { width: 23px; height: 20px; float: right; background: url(elSelect/select_arrow.png) no-repeat 0% 0%; cursor:pointer;}
336.elSelect .optionsContainerTop                          { background: url(elSelect/top_center.gif) repeat-x 0% 0%; position: absolute; width: 100%; height: 5px; }
337.elSelect .optionsContainerTop div                      { background: url(elSelect/top_left.gif) no-repeat 0% 0%; width: 100%; height: 5px; }
338.elSelect .optionsContainerTop div div          { background: url(elSelect/top_right.gif) no-repeat 100% 0%; width: 100%; height: 5px; }
339.elSelect .optionsContainerBottom                       { position: absolute; margin: -5px 0 0 0; width: 100%; height: 5px; background: url(elSelect/bottom_center.gif) repeat-x 0% 0%;}
340.elSelect .optionsContainerBottom div   { background: url(elSelect/bottom_left.gif) no-repeat 0% 0%; width: 100%; height: 5px; }
341.elSelect .optionsContainerBottom div div { background: url(elSelect/bottom_right.gif) no-repeat 100% 0%; width: 100%; height: 5px; }
342.elSelect .optionsContainer                                             { position: absolute; display: none; z-index: 1; }
343.icon_1         { background: url(elSelect/icon_1.gif) no-repeat 4px 50%; padding-left: 20px !important; }
344.icon_2         { background: url(elSelect/icon_2.gif) no-repeat 4px 50%; padding-left: 20px !important; }
Note: See TracBrowser for help on using the repository browser.