source: extensions/modus/css/base.css.tpl @ 31999

Last change on this file since 31999 was 28779, checked in by rvelices, 10 years ago

modus css details
File size: 8.8 KB
Line 
1BODY {
2        margin: 0;
3        padding: 0;
4        font-size: 13px;
5        font-family: Arial,Helvetica,sans-serif;
6        min-width: 300px; /*responsive layout*/
7        background-color: {$skin.BODY.backgroundColor};
8        color: {$skin.BODY.color};
9}
10
11A {
12        text-decoration:none;
13        color: {$skin.A.color};
14}
15
16A:hover {
17        text-decoration:underline;
18        color: {$skin['A:hover'].color};
19}
20
21A .pwg-icon {
22        opacity: 0.9;
23}
24A:hover .pwg-icon {
25        opacity: 1;
26}
27
28IMG {
29        border: 0; /*IE <= 9 adds border for linked images*/
30}
31
32H2 {
33        margin: 0;
34        padding: 2px 5px 3px 0;
35        text-align: left;
36        font-size: 20px;
37        font-weight: normal;
38}
39
40BLOCKQUOTE {
41        margin: 8px 10px; /*reduce default user agent margin too large for mobiles*/
42}
43
44INPUT, SELECT {
45        margin: 0;
46        font-size: 1em; /* <= some browsers don't set it correctly */
47}
48
49TABLE { /* horizontaly centered */
50        margin-left: auto;
51        margin-right: auto;
52}
53
54
55FORM { padding: 0; margin: 0; }
56
57
58{if !empty($skin.controls)}
59INPUT[type="text"], INPUT[type="password"], SELECT, TEXTAREA
60{if empty($skin.buttons)}
61,INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"]
62{/if}
63{
64{if !empty($skin.controls.backgroundColor)}
65        background-color: {$skin.controls.backgroundColor};
66{/if}
67{if !empty($skin.controls.gradient)}
68        {$skin.controls.gradient|cssGradient};
69{/if}
70{if !empty($skin.controls.color)}
71        color: {$skin.controls.color};
72{/if}
73{if !empty($skin.controls.border)}
74        border: {$skin.controls.border};
75{/if}
76}
77{/if}
78
79{if !empty($skin['controls:focus'])}
80INPUT:focus, TEXTAREA:focus {
81{if !empty($skin['controls:focus'].backgroundColor)}
82        background-color: {$skin['controls:focus'].backgroundColor};
83{/if}
84{if !empty($skin['controls:focus'].color)}
85        color: {$skin['controls:focus'].color};
86{/if}
87{if !empty($skin['controls:focus'].boxShadow)}
88        box-shadow: {$skin['controls:focus'].boxShadow};
89{/if}
90}
91{/if}
92
93
94{if !empty($skin.buttons)}
95INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"] {
96{if !empty($skin.buttons.backgroundColor)}
97        background-color: {$skin.buttons.backgroundColor};
98{/if}
99{if !empty($skin.buttons.gradient)}
100        {$skin.buttons.gradient|cssGradient};
101{/if}
102{if !empty($skin.buttons.color)}
103        color: {$skin.buttons.color};
104{/if}
105{if !empty($skin.buttons.border)}
106        border: {$skin.buttons.border};
107{/if}
108}
109{/if}
110
111{if !empty($skin.buttonsHover)}
112INPUT[type="button"]:hover, INPUT[type="submit"]:hover, INPUT[type="reset"]:hover {
113{if !empty($skin.buttonsHover.backgroundColor)}
114        background-color: {$skin.buttonsHover.backgroundColor};
115{/if}
116{if !empty($skin.buttonsHover.gradient)}
117        {$skin.buttonsHover.gradient|cssGradient};
118{/if}
119{if !empty($skin.buttonsHover.color)}
120        color: {$skin.buttonsHover.color};
121{/if}
122{if !empty($skin.buttonsHover.boxShadow)}
123        box-shadow: {$skin.buttonsHover.boxShadow};
124{/if}
125{if !empty($skin.buttonsHover.border)}
126        border: {$skin.buttonsHover.border};
127{/if}
128}
129{/if}
130
131FIELDSET {
132        padding: 1em;
133        margin: 1em 0.5em;
134        border: 1px solid gray;
135}
136
137LEGEND {
138        font-style: italic;
139        color: inherit; /*for IE*/
140}
141
142
143/**
144 * Content
145 */
146
147.titrePage {
148        padding: 3px 10px;
149        line-height: 24px;
150{if !empty($skin.pageTitle.backgroundColor)}
151        background-color: {$skin.pageTitle.backgroundColor};
152{/if}
153{if !empty($skin.pageTitle.gradient)}
154        {$skin.pageTitle.gradient|cssGradient}
155{/if}
156{if !empty($skin.pageTitle.color)}
157        color: {$skin.pageTitle.color};
158{/if}
159}
160
161{if !empty($skin.pageTitle.link.color)}
162.titrePage A {
163        color: {$skin.pageTitle.link.color};
164}
165{/if}
166
167{if !empty($skin.pageTitle.linkHover.color)}
168.titrePage A:hover {
169        color: {$skin.pageTitle.linkHover.color};
170}
171{/if}
172
173/* now revert text colors to dropdowns*/
174{if !empty($skin.pageTitle.color)}
175.titrePage .switchBox {
176        color: {$skin.BODY.color};
177}
178{/if}
179{if !empty($skin.pageTitle.link.color)}
180.titrePage .switchBox A {
181        color: {$skin.A.color};
182}
183{/if}
184
185{if !empty($skin.pageTitle.linkHover.color)}
186.titrePage .switchBox A:hover {
187        color: {$skin['A:hover'].color|default:$skin.A.color};
188}
189{/if}
190
191{if !empty($skin.pageTitle.textShadowColor)}
192.titrePage H2 A, #imageHeaderBar H2{
193        text-shadow: 1px 1px 3px {$skin.pageTitle.textShadowColor};
194}
195{/if}
196
197.content .navigationBar, .content .additional_info, .content .calendarBar {
198        margin: 8px 4px;
199        text-align: center;
200}
201
202.content .pageNumberSelected {
203        font-style: italic;
204        font-weight: bold;
205}
206
207.content .additional_info {
208        font-size: 110%;
209}
210
211.content .notification {
212  padding:0 25px;
213}
214
215/* category and tag results paragraphs on a quick search */
216.search_results {
217  font-size: 16px;
218  margin: 10px 16px;
219}
220
221/* actions */
222.categoryActions {
223        margin: 0 2px;
224        width: auto;
225        padding: 0;
226        text-indent: 0;
227        list-style: none;
228        text-align: center;
229        float: right;
230}
231
232.categoryActions LI {
233        display: inline;
234}
235
236.switchBox {
237        display: none;
238        position: absolute;
239        left: 0; top: 0; /*left, right set through js*/
240        padding: 0.5em;
241        z-index: 100;
242        text-align:left;
243        box-shadow: 2px 2px 5px gray;
244        background-color: {$skin.dropdowns.backgroundColor};
245}
246
247.switchBoxTitle {
248  border-bottom:1px solid gray;
249  padding-bottom:5px;
250  margin-bottom:5px;
251}
252
253#copyright {
254        clear: both;
255        font-size: 83%;
256        text-align: center;
257        margin: 0 0 10px 0;
258}
259
260A.wiki { cursor:help; }
261
262/* Loader gif new in 2.5 */
263.loader {
264  display: none;
265  position: fixed;
266  right: 0;
267  bottom: 0;
268}
269
270/* User comments */
271#comments {
272        padding-left: 5px;
273        padding-right: 5px;
274        clear: both; /*the main image and info table might float on picture page for large screens*/
275}
276
277.commentsList {
278        margin: 5px;
279        padding: 0;
280        list-style: none;
281}
282
283.commentElement {
284        border-radius: 5px;
285        margin: 5px 0;
286        padding: 2px 0 0 2px;
287        width: 100%;
288{if !empty($skin.comment.backgroundColor)}
289        background-color: {$skin.comment.backgroundColor};
290{/if}
291}
292
293.commentElement .description {
294        overflow: auto;
295        /*width: inherit;*/
296}
297
298#comments input[type="text"],
299#comments TEXTAREA {
300        max-width: 100%;
301        width: 100%;
302        -moz-box-sizing: border-box;
303        box-sizing: border-box;
304}
305
306.commentAuthor {
307        font-weight: bold;
308}
309
310.commentDate {
311        font-style: italic
312}
313
314#comments FORM P         {
315        margin: 5px 0;
316}
317
318
319/**
320 * Filter forms are displayed label by label with the input (or select...)
321 * below the label. Use an UL to make a group (radiobox for instance).
322 * Use a SPAN to group objects in line
323 */
324
325.filter UL {
326        display: block;
327        float: left;
328        margin: 0 1em 0 0;
329        padding: 0;
330}
331
332.filter LI {
333        list-style: none;
334        margin-bottom: 0.5em;
335}
336
337.filter P {
338        line-height: 2em;
339        margin-bottom: 0.1em;
340}
341
342.filter input[name="search_allwords"] {
343        width: 50%;
344        min-width: 240px;
345        max-width: 500px;
346}
347
348.filter>P {
349        margin-left: 1.5em;
350}
351
352.properties UL {
353        list-style: none;
354        margin: 0;
355        padding: 0;
356}
357
358.properties LI {
359        margin-bottom: 0.5em;
360        padding: 0;
361        line-height: 1.8em;
362        clear: left;
363}
364
365.properties SPAN.property {
366        font-weight: bold;
367        float: left;
368        width: 50%;
369        text-align: right;
370        margin: 0;
371        padding: 0 0.5em 0 0;
372}
373
374.properties P {
375        text-align: center;
376        margin-top: 2em;
377        margin-bottom: 2em;
378}
379
380
381
382
383/* jQuery datepicker */
384/*IMG.ui-datepicker-trigger {
385        cursor : pointer;
386}*/
387
388
389/**
390 * Default colors
391 */
392
393 /* So that non-links are slightly greyed out */
394.content .navigationBar, SPAN.calItem, TD.calDayCellEmpty {
395        color: gray;
396}
397
398
399.errors { /* Errors display */
400        color: red;
401        font-weight: bold;
402        margin: 5px;
403        border: 1px solid red;
404        background: #ffe1e1 url(../../default/icon/errors.png) no-repeat center right;
405        padding: 10px 50px 10px 10px;
406}
407
408/* Informations box */
409.infos {
410        color: #002000;
411        background: #98fb98 url(../../default/icon/infos.png) no-repeat center right;
412        margin: 5px;
413        padding: 10px 50px 10px 10px;
414}
415
416/* Header message like upgrade*/
417.header_msgs {
418        text-align:center;
419        font-weight: bold;
420        color:#696969;  /* dimgray */
421        background-color: #d3d3d3;
422        margin: 1px;
423        padding: 1px;
424}
425
426.message {
427  color:white;
428  background-color:#666;
429  margin-bottom:1em;
430  padding: 12px;
431  border-radius: 3px;
432}
433
434/* image comments rules */
435
436#commentAdd {
437        float: left;
438        padding: 0 1%;
439        width: 48%;
440}
441
442#pictureCommentList {
443        float: right;
444        width: 50%;
445}
446
447/*#pictureCommentList .commentsOrder    { float: left; margin-bottom: 5px;}
448#pictureCommentList .navigationBar      { float: right; margin-bottom: 5px;}*/
449#pictureComments h4                                     { margin: 0;}
450
451
452
453@media screen and (max-width:480px) {
454        SELECT,INPUT { /*controls in fieldset should not trigger "scroll"*/
455                max-width: 270px;
456        }
457}
458
459
460#albumActionsSwitcher {
461        display: none;
462}
463
464@media screen and (max-width:640px) {
465        #albumActionsSwitcher {
466                display: block;
467                width: 42px;
468                padding-top: 2px;
469                text-align: right;
470                float: right;
471        }
472
473        #albumActionsSwitcher + .categoryActions {
474                display: none;
475                position: absolute;
476                z-index: 1;
477                background-color: {$skin.dropdowns.backgroundColor};
478                padding: 10px 5px 5px;
479                box-shadow: 2px 2px 5px gray;
480                opacity: 0.95;
481                text-align: left;
482                min-width: 180px;
483        }
484       
485        #albumActionsSwitcher + .categoryActions LI{
486                display: block;
487        }
488       
489        #albumActionsSwitcher + .categoryActions .pwg-button{
490                display: block;
491        }
492       
493        #albumActionsSwitcher + .categoryActions .pwg-button-text{
494                display: inline;
495                margin-left: 5px;
496                text-transform: capitalize;
497        }
498}
Note: See TracBrowser for help on using the repository browser.