source: extensions/modus/css/picture.css.tpl @ 26836

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

modus ui simplification

File size: 5.1 KB
Line 
1
2#imageToolBar .imageNumber {
3        float: right;
4        margin:-28px 9px 0 0;
5}
6
7#imageHeaderBar H2 {
8        display: inline;
9        text-align: center;
10        padding: 0;
11}
12
13#imageToolBar {
14        text-align: center;
15        margin-bottom: 2px;
16        padding-top: 2px;
17        height: 28px;
18{if !empty($skin.pictureBar.backgroundColor)}
19        background-color: {$skin.pictureBar.backgroundColor};
20{/if}
21}
22
23#imageToolBar .actionButtons {
24        float: left;
25}
26
27#imageToolBar .navigationButtons   {
28        float: right;
29}
30
31#imageToolBar .pwg-button {
32        width:42px;
33}
34
35#theImage {
36        text-align: center;
37}
38
39#imageInfos {
40        position: relative; /*for IE7 positioning of "who can see this photo"*/
41        min-height: 166px;
42}
43
44#linkPrev {
45        float: left;
46        margin: 0 10px 0 5px;
47}
48
49#linkNext {
50        float: right;
51        margin: 0 5px 0 10px;
52        text-align: right;
53}
54
55DIV.thumbHover { /* first & last holders only*/
56        width: {$SQUARE_WIDTH}px;
57        height: {$SQUARE_WIDTH}px;
58        border: 1px solid #ccc;
59  padding: 0 5px;
60        -moz-box-sizing: border-box;
61        box-sizing: border-box;
62}
63
64.imageInfoTable UL { /*this is the album list*/
65        margin: 0;
66        padding: 0 0 0 1em;
67        list-style-type: square;
68}
69
70.rateButton, .rateButtonSelected, .rateButtonStarFull, .rateButtonStarEmpty  {
71        padding:0;
72        border: 0 !important;
73{if !empty($skin.controls.boxShadow) || !empty($skin.buttons.boxShadow) || !empty($skin.buttonsHover.boxShadow)}
74        box-shadow: none !important;
75{/if}
76}
77
78.rateButton, .rateButtonStarFull, .rateButtonStarEmpty {
79        cursor: pointer;
80}
81
82.rateButtonSelected {
83        font-weight: bold;
84        font-size: 120%;
85}
86
87.rateButtonStarFull {
88        background: transparent url('../../default/icon/rating-stars.gif') no-repeat -16px center !important;
89        width:16px;
90}
91
92.rateButtonStarEmpty {
93        background: transparent url('../../default/icon/rating-stars.gif') no-repeat 0 center !important;
94        width:16px;
95}
96
97.imageInfoTable {
98        display:table;
99        margin: auto;
100        font-family: Tahoma,Verdana,Helvetica,Arial,sans-serif;
101}
102
103.imageInfo {
104        display: table-row;
105        line-height: 20px;
106}
107
108.imageInfo DT {
109        display:table-cell;
110        text-align:right;
111        font-weight:bold;
112        padding-right:0.5em;
113}
114
115.imageInfo DD {
116        display:table-cell;
117        text-align:left;
118        font-weight:normal;
119}
120
121
122
123
124
125@media screen {
126/*picture page wide screen*/
127.wide #theImage {
128        display: inline;
129        float: left;
130        width: 76.1%; /*min default picture derivative width*/
131}
132
133.wide #imageInfos {
134        margin-left: 76.5%; /*default picture derivative width + ~ 5px; must have enough space for thumbs*/
135        border-radius: 8px 0 0 8px;
136{if !empty($skin.pictureWideInfoTable.backgroundColor)}
137        background-color: {$skin.pictureWideInfoTable.backgroundColor};
138{/if}
139}
140
141.wide .navThumbs {
142        min-width: {2*$SQUARE_WIDTH+2}px;
143        width: 90%;
144        max-width: {2*$SQUARE_WIDTH+40}px;
145        height: {$SQUARE_WIDTH+4}px;
146        margin: auto;
147        padding-top: 10px;
148}
149
150.wide .navThumb {
151        width: {$SQUARE_WIDTH}px;
152        height: {$SQUARE_WIDTH}px;
153        margin: 0 !important;
154        overflow: hidden;
155        text-align: left;
156}
157
158.wide .thumbHover {
159        width: {$SQUARE_WIDTH}px;
160        height: {$SQUARE_WIDTH}px;
161        position: absolute;
162}
163
164
165.wide .prevThumbHover:hover { background: transparent url(../images/img_prev.png) no-repeat center center;}
166.wide .nextThumbHover:hover { background: transparent url(../images/img_next.png) no-repeat center center;}
167
168.wide .imageInfoTable {
169        display: block;
170        padding: 0 5px 0 10px;
171        margin: 0; /*need this for ie7 override in fix-ie7*/
172}
173
174.wide .imageInfo DT {
175        display: block;
176        text-align: left;
177        padding: 0;
178}
179
180.wide .imageInfo DD {
181        display: block;
182        text-align: left;
183        margin: 0 0 5px 10px;
184}
185
186{if !empty($skin.widePictureBar)}
187        .wide #imageToolBar {
188{if !empty($skin.widePictureBar.backgroundColor)}
189                background-color: {$skin.widePictureBar.backgroundColor};
190{/if}
191        }
192{/if}
193}
194
195@media screen and (max-width:800px),
196        screen and (-webkit-min-device-pixel-ratio:1.3) {
197        .navThumb IMG {
198                max-width: {($SQUARE_WIDTH/2)|intval}px;
199                height: auto;
200        }
201
202        .wide .navThumbs {
203                height: {18+($SQUARE_WIDTH/2)|intval}px;
204                min-width: {$SQUARE_WIDTH+6}px;
205                max-width: {$SQUARE_WIDTH+40}px;
206        }
207
208        .navThumb, .thumbHover { /* applies to wide&non wide including first & last*/
209                width: {($SQUARE_WIDTH/2)|intval}px !important;
210                height: {($SQUARE_WIDTH/2)|intval}px !important;
211                line-height: 1; /*for first & last*/
212        }
213
214}
215
216
217
218
219#imageActionsSwitch {
220        display: none;
221}
222@media screen and (max-width:600px) {
223        #imageActionsSwitch {
224                display: block;
225                text-align: left;
226                float: left;
227        }
228
229        .actionButtonsWrapper {
230                position: relative;
231        }
232
233        .actionButtonsWrapper .actionButtons {
234                display: none;
235                position: absolute;
236                z-index: 1;
237                min-width: 200px;
238                background-color: {$skin.dropdowns.backgroundColor};
239                padding-top: 10px;
240                box-shadow: 2px 2px 5px gray;
241                opacity: 0.95;
242        }
243
244        #imageToolBar .actionButtons .pwg-button {
245                display: block;
246                width: auto;
247                text-align: left;
248                height: 32px;
249                padding-left: 5px;
250                padding-right: 5px;
251        }
252
253        #imageToolBar .actionButtons .pwg-button-text {
254                display: inline;
255                margin-left: 5px;
256                text-transform: capitalize;
257        }
258
259        .imageInfoTable {
260                padding-top: 5px;
261                clear: both;
262        }
263}
264
Note: See TracBrowser for help on using the repository browser.