Instagram Feed - Version 2.4

Version Description

  • New: Email alerts for critical issues. If there's an issue with an Instagram feed on your website which hasn't been resolved yet then you'll receive an email notification to let you know. This is sent once per week until the issue is resolved. These emails can be disabled by using the following setting: Instagram Feed > Customize > Advanced > Misc > Feed Issue Email Report.
  • New: Admin notifications for critical issues. If there is an error with the feed, admins will see notices in the dashboard and on the front-end of the site along with instructions on how to resolve the issue. Front-end admin notifications can be disabled by using the following setting: Instagram Feed > Customize > Advanced > Misc > Disable Admin Error Notice.
  • New: Added a WordPress 'Site Health' integration. If there is a critical error with your feeds, it will now be flagged in the site health page.
  • New: Added "About Us" page for those who would like to learn more about Smash Balloon and our other products. Go to Instagram Feed -> About Us in the dashboard.
  • New: Added support for an Instagram Feed widget. When on the widgets menu, look for the widget "Instagram Feed" to add your feed to a widget area.
Download this release

Release Info

Developer smashballoon
Plugin Icon 128x128 Instagram Feed
Version 2.4
Comparing to
See all releases

Code changes from version 2.2.2 to 2.4

Files changed (58) hide show
  1. README.txt +15 -1
  2. css/sb-blocks.css +3 -0
  3. css/sb-instagram-2-2.css +818 -818
  4. css/sb-instagram-admin.css +719 -1
  5. css/sb-instagram.css +818 -818
  6. img/about/api-error.png +0 -0
  7. img/about/icon-full.svg +1 -0
  8. img/about/icon-none.svg +1 -0
  9. img/about/icon-partial.svg +1 -0
  10. img/about/plugin-fb.png +0 -0
  11. img/about/plugin-mi.png +0 -0
  12. img/about/plugin-om.png +0 -0
  13. img/about/plugin-rp.png +0 -0
  14. img/about/plugin-seo.png +0 -0
  15. img/about/plugin-smtp.png +0 -0
  16. img/about/plugin-tw.jpg +0 -0
  17. img/about/plugin-wpforms.png +0 -0
  18. img/about/plugin-yt.png +0 -0
  19. img/about/steps.png +0 -0
  20. img/about/team.jpg +0 -0
  21. img/balloon-120.png +0 -0
  22. img/insta-logo.png +0 -0
  23. img/sbi-icon-offer.png +0 -0
  24. inc/admin/PluginSilentUpgrader.php +576 -0
  25. inc/admin/PluginSilentUpgraderSkin.php +57 -0
  26. inc/admin/actions.php +1283 -1182
  27. inc/admin/addon-functions.php +175 -0
  28. inc/admin/blocks/class-sbi-blocks.php +149 -0
  29. inc/admin/class-install-skin.php +27 -0
  30. inc/admin/class-sbi-about.php +1317 -0
  31. inc/admin/class-sbi-sitehealth.php +82 -0
  32. inc/admin/main.php +2847 -2732
  33. inc/class-sb-instagram-api-connect.php +421 -379
  34. inc/class-sb-instagram-cron-updater.php +225 -225
  35. inc/class-sb-instagram-display-elements.php +360 -360
  36. inc/class-sb-instagram-education.php +130 -0
  37. inc/class-sb-instagram-feed.php +1476 -1448
  38. inc/class-sb-instagram-parse.php +313 -313
  39. inc/class-sb-instagram-post-set.php +187 -187
  40. inc/class-sb-instagram-post.php +546 -546
  41. inc/class-sb-instagram-posts-manager.php +524 -448
  42. inc/class-sb-instagram-settings.php +603 -597
  43. inc/class-sb-instagram-token-refresher.php +175 -175
  44. inc/email.php +102 -0
  45. inc/if-functions.php +1280 -1022
  46. instagram-feed.php +56 -5
  47. js/jquery.matchHeight-min.js +12 -0
  48. js/sb-blocks.js +114 -0
  49. js/sb-instagram-2-2.js +890 -890
  50. js/sb-instagram-admin-2-2.js +293 -1
  51. js/sb-instagram.js +886 -886
  52. languages/instagram-feed.pot +2162 -2162
  53. templates/feed.php +66 -66
  54. templates/footer.php +38 -38
  55. templates/header.php +47 -47
  56. templates/item.php +57 -57
  57. widget.php +67 -0
  58. wpml-config.xml +12 -12
README.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: smashballoon, craig-at-smash-balloon
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram widget, Instagram gallery
4
Requires at least: 3.4
5
Tested up to: 5.4
6
- Stable tag: 2.2.2
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
@@ -26,6 +26,7 @@ Display Instagram posts from your Instagram accounts, either in the same single
26
* Display a **beautiful header** at the top of your feed
27
* Display your Instagram photos chronologically or in random order
28
* Add your own Custom CSS and JavaScript for even deeper customizations
29
30
= Benefits =
31
* **Increase Social Engagement** - Increase engagement between you and your Instagram followers. Increase your number of followers by displaying your Instagram content directly on your site.
@@ -324,6 +325,19 @@ We understand that sometimes you need help, have issues or just have questions.
324
* Plus more customization options added all the time!
325
326
== Changelog ==
327
= 2.2.2 =
328
* Tested with upcoming WordPress 5.4 update.
329
* Tweak: Language files updated to account for all new strings.
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram widget, Instagram gallery
4
Requires at least: 3.4
5
Tested up to: 5.4
6
+ Stable tag: 2.4
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
26
* Display a **beautiful header** at the top of your feed
27
* Display your Instagram photos chronologically or in random order
28
* Add your own Custom CSS and JavaScript for even deeper customizations
29
+ * Handy block for easily adding your feed to posts and pages using the block editor
30
31
= Benefits =
32
* **Increase Social Engagement** - Increase engagement between you and your Instagram followers. Increase your number of followers by displaying your Instagram content directly on your site.
325
* Plus more customization options added all the time!
326
327
== Changelog ==
328
+ = 2.4 =
329
+ * New: Email alerts for critical issues. If there's an issue with an Instagram feed on your website which hasn't been resolved yet then you'll receive an email notification to let you know. This is sent once per week until the issue is resolved. These emails can be disabled by using the following setting: Instagram Feed > Customize > Advanced > Misc > Feed Issue Email Report.
330
+ * New: Admin notifications for critical issues. If there is an error with the feed, admins will see notices in the dashboard and on the front-end of the site along with instructions on how to resolve the issue. Front-end admin notifications can be disabled by using the following setting: Instagram Feed > Customize > Advanced > Misc > Disable Admin Error Notice.
331
+ * New: Added a WordPress 'Site Health' integration. If there is a critical error with your feeds, it will now be flagged in the site health page.
332
+ * New: Added "About Us" page for those who would like to learn more about Smash Balloon and our other products. Go to Instagram Feed -> About Us in the dashboard.
333
+ * New: Added support for an Instagram Feed widget. When on the widgets menu, look for the widget "Instagram Feed" to add your feed to a widget area.
334
+
335
+ = 2.3.1 =
336
+ * Fix: Added workaround for personal account connection error and header display issue due to an Instagram API bug. After updating, click "Save Changes" on the Instagram Feed settings page, "Configure" tab to clear your cache.
337
+
338
+ = 2.3 =
339
+ * New: Added an "Instagram Feed" Gutenberg block to use in the block editor, allowing you to easily add a feed to posts and pages.
340
+
341
= 2.2.2 =
342
* Tested with upcoming WordPress 5.4 update.
343
* Tweak: Language files updated to account for all new strings.
css/sb-blocks.css ADDED
@@ -0,0 +1,3 @@
1
+ .sbi {
2
+ pointer-events: none !important;
3
+ }
css/sb-instagram-2-2.css CHANGED
@@ -1,819 +1,819 @@
1
- /**************/
2
- /*** LAYOUT ***/
3
- /**************/
4
-
5
- /* Feed container */
6
- #sb_instagram {
7
- width: 100%;
8
- margin: 0 auto;
9
- padding: 0;
10
- -webkit-box-sizing: border-box;
11
- -moz-box-sizing: border-box;
12
- box-sizing: border-box;
13
- }
14
- #sb_instagram:after{
15
- content: "";
16
- display: table;
17
- clear: both;
18
- }
19
-
20
- /*********************/
21
- /*** STYLE OPTIONS ***/
22
- /*********************/
23
- #sb_instagram.sbi_fixed_height{
24
- overflow: hidden;
25
- overflow-y: auto;
26
- -webkit-box-sizing: border-box;
27
- -moz-box-sizing: border-box;
28
- box-sizing: border-box;
29
- }
30
- #sb_instagram #sbi_images{
31
- width: 100%;
32
- float: left;
33
- line-height: 0;
34
-
35
- -webkit-box-sizing: border-box;
36
- -moz-box-sizing: border-box;
37
- box-sizing: border-box;
38
- }
39
- /* Remove header shadow/border */
40
- #sb_instagram .sbi_header_link {
41
- -webkit-box-shadow: none;
42
- box-shadow: none;
43
- }
44
- #sb_instagram .sbi_header_link:hover {
45
- border: none;
46
- }
47
-
48
- /* Items */
49
- #sb_instagram #sbi_images .sbi_item{
50
- display: -moz-inline-stack;
51
- display: inline-block;
52
- float: left;
53
- vertical-align: top;
54
- zoom: 1;
55
- *display: inline;
56
-
57
- max-height: 1000px;
58
- padding: inherit !important;
59
- margin: 0 !important;
60
- text-decoration: none;
61
- opacity: 1;
62
- overflow: hidden;
63
-
64
- -webkit-box-sizing: border-box;
65
- -moz-box-sizing: border-box;
66
- box-sizing: border-box;
67
-
68
- -webkit-transition: all 0.5s ease;
69
- -moz-transition: all 0.5s ease;
70
- -o-transition: all 0.5s ease;
71
- -ms-transition: all 0.5s ease;
72
- transition: all 0.5s ease;
73
- }
74
- /* Transition items in */
75
- #sb_instagram #sbi_images .sbi_item.sbi_transition{
76
- opacity: 0;
77
- max-height: 0;
78
- }
79
-
80
- /* Cols */
81
- #sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
82
- #sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
83
- #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
84
- #sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
85
- #sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
86
- #sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
87
- #sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
88
- #sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
89
- #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
90
- #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
91
-
92
- /* Disable mobile layout */
93
- #sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{ width: 100%; }
94
- #sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{ width: 50%; }
95
- #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{ width: 33.33%; }
96
- #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{ width: 25%; }
97
- #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{ width: 20%; }
98
- #sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{ width: 16.66%; }
99
- #sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{ width: 14.28%; }
100
- #sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{ width: 12.5%; }
101
- #sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{ width: 11.11%; }
102
- #sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{ width: 10%; }
103
-
104
- /* Photos */
105
- #sb_instagram .sbi_photo_wrap{
106
- position: relative;
107
- }
108
- #sb_instagram .sbi_photo{
109
- display: block;
110
- text-decoration: none;
111
- }
112
- #sb_instagram .sbi_photo img{
113
- width: 100%;
114
- height: auto;
115
- }
116
- #sb_instagram .sbi_no_js img{
117
- display: none;
118
- }
119
- #sb_instagram a,
120
- #sb_instagram a:hover,
121
- #sb_instagram a:focus,
122
- #sb_instagram a:active{
123
- outline: none;
124
- }
125
- #sb_instagram img{
126
- display: block;
127
- padding: 0 !important;
128
- margin: 0 !important;
129
- max-width: 100% !important;
130
- opacity: 1 !important;
131
- }
132
- #sb_instagram .sbi_link{
133
- display: none;
134
- position: absolute;
135
- bottom: 0;
136
- right: 0;
137
-
138
- width: 100%;
139
- padding: 10px 0;
140
- background: rgba(0,0,0,0.5);
141
- text-align: center;
142
- color: #fff;
143
- font-size: 12px;
144
- line-height: 1.1;
145
- }
146
- #sb_instagram .sbi_link a{
147
- padding: 0 6px;
148
- text-decoration: none;
149
- color: #fff;
150
- font-size: 12px;
151
- line-height: 1.1;
152
-
153
- display: -moz-inline-stack;
154
- display: inline-block;
155
- vertical-align: top;
156
- zoom: 1;
157
- *display: inline;
158
- }
159
- #sb_instagram .sbi_link .sbi_lightbox_link{
160
- padding-bottom: 5px;
161
- }
162
- #sb_instagram .sbi_link a:hover,
163
- #sb_instagram .sbi_link a:focus{
164
- text-decoration: underline;
165
- }
166
- #sb_instagram .sbi_photo_wrap:hover .sbi_link,
167
- #sb_instagram .sbi_photo_wrap:focus .sbi_link{
168
- display: block;
169
- }
170
-
171
- /* Videos */
172
- #sb_instagram svg:not(:root).svg-inline--fa {
173
- height: 1em;
174
- display: inline-block;
175
- }
176
-
177
- #sb_instagram .sbi_type_video .sbi_playbtn,
178
- #sb_instagram .sbi_type_carousel .sbi_playbtn,
179
- .sbi_type_carousel .fa-clone,
180
- #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
181
- #sb_instagram .sbi_type_video .svg-inline--fa.fa-play{
182
- display: block !important;
183
- position: absolute;
184
- z-index: 1;
185
-
186
- color: #fff;
187
- color: rgba(255,255,255,0.9);
188
- font-style: normal !important;
189
- text-shadow: 0 0 8px rgba(0,0,0,0.8);
190
- }
191
- #sb_instagram .sbi_type_video .sbi_playbtn,
192
- #sb_instagram .sbi_type_carousel .sbi_playbtn {
193
- z-index: 2;
194
- top: 50%;
195
- left: 50%;
196
- margin-top: -24px;
197
- margin-left: -19px;
198
- padding: 0;
199
- font-size: 48px;
200
- }
201
- #sb_instagram .sbi_type_carousel .fa-clone{
202
- right: 12px;
203
- top: 12px;
204
- font-size: 24px;
205
- text-shadow: 0 0 8px rgba(0,0,0,0.3);
206
- }
207
- .sbi_type_carousel svg.fa-clone,
208
- #sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
209
- #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play{
210
- -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
211
- filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
212
- }
213
-
214
- /* Loader */
215
- #sb_instagram .sbi_loader{
216
- width: 20px;
217
- height: 20px;
218
-
219
- position: relative;
220
- top: 50%;
221
- left: 50%;
222
- margin: -10px 0 0 -10px;
223
- background-color: #000;
224
- background-color: rgba(0,0,0,0.5);
225
-
226
- border-radius: 100%;
227
- -webkit-animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
228
- animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
229
- }
230
- #sb_instagram br {
231
- display: none;
232
- }
233
- #sbi_load p {
234
- display: inline;
235
- padding: 0;
236
- margin: 0;
237
- }
238
- /* Loader in button */
239
- #sb_instagram #sbi_load .sbi_loader{
240
- position: absolute;
241
- margin-top: -11px;
242
- background-color: #fff;
243
- opacity: 1;
244
- }
245
- @-webkit-keyframes sbi-sk-scaleout {
246
- 0% { -webkit-transform: scale(0) }
247
- 100% {
248
- -webkit-transform: scale(1.0);
249
- opacity: 0;
250
- }
251
- }
252
- @keyframes sbi-sk-scaleout {
253
- 0% {
254
- -webkit-transform: scale(0);
255
- -ms-transform: scale(0);
256
- transform: scale(0);
257
- } 100% {
258
- -webkit-transform: scale(1.0);
259
- -ms-transform: scale(1.0);
260
- transform: scale(1.0);
261
- opacity: 0;
262
- }
263
- }
264
-
265
- #sb_instagram .fa-spin,
266
- #sbi_lightbox .fa-spin{
267
- -webkit-animation: fa-spin 2s infinite linear;
268
- animation: fa-spin 2s infinite linear
269
- }
270
-
271
- #sb_instagram .fa-pulse,
272
- #sbi_lightbox .fa-pulse{
273
- -webkit-animation: fa-spin 1s infinite steps(8);
274
- animation: fa-spin 1s infinite steps(8)
275
- }
276
-
277
- @-webkit-keyframes fa-spin {
278
- 0% {
279
- -webkit-transform: rotate(0deg);
280
- transform: rotate(0deg)
281
- }
282
- 100% {
283
- -webkit-transform: rotate(359deg);
284
- transform: rotate(359deg)
285
- }
286
- }
287
-
288
- @keyframes fa-spin {
289
- 0% {
290
- -webkit-transform: rotate(0deg);
291
- transform: rotate(0deg)
292
- }
293
- 100% {
294
- -webkit-transform: rotate(359deg);
295
- transform: rotate(359deg)
296
- }
297
- }
298
- /* Screen reader */
299
- .sbi-screenreader{text-indent: -9999px !important;display: block !important;width: 0 !important;height: 0 !important;line-height: 0 !important;text-align: left !important; }
300
-
301
- /* HEADER */
302
- #sb_instagram .sb_instagram_header{
303
- float: left;
304
- clear: both;
305
- margin: 0 0 15px 0;
306
- padding: 0;
307
- line-height: 1.2;
308
- width: 100%;
309
- }
310
- #sb_instagram .sb_instagram_header a{
311
- float: left;
312
- display: block;
313
- /*width: 100%;*/
314
- min-width: 100%\9;
315
- text-decoration: none;
316
- transition: color 0.5s ease;
317
- }
318
- .sbi_no_avatar .sbi_header_img{
319
- background: #333;
320
- color: #fff;
321
- width: 50px;
322
- height: 50px;
323
- position: relative;
324
- }
325
- .sbi_no_avatar .sbi_header_hashtag_icon {
326
- display: block;
327
- color: #fff;
328
- opacity: .9;
329
- -webkit-transition: background .6s linear,color .6s linear;
330
- -moz-transition: background .6s linear,color .6s linear;
331
- -ms-transition: background .6s linear,color .6s linear;
332
- -o-transition: background .6s linear,color .6s linear;
333
- transition: background .6s linear,color .6s linear
334
- }
335
-
336
- .sbi_no_avatar:hover .sbi_header_hashtag_icon {
337
- display: block;
338
- opacity: 1;
339
- -webkit-transition: background .2s linear,color .2s linear;
340
- -moz-transition: background .2s linear,color .2s linear;
341
- -ms-transition: background .2s linear,color .2s linear;
342
- -o-transition: background .2s linear,color .2s linear;
343
- transition: background .2s linear,color .2s linear
344
- }
345
- /** Medium Header */
346
- /* Only use medium & large headers on devices above 480px */
347
- @media all and (min-width: 480px){
348
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img {
349
- width: 80px;
350
- height: 80px;
351
- border-radius: 40px;
352
- }
353
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img {
354
- width: 80px;
355
- height: 80px;
356
- border-radius: 40px;
357
- }
358
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3 {
359
- font-size: 20px;
360
- }
361
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
362
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
363
- font-size: 14px;
364
- }
365
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3,
366
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
367
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
368
- margin-left: 95px !important;
369
- line-height: 1.4
370
- }
371
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{
372
- margin-right: -85px !important;
373
- }
374
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{
375
- margin-top: 4px !important;
376
- }
377
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text.sbi_no_bio h3{
378
- padding-top: 20px !important;
379
- }
380
- /** Large Header */
381
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img {
382
- width: 120px;
383
- height: 120px;
384
- border-radius: 60px;
385
- }
386
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img {
387
- width: 120px;
388
- height: 120px;
389
- border-radius: 60px;
390
- }
391
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3 {
392
- font-size: 28px;
393
- }
394
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
395
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
396
- font-size: 16px;
397
- }
398
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3,
399
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
400
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
401
- margin-left: 140px !important;
402
- line-height: 1.5;
403
- }
404
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{
405
- margin-right: -120px !important;
406
- }
407
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{
408
- margin-top: 12px !important;
409
- }
410
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text.sbi_no_bio h3{
411
- padding-top: 32px !important;
412
- }
413
- }
414
-
415
- /* Header profile pic */
416
- #sb_instagram .sb_instagram_header .sbi_header_img{
417
- float: left;
418
- position: relative;
419
- width: 50px;
420
- margin: 0 0 0 -100% !important;
421
- overflow: hidden;
422
-
423
- -moz-border-radius: 40px;
424
- -webkit-border-radius: 40px;
425
- border-radius: 40px;
426
- }
427
- #sb_instagram .sb_instagram_header .sbi_header_img img{
428
- float: left;
429
- margin: 0 !important;
430
- padding: 0 !important;
431
- border: none !important;
432
-
433
- -moz-border-radius: 40px;
434
- -webkit-border-radius: 40px;
435
- border-radius: 40px;
436
- }
437
- /* Profile pic hover */
438
- /* Profile pic hover */
439
- #sb_instagram .sb_instagram_header .sbi_header_img_hover{
440
- opacity: 0;
441
- position: absolute;
442
- width: 100%;
443
- top: 0;
444
- bottom: 0;
445
- left: 0;
446
- text-align: center;
447
- color: #fff;
448
- background: rgba(0,0,0,0.75);
449
- }
450
-
451
- #sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo,
452
- #sb_instagram .sb_instagram_header .sbi_header_hashtag_icon .sbi_new_logo{
453
- position: absolute;
454
- top: 50%;
455
- left: 50%;
456
- margin-top: -12px;
457
- margin-left: -12px;
458
- width: 24px;
459
- height: 24px;
460
- font-size: 24px;
461
- }
462
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_hashtag_icon .sbi_new_logo,
463
- .sb_instagram_header.sbi_medium .sbi_header_hashtag_icon .sbi_new_logo{
464
- margin-top: -18px;
465
- margin-left: -18px;
466
- width: 36px;
467
- height: 36px;
468
- font-size: 36px
469
- }
470
-
471
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_hashtag_icon .sbi_new_logo,
472
- .sb_instagram_header.sbi_large .sbi_header_hashtag_icon .sbi_new_logo {
473
- margin-top: -24px;
474
- margin-left: -24px;
475
- width: 48px;
476
- height: 48px;
477
- font-size: 48px
478
- }
479
- #sb_instagram .sb_instagram_header .sbi_header_img_hover i {
480
- overflow: hidden;
481
- background: url('../img/small-logo.png') no-repeat 0 0;
482
- }
483
- #sb_instagram .sb_instagram_header .sbi_header_img_hover{
484
- z-index: 2;
485
- transition: opacity 0.4s ease-in-out;
486
- }
487
- #sb_instagram .sb_instagram_header .sbi_fade_in{
488
- opacity: 1;
489
- transition: opacity 0.2s ease-in-out;
490
- }
491
- #sb_instagram .sb_instagram_header .sbi_header_img_hover{
492
- position: absolute;
493
- width: 100%;
494
- top: 0;
495
- bottom: 0;
496
- left: 0;
497
- text-align: center;
498
- color: #fff;
499
- background: rgba(0,0,0,0.75);
500
-
501
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
502
- filter: alpha(opacity=0);
503
- -moz-opacity: 0;
504
- -khtml-opacity: 0;
505
- opacity: 0;
506
- border-radius: 40px;
507
- transition: opacity 0.2s;
508
- }
509
- /* Fade the Instagram icon in when hovering on the header */
510
- #sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover,
511
- #sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover{
512
- opacity: 1;
513
- }
514
- /* Header text */
515
- #sb_instagram .sb_instagram_header .sbi_header_text{
516
- float: left;
517
- width: 100%;
518
- padding-top: 5px;
519
- }
520
- #sb_instagram .sb_instagram_header a{
521
- text-decoration: none;
522
- }
523
- #sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,
524
- #sb_instagram .sb_instagram_header .sbi_header_text h3{
525
- float: left;
526
- clear: both;
527
- width: auto;
528
- margin: 0 0 0 60px !important;
529
- padding: 0 !important;
530
- }
531
- #sb_instagram .sb_instagram_header h3{
532
- font-size: 16px;
533
- line-height: 1.3;
534
- }
535
- #sb_instagram .sb_instagram_header p{
536
- font-size: 13px;
537
- line-height: 1.3;
538
- margin: 0;
539
- padding: 0;
540
- }
541
- #sb_instagram p:empty { display: none; }
542
- #sb_instagram .sb_instagram_header .sbi_header_text img.emoji{
543
- margin-right: 3px !important;
544
- }
545
-
546
- /* No bio */
547
- #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{
548
- padding-top: 9px !important;
549
- }
550
- #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{
551
- clear: both;
552
- }
553
-
554
-
555
- /* Buttons */
556
- #sb_instagram #sbi_load{
557
- float: left;
558
- clear: both;
559
- width: 100%;
560
- text-align: center;
561
- }
562
- #sb_instagram #sbi_load .fa-spinner{
563
- display: none;
564
- position: absolute;
565
- top: 50%;
566
- left: 50%;
567
- margin: -8px 0 0 -7px;
568
- font-size: 15px;
569
- }
570
- #sb_instagram #sbi_load{
571
- opacity: 1;
572
- transition: all 0.5s ease-in;
573
- }
574
- #sb_instagram .sbi_load_btn .sbi_btn_text, #sb_instagram .sbi_load_btn .sbi_loader{
575
- opacity: 1;
576
- transition: all 0.1s ease-in;
577
- }
578
- #sb_instagram .sbi_hidden{
579
- opacity: 0 !important;
580
- }
581
- #sb_instagram #sbi_load .sbi_load_btn,
582
- #sb_instagram .sbi_follow_btn a{
583
- display: -moz-inline-stack;
584
- display: inline-block;
585
- vertical-align: top;
586
- zoom: 1;
587
- *display: inline;
588
-
589
- padding: 7px 14px;
590
- margin: 5px auto 0 auto;
591
- background: #333;
592
- color: #eee;
593
- border: none;
594
- color: #fff;
595
- text-decoration: none;
596
- font-size: 13px;
597
- line-height: 1.5;
598
-
599
- -moz-border-radius: 4px;
600
- -webkit-border-radius: 4px;
601
- border-radius: 4px;
602
-
603
- -webkit-box-sizing: border-box;
604
- -moz-box-sizing: border-box;
605
- box-sizing: border-box;
606
- }
607
- #sb_instagram #sbi_load .sbi_load_btn {
608
- position: relative;
609
- }
610
- /* Follow button */
611
- #sb_instagram .sbi_follow_btn{
612
- display: -moz-inline-stack;
613
- display: inline-block;
614
- vertical-align: top;
615
- zoom: 1;
616
- *display: inline;
617
- text-align: center;
618
- }
619
- #sb_instagram .sbi_follow_btn.sbi_top{
620
- display: block;
621
- margin-bottom: 5px;
622
- }
623
- #sb_instagram .sbi_follow_btn a{
624
- background: #408bd1;
625
- color: #fff;
626
- }
627
- #sb_instagram .sbi_follow_btn a,
628
- #sb_instagram .sbi_follow_btn a,
629
- #sb_instagram #sbi_load .sbi_load_btn{
630
- transition: all 0.1s ease-in;
631
- }
632
- /* Hover state for default colors */
633
- #sb_instagram #sbi_load .sbi_load_btn:hover{
634
- outline: none;
635
- box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.25);
636
- }
637
- #sb_instagram .sbi_follow_btn a:hover,
638
- #sb_instagram .sbi_follow_btn a:focus{
639
- outline: none;
640
- box-shadow: inset 0 0 10px 20px #359dff;
641
- }
642
- /* If a custom color is applied then just use opacity for the hover effect */
643
- #sb_instagram .sbi_follow_btn.sbi_custom a:hover,
644
- #sb_instagram .sbi_follow_btn.sbi_custom a:focus,
645
- #sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover{
646
- box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.15);
647
- }
648
- /* Active state */
649
- #sb_instagram .sbi_follow_btn a:active,
650
- #sb_instagram #sbi_load .sbi_load_btn:active{
651
- box-shadow: inset 0 0 10px 20px rgba(0,0,0,0.3);
652
- }
653
-
654
- #sb_instagram .sbi_follow_btn .fa,
655
- #sb_instagram .sbi_follow_btn svg{
656
- margin-bottom: -1px;
657
- margin-right: 7px;
658
- font-size: 15px;
659
- }
660
- #sb_instagram .sbi_follow_btn svg{
661
- vertical-align: -.125em;
662
- }
663
- #sb_instagram #sbi_load .sbi_follow_btn{
664
- margin-left: 5px;
665
- }
666
-
667
- /* Error messages */
668
- #sb_instagram .sb_instagram_error{
669
- width: 100%;
670
- text-align: center;
671
- line-height: 1.4;
672
- }
673
-
674
- /* Mod only error msgs */
675
- #sbi_mod_error{
676
- display: none;
677
- border: 1px solid #ddd;
678
- background: #eee;
679
- color: #333;
680
- margin: 10px 0 0;
681
- padding: 10px 15px;
682
- font-size: 13px;
683
- text-align: center;
684
- clear: both;
685
-
686
- -moz-border-radius: 4px;
687
- -webkit-border-radius: 4px;
688
- border-radius: 4px;
689
- }
690
- #sbi_mod_error br {
691
- display: initial !important;
692
- }
693
- #sbi_mod_error p{
694
- padding: 5px 0 !important;
695
- margin: 0 !important;
696
- line-height: 1.3 !important;
697
- }
698
- #sbi_mod_error ol,
699
- #sbi_mod_error ul{
700
- padding: 5px 0 5px 20px !important;
701
- margin: 0 !important;
702
- }
703
- #sbi_mod_error li{
704
- padding: 1px 0 !important;
705
- margin: 0 !important;
706
- }
707
- #sbi_mod_error span{
708
- font-size: 12px;
709
- }
710
-
711
- /* Medium */
712
- #sb_instagram.sbi_medium .sbi_playbtn,
713
- #sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play{
714
- margin-top: -12px;
715
- margin-left: -9px;
716
- font-size: 23px;
717
- }
718
- #sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{
719
- right: 8px;
720
- top: 8px;
721
- font-size: 18px;
722
- }
723
- /* Small */
724
- #sb_instagram.sbi_small .sbi_playbtn,
725
- #sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play{
726
- margin-top: -9px;
727
- margin-left: -7px;
728
- font-size: 18px;
729
- }
730
- #sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{
731
- right: 5px;
732
- top: 5px;
733
- font-size: 12px;
734
- }
735
-
736
- /* Media queries */
737
- @media all and (max-width: 640px){
738
- /* Make 3-6 cols into 2 col */
739
- #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
740
- #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
741
- #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
742
- #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
743
- width: 50%;
744
- }
745
- /* Make 7-10 cols into 4 col */
746
- #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
747
- #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
748
- #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
749
- #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
750
- width: 25%;
751
- }
752
- /* On mobile make the min-width 100% */
753
- #sb_instagram.sbi_width_resp{
754
- width: 100% !important;
755
- }
756
- }
757
- @media all and (max-width: 480px){
758
- /* Make all cols into 1 col */
759
- #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
760
- #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
761
- #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
762
- #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
763
- #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
764
- #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
765
- #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
766
- #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
767
- width: 100%;
768
- }
769
- }
770
-
771
- /* NO JS */
772
- #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{
773
- box-sizing: border-box;
774
- position: relative;
775
- overflow: hidden;
776
- }
777
- #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before {
778
- content: "";
779
- display: block;
780
- padding-top: 100%;
781
- z-index: -300;
782
- }
783
- #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo {
784
- position: absolute;
785
- top: 0;
786
- left: 0;
787
- bottom: 0;
788
- right: 0;
789
- }
790
- #sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition {
791
- opacity: 1;
792
- max-height: 640px;
793
- }
794
- #sb_instagram.sbi_no_js .sbi_photo img,
795
- #sb_instagram.sbi_no_js .sbi_load_btn{
796
- display: none;
797
- }
798
- #sb_instagram #sbi_images .sbi_js_load_disabled .sbi_imgLiquid_ready.sbi_photo {
799
- padding-bottom: 0 !important;
800
- }
801
- #sb_instagram #sbi_mod_error .sb_frontend_btn {
802
- display: inline-block;
803
- padding: 6px 10px;
804
- background: #ddd;
805
- background: rgba(0,0,0,.1);
806
- text-decoration: none;
807
- border-radius: 5px;
808
- margin-top: 10px;
809
- color: #444
810
- }
811
-
812
- #sb_instagram #sbi_mod_error .sb_frontend_btn:hover {
813
- background: #ccc;
814
- background: rgba(0,0,0,.15)
815
- }
816
-
817
- #sb_instagram #sbi_mod_error .sb_frontend_btn .fa {
818
- margin-right: 2px
819
}
1
+ /**************/
2
+ /*** LAYOUT ***/
3
+ /**************/
4
+
5
+ /* Feed container */
6
+ #sb_instagram {
7
+ width: 100%;
8
+ margin: 0 auto;
9
+ padding: 0;
10
+ -webkit-box-sizing: border-box;
11
+ -moz-box-sizing: border-box;
12
+ box-sizing: border-box;
13
+ }
14
+ #sb_instagram:after{
15
+ content: "";
16
+ display: table;
17
+ clear: both;
18
+ }
19
+
20
+ /*********************/
21
+ /*** STYLE OPTIONS ***/
22
+ /*********************/
23
+ #sb_instagram.sbi_fixed_height{
24
+ overflow: hidden;
25
+ overflow-y: auto;
26
+ -webkit-box-sizing: border-box;
27
+ -moz-box-sizing: border-box;
28
+ box-sizing: border-box;
29
+ }
30
+ #sb_instagram #sbi_images{
31
+ width: 100%;
32
+ float: left;
33
+ line-height: 0;
34
+
35
+ -webkit-box-sizing: border-box;
36
+ -moz-box-sizing: border-box;
37
+ box-sizing: border-box;
38
+ }
39
+ /* Remove header shadow/border */
40
+ #sb_instagram .sbi_header_link {
41
+ -webkit-box-shadow: none;
42
+ box-shadow: none;
43
+ }
44
+ #sb_instagram .sbi_header_link:hover {
45
+ border: none;
46
+ }
47
+
48
+ /* Items */
49
+ #sb_instagram #sbi_images .sbi_item{
50
+ display: -moz-inline-stack;
51
+ display: inline-block;
52
+ float: left;
53
+ vertical-align: top;
54
+ zoom: 1;
55
+ *display: inline;
56
+
57
+ max-height: 1000px;
58
+ padding: inherit !important;
59
+ margin: 0 !important;
60
+ text-decoration: none;
61
+ opacity: 1;
62
+ overflow: hidden;
63
+
64
+ -webkit-box-sizing: border-box;
65
+ -moz-box-sizing: border-box;
66
+ box-sizing: border-box;
67
+
68
+ -webkit-transition: all 0.5s ease;
69
+ -moz-transition: all 0.5s ease;
70
+ -o-transition: all 0.5s ease;
71
+ -ms-transition: all 0.5s ease;
72
+ transition: all 0.5s ease;
73
+ }
74
+ /* Transition items in */
75
+ #sb_instagram #sbi_images .sbi_item.sbi_transition{
76
+ opacity: 0;
77
+ max-height: 0;
78
+ }
79
+
80
+ /* Cols */
81
+ #sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
82
+ #sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
83
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
84
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
85
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
86
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
87
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
88
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
89
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
90
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
91
+
92
+ /* Disable mobile layout */
93
+ #sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{ width: 100%; }
94
+ #sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{ width: 50%; }
95
+ #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{ width: 33.33%; }
96
+ #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{ width: 25%; }
97
+ #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{ width: 20%; }
98
+ #sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{ width: 16.66%; }
99
+ #sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{ width: 14.28%; }
100
+ #sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{ width: 12.5%; }
101
+ #sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{ width: 11.11%; }
102
+ #sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{ width: 10%; }
103
+
104
+ /* Photos */
105
+ #sb_instagram .sbi_photo_wrap{
106
+ position: relative;
107
+ }
108
+ #sb_instagram .sbi_photo{
109
+ display: block;
110
+ text-decoration: none;
111
+ }
112
+ #sb_instagram .sbi_photo img{
113
+ width: 100%;
114
+ height: auto;
115
+ }
116
+ #sb_instagram .sbi_no_js img{
117
+ display: none;
118
+ }
119
+ #sb_instagram a,
120
+ #sb_instagram a:hover,
121
+ #sb_instagram a:focus,
122
+ #sb_instagram a:active{
123
+ outline: none;
124
+ }
125
+ #sb_instagram img{
126
+ display: block;
127
+ padding: 0 !important;
128
+ margin: 0 !important;
129
+ max-width: 100% !important;
130
+ opacity: 1 !important;
131
+ }
132
+ #sb_instagram .sbi_link{
133
+ display: none;
134
+ position: absolute;
135
+ bottom: 0;
136
+ right: 0;
137
+
138
+ width: 100%;
139
+ padding: 10px 0;
140
+ background: rgba(0,0,0,0.5);
141
+ text-align: center;
142
+ color: #fff;
143
+ font-size: 12px;
144
+ line-height: 1.1;
145
+ }
146
+ #sb_instagram .sbi_link a{
147
+ padding: 0 6px;
148
+ text-decoration: none;
149
+ color: #fff;
150
+ font-size: 12px;
151
+ line-height: 1.1;
152
+
153
+ display: -moz-inline-stack;
154
+ display: inline-block;
155
+ vertical-align: top;
156
+ zoom: 1;
157
+ *display: inline;
158
+ }
159
+ #sb_instagram .sbi_link .sbi_lightbox_link{
160
+ padding-bottom: 5px;
161
+ }
162
+ #sb_instagram .sbi_link a:hover,
163
+ #sb_instagram .sbi_link a:focus{
164
+ text-decoration: underline;
165
+ }
166
+ #sb_instagram .sbi_photo_wrap:hover .sbi_link,
167
+ #sb_instagram .sbi_photo_wrap:focus .sbi_link{
168
+ display: block;
169
+ }
170
+
171
+ /* Videos */
172
+ #sb_instagram svg:not(:root).svg-inline--fa {
173
+ height: 1em;
174
+ display: inline-block;
175
+ }
176
+
177
+ #sb_instagram .sbi_type_video .sbi_playbtn,
178
+ #sb_instagram .sbi_type_carousel .sbi_playbtn,
179
+ .sbi_type_carousel .fa-clone,
180
+ #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
181
+ #sb_instagram .sbi_type_video .svg-inline--fa.fa-play{
182
+ display: block !important;
183
+ position: absolute;
184
+ z-index: 1;
185
+
186
+ color: #fff;
187
+ color: rgba(255,255,255,0.9);
188
+ font-style: normal !important;
189
+ text-shadow: 0 0 8px rgba(0,0,0,0.8);
190
+ }
191
+ #sb_instagram .sbi_type_video .sbi_playbtn,
192
+ #sb_instagram .sbi_type_carousel .sbi_playbtn {
193
+ z-index: 2;
194
+ top: 50%;
195
+ left: 50%;
196
+ margin-top: -24px;
197
+ margin-left: -19px;
198
+ padding: 0;
199
+ font-size: 48px;
200
+ }
201
+ #sb_instagram .sbi_type_carousel .fa-clone{
202
+ right: 12px;
203
+ top: 12px;
204
+ font-size: 24px;
205
+ text-shadow: 0 0 8px rgba(0,0,0,0.3);
206
+ }
207
+ .sbi_type_carousel svg.fa-clone,
208
+ #sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
209
+ #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play{
210
+ -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
211
+ filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
212
+ }
213
+
214
+ /* Loader */
215
+ #sb_instagram .sbi_loader{
216
+ width: 20px;
217
+ height: 20px;
218
+
219
+ position: relative;
220
+ top: 50%;
221
+ left: 50%;
222
+ margin: -10px 0 0 -10px;
223
+ background-color: #000;
224
+ background-color: rgba(0,0,0,0.5);
225
+
226
+ border-radius: 100%;
227
+ -webkit-animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
228
+ animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
229
+ }
230
+ #sb_instagram br {
231
+ display: none;
232
+ }
233
+ #sbi_load p {
234
+ display: inline;
235
+ padding: 0;
236
+ margin: 0;
237
+ }
238
+ /* Loader in button */
239
+ #sb_instagram #sbi_load .sbi_loader{
240
+ position: absolute;
241
+ margin-top: -11px;
242
+ background-color: #fff;
243
+ opacity: 1;
244
+ }
245
+ @-webkit-keyframes sbi-sk-scaleout {
246
+ 0% { -webkit-transform: scale(0) }
247
+ 100% {
248
+ -webkit-transform: scale(1.0);
249
+ opacity: 0;
250
+ }
251
+ }
252
+ @keyframes sbi-sk-scaleout {
253
+ 0% {
254
+ -webkit-transform: scale(0);
255
+ -ms-transform: scale(0);
256
+ transform: scale(0);
257
+ } 100% {
258
+ -webkit-transform: scale(1.0);
259
+ -ms-transform: scale(1.0);
260
+ transform: scale(1.0);
261
+ opacity: 0;
262
+ }
263
+ }
264
+
265
+ #sb_instagram .fa-spin,
266
+ #sbi_lightbox .fa-spin{
267
+ -webkit-animation: fa-spin 2s infinite linear;
268
+ animation: fa-spin 2s infinite linear
269
+ }
270
+
271
+ #sb_instagram .fa-pulse,
272
+ #sbi_lightbox .fa-pulse{
273
+ -webkit-animation: fa-spin 1s infinite steps(8);
274
+ animation: fa-spin 1s infinite steps(8)
275
+ }
276
+
277
+ @-webkit-keyframes fa-spin {
278
+ 0% {
279
+ -webkit-transform: rotate(0deg);
280
+ transform: rotate(0deg)
281
+ }
282
+ 100% {
283
+ -webkit-transform: rotate(359deg);
284
+ transform: rotate(359deg)
285
+ }
286
+ }
287
+
288
+ @keyframes fa-spin {
289
+ 0% {
290
+ -webkit-transform: rotate(0deg);
291
+ transform: rotate(0deg)
292
+ }
293
+ 100% {
294
+ -webkit-transform: rotate(359deg);
295
+ transform: rotate(359deg)
296
+ }
297
+ }
298
+ /* Screen reader */
299
+ .sbi-screenreader{text-indent: -9999px !important;display: block !important;width: 0 !important;height: 0 !important;line-height: 0 !important;text-align: left !important; }
300
+
301
+ /* HEADER */
302
+ #sb_instagram .sb_instagram_header{
303
+ float: left;
304
+ clear: both;
305
+ margin: 0 0 15px 0;
306
+ padding: 0;
307
+ line-height: 1.2;
308
+ width: 100%;
309
+ }
310
+ #sb_instagram .sb_instagram_header a{
311
+ float: left;
312
+ display: block;
313
+ /*width: 100%;*/
314
+ min-width: 100%\9;
315
+ text-decoration: none;
316
+ transition: color 0.5s ease;
317
+ }
318
+ .sbi_no_avatar .sbi_header_img{
319
+ background: #333;
320
+ color: #fff;
321
+ width: 50px;
322
+ height: 50px;
323
+ position: relative;
324
+ }
325
+ .sbi_no_avatar .sbi_header_hashtag_icon {
326
+ display: block;
327
+ color: #fff;
328
+ opacity: .9;
329
+ -webkit-transition: background .6s linear,color .6s linear;
330
+ -moz-transition: background .6s linear,color .6s linear;
331
+ -ms-transition: background .6s linear,color .6s linear;
332
+ -o-transition: background .6s linear,color .6s linear;
333
+ transition: background .6s linear,color .6s linear
334
+ }
335
+
336
+ .sbi_no_avatar:hover .sbi_header_hashtag_icon {
337
+ display: block;
338
+ opacity: 1;
339
+ -webkit-transition: background .2s linear,color .2s linear;
340
+ -moz-transition: background .2s linear,color .2s linear;
341
+ -ms-transition: background .2s linear,color .2s linear;
342
+ -o-transition: background .2s linear,color .2s linear;
343
+ transition: background .2s linear,color .2s linear
344
+ }
345
+ /** Medium Header */
346
+ /* Only use medium & large headers on devices above 480px */
347
+ @media all and (min-width: 480px){
348
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img {
349
+ width: 80px;
350
+ height: 80px;
351
+ border-radius: 40px;
352
+ }
353
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img {
354
+ width: 80px;
355
+ height: 80px;
356
+ border-radius: 40px;
357
+ }
358
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3 {
359
+ font-size: 20px;
360
+ }
361
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
362
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
363
+ font-size: 14px;
364
+ }
365
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3,
366
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
367
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
368
+ margin-left: 95px !important;
369
+ line-height: 1.4
370
+ }
371
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{
372
+ margin-right: -85px !important;
373
+ }
374
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{
375
+ margin-top: 4px !important;
376
+ }
377
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text.sbi_no_bio h3{
378
+ padding-top: 20px !important;
379
+ }
380
+ /** Large Header */
381
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img {
382
+ width: 120px;
383
+ height: 120px;
384
+ border-radius: 60px;
385
+ }
386
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img {
387
+ width: 120px;
388
+ height: 120px;
389
+ border-radius: 60px;
390
+ }
391
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3 {
392
+ font-size: 28px;
393
+ }
394
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
395
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
396
+ font-size: 16px;
397
+ }
398
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3,
399
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
400
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
401
+ margin-left: 140px !important;
402
+ line-height: 1.5;
403
+ }
404
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{
405
+ margin-right: -120px !important;
406
+ }
407
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{
408
+ margin-top: 12px !important;
409
+ }
410
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text.sbi_no_bio h3{
411
+ padding-top: 32px !important;
412
+ }
413
+ }
414
+
415
+ /* Header profile pic */
416
+ #sb_instagram .sb_instagram_header .sbi_header_img{
417
+ float: left;
418
+ position: relative;
419
+ width: 50px;
420
+ margin: 0 0 0 -100% !important;
421
+ overflow: hidden;
422
+
423
+ -moz-border-radius: 40px;
424
+ -webkit-border-radius: 40px;
425
+ border-radius: 40px;
426
+ }
427
+ #sb_instagram .sb_instagram_header .sbi_header_img img{
428
+ float: left;
429
+ margin: 0 !important;
430
+ padding: 0 !important;
431
+ border: none !important;
432
+
433
+ -moz-border-radius: 40px;
434
+ -webkit-border-radius: 40px;
435
+ border-radius: 40px;
436
+ }
437
+ /* Profile pic hover */
438
+ /* Profile pic hover */
439
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
440
+ opacity: 0;
441
+ position: absolute;
442
+ width: 100%;
443
+ top: 0;
444
+ bottom: 0;
445
+ left: 0;
446
+ text-align: center;
447
+ color: #fff;
448
+ background: rgba(0,0,0,0.75);
449
+ }
450
+
451
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo,
452
+ #sb_instagram .sb_instagram_header .sbi_header_hashtag_icon .sbi_new_logo{
453
+ position: absolute;
454
+ top: 50%;
455
+ left: 50%;
456
+ margin-top: -12px;
457
+ margin-left: -12px;
458
+ width: 24px;
459
+ height: 24px;
460
+ font-size: 24px;
461
+ }
462
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_hashtag_icon .sbi_new_logo,
463
+ .sb_instagram_header.sbi_medium .sbi_header_hashtag_icon .sbi_new_logo{
464
+ margin-top: -18px;
465
+ margin-left: -18px;
466
+ width: 36px;
467
+ height: 36px;
468
+ font-size: 36px
469
+ }
470
+
471
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_hashtag_icon .sbi_new_logo,
472
+ .sb_instagram_header.sbi_large .sbi_header_hashtag_icon .sbi_new_logo {
473
+ margin-top: -24px;
474
+ margin-left: -24px;
475
+ width: 48px;
476
+ height: 48px;
477
+ font-size: 48px
478
+ }
479
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover i {
480
+ overflow: hidden;
481
+ background: url('../img/small-logo.png') no-repeat 0 0;
482
+ }
483
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
484
+ z-index: 2;
485
+ transition: opacity 0.4s ease-in-out;
486
+ }
487
+ #sb_instagram .sb_instagram_header .sbi_fade_in{
488
+ opacity: 1;
489
+ transition: opacity 0.2s ease-in-out;
490
+ }
491
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
492
+ position: absolute;
493
+ width: 100%;
494
+ top: 0;
495
+ bottom: 0;
496
+ left: 0;
497
+ text-align: center;
498
+ color: #fff;
499
+ background: rgba(0,0,0,0.75);
500
+
501
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
502
+ filter: alpha(opacity=0);
503
+ -moz-opacity: 0;
504
+ -khtml-opacity: 0;
505
+ opacity: 0;
506
+ border-radius: 40px;
507
+ transition: opacity 0.2s;
508
+ }
509
+ /* Fade the Instagram icon in when hovering on the header */
510
+ #sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover,
511
+ #sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover{
512
+ opacity: 1;
513
+ }
514
+ /* Header text */
515
+ #sb_instagram .sb_instagram_header .sbi_header_text{
516
+ float: left;
517
+ width: 100%;
518
+ padding-top: 5px;
519
+ }
520
+ #sb_instagram .sb_instagram_header a{
521
+ text-decoration: none;
522
+ }
523
+ #sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,
524
+ #sb_instagram .sb_instagram_header .sbi_header_text h3{
525
+ float: left;
526
+ clear: both;
527
+ width: auto;
528
+ margin: 0 0 0 60px !important;
529
+ padding: 0 !important;
530
+ }
531
+ #sb_instagram .sb_instagram_header h3{
532
+ font-size: 16px;
533
+ line-height: 1.3;
534
+ }
535
+ #sb_instagram .sb_instagram_header p{
536
+ font-size: 13px;
537
+ line-height: 1.3;
538
+ margin: 0;
539
+ padding: 0;
540
+ }
541
+ #sb_instagram p:empty { display: none; }
542
+ #sb_instagram .sb_instagram_header .sbi_header_text img.emoji{
543
+ margin-right: 3px !important;
544
+ }
545
+
546
+ /* No bio */
547
+ #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{
548
+ padding-top: 9px !important;
549
+ }
550
+ #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{
551
+ clear: both;
552
+ }
553
+
554
+
555
+ /* Buttons */
556
+ #sb_instagram #sbi_load{
557
+ float: left;
558
+ clear: both;
559
+ width: 100%;
560
+ text-align: center;
561
+ }
562
+ #sb_instagram #sbi_load .fa-spinner{
563
+ display: none;
564
+ position: absolute;
565
+ top: 50%;
566
+ left: 50%;
567
+ margin: -8px 0 0 -7px;
568
+ font-size: 15px;
569
+ }
570
+ #sb_instagram #sbi_load{
571
+ opacity: 1;
572
+ transition: all 0.5s ease-in;
573
+ }
574
+ #sb_instagram .sbi_load_btn .sbi_btn_text, #sb_instagram .sbi_load_btn .sbi_loader{
575
+ opacity: 1;
576
+ transition: all 0.1s ease-in;
577
+ }
578
+ #sb_instagram .sbi_hidden{
579
+ opacity: 0 !important;
580
+ }
581
+ #sb_instagram #sbi_load .sbi_load_btn,
582
+ #sb_instagram .sbi_follow_btn a{
583
+ display: -moz-inline-stack;
584
+ display: inline-block;
585
+ vertical-align: top;
586
+ zoom: 1;
587
+ *display: inline;
588
+
589
+ padding: 7px 14px;
590
+ margin: 5px auto 0 auto;
591
+ background: #333;
592
+ color: #eee;
593
+ border: none;
594
+ color: #fff;
595
+ text-decoration: none;
596
+ font-size: 13px;
597
+ line-height: 1.5;
598
+
599
+ -moz-border-radius: 4px;
600
+ -webkit-border-radius: 4px;
601
+ border-radius: 4px;
602
+
603
+ -webkit-box-sizing: border-box;
604
+ -moz-box-sizing: border-box;
605
+ box-sizing: border-box;
606
+ }
607
+ #sb_instagram #sbi_load .sbi_load_btn {
608
+ position: relative;
609
+ }
610
+ /* Follow button */
611
+ #sb_instagram .sbi_follow_btn{
612
+ display: -moz-inline-stack;
613
+ display: inline-block;
614
+ vertical-align: top;
615
+ zoom: 1;
616
+ *display: inline;
617
+ text-align: center;
618
+ }
619
+ #sb_instagram .sbi_follow_btn.sbi_top{
620
+ display: block;
621
+ margin-bottom: 5px;
622
+ }
623
+ #sb_instagram .sbi_follow_btn a{
624
+ background: #408bd1;
625
+ color: #fff;
626
+ }
627
+ #sb_instagram .sbi_follow_btn a,
628
+ #sb_instagram .sbi_follow_btn a,
629
+ #sb_instagram #sbi_load .sbi_load_btn{
630
+ transition: all 0.1s ease-in;
631
+ }
632
+ /* Hover state for default colors */
633
+ #sb_instagram #sbi_load .sbi_load_btn:hover{
634
+ outline: none;
635
+ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.25);
636
+ }
637
+ #sb_instagram .sbi_follow_btn a:hover,
638
+ #sb_instagram .sbi_follow_btn a:focus{
639
+ outline: none;
640
+ box-shadow: inset 0 0 10px 20px #359dff;
641
+ }
642
+ /* If a custom color is applied then just use opacity for the hover effect */
643
+ #sb_instagram .sbi_follow_btn.sbi_custom a:hover,
644
+ #sb_instagram .sbi_follow_btn.sbi_custom a:focus,
645
+ #sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover{
646
+ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.15);
647
+ }
648
+ /* Active state */
649
+ #sb_instagram .sbi_follow_btn a:active,
650
+ #sb_instagram #sbi_load .sbi_load_btn:active{
651
+ box-shadow: inset 0 0 10px 20px rgba(0,0,0,0.3);
652
+ }
653
+
654
+ #sb_instagram .sbi_follow_btn .fa,
655
+ #sb_instagram .sbi_follow_btn svg{
656
+ margin-bottom: -1px;
657
+ margin-right: 7px;
658
+ font-size: 15px;
659
+ }
660
+ #sb_instagram .sbi_follow_btn svg{
661
+ vertical-align: -.125em;
662
+ }
663
+ #sb_instagram #sbi_load .sbi_follow_btn{
664
+ margin-left: 5px;
665
+ }
666
+
667
+ /* Error messages */
668
+ #sb_instagram .sb_instagram_error{
669
+ width: 100%;
670
+ text-align: center;
671
+ line-height: 1.4;
672
+ }
673
+
674
+ /* Mod only error msgs */
675
+ #sbi_mod_error{
676
+ display: none;
677
+ border: 1px solid #ddd;
678
+ background: #eee;
679
+ color: #333;
680
+ margin: 10px 0 0;
681
+ padding: 10px 15px;
682
+ font-size: 13px;
683
+ text-align: center;
684
+ clear: both;
685
+
686
+ -moz-border-radius: 4px;
687
+ -webkit-border-radius: 4px;
688
+ border-radius: 4px;
689
+ }
690
+ #sbi_mod_error br {
691
+ display: initial !important;
692
+ }
693
+ #sbi_mod_error p{
694
+ padding: 5px 0 !important;
695
+ margin: 0 !important;
696
+ line-height: 1.3 !important;
697
+ }
698
+ #sbi_mod_error ol,
699
+ #sbi_mod_error ul{
700
+ padding: 5px 0 5px 20px !important;
701
+ margin: 0 !important;
702
+ }
703
+ #sbi_mod_error li{
704
+ padding: 1px 0 !important;
705
+ margin: 0 !important;
706
+ }
707
+ #sbi_mod_error span{
708
+ font-size: 12px;
709
+ }
710
+
711
+ /* Medium */
712
+ #sb_instagram.sbi_medium .sbi_playbtn,
713
+ #sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play{
714
+ margin-top: -12px;
715
+ margin-left: -9px;
716
+ font-size: 23px;
717
+ }
718
+ #sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{
719
+ right: 8px;
720
+ top: 8px;
721
+ font-size: 18px;
722
+ }
723
+ /* Small */
724
+ #sb_instagram.sbi_small .sbi_playbtn,
725
+ #sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play{
726
+ margin-top: -9px;
727
+ margin-left: -7px;
728
+ font-size: 18px;
729
+ }
730
+ #sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{
731
+ right: 5px;
732
+ top: 5px;
733
+ font-size: 12px;
734
+ }
735
+
736
+ /* Media queries */
737
+ @media all and (max-width: 640px){
738
+ /* Make 3-6 cols into 2 col */
739
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
740
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
741
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
742
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
743
+ width: 50%;
744
+ }
745
+ /* Make 7-10 cols into 4 col */
746
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
747
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
748
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
749
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
750
+ width: 25%;
751
+ }
752
+ /* On mobile make the min-width 100% */
753
+ #sb_instagram.sbi_width_resp{
754
+ width: 100% !important;
755
+ }
756
+ }
757
+ @media all and (max-width: 480px){
758
+ /* Make all cols into 1 col */
759
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
760
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
761
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
762
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
763
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
764
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
765
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
766
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
767
+ width: 100%;
768
+ }
769
+ }
770
+
771
+ /* NO JS */
772
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{
773
+ box-sizing: border-box;
774
+ position: relative;
775
+ overflow: hidden;
776
+ }
777
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before {
778
+ content: "";
779
+ display: block;
780
+ padding-top: 100%;
781
+ z-index: -300;
782
+ }
783
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo {
784
+ position: absolute;
785
+ top: 0;
786
+ left: 0;
787
+ bottom: 0;
788
+ right: 0;
789
+ }
790
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition {
791
+ opacity: 1;
792
+ max-height: 640px;
793
+ }
794
+ #sb_instagram.sbi_no_js .sbi_photo img,
795
+ #sb_instagram.sbi_no_js .sbi_load_btn{
796
+ display: none;
797
+ }
798
+ #sb_instagram #sbi_images .sbi_js_load_disabled .sbi_imgLiquid_ready.sbi_photo {
799
+ padding-bottom: 0 !important;
800
+ }
801
+ #sb_instagram #sbi_mod_error .sb_frontend_btn {
802
+ display: inline-block;
803
+ padding: 6px 10px;
804
+ background: #ddd;
805
+ background: rgba(0,0,0,.1);
806
+ text-decoration: none;
807
+ border-radius: 5px;
808
+ margin-top: 10px;
809
+ color: #444
810
+ }
811
+
812
+ #sb_instagram #sbi_mod_error .sb_frontend_btn:hover {
813
+ background: #ccc;
814
+ background: rgba(0,0,0,.15)
815
+ }
816
+
817
+ #sb_instagram #sbi_mod_error .sb_frontend_btn .fa {
818
+ margin-right: 2px
819
}
css/sb-instagram-admin.css CHANGED
@@ -102,7 +102,8 @@
102
font-size: 12px;
103
font-style: italic;
104
}
105
- #sbi_admin .sbi_note{
106
margin-left: 10px;
107
}
108
#sbi_admin table.sbi_shortcode_table{
@@ -376,6 +377,13 @@
376
-webkit-border-radius: 3px;
377
border-radius: 3px;
378
}
379
.sb_instagram_notice .sb_instagram_notice_title{
380
font-size: 18px;
381
padding-bottom: 5px;
@@ -1526,4 +1534,714 @@
1526
text-align: center;
1527
width: 20px;
1528
-webkit-font-smoothing: antialiased
1529
}
102
font-size: 12px;
103
font-style: italic;
104
}
105
+ #sbi_admin .sbi_note,
106
+ #sbi_admin .sbi-space-left{
107
margin-left: 10px;
108
}
109
#sbi_admin table.sbi_shortcode_table{
377
-webkit-border-radius: 3px;
378
border-radius: 3px;
379
}
380
+ #sbi_admin .sbi-goto {
381
+ border: 1px solid #e89a2e;
382
+ background-color: rgba(232, 154, 46, .2);
383
+ }
384
+ #sbi_admin .sbi-goto th {
385
+ padding-left: 4px;
386
+ }
387
.sb_instagram_notice .sb_instagram_notice_title{
388
font-size: 18px;
389
padding-bottom: 5px;
1534
text-align: center;
1535
width: 20px;
1536
-webkit-font-smoothing: antialiased
1537
+ }
1538
+
1539
+ /* About */
1540
+ #sbi-admin-about *,#sbi-admin-about *::before,#sbi-admin-about *::after {
1541
+ -webkit-box-sizing: border-box;
1542
+ -moz-box-sizing: border-box;
1543
+ box-sizing: border-box
1544
+ }
1545
+
1546
+ #sbi-admin-about .sbi-admin-about-section {
1547
+ position: relative;
1548
+ margin: 0 20px 20px;
1549
+ padding: 30px;
1550
+ background: #fff;
1551
+ border: 1px solid #DDDDDD;
1552
+ line-height: 2;
1553
+ }
1554
+
1555
+ #sbi-admin-about .sbi-admin-about-section h1,#sbi-admin-about .sbi-admin-about-section h2,#sbi-admin-about .sbi-admin-about-section h3,#sbi-admin-about .sbi-admin-about-section h4,#sbi-admin-about .sbi-admin-about-section h5 {
1556
+ margin-top: 0;
1557
+ padding-top: 0;
1558
+ line-height: 1.6
1559
+ }
1560
+
1561
+ #sbi-admin-about .sbi-admin-about-section h2 {
1562
+ font-size: 24px
1563
+ }
1564
+
1565
+ #sbi-admin-about .sbi-admin-about-section h3 {
1566
+ font-size: 18px;
1567
+ margin-bottom: 30px;
1568
+ color: #23282C
1569
+ }
1570
+
1571
+ #sbi-admin-about .sbi-admin-about-section ul,#sbi-admin-about .sbi-admin-about-section p {
1572
+ font-size: 16px
1573
+ }
1574
+
1575
+ #sbi-admin-about .sbi-admin-about-section p {
1576
+ margin-bottom: 20px
1577
+ }
1578
+
1579
+ #sbi-admin-about .sbi-admin-about-section p.bigger {
1580
+ font-size: 18px
1581
+ }
1582
+
1583
+ #sbi-admin-about .sbi-admin-about-section p.smaller {
1584
+ font-size: 14px
1585
+ }
1586
+
1587
+ #sbi-admin-about .sbi-admin-about-section p:last-child {
1588
+ margin-bottom: 0
1589
+ }
1590
+
1591
+ #sbi-admin-about .sbi-admin-about-section hr {
1592
+ margin: 30px 0
1593
+ }
1594
+
1595
+ #sbi-admin-about .sbi-admin-about-section figure {
1596
+ margin: 0
1597
+ }
1598
+
1599
+ #sbi-admin-about .sbi-admin-about-section figure img {
1600
+ width: 100%
1601
+ }
1602
+
1603
+ #sbi-admin-about .sbi-admin-about-section figure figcaption {
1604
+ font-size: 13px;
1605
+ color: #888888;
1606
+ margin-top: -10px;
1607
+ text-align: center;
1608
+ line-height: initial
1609
+ }
1610
+
1611
+ #sbi-admin-about .sbi-admin-about-section .sbi-admin-column-40 {
1612
+ padding-left: 15px
1613
+ }
1614
+
1615
+ @media (max-width: 767px) {
1616
+ #sbi-admin-about .sbi-admin-about-section .sbi-admin-column-40 {
1617
+ width:100%;
1618
+ padding-left: 0;
1619
+ padding-top: 20px
1620
+ }
1621
+ }
1622
+
1623
+ #sbi-admin-about .sbi-admin-about-section .sbi-admin-column-60 {
1624
+ padding-right: 15px
1625
+ }
1626
+ #sbi-admin-about .sbi-admin-about-section .sbi-admin-about-text{
1627
+ padding-right: 400px;
1628
+ }
1629
+ #sbi-admin-about .sbi-admin-about-section .sbi-admin-about-image{
1630
+ position: absolute;
1631
+ width: 340px;
1632
+ top: 20px;
1633
+ right: 20px;
1634
+ }
1635
+
1636
+ @media (max-width: 767px) {
1637
+ #sbi-admin-about .sbi-admin-about-section .sbi-admin-column-60,
1638
+ #sbi-admin-about .sbi-admin-about-section .sbi-admin-about-text,
1639
+ #sbi-admin-about .sbi-admin-about-section .sbi-admin-about-image {
1640
+ position: relative;
1641
+ width:100%;
1642
+ padding-right: 0
1643
+ }
1644
+ }
1645
+
1646
+ #sbi-admin-about .sbi-admin-about-section ul.list-plain {
1647
+ margin-top: 0;
1648
+ margin-bottom: 0
1649
+ }
1650
+
1651
+ #sbi-admin-about .sbi-admin-about-section ul.list-plain li {
1652
+ margin-bottom: 0
1653
+ }
1654
+
1655
+ #sbi-admin-about .sbi-admin-about-section ul.list-features li .fa {
1656
+ color: #2a9b39;
1657
+ margin: 0 8px 0 0
1658
+ }
1659
+
1660
+ #sbi-admin-about .sbi-admin-about-section .fa-star {
1661
+ color: gold
1662
+ }
1663
+
1664
+ #sbi-admin-about .sbi-admin-about-section .no-margin {
1665
+ margin: 0 !important
1666
+ }
1667
+
1668
+ #sbi-admin-about .sbi-admin-about-section .no-padding {
1669
+ padding: 0 !important
1670
+ }
1671
+
1672
+ #sbi-admin-about .sbi-admin-about-section .centered {
1673
+ text-align: center !important
1674
+ }
1675
+
1676
+ #sbi-admin-about .sbi-admin-about-section-first-form {
1677
+ display: flex
1678
+ }
1679
+
1680
+ @media (max-width: 767px) {
1681
+ #sbi-admin-about .sbi-admin-about-section-first-form {
1682
+ display:block !important
1683
+ }
1684
+ }
1685
+
1686
+ #sbi-admin-about .sbi-admin-about-section-first-form .sbi-admin-about-section-first-form-text {
1687
+ flex: 1;
1688
+ padding-right: 30px
1689
+ }
1690
+
1691
+ @media (max-width: 767px) {
1692
+ #sbi-admin-about .sbi-admin-about-section-first-form .sbi-admin-about-section-first-form-text {
1693
+ flex:none
1694
+ }
1695
+ }
1696
+
1697
+ #sbi-admin-about .sbi-admin-about-section-first-form .sbi-admin-about-section-first-form-video iframe {
1698
+ border: 1px solid #DDDDDD
1699
+ }
1700
+
1701
+ @media (max-width: 767px) {
1702
+ #sbi-admin-about .sbi-admin-about-section-first-form .sbi-admin-about-section-first-form-video {
1703
+ padding-top:20px
1704
+ }
1705
+ }
1706
+
1707
+ #sbi-admin-about .sbi-admin-about-section-hero {
1708
+ padding: 0
1709
+ }
1710
+
1711
+ #sbi-admin-about .sbi-admin-about-section-hero .sbi-admin-about-section-hero-main,#sbi-admin-about .sbi-admin-about-section-hero .sbi-admin-about-section-hero-extra {
1712
+ padding: 30px
1713
+ }
1714
+
1715
+ @media (max-width: 767px) {
1716
+ #sbi-admin-about .sbi-admin-about-section-hero .sbi-admin-about-section-hero-extra .sbi-admin-column-50 {
1717
+ float:none;
1718
+ width: 100%
1719
+ }
1720
+ }
1721
+
1722
+ #sbi-admin-about .sbi-admin-about-section-hero .sbi-admin-about-section-hero-main {
1723
+ background-color: #FAFAFA;
1724
+ border-bottom: 1px solid #DDDDDD
1725
+ }
1726
+
1727
+ #sbi-admin-about .sbi-admin-about-section-hero .sbi-admin-about-section-hero-main.no-border {
1728
+ border-bottom: 0
1729
+ }
1730
+
1731
+ #sbi-admin-about .sbi-admin-about-section-hero .sbi-admin-about-section-hero-main p {
1732
+ color: #666
1733
+ }
1734
+
1735
+ #sbi-admin-about .sbi-admin-about-section-hero h3.call-to-action {
1736
+ margin-bottom: -10px
1737
+ }
1738
+
1739
+ #sbi-admin-about .sbi-admin-about-section-hero span.price-20-off {
1740
+ color: #6AB255
1741
+ }
1742
+
1743
+ #sbi-admin-about .sbi-admin-about-section-squashed {
1744
+ margin-bottom: 0
1745
+ }
1746
+
1747
+ #sbi-admin-about .sbi-admin-about-section-squashed:not(:last-of-type) {
1748
+ border-bottom: 0
1749
+ }
1750
+
1751
+ #sbi-admin-about .sbi-admin-about-section-post h2 {
1752
+ margin-bottom: -10px
1753
+ }
1754
+
1755
+ #sbi-admin-about .sbi-admin-about-section-post h3 {
1756
+ margin-bottom: 15px
1757
+ }
1758
+
1759
+ #sbi-admin-about .sbi-admin-about-section-post p:last-of-type {
1760
+ margin-bottom: 30px
1761
+ }
1762
+
1763
+ #sbi-admin-about .sbi-admin-about-section-post .sbi-admin-column-20 {
1764
+ padding-right: 20px;
1765
+ width: auto
1766
+ }
1767
+
1768
+ #sbi-admin-about .sbi-admin-about-section-post .sbi-admin-column-20 img {
1769
+ width: 270px
1770
+ }
1771
+
1772
+ @media (max-width: 767px) {
1773
+ #sbi-admin-about .sbi-admin-about-section-post .sbi-admin-column-20 {
1774
+ width:20%
1775
+ }
1776
+
1777
+ #sbi-admin-about .sbi-admin-about-section-post .sbi-admin-column-20 img {
1778
+ width: auto;
1779
+ max-width: 100%
1780
+ }
1781
+ }
1782
+
1783
+ #sbi-admin-about .sbi-admin-about-section-post .sbi-admin-column-80 {
1784
+ padding-left: 20px;
1785
+ width: calc(100% - 20px - 270px)
1786
+ }
1787
+
1788
+ @media (max-width: 767px) {
1789
+ #sbi-admin-about .sbi-admin-about-section-post .sbi-admin-column-80 {
1790
+ width:80%
1791
+ }
1792
+ }
1793
+
1794
+ #sbi-admin-about .sbi-admin-about-section-post .sbi-admin-about-section-post-link {
1795
+ padding: 10px 15px;
1796
+ background-color: #DF7739;
1797
+ color: #fff;
1798
+ border-radius: 3px;
1799
+ text-decoration: none;
1800
+ margin-top: 15px;
1801
+ font-size: 14px
1802
+ }
1803
+
1804
+ #sbi-admin-about .sbi-admin-about-section-post .sbi-admin-about-section-post-link:hover {
1805
+ background-color: #B85A1B
1806
+ }
1807
+
1808
+ #sbi-admin-about .sbi-admin-about-section-post .sbi-admin-about-section-post-link .fa {
1809
+ color: #EDBA9E;
1810
+ vertical-align: middle;
1811
+ margin-left: 8px
1812
+ }
1813
+
1814
+ #sbi-admin-about .sbi-admin-about-section-table table {
1815
+ border-collapse: collapse
1816
+ }
1817
+
1818
+ #sbi-admin-about .sbi-admin-about-section-table table tr td {
1819
+ border-bottom: 1px solid #DDDDDD;
1820
+ border-right: 1px solid #DDDDDD;
1821
+ padding: 30px;
1822
+ vertical-align: top
1823
+ }
1824
+
1825
+ #sbi-admin-about .sbi-admin-about-section-table table tr td:last-of-type {
1826
+ border-right: 0
1827
+ }
1828
+
1829
+ #sbi-admin-about .sbi-admin-about-section-table table tr:last-child td {
1830
+ border-bottom: none
1831
+ }
1832
+
1833
+ #sbi-admin-about .sbi-admin-about-section-table table p {
1834
+ background-repeat: no-repeat;
1835
+ background-size: 15px auto;
1836
+ background-position: 0 6px;
1837
+ margin: 0
1838
+ }
1839
+
1840
+ #sbi-admin-about .sbi-admin-about-section-table table p.features-full {
1841
+ padding-left: 30px;
1842
+ background-image: url(../img/about/icon-full.svg)
1843
+ }
1844
+
1845
+ #sbi-admin-about .sbi-admin-about-section-table table p.features-none {
1846
+ padding-left: 30px;
1847
+ background-image: url(../img/about/icon-none.svg)
1848
+ }
1849
+
1850
+ #sbi-admin-about .sbi-admin-about-section-table table p.features-partial {
1851
+ padding-left: 30px;
1852
+ background-position: -3px 0;
1853
+ background-size: 23px auto;
1854
+ background-image: url(../img/about/icon-partial.svg)
1855
+ }
1856
+
1857
+ #sbi-admin-about .sbi-admin-about-section-table .sbi-admin-about-section-hero-main {
1858
+ padding: 0
1859
+ }
1860
+
1861
+ #sbi-admin-about .sbi-admin-about-section-table .sbi-admin-about-section-hero-main h3 {
1862
+ padding: 30px 30px 30px 60px
1863
+ }
1864
+
1865
+ #sbi-admin-about .sbi-admin-about-section-table .sbi-admin-about-section-hero-main .sbi-admin-column-33:first-child h3 {
1866
+ padding: 30px
1867
+ }
1868
+
1869
+ #sbi-admin-about #sbi-admin-addons {
1870
+ padding: 0 30px
1871
+ }
1872
+
1873
+ #sbi-admin-about #sbi-admin-addons .addon-container {
1874
+ padding: 0 10px
1875
+ }
1876
+
1877
+ #sbi-admin-about #sbi-admin-addons .addon-item .details {
1878
+ padding: 20px
1879
+ }
1880
+
1881
+ #sbi-admin-about #sbi-admin-addons .addon-item img {
1882
+ padding: 10px
1883
+ }
1884
+
1885
+ #sbi-admin-about #sbi-admin-addons .addon-item img[src*="-mi"] {
1886
+ padding: 13px
1887
+ }
1888
+
1889
+ #sbi-admin-about #sbi-admin-addons .addon-item .action-button .button {
1890
+ display: inline-block;
1891
+ text-decoration: none;
1892
+ font-size: 13px;
1893
+ line-height: 26px;
1894
+ height: 28px;
1895
+ margin: 0;
1896
+ padding: 0 10px 1px;
1897
+ cursor: pointer;
1898
+ -webkit-appearance: none;
1899
+ border-radius: 3px;
1900
+ border: 1px solid #cccccc;
1901
+ background: #f7f7f7;
1902
+ box-shadow: 0 1px 0 #cccccc;
1903
+ font-weight: normal
1904
+ }
1905
+
1906
+ #sbi-admin-about #sbi-admin-addons .addon-item .action-button .button:hover,#sbi-admin-about #sbi-admin-addons .addon-item .action-button .button:focus {
1907
+ background: #fafafa;
1908
+ border-color: #999;
1909
+ color: #23282d
1910
+ }
1911
+
1912
+ #sbi-admin-about #sbi-admin-addons .addon-item .action-button .button.button-primary {
1913
+ background: #0085ba;
1914
+ border-color: #0073aa #006799 #006799;
1915
+ box-shadow: 0 1px 0 #006799;
1916
+ color: #fff;
1917
+ text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799
1918
+ }
1919
+
1920
+ #sbi-admin-about #sbi-admin-addons .addon-item .action-button .button.button-primary:hover,#sbi-admin-about #sbi-admin-addons .addon-item .action-button .button.button-primary:focus {
1921
+ background: #008ec2;
1922
+ border-color: #006799;
1923
+ color: #fff
1924
+ }
1925
+
1926
+ #sbi-admin-about #sbi-admin-addons .addon-item .action-button .button.button-primary .fa-spinner {
1927
+ color: #fff
1928
+ }
1929
+
1930
+ #sbi-admin-about #sbi-admin-addons .addon-item .action-button .button.button-secondary {
1931
+ color: #555;
1932
+ border-color: #cccccc;
1933
+ background: #f7f7f7;
1934
+ box-shadow: 0 1px 0 #cccccc
1935
+ }
1936
+
1937
+ #sbi-admin-about #sbi-admin-addons .addon-item .action-button .button.button-secondary:hover,#sbi-admin-about #sbi-admin-addons .addon-item .action-button .button.button-secondary:focus {
1938
+ background: #fafafa;
1939
+ border-color: #999;
1940
+ color: #23282d
1941
+ }
1942
+
1943
+ #sbi-admin-about #sbi-admin-addons .addon-item .action-button .button.disabled {
1944
+ cursor: default
1945
+ }
1946
+
1947
+ /* AW columns */
1948
+ .sbi-admin-columns>div[class*="-column-"] {
1949
+ float: left
1950
+ }
1951
+
1952
+ .sbi-admin-columns .sbi-admin-column-20 {
1953
+ width: 20%
1954
+ }
1955
+
1956
+ .sbi-admin-columns .sbi-admin-column-33 {
1957
+ width: 33.33333%
1958
+ }
1959
+
1960
+ .sbi-admin-columns .sbi-admin-column-40 {
1961
+ width: 40%
1962
+ }
1963
+
1964
+ .sbi-admin-columns .sbi-admin-column-50 {
1965
+ width: 50%
1966
+ }
1967
+
1968
+ .sbi-admin-columns .sbi-admin-column-60 {
1969
+ width: 60%
1970
+ }
1971
+
1972
+ .sbi-admin-columns .sbi-admin-column-80 {
1973
+ width: 80%
1974
+ }
1975
+
1976
+ .sbi-admin-columns .sbi-admin-column-last {
1977
+ float: right !important
1978
+ }
1979
+
1980
+ .sbi-admin-columns:after {
1981
+ content: "";
1982
+ display: table;
1983
+ clear: both
1984
+ }
1985
+
1986
+ /* AW Addons */
1987
+ #sbi-admin-addons h3 {
1988
+ padding: 10px 10px 0 10px;
1989
+ clear: left;
1990
+ }
1991
+ #sbi-admin-addons *,#sbi-admin-addons *::before,#sbi-admin-addons *::after {
1992
+ -webkit-box-sizing: border-box;
1993
+ -moz-box-sizing: border-box;
1994
+ box-sizing: border-box
1995
+ }
1996
+
1997
+ #sbi-admin-addons .addons-container {
1998
+ margin-left: -20px;
1999
+ margin-right: -20px
2000
+ }
2001
+
2002
+ #sbi-admin-addons .unlock-msg {
2003
+ padding: 0 20px;
2004
+ margin-top: -20px;
2005
+ clear: both
2006
+ }
2007
+
2008
+ #sbi-admin-addons #sbi-admin-addons-search {
2009
+ background-color: #fff;
2010
+ border: 1px solid #ddd;
2011
+ border-radius: 3px;
2012
+ box-shadow: none;
2013
+ color: #333;
2014
+ vertical-align: middle;
2015
+ padding: 7px 12px;
2016
+ margin: -3px 10px 0 0;
2017
+ width: 200px;
2018
+ min-height: 35px;
2019
+ float: right
2020
+ }
2021
+
2022
+ #sbi-admin-addons #sbi-admin-addons-search:focus {
2023
+ border-color: #bbb
2024
+ }
2025
+
2026
+ #sbi-admin-addons .addon-container {
2027
+ padding: 0 20px;
2028
+ float: left;
2029
+ width: 33.333333%;
2030
+ margin-bottom: 20px
2031
+ }
2032
+
2033
+ @media (max-width: 1249px) {
2034
+ #sbi-admin-addons .addon-container {
2035
+ width:50%
2036
+ }
2037
+ }
2038
+
2039
+ @media (max-width: 767px) {
2040
+ #sbi-admin-addons .addon-container {
2041
+ width:100%;
2042
+ margin-bottom: 20px
2043
+ }
2044
+ }
2045
+
2046
+ #sbi-admin-addons h4 {
2047
+ font-size: 17px;
2048
+ font-weight: 700
2049
+ }
2050
+
2051
+ #sbi-admin-addons .addon-item {
2052
+ background-color: #fff;
2053
+ border: 1px solid #ddd;
2054
+ border-radius: 3px;
2055
+ margin: 0
2056
+ }
2057
+
2058
+ @media (max-width: 767px) {
2059
+ #sbi-admin-addons .addon-item {
2060
+ margin:0 0
2061
+ }
2062
+ }
2063
+
2064
+ #sbi-admin-addons .addon-item img {
2065
+ border: 1px solid #eee;
2066
+ float: left;
2067
+ max-width: 75px
2068
+ }
2069
+
2070
+ #sbi-admin-addons .addon-item h5 {
2071
+ margin: 0 0 10px 100px;
2072
+ font-size: 16px
2073
+ }
2074
+
2075
+ #sbi-admin-addons .addon-item p {
2076
+ margin: 0 0 0 100px
2077
+ }
2078
+
2079
+ #sbi-admin-addons .addon-item .details {
2080
+ padding: 30px 20px
2081
+ }
2082
+
2083
+ #sbi-admin-addons .addon-item .actions {
2084
+ background-color: #f7f7f7;
2085
+ border-top: 1px solid #ddd;
2086
+ padding: 20px;
2087
+ position: relative
2088
+ }
2089
+
2090
+ #sbi-admin-addons .addon-item .actions .msg {
2091
+ background-color: #f7f7f7;
2092
+ position: absolute;
2093
+ text-align: center;
2094
+ font-weight: 600;
2095
+ top: 0;
2096
+ left: 0;
2097
+ height: 100%;
2098
+ width: 100%;
2099
+ z-index: 99;
2100
+ padding: 20px;
2101
+ display: -webkit-box;
2102
+ display: -moz-box;
2103
+ display: -ms-flexbox;
2104
+ display: -webkit-flex;
2105
+ display: flex;
2106
+ -webkit-align-items: center;
2107
+ -ms-align-items: center;
2108
+ align-items: center;
2109
+ justify-content: center
2110
+ }
2111
+
2112
+ #sbi-admin-addons .addon-item .actions .msg.success {
2113
+ color: #2a9b39
2114
+ }
2115
+
2116
+ #sbi-admin-addons .addon-item .actions .msg.error {
2117
+ color: red
2118
+ }
2119
+
2120
+ #sbi-admin-addons .addon-item .status {
2121
+ float: left;
2122
+ padding-top: 8px
2123
+ }
2124
+
2125
+ #sbi-admin-addons .addon-item .status .status-inactive {
2126
+ color: red
2127
+ }
2128
+
2129
+ #sbi-admin-addons .addon-item .status .status-download {
2130
+ color: #666
2131
+ }
2132
+
2133
+ #sbi-admin-addons .addon-item .status .status-active {
2134
+ color: #2a9b39
2135
+ }
2136
+
2137
+ #sbi-admin-addons .addon-item .upgrade-button {
2138
+ text-align: center
2139
+ }
2140
+
2141
+ #sbi-admin-addons .addon-item .upgrade-button a {
2142
+ font-weight: 600;
2143
+ width: 140px;
2144
+ text-align: center;
2145
+ padding: 8px 5px
2146
+ }
2147
+
2148
+ #sbi-admin-addons .addon-item .action-button {
2149
+ float: right
2150
+ }
2151
+
2152
+ #sbi-admin-addons .addon-item .action-button button {
2153
+ background: none;
2154
+ border: 1px solid #ddd;
2155
+ border-radius: 3px;
2156
+ box-shadow: none;
2157
+ cursor: pointer;
2158
+ font-weight: 600;
2159
+ width: 140px;
2160
+ text-align: center;
2161
+ padding: 8px 5px
2162
+ }
2163
+
2164
+ #sbi-admin-addons .addon-item .action-button button:hover,#sbi-admin-addons .addon-item .action-button button.loading {
2165
+ background-color: #e9e9e9
2166
+ }
2167
+
2168
+ #sbi-admin-addons .addon-item .action-button button .fa {
2169
+ margin-right: 8px
2170
+ }
2171
+
2172
+ #sbi-admin-addons .addon-item .action-button button .fa.fa-spinner {
2173
+ margin-right: 0
2174
+ }
2175
+
2176
+ #sbi-admin-addons .addon-item .action-button button.status-active .fa {
2177
+ color: #2a9b39
2178
+ }
2179
+
2180
+ #sbi-admin-addons .addon-item .action-button button.status-inactive .fa {
2181
+ color: red
2182
+ }
2183
+
2184
+ #sbi-admin-addons .addon-item .action-button button.status-download .fa {
2185
+ color: #999
2186
+ }
2187
+
2188
+ #sbi-admin-addons .addon-item .action-button button.disabled {
2189
+ cursor: default
2190
+ }
2191
+
2192
+ #sbi-admin-addons .addon-item .action-button button.loading .fa {
2193
+ color: #666
2194
+ }
2195
+
2196
+ /* Tabs */
2197
+ .sbi-admin-tabs {
2198
+ background-color: #fff;
2199
+ margin: 0 0 20px 0;
2200
+ padding: 0 20px;
2201
+ list-style: none;
2202
+ overflow: auto;
2203
+ font-size: 14px
2204
+ }
2205
+
2206
+ .sbi-admin-tabs li {
2207
+ margin: 0 30px 0 0;
2208
+ padding: 0;
2209
+ float: left
2210
+ }
2211
+
2212
+ .sbi-admin-tabs li:last-of-type {
2213
+ margin: 0
2214
+ }
2215
+
2216
+ .sbi-admin-tabs li a {
2217
+ color: #666;
2218
+ display: block;
2219
+ padding: 20px 0 18px 0;
2220
+ text-decoration: none;
2221
+ border-bottom: 2px solid #fff;
2222
+ box-shadow: none
2223
+ }
2224
+
2225
+ .sbi-admin-tabs li a:hover {
2226
+ border-color: #999
2227
+ }
2228
+
2229
+ .sbi-admin-tabs li a.active {
2230
+ border-color: #e27730
2231
+ }
2232
+
2233
+ .sbi-admin-tabs li a:focus {
2234
+ box-shadow: none
2235
+ }
2236
+
2237
+ /* Clear */
2238
+ .sbi-clear:before {
2239
+ content: " ";
2240
+ display: table
2241
+ }
2242
+
2243
+ .sbi-clear:after {
2244
+ clear: both;
2245
+ content: " ";
2246
+ display: table
2247
}
css/sb-instagram.css CHANGED
@@ -1,819 +1,819 @@
1
- /**************/
2
- /*** LAYOUT ***/
3
- /**************/
4
-
5
- /* Feed container */
6
- #sb_instagram {
7
- width: 100%;
8
- margin: 0 auto;
9
- padding: 0;
10
- -webkit-box-sizing: border-box;
11
- -moz-box-sizing: border-box;
12
- box-sizing: border-box;
13
- }
14
- #sb_instagram:after{
15
- content: "";
16
- display: table;
17
- clear: both;
18
- }
19
-
20
- /*********************/
21
- /*** STYLE OPTIONS ***/
22
- /*********************/
23
- #sb_instagram.sbi_fixed_height{
24
- overflow: hidden;
25
- overflow-y: auto;
26
- -webkit-box-sizing: border-box;
27
- -moz-box-sizing: border-box;
28
- box-sizing: border-box;
29
- }
30
- #sb_instagram #sbi_images{
31
- width: 100%;
32
- float: left;
33
- line-height: 0;
34
-
35
- -webkit-box-sizing: border-box;
36
- -moz-box-sizing: border-box;
37
- box-sizing: border-box;
38
- }
39
- /* Remove header shadow/border */
40
- #sb_instagram .sbi_header_link {
41
- -webkit-box-shadow: none;
42
- box-shadow: none;
43
- }
44
- #sb_instagram .sbi_header_link:hover {
45
- border: none;
46
- }
47
-
48
- /* Items */
49
- #sb_instagram #sbi_images .sbi_item{
50
- display: -moz-inline-stack;
51
- display: inline-block;
52
- float: left;
53
- vertical-align: top;
54
- zoom: 1;
55
- *display: inline;
56
-
57
- max-height: 1000px;
58
- padding: inherit !important;
59
- margin: 0 !important;
60
- text-decoration: none;
61
- opacity: 1;
62
- overflow: hidden;
63
-
64
- -webkit-box-sizing: border-box;
65
- -moz-box-sizing: border-box;
66
- box-sizing: border-box;
67
-
68
- -webkit-transition: all 0.5s ease;
69
- -moz-transition: all 0.5s ease;
70
- -o-transition: all 0.5s ease;
71
- -ms-transition: all 0.5s ease;
72
- transition: all 0.5s ease;
73
- }
74
- /* Transition items in */
75
- #sb_instagram #sbi_images .sbi_item.sbi_transition{
76
- opacity: 0;
77
- max-height: 0;
78
- }
79
-
80
- /* Cols */
81
- #sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
82
- #sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
83
- #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
84
- #sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
85
- #sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
86
- #sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
87
- #sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
88
- #sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
89
- #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
90
- #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
91
-
92
- /* Disable mobile layout */
93
- #sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{ width: 100%; }
94
- #sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{ width: 50%; }
95
- #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{ width: 33.33%; }
96
- #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{ width: 25%; }
97
- #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{ width: 20%; }
98
- #sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{ width: 16.66%; }
99
- #sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{ width: 14.28%; }
100
- #sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{ width: 12.5%; }
101
- #sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{ width: 11.11%; }
102
- #sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{ width: 10%; }
103
-
104
- /* Photos */
105
- #sb_instagram .sbi_photo_wrap{
106
- position: relative;
107
- }
108
- #sb_instagram .sbi_photo{
109
- display: block;
110
- text-decoration: none;
111
- }
112
- #sb_instagram .sbi_photo img{
113
- width: 100%;
114
- height: auto;
115
- }
116
- #sb_instagram .sbi_no_js img{
117
- display: none;
118
- }
119
- #sb_instagram a,
120
- #sb_instagram a:hover,
121
- #sb_instagram a:focus,
122
- #sb_instagram a:active{
123
- outline: none;
124
- }
125
- #sb_instagram img{
126
- display: block;
127
- padding: 0 !important;
128
- margin: 0 !important;
129
- max-width: 100% !important;
130
- opacity: 1 !important;
131
- }
132
- #sb_instagram .sbi_link{
133
- display: none;
134
- position: absolute;
135
- bottom: 0;
136
- right: 0;
137
-
138
- width: 100%;
139
- padding: 10px 0;
140
- background: rgba(0,0,0,0.5);
141
- text-align: center;
142
- color: #fff;
143
- font-size: 12px;
144
- line-height: 1.1;
145
- }
146
- #sb_instagram .sbi_link a{
147
- padding: 0 6px;
148
- text-decoration: none;
149
- color: #fff;
150
- font-size: 12px;
151
- line-height: 1.1;
152
-
153
- display: -moz-inline-stack;
154
- display: inline-block;
155
- vertical-align: top;
156
- zoom: 1;
157
- *display: inline;
158
- }
159
- #sb_instagram .sbi_link .sbi_lightbox_link{
160
- padding-bottom: 5px;
161
- }
162
- #sb_instagram .sbi_link a:hover,
163
- #sb_instagram .sbi_link a:focus{
164
- text-decoration: underline;
165
- }
166
- #sb_instagram .sbi_photo_wrap:hover .sbi_link,
167
- #sb_instagram .sbi_photo_wrap:focus .sbi_link{
168
- display: block;
169
- }
170
-
171
- /* Videos */
172
- #sb_instagram svg:not(:root).svg-inline--fa {
173
- height: 1em;
174
- display: inline-block;
175
- }
176
-
177
- #sb_instagram .sbi_type_video .sbi_playbtn,
178
- #sb_instagram .sbi_type_carousel .sbi_playbtn,
179
- .sbi_type_carousel .fa-clone,
180
- #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
181
- #sb_instagram .sbi_type_video .svg-inline--fa.fa-play{
182
- display: block !important;
183
- position: absolute;
184
- z-index: 1;
185
-
186
- color: #fff;
187
- color: rgba(255,255,255,0.9);
188
- font-style: normal !important;
189
- text-shadow: 0 0 8px rgba(0,0,0,0.8);
190
- }
191
- #sb_instagram .sbi_type_video .sbi_playbtn,
192
- #sb_instagram .sbi_type_carousel .sbi_playbtn {
193
- z-index: 2;
194
- top: 50%;
195
- left: 50%;
196
- margin-top: -24px;
197
- margin-left: -19px;
198
- padding: 0;
199
- font-size: 48px;
200
- }
201
- #sb_instagram .sbi_type_carousel .fa-clone{
202
- right: 12px;
203
- top: 12px;
204
- font-size: 24px;
205
- text-shadow: 0 0 8px rgba(0,0,0,0.3);
206
- }
207
- .sbi_type_carousel svg.fa-clone,
208
- #sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
209
- #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play{
210
- -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
211
- filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
212
- }
213
-
214
- /* Loader */
215
- #sb_instagram .sbi_loader{
216
- width: 20px;
217
- height: 20px;
218
-
219
- position: relative;
220
- top: 50%;
221
- left: 50%;