You are here

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
  1. .block-instagram-feeds {
  2. display: -moz-inline-stack;
  3. display: inline-block;
  4. vertical-align: middle;
  5. *vertical-align: auto;
  6. zoom: 1;
  7. *display: inline;
  8. }
  9. .block-instagram-feeds.pos-none {
  10. margin: .5em;
  11. }
  12. .block-instagram-feeds.pos-left {
  13. float: left;
  14. margin: 1em 1em 1em 0;
  15. }
  16. .block-instagram-feeds.pos-center {
  17. clear: both;
  18. display: block;
  19. margin: .5em auto;
  20. text-align: center;
  21. }
  22. .block-instagram-feeds.pos-center .view-instagram-feeds-content {
  23. display: inline-block;
  24. }
  25. .block-instagram-feeds.pos-right {
  26. float: right;
  27. margin: 1em 0 1em 1em;
  28. }
  29. .block-instagram-feeds .inst-image {
  30. border-style: solid;
  31. float: left;
  32. overflow: hidden;
  33. position: relative;
  34. }
  35. .block-instagram-feeds .inst-image > a,
  36. .block-instagram-feeds .inst-image > a img,
  37. .page-node #content-wrap .block-instagram-feeds .inst-image > a img {
  38. display: block;
  39. border: none;
  40. margin: 0;
  41. padding: 0;
  42. }
  43. .block-instagram-feeds .inst-image.new-row {
  44. clear: both;
  45. }
  46. .block-instagram-feeds .inst-image:hover {
  47. opacity: 0.8;
  48. }
  49. .instagram-150 a > img,
  50. .block-instagram-feeds .instagram-150,
  51. .block-instagram-feeds .instagram-150 > a {
  52. height: 150px;
  53. width: 150px;
  54. }
  55. .instagram-100 a > img,
  56. .block-instagram-feeds .instagram-100,
  57. .block-instagram-feeds .instagram-100 > a {
  58. height: 100px;
  59. width: 100px;
  60. }
  61. .instagram-50 a > img,
  62. .block-instagram-feeds .instagram-50,
  63. .block-instagram-feeds .instagram-50 > a {
  64. height: 50px;
  65. width: 50px;
  66. }
  67. #cboxLoadedContent {
  68. background-color: #fff !important;
  69. border: none;
  70. margin-bottom: 45px !important;
  71. padding: 0 !important;
  72. }
  73. .instagram-popup {
  74. height: 612px;
  75. max-height: 100%;
  76. max-width: 100%;
  77. overflow: hidden;
  78. display: inline-block;
  79. vertical-align: top;
  80. }
  81. .instagram-popup img,
  82. .instagram-popup .instf-standard-img {
  83. float: left;
  84. width: 612px;
  85. height: 612px;
  86. border: none;
  87. }
  88. .instagram-footer div {
  89. display: inline;
  90. }
  91. .instagram-footer .flag-flag-as-inappropriate {
  92. float: right;
  93. position: static;
  94. }
  95. .instagram-footer .flag-flag-as-inappropriate a {
  96. padding: 15px 0 15px 40px;
  97. background: url(../images/flag.png) 0 50% no-repeat;
  98. font-size: 14px;
  99. }
  100. .instagram-footer .flag-flag-as-inappropriate a.flagged {
  101. color: red;
  102. }
  103. .instagram-footer .flag-message {
  104. font-size: 1.5em;
  105. top: 45px;
  106. left: 0;
  107. background: rgba(255,255,255,0.7);
  108. padding: 0.5em 15px;
  109. width: 582px;
  110. position: absolute;
  111. }
  112. #cboxWrapper {
  113. background: #fff;
  114. border-radius: 0 !important;
  115. }
  116. #cboxTopLeft,
  117. #cboxTopCenter,
  118. #cboxTopRight,
  119. #cboxBottomLeft,
  120. #cboxBottomCenter,
  121. #cboxBottomRight {
  122. height: 0;
  123. }
  124. #cboxMiddleLeft,
  125. #cboxMiddleRight {
  126. width: 15px;
  127. background: #fff;
  128. }
  129. #cboxContent {
  130. margin-top: 0;
  131. overflow: visible;
  132. padding-top: 40px;
  133. }
  134. #cboxTitle {
  135. bottom: auto !important;
  136. color: inherit;
  137. left: 0;
  138. max-width: 612px;
  139. overflow: hidden;
  140. padding: 0;
  141. position: absolute;
  142. top: 0;
  143. white-space: nowrap;
  144. text-overflow: ellipsis;
  145. padding-top: 2px !important;
  146. padding-bottom: 2px !important;
  147. }
  148. .instagram-footer {
  149. bottom: 0;
  150. clear: both;
  151. margin-left: 120px;
  152. position: absolute;
  153. right: 0;
  154. width: 450px;
  155. z-index: 10000;
  156. }
  157. .instagram-counts {
  158. display: inline-block;
  159. float: left;
  160. }
  161. .instagram-counts .comments,
  162. .instagram-counts .likes {
  163. background: url("../images/heart.png") no-repeat scroll -4px 0 transparent;
  164. color: #6677bb;
  165. font-size: 14px;
  166. font-weight: bold;
  167. margin: 20px 0 0 10px;
  168. padding-top: 56px;
  169. text-align: center;
  170. width: 56px;
  171. }
  172. .instagram-counts .comments {
  173. background: url("../images/chat.png") no-repeat scroll -4px 0 transparent;
  174. }
  175. #cboxTitle div,
  176. .instagram-footer div {
  177. display: inline;
  178. line-height: 1.3em;
  179. padding: 0;
  180. vertical-align: middle;
  181. }
  182. #cboxCurrent {
  183. color: #000000;
  184. left: 55px;
  185. position: absolute;
  186. top: auto;
  187. }
  188. #cboxSlideshow,
  189. #cboxPrevious,
  190. #cboxNext,
  191. #cboxClose {
  192. text-indent: -9999px;
  193. width: 20px;
  194. height: 20px;
  195. position: absolute;
  196. top: 10px;
  197. background: url(../images/controls.png) no-repeat 0 0;
  198. }
  199. #cboxPrevious {
  200. top: auto;
  201. background-position: 0 0;
  202. right: 44px;
  203. }
  204. #cboxPrevious:hover {
  205. background-position: 0 -25px;
  206. }
  207. #cboxNext {
  208. top: auto;
  209. background-position: -25px 0;
  210. right: 22px;
  211. }
  212. #cboxNext:hover {
  213. background-position: -25px -25px;
  214. }
  215. #cboxClose {
  216. background-position: -50px 0;
  217. right: 0;
  218. }
  219. #cboxClose:hover {
  220. background-position: -50px -25px;
  221. }
  222. .node-instagram_feed-form input.form-submit,
  223. .node-instagram_feed-form a.button {
  224. border-radius: 0;
  225. }
  226. .node-instagram_feed-form .form-actions .form-item,
  227. .node-instagram_feed-form .form-actions .form-submit {
  228. float: left;
  229. margin-right: 3em;
  230. }
  231. .node-instagram_feed-form #edit-submit {
  232. float: right;
  233. margin-right: 0;
  234. }
  235. .instagram-form-wrapper .form-item,
  236. #node_instagram_feed_form_group_instagram_sources .form-item {
  237. float: left;
  238. margin-right: 4em;
  239. }
  240. .field-group-format h3 {
  241. font-size: 1em;
  242. margin: 0;
  243. padding: 9px 0 0;
  244. }
  245. .top-padding-0 .form-item {
  246. padding-top: 0;
  247. }
  248. .image-wrap,
  249. .inst-image .colorbox-inline {
  250. position: relative;
  251. text-decoration: none;
  252. }
  253. .instagram-popup .image-wrap {
  254. float: left;
  255. }
  256. .image-wrap .video,
  257. .inst-image .colorbox-inline .video {
  258. color: #ffffff;
  259. display: none;
  260. position: absolute;
  261. }
  262. .inst-image .colorbox-inline {
  263. display: block;
  264. }
  265. .inst-image .colorbox-inline .video {
  266. display: inline;
  267. opacity: 0.7;
  268. filter: alpha(opacity=70);
  269. }
  270. .image-wrap:hover .video {
  271. display: inline;
  272. }
  273. .instagram-popup .image-wrap .video {
  274. font-size: 100px;
  275. left: 50%;
  276. line-height: 100px;
  277. margin-left: -42px;
  278. margin-top: -52px;
  279. text-shadow: 0 0 4px #666666;
  280. top: 50%;
  281. }
  282. .inst-image .colorbox-inline .video {
  283. right: 5px;
  284. text-shadow: 0 0 2px #666666;
  285. top: 3px;
  286. }
  287. .instagram-50 .video {
  288. font-size: 12px;
  289. line-height: 12px;
  290. }
  291. .instagram-100 .video {
  292. font-size: 25px;
  293. line-height: 25px;
  294. }
  295. .instagram-150 .video {
  296. font-size: 35px;
  297. line-height: 35px;
  298. }
  299. .instagram-popup .image-wrap .video:hover {
  300. text-shadow: 0 0 -4px #666666;
  301. }
  302. .group_feed_dimensions > div {
  303. float: left;
  304. }
  305. .group_feed_dimensions > div.description {
  306. display: inline;
  307. float: none;
  308. color: red;
  309. }