source: extensions/gally/gally-graphite/css/theme.css @ 6109

Last change on this file since 6109 was 6109, checked in by grum, 14 years ago

Gally's themes compatibles with piwigo 2.1

  • Property svn:executable set to *
File size: 16.3 KB
Line 
1/* -----------------------------------------------------------------------------
2  GRUM:GRAPHITE
3  Theme for Piwigo
4  ------------------------------------------------------------------------------
5  file: gally/graphite/theme.css
6  file version: 1.1.0
7  date: 2008-11-11
8  ------------------------------------------------------------------------------
9  author: grum at grum.dnsalias.com
10  << May the Little SpaceFrog be with you >>
11  ------------------------------------------------------------------------------
12  Graphite for template "Gally"
13----------------------------------------------------------------------------- */
14
15
16div.errors {
17  background:#FFB0B0;
18  border:4px solid #A04040;
19  color:#A04040;
20  padding:8px;
21}
22div.errors a {
23  color:#FF0000;
24  font-weight:bold;
25}
26
27div.infos {
28  background:#B0FFB0;
29  border:4px solid #40A040;
30  color:#40A040;
31  padding:8px;
32}
33div.infos a {
34  color:#00FF00;
35  font-weight:bold;
36}
37
38div.errors ul, div.infos ul {
39  text-align:justify;
40  padding-left:0px;
41}
42
43div.errors ul li, div.infos ul li {
44  margin-bottom:4px;
45}
46
47div.ui-widget-overlay {
48  background:#333333;
49  opacity:0.88;
50  filter:alpha(opacity:88);
51  position:absolute;
52  left:0px;
53  top:0px;
54}
55
56.ui-dialog-buttonpane {
57  margin-bottom:8px;
58}
59
60
61
62/*
63 page
64*/
65body, #menubar {
66  background-color:#333333;
67  color:#999999;
68}
69
70a {
71  color:#f0f0f0;
72}
73
74#menubar p.totalImages {
75  font-style:italic;
76}
77
78a.button, a.navButton {
79  display:block;
80  display:inline-block;
81  /*display:table-cell;*/
82  width:28px;
83  height:28px;
84}
85
86/* index.tpl */
87#icon_menu {
88  background:url(./../icon/menu-show.png);
89}
90#icon_menu:hover {
91  background:url(./../icon/menu-show_h.png);
92}
93#icon_menu.button2 {
94  display:block;
95  display:inline-block;
96  /*display:table-cell;*/
97  width:28px;
98  height:28px;
99  background:url(./../icon/menu-hide.png);
100}
101#icon_menu.button2:hover {
102  display:block;
103  display:inline-block;
104  /*display:table-cell;*/
105  width:28px;
106  height:28px;
107  background:url(./../icon/menu-hide_h.png);
108}
109
110
111#icon_caddie {
112  background:url(./../icon/caddie_add.png);
113}
114#icon_caddie:hover {
115  background:url(./../icon/caddie_add_h.png);
116}
117
118#icon_category_edit {
119  background:url(./../icon/category_edit.png);
120}
121#icon_category_edit:hover {
122  background:url(./../icon/category_edit_h.png);
123}
124
125#icon_search_rules {
126  background:url(./../icon/search_rules.png);
127}
128#icon_search_rules:hover {
129  background:url(./../icon/search_rules_h.png);
130}
131
132#icon_start_slideshow {
133  background:url(./../icon/start_slideshow.png);
134}
135#icon_start_slideshow:hover {
136  background:url(./../icon/start_slideshow_h.png);
137}
138
139#icon_flat {
140  background:url(./../icon/flat.png);
141}
142#icon_flat:hover {
143  background:url(./../icon/flat_h.png);
144}
145
146#icon_normal_mode {
147  background:url(./../icon/normal_mode.png);
148}
149#icon_normal_mode:hover {
150  background:url(./../icon/normal_mode_h.png);
151}
152
153#icon_calendar {
154  background:url(./../icon/calendar.png);
155}
156#icon_calendar:hover {
157  background:url(./../icon/calendar_h.png);
158}
159
160#icon_calendar_created {
161  background:url(./../icon/calendar_created.png);
162}
163#icon_calendar_created:hover {
164  background:url(./../icon/calendar_created_h.png);
165}
166
167/* about.tpl */
168/* comments.tpl */
169/* identification.tpl */
170/* nbm.tpl */
171/* notification.tpl */
172/* password.tpl */
173/* tags.tpl */
174/* profile.tpl */
175/* register.tpl */
176/* upload.tpl */
177#icon_home {
178  background:url(./../icon/home.png);
179}
180#icon_home:hover {
181  background:url(./../icon/home_h.png);
182}
183
184/* identification.tpl */
185/* menubar_identification.tpl */
186#icon_lost_password {
187  background:url(./../icon/lost_password.png);
188}
189#icon_lost_password:hover {
190  background:url(./../icon/lost_password_h.png);
191}
192
193#icon_register, #icon_register2, #icon_register3 {
194  background:url(./../icon/register.png);
195}
196#icon_register:hover, #icon_register2:hover, #icon_register3:hover {
197  background:url(./../icon/register_h.png);
198}
199
200#icon_lost_password, #icon_lost_password2, #icon_lost_password3 {
201  background:url(./../icon/lost_password.png);
202}
203#icon_lost_password:hover, #icon_lost_password2:hover, #icon_lost_password3:hover {
204  background:url(./../icon/lost_password_h.png);
205}
206
207/* menubar_categories.tpl */
208#icon_start_filter {
209  background:url(./../icon/start_filter.png);
210}
211#icon_start_filter:hover {
212  background:url(./../icon/start_filter_h.png);
213}
214
215#icon_stop_filter {
216  background:url(./../icon/stop_filter.png);
217}
218#icon_stop_filter:hover {
219  background:url(./../icon/stop_filter_h.png);
220}
221
222/* picture.tpl */
223#icon_high_res {
224  background:url(./../icon/display_high_res.png);
225}
226#icon_high_res:hover {
227  background:url(./../icon/display_high_res_h.png);
228}
229
230#icon_start_slideshow {
231  background:url(./../icon/start_slideshow.png);
232}
233#icon_start_slideshow:hover {
234  background:url(./../icon/start_slideshow_h.png);
235}
236
237#icon_stop_slideshow {
238  background:url(./../icon/stop_slideshow.png);
239}
240#icon_stop_slideshow:hover {
241  background:url(./../icon/stop_slideshow_h.png);
242}
243
244#icon_metadata {
245  background:url(./../icon/metadata.png);
246}
247#icon_metadata:hover {
248  background:url(./../icon/metadata_h.png);
249}
250
251#icon_save {
252  background:url(./../icon/save.png);
253}
254#icon_save:hover {
255  background:url(./../icon/save_h.png);
256}
257
258#icon_favorite {
259  background:url(./../icon/favorite.png);
260}
261#icon_favorite:hover {
262  background:url(./../icon/favorite_h.png);
263}
264
265#icon_del_favorite {
266  background:url(./../icon/del_favorite.png);
267}
268#icon_del_favorite:hover {
269  background:url(./../icon/del_favorite_h.png);
270}
271
272#icon_delall_favorite {
273  background:url(./../icon/del_favorite.png);
274}
275#icon_delall_favorite:hover {
276  background:url(./../icon/del_favorite_h.png);
277}
278
279#icon_representative {
280  background:url(./../icon/representative.png);
281}
282#icon_representative:hover {
283  background:url(./../icon/representative_h.png);
284}
285
286#icon_preferences {
287  background:url(./../icon/preferences.png);
288}
289#icon_preferences:hover {
290  background:url(./../icon/preferences_h.png);
291}
292
293/* tags.tpl */
294#icon_cloud {
295  background:url(./../icon/tag_cloud.png);
296}
297#icon_cloud:hover {
298  background:url(./../icon/tag_cloud_h.png);
299}
300
301#icon_tag_letters {
302  background:url(./../icon/tag_letters.png);
303}
304#icon_tag_letters:hover {
305  background:url(./../icon/tag_letters_h.png);
306}
307
308/* picture_nav_buttons.tpl */
309#icon_last {
310  background:url(./../icon/last.png);
311}
312#icon_last:hover {
313  background:url(./../icon/last_h.png);
314}
315
316#icon_right {
317  background:url(./../icon/right.png);
318}
319#icon_right:hover {
320  background:url(./../icon/right_h.png);
321}
322
323#icon_play {
324  background:url(./../icon/play.png);
325}
326#icon_play:hover {
327  background:url(./../icon/play_h.png);
328}
329
330#icon_pause {
331  background:url(./../icon/pause.png);
332}
333#icon_pause:hover {
334  background:url(./../icon/pause_h.png);
335}
336
337#icon_up {
338  background:url(./../icon/up.png);
339}
340#icon_up:hover {
341  background:url(./../icon/up_h.png);
342}
343
344#icon_left {
345  background:url(./../icon/left.png);
346}
347#icon_left:hover {
348  background:url(./../icon/left_h.png);
349}
350
351#icon_first {
352  background:url(./../icon/first.png);
353}
354#icon_first:hover {
355  background:url(./../icon/first_h.png);
356}
357
358#icon_start_repeat {
359  background:url(./../icon/start_repeat.png);
360}
361#icon_start_repeat:hover {
362  background:url(./../icon/start_repeat_h.png);
363}
364
365#icon_stop_repeat {
366  background:url(./../icon/stop_repeat.png);
367}
368#icon_stop_repeat:hover {
369  background:url(./../icon/stop_repeat_h.png);
370}
371
372#icon_dec_period {
373  background:url(./../icon/dec_period.png);
374}
375#icon_dec_period:hover {
376  background:url(./../icon/dec_period_h.png);
377}
378
379#icon_inc_period {
380  background:url(./../icon/inc_period.png);
381}
382#icon_inc_period:hover {
383  background:url(./../icon/inc_period_h.png);
384}
385
386/* popuphelp.tpl */
387/* search_rules.tpl */
388#icon_exit {
389  background:url(./../icon/exit.png);
390}
391#icon_exit:hover {
392  background:url(./../icon/exit_h.png);
393}
394
395/* search.tpl */
396#icon_help {
397  background:url(./../icon/help.png);
398}
399#icon_help:hover {
400  background:url(./../icon/help_h.png);
401}
402
403
404
405
406/*
407 page : title
408*/
409.titrePage, .navigationBar, #imageHeaderBar {
410  background-color:#606060;
411}
412
413/*
414 page content : thumbnails
415*/
416
417#additional_infoTOP, #additional_infoBOTTOM {
418  border-top:1px solid #404040;
419  border-bottom:1px solid #404040;
420}
421
422.additional_info {
423  border-right:1px #606060 dotted;
424}
425
426#thumbnails {
427  font-size:80%;
428  font-weight:bold;
429}
430
431
432.wrap2 a img{
433  border:1px #707070 solid;
434}
435
436.wrap2 a:hover img{
437  border:1px #f0f0f0 solid;
438}
439
440/*
441  page content : categories thumbnails
442*/
443.thumbnailCategory {
444  border-bottom: 3px #606060 solid;
445  background-color:#404040;
446}
447
448.thumbnailCategory:hover {
449  background-color:#606060;
450}
451
452.illustration a img {
453  border:1px #606060 solid;
454}
455
456.illustration a:hover img {
457  border:1px #f0f0f0 solid;
458}
459
460p.thumbCatDesc {
461  border-top:1px #606060 dotted;
462  text-align:justify;
463}
464
465.content ul.thumbnails img.newImage {
466  border:none;
467  left:5px;
468  top:-2px;
469  position:relative;
470}
471
472/*
473 * page :profile
474*/
475form#profile {
476  padding-bottom:20px;
477}
478
479
480/*
481 * page :search
482*/
483form.filter {
484  padding-bottom:20px;
485}
486
487/*
488 * page:help
489*/
490.help {
491  margin:8px;
492}
493
494/*
495 page : copyright
496*/
497#copyright {
498  font-size:10px;
499  border-top:2px #606060 solid;
500  background:#404040;
501}
502
503/*
504 page : menubar
505*/
506#menubar {
507 border:1px #606060 solid;
508 padding-bottom:30px;
509}
510
511#menubar dt {
512 background-color: #606060;
513}
514
515/*
516 calendar bar
517*/
518.calItem, .calItemP, .calItemN {
519  border:1px #606060 solid;
520}
521
522.calItem:hover, .calItemP:hover, .calItemN:hover {
523  background-color:#606060;
524}
525
526.calendarBar {
527  text-align:center;
528}
529
530.calItemP {
531  border-left-width:8px;
532  float:left;
533}
534.calItemN {
535  border-right-width:8px;
536  float:right;
537}
538
539table.calMonth {
540  border:1px #606060 solid;
541  background:transparent url('./../icon/calendar-bg.png');
542}
543
544table.calMonth thead {
545  background-color:#606060;
546}
547
548table.calMonth tbody {
549  color:#f0f0f0;
550}
551
552table.calMonth tbody td.calDayCellFull, table.calMonth tbody td.calDayCellEmpty {
553  background:#333333;
554  border:1px #606060 solid;
555  overflow:hidden;
556}
557
558
559.calBackDate {
560  color:#000000;
561}
562
563.calendarCalBar {
564  border-bottom:1px dotted #606060;
565  padding-left:10px;
566}
567
568div.calImg {
569  position:relative;
570  left:8px;
571  top:8px;
572}
573
574table.calMonth td.calDayCellFull:hover {
575  background-color:#606060;
576}
577
578table.calMonth {
579  margin-left:auto;
580  margin-right:auto;
581  left:0px;
582}
583
584td.calDayCellEmpty  {
585  color:#606060;
586}
587
588
589/*
590  inputs
591*/
592input[type="text"], input[type="password"], select, textarea, file {
593 font-family: monospace;
594 background: #f0f0f0;
595 color:#333333;
596 border:none;
597 margin:0px;
598}
599
600input:focus, select:focus {
601  background: #ffffff;
602  color:#000000;
603}
604
605input[type="submit"], input[type="button"], input[type="reset"], button {
606  font-family: monospace;
607  border-bottom:1px #606060 solid;
608  border-right:1px #606060 solid;
609  border-top:1px #ffffff solid;
610  border-left:1px #ffffff solid;
611}
612
613input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active {
614  border-bottom:1px #ffffff solid;
615  border-right:1px #ffffff solid;
616  border-top:1px #606060 solid;
617  border-left:1px #606060 solid;
618}
619
620fieldset {
621  border:1px #606060 dotted;
622  margin:3px;
623  padding:8px;
624}
625
626fieldset legend {
627  background-color:#333333;
628  padding-left:3px;
629  padding-right:3px;
630}
631
632
633
634/*
635  picture page
636*/
637
638#theImgHighBg {
639  background-color:#333333;
640  opacity:0.96;
641  filter:alpha(opacity:96);
642}
643
644#theImgHighContainer {
645  background:#FFFFFF url(./../icon/processing.gif) no-repeat scroll 82px 42px;
646}
647
648#theImgHighCloseButton {
649  width:28px;
650  height:28px;
651  background:transparent url(./../icon/close_high.png) no-repeat scroll 0px 0px;
652  top:15px;
653  right:-15px;
654  cursor:pointer;
655}
656
657#theImgHighZoomButton {
658  width:28px;
659  height:28px;
660  top:45px;
661  right:-15px;
662  cursor:pointer;
663}
664
665#theImgHighZoomButton.fit {
666  background:transparent url(./../icon/zoom_fit_high.png) no-repeat scroll 0px 0px;
667}
668
669#theImgHighZoomButton.full {
670  background:transparent url(./../icon/zoom_1-1_high.png) no-repeat scroll 0px 0px;
671}
672
673.imageNumber {
674  border:1px #999999 solid;
675}
676
677#theImgContainer {
678  border:8px #ffffff solid;
679}
680
681#imageHeaderBar {
682  height:20px;
683}
684
685#imageHeaderBar .browsePath h2 {
686  font-weight:normal;
687}
688
689#imageToolBarContainer {
690  top:-2px;
691  border-bottom:1px #606060 solid;
692}
693
694#navThumbPrevContainer {
695  top:-1px;
696  left:0px;
697  height:200px;
698  border-bottom:1px #606060 solid;
699  border-right:1px #606060 solid;
700  background:#404040;
701}
702
703#navThumbNextContainer {
704  top:-1px;
705  right:0px;
706  height:200px;
707  border-bottom:1px #606060 solid;
708  border-left:1px #606060 solid;
709  background:#404040;
710}
711
712.imageToolBarBg {
713  background:#404040;
714  z-index:-1;
715  left:0px;
716}
717
718#navThumbNext, #navThumbPrev {
719  top:53px;
720}
721
722.navThumbPrevContent a img, .navThumbNextContent a img {
723  border:1px #606060 solid;
724}
725
726.navThumbPrevContent a:hover img, .navThumbNextContent a:hover img {
727  border:1px #f0f0f0 solid;
728}
729
730#imageToolBar {
731  top:0px;
732}
733
734#imageToolBar h2 {
735  color:#f0f0f0;
736  margin-top:6px;
737}
738
739#imageInfosContainer {
740  margin-left:50px;
741  margin-right:50px;
742}
743
744
745.infoTable {
746  margin:auto;
747  font-size:90%;
748  max-width:90%;
749  color:#f0f0f0;
750  z-index:200;
751  border-collapse:collapse;
752  position:relative;
753  left:25px;
754}
755
756.infoTable td {
757  padding-bottom:5px;
758  padding-left:4px;
759  padding-right:5px;
760}
761
762.infoTable td.value, .infoTable td.label {
763  padding-right:50px;
764}
765
766.infoTable .label {
767  font-weight:bold;
768  border-left:1px dotted #606060;
769}
770
771.infoTable tr:hover {
772  background-color:#606060;
773}
774.infoTable tr.emptyrow:hover {
775  background:transparent;
776}
777.infoTable tr.emptyrow td {
778  height:4px;
779  padding:0px;
780}
781
782#updateRate {
783  margin-right:25px;
784  float:left;
785}
786#rateForm {
787  float:left;
788  position:relative;
789  top:-2px;
790}
791#rateForm input[type="button"].rateButtonStarFull,
792#rateForm input[type="button"].rateButtonStarFull:focus,
793#rateForm input[type="submit"].rateButtonStarFull  {
794  background: url('./../icon/rating-stars.png') no-repeat scroll; background-position:-16px center; width:16px;
795}
796
797#rateForm input[type="button"].rateButtonStarEmpty,
798#rateForm input[type="button"].rateButtonStarEmpty:focus,
799#rateForm input[type="submit"].rateButtonStarEmpty {
800  background: url('./../icon/rating-stars.png') no-repeat scroll; background-position:0 center; width:16px;
801}
802
803#rateForm input[type="button"],
804#rateForm  input[type="button"]:active,
805#rateForm input[type="submit"],
806#rateForm  input[type="submit"]:active {
807  cursor:pointer;
808  border:none;
809  padding:0;
810}
811
812
813#theComments {
814  background:#404040;
815}
816
817#theCommentBG {
818  position:absolute;
819  top:0;
820  width:100%;
821  z-index:-1;
822}
823
824#theComments div.navigationBar {
825  bottom:0;
826  position:absolute;
827  width:100%;
828}
829
830.commentDetail {
831  border-bottom:1px dotted #606060;
832}
833
834.commentDetail ul {
835  list-style-type:none;
836  padding:4px;
837}
838
839.commentDetail ul li {
840  display:inline;
841}
842
843.commentDetail .description .author,
844.commentDetail .description .date {
845  font-weight:bold;
846  color:#f0f0f0;
847}
848
849.commentDetail .description blockquote {
850  margin:0;
851  padding:4px 4px 8px 12px;
852  text-align:justify;
853}
854
855.commentDetail fieldset legend {
856  background:none;
857}
858
859#titleComment h3:hover {
860  background:#606060;
861}
862
863.comment_icon {
864  height:10px;
865  position:absolute;
866  right:0;
867  top:2px;
868}
869
870
871#imageMetaBg {
872  position:absolute;
873  width:100%;
874  height:100%;
875  z-index:-1;
876}
877
878#theTabs {
879}
880
881#theTabsBg {
882  background:#404040;
883  border-top:1px solid #606060;
884  position:absolute;
885  top:20px;
886}
887
888#theTabsheets li.tab {
889  background-color:#404040;
890  border:1px solid #606060;
891  display:block;
892  float:left;
893  margin:0 0 0 4px;
894  padding:2px 8px;
895  position:relative;
896}
897
898#theTabsheets li.tab:hover {
899  background-color:#606060;
900}
901
902#theTabsheets li.ui-tabs-selected:hover  {
903  background-color:#404040;
904}
905
906#theTabsheets li.ui-tabs-selected {
907  padding:4px 8px;
908  top:-5px;
909  border-top-width:3px;
910  border-bottom-width:0px;
911}
912
913
914#theTabsContainer .navigationBar {
915  text-align:right;
916}
917
918
919/*
920  tags
921*/
922
923#fullTagCloud SPAN a:hover {
924  background:#606060;
925}
926
927#menuTagCloud SPAN {
928  margin:0px;
929}
930
931.nbEntries {
932  text-align:right;
933}
934
935.tagaddbutton {
936  left:-4px;
937  position:relative;
938  top:-3px;
939}
940
941
942.mandatorystar {
943  color:#A04040;
944}
945
946.mandatorynfo {
947  font-size:90%;
948  margin:0 0 4px 8px
949}
950
951/*
952  help
953*/
954#thePopuphelpPage h1 {
955  background:#606060;
956}
957
958
959/*
960 vd language switch plugin
961*/
962.menuf ul li a, .menuf ul li a:visited {
963  height:27px;
964  line-height:27px;
965  margin-top:5px;
966}
967
968.menuf ul.flag-pan .flags:hover, .menuf a img.flags {
969  border:1px solid #606060;
970}
971
972.menuf ul.flag-pan .flags {
973  border:1px solid #303030;
974}
975
976ul.flag-pan {
977  background-color:#404040;
978  border:2px solid #606060;
979}
980
981/*
982 * PWG Stuff plugin compatibility
983*/
984div.stuffs {
985  margin:0px;
986}
987
988div.stuffs h2 {
989  margin-top:0px;
990}
991
992/*
993 * Comment editor compatibility
994*/
995div#ce-content.content, div#ce-message-block.content {
996  background-color:#333333;
997  border:2px solid #606060;
998}
999
Note: See TracBrowser for help on using the repository browser.