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

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

feature 2588: uniformization of picture.tpl

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