source: trunk/themes/elegant/theme.css @ 13789

Last change on this file since 13789 was 13789, checked in by Zaphod, 12 years ago

feature 2587: slideshow & calendar pages layout update
File size: 8.8 KB
Line 
1/* backgorunds */
2
3html, body                                                                      { background-color: #111;}
4
5#content, .content                                                      { background-color: #222;}
6.content .titrePage                                                     { background-color: #111;}
7
8#menubar, #the_page #menuSwitcher.menuhidden    { background-color: #222;}
9
10#thePicturePage, #imageHeaderBar                        { background-color: #111;}
11#imageInfos, #infoSwitcher.infohidden           { background-color: #333;}
12#thePicturePage #comments                                       { background-color: #333;}
13#pictureCommentList li                                          { background-color: #444;}
14#pictureCommentList .commentElement                     { background-color: transparent;}
15.calendarTitle                                                          { background-color: #222;}
16
17.switchBox, .header_notes                                       { background-color: #555;}
18.thumbnailCategory, .commentElement                     { background-color: #333;}
19.message                                                                        { background-color: #666;}
20
21INPUT[type="text"], INPUT[type="password"],
22INPUT[type="button"], INPUT[type="submit"],
23INPUT[type="reset"], INPUT[type="file"],
24SELECT, TEXTAREA                                                        { background-color: #555;}
25INPUT:focus, SELECT:focus, TEXTAREA:focus       { background-color: #666;}
26
27
28/* font colors */
29
30body, legend                                                                    { color: #aaa;}
31a                                                                                       { color: #ccc;}
32a:hover                                                                                 { color: #fff;}
33INPUT.rateButton                                                        { color: #fff;}
34H1, H3, INPUT.rateButtonSelected                        { color: #ccc;}
35.message                                                                        { color: #fff;}
36.commentContent .comments_toggle:hover          { color: #fff;}
37INPUT[type="text"], INPUT[type="password"],
38INPUT[type="button"], INPUT[type="submit"],
39INPUT[type="reset"], INPUT[type="file"],
40SELECT, TEXTAREA                                                        { color: #ccc;}
41INPUT:focus, SELECT:focus, TEXTAREA:focus       { color: #fff;}
42
43
44/* borders */
45
46#content,.content, .content .titrePage          { border-bottom: 2px solid #444;}
47#imageHeaderBar                                                                 { border: solid 0 #444; border-bottom-width:2px;}
48#copyright                                                                      { border-top-width:2px;}
49#content .calendarTitleBar                                      { border-bottom: none;}
50.calendarTitle                                                          { border-top: 2px solid #444;}
51.switchBox                                                                      { border: 1px solid #000;}
52.switchBoxTitle                                                                 { border-bottom: 1px solid #444;}
53FIELDSET, INPUT, SELECT, TEXTAREA                       { border: 1px solid #777;}
54
55
56
57
58/* icons */ 
59
60.pwg-icon                                                                       { background-image: url(../default/s26/outline_808080.png);}
61A:hover .pwg-icon                                                       { background-image: url(../default/s26/outline_ffffff.png);}
62
63
64/* general rules */
65
66body            { margin: 5px 0;}
67a:hover                 { border-bottom: none;}
68#copyright      { padding:0 4px 0 0; text-align:right;}
69
70
71/* content */
72
73#the_page  #content.menushown, #the_page > .content.menushown, .contentWithMenu         { margin-left: 240px;}
74#the_page  #content.menuhidden, #the_page > .content.menuhidden                                         { margin-left: 35px;}
75#the_page  #content, #the_page > .content                                                                                       { margin-right: 0;}
76
77#content,.content                       { margin-bottom: 4px; padding-bottom: 4px;}
78#thePicturePage #content        { padding-bottom: 0;}
79.content .titrePage                     { padding:0; margin-bottom:4px;}
80.content .titrePage H2          { line-height: 20px; margin: 0; padding: 8px 0 0 2px;}
81
82
83/* menubar */
84
85#menubar  {
86        display: inline;
87        width: 230px;
88        float: left;
89        margin: 28px 8px 10px 0;
90        padding: 0;
91}
92#menubar DT                             { text-align: left;}
93#menubar dd                             { padding: 0 0 1em 1em;}
94#menubar .pwg-icon-filter { display: none;}
95
96
97/* switchers */
98
99#menuSwitcher {
100        display: block;
101        text-align: center;
102        height: 32px;
103        cursor: pointer;
104        float: left;
105        margin: 28px 0 0 -34px;
106}
107
108
109#imageInfos, #infoSwitcher.infohidden           { border-radius: 10px 0 0 10px;}
110#menubar, #the_page #menuSwitcher.menuhidden    { border-radius: 0 10px 10px 0;}
111#the_page #menuSwitcher.menuhidden                      { width: 25px; margin-left: 0;}
112
113#infoSwitcher {
114        display: block;
115        text-align: center;
116        height: 32px;
117        cursor: pointer;
118        position:absolute;
119        left:75%;
120        top:0;
121        margin: 10px 0 0 7px;
122        z-index:99;
123}
124
125#infoSwitcher.infohidden {
126        width:25px;
127        top:10px;
128        right:0;
129        left:auto;
130        margin:0;
131}
132
133#slideshow #theImage                    { width: 100%; margin: auto; overflow: visible;}
134#theImage.infohidden            { width: 100%;}
135
136#commentsSwitcher                                       { float: left; margin: 2px 0; cursor:pointer;}
137.noCommentContent #commentsSwitcher     { display: none;}
138
139.switchArrow                            { width: 16px; height: 16px; margin: 8px 5px 8px 4px;}
140.switchArrow                            { background: transparent url("icon/arrows_ccc.png");}
141.switchArrow:hover                      { background: transparent url("icon/arrows_fff.png");}
142.menuhidden .switchArrow                { background-position: 0 0;}
143.menushown   .switchArrow               { background-position: -16px 0;}
144.infohidden .switchArrow                { background-position: -16px 0;}
145.infoshown   .switchArrow               { background-position: 0 0;}
146.commentshidden .switchArrow    { background-position: -48px 0;}
147.commentsshown   .switchArrow   { background-position: -32px 0;}
148
149
150/* switchboxes */
151
152.switchBox {
153    border-radius: 4px 4px 4px 4px;
154    padding: 0.5em 10px;
155    text-align: left;
156    z-index: 100;
157}
158.derivativeSizeDetails                          { display: none;}
159
160/* thumbnails */
161
162#thumbnails                                             { padding-top: 5px;}
163.thumbnails IMG                                                 { margin-bottom: 0; vertical-align: middle;}
164.thumbnailCategory DIV.illustration,
165.commentElement DIV.illustration                { margin: 2px; text-align: center;}
166
167
168/* picture page */
169
170.contentWithMenu #imageHeaderBar        { padding: 0;}
171#imageHeaderBar                                                 { padding: 0 0 0 10px;}
172#imageHeaderBar                                                 { width: auto;}
173#imageHeaderBar h2                                      { font-size: 100%; font-weight: inherit;}
174#imageHeaderBar .browsePath {
175        display:inline-block;
176        float:none;
177        font-size:120%;
178        line-height:20px;
179        padding: 8px 0 0 2px;
180        font-weight:bold;
181        margin:0;
182}
183#imageToolBar .imageNumber                      { display: inline-block; float: right; line-height: 26px; margin: 0 2px 0 0; min-width: 40px; text-align: center;}
184#imageToolBar                                           { margin-top: -28px; margin-bottom: 0; float: right;}
185#thePicturePage .pwg-button                     { width: 26px;}
186#thePicturePage .actionButtons          { margin-right: 26px;}
187
188#theImageAndInfos {
189        display: block;
190        width: 100%;
191        position: relative;
192}
193#theImage {
194        display: inline-block;
195        width: 75%;
196        vertical-align: top;
197        overflow: auto;
198        padding: 10px 0 5px 0;
199}
200
201.rateButtonStarFull                                     { background: url('icon/rating-stars.png') no-repeat -16px center; width:16px;}
202.rateButtonStarEmpty                            { background: url('icon/rating-stars.png') no-repeat 0 center; width:16px;}
203
204
205/* image infos */
206
207#imageInfos {
208        display: inline-block;
209        width: 24.5%;
210        vertical-align: top;
211        padding-top: 35px;
212        padding-bottom: 5px;
213        margin: 10px 0 10px 0.5%;
214        word-wrap:break-word;
215}
216
217#imageInfos .navThumbs                          { width: 250px; height: 130px; margin: auto; padding: 0 5px;}
218#imageInfos .navThumb                           { position: relative; width: 120px; height: 120px; margin: 0; overflow: hidden;}
219#imageInfos #linkPrev                           { float: left;}
220#imageInfos #linkNext                           { float: right;} 
221#imageInfos .thumbHover                                 { position: absolute; width: 100%; height: 100%;}
222#imageInfos .prevThumbHover                     { background: transparent url(icon/none.png) no-repeat center center;}
223#imageInfos .prevThumbHover:hover       { background: transparent url(icon/img_prev.png) no-repeat center center;}
224#imageInfos .nextThumbHover                     { background: transparent url(icon/none.png) no-repeat center center;}
225#imageInfos .nextThumbHover:hover       { background: transparent url(icon/img_next.png) no-repeat center center;}
226
227#imageInfos dl.imageInfoTable           { display: block; padding: 0 15px; margin: 12px auto;}
228#imageInfos .imageInfo                          { display: block; line-height: 16px;}
229#imageInfos .imageInfo dt                               { display: block; font-weight: bold; text-align: left; padding: 0;}
230#imageInfos .imageInfo dd                       { display: block; text-align: left; margin: 0 0 5px 20px;}
231#imageInfos h3                                          { margin: 20px 0 10px;}
232
233
234/* image comments */
235
236#thePicturePage #comments                       { padding: 2px 5px;}
237#thePicturePage #comments h3                    { margin: 10px 0;}
238#thePicturePage #comments form          { margin: 10px 0;}
239#thePicturePage #comments fieldset              { margin: 0 1em;}
240
241.noCommentText                                          { display:block;}
242.commentshidden #pictureComments                { display: none;}
243.commentContent .comments_toggle        { cursor: pointer;}
244
245#commentAdd, #pictureCommentList        { width: 48%; padding: 0 1%;}
246#commentAdd                                             { float: left; }
247#pictureCommentList                                     { float: right; }
248
249#commentAdd input[type="text"],
250#commentAdd textarea {
251        min-width: 95%;
252        max-width: 95%;
253        width: 95%;
254        font-family: Arial,Helvetica,sans-serif;
255        font-size: 100%;
256}
257#pictureCommentList li {
258        clear: both;
259        display: block;
260        padding: 0.5em 0;
261        margin-bottom: 5px;
262        border-radius: 5px;
263        width: 100%;
264}
265#pictureCommentList ul                          { list-style: none; padding: 0;}
266#pictureCommentList li ul                               { list-style-type: none; padding: 4px;}
267#pictureCommentList .author                     { font-weight: bold;}
268#pictureCommentList .date                       { font-style: italic;}
269#pictureCommentList .commentsOrder      { float: left; margin-bottom: 5px;}
270#pictureCommentList .navigationBar      { float: right; margin-bottom: 5px;}
271#pictureComments h4                                     { margin: 0;}
272#pictureComments form p                         { margin: 5px 0;}
273#pictureComments form p textarea                { margin: 10px 0;}
274#pictureComments INPUT                          { margin: 10px;}
275#pictureComments INPUT[type=submit]     { margin: 0;}
276
277
278/* calendar */
279
280.calendarViews          { margin-top: 4px;}
281
282/* plugins */
283
284#the_page .content .stuffs              { margin: 0!important}
285.categoryActions .theme_menuf   { display: none;}
Note: See TracBrowser for help on using the repository browser.