instagram_feeds.css in Instagram Feeds 7
.block-instagram-feeds {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
}
.block-instagram-feeds.pos-none {
margin: .5em;
}
.block-instagram-feeds.pos-left {
float: left;
margin: 1em 1em 1em 0;
}
.block-instagram-feeds.pos-center {
clear: both;
display: block;
margin: .5em auto;
text-align: center;
}
.block-instagram-feeds.pos-center .view-instagram-feeds-content {
display: inline-block;
}
.block-instagram-feeds.pos-right {
float: right;
margin: 1em 0 1em 1em;
}
.block-instagram-feeds .inst-image {
border-style: solid;
float: left;
overflow: hidden;
position: relative;
}
.block-instagram-feeds .inst-image > a,
.block-instagram-feeds .inst-image > a img,
.page-node #content-wrap .block-instagram-feeds .inst-image > a img {
display: block;
border: none;
margin: 0;
padding: 0;
}
.block-instagram-feeds .inst-image.new-row {
clear: both;
}
.block-instagram-feeds .inst-image:hover {
opacity: 0.8;
}
.instagram-150 a > img,
.block-instagram-feeds .instagram-150,
.block-instagram-feeds .instagram-150 > a {
height: 150px;
width: 150px;
}
.instagram-100 a > img,
.block-instagram-feeds .instagram-100,
.block-instagram-feeds .instagram-100 > a {
height: 100px;
width: 100px;
}
.instagram-50 a > img,
.block-instagram-feeds .instagram-50,
.block-instagram-feeds .instagram-50 > a {
height: 50px;
width: 50px;
}
#cboxLoadedContent {
background-color: #fff !important;
border: none;
margin-bottom: 45px !important;
padding: 0 !important;
}
.instagram-popup {
height: 612px;
max-height: 100%;
max-width: 100%;
overflow: hidden;
display: inline-block;
vertical-align: top;
}
.instagram-popup img,
.instagram-popup .instf-standard-img {
float: left;
width: 612px;
height: 612px;
border: none;
}
.instagram-footer div {
display: inline;
}
.instagram-footer .flag-flag-as-inappropriate {
float: right;
position: static;
}
.instagram-footer .flag-flag-as-inappropriate a {
padding: 15px 0 15px 40px;
background: url(../images/flag.png) 0 50% no-repeat;
font-size: 14px;
}
.instagram-footer .flag-flag-as-inappropriate a.flagged {
color: red;
}
.instagram-footer .flag-message {
font-size: 1.5em;
top: 45px;
left: 0;
background: rgba(255,255,255,0.7);
padding: 0.5em 15px;
width: 582px;
position: absolute;
}
#cboxWrapper {
background: #fff;
border-radius: 0 !important;
}
#cboxTopLeft,
#cboxTopCenter,
#cboxTopRight,
#cboxBottomLeft,
#cboxBottomCenter,
#cboxBottomRight {
height: 0;
}
#cboxMiddleLeft,
#cboxMiddleRight {
width: 15px;
background: #fff;
}
#cboxContent {
margin-top: 0;
overflow: visible;
padding-top: 40px;
}
#cboxTitle {
bottom: auto !important;
color: inherit;
left: 0;
max-width: 612px;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 2px !important;
padding-bottom: 2px !important;
}
.instagram-footer {
bottom: 0;
clear: both;
margin-left: 120px;
position: absolute;
right: 0;
width: 450px;
z-index: 10000;
}
.instagram-counts {
display: inline-block;
float: left;
}
.instagram-counts .comments,
.instagram-counts .likes {
background: url("../images/heart.png") no-repeat scroll -4px 0 transparent;
color: #6677bb;
font-size: 14px;
font-weight: bold;
margin: 20px 0 0 10px;
padding-top: 56px;
text-align: center;
width: 56px;
}
.instagram-counts .comments {
background: url("../images/chat.png") no-repeat scroll -4px 0 transparent;
}
#cboxTitle div,
.instagram-footer div {
display: inline;
line-height: 1.3em;
padding: 0;
vertical-align: middle;
}
#cboxCurrent {
color: #000000;
left: 55px;
position: absolute;
top: auto;
}
#cboxSlideshow,
#cboxPrevious,
#cboxNext,
#cboxClose {
text-indent: -9999px;
width: 20px;
height: 20px;
position: absolute;
top: 10px;
background: url(../images/controls.png) no-repeat 0 0;
}
#cboxPrevious {
top: auto;
background-position: 0 0;
right: 44px;
}
#cboxPrevious:hover {
background-position: 0 -25px;
}
#cboxNext {
top: auto;
background-position: -25px 0;
right: 22px;
}
#cboxNext:hover {
background-position: -25px -25px;
}
#cboxClose {
background-position: -50px 0;
right: 0;
}
#cboxClose:hover {
background-position: -50px -25px;
}
.node-instagram_feed-form input.form-submit,
.node-instagram_feed-form a.button {
border-radius: 0;
}
.node-instagram_feed-form .form-actions .form-item,
.node-instagram_feed-form .form-actions .form-submit {
float: left;
margin-right: 3em;
}
.node-instagram_feed-form #edit-submit {
float: right;
margin-right: 0;
}
.instagram-form-wrapper .form-item,
#node_instagram_feed_form_group_instagram_sources .form-item {
float: left;
margin-right: 4em;
}
.field-group-format h3 {
font-size: 1em;
margin: 0;
padding: 9px 0 0;
}
.top-padding-0 .form-item {
padding-top: 0;
}
.image-wrap,
.inst-image .colorbox-inline {
position: relative;
text-decoration: none;
}
.instagram-popup .image-wrap {
float: left;
}
.image-wrap .video,
.inst-image .colorbox-inline .video {
color: #ffffff;
display: none;
position: absolute;
}
.inst-image .colorbox-inline {
display: block;
}
.inst-image .colorbox-inline .video {
display: inline;
opacity: 0.7;
filter: alpha(opacity=70);
}
.image-wrap:hover .video {
display: inline;
}
.instagram-popup .image-wrap .video {
font-size: 100px;
left: 50%;
line-height: 100px;
margin-left: -42px;
margin-top: -52px;
text-shadow: 0 0 4px #666666;
top: 50%;
}
.inst-image .colorbox-inline .video {
right: 5px;
text-shadow: 0 0 2px #666666;
top: 3px;
}
.instagram-50 .video {
font-size: 12px;
line-height: 12px;
}
.instagram-100 .video {
font-size: 25px;
line-height: 25px;
}
.instagram-150 .video {
font-size: 35px;
line-height: 35px;
}
.instagram-popup .image-wrap .video:hover {
text-shadow: 0 0 -4px #666666;
}
.group_feed_dimensions > div {
float: left;
}
.group_feed_dimensions > div.description {
display: inline;
float: none;
color: red;
}
File
css/instagram_feeds.css
View source
- .block-instagram-feeds {
- display: -moz-inline-stack;
- display: inline-block;
- vertical-align: middle;
- *vertical-align: auto;
- zoom: 1;
- *display: inline;
- }
-
- .block-instagram-feeds.pos-none {
- margin: .5em;
- }
-
- .block-instagram-feeds.pos-left {
- float: left;
- margin: 1em 1em 1em 0;
- }
-
- .block-instagram-feeds.pos-center {
- clear: both;
- display: block;
- margin: .5em auto;
- text-align: center;
- }
-
- .block-instagram-feeds.pos-center .view-instagram-feeds-content {
- display: inline-block;
- }
-
- .block-instagram-feeds.pos-right {
- float: right;
- margin: 1em 0 1em 1em;
- }
-
- .block-instagram-feeds .inst-image {
- border-style: solid;
- float: left;
- overflow: hidden;
- position: relative;
- }
-
- .block-instagram-feeds .inst-image > a,
- .block-instagram-feeds .inst-image > a img,
- .page-node #content-wrap .block-instagram-feeds .inst-image > a img {
- display: block;
- border: none;
- margin: 0;
- padding: 0;
- }
-
- .block-instagram-feeds .inst-image.new-row {
- clear: both;
- }
-
- .block-instagram-feeds .inst-image:hover {
- opacity: 0.8;
- }
-
- .instagram-150 a > img,
- .block-instagram-feeds .instagram-150,
- .block-instagram-feeds .instagram-150 > a {
- height: 150px;
- width: 150px;
- }
-
- .instagram-100 a > img,
- .block-instagram-feeds .instagram-100,
- .block-instagram-feeds .instagram-100 > a {
- height: 100px;
- width: 100px;
- }
-
- .instagram-50 a > img,
- .block-instagram-feeds .instagram-50,
- .block-instagram-feeds .instagram-50 > a {
- height: 50px;
- width: 50px;
- }
-
- #cboxLoadedContent {
- background-color: #fff !important;
- border: none;
- margin-bottom: 45px !important;
- padding: 0 !important;
- }
-
- .instagram-popup {
- height: 612px;
- max-height: 100%;
- max-width: 100%;
- overflow: hidden;
- display: inline-block;
- vertical-align: top;
- }
-
- .instagram-popup img,
- .instagram-popup .instf-standard-img {
- float: left;
- width: 612px;
- height: 612px;
- border: none;
- }
-
- .instagram-footer div {
- display: inline;
- }
-
- .instagram-footer .flag-flag-as-inappropriate {
- float: right;
- position: static;
- }
-
- .instagram-footer .flag-flag-as-inappropriate a {
- padding: 15px 0 15px 40px;
- background: url(../images/flag.png) 0 50% no-repeat;
- font-size: 14px;
- }
-
- .instagram-footer .flag-flag-as-inappropriate a.flagged {
- color: red;
- }
-
- .instagram-footer .flag-message {
- font-size: 1.5em;
- top: 45px;
- left: 0;
- background: rgba(255,255,255,0.7);
- padding: 0.5em 15px;
- width: 582px;
- position: absolute;
- }
-
- #cboxWrapper {
- background: #fff;
- border-radius: 0 !important;
- }
-
- #cboxTopLeft,
- #cboxTopCenter,
- #cboxTopRight,
- #cboxBottomLeft,
- #cboxBottomCenter,
- #cboxBottomRight {
- height: 0;
- }
-
- #cboxMiddleLeft,
- #cboxMiddleRight {
- width: 15px;
- background: #fff;
- }
-
- #cboxContent {
- margin-top: 0;
- overflow: visible;
- padding-top: 40px;
- }
-
- #cboxTitle {
- bottom: auto !important;
- color: inherit;
- left: 0;
- max-width: 612px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- top: 0;
- white-space: nowrap;
- text-overflow: ellipsis;
- padding-top: 2px !important;
- padding-bottom: 2px !important;
- }
-
- .instagram-footer {
- bottom: 0;
- clear: both;
- margin-left: 120px;
- position: absolute;
- right: 0;
- width: 450px;
- z-index: 10000;
- }
-
- .instagram-counts {
- display: inline-block;
- float: left;
- }
-
- .instagram-counts .comments,
- .instagram-counts .likes {
- background: url("../images/heart.png") no-repeat scroll -4px 0 transparent;
- color: #6677bb;
- font-size: 14px;
- font-weight: bold;
- margin: 20px 0 0 10px;
- padding-top: 56px;
- text-align: center;
- width: 56px;
- }
-
- .instagram-counts .comments {
- background: url("../images/chat.png") no-repeat scroll -4px 0 transparent;
- }
-
- #cboxTitle div,
- .instagram-footer div {
- display: inline;
- line-height: 1.3em;
- padding: 0;
- vertical-align: middle;
- }
-
- #cboxCurrent {
- color: #000000;
- left: 55px;
- position: absolute;
- top: auto;
- }
-
- #cboxSlideshow,
- #cboxPrevious,
- #cboxNext,
- #cboxClose {
- text-indent: -9999px;
- width: 20px;
- height: 20px;
- position: absolute;
- top: 10px;
- background: url(../images/controls.png) no-repeat 0 0;
- }
-
- #cboxPrevious {
- top: auto;
- background-position: 0 0;
- right: 44px;
- }
- #cboxPrevious:hover {
- background-position: 0 -25px;
- }
-
- #cboxNext {
- top: auto;
- background-position: -25px 0;
- right: 22px;
- }
-
- #cboxNext:hover {
- background-position: -25px -25px;
- }
-
- #cboxClose {
- background-position: -50px 0;
- right: 0;
- }
-
- #cboxClose:hover {
- background-position: -50px -25px;
- }
-
- .node-instagram_feed-form input.form-submit,
- .node-instagram_feed-form a.button {
- border-radius: 0;
- }
-
- .node-instagram_feed-form .form-actions .form-item,
- .node-instagram_feed-form .form-actions .form-submit {
- float: left;
- margin-right: 3em;
- }
-
- .node-instagram_feed-form #edit-submit {
- float: right;
- margin-right: 0;
- }
-
- .instagram-form-wrapper .form-item,
- #node_instagram_feed_form_group_instagram_sources .form-item {
- float: left;
- margin-right: 4em;
- }
-
- .field-group-format h3 {
- font-size: 1em;
- margin: 0;
- padding: 9px 0 0;
- }
-
- .top-padding-0 .form-item {
- padding-top: 0;
- }
-
- .image-wrap,
- .inst-image .colorbox-inline {
- position: relative;
- text-decoration: none;
- }
-
- .instagram-popup .image-wrap {
- float: left;
- }
-
- .image-wrap .video,
- .inst-image .colorbox-inline .video {
- color: #ffffff;
- display: none;
- position: absolute;
- }
-
- .inst-image .colorbox-inline {
- display: block;
- }
-
- .inst-image .colorbox-inline .video {
- display: inline;
- opacity: 0.7;
- filter: alpha(opacity=70);
- }
-
- .image-wrap:hover .video {
- display: inline;
- }
-
- .instagram-popup .image-wrap .video {
- font-size: 100px;
- left: 50%;
- line-height: 100px;
- margin-left: -42px;
- margin-top: -52px;
- text-shadow: 0 0 4px #666666;
- top: 50%;
- }
-
- .inst-image .colorbox-inline .video {
- right: 5px;
- text-shadow: 0 0 2px #666666;
- top: 3px;
- }
-
- .instagram-50 .video {
- font-size: 12px;
- line-height: 12px;
- }
-
- .instagram-100 .video {
- font-size: 25px;
- line-height: 25px;
- }
-
- .instagram-150 .video {
- font-size: 35px;
- line-height: 35px;
- }
-
- .instagram-popup .image-wrap .video:hover {
- text-shadow: 0 0 -4px #666666;
- }
-
- .group_feed_dimensions > div {
- float: left;
- }
-
- .group_feed_dimensions > div.description {
- display: inline;
- float: none;
- color: red;
- }