quattro: some updates
- add makefile to rebuild both css with single command - fix icons in Forums widget - style photos pages
							
								
								
									
										5
									
								
								view/theme/quattro/Makefile
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,5 @@ | ||||
| all: | ||||
| 	cd dark; make; cd .. | ||||
| 	cd green; make; cd .. | ||||
|  | ||||
|  | ||||
| @@ -10,10 +10,72 @@ | ||||
|   overflow: hidden; | ||||
|   text-indent: -9999px; | ||||
|   padding: 1px; | ||||
|   min-width: 22px; | ||||
|   height: 22px; | ||||
| } | ||||
| .icon.text { | ||||
|   text-indent: 0px; | ||||
| } | ||||
| .icon.notify { | ||||
|   background-image: url("../../../images/icons/22/notify_off.png"); | ||||
| } | ||||
| .icon.gear { | ||||
|   background-image: url("../../../images/icons/22/gear.png"); | ||||
| } | ||||
| .icon.like { | ||||
|   background-image: url("icons/like.png"); | ||||
| } | ||||
| .icon.dislike { | ||||
|   background-image: url("icons/dislike.png"); | ||||
| } | ||||
| .icon.add { | ||||
|   background-image: url("../../../images/icons/22/add.png"); | ||||
| } | ||||
| .icon.delete { | ||||
|   background-image: url("../../../images/icons/22/delete.png"); | ||||
| } | ||||
| .icon.edit { | ||||
|   background-image: url("../../../images/icons/22/edit.png"); | ||||
| } | ||||
| .icon.star { | ||||
|   background-image: url("../../../images/icons/22/star.png"); | ||||
| } | ||||
| .icon.menu { | ||||
|   background-image: url("../../../images/icons/22/menu.png"); | ||||
| } | ||||
| .icon.link { | ||||
|   background-image: url("../../../images/icons/22/link.png"); | ||||
| } | ||||
| .icon.lock { | ||||
|   background-image: url("../../../images/icons/22/lock.png"); | ||||
| } | ||||
| .icon.unlock { | ||||
|   background-image: url("../../../images/icons/22/unlock.png"); | ||||
| } | ||||
| .icon.plugin { | ||||
|   background-image: url("../../../images/icons/22/plugin.png"); | ||||
| } | ||||
| .icon.type-unkn { | ||||
|   background-image: url("../../../images/icons/22/zip.png"); | ||||
| } | ||||
| .icon.type-audio { | ||||
|   background-image: url("../../../images/icons/22/audio.png"); | ||||
| } | ||||
| .icon.type-video { | ||||
|   background-image: url("../../../images/icons/22/video.png"); | ||||
| } | ||||
| .icon.type-image { | ||||
|   background-image: url("../../../images/icons/22/image.png"); | ||||
| } | ||||
| .icon.type-text { | ||||
|   background-image: url("../../../images/icons/22/text.png"); | ||||
| } | ||||
| .icon.language { | ||||
|   background-image: url("icons/language.png"); | ||||
| } | ||||
| .icon.text { | ||||
|   padding: 10px 0px 0px 25px; | ||||
| } | ||||
| .icon.s10 { | ||||
|   min-width: 10px; | ||||
|   height: 10px; | ||||
| @@ -24,6 +86,12 @@ | ||||
| .icon.s10.gear { | ||||
|   background-image: url("../../../images/icons/10/gear.png"); | ||||
| } | ||||
| .icon.s10.like { | ||||
|   background-image: url("icons/like.png"); | ||||
| } | ||||
| .icon.s10.dislike { | ||||
|   background-image: url("icons/dislike.png"); | ||||
| } | ||||
| .icon.s10.add { | ||||
|   background-image: url("../../../images/icons/10/add.png"); | ||||
| } | ||||
| @@ -82,6 +150,12 @@ | ||||
| .icon.s16.gear { | ||||
|   background-image: url("../../../images/icons/16/gear.png"); | ||||
| } | ||||
| .icon.s16.like { | ||||
|   background-image: url("icons/like.png"); | ||||
| } | ||||
| .icon.s16.dislike { | ||||
|   background-image: url("icons/dislike.png"); | ||||
| } | ||||
| .icon.s16.add { | ||||
|   background-image: url("../../../images/icons/16/add.png"); | ||||
| } | ||||
| @@ -140,6 +214,12 @@ | ||||
| .icon.s22.gear { | ||||
|   background-image: url("../../../images/icons/22/gear.png"); | ||||
| } | ||||
| .icon.s22.like { | ||||
|   background-image: url("icons/like.png"); | ||||
| } | ||||
| .icon.s22.dislike { | ||||
|   background-image: url("icons/dislike.png"); | ||||
| } | ||||
| .icon.s22.add { | ||||
|   background-image: url("../../../images/icons/22/add.png"); | ||||
| } | ||||
| @@ -198,6 +278,12 @@ | ||||
| .icon.s48.gear { | ||||
|   background-image: url("../../../images/icons/48/gear.png"); | ||||
| } | ||||
| .icon.s48.like { | ||||
|   background-image: url("icons/like.png"); | ||||
| } | ||||
| .icon.s48.dislike { | ||||
|   background-image: url("icons/dislike.png"); | ||||
| } | ||||
| .icon.s48.add { | ||||
|   background-image: url("../../../images/icons/48/add.png"); | ||||
| } | ||||
| @@ -267,7 +353,8 @@ body { | ||||
| h4 { | ||||
|   font-size: 1.1em; | ||||
| } | ||||
| a, a:link { | ||||
| a, | ||||
| a:link { | ||||
|   color: #005c94; | ||||
|   text-decoration: none; | ||||
| } | ||||
| @@ -336,6 +423,9 @@ code { | ||||
| .tool .action { | ||||
|   float: right; | ||||
| } | ||||
| .tool li > img { | ||||
|   float: left; | ||||
| } | ||||
| /* popup notifications */ | ||||
| #jGrowl.top-right { | ||||
|   top: 30px; | ||||
| @@ -489,7 +579,8 @@ nav #nav-site-linkmenu .menu-popup { | ||||
|   right: 0px; | ||||
|   left: auto; | ||||
| } | ||||
| nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify { | ||||
| nav #nav-notifications-linkmenu.on .icon.s22.notify, | ||||
| nav #nav-notifications-linkmenu.selected .icon.s22.notify { | ||||
|   background-image: url("../../../images/icons/22/notify_on.png"); | ||||
| } | ||||
| nav #nav-apps-link.selected { | ||||
| @@ -678,11 +769,15 @@ aside #profiles-menu { | ||||
|   height: 48px; | ||||
| } | ||||
| /* group member */ | ||||
| #contact-edit-drop-link, .mail-list-delete-wrapper, .group-delete-wrapper { | ||||
| #contact-edit-drop-link, | ||||
| .mail-list-delete-wrapper, | ||||
| .group-delete-wrapper { | ||||
|   float: right; | ||||
|   margin-right: 50px; | ||||
| } | ||||
| #contact-edit-drop-link .drophide, .mail-list-delete-wrapper .drophide, .group-delete-wrapper .drophide { | ||||
| #contact-edit-drop-link .drophide, | ||||
| .mail-list-delete-wrapper .drophide, | ||||
| .group-delete-wrapper .drophide { | ||||
|   background-image: url('../../../images/icons/22/delete.png'); | ||||
|   display: block; | ||||
|   width: 22px; | ||||
| @@ -691,7 +786,9 @@ aside #profiles-menu { | ||||
|   position: relative; | ||||
|   top: -50px; | ||||
| } | ||||
| #contact-edit-drop-link .drop, .mail-list-delete-wrapper .drop, .group-delete-wrapper .drop { | ||||
| #contact-edit-drop-link .drop, | ||||
| .mail-list-delete-wrapper .drop, | ||||
| .group-delete-wrapper .drop { | ||||
|   background-image: url('../../../images/icons/22/delete.png'); | ||||
|   display: block; | ||||
|   width: 22px; | ||||
| @@ -821,7 +918,8 @@ section { | ||||
|   display: table; | ||||
|   width: 750px; | ||||
| } | ||||
| .wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom { | ||||
| .wall-item-container .wall-item-item, | ||||
| .wall-item-container .wall-item-bottom { | ||||
|   display: table-row; | ||||
| } | ||||
| .wall-item-container .wall-item-bottom { | ||||
| @@ -859,11 +957,13 @@ section { | ||||
| .wall-item-container .wall-item-content img { | ||||
|   max-width: 710px; | ||||
| } | ||||
| .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions { | ||||
| .wall-item-container .wall-item-links, | ||||
| .wall-item-container .wall-item-actions { | ||||
|   display: table-cell; | ||||
|   vertical-align: middle; | ||||
| } | ||||
| .wall-item-container .wall-item-links .icon, .wall-item-container .wall-item-actions .icon { | ||||
| .wall-item-container .wall-item-links .icon, | ||||
| .wall-item-container .wall-item-actions .icon { | ||||
|   opacity: 0.5; | ||||
|   -webkit-transition: all 0.2s ease-in-out; | ||||
|   -moz-transition: all 0.2s ease-in-out; | ||||
| @@ -871,7 +971,8 @@ section { | ||||
|   -ms-transition: all 0.2s ease-in-out; | ||||
|   transition: all 0.2s ease-in-out; | ||||
| } | ||||
| .wall-item-container .wall-item-links .icon:hover, .wall-item-container .wall-item-actions .icon:hover { | ||||
| .wall-item-container .wall-item-links .icon:hover, | ||||
| .wall-item-container .wall-item-actions .icon:hover { | ||||
|   opacity: 1; | ||||
|   -webkit-transition: all 0.2s ease-in-out; | ||||
|   -moz-transition: all 0.2s ease-in-out; | ||||
| @@ -1015,9 +1116,6 @@ section { | ||||
|   opacity: 0.5; | ||||
| } | ||||
| .wwto { | ||||
|   position: absolute !important; | ||||
|   width: 25px; | ||||
|   height: 25px; | ||||
|   background: #FFFFFF; | ||||
|   border: 2px solid #364e59; | ||||
|   height: 25px; | ||||
| @@ -1248,7 +1346,9 @@ section { | ||||
|     height: 18px; | ||||
| }*/ | ||||
| /** acl **/ | ||||
| #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper { | ||||
| #photo-edit-perms-select, | ||||
| #photos-upload-permissions-wrapper, | ||||
| #profile-jot-acl-wrapper { | ||||
|   display: block!important; | ||||
| } | ||||
| #acl-wrapper { | ||||
| @@ -1407,10 +1507,12 @@ ul.tabs li .active { | ||||
|   float: left; | ||||
|   width: 200px; | ||||
| } | ||||
| .field input, .field textarea { | ||||
| .field input, | ||||
| .field textarea { | ||||
|   width: 400px; | ||||
| } | ||||
| .field input[type="checkbox"], .field input[type="radio"] { | ||||
| .field input[type="checkbox"], | ||||
| .field input[type="radio"] { | ||||
|   width: auto; | ||||
| } | ||||
| .field textarea { | ||||
| @@ -1537,10 +1639,126 @@ ul.tabs li .active { | ||||
|   width: 50px; | ||||
|   float: left; | ||||
| } | ||||
| /* photo */ | ||||
| .lframe { | ||||
| /* photo albums */ | ||||
| #photo-edit-link-wrap { | ||||
|   margin-bottom: 10px; | ||||
| } | ||||
| #album-edit-link { | ||||
|   border-right: 1px solid #364e59; | ||||
|   float: left; | ||||
|   padding-right: 5px; | ||||
|   margin-right: 5px; | ||||
| } | ||||
| #photo-edit-link, | ||||
| #album-edit-link a { | ||||
|   background: url("../../../images/icons/16/edit.png") no-repeat left center; | ||||
|   padding-left: 18px; | ||||
| } | ||||
| #photo-toprofile-link { | ||||
|   background: url("../../../images/icons/16/user.png") no-repeat left center; | ||||
|   padding-left: 18px; | ||||
| } | ||||
| .photos-upload-link a, | ||||
| #photo-top-upload-link { | ||||
|   background: url("../../../images/icons/16/add.png") no-repeat left center; | ||||
|   padding-left: 18px; | ||||
| } | ||||
| .photo-top-image-wrapper, | ||||
| .photo-album-image-wrapper { | ||||
|   float: left; | ||||
|   margin: 0px 10px 10px 0px; | ||||
|   width: 150px; | ||||
|   height: 150px; | ||||
|   position: relative; | ||||
|   overflow: hidden; | ||||
| } | ||||
| .photo-top-image-wrapper img, | ||||
| .photo-album-image-wrapper img { | ||||
|   width: 150px; | ||||
| } | ||||
| .photo-top-image-wrapper .photo-top-album-name, | ||||
| .photo-album-image-wrapper .photo-top-album-name, | ||||
| .photo-top-image-wrapper .caption, | ||||
| .photo-album-image-wrapper .caption { | ||||
|   position: absolute; | ||||
|   color: #2d2d2d; | ||||
|   background-color: #ffffff; | ||||
|   width: 100%; | ||||
|   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); | ||||
|   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); | ||||
|   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); | ||||
|   -webkit-transition: all 0.5s ease-in-out; | ||||
|   -moz-transition: all 0.5s ease-in-out; | ||||
|   -o-transition: all 0.5s ease-in-out; | ||||
|   -ms-transition: all 0.5s ease-in-out; | ||||
|   transition: all 0.5s ease-in-out; | ||||
|   bottom: -150px; | ||||
| } | ||||
| .photo-top-image-wrapper:hover .photo-top-album-name, | ||||
| .photo-album-image-wrapper:hover .photo-top-album-name, | ||||
| .photo-top-image-wrapper:hover .caption, | ||||
| .photo-album-image-wrapper:hover .caption { | ||||
|   bottom: 0px; | ||||
|   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); | ||||
|   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); | ||||
|   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); | ||||
|   -webkit-transition: all 0.5s ease-in-out; | ||||
|   -moz-transition: all 0.5s ease-in-out; | ||||
|   -o-transition: all 0.5s ease-in-out; | ||||
|   -ms-transition: all 0.5s ease-in-out; | ||||
|   transition: all 0.5s ease-in-out; | ||||
| } | ||||
| #photo-photo { | ||||
|   display: block; | ||||
|   width: 660px; | ||||
|   padding: 50px; | ||||
|   margin-bottom: 0px; | ||||
|   text-align: center; | ||||
|   background-color: #999999; | ||||
| } | ||||
| #photo-photo img { | ||||
|   max-width: 560px; | ||||
| } | ||||
| #photo-album-title { | ||||
|   background: url("../../../images/icons/22/image.png") no-repeat top left; | ||||
|   padding-left: 23px; | ||||
|   min-height: 22px; | ||||
| } | ||||
| #photo-album-title a { | ||||
|   display: block; | ||||
|   padding-top: 5px; | ||||
| } | ||||
| #photo-caption { | ||||
|   display: block; | ||||
|   width: 660px; | ||||
|   min-height: 55px; | ||||
|   background-color: #cccccc; | ||||
|   padding: 0 50px 0 50px; | ||||
| } | ||||
| #photo-next-link > a > div { | ||||
|   background: url("icons/next.png") no-repeat center center; | ||||
|   float: right; | ||||
|   width: 50px; | ||||
|   height: 50px; | ||||
| } | ||||
| #photo-prev-link > a > div { | ||||
|   background: url("icons/prev.png") no-repeat center center; | ||||
|   float: left; | ||||
|   width: 50px; | ||||
|   height: 50px; | ||||
| } | ||||
| #photo-like-div { | ||||
|   display: block; | ||||
|   width: 660px; | ||||
|   height: 30px; | ||||
|   background-color: #cccccc; | ||||
|   padding: 0 50px 0 50px; | ||||
| } | ||||
| #photo-like-div .icon { | ||||
|   float: left; | ||||
| } | ||||
| #photo-like-div .like-rotator { | ||||
|   float: right; | ||||
| } | ||||
| /* profile match wrapper */ | ||||
| .profile-match-wrapper { | ||||
| @@ -1641,13 +1859,15 @@ ul.tabs li .active { | ||||
|   transition: all 0.2s ease-in-out; | ||||
| } | ||||
| /* theme screenshot */ | ||||
| .screenshot, #theme-preview { | ||||
| .screenshot, | ||||
| #theme-preview { | ||||
|   position: absolute; | ||||
|   width: 202px; | ||||
|   left: 70%; | ||||
|   top: 50px; | ||||
| } | ||||
| .screenshot img, #theme-preview img { | ||||
| .screenshot img, | ||||
| #theme-preview img { | ||||
|   width: 200px; | ||||
|   height: 150px; | ||||
| } | ||||
|   | ||||
| @@ -10,10 +10,72 @@ | ||||
|   overflow: hidden; | ||||
|   text-indent: -9999px; | ||||
|   padding: 1px; | ||||
|   min-width: 22px; | ||||
|   height: 22px; | ||||
| } | ||||
| .icon.text { | ||||
|   text-indent: 0px; | ||||
| } | ||||
| .icon.notify { | ||||
|   background-image: url("../../../images/icons/22/notify_off.png"); | ||||
| } | ||||
| .icon.gear { | ||||
|   background-image: url("../../../images/icons/22/gear.png"); | ||||
| } | ||||
| .icon.like { | ||||
|   background-image: url("icons/like.png"); | ||||
| } | ||||
| .icon.dislike { | ||||
|   background-image: url("icons/dislike.png"); | ||||
| } | ||||
| .icon.add { | ||||
|   background-image: url("../../../images/icons/22/add.png"); | ||||
| } | ||||
| .icon.delete { | ||||
|   background-image: url("../../../images/icons/22/delete.png"); | ||||
| } | ||||
| .icon.edit { | ||||
|   background-image: url("../../../images/icons/22/edit.png"); | ||||
| } | ||||
| .icon.star { | ||||
|   background-image: url("../../../images/icons/22/star.png"); | ||||
| } | ||||
| .icon.menu { | ||||
|   background-image: url("../../../images/icons/22/menu.png"); | ||||
| } | ||||
| .icon.link { | ||||
|   background-image: url("../../../images/icons/22/link.png"); | ||||
| } | ||||
| .icon.lock { | ||||
|   background-image: url("../../../images/icons/22/lock.png"); | ||||
| } | ||||
| .icon.unlock { | ||||
|   background-image: url("../../../images/icons/22/unlock.png"); | ||||
| } | ||||
| .icon.plugin { | ||||
|   background-image: url("../../../images/icons/22/plugin.png"); | ||||
| } | ||||
| .icon.type-unkn { | ||||
|   background-image: url("../../../images/icons/22/zip.png"); | ||||
| } | ||||
| .icon.type-audio { | ||||
|   background-image: url("../../../images/icons/22/audio.png"); | ||||
| } | ||||
| .icon.type-video { | ||||
|   background-image: url("../../../images/icons/22/video.png"); | ||||
| } | ||||
| .icon.type-image { | ||||
|   background-image: url("../../../images/icons/22/image.png"); | ||||
| } | ||||
| .icon.type-text { | ||||
|   background-image: url("../../../images/icons/22/text.png"); | ||||
| } | ||||
| .icon.language { | ||||
|   background-image: url("icons/language.png"); | ||||
| } | ||||
| .icon.text { | ||||
|   padding: 10px 0px 0px 25px; | ||||
| } | ||||
| .icon.s10 { | ||||
|   min-width: 10px; | ||||
|   height: 10px; | ||||
| @@ -24,6 +86,12 @@ | ||||
| .icon.s10.gear { | ||||
|   background-image: url("../../../images/icons/10/gear.png"); | ||||
| } | ||||
| .icon.s10.like { | ||||
|   background-image: url("icons/like.png"); | ||||
| } | ||||
| .icon.s10.dislike { | ||||
|   background-image: url("icons/dislike.png"); | ||||
| } | ||||
| .icon.s10.add { | ||||
|   background-image: url("../../../images/icons/10/add.png"); | ||||
| } | ||||
| @@ -82,6 +150,12 @@ | ||||
| .icon.s16.gear { | ||||
|   background-image: url("../../../images/icons/16/gear.png"); | ||||
| } | ||||
| .icon.s16.like { | ||||
|   background-image: url("icons/like.png"); | ||||
| } | ||||
| .icon.s16.dislike { | ||||
|   background-image: url("icons/dislike.png"); | ||||
| } | ||||
| .icon.s16.add { | ||||
|   background-image: url("../../../images/icons/16/add.png"); | ||||
| } | ||||
| @@ -140,6 +214,12 @@ | ||||
| .icon.s22.gear { | ||||
|   background-image: url("../../../images/icons/22/gear.png"); | ||||
| } | ||||
| .icon.s22.like { | ||||
|   background-image: url("icons/like.png"); | ||||
| } | ||||
| .icon.s22.dislike { | ||||
|   background-image: url("icons/dislike.png"); | ||||
| } | ||||
| .icon.s22.add { | ||||
|   background-image: url("../../../images/icons/22/add.png"); | ||||
| } | ||||
| @@ -198,6 +278,12 @@ | ||||
| .icon.s48.gear { | ||||
|   background-image: url("../../../images/icons/48/gear.png"); | ||||
| } | ||||
| .icon.s48.like { | ||||
|   background-image: url("icons/like.png"); | ||||
| } | ||||
| .icon.s48.dislike { | ||||
|   background-image: url("icons/dislike.png"); | ||||
| } | ||||
| .icon.s48.add { | ||||
|   background-image: url("../../../images/icons/48/add.png"); | ||||
| } | ||||
| @@ -267,7 +353,8 @@ body { | ||||
| h4 { | ||||
|   font-size: 1.1em; | ||||
| } | ||||
| a, a:link { | ||||
| a, | ||||
| a:link { | ||||
|   color: #009100; | ||||
|   text-decoration: none; | ||||
| } | ||||
| @@ -336,6 +423,9 @@ code { | ||||
| .tool .action { | ||||
|   float: right; | ||||
| } | ||||
| .tool li > img { | ||||
|   float: left; | ||||
| } | ||||
| /* popup notifications */ | ||||
| #jGrowl.top-right { | ||||
|   top: 30px; | ||||
| @@ -489,7 +579,8 @@ nav #nav-site-linkmenu .menu-popup { | ||||
|   right: 0px; | ||||
|   left: auto; | ||||
| } | ||||
| nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify { | ||||
| nav #nav-notifications-linkmenu.on .icon.s22.notify, | ||||
| nav #nav-notifications-linkmenu.selected .icon.s22.notify { | ||||
|   background-image: url("../../../images/icons/22/notify_on.png"); | ||||
| } | ||||
| nav #nav-apps-link.selected { | ||||
| @@ -678,11 +769,15 @@ aside #profiles-menu { | ||||
|   height: 48px; | ||||
| } | ||||
| /* group member */ | ||||
| #contact-edit-drop-link, .mail-list-delete-wrapper, .group-delete-wrapper { | ||||
| #contact-edit-drop-link, | ||||
| .mail-list-delete-wrapper, | ||||
| .group-delete-wrapper { | ||||
|   float: right; | ||||
|   margin-right: 50px; | ||||
| } | ||||
| #contact-edit-drop-link .drophide, .mail-list-delete-wrapper .drophide, .group-delete-wrapper .drophide { | ||||
| #contact-edit-drop-link .drophide, | ||||
| .mail-list-delete-wrapper .drophide, | ||||
| .group-delete-wrapper .drophide { | ||||
|   background-image: url('../../../images/icons/22/delete.png'); | ||||
|   display: block; | ||||
|   width: 22px; | ||||
| @@ -691,7 +786,9 @@ aside #profiles-menu { | ||||
|   position: relative; | ||||
|   top: -50px; | ||||
| } | ||||
| #contact-edit-drop-link .drop, .mail-list-delete-wrapper .drop, .group-delete-wrapper .drop { | ||||
| #contact-edit-drop-link .drop, | ||||
| .mail-list-delete-wrapper .drop, | ||||
| .group-delete-wrapper .drop { | ||||
|   background-image: url('../../../images/icons/22/delete.png'); | ||||
|   display: block; | ||||
|   width: 22px; | ||||
| @@ -821,7 +918,8 @@ section { | ||||
|   display: table; | ||||
|   width: 750px; | ||||
| } | ||||
| .wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom { | ||||
| .wall-item-container .wall-item-item, | ||||
| .wall-item-container .wall-item-bottom { | ||||
|   display: table-row; | ||||
| } | ||||
| .wall-item-container .wall-item-bottom { | ||||
| @@ -859,11 +957,13 @@ section { | ||||
| .wall-item-container .wall-item-content img { | ||||
|   max-width: 710px; | ||||
| } | ||||
| .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions { | ||||
| .wall-item-container .wall-item-links, | ||||
| .wall-item-container .wall-item-actions { | ||||
|   display: table-cell; | ||||
|   vertical-align: middle; | ||||
| } | ||||
| .wall-item-container .wall-item-links .icon, .wall-item-container .wall-item-actions .icon { | ||||
| .wall-item-container .wall-item-links .icon, | ||||
| .wall-item-container .wall-item-actions .icon { | ||||
|   opacity: 0.5; | ||||
|   -webkit-transition: all 0.2s ease-in-out; | ||||
|   -moz-transition: all 0.2s ease-in-out; | ||||
| @@ -871,7 +971,8 @@ section { | ||||
|   -ms-transition: all 0.2s ease-in-out; | ||||
|   transition: all 0.2s ease-in-out; | ||||
| } | ||||
| .wall-item-container .wall-item-links .icon:hover, .wall-item-container .wall-item-actions .icon:hover { | ||||
| .wall-item-container .wall-item-links .icon:hover, | ||||
| .wall-item-container .wall-item-actions .icon:hover { | ||||
|   opacity: 1; | ||||
|   -webkit-transition: all 0.2s ease-in-out; | ||||
|   -moz-transition: all 0.2s ease-in-out; | ||||
| @@ -1015,9 +1116,6 @@ section { | ||||
|   opacity: 0.5; | ||||
| } | ||||
| .wwto { | ||||
|   position: absolute !important; | ||||
|   width: 25px; | ||||
|   height: 25px; | ||||
|   background: #FFFFFF; | ||||
|   border: 2px solid #364e59; | ||||
|   height: 25px; | ||||
| @@ -1248,7 +1346,9 @@ section { | ||||
|     height: 18px; | ||||
| }*/ | ||||
| /** acl **/ | ||||
| #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper { | ||||
| #photo-edit-perms-select, | ||||
| #photos-upload-permissions-wrapper, | ||||
| #profile-jot-acl-wrapper { | ||||
|   display: block!important; | ||||
| } | ||||
| #acl-wrapper { | ||||
| @@ -1407,10 +1507,12 @@ ul.tabs li .active { | ||||
|   float: left; | ||||
|   width: 200px; | ||||
| } | ||||
| .field input, .field textarea { | ||||
| .field input, | ||||
| .field textarea { | ||||
|   width: 400px; | ||||
| } | ||||
| .field input[type="checkbox"], .field input[type="radio"] { | ||||
| .field input[type="checkbox"], | ||||
| .field input[type="radio"] { | ||||
|   width: auto; | ||||
| } | ||||
| .field textarea { | ||||
| @@ -1537,10 +1639,126 @@ ul.tabs li .active { | ||||
|   width: 50px; | ||||
|   float: left; | ||||
| } | ||||
| /* photo */ | ||||
| .lframe { | ||||
| /* photo albums */ | ||||
| #photo-edit-link-wrap { | ||||
|   margin-bottom: 10px; | ||||
| } | ||||
| #album-edit-link { | ||||
|   border-right: 1px solid #364e59; | ||||
|   float: left; | ||||
|   padding-right: 5px; | ||||
|   margin-right: 5px; | ||||
| } | ||||
| #photo-edit-link, | ||||
| #album-edit-link a { | ||||
|   background: url("../../../images/icons/16/edit.png") no-repeat left center; | ||||
|   padding-left: 18px; | ||||
| } | ||||
| #photo-toprofile-link { | ||||
|   background: url("../../../images/icons/16/user.png") no-repeat left center; | ||||
|   padding-left: 18px; | ||||
| } | ||||
| .photos-upload-link a, | ||||
| #photo-top-upload-link { | ||||
|   background: url("../../../images/icons/16/add.png") no-repeat left center; | ||||
|   padding-left: 18px; | ||||
| } | ||||
| .photo-top-image-wrapper, | ||||
| .photo-album-image-wrapper { | ||||
|   float: left; | ||||
|   margin: 0px 10px 10px 0px; | ||||
|   width: 150px; | ||||
|   height: 150px; | ||||
|   position: relative; | ||||
|   overflow: hidden; | ||||
| } | ||||
| .photo-top-image-wrapper img, | ||||
| .photo-album-image-wrapper img { | ||||
|   width: 150px; | ||||
| } | ||||
| .photo-top-image-wrapper .photo-top-album-name, | ||||
| .photo-album-image-wrapper .photo-top-album-name, | ||||
| .photo-top-image-wrapper .caption, | ||||
| .photo-album-image-wrapper .caption { | ||||
|   position: absolute; | ||||
|   color: #2d2d2d; | ||||
|   background-color: #ffffff; | ||||
|   width: 100%; | ||||
|   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); | ||||
|   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); | ||||
|   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); | ||||
|   -webkit-transition: all 0.5s ease-in-out; | ||||
|   -moz-transition: all 0.5s ease-in-out; | ||||
|   -o-transition: all 0.5s ease-in-out; | ||||
|   -ms-transition: all 0.5s ease-in-out; | ||||
|   transition: all 0.5s ease-in-out; | ||||
|   bottom: -150px; | ||||
| } | ||||
| .photo-top-image-wrapper:hover .photo-top-album-name, | ||||
| .photo-album-image-wrapper:hover .photo-top-album-name, | ||||
| .photo-top-image-wrapper:hover .caption, | ||||
| .photo-album-image-wrapper:hover .caption { | ||||
|   bottom: 0px; | ||||
|   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); | ||||
|   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); | ||||
|   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); | ||||
|   -webkit-transition: all 0.5s ease-in-out; | ||||
|   -moz-transition: all 0.5s ease-in-out; | ||||
|   -o-transition: all 0.5s ease-in-out; | ||||
|   -ms-transition: all 0.5s ease-in-out; | ||||
|   transition: all 0.5s ease-in-out; | ||||
| } | ||||
| #photo-photo { | ||||
|   display: block; | ||||
|   width: 660px; | ||||
|   padding: 50px; | ||||
|   margin-bottom: 0px; | ||||
|   text-align: center; | ||||
|   background-color: #999999; | ||||
| } | ||||
| #photo-photo img { | ||||
|   max-width: 560px; | ||||
| } | ||||
| #photo-album-title { | ||||
|   background: url("../../../images/icons/22/image.png") no-repeat top left; | ||||
|   padding-left: 23px; | ||||
|   min-height: 22px; | ||||
| } | ||||
| #photo-album-title a { | ||||
|   display: block; | ||||
|   padding-top: 5px; | ||||
| } | ||||
| #photo-caption { | ||||
|   display: block; | ||||
|   width: 660px; | ||||
|   min-height: 55px; | ||||
|   background-color: #cccccc; | ||||
|   padding: 0 50px 0 50px; | ||||
| } | ||||
| #photo-next-link > a > div { | ||||
|   background: url("icons/next.png") no-repeat center center; | ||||
|   float: right; | ||||
|   width: 50px; | ||||
|   height: 50px; | ||||
| } | ||||
| #photo-prev-link > a > div { | ||||
|   background: url("icons/prev.png") no-repeat center center; | ||||
|   float: left; | ||||
|   width: 50px; | ||||
|   height: 50px; | ||||
| } | ||||
| #photo-like-div { | ||||
|   display: block; | ||||
|   width: 660px; | ||||
|   height: 30px; | ||||
|   background-color: #cccccc; | ||||
|   padding: 0 50px 0 50px; | ||||
| } | ||||
| #photo-like-div .icon { | ||||
|   float: left; | ||||
| } | ||||
| #photo-like-div .like-rotator { | ||||
|   float: right; | ||||
| } | ||||
| /* profile match wrapper */ | ||||
| .profile-match-wrapper { | ||||
| @@ -1641,13 +1859,15 @@ ul.tabs li .active { | ||||
|   transition: all 0.2s ease-in-out; | ||||
| } | ||||
| /* theme screenshot */ | ||||
| .screenshot, #theme-preview { | ||||
| .screenshot, | ||||
| #theme-preview { | ||||
|   position: absolute; | ||||
|   width: 202px; | ||||
|   left: 70%; | ||||
|   top: 50px; | ||||
| } | ||||
| .screenshot img, #theme-preview img { | ||||
| .screenshot img, | ||||
| #theme-preview img { | ||||
|   width: 200px; | ||||
|   height: 150px; | ||||
| } | ||||
|   | ||||
| @@ -5,6 +5,9 @@ | ||||
| 	&.notify { background-image: url("../../../images/icons/@{size}/notify_off.png"); } | ||||
| 	&.gear 	 { background-image: url("../../../images/icons/@{size}/gear.png"); } | ||||
| 	 | ||||
|     &.like 	 { background-image: url("icons/like.png"); } | ||||
| 	&.dislike 	 { background-image: url("icons/dislike.png"); } | ||||
| 	 | ||||
| 	&.add 	 	{ background-image: url("../../../images/icons/@{size}/add.png"); } | ||||
| 	&.delete 	{ background-image: url("../../../images/icons/@{size}/delete.png"); } | ||||
| 	&.edit 	 	{ background-image: url("../../../images/icons/@{size}/edit.png"); } | ||||
| @@ -40,6 +43,10 @@ | ||||
| 		text-indent: 0px; | ||||
| 	} | ||||
|  | ||||
|     min-width:22px; height: 22px; | ||||
|     .icons(22); | ||||
|     &.text { padding: 10px 0px 0px 25px;  } | ||||
|  | ||||
| 	&.s10 { | ||||
| 		min-width:10px; height: 10px; | ||||
| 		.icons(10); | ||||
|   | ||||
| Before Width: | Height: | Size: 438 B After Width: | Height: | Size: 834 B | 
| Before Width: | Height: | Size: 428 B After Width: | Height: | Size: 715 B | 
							
								
								
									
										
											BIN
										
									
								
								view/theme/quattro/icons/dislike.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 386 B | 
							
								
								
									
										
											BIN
										
									
								
								view/theme/quattro/icons/like.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 388 B | 
							
								
								
									
										
											BIN
										
									
								
								view/theme/quattro/icons/next.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 300 B | 
							
								
								
									
										
											BIN
										
									
								
								view/theme/quattro/icons/prev.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 336 B | 
							
								
								
									
										37
									
								
								view/theme/quattro/photo_view.tpl
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,37 @@ | ||||
| <div id="live-display"></div> | ||||
| <h3 id="photo-album-title"><a href="$album.0">$album.1</a></h3> | ||||
|  | ||||
| <div id="photo-edit-link-wrap"> | ||||
| {{ if $tools }} | ||||
| <a id="photo-edit-link" href="$tools.edit.0">$tools.edit.1</a> | ||||
| | | ||||
| <a id="photo-toprofile-link" href="$tools.profile.0">$tools.profile.1</a> | ||||
| {{ endif }} | ||||
| {{ if $lock }} | <img src="images/lock_icon.gif" class="lockview" alt="$lock" onclick="lockview(event,'photo/$id');" /> {{ endif }} | ||||
| </div> | ||||
|  | ||||
| <div id="photo-photo"><a href="$photo.href" title="$photo.title"><img src="$photo.src" /></a></div> | ||||
| {{ if $prevlink }}<div id="photo-prev-link"><a href="$prevlink.0">$prevlink.1</a></div>{{ endif }} | ||||
| {{ if $nextlink }}<div id="photo-next-link"><a href="$nextlink.0">$nextlink.1</a></div>{{ endif }} | ||||
| <div id="photo-caption">$desc</div> | ||||
| {{ if $tags }} | ||||
| <div id="in-this-photo-text">$tags.0</div> | ||||
| <div id="in-this-photo">$tags.1</div> | ||||
| {{ endif }} | ||||
| {{ if $tags.2 }}<div id="tag-remove"><a href="$tags.2">$tags.3</a></div>{{ endif }} | ||||
|  | ||||
| {{ if $edit }}$edit{{ endif }} | ||||
|  | ||||
| {{ if $likebuttons }} | ||||
| <div id="photo-like-div"> | ||||
| 	$likebuttons | ||||
| 	$like | ||||
| 	$dislike	 | ||||
| </div> | ||||
| {{ endif }} | ||||
| <div class="wall-item-comment-wrapper"> | ||||
|     $comments | ||||
| </div> | ||||
|  | ||||
| $paginate | ||||
|  | ||||
| @@ -27,13 +27,17 @@ h4 { font-size: 1.1em } | ||||
|  | ||||
| .opaque(@v: 0.5){ | ||||
| 	opacity: @v; | ||||
| 	-webkit-transition: all 0.2s ease-in-out; | ||||
| 	-moz-transition: all 0.2s ease-in-out; | ||||
| 	-o-transition: all 0.2s ease-in-out; | ||||
| 	-ms-transition: all 0.2s ease-in-out; | ||||
| 	transition: all 0.2s ease-in-out; | ||||
| 	.transition(); | ||||
| } | ||||
|  | ||||
| .transition(@d: 0.2s){ | ||||
| 	-webkit-transition: all @d ease-in-out; | ||||
| 	-moz-transition: all @d ease-in-out; | ||||
| 	-o-transition: all @d ease-in-out; | ||||
| 	-ms-transition: all @d ease-in-out; | ||||
| 	transition: all @d ease-in-out; | ||||
| }	 | ||||
|  | ||||
|  | ||||
| a, a:link { color: @Link; text-decoration: none; } | ||||
| a:visited { color: @LinkVisited; text-decoration: none; } | ||||
| @@ -81,6 +85,7 @@ code { | ||||
| 	height: auto; overflow: auto; | ||||
| 	.label { float: left;} | ||||
| 	.action { float: right; } | ||||
| 	li > img { float: left; } | ||||
| } | ||||
|  | ||||
|  | ||||
| @@ -1068,12 +1073,102 @@ ul.tabs { | ||||
| 	width: 50px; float: left; | ||||
| } | ||||
|  | ||||
| /* photo */ | ||||
| .lframe { | ||||
| /* photo albums */ | ||||
| @photosize: 150px; | ||||
|  | ||||
| #photo-edit-link-wrap { margin-bottom: 10px; } | ||||
| 	 | ||||
| #album-edit-link { | ||||
| 	border-right: 1px solid @MenuBorder; | ||||
| 	float: left; | ||||
| 	margin: 0px 10px 10px 0px; | ||||
| 	padding-right: 5px; | ||||
| 	margin-right: 5px; | ||||
| } | ||||
| #photo-edit-link, | ||||
| #album-edit-link a { | ||||
| 	background: url("../../../images/icons/16/edit.png") no-repeat left center; | ||||
| 	padding-left: 18px; | ||||
| } | ||||
| #photo-toprofile-link { | ||||
| 	background: url("../../../images/icons/16/user.png") no-repeat left center; | ||||
| 	padding-left: 18px; | ||||
| } | ||||
|  | ||||
| .photos-upload-link a, | ||||
| #photo-top-upload-link { | ||||
| 	background: url("../../../images/icons/16/add.png") no-repeat left center; | ||||
| 	padding-left: 18px; | ||||
| } | ||||
|  | ||||
|  | ||||
| .photo-top-image-wrapper, | ||||
| .photo-album-image-wrapper { | ||||
| 	float: left; | ||||
| 	margin: 0px 10px 10px 0px; | ||||
| 	width:@photosize; height: @photosize; | ||||
| 	position: relative; | ||||
| 	overflow: hidden; | ||||
| 	 | ||||
| 	img { width: @photosize; } | ||||
| 		 | ||||
| 	.photo-top-album-name, | ||||
| 	.caption{ | ||||
| 		position: absolute; | ||||
| 		color: @Menu; | ||||
| 		background-color: @MenuBg; | ||||
| 		 | ||||
| 		width: 100%; | ||||
| 		.shadow(0px, 5px); | ||||
| 		.transition(0.5s); | ||||
| 		bottom: -@photosize; | ||||
| 	} | ||||
| 	 | ||||
| 	&:hover .photo-top-album-name, | ||||
| 	&:hover .caption { | ||||
| 		bottom: 0px; | ||||
| 		.shadow(0px, 0px); | ||||
| 		.transition(0.5s); | ||||
| 	} | ||||
| } | ||||
|  | ||||
| #photo-photo { | ||||
| 	display: block; width: 660px; | ||||
| 	padding: 50px; margin-bottom: 0px; | ||||
| 	text-align: center; | ||||
| 	background-color: @Grey3; | ||||
| 	img { max-width: 560px; } | ||||
| } | ||||
| #photo-album-title { | ||||
| 	background: url("../../../images/icons/22/image.png") no-repeat top left; | ||||
| 	padding-left: 23px; | ||||
| 	min-height: 22px; | ||||
| 	a { display: block; padding-top: 5px; } | ||||
| } | ||||
|  | ||||
| #photo-caption { | ||||
| 	display: block; width: 660px; | ||||
| 	min-height: 55px; | ||||
| 	background-color:  @Grey2; | ||||
| 	padding:0 50px 0 50px; | ||||
| } | ||||
| #photo-next-link > a > div { | ||||
| 	background: url("icons/next.png") no-repeat center center; | ||||
| 	float: right; | ||||
| 	width: 50px; height: 50px; | ||||
| } | ||||
| #photo-prev-link > a > div { | ||||
| 	background: url("icons/prev.png") no-repeat center center; | ||||
| 	float: left; | ||||
| 	width: 50px; height: 50px; | ||||
| } | ||||
| #photo-like-div { | ||||
| 	display: block; width: 660px; | ||||
| 	height: 30px; | ||||
| 	background-color:  @Grey2; | ||||
| 	padding:0 50px 0 50px; | ||||
| 	.icon {float: left;} | ||||
| 	.like-rotator {float: right;} | ||||
| } | ||||
| /* profile match wrapper */ | ||||
| .profile-match-wrapper { | ||||
| 	float: left; | ||||
|   | ||||