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

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

feature 2587: bug correction for comments layout in some browsers
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.switchBox .switchCheck                                 { width: 18px; text-align: left; display: inline-block; line-height:17px;}
153.switchBox .switchUnselected            { margin-left: 18px; line-height:17px;}
154.derivativeSizeDetails                          { display: none;}
155
156/* thumbnails */
157
158#thumbnails                                             { padding-top: 5px;}
159.thumbnails IMG                                                 { margin-bottom: 0; vertical-align: middle;}
160.thumbnailCategory DIV.illustration,
161.commentElement DIV.illustration                { margin: 2px; text-align: center;}
162
163
164/* picture page */
165
166.contentWithMenu #imageHeaderBar        { padding: 0;}
167#imageHeaderBar                                                 { padding: 0 0 0 10px;}
168#imageHeaderBar                                                 { width: auto;}
169#imageHeaderBar h2                                      { font-size: 100%; font-weight: inherit;}
170#imageHeaderBar .browsePath {
171        display:inline-block;
172        float:none;
173        font-size:120%;
174        line-height:20px;
175        padding: 8px 0 0 2px;
176        font-weight:bold;
177        margin:0;
178}
179.imageNumber                                            { display: inline-block; float: right; line-height: 26px; margin-right: 2px; min-width: 40px; text-align: center;}
180#imageToolBar                                           { margin-top: -28px; margin-bottom: 0; float: right;}
181#thePicturePage .pwg-button                     { width: 26px;}
182#thePicturePage .actionButtons          { margin-right: 26px;}
183
184#theImageAndInfos {
185        display: block;
186        width: 100%;
187        position: relative;
188}
189#theImage {
190        display: inline-block;
191        width: 75%;
192        vertical-align: top;
193        overflow: auto;
194        padding: 10px 0 5px 0;
195}
196
197.rateButtonStarFull                                     { background: url('icon/rating-stars.png') no-repeat -16px center; width:16px;}
198.rateButtonStarEmpty                            { background: url('icon/rating-stars.png') no-repeat 0 center; width:16px;}
199
200
201/* image infos */
202
203#imageInfos {
204        display: inline-block;
205        width: 24.5%;
206        vertical-align: top;
207        padding-top: 35px;
208        padding-bottom: 5px;
209        margin: 10px 0 10px 0.5%;
210        word-wrap:break-word;
211}
212
213#imageInfos .navThumbs                          { width: 250px; height: 130px; margin: auto; padding: 0 5px;}
214#imageInfos .navThumb                           { position: relative; width: 120px; height: 120px; margin: 0; overflow: hidden;}
215#imageInfos #linkPrev                           { float: left;}
216#imageInfos #linkNext                           { float: right;} 
217#imageInfos .thumbHover                                 { position: absolute; width: 100%; height: 100%;}
218#imageInfos .prevThumbHover                     { background: transparent url(icon/none.png) no-repeat center center;}
219#imageInfos .prevThumbHover:hover       { background: transparent url(icon/img_prev.png) no-repeat center center;}
220#imageInfos .nextThumbHover                     { background: transparent url(icon/none.png) no-repeat center center;}
221#imageInfos .nextThumbHover:hover       { background: transparent url(icon/img_next.png) no-repeat center center;}
222
223#imageInfos dl                                          { padding: 0 15px;}
224#imageInfos dt                                          { font-weight: bold;}
225#imageInfos dd                                          { margin: 0 0 5px 20px;}
226#imageInfos h3                                          { margin: 20px 0 10px;}
227
228
229/* image comments */
230
231#thePicturePage #comments                       { padding: 2px 5px;}
232#thePicturePage #comments h3                    { margin: 10px 0;}
233#thePicturePage #comments form          { margin: 10px 0;}
234#thePicturePage #comments fieldset              { margin: 0 1em;}
235
236.noCommentText                                          { display:block;}
237.commentshidden #pictureComments                { display: none;}
238.commentContent .comments_toggle        { cursor: pointer;}
239
240#commentAdd, #pictureCommentList        { width: 48%; padding: 0 1%;}
241#commentAdd                                             { float: left; }
242#pictureCommentList                                     { float: right; }
243
244#commentAdd input[type="text"],
245#commentAdd textarea {
246        min-width: 95%;
247        max-width: 95%;
248        width: 95%;
249        font-family: Arial,Helvetica,sans-serif;
250        font-size: 100%;
251}
252#pictureCommentList li {
253        clear: both;
254        display: block;
255        padding: 0.5em 0;
256        margin-bottom: 5px;
257        border-radius: 5px;
258        width: 100%;
259}
260#pictureCommentList ul                          { list-style: none; padding: 0;}
261#pictureCommentList li ul                               { list-style-type: none; padding: 4px;}
262#pictureCommentList .author                     { font-weight: bold;}
263#pictureCommentList .date                       { font-style: italic;}
264#pictureCommentList .commentsOrder      { float: left; margin-bottom: 5px;}
265#pictureCommentList .navigationBar      { float: right; margin-bottom: 5px;}
266#pictureComments h4                                     { margin: 0;}
267#pictureComments form p                         { margin: 5px 0;}
268#pictureComments form p textarea                { margin: 10px 0;}
269#pictureComments INPUT                          { margin: 10px;}
270#pictureComments INPUT[type=submit]     { margin: 0;}
271
272/* plugins */
273
274#the_page .content .stuffs              { margin: 0!important}
275.categoryActions .theme_menuf   { display: none;}
Note: See TracBrowser for help on using the repository browser.