source: extensions/greydragon/css/styles.css @ 30210

Last change on this file since 30210 was 30210, checked in by SergeD, 9 years ago

version 1.0.13
+ New colorpack - GreyDragon
+ ADMIN: Added support for horizontal menu - "Static Menu - Header Bottom". When used with Additional Pages Plugin, pages except Root Page would be embeded

into menu bar instead of drop down menu.

+ ADMIN: Added option "Display navigation arrows" for Root page
+ ADMIN: Added option "Display navigation controls" for Root page
+ Added support for thumb shadow space - custom CSS is required (please refer to help section in admin area). Latest gdThumb is recomended.
+ CSS: cleanup

  • Removed hardcoded height for root page slideshow to accomodate navigation controls
  • Fixed issues with Categories List overlapping when Static menu is enabled
  • In Phote page, hide overflow photo when huge size is used
  • Property svn:eol-style set to native
File size: 14.6 KB
Line 
1/* backgrounds */
2
3html, body { font-size: 0.9em; }
4html, body, input, select, textarea, file { font-family: "Century Gothic", "Lucida Grande", Verdana, DejaVu Sans, sans-serif; }
5
6#the_page { position: relative; }
7#the_page .menushown#content, #the_page > .menushown.content, #the_page .contentWithMenu { margin-left: 0; }
8
9.thumbnailCategories { width: auto; margin-left: 6px; }
10.switchBox, .header_notes           { background-color: #555;}
11.thumbnailCategory , .commentElement      { background-color: #333;}
12.message                  { background-color: #666;}
13
14INPUT[type="text"], INPUT[type="password"],
15INPUT[type="button"], INPUT[type="submit"],
16INPUT[type="reset"], INPUT[type="file"],
17SELECT, TEXTAREA, OPTION              { background-color: #555;}
18INPUT:focus, SELECT:focus, TEXTAREA:focus { background-color: #666;}
19
20h3 { font-size: 1.1em; }
21
22/* font colors */
23
24a            { outline: 0; }
25a:hover      { text-decoration: none; }
26a:active, a:focus { outline: 0; text-decoration: none; }
27
28INPUT.rateButton              { color: #fff;}
29.message                  { color: #fff;}
30.commentContent .comments_toggle:hover    { color: #fff;}
31INPUT[type="text"], INPUT[type="password"],
32INPUT[type="reset"], INPUT[type="file"],
33SELECT, TEXTAREA              { color: #ccc;}
34INPUT:focus, SELECT:focus, TEXTAREA:focus { color: #fff;}
35
36
37/* borders */
38
39#content, .content, .content .titrePage    { border-bottom: 1px solid #444;}
40#copyright                  { border-top-width:1px;}
41#content .calendarTitleBar          { border-bottom: none;}
42.switchBox                  { border: 1px solid #000;}
43.switchBoxTitle                 { border-bottom: 1px solid #444;}
44INPUT, SELECT, TEXTAREA       { border: 1px solid #666;}
45
46/* form */
47legend {font-style:normal;}
48#qsearchInput {margin-left:-20px}
49
50.properties fieldset { padding: 0; margin-left: 8px; margin-right: 8px; }
51
52/* general rules */
53
54body         { margin-left: auto; margin-right: auto; width: 1270px; }
55#theHeader   { height: 90px; padding: 0; font-size: 0.9em; text-align: left; padding: 8px 16px; }
56
57#g-footer    { zoom: 1; position: relative; height: auto; min-height: 1.6em; clear: both; display: block; line-height: 90%; } /* min-width: 1020px; */
58#g-footer.expanded { min-height: 3em; }
59#g-footer span { display: none; }
60#g-footer.g-text-only span { display: static; }
61
62.g-link-list { float: left; padding: 0; margin: 0; text-align: left; list-style: none; }
63.g-link-list li { float: left; }
64.g-link-list li.dot:nth-of-type(1) { display: none; }
65
66.g-footer-topleft    { position: absolute; top: 0.3em; left: 1em; }
67.g-footer-bottomleft { position: absolute; bottom: 0.3em; left: 1em; }
68.g-footer-topright   { position: absolute; top: 0.3em; right: 1em; }
69#g-gallery-logo { text-indent: -9999em; display: block; width: 62px; height: 15px; background: transparent url('../icon/gallery.png') no-repeat; }
70#g-theme-logo   { text-indent: -9999em; display: block; width: 70px; height: 18px; }
71
72#g-footer #g-credits.g-text-only li { float: left; }
73#g-footer #g-credits.g-text-only span { display: block; float: left; }
74#g-footer #g-credits.g-text-only a { float: left; }
75#g-footer #g-credits.g-text-only #g-gallery-logo, #g-footer #g-credits.g-text-only #g-theme-logo { text-indent: 0; width: auto; background: none; }
76
77.gdHomeQuote { float: left; width: 300px; font-size: 110%; }
78.gdHomePagePhoto {text-align: center; margin: 2em 0 20px 0;}
79
80#g-logo { display: inline-block; }
81
82#content, .content, .content .titrePage { border-bottom: none; }
83
84a:hover     { border-bottom: none;}
85#copyright  { padding:0 4px 0 0; text-align:right;}
86
87/* content */
88
89#the_page  #content, #the_page > .content { margin-right: 0; }
90
91#content, .content        { margin-bottom: 0px; padding-bottom: 4px; min-height: 300px; }
92#thePicturePage #content  { padding-bottom: 0;}
93.content .titrePage       { padding: 0; margin-bottom: 4px;}
94.content .titrePage h2    { background: none !important; line-height: 20px; padding: 6px 0 0 6px; }
95
96/* menubar */
97
98#menubar { display: none; left: 0px; top: 120px; position: absolute; margin: 0; z-index: 200; overflow: hidden; width: 200px; }
99.no-header #menubar { top: 30px; }
100.content.menuhidden .titrePage h2 { margin-left: 0; }
101
102#menubar.expanded { bottom: 3em; }
103#menubar dt { text-align: left;}
104#menubar dd { padding: 0 0 0 1em;}
105#menubar .pwg-icon-filter { display: none;}
106#menubar dl dt { padding-left: 12px; }
107#menubar ul { list-style-type: disc; margin-top: 0; }
108
109/* Menu Styles */
110/* Disabled */
111body.hide-menu #menubar { display: none !important; }
112
113/* Static */
114#menubar.static { background: none !important; bottom: auto; }
115body.static-menu .contentWithMenu ul.thumbnails,
116body.static-menu .contentWithMenu ul.thumbnailCategories,
117body.static-menu .contentWithMenu #theImageAndInfos, 
118body.static-menu .contentWithMenu .notification,
119body.static-menu .contentWithMenu form.filter,
120body.static-menu .contentWithMenu .category_search_results { padding-left: 200px; margin-left: 0; }
121body.static-menu .contentWithMenu .titrePage { padding-left: 6px; }
122
123/* Static header bottom */
124#menubar.header-bottom { float: none; width: 100%; display: block; position: static; }
125#menubar.header-bottom dt { padding: 2px 4px; font-weight: normal; }
126#menubar.header-bottom dl { float: left; padding-left: 1em; padding-right: 1em; cursor: pointer; }
127#menubar.header-bottom dl:first-child { margin-left: 8px; padding-left: 0; }
128#menubar.header-bottom dd { position: absolute; z-index: 1000; display: none; float: left; min-width: 160px; padding: 0.5em 0 0.5em 0.5em; margin: 0 0 0 -8px; text-align: left; list-style: none; -webkit-background-clip: padding-box; background-clip: padding-box; }
129#menubar.header-bottom dl:hover dd { display: block; }
130#menubar.header-bottom #mbAdditionalPages dt { display: none; }
131#menubar.header-bottom #mbAdditionalPages dd { display: block; background-color: transparent; border: none; padding: 2px 0; }
132#menubar.header-bottom #mbAdditionalPages dd ul { margin: 0; list-style-type: none; font-size: 120%; }
133#menubar.header-bottom #mbAdditionalPages dd ul li { float: left; padding-right: 1em; }
134
135.header-bottom-menu .contentWithMenu .titrePage { padding-left: 6px; }
136.header-bottom-menu .categoryActions { margin-top: 4px; }
137
138/* Static top bar */
139#menubar.top-bar { float: none; width: 100%; display: block; position: absolute; top: 0; }
140#menubar.top-bar dt { padding: 2px 4px; }
141#menubar.top-bar dl { float: left; padding-left: 1em; padding-right: 1em; cursor: pointer; }
142#menubar.top-bar dl:first-child { margin-left: 8px; padding-left: 0; }
143#menubar.top-bar dd { position: absolute; z-index: 1000; display: none; float: left; min-width: 160px; padding: 0.5em 0 0.5em 0.5em; margin: 0 0 0 -8px; text-align: left; list-style: none; -webkit-background-clip: padding-box; background-clip: padding-box; }
144#menubar.top-bar dl:hover dd { display: block; }
145body.top-bar-menu #the_page{ padding-top: 28px; }
146
147#quickconnect FIELDSET { margin: 0 10px 0 -10px; border: 2px solid #444444; }
148.categoryActions { margin-right: 14px; margin-top: 0; }
149
150/* switchers */
151
152#menuSwitcher { display: inline-block; height: 20px; cursor: pointer; width: 30px; }
153
154#infoSwitcher { display: block; text-align: center; height: 32px; cursor: pointer; position:absolute; right: 21.7%; top:0; margin: 10px 0 0 7px; z-index:99; }
155#infoSwitcher.infohidden { width: 25px; top: 10px; right: 0; left: auto; margin: 0; }
156
157#slideshow #theImage      { width: 100%; margin: auto; overflow: visible;}
158#theImage.infohidden    { width: 100%;}
159
160#commentsSwitcher { float: left; margin: 0.6em 0; cursor:pointer; width: 33px; }
161.noCommentContent #commentsSwitcher { display: none;}
162
163.switchArrow { width: 24px; height: 16px; margin: 1px 5px 8px 4px; user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; }
164
165.menuhidden .switchArrow  { background-position: 0 0;}
166.menushown  .switchArrow { background-position: -22px 0;}
167.infohidden .switchArrow { background-position: 0 0; margin-top: 8px; }
168.infohidden#infoSwitcher { width: 32px;}
169.infoshown  .switchArrow   { background-position: -22px 0; margin-top: 8px; }
170
171.commentshidden .switchArrow, 
172.commentsshown  .switchArrow { background: none; font-family: "Glyphicons Halflings" !important; text-align: center; margin-right: 0; }
173.commentshidden .switchArrow::before { content: "\e113"; width: auto; }
174.commentsshown  .switchArrow::before { content: "\e114"; width: auto; }
175                                                       
176/* switchboxes */
177
178.switchBox { padding: 0.5em 10px; text-align: left; z-index: 100; border-radius: 0; }
179.derivativeSizeDetails        { display: none;}
180
181/* thumbnails */
182
183.thumbnails, #thumbnails          { padding-top: 5px; margin-left: 8px; margin-right: 8px;}
184.thumbnailCategory .illustration,
185.commentElement .illustration     { margin: 2px; text-align: center;}
186.wrap1 .wrap2 a img { margin-left: auto; margin-right: auto; }
187
188/* picture page */
189
190.contentWithMenu #imageHeaderBar  { padding: 0;}
191#imageHeaderBar             { padding: 0 0 0 10px;}
192#imageHeaderBar             { width: auto;}
193#imageHeaderBar h2          { font-size: 100%; font-weight: inherit;}
194#imageHeaderBar .browsePath { display: inline-block; float:left; font-size:120%; line-height:20px; padding: 6px 0 0 6px; font-weight:bold; }
195#imageToolBar .imageNumber  { display: inline-block; float: right; line-height: 26px; margin: 0 2px 0 0; min-width: 40px; text-align: center;}
196#imageToolBar               { margin-top: -24px; margin-bottom: 0; float: right;}
197#thePicturePage .pwg-button { width: 26px;}
198#thePicturePage .actionButtons { margin-right: 26px; }
199
200#theImageAndInfos { display: block; width: 100%; position: relative; min-height: 30em; overflow: hidden; }
201#theImage { display: block; width: 100%; vertical-align: top; padding: 10px 0 5px 0; }
202#theImage img { padding: 2px; }
203#theImage .imageComment { text-align: left; }
204
205.rateButtonStarFull           { background: url('../icon/rating-stars.png') no-repeat -16px center; width:16px;}
206.rateButtonStarEmpty        { background: url('../icon/rating-stars.png') no-repeat 0 center; width:16px;}
207
208/* image infos */
209
210#imageInfos { display: block; width: 100%; vertical-align: top; padding-top: 35px; padding-bottom: 5px; margin: 10px 0 10px 0.5%; word-wrap: break-word; }
211
212#imageInfos .navThumbs        { width: 250px; height: 130px; margin: auto; padding: 0 5px;}
213#imageInfos .navThumb         { position: relative; margin: 0; overflow: hidden;}
214#imageInfos #linkPrev         { float: left;}
215#imageInfos #linkNext         { float: right;}
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/* image comments */
228
229#thePicturePage #comments       { padding: 2px 5px; position:relative;}
230#thePicturePage #comments h3      { margin: 1em 0 1em 1em;}
231#thePicturePage #comments form    { margin: 1em 0;}
232#thePicturePage #comments fieldset    { margin: 0 1em;}
233
234.commentshidden #pictureComments    { display: none;}
235.commentContent .comments_toggle  { cursor: pointer;}
236
237#commentAdd, #pictureCommentList  { width: 48%; padding: 0 1%;}
238#commentAdd             { float: left; }
239#pictureCommentList           { float: right; }
240
241#commentAdd input[type="text"],
242#commentAdd textarea { width: 95%; font-family: Arial,Helvetica,sans-serif; font-size: 100%; }
243#pictureCommentList .commentsOrder  { float: left; margin-bottom: 5px;}
244#pictureCommentList .navigationBar  { float: right; margin-bottom: 5px;}
245#pictureComments h4         { margin: 0;}
246#pictureComments form p       { margin: 5px 0;}
247#pictureComments form p textarea    { margin: 10px 0;}
248
249#pictureComments INPUT[type=submit] { margin: 0;}
250.commentElement .description    { padding: 5px;} 
251
252/* calendar */
253
254.calendarViews    { margin-top: 4px;}
255
256/* plugins */
257
258#the_page .content .stuffs    { margin: 0!important}
259.categoryActions .theme_menuf   { display: none;}
260
261/* custom */
262
263.content .additional_info { margin: 1em 0.8em; text-align: left; }
264
265.calendarBar span, .calendarBar a { display: inline-block; min-width: 1.5em; padding-left: 2px; padding-right: 2px; }
266.calendarBar div { margin-left: 6px; margin-right: 6px; }
267.static-menu .calendarTitle, .static-menu .calendarBar { margin-left: 196px; }
268
269.infos, .errors, .warnings { border-width: 0; border-left: 10px solid transparent; margin: 0; margin-top: 1em; padding: 10px; }
270.infos ul, .errors ul, .warnings ul { list-style: none; magin: 0; padding: 0; }
271.infos  { border-left-color: #0F0; }
272.errors { border-left-color: #F00; }
273.warnings { border-left-color: #FFD800; }
274
275.content .titrePage h2.calendarTitle { background: none; padding-left: 8px; }
276                                                 
277#calendarViewSwitchBox { width: 190px; margin-left: -72px; margin-top: 4px; }
278td.calDayCellFull  { font-size: 14px; }
279td.calDayCellEmpty { font-size: 14px; padding-left: 6px; }
280.calForeDate { padding-left: 4px; padding-top: 0; }
281
282.content .additional_info { margin-top: 0.4em; margin-bottom: 0.4em; padding: .5em 1em; }
283body.static-menu .contentWithMenu .additional_info { margin-left: 204px; }
284#theImage .imageComment { margin: 1em 1em 0.4em 1em; padding: .5em 1em; }
285
286#piwigoAbout { min-height: 40em; }
287
288#ato_header > ul ul { top: 26px; }
289
290ul.image-metadata { margin: 0.5em 0 0; padding: 0; float: left; list-style: none; height: 30px; width: 100%; }
291ul.image-metadata li { float: left; margin: 0; cursor: pointer; padding: 0px 20px; height: 30px; line-height: 30px; font-weight: bold; overflow: hidden; position: relative; }
292ul.image-metadata li:hover { } 
293ul.image-metadata li.active{ }
294.image-metadata-tabs { clear: both; float: left; width: 100%; }
295.image-metadata-tab  { padding: 20px; display: none; }
296.image-metadata-tab .imageInfoTable { margin-left: 2em; }
297.image-metadata-tab .imageInfo dt { text-align: left; padding-right: 2em; }
298.image-metadata-tab ul { margin: 0 0 1em 0; padding: 0; list-style-type: none; }
299.image-metadata-tab blockquote { padding: 0; margin: 0; border-left: none; font-size: 1em; }
300.image-metadata-tab #commentAdd, #pictureCommentList { padding: 0; width: 50%; }
301.image-metadata-tab .commentElement { border-radius: 0; margin: 5px 0 0 0; }
302
303#menubar #menuTagCloud { font-size: 92%; text-align: left; }
Note: See TracBrowser for help on using the repository browser.