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

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

feature 2587: css update

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