Custom Facebook Feed - Version 4.1.2

Version Description

  • Fix: Settings that only apply to page feeds were also being displayed in the feed customizer for group feeds.
  • Fix: Like box position options were not available.
  • Fix: For legacy feeds, the shortcode setting "account" was not working.
  • Fix: Due to a change in Facebook video link format, oEmbeds would not work for some new versions of Facebook video links.
  • Fix: Fixed the setting "Header outside scrollable area" not applying on the front-end of the feed.
  • Fix: Fixed incorrect line spacing in the post content.
  • Fix: Sharing a link in a post with no post text would result in the link being displayed twice.
  • Fix: Tooltips in the settings pages were being cut off in certain circumstances due to a bug with the CSS code.
  • Fix: When the "AJAX theme loading fix" setting was enabled it would result in the JavaScript file for the plugin not being added to the page successfully.
  • Fix: Disabling the "View on Facebook link" option would also disable the share link.
Download this release

Release Info

Developer Craig at Smash Balloon
Plugin Icon 128x128 Custom Facebook Feed
Version 4.1.2
Comparing to
See all releases

Code changes from version 4.1.1 to 4.1.2

Files changed (51) hide show
  1. README.txt +1016 -1004
  2. admin/addon-functions.php +208 -208
  3. admin/admin-functions.php +457 -457
  4. admin/assets/css/about.css +765 -765
  5. admin/assets/css/admin-notifications.css +267 -267
  6. admin/assets/css/cff-admin-style.css +3608 -3608
  7. admin/assets/css/extensions.css +726 -726
  8. admin/assets/css/oembeds.css +790 -790
  9. admin/assets/css/settings.css +1913 -1913
  10. admin/assets/css/support.css +1014 -1014
  11. admin/assets/img/about/icon-full.svg +0 -0
  12. admin/assets/img/about/icon-none.svg +0 -0
  13. admin/assets/img/about/icon-partial.svg +0 -0
  14. admin/assets/img/about/plugin-mi.png +0 -0
  15. admin/assets/img/about/plugin-om.png +0 -0
  16. admin/assets/img/about/plugin-rp.png +0 -0
  17. admin/assets/img/about/plugin-seo.png +0 -0
  18. admin/assets/img/about/plugin-smtp.png +0 -0
  19. admin/assets/img/about/plugin-wpforms.png +0 -0
  20. admin/assets/img/balloon-120.png +0 -0
  21. admin/assets/img/balloon.png +0 -0
  22. admin/assets/img/book-icon.png +0 -0
  23. admin/assets/img/cff-icon.png +0 -0
  24. admin/assets/img/cff-sprite.png +0 -0
  25. admin/assets/img/fb-icon.png +0 -0
  26. admin/assets/img/fb-icon.svg +16 -16
  27. admin/assets/img/feed-types.svg +15 -15
  28. admin/assets/img/group-app.png +0 -0
  29. admin/assets/img/insta-icon.svg +23 -23
  30. admin/assets/img/instagram-color-icon.svg +17 -17
  31. admin/assets/img/oembeds-image-1@2x.png +0 -0
  32. admin/assets/img/oembeds-image-2@2x.png +0 -0
  33. admin/assets/img/oembeds-image-3@2x.png +0 -0
  34. admin/assets/img/oembeds-image-4@2x.png +0 -0
  35. admin/assets/img/rocket-icon.png +0 -0
  36. admin/assets/img/save-plus-icon.png +0 -0
  37. admin/assets/img/social-wall-graphic.png +0 -0
  38. admin/assets/img/social-wall-graphic2.png +0 -0
  39. admin/assets/img/support-members.png +0 -0
  40. admin/assets/img/team-avatar.png +0 -0
  41. admin/assets/img/twitter-icon.svg +16 -16
  42. admin/assets/img/youtube-icon.svg +16 -16
  43. admin/assets/js/about.js +145 -145
  44. admin/assets/js/admin-notifications.js +210 -208
  45. admin/assets/js/cff-admin-scripts.js +0 -0
  46. admin/assets/js/extensions.js +138 -138
  47. admin/assets/js/oembeds.js +177 -177
  48. admin/assets/js/settings.js +948 -948
  49. admin/assets/js/support.js +121 -121
  50. admin/builder/assets/css/builder.css +4249 -4249
  51. admin/builder/assets/css/global.css +439 -2994
README.txt CHANGED
@@ -1,1004 +1,1016 @@
1
- === Smash Balloon Social Post Feed ===
2
- Contributors: smashballoon
3
- Tags: Facebook, Facebook feed, Facebook posts, Facebook group, Facebook page
4
- Requires at least: 4.1
5
- Requires PHP: 5.6
6
- Tested up to: 5.9
7
- Stable tag: 4.1.1
8
- License: GPLv2 or later
9
- License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
-
11
- Formerly "Custom Facebook Feed". Display completely customizable Facebook feeds of a Facebook page or Group. Supports Facebook oEmbeds.
12
-
13
- == Description ==
14
-
15
- Display Facebook posts on your WordPress site. **Completely customizable**, **responsive**, **search engine crawlable**, and **GDPR compliant** Facebook feeds. Display **unlimited Facebook feeds** from your **Facebook page** or **Facebook Group**, and completely match the look and feel of your site with tons of customization options! Automatically powers any Facebook oEmbeds on your site.
16
-
17
- *"The perfect Facebook plugin with amazing support! What else do you want? Get it!"* - [JoeJeffries](http://wordpress.org/support/topic/you-dont-already-have-this?facebook)
18
-
19
- *"I honestly cannot recommend this Facebook plugin enough. The plugin itself is gorgeous and super customizable, and if you run into trouble...support will get you out of it. Five Stars across the board."* - [pamsavoybarnett](http://wordpress.org/support/topic/love-this-plugin-w-awesome-support?facebook)
20
-
21
- **Please note:** This free Facebook plugin allows you to display text and links from Facebook posts. To display **photos, videos, comments,** and more, we offer a Pro version of the plugin. See the Pro Version section below for more information.
22
-
23
- ### Facebook Feed Features
24
- **NEW: Now Supports Facebook oEmbeds**
25
- With WordPress removing support for Facebook oEmbeds, the plugin will now automatically power any Facebook embeds on your site preventing them from breaking. No developer app required.
26
-
27
- **Super Simple to Set Up**
28
- One of our main priorities has always been to make our Facebook plugin as easy as possible to setup and use. Get up and running in less less than 1 minute with our signature quick setup - no Facebook Developer App required.
29
-
30
- **Display Feeds from Your Facebook Page or Facebook Group**
31
- Use the plugin to display Facebook feeds from a Facebook page or Facebook group that you are an admin of.
32
-
33
- **Completely Customizable**
34
- By default the Facebook feed will adopt the styles of your WordPress theme, but your feeds can be completely customized to look however you like using our visual feed customizer - with tons of options to customize every part of your Facebook posts and feed.
35
-
36
- **SEO Friendly**
37
- The Facebook feed content is crawlable by search engines adding SEO value to your site, while other Facebook plugins embed the feed using iframes which are not crawlable.
38
-
39
- **GDPR Compliant**
40
- Automatically integrates with many of the popular GDPR cookie consent plugins and includes a 1-click easy GDPR setting.
41
-
42
- **Responsive and Mobile Optimized**
43
- Facebook feed layouts look great on any screen size and in any container width.
44
-
45
- **Unlimited Feeds from Unlimited Different Facebook Pages**
46
- We don't limit how many Facebook feeds you can display on your site. Just use the shortcode to embed as many Facebook feeds as you like into pages, posts or widgets anywhere on your site.
47
-
48
- **Built for Speed**
49
- Built-in caching means that your Facebook feeds load lightning fast. Set your own caching time - check for new Facebook posts every few seconds, minutes, hours or days. You decide.
50
-
51
- **Like Box Widget and Visual Header**
52
- Include the official Facebook Like Box widget at the top or bottom of your Facebook feed and display a beautiful visual header with your Facebook page or Facebook group cover photo, profile picture, bio, and number of likes.
53
-
54
- **So Much More**
55
- Show and hide certain parts of each Facebook post, choose whose posts to show in the feed, customize colors, font sizes and styles, the number of Facebook posts to display, set max text lengths, translate text, custom CSS, and much, much more.
56
-
57
- ### Pro Version (Custom Facebook Feed Pro)
58
-
59
- In order to maintain the free version of the Custom Facebook Feed plugin on an ongoing basis, and to provide quick and effective support for free, we offer a Pro version of the plugin. Custom Facebook Feed Pro allows you to display photos, videos, the number of likes, shares, reactions and comments for each Facebook post, choose from multiple layout options, filter Facebook posts by type or #hashtag/string, load more Facebook posts into your feed, and more. [Click here](https://smashballoon.com/differences-between-the-free-version-and-pro-version-of-the-custom-facebook-feed-plugin/ "Differences between free and Pro version of Custom Facebook Feed plugin") for a full list of all differences between the Custom Facebook Feed free and Pro versions.
60
-
61
- * [Find out more about Custom Facebook Feed Pro](https://smashballoon.com/custom-facebook-feed/?utm_campaign=facebook-free&utm_source=readme&utm_medium=findout "Custom Facebook Feed Pro")
62
- * [Try out the Custom Facebook Feed Pro demo](https://smashballoondemo.com/?utm_campaign=facebook-free&utm_source=readme&utm_medium=demo "Custom Facebook Feed Pro Demo").
63
-
64
- ### Benefits of Displaying a Facebook Feed on Your Website
65
-
66
- * **Increase social engagement** between you and your users, customers, or fans
67
- * **Save time** by using the Custom Facebook Feed to generate dynamic, search engine crawlable content on your website
68
- * **Get more likes** by displaying your Facebook content directly on your site
69
- * **Improve your SEO** as all of that quality keyword-rich Facebook content from posts and Facebook comments is directly embedded into your website
70
- * Display your Facebook content your way to perfectly match your website's style
71
- * **No Coding Required** - choose from tons of built-in customization options to create a truly unique feed of your Facebook content.
72
- * The Custom Facebook Feed plugin is **updated regularly** with new features, bug-fixes and Facebook API changes
73
- * Support is quick and effective
74
- * We're dedicated to providing the **most customizable**, **robust** and **well supported** Facebook feed plugin in the world!
75
-
76
- ### How to use the Custom Facebook Feed plugin
77
-
78
- Once you've installed the plugin there are only a few steps to get up and running:
79
-
80
- 1) Use the button on the 'Facebook Feed' settings page to log into your Facebook account and authorize the plugin.
81
- 2) Save the plugin settings and add the `[custom-facebook-feed]` shortcode to any page, post, or widget where you want the Facebook feed to be displayed.
82
-
83
- That's it! You can then customize the Facebook feed as needed using the settings on the Facebook Feed > Customize page.
84
-
85
- For full step-by-step setup directions with screenshots, see [here](https://smashballoon.com/custom-facebook-feed/docs/free/?utm_campaign=facebook-free-readme&utm_source=howto&utm_medium=setup "Custom Facebook Feed Free Setup Doc").
86
-
87
- ### Requesting support
88
-
89
- Customer support is a huge deal to us. We pride ourselves on always providing quick, effective, and courteous support to all of our users. If you're having an issue using the Custom Facebook Feed plugin then just let us know and we'll be there to help as soon as possible. You can either open a ticket on the support forum on [WordPress.org](https://wordpress.org/support/plugin/custom-facebook-feed/ "Custom Facebook Feed Free support forum"), or directly on the Custom Facebook Feed section of [our website](https://smashballoon.com/custom-facebook-feed/support/ "Custom Facebook Feed website support form"). We also have a large collection of help documentation and FAQs [on our website](https://smashballoon.com/custom-facebook-feed/faq/ "Custom Facebook Feed support FAQs") for all common issues related to the Custom Facebook Feed plugin.
90
-
91
- ### Who's behind this plugin?
92
-
93
- We're Smash Balloon; a fun-loving WordPress plugin development company birthed into existence in early 2013. We specialize in creating social media plugins that are not only intuitive and simple to use, but also designed to integrate seamlessly into your website and allow you to display your social media content in powerful and unique ways. Over 1 million awesome people have decided to actively use our free plugins, which is an incredible honor that we don't take lightly. This compels us to try to provide the quickest and most effective customer support that we can, blowing users away with the best customer service they've ever experienced.
94
-
95
- To find out more about the team, see [here](https://smashballoon.com/about/?utm_campaign=facebook-free-readme&utm_source=who&utm_medium=about "Team Smash Balloon").
96
-
97
- Check out our other free plugins for [Instagram](https://wordpress.org/plugins/instagram-feed "Instagram Feed free plugin"), [Twitter](https://wordpress.org/plugins/custom-twitter-feeds/ "Custom Twitter Feeds free plugin"), and [YouTube](https://wordpress.org/plugins/feeds-for-youtube/ "Feeds for YouTube free plugin").
98
-
99
- == Installation ==
100
-
101
- 1. Install the Custom Facebook Feed either via the WordPress plugin directory, or by uploading the files to your web server (in the `/wp-content/plugins/` directory).
102
- 2. Activate the plugin through the 'Plugins' menu in WordPress.
103
- 3. Navigate to the 'Facebook Feed' settings page to configure your feed.
104
- 4. Use the shortcode `[custom-facebook-feed]` in your page, post or widget to display your feed.
105
- 5. You can display multiple feeds of different Facebook pages by specifying a Page ID directly in the shortcode: `[custom-facebook-feed id=smashballoon num=5]`.
106
-
107
- == Frequently Asked Questions ==
108
-
109
- For a full list of FAQs and help with troubleshooting please visit the **[FAQ & Troubleshooting](https://smashballoon.com/custom-facebook-feed/faq/)** section of the Smash Balloon website
110
-
111
- = Are there any limitations on which Facebook page or Facebook group feeds I can display? =
112
-
113
- The Facebook feed you're trying to display has to be from a publicly accessible Facebook page or Facebook group. This means that you can't display the feed from your own personal Facebook profile. This is to do with Facebook's privacy policies. You can't display a non-public Facebook feed publicly.
114
-
115
- If your Facebook page has any restrictions on it (age, for example) then it means that people have to be signed into Facebook in order to view your page. This isn't desirable for most Facebook pages as it means that it isn't accessible by people who don't have a Facebook account and that your Facebook page can't be crawled and indexed by search engines.
116
-
117
- An easy way to determine whether your Facebook page is set to public is to sign out of your Facebook account and try to visit your page. If Facebook forces you to sign in to view your page then it isn't public. You can change your Facebook page to public in your Facebook page settings simply by removing any age or location restrictions you have on it ([screenshot](https://smashballoon.com/wp-content/uploads/2013/06/facebook-page-restrictions.png)), which will then allow the Custom Facebook Feed plugin to access and display your feed.
118
-
119
- = Can I display feeds from multiple Facebook pages? =
120
-
121
- Yep! Create as many feeds as you like from different Facebook pages. Just click "Add New" to create a new feed and then embed it anywhere on your site.
122
-
123
- = Can I display feeds from a Facebook Group? =
124
-
125
- Yep! First, authorize the plugin by using the big blue Facebook button on the "Facebook Feed" settings page and then select your Facebook group. You must be a member of the group and an admin of that Facebook group must have installed our app in the Facebook group settings. Directions for this are provided when you authorize the plugin via the Facebook Feed settings page.
126
-
127
- = Can I display the feed from a personal Facebook profile? =
128
-
129
- Due to Facebook's privacy policy you're not able to use the plugin to display all of your posts from a personal profile, only from a public page, as posts from a personal profile are protected for privacy reasons. You may have limited success in displaying certain posts from a personal profile but most posts are not able to be displayed.
130
-
131
- If you're using the profile to represent a business, organization, product, public figure or the like, then we'd advise converting your profile to a page per [Facebook's recommendation](http://www.facebook.com/help/175644189234902/), as there are many advantages to using pages over profiles.
132
-
133
- Once you've done so, the plugin will be able to retrieve and display all of your posts.
134
-
135
- = Does the plugin work with Facebook oEmbeds? =
136
-
137
- In version 2.5, support was added to allow the plugin to power your Facebook oEmbeds as official support for these is no longer available in WordPress core. Just connect your account on the oEmbeds settings page inside the plugin and the plugin will power all Facebook embeds on your site, old and new. No developer app or account required.
138
-
139
- = Can I show photos and videos in my Custom Facebook feed? =
140
-
141
- This free plugin only allows you to display text from your Facebook posts. To display photos and videos in your feed you would need to upgrade to the Pro version of the plugin. Try out a demo of the Pro version on the [Custom Facebook Feed website](https://smashballoon.com/custom-facebook-feed/demo/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=media "Custom Facebook Feed Demo"), and find out more about the Pro version [here](https://smashballoon.com/custom-facebook-feed/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=pro "Custom Facebook Feed Pro"). [Click here](https://smashballoon.com/differences-between-the-free-version-and-pro-version-of-the-custom-facebook-feed-plugin/ "Differences between free and Pro version of Custom Facebook Feed plugin") for a full list of all differences between the free version and Pro version.
142
-
143
- = Can I show the comments, shares and likes associated with each Facebook post? =
144
-
145
- This is a feature of the [Pro version of the plugin](https://smashballoon.com/custom-facebook-feed/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=comments "Custom Facebook Feed Pro"). To display comments, shares and likes you would need to upgrade from the free version to the Pro version.
146
-
147
- = Is the content of my Custom Facebook Feed crawlable by search engines? =
148
-
149
- It sure is. Unlike other Facebook plugins which use iframes to embed your Facebook feed into your page once it's loaded, the Custom Facebook Feed uses PHP to embed your Facebook feed content directly into your page. This adds dynamic, search engine crawlable content to your site.
150
-
151
- = How do I embed the Custom Facebook Feed directly into a WordPress page template? =
152
-
153
- You can embed your Facebook feed directly into a template file by using the WordPress [do_shortcode](http://codex.wordpress.org/Function_Reference/do_shortcode "WordPress.org do_shortcode reference") function: `<?php echo do_shortcode('[custom-facebook-feed]'); ?>`.
154
-
155
- = My Facebook feed posts are not showing up, or all I can see is the Facebook Like box but no posts =
156
-
157
- Please refer to [this FAQ](https://smashballoon.com/facebook-feed-doesnt-show-can-see-like-box-posts-gives/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=errors "My Facebook feed posts are not showing up, or all I can see is the Facebook Like box but no posts") for potential solutions on how to resolve this issue.
158
-
159
- = Create a basic slideshow from your Facebook posts =
160
-
161
- The Custom Facebook Feed plugin doesn't currently have a slideshow feature built into it, but it's possible to achieve a basic slideshow by doing the following:
162
-
163
- 1) Add a class to the shortcode of the Facebook feed that you want to convert into a slideshow:
164
-
165
- `[custom-facebook-feed class="slideshow"]`
166
-
167
- 2) Set the number of posts to display to be the number of Facebook posts you want to include in the slideshow (10 for example). You can do this by using the `num` shortcode option:
168
-
169
- `[custom-facebook-feed class="slideshow" num=10]`
170
-
171
- 3) Add the following to the plugin's **Custom JavaScript** section, which is under the 'Misc' tab on the plugin's 'Customize' page. Please note, if you change the class option in the shortcode above to be anything but "slideshow" then make sure to change that on the first line of the snippet below:
172
-
173
- `var shortcodeClass = 'slideshow',
174
- cffSpeed = 5000,
175
- $cff = $('#cff.'+ shortcodeClass);
176
- $cffItem = $cff.find('.cff-item'),
177
- cffNum = $cffItem.length,
178
- cffCur = 0;
179
- $cffItem.hide();
180
- setTimeout(function(){ $cff.find('.cff-item').eq(0).show(); }, 200);
181
- setInterval(function(){
182
- $cff.find('.cff-item').eq(cffCur).fadeOut( "fast", function() {
183
- if( cffCur == cffNum-1 ) cffCur = -1;
184
- cffCur++;
185
- $cff.find('.cff-item').eq(cffCur).fadeIn();
186
- });
187
- }, cffSpeed);`
188
-
189
- 4) You can change the speed of the transition by editing the **cffSpeed = 5000** value at the top of the snippet. 5000 is equal to 5 seconds (5000ms).
190
-
191
- = Changing the font in your Facebook feed and using Google Fonts =
192
-
193
- Please refer to [this FAQ](https://smashballoon.com/changing-the-font-in-your-facebook-feed-using-google-fonts/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=fonts "Changing the font in your Facebook feed and using Google Fonts") for directions on how to use Google fonts in your Facebook posts.
194
-
195
- = Can I display my Facebook posts horizontally or in multiple columns? =
196
-
197
- Please refer to [this FAQ](https://smashballoon.com/can-display-facebook-post-horizontally-multiple-columns/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=horizontal "Can I display my Facebook posts horizontally or in multiple columns?") for directions on how to display your Facebook posts in multiple columns.
198
-
199
- = My Facebook feed appears to have stopped updating / working =
200
-
201
- If your Facebook feed doesn't appear to be showing the most recent Facebook posts then the most likely explanation is that the recent Facebook posts in your feed may be shared from a user's personal Facebook profile. Facebook's privacy policy doesn't allow posts that you share from personal Facebook profiles to be shared outside of Facebook as the posts don't technically belong to your Facebook page, they belong to the user who posted it to their personal Facebook profile. There's an example of a post shared from a user's personal Facebook profile [here](https://smashballoon.com/wp-content/uploads/2014/11/sharing-photo-facebook-profile.jpg "Example of Facebook post shared from personal Faceboo profile").
202
-
203
- Please note, this isn't a limitation of our plugin, it's a restriction which Facebook places on it's content in order to protect the privacy of their Facebook users.
204
-
205
- **Potential solutions**
206
-
207
- * You could re-post the Facebook post to your page rather than sharing it to your Facebook page. If you re-post the content as your own post on your Facebook page then the content now originates from your Facebook page and will be displayed in the Facebook feed on your website.
208
-
209
- * If you were to share a post from another Facebook page or public source, rather than sharing it from someone's personal Facebook profile, then it would show up in your feed outside of Facebook, but by default any posts that originate from a personal Facebook profile are protected by Facebook's privacy policy and is the private content of that Facebook profile owner.
210
-
211
- = I'm receiving an error message when trying to display my Facebook posts =
212
-
213
- Please refer to our [Error Message Reference page](https://smashballoon.com/custom-facebook-feed/docs/errors/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=errors "I'm receiving an error message when trying to display my Facebook posts") for information on how to resolve common error messages.
214
-
215
- = Creating a Masonry grid layout from your Facebook posts =
216
-
217
- Please refer to [this FAQ](https://smashballoon.com/creating-a-masonry-grid-layout-from-your-facebook-posts/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=masonry "Creating a Masonry grid layout from your Facebook posts") for directions on how to create a Masonry grid layout from your Facebook feed posts.
218
-
219
- = How do I customize my Facebook feed? =
220
-
221
- You can customize the Facebook feed by setting the options on the Customize page, which can be found under the Facebook Feed menu in your left hand WordPress admin menu. If you need even deeper customization than the built in options allow then you can add your own CSS to the plugin in the Custom CSS section under the Misc tab to further customize your Facebook feed.
222
-
223
- You can also override these styles for individual Facebook feeds by setting options within the shortcode. For example, you can change the height of a specific Facebook feed like so: `[custom-facebook-feed height=500px]`.
224
-
225
- = The Custom Facebook Feed shortcode options aren't working =
226
-
227
- The most common causes of this are:
228
-
229
- 1) There's HTML tags within the [custom-facebook-feed] shortcode which are preventing it from working correctly
230
-
231
- If you copied and pasted the shortcode into the Visual editor on your WordPress page/post editor then it may have inadvertently included some HTML tags from the page that you copied it from. The easiest way to check this is to view the 'Text' view in your WordPress editor and see whether there are any stray HTML tags in the shortcode itself.
232
-
233
- 2) The shortcode includes curly single quote characters
234
-
235
- If your shortcode includes single quotes then check that they are the standard single quotes and not the curly kind.
236
-
237
- 3) Typo in the shortcode option
238
-
239
- Ensure that there aren't any spelling errors in the shortcode options that you're using and that the format is consistent with that demonstrated on the [Shortcode Options reference page](https://smashballoon.com/custom-facebook-feed/docs/shortcodes/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=shortcode "The shortcode options aren't working").
240
-
241
- = Facebook avatar pictures aren't showing up in my Facebook feed =
242
-
243
- The most common reason for this is that an add-on or extension you have installed in your web browser is blocking the pictures being loaded from Facebook. Try checking to see whether you have any add-ons or extensions installed in your browser and, if so, try disabling them to see whether that solves the problem and displays the pictures from Facebook.
244
-
245
- == Other Notes ==
246
-
247
- = At Smash Balloon we have two goals: =
248
-
249
- 1. Creating and maintaining the most useful, functional, customizable, robust and down-right awesomist Facebook feed plugin your website has ever seen.
250
- 2. To provide the quickest, friendliest and most mind-blowingly amazing product support you have ever experienced.
251
-
252
- == Screenshots ==
253
-
254
- 1. By default the Facebook feed inherits your theme's default styles and the Facebook feed is completely responsive
255
- 2. Completely customize the way your Facebook feed looks to perfectly match your site
256
- 3. Use custom CSS to customize every part of the Facebook feed
257
- 4. Display Facebook events in your Facebook feed
258
- 5. Configuring the Custom Facebook Feed plugin
259
- 6. General Facebook Feed options - Custom Facebook Feed Layout and Style page
260
- 7. Facebook Feed Typography options - Custom Facebook Feed Layout and Style page
261
- 8. Misc Facebook Feed options - Custom Facebook Feed Layout and Style page
262
- 9. It's super easy to display your Facebook feed in any page or post
263
-
264
- == Changelog ==
265
- = 4.1.1 =
266
- * Fix: Updating from version 2.x to version 4.1 would not transfer legacy sources.
267
- * Fix: Improved plugin hardening by removing unused admin pages.
268
-
269
- = 4.1 =
270
- * Tweak: The Facebook app used to connect groups has changed. If you are using a Facebook group feed, then please reconnect your group accounts using the new app when convenient to prevent any future issues. When reconnecting, follow the included directions on how to add the new app to your group settings.
271
- * Tweak: All Facebook data is now encrypted in your WordPress database.
272
- * Tweak: Access Tokens are no longer able to be viewed on the settings page.
273
- * Fix: Manually connecting an account while on the "Settings" page would not work.
274
- * Fix: Fixed a PHP error when a string was used for the cache time setting.
275
-
276
- = 4.0.5 =
277
- * Fix: Fixed an issue that was causing the "All Feeds" page to be inaccessible to some users.
278
-
279
- = 4.0.4 =
280
- * Fix: The call-to-action in the Like Box widget would not display properly at certain window widths in some browsers.
281
- * Fix: If a feed name contained an apostrophe then additional slashes were being added each time settings were saved.
282
- * Tweak: An alert bubble is added to the Facebook Feed menu item when there are new notifications available.
283
-
284
- = 4.0.4 =
285
- * Fix: The call-to-action in the Like Box widget would not display properly at certain window widths in some browsers.
286
- * Fix: If a feed name contained an apostrophe then additional slashes were being added each time settings were saved.
287
- * Tweak: An alert bubble is added to the Facebook Feed menu item when there are new notifications available.
288
-
289
- = 4.0.3 =
290
- * Fix: Added additional plugin hardening.
291
-
292
- = 4.0.2 =
293
- * Important: With this update, the Custom CSS and Custom JS settings have been deprecated. Please see below for details.
294
- * Tweak: If any Custom CSS was being used in this field then it will be automatically moved into the native WordPress Customizer "Additional CSS" field instead and continue to work as normal.
295
- * Tweak: If any Custom JavaScript was being used, then this update will prevent that JavaScript from working. There are [directions here](https://smashballoon.com/doc/moving-custom-javascript-code-out-of-our-plugins/) on how you can migrate this JavaScript into a specialized plugin instead.
296
-
297
- = 4.0.1 =
298
- * Fix: Fixed a compatibility issue with the Complianz Cookie Consent plugin integration.
299
- * Fix: Removed the limit to the number of sources shown at one time when creating a feed.
300
- * Fix: When using a narrow screen, modals inside the feed creator in the backend would be cut off.
301
- * Fix: Fixed an issue where settings were not preserved even when using the preserve settings option and deleting the plugin.
302
- * Fix: Improved security hardening.
303
- * Fix: Fixed some options and tables not being removed from the WordPress database on uninstall.
304
- * Fix: Locations of feeds sorted by source would not work if the source ID was not a number.
305
- * Fix: Fixed PHP warnings when viewing dashboard notifications.
306
- * Fix: Fixed locale setting causing a PHP warning if not set.
307
-
308
- = 4.0 =
309
- * Important: Minimum supported WordPress version has been raised from 3.0 to 4.1.
310
- * New: Our biggest update ever! We've completely redesigned the plugin settings from head to toe to make it easier to create, manage, and customize your Facebook feeds.
311
- * New: All your feeds are now displayed in one place on the "All Feeds" page. This shows a list of any existing (legacy) feeds and any new ones that you create. Note: If you updated from a version prior to v2.19 then you may need to view your feeds on your webpage so that the plugin can locate them and list them here.
312
- * New: Easily edit individual feed settings for new feeds instead of cumbersome shortcode options.
313
- * New: It's now much easier to create feeds. Just click "Add New", select your feed type, connect your account, and you're done!
314
- * New: Brand new feed customizer. We've completely redesigned feed customization from the ground up, reorganizing the settings to make them easier to find.
315
- * New: Live Feed Preview. You can now see changes you make to your feeds in real time, right in the settings page. Easily preview them on desktop, tablet, and mobile sizes.
316
- * New: Elementor and WordPress widgets. We've added new Elementor and WordPress widgets to make it easier to embed your feeds.
317
- * New: Color Scheme option. It's now easier than ever to change colors across your feed without needing to adjust individual color settings. Just set a color scheme to effortlessly change colors across your entire feed.
318
- * New: You can now change the number of columns in your feed across desktop, tablet, and mobile.
319
- * New: Easily import and export feed settings to make it simple to move feeds across sites.
320
-
321
- = 2.19.3 =
322
- * Fix: Fixed an issue with a blank screen sometimes appearing when trying to connect a Facebook account
323
-
324
- = 2.19.2 =
325
- * Tested with WordPress 5.8 update.
326
- * Fix: PHP error "Uncaught Error: array_merge() does not accept unknown named parameters" when visiting the "About" page using PHP 8+.
327
- * Fix: Fixed an issue with GDPR Cookie Consent by Web Toffee integration.
328
-
329
- = 2.19.1 =
330
- * New: In this update, the plugin will now use a persistent cache to store your Facebook group posts. This will help minimize any affects of a Facebook API change on May 25th which will only allow Facebook Groups to retrieve content from the past 90 days. The plugin will store your group posts in the persistent cache so that those posts can continue to be displayed beyond 90 days. This update will also make a one-time request to get the last 100 posts from your group and store those too, so that the affect of this change will be minimal for our users. Please [see here](https://smashballoon.com/doc/facebook-api-change-limits-groups-to-90-days/) for more information.
331
- * Tweak: Updated jQuery methods in preparation for jQuery migrate removal in an upcoming WordPress core update.
332
- * Tweak: Added option to enqueue CSS and JS files only when shortcode is on the page.
333
- * Tweak: Added an reset error log button to the settings page.
334
- * Tweak: Added an option to hide the call-to-action button in the post content.
335
- * Fix: Changed how access tokens are retrieved to prevent conflict with the "Rank Math SEO" plugin when connecting an account.
336
- * Fix: Fixed an error in the Feed Finder tool when removing accounts.
337
- * Fix: Fixed an issue with duplicated records in the feed finder.
338
- * Fix: Fixed "Unknown error" response with API story tag calls.
339
-
340
- = 2.19 =
341
- * New: Improved the error reporting system to make resolving issues easier.
342
- * New: The locations of the Facebook feeds on your site will now be logged and listed on a single page for easier management. After this feature has been active for awhile, a "Feed Finder" link will appear under your connected accounts on the plugin Settings page which allows you to see a list of all feeds on your site along with their locations.
343
- * Tweak: When clearing the plugin cache, the cache in the Litespeed plugin will now also be cleared if being used on the site.
344
- * Fix: Fixed an issue with anonymous avatars not displaying correctly in group feeds.
345
-
346
- = 2.18.3 =
347
- * Tweak: Updated deprecated jQuery functions to prevent potential issues with newer versions.
348
- * Tweak: Due to an API bug which Facebook hasn't resolved yet that affects buy/sell posts in groups, we have added a 'salesposts' shortcode option which will work around the issue until they fix it. If you are displaying posts from a group and receiving an "API Error 100" notice then adding `salesposts=true` to your shortcode and clearing the plugin cache should resolve the issue.
349
- * Fix: When displaying the feed in multiple columns, clicking the "See more" link in the post text wouldn't correctly reconfigure the layout.
350
- * Fix: Fixed a layout issue with the posts and Like Box which occurred when using a multi-column layout and applying feed padding.
351
- * Fix: Fixed an issue with the background color not being applied correctly when set to be black.
352
-
353
- = 2.18.2 =
354
- * Tweak: Now displays a notice to logged-in admins which lets you know if the Like Box or header cover photo is being intentionally hidden due to the GDPR setting.
355
- * Fix: Fixed an error which occurred when deleting the plugin.
356
-
357
- = 2.18.1 =
358
- * Fix: Fixed an issue with the integration with the Complianz plugin
359
- * Fix: Resolved a PHP warning related to the preg_replace_callback function which was displayed under certain conditions
360
- * Fix: Resolved a PHP deprecation notice related to the strpos function in PHP 7.3
361
-
362
- = 2.18 =
363
- * New: The plugin code has been completely refactored to improve performance and maintainability. If you experience any issues with this update then please open a support ticket [here](https://wordpress.org/support/plugin/custom-facebook-feed/) so that we can address it right away. Thank you!
364
- * New: Integrations with popular GDPR cookie consent solutions added: Cookie Notice by dFactory, GDPR Cookie Consent by WebToffee, Cookiebot by Cybot A/S, Complianz by Really Simple Plugins, and Borlabs Cookie by Borlabs. See the GDPR setting in the following location for more information: Facebook Feed > Customize > Misc > GDPR.
365
- * Note: The minimum supported PHP version has been increased to PHP version 5.6. If you are using a lower version then a notice will be displayed with a button to revert back to the previous version.
366
-
367
- = 2.17.1 =
368
- * Tweak: Added shortcode options for the "Before Date" and "After Date" settings, so that a custom text string can be displayed before and after the Facebook post date.
369
- * Tweak: Minor frontend CSS improvements.
370
- * Tweak: Added support for improved notices on the plugin settings page.
371
- * Fix: Fixed an issue with the Facebook Like Box widget displaying an error if the width was set to a fractional pixel.
372
-
373
- = 2.17 =
374
- * New: Added support for Facebook oEmbeds. When you share a link to a Facebook post or video, WordPress automatically converts it into an embedded Facebook post for you (an "oEmbed"). However, on October 24, 2020, WordPress is discontinuing support for Facebook oEmbeds and so any existing or new embeds will no longer work. Don't worry though, we have your back! This update adds support for Facebook oEmbeds and so, after updating, the Custom Facebook Feed plugin will automatically keep your oEmbeds working. It will also power any new oEmbeds you post going forward.
375
- * New: Install our other free social media plugins right from the Custom Facebook Feed settings menu. Use our Instagram, YouTube, and Twitter plugins to add even more social content to your website and help further engage your viewers and increase your followers.
376
-
377
- = 2.16.1 =
378
- * Fix: Added a workaround for a Facebook API bug which sometimes displays a button in a post with the text "No Button".
379
- * Fix: Added an additional check when formatting the post text for the share link to prevent potential issues.
380
- * Fix: Fixed a typo in the "restrictedpage" shortcode option.
381
-
382
- = 2.16 =
383
- * Important: Due to upcoming Facebook API changes on September 4, 2020, it will only be possible to display feeds from Facebook pages which you are an admin of. If a PPCA Error notice is displayed above your feed then this change will affect one or more of your feeds. For more information about this change, please [see here](https://smashballoon.com/facebook-api-changes-september-4-2020/).
384
- * Tweak: Added the "pagetype" setting to the shortcode when clicking the "Add to another feed" button on the Settings page to ensure it's set correctly
385
- * Fix: Fixed a minor compatibility issue with the upcoming WordPress 5.5 release
386
- * Fix: Removed the see more/less links from post text when using the email share link.
387
- * Fix: Removed a stray "section" closing tag which was causing a layout issue in some themes and inadvertently displayed the PPCA notice.
388
-
389
- = 2.15.1 =
390
- * Fix: The opt-in notice to help improve the plugin was not dismissing as expected for some sites due to the admin JavaScript file being cached by the browser.
391
- * Fix: Disabled the "About Us" page plugin installation if using a version of WordPress earlier than 4.6.
392
-
393
- = 2.15 =
394
- * New: Added a new visual header option which displays the cover photo, avatar, page name, bio, and number of likes from your Facebook page at the top of your feeds. To enable the header, go to Facebook Feed > Customize > General > Header > Header Type > Visual.
395
- * New: To help us improve the plugin we've added the ability to opt-in to usage tracking so that we can understand what features and settings are being used, and which features matter to you the most. This is disabled by default and will only be enabled if you explictly choose to opt in. If opted in, the plugin will send a report in the background once per week with your plugin settings and basic information about your website environment. No personal or sensitive data is collected (such as email addresses, Instagram account information, license keys, etc). To enable or disable usage tracking at a later date use the setting at: Instagram Feed > Customize > Advanced > Misc > Enable Usage Tracking. See [here](https://smashballoon.com/custom-facebook-feed/docs/usage-tracking/) for more information.
396
- * New: Added a setting to display a different number of posts on mobile devices vs desktop. While on the configure tab, check the box "Show different number for mobile" to reveal the setting.
397
- * New: Added capability "manage_custom_facebook_feed_options". Users with this capability can make changes to Facebook Feed settings and view admin only messages.
398
- * New: Added a PHP filter "cff_post_text" to change the post text before outputting it in the feed HTML.
399
-
400
- = 2.14.1 =
401
- * Fix: Some connection error notices not clearing automatically.
402
-
403
- = 2.14 =
404
- * New: Email alerts for critical Facebook feed issues. If there's an issue with a Facebook 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: Facebook Feed > Customize > Misc > Feed Issue Email Report.
405
- * New: Admin notifications for critical Facebook feed issues. If there is an error with a Facebook 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: Facebook Feed > Customize > Misc > Disable Admin Error Notice.
406
- * 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.
407
- * New: Added "About Us" page for those who would like to learn more about Smash Balloon and our other products. Go to Facebook Feed -> About Us in the dashboard.
408
-
409
- = 2.13 =
410
- * New: Added a "Custom Facebook Feed" Gutenberg block to use in the block editor, allowing you to easily add a Facebook feed to posts and pages.
411
- * New: Added support for translations.
412
-
413
- = 2.12.4 =
414
- * Tested with upcoming WordPress 5.4 update.
415
- * Tweak: Updated Facebook API calls
416
- * Fix: Minor bug fixes
417
-
418
- = 2.12.3 =
419
- * Tweak: Added a text link in the Facebook Feed settings page footer to our new free [YouTube plugin](https://wordpress.org/plugins/feeds-for-youtube/)
420
- * Tweak: When reconnecting a Facebook account on the settings page, if there's an issue with the existing Facebook access token then it'll be automatically replaced.
421
- * Tweak: Added 'rel="noopener"' to all external links and added 'rel="noreferrer"' to all non-Facebook links. Thanks to Dev VIP for the suggestion.
422
- * Fix: Fixed an issue with some Facebook call-to-action link URLs when a link protocol wasn't included
423
- * Fix: Fixed a JavaScript conflict with the [Forminator](https://wordpress.org/plugins/forminator/) plugin
424
- * Fix: Fixed duplicate Facebook post message displaying due to ellipsis HTML character
425
- * Fix: If a shared Facebook link post had no post text then the link title was used causing it to be displayed twice in the Facebook post
426
-
427
- = 2.12.2 =
428
- * Fix: Fixed a JavaScript error in the admin caused by the previous update. Apologies for any inconvenience.
429
-
430
- = 2.12.1 =
431
- * Fix: Fixed an issue with Facebook post date timezones due to changes in the WordPress 5.3 update
432
- * Fix: Fixed a rare issue where a JavaScript error would occur in the WordPress admin if a Facebook account was manually connected and the Facebook Page ID used was the full URL
433
- * Fix: Fixed a JavaScript error in the admin when using older web browsers
434
- * Tweak: Improved the manual account connection process
435
- * Tweak: Some minor UI tweaks to match the new WordPress 5.3 UI style
436
-
437
- = 2.12 =
438
- * New: Added a backup cache so the Facebook feed will still display even if there's an error from the Facebook API.
439
- * New: You can now easily manage multiple Facebook page or Facebook group accounts on the Facebook Feed plugin settings page allowing you to easily add them to other Facebook feeds on your site. When you connect a Facebook page or Facebook group you will now see it listed in the "Connected Accounts" section. You can add it to the primary Facebook feed or to another Facebook feed by using the new `account` shortcode option.
440
- * Tweak: Added a filter which can be used to filter the Facebook API data when returned; `cff_filter_api_data`.
441
- * Tweak: Updated Facebook API error messages
442
- * Fix: Fixed an issue with some @tag links in Facebook post text due to a Facebook API change
443
- * Fix: Fixed a rare issue with ellipsis chracter symbols in Facebook shared link descriptions causing the entire link description not to be displayed
444
-
445
- = 2.11.1 =
446
- * Tweak: Added the link source URL below the title for Facebook shared link posts
447
- * Fix: Some themes would prevent the Facebook "Share" link from working successfully
448
- * Fix: Fixed an issue with the "Feed Columns" setting not working if the minified versions of the Custom Facebook Feed plugin CSS/JavaScript files were being used
449
-
450
- = 2.11 =
451
- * New: Added a "Feed Columns" setting to allow you to display your Facebook feed in multiple columns. This can be found under the "General" tab on the "Customize" page, or by using the `cols` and `colsmobile` shortcode settings.
452
- * New: Updated to use v4.0 of the Facebook API
453
-
454
- = 2.10 =
455
- * New: Facebook Groups are making their long-awaited return to the Custom Facebook Feed plugin! Just click the 'Log in and get my Facebook Access Token' button on the Facebook Feed Settings page and select 'Facebook Group'. Follow the prompts to connect your Facebook Group and display your feed.
456
- * Fix: Fixed an issue where a lists of Facebook groups or pages wouldn't be displayed when retrieving a Facebook Access Token due to a server configuration issue
457
- * Fix: Photo icons weren't showing for Facebook album posts
458
- * Tweak: Now uses the Facebook `visitor_posts` endpoint to display visitor Facebook post feeds
459
-
460
- = 2.9.1 =
461
- * New: Added support for v3.3 of the Facebook API.
462
- * Fix: The Facebook Access Token selection area was being cut off on small screens when a lot of Facebook pages were listed.
463
-
464
- = 2.9 =
465
- * New: You can now select between a "Regular" or "Boxed" Facebook post style. Settings for this can be found at: `Facebook Feed > Customize > Style Posts > Post Item`. A Box Shadow setting has been added to the "Boxed" Facebook post style.
466
- * New: Added some settings to control the size and color of the Facebook shared link URLs and descriptions. These can be found at: `Facebook Feed > Customize > Style Posts > Shared Link Boxes`.
467
- * New: Improved the Facebook Access Token retrieval process to make it more intuitive.
468
- * Tweak: Facebook avatar images are now circular to match Facebook.
469
- * Tweak: Animated the social media icons when the Facebook "Share" button is clicked.
470
- * Tweak: Changed the way the Facebook Like Box loads to avoid a conflict with the Facebook Messenger widget. It no longer uses the Facebook JavaScript SDK.
471
- * Tweak: Changed the elements used for icons from `<i>` to `<span>` to aid accessibility.
472
- * Tweak: Removed the Google+ share option as the platform has been deprecated.
473
- * Tweak: Removed the social media share widgets from the footer of the admin so that they're only loaded when the "Share the plugin" button is clicked.
474
- * Fix: The Custom Facebook Feed plugin now uses the built-in WordPress HTTP API to get data from Facebook instead of making it's own cURL requests to the Facebook API.
475
- * Fix: Fixed an issue where the Facebook avatars of people posting to the Facebook page weren't being displayed. Individual Facebook API requests for avatars have now been removed and bundled into the main Facebook API request.
476
- * Fix: If the link to the Facebook profile of a visitor posting to your page is not available then remove the link from the Facebook avatar and author name.
477
- * Fix: Fixed an accessibility error caused by the Facebook share icons being empty links.
478
- * Fix: Removed the use of the ENT_HTML5 constant as it isn't supported in PHP 5.4.
479
- * Fix: Fixed a rare issue with Facebook tags in Facebook post stories when the locale was set to be Greek.
480
-
481
- = 2.8 =
482
- * New: Added support for Facebook Notes in timeline feeds. If your Facebook timeline feed contains a note then the Custom Facebook Feed plugin will now get the content from the note and display it within the Facebook post.
483
- * New: Facebook call-to-action buttons - such as "Learn More", "Shop Now", and "Message Facebook Page" - are now supported in your Facebook posts. These text strings can be translated using the settings at: Facebook Feed > Customize > Custom Text/Translate
484
- * New: Added a setting that you can enable if you are displaying Facebook posts from a restricted (non-public) Facebook page. This will allow the Facebook page avatar to be displayed, and is located at: Facebook Feed > Customize > Misc > Misc Settings > Is Facebook Page restricted?
485
- * New: If a Facebook visitor posts to your Facebook page then their avatar will now be displayed and cached for 6 months. To clear the cache of these Facebook avatar images use the button located at: Facebook Feed > Customize > Misc > Misc Settings > Clear Avatar Cache
486
- * Tweak: The Timezone setting can now be set in the Custom Facebook Feed shortcode. Eg: `timezone="America/Los_Angeles"`
487
- * Tweak: Minor UI changes to the Facebook Feed admin pages
488
- * Tweak: Reduced some of the Facebook data in the System Info
489
- * Fix: If you backdate a Facebook post it will now be ordered correctly in your Facebook feed
490
- * Fix: Fixed a theme conflict related to the Color Picker in the Facebook Feed admin section
491
- * Verified compatibility with WordPress 5.0 and Gutenburg
492
-
493
- = 2.7.2 =
494
- * **Important:** If you are displaying a Facebook feed from a Facebook page which you are *not* an admin of then it is advised that you obtain a new Facebook Access Token in the plugin using the "Log in and get my Access Token" button. This will switch you from using the "SlickRemix" app to using our own "Smash Balloon" Facebook app which was recently approved by Facebook, and will prevent you from experiencing any potential interuptions in your Facebook feeds going forward. This will be the final time this is required.
495
- * Fix: Fixed a rare issue caused by some themes including the JavaScript file incorrectly
496
-
497
- = 2.7.1 =
498
- * Tweak: Made some adjustments to the Facebook Access Token login process
499
-
500
- = 2.7 =
501
- * New: Now easily get your own Facebook Access Token to avoid any Facebook connection issues. Simply click the blue Facebook "Log in and get my Facebook Access Token" button on the Custom Facebook Feed settings page and connect your Facebook account to get your token. The Facebook Access Token will work to get Facebook posts from ANY Facebook page. Thanks to our friends at SlickRemix for powering our new login and getting the Custom Facebook Feed plugin back up and running again!
502
- * Tweak: Removed the minimum caching time if you're using your own Facebook Page Access Token
503
-
504
- = 2.6.4 =
505
- * **Important:** If you are displaying Facebook posts from a Facebook page that **you are an admin of** then it is now highly recommended that you retrieve your own Facebook Access Token for that Facebook page to avoid any Facebook API rate limit errors. Simply follow these [step-by-step](https://smashballoon.com/custom-facebook-feed/page-token/?utm_campaign=facebook-free-readme&utm_source=changelog&utm_medium=limits) instructions to obtain one.
506
-
507
- = 2.6.3 =
508
- * Fix: Fixed an issue where Facebook API errors were being cached
509
-
510
- = 2.6.2 =
511
- * Fix: Replaced all HTTP links in the Facebook feed with HTTPS
512
- * Fix: Fixed a rare issue which affected the layout of other Facebook widgets
513
- * Fix: Automatically remove slashes at the end of the Facebook Page ID as it caused an error
514
- * Fix: The API response test in the System Info now only tests with your Facebook token if you have the "Use my own Facebook Access Token" setting enabled
515
- * Fix: Fixed an issue which caused an occasional Facebook API rate limit error
516
-
517
- = 2.6.1 =
518
- * Fix: Removed an unnecessary Facebook API call
519
- * Fix: Removed a PHP notice which was displayed under rare circumstances
520
- * Fix: Minor Facebook bug fixes
521
-
522
- = 2.6 =
523
- * Fix: Fixed an issue connecting to the Facebook API caused by a recent Facebook platform change
524
- * Tweak: Increased the minimum caching time to be 15 minutes to reduce Facebook API requests
525
-
526
- = 2.5.2 =
527
- * Important: Due to sudden changes in the Facebook API it is no longer possible to display Facebook posts from a Facebook Group. Please [see here](https://smashballoon.com/facebook-api-changes-april-4-2018/) for more information. We apologize for any frustration or inconvenience this has caused.
528
- * Removed: Due to Facebook API restrictions, it is no longer possible to display information about a Facebook event when it is posted or shared to your Facebook Page timeline.
529
-
530
- = 2.5.1 =
531
- * Fix: Prevented a PHP notice which would be displayed under rare circumstances in the Facebook feed
532
- * Fix: Replaced a function due to a deprecation in PHP 7.2
533
-
534
- = 2.5 =
535
- * New: Added the Facebook post story as part of the page/author name at the top of the Facebook post
536
- * New: Added an option to use minified versions of the plugin CSS and JavaScript files: `Facebook Feed > Customize > Misc > Misc Settings > Minify CSS and JavaScript files`
537
- * New: Added support for clearing the cache of major caching plugins when the Facebook feed cache is cleared. You can enable this by setting the following setting to be "Yes": `Facebook Feed > Customize > Misc > Misc Settings > Force cache to clear on interval`
538
- * Tweak: Improved the text truncation so that it applies to both the Facebook post text and Facebook description as one block of text and accounts for HTML link tags
539
- * Tweak: Added an "Auto" option to the Facebook Post Limit setting where it will automatically adjust the post limit based on the number of Facebook posts you choose to display in your Facebook feed
540
- * Tweak: Reorganized the Custom Facebook Feed settings pages to be more intuitive
541
- * Tweak: Added aria-hidden=true to icons to help improve accessibility
542
- * Tweak: The icon font stylesheet handle has been renamed so it will only be loaded once if another of our social media plugins is installed
543
- * Tweak: Facebook error messages are now only shown to admins
544
- * Tweak: Added a setting to workaround a theme issue that affects the shortening of the Facebook post text. If you're experiencing an issue with the shortening of Facebook post text then you can enable the following setting: `Facebook Feed > Customize > Misc > Misc Settings > Fix Facebook text shortening issue`
545
- * Fix: Included a fallback in case the Facebook author name and avatar aren't available in visitor Facebook posts
546
- * Fix: Fixed an issue with apostrophes in the Facebook feed header not being escaped correctly
547
- * Fix: Fixed an issue with the Facebook icons when Font Awesome 5 was added to a site
548
- * Fix: Added support for the @[ID:page-name] Facebook tagging format
549
- * Fix: The Facebook post description is now able to be displayed even if the Facebook post text is hidden
550
-
551
- = 2.4.6 =
552
- * Compatible with WordPress 4.8
553
-
554
- = 2.4.5 =
555
- * Tweak: Updated plugin links for new WordPress.org repo
556
- * Fix: Minor bug fixes
557
-
558
- = 2.4.4 =
559
- * New: If your Facebook posts have been created in more than one language on Facebook then it's now possible to display each language by using the `locale` setting in the shortcode. Eg: English: `[custom-facebook-feed locale=en_EN]`, German: `[custom-facebook-feed locale=de_DE]`
560
- * Fix: Fixed an issue with the order of Facebook group posts in some Facebook feeds
561
-
562
- = 2.4.3 =
563
- * Fix: Fixed a potential security vulnerability
564
- * Tested with upcoming WordPress 4.6 update
565
-
566
- = 2.4.2 =
567
- * Tweak: Facebook group wall posts are now ordered based on recent activity, rather than by the date they were created, to better reflect the order on the Facebook Group wall.
568
- * Tweak: The "5 hours ago" date text strings can now be translated directly in the shortcode if you're displaying different feeds in different languages. See the bottom of the [Shortcode Options table](https://smashballoon.com/custom-facebook-feed/docs/shortcodes/) for more information.
569
- * Tweak: Created some specific [setup directions](https://smashballoon.com/custom-facebook-feed/docs/free/) for the free version.
570
- * Fix: Minor bug fixes
571
-
572
- = 2.4.1.2 =
573
- * Updated to be compatible with Facebook API version 2.6
574
-
575
- = 2.4.1.1 =
576
- * Fix: Fixed a JavaScript error in the admin area when using WordPress 4.5
577
-
578
- = 2.4.1 =
579
- * New: If a post contains either a photo or video then an icon and link are now added to view it on Facebook. You can disable this by unchecking the "Media Link" option in the following location: Customize > Post Layout > Show/Hide. You can also remove it by using the "exclude" shortcode option: exclude="medialink". You can translate or change the text for this link on the "Custom Text / Translate" settings page.
580
- * Tweak: Tested with WordPress 4.5
581
- * Fix: Fixed an issue where the "Share" button in the plugin Like Box wasn't working correctly
582
- * Fix: Added support for wp-config proxy settings. Credit to [@usrlocaldick](https://wordpress.org/support/topic/proxy-support-1) for the patch.
583
-
584
- = 2.4 =
585
- * New: Added a setting to allow you to use a fixed pixel width for the Facebook feed on desktop but switch to a 100% width responsive layout on mobile
586
- * New: You can now click on the name of a setting on the admin pages to reveal the corresponding shortcode for that setting
587
- * New: Added quick links to the top of the Customize settings pages to make it easier to find certain settings
588
- * New: Added a setting to allow you to disable the default plugin text and link styles (Customize > Misc > Disable default styles)
589
- * New: Added a setting which allows you to manually change the request method used to fetch Facebook posts which is necessary for some server setups
590
- * Tweak: Updated the Font Awesome icon font to version 4.5
591
- * Tweak: Moved the 'Show Header' setting to the 'General' tab on the Customize page
592
- * Fix: Hashtag linking now works with all languages and character sets
593
- * Fix: Fixed an error that occurred when trying to activate the Pro version with the free version still activated
594
- * Fix: Fixed a rare error which occurred when the Facebook post contained no text and no story
595
- * Fix: Fixed an issue when trying to display Facebook posts by only visitors to your Facebook page caused by a recent Facebook API update
596
-
597
- = 2.3.10 =
598
- * Fix: If you're experiencing an issue with your Facebook feed not automatically updating successfully then please update the plugin and enable the following setting: Custom Facebook Feed > Customize > Misc > Misc Settings > Force cache to clear on interval. If you set this setting to 'Yes' then it should force your plugin cache to clear either every hour, 12 hours, or 24 hours, depending on how often you have the plugin set to check Facebook for new posts.
599
-
600
- = 2.3.9 =
601
- * Fix: Fixed an issue caused by the recent Facebook API 2.5 update where the posts wouldn't display when using a brand new Access Token
602
-
603
- = 2.3.8 =
604
- * Fix: Fixed a positioning issue with the Facebook "Like Box / Page Plugin" widget caused by a recent Facebook update which was causing it to overlap on top of other content
605
- * Fix: Hashtags containing Chinese characters are now linked
606
- * Fix: Fixed a minor issue in shared link posts where the post text linked to the shared link URL instead of the post on Facebook
607
- * Tweak: Added a timezone for Sydney, Australia
608
-
609
- = 2.3.7 =
610
- * Fix: Fixed an issue caused by the WordPress 4.3 update where feeds from very long page IDs wouldn't update correctly due to the cache not clearing when expired
611
- * Fix: Removed specific encoding parameters from the cURL request method to prevent encoding issues on some servers
612
-
613
- = 2.3.6 =
614
- * New: Added a couple of new customization options for the Facebook Like Box/Page Plugin which allow you to select a small/slim header for the Like Box and hide the call-to-action button (if available)
615
- * Fix: The plugin now works with Access Tokens which use the new recently-released version 2.4 of the Facebook API
616
-
617
- = 2.3.5 =
618
- * New: Replace the Facebook 'Like Box' with the new Facebook 'Page Plugin' as the Facebook Like Box will be deprecated on June 23rd, 2015. Settings can be found under the Misc tab on the plugin's Customize page.
619
- * Fix: Hashtags which contain foreign characters are now correctly linked to the hashtag on Facebook
620
- * Fix: Links within Facebook post descriptions weren't opening in a new tab
621
- * Fix: Removed empty style tags from some elements
622
- * Fix: The URLs used for the 'Share' icons are now encoded to prevent any HTML validation errors
623
- * Fix: Shared Facebook posts now link to the new shared post and not to the original post that was shared on Facebook
624
- * Fix: Corrected a minor issue with the plugin caching string
625
- * Fix: Fixed a minor issue with tags in the Facebook post text when creating/sharing an event
626
- * Tweak: Add some stricter CSS to some parts of the feed to prevent theme conflicts
627
- * Tweak: Automatically link the Facebook event name to the event now rather than it having to be enabled on the plugin's 'Typography' settings page
628
-
629
- = 2.3.4 =
630
- * Fix: The Facebook event description is no longer shown twice in event posts. It was previously shown in the post text itself and in the Facebook event details.
631
- * Fix: Fixed a rare bug which would occur if your Facebook page or Facebook group name contained a number
632
-
633
- = 2.3.3 =
634
- * Fix: Removed a PHP notice which was missed in the last update. Apologies for the two updates in quick succession.
635
-
636
- = 2.3.2 =
637
- * Fix: Fixed some stray PHP notices which were inadvertently introduced in a recent update
638
- * Tweak: Added an option to not load the icon font included in the plugin
639
-
640
- = 2.3.1 =
641
- * New: Added a shortcode option to allow you to offset the number of posts to be shown. Eg: offset=2
642
- * New: Added an email link to the sharing icons
643
- * New: Added a setting to load a local copy of the icon font instead of the CDN version. This can be found at the bottom of the 'Misc' settings page.
644
- * Tweak: Added a prefix to the IDs on all Facebook posts so that they can now be targeted via CSS
645
- * Tweak: Added "nofollow" to all links by default. This can be disabled by using `nofollow=false` in the shortcode.
646
- * Tweak: Added some missing settings to the System Info section
647
- * Tweak: Added the 'Timezone' setting to the main Settings page so that it's easier to find
648
- * Fix: Added a workaround for Facebook changing the event URLs in their API from absolute to relative URLs
649
- * Fix: Facebook removed the 'relevant_count' parameter from their API so added a workaround to get the number of photos attached to a Facebook post
650
- * Fix: Fixed a minor bug in the WP_Http fallback method
651
- * Fix: Removed duplicate IDs on the share icons and replaced with classes
652
- * Fix: Added a check to the file_get_contents data retrieval method to check whether the Open SSL wrapper is enabled
653
- * Fix: The `eventtitlelink` shortcode option now works correctly
654
- * Fix: Added a workaround for 'story_tags' which Facebook deprecated from their API
655
- * Fix: Removed query string from the end of CSS and JavaScript file references and replaced it with the wp_enqueue_script 'ver' parameter instead
656
-
657
- = 2.3 =
658
- * Happy New Year!
659
- * New: Added a share link which allows you to share posts to Facebook, Twitter, Google+ or LinkedIn. This can be disabled at the very bottom of the Typography tab, or by using `showsharelink=false` in the [custom-facebook-feed] shortcode.
660
- * Tweak: Using your own Facebook Access Token in the plugin is still optional but is now recommended in order to protect yourself against future Access Token related issues
661
- * Tweak: Increased the accuracy of the character count when links are included in the Facebook text
662
- * Tweak: Improved the efficiency of the Facebook post caching
663
- * Tweak: Replaced the rel attribute with the HTML5 data attribute when storing data on an element
664
- * Tweak: Added HTTPS stream wrapper check to the System Info to aid in troubleshooting
665
- * Tweak: Updated the plugin's icon font to the latest version
666
- * Tweak: Added the Smash Balloon logo to the credit link which can be optionally displayed at the bottom of your feed. The setting for this is at the bottom of the Misc tab on the Customize page.
667
- * Tweak: Added a shortcode option to only show the Smash Balloon credit link on certain feeds: `[custom-facebook-feed credit=true]`
668
- * Fix: Fixed an issue with quotes being escaped in custom/translated text
669
- * Fix: Display an error message if WPHTTP function isn't working correctly
670
- * Fix: The `postbgcolor` shortcode option is now working correctly
671
-
672
- = 2.2.1 =
673
- * Fix: Fixed a minor JavaScript error which occurs if a Facebook post doesn't contain any text
674
-
675
- = 2.2 =
676
- * New: Added a text area to the Support tab which contains all of the plugin settings and site info for easier troubleshooting
677
- * New: You can now set the number of Facebook posts to '0' if you just want to show the Facebook Like box widget and no posts
678
- * Tweak: If the user doesn't add a unit to the width, height or padding then automatically add 'px'
679
- * Tweak: Added social media sharing links to the bottom of the settings page and an option to add a credit link to the bottom of the feed
680
- * Fix: Fixed an issue with Facebook hashtags not being linked when followed immediately by punctuation
681
- * Fix: When displaying a shared link if the caption is the same as the link URL then don't display it
682
- * Fix: Added a space before the feed header's style attribute to remove HTML validation error
683
- * Fix: Prefixed the 'top' and 'bottom' classes used on the Facebook Like box to prevent CSS conflicts
684
- * Fix: Fixed an issue with the link color not being applied to Facebook hashtag links
685
-
686
- = 2.1.3 =
687
- * Fix: Fixed an issue with the Facebook Access Token used in the plugin hitting its request limit
688
-
689
- = 2.1.2 =
690
- * Fix: Added in a missing closing div tag to the Facebook feed when an error is being displayed
691
-
692
- = 2.1.1 =
693
- * Fix: Fixed an issue with the date not being hidden when unchecked in the Show/Hide section
694
- * Fix: Fixed an issue with the date not being displayed below event posts when the date position was set to 'At the bottom of the post'
695
-
696
- = 2.1 =
697
- * New: Added an option to preserve/save your plugin options after uninstalling the plugin. This makes manually updating the plugin much easier.
698
- * New: Added a 'Settings' link to the plugin on the Plugins page
699
- * New: Added a field to the Misc settings page which allows users to enter their Facebook App ID in order to remove a couple of browser console warnings caused by the Facebook Like box widget
700
- * Tweak: Reduced the size of the author's Facebook profile picture from 50px to 40px to match Facebook
701
- * Tweak: The link description text is now 12px in size by default
702
- * Tweak: Added some default character limits to the post text and descriptions
703
- * Tweak: If the post author is being hidden then change the default date position to be the bottom of the post
704
- * Fix: The post author link is no longer the full width of the post and is only wrapped around the author image and name which helps prevent inadvertently clicking on the post author
705
- * Fix: Added a fb-root element to the Like box to prevent a browser console warning
706
- * Fix: Renamed the ShowError function to prevent conflicts
707
- * Fix: Fixed an issue with the 'seconds' custom text string not being saved correctly
708
- * Fix: When linking the post text to the Facebook post the correct text color is now applied
709
-
710
- = 2.0.1 =
711
- * Tweak: Improved error handling and added an [Error Message reference](https://smashballoon.com/custom-facebook-feed/docs/errors/) to the website
712
-
713
- = 2.0 =
714
- * New: Added an option to display the post date immediately below the author name - as it is on Facebook. This is now the default date position.
715
- * New: Added options to add a background color and rounded corners to your posts
716
- * New: If your Facebook event has an end date then it will now be displayed after the start date
717
- * New: Hashtags in the post descriptions are now also linked
718
- * New: Tested and approved for the upcoming WordPress 4.0 release
719
- * Tweak: Moved the 'View on Facebook' link to the left side
720
- * Tweak: Added error handling to improve user experience
721
- * Tweak: If the Facebook API can't be reached by the plugin for some reason then it no longer caches the empty response and instead keeps trying to retrieve the posts from Facebook until it is successful
722
- * Fix: Removed some redundant inline CSS used on the posts
723
- * Fix: If there is a token in the 'Access Token' field but the 'Enter my own Access Token' box is unchecked then the plugin will no longer use it
724
- * Fix: Added the trim() function to the 'Test connection to Facebook API' function to improve reliability
725
- * Fix: Fixed an occasional JavaScript error which occurred when the post text was hidden
726
-
727
- = 1.9.9.3 =
728
- * New: Hashtags in link, photo and video descriptions are now also linked
729
- * Fix: Fixed an issue with hashtags being linked when the post text is also linked, which interfered with the text formatting
730
-
731
- = 1.9.9.2 =
732
- * Fix: Removed a couple of stray PHP notices
733
-
734
- = 1.9.9.1 =
735
- * Fix: Fixed an occasional issue with hashtags in inline CSS inadvertently being linked
736
-
737
- = 1.9.9 =
738
- * New: Hashtags in your posts are now linked to the hashtag search on Facebook. This can be disabled in the 'Post Text' section on the Typography settings page.
739
- * New: Added a Facebook icon to the Custom Facebook Feed admin menu
740
- * Fix: Corrected the left side margin on the "Like" box so that it aligns correctly with posts
741
-
742
- = 1.9.8.1 =
743
- * Fix: Fixed an admin JavaScript error introduced by the last update
744
-
745
- = 1.9.8 =
746
- * Tweak: The Access Token field is now hidden by default and is revealed by a checkbox
747
- * Fix: Fixed an issue with link colors not being applied to all links
748
- * Fix: Removed the link box container from posts which contain non-youtube/vimeo links
749
- * Fix: Links which don't contain a 'http://' protocol are now linked correctly
750
-
751
- = 1.9.7 =
752
- * Fix: Fixed an issue with a generic function name which was occasionally causing an error
753
-
754
- = 1.9.6 =
755
- * Tweak: Added an HTML wrapper element around the feed
756
-
757
- = 1.9.5 =
758
- * New: Added an option to set a height on the Like box. This allows you to display more faces of your fans if you have that option selected.
759
- * Tweak: Added a few stricter CSS styles to help minimize the chance of theme stylesheets distorting post formatting
760
- * Tweak: Added a span to the header text to allow CSS to be applied
761
- * Fix: Fixed a bug with the post author text bumping down below the author image in the Firefox browser
762
- * Fix: Corrected a bug which caused some links not to have the color applied
763
- * Fix: Fixed a float issue in Firefox which sometimes caused the feed to be pushed off the page
764
-
765
- = 1.9.4 =
766
- * New: Added background and border styling options to shared links
767
- * Tweak: Reduced the clickable area of the post author
768
- * Tweak: Added a 'Customize' tab to the Settings page
769
- * Fix: Fixed an issue with post tag linking not working correctly in some languages
770
- * Fix: Fixed an issue with line breaks not being respected in IE8
771
-
772
- = 1.9.2 =
773
- * Fix: Added title and alt attributes to the post author's Facebook profile picture
774
- * Fix: Improved the reliability of the post tag linking
775
- * Fix: Fixed an issue with HTML characters not rendering correctly when linking the post text
776
- * Fix: Improved the reliability of the CSS clearing method used on the feed container
777
- * Compatible with WordPress 3.9
778
-
779
- = 1.9.1 =
780
- * Fix: Fixed an issue with the 'textlink' shortcode option
781
- * Fix: Fixed an bug with post text sometimes being duplicated when linked
782
- * Fix: Removed error_reporting(0);
783
-
784
- = 1.9.0 =
785
- * New: Added the ability to change the text size and color of the post author
786
- * New: Define the format, size and color of shared link titles
787
- * New: You can now define the color of the links in your post text, descriptions and Facebook events
788
- * Tweak: Moved the Feed Header options to the Typography page
789
- * Tweak: Moved the Ajax setting to the Misc page
790
- * Tweak: Now removes any query strings attached to the Facebook Page ID
791
- * Fix: Fixed an issue with some themes causing the clear element to prevent links being clickable
792
- * Fix: Some minor bug fixes
793
-
794
- = 1.8.2.3 =
795
- * New: Now supports Facebook tags - creates links when using the @ symbol to tag other people or Facebook pages in your posts
796
- * Tweak: Changed the method used for link replacement in posts
797
- * Fix: Fixed issue with php include
798
-
799
- = 1.8.1 =
800
- * New: Added an 'exclude' shortcode option to allow you to easily exclude specific parts of the post
801
- * New: Timeline events are now cached to help reduce page load time
802
- * New: Added an option for when the WordPress theme is loading the feed via AJAX so that the JavaScript runs after the feed has been loaded into the page
803
- * Tweak: Changed author images back to loading via PHP rather than JavaScript due to issues with certain WordPress themes
804
- * Fix: Reset the timezone after the shortcode has run
805
- * Fix: Fixed an issue with the shared link descriptions not being hidden when specified
806
- * Fix: Fixed a rare issue with the 'textlink' shortcode option
807
- * Fix: Use a fallback JSON string if unable to find the cached version in the database
808
-
809
- = 1.8.0 =
810
- * New: Added a built-in color picker
811
- * New: Added class to posts based on the author to allow for independent styling
812
- * Tweak: Now loads the author's Facebook profile picture in using JavaScript to help speed up load times
813
- * Tweak: Now automatically set the Facebook post limit based on the number of Facebook posts to be displayed
814
- * Tweak: Core improvements to the way Facebook posts are output
815
- * Tweak: Changed 'Layout & Style' page name to 'Customize'
816
- * Tweak: Moved the Support information to a tab on the Settings page
817
- * Tweak: Improved the 'Test connection to Facebook API' function
818
- * Fix: Encode Facebook URLs so that they pass HTML validation
819
- * Fix: Fixed an issue with Facebook post captions not displaying under some circumstances
820
- * Fix: More robust method for stripping the URL when a user enters Facebook page URL instead of their Facebook Page ID
821
-
822
- = 1.7.2 =
823
- * Tweak: Moved the 'Show post author' option from the General settings tab to the Post Layout tab
824
- * Tweak: Added the ability to show or hide the author to the 'include' shortcode option
825
- * Fix: Added CSS box-sizing property to feed header so that padding doesn't increase its width
826
- * Fix: Fixed showheader=false and headeroutside=false shortcode options
827
- * Fix: Now allows users to enter their Facebook page URL as their Facebook Page ID
828
-
829
- = 1.7.0 =
830
- * New: Added ability to add a customizable header to your feed
831
- * New: Added a Custom JavaScript section to allow you to add your own JS or jQuery functionality to the feed
832
- * New: Added a 'Custom Text / Translate' tab to house all customizable text
833
- * New: You can now choose to show posts only by other people on your Facebook page
834
- * New: Set your timezone so that dates/times are displayed in your local time
835
- * New: When a Facebook post contains a link to multiple images it now states the number of photos after the post text and links to the Facebook album
836
- * Tweak: Plugin now detects whether the page is using SSL and pulls https resources
837
- * Tweak: Added a button to test the connection to Facebook's API for easier troubleshooting
838
- * Fix: Now using HTML encoding to parse any raw HTML tags in the Facebook post text or descriptions
839
- * Fix: Added a protocol to the beginning of links which don't include one
840
- * Fix: Fixed date width issue in IE7
841
- * Fix: Removed stray PHP notices
842
- * Fix: Added a space between the Like Box attributes
843
-
844
- = 1.6.8.2 =
845
- * Fix: Fixed a CSS bug in Firefox which was causing the page author name to bump down below the avatar
846
-
847
- = 1.6.8.1 =
848
- * Tweak: Moved 'View on Facebook' link up to be level with the date rather than on the line below it
849
- * Fix: Don't show the caption when it is the same as the Facebook post text
850
- * Fix: Fixed issue with enqueueing JavaScript file
851
-
852
- = 1.6.8 =
853
- * New: Added option to remove border from the Facebook Like box when showing faces
854
- * New: Set Facebook "Like" box text color to either blue or white
855
- * Tweak: Moved descripion below video or link title and added link source
856
- * Tweak: Added ability to manually translate the '2 weeks ago' text
857
- * Tweak: Replaced 'View Link' with 'View on Facebook' so that shared links now link to the Facebook post
858
- * Tweak: Facebook "Like" box is now responsive
859
- * Tweak: Displays Facebook post caption if no description is available
860
- * Tweak: Vertically center multi-line author names rather than bumping them down below the Facebook profile picture
861
- * Tweak: Checks whether the Access Token is inputted in the correct format
862
- * Fix: Fixed bug in the 'Show posts on my page by others' option
863
- * Fix: If displaying a Facebook group then automatically hides the Facebook "Like" box
864
- * Fix: 'others=false' shortcode option now working correctly
865
- * Fix: Strip any white space characters from beginning or end of Access Token and Facebook Page ID
866
-
867
- = 1.6.7.1 =
868
- * Fix: Fixed a bug in 1.6.7 which was causing an issue displaying the Facebook feed in some circumstances
869
-
870
- = 1.6.7 =
871
- * New: Your Facebook feed can now be completely displayed in any language - added i18n support for date translation
872
- * Tweak: Improved documentation within the plugin
873
- * Tweak: Changed order of methods used to retrieve Facebook feed data
874
-
875
- = 1.6.6.3 =
876
- * New: Added support for Facebook group events
877
-
878
- = 1.6.6.1 =
879
- * Fix: Resolved jQuery UI draggable bug which was causing issues with drag and drop
880
-
881
- = 1.6.6 =
882
- * New: Now works with Facebook groups
883
- * Fix: Fixed an issue with the 'Show posts by others' option not working correctly in the previous version
884
-
885
- = 1.6.4 =
886
- * New: Added localization support. Full support for various languages coming soon
887
- * New: Added CSS classes to different Facebook post types to allow for different styling based on post type
888
- * New: Option to link statuses to either the status post itself or the directly to the Facebook page/timeline
889
- * New: Added option to add thumbnail faces of fans to the Facebook Like box and define a width
890
- * Tweak: Added separate classes to 'View on Facebook' and 'View Link' links so that they can be targeted with CSS
891
- * Tweak: Prefixed every CSS class to prevent styling conflicts with theme stylesheets. Please note that if you used custom CSS to style parts of the feed that the CSS classes are now prefixed with 'cff-' to prevent theme conflicts. Eg. '.more' is now '.cff-more'.
892
-
893
- = 1.6.3 =
894
- * New: Added support for Facebook 'Offers'
895
- * Fix: Fixed an issue with the 'others' shortcode option not working correctly
896
- * Fix: Prefixed the 'clear' class to prevent conflicts
897
-
898
- = 1.6.2 =
899
- * New: Post caching now temporarily stores your Facebook post data in your WordPress database to allow for super quick load times
900
- * New: Define your own caching time. Check for new Facebook posts every few seconds, minutes, hours or days. You decide.
901
- * New: Define your own custom text for the 'See More' and 'See Less' buttons
902
- * New: Add your own CSS class to your Custom Facebook Feeds
903
- * New: Define a Facebook post limit which is higher or lower than the default 25
904
- * New: Include the Facebook Like box inside or outside of the Facebook feed's container
905
- * New: Customize the Facebook event date independently
906
- * New: Improved layout of admin pages for easier navigation and customization
907
- * Fix: Provided a fix for the Facebook API duplicate post bug
908
- * Fix: Fixed bug which ocurred when multiple Facebook feeds are displayed on the same page with different text lengths defined
909
-
910
- = 1.5.2 =
911
- * Fix: Fixed JavaScript error in previous update
912
-
913
- = 1.5.1 =
914
- * New: Added a 'See More' link to expand any text which is longer than the character limit defined
915
- * New: Choose to show Facebook posts by other people in your feed
916
- * New: Option to show the post author's Facebook profile picture and name above each post
917
- * New: Added options to customize and format the Facebook post date
918
- * New: Add your own text before and after the date and in place of the 'View on Facebook' and 'View Link' text links
919
- * New: Specify the format of the Facebook Event date
920
- * Tweak: Default date format is less specific and better mimics Facebook's - credit Mark Bebbington
921
- * Tweak: Changed the layout of the Typography section to allow for the additional options
922
- * Fix: When a Facebook photo album is shared it now links to the album itself on Facebook and not just the cover photo
923
- * Fix: Fixed issue with hyperlinks in post text which don't have a space before them not being converted to links
924
-
925
- = 1.4.8 =
926
- * Minor fixes
927
-
928
- = 1.4.7 =
929
- * Tweak: Added links to statuses which link to the Facebook page
930
- * Tweak: Added classes to Facebook event date, location and description to allow custom styling
931
- * Tweak: Removed 'Where' and 'When' text from Facebook events and made bold instead
932
-
933
- = 1.4.6 =
934
- * Fix: Fixed 'num' option in shortcode
935
-
936
- = 1.4.4 =
937
- * New: Added more shortcode options
938
- * Minor tweaks
939
-
940
- = 1.4.2 =
941
- * New: Add your own custom CSS to allow for even deeper customization
942
- * New: Optionally link your post text to the Facebook post
943
- * New: Optionally link your event title to the Facebook event page
944
- * Some minor modifications
945
-
946
- = 1.4.1 =
947
- * Fix: Set all parts of the Facebook feed to display by default on activation
948
-
949
- = 1.4.0 =
950
- * Major Update!
951
- * New: Loads of new customization options for your Custom Facebook Feed
952
- * New: Define Facebook feed width, height, padding and background color
953
- * New: Change the font-size, font-weight and color of the Facebook post text, description, date, links and event details
954
- * New: Choose whether to show or hide certain parts of the Facebook posts
955
- * New: Select whether the Facebook Like box is shown at the top of bottom of the Facebook feed
956
- * New: Choose Facebook Like box background color
957
-
958
- = 1.3.6 =
959
- * Minor modifications
960
-
961
- = 1.3.5 =
962
- * New: Shared Facebook events now display event details (name, location, date/time, description) directly in the Facebook feed
963
-
964
- = 1.3.4 =
965
- * New: Email addresses within the Facebook post text are now hyperlinked
966
- * Fix: Links beginning with 'www' are now also hyperlinked
967
-
968
- = 1.3.3 =
969
- * New: Added support for Facebook events - display the Facebook event details (name, location, date/time, description) directly in the Facebook feed
970
- * Fix: Links within the Facebook post text are now hyperlinked
971
- * Tweak: Added additional methods for retrieving Facebook feed data
972
-
973
- = 1.3.2 =
974
- * Fix: Now using the built-in WordPress HTTP API to get retrieve the Facebook data
975
-
976
- = 1.3.1 =
977
- * Fix: Fixed issue with certain Facebook statuses not displaying correctly
978
-
979
- = 1.3.0 =
980
- * Tweak: If 'Number of Posts to show' is not set then default to 10 Facebook posts
981
-
982
- = 1.2.9 =
983
- * Fix: Now using cURL instead of file_get_contents to prevent issues with php.ini configuration on some web servers
984
-
985
- = 1.2.8 =
986
- * Fix: Fixed bug in specifying the number of Facebook posts to display
987
-
988
- = 1.2.7 =
989
- * Tweak: Prevented likes and comments by the page author showing up in the Facebook feed
990
-
991
- = 1.2.6 =
992
- * Tweak: Added help link to Custom Facebook Feed settings page
993
-
994
- = 1.2.5 =
995
- * Fix: Added clear fix
996
-
997
- = 1.2.1 =
998
- * Fix: Minor bug fixes
999
-
1000
- = 1.2 =
1001
- * New: Added the ability to define a maximum length for both the Facebook post text and description
1002
-
1003
- = 1.0 =
1004
- * Launch!
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Smash Balloon Social Post Feed ===
2
+ Contributors: smashballoon
3
+ Tags: Facebook, Facebook feed, Facebook posts, Facebook group, Facebook page
4
+ Requires at least: 4.1
5
+ Requires PHP: 5.6
6
+ Tested up to: 5.9
7
+ Stable tag: 4.1.2
8
+ License: GPLv2 or later
9
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
+
11
+ Formerly "Custom Facebook Feed". Display completely customizable Facebook feeds of a Facebook page or Group. Supports Facebook oEmbeds.
12
+
13
+ == Description ==
14
+
15
+ Display Facebook posts on your WordPress site. **Completely customizable**, **responsive**, **search engine crawlable**, and **GDPR compliant** Facebook feeds. Display **unlimited Facebook feeds** from your **Facebook page** or **Facebook Group**, and completely match the look and feel of your site with tons of customization options! Automatically powers any Facebook oEmbeds on your site.
16
+
17
+ *"The perfect Facebook plugin with amazing support! What else do you want? Get it!"* - [JoeJeffries](http://wordpress.org/support/topic/you-dont-already-have-this?facebook)
18
+
19
+ *"I honestly cannot recommend this Facebook plugin enough. The plugin itself is gorgeous and super customizable, and if you run into trouble...support will get you out of it. Five Stars across the board."* - [pamsavoybarnett](http://wordpress.org/support/topic/love-this-plugin-w-awesome-support?facebook)
20
+
21
+ **Please note:** This free Facebook plugin allows you to display text and links from Facebook posts. To display **photos, videos, comments,** and more, we offer a Pro version of the plugin. See the Pro Version section below for more information.
22
+
23
+ ### Facebook Feed Features
24
+ **NEW: Now Supports Facebook oEmbeds**
25
+ With WordPress removing support for Facebook oEmbeds, the plugin will now automatically power any Facebook embeds on your site preventing them from breaking. No developer app required.
26
+
27
+ **Super Simple to Set Up**
28
+ One of our main priorities has always been to make our Facebook plugin as easy as possible to setup and use. Get up and running in less less than 1 minute with our signature quick setup - no Facebook Developer App required.
29
+
30
+ **Display Feeds from Your Facebook Page or Facebook Group**
31
+ Use the plugin to display Facebook feeds from a Facebook page or Facebook group that you are an admin of.
32
+
33
+ **Completely Customizable**
34
+ By default the Facebook feed will adopt the styles of your WordPress theme, but your feeds can be completely customized to look however you like using our visual feed customizer - with tons of options to customize every part of your Facebook posts and feed.
35
+
36
+ **SEO Friendly**
37
+ The Facebook feed content is crawlable by search engines adding SEO value to your site, while other Facebook plugins embed the feed using iframes which are not crawlable.
38
+
39
+ **GDPR Compliant**
40
+ Automatically integrates with many of the popular GDPR cookie consent plugins and includes a 1-click easy GDPR setting.
41
+
42
+ **Responsive and Mobile Optimized**
43
+ Facebook feed layouts look great on any screen size and in any container width.
44
+
45
+ **Unlimited Feeds from Unlimited Different Facebook Pages**
46
+ We don't limit how many Facebook feeds you can display on your site. Just use the shortcode to embed as many Facebook feeds as you like into pages, posts or widgets anywhere on your site.
47
+
48
+ **Built for Speed**
49
+ Built-in caching means that your Facebook feeds load lightning fast. Set your own caching time - check for new Facebook posts every few seconds, minutes, hours or days. You decide.
50
+
51
+ **Like Box Widget and Visual Header**
52
+ Include the official Facebook Like Box widget at the top or bottom of your Facebook feed and display a beautiful visual header with your Facebook page or Facebook group cover photo, profile picture, bio, and number of likes.
53
+
54
+ **So Much More**
55
+ Show and hide certain parts of each Facebook post, choose whose posts to show in the feed, customize colors, font sizes and styles, the number of Facebook posts to display, set max text lengths, translate text, custom CSS, and much, much more.
56
+
57
+ ### Pro Version (Custom Facebook Feed Pro)
58
+
59
+ In order to maintain the free version of the Custom Facebook Feed plugin on an ongoing basis, and to provide quick and effective support for free, we offer a Pro version of the plugin. Custom Facebook Feed Pro allows you to display photos, videos, the number of likes, shares, reactions and comments for each Facebook post, choose from multiple layout options, filter Facebook posts by type or #hashtag/string, load more Facebook posts into your feed, and more. [Click here](https://smashballoon.com/differences-between-the-free-version-and-pro-version-of-the-custom-facebook-feed-plugin/ "Differences between free and Pro version of Custom Facebook Feed plugin") for a full list of all differences between the Custom Facebook Feed free and Pro versions.
60
+
61
+ * [Find out more about Custom Facebook Feed Pro](https://smashballoon.com/custom-facebook-feed/?utm_campaign=facebook-free&utm_source=readme&utm_medium=findout "Custom Facebook Feed Pro")
62
+ * [Try out the Custom Facebook Feed Pro demo](https://smashballoondemo.com/?utm_campaign=facebook-free&utm_source=readme&utm_medium=demo "Custom Facebook Feed Pro Demo").
63
+
64
+ ### Benefits of Displaying a Facebook Feed on Your Website
65
+
66
+ * **Increase social engagement** between you and your users, customers, or fans
67
+ * **Save time** by using the Custom Facebook Feed to generate dynamic, search engine crawlable content on your website
68
+ * **Get more likes** by displaying your Facebook content directly on your site
69
+ * **Improve your SEO** as all of that quality keyword-rich Facebook content from posts and Facebook comments is directly embedded into your website
70
+ * Display your Facebook content your way to perfectly match your website's style
71
+ * **No Coding Required** - choose from tons of built-in customization options to create a truly unique feed of your Facebook content.
72
+ * The Custom Facebook Feed plugin is **updated regularly** with new features, bug-fixes and Facebook API changes
73
+ * Support is quick and effective
74
+ * We're dedicated to providing the **most customizable**, **robust** and **well supported** Facebook feed plugin in the world!
75
+
76
+ ### How to use the Custom Facebook Feed plugin
77
+
78
+ Once you've installed the plugin there are only a few steps to get up and running:
79
+
80
+ 1) Use the button on the 'Facebook Feed' settings page to log into your Facebook account and authorize the plugin.
81
+ 2) Save the plugin settings and add the `[custom-facebook-feed]` shortcode to any page, post, or widget where you want the Facebook feed to be displayed.
82
+
83
+ That's it! You can then customize the Facebook feed as needed using the settings on the Facebook Feed > Customize page.
84
+
85
+ For full step-by-step setup directions with screenshots, see [here](https://smashballoon.com/custom-facebook-feed/docs/free/?utm_campaign=facebook-free-readme&utm_source=howto&utm_medium=setup "Custom Facebook Feed Free Setup Doc").
86
+
87
+ ### Requesting support
88
+
89
+ Customer support is a huge deal to us. We pride ourselves on always providing quick, effective, and courteous support to all of our users. If you're having an issue using the Custom Facebook Feed plugin then just let us know and we'll be there to help as soon as possible. You can either open a ticket on the support forum on [WordPress.org](https://wordpress.org/support/plugin/custom-facebook-feed/ "Custom Facebook Feed Free support forum"), or directly on the Custom Facebook Feed section of [our website](https://smashballoon.com/custom-facebook-feed/support/ "Custom Facebook Feed website support form"). We also have a large collection of help documentation and FAQs [on our website](https://smashballoon.com/custom-facebook-feed/faq/ "Custom Facebook Feed support FAQs") for all common issues related to the Custom Facebook Feed plugin.
90
+
91
+ ### Who's behind this plugin?
92
+
93
+ We're Smash Balloon; a fun-loving WordPress plugin development company birthed into existence in early 2013. We specialize in creating social media plugins that are not only intuitive and simple to use, but also designed to integrate seamlessly into your website and allow you to display your social media content in powerful and unique ways. Over 1 million awesome people have decided to actively use our free plugins, which is an incredible honor that we don't take lightly. This compels us to try to provide the quickest and most effective customer support that we can, blowing users away with the best customer service they've ever experienced.
94
+
95
+ To find out more about the team, see [here](https://smashballoon.com/about/?utm_campaign=facebook-free-readme&utm_source=who&utm_medium=about "Team Smash Balloon").
96
+
97
+ Check out our other free plugins for [Instagram](https://wordpress.org/plugins/instagram-feed "Instagram Feed free plugin"), [Twitter](https://wordpress.org/plugins/custom-twitter-feeds/ "Custom Twitter Feeds free plugin"), and [YouTube](https://wordpress.org/plugins/feeds-for-youtube/ "Feeds for YouTube free plugin").
98
+
99
+ == Installation ==
100
+
101
+ 1. Install the Custom Facebook Feed either via the WordPress plugin directory, or by uploading the files to your web server (in the `/wp-content/plugins/` directory).
102
+ 2. Activate the plugin through the 'Plugins' menu in WordPress.
103
+ 3. Navigate to the 'Facebook Feed' settings page to configure your feed.
104
+ 4. Use the shortcode `[custom-facebook-feed]` in your page, post or widget to display your feed.
105
+ 5. You can display multiple feeds of different Facebook pages by specifying a Page ID directly in the shortcode: `[custom-facebook-feed id=smashballoon num=5]`.
106
+
107
+ == Frequently Asked Questions ==
108
+
109
+ For a full list of FAQs and help with troubleshooting please visit the **[FAQ & Troubleshooting](https://smashballoon.com/custom-facebook-feed/faq/)** section of the Smash Balloon website
110
+
111
+ = Are there any limitations on which Facebook page or Facebook group feeds I can display? =
112
+
113
+ The Facebook feed you're trying to display has to be from a publicly accessible Facebook page or Facebook group. This means that you can't display the feed from your own personal Facebook profile. This is to do with Facebook's privacy policies. You can't display a non-public Facebook feed publicly.
114
+
115
+ If your Facebook page has any restrictions on it (age, for example) then it means that people have to be signed into Facebook in order to view your page. This isn't desirable for most Facebook pages as it means that it isn't accessible by people who don't have a Facebook account and that your Facebook page can't be crawled and indexed by search engines.
116
+
117
+ An easy way to determine whether your Facebook page is set to public is to sign out of your Facebook account and try to visit your page. If Facebook forces you to sign in to view your page then it isn't public. You can change your Facebook page to public in your Facebook page settings simply by removing any age or location restrictions you have on it ([screenshot](https://smashballoon.com/wp-content/uploads/2013/06/facebook-page-restrictions.png)), which will then allow the Custom Facebook Feed plugin to access and display your feed.
118
+
119
+ = Can I display feeds from multiple Facebook pages? =
120
+
121
+ Yep! Create as many feeds as you like from different Facebook pages. Just click "Add New" to create a new feed and then embed it anywhere on your site.
122
+
123
+ = Can I display feeds from a Facebook Group? =
124
+
125
+ Yep! First, authorize the plugin by using the big blue Facebook button on the "Facebook Feed" settings page and then select your Facebook group. You must be a member of the group and an admin of that Facebook group must have installed our app in the Facebook group settings. Directions for this are provided when you authorize the plugin via the Facebook Feed settings page.
126
+
127
+ = Can I display the feed from a personal Facebook profile? =
128
+
129
+ Due to Facebook's privacy policy you're not able to use the plugin to display all of your posts from a personal profile, only from a public page, as posts from a personal profile are protected for privacy reasons. You may have limited success in displaying certain posts from a personal profile but most posts are not able to be displayed.
130
+
131
+ If you're using the profile to represent a business, organization, product, public figure or the like, then we'd advise converting your profile to a page per [Facebook's recommendation](http://www.facebook.com/help/175644189234902/), as there are many advantages to using pages over profiles.
132
+
133
+ Once you've done so, the plugin will be able to retrieve and display all of your posts.
134
+
135
+ = Does the plugin work with Facebook oEmbeds? =
136
+
137
+ In version 2.5, support was added to allow the plugin to power your Facebook oEmbeds as official support for these is no longer available in WordPress core. Just connect your account on the oEmbeds settings page inside the plugin and the plugin will power all Facebook embeds on your site, old and new. No developer app or account required.
138
+
139
+ = Can I show photos and videos in my Custom Facebook feed? =
140
+
141
+ This free plugin only allows you to display text from your Facebook posts. To display photos and videos in your feed you would need to upgrade to the Pro version of the plugin. Try out a demo of the Pro version on the [Custom Facebook Feed website](https://smashballoon.com/custom-facebook-feed/demo/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=media "Custom Facebook Feed Demo"), and find out more about the Pro version [here](https://smashballoon.com/custom-facebook-feed/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=pro "Custom Facebook Feed Pro"). [Click here](https://smashballoon.com/differences-between-the-free-version-and-pro-version-of-the-custom-facebook-feed-plugin/ "Differences between free and Pro version of Custom Facebook Feed plugin") for a full list of all differences between the free version and Pro version.
142
+
143
+ = Can I show the comments, shares and likes associated with each Facebook post? =
144
+
145
+ This is a feature of the [Pro version of the plugin](https://smashballoon.com/custom-facebook-feed/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=comments "Custom Facebook Feed Pro"). To display comments, shares and likes you would need to upgrade from the free version to the Pro version.
146
+
147
+ = Is the content of my Custom Facebook Feed crawlable by search engines? =
148
+
149
+ It sure is. Unlike other Facebook plugins which use iframes to embed your Facebook feed into your page once it's loaded, the Custom Facebook Feed uses PHP to embed your Facebook feed content directly into your page. This adds dynamic, search engine crawlable content to your site.
150
+
151
+ = How do I embed the Custom Facebook Feed directly into a WordPress page template? =
152
+
153
+ You can embed your Facebook feed directly into a template file by using the WordPress [do_shortcode](http://codex.wordpress.org/Function_Reference/do_shortcode "WordPress.org do_shortcode reference") function: `<?php echo do_shortcode('[custom-facebook-feed]'); ?>`.
154
+
155
+ = My Facebook feed posts are not showing up, or all I can see is the Facebook Like box but no posts =
156
+
157
+ Please refer to [this FAQ](https://smashballoon.com/facebook-feed-doesnt-show-can-see-like-box-posts-gives/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=errors "My Facebook feed posts are not showing up, or all I can see is the Facebook Like box but no posts") for potential solutions on how to resolve this issue.
158
+
159
+ = Create a basic slideshow from your Facebook posts =
160
+
161
+ The Custom Facebook Feed plugin doesn't currently have a slideshow feature built into it, but it's possible to achieve a basic slideshow by doing the following:
162
+
163
+ 1) Add a class to the shortcode of the Facebook feed that you want to convert into a slideshow:
164
+
165
+ `[custom-facebook-feed class="slideshow"]`
166
+
167
+ 2) Set the number of posts to display to be the number of Facebook posts you want to include in the slideshow (10 for example). You can do this by using the `num` shortcode option:
168
+
169
+ `[custom-facebook-feed class="slideshow" num=10]`
170
+
171
+ 3) Add the following to the plugin's **Custom JavaScript** section, which is under the 'Misc' tab on the plugin's 'Customize' page. Please note, if you change the class option in the shortcode above to be anything but "slideshow" then make sure to change that on the first line of the snippet below:
172
+
173
+ `var shortcodeClass = 'slideshow',
174
+ cffSpeed = 5000,
175
+ $cff = $('#cff.'+ shortcodeClass);
176
+ $cffItem = $cff.find('.cff-item'),
177
+ cffNum = $cffItem.length,
178
+ cffCur = 0;
179
+ $cffItem.hide();
180
+ setTimeout(function(){ $cff.find('.cff-item').eq(0).show(); }, 200);
181
+ setInterval(function(){
182
+ $cff.find('.cff-item').eq(cffCur).fadeOut( "fast", function() {
183
+ if( cffCur == cffNum-1 ) cffCur = -1;
184
+ cffCur++;
185
+ $cff.find('.cff-item').eq(cffCur).fadeIn();
186
+ });
187
+ }, cffSpeed);`
188
+
189
+ 4) You can change the speed of the transition by editing the **cffSpeed = 5000** value at the top of the snippet. 5000 is equal to 5 seconds (5000ms).
190
+
191
+ = Changing the font in your Facebook feed and using Google Fonts =
192
+
193
+ Please refer to [this FAQ](https://smashballoon.com/changing-the-font-in-your-facebook-feed-using-google-fonts/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=fonts "Changing the font in your Facebook feed and using Google Fonts") for directions on how to use Google fonts in your Facebook posts.
194
+
195
+ = Can I display my Facebook posts horizontally or in multiple columns? =
196
+
197
+ Please refer to [this FAQ](https://smashballoon.com/can-display-facebook-post-horizontally-multiple-columns/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=horizontal "Can I display my Facebook posts horizontally or in multiple columns?") for directions on how to display your Facebook posts in multiple columns.
198
+
199
+ = My Facebook feed appears to have stopped updating / working =
200
+
201
+ If your Facebook feed doesn't appear to be showing the most recent Facebook posts then the most likely explanation is that the recent Facebook posts in your feed may be shared from a user's personal Facebook profile. Facebook's privacy policy doesn't allow posts that you share from personal Facebook profiles to be shared outside of Facebook as the posts don't technically belong to your Facebook page, they belong to the user who posted it to their personal Facebook profile. There's an example of a post shared from a user's personal Facebook profile [here](https://smashballoon.com/wp-content/uploads/2014/11/sharing-photo-facebook-profile.jpg "Example of Facebook post shared from personal Faceboo profile").
202
+
203
+ Please note, this isn't a limitation of our plugin, it's a restriction which Facebook places on it's content in order to protect the privacy of their Facebook users.
204
+
205
+ **Potential solutions**
206
+
207
+ * You could re-post the Facebook post to your page rather than sharing it to your Facebook page. If you re-post the content as your own post on your Facebook page then the content now originates from your Facebook page and will be displayed in the Facebook feed on your website.
208
+
209
+ * If you were to share a post from another Facebook page or public source, rather than sharing it from someone's personal Facebook profile, then it would show up in your feed outside of Facebook, but by default any posts that originate from a personal Facebook profile are protected by Facebook's privacy policy and is the private content of that Facebook profile owner.
210
+
211
+ = I'm receiving an error message when trying to display my Facebook posts =
212
+
213
+ Please refer to our [Error Message Reference page](https://smashballoon.com/custom-facebook-feed/docs/errors/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=errors "I'm receiving an error message when trying to display my Facebook posts") for information on how to resolve common error messages.
214
+
215
+ = Creating a Masonry grid layout from your Facebook posts =
216
+
217
+ Please refer to [this FAQ](https://smashballoon.com/creating-a-masonry-grid-layout-from-your-facebook-posts/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=masonry "Creating a Masonry grid layout from your Facebook posts") for directions on how to create a Masonry grid layout from your Facebook feed posts.
218
+
219
+ = How do I customize my Facebook feed? =
220
+
221
+ You can customize the Facebook feed by setting the options on the Customize page, which can be found under the Facebook Feed menu in your left hand WordPress admin menu. If you need even deeper customization than the built in options allow then you can add your own CSS to the plugin in the Custom CSS section under the Misc tab to further customize your Facebook feed.
222
+
223
+ You can also override these styles for individual Facebook feeds by setting options within the shortcode. For example, you can change the height of a specific Facebook feed like so: `[custom-facebook-feed height=500px]`.
224
+
225
+ = The Custom Facebook Feed shortcode options aren't working =
226
+
227
+ The most common causes of this are:
228
+
229
+ 1) There's HTML tags within the [custom-facebook-feed] shortcode which are preventing it from working correctly
230
+
231
+ If you copied and pasted the shortcode into the Visual editor on your WordPress page/post editor then it may have inadvertently included some HTML tags from the page that you copied it from. The easiest way to check this is to view the 'Text' view in your WordPress editor and see whether there are any stray HTML tags in the shortcode itself.
232
+
233
+ 2) The shortcode includes curly single quote characters
234
+
235
+ If your shortcode includes single quotes then check that they are the standard single quotes and not the curly kind.
236
+
237
+ 3) Typo in the shortcode option
238
+
239
+ Ensure that there aren't any spelling errors in the shortcode options that you're using and that the format is consistent with that demonstrated on the [Shortcode Options reference page](https://smashballoon.com/custom-facebook-feed/docs/shortcodes/?utm_campaign=facebook-free-readme&utm_source=faq&utm_medium=shortcode "The shortcode options aren't working").
240
+
241
+ = Facebook avatar pictures aren't showing up in my Facebook feed =
242
+
243
+ The most common reason for this is that an add-on or extension you have installed in your web browser is blocking the pictures being loaded from Facebook. Try checking to see whether you have any add-ons or extensions installed in your browser and, if so, try disabling them to see whether that solves the problem and displays the pictures from Facebook.
244
+
245
+ == Other Notes ==
246
+
247
+ = At Smash Balloon we have two goals: =
248
+
249
+ 1. Creating and maintaining the most useful, functional, customizable, robust and down-right awesomist Facebook feed plugin your website has ever seen.
250
+ 2. To provide the quickest, friendliest and most mind-blowingly amazing product support you have ever experienced.
251
+
252
+ == Screenshots ==
253
+
254
+ 1. By default the Facebook feed inherits your theme's default styles and the Facebook feed is completely responsive
255
+ 2. Completely customize the way your Facebook feed looks to perfectly match your site
256
+ 3. Use custom CSS to customize every part of the Facebook feed
257
+ 4. Display Facebook events in your Facebook feed
258
+ 5. Configuring the Custom Facebook Feed plugin
259
+ 6. General Facebook Feed options - Custom Facebook Feed Layout and Style page
260
+ 7. Facebook Feed Typography options - Custom Facebook Feed Layout and Style page
261
+ 8. Misc Facebook Feed options - Custom Facebook Feed Layout and Style page
262
+ 9. It's super easy to display your Facebook feed in any page or post
263
+
264
+ == Changelog ==
265
+ = 4.1.2 =
266
+ * Fix: Settings that only apply to page feeds were also being displayed in the feed customizer for group feeds.
267
+ * Fix: Like box position options were not available.
268
+ * Fix: For legacy feeds, the shortcode setting "account" was not working.
269
+ * Fix: Due to a change in Facebook video link format, oEmbeds would not work for some new versions of Facebook video links.
270
+ * Fix: Fixed the setting "Header outside scrollable area" not applying on the front-end of the feed.
271
+ * Fix: Fixed incorrect line spacing in the post content.
272
+ * Fix: Sharing a link in a post with no post text would result in the link being displayed twice.
273
+ * Fix: Tooltips in the settings pages were being cut off in certain circumstances due to a bug with the CSS code.
274
+ * Fix: When the "AJAX theme loading fix" setting was enabled it would result in the JavaScript file for the plugin not being added to the page successfully.
275
+ * Fix: Disabling the "View on Facebook link" option would also disable the share link.
276
+
277
+ = 4.1.1 =
278
+ * Fix: Updating from version 2.x to version 4.1 would not transfer legacy sources.
279
+ * Fix: Improved plugin hardening by removing unused admin pages.
280
+
281
+ = 4.1 =
282
+ * Tweak: The Facebook app used to connect groups has changed. If you are using a Facebook group feed, then please reconnect your group accounts using the new app when convenient to prevent any future issues. When reconnecting, follow the included directions on how to add the new app to your group settings.
283
+ * Tweak: All Facebook data is now encrypted in your WordPress database.
284
+ * Tweak: Access Tokens are no longer able to be viewed on the settings page.
285
+ * Fix: Manually connecting an account while on the "Settings" page would not work.
286
+ * Fix: Fixed a PHP error when a string was used for the cache time setting.
287
+
288
+ = 4.0.5 =
289
+ * Fix: Fixed an issue that was causing the "All Feeds" page to be inaccessible to some users.
290
+
291
+ = 4.0.4 =
292
+ * Fix: The call-to-action in the Like Box widget would not display properly at certain window widths in some browsers.
293
+ * Fix: If a feed name contained an apostrophe then additional slashes were being added each time settings were saved.
294
+ * Tweak: An alert bubble is added to the Facebook Feed menu item when there are new notifications available.
295
+
296
+ = 4.0.4 =
297
+ * Fix: The call-to-action in the Like Box widget would not display properly at certain window widths in some browsers.
298
+ * Fix: If a feed name contained an apostrophe then additional slashes were being added each time settings were saved.
299
+ * Tweak: An alert bubble is added to the Facebook Feed menu item when there are new notifications available.
300
+
301
+ = 4.0.3 =
302
+ * Fix: Added additional plugin hardening.
303
+
304
+ = 4.0.2 =
305
+ * Important: With this update, the Custom CSS and Custom JS settings have been deprecated. Please see below for details.
306
+ * Tweak: If any Custom CSS was being used in this field then it will be automatically moved into the native WordPress Customizer "Additional CSS" field instead and continue to work as normal.
307
+ * Tweak: If any Custom JavaScript was being used, then this update will prevent that JavaScript from working. There are [directions here](https://smashballoon.com/doc/moving-custom-javascript-code-out-of-our-plugins/) on how you can migrate this JavaScript into a specialized plugin instead.
308
+
309
+ = 4.0.1 =
310
+ * Fix: Fixed a compatibility issue with the Complianz Cookie Consent plugin integration.
311
+ * Fix: Removed the limit to the number of sources shown at one time when creating a feed.
312
+ * Fix: When using a narrow screen, modals inside the feed creator in the backend would be cut off.
313
+ * Fix: Fixed an issue where settings were not preserved even when using the preserve settings option and deleting the plugin.
314
+ * Fix: Improved security hardening.
315
+ * Fix: Fixed some options and tables not being removed from the WordPress database on uninstall.
316
+ * Fix: Locations of feeds sorted by source would not work if the source ID was not a number.
317
+ * Fix: Fixed PHP warnings when viewing dashboard notifications.
318
+ * Fix: Fixed locale setting causing a PHP warning if not set.
319
+
320
+ = 4.0 =
321
+ * Important: Minimum supported WordPress version has been raised from 3.0 to 4.1.
322
+ * New: Our biggest update ever! We've completely redesigned the plugin settings from head to toe to make it easier to create, manage, and customize your Facebook feeds.
323
+ * New: All your feeds are now displayed in one place on the "All Feeds" page. This shows a list of any existing (legacy) feeds and any new ones that you create. Note: If you updated from a version prior to v2.19 then you may need to view your feeds on your webpage so that the plugin can locate them and list them here.
324
+ * New: Easily edit individual feed settings for new feeds instead of cumbersome shortcode options.
325
+ * New: It's now much easier to create feeds. Just click "Add New", select your feed type, connect your account, and you're done!
326
+ * New: Brand new feed customizer. We've completely redesigned feed customization from the ground up, reorganizing the settings to make them easier to find.
327
+ * New: Live Feed Preview. You can now see changes you make to your feeds in real time, right in the settings page. Easily preview them on desktop, tablet, and mobile sizes.
328
+ * New: Elementor and WordPress widgets. We've added new Elementor and WordPress widgets to make it easier to embed your feeds.
329
+ * New: Color Scheme option. It's now easier than ever to change colors across your feed without needing to adjust individual color settings. Just set a color scheme to effortlessly change colors across your entire feed.
330
+ * New: You can now change the number of columns in your feed across desktop, tablet, and mobile.
331
+ * New: Easily import and export feed settings to make it simple to move feeds across sites.
332
+
333
+ = 2.19.3 =
334
+ * Fix: Fixed an issue with a blank screen sometimes appearing when trying to connect a Facebook account
335
+
336
+ = 2.19.2 =
337
+ * Tested with WordPress 5.8 update.
338
+ * Fix: PHP error "Uncaught Error: array_merge() does not accept unknown named parameters" when visiting the "About" page using PHP 8+.
339
+ * Fix: Fixed an issue with GDPR Cookie Consent by Web Toffee integration.
340
+
341
+ = 2.19.1 =
342
+ * New: In this update, the plugin will now use a persistent cache to store your Facebook group posts. This will help minimize any affects of a Facebook API change on May 25th which will only allow Facebook Groups to retrieve content from the past 90 days. The plugin will store your group posts in the persistent cache so that those posts can continue to be displayed beyond 90 days. This update will also make a one-time request to get the last 100 posts from your group and store those too, so that the affect of this change will be minimal for our users. Please [see here](https://smashballoon.com/doc/facebook-api-change-limits-groups-to-90-days/) for more information.
343
+ * Tweak: Updated jQuery methods in preparation for jQuery migrate removal in an upcoming WordPress core update.
344
+ * Tweak: Added option to enqueue CSS and JS files only when shortcode is on the page.
345
+ * Tweak: Added an reset error log button to the settings page.
346
+ * Tweak: Added an option to hide the call-to-action button in the post content.
347
+ * Fix: Changed how access tokens are retrieved to prevent conflict with the "Rank Math SEO" plugin when connecting an account.
348
+ * Fix: Fixed an error in the Feed Finder tool when removing accounts.
349
+ * Fix: Fixed an issue with duplicated records in the feed finder.
350
+ * Fix: Fixed "Unknown error" response with API story tag calls.
351
+
352
+ = 2.19 =
353
+ * New: Improved the error reporting system to make resolving issues easier.
354
+ * New: The locations of the Facebook feeds on your site will now be logged and listed on a single page for easier management. After this feature has been active for awhile, a "Feed Finder" link will appear under your connected accounts on the plugin Settings page which allows you to see a list of all feeds on your site along with their locations.
355
+ * Tweak: When clearing the plugin cache, the cache in the Litespeed plugin will now also be cleared if being used on the site.
356
+ * Fix: Fixed an issue with anonymous avatars not displaying correctly in group feeds.
357
+
358
+ = 2.18.3 =
359
+ * Tweak: Updated deprecated jQuery functions to prevent potential issues with newer versions.
360
+ * Tweak: Due to an API bug which Facebook hasn't resolved yet that affects buy/sell posts in groups, we have added a 'salesposts' shortcode option which will work around the issue until they fix it. If you are displaying posts from a group and receiving an "API Error 100" notice then adding `salesposts=true` to your shortcode and clearing the plugin cache should resolve the issue.
361
+ * Fix: When displaying the feed in multiple columns, clicking the "See more" link in the post text wouldn't correctly reconfigure the layout.
362
+ * Fix: Fixed a layout issue with the posts and Like Box which occurred when using a multi-column layout and applying feed padding.
363
+ * Fix: Fixed an issue with the background color not being applied correctly when set to be black.
364
+
365
+ = 2.18.2 =
366
+ * Tweak: Now displays a notice to logged-in admins which lets you know if the Like Box or header cover photo is being intentionally hidden due to the GDPR setting.
367
+ * Fix: Fixed an error which occurred when deleting the plugin.
368
+
369
+ = 2.18.1 =
370
+ * Fix: Fixed an issue with the integration with the Complianz plugin
371
+ * Fix: Resolved a PHP warning related to the preg_replace_callback function which was displayed under certain conditions
372
+ * Fix: Resolved a PHP deprecation notice related to the strpos function in PHP 7.3
373
+
374
+ = 2.18 =
375
+ * New: The plugin code has been completely refactored to improve performance and maintainability. If you experience any issues with this update then please open a support ticket [here](https://wordpress.org/support/plugin/custom-facebook-feed/) so that we can address it right away. Thank you!
376
+ * New: Integrations with popular GDPR cookie consent solutions added: Cookie Notice by dFactory, GDPR Cookie Consent by WebToffee, Cookiebot by Cybot A/S, Complianz by Really Simple Plugins, and Borlabs Cookie by Borlabs. See the GDPR setting in the following location for more information: Facebook Feed > Customize > Misc > GDPR.
377
+ * Note: The minimum supported PHP version has been increased to PHP version 5.6. If you are using a lower version then a notice will be displayed with a button to revert back to the previous version.
378
+
379
+ = 2.17.1 =
380
+ * Tweak: Added shortcode options for the "Before Date" and "After Date" settings, so that a custom text string can be displayed before and after the Facebook post date.
381
+ * Tweak: Minor frontend CSS improvements.
382
+ * Tweak: Added support for improved notices on the plugin settings page.
383
+ * Fix: Fixed an issue with the Facebook Like Box widget displaying an error if the width was set to a fractional pixel.
384
+
385
+ = 2.17 =
386
+ * New: Added support for Facebook oEmbeds. When you share a link to a Facebook post or video, WordPress automatically converts it into an embedded Facebook post for you (an "oEmbed"). However, on October 24, 2020, WordPress is discontinuing support for Facebook oEmbeds and so any existing or new embeds will no longer work. Don't worry though, we have your back! This update adds support for Facebook oEmbeds and so, after updating, the Custom Facebook Feed plugin will automatically keep your oEmbeds working. It will also power any new oEmbeds you post going forward.
387
+ * New: Install our other free social media plugins right from the Custom Facebook Feed settings menu. Use our Instagram, YouTube, and Twitter plugins to add even more social content to your website and help further engage your viewers and increase your followers.
388
+
389
+ = 2.16.1 =
390
+ * Fix: Added a workaround for a Facebook API bug which sometimes displays a button in a post with the text "No Button".
391
+ * Fix: Added an additional check when formatting the post text for the share link to prevent potential issues.
392
+ * Fix: Fixed a typo in the "restrictedpage" shortcode option.
393
+
394
+ = 2.16 =
395
+ * Important: Due to upcoming Facebook API changes on September 4, 2020, it will only be possible to display feeds from Facebook pages which you are an admin of. If a PPCA Error notice is displayed above your feed then this change will affect one or more of your feeds. For more information about this change, please [see here](https://smashballoon.com/facebook-api-changes-september-4-2020/).
396
+ * Tweak: Added the "pagetype" setting to the shortcode when clicking the "Add to another feed" button on the Settings page to ensure it's set correctly
397
+ * Fix: Fixed a minor compatibility issue with the upcoming WordPress 5.5 release
398
+ * Fix: Removed the see more/less links from post text when using the email share link.
399
+ * Fix: Removed a stray "section" closing tag which was causing a layout issue in some themes and inadvertently displayed the PPCA notice.
400
+
401
+ = 2.15.1 =
402
+ * Fix: The opt-in notice to help improve the plugin was not dismissing as expected for some sites due to the admin JavaScript file being cached by the browser.
403
+ * Fix: Disabled the "About Us" page plugin installation if using a version of WordPress earlier than 4.6.
404
+
405
+ = 2.15 =
406
+ * New: Added a new visual header option which displays the cover photo, avatar, page name, bio, and number of likes from your Facebook page at the top of your feeds. To enable the header, go to Facebook Feed > Customize > General > Header > Header Type > Visual.
407
+ * New: To help us improve the plugin we've added the ability to opt-in to usage tracking so that we can understand what features and settings are being used, and which features matter to you the most. This is disabled by default and will only be enabled if you explictly choose to opt in. If opted in, the plugin will send a report in the background once per week with your plugin settings and basic information about your website environment. No personal or sensitive data is collected (such as email addresses, Instagram account information, license keys, etc). To enable or disable usage tracking at a later date use the setting at: Instagram Feed > Customize > Advanced > Misc > Enable Usage Tracking. See [here](https://smashballoon.com/custom-facebook-feed/docs/usage-tracking/) for more information.
408
+ * New: Added a setting to display a different number of posts on mobile devices vs desktop. While on the configure tab, check the box "Show different number for mobile" to reveal the setting.
409
+ * New: Added capability "manage_custom_facebook_feed_options". Users with this capability can make changes to Facebook Feed settings and view admin only messages.
410
+ * New: Added a PHP filter "cff_post_text" to change the post text before outputting it in the feed HTML.
411
+
412
+ = 2.14.1 =
413
+ * Fix: Some connection error notices not clearing automatically.
414
+
415
+ = 2.14 =
416
+ * New: Email alerts for critical Facebook feed issues. If there's an issue with a Facebook 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: Facebook Feed > Customize > Misc > Feed Issue Email Report.
417
+ * New: Admin notifications for critical Facebook feed issues. If there is an error with a Facebook 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: Facebook Feed > Customize > Misc > Disable Admin Error Notice.
418
+ * 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.
419
+ * New: Added "About Us" page for those who would like to learn more about Smash Balloon and our other products. Go to Facebook Feed -> About Us in the dashboard.
420
+
421
+ = 2.13 =
422
+ * New: Added a "Custom Facebook Feed" Gutenberg block to use in the block editor, allowing you to easily add a Facebook feed to posts and pages.
423
+ * New: Added support for translations.
424
+
425
+ = 2.12.4 =
426
+ * Tested with upcoming WordPress 5.4 update.
427
+ * Tweak: Updated Facebook API calls
428
+ * Fix: Minor bug fixes
429
+
430
+ = 2.12.3 =
431
+ * Tweak: Added a text link in the Facebook Feed settings page footer to our new free [YouTube plugin](https://wordpress.org/plugins/feeds-for-youtube/)
432
+ * Tweak: When reconnecting a Facebook account on the settings page, if there's an issue with the existing Facebook access token then it'll be automatically replaced.
433
+ * Tweak: Added 'rel="noopener"' to all external links and added 'rel="noreferrer"' to all non-Facebook links. Thanks to Dev VIP for the suggestion.
434
+ * Fix: Fixed an issue with some Facebook call-to-action link URLs when a link protocol wasn't included
435
+ * Fix: Fixed a JavaScript conflict with the [Forminator](https://wordpress.org/plugins/forminator/) plugin
436
+ * Fix: Fixed duplicate Facebook post message displaying due to ellipsis HTML character
437
+ * Fix: If a shared Facebook link post had no post text then the link title was used causing it to be displayed twice in the Facebook post
438
+
439
+ = 2.12.2 =
440
+ * Fix: Fixed a JavaScript error in the admin caused by the previous update. Apologies for any inconvenience.
441
+
442
+ = 2.12.1 =
443
+ * Fix: Fixed an issue with Facebook post date timezones due to changes in the WordPress 5.3 update
444
+ * Fix: Fixed a rare issue where a JavaScript error would occur in the WordPress admin if a Facebook account was manually connected and the Facebook Page ID used was the full URL
445
+ * Fix: Fixed a JavaScript error in the admin when using older web browsers
446
+ * Tweak: Improved the manual account connection process
447
+ * Tweak: Some minor UI tweaks to match the new WordPress 5.3 UI style
448
+
449
+ = 2.12 =
450
+ * New: Added a backup cache so the Facebook feed will still display even if there's an error from the Facebook API.
451
+ * New: You can now easily manage multiple Facebook page or Facebook group accounts on the Facebook Feed plugin settings page allowing you to easily add them to other Facebook feeds on your site. When you connect a Facebook page or Facebook group you will now see it listed in the "Connected Accounts" section. You can add it to the primary Facebook feed or to another Facebook feed by using the new `account` shortcode option.
452
+ * Tweak: Added a filter which can be used to filter the Facebook API data when returned; `cff_filter_api_data`.
453
+ * Tweak: Updated Facebook API error messages
454
+ * Fix: Fixed an issue with some @tag links in Facebook post text due to a Facebook API change
455
+ * Fix: Fixed a rare issue with ellipsis chracter symbols in Facebook shared link descriptions causing the entire link description not to be displayed
456
+
457
+ = 2.11.1 =
458
+ * Tweak: Added the link source URL below the title for Facebook shared link posts
459
+ * Fix: Some themes would prevent the Facebook "Share" link from working successfully
460
+ * Fix: Fixed an issue with the "Feed Columns" setting not working if the minified versions of the Custom Facebook Feed plugin CSS/JavaScript files were being used
461
+
462
+ = 2.11 =
463
+ * New: Added a "Feed Columns" setting to allow you to display your Facebook feed in multiple columns. This can be found under the "General" tab on the "Customize" page, or by using the `cols` and `colsmobile` shortcode settings.
464
+ * New: Updated to use v4.0 of the Facebook API
465
+
466
+ = 2.10 =
467
+ * New: Facebook Groups are making their long-awaited return to the Custom Facebook Feed plugin! Just click the 'Log in and get my Facebook Access Token' button on the Facebook Feed Settings page and select 'Facebook Group'. Follow the prompts to connect your Facebook Group and display your feed.
468
+ * Fix: Fixed an issue where a lists of Facebook groups or pages wouldn't be displayed when retrieving a Facebook Access Token due to a server configuration issue
469
+ * Fix: Photo icons weren't showing for Facebook album posts
470
+ * Tweak: Now uses the Facebook `visitor_posts` endpoint to display visitor Facebook post feeds
471
+
472
+ = 2.9.1 =
473
+ * New: Added support for v3.3 of the Facebook API.
474
+ * Fix: The Facebook Access Token selection area was being cut off on small screens when a lot of Facebook pages were listed.
475
+
476
+ = 2.9 =
477
+ * New: You can now select between a "Regular" or "Boxed" Facebook post style. Settings for this can be found at: `Facebook Feed > Customize > Style Posts > Post Item`. A Box Shadow setting has been added to the "Boxed" Facebook post style.
478
+ * New: Added some settings to control the size and color of the Facebook shared link URLs and descriptions. These can be found at: `Facebook Feed > Customize > Style Posts > Shared Link Boxes`.
479
+ * New: Improved the Facebook Access Token retrieval process to make it more intuitive.
480
+ * Tweak: Facebook avatar images are now circular to match Facebook.
481
+ * Tweak: Animated the social media icons when the Facebook "Share" button is clicked.
482
+ * Tweak: Changed the way the Facebook Like Box loads to avoid a conflict with the Facebook Messenger widget. It no longer uses the Facebook JavaScript SDK.
483
+ * Tweak: Changed the elements used for icons from `<i>` to `<span>` to aid accessibility.
484
+ * Tweak: Removed the Google+ share option as the platform has been deprecated.
485
+ * Tweak: Removed the social media share widgets from the footer of the admin so that they're only loaded when the "Share the plugin" button is clicked.
486
+ * Fix: The Custom Facebook Feed plugin now uses the built-in WordPress HTTP API to get data from Facebook instead of making it's own cURL requests to the Facebook API.
487
+ * Fix: Fixed an issue where the Facebook avatars of people posting to the Facebook page weren't being displayed. Individual Facebook API requests for avatars have now been removed and bundled into the main Facebook API request.
488
+ * Fix: If the link to the Facebook profile of a visitor posting to your page is not available then remove the link from the Facebook avatar and author name.
489
+ * Fix: Fixed an accessibility error caused by the Facebook share icons being empty links.
490
+ * Fix: Removed the use of the ENT_HTML5 constant as it isn't supported in PHP 5.4.
491
+ * Fix: Fixed a rare issue with Facebook tags in Facebook post stories when the locale was set to be Greek.
492
+
493
+ = 2.8 =
494
+ * New: Added support for Facebook Notes in timeline feeds. If your Facebook timeline feed contains a note then the Custom Facebook Feed plugin will now get the content from the note and display it within the Facebook post.
495
+ * New: Facebook call-to-action buttons - such as "Learn More", "Shop Now", and "Message Facebook Page" - are now supported in your Facebook posts. These text strings can be translated using the settings at: Facebook Feed > Customize > Custom Text/Translate
496
+ * New: Added a setting that you can enable if you are displaying Facebook posts from a restricted (non-public) Facebook page. This will allow the Facebook page avatar to be displayed, and is located at: Facebook Feed > Customize > Misc > Misc Settings > Is Facebook Page restricted?
497
+ * New: If a Facebook visitor posts to your Facebook page then their avatar will now be displayed and cached for 6 months. To clear the cache of these Facebook avatar images use the button located at: Facebook Feed > Customize > Misc > Misc Settings > Clear Avatar Cache
498
+ * Tweak: The Timezone setting can now be set in the Custom Facebook Feed shortcode. Eg: `timezone="America/Los_Angeles"`
499
+ * Tweak: Minor UI changes to the Facebook Feed admin pages
500
+ * Tweak: Reduced some of the Facebook data in the System Info
501
+ * Fix: If you backdate a Facebook post it will now be ordered correctly in your Facebook feed
502
+ * Fix: Fixed a theme conflict related to the Color Picker in the Facebook Feed admin section
503
+ * Verified compatibility with WordPress 5.0 and Gutenburg
504
+
505
+ = 2.7.2 =
506
+ * **Important:** If you are displaying a Facebook feed from a Facebook page which you are *not* an admin of then it is advised that you obtain a new Facebook Access Token in the plugin using the "Log in and get my Access Token" button. This will switch you from using the "SlickRemix" app to using our own "Smash Balloon" Facebook app which was recently approved by Facebook, and will prevent you from experiencing any potential interuptions in your Facebook feeds going forward. This will be the final time this is required.
507
+ * Fix: Fixed a rare issue caused by some themes including the JavaScript file incorrectly
508
+
509
+ = 2.7.1 =
510
+ * Tweak: Made some adjustments to the Facebook Access Token login process
511
+
512
+ = 2.7 =
513
+ * New: Now easily get your own Facebook Access Token to avoid any Facebook connection issues. Simply click the blue Facebook "Log in and get my Facebook Access Token" button on the Custom Facebook Feed settings page and connect your Facebook account to get your token. The Facebook Access Token will work to get Facebook posts from ANY Facebook page. Thanks to our friends at SlickRemix for powering our new login and getting the Custom Facebook Feed plugin back up and running again!
514
+ * Tweak: Removed the minimum caching time if you're using your own Facebook Page Access Token
515
+
516
+ = 2.6.4 =
517
+ * **Important:** If you are displaying Facebook posts from a Facebook page that **you are an admin of** then it is now highly recommended that you retrieve your own Facebook Access Token for that Facebook page to avoid any Facebook API rate limit errors. Simply follow these [step-by-step](https://smashballoon.com/custom-facebook-feed/page-token/?utm_campaign=facebook-free-readme&utm_source=changelog&utm_medium=limits) instructions to obtain one.
518
+
519
+ = 2.6.3 =
520
+ * Fix: Fixed an issue where Facebook API errors were being cached
521
+
522
+ = 2.6.2 =
523
+ * Fix: Replaced all HTTP links in the Facebook feed with HTTPS
524
+ * Fix: Fixed a rare issue which affected the layout of other Facebook widgets
525
+ * Fix: Automatically remove slashes at the end of the Facebook Page ID as it caused an error
526
+ * Fix: The API response test in the System Info now only tests with your Facebook token if you have the "Use my own Facebook Access Token" setting enabled
527
+ * Fix: Fixed an issue which caused an occasional Facebook API rate limit error
528
+
529
+ = 2.6.1 =
530
+ * Fix: Removed an unnecessary Facebook API call
531
+ * Fix: Removed a PHP notice which was displayed under rare circumstances
532
+ * Fix: Minor Facebook bug fixes
533
+
534
+ = 2.6 =
535
+ * Fix: Fixed an issue connecting to the Facebook API caused by a recent Facebook platform change
536
+ * Tweak: Increased the minimum caching time to be 15 minutes to reduce Facebook API requests
537
+
538
+ = 2.5.2 =
539
+ * Important: Due to sudden changes in the Facebook API it is no longer possible to display Facebook posts from a Facebook Group. Please [see here](https://smashballoon.com/facebook-api-changes-april-4-2018/) for more information. We apologize for any frustration or inconvenience this has caused.
540
+ * Removed: Due to Facebook API restrictions, it is no longer possible to display information about a Facebook event when it is posted or shared to your Facebook Page timeline.
541
+
542
+ = 2.5.1 =
543
+ * Fix: Prevented a PHP notice which would be displayed under rare circumstances in the Facebook feed
544
+ * Fix: Replaced a function due to a deprecation in PHP 7.2
545
+
546
+ = 2.5 =
547
+ * New: Added the Facebook post story as part of the page/author name at the top of the Facebook post
548
+ * New: Added an option to use minified versions of the plugin CSS and JavaScript files: `Facebook Feed > Customize > Misc > Misc Settings > Minify CSS and JavaScript files`
549
+ * New: Added support for clearing the cache of major caching plugins when the Facebook feed cache is cleared. You can enable this by setting the following setting to be "Yes": `Facebook Feed > Customize > Misc > Misc Settings > Force cache to clear on interval`
550
+ * Tweak: Improved the text truncation so that it applies to both the Facebook post text and Facebook description as one block of text and accounts for HTML link tags
551
+ * Tweak: Added an "Auto" option to the Facebook Post Limit setting where it will automatically adjust the post limit based on the number of Facebook posts you choose to display in your Facebook feed
552
+ * Tweak: Reorganized the Custom Facebook Feed settings pages to be more intuitive
553
+ * Tweak: Added aria-hidden=true to icons to help improve accessibility
554
+ * Tweak: The icon font stylesheet handle has been renamed so it will only be loaded once if another of our social media plugins is installed
555
+ * Tweak: Facebook error messages are now only shown to admins
556
+ * Tweak: Added a setting to workaround a theme issue that affects the shortening of the Facebook post text. If you're experiencing an issue with the shortening of Facebook post text then you can enable the following setting: `Facebook Feed > Customize > Misc > Misc Settings > Fix Facebook text shortening issue`
557
+ * Fix: Included a fallback in case the Facebook author name and avatar aren't available in visitor Facebook posts
558
+ * Fix: Fixed an issue with apostrophes in the Facebook feed header not being escaped correctly
559
+ * Fix: Fixed an issue with the Facebook icons when Font Awesome 5 was added to a site
560
+ * Fix: Added support for the @[ID:page-name] Facebook tagging format
561
+ * Fix: The Facebook post description is now able to be displayed even if the Facebook post text is hidden
562
+
563
+ = 2.4.6 =
564
+ * Compatible with WordPress 4.8
565
+
566
+ = 2.4.5 =
567
+ * Tweak: Updated plugin links for new WordPress.org repo
568
+ * Fix: Minor bug fixes
569
+
570
+ = 2.4.4 =
571
+ * New: If your Facebook posts have been created in more than one language on Facebook then it's now possible to display each language by using the `locale` setting in the shortcode. Eg: English: `[custom-facebook-feed locale=en_EN]`, German: `[custom-facebook-feed locale=de_DE]`
572
+ * Fix: Fixed an issue with the order of Facebook group posts in some Facebook feeds
573
+
574
+ = 2.4.3 =
575
+ * Fix: Fixed a potential security vulnerability
576
+ * Tested with upcoming WordPress 4.6 update
577
+
578
+ = 2.4.2 =
579
+ * Tweak: Facebook group wall posts are now ordered based on recent activity, rather than by the date they were created, to better reflect the order on the Facebook Group wall.
580
+ * Tweak: The "5 hours ago" date text strings can now be translated directly in the shortcode if you're displaying different feeds in different languages. See the bottom of the [Shortcode Options table](https://smashballoon.com/custom-facebook-feed/docs/shortcodes/) for more information.
581
+ * Tweak: Created some specific [setup directions](https://smashballoon.com/custom-facebook-feed/docs/free/) for the free version.
582
+ * Fix: Minor bug fixes
583
+
584
+ = 2.4.1.2 =
585
+ * Updated to be compatible with Facebook API version 2.6
586
+
587
+ = 2.4.1.1 =
588
+ * Fix: Fixed a JavaScript error in the admin area when using WordPress 4.5
589
+
590
+ = 2.4.1 =
591
+ * New: If a post contains either a photo or video then an icon and link are now added to view it on Facebook. You can disable this by unchecking the "Media Link" option in the following location: Customize > Post Layout > Show/Hide. You can also remove it by using the "exclude" shortcode option: exclude="medialink". You can translate or change the text for this link on the "Custom Text / Translate" settings page.
592
+ * Tweak: Tested with WordPress 4.5
593
+ * Fix: Fixed an issue where the "Share" button in the plugin Like Box wasn't working correctly
594
+ * Fix: Added support for wp-config proxy settings. Credit to [@usrlocaldick](https://wordpress.org/support/topic/proxy-support-1) for the patch.
595
+
596
+ = 2.4 =
597
+ * New: Added a setting to allow you to use a fixed pixel width for the Facebook feed on desktop but switch to a 100% width responsive layout on mobile
598
+ * New: You can now click on the name of a setting on the admin pages to reveal the corresponding shortcode for that setting
599
+ * New: Added quick links to the top of the Customize settings pages to make it easier to find certain settings
600
+ * New: Added a setting to allow you to disable the default plugin text and link styles (Customize > Misc > Disable default styles)
601
+ * New: Added a setting which allows you to manually change the request method used to fetch Facebook posts which is necessary for some server setups
602
+ * Tweak: Updated the Font Awesome icon font to version 4.5
603
+ * Tweak: Moved the 'Show Header' setting to the 'General' tab on the Customize page
604
+ * Fix: Hashtag linking now works with all languages and character sets
605
+ * Fix: Fixed an error that occurred when trying to activate the Pro version with the free version still activated
606
+ * Fix: Fixed a rare error which occurred when the Facebook post contained no text and no story
607
+ * Fix: Fixed an issue when trying to display Facebook posts by only visitors to your Facebook page caused by a recent Facebook API update
608
+
609
+ = 2.3.10 =
610
+ * Fix: If you're experiencing an issue with your Facebook feed not automatically updating successfully then please update the plugin and enable the following setting: Custom Facebook Feed > Customize > Misc > Misc Settings > Force cache to clear on interval. If you set this setting to 'Yes' then it should force your plugin cache to clear either every hour, 12 hours, or 24 hours, depending on how often you have the plugin set to check Facebook for new posts.
611
+
612
+ = 2.3.9 =
613
+ * Fix: Fixed an issue caused by the recent Facebook API 2.5 update where the posts wouldn't display when using a brand new Access Token
614
+
615
+ = 2.3.8 =
616
+ * Fix: Fixed a positioning issue with the Facebook "Like Box / Page Plugin" widget caused by a recent Facebook update which was causing it to overlap on top of other content
617
+ * Fix: Hashtags containing Chinese characters are now linked
618
+ * Fix: Fixed a minor issue in shared link posts where the post text linked to the shared link URL instead of the post on Facebook
619
+ * Tweak: Added a timezone for Sydney, Australia
620
+
621
+ = 2.3.7 =
622
+ * Fix: Fixed an issue caused by the WordPress 4.3 update where feeds from very long page IDs wouldn't update correctly due to the cache not clearing when expired
623
+ * Fix: Removed specific encoding parameters from the cURL request method to prevent encoding issues on some servers
624
+
625
+ = 2.3.6 =
626
+ * New: Added a couple of new customization options for the Facebook Like Box/Page Plugin which allow you to select a small/slim header for the Like Box and hide the call-to-action button (if available)
627
+ * Fix: The plugin now works with Access Tokens which use the new recently-released version 2.4 of the Facebook API
628
+
629
+ = 2.3.5 =
630
+ * New: Replace the Facebook 'Like Box' with the new Facebook 'Page Plugin' as the Facebook Like Box will be deprecated on June 23rd, 2015. Settings can be found under the Misc tab on the plugin's Customize page.
631
+ * Fix: Hashtags which contain foreign characters are now correctly linked to the hashtag on Facebook
632
+ * Fix: Links within Facebook post descriptions weren't opening in a new tab
633
+ * Fix: Removed empty style tags from some elements
634
+ * Fix: The URLs used for the 'Share' icons are now encoded to prevent any HTML validation errors
635
+ * Fix: Shared Facebook posts now link to the new shared post and not to the original post that was shared on Facebook
636
+ * Fix: Corrected a minor issue with the plugin caching string
637
+ * Fix: Fixed a minor issue with tags in the Facebook post text when creating/sharing an event
638
+ * Tweak: Add some stricter CSS to some parts of the feed to prevent theme conflicts
639
+ * Tweak: Automatically link the Facebook event name to the event now rather than it having to be enabled on the plugin's 'Typography' settings page
640
+
641
+ = 2.3.4 =
642
+ * Fix: The Facebook event description is no longer shown twice in event posts. It was previously shown in the post text itself and in the Facebook event details.
643
+ * Fix: Fixed a rare bug which would occur if your Facebook page or Facebook group name contained a number
644
+
645
+ = 2.3.3 =
646
+ * Fix: Removed a PHP notice which was missed in the last update. Apologies for the two updates in quick succession.
647
+
648
+ = 2.3.2 =
649
+ * Fix: Fixed some stray PHP notices which were inadvertently introduced in a recent update
650
+ * Tweak: Added an option to not load the icon font included in the plugin
651
+
652
+ = 2.3.1 =
653
+ * New: Added a shortcode option to allow you to offset the number of posts to be shown. Eg: offset=2
654
+ * New: Added an email link to the sharing icons
655
+ * New: Added a setting to load a local copy of the icon font instead of the CDN version. This can be found at the bottom of the 'Misc' settings page.
656
+ * Tweak: Added a prefix to the IDs on all Facebook posts so that they can now be targeted via CSS
657
+ * Tweak: Added "nofollow" to all links by default. This can be disabled by using `nofollow=false` in the shortcode.
658
+ * Tweak: Added some missing settings to the System Info section
659
+ * Tweak: Added the 'Timezone' setting to the main Settings page so that it's easier to find
660
+ * Fix: Added a workaround for Facebook changing the event URLs in their API from absolute to relative URLs
661
+ * Fix: Facebook removed the 'relevant_count' parameter from their API so added a workaround to get the number of photos attached to a Facebook post
662
+ * Fix: Fixed a minor bug in the WP_Http fallback method
663
+ * Fix: Removed duplicate IDs on the share icons and replaced with classes
664
+ * Fix: Added a check to the file_get_contents data retrieval method to check whether the Open SSL wrapper is enabled
665
+ * Fix: The `eventtitlelink` shortcode option now works correctly
666
+ * Fix: Added a workaround for 'story_tags' which Facebook deprecated from their API
667
+ * Fix: Removed query string from the end of CSS and JavaScript file references and replaced it with the wp_enqueue_script 'ver' parameter instead
668
+
669
+ = 2.3 =
670
+ * Happy New Year!
671
+ * New: Added a share link which allows you to share posts to Facebook, Twitter, Google+ or LinkedIn. This can be disabled at the very bottom of the Typography tab, or by using `showsharelink=false` in the [custom-facebook-feed] shortcode.
672
+ * Tweak: Using your own Facebook Access Token in the plugin is still optional but is now recommended in order to protect yourself against future Access Token related issues
673
+ * Tweak: Increased the accuracy of the character count when links are included in the Facebook text
674
+ * Tweak: Improved the efficiency of the Facebook post caching
675
+ * Tweak: Replaced the rel attribute with the HTML5 data attribute when storing data on an element
676
+ * Tweak: Added HTTPS stream wrapper check to the System Info to aid in troubleshooting
677
+ * Tweak: Updated the plugin's icon font to the latest version
678
+ * Tweak: Added the Smash Balloon logo to the credit link which can be optionally displayed at the bottom of your feed. The setting for this is at the bottom of the Misc tab on the Customize page.
679
+ * Tweak: Added a shortcode option to only show the Smash Balloon credit link on certain feeds: `[custom-facebook-feed credit=true]`
680
+ * Fix: Fixed an issue with quotes being escaped in custom/translated text
681
+ * Fix: Display an error message if WPHTTP function isn't working correctly
682
+ * Fix: The `postbgcolor` shortcode option is now working correctly
683
+
684
+ = 2.2.1 =
685
+ * Fix: Fixed a minor JavaScript error which occurs if a Facebook post doesn't contain any text
686
+
687
+ = 2.2 =
688
+ * New: Added a text area to the Support tab which contains all of the plugin settings and site info for easier troubleshooting
689
+ * New: You can now set the number of Facebook posts to '0' if you just want to show the Facebook Like box widget and no posts
690
+ * Tweak: If the user doesn't add a unit to the width, height or padding then automatically add 'px'
691
+ * Tweak: Added social media sharing links to the bottom of the settings page and an option to add a credit link to the bottom of the feed
692
+ * Fix: Fixed an issue with Facebook hashtags not being linked when followed immediately by punctuation
693
+ * Fix: When displaying a shared link if the caption is the same as the link URL then don't display it
694
+ * Fix: Added a space before the feed header's style attribute to remove HTML validation error
695
+ * Fix: Prefixed the 'top' and 'bottom' classes used on the Facebook Like box to prevent CSS conflicts
696
+ * Fix: Fixed an issue with the link color not being applied to Facebook hashtag links
697
+
698
+ = 2.1.3 =
699
+ * Fix: Fixed an issue with the Facebook Access Token used in the plugin hitting its request limit
700
+
701
+ = 2.1.2 =
702
+ * Fix: Added in a missing closing div tag to the Facebook feed when an error is being displayed
703
+
704
+ = 2.1.1 =
705
+ * Fix: Fixed an issue with the date not being hidden when unchecked in the Show/Hide section
706
+ * Fix: Fixed an issue with the date not being displayed below event posts when the date position was set to 'At the bottom of the post'
707
+
708
+ = 2.1 =
709
+ * New: Added an option to preserve/save your plugin options after uninstalling the plugin. This makes manually updating the plugin much easier.
710
+ * New: Added a 'Settings' link to the plugin on the Plugins page
711
+ * New: Added a field to the Misc settings page which allows users to enter their Facebook App ID in order to remove a couple of browser console warnings caused by the Facebook Like box widget
712
+ * Tweak: Reduced the size of the author's Facebook profile picture from 50px to 40px to match Facebook
713
+ * Tweak: The link description text is now 12px in size by default
714
+ * Tweak: Added some default character limits to the post text and descriptions
715
+ * Tweak: If the post author is being hidden then change the default date position to be the bottom of the post
716
+ * Fix: The post author link is no longer the full width of the post and is only wrapped around the author image and name which helps prevent inadvertently clicking on the post author
717
+ * Fix: Added a fb-root element to the Like box to prevent a browser console warning
718
+ * Fix: Renamed the ShowError function to prevent conflicts
719
+ * Fix: Fixed an issue with the 'seconds' custom text string not being saved correctly
720
+ * Fix: When linking the post text to the Facebook post the correct text color is now applied
721
+
722
+ = 2.0.1 =
723
+ * Tweak: Improved error handling and added an [Error Message reference](https://smashballoon.com/custom-facebook-feed/docs/errors/) to the website
724
+
725
+ = 2.0 =
726
+ * New: Added an option to display the post date immediately below the author name - as it is on Facebook. This is now the default date position.
727
+ * New: Added options to add a background color and rounded corners to your posts
728
+ * New: If your Facebook event has an end date then it will now be displayed after the start date
729
+ * New: Hashtags in the post descriptions are now also linked
730
+ * New: Tested and approved for the upcoming WordPress 4.0 release
731
+ * Tweak: Moved the 'View on Facebook' link to the left side
732
+ * Tweak: Added error handling to improve user experience
733
+ * Tweak: If the Facebook API can't be reached by the plugin for some reason then it no longer caches the empty response and instead keeps trying to retrieve the posts from Facebook until it is successful
734
+ * Fix: Removed some redundant inline CSS used on the posts
735
+ * Fix: If there is a token in the 'Access Token' field but the 'Enter my own Access Token' box is unchecked then the plugin will no longer use it
736
+ * Fix: Added the trim() function to the 'Test connection to Facebook API' function to improve reliability
737
+ * Fix: Fixed an occasional JavaScript error which occurred when the post text was hidden
738
+
739
+ = 1.9.9.3 =
740
+ * New: Hashtags in link, photo and video descriptions are now also linked
741
+ * Fix: Fixed an issue with hashtags being linked when the post text is also linked, which interfered with the text formatting
742
+
743
+ = 1.9.9.2 =
744
+ * Fix: Removed a couple of stray PHP notices
745
+
746
+ = 1.9.9.1 =
747
+ * Fix: Fixed an occasional issue with hashtags in inline CSS inadvertently being linked
748
+
749
+ = 1.9.9 =
750
+ * New: Hashtags in your posts are now linked to the hashtag search on Facebook. This can be disabled in the 'Post Text' section on the Typography settings page.
751
+ * New: Added a Facebook icon to the Custom Facebook Feed admin menu
752
+ * Fix: Corrected the left side margin on the "Like" box so that it aligns correctly with posts
753
+
754
+ = 1.9.8.1 =
755
+ * Fix: Fixed an admin JavaScript error introduced by the last update
756
+
757
+ = 1.9.8 =
758
+ * Tweak: The Access Token field is now hidden by default and is revealed by a checkbox
759
+ * Fix: Fixed an issue with link colors not being applied to all links
760
+ * Fix: Removed the link box container from posts which contain non-youtube/vimeo links
761
+ * Fix: Links which don't contain a 'http://' protocol are now linked correctly
762
+
763
+ = 1.9.7 =
764
+ * Fix: Fixed an issue with a generic function name which was occasionally causing an error
765
+
766
+ = 1.9.6 =
767
+ * Tweak: Added an HTML wrapper element around the feed
768
+
769
+ = 1.9.5 =
770
+ * New: Added an option to set a height on the Like box. This allows you to display more faces of your fans if you have that option selected.
771
+ * Tweak: Added a few stricter CSS styles to help minimize the chance of theme stylesheets distorting post formatting
772
+ * Tweak: Added a span to the header text to allow CSS to be applied
773
+ * Fix: Fixed a bug with the post author text bumping down below the author image in the Firefox browser
774
+ * Fix: Corrected a bug which caused some links not to have the color applied
775
+ * Fix: Fixed a float issue in Firefox which sometimes caused the feed to be pushed off the page
776
+
777
+ = 1.9.4 =
778
+ * New: Added background and border styling options to shared links
779
+ * Tweak: Reduced the clickable area of the post author
780
+ * Tweak: Added a 'Customize' tab to the Settings page
781
+ * Fix: Fixed an issue with post tag linking not working correctly in some languages
782
+ * Fix: Fixed an issue with line breaks not being respected in IE8
783
+
784
+ = 1.9.2 =
785
+ * Fix: Added title and alt attributes to the post author's Facebook profile picture
786
+ * Fix: Improved the reliability of the post tag linking
787
+ * Fix: Fixed an issue with HTML characters not rendering correctly when linking the post text
788
+ * Fix: Improved the reliability of the CSS clearing method used on the feed container
789
+ * Compatible with WordPress 3.9
790
+
791
+ = 1.9.1 =
792
+ * Fix: Fixed an issue with the 'textlink' shortcode option
793
+ * Fix: Fixed an bug with post text sometimes being duplicated when linked
794
+ * Fix: Removed error_reporting(0);
795
+
796
+ = 1.9.0 =
797
+ * New: Added the ability to change the text size and color of the post author
798
+ * New: Define the format, size and color of shared link titles
799
+ * New: You can now define the color of the links in your post text, descriptions and Facebook events
800
+ * Tweak: Moved the Feed Header options to the Typography page
801
+ * Tweak: Moved the Ajax setting to the Misc page
802
+ * Tweak: Now removes any query strings attached to the Facebook Page ID
803
+ * Fix: Fixed an issue with some themes causing the clear element to prevent links being clickable
804
+ * Fix: Some minor bug fixes
805
+
806
+ = 1.8.2.3 =
807
+ * New: Now supports Facebook tags - creates links when using the @ symbol to tag other people or Facebook pages in your posts
808
+ * Tweak: Changed the method used for link replacement in posts
809
+ * Fix: Fixed issue with php include
810
+
811
+ = 1.8.1 =
812
+ * New: Added an 'exclude' shortcode option to allow you to easily exclude specific parts of the post
813
+ * New: Timeline events are now cached to help reduce page load time
814
+ * New: Added an option for when the WordPress theme is loading the feed via AJAX so that the JavaScript runs after the feed has been loaded into the page
815
+ * Tweak: Changed author images back to loading via PHP rather than JavaScript due to issues with certain WordPress themes
816
+ * Fix: Reset the timezone after the shortcode has run
817
+ * Fix: Fixed an issue with the shared link descriptions not being hidden when specified
818
+ * Fix: Fixed a rare issue with the 'textlink' shortcode option
819
+ * Fix: Use a fallback JSON string if unable to find the cached version in the database
820
+
821
+ = 1.8.0 =
822
+ * New: Added a built-in color picker
823
+ * New: Added class to posts based on the author to allow for independent styling
824
+ * Tweak: Now loads the author's Facebook profile picture in using JavaScript to help speed up load times
825
+ * Tweak: Now automatically set the Facebook post limit based on the number of Facebook posts to be displayed
826
+ * Tweak: Core improvements to the way Facebook posts are output
827
+ * Tweak: Changed 'Layout & Style' page name to 'Customize'
828
+ * Tweak: Moved the Support information to a tab on the Settings page
829
+ * Tweak: Improved the 'Test connection to Facebook API' function
830
+ * Fix: Encode Facebook URLs so that they pass HTML validation
831
+ * Fix: Fixed an issue with Facebook post captions not displaying under some circumstances
832
+ * Fix: More robust method for stripping the URL when a user enters Facebook page URL instead of their Facebook Page ID
833
+
834
+ = 1.7.2 =
835
+ * Tweak: Moved the 'Show post author' option from the General settings tab to the Post Layout tab
836
+ * Tweak: Added the ability to show or hide the author to the 'include' shortcode option
837
+ * Fix: Added CSS box-sizing property to feed header so that padding doesn't increase its width
838
+ * Fix: Fixed showheader=false and headeroutside=false shortcode options
839
+ * Fix: Now allows users to enter their Facebook page URL as their Facebook Page ID
840
+
841
+ = 1.7.0 =
842
+ * New: Added ability to add a customizable header to your feed
843
+ * New: Added a Custom JavaScript section to allow you to add your own JS or jQuery functionality to the feed
844
+ * New: Added a 'Custom Text / Translate' tab to house all customizable text
845
+ * New: You can now choose to show posts only by other people on your Facebook page
846
+ * New: Set your timezone so that dates/times are displayed in your local time
847
+ * New: When a Facebook post contains a link to multiple images it now states the number of photos after the post text and links to the Facebook album
848
+ * Tweak: Plugin now detects whether the page is using SSL and pulls https resources
849
+ * Tweak: Added a button to test the connection to Facebook's API for easier troubleshooting
850
+ * Fix: Now using HTML encoding to parse any raw HTML tags in the Facebook post text or descriptions
851
+ * Fix: Added a protocol to the beginning of links which don't include one
852
+ * Fix: Fixed date width issue in IE7
853
+ * Fix: Removed stray PHP notices
854
+ * Fix: Added a space between the Like Box attributes
855
+
856
+ = 1.6.8.2 =
857
+ * Fix: Fixed a CSS bug in Firefox which was causing the page author name to bump down below the avatar
858
+
859
+ = 1.6.8.1 =
860
+ * Tweak: Moved 'View on Facebook' link up to be level with the date rather than on the line below it
861
+ * Fix: Don't show the caption when it is the same as the Facebook post text
862
+ * Fix: Fixed issue with enqueueing JavaScript file
863
+
864
+ = 1.6.8 =
865
+ * New: Added option to remove border from the Facebook Like box when showing faces
866
+ * New: Set Facebook "Like" box text color to either blue or white
867
+ * Tweak: Moved descripion below video or link title and added link source
868
+ * Tweak: Added ability to manually translate the '2 weeks ago' text
869
+ * Tweak: Replaced 'View Link' with 'View on Facebook' so that shared links now link to the Facebook post
870
+ * Tweak: Facebook "Like" box is now responsive
871
+ * Tweak: Displays Facebook post caption if no description is available
872
+ * Tweak: Vertically center multi-line author names rather than bumping them down below the Facebook profile picture
873
+ * Tweak: Checks whether the Access Token is inputted in the correct format
874
+ * Fix: Fixed bug in the 'Show posts on my page by others' option
875
+ * Fix: If displaying a Facebook group then automatically hides the Facebook "Like" box
876
+ * Fix: 'others=false' shortcode option now working correctly
877
+ * Fix: Strip any white space characters from beginning or end of Access Token and Facebook Page ID
878
+
879
+ = 1.6.7.1 =
880
+ * Fix: Fixed a bug in 1.6.7 which was causing an issue displaying the Facebook feed in some circumstances
881
+
882
+ = 1.6.7 =
883
+ * New: Your Facebook feed can now be completely displayed in any language - added i18n support for date translation
884
+ * Tweak: Improved documentation within the plugin
885
+ * Tweak: Changed order of methods used to retrieve Facebook feed data
886
+
887
+ = 1.6.6.3 =
888
+ * New: Added support for Facebook group events
889
+
890
+ = 1.6.6.1 =
891
+ * Fix: Resolved jQuery UI draggable bug which was causing issues with drag and drop
892
+
893
+ = 1.6.6 =
894
+ * New: Now works with Facebook groups
895
+ * Fix: Fixed an issue with the 'Show posts by others' option not working correctly in the previous version
896
+
897
+ = 1.6.4 =
898
+ * New: Added localization support. Full support for various languages coming soon
899
+ * New: Added CSS classes to different Facebook post types to allow for different styling based on post type
900
+ * New: Option to link statuses to either the status post itself or the directly to the Facebook page/timeline
901
+ * New: Added option to add thumbnail faces of fans to the Facebook Like box and define a width
902
+ * Tweak: Added separate classes to 'View on Facebook' and 'View Link' links so that they can be targeted with CSS
903
+ * Tweak: Prefixed every CSS class to prevent styling conflicts with theme stylesheets. Please note that if you used custom CSS to style parts of the feed that the CSS classes are now prefixed with 'cff-' to prevent theme conflicts. Eg. '.more' is now '.cff-more'.
904
+
905
+ = 1.6.3 =
906
+ * New: Added support for Facebook 'Offers'
907
+ * Fix: Fixed an issue with the 'others' shortcode option not working correctly
908
+ * Fix: Prefixed the 'clear' class to prevent conflicts
909
+
910
+ = 1.6.2 =
911
+ * New: Post caching now temporarily stores your Facebook post data in your WordPress database to allow for super quick load times
912
+ * New: Define your own caching time. Check for new Facebook posts every few seconds, minutes, hours or days. You decide.
913
+ * New: Define your own custom text for the 'See More' and 'See Less' buttons
914
+ * New: Add your own CSS class to your Custom Facebook Feeds
915
+ * New: Define a Facebook post limit which is higher or lower than the default 25
916
+ * New: Include the Facebook Like box inside or outside of the Facebook feed's container
917
+ * New: Customize the Facebook event date independently
918
+ * New: Improved layout of admin pages for easier navigation and customization
919
+ * Fix: Provided a fix for the Facebook API duplicate post bug
920
+ * Fix: Fixed bug which ocurred when multiple Facebook feeds are displayed on the same page with different text lengths defined
921
+
922
+ = 1.5.2 =
923
+ * Fix: Fixed JavaScript error in previous update
924
+
925
+ = 1.5.1 =
926
+ * New: Added a 'See More' link to expand any text which is longer than the character limit defined
927
+ * New: Choose to show Facebook posts by other people in your feed
928
+ * New: Option to show the post author's Facebook profile picture and name above each post
929
+ * New: Added options to customize and format the Facebook post date
930
+ * New: Add your own text before and after the date and in place of the 'View on Facebook' and 'View Link' text links
931
+ * New: Specify the format of the Facebook Event date
932
+ * Tweak: Default date format is less specific and better mimics Facebook's - credit Mark Bebbington
933
+ * Tweak: Changed the layout of the Typography section to allow for the additional options
934
+ * Fix: When a Facebook photo album is shared it now links to the album itself on Facebook and not just the cover photo
935
+ * Fix: Fixed issue with hyperlinks in post text which don't have a space before them not being converted to links
936
+
937
+ = 1.4.8 =
938
+ * Minor fixes
939
+
940
+ = 1.4.7 =
941
+ * Tweak: Added links to statuses which link to the Facebook page
942
+ * Tweak: Added classes to Facebook event date, location and description to allow custom styling
943
+ * Tweak: Removed 'Where' and 'When' text from Facebook events and made bold instead
944
+
945
+ = 1.4.6 =
946
+ * Fix: Fixed 'num' option in shortcode
947
+
948
+ = 1.4.4 =
949
+ * New: Added more shortcode options
950
+ * Minor tweaks
951
+
952
+ = 1.4.2 =
953
+ * New: Add your own custom CSS to allow for even deeper customization
954
+ * New: Optionally link your post text to the Facebook post
955
+ * New: Optionally link your event title to the Facebook event page
956
+ * Some minor modifications
957
+
958
+ = 1.4.1 =
959
+ * Fix: Set all parts of the Facebook feed to display by default on activation
960
+
961
+ = 1.4.0 =
962
+ * Major Update!
963
+ * New: Loads of new customization options for your Custom Facebook Feed
964
+ * New: Define Facebook feed width, height, padding and background color
965
+ * New: Change the font-size, font-weight and color of the Facebook post text, description, date, links and event details
966
+ * New: Choose whether to show or hide certain parts of the Facebook posts
967
+ * New: Select whether the Facebook Like box is shown at the top of bottom of the Facebook feed
968
+ * New: Choose Facebook Like box background color
969
+
970
+ = 1.3.6 =
971
+ * Minor modifications
972
+
973
+ = 1.3.5 =
974
+ * New: Shared Facebook events now display event details (name, location, date/time, description) directly in the Facebook feed
975
+
976
+ = 1.3.4 =
977
+ * New: Email addresses within the Facebook post text are now hyperlinked
978
+ * Fix: Links beginning with 'www' are now also hyperlinked
979
+
980
+ = 1.3.3 =
981
+ * New: Added support for Facebook events - display the Facebook event details (name, location, date/time, description) directly in the Facebook feed
982
+ * Fix: Links within the Facebook post text are now hyperlinked
983
+ * Tweak: Added additional methods for retrieving Facebook feed data
984
+
985
+ = 1.3.2 =
986
+ * Fix: Now using the built-in WordPress HTTP API to get retrieve the Facebook data
987
+
988
+ = 1.3.1 =
989
+ * Fix: Fixed issue with certain Facebook statuses not displaying correctly
990
+
991
+ = 1.3.0 =
992
+ * Tweak: If 'Number of Posts to show' is not set then default to 10 Facebook posts
993
+
994
+ = 1.2.9 =
995
+ * Fix: Now using cURL instead of file_get_contents to prevent issues with php.ini configuration on some web servers
996
+
997
+ = 1.2.8 =
998
+ * Fix: Fixed bug in specifying the number of Facebook posts to display
999
+
1000
+ = 1.2.7 =
1001
+ * Tweak: Prevented likes and comments by the page author showing up in the Facebook feed
1002
+
1003
+ = 1.2.6 =
1004
+ * Tweak: Added help link to Custom Facebook Feed settings page
1005
+
1006
+ = 1.2.5 =
1007
+ * Fix: Added clear fix
1008
+
1009
+ = 1.2.1 =
1010
+ * Fix: Minor bug fixes
1011
+
1012
+ = 1.2 =
1013
+ * New: Added the ability to define a maximum length for both the Facebook post text and description
1014
+
1015
+ = 1.0 =
1016
+ * Launch!
admin/addon-functions.php CHANGED
@@ -1,209 +1,209 @@
1
- <?php
2
- if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
3
-
4
- /**
5
- * Deactivate addon.
6
- *
7
- * @since 1.0.0
8
- */
9
- function cff_deactivate_addon() {
10
-
11
- // Run a security check.
12
- check_ajax_referer( 'cff-admin', 'nonce' );
13
-
14
- // Check for permissions.
15
- if ( ! current_user_can( 'deactivate_plugins' ) ) {
16
- wp_send_json_error();
17
- }
18
-
19
- $type = 'addon';
20
- if ( ! empty( $_POST['type'] ) ) {
21
- $type = sanitize_key( wp_unslash( $_POST['type'] ) );
22
- }
23
-
24
- if ( isset( $_POST['plugin'] ) ) {
25
- deactivate_plugins( wp_unslash( $_POST['plugin'] ) );
26
-
27
- if ( 'plugin' === $type ) {
28
- wp_send_json_success( esc_html__( 'Plugin deactivated.', 'custom-facebook-feed' ) );
29
- } else {
30
- wp_send_json_success( esc_html__( 'Addon deactivated.', 'custom-facebook-feed' ) );
31
- }
32
- }
33
-
34
- wp_send_json_error( esc_html__( 'Could not deactivate the addon. Please deactivate from the Plugins page.', 'custom-facebook-feed' ) );
35
- }
36
- add_action( 'wp_ajax_cff_deactivate_addon', 'cff_deactivate_addon' );
37
-
38
- /**
39
- * Activate addon.
40
- *
41
- * @since 1.0.0
42
- */
43
- function cff_activate_addon() {
44
-
45
- // Run a security check.
46
- check_ajax_referer( 'cff-admin', 'nonce' );
47
-
48
- // Check for permissions.
49
- if ( ! current_user_can( 'activate_plugins' ) ) {
50
- wp_send_json_error();
51
- }
52
-
53
- if ( isset( $_POST['plugin'] ) ) {
54
-
55
- $type = 'addon';
56
- if ( ! empty( $_POST['type'] ) ) {
57
- $type = sanitize_key( wp_unslash( $_POST['type'] ) );
58
- }
59
-
60
- $activate = activate_plugins( $_POST['plugin'] );
61
-
62
- if ( ! is_wp_error( $activate ) ) {
63
- if ( 'plugin' === $type ) {
64
- wp_send_json_success( esc_html__( 'Plugin activated.', 'custom-facebook-feed' ) );
65
- } else {
66
- wp_send_json_success( esc_html__( 'Addon activated.', 'custom-facebook-feed' ) );
67
- }
68
- }
69
- }
70
-
71
- wp_send_json_error( esc_html__( 'Could not activate addon. Please activate from the Plugins page.', 'custom-facebook-feed' ) );
72
- }
73
- add_action( 'wp_ajax_cff_activate_addon', 'cff_activate_addon' );
74
-
75
- /**
76
- * Install addon.
77
- *
78
- * @since 1.0.0
79
- */
80
- function cff_install_addon() {
81
-
82
- // Run a security check.
83
- check_ajax_referer( 'cff-admin', 'nonce' );
84
-
85
- // Check for permissions.
86
- if ( ! current_user_can( 'install_plugins' ) ) {
87
- wp_send_json_error();
88
- }
89
-
90
- $error = esc_html__( 'Could not install addon. Please download from smashballoon.com and install manually.', 'custom-facebook-feed' );
91
-
92
- if ( empty( $_POST['plugin'] ) ) {
93
- wp_send_json_error( $error );
94
- }
95
-
96
- // Set the current screen to avoid undefined notices.
97
- set_current_screen( 'cff-about' );
98
-
99
- // Prepare variables.
100
- $url = esc_url_raw(
101
- add_query_arg(
102
- array(
103
- 'page' => 'cff-about',
104
- ),
105
- admin_url( 'admin.php' )
106
- )
107
- );
108
-
109
- $creds = request_filesystem_credentials( $url, '', false, false, null );
110
-
111
- // Check for file system permissions.
112
- if ( false === $creds ) {
113
- wp_send_json_error( $error );
114
- }
115
-
116
- if ( ! WP_Filesystem( $creds ) ) {
117
- wp_send_json_error( $error );
118
- }
119
-
120
- /*
121
- * We do not need any extra credentials if we have gotten this far, so let's install the plugin.
122
- */
123
-
124
- #require_once CFF_PLUGIN_DIR . 'admin/class-install-skin.php';
125
-
126
- // Do not allow WordPress to search/download translations, as this will break JS output.
127
- remove_action( 'upgrader_process_complete', array( 'Language_Pack_Upgrader', 'async_upgrade' ), 20 );
128
-
129
- // Create the plugin upgrader with our custom skin.
130
- $installer = new CustomFacebookFeed\Helpers\PluginSilentUpgrader( new CustomFacebookFeed\Admin\CFF_Install_Skin() );
131
-
132
- // Error check.
133
- if ( ! method_exists( $installer, 'install' ) || empty( $_POST['plugin'] ) ) {
134
- wp_send_json_error( $error );
135
- }
136
-
137
- $installer->install( $_POST['plugin'] ); // phpcs:ignore
138
-
139
- // Flush the cache and return the newly installed plugin basename.
140
- wp_cache_flush();
141
-
142
- $plugin_basename = $installer->plugin_info();
143
-
144
- if ( $plugin_basename ) {
145
-
146
- $type = 'addon';
147
- if ( ! empty( $_POST['type'] ) ) {
148
- $type = sanitize_key( $_POST['type'] );
149
- }
150
-
151
- // Activate the plugin silently.
152
- $activated = activate_plugin( $plugin_basename );
153
-
154
- if ( ! is_wp_error( $activated ) ) {
155
- wp_send_json_success(
156
- array(
157
- 'msg' => 'plugin' === $type ? esc_html__( 'Plugin installed & activated.', 'custom-facebook-feed' ) : esc_html__( 'Addon installed & activated.', 'custom-facebook-feed' ),
158
- 'is_activated' => true,
159
- 'basename' => $plugin_basename,
160
- )
161
- );
162
- } else {
163
- wp_send_json_success(
164
- array(
165
- 'msg' => 'plugin' === $type ? esc_html__( 'Plugin installed.', 'custom-facebook-feed' ) : esc_html__( 'Addon installed.', 'custom-facebook-feed' ),
166
- 'is_activated' => false,
167
- 'basename' => $plugin_basename,
168
- )
169
- );
170
- }
171
- }
172
-
173
- wp_send_json_error( $error );
174
- }
175
-
176
-
177
- add_action( 'wp_ajax_cff_install_addon', 'cff_install_addon' );
178
-
179
-
180
- /**
181
- * Smash Balloon Encrypt or decrypt
182
- *
183
- * @param string @action
184
- * @param string @string
185
- *
186
- * @return string $output
187
- */
188
- function sb_encrypt_decrypt( $action, $string ) {
189
- $output = false;
190
-
191
- $encrypt_method = "AES-256-CBC";
192
- $secret_key = 'SMA$H.BA[[OON#23121';
193
- $secret_iv = '1231394873342102221';
194
-
195
- // hash
196
- $key = hash( 'sha256', $secret_key );
197
-
198
- // iv - encrypt method AES-256-CBC expects 16 bytes - else you will get a warning
199
- $iv = substr( hash( 'sha256', $secret_iv ), 0, 16 );
200
-
201
- if ( $action == 'encrypt' ) {
202
- $output = openssl_encrypt( $string, $encrypt_method, $key, 0, $iv );
203
- $output = base64_encode( $output );
204
- } else if ( $action == 'decrypt' ) {
205
- $output = openssl_decrypt( base64_decode( $string ), $encrypt_method, $key, 0, $iv );
206
- }
207
-
208
- return $output;
209
  }
1
+ <?php
2
+ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
3
+
4
+ /**
5
+ * Deactivate addon.
6
+ *
7
+ * @since 1.0.0
8
+ */
9
+ function cff_deactivate_addon() {
10
+
11
+ // Run a security check.
12
+ check_ajax_referer( 'cff-admin', 'nonce' );
13
+
14
+ // Check for permissions.
15
+ if ( ! current_user_can( 'deactivate_plugins' ) ) {
16
+ wp_send_json_error();
17
+ }
18
+
19
+ $type = 'addon';
20
+ if ( ! empty( $_POST['type'] ) ) {
21
+ $type = sanitize_key( wp_unslash( $_POST['type'] ) );
22
+ }
23
+
24
+ if ( isset( $_POST['plugin'] ) ) {
25
+ deactivate_plugins( wp_unslash( $_POST['plugin'] ) );
26
+
27
+ if ( 'plugin' === $type ) {
28
+ wp_send_json_success( esc_html__( 'Plugin deactivated.', 'custom-facebook-feed' ) );
29
+ } else {
30
+ wp_send_json_success( esc_html__( 'Addon deactivated.', 'custom-facebook-feed' ) );
31
+ }
32
+ }
33
+
34
+ wp_send_json_error( esc_html__( 'Could not deactivate the addon. Please deactivate from the Plugins page.', 'custom-facebook-feed' ) );
35
+ }
36
+ add_action( 'wp_ajax_cff_deactivate_addon', 'cff_deactivate_addon' );
37
+
38
+ /**
39
+ * Activate addon.
40
+ *
41
+ * @since 1.0.0
42
+ */
43
+ function cff_activate_addon() {
44
+
45
+ // Run a security check.
46
+ check_ajax_referer( 'cff-admin', 'nonce' );
47
+
48
+ // Check for permissions.
49
+ if ( ! current_user_can( 'activate_plugins' ) ) {
50
+ wp_send_json_error();
51
+ }
52
+
53
+ if ( isset( $_POST['plugin'] ) ) {
54
+
55
+ $type = 'addon';
56
+ if ( ! empty( $_POST['type'] ) ) {
57
+ $type = sanitize_key( wp_unslash( $_POST['type'] ) );
58
+ }
59
+
60
+ $activate = activate_plugins( $_POST['plugin'] );
61
+
62
+ if ( ! is_wp_error( $activate ) ) {
63
+ if ( 'plugin' === $type ) {
64
+ wp_send_json_success( esc_html__( 'Plugin activated.', 'custom-facebook-feed' ) );
65
+ } else {
66
+ wp_send_json_success( esc_html__( 'Addon activated.', 'custom-facebook-feed' ) );
67
+ }
68
+ }
69
+ }
70
+
71
+ wp_send_json_error( esc_html__( 'Could not activate addon. Please activate from the Plugins page.', 'custom-facebook-feed' ) );
72
+ }
73
+ add_action( 'wp_ajax_cff_activate_addon', 'cff_activate_addon' );
74
+
75
+ /**
76
+ * Install addon.
77
+ *
78
+ * @since 1.0.0
79
+ */
80
+ function cff_install_addon() {
81
+
82
+ // Run a security check.
83
+ check_ajax_referer( 'cff-admin', 'nonce' );
84
+
85
+ // Check for permissions.
86
+ if ( ! current_user_can( 'install_plugins' ) ) {
87
+ wp_send_json_error();
88
+ }
89
+
90
+ $error = esc_html__( 'Could not install addon. Please download from smashballoon.com and install manually.', 'custom-facebook-feed' );
91
+
92
+ if ( empty( $_POST['plugin'] ) ) {
93
+ wp_send_json_error( $error );
94
+ }
95
+
96
+ // Set the current screen to avoid undefined notices.
97
+ set_current_screen( 'cff-about' );
98
+
99
+ // Prepare variables.
100
+ $url = esc_url_raw(
101
+ add_query_arg(
102
+ array(
103
+ 'page' => 'cff-about',
104
+ ),
105
+ admin_url( 'admin.php' )
106
+ )
107
+ );
108
+
109
+ $creds = request_filesystem_credentials( $url, '', false, false, null );
110
+
111
+ // Check for file system permissions.
112
+ if ( false === $creds ) {
113
+ wp_send_json_error( $error );
114
+ }
115
+
116
+ if ( ! WP_Filesystem( $creds ) ) {
117
+ wp_send_json_error( $error );
118
+ }
119
+
120
+ /*
121
+ * We do not need any extra credentials if we have gotten this far, so let's install the plugin.
122
+ */
123
+
124
+ #require_once CFF_PLUGIN_DIR . 'admin/class-install-skin.php';
125
+
126
+ // Do not allow WordPress to search/download translations, as this will break JS output.
127
+ remove_action( 'upgrader_process_complete', array( 'Language_Pack_Upgrader', 'async_upgrade' ), 20 );
128
+
129
+ // Create the plugin upgrader with our custom skin.
130
+ $installer = new CustomFacebookFeed\Helpers\PluginSilentUpgrader( new CustomFacebookFeed\Admin\CFF_Install_Skin() );
131
+
132
+ // Error check.
133
+ if ( ! method_exists( $installer, 'install' ) || empty( $_POST['plugin'] ) ) {
134
+ wp_send_json_error( $error );
135
+ }
136
+
137
+ $installer->install( $_POST['plugin'] ); // phpcs:ignore
138
+
139
+ // Flush the cache and return the newly installed plugin basename.
140
+ wp_cache_flush();
141
+
142
+ $plugin_basename = $installer->plugin_info();
143
+
144
+ if ( $plugin_basename ) {
145
+
146
+ $type = 'addon';
147
+ if ( ! empty( $_POST['type'] ) ) {
148
+ $type = sanitize_key( $_POST['type'] );
149
+ }
150
+
151
+ // Activate the plugin silently.
152
+ $activated = activate_plugin( $plugin_basename );
153
+
154
+ if ( ! is_wp_error( $activated ) ) {
155
+ wp_send_json_success(
156
+ array(
157
+ 'msg' => 'plugin' === $type ? esc_html__( 'Plugin installed & activated.', 'custom-facebook-feed' ) : esc_html__( 'Addon installed & activated.', 'custom-facebook-feed' ),
158
+ 'is_activated' => true,
159
+ 'basename' => $plugin_basename,
160
+ )
161
+ );
162
+ } else {
163
+ wp_send_json_success(
164
+ array(
165
+ 'msg' => 'plugin' === $type ? esc_html__( 'Plugin installed.', 'custom-facebook-feed' ) : esc_html__( 'Addon installed.', 'custom-facebook-feed' ),
166
+ 'is_activated' => false,
167
+ 'basename' => $plugin_basename,
168
+ )
169
+ );
170
+ }
171
+ }
172
+
173
+ wp_send_json_error( $error );
174
+ }
175
+
176
+
177
+ add_action( 'wp_ajax_cff_install_addon', 'cff_install_addon' );
178
+
179
+
180
+ /**
181
+ * Smash Balloon Encrypt or decrypt
182
+ *
183
+ * @param string @action
184
+ * @param string @string
185
+ *
186
+ * @return string $output
187
+ */
188
+ function sb_encrypt_decrypt( $action, $string ) {
189
+ $output = false;
190
+
191
+ $encrypt_method = "AES-256-CBC";
192
+ $secret_key = 'SMA$H.BA[[OON#23121';
193
+ $secret_iv = '1231394873342102221';
194
+
195
+ // hash
196
+ $key = hash( 'sha256', $secret_key );
197
+
198
+ // iv - encrypt method AES-256-CBC expects 16 bytes - else you will get a warning
199
+ $iv = substr( hash( 'sha256', $secret_iv ), 0, 16 );
200
+
201
+ if ( $action == 'encrypt' ) {
202
+ $output = openssl_encrypt( $string, $encrypt_method, $key, 0, $iv );
203
+ $output = base64_encode( $output );
204
+ } else if ( $action == 'decrypt' ) {
205
+ $output = openssl_decrypt( base64_decode( $string ), $encrypt_method, $key, 0, $iv );
206
+ }
207
+
208
+ return $output;
209
  }
admin/admin-functions.php CHANGED
@@ -1,457 +1,457 @@
1
- <?php
2
- use CustomFacebookFeed\CFF_Utils;
3
- use CustomFacebookFeed\CFF_Oembed;
4
- use CustomFacebookFeed\CFF_GDPR_Integrations;
5
- use CustomFacebookFeed\CFF_Feed_Locator;
6
- use CustomFacebookFeed\SB_Facebook_Data_Manager;
7
-
8
- add_action('group_post_scheduler_cron', 'cff_group_cache_function');
9
- function cff_group_cache_function(){
10
- CustomFacebookFeed\CFF_Group_Posts::cron_update_group_persistent_cache();
11
- }
12
-
13
- //Create Style page
14
- /**
15
- * @deprecated
16
- */
17
- function cff_style_page() {} //End Style_Page
18
-
19
- //Create Settings page
20
- /**
21
- * @deprecated
22
- */
23
- function cff_settings_page() {} //End Settings_Page
24
-
25
- /**
26
- * @deprecated
27
- */
28
- function cff_oembeds_page() {}
29
-
30
- /**
31
- * @deprecated
32
- */
33
- function cff_social_wall_page() {}
34
-
35
- function cff_lite_dismiss() {
36
- check_ajax_referer( 'cff_nonce' , 'cff_nonce');
37
-
38
- $cap = current_user_can( 'manage_custom_facebook_feed_options' ) ? 'manage_custom_facebook_feed_options' : 'manage_options';
39
- $cap = apply_filters( 'cff_settings_pages_capability', $cap );
40
- if ( ! current_user_can( $cap ) ) {
41
- wp_send_json_error(); // This auto-dies.
42
- }
43
-
44
- set_transient( 'facebook_feed_dismiss_lite', 'dismiss', 1 * WEEK_IN_SECONDS );
45
-
46
- die();
47
- }
48
- add_action( 'wp_ajax_cff_lite_dismiss', 'cff_lite_dismiss' );
49
-
50
- //If PPCA notice is dismissed then don't show again
51
- add_action('admin_init', 'cff_nag_ppca_ignore');
52
- function cff_nag_ppca_ignore() {
53
- global $current_user;
54
- $user_id = $current_user->ID;
55
- if ( isset($_GET['cff_nag_ppca_ignore']) && '0' == $_GET['cff_nag_ppca_ignore'] ) {
56
- add_user_meta($user_id, 'cff_ignore_ppca_notice', 'true', true);
57
- }
58
- }
59
-
60
-
61
- // Add a Settings link to the plugin on the Plugins page
62
- $cff_plugin_file = 'custom-facebook-feed/custom-facebook-feed.php';
63
- add_filter( "plugin_action_links_{$cff_plugin_file}", 'cff_add_settings_link', 10, 2 );
64
-
65
- //modify the link by unshifting the array
66
- function cff_add_settings_link( $links, $file ) {
67
- $pro_link = '<a href="https://smashballoondemo.com/?utm_campaign=facebook-free&utm_source=plugins-page&utm_medium=upgrade-link" target="_blank" style="font-weight: bold; color: #1da867;">' . __( 'Try the Pro Demo', 'custom-facebook-feed' ) . '</a>';
68
- $cff_settings_link = '<a href="' . admin_url( 'admin.php?page=cff-feed-builder' ) . '">' . __( 'Settings', 'cff-feed-builder', 'custom-facebook-feed' ) . '</a>';
69
- array_unshift( $links, $pro_link, $cff_settings_link );
70
-
71
- return $links;
72
- }
73
-
74
-
75
- //Delete cache
76
- function cff_delete_cache(){
77
- global $wpdb;
78
- $table_name = $wpdb->prefix . "options";
79
- $wpdb->query( "
80
- DELETE
81
- FROM $table_name
82
- WHERE `option_name` LIKE ('%\_transient\_cff\_%')
83
- " );
84
- $wpdb->query( "
85
- DELETE
86
- FROM $table_name
87
- WHERE `option_name` LIKE ('%\_transient\_cff\_tle\_%')
88
- " );
89
- $wpdb->query( "
90
- DELETE
91
- FROM $table_name
92
- WHERE `option_name` LIKE ('%\_transient\_timeout\_cff\_%')
93
- " );
94
-
95
- //Clear cache of major caching plugins
96
- if(isset($GLOBALS['wp_fastest_cache']) && method_exists($GLOBALS['wp_fastest_cache'], 'deleteCache')){
97
- $GLOBALS['wp_fastest_cache']->deleteCache();
98
- }
99
- //WP Super Cache
100
- if (function_exists('wp_cache_clear_cache')) {
101
- wp_cache_clear_cache();
102
- }
103
- //W3 Total Cache
104
- if (function_exists('w3tc_flush_all')) {
105
- w3tc_flush_all();
106
- }
107
- if (function_exists('sg_cachepress_purge_cache')) {
108
- sg_cachepress_purge_cache();
109
- }
110
-
111
- // Litespeed Cache
112
- if ( method_exists( 'LiteSpeed_Cache_API', 'purge' ) ) {
113
- LiteSpeed_Cache_API::purge( 'esi.custom-facebook-feed' );
114
- }
115
-
116
- }
117
-
118
- //Cron job to clear transients
119
- add_action('cff_cron_job', 'cff_cron_clear_cache');
120
- function cff_cron_clear_cache() {
121
- //Delete all transients
122
- cff_delete_cache();
123
- }
124
-
125
- //NOTICES
126
- function cff_get_current_time() {
127
- $current_time = time();
128
-
129
- // where to do tests
130
- // $current_time = strtotime( 'November 25, 2020' );
131
-
132
- return $current_time;
133
- }
134
-
135
- // generates the html for the admin notices
136
- function cff_notices_html() {
137
- // reset everything for testing
138
- /*
139
- global $current_user;
140
- $user_id = $current_user->ID;
141
- // delete_user_meta( $user_id, 'cff_ignore_bfcm_sale_notice' );
142
- // delete_user_meta( $user_id, 'cff_ignore_new_user_sale_notice' );
143
- // $cff_statuses_option = array( 'first_install' => strtotime( 'December 8, 2017' ) );
144
- // $cff_statuses_option = array( 'first_install' => time() );
145
-
146
- // update_option( 'cff_statuses', $cff_statuses_option, false );
147
- // delete_option( 'cff_rating_notice');
148
- // delete_transient( 'custom_facebook_rating_notice_waiting' );
149
-
150
- // set_transient( 'custom_facebook_rating_notice_waiting', 'waiting', 2 * WEEK_IN_SECONDS );
151
- delete_transient('custom_facebook_rating_notice_waiting');
152
- update_option( 'cff_rating_notice', 'pending', false );
153
- */
154
- }
155
-
156
- function cff_get_future_date( $month, $year, $week, $day, $direction ) {
157
- if ( $direction > 0 ) {
158
- $startday = 1;
159
- } else {
160
- $startday = date( 't', mktime(0, 0, 0, $month, 1, $year ) );
161
- }
162
-
163
- $start = mktime( 0, 0, 0, $month, $startday, $year );
164
- $weekday = date( 'N', $start );
165
-
166
- $offset = 0;
167
- if ( $direction * $day >= $direction * $weekday ) {
168
- $offset = -$direction * 7;
169
- }
170
-
171
- $offset += $direction * ($week * 7) + ($day - $weekday);
172
- return mktime( 0, 0, 0, $month, $startday + $offset, $year );
173
- }
174
-
175
- function cff_admin_hide_unrelated_notices() {
176
-
177
- // Bail if we're not on a cff screen or page.
178
- if ( ! isset( $_GET['page'] ) || strpos( $_GET['page'], 'cff') === false ) {
179
- return;
180
- }
181
-
182
- // Extra banned classes and callbacks from third-party plugins.
183
- $blacklist = array(
184
- 'classes' => array(),
185
- 'callbacks' => array(
186
- 'cffdb_admin_notice', // 'Database for cff' plugin.
187
- ),
188
- );
189
-
190
- global $wp_filter;
191
-
192
- foreach ( array( 'user_admin_notices', 'admin_notices', 'all_admin_notices' ) as $notices_type ) {
193
- if ( empty( $wp_filter[ $notices_type ]->callbacks ) || ! is_array( $wp_filter[ $notices_type ]->callbacks ) ) {
194
- continue;
195
- }
196
- foreach ( $wp_filter[ $notices_type ]->callbacks as $priority => $hooks ) {
197
- foreach ( $hooks as $name => $arr ) {
198
- if ( is_object( $arr['function'] ) && $arr['function'] instanceof Closure ) {
199
- unset( $wp_filter[ $notices_type ]->callbacks[ $priority ][ $name ] );
200
- continue;
201
- }
202
- $class = ! empty( $arr['function'][0] ) && is_object( $arr['function'][0] ) ? strtolower( get_class( $arr['function'][0] ) ) : '';
203
- if (
204
- ! empty( $class ) &&
205
- strpos( $class, 'cff' ) !== false &&
206
- ! in_array( $class, $blacklist['classes'], true )
207
- ) {
208
- continue;
209
- }
210
- if (
211
- ! empty( $name ) && (
212
- strpos( $name, 'cff' ) === false ||
213
- in_array( $class, $blacklist['classes'], true ) ||
214
- in_array( $name, $blacklist['callbacks'], true )
215
- )
216
- ) {
217
- unset( $wp_filter[ $notices_type ]->callbacks[ $priority ][ $name ] );
218
- }
219
- }
220
- }
221
- }
222
- }
223
- add_action( 'admin_print_scripts', 'cff_admin_hide_unrelated_notices' );
224
-
225
- /**
226
- * Remove admin notices from inside our plugin screens so we can show our customized notices
227
- *
228
- * @since 4.0
229
- */
230
- add_action( 'in_admin_header', 'cff_remove_admin_notices' );
231
- function cff_remove_admin_notices() {
232
- $current_screen = get_current_screen();
233
- $not_allowed_screens = array(
234
- 'facebook-feed_page_cff-feed-builder',
235
- 'facebook-feed_page_cff-settings',
236
- 'facebook-feed_page_cff-oembeds-manager',
237
- 'facebook-feed_page_cff-extensions-manager',
238
- 'facebook-feed_page_cff-about-us',
239
- 'facebook-feed_page_cff-support',
240
- );
241
-
242
- if ( in_array( $current_screen->base, $not_allowed_screens ) ) {
243
- remove_all_actions('admin_notices');
244
- remove_all_actions('all_admin_notices');
245
- }
246
- }
247
-
248
- function cff_free_add_caps() {
249
- global $wp_roles;
250
-
251
- $wp_roles->add_cap( 'administrator', 'manage_custom_facebook_feed_options' );
252
-
253
- }
254
- add_action( 'admin_init', 'cff_free_add_caps', 90 );
255
-
256
-
257
-
258
-
259
-
260
- function cff_oembed_disable() {
261
- check_ajax_referer( 'cff_nonce' , 'cff_nonce');
262
-
263
- $cap = current_user_can( 'manage_custom_facebook_feed_options' ) ? 'manage_custom_facebook_feed_options' : 'manage_options';
264
- $cap = apply_filters( 'cff_settings_pages_capability', $cap );
265
- if ( ! current_user_can( $cap ) ) {
266
- wp_send_json_error(); // This auto-dies.
267
- }
268
-
269
- $oembed_settings = get_option( 'cff_oembed_token', array() );
270
- $oembed_settings['access_token'] = '';
271
- $oembed_settings['disabled'] = true;
272
- echo '<strong>';
273
- if ( update_option( 'cff_oembed_token', $oembed_settings ) ) {
274
- _e( 'Facebook oEmbeds will no longer be handled by Custom Facebook Feed.', 'custom-facebook-feed' );
275
- } else {
276
- _e( 'An error occurred when trying to disable your oEmbed token.', 'custom-facebook-feed' );
277
- }
278
- echo '</strong>';
279
-
280
- die();
281
- }
282
- add_action( 'wp_ajax_cff_oembed_disable', 'cff_oembed_disable' );
283
-
284
-
285
-
286
- function cff_custom_cssjs_notice() {
287
- $cff_statuses_option = get_option( 'cff_statuses', array() );
288
- if ( ! empty( $cff_statuses_option['custom_js_css_dismissed'] ) ) {
289
- return;
290
- }
291
-
292
- if ( ! empty( $_GET['cff_dismiss_notice'] ) && $_GET['cff_dismiss_notice'] === 'customjscss' ) {
293
- $cff_statuses_option['custom_js_css_dismissed'] = true;
294
- update_option( 'cff_statuses', $cff_statuses_option, false );
295
- return;
296
- }
297
- $cff_style_settings = get_option( 'cff_style_settings' );
298
-
299
- $custom_js_not_empty = ! empty( $cff_style_settings['cff_custom_js'] ) && trim($cff_style_settings['cff_custom_js']) !== '';
300
- $custom_css_not_empty = ! empty( $cff_style_settings['cff_custom_css_read_only'] ) && trim($cff_style_settings['cff_custom_css_read_only']) !== '';
301
-
302
- if ( ! $custom_js_not_empty && ! $custom_css_not_empty ) {
303
- return;
304
- }
305
-
306
- $cff_notifications = new \CustomFacebookFeed\Admin\CFF_Notifications();
307
- $notifications = $cff_notifications->get();
308
-
309
- if ( ! empty( $notifications ) && ( ! empty( $_GET['page'] ) && strpos( $_GET['page'], 'cff-' ) !== false ) ) {
310
- return;
311
- }
312
- $close_href = add_query_arg( array( 'cff_dismiss_notice' => 'customjscss' ) );
313
-
314
- ?>
315
- <div class="notice notice-warning is-dismissible cff-dismissible">
316
- <p><?php if ( $custom_js_not_empty ) : ?>
317
- <?php echo sprintf( __( 'You are currently using Custom CSS or JavaScript in the Custom Facebook Feed plugin, however, these settings have now been deprecated. To continue using any custom code, please go to the Custom CSS and JS settings %shere%s and follow the directions.', 'custom-facebook-feed' ), '<a href="' . admin_url( 'admin.php?page=cff-settings&view=feeds' ) . '">', '</a>' ); ?>
318
- <?php else : ?>
319
- <?php echo sprintf( __( 'You are currently using Custom CSS in the Custom Facebook Feed plugin, however, this setting has now been deprecated. Your CSS has been moved to the "Additional CSS" field in the WordPress Customizer %shere%s instead.', 'custom-facebook-feed' ), '<a href="' . esc_url( wp_customize_url() ) . '">', '</a>' ); ?>
320
- <?php endif; ?>
321
- &nbsp;<a href="<?php echo esc_attr( $close_href ); ?>"><?php echo __( 'Dismiss', 'custom-facebook-feed' ); ?></a>
322
- </p>
323
- </div>
324
- <?php
325
- }
326
- add_action( 'admin_notices', 'cff_custom_cssjs_notice' );
327
- add_action( 'cff_admin_notices', 'cff_custom_cssjs_notice' );
328
-
329
- function cff_dismiss_custom_cssjs_notice() {
330
- check_ajax_referer( 'cff_nonce' , 'cff_nonce');
331
-
332
- $cap = current_user_can( 'manage_custom_facebook_feed_options' ) ? 'manage_custom_facebook_feed_options' : 'manage_options';
333
- $cap = apply_filters( 'cff_settings_pages_capability', $cap );
334
- //Only display notice to admins
335
- if ( !current_user_can( $cap ) ) return;
336
-
337
- $cff_statuses_option = get_option( 'cff_statuses', array() );
338
- $cff_statuses_option['custom_js_css_dismissed'] = true;
339
- update_option( 'cff_statuses', $cff_statuses_option, false );
340
- }
341
- add_action( 'wp_ajax_cff_dismiss_custom_cssjs_notice', 'cff_dismiss_custom_cssjs_notice' );
342
-
343
-
344
- function cff_ppca_token_check_flag() {
345
- check_ajax_referer( 'cff_nonce' , 'cff_nonce');
346
-
347
- $cap = current_user_can( 'manage_custom_facebook_feed_options' ) ? 'manage_custom_facebook_feed_options' : 'manage_options';
348
- $cap = apply_filters( 'cff_settings_pages_capability', $cap );
349
- if ( ! current_user_can( $cap ) ) {
350
- wp_send_json_error(); // This auto-dies.
351
- }
352
-
353
- if( get_transient('cff_ppca_access_token_invalid') ){
354
- print_r(true);
355
- } else {
356
- print_r(false);
357
- }
358
-
359
- die();
360
- }
361
- add_action( 'wp_ajax_cff_ppca_token_check_flag', 'cff_ppca_token_check_flag' );
362
-
363
- /**
364
- * Adds CSS to the end of the customizer "Additonal CSS" setting
365
- *
366
- * @param $custom_css
367
- *
368
- * @return bool|int
369
- *
370
- * @since 4.0.2/4.0.7
371
- */
372
- function cff_transfer_css( $custom_css ) {
373
- $value = '';
374
- $post = wp_get_custom_css_post( get_stylesheet() );
375
- if ( $post ) {
376
- $value = $post->post_content;
377
- }
378
- $value .= "\n\n/* Custom Facebook Feed */\n" . $custom_css . "\n/* Custom Facebook Feed - End */";
379
-
380
- $r = wp_update_custom_css_post(
381
- $value,
382
- array(
383
- 'stylesheet' => get_stylesheet(),
384
- )
385
- );
386
-
387
- if ( $r instanceof WP_Error ) {
388
- return false;
389
- }
390
- $post_id = $r->ID;
391
-
392
- return $post_id;
393
- }
394
-
395
- /**
396
- * Validates CSS to detect anything that might be harmful
397
- *
398
- * @param $css
399
- *
400
- * @return bool|WP_Error
401
- *
402
- * @since 4.0.2/4.0.7
403
- */
404
- function cff_validate_css( $css ) {
405
- $validity = new WP_Error();
406
-
407
- if ( preg_match( '#</?\w+#', $css ) ) {
408
- $validity->add( 'illegal_markup', __( 'Markup is not allowed in CSS.' ) );
409
- }
410
-
411
- if ( ! $validity->has_errors() ) {
412
- $validity = true;
413
- }
414
- return $validity;
415
- }
416
-
417
- /**
418
- * Check to see if CSS has been transferred
419
- *
420
- * @since 4.0.2/4.0.7
421
- */
422
- function cff_check_custom_css() {
423
- $cff_style_settings = get_option( 'cff_style_settings', array() );
424
- $custom_css = isset( $cff_style_settings['cff_custom_css'] ) ? stripslashes( trim( $cff_style_settings['cff_custom_css'] ) ) : '';
425
-
426
- // only try once
427
- if ( empty( $custom_css ) ) {
428
- return;
429
- }
430
-
431
- // custom css set to nothing after trying the update once
432
- $cff_style_settings['cff_custom_css_read_only'] = $custom_css;
433
- $cff_style_settings['cff_custom_css'] = '';
434
- update_option( 'cff_style_settings', $cff_style_settings );
435
- if ( ! function_exists( 'wp_get_custom_css_post' )
436
- || ! function_exists( 'wp_update_custom_css_post' ) ) {
437
- return;
438
- }
439
-
440
- // make sure this is valid CSS or don't transfer
441
- if ( is_wp_error( cff_validate_css( $custom_css ) ) ) {
442
- return;
443
- }
444
-
445
- cff_transfer_css( $custom_css );
446
- }
447
- add_action( 'init', 'cff_check_custom_css' );
448
-
449
- function cff_doing_openssl() {
450
- return extension_loaded( 'openssl' );
451
- }
452
- function cff_delete_all_platform_data(){
453
- $manager = new SB_Facebook_Data_Manager();
454
- $manager->delete_caches();
455
- \cff_main()->cff_error_reporter->add_action_log( 'Deleted all platform data.' );
456
- \cff_main()->cff_error_reporter->reset_api_errors();
457
- }
1
+ <?php
2
+ use CustomFacebookFeed\CFF_Utils;
3
+ use CustomFacebookFeed\CFF_Oembed;
4
+ use CustomFacebookFeed\CFF_GDPR_Integrations;
5
+ use CustomFacebookFeed\CFF_Feed_Locator;
6
+ use CustomFacebookFeed\SB_Facebook_Data_Manager;
7
+
8
+ add_action('group_post_scheduler_cron', 'cff_group_cache_function');
9
+ function cff_group_cache_function(){
10
+ CustomFacebookFeed\CFF_Group_Posts::cron_update_group_persistent_cache();
11
+ }
12
+
13
+ //Create Style page
14
+ /**
15
+ * @deprecated
16
+ */
17
+ function cff_style_page() {} //End Style_Page
18
+
19
+ //Create Settings page
20
+ /**
21
+ * @deprecated
22
+ */
23
+ function cff_settings_page() {} //End Settings_Page
24
+
25
+ /**
26
+ * @deprecated
27
+ */
28
+ function cff_oembeds_page() {}
29
+
30
+ /**
31
+ * @deprecated
32
+ */
33
+ function cff_social_wall_page() {}
34
+
35
+ function cff_lite_dismiss() {
36
+ check_ajax_referer( 'cff_nonce' , 'cff_nonce');
37
+
38
+ $cap = current_user_can( 'manage_custom_facebook_feed_options' ) ? 'manage_custom_facebook_feed_options' : 'manage_options';
39
+ $cap = apply_filters( 'cff_settings_pages_capability', $cap );
40
+ if ( ! current_user_can( $cap ) ) {
41
+ wp_send_json_error(); // This auto-dies.
42
+ }
43
+
44
+ set_transient( 'facebook_feed_dismiss_lite', 'dismiss', 1 * WEEK_IN_SECONDS );
45
+
46
+ die();
47
+ }
48
+ add_action( 'wp_ajax_cff_lite_dismiss', 'cff_lite_dismiss' );
49
+
50
+ //If PPCA notice is dismissed then don't show again
51
+ add_action('admin_init', 'cff_nag_ppca_ignore');
52
+ function cff_nag_ppca_ignore() {
53
+ global $current_user;
54
+ $user_id = $current_user->ID;
55
+ if ( isset($_GET['cff_nag_ppca_ignore']) && '0' == $_GET['cff_nag_ppca_ignore'] ) {
56
+ add_user_meta($user_id, 'cff_ignore_ppca_notice', 'true', true);
57
+ }
58
+ }
59
+
60
+
61
+ // Add a Settings link to the plugin on the Plugins page
62
+ $cff_plugin_file = 'custom-facebook-feed/custom-facebook-feed.php';
63
+ add_filter( "plugin_action_links_{$cff_plugin_file}", 'cff_add_settings_link', 10, 2 );
64
+
65
+ //modify the link by unshifting the array
66
+ function cff_add_settings_link( $links, $file ) {
67
+ $pro_link = '<a href="https://smashballoondemo.com/?utm_campaign=facebook-free&utm_source=plugins-page&utm_medium=upgrade-link" target="_blank" style="font-weight: bold; color: #1da867;">' . __( 'Try the Pro Demo', 'custom-facebook-feed' ) . '</a>';
68
+ $cff_settings_link = '<a href="' . admin_url( 'admin.php?page=cff-feed-builder' ) . '">' . __( 'Settings', 'cff-feed-builder', 'custom-facebook-feed' ) . '</a>';
69
+ array_unshift( $links, $pro_link, $cff_settings_link );
70
+
71
+ return $links;
72
+ }
73
+
74
+
75
+ //Delete cache
76
+ function cff_delete_cache(){
77
+ global $wpdb;
78
+ $table_name = $wpdb->prefix . "options";
79
+ $wpdb->query( "
80
+ DELETE
81
+ FROM $table_name
82
+ WHERE `option_name` LIKE ('%\_transient\_cff\_%')
83
+ " );
84
+ $wpdb->query( "
85
+ DELETE
86
+ FROM $table_name
87
+ WHERE `option_name` LIKE ('%\_transient\_cff\_tle\_%')
88
+ " );
89
+ $wpdb->query( "
90
+ DELETE
91
+ FROM $table_name
92
+ WHERE `option_name` LIKE ('%\_transient\_timeout\_cff\_%')
93
+ " );
94
+
95
+ //Clear cache of major caching plugins
96
+ if(isset($GLOBALS['wp_fastest_cache']) && method_exists($GLOBALS['wp_fastest_cache'], 'deleteCache')){
97
+ $GLOBALS['wp_fastest_cache']->deleteCache();
98
+ }
99
+ //WP Super Cache
100
+ if (function_exists('wp_cache_clear_cache')) {
101
+ wp_cache_clear_cache();
102
+ }
103
+ //W3 Total Cache
104
+ if (function_exists('w3tc_flush_all')) {
105
+ w3tc_flush_all();
106
+ }
107
+ if (function_exists('sg_cachepress_purge_cache')) {
108
+ sg_cachepress_purge_cache();
109
+ }
110
+
111
+ // Litespeed Cache
112
+ if ( method_exists( 'LiteSpeed_Cache_API', 'purge' ) ) {
113
+ LiteSpeed_Cache_API::purge( 'esi.custom-facebook-feed' );
114
+ }
115
+
116
+ }
117
+
118
+ //Cron job to clear transients
119
+ add_action('cff_cron_job', 'cff_cron_clear_cache');
120
+ function cff_cron_clear_cache() {
121
+ //Delete all transients
122
+ cff_delete_cache();
123
+ }
124
+
125
+ //NOTICES
126
+ function cff_get_current_time() {
127
+ $current_time = time();
128
+
129
+ // where to do tests
130
+ // $current_time = strtotime( 'November 25, 2020' );
131
+
132
+ return $current_time;
133
+ }
134
+
135
+ // generates the html for the admin notices
136
+ function cff_notices_html() {
137
+ // reset everything for testing
138
+ /*
139
+ global $current_user;
140
+ $user_id = $current_user->ID;
141
+ // delete_user_meta( $user_id, 'cff_ignore_bfcm_sale_notice' );
142
+ // delete_user_meta( $user_id, 'cff_ignore_new_user_sale_notice' );
143
+ // $cff_statuses_option = array( 'first_install' => strtotime( 'December 8, 2017' ) );
144
+ // $cff_statuses_option = array( 'first_install' => time() );
145
+
146
+ // update_option( 'cff_statuses', $cff_statuses_option, false );
147
+ // delete_option( 'cff_rating_notice');
148
+ // delete_transient( 'custom_facebook_rating_notice_waiting' );
149
+
150
+ // set_transient( 'custom_facebook_rating_notice_waiting', 'waiting', 2 * WEEK_IN_SECONDS );
151
+ delete_transient('custom_facebook_rating_notice_waiting');
152
+ update_option( 'cff_rating_notice', 'pending', false );
153
+ */
154
+ }
155
+
156
+ function cff_get_future_date( $month, $year, $week, $day, $direction ) {
157
+ if ( $direction > 0 ) {
158
+ $startday = 1;
159
+ } else {
160
+ $startday = date( 't', mktime(0, 0, 0, $month, 1, $year ) );
161
+ }
162
+
163
+ $start = mktime( 0, 0, 0, $month, $startday, $year );
164
+ $weekday = date( 'N', $start );
165
+
166
+ $offset = 0;
167
+ if ( $direction * $day >= $direction * $weekday ) {
168
+ $offset = -$direction * 7;
169
+ }
170
+
171
+ $offset += $direction * ($week * 7) + ($day - $weekday);
172
+ return mktime( 0, 0, 0, $month, $startday + $offset, $year );
173
+ }
174
+
175
+ function cff_admin_hide_unrelated_notices() {
176
+
177
+ // Bail if we're not on a cff screen or page.
178
+ if ( ! isset( $_GET['page'] ) || strpos( $_GET['page'], 'cff') === false ) {
179
+ return;
180
+ }
181
+
182
+ // Extra banned classes and callbacks from third-party plugins.
183
+ $blacklist = array(
184
+ 'classes' => array(),
185
+ 'callbacks' => array(
186
+ 'cffdb_admin_notice', // 'Database for cff' plugin.
187
+ ),
188
+ );
189
+
190
+ global $wp_filter;
191
+
192
+ foreach ( array( 'user_admin_notices', 'admin_notices', 'all_admin_notices' ) as $notices_type ) {
193
+ if ( empty( $wp_filter[ $notices_type ]->callbacks ) || ! is_array( $wp_filter[ $notices_type ]->callbacks ) ) {
194
+ continue;
195
+ }
196
+ foreach ( $wp_filter[ $notices_type ]->callbacks as $priority => $hooks ) {
197
+ foreach ( $hooks as $name => $arr ) {
198
+ if ( is_object( $arr['function'] ) && $arr['function'] instanceof Closure ) {
199
+ unset( $wp_filter[ $notices_type ]->callbacks[ $priority ][ $name ] );
200
+ continue;
201
+ }
202
+ $class = ! empty( $arr['function'][0] ) && is_object( $arr['function'][0] ) ? strtolower( get_class( $arr['function'][0] ) ) : '';
203
+ if (
204
+ ! empty( $class ) &&
205
+ strpos( $class, 'cff' ) !== false &&
206
+ ! in_array( $class, $blacklist['classes'], true )
207
+ ) {
208
+ continue;
209
+ }
210
+ if (
211
+ ! empty( $name ) && (
212
+ strpos( $name, 'cff' ) === false ||
213
+ in_array( $class, $blacklist['classes'], true ) ||
214
+ in_array( $name, $blacklist['callbacks'], true )
215
+ )
216
+ ) {
217
+ unset( $wp_filter[ $notices_type ]->callbacks[ $priority ][ $name ] );
218
+ }
219
+ }
220
+ }
221
+ }
222
+ }
223
+ add_action( 'admin_print_scripts', 'cff_admin_hide_unrelated_notices' );
224
+
225
+ /**
226
+ * Remove admin notices from inside our plugin screens so we can show our customized notices
227
+ *
228
+ * @since 4.0
229
+ */
230
+ add_action( 'in_admin_header', 'cff_remove_admin_notices' );
231
+ function cff_remove_admin_notices() {
232
+ $current_screen = get_current_screen();
233
+ $not_allowed_screens = array(
234
+ 'facebook-feed_page_cff-feed-builder',
235
+ 'facebook-feed_page_cff-settings',
236
+ 'facebook-feed_page_cff-oembeds-manager',
237
+ 'facebook-feed_page_cff-extensions-manager',
238
+ 'facebook-feed_page_cff-about-us',
239
+ 'facebook-feed_page_cff-support',
240
+ );
241
+
242
+ if ( in_array( $current_screen->base, $not_allowed_screens ) ) {
243
+ remove_all_actions('admin_notices');
244
+ remove_all_actions('all_admin_notices');
245
+ }
246
+ }
247
+
248
+ function cff_free_add_caps() {
249
+ global $wp_roles;
250
+
251
+ $wp_roles->add_cap( 'administrator', 'manage_custom_facebook_feed_options' );
252
+
253
+ }
254
+ add_action( 'admin_init', 'cff_free_add_caps', 90 );
255
+
256
+
257
+
258
+
259
+
260
+ function cff_oembed_disable() {
261
+ check_ajax_referer( 'cff_nonce' , 'cff_nonce');
262
+
263
+ $cap = current_user_can( 'manage_custom_facebook_feed_options' ) ? 'manage_custom_facebook_feed_options' : 'manage_options';
264
+ $cap = apply_filters( 'cff_settings_pages_capability', $cap );
265
+ if ( ! current_user_can( $cap ) ) {
266
+ wp_send_json_error(); // This auto-dies.
267
+ }
268
+
269
+ $oembed_settings = get_option( 'cff_oembed_token', array() );
270
+ $oembed_settings['access_token'] = '';
271
+ $oembed_settings['disabled'] = true;
272
+ echo '<strong>';
273
+ if ( update_option( 'cff_oembed_token', $oembed_settings ) ) {
274
+ _e( 'Facebook oEmbeds will no longer be handled by Custom Facebook Feed.', 'custom-facebook-feed' );
275
+ } else {
276
+ _e( 'An error occurred when trying to disable your oEmbed token.', 'custom-facebook-feed' );
277
+ }
278
+ echo '</strong>';
279
+
280
+ die();
281
+ }
282
+ add_action( 'wp_ajax_cff_oembed_disable', 'cff_oembed_disable' );
283
+
284
+
285
+
286
+ function cff_custom_cssjs_notice() {
287
+ $cff_statuses_option = get_option( 'cff_statuses', array() );
288
+ if ( ! empty( $cff_statuses_option['custom_js_css_dismissed'] ) ) {
289
+ return;
290
+ }
291
+
292
+ if ( ! empty( $_GET['cff_dismiss_notice'] ) && $_GET['cff_dismiss_notice'] === 'customjscss' ) {
293
+ $cff_statuses_option['custom_js_css_dismissed'] = true;
294
+ update_option( 'cff_statuses', $cff_statuses_option, false );
295
+ return;
296
+ }
297
+ $cff_style_settings = get_option( 'cff_style_settings' );
298
+
299
+ $custom_js_not_empty = ! empty( $cff_style_settings['cff_custom_js'] ) && trim($cff_style_settings['cff_custom_js']) !== '';
300
+ $custom_css_not_empty = ! empty( $cff_style_settings['cff_custom_css_read_only'] ) && trim($cff_style_settings['cff_custom_css_read_only']) !== '';
301
+
302
+ if ( ! $custom_js_not_empty && ! $custom_css_not_empty ) {
303
+ return;
304
+ }
305
+
306
+ $cff_notifications = new \CustomFacebookFeed\Admin\CFF_Notifications();
307
+ $notifications = $cff_notifications->get();
308
+
309
+ if ( ! empty( $notifications ) && ( ! empty( $_GET['page'] ) && strpos( $_GET['page'], 'cff-' ) !== false ) ) {
310
+ return;
311
+ }
312
+ $close_href = add_query_arg( array( 'cff_dismiss_notice' => 'customjscss' ) );
313
+
314
+ ?>
315
+ <div class="notice notice-warning is-dismissible cff-dismissible">
316
+ <p><?php if ( $custom_js_not_empty ) : ?>
317
+ <?php echo sprintf( __( 'You are currently using Custom CSS or JavaScript in the Custom Facebook Feed plugin, however, these settings have now been deprecated. To continue using any custom code, please go to the Custom CSS and JS settings %shere%s and follow the directions.', 'custom-facebook-feed' ), '<a href="' . admin_url( 'admin.php?page=cff-settings&view=feeds' ) . '">', '</a>' ); ?>
318
+ <?php else : ?>
319
+ <?php echo sprintf( __( 'You are currently using Custom CSS in the Custom Facebook Feed plugin, however, this setting has now been deprecated. Your CSS has been moved to the "Additional CSS" field in the WordPress Customizer %shere%s instead.', 'custom-facebook-feed' ), '<a href="' . esc_url( wp_customize_url() ) . '">', '</a>' ); ?>
320
+ <?php endif; ?>
321
+ &nbsp;<a href="<?php echo esc_attr( $close_href ); ?>"><?php echo __( 'Dismiss', 'custom-facebook-feed' ); ?></a>
322
+ </p>
323
+ </div>
324
+ <?php
325
+ }
326
+ add_action( 'admin_notices', 'cff_custom_cssjs_notice' );
327
+ add_action( 'cff_admin_notices', 'cff_custom_cssjs_notice' );
328
+
329
+ function cff_dismiss_custom_cssjs_notice() {
330
+ check_ajax_referer( 'cff_nonce' , 'cff_nonce');
331
+
332
+ $cap = current_user_can( 'manage_custom_facebook_feed_options' ) ? 'manage_custom_facebook_feed_options' : 'manage_options';
333
+ $cap = apply_filters( 'cff_settings_pages_capability', $cap );
334
+ //Only display notice to admins
335
+ if ( !current_user_can( $cap ) ) return;
336
+
337
+ $cff_statuses_option = get_option( 'cff_statuses', array() );
338
+ $cff_statuses_option['custom_js_css_dismissed'] = true;
339
+ update_option( 'cff_statuses', $cff_statuses_option, false );
340
+ }
341
+ add_action( 'wp_ajax_cff_dismiss_custom_cssjs_notice', 'cff_dismiss_custom_cssjs_notice' );
342
+
343
+
344
+ function cff_ppca_token_check_flag() {
345
+ check_ajax_referer( 'cff_nonce' , 'cff_nonce');
346
+
347
+ $cap = current_user_can( 'manage_custom_facebook_feed_options' ) ? 'manage_custom_facebook_feed_options' : 'manage_options';
348
+ $cap = apply_filters( 'cff_settings_pages_capability', $cap );
349
+ if ( ! current_user_can( $cap ) ) {
350
+ wp_send_json_error(); // This auto-dies.
351
+ }
352
+
353
+ if( get_transient('cff_ppca_access_token_invalid') ){
354
+ print_r(true);
355
+ } else {
356
+ print_r(false);
357
+ }
358
+
359
+ die();
360
+ }
361
+ add_action( 'wp_ajax_cff_ppca_token_check_flag', 'cff_ppca_token_check_flag' );
362
+
363
+ /**
364
+ * Adds CSS to the end of the customizer "Additonal CSS" setting
365
+ *
366
+ * @param $custom_css
367
+ *
368
+ * @return bool|int
369
+ *
370
+ * @since 4.0.2/4.0.7
371
+ */
372
+ function cff_transfer_css( $custom_css ) {
373
+ $value = '';
374
+ $post = wp_get_custom_css_post( get_stylesheet() );
375
+ if ( $post ) {
376
+ $value = $post->post_content;
377
+ }
378
+ $value .= "\n\n/* Custom Facebook Feed */\n" . $custom_css . "\n/* Custom Facebook Feed - End */";
379
+
380
+ $r = wp_update_custom_css_post(
381
+ $value,
382
+ array(
383
+ 'stylesheet' => get_stylesheet(),
384
+ )
385
+ );
386
+
387
+ if ( $r instanceof WP_Error ) {
388
+ return false;
389
+ }
390
+ $post_id = $r->ID;
391
+
392
+ return $post_id;
393
+ }
394
+
395
+ /**
396
+ * Validates CSS to detect anything that might be harmful
397
+ *
398
+ * @param $css
399
+ *
400
+ * @return bool|WP_Error
401
+ *
402
+ * @since 4.0.2/4.0.7
403
+ */
404
+ function cff_validate_css( $css ) {
405
+ $validity = new WP_Error();
406
+
407
+ if ( preg_match( '#</?\w+#', $css ) ) {
408
+ $validity->add( 'illegal_markup', __( 'Markup is not allowed in CSS.' ) );
409
+ }
410
+
411
+ if ( ! $validity->has_errors() ) {
412
+ $validity = true;
413
+ }
414
+ return $validity;
415
+ }
416
+
417
+ /**
418
+ * Check to see if CSS has been transferred
419
+ *
420
+ * @since 4.0.2/4.0.7
421
+ */
422
+ function cff_check_custom_css() {
423
+ $cff_style_settings = get_option( 'cff_style_settings', array() );
424
+ $custom_css = isset( $cff_style_settings['cff_custom_css'] ) ? stripslashes( trim( $cff_style_settings['cff_custom_css'] ) ) : '';
425
+
426
+ // only try once
427
+ if ( empty( $custom_css ) ) {
428
+ return;
429
+ }
430
+
431
+ // custom css set to nothing after trying the update once
432
+ $cff_style_settings['cff_custom_css_read_only'] = $custom_css;
433
+ $cff_style_settings['cff_custom_css'] = '';
434
+ update_option( 'cff_style_settings', $cff_style_settings );
435
+ if ( ! function_exists( 'wp_get_custom_css_post' )
436
+ || ! function_exists( 'wp_update_custom_css_post' ) ) {
437
+ return;
438
+ }
439
+
440
+ // make sure this is valid CSS or don't transfer
441
+ if ( is_wp_error( cff_validate_css( $custom_css ) ) ) {
442
+ return;
443
+ }
444
+
445
+ cff_transfer_css( $custom_css );
446
+ }
447
+ add_action( 'init', 'cff_check_custom_css' );
448
+
449
+ function cff_doing_openssl() {
450
+ return extension_loaded( 'openssl' );
451
+ }
452
+ function cff_delete_all_platform_data(){
453
+ $manager = new SB_Facebook_Data_Manager();
454
+ $manager->delete_caches();
455
+ \cff_main()->cff_error_reporter->add_action_log( 'Deleted all platform data.' );
456
+ \cff_main()->cff_error_reporter->reset_api_errors();
457
+ }
admin/assets/css/about.css CHANGED
@@ -1,765 +1,765 @@
1
- /*
2
- * About Us CSS TABLE OF CONTENTS
3
- *
4
- * 1.0 - GLOBAL
5
- * 2.0 - HEADER
6
- * 3.0 - 3.0 - ABOUT US CONTAINER
7
- * 3.1 - SECTION HEADER
8
- * 3.2 - ABOUT TEAM BOX
9
- * 3.3 - PLUGINS BOX
10
- * 4.0 - STICKY WIDGET
11
- * 5.0 - RESPONSIVENESS
12
- */
13
-
14
- /*** 1.0 - GLOBAL ***/
15
- .clearfix { display: inline-block; }
16
- /* start commented backslash hack \*/
17
- * html .clearfix { height: 1%; }
18
- .clearfix { display: block; }
19
- #cff-about {
20
- -webkit-font-smoothing: antialiased;
21
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
22
- }
23
- #wpcontent {
24
- padding-left: 0px;
25
- }
26
- #wpbody-content {
27
- padding-bottom: 40px;
28
- }
29
- .clearfix:after {
30
- visibility: hidden;
31
- display: block;
32
- font-size: 0;
33
- content: " ";
34
- clear: both;
35
- height: 0;
36
- }
37
- /*orange*/
38
- .sb-btn-orange{
39
- background: #E34F0E!important;
40
- color: #fff!important;
41
- }
42
- .sb-btn-orange:hover{
43
- background: #F37036!important;
44
- color: #fff!important;
45
- }
46
- .sb-btn-orange:focus,
47
- .sb-btn-orange:active{
48
- background: #B8400B!important;
49
- color: #fff!important;
50
- }
51
- .cff-fb-full-wrapper{
52
- padding: 0 53px;
53
- padding-top: 82px;
54
- }
55
- .cff-fb-fs {
56
- width: 100%;
57
- position: relative;
58
- float: left;
59
- box-sizing: border-box;
60
- }
61
-
62
- /*** 2.0 - HEADER ***/
63
- .cff-fb-create-ctn{
64
- margin-top: 90px;
65
- }
66
- .cff-fb-header{
67
- height: 64px;
68
- position: absolute;
69
- display: flex;
70
- flex-direction: row;
71
- justify-content: space-between;
72
- align-items: center;
73
- background: #fff;
74
- padding: 0px 52px;
75
- z-index: 2;
76
- }
77
- .cff-fb-header-left {
78
- display: flex;
79
- }
80
- .cff-fb-header-left .sb-social-wall-link-wrap {
81
- margin-left: 30px;
82
- }
83
- .sb-social-wall-link-wrap {
84
- display: flex;
85
- font-size: 14px;
86
- margin: 10px 0 10px 30px;
87
- }
88
- .sb-social-wall-link:first-child {
89
- padding-left: 0;
90
- border-right: 1px solid #ccc;
91
- color: #0068A0!important;
92
- line-height: 1;
93
- }
94
- .sb-social-wall-link {
95
- padding: 0 12px;
96
- border-right: 1px solid #ccc;
97
- color: #0068A0!important;
98
- line-height: 1;
99
- }
100
- .sb-social-wall-link a {
101
- text-decoration: none;
102
- }
103
- .sb-social-wall-link a:focus {
104
- outline: none;
105
- box-shadow: none;
106
- }
107
- .sb-social-wall-link:last-child {
108
- border-right: none;
109
- }
110
- .cff-fb-hd-logo{
111
- display: flex;
112
- vertical-align: middle;
113
- align-items: center;
114
- gap: 5px;
115
- }
116
- .cff-fb-hd-logo .sb-logo-letters-wrap {
117
- margin-bottom: 4px;
118
- }
119
- .cff-fb-hd-logo .breadcrumb-title{
120
- font-size: 14px;
121
- font-weight: 400;
122
- line-height: 22px;
123
- letter-spacing: 0em;
124
- margin-left: 4px;
125
- }
126
- .cff-fb-hd-logo .separator{
127
- margin: 0 5px 0 10px;
128
- }
129
- .cff-fb-hd-btn{
130
- height: 38px;
131
- cursor: pointer;
132
- display: flex;
133
- flex-direction: row;
134
- justify-content: center;
135
- align-items: center;
136
- padding: 0px 15px 0px 13px;
137
- font-weight: 600;
138
- font-size: 14px;
139
- color: #353A41;
140
- background: #F3F4F5;
141
- border-radius: 2px;
142
- border: 1px solid #DCDDE1;
143
- position: relative;
144
- text-decoration: none;
145
- transition: all 0.3s ease;
146
- box-sizing: border-box;
147
- }
148
- .cff-fb-hd-btn svg {
149
- margin-right: 10px;
150
- width: 16px;
151
- }
152
- .cff-fb-hd-btn:focus {
153
- outline: none;
154
- box-shadow: none;
155
- }
156
- .cff-fb-hd-btn:hover {
157
- color: inherit;
158
- background-color: #fff;
159
- }
160
- .cff-fb-hd-btn i{
161
- margin: 0px 5px;
162
- }
163
- .cff-fb-hd-btn[data-icon="left"]{
164
- padding-right: 20px!important;
165
- }
166
- .cff-fb-full-wrapper .section-header h1 {
167
- font-size: 32px;
168
- line-height: 40px;
169
- }
170
- /*** 3.0 - SB CONTAINER ***/
171
- .cff-sb-container {
172
- max-width: 875px;
173
- position: relative;
174
- margin: auto;
175
- margin-top: 33px;
176
- box-sizing: border-box;
177
- }
178
-
179
- /*** 3.1 - SECTION HEADER ***/
180
- .cff-section-header h2 {
181
- font-weight: 600;
182
- font-size: 32px;
183
- line-height: 40px;
184
- color: #141B38;
185
- margin: 0 0 5px 0;
186
- }
187
-
188
- .cff-section-header p {
189
- font-size: 13px;
190
- line-height: 18px;
191
- color: #8C8F9A;
192
- margin: 0;
193
- }
194
- .cff-section-second-header {
195
- margin-top: 36px;
196
- }
197
- .cff-section-second-header h3 {
198
- font-weight: 600;
199
- font-size: 24px;
200
- line-height: 29px;
201
- color: #141B38;
202
- margin: 0 0 5px 0;
203
- }
204
- .cff-section-second-header p {
205
- font-size: 14px;
206
- line-height: 22px;
207
- color: #8C8F9A;
208
- margin-top: 0px;
209
- }
210
- .cff-oembed-plugin-box {
211
- background: #FFFFFF;
212
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
213
- margin-bottom: 10px;
214
- padding: 12px 20px;
215
- display: flex;
216
- justify-content: space-between;
217
- align-items: center;
218
- }
219
- .sb-action-buttons .cff-btn {
220
- display: flex;
221
- align-items: center;
222
- vertical-align: middle;
223
- justify-content: center;
224
- background: #F3F4F5;
225
- border: 1px solid #DCDDE1;
226
- box-sizing: border-box;
227
- border-radius: 2px;
228
- padding: 6px 19px;
229
- font-weight: 600;
230
- font-size: 12px;
231
- line-height: 18px;
232
- color: #141B38;
233
- box-sizing: border-box;
234
- letter-spacing: 0.2px;
235
- cursor: pointer;
236
- text-decoration: none;
237
- transition: all 0.15s ease-in-out;
238
- }
239
- .sb-action-buttons .cff-btn:hover {
240
- background: #FFFFFF;
241
- border: 1px solid #D0D1D7;
242
- }
243
- .sb-action-buttons .cff-btn:focus,
244
- .sb-action-buttons .cff-btn:active {
245
- background: #E8E8EB;
246
- border: 1px solid #D0D1D7;
247
- box-shadow: none;
248
- outline: none;
249
- }
250
- .sb-action-buttons .cff-btn.loading svg {
251
- height: 13px;
252
- transform: translate(0px, 2px);
253
- }
254
- .sb-action-buttons .cff-btn.sb-btn-add svg {
255
- margin-right: 10px;
256
- height: 10px;
257
- }
258
- .sb-action-buttons .cff-btn.sb-btn-add path {
259
- fill: #141B38;
260
- }
261
- .sb-action-buttons .cff-btn.sb-btn-installed {
262
- background: #E8E8EB;
263
- color: #8C8F9A;
264
- cursor: not-allowed
265
- }
266
- .sb-action-buttons .cff-btn.sb-btn-add {
267
- min-width: 110px;
268
- }
269
- .sb-action-buttons .cff-btn.sb-btn-activate {
270
- background-color: #0068A0;
271
- border-color: #0068A0;
272
- color: #fff;
273
- }
274
- .sb-action-buttons .cff-btn.sb-btn-activate:hover {
275
- background-color: #0096CC;
276
- border-color: #0096CC;
277
- }
278
- .sb-action-buttons .cff-btn.sb-btn-activate:focus,
279
- .sb-action-buttons .cff-btn.sb-btn-activate:active {
280
- background-color: #004D77;
281
- border-color: #004D77;
282
- }
283
- .sb-action-buttons .cff-btn.sb-btn-deactivate {
284
- background-color: #D72C2C;
285
- border-color: #D72C2C;
286
- color: #fff;
287
- display: none;
288
- }
289
- .sb-action-buttons .cff-btn.sb-btn-deactivate:hover {
290
- background-color: #DF5757;
291
- border-color: #DF5757;
292
- }
293
- .sb-action-buttons .cff-btn.sb-btn-deactivate:focus,
294
- .sb-action-buttons .cff-btn.sb-btn-deactivate:active {
295
- background-color: #841919;
296
- border-color: #841919;
297
- }
298
- .sb-action-buttons .cff-btn:not(:last-child) {
299
- margin-right: 8px;
300
- }
301
- .sb-btn-add-plugin svg {
302
- height: 10px;
303
- margin-right: 10px;
304
- }
305
- .sb-btn-add-plugin svg path {
306
- fill: #141B38;
307
- }
308
- .sb-btn-installed svg {
309
- margin-right: 10px;
310
- }
311
- /*** 3.2 - ABOUT TEAM BOX ***/
312
- .cff-about-box {
313
- margin-top: 11px;
314
- }
315
- .cff-about-box .sb-team-avatar {
316
- padding: 55px 0 50px;
317
- background-image: linear-gradient(to right, #0068A0 , #0096CC);
318
- text-align: center;
319
- }
320
- .cff-about-box .sb-team-avatar img {
321
- max-width: 100%;
322
- width: 603px;
323
- }
324
- .cff-about-box .sb-team-info {
325
- display: flex;
326
- padding: 48px;
327
- background: #fff;
328
- box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
329
- border-radius: 0 0 2px 2px;
330
- text-align: left;
331
- }
332
- .cff-about-box .sb-team-info .sb-team-left h2 {
333
- font-size: 24px;
334
- line-height: 29px;
335
- letter-spacing: 0;
336
- color: #141B38;
337
- margin: 0;
338
- padding-right: 5px;
339
- }
340
- .cff-about-box .sb-team-info .sb-team-right {
341
- padding-left: 37px;
342
- max-width: 365px;
343
- box-sizing: border-box;
344
- }
345
- .cff-about-box .sb-team-info .sb-team-right p {
346
- font-size: 14px;
347
- line-height: 22px;
348
- color: #64748B;
349
- margin-top: 0;
350
- }
351
-
352
- /*** 3.3 - EXTENSION PLUGINS BOX CONTAINER ***/
353
- .cff-plugins-boxes-container {
354
- display: flex;
355
- flex-wrap: wrap;
356
- align-items: center;
357
- justify-content: space-between;
358
- margin-top: 20px;
359
- gap: 12px;
360
- }
361
- .cff-plugins-boxes-container.sb-recommended-plugins {
362
- margin-top: 26px;
363
- }
364
- .cff-plugins-boxes-container .sb-plugins-box{
365
- background-color: #fff;
366
- padding: 20px 16px;
367
- box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
368
- border-radius: 4px;
369
- display: flex;
370
- width: calc((100% / 2) - 6px);
371
- box-sizing: border-box;
372
- }
373
- .cff-plugins-boxes-container .sb-plugins-box .icon {
374
- max-width: 80px;
375
- padding-right: 5px;
376
- box-sizing: border-box;
377
- width: 80px;
378
- min-width: 72px;
379
- }
380
- .cff-plugins-boxes-container.sb-recommended-plugins .sb-plugins-box .icon {
381
- max-width: 80px;
382
- padding-right: 23px;
383
- box-sizing: border-box;
384
- width: 80px;
385
- min-width: 72px;
386
- padding-left: 8px;
387
- }
388
- .cff-plugins-boxes-container .sb-plugins-box .icon img {
389
- max-width: 100%;
390
- }
391
- .sb-plugins-box .sb-box-title {
392
- font-weight: 600;
393
- font-size: 16px;
394
- line-height: 22px;
395
- color: #141B38;
396
- margin-top: 0;
397
- margin-bottom: 5px;
398
- }
399
- .sb-plugins-box .sb-box-description {
400
- margin: 0;
401
- font-size: 13px;
402
- line-height: 18px;
403
- color: #8C8F9A;
404
- }
405
- .sb-recommended-plugins .sb-plugins-box .sb-box-description {
406
- min-height: 69px;
407
- }
408
- .sb-plugins-box .sb-action-buttons {
409
- margin-top: 20px;
410
- display: flex;
411
- }
412
-
413
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
414
- padding: 27px 20px 35px 120px;
415
- flex-basis: 100%;
416
- margin-right: 0;
417
- justify-content: center;
418
- position: relative;
419
- overflow: hidden;
420
- }
421
- .cff-social-wall-plugin-box .sb-action-buttons .sb-btn-add {
422
- padding: 6px 4px 6px 15px;
423
- }
424
- .cff-social-wall-plugin-box .sb-action-buttons .sb-btn-add span {
425
- margin-left: 12px;
426
- }
427
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box .plugin-box-content {
428
- z-index: 11;
429
- }
430
- .cff-social-wall-plugin-box .sb-box-title {
431
- font-size: 24px;
432
- line-height: 27px;
433
- letter-spacing: 0;
434
- color: #141B38;
435
- }
436
- .cff-social-wall-plugin-box .sb-box-description {
437
- font-size: 14px;
438
- line-height: 22px;
439
- color: #8C8F9A;
440
- }
441
- .cff-social-wall-plugin-box .sb-box-bg-image {
442
- position: absolute;
443
- z-index: 0;
444
- left: -40px;
445
- width: 356px;
446
- top: 0;
447
- }
448
- .cff-social-wall-plugin-box .sb-box-bg-image img {
449
- max-width: 100%;
450
- }
451
-
452
-
453
- /*** 4.0 Sticky Widget ***/
454
- .cff-stck-wdg{
455
- position: fixed;
456
- right: 21px;
457
- z-index: 9;
458
- bottom: 20px;
459
- }
460
- .cff-stck-wdg-btn{
461
- width: 52px;
462
- height: 52px;
463
- background: #fff;
464
- border-radius: 50%;
465
- cursor: pointer;
466
- display: flex;
467
- justify-content: center;
468
- align-items: center;
469
- filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
470
- }
471
- .cff-stck-wdg-btn svg{
472
- width: 25px;
473
- fill: #E34F0E;
474
- height: 33px;
475
- float: left;
476
- }
477
-
478
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
479
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
480
- display: block;
481
- }
482
- .cff-stck-wdg-btn-cls{
483
- width: inherit;
484
- height: inherit;
485
- position: relative;
486
- color: #364152;
487
- box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
488
- border-radius: 70px;
489
- }
490
- .cff-stck-wdg-btn-cls svg {
491
- width: 14px;
492
- height: 14px;
493
- position: absolute;
494
- top: 50%;
495
- right: 0;
496
- bottom: 0;
497
- left: 50%;
498
- margin-top: -7px;
499
- margin-left: -7px;
500
- }
501
-
502
- .cff-stck-pop{
503
- position: absolute;
504
- width: 292px;
505
- height: auto;
506
- background: #fff;
507
- border: 1px solid #E2E8F0;
508
- box-sizing: border-box;
509
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
510
- border-radius: 2px;
511
- padding: 20px;
512
- right: 0px;
513
- bottom: 66px;
514
- color: #141B38;
515
- padding-bottom: 82px;
516
- }
517
- .cff-stck-wdg[data-active="true"] .cff-stck-pop{
518
- bottom: 66px;
519
- opacity: 1;
520
- visibility: visible;
521
- }
522
-
523
- .cff-stck-pop svg{
524
- fill: currentColor;
525
- }
526
- .cff-stck-el-list{
527
- border: 1px solid #DCDDE1;
528
- border-radius: 2px;
529
- }
530
- .cff-stck-el{
531
- display: flex;
532
- align-items: center;
533
- padding: 12px 13px 11px;
534
- border-bottom: 1px solid #DCDDE1;
535
- transition: background .15s ease-in-out;
536
- font-size: 12px;
537
- }
538
- .cff-stck-el:hover{
539
- background: #F3F4F5;
540
- }
541
- .cff-stck-el:last-of-type{
542
- border-bottom: 0px;
543
- }
544
- .cff-stck-el-list .cff-chevron svg{
545
- width: 5px;
546
- height: 8px;
547
- }
548
- .cff-fs-a {
549
- width: 100%;
550
- height: 100%;
551
- display: block;
552
- position: absolute;
553
- left: 0;
554
- top: 0;
555
- z-index: 1;
556
- }
557
- .cff-stck-el .cff-stck-el-txt{
558
- color: #27303F;
559
- }
560
- .cff-stck-el.cff-stck-el-upgrd{
561
- padding: 9px 14px;
562
- font-size: 14px;
563
- background: var(--cl-orange);
564
- color: #fff;
565
- position: relative;
566
- transition: background .15s ease-in-out;
567
- font-weight: 600;
568
- }
569
- .cff-chevron {
570
- position: absolute;
571
- right: 14px
572
- }
573
- .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
574
- color: #fff;
575
- }
576
- .cff-stck-el.cff-stck-el-upgrd:after{
577
- top: 20px;
578
- opacity: 1;
579
- }
580
- .cff-stck-el-icon{
581
- margin-right: 10px;
582
- }
583
- .cff-stck-el-icon svg{
584
- width: 17px;
585
- float: left;
586
- }
587
- .cff-stck-title{
588
- margin-top: 20px;
589
- margin-bottom: 10px;
590
- color: #141B38;
591
- font-weight: 600;
592
- font-size: 14px;
593
- line-height: 160%;
594
- }
595
- .cff-stck-follow{
596
- background: #F3F4F5;
597
- margin-top: 20px;
598
- left: 0px;
599
- bottom: 0px;
600
- position: absolute;
601
- padding: 12px 20px;
602
- display: flex;
603
- align-items: center;
604
- }
605
- .cff-stck-follow span{
606
- font-weight: 600;
607
- font-size: 14px;
608
- }
609
- .cff-stck-flw-links{
610
- display: flex;
611
- justify-content: center;
612
- align-items: center;
613
- margin-left: auto;
614
- }
615
- .cff-stck-flw-links a{
616
- width: 36px;
617
- height: 28px;
618
- color: inherit;
619
- display: inline-flex;
620
- justify-content: center;
621
- align-items: center;
622
- margin-left: 4px;
623
- border-radius: 2px;
624
- transition: background .15s ease-in-out;
625
- }
626
- .cff-stck-flw-links svg{
627
- width: 17px;
628
- color: #141B38;
629
- }
630
- .cff-stck-flw-links a:hover{
631
- background: #fff;
632
- }
633
- .cff-stck-flw-links a:hover svg{
634
- color: inherit;
635
- }
636
-
637
-
638
- /*** 5.0 - RESPONSIVENESS ***/
639
- @media (max-width: 1024px) {
640
- .cff-extensions-boxes-container .sb-extensions-box{
641
- width: calc(48% - 33px);
642
- }
643
- .cff-extensions-boxes-container .sb-extensions-box:not(:nth-child(3n)) {
644
- margin-right: 0;
645
- }
646
- .cff-extensions-boxes-container .sb-extensions-box:not(:nth-child(2n)) {
647
- margin-right: 12px;
648
- }
649
- .cff-plugins-boxes-container {
650
- padding-right: 0px;
651
- }
652
- .cff-social-wall-plugin-box .sb-box-bg-image {
653
- left: -45px;
654
- }
655
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
656
- padding: 27px 20px 22px 130px;
657
- }
658
- .cff-section-second-header {
659
- padding-right: 15px;
660
- }
661
- }
662
- @media (min-width: 768px) and (max-width: 1024px) {
663
- .cff-social-wall-plugin-box .sb-box-bg-image {
664
- left: -85px;
665
- }
666
- .sb-action-buttons .cff-btn {
667
- padding: 6px 15px;
668
- }
669
- .sb-recommended-plugins .sb-plugins-box {
670
- min-height: 209px;
671
- }
672
- .sb-recommended-plugins .sb-plugins-box .sb-box-description {
673
- min-height: 90px;
674
- }
675
-
676
- }
677
- @media (max-width: 767px) {
678
- .auto-fold #wpcontent {
679
- padding-left: 0;
680
- }
681
- .cff-fb-full-wrapper {
682
- padding: 70px 20px 0 20px;
683
- }
684
- .cff-fb-hd-btn {
685
- padding: 0px 15px 0px 7px;
686
- }
687
- .cff-fb-header {
688
- padding: 0px 20px;
689
- }
690
- .cff-about-box .sb-team-info {
691
- padding: 30px;
692
- }
693
- .cff-plugins-boxes-container .sb-plugins-box {
694
- width: 100%;
695
- }
696
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
697
- display: flex;
698
- flex-direction: column;
699
- padding: 0px;
700
- }
701
- .cff-social-wall-plugin-box .sb-box-bg-image {
702
- position: initial;
703
- background-color: #c3d7f3;
704
- width: 100%;
705
- height: 190px;
706
- }
707
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box .plugin-box-content {
708
- padding: 18px 24px 24px;
709
- }
710
- .cff-social-wall-plugin-box .sb-box-title {
711
- font-size: 18px;
712
- }
713
- .cff-social-wall-plugin-box .sb-box-bg-image img {
714
- max-width: 401px;
715
- }
716
- .cff-about-box .sb-team-info {
717
- flex-direction: column;
718
- }
719
- .cff-about-box .sb-team-info .sb-team-right {
720
- padding-left: 0;
721
- max-width: none;
722
- margin-top: 30px;
723
- }
724
-
725
- .sb-recommended-plugins .sb-plugins-box .sb-box-description {
726
- min-height: initial;
727
- }
728
- .cff-about-box .sb-team-avatar {
729
- display: none;
730
- }
731
- .cff-about-box .sb-team-info .sb-team-left h2 {
732
- font-size: 21px;
733
- }
734
- }
735
-
736
- @media (max-width: 570px) {
737
- .cff-extensions-boxes-container .sb-extensions-box {
738
- width: calc(100% - 30px);
739
- }
740
- .cff-plugins-boxes-container {
741
- padding-right: 0px;
742
- }
743
- .cff-plugins-boxes-container .sb-plugins-box:not(:nth-child(2n)) {
744
- margin-right: 0px;
745
- }
746
- }
747
-
748
- @media (max-width: 480px) {
749
- .cff-fb-hd-btn {
750
- padding: 0px 10px 0px 7px !important;
751
- }
752
- .cff-fb-hd-btn[data-icon="left"] {
753
- padding-right: 10px!important;
754
- }
755
- .cff-plugins-boxes-container .sb-plugins-box .icon {
756
- width: 60px;
757
- min-width: 60px;
758
- }
759
- .cff-plugins-boxes-container.sb-recommended-plugins .sb-plugins-box .icon {
760
- padding-right: 11px;
761
- width: 58px;
762
- min-width: 58px;
763
- padding-left: 8px;
764
- }
765
- }
1
+ /*
2
+ * About Us CSS TABLE OF CONTENTS
3
+ *
4
+ * 1.0 - GLOBAL
5
+ * 2.0 - HEADER
6
+ * 3.0 - 3.0 - ABOUT US CONTAINER
7
+ * 3.1 - SECTION HEADER
8
+ * 3.2 - ABOUT TEAM BOX
9
+ * 3.3 - PLUGINS BOX
10
+ * 4.0 - STICKY WIDGET
11
+ * 5.0 - RESPONSIVENESS
12
+ */
13
+
14
+ /*** 1.0 - GLOBAL ***/
15
+ .clearfix { display: inline-block; }
16
+ /* start commented backslash hack \*/
17
+ * html .clearfix { height: 1%; }
18
+ .clearfix { display: block; }
19
+ #cff-about {
20
+ -webkit-font-smoothing: antialiased;
21
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
22
+ }
23
+ #wpcontent {
24
+ padding-left: 0px;
25
+ }
26
+ #wpbody-content {
27
+ padding-bottom: 40px;
28
+ }
29
+ .clearfix:after {
30
+ visibility: hidden;
31
+ display: block;
32
+ font-size: 0;
33
+ content: " ";
34
+ clear: both;
35
+ height: 0;
36
+ }
37
+ /*orange*/
38
+ .sb-btn-orange{
39
+ background: #E34F0E!important;
40
+ color: #fff!important;
41
+ }
42
+ .sb-btn-orange:hover{
43
+ background: #F37036!important;
44
+ color: #fff!important;
45
+ }
46
+ .sb-btn-orange:focus,
47
+ .sb-btn-orange:active{
48
+ background: #B8400B!important;
49
+ color: #fff!important;
50
+ }
51
+ .cff-fb-full-wrapper{
52
+ padding: 0 53px;
53
+ padding-top: 82px;
54
+ }
55
+ .cff-fb-fs {
56
+ width: 100%;
57
+ position: relative;
58
+ float: left;
59
+ box-sizing: border-box;
60
+ }
61
+
62
+ /*** 2.0 - HEADER ***/
63
+ .cff-fb-create-ctn{
64
+ margin-top: 90px;
65
+ }
66
+ .cff-fb-header{
67
+ height: 64px;
68
+ position: absolute;
69
+ display: flex;
70
+ flex-direction: row;
71
+ justify-content: space-between;
72
+ align-items: center;
73
+ background: #fff;
74
+ padding: 0px 52px;
75
+ z-index: 2;
76
+ }
77
+ .cff-fb-header-left {
78
+ display: flex;
79
+ }
80
+ .cff-fb-header-left .sb-social-wall-link-wrap {
81
+ margin-left: 30px;
82
+ }
83
+ .sb-social-wall-link-wrap {
84
+ display: flex;
85
+ font-size: 14px;
86
+ margin: 10px 0 10px 30px;
87
+ }
88
+ .sb-social-wall-link:first-child {
89
+ padding-left: 0;
90
+ border-right: 1px solid #ccc;
91
+ color: #0068A0!important;
92
+ line-height: 1;
93
+ }
94
+ .sb-social-wall-link {
95
+ padding: 0 12px;
96
+ border-right: 1px solid #ccc;
97
+ color: #0068A0!important;
98
+ line-height: 1;
99
+ }
100
+ .sb-social-wall-link a {
101
+ text-decoration: none;
102
+ }
103
+ .sb-social-wall-link a:focus {
104
+ outline: none;
105
+ box-shadow: none;
106
+ }
107
+ .sb-social-wall-link:last-child {
108
+ border-right: none;
109
+ }
110
+ .cff-fb-hd-logo{
111
+ display: flex;
112
+ vertical-align: middle;
113
+ align-items: center;
114
+ gap: 5px;
115
+ }
116
+ .cff-fb-hd-logo .sb-logo-letters-wrap {
117
+ margin-bottom: 4px;
118
+ }
119
+ .cff-fb-hd-logo .breadcrumb-title{
120
+ font-size: 14px;
121
+ font-weight: 400;
122
+ line-height: 22px;
123
+ letter-spacing: 0em;
124
+ margin-left: 4px;
125
+ }
126
+ .cff-fb-hd-logo .separator{
127
+ margin: 0 5px 0 10px;
128
+ }
129
+ .cff-fb-hd-btn{
130
+ height: 38px;
131
+ cursor: pointer;
132
+ display: flex;
133
+ flex-direction: row;
134
+ justify-content: center;
135
+ align-items: center;
136
+ padding: 0px 15px 0px 13px;
137
+ font-weight: 600;
138
+ font-size: 14px;
139
+ color: #353A41;
140
+ background: #F3F4F5;
141
+ border-radius: 2px;
142
+ border: 1px solid #DCDDE1;
143
+ position: relative;
144
+ text-decoration: none;
145
+ transition: all 0.3s ease;
146
+ box-sizing: border-box;
147
+ }
148
+ .cff-fb-hd-btn svg {
149
+ margin-right: 10px;
150
+ width: 16px;
151
+ }
152
+ .cff-fb-hd-btn:focus {
153
+ outline: none;
154
+ box-shadow: none;
155
+ }
156
+ .cff-fb-hd-btn:hover {
157
+ color: inherit;
158
+ background-color: #fff;
159
+ }
160
+ .cff-fb-hd-btn i{
161
+ margin: 0px 5px;
162
+ }
163
+ .cff-fb-hd-btn[data-icon="left"]{
164
+ padding-right: 20px!important;
165
+ }
166
+ .cff-fb-full-wrapper .section-header h1 {
167
+ font-size: 32px;
168
+ line-height: 40px;
169
+ }
170
+ /*** 3.0 - SB CONTAINER ***/
171
+ .cff-sb-container {
172
+ max-width: 875px;
173
+ position: relative;
174
+ margin: auto;
175
+ margin-top: 33px;
176
+ box-sizing: border-box;
177
+ }
178
+
179
+ /*** 3.1 - SECTION HEADER ***/
180
+ .cff-section-header h2 {
181
+ font-weight: 600;
182
+ font-size: 32px;
183
+ line-height: 40px;
184
+ color: #141B38;
185
+ margin: 0 0 5px 0;
186
+ }
187
+
188
+ .cff-section-header p {
189
+ font-size: 13px;
190
+ line-height: 18px;
191
+ color: #8C8F9A;
192
+ margin: 0;
193
+ }
194
+ .cff-section-second-header {
195
+ margin-top: 36px;
196
+ }
197
+ .cff-section-second-header h3 {
198
+ font-weight: 600;
199
+ font-size: 24px;
200
+ line-height: 29px;
201
+ color: #141B38;
202
+ margin: 0 0 5px 0;
203
+ }
204
+ .cff-section-second-header p {
205
+ font-size: 14px;
206
+ line-height: 22px;
207
+ color: #8C8F9A;
208
+ margin-top: 0px;
209
+ }
210
+ .cff-oembed-plugin-box {
211
+ background: #FFFFFF;
212
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
213
+ margin-bottom: 10px;
214
+ padding: 12px 20px;
215
+ display: flex;
216
+ justify-content: space-between;
217
+ align-items: center;
218
+ }
219
+ .sb-action-buttons .cff-btn {
220
+ display: flex;
221
+ align-items: center;
222
+ vertical-align: middle;
223
+ justify-content: center;
224
+ background: #F3F4F5;
225
+ border: 1px solid #DCDDE1;
226
+ box-sizing: border-box;
227
+ border-radius: 2px;
228
+ padding: 6px 19px;
229
+ font-weight: 600;
230
+ font-size: 12px;
231
+ line-height: 18px;
232
+ color: #141B38;
233
+ box-sizing: border-box;
234
+ letter-spacing: 0.2px;
235
+ cursor: pointer;
236
+ text-decoration: none;
237
+ transition: all 0.15s ease-in-out;
238
+ }
239
+ .sb-action-buttons .cff-btn:hover {
240
+ background: #FFFFFF;
241
+ border: 1px solid #D0D1D7;
242
+ }
243
+ .sb-action-buttons .cff-btn:focus,
244
+ .sb-action-buttons .cff-btn:active {
245
+ background: #E8E8EB;
246
+ border: 1px solid #D0D1D7;
247
+ box-shadow: none;
248
+ outline: none;
249
+ }
250
+ .sb-action-buttons .cff-btn.loading svg {
251
+ height: 13px;
252
+ transform: translate(0px, 2px);
253
+ }
254
+ .sb-action-buttons .cff-btn.sb-btn-add svg {
255
+ margin-right: 10px;
256
+ height: 10px;
257
+ }
258
+ .sb-action-buttons .cff-btn.sb-btn-add path {
259
+ fill: #141B38;
260
+ }
261
+ .sb-action-buttons .cff-btn.sb-btn-installed {
262
+ background: #E8E8EB;
263
+ color: #8C8F9A;
264
+ cursor: not-allowed
265
+ }
266
+ .sb-action-buttons .cff-btn.sb-btn-add {
267
+ min-width: 110px;
268
+ }
269
+ .sb-action-buttons .cff-btn.sb-btn-activate {
270
+ background-color: #0068A0;
271
+ border-color: #0068A0;
272
+ color: #fff;
273
+ }
274
+ .sb-action-buttons .cff-btn.sb-btn-activate:hover {
275
+ background-color: #0096CC;
276
+ border-color: #0096CC;
277
+ }
278
+ .sb-action-buttons .cff-btn.sb-btn-activate:focus,
279
+ .sb-action-buttons .cff-btn.sb-btn-activate:active {
280
+ background-color: #004D77;
281
+ border-color: #004D77;
282
+ }
283
+ .sb-action-buttons .cff-btn.sb-btn-deactivate {
284
+ background-color: #D72C2C;
285
+ border-color: #D72C2C;
286
+ color: #fff;
287
+ display: none;
288
+ }
289
+ .sb-action-buttons .cff-btn.sb-btn-deactivate:hover {
290
+ background-color: #DF5757;
291
+ border-color: #DF5757;
292
+ }
293
+ .sb-action-buttons .cff-btn.sb-btn-deactivate:focus,
294
+ .sb-action-buttons .cff-btn.sb-btn-deactivate:active {
295
+ background-color: #841919;
296
+ border-color: #841919;
297
+ }
298
+ .sb-action-buttons .cff-btn:not(:last-child) {
299
+ margin-right: 8px;
300
+ }
301
+ .sb-btn-add-plugin svg {
302
+ height: 10px;
303
+ margin-right: 10px;
304
+ }
305
+ .sb-btn-add-plugin svg path {
306
+ fill: #141B38;
307
+ }
308
+ .sb-btn-installed svg {
309
+ margin-right: 10px;
310
+ }
311
+ /*** 3.2 - ABOUT TEAM BOX ***/
312
+ .cff-about-box {
313
+ margin-top: 11px;
314
+ }
315
+ .cff-about-box .sb-team-avatar {
316
+ padding: 55px 0 50px;
317
+ background-image: linear-gradient(to right, #0068A0 , #0096CC);
318
+ text-align: center;
319
+ }
320
+ .cff-about-box .sb-team-avatar img {
321
+ max-width: 100%;
322
+ width: 603px;
323
+ }
324
+ .cff-about-box .sb-team-info {
325
+ display: flex;
326
+ padding: 48px;
327
+ background: #fff;
328
+ box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
329
+ border-radius: 0 0 2px 2px;
330
+ text-align: left;
331
+ }
332
+ .cff-about-box .sb-team-info .sb-team-left h2 {
333
+ font-size: 24px;
334
+ line-height: 29px;
335
+ letter-spacing: 0;
336
+ color: #141B38;
337
+ margin: 0;
338
+ padding-right: 5px;
339
+ }
340
+ .cff-about-box .sb-team-info .sb-team-right {
341
+ padding-left: 37px;
342
+ max-width: 365px;
343
+ box-sizing: border-box;
344
+ }
345
+ .cff-about-box .sb-team-info .sb-team-right p {
346
+ font-size: 14px;
347
+ line-height: 22px;
348
+ color: #64748B;
349
+ margin-top: 0;
350
+ }
351
+
352
+ /*** 3.3 - EXTENSION PLUGINS BOX CONTAINER ***/
353
+ .cff-plugins-boxes-container {
354
+ display: flex;
355
+ flex-wrap: wrap;
356
+ align-items: center;
357
+ justify-content: space-between;
358
+ margin-top: 20px;
359
+ gap: 12px;
360
+ }
361
+ .cff-plugins-boxes-container.sb-recommended-plugins {
362
+ margin-top: 26px;
363
+ }
364
+ .cff-plugins-boxes-container .sb-plugins-box{
365
+ background-color: #fff;
366
+ padding: 20px 16px;
367
+ box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
368
+ border-radius: 4px;
369
+ display: flex;
370
+ width: calc((100% / 2) - 6px);
371
+ box-sizing: border-box;
372
+ }
373
+ .cff-plugins-boxes-container .sb-plugins-box .icon {
374
+ max-width: 80px;
375
+ padding-right: 5px;
376
+ box-sizing: border-box;
377
+ width: 80px;
378
+ min-width: 72px;
379
+ }
380
+ .cff-plugins-boxes-container.sb-recommended-plugins .sb-plugins-box .icon {
381
+ max-width: 80px;
382
+ padding-right: 23px;
383
+ box-sizing: border-box;
384
+ width: 80px;
385
+ min-width: 72px;
386
+ padding-left: 8px;
387
+ }
388
+ .cff-plugins-boxes-container .sb-plugins-box .icon img {
389
+ max-width: 100%;
390
+ }
391
+ .sb-plugins-box .sb-box-title {
392
+ font-weight: 600;
393
+ font-size: 16px;
394
+ line-height: 22px;
395
+ color: #141B38;
396
+ margin-top: 0;
397
+ margin-bottom: 5px;
398
+ }
399
+ .sb-plugins-box .sb-box-description {
400
+ margin: 0;
401
+ font-size: 13px;
402
+ line-height: 18px;
403
+ color: #8C8F9A;
404
+ }
405
+ .sb-recommended-plugins .sb-plugins-box .sb-box-description {
406
+ min-height: 69px;
407
+ }
408
+ .sb-plugins-box .sb-action-buttons {
409
+ margin-top: 20px;
410
+ display: flex;
411
+ }
412
+
413
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
414
+ padding: 27px 20px 35px 120px;
415
+ flex-basis: 100%;
416
+ margin-right: 0;
417
+ justify-content: center;
418
+ position: relative;
419
+ overflow: hidden;
420
+ }
421
+ .cff-social-wall-plugin-box .sb-action-buttons .sb-btn-add {
422
+ padding: 6px 4px 6px 15px;
423
+ }
424
+ .cff-social-wall-plugin-box .sb-action-buttons .sb-btn-add span {
425
+ margin-left: 12px;
426
+ }
427
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box .plugin-box-content {
428
+ z-index: 11;
429
+ }
430
+ .cff-social-wall-plugin-box .sb-box-title {
431
+ font-size: 24px;
432
+ line-height: 27px;
433
+ letter-spacing: 0;
434
+ color: #141B38;
435
+ }
436
+ .cff-social-wall-plugin-box .sb-box-description {
437
+ font-size: 14px;
438
+ line-height: 22px;
439
+ color: #8C8F9A;
440
+ }
441
+ .cff-social-wall-plugin-box .sb-box-bg-image {
442
+ position: absolute;
443
+ z-index: 0;
444
+ left: -40px;
445
+ width: 356px;
446
+ top: 0;
447
+ }
448
+ .cff-social-wall-plugin-box .sb-box-bg-image img {
449
+ max-width: 100%;
450
+ }
451
+
452
+
453
+ /*** 4.0 Sticky Widget ***/
454
+ .cff-stck-wdg{
455
+ position: fixed;
456
+ right: 21px;
457
+ z-index: 9;
458
+ bottom: 20px;
459
+ }
460
+ .cff-stck-wdg-btn{
461
+ width: 52px;
462
+ height: 52px;
463
+ background: #fff;
464
+ border-radius: 50%;
465
+ cursor: pointer;
466
+ display: flex;
467
+ justify-content: center;
468
+ align-items: center;
469
+ filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
470
+ }
471
+ .cff-stck-wdg-btn svg{
472
+ width: 25px;
473
+ fill: #E34F0E;
474
+ height: 33px;
475
+ float: left;
476
+ }
477
+
478
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
479
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
480
+ display: block;
481
+ }
482
+ .cff-stck-wdg-btn-cls{
483
+ width: inherit;
484
+ height: inherit;
485
+ position: relative;
486
+ color: #364152;
487
+ box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
488
+ border-radius: 70px;
489
+ }
490
+ .cff-stck-wdg-btn-cls svg {
491
+ width: 14px;
492
+ height: 14px;
493
+ position: absolute;
494
+ top: 50%;
495
+ right: 0;
496
+ bottom: 0;
497
+ left: 50%;
498
+ margin-top: -7px;
499
+ margin-left: -7px;
500
+ }
501
+
502
+ .cff-stck-pop{
503
+ position: absolute;
504
+ width: 292px;
505
+ height: auto;
506
+ background: #fff;
507
+ border: 1px solid #E2E8F0;
508
+ box-sizing: border-box;
509
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
510
+ border-radius: 2px;
511
+ padding: 20px;
512
+ right: 0px;
513
+ bottom: 66px;
514
+ color: #141B38;
515
+ padding-bottom: 82px;
516
+ }
517
+ .cff-stck-wdg[data-active="true"] .cff-stck-pop{
518
+ bottom: 66px;
519
+ opacity: 1;
520
+ visibility: visible;
521
+ }
522
+
523
+ .cff-stck-pop svg{
524
+ fill: currentColor;
525
+ }
526
+ .cff-stck-el-list{
527
+ border: 1px solid #DCDDE1;
528
+ border-radius: 2px;
529
+ }
530
+ .cff-stck-el{
531
+ display: flex;
532
+ align-items: center;
533
+ padding: 12px 13px 11px;
534
+ border-bottom: 1px solid #DCDDE1;
535
+ transition: background .15s ease-in-out;
536
+ font-size: 12px;
537
+ }
538
+ .cff-stck-el:hover{
539
+ background: #F3F4F5;
540
+ }
541
+ .cff-stck-el:last-of-type{
542
+ border-bottom: 0px;
543
+ }
544
+ .cff-stck-el-list .cff-chevron svg{
545
+ width: 5px;
546
+ height: 8px;
547
+ }
548
+ .cff-fs-a {
549
+ width: 100%;
550
+ height: 100%;
551
+ display: block;
552
+ position: absolute;
553
+ left: 0;
554
+ top: 0;
555
+ z-index: 1;
556
+ }
557
+ .cff-stck-el .cff-stck-el-txt{
558
+ color: #27303F;
559
+ }
560
+ .cff-stck-el.cff-stck-el-upgrd{
561
+ padding: 9px 14px;
562
+ font-size: 14px;
563
+ background: var(--cl-orange);
564
+ color: #fff;
565
+ position: relative;
566
+ transition: background .15s ease-in-out;
567
+ font-weight: 600;
568
+ }
569
+ .cff-chevron {
570
+ position: absolute;
571
+ right: 14px
572
+ }
573
+ .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
574
+ color: #fff;
575
+ }
576
+ .cff-stck-el.cff-stck-el-upgrd:after{
577
+ top: 20px;
578
+ opacity: 1;
579
+ }
580
+ .cff-stck-el-icon{
581
+ margin-right: 10px;
582
+ }
583
+ .cff-stck-el-icon svg{
584
+ width: 17px;
585
+ float: left;
586
+ }
587
+ .cff-stck-title{
588
+ margin-top: 20px;
589
+ margin-bottom: 10px;
590
+ color: #141B38;
591
+ font-weight: 600;
592
+ font-size: 14px;
593
+ line-height: 160%;
594
+ }
595
+ .cff-stck-follow{
596
+ background: #F3F4F5;
597
+ margin-top: 20px;
598
+ left: 0px;
599
+ bottom: 0px;
600
+ position: absolute;
601
+ padding: 12px 20px;
602
+ display: flex;
603
+ align-items: center;
604
+ }
605
+ .cff-stck-follow span{
606
+ font-weight: 600;
607
+ font-size: 14px;
608
+ }
609
+ .cff-stck-flw-links{
610
+ display: flex;
611
+ justify-content: center;
612
+ align-items: center;
613
+ margin-left: auto;
614
+ }
615
+ .cff-stck-flw-links a{
616
+ width: 36px;
617
+ height: 28px;
618
+ color: inherit;
619
+ display: inline-flex;
620
+ justify-content: center;
621
+ align-items: center;
622
+ margin-left: 4px;
623
+ border-radius: 2px;
624
+ transition: background .15s ease-in-out;
625
+ }
626
+ .cff-stck-flw-links svg{
627
+ width: 17px;
628
+ color: #141B38;
629
+ }
630
+ .cff-stck-flw-links a:hover{
631
+ background: #fff;
632
+ }
633
+ .cff-stck-flw-links a:hover svg{
634
+ color: inherit;
635
+ }
636
+
637
+
638
+ /*** 5.0 - RESPONSIVENESS ***/
639
+ @media (max-width: 1024px) {
640
+ .cff-extensions-boxes-container .sb-extensions-box{
641
+ width: calc(48% - 33px);
642
+ }
643
+ .cff-extensions-boxes-container .sb-extensions-box:not(:nth-child(3n)) {
644
+ margin-right: 0;
645
+ }
646
+ .cff-extensions-boxes-container .sb-extensions-box:not(:nth-child(2n)) {
647
+ margin-right: 12px;
648
+ }
649
+ .cff-plugins-boxes-container {
650
+ padding-right: 0px;
651
+ }
652
+ .cff-social-wall-plugin-box .sb-box-bg-image {
653
+ left: -45px;
654
+ }
655
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
656
+ padding: 27px 20px 22px 130px;
657
+ }
658
+ .cff-section-second-header {
659
+ padding-right: 15px;
660
+ }
661
+ }
662
+ @media (min-width: 768px) and (max-width: 1024px) {
663
+ .cff-social-wall-plugin-box .sb-box-bg-image {
664
+ left: -85px;
665
+ }
666
+ .sb-action-buttons .cff-btn {
667
+ padding: 6px 15px;
668
+ }
669
+ .sb-recommended-plugins .sb-plugins-box {
670
+ min-height: 209px;
671
+ }
672
+ .sb-recommended-plugins .sb-plugins-box .sb-box-description {
673
+ min-height: 90px;
674
+ }
675
+
676
+ }
677
+ @media (max-width: 767px) {
678
+ .auto-fold #wpcontent {
679
+ padding-left: 0;
680
+ }
681
+ .cff-fb-full-wrapper {
682
+ padding: 70px 20px 0 20px;
683
+ }
684
+ .cff-fb-hd-btn {
685
+ padding: 0px 15px 0px 7px;
686
+ }
687
+ .cff-fb-header {
688
+ padding: 0px 20px;
689
+ }
690
+ .cff-about-box .sb-team-info {
691
+ padding: 30px;
692
+ }
693
+ .cff-plugins-boxes-container .sb-plugins-box {
694
+ width: 100%;
695
+ }
696
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
697
+ display: flex;
698
+ flex-direction: column;
699
+ padding: 0px;
700
+ }
701
+ .cff-social-wall-plugin-box .sb-box-bg-image {
702
+ position: initial;
703
+ background-color: #c3d7f3;
704
+ width: 100%;
705
+ height: 190px;
706
+ }
707
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box .plugin-box-content {
708
+ padding: 18px 24px 24px;
709
+ }
710
+ .cff-social-wall-plugin-box .sb-box-title {
711
+ font-size: 18px;
712
+ }
713
+ .cff-social-wall-plugin-box .sb-box-bg-image img {
714
+ max-width: 401px;
715
+ }
716
+ .cff-about-box .sb-team-info {
717
+ flex-direction: column;
718
+ }
719
+ .cff-about-box .sb-team-info .sb-team-right {
720
+ padding-left: 0;
721
+ max-width: none;
722
+ margin-top: 30px;
723
+ }
724
+
725
+ .sb-recommended-plugins .sb-plugins-box .sb-box-description {
726
+ min-height: initial;
727
+ }
728
+ .cff-about-box .sb-team-avatar {
729
+ display: none;
730
+ }
731
+ .cff-about-box .sb-team-info .sb-team-left h2 {
732
+ font-size: 21px;
733
+ }
734
+ }
735
+
736
+ @media (max-width: 570px) {
737
+ .cff-extensions-boxes-container .sb-extensions-box {
738
+ width: calc(100% - 30px);
739
+ }
740
+ .cff-plugins-boxes-container {
741
+ padding-right: 0px;
742
+ }
743
+ .cff-plugins-boxes-container .sb-plugins-box:not(:nth-child(2n)) {
744
+ margin-right: 0px;
745
+ }
746
+ }
747
+
748
+ @media (max-width: 480px) {
749
+ .cff-fb-hd-btn {
750
+ padding: 0px 10px 0px 7px !important;
751
+ }
752
+ .cff-fb-hd-btn[data-icon="left"] {
753
+ padding-right: 10px!important;
754
+ }
755
+ .cff-plugins-boxes-container .sb-plugins-box .icon {
756
+ width: 60px;
757
+ min-width: 60px;
758
+ }
759
+ .cff-plugins-boxes-container.sb-recommended-plugins .sb-plugins-box .icon {
760
+ padding-right: 11px;
761
+ width: 58px;
762
+ min-width: 58px;
763
+ padding-left: 8px;
764
+ }
765
+ }
admin/assets/css/admin-notifications.css CHANGED
@@ -1,267 +1,267 @@
1
- #cff-notifications {
2
- position: relative;
3
- background: #FFFFFF 0 0 no-repeat padding-box;
4
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
5
- border-radius: 2px;
6
- opacity: 1;
7
- min-height: 48px;
8
- padding: 20px 120px 20px 82px;
9
- margin: 0 0 14px 0;
10
- box-sizing: border-box;
11
- }
12
- #cff-notifications.cff_review_notice,
13
- #cff-notifications.cff_discount_notice {
14
- padding: 16px 70px 16px 82px
15
- }
16
- #cff-notifications * {
17
- box-sizing: border-box;
18
- }
19
-
20
- #cff-notifications .bell,
21
- #cff-notifications .thumb{
22
- position: absolute;
23
- top: 11px;
24
- left: 24px;
25
- width: 42px;
26
- height: 42px;
27
- }
28
-
29
- #cff-notifications .rn_step_2 .bell,
30
- #cff-notifications .rn_step_2 .thumb,
31
- .cff_discount_notice .bell,
32
- .cff_discount_notice .cff_thumb {
33
- top: 16px !important;
34
- }
35
- #cff-notifications .thumb img,
36
- #cff-notifications .bell img {
37
- max-width: 100%;
38
- }
39
- #cff-notifications .thumb .img-overlay {
40
- top: 42px;
41
- left: -6px;
42
- width: 54px;
43
- position: absolute;
44
- background: #ca4a1f;
45
- color: #fff;
46
- padding: 2px 4px;
47
- border-radius: 3px;
48
- line-height: 1;
49
- font-size: 11px;
50
- font-weight: bold;
51
- text-align: center;
52
- }
53
-
54
- #cff-notifications .messages .message {
55
- display: none;
56
- }
57
-
58
- #cff-notifications .messages .message.current {
59
- display: block;
60
- }
61
-
62
- #cff-notifications .messages .message .title {
63
- font-weight: 600;
64
- font-size: 16px;
65
- line-height: 25px;
66
- margin: 0;
67
- color: #141B38;
68
- letter-spacing: -0.01em;
69
- }
70
-
71
- #cff-notifications .messages .message .content {
72
- font-weight: normal;
73
- font-size: 14px;
74
- line-height: 22px;
75
- margin: 2px 0 32px 0;
76
- color: #434960;
77
- }
78
-
79
- #cff-notifications .messages .message .buttons {
80
- margin: -15px 0px 3px 0;
81
- display: flex;
82
- }
83
- .cff-btn {
84
- transition: all 0.15s ease-in-out;
85
- letter-spacing: 0.2px;
86
- }
87
- /*orange*/
88
- .cff-btn-orange{
89
- background: #E34F0E!important;
90
- color: #fff!important;
91
- }
92
- .cff-btn-orange:hover{
93
- background: #F37036!important;
94
- color: #fff!important;
95
- }
96
- .cff-btn-orange:focus,
97
- .cff-btn-orange:active{
98
- background: #B8400B!important;
99
- color: #fff!important;
100
- }
101
- /*grey*/
102
- .cff-btn-grey{
103
- background: #F3F4F5!important;
104
- color: #141B38!important;
105
- border: 1px solid #D0D1D7!important;
106
- }
107
- .cff-btn-grey:hover{
108
- background: #fff!important;
109
- color: #141B38!important;
110
- border: 1px solid #DCDDE1!important;
111
- }
112
- .cff-btn-grey:focus,
113
- .cff-btn-grey:active{
114
- background: #E8E8EB!important;
115
- color: #141B38!important;
116
- border: 1px solid #D0D1D7!important;
117
- }
118
- #cff-notifications .messages .message .buttons a {
119
- font-weight: 600;
120
- padding: 6px 12px;
121
- border-radius: 2px;
122
- box-sizing: border-box;
123
- height: 32px;
124
- text-decoration: none;
125
- font-size: 12px;
126
- border: none;
127
- }
128
- #cff-notifications .messages .message .buttons a.cff-btn-orange {
129
- border: 1px solid #E34F0E
130
- }
131
- #cff-notifications .messages .message .buttons a:not(:last-child) {
132
- margin-right: 8px;
133
- }
134
- #cff-notifications .messages .message .buttons a:focus,
135
- #cff-notifications .messages .message .buttons a:active {
136
- outline: none;
137
- box-shadow: none;
138
- }
139
- #cff-notifications .dismiss {
140
- position: absolute;
141
- top: 2px;
142
- right: 6px;
143
- width: 30px;
144
- height: 32px;
145
- color: #72777C;
146
- font-size: 16px;
147
- cursor: pointer;
148
- align-items: center;
149
- line-height: 16px;
150
- display: flex;
151
- justify-content: center;
152
- }
153
- #cff-notifications .dismiss svg {
154
- width: 15px;
155
- height: 15px;
156
- }
157
- #cff-notifications .dismiss svg path {
158
- fill: #8C8F9A;
159
- }
160
- #cff-notifications .navigation {
161
- position: absolute;
162
- bottom: 24px;
163
- right: 21px;
164
- width: 72px;
165
- height: 30px;
166
- }
167
-
168
- #cff-notifications .navigation a {
169
- display: block;
170
- width: 32px;
171
- height: 32px;
172
- border: 1px solid #DCDDE1;
173
- border-radius: 2px;
174
- font-size: 8px;
175
- text-align: center;
176
- vertical-align: middle;
177
- line-height: 30px;
178
- cursor: pointer;
179
- background: #F3F4F5;
180
- color: #141B38;
181
- display: flex;
182
- align-items: center;
183
- justify-content: center;
184
- transition: all 0.15s ease-in-out;
185
- }
186
-
187
- #cff-notifications .navigation svg {
188
- width: 9px;
189
- height: 9px;
190
- }
191
-
192
- #cff-notifications .navigation a:not(.disabled):hover {
193
- background-color: #fff;
194
- }
195
- #cff-notifications .navigation a:not(.disabled):focus,
196
- #cff-notifications .navigation a:not(.disabled):active {
197
- background: #E8E8EB;
198
- color: #141B38;
199
- }
200
-
201
- #cff-notifications .navigation .prev {
202
- float: left;
203
- }
204
-
205
- #cff-notifications .navigation .next {
206
- float: right;
207
- }
208
-
209
- #cff-notifications .navigation .disabled {
210
- background: #E8E8EB;
211
- color: #8C8F9A;
212
- cursor: default;
213
- }
214
- @media screen and (max-width: 880px) {
215
- #cff-notifications .messages .message .buttons {
216
- flex-wrap: wrap;
217
- }
218
- #cff-notifications .messages .message .buttons a,
219
- .cff-notice-links a {
220
- margin: 0;
221
- display: inline-block;
222
- margin-bottom: 6px;
223
- }
224
- }
225
- @media screen and (max-width: 768px) {
226
- #cff-notifications {
227
- padding: 15px 15px 15px 72px;
228
- }
229
- #cff-notifications .messages .message .title {
230
- margin: 0 30px 0 0;
231
- }
232
- #cff-notifications .messages .message .content {
233
- font-size: 16px;
234
- line-height: 24px;
235
- }
236
- #cff-notifications .messages .message .buttons {
237
- margin: -10px 0 0;
238
- }
239
-
240
- #cff-notifications .messages .message .buttons .button-secondary {
241
- margin-top: 6px;
242
- }
243
- }
244
-
245
- @media screen and (max-width: 580px) {
246
- #cff-notifications.cff_review_notice, #cff-notifications.cff_discount_notice {
247
- padding: 16px 30px 16px 82px;
248
- }
249
- }
250
- .cff-notice-alert {
251
- display: inline-block;
252
- position: absolute;
253
- vertical-align: top;
254
- box-sizing: border-box;
255
- margin: 1px 0 0 4px;
256
- padding: 0 5px;
257
- min-width: 18px;
258
- height: 18px;
259
- border-radius: 9px;
260
- background-color: #d63638;
261
- color: #fff;
262
- font-size: 11px;
263
- line-height: 1.6;
264
- text-align: center;
265
- z-index: 26;
266
- }
267
-
1
+ #cff-notifications {
2
+ position: relative;
3
+ background: #FFFFFF 0 0 no-repeat padding-box;
4
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
5
+ border-radius: 2px;
6
+ opacity: 1;
7
+ min-height: 48px;
8
+ padding: 20px 120px 20px 82px;
9
+ margin: 0 0 14px 0;
10
+ box-sizing: border-box;
11
+ }
12
+ #cff-notifications.cff_review_notice,
13
+ #cff-notifications.cff_discount_notice {
14
+ padding: 16px 70px 16px 82px
15
+ }
16
+ #cff-notifications * {
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ #cff-notifications .bell,
21
+ #cff-notifications .thumb{
22
+ position: absolute;
23
+ top: 11px;
24
+ left: 24px;
25
+ width: 42px;
26
+ height: 42px;
27
+ }
28
+
29
+ #cff-notifications .rn_step_2 .bell,
30
+ #cff-notifications .rn_step_2 .thumb,
31
+ .cff_discount_notice .bell,
32
+ .cff_discount_notice .cff_thumb {
33
+ top: 16px !important;
34
+ }
35
+ #cff-notifications .thumb img,
36
+ #cff-notifications .bell img {
37
+ max-width: 100%;
38
+ }
39
+ #cff-notifications .thumb .img-overlay {
40
+ top: 42px;
41
+ left: -6px;
42
+ width: 54px;
43
+ position: absolute;
44
+ background: #ca4a1f;
45
+ color: #fff;
46
+ padding: 2px 4px;
47
+ border-radius: 3px;
48
+ line-height: 1;
49
+ font-size: 11px;
50
+ font-weight: bold;
51
+ text-align: center;
52
+ }
53
+
54
+ #cff-notifications .messages .message {
55
+ display: none;
56
+ }
57
+
58
+ #cff-notifications .messages .message.current {
59
+ display: block;
60
+ }
61
+
62
+ #cff-notifications .messages .message .title {
63
+ font-weight: 600;
64
+ font-size: 16px;
65
+ line-height: 25px;
66
+ margin: 0;
67
+ color: #141B38;
68
+ letter-spacing: -0.01em;
69
+ }
70
+
71
+ #cff-notifications .messages .message .content {
72
+ font-weight: normal;
73
+ font-size: 14px;
74
+ line-height: 22px;
75
+ margin: 2px 0 32px 0;
76
+ color: #434960;
77
+ }
78
+
79
+ #cff-notifications .messages .message .buttons {
80
+ margin: -15px 0px 3px 0;
81
+ display: flex;
82
+ }
83
+ .cff-btn {
84
+ transition: all 0.15s ease-in-out;
85
+ letter-spacing: 0.2px;
86
+ }
87
+ /*orange*/
88
+ .cff-btn-orange{
89
+ background: #E34F0E!important;
90
+ color: #fff!important;
91
+ }
92
+ .cff-btn-orange:hover{
93
+ background: #F37036!important;
94
+ color: #fff!important;
95
+ }
96
+ .cff-btn-orange:focus,
97
+ .cff-btn-orange:active{
98
+ background: #B8400B!important;
99
+ color: #fff!important;
100
+ }
101
+ /*grey*/
102
+ .cff-btn-grey{
103
+ background: #F3F4F5!important;
104
+ color: #141B38!important;
105
+ border: 1px solid #D0D1D7!important;
106
+ }
107
+ .cff-btn-grey:hover{
108
+ background: #fff!important;
109
+ color: #141B38!important;
110
+ border: 1px solid #DCDDE1!important;
111
+ }
112
+ .cff-btn-grey:focus,
113
+ .cff-btn-grey:active{
114
+ background: #E8E8EB!important;
115
+ color: #141B38!important;
116
+ border: 1px solid #D0D1D7!important;
117
+ }
118
+ #cff-notifications .messages .message .buttons a {
119
+ font-weight: 600;
120
+ padding: 6px 12px;
121
+ border-radius: 2px;
122
+ box-sizing: border-box;
123
+ height: 32px;
124
+ text-decoration: none;
125
+ font-size: 12px;
126
+ border: none;
127
+ }
128
+ #cff-notifications .messages .message .buttons a.cff-btn-orange {
129
+ border: 1px solid #E34F0E
130
+ }
131
+ #cff-notifications .messages .message .buttons a:not(:last-child) {
132
+ margin-right: 8px;
133
+ }
134
+ #cff-notifications .messages .message .buttons a:focus,
135
+ #cff-notifications .messages .message .buttons a:active {
136
+ outline: none;
137
+ box-shadow: none;
138
+ }
139
+ #cff-notifications .dismiss {
140
+ position: absolute;
141
+ top: 2px;
142
+ right: 6px;
143
+ width: 30px;
144
+ height: 32px;
145
+ color: #72777C;
146
+ font-size: 16px;
147
+ cursor: pointer;
148
+ align-items: center;
149
+ line-height: 16px;
150
+ display: flex;
151
+ justify-content: center;
152
+ }
153
+ #cff-notifications .dismiss svg {
154
+ width: 15px;
155
+ height: 15px;
156
+ }
157
+ #cff-notifications .dismiss svg path {
158
+ fill: #8C8F9A;
159
+ }
160
+ #cff-notifications .navigation {
161
+ position: absolute;
162
+ bottom: 24px;
163
+ right: 21px;
164
+ width: 72px;
165
+ height: 30px;
166
+ }
167
+
168
+ #cff-notifications .navigation a {
169
+ display: block;
170
+ width: 32px;
171
+ height: 32px;
172
+ border: 1px solid #DCDDE1;
173
+ border-radius: 2px;
174
+ font-size: 8px;
175
+ text-align: center;
176
+ vertical-align: middle;
177
+ line-height: 30px;
178
+ cursor: pointer;
179
+ background: #F3F4F5;
180
+ color: #141B38;
181
+ display: flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ transition: all 0.15s ease-in-out;
185
+ }
186
+
187
+ #cff-notifications .navigation svg {
188
+ width: 9px;
189
+ height: 9px;
190
+ }
191
+
192
+ #cff-notifications .navigation a:not(.disabled):hover {
193
+ background-color: #fff;
194
+ }
195
+ #cff-notifications .navigation a:not(.disabled):focus,
196
+ #cff-notifications .navigation a:not(.disabled):active {
197
+ background: #E8E8EB;
198
+ color: #141B38;
199
+ }
200
+
201
+ #cff-notifications .navigation .prev {
202
+ float: left;
203
+ }
204
+
205
+ #cff-notifications .navigation .next {
206
+ float: right;
207
+ }
208
+
209
+ #cff-notifications .navigation .disabled {
210
+ background: #E8E8EB;
211
+ color: #8C8F9A;
212
+ cursor: default;
213
+ }
214
+ @media screen and (max-width: 880px) {
215
+ #cff-notifications .messages .message .buttons {
216
+ flex-wrap: wrap;
217
+ }
218
+ #cff-notifications .messages .message .buttons a,
219
+ .cff-notice-links a {
220
+ margin: 0;
221
+ display: inline-block;
222
+ margin-bottom: 6px;
223
+ }
224
+ }
225
+ @media screen and (max-width: 768px) {
226
+ #cff-notifications {
227
+ padding: 15px 15px 15px 72px;
228
+ }
229
+ #cff-notifications .messages .message .title {
230
+ margin: 0 30px 0 0;
231
+ }
232
+ #cff-notifications .messages .message .content {
233
+ font-size: 16px;
234
+ line-height: 24px;
235
+ }
236
+ #cff-notifications .messages .message .buttons {
237
+ margin: -10px 0 0;
238
+ }
239
+
240
+ #cff-notifications .messages .message .buttons .button-secondary {
241
+ margin-top: 6px;
242
+ }
243
+ }
244
+
245
+ @media screen and (max-width: 580px) {
246
+ #cff-notifications.cff_review_notice, #cff-notifications.cff_discount_notice {
247
+ padding: 16px 30px 16px 82px;
248
+ }
249
+ }
250
+ .cff-notice-alert {
251
+ display: inline-block;
252
+ position: absolute;
253
+ vertical-align: top;
254
+ box-sizing: border-box;
255
+ margin: 1px 0 0 4px;
256
+ padding: 0 5px;
257
+ min-width: 18px;
258
+ height: 18px;
259
+ border-radius: 9px;
260
+ background-color: #d63638;
261
+ color: #fff;
262
+ font-size: 11px;
263
+ line-height: 1.6;
264
+ text-align: center;
265
+ z-index: 26;
266
+ }
267
+
admin/assets/css/cff-admin-style.css CHANGED
@@ -1,3608 +1,3608 @@
1
- /*** Global CSS Button Classes ***/
2
-
3
- /*btn*/
4
- .cff-notice-btn {
5
- box-sizing: border-box;
6
- border-radius: 2px;
7
- display: inline-block;
8
- padding: 6px 12px;
9
- color: #141B38;
10
- font-weight: 600;
11
- padding: 6px 12px;
12
- font-size: 12px;
13
- line-height: 19px;
14
- cursor: pointer;
15
- transition: all 0.15s ease-in-out;
16
- text-decoration: none;
17
- }
18
-
19
- /*grey*/
20
- .cff-btn-grey{
21
- background: #F3F4F5!important;
22
- color: #141B38!important;
23
- border: 1px solid #D0D1D7!important;
24
- }
25
- .cff-btn-grey:hover{
26
- background: #fff!important;
27
- color: #141B38!important;
28
- border: 1px solid #DCDDE1!important;
29
- }
30
- .cff-btn-grey:focus,
31
- .cff-btn-grey:active{
32
- background: #E8E8EB!important;
33
- color: #141B38!important;
34
- border: 1px solid #D0D1D7!important;
35
- }
36
-
37
- /* blue buttons */
38
- .cff-btn-blue{
39
- background: #0068A0!important;
40
- color: #fff!important;
41
- }
42
- .cff-btn-blue:hover{
43
- background: #0096CC!important;
44
- color: #fff!important;
45
- }
46
- .cff-btn-blue:focus,
47
- .cff-btn-blue:active{
48
- background: #004D77!important;
49
- color: #fff!important;
50
- }
51
-
52
- #cff-admin{
53
- overflow: hidden;
54
- }
55
- #cff-admin th.bump-left,
56
- #cff-admin a.bump-left{
57
- padding-left: 10px;
58
- }
59
- #cff-admin .cff-tooltip{
60
- display: none;
61
- padding: 10px 0;
62
- font-weight: normal;
63
- }
64
- #cff-admin .cff-tooltip ul{
65
- margin-top: 0;
66
- margin-bottom: 0;
67
- }
68
- #cff-admin .cff-tooltip li{
69
- padding: 4px 0;
70
- }
71
- #cff-admin .cff-highlight{
72
- background: #ffed51;
73
- font-weight: bold;
74
- color: black;
75
- }
76
- #cff-admin .cff-tooltip-link,
77
- #cff-admin .cff-external-link{
78
- font-size: 13px;
79
- margin-left: 10px;
80
- }
81
- #cff-admin .cff-more-info{
82
- padding: 10px 15px;
83
- margin: 10px 0;
84
- font-size: 13px;
85
- background: #f9f9f9;
86
- background: rgba(255,255,255,0.8);
87
-
88
- -moz-border-radius: 8px;
89
- -webkit-border-radius: 8px;
90
- border-radius: 8px;
91
- }
92
- #cff-admin .postbox .cff-more-info{
93
- background: #eee;
94
- background: rgba(0,0,0,0.05);
95
- }
96
- #cff-admin .cff-more-info p{
97
- font-size: 13px;
98
- }
99
- #cff-admin hr{
100
- border: none;
101
- margin: 25px 0;
102
- border-bottom: 1px solid #ccc;
103
- }
104
- #cff-admin select{
105
- width: 150px;
106
- }
107
- #wpbody-content #cff-admin .metabox-holder {
108
- padding-top: 0;
109
- }
110
- #cff-admin .cff-notice{
111
- margin-top: 5px;
112
- background: #f9ecda;
113
- padding: 5px 10px;
114
- border: 1px solid #e89a2e;
115
- color: #cf6100;
116
-
117
- -moz-border-radius: 3px;
118
- -webkit-border-radius: 3px;
119
- border-radius: 3px;
120
- }
121
- #cff-admin .cff-notice a{
122
- color: #d85600;
123
- }
124
- #cff-admin .cff-notice a:hover,
125
- #cff-admin .cff-notice a:focus{
126
- color: #a34100;
127
- }
128
- #cff-admin .cff-warning {
129
- position: relative;
130
- display: inline-block;
131
- border: 1px solid #ccc;
132
- font-size: 12px;
133
- padding: 4px 4px 4px 8px;
134
- vertical-align: top;
135
- margin: 4px 5px 0 0;
136
- border-radius: 4px;
137
-
138
- background: #fdf4e5;
139
- border: 1px solid #e6bc88;
140
- color: #94570c;
141
- }
142
- #cff-admin .cff-profile-error,
143
- #cff-admin .cff-group-error{
144
- display: none;
145
-
146
- margin-top: 5px;
147
- background: #F7E6E6;
148
- padding: 5px 10px;
149
- border: 1px solid #BA7B7B;
150
- color: #592626;
151
-
152
- -moz-border-radius: 3px;
153
- -webkit-border-radius: 3px;
154
- border-radius: 3px;
155
- }
156
- #cff-admin .cff-oembed-button .cff-profile-error,
157
- #cff-admin .cff-oembed-button .cff-warning{
158
- clear: both;
159
- padding: 20px 30px;
160
- border-radius: 3px;
161
- }
162
- #cff-admin .cff-profile-error p{
163
- font-size: 13px;
164
- }
165
- #cff-admin .cff-notice p{
166
- margin: 0;
167
- padding: 5px 0;
168
- }
169
- #cff-admin .cff-tooltip-table label{
170
- display: block;
171
- float: left;
172
- width: 60px;
173
- margin-top: 5px;
174
- }
175
- #cff-admin .hndle{
176
- font-size: 16px;
177
- }
178
- #cff-admin #cff-header-icon-example{
179
- font-size: 28px;
180
- top: 6px;
181
- margin-left: 5px;
182
- position: relative;
183
- }
184
- #cff-admin #cff-api-test-result{
185
- width: 50%;
186
- clear: both;
187
- margin: 10px 0 0 0;
188
- position: relative;
189
- }
190
- #cff-admin #cff-api-test-result textarea{
191
- width: 100%;
192
- height: 250px;
193
- display: none;
194
- }
195
- #cff-admin .cff-error{
196
- background: #F7E6E6;
197
- border: 1px solid #BA7B7B;
198
- color: #592626;
199
- }
200
- #cff-admin .cff-success{
201
- background: #dceada;
202
- border: 1px solid #6ca365;
203
- color: #3e5f1c;
204
- }
205
- /* Loader */
206
- #cff-admin .cff-loader{
207
- display: none;
208
- position: absolute;
209
- top: 50%;
210
- left: 50%;
211
- width: 16px;
212
- height: 16px;
213
- margin-top: -8px;
214
- margin-left: -8px;
215
-
216
- background: url('../img/loader-light.gif') no-repeat;
217
- }
218
-
219
- #cff-admin #cff-others-only{
220
- margin-top: 8px;
221
- display: none;
222
- }
223
-
224
- #cff-admin .cff-definition{
225
- display: inline;
226
- margin-left: 20px;
227
- }
228
-
229
- /* Top global notice */
230
- .cff-admin-top-notice{
231
- clear: both;
232
- width: 96%;
233
- margin: 10px 0 20px 0;
234
- background: #F7E6E6;
235
- padding: 15px 1.5%;
236
- border: 1px solid #BA7B7B;
237
- color: #592626;
238
-
239
- -moz-border-radius: 3px;
240
- -webkit-border-radius: 3px;
241
- border-radius: 3px;
242
- }
243
- .cff-admin-top-notice p{
244
- padding: 0;
245
- margin: 0 5px 0 0;
246
- }
247
- .cff-admin-notice-close{
248
- float: right;
249
- color: #dd3d36;
250
- text-decoration: none;
251
- margin: -15px 0 0 0;
252
- padding: 10px 0 10px 10px;
253
- }
254
- .cff-admin-notice-close:hover,
255
- .cff-admin-notice-close:focus{
256
- color: #333;
257
- }
258
-
259
- /* Translation table */
260
- #cff-admin .cff-translate-table input{
261
- width: 100%;
262
- }
263
- #cff-admin .cff-translate-table .cff-translate-date input{
264
- width: 74%;
265
- }
266
- #cff-admin .cff-translate-table.form-table th,
267
- #cff-admin .cff-translate-table.form-table td{
268
- border: 1px solid #ddd;
269
- padding: 8px 10px;
270
- vertical-align: top;
271
- }
272
- #cff-admin .cff-translate-table.form-table thead th{
273
- background: #333;
274
- border: 1px solid #333;
275
- border-right: 1px solid #999;
276
- color: #fff;
277
- }
278
- #cff-admin .cff-translate-date label{
279
- width: 25%;
280
- float: left;
281
- padding-top: 5px;
282
- }
283
- #cff-admin .cff-translate-table .cff-table-header{
284
- background: #ddd;
285
- }
286
- #cff-admin .cff-translate-table.form-table .cff-context{
287
- font-size: 13px;
288
- }
289
-
290
- /* Events only */
291
- #cff-admin .cff-events-only-options .cff-row,
292
- #cff-admin .cff-albums-only-options .cff-row{
293
- padding: 10px 0;
294
- }
295
-
296
- /* Post Types options */
297
- #cff-admin .cff-post-type-options th,
298
- #cff-admin .cff-post-type-options td{
299
- padding: 5px 10px;
300
- }
301
- #cff-admin .cff-post-type-options th{
302
- width: 150px;
303
- padding-top: 10px;
304
- }
305
- #cff-admin .cff-post-type-options .cff-tooltip{
306
- background: rgba(0,0,0,0.05);
307
- }
308
-
309
-
310
- /* Post Layouts */
311
- #cff-admin .cff-layouts{
312
- width: 100%;
313
- clear: both;
314
- overflow: hidden;
315
- }
316
- #cff-admin .cff-layout{
317
- padding: 0;
318
- float: left;
319
- width: 222px;
320
- padding: 15px 15px 10px 15px;
321
- margin-right: 15px;
322
-
323
- background: #f6f6f6;
324
- border: 1px solid #ddd;
325
-
326
- -moz-border-radius: 5px;
327
- -webkit-border-radius: 5px;
328
- border-radius: 5px;
329
- }
330
- @media all and (max-width: 1040px){
331
- #cff-admin .cff-layout{
332
- width: 29%;
333
- padding: 1%;
334
- margin-right: 1%;
335
- }
336
- }
337
-
338
- #cff-admin .cff-layout:hover,
339
- #cff-admin .cff-layout:focus{
340
- background: #fcfcfc;
341
- cursor: pointer;
342
- }
343
- #cff-admin .cff-layout.cff-layout-selected{
344
- background: #f7faf1;
345
- border: 1px solid #7ad03a;
346
- }
347
- #cff-admin .cff-layout h3{
348
- font-size: 15px;
349
- margin-top: 0;
350
- }
351
- #cff-admin .cff-layout img{
352
- width: 100%;
353
- border: 1px solid #ddd;
354
- }
355
-
356
- /* Post style selection */
357
- #cff-admin .cff-post-style{
358
- width: 184px;
359
- background: none;
360
- border: 1px solid transparent;
361
- }
362
- #cff-admin .cff-post-style.cff-layout-selected{
363
- background: rgba(255,255,255,0.9);
364
- border: 1px solid #7ad03a;
365
- }
366
- #cff-admin .cff-post-style img{
367
- width: auto;
368
- padding-bottom: 6px;
369
- margin-bottom: 3px;
370
- background: none;
371
- border: none;
372
- border-bottom: 1px solid #ddd;
373
- }
374
- #cff-admin .cff-post-style.cff-boxed{
375
- /*width: 236px;*/
376
- width: 197px;
377
- }
378
- #cff-admin .cff-post-style.cff-boxed img{
379
- /*width: 94%;*/
380
- padding: 3%;
381
- margin: 0;
382
- background: #fff;
383
- border: 1px solid #ddd;
384
- border-radius: 5px;
385
- box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
386
- }
387
- #cff-admin .cff-post-style:hover,
388
- #cff-admin .cff-post-style:focus{
389
- /*background: rgba(255,255,255,0.5);*/
390
- }
391
- @media all and (max-width: 1040px){
392
- #cff-admin .cff-layout{
393
- width: 29%;
394
- padding: 1%;
395
- margin-right: 1%;
396
- }
397
- #cff-admin .cff-post-style,
398
- #cff-admin .cff-post-style.cff-boxed{
399
- width: 46%;
400
- }
401
- #cff-admin .cff-post-style img{
402
- width: 100%;
403
- padding: 0;
404
- }
405
- }
406
-
407
- /* Post style settings */
408
- #cff-admin .cff-post-style-settings {
409
- display: none;
410
- float: left;
411
- clear: both;
412
- width: 96%;
413
- padding: 20px 2%;
414
- margin: 10px 0;
415
- font-size: 13px;
416
- background: #f9f9f9;
417
- background: rgba(255,255,255,0.8);
418
- -moz-border-radius: 8px;
419
- -webkit-border-radius: 8px;
420
- border-radius: 8px;
421
- }
422
- #cff-admin .cff-post-style-settings label{
423
- display: inline-block;
424
- font-weight: bold;
425
- font-size: 14px;
426
- padding-bottom: 5px;
427
- padding-right: 5px;
428
- }
429
-
430
- /* Disabled */
431
- #cff-admin .cff-disabled{
432
- zoom: 1;
433
- filter: alpha(opacity=60);
434
- opacity: 0.6;
435
- }
436
-
437
- #cff-admin footer{
438
- float: left;
439
- clear: both;
440
- width: 100%;
441
- padding: 0;
442
- margin: 0;
443
- }
444
-
445
- /* Hide clear cache notice */
446
- .cff-clear-cache-notice{
447
- display: none;
448
- }
449
-
450
- /* Access Token field */
451
- #cff-admin .cff-access-token-hidden{
452
- display: none;
453
- }
454
- #cff-admin .cff-ppca-check-notice{
455
- display: none;
456
- width: 60%;
457
- padding: 8px 15px;
458
- box-sizing: border-box;
459
- font-size: 13px;
460
- border-radius: 3px;
461
- }
462
-
463
- /* Add Facebook dashicon to CFF admin menu */
464
- #toplevel_page_cff-top .toplevel_page_cff-top .wp-menu-image:before{
465
- content: "\f305";
466
- }
467
-
468
- #cff-admin .cff-short select,
469
- #cff-admin .cff-short input {
470
- width: 50px;
471
- }
472
- #cff-admin .cff-medium select {
473
- width: 250px;
474
- }
475
- #cff-admin .cff-wide select{
476
- width: 400px;
477
- }
478
-
479
- #cff-admin #cff_width_options{
480
- margin-top: 10px;
481
- display: none;
482
- }
483
- #cff-admin #cff_width_options label{
484
- font-size: 13px;
485
- position: relative;
486
- top: -2px;
487
- }
488
-
489
- /* Shortcode tooltips */
490
- #cff-admin label{
491
- position: relative;
492
- }
493
- #cff-admin .cff-load-more-setting label{
494
- top: -2px;
495
- }
496
- #cff-admin th{
497
- position: relative;
498
- }
499
- #cff-admin .cff_shortcode{
500
- display: none;
501
- position: absolute;
502
- z-index: 10;
503
- font-size: 11px;
504
- float: left;
505
- width: auto;
506
- white-space: pre-line;
507
- line-height: 1.4;
508
- background: #e0e0e0;
509
- }
510
- #cff-admin .cff_shortcode_symbol{
511
- position: absolute;
512
- right: -24px;
513
- bottom: 0px;
514
- padding: 2px 4px 3px 3px;
515
- width: auto;
516
- font-size: 11px;
517
- margin-left: 5px;
518
- }
519
- #cff-admin .cff-load-more-setting .cff_shortcode_symbol{
520
- font-size: 10px;
521
- padding: 1px 3px 2px 2px;
522
- }
523
-
524
- /* Cols */
525
- #cff-admin .cff-row{
526
- width: 100%;
527
- float: left;
528
- clear: both;
529
- padding: 3px 0;
530
- }
531
- #cff-admin .cff-col{
532
- float: left;
533
- }
534
- #cff-admin .cff-col.cff-one{
535
- width: 110px;
536
- }
537
- #cff-admin .cff-col.cff-two{
538
- width: 600px;
539
- }
540
- #cff-admin .cff-row input[type=radio],
541
- #cff-admin .cff-row label{
542
- margin: 5px 2px 0 0;
543
- display: inline-block;
544
- }
545
-
546
- /* Quick start */
547
- #cff-admin .cff_quickstart{
548
- float: left;
549
- display: inline-block;
550
- margin: 15px 0 0 0;
551
- padding: 15px 20px;
552
- min-width: 808px;
553
-
554
- border: 1px solid #ddd;
555
- background: #eee;
556
- background: rgba(255,255,255,0.5);
557
-
558
- -moz-border-radius: 5px;
559
- -webkit-border-radius: 5px;
560
- border-radius: 5px;
561
- }
562
- #cff-admin .cff_quickstart h3,
563
- #cff-admin .cff_quickstart p{
564
- margin: 0;
565
- padding: 5px 0;
566
- }
567
- /* Plugin icon */
568
- #cff-admin .ctf-footnote.dashicons-admin-plugins:before{
569
- width: 18px;
570
- height: 18px;
571
- font-size: 18px;
572
- margin-left: -2px;
573
- }
574
-
575
- /* Caching settings */
576
- #cff-admin #cff-caching-time-settings{
577
- display: inline-block;
578
- }
579
- #cff-admin .cff-caching-cron-options .submit{
580
- display: inline-block;
581
- margin: 0;
582
- padding: 0;
583
- }
584
- #cff-admin .cff-caching-sched-notice{
585
- font-size: 11px;
586
- display: block;
587
- width: 100%;
588
- }
589
- #cff-admin .cff-caching-sched-notice span{
590
- color: green;
591
- background: #e5eae1;
592
- padding: 5px 10px;
593
- border-radius: 5px;
594
- border: 1px solid #ccd3c6;
595
- display: inline-block;
596
- }
597
-
598
- /* Settings page save changes btn */
599
- #cff-admin .cff-save-settings-btn{
600
- padding-bottom: 1.5em;
601
- margin: 30px 0 5px 0;
602
- display: inline-block;
603
- background: #eee;
604
- background: rgba(255,255,255,0.5);
605
- padding: 10px 15px 10px 10px;
606
- border-radius: 5px;
607
- border: 1px solid #ddd;
608
- }
609
- #cff-admin .cff-save-settings-btn .cff-more-info{
610
- background: none;
611
- }
612
- #cff-admin .cff-save-settings-btn .submit{
613
- display: inline-block;
614
- margin: 0;
615
- padding: 0;
616
- }
617
- #cff-admin .cff-save-settings-btn #submit:active{
618
- vertical-align: middle;
619
- margin-top: -4px;
620
- }
621
- #cff-admin .cff-save-settings-btn .cff-tooltip-link{
622
- display: inline-block;
623
- margin: 5px 0 0 13px;
624
- color: #444;
625
- }
626
- #cff-admin .cff-save-settings-btn .cff-tooltip-link:hover,
627
- #cff-admin .cff-save-settings-btn .cff-tooltip-link:focus{
628
- color: #111;
629
- }
630
-
631
-
632
- /* Limit manual settings */
633
- #cff-admin #cff_limit_manual_settings{
634
- display: inline-block;
635
- }
636
- #cff-admin #cff_limit_manual_settings input,
637
- #cff-admin .cff-caching-page-options input{
638
- line-height: 28px;
639
- height: 28px;
640
- position: relative;
641
- top: 1px;
642
- margin: 0;
643
- }
644
-
645
-
646
- /* Quick links */
647
- #cff-admin .cff_contents_links{
648
- float: left;
649
- clear: both;
650
- width: 98%;
651
- margin: 0;
652
- padding: 10px 1%;
653
- border-top: none;
654
- margin-bottom: 30px;
655
- background: #fff;
656
- border-left: 1px solid #e9e9e9;
657
-
658
- box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
659
- -moz-box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
660
- -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
661
- }
662
- #cff-admin .cff_contents_links a,
663
- #cff-admin .cff_contents_links span{
664
- display: block;
665
- float: left;
666
- padding: 2px 5px;
667
- font-size: 12px;
668
- }
669
- #cff-admin .cff_contents_links span{
670
- padding-left: 0;
671
- }
672
-
673
- /* Subtabs for Customize page */
674
- #cff-admin .cff-subtabs{
675
- padding: 0;
676
- margin-left: 1px;
677
- border-bottom: 0;
678
- }
679
- #cff-admin .cff-subtabs a{
680
- background: none;
681
- margin: 0;
682
- padding: 10px 12px;
683
- border: none;
684
- font-size: 13px;
685
- line-height: 20px;
686
- }
687
- #cff-admin .cff-subtabs .nav-tab-active{
688
- position: relative;
689
- background: #fff;
690
-
691
- box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
692
- -moz-box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
693
- -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
694
- }
695
- #cff-admin .cff-subtabs .nav-tab-active:after{
696
- position: absolute;
697
- width: 100%;
698
- left: 0;
699
- bottom: -5px;
700
- height: 6px;
701
- content: "";
702
- background: #fff;
703
- }
704
- #cff-admin .cff-expand-button,
705
- #cff-admin .cff-expand-button p{
706
- margin-top: 0;
707
- padding-top: 0;
708
- }
709
- #cff-admin .cff-expand-button{
710
- padding-top: 10px;
711
- }
712
- #cff-admin .cff-expand-button a{
713
- display: inline-block;
714
- /*width: 450px;*/
715
- text-align: center;
716
- }
717
- #cff-admin .cff-media-position{
718
- display: none;
719
- }
720
- #cff-admin .cff-text-size-setting{
721
- width: 170px;
722
- }
723
- #cff-admin .cff-pixel-label{
724
- display: inline-block;
725
- position: relative;
726
- top: -1px;
727
- bottom: 2px;
728
- left: -2px;
729
- background: #f9f9f9;
730
- color: #555;
731
- padding: 5px;
732
- font-size: 12px;
733
- border: 1px solid #d6d6d6;
734
- height: 15px;
735
- line-height: 15px;
736
- border-radius: 0 4px 4px 0;
737
- }
738
-
739
- /* Show/Hide checkbox labels */
740
- #cff-admin .cff_show_hide_settings input{
741
- vertical-align: top;
742
- margin-top: 2px;
743
- }
744
- #cff-admin .cff_show_hide_settings label{
745
- display: inline-block;
746
- }
747
- #cff-admin .cff_show_hide_settings .cff-show-hide-desc{
748
- font-size: 13px;
749
- padding: 0 10px 10px 0;
750
- margin: 0;
751
- font-style: italic;
752
- color: #666;
753
- }
754
-
755
- /* Support page */
756
- #cff-admin .cff_support{
757
- overflow: hidden;
758
- margin-bottom: 20px;
759
- width: 70%;
760
- }
761
- #cff-admin .cff_support p{
762
- width: 100%;
763
- float: left;
764
- clear: both;
765
- margin: 0 0 20px 0;
766
- }
767
- #cff-admin .cff-support-title{
768
- font-weight: bold;
769
- font-size: 16px;
770
- display: block;
771
- padding-bottom: 5px;
772
- }
773
- #cff-admin .cff-support-faqs{
774
- float: left;
775
- clear: both;
776
- width: 100%;
777
- padding-left: 5%;
778
- margin: -10px 0 10px 0;
779
- }
780
- #cff-admin .cff-support-faqs ul{
781
- float: left;
782
- width: 250px;
783
- margin-right: 0;
784
- }
785
- #cff-admin .cff-support-faqs .cff-faq-col-1{
786
- width: 200px;
787
- }
788
- #cff-admin .cff-support-faqs ul li{
789
- font-size: 13px;
790
- margin-bottom: 4px;
791
- }
792
- #cff-admin .cff-support-faqs .fa-chevron-right{
793
- font-size: 8px;
794
- margin-left: 4px;
795
- }
796
- #cff-admin #cff-support-video{
797
- margin-top: 10px;
798
- border: 1px solid #ddd;
799
- display: none;
800
- }
801
-
802
- /* Other plugins */
803
- #cff-admin .cff-other-plugin{
804
- display: block;
805
- float: left;
806
- clear: both;
807
- width: 99%;
808
- max-width: 600px;
809
- padding: 20px 20px 5px 20px;
810
- margin: 15px 15px 0 0;
811
- background: #f9f9f9;
812
- border: 1px solid #ddd;
813
- border-radius: 5px;
814
- box-shadow: inset 0 0 5px #eee;
815
- text-decoration: none;
816
- box-sizing: border-box;
817
- }
818
- #cff-admin .cff-other-plugins-header{
819
- margin-top: 60px;
820
- }
821
- #cff-admin .cff-other-plugins-header span{
822
- display: inline-block;
823
- position: relative;
824
- width: 18px;
825
- height: 21px;
826
- top: 3px;
827
- margin-right: 8px;
828
- background: url('../img/cff-sprite.png') no-repeat -54px -16px;
829
- }
830
- #cff-admin .cff-other-plugin h3{
831
- padding: 0;
832
- margin: 0;
833
- }
834
-
835
- /* Color picker */
836
- #cff-admin .wp-picker-container,
837
- #cff-admin .wp-picker-container:active {
838
- display: inline-block;
839
- outline: 0;
840
- }
841
-
842
- /* Pro options */
843
- #cff-admin .cff-pro, #cff-admin .cff-pro label, #cff-admin .cff-pro h3 {
844
- color: #999 !important;
845
- }
846
-
847
- /* Pro notice */
848
- #cff-admin .cff-pro-notice{
849
- display: block;
850
- float: left;
851
- clear: both;
852
- margin: 20px 0 0 0;
853
- overflow: hidden;
854
- -moz-border-radius: 4px;
855
- -webkit-border-radius: 4px;
856
- border-radius: 4px;
857
- -moz-transition: all 0.5s ease-in-out;
858
- -webkit-transition: all 0.5s ease-in-out;
859
- -o-transition: all 0.5s ease-in-out;
860
- transition: all 0.5s ease-in-out;
861
- }
862
- #cff-admin .cff-pro-notice img{
863
- float: left;
864
- }
865
- #cff-admin .cff-pro-notice:hover {
866
- opacity: 0.95;
867
- -moz-transition: all 0.1s ease-in-out;
868
- -webkit-transition: all 0.1s ease-in-out;
869
- -o-transition: all 0.1s ease-in-out;
870
- transition: all 0.1s ease-in-out;
871
- }
872
- #cff-admin .cff-share-plugin{
873
- width: 100%;
874
- float: left;
875
- clear: both;
876
- border-top: 1px solid #ccc;
877
- margin: 20px 0 0 0;
878
- }
879
-
880
- /* Review notice */
881
- .cff_notice{
882
- position: relative;
883
- clear: right;
884
- overflow: hidden;
885
- padding: 20px 70px 23px 82px;
886
- box-sizing: border-box;
887
- margin: 40px 20px 10px 0px;
888
- background: #FFFFFF 0 0 no-repeat padding-box;
889
- box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
890
- border-radius: 2px;
891
- }
892
- .cff_review_notice,
893
- .cff_discount_notice,
894
- .cff_review_notice_step_1 {
895
- border-top: 2px solid #0068A0;
896
- }
897
- .cff_notice .cff_thumb{
898
- position: absolute;
899
- display: inline-block;
900
- -moz-border-radius: 4px;
901
- -webkit-border-radius: 4px;
902
- border-radius: 4px;
903
- left: 0;
904
- top: 0;
905
- margin: 0;
906
- top: 20px;
907
- left: 24px;
908
- width: 34px;
909
- height: 44px;
910
- }
911
- .cff_notice .cff_thumb {
912
- width: 42px;
913
- height: 42px;
914
- top: 11px;
915
- }
916
- .cff_notice.cff_review_notice .cff_thumb {
917
- top: 16px;
918
- }
919
- .cff_notice.cff_review_notice_step_1 {
920
- padding: 18px 120px 18px 82px;
921
- }
922
- .cff_notice.cff_review_notice_step_1 .cff-notice-text .cff-notice-text-p {
923
- font-size: 16px;
924
- font-weight: 600;
925
- margin-bottom: 0;
926
- }
927
- .cff_notice .cff_thumb .img-overlay {
928
- position: absolute;
929
- bottom: 4px;
930
- padding: 6px 7px 6px 5px;
931
- font-size: 13px;
932
- font-weight: bold;
933
- background: #fff;
934
- background: rgba(255,255,255,0.85);
935
- line-height: 1;
936
- color: #333;
937
- box-shadow: 1px -1px 3px 0 rgba(0,0,0,0.15);
938
- }
939
- .cff_notice .cff_thumb img {
940
- max-width: 100%;
941
- }
942
- .cff_notice .cff-notice-text{
943
- float: left;
944
- clear: none;
945
- width: 100%;
946
- padding: 0;
947
- }
948
-
949
- .cff_notice.cff_review_notice_step_1 .cff-notice-text {
950
- width: auto;
951
- }
952
- .cff_notice .cff-notice-text .cff-notice-text-p {
953
- margin-bottom: 15px;
954
- }
955
-
956
- .cff_notice .cff-notice-text .cff-notice-text-header {
957
- font-size: 16px;
958
- margin: 0 0 10px;
959
- color: #141B38;
960
- }
961
- @media (min-width: 1170px ) {
962
- .cff_notice_op.cff_discount_notice .cff-notice-text {
963
- display: flex;
964
- flex-wrap: wrap;
965
- justify-content: space-between;
966
- }
967
- .cff_notice_op.cff_discount_notice .cff-notice-text .cff-notice-text-inner {
968
- width: 60%;
969
- max-width: 540px;
970
- }
971
- .cff_notice_op.cff_discount_notice .cff-notice-text .cff-notice-text-p {
972
- margin-bottom: 0;
973
- }
974
- }
975
- .cff_notice .cff-links{
976
- margin-top: 4px !important;
977
- }
978
- .cff_notice p{
979
- float: left;
980
- clear: both;
981
- width: auto;
982
- font-weight: normal;
983
- font-size: 14px;
984
- line-height: 22px;
985
- margin: 0px 0 10px 0;
986
- color: #434960;
987
- }
988
- .cff_notice a:hover,
989
- .cff_notice a:focus{
990
- color: #0c7abf;
991
- }
992
- .cff_notice .cff-notice-links{
993
- margin: 0;
994
- }
995
- .cff-notice-links{
996
- margin-top: 0 !important;
997
- }
998
- .cff-notice-links .cff-btn {
999
- font-weight: 600;
1000
- padding: 5px 12px;
1001
- border-radius: 2px;
1002
- box-sizing: border-box;
1003
- height: 32px;
1004
- text-decoration: none;
1005
- font-size: 12px;
1006
- display: inline-block;
1007
- }
1008
- .cff-notice-links a:not(:last-child) {
1009
- margin-right: 5px;
1010
- }
1011
- .cff-notice-dismiss {
1012
- position: absolute;
1013
- top: 3px;
1014
- right: 0;
1015
- cursor: pointer;
1016
- width: 40px;
1017
- height: 40px;
1018
- display: flex;
1019
- justify-content: center;
1020
- align-items: center;
1021
- }
1022
- .cff-notice-dismiss path {
1023
- fill: #8a8787;
1024
- }
1025
- body .cff_review_step1_notice h3.title {
1026
- display: inline-block;
1027
- font-size: 16px !important;
1028
- font-weight: 600 !important;
1029
- margin: 0 !important;
1030
- }
1031
- body .cff_review_step1_notice .cff-btn-link {
1032
- font-size: 16px;
1033
- font-weight: 600;
1034
- line-height: 26px;
1035
- text-decoration-line: underline;
1036
- color: #0068A0;
1037
- background: none;
1038
- border: none;
1039
- cursor: pointer;
1040
- padding: 0;
1041
- }
1042
- body .cff_review_step1_notice .cff-btn-link:not(:last-child) {
1043
- margin-right: 12px;
1044
- }
1045
-
1046
- .cff_notice .cff_notice_close,
1047
- .cff_notice .cff_bfcm_sale_notice_close,
1048
- .cff_notice .cff_new_user_sale_notice_close {
1049
- position: absolute;
1050
- top: 0;
1051
- right: 0;
1052
- padding: 10px;
1053
- line-height: 1;
1054
- }
1055
- .cff_notice .cff_notice_close:hover,
1056
- .cff_notice .cff_notice_close:focus{
1057
- color: #a34100;
1058
- }
1059
-
1060
- /* Notice CTA btn */
1061
-
1062
- .cff_notice .cff_other_notice{
1063
- padding-top: 10px;
1064
- font-style: italic;
1065
- font-size: 12px;
1066
- }
1067
- .cff_notice .cff_other_notice a{
1068
- padding: 0;
1069
- }
1070
- .cff-notice-consent-btns {
1071
- float: left;
1072
- }
1073
-
1074
- .cff-notice-consent-btns .cff-btn-link {
1075
- font-size: 16px;
1076
- font-weight: 600;
1077
- line-height: 26px;
1078
- text-decoration-line: underline;
1079
- color: #0068A0;
1080
- background: none;
1081
- border: none;
1082
- cursor: pointer;
1083
- padding: 0;
1084
- }
1085
- .cff-notice-consent-btns .cff-btn-link:not(:last-child) {
1086
- margin-right: 12px;
1087
- }
1088
- @media (min-width: 700px) {
1089
- .cff-notice-consent-btns {
1090
- margin-left: 20px;
1091
- }
1092
- body .review-step-1-btns {
1093
- margin-left: 20px;
1094
- }
1095
- .cff_review_step1_notice .review-step-1-btns {
1096
- display: inline-block;
1097
- }
1098
- }
1099
- /* Support page */
1100
- #cff-admin .cff_support{
1101
- overflow: hidden;
1102
- margin-bottom: 20px;
1103
- width: 70%;
1104
- }
1105
- #cff-admin .cff_support p{
1106
- width: 100%;
1107
- float: left;
1108
- clear: both;
1109
- margin: 0 0 20px 0;
1110
- }
1111
- #cff-admin .cff-support-title{
1112
- font-weight: bold;
1113
- font-size: 16px;
1114
- display: block;
1115
- padding-bottom: 5px;
1116
- }
1117
- #cff-admin .cff-support-faqs{
1118
- float: left;
1119
- clear: both;
1120
- width: 100%;
1121
- padding-left: 5%;
1122
- margin: -10px 0 10px 0;
1123
- }
1124
- #cff-admin .cff-support-faqs ul{
1125
- float: left;
1126
- width: 250px;
1127
- margin-right: 0;
1128
- }
1129
- #cff-admin .cff-support-faqs .cff-faq-col-1{
1130
- width: 200px;
1131
- }
1132
- #cff-admin .cff-support-faqs ul li{
1133
- font-size: 13px;
1134
- margin-bottom: 4px;
1135
- }
1136
- #cff-admin .cff-support-faqs .fa-chevron-right{
1137
- font-size: 8px;
1138
- margin-left: 4px;
1139
- }
1140
- #cff-admin #cff-support-video{
1141
- margin-top: 10px;
1142
- border: 1px solid #ddd;
1143
- display: none;
1144
- }
1145
-
1146
- /* FB login button */
1147
- #cff-admin .cff_admin_btn,
1148
- #cff-admin .cff-admin-cancel-btn{
1149
- display: inline-block;
1150
- clear: both;
1151
- padding: 0 21px 0 20px;
1152
- height: 45px;
1153
- line-height: 44px;
1154
- background: #386793;
1155
- color: #e9eef3;
1156
- text-decoration: none;
1157
- font-size: 14px;
1158
-
1159
- -moz-border-radius: 5px;
1160
- -webkit-border-radius: 5px;
1161
- border-radius: 5px;
1162
-
1163
- -moz-transition: all 0.5s ease-in-out;
1164
- -webkit-transition: all 0.5s ease-in-out;
1165
- -o-transition: all 0.5s ease-in-out;
1166
- transition: all 0.5s ease-in-out;
1167
- }
1168
- #cff-admin .cff_admin_btn:hover,
1169
- #cff-admin .cff-admin-cancel-btn:hover{
1170
- background-color: #3880c4;
1171
- color: #fff;
1172
-
1173
- -moz-transition: all 0.1s ease-in-out;
1174
- -webkit-transition: all 0.1s ease-in-out;
1175
- -o-transition: all 0.1s ease-in-out;
1176
- transition: all 0.1s ease-in-out;
1177
- }
1178
- #cff-admin .cff_admin_btn .fa {
1179
- margin-right: 5px;
1180
- font-size: 18px;
1181
- position: relative;
1182
- top: 1px;
1183
- }
1184
-
1185
- #cff-admin .cff-managed-pages{
1186
- margin: 10px 0 0 0;
1187
- }
1188
- #cff-admin .cff-managed-page{
1189
- width: 100%;
1190
- border: 1px solid transparent;
1191
- padding: 5px;
1192
- background: #fff;
1193
- box-sizing: border-box;
1194
- }
1195
- #cff-admin .cff-managed-page:hover{
1196
- background: #eee;
1197
- cursor: pointer;
1198
- }
1199
- #cff-admin .cff-managed-page .cff-page-avatar{
1200
- float: left;
1201
- margin-right: 10px;
1202
- }
1203
- #cff-admin .cff-managed-page p{
1204
- padding: 0;
1205
- margin: 0;
1206
- height: 50px;
1207
- line-height: 50px;
1208
- }
1209
- #cff-admin .cff-managed-page.cff-page-selected{
1210
- background: #dceada;
1211
- }
1212
- #cff-admin .cff-save-page-token{
1213
- display: none;
1214
- }
1215
- #cff-admin #cff_fb_login_modal{
1216
- display: none;
1217
- /*display: block;*/
1218
- position: fixed;
1219
- z-index: 999;
1220
- width: 100%;
1221
- top: 0;
1222
- right: 0;
1223
- bottom: 0;
1224
- left: 0;
1225
- background: rgba(0,0,0,0.3);
1226
- }
1227
- #cff-admin .cff_modal_box{
1228
- position: absolute;
1229
- top: 140px;
1230
- left: 50%;
1231
- width: 480px;
1232
- margin: 0 0 0 -245px;
1233
- padding: 25px 35px;
1234
- background: #fff;
1235
- text-align: center;
1236
-
1237
- -webkit-box-shadow: 0 1px 20px rgba(0,0,0,0.2);
1238
- box-shadow: 0 1px 20px rgba(0,0,0,0.2);
1239
-
1240
- -moz-border-radius: 3px;
1241
- -webkit-border-radius: 3px;
1242
- border-radius: 3px;
1243
- }
1244
- #cff-admin .cff_modal_box .cff_admin_btn{
1245
- margin-top: 10px;
1246
- }
1247
- #cff-admin .cff-admin-cancel-btn{
1248
- margin-right: 5px;
1249
- background: #ddd;
1250
- color: #555;
1251
- }
1252
- #cff-admin .cff-admin-cancel-btn:hover{
1253
- background: #ccc;
1254
- color: #333;
1255
- }
1256
- #cff-admin .cff_modal_box p{
1257
- font-size: 14px;
1258
- line-height: 1.6;
1259
- }
1260
- /* Tokens modal */
1261
- #cff-admin #cff_fb_login_modal.cff_modal_tokens{
1262
- display: block;
1263
- }
1264
- #cff-admin .cff-pages-wrap{
1265
- max-height: 310px;
1266
- overflow-y: auto;
1267
- }
1268
- #cff-admin .cff_modal_tokens .cff_modal_box p{
1269
- text-align: left;
1270
- }
1271
- #cff-admin .cff_modal_tokens .cff-managed-page .cff-page-avatar {
1272
- margin-right: 18px;
1273
- border-radius: 3px;
1274
- }
1275
- #cff-admin .cff_modal_box .cff-tokens-note{
1276
- background: #dceada;
1277
- border: 1px solid #6ca365;
1278
- padding: 10px 15px;
1279
- margin: 0 0 20px 0;
1280
- border-radius: 5px;
1281
- line-height: 1.3;
1282
- }
1283
- #cff-admin .cff_modal_box .cff-page-info-name{
1284
- display: block;
1285
- font-size: 15px;
1286
- line-height: 1;
1287
- padding: 5px 0 2px 0;
1288
- }
1289
- #cff-admin .cff_modal_box .cff-page-info{
1290
- display: block;
1291
- font-size: 13px;
1292
- }
1293
- #cff-admin #cff-insert-token,
1294
- #cff-admin .cff-insert-reviews-token,
1295
- #cff-admin .cff-insert-both-tokens,
1296
- #cff-admin #cff-close-modal-primary-button,
1297
- #cff-admin #cff-insert-all-tokens{
1298
- margin-top: 25px;
1299
- float: left;
1300
- clear: both;
1301
- }
1302
- #cff-admin .cff-insert-reviews-token,
1303
- #cff-admin .cff-insert-both-tokens,
1304
- #cff-admin #cff-insert-all-tokens{
1305
- clear: none;
1306
- margin-left: 10px;
1307
- }
1308
- #cff-admin .cff-insert-reviews-token{
1309
- color: #fff;
1310
- border-color: #666;
1311
- background: #888;
1312
- box-shadow: 0 1px 0 #555;
1313
- text-shadow: 0 -1px 0px #555;
1314
- }
1315
- #cff-admin .cff-insert-reviews-token:hover{
1316
- background: #999;
1317
- }
1318
- #cff-admin .cff-insert-reviews-token:active{
1319
- background: #777;
1320
- border-color: #555;
1321
- box-shadow: inset 0 2px 0 #666;
1322
- vertical-align: top;
1323
- }
1324
- #cff-admin .cff-connection-note{
1325
- margin: 30px 0 0 -60px;
1326
- display: inline-block;
1327
- font-size: 12px;
1328
- color: #333;
1329
- text-decoration: none;
1330
- border-bottom: 1px dotted #999;
1331
- }
1332
- #cff-admin .cff-connection-note:hover,
1333
- #cff-admin .cff-connection-note:focus{
1334
- color: #000;
1335
- text-decoration: none;
1336
- border-bottom: 1px dotted #333;
1337
- }
1338
- #cff-admin .cff-modal-close{
1339
- position: absolute;
1340
- top: 0;
1341
- right: 0;
1342
- padding: 10px;
1343
- font-size: 14px;
1344
- color: #ccc;
1345
- margin: 0;
1346
- }
1347
- #cff-admin .cff-modal-close:hover,
1348
- #cff-admin .cff-modal-close:focus{
1349
- color: #333;
1350
- }
1351
- /* Display retrieved pages button */
1352
- #cff-admin #cff_fb_show_tokens {
1353
- background: rgba(0,0,0,0.4);
1354
- color: #fff;
1355
- margin-left: 10px;
1356
- }
1357
- #cff-admin #cff_fb_show_tokens:hover{
1358
- background-color: rgba(0,0,0,0.35);
1359
- }
1360
-
1361
- /* Choose token */
1362
- #cff-admin #cff-own, #cff-admin #cff-public{
1363
- display: none;
1364
- }
1365
- #cff-admin .cff-token-radios{
1366
- width: 265px;
1367
- text-align: left;
1368
- margin-left: 110px;
1369
- }
1370
- #cff-admin .cff-token-radios input{
1371
- position: relative;
1372
- top: 2px;
1373
- }
1374
- #cff-admin .cff_modal_box .cff-disabled{
1375
- background: #EEE;
1376
- color: #aaa;
1377
- cursor: default;
1378
- }
1379
- #cff-admin .cff-token-question-own,
1380
- #cff-admin .cff-token-question-public{
1381
- position: relative;
1382
- top: 2px;
1383
- left: 3px;
1384
- font-size: 15px;
1385
- opacity: 0.8;
1386
- margin: 0;
1387
- }
1388
- #cff-admin .cff-token-question-own:hover,
1389
- #cff-admin .cff-token-question-public:hover{
1390
- opacity: 1;
1391
- color: #005e8c;
1392
- }
1393
- #cff-admin #cff-token-intro .cff-tooltip{
1394
- font-size: 13px;
1395
- background: #f0f0f0;
1396
- padding: 10px 15px;
1397
- }
1398
- #cff-admin .cff-test-license-error{
1399
- margin-top: 10px;
1400
- max-height: 380px;
1401
- overflow-y: scroll;
1402
- width: 99%;
1403
- border: 1px solid #ddd;
1404
- background: rgba(255,255,255,0.3);
1405
- padding: 2px;
1406
- }
1407
-
1408
- /*Hide modal when saving settings */
1409
- #cff-admin #cff_fb_login_modal.cffnomodal{
1410
- display: none;
1411
- }
1412
-
1413
- #cff-admin .cff-success-check {
1414
- color: #75cd32;
1415
- font-size: 16px;
1416
- position: relative;
1417
- top: 6px;
1418
- left: 7px;
1419
- }
1420
-
1421
- /* Groups option */
1422
- #cff-admin .cff-login-options{
1423
- width: 100%;
1424
- padding: 20px 0 0 0;
1425
- margin: 20px 0;
1426
- box-sizing: border-box;
1427
- border-top: 1px solid #eee;
1428
- }
1429
- #cff-admin .cff-login-options label{
1430
- display: block;
1431
- margin-bottom: 5px;
1432
- font-weight: bold;
1433
- }
1434
- #cff-admin #cff_group_app{
1435
- display: none;
1436
- }
1437
- /* Highlight admin groups in list */
1438
- #cff-admin .cff-group-admin{
1439
- position: relative;
1440
- background: #eee;
1441
- }
1442
- #cff-admin .cff-group-admin-icon{
1443
- position: absolute;
1444
- top: 5px;
1445
- right: 5px;
1446
- padding: 5px 8px;
1447
- background: rgba(255,255,255,0.5);
1448
- border-radius: 5px;
1449
- text-transform: uppercase;
1450
- font-size: 11px;
1451
- }
1452
- #cff-admin .cff-group-admin-icon .fa{
1453
- margin-right: 2px;
1454
- font-size: 12px;
1455
- }
1456
- #cff-admin .cff-group-admin .cff-page-info-name {
1457
- max-width: 85%;
1458
- }
1459
- #cff_token_expiration_note{
1460
- display: none;
1461
- width: 250px;
1462
- padding: 5px 10px;
1463
- float: right;
1464
- font-size: 12px;
1465
- margin-top: 11px;
1466
- line-height: 1.3;
1467
- border-radius: 5px;
1468
- }
1469
- #cff-group-member-directions{
1470
- display: none;
1471
- }
1472
- /* App installation directions */
1473
- #cff-group-installation{
1474
- display: none;
1475
- width: 100%;
1476
- clear: both;
1477
- text-align: left;
1478
- }
1479
- #cff-group-installation li{
1480
- font-size: 14px;
1481
- margin: 0 0 10px 0;
1482
- line-height: 1.5;
1483
- }
1484
- #cff-group-installation li{
1485
- position: relative;
1486
- }
1487
- #cff-group-app-tooltip{
1488
- cursor: pointer;
1489
- }
1490
- #cff-group-app-screenshot{
1491
- display: none;
1492
- position: absolute;
1493
- bottom: 42px;
1494
- left: 0;
1495
- margin-left: -85px;
1496
- z-index: 10;
1497
- border: 1px solid rgba(0,0,0,0.3);
1498
- box-shadow: 0 0 0 5000px rgba(0,0,0,0.2);
1499
- border-radius: 5px;
1500
- }
1501
- #cff-group-installation .button-secondary{
1502
- margin: 25px 0 0 10px;
1503
- }
1504
-
1505
- /* Admin footer share icons */
1506
- #cff-admin #cff-admin-share-links{
1507
- opacity: 0;
1508
- display: inline-block;
1509
- padding: 5px;
1510
- border: 1px solid #ccc;
1511
- background: rgba(255,255,255,0.5);
1512
- border-radius: 3px;
1513
- transition: opacity 0.5s;
1514
- }
1515
- #cff-admin #cff-admin-share-links.cff-show{
1516
- transition: opacity 0.5s;
1517
- opacity: 1;
1518
- }
1519
- #cff-admin #twitter-widget-0 {
1520
- width: 65px !important;
1521
- }
1522
-
1523
- #cff-admin #header{
1524
- padding: 0 0 10px 0;
1525
- }
1526
-
1527
- #cff-admin .cff_plugins_promo{
1528
- width: 100%;
1529
- float: left;
1530
- clear: both;
1531
- }
1532
- #cff-admin .cff_plugins_promo a{
1533
- color: #e34f0e;
1534
- }
1535
- #cff-admin .cff-share-plugin h3 {
1536
- padding: 15px 0 0 0;
1537
- }
1538
- #cff-admin .cff-mobile-col-settings .cff-row {
1539
- width: auto;
1540
- padding: 10px 15px;
1541
- margin: 10px 0;
1542
- font-size: 13px;
1543
- background: #f9f9f9;
1544
- background: rgba(255,255,255,0.8);
1545
- -moz-border-radius: 8px;
1546
- -webkit-border-radius: 8px;
1547
- border-radius: 8px;
1548
- }
1549
- #cff-admin .cff-mobile-col-settings label {
1550
- font-weight: 600;
1551
- margin: 0 5px 0 0;
1552
- }
1553
-
1554
-
1555
- /* Connected Accounts */
1556
- #cff-admin #cff_accounts_section{
1557
- width: 100%;
1558
- overflow: hidden;
1559
- }
1560
- #cff-admin #cff_connected_accounts_wrap{
1561
- clear: both;
1562
- max-height: 600px;
1563
- overflow-y: auto;
1564
- }
1565
- #cff-admin #cff_accounts_section h3{
1566
- float: left;
1567
- clear: both;
1568
- font-size: 14px;
1569
- padding: 0;
1570
- margin: 10px 0 5px 0;
1571
- }
1572
- #cff-admin .cff_connected_account {
1573
- position: relative;
1574
- box-sizing: border-box;
1575
- padding: 7px 35px 7px 7px;
1576
- border-radius: 5px;
1577
- background: #fff;
1578
- margin-bottom: 5px;
1579
- overflow: hidden;
1580
- clear: both;
1581
- border: 1px solid #ddd;
1582
- }
1583
- #cff-admin .cff_ca_username {
1584
- line-height: 1.4;
1585
- margin-left: 15px;
1586
- float: left;
1587
- font-size: 18px;
1588
- }
1589
- #cff-admin .cff_connected_account .cff_ca_avatar{
1590
- margin-right: 15px;
1591
- }
1592
- #cff-admin .cff_connected_account .cff_ca_username {
1593
- margin-left: 0;
1594
- margin-right: 25px;
1595
- }
1596
- #cff-admin .cff_connected_account .cff_ca_username strong{
1597
- float: left;
1598
- }
1599
- #cff-admin .cff_connected_account .cff_ca_username .cff_ca_pagetype{
1600
- font-size: 10px;
1601
- font-weight: normal;
1602
- text-transform: uppercase;
1603
- padding: 0;
1604
- margin: 0;
1605
- display: block;
1606
- }
1607
-
1608
- #cff-admin .cff_ca_actions {
1609
- display: inline-block;
1610
- }
1611
- #cff-admin .cff_ca_actions .fa{
1612
- margin-right: 5px;
1613
- }
1614
- #cff-admin .cff_ca_actions a.button-primary,
1615
- #cff-admin .cff_ca_actions a.button-secondary,
1616
- #cff-admin .cff_ca_accesstoken a.cff_ca_token_shortcode {
1617
- font-size: 12px;
1618
- padding: 6px;
1619
- height: auto;
1620
- line-height: 1;
1621
- margin: 7px 5px 0 0;
1622
- vertical-align: top;
1623
- }
1624
- #cff-admin .cff_ca_at_is_valid {
1625
- margin-top: 10px;
1626
- display: none;
1627
- }
1628
- #cff-admin #cff_primary_account_label{
1629
- padding: 0 0 0 1px;
1630
- margin: 0;
1631
- font-size: 12px;
1632
- }
1633
- #cff-admin #cff_primary_account_label span{
1634
- padding: 0;
1635
- margin: 0;
1636
- display: inline-block;
1637
- position: relative;
1638
- top: -4px;
1639
- }
1640
- #cff-admin #cff_primary_account_label img{
1641
- width: 18px;
1642
- height: 18px;
1643
- border-radius: 3px;
1644
- padding: 0;
1645
- margin: 0 5px 0 0;
1646
- }
1647
-
1648
- @-webkit-keyframes cff_flash {
1649
- 0% {
1650
- background-color: #cae2a5;
1651
- opacity:1;
1652
- border: 1px solid #b2ce88;
1653
- }
1654
- 100% {
1655
- background-color: #fff;
1656
- }
1657
- }
1658
- #cff-admin .cff_account_updated{
1659
- border: 1px solid #ddd;
1660
- background: #fff;
1661
-
1662
- -webkit-animation-name: cff_flash;
1663
- -webkit-animation-duration: 700ms;
1664
- -webkit-animation-iteration-count: 1;
1665
- -webkit-animation-timing-function: linear;
1666
- -moz-animation-name: cff_flash;
1667
- -moz-animation-duration: 700ms;
1668
- -moz-animation-iteration-count: 1;
1669
- -moz-animation-timing-function: linear;
1670
- }
1671
-
1672
- #cff-admin .cff_account_active{
1673
- border: 1px solid #b2ce88;
1674
- background: #ecf2e3;
1675
- }
1676
-
1677
- #cff-admin .cff_ca_alert {
1678
- display: none;
1679
- }
1680
- #cff-admin .cff_account_invalid .cff_ca_alert {
1681
- display: block;
1682
- }
1683
- #cff-admin .cff_ca_avatar{
1684
- float: left;
1685
- width: 40px;
1686
- height: 40px;
1687
- border-radius: 5px;
1688
- }
1689
- #cff-admin .cff_ca_accesstoken{
1690
- display: none;
1691
- width: 100%;
1692
- float: left;
1693
- clear: both;
1694
- margin-top: 10px;
1695
- }
1696
- #cff-admin .cff_ca_token_label{
1697
- display: inline-block;
1698
- position: relative;
1699
- background: #f9f9f9;
1700
- color: #555;
1701
- padding: 3px 5px;
1702
- font-size: 12px;
1703
- border: 1px solid #d6d6d6;
1704
- height: 16px;
1705
- line-height: 15px;
1706
- border-radius: 4px 0 0 4px;
1707
- }
1708
- #cff-admin .cff_ca_token{
1709
- position: relative;
1710
- top: 1px;
1711
- padding: 3px 10px;
1712
- border: 1px solid #d6d6d6;
1713
- border-left: none;
1714
- font-size: 12px;
1715
- border-radius: 0 4px 4px 0;
1716
- background: rgba(255,255,255,0.8);
1717
- width: 80%;
1718
- display: inline-block;
1719
- margin-left: 0;
1720
- min-height: 10px;
1721
- line-height: 1.4;
1722
- }
1723
- #cff-admin a.cff_ca_token_shortcode,
1724
- #cff-admin .cff_make_primary,
1725
- #cff-admin .cff_ca_show_token a,
1726
- #cff-admin .cff_make_reviews {
1727
- padding: 4px 8px;
1728
- display: inline-block;
1729
- color: #555;
1730
- border-radius: 3px;
1731
- margin: 7px 0 0 0;
1732
- font-size: 12px;
1733
- text-decoration: none;
1734
-
1735
- background: #fff;
1736
- background: rgba(255,255,255,0.9);
1737
- border: 1px solid #ccc;
1738
- }
1739
- #cff-admin .cff_make_primary,
1740
- #cff-admin .cff_make_reviews{
1741
- margin-right: 5px;
1742
- background: #fff;
1743
- background: rgba(255,255,255,0.9);
1744
- border: 1px solid #ccc;
1745
- }
1746
- #cff-admin a.cff_ca_token_shortcode:hover,
1747
- #cff-admin .cff_make_primary:hover,
1748
- #cff-admin .cff_ca_show_token a:hover,
1749
- #cff-admin .cff_make_reviews:hover{
1750
- border: 1px solid #aaa;
1751
- background: rgba(0,0,0,0.03);
1752
- }
1753
- #cff-admin a.cff_ca_token_shortcode:active,
1754
- #cff-admin .cff_make_primary:active,
1755
- #cff-admin .cff_ca_show_token a:active,
1756
- #cff-admin .cff_make_reviews:active{
1757
- background: rgba(255,255,255,0.9);
1758
- border: 1px solid #ccc;
1759
- }
1760
-
1761
-
1762
- #cff-admin .cff_delete_account{
1763
- position: absolute;
1764
- right: 10px;
1765
- top: 10px;
1766
-
1767
- padding: 5px 10px;
1768
- background: rgba(0,0,0,0.05);
1769
- color: #666;
1770
- border-radius: 50px;
1771
- text-decoration: none;
1772
- font-size: 12px;
1773
- }
1774
- #cff-admin .cff_delete_account:hover,
1775
- #cff-admin .cff_delete_account:focus{
1776
- background: #333;
1777
- color: #ddd;
1778
- }
1779
- #cff-admin .cff_delete_account .cff_remove_text{
1780
- display: none;
1781
- margin-left: 5px;
1782
- }
1783
- #cff-admin .cff_delete_account:hover .cff_remove_text{
1784
- display: inline-block;
1785
- }
1786
-
1787
- .cff_connected_accounts_wrap{
1788
- vertical-align: top;
1789
- }
1790
- .cff_connected_actions{
1791
- display: none;
1792
- }
1793
- #cff_export_accounts{
1794
- font-size: 12px;
1795
- color: #999 !important;
1796
- text-decoration: underline;
1797
- margin-left: 2px;
1798
- }
1799
- #cff_export_accounts_wrap{
1800
- display: none;
1801
- }
1802
- #cff-admin .cff_no_accounts{
1803
- display: inline-block;
1804
- padding: 4px 15px;
1805
- border-radius: 8px;
1806
- background: rgba(255,255,255,0.8);
1807
- margin-bottom: 3px;
1808
- }
1809
- #cff-admin #cff_manual_submit:active{
1810
- vertical-align: unset;
1811
- }
1812
- #cff-admin .cff_manually_connect_wrap{
1813
- padding-top: 5px;
1814
- }
1815
- #cff-admin .cff_user_feed_account_wrap:first-child{
1816
- padding-top: 5px;
1817
- }
1818
- #cff-admin .cff_user_feed_account_wrap:last-child{
1819
- padding-bottom: 6px;
1820
- }
1821
- #cff-admin .cff_user_feed_account_wrap{
1822
- padding-bottom: 5px;
1823
- padding-left: 2px;
1824
- }
1825
- #cff-admin .cff_user_feed_account_wrap span{
1826
- font-size: 13px;
1827
- }
1828
- #cff-admin .cff_manual_account_id_toggle label{
1829
- display: block;
1830
- margin: 10px 0 0 0;
1831
- font-size: 13px;
1832
- }
1833
- #cff-admin .cff_business_profile_tag{
1834
- display: none;
1835
- padding: 8px 10px;
1836
- background: rgba(0,0,0,0.05);
1837
- border-radius: 0 5px 5px 0;
1838
- margin: 0 0 0 -2px;
1839
- font-size: 13px;
1840
- height: 15px;
1841
- line-height: 15px;
1842
- box-shadow: inset 0 0 1px rgba(0,0,0,.5);
1843
- }
1844
- #cff-admin .cff_ca_info{
1845
- overflow: hidden;
1846
- }
1847
- #cff-admin .cff_ca_show_token{
1848
- display: inline-block;
1849
- padding: 0;
1850
- margin: 0 0 0 5px;
1851
- font-size: 12px;
1852
- vertical-align: top;
1853
- }
1854
- #cff-admin .cff_ca_shortcode{
1855
- display: none;
1856
- padding: 0;
1857
- width: 100%;
1858
- float: left;
1859
- clear: both;
1860
- margin: 10px 0 0 0;
1861
- }
1862
- #cff-admin .cff_ca_shortcode p{
1863
- margin: 0;
1864
- padding: 15px 0 0 0;
1865
- font-size: 13px;
1866
- }
1867
- #cff-admin .cff_ca_shortcode code{
1868
- margin-top: 5px;
1869
- display: inline-block;
1870
- }
1871
- #cff-admin .cff_user_feed_ids_wrap .cff_ca_avatar{
1872
- width: 20px;
1873
- height: 20px;
1874
- position: relative;
1875
- top: 5px;
1876
- margin-right: 8px;
1877
- border-radius: 4px;
1878
- }
1879
-
1880
- #cff-admin #cff_manual_account_step_2{
1881
- display: none;
1882
- }
1883
- #cff-admin #cff_manual_account_button{
1884
- float: left;
1885
- clear: both;
1886
- margin-bottom: 10px;
1887
- }
1888
- #cff-admin #cff_manual_account{
1889
- float: left;
1890
- clear: both;
1891
- display: none;
1892
- margin: 0 0 20px 0;
1893
- padding: 15px 20px 20px 20px;
1894
- background: rgba(255,255,255,0.5);
1895
- border: 1px solid #ddd;
1896
- border-radius: 5px;
1897
- }
1898
- #cff-admin #cff_manual_account p.submit,
1899
- #cff-admin .cff_manual_back{
1900
- float: left;
1901
- padding: 0;
1902
- margin: 20px 5px 0 0;
1903
- }
1904
- #cff-admin .cff_manual_back{
1905
- display: block;
1906
- padding: 0 10px;
1907
- }
1908
- #cff-admin .cff_account_type_page .cff_group,
1909
- #cff-admin .cff_account_type_group .cff_page{
1910
- display: none;
1911
- }
1912
- #cff-admin #cff_manual_account_step_2 label {
1913
- width: 165px;
1914
- display: inline-block;
1915
- }
1916
- #cff-admin #cff_manual_account_step_2 input[type=text] {
1917
- width: 300px;
1918
- }
1919
- #cff-admin .cff_manual_forward{
1920
- position: relative;
1921
- top: 2px;
1922
- }
1923
- #cff-admin .cff_error{
1924
- border: 1px solid #e37177;
1925
- background: #ffebec;
1926
- }
1927
-
1928
- @media all and (max-width: 1200px){
1929
- #cff-admin .cff_delete_account .cff_remove_text{
1930
- display: none;
1931
- }
1932
- #cff-admin .cff_ca_token_label{
1933
- display: none;
1934
- }
1935
- #cff-admin .cff_ca_token{
1936
- border-left: 1px solid #d6d6d6;
1937
- border-radius: 4px;
1938
- }
1939
- }
1940
-
1941
-
1942
- /* Lite Notice */
1943
- @media screen and (max-width: 600px) {
1944
- #cff-notice-bar {
1945
- display:none !important
1946
- }
1947
- }
1948
-
1949
- #cff-notice-bar {
1950
- background-color: #DDDDDD;
1951
- color: #777777;
1952
- text-align: center;
1953
- position: relative;
1954
- padding: 7px;
1955
- margin-bottom: 0;
1956
- opacity: 1;
1957
- transition: all .3s ease-in-out;
1958
- max-height: 100px;
1959
- overflow: hidden
1960
- }
1961
-
1962
- #cff-notice-bar.out {
1963
- opacity: .5;
1964
- max-height: 0
1965
- }
1966
-
1967
- #cff-notice-bar a {
1968
- color: #e34f0e;
1969
- }
1970
-
1971
- #cff-notice-bar a:hover {
1972
- color: #b85a1b
1973
- }
1974
-
1975
- #cff-notice-bar .dismiss {
1976
- position: absolute;
1977
- top: 0;
1978
- right: 0;
1979
- border: none;
1980
- padding: 5px;
1981
- margin-top: 1px;
1982
- background: 0 0;
1983
- color: #72777c;
1984
- cursor: pointer
1985
- }
1986
-
1987
- #cff-notice-bar .dismiss:before {
1988
- background: 0 0;
1989
- color: #72777c;
1990
- content: "\f335";
1991
- display: block;
1992
- font: normal 20px/20px dashicons;
1993
- speak: none;
1994
- height: 20px;
1995
- text-align: center;
1996
- width: 20px;
1997
- -webkit-font-smoothing: antialiased
1998
- }
1999
-
2000
- /* Error Reporting */
2001
- #cff-admin .cff-space-left {
2002
- margin-left: 10px;
2003
- }
2004
- #cff-admin .cff-goto {
2005
- border: 1px solid #e89a2e;
2006
- background-color: rgba(232, 154, 46, .2);
2007
- }
2008
-
2009
- #cff-admin .cff_box {
2010
- float: left;
2011
- clear: both;
2012
- width: 96%;
2013
-
2014
- padding: 10px 2%;
2015
- margin: 10px 0;
2016
- font-size: 13px;
2017
- background: #f9f9f9;
2018
- background: rgba(255,255,255,0.8);
2019
-
2020
- -moz-border-radius: 8px;
2021
- -webkit-border-radius: 8px;
2022
- border-radius: 8px;
2023
- }
2024
- #cff-admin .cff_box_setting{
2025
- margin-bottom: 20px;
2026
- }
2027
- #cff-admin .cff_box_setting:last-child {
2028
- margin-bottom: 0;
2029
- }
2030
- #cff-admin .cff_box_setting label {
2031
- display: inline-block;
2032
- font-weight: bold;
2033
- font-size: 14px;
2034
- padding-bottom: 5px;
2035
- padding-right: 5px;
2036
- }
2037
- #cff-admin .cff_box_setting textarea {
2038
- width: 100%;
2039
- }
2040
-
2041
-
2042
- /* About */
2043
- #cff-admin-about *,#cff-admin-about *::before,#cff-admin-about *::after {
2044
- -webkit-box-sizing: border-box;
2045
- -moz-box-sizing: border-box;
2046
- box-sizing: border-box
2047
- }
2048
-
2049
- #cff-admin-about .cff-admin-about-section {
2050
- position: relative;
2051
- margin: 0 20px 20px;
2052
- padding: 30px;
2053
- background: #fff;
2054
- border: 1px solid #DDDDDD;
2055
- line-height: 2;
2056
- }
2057
-
2058
- #cff-admin-about .cff-admin-about-section h1,#cff-admin-about .cff-admin-about-section h2,#cff-admin-about .cff-admin-about-section h3,#cff-admin-about .cff-admin-about-section h4,#cff-admin-about .cff-admin-about-section h5 {
2059
- margin-top: 0;
2060
- padding-top: 0;
2061
- line-height: 1.6
2062
- }
2063
-
2064
- #cff-admin-about .cff-admin-about-section h2 {
2065
- font-size: 24px
2066
- }
2067
-
2068
- #cff-admin-about .cff-admin-about-section h3 {
2069
- font-size: 18px;
2070
- margin-bottom: 30px;
2071
- color: #23282C
2072
- }
2073
-
2074
- #cff-admin-about .cff-admin-about-section ul,#cff-admin-about .cff-admin-about-section p {
2075
- font-size: 16px
2076
- }
2077
-
2078
- #cff-admin-about .cff-admin-about-section p {
2079
- margin-bottom: 20px
2080
- }
2081
-
2082
- #cff-admin-about .cff-admin-about-section p.bigger {
2083
- font-size: 18px
2084
- }
2085
-
2086
- #cff-admin-about .cff-admin-about-section p.smaller {
2087
- font-size: 14px
2088
- }
2089
-
2090
- #cff-admin-about .cff-admin-about-section p:last-child {
2091
- margin-bottom: 0
2092
- }
2093
-
2094
- #cff-admin-about .cff-admin-about-section hr {
2095
- margin: 30px 0
2096
- }
2097
-
2098
- #cff-admin-about .cff-admin-about-section figure {
2099
- margin: 0
2100
- }
2101
-
2102
- #cff-admin-about .cff-admin-about-section figure img {
2103
- width: 100%
2104
- }
2105
-
2106
- #cff-admin-about .cff-admin-about-section figure figcaption {
2107
- font-size: 13px;
2108
- color: #888888;
2109
- margin-top: -10px;
2110
- text-align: center;
2111
- line-height: initial
2112
- }
2113
-
2114
- #cff-admin-about .cff-admin-about-section .cff-admin-column-40 {
2115
- padding-left: 15px
2116
- }
2117
-
2118
- @media (max-width: 767px) {
2119
- #cff-admin-about .cff-admin-about-section .cff-admin-column-40 {
2120
- width:100%;
2121
- padding-left: 0;
2122
- padding-top: 20px
2123
- }
2124
- }
2125
-
2126
- #cff-admin-about .cff-admin-about-section .cff-admin-column-60 {
2127
- padding-right: 15px
2128
- }
2129
- #cff-admin-about .cff-admin-about-section .cff-admin-about-text{
2130
- padding-right: 400px;
2131
- }
2132
- #cff-admin-about .cff-admin-about-section .cff-admin-about-image{
2133
- position: absolute;
2134
- width: 340px;
2135
- top: 20px;
2136
- right: 20px;
2137
- }
2138
-
2139
- @media (max-width: 767px) {
2140
- #cff-admin-about .cff-admin-about-section .cff-admin-column-60,
2141
- #cff-admin-about .cff-admin-about-section .cff-admin-about-text,
2142
- #cff-admin-about .cff-admin-about-section .cff-admin-about-image {
2143
- position: relative;
2144
- width:100%;
2145
- padding-right: 0
2146
- }
2147
- }
2148
-
2149
- #cff-admin-about .cff-admin-about-section ul.list-plain {
2150
- margin-top: 0;
2151
- margin-bottom: 0
2152
- }
2153
-
2154
- #cff-admin-about .cff-admin-about-section ul.list-plain li {
2155
- margin-bottom: 0
2156
- }
2157
-
2158
- #cff-admin-about .cff-admin-about-section ul.list-features li .fa {
2159
- color: #2a9b39;
2160
- margin: 0 8px 0 0
2161
- }
2162
-
2163
- #cff-admin-about .cff-admin-about-section .fa-star {
2164
- color: gold
2165
- }
2166
-
2167
- #cff-admin-about .cff-admin-about-section .no-margin {
2168
- margin: 0 !important
2169
- }
2170
-
2171
- #cff-admin-about .cff-admin-about-section .no-padding {
2172
- padding: 0 !important
2173
- }
2174
-
2175
- #cff-admin-about .cff-admin-about-section .centered {
2176
- text-align: center !important
2177
- }
2178
-
2179
- #cff-admin-about .cff-admin-about-section-first-form {
2180
- display: flex
2181
- }
2182
-
2183
- @media (max-width: 767px) {
2184
- #cff-admin-about .cff-admin-about-section-first-form {
2185
- display:block !important
2186
- }
2187
- }
2188
-
2189
- #cff-admin-about .cff-admin-about-section-first-form .cff-admin-about-section-first-form-text {
2190
- flex: 1;
2191
- padding-right: 30px
2192
- }
2193
-
2194
- @media (max-width: 767px) {
2195
- #cff-admin-about .cff-admin-about-section-first-form .cff-admin-about-section-first-form-text {
2196
- flex:none
2197
- }
2198
- }
2199
-
2200
- #cff-admin-about .cff-admin-about-section-first-form .cff-admin-about-section-first-form-video iframe {
2201
- border: 1px solid #DDDDDD
2202
- }
2203
-
2204
- @media (max-width: 767px) {
2205
- #cff-admin-about .cff-admin-about-section-first-form .cff-admin-about-section-first-form-video {
2206
- padding-top:20px
2207
- }
2208
- }
2209
-
2210
- #cff-admin-about .cff-admin-about-section-hero {
2211
- padding: 0
2212
- }
2213
-
2214
- #cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-main,#cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-extra {
2215
- padding: 30px
2216
- }
2217
-
2218
- @media (max-width: 767px) {
2219
- #cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-extra .cff-admin-column-50 {
2220
- float:none;
2221
- width: 100%
2222
- }
2223
- }
2224
-
2225
- #cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-main {
2226
- background-color: #FAFAFA;
2227
- border-bottom: 1px solid #DDDDDD
2228
- }
2229
-
2230
- #cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-main.no-border {
2231
- border-bottom: 0
2232
- }
2233
-
2234
- #cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-main p {
2235
- color: #666
2236
- }
2237
-
2238
- #cff-admin-about .cff-admin-about-section-hero h3.call-to-action {
2239
- margin-bottom: -10px
2240
- }
2241
-
2242
- #cff-admin-about .cff-admin-about-section-hero span.price-20-off {
2243
- color: #6AB255
2244
- }
2245
-
2246
- #cff-admin-about .cff-admin-about-section-squashed {
2247
- margin-bottom: 0
2248
- }
2249
-
2250
- #cff-admin-about .cff-admin-about-section-squashed:not(:last-of-type) {
2251
- border-bottom: 0
2252
- }
2253
-
2254
- #cff-admin-about .cff-admin-about-section-post h2 {
2255
- margin-bottom: -10px
2256
- }
2257
-
2258
- #cff-admin-about .cff-admin-about-section-post h3 {
2259
- margin-bottom: 15px
2260
- }
2261
-
2262
- #cff-admin-about .cff-admin-about-section-post p:last-of-type {
2263
- margin-bottom: 30px
2264
- }
2265
-
2266
- #cff-admin-about .cff-admin-about-section-post .cff-admin-column-20 {
2267
- padding-right: 20px;
2268
- width: auto
2269
- }
2270
-
2271
- #cff-admin-about .cff-admin-about-section-post .cff-admin-column-20 img {
2272
- width: 270px
2273
- }
2274
-
2275
- @media (max-width: 767px) {
2276
- #cff-admin-about .cff-admin-about-section-post .cff-admin-column-20 {
2277
- width:20%
2278
- }
2279
-
2280
- #cff-admin-about .cff-admin-about-section-post .cff-admin-column-20 img {
2281
- width: auto;
2282
- max-width: 100%
2283
- }
2284
- }
2285
-
2286
- #cff-admin-about .cff-admin-about-section-post .cff-admin-column-80 {
2287
- padding-left: 20px;
2288
- width: calc(100% - 20px - 270px)
2289
- }
2290
-
2291
- @media (max-width: 767px) {
2292
- #cff-admin-about .cff-admin-about-section-post .cff-admin-column-80 {
2293
- width:80%
2294
- }
2295
- }
2296
-
2297
- #cff-admin-about .cff-admin-about-section-post .cff-admin-about-section-post-link {
2298
- padding: 10px 15px;
2299
- background-color: #DF7739;
2300
- color: #fff;
2301
- border-radius: 3px;
2302
- text-decoration: none;
2303
- margin-top: 15px;
2304
- font-size: 14px
2305
- }
2306
-
2307
- #cff-admin-about .cff-admin-about-section-post .cff-admin-about-section-post-link:hover {
2308
- background-color: #B85A1B
2309
- }
2310
-
2311
- #cff-admin-about .cff-admin-about-section-post .cff-admin-about-section-post-link .fa {
2312
- color: #EDBA9E;
2313
- vertical-align: middle;
2314
- margin-left: 8px
2315
- }
2316
-
2317
- #cff-admin-about .cff-admin-about-section-table table {
2318
- border-collapse: collapse
2319
- }
2320
-
2321
- #cff-admin-about .cff-admin-about-section-table table tr td {
2322
- border-bottom: 1px solid #DDDDDD;
2323
- border-right: 1px solid #DDDDDD;
2324
- padding: 30px;
2325
- vertical-align: top
2326
- }
2327
-
2328
- #cff-admin-about .cff-admin-about-section-table table tr td:last-of-type {
2329
- border-right: 0
2330
- }
2331
-
2332
- #cff-admin-about .cff-admin-about-section-table table tr:last-child td {
2333
- border-bottom: none
2334
- }
2335
-
2336
- #cff-admin-about .cff-admin-about-section-table table p {
2337
- background-repeat: no-repeat;
2338
- background-size: 15px auto;
2339
- background-position: 0 6px;
2340
- margin: 0
2341
- }
2342
-
2343
- #cff-admin-about .cff-admin-about-section-table table p.features-full {
2344
- padding-left: 30px;
2345
- background-image: url(../img/about/icon-full.svg)
2346
- }
2347
-
2348
- #cff-admin-about .cff-admin-about-section-table table p.features-none {
2349
- padding-left: 30px;
2350
- background-image: url(../img/about/icon-none.svg)
2351
- }
2352
-
2353
- #cff-admin-about .cff-admin-about-section-table table p.features-partial {
2354
- padding-left: 30px;
2355
- background-position: -3px 0;
2356
- background-size: 23px auto;
2357
- background-image: url(../img/about/icon-partial.svg)
2358
- }
2359
-
2360
- #cff-admin-about .cff-admin-about-section-table .cff-admin-about-section-hero-main {
2361
- padding: 0
2362
- }
2363
-
2364
- #cff-admin-about .cff-admin-about-section-table .cff-admin-about-section-hero-main h3 {
2365
- padding: 30px 30px 30px 60px
2366
- }
2367
-
2368
- #cff-admin-about .cff-admin-about-section-table .cff-admin-about-section-hero-main .cff-admin-column-33:first-child h3 {
2369
- padding: 30px
2370
- }
2371
-
2372
- #cff-admin-about #cff-admin-addons {
2373
- padding: 0 30px
2374
- }
2375
-
2376
- #cff-admin-about #cff-admin-addons .addon-container {
2377
- padding: 0 10px
2378
- }
2379
-
2380
- #cff-admin-about #cff-admin-addons .addon-item .details {
2381
- padding: 20px
2382
- }
2383
-
2384
- #cff-admin-about #cff-admin-addons .addon-item .action-button .button {
2385
- display: inline-block;
2386
- text-decoration: none;
2387
- font-size: 13px;
2388
- line-height: 26px;
2389
- height: 28px;
2390
- margin: 0;
2391
- padding: 0 10px 1px;
2392
- cursor: pointer;
2393
- -webkit-appearance: none;
2394
- border-radius: 3px;
2395
- border: 1px solid #cccccc;
2396
- background: #f7f7f7;
2397
- box-shadow: 0 1px 0 #cccccc;
2398
- font-weight: normal
2399
- }
2400
-
2401
- #cff-admin-about #cff-admin-addons .addon-item .action-button .button:hover,#cff-admin-about #cff-admin-addons .addon-item .action-button .button:focus {
2402
- background: #fafafa;
2403
- border-color: #999;
2404
- color: #23282d
2405
- }
2406
-
2407
- #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-primary {
2408
- background: #0085ba;
2409
- border-color: #0073aa #006799 #006799;
2410
- box-shadow: 0 1px 0 #006799;
2411
- color: #fff;
2412
- text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799
2413
- }
2414
-
2415
- #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-primary:hover,#cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-primary:focus {
2416
- background: #008ec2;
2417
- border-color: #006799;
2418
- color: #fff
2419
- }
2420
-
2421
- #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-primary .fa-spinner {
2422
- color: #fff
2423
- }
2424
-
2425
- #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-secondary {
2426
- color: #555;
2427
- border-color: #cccccc;
2428
- background: #f7f7f7;
2429
- box-shadow: 0 1px 0 #cccccc
2430
- }
2431
-
2432
- #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-secondary:hover,#cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-secondary:focus {
2433
- background: #fafafa;
2434
- border-color: #999;
2435
- color: #23282d
2436
- }
2437
-
2438
- #cff-admin-about #cff-admin-addons .addon-item .action-button .button.disabled {
2439
- cursor: default
2440
- }
2441
-
2442
- /* AW columns */
2443
- .cff-admin-columns>div[class*="-column-"] {
2444
- float: left
2445
- }
2446
-
2447
- .cff-admin-columns .cff-admin-column-20 {
2448
- width: 20%
2449
- }
2450
-
2451
- .cff-admin-columns .cff-admin-column-33 {
2452
- width: 33.33333%
2453
- }
2454
-
2455
- .cff-admin-columns .cff-admin-column-40 {
2456
- width: 40%
2457
- }
2458
-
2459
- .cff-admin-columns .cff-admin-column-50 {
2460
- width: 50%
2461
- }
2462
-
2463
- .cff-admin-columns .cff-admin-column-60 {
2464
- width: 60%
2465
- }
2466
-
2467
- .cff-admin-columns .cff-admin-column-80 {
2468
- width: 80%
2469
- }
2470
-
2471
- .cff-admin-columns .cff-admin-column-last {
2472
- float: right !important
2473
- }
2474
-
2475
- .cff-admin-columns:after {
2476
- content: "";
2477
- display: table;
2478
- clear: both
2479
- }
2480
-
2481
- /* AW Addons */
2482
- #cff-admin-addons h3 {
2483
- padding: 10px 10px 0 10px;
2484
- clear: left;
2485
- }
2486
- #cff-admin-addons *,#cff-admin-addons *::before,#cff-admin-addons *::after {
2487
- -webkit-box-sizing: border-box;
2488
- -moz-box-sizing: border-box;
2489
- box-sizing: border-box
2490
- }
2491
-
2492
- #cff-admin-addons .addons-container {
2493
- margin-left: -20px;
2494
- margin-right: -20px
2495
- }
2496
-
2497
- #cff-admin-addons .unlock-msg {
2498
- padding: 0 20px;
2499
- margin-top: -20px;
2500
- clear: both
2501
- }
2502
-
2503
- #cff-admin-addons #cff-admin-addons-search {
2504
- background-color: #fff;
2505
- border: 1px solid #ddd;
2506
- border-radius: 3px;
2507
- box-shadow: none;
2508
- color: #333;
2509
- vertical-align: middle;
2510
- padding: 7px 12px;
2511
- margin: -3px 10px 0 0;
2512
- width: 200px;
2513
- min-height: 35px;
2514
- float: right
2515
- }
2516
-
2517
- #cff-admin-addons #cff-admin-addons-search:focus {
2518
- border-color: #bbb
2519
- }
2520
-
2521
- #cff-admin-addons .addon-container {
2522
- padding: 0 20px;
2523
- float: left;
2524
- width: 33.333333%;
2525
- margin-bottom: 20px
2526
- }
2527
-
2528
- @media (max-width: 1249px) {
2529
- #cff-admin-addons .addon-container {
2530
- width:50%
2531
- }
2532
- }
2533
-
2534
- @media (max-width: 767px) {
2535
- #cff-admin-addons .addon-container {
2536
- width:100%;
2537
- margin-bottom: 20px
2538
- }
2539
- }
2540
-
2541
- #cff-admin-addons h4 {
2542
- font-size: 17px;
2543
- font-weight: 700
2544
- }
2545
-
2546
- #cff-admin-addons .addon-item {
2547
- background-color: #fff;
2548
- border: 1px solid #ddd;
2549
- border-radius: 3px;
2550
- margin: 0
2551
- }
2552
-
2553
- @media (max-width: 767px) {
2554
- #cff-admin-addons .addon-item {
2555
- margin:0 0
2556
- }
2557
- }
2558
-
2559
- #cff-admin-addons .addon-item img {
2560
- border: 1px solid #eee;
2561
- float: left;
2562
- max-width: 75px
2563
- }
2564
-
2565
- #cff-admin-addons .addon-item h5 {
2566
- margin: 0 0 10px 100px;
2567
- font-size: 16px
2568
- }
2569
-
2570
- #cff-admin-addons .addon-item p {
2571
- margin: 0 0 0 100px
2572
- }
2573
-
2574
- #cff-admin-addons .addon-item .details {
2575
- padding: 30px 20px
2576
- }
2577
-
2578
- #cff-admin-addons .addon-item .actions {
2579
- background-color: #f7f7f7;
2580
- border-top: 1px solid #ddd;
2581
- padding: 20px;
2582
- position: relative
2583
- }
2584
-
2585
- #cff-admin-addons .addon-item .actions .msg {
2586
- background-color: #f7f7f7;
2587
- position: absolute;
2588
- text-align: center;
2589
- font-weight: 600;
2590
- top: 0;
2591
- left: 0;
2592
- height: 100%;
2593
- width: 100%;
2594
- z-index: 99;
2595
- padding: 20px;
2596
- display: -webkit-box;
2597
- display: -moz-box;
2598
- display: -ms-flexbox;
2599
- display: -webkit-flex;
2600
- display: flex;
2601
- -webkit-align-items: center;
2602
- -ms-align-items: center;
2603
- align-items: center;
2604
- justify-content: center
2605
- }
2606
-
2607
- #cff-admin-addons .addon-item .actions .msg.success {
2608
- color: #2a9b39
2609
- }
2610
-
2611
- #cff-admin-addons .addon-item .actions .msg.error {
2612
- color: red
2613
- }
2614
-
2615
- #cff-admin-addons .addon-item .status {
2616
- float: left;
2617
- padding-top: 8px
2618
- }
2619
-
2620
- #cff-admin-addons .addon-item .status .status-inactive {
2621
- color: red
2622
- }
2623
-
2624
- #cff-admin-addons .addon-item .status .status-download {
2625
- color: #666
2626
- }
2627
-
2628
- #cff-admin-addons .addon-item .status .status-active {
2629
- color: #2a9b39
2630
- }
2631
-
2632
- #cff-admin-addons .addon-item .upgrade-button {
2633
- text-align: center
2634
- }
2635
-
2636
- #cff-admin-addons .addon-item .upgrade-button a {
2637
- font-weight: 600;
2638
- width: 140px;
2639
- text-align: center;
2640
- padding: 8px 5px
2641
- }
2642
-
2643
- #cff-admin-addons .addon-item .action-button {
2644
- float: right
2645
- }
2646
-
2647
- #cff-admin-addons .addon-item .action-button button {
2648
- background: none;
2649
- border: 1px solid #ddd;
2650
- border-radius: 3px;
2651
- box-shadow: none;
2652
- cursor: pointer;
2653
- font-weight: 600;
2654
- width: 140px;
2655
- text-align: center;
2656
- padding: 8px 5px
2657
- }
2658
-
2659
- #cff-admin-addons .addon-item .action-button button:hover,#cff-admin-addons .addon-item .action-button button.loading {
2660
- background-color: #e9e9e9
2661
- }
2662
-
2663
- #cff-admin-addons .addon-item .action-button button .fa {
2664
- margin-right: 8px
2665
- }
2666
-
2667
- #cff-admin-addons .addon-item .action-button button .fa.fa-spinner {
2668
- margin-right: 0
2669
- }
2670
-
2671
- #cff-admin-addons .addon-item .action-button button.status-active .fa {
2672
- color: #2a9b39
2673
- }
2674
-
2675
- #cff-admin-addons .addon-item .action-button button.status-inactive .fa {
2676
- color: red
2677
- }
2678
-
2679
- #cff-admin-addons .addon-item .action-button button.status-download .fa {
2680
- color: #999
2681
- }
2682
-
2683
- #cff-admin-addons .addon-item .action-button button.disabled {
2684
- cursor: default
2685
- }
2686
-
2687
- #cff-admin-addons .addon-item .action-button button.loading .fa {
2688
- color: #666
2689
- }
2690
-
2691
- /* Tabs */
2692
- .cff-admin-tabs {
2693
- background-color: #fff;
2694
- margin: 0 0 20px 0;
2695
- padding: 0 20px;
2696
- list-style: none;
2697
- overflow: auto;
2698
- font-size: 14px
2699
- }
2700
-
2701
- .cff-admin-tabs li {
2702
- margin: 0 30px 0 0;
2703
- padding: 0;
2704
- float: left
2705
- }
2706
-
2707
- .cff-admin-tabs li:last-of-type {
2708
- margin: 0
2709
- }
2710
-
2711
- .cff-admin-tabs li a {
2712
- color: #666;
2713
- display: block;
2714
- padding: 20px 0 18px 0;
2715
- text-decoration: none;
2716
- border-bottom: 2px solid #fff;
2717
- box-shadow: none
2718
- }
2719
-
2720
- .cff-admin-tabs li a:hover {
2721
- border-color: #999
2722
- }
2723
-
2724
- .cff-admin-tabs li a.active {
2725
- border-color: #e27730
2726
- }
2727
-
2728
- .cff-admin-tabs li a:focus {
2729
- box-shadow: none
2730
- }
2731
-
2732
- /* Clear */
2733
- .cff-clear:before {
2734
- content: " ";
2735
- display: table
2736
- }
2737
-
2738
- .cff-clear:after {
2739
- clear: both;
2740
- content: " ";
2741
- display: table
2742
- }
2743
-
2744
- /* Visual header settings */
2745
- .cff-header-options{
2746
- width: auto;
2747
- max-width: 500px;
2748
- padding: 10px 15px;
2749
- margin: 10px 0;
2750
- background: #f9f9f9;
2751
- background: rgba(255,255,255,0.8);
2752
- font-size: 13px;
2753
-
2754
- -moz-border-radius: 8px;
2755
- -webkit-border-radius: 8px;
2756
- border-radius: 8px;
2757
- }
2758
-
2759
- /* Social Wall landing page */
2760
- #cff-admin.sw-landing-page{
2761
- padding: 20px 0;
2762
- }
2763
- #cff-admin .cff-sw-icons{
2764
- width: 100%;
2765
- text-align: center;
2766
- }
2767
- #cff-admin .cff-sw-icons span{
2768
- display: inline-block;
2769
- width: 32px;
2770
- margin: 0 7px;
2771
- position: relative;
2772
- top: -2px;
2773
- }
2774
- #cff-admin .cff-sw-icons .cff-sb-plus{
2775
- width: 12px;
2776
- height: 12px;
2777
- position: relative;
2778
- top: -12px;
2779
- opacity: 0.9;
2780
- }
2781
- #cff-admin.sw-landing-page h1,
2782
- #cff-admin.sw-landing-page h2{
2783
- width: 100%;
2784
- text-align: center;
2785
- }
2786
- #cff-admin.sw-landing-page h1{
2787
- font-size: 44px;
2788
- margin: 20px 0 0 0;
2789
- line-height: 1.3;
2790
- }
2791
- #cff-admin.sw-landing-page h2{
2792
- font-size: 30px;
2793
- font-weight: 100;
2794
- line-height: 1.2;
2795
- margin: 5px 0 20px 0;
2796
- }
2797
- #cff-admin .cff-sw-info{
2798
- width: 95%;
2799
- max-width: 1400px;
2800
- margin: 0 auto;
2801
- padding: 50px 10px;
2802
- clear: both;
2803
- overflow: hidden;
2804
- box-sizing: border-box;
2805
- }
2806
- #cff-admin .cff-sw-features{
2807
- float: left;
2808
- width: 40%;
2809
- margin-right: 5%;
2810
- padding: 20px 0 0 0;
2811
- }
2812
- #cff-admin .cff-sw-screenshot{
2813
- position: relative;
2814
- width: 55%;
2815
- float: left;
2816
- box-sizing: border-box;
2817
- border: 5px solid #fff;
2818
- box-shadow: 0 0 20px 0 rgba(0,0,0,0.05);
2819
- }
2820
- #cff-admin .cff-sw-features p{
2821
- margin: 35px 0;
2822
- padding: 0;
2823
- font-size: 15px;
2824
- }
2825
- #cff-admin .cff-sw-features p:first-child{
2826
- margin-top: 0;
2827
- }
2828
- #cff-admin .cff-sw-features span{
2829
- display: block;
2830
- font-size: 20px;
2831
- font-weight: bold;
2832
- }
2833
- #cff-admin.sw-landing-page .cta {
2834
- margin: 20px 0 0 5px;
2835
- padding: 8px 40px 10px 40px;
2836
- font-size: 20px;
2837
- }
2838
- #cff-admin .cff-sw-screenshot img{
2839
- width: 100%;
2840
- display: block;
2841
- }
2842
- #cff-admin .cff-sw-screenshot .cta{
2843
- position: absolute;
2844
- top: 50%;
2845
- left: 50%;
2846
- margin-top: -32px;
2847
- margin-left: -80px;
2848
- padding: 15px 30px 17px 30px;
2849
- color: #333;
2850
- text-decoration: none;
2851
- background: rgba(255,255,255,0.95);
2852
- border-radius: 3px;
2853
- /*border: 2px solid rgba(0,0,0,0.1);*/
2854
- box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
2855
- }
2856
- #cff-admin .cff-sw-screenshot:hover .cta,
2857
- #cff-admin .cff-sw-screenshot:focus .cta{
2858
- background: #e34717;
2859
- color: #fff;
2860
- box-shadow: 0;
2861
- }
2862
- #cff-admin .cff-sw-footer-cta{
2863
- width: 100%;
2864
- text-align: center;
2865
- }
2866
- #cff-admin .cff-sw-footer-cta a{
2867
- font-size: 22px;
2868
- display: inline-block;
2869
- text-decoration: none;
2870
- line-height: 25px;
2871
- font-weight: normal;
2872
- padding: 10px 0 30px 0;
2873
- }
2874
- #cff-admin .cff-sw-footer-cta span{
2875
- width: 30px;
2876
- height: 30px;
2877
- display: inline-block;
2878
- margin: 0 10px 0 0;
2879
- position: relative;
2880
- top: 4px;
2881
- }
2882
- #cff-admin .cff-sw-footer-cta span .emoji{
2883
- width: 30px !important;
2884
- height: 30px !important;
2885
- }
2886
-
2887
- @media all and (max-width: 1500px){
2888
- #cff-admin .cff-sw-screenshot{
2889
- width: 55%;
2890
- float: left;
2891
- height: 500px;
2892
- background: url('../admin/assets/img/sw-screenshot.png') no-repeat center center;
2893
- background-size: cover;
2894
- }
2895
- #cff-admin .cff-sw-screenshot img{
2896
- display: none;
2897
- }
2898
- }
2899
- @media all and (max-width: 900px){
2900
- #cff-admin .cff-sw-info{
2901
- padding: 20px 0;
2902
- }
2903
- #cff-admin .cff-sw-features{
2904
- width: 100%;
2905
- padding: 10px 0;
2906
- margin: 0;
2907
- }
2908
- #cff-admin .cff-sw-screenshot{
2909
- width: 100%;
2910
- padding: 0;
2911
- height: auto;
2912
- background: none;
2913
- }
2914
- #cff-admin .cff-sw-screenshot img{
2915
- display: block;
2916
- }
2917
- #cff-admin .cff-sw-features .cta {
2918
- width: 100%;
2919
- box-sizing: border-box;
2920
- text-align: center;
2921
- margin: 20px 0;
2922
- }
2923
- }
2924
-
2925
- /* Alert bubble */
2926
- #cff-admin .nav-tab{
2927
- position: relative;
2928
- }
2929
- #cff-admin .cff-alert-bubble{
2930
- position: absolute;
2931
- top: -9px;
2932
- right: -10px;
2933
-
2934
- display: inline-block;
2935
- vertical-align: top;
2936
- box-sizing: border-box;
2937
- margin: 0;
2938
- padding: 0 7px;
2939
- height: 18px;
2940
-
2941
- border-radius: 9px;
2942
- background-color: #ca4a1f;
2943
- color: #fff;
2944
- font-size: 11px;
2945
- line-height: 1.6;
2946
- text-align: center;
2947
- z-index: 26;
2948
- }
2949
-
2950
- /* Menu Pro link */
2951
- #adminmenu .wp-submenu .cff_get_pro_highlight{
2952
- color: #f37036;
2953
- font-weight: 600;
2954
- /*background: rgba(0,0,0,0.5);*/
2955
- }
2956
- #adminmenu .wp-submenu .cff_get_pro_highlight:hover,
2957
- #adminmenu .wp-submenu .cff_get_pro_highlight:active{
2958
- color: #f37036;
2959
- /*background: rgba(0,0,0,0.65);*/
2960
- }
2961
-
2962
- /* Install another plugin modal */
2963
- .sb_cross_install_modal {
2964
- position: fixed;
2965
- z-index: 999;
2966
- width: 100%;
2967
- top: 0;
2968
- right: 0;
2969
- bottom: 0;
2970
- left: 0;
2971
- background: rgba(0, 0, 0, 0.3);
2972
- }
2973
- .sb_cross_install_inner {
2974
- position: absolute;
2975
- top: 140px;
2976
- left: 50%;
2977
- width: 480px;
2978
- margin: 0 0 0 -245px;
2979
- padding: 35px;
2980
- background: #fff;
2981
- text-align: left;
2982
-
2983
- -webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.2);
2984
- box-shadow: 0 1px 20px rgba(0, 0, 0, 0.2);
2985
-
2986
- -moz-border-radius: 3px;
2987
- -webkit-border-radius: 3px;
2988
- border-radius: 3px;
2989
- }
2990
- .sb_cross_install_modal #cff-admin-about #cff-admin-addons .addon-container,
2991
- .sb_cross_install_modal #cff-admin-about #cff-admin-addons .addons-container{
2992
- width: 100%;
2993
- margin: 0;
2994
- padding: 0;
2995
- min-height: 198px;
2996
- }
2997
- .sb_cross_install_modal #cff-admin-addons .addon-item .action-button button{
2998
- background: #007cba;
2999
- border: 0;
3000
- }
3001
- .sb_cross_install_modal #cff-admin-addons .addon-item .action-button button:hover{
3002
- background: #0071a1;
3003
- }
3004
- .sb_cross_install_modal #cff-admin-about #cff-admin-addons{
3005
- padding: 0;
3006
- }
3007
- /* More social feeds page */
3008
- #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-primary .fa-spinner {
3009
- color: #333;
3010
- }
3011
- #cff-admin .cff_more_plugins h2{
3012
- margin-top: 15px;
3013
- }
3014
- #cff-admin .cff_more_plugins #cff-admin-addons .addons-container{
3015
- overflow: hidden;
3016
- margin: 0;
3017
- }
3018
- #cff-admin .cff_more_plugins#cff-admin-about #cff-admin-addons{
3019
- padding: 20px 0;
3020
- }
3021
- #cff-admin .cff-more-plugins-intro span{
3022
- color: #e34f0e;
3023
- }
3024
- #cff-admin .cff_more_plugins h3{
3025
- padding: 15px 0 0 0;
3026
- }
3027
- .sb_cross_install_modal .cff-loader{
3028
- position: absolute;
3029
- left: 50%;
3030
- top: 50%;
3031
- margin: -10px 0 0 -10px;
3032
- }
3033
-
3034
- /* oEmbeds */
3035
- #cff-admin.cff-oembeds #header{
3036
- border-bottom: 1px solid #ccc;
3037
- padding-bottom: 15px;
3038
- margin-bottom: 25px;
3039
- }
3040
- #cff-admin.cff-oembeds .cff_admin_btn{
3041
- margin-top: 10px;
3042
- }
3043
- #cff-admin.cff-oembeds .cff-success{
3044
- display: inline-block;
3045
- clear: both;
3046
- padding: 20px 30px;
3047
- border-radius: 3px;
3048
- }
3049
- #cff-admin.cff-oembeds .cff-success a{
3050
- margin-left: 5px;
3051
- color: #e34f0e;
3052
- }
3053
- #cff-admin .cff-oembed-promo{
3054
- margin: 30px 0 0 0;
3055
- padding: 30px;
3056
- border: 1px solid #ccc;
3057
- border-radius: 3px;
3058
- background: rgba(255,255,255,0.5);
3059
- }
3060
- #cff-admin .cff-oembed-promo h2{
3061
- padding: 0 0 20px 0;
3062
- margin: 0;
3063
- font-size: 18px;
3064
- line-height: 1.5;
3065
- }
3066
- #cff-admin .cff-oembed-promo .cff-reasons div{
3067
- display: inline-block;
3068
- margin-right: 15px;
3069
- }
3070
- #cff-admin .cff-oembed-promo .cff-reasons span{
3071
- font-size: 15px;
3072
- }
3073
- #cff-admin .cff-oembed-promo svg{
3074
- position: relative;
3075
- top: 3px;
3076
- margin: 0 8px 0 0;
3077
- width: 16px;
3078
- height: 16px;
3079
- }
3080
- #cff-admin .cff-oembed-promo .button{
3081
- margin-top: 12px;
3082
- font-size: 16px;
3083
- padding: 5px 20px;
3084
- height: auto;
3085
- }
3086
- #cff-admin .cff-oembed-promo p span{
3087
- display: inline-block;
3088
- padding-right: 10px;
3089
- }
3090
- #cff-admin .cff-oembed-promo .fa-check{
3091
- width: 14px;
3092
- height: 14px;
3093
- margin-right: 5px;
3094
- top: 2px;
3095
- }
3096
- #cff-admin .cff-oembed-promo .fa-check path{
3097
- fill: #3fa03f;
3098
- }
3099
- #cff-admin .cff-oembed-desc{
3100
- clear: both;
3101
- overflow: hidden;
3102
- max-width: 900px;
3103
- }
3104
- #cff-admin .cff-oembed-desc p{
3105
- padding: 0 0 10px 0;
3106
- margin: 0;
3107
- }
3108
- #cff-admin .cff-oembed-desc .cff-col{
3109
- width: 45%;
3110
- margin-right: 4%;
3111
- float: left;
3112
- }
3113
- #cff-admin .cff-oembed-desc img{
3114
- width: 51%;
3115
- max-width: 457px;
3116
- float: left;
3117
- }
3118
-
3119
- #cff-admin .cff-cols-4{
3120
- max-width: 1100px;
3121
- padding-top: 20px;
3122
- }
3123
- #cff-admin .cff-cols-4 .addon-container{
3124
- width: 50%;
3125
- }
3126
- @media all and (max-width: 780px){
3127
- #cff-admin .cff-cols-4 .addon-container{
3128
- width: 100%;
3129
- }
3130
- }
3131
-
3132
- /* GDPR Settings */
3133
- #cff-admin .cff-list{
3134
- list-style: inside disc;
3135
- }
3136
- #cff-admin .cff-box{
3137
- float: left;
3138
- clear: both;
3139
- width: 96%;
3140
- max-width: 900px;
3141
-
3142
- padding: 10px 15px;
3143
- margin: 10px 0;
3144
- font-size: 13px;
3145
- background: #f9f9f9;
3146
- background: rgba(255,255,255,0.8);
3147
-
3148
- -moz-border-radius: 8px;
3149
- -webkit-border-radius: 8px;
3150
- border-radius: 8px;
3151
- }
3152
- .gdpr_tooltip p{
3153
- padding: 0 0 10px 0;
3154
- }
3155
- .gdpr_tooltip span{
3156
- display: inline-block;
3157
- margin: 0;
3158
- font-weight: bold;
3159
- font-size: 14px;
3160
- }
3161
- .gdpr_tooltip .cff-list{
3162
- padding: 0 0 10px 0;
3163
- }
3164
- .gdpr_tooltip li{
3165
- padding: 0;
3166
- }
3167
- .cff_gdpr_plugin_active .cff_active{
3168
- display: inline-block;
3169
- padding: 10px 20px 15px 20px;
3170
- border-radius: 5px;
3171
- background: #edf4f0;
3172
- border: 1px solid #2c8649;
3173
- color: #2c8649;
3174
- margin: 8px 0 0 0;
3175
- }
3176
- .cff_gdpr_plugin_active svg{
3177
- width: 16px;
3178
- height: 16px;
3179
- position: relative;
3180
- top: 3px;
3181
- margin-right: 2px;
3182
- }
3183
- .cff_gdpr_plugin_active path{
3184
- fill: green;
3185
- }
3186
- .cff_gdpr_list,
3187
- .cff_gdpr_yes,
3188
- .cff_gdpr_no{
3189
- display: none;
3190
- }
3191
- #cff-admin .cff_gdpr_error{
3192
- padding: 10px 20px 15px 20px;
3193
- border-radius: 5px;
3194
- background: #F7E6E6;
3195
- border: 1px solid #BA7B7B;
3196
- color: #592626;
3197
- }
3198
- .cff_feeds_account_ctn{width: 100%; float: left;}
3199
- .cff_feeds_account_ctn #cff_export_accounts{float: right;}
3200
- /* Locator Summary */
3201
- .cff-feed-locator-summary-wrap {
3202
- max-width: 1100px;
3203
- margin-bottom: 40px;
3204
- }
3205
- .cff-full-wrap {
3206
- display: none;
3207
- }
3208
- .cff-locator-more {
3209
- display: inline-block;
3210
- margin: 0 0 0 1px;
3211
- padding: 0 5px;
3212
- border: 1px solid rgba(0,0,0,0.1);
3213
- border-radius: 3px;
3214
- line-height: 1.6;
3215
- }
3216
-
3217
- .cff_shortcode_visible .cff_locations_link {
3218
- display: none;
3219
- }
3220
- .cff_locations_link{
3221
- float: left;
3222
- }
3223
- .cff_locations_link a {
3224
- font-weight: normal;
3225
- text-decoration: none;
3226
- }
3227
- .cff_locations_link svg {
3228
- width: 11px;
3229
- position: relative;
3230
- top: 1px;
3231
- }
3232
- #adminmenu a[href="admin.php?page=cff-support"],
3233
- #adminmenu a[href="admin.php?page=cff-top"] {
3234
- display: none;
3235
- }
3236
-
3237
- /*** CFF Header Notice ***/
3238
- .cff-header-notice {
3239
- background-color: #DDDDDD;
3240
- text-align: center;
3241
- position: relative;
3242
- padding: 7px;
3243
- margin-bottom: 0;
3244
- opacity: 1;
3245
- transition: all .3s ease-in-out;
3246
- max-height: 100px;
3247
- overflow: hidden;
3248
- background: #0068A0;
3249
- }
3250
- .cff-header-notice span {
3251
- font-size: 14px;
3252
- line-height: 160%;
3253
- font-weight: 300;
3254
- color: #fff !important;
3255
- font-weight: 400;
3256
- }
3257
- .cff-header-notice a {
3258
- text-decoration: underline;
3259
- font-weight: bold;
3260
- color: #fff;
3261
- }
3262
- .cff-header-notice .cff-dismiss {
3263
- position: absolute;
3264
- top: 1px;
3265
- right: 50px;
3266
- border: none;
3267
- padding: 5px;
3268
- margin-top: 1px;
3269
- background: 0 0;
3270
- color: #72777c;
3271
- cursor: pointer;
3272
- }
3273
-
3274
- .cff-header-notice {
3275
- padding: 6px;
3276
- }
3277
-
3278
- @media (max-width: 769px) {
3279
- .cff-header-notice .cff-dismiss {
3280
- right: 10px;
3281
- }
3282
- .cff-header-notice {
3283
- padding: 7px 45px 7px 15px;
3284
- }
3285
- }
3286
-
3287
-
3288
- /*** CFF Admin Notices ***/
3289
- .cff-admin-notices {
3290
- padding: 16px 60px 20px 60px;
3291
- background: #FFFFFF;
3292
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
3293
- position: relative;
3294
- box-sizing: border-box;
3295
- }
3296
- .cff-admin-notices:not(:last-child) {
3297
- margin-bottom: 15px;
3298
- }
3299
- .sb-customizer-preview .cff-admin-notices:not(:last-child) {
3300
- margin-bottom: 0px;
3301
- }
3302
- .cff-admin-notices.cff-license-expired-notice {
3303
- border-top: 2px solid #D72C2C;
3304
- }
3305
- .cff-admin-notices.cff-license-renewed-notice {
3306
- border-top: 2px solid #59AB46;
3307
- }
3308
- .cff-admin-notices .sb-notice-title,
3309
- #cff-builder-app .cff-admin-notices .sb-notice-title,
3310
- #cff-settings .cff-admin-notices .sb-notice-title {
3311
- font-weight: 600;
3312
- font-size: 18px;
3313
- line-height: 25px;
3314
- margin: 0px;
3315
- letter-spacing: 0;
3316
- }
3317
- .cff-admin-notices.cff-license-expired-notice h3{
3318
- color: #D72C2C;
3319
- }
3320
- .cff-admin-notices p {
3321
- font-size: 14px;
3322
- line-height: 22px;
3323
- color: #434960;
3324
- margin: 0;
3325
- }
3326
- .cff-admin-notices .sb-notice-icon {
3327
- position: absolute;
3328
- left: 22px;
3329
- top: 18px;
3330
- }
3331
- .cff-admin-notices #sb-dismiss-notice {
3332
- position: absolute;
3333
- top: 7px;
3334
- right: 7px;
3335
- background: none;
3336
- border: none;
3337
- padding: 5px;
3338
- cursor: pointer;
3339
- }
3340
- .cff-admin-notices #sb-dismiss-notice svg {
3341
- width: 14px;
3342
- height: 13px;
3343
- }
3344
- .cff-admin-notices #sb-dismiss-notice path{
3345
- fill: #8C8F9A;
3346
- }
3347
- .cff-admin-notices .license-action-btns {
3348
- margin-top: 16px;
3349
- display: flex;
3350
- }
3351
- .cff-admin-notices .license-action-btns .cff-notice-btn {
3352
- text-decoration: none;
3353
- }
3354
- .cff-admin-notices .license-action-btns .cff-notice-btn:not(:last-child) {
3355
- margin-right: 8px;
3356
- }
3357
- .cff-admin-notices .license-action-btns .cff-notice-btn {
3358
- font-size: 12px;
3359
- line-height: 160%;
3360
- padding: 6px 12px;
3361
- }
3362
- .cff-admin-notices .license-action-btns .cff-notice-btn .spinner-icon {
3363
- display: none;
3364
- }
3365
- .cff-admin-notices .license-action-btns .cff-notice-btn svg {
3366
- margin-right: 4px;
3367
- transform: translate(0px, 2px);
3368
- }
3369
- .cff-admin-notices .license-action-btns .cff-notice-btn:active,
3370
- .cff-admin-notices .license-action-btns .cff-notice-btn:focus {
3371
- outline: none;
3372
- box-shadow: none;
3373
- }
3374
- .cff-admin-notices .license-action-btns .cff-btn.cff-btn-blue {
3375
- border: 1px solid #0068A0;
3376
- }
3377
- .cff-admin-notices .license-action-btns .cff-btn.cff-btn-blue:hover {
3378
- border: 1px solid #0096CC;
3379
- }
3380
- .cff-admin-notices .license-action-btns .cff-btn.cff-btn-blue:active,
3381
- .cff-admin-notices .license-action-btns .cff-btn.cff-btn-blue:focus {
3382
- border: 1px solid #004D77;
3383
- }
3384
-
3385
- .cff-critical-error-notice {
3386
- border-top: 2px solid #D72C2C;
3387
- }
3388
- .cff-critical-error-notice .sb-notice-title {
3389
- color: #D72C2C;
3390
- }
3391
- .cff-critical-error-notice .button-primary {
3392
- box-sizing: border-box;
3393
- border-radius: 2px;
3394
- display: inline-block;
3395
- padding: 6px 12px;
3396
- color: #141B38;
3397
- font-weight: 600;
3398
- padding: 6px 12px;
3399
- font-size: 12px;
3400
- line-height: 19px;
3401
- cursor: pointer;
3402
- transition: all 0.15s ease-in-out;
3403
- text-decoration: none;
3404
- border: 1px solid #0068A0;
3405
- margin-right: 8px;
3406
- min-height: auto;
3407
- }
3408
-
3409
- .cff-critical-error-notice .button-primary {
3410
- background: #0068A0!important;
3411
- color: #fff!important;
3412
- }
3413
- .cff-critical-error-notice .button-primary:hover{
3414
- background: #0096CC!important;
3415
- border: 1px solid #0096CC;
3416
- color: #fff!important;
3417
- }
3418
- .cff-critical-error-notice .button-primary:focus,
3419
- .cff-critical-error-notice .button-primary:active{
3420
- background: #004D77!important;
3421
- color: #004D77!important;
3422
- border: 1px solid #0096CC;
3423
- }
3424
-
3425
- #cff-settings .cff-admin-notices.cff-critical-error-notice .sb-notice-title {
3426
- margin-bottom: 10px;
3427
- }
3428
-
3429
- @media (max-width: 580px) {
3430
- .cff-admin-notices {
3431
- padding: 16px 20px 20px 60px;
3432
- }
3433
- }
3434
-
3435
- .sb-fs-boss {
3436
- position: fixed;
3437
- height: 100vh;
3438
- width: 100%;
3439
- left: 0;
3440
- top: 0;
3441
- bottom: 0;
3442
- right: 0;
3443
- background: rgba(0,0,0,.4);
3444
- z-index: 9989;
3445
- }
3446
- .cff-fb-center-boss {
3447
- display: flex;
3448
- justify-content: center;
3449
- align-items: center;
3450
- }
3451
- .cff-fb-popup-inside {
3452
- left: 80px;
3453
- width: 880px;
3454
- max-width: calc(100% - 200px);
3455
- background: #fff;
3456
- color: #141B38;
3457
- position: relative;
3458
- box-shadow: 0px 26.7377px 77.2886px rgb(0 0 0 / 11%), 0px 14.2952px 41.3222px rgb(0 0 0 / 9%), 0px 8.01379px 23.1649px rgb(0 0 0 / 8%), 0px 4.25607px 12.3027px rgb(0 0 0 / 6%), 0px 1.77104px 5.11942px rgb(0 0 0 / 4%);
3459
- border-radius: 2px;
3460
- overflow-y: auto;
3461
- max-height: 80vh;
3462
- }
3463
- .cff-fb-popup-inside[data-step="redirect_1"]{
3464
- width: 575px;
3465
- height: 320px;
3466
- display: flex;
3467
- justify-content: center;
3468
- align-items: center;
3469
- }
3470
- .cff-install-plugin-modal {
3471
- max-width: 580px;
3472
- }
3473
- .cff-fb-popup-cls {
3474
- height: 14px;
3475
- width: 14px;
3476
- position: absolute;
3477
- cursor: pointer;
3478
- right: 17px;
3479
- top: 17px;
3480
- z-index: 3;
3481
- }
3482
- .cff-install-plugin-body .cff-install-plugin-header {
3483
- height: 106px;
3484
- background: #F3F4F5;
3485
- padding: 20px;
3486
- display: flex;
3487
- box-sizing: border-box;
3488
- flex-wrap: wrap;
3489
- align-items: center;
3490
- }
3491
- .cff-install-plugin-body .cff-install-plugin-content {
3492
- padding: 20px 20px 32px 107px;
3493
- }
3494
- .cff-install-plugin-body .cff-install-plugin-header .sb-plugin-image {
3495
- background-color: #fff;
3496
- box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
3497
- border-radius: 2px;
3498
- padding: 15px;
3499
- max-height: 66px;
3500
- box-sizing: border-box;
3501
- margin-right: 24px;
3502
- }
3503
- .cff-install-plugin-body .cff-install-plugin-header h3 {
3504
- font-size: 18px !important;
3505
- line-height: 25px !important;
3506
- display: flex;
3507
- align-items: center;
3508
- margin: 0 0 4px 0;
3509
- font-style: normal;
3510
- font-weight: 600;
3511
- }
3512
- .cff-install-plugin-body .cff-install-plugin-header h3 span {
3513
- color: #fff;
3514
- background: #59AB46;
3515
- border-radius: 2px;
3516
- font-size: 10px;
3517
- line-height: 16px;
3518
- letter-spacing: 0.08em;
3519
- text-transform: uppercase;
3520
- padding: 0px 6px;
3521
- margin-left: 10px;
3522
- }
3523
- .cff-install-plugin-body .cff-install-plugin-header p {
3524
- display: flex;
3525
- font-size: 12px;
3526
- line-height: 18px;
3527
- color: #434960;
3528
- margin: 5px 0 0 0;
3529
- }
3530
- .cff-install-plugin-body .cff-install-plugin-header p .sb-author-logo {
3531
- margin-right: 8px;
3532
- }
3533
- .cff-install-plugin-body .cff-install-plugin-content p {
3534
- margin: 0px;
3535
- font-size: 14px;
3536
- line-height: 22px;
3537
- color: #434960;
3538
- padding-right: 20px;
3539
- }
3540
- .cff-install-plugin-body .cff-install-plugin-content .cff-install-plugin-btn {
3541
- display: flex;
3542
- align-items: center;
3543
- justify-content: center;
3544
- height: 38px;
3545
- padding: 8px 20px;
3546
- box-sizing: border-box;
3547
- transition: all .15s ease-in-out;
3548
- border-radius: 2px;
3549
- width: 100%;
3550
- margin-top: 28px;
3551
- border: none;
3552
- font-size: 14px;
3553
- font-weight: 600;
3554
- line-height: 160%;
3555
- cursor: pointer;
3556
- }
3557
- .cff-btn-orange {
3558
- background: #E34F0E!important;
3559
- color: #fff!important;
3560
- }
3561
- .cff-btn-orange:hover {
3562
- background: #F37036!important;
3563
- color: #fff!important;
3564
- }
3565
- .cff-btn-orange:focus, .cff-btn-orange:active {
3566
- background: #B8400B!important;
3567
- color: #fff!important;
3568
- }
3569
- .cff-btn-blue{
3570
- background: #0068A0!important;
3571
- color: #fff!important;
3572
- }
3573
- .cff-btn-blue:hover{
3574
- background: #0096CC!important;
3575
- color: #fff!important;
3576
- }
3577
- .cff-btn-blue:focus,
3578
- .cff-btn-blue:active{
3579
- background: #004D77!important;
3580
- color: #fff!important;
3581
- }
3582
- .cff-install-plugin-btn:disabled {
3583
- color: #8C8F9A !important;
3584
- background: #E8E8EB !important;
3585
- cursor: not-allowed;
3586
- }
3587
- .cff-install-plugin-btn .cff-btn-spinner {
3588
- height: 20px;
3589
- margin-right: 8px;
3590
- }
3591
-
3592
- .cff-notice-alert {
3593
- display: inline-block;
3594
- position: absolute;
3595
- vertical-align: top;
3596
- box-sizing: border-box;
3597
- margin: 1px 0 0 4px;
3598
- padding: 0 5px;
3599
- min-width: 18px;
3600
- height: 18px;
3601
- border-radius: 9px;
3602
- background-color: #d63638;
3603
- color: #fff;
3604
- font-size: 11px;
3605
- line-height: 1.6;
3606
- text-align: center;
3607
- z-index: 26;
3608
- }
1
+ /*** Global CSS Button Classes ***/
2
+
3
+ /*btn*/
4
+ .cff-notice-btn {
5
+ box-sizing: border-box;
6
+ border-radius: 2px;
7
+ display: inline-block;
8
+ padding: 6px 12px;
9
+ color: #141B38;
10
+ font-weight: 600;
11
+ padding: 6px 12px;
12
+ font-size: 12px;
13
+ line-height: 19px;
14
+ cursor: pointer;
15
+ transition: all 0.15s ease-in-out;
16
+ text-decoration: none;
17
+ }
18
+
19
+ /*grey*/
20
+ .cff-btn-grey{
21
+ background: #F3F4F5!important;
22
+ color: #141B38!important;
23
+ border: 1px solid #D0D1D7!important;
24
+ }
25
+ .cff-btn-grey:hover{
26
+ background: #fff!important;
27
+ color: #141B38!important;
28
+ border: 1px solid #DCDDE1!important;
29
+ }
30
+ .cff-btn-grey:focus,
31
+ .cff-btn-grey:active{
32
+ background: #E8E8EB!important;
33
+ color: #141B38!important;
34
+ border: 1px solid #D0D1D7!important;
35
+ }
36
+
37
+ /* blue buttons */
38
+ .cff-btn-blue{
39
+ background: #0068A0!important;
40
+ color: #fff!important;
41
+ }
42
+ .cff-btn-blue:hover{
43
+ background: #0096CC!important;
44
+ color: #fff!important;
45
+ }
46
+ .cff-btn-blue:focus,
47
+ .cff-btn-blue:active{
48
+ background: #004D77!important;
49
+ color: #fff!important;
50
+ }
51
+
52
+ #cff-admin{
53
+ overflow: hidden;
54
+ }
55
+ #cff-admin th.bump-left,
56
+ #cff-admin a.bump-left{
57
+ padding-left: 10px;
58
+ }
59
+ #cff-admin .cff-tooltip{
60
+ display: none;
61
+ padding: 10px 0;
62
+ font-weight: normal;
63
+ }
64
+ #cff-admin .cff-tooltip ul{
65
+ margin-top: 0;
66
+ margin-bottom: 0;
67
+ }
68
+ #cff-admin .cff-tooltip li{
69
+ padding: 4px 0;
70
+ }
71
+ #cff-admin .cff-highlight{
72
+ background: #ffed51;
73
+ font-weight: bold;
74
+ color: black;
75
+ }
76
+ #cff-admin .cff-tooltip-link,
77
+ #cff-admin .cff-external-link{
78
+ font-size: 13px;
79
+ margin-left: 10px;
80
+ }
81
+ #cff-admin .cff-more-info{
82
+ padding: 10px 15px;
83
+ margin: 10px 0;
84
+ font-size: 13px;
85
+ background: #f9f9f9;
86
+ background: rgba(255,255,255,0.8);
87
+
88
+ -moz-border-radius: 8px;
89
+ -webkit-border-radius: 8px;
90
+ border-radius: 8px;
91
+ }
92
+ #cff-admin .postbox .cff-more-info{
93
+ background: #eee;
94
+ background: rgba(0,0,0,0.05);
95
+ }
96
+ #cff-admin .cff-more-info p{
97
+ font-size: 13px;
98
+ }
99
+ #cff-admin hr{
100
+ border: none;
101
+ margin: 25px 0;
102
+ border-bottom: 1px solid #ccc;
103
+ }
104
+ #cff-admin select{
105
+ width: 150px;
106
+ }
107
+ #wpbody-content #cff-admin .metabox-holder {
108
+ padding-top: 0;
109
+ }
110
+ #cff-admin .cff-notice{
111
+ margin-top: 5px;
112
+ background: #f9ecda;
113
+ padding: 5px 10px;
114
+ border: 1px solid #e89a2e;
115
+ color: #cf6100;
116
+
117
+ -moz-border-radius: 3px;
118
+ -webkit-border-radius: 3px;
119
+ border-radius: 3px;
120
+ }
121
+ #cff-admin .cff-notice a{
122
+ color: #d85600;
123
+ }
124
+ #cff-admin .cff-notice a:hover,
125
+ #cff-admin .cff-notice a:focus{
126
+ color: #a34100;
127
+ }
128
+ #cff-admin .cff-warning {
129
+ position: relative;
130
+ display: inline-block;
131
+ border: 1px solid #ccc;
132
+ font-size: 12px;
133
+ padding: 4px 4px 4px 8px;
134
+ vertical-align: top;
135
+ margin: 4px 5px 0 0;
136
+ border-radius: 4px;
137
+
138
+ background: #fdf4e5;
139
+ border: 1px solid #e6bc88;
140
+ color: #94570c;
141
+ }
142
+ #cff-admin .cff-profile-error,
143
+ #cff-admin .cff-group-error{
144
+ display: none;
145
+
146
+ margin-top: 5px;
147
+ background: #F7E6E6;
148
+ padding: 5px 10px;
149
+ border: 1px solid #BA7B7B;
150
+ color: #592626;
151
+
152
+ -moz-border-radius: 3px;
153
+ -webkit-border-radius: 3px;
154
+ border-radius: 3px;
155
+ }
156
+ #cff-admin .cff-oembed-button .cff-profile-error,
157
+ #cff-admin .cff-oembed-button .cff-warning{
158
+ clear: both;
159
+ padding: 20px 30px;
160
+ border-radius: 3px;
161
+ }
162
+ #cff-admin .cff-profile-error p{
163
+ font-size: 13px;
164
+ }
165
+ #cff-admin .cff-notice p{
166
+ margin: 0;
167
+ padding: 5px 0;
168
+ }
169
+ #cff-admin .cff-tooltip-table label{
170
+ display: block;
171
+ float: left;
172
+ width: 60px;
173
+ margin-top: 5px;
174
+ }
175
+ #cff-admin .hndle{
176
+ font-size: 16px;
177
+ }
178
+ #cff-admin #cff-header-icon-example{
179
+ font-size: 28px;
180
+ top: 6px;
181
+ margin-left: 5px;
182
+ position: relative;
183
+ }
184
+ #cff-admin #cff-api-test-result{
185
+ width: 50%;
186
+ clear: both;
187
+ margin: 10px 0 0 0;
188
+ position: relative;
189
+ }
190
+ #cff-admin #cff-api-test-result textarea{
191
+ width: 100%;
192
+ height: 250px;
193
+ display: none;
194
+ }
195
+ #cff-admin .cff-error{
196
+ background: #F7E6E6;
197
+ border: 1px solid #BA7B7B;
198
+ color: #592626;
199
+ }
200
+ #cff-admin .cff-success{
201
+ background: #dceada;
202
+ border: 1px solid #6ca365;
203
+ color: #3e5f1c;
204
+ }
205
+ /* Loader */
206
+ #cff-admin .cff-loader{
207
+ display: none;
208
+ position: absolute;
209
+ top: 50%;
210
+ left: 50%;
211
+ width: 16px;
212
+ height: 16px;
213
+ margin-top: -8px;
214
+ margin-left: -8px;
215
+
216
+ background: url('../img/loader-light.gif') no-repeat;
217
+ }
218
+
219
+ #cff-admin #cff-others-only{
220
+ margin-top: 8px;
221
+ display: none;
222
+ }
223
+
224
+ #cff-admin .cff-definition{
225
+ display: inline;
226
+ margin-left: 20px;
227
+ }
228
+
229
+ /* Top global notice */
230
+ .cff-admin-top-notice{
231
+ clear: both;
232
+ width: 96%;
233
+ margin: 10px 0 20px 0;
234
+ background: #F7E6E6;
235
+ padding: 15px 1.5%;
236
+ border: 1px solid #BA7B7B;
237
+ color: #592626;
238
+
239
+ -moz-border-radius: 3px;
240
+ -webkit-border-radius: 3px;
241
+ border-radius: 3px;
242
+ }
243
+ .cff-admin-top-notice p{
244
+ padding: 0;
245
+ margin: 0 5px 0 0;
246
+ }
247
+ .cff-admin-notice-close{
248
+ float: right;
249
+ color: #dd3d36;
250
+ text-decoration: none;
251
+ margin: -15px 0 0 0;
252
+ padding: 10px 0 10px 10px;
253
+ }
254
+ .cff-admin-notice-close:hover,
255
+ .cff-admin-notice-close:focus{
256
+ color: #333;
257
+ }
258
+
259
+ /* Translation table */
260
+ #cff-admin .cff-translate-table input{
261
+ width: 100%;
262
+ }
263
+ #cff-admin .cff-translate-table .cff-translate-date input{
264
+ width: 74%;
265
+ }
266
+ #cff-admin .cff-translate-table.form-table th,
267
+ #cff-admin .cff-translate-table.form-table td{
268
+ border: 1px solid #ddd;
269
+ padding: 8px 10px;
270
+ vertical-align: top;
271
+ }
272
+ #cff-admin .cff-translate-table.form-table thead th{
273
+ background: #333;
274
+ border: 1px solid #333;
275
+ border-right: 1px solid #999;
276
+ color: #fff;
277
+ }
278
+ #cff-admin .cff-translate-date label{
279
+ width: 25%;
280
+ float: left;
281
+ padding-top: 5px;
282
+ }
283
+ #cff-admin .cff-translate-table .cff-table-header{
284
+ background: #ddd;
285
+ }
286
+ #cff-admin .cff-translate-table.form-table .cff-context{
287
+ font-size: 13px;
288
+ }
289
+
290
+ /* Events only */
291
+ #cff-admin .cff-events-only-options .cff-row,
292
+ #cff-admin .cff-albums-only-options .cff-row{
293
+ padding: 10px 0;
294
+ }
295
+
296
+ /* Post Types options */
297
+ #cff-admin .cff-post-type-options th,
298
+ #cff-admin .cff-post-type-options td{
299
+ padding: 5px 10px;
300
+ }
301
+ #cff-admin .cff-post-type-options th{
302
+ width: 150px;
303
+ padding-top: 10px;
304
+ }
305
+ #cff-admin .cff-post-type-options .cff-tooltip{
306
+ background: rgba(0,0,0,0.05);
307
+ }
308
+
309
+
310
+ /* Post Layouts */
311
+ #cff-admin .cff-layouts{
312
+ width: 100%;
313
+ clear: both;
314
+ overflow: hidden;
315
+ }
316
+ #cff-admin .cff-layout{
317
+ padding: 0;
318
+ float: left;
319
+ width: 222px;
320
+ padding: 15px 15px 10px 15px;
321
+ margin-right: 15px;
322
+
323
+ background: #f6f6f6;
324
+ border: 1px solid #ddd;
325
+
326
+ -moz-border-radius: 5px;
327
+ -webkit-border-radius: 5px;
328
+ border-radius: 5px;
329
+ }
330
+ @media all and (max-width: 1040px){
331
+ #cff-admin .cff-layout{
332
+ width: 29%;
333
+ padding: 1%;
334
+ margin-right: 1%;
335
+ }
336
+ }
337
+
338
+ #cff-admin .cff-layout:hover,
339
+ #cff-admin .cff-layout:focus{
340
+ background: #fcfcfc;
341
+ cursor: pointer;
342
+ }
343
+ #cff-admin .cff-layout.cff-layout-selected{
344
+ background: #f7faf1;
345
+ border: 1px solid #7ad03a;
346
+ }
347
+ #cff-admin .cff-layout h3{
348
+ font-size: 15px;
349
+ margin-top: 0;
350
+ }
351
+ #cff-admin .cff-layout img{
352
+ width: 100%;
353
+ border: 1px solid #ddd;
354
+ }
355
+
356
+ /* Post style selection */
357
+ #cff-admin .cff-post-style{
358
+ width: 184px;
359
+ background: none;
360
+ border: 1px solid transparent;
361
+ }
362
+ #cff-admin .cff-post-style.cff-layout-selected{
363
+ background: rgba(255,255,255,0.9);
364
+ border: 1px solid #7ad03a;
365
+ }
366
+ #cff-admin .cff-post-style img{
367
+ width: auto;
368
+ padding-bottom: 6px;
369
+ margin-bottom: 3px;
370
+ background: none;
371
+ border: none;
372
+ border-bottom: 1px solid #ddd;
373
+ }
374
+ #cff-admin .cff-post-style.cff-boxed{
375
+ /*width: 236px;*/
376
+ width: 197px;
377
+ }
378
+ #cff-admin .cff-post-style.cff-boxed img{
379
+ /*width: 94%;*/
380
+ padding: 3%;
381
+ margin: 0;
382
+ background: #fff;
383
+ border: 1px solid #ddd;
384
+ border-radius: 5px;
385
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
386
+ }
387
+ #cff-admin .cff-post-style:hover,
388
+ #cff-admin .cff-post-style:focus{
389
+ /*background: rgba(255,255,255,0.5);*/
390
+ }
391
+ @media all and (max-width: 1040px){
392
+ #cff-admin .cff-layout{
393
+ width: 29%;
394
+ padding: 1%;
395
+ margin-right: 1%;
396
+ }
397
+ #cff-admin .cff-post-style,
398
+ #cff-admin .cff-post-style.cff-boxed{
399
+ width: 46%;
400
+ }
401
+ #cff-admin .cff-post-style img{
402
+ width: 100%;
403
+ padding: 0;
404
+ }
405
+ }
406
+
407
+ /* Post style settings */
408
+ #cff-admin .cff-post-style-settings {
409
+ display: none;
410
+ float: left;
411
+ clear: both;
412
+ width: 96%;
413
+ padding: 20px 2%;
414
+ margin: 10px 0;
415
+ font-size: 13px;
416
+ background: #f9f9f9;
417
+ background: rgba(255,255,255,0.8);
418
+ -moz-border-radius: 8px;
419
+ -webkit-border-radius: 8px;
420
+ border-radius: 8px;
421
+ }
422
+ #cff-admin .cff-post-style-settings label{
423
+ display: inline-block;
424
+ font-weight: bold;
425
+ font-size: 14px;
426
+ padding-bottom: 5px;
427
+ padding-right: 5px;
428
+ }
429
+
430
+ /* Disabled */
431
+ #cff-admin .cff-disabled{
432
+ zoom: 1;
433
+ filter: alpha(opacity=60);
434
+ opacity: 0.6;
435
+ }
436
+
437
+ #cff-admin footer{
438
+ float: left;
439
+ clear: both;
440
+ width: 100%;
441
+ padding: 0;
442
+ margin: 0;
443
+ }
444
+
445
+ /* Hide clear cache notice */
446
+ .cff-clear-cache-notice{
447
+ display: none;
448
+ }
449
+
450
+ /* Access Token field */
451
+ #cff-admin .cff-access-token-hidden{
452
+ display: none;
453
+ }
454
+ #cff-admin .cff-ppca-check-notice{
455
+ display: none;
456
+ width: 60%;
457
+ padding: 8px 15px;
458
+ box-sizing: border-box;
459
+ font-size: 13px;
460
+ border-radius: 3px;
461
+ }
462
+
463
+ /* Add Facebook dashicon to CFF admin menu */
464
+ #toplevel_page_cff-top .toplevel_page_cff-top .wp-menu-image:before{
465
+ content: "\f305";
466
+ }
467
+
468
+ #cff-admin .cff-short select,
469
+ #cff-admin .cff-short input {
470
+ width: 50px;
471
+ }
472
+ #cff-admin .cff-medium select {
473
+ width: 250px;
474
+ }
475
+ #cff-admin .cff-wide select{
476
+ width: 400px;
477
+ }
478
+
479
+ #cff-admin #cff_width_options{
480
+ margin-top: 10px;
481
+ display: none;
482
+ }
483
+ #cff-admin #cff_width_options label{
484
+ font-size: 13px;
485
+ position: relative;
486
+ top: -2px;
487
+ }
488
+
489
+ /* Shortcode tooltips */
490
+ #cff-admin label{
491
+ position: relative;
492
+ }
493
+ #cff-admin .cff-load-more-setting label{
494
+ top: -2px;
495
+ }
496
+ #cff-admin th{
497
+ position: relative;
498
+ }
499
+ #cff-admin .cff_shortcode{
500
+ display: none;
501
+ position: absolute;
502
+ z-index: 10;
503
+ font-size: 11px;
504
+ float: left;
505
+ width: auto;
506
+ white-space: pre-line;
507
+ line-height: 1.4;
508
+ background: #e0e0e0;
509
+ }
510
+ #cff-admin .cff_shortcode_symbol{
511
+ position: absolute;
512
+ right: -24px;
513
+ bottom: 0px;
514
+ padding: 2px 4px 3px 3px;
515
+ width: auto;
516
+ font-size: 11px;
517
+ margin-left: 5px;
518
+ }
519
+ #cff-admin .cff-load-more-setting .cff_shortcode_symbol{
520
+ font-size: 10px;
521
+ padding: 1px 3px 2px 2px;
522
+ }
523
+
524
+ /* Cols */
525
+ #cff-admin .cff-row{
526
+ width: 100%;
527
+ float: left;
528
+ clear: both;
529
+ padding: 3px 0;
530
+ }
531
+ #cff-admin .cff-col{
532
+ float: left;
533
+ }
534
+ #cff-admin .cff-col.cff-one{
535
+ width: 110px;
536
+ }
537
+ #cff-admin .cff-col.cff-two{
538
+ width: 600px;
539
+ }
540
+ #cff-admin .cff-row input[type=radio],
541
+ #cff-admin .cff-row label{
542
+ margin: 5px 2px 0 0;
543
+ display: inline-block;
544
+ }
545
+
546
+ /* Quick start */
547
+ #cff-admin .cff_quickstart{
548
+ float: left;
549
+ display: inline-block;
550
+ margin: 15px 0 0 0;
551
+ padding: 15px 20px;
552
+ min-width: 808px;
553
+
554
+ border: 1px solid #ddd;
555
+ background: #eee;
556
+ background: rgba(255,255,255,0.5);
557
+
558
+ -moz-border-radius: 5px;
559
+ -webkit-border-radius: 5px;
560
+ border-radius: 5px;
561
+ }
562
+ #cff-admin .cff_quickstart h3,
563
+ #cff-admin .cff_quickstart p{
564
+ margin: 0;
565
+ padding: 5px 0;
566
+ }
567
+ /* Plugin icon */
568
+ #cff-admin .ctf-footnote.dashicons-admin-plugins:before{
569
+ width: 18px;
570
+ height: 18px;
571
+ font-size: 18px;
572
+ margin-left: -2px;
573
+ }
574
+
575
+ /* Caching settings */
576
+ #cff-admin #cff-caching-time-settings{
577
+ display: inline-block;
578
+ }
579
+ #cff-admin .cff-caching-cron-options .submit{
580
+ display: inline-block;
581
+ margin: 0;
582
+ padding: 0;
583
+ }
584
+ #cff-admin .cff-caching-sched-notice{
585
+ font-size: 11px;
586
+ display: block;
587
+ width: 100%;
588
+ }
589
+ #cff-admin .cff-caching-sched-notice span{
590
+ color: green;
591
+ background: #e5eae1;
592
+ padding: 5px 10px;
593
+ border-radius: 5px;
594
+ border: 1px solid #ccd3c6;
595
+ display: inline-block;
596
+ }
597
+
598
+ /* Settings page save changes btn */
599
+ #cff-admin .cff-save-settings-btn{
600
+ padding-bottom: 1.5em;
601
+ margin: 30px 0 5px 0;
602
+ display: inline-block;
603
+ background: #eee;
604
+ background: rgba(255,255,255,0.5);
605
+ padding: 10px 15px 10px 10px;
606
+ border-radius: 5px;
607
+ border: 1px solid #ddd;
608
+ }
609
+ #cff-admin .cff-save-settings-btn .cff-more-info{
610
+ background: none;
611
+ }
612
+ #cff-admin .cff-save-settings-btn .submit{
613
+ display: inline-block;
614
+ margin: 0;
615
+ padding: 0;
616
+ }
617
+ #cff-admin .cff-save-settings-btn #submit:active{
618
+ vertical-align: middle;
619
+ margin-top: -4px;
620
+ }
621
+ #cff-admin .cff-save-settings-btn .cff-tooltip-link{
622
+ display: inline-block;
623
+ margin: 5px 0 0 13px;
624
+ color: #444;
625
+ }
626
+ #cff-admin .cff-save-settings-btn .cff-tooltip-link:hover,
627
+ #cff-admin .cff-save-settings-btn .cff-tooltip-link:focus{
628
+ color: #111;
629
+ }
630
+
631
+
632
+ /* Limit manual settings */
633
+ #cff-admin #cff_limit_manual_settings{
634
+ display: inline-block;
635
+ }
636
+ #cff-admin #cff_limit_manual_settings input,
637
+ #cff-admin .cff-caching-page-options input{
638
+ line-height: 28px;
639
+ height: 28px;
640
+ position: relative;
641
+ top: 1px;
642
+ margin: 0;
643
+ }
644
+
645
+
646
+ /* Quick links */
647
+ #cff-admin .cff_contents_links{
648
+ float: left;
649
+ clear: both;
650
+ width: 98%;
651
+ margin: 0;
652
+ padding: 10px 1%;
653
+ border-top: none;
654
+ margin-bottom: 30px;
655
+ background: #fff;
656
+ border-left: 1px solid #e9e9e9;
657
+
658
+ box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
659
+ -moz-box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
660
+ -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
661
+ }
662
+ #cff-admin .cff_contents_links a,
663
+ #cff-admin .cff_contents_links span{
664
+ display: block;
665
+ float: left;
666
+ padding: 2px 5px;
667
+ font-size: 12px;
668
+ }
669
+ #cff-admin .cff_contents_links span{
670
+ padding-left: 0;
671
+ }
672
+
673
+ /* Subtabs for Customize page */
674
+ #cff-admin .cff-subtabs{
675
+ padding: 0;
676
+ margin-left: 1px;
677
+ border-bottom: 0;
678
+ }
679
+ #cff-admin .cff-subtabs a{
680
+ background: none;
681
+ margin: 0;
682
+ padding: 10px 12px;
683
+ border: none;
684
+ font-size: 13px;
685
+ line-height: 20px;
686
+ }
687
+ #cff-admin .cff-subtabs .nav-tab-active{
688
+ position: relative;
689
+ background: #fff;
690
+
691
+ box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
692
+ -moz-box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
693
+ -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
694
+ }
695
+ #cff-admin .cff-subtabs .nav-tab-active:after{
696
+ position: absolute;
697
+ width: 100%;
698
+ left: 0;
699
+ bottom: -5px;
700
+ height: 6px;
701
+ content: "";
702
+ background: #fff;
703
+ }
704
+ #cff-admin .cff-expand-button,
705
+ #cff-admin .cff-expand-button p{
706
+ margin-top: 0;
707
+ padding-top: 0;
708
+ }
709
+ #cff-admin .cff-expand-button{
710
+ padding-top: 10px;
711
+ }
712
+ #cff-admin .cff-expand-button a{
713
+ display: inline-block;
714
+ /*width: 450px;*/
715
+ text-align: center;
716
+ }
717
+ #cff-admin .cff-media-position{
718
+ display: none;
719
+ }
720
+ #cff-admin .cff-text-size-setting{
721
+ width: 170px;
722
+ }
723
+ #cff-admin .cff-pixel-label{
724
+ display: inline-block;
725
+ position: relative;
726
+ top: -1px;
727
+ bottom: 2px;
728
+ left: -2px;
729
+ background: #f9f9f9;
730
+ color: #555;
731
+ padding: 5px;
732
+ font-size: 12px;
733
+ border: 1px solid #d6d6d6;
734
+ height: 15px;
735
+ line-height: 15px;
736
+ border-radius: 0 4px 4px 0;
737
+ }
738
+
739
+ /* Show/Hide checkbox labels */
740
+ #cff-admin .cff_show_hide_settings input{
741
+ vertical-align: top;
742
+ margin-top: 2px;
743
+ }
744
+ #cff-admin .cff_show_hide_settings label{
745
+ display: inline-block;
746
+ }
747
+ #cff-admin .cff_show_hide_settings .cff-show-hide-desc{
748
+ font-size: 13px;
749
+ padding: 0 10px 10px 0;
750
+ margin: 0;
751
+ font-style: italic;
752
+ color: #666;
753
+ }
754
+
755
+ /* Support page */
756
+ #cff-admin .cff_support{
757
+ overflow: hidden;
758
+ margin-bottom: 20px;
759
+ width: 70%;
760
+ }
761
+ #cff-admin .cff_support p{
762
+ width: 100%;
763
+ float: left;
764
+ clear: both;
765
+ margin: 0 0 20px 0;
766
+ }
767
+ #cff-admin .cff-support-title{
768
+ font-weight: bold;
769
+ font-size: 16px;
770
+ display: block;
771
+ padding-bottom: 5px;
772
+ }
773
+ #cff-admin .cff-support-faqs{
774
+ float: left;
775
+ clear: both;
776
+ width: 100%;
777
+ padding-left: 5%;
778
+ margin: -10px 0 10px 0;
779
+ }
780
+ #cff-admin .cff-support-faqs ul{
781
+ float: left;
782
+ width: 250px;
783
+ margin-right: 0;
784
+ }
785
+ #cff-admin .cff-support-faqs .cff-faq-col-1{
786
+ width: 200px;
787
+ }
788
+ #cff-admin .cff-support-faqs ul li{
789
+ font-size: 13px;
790
+ margin-bottom: 4px;
791
+ }
792
+ #cff-admin .cff-support-faqs .fa-chevron-right{
793
+ font-size: 8px;
794
+ margin-left: 4px;
795
+ }
796
+ #cff-admin #cff-support-video{
797
+ margin-top: 10px;
798
+ border: 1px solid #ddd;
799
+ display: none;
800
+ }
801
+
802
+ /* Other plugins */
803
+ #cff-admin .cff-other-plugin{
804
+ display: block;
805
+ float: left;
806
+ clear: both;
807
+ width: 99%;
808
+ max-width: 600px;
809
+ padding: 20px 20px 5px 20px;
810
+ margin: 15px 15px 0 0;
811
+ background: #f9f9f9;
812
+ border: 1px solid #ddd;
813
+ border-radius: 5px;
814
+ box-shadow: inset 0 0 5px #eee;
815
+ text-decoration: none;
816
+ box-sizing: border-box;
817
+ }
818
+ #cff-admin .cff-other-plugins-header{
819
+ margin-top: 60px;
820
+ }
821
+ #cff-admin .cff-other-plugins-header span{
822
+ display: inline-block;
823
+ position: relative;
824
+ width: 18px;
825
+ height: 21px;
826
+ top: 3px;
827
+ margin-right: 8px;
828
+ background: url('../img/cff-sprite.png') no-repeat -54px -16px;
829
+ }
830
+ #cff-admin .cff-other-plugin h3{
831
+ padding: 0;
832
+ margin: 0;
833
+ }
834
+
835
+ /* Color picker */
836
+ #cff-admin .wp-picker-container,
837
+ #cff-admin .wp-picker-container:active {
838
+ display: inline-block;
839
+ outline: 0;
840
+ }
841
+
842
+ /* Pro options */
843
+ #cff-admin .cff-pro, #cff-admin .cff-pro label, #cff-admin .cff-pro h3 {
844
+ color: #999 !important;
845
+ }
846
+
847
+ /* Pro notice */
848
+ #cff-admin .cff-pro-notice{
849
+ display: block;
850
+ float: left;
851
+ clear: both;
852
+ margin: 20px 0 0 0;
853
+ overflow: hidden;
854
+ -moz-border-radius: 4px;
855
+ -webkit-border-radius: 4px;
856
+ border-radius: 4px;
857
+ -moz-transition: all 0.5s ease-in-out;
858
+ -webkit-transition: all 0.5s ease-in-out;
859
+ -o-transition: all 0.5s ease-in-out;
860
+ transition: all 0.5s ease-in-out;
861
+ }
862
+ #cff-admin .cff-pro-notice img{
863
+ float: left;
864
+ }
865
+ #cff-admin .cff-pro-notice:hover {
866
+ opacity: 0.95;
867
+ -moz-transition: all 0.1s ease-in-out;
868
+ -webkit-transition: all 0.1s ease-in-out;
869
+ -o-transition: all 0.1s ease-in-out;
870
+ transition: all 0.1s ease-in-out;
871
+ }
872
+ #cff-admin .cff-share-plugin{
873
+ width: 100%;
874
+ float: left;
875
+ clear: both;
876
+ border-top: 1px solid #ccc;
877
+ margin: 20px 0 0 0;
878
+ }
879
+
880
+ /* Review notice */
881
+ .cff_notice{
882
+ position: relative;
883
+ clear: right;
884
+ overflow: hidden;
885
+ padding: 20px 70px 23px 82px;
886
+ box-sizing: border-box;
887
+ margin: 40px 20px 10px 0px;
888
+ background: #FFFFFF 0 0 no-repeat padding-box;
889
+ box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
890
+ border-radius: 2px;
891
+ }
892
+ .cff_review_notice,
893
+ .cff_discount_notice,
894
+ .cff_review_notice_step_1 {
895
+ border-top: 2px solid #0068A0;
896
+ }
897
+ .cff_notice .cff_thumb{
898
+ position: absolute;
899
+ display: inline-block;
900
+ -moz-border-radius: 4px;
901
+ -webkit-border-radius: 4px;
902
+ border-radius: 4px;
903
+ left: 0;
904
+ top: 0;
905
+ margin: 0;
906
+ top: 20px;
907
+ left: 24px;
908
+ width: 34px;
909
+ height: 44px;
910
+ }
911
+ .cff_notice .cff_thumb {
912
+ width: 42px;
913
+ height: 42px;
914
+ top: 11px;
915
+ }
916
+ .cff_notice.cff_review_notice .cff_thumb {
917
+ top: 16px;
918
+ }
919
+ .cff_notice.cff_review_notice_step_1 {
920
+ padding: 18px 120px 18px 82px;
921
+ }
922
+ .cff_notice.cff_review_notice_step_1 .cff-notice-text .cff-notice-text-p {
923
+ font-size: 16px;
924
+ font-weight: 600;
925
+ margin-bottom: 0;
926
+ }
927
+ .cff_notice .cff_thumb .img-overlay {
928
+ position: absolute;
929
+ bottom: 4px;
930
+ padding: 6px 7px 6px 5px;
931
+ font-size: 13px;
932
+ font-weight: bold;
933
+ background: #fff;
934
+ background: rgba(255,255,255,0.85);
935
+ line-height: 1;
936
+ color: #333;
937
+ box-shadow: 1px -1px 3px 0 rgba(0,0,0,0.15);
938
+ }
939
+ .cff_notice .cff_thumb img {
940
+ max-width: 100%;
941
+ }
942
+ .cff_notice .cff-notice-text{
943
+ float: left;
944
+ clear: none;
945
+ width: 100%;
946
+ padding: 0;
947
+ }
948
+
949
+ .cff_notice.cff_review_notice_step_1 .cff-notice-text {
950
+ width: auto;
951
+ }
952
+ .cff_notice .cff-notice-text .cff-notice-text-p {
953
+ margin-bottom: 15px;
954
+ }
955
+
956
+ .cff_notice .cff-notice-text .cff-notice-text-header {
957
+ font-size: 16px;
958
+ margin: 0 0 10px;
959
+ color: #141B38;
960
+ }
961
+ @media (min-width: 1170px ) {
962
+ .cff_notice_op.cff_discount_notice .cff-notice-text {
963
+ display: flex;
964
+ flex-wrap: wrap;
965
+ justify-content: space-between;
966
+ }
967
+ .cff_notice_op.cff_discount_notice .cff-notice-text .cff-notice-text-inner {
968
+ width: 60%;
969
+ max-width: 540px;
970
+ }
971
+ .cff_notice_op.cff_discount_notice .cff-notice-text .cff-notice-text-p {
972
+ margin-bottom: 0;
973
+ }
974
+ }
975
+ .cff_notice .cff-links{
976
+ margin-top: 4px !important;
977
+ }
978
+ .cff_notice p{
979
+ float: left;
980
+ clear: both;
981
+ width: auto;
982
+ font-weight: normal;
983
+ font-size: 14px;
984
+ line-height: 22px;
985
+ margin: 0px 0 10px 0;
986
+ color: #434960;
987
+ }
988
+ .cff_notice a:hover,
989
+ .cff_notice a:focus{
990
+ color: #0c7abf;
991
+ }
992
+ .cff_notice .cff-notice-links{
993
+ margin: 0;
994
+ }
995
+ .cff-notice-links{
996
+ margin-top: 0 !important;
997
+ }
998
+ .cff-notice-links .cff-btn {
999
+ font-weight: 600;
1000
+ padding: 5px 12px;
1001
+ border-radius: 2px;
1002
+ box-sizing: border-box;
1003
+ height: 32px;
1004
+ text-decoration: none;
1005
+ font-size: 12px;
1006
+ display: inline-block;
1007
+ }
1008
+ .cff-notice-links a:not(:last-child) {
1009
+ margin-right: 5px;
1010
+ }
1011
+ .cff-notice-dismiss {
1012
+ position: absolute;
1013
+ top: 3px;
1014
+ right: 0;
1015
+ cursor: pointer;
1016
+ width: 40px;
1017
+ height: 40px;
1018
+ display: flex;
1019
+ justify-content: center;
1020
+ align-items: center;
1021
+ }
1022
+ .cff-notice-dismiss path {
1023
+ fill: #8a8787;
1024
+ }
1025
+ body .cff_review_step1_notice h3.title {
1026
+ display: inline-block;
1027
+ font-size: 16px !important;
1028
+ font-weight: 600 !important;
1029
+ margin: 0 !important;
1030
+ }
1031
+ body .cff_review_step1_notice .cff-btn-link {
1032
+ font-size: 16px;
1033
+ font-weight: 600;
1034
+ line-height: 26px;
1035
+ text-decoration-line: underline;
1036
+ color: #0068A0;
1037
+ background: none;
1038
+ border: none;
1039
+ cursor: pointer;
1040
+ padding: 0;
1041
+ }
1042
+ body .cff_review_step1_notice .cff-btn-link:not(:last-child) {
1043
+ margin-right: 12px;
1044
+ }
1045
+
1046
+ .cff_notice .cff_notice_close,
1047
+ .cff_notice .cff_bfcm_sale_notice_close,
1048
+ .cff_notice .cff_new_user_sale_notice_close {
1049
+ position: absolute;
1050
+ top: 0;
1051
+ right: 0;
1052
+ padding: 10px;
1053
+ line-height: 1;
1054
+ }
1055
+ .cff_notice .cff_notice_close:hover,
1056
+ .cff_notice .cff_notice_close:focus{
1057
+ color: #a34100;
1058
+ }
1059
+
1060
+ /* Notice CTA btn */
1061
+
1062
+ .cff_notice .cff_other_notice{
1063
+ padding-top: 10px;
1064
+ font-style: italic;
1065
+ font-size: 12px;
1066
+ }
1067
+ .cff_notice .cff_other_notice a{
1068
+ padding: 0;
1069
+ }
1070
+ .cff-notice-consent-btns {
1071
+ float: left;
1072
+ }
1073
+
1074
+ .cff-notice-consent-btns .cff-btn-link {
1075
+ font-size: 16px;
1076
+ font-weight: 600;
1077
+ line-height: 26px;
1078
+ text-decoration-line: underline;
1079
+ color: #0068A0;
1080
+ background: none;
1081
+ border: none;
1082
+ cursor: pointer;
1083
+ padding: 0;
1084
+ }
1085
+ .cff-notice-consent-btns .cff-btn-link:not(:last-child) {
1086
+ margin-right: 12px;
1087
+ }
1088
+ @media (min-width: 700px) {
1089
+ .cff-notice-consent-btns {
1090
+ margin-left: 20px;
1091
+ }
1092
+ body .review-step-1-btns {
1093
+ margin-left: 20px;
1094
+ }
1095
+ .cff_review_step1_notice .review-step-1-btns {
1096
+ display: inline-block;
1097
+ }
1098
+ }
1099
+ /* Support page */
1100
+ #cff-admin .cff_support{
1101
+ overflow: hidden;
1102
+ margin-bottom: 20px;
1103
+ width: 70%;
1104
+ }
1105
+ #cff-admin .cff_support p{
1106
+ width: 100%;
1107
+ float: left;
1108
+ clear: both;
1109
+ margin: 0 0 20px 0;
1110
+ }
1111
+ #cff-admin .cff-support-title{
1112
+ font-weight: bold;
1113
+ font-size: 16px;
1114
+ display: block;
1115
+ padding-bottom: 5px;
1116
+ }
1117
+ #cff-admin .cff-support-faqs{
1118
+ float: left;
1119
+ clear: both;
1120
+ width: 100%;
1121
+ padding-left: 5%;
1122
+ margin: -10px 0 10px 0;
1123
+ }
1124
+ #cff-admin .cff-support-faqs ul{
1125
+ float: left;
1126
+ width: 250px;
1127
+ margin-right: 0;
1128
+ }
1129
+ #cff-admin .cff-support-faqs .cff-faq-col-1{
1130
+ width: 200px;
1131
+ }
1132
+ #cff-admin .cff-support-faqs ul li{
1133
+ font-size: 13px;
1134
+ margin-bottom: 4px;
1135
+ }
1136
+ #cff-admin .cff-support-faqs .fa-chevron-right{
1137
+ font-size: 8px;
1138
+ margin-left: 4px;
1139
+ }
1140
+ #cff-admin #cff-support-video{
1141
+ margin-top: 10px;
1142
+ border: 1px solid #ddd;
1143
+ display: none;
1144
+ }
1145
+
1146
+ /* FB login button */
1147
+ #cff-admin .cff_admin_btn,
1148
+ #cff-admin .cff-admin-cancel-btn{
1149
+ display: inline-block;
1150
+ clear: both;
1151
+ padding: 0 21px 0 20px;
1152
+ height: 45px;
1153
+ line-height: 44px;
1154
+ background: #386793;
1155
+ color: #e9eef3;
1156
+ text-decoration: none;
1157
+ font-size: 14px;
1158
+
1159
+ -moz-border-radius: 5px;
1160
+ -webkit-border-radius: 5px;
1161
+ border-radius: 5px;
1162
+
1163
+ -moz-transition: all 0.5s ease-in-out;
1164
+ -webkit-transition: all 0.5s ease-in-out;
1165
+ -o-transition: all 0.5s ease-in-out;
1166
+ transition: all 0.5s ease-in-out;
1167
+ }
1168
+ #cff-admin .cff_admin_btn:hover,
1169
+ #cff-admin .cff-admin-cancel-btn:hover{
1170
+ background-color: #3880c4;
1171
+ color: #fff;
1172
+
1173
+ -moz-transition: all 0.1s ease-in-out;
1174
+ -webkit-transition: all 0.1s ease-in-out;
1175
+ -o-transition: all 0.1s ease-in-out;
1176
+ transition: all 0.1s ease-in-out;
1177
+ }
1178
+ #cff-admin .cff_admin_btn .fa {
1179
+ margin-right: 5px;
1180
+ font-size: 18px;
1181
+ position: relative;
1182
+ top: 1px;
1183
+ }
1184
+
1185
+ #cff-admin .cff-managed-pages{
1186
+ margin: 10px 0 0 0;
1187
+ }
1188
+ #cff-admin .cff-managed-page{
1189
+ width: 100%;
1190
+ border: 1px solid transparent;
1191
+ padding: 5px;
1192
+ background: #fff;
1193
+ box-sizing: border-box;
1194
+ }
1195
+ #cff-admin .cff-managed-page:hover{
1196
+ background: #eee;
1197
+ cursor: pointer;
1198
+ }
1199
+ #cff-admin .cff-managed-page .cff-page-avatar{
1200
+ float: left;
1201
+ margin-right: 10px;
1202
+ }
1203
+ #cff-admin .cff-managed-page p{
1204
+ padding: 0;
1205
+ margin: 0;
1206
+ height: 50px;
1207
+ line-height: 50px;
1208
+ }
1209
+ #cff-admin .cff-managed-page.cff-page-selected{
1210
+ background: #dceada;
1211
+ }
1212
+ #cff-admin .cff-save-page-token{
1213
+ display: none;
1214
+ }
1215
+ #cff-admin #cff_fb_login_modal{
1216
+ display: none;
1217
+ /*display: block;*/
1218
+ position: fixed;
1219
+ z-index: 999;
1220
+ width: 100%;
1221
+ top: 0;
1222
+ right: 0;
1223
+ bottom: 0;
1224
+ left: 0;
1225
+ background: rgba(0,0,0,0.3);
1226
+ }
1227
+ #cff-admin .cff_modal_box{
1228
+ position: absolute;
1229
+ top: 140px;
1230
+ left: 50%;
1231
+ width: 480px;
1232
+ margin: 0 0 0 -245px;
1233
+ padding: 25px 35px;
1234
+ background: #fff;
1235
+ text-align: center;
1236
+
1237
+ -webkit-box-shadow: 0 1px 20px rgba(0,0,0,0.2);
1238
+ box-shadow: 0 1px 20px rgba(0,0,0,0.2);
1239
+
1240
+ -moz-border-radius: 3px;
1241
+ -webkit-border-radius: 3px;
1242
+ border-radius: 3px;
1243
+ }
1244
+ #cff-admin .cff_modal_box .cff_admin_btn{
1245
+ margin-top: 10px;
1246
+ }
1247
+ #cff-admin .cff-admin-cancel-btn{
1248
+ margin-right: 5px;
1249
+ background: #ddd;
1250
+ color: #555;
1251
+ }
1252
+ #cff-admin .cff-admin-cancel-btn:hover{
1253
+ background: #ccc;
1254
+ color: #333;
1255
+ }
1256
+ #cff-admin .cff_modal_box p{
1257
+ font-size: 14px;
1258
+ line-height: 1.6;
1259
+ }
1260
+ /* Tokens modal */
1261
+ #cff-admin #cff_fb_login_modal.cff_modal_tokens{
1262
+ display: block;
1263
+ }
1264
+ #cff-admin .cff-pages-wrap{
1265
+ max-height: 310px;
1266
+ overflow-y: auto;
1267
+ }
1268
+ #cff-admin .cff_modal_tokens .cff_modal_box p{
1269
+ text-align: left;
1270
+ }
1271
+ #cff-admin .cff_modal_tokens .cff-managed-page .cff-page-avatar {
1272
+ margin-right: 18px;
1273
+ border-radius: 3px;
1274
+ }
1275
+ #cff-admin .cff_modal_box .cff-tokens-note{
1276
+ background: #dceada;
1277
+ border: 1px solid #6ca365;
1278
+ padding: 10px 15px;
1279
+ margin: 0 0 20px 0;
1280
+ border-radius: 5px;
1281
+ line-height: 1.3;
1282
+ }
1283
+ #cff-admin .cff_modal_box .cff-page-info-name{
1284
+ display: block;
1285
+ font-size: 15px;
1286
+ line-height: 1;
1287
+ padding: 5px 0 2px 0;
1288
+ }
1289
+ #cff-admin .cff_modal_box .cff-page-info{
1290
+ display: block;
1291
+ font-size: 13px;
1292
+ }
1293
+ #cff-admin #cff-insert-token,
1294
+ #cff-admin .cff-insert-reviews-token,
1295
+ #cff-admin .cff-insert-both-tokens,
1296
+ #cff-admin #cff-close-modal-primary-button,
1297
+ #cff-admin #cff-insert-all-tokens{
1298
+ margin-top: 25px;
1299
+ float: left;
1300
+ clear: both;
1301
+ }
1302
+ #cff-admin .cff-insert-reviews-token,
1303
+ #cff-admin .cff-insert-both-tokens,
1304
+ #cff-admin #cff-insert-all-tokens{
1305
+ clear: none;
1306
+ margin-left: 10px;
1307
+ }
1308
+ #cff-admin .cff-insert-reviews-token{
1309
+ color: #fff;
1310
+ border-color: #666;
1311
+ background: #888;
1312
+ box-shadow: 0 1px 0 #555;
1313
+ text-shadow: 0 -1px 0px #555;
1314
+ }
1315
+ #cff-admin .cff-insert-reviews-token:hover{
1316
+ background: #999;
1317
+ }
1318
+ #cff-admin .cff-insert-reviews-token:active{
1319
+ background: #777;
1320
+ border-color: #555;
1321
+ box-shadow: inset 0 2px 0 #666;
1322
+ vertical-align: top;
1323
+ }
1324
+ #cff-admin .cff-connection-note{
1325
+ margin: 30px 0 0 -60px;
1326
+ display: inline-block;
1327
+ font-size: 12px;
1328
+ color: #333;
1329
+ text-decoration: none;
1330
+ border-bottom: 1px dotted #999;
1331
+ }
1332
+ #cff-admin .cff-connection-note:hover,
1333
+ #cff-admin .cff-connection-note:focus{
1334
+ color: #000;
1335
+ text-decoration: none;
1336
+ border-bottom: 1px dotted #333;
1337
+ }
1338
+ #cff-admin .cff-modal-close{
1339
+ position: absolute;
1340
+ top: 0;
1341
+ right: 0;
1342
+ padding: 10px;
1343
+ font-size: 14px;
1344
+ color: #ccc;
1345
+ margin: 0;
1346
+ }
1347
+ #cff-admin .cff-modal-close:hover,
1348
+ #cff-admin .cff-modal-close:focus{
1349
+ color: #333;
1350
+ }
1351
+ /* Display retrieved pages button */
1352
+ #cff-admin #cff_fb_show_tokens {
1353
+ background: rgba(0,0,0,0.4);
1354
+ color: #fff;
1355
+ margin-left: 10px;
1356
+ }
1357
+ #cff-admin #cff_fb_show_tokens:hover{
1358
+ background-color: rgba(0,0,0,0.35);
1359
+ }
1360
+
1361
+ /* Choose token */
1362
+ #cff-admin #cff-own, #cff-admin #cff-public{
1363
+ display: none;
1364
+ }
1365
+ #cff-admin .cff-token-radios{
1366
+ width: 265px;
1367
+ text-align: left;
1368
+ margin-left: 110px;
1369
+ }
1370
+ #cff-admin .cff-token-radios input{
1371
+ position: relative;
1372
+ top: 2px;
1373
+ }
1374
+ #cff-admin .cff_modal_box .cff-disabled{
1375
+ background: #EEE;
1376
+ color: #aaa;
1377
+ cursor: default;
1378
+ }
1379
+ #cff-admin .cff-token-question-own,
1380
+ #cff-admin .cff-token-question-public{
1381
+ position: relative;
1382
+ top: 2px;
1383
+ left: 3px;
1384
+ font-size: 15px;
1385
+ opacity: 0.8;
1386
+ margin: 0;
1387
+ }
1388
+ #cff-admin .cff-token-question-own:hover,
1389
+ #cff-admin .cff-token-question-public:hover{
1390
+ opacity: 1;
1391
+ color: #005e8c;
1392
+ }
1393
+ #cff-admin #cff-token-intro .cff-tooltip{
1394
+ font-size: 13px;
1395
+ background: #f0f0f0;
1396
+ padding: 10px 15px;
1397
+ }
1398
+ #cff-admin .cff-test-license-error{
1399
+ margin-top: 10px;
1400
+ max-height: 380px;
1401
+ overflow-y: scroll;
1402
+ width: 99%;
1403
+ border: 1px solid #ddd;
1404
+ background: rgba(255,255,255,0.3);
1405
+ padding: 2px;
1406
+ }
1407
+
1408
+ /*Hide modal when saving settings */
1409
+ #cff-admin #cff_fb_login_modal.cffnomodal{
1410
+ display: none;
1411
+ }
1412
+
1413
+ #cff-admin .cff-success-check {
1414
+ color: #75cd32;
1415
+ font-size: 16px;
1416
+ position: relative;
1417
+ top: 6px;
1418
+ left: 7px;
1419
+ }
1420
+
1421
+ /* Groups option */
1422
+ #cff-admin .cff-login-options{
1423
+ width: 100%;
1424
+ padding: 20px 0 0 0;
1425
+ margin: 20px 0;
1426
+ box-sizing: border-box;
1427
+ border-top: 1px solid #eee;
1428
+ }
1429
+ #cff-admin .cff-login-options label{
1430
+ display: block;
1431
+ margin-bottom: 5px;
1432
+ font-weight: bold;
1433
+ }
1434
+ #cff-admin #cff_group_app{
1435
+ display: none;
1436
+ }
1437
+ /* Highlight admin groups in list */
1438
+ #cff-admin .cff-group-admin{
1439
+ position: relative;
1440
+ background: #eee;
1441
+ }
1442
+ #cff-admin .cff-group-admin-icon{
1443
+ position: absolute;
1444
+ top: 5px;
1445
+ right: 5px;
1446
+ padding: 5px 8px;
1447
+ background: rgba(255,255,255,0.5);
1448
+ border-radius: 5px;
1449
+ text-transform: uppercase;
1450
+ font-size: 11px;
1451
+ }
1452
+ #cff-admin .cff-group-admin-icon .fa{
1453
+ margin-right: 2px;
1454
+ font-size: 12px;
1455
+ }
1456
+ #cff-admin .cff-group-admin .cff-page-info-name {
1457
+ max-width: 85%;
1458
+ }
1459
+ #cff_token_expiration_note{
1460
+ display: none;
1461
+ width: 250px;
1462
+ padding: 5px 10px;
1463
+ float: right;
1464
+ font-size: 12px;
1465
+ margin-top: 11px;
1466
+ line-height: 1.3;
1467
+ border-radius: 5px;
1468
+ }
1469
+ #cff-group-member-directions{
1470
+ display: none;
1471
+ }
1472
+ /* App installation directions */
1473
+ #cff-group-installation{
1474
+ display: none;
1475
+ width: 100%;
1476
+ clear: both;
1477
+ text-align: left;
1478
+ }
1479
+ #cff-group-installation li{
1480
+ font-size: 14px;
1481
+ margin: 0 0 10px 0;
1482
+ line-height: 1.5;
1483
+ }
1484
+ #cff-group-installation li{
1485
+ position: relative;
1486
+ }
1487
+ #cff-group-app-tooltip{
1488
+ cursor: pointer;
1489
+ }
1490
+ #cff-group-app-screenshot{
1491
+ display: none;
1492
+ position: absolute;
1493
+ bottom: 42px;
1494
+ left: 0;
1495
+ margin-left: -85px;
1496
+ z-index: 10;
1497
+ border: 1px solid rgba(0,0,0,0.3);
1498
+ box-shadow: 0 0 0 5000px rgba(0,0,0,0.2);
1499
+ border-radius: 5px;
1500
+ }
1501
+ #cff-group-installation .button-secondary{
1502
+ margin: 25px 0 0 10px;
1503
+ }
1504
+
1505
+ /* Admin footer share icons */
1506
+ #cff-admin #cff-admin-share-links{
1507
+ opacity: 0;
1508
+ display: inline-block;
1509
+ padding: 5px;
1510
+ border: 1px solid #ccc;
1511
+ background: rgba(255,255,255,0.5);
1512
+ border-radius: 3px;
1513
+ transition: opacity 0.5s;
1514
+ }
1515
+ #cff-admin #cff-admin-share-links.cff-show{
1516
+ transition: opacity 0.5s;
1517
+ opacity: 1;
1518
+ }
1519
+ #cff-admin #twitter-widget-0 {
1520
+ width: 65px !important;
1521
+ }
1522
+
1523
+ #cff-admin #header{
1524
+ padding: 0 0 10px 0;
1525
+ }
1526
+
1527
+ #cff-admin .cff_plugins_promo{
1528
+ width: 100%;
1529
+ float: left;
1530
+ clear: both;
1531
+ }
1532
+ #cff-admin .cff_plugins_promo a{
1533
+ color: #e34f0e;
1534
+ }
1535
+ #cff-admin .cff-share-plugin h3 {
1536
+ padding: 15px 0 0 0;
1537
+ }
1538
+ #cff-admin .cff-mobile-col-settings .cff-row {
1539
+ width: auto;
1540
+ padding: 10px 15px;
1541
+ margin: 10px 0;
1542
+ font-size: 13px;
1543
+ background: #f9f9f9;
1544
+ background: rgba(255,255,255,0.8);
1545
+ -moz-border-radius: 8px;
1546
+ -webkit-border-radius: 8px;
1547
+ border-radius: 8px;
1548
+ }
1549
+ #cff-admin .cff-mobile-col-settings label {
1550
+ font-weight: 600;
1551
+ margin: 0 5px 0 0;
1552
+ }
1553
+
1554
+
1555
+ /* Connected Accounts */
1556
+ #cff-admin #cff_accounts_section{
1557
+ width: 100%;
1558
+ overflow: hidden;
1559
+ }
1560
+ #cff-admin #cff_connected_accounts_wrap{
1561
+ clear: both;
1562
+ max-height: 600px;
1563
+ overflow-y: auto;
1564
+ }
1565
+ #cff-admin #cff_accounts_section h3{
1566
+ float: left;
1567
+ clear: both;
1568
+ font-size: 14px;
1569
+ padding: 0;
1570
+ margin: 10px 0 5px 0;
1571
+ }
1572
+ #cff-admin .cff_connected_account {
1573
+ position: relative;
1574
+ box-sizing: border-box;
1575
+ padding: 7px 35px 7px 7px;
1576
+ border-radius: 5px;
1577
+ background: #fff;
1578
+ margin-bottom: 5px;
1579
+ overflow: hidden;
1580
+ clear: both;
1581
+ border: 1px solid #ddd;
1582
+ }
1583
+ #cff-admin .cff_ca_username {
1584
+ line-height: 1.4;
1585
+ margin-left: 15px;
1586
+ float: left;
1587
+ font-size: 18px;
1588
+ }
1589
+ #cff-admin .cff_connected_account .cff_ca_avatar{
1590
+ margin-right: 15px;
1591
+ }
1592
+ #cff-admin .cff_connected_account .cff_ca_username {
1593
+ margin-left: 0;
1594
+ margin-right: 25px;
1595
+ }
1596
+ #cff-admin .cff_connected_account .cff_ca_username strong{
1597
+ float: left;
1598
+ }
1599
+ #cff-admin .cff_connected_account .cff_ca_username .cff_ca_pagetype{
1600
+ font-size: 10px;
1601
+ font-weight: normal;
1602
+ text-transform: uppercase;
1603
+ padding: 0;
1604
+ margin: 0;
1605
+ display: block;
1606
+ }
1607
+
1608
+ #cff-admin .cff_ca_actions {
1609
+ display: inline-block;
1610
+ }
1611
+ #cff-admin .cff_ca_actions .fa{
1612
+ margin-right: 5px;
1613
+ }
1614
+ #cff-admin .cff_ca_actions a.button-primary,
1615
+ #cff-admin .cff_ca_actions a.button-secondary,
1616
+ #cff-admin .cff_ca_accesstoken a.cff_ca_token_shortcode {
1617
+ font-size: 12px;
1618
+ padding: 6px;
1619
+ height: auto;
1620
+ line-height: 1;
1621
+ margin: 7px 5px 0 0;
1622
+ vertical-align: top;
1623
+ }
1624
+ #cff-admin .cff_ca_at_is_valid {
1625
+ margin-top: 10px;
1626
+ display: none;
1627
+ }
1628
+ #cff-admin #cff_primary_account_label{
1629
+ padding: 0 0 0 1px;
1630
+ margin: 0;
1631
+ font-size: 12px;
1632
+ }
1633
+ #cff-admin #cff_primary_account_label span{
1634
+ padding: 0;
1635
+ margin: 0;
1636
+ display: inline-block;
1637
+ position: relative;
1638
+ top: -4px;
1639
+ }
1640
+ #cff-admin #cff_primary_account_label img{
1641
+ width: 18px;
1642
+ height: 18px;
1643
+ border-radius: 3px;
1644
+ padding: 0;
1645
+ margin: 0 5px 0 0;
1646
+ }
1647
+
1648
+ @-webkit-keyframes cff_flash {
1649
+ 0% {
1650
+ background-color: #cae2a5;
1651
+ opacity:1;
1652
+ border: 1px solid #b2ce88;
1653
+ }
1654
+ 100% {
1655
+ background-color: #fff;
1656
+ }
1657
+ }
1658
+ #cff-admin .cff_account_updated{
1659
+ border: 1px solid #ddd;
1660
+ background: #fff;
1661
+
1662
+ -webkit-animation-name: cff_flash;
1663
+ -webkit-animation-duration: 700ms;
1664
+ -webkit-animation-iteration-count: 1;
1665
+ -webkit-animation-timing-function: linear;
1666
+ -moz-animation-name: cff_flash;
1667
+ -moz-animation-duration: 700ms;
1668
+ -moz-animation-iteration-count: 1;
1669
+ -moz-animation-timing-function: linear;
1670
+ }
1671
+
1672
+ #cff-admin .cff_account_active{
1673
+ border: 1px solid #b2ce88;
1674
+ background: #ecf2e3;
1675
+ }
1676
+
1677
+ #cff-admin .cff_ca_alert {
1678
+ display: none;
1679
+ }
1680
+ #cff-admin .cff_account_invalid .cff_ca_alert {
1681
+ display: block;
1682
+ }
1683
+ #cff-admin .cff_ca_avatar{
1684
+ float: left;
1685
+ width: 40px;
1686
+ height: 40px;
1687
+ border-radius: 5px;
1688
+ }
1689
+ #cff-admin .cff_ca_accesstoken{
1690
+ display: none;
1691
+ width: 100%;
1692
+ float: left;
1693
+ clear: both;
1694
+ margin-top: 10px;
1695
+ }
1696
+ #cff-admin .cff_ca_token_label{
1697
+ display: inline-block;
1698
+ position: relative;
1699
+ background: #f9f9f9;
1700
+ color: #555;
1701
+ padding: 3px 5px;
1702
+ font-size: 12px;
1703
+ border: 1px solid #d6d6d6;
1704
+ height: 16px;
1705
+ line-height: 15px;
1706
+ border-radius: 4px 0 0 4px;
1707
+ }
1708
+ #cff-admin .cff_ca_token{
1709
+ position: relative;
1710
+ top: 1px;
1711
+ padding: 3px 10px;
1712
+ border: 1px solid #d6d6d6;
1713
+ border-left: none;
1714
+ font-size: 12px;
1715
+ border-radius: 0 4px 4px 0;
1716
+ background: rgba(255,255,255,0.8);
1717
+ width: 80%;
1718
+ display: inline-block;
1719
+ margin-left: 0;
1720
+ min-height: 10px;
1721
+ line-height: 1.4;
1722
+ }
1723
+ #cff-admin a.cff_ca_token_shortcode,
1724
+ #cff-admin .cff_make_primary,
1725
+ #cff-admin .cff_ca_show_token a,
1726
+ #cff-admin .cff_make_reviews {
1727
+ padding: 4px 8px;
1728
+ display: inline-block;
1729
+ color: #555;
1730
+ border-radius: 3px;
1731
+ margin: 7px 0 0 0;
1732
+ font-size: 12px;
1733
+ text-decoration: none;
1734
+
1735
+ background: #fff;
1736
+ background: rgba(255,255,255,0.9);
1737
+ border: 1px solid #ccc;
1738
+ }
1739
+ #cff-admin .cff_make_primary,
1740
+ #cff-admin .cff_make_reviews{
1741
+ margin-right: 5px;
1742
+ background: #fff;
1743
+ background: rgba(255,255,255,0.9);
1744
+ border: 1px solid #ccc;
1745
+ }
1746
+ #cff-admin a.cff_ca_token_shortcode:hover,
1747
+ #cff-admin .cff_make_primary:hover,
1748
+ #cff-admin .cff_ca_show_token a:hover,
1749
+ #cff-admin .cff_make_reviews:hover{
1750
+ border: 1px solid #aaa;
1751
+ background: rgba(0,0,0,0.03);
1752
+ }
1753
+ #cff-admin a.cff_ca_token_shortcode:active,
1754
+ #cff-admin .cff_make_primary:active,
1755
+ #cff-admin .cff_ca_show_token a:active,
1756
+ #cff-admin .cff_make_reviews:active{
1757
+ background: rgba(255,255,255,0.9);
1758
+ border: 1px solid #ccc;
1759
+ }
1760
+
1761
+
1762
+ #cff-admin .cff_delete_account{
1763
+ position: absolute;
1764
+ right: 10px;
1765
+ top: 10px;
1766
+
1767
+ padding: 5px 10px;
1768
+ background: rgba(0,0,0,0.05);
1769
+ color: #666;
1770
+ border-radius: 50px;
1771
+ text-decoration: none;
1772
+ font-size: 12px;
1773
+ }
1774
+ #cff-admin .cff_delete_account:hover,
1775
+ #cff-admin .cff_delete_account:focus{
1776
+ background: #333;
1777
+ color: #ddd;
1778
+ }
1779
+ #cff-admin .cff_delete_account .cff_remove_text{
1780
+ display: none;
1781
+ margin-left: 5px;
1782
+ }
1783
+ #cff-admin .cff_delete_account:hover .cff_remove_text{
1784
+ display: inline-block;
1785
+ }
1786
+
1787
+ .cff_connected_accounts_wrap{
1788
+ vertical-align: top;
1789
+ }
1790
+ .cff_connected_actions{
1791
+ display: none;
1792
+ }
1793
+ #cff_export_accounts{
1794
+ font-size: 12px;
1795
+ color: #999 !important;
1796
+ text-decoration: underline;
1797
+ margin-left: 2px;
1798
+ }
1799
+ #cff_export_accounts_wrap{
1800
+ display: none;
1801
+ }
1802
+ #cff-admin .cff_no_accounts{
1803
+ display: inline-block;
1804
+ padding: 4px 15px;
1805
+ border-radius: 8px;
1806
+ background: rgba(255,255,255,0.8);
1807
+ margin-bottom: 3px;
1808
+ }
1809
+ #cff-admin #cff_manual_submit:active{
1810
+ vertical-align: unset;
1811
+ }
1812
+ #cff-admin .cff_manually_connect_wrap{
1813
+ padding-top: 5px;
1814
+ }
1815
+ #cff-admin .cff_user_feed_account_wrap:first-child{
1816
+ padding-top: 5px;
1817
+ }
1818
+ #cff-admin .cff_user_feed_account_wrap:last-child{
1819
+ padding-bottom: 6px;
1820
+ }
1821
+ #cff-admin .cff_user_feed_account_wrap{
1822
+ padding-bottom: 5px;
1823
+ padding-left: 2px;
1824
+ }
1825
+ #cff-admin .cff_user_feed_account_wrap span{
1826
+ font-size: 13px;
1827
+ }
1828
+ #cff-admin .cff_manual_account_id_toggle label{
1829
+ display: block;
1830
+ margin: 10px 0 0 0;
1831
+ font-size: 13px;
1832
+ }
1833
+ #cff-admin .cff_business_profile_tag{
1834
+ display: none;
1835
+ padding: 8px 10px;
1836
+ background: rgba(0,0,0,0.05);
1837
+ border-radius: 0 5px 5px 0;
1838
+ margin: 0 0 0 -2px;
1839
+ font-size: 13px;
1840
+ height: 15px;
1841
+ line-height: 15px;
1842
+ box-shadow: inset 0 0 1px rgba(0,0,0,.5);
1843
+ }
1844
+ #cff-admin .cff_ca_info{
1845
+ overflow: hidden;
1846
+ }
1847
+ #cff-admin .cff_ca_show_token{
1848
+ display: inline-block;
1849
+ padding: 0;
1850
+ margin: 0 0 0 5px;
1851
+ font-size: 12px;
1852
+ vertical-align: top;
1853
+ }
1854
+ #cff-admin .cff_ca_shortcode{
1855
+ display: none;
1856
+ padding: 0;
1857
+ width: 100%;
1858
+ float: left;
1859
+ clear: both;
1860
+ margin: 10px 0 0 0;
1861
+ }
1862
+ #cff-admin .cff_ca_shortcode p{
1863
+ margin: 0;
1864
+ padding: 15px 0 0 0;
1865
+ font-size: 13px;
1866
+ }
1867
+ #cff-admin .cff_ca_shortcode code{
1868
+ margin-top: 5px;
1869
+ display: inline-block;
1870
+ }
1871
+ #cff-admin .cff_user_feed_ids_wrap .cff_ca_avatar{
1872
+ width: 20px;
1873
+ height: 20px;
1874
+ position: relative;
1875
+ top: 5px;
1876
+ margin-right: 8px;
1877
+ border-radius: 4px;
1878
+ }
1879
+
1880
+ #cff-admin #cff_manual_account_step_2{
1881
+ display: none;
1882
+ }
1883
+ #cff-admin #cff_manual_account_button{
1884
+ float: left;
1885
+ clear: both;
1886
+ margin-bottom: 10px;
1887
+ }
1888
+ #cff-admin #cff_manual_account{
1889
+ float: left;
1890
+ clear: both;
1891
+ display: none;
1892
+ margin: 0 0 20px 0;
1893
+ padding: 15px 20px 20px 20px;
1894
+ background: rgba(255,255,255,0.5);
1895
+ border: 1px solid #ddd;
1896
+ border-radius: 5px;
1897
+ }
1898
+ #cff-admin #cff_manual_account p.submit,
1899
+ #cff-admin .cff_manual_back{
1900
+ float: left;
1901
+ padding: 0;
1902
+ margin: 20px 5px 0 0;
1903
+ }
1904
+ #cff-admin .cff_manual_back{
1905
+ display: block;
1906
+ padding: 0 10px;
1907
+ }
1908
+ #cff-admin .cff_account_type_page .cff_group,
1909
+ #cff-admin .cff_account_type_group .cff_page{
1910
+ display: none;
1911
+ }
1912
+ #cff-admin #cff_manual_account_step_2 label {
1913
+ width: 165px;
1914
+ display: inline-block;
1915
+ }
1916
+ #cff-admin #cff_manual_account_step_2 input[type=text] {
1917
+ width: 300px;
1918
+ }
1919
+ #cff-admin .cff_manual_forward{
1920
+ position: relative;
1921
+ top: 2px;
1922
+ }
1923
+ #cff-admin .cff_error{
1924
+ border: 1px solid #e37177;
1925
+ background: #ffebec;
1926
+ }
1927
+
1928
+ @media all and (max-width: 1200px){
1929
+ #cff-admin .cff_delete_account .cff_remove_text{
1930
+ display: none;
1931
+ }
1932
+ #cff-admin .cff_ca_token_label{
1933
+ display: none;
1934
+ }
1935
+ #cff-admin .cff_ca_token{
1936
+ border-left: 1px solid #d6d6d6;
1937
+ border-radius: 4px;
1938
+ }
1939
+ }
1940
+
1941
+
1942
+ /* Lite Notice */
1943
+ @media screen and (max-width: 600px) {
1944
+ #cff-notice-bar {
1945
+ display:none !important
1946
+ }
1947
+ }
1948
+
1949
+ #cff-notice-bar {
1950
+ background-color: #DDDDDD;
1951
+ color: #777777;
1952
+ text-align: center;
1953
+ position: relative;
1954
+ padding: 7px;
1955
+ margin-bottom: 0;
1956
+ opacity: 1;
1957
+ transition: all .3s ease-in-out;
1958
+ max-height: 100px;
1959
+ overflow: hidden
1960
+ }
1961
+
1962
+ #cff-notice-bar.out {
1963
+ opacity: .5;
1964
+ max-height: 0
1965
+ }
1966
+
1967
+ #cff-notice-bar a {
1968
+ color: #e34f0e;
1969
+ }
1970
+
1971
+ #cff-notice-bar a:hover {
1972
+ color: #b85a1b
1973
+ }
1974
+
1975
+ #cff-notice-bar .dismiss {
1976
+ position: absolute;
1977
+ top: 0;
1978
+ right: 0;
1979
+ border: none;
1980
+ padding: 5px;
1981
+ margin-top: 1px;
1982
+ background: 0 0;
1983
+ color: #72777c;
1984
+ cursor: pointer
1985
+ }
1986
+
1987
+ #cff-notice-bar .dismiss:before {
1988
+ background: 0 0;
1989
+ color: #72777c;
1990
+ content: "\f335";
1991
+ display: block;
1992
+ font: normal 20px/20px dashicons;
1993
+ speak: none;
1994
+ height: 20px;
1995
+ text-align: center;
1996
+ width: 20px;
1997
+ -webkit-font-smoothing: antialiased
1998
+ }
1999
+
2000
+ /* Error Reporting */
2001
+ #cff-admin .cff-space-left {
2002
+ margin-left: 10px;
2003
+ }
2004
+ #cff-admin .cff-goto {
2005
+ border: 1px solid #e89a2e;
2006
+ background-color: rgba(232, 154, 46, .2);
2007
+ }
2008
+
2009
+ #cff-admin .cff_box {
2010
+ float: left;
2011
+ clear: both;
2012
+ width: 96%;
2013
+
2014
+ padding: 10px 2%;
2015
+ margin: 10px 0;
2016
+ font-size: 13px;
2017
+ background: #f9f9f9;
2018
+ background: rgba(255,255,255,0.8);
2019
+
2020
+ -moz-border-radius: 8px;
2021
+ -webkit-border-radius: 8px;
2022
+ border-radius: 8px;
2023
+ }
2024
+ #cff-admin .cff_box_setting{
2025
+ margin-bottom: 20px;
2026
+ }
2027
+ #cff-admin .cff_box_setting:last-child {
2028
+ margin-bottom: 0;
2029
+ }
2030
+ #cff-admin .cff_box_setting label {
2031
+ display: inline-block;
2032
+ font-weight: bold;
2033
+ font-size: 14px;
2034
+ padding-bottom: 5px;
2035
+ padding-right: 5px;
2036
+ }
2037
+ #cff-admin .cff_box_setting textarea {
2038
+ width: 100%;
2039
+ }
2040
+
2041
+
2042
+ /* About */
2043
+ #cff-admin-about *,#cff-admin-about *::before,#cff-admin-about *::after {
2044
+ -webkit-box-sizing: border-box;
2045
+ -moz-box-sizing: border-box;
2046
+ box-sizing: border-box
2047
+ }
2048
+
2049
+ #cff-admin-about .cff-admin-about-section {
2050
+ position: relative;
2051
+ margin: 0 20px 20px;
2052
+ padding: 30px;
2053
+ background: #fff;
2054
+ border: 1px solid #DDDDDD;
2055
+ line-height: 2;
2056
+ }
2057
+
2058
+ #cff-admin-about .cff-admin-about-section h1,#cff-admin-about .cff-admin-about-section h2,#cff-admin-about .cff-admin-about-section h3,#cff-admin-about .cff-admin-about-section h4,#cff-admin-about .cff-admin-about-section h5 {
2059
+ margin-top: 0;
2060
+ padding-top: 0;
2061
+ line-height: 1.6
2062
+ }
2063
+
2064
+ #cff-admin-about .cff-admin-about-section h2 {
2065
+ font-size: 24px
2066
+ }
2067
+
2068
+ #cff-admin-about .cff-admin-about-section h3 {
2069
+ font-size: 18px;
2070
+ margin-bottom: 30px;
2071
+ color: #23282C
2072
+ }
2073
+
2074
+ #cff-admin-about .cff-admin-about-section ul,#cff-admin-about .cff-admin-about-section p {
2075
+ font-size: 16px
2076
+ }
2077
+
2078
+ #cff-admin-about .cff-admin-about-section p {
2079
+ margin-bottom: 20px
2080
+ }
2081
+
2082
+ #cff-admin-about .cff-admin-about-section p.bigger {
2083
+ font-size: 18px
2084
+ }
2085
+
2086
+ #cff-admin-about .cff-admin-about-section p.smaller {
2087
+ font-size: 14px
2088
+ }
2089
+
2090
+ #cff-admin-about .cff-admin-about-section p:last-child {
2091
+ margin-bottom: 0
2092
+ }
2093
+
2094
+ #cff-admin-about .cff-admin-about-section hr {
2095
+ margin: 30px 0
2096
+ }
2097
+
2098
+ #cff-admin-about .cff-admin-about-section figure {
2099
+ margin: 0
2100
+ }
2101
+
2102
+ #cff-admin-about .cff-admin-about-section figure img {
2103
+ width: 100%
2104
+ }
2105
+
2106
+ #cff-admin-about .cff-admin-about-section figure figcaption {
2107
+ font-size: 13px;
2108
+ color: #888888;
2109
+ margin-top: -10px;
2110
+ text-align: center;
2111
+ line-height: initial
2112
+ }
2113
+
2114
+ #cff-admin-about .cff-admin-about-section .cff-admin-column-40 {
2115
+ padding-left: 15px
2116
+ }
2117
+
2118
+ @media (max-width: 767px) {
2119
+ #cff-admin-about .cff-admin-about-section .cff-admin-column-40 {
2120
+ width:100%;
2121
+ padding-left: 0;
2122
+ padding-top: 20px
2123
+ }
2124
+ }
2125
+
2126
+ #cff-admin-about .cff-admin-about-section .cff-admin-column-60 {
2127
+ padding-right: 15px
2128
+ }
2129
+ #cff-admin-about .cff-admin-about-section .cff-admin-about-text{
2130
+ padding-right: 400px;
2131
+ }
2132
+ #cff-admin-about .cff-admin-about-section .cff-admin-about-image{
2133
+ position: absolute;
2134
+ width: 340px;
2135
+ top: 20px;
2136
+ right: 20px;
2137
+ }
2138
+
2139
+ @media (max-width: 767px) {
2140
+ #cff-admin-about .cff-admin-about-section .cff-admin-column-60,
2141
+ #cff-admin-about .cff-admin-about-section .cff-admin-about-text,
2142
+ #cff-admin-about .cff-admin-about-section .cff-admin-about-image {
2143
+ position: relative;
2144
+ width:100%;
2145
+ padding-right: 0
2146
+ }
2147
+ }
2148
+
2149
+ #cff-admin-about .cff-admin-about-section ul.list-plain {
2150
+ margin-top: 0;
2151
+ margin-bottom: 0
2152
+ }
2153
+
2154
+ #cff-admin-about .cff-admin-about-section ul.list-plain li {
2155
+ margin-bottom: 0
2156
+ }
2157
+
2158
+ #cff-admin-about .cff-admin-about-section ul.list-features li .fa {
2159
+ color: #2a9b39;
2160
+ margin: 0 8px 0 0
2161
+ }
2162
+
2163
+ #cff-admin-about .cff-admin-about-section .fa-star {
2164
+ color: gold
2165
+ }
2166
+
2167
+ #cff-admin-about .cff-admin-about-section .no-margin {
2168
+ margin: 0 !important
2169
+ }
2170
+
2171
+ #cff-admin-about .cff-admin-about-section .no-padding {
2172
+ padding: 0 !important
2173
+ }
2174
+
2175
+ #cff-admin-about .cff-admin-about-section .centered {
2176
+ text-align: center !important
2177
+ }
2178
+
2179
+ #cff-admin-about .cff-admin-about-section-first-form {
2180
+ display: flex
2181
+ }
2182
+
2183
+ @media (max-width: 767px) {
2184
+ #cff-admin-about .cff-admin-about-section-first-form {
2185
+ display:block !important
2186
+ }
2187
+ }
2188
+
2189
+ #cff-admin-about .cff-admin-about-section-first-form .cff-admin-about-section-first-form-text {
2190
+ flex: 1;
2191
+ padding-right: 30px
2192
+ }
2193
+
2194
+ @media (max-width: 767px) {
2195
+ #cff-admin-about .cff-admin-about-section-first-form .cff-admin-about-section-first-form-text {
2196
+ flex:none
2197
+ }
2198
+ }
2199
+
2200
+ #cff-admin-about .cff-admin-about-section-first-form .cff-admin-about-section-first-form-video iframe {
2201
+ border: 1px solid #DDDDDD
2202
+ }
2203
+
2204
+ @media (max-width: 767px) {
2205
+ #cff-admin-about .cff-admin-about-section-first-form .cff-admin-about-section-first-form-video {
2206
+ padding-top:20px
2207
+ }
2208
+ }
2209
+
2210
+ #cff-admin-about .cff-admin-about-section-hero {
2211
+ padding: 0
2212
+ }
2213
+
2214
+ #cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-main,#cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-extra {
2215
+ padding: 30px
2216
+ }
2217
+
2218
+ @media (max-width: 767px) {
2219
+ #cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-extra .cff-admin-column-50 {
2220
+ float:none;
2221
+ width: 100%
2222
+ }
2223
+ }
2224
+
2225
+ #cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-main {
2226
+ background-color: #FAFAFA;
2227
+ border-bottom: 1px solid #DDDDDD
2228
+ }
2229
+
2230
+ #cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-main.no-border {
2231
+ border-bottom: 0
2232
+ }
2233
+
2234
+ #cff-admin-about .cff-admin-about-section-hero .cff-admin-about-section-hero-main p {
2235
+ color: #666
2236
+ }
2237
+
2238
+ #cff-admin-about .cff-admin-about-section-hero h3.call-to-action {
2239
+ margin-bottom: -10px
2240
+ }
2241
+
2242
+ #cff-admin-about .cff-admin-about-section-hero span.price-20-off {
2243
+ color: #6AB255
2244
+ }
2245
+
2246
+ #cff-admin-about .cff-admin-about-section-squashed {
2247
+ margin-bottom: 0
2248
+ }
2249
+
2250
+ #cff-admin-about .cff-admin-about-section-squashed:not(:last-of-type) {
2251
+ border-bottom: 0
2252
+ }
2253
+
2254
+ #cff-admin-about .cff-admin-about-section-post h2 {
2255
+ margin-bottom: -10px
2256
+ }
2257
+
2258
+ #cff-admin-about .cff-admin-about-section-post h3 {
2259
+ margin-bottom: 15px
2260
+ }
2261
+
2262
+ #cff-admin-about .cff-admin-about-section-post p:last-of-type {
2263
+ margin-bottom: 30px
2264
+ }
2265
+
2266
+ #cff-admin-about .cff-admin-about-section-post .cff-admin-column-20 {
2267
+ padding-right: 20px;
2268
+ width: auto
2269
+ }
2270
+
2271
+ #cff-admin-about .cff-admin-about-section-post .cff-admin-column-20 img {
2272
+ width: 270px
2273
+ }
2274
+
2275
+ @media (max-width: 767px) {
2276
+ #cff-admin-about .cff-admin-about-section-post .cff-admin-column-20 {
2277
+ width:20%
2278
+ }
2279
+
2280
+ #cff-admin-about .cff-admin-about-section-post .cff-admin-column-20 img {
2281
+ width: auto;
2282
+ max-width: 100%
2283
+ }
2284
+ }
2285
+
2286
+ #cff-admin-about .cff-admin-about-section-post .cff-admin-column-80 {
2287
+ padding-left: 20px;
2288
+ width: calc(100% - 20px - 270px)
2289
+ }
2290
+
2291
+ @media (max-width: 767px) {
2292
+ #cff-admin-about .cff-admin-about-section-post .cff-admin-column-80 {
2293
+ width:80%
2294
+ }
2295
+ }
2296
+
2297
+ #cff-admin-about .cff-admin-about-section-post .cff-admin-about-section-post-link {
2298
+ padding: 10px 15px;
2299
+ background-color: #DF7739;
2300
+ color: #fff;
2301
+ border-radius: 3px;
2302
+ text-decoration: none;
2303
+ margin-top: 15px;
2304
+ font-size: 14px
2305
+ }
2306
+
2307
+ #cff-admin-about .cff-admin-about-section-post .cff-admin-about-section-post-link:hover {
2308
+ background-color: #B85A1B
2309
+ }
2310
+
2311
+ #cff-admin-about .cff-admin-about-section-post .cff-admin-about-section-post-link .fa {
2312
+ color: #EDBA9E;
2313
+ vertical-align: middle;
2314
+ margin-left: 8px
2315
+ }
2316
+
2317
+ #cff-admin-about .cff-admin-about-section-table table {
2318
+ border-collapse: collapse
2319
+ }
2320
+
2321
+ #cff-admin-about .cff-admin-about-section-table table tr td {
2322
+ border-bottom: 1px solid #DDDDDD;
2323
+ border-right: 1px solid #DDDDDD;
2324
+ padding: 30px;
2325
+ vertical-align: top
2326
+ }
2327
+
2328
+ #cff-admin-about .cff-admin-about-section-table table tr td:last-of-type {
2329
+ border-right: 0
2330
+ }
2331
+
2332
+ #cff-admin-about .cff-admin-about-section-table table tr:last-child td {
2333
+ border-bottom: none
2334
+ }
2335
+
2336
+ #cff-admin-about .cff-admin-about-section-table table p {
2337
+ background-repeat: no-repeat;
2338
+ background-size: 15px auto;
2339
+ background-position: 0 6px;
2340
+ margin: 0
2341
+ }
2342
+
2343
+ #cff-admin-about .cff-admin-about-section-table table p.features-full {
2344
+ padding-left: 30px;
2345
+ background-image: url(../img/about/icon-full.svg)
2346
+ }
2347
+
2348
+ #cff-admin-about .cff-admin-about-section-table table p.features-none {
2349
+ padding-left: 30px;
2350
+ background-image: url(../img/about/icon-none.svg)
2351
+ }
2352
+
2353
+ #cff-admin-about .cff-admin-about-section-table table p.features-partial {
2354
+ padding-left: 30px;
2355
+ background-position: -3px 0;
2356
+ background-size: 23px auto;
2357
+ background-image: url(../img/about/icon-partial.svg)
2358
+ }
2359
+
2360
+ #cff-admin-about .cff-admin-about-section-table .cff-admin-about-section-hero-main {
2361
+ padding: 0
2362
+ }
2363
+
2364
+ #cff-admin-about .cff-admin-about-section-table .cff-admin-about-section-hero-main h3 {
2365
+ padding: 30px 30px 30px 60px
2366
+ }
2367
+
2368
+ #cff-admin-about .cff-admin-about-section-table .cff-admin-about-section-hero-main .cff-admin-column-33:first-child h3 {
2369
+ padding: 30px
2370
+ }
2371
+
2372
+ #cff-admin-about #cff-admin-addons {
2373
+ padding: 0 30px
2374
+ }
2375
+
2376
+ #cff-admin-about #cff-admin-addons .addon-container {
2377
+ padding: 0 10px
2378
+ }
2379
+
2380
+ #cff-admin-about #cff-admin-addons .addon-item .details {
2381
+ padding: 20px
2382
+ }
2383
+
2384
+ #cff-admin-about #cff-admin-addons .addon-item .action-button .button {
2385
+ display: inline-block;
2386
+ text-decoration: none;
2387
+ font-size: 13px;
2388
+ line-height: 26px;
2389
+ height: 28px;
2390
+ margin: 0;
2391
+ padding: 0 10px 1px;
2392
+ cursor: pointer;
2393
+ -webkit-appearance: none;
2394
+ border-radius: 3px;
2395
+ border: 1px solid #cccccc;
2396
+ background: #f7f7f7;
2397
+ box-shadow: 0 1px 0 #cccccc;
2398
+ font-weight: normal
2399
+ }
2400
+
2401
+ #cff-admin-about #cff-admin-addons .addon-item .action-button .button:hover,#cff-admin-about #cff-admin-addons .addon-item .action-button .button:focus {
2402
+ background: #fafafa;
2403
+ border-color: #999;
2404
+ color: #23282d
2405
+ }
2406
+
2407
+ #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-primary {
2408
+ background: #0085ba;
2409
+ border-color: #0073aa #006799 #006799;
2410
+ box-shadow: 0 1px 0 #006799;
2411
+ color: #fff;
2412
+ text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799
2413
+ }
2414
+
2415
+ #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-primary:hover,#cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-primary:focus {
2416
+ background: #008ec2;
2417
+ border-color: #006799;
2418
+ color: #fff
2419
+ }
2420
+
2421
+ #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-primary .fa-spinner {
2422
+ color: #fff
2423
+ }
2424
+
2425
+ #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-secondary {
2426
+ color: #555;
2427
+ border-color: #cccccc;
2428
+ background: #f7f7f7;
2429
+ box-shadow: 0 1px 0 #cccccc
2430
+ }
2431
+
2432
+ #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-secondary:hover,#cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-secondary:focus {
2433
+ background: #fafafa;
2434
+ border-color: #999;
2435
+ color: #23282d
2436
+ }
2437
+
2438
+ #cff-admin-about #cff-admin-addons .addon-item .action-button .button.disabled {
2439
+ cursor: default
2440
+ }
2441
+
2442
+ /* AW columns */
2443
+ .cff-admin-columns>div[class*="-column-"] {
2444
+ float: left
2445
+ }
2446
+
2447
+ .cff-admin-columns .cff-admin-column-20 {
2448
+ width: 20%
2449
+ }
2450
+
2451
+ .cff-admin-columns .cff-admin-column-33 {
2452
+ width: 33.33333%
2453
+ }
2454
+
2455
+ .cff-admin-columns .cff-admin-column-40 {
2456
+ width: 40%
2457
+ }
2458
+
2459
+ .cff-admin-columns .cff-admin-column-50 {
2460
+ width: 50%
2461
+ }
2462
+
2463
+ .cff-admin-columns .cff-admin-column-60 {
2464
+ width: 60%
2465
+ }
2466
+
2467
+ .cff-admin-columns .cff-admin-column-80 {
2468
+ width: 80%
2469
+ }
2470
+
2471
+ .cff-admin-columns .cff-admin-column-last {
2472
+ float: right !important
2473
+ }
2474
+
2475
+ .cff-admin-columns:after {
2476
+ content: "";
2477
+ display: table;
2478
+ clear: both
2479
+ }
2480
+
2481
+ /* AW Addons */
2482
+ #cff-admin-addons h3 {
2483
+ padding: 10px 10px 0 10px;
2484
+ clear: left;
2485
+ }
2486
+ #cff-admin-addons *,#cff-admin-addons *::before,#cff-admin-addons *::after {
2487
+ -webkit-box-sizing: border-box;
2488
+ -moz-box-sizing: border-box;
2489
+ box-sizing: border-box
2490
+ }
2491
+
2492
+ #cff-admin-addons .addons-container {
2493
+ margin-left: -20px;
2494
+ margin-right: -20px
2495
+ }
2496
+
2497
+ #cff-admin-addons .unlock-msg {
2498
+ padding: 0 20px;
2499
+ margin-top: -20px;
2500
+ clear: both
2501
+ }
2502
+
2503
+ #cff-admin-addons #cff-admin-addons-search {
2504
+ background-color: #fff;
2505
+ border: 1px solid #ddd;
2506
+ border-radius: 3px;
2507
+ box-shadow: none;
2508
+ color: #333;
2509
+ vertical-align: middle;
2510
+ padding: 7px 12px;
2511
+ margin: -3px 10px 0 0;
2512
+ width: 200px;
2513
+ min-height: 35px;
2514
+ float: right
2515
+ }
2516
+
2517
+ #cff-admin-addons #cff-admin-addons-search:focus {
2518
+ border-color: #bbb
2519
+ }
2520
+
2521
+ #cff-admin-addons .addon-container {
2522
+ padding: 0 20px;
2523
+ float: left;
2524
+ width: 33.333333%;
2525
+ margin-bottom: 20px
2526
+ }
2527
+
2528
+ @media (max-width: 1249px) {
2529
+ #cff-admin-addons .addon-container {
2530
+ width:50%
2531
+ }
2532
+ }
2533
+
2534
+ @media (max-width: 767px) {
2535
+ #cff-admin-addons .addon-container {
2536
+ width:100%;
2537
+ margin-bottom: 20px
2538
+ }
2539
+ }
2540
+
2541
+ #cff-admin-addons h4 {
2542
+ font-size: 17px;
2543
+ font-weight: 700
2544
+ }
2545
+
2546
+ #cff-admin-addons .addon-item {
2547
+ background-color: #fff;
2548
+ border: 1px solid #ddd;
2549
+ border-radius: 3px;
2550
+ margin: 0
2551
+ }
2552
+
2553
+ @media (max-width: 767px) {
2554
+ #cff-admin-addons .addon-item {
2555
+ margin:0 0
2556
+ }
2557
+ }
2558
+
2559
+ #cff-admin-addons .addon-item img {
2560
+ border: 1px solid #eee;
2561
+ float: left;
2562
+ max-width: 75px
2563
+ }
2564
+
2565
+ #cff-admin-addons .addon-item h5 {
2566
+ margin: 0 0 10px 100px;
2567
+ font-size: 16px
2568
+ }
2569
+
2570
+ #cff-admin-addons .addon-item p {
2571
+ margin: 0 0 0 100px
2572
+ }
2573
+
2574
+ #cff-admin-addons .addon-item .details {
2575
+ padding: 30px 20px
2576
+ }
2577
+
2578
+ #cff-admin-addons .addon-item .actions {
2579
+ background-color: #f7f7f7;
2580
+ border-top: 1px solid #ddd;
2581
+ padding: 20px;
2582
+ position: relative
2583
+ }
2584
+
2585
+ #cff-admin-addons .addon-item .actions .msg {
2586
+ background-color: #f7f7f7;
2587
+ position: absolute;
2588
+ text-align: center;
2589
+ font-weight: 600;
2590
+ top: 0;
2591
+ left: 0;
2592
+ height: 100%;
2593
+ width: 100%;
2594
+ z-index: 99;
2595
+ padding: 20px;
2596
+ display: -webkit-box;
2597
+ display: -moz-box;
2598
+ display: -ms-flexbox;
2599
+ display: -webkit-flex;
2600
+ display: flex;
2601
+ -webkit-align-items: center;
2602
+ -ms-align-items: center;
2603
+ align-items: center;
2604
+ justify-content: center
2605
+ }
2606
+
2607
+ #cff-admin-addons .addon-item .actions .msg.success {
2608
+ color: #2a9b39
2609
+ }
2610
+
2611
+ #cff-admin-addons .addon-item .actions .msg.error {
2612
+ color: red
2613
+ }
2614
+
2615
+ #cff-admin-addons .addon-item .status {
2616
+ float: left;
2617
+ padding-top: 8px
2618
+ }
2619
+
2620
+ #cff-admin-addons .addon-item .status .status-inactive {
2621
+ color: red
2622
+ }
2623
+
2624
+ #cff-admin-addons .addon-item .status .status-download {
2625
+ color: #666
2626
+ }
2627
+
2628
+ #cff-admin-addons .addon-item .status .status-active {
2629
+ color: #2a9b39
2630
+ }
2631
+
2632
+ #cff-admin-addons .addon-item .upgrade-button {
2633
+ text-align: center
2634
+ }
2635
+
2636
+ #cff-admin-addons .addon-item .upgrade-button a {
2637
+ font-weight: 600;
2638
+ width: 140px;
2639
+ text-align: center;
2640
+ padding: 8px 5px
2641
+ }
2642
+
2643
+ #cff-admin-addons .addon-item .action-button {
2644
+ float: right
2645
+ }
2646
+
2647
+ #cff-admin-addons .addon-item .action-button button {
2648
+ background: none;
2649
+ border: 1px solid #ddd;
2650
+ border-radius: 3px;
2651
+ box-shadow: none;
2652
+ cursor: pointer;
2653
+ font-weight: 600;
2654
+ width: 140px;
2655
+ text-align: center;
2656
+ padding: 8px 5px
2657
+ }
2658
+
2659
+ #cff-admin-addons .addon-item .action-button button:hover,#cff-admin-addons .addon-item .action-button button.loading {
2660
+ background-color: #e9e9e9
2661
+ }
2662
+
2663
+ #cff-admin-addons .addon-item .action-button button .fa {
2664
+ margin-right: 8px
2665
+ }
2666
+
2667
+ #cff-admin-addons .addon-item .action-button button .fa.fa-spinner {
2668
+ margin-right: 0
2669
+ }
2670
+
2671
+ #cff-admin-addons .addon-item .action-button button.status-active .fa {
2672
+ color: #2a9b39
2673
+ }
2674
+
2675
+ #cff-admin-addons .addon-item .action-button button.status-inactive .fa {
2676
+ color: red
2677
+ }
2678
+
2679
+ #cff-admin-addons .addon-item .action-button button.status-download .fa {
2680
+ color: #999
2681
+ }
2682
+
2683
+ #cff-admin-addons .addon-item .action-button button.disabled {
2684
+ cursor: default
2685
+ }
2686
+
2687
+ #cff-admin-addons .addon-item .action-button button.loading .fa {
2688
+ color: #666
2689
+ }
2690
+
2691
+ /* Tabs */
2692
+ .cff-admin-tabs {
2693
+ background-color: #fff;
2694
+ margin: 0 0 20px 0;
2695
+ padding: 0 20px;
2696
+ list-style: none;
2697
+ overflow: auto;
2698
+ font-size: 14px
2699
+ }
2700
+
2701
+ .cff-admin-tabs li {
2702
+ margin: 0 30px 0 0;
2703
+ padding: 0;
2704
+ float: left
2705
+ }
2706
+
2707
+ .cff-admin-tabs li:last-of-type {
2708
+ margin: 0
2709
+ }
2710
+
2711
+ .cff-admin-tabs li a {
2712
+ color: #666;
2713
+ display: block;
2714
+ padding: 20px 0 18px 0;
2715
+ text-decoration: none;
2716
+ border-bottom: 2px solid #fff;
2717
+ box-shadow: none
2718
+ }
2719
+
2720
+ .cff-admin-tabs li a:hover {
2721
+ border-color: #999
2722
+ }
2723
+
2724
+ .cff-admin-tabs li a.active {
2725
+ border-color: #e27730
2726
+ }
2727
+
2728
+ .cff-admin-tabs li a:focus {
2729
+ box-shadow: none
2730
+ }
2731
+
2732
+ /* Clear */
2733
+ .cff-clear:before {
2734
+ content: " ";
2735
+ display: table
2736
+ }
2737
+
2738
+ .cff-clear:after {
2739
+ clear: both;
2740
+ content: " ";
2741
+ display: table
2742
+ }
2743
+
2744
+ /* Visual header settings */
2745
+ .cff-header-options{
2746
+ width: auto;
2747
+ max-width: 500px;
2748
+ padding: 10px 15px;
2749
+ margin: 10px 0;
2750
+ background: #f9f9f9;
2751
+ background: rgba(255,255,255,0.8);
2752
+ font-size: 13px;
2753
+
2754
+ -moz-border-radius: 8px;
2755
+ -webkit-border-radius: 8px;
2756
+ border-radius: 8px;
2757
+ }
2758
+
2759
+ /* Social Wall landing page */
2760
+ #cff-admin.sw-landing-page{
2761
+ padding: 20px 0;
2762
+ }
2763
+ #cff-admin .cff-sw-icons{
2764
+ width: 100%;
2765
+ text-align: center;
2766
+ }
2767
+ #cff-admin .cff-sw-icons span{
2768
+ display: inline-block;
2769
+ width: 32px;
2770
+ margin: 0 7px;
2771
+ position: relative;
2772
+ top: -2px;
2773
+ }
2774
+ #cff-admin .cff-sw-icons .cff-sb-plus{
2775
+ width: 12px;
2776
+ height: 12px;
2777
+ position: relative;
2778
+ top: -12px;
2779
+ opacity: 0.9;
2780
+ }
2781
+ #cff-admin.sw-landing-page h1,
2782
+ #cff-admin.sw-landing-page h2{
2783
+ width: 100%;
2784
+ text-align: center;
2785
+ }
2786
+ #cff-admin.sw-landing-page h1{
2787
+ font-size: 44px;
2788
+ margin: 20px 0 0 0;
2789
+ line-height: 1.3;
2790
+ }
2791
+ #cff-admin.sw-landing-page h2{
2792
+ font-size: 30px;
2793
+ font-weight: 100;
2794
+ line-height: 1.2;
2795
+ margin: 5px 0 20px 0;
2796
+ }
2797
+ #cff-admin .cff-sw-info{
2798
+ width: 95%;
2799
+ max-width: 1400px;
2800
+ margin: 0 auto;
2801
+ padding: 50px 10px;
2802
+ clear: both;
2803
+ overflow: hidden;
2804
+ box-sizing: border-box;
2805
+ }
2806
+ #cff-admin .cff-sw-features{
2807
+ float: left;
2808
+ width: 40%;
2809
+ margin-right: 5%;
2810
+ padding: 20px 0 0 0;
2811
+ }
2812
+ #cff-admin .cff-sw-screenshot{
2813
+ position: relative;
2814
+ width: 55%;
2815
+ float: left;
2816
+ box-sizing: border-box;
2817
+ border: 5px solid #fff;
2818
+ box-shadow: 0 0 20px 0 rgba(0,0,0,0.05);
2819
+ }
2820
+ #cff-admin .cff-sw-features p{
2821
+ margin: 35px 0;
2822
+ padding: 0;
2823
+ font-size: 15px;
2824
+ }
2825
+ #cff-admin .cff-sw-features p:first-child{
2826
+ margin-top: 0;
2827
+ }
2828
+ #cff-admin .cff-sw-features span{
2829
+ display: block;
2830
+ font-size: 20px;
2831
+ font-weight: bold;
2832
+ }
2833
+ #cff-admin.sw-landing-page .cta {
2834
+ margin: 20px 0 0 5px;
2835
+ padding: 8px 40px 10px 40px;
2836
+ font-size: 20px;
2837
+ }
2838
+ #cff-admin .cff-sw-screenshot img{
2839
+ width: 100%;
2840
+ display: block;
2841
+ }
2842
+ #cff-admin .cff-sw-screenshot .cta{
2843
+ position: absolute;
2844
+ top: 50%;
2845
+ left: 50%;
2846
+ margin-top: -32px;
2847
+ margin-left: -80px;
2848
+ padding: 15px 30px 17px 30px;
2849
+ color: #333;
2850
+ text-decoration: none;
2851
+ background: rgba(255,255,255,0.95);
2852
+ border-radius: 3px;
2853
+ /*border: 2px solid rgba(0,0,0,0.1);*/
2854
+ box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
2855
+ }
2856
+ #cff-admin .cff-sw-screenshot:hover .cta,
2857
+ #cff-admin .cff-sw-screenshot:focus .cta{
2858
+ background: #e34717;
2859
+ color: #fff;
2860
+ box-shadow: 0;
2861
+ }
2862
+ #cff-admin .cff-sw-footer-cta{
2863
+ width: 100%;
2864
+ text-align: center;
2865
+ }
2866
+ #cff-admin .cff-sw-footer-cta a{
2867
+ font-size: 22px;
2868
+ display: inline-block;
2869
+ text-decoration: none;
2870
+ line-height: 25px;
2871
+ font-weight: normal;
2872
+ padding: 10px 0 30px 0;
2873
+ }
2874
+ #cff-admin .cff-sw-footer-cta span{
2875
+ width: 30px;
2876
+ height: 30px;
2877
+ display: inline-block;
2878
+ margin: 0 10px 0 0;
2879
+ position: relative;
2880
+ top: 4px;
2881
+ }
2882
+ #cff-admin .cff-sw-footer-cta span .emoji{
2883
+ width: 30px !important;
2884
+ height: 30px !important;
2885
+ }
2886
+
2887
+ @media all and (max-width: 1500px){
2888
+ #cff-admin .cff-sw-screenshot{
2889
+ width: 55%;
2890
+ float: left;
2891
+ height: 500px;
2892
+ background: url('../admin/assets/img/sw-screenshot.png') no-repeat center center;
2893
+ background-size: cover;
2894
+ }
2895
+ #cff-admin .cff-sw-screenshot img{
2896
+ display: none;
2897
+ }
2898
+ }
2899
+ @media all and (max-width: 900px){
2900
+ #cff-admin .cff-sw-info{
2901
+ padding: 20px 0;
2902
+ }
2903
+ #cff-admin .cff-sw-features{
2904
+ width: 100%;
2905
+ padding: 10px 0;
2906
+ margin: 0;
2907
+ }
2908
+ #cff-admin .cff-sw-screenshot{
2909
+ width: 100%;
2910
+ padding: 0;
2911
+ height: auto;
2912
+ background: none;
2913
+ }
2914
+ #cff-admin .cff-sw-screenshot img{
2915
+ display: block;
2916
+ }
2917
+ #cff-admin .cff-sw-features .cta {
2918
+ width: 100%;
2919
+ box-sizing: border-box;
2920
+ text-align: center;
2921
+ margin: 20px 0;
2922
+ }
2923
+ }
2924
+
2925
+ /* Alert bubble */
2926
+ #cff-admin .nav-tab{
2927
+ position: relative;
2928
+ }
2929
+ #cff-admin .cff-alert-bubble{
2930
+ position: absolute;
2931
+ top: -9px;
2932
+ right: -10px;
2933
+
2934
+ display: inline-block;
2935
+ vertical-align: top;
2936
+ box-sizing: border-box;
2937
+ margin: 0;
2938
+ padding: 0 7px;
2939
+ height: 18px;
2940
+
2941
+ border-radius: 9px;
2942
+ background-color: #ca4a1f;
2943
+ color: #fff;
2944
+ font-size: 11px;
2945
+ line-height: 1.6;
2946
+ text-align: center;
2947
+ z-index: 26;
2948
+ }
2949
+
2950
+ /* Menu Pro link */
2951
+ #adminmenu .wp-submenu .cff_get_pro_highlight{
2952
+ color: #f37036;
2953
+ font-weight: 600;
2954
+ /*background: rgba(0,0,0,0.5);*/
2955
+ }
2956
+ #adminmenu .wp-submenu .cff_get_pro_highlight:hover,
2957
+ #adminmenu .wp-submenu .cff_get_pro_highlight:active{
2958
+ color: #f37036;
2959
+ /*background: rgba(0,0,0,0.65);*/
2960
+ }
2961
+
2962
+ /* Install another plugin modal */
2963
+ .sb_cross_install_modal {
2964
+ position: fixed;
2965
+ z-index: 999;
2966
+ width: 100%;
2967
+ top: 0;
2968
+ right: 0;
2969
+ bottom: 0;
2970
+ left: 0;
2971
+ background: rgba(0, 0, 0, 0.3);
2972
+ }
2973
+ .sb_cross_install_inner {
2974
+ position: absolute;
2975
+ top: 140px;
2976
+ left: 50%;
2977
+ width: 480px;
2978
+ margin: 0 0 0 -245px;
2979
+ padding: 35px;
2980
+ background: #fff;
2981
+ text-align: left;
2982
+
2983
+ -webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.2);
2984
+ box-shadow: 0 1px 20px rgba(0, 0, 0, 0.2);
2985
+
2986
+ -moz-border-radius: 3px;
2987
+ -webkit-border-radius: 3px;
2988
+ border-radius: 3px;
2989
+ }
2990
+ .sb_cross_install_modal #cff-admin-about #cff-admin-addons .addon-container,
2991
+ .sb_cross_install_modal #cff-admin-about #cff-admin-addons .addons-container{
2992
+ width: 100%;
2993
+ margin: 0;
2994
+ padding: 0;
2995
+ min-height: 198px;
2996
+ }
2997
+ .sb_cross_install_modal #cff-admin-addons .addon-item .action-button button{
2998
+ background: #007cba;
2999
+ border: 0;
3000
+ }
3001
+ .sb_cross_install_modal #cff-admin-addons .addon-item .action-button button:hover{
3002
+ background: #0071a1;
3003
+ }
3004
+ .sb_cross_install_modal #cff-admin-about #cff-admin-addons{
3005
+ padding: 0;
3006
+ }
3007
+ /* More social feeds page */
3008
+ #cff-admin-about #cff-admin-addons .addon-item .action-button .button.button-primary .fa-spinner {
3009
+ color: #333;
3010
+ }
3011
+ #cff-admin .cff_more_plugins h2{
3012
+ margin-top: 15px;
3013
+ }
3014
+ #cff-admin .cff_more_plugins #cff-admin-addons .addons-container{
3015
+ overflow: hidden;
3016
+ margin: 0;
3017
+ }
3018
+ #cff-admin .cff_more_plugins#cff-admin-about #cff-admin-addons{
3019
+ padding: 20px 0;
3020
+ }
3021
+ #cff-admin .cff-more-plugins-intro span{
3022
+ color: #e34f0e;
3023
+ }
3024
+ #cff-admin .cff_more_plugins h3{
3025
+ padding: 15px 0 0 0;
3026
+ }
3027
+ .sb_cross_install_modal .cff-loader{
3028
+ position: absolute;
3029
+ left: 50%;
3030
+ top: 50%;
3031
+ margin: -10px 0 0 -10px;
3032
+ }
3033
+
3034
+ /* oEmbeds */
3035
+ #cff-admin.cff-oembeds #header{
3036
+ border-bottom: 1px solid #ccc;
3037
+ padding-bottom: 15px;
3038
+ margin-bottom: 25px;
3039
+ }
3040
+ #cff-admin.cff-oembeds .cff_admin_btn{
3041
+ margin-top: 10px;
3042
+ }
3043
+ #cff-admin.cff-oembeds .cff-success{
3044
+ display: inline-block;
3045
+ clear: both;
3046
+ padding: 20px 30px;
3047
+ border-radius: 3px;
3048
+ }
3049
+ #cff-admin.cff-oembeds .cff-success a{
3050
+ margin-left: 5px;
3051
+ color: #e34f0e;
3052
+ }
3053
+ #cff-admin .cff-oembed-promo{
3054
+ margin: 30px 0 0 0;
3055
+ padding: 30px;
3056
+ border: 1px solid #ccc;
3057
+ border-radius: 3px;
3058
+ background: rgba(255,255,255,0.5);
3059
+ }
3060
+ #cff-admin .cff-oembed-promo h2{
3061
+ padding: 0 0 20px 0;
3062
+ margin: 0;
3063
+ font-size: 18px;
3064
+ line-height: 1.5;
3065
+ }
3066
+ #cff-admin .cff-oembed-promo .cff-reasons div{
3067
+ display: inline-block;
3068
+ margin-right: 15px;
3069
+ }
3070
+ #cff-admin .cff-oembed-promo .cff-reasons span{
3071
+ font-size: 15px;
3072
+ }
3073
+ #cff-admin .cff-oembed-promo svg{
3074
+ position: relative;
3075
+ top: 3px;
3076
+ margin: 0 8px 0 0;
3077
+ width: 16px;
3078
+ height: 16px;
3079
+ }
3080
+ #cff-admin .cff-oembed-promo .button{
3081
+ margin-top: 12px;
3082
+ font-size: 16px;
3083
+ padding: 5px 20px;
3084
+ height: auto;
3085
+ }
3086
+ #cff-admin .cff-oembed-promo p span{
3087
+ display: inline-block;
3088
+ padding-right: 10px;
3089
+ }
3090
+ #cff-admin .cff-oembed-promo .fa-check{
3091
+ width: 14px;
3092
+ height: 14px;
3093
+ margin-right: 5px;
3094
+ top: 2px;
3095
+ }
3096
+ #cff-admin .cff-oembed-promo .fa-check path{
3097
+ fill: #3fa03f;
3098
+ }
3099
+ #cff-admin .cff-oembed-desc{
3100
+ clear: both;
3101
+ overflow: hidden;
3102
+ max-width: 900px;
3103
+ }
3104
+ #cff-admin .cff-oembed-desc p{
3105
+ padding: 0 0 10px 0;
3106
+ margin: 0;
3107
+ }
3108
+ #cff-admin .cff-oembed-desc .cff-col{
3109
+ width: 45%;
3110
+ margin-right: 4%;
3111
+ float: left;
3112
+ }
3113
+ #cff-admin .cff-oembed-desc img{
3114
+ width: 51%;
3115
+ max-width: 457px;
3116
+ float: left;
3117
+ }
3118
+
3119
+ #cff-admin .cff-cols-4{
3120
+ max-width: 1100px;
3121
+ padding-top: 20px;
3122
+ }
3123
+ #cff-admin .cff-cols-4 .addon-container{
3124
+ width: 50%;
3125
+ }
3126
+ @media all and (max-width: 780px){
3127
+ #cff-admin .cff-cols-4 .addon-container{
3128
+ width: 100%;
3129
+ }
3130
+ }
3131
+
3132
+ /* GDPR Settings */
3133
+ #cff-admin .cff-list{
3134
+ list-style: inside disc;
3135
+ }
3136
+ #cff-admin .cff-box{
3137
+ float: left;
3138
+ clear: both;
3139
+ width: 96%;
3140
+ max-width: 900px;
3141
+
3142
+ padding: 10px 15px;
3143
+ margin: 10px 0;
3144
+ font-size: 13px;
3145
+ background: #f9f9f9;
3146
+ background: rgba(255,255,255,0.8);
3147
+
3148
+ -moz-border-radius: 8px;
3149
+ -webkit-border-radius: 8px;
3150
+ border-radius: 8px;
3151
+ }
3152
+ .gdpr_tooltip p{
3153
+ padding: 0 0 10px 0;
3154
+ }
3155
+ .gdpr_tooltip span{
3156
+ display: inline-block;
3157
+ margin: 0;
3158
+ font-weight: bold;
3159
+ font-size: 14px;
3160
+ }
3161
+ .gdpr_tooltip .cff-list{
3162
+ padding: 0 0 10px 0;
3163
+ }
3164
+ .gdpr_tooltip li{
3165
+ padding: 0;
3166
+ }
3167
+ .cff_gdpr_plugin_active .cff_active{
3168
+ display: inline-block;
3169
+ padding: 10px 20px 15px 20px;
3170
+ border-radius: 5px;
3171
+ background: #edf4f0;
3172
+ border: 1px solid #2c8649;
3173
+ color: #2c8649;
3174
+ margin: 8px 0 0 0;
3175
+ }
3176
+ .cff_gdpr_plugin_active svg{
3177
+ width: 16px;
3178
+ height: 16px;
3179
+ position: relative;
3180
+ top: 3px;
3181
+ margin-right: 2px;
3182
+ }
3183
+ .cff_gdpr_plugin_active path{
3184
+ fill: green;
3185
+ }
3186
+ .cff_gdpr_list,
3187
+ .cff_gdpr_yes,
3188
+ .cff_gdpr_no{
3189
+ display: none;
3190
+ }
3191
+ #cff-admin .cff_gdpr_error{
3192
+ padding: 10px 20px 15px 20px;
3193
+ border-radius: 5px;
3194
+ background: #F7E6E6;
3195
+ border: 1px solid #BA7B7B;
3196
+ color: #592626;
3197
+ }
3198
+ .cff_feeds_account_ctn{width: 100%; float: left;}
3199
+ .cff_feeds_account_ctn #cff_export_accounts{float: right;}
3200
+ /* Locator Summary */
3201
+ .cff-feed-locator-summary-wrap {
3202
+ max-width: 1100px;
3203
+ margin-bottom: 40px;
3204
+ }
3205
+ .cff-full-wrap {
3206
+ display: none;
3207
+ }
3208
+ .cff-locator-more {
3209
+ display: inline-block;
3210
+ margin: 0 0 0 1px;
3211
+ padding: 0 5px;
3212
+ border: 1px solid rgba(0,0,0,0.1);
3213
+ border-radius: 3px;
3214
+ line-height: 1.6;
3215
+ }
3216
+
3217
+ .cff_shortcode_visible .cff_locations_link {
3218
+ display: none;
3219
+ }
3220
+ .cff_locations_link{
3221
+ float: left;
3222
+ }
3223
+ .cff_locations_link a {
3224
+ font-weight: normal;
3225
+ text-decoration: none;
3226
+ }
3227
+ .cff_locations_link svg {
3228
+ width: 11px;
3229
+ position: relative;
3230
+ top: 1px;
3231
+ }
3232
+ #adminmenu a[href="admin.php?page=cff-support"],
3233
+ #adminmenu a[href="admin.php?page=cff-top"] {
3234
+ display: none;
3235
+ }
3236
+
3237
+ /*** CFF Header Notice ***/
3238
+ .cff-header-notice {
3239
+ background-color: #DDDDDD;
3240
+ text-align: center;
3241
+ position: relative;
3242
+ padding: 7px;
3243
+ margin-bottom: 0;
3244
+ opacity: 1;
3245
+ transition: all .3s ease-in-out;
3246
+ max-height: 100px;
3247
+ overflow: hidden;
3248
+ background: #0068A0;
3249
+ }
3250
+ .cff-header-notice span {
3251
+ font-size: 14px;
3252
+ line-height: 160%;
3253
+ font-weight: 300;
3254
+ color: #fff !important;
3255
+ font-weight: 400;
3256
+ }
3257
+ .cff-header-notice a {
3258
+ text-decoration: underline;
3259
+ font-weight: bold;
3260
+ color: #fff;
3261
+ }
3262
+ .cff-header-notice .cff-dismiss {
3263
+ position: absolute;
3264
+ top: 1px;
3265
+ right: 50px;
3266
+ border: none;
3267
+ padding: 5px;
3268
+ margin-top: 1px;
3269
+ background: 0 0;
3270
+ color: #72777c;
3271
+ cursor: pointer;
3272
+ }
3273
+
3274
+ .cff-header-notice {
3275
+ padding: 6px;
3276
+ }
3277
+
3278
+ @media (max-width: 769px) {
3279
+ .cff-header-notice .cff-dismiss {
3280
+ right: 10px;
3281
+ }
3282
+ .cff-header-notice {
3283
+ padding: 7px 45px 7px 15px;
3284
+ }
3285
+ }
3286
+
3287
+
3288
+ /*** CFF Admin Notices ***/
3289
+ .cff-admin-notices {
3290
+ padding: 16px 60px 20px 60px;
3291
+ background: #FFFFFF;
3292
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
3293
+ position: relative;
3294
+ box-sizing: border-box;
3295
+ }
3296
+ .cff-admin-notices:not(:last-child) {
3297
+ margin-bottom: 15px;
3298
+ }
3299
+ .sb-customizer-preview .cff-admin-notices:not(:last-child) {
3300
+ margin-bottom: 0px;
3301
+ }
3302
+ .cff-admin-notices.cff-license-expired-notice {
3303
+ border-top: 2px solid #D72C2C;
3304
+ }
3305
+ .cff-admin-notices.cff-license-renewed-notice {
3306
+ border-top: 2px solid #59AB46;
3307
+ }
3308
+ .cff-admin-notices .sb-notice-title,
3309
+ #cff-builder-app .cff-admin-notices .sb-notice-title,
3310
+ #cff-settings .cff-admin-notices .sb-notice-title {
3311
+ font-weight: 600;
3312
+ font-size: 18px;
3313
+ line-height: 25px;
3314
+ margin: 0px;
3315
+ letter-spacing: 0;
3316
+ }
3317
+ .cff-admin-notices.cff-license-expired-notice h3{
3318
+ color: #D72C2C;
3319
+ }
3320
+ .cff-admin-notices p {
3321
+ font-size: 14px;
3322
+ line-height: 22px;
3323
+ color: #434960;
3324
+ margin: 0;
3325
+ }
3326
+ .cff-admin-notices .sb-notice-icon {
3327
+ position: absolute;
3328
+ left: 22px;
3329
+ top: 18px;
3330
+ }
3331
+ .cff-admin-notices #sb-dismiss-notice {
3332
+ position: absolute;
3333
+ top: 7px;
3334
+ right: 7px;
3335
+ background: none;
3336
+ border: none;
3337
+ padding: 5px;
3338
+ cursor: pointer;
3339
+ }
3340
+ .cff-admin-notices #sb-dismiss-notice svg {
3341
+ width: 14px;
3342
+ height: 13px;
3343
+ }
3344
+ .cff-admin-notices #sb-dismiss-notice path{
3345
+ fill: #8C8F9A;
3346
+ }
3347
+ .cff-admin-notices .license-action-btns {
3348
+ margin-top: 16px;
3349
+ display: flex;
3350
+ }
3351
+ .cff-admin-notices .license-action-btns .cff-notice-btn {
3352
+ text-decoration: none;
3353
+ }
3354
+ .cff-admin-notices .license-action-btns .cff-notice-btn:not(:last-child) {
3355
+ margin-right: 8px;
3356
+ }
3357
+ .cff-admin-notices .license-action-btns .cff-notice-btn {
3358
+ font-size: 12px;
3359
+ line-height: 160%;
3360
+ padding: 6px 12px;
3361
+ }
3362
+ .cff-admin-notices .license-action-btns .cff-notice-btn .spinner-icon {
3363
+ display: none;
3364
+ }
3365
+ .cff-admin-notices .license-action-btns .cff-notice-btn svg {
3366
+ margin-right: 4px;
3367
+ transform: translate(0px, 2px);
3368
+ }
3369
+ .cff-admin-notices .license-action-btns .cff-notice-btn:active,
3370
+ .cff-admin-notices .license-action-btns .cff-notice-btn:focus {
3371
+ outline: none;
3372
+ box-shadow: none;
3373
+ }
3374
+ .cff-admin-notices .license-action-btns .cff-btn.cff-btn-blue {
3375
+ border: 1px solid #0068A0;
3376
+ }
3377
+ .cff-admin-notices .license-action-btns .cff-btn.cff-btn-blue:hover {
3378
+ border: 1px solid #0096CC;
3379
+ }
3380
+ .cff-admin-notices .license-action-btns .cff-btn.cff-btn-blue:active,
3381
+ .cff-admin-notices .license-action-btns .cff-btn.cff-btn-blue:focus {
3382
+ border: 1px solid #004D77;
3383
+ }
3384
+
3385
+ .cff-critical-error-notice {
3386
+ border-top: 2px solid #D72C2C;
3387
+ }
3388
+ .cff-critical-error-notice .sb-notice-title {
3389
+ color: #D72C2C;
3390
+ }
3391
+ .cff-critical-error-notice .button-primary {
3392
+ box-sizing: border-box;
3393
+ border-radius: 2px;
3394
+ display: inline-block;
3395
+ padding: 6px 12px;
3396
+ color: #141B38;
3397
+ font-weight: 600;
3398
+ padding: 6px 12px;
3399
+ font-size: 12px;
3400
+ line-height: 19px;
3401
+ cursor: pointer;
3402
+ transition: all 0.15s ease-in-out;
3403
+ text-decoration: none;
3404
+ border: 1px solid #0068A0;
3405
+ margin-right: 8px;
3406
+ min-height: auto;
3407
+ }
3408
+
3409
+ .cff-critical-error-notice .button-primary {
3410
+ background: #0068A0!important;
3411
+ color: #fff!important;
3412
+ }
3413
+ .cff-critical-error-notice .button-primary:hover{
3414
+ background: #0096CC!important;
3415
+ border: 1px solid #0096CC;
3416
+ color: #fff!important;
3417
+ }
3418
+ .cff-critical-error-notice .button-primary:focus,
3419
+ .cff-critical-error-notice .button-primary:active{
3420
+ background: #004D77!important;
3421
+ color: #004D77!important;
3422
+ border: 1px solid #0096CC;
3423
+ }
3424
+
3425
+ #cff-settings .cff-admin-notices.cff-critical-error-notice .sb-notice-title {
3426
+ margin-bottom: 10px;
3427
+ }
3428
+
3429
+ @media (max-width: 580px) {
3430
+ .cff-admin-notices {
3431
+ padding: 16px 20px 20px 60px;
3432
+ }
3433
+ }
3434
+
3435
+ .sb-fs-boss {
3436
+ position: fixed;
3437
+ height: 100vh;
3438
+ width: 100%;
3439
+ left: 0;
3440
+ top: 0;
3441
+ bottom: 0;
3442
+ right: 0;
3443
+ background: rgba(0,0,0,.4);
3444
+ z-index: 9989;
3445
+ }
3446
+ .cff-fb-center-boss {
3447
+ display: flex;
3448
+ justify-content: center;
3449
+ align-items: center;
3450
+ }
3451
+ .cff-fb-popup-inside {
3452
+ left: 80px;
3453
+ width: 880px;
3454
+ max-width: calc(100% - 200px);
3455
+ background: #fff;
3456
+ color: #141B38;
3457
+ position: relative;
3458
+ box-shadow: 0px 26.7377px 77.2886px rgb(0 0 0 / 11%), 0px 14.2952px 41.3222px rgb(0 0 0 / 9%), 0px 8.01379px 23.1649px rgb(0 0 0 / 8%), 0px 4.25607px 12.3027px rgb(0 0 0 / 6%), 0px 1.77104px 5.11942px rgb(0 0 0 / 4%);
3459
+ border-radius: 2px;
3460
+ overflow-y: auto;
3461
+ max-height: 80vh;
3462
+ }
3463
+ .cff-fb-popup-inside[data-step="redirect_1"]{
3464
+ width: 575px;
3465
+ height: 320px;
3466
+ display: flex;
3467
+ justify-content: center;
3468
+ align-items: center;
3469
+ }
3470
+ .cff-install-plugin-modal {
3471
+ max-width: 580px;
3472
+ }
3473
+ .cff-fb-popup-cls {
3474
+ height: 14px;
3475
+ width: 14px;
3476
+ position: absolute;
3477
+ cursor: pointer;
3478
+ right: 17px;
3479
+ top: 17px;
3480
+ z-index: 3;
3481
+ }
3482
+ .cff-install-plugin-body .cff-install-plugin-header {
3483
+ height: 106px;
3484
+ background: #F3F4F5;
3485
+ padding: 20px;
3486
+ display: flex;
3487
+ box-sizing: border-box;
3488
+ flex-wrap: wrap;
3489
+ align-items: center;
3490
+ }
3491
+ .cff-install-plugin-body .cff-install-plugin-content {
3492
+ padding: 20px 20px 32px 107px;
3493
+ }
3494
+ .cff-install-plugin-body .cff-install-plugin-header .sb-plugin-image {
3495
+ background-color: #fff;
3496
+ box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
3497
+ border-radius: 2px;
3498
+ padding: 15px;
3499
+ max-height: 66px;
3500
+ box-sizing: border-box;
3501
+ margin-right: 24px;
3502
+ }
3503
+ .cff-install-plugin-body .cff-install-plugin-header h3 {
3504
+ font-size: 18px !important;
3505
+ line-height: 25px !important;
3506
+ display: flex;
3507
+ align-items: center;
3508
+ margin: 0 0 4px 0;
3509
+ font-style: normal;
3510
+ font-weight: 600;
3511
+ }
3512
+ .cff-install-plugin-body .cff-install-plugin-header h3 span {
3513
+ color: #fff;
3514
+ background: #59AB46;
3515
+ border-radius: 2px;
3516
+ font-size: 10px;
3517
+ line-height: 16px;
3518
+ letter-spacing: 0.08em;
3519
+ text-transform: uppercase;
3520
+ padding: 0px 6px;
3521
+ margin-left: 10px;
3522
+ }
3523
+ .cff-install-plugin-body .cff-install-plugin-header p {
3524
+ display: flex;
3525
+ font-size: 12px;
3526
+ line-height: 18px;
3527
+ color: #434960;
3528
+ margin: 5px 0 0 0;
3529
+ }
3530
+ .cff-install-plugin-body .cff-install-plugin-header p .sb-author-logo {
3531
+ margin-right: 8px;
3532
+ }
3533
+ .cff-install-plugin-body .cff-install-plugin-content p {
3534
+ margin: 0px;
3535
+ font-size: 14px;
3536
+ line-height: 22px;
3537
+ color: #434960;
3538
+ padding-right: 20px;
3539
+ }
3540
+ .cff-install-plugin-body .cff-install-plugin-content .cff-install-plugin-btn {
3541
+ display: flex;
3542
+ align-items: center;
3543
+ justify-content: center;
3544
+ height: 38px;
3545
+ padding: 8px 20px;
3546
+ box-sizing: border-box;
3547
+ transition: all .15s ease-in-out;
3548
+ border-radius: 2px;
3549
+ width: 100%;
3550
+ margin-top: 28px;
3551
+ border: none;
3552
+ font-size: 14px;
3553
+ font-weight: 600;
3554
+ line-height: 160%;
3555
+ cursor: pointer;
3556
+ }
3557
+ .cff-btn-orange {
3558
+ background: #E34F0E!important;
3559
+ color: #fff!important;
3560
+ }
3561
+ .cff-btn-orange:hover {
3562
+ background: #F37036!important;
3563
+ color: #fff!important;
3564
+ }
3565
+ .cff-btn-orange:focus, .cff-btn-orange:active {
3566
+ background: #B8400B!important;
3567
+ color: #fff!important;
3568
+ }
3569
+ .cff-btn-blue{
3570
+ background: #0068A0!important;
3571
+ color: #fff!important;
3572
+ }
3573
+ .cff-btn-blue:hover{
3574
+ background: #0096CC!important;
3575
+ color: #fff!important;
3576
+ }
3577
+ .cff-btn-blue:focus,
3578
+ .cff-btn-blue:active{
3579
+ background: #004D77!important;
3580
+ color: #fff!important;
3581
+ }
3582
+ .cff-install-plugin-btn:disabled {
3583
+ color: #8C8F9A !important;
3584
+ background: #E8E8EB !important;
3585
+ cursor: not-allowed;
3586
+ }
3587
+ .cff-install-plugin-btn .cff-btn-spinner {
3588
+ height: 20px;
3589
+ margin-right: 8px;
3590
+ }
3591
+
3592
+ .cff-notice-alert {
3593
+ display: inline-block;
3594
+ position: absolute;
3595
+ vertical-align: top;
3596
+ box-sizing: border-box;
3597
+ margin: 1px 0 0 4px;
3598
+ padding: 0 5px;
3599
+ min-width: 18px;
3600
+ height: 18px;
3601
+ border-radius: 9px;
3602
+ background-color: #d63638;
3603
+ color: #fff;
3604
+ font-size: 11px;
3605
+ line-height: 1.6;
3606
+ text-align: center;
3607
+ z-index: 26;
3608
+ }
admin/assets/css/extensions.css CHANGED
@@ -1,727 +1,727 @@
1
- /*
2
- * Extensions CSS TABLE OF CONTENTS
3
- *
4
- * 1.0 - GLOBAL
5
- * 2.0 - HEADER
6
- * 3.0 - 3.0 - EXTENSIONS CONTAINER
7
- * 3.1 - SECTION HEADER
8
- * 3.2 - EXTENSIONS BOX
9
- * 3.3 - PLUGINS BOX
10
- * 4.0 - STICKY WIDGET
11
- * 5.0 - RESPONSIVENESS
12
- */
13
-
14
- /*** 1.0 - GLOBAL ***/
15
- .clearfix { display: inline-block; }
16
- /* start commented backslash hack \*/
17
- * html .clearfix { height: 1%; }
18
- .clearfix { display: block; }
19
- #cff-extensions {
20
- -webkit-font-smoothing: antialiased;
21
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
22
- }
23
- #wpcontent {
24
- padding-left: 0px;
25
- }
26
- #wpbody-content {
27
- padding-bottom: 40px;
28
- }
29
- .clearfix:after {
30
- visibility: hidden;
31
- display: block;
32
- font-size: 0;
33
- content: " ";
34
- clear: both;
35
- height: 0;
36
- }
37
- /*orange*/
38
- .sb-btn-orange{
39
- background: #E34F0E!important;
40
- color: #fff!important;
41
- }
42
- .sb-btn-orange:hover{
43
- background: #F37036!important;
44
- color: #fff!important;
45
- }
46
- .sb-btn-orange:focus,
47
- .sb-btn-orange:active{
48
- background: #B8400B!important;
49
- color: #fff!important;
50
- }
51
- .cff-fb-full-wrapper{
52
- padding: 0 53px;
53
- padding-top: 82px;
54
- }
55
- .cff-fb-fs {
56
- width: 100%;
57
- position: relative;
58
- float: left;
59
- box-sizing: border-box;
60
- }
61
-
62
- /*** 2.0 - HEADER ***/
63
- .cff-fb-create-ctn{
64
- margin-top: 90px;
65
- }
66
- .cff-fb-header{
67
- height: 64px;
68
- position: absolute;
69
- display: flex;
70
- flex-direction: row;
71
- justify-content: space-between;
72
- align-items: center;
73
- background: #fff;
74
- padding: 0px 52px;
75
- z-index: 2;
76
- }
77
- .cff-fb-header-left {
78
- display: flex;
79
- }
80
- .cff-fb-header-left .sb-social-wall-link-wrap {
81
- margin-left: 30px;
82
- }
83
- .sb-social-wall-link-wrap {
84
- display: flex;
85
- font-size: 14px;
86
- margin: 10px 0 10px 30px;
87
- }
88
- .sb-social-wall-link:first-child {
89
- padding-left: 0;
90
- border-right: 1px solid #ccc;
91
- color: #0068A0!important;
92
- line-height: 1;
93
- }
94
- .sb-social-wall-link {
95
- padding: 0 12px;
96
- border-right: 1px solid #ccc;
97
- color: #0068A0!important;
98
- line-height: 1;
99
- }
100
- .sb-social-wall-link a {
101
- text-decoration: none;
102
- }
103
- .sb-social-wall-link a:focus {
104
- outline: none;
105
- box-shadow: none;
106
- }
107
- .sb-social-wall-link:last-child {
108
- border-right: none;
109
- }
110
- .cff-fb-hd-logo{
111
- display: flex;
112
- vertical-align: middle;
113
- align-items: center;
114
- gap: 5px;
115
- }
116
- .cff-fb-hd-logo .sb-logo-letters-wrap {
117
- margin-bottom: 4px;
118
- }
119
- .cff-fb-hd-logo .breadcrumb-title{
120
- font-size: 14px;
121
- font-weight: 400;
122
- line-height: 22px;
123
- letter-spacing: 0em;
124
- margin-left: 4px;
125
- }
126
- .cff-fb-hd-logo .separator{
127
- margin: 0 5px 0 10px;
128
- }
129
- .cff-fb-hd-btn{
130
- height: 38px;
131
- cursor: pointer;
132
- display: flex;
133
- flex-direction: row;
134
- justify-content: center;
135
- align-items: center;
136
- padding: 0px 15px 0px 13px;
137
- font-weight: 600;
138
- font-size: 14px;
139
- color: #353A41;
140
- background: #F3F4F5;
141
- border-radius: 2px;
142
- border: 1px solid #DCDDE1;
143
- position: relative;
144
- text-decoration: none;
145
- transition: all 0.3s ease;
146
- box-sizing: border-box;
147
- }
148
- .cff-fb-hd-btn svg {
149
- margin-right: 10px;
150
- width: 16px;
151
- }
152
- .cff-fb-hd-btn:focus {
153
- outline: none;
154
- box-shadow: none;
155
- }
156
- .cff-fb-hd-btn:hover {
157
- color: inherit;
158
- background-color: #fff;
159
- }
160
- .cff-fb-hd-btn i{
161
- margin: 0px 5px;
162
- }
163
- .cff-fb-hd-btn[data-icon="left"]{
164
- padding-right: 20px!important;
165
- }
166
- .cff-fb-full-wrapper .section-header h1 {
167
- font-size: 32px;
168
- line-height: 40px;
169
- }
170
- /*** 3.0 - EXTENSIONS CONTAINER ***/
171
- .cff-extensions-container {
172
- max-width: 875px;
173
- position: relative;
174
- margin: auto;
175
- margin-top: 33px;
176
- box-sizing: border-box;
177
- }
178
-
179
- /*** 3.1 - SECTION HEADER ***/
180
- .cff-section-header h2 {
181
- font-weight: 600;
182
- font-size: 32px;
183
- line-height: 40px;
184
- color: #141B38;
185
- margin: 0 0 5px 0;
186
- }
187
-
188
- .cff-section-header p {
189
- font-size: 13px;
190
- line-height: 18px;
191
- color: #8C8F9A;
192
- margin: 0;
193
- }
194
- .cff-section-second-header {
195
- margin-top: 43px;
196
- }
197
- .cff-section-second-header h3 {
198
- font-weight: 600;
199
- font-size: 24px;
200
- line-height: 29px;
201
- color: #141B38;
202
- margin: 0 0 5px 0;
203
- }
204
- .cff-section-second-header p {
205
- font-size: 14px;
206
- line-height: 22px;
207
- color: #8C8F9A;
208
- margin-top: 0px;
209
- margin-bottom: 25px;
210
- }
211
- .cff-oembed-plugin-box {
212
- background: #FFFFFF;
213
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
214
- margin-bottom: 10px;
215
- padding: 12px 20px;
216
- display: flex;
217
- justify-content: space-between;
218
- align-items: center;
219
- }
220
- /*** 3.2 - OEMBED EXTENSIONS BOX ***/
221
- .cff-extensions-boxes-container {
222
- margin-top: 20px;
223
- display: flex;
224
- flex-wrap: wrap;
225
- justify-content: space-between;
226
- gap: 12px;
227
- }
228
- .cff-extensions-boxes-container .sb-extensions-box{
229
- background-color: #fff;
230
- padding: 15px 16px 16px;
231
- box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
232
- border-radius: 4px;
233
- width: calc((100% / 3) - 8px);
234
- box-sizing: border-box;
235
- }
236
- .sb-extensions-box .sb-box-title {
237
- font-weight: 600;
238
- font-size: 14px;
239
- line-height: 22px;
240
- color: #141B38;
241
- margin-bottom: 5px;
242
- margin-top: 7px;
243
- }
244
- .sb-extensions-box .sb-box-description {
245
- margin: 0;
246
- font-size: 13px;
247
- line-height: 18px;
248
- color: #8C8F9A;
249
- }
250
- .sb-extensions-box .sb-action-buttons {
251
- margin-top: 20px;
252
- display: flex;
253
- }
254
- .sb-action-buttons .cff-btn {
255
- display: flex;
256
- align-items: center;
257
- vertical-align: middle;
258
- justify-content: center;
259
- background: #F3F4F5;
260
- border: 1px solid #DCDDE1;
261
- box-sizing: border-box;
262
- border-radius: 2px;
263
- padding: 7px 20px;
264
- font-weight: 600;
265
- font-size: 12px;
266
- line-height: 18px;
267
- color: #141B38;
268
- box-sizing: border-box;
269
- letter-spacing: 0.2px;
270
- cursor: pointer;
271
- text-decoration: none;
272
- transition: all 0.15s ease-in-out;
273
- }
274
- .sb-action-buttons .cff-btn:hover {
275
- background: #FFFFFF;
276
- border: 1px solid #D0D1D7;
277
- }
278
- .sb-action-buttons .cff-btn:focus,
279
- .sb-action-buttons .cff-btn:active {
280
- background: #E8E8EB;
281
- border: 1px solid #D0D1D7;
282
- box-shadow: none;
283
- outline: none;
284
- }
285
- .sb-action-buttons .cff-btn.sb-btn-install {
286
- padding: 7px 27px;
287
- }
288
- .cff-social-wall-plugin-box .sb-action-buttons .sb-btn-install {
289
- padding: 6px 4px 6px 15px;
290
- }
291
- .cff-social-wall-plugin-box .sb-action-buttons .sb-btn-install span {
292
- margin-left: 12px;
293
- }
294
- .sb-action-buttons .cff-btn.loading svg {
295
- height: 13px;
296
- transform: translate(0px, 2px);
297
- }
298
- .sb-action-buttons .cff-btn.sb-btn-add svg,
299
- .sb-action-buttons .cff-btn.sb-btn-install svg {
300
- margin-right: 10px;
301
- height: 10px;
302
- }
303
- .sb-action-buttons .cff-btn.sb-btn-add path,
304
- .sb-action-buttons .cff-btn.sb-btn-install path {
305
- fill: #141B38;
306
- }
307
- .sb-action-buttons .cff-btn.sb-btn-installed {
308
- background: #E8E8EB;
309
- color: #8C8F9A;
310
- cursor: not-allowed;
311
- border: none;
312
- }
313
- .sb-action-buttons .cff-btn.sb-btn-activate {
314
- background-color: #0068A0;
315
- border-color: #0068A0;
316
- color: #fff;
317
- }
318
- .sb-action-buttons .cff-btn.sb-btn-activate:hover {
319
- background-color: #0096CC;
320
- border-color: #0096CC;
321
- }
322
- .sb-action-buttons .cff-btn.sb-btn-activate:focus,
323
- .sb-action-buttons .cff-btn.sb-btn-activate:active {
324
- background-color: #004D77;
325
- border-color: #004D77;
326
- }
327
- .sb-action-buttons .cff-btn.sb-btn-deactivate {
328
- background-color: #D72C2C;
329
- border-color: #D72C2C;
330
- color: #fff;
331
- }
332
- .sb-action-buttons .cff-btn.sb-btn-deactivate:hover {
333
- background-color: #DF5757;
334
- border-color: #DF5757;
335
- }
336
- .sb-action-buttons .cff-btn.sb-btn-deactivate:focus,
337
- .sb-action-buttons .cff-btn.sb-btn-deactivate:active {
338
- background-color: #841919;
339
- border-color: #841919;
340
- }
341
- .sb-plugins-box .sb-action-buttons .cff-btn.sb-btn-deactivate{
342
- display: none;
343
- }
344
- .sb-action-buttons .cff-btn:not(:last-child) {
345
- margin-right: 8px;
346
- }
347
- .sb-btn-add-plugin svg {
348
- height: 10px;
349
- margin-right: 10px;
350
- }
351
- .sb-btn-add-plugin svg path {
352
- fill: #141B38;
353
- }
354
- .sb-btn-installed svg {
355
- margin-right: 10px;
356
- }
357
- /*** 3.3 - EXTENSION PLUGINS BOX CONTAINER ***/
358
- .cff-plugins-boxes-container {
359
- display: flex;
360
- flex-wrap: wrap;
361
- align-items: center;
362
- justify-content: space-between;
363
- margin-top: 20px;
364
- gap: 12px;
365
- }
366
- .cff-plugins-boxes-container .sb-plugins-box{
367
- background-color: #fff;
368
- padding: 18px 25px 20px 20px;
369
- box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
370
- border-radius: 4px;
371
- width: calc((100% / 2) - 6px);
372
- display: flex;
373
- box-sizing: border-box;
374
- }
375
- .cff-plugins-boxes-container .sb-plugins-box .icon {
376
- max-width: 52px;
377
- padding-right: 0px;
378
- box-sizing: border-box;
379
- width: 52px;
380
- margin-right: 24px;
381
- min-width: 52px;
382
- }
383
- .cff-plugins-boxes-container .sb-plugins-box .icon img {
384
- max-width: 100%;
385
- }
386
- .sb-plugins-box .sb-box-title {
387
- font-weight: 600;
388
- font-size: 16px;
389
- line-height: 22px;
390
- color: #141B38;
391
- margin-top: 0;
392
- margin-bottom: 5px;
393
- }
394
- .sb-plugins-box .sb-box-description {
395
- margin: 0;
396
- font-size: 13px;
397
- line-height: 18px;
398
- color: #8C8F9A;
399
- }
400
- .sb-plugins-box .sb-action-buttons {
401
- margin-top: 20px;
402
- display: flex;
403
- }
404
-
405
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
406
- padding: 27px 20px 22px 120px;
407
- flex-basis: 100%;
408
- margin-right: 0;
409
- justify-content: center;
410
- position: relative;
411
- overflow: hidden;
412
- box-sizing: border-box;
413
- }
414
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box .plugin-box-content {
415
- z-index: 11;
416
- }
417
- .cff-social-wall-plugin-box .sb-box-title {
418
- font-size: 24px;
419
- line-height: 27px;
420
- letter-spacing: 0;
421
- color: #141B38;
422
- margin-bottom: 0;
423
- }
424
- .cff-social-wall-plugin-box .sb-box-description {
425
- font-size: 14px;
426
- line-height: 22px;
427
- color: #8C8F9A;
428
- }
429
- .cff-social-wall-plugin-box .sb-box-bg-image {
430
- position: absolute;
431
- z-index: 0;
432
- left: 0;
433
- width: 320px;
434
- top: 0;
435
- }
436
- .cff-social-wall-plugin-box .sb-box-bg-image img {
437
- max-width: 100%;
438
- }
439
-
440
-
441
- /*** 4.0 Sticky Widget ***/
442
- .cff-stck-wdg{
443
- position: fixed;
444
- right: 21px;
445
- z-index: 9;
446
- bottom: 20px;
447
- }
448
- .cff-stck-wdg-btn{
449
- width: 52px;
450
- height: 52px;
451
- background: #fff;
452
- border-radius: 50%;
453
- cursor: pointer;
454
- display: flex;
455
- justify-content: center;
456
- align-items: center;
457
- filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
458
- }
459
- .cff-stck-wdg-btn svg{
460
- width: 25px;
461
- fill: #E34F0E;
462
- height: 33px;
463
- float: left;
464
- }
465
-
466
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
467
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
468
- display: block;
469
- }
470
- .cff-stck-wdg-btn-cls{
471
- width: inherit;
472
- height: inherit;
473
- position: relative;
474
- color: #364152;
475
- box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
476
- border-radius: 70px;
477
- }
478
- .cff-stck-wdg-btn-cls svg {
479
- width: 14px;
480
- height: 14px;
481
- position: absolute;
482
- top: 50%;
483
- right: 0;
484
- bottom: 0;
485
- left: 50%;
486
- margin-top: -7px;
487
- margin-left: -7px;
488
- }
489
-
490
- .cff-stck-pop{
491
- position: absolute;
492
- width: 292px;
493
- height: auto;
494
- background: #fff;
495
- border: 1px solid #E2E8F0;
496
- box-sizing: border-box;
497
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
498
- border-radius: 2px;
499
- padding: 20px;
500
- right: 0px;
501
- bottom: 66px;
502
- color: #141B38;
503
- padding-bottom: 82px;
504
- }
505
- .cff-stck-wdg[data-active="true"] .cff-stck-pop{
506
- bottom: 66px;
507
- opacity: 1;
508
- visibility: visible;
509
- }
510
-
511
- .cff-stck-pop svg{
512
- fill: currentColor;
513
- }
514
- .cff-stck-el-list{
515
- border: 1px solid #DCDDE1;
516
- border-radius: 2px;
517
- }
518
- .cff-stck-el{
519
- display: flex;
520
- align-items: center;
521
- padding: 12px 13px 11px;
522
- border-bottom: 1px solid #DCDDE1;
523
- transition: background .15s ease-in-out;
524
- font-size: 12px;
525
- }
526
- .cff-stck-el:hover{
527
- background: #F3F4F5;
528
- }
529
- .cff-stck-el:last-of-type{
530
- border-bottom: 0px;
531
- }
532
- .cff-stck-el-list .cff-chevron svg{
533
- width: 5px;
534
- height: 8px;
535
- }
536
- .cff-fs-a {
537
- width: 100%;
538
- height: 100%;
539
- display: block;
540
- position: absolute;
541
- left: 0;
542
- top: 0;
543
- z-index: 1;
544
- }
545
- .cff-stck-el .cff-stck-el-txt{
546
- color: #27303F;
547
- }
548
- .cff-stck-el.cff-stck-el-upgrd{
549
- padding: 9px 14px;
550
- font-size: 14px;
551
- background: var(--cl-orange);
552
- color: #fff;
553
- position: relative;
554
- transition: background .15s ease-in-out;
555
- font-weight: 600;
556
- }
557
- .cff-chevron {
558
- position: absolute;
559
- right: 14px
560
- }
561
- .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
562
- color: #fff;
563
- }
564
- .cff-stck-el.cff-stck-el-upgrd:after{
565
- top: 20px;
566
- opacity: 1;
567
- }
568
- .cff-stck-el-icon{
569
- margin-right: 10px;
570
- }
571
- .cff-stck-el-icon svg{
572
- width: 17px;
573
- float: left;
574
- }
575
- .cff-stck-title{
576
- margin-top: 20px;
577
- margin-bottom: 10px;
578
- color: #141B38;
579
- font-weight: 600;
580
- font-size: 14px;
581
- line-height: 160%;
582
- }
583
- .cff-stck-follow{
584
- background: #F3F4F5;
585
- margin-top: 20px;
586
- left: 0px;
587
- bottom: 0px;
588
- position: absolute;
589
- padding: 12px 20px;
590
- display: flex;
591
- align-items: center;
592
- }
593
- .cff-stck-follow span{
594
- font-weight: 600;
595
- font-size: 14px;
596
- }
597
- .cff-stck-flw-links{
598
- display: flex;
599
- justify-content: center;
600
- align-items: center;
601
- margin-left: auto;
602
- }
603
- .cff-stck-flw-links a{
604
- width: 36px;
605
- height: 28px;
606
- color: inherit;
607
- display: inline-flex;
608
- justify-content: center;
609
- align-items: center;
610
- margin-left: 4px;
611
- border-radius: 2px;
612
- transition: background .15s ease-in-out;
613
- }
614
- .cff-stck-flw-links svg{
615
- width: 17px;
616
- color: #141B38;
617
- }
618
- .cff-stck-flw-links a:hover{
619
- background: #fff;
620
- }
621
- .cff-stck-flw-links a:hover svg{
622
- color: inherit;
623
- }
624
-
625
- /*** 5.0 - RESPONSIVENESS ***/
626
- @media (max-width: 1024px) {
627
- .cff-extensions-boxes-container .sb-extensions-box {
628
- width: calc((100% / 2) - 6px);
629
- }
630
- .cff-extensions-boxes-container .sb-extensions-box:not(:nth-child(3n)) {
631
- margin-right: 0;
632
- }
633
- .cff-social-wall-plugin-box .sb-box-bg-image {
634
- left: -45px;
635
- }
636
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
637
- padding: 27px 20px 22px 130px;
638
- }
639
- .cff-section-second-header {
640
- padding-right: 15px;
641
- }
642
- }
643
-
644
- @media (min-width: 768px) and (max-width: 1024px) {
645
- .sb-action-buttons .cff-btn {
646
- padding: 7px 10px;
647
- }
648
- .sb-plugins-box:not(.cff-social-wall-plugin-box) .sb-box-description {
649
- min-height: 54px;
650
- }
651
- .cff-social-wall-plugin-box .sb-box-bg-image {
652
- left: -70px;
653
- }
654
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
655
- padding: 27px 20px 22px 180px;
656
- }
657
- }
658
-
659
- @media (max-width: 767px) {
660
- .auto-fold #wpcontent {
661
- padding-left: 0;
662
- }
663
- .cff-fb-full-wrapper {
664
- padding: 70px 20px 0 20px;
665
- }
666
- .cff-fb-hd-btn {
667
- padding: 0px 15px 0px 7px;
668
- }
669
- .cff-fb-header {
670
- padding: 0px 20px;
671
- }
672
- .cff-plugins-boxes-container .sb-plugins-box {
673
- width: 100%;
674
- }
675
- .cff-plugins-boxes-container .sb-plugins-box:not(:nth-child(2n)) {
676
- margin-right: 0px;
677
- }
678
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
679
- display: flex;
680
- flex-direction: column;
681
- padding: 0px;
682
- }
683
- .cff-social-wall-plugin-box .sb-box-bg-image {
684
- position: initial;
685
- background-color: #c3d7f3;
686
- width: 100%;
687
- height: 190px;
688
- }
689
- .cff-social-wall-plugin-box .sb-box-bg-image img {
690
- max-width: 401px;
691
- }
692
- .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box .plugin-box-content {
693
- padding: 18px 24px 24px;
694
- }
695
- .cff-social-wall-plugin-box .sb-box-title {
696
- font-size: 18px;
697
- }
698
- .cff-extensions-boxes-container .sb-extensions-box {
699
- width: 100%;
700
- }
701
- }
702
- @media (max-width: 570px) {
703
- .cff-plugins-boxes-container .sb-plugins-box .icon {
704
- max-width: 42px;
705
- width: 42px;
706
- margin-right: 10px;
707
- min-width: 42px;
708
- }
709
- .cff-extensions-boxes-container .sb-extensions-box {
710
- width: 100%;
711
- }
712
- .cff-plugins-boxes-container {
713
- padding-right: 0px;
714
- }
715
- .cff-plugins-boxes-container .sb-plugins-box:not(:nth-child(2n)) {
716
- margin-right: 0px;
717
- }
718
- }
719
-
720
- @media (max-width: 480px) {
721
- .cff-fb-hd-btn {
722
- padding: 0px 10px 0px 7px !important;
723
- }
724
- .cff-fb-hd-btn[data-icon="left"] {
725
- padding-right: 10px!important;
726
- }
727
  }
1
+ /*
2
+ * Extensions CSS TABLE OF CONTENTS
3
+ *
4
+ * 1.0 - GLOBAL
5
+ * 2.0 - HEADER
6
+ * 3.0 - 3.0 - EXTENSIONS CONTAINER
7
+ * 3.1 - SECTION HEADER
8
+ * 3.2 - EXTENSIONS BOX
9
+ * 3.3 - PLUGINS BOX
10
+ * 4.0 - STICKY WIDGET
11
+ * 5.0 - RESPONSIVENESS
12
+ */
13
+
14
+ /*** 1.0 - GLOBAL ***/
15
+ .clearfix { display: inline-block; }
16
+ /* start commented backslash hack \*/
17
+ * html .clearfix { height: 1%; }
18
+ .clearfix { display: block; }
19
+ #cff-extensions {
20
+ -webkit-font-smoothing: antialiased;
21
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
22
+ }
23
+ #wpcontent {
24
+ padding-left: 0px;
25
+ }
26
+ #wpbody-content {
27
+ padding-bottom: 40px;
28
+ }
29
+ .clearfix:after {
30
+ visibility: hidden;
31
+ display: block;
32
+ font-size: 0;
33
+ content: " ";
34
+ clear: both;
35
+ height: 0;
36
+ }
37
+ /*orange*/
38
+ .sb-btn-orange{
39
+ background: #E34F0E!important;
40
+ color: #fff!important;
41
+ }
42
+ .sb-btn-orange:hover{
43
+ background: #F37036!important;
44
+ color: #fff!important;
45
+ }
46
+ .sb-btn-orange:focus,
47
+ .sb-btn-orange:active{
48
+ background: #B8400B!important;
49
+ color: #fff!important;
50
+ }
51
+ .cff-fb-full-wrapper{
52
+ padding: 0 53px;
53
+ padding-top: 82px;
54
+ }
55
+ .cff-fb-fs {
56
+ width: 100%;
57
+ position: relative;
58
+ float: left;
59
+ box-sizing: border-box;
60
+ }
61
+
62
+ /*** 2.0 - HEADER ***/
63
+ .cff-fb-create-ctn{
64
+ margin-top: 90px;
65
+ }
66
+ .cff-fb-header{
67
+ height: 64px;
68
+ position: absolute;
69
+ display: flex;
70
+ flex-direction: row;
71
+ justify-content: space-between;
72
+ align-items: center;
73
+ background: #fff;
74
+ padding: 0px 52px;
75
+ z-index: 2;
76
+ }
77
+ .cff-fb-header-left {
78
+ display: flex;
79
+ }
80
+ .cff-fb-header-left .sb-social-wall-link-wrap {
81
+ margin-left: 30px;
82
+ }
83
+ .sb-social-wall-link-wrap {
84
+ display: flex;
85
+ font-size: 14px;
86
+ margin: 10px 0 10px 30px;
87
+ }
88
+ .sb-social-wall-link:first-child {
89
+ padding-left: 0;
90
+ border-right: 1px solid #ccc;
91
+ color: #0068A0!important;
92
+ line-height: 1;
93
+ }
94
+ .sb-social-wall-link {
95
+ padding: 0 12px;
96
+ border-right: 1px solid #ccc;
97
+ color: #0068A0!important;
98
+ line-height: 1;
99
+ }
100
+ .sb-social-wall-link a {
101
+ text-decoration: none;
102
+ }
103
+ .sb-social-wall-link a:focus {
104
+ outline: none;
105
+ box-shadow: none;
106
+ }
107
+ .sb-social-wall-link:last-child {
108
+ border-right: none;
109
+ }
110
+ .cff-fb-hd-logo{
111
+ display: flex;
112
+ vertical-align: middle;
113
+ align-items: center;
114
+ gap: 5px;
115
+ }
116
+ .cff-fb-hd-logo .sb-logo-letters-wrap {
117
+ margin-bottom: 4px;
118
+ }
119
+ .cff-fb-hd-logo .breadcrumb-title{
120
+ font-size: 14px;
121
+ font-weight: 400;
122
+ line-height: 22px;
123
+ letter-spacing: 0em;
124
+ margin-left: 4px;
125
+ }
126
+ .cff-fb-hd-logo .separator{
127
+ margin: 0 5px 0 10px;
128
+ }
129
+ .cff-fb-hd-btn{
130
+ height: 38px;
131
+ cursor: pointer;
132
+ display: flex;
133
+ flex-direction: row;
134
+ justify-content: center;
135
+ align-items: center;
136
+ padding: 0px 15px 0px 13px;
137
+ font-weight: 600;
138
+ font-size: 14px;
139
+ color: #353A41;
140
+ background: #F3F4F5;
141
+ border-radius: 2px;
142
+ border: 1px solid #DCDDE1;
143
+ position: relative;
144
+ text-decoration: none;
145
+ transition: all 0.3s ease;
146
+ box-sizing: border-box;
147
+ }
148
+ .cff-fb-hd-btn svg {
149
+ margin-right: 10px;
150
+ width: 16px;
151
+ }
152
+ .cff-fb-hd-btn:focus {
153
+ outline: none;
154
+ box-shadow: none;
155
+ }
156
+ .cff-fb-hd-btn:hover {
157
+ color: inherit;
158
+ background-color: #fff;
159
+ }
160
+ .cff-fb-hd-btn i{
161
+ margin: 0px 5px;
162
+ }
163
+ .cff-fb-hd-btn[data-icon="left"]{
164
+ padding-right: 20px!important;
165
+ }
166
+ .cff-fb-full-wrapper .section-header h1 {
167
+ font-size: 32px;
168
+ line-height: 40px;
169
+ }
170
+ /*** 3.0 - EXTENSIONS CONTAINER ***/
171
+ .cff-extensions-container {
172
+ max-width: 875px;
173
+ position: relative;
174
+ margin: auto;
175
+ margin-top: 33px;
176
+ box-sizing: border-box;
177
+ }
178
+
179
+ /*** 3.1 - SECTION HEADER ***/
180
+ .cff-section-header h2 {
181
+ font-weight: 600;
182
+ font-size: 32px;
183
+ line-height: 40px;
184
+ color: #141B38;
185
+ margin: 0 0 5px 0;
186
+ }
187
+
188
+ .cff-section-header p {
189
+ font-size: 13px;
190
+ line-height: 18px;
191
+ color: #8C8F9A;
192
+ margin: 0;
193
+ }
194
+ .cff-section-second-header {
195
+ margin-top: 43px;
196
+ }
197
+ .cff-section-second-header h3 {
198
+ font-weight: 600;
199
+ font-size: 24px;
200
+ line-height: 29px;
201
+ color: #141B38;
202
+ margin: 0 0 5px 0;
203
+ }
204
+ .cff-section-second-header p {
205
+ font-size: 14px;
206
+ line-height: 22px;
207
+ color: #8C8F9A;
208
+ margin-top: 0px;
209
+ margin-bottom: 25px;
210
+ }
211
+ .cff-oembed-plugin-box {
212
+ background: #FFFFFF;
213
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
214
+ margin-bottom: 10px;
215
+ padding: 12px 20px;
216
+ display: flex;
217
+ justify-content: space-between;
218
+ align-items: center;
219
+ }
220
+ /*** 3.2 - OEMBED EXTENSIONS BOX ***/
221
+ .cff-extensions-boxes-container {
222
+ margin-top: 20px;
223
+ display: flex;
224
+ flex-wrap: wrap;
225
+ justify-content: space-between;
226
+ gap: 12px;
227
+ }
228
+ .cff-extensions-boxes-container .sb-extensions-box{
229
+ background-color: #fff;
230
+ padding: 15px 16px 16px;
231
+ box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
232
+ border-radius: 4px;
233
+ width: calc((100% / 3) - 8px);
234
+ box-sizing: border-box;
235
+ }
236
+ .sb-extensions-box .sb-box-title {
237
+ font-weight: 600;
238
+ font-size: 14px;
239
+ line-height: 22px;
240
+ color: #141B38;
241
+ margin-bottom: 5px;
242
+ margin-top: 7px;
243
+ }
244
+ .sb-extensions-box .sb-box-description {
245
+ margin: 0;
246
+ font-size: 13px;
247
+ line-height: 18px;
248
+ color: #8C8F9A;
249
+ }
250
+ .sb-extensions-box .sb-action-buttons {
251
+ margin-top: 20px;
252
+ display: flex;
253
+ }
254
+ .sb-action-buttons .cff-btn {
255
+ display: flex;
256
+ align-items: center;
257
+ vertical-align: middle;
258
+ justify-content: center;
259
+ background: #F3F4F5;
260
+ border: 1px solid #DCDDE1;
261
+ box-sizing: border-box;
262
+ border-radius: 2px;
263
+ padding: 7px 20px;
264
+ font-weight: 600;
265
+ font-size: 12px;
266
+ line-height: 18px;
267
+ color: #141B38;
268
+ box-sizing: border-box;
269
+ letter-spacing: 0.2px;
270
+ cursor: pointer;
271
+ text-decoration: none;
272
+ transition: all 0.15s ease-in-out;
273
+ }
274
+ .sb-action-buttons .cff-btn:hover {
275
+ background: #FFFFFF;
276
+ border: 1px solid #D0D1D7;
277
+ }
278
+ .sb-action-buttons .cff-btn:focus,
279
+ .sb-action-buttons .cff-btn:active {
280
+ background: #E8E8EB;
281
+ border: 1px solid #D0D1D7;
282
+ box-shadow: none;
283
+ outline: none;
284
+ }
285
+ .sb-action-buttons .cff-btn.sb-btn-install {
286
+ padding: 7px 27px;
287
+ }
288
+ .cff-social-wall-plugin-box .sb-action-buttons .sb-btn-install {
289
+ padding: 6px 4px 6px 15px;
290
+ }
291
+ .cff-social-wall-plugin-box .sb-action-buttons .sb-btn-install span {
292
+ margin-left: 12px;
293
+ }
294
+ .sb-action-buttons .cff-btn.loading svg {
295
+ height: 13px;
296
+ transform: translate(0px, 2px);
297
+ }
298
+ .sb-action-buttons .cff-btn.sb-btn-add svg,
299
+ .sb-action-buttons .cff-btn.sb-btn-install svg {
300
+ margin-right: 10px;
301
+ height: 10px;
302
+ }
303
+ .sb-action-buttons .cff-btn.sb-btn-add path,
304
+ .sb-action-buttons .cff-btn.sb-btn-install path {
305
+ fill: #141B38;
306
+ }
307
+ .sb-action-buttons .cff-btn.sb-btn-installed {
308
+ background: #E8E8EB;
309
+ color: #8C8F9A;
310
+ cursor: not-allowed;
311
+ border: none;
312
+ }
313
+ .sb-action-buttons .cff-btn.sb-btn-activate {
314
+ background-color: #0068A0;
315
+ border-color: #0068A0;
316
+ color: #fff;
317
+ }
318
+ .sb-action-buttons .cff-btn.sb-btn-activate:hover {
319
+ background-color: #0096CC;
320
+ border-color: #0096CC;
321
+ }
322
+ .sb-action-buttons .cff-btn.sb-btn-activate:focus,
323
+ .sb-action-buttons .cff-btn.sb-btn-activate:active {
324
+ background-color: #004D77;
325
+ border-color: #004D77;
326
+ }
327
+ .sb-action-buttons .cff-btn.sb-btn-deactivate {
328
+ background-color: #D72C2C;
329
+ border-color: #D72C2C;
330
+ color: #fff;
331
+ }
332
+ .sb-action-buttons .cff-btn.sb-btn-deactivate:hover {
333
+ background-color: #DF5757;
334
+ border-color: #DF5757;
335
+ }
336
+ .sb-action-buttons .cff-btn.sb-btn-deactivate:focus,
337
+ .sb-action-buttons .cff-btn.sb-btn-deactivate:active {
338
+ background-color: #841919;
339
+ border-color: #841919;
340
+ }
341
+ .sb-plugins-box .sb-action-buttons .cff-btn.sb-btn-deactivate{
342
+ display: none;
343
+ }
344
+ .sb-action-buttons .cff-btn:not(:last-child) {
345
+ margin-right: 8px;
346
+ }
347
+ .sb-btn-add-plugin svg {
348
+ height: 10px;
349
+ margin-right: 10px;
350
+ }
351
+ .sb-btn-add-plugin svg path {
352
+ fill: #141B38;
353
+ }
354
+ .sb-btn-installed svg {
355
+ margin-right: 10px;
356
+ }
357
+ /*** 3.3 - EXTENSION PLUGINS BOX CONTAINER ***/
358
+ .cff-plugins-boxes-container {
359
+ display: flex;
360
+ flex-wrap: wrap;
361
+ align-items: center;
362
+ justify-content: space-between;
363
+ margin-top: 20px;
364
+ gap: 12px;
365
+ }
366
+ .cff-plugins-boxes-container .sb-plugins-box{
367
+ background-color: #fff;
368
+ padding: 18px 25px 20px 20px;
369
+ box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
370
+ border-radius: 4px;
371
+ width: calc((100% / 2) - 6px);
372
+ display: flex;
373
+ box-sizing: border-box;
374
+ }
375
+ .cff-plugins-boxes-container .sb-plugins-box .icon {
376
+ max-width: 52px;
377
+ padding-right: 0px;
378
+ box-sizing: border-box;
379
+ width: 52px;
380
+ margin-right: 24px;
381
+ min-width: 52px;
382
+ }
383
+ .cff-plugins-boxes-container .sb-plugins-box .icon img {
384
+ max-width: 100%;
385
+ }
386
+ .sb-plugins-box .sb-box-title {
387
+ font-weight: 600;
388
+ font-size: 16px;
389
+ line-height: 22px;
390
+ color: #141B38;
391
+ margin-top: 0;
392
+ margin-bottom: 5px;
393
+ }
394
+ .sb-plugins-box .sb-box-description {
395
+ margin: 0;
396
+ font-size: 13px;
397
+ line-height: 18px;
398
+ color: #8C8F9A;
399
+ }
400
+ .sb-plugins-box .sb-action-buttons {
401
+ margin-top: 20px;
402
+ display: flex;
403
+ }
404
+
405
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
406
+ padding: 27px 20px 22px 120px;
407
+ flex-basis: 100%;
408
+ margin-right: 0;
409
+ justify-content: center;
410
+ position: relative;
411
+ overflow: hidden;
412
+ box-sizing: border-box;
413
+ }
414
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box .plugin-box-content {
415
+ z-index: 11;
416
+ }
417
+ .cff-social-wall-plugin-box .sb-box-title {
418
+ font-size: 24px;
419
+ line-height: 27px;
420
+ letter-spacing: 0;
421
+ color: #141B38;
422
+ margin-bottom: 0;
423
+ }
424
+ .cff-social-wall-plugin-box .sb-box-description {
425
+ font-size: 14px;
426
+ line-height: 22px;
427
+ color: #8C8F9A;
428
+ }
429
+ .cff-social-wall-plugin-box .sb-box-bg-image {
430
+ position: absolute;
431
+ z-index: 0;
432
+ left: 0;
433
+ width: 320px;
434
+ top: 0;
435
+ }
436
+ .cff-social-wall-plugin-box .sb-box-bg-image img {
437
+ max-width: 100%;
438
+ }
439
+
440
+
441
+ /*** 4.0 Sticky Widget ***/
442
+ .cff-stck-wdg{
443
+ position: fixed;
444
+ right: 21px;
445
+ z-index: 9;
446
+ bottom: 20px;
447
+ }
448
+ .cff-stck-wdg-btn{
449
+ width: 52px;
450
+ height: 52px;
451
+ background: #fff;
452
+ border-radius: 50%;
453
+ cursor: pointer;
454
+ display: flex;
455
+ justify-content: center;
456
+ align-items: center;
457
+ filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
458
+ }
459
+ .cff-stck-wdg-btn svg{
460
+ width: 25px;
461
+ fill: #E34F0E;
462
+ height: 33px;
463
+ float: left;
464
+ }
465
+
466
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
467
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
468
+ display: block;
469
+ }
470
+ .cff-stck-wdg-btn-cls{
471
+ width: inherit;
472
+ height: inherit;
473
+ position: relative;
474
+ color: #364152;
475
+ box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
476
+ border-radius: 70px;
477
+ }
478
+ .cff-stck-wdg-btn-cls svg {
479
+ width: 14px;
480
+ height: 14px;
481
+ position: absolute;
482
+ top: 50%;
483
+ right: 0;
484
+ bottom: 0;
485
+ left: 50%;
486
+ margin-top: -7px;
487
+ margin-left: -7px;
488
+ }
489
+
490
+ .cff-stck-pop{
491
+ position: absolute;
492
+ width: 292px;
493
+ height: auto;
494
+ background: #fff;
495
+ border: 1px solid #E2E8F0;
496
+ box-sizing: border-box;
497
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
498
+ border-radius: 2px;
499
+ padding: 20px;
500
+ right: 0px;
501
+ bottom: 66px;
502
+ color: #141B38;
503
+ padding-bottom: 82px;
504
+ }
505
+ .cff-stck-wdg[data-active="true"] .cff-stck-pop{
506
+ bottom: 66px;
507
+ opacity: 1;
508
+ visibility: visible;
509
+ }
510
+
511
+ .cff-stck-pop svg{
512
+ fill: currentColor;
513
+ }
514
+ .cff-stck-el-list{
515
+ border: 1px solid #DCDDE1;
516
+ border-radius: 2px;
517
+ }
518
+ .cff-stck-el{
519
+ display: flex;
520
+ align-items: center;
521
+ padding: 12px 13px 11px;
522
+ border-bottom: 1px solid #DCDDE1;
523
+ transition: background .15s ease-in-out;
524
+ font-size: 12px;
525
+ }
526
+ .cff-stck-el:hover{
527
+ background: #F3F4F5;
528
+ }
529
+ .cff-stck-el:last-of-type{
530
+ border-bottom: 0px;
531
+ }
532
+ .cff-stck-el-list .cff-chevron svg{
533
+ width: 5px;
534
+ height: 8px;
535
+ }
536
+ .cff-fs-a {
537
+ width: 100%;
538
+ height: 100%;
539
+ display: block;
540
+ position: absolute;
541
+ left: 0;
542
+ top: 0;
543
+ z-index: 1;
544
+ }
545
+ .cff-stck-el .cff-stck-el-txt{
546
+ color: #27303F;
547
+ }
548
+ .cff-stck-el.cff-stck-el-upgrd{
549
+ padding: 9px 14px;
550
+ font-size: 14px;
551
+ background: var(--cl-orange);
552
+ color: #fff;
553
+ position: relative;
554
+ transition: background .15s ease-in-out;
555
+ font-weight: 600;
556
+ }
557
+ .cff-chevron {
558
+ position: absolute;
559
+ right: 14px
560
+ }
561
+ .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
562
+ color: #fff;
563
+ }
564
+ .cff-stck-el.cff-stck-el-upgrd:after{
565
+ top: 20px;
566
+ opacity: 1;
567
+ }
568
+ .cff-stck-el-icon{
569
+ margin-right: 10px;
570
+ }
571
+ .cff-stck-el-icon svg{
572
+ width: 17px;
573
+ float: left;
574
+ }
575
+ .cff-stck-title{
576
+ margin-top: 20px;
577
+ margin-bottom: 10px;
578
+ color: #141B38;
579
+ font-weight: 600;
580
+ font-size: 14px;
581
+ line-height: 160%;
582
+ }
583
+ .cff-stck-follow{
584
+ background: #F3F4F5;
585
+ margin-top: 20px;
586
+ left: 0px;
587
+ bottom: 0px;
588
+ position: absolute;
589
+ padding: 12px 20px;
590
+ display: flex;
591
+ align-items: center;
592
+ }
593
+ .cff-stck-follow span{
594
+ font-weight: 600;
595
+ font-size: 14px;
596
+ }
597
+ .cff-stck-flw-links{
598
+ display: flex;
599
+ justify-content: center;
600
+ align-items: center;
601
+ margin-left: auto;
602
+ }
603
+ .cff-stck-flw-links a{
604
+ width: 36px;
605
+ height: 28px;
606
+ color: inherit;
607
+ display: inline-flex;
608
+ justify-content: center;
609
+ align-items: center;
610
+ margin-left: 4px;
611
+ border-radius: 2px;
612
+ transition: background .15s ease-in-out;
613
+ }
614
+ .cff-stck-flw-links svg{
615
+ width: 17px;
616
+ color: #141B38;
617
+ }
618
+ .cff-stck-flw-links a:hover{
619
+ background: #fff;
620
+ }
621
+ .cff-stck-flw-links a:hover svg{
622
+ color: inherit;
623
+ }
624
+
625
+ /*** 5.0 - RESPONSIVENESS ***/
626
+ @media (max-width: 1024px) {
627
+ .cff-extensions-boxes-container .sb-extensions-box {
628
+ width: calc((100% / 2) - 6px);
629
+ }
630
+ .cff-extensions-boxes-container .sb-extensions-box:not(:nth-child(3n)) {
631
+ margin-right: 0;
632
+ }
633
+ .cff-social-wall-plugin-box .sb-box-bg-image {
634
+ left: -45px;
635
+ }
636
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
637
+ padding: 27px 20px 22px 130px;
638
+ }
639
+ .cff-section-second-header {
640
+ padding-right: 15px;
641
+ }
642
+ }
643
+
644
+ @media (min-width: 768px) and (max-width: 1024px) {
645
+ .sb-action-buttons .cff-btn {
646
+ padding: 7px 10px;
647
+ }
648
+ .sb-plugins-box:not(.cff-social-wall-plugin-box) .sb-box-description {
649
+ min-height: 54px;
650
+ }
651
+ .cff-social-wall-plugin-box .sb-box-bg-image {
652
+ left: -70px;
653
+ }
654
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
655
+ padding: 27px 20px 22px 180px;
656
+ }
657
+ }
658
+
659
+ @media (max-width: 767px) {
660
+ .auto-fold #wpcontent {
661
+ padding-left: 0;
662
+ }
663
+ .cff-fb-full-wrapper {
664
+ padding: 70px 20px 0 20px;
665
+ }
666
+ .cff-fb-hd-btn {
667
+ padding: 0px 15px 0px 7px;
668
+ }
669
+ .cff-fb-header {
670
+ padding: 0px 20px;
671
+ }
672
+ .cff-plugins-boxes-container .sb-plugins-box {
673
+ width: 100%;
674
+ }
675
+ .cff-plugins-boxes-container .sb-plugins-box:not(:nth-child(2n)) {
676
+ margin-right: 0px;
677
+ }
678
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box {
679
+ display: flex;
680
+ flex-direction: column;
681
+ padding: 0px;
682
+ }
683
+ .cff-social-wall-plugin-box .sb-box-bg-image {
684
+ position: initial;
685
+ background-color: #c3d7f3;
686
+ width: 100%;
687
+ height: 190px;
688
+ }
689
+ .cff-social-wall-plugin-box .sb-box-bg-image img {
690
+ max-width: 401px;
691
+ }
692
+ .cff-plugins-boxes-container .sb-plugins-box.cff-social-wall-plugin-box .plugin-box-content {
693
+ padding: 18px 24px 24px;
694
+ }
695
+ .cff-social-wall-plugin-box .sb-box-title {
696
+ font-size: 18px;
697
+ }
698
+ .cff-extensions-boxes-container .sb-extensions-box {
699
+ width: 100%;
700
+ }
701
+ }
702
+ @media (max-width: 570px) {
703
+ .cff-plugins-boxes-container .sb-plugins-box .icon {
704
+ max-width: 42px;
705
+ width: 42px;
706
+ margin-right: 10px;
707
+ min-width: 42px;
708
+ }
709
+ .cff-extensions-boxes-container .sb-extensions-box {
710
+ width: 100%;
711
+ }
712
+ .cff-plugins-boxes-container {
713
+ padding-right: 0px;
714
+ }
715
+ .cff-plugins-boxes-container .sb-plugins-box:not(:nth-child(2n)) {
716
+ margin-right: 0px;
717
+ }
718
+ }
719
+
720
+ @media (max-width: 480px) {
721
+ .cff-fb-hd-btn {
722
+ padding: 0px 10px 0px 7px !important;
723
+ }
724
+ .cff-fb-hd-btn[data-icon="left"] {
725
+ padding-right: 10px!important;
726
+ }
727
  }
admin/assets/css/oembeds.css CHANGED
@@ -1,791 +1,791 @@
1
- /*
2
- * oEmbeds CSS TABLE OF CONTENTS
3
- *
4
- * 1.0 - GLOBAL
5
- * 2.0 - HEADER
6
- * 3.0 - 3.0 - OEMBEDS CONTAINER
7
- * 3.1 - SECTION HEADER
8
- * 3.2 - OEMBED ENABLE/DISABLE BOX
9
- * 3.3 - OEMBED INFORMATION BOX
10
- * 4.0 - MODAL STYLE
11
- * 5.0 - STICKY WIDGET
12
- * 6.0 - RESPONSIVENESS
13
- */
14
-
15
- /*** 1.0 - GLOBAL ***/
16
- .clearfix { display: inline-block; }
17
- /* start commented backslash hack \*/
18
- * html .clearfix { height: 1%; }
19
- .clearfix { display: block; }
20
- .checkmark {
21
- width: 21px;
22
- height: 22px;
23
- border-radius: 50%;
24
- display: block;
25
- stroke-width: 2;
26
- stroke: #fff;
27
- stroke-miterlimit: 10;
28
- stroke-dashoffset: 0;
29
- transform: translate(0px, -3px);
30
- }
31
- #cff-oembeds {
32
- -webkit-font-smoothing: antialiased;
33
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
34
- }
35
- #wpcontent {
36
- padding-left: 0px;
37
- }
38
- #wpbody-content {
39
- padding-bottom: 40px;
40
- }
41
- .clearfix:after {
42
- visibility: hidden;
43
- display: block;
44
- font-size: 0;
45
- content: " ";
46
- clear: both;
47
- height: 0;
48
- }
49
- .cff-fb-full-wrapper{
50
- padding: 0 53px;
51
- padding-top: 82px;
52
- }
53
- .cff-fb-fs {
54
- width: 100%;
55
- position: relative;
56
- float: left;
57
- box-sizing: border-box;
58
- }
59
- /*orange*/
60
- .sb-btn-orange{
61
- background: #E34F0E!important;
62
- color: #fff!important;
63
- }
64
- .sb-btn-orange:hover{
65
- background: #F37036!important;
66
- color: #fff!important;
67
- }
68
- .sb-btn-orange:focus,
69
- .sb-btn-orange:active{
70
- background: #B8400B!important;
71
- color: #fff!important;
72
- }
73
-
74
- /* blue buttons */
75
- .cff-btn-blue{
76
- background: #0068A0!important;
77
- color: #fff!important;
78
- }
79
- .cff-btn-blue:hover{
80
- background: #0096CC!important;
81
- color: #fff!important;
82
- }
83
- .cff-btn-blue:focus,
84
- .cff-btn-blue:active{
85
- background: #004D77!important;
86
- color: #fff!important;
87
- }
88
-
89
- /*** 2.0 - HEADER ***/
90
- .cff-fb-create-ctn{
91
- margin-top: 90px;
92
- }
93
- .cff-fb-header{
94
- height: 64px;
95
- position: absolute;
96
- display: flex;
97
- flex-direction: row;
98
- justify-content: space-between;
99
- align-items: center;
100
- background: #fff;
101
- padding: 0px 52px;
102
- z-index: 2;
103
- }
104
- .cff-fb-header-left {
105
- display: flex;
106
- }
107
- .cff-fb-header-left .sb-social-wall-link-wrap {
108
- margin-left: 30px;
109
- }
110
- .sb-social-wall-link-wrap {
111
- display: flex;
112
- font-size: 14px;
113
- margin: 10px 0;
114
- }
115
- .sb-social-wall-link {
116
- padding: 0 12px;
117
- border-right: 1px solid #ccc;
118
- color: #0068A0!important;
119
- line-height: 1;
120
- }
121
- .sb-social-wall-link:first-child {
122
- padding-left: 0;
123
- border-right: 1px solid #ccc;
124
- color: #0068A0!important;
125
- line-height: 1;
126
- }
127
- .sb-social-wall-link:last-child {
128
- border-right: none;
129
- }
130
- .sb-social-wall-link a {
131
- text-decoration: none;
132
- }
133
- .sb-social-wall-link a:focus {
134
- outline: none;
135
- box-shadow: none;
136
- }
137
- .cff-fb-hd-logo{
138
- display: flex;
139
- vertical-align: middle;
140
- align-items: center;
141
- gap: 5px;
142
- }
143
- .cff-fb-hd-logo .sb-logo-letters-wrap {
144
- margin-bottom: 4px;
145
- }
146
- .cff-fb-hd-logo .breadcrumb-title{
147
- font-size: 14px;
148
- font-weight: 400;
149
- line-height: 22px;
150
- letter-spacing: 0em;
151
- margin-left: 4px;
152
- }
153
- .cff-fb-hd-logo .separator{
154
- margin: 0 5px 0 10px;
155
- }
156
- .cff-fb-hd-btn{
157
- height: 38px;
158
- cursor: pointer;
159
- display: flex;
160
- flex-direction: row;
161
- justify-content: center;
162
- align-items: center;
163
- padding: 0px 15px 0px 13px;
164
- font-weight: 600;
165
- font-size: 14px;
166
- color: #353A41;
167
- background: #F3F4F5;
168
- border-radius: 2px;
169
- border: 1px solid #DCDDE1;
170
- position: relative;
171
- text-decoration: none;
172
- transition: all 0.3s ease;
173
- box-sizing: border-box;
174
- }
175
- .cff-fb-hd-btn svg {
176
- margin-right: 10px;
177
- width: 16px;
178
- }
179
- .cff-fb-hd-btn:focus {
180
- outline: none;
181
- box-shadow: none;
182
- }
183
- .cff-fb-hd-btn:hover {
184
- color: inherit;
185
- background-color: #fff;
186
- }
187
- .cff-fb-hd-btn i{
188
- margin: 0px 5px;
189
- }
190
- .cff-fb-hd-btn[data-icon="left"]{
191
- padding-right: 20px!important;
192
- }
193
-
194
- .cff-fb-full-wrapper .section-header h1 {
195
- font-size: 32px;
196
- line-height: 40px;
197
- }
198
- /*** 3.0 - OEMBEDS CONTAINER ***/
199
- .cff-oembeds-container {
200
- max-width: 875px;
201
- position: relative;
202
- margin: auto;
203
- margin-top: 33px;
204
- box-sizing: border-box;
205
- }
206
-
207
- /*** 3.1 - SECTION HEADER ***/
208
- .cff-section-header h3 {
209
- font-weight: 600;
210
- font-size: 32px;
211
- line-height: 40px;
212
- color: #141B38;
213
- margin: 0 0 5px 0;
214
- }
215
- .cff-section-header p {
216
- font-size: 13px;
217
- line-height: 18px;
218
- color: #434960;
219
- margin: 0;
220
- }
221
- .cff-oembed-plugin-box {
222
- background: #FFFFFF;
223
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
224
- margin-bottom: 10px;
225
- padding: 12px 20px;
226
- display: flex;
227
- justify-content: space-between;
228
- align-items: center;
229
- }
230
-
231
- /*** 3.2 - OEMBED ENABLE/DISABLE BOX ***/
232
- .cff-oembed-plugin-box-group {
233
- margin-top: 35px;
234
- }
235
- .cff-oembed-plugin-box .oembed-text{
236
- flex-basis: 645px;
237
- }
238
- .cff-oembed-plugin-box .cff-oembed-btn{
239
- flex-basis: 125px;
240
- text-align: right;
241
- }
242
- .cff-oembed-btn .cff-btn {
243
- border-radius: 2px;
244
- padding: 10px 20px;
245
- border: 0px;
246
- color: #fff;
247
- font-size: 14px;
248
- cursor: pointer;
249
- transition: all .15s ease-in-out;
250
- box-sizing: border-box;
251
- text-decoration: none;
252
- align-items: center;
253
- display: flex;
254
- align-items: center;
255
- height: 38px;
256
- float: right;
257
- }
258
- .cff-oembed-btn .cff-btn span {
259
- margin-right: 5px;
260
- height: 15px;
261
- width: 15px;
262
- }
263
- .cff-oembed-btn .cff-btn svg {
264
- width: 100%;
265
- height: 100%;
266
- }
267
- .cff-oembed-btn button:hover {
268
- background-color: #0096CC;
269
- border-color: #0096CC;
270
- }
271
- .cff-oembed-btn .cff-btn:focus,
272
- .cff-oembed-btn .cff-btn:active {
273
- outline: none;
274
- box-shadow: none;
275
- }
276
- .cff-oembed-btn button.disable-oembed {
277
- background: #D72C2C;
278
- }
279
- .cff-oembed-btn button.disable-oembed:hover {
280
- background-color: #DF5757;
281
- border-color: #DF5757;
282
- }
283
- .cff-oembed-btn button.disable-oembed:focus,
284
- .cff-oembed-btn button.disable-oembed:active {
285
- background-color: #841919;
286
- border-color: #841919;
287
- }
288
- .cff-oembed-btn button.loading svg {
289
- height: 14px;
290
- transform: translate(0, 2px);
291
- }
292
-
293
- /*** 3.3 - OEMBED INFORMATION BOX ***/
294
- .cff-oembed-information {
295
- background: #FFFFFF;
296
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
297
- margin-bottom: 10px;
298
- }
299
- .cff-oembed-information .sb-box-header {
300
- padding: 16px 20px;
301
- border-bottom: 1px solid #E8E8EB;
302
- }
303
- .cff-oembed-information .sb-box-header h3 {
304
- margin: 0;
305
- font-weight: 600;
306
- font-size: 18px;
307
- line-height: 140%;
308
- color: #141B38;
309
- }
310
- .sb-two-column-box {
311
- display: flex;
312
- justify-content: space-around;
313
- align-items: center;
314
- border-bottom: 1px solid #E8E8EB;
315
- }
316
- .sb-two-column-box-1 img {
317
- max-width: 438px;
318
- }
319
- .sb-two-column-box-2 img{
320
- margin-top: 20px;
321
- max-width: 442px;
322
- }
323
- .sb-two-column-box .sb-embed-info-text {
324
- padding: 0 75px 0 35px;
325
- }
326
- .sb-two-column-box-2 .sb-embed-info-text {
327
- padding: 0 65px 0 30px;
328
- }
329
- .sb-two-column-box h4,
330
- .sb-one-column-box h4 {
331
- font-size: 16px;
332
- font-weight: 600;
333
- line-height: 26px;
334
- color: #141B38;
335
- }
336
- .sb-one-column-box {
337
- max-width: 405px;
338
- margin: auto;
339
- text-align: center;
340
- }
341
- .sb-one-column-box h4 {
342
- padding: 0;
343
- margin-top: 30px;
344
- margin-bottom: 0px;
345
- }
346
- .sb-one-column-box p {
347
- font-size: 14px;
348
- line-height: 22px;
349
- }
350
- .sb-one-column-box img {
351
- margin-top: 15px;
352
- margin-bottom: -21px;
353
- max-width: 392px;
354
- }
355
- .sb-two-column-box-1 .sb-left {
356
- padding-left: 20px;
357
- }
358
- .sb-plugin-info-box {
359
- padding-top: 20px;
360
- }
361
-
362
- .sb-plugin-info-box .sb-left {
363
- padding-left: 35px;
364
- }
365
- .sb-plugin-info-box .sb-right {
366
- padding: 0 60px 0 40px;
367
- }
368
- .sb-plugin-info-box h4 {
369
- font-size: 18px;
370
- margin: 0px;
371
- }
372
- .sb-plugin-info-box p {
373
- font-size: 14px;
374
- line-height: 22px;
375
- color: #434960;
376
- margin-top: 10px;
377
- }
378
- .sb-plugin-info-box img {
379
- max-width: 414px;
380
- margin-bottom: -5px;
381
- }
382
- /*** 4.0 - MODAL STYLE ***/
383
- .cff-oembed-modal {
384
- position: absolute;
385
- top: 0;
386
- left: 0;
387
- width: 100%;
388
- height: 100%;
389
- background: rgba(0, 0, 0, 0.4);
390
- z-index: 9;
391
- }
392
- .cff-modal-content {
393
- background-color: #fff;
394
- height: 381px;
395
- max-width: 572px;
396
- padding: 40px 75px 48px;
397
- box-sizing: border-box;
398
- position: relative;
399
- text-align: center;
400
- margin: 260px auto 0;
401
- }
402
- .cff-modal-content h2 {
403
- font-size: 24px;
404
- line-height: 29px;
405
- text-align: center;
406
- letter-spacing: 0;
407
- color: #141B38;
408
- margin: 0 0 5px 0;
409
- }
410
- .cff-modal-content p {
411
- font-size: 12px;
412
- line-height: 18px;
413
- text-align: center;
414
- color: #434960;
415
- }
416
- .cff-modal-content .cancel-btn{
417
- background: none;
418
- border: none;
419
- color: #141B38;
420
- position: absolute;
421
- top: 16px;
422
- right: 16px;
423
- padding: 0;
424
- cursor: pointer;
425
- }
426
- .cff-modal-content .modal-icon{
427
- margin-bottom: 45px;
428
- }
429
- .cff-modal-content .modal-icon img {
430
- max-width: 102px;
431
- }
432
- .cff-modal-content .sb-action-buttons{
433
- display: flex;
434
- justify-content: center;
435
- margin-top: 30px;
436
- }
437
- .cff-modal-content .sb-action-buttons button:not(:last-child) {
438
- margin-right: 7px;
439
- }
440
-
441
- .sb-action-buttons .cff-btn {
442
- display: flex;
443
- align-items: center;
444
- vertical-align: middle;
445
- justify-content: center;
446
- background: #F3F4F5;
447
- border: 1px solid #DCDDE1;
448
- box-sizing: border-box;
449
- border-radius: 2px;
450
- padding: 7px 30px;
451
- font-weight: 600;
452
- font-size: 14px;
453
- line-height: 22px;
454
- color: #141B38;
455
- box-sizing: border-box;
456
- letter-spacing: 0.2px;
457
- cursor: pointer;
458
- min-width: 175px;
459
- }
460
- .sb-action-buttons .cff-install-btn {
461
- background-color: #E34F0E;
462
- border-color: #E34F0E;
463
- color: #fff;
464
- }
465
- .sb-action-buttons .cff-install-btn:disabled {
466
- background: #F3F4F5;
467
- border: 1px solid #DCDDE1;
468
- color: #141B38;
469
- cursor: not-allowed
470
- }
471
- .sb-action-buttons .cff-install-btn:not(.success):disabled path {
472
- fill: #141B38;
473
- }
474
- .sb-action-buttons .cff-install-btn span {
475
- margin-right: 10px;
476
- }
477
-
478
- .sb-action-buttons .cff-install-btn.loading svg {
479
- height: 16px;
480
- transform: translate(0, 2px);
481
- }
482
-
483
- /*** 5.0 Sticky Widget ***/
484
- .cff-stck-wdg{
485
- position: fixed;
486
- right: 21px;
487
- z-index: 9;
488
- bottom: 20px;
489
- }
490
- .cff-stck-wdg-btn{
491
- width: 52px;
492
- height: 52px;
493
- background: #fff;
494
- border-radius: 50%;
495
- cursor: pointer;
496
- display: flex;
497
- justify-content: center;
498
- align-items: center;
499
- filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
500
- }
501
- .cff-stck-wdg-btn svg{
502
- width: 25px;
503
- fill: #E34F0E;
504
- height: 33px;
505
- }
506
-
507
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
508
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
509
- display: block;
510
- }
511
- .cff-stck-wdg-btn-cls{
512
- width: inherit;
513
- height: inherit;
514
- position: relative;
515
- color: #364152;
516
- box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
517
- border-radius: 70px;
518
- }
519
- .cff-stck-wdg-btn-cls svg {
520
- width: 14px;
521
- height: 14px;
522
- position: absolute;
523
- top: 50%;
524
- right: 0;
525
- bottom: 0;
526
- left: 50%;
527
- margin-top: -7px;
528
- margin-left: -7px;
529
- }
530
-
531
- .cff-stck-pop{
532
- position: absolute;
533
- width: 292px;
534
- height: auto;
535
- background: #fff;
536
- border: 1px solid #E2E8F0;
537
- box-sizing: border-box;
538
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
539
- border-radius: 2px;
540
- padding: 20px;
541
- right: 0px;
542
- bottom: 66px;
543
- color: #141B38;
544
- padding-bottom: 82px;
545
- }
546
- .cff-stck-wdg[data-active="true"] .cff-stck-pop{
547
- bottom: 66px;
548
- opacity: 1;
549
- visibility: visible;
550
- }
551
-
552
- .cff-stck-pop svg{
553
- fill: currentColor;
554
- }
555
- .cff-stck-el-list{
556
- border: 1px solid #DCDDE1;
557
- border-radius: 2px;
558
- }
559
- .cff-stck-el{
560
- display: flex;
561
- align-items: center;
562
- padding: 12px 13px 11px;
563
- border-bottom: 1px solid #DCDDE1;
564
- transition: background .15s ease-in-out;
565
- font-size: 12px;
566
- }
567
- .cff-stck-el:hover{
568
- background: #F3F4F5;
569
- }
570
- .cff-stck-el:last-of-type{
571
- border-bottom: 0px;
572
- }
573
- .cff-stck-el-list .cff-chevron svg{
574
- width: 5px;
575
- height: 8px;
576
- }
577
- .cff-fs-a {
578
- width: 100%;
579
- height: 100%;
580
- display: block;
581
- position: absolute;
582
- left: 0;
583
- top: 0;
584
- z-index: 1;
585
- }
586
- .cff-stck-el .cff-stck-el-txt{
587
- color: #27303F;
588
- }
589
- .cff-stck-el.cff-stck-el-upgrd{
590
- padding: 9px 14px;
591
- font-size: 14px;
592
- background: var(--cl-orange);
593
- color: #fff;
594
- position: relative;
595
- transition: background .15s ease-in-out;
596
- font-weight: 600;
597
- }
598
- .cff-chevron {
599
- position: absolute;
600
- right: 14px
601
- }
602
- .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
603
- color: #fff;
604
- }
605
- .cff-stck-el.cff-stck-el-upgrd:after{
606
- top: 20px;
607
- opacity: 1;
608
- }
609
- .cff-stck-el-icon{
610
- margin-right: 10px;
611
- }
612
- .cff-stck-el-icon svg{
613
- width: 17px;
614
- float: left;
615
- }
616
- .cff-stck-title{
617
- margin-top: 20px;
618
- margin-bottom: 10px;
619
- color: #141B38;
620
- font-weight: 600;
621
- font-size: 14px;
622
- line-height: 160%;
623
- }
624
- .cff-stck-follow{
625
- background: #F3F4F5;
626
- margin-top: 20px;
627
- left: 0px;
628
- bottom: 0px;
629
- position: absolute;
630
- padding: 12px 20px;
631
- display: flex;
632
- align-items: center;
633
- }
634
- .cff-stck-follow span{
635
- font-weight: 600;
636
- font-size: 14px;
637
- }
638
- .cff-stck-flw-links{
639
- display: flex;
640
- justify-content: center;
641
- align-items: center;
642
- margin-left: auto;
643
- }
644
- .cff-stck-flw-links a{
645
- width: 36px;
646
- height: 28px;
647
- color: inherit;
648
- display: inline-flex;
649
- justify-content: center;
650
- align-items: center;
651
- margin-left: 4px;
652
- border-radius: 2px;
653
- transition: background .15s ease-in-out;
654
- }
655
- .cff-stck-flw-links svg{
656
- width: 17px;
657
- color: #141B38;
658
- }
659
- .cff-stck-flw-links a:hover{
660
- background: #fff;
661
- }
662
- .cff-stck-flw-links a:hover svg{
663
- color: inherit;
664
- }
665
-
666
- /*** 6.0 - RESPONSIVENESS ***/
667
- @media (max-width: 1170px) {
668
- .cff-oembed-plugin-box .oembed-text {
669
- flex-basis: 78%;
670
- }
671
- }
672
-
673
- @media (max-width: 1024px) {
674
- .cff-oembed-plugin-box .oembed-text {
675
- flex-basis: 72%;
676
- }
677
- .sb-two-column-box {
678
- flex-direction: column;
679
- }
680
- .sb-two-column-box-1 {
681
- flex-direction: column-reverse;
682
- }
683
- .sb-two-column-box .sb-embed-info-text{
684
- padding: 0 35px;
685
- text-align: center;
686
- }
687
- .sb-two-column-box-2 img {
688
- margin-top: 0px;
689
- }
690
- .sb-two-column-box .sb-left,
691
- .sb-two-column-box .sb-right {
692
- max-width: 405px;
693
- margin: auto;
694
- }
695
- .sb-two-column-box.sb-plugin-info-box .sb-embed-info-text {
696
- margin-top: 25px;
697
- }
698
- .auto-fold #wpcontent {
699
- padding-left: 0px;
700
- }
701
- }
702
- @media (max-width: 767px) {
703
- .auto-fold #wpcontent {
704
- padding-left: 0;
705
- }
706
- .cff-fb-full-wrapper {
707
- padding: 70px 20px 0 20px;
708
- }
709
- .cff-fb-header {
710
- padding: 0px 20px;
711
- }
712
- .cff-fb-hd-btn {
713
- padding: 0px 15px 0px 7px;
714
- }
715
- .cff-about-box .sb-team-info {
716
- padding: 30px;
717
- }
718
- .cff-oembed-plugin-box {
719
- flex-wrap: wrap;
720
- }
721
- .cff-oembed-plugin-box .oembed-icon {
722
- width: 20px;
723
- vertical-align: middle;
724
- display: flex;
725
- }
726
- .cff-oembed-plugin-box .cff-oembed-btn {
727
- flex-basis: 114px;
728
- text-align: left;
729
- margin-top: 15px;
730
- }
731
- .cff-oembed-plugin-box .oembed-text {
732
- flex-basis: calc(100% - 40px);
733
- }
734
- .sb-plugin-info-box .sb-left,
735
- .sb-two-column-box-1 .sb-left,
736
- .sb-two-column-box-2 .sb-right,
737
- .sb-one-column-box img {
738
- display: none;
739
- }
740
- .sb-one-column-box {
741
- padding-bottom: 5px !important;
742
- }
743
- .sb-one-column-box h4 {
744
- margin-top: 21px;
745
- }
746
- .sb-two-column-box.sb-plugin-info-box .sb-embed-info-text {
747
- margin-top: 0;
748
- }
749
- .sb-plugin-info-box p {
750
- margin-bottom: 17px;
751
- }
752
- .cff-modal-content {
753
- margin: 80px auto 0;
754
- width: 90%;
755
- height: auto;
756
- padding: 40px 30px;
757
- }
758
- .cff-modal-content .modal-icon {
759
- margin-bottom: 30px;
760
- }
761
- .sb-plugin-info-box h4 {
762
- font-size: 16px;
763
- }
764
- }
765
- @media (max-width: 630px) {
766
- .sb-two-column-box img,
767
- .sb-one-column-box img {
768
- max-width: 100%;
769
- }
770
- .cff-modal-content .sb-action-buttons {
771
- flex-direction: column;
772
- }
773
- .cff-modal-content .sb-action-buttons button:not(:last-child) {
774
- margin-right: 0px;
775
- margin-bottom: 7px;
776
- }
777
- }
778
- @media (max-width: 530px) {
779
- .sb-two-column-box .sb-left,
780
- .sb-two-column-box .sb-right,
781
- .sb-one-column-box {
782
- padding: 0 20px;
783
- }
784
-
785
- .sb-two-column-box h4, .sb-one-column-box h4 {
786
- line-height: 22px;
787
- }
788
- .sb-one-column-box img {
789
- margin-bottom: -15px;
790
- }
791
  }
1
+ /*
2
+ * oEmbeds CSS TABLE OF CONTENTS
3
+ *
4
+ * 1.0 - GLOBAL
5
+ * 2.0 - HEADER
6
+ * 3.0 - 3.0 - OEMBEDS CONTAINER
7
+ * 3.1 - SECTION HEADER
8
+ * 3.2 - OEMBED ENABLE/DISABLE BOX
9
+ * 3.3 - OEMBED INFORMATION BOX
10
+ * 4.0 - MODAL STYLE
11
+ * 5.0 - STICKY WIDGET
12
+ * 6.0 - RESPONSIVENESS
13
+ */
14
+
15
+ /*** 1.0 - GLOBAL ***/
16
+ .clearfix { display: inline-block; }
17
+ /* start commented backslash hack \*/
18
+ * html .clearfix { height: 1%; }
19
+ .clearfix { display: block; }
20
+ .checkmark {
21
+ width: 21px;
22
+ height: 22px;
23
+ border-radius: 50%;
24
+ display: block;
25
+ stroke-width: 2;
26
+ stroke: #fff;
27
+ stroke-miterlimit: 10;
28
+ stroke-dashoffset: 0;
29
+ transform: translate(0px, -3px);
30
+ }
31
+ #cff-oembeds {
32
+ -webkit-font-smoothing: antialiased;
33
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
34
+ }
35
+ #wpcontent {
36
+ padding-left: 0px;
37
+ }
38
+ #wpbody-content {
39
+ padding-bottom: 40px;
40
+ }
41
+ .clearfix:after {
42
+ visibility: hidden;
43
+ display: block;
44
+ font-size: 0;
45
+ content: " ";
46
+ clear: both;
47
+ height: 0;
48
+ }
49
+ .cff-fb-full-wrapper{
50
+ padding: 0 53px;
51
+ padding-top: 82px;
52
+ }
53
+ .cff-fb-fs {
54
+ width: 100%;
55
+ position: relative;
56
+ float: left;
57
+ box-sizing: border-box;
58
+ }
59
+ /*orange*/
60
+ .sb-btn-orange{
61
+ background: #E34F0E!important;
62
+ color: #fff!important;
63
+ }
64
+ .sb-btn-orange:hover{
65
+ background: #F37036!important;
66
+ color: #fff!important;
67
+ }
68
+ .sb-btn-orange:focus,
69
+ .sb-btn-orange:active{
70
+ background: #B8400B!important;
71
+ color: #fff!important;
72
+ }
73
+
74
+ /* blue buttons */
75
+ .cff-btn-blue{
76
+ background: #0068A0!important;
77
+ color: #fff!important;
78
+ }
79
+ .cff-btn-blue:hover{
80
+ background: #0096CC!important;
81
+ color: #fff!important;
82
+ }
83
+ .cff-btn-blue:focus,
84
+ .cff-btn-blue:active{
85
+ background: #004D77!important;
86
+ color: #fff!important;
87
+ }
88
+
89
+ /*** 2.0 - HEADER ***/
90
+ .cff-fb-create-ctn{
91
+ margin-top: 90px;
92
+ }
93
+ .cff-fb-header{
94
+ height: 64px;
95
+ position: absolute;
96
+ display: flex;
97
+ flex-direction: row;
98
+ justify-content: space-between;
99
+ align-items: center;
100
+ background: #fff;
101
+ padding: 0px 52px;
102
+ z-index: 2;
103
+ }
104
+ .cff-fb-header-left {
105
+ display: flex;
106
+ }
107
+ .cff-fb-header-left .sb-social-wall-link-wrap {
108
+ margin-left: 30px;
109
+ }
110
+ .sb-social-wall-link-wrap {
111
+ display: flex;
112
+ font-size: 14px;
113
+ margin: 10px 0;
114
+ }
115
+ .sb-social-wall-link {
116
+ padding: 0 12px;
117
+ border-right: 1px solid #ccc;
118
+ color: #0068A0!important;
119
+ line-height: 1;
120
+ }
121
+ .sb-social-wall-link:first-child {
122
+ padding-left: 0;
123
+ border-right: 1px solid #ccc;
124
+ color: #0068A0!important;
125
+ line-height: 1;
126
+ }
127
+ .sb-social-wall-link:last-child {
128
+ border-right: none;
129
+ }
130
+ .sb-social-wall-link a {
131
+ text-decoration: none;
132
+ }
133
+ .sb-social-wall-link a:focus {
134
+ outline: none;
135
+ box-shadow: none;
136
+ }
137
+ .cff-fb-hd-logo{
138
+ display: flex;
139
+ vertical-align: middle;
140
+ align-items: center;
141
+ gap: 5px;
142
+ }
143
+ .cff-fb-hd-logo .sb-logo-letters-wrap {
144
+ margin-bottom: 4px;
145
+ }
146
+ .cff-fb-hd-logo .breadcrumb-title{
147
+ font-size: 14px;
148
+ font-weight: 400;
149
+ line-height: 22px;
150
+ letter-spacing: 0em;
151
+ margin-left: 4px;
152
+ }
153
+ .cff-fb-hd-logo .separator{
154
+ margin: 0 5px 0 10px;
155
+ }
156
+ .cff-fb-hd-btn{
157
+ height: 38px;
158
+ cursor: pointer;
159
+ display: flex;
160
+ flex-direction: row;
161
+ justify-content: center;
162
+ align-items: center;
163
+ padding: 0px 15px 0px 13px;
164
+ font-weight: 600;
165
+ font-size: 14px;
166
+ color: #353A41;
167
+ background: #F3F4F5;
168
+ border-radius: 2px;
169
+ border: 1px solid #DCDDE1;
170
+ position: relative;
171
+ text-decoration: none;
172
+ transition: all 0.3s ease;
173
+ box-sizing: border-box;
174
+ }
175
+ .cff-fb-hd-btn svg {
176
+ margin-right: 10px;
177
+ width: 16px;
178
+ }
179
+ .cff-fb-hd-btn:focus {
180
+ outline: none;
181
+ box-shadow: none;
182
+ }
183
+ .cff-fb-hd-btn:hover {
184
+ color: inherit;
185
+ background-color: #fff;
186
+ }
187
+ .cff-fb-hd-btn i{
188
+ margin: 0px 5px;
189
+ }
190
+ .cff-fb-hd-btn[data-icon="left"]{
191
+ padding-right: 20px!important;
192
+ }
193
+
194
+ .cff-fb-full-wrapper .section-header h1 {
195
+ font-size: 32px;
196
+ line-height: 40px;
197
+ }
198
+ /*** 3.0 - OEMBEDS CONTAINER ***/
199
+ .cff-oembeds-container {
200
+ max-width: 875px;
201
+ position: relative;
202
+ margin: auto;
203
+ margin-top: 33px;
204
+ box-sizing: border-box;
205
+ }
206
+
207
+ /*** 3.1 - SECTION HEADER ***/
208
+ .cff-section-header h3 {
209
+ font-weight: 600;
210
+ font-size: 32px;
211
+ line-height: 40px;
212
+ color: #141B38;
213
+ margin: 0 0 5px 0;
214
+ }
215
+ .cff-section-header p {
216
+ font-size: 13px;
217
+ line-height: 18px;
218
+ color: #434960;
219
+ margin: 0;
220
+ }
221
+ .cff-oembed-plugin-box {
222
+ background: #FFFFFF;
223
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
224
+ margin-bottom: 10px;
225
+ padding: 12px 20px;
226
+ display: flex;
227
+ justify-content: space-between;
228
+ align-items: center;
229
+ }
230
+
231
+ /*** 3.2 - OEMBED ENABLE/DISABLE BOX ***/
232
+ .cff-oembed-plugin-box-group {
233
+ margin-top: 35px;
234
+ }
235
+ .cff-oembed-plugin-box .oembed-text{
236
+ flex-basis: 645px;
237
+ }
238
+ .cff-oembed-plugin-box .cff-oembed-btn{
239
+ flex-basis: 125px;
240
+ text-align: right;
241
+ }
242
+ .cff-oembed-btn .cff-btn {
243
+ border-radius: 2px;
244
+ padding: 10px 20px;
245
+ border: 0px;
246
+ color: #fff;
247
+ font-size: 14px;
248
+ cursor: pointer;
249
+ transition: all .15s ease-in-out;
250
+ box-sizing: border-box;
251
+ text-decoration: none;
252
+ align-items: center;
253
+ display: flex;
254
+ align-items: center;
255
+ height: 38px;
256
+ float: right;
257
+ }
258
+ .cff-oembed-btn .cff-btn span {
259
+ margin-right: 5px;
260
+ height: 15px;
261
+ width: 15px;
262
+ }
263
+ .cff-oembed-btn .cff-btn svg {
264
+ width: 100%;
265
+ height: 100%;
266
+ }
267
+ .cff-oembed-btn button:hover {
268
+ background-color: #0096CC;
269
+ border-color: #0096CC;
270
+ }
271
+ .cff-oembed-btn .cff-btn:focus,
272
+ .cff-oembed-btn .cff-btn:active {
273
+ outline: none;
274
+ box-shadow: none;
275
+ }
276
+ .cff-oembed-btn button.disable-oembed {
277
+ background: #D72C2C;
278
+ }
279
+ .cff-oembed-btn button.disable-oembed:hover {
280
+ background-color: #DF5757;
281
+ border-color: #DF5757;
282
+ }
283
+ .cff-oembed-btn button.disable-oembed:focus,
284
+ .cff-oembed-btn button.disable-oembed:active {
285
+ background-color: #841919;
286
+ border-color: #841919;
287
+ }
288
+ .cff-oembed-btn button.loading svg {
289
+ height: 14px;
290
+ transform: translate(0, 2px);
291
+ }
292
+
293
+ /*** 3.3 - OEMBED INFORMATION BOX ***/
294
+ .cff-oembed-information {
295
+ background: #FFFFFF;
296
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
297
+ margin-bottom: 10px;
298
+ }
299
+ .cff-oembed-information .sb-box-header {
300
+ padding: 16px 20px;
301
+ border-bottom: 1px solid #E8E8EB;
302
+ }
303
+ .cff-oembed-information .sb-box-header h3 {
304
+ margin: 0;
305
+ font-weight: 600;
306
+ font-size: 18px;
307
+ line-height: 140%;
308
+ color: #141B38;
309
+ }
310
+ .sb-two-column-box {
311
+ display: flex;
312
+ justify-content: space-around;
313
+ align-items: center;
314
+ border-bottom: 1px solid #E8E8EB;
315
+ }
316
+ .sb-two-column-box-1 img {
317
+ max-width: 438px;
318
+ }
319
+ .sb-two-column-box-2 img{
320
+ margin-top: 20px;
321
+ max-width: 442px;
322
+ }
323
+ .sb-two-column-box .sb-embed-info-text {
324
+ padding: 0 75px 0 35px;
325
+ }
326
+ .sb-two-column-box-2 .sb-embed-info-text {
327
+ padding: 0 65px 0 30px;
328
+ }
329
+ .sb-two-column-box h4,
330
+ .sb-one-column-box h4 {
331
+ font-size: 16px;
332
+ font-weight: 600;
333
+ line-height: 26px;
334
+ color: #141B38;
335
+ }
336
+ .sb-one-column-box {
337
+ max-width: 405px;
338
+ margin: auto;
339
+ text-align: center;
340
+ }
341
+ .sb-one-column-box h4 {
342
+ padding: 0;
343
+ margin-top: 30px;
344
+ margin-bottom: 0px;
345
+ }
346
+ .sb-one-column-box p {
347
+ font-size: 14px;
348
+ line-height: 22px;
349
+ }
350
+ .sb-one-column-box img {
351
+ margin-top: 15px;
352
+ margin-bottom: -21px;
353
+ max-width: 392px;
354
+ }
355
+ .sb-two-column-box-1 .sb-left {
356
+ padding-left: 20px;
357
+ }
358
+ .sb-plugin-info-box {
359
+ padding-top: 20px;
360
+ }
361
+
362
+ .sb-plugin-info-box .sb-left {
363
+ padding-left: 35px;
364
+ }
365
+ .sb-plugin-info-box .sb-right {
366
+ padding: 0 60px 0 40px;
367
+ }
368
+ .sb-plugin-info-box h4 {
369
+ font-size: 18px;
370
+ margin: 0px;
371
+ }
372
+ .sb-plugin-info-box p {
373
+ font-size: 14px;
374
+ line-height: 22px;
375
+ color: #434960;
376
+ margin-top: 10px;
377
+ }
378
+ .sb-plugin-info-box img {
379
+ max-width: 414px;
380
+ margin-bottom: -5px;
381
+ }
382
+ /*** 4.0 - MODAL STYLE ***/
383
+ .cff-oembed-modal {
384
+ position: absolute;
385
+ top: 0;
386
+ left: 0;
387
+ width: 100%;
388
+ height: 100%;
389
+ background: rgba(0, 0, 0, 0.4);
390
+ z-index: 9;
391
+ }
392
+ .cff-modal-content {
393
+ background-color: #fff;
394
+ height: 381px;
395
+ max-width: 572px;
396
+ padding: 40px 75px 48px;
397
+ box-sizing: border-box;
398
+ position: relative;
399
+ text-align: center;
400
+ margin: 260px auto 0;
401
+ }
402
+ .cff-modal-content h2 {
403
+ font-size: 24px;
404
+ line-height: 29px;
405
+ text-align: center;
406
+ letter-spacing: 0;
407
+ color: #141B38;
408
+ margin: 0 0 5px 0;
409
+ }
410
+ .cff-modal-content p {
411
+ font-size: 12px;
412
+ line-height: 18px;
413
+ text-align: center;
414
+ color: #434960;
415
+ }
416
+ .cff-modal-content .cancel-btn{
417
+ background: none;
418
+ border: none;
419
+ color: #141B38;
420
+ position: absolute;
421
+ top: 16px;
422
+ right: 16px;
423
+ padding: 0;
424
+ cursor: pointer;
425
+ }
426
+ .cff-modal-content .modal-icon{
427
+ margin-bottom: 45px;
428
+ }
429
+ .cff-modal-content .modal-icon img {
430
+ max-width: 102px;
431
+ }
432
+ .cff-modal-content .sb-action-buttons{
433
+ display: flex;
434
+ justify-content: center;
435
+ margin-top: 30px;
436
+ }
437
+ .cff-modal-content .sb-action-buttons button:not(:last-child) {
438
+ margin-right: 7px;
439
+ }
440
+
441
+ .sb-action-buttons .cff-btn {
442
+ display: flex;
443
+ align-items: center;
444
+ vertical-align: middle;
445
+ justify-content: center;
446
+ background: #F3F4F5;
447
+ border: 1px solid #DCDDE1;
448
+ box-sizing: border-box;
449
+ border-radius: 2px;
450
+ padding: 7px 30px;
451
+ font-weight: 600;
452
+ font-size: 14px;
453
+ line-height: 22px;
454
+ color: #141B38;
455
+ box-sizing: border-box;
456
+ letter-spacing: 0.2px;
457
+ cursor: pointer;
458
+ min-width: 175px;
459
+ }
460
+ .sb-action-buttons .cff-install-btn {
461
+ background-color: #E34F0E;
462
+ border-color: #E34F0E;
463
+ color: #fff;
464
+ }
465
+ .sb-action-buttons .cff-install-btn:disabled {
466
+ background: #F3F4F5;
467
+ border: 1px solid #DCDDE1;
468
+ color: #141B38;
469
+ cursor: not-allowed
470
+ }
471
+ .sb-action-buttons .cff-install-btn:not(.success):disabled path {
472
+ fill: #141B38;
473
+ }
474
+ .sb-action-buttons .cff-install-btn span {
475
+ margin-right: 10px;
476
+ }
477
+
478
+ .sb-action-buttons .cff-install-btn.loading svg {
479
+ height: 16px;
480
+ transform: translate(0, 2px);
481
+ }
482
+
483
+ /*** 5.0 Sticky Widget ***/
484
+ .cff-stck-wdg{
485
+ position: fixed;
486
+ right: 21px;
487
+ z-index: 9;
488
+ bottom: 20px;
489
+ }
490
+ .cff-stck-wdg-btn{
491
+ width: 52px;
492
+ height: 52px;
493
+ background: #fff;
494
+ border-radius: 50%;
495
+ cursor: pointer;
496
+ display: flex;
497
+ justify-content: center;
498
+ align-items: center;
499
+ filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
500
+ }
501
+ .cff-stck-wdg-btn svg{
502
+ width: 25px;
503
+ fill: #E34F0E;
504
+ height: 33px;
505
+ }
506
+
507
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
508
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
509
+ display: block;
510
+ }
511
+ .cff-stck-wdg-btn-cls{
512
+ width: inherit;
513
+ height: inherit;
514
+ position: relative;
515
+ color: #364152;
516
+ box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
517
+ border-radius: 70px;
518
+ }
519
+ .cff-stck-wdg-btn-cls svg {
520
+ width: 14px;
521
+ height: 14px;
522
+ position: absolute;
523
+ top: 50%;
524
+ right: 0;
525
+ bottom: 0;
526
+ left: 50%;
527
+ margin-top: -7px;
528
+ margin-left: -7px;
529
+ }
530
+
531
+ .cff-stck-pop{
532
+ position: absolute;
533
+ width: 292px;
534
+ height: auto;
535
+ background: #fff;
536
+ border: 1px solid #E2E8F0;
537
+ box-sizing: border-box;
538
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
539
+ border-radius: 2px;
540
+ padding: 20px;
541
+ right: 0px;
542
+ bottom: 66px;
543
+ color: #141B38;
544
+ padding-bottom: 82px;
545
+ }
546
+ .cff-stck-wdg[data-active="true"] .cff-stck-pop{
547
+ bottom: 66px;
548
+ opacity: 1;
549
+ visibility: visible;
550
+ }
551
+
552
+ .cff-stck-pop svg{
553
+ fill: currentColor;
554
+ }
555
+ .cff-stck-el-list{
556
+ border: 1px solid #DCDDE1;
557
+ border-radius: 2px;
558
+ }
559
+ .cff-stck-el{
560
+ display: flex;
561
+ align-items: center;
562
+ padding: 12px 13px 11px;
563
+ border-bottom: 1px solid #DCDDE1;
564
+ transition: background .15s ease-in-out;
565
+ font-size: 12px;
566
+ }
567
+ .cff-stck-el:hover{
568
+ background: #F3F4F5;
569
+ }
570
+ .cff-stck-el:last-of-type{
571
+ border-bottom: 0px;
572
+ }
573
+ .cff-stck-el-list .cff-chevron svg{
574
+ width: 5px;
575
+ height: 8px;
576
+ }
577
+ .cff-fs-a {
578
+ width: 100%;
579
+ height: 100%;
580
+ display: block;
581
+ position: absolute;
582
+ left: 0;
583
+ top: 0;
584
+ z-index: 1;
585
+ }
586
+ .cff-stck-el .cff-stck-el-txt{
587
+ color: #27303F;
588
+ }
589
+ .cff-stck-el.cff-stck-el-upgrd{
590
+ padding: 9px 14px;
591
+ font-size: 14px;
592
+ background: var(--cl-orange);
593
+ color: #fff;
594
+ position: relative;
595
+ transition: background .15s ease-in-out;
596
+ font-weight: 600;
597
+ }
598
+ .cff-chevron {
599
+ position: absolute;
600
+ right: 14px
601
+ }
602
+ .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
603
+ color: #fff;
604
+ }
605
+ .cff-stck-el.cff-stck-el-upgrd:after{
606
+ top: 20px;
607
+ opacity: 1;
608
+ }
609
+ .cff-stck-el-icon{
610
+ margin-right: 10px;
611
+ }
612
+ .cff-stck-el-icon svg{
613
+ width: 17px;
614
+ float: left;
615
+ }
616
+ .cff-stck-title{
617
+ margin-top: 20px;
618
+ margin-bottom: 10px;
619
+ color: #141B38;
620
+ font-weight: 600;
621
+ font-size: 14px;
622
+ line-height: 160%;
623
+ }
624
+ .cff-stck-follow{
625
+ background: #F3F4F5;
626
+ margin-top: 20px;
627
+ left: 0px;
628
+ bottom: 0px;
629
+ position: absolute;
630
+ padding: 12px 20px;
631
+ display: flex;
632
+ align-items: center;
633
+ }
634
+ .cff-stck-follow span{
635
+ font-weight: 600;
636
+ font-size: 14px;
637
+ }
638
+ .cff-stck-flw-links{
639
+ display: flex;
640
+ justify-content: center;
641
+ align-items: center;
642
+ margin-left: auto;
643
+ }
644
+ .cff-stck-flw-links a{
645
+ width: 36px;
646
+ height: 28px;
647
+ color: inherit;
648
+ display: inline-flex;
649
+ justify-content: center;
650
+ align-items: center;
651
+ margin-left: 4px;
652
+ border-radius: 2px;
653
+ transition: background .15s ease-in-out;
654
+ }
655
+ .cff-stck-flw-links svg{
656
+ width: 17px;
657
+ color: #141B38;
658
+ }
659
+ .cff-stck-flw-links a:hover{
660
+ background: #fff;
661
+ }
662
+ .cff-stck-flw-links a:hover svg{
663
+ color: inherit;
664
+ }
665
+
666
+ /*** 6.0 - RESPONSIVENESS ***/
667
+ @media (max-width: 1170px) {
668
+ .cff-oembed-plugin-box .oembed-text {
669
+ flex-basis: 78%;
670
+ }
671
+ }
672
+
673
+ @media (max-width: 1024px) {
674
+ .cff-oembed-plugin-box .oembed-text {
675
+ flex-basis: 72%;
676
+ }
677
+ .sb-two-column-box {
678
+ flex-direction: column;
679
+ }
680
+ .sb-two-column-box-1 {
681
+ flex-direction: column-reverse;
682
+ }
683
+ .sb-two-column-box .sb-embed-info-text{
684
+ padding: 0 35px;
685
+ text-align: center;
686
+ }
687
+ .sb-two-column-box-2 img {
688
+ margin-top: 0px;
689
+ }
690
+ .sb-two-column-box .sb-left,
691
+ .sb-two-column-box .sb-right {
692
+ max-width: 405px;
693
+ margin: auto;
694
+ }
695
+ .sb-two-column-box.sb-plugin-info-box .sb-embed-info-text {
696
+ margin-top: 25px;
697
+ }
698
+ .auto-fold #wpcontent {
699
+ padding-left: 0px;
700
+ }
701
+ }
702
+ @media (max-width: 767px) {
703
+ .auto-fold #wpcontent {
704
+ padding-left: 0;
705
+ }
706
+ .cff-fb-full-wrapper {
707
+ padding: 70px 20px 0 20px;
708
+ }
709
+ .cff-fb-header {
710
+ padding: 0px 20px;
711
+ }
712
+ .cff-fb-hd-btn {
713
+ padding: 0px 15px 0px 7px;
714
+ }
715
+ .cff-about-box .sb-team-info {
716
+ padding: 30px;
717
+ }
718
+ .cff-oembed-plugin-box {
719
+ flex-wrap: wrap;
720
+ }
721
+ .cff-oembed-plugin-box .oembed-icon {
722
+ width: 20px;
723
+ vertical-align: middle;
724
+ display: flex;
725
+ }
726
+ .cff-oembed-plugin-box .cff-oembed-btn {
727
+ flex-basis: 114px;
728
+ text-align: left;
729
+ margin-top: 15px;
730
+ }
731
+ .cff-oembed-plugin-box .oembed-text {
732
+ flex-basis: calc(100% - 40px);
733
+ }
734
+ .sb-plugin-info-box .sb-left,
735
+ .sb-two-column-box-1 .sb-left,
736
+ .sb-two-column-box-2 .sb-right,
737
+ .sb-one-column-box img {
738
+ display: none;
739
+ }
740
+ .sb-one-column-box {
741
+ padding-bottom: 5px !important;
742
+ }
743
+ .sb-one-column-box h4 {
744
+ margin-top: 21px;
745
+ }
746
+ .sb-two-column-box.sb-plugin-info-box .sb-embed-info-text {
747
+ margin-top: 0;
748
+ }
749
+ .sb-plugin-info-box p {
750
+ margin-bottom: 17px;
751
+ }
752
+ .cff-modal-content {
753
+ margin: 80px auto 0;
754
+ width: 90%;
755
+ height: auto;
756
+ padding: 40px 30px;
757
+ }
758
+ .cff-modal-content .modal-icon {
759
+ margin-bottom: 30px;
760
+ }
761
+ .sb-plugin-info-box h4 {
762
+ font-size: 16px;
763
+ }
764
+ }
765
+ @media (max-width: 630px) {
766
+ .sb-two-column-box img,
767
+ .sb-one-column-box img {
768
+ max-width: 100%;
769
+ }
770
+ .cff-modal-content .sb-action-buttons {
771
+ flex-direction: column;
772
+ }
773
+ .cff-modal-content .sb-action-buttons button:not(:last-child) {
774
+ margin-right: 0px;
775
+ margin-bottom: 7px;
776
+ }
777
+ }
778
+ @media (max-width: 530px) {
779
+ .sb-two-column-box .sb-left,
780
+ .sb-two-column-box .sb-right,
781
+ .sb-one-column-box {
782
+ padding: 0 20px;
783
+ }
784
+
785
+ .sb-two-column-box h4, .sb-one-column-box h4 {
786
+ line-height: 22px;
787
+ }
788
+ .sb-one-column-box img {
789
+ margin-bottom: -15px;
790
+ }
791
  }
admin/assets/css/settings.css CHANGED
@@ -1,1914 +1,1914 @@
1
- /*
2
- * Settings CSS TABLE OF CONTENTS
3
- *
4
- * 1.0 - Global
5
- * 2.0 - CFF CSS Framework
6
- * 2.1 - Utility CSS
7
- * 2.2 - Notification Element
8
- * 3.0 - Header
9
- * 4.0 - Content
10
- * 4.1 - Tab Styles
11
- * 4.2 - Tab Boxes
12
- * 5.0 - Footer
13
- * 6.0 - Sticky Widget
14
- * 7.0 - Responsiveness
15
- */
16
-
17
- /*** 1.0 - Global ***/
18
- .clearfix { display: inline-block; }
19
- /* start commented backslash hack \*/
20
- * html .clearfix { height: 1%; }
21
- .clearfix { display: block; }
22
- #cff-settings {
23
- -webkit-font-smoothing: antialiased;
24
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
25
- }
26
- #wpcontent {
27
- padding-left: 0px;
28
- }
29
- .clearfix:after {
30
- visibility: hidden;
31
- display: block;
32
- font-size: 0;
33
- content: " ";
34
- clear: both;
35
- height: 0;
36
- }
37
- .checkmark {
38
- width: 21px;
39
- height: 22px;
40
- border-radius: 50%;
41
- display: block;
42
- stroke-width: 2;
43
- stroke: #59AB46;
44
- stroke-miterlimit: 10;
45
- stroke-dashoffset: 0;
46
- }
47
- .cff-fb-full-wrapper{
48
- padding: 0 53px;
49
- padding-top: 82px;
50
- }
51
- .cff-fb-fs {
52
- width: 100%;
53
- position: relative;
54
- float: left;
55
- box-sizing: border-box;
56
- }
57
-
58
- /*** 2.0 - CFF CSS Framework ***/
59
- .d-flex {
60
- display: flex;
61
- }
62
- .justify-between {
63
- justify-content: space-between;
64
- }
65
- .items-center{
66
- align-items: center;
67
- }
68
- /* CFF Form Fields */
69
- .sb-form-field {
70
- display: block;
71
- position: relative;
72
- }
73
- .sb-form-field .help-text {
74
- font-size: 13px;
75
- line-height: 22px;
76
- color: #434960;
77
- font-weight: 400;
78
- word-spacing: 0.3px;
79
- max-width: 640px;
80
- }
81
- .sb-form-field .help-text-green {
82
- color: #59AB46;
83
- }
84
- .sb-form-field .help-text a {
85
- color: inherit;
86
- font-weight: 500;
87
- }
88
- /* input field styles */
89
- .sb-form-field .cff-form-field {
90
- background: #FFFFFF;
91
- border: 1px solid #D0D1D7;
92
- box-sizing: border-box;
93
- border-radius: 1px;
94
- height: 38px;
95
- padding: 8px;
96
- }
97
- .sb-form-field .cff-form-field:focus {
98
- outline: none;
99
- box-shadow: none;
100
- }
101
- .sb-form-field .field-icon {
102
- position: absolute;
103
- right: 8px;
104
- top: 10px;
105
- font-size: 20px;
106
- }
107
- /* cff-checkbox styles */
108
- .cff-checkbox {
109
- align-items: center;
110
- border-radius: 100px;
111
- display: flex;
112
- font-weight: 700;
113
- margin-bottom: 15px;
114
- }
115
- .cff-checkbox input[type=checkbox] {
116
- clip: rect(0 0 0 0);
117
- clip-path: inset(50%);
118
- height: 1px;
119
- overflow: hidden;
120
- position: absolute;
121
- white-space: nowrap;
122
- width: 1px;
123
- }
124
- .toggle-track {
125
- width: 36px;
126
- height: 20px;
127
- position: relative;
128
- background: #9e9e9e;
129
- border-radius: 31px;
130
- }
131
- .toggle-indicator {
132
- width: 16px;
133
- height: 16px;
134
- background-color: #fff;
135
- border-radius: 100px;
136
- top: 2px;
137
- position: absolute;
138
- left: 2px;
139
- transition: all .3s cubic-bezier(0.23, 1, 0.320, 1);
140
- }
141
- .cff-checkbox input[type=checkbox]:checked + .toggle-track .toggle-indicator {
142
- left: 18px;
143
- }
144
- .cff-checkbox input[type=checkbox]:checked + .toggle-track {
145
- background: #0096CC;
146
- }
147
- .cff-checkbox input[type=checkbox]:disabled + .toggle-track {
148
- background-color: #D0D1D7;
149
- }
150
- .cff-checkbox input[type=checkbox]:disabled + .toggle-track .toggle-indicator {
151
- left: 2px;
152
- }
153
- .cff-error-text {
154
- color: #D72C2C;
155
- }
156
- .cff-error-text a {
157
- color: inherit;
158
- }
159
- .cff-fb-cp-clpboard{
160
- width: 0px;
161
- height: 0px;
162
- position: absolute;
163
- left: -100000px;
164
- }
165
- /* cff-select */
166
- .sb-form-field .cff-select {
167
- min-width: 235px;
168
- border: 1px solid #D0D1D7;
169
- padding: 8px 35px 8px 15px;
170
- height: 50px;
171
- font-size: 16px;
172
- color: #141B38;
173
- -webkit-appearance: none;
174
- appearance: none;
175
- background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABSSURBVHgBfc4hCkAhDAbgjV3slQcvvHuYDWY1G8zewyIWb6YuCCLqD4Pt5wtD54NBQA2XVKiWcorl/X7s+DkhJYUhPk54IN5plCue0Tb8M8/aNx/uIpRVqbbFAAAAAElFTkSuQmCC') no-repeat right 15px top 55%;
176
- box-sizing: border-box;
177
- }
178
- .sb-form-field .cff-input-sm {
179
- width: 80px;
180
- border: 1px solid #D0D1D7;
181
- text-align: right;
182
- font-size: 16px;
183
- }
184
- .sb-form-field .cff-select.size-md {
185
- width: 422px;
186
- }
187
- .sb-form-field .cff-select.size-sm {
188
- width: 210px;
189
- min-width: 210px;
190
- }
191
- .sb-form-field .cff-select.size-xs {
192
- min-width: 100px;
193
- width: 100px;
194
- }
195
- .sb-form-field .cff-textarea {
196
- width: 100%;
197
- min-height: 100px;
198
- padding: 12px;
199
- border: 1px solid #D0D1D7;
200
- font-size: 16px;
201
- }
202
- .sb-form-field .cff-textarea::placeholder {
203
- color: #8C8F9A;
204
- }
205
- .sb-form-field .cff-textarea:focus {
206
- outline: none;
207
- box-shadow: none;
208
- border-color: #9c9ca0;
209
- }
210
- /* CFF Buttons */
211
- .cff-btn {
212
- display: flex;
213
- align-items: center;
214
- vertical-align: middle;
215
- background: #F3F4F5;
216
- border: 1px solid #DCDDE1;
217
- box-sizing: border-box;
218
- border-radius: 2px;
219
- padding: 7px 20px;
220
- font-weight: 600;
221
- font-size: 14px;
222
- line-height: 22px;
223
- color: #141B38;
224
- box-sizing: border-box;
225
- letter-spacing: 0.2px;
226
- cursor: pointer;
227
- transition: all 0.15s ease-in-out;
228
- }
229
- .cff-btn:hover {
230
- background: #FFFFFF;
231
- border: 1px solid #D0D1D7;
232
- }
233
- .cff-btn:focus,
234
- .cff-btn:active {
235
- background: #E8E8EB;
236
- border: 1px solid #D0D1D7;
237
- }
238
- .cff-btn .sb-btn-icon {
239
- margin-right: 10px;
240
- max-width: 15px;
241
- }
242
- .cff-btn.sb-btn-lg {
243
- height: 50px;
244
- font-size: 16px;
245
- padding: 7px 25px;
246
- }
247
- .cff-btn.sb-btn-blue {
248
- background-color: #0068A0;
249
- color: #fff;
250
- border-color: #096292;
251
- }
252
- .cff-btn span:not('.cff-button-text') {
253
- line-height: 1;
254
- margin-right: 5px;
255
- }
256
- .sb-btn-orange {
257
- background: #E34F0E;
258
- color: #fff;
259
- font-style: normal;
260
- font-weight: 600;
261
- font-size: 14px;
262
- line-height: 160%;
263
- }
264
- .sb-tabs-container .sb-tabs .sb-btn-orange {
265
- margin-top: -20px;
266
- }
267
- .cff-btn svg.checkmark {
268
- stroke: #fff;
269
- transform: translate(-7px, -3px);
270
- }
271
- .input-hidden {
272
- height: 0px;
273
- width: 0px;
274
- overflow: hidden;
275
- }
276
-
277
- /*** 2.1 - CFF Utility CSS ***/
278
- .mr-3 {
279
- margin-right: 3px;
280
- }
281
- .mr-4 {
282
- margin-right: 4px;
283
- }
284
- .mb-6 {
285
- margin-bottom: 6px;
286
- }
287
- .mb-10 {
288
- margin-bottom: 10px;
289
- }
290
- .mb-15 {
291
- margin-bottom: 15px;
292
- }
293
- .mb-20 {
294
- margin-bottom: 20px;
295
- }
296
- .mb-30 {
297
- margin-bottom: 30px;
298
- }
299
- .mb-40 {
300
- margin-bottom: 40px;
301
- }
302
- .mb-50 {
303
- margin-bottom: 50px;
304
- }
305
- .ml-10 {
306
- margin-left: 15px;
307
- }
308
-
309
- /*** 2.1 Notification Element ***/
310
- .sb-notification-ctn{
311
- position: fixed;
312
- bottom: -100px;
313
- left: 200px;
314
- z-index: 99999;
315
- background: #fff;
316
- display: flex;
317
- justify-content: center;
318
- align-items: center;
319
- border-left: 3px solid #fff;
320
- line-height: 1em;
321
- padding: 10px 20px;
322
- padding-left: 0px;
323
- border-radius: 4px;
324
- box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
325
-
326
- }
327
- .sb-notification-ctn[data-active="hidden"]{
328
- -webkit-animation: cff-notification-hide .5s forwards linear;
329
- animation: cff-notification-hide .5s forwards linear;
330
- }
331
- .sb-notification-ctn[data-active="shown"]{
332
- -webkit-animation: cff-notification-show .5s forwards linear;
333
- animation: cff-notification-show .5s forwards linear;
334
- }
335
- @-webkit-keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
336
- @keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
337
-
338
- @-webkit-keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
339
- @keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
340
-
341
- .sb-notification-ctn[data-type="success"]{
342
- border-color: #59AB46;
343
- }
344
- .sb-notification-ctn[data-type="error"]{
345
- border-color: #D72C2C;
346
- }
347
- .sb-notification-ctn[data-type="message"]{
348
- border-color: #141B38;
349
- }
350
- .sb-notification-icon{
351
- width: 25px;
352
- height: 25px;
353
- display: flex;
354
- justify-content: center;
355
- align-items: center;
356
- margin-left: 10px;
357
- margin-right: 15px;
358
- }
359
- .sb-notification-icon svg{
360
- width: 22px;
361
- height: 22px;
362
- float: left;
363
- fill: currentColor;
364
- }
365
-
366
- .sb-notification-ctn[data-type="success"] .sb-notification-icon{
367
- color: #59AB46;
368
- }
369
- .sb-notification-ctn[data-type="error"] .sb-notification-icon{
370
- color: #D72C2C;
371
- }
372
- .sb-notification-ctn[data-type="message"] .sb-notification-icon{
373
- color: #141B38;
374
- }
375
-
376
- .sb-notification-ctn span{
377
- font-size: 14px;
378
- color: #141B38;
379
- font-weight:500;
380
- }
381
-
382
- /*** 3.0 - Header ***/
383
- .cff-fb-create-ctn{
384
- margin-top: 90px;
385
- }
386
- .cff-fb-header{
387
- height: 64px;
388
- position: absolute;
389
- display: flex;
390
- flex-direction: row;
391
- justify-content: space-between;
392
- align-items: center;
393
- background: #fff;
394
- padding: 0px 52px;
395
- z-index: 2;
396
- }
397
- .cff-fb-header-left {
398
- display: flex;
399
- }
400
- .cff-fb-header-left .sb-social-wall-link-wrap {
401
- margin-left: 30px;
402
- }
403
- .cff-fb-hd-logo{
404
- display: flex;
405
- vertical-align: middle;
406
- align-items: center;
407
- gap: 5px;
408
- }
409
- .cff-fb-hd-logo .sb-logo-letters-wrap {
410
- margin-bottom: 4px;
411
- }
412
- .cff-fb-hd-logo .breadcrumb-title{
413
- font-size: 14px;
414
- font-weight: 400;
415
- line-height: 22px;
416
- letter-spacing: 0em;
417
- margin-left: 4px;
418
- }
419
- .cff-fb-hd-logo .separator{
420
- margin: 0 5px 0 10px;
421
- }
422
- .cff-fb-hd-btn{
423
- height: 38px;
424
- cursor: pointer;
425
- display: flex;
426
- flex-direction: row;
427
- justify-content: center;
428
- align-items: center;
429
- padding: 0px 15px 0px 13px;
430
- font-weight: 600;
431
- font-size: 14px;
432
- color: #353A41;
433
- background: #F3F4F5;
434
- border-radius: 2px;
435
- border: 1px solid #DCDDE1;
436
- position: relative;
437
- text-decoration: none;
438
- transition: all 0.3s ease;
439
- box-sizing: border-box;
440
- }
441
- .cff-fb-hd-btn svg {
442
- margin-right: 10px;
443
- width: 16px;
444
- }
445
- .cff-fb-hd-btn:hover {
446
- color: inherit;
447
- background-color: #fff;
448
- }
449
- .cff-fb-hd-btn i{
450
- margin: 0px 5px;
451
- }
452
- .cff-fb-hd-btn[data-icon="left"]{
453
- padding-right: 20px!important;
454
- }
455
-
456
- .cff-fb-full-wrapper .section-header {
457
- margin-top: 33px;
458
- }
459
- .cff-fb-full-wrapper .section-header h1 {
460
- font-size: 32px;
461
- line-height: 40px;
462
- }
463
- /*** 4.0 - Content ***/
464
-
465
- /*** 4.1 - Tab Styles ***/
466
- .sb-tabs-container {
467
- position: relative;
468
- width: 100%;
469
- margin-top: 28px;
470
- }
471
- .sb-tabs-container .sb-tab-content .sb-tab-content-inner {
472
- width: 100%;
473
- margin-top: 20px;
474
- height: auto;
475
- padding-bottom: 30px;
476
- }
477
- .sb-tabs-container .cff-save-button {
478
- display: flex;
479
- justify-content: flex-end;
480
- margin-top: 30px;
481
- }
482
- .sb-tabs-container .sb-tabs {
483
- position: relative;
484
- display: flex;
485
- align-items: center;
486
- justify-content: space-between;
487
- margin-bottom: 20px;
488
- }
489
- .sb-tabs-container .sb-tabs:after {
490
- position: absolute;
491
- content: '';
492
- width: 100%;
493
- height: 1px;
494
- background-color: #DCDDE1;
495
- bottom: 0px;
496
- left: 0px;
497
- z-index: -1;
498
- }
499
- .sb-tabs-container .sb-tabs .tab {
500
- position: relative;
501
- padding: 9px 25px 15px 25px;
502
- display: inline-block;
503
- font-weight: 500;
504
- font-size: 16px;
505
- line-height: 160%;
506
- color: #8C8F9A;
507
- text-decoration: none;
508
- cursor: pointer;
509
- -webkit-transition: linear 0.2s;
510
- -ms-transition: linear 0.2s;
511
- transition: linear 0.2s;
512
- }
513
- .sb-tabs-container .sb-tabs .tab:not(:last-child) {
514
- margin-right: 20px;
515
- }
516
- .sb-tabs-container .sb-tabs .tab.active {
517
- color: #0068A0;
518
- }
519
- .sb-tabs-container .sb-tabs .tab-indicator {
520
- position: absolute;
521
- bottom: 0px;
522
- left: 0px;
523
- background-color: #0068A0;
524
- width: 200px;
525
- height: 2px;
526
- transition: all 0.7s cubic-bezier(0.22, 0.51, 0.53, 0.88);
527
- }
528
-
529
- .slide-fade-enter-active {
530
- transition: all 0.3s ease;
531
- position: absolute;
532
- }
533
- .slide-fade-leave-active {
534
- position: absolute;
535
- transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
536
- }
537
- .slide-fade-enter,
538
- .slide-fade-leave-to {
539
- transform: translateX(10px);
540
- opacity: 0;
541
- }
542
-
543
- /*** 4.2 - Tab Boxes ***/
544
- .sb-tab-content{
545
- width: 100%;
546
- height: auto;
547
- }
548
- .sb-tab-content .sb-tab-box {
549
- background-color: #fff;
550
- padding: 24px;
551
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
552
- margin-bottom: 12px;
553
- }
554
- .sb-tab-content > div {
555
- background-color: #f0f0f1;
556
- }
557
- .sb-tab-content.cff-license-free .sb-tab-box.sb-caching-box,
558
- .sb-tab-content.cff-license-free .sb-tab-box.sb-optimize-box {
559
- padding-bottom: 0;
560
- }
561
- .sb-tab-content .sb-tab-box h3,
562
- #cff-settings .sb-tab-content .sb-tab-box h3 {
563
- margin: 0px 0px 5px;
564
- font-size: 18px;
565
- line-height: 140%;
566
- color: #141B38;
567
- display: flex;
568
- }
569
- .sb-tab-content .sb-tab-box h3 .sb-tooltip-info {
570
- transform: translate(10px, 2px);
571
- cursor: pointer;
572
- }
573
- .sb-tab-content .sb-tab-box p {
574
- font-size: 14px;
575
- line-height: 160%;
576
- color: #8C8F9A;
577
- margin: 0px;
578
- }
579
- .sb-tab-content .sb-tab-box .tab-label {
580
- max-width: 270px;
581
- min-width: 270px;
582
- padding-right: 55px;
583
- box-sizing: border-box;
584
- float: left;
585
- position: relative;
586
- }
587
- .sb-tab-content .sb-tab-box .tab-label.tab-label-full {
588
- min-width: 100%;
589
- max-width: 100%;
590
- padding-right: 0;
591
- float: initial;
592
- }
593
- .sb-tab-content .sb-tab-box .tab-label .sb-help-text {
594
- font-size: 14px;
595
- line-height: 160%;
596
- color: #8C8F9A;
597
- }
598
- .sb-tab-content .sb-tab-box .cff-caching-pro-cta {
599
- width: calc(100% + 48px);
600
- display: flex;
601
- flex-direction: row;
602
- justify-content: center;
603
- align-items: center;
604
- padding: 0px 128px;
605
- background: #E2F5FF;
606
- margin-left: -24px;
607
- box-sizing: border-box;
608
- }
609
- .sb-tab-content .sb-tab-box .cff-caching-pro-cta a {
610
- text-decoration: none;
611
- display: block;
612
- padding: 8px 0;
613
- }
614
- .sb-tab-content .sb-tab-box .cff-caching-pro-cta span {
615
- font-weight: 600;
616
- font-size: 14px;
617
- line-height: 160%;
618
- color: #0068A0;
619
- width: 100%;
620
- text-align: center;
621
- }
622
- .sb-tab-content .sb-tab-box .cff-caching-pro-cta .cff-upgrade-cta-icon {
623
- margin-left: 6px;
624
- }
625
- .sb-tab-content .license-status {
626
- font-size: 14px;
627
- line-height: 160%;
628
- color: #141B38;
629
- margin-bottom: 8px;
630
- display: inline-block;
631
- }
632
- .sb-tab-box.sb-license-box.license-type-free .license-status {
633
- font-style: italic;
634
- }
635
- .sb-tab-content .sb-tab-box .cff-tab-form-field{
636
- width: calc(100% - 270px);
637
- float: left;
638
- flex-wrap: wrap;
639
- }
640
- .sb-tab-content .sb-tab-box.sb-caching-box .cff-tab-form-field {
641
- margin-bottom: 10px;
642
- }
643
- .sb-tab-content .sb-tab-box.sb-optimize-box .cff-tab-form-field {
644
- margin-bottom: 20px;
645
- }
646
- .sb-tab-content .sb-tab-box .cff-tab-form-field .cff-tab-field-inner-wrap {
647
- width: 100%;
648
- }
649
- .cff-tab-field-inner-wrap .upgrade-info{
650
- border-bottom: 1px solid #DCDDE1;
651
- margin-bottom: 24px;
652
- padding-bottom: 24px;
653
- }
654
- .dev-site-license-field .upgrade-info{
655
- border-bottom: 0px solid #DCDDE1;
656
- padding-bottom: 0px;
657
- }
658
- .dev-site-license-field .cff-upgrade-license-btn {
659
- text-decoration: none;
660
- transform: none !important;
661
- height: 38px;
662
- padding: 4px 13px;
663
- width: 165px;
664
- box-sizing: border-box;
665
- border: none;
666
- }
667
- .dev-site-license-field .cff-upgrade-license-btn span {
668
- height: 20px;
669
- margin-right: 9px;
670
- }
671
- .sb-tab-content .sb-tab-box .cff-tab-form-field .cff-tab-field-inner-wrap:not(:last-child) {
672
- margin-bottom: 20px;
673
- }
674
- .sb-tab-box.sb-license-box.license-type-free .cff-tab-form-field {
675
- flex-basis: 58%;
676
- flex-wrap: wrap;
677
- }
678
- .sb-tab-box.sb-manage-sources-box .cff-tab-form-field {
679
- max-width: 1200px;
680
- }
681
- .sb-tab-box.sb-custom-css-box .cff-tab-form-field,
682
- .sb-tab-box.sb-custom-js-box .cff-tab-form-field {
683
- max-width: 840px;
684
- }
685
- @media (max-width: 1023px) {
686
- .sb-tab-content .sb-tab-box .tab-label {
687
- width: 100%;
688
- max-width: 100%;
689
- padding-right: 0;
690
- float: initial;
691
- margin-bottom: 20px;
692
- }
693
- .sb-tab-content .sb-tab-box .cff-tab-form-field{
694
- width: 100%;
695
- float: intial;
696
- }
697
- }
698
-
699
- .sb-tab-box.sb-license-box.license-type-free .cff-tab-form-field .upgrade-info {
700
- width: 100%;
701
- border-bottom: 1px solid #DCDDE1;
702
- padding-bottom: 25px;
703
- margin-bottom: 25px;
704
- }
705
- .sb-tab-box.sb-license-box.license-type-free .field-left-content,
706
- .sb-tab-box.sb-license-box.license-type-free .field-right-content {
707
- order: 1;
708
- }
709
- .sb-tab-content .sb-tab-box .cff-tab-form-field .cff-form-field {
710
- width: 100%;
711
- }
712
- .license-valid .cff-form-field,
713
- .license-valid .cff-form-field:focus {
714
- border-color: #59AB46;
715
- }
716
- .license-invalid .cff-form-field {
717
- border-color: #D72C2C;
718
- }
719
- .sb-field-error .cff-form-field,
720
- .sb-field-error .cff-form-field:focus {
721
- border-color: #D72C2C;
722
- }
723
- .license-valid .field-icon {
724
- color: #59AB46;
725
- }
726
- .field-icon.field-icon-error {
727
- color: #D72C2C;
728
- }
729
- .license-valid .sb-form-field .field-icon,
730
- .sb-form-field .field-icon.field-icon-error {
731
- background: white;
732
- }
733
- .form-error .cff-tab-form-field .cff-form-field {
734
- border-color: #ab4646;
735
- }
736
- .upgrade-info span {
737
- font-size: 14px;
738
- line-height: 22px;
739
- display: inline-block;
740
- }
741
- .upgrade-info span:last-child {
742
- font-style: italic;
743
- }
744
- .upgrade-info span a {
745
- font-weight: 700;
746
- color: #0068A0;
747
- }
748
- .sb-tab-content .sb-tab-box .cff-tab-form-field .cff-btn{
749
- transform: translate(10px, 0px);
750
- }
751
- .sb-tab-content .sb-tab-box.sb-caching-box .cff-tab-form-field .cff-btn,
752
- .sb-tab-content .sb-tab-box.sb-import-box .cff-tab-form-field .cff-btn{
753
- transform: translate(0px);
754
- }
755
- .sb-tab-content .sb-tab-box.sb-license-box .cff-tab-form-field .sb-form-field{
756
- margin-bottom: 8px;
757
- }
758
- .license-valid .cff-btn.loading svg path {
759
- fill: #141B38
760
- }
761
- .sb-tab-content .sb-tab-box .cff-tab-form-field .field-left-content {
762
- flex-basis: 73%;
763
- max-width: 465px;
764
- }
765
- .sb-tab-content .sb-tab-box.sb-license-box.license-type-free .cff-tab-form-field .field-left-content {
766
- flex-basis: 73%;
767
- }
768
- .sb-tab-content .sb-tab-box .cff-tab-form-field .field-right-content {
769
- flex-basis: 20%;
770
- }
771
- .sb-tab-content .sb-tab-box .cff-tab-form-field .form-info {
772
- font-size: 12px;
773
- line-height: 22px;
774
- color: #27303F;
775
- }
776
- .sb-tab-content .sb-tab-box .cff-tab-form-field .form-info .cff-manage-license a{
777
- text-decoration-line: underline;
778
- color: #27303F;
779
- margin-right: 10px;
780
- }
781
- .sb-tab-content .sb-tab-box .cff-tab-form-field .form-info .test-connection {
782
- color: #434960;
783
- }
784
- .sb-tab-content .sb-tab-box .cff-tab-form-field .form-info .cff-upgrade a {
785
- color: #0068A0;
786
- font-weight: 600;
787
- margin-left: 8px;
788
- text-decoration: none;
789
- }
790
- .sb-tab-content .sb-tab-box.sb-reset-box-style {
791
- margin: 0;
792
- border-bottom: 1px solid #E8E8EB;
793
- }
794
- .sb-tab-content.cff-license-free .sb-tab-box.sb-timezone-box,
795
- .sb-tab-content.cff-license-free .sb-tab-box.sb-gdpr-box,
796
- .sb-tab-content.cff-license-free .sb-tab-box.sb-optimize-box,
797
- .sb-tab-content.cff-license-free .sb-tab-box.sb-caching-box {
798
- margin-bottom: 12px;
799
- border-bottom: none
800
- }
801
- .sb-tooltip-content {
802
- position: absolute;
803
- background: #fff;
804
- border-radius: 2px;
805
- padding: 12px 26px 12px 16px;
806
- box-shadow: 1px 2px 4px 0px rgb(0 0 0 / 15%), -2px -1px 9px 0px rgb(0 0 0 / 13%);
807
- width: 497px;
808
- height: auto;
809
- max-height: 284px;
810
- bottom: 50px;
811
- box-sizing: border-box;
812
- right: -45px;
813
- z-index: 9999;
814
- }
815
- .sb-tooltip-content p {
816
- color: #141B38;
817
- font-size: 14px;
818
- line-height: 22px;
819
- font-weight: normal;
820
- }
821
- .sb-tooltip-content:after {
822
- width: 12px;
823
- height: 12px;
824
- content: '';
825
- bottom: -7px;
826
- right: calc(50% - 6px);
827
- position: absolute;
828
- background: #fff;
829
- transform: rotate(45deg);
830
- box-shadow: 2px 2px 2px rgb(0 0 0 / 14%);
831
- }
832
- .sb-localization-box .sb-tooltip-content:after {
833
- right: calc(50% - 55px);
834
- }
835
- .sb-tooltip-content.sb-tooltip-bottom {
836
- bottom: inherit;
837
- top: 45px;
838
- box-shadow: -1px -2px 4px 0px rgb(0 0 0 / 15%), 2px 1px 9px 0px rgb(0 0 0 / 13%);
839
- }
840
- .sb-tooltip-content.sb-tooltip-bottom:after {
841
- bottom: inherit;
842
- top: -6px;
843
- box-shadow: -2px -2px 2px rgb(0 0 0 / 14%);
844
- }
845
- .sb-tab-content .sb-tab-box .sb-tooltip-content p {
846
- color: #141B38;
847
- }
848
- .sb-tab-content .sb-tab-box .sb-tooltip-content p:not(:last-child) {
849
- margin-bottom: 12px;
850
- }
851
- .sb-tab-content .sb-tab-box .sb-tooltip-content p a {
852
- color: #141B38;
853
- font-weight: 600;
854
- }
855
- .sb-gdpr-box .sb-gdpr-active {
856
- padding-left: 27px;
857
- position: relative;
858
- max-width: 560px;
859
- box-sizing: border-box;
860
- }
861
- .sb-gdpr-box .gdpr-help-text-yes {
862
- max-width: 560px;
863
- }
864
- .sb-gdpr-box .sb-gdpr-active .gdpr-active-icon {
865
- position: absolute;
866
- left: 0px;
867
- }
868
- .sb-gdpr-box .help-text a {
869
- font-weight: 400;
870
- }
871
- .sb-gdpr-box .sb-text-bold {
872
- font-weight: 700;
873
- cursor: pointer;
874
- }
875
- .sb-gdpr-box .sb-gdpr-bold {
876
- text-decoration: underline;
877
- }
878
- .sb-gdpr-info-tooltip {
879
- position: absolute;
880
- font-size: 14px;
881
- line-height: 22px;
882
- color: #141B38;
883
- background: #FFFFFF;
884
- border-radius: 2px;
885
- padding: 12px 26px 12px 16px;
886
- box-shadow: 1px 2px 4px 0px rgb(0 0 0 / 15%), -2px -1px 9px 0px rgb(0 0 0 / 13%);
887
- z-index: 99;
888
- width: 561px;
889
- height: 281px;
890
- bottom: -297px;
891
- box-sizing: border-box;
892
- }
893
- .sb-gdpr-info-tooltip:before {
894
- width: 0;
895
- height: 0;
896
- border-left: 8px solid transparent;
897
- border-right: 8px solid transparent;
898
- border-bottom: 10px solid #fff;
899
- content: '';
900
- top: -10px;
901
- right: 260px;
902
- position: absolute;
903
- }
904
- .sb-gdpr-info-tooltip .sb-gdpr-info-headline {
905
- font-weight: 600;
906
- }
907
- .sb-gdpr-info-tooltip .sb-gdpr-info-list {
908
- margin: 0px;
909
- margin-top: 1px;
910
- padding-left: 20px;
911
- }
912
- .sb-gdpr-info-tooltip .sb-gdpr-info-list li {
913
- position: relative;
914
- margin-bottom: 2px;
915
- }
916
- .sb-gdpr-info-tooltip .sb-gdpr-info-list li:before {
917
- width: 3px;
918
- height: 3px;
919
- position: absolute;
920
- left: -12px;
921
- top: 10px;
922
- content: '';
923
- background-color: #141B38;
924
- border-radius: 10px;
925
- }
926
- .test-connection svg {
927
- width: 15px;
928
- height: 15px;
929
- transform: translate(2px, 3px);
930
- }
931
- .test-connection i {
932
- font-size: 14px;
933
- }
934
- .test-connection.loading path {
935
- fill: #141B38
936
- }
937
- .test-connection.success svg {
938
- transform: translate(3px, 6px)
939
- }
940
- .test-connection i {
941
- font-size: 16px;
942
- transform: translate(-2px, 1px);
943
- }
944
- .test-connection.success path {
945
- fill: #59AB46;
946
- }
947
- .test-connection.success i {
948
- color: #59AB46;
949
- }
950
- .test-connection.error i {
951
- color: #D72C2C;
952
- }
953
- .test-connection a {
954
- color: #434960;
955
- font-weight: 600;
956
- margin-left: 4px;
957
- }
958
- .test-connection:not(.error):not(.success) {
959
- cursor: pointer;
960
- }
961
- .cff-btn[disabled="disabled"] {
962
- cursor: not-allowed;
963
- color: #8C8F9A;
964
- background: #F3F4F5;
965
- }
966
- .cff-caching-btn span {
967
- margin-right: 7px;
968
- }
969
- .cff-caching-btn.cff-btn[disabled="disabled"] svg path{
970
- fill: #8C8F9A;
971
- }
972
- .cff-btn[disabled="disabled"]:hover {
973
- color: #8C8F9A;
974
- }
975
- .cff-btn[disabled="disabled"]:not(.import-btn) .icon path {
976
- fill: #8C8F9A;
977
- }
978
- .import-btn .icon svg:not(.checkmark) path {
979
- fill: #141B38;
980
- }
981
- .import-btn[disabled="disabled"] .icon svg:not(.checkmark) path {
982
- fill: #8C8F9A;
983
- }
984
- .cff-btn .icon {
985
- margin-right: 12px;
986
- }
987
- .cff-btn .cff-loader-svg {
988
- height: 20px;
989
- }
990
- .import-btn .icon.loading {
991
- transform: translate(-5px, 1px);
992
- }
993
- .import-btn .icon.success {
994
- transform: translate(-4px, 0px);
995
- }
996
- .import-btn .icon.error {
997
- transform: translate(-4px, 0px);
998
- }
999
- .import-btn .icon.error i {
1000
- color: #D72C2C;
1001
- }
1002
- .import-btn .icon.success svg {
1003
- stroke: #141B38
1004
- }
1005
- .export-btn {
1006
- text-decoration: none;
1007
- }
1008
- .export-btn:hover {
1009
- color: inherit;
1010
- }
1011
-
1012
- .sb-tab-box.sb-caching-box .cff-caching-btn .loading path,
1013
- .sb-tab-box.sb-optimize-box .optimize-image-btn .loading path,
1014
- .sb-tab-box.sb-dpa-clear-box-style .loading path {
1015
- fill: rgb(23 22 22 / 95%)
1016
- }
1017
- .sb-tab-box.sb-caching-box .cff-caching-btn .success svg,
1018
- .sb-tab-box.sb-optimize-box .optimize-image-btn .success svg,
1019
- .sb-tab-box.sb-dpa-clear-box-style .success svg {
1020
- stroke: rgb(23 22 22 / 95%)
1021
- }
1022
-
1023
- .sb-tab-content .sb-tab-box.sb-dpa-clear-box-style .cff-tab-form-field .cff-btn {
1024
- transform: none;
1025
- margin-bottom: 15px;
1026
- }
1027
-
1028
- .sb-tab-box.sb-caching-box .cff-caching-btn:disabled path,
1029
- .sb-tab-box.sb-caching-box .optimize-image-btn:disabled path {
1030
- fill: #8C8F9A;
1031
- }
1032
-
1033
- /* Translation Tab */
1034
- .sb-tab-inner-card {
1035
- margin-top: 30px;
1036
- }
1037
-
1038
- .cff-table {
1039
- width: 100%;
1040
- border: 1px solid #DCDDE1;
1041
- padding: 0;
1042
- border-spacing: 0;
1043
- }
1044
- .cff-table thead th,
1045
- .cff-table tfoot th {
1046
- background-color: #F3F4F5;
1047
- font-size: 14px;
1048
- line-height: 22px;
1049
- color: #434960;
1050
- padding: 10px 20px;
1051
- font-weight: 400;
1052
- text-align: left;
1053
- box-sizing: border-box;
1054
- border-bottom: 1px solid #DCDDE1;
1055
- }
1056
- .cff-table tfoot th {
1057
- border: 0;
1058
- border-top: 1px solid #DCDDE1;
1059
- }
1060
-
1061
- .cff-table tbody td {
1062
- padding: 6px 10px 6px 20px;
1063
- box-sizing: border-box;
1064
-
1065
- }
1066
- .cff-table-row-header td {
1067
- font-weight: 600;
1068
- font-size: 16px !important;
1069
- line-height: 26px;
1070
- color: #141B38;
1071
- box-sizing: border-box;
1072
- padding: 10px 20px !important;
1073
- }
1074
- .cff-table tbody td {
1075
- background: #F3F4F5;
1076
- font-size: 14px;
1077
- }
1078
- .cff-table tbody:nth-child(2n) td {
1079
- background-color:#fff;
1080
- }
1081
- .cff-table tbody tr:not(.cff-table-row-header):not(:last-child) td {
1082
- border-bottom:1px solid #DCDDE1
1083
- }
1084
- .cff-table tbody tr:last-child td {
1085
- padding: 6px 10px 6px 20px;
1086
- }
1087
-
1088
- .cff-table tbody tr td:first-child,
1089
- .cff-table tbody tr td:nth-child(2) {
1090
- width: 25%;
1091
- }
1092
- .cff-table tbody .cff-input{
1093
- background: #FFFFFF;
1094
- border: 1px solid #D0D1D7;
1095
- box-sizing: border-box;
1096
- border-radius: 1px;
1097
- width: 100%;
1098
- height: 38px;
1099
- color: #2c3338;
1100
- }
1101
- .cff-table tbody .cff-input::placeholder {
1102
- color: #8C8F9A;
1103
- }
1104
- .cff-table tbody .cff-input:focus {
1105
- border: 1px solid #97989c;
1106
- outline: none;
1107
- box-shadow: none;
1108
- }
1109
- @media (max-width: 767px) {
1110
- .sb-tabs-container .sb-tabs .tab {
1111
- padding: 25px 10px;
1112
- }
1113
- .cff-table th,
1114
- .cff-table td {
1115
- display: block;
1116
- width: 100%;
1117
- }
1118
- .cff-table tbody tr td:first-child,
1119
- .cff-table tbody tr td:nth-child(2) {
1120
- width: 100%;
1121
- }
1122
- .cff-table tbody .cff-input {
1123
- height: 30px;
1124
- min-height: 30px;
1125
- font-size: 14px;
1126
- }
1127
- }
1128
-
1129
- .sb-feed-issue-box #cff-send-report {
1130
- width: 127px;
1131
- min-width: 127px;
1132
- height: 46px;
1133
- padding: 6px 15px;
1134
- }
1135
- .sb-feed-issue-box #report-emails {
1136
- width: 407px;
1137
- height: 45px;
1138
- padding: 8px 15px;
1139
- font-size: 16px;
1140
- line-height: 26px;
1141
- }
1142
- .sb-feed-issue-box #report-emails::placeholder {
1143
- color: #8C8F9A;
1144
- }
1145
- .sb-feed-issue-box .feed-issues-fields {
1146
- margin-bottom: 15px;
1147
- display: flex;
1148
- }
1149
- .sb-feed-issue-box .feed-issues-fields * {
1150
- margin: 0 10px 0 0;
1151
- font-size: 16px;
1152
- }
1153
-
1154
- .sb-tab-box.sb-optimize-box .sb-form-field,
1155
- .sb-tab-box.sb-usage-box .sb-form-field,
1156
- .sb-tab-box.sb-ajax-box .sb-form-field,
1157
- .sb-tab-box.sb-show-credit-box .sb-form-field,
1158
- .sb-tab-box.sb-admin-error-box .sb-form-field,
1159
- .sb-tab-box.sb-fix-text-box .sb-form-field{
1160
- max-width: 695px;
1161
- }
1162
- .sb-tab-box.sb-feed-issue-box .sb-form-field .help-text {
1163
- max-width: 670px;
1164
- }
1165
-
1166
- /*To Be Checked*/
1167
- .sb-sources-list{
1168
- width: 100%;
1169
- position: relative;
1170
- display: grid;
1171
- grid-template-columns: 48% 48%;
1172
- grid-column-gap: 2%;
1173
- }
1174
- .cff-fb-srcs-item-ins {
1175
- display: flex;
1176
- height: 62px;
1177
- padding: 0 10px;
1178
- position: relative;
1179
- }
1180
- .sb-srcs-item {
1181
- box-sizing: border-box;
1182
- position: relative;
1183
- cursor: auto;
1184
- display: block;
1185
- height: 64px;
1186
- border: 1px solid #E7E7E9;
1187
- min-height: 60px;
1188
- overflow: auto;
1189
- margin-top: 15px;
1190
- }
1191
- .sb-srcs-item.expanded {
1192
- height: auto;
1193
- }
1194
- .sb-source-error-wrap {
1195
- display: flex;
1196
- justify-content: center;
1197
- align-items: center;
1198
- margin-left: 9px;
1199
- }
1200
-
1201
- .sb-source-error-wrap span {
1202
- font-weight: 600;
1203
- font-size: 12px;
1204
- line-height: 160%;
1205
-
1206
- color: #D72C2C;
1207
- margin-left: 5px;
1208
- }
1209
- .sb-source-error-wrap a {
1210
- margin-left: 8px;
1211
- font-weight: 600;
1212
- font-size: 12px;
1213
- line-height: 160%;
1214
- text-decoration-line: underline;
1215
-
1216
- color: #0068A0;
1217
- }
1218
- .sb-srcs-new {
1219
- display: flex;
1220
- justify-content: center;
1221
- align-items: center;
1222
- font-size: 14px;
1223
- color: #0068A0;
1224
- background: #F9F9FA;
1225
- font-weight: 400;
1226
- transition: all 0.15s ease-in-out;
1227
- border: 1px solid #E8E8EB;
1228
- }
1229
- .sb-srcs-new:hover {
1230
- cursor: pointer;
1231
- background: #E2F5FF;
1232
- }
1233
- .sb-srcs-new span.add-new-icon {
1234
- margin-right: 11px;
1235
- margin-top: 3px;
1236
- }
1237
- .sb-srcs-item-avatar{
1238
- display: flex;
1239
- width: 42px;
1240
- height: inherit;
1241
- justify-content: center;
1242
- align-items: center;
1243
- }
1244
- .sb-srcs-item-avatar img{
1245
- width: 42px;
1246
- height: 42px;
1247
- border-radius: 50%;
1248
- background: #eee;
1249
- }
1250
- .sb-srcs-item-inf{
1251
- width: 100%;
1252
- height: inherit;
1253
- display: flex;
1254
- justify-content: center;
1255
- flex-direction: column;
1256
- padding-left: 10px;
1257
- }
1258
- .sb-srcs-item-name{
1259
- font-weight: 600;
1260
- color: #141B38;
1261
- font-size: 16px;
1262
- margin-bottom: 1px;
1263
- padding-right: 60px;
1264
- max-height: 32px;
1265
- line-height: 1.1;
1266
- padding-bottom: 2px;
1267
- overflow: hidden;
1268
- }
1269
-
1270
- .sb-srcs-item-used{
1271
- color: #434960;
1272
- display: flex;
1273
- align-items: center;
1274
- font-weight: 400;
1275
- font-size: 12px;
1276
- }
1277
-
1278
- .cff-fb-srcs-info-item:first-of-type {
1279
- align-items: center;
1280
- }
1281
- .cff-fb-srcs-info-item {
1282
- display: flex;
1283
- border-top: 1px solid #E7E7E9;
1284
- box-sizing: border-box;
1285
- width: 100%;
1286
- float: left;
1287
- padding: 8px 10px;
1288
- }
1289
- .cff-fb-srcs-info-item strong {
1290
- font-size: 14px;
1291
- width: 50px;
1292
- }
1293
- .cff-fb-srcs-info-item span {
1294
- font-size: 13px;
1295
- line-height: 1.5em;
1296
- color: #434960;
1297
- font-weight: 400;
1298
- display: inline-block;
1299
- word-break: break-all;
1300
- width: calc(100% - 80px);
1301
- padding: 0 15px;
1302
- box-sizing: border-box;
1303
- }
1304
- .cff-fb-srcs-info-icon {
1305
- width: 26px;
1306
- height: 26px;
1307
- display: flex;
1308
- justify-content: center;
1309
- align-items: center;
1310
- cursor: pointer;
1311
- margin-left: auto;
1312
- border: 1px solid #D0D1D7;
1313
- border-radius: 2px;
1314
- transition: all 0.15s ease-in-out;
1315
- }
1316
- .cff-fb-srcs-info-icon:hover {
1317
- background: #F3F4F5;
1318
- }
1319
- .cff-fb-srcs-info-icon:focus,
1320
- .cff-fb-srcs-info-icon:active {
1321
- background: #E8E8EB;
1322
- }
1323
- .cff-fb-srcs-info-icon svg {
1324
- width: 15px;
1325
- float: left;
1326
- }
1327
- .sb-control-src-expand-chevron {
1328
- width: 7px;
1329
- height: 7px;
1330
- border-left: 2px solid currentColor;
1331
- border-top: 2px solid currentColor;
1332
- -webkit-transform: rotate(45deg);
1333
- transform: rotate(45deg);
1334
- }
1335
- .sb-srcs-item-actions{
1336
- position: absolute;
1337
- width: 70px;
1338
- height: 31px;
1339
- right: 7px;
1340
- top: 7px;
1341
- }
1342
- .sb-srcs-item-actions-btn{
1343
- width: 30px;
1344
- height: 31px;
1345
- cursor: pointer;
1346
- float: left;
1347
- display: flex;
1348
- justify-content: center;
1349
- align-items: center;
1350
- margin-left: 3px;
1351
- }
1352
- .sb-srcs-item-actions-btn svg{
1353
- float: left;
1354
- width: 17px;
1355
- fill: currentColor;
1356
- }
1357
- .sb-srcs-item-actions-btn.sb-srcs-item-angle-up svg {
1358
- height: 10px;
1359
- }
1360
- .sb-srcs-item-cog,
1361
- .sb-srcs-item-angle-up{
1362
- color: #434960;
1363
- transition: all 0.15s ease-in-out;
1364
- border-radius: 4px;
1365
- }
1366
- .sb-srcs-item-cog:hover,
1367
- .sb-srcs-item-angle-up:hover {
1368
- background: #F3F4F5;
1369
- }
1370
- .sb-srcs-item-cog:focus,
1371
- .sb-srcs-item-cog:active,
1372
- .sb-srcs-item-angle-up:focus,
1373
- .sb-srcs-item-angle-up:active {
1374
- background: #E8E8EB;
1375
- }
1376
- .sb-srcs-item-delete{
1377
- color: #D72C2C;
1378
- transition: all 0.15s ease-in-out;
1379
- border-radius: 4px;
1380
- }
1381
- .sb-srcs-item-delete:hover {
1382
- background-color: #FCEDED;
1383
- }
1384
- .sb-srcs-item-delete:focus,
1385
- .sb-srcs-item-delete:active {
1386
- background: #eed4d4;
1387
- }
1388
- .sb-srcs-item-delete svg{
1389
- width: 13px;
1390
- }
1391
- #cff-settings .cff-fb-source-step1 .cff-fb-source-top h3 {
1392
- margin-bottom: 40px;
1393
- }
1394
-
1395
- /*
1396
- Sources Instance Popup
1397
- */
1398
- .cff-fb-popup-feedinst .cff-fb-source-top{
1399
- display: flex;
1400
- align-items: center;
1401
- }
1402
- .cff-fb-popup-feedinst h5{
1403
- margin-bottom: 0px;
1404
- float: left;
1405
- font-size: 27px;
1406
- }
1407
- .cff-fb-fdinst-type{
1408
- padding: 5px 5px;
1409
- background: #E8E8EB;
1410
- margin-left: 12px;
1411
- float: left;
1412
- }
1413
- .cff-fb-inst-tbl-ctn{
1414
- padding: 0 23px 63px;
1415
- }
1416
- .cff-fb-inst-tbl-ctn table{
1417
- width: 100%;
1418
- border-spacing: unset;
1419
- box-sizing: border-box;
1420
- border: 1px solid #DCDDE1;
1421
- text-align: left;
1422
- }
1423
- .cff-fb-inst-tbl-ctn tfoot,.cff-fb-inst-tbl-ctn thead{
1424
- background: #F3F4F5
1425
- }
1426
- .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf th, .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf td{
1427
- font-size: 13px;
1428
- color: #364152;
1429
- padding: 13px 10px;
1430
- }
1431
- .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr:nth-child(odd){
1432
- background: #fff;
1433
- }
1434
- .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr:nth-child(even){
1435
- background: #F3F4F5;
1436
- }
1437
- .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf tr th,
1438
- .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf tr td{
1439
- padding: 4px 20px;
1440
- }
1441
- .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr td{
1442
- padding: 11px 20px;
1443
- }
1444
- .cff-fb-inst-tbl-ctn .cff-fd-lst-name{
1445
- font-size: 14px;
1446
- }
1447
- .cff-fb-inst-tbl-shrtc{
1448
- display: flex;
1449
- align-items: center;
1450
- }
1451
-
1452
- .cff-fd-inst-btn{
1453
- width: 10px;
1454
- height: 10px;
1455
- box-sizing: border-box;
1456
- border-right: 3px solid #8C8F9A;
1457
- border-top: 3px solid #8C8F9A;
1458
- cursor: pointer;
1459
- -webkit-transform: rotate(45deg);
1460
- transform: rotate(45deg);
1461
- }
1462
-
1463
- .cff-fd-lst-actions .cff-fd-lst-btn, .cff-fb-inst-tbl-ctn .cff-fd-lst-btn {
1464
- box-sizing: border-box;
1465
- width: 36px;
1466
- height: 32px;
1467
- }
1468
- .cff-fd-lst-shortcode-cp {
1469
- margin-left: 10px;
1470
- }
1471
- .cff-fb-tltp-parent {
1472
- position: relative;
1473
- }
1474
- .cff-fd-lst-btn {
1475
- width: 21px;
1476
- height: 21px;
1477
- display: inline-flex;
1478
- justify-content: center;
1479
- align-items: center;
1480
- margin: 0 4px;
1481
- cursor: pointer;
1482
- color: #141B38;
1483
- border-radius: 2px;
1484
- border: 1px solid #D8DADD;
1485
- -webkit-transition: all .2s ease-in-out;
1486
- transition: all .2s ease-in-out;
1487
- background: #fff;
1488
- }
1489
- .cff-fb-tltp-elem {
1490
- position: absolute;
1491
- color: #fff;
1492
- background: #434960;
1493
- font-size: 14px;
1494
- padding: 7px 10px;
1495
- border-radius: 3px;
1496
- font-weight: 500;
1497
- z-index: 9;
1498
- text-align: center;
1499
- opacity: 0;
1500
- visibility: hidden;
1501
- top: calc(-100% - 30px);
1502
- left: 50%;
1503
- -webkit-transform: translateX(-50%);
1504
- transform: translateX(-50%);
1505
- -webkit-transition: all .2s ease-in-out;
1506
- transition: all .2s ease-in-out;
1507
- }
1508
- .cff-fb-tltp-elem span {
1509
- position: relative;
1510
- z-index: 3;
1511
- }
1512
- .cff-fd-lst-btn svg {
1513
- fill: currentColor;
1514
- width: 14px;
1515
- float: left;
1516
- }
1517
- .cff-fd-lst-btn svg {
1518
- height: 13px;
1519
- }
1520
- .cff-fd-lst-thtf th{
1521
- border-bottom: 1px solid #DCDDE1;
1522
- }
1523
- .cff-fd-lst-thtf td{
1524
- border-top: 1px solid #DCDDE1;
1525
- }
1526
- .cff-fb-fdinst-type {
1527
- padding: 5px 5px;
1528
- background: #E8E8EB;
1529
- margin-left: 12px;
1530
- float: left;
1531
- }
1532
- .cff-fd-lst-name {
1533
- font-size: 17px;
1534
- font-weight: 500;
1535
- color: #0068A0!important;
1536
- }
1537
- .cff-fb-inst-tbl-ctn a, .cff-fb-inst-tbl-ctn a:focus {
1538
- text-decoration: none;
1539
- outline: none;
1540
- }
1541
- .cff-fd-lst-actions .cff-fd-lst-btn, .cff-fb-inst-tbl-ctn .cff-fd-lst-btn {
1542
- box-sizing: border-box;
1543
- width: 36px;
1544
- height: 32px;
1545
- background: transparent;
1546
- }
1547
- .cff-fd-lst-btn svg {
1548
- fill: currentColor;
1549
- width: 14px;
1550
- float: left;
1551
- }
1552
- .cff-fb-tltp-parent:hover .cff-fb-tltp-elem {
1553
- top: calc(-100% - 20px);
1554
- opacity: 1;
1555
- visibility: visible;
1556
- }
1557
- .cff-fb-tltp-elem:after {
1558
- content: '';
1559
- position: absolute;
1560
- height: 10px;
1561
- width: 10px;
1562
- bottom: -5px;
1563
- left: calc(50% - 5px);
1564
- background: #434960;
1565
- transform: rotate(
1566
- -45deg
1567
- );
1568
- }
1569
-
1570
- /*** 6.0 Sticky Widget ***/
1571
- .cff-stck-wdg{
1572
- position: fixed;
1573
- right: 21px;
1574
- z-index: 9;
1575
- bottom: 20px;
1576
- }
1577
- .cff-stck-wdg-btn{
1578
- width: 52px;
1579
- height: 52px;
1580
- background: #fff;
1581
- border-radius: 50%;
1582
- cursor: pointer;
1583
- display: flex;
1584
- justify-content: center;
1585
- align-items: center;
1586
- filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
1587
- }
1588
- .cff-stck-wdg-btn svg{
1589
- width: 25px;
1590
- fill: #E34F0E;
1591
- height: 33px;
1592
- float: left;
1593
- }
1594
-
1595
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
1596
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
1597
- display: block;
1598
- }
1599
- .cff-stck-wdg-btn-cls{
1600
- width: inherit;
1601
- height: inherit;
1602
- position: relative;
1603
- color: #364152;
1604
- box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
1605
- border-radius: 70px;
1606
- }
1607
- .cff-stck-wdg-btn-cls svg {
1608
- width: 14px;
1609
- height: 14px;
1610
- position: absolute;
1611
- top: 50%;
1612
- right: 0;
1613
- bottom: 0;
1614
- left: 50%;
1615
- margin-top: -7px;
1616
- margin-left: -7px;
1617
- }
1618
-
1619
- .cff-stck-pop{
1620
- position: absolute;
1621
- width: 292px;
1622
- height: auto;
1623
- background: #fff;
1624
- border: 1px solid #E2E8F0;
1625
- box-sizing: border-box;
1626
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
1627
- border-radius: 2px;
1628
- padding: 20px;
1629
- right: 0px;
1630
- bottom: 66px;
1631
- color: #141B38;
1632
- padding-bottom: 82px;
1633
- }
1634
- .cff-stck-wdg[data-active="true"] .cff-stck-pop{
1635
- bottom: 66px;
1636
- opacity: 1;
1637
- visibility: visible;
1638
- }
1639
-
1640
- .cff-stck-pop svg{
1641
- fill: currentColor;
1642
- }
1643
- .cff-stck-el-list{
1644
- border: 1px solid #DCDDE1;
1645
- border-radius: 2px;
1646
- }
1647
- .cff-stck-el{
1648
- display: flex;
1649
- align-items: center;
1650
- padding: 12px 13px 11px;
1651
- border-bottom: 1px solid #DCDDE1;
1652
- transition: background .15s ease-in-out;
1653
- }
1654
- .cff-stck-el:hover{
1655
- background: #F3F4F5;
1656
- }
1657
- .cff-stck-el:last-of-type{
1658
- border-bottom: 0px;
1659
- }
1660
- .cff-stck-el-list .cff-chevron svg{
1661
- width: 5px;
1662
- height: 8px;
1663
- }
1664
- .cff-fs-a {
1665
- width: 100%;
1666
- height: 100%;
1667
- display: block;
1668
- position: absolute;
1669
- left: 0;
1670
- top: 0;
1671
- z-index: 1;
1672
- }
1673
- .cff-stck-el .cff-stck-el-txt{
1674
- color: #27303F;
1675
- }
1676
- .cff-stck-el.cff-stck-el-upgrd{
1677
- padding: 8px 14px;
1678
- font-size: 14px;
1679
- background: var(--cl-orange);
1680
- color: #fff;
1681
- position: relative;
1682
- transition: background .15s ease-in-out;
1683
- }
1684
- .cff-chevron {
1685
- position: absolute;
1686
- right: 14px
1687
- }
1688
- .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
1689
- color: #fff;
1690
- }
1691
- .cff-stck-el.cff-stck-el-upgrd:after{
1692
- top: 20px;
1693
- opacity: 1;
1694
- }
1695
- .cff-stck-el-icon{
1696
- margin-right: 10px;
1697
- }
1698
- .cff-stck-el-icon svg{
1699
- width: 17px;
1700
- float: left;
1701
- }
1702
- .cff-stck-title{
1703
- margin-top: 20px;
1704
- margin-bottom: 10px;
1705
- color: #141B38;
1706
- font-weight: 600;
1707
- font-size: 14px;
1708
- line-height: 160%;
1709
- }
1710
- .cff-stck-follow{
1711
- background: #F3F4F5;
1712
- margin-top: 20px;
1713
- left: 0px;
1714
- bottom: 0px;
1715
- position: absolute;
1716
- padding: 12px 20px;
1717
- display: flex;
1718
- align-items: center;
1719
- }
1720
- .cff-stck-follow span{
1721
- font-weight: 600;
1722
- font-size: 14px;
1723
- }
1724
- .cff-stck-flw-links{
1725
- display: flex;
1726
- justify-content: center;
1727
- align-items: center;
1728
- margin-left: auto;
1729
- }
1730
- .cff-stck-flw-links a{
1731
- width: 36px;
1732
- height: 28px;
1733
- color: inherit;
1734
- display: inline-flex;
1735
- justify-content: center;
1736
- align-items: center;
1737
- margin-left: 4px;
1738
- border-radius: 2px;
1739
- transition: background .15s ease-in-out;
1740
- }
1741
- .cff-stck-flw-links svg{
1742
- width: 17px;
1743
- color: #141B38;
1744
- }
1745
- .cff-stck-flw-links a:hover{
1746
- background: #fff;
1747
- }
1748
- .cff-stck-flw-links a:hover svg{
1749
- color: inherit;
1750
- }
1751
-
1752
- /*** 7.0 Responsive ***/
1753
- @media (max-width: 1429px) {
1754
- .caching-form-fields-group {
1755
- display: inline-block;
1756
- }
1757
- .caching-form-fields-group select {
1758
- margin-bottom: 5px;
1759
- }
1760
- }
1761
- @media (min-width: 1429px) {
1762
- .caching-form-fields-group {
1763
- display: flex;
1764
- }
1765
- }
1766
- @media (max-width: 1023px) {
1767
- .sb-tab-content .sb-tab-box .tab-label {
1768
- width: 100%;
1769
- max-width: 100%;
1770
- padding-right: 0;
1771
- float: initial;
1772
- margin-bottom: 20px;
1773
- }
1774
- .sb-tab-content .sb-tab-box .cff-tab-form-field{
1775
- width: 100%;
1776
- float: intial;
1777
- }
1778
- }
1779
- @media (max-width: 1320px) {
1780
- .sb-feed-issue-box .feed-issues-fields {
1781
- display: inline-block;
1782
- }
1783
-
1784
- .sb-feed-issue-box .feed-issues-fields * {
1785
- margin-bottom: 5px;
1786
- }
1787
- }
1788
- @media (max-width: 767px) {
1789
- .auto-fold #wpcontent {
1790
- padding-left: 0;
1791
- }
1792
- .cff-fb-full-wrapper {
1793
- padding: 70px 20px 0 20px;
1794
- }
1795
- .cff-fb-hd-btn {
1796
- padding: 0px 15px 0px 7px;
1797
- }
1798
- .cff-fb-header {
1799
- padding: 0px 20px;
1800
- }
1801
- .sb-notification-ctn {
1802
- left: 20px;
1803
- }
1804
- .sb-tab-box.sb-export-box .sb-form-field .d-flex{
1805
- flex-wrap: wrap;
1806
- }
1807
- .sb-form-field .cff-select {
1808
- width: 100%;
1809
- }
1810
- .sb-tab-content .sb-tab-box .cff-tab-form-field {
1811
- flex-wrap: wrap;
1812
- }
1813
- .sb-license-box .cff-tab-form-field .cff-btn {
1814
- transform: translate(0px, 0px) !important;
1815
- margin-top: 10px;
1816
- }
1817
- .sb-tab-content .sb-tab-box .cff-tab-form-field .field-left-content {
1818
- flex-basis: 100%;
1819
- }
1820
- .sb-export-box .cff-tab-form-field .cff-btn {
1821
- transform: translate(0px, 0px) !important;
1822
- margin-top: 10px;
1823
- }
1824
- .sb-feed-issue-box .feed-issues-fields {
1825
- width: 100%;
1826
- }
1827
- .sb-feed-issue-box #report-emails {
1828
- max-width: 100%;
1829
- }
1830
- .cff-table thead th, .cff-table tfoot th {
1831
- display: none;
1832
- }
1833
- .cff-table tbody tr:not(.cff-table-row-header) td:last-child {
1834
- margin-bottom: 20px;
1835
- }
1836
- .cff-table tbody {
1837
- background-color: #f3f4f5;
1838
- }
1839
- .cff-table tbody:nth-child(2n) {
1840
- background-color: #fff;
1841
- }
1842
- .sb-tab-content .sb-tab-box .cff-tab-form-field .d-flex{
1843
- flex-wrap: wrap;
1844
- }
1845
- .sb-sources-list {
1846
- grid-template-columns: 100%;
1847
- }
1848
- .sb-tabs-container .sb-tabs {
1849
- flex-direction: column-reverse;
1850
- flex-wrap: wrap;
1851
- align-items: flex-end;
1852
- }
1853
- .cff-fb-full-wrapper {
1854
- padding: 82px 20px 0 20px;
1855
- }
1856
- .sb-tabs-container .sb-tabs .left-buttons {
1857
- width: 100%;
1858
- display: flex;
1859
- }
1860
- .sb-tabs-container .sb-tabs .right-buttons {
1861
- transform: translateY(-15px);
1862
- }
1863
- .sb-tabs-container .sb-tabs .left-buttons .tab {
1864
- flex-grow: 1;
1865
- flex-basis: 0;
1866
- padding: 15px 10px;
1867
- text-align: center;
1868
- }
1869
- .sb-tabs-container {
1870
- margin-top: -45px;
1871
- }
1872
- #wpbody-content {
1873
- padding-bottom: 50px;
1874
- }
1875
- .sb-form-field .cff-select.size-md {
1876
- width: 100%;
1877
- max-width: 100%;
1878
- }
1879
- }
1880
- @media (max-width: 567px) {
1881
- .sb-tabs-container .sb-tabs .tab:not(:last-child) {
1882
- margin-right: 10px;
1883
- }
1884
- }
1885
- @media (max-width: 420px) {
1886
- .sb-tabs-container .sb-tabs .left-buttons .tab {
1887
- padding: 15px 7px;
1888
- font-size: 14px;
1889
- }
1890
- }
1891
-
1892
- .sb-tab-content > div {
1893
- min-height: 520px;
1894
- }
1895
- .sb-form-field .sb-disabled-custom-code textarea{
1896
- display: block;
1897
- margin: 20px 0 0 0;
1898
- padding: 10px;
1899
- background: rgba(0, 0, 0, 0.07);
1900
- width: 100%;
1901
- height: 300px;
1902
- overflow-y: scroll;
1903
- border: 1px solid #ccc;
1904
- color: #555;
1905
- }
1906
- .sb-form-field code {
1907
- background: none;
1908
- padding: 0;
1909
- width: 100%;
1910
- height: 300px;
1911
- overflow-y: scroll;
1912
- border: 1px solid #ccc;
1913
- color: #666;
1914
  }
1
+ /*
2
+ * Settings CSS TABLE OF CONTENTS
3
+ *
4
+ * 1.0 - Global
5
+ * 2.0 - CFF CSS Framework
6
+ * 2.1 - Utility CSS
7
+ * 2.2 - Notification Element
8
+ * 3.0 - Header
9
+ * 4.0 - Content
10
+ * 4.1 - Tab Styles
11
+ * 4.2 - Tab Boxes
12
+ * 5.0 - Footer
13
+ * 6.0 - Sticky Widget
14
+ * 7.0 - Responsiveness
15
+ */
16
+
17
+ /*** 1.0 - Global ***/
18
+ .clearfix { display: inline-block; }
19
+ /* start commented backslash hack \*/
20
+ * html .clearfix { height: 1%; }
21
+ .clearfix { display: block; }
22
+ #cff-settings {
23
+ -webkit-font-smoothing: antialiased;
24
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
25
+ }
26
+ #wpcontent {
27
+ padding-left: 0px;
28
+ }
29
+ .clearfix:after {
30
+ visibility: hidden;
31
+ display: block;
32
+ font-size: 0;
33
+ content: " ";
34
+ clear: both;
35
+ height: 0;
36
+ }
37
+ .checkmark {
38
+ width: 21px;
39
+ height: 22px;
40
+ border-radius: 50%;
41
+ display: block;
42
+ stroke-width: 2;
43
+ stroke: #59AB46;
44
+ stroke-miterlimit: 10;
45
+ stroke-dashoffset: 0;
46
+ }
47
+ .cff-fb-full-wrapper{
48
+ padding: 0 53px;
49
+ padding-top: 82px;
50
+ }
51
+ .cff-fb-fs {
52
+ width: 100%;
53
+ position: relative;
54
+ float: left;
55
+ box-sizing: border-box;
56
+ }
57
+
58
+ /*** 2.0 - CFF CSS Framework ***/
59
+ .d-flex {
60
+ display: flex;
61
+ }
62
+ .justify-between {
63
+ justify-content: space-between;
64
+ }
65
+ .items-center{
66
+ align-items: center;
67
+ }
68
+ /* CFF Form Fields */
69
+ .sb-form-field {
70
+ display: block;
71
+ position: relative;
72
+ }
73
+ .sb-form-field .help-text {
74
+ font-size: 13px;
75
+ line-height: 22px;
76
+ color: #434960;
77
+ font-weight: 400;
78
+ word-spacing: 0.3px;
79
+ max-width: 640px;
80
+ }
81
+ .sb-form-field .help-text-green {
82
+ color: #59AB46;
83
+ }
84
+ .sb-form-field .help-text a {
85
+ color: inherit;
86
+ font-weight: 500;
87
+ }
88
+ /* input field styles */
89
+ .sb-form-field .cff-form-field {
90
+ background: #FFFFFF;
91
+ border: 1px solid #D0D1D7;
92
+ box-sizing: border-box;
93
+ border-radius: 1px;
94
+ height: 38px;
95
+ padding: 8px;
96
+ }
97
+ .sb-form-field .cff-form-field:focus {
98
+ outline: none;
99
+ box-shadow: none;
100
+ }
101
+ .sb-form-field .field-icon {
102
+ position: absolute;
103
+ right: 8px;
104
+ top: 10px;
105
+ font-size: 20px;
106
+ }
107
+ /* cff-checkbox styles */
108
+ .cff-checkbox {
109
+ align-items: center;
110
+ border-radius: 100px;
111
+ display: flex;
112
+ font-weight: 700;
113
+ margin-bottom: 15px;
114
+ }
115
+ .cff-checkbox input[type=checkbox] {
116
+ clip: rect(0 0 0 0);
117
+ clip-path: inset(50%);
118
+ height: 1px;
119
+ overflow: hidden;
120
+ position: absolute;
121
+ white-space: nowrap;
122
+ width: 1px;
123
+ }
124
+ .toggle-track {
125
+ width: 36px;
126
+ height: 20px;
127
+ position: relative;
128
+ background: #9e9e9e;
129
+ border-radius: 31px;
130
+ }
131
+ .toggle-indicator {
132
+ width: 16px;
133
+ height: 16px;
134
+ background-color: #fff;
135
+ border-radius: 100px;
136
+ top: 2px;
137
+ position: absolute;
138
+ left: 2px;
139
+ transition: all .3s cubic-bezier(0.23, 1, 0.320, 1);
140
+ }
141
+ .cff-checkbox input[type=checkbox]:checked + .toggle-track .toggle-indicator {
142
+ left: 18px;
143
+ }
144
+ .cff-checkbox input[type=checkbox]:checked + .toggle-track {
145
+ background: #0096CC;
146
+ }
147
+ .cff-checkbox input[type=checkbox]:disabled + .toggle-track {
148
+ background-color: #D0D1D7;
149
+ }
150
+ .cff-checkbox input[type=checkbox]:disabled + .toggle-track .toggle-indicator {
151
+ left: 2px;
152
+ }
153
+ .cff-error-text {
154
+ color: #D72C2C;
155
+ }
156
+ .cff-error-text a {
157
+ color: inherit;
158
+ }
159
+ .cff-fb-cp-clpboard{
160
+ width: 0px;
161
+ height: 0px;
162
+ position: absolute;
163
+ left: -100000px;
164
+ }
165
+ /* cff-select */
166
+ .sb-form-field .cff-select {
167
+ min-width: 235px;
168
+ border: 1px solid #D0D1D7;
169
+ padding: 8px 35px 8px 15px;
170
+ height: 50px;
171
+ font-size: 16px;
172
+ color: #141B38;
173
+ -webkit-appearance: none;
174
+ appearance: none;
175
+ background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABSSURBVHgBfc4hCkAhDAbgjV3slQcvvHuYDWY1G8zewyIWb6YuCCLqD4Pt5wtD54NBQA2XVKiWcorl/X7s+DkhJYUhPk54IN5plCue0Tb8M8/aNx/uIpRVqbbFAAAAAElFTkSuQmCC') no-repeat right 15px top 55%;
176
+ box-sizing: border-box;
177
+ }
178
+ .sb-form-field .cff-input-sm {
179
+ width: 80px;
180
+ border: 1px solid #D0D1D7;
181
+ text-align: right;
182
+ font-size: 16px;
183
+ }
184
+ .sb-form-field .cff-select.size-md {
185
+ width: 422px;
186
+ }
187
+ .sb-form-field .cff-select.size-sm {
188
+ width: 210px;
189
+ min-width: 210px;
190
+ }
191
+ .sb-form-field .cff-select.size-xs {
192
+ min-width: 100px;
193
+ width: 100px;
194
+ }
195
+ .sb-form-field .cff-textarea {
196
+ width: 100%;
197
+ min-height: 100px;
198
+ padding: 12px;
199
+ border: 1px solid #D0D1D7;
200
+ font-size: 16px;
201
+ }
202
+ .sb-form-field .cff-textarea::placeholder {
203
+ color: #8C8F9A;
204
+ }
205
+ .sb-form-field .cff-textarea:focus {
206
+ outline: none;
207
+ box-shadow: none;
208
+ border-color: #9c9ca0;
209
+ }
210
+ /* CFF Buttons */
211
+ .cff-btn {
212
+ display: flex;
213
+ align-items: center;
214
+ vertical-align: middle;
215
+ background: #F3F4F5;
216
+ border: 1px solid #DCDDE1;
217
+ box-sizing: border-box;
218
+ border-radius: 2px;
219
+ padding: 7px 20px;
220
+ font-weight: 600;
221
+ font-size: 14px;
222
+ line-height: 22px;
223
+ color: #141B38;
224
+ box-sizing: border-box;
225
+ letter-spacing: 0.2px;
226
+ cursor: pointer;
227
+ transition: all 0.15s ease-in-out;
228
+ }
229
+ .cff-btn:hover {
230
+ background: #FFFFFF;
231
+ border: 1px solid #D0D1D7;
232
+ }
233
+ .cff-btn:focus,
234
+ .cff-btn:active {
235
+ background: #E8E8EB;
236
+ border: 1px solid #D0D1D7;
237
+ }
238
+ .cff-btn .sb-btn-icon {
239
+ margin-right: 10px;
240
+ max-width: 15px;
241
+ }
242
+ .cff-btn.sb-btn-lg {
243
+ height: 50px;
244
+ font-size: 16px;
245
+ padding: 7px 25px;
246
+ }
247
+ .cff-btn.sb-btn-blue {
248
+ background-color: #0068A0;
249
+ color: #fff;
250
+ border-color: #096292;
251
+ }
252
+ .cff-btn span:not('.cff-button-text') {
253
+ line-height: 1;
254
+ margin-right: 5px;
255
+ }
256
+ .sb-btn-orange {
257
+ background: #E34F0E;
258
+ color: #fff;
259
+ font-style: normal;
260
+ font-weight: 600;
261
+ font-size: 14px;
262
+ line-height: 160%;
263
+ }
264
+ .sb-tabs-container .sb-tabs .sb-btn-orange {
265
+ margin-top: -20px;
266
+ }
267
+ .cff-btn svg.checkmark {
268
+ stroke: #fff;
269
+ transform: translate(-7px, -3px);
270
+ }
271
+ .input-hidden {
272
+ height: 0px;
273
+ width: 0px;
274
+ overflow: hidden;
275
+ }
276
+
277
+ /*** 2.1 - CFF Utility CSS ***/
278
+ .mr-3 {
279
+ margin-right: 3px;
280
+ }
281
+ .mr-4 {
282
+ margin-right: 4px;
283
+ }
284
+ .mb-6 {
285
+ margin-bottom: 6px;
286
+ }
287
+ .mb-10 {
288
+ margin-bottom: 10px;
289
+ }
290
+ .mb-15 {
291
+ margin-bottom: 15px;
292
+ }
293
+ .mb-20 {
294
+ margin-bottom: 20px;
295
+ }
296
+ .mb-30 {
297
+ margin-bottom: 30px;
298
+ }
299
+ .mb-40 {
300
+ margin-bottom: 40px;
301
+ }
302
+ .mb-50 {
303
+ margin-bottom: 50px;
304
+ }
305
+ .ml-10 {
306
+ margin-left: 15px;
307
+ }
308
+
309
+ /*** 2.1 Notification Element ***/
310
+ .sb-notification-ctn{
311
+ position: fixed;
312
+ bottom: -100px;
313
+ left: 200px;
314
+ z-index: 99999;
315
+ background: #fff;
316
+ display: flex;
317
+ justify-content: center;
318
+ align-items: center;
319
+ border-left: 3px solid #fff;
320
+ line-height: 1em;
321
+ padding: 10px 20px;
322
+ padding-left: 0px;
323
+ border-radius: 4px;
324
+ box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
325
+
326
+ }
327
+ .sb-notification-ctn[data-active="hidden"]{
328
+ -webkit-animation: cff-notification-hide .5s forwards linear;
329
+ animation: cff-notification-hide .5s forwards linear;
330
+ }
331
+ .sb-notification-ctn[data-active="shown"]{
332
+ -webkit-animation: cff-notification-show .5s forwards linear;
333
+ animation: cff-notification-show .5s forwards linear;
334
+ }
335
+ @-webkit-keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
336
+ @keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
337
+
338
+ @-webkit-keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
339
+ @keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
340
+
341
+ .sb-notification-ctn[data-type="success"]{
342
+ border-color: #59AB46;
343
+ }
344
+ .sb-notification-ctn[data-type="error"]{
345
+ border-color: #D72C2C;
346
+ }
347
+ .sb-notification-ctn[data-type="message"]{
348
+ border-color: #141B38;
349
+ }
350
+ .sb-notification-icon{
351
+ width: 25px;
352
+ height: 25px;
353
+ display: flex;
354
+ justify-content: center;
355
+ align-items: center;
356
+ margin-left: 10px;
357
+ margin-right: 15px;
358
+ }
359
+ .sb-notification-icon svg{
360
+ width: 22px;
361
+ height: 22px;
362
+ float: left;
363
+ fill: currentColor;
364
+ }
365
+
366
+ .sb-notification-ctn[data-type="success"] .sb-notification-icon{
367
+ color: #59AB46;
368
+ }
369
+ .sb-notification-ctn[data-type="error"] .sb-notification-icon{
370
+ color: #D72C2C;
371
+ }
372
+ .sb-notification-ctn[data-type="message"] .sb-notification-icon{
373
+ color: #141B38;
374
+ }
375
+
376
+ .sb-notification-ctn span{
377
+ font-size: 14px;
378
+ color: #141B38;
379
+ font-weight:500;
380
+ }
381
+
382
+ /*** 3.0 - Header ***/
383
+ .cff-fb-create-ctn{
384
+ margin-top: 90px;
385
+ }
386
+ .cff-fb-header{
387
+ height: 64px;
388
+ position: absolute;
389
+ display: flex;
390
+ flex-direction: row;
391
+ justify-content: space-between;
392
+ align-items: center;
393
+ background: #fff;
394
+ padding: 0px 52px;
395
+ z-index: 2;
396
+ }
397
+ .cff-fb-header-left {
398
+ display: flex;
399
+ }
400
+ .cff-fb-header-left .sb-social-wall-link-wrap {
401
+ margin-left: 30px;
402
+ }
403
+ .cff-fb-hd-logo{
404
+ display: flex;
405
+ vertical-align: middle;
406
+ align-items: center;
407
+ gap: 5px;
408
+ }
409
+ .cff-fb-hd-logo .sb-logo-letters-wrap {
410
+ margin-bottom: 4px;
411
+ }
412
+ .cff-fb-hd-logo .breadcrumb-title{
413
+ font-size: 14px;
414
+ font-weight: 400;
415
+ line-height: 22px;
416
+ letter-spacing: 0em;
417
+ margin-left: 4px;
418
+ }
419
+ .cff-fb-hd-logo .separator{
420
+ margin: 0 5px 0 10px;
421
+ }
422
+ .cff-fb-hd-btn{
423
+ height: 38px;
424
+ cursor: pointer;
425
+ display: flex;
426
+ flex-direction: row;
427
+ justify-content: center;
428
+ align-items: center;
429
+ padding: 0px 15px 0px 13px;
430
+ font-weight: 600;
431
+ font-size: 14px;
432
+ color: #353A41;
433
+ background: #F3F4F5;
434
+ border-radius: 2px;
435
+ border: 1px solid #DCDDE1;
436
+ position: relative;
437
+ text-decoration: none;
438
+ transition: all 0.3s ease;
439
+ box-sizing: border-box;
440
+ }
441
+ .cff-fb-hd-btn svg {
442
+ margin-right: 10px;
443
+ width: 16px;
444
+ }
445
+ .cff-fb-hd-btn:hover {
446
+ color: inherit;
447
+ background-color: #fff;
448
+ }
449
+ .cff-fb-hd-btn i{
450
+ margin: 0px 5px;
451
+ }
452
+ .cff-fb-hd-btn[data-icon="left"]{
453
+ padding-right: 20px!important;
454
+ }
455
+
456
+ .cff-fb-full-wrapper .section-header {
457
+ margin-top: 33px;
458
+ }
459
+ .cff-fb-full-wrapper .section-header h1 {
460
+ font-size: 32px;
461
+ line-height: 40px;
462
+ }
463
+ /*** 4.0 - Content ***/
464
+
465
+ /*** 4.1 - Tab Styles ***/
466
+ .sb-tabs-container {
467
+ position: relative;
468
+ width: 100%;
469
+ margin-top: 28px;
470
+ }
471
+ .sb-tabs-container .sb-tab-content .sb-tab-content-inner {
472
+ width: 100%;
473
+ margin-top: 20px;
474
+ height: auto;
475
+ padding-bottom: 30px;
476
+ }
477
+ .sb-tabs-container .cff-save-button {
478
+ display: flex;
479
+ justify-content: flex-end;
480
+ margin-top: 30px;
481
+ }
482
+ .sb-tabs-container .sb-tabs {
483
+ position: relative;
484
+ display: flex;
485
+ align-items: center;
486
+ justify-content: space-between;
487
+ margin-bottom: 20px;
488
+ }
489
+ .sb-tabs-container .sb-tabs:after {
490
+ position: absolute;
491
+ content: '';
492
+ width: 100%;
493
+ height: 1px;
494
+ background-color: #DCDDE1;
495
+ bottom: 0px;
496
+ left: 0px;
497
+ z-index: -1;
498
+ }
499
+ .sb-tabs-container .sb-tabs .tab {
500
+ position: relative;
501
+ padding: 9px 25px 15px 25px;
502
+ display: inline-block;
503
+ font-weight: 500;
504
+ font-size: 16px;
505
+ line-height: 160%;
506
+ color: #8C8F9A;
507
+ text-decoration: none;
508
+ cursor: pointer;
509
+ -webkit-transition: linear 0.2s;
510
+ -ms-transition: linear 0.2s;
511
+ transition: linear 0.2s;
512
+ }
513
+ .sb-tabs-container .sb-tabs .tab:not(:last-child) {
514
+ margin-right: 20px;
515
+ }
516
+ .sb-tabs-container .sb-tabs .tab.active {
517
+ color: #0068A0;
518
+ }
519
+ .sb-tabs-container .sb-tabs .tab-indicator {
520
+ position: absolute;
521
+ bottom: 0px;
522
+ left: 0px;
523
+ background-color: #0068A0;
524
+ width: 200px;
525
+ height: 2px;
526
+ transition: all 0.7s cubic-bezier(0.22, 0.51, 0.53, 0.88);
527
+ }
528
+
529
+ .slide-fade-enter-active {
530
+ transition: all 0.3s ease;
531
+ position: absolute;
532
+ }
533
+ .slide-fade-leave-active {
534
+ position: absolute;
535
+ transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
536
+ }
537
+ .slide-fade-enter,
538
+ .slide-fade-leave-to {
539
+ transform: translateX(10px);
540
+ opacity: 0;
541
+ }
542
+
543
+ /*** 4.2 - Tab Boxes ***/
544
+ .sb-tab-content{
545
+ width: 100%;
546
+ height: auto;
547
+ }
548
+ .sb-tab-content .sb-tab-box {
549
+ background-color: #fff;
550
+ padding: 24px;
551
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
552
+ margin-bottom: 12px;
553
+ }
554
+ .sb-tab-content > div {
555
+ background-color: #f0f0f1;
556
+ }
557
+ .sb-tab-content.cff-license-free .sb-tab-box.sb-caching-box,
558
+ .sb-tab-content.cff-license-free .sb-tab-box.sb-optimize-box {
559
+ padding-bottom: 0;
560
+ }
561
+ .sb-tab-content .sb-tab-box h3,
562
+ #cff-settings .sb-tab-content .sb-tab-box h3 {
563
+ margin: 0px 0px 5px;
564
+ font-size: 18px;
565
+ line-height: 140%;
566
+ color: #141B38;
567
+ display: flex;
568
+ }
569
+ .sb-tab-content .sb-tab-box h3 .sb-tooltip-info {
570
+ transform: translate(10px, 2px);
571
+ cursor: pointer;
572
+ }
573
+ .sb-tab-content .sb-tab-box p {
574
+ font-size: 14px;
575
+ line-height: 160%;
576
+ color: #8C8F9A;
577
+ margin: 0px;
578
+ }
579
+ .sb-tab-content .sb-tab-box .tab-label {
580
+ max-width: 270px;
581
+ min-width: 270px;
582
+ padding-right: 55px;
583
+ box-sizing: border-box;
584
+ float: left;
585
+ position: relative;
586
+ }
587
+ .sb-tab-content .sb-tab-box .tab-label.tab-label-full {
588
+ min-width: 100%;
589
+ max-width: 100%;
590
+ padding-right: 0;
591
+ float: initial;
592
+ }
593
+ .sb-tab-content .sb-tab-box .tab-label .sb-help-text {
594
+ font-size: 14px;
595
+ line-height: 160%;
596
+ color: #8C8F9A;
597
+ }
598
+ .sb-tab-content .sb-tab-box .cff-caching-pro-cta {
599
+ width: calc(100% + 48px);
600
+ display: flex;
601
+ flex-direction: row;
602
+ justify-content: center;
603
+ align-items: center;
604
+ padding: 0px 128px;
605
+ background: #E2F5FF;
606
+ margin-left: -24px;
607
+ box-sizing: border-box;
608
+ }
609
+ .sb-tab-content .sb-tab-box .cff-caching-pro-cta a {
610
+ text-decoration: none;
611
+ display: block;
612
+ padding: 8px 0;
613
+ }
614
+ .sb-tab-content .sb-tab-box .cff-caching-pro-cta span {
615
+ font-weight: 600;
616
+ font-size: 14px;
617
+ line-height: 160%;
618
+ color: #0068A0;
619
+ width: 100%;
620
+ text-align: center;
621
+ }
622
+ .sb-tab-content .sb-tab-box .cff-caching-pro-cta .cff-upgrade-cta-icon {
623
+ margin-left: 6px;
624
+ }
625
+ .sb-tab-content .license-status {
626
+ font-size: 14px;
627
+ line-height: 160%;
628
+ color: #141B38;
629
+ margin-bottom: 8px;
630
+ display: inline-block;
631
+ }
632
+ .sb-tab-box.sb-license-box.license-type-free .license-status {
633
+ font-style: italic;
634
+ }
635
+ .sb-tab-content .sb-tab-box .cff-tab-form-field{
636
+ width: calc(100% - 270px);
637
+ float: left;
638
+ flex-wrap: wrap;
639
+ }
640
+ .sb-tab-content .sb-tab-box.sb-caching-box .cff-tab-form-field {
641
+ margin-bottom: 10px;
642
+ }
643
+ .sb-tab-content .sb-tab-box.sb-optimize-box .cff-tab-form-field {
644
+ margin-bottom: 20px;
645
+ }
646
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .cff-tab-field-inner-wrap {
647
+ width: 100%;
648
+ }
649
+ .cff-tab-field-inner-wrap .upgrade-info{
650
+ border-bottom: 1px solid #DCDDE1;
651
+ margin-bottom: 24px;
652
+ padding-bottom: 24px;
653
+ }
654
+ .dev-site-license-field .upgrade-info{
655
+ border-bottom: 0px solid #DCDDE1;
656
+ padding-bottom: 0px;
657
+ }
658
+ .dev-site-license-field .cff-upgrade-license-btn {
659
+ text-decoration: none;
660
+ transform: none !important;
661
+ height: 38px;
662
+ padding: 4px 13px;
663
+ width: 165px;
664
+ box-sizing: border-box;
665
+ border: none;
666
+ }
667
+ .dev-site-license-field .cff-upgrade-license-btn span {
668
+ height: 20px;
669
+ margin-right: 9px;
670
+ }
671
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .cff-tab-field-inner-wrap:not(:last-child) {
672
+ margin-bottom: 20px;
673
+ }
674
+ .sb-tab-box.sb-license-box.license-type-free .cff-tab-form-field {
675
+ flex-basis: 58%;
676
+ flex-wrap: wrap;
677
+ }
678
+ .sb-tab-box.sb-manage-sources-box .cff-tab-form-field {
679
+ max-width: 1200px;
680
+ }
681
+ .sb-tab-box.sb-custom-css-box .cff-tab-form-field,
682
+ .sb-tab-box.sb-custom-js-box .cff-tab-form-field {
683
+ max-width: 840px;
684
+ }
685
+ @media (max-width: 1023px) {
686
+ .sb-tab-content .sb-tab-box .tab-label {
687
+ width: 100%;
688
+ max-width: 100%;
689
+ padding-right: 0;
690
+ float: initial;
691
+ margin-bottom: 20px;
692
+ }
693
+ .sb-tab-content .sb-tab-box .cff-tab-form-field{
694
+ width: 100%;
695
+ float: intial;
696
+ }
697
+ }
698
+
699
+ .sb-tab-box.sb-license-box.license-type-free .cff-tab-form-field .upgrade-info {
700
+ width: 100%;
701
+ border-bottom: 1px solid #DCDDE1;
702
+ padding-bottom: 25px;
703
+ margin-bottom: 25px;
704
+ }
705
+ .sb-tab-box.sb-license-box.license-type-free .field-left-content,
706
+ .sb-tab-box.sb-license-box.license-type-free .field-right-content {
707
+ order: 1;
708
+ }
709
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .cff-form-field {
710
+ width: 100%;
711
+ }
712
+ .license-valid .cff-form-field,
713
+ .license-valid .cff-form-field:focus {
714
+ border-color: #59AB46;
715
+ }
716
+ .license-invalid .cff-form-field {
717
+ border-color: #D72C2C;
718
+ }
719
+ .sb-field-error .cff-form-field,
720
+ .sb-field-error .cff-form-field:focus {
721
+ border-color: #D72C2C;
722
+ }
723
+ .license-valid .field-icon {
724
+ color: #59AB46;
725
+ }
726
+ .field-icon.field-icon-error {
727
+ color: #D72C2C;
728
+ }
729
+ .license-valid .sb-form-field .field-icon,
730
+ .sb-form-field .field-icon.field-icon-error {
731
+ background: white;
732
+ }
733
+ .form-error .cff-tab-form-field .cff-form-field {
734
+ border-color: #ab4646;
735
+ }
736
+ .upgrade-info span {
737
+ font-size: 14px;
738
+ line-height: 22px;
739
+ display: inline-block;
740
+ }
741
+ .upgrade-info span:last-child {
742
+ font-style: italic;
743
+ }
744
+ .upgrade-info span a {
745
+ font-weight: 700;
746
+ color: #0068A0;
747
+ }
748
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .cff-btn{
749
+ transform: translate(10px, 0px);
750
+ }
751
+ .sb-tab-content .sb-tab-box.sb-caching-box .cff-tab-form-field .cff-btn,
752
+ .sb-tab-content .sb-tab-box.sb-import-box .cff-tab-form-field .cff-btn{
753
+ transform: translate(0px);
754
+ }
755
+ .sb-tab-content .sb-tab-box.sb-license-box .cff-tab-form-field .sb-form-field{
756
+ margin-bottom: 8px;
757
+ }
758
+ .license-valid .cff-btn.loading svg path {
759
+ fill: #141B38
760
+ }
761
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .field-left-content {
762
+ flex-basis: 73%;
763
+ max-width: 465px;
764
+ }
765
+ .sb-tab-content .sb-tab-box.sb-license-box.license-type-free .cff-tab-form-field .field-left-content {
766
+ flex-basis: 73%;
767
+ }
768
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .field-right-content {
769
+ flex-basis: 20%;
770
+ }
771
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .form-info {
772
+ font-size: 12px;
773
+ line-height: 22px;
774
+ color: #27303F;
775
+ }
776
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .form-info .cff-manage-license a{
777
+ text-decoration-line: underline;
778
+ color: #27303F;
779
+ margin-right: 10px;
780
+ }
781
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .form-info .test-connection {
782
+ color: #434960;
783
+ }
784
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .form-info .cff-upgrade a {
785
+ color: #0068A0;
786
+ font-weight: 600;
787
+ margin-left: 8px;
788
+ text-decoration: none;
789
+ }
790
+ .sb-tab-content .sb-tab-box.sb-reset-box-style {
791
+ margin: 0;
792
+ border-bottom: 1px solid #E8E8EB;
793
+ }
794
+ .sb-tab-content.cff-license-free .sb-tab-box.sb-timezone-box,
795
+ .sb-tab-content.cff-license-free .sb-tab-box.sb-gdpr-box,
796
+ .sb-tab-content.cff-license-free .sb-tab-box.sb-optimize-box,
797
+ .sb-tab-content.cff-license-free .sb-tab-box.sb-caching-box {
798
+ margin-bottom: 12px;
799
+ border-bottom: none
800
+ }
801
+ .sb-tooltip-content {
802
+ position: absolute;
803
+ background: #fff;
804
+ border-radius: 2px;
805
+ padding: 12px 26px 12px 16px;
806
+ box-shadow: 1px 2px 4px 0px rgb(0 0 0 / 15%), -2px -1px 9px 0px rgb(0 0 0 / 13%);
807
+ width: 497px;
808
+ height: auto;
809
+ max-height: 284px;
810
+ bottom: 50px;
811
+ box-sizing: border-box;
812
+ right: -45px;
813
+ z-index: 9999;
814
+ }
815
+ .sb-tooltip-content p {
816
+ color: #141B38;
817
+ font-size: 14px;
818
+ line-height: 22px;
819
+ font-weight: normal;
820
+ }
821
+ .sb-tooltip-content:after {
822
+ width: 12px;
823
+ height: 12px;
824
+ content: '';
825
+ bottom: -7px;
826
+ right: calc(50% - 6px);
827
+ position: absolute;
828
+ background: #fff;
829
+ transform: rotate(45deg);
830
+ box-shadow: 2px 2px 2px rgb(0 0 0 / 14%);
831
+ }
832
+ .sb-localization-box .sb-tooltip-content:after {
833
+ right: calc(50% - 55px);
834
+ }
835
+ .sb-tooltip-content.sb-tooltip-bottom {
836
+ bottom: inherit;
837
+ top: 45px;
838
+ box-shadow: -1px -2px 4px 0px rgb(0 0 0 / 15%), 2px 1px 9px 0px rgb(0 0 0 / 13%);
839
+ }
840
+ .sb-tooltip-content.sb-tooltip-bottom:after {
841
+ bottom: inherit;
842
+ top: -6px;
843
+ box-shadow: -2px -2px 2px rgb(0 0 0 / 14%);
844
+ }
845
+ .sb-tab-content .sb-tab-box .sb-tooltip-content p {
846
+ color: #141B38;
847
+ }
848
+ .sb-tab-content .sb-tab-box .sb-tooltip-content p:not(:last-child) {
849
+ margin-bottom: 12px;
850
+ }
851
+ .sb-tab-content .sb-tab-box .sb-tooltip-content p a {
852
+ color: #141B38;
853
+ font-weight: 600;
854
+ }
855
+ .sb-gdpr-box .sb-gdpr-active {
856
+ padding-left: 27px;
857
+ position: relative;
858
+ max-width: 560px;
859
+ box-sizing: border-box;
860
+ }
861
+ .sb-gdpr-box .gdpr-help-text-yes {
862
+ max-width: 560px;
863
+ }
864
+ .sb-gdpr-box .sb-gdpr-active .gdpr-active-icon {
865
+ position: absolute;
866
+ left: 0px;
867
+ }
868
+ .sb-gdpr-box .help-text a {
869
+ font-weight: 400;
870
+ }
871
+ .sb-gdpr-box .sb-text-bold {
872
+ font-weight: 700;
873
+ cursor: pointer;
874
+ }
875
+ .sb-gdpr-box .sb-gdpr-bold {
876
+ text-decoration: underline;
877
+ }
878
+ .sb-gdpr-info-tooltip {
879
+ position: absolute;
880
+ font-size: 14px;
881
+ line-height: 22px;
882
+ color: #141B38;
883
+ background: #FFFFFF;
884
+ border-radius: 2px;
885
+ padding: 12px 26px 12px 16px;
886
+ box-shadow: 1px 2px 4px 0px rgb(0 0 0 / 15%), -2px -1px 9px 0px rgb(0 0 0 / 13%);
887
+ z-index: 99;
888
+ width: 561px;
889
+ height: 281px;
890
+ bottom: -297px;
891
+ box-sizing: border-box;
892
+ }
893
+ .sb-gdpr-info-tooltip:before {
894
+ width: 0;
895
+ height: 0;
896
+ border-left: 8px solid transparent;
897
+ border-right: 8px solid transparent;
898
+ border-bottom: 10px solid #fff;
899
+ content: '';
900
+ top: -10px;
901
+ right: 260px;
902
+ position: absolute;
903
+ }
904
+ .sb-gdpr-info-tooltip .sb-gdpr-info-headline {
905
+ font-weight: 600;
906
+ }
907
+ .sb-gdpr-info-tooltip .sb-gdpr-info-list {
908
+ margin: 0px;
909
+ margin-top: 1px;
910
+ padding-left: 20px;
911
+ }
912
+ .sb-gdpr-info-tooltip .sb-gdpr-info-list li {
913
+ position: relative;
914
+ margin-bottom: 2px;
915
+ }
916
+ .sb-gdpr-info-tooltip .sb-gdpr-info-list li:before {
917
+ width: 3px;
918
+ height: 3px;
919
+ position: absolute;
920
+ left: -12px;
921
+ top: 10px;
922
+ content: '';
923
+ background-color: #141B38;
924
+ border-radius: 10px;
925
+ }
926
+ .test-connection svg {
927
+ width: 15px;
928
+ height: 15px;
929
+ transform: translate(2px, 3px);
930
+ }
931
+ .test-connection i {
932
+ font-size: 14px;
933
+ }
934
+ .test-connection.loading path {
935
+ fill: #141B38
936
+ }
937
+ .test-connection.success svg {
938
+ transform: translate(3px, 6px)
939
+ }
940
+ .test-connection i {
941
+ font-size: 16px;
942
+ transform: translate(-2px, 1px);
943
+ }
944
+ .test-connection.success path {
945
+ fill: #59AB46;
946
+ }
947
+ .test-connection.success i {
948
+ color: #59AB46;
949
+ }
950
+ .test-connection.error i {
951
+ color: #D72C2C;
952
+ }
953
+ .test-connection a {
954
+ color: #434960;
955
+ font-weight: 600;
956
+ margin-left: 4px;
957
+ }
958
+ .test-connection:not(.error):not(.success) {
959
+ cursor: pointer;
960
+ }
961
+ .cff-btn[disabled="disabled"] {
962
+ cursor: not-allowed;
963
+ color: #8C8F9A;
964
+ background: #F3F4F5;
965
+ }
966
+ .cff-caching-btn span {
967
+ margin-right: 7px;
968
+ }
969
+ .cff-caching-btn.cff-btn[disabled="disabled"] svg path{
970
+ fill: #8C8F9A;
971
+ }
972
+ .cff-btn[disabled="disabled"]:hover {
973
+ color: #8C8F9A;
974
+ }
975
+ .cff-btn[disabled="disabled"]:not(.import-btn) .icon path {
976
+ fill: #8C8F9A;
977
+ }
978
+ .import-btn .icon svg:not(.checkmark) path {
979
+ fill: #141B38;
980
+ }
981
+ .import-btn[disabled="disabled"] .icon svg:not(.checkmark) path {
982
+ fill: #8C8F9A;
983
+ }
984
+ .cff-btn .icon {
985
+ margin-right: 12px;
986
+ }
987
+ .cff-btn .cff-loader-svg {
988
+ height: 20px;
989
+ }
990
+ .import-btn .icon.loading {
991
+ transform: translate(-5px, 1px);
992
+ }
993
+ .import-btn .icon.success {
994
+ transform: translate(-4px, 0px);
995
+ }
996
+ .import-btn .icon.error {
997
+ transform: translate(-4px, 0px);
998
+ }
999
+ .import-btn .icon.error i {
1000
+ color: #D72C2C;
1001
+ }
1002
+ .import-btn .icon.success svg {
1003
+ stroke: #141B38
1004
+ }
1005
+ .export-btn {
1006
+ text-decoration: none;
1007
+ }
1008
+ .export-btn:hover {
1009
+ color: inherit;
1010
+ }
1011
+
1012
+ .sb-tab-box.sb-caching-box .cff-caching-btn .loading path,
1013
+ .sb-tab-box.sb-optimize-box .optimize-image-btn .loading path,
1014
+ .sb-tab-box.sb-dpa-clear-box-style .loading path {
1015
+ fill: rgb(23 22 22 / 95%)
1016
+ }
1017
+ .sb-tab-box.sb-caching-box .cff-caching-btn .success svg,
1018
+ .sb-tab-box.sb-optimize-box .optimize-image-btn .success svg,
1019
+ .sb-tab-box.sb-dpa-clear-box-style .success svg {
1020
+ stroke: rgb(23 22 22 / 95%)
1021
+ }
1022
+
1023
+ .sb-tab-content .sb-tab-box.sb-dpa-clear-box-style .cff-tab-form-field .cff-btn {
1024
+ transform: none;
1025
+ margin-bottom: 15px;
1026
+ }
1027
+
1028
+ .sb-tab-box.sb-caching-box .cff-caching-btn:disabled path,
1029
+ .sb-tab-box.sb-caching-box .optimize-image-btn:disabled path {
1030
+ fill: #8C8F9A;
1031
+ }
1032
+
1033
+ /* Translation Tab */
1034
+ .sb-tab-inner-card {
1035
+ margin-top: 30px;
1036
+ }
1037
+
1038
+ .cff-table {
1039
+ width: 100%;
1040
+ border: 1px solid #DCDDE1;
1041
+ padding: 0;
1042
+ border-spacing: 0;
1043
+ }
1044
+ .cff-table thead th,
1045
+ .cff-table tfoot th {
1046
+ background-color: #F3F4F5;
1047
+ font-size: 14px;
1048
+ line-height: 22px;
1049
+ color: #434960;
1050
+ padding: 10px 20px;
1051
+ font-weight: 400;
1052
+ text-align: left;
1053
+ box-sizing: border-box;
1054
+ border-bottom: 1px solid #DCDDE1;
1055
+ }
1056
+ .cff-table tfoot th {
1057
+ border: 0;
1058
+ border-top: 1px solid #DCDDE1;
1059
+ }
1060
+
1061
+ .cff-table tbody td {
1062
+ padding: 6px 10px 6px 20px;
1063
+ box-sizing: border-box;
1064
+
1065
+ }
1066
+ .cff-table-row-header td {
1067
+ font-weight: 600;
1068
+ font-size: 16px !important;
1069
+ line-height: 26px;
1070
+ color: #141B38;
1071
+ box-sizing: border-box;
1072
+ padding: 10px 20px !important;
1073
+ }
1074
+ .cff-table tbody td {
1075
+ background: #F3F4F5;
1076
+ font-size: 14px;
1077
+ }
1078
+ .cff-table tbody:nth-child(2n) td {
1079
+ background-color:#fff;
1080
+ }
1081
+ .cff-table tbody tr:not(.cff-table-row-header):not(:last-child) td {
1082
+ border-bottom:1px solid #DCDDE1
1083
+ }
1084
+ .cff-table tbody tr:last-child td {
1085
+ padding: 6px 10px 6px 20px;
1086
+ }
1087
+
1088
+ .cff-table tbody tr td:first-child,
1089
+ .cff-table tbody tr td:nth-child(2) {
1090
+ width: 25%;
1091
+ }
1092
+ .cff-table tbody .cff-input{
1093
+ background: #FFFFFF;
1094
+ border: 1px solid #D0D1D7;
1095
+ box-sizing: border-box;
1096
+ border-radius: 1px;
1097
+ width: 100%;
1098
+ height: 38px;
1099
+ color: #2c3338;
1100
+ }
1101
+ .cff-table tbody .cff-input::placeholder {
1102
+ color: #8C8F9A;
1103
+ }
1104
+ .cff-table tbody .cff-input:focus {
1105
+ border: 1px solid #97989c;
1106
+ outline: none;
1107
+ box-shadow: none;
1108
+ }
1109
+ @media (max-width: 767px) {
1110
+ .sb-tabs-container .sb-tabs .tab {
1111
+ padding: 25px 10px;
1112
+ }
1113
+ .cff-table th,
1114
+ .cff-table td {
1115
+ display: block;
1116
+ width: 100%;
1117
+ }
1118
+ .cff-table tbody tr td:first-child,
1119
+ .cff-table tbody tr td:nth-child(2) {
1120
+ width: 100%;
1121
+ }
1122
+ .cff-table tbody .cff-input {
1123
+ height: 30px;
1124
+ min-height: 30px;
1125
+ font-size: 14px;
1126
+ }
1127
+ }
1128
+
1129
+ .sb-feed-issue-box #cff-send-report {
1130
+ width: 127px;
1131
+ min-width: 127px;
1132
+ height: 46px;
1133
+ padding: 6px 15px;
1134
+ }
1135
+ .sb-feed-issue-box #report-emails {
1136
+ width: 407px;
1137
+ height: 45px;
1138
+ padding: 8px 15px;
1139
+ font-size: 16px;
1140
+ line-height: 26px;
1141
+ }
1142
+ .sb-feed-issue-box #report-emails::placeholder {
1143
+ color: #8C8F9A;
1144
+ }
1145
+ .sb-feed-issue-box .feed-issues-fields {
1146
+ margin-bottom: 15px;
1147
+ display: flex;
1148
+ }
1149
+ .sb-feed-issue-box .feed-issues-fields * {
1150
+ margin: 0 10px 0 0;
1151
+ font-size: 16px;
1152
+ }
1153
+
1154
+ .sb-tab-box.sb-optimize-box .sb-form-field,
1155
+ .sb-tab-box.sb-usage-box .sb-form-field,
1156
+ .sb-tab-box.sb-ajax-box .sb-form-field,
1157
+ .sb-tab-box.sb-show-credit-box .sb-form-field,
1158
+ .sb-tab-box.sb-admin-error-box .sb-form-field,
1159
+ .sb-tab-box.sb-fix-text-box .sb-form-field{
1160
+ max-width: 695px;
1161
+ }
1162
+ .sb-tab-box.sb-feed-issue-box .sb-form-field .help-text {
1163
+ max-width: 670px;
1164
+ }
1165
+
1166
+ /*To Be Checked*/
1167
+ .sb-sources-list{
1168
+ width: 100%;
1169
+ position: relative;
1170
+ display: grid;
1171
+ grid-template-columns: 48% 48%;
1172
+ grid-column-gap: 2%;
1173
+ }
1174
+ .cff-fb-srcs-item-ins {
1175
+ display: flex;
1176
+ height: 62px;
1177
+ padding: 0 10px;
1178
+ position: relative;
1179
+ }
1180
+ .sb-srcs-item {
1181
+ box-sizing: border-box;
1182
+ position: relative;
1183
+ cursor: auto;
1184
+ display: block;
1185
+ height: 64px;
1186
+ border: 1px solid #E7E7E9;
1187
+ min-height: 60px;
1188
+ overflow: auto;
1189
+ margin-top: 15px;
1190
+ }
1191
+ .sb-srcs-item.expanded {
1192
+ height: auto;
1193
+ }
1194
+ .sb-source-error-wrap {
1195
+ display: flex;
1196
+ justify-content: center;
1197
+ align-items: center;
1198
+ margin-left: 9px;
1199
+ }
1200
+
1201
+ .sb-source-error-wrap span {
1202
+ font-weight: 600;
1203
+ font-size: 12px;
1204
+ line-height: 160%;
1205
+
1206
+ color: #D72C2C;
1207
+ margin-left: 5px;
1208
+ }
1209
+ .sb-source-error-wrap a {
1210
+ margin-left: 8px;
1211
+ font-weight: 600;
1212
+ font-size: 12px;
1213
+ line-height: 160%;
1214
+ text-decoration-line: underline;
1215
+
1216
+ color: #0068A0;
1217
+ }
1218
+ .sb-srcs-new {
1219
+ display: flex;
1220
+ justify-content: center;
1221
+ align-items: center;
1222
+ font-size: 14px;
1223
+ color: #0068A0;
1224
+ background: #F9F9FA;
1225
+ font-weight: 400;
1226
+ transition: all 0.15s ease-in-out;
1227
+ border: 1px solid #E8E8EB;
1228
+ }
1229
+ .sb-srcs-new:hover {
1230
+ cursor: pointer;
1231
+ background: #E2F5FF;
1232
+ }
1233
+ .sb-srcs-new span.add-new-icon {
1234
+ margin-right: 11px;
1235
+ margin-top: 3px;
1236
+ }
1237
+ .sb-srcs-item-avatar{
1238
+ display: flex;
1239
+ width: 42px;
1240
+ height: inherit;
1241
+ justify-content: center;
1242
+ align-items: center;
1243
+ }
1244
+ .sb-srcs-item-avatar img{
1245
+ width: 42px;
1246
+ height: 42px;
1247
+ border-radius: 50%;
1248
+ background: #eee;
1249
+ }
1250
+ .sb-srcs-item-inf{
1251
+ width: 100%;
1252
+ height: inherit;
1253
+ display: flex;
1254
+ justify-content: center;
1255
+ flex-direction: column;
1256
+ padding-left: 10px;
1257
+ }
1258
+ .sb-srcs-item-name{
1259
+ font-weight: 600;
1260
+ color: #141B38;
1261
+ font-size: 16px;
1262
+ margin-bottom: 1px;
1263
+ padding-right: 60px;
1264
+ max-height: 32px;
1265
+ line-height: 1.1;
1266
+ padding-bottom: 2px;
1267
+ overflow: hidden;
1268
+ }
1269
+
1270
+ .sb-srcs-item-used{
1271
+ color: #434960;
1272
+ display: flex;
1273
+ align-items: center;
1274
+ font-weight: 400;
1275
+ font-size: 12px;
1276
+ }
1277
+
1278
+ .cff-fb-srcs-info-item:first-of-type {
1279
+ align-items: center;
1280
+ }
1281
+ .cff-fb-srcs-info-item {
1282
+ display: flex;
1283
+ border-top: 1px solid #E7E7E9;
1284
+ box-sizing: border-box;
1285
+ width: 100%;
1286
+ float: left;
1287
+ padding: 8px 10px;
1288
+ }
1289
+ .cff-fb-srcs-info-item strong {
1290
+ font-size: 14px;
1291
+ width: 50px;
1292
+ }
1293
+ .cff-fb-srcs-info-item span {
1294
+ font-size: 13px;
1295
+ line-height: 1.5em;
1296
+ color: #434960;
1297
+ font-weight: 400;
1298
+ display: inline-block;
1299
+ word-break: break-all;
1300
+ width: calc(100% - 80px);
1301
+ padding: 0 15px;
1302
+ box-sizing: border-box;
1303
+ }
1304
+ .cff-fb-srcs-info-icon {
1305
+ width: 26px;
1306
+ height: 26px;
1307
+ display: flex;
1308
+ justify-content: center;
1309
+ align-items: center;
1310
+ cursor: pointer;
1311
+ margin-left: auto;
1312
+ border: 1px solid #D0D1D7;
1313
+ border-radius: 2px;
1314
+ transition: all 0.15s ease-in-out;
1315
+ }
1316
+ .cff-fb-srcs-info-icon:hover {
1317
+ background: #F3F4F5;
1318
+ }
1319
+ .cff-fb-srcs-info-icon:focus,
1320
+ .cff-fb-srcs-info-icon:active {
1321
+ background: #E8E8EB;
1322
+ }
1323
+ .cff-fb-srcs-info-icon svg {
1324
+ width: 15px;
1325
+ float: left;
1326
+ }
1327
+ .sb-control-src-expand-chevron {
1328
+ width: 7px;
1329
+ height: 7px;
1330
+ border-left: 2px solid currentColor;
1331
+ border-top: 2px solid currentColor;
1332
+ -webkit-transform: rotate(45deg);
1333
+ transform: rotate(45deg);
1334
+ }
1335
+ .sb-srcs-item-actions{
1336
+ position: absolute;
1337
+ width: 70px;
1338
+ height: 31px;
1339
+ right: 7px;
1340
+ top: 7px;
1341
+ }
1342
+ .sb-srcs-item-actions-btn{
1343
+ width: 30px;
1344
+ height: 31px;
1345
+ cursor: pointer;
1346
+ float: left;
1347
+ display: flex;
1348
+ justify-content: center;
1349
+ align-items: center;
1350
+ margin-left: 3px;
1351
+ }
1352
+ .sb-srcs-item-actions-btn svg{
1353
+ float: left;
1354
+ width: 17px;
1355
+ fill: currentColor;
1356
+ }
1357
+ .sb-srcs-item-actions-btn.sb-srcs-item-angle-up svg {
1358
+ height: 10px;
1359
+ }
1360
+ .sb-srcs-item-cog,
1361
+ .sb-srcs-item-angle-up{
1362
+ color: #434960;
1363
+ transition: all 0.15s ease-in-out;
1364
+ border-radius: 4px;
1365
+ }
1366
+ .sb-srcs-item-cog:hover,
1367
+ .sb-srcs-item-angle-up:hover {
1368
+ background: #F3F4F5;
1369
+ }
1370
+ .sb-srcs-item-cog:focus,
1371
+ .sb-srcs-item-cog:active,
1372
+ .sb-srcs-item-angle-up:focus,
1373
+ .sb-srcs-item-angle-up:active {
1374
+ background: #E8E8EB;
1375
+ }
1376
+ .sb-srcs-item-delete{
1377
+ color: #D72C2C;
1378
+ transition: all 0.15s ease-in-out;
1379
+ border-radius: 4px;
1380
+ }
1381
+ .sb-srcs-item-delete:hover {
1382
+ background-color: #FCEDED;
1383
+ }
1384
+ .sb-srcs-item-delete:focus,
1385
+ .sb-srcs-item-delete:active {
1386
+ background: #eed4d4;
1387
+ }
1388
+ .sb-srcs-item-delete svg{
1389
+ width: 13px;
1390
+ }
1391
+ #cff-settings .cff-fb-source-step1 .cff-fb-source-top h3 {
1392
+ margin-bottom: 40px;
1393
+ }
1394
+
1395
+ /*
1396
+ Sources Instance Popup
1397
+ */
1398
+ .cff-fb-popup-feedinst .cff-fb-source-top{
1399
+ display: flex;
1400
+ align-items: center;
1401
+ }
1402
+ .cff-fb-popup-feedinst h5{
1403
+ margin-bottom: 0px;
1404
+ float: left;
1405
+ font-size: 27px;
1406
+ }
1407
+ .cff-fb-fdinst-type{
1408
+ padding: 5px 5px;
1409
+ background: #E8E8EB;
1410
+ margin-left: 12px;
1411
+ float: left;
1412
+ }
1413
+ .cff-fb-inst-tbl-ctn{
1414
+ padding: 0 23px 63px;
1415
+ }
1416
+ .cff-fb-inst-tbl-ctn table{
1417
+ width: 100%;
1418
+ border-spacing: unset;
1419
+ box-sizing: border-box;
1420
+ border: 1px solid #DCDDE1;
1421
+ text-align: left;
1422
+ }
1423
+ .cff-fb-inst-tbl-ctn tfoot,.cff-fb-inst-tbl-ctn thead{
1424
+ background: #F3F4F5
1425
+ }
1426
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf th, .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf td{
1427
+ font-size: 13px;
1428
+ color: #364152;
1429
+ padding: 13px 10px;
1430
+ }
1431
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr:nth-child(odd){
1432
+ background: #fff;
1433
+ }
1434
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr:nth-child(even){
1435
+ background: #F3F4F5;
1436
+ }
1437
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf tr th,
1438
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf tr td{
1439
+ padding: 4px 20px;
1440
+ }
1441
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr td{
1442
+ padding: 11px 20px;
1443
+ }
1444
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-name{
1445
+ font-size: 14px;
1446
+ }
1447
+ .cff-fb-inst-tbl-shrtc{
1448
+ display: flex;
1449
+ align-items: center;
1450
+ }
1451
+
1452
+ .cff-fd-inst-btn{
1453
+ width: 10px;
1454
+ height: 10px;
1455
+ box-sizing: border-box;
1456
+ border-right: 3px solid #8C8F9A;
1457
+ border-top: 3px solid #8C8F9A;
1458
+ cursor: pointer;
1459
+ -webkit-transform: rotate(45deg);
1460
+ transform: rotate(45deg);
1461
+ }
1462
+
1463
+ .cff-fd-lst-actions .cff-fd-lst-btn, .cff-fb-inst-tbl-ctn .cff-fd-lst-btn {
1464
+ box-sizing: border-box;
1465
+ width: 36px;
1466
+ height: 32px;
1467
+ }
1468
+ .cff-fd-lst-shortcode-cp {
1469
+ margin-left: 10px;
1470
+ }
1471
+ .cff-fb-tltp-parent {
1472
+ position: relative;
1473
+ }
1474
+ .cff-fd-lst-btn {
1475
+ width: 21px;
1476
+ height: 21px;
1477
+ display: inline-flex;
1478
+ justify-content: center;
1479
+ align-items: center;
1480
+ margin: 0 4px;
1481
+ cursor: pointer;
1482
+ color: #141B38;
1483
+ border-radius: 2px;
1484
+ border: 1px solid #D8DADD;
1485
+ -webkit-transition: all .2s ease-in-out;
1486
+ transition: all .2s ease-in-out;
1487
+ background: #fff;
1488
+ }
1489
+ .cff-fb-tltp-elem {
1490
+ position: absolute;
1491
+ color: #fff;
1492
+ background: #434960;
1493
+ font-size: 14px;
1494
+ padding: 7px 10px;
1495
+ border-radius: 3px;
1496
+ font-weight: 500;
1497
+ z-index: 9;
1498
+ text-align: center;
1499
+ opacity: 0;
1500
+ visibility: hidden;
1501
+ top: calc(-100% - 30px);
1502
+ left: 50%;
1503
+ -webkit-transform: translateX(-50%);
1504
+ transform: translateX(-50%);
1505
+ -webkit-transition: all .2s ease-in-out;
1506
+ transition: all .2s ease-in-out;
1507
+ }
1508
+ .cff-fb-tltp-elem span {
1509
+ position: relative;
1510
+ z-index: 3;
1511
+ }
1512
+ .cff-fd-lst-btn svg {
1513
+ fill: currentColor;
1514
+ width: 14px;
1515
+ float: left;
1516
+ }
1517
+ .cff-fd-lst-btn svg {
1518
+ height: 13px;
1519
+ }
1520
+ .cff-fd-lst-thtf th{
1521
+ border-bottom: 1px solid #DCDDE1;
1522
+ }
1523
+ .cff-fd-lst-thtf td{
1524
+ border-top: 1px solid #DCDDE1;
1525
+ }
1526
+ .cff-fb-fdinst-type {
1527
+ padding: 5px 5px;
1528
+ background: #E8E8EB;
1529
+ margin-left: 12px;
1530
+ float: left;
1531
+ }
1532
+ .cff-fd-lst-name {
1533
+ font-size: 17px;
1534
+ font-weight: 500;
1535
+ color: #0068A0!important;
1536
+ }
1537
+ .cff-fb-inst-tbl-ctn a, .cff-fb-inst-tbl-ctn a:focus {
1538
+ text-decoration: none;
1539
+ outline: none;
1540
+ }
1541
+ .cff-fd-lst-actions .cff-fd-lst-btn, .cff-fb-inst-tbl-ctn .cff-fd-lst-btn {
1542
+ box-sizing: border-box;
1543
+ width: 36px;
1544
+ height: 32px;
1545
+ background: transparent;
1546
+ }
1547
+ .cff-fd-lst-btn svg {
1548
+ fill: currentColor;
1549
+ width: 14px;
1550
+ float: left;
1551
+ }
1552
+ .cff-fb-tltp-parent:hover .cff-fb-tltp-elem {
1553
+ top: calc(-100% - 20px);
1554
+ opacity: 1;
1555
+ visibility: visible;
1556
+ }
1557
+ .cff-fb-tltp-elem:after {
1558
+ content: '';
1559
+ position: absolute;
1560
+ height: 10px;
1561
+ width: 10px;
1562
+ bottom: -5px;
1563
+ left: calc(50% - 5px);
1564
+ background: #434960;
1565
+ transform: rotate(
1566
+ -45deg
1567
+ );
1568
+ }
1569
+
1570
+ /*** 6.0 Sticky Widget ***/
1571
+ .cff-stck-wdg{
1572
+ position: fixed;
1573
+ right: 21px;
1574
+ z-index: 9;
1575
+ bottom: 20px;
1576
+ }
1577
+ .cff-stck-wdg-btn{
1578
+ width: 52px;
1579
+ height: 52px;
1580
+ background: #fff;
1581
+ border-radius: 50%;
1582
+ cursor: pointer;
1583
+ display: flex;
1584
+ justify-content: center;
1585
+ align-items: center;
1586
+ filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
1587
+ }
1588
+ .cff-stck-wdg-btn svg{
1589
+ width: 25px;
1590
+ fill: #E34F0E;
1591
+ height: 33px;
1592
+ float: left;
1593
+ }
1594
+
1595
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
1596
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
1597
+ display: block;
1598
+ }
1599
+ .cff-stck-wdg-btn-cls{
1600
+ width: inherit;
1601
+ height: inherit;
1602
+ position: relative;
1603
+ color: #364152;
1604
+ box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
1605
+ border-radius: 70px;
1606
+ }
1607
+ .cff-stck-wdg-btn-cls svg {
1608
+ width: 14px;
1609
+ height: 14px;
1610
+ position: absolute;
1611
+ top: 50%;
1612
+ right: 0;
1613
+ bottom: 0;
1614
+ left: 50%;
1615
+ margin-top: -7px;
1616
+ margin-left: -7px;
1617
+ }
1618
+
1619
+ .cff-stck-pop{
1620
+ position: absolute;
1621
+ width: 292px;
1622
+ height: auto;
1623
+ background: #fff;
1624
+ border: 1px solid #E2E8F0;
1625
+ box-sizing: border-box;
1626
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
1627
+ border-radius: 2px;
1628
+ padding: 20px;
1629
+ right: 0px;
1630
+ bottom: 66px;
1631
+ color: #141B38;
1632
+ padding-bottom: 82px;
1633
+ }
1634
+ .cff-stck-wdg[data-active="true"] .cff-stck-pop{
1635
+ bottom: 66px;
1636
+ opacity: 1;
1637
+ visibility: visible;
1638
+ }
1639
+
1640
+ .cff-stck-pop svg{
1641
+ fill: currentColor;
1642
+ }
1643
+ .cff-stck-el-list{
1644
+ border: 1px solid #DCDDE1;
1645
+ border-radius: 2px;
1646
+ }
1647
+ .cff-stck-el{
1648
+ display: flex;
1649
+ align-items: center;
1650
+ padding: 12px 13px 11px;
1651
+ border-bottom: 1px solid #DCDDE1;
1652
+ transition: background .15s ease-in-out;
1653
+ }
1654
+ .cff-stck-el:hover{
1655
+ background: #F3F4F5;
1656
+ }
1657
+ .cff-stck-el:last-of-type{
1658
+ border-bottom: 0px;
1659
+ }
1660
+ .cff-stck-el-list .cff-chevron svg{
1661
+ width: 5px;
1662
+ height: 8px;
1663
+ }
1664
+ .cff-fs-a {
1665
+ width: 100%;
1666
+ height: 100%;
1667
+ display: block;
1668
+ position: absolute;
1669
+ left: 0;
1670
+ top: 0;
1671
+ z-index: 1;
1672
+ }
1673
+ .cff-stck-el .cff-stck-el-txt{
1674
+ color: #27303F;
1675
+ }
1676
+ .cff-stck-el.cff-stck-el-upgrd{
1677
+ padding: 8px 14px;
1678
+ font-size: 14px;
1679
+ background: var(--cl-orange);
1680
+ color: #fff;
1681
+ position: relative;
1682
+ transition: background .15s ease-in-out;
1683
+ }
1684
+ .cff-chevron {
1685
+ position: absolute;
1686
+ right: 14px
1687
+ }
1688
+ .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
1689
+ color: #fff;
1690
+ }
1691
+ .cff-stck-el.cff-stck-el-upgrd:after{
1692
+ top: 20px;
1693
+ opacity: 1;
1694
+ }
1695
+ .cff-stck-el-icon{
1696
+ margin-right: 10px;
1697
+ }
1698
+ .cff-stck-el-icon svg{
1699
+ width: 17px;
1700
+ float: left;
1701
+ }
1702
+ .cff-stck-title{
1703
+ margin-top: 20px;
1704
+ margin-bottom: 10px;
1705
+ color: #141B38;
1706
+ font-weight: 600;
1707
+ font-size: 14px;
1708
+ line-height: 160%;
1709
+ }
1710
+ .cff-stck-follow{
1711
+ background: #F3F4F5;
1712
+ margin-top: 20px;
1713
+ left: 0px;
1714
+ bottom: 0px;
1715
+ position: absolute;
1716
+ padding: 12px 20px;
1717
+ display: flex;
1718
+ align-items: center;
1719
+ }
1720
+ .cff-stck-follow span{
1721
+ font-weight: 600;
1722
+ font-size: 14px;
1723
+ }
1724
+ .cff-stck-flw-links{
1725
+ display: flex;
1726
+ justify-content: center;
1727
+ align-items: center;
1728
+ margin-left: auto;
1729
+ }
1730
+ .cff-stck-flw-links a{
1731
+ width: 36px;
1732
+ height: 28px;
1733
+ color: inherit;
1734
+ display: inline-flex;
1735
+ justify-content: center;
1736
+ align-items: center;
1737
+ margin-left: 4px;
1738
+ border-radius: 2px;
1739
+ transition: background .15s ease-in-out;
1740
+ }
1741
+ .cff-stck-flw-links svg{
1742
+ width: 17px;
1743
+ color: #141B38;
1744
+ }
1745
+ .cff-stck-flw-links a:hover{
1746
+ background: #fff;
1747
+ }
1748
+ .cff-stck-flw-links a:hover svg{
1749
+ color: inherit;
1750
+ }
1751
+
1752
+ /*** 7.0 Responsive ***/
1753
+ @media (max-width: 1429px) {
1754
+ .caching-form-fields-group {
1755
+ display: inline-block;
1756
+ }
1757
+ .caching-form-fields-group select {
1758
+ margin-bottom: 5px;
1759
+ }
1760
+ }
1761
+ @media (min-width: 1429px) {
1762
+ .caching-form-fields-group {
1763
+ display: flex;
1764
+ }
1765
+ }
1766
+ @media (max-width: 1023px) {
1767
+ .sb-tab-content .sb-tab-box .tab-label {
1768
+ width: 100%;
1769
+ max-width: 100%;
1770
+ padding-right: 0;
1771
+ float: initial;
1772
+ margin-bottom: 20px;
1773
+ }
1774
+ .sb-tab-content .sb-tab-box .cff-tab-form-field{
1775
+ width: 100%;
1776
+ float: intial;
1777
+ }
1778
+ }
1779
+ @media (max-width: 1320px) {
1780
+ .sb-feed-issue-box .feed-issues-fields {
1781
+ display: inline-block;
1782
+ }
1783
+
1784
+ .sb-feed-issue-box .feed-issues-fields * {
1785
+ margin-bottom: 5px;
1786
+ }
1787
+ }
1788
+ @media (max-width: 767px) {
1789
+ .auto-fold #wpcontent {
1790
+ padding-left: 0;
1791
+ }
1792
+ .cff-fb-full-wrapper {
1793
+ padding: 70px 20px 0 20px;
1794
+ }
1795
+ .cff-fb-hd-btn {
1796
+ padding: 0px 15px 0px 7px;
1797
+ }
1798
+ .cff-fb-header {
1799
+ padding: 0px 20px;
1800
+ }
1801
+ .sb-notification-ctn {
1802
+ left: 20px;
1803
+ }
1804
+ .sb-tab-box.sb-export-box .sb-form-field .d-flex{
1805
+ flex-wrap: wrap;
1806
+ }
1807
+ .sb-form-field .cff-select {
1808
+ width: 100%;
1809
+ }
1810
+ .sb-tab-content .sb-tab-box .cff-tab-form-field {
1811
+ flex-wrap: wrap;
1812
+ }
1813
+ .sb-license-box .cff-tab-form-field .cff-btn {
1814
+ transform: translate(0px, 0px) !important;
1815
+ margin-top: 10px;
1816
+ }
1817
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .field-left-content {
1818
+ flex-basis: 100%;
1819
+ }
1820
+ .sb-export-box .cff-tab-form-field .cff-btn {
1821
+ transform: translate(0px, 0px) !important;
1822
+ margin-top: 10px;
1823
+ }
1824
+ .sb-feed-issue-box .feed-issues-fields {
1825
+ width: 100%;
1826
+ }
1827
+ .sb-feed-issue-box #report-emails {
1828
+ max-width: 100%;
1829
+ }
1830
+ .cff-table thead th, .cff-table tfoot th {
1831
+ display: none;
1832
+ }
1833
+ .cff-table tbody tr:not(.cff-table-row-header) td:last-child {
1834
+ margin-bottom: 20px;
1835
+ }
1836
+ .cff-table tbody {
1837
+ background-color: #f3f4f5;
1838
+ }
1839
+ .cff-table tbody:nth-child(2n) {
1840
+ background-color: #fff;
1841
+ }
1842
+ .sb-tab-content .sb-tab-box .cff-tab-form-field .d-flex{
1843
+ flex-wrap: wrap;
1844
+ }
1845
+ .sb-sources-list {
1846
+ grid-template-columns: 100%;
1847
+ }
1848
+ .sb-tabs-container .sb-tabs {
1849
+ flex-direction: column-reverse;
1850
+ flex-wrap: wrap;
1851
+ align-items: flex-end;
1852
+ }
1853
+ .cff-fb-full-wrapper {
1854
+ padding: 82px 20px 0 20px;
1855
+ }
1856
+ .sb-tabs-container .sb-tabs .left-buttons {
1857
+ width: 100%;
1858
+ display: flex;
1859
+ }
1860
+ .sb-tabs-container .sb-tabs .right-buttons {
1861
+ transform: translateY(-15px);
1862
+ }
1863
+ .sb-tabs-container .sb-tabs .left-buttons .tab {
1864
+ flex-grow: 1;
1865
+ flex-basis: 0;
1866
+ padding: 15px 10px;
1867
+ text-align: center;
1868
+ }
1869
+ .sb-tabs-container {
1870
+ margin-top: -45px;
1871
+ }
1872
+ #wpbody-content {
1873
+ padding-bottom: 50px;
1874
+ }
1875
+ .sb-form-field .cff-select.size-md {
1876
+ width: 100%;
1877
+ max-width: 100%;
1878
+ }
1879
+ }
1880
+ @media (max-width: 567px) {
1881
+ .sb-tabs-container .sb-tabs .tab:not(:last-child) {
1882
+ margin-right: 10px;
1883
+ }
1884
+ }
1885
+ @media (max-width: 420px) {
1886
+ .sb-tabs-container .sb-tabs .left-buttons .tab {
1887
+ padding: 15px 7px;
1888
+ font-size: 14px;
1889
+ }
1890
+ }
1891
+
1892
+ .sb-tab-content > div {
1893
+ min-height: 520px;
1894
+ }
1895
+ .sb-form-field .sb-disabled-custom-code textarea{
1896
+ display: block;
1897
+ margin: 20px 0 0 0;
1898
+ padding: 10px;
1899
+ background: rgba(0, 0, 0, 0.07);
1900
+ width: 100%;
1901
+ height: 300px;
1902
+ overflow-y: scroll;
1903
+ border: 1px solid #ccc;
1904
+ color: #555;
1905
+ }
1906
+ .sb-form-field code {
1907
+ background: none;
1908
+ padding: 0;
1909
+ width: 100%;
1910
+ height: 300px;
1911
+ overflow-y: scroll;
1912
+ border: 1px solid #ccc;
1913
+ color: #666;
1914
  }
admin/assets/css/support.css CHANGED
@@ -1,1015 +1,1015 @@
1
- /*
2
- * SUPPORT PAGE CSS TABLE OF CONTENTS
3
- *
4
- * 1.0 - GLOBAL
5
- * 2.0 - HEADER
6
- * 3.0 - 3.0 - SUPPORT CONTAINER
7
- * 3.1 - SECTION HEADER
8
- * 3.2 - SUPPORT BLOCK
9
- * 3.3 - CONTACT SUPPORT BLOCK
10
- * 4.0 - STICKY WIDGET
11
- * 5.0 - SB NOTIFICATION ELEMENT
12
- * 6.0 - RESPONSIVENESS
13
- */
14
-
15
- /*** 1.0 - GLOBAL ***/
16
- .clearfix { display: inline-block; }
17
- /* start commented backslash hack \*/
18
- * html .clearfix { height: 1%; }
19
- .clearfix { display: block; }
20
- #cff-support {
21
- -webkit-font-smoothing: antialiased;
22
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
23
- }
24
- #wpcontent {
25
- padding-left: 0px;
26
- }
27
- #wpbody-content {
28
- padding-bottom: 40px;
29
- }
30
- .clearfix:after {
31
- visibility: hidden;
32
- display: block;
33
- font-size: 0;
34
- content: " ";
35
- clear: both;
36
- height: 0;
37
- }
38
- /*orange*/
39
- .sb-btn-orange{
40
- background: #E34F0E!important;
41
- color: #fff!important;
42
- }
43
- .sb-btn-orange:hover{
44
- background: #F37036!important;
45
- color: #fff!important;
46
- }
47
- .sb-btn-orange:focus,
48
- .sb-btn-orange:active{
49
- background: #B8400B!important;
50
- color: #fff!important;
51
- }
52
- .cff-fb-cp-clpboard{
53
- width: 0px;
54
- height: 0px;
55
- position: absolute;
56
- left: -100000px;
57
- }
58
- .cff-fb-full-wrapper{
59
- padding: 0 53px;
60
- padding-top: 82px;
61
- }
62
- .cff-fb-fs {
63
- width: 100%;
64
- position: relative;
65
- float: left;
66
- box-sizing: border-box;
67
- }
68
-
69
-
70
- .sb-btn-grey:not(:disabled){
71
- background: #F3F4F5!important;
72
- color: #141B38!important;
73
- border: 1px solid #D0D1D7!important;
74
- }
75
- .sb-btn-grey:not(:disabled):hover{
76
- background: #fff!important;
77
- color: #141B38!important;
78
- border: 1px solid #DCDDE1!important;
79
- }
80
- .sb-btn-grey:not(:disabled):focus,
81
- .sb-btn-grey:not(:disabled):active{
82
- background: #E8E8EB!important;
83
- color: #141B38!important;
84
- border: 1px solid #D0D1D7!important;
85
- }
86
-
87
- /*** 2.0 - HEADER ***/
88
- .cff-fb-create-ctn{
89
- margin-top: 90px;
90
- }
91
- .cff-fb-header{
92
- height: 64px;
93
- position: absolute;
94
- display: flex;
95
- flex-direction: row;
96
- justify-content: space-between;
97
- align-items: center;
98
- background: #fff;
99
- padding: 0px 52px;
100
- z-index: 2;
101
- }
102
- .cff-fb-header-left {
103
- display: flex;
104
- }
105
- .cff-fb-header-left .sb-social-wall-link-wrap {
106
- margin-left: 30px;
107
- }
108
- .sb-social-wall-link-wrap {
109
- display: flex;
110
- font-size: 14px;
111
- margin: 10px 0 10px 30px;
112
- }
113
- .sb-social-wall-link:first-child {
114
- padding-left: 0;
115
- border-right: 1px solid #ccc;
116
- color: #0068A0!important;
117
- line-height: 1;
118
- }
119
- .sb-social-wall-link {
120
- padding: 0 12px;
121
- border-right: 1px solid #ccc;
122
- color: #0068A0!important;
123
- line-height: 1;
124
- }
125
- .sb-social-wall-link a {
126
- text-decoration: none;
127
- }
128
- .sb-social-wall-link a:focus {
129
- outline: none;
130
- box-shadow: none;
131
- }
132
- .sb-social-wall-link:last-child {
133
- border-right: none;
134
- }
135
- .cff-fb-hd-logo{
136
- display: flex;
137
- vertical-align: middle;
138
- align-items: center;
139
- gap: 5px;
140
- }
141
- .cff-fb-hd-logo .sb-logo-letters-wrap {
142
- transform: translate(0px, -2px);
143
- }
144
- .cff-fb-hd-logo .breadcrumb-title{
145
- font-size: 14px;
146
- font-weight: 400;
147
- line-height: 22px;
148
- letter-spacing: 0em;
149
- margin-left: 4px;
150
- }
151
- .cff-fb-hd-logo .separator{
152
- margin: 0 5px 0 10px;
153
- }
154
- .cff-fb-hd-btn{
155
- height: 38px;
156
- cursor: pointer;
157
- display: flex;
158
- flex-direction: row;
159
- justify-content: center;
160
- align-items: center;
161
- padding: 0px 15px 0px 13px;
162
- font-weight: 600;
163
- font-size: 14px;
164
- color: #353A41;
165
- background: #F3F4F5;
166
- border-radius: 2px;
167
- border: 1px solid #DCDDE1;
168
- position: relative;
169
- text-decoration: none;
170
- transition: all 0.3s ease;
171
- box-sizing: border-box;
172
- }
173
- .cff-fb-hd-btn svg {
174
- margin-right: 10px;
175
- width: 16px;
176
- }
177
- .cff-fb-hd-btn:focus {
178
- outline: none;
179
- box-shadow: none;
180
- }
181
- .cff-fb-hd-btn:hover {
182
- color: inherit;
183
- background-color: #fff;
184
- }
185
- .cff-fb-hd-btn i{
186
- margin: 0px 5px;
187
- }
188
- .cff-fb-hd-btn[data-icon="left"]{
189
- padding-right: 20px!important;
190
- }
191
- .cff-fb-full-wrapper .section-header h1 {
192
- font-size: 32px;
193
- line-height: 40px;
194
- }
195
- /*** 3.0 - SUPPORT CONTAINER ***/
196
- .cff-sb-container {
197
- max-width: 885px;
198
- position: relative;
199
- margin: auto;
200
- margin-top: 33px;
201
- box-sizing: border-box;
202
- }
203
-
204
- /*** 3.1 - SECTION HEADER ***/
205
- .cff-section-header {
206
- display: flex;
207
- justify-content: space-between;
208
- align-items: center;
209
- }
210
- .cff-section-header h2{
211
- font-weight: 600;
212
- font-size: 32px;
213
- line-height: 40px;
214
- color: #141B38;
215
- margin: 0;
216
- }
217
- .cff-section-header .cff-search-doc .cff-search-doc-field {
218
- position: relative;
219
- background: #F3F4F5;
220
- border: 1px solid #DCDDE1;
221
- min-width: 283px;
222
- box-sizing: border-box;
223
- height: 38px;
224
- padding: 0px 14px 0px 15px;
225
- font-weight: 600;
226
- font-size: 14px;
227
- line-height: 22px;
228
- color: #141B38;
229
- text-decoration: none;
230
- margin-right: 1px;
231
- }
232
- .cff-section-header .cff-search-doc .cff-search-doc-field .sb-btn-input {
233
- height: 100%;
234
- border: none;
235
- outline: none;
236
- background-color: transparent;
237
- margin-left: 25px;
238
- color: #141B38;
239
- min-width: 200px;
240
- transform: translateY(-1px);
241
- }
242
- .cff-section-header .cff-search-doc .cff-search-doc-field .sb-btn-input::placeholder {
243
- color: #141B38;
244
- }
245
- .cff-section-header .cff-search-doc .cff-search-doc-field:focus,
246
- .cff-section-header .cff-search-doc .cff-search-doc-field .sb-btn-input:focus {
247
- outline: none;
248
- box-shadow: none;
249
- }
250
- .cff-section-header .cff-search-doc .cff-search-doc-field .sb-btn-icon {
251
- position: absolute;
252
- left: 15px;
253
- top: 11px;
254
- cursor: pointer;
255
- }
256
- .cff-section-header .cff-search-doc .cff-search-doc-field .sb-btn-link-icon{
257
- cursor: pointer;
258
- position: absolute;
259
- right: 2px;
260
- top: 0;
261
- width: 35px;
262
- text-align: center;
263
- height: 100%;
264
- padding-top: 9px;
265
- box-sizing: border-box;
266
- }
267
- .cff-section-header .cff-search-doc a .sb-btn-link-icon{
268
- margin-left: 56px;
269
- }
270
- /*** 3.2 - SUPPORT BLOCK ***/
271
- .cff-support-blocks {
272
- margin-top: 22px;
273
- display: flex;
274
- }
275
- .cff-support-blocks .cff-support-block {
276
- padding: 22px 18px;
277
- background: #FFFFFF;
278
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
279
- border-radius: 2px;
280
- width: calc(33% - 7px);
281
- box-sizing: border-box;
282
- position: relative;
283
- }
284
- .cff-support-blocks .cff-support-block:not(:last-child) {
285
- margin-right: 14px;
286
- }
287
- .cff-support-blocks .cff-support-block h3 {
288
- font-style: normal;
289
- font-weight: 600;
290
- font-size: 18px;
291
- line-height: 25px;
292
- color: #141B38;
293
- margin-top: 15px;
294
- margin-bottom: 0;
295
- }
296
- .cff-support-blocks .cff-support-block p {
297
- font-size: 12px;
298
- line-height: 18px;
299
- color: #64748B;
300
- margin-top: 5px;
301
- }
302
- .sb-block-header img {
303
- width: 56px;
304
- height: 56px;
305
- }
306
- .sb-articles-list {
307
- margin-top: 31px;
308
- margin-bottom: 79px;
309
- }
310
-
311
- .sb-articles-list ul li {
312
- position: relative;
313
- margin: 0px;
314
- padding-right: 10px;
315
- }
316
- .sb-articles-list ul li:not(:last-child) {
317
- border-bottom: 1px solid #E8E8EB;
318
- position: relative;
319
- }
320
- .sb-articles-list ul li a {
321
- font-size: 14px;
322
- line-height: 22px;
323
- color: #141B38;
324
- text-decoration: none;
325
- display: block;
326
- padding: 13px 0;
327
- }
328
- .sb-articles-list ul li:not(:last-child):after {
329
- content: '';
330
- position: absolute;
331
- left: 0px;
332
- bottom: -1px;
333
- background-color: #0068A0;
334
- height: 1px;
335
- width: 0;
336
- transition: all 0.25s ease-in-out;
337
- }
338
- .sb-articles-list ul li:not(:last-child):hover:after {
339
- width: 100%;
340
- }
341
- .sb-articles-list ul li a:hover {
342
- color: #0068A0;
343
- }
344
- .sb-articles-list ul li .sb-list-icon {
345
- position: absolute;
346
- right: 0;
347
- top: calc(50% - 9px);
348
- }
349
- .sb-articles-list ul li .sb-list-icon svg {
350
- width: 5px;
351
- }
352
- .sb-articles-list ul li .sb-list-icon svg path {
353
- fill: #8C8F9A;
354
- }
355
- .cff-support-blocks .cff-sb-button {
356
- margin-top: 50px;
357
- position: absolute;
358
- left: 0;
359
- bottom: 20px;
360
- width: calc(100% - 40px);
361
- padding: 0 20px;
362
- }
363
- .cff-support-blocks .cff-sb-button .sb-btn-icon {
364
- margin-left: 8px;
365
- }
366
- .cff-support-blocks .cff-sb-button .sb-btn-icon svg {
367
- width: 5px;
368
- transform: translateY(0px);
369
- margin-left: 3px;
370
- }
371
- .cff-support-blocks .cff-sb-button a {
372
- background: #F3F4F5;
373
- border: 1px solid #DCDDE1;
374
- box-sizing: border-box;
375
- border-radius: 2px;
376
- font-weight: 600;
377
- font-size: 12px;
378
- line-height: 19px;
379
- color: #141B38;
380
- display: block;
381
- text-align: center;
382
- text-decoration: none;
383
- padding: 6px;
384
- transition: all 0.15s ease-in-out;
385
- }
386
- .cff-support-blocks .cff-sb-button a:hover,
387
- .cff-section-header .cff-search-doc a:hover {
388
- background: #FFFFFF;
389
- border: 1px solid #D0D1D7;
390
- }
391
- .cff-support-blocks .cff-sb-button a:focus,
392
- .cff-support-blocks .cff-sb-button a:active,
393
- .cff-section-header .cff-search-doc a:focus,
394
- .cff-section-header .cff-search-doc a:active {
395
- background: #E8E8EB;
396
- border: 1px solid #D0D1D7;
397
- }
398
-
399
- /*** 3.3 - CONTACT SUPPORT BLOCK ***/
400
- .cff-support-contact-block {
401
- background: #FFFFFF;
402
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
403
- border-radius: 2px;
404
- padding: 20px 20px 23px;
405
- margin-top: 28px;
406
- box-sizing: border-box;
407
- margin-bottom: 12px;
408
- display: flex;
409
- }
410
- .cff-support-contact-block .sb-cb-content h3{
411
- font-size: 24px;
412
- line-height: 29px;
413
- color: #141B38;
414
- margin: 0;
415
- margin-bottom: 16px;
416
- }
417
- .cff-support-contact-block .sb-cb-icon {
418
- margin-right: 30px;
419
- }
420
- .cff-support-contact-block .sb-cb-icon span{
421
- background: #E8E8EB;
422
- border-radius: 60px;
423
- width: 68px;
424
- height: 68px;
425
- display: inline-block;
426
- text-align: center;
427
- padding-top: 22px;
428
- box-sizing: border-box;
429
- }
430
- .cff-support-contact-block .sb-cb-btn{
431
- background: #E34F0E;
432
- border-radius: 2px;
433
- color: #fff;
434
- text-decoration: none;
435
- display: inline-block;
436
- padding: 8px 12px;
437
- font-size: 14px;
438
- }
439
- .cff-support-contact-block .sb-cb-btn:hover {
440
- background: #F37036;
441
- border-color: #F37036;
442
- }
443
-
444
- .cff-support-contact-block .sb-cb-btn:focus,
445
- .cff-support-contact-block .sb-cb-btn:active {
446
- background: #B8400B;
447
- border-color: #B8400B;
448
- outline: none;
449
- box-shadow: none;
450
- }
451
- .cff-support-contact-block .sb-cb-btn span {
452
- margin-left: 11px;
453
- }
454
- .cff-support-contact-block .sb-cb-btn svg {
455
- width: 5px;
456
- }
457
- .cff-support-contact-block .sb-cb-btn path {
458
- fill: #fff;
459
- }
460
- .cff-support-contact-block .sb-contact-block-left{
461
- flex-basis: 625px;
462
- /* width: 625px; */
463
- /* float: left; */
464
- display: flex;
465
- padding-top: 10px;
466
- box-sizing: border-box;
467
- }
468
- .cff-support-contact-block .sb-contact-block-right {
469
- flex-basis: 220px;
470
- /* width: 220px;
471
- float: left; */
472
- padding-top: 10px;
473
- padding-left: 32px;
474
- box-sizing: border-box;
475
- border-left: 1px solid #DCDDE1;
476
- }
477
- .cff-support-contact-block .sb-contact-block-right p {
478
- font-size: 12px;
479
- line-height: 18px;
480
- color: #141B38;
481
- }
482
- .cff-support-contact-block .sb-contact-block-right img {
483
- max-width: 65px;
484
- }
485
-
486
- /*** 3.4 - SYSTEM INFO BLOCK ***/
487
- .cff-system-info-section {
488
- background: #FFFFFF;
489
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
490
- border-radius: 2px;
491
- }
492
- .cff-system-info-section .cff-system-header{
493
- display: flex;
494
- padding: 12px 20px 0;
495
- justify-content: space-between;
496
- }
497
- .cff-system-info-section .cff-system-header h3 {
498
- font-weight: 600;
499
- font-size: 18px;
500
- line-height: 25px;
501
- color: #141B38;
502
- margin-top: 9px;
503
- }
504
- .cff-system-info-section .cff-system-header .cff-copy-btn {
505
- background: #F3F4F5;
506
- border: 1px solid #DCDDE1;
507
- box-sizing: border-box;
508
- border-radius: 2px;
509
- font-size: 14px;
510
- font-weight: 600;
511
- line-height: 22px;
512
- color: #141B38;
513
- height: 38px;
514
- padding: 5px 20px 5px 12px;
515
- cursor: pointer;
516
- transition: all 0.15s ease-in-out;
517
- }
518
- .cff-system-info-section .cff-system-header .cff-copy-btn:hover {
519
- background: #FFFFFF;
520
- border: 1px solid #D0D1D7;
521
- }
522
- .cff-system-info-section .cff-system-header .cff-copy-btn:focus,
523
- .cff-system-info-section .cff-system-header .cff-copy-btn:active {
524
- background: #E8E8EB;
525
- border: 1px solid #D0D1D7;
526
- }
527
- .cff-system-info-section .cff-system-header .cff-copy-btn svg {
528
- height: 19px;
529
- width: 19px;
530
- transform: translate(0px, 4px);
531
- margin-right: 5px;
532
- }
533
- .cff-system-info-section .cff-system-info {
534
- padding: 0 20px 20px;
535
- border-bottom: 1px solid #E8E8EB;
536
- }
537
- .cff-system-info-section .cff-system-info .system_info:focus {
538
- outline: none;
539
- box-shadow: none;
540
- }
541
- .cff-system-info-section .cff-system-info .system_info a {
542
- color: #0068A0;
543
- }
544
- .cff-system-info-section .cff-system-info .system_info {
545
- box-sizing: border-box;
546
- background: #F9F9FA;
547
- border: 1px solid #E8E8EB;
548
- width: 100%;
549
- resize: none;
550
- border-radius: 0;
551
- padding: 20px 28px;
552
- font-size: 12px;
553
- line-height: 18px;
554
- color: #141B38;
555
- width: 100%;
556
- height: 123px;
557
- font-family: 'Fira Code', monospace;
558
- word-break: break-all;
559
- }
560
- .cff-system-info-section .cff-system-info .system_info.expanded {
561
- height: 600px;
562
- overflow-x: hidden;
563
- overflow-y: scroll;
564
- }
565
- .cff-system-info-section .cff-system-info .system_info.collapsed {
566
- overflow: hidden;
567
- }
568
- .cff-system-info-section .cff-system-info .cff-expand-btn {
569
- padding: 8px 12px 8px 8px;
570
- background: #FFFFFF;
571
- border: 1px solid #D0D1D7;
572
- border-radius: 2px;
573
- font-size: 12px;
574
- line-height: 19px;
575
- color: #141B38;
576
- width: 100%;
577
- margin-top: -5px;
578
- z-index: 9;
579
- position: relative;
580
- font-weight: 500;
581
- cursor: pointer;
582
- transition: all .15s ease-in-out;
583
- }
584
- .cff-system-info-section .cff-system-info .cff-expand-btn:hover {
585
- background: #F3F4F5;
586
- border: 1px solid #DCDDE1;
587
- }
588
- .cff-system-info-section .cff-system-info .cff-expand-btn span {
589
- margin-right: 10px;
590
- }
591
- .cff-system-info-section .cff-system-info .cff-expand-btn:focus,
592
- .cff-system-info-section .cff-system-info .cff-expand-btn:active{
593
- background: #E8E8EB!important;
594
- color: #141B38!important;
595
- border: 1px solid #D0D1D7!important;
596
- }
597
- .cff-export-settings-section {
598
- background: #FFFFFF;
599
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
600
- border-radius: 2px;
601
- padding: 20px;
602
- background: #FFFFFF;
603
- display: flex;
604
- justify-content: space-between;
605
- }
606
- .cff-export-settings-section .cff-export-right{
607
- display: flex;
608
- }
609
- .cff-export-settings-section .cff-export-left h3 {
610
- font-style: normal;
611
- font-weight: 600;
612
- font-size: 18px;
613
- line-height: 25px;
614
- color: #141B38;
615
- margin: 0 0 4px 0;
616
- }
617
- .cff-export-settings-section .cff-export-left p {
618
- font-size: 12px;
619
- line-height: 18px;
620
- color: #141B38;
621
- margin: 0;
622
- }
623
- .cff-export-settings-section .cff-select{
624
- min-width: 234px;
625
- border: 1px solid #D0D1D7;
626
- padding: 3px 15px;
627
- height: 38px;
628
- font-size: 14px;
629
- color: #141B38;
630
- -webkit-appearance: none;
631
- appearance: none;
632
- margin-right: 8px;
633
- background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABSSURBVHgBfc4hCkAhDAbgjV3slQcvvHuYDWY1G8zewyIWb6YuCCLqD4Pt5wtD54NBQA2XVKiWcorl/X7s+DkhJYUhPk54IN5plCue0Tb8M8/aNx/uIpRVqbbFAAAAAElFTkSuQmCC') no-repeat right 15px top 55%;
634
- }
635
- .cff-export-settings-section .cff-btn {
636
- height: 38px;
637
- font-size: 14px;
638
- padding: 7px 20px 7px 16px;
639
- display: flex;
640
- align-items: center;
641
- vertical-align: middle;
642
- background: #F3F4F5;
643
- border: 1px solid #DCDDE1;
644
- border-radius: 2px;
645
- font-weight: 500;
646
- transition: all .15s ease-in-out;
647
- cursor: pointer;
648
- }
649
- .cff-export-settings-section .cff-btn:disabled {
650
- cursor: not-allowed;
651
- color: #8C8F9A;
652
- background: #F3F4F5;
653
- }
654
- .cff-export-settings-section .cff-btn:disabled:hover {
655
- color: #8C8F9A;
656
- }
657
- .cff-export-settings-section .cff-btn span {
658
- margin-right: 11px;
659
- transform: translate(0px, 2px);
660
- }
661
- .cff-export-settings-section .cff-btn:disabled span path {
662
- fill: #8C8F9A;
663
- }
664
- .cff-support-contact-block {}
665
-
666
-
667
- /*** 4.0 Sticky Widget ***/
668
- .cff-stck-wdg{
669
- position: fixed;
670
- right: 21px;
671
- z-index: 9;
672
- bottom: 20px;
673
- }
674
- .cff-stck-wdg-btn{
675
- width: 52px;
676
- height: 52px;
677
- background: #fff;
678
- border-radius: 50%;
679
- cursor: pointer;
680
- display: flex;
681
- justify-content: center;
682
- align-items: center;
683
- filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
684
- }
685
- .cff-stck-wdg-btn svg{
686
- width: 25px;
687
- fill: #E34F0E;
688
- height: 33px;
689
- float: left;
690
- }
691
-
692
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
693
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
694
- display: block;
695
- }
696
- .cff-stck-wdg-btn-cls{
697
- width: inherit;
698
- height: inherit;
699
- position: relative;
700
- color: #364152;
701
- box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
702
- border-radius: 70px;
703
- }
704
- .cff-stck-wdg-btn-cls svg {
705
- width: 14px;
706
- height: 14px;
707
- position: absolute;
708
- top: 50%;
709
- right: 0;
710
- bottom: 0;
711
- left: 50%;
712
- margin-top: -7px;
713
- margin-left: -7px;
714
- }
715
-
716
- .cff-stck-pop{
717
- position: absolute;
718
- width: 292px;
719
- height: auto;
720
- background: #fff;
721
- border: 1px solid #E2E8F0;
722
- box-sizing: border-box;
723
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
724
- border-radius: 2px;
725
- padding: 20px;
726
- right: 0px;
727
- bottom: 66px;
728
- color: #141B38;
729
- padding-bottom: 82px;
730
- }
731
- .cff-stck-wdg[data-active="true"] .cff-stck-pop{
732
- bottom: 66px;
733
- opacity: 1;
734
- visibility: visible;
735
- }
736
-
737
- .cff-stck-pop svg{
738
- fill: currentColor;
739
- }
740
- .cff-stck-el-list{
741
- border: 1px solid #DCDDE1;
742
- border-radius: 2px;
743
- }
744
- .cff-stck-el{
745
- display: flex;
746
- align-items: center;
747
- padding: 12px 13px 11px;
748
- border-bottom: 1px solid #DCDDE1;
749
- transition: background .15s ease-in-out;
750
- font-size: 12px;
751
- }
752
- .cff-stck-el:hover{
753
- background: #F3F4F5;
754
- }
755
- .cff-stck-el:last-of-type{
756
- border-bottom: 0px;
757
- }
758
- .cff-stck-el-list .cff-chevron svg{
759
- width: 5px;
760
- height: 8px;
761
- }
762
- .cff-fs-a {
763
- width: 100%;
764
- height: 100%;
765
- display: block;
766
- position: absolute;
767
- left: 0;
768
- top: 0;
769
- z-index: 1;
770
- }
771
- .cff-stck-el .cff-stck-el-txt{
772
- color: #27303F;
773
- }
774
- .cff-stck-el.cff-stck-el-upgrd{
775
- padding: 9px 14px;
776
- font-size: 14px;
777
- background: var(--cl-orange);
778
- color: #fff;
779
- position: relative;
780
- transition: background .15s ease-in-out;
781
- font-weight: 600;
782
- }
783
- .cff-chevron {
784
- position: absolute;
785
- right: 14px
786
- }
787
- .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
788
- color: #fff;
789
- }
790
- .cff-stck-el.cff-stck-el-upgrd:after{
791
- top: 20px;
792
- opacity: 1;
793
- }
794
- .cff-stck-el-icon{
795
- margin-right: 10px;
796
- }
797
- .cff-stck-el-icon svg{
798
- width: 17px;
799
- float: left;
800
- }
801
- .cff-stck-title{
802
- margin-top: 20px;
803
- margin-bottom: 10px;
804
- color: #141B38;
805
- font-weight: 600;
806
- font-size: 14px;
807
- line-height: 160%;
808
- }
809
- .cff-stck-follow{
810
- background: #F3F4F5;
811
- margin-top: 20px;
812
- left: 0px;
813
- bottom: 0px;
814
- position: absolute;
815
- padding: 12px 20px;
816
- display: flex;
817
- align-items: center;
818
- }
819
- .cff-stck-follow span{
820
- font-weight: 600;
821
- font-size: 14px;
822
- }
823
- .cff-stck-flw-links{
824
- display: flex;
825
- justify-content: center;
826
- align-items: center;
827
- margin-left: auto;
828
- }
829
- .cff-stck-flw-links a{
830
- width: 36px;
831
- height: 28px;
832
- color: inherit;
833
- display: inline-flex;
834
- justify-content: center;
835
- align-items: center;
836
- margin-left: 4px;
837
- border-radius: 2px;
838
- transition: background .15s ease-in-out;
839
- }
840
- .cff-stck-flw-links svg{
841
- width: 17px;
842
- color: #141B38;
843
- }
844
- .cff-stck-flw-links a:hover{
845
- background: #fff;
846
- }
847
- .cff-stck-flw-links a:hover svg{
848
- color: inherit;
849
- }
850
-
851
- /*** SB NOTIFICATION ELEMENT ***/
852
- .sb-notification-ctn{
853
- position: fixed;
854
- bottom: -100px;
855
- left: 200px;
856
- z-index: 99999;
857
- background: #fff;
858
- display: flex;
859
- justify-content: center;
860
- align-items: center;
861
- border-left: 3px solid #fff;
862
- line-height: 1em;
863
- padding: 10px 20px;
864
- padding-left: 0px;
865
- border-radius: 4px;
866
- box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
867
-
868
- }
869
- .sb-notification-ctn[data-active="hidden"]{
870
- -webkit-animation: cff-notification-hide .5s forwards linear;
871
- animation: cff-notification-hide .5s forwards linear;
872
- }
873
- .sb-notification-ctn[data-active="shown"]{
874
- -webkit-animation: cff-notification-show .5s forwards linear;
875
- animation: cff-notification-show .5s forwards linear;
876
- }
877
- @-webkit-keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
878
- @keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
879
-
880
- @-webkit-keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
881
- @keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
882
-
883
- .sb-notification-ctn[data-type="success"]{
884
- border-color: #59AB46;
885
- }
886
- .sb-notification-ctn[data-type="error"]{
887
- border-color: #D72C2C;
888
- }
889
- .sb-notification-ctn[data-type="message"]{
890
- border-color: #141B38;
891
- }
892
- .sb-notification-icon{
893
- width: 25px;
894
- height: 25px;
895
- display: flex;
896
- justify-content: center;
897
- align-items: center;
898
- margin-left: 10px;
899
- margin-right: 15px;
900
- }
901
- .sb-notification-icon svg{
902
- width: 22px;
903
- height: 22px;
904
- float: left;
905
- fill: currentColor;
906
- }
907
-
908
- .sb-notification-ctn[data-type="success"] .sb-notification-icon{
909
- color: #59AB46;
910
- }
911
- .sb-notification-ctn[data-type="error"] .sb-notification-icon{
912
- color: #D72C2C;
913
- }
914
- .sb-notification-ctn[data-type="message"] .sb-notification-icon{
915
- color: #141B38;
916
- }
917
-
918
- .sb-notification-ctn span{
919
- font-size: 14px;
920
- color: #141B38;
921
- font-weight:500;
922
- }
923
-
924
- /*** 6.0 - RESPONSIVENESS ***/
925
- @media (max-width: 1024px) {
926
- .cff-support-contact-block {
927
- flex-direction: column;
928
- }
929
- .cff-support-contact-block .sb-contact-block-left,
930
- .cff-support-contact-block .sb-contact-block-right {
931
- flex-basis: auto;
932
- }
933
- .cff-support-contact-block .sb-contact-block-right {
934
- padding-top: 42px;
935
- padding-left: 0;
936
- border-left: 0px solid #DCDDE1;
937
- position: relative;
938
- }
939
-
940
- .cff-support-contact-block .sb-contact-block-right:before {
941
- top: 25px;
942
- left: 0;
943
- width: 65px;
944
- height: 1px;
945
- background: #DCDDE1;
946
- position: absolute;
947
- content: '';
948
- }
949
- }
950
- @media (max-width: 767px) {
951
- .cff-support-blocks {
952
- flex-direction: column;
953
- }
954
- .cff-support-blocks .cff-support-block {
955
- width: 100%;
956
- margin-bottom: 12px;
957
- }
958
- .auto-fold #wpcontent {
959
- padding-left: 0;
960
- }
961
- .cff-fb-full-wrapper {
962
- padding: 70px 20px 0 20px;
963
- }
964
- .cff-fb-hd-btn {
965
- padding: 0px 15px 0px 7px;
966
- }
967
- .cff-fb-header {
968
- padding: 0px 20px;
969
- }
970
- .cff-section-header,
971
- .cff-export-settings-section {
972
- flex-wrap: wrap;
973
- }
974
- .cff-section-header h2 {
975
- margin-bottom: 30px;
976
- }
977
- .cff-section-header .cff-search-doc {
978
- width: 100%;
979
- }
980
- .cff-export-settings-section .cff-export-left,
981
- .cff-export-settings-section .cff-export-right{
982
- width: 100%;
983
- }
984
- .cff-export-settings-section .cff-export-left {
985
- margin-bottom: 20px;
986
- }
987
- .cff-export-settings-section .cff-export-right {
988
- flex-wrap: wrap;
989
- }
990
- .cff-export-settings-section .cff-select {
991
- width: 100%;
992
- margin-bottom: 10px;
993
- }
994
- .sb-notification-ctn {
995
- left: 20px;
996
- }
997
- }
998
-
999
- @media (max-width: 580px) {
1000
- .cff-support-contact-block .sb-contact-block-left {
1001
- flex-wrap: wrap;
1002
- }
1003
- .cff-support-contact-block .sb-contact-block-left .sb-cb-content {
1004
- margin-top: 20px;
1005
- }
1006
- }
1007
-
1008
- @media (max-width: 480px) {
1009
- .cff-fb-hd-btn {
1010
- padding: 0px 10px 0px 7px !important;
1011
- }
1012
- .cff-fb-hd-btn[data-icon="left"] {
1013
- padding-right: 10px!important;
1014
- }
1015
  }
1
+ /*
2
+ * SUPPORT PAGE CSS TABLE OF CONTENTS
3
+ *
4
+ * 1.0 - GLOBAL
5
+ * 2.0 - HEADER
6
+ * 3.0 - 3.0 - SUPPORT CONTAINER
7
+ * 3.1 - SECTION HEADER
8
+ * 3.2 - SUPPORT BLOCK
9
+ * 3.3 - CONTACT SUPPORT BLOCK
10
+ * 4.0 - STICKY WIDGET
11
+ * 5.0 - SB NOTIFICATION ELEMENT
12
+ * 6.0 - RESPONSIVENESS
13
+ */
14
+
15
+ /*** 1.0 - GLOBAL ***/
16
+ .clearfix { display: inline-block; }
17
+ /* start commented backslash hack \*/
18
+ * html .clearfix { height: 1%; }
19
+ .clearfix { display: block; }
20
+ #cff-support {
21
+ -webkit-font-smoothing: antialiased;
22
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
23
+ }
24
+ #wpcontent {
25
+ padding-left: 0px;
26
+ }
27
+ #wpbody-content {
28
+ padding-bottom: 40px;
29
+ }
30
+ .clearfix:after {
31
+ visibility: hidden;
32
+ display: block;
33
+ font-size: 0;
34
+ content: " ";
35
+ clear: both;
36
+ height: 0;
37
+ }
38
+ /*orange*/
39
+ .sb-btn-orange{
40
+ background: #E34F0E!important;
41
+ color: #fff!important;
42
+ }
43
+ .sb-btn-orange:hover{
44
+ background: #F37036!important;
45
+ color: #fff!important;
46
+ }
47
+ .sb-btn-orange:focus,
48
+ .sb-btn-orange:active{
49
+ background: #B8400B!important;
50
+ color: #fff!important;
51
+ }
52
+ .cff-fb-cp-clpboard{
53
+ width: 0px;
54
+ height: 0px;
55
+ position: absolute;
56
+ left: -100000px;
57
+ }
58
+ .cff-fb-full-wrapper{
59
+ padding: 0 53px;
60
+ padding-top: 82px;
61
+ }
62
+ .cff-fb-fs {
63
+ width: 100%;
64
+ position: relative;
65
+ float: left;
66
+ box-sizing: border-box;
67
+ }
68
+
69
+
70
+ .sb-btn-grey:not(:disabled){
71
+ background: #F3F4F5!important;
72
+ color: #141B38!important;
73
+ border: 1px solid #D0D1D7!important;
74
+ }
75
+ .sb-btn-grey:not(:disabled):hover{
76
+ background: #fff!important;
77
+ color: #141B38!important;
78
+ border: 1px solid #DCDDE1!important;
79
+ }
80
+ .sb-btn-grey:not(:disabled):focus,
81
+ .sb-btn-grey:not(:disabled):active{
82
+ background: #E8E8EB!important;
83
+ color: #141B38!important;
84
+ border: 1px solid #D0D1D7!important;
85
+ }
86
+
87
+ /*** 2.0 - HEADER ***/
88
+ .cff-fb-create-ctn{
89
+ margin-top: 90px;
90
+ }
91
+ .cff-fb-header{
92
+ height: 64px;
93
+ position: absolute;
94
+ display: flex;
95
+ flex-direction: row;
96
+ justify-content: space-between;
97
+ align-items: center;
98
+ background: #fff;
99
+ padding: 0px 52px;
100
+ z-index: 2;
101
+ }
102
+ .cff-fb-header-left {
103
+ display: flex;
104
+ }
105
+ .cff-fb-header-left .sb-social-wall-link-wrap {
106
+ margin-left: 30px;
107
+ }
108
+ .sb-social-wall-link-wrap {
109
+ display: flex;
110
+ font-size: 14px;
111
+ margin: 10px 0 10px 30px;
112
+ }
113
+ .sb-social-wall-link:first-child {
114
+ padding-left: 0;
115
+ border-right: 1px solid #ccc;
116
+ color: #0068A0!important;
117
+ line-height: 1;
118
+ }
119
+ .sb-social-wall-link {
120
+ padding: 0 12px;
121
+ border-right: 1px solid #ccc;
122
+ color: #0068A0!important;
123
+ line-height: 1;
124
+ }
125
+ .sb-social-wall-link a {
126
+ text-decoration: none;
127
+ }
128
+ .sb-social-wall-link a:focus {
129
+ outline: none;
130
+ box-shadow: none;
131
+ }
132
+ .sb-social-wall-link:last-child {
133
+ border-right: none;
134
+ }
135
+ .cff-fb-hd-logo{
136
+ display: flex;
137
+ vertical-align: middle;
138
+ align-items: center;
139
+ gap: 5px;
140
+ }
141
+ .cff-fb-hd-logo .sb-logo-letters-wrap {
142
+ transform: translate(0px, -2px);
143
+ }
144
+ .cff-fb-hd-logo .breadcrumb-title{
145
+ font-size: 14px;
146
+ font-weight: 400;
147
+ line-height: 22px;
148
+ letter-spacing: 0em;
149
+ margin-left: 4px;
150
+ }
151
+ .cff-fb-hd-logo .separator{
152
+ margin: 0 5px 0 10px;
153
+ }
154
+ .cff-fb-hd-btn{
155
+ height: 38px;
156
+ cursor: pointer;
157
+ display: flex;
158
+ flex-direction: row;
159
+ justify-content: center;
160
+ align-items: center;
161
+ padding: 0px 15px 0px 13px;
162
+ font-weight: 600;
163
+ font-size: 14px;
164
+ color: #353A41;
165
+ background: #F3F4F5;
166
+ border-radius: 2px;
167
+ border: 1px solid #DCDDE1;
168
+ position: relative;
169
+ text-decoration: none;
170
+ transition: all 0.3s ease;
171
+ box-sizing: border-box;
172
+ }
173
+ .cff-fb-hd-btn svg {
174
+ margin-right: 10px;
175
+ width: 16px;
176
+ }
177
+ .cff-fb-hd-btn:focus {
178
+ outline: none;
179
+ box-shadow: none;
180
+ }
181
+ .cff-fb-hd-btn:hover {
182
+ color: inherit;
183
+ background-color: #fff;
184
+ }
185
+ .cff-fb-hd-btn i{
186
+ margin: 0px 5px;
187
+ }
188
+ .cff-fb-hd-btn[data-icon="left"]{
189
+ padding-right: 20px!important;
190
+ }
191
+ .cff-fb-full-wrapper .section-header h1 {
192
+ font-size: 32px;
193
+ line-height: 40px;
194
+ }
195
+ /*** 3.0 - SUPPORT CONTAINER ***/
196
+ .cff-sb-container {
197
+ max-width: 885px;
198
+ position: relative;
199
+ margin: auto;
200
+ margin-top: 33px;
201
+ box-sizing: border-box;
202
+ }
203
+
204
+ /*** 3.1 - SECTION HEADER ***/
205
+ .cff-section-header {
206
+ display: flex;
207
+ justify-content: space-between;
208
+ align-items: center;
209
+ }
210
+ .cff-section-header h2{
211
+ font-weight: 600;
212
+ font-size: 32px;
213
+ line-height: 40px;
214
+ color: #141B38;
215
+ margin: 0;
216
+ }
217
+ .cff-section-header .cff-search-doc .cff-search-doc-field {
218
+ position: relative;
219
+ background: #F3F4F5;
220
+ border: 1px solid #DCDDE1;
221
+ min-width: 283px;
222
+ box-sizing: border-box;
223
+ height: 38px;
224
+ padding: 0px 14px 0px 15px;
225
+ font-weight: 600;
226
+ font-size: 14px;
227
+ line-height: 22px;
228
+ color: #141B38;
229
+ text-decoration: none;
230
+ margin-right: 1px;
231
+ }
232
+ .cff-section-header .cff-search-doc .cff-search-doc-field .sb-btn-input {
233
+ height: 100%;
234
+ border: none;
235
+ outline: none;
236
+ background-color: transparent;
237
+ margin-left: 25px;
238
+ color: #141B38;
239
+ min-width: 200px;
240
+ transform: translateY(-1px);
241
+ }
242
+ .cff-section-header .cff-search-doc .cff-search-doc-field .sb-btn-input::placeholder {
243
+ color: #141B38;
244
+ }
245
+ .cff-section-header .cff-search-doc .cff-search-doc-field:focus,
246
+ .cff-section-header .cff-search-doc .cff-search-doc-field .sb-btn-input:focus {
247
+ outline: none;
248
+ box-shadow: none;
249
+ }
250
+ .cff-section-header .cff-search-doc .cff-search-doc-field .sb-btn-icon {
251
+ position: absolute;
252
+ left: 15px;
253
+ top: 11px;
254
+ cursor: pointer;
255
+ }
256
+ .cff-section-header .cff-search-doc .cff-search-doc-field .sb-btn-link-icon{
257
+ cursor: pointer;
258
+ position: absolute;
259
+ right: 2px;
260
+ top: 0;
261
+ width: 35px;
262
+ text-align: center;
263
+ height: 100%;
264
+ padding-top: 9px;
265
+ box-sizing: border-box;
266
+ }
267
+ .cff-section-header .cff-search-doc a .sb-btn-link-icon{
268
+ margin-left: 56px;
269
+ }
270
+ /*** 3.2 - SUPPORT BLOCK ***/
271
+ .cff-support-blocks {
272
+ margin-top: 22px;
273
+ display: flex;
274
+ }
275
+ .cff-support-blocks .cff-support-block {
276
+ padding: 22px 18px;
277
+ background: #FFFFFF;
278
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
279
+ border-radius: 2px;
280
+ width: calc(33% - 7px);
281
+ box-sizing: border-box;
282
+ position: relative;
283
+ }
284
+ .cff-support-blocks .cff-support-block:not(:last-child) {
285
+ margin-right: 14px;
286
+ }
287
+ .cff-support-blocks .cff-support-block h3 {
288
+ font-style: normal;
289
+ font-weight: 600;
290
+ font-size: 18px;
291
+ line-height: 25px;
292
+ color: #141B38;
293
+ margin-top: 15px;
294
+ margin-bottom: 0;
295
+ }
296
+ .cff-support-blocks .cff-support-block p {
297
+ font-size: 12px;
298
+ line-height: 18px;
299
+ color: #64748B;
300
+ margin-top: 5px;
301
+ }
302
+ .sb-block-header img {
303
+ width: 56px;
304
+ height: 56px;
305
+ }
306
+ .sb-articles-list {
307
+ margin-top: 31px;
308
+ margin-bottom: 79px;
309
+ }
310
+
311
+ .sb-articles-list ul li {
312
+ position: relative;
313
+ margin: 0px;
314
+ padding-right: 10px;
315
+ }
316
+ .sb-articles-list ul li:not(:last-child) {
317
+ border-bottom: 1px solid #E8E8EB;
318
+ position: relative;
319
+ }
320
+ .sb-articles-list ul li a {
321
+ font-size: 14px;
322
+ line-height: 22px;
323
+ color: #141B38;
324
+ text-decoration: none;
325
+ display: block;
326
+ padding: 13px 0;
327
+ }
328
+ .sb-articles-list ul li:not(:last-child):after {
329
+ content: '';
330
+ position: absolute;
331
+ left: 0px;
332
+ bottom: -1px;
333
+ background-color: #0068A0;
334
+ height: 1px;
335
+ width: 0;
336
+ transition: all 0.25s ease-in-out;
337
+ }
338
+ .sb-articles-list ul li:not(:last-child):hover:after {
339
+ width: 100%;
340
+ }
341
+ .sb-articles-list ul li a:hover {
342
+ color: #0068A0;
343
+ }
344
+ .sb-articles-list ul li .sb-list-icon {
345
+ position: absolute;
346
+ right: 0;
347
+ top: calc(50% - 9px);
348
+ }
349
+ .sb-articles-list ul li .sb-list-icon svg {
350
+ width: 5px;
351
+ }
352
+ .sb-articles-list ul li .sb-list-icon svg path {
353
+ fill: #8C8F9A;
354
+ }
355
+ .cff-support-blocks .cff-sb-button {
356
+ margin-top: 50px;
357
+ position: absolute;
358
+ left: 0;
359
+ bottom: 20px;
360
+ width: calc(100% - 40px);
361
+ padding: 0 20px;
362
+ }
363
+ .cff-support-blocks .cff-sb-button .sb-btn-icon {
364
+ margin-left: 8px;
365
+ }
366
+ .cff-support-blocks .cff-sb-button .sb-btn-icon svg {
367
+ width: 5px;
368
+ transform: translateY(0px);
369
+ margin-left: 3px;
370
+ }
371
+ .cff-support-blocks .cff-sb-button a {
372
+ background: #F3F4F5;
373
+ border: 1px solid #DCDDE1;
374
+ box-sizing: border-box;
375
+ border-radius: 2px;
376
+ font-weight: 600;
377
+ font-size: 12px;
378
+ line-height: 19px;
379
+ color: #141B38;
380
+ display: block;
381
+ text-align: center;
382
+ text-decoration: none;
383
+ padding: 6px;
384
+ transition: all 0.15s ease-in-out;
385
+ }
386
+ .cff-support-blocks .cff-sb-button a:hover,
387
+ .cff-section-header .cff-search-doc a:hover {
388
+ background: #FFFFFF;
389
+ border: 1px solid #D0D1D7;
390
+ }
391
+ .cff-support-blocks .cff-sb-button a:focus,
392
+ .cff-support-blocks .cff-sb-button a:active,
393
+ .cff-section-header .cff-search-doc a:focus,
394
+ .cff-section-header .cff-search-doc a:active {
395
+ background: #E8E8EB;
396
+ border: 1px solid #D0D1D7;
397
+ }
398
+
399
+ /*** 3.3 - CONTACT SUPPORT BLOCK ***/
400
+ .cff-support-contact-block {
401
+ background: #FFFFFF;
402
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
403
+ border-radius: 2px;
404
+ padding: 20px 20px 23px;
405
+ margin-top: 28px;
406
+ box-sizing: border-box;
407
+ margin-bottom: 12px;
408
+ display: flex;
409
+ }
410
+ .cff-support-contact-block .sb-cb-content h3{
411
+ font-size: 24px;
412
+ line-height: 29px;
413
+ color: #141B38;
414
+ margin: 0;
415
+ margin-bottom: 16px;
416
+ }
417
+ .cff-support-contact-block .sb-cb-icon {
418
+ margin-right: 30px;
419
+ }
420
+ .cff-support-contact-block .sb-cb-icon span{
421
+ background: #E8E8EB;
422
+ border-radius: 60px;
423
+ width: 68px;
424
+ height: 68px;
425
+ display: inline-block;
426
+ text-align: center;
427
+ padding-top: 22px;
428
+ box-sizing: border-box;
429
+ }
430
+ .cff-support-contact-block .sb-cb-btn{
431
+ background: #E34F0E;
432
+ border-radius: 2px;
433
+ color: #fff;
434
+ text-decoration: none;
435
+ display: inline-block;
436
+ padding: 8px 12px;
437
+ font-size: 14px;
438
+ }
439
+ .cff-support-contact-block .sb-cb-btn:hover {
440
+ background: #F37036;
441
+ border-color: #F37036;
442
+ }
443
+
444
+ .cff-support-contact-block .sb-cb-btn:focus,
445
+ .cff-support-contact-block .sb-cb-btn:active {
446
+ background: #B8400B;
447
+ border-color: #B8400B;
448
+ outline: none;
449
+ box-shadow: none;
450
+ }
451
+ .cff-support-contact-block .sb-cb-btn span {
452
+ margin-left: 11px;
453
+ }
454
+ .cff-support-contact-block .sb-cb-btn svg {
455
+ width: 5px;
456
+ }
457
+ .cff-support-contact-block .sb-cb-btn path {
458
+ fill: #fff;
459
+ }
460
+ .cff-support-contact-block .sb-contact-block-left{
461
+ flex-basis: 625px;
462
+ /* width: 625px; */
463
+ /* float: left; */
464
+ display: flex;
465
+ padding-top: 10px;
466
+ box-sizing: border-box;
467
+ }
468
+ .cff-support-contact-block .sb-contact-block-right {
469
+ flex-basis: 220px;
470
+ /* width: 220px;
471
+ float: left; */
472
+ padding-top: 10px;
473
+ padding-left: 32px;
474
+ box-sizing: border-box;
475
+ border-left: 1px solid #DCDDE1;
476
+ }
477
+ .cff-support-contact-block .sb-contact-block-right p {
478
+ font-size: 12px;
479
+ line-height: 18px;
480
+ color: #141B38;
481
+ }
482
+ .cff-support-contact-block .sb-contact-block-right img {
483
+ max-width: 65px;
484
+ }
485
+
486
+ /*** 3.4 - SYSTEM INFO BLOCK ***/
487
+ .cff-system-info-section {
488
+ background: #FFFFFF;
489
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
490
+ border-radius: 2px;
491
+ }
492
+ .cff-system-info-section .cff-system-header{
493
+ display: flex;
494
+ padding: 12px 20px 0;
495
+ justify-content: space-between;
496
+ }
497
+ .cff-system-info-section .cff-system-header h3 {
498
+ font-weight: 600;
499
+ font-size: 18px;
500
+ line-height: 25px;
501
+ color: #141B38;
502
+ margin-top: 9px;
503
+ }
504
+ .cff-system-info-section .cff-system-header .cff-copy-btn {
505
+ background: #F3F4F5;
506
+ border: 1px solid #DCDDE1;
507
+ box-sizing: border-box;
508
+ border-radius: 2px;
509
+ font-size: 14px;
510
+ font-weight: 600;
511
+ line-height: 22px;
512
+ color: #141B38;
513
+ height: 38px;
514
+ padding: 5px 20px 5px 12px;
515
+ cursor: pointer;
516
+ transition: all 0.15s ease-in-out;
517
+ }
518
+ .cff-system-info-section .cff-system-header .cff-copy-btn:hover {
519
+ background: #FFFFFF;
520
+ border: 1px solid #D0D1D7;
521
+ }
522
+ .cff-system-info-section .cff-system-header .cff-copy-btn:focus,
523
+ .cff-system-info-section .cff-system-header .cff-copy-btn:active {
524
+ background: #E8E8EB;
525
+ border: 1px solid #D0D1D7;
526
+ }
527
+ .cff-system-info-section .cff-system-header .cff-copy-btn svg {
528
+ height: 19px;
529
+ width: 19px;
530
+ transform: translate(0px, 4px);
531
+ margin-right: 5px;
532
+ }
533
+ .cff-system-info-section .cff-system-info {
534
+ padding: 0 20px 20px;
535
+ border-bottom: 1px solid #E8E8EB;
536
+ }
537
+ .cff-system-info-section .cff-system-info .system_info:focus {
538
+ outline: none;
539
+ box-shadow: none;
540
+ }
541
+ .cff-system-info-section .cff-system-info .system_info a {
542
+ color: #0068A0;
543
+ }
544
+ .cff-system-info-section .cff-system-info .system_info {
545
+ box-sizing: border-box;
546
+ background: #F9F9FA;
547
+ border: 1px solid #E8E8EB;
548
+ width: 100%;
549
+ resize: none;
550
+ border-radius: 0;
551
+ padding: 20px 28px;
552
+ font-size: 12px;
553
+ line-height: 18px;
554
+ color: #141B38;
555
+ width: 100%;
556
+ height: 123px;
557
+ font-family: 'Fira Code', monospace;
558
+ word-break: break-all;
559
+ }
560
+ .cff-system-info-section .cff-system-info .system_info.expanded {
561
+ height: 600px;
562
+ overflow-x: hidden;
563
+ overflow-y: scroll;
564
+ }
565
+ .cff-system-info-section .cff-system-info .system_info.collapsed {
566
+ overflow: hidden;
567
+ }
568
+ .cff-system-info-section .cff-system-info .cff-expand-btn {
569
+ padding: 8px 12px 8px 8px;
570
+ background: #FFFFFF;
571
+ border: 1px solid #D0D1D7;
572
+ border-radius: 2px;
573
+ font-size: 12px;
574
+ line-height: 19px;
575
+ color: #141B38;
576
+ width: 100%;
577
+ margin-top: -5px;
578
+ z-index: 9;
579
+ position: relative;
580
+ font-weight: 500;
581
+ cursor: pointer;
582
+ transition: all .15s ease-in-out;
583
+ }
584
+ .cff-system-info-section .cff-system-info .cff-expand-btn:hover {
585
+ background: #F3F4F5;
586
+ border: 1px solid #DCDDE1;
587
+ }
588
+ .cff-system-info-section .cff-system-info .cff-expand-btn span {
589
+ margin-right: 10px;
590
+ }
591
+ .cff-system-info-section .cff-system-info .cff-expand-btn:focus,
592
+ .cff-system-info-section .cff-system-info .cff-expand-btn:active{
593
+ background: #E8E8EB!important;
594
+ color: #141B38!important;
595
+ border: 1px solid #D0D1D7!important;
596
+ }
597
+ .cff-export-settings-section {
598
+ background: #FFFFFF;
599
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
600
+ border-radius: 2px;
601
+ padding: 20px;
602
+ background: #FFFFFF;
603
+ display: flex;
604
+ justify-content: space-between;
605
+ }
606
+ .cff-export-settings-section .cff-export-right{
607
+ display: flex;
608
+ }
609
+ .cff-export-settings-section .cff-export-left h3 {
610
+ font-style: normal;
611
+ font-weight: 600;
612
+ font-size: 18px;
613
+ line-height: 25px;
614
+ color: #141B38;
615
+ margin: 0 0 4px 0;
616
+ }
617
+ .cff-export-settings-section .cff-export-left p {
618
+ font-size: 12px;
619
+ line-height: 18px;
620
+ color: #141B38;
621
+ margin: 0;
622
+ }
623
+ .cff-export-settings-section .cff-select{
624
+ min-width: 234px;
625
+ border: 1px solid #D0D1D7;
626
+ padding: 3px 15px;
627
+ height: 38px;
628
+ font-size: 14px;
629
+ color: #141B38;
630
+ -webkit-appearance: none;
631
+ appearance: none;
632
+ margin-right: 8px;
633
+ background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABSSURBVHgBfc4hCkAhDAbgjV3slQcvvHuYDWY1G8zewyIWb6YuCCLqD4Pt5wtD54NBQA2XVKiWcorl/X7s+DkhJYUhPk54IN5plCue0Tb8M8/aNx/uIpRVqbbFAAAAAElFTkSuQmCC') no-repeat right 15px top 55%;
634
+ }
635
+ .cff-export-settings-section .cff-btn {
636
+ height: 38px;
637
+ font-size: 14px;
638
+ padding: 7px 20px 7px 16px;
639
+ display: flex;
640
+ align-items: center;
641
+ vertical-align: middle;
642
+ background: #F3F4F5;
643
+ border: 1px solid #DCDDE1;
644
+ border-radius: 2px;
645
+ font-weight: 500;
646
+ transition: all .15s ease-in-out;
647
+ cursor: pointer;
648
+ }
649
+ .cff-export-settings-section .cff-btn:disabled {
650
+ cursor: not-allowed;
651
+ color: #8C8F9A;
652
+ background: #F3F4F5;
653
+ }
654
+ .cff-export-settings-section .cff-btn:disabled:hover {
655
+ color: #8C8F9A;
656
+ }
657
+ .cff-export-settings-section .cff-btn span {
658
+ margin-right: 11px;
659
+ transform: translate(0px, 2px);
660
+ }
661
+ .cff-export-settings-section .cff-btn:disabled span path {
662
+ fill: #8C8F9A;
663
+ }
664
+ .cff-support-contact-block {}
665
+
666
+
667
+ /*** 4.0 Sticky Widget ***/
668
+ .cff-stck-wdg{
669
+ position: fixed;
670
+ right: 21px;
671
+ z-index: 9;
672
+ bottom: 20px;
673
+ }
674
+ .cff-stck-wdg-btn{
675
+ width: 52px;
676
+ height: 52px;
677
+ background: #fff;
678
+ border-radius: 50%;
679
+ cursor: pointer;
680
+ display: flex;
681
+ justify-content: center;
682
+ align-items: center;
683
+ filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
684
+ }
685
+ .cff-stck-wdg-btn svg{
686
+ width: 25px;
687
+ fill: #E34F0E;
688
+ height: 33px;
689
+ float: left;
690
+ }
691
+
692
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
693
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
694
+ display: block;
695
+ }
696
+ .cff-stck-wdg-btn-cls{
697
+ width: inherit;
698
+ height: inherit;
699
+ position: relative;
700
+ color: #364152;
701
+ box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
702
+ border-radius: 70px;
703
+ }
704
+ .cff-stck-wdg-btn-cls svg {
705
+ width: 14px;
706
+ height: 14px;
707
+ position: absolute;
708
+ top: 50%;
709
+ right: 0;
710
+ bottom: 0;
711
+ left: 50%;
712
+ margin-top: -7px;
713
+ margin-left: -7px;
714
+ }
715
+
716
+ .cff-stck-pop{
717
+ position: absolute;
718
+ width: 292px;
719
+ height: auto;
720
+ background: #fff;
721
+ border: 1px solid #E2E8F0;
722
+ box-sizing: border-box;
723
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
724
+ border-radius: 2px;
725
+ padding: 20px;
726
+ right: 0px;
727
+ bottom: 66px;
728
+ color: #141B38;
729
+ padding-bottom: 82px;
730
+ }
731
+ .cff-stck-wdg[data-active="true"] .cff-stck-pop{
732
+ bottom: 66px;
733
+ opacity: 1;
734
+ visibility: visible;
735
+ }
736
+
737
+ .cff-stck-pop svg{
738
+ fill: currentColor;
739
+ }
740
+ .cff-stck-el-list{
741
+ border: 1px solid #DCDDE1;
742
+ border-radius: 2px;
743
+ }
744
+ .cff-stck-el{
745
+ display: flex;
746
+ align-items: center;
747
+ padding: 12px 13px 11px;
748
+ border-bottom: 1px solid #DCDDE1;
749
+ transition: background .15s ease-in-out;
750
+ font-size: 12px;
751
+ }
752
+ .cff-stck-el:hover{
753
+ background: #F3F4F5;
754
+ }
755
+ .cff-stck-el:last-of-type{
756
+ border-bottom: 0px;
757
+ }
758
+ .cff-stck-el-list .cff-chevron svg{
759
+ width: 5px;
760
+ height: 8px;
761
+ }
762
+ .cff-fs-a {
763
+ width: 100%;
764
+ height: 100%;
765
+ display: block;
766
+ position: absolute;
767
+ left: 0;
768
+ top: 0;
769
+ z-index: 1;
770
+ }
771
+ .cff-stck-el .cff-stck-el-txt{
772
+ color: #27303F;
773
+ }
774
+ .cff-stck-el.cff-stck-el-upgrd{
775
+ padding: 9px 14px;
776
+ font-size: 14px;
777
+ background: var(--cl-orange);
778
+ color: #fff;
779
+ position: relative;
780
+ transition: background .15s ease-in-out;
781
+ font-weight: 600;
782
+ }
783
+ .cff-chevron {
784
+ position: absolute;
785
+ right: 14px
786
+ }
787
+ .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
788
+ color: #fff;
789
+ }
790
+ .cff-stck-el.cff-stck-el-upgrd:after{
791
+ top: 20px;
792
+ opacity: 1;
793
+ }
794
+ .cff-stck-el-icon{
795
+ margin-right: 10px;
796
+ }
797
+ .cff-stck-el-icon svg{
798
+ width: 17px;
799
+ float: left;
800
+ }
801
+ .cff-stck-title{
802
+ margin-top: 20px;
803
+ margin-bottom: 10px;
804
+ color: #141B38;
805
+ font-weight: 600;
806
+ font-size: 14px;
807
+ line-height: 160%;
808
+ }
809
+ .cff-stck-follow{
810
+ background: #F3F4F5;
811
+ margin-top: 20px;
812
+ left: 0px;
813
+ bottom: 0px;
814
+ position: absolute;
815
+ padding: 12px 20px;
816
+ display: flex;
817
+ align-items: center;
818
+ }
819
+ .cff-stck-follow span{
820
+ font-weight: 600;
821
+ font-size: 14px;
822
+ }
823
+ .cff-stck-flw-links{
824
+ display: flex;
825
+ justify-content: center;
826
+ align-items: center;
827
+ margin-left: auto;
828
+ }
829
+ .cff-stck-flw-links a{
830
+ width: 36px;
831
+ height: 28px;
832
+ color: inherit;
833
+ display: inline-flex;
834
+ justify-content: center;
835
+ align-items: center;
836
+ margin-left: 4px;
837
+ border-radius: 2px;
838
+ transition: background .15s ease-in-out;
839
+ }
840
+ .cff-stck-flw-links svg{
841
+ width: 17px;
842
+ color: #141B38;
843
+ }
844
+ .cff-stck-flw-links a:hover{
845
+ background: #fff;
846
+ }
847
+ .cff-stck-flw-links a:hover svg{
848
+ color: inherit;
849
+ }
850
+
851
+ /*** SB NOTIFICATION ELEMENT ***/
852
+ .sb-notification-ctn{
853
+ position: fixed;
854
+ bottom: -100px;
855
+ left: 200px;
856
+ z-index: 99999;
857
+ background: #fff;
858
+ display: flex;
859
+ justify-content: center;
860
+ align-items: center;
861
+ border-left: 3px solid #fff;
862
+ line-height: 1em;
863
+ padding: 10px 20px;
864
+ padding-left: 0px;
865
+ border-radius: 4px;
866
+ box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
867
+
868
+ }
869
+ .sb-notification-ctn[data-active="hidden"]{
870
+ -webkit-animation: cff-notification-hide .5s forwards linear;
871
+ animation: cff-notification-hide .5s forwards linear;
872
+ }
873
+ .sb-notification-ctn[data-active="shown"]{
874
+ -webkit-animation: cff-notification-show .5s forwards linear;
875
+ animation: cff-notification-show .5s forwards linear;
876
+ }
877
+ @-webkit-keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
878
+ @keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
879
+
880
+ @-webkit-keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
881
+ @keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
882
+
883
+ .sb-notification-ctn[data-type="success"]{
884
+ border-color: #59AB46;
885
+ }
886
+ .sb-notification-ctn[data-type="error"]{
887
+ border-color: #D72C2C;
888
+ }
889
+ .sb-notification-ctn[data-type="message"]{
890
+ border-color: #141B38;
891
+ }
892
+ .sb-notification-icon{
893
+ width: 25px;
894
+ height: 25px;
895
+ display: flex;
896
+ justify-content: center;
897
+ align-items: center;
898
+ margin-left: 10px;
899
+ margin-right: 15px;
900
+ }
901
+ .sb-notification-icon svg{
902
+ width: 22px;
903
+ height: 22px;
904
+ float: left;
905
+ fill: currentColor;
906
+ }
907
+
908
+ .sb-notification-ctn[data-type="success"] .sb-notification-icon{
909
+ color: #59AB46;
910
+ }
911
+ .sb-notification-ctn[data-type="error"] .sb-notification-icon{
912
+ color: #D72C2C;
913
+ }
914
+ .sb-notification-ctn[data-type="message"] .sb-notification-icon{
915
+ color: #141B38;
916
+ }
917
+
918
+ .sb-notification-ctn span{
919
+ font-size: 14px;
920
+ color: #141B38;
921
+ font-weight:500;
922
+ }
923
+
924
+ /*** 6.0 - RESPONSIVENESS ***/
925
+ @media (max-width: 1024px) {
926
+ .cff-support-contact-block {
927
+ flex-direction: column;
928
+ }
929
+ .cff-support-contact-block .sb-contact-block-left,
930
+ .cff-support-contact-block .sb-contact-block-right {
931
+ flex-basis: auto;
932
+ }
933
+ .cff-support-contact-block .sb-contact-block-right {
934
+ padding-top: 42px;
935
+ padding-left: 0;
936
+ border-left: 0px solid #DCDDE1;
937
+ position: relative;
938
+ }
939
+
940
+ .cff-support-contact-block .sb-contact-block-right:before {
941
+ top: 25px;
942
+ left: 0;
943
+ width: 65px;
944
+ height: 1px;
945
+ background: #DCDDE1;
946
+ position: absolute;
947
+ content: '';
948
+ }
949
+ }
950
+ @media (max-width: 767px) {
951
+ .cff-support-blocks {
952
+ flex-direction: column;
953
+ }
954
+ .cff-support-blocks .cff-support-block {
955
+ width: 100%;
956
+ margin-bottom: 12px;
957
+ }
958
+ .auto-fold #wpcontent {
959
+ padding-left: 0;
960
+ }
961
+ .cff-fb-full-wrapper {
962
+ padding: 70px 20px 0 20px;
963
+ }
964
+ .cff-fb-hd-btn {
965
+ padding: 0px 15px 0px 7px;
966
+ }
967
+ .cff-fb-header {
968
+ padding: 0px 20px;
969
+ }
970
+ .cff-section-header,
971
+ .cff-export-settings-section {
972
+ flex-wrap: wrap;
973
+ }
974
+ .cff-section-header h2 {
975
+ margin-bottom: 30px;
976
+ }
977
+ .cff-section-header .cff-search-doc {
978
+ width: 100%;
979
+ }
980
+ .cff-export-settings-section .cff-export-left,
981
+ .cff-export-settings-section .cff-export-right{
982
+ width: 100%;
983
+ }
984
+ .cff-export-settings-section .cff-export-left {
985
+ margin-bottom: 20px;
986
+ }
987
+ .cff-export-settings-section .cff-export-right {
988
+ flex-wrap: wrap;
989
+ }
990
+ .cff-export-settings-section .cff-select {
991
+ width: 100%;
992
+ margin-bottom: 10px;
993
+ }
994
+ .sb-notification-ctn {
995
+ left: 20px;
996
+ }
997
+ }
998
+
999
+ @media (max-width: 580px) {
1000
+ .cff-support-contact-block .sb-contact-block-left {
1001
+ flex-wrap: wrap;
1002
+ }
1003
+ .cff-support-contact-block .sb-contact-block-left .sb-cb-content {
1004
+ margin-top: 20px;
1005
+ }
1006
+ }
1007
+
1008
+ @media (max-width: 480px) {
1009
+ .cff-fb-hd-btn {
1010
+ padding: 0px 10px 0px 7px !important;
1011
+ }
1012
+ .cff-fb-hd-btn[data-icon="left"] {
1013
+ padding-right: 10px!important;
1014
+ }
1015
  }
admin/assets/img/about/icon-full.svg CHANGED
File without changes
admin/assets/img/about/icon-none.svg CHANGED
File without changes
admin/assets/img/about/icon-partial.svg CHANGED
File without changes
admin/assets/img/about/plugin-mi.png CHANGED
File without changes
admin/assets/img/about/plugin-om.png CHANGED
File without changes
admin/assets/img/about/plugin-rp.png CHANGED
File without changes
admin/assets/img/about/plugin-seo.png CHANGED
File without changes
admin/assets/img/about/plugin-smtp.png CHANGED
File without changes
admin/assets/img/about/plugin-wpforms.png CHANGED
File without changes
admin/assets/img/balloon-120.png CHANGED
File without changes
admin/assets/img/balloon.png CHANGED
File without changes
admin/assets/img/book-icon.png CHANGED
File without changes
admin/assets/img/cff-icon.png CHANGED
File without changes
admin/assets/img/cff-sprite.png CHANGED
File without changes
admin/assets/img/fb-icon.png CHANGED
File without changes
admin/assets/img/fb-icon.svg CHANGED
@@ -1,16 +1,16 @@
1
- <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g filter="url(#filter0_d)">
3
- <path d="M34.707 28.125L35.7461 21.2969H29.1406V16.8438C29.1406 14.9141 30.0312 13.1328 33 13.1328H36.043V7.26953C36.043 7.26953 33.2969 6.75 30.6992 6.75C25.2812 6.75 21.7188 10.0898 21.7188 16.0273V21.2969H15.6328V28.125H21.7188V44.75H29.1406V28.125H34.707Z" fill="#006BFA"/>
4
- </g>
5
- <defs>
6
- <filter id="filter0_d" x="-1.45518" y="-0.291035" width="54.9104" height="54.9104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
7
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
8
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
9
- <feOffset dy="1.16414"/>
10
- <feGaussianBlur stdDeviation="0.727588"/>
11
- <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.101961 0 0 0 0 0.466667 0 0 0 0.0337375 0"/>
12
- <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
13
- <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
14
- </filter>
15
- </defs>
16
- </svg>
1
+ <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g filter="url(#filter0_d)">
3
+ <path d="M34.707 28.125L35.7461 21.2969H29.1406V16.8438C29.1406 14.9141 30.0312 13.1328 33 13.1328H36.043V7.26953C36.043 7.26953 33.2969 6.75 30.6992 6.75C25.2812 6.75 21.7188 10.0898 21.7188 16.0273V21.2969H15.6328V28.125H21.7188V44.75H29.1406V28.125H34.707Z" fill="#006BFA"/>
4
+ </g>
5
+ <defs>
6
+ <filter id="filter0_d" x="-1.45518" y="-0.291035" width="54.9104" height="54.9104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
7
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
8
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
9
+ <feOffset dy="1.16414"/>
10
+ <feGaussianBlur stdDeviation="0.727588"/>
11
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.101961 0 0 0 0 0.466667 0 0 0 0.0337375 0"/>
12
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
13
+ <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
14
+ </filter>
15
+ </defs>
16
+ </svg>
admin/assets/img/feed-types.svg CHANGED
@@ -1,15 +1,15 @@
1
- <svg width="57" height="56" viewBox="0 0 57 56" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g clip-path="url(#clip0)">
3
- <rect width="28.1951" height="27" transform="translate(3.66602 12.4575) rotate(-5)" fill="#8C8F9A"/>
4
- <path fill-rule="evenodd" clip-rule="evenodd" d="M19.8393 31.2878L19.8394 31.2879L8.93592 32.2419L13.8658 25.7994L17.426 29.0705L22.0668 22.2481L29.9998 30.3989L19.8393 31.2878Z" fill="white"/>
5
- <circle cx="15.3063" cy="20.508" r="2.20279" transform="rotate(-5 15.3063 20.508)" fill="white"/>
6
- <rect x="25.0885" y="17.6761" width="30.1951" height="30" transform="rotate(6 25.0885 17.6761)" fill="#0096CC"/>
7
- <path d="M34.2422 27.1851L44.1874 28.2303L42.724 42.1537L38.1182 37.5085L32.7788 41.1084L34.2422 27.1851Z" fill="white"/>
8
- <rect x="25.0885" y="17.6761" width="30.1951" height="30" transform="rotate(6 25.0885 17.6761)" stroke="white" stroke-width="2"/>
9
- </g>
10
- <defs>
11
- <clipPath id="clip0">
12
- <rect width="56" height="56" fill="white" transform="translate(0.666016)"/>
13
- </clipPath>
14
- </defs>
15
- </svg>
1
+ <svg width="57" height="56" viewBox="0 0 57 56" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0)">
3
+ <rect width="28.1951" height="27" transform="translate(3.66602 12.4575) rotate(-5)" fill="#8C8F9A"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M19.8393 31.2878L19.8394 31.2879L8.93592 32.2419L13.8658 25.7994L17.426 29.0705L22.0668 22.2481L29.9998 30.3989L19.8393 31.2878Z" fill="white"/>
5
+ <circle cx="15.3063" cy="20.508" r="2.20279" transform="rotate(-5 15.3063 20.508)" fill="white"/>
6
+ <rect x="25.0885" y="17.6761" width="30.1951" height="30" transform="rotate(6 25.0885 17.6761)" fill="#0096CC"/>
7
+ <path d="M34.2422 27.1851L44.1874 28.2303L42.724 42.1537L38.1182 37.5085L32.7788 41.1084L34.2422 27.1851Z" fill="white"/>
8
+ <rect x="25.0885" y="17.6761" width="30.1951" height="30" transform="rotate(6 25.0885 17.6761)" stroke="white" stroke-width="2"/>
9
+ </g>
10
+ <defs>
11
+ <clipPath id="clip0">
12
+ <rect width="56" height="56" fill="white" transform="translate(0.666016)"/>
13
+ </clipPath>
14
+ </defs>
15
+ </svg>
admin/assets/img/group-app.png CHANGED
File without changes
admin/assets/img/insta-icon.svg CHANGED
@@ -1,23 +1,23 @@
1
- <svg width="53" height="52" viewBox="0 0 53 52" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g filter="url(#filter0_d)">
3
- <path d="M26.5402 16.7188C21.3973 16.7188 17.2991 20.8973 17.2991 25.9598C17.2991 31.1027 21.3973 35.2009 26.5402 35.2009C31.6027 35.2009 35.7813 31.1027 35.7813 25.9598C35.7813 20.8973 31.6027 16.7188 26.5402 16.7188ZM26.5402 31.9866C23.2455 31.9866 20.5134 29.3348 20.5134 25.9598C20.5134 22.6652 23.1652 20.0134 26.5402 20.0134C29.8348 20.0134 32.4866 22.6652 32.4866 25.9598C32.4866 29.3348 29.8348 31.9866 26.5402 31.9866ZM38.2723 16.3973C38.2723 15.192 37.308 14.2277 36.1027 14.2277C34.8973 14.2277 33.933 15.192 33.933 16.3973C33.933 17.6027 34.8973 18.567 36.1027 18.567C37.308 18.567 38.2723 17.6027 38.2723 16.3973ZM44.3795 18.567C44.2188 15.6741 43.5759 13.1027 41.4866 11.0134C39.3973 8.92411 36.8259 8.28125 33.933 8.12054C30.9598 7.95982 22.0402 7.95982 19.067 8.12054C16.1741 8.28125 13.683 8.92411 11.5134 11.0134C9.42411 13.1027 8.78125 15.6741 8.62054 18.567C8.45982 21.5402 8.45982 30.4598 8.62054 33.433C8.78125 36.3259 9.42411 38.817 11.5134 40.9866C13.683 43.0759 16.1741 43.7188 19.067 43.8795C22.0402 44.0402 30.9598 44.0402 33.933 43.8795C36.8259 43.7188 39.3973 43.0759 41.4866 40.9866C43.5759 38.817 44.2188 36.3259 44.3795 33.433C44.5402 30.4598 44.5402 21.5402 44.3795 18.567ZM40.5223 36.567C39.9598 38.1741 38.6741 39.3795 37.1473 40.0223C34.7366 40.9866 29.1116 40.7455 26.5402 40.7455C23.8884 40.7455 18.2634 40.9866 15.933 40.0223C14.3259 39.3795 13.1205 38.1741 12.4777 36.567C11.5134 34.2366 11.7545 28.6116 11.7545 25.9598C11.7545 23.3884 11.5134 17.7634 12.4777 15.3527C13.1205 13.8259 14.3259 12.6205 15.933 11.9777C18.2634 11.0134 23.8884 11.2545 26.5402 11.2545C29.1116 11.2545 34.7366 11.0134 37.1473 11.9777C38.6741 12.5402 39.8795 13.8259 40.5223 15.3527C41.4866 17.7634 41.2455 23.3884 41.2455 25.9598C41.2455 28.6116 41.4866 34.2366 40.5223 36.567Z" fill="url(#paint0_linear)"/>
4
- </g>
5
- <defs>
6
- <filter id="filter0_d" x="-0.955176" y="-0.291035" width="54.9104" height="54.9104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
7
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
8
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
9
- <feOffset dy="1.16414"/>
10
- <feGaussianBlur stdDeviation="0.727588"/>
11
- <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.101961 0 0 0 0 0.466667 0 0 0 0.0337375 0"/>
12
- <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
13
- <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
14
- </filter>
15
- <linearGradient id="paint0_linear" x1="21.325" y1="76.85" x2="97.15" y2="-0.550001" gradientUnits="userSpaceOnUse">
16
- <stop stop-color="white"/>
17
- <stop offset="0.147864" stop-color="#F6640E"/>
18
- <stop offset="0.443974" stop-color="#BA03A7"/>
19
- <stop offset="0.733337" stop-color="#6A01B9"/>
20
- <stop offset="1" stop-color="#6B01B9"/>
21
- </linearGradient>
22
- </defs>
23
- </svg>
1
+ <svg width="53" height="52" viewBox="0 0 53 52" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g filter="url(#filter0_d)">
3
+ <path d="M26.5402 16.7188C21.3973 16.7188 17.2991 20.8973 17.2991 25.9598C17.2991 31.1027 21.3973 35.2009 26.5402 35.2009C31.6027 35.2009 35.7813 31.1027 35.7813 25.9598C35.7813 20.8973 31.6027 16.7188 26.5402 16.7188ZM26.5402 31.9866C23.2455 31.9866 20.5134 29.3348 20.5134 25.9598C20.5134 22.6652 23.1652 20.0134 26.5402 20.0134C29.8348 20.0134 32.4866 22.6652 32.4866 25.9598C32.4866 29.3348 29.8348 31.9866 26.5402 31.9866ZM38.2723 16.3973C38.2723 15.192 37.308 14.2277 36.1027 14.2277C34.8973 14.2277 33.933 15.192 33.933 16.3973C33.933 17.6027 34.8973 18.567 36.1027 18.567C37.308 18.567 38.2723 17.6027 38.2723 16.3973ZM44.3795 18.567C44.2188 15.6741 43.5759 13.1027 41.4866 11.0134C39.3973 8.92411 36.8259 8.28125 33.933 8.12054C30.9598 7.95982 22.0402 7.95982 19.067 8.12054C16.1741 8.28125 13.683 8.92411 11.5134 11.0134C9.42411 13.1027 8.78125 15.6741 8.62054 18.567C8.45982 21.5402 8.45982 30.4598 8.62054 33.433C8.78125 36.3259 9.42411 38.817 11.5134 40.9866C13.683 43.0759 16.1741 43.7188 19.067 43.8795C22.0402 44.0402 30.9598 44.0402 33.933 43.8795C36.8259 43.7188 39.3973 43.0759 41.4866 40.9866C43.5759 38.817 44.2188 36.3259 44.3795 33.433C44.5402 30.4598 44.5402 21.5402 44.3795 18.567ZM40.5223 36.567C39.9598 38.1741 38.6741 39.3795 37.1473 40.0223C34.7366 40.9866 29.1116 40.7455 26.5402 40.7455C23.8884 40.7455 18.2634 40.9866 15.933 40.0223C14.3259 39.3795 13.1205 38.1741 12.4777 36.567C11.5134 34.2366 11.7545 28.6116 11.7545 25.9598C11.7545 23.3884 11.5134 17.7634 12.4777 15.3527C13.1205 13.8259 14.3259 12.6205 15.933 11.9777C18.2634 11.0134 23.8884 11.2545 26.5402 11.2545C29.1116 11.2545 34.7366 11.0134 37.1473 11.9777C38.6741 12.5402 39.8795 13.8259 40.5223 15.3527C41.4866 17.7634 41.2455 23.3884 41.2455 25.9598C41.2455 28.6116 41.4866 34.2366 40.5223 36.567Z" fill="url(#paint0_linear)"/>
4
+ </g>
5
+ <defs>
6
+ <filter id="filter0_d" x="-0.955176" y="-0.291035" width="54.9104" height="54.9104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
7
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
8
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
9
+ <feOffset dy="1.16414"/>
10
+ <feGaussianBlur stdDeviation="0.727588"/>
11
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.101961 0 0 0 0 0.466667 0 0 0 0.0337375 0"/>
12
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
13
+ <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
14
+ </filter>
15
+ <linearGradient id="paint0_linear" x1="21.325" y1="76.85" x2="97.15" y2="-0.550001" gradientUnits="userSpaceOnUse">
16
+ <stop stop-color="white"/>
17
+ <stop offset="0.147864" stop-color="#F6640E"/>
18
+ <stop offset="0.443974" stop-color="#BA03A7"/>
19
+ <stop offset="0.733337" stop-color="#6A01B9"/>
20
+ <stop offset="1" stop-color="#6B01B9"/>
21
+ </linearGradient>
22
+ </defs>
23
+ </svg>
admin/assets/img/instagram-color-icon.svg CHANGED
@@ -1,17 +1,17 @@
1
- <svg width="102" height="102" viewBox="0 0 102 102" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <rect x="0.5" y="0.5" width="101" height="101" rx="1.5" fill="white"/>
3
- <path d="M51 40.2188C45 40.2188 40.2188 45.0938 40.2188 51C40.2188 57 45 61.7812 51 61.7812C56.9062 61.7812 61.7812 57 61.7812 51C61.7812 45.0938 56.9062 40.2188 51 40.2188ZM51 58.0312C47.1562 58.0312 43.9688 54.9375 43.9688 51C43.9688 47.1562 47.0625 44.0625 51 44.0625C54.8438 44.0625 57.9375 47.1562 57.9375 51C57.9375 54.9375 54.8438 58.0312 51 58.0312ZM64.6875 39.8438C64.6875 38.4375 63.5625 37.3125 62.1562 37.3125C60.75 37.3125 59.625 38.4375 59.625 39.8438C59.625 41.25 60.75 42.375 62.1562 42.375C63.5625 42.375 64.6875 41.25 64.6875 39.8438ZM71.8125 42.375C71.625 39 70.875 36 68.4375 33.5625C66 31.125 63 30.375 59.625 30.1875C56.1562 30 45.75 30 42.2812 30.1875C38.9062 30.375 36 31.125 33.4688 33.5625C31.0312 36 30.2812 39 30.0938 42.375C29.9062 45.8438 29.9062 56.25 30.0938 59.7188C30.2812 63.0938 31.0312 66 33.4688 68.5312C36 70.9688 38.9062 71.7188 42.2812 71.9062C45.75 72.0938 56.1562 72.0938 59.625 71.9062C63 71.7188 66 70.9688 68.4375 68.5312C70.875 66 71.625 63.0938 71.8125 59.7188C72 56.25 72 45.8438 71.8125 42.375ZM67.3125 63.375C66.6562 65.25 65.1562 66.6562 63.375 67.4062C60.5625 68.5312 54 68.25 51 68.25C47.9062 68.25 41.3438 68.5312 38.625 67.4062C36.75 66.6562 35.3438 65.25 34.5938 63.375C33.4688 60.6562 33.75 54.0938 33.75 51C33.75 48 33.4688 41.4375 34.5938 38.625C35.3438 36.8438 36.75 35.4375 38.625 34.6875C41.3438 33.5625 47.9062 33.8438 51 33.8438C54 33.8438 60.5625 33.5625 63.375 34.6875C65.1562 35.3438 66.5625 36.8438 67.3125 38.625C68.4375 41.4375 68.1562 48 68.1562 51C68.1562 54.0938 68.4375 60.6562 67.3125 63.375Z" fill="url(#paint0_linear)"/>
4
- <rect x="0.5" y="0.5" width="101" height="101" rx="1.5" stroke="#CFD8E3"/>
5
- <rect x="57" y="56" width="24" height="24" rx="12" fill="#59AB46"/>
6
- <path d="M73.6666 68.6668H69.6666V72.6668H68.3333V68.6668H64.3333V67.3335H68.3333V63.3335H69.6666V67.3335H73.6666V68.6668Z" fill="white"/>
7
- <rect x="57" y="56" width="24" height="24" rx="12" stroke="white" stroke-width="2"/>
8
- <defs>
9
- <linearGradient id="paint0_linear" x1="44.9156" y1="110.372" x2="133.378" y2="20.0719" gradientUnits="userSpaceOnUse">
10
- <stop stop-color="white"/>
11
- <stop offset="0.147864" stop-color="#F6640E"/>
12
- <stop offset="0.443974" stop-color="#BA03A7"/>
13
- <stop offset="0.733337" stop-color="#6A01B9"/>
14
- <stop offset="1" stop-color="#6B01B9"/>
15
- </linearGradient>
16
- </defs>
17
- </svg>
1
+ <svg width="102" height="102" viewBox="0 0 102 102" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="0.5" y="0.5" width="101" height="101" rx="1.5" fill="white"/>
3
+ <path d="M51 40.2188C45 40.2188 40.2188 45.0938 40.2188 51C40.2188 57 45 61.7812 51 61.7812C56.9062 61.7812 61.7812 57 61.7812 51C61.7812 45.0938 56.9062 40.2188 51 40.2188ZM51 58.0312C47.1562 58.0312 43.9688 54.9375 43.9688 51C43.9688 47.1562 47.0625 44.0625 51 44.0625C54.8438 44.0625 57.9375 47.1562 57.9375 51C57.9375 54.9375 54.8438 58.0312 51 58.0312ZM64.6875 39.8438C64.6875 38.4375 63.5625 37.3125 62.1562 37.3125C60.75 37.3125 59.625 38.4375 59.625 39.8438C59.625 41.25 60.75 42.375 62.1562 42.375C63.5625 42.375 64.6875 41.25 64.6875 39.8438ZM71.8125 42.375C71.625 39 70.875 36 68.4375 33.5625C66 31.125 63 30.375 59.625 30.1875C56.1562 30 45.75 30 42.2812 30.1875C38.9062 30.375 36 31.125 33.4688 33.5625C31.0312 36 30.2812 39 30.0938 42.375C29.9062 45.8438 29.9062 56.25 30.0938 59.7188C30.2812 63.0938 31.0312 66 33.4688 68.5312C36 70.9688 38.9062 71.7188 42.2812 71.9062C45.75 72.0938 56.1562 72.0938 59.625 71.9062C63 71.7188 66 70.9688 68.4375 68.5312C70.875 66 71.625 63.0938 71.8125 59.7188C72 56.25 72 45.8438 71.8125 42.375ZM67.3125 63.375C66.6562 65.25 65.1562 66.6562 63.375 67.4062C60.5625 68.5312 54 68.25 51 68.25C47.9062 68.25 41.3438 68.5312 38.625 67.4062C36.75 66.6562 35.3438 65.25 34.5938 63.375C33.4688 60.6562 33.75 54.0938 33.75 51C33.75 48 33.4688 41.4375 34.5938 38.625C35.3438 36.8438 36.75 35.4375 38.625 34.6875C41.3438 33.5625 47.9062 33.8438 51 33.8438C54 33.8438 60.5625 33.5625 63.375 34.6875C65.1562 35.3438 66.5625 36.8438 67.3125 38.625C68.4375 41.4375 68.1562 48 68.1562 51C68.1562 54.0938 68.4375 60.6562 67.3125 63.375Z" fill="url(#paint0_linear)"/>
4
+ <rect x="0.5" y="0.5" width="101" height="101" rx="1.5" stroke="#CFD8E3"/>
5
+ <rect x="57" y="56" width="24" height="24" rx="12" fill="#59AB46"/>
6
+ <path d="M73.6666 68.6668H69.6666V72.6668H68.3333V68.6668H64.3333V67.3335H68.3333V63.3335H69.6666V67.3335H73.6666V68.6668Z" fill="white"/>
7
+ <rect x="57" y="56" width="24" height="24" rx="12" stroke="white" stroke-width="2"/>
8
+ <defs>
9
+ <linearGradient id="paint0_linear" x1="44.9156" y1="110.372" x2="133.378" y2="20.0719" gradientUnits="userSpaceOnUse">
10
+ <stop stop-color="white"/>
11
+ <stop offset="0.147864" stop-color="#F6640E"/>
12
+ <stop offset="0.443974" stop-color="#BA03A7"/>
13
+ <stop offset="0.733337" stop-color="#6A01B9"/>
14
+ <stop offset="1" stop-color="#6B01B9"/>
15
+ </linearGradient>
16
+ </defs>
17
+ </svg>
admin/assets/img/oembeds-image-1@2x.png CHANGED
File without changes
admin/assets/img/oembeds-image-2@2x.png CHANGED
File without changes
admin/assets/img/oembeds-image-3@2x.png CHANGED
File without changes
admin/assets/img/oembeds-image-4@2x.png CHANGED
File without changes
admin/assets/img/rocket-icon.png CHANGED
File without changes
admin/assets/img/save-plus-icon.png CHANGED
File without changes
admin/assets/img/social-wall-graphic.png CHANGED
File without changes
admin/assets/img/social-wall-graphic2.png CHANGED
File without changes
admin/assets/img/support-members.png CHANGED
File without changes
admin/assets/img/team-avatar.png CHANGED
File without changes
admin/assets/img/twitter-icon.svg CHANGED
@@ -1,16 +1,16 @@
1
- <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g filter="url(#filter0_d)">
3
- <path d="M41.0664 18.0312C42.5508 16.918 43.8867 15.582 44.9258 14.0234C43.5898 14.6172 42.0312 15.0625 40.4727 15.2109C42.1055 14.2461 43.293 12.7617 43.8867 10.9062C42.4023 11.7969 40.6953 12.4648 38.9883 12.8359C37.5039 11.2773 35.5 10.3867 33.2734 10.3867C28.9688 10.3867 25.4805 13.875 25.4805 18.1797C25.4805 18.7734 25.5547 19.3672 25.7031 19.9609C19.2461 19.5898 13.457 16.4727 9.59766 11.7969C8.92969 12.9102 8.55859 14.2461 8.55859 15.7305C8.55859 18.4023 9.89453 20.7773 12.0469 22.1875C10.7852 22.1133 9.52344 21.8164 8.48438 21.2227V21.2969C8.48438 25.082 11.1562 28.1992 14.7188 28.9414C14.125 29.0898 13.3828 29.2383 12.7148 29.2383C12.1953 29.2383 11.75 29.1641 11.2305 29.0898C12.1953 32.207 15.0898 34.4336 18.5039 34.5078C15.832 36.5859 12.4922 37.8477 8.85547 37.8477C8.1875 37.8477 7.59375 37.7734 7 37.6992C10.4141 39.9258 14.4961 41.1875 18.9492 41.1875C33.2734 41.1875 41.0664 29.3867 41.0664 19.0703C41.0664 18.6992 41.0664 18.4023 41.0664 18.0312Z" fill="#1B90EF"/>
4
- </g>
5
- <defs>
6
- <filter id="filter0_d" x="-1.45518" y="-0.291035" width="54.9104" height="54.9104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
7
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
8
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
9
- <feOffset dy="1.16414"/>
10
- <feGaussianBlur stdDeviation="0.727588"/>
11
- <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.101961 0 0 0 0 0.466667 0 0 0 0.0337375 0"/>
12
- <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
13
- <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
14
- </filter>
15
- </defs>
16
- </svg>
1
+ <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g filter="url(#filter0_d)">
3
+ <path d="M41.0664 18.0312C42.5508 16.918 43.8867 15.582 44.9258 14.0234C43.5898 14.6172 42.0312 15.0625 40.4727 15.2109C42.1055 14.2461 43.293 12.7617 43.8867 10.9062C42.4023 11.7969 40.6953 12.4648 38.9883 12.8359C37.5039 11.2773 35.5 10.3867 33.2734 10.3867C28.9688 10.3867 25.4805 13.875 25.4805 18.1797C25.4805 18.7734 25.5547 19.3672 25.7031 19.9609C19.2461 19.5898 13.457 16.4727 9.59766 11.7969C8.92969 12.9102 8.55859 14.2461 8.55859 15.7305C8.55859 18.4023 9.89453 20.7773 12.0469 22.1875C10.7852 22.1133 9.52344 21.8164 8.48438 21.2227V21.2969C8.48438 25.082 11.1562 28.1992 14.7188 28.9414C14.125 29.0898 13.3828 29.2383 12.7148 29.2383C12.1953 29.2383 11.75 29.1641 11.2305 29.0898C12.1953 32.207 15.0898 34.4336 18.5039 34.5078C15.832 36.5859 12.4922 37.8477 8.85547 37.8477C8.1875 37.8477 7.59375 37.7734 7 37.6992C10.4141 39.9258 14.4961 41.1875 18.9492 41.1875C33.2734 41.1875 41.0664 29.3867 41.0664 19.0703C41.0664 18.6992 41.0664 18.4023 41.0664 18.0312Z" fill="#1B90EF"/>
4
+ </g>
5
+ <defs>
6
+ <filter id="filter0_d" x="-1.45518" y="-0.291035" width="54.9104" height="54.9104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
7
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
8
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
9
+ <feOffset dy="1.16414"/>
10
+ <feGaussianBlur stdDeviation="0.727588"/>
11
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.101961 0 0 0 0 0.466667 0 0 0 0.0337375 0"/>
12
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
13
+ <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
14
+ </filter>
15
+ </defs>
16
+ </svg>
admin/assets/img/youtube-icon.svg CHANGED
@@ -1,16 +1,16 @@
1
- <svg width="53" height="52" viewBox="0 0 53 52" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g filter="url(#filter0_d)">
3
- <path d="M45.7461 16.0273C45.3008 14.2461 43.8906 12.8359 42.1836 12.3906C38.9922 11.5 26.375 11.5 26.375 11.5C26.375 11.5 13.6836 11.5 10.4922 12.3906C8.78516 12.8359 7.375 14.2461 6.92969 16.0273C6.03906 19.1445 6.03906 25.8242 6.03906 25.8242C6.03906 25.8242 6.03906 32.4297 6.92969 35.6211C7.375 37.4023 8.78516 38.7383 10.4922 39.1836C13.6836 40 26.375 40 26.375 40C26.375 40 38.9922 40 42.1836 39.1836C43.8906 38.7383 45.3008 37.4023 45.7461 35.6211C46.6367 32.4297 46.6367 25.8242 46.6367 25.8242C46.6367 25.8242 46.6367 19.1445 45.7461 16.0273ZM22.2188 31.8359V19.8125L32.7578 25.8242L22.2188 31.8359Z" fill="#EB2121"/>
4
- </g>
5
- <defs>
6
- <filter id="filter0_d" x="-0.955176" y="-0.291035" width="54.9104" height="54.9104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
7
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
8
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
9
- <feOffset dy="1.16414"/>
10
- <feGaussianBlur stdDeviation="0.727588"/>
11
- <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.101961 0 0 0 0 0.466667 0 0 0 0.0337375 0"/>
12
- <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
13
- <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
14
- </filter>
15
- </defs>
16
- </svg>
1
+ <svg width="53" height="52" viewBox="0 0 53 52" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g filter="url(#filter0_d)">
3
+ <path d="M45.7461 16.0273C45.3008 14.2461 43.8906 12.8359 42.1836 12.3906C38.9922 11.5 26.375 11.5 26.375 11.5C26.375 11.5 13.6836 11.5 10.4922 12.3906C8.78516 12.8359 7.375 14.2461 6.92969 16.0273C6.03906 19.1445 6.03906 25.8242 6.03906 25.8242C6.03906 25.8242 6.03906 32.4297 6.92969 35.6211C7.375 37.4023 8.78516 38.7383 10.4922 39.1836C13.6836 40 26.375 40 26.375 40C26.375 40 38.9922 40 42.1836 39.1836C43.8906 38.7383 45.3008 37.4023 45.7461 35.6211C46.6367 32.4297 46.6367 25.8242 46.6367 25.8242C46.6367 25.8242 46.6367 19.1445 45.7461 16.0273ZM22.2188 31.8359V19.8125L32.7578 25.8242L22.2188 31.8359Z" fill="#EB2121"/>
4
+ </g>
5
+ <defs>
6
+ <filter id="filter0_d" x="-0.955176" y="-0.291035" width="54.9104" height="54.9104" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
7
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
8
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
9
+ <feOffset dy="1.16414"/>
10
+ <feGaussianBlur stdDeviation="0.727588"/>
11
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.101961 0 0 0 0 0.466667 0 0 0 0.0337375 0"/>
12
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
13
+ <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
14
+ </filter>
15
+ </defs>
16
+ </svg>
admin/assets/js/about.js CHANGED
@@ -1,146 +1,146 @@
1
- var extensions_data = {
2
- genericText: cff_about.genericText,
3
- links: cff_about.links,
4
- extentions_bundle: cff_about.extentions_bundle,
5
- supportPageUrl: cff_about.supportPageUrl,
6
- plugins: cff_about.pluginsInfo,
7
- stickyWidget: false,
8
- socialWallActivated: cff_about.socialWallActivated,
9
- socialWallLinks: cff_about.socialWallLinks,
10
- recommendedPlugins: cff_about.recommendedPlugins,
11
- social_wall: cff_about.social_wall,
12
- aboutBox: cff_about.aboutBox,
13
- ajax_handler: cff_about.ajax_handler,
14
- nonce: cff_about.nonce,
15
- buttons: cff_about.buttons,
16
- icons: cff_about.icons,
17
- btnClicked: null,
18
- btnStatus: null,
19
- btnName: null,
20
- }
21
-
22
- var cffAbout = new Vue({
23
- el: "#cff-about",
24
- http: {
25
- emulateJSON: true,
26
- emulateHTTP: true
27
- },
28
- data: extensions_data,
29
- methods: {
30
- activatePlugin: function( plugin, name, index, type ) {
31
- this.btnClicked = index + 1;
32
- this.btnStatus = 'loading';
33
- this.btnName = name;
34
-
35
- let data = new FormData();
36
- data.append( 'action', 'cff_activate_addon' );
37
- data.append( 'nonce', this.nonce );
38
- data.append( 'plugin', plugin );
39
- data.append( 'type', 'plugin' );
40
- if ( this.extentions_bundle && type == 'extension' ) {
41
- data.append( 'extensions_bundle', this.extentions_bundle );
42
- }
43
- fetch(this.ajax_handler, {
44
- method: "POST",
45
- credentials: 'same-origin',
46
- body: data
47
- })
48
- .then(response => response.json())
49
- .then(data => {
50
- if( data.success == true ) {
51
- if ( name === 'social_wall' ) {
52
- this.social_wall.activated = true;
53
- } else if ( type === 'recommended_plugin' ) {
54
- this.recommendedPlugins[name].activated = true;
55
- } else {
56
- this.plugins[name].activated = true;
57
- }
58
- this.btnClicked = null;
59
- this.btnStatus = null;
60
- this.btnName = null;
61
- }
62
- });
63
- },
64
- deactivatePlugin: function( plugin, name, index, type ) {
65
- this.btnClicked = index + 1;
66
- this.btnStatus = 'loading';
67
- this.btnName = name;
68
-
69
- let data = new FormData();
70
- data.append( 'action', 'cff_deactivate_addon' );
71
- data.append( 'nonce', this.nonce );
72
- data.append( 'plugin', plugin );
73
- data.append( 'type', 'plugin' );
74
- if ( this.extentions_bundle && type == 'extension' ) {
75
- data.append( 'extensions_bundle', this.extentions_bundle );
76
- }
77
- fetch(this.ajax_handler, {
78
- method: "POST",
79
- credentials: 'same-origin',
80
- body: data
81
- })
82
- .then(response => response.json())
83
- .then(data => {
84
- if( data.success == true ) {
85
- if ( name === 'social_wall' ) {
86
- this.social_wall.activated = false;
87
- } else if ( type === 'recommended_plugin' ) {
88
- this.recommendedPlugins[name].activated = false;
89
- } else {
90
- this.plugins[name].activated = false;
91
- }
92
- this.btnClicked = null;
93
- this.btnName = null;
94
- this.btnStatus = null;
95
- }
96
- return;
97
- });
98
- },
99
- installPlugin: function( plugin, name, index, type ) {
100
- this.btnClicked = index + 1;
101
- this.btnStatus = 'loading';
102
- this.btnName = name;
103
-
104
- let data = new FormData();
105
- data.append( 'action', 'cff_install_addon' );
106
- data.append( 'nonce', this.nonce );
107
- data.append( 'plugin', plugin );
108
- data.append( 'type', 'plugin' );
109
- fetch(this.ajax_handler, {
110
- method: "POST",
111
- credentials: 'same-origin',
112
- body: data
113
- })
114
- .then(response => response.json())
115
- .then(data => {
116
- if( data.success == true ) {
117
- if ( type === 'recommended_plugin' ) {
118
- this.recommendedPlugins[name].installed = true;
119
- this.recommendedPlugins[name].activated = true;
120
- } else {
121
- this.plugins[name].installed = true;
122
- this.plugins[name].activated = true;
123
- }
124
- this.btnClicked = null;
125
- this.btnName = null;
126
- this.btnStatus = null;
127
- }
128
- return;
129
- });
130
- },
131
- buttonIcon: function() {
132
- if ( this.btnStatus == 'loading' ) {
133
- return this.icons.loaderSVG
134
- }
135
- },
136
-
137
- /**
138
- * Toggle Sticky Widget view
139
- *
140
- * @since 4.0
141
- */
142
- toggleStickyWidget: function() {
143
- this.stickyWidget = !this.stickyWidget;
144
- },
145
- }
146
  })
1
+ var extensions_data = {
2
+ genericText: cff_about.genericText,
3
+ links: cff_about.links,
4
+ extentions_bundle: cff_about.extentions_bundle,
5
+ supportPageUrl: cff_about.supportPageUrl,
6
+ plugins: cff_about.pluginsInfo,
7
+ stickyWidget: false,
8
+ socialWallActivated: cff_about.socialWallActivated,
9
+ socialWallLinks: cff_about.socialWallLinks,
10
+ recommendedPlugins: cff_about.recommendedPlugins,
11
+ social_wall: cff_about.social_wall,
12
+ aboutBox: cff_about.aboutBox,
13
+ ajax_handler: cff_about.ajax_handler,
14
+ nonce: cff_about.nonce,
15
+ buttons: cff_about.buttons,
16
+ icons: cff_about.icons,
17
+ btnClicked: null,
18
+ btnStatus: null,
19
+ btnName: null,
20
+ }
21
+
22
+ var cffAbout = new Vue({
23
+ el: "#cff-about",
24
+ http: {
25
+ emulateJSON: true,
26
+ emulateHTTP: true
27
+ },
28
+ data: extensions_data,
29
+ methods: {
30
+ activatePlugin: function( plugin, name, index, type ) {
31
+ this.btnClicked = index + 1;
32
+ this.btnStatus = 'loading';
33
+ this.btnName = name;
34
+
35
+ let data = new FormData();
36
+ data.append( 'action', 'cff_activate_addon' );
37
+ data.append( 'nonce', this.nonce );
38
+ data.append( 'plugin', plugin );
39
+ data.append( 'type', 'plugin' );
40
+ if ( this.extentions_bundle && type == 'extension' ) {
41
+ data.append( 'extensions_bundle', this.extentions_bundle );
42
+ }
43
+ fetch(this.ajax_handler, {
44
+ method: "POST",
45
+ credentials: 'same-origin',
46
+ body: data
47
+ })
48
+ .then(response => response.json())
49
+ .then(data => {
50
+ if( data.success == true ) {
51
+ if ( name === 'social_wall' ) {
52
+ this.social_wall.activated = true;
53
+ } else if ( type === 'recommended_plugin' ) {
54
+ this.recommendedPlugins[name].activated = true;
55
+ } else {
56
+ this.plugins[name].activated = true;
57
+ }
58
+ this.btnClicked = null;
59
+ this.btnStatus = null;
60
+ this.btnName = null;
61
+ }
62
+ });
63
+ },
64
+ deactivatePlugin: function( plugin, name, index, type ) {
65
+ this.btnClicked = index + 1;
66
+ this.btnStatus = 'loading';
67
+ this.btnName = name;
68
+
69
+ let data = new FormData();
70
+ data.append( 'action', 'cff_deactivate_addon' );
71
+ data.append( 'nonce', this.nonce );
72
+ data.append( 'plugin', plugin );
73
+ data.append( 'type', 'plugin' );
74
+ if ( this.extentions_bundle && type == 'extension' ) {
75
+ data.append( 'extensions_bundle', this.extentions_bundle );
76
+ }
77
+ fetch(this.ajax_handler, {
78
+ method: "POST",
79
+ credentials: 'same-origin',
80
+ body: data
81
+ })
82
+ .then(response => response.json())
83
+ .then(data => {
84
+ if( data.success == true ) {
85
+ if ( name === 'social_wall' ) {
86
+ this.social_wall.activated = false;
87
+ } else if ( type === 'recommended_plugin' ) {
88
+ this.recommendedPlugins[name].activated = false;
89
+ } else {
90
+ this.plugins[name].activated = false;
91
+ }
92
+ this.btnClicked = null;
93
+ this.btnName = null;
94
+ this.btnStatus = null;
95
+ }
96
+ return;
97
+ });
98
+ },
99
+ installPlugin: function( plugin, name, index, type ) {
100
+ this.btnClicked = index + 1;
101
+ this.btnStatus = 'loading';
102
+ this.btnName = name;
103
+
104
+ let data = new FormData();
105
+ data.append( 'action', 'cff_install_addon' );
106
+ data.append( 'nonce', this.nonce );
107
+ data.append( 'plugin', plugin );
108
+ data.append( 'type', 'plugin' );
109
+ fetch(this.ajax_handler, {
110
+ method: "POST",
111
+ credentials: 'same-origin',
112
+ body: data
113
+ })
114
+ .then(response => response.json())
115
+ .then(data => {
116
+ if( data.success == true ) {
117
+ if ( type === 'recommended_plugin' ) {
118
+ this.recommendedPlugins[name].installed = true;
119
+ this.recommendedPlugins[name].activated = true;
120
+ } else {
121
+ this.plugins[name].installed = true;
122
+ this.plugins[name].activated = true;
123
+ }
124
+ this.btnClicked = null;
125
+ this.btnName = null;
126
+ this.btnStatus = null;
127
+ }
128
+ return;
129
+ });
130
+ },
131
+ buttonIcon: function() {
132
+ if ( this.btnStatus == 'loading' ) {
133
+ return this.icons.loaderSVG
134
+ }
135
+ },
136
+
137
+ /**
138
+ * Toggle Sticky Widget view
139
+ *
140
+ * @since 4.0
141
+ */
142
+ toggleStickyWidget: function() {
143
+ this.stickyWidget = !this.stickyWidget;
144
+ },
145
+ }
146
  })
admin/assets/js/admin-notifications.js CHANGED
@@ -1,208 +1,210 @@
1
- /**
2
- * CFF Admin Notifications.
3
- *
4
- * @since 2.18
5
- */
6
-
7
- 'use strict';
8
-
9
- var CFFAdminNotifications = window.CFFAdminNotifications || ( function( document, window, $ ) {
10
-
11
- /**
12
- * Elements holder.
13
- *
14
- * @since 2.18
15
- *
16
- * @type {object}
17
- */
18
- var el = {
19
-
20
- $notifications: $( '#cff-notifications' ),
21
- $nextButton: $( '#cff-notifications .navigation .next' ),
22
- $prevButton: $( '#cff-notifications .navigation .prev' ),
23
- $adminBarCounter: $( '#wp-admin-bar-wpforms-menu .cff-menu-notification-counter' ),
24
- $adminBarMenuItem: $( '#wp-admin-bar-cff-notifications' ),
25
-
26
- };
27
-
28
- /**
29
- * Public functions and properties.
30
- *
31
- * @since 2.18
32
- *
33
- * @type {object}
34
- */
35
- var app = {
36
-
37
- /**
38
- * Start the engine.
39
- *
40
- * @since 2.18
41
- */
42
- init: function() {
43
- el.$notifications.find( '.messages a').each(function() {
44
- if ($(this).attr('href').indexOf('dismiss=') > -1 ) {
45
- $(this).addClass('button-dismiss');
46
- }
47
- })
48
-
49
- $( app.ready );
50
- },
51
-
52
- /**
53
- * Document ready.
54
- *
55
- * @since 2.18
56
- */
57
- ready: function() {
58
-
59
- app.updateNavigation();
60
- app.events();
61
- },
62
-
63
- /**
64
- * Register JS events.
65
- *
66
- * @since 2.18
67
- */
68
- events: function() {
69
-
70
- el.$notifications
71
- .on( 'click', '.dismiss', app.dismiss )
72
- .on( 'click', '.button-dismiss', app.buttonDismiss )
73
- .on( 'click', '.next', app.navNext )
74
- .on( 'click', '.prev', app.navPrev );
75
- },
76
-
77
- /**
78
- * Click on a dismiss button.
79
- *
80
- * @since 2.18
81
- */
82
- buttonDismiss: function( event ) {
83
- event.preventDefault();
84
- app.dismiss();
85
- },
86
-
87
- /**
88
- * Click on the Dismiss notification button.
89
- *
90
- * @since 2.18
91
- *
92
- * @param {object} event Event object.
93
- */
94
- dismiss: function( event ) {
95
-
96
- if ( el.$currentMessage.length === 0 ) {
97
- return;
98
- }
99
-
100
- // Update counter.
101
- var count = parseInt( el.$adminBarCounter.text(), 10 );
102
- if ( count > 1 ) {
103
- --count;
104
- el.$adminBarCounter.html( '<span>' + count + '</span>' );
105
- } else {
106
- el.$adminBarCounter.remove();
107
- el.$adminBarMenuItem.remove();
108
- }
109
-
110
- // Remove notification.
111
- var $nextMessage = el.$nextMessage.length < 1 ? el.$prevMessage : el.$nextMessage,
112
- messageId = el.$currentMessage.data( 'message-id' );
113
-
114
- if ( $nextMessage.length === 0 ) {
115
- el.$notifications.remove();
116
- } else {
117
- el.$currentMessage.remove();
118
- $nextMessage.addClass( 'current' );
119
- app.updateNavigation();
120
- }
121
-
122
- // AJAX call - update option.
123
- var data = {
124
- action: 'cff_dashboard_notification_dismiss',
125
- nonce: cff_admin.nonce,
126
- id: messageId,
127
- };
128
-
129
- $.post( cff_admin.ajax_url, data, function( res ) {
130
-
131
- if ( ! res.success ) {
132
- //CFFAdmin.debug( res );
133
- }
134
- } ).fail( function( xhr, textStatus, e ) {
135
-
136
- //CFFAdmin.debug( xhr.responseText );
137
- } );
138
- },
139
-
140
- /**
141
- * Click on the Next notification button.
142
- *
143
- * @since 2.18
144
- *
145
- * @param {object} event Event object.
146
- */
147
- navNext: function( event ) {
148
-
149
- if ( el.$nextButton.hasClass( 'disabled' ) ) {
150
- return;
151
- }
152
-
153
- el.$currentMessage.removeClass( 'current' );
154
- el.$nextMessage.addClass( 'current' );
155
-
156
- app.updateNavigation();
157
- },
158
-
159
- /**
160
- * Click on the Previous notification button.
161
- *
162
- * @since 2.18
163
- *
164
- * @param {object} event Event object.
165
- */
166
- navPrev: function( event ) {
167
-
168
- if ( el.$prevButton.hasClass( 'disabled' ) ) {
169
- return;
170
- }
171
-
172
- el.$currentMessage.removeClass( 'current' );
173
- el.$prevMessage.addClass( 'current' );
174
-
175
- app.updateNavigation();
176
- },
177
-
178
- /**
179
- * Update navigation buttons.
180
- *
181
- * @since 2.18
182
- */
183
- updateNavigation: function() {
184
-
185
- el.$currentMessage = el.$notifications.find( '.message.current' );
186
- el.$nextMessage = el.$currentMessage.next( '.message' );
187
- el.$prevMessage = el.$currentMessage.prev( '.message' );
188
-
189
- if ( el.$nextMessage.length === 0 ) {
190
- el.$nextButton.addClass( 'disabled' );
191
- } else {
192
- el.$nextButton.removeClass( 'disabled' );
193
- }
194
-
195
- if ( el.$prevMessage.length === 0 ) {
196
- el.$prevButton.addClass( 'disabled' );
197
- } else {
198
- el.$prevButton.removeClass( 'disabled' );
199
- }
200
- },
201
- };
202
-
203
- return app;
204
-
205
- }( document, window, jQuery ) );
206
-
207
- // Initialize.
208
- CFFAdminNotifications.init();
 
 
1
+ /**
2
+ * CFF Admin Notifications.
3
+ *
4
+ * @since 2.18
5
+ */
6
+
7
+ 'use strict';
8
+
9
+ var CFFAdminNotifications = window.CFFAdminNotifications || ( function( document, window, $ ) {
10
+
11
+ /**
12
+ * Elements holder.
13
+ *
14
+ * @since 2.18
15
+ *
16
+ * @type {object}
17
+ */
18
+ var el = {
19
+
20
+ $notifications: $( '#cff-notifications' ),
21
+ $nextButton: $( '#cff-notifications .navigation .next' ),
22
+ $prevButton: $( '#cff-notifications .navigation .prev' ),
23
+ $adminBarCounter: $( '#wp-admin-bar-wpforms-menu .cff-menu-notification-counter' ),
24
+ $adminBarMenuItem: $( '#wp-admin-bar-cff-notifications' ),
25
+
26
+ };
27
+
28
+ /**
29
+ * Public functions and properties.
30
+ *
31
+ * @since 2.18
32
+ *
33
+ * @type {object}
34
+ */
35
+ var app = {
36
+
37
+ /**
38
+ * Start the engine.
39
+ *
40
+ * @since 2.18
41
+ */
42
+ init: function() {
43
+ el.$notifications.find( '.messages a').each(function() {
44
+ if ($(this).attr('href').indexOf('dismiss=') > -1 ) {
45
+ $(this).addClass('button-dismiss');
46
+ }
47
+ })
48
+
49
+ $( app.ready );
50
+ },
51
+
52
+ /**
53
+ * Document ready.
54
+ *
55
+ * @since 2.18
56
+ */
57
+ ready: function() {
58
+
59
+ app.updateNavigation();
60
+ app.events();
61
+ },
62
+
63
+ /**
64
+ * Register JS events.
65
+ *
66
+ * @since 2.18
67
+ */
68
+ events: function() {
69
+
70
+ el.$notifications
71
+ .on( 'click', '.dismiss', app.dismiss )
72
+ .on( 'click', '.button-dismiss', app.buttonDismiss )
73
+ .on( 'click', '.next', app.navNext )
74
+ .on( 'click', '.prev', app.navPrev );
75
+ },
76
+
77
+ /**
78
+ * Click on a dismiss button.
79
+ *
80
+ * @since 2.18
81
+ */
82
+ buttonDismiss: function( event ) {
83
+ event.preventDefault();
84
+ app.dismiss();
85
+ },
86
+
87
+ /**
88
+ * Click on the Dismiss notification button.
89
+ *
90
+ * @since 2.18
91
+ *
92
+ * @param {object} event Event object.
93
+ */
94
+ dismiss: function( event ) {
95
+
96
+ if ( el.$currentMessage.length === 0 ) {
97
+ return;
98
+ }
99
+
100
+ // Update counter.
101
+ var count = parseInt( el.$adminBarCounter.text(), 10 );
102
+ if ( count > 1 ) {
103
+ --count;
104
+ el.$adminBarCounter.html( '<span>' + count + '</span>' );
105
+ } else {
106
+ el.$adminBarCounter.remove();
107
+ el.$adminBarMenuItem.remove();
108
+ }
109
+
110
+ // Remove notification.
111
+ var $nextMessage = el.$nextMessage.length < 1 ? el.$prevMessage : el.$nextMessage,
112
+ messageId = el.$currentMessage.data( 'message-id' );
113
+
114
+ if ( $nextMessage.length === 0 ) {
115
+ el.$notifications.remove();
116
+ } else {
117
+ el.$currentMessage.remove();
118
+ $nextMessage.addClass( 'current' );
119
+ app.updateNavigation();
120
+ }
121
+
122
+ // AJAX call - update option.
123
+ var data = {
124
+ action: 'cff_dashboard_notification_dismiss',
125
+ nonce: cff_admin.nonce,
126
+ id: messageId,
127
+ };
128
+
129
+ $.post( cff_admin.ajax_url, data, function( res ) {
130
+ if ($('.cff-fb-btn-new').length) {
131
+ window.location.reload();
132
+ }
133
+ if ( ! res.success ) {
134
+ //CFFAdmin.debug( res );
135
+ }
136
+ } ).fail( function( xhr, textStatus, e ) {
137
+
138
+ //CFFAdmin.debug( xhr.responseText );
139
+ } );
140
+ },
141
+
142
+ /**
143
+ * Click on the Next notification button.
144
+ *
145
+ * @since 2.18
146
+ *
147
+ * @param {object} event Event object.
148
+ */
149
+ navNext: function( event ) {
150
+
151
+ if ( el.$nextButton.hasClass( 'disabled' ) ) {
152
+ return;
153
+ }
154
+
155
+ el.$currentMessage.removeClass( 'current' );
156
+ el.$nextMessage.addClass( 'current' );
157
+
158
+ app.updateNavigation();
159
+ },
160
+
161
+ /**
162
+ * Click on the Previous notification button.
163
+ *
164
+ * @since 2.18
165
+ *
166
+ * @param {object} event Event object.
167
+ */
168
+ navPrev: function( event ) {
169
+
170
+ if ( el.$prevButton.hasClass( 'disabled' ) ) {
171
+ return;
172
+ }
173
+
174
+ el.$currentMessage.removeClass( 'current' );
175
+ el.$prevMessage.addClass( 'current' );
176
+
177
+ app.updateNavigation();
178
+ },
179
+
180
+ /**
181
+ * Update navigation buttons.
182
+ *
183
+ * @since 2.18
184
+ */
185
+ updateNavigation: function() {
186
+
187
+ el.$currentMessage = el.$notifications.find( '.message.current' );
188
+ el.$nextMessage = el.$currentMessage.next( '.message' );
189
+ el.$prevMessage = el.$currentMessage.prev( '.message' );
190
+
191
+ if ( el.$nextMessage.length === 0 ) {
192
+ el.$nextButton.addClass( 'disabled' );
193
+ } else {
194
+ el.$nextButton.removeClass( 'disabled' );
195
+ }
196
+
197
+ if ( el.$prevMessage.length === 0 ) {
198
+ el.$prevButton.addClass( 'disabled' );
199
+ } else {
200
+ el.$prevButton.removeClass( 'disabled' );
201
+ }
202
+ },
203
+ };
204
+
205
+ return app;
206
+
207
+ }( document, window, jQuery ) );
208
+
209
+ // Initialize.
210
+ CFFAdminNotifications.init();
admin/assets/js/cff-admin-scripts.js CHANGED
File without changes
admin/assets/js/extensions.js CHANGED
@@ -1,139 +1,139 @@
1
- var extensions_data = {
2
- genericText: cff_extensions.genericText,
3
- extentions_bundle: cff_extensions.extentions_bundle,
4
- links: cff_extensions.links,
5
- extensions: cff_extensions.extensions_info,
6
- socialWallActivated: cff_extensions.socialWallActivated,
7
- socialWallLinks: cff_extensions.socialWallLinks,
8
- plugins: cff_extensions.pluginsInfo,
9
- stickyWidget: false,
10
- supportPageUrl: cff_extensions.supportPageUrl,
11
- social_wall: cff_extensions.social_wall,
12
- ajax_handler: cff_extensions.ajax_handler,
13
- nonce: cff_extensions.nonce,
14
- buttons: cff_extensions.buttons,
15
- icons: cff_extensions.icons,
16
- btnClicked: null,
17
- btnStatus: null,
18
- btnName: null,
19
- }
20
-
21
- var cffExtensions = new Vue({
22
- el: "#cff-extensions",
23
- http: {
24
- emulateJSON: true,
25
- emulateHTTP: true
26
- },
27
- data: extensions_data,
28
- methods: {
29
- activatePlugin: function( plugin, name, index, type ) {
30
- this.btnClicked = index + 1;
31
- this.btnStatus = 'loading';
32
- this.btnName = name;
33
-
34
- let data = new FormData();
35
- data.append( 'action', 'cff_activate_addon' );
36
- data.append( 'nonce', this.nonce );
37
- data.append( 'plugin', plugin );
38
- data.append( 'type', 'plugin' );
39
- if ( this.extentions_bundle && type == 'extension' ) {
40
- data.append( 'extensions_bundle', this.extentions_bundle );
41
- }
42
- fetch(this.ajax_handler, {
43
- method: "POST",
44
- credentials: 'same-origin',
45
- body: data
46
- })
47
- .then(response => response.json())
48
- .then(data => {
49
- if( data.success == true ) {
50
- if ( name === 'social_wall' ) {
51
- this.social_wall.activated = true;
52
- } else if ( type === 'extension' ) {
53
- this.extensions[name].activated = true;
54
- } else {
55
- this.plugins[name].activated = true;
56
- }
57
- this.btnClicked = null;
58
- this.btnStatus = null;
59
- this.btnName = null;
60
- }
61
- });
62
- },
63
- deactivatePlugin: function( plugin, name, index, type ) {
64
- this.btnClicked = index + 1;
65
- this.btnStatus = 'loading';
66
- this.btnName = name;
67
-
68
- let data = new FormData();
69
- data.append( 'action', 'cff_deactivate_addon' );
70
- data.append( 'nonce', this.nonce );
71
- data.append( 'plugin', plugin );
72
- data.append( 'type', 'plugin' );
73
- if ( this.extentions_bundle && type == 'extension' ) {
74
- data.append( 'extensions_bundle', this.extentions_bundle );
75
- }
76
- fetch(this.ajax_handler, {
77
- method: "POST",
78
- credentials: 'same-origin',
79
- body: data
80
- })
81
- .then(response => response.json())
82
- .then(data => {
83
- if( data.success == true ) {
84
- if ( name === 'social_wall' ) {
85
- this.social_wall.activated = false;
86
- } else if ( type === 'extension' ) {
87
- this.extensions[name].activated = false;
88
- } else {
89
- this.plugins[name].activated = false;
90
- }
91
- this.btnClicked = null;
92
- this.btnName = null;
93
- this.btnStatus = null;
94
- }
95
- return;
96
- });
97
- },
98
- installPlugin: function( plugin, name, index ) {
99
- this.btnClicked = index + 1;
100
- this.btnStatus = 'loading';
101
- this.btnName = name;
102
-
103
- let data = new FormData();
104
- data.append( 'action', 'cff_install_addon' );
105
- data.append( 'nonce', this.nonce );
106
- data.append( 'plugin', plugin );
107
- data.append( 'type', 'plugin' );
108
- fetch(this.ajax_handler, {
109
- method: "POST",
110
- credentials: 'same-origin',
111
- body: data
112
- })
113
- .then(response => response.json())
114
- .then(data => {
115
- if( data.success == true ) {
116
- this.plugins[name].installed = true;
117
- this.plugins[name].open = true;
118
- this.btnClicked = null;
119
- this.btnName = null;
120
- this.btnStatus = null;
121
- }
122
- return;
123
- });
124
- },
125
- buttonIcon: function() {
126
- if ( this.btnStatus == 'loading' ) {
127
- return this.icons.loaderSVG
128
- }
129
- },
130
- /**
131
- * Toggle Sticky Widget view
132
- *
133
- * @since 4.0
134
- */
135
- toggleStickyWidget: function() {
136
- this.stickyWidget = !this.stickyWidget;
137
- },
138
- }
139
  })
1
+ var extensions_data = {
2
+ genericText: cff_extensions.genericText,
3
+ extentions_bundle: cff_extensions.extentions_bundle,
4
+ links: cff_extensions.links,
5
+ extensions: cff_extensions.extensions_info,
6
+ socialWallActivated: cff_extensions.socialWallActivated,
7
+ socialWallLinks: cff_extensions.socialWallLinks,
8
+ plugins: cff_extensions.pluginsInfo,
9
+ stickyWidget: false,
10
+ supportPageUrl: cff_extensions.supportPageUrl,
11
+ social_wall: cff_extensions.social_wall,
12
+ ajax_handler: cff_extensions.ajax_handler,
13
+ nonce: cff_extensions.nonce,
14
+ buttons: cff_extensions.buttons,
15
+ icons: cff_extensions.icons,
16
+ btnClicked: null,
17
+ btnStatus: null,
18
+ btnName: null,
19
+ }
20
+
21
+ var cffExtensions = new Vue({
22
+ el: "#cff-extensions",
23
+ http: {
24
+ emulateJSON: true,
25
+ emulateHTTP: true
26
+ },
27
+ data: extensions_data,
28
+ methods: {
29
+ activatePlugin: function( plugin, name, index, type ) {
30
+ this.btnClicked = index + 1;
31
+ this.btnStatus = 'loading';
32
+ this.btnName = name;
33
+
34
+ let data = new FormData();
35
+ data.append( 'action', 'cff_activate_addon' );
36
+ data.append( 'nonce', this.nonce );
37
+ data.append( 'plugin', plugin );
38
+ data.append( 'type', 'plugin' );
39
+ if ( this.extentions_bundle && type == 'extension' ) {
40
+ data.append( 'extensions_bundle', this.extentions_bundle );
41
+ }
42
+ fetch(this.ajax_handler, {
43
+ method: "POST",
44
+ credentials: 'same-origin',
45
+ body: data
46
+ })
47
+ .then(response => response.json())
48
+ .then(data => {
49
+ if( data.success == true ) {
50
+ if ( name === 'social_wall' ) {
51
+ this.social_wall.activated = true;
52
+ } else if ( type === 'extension' ) {
53
+ this.extensions[name].activated = true;
54
+ } else {
55
+ this.plugins[name].activated = true;
56
+ }
57
+ this.btnClicked = null;
58
+ this.btnStatus = null;
59
+ this.btnName = null;
60
+ }
61
+ });
62
+ },
63
+ deactivatePlugin: function( plugin, name, index, type ) {
64
+ this.btnClicked = index + 1;
65
+ this.btnStatus = 'loading';
66
+ this.btnName = name;
67
+
68
+ let data = new FormData();
69
+ data.append( 'action', 'cff_deactivate_addon' );
70
+ data.append( 'nonce', this.nonce );
71
+ data.append( 'plugin', plugin );
72
+ data.append( 'type', 'plugin' );
73
+ if ( this.extentions_bundle && type == 'extension' ) {
74
+ data.append( 'extensions_bundle', this.extentions_bundle );
75
+ }
76
+ fetch(this.ajax_handler, {
77
+ method: "POST",
78
+ credentials: 'same-origin',
79
+ body: data
80
+ })
81
+ .then(response => response.json())
82
+ .then(data => {
83
+ if( data.success == true ) {
84
+ if ( name === 'social_wall' ) {
85
+ this.social_wall.activated = false;
86
+ } else if ( type === 'extension' ) {
87
+ this.extensions[name].activated = false;
88
+ } else {
89
+ this.plugins[name].activated = false;
90
+ }
91
+ this.btnClicked = null;
92
+ this.btnName = null;
93
+ this.btnStatus = null;
94
+ }
95
+ return;
96
+ });
97
+ },
98
+ installPlugin: function( plugin, name, index ) {
99
+ this.btnClicked = index + 1;
100
+ this.btnStatus = 'loading';
101
+ this.btnName = name;
102
+
103
+ let data = new FormData();
104
+ data.append( 'action', 'cff_install_addon' );
105
+ data.append( 'nonce', this.nonce );
106
+ data.append( 'plugin', plugin );
107
+ data.append( 'type', 'plugin' );
108
+ fetch(this.ajax_handler, {
109
+ method: "POST",
110
+ credentials: 'same-origin',
111
+ body: data
112
+ })
113
+ .then(response => response.json())
114
+ .then(data => {
115
+ if( data.success == true ) {
116
+ this.plugins[name].installed = true;
117
+ this.plugins[name].open = true;
118
+ this.btnClicked = null;
119
+ this.btnName = null;
120
+ this.btnStatus = null;
121
+ }
122
+ return;
123
+ });
124
+ },
125
+ buttonIcon: function() {
126
+ if ( this.btnStatus == 'loading' ) {
127
+ return this.icons.loaderSVG
128
+ }
129
+ },
130
+ /**
131
+ * Toggle Sticky Widget view
132
+ *
133
+ * @since 4.0
134
+ */
135
+ toggleStickyWidget: function() {
136
+ this.stickyWidget = !this.stickyWidget;
137
+ },
138
+ }
139
  })
admin/assets/js/oembeds.js CHANGED
@@ -1,177 +1,177 @@
1
- var oembeds_data = {
2
- nonce: cff_oembeds.nonce,
3
- genericText: cff_oembeds.genericText,
4
- images: cff_oembeds.images,
5
- modal: cff_oembeds.modal,
6
- links: cff_oembeds.links,
7
- supportPageUrl: cff_oembeds.supportPageUrl,
8
- socialWallActivated: cff_oembeds.socialWallActivated,
9
- socialWallLinks: cff_oembeds.socialWallLinks,
10
- stickyWidget: false,
11
- facebook: cff_oembeds.facebook,
12
- instagram: cff_oembeds.instagram,
13
- connectionURL: cff_oembeds.connectionURL,
14
- isIntagramActivated: cff_oembeds.instagram.active,
15
- instagramInstallBtnText: null,
16
- fboEmbedLoader: false,
17
- instaoEmbedLoader: false,
18
- openInstaInstaller: false,
19
- loaderSVG: cff_oembeds.loaderSVG,
20
- checkmarkSVG: cff_oembeds.checkmarkSVG,
21
- installerStatus: null
22
- }
23
-
24
- var cffoEmbeds = new Vue({
25
- el: "#cff-oembeds",
26
- http: {
27
- emulateJSON: true,
28
- emulateHTTP: true
29
- },
30
- data: oembeds_data,
31
- methods: {
32
- openInstallModal: function() {
33
- this.openInstaInstaller = true
34
- },
35
- closeModal: function() {
36
- this.openInstaInstaller = false
37
- },
38
- isoEmbedsEnabled: function() {
39
- if ( this.facebook.doingOembeds && this.instagram.doingOembeds ) {
40
- return true;
41
- }
42
- return;
43
- },
44
- InstagramShouldInstallOrEnable: function() {
45
- // if the plugin is activated and installed then just enable oEmbed
46
- if( this.isIntagramActivated ) {
47
- this.enableInstagramOembed();
48
- return;
49
- }
50
- // if the plugin is not activated and installed then open the modal to install and activate the plugin
51
- if( !this.isIntagramActivated ) {
52
- this.openInstallModal();
53
- return;
54
- }
55
- },
56
- installInstagram: function() {
57
- this.installerStatus = 'loading';
58
- let data = new FormData();
59
- data.append( 'action', cff_oembeds.instagram.installer.action );
60
- data.append( 'nonce', cff_oembeds.nonce );
61
- data.append( 'plugin', cff_oembeds.instagram.installer.plugin );
62
- data.append( 'type', 'plugin' );
63
- fetch(cff_oembeds.ajax_handler, {
64
- method: "POST",
65
- credentials: 'same-origin',
66
- body: data
67
- })
68
- .then(response => response.json())
69
- .then(data => {
70
- if( data.success == false ) {
71
- this.installerStatus = 'error'
72
- }
73
- if( data.success == true ) {
74
- this.isIntagramActivated = true;
75
- this.installerStatus = 'success'
76
- }
77
- this.instagramInstallBtnText = data.data.msg;
78
- setTimeout(function() {
79
- this.installerStatus = null;
80
- }.bind(this), 3000);
81
- return;
82
- });
83
- },
84
- enableFboEmbed: function() {
85
- this.fboEmbedLoader = true;
86
- window.location = this.connectionURL;
87
- return;
88
- },
89
- enableInstagramOembed: function() {
90
- this.instaoEmbedLoader = true;
91
- window.location = this.connectionURL;
92
- return;
93
- },
94
- disableFboEmbed: function() {
95
- this.fboEmbedLoader = true;
96
- let data = new FormData();
97
- data.append( 'action', 'disable_facebook_oembed' );
98
- data.append( 'nonce', this.nonce );
99
- fetch(cff_oembeds.ajax_handler, {
100
- method: "POST",
101
- credentials: 'same-origin',
102
- body: data
103
- })
104
- .then(response => response.json())
105
- .then(data => {
106
- if( data.success == true ) {
107
- this.fboEmbedLoader = false;
108
- this.facebook.doingOembeds = false;
109
- // get the updated connection URL after disabling oEmbed
110
- this.connectionURL = data.data.connectionUrl;
111
- }
112
- return;
113
- });
114
- },
115
- disableInstaoEmbed: function() {
116
- this.instaoEmbedLoader = true;
117
- let data = new FormData();
118
- data.append( 'action', 'disable_instagram_oembed' );
119
- data.append( 'nonce', this.nonce );
120
- fetch(cff_oembeds.ajax_handler, {
121
- method: "POST",
122
- credentials: 'same-origin',
123
- body: data
124
- })
125
- .then(response => response.json())
126
- .then(data => {
127
- if( data.success == true ) {
128
- this.instaoEmbedLoader = false;
129
- this.instagram.doingOembeds = false;
130
- // get the updated connection URL after disabling oEmbed
131
- this.connectionURL = data.data.connectionUrl;
132
- }
133
- return;
134
- });
135
- },
136
- installButtonText: function( buttonText = null ) {
137
- if ( buttonText ) {
138
- return buttonText;
139
- } else if ( this.instagram.installer.nextStep == 'free_install' ) {
140
- return this.modal.install;
141
- } else if ( this.instagram.installer.nextStep == 'free_activate' ) {
142
- return this.modal.activate;
143
- }
144
- },
145
- installIcon: function() {
146
- if ( this.isIntagramActivated ) {
147
- return;
148
- }
149
- if( this.installerStatus == null ) {
150
- return this.modal.plusIcon;
151
- } else if( this.installerStatus == 'loading' ) {
152
- return this.loaderSVG;
153
- } else if( this.installerStatus == 'success' ) {
154
- return this.checkmarkSVG;
155
- } else if( this.installerStatus == 'error' ) {
156
- return `<i class="fa fa-times-circle"></i>`;
157
- }
158
- },
159
-
160
- /**
161
- * Toggle Sticky Widget view
162
- *
163
- * @since 4.0
164
- */
165
- toggleStickyWidget: function() {
166
- this.stickyWidget = !this.stickyWidget;
167
- },
168
- },
169
- created() {
170
- // Display the "Install" button text on modal depending on condition
171
- if ( this.instagram.installer.nextStep == 'free_install' ) {
172
- this.instagramInstallBtnText = this.modal.install;
173
- } else if ( this.instagram.installer.nextStep == 'free_activate' || this.instagram.installer.nextStep == 'pro_activate' ) {
174
- this.instagramInstallBtnText = this.modal.activate;
175
- }
176
- }
177
- })
1
+ var oembeds_data = {
2
+ nonce: cff_oembeds.nonce,
3
+ genericText: cff_oembeds.genericText,
4
+ images: cff_oembeds.images,
5
+ modal: cff_oembeds.modal,
6
+ links: cff_oembeds.links,
7
+ supportPageUrl: cff_oembeds.supportPageUrl,
8
+ socialWallActivated: cff_oembeds.socialWallActivated,
9
+ socialWallLinks: cff_oembeds.socialWallLinks,
10
+ stickyWidget: false,
11
+ facebook: cff_oembeds.facebook,
12
+ instagram: cff_oembeds.instagram,
13
+ connectionURL: cff_oembeds.connectionURL,
14
+ isIntagramActivated: cff_oembeds.instagram.active,
15
+ instagramInstallBtnText: null,
16
+ fboEmbedLoader: false,
17
+ instaoEmbedLoader: false,
18
+ openInstaInstaller: false,
19
+ loaderSVG: cff_oembeds.loaderSVG,
20
+ checkmarkSVG: cff_oembeds.checkmarkSVG,
21
+ installerStatus: null
22
+ }
23
+
24
+ var cffoEmbeds = new Vue({
25
+ el: "#cff-oembeds",
26
+ http: {
27
+ emulateJSON: true,
28
+ emulateHTTP: true
29
+ },
30
+ data: oembeds_data,
31
+ methods: {
32
+ openInstallModal: function() {
33
+ this.openInstaInstaller = true
34
+ },
35
+ closeModal: function() {
36
+ this.openInstaInstaller = false
37
+ },
38
+ isoEmbedsEnabled: function() {
39
+ if ( this.facebook.doingOembeds && this.instagram.doingOembeds ) {
40
+ return true;
41
+ }
42
+ return;
43
+ },
44
+ InstagramShouldInstallOrEnable: function() {
45
+ // if the plugin is activated and installed then just enable oEmbed
46
+ if( this.isIntagramActivated ) {
47
+ this.enableInstagramOembed();
48
+ return;
49
+ }
50
+ // if the plugin is not activated and installed then open the modal to install and activate the plugin
51
+ if( !this.isIntagramActivated ) {
52
+ this.openInstallModal();
53
+ return;
54
+ }
55
+ },
56
+ installInstagram: function() {
57
+ this.installerStatus = 'loading';
58
+ let data = new FormData();
59
+ data.append( 'action', cff_oembeds.instagram.installer.action );
60
+ data.append( 'nonce', cff_oembeds.nonce );
61
+ data.append( 'plugin', cff_oembeds.instagram.installer.plugin );
62
+ data.append( 'type', 'plugin' );
63
+ fetch(cff_oembeds.ajax_handler, {
64
+ method: "POST",
65
+ credentials: 'same-origin',
66
+ body: data
67
+ })
68
+ .then(response => response.json())
69
+ .then(data => {
70
+ if( data.success == false ) {
71
+ this.installerStatus = 'error'
72
+ }
73
+ if( data.success == true ) {
74
+ this.isIntagramActivated = true;
75
+ this.installerStatus = 'success'
76
+ }
77
+ this.instagramInstallBtnText = data.data.msg;
78
+ setTimeout(function() {
79
+ this.installerStatus = null;
80
+ }.bind(this), 3000);
81
+ return;
82
+ });
83
+ },
84
+ enableFboEmbed: function() {
85
+ this.fboEmbedLoader = true;
86
+ window.location = this.connectionURL;
87
+ return;
88
+ },
89
+ enableInstagramOembed: function() {
90
+ this.instaoEmbedLoader = true;
91
+ window.location = this.connectionURL;
92
+ return;
93
+ },
94
+ disableFboEmbed: function() {
95
+ this.fboEmbedLoader = true;
96
+ let data = new FormData();
97
+ data.append( 'action', 'disable_facebook_oembed' );
98
+ data.append( 'nonce', this.nonce );
99
+ fetch(cff_oembeds.ajax_handler, {
100
+ method: "POST",
101
+ credentials: 'same-origin',
102
+ body: data
103
+ })
104
+ .then(response => response.json())
105
+ .then(data => {
106
+ if( data.success == true ) {
107
+ this.fboEmbedLoader = false;
108
+ this.facebook.doingOembeds = false;
109
+ // get the updated connection URL after disabling oEmbed
110
+ this.connectionURL = data.data.connectionUrl;
111
+ }
112
+ return;
113
+ });
114
+ },
115
+ disableInstaoEmbed: function() {
116
+ this.instaoEmbedLoader = true;
117
+ let data = new FormData();
118
+ data.append( 'action', 'disable_instagram_oembed' );
119
+ data.append( 'nonce', this.nonce );
120
+ fetch(cff_oembeds.ajax_handler, {
121
+ method: "POST",
122
+ credentials: 'same-origin',
123
+ body: data
124
+ })
125
+ .then(response => response.json())
126
+ .then(data => {
127
+ if( data.success == true ) {
128
+ this.instaoEmbedLoader = false;
129
+ this.instagram.doingOembeds = false;
130
+ // get the updated connection URL after disabling oEmbed
131
+ this.connectionURL = data.data.connectionUrl;
132
+ }
133
+ return;
134
+ });
135
+ },
136
+ installButtonText: function( buttonText = null ) {
137
+ if ( buttonText ) {
138
+ return buttonText;
139
+ } else if ( this.instagram.installer.nextStep == 'free_install' ) {
140
+ return this.modal.install;
141
+ } else if ( this.instagram.installer.nextStep == 'free_activate' ) {
142
+ return this.modal.activate;
143
+ }
144
+ },
145
+ installIcon: function() {
146
+ if ( this.isIntagramActivated ) {
147
+ return;
148
+ }
149
+ if( this.installerStatus == null ) {
150
+ return this.modal.plusIcon;
151
+ } else if( this.installerStatus == 'loading' ) {
152
+ return this.loaderSVG;
153
+ } else if( this.installerStatus == 'success' ) {
154
+ return this.checkmarkSVG;
155
+ } else if( this.installerStatus == 'error' ) {
156
+ return `<i class="fa fa-times-circle"></i>`;
157
+ }
158
+ },
159
+
160
+ /**
161
+ * Toggle Sticky Widget view
162
+ *
163
+ * @since 4.0
164
+ */
165
+ toggleStickyWidget: function() {
166
+ this.stickyWidget = !this.stickyWidget;
167
+ },
168
+ },
169
+ created() {
170
+ // Display the "Install" button text on modal depending on condition
171
+ if ( this.instagram.installer.nextStep == 'free_install' ) {
172
+ this.instagramInstallBtnText = this.modal.install;
173
+ } else if ( this.instagram.installer.nextStep == 'free_activate' || this.instagram.installer.nextStep == 'pro_activate' ) {
174
+ this.instagramInstallBtnText = this.modal.activate;
175
+ }
176
+ }
177
+ })
admin/assets/js/settings.js CHANGED
@@ -1,948 +1,948 @@
1
- var cffSettings;
2
-
3
- // Declaring as global variable for quick prototyping
4
- var settings_data = {
5
- adminUrl: cff_settings.admin_url,
6
- nonce: cff_settings.nonce,
7
- ajaxHandler: cff_settings.ajax_handler,
8
- model: cff_settings.model,
9
- feeds: cff_settings.feeds,
10
- links: cff_settings.links,
11
- tooltipName: null,
12
- sourcesList : cff_settings.sources,
13
- isDevSite: cff_settings.isDevSite,
14
- dialogBoxPopupScreen : cff_settings.dialogBoxPopupScreen,
15
- selectSourceScreen : cff_settings.selectSourceScreen,
16
-
17
- socialWallActivated: cff_settings.socialWallActivated,
18
- socialWallLinks: cff_settings.socialWallLinks,
19
- stickyWidget: false,
20
- exportFeed: 'none',
21
- locales: cff_settings.locales,
22
- timezones: cff_settings.timezones,
23
- genericText: cff_settings.genericText,
24
- generalTab: cff_settings.generalTab,
25
- feedsTab: cff_settings.feedsTab,
26
- translationTab: cff_settings.translationTab,
27
- advancedTab: cff_settings.advancedTab,
28
- upgradeUrl: cff_settings.upgradeUrl,
29
- footerUpgradeUrl: cff_settings.footerUpgradeUrl,
30
- supportPageUrl: cff_settings.supportPageUrl,
31
- licenseKey: cff_settings.licenseKey,
32
- licenseType: cff_settings.licenseType,
33
- licenseStatus: cff_settings.licenseStatus,
34
- licenseErrorMsg: cff_settings.licenseErrorMsg,
35
- extensionsLicense: cff_settings.extensionsLicense,
36
- extensionsLicenseKey: cff_settings.extensionsLicenseKey,
37
- extensionFieldHasError: false,
38
- cronNextCheck: cff_settings.nextCheck,
39
- currentView: null,
40
- selected: null,
41
- current: 0,
42
- sections: ["General", "Feeds", "Translation", "Advanced"],
43
- indicator_width: 0,
44
- indicator_pos: 0,
45
- forwards: true,
46
- currentTab: null,
47
- import_file: null,
48
- gdprInfoTooltip: null,
49
- loaderSVG: cff_settings.loaderSVG,
50
- checkmarkSVG: cff_settings.checkmarkSVG,
51
- uploadSVG: cff_settings.uploadSVG,
52
- exportSVG: cff_settings.exportSVG,
53
- reloadSVG: cff_settings.reloadSVG,
54
- tooltipHelpSvg: cff_settings.tooltipHelpSvg,
55
- tooltip : {
56
- text : '',
57
- hover : false
58
- },
59
-
60
- cogSVG: cff_settings.cogSVG,
61
- deleteSVG: cff_settings.deleteSVG,
62
- svgIcons : cff_settings.svgIcons,
63
-
64
- testConnectionStatus: null,
65
- btnStatus: null,
66
- uploadStatus: null,
67
- clearCacheStatus: null,
68
- optimizeCacheStatus: null,
69
- dpaResetStatus: null,
70
- pressedBtnName: null,
71
- loading: false,
72
- hasError: cff_settings.hasError,
73
- dialogBox : {
74
- active : false,
75
- type : null,
76
- heading : null,
77
- description : null
78
- },
79
- sourceToDelete : {},
80
- newManualSourcePopup : cff_settings.newManualSourcePopup,
81
- viewsActive : {
82
- sourcePopup : false,
83
- sourcePopupScreen : 'redirect_1',
84
- sourcePopupType : 'creation',
85
- instanceSourceActive : null,
86
- },
87
- //Add New Source
88
- newSourceData : cff_settings.newSourceData ? cff_settings.newSourceData : null,
89
- sourceConnectionURLs : cff_settings.sourceConnectionURLs,
90
- returnedApiSourcesList : [],
91
- addNewSource : {
92
- typeSelected : 'page',
93
- manualSourceID : null,
94
- manualSourceToken : null
95
- },
96
- selectedFeed : 'none',
97
- expandedFeedID : null,
98
- notificationElement : {
99
- type : 'success', // success, error, warning, message
100
- text : '',
101
- shown : null
102
- },
103
- selectedSourcesToConnect : [],
104
-
105
- //Loading Bar
106
- fullScreenLoader : false,
107
- appLoaded : false,
108
- previewLoaded : false,
109
- loadingBar : true,
110
- notificationElement : {
111
- type : 'success', // success, error, warning, message
112
- text : '',
113
- shown : null
114
- }
115
- };
116
-
117
- // The tab component
118
- Vue.component("tab", {
119
- props: ["section", "index"],
120
- template: `
121
- <a class='tab' :id='section.toLowerCase().trim()' @click='emitWidth($el);changeComponent(index);activeTab(section)'>{{section}}</a>
122
- `,
123
- created: () => {
124
- let urlParams = new URLSearchParams(window.location.search);
125
- let view = urlParams.get('view');
126
- if ( view === null ) {
127
- view = 'general';
128
- }
129
- settings_data.currentView = view;
130
- settings_data.currentTab = settings_data.sections[0];
131
- settings_data.selected = "app-1";
132
- },
133
- methods: {
134
- emitWidth: function(el) {
135
- settings_data.indicator_width = jQuery(el).outerWidth();
136
- settings_data.indicator_pos = jQuery(el).position().left;
137
- },
138
- changeComponent: function(index) {
139
- var prev = settings_data.current;
140
- if (prev < index) {
141
- settings_data.forwards = false;
142
- } else if (prev > index) {
143
- settings_data.forwards = true;
144
- }
145
- settings_data.selected = "app-" + (index + 1);
146
- settings_data.current = index;
147
-
148
- // get the pro cta banner offset
149
- let ctaOffset = jQuery('.cff-settings-cta').offset();
150
- // position them to bottom so during change component they don't appear at top
151
- jQuery('.cff-settings-cta, .cff-save-button').css({"position": "absolute", "top": ctaOffset.top + 'px'})
152
- // remove the added styles shortly after to set it where it should be
153
- setTimeout(function() {
154
- jQuery('.cff-settings-cta, .cff-save-button').removeAttr('style')
155
- }, 400);
156
- },
157
- activeTab: function(section) {
158
- this.setView(section.toLowerCase().trim());
159
- settings_data.currentTab = section;
160
- },
161
- setView: function(section) {
162
- history.replaceState({}, null, settings_data.adminUrl + 'admin.php?page=cff-settings&view=' + section);
163
- }
164
- }
165
- });
166
-
167
- var cffSettings = new Vue({
168
- el: "#cff-settings",
169
- http: {
170
- emulateJSON: true,
171
- emulateHTTP: true
172
- },
173
- data: settings_data,
174
- created: function() {
175
- this.$nextTick(function() {
176
- let tabEl = document.querySelector('.tab');
177
- settings_data.indicator_width = tabEl.offsetWidth;
178
- });
179
- setTimeout(function(){
180
- settings_data.appLoaded = true;
181
- },350);
182
- },
183
- mounted: function(){
184
- var self = this;
185
- // set the current view page on page load
186
- let activeEl = document.querySelector('a.tab#' + settings_data.currentView);
187
- // we have to uppercase the first letter
188
- let currentView = settings_data.currentView.charAt(0).toUpperCase() + settings_data.currentView.slice(1);
189
- let viewIndex = settings_data.sections.indexOf(currentView) + 1;
190
- settings_data.indicator_width = activeEl.offsetWidth;
191
- settings_data.indicator_pos = activeEl.offsetLeft;
192
- settings_data.selected = "app-" + viewIndex;
193
- settings_data.current = viewIndex;
194
- settings_data.currentTab = currentView;
195
-
196
- setTimeout(function(){
197
- settings_data.appLoaded = true;
198
- },350);
199
-
200
- if(self.newManualSourcePopup != undefined && self.newManualSourcePopup == true){
201
- self.viewsActive.sourcePopupScreen = 'step_3';
202
- self.activateView('sourcePopup', 'creation');
203
- }
204
-
205
- },
206
- computed: {
207
- getStyle: function() {
208
- return {
209
- position: "absolute",
210
- bottom: "0px",
211
- left: settings_data.indicator_pos + "px",
212
- width: settings_data.indicator_width + "px",
213
- height: "2px"
214
- };
215
- },
216
- chooseDirection: function() {
217
- if (settings_data.forwards == true) {
218
- return "slide-fade";
219
- } else {
220
- return "slide-fade";
221
- }
222
- }
223
- },
224
- methods: {
225
- activateLicense: function() {
226
- if (this.licenseType === 'free') {
227
- this.runOneClickUpgrade();
228
- } else {
229
- this.activateProLicense();
230
- }
231
- },
232
- activateProLicense: function() {
233
- this.hasError = false;
234
- this.loading = true;
235
- this.pressedBtnName = 'cff';
236
-
237
- let data = new FormData();
238
- data.append( 'action', 'cff_activate_license' );
239
- data.append( 'license_key', this.licenseKey );
240
- data.append( 'nonce', this.nonce );
241
- fetch(this.ajaxHandler, {
242
- method: "POST",
243
- credentials: 'same-origin',
244
- body: data
245
- })
246
- .then(response => response.json())
247
- .then(data => {
248
- if ( data.success == false ) {
249
- this.licenseStatus = 'inactive';
250
- this.hasError = true;
251
- this.loading = false;
252
- return;
253
- }
254
- if ( data.success == true ) {
255
- let licenseData = data.data.licenseData;
256
- this.licenseStatus = data.data.licenseStatus;
257
- this.loading = false;
258
- this.pressedBtnName = null;
259
-
260
- if (
261
- data.data.licenseStatus == 'inactive' ||
262
- data.data.licenseStatus == 'invalid' ||
263
- data.data.licenseStatus == 'expired'
264
- ) {
265
- this.hasError = true;
266
- if( licenseData.error ) {
267
- this.licenseErrorMsg = licenseData.errorMsg
268
- }
269
- }
270
- }
271
- return;
272
- });
273
- },
274
- runOneClickUpgrade: function() {
275
- this.hasError = false;
276
- this.loading = true;
277
- this.pressedBtnName = 'cff';
278
-
279
- let data = new FormData();
280
- data.append( 'action', 'cff_maybe_upgrade_redirect' );
281
- data.append( 'license_key', this.licenseKey );
282
- data.append( 'nonce', this.nonce );
283
- fetch(this.ajaxHandler, {
284
- method: "POST",
285
- credentials: 'same-origin',
286
- body: data
287
- })
288
- .then(response => response.json())
289
- .then(data => {
290
- if ( data.success === false ) {
291
- this.licenseStatus = 'invalid';
292
- this.hasError = true;
293
- this.loading = false;
294
- if( typeof data.data !== 'undefined' ) {
295
- this.licenseErrorMsg = data.data.message
296
- }
297
- return;
298
- }
299
- if ( data.success === true ) {
300
- window.location.href = data.data.url
301
- }
302
- return;
303
- });
304
- },
305
- deactivateLicense: function() {
306
- this.loading = true;
307
- this.pressedBtnName = 'cff';
308
- let data = new FormData();
309
- data.append( 'action', 'cff_deactivate_license' );
310
- data.append( 'nonce', this.nonce );
311
- fetch(this.ajaxHandler, {
312
- method: "POST",
313
- credentials: 'same-origin',
314
- body: data
315
- })
316
- .then(response => response.json())
317
- .then(data => {
318
- if ( data.success == true ) {
319
- this.licenseStatus = data.data.licenseStatus ;
320
- this.loading = false;
321
- this.pressedBtnName = null;
322
- }
323
- return;
324
- });
325
- },
326
-
327
- /**
328
- * Activate Extensions License
329
- *
330
- * @since 4.0
331
- *
332
- * @param {object} extension
333
- */
334
- activateExtensionLicense: function( extension ) {
335
- let licenseKey = this.extensionsLicenseKey[extension.name];
336
- this.extensionFieldHasError = false;
337
- this.loading = true;
338
- this.pressedBtnName = extension.name;
339
- if ( ! licenseKey ) {
340
- this.loading = false;
341
- this.extensionFieldHasError = true;
342
- return;
343
- }
344
- let data = new FormData();
345
- data.append( 'action', 'cff_activate_extension_license' );
346
- data.append( 'license_key', licenseKey );
347
- data.append( 'extension_name', extension.name );
348
- data.append( 'extension_item_name', extension.itemName );
349
- data.append( 'nonce', this.nonce );
350
- fetch(this.ajaxHandler, {
351
- method: "POST",
352
- credentials: 'same-origin',
353
- body: data
354
- })
355
- .then(response => response.json())
356
- .then(data => {
357
- this.loading = false;
358
- if ( data.success == true ) {
359
- this.extensionFieldHasError = false;
360
- this.pressedBtnName = null;
361
- if ( data.data.licenseStatus == 'invalid' ) {
362
- this.extensionFieldHasError = true;
363
- this.notificationElement = {
364
- type : 'error',
365
- text : this.genericText.invalidLicenseKey,
366
- shown : "shown"
367
- };
368
- }
369
- if ( data.data.licenseStatus == 'valid' ) {
370
- this.notificationElement = {
371
- type : 'success',
372
- text : this.genericText.licenseActivated,
373
- shown : "shown"
374
- };
375
- }
376
- extension.licenseStatus = data.data.licenseStatus;
377
- extension.licenseKey = licenseKey;
378
-
379
- setTimeout(function(){
380
- this.notificationElement.shown = "hidden";
381
- }.bind(this), 3000);
382
- }
383
- return;
384
- });
385
- },
386
-
387
- licenseActiveAction: function(extension) {
388
- extension = typeof extension !== 'undefined' ? extension : false;
389
- if (this.licenseType === 'free') {
390
- this.runOneClickUpgrade();
391
- } else {
392
- if (typeof extension !== 'undefined') {
393
- this.deactivateExtensionLicense(extension);
394
- } else {
395
- this.deactivateLicense();
396
- }
397
- }
398
-
399
- },
400
-
401
- /**
402
- * Deactivate Extensions License
403
- *
404
- * @since 4.0
405
- *
406
- * @param {object} extension
407
- */
408
- deactivateExtensionLicense: function( extension ) {
409
- let licenseKey = this.extensionsLicenseKey[extension.name];
410
- this.extensionFieldHasError = false;
411
- this.loading = true;
412
- this.pressedBtnName = extension.name;
413
- let data = new FormData();
414
- data.append( 'action', 'cff_deactivate_extension_license' );
415
- data.append( 'extension_name', extension.name );
416
- data.append( 'extension_item_name', extension.itemName );
417
- data.append( 'nonce', this.nonce );
418
- fetch(this.ajaxHandler, {
419
- method: "POST",
420
- credentials: 'same-origin',
421
- body: data
422
- })
423
- .then(response => response.json())
424
- .then(data => {
425
- this.loading = false;
426
- if ( data.success == true ) {
427
- this.extensionFieldHasError = false;
428
- this.pressedBtnName = null;
429
- if ( data.data.licenseStatus == 'deactivated' ) {
430
- this.notificationElement = {
431
- type : 'success',
432
- text : this.genericText.licenseDeactivated,
433
- shown : "shown"
434
- };
435
- }
436
- extension.licenseStatus = data.data.licenseStatus;
437
- extension.licenseKey = licenseKey;
438
-
439
- setTimeout(function(){
440
- this.notificationElement.shown = "hidden";
441
- }.bind(this), 3000);
442
- }
443
- return;
444
- });
445
- },
446
- testConnection: function() {
447
- this.testConnectionStatus = 'loading';
448
- let data = new FormData();
449
- data.append( 'action', 'cff_test_connection' );
450
- data.append( 'nonce', this.nonce );
451
- fetch(this.ajaxHandler, {
452
- method: "POST",
453
- credentials: 'same-origin',
454
- body: data
455
- })
456
- .then(response => response.json())
457
- .then(data => {
458
- if ( data.success == false ) {
459
- this.testConnectionStatus = 'error';
460
- }
461
- if ( data.success == true ) {
462
- this.testConnectionStatus = 'success';
463
-
464
- setTimeout(function() {
465
- this.testConnectionStatus = null;
466
- }.bind(this), 3000);
467
- }
468
- return;
469
- });
470
- },
471
- testConnectionIcon: function() {
472
- if ( this.testConnectionStatus == 'loading' ) {
473
- return this.loaderSVG;
474
- } else if ( this.testConnectionStatus == 'success' ) {
475
- return '<i class="fa fa-check-circle"></i> ' + this.generalTab.licenseBox.connectionSuccessful;
476
- } else if ( this.testConnectionStatus == 'error' ) {
477
- return `<i class="fa fa-check-circle"></i> ${this.generalTab.licenseBox.connectionFailed} <a href="#">${this.generalTab.licenseBox.viewError}</a>`;
478
- }
479
- },
480
- importFile: function() {
481
- document.getElementById("import_file").click();
482
- },
483
- uploadFile: function( event ) {
484
- this.uploadStatus = 'loading';
485
- let file = this.$refs.file.files[0];
486
- let data = new FormData();
487
- data.append( 'action', 'cff_import_settings_json' );
488
- data.append( 'nonce', this.nonce );
489
- data.append( 'file', file );
490
- fetch(this.ajaxHandler, {
491
- method: "POST",
492
- credentials: 'same-origin',
493
- body: data
494
- })
495
- .then(response => response.json())
496
- .then(data => {
497
- this.uploadStatus = null;
498
- this.$refs.file.files[0] = null;
499
- if ( data.success == false ) {
500
- this.notificationElement = {
501
- type : 'error',
502
- text : this.genericText.failedToImportFeed,
503
- shown : "shown"
504
- };
505
- }
506
- if ( data.success == true ) {
507
- this.feeds = data.data.feeds;
508
- this.notificationElement = {
509
- type : 'success',
510
- text : this.genericText.feedImported,
511
- shown : "shown"
512
- };
513
- }
514
- setTimeout(function(){
515
- this.notificationElement.shown = "hidden";
516
- }.bind(this), 3000);
517
- });
518
- },
519
- exportFeedSettings: function() {
520
- // return if no feed is selected
521
- if ( this.exportFeed === 'none' ) {
522
- return;
523
- }
524
-
525
- let url = this.ajaxHandler + '?action=cff_export_settings_json&feed_id=' + this.exportFeed + '&nonce=' + this.nonce;
526
- window.location = url;
527
- },
528
- saveSettings: function() {
529
- this.btnStatus = 'loading';
530
- let data = new FormData();
531
- data.append( 'action', 'cff_save_settings' );
532
- data.append( 'nonce', this.nonce );
533
- data.append( 'model', JSON.stringify( this.model ) );
534
- data.append( 'cff_license_key', this.licenseKey );
535
- data.append( 'extensions_license_key', JSON.stringify( this.extensionsLicenseKey ) );
536
- fetch(this.ajaxHandler, {
537
- method: "POST",
538
- credentials: 'same-origin',
539
- body: data
540
- })
541
- .then(response => response.json())
542
- .then(data => {
543
- if ( data.success == false ) {
544
- this.btnStatus = 'error';
545
- return;
546
- }
547
-
548
- this.cronNextCheck = data.data.cronNextCheck;
549
- this.btnStatus = 'success';
550
- setTimeout(function() {
551
- this.btnStatus = null;
552
- }.bind(this), 3000);
553
- });
554
- },
555
- clearCache: function() {
556
- this.clearCacheStatus = 'loading';
557
- let data = new FormData();
558
- data.append( 'action', 'cff_clear_cache' );
559
- data.append( 'model', JSON.stringify( this.model ) );
560
- data.append( 'nonce', this.nonce );
561
- fetch(this.ajaxHandler, {
562
- method: "POST",
563
- credentials: 'same-origin',
564
- body: data
565
- })
566
- .then(response => response.json())
567
- .then(data => {
568
- if ( data.success == false ) {
569
- this.clearCacheStatus = 'error';
570
- return;
571
- }
572
-
573
- this.cronNextCheck = data.data.cronNextCheck;
574
- this.clearCacheStatus = 'success';
575
- setTimeout(function() {
576
- this.clearCacheStatus = null;
577
- }.bind(this), 3000);
578
- });
579
- },
580
- showTooltip: function( tooltipName ) {
581
- this.tooltipName = tooltipName;
582
- },
583
- hideTooltip: function() {
584
- this.tooltipName = null;
585
- },
586
- gdprOptions: function() {
587
- this.gdprInfoTooltip = null;
588
- },
589
- gdprLimited: function() {
590
- this.gdprInfoTooltip = this.gdprInfoTooltip == null ? true : null;
591
- },
592
- clearImageResizeCache: function() {
593
- this.optimizeCacheStatus = 'loading';
594
- let data = new FormData();
595
- data.append( 'action', 'cff_clear_image_resize_cache' );
596
- data.append( 'nonce', this.nonce );
597
- fetch(this.ajaxHandler, {
598
- method: "POST",
599
- credentials: 'same-origin',
600
- body: data
601
- })
602
- .then(response => response.json())
603
- .then(data => {
604
- if ( data.success == false ) {
605
- this.optimizeCacheStatus = 'error';
606
- return;
607
- }
608
- this.optimizeCacheStatus = 'success';
609
- setTimeout(function() {
610
- this.optimizeCacheStatus = null;
611
- }.bind(this), 3000);
612
- });
613
- },
614
- dpaReset: function() {
615
- this.dpaResetStatus = 'loading';
616
- let data = new FormData();
617
- data.append( 'action', 'cff_dpa_reset' );
618
- data.append( 'nonce', this.nonce );
619
- fetch(this.ajaxHandler, {
620
- method: "POST",
621
- credentials: 'same-origin',
622
- body: data
623
- })
624
- .then(response => response.json())
625
- .then(data => {
626
- if ( data.success == false ) {
627
- this.dpaResetStatus = 'error';
628
- return;
629
- }
630
- this.dpaResetStatus = 'success';
631
- setTimeout(function() {
632
- this.dpaResetStatus = null;
633
- }.bind(this), 3000);
634
- });
635
- },
636
- dpaResetStatusIcon: function() {
637
- if ( this.dpaResetStatus === null ) {
638
- return;
639
- }
640
- if ( this.dpaResetStatus == 'loading' ) {
641
- return this.loaderSVG;
642
- } else if ( this.dpaResetStatus == 'success' ) {
643
- return this.checkmarkSVG;
644
- } else if ( this.dpaResetStatus == 'error' ) {
645
- return `<i class="fa fa-times-circle"></i>`;
646
- }
647
- },
648
- saveChangesIcon: function() {
649
- if ( this.btnStatus == 'loading' ) {
650
- return this.loaderSVG;
651
- } else if ( this.btnStatus == 'success' ) {
652
- return this.checkmarkSVG;
653
- } else if ( this.btnStatus == 'error' ) {
654
- return `<i class="fa fa-times-circle"></i>`;
655
- }
656
- },
657
- importBtnIcon: function() {
658
- if ( this.uploadStatus === null ) {
659
- return this.uploadSVG;
660
- }
661
- if ( this.uploadStatus == 'loading' ) {
662
- return this.loaderSVG;
663
- } else if ( this.uploadStatus == 'success' ) {
664
- return this.checkmarkSVG;
665
- } else if ( this.uploadStatus == 'error' ) {
666
- return `<i class="fa fa-times-circle"></i>`;
667
- }
668
- },
669
- clearCacheIcon: function() {
670
- if ( this.clearCacheStatus === null ) {
671
- return this.reloadSVG;
672
- }
673
- if ( this.clearCacheStatus == 'loading' ) {
674
- return this.loaderSVG;
675
- } else if ( this.clearCacheStatus == 'success' ) {
676
- return this.checkmarkSVG;
677
- } else if ( this.clearCacheStatus == 'error' ) {
678
- return `<i class="fa fa-times-circle"></i>`;
679
- }
680
- },
681
- clearImageResizeCacheIcon: function() {
682
- if ( this.optimizeCacheStatus === null ) {
683
- return;
684
- }
685
- if ( this.optimizeCacheStatus == 'loading' ) {
686
- return this.loaderSVG;
687
- } else if ( this.optimizeCacheStatus == 'success' ) {
688
- return this.checkmarkSVG;
689
- } else if ( this.optimizeCacheStatus == 'error' ) {
690
- return `<i class="fa fa-times-circle"></i>`;
691
- }
692
- },
693
-
694
- /**
695
- * Toggle Sticky Widget view
696
- *
697
- * @since 4.0
698
- */
699
- toggleStickyWidget: function() {
700
- this.stickyWidget = !this.stickyWidget;
701
- },
702
-
703
- printUsedInText: function( usedInNumber ){
704
- if(usedInNumber == 0){
705
- return this.genericText.sourceNotUsedYet;
706
- }
707
- return this.genericText.usedIn + ' ' + usedInNumber + ' ' +(usedInNumber == 1 ? this.genericText.feed : this.genericText.feeds);
708
- },
709
-
710
- /**
711
- * Delete Source Ajax
712
- *
713
- * @since 4.0
714
- */
715
- deleteSource : function(sourceToDelete){
716
- var self = this;
717
- let data = new FormData();
718
- data.append( 'action', 'cff_feed_saver_manager_delete_source' );
719
- data.append( 'nonce', this.nonce );
720
- data.append( 'source_id', sourceToDelete.id);
721
- fetch(self.ajaxHandler, {
722
- method: "POST",
723
- credentials: 'same-origin',
724
- body: data
725
- })
726
- .then(response => response.json())
727
- .then(data => {
728
- self.sourcesList = data;
729
- });
730
- },
731
-
732
- /**
733
- * Check if Value is Empty
734
- *
735
- * @since 4.0
736
- *
737
- * @return boolean
738
- */
739
- checkNotEmpty : function(value){
740
- return value != null && value.replace(/ /gi,'') != '';
741
- },
742
-
743
- /**
744
- * Activate View
745
- *
746
- * @since 4.0
747
- */
748
- activateView : function(viewName, sourcePopupType = 'creation', ajaxAction = false){
749
- var self = this;
750
- self.viewsActive[viewName] = (self.viewsActive[viewName] == false ) ? true : false;
751
- if(viewName == 'sourcePopup' && sourcePopupType == 'creationRedirect'){
752
- setTimeout(function(){
753
- self.$refs.addSourceRef.processFBConnect()
754
- },3500);
755
- }
756
- },
757
-
758
- /**
759
- * Switch & Change Feed Screens
760
- *
761
- * @since 4.0
762
- */
763
- switchScreen: function(screenType, screenName){
764
- this.viewsActive[screenType] = screenName;
765
- },
766
-
767
- /**
768
- * Parse JSON
769
- *
770
- * @since 4.0
771
- *
772
- * @return jsonObject / Boolean
773
- */
774
- jsonParse : function(jsonString){
775
- try {
776
- return JSON.parse(jsonString);
777
- } catch(e) {
778
- return false;
779
- }
780
- },
781
-
782
-
783
- /**
784
- * Ajax Post Action
785
- *
786
- * @since 4.0
787
- */
788
- ajaxPost : function(data, callback){
789
- var self = this;
790
- data['nonce'] = self.nonce;
791
- data['settings_page'] = true;
792
-
793
- self.$http.post(self.ajaxHandler,data).then(callback);
794
- },
795
-
796
- /**
797
- * Check if Object has Nested Property
798
- *
799
- * @since 4.0
800
- *
801
- * @return boolean
802
- */
803
- hasOwnNestedProperty : function(obj,propertyPath) {
804
- if (!propertyPath){return false;}var properties = propertyPath.split('.');
805
- for (var i = 0; i < properties.length; i++) {
806
- var prop = properties[i];
807
- if (!obj || !obj.hasOwnProperty(prop)) {
808
- return false;
809
- } else {
810
- obj = obj[prop];
811
- }
812
- }
813
- return true;
814
- },
815
-
816
- /**
817
- * Show Tooltip on Hover
818
- *
819
- * @since 4.0
820
- */
821
- toggleElementTooltip : function(tooltipText, type, align = 'center'){
822
- var self = this,
823
- target = window.event.currentTarget,
824
- tooltip = (target != undefined && target != null) ? document.querySelector('.sb-control-elem-tltp-content') : null;
825
- if(tooltip != null && type == 'show'){
826
- self.tooltip.text = tooltipText;
827
- var position = target.getBoundingClientRect(),
828
- left = position.left + 7,
829
- top = position.top - 15;
830
- tooltip.style.left = left + 'px';
831
- tooltip.style.top = top + 'px';
832
- tooltip.style.textAlign = align;
833
- self.tooltip.hover = true;
834
- }
835
- if(type == 'hide'){
836
- self.tooltip.hover = false;
837
- }
838
- },
839
-
840
- /**
841
- * Hover Tooltip
842
- *
843
- * @since 4.0
844
- */
845
- hoverTooltip : function(type){
846
- this.tooltip.hover = type;
847
- },
848
-
849
- /**
850
- * Open Dialog Box
851
- *
852
- * @since 4.0
853
- */
854
- openDialogBox : function(type, args = []){
855
- var self = this,
856
- heading = self.dialogBoxPopupScreen[type].heading,
857
- description = self.dialogBoxPopupScreen[type].description;
858
-
859
- switch (type) {
860
- case "deleteSource":
861
- self.sourceToDelete = args;
862
- heading = heading.replace("#", self.sourceToDelete.username);
863
- break;
864
- }
865
- self.dialogBox = {
866
- active : true,
867
- type : type,
868
- heading : heading,
869
- description : description
870
- };
871
- },
872
-
873
-
874
- /**
875
- * Confirm Dialog Box Actions
876
- *
877
- * @since 4.0
878
- */
879
- confirmDialogAction : function(){
880
- var self = this;
881
- switch (self.dialogBox.type) {
882
- case 'deleteSource':
883
- self.deleteSource(self.sourceToDelete);
884
- break;
885
- }
886
- },
887
-
888
- /**
889
- * Display Feed Sources Settings
890
- *
891
- * @since 4.0
892
- *
893
- * @param {object} source
894
- * @param {int} sourceIndex
895
- */
896
- displayFeedSettings: function(source, sourceIndex) {
897
- this.expandedFeedID = sourceIndex + 1;
898
- },
899
-
900
- /**
901
- * Hide Feed Sources Settings
902
- *
903
- * @since 4.0
904
- *
905
- * @param {object} source
906
- * @param {int} sourceIndex
907
- */
908
- hideFeedSettings: function() {
909
- this.expandedFeedID = null;
910
- },
911
-
912
- /**
913
- * Copy text to clipboard
914
- *
915
- * @since 4.0
916
- */
917
- copyToClipBoard : function(value){
918
- var self = this;
919
- const el = document.createElement('textarea');
920
- el.className = 'cff-fb-cp-clpboard';
921
- el.value = value;
922
- document.body.appendChild(el);
923
- el.select();
924
- document.execCommand('copy');
925
- document.body.removeChild(el);
926
- self.notificationElement = {
927
- type : 'success',
928
- text : this.genericText.copiedClipboard,
929
- shown : "shown"
930
- };
931
- setTimeout(function(){
932
- self.notificationElement.shown = "hidden";
933
- }, 3000);
934
- },
935
-
936
-
937
- /**
938
- * View Source Instances
939
- *
940
- * @since 4.0
941
- */
942
- viewSourceInstances : function(source){
943
- var self = this;
944
- self.viewsActive.instanceSourceActive = source;
945
- },
946
- }
947
- });
948
-
1
+ var cffSettings;
2
+
3
+ // Declaring as global variable for quick prototyping
4
+ var settings_data = {
5
+ adminUrl: cff_settings.admin_url,
6
+ nonce: cff_settings.nonce,
7
+ ajaxHandler: cff_settings.ajax_handler,
8
+ model: cff_settings.model,
9
+ feeds: cff_settings.feeds,
10
+ links: cff_settings.links,
11
+ tooltipName: null,
12
+ sourcesList : cff_settings.sources,
13
+ isDevSite: cff_settings.isDevSite,
14
+ dialogBoxPopupScreen : cff_settings.dialogBoxPopupScreen,
15
+ selectSourceScreen : cff_settings.selectSourceScreen,
16
+
17
+ socialWallActivated: cff_settings.socialWallActivated,
18
+ socialWallLinks: cff_settings.socialWallLinks,
19
+ stickyWidget: false,
20
+ exportFeed: 'none',
21
+ locales: cff_settings.locales,
22
+ timezones: cff_settings.timezones,
23
+ genericText: cff_settings.genericText,
24
+ generalTab: cff_settings.generalTab,
25
+ feedsTab: cff_settings.feedsTab,
26
+ translationTab: cff_settings.translationTab,
27
+ advancedTab: cff_settings.advancedTab,
28
+ upgradeUrl: cff_settings.upgradeUrl,
29
+ footerUpgradeUrl: cff_settings.footerUpgradeUrl,
30
+ supportPageUrl: cff_settings.supportPageUrl,
31
+ licenseKey: cff_settings.licenseKey,
32
+ licenseType: cff_settings.licenseType,
33
+ licenseStatus: cff_settings.licenseStatus,
34
+ licenseErrorMsg: cff_settings.licenseErrorMsg,
35
+ extensionsLicense: cff_settings.extensionsLicense,
36
+ extensionsLicenseKey: cff_settings.extensionsLicenseKey,
37
+ extensionFieldHasError: false,
38
+ cronNextCheck: cff_settings.nextCheck,
39
+ currentView: null,
40
+ selected: null,
41
+ current: 0,
42
+ sections: ["General", "Feeds", "Translation", "Advanced"],
43
+ indicator_width: 0,
44
+ indicator_pos: 0,
45
+ forwards: true,
46
+ currentTab: null,
47
+ import_file: null,
48
+ gdprInfoTooltip: null,
49
+ loaderSVG: cff_settings.loaderSVG,
50
+ checkmarkSVG: cff_settings.checkmarkSVG,
51
+ uploadSVG: cff_settings.uploadSVG,
52
+ exportSVG: cff_settings.exportSVG,
53
+ reloadSVG: cff_settings.reloadSVG,
54
+ tooltipHelpSvg: cff_settings.tooltipHelpSvg,
55
+ tooltip : {
56
+ text : '',
57
+ hover : false
58
+ },
59
+
60
+ cogSVG: cff_settings.cogSVG,
61
+ deleteSVG: cff_settings.deleteSVG,
62
+ svgIcons : cff_settings.svgIcons,
63
+
64
+ testConnectionStatus: null,
65
+ btnStatus: null,
66
+ uploadStatus: null,
67
+ clearCacheStatus: null,
68
+ optimizeCacheStatus: null,
69
+ dpaResetStatus: null,
70
+ pressedBtnName: null,
71
+ loading: false,
72
+ hasError: cff_settings.hasError,
73
+ dialogBox : {
74
+ active : false,
75
+ type : null,
76
+ heading : null,
77
+ description : null
78
+ },
79
+ sourceToDelete : {},
80
+ newManualSourcePopup : cff_settings.newManualSourcePopup,
81
+ viewsActive : {
82
+ sourcePopup : false,
83
+ sourcePopupScreen : 'redirect_1',
84
+ sourcePopupType : 'creation',
85
+ instanceSourceActive : null,
86
+ },
87
+ //Add New Source
88
+ newSourceData : cff_settings.newSourceData ? cff_settings.newSourceData : null,
89
+ sourceConnectionURLs : cff_settings.sourceConnectionURLs,
90
+ returnedApiSourcesList : [],
91
+ addNewSource : {
92
+ typeSelected : 'page',
93
+ manualSourceID : null,
94
+ manualSourceToken : null
95
+ },
96
+ selectedFeed : 'none',
97
+ expandedFeedID : null,
98
+ notificationElement : {
99
+ type : 'success', // success, error, warning, message
100
+ text : '',
101
+ shown : null
102
+ },
103
+ selectedSourcesToConnect : [],
104
+
105
+ //Loading Bar
106
+ fullScreenLoader : false,
107
+ appLoaded : false,
108
+ previewLoaded : false,
109
+ loadingBar : true,
110
+ notificationElement : {
111
+ type : 'success', // success, error, warning, message
112
+ text : '',
113
+ shown : null
114
+ }
115
+ };
116
+
117
+ // The tab component
118
+ Vue.component("tab", {
119
+ props: ["section", "index"],
120
+ template: `
121
+ <a class='tab' :id='section.toLowerCase().trim()' @click='emitWidth($el);changeComponent(index);activeTab(section)'>{{section}}</a>
122
+ `,
123
+ created: () => {
124
+ let urlParams = new URLSearchParams(window.location.search);
125
+ let view = urlParams.get('view');
126
+ if ( view === null ) {
127
+ view = 'general';
128
+ }
129
+ settings_data.currentView = view;
130
+ settings_data.currentTab = settings_data.sections[0];
131
+ settings_data.selected = "app-1";
132
+ },
133
+ methods: {
134
+ emitWidth: function(el) {
135
+ settings_data.indicator_width = jQuery(el).outerWidth();
136
+ settings_data.indicator_pos = jQuery(el).position().left;
137
+ },
138
+ changeComponent: function(index) {
139
+ var prev = settings_data.current;
140
+ if (prev < index) {
141
+ settings_data.forwards = false;
142
+ } else if (prev > index) {
143
+ settings_data.forwards = true;
144
+ }
145
+ settings_data.selected = "app-" + (index + 1);
146
+ settings_data.current = index;
147
+
148
+ // get the pro cta banner offset
149
+ let ctaOffset = jQuery('.cff-settings-cta').offset();
150
+ // position them to bottom so during change component they don't appear at top
151
+ jQuery('.cff-settings-cta, .cff-save-button').css({"position": "absolute", "top": ctaOffset.top + 'px'})
152
+ // remove the added styles shortly after to set it where it should be
153
+ setTimeout(function() {
154
+ jQuery('.cff-settings-cta, .cff-save-button').removeAttr('style')
155
+ }, 400);
156
+ },
157
+ activeTab: function(section) {
158
+ this.setView(section.toLowerCase().trim());
159
+ settings_data.currentTab = section;
160
+ },
161
+ setView: function(section) {
162
+ history.replaceState({}, null, settings_data.adminUrl + 'admin.php?page=cff-settings&view=' + section);
163
+ }
164
+ }
165
+ });
166
+
167
+ var cffSettings = new Vue({
168
+ el: "#cff-settings",
169
+ http: {
170
+ emulateJSON: true,
171
+ emulateHTTP: true
172
+ },
173
+ data: settings_data,
174
+ created: function() {
175
+ this.$nextTick(function() {
176
+ let tabEl = document.querySelector('.tab');
177
+ settings_data.indicator_width = tabEl.offsetWidth;
178
+ });
179
+ setTimeout(function(){
180
+ settings_data.appLoaded = true;
181
+ },350);
182
+ },
183
+ mounted: function(){
184
+ var self = this;
185
+ // set the current view page on page load
186
+ let activeEl = document.querySelector('a.tab#' + settings_data.currentView);
187
+ // we have to uppercase the first letter
188
+ let currentView = settings_data.currentView.charAt(0).toUpperCase() + settings_data.currentView.slice(1);
189
+ let viewIndex = settings_data.sections.indexOf(currentView) + 1;
190
+ settings_data.indicator_width = activeEl.offsetWidth;
191
+ settings_data.indicator_pos = activeEl.offsetLeft;
192
+ settings_data.selected = "app-" + viewIndex;
193
+ settings_data.current = viewIndex;
194
+ settings_data.currentTab = currentView;
195
+
196
+ setTimeout(function(){
197
+ settings_data.appLoaded = true;
198
+ },350);
199
+
200
+ if(self.newManualSourcePopup != undefined && self.newManualSourcePopup == true){
201
+ self.viewsActive.sourcePopupScreen = 'step_3';
202
+ self.activateView('sourcePopup', 'creation');
203
+ }
204
+
205
+ },
206
+ computed: {
207
+ getStyle: function() {
208
+ return {
209
+ position: "absolute",
210
+ bottom: "0px",
211
+ left: settings_data.indicator_pos + "px",
212
+ width: settings_data.indicator_width + "px",
213
+ height: "2px"
214
+ };
215
+ },
216
+ chooseDirection: function() {
217
+ if (settings_data.forwards == true) {
218
+ return "slide-fade";
219
+ } else {
220
+ return "slide-fade";
221
+ }
222
+ }
223
+ },
224
+ methods: {
225
+ activateLicense: function() {
226
+ if (this.licenseType === 'free') {
227
+ this.runOneClickUpgrade();
228
+ } else {
229
+ this.activateProLicense();
230
+ }
231
+ },
232
+ activateProLicense: function() {
233
+ this.hasError = false;
234
+ this.loading = true;
235
+ this.pressedBtnName = 'cff';
236
+
237
+ let data = new FormData();
238
+ data.append( 'action', 'cff_activate_license' );
239
+ data.append( 'license_key', this.licenseKey );
240
+ data.append( 'nonce', this.nonce );
241
+ fetch(this.ajaxHandler, {
242
+ method: "POST",
243
+ credentials: 'same-origin',
244
+ body: data
245
+ })
246
+ .then(response => response.json())
247
+ .then(data => {
248
+ if ( data.success == false ) {
249
+ this.licenseStatus = 'inactive';
250
+ this.hasError = true;
251
+ this.loading = false;
252
+ return;
253
+ }
254
+ if ( data.success == true ) {
255
+ let licenseData = data.data.licenseData;
256
+ this.licenseStatus = data.data.licenseStatus;
257
+ this.loading = false;
258
+ this.pressedBtnName = null;
259
+
260
+ if (
261
+ data.data.licenseStatus == 'inactive' ||
262
+ data.data.licenseStatus == 'invalid' ||
263
+ data.data.licenseStatus == 'expired'
264
+ ) {
265
+ this.hasError = true;
266
+ if( licenseData.error ) {
267
+ this.licenseErrorMsg = licenseData.errorMsg
268
+ }
269
+ }
270
+ }
271
+ return;
272
+ });
273
+ },
274
+ runOneClickUpgrade: function() {
275
+ this.hasError = false;
276
+ this.loading = true;
277
+ this.pressedBtnName = 'cff';
278
+
279
+ let data = new FormData();
280
+ data.append( 'action', 'cff_maybe_upgrade_redirect' );
281
+ data.append( 'license_key', this.licenseKey );
282
+ data.append( 'nonce', this.nonce );
283
+ fetch(this.ajaxHandler, {
284
+ method: "POST",
285
+ credentials: 'same-origin',
286
+ body: data
287
+ })
288
+ .then(response => response.json())
289
+ .then(data => {
290
+ if ( data.success === false ) {
291
+ this.licenseStatus = 'invalid';
292
+ this.hasError = true;
293
+ this.loading = false;
294
+ if( typeof data.data !== 'undefined' ) {
295
+ this.licenseErrorMsg = data.data.message
296
+ }
297
+ return;
298
+ }
299
+ if ( data.success === true ) {
300
+ window.location.href = data.data.url
301
+ }
302
+ return;
303
+ });
304
+ },
305
+ deactivateLicense: function() {
306
+ this.loading = true;
307
+ this.pressedBtnName = 'cff';
308
+ let data = new FormData();
309
+ data.append( 'action', 'cff_deactivate_license' );
310
+ data.append( 'nonce', this.nonce );
311
+ fetch(this.ajaxHandler, {
312
+ method: "POST",
313
+ credentials: 'same-origin',
314
+ body: data
315
+ })
316
+ .then(response => response.json())
317
+ .then(data => {
318
+ if ( data.success == true ) {
319
+ this.licenseStatus = data.data.licenseStatus ;
320
+ this.loading = false;
321
+ this.pressedBtnName = null;
322
+ }
323
+ return;
324
+ });
325
+ },
326
+
327
+ /**
328
+ * Activate Extensions License
329
+ *
330
+ * @since 4.0
331
+ *
332
+ * @param {object} extension
333
+ */
334
+ activateExtensionLicense: function( extension ) {
335
+ let licenseKey = this.extensionsLicenseKey[extension.name];
336
+ this.extensionFieldHasError = false;
337
+ this.loading = true;
338
+ this.pressedBtnName = extension.name;
339
+ if ( ! licenseKey ) {
340
+ this.loading = false;
341
+ this.extensionFieldHasError = true;
342
+ return;
343
+ }
344
+ let data = new FormData();
345
+ data.append( 'action', 'cff_activate_extension_license' );
346
+ data.append( 'license_key', licenseKey );
347
+ data.append( 'extension_name', extension.name );
348
+ data.append( 'extension_item_name', extension.itemName );
349
+ data.append( 'nonce', this.nonce );
350
+ fetch(this.ajaxHandler, {
351
+ method: "POST",
352
+ credentials: 'same-origin',
353
+ body: data
354
+ })
355
+ .then(response => response.json())
356
+ .then(data => {
357
+ this.loading = false;
358
+ if ( data.success == true ) {
359
+ this.extensionFieldHasError = false;
360
+ this.pressedBtnName = null;
361
+ if ( data.data.licenseStatus == 'invalid' ) {
362
+ this.extensionFieldHasError = true;
363
+ this.notificationElement = {
364
+ type : 'error',
365
+ text : this.genericText.invalidLicenseKey,
366
+ shown : "shown"
367
+ };
368
+ }
369
+ if ( data.data.licenseStatus == 'valid' ) {
370
+ this.notificationElement = {
371
+ type : 'success',
372
+ text : this.genericText.licenseActivated,
373
+ shown : "shown"
374
+ };
375
+ }
376
+ extension.licenseStatus = data.data.licenseStatus;
377
+ extension.licenseKey = licenseKey;
378
+
379
+ setTimeout(function(){
380
+ this.notificationElement.shown = "hidden";
381
+ }.bind(this), 3000);
382
+ }
383
+ return;
384
+ });
385
+ },
386
+
387
+ licenseActiveAction: function(extension) {
388
+ extension = typeof extension !== 'undefined' ? extension : false;
389
+ if (this.licenseType === 'free') {
390
+ this.runOneClickUpgrade();
391
+ } else {
392
+ if (typeof extension !== 'undefined') {
393
+ this.deactivateExtensionLicense(extension);
394
+ } else {
395
+ this.deactivateLicense();
396
+ }
397
+ }
398
+
399
+ },
400
+
401
+ /**
402
+ * Deactivate Extensions License
403
+ *
404
+ * @since 4.0
405
+ *
406
+ * @param {object} extension
407
+ */
408
+ deactivateExtensionLicense: function( extension ) {
409
+ let licenseKey = this.extensionsLicenseKey[extension.name];
410
+ this.extensionFieldHasError = false;
411
+ this.loading = true;
412
+ this.pressedBtnName = extension.name;
413
+ let data = new FormData();
414
+ data.append( 'action', 'cff_deactivate_extension_license' );
415
+ data.append( 'extension_name', extension.name );
416
+ data.append( 'extension_item_name', extension.itemName );
417
+ data.append( 'nonce', this.nonce );
418
+ fetch(this.ajaxHandler, {
419
+ method: "POST",
420
+ credentials: 'same-origin',
421
+ body: data
422
+ })
423
+ .then(response => response.json())
424
+ .then(data => {
425
+ this.loading = false;
426
+ if ( data.success == true ) {
427
+ this.extensionFieldHasError = false;
428
+ this.pressedBtnName = null;
429
+ if ( data.data.licenseStatus == 'deactivated' ) {
430
+ this.notificationElement = {
431
+ type : 'success',
432
+ text : this.genericText.licenseDeactivated,
433
+ shown : "shown"
434
+ };
435
+ }
436
+ extension.licenseStatus = data.data.licenseStatus;
437
+ extension.licenseKey = licenseKey;
438
+
439
+ setTimeout(function(){
440
+ this.notificationElement.shown = "hidden";
441
+ }.bind(this), 3000);
442
+ }
443
+ return;
444
+ });
445
+ },
446
+ testConnection: function() {
447
+ this.testConnectionStatus = 'loading';
448
+ let data = new FormData();
449
+ data.append( 'action', 'cff_test_connection' );
450
+ data.append( 'nonce', this.nonce );
451
+ fetch(this.ajaxHandler, {
452
+ method: "POST",
453
+ credentials: 'same-origin',
454
+ body: data
455
+ })
456
+ .then(response => response.json())
457
+ .then(data => {
458
+ if ( data.success == false ) {
459
+ this.testConnectionStatus = 'error';
460
+ }
461
+ if ( data.success == true ) {
462
+ this.testConnectionStatus = 'success';
463
+
464
+ setTimeout(function() {
465
+ this.testConnectionStatus = null;
466
+ }.bind(this), 3000);
467
+ }
468
+ return;
469
+ });
470
+ },
471
+ testConnectionIcon: function() {
472
+ if ( this.testConnectionStatus == 'loading' ) {
473
+ return this.loaderSVG;
474
+ } else if ( this.testConnectionStatus == 'success' ) {
475
+ return '<i class="fa fa-check-circle"></i> ' + this.generalTab.licenseBox.connectionSuccessful;
476
+ } else if ( this.testConnectionStatus == 'error' ) {
477
+ return `<i class="fa fa-check-circle"></i> ${this.generalTab.licenseBox.connectionFailed} <a href="#">${this.generalTab.licenseBox.viewError}</a>`;
478
+ }
479
+ },
480
+ importFile: function() {
481
+ document.getElementById("import_file").click();
482
+ },
483
+ uploadFile: function( event ) {
484
+ this.uploadStatus = 'loading';
485
+ let file = this.$refs.file.files[0];
486
+ let data = new FormData();
487
+ data.append( 'action', 'cff_import_settings_json' );
488
+ data.append( 'nonce', this.nonce );
489
+ data.append( 'file', file );
490
+ fetch(this.ajaxHandler, {
491
+ method: "POST",
492
+ credentials: 'same-origin',
493
+ body: data
494
+ })
495
+ .then(response => response.json())
496
+ .then(data => {
497
+ this.uploadStatus = null;
498
+ this.$refs.file.files[0] = null;
499
+ if ( data.success == false ) {
500
+ this.notificationElement = {
501
+ type : 'error',
502
+ text : this.genericText.failedToImportFeed,
503
+ shown : "shown"
504
+ };
505
+ }
506
+ if ( data.success == true ) {
507
+ this.feeds = data.data.feeds;
508
+ this.notificationElement = {
509
+ type : 'success',
510
+ text : this.genericText.feedImported,
511
+ shown : "shown"
512
+ };
513
+ }
514
+ setTimeout(function(){
515
+ this.notificationElement.shown = "hidden";
516
+ }.bind(this), 3000);
517
+ });
518
+ },
519
+ exportFeedSettings: function() {
520
+ // return if no feed is selected
521
+ if ( this.exportFeed === 'none' ) {
522
+ return;
523
+ }
524
+
525
+ let url = this.ajaxHandler + '?action=cff_export_settings_json&feed_id=' + this.exportFeed + '&nonce=' + this.nonce;
526
+ window.location = url;
527
+ },
528
+ saveSettings: function() {
529
+ this.btnStatus = 'loading';
530
+ let data = new FormData();
531
+ data.append( 'action', 'cff_save_settings' );
532
+ data.append( 'nonce', this.nonce );
533
+ data.append( 'model', JSON.stringify( this.model ) );
534
+ data.append( 'cff_license_key', this.licenseKey );
535
+ data.append( 'extensions_license_key', JSON.stringify( this.extensionsLicenseKey ) );
536
+ fetch(this.ajaxHandler, {
537
+ method: "POST",
538
+ credentials: 'same-origin',
539
+ body: data
540
+ })
541
+ .then(response => response.json())
542
+ .then(data => {
543
+ if ( data.success == false ) {
544
+ this.btnStatus = 'error';
545
+ return;
546
+ }
547
+
548
+ this.cronNextCheck = data.data.cronNextCheck;
549
+ this.btnStatus = 'success';
550
+ setTimeout(function() {
551
+ this.btnStatus = null;
552
+ }.bind(this), 3000);
553
+ });
554
+ },
555
+ clearCache: function() {
556
+ this.clearCacheStatus = 'loading';
557
+ let data = new FormData();
558
+ data.append( 'action', 'cff_clear_cache' );
559
+ data.append( 'model', JSON.stringify( this.model ) );
560
+ data.append( 'nonce', this.nonce );
561
+ fetch(this.ajaxHandler, {
562
+ method: "POST",
563
+ credentials: 'same-origin',
564
+ body: data
565
+ })
566
+ .then(response => response.json())
567
+ .then(data => {
568
+ if ( data.success == false ) {
569
+ this.clearCacheStatus = 'error';
570
+ return;
571
+ }
572
+
573
+ this.cronNextCheck = data.data.cronNextCheck;
574
+ this.clearCacheStatus = 'success';
575
+ setTimeout(function() {
576
+ this.clearCacheStatus = null;
577
+ }.bind(this), 3000);
578
+ });
579
+ },
580
+ showTooltip: function( tooltipName ) {
581
+ this.tooltipName = tooltipName;
582
+ },
583
+ hideTooltip: function() {
584
+ this.tooltipName = null;
585
+ },
586
+ gdprOptions: function() {
587
+ this.gdprInfoTooltip = null;
588
+ },
589
+ gdprLimited: function() {
590
+ this.gdprInfoTooltip = this.gdprInfoTooltip == null ? true : null;
591
+ },
592
+ clearImageResizeCache: function() {
593
+ this.optimizeCacheStatus = 'loading';
594
+ let data = new FormData();
595
+ data.append( 'action', 'cff_clear_image_resize_cache' );
596
+ data.append( 'nonce', this.nonce );
597
+ fetch(this.ajaxHandler, {
598
+ method: "POST",
599
+ credentials: 'same-origin',
600
+ body: data
601
+ })
602
+ .then(response => response.json())
603
+ .then(data => {
604
+ if ( data.success == false ) {
605
+ this.optimizeCacheStatus = 'error';
606
+ return;
607
+ }
608
+ this.optimizeCacheStatus = 'success';
609
+ setTimeout(function() {
610
+ this.optimizeCacheStatus = null;
611
+ }.bind(this), 3000);
612
+ });
613
+ },
614
+ dpaReset: function() {
615
+ this.dpaResetStatus = 'loading';
616
+ let data = new FormData();
617
+ data.append( 'action', 'cff_dpa_reset' );
618
+ data.append( 'nonce', this.nonce );
619
+ fetch(this.ajaxHandler, {
620
+ method: "POST",
621
+ credentials: 'same-origin',
622
+ body: data
623
+ })
624
+ .then(response => response.json())
625
+ .then(data => {
626
+ if ( data.success == false ) {
627
+ this.dpaResetStatus = 'error';
628
+ return;
629
+ }
630
+ this.dpaResetStatus = 'success';
631
+ setTimeout(function() {
632
+ this.dpaResetStatus = null;
633
+ }.bind(this), 3000);
634
+ });
635
+ },
636
+ dpaResetStatusIcon: function() {
637
+ if ( this.dpaResetStatus === null ) {
638
+ return;
639
+ }
640
+ if ( this.dpaResetStatus == 'loading' ) {
641
+ return this.loaderSVG;
642
+ } else if ( this.dpaResetStatus == 'success' ) {
643
+ return this.checkmarkSVG;
644
+ } else if ( this.dpaResetStatus == 'error' ) {
645
+ return `<i class="fa fa-times-circle"></i>`;
646
+ }
647
+ },
648
+ saveChangesIcon: function() {
649
+ if ( this.btnStatus == 'loading' ) {
650
+ return this.loaderSVG;
651
+ } else if ( this.btnStatus == 'success' ) {
652
+ return this.checkmarkSVG;
653
+ } else if ( this.btnStatus == 'error' ) {
654
+ return `<i class="fa fa-times-circle"></i>`;
655
+ }
656
+ },
657
+ importBtnIcon: function() {
658
+ if ( this.uploadStatus === null ) {
659
+ return this.uploadSVG;
660
+ }
661
+ if ( this.uploadStatus == 'loading' ) {
662
+ return this.loaderSVG;
663
+ } else if ( this.uploadStatus == 'success' ) {
664
+ return this.checkmarkSVG;
665
+ } else if ( this.uploadStatus == 'error' ) {
666
+ return `<i class="fa fa-times-circle"></i>`;
667
+ }
668
+ },
669
+ clearCacheIcon: function() {
670
+ if ( this.clearCacheStatus === null ) {
671
+ return this.reloadSVG;
672
+ }
673
+ if ( this.clearCacheStatus == 'loading' ) {
674
+ return this.loaderSVG;
675
+ } else if ( this.clearCacheStatus == 'success' ) {
676
+ return this.checkmarkSVG;
677
+ } else if ( this.clearCacheStatus == 'error' ) {
678
+ return `<i class="fa fa-times-circle"></i>`;
679
+ }
680
+ },
681
+ clearImageResizeCacheIcon: function() {
682
+ if ( this.optimizeCacheStatus === null ) {
683
+ return;
684
+ }
685
+ if ( this.optimizeCacheStatus == 'loading' ) {
686
+ return this.loaderSVG;
687
+ } else if ( this.optimizeCacheStatus == 'success' ) {
688
+ return this.checkmarkSVG;
689
+ } else if ( this.optimizeCacheStatus == 'error' ) {
690
+ return `<i class="fa fa-times-circle"></i>`;
691
+ }
692
+ },
693
+
694
+ /**
695
+ * Toggle Sticky Widget view
696
+ *
697
+ * @since 4.0
698
+ */
699
+ toggleStickyWidget: function() {
700
+ this.stickyWidget = !this.stickyWidget;
701
+ },
702
+
703
+ printUsedInText: function( usedInNumber ){
704
+ if(usedInNumber == 0){
705
+ return this.genericText.sourceNotUsedYet;
706
+ }
707
+ return this.genericText.usedIn + ' ' + usedInNumber + ' ' +(usedInNumber == 1 ? this.genericText.feed : this.genericText.feeds);
708
+ },
709
+
710
+ /**
711
+ * Delete Source Ajax
712
+ *
713
+ * @since 4.0
714
+ */
715
+ deleteSource : function(sourceToDelete){
716
+ var self = this;
717
+ let data = new FormData();
718
+ data.append( 'action', 'cff_feed_saver_manager_delete_source' );
719
+ data.append( 'nonce', this.nonce );
720
+ data.append( 'source_id', sourceToDelete.id);
721
+ fetch(self.ajaxHandler, {
722
+ method: "POST",
723
+ credentials: 'same-origin',
724
+ body: data
725
+ })
726
+ .then(response => response.json())
727
+ .then(data => {
728
+ self.sourcesList = data;
729
+ });
730
+ },
731
+
732
+ /**
733
+ * Check if Value is Empty
734
+ *
735
+ * @since 4.0
736
+ *
737
+ * @return boolean
738
+ */
739
+ checkNotEmpty : function(value){
740
+ return value != null && value.replace(/ /gi,'') != '';
741
+ },
742
+
743
+ /**
744
+ * Activate View
745
+ *
746
+ * @since 4.0
747
+ */
748
+ activateView : function(viewName, sourcePopupType = 'creation', ajaxAction = false){
749
+ var self = this;
750
+ self.viewsActive[viewName] = (self.viewsActive[viewName] == false ) ? true : false;
751
+ if(viewName == 'sourcePopup' && sourcePopupType == 'creationRedirect'){
752
+ setTimeout(function(){
753
+ self.$refs.addSourceRef.processFBConnect()
754
+ },3500);
755
+ }
756
+ },
757
+
758
+ /**
759
+ * Switch & Change Feed Screens
760
+ *
761
+ * @since 4.0
762
+ */
763
+ switchScreen: function(screenType, screenName){
764
+ this.viewsActive[screenType] = screenName;
765
+ },
766
+
767
+ /**
768
+ * Parse JSON
769
+ *
770
+ * @since 4.0
771
+ *
772
+ * @return jsonObject / Boolean
773
+ */
774
+ jsonParse : function(jsonString){
775
+ try {
776
+ return JSON.parse(jsonString);
777
+ } catch(e) {
778
+ return false;
779
+ }
780
+ },
781
+
782
+
783
+ /**
784
+ * Ajax Post Action
785
+ *
786
+ * @since 4.0
787
+ */
788
+ ajaxPost : function(data, callback){
789
+ var self = this;
790
+ data['nonce'] = self.nonce;
791
+ data['settings_page'] = true;
792
+
793
+ self.$http.post(self.ajaxHandler,data).then(callback);
794
+ },
795
+
796
+ /**
797
+ * Check if Object has Nested Property
798
+ *
799
+ * @since 4.0
800
+ *
801
+ * @return boolean
802
+ */
803
+ hasOwnNestedProperty : function(obj,propertyPath) {
804
+ if (!propertyPath){return false;}var properties = propertyPath.split('.');
805
+ for (var i = 0; i < properties.length; i++) {
806
+ var prop = properties[i];
807
+ if (!obj || !obj.hasOwnProperty(prop)) {
808
+ return false;
809
+ } else {
810
+ obj = obj[prop];
811
+ }
812
+ }
813
+ return true;
814
+ },
815
+
816
+ /**
817
+ * Show Tooltip on Hover
818
+ *
819
+ * @since 4.0
820
+ */
821
+ toggleElementTooltip : function(tooltipText, type, align = 'center'){
822
+ var self = this,
823
+ target = window.event.currentTarget,
824
+ tooltip = (target != undefined && target != null) ? document.querySelector('.sb-control-elem-tltp-content') : null;
825
+ if(tooltip != null && type == 'show'){
826
+ self.tooltip.text = tooltipText;
827
+ var position = target.getBoundingClientRect(),
828
+ left = position.left + 7,
829
+ top = position.top - 15;
830
+ tooltip.style.left = left + 'px';
831
+ tooltip.style.top = top + 'px';
832
+ tooltip.style.textAlign = align;
833
+ self.tooltip.hover = true;
834
+ }
835
+ if(type == 'hide'){
836
+ self.tooltip.hover = false;
837
+ }
838
+ },
839
+
840
+ /**
841
+ * Hover Tooltip
842
+ *
843
+ * @since 4.0
844
+ */
845
+ hoverTooltip : function(type){
846
+ this.tooltip.hover = type;
847
+ },
848
+
849
+ /**
850
+ * Open Dialog Box
851
+ *
852
+ * @since 4.0
853
+ */
854
+ openDialogBox : function(type, args = []){
855
+ var self = this,
856
+ heading = self.dialogBoxPopupScreen[type].heading,
857
+ description = self.dialogBoxPopupScreen[type].description;
858
+
859
+ switch (type) {
860
+ case "deleteSource":
861
+ self.sourceToDelete = args;
862
+ heading = heading.replace("#", self.sourceToDelete.username);
863
+ break;
864
+ }
865
+ self.dialogBox = {
866
+ active : true,
867
+ type : type,
868
+ heading : heading,
869
+ description : description
870
+ };
871
+ },
872
+
873
+
874
+ /**
875
+ * Confirm Dialog Box Actions
876
+ *
877
+ * @since 4.0
878
+ */
879
+ confirmDialogAction : function(){
880
+ var self = this;
881
+ switch (self.dialogBox.type) {
882
+ case 'deleteSource':
883
+ self.deleteSource(self.sourceToDelete);
884
+ break;
885
+ }
886
+ },
887
+
888
+ /**
889
+ * Display Feed Sources Settings
890
+ *
891
+ * @since 4.0
892
+ *
893
+ * @param {object} source
894
+ * @param {int} sourceIndex
895
+ */
896
+ displayFeedSettings: function(source, sourceIndex) {
897
+ this.expandedFeedID = sourceIndex + 1;
898
+ },
899
+
900
+ /**
901
+ * Hide Feed Sources Settings
902
+ *
903
+ * @since 4.0
904
+ *
905
+ * @param {object} source
906
+ * @param {int} sourceIndex
907
+ */
908
+ hideFeedSettings: function() {
909
+ this.expandedFeedID = null;
910
+ },
911
+
912
+ /**
913
+ * Copy text to clipboard
914
+ *
915
+ * @since 4.0
916
+ */
917
+ copyToClipBoard : function(value){
918
+ var self = this;
919
+ const el = document.createElement('textarea');
920
+ el.className = 'cff-fb-cp-clpboard';
921
+ el.value = value;
922
+ document.body.appendChild(el);
923
+ el.select();
924
+ document.execCommand('copy');
925
+ document.body.removeChild(el);
926
+ self.notificationElement = {
927
+ type : 'success',
928
+ text : this.genericText.copiedClipboard,
929
+ shown : "shown"
930
+ };
931
+ setTimeout(function(){
932
+ self.notificationElement.shown = "hidden";
933
+ }, 3000);
934
+ },
935
+
936
+
937
+ /**
938
+ * View Source Instances
939
+ *
940
+ * @since 4.0
941
+ */
942
+ viewSourceInstances : function(source){
943
+ var self = this;
944
+ self.viewsActive.instanceSourceActive = source;
945
+ },
946
+ }
947
+ });
948
+
admin/assets/js/support.js CHANGED
@@ -1,122 +1,122 @@
1
- var support_data = {
2
- genericText: cff_support.genericText,
3
- articles: cff_support.articles,
4
- links: cff_support.links,
5
- system_info: cff_support.system_info,
6
- system_info_n: cff_support.system_info_n,
7
- exportFeed: 'none',
8
- stickyWidget: false,
9
- feeds: cff_support.feeds,
10
- supportUrl: cff_support.supportUrl,
11
- socialWallActivated: cff_support.socialWallActivated,
12
- socialWallLinks: cff_support.socialWallLinks,
13
- siteSearchUrl: cff_support.siteSearchUrl,
14
- siteSearchUrlWithArgs: null,
15
- searchKeywords: null,
16
- buttons: cff_support.buttons,
17
- links: cff_support.links,
18
- supportPageUrl: cff_support.supportPageUrl,
19
- systemInfoBtnStatus: 'collapsed',
20
- copyBtnStatus: null,
21
- ajax_handler: cff_support.ajax_handler,
22
- nonce: cff_support.nonce,
23
- icons: cff_support.icons,
24
- images: cff_support.images,
25
- svgIcons : cff_support.svgIcons,
26
- notificationElement : {
27
- type : 'success', // success, error, warning, message
28
- text : '',
29
- shown : null
30
- }
31
- }
32
-
33
- var cffsupport = new Vue({
34
- el: "#cff-support",
35
- http: {
36
- emulateJSON: true,
37
- emulateHTTP: true
38
- },
39
- data: support_data,
40
- methods: {
41
- copySystemInfo: function() {
42
- let self = this;
43
- const el = document.createElement('textarea');
44
- el.className = 'cff-fb-cp-clpboard';
45
- el.value = self.system_info_n;
46
- document.body.appendChild(el);
47
- el.select();
48
- document.execCommand('copy');
49
- document.body.removeChild(el);
50
- this.notificationElement = {
51
- type : 'success',
52
- text : this.genericText.copiedToClipboard,
53
- shown : "shown"
54
- };
55
-
56
- setTimeout(function() {
57
- this.notificationElement.shown = "hidden";
58
- }.bind(self), 3000);
59
- },
60
- expandSystemInfo: function() {
61
- this.systemInfoBtnStatus = ( this.systemInfoBtnStatus == 'collapsed' ) ? 'expanded' : 'collapsed';
62
- },
63
- expandBtnText: function() {
64
- if ( this.systemInfoBtnStatus == 'collapsed' ) {
65
- return this.buttons.expand;
66
- } else if ( this.systemInfoBtnStatus == 'expanded' ) {
67
- return this.buttons.collapse;
68
- }
69
- },
70
- exportFeedSettings: function() {
71
- // return if no feed is selected
72
- if ( this.exportFeed === 'none' ) {
73
- return;
74
- }
75
-
76
- let url = this.ajax_handler + '?action=cff_export_settings_json&feed_id=' + + this.exportFeed + '&nonce=' + this.nonce;
77
- window.location = url;
78
- },
79
- searchDoc: function() {
80
- let self = this;
81
- let searchInput = document.getElementById('cff-search-doc-input');
82
- searchInput.addEventListener('keyup', function ( event ) {
83
- let url = new URL( self.siteSearchUrl );
84
- let search_params = url.searchParams;
85
- if ( self.searchKeywords ) {
86
- search_params.set('search', self.searchKeywords);
87
- }
88
- search_params.set('plugin', 'facebook');
89
- url.search = search_params.toString();
90
- self.siteSearchUrlWithArgs = url.toString();
91
-
92
- if ( event.key === 'Enter' ) {
93
- window.open( self.siteSearchUrlWithArgs, '_blank');
94
- }
95
- })
96
- },
97
- searchDocStrings: function() {
98
- let self = this;
99
- let url = new URL( this.siteSearchUrl );
100
- let search_params = url.searchParams;
101
- setTimeout(function() {
102
- search_params.set('search', self.searchKeywords);
103
- search_params.set('plugin', 'facebook');
104
- url.search = search_params.toString();
105
- self.siteSearchUrlWithArgs = url.toString();
106
- }, 10);
107
- },
108
- goToSearchDocumentation: function() {
109
- if ( this.searchKeywords !== null && this.siteSearchUrlWithArgs !== null ) {
110
- window.open( this.siteSearchUrlWithArgs, '_blank');
111
- }
112
- },
113
- /**
114
- * Toggle Sticky Widget view
115
- *
116
- * @since 4.0
117
- */
118
- toggleStickyWidget: function() {
119
- this.stickyWidget = !this.stickyWidget;
120
- },
121
- },
122
  })
1
+ var support_data = {
2
+ genericText: cff_support.genericText,
3
+ articles: cff_support.articles,
4
+ links: cff_support.links,
5
+ system_info: cff_support.system_info,
6
+ system_info_n: cff_support.system_info_n,
7
+ exportFeed: 'none',
8
+ stickyWidget: false,
9
+ feeds: cff_support.feeds,
10
+ supportUrl: cff_support.supportUrl,
11
+ socialWallActivated: cff_support.socialWallActivated,
12
+ socialWallLinks: cff_support.socialWallLinks,
13
+ siteSearchUrl: cff_support.siteSearchUrl,
14
+ siteSearchUrlWithArgs: null,
15
+ searchKeywords: null,
16
+ buttons: cff_support.buttons,
17
+ links: cff_support.links,
18
+ supportPageUrl: cff_support.supportPageUrl,
19
+ systemInfoBtnStatus: 'collapsed',
20
+ copyBtnStatus: null,
21
+ ajax_handler: cff_support.ajax_handler,
22
+ nonce: cff_support.nonce,
23
+ icons: cff_support.icons,
24
+ images: cff_support.images,
25
+ svgIcons : cff_support.svgIcons,
26
+ notificationElement : {
27
+ type : 'success', // success, error, warning, message
28
+ text : '',
29
+ shown : null
30
+ }
31
+ }
32
+
33
+ var cffsupport = new Vue({
34
+ el: "#cff-support",
35
+ http: {
36
+ emulateJSON: true,
37
+ emulateHTTP: true
38
+ },
39
+ data: support_data,
40
+ methods: {
41
+ copySystemInfo: function() {
42
+ let self = this;
43
+ const el = document.createElement('textarea');
44
+ el.className = 'cff-fb-cp-clpboard';
45
+ el.value = self.system_info_n;
46
+ document.body.appendChild(el);
47
+ el.select();
48
+ document.execCommand('copy');
49
+ document.body.removeChild(el);
50
+ this.notificationElement = {
51
+ type : 'success',
52
+ text : this.genericText.copiedToClipboard,
53
+ shown : "shown"
54
+ };
55
+
56
+ setTimeout(function() {
57
+ this.notificationElement.shown = "hidden";
58
+ }.bind(self), 3000);
59
+ },
60
+ expandSystemInfo: function() {
61
+ this.systemInfoBtnStatus = ( this.systemInfoBtnStatus == 'collapsed' ) ? 'expanded' : 'collapsed';
62
+ },
63
+ expandBtnText: function() {
64
+ if ( this.systemInfoBtnStatus == 'collapsed' ) {
65
+ return this.buttons.expand;
66
+ } else if ( this.systemInfoBtnStatus == 'expanded' ) {
67
+ return this.buttons.collapse;
68
+ }
69
+ },
70
+ exportFeedSettings: function() {
71
+ // return if no feed is selected
72
+ if ( this.exportFeed === 'none' ) {
73
+ return;
74
+ }
75
+
76
+ let url = this.ajax_handler + '?action=cff_export_settings_json&feed_id=' + + this.exportFeed + '&nonce=' + this.nonce;
77
+ window.location = url;
78
+ },
79
+ searchDoc: function() {
80
+ let self = this;
81
+ let searchInput = document.getElementById('cff-search-doc-input');
82
+ searchInput.addEventListener('keyup', function ( event ) {
83
+ let url = new URL( self.siteSearchUrl );
84
+ let search_params = url.searchParams;
85
+ if ( self.searchKeywords ) {
86
+ search_params.set('search', self.searchKeywords);
87
+ }
88
+ search_params.set('plugin', 'facebook');
89
+ url.search = search_params.toString();
90
+ self.siteSearchUrlWithArgs = url.toString();
91
+
92
+ if ( event.key === 'Enter' ) {
93
+ window.open( self.siteSearchUrlWithArgs, '_blank');
94
+ }
95
+ })
96
+ },
97
+ searchDocStrings: function() {
98
+ let self = this;
99
+ let url = new URL( this.siteSearchUrl );
100
+ let search_params = url.searchParams;
101
+ setTimeout(function() {
102
+ search_params.set('search', self.searchKeywords);
103
+ search_params.set('plugin', 'facebook');
104
+ url.search = search_params.toString();
105
+ self.siteSearchUrlWithArgs = url.toString();
106
+ }, 10);
107
+ },
108
+ goToSearchDocumentation: function() {
109
+ if ( this.searchKeywords !== null && this.siteSearchUrlWithArgs !== null ) {
110
+ window.open( this.siteSearchUrlWithArgs, '_blank');
111
+ }
112
+ },
113
+ /**
114
+ * Toggle Sticky Widget view
115
+ *
116
+ * @since 4.0
117
+ */
118
+ toggleStickyWidget: function() {
119
+ this.stickyWidget = !this.stickyWidget;
120
+ },
121
+ },
122
  })
admin/builder/assets/css/builder.css CHANGED
@@ -1,4250 +1,4250 @@
1
- body{
2
- background: #red;
3
- --cl-orange: #E34F0E;
4
- --cl-dark:#2C324C;
5
- --error-red: #D72C2C;
6
- --customizer-blue: #0096CC;
7
- --dark-blue: #2A65DB;
8
- }
9
- .sb-tr-1{-webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out;}
10
- .sb-tr-2{-webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
11
- .sb-tr-3{-webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
12
- .sb-tr-4{-webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}
13
- .sb-tr-5{-webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
14
- .sb-tr-6{-webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out;}
15
- .sb-tr-7{-webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out;}
16
- .sb-tr-8{-webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out;}
17
- .sb-tr-9{-webkit-transition: all .9s ease-in-out; transition: all .9s ease-in-out;}
18
- .sb-tr-10{-webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
19
- .cff-bg-1{
20
- background: #2A65DB;
21
- }
22
-
23
- /****
24
- Buttons
25
- */
26
- .sb-button {
27
- display: flex;
28
- flex-direction: row;
29
- justify-content: center;
30
- align-items: center;
31
- border-radius: 2px;
32
- cursor: pointer;
33
- outline: none;
34
- box-shadow: none;
35
- border: none;
36
- -webkit-transition: all .15s ease-in-out;
37
- transition: all .15s ease-in-out;
38
- }
39
- .sb-button-standard{
40
- position: relative;
41
- font-style: normal;
42
- font-weight: 600;
43
- font-size: 14px;
44
- padding: 10px 20px 10px 39px;
45
- line-height: 16px;
46
- }
47
- .sb-button-standard svg {
48
- width: 16px;
49
- height: 16px;
50
- position: absolute;
51
- left: 13px;
52
- right: auto;
53
- top: 10px;
54
- bottom: auto;
55
- }
56
- .sb-button-small.sb-button-left-icon {
57
- padding-left: 32px;
58
- }
59
- .sb-button-small.sb-button-right-icon {
60
- padding-right: 32px;
61
- }
62
- .sb-button-small.sb-button-left-icon svg {
63
- position: absolute;
64
- left: 13px;
65
- }
66
- .sb-button-small.sb-button-right-icon svg {
67
- position: absolute;
68
- right: 13px;
69
- }
70
- .sb-button-standard.sb-button-right-icon {
71
- padding: 10px 39px 10px 20px;
72
- }
73
- .sb-button-standard.sb-button-right-icon svg {
74
- right: 13px;
75
- left: auto;
76
- }
77
-
78
- .sb-button-small {
79
- position: relative;
80
- font-style: normal;
81
- font-weight: 600;
82
- font-size: 12px;
83
- padding: 6px 12px;
84
- line-height: 160%;
85
- }
86
-
87
- .sb-button-no-border {
88
- border-radius: 0 !important;
89
- border: none !important;
90
- }
91
-
92
- /*orange*/
93
- .cff-btn-orange{
94
- background: #E34F0E!important;
95
- color: #fff!important;
96
- }
97
- .cff-btn-orange:hover{
98
- background: #F37036!important;
99
- color: #fff!important;
100
- }
101
- .cff-btn-orange:focus{
102
- background: #B8400B!important;
103
- color: #fff!important;
104
- }
105
-
106
- /*red*/
107
- .cff-btn-red{
108
- background: #D72C2C!important;
109
- color: #fff!important;
110
- }
111
- .cff-btn-red:hover{
112
- background: #DF5757!important;
113
- color: #fff!important;
114
- }
115
- .cff-btn-red:focus{
116
- background: #841919!important;
117
- color: #fff!important;
118
- }
119
-
120
- /*red*/
121
- .cff-btn-blue{
122
- background: #0068A0!important;
123
- color: #fff!important;
124
- }
125
- .cff-btn-blue:hover{
126
- background: #0096CC!important;
127
- color: #fff!important;
128
- }
129
- .cff-btn-blue:focus{
130
- background: #004D77!important;
131
- color: #fff!important;
132
- }
133
-
134
- /*grey*/
135
- .cff-btn-grey{
136
- background: #F3F4F5!important;
137
- color: #141B38!important;
138
- border: 1px solid #D0D1D7!important;
139
- }
140
- .cff-btn-grey:hover{
141
- background: #fff!important;
142
- color: #141B38!important;
143
- border: 1px solid #DCDDE1!important;
144
- }
145
- .cff-btn-grey:focus{
146
- background: #E8E8EB!important;
147
- color: #141B38!important;
148
- border: 1px solid #D0D1D7!important;
149
- }
150
-
151
- /*dark*/
152
- .cff-btn-dark{
153
- background: #2C324C!important;
154
- color: #fff!important;
155
- }
156
- .cff-btn-dark:hover{
157
- background: #434960!important;
158
- color: #fff!important;
159
- }
160
- .cff-btn-dark:focus{
161
- background: #141B38!important;
162
- color: #fff!important;
163
- }
164
-
165
- .sb-dark-hover:hover svg,
166
- .sb-dark-hover:hover path{
167
- fill: #141B38;
168
- }
169
-
170
- /*disabled*/
171
- .cff-btn-orange[data-active="false"],
172
- .cff-btn-blue[data-active="false"],
173
- .cff-btn-red[data-active="false"],
174
- .cff-btn-grey[data-active="false"],
175
- .cff-btn-dark[data-active="false"]{
176
- background: #E8E8EB !important;
177
- color: #8C8F9A !important;
178
- }
179
-
180
- /* Text */
181
-
182
- #cff-builder-app h1 {
183
- font-style: normal;
184
- font-weight: 600;
185
- font-size: 36px;
186
- line-height: 125%;
187
- color: #141B38;
188
- margin: 0;
189
- letter-spacing: 0;
190
- }
191
- #cff-builder-app h2 {
192
- font-style: normal;
193
- font-weight: 600;
194
- font-size: 32px;
195
- line-height: 125%;
196
- margin: 0;
197
- letter-spacing: 0;
198
- }
199
- #cff-builder-app h3 {
200
- font-style: normal;
201
- font-weight: 600;
202
- font-size: 24px;
203
- line-height: 120%;
204
- margin: 0 0 4px 0;
205
- letter-spacing: 0;
206
- }
207
-
208
- #cff-builder-app h4 {
209
- font-style: normal;
210
- font-weight: 600;
211
- font-size: 18px;
212
- line-height: 140%;
213
- margin: 0 0 4px 0;
214
- letter-spacing: 0;
215
- }
216
-
217
- #cff-builder-app .sb-small-p,
218
- #cff-builder-app .sb-standard-p{
219
- font-style: normal;
220
- font-weight: normal;
221
- font-size: 14px;
222
- line-height: 160%;
223
- color: #8C8F9A;
224
- margin: 0;
225
- }
226
-
227
- #cff-builder-app .sb-standard-p{
228
- font-size: 16px;
229
- color: #141B38;
230
- }
231
- #cff-builder-app .cff-fb-source-inp::placeholder {
232
- color: #8C8F9A;
233
- font-size: 14px;
234
- font-weight: normal;
235
- }
236
- #cff-builder-app .sb-small-text {
237
- font-size: 12px;
238
- }
239
- #cff-builder-app .sb-bold {
240
- font-weight: 600;
241
- }
242
- #cff-builder-app .sb-dark-text {
243
- color: #141B38;
244
- }
245
- #cff-builder-app .cff-btn-orange .sb-small-p,
246
- #cff-builder-app .cff-btn-blue .sb-small-p,
247
- #cff-builder-app .cff-btn-red .sb-small-p,
248
- #cff-builder-app .cff-btn-dark .sb-small-p{
249
- color: #fff;
250
- }
251
-
252
- #cff-builder-app .sb-caption {
253
- font-style: normal;
254
- font-weight: normal;
255
- font-size: 13px;
256
- line-height: 150%;
257
- color: #141B38;
258
- }
259
- #cff-builder-app .sb-caption.sb-caption-lighter {
260
- color: #5F6368;
261
- }
262
-
263
- #cff-builder-app .sb-small {
264
- font-style: normal;
265
- font-weight: bold;
266
- font-size: 10px;
267
- line-height: 160%;
268
- letter-spacing: 0.08em;
269
- text-transform: uppercase;
270
- color: #141B38;
271
- }
272
-
273
- #cff-builder-app .sb-lighter {
274
- color: #434960;
275
- }
276
- #cff-builder-app .sb-lightest {
277
- color: #74777D;
278
- }
279
-
280
- /* Positioning */
281
- .sb-icon-label {
282
- display: flex;
283
- flex-direction: row;
284
- justify-content: flex-start;
285
- align-items: center;
286
- }
287
- /* Misc Stylings */
288
- .sb-flex-center {
289
- display: -ms-flexbox;
290
- display: -webkit-flex;
291
- display: flex;
292
-
293
- -ms-flex-align: center;
294
- -webkit-align-items: center;
295
- -webkit-box-align: center;
296
-
297
- align-items: center;
298
- }
299
- .sb-box-shadow {
300
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
301
- }
302
- #cff-builder-app .sb-icon-small svg {
303
- height: 10px;
304
- }
305
-
306
- /*
307
- Social Links
308
- */
309
- .cff-cl-facebook, .cff-clhv-facebook:hover{
310
- color: #006BFA!important;
311
- }
312
- .cff-bg-facebook, .cff-bghv-facebook:hover{
313
- background: #006BFA!important;
314
- }
315
-
316
- .cff-cl-instagram, .cff-clhv-instagram:hover{
317
- color: #BA03A7!important;
318
- }
319
- .cff-bg-instagram, .cff-bghv-instagram:hover{
320
- background: #BA03A7!important;
321
- }
322
-
323
- .cff-cl-twitter, .cff-clhv-twitter:hover{
324
- color: #1B90EF!important;
325
- }
326
- .cff-bg-twitter, .cff-bghv-twitter:hover{
327
- background: #1B90EF!important;
328
- }
329
-
330
- .cff-cl-youtube, .cff-clhv-youtube:hover{
331
- color: #EB2121!important;
332
- }
333
- .cff-bg-youtube, .cff-bghv-youtube:hover{
334
- background: #EB2121!important;
335
- }
336
-
337
- .cff-cl-linkedin, .cff-clhv-linkedin:hover{
338
- color: #007bb6!important;
339
- }
340
- .cff-bg-linkedin, .cff-bghv-linkedin:hover{
341
- background: #007bb6!important;
342
- }
343
-
344
- .cff-cl-mail, .cff-clhv-mail:hover{
345
- color: #666!important;
346
- }
347
- .cff-bg-mail, .cff-bghv-mail:hover{
348
- background: #666!important;
349
- }
350
-
351
- #cff-builder-app{
352
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;;
353
- visibility: hidden;
354
- opacity: 0;
355
- }
356
- #cff-builder-app[data-app-loaded="true"]{
357
- visibility: visible;
358
- opacity: 1;
359
- }
360
-
361
- .cff-builder-app a, .cff-builder-app a:focus{
362
- text-decoration: none;
363
- /*color: inherit;*/
364
- outline: none;
365
- }
366
- .cff-fb-btn{
367
- display: flex;
368
- flex-direction: row;
369
- justify-content: center;
370
- align-items: center;
371
- padding: 9px 38px;
372
- font-style: normal;
373
- font-weight: 500;
374
- font-size: 14px;
375
- line-height: 17px;
376
- border-radius: 2px;
377
- cursor: pointer;
378
- color: #fff;
379
- outline: none;
380
- box-shadow: none;
381
- border: none;;
382
- }
383
- .cff-fb-btn:focus{
384
- box-shadow: none;
385
- }
386
- .cff-fb-fs{
387
- width: 100%;
388
- position: relative;
389
- float: left;
390
- box-sizing: border-box;
391
- }
392
- .cff-fs-a{
393
- width: 100%;
394
- height: 100%;
395
- display: block;
396
- position: absolute;
397
- left: 0;
398
- top: 0;
399
- z-index: 1;
400
- }
401
- .sb-btn:focus{
402
- outline: none;
403
- }
404
- #wpcontent,
405
- .facebook-feed_page_cff-feed-builder #wpcontent{
406
- padding-left: 0px;
407
- }
408
- #wpfooter{
409
- display: none;
410
- }
411
- #wpbody-content{
412
- padding-bottom: 0px;
413
- }
414
- .cff-fb-wrapper{
415
- max-width: 92%;
416
- position: relative;
417
- margin: auto;
418
- color: #141B38;
419
- }
420
- .cff-fb-fs-boss{
421
- position: fixed;
422
- height: 100vh;
423
- width: 100%;
424
- left: 0;
425
- top: 0;
426
- bottom: 0;
427
- right: 0;
428
- background: rgba(0,0,0,.4);
429
- z-index: 9989;
430
- }
431
-
432
-
433
- /*
434
- Header
435
- */
436
- .cff-fb-create-ctn{
437
- margin-top: 104px;
438
- padding: 0 54px;
439
- box-sizing: border-box;
440
- width: 100%;
441
- }
442
- .cff-fb-header{
443
- height: 64px;
444
- position: absolute;
445
- display: flex;
446
- flex-direction: row;
447
- justify-content: space-between;
448
- align-items: center;
449
- background: #fff;
450
- padding: 0px 52px;
451
- z-index: 99;
452
- }
453
- .cff-fb-header-left {
454
- display: flex;
455
- }
456
- .cff-fb-header-left .sb-social-wall-link-wrap {
457
- margin-left: 30px;
458
- }
459
- .cff-fb-hd-logo {
460
- display: flex;
461
- vertical-align: middle;
462
- align-items: center;
463
- gap: 5px;
464
- }
465
- .cff-fb-hd-logo .sb-logo-letters-wrap {
466
- transform: translate(0px, -2px);
467
- }
468
- .cff-fb-hd-logo .breadcrumb-title {
469
- font-size: 14px;
470
- font-weight: 400;
471
- line-height: 22px;
472
- letter-spacing: 0em;
473
- margin-left: 4px;
474
- }
475
- .cff-csz-header.cff-fb-header{
476
- position: fixed!important;
477
- padding: 0 20px;
478
- }
479
- .cff-csz-header-insider{
480
- width: calc(100% - 160px);
481
- display: flex;
482
- flex-direction: row;
483
- justify-content: space-between;
484
- align-items: center;
485
- height: 52px;
486
- }
487
-
488
- @media all and (max-width: 960px) {
489
- .cff-csz-header-insider{
490
- width: calc(100% - 36px);
491
- }
492
- .sb-customizer-ctn .sb-customizer-sidebar{
493
- left: 36px;
494
- }
495
- }
496
-
497
- .cff-fb-hd-btn{
498
- cursor: pointer;
499
- display: flex;
500
- flex-direction: row;
501
- justify-content: center;
502
- align-items: center;
503
- position: relative;
504
- border: 1px solid;
505
- -webkit-transition: all .15s ease-in-out;
506
- transition: all .15s ease-in-out;
507
- }
508
- .cff-fb-hd-btn i{
509
- margin: 0px 5px;
510
- }
511
- .cff-fb-full-wrapper {
512
- padding: 0 53px;
513
- padding-top: 82px;
514
- padding-bottom: 60px;
515
- }
516
- .cff-csz-hd-actions{
517
- display: flex;
518
- justify-content: center;
519
- align-items: center;
520
- }
521
- .cff-csz-hd-actions > button{
522
- margin-left: 10px;
523
- }
524
-
525
- .cff-csz-btn-embd{
526
- color: #fff;
527
- background: var(--cl-dark);
528
- border-color: var(--cl-dark);
529
- }
530
- .cff-csz-btn-save{
531
- color: #fff;
532
- background: var(--cl-orange);
533
- border-color: var(--cl-orange);
534
- }
535
- .cff-csz-hd-name{
536
- display: flex;
537
- justify-content: center;
538
- align-items: center;
539
- height: 45px;
540
- }
541
- .cff-csz-hd-name strong{
542
- font-size: 18px;
543
- }
544
- .cff-csz-hd-name[data-edit="true"] strong{
545
- display: none;
546
- }
547
- .cff-csz-hd-name input[type="text"]{
548
- border-radius: 0px;
549
- border: 0px;
550
- background: #CCE7FF;
551
- outline: none;
552
- font-size: 18px;
553
- font-weight: 700;
554
- display: none;
555
- }
556
- .cff-csz-hd-name[data-edit="true"] input[type="text"]{
557
- display: block;
558
- }
559
- .cff-csz-hd-name input[type="text"]:focus{
560
- outline: none!important;
561
- border: 0px!important;
562
- box-shadow: none!important;
563
- }
564
-
565
-
566
- .cff-csz-name-ed-btn{
567
- width: 22px;
568
- height: 22px;
569
- cursor: pointer;
570
- margin: 0 10px;
571
- background: #E8E8EB;
572
- border: 1px solid #E8E8EB;
573
- outline: none;
574
- }
575
- .cff-csz-name-ed-btn:focus,
576
- .cff-csz-name-ed-btn:hover{
577
- outline: none;
578
- background-color: #fff;
579
- }
580
- .cff-csz-name-ed-btn svg{
581
- width: 11px;
582
- fill: #141B38;
583
- float: left;
584
- margin-left: -1px;
585
- }
586
-
587
-
588
- /*
589
- Welcome Screen Empty State
590
- */
591
- .cff-fb-wlcm-header{
592
- display: flex;
593
- align-items: center;
594
- margin-bottom: 28px;
595
- margin-top: 23px;
596
- }
597
- #cff-fb-full-wrapper .cff-fb-wlcm-header {
598
- margin-bottom: 34px;
599
- }
600
-
601
- .cff-fb-wlcm-header h3,
602
- .cff-fb-create-ctn h3{
603
- font-weight: 600;
604
- font-size: 32px;
605
- line-height: 40px;
606
- padding: 0;
607
- margin: 0;
608
- float: left;
609
- }
610
- .cff-fb-btn-new{
611
- background: var(--cl-orange);
612
- position: relative;
613
- float: left;
614
- margin-left: 20px;
615
- font-size: 12px;
616
- padding: 8px 12px 8px 30px;
617
- }
618
- .cff-fb-btn-new svg{
619
- width: 10px;
620
- height: 10px;
621
- position: absolute;
622
- left: 12px;
623
- }
624
-
625
- .cff-fb-inf-cnt{
626
- position: relative;
627
- background: #fff;
628
- padding: 27px;
629
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
630
- border-radius: 2px;
631
- max-width: 100%;
632
- box-sizing: border-box;
633
- }
634
- .cff-fb-inf-num{
635
- width: 30px;
636
- height: 30px;
637
- position: relative;
638
- float: left;
639
- display: flex;
640
- justify-content: center;
641
- align-items: center;
642
- font-size: 12px;
643
- font-weight: 600;
644
- color: #141B38;
645
- margin-right: 20px;
646
-
647
- }
648
- .cff-fb-inf-num span{
649
- z-index: 1;
650
- }
651
- .cff-fb-inf-num:before{
652
- content: '';
653
- position: absolute;
654
- width: 100%;
655
- height: 100%;
656
- background: #D8DADD;
657
- border-radius: 50%;
658
- }
659
- .cff-fb-inf-txt{
660
- float: left;
661
- }
662
- /*.cff-fb-inf-txt strong{
663
- display: block;
664
- font-size: 20px;
665
- line-height: 1em;
666
- font-weight: bold;
667
- margin-bottom: 8px;
668
- }*/
669
- .cff-fb-inf-txt span{
670
- display: block;
671
- font-size: 16px;
672
- color: #5F6368;
673
- line-height: 1.5em;
674
- }
675
- .cff-fb-wlcm-inf-1 {
676
- padding-left: 297px;
677
- }
678
- .cff-fb-wlcm-inf-1 .cff-fb-inf-svg{
679
- position: absolute;
680
- left: 191px;
681
- top: 32px;
682
- /*float: left;
683
- margin-top: 30px;
684
- margin-left: 230px;
685
- position: relative;
686
- margin-right: 25px;*/
687
- }
688
- .cff-fb-wlcm-inf-1 .cff-fb-inf-svg svg{
689
- margin-top: -45px;
690
- }
691
- .sb-head {
692
- position: absolute;
693
- top: -2px;
694
- left:-4px;
695
- }
696
- .cff-fb-wlcm-inf-1 .cff-fb-inf-cnt{
697
- float: left;
698
- width: 523px;
699
- margin-bottom: 24px;
700
- height: 120px;
701
- }
702
- .cff-fb-wlcm-inf-2{
703
- display: flex;
704
- justify-content: space-between;
705
- padding-left: 152px;
706
- }
707
- .cff-fb-wlcm-inf-2 .cff-fb-inf-cnt{
708
- float: left;
709
- width: 590px;
710
- margin-bottom: 29px;
711
- height: 120px;
712
- display: flex;
713
- align-items: center;
714
- }
715
- .cff-fb-wlcm-inf-2 .cff-fb-inf-img{
716
- position: absolute;
717
- right: 15px;
718
- top: -13px;
719
- width: 121px;
720
- }
721
-
722
- .cff-fb-wlcm-inf-3{
723
- display: flex;
724
- justify-content: flex-start;
725
- align-items: center;
726
- padding-left: 297px;
727
- }
728
- .cff-fb-wlcm-inf-3 .cff-fb-inf-cnt{
729
- float: left;
730
- width: 620px;
731
- height: 130px;
732
- display: flex;
733
- justify-content: center;
734
- align-items: center;
735
- }
736
- .cff-fb-wlcm-inf-3 .cff-fb-inf-img{
737
- float: left;
738
- left: 10px;
739
- top: -12px;
740
- position: absolute;
741
- width: 121px;
742
- }
743
- .cff-fb-inf-img img {
744
- max-width: 100%;
745
- }
746
- .cff-fb-wlcm-inf-2 .cff-fb-inf-num, .cff-fb-wlcm-inf-3 .cff-fb-inf-num{
747
- margin-top: -20px;
748
- }
749
- .cff-fb-types-ctn, .cff-fb-slctsrc-ctn, .cff-fb-section-wh{
750
- background: #fff;
751
- border: 1px solid #E7E7E9;
752
- }
753
- .cff-fb-wrapper h3, .cff-fb-section-wh h3{
754
- font-size: 32px;
755
- line-height: 39px;
756
- font-weight: 600;
757
- }
758
- .cff-fb-create-ctn h3{
759
- margin-bottom: 30px;
760
- }
761
- .cff-fb-types h4, .cff-fb-section-wh h4 {
762
- font-size:20px;
763
- line-height: 24px;
764
- font-weight: 600;
765
- }
766
- #cff-builder-app .cff-fb-create-ctn h4,
767
- #cff-builder-app .cff-fb-feedtypes-pp-ctn h4{
768
- margin-bottom: 9px;
769
- }
770
- #cff-builder-app .cff-fb-feedtypes-pp-ctn .cff-fb-types {
771
- margin-top: 20px;
772
- }
773
- #cff-builder-app .cff-fb-adv-types .cff-adv-types-heading{
774
- font-style: normal;
775
- font-weight: bold;
776
- font-size: 12px;
777
- line-height: 160%;
778
- letter-spacing: 0.05em;
779
- text-transform: uppercase;
780
- color: #8C8F9A;
781
- }
782
- .cff-fb-types, .cff-fb-adv-types{
783
- padding: 22px 35px 0;
784
- }
785
- .cff-fb-adv-types {
786
- padding-top: 0;
787
- }
788
- .cff-fb-types-list{
789
- display: grid;
790
- grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%;
791
- grid-column-gap: 1%;
792
- margin-bottom: 31px;
793
- }
794
- /*
795
- .cff-fb-adv-types .cff-fb-types-list{
796
- grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
797
- }
798
- */
799
- .cff-fb-heading {
800
- margin-bottom: 24px;
801
- width: 100%;
802
- float: left;
803
- }
804
- .cff-fb-heading h1{
805
- float: left;
806
- }
807
- .cff-fb-heading .cff-fb-btn{
808
- float: right!important;
809
- }
810
-
811
- .cff-fb-adv-types .cff-fb-types-list{
812
- margin-bottom: 31px;
813
- }
814
- .cff-fb-type-el{
815
- display: flex;
816
- flex-direction: column;
817
- align-items: flex-start;
818
- padding: 0;
819
- position: relative;
820
- background: #fff;
821
- border: 1px solid #F1F1F1;
822
- border-radius: 3px;
823
- cursor: pointer;
824
- box-sizing: border-box;
825
- }
826
- .cff-fb-type-el:hover,
827
- .cff-fb-adv-types .cff-fb-type-el:hover{
828
- border: 1px solid #F6966B;
829
- }
830
- .cff-fb-adv-types .cff-fb-type-el{
831
- border: 1px solid #FFDBBA;
832
- }
833
- .sb-control-feedtype-ctn .cff-fb-type-el{
834
- border: 2px solid #E8E8EB;
835
- margin-bottom: 7px;
836
- }
837
- .sb-control-feedtype-ctn .cff-fb-type-el-info{
838
- margin-top: 14px
839
- }
840
- .cff-fb-type-el[data-active="true"],
841
- .cff-fb-adv-types .cff-fb-type-el[data-active="true"]{
842
- border: 2px solid var(--cl-orange);
843
- }
844
- .cff-fb-type-el[data-active="true"]:after{
845
- content: '';
846
- position: absolute;
847
- width: 10px;
848
- height: 4px;
849
- border-left: 2px solid #fff;
850
- border-bottom: 2px solid #fff;
851
- z-index: 3;
852
- right: 5px;
853
- top: 7px;
854
- -webkit-transform: rotate(-45deg);
855
- transform: rotate(-45deg);
856
- }
857
- .cff-fb-type-el[data-active="true"]:before{
858
- content: '';
859
- position: absolute;
860
- width: 24px;
861
- height: 24px;
862
- right: 0px;
863
- top: 0px;
864
- z-index: 2;
865
- background: var(--cl-orange)
866
- }
867
- .cff-fb-type-el-img{
868
- display: flex;
869
- flex-direction: column;
870
- justify-content: center;
871
- align-items: center;
872
- background: #F1F1F1;
873
- border: 2px solid #F1F1F1;
874
- border-bottom: 1px solid #fff;
875
- }
876
- .cff-fb-type-el[data-active="true"] .cff-fb-type-el-img{
877
- border: 1px solid #F1F1F1;
878
- border-bottom: 2px solid #fff;
879
- }
880
- .cff-fb-type-el-img svg {
881
- max-width: 100%;
882
- }
883
- .cff-fb-adv-types .cff-fb-type-el-img{
884
- background: #FCF4EF;
885
- }
886
- .cff-fb-type-el-info{
887
- display: flex;
888
- flex-direction: column;
889
- /*justify-content: center;*/
890
- align-items: center;
891
- text-align: center;
892
- flex: 1 1 auto;
893
- padding: 0 12px 25px;
894
- }
895
- .sb-control-feedtype-ctn .cff-fb-type-el-info{
896
- padding: 15px 70px 25px;
897
- }
898
- .sb-control-feedtype-ctn .cff-fb-type-el-info strong{
899
- font-size: 14px;
900
- }
901
- #cff-builder-app .cff-fb-type-el p {
902
- margin: 11px 0 4px;
903
- }
904
- #cff-builder-app .cff-fb-type-el[data-active="true"] p{
905
- margin-top: 10px;
906
- }
907
- #cff-builder-app .cff-fb-type-el[data-active="true"] .cff-fb-type-el-info {
908
- padding-bottom: 24px;
909
- }
910
- #cff-builder-app .cff-fb-type-el p svg {
911
- width: 14px;
912
- height: 14px;
913
- margin-left: 5px;
914
- vertical-align: middle;
915
- }
916
- /*.cff-fb-type-el-info strong{
917
- font-weight: 600;
918
- font-size: 16px;
919
- line-height: 19px;
920
- margin-bottom: 10px;
921
- text-transform: capitalize;
922
- display: flex;
923
- justify-content: center;
924
- align-items: center;
925
- }
926
- .cff-fb-type-el-info strong i{
927
- color: #ed8000;
928
- margin-left: 5px;
929
- font-size: 13px;
930
- margin-top: 2px;
931
- }
932
- .cff-fb-type-el-info span{
933
- font-size: 13px;
934
- line-height: 1.4em;
935
- color: #74777D;
936
- }*/
937
- .cff-fb-adv-types .cff-fb-type-el-img {
938
- border-color: #FCF4EF;
939
- }
940
- .cff-fb-ft-action {
941
- border-top: 1px solid #D8DADD;
942
- padding: 30px 40px;
943
- margin-top: 63px;
944
- }
945
- .cff-fb-slctfd-action .cff-fb-wrapper{
946
- display: flex;
947
- align-items: center;
948
- justify-content: flex-end;
949
- }
950
- .cff-fb-slctfd-action{
951
- padding: 16px 0;
952
- }
953
- .cff-fb-slctf-nxt{
954
- height: auto;
955
- padding: 7px 36px 7px 37px;
956
- }
957
- .cff-fb-slctf-back{
958
- margin-right: auto;
959
- height: auto;
960
- padding: 7px 37px 7px 36px;
961
- -webkit-transition: unset!important;
962
- transition: unset!important;
963
- }
964
- .cff-fb-slctf-back svg,
965
- .cff-fb-slctf-nxt svg {
966
- width: 6px;
967
- height: 10px;
968
- }
969
- .cff-fb-slctf-back span {
970
- display: inline-block;
971
- margin-left: 15px;
972
- line-height: 160%;
973
- }
974
- .cff-fb-slctf-nxt span {
975
- display: inline-block;
976
- margin-right: 15px;
977
- line-height: 160%;
978
- }
979
- .cff-fb-btn-ac{
980
- opacity: 0.6;
981
- }
982
- .cff-fb-btn-ac[data-active="true"]{
983
- opacity: 1;
984
- }
985
-
986
- .sb-control-single-id-ctn{
987
- margin-top: 35px;
988
- padding: 25px 0px;
989
- }
990
- .sb-control-single-id-ctn:before{
991
- content: '';
992
- position: absolute;
993
- border-top: 1px solid #DCDDE1;
994
- height: 2px;
995
- top: 0px;
996
- left: -20px;
997
- width: calc(100% + 40px);
998
- }
999
- .sb-control-single-id-input{
1000
- display: flex;
1001
- justify-content: center;
1002
- align-items: center;
1003
- margin-top: 7px;
1004
- }
1005
- .sb-control-single-id-input input{
1006
- height: 45px;
1007
- float: left;
1008
- background: #fff;
1009
- margin-top: 6px;
1010
- margin-right: 7px;
1011
- }
1012
-
1013
- /*
1014
- Video Type Chooser
1015
- */
1016
- .cff-fb-section-wh.cff-fb-section-videos{
1017
- padding: 50px 21px 54px 30px;
1018
- }
1019
- .cff-fb-videotype-chooser{
1020
- display: grid;
1021
- grid-template-columns: 49% 49%;
1022
- grid-column-gap: 1%;
1023
-
1024
- }
1025
- .cff-fb-section-videos{
1026
- flex-direction: column;
1027
- }
1028
- .cff-fb-section-videos .cff-fb-section-video-playlist{
1029
- margin-top: 30px;
1030
- }
1031
-
1032
- .cff-fb-section-video-playlist .cff-fb-wh-inp{
1033
- margin-top: 10px;
1034
- margin-bottom: 10px!important;
1035
- }
1036
- .cff-fb-section-videos .cff-fb-sglelm-left{
1037
- padding-right: 0px;
1038
- }
1039
- /*
1040
- Source Screen
1041
- */
1042
- .cff-fb-sec-heading span{
1043
- font-size:14px;
1044
- color: #434960;
1045
- line-height: 1.7em;
1046
- display: block;
1047
- }
1048
- #cff-builder-app .cff-fb-sec-heading h4 {
1049
- margin-bottom: 2px;
1050
- }
1051
- .cff-fb-sec-heading {
1052
- margin-bottom: 14px;
1053
- }
1054
- .cff-fb-slctsrc-content,.cff-fb-section-wh-insd{
1055
- padding: 23px 30px;
1056
- }
1057
-
1058
- .cff-fb-slctsrc-ctn h4,.cff-fb-section-wh-insd h4{
1059
- font-size: 20px;
1060
- padding: 0px;
1061
- margin: 0px;
1062
- }
1063
- .cff-fb-srcslist-ctn{
1064
- display: grid;
1065
- grid-template-columns: 32.66% 32.66% 32.66%;
1066
- grid-column-gap: 1%;
1067
- margin-bottom: 28px;
1068
- }
1069
- .cff-fb-srcs-item{
1070
- width: 100%;
1071
- cursor: pointer;
1072
- height: 62px;
1073
- margin: 1% 0;
1074
- border-radius: 3px;
1075
- border: 1px solid #E7E7E9;
1076
- display: flex;
1077
- position: relative;
1078
- }
1079
- .cff-fb-srcs-item[data-disabled="true"]{
1080
- background: #F3F4F5;
1081
- }
1082
- .cff-fb-srcs-item[data-disabled="true"] .cff-fb-srcs-item-inf{
1083
- opacity: .55;
1084
-
1085
- }
1086
- #cff-builder-app .cff-fb-srcs-item .cff-fb-srcs-item-inf .cff-fb-srcs-item-name {
1087
- color: #141B38;
1088
- padding-right: 44px;
1089
- }
1090
-
1091
- #cff-builder-app .cff-fb-srcs-item .cff-fb-srcs-item-inf .cff-fb-srcs-item-name span {
1092
- max-height: 30px;
1093
- display: block;
1094
- overflow: hidden;
1095
- line-height: 1.1;
1096
- padding-bottom:1px;
1097
- color: #141B38;
1098
- }
1099
-
1100
- #cff-builder-app .cff-fb-srcs-item:hover{
1101
- border-color: #86D0F9;
1102
- }
1103
- #cff-builder-app .cff-fb-srcs-item[data-active="true"]{
1104
- border-color: #0096cc;
1105
- }
1106
-
1107
- .cff-fb-source-top .cff-fb-srcs-item{
1108
- margin-bottom: 0px;
1109
- }
1110
- #cff-builder-app .cff-fb-srcs-new{
1111
- display: flex;
1112
- justify-content: center;
1113
- align-items: center;
1114
- background: #EBF5FF;
1115
- border: 1px solid #EBF5FF;
1116
- }
1117
- #cff-builder-app .cff-fb-srcs-new span{
1118
- margin-left: 13px;
1119
- color: #0096CC;
1120
- }
1121
- .cff-fb-srcs-new i{
1122
- font-size: 14px;
1123
- padding: 0 10px;
1124
- margin-left: -10px;
1125
- }
1126
- .cff-fb-srcs-item-chkbx{
1127
- width: 40px;
1128
- height: inherit;
1129
- display: flex;
1130
- justify-content: center;
1131
- align-items: center;
1132
- margin: 0 16px 0 7px;
1133
- }
1134
-
1135
- .cff-fb-srcs-item-chkbx-ic,.cff-fb-chbx-round{
1136
- width: 16px;
1137
- height: 16px;
1138
- box-sizing: border-box;
1139
- position: relative;
1140
- border-radius: 50px;
1141
- border: 2px solid #8c8f9a;
1142
- }
1143
- [data-multifeed="active"] .cff-fb-srcs-item-chkbx-ic{
1144
- border-radius: 2px;
1145
- }
1146
-
1147
- [data-active="true"] .cff-fb-srcs-item-chkbx-ic, [data-active="true"] > .cff-fb-chbx-round, .cff-fb-source-popup [data-active="true"] > .cff-fb-chbx-round{
1148
- border-color: #0096cc;
1149
- background: #0096cc;
1150
- }
1151
- [data-multifeed="active"] [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before{
1152
- content: '';
1153
- position: absolute;
1154
- width: 8px;
1155
- height: 3px;
1156
- border-left: 2px solid #fff;
1157
- border-bottom: 2px solid #fff;
1158
- top: 2px;
1159
- right: 1px;
1160
- -webkit-transform: rotate(-45deg);
1161
- transform: rotate(-45deg);
1162
- }
1163
-
1164
- [data-multifeed="inactive"] [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before, [data-active="true"] > .cff-fb-chbx-round:before,
1165
- .cff-fb-source-popup .cff-fb-source-list [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before,
1166
- .cff-fb-section-videos [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before{
1167
- content: '';
1168
- position: absolute;
1169
- height: 6px;
1170
- width: 6px;
1171
- background: #fff;
1172
- border-radius: 25px;
1173
- left: 3px;
1174
- top: 3px;
1175
- }
1176
-
1177
-
1178
-
1179
- .cff-fb-mr-feeds,.cff-fb-section-wh{
1180
- margin-top: 8px;
1181
- background: #fff;
1182
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
1183
- display: flex;
1184
- align-items: center;
1185
- }
1186
- .cff-fb-mr-fd-img {
1187
- float: left;
1188
- margin-right: 6%;
1189
- width: 28%;
1190
- line-height: 0;
1191
- }
1192
- .cff-fb-mr-fd-img img{
1193
- width: 100%;
1194
- }
1195
-
1196
- .cff-fb-mr-fd-heading{
1197
- font-weight:600;
1198
- font-size: 18px;
1199
- line-height: 1.7em;
1200
- margin-bottom: 10px;
1201
- }
1202
- .cff-fb-mr-fd-list{
1203
- margin-bottom: 10px;
1204
- width: 100%;
1205
- float: left;
1206
- }
1207
- .cff-fb-mr-fd-item{
1208
- box-sizing: border-box;
1209
- position: relative;
1210
- float: left;
1211
- border: 1px solid #DCDDE1;
1212
- border-radius: 2px;
1213
- margin-right: 8px;
1214
- height: 38px;
1215
- width: 160px;
1216
- color: #141B38;
1217
- font-size: 14px;
1218
- font-weight:600;
1219
- text-transform: capitalize;
1220
- display: flex;
1221
- justify-content: center;
1222
- align-items: center;
1223
- transition: all .15s ease-in-out;
1224
- }
1225
- .cff-icon-platform-wrap {
1226
- width: 100%;
1227
- display: flex;
1228
- justify-content: left;
1229
- align-items: center;
1230
- margin-left: 13px;
1231
- }
1232
-
1233
- .cff-fb-mr-fd-ic {
1234
- margin-right: 9px;
1235
- }
1236
- .cff-fb-mr-fd-ic svg{
1237
- height: 16px;
1238
- fill: currentColor;
1239
- float: left;
1240
- }
1241
- .cff-fb-mr-fd-ch{
1242
- position: absolute;
1243
- right:14px;
1244
- }
1245
- #cff-builder-app .cff-fb-mr-fd-heading h3 {
1246
- margin-bottom: 21px;
1247
- max-width: 385px;
1248
- }
1249
-
1250
-
1251
-
1252
- /*Embed Popup*/
1253
- .cff-fb-embed-step-1{
1254
- margin-top: 36px;
1255
- }
1256
-
1257
- .cff-fb-embed-step-1 > div{
1258
- padding: 0 20px;
1259
- }
1260
- .cff-fb-embed-step-1-top{
1261
- padding-bottom: 53px!important;
1262
- border-bottom: 1px solid #E8E8EB;
1263
- margin-bottom: 42px;
1264
- }
1265
- #cff-builder-app .cff-fb-embed-step-1 h4{
1266
- margin-bottom: 12px;
1267
- }
1268
- .cff-fb-embed-input-ctn{
1269
- display: flex;
1270
- }
1271
- .cff-fb-embed-input-ctn input,
1272
- .cff-fb-embed-input-ctn input[type="text"]{
1273
- position: relative;
1274
- font-style: normal;
1275
- font-weight: normal;
1276
- font-size: 16px;
1277
- line-height: 160%;
1278
- color: #141B38;
1279
- height: 44px;
1280
- width: 77%;
1281
- box-sizing: border-box;
1282
- border-radius: 0px;
1283
- border: 1px solid #D0D1D7!important;
1284
- border-right: 0px!important;
1285
-
1286
- }
1287
- .cff-fb-embed-input-ctn input:focus, .cff-fb-embed-input-ctn .cff-fb-hd-btn:focus{
1288
- box-shadow: none!important;
1289
- outline: none!important
1290
- }
1291
- .cff-fb-embed-input-ctn .cff-fb-hd-btn{
1292
- width: 23%;
1293
- border-bottom-left-radius: 0px;
1294
- border-top-left-radius: 0px;
1295
- }
1296
- .cff-fb-embed-input-ctn svg{
1297
- width: 17px;
1298
- fill: currentColor;
1299
- float: left;
1300
- margin-right: 10px;
1301
- }
1302
- .cff-fb-embed-step-1-bottom h4{
1303
- text-align: center;
1304
- }
1305
- .cff-fb-embed-btns-ctn{
1306
- display: grid;
1307
- grid-template-columns: 49% 49%;
1308
- grid-column-gap: 2%;
1309
- margin-top: 14px;
1310
- margin-bottom: 60px;
1311
- }
1312
- .cff-fb-embed-btn{
1313
- cursor: pointer;
1314
- width: 100%;
1315
- height: 50px;
1316
- background: #F3F4F5;
1317
- border-radius: 2px;
1318
- border: 1px solid #DCDDE1;
1319
- display: flex;
1320
- align-items: center;
1321
- justify-content: space-between;
1322
- box-sizing: border-box;
1323
- padding: 0 20px;
1324
- position: relative;
1325
- color: #141B38;
1326
- font-size: 16px;
1327
- font-weight: 500;
1328
- }
1329
- .cff-fb-embed-btn .sb-icon-label svg{
1330
- fill: currentColor;
1331
- width: 18px;
1332
- margin-right: 10px;
1333
- float: left;
1334
- }
1335
- .cff-fb-embed-popup .sb-embed-breadcrumb {
1336
- display: flex;
1337
- align-items: center;
1338
- padding: 25px 30px 0;
1339
- margin-bottom: 2px;
1340
- }
1341
- .sb-embed-breadcrumb a {
1342
- font-style: normal;
1343
- font-weight: bold;
1344
- font-size: 10px;
1345
- line-height: 160%;
1346
- letter-spacing: 0.08em;
1347
- text-transform: uppercase;
1348
- color: #434960;
1349
- cursor: pointer;
1350
- }
1351
- .sb-embed-breadcrumb a:hover {
1352
- color: #141B38;
1353
- }
1354
- .sb-embed-breadcrumb svg {
1355
- margin-right: 8px;
1356
- }
1357
- .cff-fb-embed-step-2 > div{
1358
- padding: 0 29px;
1359
- }
1360
-
1361
- .sb-customizer-sidebar-cache-wrapper{
1362
- margin-top: 20px;
1363
- padding: 0 20px;
1364
- }
1365
- .cff-fb-embed-step-2-list{
1366
- margin-top: 25px;
1367
- border-top: 1px solid #DCDDE1;
1368
- padding-top: 14px !important;
1369
- }
1370
- .cff-fb-embed-step-2-list > strong{
1371
- text-transform: uppercase;
1372
- font-size: 12px;
1373
- color: #434960;
1374
- margin-bottom: 10px;
1375
- }
1376
- .cff-fb-embed-step-2-pages{
1377
- margin-top: 8px;
1378
- height: 250px;
1379
- overflow: auto;
1380
- }
1381
- .cff-fb-embed-step-2-pages .sb-control-toggle-icon svg {
1382
- width: 11px;
1383
- }
1384
- .cff-fb-embed-step-2-action{
1385
- padding: 10px 34px 10px 30px !important;
1386
- background: #F3F4F5;
1387
- box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.1);
1388
- }
1389
- .cff-fb-embed-step-2-action a{
1390
- color: #fff;
1391
- }
1392
- .cff-fb-embed-step-2-action a[data-active="false"]{
1393
- opacity: .75;
1394
- }
1395
-
1396
- /*Dialog Popup*/
1397
- .cff-fb-dialog-remove-source{
1398
- background: #F3F4F5;
1399
- padding: 40px 20px;
1400
- display: flex;
1401
- justify-content: center;
1402
- align-items: center;
1403
- }
1404
- .cff-fb-dialog-remove-source .cff-fb-srcs-item{
1405
- background: #fff;
1406
- width: 280px;
1407
- padding-left: 20px;
1408
- box-sizing: border-box;
1409
- margin-top: 0px;
1410
- }
1411
- .cff-fb-srcs-item-remove{
1412
- position: absolute;
1413
- width: 35px;
1414
- height: 35px;
1415
- border-radius: 50px;
1416
- background: #fff;
1417
- border:1px solid #E7E7E9;
1418
- z-index: 3;
1419
- right: -13px;
1420
- bottom: -13px;
1421
- display: flex;
1422
- justify-content: center;
1423
- align-items: center;
1424
- box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
1425
- }
1426
- .cff-fb-srcs-item-remove svg{
1427
- width: 12px;
1428
- float: left;
1429
- fill: var(--error-red);
1430
- }
1431
- .cff-fb-dialog-popup-content{
1432
- display: flex;
1433
- justify-content: center;
1434
- align-items: center;
1435
- text-align: center;
1436
- flex-direction: column;
1437
- padding: 38px 12%;
1438
- }
1439
- .cff-fb-dialog-popup-content strong{
1440
- font-size: 22px;
1441
- color: #141B38;
1442
- display: block;
1443
- margin-bottom: 15px;
1444
- }
1445
- .cff-fb-dialog-popup-content span{
1446
- font-size: 16px;
1447
- line-height: 1.5em;
1448
- color: #434960;
1449
- }
1450
- .cff-fb-dialog-popup-actions{
1451
- display: flex;
1452
- justify-content: center;
1453
- align-items: center;
1454
- margin-top: 25px;
1455
- }
1456
- .cff-fb-dialog-popup-actions button{
1457
- width: 100%;
1458
- margin: 4px 4px;
1459
- cursor: pointer;
1460
- height: 42px;
1461
- }
1462
-
1463
- /*
1464
- Footer Sticky Widget
1465
- */
1466
- .cff-stck-wdg{
1467
- position: fixed;
1468
- right: 21px;
1469
- z-index: 9;
1470
- bottom: 20px;
1471
- }
1472
- .cff-stck-wdg-btn{
1473
- width: 52px;
1474
- height: 52px;
1475
- background: #fff;
1476
- border-radius: 50%;
1477
- cursor: pointer;
1478
- display: flex;
1479
- justify-content: center;
1480
- align-items: center;
1481
- filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
1482
- }
1483
- .cff-stck-wdg-btn svg{
1484
- width: 25px;
1485
- fill: #E34F0E;
1486
- height: 33px;
1487
- float: left;
1488
- }
1489
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn svg,.cff-stck-wdg-btn-cls{
1490
- display: none;
1491
- }
1492
-
1493
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
1494
- .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
1495
- display: block;
1496
- }
1497
- .cff-stck-wdg-btn-cls{
1498
- width: inherit;
1499
- height: inherit;
1500
- position: relative;
1501
- color: #364152;
1502
- box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
1503
- border-radius: 70px;
1504
- }
1505
- .cff-stck-wdg-btn-cls svg {
1506
- width: 14px;
1507
- height: 14px;
1508
- position: absolute;
1509
- top: 50%;
1510
- right: 0;
1511
- bottom: 0;
1512
- left: 50%;
1513
- margin-top: -7px;
1514
- margin-left: -7px;
1515
- }
1516
-
1517
- .cff-stck-pop{
1518
- position: absolute;
1519
- width: 292px;
1520
- height: auto;
1521
- background: #fff;
1522
- border: 1px solid #E2E8F0;
1523
- box-sizing: border-box;
1524
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
1525
- border-radius: 2px;
1526
- padding: 20px;
1527
- right: 0px;
1528
- bottom: 100px;
1529
- color: #141B38;
1530
- opacity: 0;
1531
- padding-bottom: 82px;
1532
- visibility: hidden;
1533
- }
1534
- .cff-stck-wdg[data-active="true"] .cff-stck-pop{
1535
- bottom: 66px;
1536
- opacity: 1;
1537
- visibility: visible;
1538
- }
1539
-
1540
- .cff-stck-pop svg{
1541
- fill: currentColor;
1542
- }
1543
- .cff-stck-el-list{
1544
- border: 1px solid #DCDDE1;
1545
- border-radius: 2px;
1546
- }
1547
- .cff-stck-el{
1548
- display: flex;
1549
- align-items: center;
1550
- padding: 11px 13px;
1551
- border-bottom: 1px solid #DCDDE1;
1552
- }
1553
- .cff-stck-el:hover{
1554
- background: #F3F4F5;
1555
- }
1556
- .cff-stck-el:last-of-type{
1557
- border-bottom: 0px;
1558
- }
1559
- .cff-stck-el-list .cff-chevron svg{
1560
- width: 5px;
1561
- height: 8px;
1562
- }
1563
- .cff-stck-el-list .cff-stck-el-icon svg {
1564
-
1565
- }
1566
- .cff-stck-el .cff-stck-el-txt{
1567
- color: #27303F;
1568
- }
1569
- .cff-stck-el.cff-stck-el-upgrd{
1570
- padding: 8px 14px;
1571
- font-size: 14px;
1572
- background: var(--cl-orange);
1573
- color: #fff;
1574
- }
1575
- .cff-chevron {
1576
- position: absolute;
1577
- right: 14px
1578
- }
1579
- .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
1580
- color: #fff;
1581
- }
1582
- .cff-stck-el.cff-stck-el-upgrd:after{
1583
- top: 20px;
1584
- opacity: 1;
1585
- }
1586
- .cff-stck-el-icon{
1587
- margin-right: 10px;
1588
- }
1589
- .cff-stck-el-icon svg{
1590
- width: 17px;
1591
- float: left;
1592
- }
1593
- #cff-builder-app .cff-stck-title{
1594
- margin-top: 20px;
1595
- margin-bottom: 10px;
1596
- }
1597
-
1598
- .cff-stck-follow{
1599
- background: #F3F4F5;
1600
- margin-top: 20px;
1601
- left: 0px;
1602
- bottom: 0px;
1603
- position: absolute;
1604
- padding: 12px 20px;
1605
- display: flex;
1606
- align-items: center;
1607
- }
1608
- .cff-stck-follow span{
1609
- font-weight: 600;
1610
- font-size: 14px;
1611
- }
1612
- .cff-stck-flw-links{
1613
- display: flex;
1614
- justify-content: center;
1615
- align-items: center;
1616
- margin-left: auto;
1617
- }
1618
- .cff-stck-flw-links a{
1619
- width: 36px;
1620
- height: 28px;
1621
- color: inherit;
1622
- display: inline-flex;
1623
- justify-content: center;
1624
- align-items: center;
1625
- margin-left: 4px;
1626
- border-radius: 2px;
1627
- }
1628
- .cff-stck-flw-links svg{
1629
- width: 17px;
1630
- color: #141B38;
1631
- }
1632
- .cff-stck-flw-links a:hover{
1633
- background: #fff;
1634
- }
1635
- .cff-stck-flw-links a:hover svg{
1636
- color: inherit;
1637
- }
1638
-
1639
-
1640
-
1641
- /*
1642
- Builder Footer
1643
- */
1644
- .cff-bld-footer > div{
1645
- background: #fff;
1646
- color: #141B38;
1647
- margin: 30px 0;
1648
- }
1649
- .cff-bld-footer{
1650
- padding-top: 0px!important
1651
- }
1652
- .cff-bld-ft-content{
1653
- display: flex;
1654
- align-items: center;
1655
- max-width: 1200px;
1656
- }
1657
- .cff-bld-ft-img{
1658
- float: left;
1659
- width: 15%;
1660
- margin-right: 5%;
1661
- /*height: 158px;*/
1662
- }
1663
- .cff-bld-ft-img svg{
1664
- margin-bottom: -4px;
1665
- }
1666
- .cff-bld-ft-txt{
1667
- display: flex;
1668
- justify-content: center;
1669
- align-items: center;
1670
- width: 59%;
1671
- margin-right: 5%;
1672
- }
1673
- .cff-bld-ft-txt strong,
1674
- .cff-fb-mr-fd-heading span{
1675
- color: var(--cl-orange);
1676
- }
1677
- #cff-builder-app .cff-bld-ft-info{
1678
- width: 44%;
1679
- color: #434960;
1680
- }
1681
- #sb-footer-banner .cff-bld-ft-title{
1682
- width: 63%;
1683
- margin-right: 6%;
1684
- }
1685
- .cff-bld-ft-action{
1686
- width: 17%;
1687
- display: flex;
1688
- justify-content: left;
1689
- align-items: center;
1690
- }
1691
- .cff-bld-ft-action svg{
1692
- top: 14px;
1693
- height: 10px;
1694
- }
1695
- @media all and (max-width: 1130px) {
1696
- #sb-footer-banner .cff-bld-ft-img{
1697
- width: 17%;
1698
- margin-right: 3%;
1699
- }
1700
- #sb-footer-banner .cff-bld-ft-txt{
1701
- display: flex;
1702
- justify-content: center;
1703
- align-items: center;
1704
- width: 61%;
1705
- margin-right: 3%;
1706
- }
1707
- #cff-builder-app #sb-footer-banner h3 {
1708
- font-size: 20px;
1709
- }
1710
- #cff-builder-app #sb-footer-banner .sb-small-p {
1711
- font-size: 13px;
1712
- }
1713
- #sb-footer-banner .sb-button-standard {
1714
- font-size: 13px;
1715
- padding-left: 16px;
1716
- line-height: 15px;
1717
- }
1718
- }
1719
-
1720
- .cff-bld-ft-btm{
1721
- font-size: 14px;
1722
- display: flex;
1723
- justify-content: center;
1724
- align-items: center;
1725
- padding: 15px 0px;
1726
- border-top: 1px solid #DCDDE1;
1727
- }
1728
- .cff-bld-ft-btm strong{
1729
- padding: 0 5px;
1730
- }
1731
- .cff-bld-ft-btm a{
1732
- display: inline-block;
1733
- padding: 0 10px;
1734
- font-weight: 500;
1735
- color: #0068A0;
1736
- }
1737
- .cff-bld-ft-btm a i{
1738
- font-size: 12px;
1739
- margin-left: 5px;
1740
- }
1741
- .cff-bld-ft-bns{
1742
- display: inline-block;
1743
- margin: 0 10px;
1744
- padding: 5px 10px;
1745
- border-radius: 5px;
1746
- font-size: 14px;
1747
- font-weight: 700;
1748
- text-transform: uppercase;
1749
- color: #663D00;
1750
- background: #FFDF99;
1751
- }
1752
- /*
1753
- Extensions Poup
1754
- */
1755
- .cff-fb-fs-link{
1756
- position: absolute;
1757
- width: 100%;
1758
- height: 100%;
1759
- left: 0;
1760
- top: 0;
1761
- right: 0;
1762
- bottom: 0;
1763
- z-index: 1;
1764
- }
1765
- .cff-fb-extensions-popup .cff-fb-slctf-back {
1766
- position: relative;
1767
- top: -5px;
1768
- padding: 5px 12px;
1769
- display: inline-block;
1770
- z-index: 3;
1771
- margin-bottom: 11px;
1772
- }
1773
- .cff-fb-extensions-popup .cff-fb-slctf-back span {
1774
- margin-left:9px;
1775
- }
1776
- .cff-fb-extpp-top{
1777
- display: flex;
1778
- justify-content: center;
1779
- align-items: center;
1780
- height: 264px;
1781
- background: #F3F4F5;
1782
- }
1783
- .cff-fb-extpp-top-fdtype.cff-fb-extpp-top{
1784
- height: 295px;
1785
- }
1786
- .cff-fb-extpp-img{
1787
- width: 50%;
1788
- float: left;
1789
- display: flex;
1790
- justify-content: center;
1791
- }
1792
- .cff-fb-extensions-popup[data-getext-view="featuredpost"] .cff-fb-extpp-img{
1793
- padding: 50px 0px;
1794
- }
1795
- .cff-fb-extensions-popup[data-getext-view="singlealbum"] .cff-fb-extpp-img{
1796
- padding: 65px 0px;
1797
- }
1798
- .cff-fb-extpp-social-wall .cff-fb-extpp-top {
1799
- display: flex;
1800
- flex-direction: column;
1801
- align-items: center;
1802
- height: auto;
1803
- padding-top: 29px;
1804
- }
1805
-
1806
- .cff-fb-extpp-info{
1807
- width: 50%;
1808
- float: left;
1809
- display: flex;
1810
- justify-content: center;
1811
- flex-direction: column;
1812
- padding-left: 40px;
1813
- }
1814
- .cff-fb-extpp-info .cff-fb-extpp-head,
1815
- .cff-fb-extpp-info .cff-fb-extpp-desc{
1816
- width: 90%;
1817
- }
1818
- #cff-builder-app .cff-fb-extpp-head{
1819
- margin: 0 0 12px;
1820
- }
1821
- #cff-builder-app .cff-fb-extpp-desc {
1822
- color: #475569;
1823
- display: flex;
1824
- justify-content: left;
1825
- align-items: center;
1826
- width: 105%;
1827
- }
1828
- .cff-fb-extpp-head span{
1829
- color: var(--cl-orange);
1830
- }
1831
- .cff-fb-extpp-head span.sb-social-wall{
1832
- color: inherit;
1833
- font-size: 26px;
1834
- line-height: 120% !important;
1835
- display: inline-block;
1836
- }
1837
- .cff-fb-extpp-desc .sb-social-wall {
1838
- width: 90%;
1839
- }
1840
- .cff-fb-extpp-lite-btn{
1841
- float: left;
1842
- font-size: 15px;
1843
- font-weight: 500;
1844
- padding: 10px 20px;
1845
- color: #0068A0;
1846
- background: #fff;
1847
- border: 1px solid #DCDDE1;
1848
- margin-bottom: 14px;
1849
- margin-top: 12px;
1850
- align-items: center;
1851
- }
1852
- .cff-fb-extpp-lite-btn svg{
1853
- fill: currentColor;
1854
- width: 20px;
1855
- float: left;
1856
- margin-right: 10px;
1857
- }
1858
- .cff-fb-extpp-inc-list{
1859
- border: 1px solid #dcdde1;
1860
- margin-top: 10px;
1861
- margin-bottom: 30px;
1862
- }
1863
- .cff-fb-extpp-bottom-strg{
1864
- font-size:18px;
1865
- font-weight: 600;
1866
- }
1867
- .cff-fb-extpp-inc-items{
1868
- display: grid;
1869
- grid-template-columns: 25% 25% 25% 25%;
1870
- }
1871
- .cff-fb-extpp-inc-item, .cff-fb-extpp-inc-item-bottom{
1872
- position: relative;
1873
- height: 50px;
1874
- display: flex;
1875
- justify-content: center;
1876
- align-items: center;
1877
- border-right: 1px solid #dcdde1;
1878
- border-bottom: 1px solid #dcdde1;
1879
- font-size: 14px;
1880
- }
1881
- .cff-fb-extpp-inc-item-bottom{
1882
- border: 0px !important;
1883
- }
1884
- .cff-fb-extpp-inc-item:last-of-type{
1885
- border-right: 0px;
1886
- }
1887
- .cff-fb-extpp-inc-item svg, .cff-fb-extpp-inc-item-bottom svg{
1888
- width: 17px; margin-right: 10px; fill: currentColor; float: left;
1889
- }
1890
- .cff-fb-extpp-bottom{
1891
- padding: 20px 40px;
1892
- background: #fff;
1893
- }
1894
- .cff-extension-bullet-list {
1895
- display: grid;
1896
- grid-template-columns: 32% 32% 32%;
1897
- grid-column-gap: 2%;
1898
- margin-top: 12px;
1899
- margin-bottom: 40px;
1900
- }
1901
- .cff-extension-single-bullet {
1902
- display: flex;
1903
- justify-content: flex-start;
1904
- align-items: center;
1905
- margin: 4px 0;
1906
- }
1907
- #cff-builder-app .cff-extension-single-bullet span {
1908
- color: #434960;
1909
- }
1910
-
1911
- .cff-extension-single-bullet svg {
1912
- margin-right: 12px;
1913
- }
1914
- .cff-fb-extpp-btns{
1915
- display: grid;
1916
- grid-template-columns: 100%;
1917
- grid-column-gap: 0;
1918
- }
1919
- .cff-fb-extpp-btns div{
1920
- height: 38px;
1921
- cursor: pointer;
1922
- position: relative;
1923
- border-radius: 3px;
1924
- font-style: normal;
1925
- font-weight: 600;
1926
- font-size: 14px;
1927
- line-height: 160%;
1928
- display: flex;
1929
- justify-content: center;
1930
- align-items: center;
1931
- box-sizing: border-box;
1932
- }
1933
- .cff-fb-extpp-get-btn{
1934
- color: #fff;
1935
- background: var(--cl-orange);
1936
- }
1937
- .cff-fb-extpp-demo-btn{
1938
- border: 2px solid #DCDDE1;
1939
- background: #F3F4F5;
1940
- }
1941
-
1942
- /*
1943
- Feed Type Creation Process : Single Album;
1944
- */
1945
- .cff-fb-section-wh-insd{
1946
- display: flex;
1947
- }
1948
- .cff-fb-sglelm-inp-ctn{
1949
- margin-top: 100px;
1950
- }
1951
-
1952
- .cff-fb-sglelm-inp-ctn input[type="text"]{
1953
- height: 44px;
1954
- }
1955
- .cff-fb-section-wh.cff-fb-sglelm-ctn {
1956
- padding: 20px 21px 24px 30px;
1957
- }
1958
- .cff-fb-section-wh.cff-fb-sglelm-ctn .cff-fb-section-wh-insd {
1959
- padding: 0;
1960
- }
1961
- .cff-fb-sglelm-inp-ctn input[type="text"]::placeholder{
1962
- font-style: normal;
1963
- font-weight: normal;
1964
- font-size: 16px;
1965
- line-height: 160%;
1966
- color: #8C8F9A;
1967
- }
1968
- .cff-fb-sglelm-error-icon{
1969
- width: 23px;
1970
- height: 23px;
1971
- background: var(--error-red);
1972
- font-family: monospace;
1973
- font-weight: 900;
1974
- color: #fff;
1975
- font-size: 15px;
1976
- position: absolute;
1977
- right: 10px;
1978
- top: 10px;
1979
- z-index: 999999999999999999;
1980
- border-radius: 50px;
1981
- display: flex;
1982
- justify-content: center;
1983
- align-items: center;
1984
- }
1985
- .cff-fb-sglelm-errormsg{
1986
- color: var(--error-red);
1987
- font-weight: 800;
1988
- }
1989
- .cff-fb-sglelm-inp-ctn .cff-fb-wh-inp{
1990
- margin-bottom: 10px;
1991
- }
1992
- .cff-fb-sglelm-left{
1993
- padding-right: 100px;
1994
- }
1995
- .cff-fb-sglelm-img-ctn{
1996
- background:#E8E8EB;
1997
- height: 350px;
1998
- display: flex;
1999
- justify-content: center;
2000
- align-items: center;
2001
- text-align: center;
2002
- flex-direction: column;
2003
- padding: 100px 50px;
2004
- border: 1px solid #D0D1D7;
2005
- box-sizing: border-box;
2006
- }
2007
- .cff-fb-sglelm-img-ctn.cff-fb-sglelm-img-pf{
2008
- padding: 100px 35px;
2009
- }
2010
- .cff-fb-sglelm-img-ctn strong{
2011
- font-size: 16px;
2012
- color: #434960;
2013
- margin-bottom: 8px;
2014
- margin-top: 30px;
2015
- }
2016
- .cff-fb-sglelm-img-ctn span{
2017
- font-size: 14px;
2018
- line-height:1.6em;
2019
- color: #8C8F9A;
2020
- }
2021
- .cff-fb-sglelm-right{
2022
- width: 445px
2023
- }
2024
- .cff-fb-sglelm-img-errorctn span{
2025
- padding: 0 20px;
2026
- color: #434960;
2027
- font-size: 20px;
2028
- margin-top: 30px;
2029
- line-height: 1.2em;
2030
- }
2031
- .cff-fb-sglelm-preview{
2032
- height: 375px;
2033
- background-color: #141B38;
2034
- background-position: center center;
2035
- background-size: cover;
2036
- display: flex;
2037
- justify-content: center;
2038
- align-items: flex-end;
2039
- color: #fff;
2040
- }
2041
- .cff-fb-sglelm-preview:after{
2042
- content: '';
2043
- position: absolute;
2044
- width: 100%; height: 100%;
2045
- background-image: linear-gradient(to bottom, rgba(0,0,0,0) , rgba(0,0,0,.5));
2046
- }
2047
- .cff-fb-sglelm-prev-info{
2048
- width: 100%;
2049
- padding: 20px 30px;
2050
- padding-bottom: 40px;
2051
- display: flex;
2052
- justify-content: center;
2053
- align-items: center;
2054
- text-align: center;
2055
- flex-direction: column;
2056
- z-index: 2;
2057
- }
2058
- .cff-fb-sglelm-prev-info strong{
2059
- font-size: 18px;
2060
- margin-bottom: 5px;
2061
- }
2062
- .cff-fb-sglelm-prev-info span{
2063
- font-size: 16px;
2064
- line-height: 1.7em;
2065
- }
2066
-
2067
-
2068
- /*
2069
- Feeds List
2070
- */
2071
- #cff-builder-app .cff-fb-select,
2072
- #cff-builder-app .cff-fb-select:hover,
2073
- #cff-builder-app .cff-fb-select:focus{
2074
- border-radius: 0px!important;
2075
- border: 1px solid #D0D1D7!important;
2076
- outline: unset!important;
2077
- float: left;
2078
- min-height: auto;
2079
- padding: 6px 31px 6px 8px;
2080
- background: #fff url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.833252 0.333252L4.99992 4.49992L9.16658 0.333252H0.833252Z' fill='%238C8F9A'/%3E%3C/svg%3E%0A") no-repeat right 13px top 55%;
2081
- background-size: 10px 6px;
2082
- }
2083
- .cff-fd-lst-bulk-ctn > *{
2084
- float: left;
2085
- margin-right: 10px;
2086
- }
2087
- .cff-fd-lst-bulk-ctn{
2088
- margin-bottom: 8px;
2089
- }
2090
- .cff-fd-lst-pagination-ctn{
2091
- float: right;
2092
- display: flex;
2093
- align-items: center;
2094
- margin-top: 10px;
2095
- }
2096
- .cff-fd-lst-pgnt-btn{
2097
- height: 30px;
2098
- padding: 0 8px;
2099
- cursor: pointer;
2100
- border-radius: 3px;
2101
- }
2102
- .cff-fd-lst-pgnt-info{
2103
- display: inline-block;
2104
- padding: 0 3px;
2105
- }
2106
- .cff-fd-lst-count{
2107
- margin-right: 10px;
2108
- }
2109
- .cff-feeds-list table{
2110
- width: 100%;
2111
- text-align: left;
2112
- border-spacing: 0px;
2113
- box-sizing: border-box;
2114
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
2115
- background: #fff;
2116
- }
2117
-
2118
- .cff-feeds-list table a{
2119
- cursor: pointer;
2120
- }
2121
- .cff-fd-lst-tbody tr:nth-child(odd){
2122
- background: #F3F4F5;
2123
- }
2124
- .cff-fd-lst-tbody tr td{
2125
- position: relative;
2126
- vertical-align: top;
2127
- padding: 10px 5px 15px 5px;
2128
- font-size: 16px;
2129
- }
2130
- .cff-fd-lst-tbody tr td:first-child {
2131
- width: 43%;
2132
- }
2133
- .cff-feeds-list table tr td:first-child {
2134
- width: 30px;
2135
- }
2136
- .cff-fd-lst-thtf{
2137
- background: #fff;
2138
- }
2139
- .cff-fd-lst-thtf th, .cff-fd-lst-thtf td{
2140
- padding: 6px 5px;
2141
- }
2142
- .cff-fd-lst-thtf th{
2143
- border-bottom: 1px solid #DCDDE1;
2144
- }
2145
- .cff-fd-lst-thtf td{
2146
- border-top: 1px solid #DCDDE1;
2147
- }
2148
- .cff-fd-lst-chkbx{
2149
- width: 11px;
2150
- height: 11px;
2151
- position: relative;
2152
- border-radius: 2px;
2153
- border: 1px solid #97A6BA;
2154
- background: #fff;
2155
- cursor: pointer;
2156
- margin-left: 10px;
2157
- }
2158
- tbody .cff-fd-lst-chkbx {
2159
- position: absolute;
2160
- top: 15px;
2161
- left: 5px;
2162
- bottom: 0;
2163
- right: 0;
2164
- }
2165
- .cff-fd-lst-thtf .cff-fd-lst-chkbx{
2166
- width: 11px;
2167
- height: 11px;
2168
- border: 1px solid #D8DADD;
2169
- }
2170
- .cff-fd-lst-chkbx[data-active="true"]{
2171
- background: var(--customizer-blue);
2172
- border-color: var(--customizer-blue)!important;
2173
- }
2174
- .cff-fd-lst-chkbx[data-active="true"]:before{
2175
- content: '';
2176
- position: absolute;
2177
- width: 6px;
2178
- height: 3px;
2179
- left: 2px;
2180
- top: 2px;
2181
- border-bottom: 2px solid #fff;
2182
- border-left: 2px solid #fff;
2183
- -webkit-transform: rotate(-45deg);
2184
- transform: rotate(-45deg);
2185
- }
2186
-
2187
-
2188
- .cff-fd-lst-name{
2189
- font-size: 17px;
2190
- font-weight:500;
2191
- color: #0068A0!important;
2192
- }
2193
- .cff-fd-lst-type{
2194
- display: block;
2195
- text-transform: capitalize;
2196
- }
2197
- .sb-instances-cell {
2198
- margin-top: 4px;
2199
- }
2200
- .cff-fd-lst-btn{
2201
- width: 21px;
2202
- height: 21px;
2203
- display: inline-flex;
2204
- justify-content: center;
2205
- align-items: center;
2206
- margin: 0 4px;
2207
- cursor: pointer;
2208
- color: #141B38;
2209
- border-radius: 2px;
2210
- border: 1px solid #D8DADD;
2211
- -webkit-transition: all .2s ease-in-out;
2212
- transition: all .2s ease-in-out;
2213
- background: #fff;
2214
- }
2215
- .cff-fd-lst-btn svg {
2216
- height: 13px;
2217
- }
2218
- .cff-fd-lst-actions .cff-fd-lst-btn,
2219
- .cff-fb-inst-tbl-ctn .cff-fd-lst-btn{
2220
- box-sizing: border-box;
2221
- width: 36px;
2222
- height: 32px;
2223
- background: transparent;
2224
- }
2225
- .cff-fd-lst-actions .cff-fd-lst-btn {
2226
- margin: 0 4px 0 0;
2227
- }
2228
- .cff-fd-lst-actions .cff-fd-lst-btn:last-child {
2229
- margin: 0;
2230
- }
2231
- .cff-fd-lst-actions .cff-fd-lst-btn svg {
2232
- width: 12px;
2233
- height: 16px;
2234
- }
2235
- .cff-fd-lst-btn-delete{
2236
- color: #D72C2C;
2237
- border-color: #FBD5D5;
2238
- }
2239
- .cff-fd-lst-btn svg{
2240
- fill: currentColor;
2241
- width: 14px;
2242
- float: left;
2243
- }
2244
- .cff-fd-lst-actions .cff-fd-lst-btn:hover svg{
2245
- color: #fff;
2246
- }
2247
- .cff-fd-lst-actions .cff-fd-lst-btn:hover{
2248
- background: #0096CC;
2249
- border-color: #0096CC;
2250
- }
2251
- .cff-fd-lst-actions .cff-fd-lst-btn-delete:hover{
2252
- background: #D72C2C;
2253
- border-color: #D72C2C;
2254
- }
2255
- .cff-fd-lst-dimmed .cff-fd-lst-btn, .cff-fd-lst-dimmed .cff-fd-lst-btn:hover{
2256
- background: #F3F4F5!important;
2257
- border-color:#D8DADD!important;
2258
- color: #8C8F9A!important;
2259
- }
2260
- .cff-fd-lst-dimmed .cff-fd-lst-btn:hover svg{
2261
- color: #8C8F9A!important;
2262
- }
2263
-
2264
- .cff-fb-tltp-parent{
2265
- position: relative;
2266
- }
2267
- .cff-fb-view-instances[data-active="true"]{
2268
- font-weight: 600;
2269
- text-decoration: underline;
2270
- cursor: pointer;
2271
- line-height: 1em;
2272
- }
2273
- .cff-fb-tltp-elem{
2274
- position: absolute;
2275
- color: #fff;
2276
- background: #434960;
2277
- font-size: 14px;
2278
- padding: 7px 10px;
2279
- border-radius: 3px;
2280
- font-weight:500;
2281
- z-index: 9;
2282
- text-align: center;
2283
- opacity: 0;
2284
- visibility: hidden;
2285
- top: calc(-100% - 30px);
2286
- left: 50%;
2287
- -webkit-transform: translateX(-50%);
2288
- transform: translateX(-50%);
2289
- -webkit-transition: all .2s ease-in-out;
2290
- transition: all .2s ease-in-out;
2291
- }
2292
- .cff-fb-tltp-elem span{
2293
- position: relative; z-index: 3;
2294
- }
2295
- .cff-fb-tltp-elem:after{
2296
- content: '';
2297
- position: absolute;
2298
- height: 10px;
2299
- width: 10px;
2300
- bottom: -5px;
2301
- left: calc(50% - 5px);
2302
- background: #434960;
2303
- transform: rotate(-45deg);
2304
- }
2305
- .cff-fb-tltp-parent:hover .cff-fb-tltp-elem {
2306
- top: calc(-100% - 20px);
2307
- opacity: 1;
2308
- visibility: visible;
2309
- }
2310
- .cff-fd-lst-shortcode-cp{
2311
- margin-left: 10px;
2312
- }
2313
- .cff-fd-lst-act-th{
2314
- width: 190px;
2315
- max-width: 190px;
2316
- }
2317
-
2318
- /*
2319
- Feed Instance Popup
2320
- */
2321
- .cff-fb-popup-feedinst .cff-fb-source-top{
2322
- display: flex;
2323
- align-items: center;
2324
- }
2325
- .cff-fb-popup-feedinst h5{
2326
- margin-bottom: 0px;
2327
- float: left;
2328
- font-size: 27px;
2329
- }
2330
- .cff-fb-fdinst-type{
2331
- padding: 5px 5px;
2332
- background: #E8E8EB;
2333
- margin-left: 12px;
2334
- float: left;
2335
- }
2336
- .cff-fb-inst-tbl-ctn{
2337
- padding: 0 23px 63px;
2338
- }
2339
- .cff-fb-inst-tbl-ctn table{
2340
- width: 100%;
2341
- border-spacing: unset;
2342
- box-sizing: border-box;
2343
- border: 1px solid #DCDDE1;
2344
- text-align: left;
2345
- }
2346
- .cff-fb-inst-tbl-ctn tfoot,.cff-fb-inst-tbl-ctn thead{
2347
- background: #F3F4F5
2348
- }
2349
- .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf th, .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf td{
2350
- font-size: 13px;
2351
- color: #364152;
2352
- padding: 13px 10px;
2353
- }
2354
- .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr:nth-child(odd){
2355
- background: #fff;
2356
- }
2357
- .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr:nth-child(even){
2358
- background: #F3F4F5;
2359
- }
2360
- .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf tr th,
2361
- .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf tr td{
2362
- padding: 4px 20px;
2363
- }
2364
- .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr td{
2365
- padding: 11px 20px;
2366
- }
2367
- .cff-fb-inst-tbl-ctn .cff-fd-lst-name{
2368
- font-size: 14px;
2369
- }
2370
- .cff-fb-inst-tbl-shrtc{
2371
- display: flex;
2372
- align-items: center;
2373
- }
2374
-
2375
- .cff-fd-inst-btn{
2376
- width: 10px;
2377
- height: 10px;
2378
- box-sizing: border-box;
2379
- border-right: 3px solid #8C8F9A;
2380
- border-top: 3px solid #8C8F9A;
2381
- cursor: pointer;
2382
- -webkit-transform: rotate(45deg);
2383
- transform: rotate(45deg);
2384
- }
2385
-
2386
- /*Legacy Feeds */
2387
- .cff-fb-lgc-top-new{
2388
- color: #141B38;
2389
- background: #fff;
2390
- margin: 10px 0px;
2391
- padding: 15px 20px;
2392
- display: flex;
2393
- justify-content: center;
2394
- align-items: center;
2395
- font-size: 14px;
2396
- font-weight: 600;
2397
- }
2398
- .cff-fb-lgc-gr{
2399
- font-size: 12px;
2400
- text-transform: uppercase;
2401
- font-weight: 500;
2402
- background: #59AB46;
2403
- color: #fff;
2404
- margin-right: 10px;
2405
- padding: 6px 10px;
2406
- border-radius: 2px;
2407
- line-height: 1em;
2408
- }
2409
- .cff-fb-lgc-inf-ctn{
2410
- background: #fff;
2411
- padding: 0 20px;
2412
- display: flex;
2413
- align-items: center;
2414
- height: 58px;
2415
- }
2416
-
2417
- .cff-fb-lgc-inf-ctn > *{
2418
- float: left;
2419
- display: inline-block;
2420
- position: relative;
2421
- }
2422
- #cff-builder-app .cff-fb-lgc-inf-ctn > h4{
2423
- margin-right: 14px;
2424
- margin-bottom: 0;
2425
- }
2426
- #cff-builder-app .cff-fb-lgc-btn-stg{
2427
- display: flex;
2428
- margin-left: auto;
2429
- }
2430
- .cff-fd-legacy-feed-toggle{
2431
- height: 34px;
2432
- display: flex;
2433
- justify-content: center;
2434
- align-items: center;
2435
- background: #E2F5FF;
2436
- color:#0068A0;
2437
- cursor: pointer;
2438
- font-weight: 600;
2439
- font-size: 14px;
2440
- line-height: 160%;
2441
- }
2442
- .cff-fd-legacy-feed-toggle:hover {
2443
- background: #BFE8FF;
2444
- }
2445
- .cff-fd-legacy-feed-toggle span{
2446
- display: inline-block;
2447
- position: relative;
2448
- padding-right: 20px;
2449
- margin-left: -20px;
2450
- }
2451
- .cff-fd-legacy-feed-toggle[data-active="true"] span:after{
2452
- -webkit-transform: rotate(-225deg);
2453
- transform: rotate(-225deg);
2454
- top: 7px;
2455
- }
2456
- .cff-feeds-list .cff-legacy-table-wrap table{
2457
- box-shadow: none;
2458
- border-top: 1px solid #DCDDE1;
2459
- }
2460
- .cff-fb-lgc-ctn{
2461
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
2462
- margin-bottom: 20px;
2463
- }
2464
-
2465
- .cff-fb-onbrd-infotxt{
2466
- display: flex;
2467
- align-items: center;
2468
- }
2469
- .cff-fb-onbrd-infotxt svg{
2470
- fill: currentColor;
2471
- width: 16px;
2472
- display: inline-block;
2473
- margin-left: 10px;
2474
- float: left;
2475
- }
2476
-
2477
- .cff-fb-onbrd-tltp-parent{
2478
- position: relative;
2479
- }
2480
- .cff-fb-onbrd-tltp-elem{
2481
- position: absolute;
2482
- z-index: 9;
2483
- background: #fff;
2484
- border-radius: 2px;
2485
- color: #434960;
2486
- padding: 16px 52px 4px 24px;
2487
- font-size: 15px;
2488
- left: -30px;
2489
- top: calc(100% + 20px);
2490
- line-height: 1.7em;
2491
- box-shadow: 0px 1px 18px rgba(0,0,0,.2);
2492
- display: none;
2493
- }
2494
-
2495
-
2496
-
2497
- .cff-fb-onbrd-tltp-elem[data-active="false"]{
2498
- display: none;
2499
- }
2500
- .cff-fb-onbrd-tltp-elem[data-active="true"],
2501
- .cff-fb-onbrd-tltp-hover:hover .cff-fb-onbrd-tltp-elem{
2502
- display: block;
2503
- min-width: 440px;
2504
- padding-bottom: 15px;
2505
- }
2506
- .cff-fb-onbrd-tltp-elem .sb-pointer {
2507
- position: absolute;
2508
- left: 85px;
2509
- top: -17px;
2510
- }
2511
- .cff-fb-onbrd-tltp-elem-2 .sb-pointer {
2512
- left: 485px;
2513
-
2514
- }
2515
- .cff-fb-onbrd-tltp-elem:after{
2516
- background: #fff;
2517
- z-index: 999;
2518
- top: 0px;
2519
- margin-left: -10px;
2520
- width: 40px;
2521
- box-shadow: unset;
2522
- -webkit-transform: rotate(0deg);
2523
- transform: rotate(0deg);
2524
- }
2525
- .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem{
2526
- left: 50%;
2527
- -webkit-transform:translateX(-50%);
2528
- transform:translateX(-50%);
2529
- bottom: calc(100% + 15px);
2530
- top: unset;
2531
- padding: 8px 11px;
2532
- width: 100%;
2533
- text-align: center;
2534
- box-shadow: 0 5px 9px rgb(0 0 0 / 20%), 0 -4px 9px rgb(0 0 0 / 10%);
2535
- }
2536
- .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:before {
2537
- content: '';
2538
- position: absolute;
2539
- left: 50%;
2540
- bottom: -10px;
2541
- border-top: 12px solid #fff;
2542
- border-right: 12px solid transparent;
2543
- border-left: 12px solid transparent;
2544
- -webkit-transform: translateX(-50%);
2545
- transform: translateX(-50%);
2546
- z-index: 2;
2547
- }
2548
- .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:before,
2549
- .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:after{
2550
- left: calc(50% - 10px);
2551
- top: unset;
2552
- }
2553
- .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:before{
2554
- bottom: -10px;
2555
- }
2556
- .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:after{
2557
- bottom: 0px;
2558
- }
2559
-
2560
-
2561
- #cff-builder-app .cff-fb-onbrd-tltp-txt{
2562
- margin: 0px;
2563
- }
2564
- .cff-fb-onbrd-tltp-txt:last-of-type{
2565
- margin-bottom: 0px;
2566
- }
2567
- .cff-fb-onbrd-tltp-elem .cff-fb-popup-cls{
2568
- top: 12px;
2569
- right: 16px;
2570
- }
2571
-
2572
- [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem{
2573
- right: 50px;
2574
- left: unset;
2575
- }
2576
- [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem:before,
2577
- [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem:after{
2578
- left: unset;
2579
- right: 13%
2580
- }
2581
- [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem:after{
2582
- margin-left: unset;
2583
- margin-right: -10px;
2584
- }
2585
- .cff-fd-lst-dimmed .cff-fb-onbrd-tltp-elem{
2586
- top: 100%;
2587
- }
2588
- .cff-fb-cp-clpboard{
2589
- width: 0px;
2590
- height: 0px;
2591
- position: absolute;
2592
- left: -100000px;
2593
- }
2594
- .cff-fb-copied{
2595
- position: fixed;
2596
- z-index: 9999999;
2597
- background: #010101;
2598
- color: #fff;
2599
- line-height: 1em;
2600
- font-size: 15px;
2601
- font-weight: 500;
2602
- padding: 10px 20px;
2603
- opacity: 0;
2604
- visibility: hidden;
2605
- -webkit-transition: all .2s ease-in-out, opacity .4s ease-in-out;
2606
- transition: all .2s ease-in-out, opacity .4s ease-in-out;
2607
- left: 50%;
2608
- bottom: -20px;
2609
- -webkit-transform: translateX(-50%);
2610
- transform: translateX(-50%);
2611
- }
2612
- .cff-fb-copied[data-active="true"]{
2613
- opacity: 1;
2614
- visibility: visible;
2615
- bottom: 20px;
2616
- }
2617
-
2618
- /*
2619
- ****
2620
- customizer Screens
2621
- ****
2622
- */
2623
- .sb-customizer-ctn{
2624
- /*margin-top: 52px;*/
2625
- min-height: 100vh;
2626
- }
2627
- .sb-customizer-sidebar{
2628
- position: fixed;
2629
- z-index: 100;
2630
- width: 375px;
2631
- box-shadow: 4px 0px 14px rgb(0 0 0 / 5%), 1px 0px 4px rgb(0 0 0 / 10%);
2632
- background: #fff;
2633
- left: 160px;
2634
- top: 96px;
2635
- overflow: auto;
2636
- bottom: 0px;
2637
- padding-bottom: 50px;
2638
- }
2639
- body.folded .sb-customizer-sidebar{
2640
- left: 36px;
2641
- }
2642
-
2643
- .sb-customizer-sidebar-tab-ctn{
2644
- display: flex;
2645
- justify-content: center;
2646
- align-items: center;
2647
- margin-bottom: 24px;
2648
- }
2649
- .sb-customizer-sidebar-tab{
2650
- width: 50%;
2651
- height: 56px;
2652
- background: #F3F4F5;
2653
- border-bottom: 2px solid #F3F4F5;
2654
- display: flex;
2655
- justify-content: center;
2656
- align-items: center;
2657
- cursor: pointer;
2658
- }
2659
- .sb-customizer-sidebar-tab[data-active="true"]{
2660
- border-color: #0096CC;
2661
- }
2662
- .sb-customizer-sidebar-tab:hover {
2663
- background: #fff!important;
2664
- color: #141B38!important;
2665
- }
2666
- .sb-customizer-sidebar-sec-el{
2667
- height: 52px;
2668
- cursor: pointer;
2669
- display: flex;
2670
- align-items: center;
2671
- color: #141B38;
2672
- border-bottom: 1px solid #DCDDE1;
2673
- -webkit-transition: background .2s ease-in-out;
2674
- transition: background .2s ease-in-out;
2675
- padding: 0 20px;
2676
- }
2677
- .sb-customizer-sidebar-sec-el:hover{
2678
- background: #F3F4F5;
2679
- border-bottom: 1px solid #F3F4F5;
2680
- }
2681
- .sb-customizer-sidebar-sec-el .sb-customizer-chevron svg{
2682
- position: absolute;
2683
- right: 22px;
2684
- top: 22px;
2685
- }
2686
- .sb-customizer-sidebar-sec-el-icon{
2687
- margin-right: 15px;
2688
- width: 30px;
2689
- height: 30px;
2690
- display: flex;
2691
- justify-content: center;
2692
- align-items: center;
2693
- }
2694
- .sb-customizer-sidebar-sec-el-icon svg{
2695
- width: 20px;
2696
- float: left;
2697
- fill: currentColor;
2698
- }
2699
- .sb-customizer-sidebar-sec-elhead{
2700
- height: 50px;
2701
- padding: 0 20px;
2702
- display: flex;
2703
- align-items: center;
2704
- margin-top: 30px;
2705
- font-style: normal;
2706
- font-weight: bold;
2707
- font-size: 12px;
2708
- line-height: 160%;
2709
- letter-spacing: 0.05em;
2710
- text-transform: uppercase;
2711
- color: #8C8F9A;
2712
- }
2713
- .sb-customizer-sidebar-header{
2714
- padding: 20px 20px;
2715
- border-bottom: 1px solid #DCDDE1;
2716
- }
2717
- .sb-customizer-sidebar-header[data-separator="none"]{
2718
- border-bottom: 0px!important;
2719
- padding-bottom: 0px;
2720
- }
2721
- .sb-customizer-sidebar-header a{
2722
- cursor: pointer;
2723
- }
2724
- .sb-customizer-sidebar-breadcrumb{
2725
- margin-bottom: 15px;
2726
- }
2727
- .sb-breadcrumb-pro-label{
2728
- color: #fff !important;
2729
- display: inline-block;
2730
- background: var(--cl-orange);
2731
- padding: 5px 8px;
2732
- font-size: 11px;
2733
- line-height: 1em !important;
2734
- border-radius: 4px;
2735
- -webkit-transform: translateX(5px) translateY(-4px);
2736
- transform: translateX(8px) translateY(-2px);
2737
- }
2738
- .sb-control-elem-label .sb-breadcrumb-pro-label{
2739
- -webkit-transform: translateX(5px) translateY(0px);
2740
- transform: translateX(5px) translateY(0px);
2741
- }
2742
-
2743
- .sb-customizer-sidebar-breadcrumb a, .sb-customizer-sidebar-breadcrumb span{
2744
- display: inline-block;
2745
- position: relative;
2746
- cursor: pointer;
2747
- color: #434960;
2748
- text-transform: uppercase;
2749
- font-size: 10px;
2750
- line-height: 160%;
2751
- letter-spacing: 0.08em;
2752
- padding: 0 17px;
2753
- height: 20px;
2754
- font-weight: 600;
2755
- }
2756
- .sb-customizer-sidebar-breadcrumb span{
2757
- cursor: text;
2758
- }
2759
- .sb-customizer-sidebar-breadcrumb svg {
2760
- position: absolute;
2761
- left: 4px;
2762
- top: 6px;
2763
-
2764
- }
2765
-
2766
-
2767
- .sb-customizer-sidebar-header strong{
2768
- font-size: 26px;
2769
- color: #141B38;
2770
- display: block;
2771
- margin-bottom: 10px;
2772
- line-height: 1.1em;
2773
- }
2774
- .sb-customizer-sidebar-header span{
2775
- line-height: 1em;
2776
- color: #434960;
2777
- }
2778
- .sb-customizer-sidebar-header > span{
2779
- margin-bottom: 14px;
2780
- display: block;
2781
- line-height: 1.5;
2782
- }
2783
- .sb-customizer-ctrl-link{
2784
- text-decoration: underline!important;
2785
- }
2786
- /*
2787
- Controls Style
2788
- */
2789
- .sb-control-label[data-title="true"]{
2790
- font-weight: 600;
2791
- }
2792
-
2793
- .sb-control-elem-ctn{
2794
- display: flex;
2795
- color: #141B38;
2796
- padding: 20px 20px;
2797
- }
2798
- .sb-control-elem-ctn[data-stacked="true"]{
2799
- padding: 5px 20px;
2800
- }
2801
- .sb-control-elem-ctn[data-type="heading"]{
2802
- padding-bottom: 0;
2803
- }
2804
- .sb-control-elem-overlay{
2805
- width: 100%!important;
2806
- height: 100%!important;
2807
- position: absolute!important;
2808
- left: 0!important;
2809
- top: 0!important;
2810
- z-index: 9!important;
2811
- background: rgba(255,255,255,0.4)!important;
2812
- }
2813
- #cff-builder-app .sb-control-elem-ctn[data-type="heading"] .sb-small-p{
2814
- font-weight: 600;
2815
- }
2816
- #cff-builder-app .sb-control-elem-ctn[data-type="heading"] .sb-control-elem-description{
2817
- font-style: normal;
2818
- font-weight: normal;
2819
- font-size: 12px;
2820
- line-height: 150%;
2821
- color: #434960;
2822
- }
2823
- #cff-builder-app .sb-control-elem-ctn[data-type="heading"] .sb-control-elem-label {
2824
- margin-bottom: 0;
2825
- }
2826
- .sb-control-elem-heading svg {
2827
- margin-left: 8px;
2828
- }
2829
- .sb-control-elem-ctn[data-separator="top"],.sb-control-elem-ctn[data-separator="both"]{
2830
- border-top: 1px solid #DCDDE1;
2831
- }
2832
- .sb-control-elem-ctn[data-separator="bottom"],.sb-control-elem-ctn[data-separator="both"]{
2833
- border-bottom: 1px solid #DCDDE1;
2834
- }
2835
- .sb-control-elem-ctn[data-type="separator"]{
2836
- padding: 0;
2837
- }
2838
- .sb-control-elem-separator{
2839
- height: 2px;
2840
- border-top: 1px solid #DCDDE1;
2841
- }
2842
-
2843
- .sb-control-elem-ctn[data-reverse="true"]{
2844
- flex-direction: row-reverse;
2845
- }
2846
- .sb-control-elem-ctn svg{
2847
- fill: currentColor;
2848
- }
2849
- .sb-control-elem-output{
2850
- padding-left: 20px;
2851
- }
2852
- .sb-control-elem-ctn[data-reverse="true"] .sb-control-elem-output{
2853
- padding-right: 20px;
2854
- padding-left: 0px;
2855
- }
2856
- .sb-control-elem-ctn[data-layout="block"]{
2857
- display: block;
2858
- }
2859
- .sb-control-elem-ctn[data-layout="block"] .sb-control-elem-label{
2860
- width: 100%;
2861
- float: left;
2862
- margin-bottom: 8px;
2863
- }
2864
- .sb-control-elem-ctn[data-layout="block"] .sb-control-elem-output{
2865
- padding: 0px;
2866
- }
2867
- .sb-control-elem-ctn[data-layout="block"] input[type="number"] {
2868
- height: 36px;
2869
- background: #FFFFFF;
2870
- border-radius: 1px 0 0 1px !important;
2871
- /*border-right-color: #F3F4F5 !important;*/
2872
- }
2873
- .sb-control-elem-ctn[data-layout="block"] [data-contains-suffix="true"] input[type="number"]{
2874
- border-right-color: #F3F4F5 !important;
2875
- }
2876
- .sb-control-elem-ctn[data-child="true"]{
2877
- padding-left: 70px;
2878
- }
2879
-
2880
- .sb-control-elem-ctn[data-layout="half"]{
2881
- align-items: center;
2882
- justify-content: flex-start;
2883
- }
2884
- .sb-control-elem-ctn[data-layout="half"][data-switcher-top="true"]{
2885
- align-items: flex-start!important;
2886
- }
2887
- .sb-control-elem-ctn[data-layout="half"][data-switcher-top="true"] .sb-control-switcher-ctn{
2888
- margin-top: 5px;
2889
- }
2890
-
2891
- .sb-control-elem-ctn[data-layout="half"] > div{
2892
- width: 100%;
2893
- }
2894
- .sb-control-elem-ctn[data-type="switcher"][data-reverse="true"][data-layout="half"] > div{
2895
- width: unset;
2896
- }
2897
- .sb-control-elem-ctn[data-layout="half"][data-reverse="true"]{
2898
- justify-content: flex-end;
2899
- }
2900
- [data-type="switcher"][data-reverse="true"][data-layout="half"] .sb-control-elem-output{
2901
- padding-right: 5px;
2902
-
2903
- }
2904
- .sb-control-elem-label-title{
2905
- display: flex;
2906
- align-items: center;
2907
- }
2908
- .sb-control-elem-description{
2909
- color: #434960;
2910
- font-size: 13px;
2911
- float: left;
2912
- margin-top: 4px;
2913
- }
2914
- .sb-control-elem-description a{
2915
- cursor: pointer;
2916
- }
2917
- .sb-control-elem-ctn[data-heading="strong"] .sb-control-elem-heading{
2918
- font-weight: 600!important;
2919
- }
2920
- .sb-control-elem-heading[data-underline="true"]{
2921
- text-decoration: underline;
2922
- }
2923
- .sb-control-elem-icon{
2924
- display: flex;
2925
- justify-content: center;
2926
- align-items: center;
2927
- }
2928
- .sb-control-elem-icon svg{
2929
- width: 16px;
2930
- float: left;
2931
- margin-right: 10px;
2932
- }
2933
- .sb-control-elem-tltp{
2934
- margin-left: 10px;
2935
- position: relative;
2936
- }
2937
- .sb-control-elem-tltp-icon{
2938
- float: left;
2939
- cursor: pointer;
2940
- }
2941
- .sb-control-elem-tltp-icon svg{
2942
- width: 14px;
2943
- float: left;
2944
- }
2945
-
2946
- /*Switcher Control*/
2947
- .sb-control-switcher-ctn{
2948
- cursor: pointer;
2949
- display: flex;
2950
- align-items: center;
2951
- float: left;
2952
- }
2953
- .sb-control-switcher{
2954
- width: 36px;
2955
- height: 18px;
2956
- border-radius: 25px;
2957
- background: #D0D1D7;
2958
- position: relative;
2959
- margin-right: 10px;
2960
- }
2961
-
2962
- .sb-control-switcher:before{
2963
- content: '';
2964
- position: absolute;
2965
- height: 14px;
2966
- width: 14px;
2967
- left: 3px;
2968
- top: 2px;
2969
- border-radius: 25px;
2970
- background: #fff;
2971
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
2972
- }
2973
- .sb-control-switcher-ctn[data-active="true"] .sb-control-switcher{
2974
- background: var(--customizer-blue);
2975
- }
2976
- .sb-control-switcher-ctn[data-active="true"] .sb-control-switcher:before{
2977
- left: 19px;
2978
- }
2979
-
2980
- /*Toggle SINGLE Control*/
2981
- .sb-control-toggle-elm{
2982
- display: flex;
2983
- align-items: center;
2984
- cursor: pointer;
2985
- height: 46px;
2986
- padding: 0 15px;
2987
- border-right: 1px solid #E8E8EB;
2988
- border-left: 1px solid #E8E8EB;
2989
- border-bottom: 1px solid #E8E8EB;
2990
- }
2991
- .sb-control-toggle-elm:first-child {
2992
- border-top: 1px solid #E8E8EB;
2993
- }
2994
- .sb-control-toggle-elm[data-disabled="true"]{
2995
- background: #F3F4F5;
2996
- }
2997
- .sb-control-toggle-extension-cover{
2998
- width: 100%;
2999
- height: 100%;
3000
- position: absolute;
3001
- left: 0px;
3002
- top: 0;
3003
- cursor: pointer;
3004
- z-index: 4;
3005
-
3006
- }
3007
-
3008
- .sb-control-toggle-deco{
3009
- width: 16px;
3010
- height: 16px;
3011
- margin-right: 13px;
3012
- box-sizing: border-box;
3013
- border-radius: 50%;
3014
- border: 2px solid #d0d1d7;
3015
- }
3016
- .sb-control-toggle-icon{
3017
- display: flex;
3018
- justify-content: center;
3019
- align-items: center;
3020
- margin-right: 13px;
3021
- }
3022
- .sb-control-toggle-icon svg{
3023
- width: 16px;
3024
- float: left;
3025
- fill: #141B38;
3026
- }
3027
- .sb-control-toggle-elm[data-active="true"]{
3028
- background: #F7FDFF;
3029
- border-radius: 2px;
3030
- border: 1px solid var(--customizer-blue);
3031
- }
3032
- .sb-control-toggle-elm[data-active="true"]{
3033
- background: #F7FDFF;
3034
- border-radius: 2px;
3035
- border: 1px solid var(--customizer-blue);
3036
- }
3037
- .sb-control-toggle-elm:hover:not(.sb-control-toggle-elm[data-disabled="true"]) .sb-control-toggle-deco,
3038
- .sb-control-toggle-elm[data-active="true"]:not(.sb-control-toggle-elm[data-disabled="true"]):hover .sb-control-toggle-deco{
3039
- border: 4px solid var(--customizer-blue);
3040
- background: #fff;
3041
- }
3042
- .sb-control-toggle-elm[data-active="true"] .sb-control-toggle-deco{
3043
- border: 6px solid var(--customizer-blue);
3044
- background: #fff;
3045
- }
3046
-
3047
- /*Toggle SET Control*/
3048
- .sb-control-toggle-set-ctn .sb-control-toggle-elm[data-active="true"]{
3049
- border-radius: 0px;
3050
- }
3051
-
3052
- /*Toggle Button Control*/
3053
- .sb-control-togglebutton-ctn{
3054
- display: flex;
3055
- align-items: center;
3056
- justify-content: center;
3057
- padding: 3px;
3058
- background: #f3f4f5;
3059
- border-radius: 4px;
3060
- border: 1px solid #eee;
3061
- height: 40px;
3062
- }
3063
- .sb-control-togglebutton-elm{
3064
- width: 100%;
3065
- display: flex;
3066
- justify-content: center;
3067
- align-items: center;
3068
- height: 33px;
3069
- cursor: pointer;
3070
- font-weight: 600;
3071
- border-radius: 4px;
3072
- text-transform: capitalize;
3073
- line-height: 1em;
3074
- }
3075
- .sb-control-togglebutton-elm[data-active="true"]{
3076
- color: var(--dark-blue);
3077
- background: #fff;
3078
- }
3079
- .sb-control-togglebutton-elm:hover{
3080
- color: var(--dark-blue);
3081
- }
3082
-
3083
- /*Input Control*/
3084
- .sb-control-input-ctn{
3085
- display: flex;
3086
- }
3087
- .sb-control-input,.sb-control-input-textrea{
3088
- height: 40px;
3089
- background: #fff;
3090
- border: 1px solid #D0D1D7!important;
3091
- border-radius: unset!important;
3092
- outline: unset!important;
3093
- padding: 0 10px!important;
3094
- line-height: 1em;
3095
- margin: 0px;
3096
- }
3097
- .sb-control-input-textrea{
3098
- padding: 10px!important;
3099
- height: 120px;
3100
- line-height: 1.5em;
3101
- }
3102
- .sb-control-input:hover{
3103
- color: inherit!important;
3104
- }
3105
- .sb-control-input:focus,.sb-control-input-textrea:focus{
3106
- border: 1px solid #8C8F9A!important;
3107
- border-radius: unset!important;
3108
- box-shadow: unset!important;
3109
- outline: unset!important;
3110
- }
3111
- .sb-control-input[disabled],.sb-control-input-textrea[disabled]{
3112
- background-color: #F3F4F5;
3113
- border: 1px solid #E8E8EB;
3114
- }
3115
- .sb-control-input-info{
3116
- display: flex;
3117
- justify-content: center;
3118
- align-items: center;
3119
- background: #F3F4F5;
3120
- padding: 0 8px;
3121
- font-weight: normal;
3122
- font-size: 14px;
3123
- line-height: 160%;
3124
- color: #434960;
3125
- border: 1px solid #D0D1D7;
3126
- border-left: none;
3127
- border-radius: 0 1px 1px 0 !important;
3128
- }
3129
-
3130
- /*CheckBox Control*/
3131
- .sb-control-checkbox-ctn{
3132
- cursor: pointer;
3133
- display: flex;
3134
- }
3135
- .sb-control-checkbox{
3136
- width: 18px;
3137
- height: 18px;
3138
- border-radius: 2px;
3139
- float: left;
3140
- border: 2px solid #D0D1D7;
3141
- box-sizing: border-box;
3142
- position: relative;
3143
- margin-right: 10px;
3144
- flex: none;
3145
- }
3146
- .sb-control-checkbox-ctn > div{
3147
- z-index: 3;
3148
- }
3149
- .sb-control-checkbox-ctn:hover .sb-control-checkbox-hover{
3150
- opacity: 1;
3151
- }
3152
- .sb-control-checkbox-hover{
3153
- position: absolute;
3154
- left: -20px;
3155
- top: 0px;
3156
- width: calc(100% + 40px);
3157
- height: 100%;
3158
- background:#F3F4F5;
3159
- z-index: 1;
3160
- opacity: 0;
3161
- }
3162
-
3163
- .sb-control-checkbox{
3164
- z-index: 5!important;
3165
- }
3166
-
3167
-
3168
- .sb-control-checkbox[data-active="true"]{
3169
- background: var(--customizer-blue);
3170
- border-color: var(--customizer-blue);
3171
- color: #fff;
3172
- }
3173
- .sb-control-checkbox[data-active="true"]:before{
3174
- content: '';
3175
- position: absolute;
3176
- width: 8px;
3177
- height: 4px;
3178
- top: 2px;
3179
- left: 2px;
3180
- border-left: 2px solid currentColor;
3181
- border-bottom: 2px solid currentColor;
3182
- -webkit-transform: rotate(-45deg);
3183
- transform: rotate(-45deg);
3184
- }
3185
-
3186
-
3187
- /*Action Button Control*/
3188
- .sb-control-action-button{
3189
- height: 38px;
3190
- cursor: pointer;
3191
- display: flex;
3192
- flex-direction: row;
3193
- justify-content: center;
3194
- align-items: center;
3195
- background: #F3F4F5;
3196
- border-radius: 2px;
3197
- border: 1px solid #DCDDE1;
3198
- position: relative;
3199
- line-height: 1em;
3200
- margin-top: 7px;
3201
- }
3202
-
3203
- .sb-control-action-button div{
3204
- float: left;
3205
- width: 20px;
3206
- height: 20px;
3207
- display: flex;
3208
- justify-content: center;
3209
- align-items: center;
3210
- margin-right: 8px;
3211
- }
3212
- .sb-control-action-button svg{
3213
- width: 17px;
3214
- }
3215
-
3216
- /* WPColorPicker Control Redesign */
3217
- .sb-control-colorpicker-ctn .wp-picker-default{
3218
- display: none!important;
3219
- }
3220
- .sb-control-colorpicker-ctn .minicolors-theme-default.minicolors{
3221
- width: 100%;
3222
- }
3223
-
3224
- .sb-control-colorpicker-ctn .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
3225
- /*
3226
- left: auto;
3227
- right: 6px;
3228
- top: 6px;
3229
- width: 26px;
3230
- height: 26px;
3231
- background: #F9F9FA;
3232
- border: 0px;
3233
- */
3234
-
3235
- left: auto;
3236
- right: 1px;
3237
- top: 1px;
3238
- width: 35px;
3239
- height: 35px;
3240
- background: #F9F9FA;
3241
- border: 0px;
3242
- }
3243
- .minicolors-swatch-color{
3244
- box-shadow: none;
3245
- }
3246
- .sb-control-colorpicker-ctn .minicolors-input,.sb-control-colorpicker-ctn .minicolors-input:focus{
3247
- height: 37px;
3248
- width: 100%!important;
3249
- background: #fff;
3250
- border: 1px solid #D0D1D7!important;
3251
- border-radius: unset!important;
3252
- outline: unset!important;
3253
- box-shadow: unset!important;
3254
- padding: 0 10px!important;
3255
- line-height: 1em;
3256
- margin: 0px;
3257
- }
3258
- .sb-control-colorpicker-ctn .minicolors-input:focus{
3259
- border: 1px solid #0096CC!important;
3260
- }
3261
-
3262
- [data-type="colorpicker"] .minicolors-input{
3263
- font-size: 13px;
3264
- }
3265
- [data-type="colorpicker"] .minicolors-input{
3266
- font-style: normal;
3267
- font-weight: normal;
3268
- font-size: 12px;
3269
- line-height: 150%;
3270
- color: #434960;
3271
- }
3272
-
3273
- .sb-control-colorpicker-btn{
3274
- height: 38px;
3275
- display: flex;
3276
- justify-content: center;
3277
- align-items: center;
3278
- border: 1px solid #DCDDE1;
3279
- border-left: 0px;
3280
- padding: 0 10px;
3281
- background: #F3F4F5;
3282
- font-style: normal;
3283
- font-weight: 600;
3284
- font-size: 12px;
3285
- line-height: 160%;
3286
- color: #141B38;
3287
- cursor: pointer;
3288
- box-sizing: border-box;
3289
- }
3290
- .sb-control-colorpicker-ctn[data-picker-style="reset"] .minicolors-input,
3291
- .sb-control-coloroverride-ctn{
3292
- background: #F3F4F5!important;
3293
- border: 1px solid #DCDDE1!important;
3294
- }
3295
- .sb-control-colorpicker-ctn[data-picker-style="reset"] .minicolors-theme-default.minicolors-position-right .minicolors-swatch,
3296
- .sb-control-coloroverride-ctn .sb-control-coloroverride-swatch{
3297
- top: 8px;
3298
- width: 22px;
3299
- height: 22px;
3300
- }
3301
- .sb-control-coloroverride-ctn .sb-control-coloroverride-swatch{
3302
- position: absolute;
3303
- right: 10px;
3304
- }
3305
- .sb-control-coloroverride-ctn .sb-control-colorpicker-btn{
3306
- margin-left: auto;
3307
- border: 0px!important;
3308
- border-left: 1px solid #DCDDE1!important;
3309
- }
3310
- .sb-control-coloroverride-ctn .sb-control-coloroverride-content{
3311
- width: 100%;
3312
- display: flex;
3313
- align-items: center;
3314
- position: relative;
3315
- }
3316
- .sb-control-coloroverride-ctn .sb-control-coloroverride-txt{
3317
- padding-left: 9px;
3318
- box-sizing: border-box;
3319
- }
3320
-
3321
- /*
3322
- Customizer Preview
3323
- */
3324
- .sb-customizer-preview{
3325
- min-height: 100px;
3326
- width: calc(100% - 375px);
3327
- float: right;
3328
- box-sizing: border-box;
3329
- padding: 0 20px;
3330
- display: flex;
3331
- justify-content: center;
3332
- margin-top: 64px;
3333
- position: relative;
3334
- flex-wrap: wrap;
3335
- }
3336
- .sb-customizer-preview #cff-admin-notices{
3337
- margin-top: 20px;
3338
- width: 100%;
3339
- }
3340
- .sb-customizer-preview .license-details-modal .cff-modal-content {
3341
- max-height: none;
3342
- height: auto;
3343
- }
3344
- .sb-customizer-preview .cff-sb-modal-body .sb-why-renew-list:nth-child(3) {
3345
- margin-bottom: 0;
3346
- }
3347
- .sb-customizer-preview .cff-sb-modal-body .sb-why-renew-list:last-child {
3348
- margin-bottom: 0;
3349
- }
3350
- .sb-customizer-preview[data-preview-device="desktop"] .sb-preview-ctn{
3351
- width: 100%;
3352
- max-width: 1200px;
3353
- }
3354
- .sb-customizer-preview[data-preview-device="tablet"] .sb-preview-ctn{
3355
- max-width: 100%;
3356
- width: 800px;
3357
- }
3358
- .sb-customizer-preview[data-preview-device="mobile"] .sb-preview-ctn{
3359
- max-width: 100%;
3360
- width: 400px;
3361
- }
3362
- .cff-preview-ctn {
3363
- padding: 10px;
3364
- }
3365
-
3366
- .sb-preview-top-chooser{
3367
- padding: 18px 0 16px;
3368
- display: flex;
3369
- color: #434960;
3370
- align-items: center;
3371
- }
3372
- .sb-preview-top-chooser strong{
3373
- font-style: normal;
3374
- font-weight: bold;
3375
- font-size: 12px;
3376
- line-height: 160%;
3377
- letter-spacing: 0.05em;
3378
- text-transform: uppercase;
3379
- color: #434960;
3380
- }
3381
- .sb-preview-chooser{
3382
- height: 36px;
3383
- background: #E8E8EB;
3384
- margin-left: auto;
3385
- padding: 0 2px;
3386
- border-radius: 1px;
3387
- display: flex;
3388
- justify-content: center;
3389
- align-items: center;
3390
- }
3391
- .sb-preview-chooser-btn,.sb-preview-chooser-btn:focus{
3392
- width: 40px;
3393
- height: 32px;
3394
- display: flex;
3395
- justify-content: center;
3396
- align-items: center;
3397
- cursor: pointer;
3398
- float: left;
3399
- border: 0;
3400
- background: unset;
3401
- outline: none;
3402
- }
3403
-
3404
- .sb-preview-chooser-btn svg{
3405
- width: 15px;
3406
- fill: currentColor;
3407
- float: left;
3408
- }
3409
- .sb-preview-chooser-btn.sb-mobilee svg{
3410
- width: 9px;
3411
- fill: currentColor;
3412
- float: left;
3413
- }
3414
- .sb-preview-chooser-btn[data-active="true"],
3415
- .sb-preview-chooser-btn:hover{
3416
- background: #fff!important;
3417
- box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
3418
- border-radius: 1px;
3419
- }
3420
-
3421
- .sb-control-checkboxsection-header{
3422
- width: 100%;
3423
- margin-top: 25px;
3424
- display: flex;
3425
- align-items: center;
3426
- text-transform: uppercase;
3427
- font-size: 13px;
3428
- padding-bottom: 15px;
3429
- position: relative;
3430
- }
3431
- .sb-control-checkboxsection-header:before{
3432
- content: '';
3433
- position: absolute;
3434
- left: -20px;
3435
- width: calc(100% + 40px);
3436
- height: 1px;
3437
- background: #DCDDE1;
3438
- bottom: 0px;
3439
- }
3440
- .sb-control-checkboxsection-name{
3441
- display: flex;
3442
- align-items: center;
3443
- }
3444
- .sb-control-checkboxsection-header svg{
3445
- width: 20px;
3446
- margin-right: 7px;
3447
- fill: #434960;
3448
- float: left;
3449
- }
3450
- .sb-control-checkboxsection-header > strong{
3451
- margin-left: auto;
3452
- }
3453
- [data-type="checkboxsection"] .sb-control-checkbox-ctn{
3454
- align-items: center;
3455
- height: 50px;
3456
- }
3457
- [data-type="checkboxsection"] {
3458
- padding: 0 20px !important;
3459
- }
3460
- [data-type="checkboxsection"] .sb-control-elem-label{
3461
- display: none;
3462
- }
3463
- [data-type="checkboxsection"] strong{
3464
- color: #434960
3465
- }
3466
- [data-type="checkboxsection"] [data-active="true"] strong{
3467
- color: #141B38;
3468
- }
3469
- .sb-control-checkboxsection-btn{
3470
- width: 21px;
3471
- height: 21px;
3472
- position: relative;
3473
- cursor: pointer;
3474
- }
3475
- .sb-control-checkboxsection-btn:before{
3476
- content: '';
3477
- position: absolute;
3478
- width: 7px;
3479
- height: 7px;
3480
- left: 5px;
3481
- top: 7px;
3482
- border-right: 2px solid #8C8F9A;
3483
- border-bottom: 2px solid #8C8F9A;
3484
- -webkit-transform: rotate(-45deg);
3485
- transform: rotate(-45deg);
3486
- }
3487
-
3488
- /*Disabled Controls*/
3489
- .sb-control-elem-ctn[data-disabled="true"] input[type="text"],
3490
- .sb-control-elem-ctn[data-disabled="true"] input[type="number"],
3491
- .sb-control-elem-ctn[data-disabled="true"] input[type="date"],
3492
- .sb-control-elem-ctn[data-disabled="true"] textarea{
3493
- background: #f0f0f0!important;
3494
- border-color: #D0D1D7!important;
3495
- }
3496
-
3497
- .sb-control-elem-ctn[data-disabled="true"] .sb-control-colorpicker-swatch{
3498
- background: #D0D1D7!important;
3499
- }
3500
- .sb-control-elem-ctn[data-disabled="true"] .sb-control-checkbox{
3501
- background: #D0D1D7!important;
3502
- border-color: #c1c1c1!important;
3503
- }
3504
- .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm{
3505
- background: #e5e6e7!important;
3506
- }
3507
- .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm{
3508
- border-color: #c1c1c1!important;
3509
- }
3510
- .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm[data-active="true"]{
3511
- border-top: 0px;
3512
- }
3513
- .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm .sb-control-toggle-deco{
3514
- border-color: #bbb!important;
3515
- }
3516
- .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm[data-active="true"] .sb-control-toggle-deco{
3517
- border-color: #8C8F9A!important;
3518
-
3519
- }
3520
-
3521
- /*Source Controls*/
3522
- .sb-control-sources-ctn .cff-fb-srcs-item{
3523
- box-sizing: border-box;
3524
- position: relative;
3525
- cursor: auto;
3526
- display: block;
3527
- height: auto;
3528
- border: 1px solid #E7E7E9;
3529
- min-height: 60px;
3530
- overflow: auto;
3531
- margin-top: 0px;
3532
- }
3533
- .cff-fb-srcs-item-ins{
3534
- cursor: pointer;
3535
- display: flex;
3536
- height: 62px;
3537
- padding: 0 10px;
3538
- position: relative;
3539
- }
3540
- .sb-control-src-icon{
3541
- width: 20px;
3542
- height: 20px;
3543
- position: absolute;
3544
- right: 10px;
3545
- top: 10px;
3546
- z-index: 2;
3547
- cursor: pointer;
3548
- display: flex;
3549
- justify-content: center;
3550
- align-items: center;
3551
- }
3552
- .sb-control-src-icon svg{
3553
- width: 13px;
3554
- float: left;
3555
- }
3556
- [data-expanded="true"] .sb-control-src-expand svg,.cff-fb-srcs-info {
3557
- display: none
3558
- }
3559
- .sb-control-src-expand-chevron{
3560
- width: 7px;
3561
- height: 7px;
3562
- border-left: 2px solid currentColor;
3563
- border-top: 2px solid currentColor;
3564
- -webkit-transform: rotate(45deg);
3565
- transform: rotate(45deg);
3566
- display: none;
3567
- }
3568
- [data-expanded="true"] .sb-control-src-expand-chevron,[data-expanded="true"] .cff-fb-srcs-info {
3569
- display: block;
3570
- }
3571
- .sb-control-src-remove svg{
3572
- width: 11px;
3573
- fill: var(--error-red);
3574
- }
3575
- .sb-control-sources-ctn[data-multifeed="true"] .sb-control-src-expand {
3576
- right: 30px;
3577
- }
3578
- .sb-control-elem-output .sb-control-src-expand:hover {
3579
- background: #F3F4F5;
3580
- border-radius: 3px;
3581
- }
3582
- .sb-control-elem-output .sb-control-src-expand:hover path{
3583
- fill: #111;
3584
- }
3585
-
3586
- .sb-control-sources-ctn .cff-fb-srcs-item .cff-fb-srcs-item-name{
3587
- font-size: 17px;
3588
- line-height: 1em;
3589
- margin-bottom: 3px;
3590
- }
3591
-
3592
- .cff-fb-srcs-info-item{
3593
- display: flex;
3594
- border-top: 1px solid #E7E7E9;
3595
- box-sizing: border-box;
3596
- width: 100%;
3597
- float: left;
3598
- padding: 8px 10px;
3599
- }
3600
- .cff-fb-srcs-info-item:first-of-type{
3601
- align-items: center;
3602
- }
3603
- .cff-fb-srcs-info-item strong{
3604
- font-size: 14px;
3605
- width: 50px;
3606
- }
3607
- .cff-fb-srcs-info-item span{
3608
- font-size: 13px;
3609
- line-height: 1.1em;
3610
- color: #434960;
3611
- font-weight: 400;
3612
- display: inline-block;
3613
- word-break: break-all;
3614
- width: calc(100% - 80px);
3615
- padding: 0 15px;
3616
- box-sizing: border-box;
3617
- }
3618
- .cff-fb-srcs-info-icon{
3619
- width: 26px;
3620
- height: 26px;
3621
- display: flex;
3622
- justify-content: center;
3623
- align-items: center;
3624
- cursor: pointer;
3625
- margin-left: auto;
3626
- border: 1px solid #D0D1D7;
3627
- border-radius: 2px;
3628
- }
3629
- .cff-fb-srcs-info-icon svg{
3630
- width: 15px;
3631
- float: left;
3632
- }
3633
- .sb-control-sources-ctn .sb-control-action-button{
3634
- margin-top: 8px;
3635
- margin-bottom: 16px;
3636
- }
3637
- .sb-control-sources-promo-ctn{
3638
- padding: 16px 0;
3639
- }
3640
- .sb-control-sources-promo-ctn:before{
3641
- content: '';
3642
- position: absolute;
3643
- height: 1px;
3644
- width: calc(100% + 40px);
3645
- left: -20px;
3646
- top: 0px;
3647
- background: #E7E7E9;
3648
- }
3649
- .sb-control-sources-promo-top{
3650
- width: 100%;
3651
- box-sizing: border-box;
3652
- padding: 30px 20px;
3653
- border: 1px solid #E8E8EB;
3654
- float: left;
3655
- background: #F9F9FA;
3656
- }
3657
- .sb-control-sources-promo-top > div{
3658
- width: 100%;
3659
- float: left;
3660
- text-align: center;
3661
- display: flex;
3662
- justify-content: center;
3663
- align-items: center;
3664
- box-sizing: border-box;
3665
- line-height: 1.6em;
3666
- }
3667
- .sb-btn-chevron{
3668
- display: inline-block;
3669
- width: 7px;
3670
- height: 7px;
3671
- border-right: 2px solid currentColor;
3672
- border-top: 2px solid currentColor;
3673
- -webkit-transform: rotate(45deg);
3674
- transform: rotate(45deg);
3675
- }
3676
- .sb-control-sources-promo-text{
3677
- font-size: 15px;
3678
- font-weight: 600;
3679
- }
3680
- .sb-control-sources-promo-btn{
3681
- display: flex;
3682
- align-items: center;
3683
- justify-content: center;
3684
- padding: 16px 20px;
3685
- color: #fff !important;
3686
- background: #0068A0;
3687
- font-size: 15px;
3688
- }
3689
- .sb-control-sources-promo-btn div{
3690
- margin-left: 10px;
3691
- }
3692
- .sb-control-sources-promo-icon{
3693
- margin-bottom: 20px;
3694
- }
3695
-
3696
- /*Loading Bar*/
3697
- .sb-loadingbar-ctn{
3698
- position: absolute;
3699
- height: 5px;
3700
- width: 100%;
3701
- left: 0px;
3702
- bottom: 0px;
3703
- background: rgba(227, 79, 14, 0.25);
3704
- z-index: 999999999999999;
3705
- }
3706
- .sb-loadingbar-ctn:before, .sb-loadingbar-ctn:after{
3707
- content: '';
3708
- position: absolute;
3709
- height: 5px;
3710
- background: #E34F0E;
3711
- z-index: 9;
3712
- top: 0;
3713
- }
3714
-
3715
- .sb-loadingbar-ctn:before{
3716
- -webkit-animation: cff-loading-animation 4s infinite;
3717
- animation: cff-loading-animation 4s infinite;
3718
- }
3719
- .sb-loadingbar-ctn:after{
3720
- -webkit-animation: cff-loading-animation 4s 2s infinite;
3721
- animation: cff-loading-animation 4s 2s infinite;
3722
- }
3723
-
3724
- @-webkit-keyframes cff-loading-animation {
3725
- from { left: -5%; width: 0%; }
3726
- to { left: 130%; width: 50%;}
3727
- }
3728
- @keyframes cff-loading-animation {
3729
- from { left: -5%; width: 0%; }
3730
- to { left: 130%; width: 50%;}
3731
- }
3732
-
3733
- /*Notification Element*/
3734
- .sb-notification-ctn{
3735
- position: fixed;
3736
- bottom: -100px;
3737
- left: 200px;
3738
- z-index: 99999;
3739
- background: #fff;
3740
- display: flex;
3741
- justify-content: center;
3742
- align-items: center;
3743
- border-left: 3px solid #fff;
3744
- line-height: 1em;
3745
- padding: 10px 20px;
3746
- padding-left: 0px;
3747
- border-radius: 4px;
3748
- box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
3749
-
3750
- }
3751
- .sb-notification-ctn[data-active="hidden"]{
3752
- -webkit-animation: cff-notification-hide .5s forwards linear;
3753
- animation: cff-notification-hide .5s forwards linear;
3754
- }
3755
- .sb-notification-ctn[data-active="shown"]{
3756
- -webkit-animation: cff-notification-show .5s forwards linear;
3757
- animation: cff-notification-show .5s forwards linear;
3758
- }
3759
- @-webkit-keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
3760
- @keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
3761
-
3762
- @-webkit-keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
3763
- @keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
3764
-
3765
- .sb-notification-ctn[data-type="success"]{
3766
- border-color: #59AB46;
3767
- }
3768
- .sb-notification-ctn[data-type="error"]{
3769
- border-color: #D72C2C;
3770
- }
3771
- .sb-notification-ctn[data-type="message"]{
3772
- border-color: #141B38;
3773
- }
3774
- .sb-notification-icon{
3775
- width: 25px;
3776
- height: 25px;
3777
- display: flex;
3778
- justify-content: center;
3779
- align-items: center;
3780
- margin-left: 10px;
3781
- margin-right: 15px;
3782
- }
3783
- .sb-notification-icon svg{
3784
- width: 22px;
3785
- height: 22px;
3786
- float: left;
3787
- fill: currentColor;
3788
- }
3789
-
3790
- .sb-notification-ctn[data-type="success"] .sb-notification-icon{
3791
- color: #59AB46;
3792
- }
3793
- .sb-notification-ctn[data-type="error"] .sb-notification-icon{
3794
- color: #D72C2C;
3795
- }
3796
- .sb-notification-ctn[data-type="message"] .sb-notification-icon{
3797
- color: #141B38;
3798
- }
3799
-
3800
- .sb-notification-ctn span{
3801
- font-size: 14px;
3802
- color: #141B38;
3803
- font-weight:500;
3804
- }
3805
-
3806
- /* Onboarding */
3807
- .sb-onboarding-tooltip {
3808
- display: none;
3809
- position: absolute;
3810
- min-height: auto;
3811
- width: 432px;
3812
- max-width: 100%;
3813
- padding: 0;
3814
- border-radius: 2px;
3815
- }
3816
- #sb-onboarding-tooltip-multiple-2,
3817
- #sb-onboarding-tooltip-multiple-3{
3818
- width: 528px;
3819
- }
3820
- #sb-onboarding-tooltip-single-2 {
3821
- width: 402px;
3822
- z-index: 99999999999999;
3823
- }
3824
- .sb-onboarding-active .sb-onboarding-highlight .cff-fb-btn.cff-fb-btn-new,
3825
- .sb-onboarding-active .sb-positioning-wrap.sb-onboarding-highlight,
3826
- .sb-onboarding-active .cff-fd-lst-bigctn .cff-table-wrap.sb-onboarding-highlight,
3827
- .sb-onboarding-active .cff-fb-lgc-ctn.sb-onboarding-highlight,
3828
- .sb-onboarding-active .cff-fb-lgc-ctn .cff-legacy-table-wrap.sb-onboarding-highlight{
3829
- position: relative;
3830
- z-index: 100000;
3831
- }
3832
- .sb-onboarding-active .cff-fd-legacy-feed-toggle {
3833
- display: none;
3834
- }
3835
- .cff-legacy-table-wrap.sb-onboarding-highlight {
3836
- clear: both;
3837
- }
3838
- .sb-onboarding-tooltip-1 {
3839
- top: 50px;
3840
- left: 8px;
3841
- }
3842
- #sb-onboarding-tooltip-single-2 {
3843
- bottom: -179px;
3844
- top: auto;
3845
- left: 68%;
3846
- margin-left: -201px;
3847
- }
3848
- #sb-onboarding-tooltip-multiple-2,
3849
- #sb-onboarding-tooltip-multiple-3{
3850
- top: -200px;
3851
- left: 20%;
3852
- }
3853
- #sb-onboarding-tooltip-multiple-3 {
3854
- top: -210px;
3855
- }
3856
- .sb-onboarding-tooltip .cff-fb-wrapper {
3857
- display: flex;
3858
- justify-content: flex-end;
3859
- }
3860
- .sb-positioning-wrap {
3861
- width: 432px;
3862
- }
3863
- .sb-onboarding-tooltip .cff-fb-popup-cls {
3864
- position:absolute;
3865
- width: 12px;
3866
- height: 12px;
3867
- top: 12px;
3868
- right: 12px;
3869
- }
3870
- .sb-onboarding-tooltip .cff-fb-popup-cls svg {
3871
- width: 12px;
3872
- height: 12px;
3873
- }
3874
- .sb-onboarding-tooltip h3 {
3875
- font-size: 16px;
3876
- color: #141B38;
3877
- line-height: 160%;
3878
- font-weight: 600;
3879
- margin: 0;
3880
- }
3881
- .sb-onboarding-step {
3882
- font-style: normal;
3883
- font-weight: normal;
3884
- font-size: 12px;
3885
- line-height: 160%;
3886
- color: #434960;
3887
- margin: 2px 0 20px;
3888
- display: block;
3889
- }
3890
- .cff-onboarding-next,
3891
- .cff-onboarding-previous{
3892
- color: #353A41;
3893
- background: #F3F4F5;
3894
- border: 1px solid #DCDDE1;
3895
- margin-left: 10px;
3896
- }
3897
- .sb-onboarding-tooltip .cff-fb-hd-btn {
3898
- margin-right: 0;
3899
- }
3900
- .sb-onboarding-tooltip .cff-fb-hd-btn i {
3901
- margin: 0;
3902
- }
3903
- .cff-onboarding-finish{
3904
- margin-left: 10px;
3905
- padding: 0 32px;
3906
- }
3907
- .sb-onboarding-tooltip .cff-fb-hd-btn[data-active="false"] {
3908
- background-color: #e8e8eb;
3909
- color: #8c8f99;
3910
- }
3911
- .sb-onboarding-tooltip .cff-fb-hd-btn[data-active="false"]:hover {
3912
- cursor: default;
3913
- }
3914
- .sb-step-counter-wrap span {
3915
- font-style: normal;
3916
- font-weight: bold;
3917
- font-size: 12px;
3918
- line-height: 160%;
3919
- letter-spacing: 0.05em;
3920
- text-transform: uppercase;
3921
- color: #141B38;
3922
- }
3923
- .sb-onboarding-tooltip .sb-pointer {
3924
- position: absolute;
3925
- left: 50px;
3926
- top: -14px;
3927
- }
3928
- .sb-onboarding-tooltip .sb-pointer.sb-bottom-pointer {
3929
- top: auto;;
3930
- bottom: -14px;
3931
- }
3932
- #sb-onboarding-tooltip-single-2 .sb-pointer {
3933
- left: 193px;
3934
- }
3935
- #sb-onboarding-tooltip-multiple-2:before,
3936
- #sb-onboarding-tooltip-multiple-3:before{
3937
- bottom: -8px;
3938
- }
3939
- .sb-onboarding-top-row {
3940
- padding: 20px 44px 0 24px;
3941
- }
3942
- .sb-onboarding-bottom-row {
3943
- display: flex;
3944
- flex-direction: row;
3945
- justify-content: space-between;
3946
- align-items: center;
3947
- padding: 8px 16px 12px 24px;
3948
- }
3949
-
3950
-
3951
- /*Vue Color Picker*/
3952
- .sb-control-colorpicker-ctn .vc-sketch{
3953
- box-shadow: none!important;
3954
- }
3955
- .sb-control-colorpicker-popup{
3956
- box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
3957
- position: absolute;
3958
- z-index: 99;
3959
- top: 100%;
3960
- background: #fff;
3961
- right: 0px;
3962
- }
3963
- .sb-control-colorpicker-popup .sb-colorpicker-reset-btn{
3964
- width: calc(100% - 20px);
3965
- margin-left: 10px;
3966
- margin-bottom: 15px;
3967
- }
3968
- .sb-control-colorpicker-swatch{
3969
- width: 38px;
3970
- height: 38px;
3971
- position: absolute;
3972
- right: 1px;
3973
- top: 1px;
3974
- background: #f7f7f7;
3975
- }
3976
- .sb-control-colorpicker-ctn .sb-control-input{
3977
- width: 100%;
3978
- }
3979
-
3980
- @media (min-width: 768px) and (max-width: 1023px) {
3981
- .cff-csz-header-insider {
3982
- width: 100%;
3983
- }
3984
- .cff-csz-header-insider .sb-button-standard {
3985
- padding: 10px 14px 10px 30px;
3986
- }
3987
- }
3988
- @media (min-width: 1024px) and (max-width: 1200px) {
3989
- .cff-fb-wlcm-inf-3 {
3990
- padding-left: 120px;
3991
- }
3992
- }
3993
- @media (max-width: 767px) {
3994
- .cff-fd-lst-thtf th:nth-child(3),
3995
- .cff-fd-lst-thtf th:nth-child(4),
3996
- .cff-fd-lst-tbody tr td:nth-child(3),
3997
- .cff-fd-lst-tbody tr td:nth-child(4),
3998
- .cff-fd-lst-thtf tr td:nth-child(3),
3999
- .cff-fd-lst-thtf tr td:nth-child(4) {
4000
- display: none;
4001
- }
4002
- .cff-fd-lst-thtf th:last-child,
4003
- .cff-fd-lst-thtf tr td:last-child {
4004
- padding-right: 15px;
4005
- text-align: right;
4006
- }
4007
- .cff-fd-lst-tbody tr td.cff-fd-lst-actions .sb-flex-center{
4008
- justify-content: flex-end;
4009
- padding-right: 8px;
4010
- }
4011
- .cff-fb-full-wrapper {
4012
- padding: 70px 20px 0 20px;
4013
- }
4014
- .cff-fb-header {
4015
- padding: 0px 20px;
4016
- }
4017
- .cff-bld-ft-content {
4018
- flex-wrap: wrap;
4019
- }
4020
- #sb-footer-banner .cff-bld-ft-img {
4021
- width: 100%;
4022
- height: 140px;
4023
- }
4024
- #sb-footer-banner .cff-bld-ft-img img {
4025
- height: 100%;
4026
- width: auto;
4027
- }
4028
- #sb-footer-banner .cff-bld-ft-txt {
4029
- justify-content: center;
4030
- align-items: center;
4031
- width: 100%;
4032
- margin-right: 3%;
4033
- padding: 20px;
4034
- }
4035
- .cff-bld-ft-action {
4036
- width: 100%;
4037
- padding: 0 20px 20px;
4038
- }
4039
- .cff-bld-footer > div {
4040
- margin-bottom: 60px;
4041
- }
4042
-
4043
- /* single feed page */
4044
- .cff-csz-header-insider {
4045
- flex-wrap: wrap;
4046
- height: auto;
4047
- width: 100%;
4048
- }
4049
- .cff-fb-header.cff-csz-header {
4050
- height: 110px;
4051
- }
4052
- .cff-csz-header.cff-fb-header {
4053
- padding-bottom: 6px;
4054
- }
4055
- .cff-csz-header .cff-csz-hd-actions {
4056
- margin-top: 10px;
4057
- }
4058
- .sb-customizer-preview {
4059
- display: none;
4060
- }
4061
- .sb-customizer-ctn .sb-customizer-sidebar {
4062
- position: initial;
4063
- margin-top: 110px;
4064
- width: 100%;
4065
- }
4066
- .sb-notification-ctn {
4067
- left: 20px;
4068
- }
4069
- .cff-fb-header .sb-button-standard{
4070
- padding: 10px 10px 10px 31px;
4071
- }
4072
- .cff-fb-embed-ctn.sb-fs-boss.cff-fb-center-boss .cff-fb-popup-inside {
4073
- top: 35px;
4074
- }
4075
- .cff-fb-embed-btns-ctn {
4076
- grid-template-columns: 100%;
4077
- }
4078
- .cff-fb-embed-btns-ctn .cff-fb-embed-btn {
4079
- margin-bottom: 10px;
4080
- }
4081
- .cff-fb-embed-ctn.sb-fs-boss.cff-fb-center-boss .cff-fb-popup-inside .cff-fb-embed-step-1-top {
4082
- margin-bottom: 10px;
4083
- }
4084
- .cff-fb-embed-ctn.sb-fs-boss.cff-fb-center-boss .cff-fb-popup-inside .cff-fb-embed-input-ctn {
4085
- flex-wrap: wrap;
4086
- }
4087
- .cff-fb-embed-input-ctn input, .cff-fb-embed-input-ctn input[type="text"] {
4088
- width: 100%;
4089
- border-right: 1px solid #D0D1D7!important;
4090
- }
4091
- .cff-fb-embed-input-ctn .cff-fb-hd-btn {
4092
- width: 32%;
4093
- max-width: 120px;
4094
- margin-top: 10px !important;
4095
- padding: 8px;
4096
- }
4097
- .sb-fs-boss.cff-fb-center-boss {
4098
- z-index: 100001 !important;
4099
- }
4100
- #sb-footer-banner .cff-bld-ft-txt {
4101
- flex-wrap: wrap;
4102
- }
4103
- #cff-builder-app #sb-footer-banner h3,
4104
- #cff-builder-app #sb-footer-banner .sb-small-p {
4105
- width: 100%;
4106
- }
4107
- #cff-builder-app #sb-footer-banner h3 {
4108
- margin-bottom: 10px;
4109
- }
4110
- .cff-fb-srcslist-ctn {
4111
- grid-template-columns: 100%
4112
- }
4113
- .cff-fb-mr-fd-img {
4114
- width: 100%;
4115
- margin-right: 0;
4116
- }
4117
- .cff-fb-mr-fd-img svg {
4118
- max-width: 100%;
4119
- }
4120
- .cff-fd-lst-tbody tr td:nth-child(2) {
4121
- width: 50%;
4122
- }
4123
-
4124
- .cff-fb-wlcm-inf-1,
4125
- .cff-fb-wlcm-inf-2,
4126
- .cff-fb-wlcm-inf-3 {
4127
- padding-left: 0;
4128
- }
4129
-
4130
- .cff-fb-wlcm-inf-3 .cff-fb-inf-img,
4131
- .cff-fb-wlcm-inf-2 .cff-fb-inf-img,
4132
- .cff-fb-wlcm-inf-1 .cff-fb-inf-svg {
4133
- display: none;
4134
- }
4135
- .cff-fb-wlcm-inf-3 .cff-fb-inf-cnt {
4136
- justify-content: flex-start;
4137
- }
4138
- .cff-fb-wlcm-inf-1 .cff-fb-inf-cnt {
4139
- width: calc(100% - 53px);
4140
- }
4141
- .cff-fb-wlcm-inf-2 .cff-fb-inf-cnt,
4142
- .cff-fb-wlcm-inf-3 .cff-fb-inf-cnt {
4143
- width: 100%;
4144
- }
4145
-
4146
- .cff-fb-wlcm-inf-1 .cff-fb-inf-cnt .cff-fb-inf-txt{
4147
- width: 80%;
4148
- }
4149
-
4150
- .cff-fb-wlcm-inf-2 .cff-fb-inf-cnt {
4151
- margin-bottom: 24px;
4152
- }
4153
-
4154
- }
4155
-
4156
- @media (min-width: 768px) and (max-width: 1023px) {
4157
- .cff-fb-wlcm-inf-3 {
4158
- padding-left: 7px;
4159
- }
4160
- .cff-fb-wlcm-inf-2 {
4161
- padding-left: 52px;
4162
- }
4163
- .cff-fb-wlcm-inf-1 {
4164
- padding-left: 85px;
4165
- }
4166
- .cff-fb-wlcm-inf-1 .cff-fb-inf-svg {
4167
- display: none;
4168
- }
4169
- }
4170
-
4171
- /*
4172
- FREE
4173
- */
4174
-
4175
- .cff-fb-types-list-free{
4176
- display: block;
4177
- grid-template-columns: unset;
4178
- grid-column-gap: unset;
4179
- margin-bottom: 31px;
4180
- margin-top: 25px;
4181
- }
4182
- .cff-fb-types-list-free .cff-fb-type-el > div{
4183
- height: 100%;
4184
- }
4185
- .cff-fb-types-list-free .cff-fb-type-el{
4186
- width: 420px;
4187
- max-width: 100%;
4188
- height: 165px;
4189
- flex-direction: row;
4190
- align-items: center;
4191
- }
4192
- .cff-fb-types-list-free .cff-fb-type-el .cff-fb-type-el-info{
4193
- text-align: left;
4194
- align-items: flex-start;
4195
- justify-content: center;
4196
- }
4197
-
4198
- .cff-fb-types-list-free .cff-fb-type-el .cff-fb-type-el-info > *{
4199
- padding: 0 20px;
4200
- }
4201
-
4202
- .cff-fb-types-list-pro{
4203
- display: grid;
4204
- grid-template-columns: 24.5% 24.5% 24.5% 24.5%;
4205
- grid-column-gap: 0.5%;
4206
- margin-top: 10px;
4207
- }
4208
- .cff-fb-type-el-pro{
4209
- display: flex;
4210
- flex-direction: row;
4211
- align-items: center;
4212
- padding: 12px 20px 12px 12px;
4213
- background: #F9F9FA;
4214
- border: 1px solid #D0D1D7;
4215
- box-sizing: border-box;
4216
- border-radius: 2px;
4217
- color: #141B38;
4218
- font-weight: 600;
4219
- font-size: 14px;
4220
- margin-bottom: 10px;
4221
- cursor: pointer;
4222
- }
4223
- .cff-fb-type-el-pro:hover{
4224
- background: #E2F5FF;
4225
- border: 1px solid #E2F5FF;
4226
- }
4227
- .cff-fb-type-el-pro-img svg{
4228
- float: left;
4229
- }
4230
- .cff-fb-type-el-pro-img{
4231
- margin-right: 20px;
4232
- }
4233
-
4234
- /*Lite Top Banner Dismiss*/
4235
- .cff-builder-app-lite-dismiss .cff-header-notice{
4236
- position: fixed!important;
4237
- top: 32px;
4238
- width: 100%;
4239
- z-index: 2;
4240
- left: 0;
4241
- }
4242
- .cff-builder-app-lite-dismiss .cff-fb-header{
4243
- top: 64px;
4244
- }
4245
- .cff-builder-app-lite-dismiss .sb-customizer-sidebar{
4246
- top: 128px;
4247
- }
4248
- .cff-builder-app-lite-dismiss .sb-customizer-preview{
4249
- margin-top: 100px;
4250
  }
1
+ body{
2
+ background: #red;
3
+ --cl-orange: #E34F0E;
4
+ --cl-dark:#2C324C;
5
+ --error-red: #D72C2C;
6
+ --customizer-blue: #0096CC;
7
+ --dark-blue: #2A65DB;
8
+ }
9
+ .sb-tr-1{-webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out;}
10
+ .sb-tr-2{-webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
11
+ .sb-tr-3{-webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
12
+ .sb-tr-4{-webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}
13
+ .sb-tr-5{-webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
14
+ .sb-tr-6{-webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out;}
15
+ .sb-tr-7{-webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out;}
16
+ .sb-tr-8{-webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out;}
17
+ .sb-tr-9{-webkit-transition: all .9s ease-in-out; transition: all .9s ease-in-out;}
18
+ .sb-tr-10{-webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
19
+ .cff-bg-1{
20
+ background: #2A65DB;
21
+ }
22
+
23
+ /****
24
+ Buttons
25
+ */
26
+ .sb-button {
27
+ display: flex;
28
+ flex-direction: row;
29
+ justify-content: center;
30
+ align-items: center;
31
+ border-radius: 2px;
32
+ cursor: pointer;
33
+ outline: none;
34
+ box-shadow: none;
35
+ border: none;
36
+ -webkit-transition: all .15s ease-in-out;
37
+ transition: all .15s ease-in-out;
38
+ }
39
+ .sb-button-standard{
40
+ position: relative;
41
+ font-style: normal;
42
+ font-weight: 600;
43
+ font-size: 14px;
44
+ padding: 10px 20px 10px 39px;
45
+ line-height: 16px;
46
+ }
47
+ .sb-button-standard svg {
48
+ width: 16px;
49
+ height: 16px;
50
+ position: absolute;
51
+ left: 13px;
52
+ right: auto;
53
+ top: 10px;
54
+ bottom: auto;
55
+ }
56
+ .sb-button-small.sb-button-left-icon {
57
+ padding-left: 32px;
58
+ }
59
+ .sb-button-small.sb-button-right-icon {
60
+ padding-right: 32px;
61
+ }
62
+ .sb-button-small.sb-button-left-icon svg {
63
+ position: absolute;
64
+ left: 13px;
65
+ }
66
+ .sb-button-small.sb-button-right-icon svg {
67
+ position: absolute;
68
+ right: 13px;
69
+ }
70
+ .sb-button-standard.sb-button-right-icon {
71
+ padding: 10px 39px 10px 20px;
72
+ }
73
+ .sb-button-standard.sb-button-right-icon svg {
74
+ right: 13px;
75
+ left: auto;
76
+ }
77
+
78
+ .sb-button-small {
79
+ position: relative;
80
+ font-style: normal;
81
+ font-weight: 600;
82
+ font-size: 12px;
83
+ padding: 6px 12px;
84
+ line-height: 160%;
85
+ }
86
+
87
+ .sb-button-no-border {
88
+ border-radius: 0 !important;
89
+ border: none !important;
90
+ }
91
+
92
+ /*orange*/
93
+ .cff-btn-orange{
94
+ background: #E34F0E!important;
95
+ color: #fff!important;
96
+ }
97
+ .cff-btn-orange:hover{
98
+ background: #F37036!important;
99
+ color: #fff!important;
100
+ }
101
+ .cff-btn-orange:focus{
102
+ background: #B8400B!important;
103
+ color: #fff!important;
104
+ }
105
+
106
+ /*red*/
107
+ .cff-btn-red{
108
+ background: #D72C2C!important;
109
+ color: #fff!important;
110
+ }
111
+ .cff-btn-red:hover{
112
+ background: #DF5757!important;
113
+ color: #fff!important;
114
+ }
115
+ .cff-btn-red:focus{
116
+ background: #841919!important;
117
+ color: #fff!important;
118
+ }
119
+
120
+ /*red*/
121
+ .cff-btn-blue{
122
+ background: #0068A0!important;
123
+ color: #fff!important;
124
+ }
125
+ .cff-btn-blue:hover{
126
+ background: #0096CC!important;
127
+ color: #fff!important;
128
+ }
129
+ .cff-btn-blue:focus{
130
+ background: #004D77!important;
131
+ color: #fff!important;
132
+ }
133
+
134
+ /*grey*/
135
+ .cff-btn-grey{
136
+ background: #F3F4F5!important;
137
+ color: #141B38!important;
138
+ border: 1px solid #D0D1D7!important;
139
+ }
140
+ .cff-btn-grey:hover{
141
+ background: #fff!important;
142
+ color: #141B38!important;
143
+ border: 1px solid #DCDDE1!important;
144
+ }
145
+ .cff-btn-grey:focus{
146
+ background: #E8E8EB!important;
147
+ color: #141B38!important;
148
+ border: 1px solid #D0D1D7!important;
149
+ }
150
+
151
+ /*dark*/
152
+ .cff-btn-dark{
153
+ background: #2C324C!important;
154
+ color: #fff!important;
155
+ }
156
+ .cff-btn-dark:hover{
157
+ background: #434960!important;
158
+ color: #fff!important;
159
+ }
160
+ .cff-btn-dark:focus{
161
+ background: #141B38!important;
162
+ color: #fff!important;
163
+ }
164
+
165
+ .sb-dark-hover:hover svg,
166
+ .sb-dark-hover:hover path{
167
+ fill: #141B38;
168
+ }
169
+
170
+ /*disabled*/
171
+ .cff-btn-orange[data-active="false"],
172
+ .cff-btn-blue[data-active="false"],
173
+ .cff-btn-red[data-active="false"],
174
+ .cff-btn-grey[data-active="false"],
175
+ .cff-btn-dark[data-active="false"]{
176
+ background: #E8E8EB !important;
177
+ color: #8C8F9A !important;
178
+ }
179
+
180
+ /* Text */
181
+
182
+ #cff-builder-app h1 {
183
+ font-style: normal;
184
+ font-weight: 600;
185
+ font-size: 36px;
186
+ line-height: 125%;
187
+ color: #141B38;
188
+ margin: 0;
189
+ letter-spacing: 0;
190
+ }
191
+ #cff-builder-app h2 {
192
+ font-style: normal;
193
+ font-weight: 600;
194
+ font-size: 32px;
195
+ line-height: 125%;
196
+ margin: 0;
197
+ letter-spacing: 0;
198
+ }
199
+ #cff-builder-app h3 {
200
+ font-style: normal;
201
+ font-weight: 600;
202
+ font-size: 24px;
203
+ line-height: 120%;
204
+ margin: 0 0 4px 0;
205
+ letter-spacing: 0;
206
+ }
207
+
208
+ #cff-builder-app h4 {
209
+ font-style: normal;
210
+ font-weight: 600;
211
+ font-size: 18px;
212
+ line-height: 140%;
213
+ margin: 0 0 4px 0;
214
+ letter-spacing: 0;
215
+ }
216
+
217
+ #cff-builder-app .sb-small-p,
218
+ #cff-builder-app .sb-standard-p{
219
+ font-style: normal;
220
+ font-weight: normal;
221
+ font-size: 14px;
222
+ line-height: 160%;
223
+ color: #8C8F9A;
224
+ margin: 0;
225
+ }
226
+
227
+ #cff-builder-app .sb-standard-p{
228
+ font-size: 16px;
229
+ color: #141B38;
230
+ }
231
+ #cff-builder-app .cff-fb-source-inp::placeholder {
232
+ color: #8C8F9A;
233
+ font-size: 14px;
234
+ font-weight: normal;
235
+ }
236
+ #cff-builder-app .sb-small-text {
237
+ font-size: 12px;
238
+ }
239
+ #cff-builder-app .sb-bold {
240
+ font-weight: 600;
241
+ }
242
+ #cff-builder-app .sb-dark-text {
243
+ color: #141B38;
244
+ }
245
+ #cff-builder-app .cff-btn-orange .sb-small-p,
246
+ #cff-builder-app .cff-btn-blue .sb-small-p,
247
+ #cff-builder-app .cff-btn-red .sb-small-p,
248
+ #cff-builder-app .cff-btn-dark .sb-small-p{
249
+ color: #fff;
250
+ }
251
+
252
+ #cff-builder-app .sb-caption {
253
+ font-style: normal;
254
+ font-weight: normal;
255
+ font-size: 13px;
256
+ line-height: 150%;
257
+ color: #141B38;
258
+ }
259
+ #cff-builder-app .sb-caption.sb-caption-lighter {
260
+ color: #5F6368;
261
+ }
262
+
263
+ #cff-builder-app .sb-small {
264
+ font-style: normal;
265
+ font-weight: bold;
266
+ font-size: 10px;
267
+ line-height: 160%;
268
+ letter-spacing: 0.08em;
269
+ text-transform: uppercase;
270
+ color: #141B38;
271
+ }
272
+
273
+ #cff-builder-app .sb-lighter {
274
+ color: #434960;
275
+ }
276
+ #cff-builder-app .sb-lightest {
277
+ color: #74777D;
278
+ }
279
+
280
+ /* Positioning */
281
+ .sb-icon-label {
282
+ display: flex;
283
+ flex-direction: row;
284
+ justify-content: flex-start;
285
+ align-items: center;
286
+ }
287
+ /* Misc Stylings */
288
+ .sb-flex-center {
289
+ display: -ms-flexbox;
290
+ display: -webkit-flex;
291
+ display: flex;
292
+
293
+ -ms-flex-align: center;
294
+ -webkit-align-items: center;
295
+ -webkit-box-align: center;
296
+
297
+ align-items: center;
298
+ }
299
+ .sb-box-shadow {
300
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
301
+ }
302
+ #cff-builder-app .sb-icon-small svg {
303
+ height: 10px;
304
+ }
305
+
306
+ /*
307
+ Social Links
308
+ */
309
+ .cff-cl-facebook, .cff-clhv-facebook:hover{
310
+ color: #006BFA!important;
311
+ }
312
+ .cff-bg-facebook, .cff-bghv-facebook:hover{
313
+ background: #006BFA!important;
314
+ }
315
+
316
+ .cff-cl-instagram, .cff-clhv-instagram:hover{
317
+ color: #BA03A7!important;
318
+ }
319
+ .cff-bg-instagram, .cff-bghv-instagram:hover{
320
+ background: #BA03A7!important;
321
+ }
322
+
323
+ .cff-cl-twitter, .cff-clhv-twitter:hover{
324
+ color: #1B90EF!important;
325
+ }
326
+ .cff-bg-twitter, .cff-bghv-twitter:hover{
327
+ background: #1B90EF!important;
328
+ }
329
+
330
+ .cff-cl-youtube, .cff-clhv-youtube:hover{
331
+ color: #EB2121!important;
332
+ }
333
+ .cff-bg-youtube, .cff-bghv-youtube:hover{
334
+ background: #EB2121!important;
335
+ }
336
+
337
+ .cff-cl-linkedin, .cff-clhv-linkedin:hover{
338
+ color: #007bb6!important;
339
+ }
340
+ .cff-bg-linkedin, .cff-bghv-linkedin:hover{
341
+ background: #007bb6!important;
342
+ }
343
+
344
+ .cff-cl-mail, .cff-clhv-mail:hover{
345
+ color: #666!important;
346
+ }
347
+ .cff-bg-mail, .cff-bghv-mail:hover{
348
+ background: #666!important;
349
+ }
350
+
351
+ #cff-builder-app{
352
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;;
353
+ visibility: hidden;
354
+ opacity: 0;
355
+ }
356
+ #cff-builder-app[data-app-loaded="true"]{
357
+ visibility: visible;
358
+ opacity: 1;
359
+ }
360
+
361
+ .cff-builder-app a, .cff-builder-app a:focus{
362
+ text-decoration: none;
363
+ /*color: inherit;*/
364
+ outline: none;
365
+ }
366
+ .cff-fb-btn{
367
+ display: flex;
368
+ flex-direction: row;
369
+ justify-content: center;
370
+ align-items: center;
371
+ padding: 9px 38px;
372
+ font-style: normal;
373
+ font-weight: 500;
374
+ font-size: 14px;
375
+ line-height: 17px;
376
+ border-radius: 2px;
377
+ cursor: pointer;
378
+ color: #fff;
379
+ outline: none;
380
+ box-shadow: none;
381
+ border: none;;
382
+ }
383
+ .cff-fb-btn:focus{
384
+ box-shadow: none;
385
+ }
386
+ .cff-fb-fs{
387
+ width: 100%;
388
+ position: relative;
389
+ float: left;
390
+ box-sizing: border-box;
391
+ }
392
+ .cff-fs-a{
393
+ width: 100%;
394
+ height: 100%;
395
+ display: block;
396
+ position: absolute;
397
+ left: 0;
398
+ top: 0;
399
+ z-index: 1;
400
+ }
401
+ .sb-btn:focus{
402
+ outline: none;
403
+ }
404
+ #wpcontent,
405
+ .facebook-feed_page_cff-feed-builder #wpcontent{
406
+ padding-left: 0px;
407
+ }
408
+ #wpfooter{
409
+ display: none;
410
+ }
411
+ #wpbody-content{
412
+ padding-bottom: 0px;
413
+ }
414
+ .cff-fb-wrapper{
415
+ max-width: 92%;
416
+ position: relative;
417
+ margin: auto;
418
+ color: #141B38;
419
+ }
420
+ .cff-fb-fs-boss{
421
+ position: fixed;
422
+ height: 100vh;
423
+ width: 100%;
424
+ left: 0;
425
+ top: 0;
426
+ bottom: 0;
427
+ right: 0;
428
+ background: rgba(0,0,0,.4);
429
+ z-index: 9989;
430
+ }
431
+
432
+
433
+ /*
434
+ Header
435
+ */
436
+ .cff-fb-create-ctn{
437
+ margin-top: 104px;
438
+ padding: 0 54px;
439
+ box-sizing: border-box;
440
+ width: 100%;
441
+ }
442
+ .cff-fb-header{
443
+ height: 64px;
444
+ position: absolute;
445
+ display: flex;
446
+ flex-direction: row;
447
+ justify-content: space-between;
448
+ align-items: center;
449
+ background: #fff;
450
+ padding: 0px 52px;
451
+ z-index: 99;
452
+ }
453
+ .cff-fb-header-left {
454
+ display: flex;
455
+ }
456
+ .cff-fb-header-left .sb-social-wall-link-wrap {
457
+ margin-left: 30px;
458
+ }
459
+ .cff-fb-hd-logo {
460
+ display: flex;
461
+ vertical-align: middle;
462
+ align-items: center;
463
+ gap: 5px;
464
+ }
465
+ .cff-fb-hd-logo .sb-logo-letters-wrap {
466
+ transform: translate(0px, -2px);
467
+ }
468
+ .cff-fb-hd-logo .breadcrumb-title {
469
+ font-size: 14px;
470
+ font-weight: 400;
471
+ line-height: 22px;
472
+ letter-spacing: 0em;
473
+ margin-left: 4px;
474
+ }
475
+ .cff-csz-header.cff-fb-header{
476
+ position: fixed!important;
477
+ padding: 0 20px;
478
+ }
479
+ .cff-csz-header-insider{
480
+ width: calc(100% - 160px);
481
+ display: flex;
482
+ flex-direction: row;
483
+ justify-content: space-between;
484
+ align-items: center;
485
+ height: 52px;
486
+ }
487
+
488
+ @media all and (max-width: 960px) {
489
+ .cff-csz-header-insider{
490
+ width: calc(100% - 36px);
491
+ }
492
+ .sb-customizer-ctn .sb-customizer-sidebar{
493
+ left: 36px;
494
+ }
495
+ }
496
+
497
+ .cff-fb-hd-btn{
498
+ cursor: pointer;
499
+ display: flex;
500
+ flex-direction: row;
501
+ justify-content: center;
502
+ align-items: center;
503
+ position: relative;
504
+ border: 1px solid;
505
+ -webkit-transition: all .15s ease-in-out;
506
+ transition: all .15s ease-in-out;
507
+ }
508
+ .cff-fb-hd-btn i{
509
+ margin: 0px 5px;
510
+ }
511
+ .cff-fb-full-wrapper {
512
+ padding: 0 53px;
513
+ padding-top: 82px;
514
+ padding-bottom: 60px;
515
+ }
516
+ .cff-csz-hd-actions{
517
+ display: flex;
518
+ justify-content: center;
519
+ align-items: center;
520
+ }
521
+ .cff-csz-hd-actions > button{
522
+ margin-left: 10px;
523
+ }
524
+
525
+ .cff-csz-btn-embd{
526
+ color: #fff;
527
+ background: var(--cl-dark);
528
+ border-color: var(--cl-dark);
529
+ }
530
+ .cff-csz-btn-save{
531
+ color: #fff;
532
+ background: var(--cl-orange);
533
+ border-color: var(--cl-orange);
534
+ }
535
+ .cff-csz-hd-name{
536
+ display: flex;
537
+ justify-content: center;
538
+ align-items: center;
539
+ height: 45px;
540
+ }
541
+ .cff-csz-hd-name strong{
542
+ font-size: 18px;
543
+ }
544
+ .cff-csz-hd-name[data-edit="true"] strong{
545
+ display: none;
546
+ }
547
+ .cff-csz-hd-name input[type="text"]{
548
+ border-radius: 0px;
549
+ border: 0px;
550
+ background: #CCE7FF;
551
+ outline: none;
552
+ font-size: 18px;
553
+ font-weight: 700;
554
+ display: none;
555
+ }
556
+ .cff-csz-hd-name[data-edit="true"] input[type="text"]{
557
+ display: block;
558
+ }
559
+ .cff-csz-hd-name input[type="text"]:focus{
560
+ outline: none!important;
561
+ border: 0px!important;
562
+ box-shadow: none!important;
563
+ }
564
+
565
+
566
+ .cff-csz-name-ed-btn{
567
+ width: 22px;
568
+ height: 22px;
569
+ cursor: pointer;
570
+ margin: 0 10px;
571
+ background: #E8E8EB;
572
+ border: 1px solid #E8E8EB;
573
+ outline: none;
574
+ }
575
+ .cff-csz-name-ed-btn:focus,
576
+ .cff-csz-name-ed-btn:hover{
577
+ outline: none;
578
+ background-color: #fff;
579
+ }
580
+ .cff-csz-name-ed-btn svg{
581
+ width: 11px;
582
+ fill: #141B38;
583
+ float: left;
584
+ margin-left: -1px;
585
+ }
586
+
587
+
588
+ /*
589
+ Welcome Screen Empty State
590
+ */
591
+ .cff-fb-wlcm-header{
592
+ display: flex;
593
+ align-items: center;
594
+ margin-bottom: 28px;
595
+ margin-top: 23px;
596
+ }
597
+ #cff-fb-full-wrapper .cff-fb-wlcm-header {
598
+ margin-bottom: 34px;
599
+ }
600
+
601
+ .cff-fb-wlcm-header h3,
602
+ .cff-fb-create-ctn h3{
603
+ font-weight: 600;
604
+ font-size: 32px;
605
+ line-height: 40px;
606
+ padding: 0;
607
+ margin: 0;
608
+ float: left;
609
+ }
610
+ .cff-fb-btn-new{
611
+ background: var(--cl-orange);
612
+ position: relative;
613
+ float: left;
614
+ margin-left: 20px;
615
+ font-size: 12px;
616
+ padding: 8px 12px 8px 30px;
617
+ }
618
+ .cff-fb-btn-new svg{
619
+ width: 10px;
620
+ height: 10px;
621
+ position: absolute;
622
+ left: 12px;
623
+ }
624
+
625
+ .cff-fb-inf-cnt{
626
+ position: relative;
627
+ background: #fff;
628
+ padding: 27px;
629
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
630
+ border-radius: 2px;
631
+ max-width: 100%;
632
+ box-sizing: border-box;
633
+ }
634
+ .cff-fb-inf-num{
635
+ width: 30px;
636
+ height: 30px;
637
+ position: relative;
638
+ float: left;
639
+ display: flex;
640
+ justify-content: center;
641
+ align-items: center;
642
+ font-size: 12px;
643
+ font-weight: 600;
644
+ color: #141B38;
645
+ margin-right: 20px;
646
+
647
+ }
648
+ .cff-fb-inf-num span{
649
+ z-index: 1;
650
+ }
651
+ .cff-fb-inf-num:before{
652
+ content: '';
653
+ position: absolute;
654
+ width: 100%;
655
+ height: 100%;
656
+ background: #D8DADD;
657
+ border-radius: 50%;
658
+ }
659
+ .cff-fb-inf-txt{
660
+ float: left;
661
+ }
662
+ /*.cff-fb-inf-txt strong{
663
+ display: block;
664
+ font-size: 20px;
665
+ line-height: 1em;
666
+ font-weight: bold;
667
+ margin-bottom: 8px;
668
+ }*/
669
+ .cff-fb-inf-txt span{
670
+ display: block;
671
+ font-size: 16px;
672
+ color: #5F6368;
673
+ line-height: 1.5em;
674
+ }
675
+ .cff-fb-wlcm-inf-1 {
676
+ padding-left: 297px;
677
+ }
678
+ .cff-fb-wlcm-inf-1 .cff-fb-inf-svg{
679
+ position: absolute;
680
+ left: 191px;
681
+ top: 32px;
682
+ /*float: left;
683
+ margin-top: 30px;
684
+ margin-left: 230px;
685
+ position: relative;
686
+ margin-right: 25px;*/
687
+ }
688
+ .cff-fb-wlcm-inf-1 .cff-fb-inf-svg svg{
689
+ margin-top: -45px;
690
+ }
691
+ .sb-head {
692
+ position: absolute;
693
+ top: -2px;
694
+ left:-4px;
695
+ }
696
+ .cff-fb-wlcm-inf-1 .cff-fb-inf-cnt{
697
+ float: left;
698
+ width: 523px;
699
+ margin-bottom: 24px;
700
+ height: 120px;
701
+ }
702
+ .cff-fb-wlcm-inf-2{
703
+ display: flex;
704
+ justify-content: space-between;
705
+ padding-left: 152px;
706
+ }
707
+ .cff-fb-wlcm-inf-2 .cff-fb-inf-cnt{
708
+ float: left;
709
+ width: 590px;
710
+ margin-bottom: 29px;
711
+ height: 120px;
712
+ display: flex;
713
+ align-items: center;
714
+ }
715
+ .cff-fb-wlcm-inf-2 .cff-fb-inf-img{
716
+ position: absolute;
717
+ right: 15px;
718
+ top: -13px;
719
+ width: 121px;
720
+ }
721
+
722
+ .cff-fb-wlcm-inf-3{
723
+ display: flex;
724
+ justify-content: flex-start;
725
+ align-items: center;
726
+ padding-left: 297px;
727
+ }
728
+ .cff-fb-wlcm-inf-3 .cff-fb-inf-cnt{
729
+ float: left;
730
+ width: 620px;
731
+ height: 130px;
732
+ display: flex;
733
+ justify-content: center;
734
+ align-items: center;
735
+ }
736
+ .cff-fb-wlcm-inf-3 .cff-fb-inf-img{
737
+ float: left;
738
+ left: 10px;
739
+ top: -12px;
740
+ position: absolute;
741
+ width: 121px;
742
+ }
743
+ .cff-fb-inf-img img {
744
+ max-width: 100%;
745
+ }
746
+ .cff-fb-wlcm-inf-2 .cff-fb-inf-num, .cff-fb-wlcm-inf-3 .cff-fb-inf-num{
747
+ margin-top: -20px;
748
+ }
749
+ .cff-fb-types-ctn, .cff-fb-slctsrc-ctn, .cff-fb-section-wh{
750
+ background: #fff;
751
+ border: 1px solid #E7E7E9;
752
+ }
753
+ .cff-fb-wrapper h3, .cff-fb-section-wh h3{
754
+ font-size: 32px;
755
+ line-height: 39px;
756
+ font-weight: 600;
757
+ }
758
+ .cff-fb-create-ctn h3{
759
+ margin-bottom: 30px;
760
+ }
761
+ .cff-fb-types h4, .cff-fb-section-wh h4 {
762
+ font-size:20px;
763
+ line-height: 24px;
764
+ font-weight: 600;
765
+ }
766
+ #cff-builder-app .cff-fb-create-ctn h4,
767
+ #cff-builder-app .cff-fb-feedtypes-pp-ctn h4{
768
+ margin-bottom: 9px;
769
+ }
770
+ #cff-builder-app .cff-fb-feedtypes-pp-ctn .cff-fb-types {
771
+ margin-top: 20px;
772
+ }
773
+ #cff-builder-app .cff-fb-adv-types .cff-adv-types-heading{
774
+ font-style: normal;
775
+ font-weight: bold;
776
+ font-size: 12px;
777
+ line-height: 160%;
778
+ letter-spacing: 0.05em;
779
+ text-transform: uppercase;
780
+ color: #8C8F9A;
781
+ }
782
+ .cff-fb-types, .cff-fb-adv-types{
783
+ padding: 22px 35px 0;
784
+ }
785
+ .cff-fb-adv-types {
786
+ padding-top: 0;
787
+ }
788
+ .cff-fb-types-list{
789
+ display: grid;
790
+ grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%;
791
+ grid-column-gap: 1%;
792
+ margin-bottom: 31px;
793
+ }
794
+ /*
795
+ .cff-fb-adv-types .cff-fb-types-list{
796
+ grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
797
+ }
798
+ */
799
+ .cff-fb-heading {
800
+ margin-bottom: 24px;
801
+ width: 100%;
802
+ float: left;
803
+ }
804
+ .cff-fb-heading h1{
805
+ float: left;
806
+ }
807
+ .cff-fb-heading .cff-fb-btn{
808
+ float: right!important;
809
+ }
810
+
811
+ .cff-fb-adv-types .cff-fb-types-list{
812
+ margin-bottom: 31px;
813
+ }
814
+ .cff-fb-type-el{
815
+ display: flex;
816
+ flex-direction: column;
817
+ align-items: flex-start;
818
+ padding: 0;
819
+ position: relative;
820
+ background: #fff;
821
+ border: 1px solid #F1F1F1;
822
+ border-radius: 3px;
823
+ cursor: pointer;
824
+ box-sizing: border-box;
825
+ }
826
+ .cff-fb-type-el:hover,
827
+ .cff-fb-adv-types .cff-fb-type-el:hover{
828
+ border: 1px solid #F6966B;
829
+ }
830
+ .cff-fb-adv-types .cff-fb-type-el{
831
+ border: 1px solid #FFDBBA;
832
+ }
833
+ .sb-control-feedtype-ctn .cff-fb-type-el{
834
+ border: 2px solid #E8E8EB;
835
+ margin-bottom: 7px;
836
+ }
837
+ .sb-control-feedtype-ctn .cff-fb-type-el-info{
838
+ margin-top: 14px
839
+ }
840
+ .cff-fb-type-el[data-active="true"],
841
+ .cff-fb-adv-types .cff-fb-type-el[data-active="true"]{
842
+ border: 2px solid var(--cl-orange);
843
+ }
844
+ .cff-fb-type-el[data-active="true"]:after{
845
+ content: '';
846
+ position: absolute;
847
+ width: 10px;
848
+ height: 4px;
849
+ border-left: 2px solid #fff;
850
+ border-bottom: 2px solid #fff;
851
+ z-index: 3;
852
+ right: 5px;
853
+ top: 7px;
854
+ -webkit-transform: rotate(-45deg);
855
+ transform: rotate(-45deg);
856
+ }
857
+ .cff-fb-type-el[data-active="true"]:before{
858
+ content: '';
859
+ position: absolute;
860
+ width: 24px;
861
+ height: 24px;
862
+ right: 0px;
863
+ top: 0px;
864
+ z-index: 2;
865
+ background: var(--cl-orange)
866
+ }
867
+ .cff-fb-type-el-img{
868
+ display: flex;
869
+ flex-direction: column;
870
+ justify-content: center;
871
+ align-items: center;
872
+ background: #F1F1F1;
873
+ border: 2px solid #F1F1F1;
874
+ border-bottom: 1px solid #fff;
875
+ }
876
+ .cff-fb-type-el[data-active="true"] .cff-fb-type-el-img{
877
+ border: 1px solid #F1F1F1;
878
+ border-bottom: 2px solid #fff;
879
+ }
880
+ .cff-fb-type-el-img svg {
881
+ max-width: 100%;
882
+ }
883
+ .cff-fb-adv-types .cff-fb-type-el-img{
884
+ background: #FCF4EF;
885
+ }
886
+ .cff-fb-type-el-info{
887
+ display: flex;
888
+ flex-direction: column;
889
+ /*justify-content: center;*/
890
+ align-items: center;
891
+ text-align: center;
892
+ flex: 1 1 auto;
893
+ padding: 0 12px 25px;
894
+ }
895
+ .sb-control-feedtype-ctn .cff-fb-type-el-info{
896
+ padding: 15px 70px 25px;
897
+ }
898
+ .sb-control-feedtype-ctn .cff-fb-type-el-info strong{
899
+ font-size: 14px;
900
+ }
901
+ #cff-builder-app .cff-fb-type-el p {
902
+ margin: 11px 0 4px;
903
+ }
904
+ #cff-builder-app .cff-fb-type-el[data-active="true"] p{
905
+ margin-top: 10px;
906
+ }
907
+ #cff-builder-app .cff-fb-type-el[data-active="true"] .cff-fb-type-el-info {
908
+ padding-bottom: 24px;
909
+ }
910
+ #cff-builder-app .cff-fb-type-el p svg {
911
+ width: 14px;
912
+ height: 14px;
913
+ margin-left: 5px;
914
+ vertical-align: middle;
915
+ }
916
+ /*.cff-fb-type-el-info strong{
917
+ font-weight: 600;
918
+ font-size: 16px;
919
+ line-height: 19px;
920
+ margin-bottom: 10px;
921
+ text-transform: capitalize;
922
+ display: flex;
923
+ justify-content: center;
924
+ align-items: center;
925
+ }
926
+ .cff-fb-type-el-info strong i{
927
+ color: #ed8000;
928
+ margin-left: 5px;
929
+ font-size: 13px;
930
+ margin-top: 2px;
931
+ }
932
+ .cff-fb-type-el-info span{
933
+ font-size: 13px;
934
+ line-height: 1.4em;
935
+ color: #74777D;
936
+ }*/
937
+ .cff-fb-adv-types .cff-fb-type-el-img {
938
+ border-color: #FCF4EF;
939
+ }
940
+ .cff-fb-ft-action {
941
+ border-top: 1px solid #D8DADD;
942
+ padding: 30px 40px;
943
+ margin-top: 63px;
944
+ }
945
+ .cff-fb-slctfd-action .cff-fb-wrapper{
946
+ display: flex;
947
+ align-items: center;
948
+ justify-content: flex-end;
949
+ }
950
+ .cff-fb-slctfd-action{
951
+ padding: 16px 0;
952
+ }
953
+ .cff-fb-slctf-nxt{
954
+ height: auto;
955
+ padding: 7px 36px 7px 37px;
956
+ }
957
+ .cff-fb-slctf-back{
958
+ margin-right: auto;
959
+ height: auto;
960
+ padding: 7px 37px 7px 36px;
961
+ -webkit-transition: unset!important;
962
+ transition: unset!important;
963
+ }
964
+ .cff-fb-slctf-back svg,
965
+ .cff-fb-slctf-nxt svg {
966
+ width: 6px;
967
+ height: 10px;
968
+ }
969
+ .cff-fb-slctf-back span {
970
+ display: inline-block;
971
+ margin-left: 15px;
972
+ line-height: 160%;
973
+ }
974
+ .cff-fb-slctf-nxt span {
975
+ display: inline-block;
976
+ margin-right: 15px;
977
+ line-height: 160%;
978
+ }
979
+ .cff-fb-btn-ac{
980
+ opacity: 0.6;
981
+ }
982
+ .cff-fb-btn-ac[data-active="true"]{
983
+ opacity: 1;
984
+ }
985
+
986
+ .sb-control-single-id-ctn{
987
+ margin-top: 35px;
988
+ padding: 25px 0px;
989
+ }
990
+ .sb-control-single-id-ctn:before{
991
+ content: '';
992
+ position: absolute;
993
+ border-top: 1px solid #DCDDE1;
994
+ height: 2px;
995
+ top: 0px;
996
+ left: -20px;
997
+ width: calc(100% + 40px);
998
+ }
999
+ .sb-control-single-id-input{
1000
+ display: flex;
1001
+ justify-content: center;
1002
+ align-items: center;
1003
+ margin-top: 7px;
1004
+ }
1005
+ .sb-control-single-id-input input{
1006
+ height: 45px;
1007
+ float: left;
1008
+ background: #fff;
1009
+ margin-top: 6px;
1010
+ margin-right: 7px;
1011
+ }
1012
+
1013
+ /*
1014
+ Video Type Chooser
1015
+ */
1016
+ .cff-fb-section-wh.cff-fb-section-videos{
1017
+ padding: 50px 21px 54px 30px;
1018
+ }
1019
+ .cff-fb-videotype-chooser{
1020
+ display: grid;
1021
+ grid-template-columns: 49% 49%;
1022
+ grid-column-gap: 1%;
1023
+
1024
+ }
1025
+ .cff-fb-section-videos{
1026
+ flex-direction: column;
1027
+ }
1028
+ .cff-fb-section-videos .cff-fb-section-video-playlist{
1029
+ margin-top: 30px;
1030
+ }
1031
+
1032
+ .cff-fb-section-video-playlist .cff-fb-wh-inp{
1033
+ margin-top: 10px;
1034
+ margin-bottom: 10px!important;
1035
+ }
1036
+ .cff-fb-section-videos .cff-fb-sglelm-left{
1037
+ padding-right: 0px;
1038
+ }
1039
+ /*
1040
+ Source Screen
1041
+ */
1042
+ .cff-fb-sec-heading span{
1043
+ font-size:14px;
1044
+ color: #434960;
1045
+ line-height: 1.7em;
1046
+ display: block;
1047
+ }
1048
+ #cff-builder-app .cff-fb-sec-heading h4 {
1049
+ margin-bottom: 2px;
1050
+ }
1051
+ .cff-fb-sec-heading {
1052
+ margin-bottom: 14px;
1053
+ }
1054
+ .cff-fb-slctsrc-content,.cff-fb-section-wh-insd{
1055
+ padding: 23px 30px;
1056
+ }
1057
+
1058
+ .cff-fb-slctsrc-ctn h4,.cff-fb-section-wh-insd h4{
1059
+ font-size: 20px;
1060
+ padding: 0px;
1061
+ margin: 0px;
1062
+ }
1063
+ .cff-fb-srcslist-ctn{
1064
+ display: grid;
1065
+ grid-template-columns: 32.66% 32.66% 32.66%;
1066
+ grid-column-gap: 1%;
1067
+ margin-bottom: 28px;
1068
+ }
1069
+ .cff-fb-srcs-item{
1070
+ width: 100%;
1071
+ cursor: pointer;
1072
+ height: 62px;
1073
+ margin: 1% 0;
1074
+ border-radius: 3px;
1075
+ border: 1px solid #E7E7E9;
1076
+ display: flex;
1077
+ position: relative;
1078
+ }
1079
+ .cff-fb-srcs-item[data-disabled="true"]{
1080
+ background: #F3F4F5;
1081
+ }
1082
+ .cff-fb-srcs-item[data-disabled="true"] .cff-fb-srcs-item-inf{
1083
+ opacity: .55;
1084
+
1085
+ }
1086
+ #cff-builder-app .cff-fb-srcs-item .cff-fb-srcs-item-inf .cff-fb-srcs-item-name {
1087
+ color: #141B38;
1088
+ padding-right: 44px;
1089
+ }
1090
+
1091
+ #cff-builder-app .cff-fb-srcs-item .cff-fb-srcs-item-inf .cff-fb-srcs-item-name span {
1092
+ max-height: 30px;
1093
+ display: block;
1094
+ overflow: hidden;
1095
+ line-height: 1.1;
1096
+ padding-bottom:1px;
1097
+ color: #141B38;
1098
+ }
1099
+
1100
+ #cff-builder-app .cff-fb-srcs-item:hover{
1101
+ border-color: #86D0F9;
1102
+ }
1103
+ #cff-builder-app .cff-fb-srcs-item[data-active="true"]{
1104
+ border-color: #0096cc;
1105
+ }
1106
+
1107
+ .cff-fb-source-top .cff-fb-srcs-item{
1108
+ margin-bottom: 0px;
1109
+ }
1110
+ #cff-builder-app .cff-fb-srcs-new{
1111
+ display: flex;
1112
+ justify-content: center;
1113
+ align-items: center;
1114
+ background: #EBF5FF;
1115
+ border: 1px solid #EBF5FF;
1116
+ }
1117
+ #cff-builder-app .cff-fb-srcs-new span{
1118
+ margin-left: 13px;
1119
+ color: #0096CC;
1120
+ }
1121
+ .cff-fb-srcs-new i{
1122
+ font-size: 14px;
1123
+ padding: 0 10px;
1124
+ margin-left: -10px;
1125
+ }
1126
+ .cff-fb-srcs-item-chkbx{
1127
+ width: 40px;
1128
+ height: inherit;
1129
+ display: flex;
1130
+ justify-content: center;
1131
+ align-items: center;
1132
+ margin: 0 16px 0 7px;
1133
+ }
1134
+
1135
+ .cff-fb-srcs-item-chkbx-ic,.cff-fb-chbx-round{
1136
+ width: 16px;
1137
+ height: 16px;
1138
+ box-sizing: border-box;
1139
+ position: relative;
1140
+ border-radius: 50px;
1141
+ border: 2px solid #8c8f9a;
1142
+ }
1143
+ [data-multifeed="active"] .cff-fb-srcs-item-chkbx-ic{
1144
+ border-radius: 2px;
1145
+ }
1146
+
1147
+ [data-active="true"] .cff-fb-srcs-item-chkbx-ic, [data-active="true"] > .cff-fb-chbx-round, .cff-fb-source-popup [data-active="true"] > .cff-fb-chbx-round{
1148
+ border-color: #0096cc;
1149
+ background: #0096cc;
1150
+ }
1151
+ [data-multifeed="active"] [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before{
1152
+ content: '';
1153
+ position: absolute;
1154
+ width: 8px;
1155
+ height: 3px;
1156
+ border-left: 2px solid #fff;
1157
+ border-bottom: 2px solid #fff;
1158
+ top: 2px;
1159
+ right: 1px;
1160
+ -webkit-transform: rotate(-45deg);
1161
+ transform: rotate(-45deg);
1162
+ }
1163
+
1164
+ [data-multifeed="inactive"] [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before, [data-active="true"] > .cff-fb-chbx-round:before,
1165
+ .cff-fb-source-popup .cff-fb-source-list [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before,
1166
+ .cff-fb-section-videos [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before{
1167
+ content: '';
1168
+ position: absolute;
1169
+ height: 6px;
1170
+ width: 6px;
1171
+ background: #fff;
1172
+ border-radius: 25px;
1173
+ left: 3px;
1174
+ top: 3px;
1175
+ }
1176
+
1177
+
1178
+
1179
+ .cff-fb-mr-feeds,.cff-fb-section-wh{
1180
+ margin-top: 8px;
1181
+ background: #fff;
1182
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
1183
+ display: flex;
1184
+ align-items: center;
1185
+ }
1186
+ .cff-fb-mr-fd-img {
1187
+ float: left;
1188
+ margin-right: 6%;
1189
+ width: 28%;
1190
+ line-height: 0;
1191
+ }
1192
+ .cff-fb-mr-fd-img img{
1193
+ width: 100%;
1194
+ }
1195
+
1196
+ .cff-fb-mr-fd-heading{
1197
+ font-weight:600;
1198
+ font-size: 18px;
1199
+ line-height: 1.7em;
1200
+ margin-bottom: 10px;
1201
+ }
1202
+ .cff-fb-mr-fd-list{
1203
+ margin-bottom: 10px;
1204
+ width: 100%;
1205
+ float: left;
1206
+ }
1207
+ .cff-fb-mr-fd-item{
1208
+ box-sizing: border-box;
1209
+ position: relative;
1210
+ float: left;
1211
+ border: 1px solid #DCDDE1;
1212
+ border-radius: 2px;
1213
+ margin-right: 8px;
1214
+ height: 38px;
1215
+ width: 160px;
1216
+ color: #141B38;
1217
+ font-size: 14px;
1218
+ font-weight:600;
1219
+ text-transform: capitalize;
1220
+ display: flex;
1221
+ justify-content: center;
1222
+ align-items: center;
1223
+ transition: all .15s ease-in-out;
1224
+ }
1225
+ .cff-icon-platform-wrap {
1226
+ width: 100%;
1227
+ display: flex;
1228
+ justify-content: left;
1229
+ align-items: center;
1230
+ margin-left: 13px;
1231
+ }
1232
+
1233
+ .cff-fb-mr-fd-ic {
1234
+ margin-right: 9px;
1235
+ }
1236
+ .cff-fb-mr-fd-ic svg{
1237
+ height: 16px;
1238
+ fill: currentColor;
1239
+ float: left;
1240
+ }
1241
+ .cff-fb-mr-fd-ch{
1242
+ position: absolute;
1243
+ right:14px;
1244
+ }
1245
+ #cff-builder-app .cff-fb-mr-fd-heading h3 {
1246
+ margin-bottom: 21px;
1247
+ max-width: 385px;
1248
+ }
1249
+
1250
+
1251
+
1252
+ /*Embed Popup*/
1253
+ .cff-fb-embed-step-1{
1254
+ margin-top: 36px;
1255
+ }
1256
+
1257
+ .cff-fb-embed-step-1 > div{
1258
+ padding: 0 20px;
1259
+ }
1260
+ .cff-fb-embed-step-1-top{
1261
+ padding-bottom: 53px!important;
1262
+ border-bottom: 1px solid #E8E8EB;
1263
+ margin-bottom: 42px;
1264
+ }
1265
+ #cff-builder-app .cff-fb-embed-step-1 h4{
1266
+ margin-bottom: 12px;
1267
+ }
1268
+ .cff-fb-embed-input-ctn{
1269
+ display: flex;
1270
+ }
1271
+ .cff-fb-embed-input-ctn input,
1272
+ .cff-fb-embed-input-ctn input[type="text"]{
1273
+ position: relative;
1274
+ font-style: normal;
1275
+ font-weight: normal;
1276
+ font-size: 16px;
1277
+ line-height: 160%;
1278
+ color: #141B38;
1279
+ height: 44px;
1280
+ width: 77%;
1281
+ box-sizing: border-box;
1282
+ border-radius: 0px;
1283
+ border: 1px solid #D0D1D7!important;
1284
+ border-right: 0px!important;
1285
+
1286
+ }
1287
+ .cff-fb-embed-input-ctn input:focus, .cff-fb-embed-input-ctn .cff-fb-hd-btn:focus{
1288
+ box-shadow: none!important;
1289
+ outline: none!important
1290
+ }
1291
+ .cff-fb-embed-input-ctn .cff-fb-hd-btn{
1292
+ width: 23%;
1293
+ border-bottom-left-radius: 0px;
1294
+ border-top-left-radius: 0px;
1295
+ }
1296
+ .cff-fb-embed-input-ctn svg{
1297
+ width: 17px;
1298
+ fill: currentColor;
1299
+ float: left;
1300
+ margin-right: 10px;
1301
+ }
1302
+ .cff-fb-embed-step-1-bottom h4{
1303
+ text-align: center;
1304
+ }
1305
+ .cff-fb-embed-btns-ctn{
1306
+ display: grid;
1307
+ grid-template-columns: 49% 49%;
1308
+ grid-column-gap: 2%;
1309
+ margin-top: 14px;
1310
+ margin-bottom: 60px;
1311
+ }
1312
+ .cff-fb-embed-btn{
1313
+ cursor: pointer;
1314
+ width: 100%;
1315
+ height: 50px;
1316
+ background: #F3F4F5;
1317
+ border-radius: 2px;
1318
+ border: 1px solid #DCDDE1;
1319
+ display: flex;
1320
+ align-items: center;
1321
+ justify-content: space-between;
1322
+ box-sizing: border-box;
1323
+ padding: 0 20px;
1324
+ position: relative;
1325
+ color: #141B38;
1326
+ font-size: 16px;
1327
+ font-weight: 500;
1328
+ }
1329
+ .cff-fb-embed-btn .sb-icon-label svg{
1330
+ fill: currentColor;
1331
+ width: 18px;
1332
+ margin-right: 10px;
1333
+ float: left;
1334
+ }
1335
+ .cff-fb-embed-popup .sb-embed-breadcrumb {
1336
+ display: flex;
1337
+ align-items: center;
1338
+ padding: 25px 30px 0;
1339
+ margin-bottom: 2px;
1340
+ }
1341
+ .sb-embed-breadcrumb a {
1342
+ font-style: normal;
1343
+ font-weight: bold;
1344
+ font-size: 10px;
1345
+ line-height: 160%;
1346
+ letter-spacing: 0.08em;
1347
+ text-transform: uppercase;
1348
+ color: #434960;
1349
+ cursor: pointer;
1350
+ }
1351
+ .sb-embed-breadcrumb a:hover {
1352
+ color: #141B38;
1353
+ }
1354
+ .sb-embed-breadcrumb svg {
1355
+ margin-right: 8px;
1356
+ }
1357
+ .cff-fb-embed-step-2 > div{
1358
+ padding: 0 29px;
1359
+ }
1360
+
1361
+ .sb-customizer-sidebar-cache-wrapper{
1362
+ margin-top: 20px;
1363
+ padding: 0 20px;
1364
+ }
1365
+ .cff-fb-embed-step-2-list{
1366
+ margin-top: 25px;
1367
+ border-top: 1px solid #DCDDE1;
1368
+ padding-top: 14px !important;
1369
+ }
1370
+ .cff-fb-embed-step-2-list > strong{
1371
+ text-transform: uppercase;
1372
+ font-size: 12px;
1373
+ color: #434960;
1374
+ margin-bottom: 10px;
1375
+ }
1376
+ .cff-fb-embed-step-2-pages{
1377
+ margin-top: 8px;
1378
+ height: 250px;
1379
+ overflow: auto;
1380
+ }
1381
+ .cff-fb-embed-step-2-pages .sb-control-toggle-icon svg {
1382
+ width: 11px;
1383
+ }
1384
+ .cff-fb-embed-step-2-action{
1385
+ padding: 10px 34px 10px 30px !important;
1386
+ background: #F3F4F5;
1387
+ box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.1);
1388
+ }
1389
+ .cff-fb-embed-step-2-action a{
1390
+ color: #fff;
1391
+ }
1392
+ .cff-fb-embed-step-2-action a[data-active="false"]{
1393
+ opacity: .75;
1394
+ }
1395
+
1396
+ /*Dialog Popup*/
1397
+ .cff-fb-dialog-remove-source{
1398
+ background: #F3F4F5;
1399
+ padding: 40px 20px;
1400
+ display: flex;
1401
+ justify-content: center;
1402
+ align-items: center;
1403
+ }
1404
+ .cff-fb-dialog-remove-source .cff-fb-srcs-item{
1405
+ background: #fff;
1406
+ width: 280px;
1407
+ padding-left: 20px;
1408
+ box-sizing: border-box;
1409
+ margin-top: 0px;
1410
+ }
1411
+ .cff-fb-srcs-item-remove{
1412
+ position: absolute;
1413
+ width: 35px;
1414
+ height: 35px;
1415
+ border-radius: 50px;
1416
+ background: #fff;
1417
+ border:1px solid #E7E7E9;
1418
+ z-index: 3;
1419
+ right: -13px;
1420
+ bottom: -13px;
1421
+ display: flex;
1422
+ justify-content: center;
1423
+ align-items: center;
1424
+ box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
1425
+ }
1426
+ .cff-fb-srcs-item-remove svg{
1427
+ width: 12px;
1428
+ float: left;
1429
+ fill: var(--error-red);
1430
+ }
1431
+ .cff-fb-dialog-popup-content{
1432
+ display: flex;
1433
+ justify-content: center;
1434
+ align-items: center;
1435
+ text-align: center;
1436
+ flex-direction: column;
1437
+ padding: 38px 12%;
1438
+ }
1439
+ .cff-fb-dialog-popup-content strong{
1440
+ font-size: 22px;
1441
+ color: #141B38;
1442
+ display: block;
1443
+ margin-bottom: 15px;
1444
+ }
1445
+ .cff-fb-dialog-popup-content span{
1446
+ font-size: 16px;
1447
+ line-height: 1.5em;
1448
+ color: #434960;
1449
+ }
1450
+ .cff-fb-dialog-popup-actions{
1451
+ display: flex;
1452
+ justify-content: center;
1453
+ align-items: center;
1454
+ margin-top: 25px;
1455
+ }
1456
+ .cff-fb-dialog-popup-actions button{
1457
+ width: 100%;
1458
+ margin: 4px 4px;
1459
+ cursor: pointer;
1460
+ height: 42px;
1461
+ }
1462
+
1463
+ /*
1464
+ Footer Sticky Widget
1465
+ */
1466
+ .cff-stck-wdg{
1467
+ position: fixed;
1468
+ right: 21px;
1469
+ z-index: 9;
1470
+ bottom: 20px;
1471
+ }
1472
+ .cff-stck-wdg-btn{
1473
+ width: 52px;
1474
+ height: 52px;
1475
+ background: #fff;
1476
+ border-radius: 50%;
1477
+ cursor: pointer;
1478
+ display: flex;
1479
+ justify-content: center;
1480
+ align-items: center;
1481
+ filter: drop-shadow(0px 9px 13px rgba(0, 0, 0, 0.2));
1482
+ }
1483
+ .cff-stck-wdg-btn svg{
1484
+ width: 25px;
1485
+ fill: #E34F0E;
1486
+ height: 33px;
1487
+ float: left;
1488
+ }
1489
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn svg,.cff-stck-wdg-btn-cls{
1490
+ display: none;
1491
+ }
1492
+
1493
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls,
1494
+ .cff-stck-wdg[data-active="true"] .cff-stck-wdg-btn-cls svg{
1495
+ display: block;
1496
+ }
1497
+ .cff-stck-wdg-btn-cls{
1498
+ width: inherit;
1499
+ height: inherit;
1500
+ position: relative;
1501
+ color: #364152;
1502
+ box-shadow: 0px 1px 6px rgb(0 0 0 / 5%), 0px 9px 12px rgb(0 0 0 / 5%);
1503
+ border-radius: 70px;
1504
+ }
1505
+ .cff-stck-wdg-btn-cls svg {
1506
+ width: 14px;
1507
+ height: 14px;
1508
+ position: absolute;
1509
+ top: 50%;
1510
+ right: 0;
1511
+ bottom: 0;
1512
+ left: 50%;
1513
+ margin-top: -7px;
1514
+ margin-left: -7px;
1515
+ }
1516
+
1517
+ .cff-stck-pop{
1518
+ position: absolute;
1519
+ width: 292px;
1520
+ height: auto;
1521
+ background: #fff;
1522
+ border: 1px solid #E2E8F0;
1523
+ box-sizing: border-box;
1524
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.12);
1525
+ border-radius: 2px;
1526
+ padding: 20px;
1527
+ right: 0px;
1528
+ bottom: 100px;
1529
+ color: #141B38;
1530
+ opacity: 0;
1531
+ padding-bottom: 82px;
1532
+ visibility: hidden;
1533
+ }
1534
+ .cff-stck-wdg[data-active="true"] .cff-stck-pop{
1535
+ bottom: 66px;
1536
+ opacity: 1;
1537
+ visibility: visible;
1538
+ }
1539
+
1540
+ .cff-stck-pop svg{
1541
+ fill: currentColor;
1542
+ }
1543
+ .cff-stck-el-list{
1544
+ border: 1px solid #DCDDE1;
1545
+ border-radius: 2px;
1546
+ }
1547
+ .cff-stck-el{
1548
+ display: flex;
1549
+ align-items: center;
1550
+ padding: 11px 13px;
1551
+ border-bottom: 1px solid #DCDDE1;
1552
+ }
1553
+ .cff-stck-el:hover{
1554
+ background: #F3F4F5;
1555
+ }
1556
+ .cff-stck-el:last-of-type{
1557
+ border-bottom: 0px;
1558
+ }
1559
+ .cff-stck-el-list .cff-chevron svg{
1560
+ width: 5px;
1561
+ height: 8px;
1562
+ }
1563
+ .cff-stck-el-list .cff-stck-el-icon svg {
1564
+
1565
+ }
1566
+ .cff-stck-el .cff-stck-el-txt{
1567
+ color: #27303F;
1568
+ }
1569
+ .cff-stck-el.cff-stck-el-upgrd{
1570
+ padding: 8px 14px;
1571
+ font-size: 14px;
1572
+ background: var(--cl-orange);
1573
+ color: #fff;
1574
+ }
1575
+ .cff-chevron {
1576
+ position: absolute;
1577
+ right: 14px
1578
+ }
1579
+ .cff-stck-el.cff-stck-el-upgrd .cff-stck-el-txt{
1580
+ color: #fff;
1581
+ }
1582
+ .cff-stck-el.cff-stck-el-upgrd:after{
1583
+ top: 20px;
1584
+ opacity: 1;
1585
+ }
1586
+ .cff-stck-el-icon{
1587
+ margin-right: 10px;
1588
+ }
1589
+ .cff-stck-el-icon svg{
1590
+ width: 17px;
1591
+ float: left;
1592
+ }
1593
+ #cff-builder-app .cff-stck-title{
1594
+ margin-top: 20px;
1595
+ margin-bottom: 10px;
1596
+ }
1597
+
1598
+ .cff-stck-follow{
1599
+ background: #F3F4F5;
1600
+ margin-top: 20px;
1601
+ left: 0px;
1602
+ bottom: 0px;
1603
+ position: absolute;
1604
+ padding: 12px 20px;
1605
+ display: flex;
1606
+ align-items: center;
1607
+ }
1608
+ .cff-stck-follow span{
1609
+ font-weight: 600;
1610
+ font-size: 14px;
1611
+ }
1612
+ .cff-stck-flw-links{
1613
+ display: flex;
1614
+ justify-content: center;
1615
+ align-items: center;
1616
+ margin-left: auto;
1617
+ }
1618
+ .cff-stck-flw-links a{
1619
+ width: 36px;
1620
+ height: 28px;
1621
+ color: inherit;
1622
+ display: inline-flex;
1623
+ justify-content: center;
1624
+ align-items: center;
1625
+ margin-left: 4px;
1626
+ border-radius: 2px;
1627
+ }
1628
+ .cff-stck-flw-links svg{
1629
+ width: 17px;
1630
+ color: #141B38;
1631
+ }
1632
+ .cff-stck-flw-links a:hover{
1633
+ background: #fff;
1634
+ }
1635
+ .cff-stck-flw-links a:hover svg{
1636
+ color: inherit;
1637
+ }
1638
+
1639
+
1640
+
1641
+ /*
1642
+ Builder Footer
1643
+ */
1644
+ .cff-bld-footer > div{
1645
+ background: #fff;
1646
+ color: #141B38;
1647
+ margin: 30px 0;
1648
+ }
1649
+ .cff-bld-footer{
1650
+ padding-top: 0px!important
1651
+ }
1652
+ .cff-bld-ft-content{
1653
+ display: flex;
1654
+ align-items: center;
1655
+ max-width: 1200px;
1656
+ }
1657
+ .cff-bld-ft-img{
1658
+ float: left;
1659
+ width: 15%;
1660
+ margin-right: 5%;
1661
+ /*height: 158px;*/
1662
+ }
1663
+ .cff-bld-ft-img svg{
1664
+ margin-bottom: -4px;
1665
+ }
1666
+ .cff-bld-ft-txt{
1667
+ display: flex;
1668
+ justify-content: center;
1669
+ align-items: center;
1670
+ width: 59%;
1671
+ margin-right: 5%;
1672
+ }
1673
+ .cff-bld-ft-txt strong,
1674
+ .cff-fb-mr-fd-heading span{
1675
+ color: var(--cl-orange);
1676
+ }
1677
+ #cff-builder-app .cff-bld-ft-info{
1678
+ width: 44%;
1679
+ color: #434960;
1680
+ }
1681
+ #sb-footer-banner .cff-bld-ft-title{
1682
+ width: 63%;
1683
+ margin-right: 6%;
1684
+ }
1685
+ .cff-bld-ft-action{
1686
+ width: 17%;
1687
+ display: flex;
1688
+ justify-content: left;
1689
+ align-items: center;
1690
+ }
1691
+ .cff-bld-ft-action svg{
1692
+ top: 14px;
1693
+ height: 10px;
1694
+ }
1695
+ @media all and (max-width: 1130px) {
1696
+ #sb-footer-banner .cff-bld-ft-img{
1697
+ width: 17%;
1698
+ margin-right: 3%;
1699
+ }
1700
+ #sb-footer-banner .cff-bld-ft-txt{
1701
+ display: flex;
1702
+ justify-content: center;
1703
+ align-items: center;
1704
+ width: 61%;
1705
+ margin-right: 3%;
1706
+ }
1707
+ #cff-builder-app #sb-footer-banner h3 {
1708
+ font-size: 20px;
1709
+ }
1710
+ #cff-builder-app #sb-footer-banner .sb-small-p {
1711
+ font-size: 13px;
1712
+ }
1713
+ #sb-footer-banner .sb-button-standard {
1714
+ font-size: 13px;
1715
+ padding-left: 16px;
1716
+ line-height: 15px;
1717
+ }
1718
+ }
1719
+
1720
+ .cff-bld-ft-btm{
1721
+ font-size: 14px;
1722
+ display: flex;
1723
+ justify-content: center;
1724
+ align-items: center;
1725
+ padding: 15px 0px;
1726
+ border-top: 1px solid #DCDDE1;
1727
+ }
1728
+ .cff-bld-ft-btm strong{
1729
+ padding: 0 5px;
1730
+ }
1731
+ .cff-bld-ft-btm a{
1732
+ display: inline-block;
1733
+ padding: 0 10px;
1734
+ font-weight: 500;
1735
+ color: #0068A0;
1736
+ }
1737
+ .cff-bld-ft-btm a i{
1738
+ font-size: 12px;
1739
+ margin-left: 5px;
1740
+ }
1741
+ .cff-bld-ft-bns{
1742
+ display: inline-block;
1743
+ margin: 0 10px;
1744
+ padding: 5px 10px;
1745
+ border-radius: 5px;
1746
+ font-size: 14px;
1747
+ font-weight: 700;
1748
+ text-transform: uppercase;
1749
+ color: #663D00;
1750
+ background: #FFDF99;
1751
+ }
1752
+ /*
1753
+ Extensions Poup
1754
+ */
1755
+ .cff-fb-fs-link{
1756
+ position: absolute;
1757
+ width: 100%;
1758
+ height: 100%;
1759
+ left: 0;
1760
+ top: 0;
1761
+ right: 0;
1762
+ bottom: 0;
1763
+ z-index: 1;
1764
+ }
1765
+ .cff-fb-extensions-popup .cff-fb-slctf-back {
1766
+ position: relative;
1767
+ top: -5px;
1768
+ padding: 5px 12px;
1769
+ display: inline-block;
1770
+ z-index: 3;
1771
+ margin-bottom: 11px;
1772
+ }
1773
+ .cff-fb-extensions-popup .cff-fb-slctf-back span {
1774
+ margin-left:9px;
1775
+ }
1776
+ .cff-fb-extpp-top{
1777
+ display: flex;
1778
+ justify-content: center;
1779
+ align-items: center;
1780
+ height: 264px;
1781
+ background: #F3F4F5;
1782
+ }
1783
+ .cff-fb-extpp-top-fdtype.cff-fb-extpp-top{
1784
+ height: 295px;
1785
+ }
1786
+ .cff-fb-extpp-img{
1787
+ width: 50%;
1788
+ float: left;
1789
+ display: flex;
1790
+ justify-content: center;
1791
+ }
1792
+ .cff-fb-extensions-popup[data-getext-view="featuredpost"] .cff-fb-extpp-img{
1793
+ padding: 50px 0px;
1794
+ }
1795
+ .cff-fb-extensions-popup[data-getext-view="singlealbum"] .cff-fb-extpp-img{
1796
+ padding: 65px 0px;
1797
+ }
1798
+ .cff-fb-extpp-social-wall .cff-fb-extpp-top {
1799
+ display: flex;
1800
+ flex-direction: column;
1801
+ align-items: center;
1802
+ height: auto;
1803
+ padding-top: 29px;
1804
+ }
1805
+
1806
+ .cff-fb-extpp-info{
1807
+ width: 50%;
1808
+ float: left;
1809
+ display: flex;
1810
+ justify-content: center;
1811
+ flex-direction: column;
1812
+ padding-left: 40px;
1813
+ }
1814
+ .cff-fb-extpp-info .cff-fb-extpp-head,
1815
+ .cff-fb-extpp-info .cff-fb-extpp-desc{
1816
+ width: 90%;
1817
+ }
1818
+ #cff-builder-app .cff-fb-extpp-head{
1819
+ margin: 0 0 12px;
1820
+ }
1821
+ #cff-builder-app .cff-fb-extpp-desc {
1822
+ color: #475569;
1823
+ display: flex;
1824
+ justify-content: left;
1825
+ align-items: center;
1826
+ width: 105%;
1827
+ }
1828
+ .cff-fb-extpp-head span{
1829
+ color: var(--cl-orange);
1830
+ }
1831
+ .cff-fb-extpp-head span.sb-social-wall{
1832
+ color: inherit;
1833
+ font-size: 26px;
1834
+ line-height: 120% !important;
1835
+ display: inline-block;
1836
+ }
1837
+ .cff-fb-extpp-desc .sb-social-wall {
1838
+ width: 90%;
1839
+ }
1840
+ .cff-fb-extpp-lite-btn{
1841
+ float: left;
1842
+ font-size: 15px;
1843
+ font-weight: 500;
1844
+ padding: 10px 20px;
1845
+ color: #0068A0;
1846
+ background: #fff;
1847
+ border: 1px solid #DCDDE1;
1848
+ margin-bottom: 14px;
1849
+ margin-top: 12px;
1850
+ align-items: center;
1851
+ }
1852
+ .cff-fb-extpp-lite-btn svg{
1853
+ fill: currentColor;
1854
+ width: 20px;
1855
+ float: left;
1856
+ margin-right: 10px;
1857
+ }
1858
+ .cff-fb-extpp-inc-list{
1859
+ border: 1px solid #dcdde1;
1860
+ margin-top: 10px;
1861
+ margin-bottom: 30px;
1862
+ }
1863
+ .cff-fb-extpp-bottom-strg{
1864
+ font-size:18px;
1865
+ font-weight: 600;
1866
+ }
1867
+ .cff-fb-extpp-inc-items{
1868
+ display: grid;
1869
+ grid-template-columns: 25% 25% 25% 25%;
1870
+ }
1871
+ .cff-fb-extpp-inc-item, .cff-fb-extpp-inc-item-bottom{
1872
+ position: relative;
1873
+ height: 50px;
1874
+ display: flex;
1875
+ justify-content: center;
1876
+ align-items: center;
1877
+ border-right: 1px solid #dcdde1;
1878
+ border-bottom: 1px solid #dcdde1;
1879
+ font-size: 14px;
1880
+ }
1881
+ .cff-fb-extpp-inc-item-bottom{
1882
+ border: 0px !important;
1883
+ }
1884
+ .cff-fb-extpp-inc-item:last-of-type{
1885
+ border-right: 0px;
1886
+ }
1887
+ .cff-fb-extpp-inc-item svg, .cff-fb-extpp-inc-item-bottom svg{
1888
+ width: 17px; margin-right: 10px; fill: currentColor; float: left;
1889
+ }
1890
+ .cff-fb-extpp-bottom{
1891
+ padding: 20px 40px;
1892
+ background: #fff;
1893
+ }
1894
+ .cff-extension-bullet-list {
1895
+ display: grid;
1896
+ grid-template-columns: 32% 32% 32%;
1897
+ grid-column-gap: 2%;
1898
+ margin-top: 12px;
1899
+ margin-bottom: 40px;
1900
+ }
1901
+ .cff-extension-single-bullet {
1902
+ display: flex;
1903
+ justify-content: flex-start;
1904
+ align-items: center;
1905
+ margin: 4px 0;
1906
+ }
1907
+ #cff-builder-app .cff-extension-single-bullet span {
1908
+ color: #434960;
1909
+ }
1910
+
1911
+ .cff-extension-single-bullet svg {
1912
+ margin-right: 12px;
1913
+ }
1914
+ .cff-fb-extpp-btns{
1915
+ display: grid;
1916
+ grid-template-columns: 100%;
1917
+ grid-column-gap: 0;
1918
+ }
1919
+ .cff-fb-extpp-btns div{
1920
+ height: 38px;
1921
+ cursor: pointer;
1922
+ position: relative;
1923
+ border-radius: 3px;
1924
+ font-style: normal;
1925
+ font-weight: 600;
1926
+ font-size: 14px;
1927
+ line-height: 160%;
1928
+ display: flex;
1929
+ justify-content: center;
1930
+ align-items: center;
1931
+ box-sizing: border-box;
1932
+ }
1933
+ .cff-fb-extpp-get-btn{
1934
+ color: #fff;
1935
+ background: var(--cl-orange);
1936
+ }
1937
+ .cff-fb-extpp-demo-btn{
1938
+ border: 2px solid #DCDDE1;
1939
+ background: #F3F4F5;
1940
+ }
1941
+
1942
+ /*
1943
+ Feed Type Creation Process : Single Album;
1944
+ */
1945
+ .cff-fb-section-wh-insd{
1946
+ display: flex;
1947
+ }
1948
+ .cff-fb-sglelm-inp-ctn{
1949
+ margin-top: 100px;
1950
+ }
1951
+
1952
+ .cff-fb-sglelm-inp-ctn input[type="text"]{
1953
+ height: 44px;
1954
+ }
1955
+ .cff-fb-section-wh.cff-fb-sglelm-ctn {
1956
+ padding: 20px 21px 24px 30px;
1957
+ }
1958
+ .cff-fb-section-wh.cff-fb-sglelm-ctn .cff-fb-section-wh-insd {
1959
+ padding: 0;
1960
+ }
1961
+ .cff-fb-sglelm-inp-ctn input[type="text"]::placeholder{
1962
+ font-style: normal;
1963
+ font-weight: normal;
1964
+ font-size: 16px;
1965
+ line-height: 160%;
1966
+ color: #8C8F9A;
1967
+ }
1968
+ .cff-fb-sglelm-error-icon{
1969
+ width: 23px;
1970
+ height: 23px;
1971
+ background: var(--error-red);
1972
+ font-family: monospace;
1973
+ font-weight: 900;
1974
+ color: #fff;
1975
+ font-size: 15px;
1976
+ position: absolute;
1977
+ right: 10px;
1978
+ top: 10px;
1979
+ z-index: 999999999999999999;
1980
+ border-radius: 50px;
1981
+ display: flex;
1982
+ justify-content: center;
1983
+ align-items: center;
1984
+ }
1985
+ .cff-fb-sglelm-errormsg{
1986
+ color: var(--error-red);
1987
+ font-weight: 800;
1988
+ }
1989
+ .cff-fb-sglelm-inp-ctn .cff-fb-wh-inp{
1990
+ margin-bottom: 10px;
1991
+ }
1992
+ .cff-fb-sglelm-left{
1993
+ padding-right: 100px;
1994
+ }
1995
+ .cff-fb-sglelm-img-ctn{
1996
+ background:#E8E8EB;
1997
+ height: 350px;
1998
+ display: flex;
1999
+ justify-content: center;
2000
+ align-items: center;
2001
+ text-align: center;
2002
+ flex-direction: column;
2003
+ padding: 100px 50px;
2004
+ border: 1px solid #D0D1D7;
2005
+ box-sizing: border-box;
2006
+ }
2007
+ .cff-fb-sglelm-img-ctn.cff-fb-sglelm-img-pf{
2008
+ padding: 100px 35px;
2009
+ }
2010
+ .cff-fb-sglelm-img-ctn strong{
2011
+ font-size: 16px;
2012
+ color: #434960;
2013
+ margin-bottom: 8px;
2014
+ margin-top: 30px;
2015
+ }
2016
+ .cff-fb-sglelm-img-ctn span{
2017
+ font-size: 14px;
2018
+ line-height:1.6em;
2019
+ color: #8C8F9A;
2020
+ }
2021
+ .cff-fb-sglelm-right{
2022
+ width: 445px
2023
+ }
2024
+ .cff-fb-sglelm-img-errorctn span{
2025
+ padding: 0 20px;
2026
+ color: #434960;
2027
+ font-size: 20px;
2028
+ margin-top: 30px;
2029
+ line-height: 1.2em;
2030
+ }
2031
+ .cff-fb-sglelm-preview{
2032
+ height: 375px;
2033
+ background-color: #141B38;
2034
+ background-position: center center;
2035
+ background-size: cover;
2036
+ display: flex;
2037
+ justify-content: center;
2038
+ align-items: flex-end;
2039
+ color: #fff;
2040
+ }
2041
+ .cff-fb-sglelm-preview:after{
2042
+ content: '';
2043
+ position: absolute;
2044
+ width: 100%; height: 100%;
2045
+ background-image: linear-gradient(to bottom, rgba(0,0,0,0) , rgba(0,0,0,.5));
2046
+ }
2047
+ .cff-fb-sglelm-prev-info{
2048
+ width: 100%;
2049
+ padding: 20px 30px;
2050
+ padding-bottom: 40px;
2051
+ display: flex;
2052
+ justify-content: center;
2053
+ align-items: center;
2054
+ text-align: center;
2055
+ flex-direction: column;
2056
+ z-index: 2;
2057
+ }
2058
+ .cff-fb-sglelm-prev-info strong{
2059
+ font-size: 18px;
2060
+ margin-bottom: 5px;
2061
+ }
2062
+ .cff-fb-sglelm-prev-info span{
2063
+ font-size: 16px;
2064
+ line-height: 1.7em;
2065
+ }
2066
+
2067
+
2068
+ /*
2069
+ Feeds List
2070
+ */
2071
+ #cff-builder-app .cff-fb-select,
2072
+ #cff-builder-app .cff-fb-select:hover,
2073
+ #cff-builder-app .cff-fb-select:focus{
2074
+ border-radius: 0px!important;
2075
+ border: 1px solid #D0D1D7!important;
2076
+ outline: unset!important;
2077
+ float: left;
2078
+ min-height: auto;
2079
+ padding: 6px 31px 6px 8px;
2080
+ background: #fff url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.833252 0.333252L4.99992 4.49992L9.16658 0.333252H0.833252Z' fill='%238C8F9A'/%3E%3C/svg%3E%0A") no-repeat right 13px top 55%;
2081
+ background-size: 10px 6px;
2082
+ }
2083
+ .cff-fd-lst-bulk-ctn > *{
2084
+ float: left;
2085
+ margin-right: 10px;
2086
+ }
2087
+ .cff-fd-lst-bulk-ctn{
2088
+ margin-bottom: 8px;
2089
+ }
2090
+ .cff-fd-lst-pagination-ctn{
2091
+ float: right;
2092
+ display: flex;
2093
+ align-items: center;
2094
+ margin-top: 10px;
2095
+ }
2096
+ .cff-fd-lst-pgnt-btn{
2097
+ height: 30px;
2098
+ padding: 0 8px;
2099
+ cursor: pointer;
2100
+ border-radius: 3px;
2101
+ }
2102
+ .cff-fd-lst-pgnt-info{
2103
+ display: inline-block;
2104
+ padding: 0 3px;
2105
+ }
2106
+ .cff-fd-lst-count{
2107
+ margin-right: 10px;
2108
+ }
2109
+ .cff-feeds-list table{
2110
+ width: 100%;
2111
+ text-align: left;
2112
+ border-spacing: 0px;
2113
+ box-sizing: border-box;
2114
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
2115
+ background: #fff;
2116
+ }
2117
+
2118
+ .cff-feeds-list table a{
2119
+ cursor: pointer;
2120
+ }
2121
+ .cff-fd-lst-tbody tr:nth-child(odd){
2122
+ background: #F3F4F5;
2123
+ }
2124
+ .cff-fd-lst-tbody tr td{
2125
+ position: relative;
2126
+ vertical-align: top;
2127
+ padding: 10px 5px 15px 5px;
2128
+ font-size: 16px;
2129
+ }
2130
+ .cff-fd-lst-tbody tr td:first-child {
2131
+ width: 43%;
2132
+ }
2133
+ .cff-feeds-list table tr td:first-child {
2134
+ width: 30px;
2135
+ }
2136
+ .cff-fd-lst-thtf{
2137
+ background: #fff;
2138
+ }
2139
+ .cff-fd-lst-thtf th, .cff-fd-lst-thtf td{
2140
+ padding: 6px 5px;
2141
+ }
2142
+ .cff-fd-lst-thtf th{
2143
+ border-bottom: 1px solid #DCDDE1;
2144
+ }
2145
+ .cff-fd-lst-thtf td{
2146
+ border-top: 1px solid #DCDDE1;
2147
+ }
2148
+ .cff-fd-lst-chkbx{
2149
+ width: 11px;
2150
+ height: 11px;
2151
+ position: relative;
2152
+ border-radius: 2px;
2153
+ border: 1px solid #97A6BA;
2154
+ background: #fff;
2155
+ cursor: pointer;
2156
+ margin-left: 10px;
2157
+ }
2158
+ tbody .cff-fd-lst-chkbx {
2159
+ position: absolute;
2160
+ top: 15px;
2161
+ left: 5px;
2162
+ bottom: 0;
2163
+ right: 0;
2164
+ }
2165
+ .cff-fd-lst-thtf .cff-fd-lst-chkbx{
2166
+ width: 11px;
2167
+ height: 11px;
2168
+ border: 1px solid #D8DADD;
2169
+ }
2170
+ .cff-fd-lst-chkbx[data-active="true"]{
2171
+ background: var(--customizer-blue);
2172
+ border-color: var(--customizer-blue)!important;
2173
+ }
2174
+ .cff-fd-lst-chkbx[data-active="true"]:before{
2175
+ content: '';
2176
+ position: absolute;
2177
+ width: 6px;
2178
+ height: 3px;
2179
+ left: 2px;
2180
+ top: 2px;
2181
+ border-bottom: 2px solid #fff;
2182
+ border-left: 2px solid #fff;
2183
+ -webkit-transform: rotate(-45deg);
2184
+ transform: rotate(-45deg);
2185
+ }
2186
+
2187
+
2188
+ .cff-fd-lst-name{
2189
+ font-size: 17px;
2190
+ font-weight:500;
2191
+ color: #0068A0!important;
2192
+ }
2193
+ .cff-fd-lst-type{
2194
+ display: block;
2195
+ text-transform: capitalize;
2196
+ }
2197
+ .sb-instances-cell {
2198
+ margin-top: 4px;
2199
+ }
2200
+ .cff-fd-lst-btn{
2201
+ width: 21px;
2202
+ height: 21px;
2203
+ display: inline-flex;
2204
+ justify-content: center;
2205
+ align-items: center;
2206
+ margin: 0 4px;
2207
+ cursor: pointer;
2208
+ color: #141B38;
2209
+ border-radius: 2px;
2210
+ border: 1px solid #D8DADD;
2211
+ -webkit-transition: all .2s ease-in-out;
2212
+ transition: all .2s ease-in-out;
2213
+ background: #fff;
2214
+ }
2215
+ .cff-fd-lst-btn svg {
2216
+ height: 13px;
2217
+ }
2218
+ .cff-fd-lst-actions .cff-fd-lst-btn,
2219
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-btn{
2220
+ box-sizing: border-box;
2221
+ width: 36px;
2222
+ height: 32px;
2223
+ background: transparent;
2224
+ }
2225
+ .cff-fd-lst-actions .cff-fd-lst-btn {
2226
+ margin: 0 4px 0 0;
2227
+ }
2228
+ .cff-fd-lst-actions .cff-fd-lst-btn:last-child {
2229
+ margin: 0;
2230
+ }
2231
+ .cff-fd-lst-actions .cff-fd-lst-btn svg {
2232
+ width: 12px;
2233
+ height: 16px;
2234
+ }
2235
+ .cff-fd-lst-btn-delete{
2236
+ color: #D72C2C;
2237
+ border-color: #FBD5D5;
2238
+ }
2239
+ .cff-fd-lst-btn svg{
2240
+ fill: currentColor;
2241
+ width: 14px;
2242
+ float: left;
2243
+ }
2244
+ .cff-fd-lst-actions .cff-fd-lst-btn:hover svg{
2245
+ color: #fff;
2246
+ }
2247
+ .cff-fd-lst-actions .cff-fd-lst-btn:hover{
2248
+ background: #0096CC;
2249
+ border-color: #0096CC;
2250
+ }
2251
+ .cff-fd-lst-actions .cff-fd-lst-btn-delete:hover{
2252
+ background: #D72C2C;
2253
+ border-color: #D72C2C;
2254
+ }
2255
+ .cff-fd-lst-dimmed .cff-fd-lst-btn, .cff-fd-lst-dimmed .cff-fd-lst-btn:hover{
2256
+ background: #F3F4F5!important;
2257
+ border-color:#D8DADD!important;
2258
+ color: #8C8F9A!important;
2259
+ }
2260
+ .cff-fd-lst-dimmed .cff-fd-lst-btn:hover svg{
2261
+ color: #8C8F9A!important;
2262
+ }
2263
+
2264
+ .cff-fb-tltp-parent{
2265
+ position: relative;
2266
+ }
2267
+ .cff-fb-view-instances[data-active="true"]{
2268
+ font-weight: 600;
2269
+ text-decoration: underline;
2270
+ cursor: pointer;
2271
+ line-height: 1em;
2272
+ }
2273
+ .cff-fb-tltp-elem{
2274
+ position: absolute;
2275
+ color: #fff;
2276
+ background: #434960;
2277
+ font-size: 14px;
2278
+ padding: 7px 10px;
2279
+ border-radius: 3px;
2280
+ font-weight:500;
2281
+ z-index: 9;
2282
+ text-align: center;
2283
+ opacity: 0;
2284
+ visibility: hidden;
2285
+ top: calc(-100% - 30px);
2286
+ left: 50%;
2287
+ -webkit-transform: translateX(-50%);
2288
+ transform: translateX(-50%);
2289
+ -webkit-transition: all .2s ease-in-out;
2290
+ transition: all .2s ease-in-out;
2291
+ }
2292
+ .cff-fb-tltp-elem span{
2293
+ position: relative; z-index: 3;
2294
+ }
2295
+ .cff-fb-tltp-elem:after{
2296
+ content: '';
2297
+ position: absolute;
2298
+ height: 10px;
2299
+ width: 10px;
2300
+ bottom: -5px;
2301
+ left: calc(50% - 5px);
2302
+ background: #434960;
2303
+ transform: rotate(-45deg);
2304
+ }
2305
+ .cff-fb-tltp-parent:hover .cff-fb-tltp-elem {
2306
+ top: calc(-100% - 20px);
2307
+ opacity: 1;
2308
+ visibility: visible;
2309
+ }
2310
+ .cff-fd-lst-shortcode-cp{
2311
+ margin-left: 10px;
2312
+ }
2313
+ .cff-fd-lst-act-th{
2314
+ width: 190px;
2315
+ max-width: 190px;
2316
+ }
2317
+
2318
+ /*
2319
+ Feed Instance Popup
2320
+ */
2321
+ .cff-fb-popup-feedinst .cff-fb-source-top{
2322
+ display: flex;
2323
+ align-items: center;
2324
+ }
2325
+ .cff-fb-popup-feedinst h5{
2326
+ margin-bottom: 0px;
2327
+ float: left;
2328
+ font-size: 27px;
2329
+ }
2330
+ .cff-fb-fdinst-type{
2331
+ padding: 5px 5px;
2332
+ background: #E8E8EB;
2333
+ margin-left: 12px;
2334
+ float: left;
2335
+ }
2336
+ .cff-fb-inst-tbl-ctn{
2337
+ padding: 0 23px 63px;
2338
+ }
2339
+ .cff-fb-inst-tbl-ctn table{
2340
+ width: 100%;
2341
+ border-spacing: unset;
2342
+ box-sizing: border-box;
2343
+ border: 1px solid #DCDDE1;
2344
+ text-align: left;
2345
+ }
2346
+ .cff-fb-inst-tbl-ctn tfoot,.cff-fb-inst-tbl-ctn thead{
2347
+ background: #F3F4F5
2348
+ }
2349
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf th, .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf td{
2350
+ font-size: 13px;
2351
+ color: #364152;
2352
+ padding: 13px 10px;
2353
+ }
2354
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr:nth-child(odd){
2355
+ background: #fff;
2356
+ }
2357
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr:nth-child(even){
2358
+ background: #F3F4F5;
2359
+ }
2360
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf tr th,
2361
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf tr td{
2362
+ padding: 4px 20px;
2363
+ }
2364
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr td{
2365
+ padding: 11px 20px;
2366
+ }
2367
+ .cff-fb-inst-tbl-ctn .cff-fd-lst-name{
2368
+ font-size: 14px;
2369
+ }
2370
+ .cff-fb-inst-tbl-shrtc{
2371
+ display: flex;
2372
+ align-items: center;
2373
+ }
2374
+
2375
+ .cff-fd-inst-btn{
2376
+ width: 10px;
2377
+ height: 10px;
2378
+ box-sizing: border-box;
2379
+ border-right: 3px solid #8C8F9A;
2380
+ border-top: 3px solid #8C8F9A;
2381
+ cursor: pointer;
2382
+ -webkit-transform: rotate(45deg);
2383
+ transform: rotate(45deg);
2384
+ }
2385
+
2386
+ /*Legacy Feeds */
2387
+ .cff-fb-lgc-top-new{
2388
+ color: #141B38;
2389
+ background: #fff;
2390
+ margin: 10px 0px;
2391
+ padding: 15px 20px;
2392
+ display: flex;
2393
+ justify-content: center;
2394
+ align-items: center;
2395
+ font-size: 14px;
2396
+ font-weight: 600;
2397
+ }
2398
+ .cff-fb-lgc-gr{
2399
+ font-size: 12px;
2400
+ text-transform: uppercase;
2401
+ font-weight: 500;
2402
+ background: #59AB46;
2403
+ color: #fff;
2404
+ margin-right: 10px;
2405
+ padding: 6px 10px;
2406
+ border-radius: 2px;
2407
+ line-height: 1em;
2408
+ }
2409
+ .cff-fb-lgc-inf-ctn{
2410
+ background: #fff;
2411
+ padding: 0 20px;
2412
+ display: flex;
2413
+ align-items: center;
2414
+ height: 58px;
2415
+ }
2416
+
2417
+ .cff-fb-lgc-inf-ctn > *{
2418
+ float: left;
2419
+ display: inline-block;
2420
+ position: relative;
2421
+ }
2422
+ #cff-builder-app .cff-fb-lgc-inf-ctn > h4{
2423
+ margin-right: 14px;
2424
+ margin-bottom: 0;
2425
+ }
2426
+ #cff-builder-app .cff-fb-lgc-btn-stg{
2427
+ display: flex;
2428
+ margin-left: auto;
2429
+ }
2430
+ .cff-fd-legacy-feed-toggle{
2431
+ height: 34px;
2432
+ display: flex;
2433
+ justify-content: center;
2434
+ align-items: center;
2435
+ background: #E2F5FF;
2436
+ color:#0068A0;
2437
+ cursor: pointer;
2438
+ font-weight: 600;
2439
+ font-size: 14px;
2440
+ line-height: 160%;
2441
+ }
2442
+ .cff-fd-legacy-feed-toggle:hover {
2443
+ background: #BFE8FF;
2444
+ }
2445
+ .cff-fd-legacy-feed-toggle span{
2446
+ display: inline-block;
2447
+ position: relative;
2448
+ padding-right: 20px;
2449
+ margin-left: -20px;
2450
+ }
2451
+ .cff-fd-legacy-feed-toggle[data-active="true"] span:after{
2452
+ -webkit-transform: rotate(-225deg);
2453
+ transform: rotate(-225deg);
2454
+ top: 7px;
2455
+ }
2456
+ .cff-feeds-list .cff-legacy-table-wrap table{
2457
+ box-shadow: none;
2458
+ border-top: 1px solid #DCDDE1;
2459
+ }
2460
+ .cff-fb-lgc-ctn{
2461
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
2462
+ margin-bottom: 20px;
2463
+ }
2464
+
2465
+ .cff-fb-onbrd-infotxt{
2466
+ display: flex;
2467
+ align-items: center;
2468
+ }
2469
+ .cff-fb-onbrd-infotxt svg{
2470
+ fill: currentColor;
2471
+ width: 16px;
2472
+ display: inline-block;
2473
+ margin-left: 10px;
2474
+ float: left;
2475
+ }
2476
+
2477
+ .cff-fb-onbrd-tltp-parent{
2478
+ position: relative;
2479
+ }
2480
+ .cff-fb-onbrd-tltp-elem{
2481
+ position: absolute;
2482
+ z-index: 9;
2483
+ background: #fff;
2484
+ border-radius: 2px;
2485
+ color: #434960;
2486
+ padding: 16px 52px 4px 24px;
2487
+ font-size: 15px;
2488
+ left: -30px;
2489
+ top: calc(100% + 20px);
2490
+ line-height: 1.7em;
2491
+ box-shadow: 0px 1px 18px rgba(0,0,0,.2);
2492
+ display: none;
2493
+ }
2494
+
2495
+
2496
+
2497
+ .cff-fb-onbrd-tltp-elem[data-active="false"]{
2498
+ display: none;
2499
+ }
2500
+ .cff-fb-onbrd-tltp-elem[data-active="true"],
2501
+ .cff-fb-onbrd-tltp-hover:hover .cff-fb-onbrd-tltp-elem{
2502
+ display: block;
2503
+ min-width: 440px;
2504
+ padding-bottom: 15px;
2505
+ }
2506
+ .cff-fb-onbrd-tltp-elem .sb-pointer {
2507
+ position: absolute;
2508
+ left: 85px;
2509
+ top: -17px;
2510
+ }
2511
+ .cff-fb-onbrd-tltp-elem-2 .sb-pointer {
2512
+ left: 485px;
2513
+
2514
+ }
2515
+ .cff-fb-onbrd-tltp-elem:after{
2516
+ background: #fff;
2517
+ z-index: 999;
2518
+ top: 0px;
2519
+ margin-left: -10px;
2520
+ width: 40px;
2521
+ box-shadow: unset;
2522
+ -webkit-transform: rotate(0deg);
2523
+ transform: rotate(0deg);
2524
+ }
2525
+ .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem{
2526
+ left: 50%;
2527
+ -webkit-transform:translateX(-50%);
2528
+ transform:translateX(-50%);
2529
+ bottom: calc(100% + 15px);
2530
+ top: unset;
2531
+ padding: 8px 11px;
2532
+ width: 100%;
2533
+ text-align: center;
2534
+ box-shadow: 0 5px 9px rgb(0 0 0 / 20%), 0 -4px 9px rgb(0 0 0 / 10%);
2535
+ }
2536
+ .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:before {
2537
+ content: '';
2538
+ position: absolute;
2539
+ left: 50%;
2540
+ bottom: -10px;
2541
+ border-top: 12px solid #fff;
2542
+ border-right: 12px solid transparent;
2543
+ border-left: 12px solid transparent;
2544
+ -webkit-transform: translateX(-50%);
2545
+ transform: translateX(-50%);
2546
+ z-index: 2;
2547
+ }
2548
+ .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:before,
2549
+ .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:after{
2550
+ left: calc(50% - 10px);
2551
+ top: unset;
2552
+ }
2553
+ .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:before{
2554
+ bottom: -10px;
2555
+ }
2556
+ .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:after{
2557
+ bottom: 0px;
2558
+ }
2559
+
2560
+
2561
+ #cff-builder-app .cff-fb-onbrd-tltp-txt{
2562
+ margin: 0px;
2563
+ }
2564
+ .cff-fb-onbrd-tltp-txt:last-of-type{
2565
+ margin-bottom: 0px;
2566
+ }
2567
+ .cff-fb-onbrd-tltp-elem .cff-fb-popup-cls{
2568
+ top: 12px;
2569
+ right: 16px;
2570
+ }
2571
+
2572
+ [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem{
2573
+ right: 50px;
2574
+ left: unset;
2575
+ }
2576
+ [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem:before,
2577
+ [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem:after{
2578
+ left: unset;
2579
+ right: 13%
2580
+ }
2581
+ [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem:after{
2582
+ margin-left: unset;
2583
+ margin-right: -10px;
2584
+ }
2585
+ .cff-fd-lst-dimmed .cff-fb-onbrd-tltp-elem{
2586
+ top: 100%;
2587
+ }
2588
+ .cff-fb-cp-clpboard{
2589
+ width: 0px;
2590
+ height: 0px;
2591
+ position: absolute;
2592
+ left: -100000px;
2593
+ }
2594
+ .cff-fb-copied{
2595
+ position: fixed;
2596
+ z-index: 9999999;
2597
+ background: #010101;
2598
+ color: #fff;
2599
+ line-height: 1em;
2600
+ font-size: 15px;
2601
+ font-weight: 500;
2602
+ padding: 10px 20px;
2603
+ opacity: 0;
2604
+ visibility: hidden;
2605
+ -webkit-transition: all .2s ease-in-out, opacity .4s ease-in-out;
2606
+ transition: all .2s ease-in-out, opacity .4s ease-in-out;
2607
+ left: 50%;
2608
+ bottom: -20px;
2609
+ -webkit-transform: translateX(-50%);
2610
+ transform: translateX(-50%);
2611
+ }
2612
+ .cff-fb-copied[data-active="true"]{
2613
+ opacity: 1;
2614
+ visibility: visible;
2615
+ bottom: 20px;
2616
+ }
2617
+
2618
+ /*
2619
+ ****
2620
+ customizer Screens
2621
+ ****
2622
+ */
2623
+ .sb-customizer-ctn{
2624
+ /*margin-top: 52px;*/
2625
+ min-height: 100vh;
2626
+ }
2627
+ .sb-customizer-sidebar{
2628
+ position: fixed;
2629
+ z-index: 100;
2630
+ width: 375px;
2631
+ box-shadow: 4px 0px 14px rgb(0 0 0 / 5%), 1px 0px 4px rgb(0 0 0 / 10%);
2632
+ background: #fff;
2633
+ left: 160px;
2634
+ top: 96px;
2635
+ overflow: auto;
2636
+ bottom: 0px;
2637
+ padding-bottom: 50px;
2638
+ }
2639
+ body.folded .sb-customizer-sidebar{
2640
+ left: 36px;
2641
+ }
2642
+
2643
+ .sb-customizer-sidebar-tab-ctn{
2644
+ display: flex;
2645
+ justify-content: center;
2646
+ align-items: center;
2647
+ margin-bottom: 24px;
2648
+ }
2649
+ .sb-customizer-sidebar-tab{
2650
+ width: 50%;
2651
+ height: 56px;
2652
+ background: #F3F4F5;
2653
+ border-bottom: 2px solid #F3F4F5;
2654
+ display: flex;
2655
+ justify-content: center;
2656
+ align-items: center;
2657
+ cursor: pointer;
2658
+ }
2659
+ .sb-customizer-sidebar-tab[data-active="true"]{
2660
+ border-color: #0096CC;
2661
+ }
2662
+ .sb-customizer-sidebar-tab:hover {
2663
+ background: #fff!important;
2664
+ color: #141B38!important;
2665
+ }
2666
+ .sb-customizer-sidebar-sec-el{
2667
+ height: 52px;
2668
+ cursor: pointer;
2669
+ display: flex;
2670
+ align-items: center;
2671
+ color: #141B38;
2672
+ border-bottom: 1px solid #DCDDE1;
2673
+ -webkit-transition: background .2s ease-in-out;
2674
+ transition: background .2s ease-in-out;
2675
+ padding: 0 20px;
2676
+ }
2677
+ .sb-customizer-sidebar-sec-el:hover{
2678
+ background: #F3F4F5;
2679
+ border-bottom: 1px solid #F3F4F5;
2680
+ }
2681
+ .sb-customizer-sidebar-sec-el .sb-customizer-chevron svg{
2682
+ position: absolute;
2683
+ right: 22px;
2684
+ top: 22px;
2685
+ }
2686
+ .sb-customizer-sidebar-sec-el-icon{
2687
+ margin-right: 15px;
2688
+ width: 30px;
2689
+ height: 30px;
2690
+ display: flex;
2691
+ justify-content: center;
2692
+ align-items: center;
2693
+ }
2694
+ .sb-customizer-sidebar-sec-el-icon svg{
2695
+ width: 20px;
2696
+ float: left;
2697
+ fill: currentColor;
2698
+ }
2699
+ .sb-customizer-sidebar-sec-elhead{
2700
+ height: 50px;
2701
+ padding: 0 20px;
2702
+ display: flex;
2703
+ align-items: center;
2704
+ margin-top: 30px;
2705
+ font-style: normal;
2706
+ font-weight: bold;
2707
+ font-size: 12px;
2708
+ line-height: 160%;
2709
+ letter-spacing: 0.05em;
2710
+ text-transform: uppercase;
2711
+ color: #8C8F9A;
2712
+ }
2713
+ .sb-customizer-sidebar-header{
2714
+ padding: 20px 20px;
2715
+ border-bottom: 1px solid #DCDDE1;
2716
+ }
2717
+ .sb-customizer-sidebar-header[data-separator="none"]{
2718
+ border-bottom: 0px!important;
2719
+ padding-bottom: 0px;
2720
+ }
2721
+ .sb-customizer-sidebar-header a{
2722
+ cursor: pointer;
2723
+ }
2724
+ .sb-customizer-sidebar-breadcrumb{
2725
+ margin-bottom: 15px;
2726
+ }
2727
+ .sb-breadcrumb-pro-label{
2728
+ color: #fff !important;
2729
+ display: inline-block;
2730
+ background: var(--cl-orange);
2731
+ padding: 5px 8px;
2732
+ font-size: 11px;
2733
+ line-height: 1em !important;
2734
+ border-radius: 4px;
2735
+ -webkit-transform: translateX(5px) translateY(-4px);
2736
+ transform: translateX(8px) translateY(-2px);
2737
+ }
2738
+ .sb-control-elem-label .sb-breadcrumb-pro-label{
2739
+ -webkit-transform: translateX(5px) translateY(0px);
2740
+ transform: translateX(5px) translateY(0px);
2741
+ }
2742
+
2743
+ .sb-customizer-sidebar-breadcrumb a, .sb-customizer-sidebar-breadcrumb span{
2744
+ display: inline-block;
2745
+ position: relative;
2746
+ cursor: pointer;
2747
+ color: #434960;
2748
+ text-transform: uppercase;
2749
+ font-size: 10px;
2750
+ line-height: 160%;
2751
+ letter-spacing: 0.08em;
2752
+ padding: 0 17px;
2753
+ height: 20px;
2754
+ font-weight: 600;
2755
+ }
2756
+ .sb-customizer-sidebar-breadcrumb span{
2757
+ cursor: text;
2758
+ }
2759
+ .sb-customizer-sidebar-breadcrumb svg {
2760
+ position: absolute;
2761
+ left: 4px;
2762
+ top: 6px;
2763
+
2764
+ }
2765
+
2766
+
2767
+ .sb-customizer-sidebar-header strong{
2768
+ font-size: 26px;
2769
+ color: #141B38;
2770
+ display: block;
2771
+ margin-bottom: 10px;
2772
+ line-height: 1.1em;
2773
+ }
2774
+ .sb-customizer-sidebar-header span{
2775
+ line-height: 1em;
2776
+ color: #434960;
2777
+ }
2778
+ .sb-customizer-sidebar-header > span{
2779
+ margin-bottom: 14px;
2780
+ display: block;
2781
+ line-height: 1.5;
2782
+ }
2783
+ .sb-customizer-ctrl-link{
2784
+ text-decoration: underline!important;
2785
+ }
2786
+ /*
2787
+ Controls Style
2788
+ */
2789
+ .sb-control-label[data-title="true"]{
2790
+ font-weight: 600;
2791
+ }
2792
+
2793
+ .sb-control-elem-ctn{
2794
+ display: flex;
2795
+ color: #141B38;
2796
+ padding: 20px 20px;
2797
+ }
2798
+ .sb-control-elem-ctn[data-stacked="true"]{
2799
+ padding: 5px 20px;
2800
+ }
2801
+ .sb-control-elem-ctn[data-type="heading"]{
2802
+ padding-bottom: 0;
2803
+ }
2804
+ .sb-control-elem-overlay{
2805
+ width: 100%!important;
2806
+ height: 100%!important;
2807
+ position: absolute!important;
2808
+ left: 0!important;
2809
+ top: 0!important;
2810
+ z-index: 9!important;
2811
+ background: rgba(255,255,255,0.4)!important;
2812
+ }
2813
+ #cff-builder-app .sb-control-elem-ctn[data-type="heading"] .sb-small-p{
2814
+ font-weight: 600;
2815
+ }
2816
+ #cff-builder-app .sb-control-elem-ctn[data-type="heading"] .sb-control-elem-description{
2817
+ font-style: normal;
2818
+ font-weight: normal;
2819
+ font-size: 12px;
2820
+ line-height: 150%;
2821
+ color: #434960;
2822
+ }
2823
+ #cff-builder-app .sb-control-elem-ctn[data-type="heading"] .sb-control-elem-label {
2824
+ margin-bottom: 0;
2825
+ }
2826
+ .sb-control-elem-heading svg {
2827
+ margin-left: 8px;
2828
+ }
2829
+ .sb-control-elem-ctn[data-separator="top"],.sb-control-elem-ctn[data-separator="both"]{
2830
+ border-top: 1px solid #DCDDE1;
2831
+ }
2832
+ .sb-control-elem-ctn[data-separator="bottom"],.sb-control-elem-ctn[data-separator="both"]{
2833
+ border-bottom: 1px solid #DCDDE1;
2834
+ }
2835
+ .sb-control-elem-ctn[data-type="separator"]{
2836
+ padding: 0;
2837
+ }
2838
+ .sb-control-elem-separator{
2839
+ height: 2px;
2840
+ border-top: 1px solid #DCDDE1;
2841
+ }
2842
+
2843
+ .sb-control-elem-ctn[data-reverse="true"]{
2844
+ flex-direction: row-reverse;
2845
+ }
2846
+ .sb-control-elem-ctn svg{
2847
+ fill: currentColor;
2848
+ }
2849
+ .sb-control-elem-output{
2850
+ padding-left: 20px;
2851
+ }
2852
+ .sb-control-elem-ctn[data-reverse="true"] .sb-control-elem-output{
2853
+ padding-right: 20px;
2854
+ padding-left: 0px;
2855
+ }
2856
+ .sb-control-elem-ctn[data-layout="block"]{
2857
+ display: block;
2858
+ }
2859
+ .sb-control-elem-ctn[data-layout="block"] .sb-control-elem-label{
2860
+ width: 100%;
2861
+ float: left;
2862
+ margin-bottom: 8px;
2863
+ }
2864
+ .sb-control-elem-ctn[data-layout="block"] .sb-control-elem-output{
2865
+ padding: 0px;
2866
+ }
2867
+ .sb-control-elem-ctn[data-layout="block"] input[type="number"] {
2868
+ height: 36px;
2869
+ background: #FFFFFF;
2870
+ border-radius: 1px 0 0 1px !important;
2871
+ /*border-right-color: #F3F4F5 !important;*/
2872
+ }
2873
+ .sb-control-elem-ctn[data-layout="block"] [data-contains-suffix="true"] input[type="number"]{
2874
+ border-right-color: #F3F4F5 !important;
2875
+ }
2876
+ .sb-control-elem-ctn[data-child="true"]{
2877
+ padding-left: 70px;
2878
+ }
2879
+
2880
+ .sb-control-elem-ctn[data-layout="half"]{
2881
+ align-items: center;
2882
+ justify-content: flex-start;
2883
+ }
2884
+ .sb-control-elem-ctn[data-layout="half"][data-switcher-top="true"]{
2885
+ align-items: flex-start!important;
2886
+ }
2887
+ .sb-control-elem-ctn[data-layout="half"][data-switcher-top="true"] .sb-control-switcher-ctn{
2888
+ margin-top: 5px;
2889
+ }
2890
+
2891
+ .sb-control-elem-ctn[data-layout="half"] > div{
2892
+ width: 100%;
2893
+ }
2894
+ .sb-control-elem-ctn[data-type="switcher"][data-reverse="true"][data-layout="half"] > div{
2895
+ width: unset;
2896
+ }
2897
+ .sb-control-elem-ctn[data-layout="half"][data-reverse="true"]{
2898
+ justify-content: flex-end;
2899
+ }
2900
+ [data-type="switcher"][data-reverse="true"][data-layout="half"] .sb-control-elem-output{
2901
+ padding-right: 5px;
2902
+
2903
+ }
2904
+ .sb-control-elem-label-title{
2905
+ display: flex;
2906
+ align-items: center;
2907
+ }
2908
+ .sb-control-elem-description{
2909
+ color: #434960;
2910
+ font-size: 13px;
2911
+ float: left;
2912
+ margin-top: 4px;
2913
+ }
2914
+ .sb-control-elem-description a{
2915
+ cursor: pointer;
2916
+ }
2917
+ .sb-control-elem-ctn[data-heading="strong"] .sb-control-elem-heading{
2918
+ font-weight: 600!important;
2919
+ }
2920
+ .sb-control-elem-heading[data-underline="true"]{
2921
+ text-decoration: underline;
2922
+ }
2923
+ .sb-control-elem-icon{
2924
+ display: flex;
2925
+ justify-content: center;
2926
+ align-items: center;
2927
+ }
2928
+ .sb-control-elem-icon svg{
2929
+ width: 16px;
2930
+ float: left;
2931
+ margin-right: 10px;
2932
+ }
2933
+ .sb-control-elem-tltp{
2934
+ margin-left: 10px;
2935
+ position: relative;
2936
+ }
2937
+ .sb-control-elem-tltp-icon{
2938
+ float: left;
2939
+ cursor: pointer;
2940
+ }
2941
+ .sb-control-elem-tltp-icon svg{
2942
+ width: 14px;
2943
+ float: left;
2944
+ }
2945
+
2946
+ /*Switcher Control*/
2947
+ .sb-control-switcher-ctn{
2948
+ cursor: pointer;
2949
+ display: flex;
2950
+ align-items: center;
2951
+ float: left;
2952
+ }
2953
+ .sb-control-switcher{
2954
+ width: 36px;
2955
+ height: 18px;
2956
+ border-radius: 25px;
2957
+ background: #D0D1D7;
2958
+ position: relative;
2959
+ margin-right: 10px;
2960
+ }
2961
+
2962
+ .sb-control-switcher:before{
2963
+ content: '';
2964
+ position: absolute;
2965
+ height: 14px;
2966
+ width: 14px;
2967
+ left: 3px;
2968
+ top: 2px;
2969
+ border-radius: 25px;
2970
+ background: #fff;
2971
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
2972
+ }
2973
+ .sb-control-switcher-ctn[data-active="true"] .sb-control-switcher{
2974
+ background: var(--customizer-blue);
2975
+ }
2976
+ .sb-control-switcher-ctn[data-active="true"] .sb-control-switcher:before{
2977
+ left: 19px;
2978
+ }
2979
+
2980
+ /*Toggle SINGLE Control*/
2981
+ .sb-control-toggle-elm{
2982
+ display: flex;
2983
+ align-items: center;
2984
+ cursor: pointer;
2985
+ height: 46px;
2986
+ padding: 0 15px;
2987
+ border-right: 1px solid #E8E8EB;
2988
+ border-left: 1px solid #E8E8EB;
2989
+ border-bottom: 1px solid #E8E8EB;
2990
+ }
2991
+ .sb-control-toggle-elm:first-child {
2992
+ border-top: 1px solid #E8E8EB;
2993
+ }
2994
+ .sb-control-toggle-elm[data-disabled="true"]{
2995
+ background: #F3F4F5;
2996
+ }
2997
+ .sb-control-toggle-extension-cover{
2998
+ width: 100%;
2999
+ height: 100%;
3000
+ position: absolute;
3001
+ left: 0px;
3002
+ top: 0;
3003
+ cursor: pointer;
3004
+ z-index: 4;
3005
+
3006
+ }
3007
+
3008
+ .sb-control-toggle-deco{
3009
+ width: 16px;
3010
+ height: 16px;
3011
+ margin-right: 13px;
3012
+ box-sizing: border-box;
3013
+ border-radius: 50%;
3014
+ border: 2px solid #d0d1d7;
3015
+ }
3016
+ .sb-control-toggle-icon{
3017
+ display: flex;
3018
+ justify-content: center;
3019
+ align-items: center;
3020
+ margin-right: 13px;
3021
+ }
3022
+ .sb-control-toggle-icon svg{
3023
+ width: 16px;
3024
+ float: left;
3025
+ fill: #141B38;
3026
+ }
3027
+ .sb-control-toggle-elm[data-active="true"]{
3028
+ background: #F7FDFF;
3029
+ border-radius: 2px;
3030
+ border: 1px solid var(--customizer-blue);
3031
+ }
3032
+ .sb-control-toggle-elm[data-active="true"]{
3033
+ background: #F7FDFF;
3034
+ border-radius: 2px;
3035
+ border: 1px solid var(--customizer-blue);
3036
+ }
3037
+ .sb-control-toggle-elm:hover:not(.sb-control-toggle-elm[data-disabled="true"]) .sb-control-toggle-deco,
3038
+ .sb-control-toggle-elm[data-active="true"]:not(.sb-control-toggle-elm[data-disabled="true"]):hover .sb-control-toggle-deco{
3039
+ border: 4px solid var(--customizer-blue);
3040
+ background: #fff;
3041
+ }
3042
+ .sb-control-toggle-elm[data-active="true"] .sb-control-toggle-deco{
3043
+ border: 6px solid var(--customizer-blue);
3044
+ background: #fff;
3045
+ }
3046
+
3047
+ /*Toggle SET Control*/
3048
+ .sb-control-toggle-set-ctn .sb-control-toggle-elm[data-active="true"]{
3049
+ border-radius: 0px;
3050
+ }
3051
+
3052
+ /*Toggle Button Control*/
3053
+ .sb-control-togglebutton-ctn{
3054
+ display: flex;
3055
+ align-items: center;
3056
+ justify-content: center;
3057
+ padding: 3px;
3058
+ background: #f3f4f5;
3059
+ border-radius: 4px;
3060
+ border: 1px solid #eee;
3061
+ height: 40px;
3062
+ }
3063
+ .sb-control-togglebutton-elm{
3064
+ width: 100%;
3065
+ display: flex;
3066
+ justify-content: center;
3067
+ align-items: center;
3068
+ height: 33px;
3069
+ cursor: pointer;
3070
+ font-weight: 600;
3071
+ border-radius: 4px;
3072
+ text-transform: capitalize;
3073
+ line-height: 1em;
3074
+ }
3075
+ .sb-control-togglebutton-elm[data-active="true"]{
3076
+ color: var(--dark-blue);
3077
+ background: #fff;
3078
+ }
3079
+ .sb-control-togglebutton-elm:hover{
3080
+ color: var(--dark-blue);
3081
+ }
3082
+
3083
+ /*Input Control*/
3084
+ .sb-control-input-ctn{
3085
+ display: flex;
3086
+ }
3087
+ .sb-control-input,.sb-control-input-textrea{
3088
+ height: 40px;
3089
+ background: #fff;
3090
+ border: 1px solid #D0D1D7!important;
3091
+ border-radius: unset!important;
3092
+ outline: unset!important;
3093
+ padding: 0 10px!important;
3094
+ line-height: 1em;
3095
+ margin: 0px;
3096
+ }
3097
+ .sb-control-input-textrea{
3098
+ padding: 10px!important;
3099
+ height: 120px;
3100
+ line-height: 1.5em;
3101
+ }
3102
+ .sb-control-input:hover{
3103
+ color: inherit!important;
3104
+ }
3105
+ .sb-control-input:focus,.sb-control-input-textrea:focus{
3106
+ border: 1px solid #8C8F9A!important;
3107
+ border-radius: unset!important;
3108
+ box-shadow: unset!important;
3109
+ outline: unset!important;
3110
+ }
3111
+ .sb-control-input[disabled],.sb-control-input-textrea[disabled]{
3112
+ background-color: #F3F4F5;
3113
+ border: 1px solid #E8E8EB;
3114
+ }
3115
+ .sb-control-input-info{
3116
+ display: flex;
3117
+ justify-content: center;
3118
+ align-items: center;
3119
+ background: #F3F4F5;
3120
+ padding: 0 8px;
3121
+ font-weight: normal;
3122
+ font-size: 14px;
3123
+ line-height: 160%;
3124
+ color: #434960;
3125
+ border: 1px solid #D0D1D7;
3126
+ border-left: none;
3127
+ border-radius: 0 1px 1px 0 !important;
3128
+ }
3129
+
3130
+ /*CheckBox Control*/
3131
+ .sb-control-checkbox-ctn{
3132
+ cursor: pointer;
3133
+ display: flex;
3134
+ }
3135
+ .sb-control-checkbox{
3136
+ width: 18px;
3137
+ height: 18px;
3138
+ border-radius: 2px;
3139
+ float: left;
3140
+ border: 2px solid #D0D1D7;
3141
+ box-sizing: border-box;
3142
+ position: relative;
3143
+ margin-right: 10px;
3144
+ flex: none;
3145
+ }
3146
+ .sb-control-checkbox-ctn > div{
3147
+ z-index: 3;
3148
+ }
3149
+ .sb-control-checkbox-ctn:hover .sb-control-checkbox-hover{
3150
+ opacity: 1;
3151
+ }
3152
+ .sb-control-checkbox-hover{
3153
+ position: absolute;
3154
+ left: -20px;
3155
+ top: 0px;
3156
+ width: calc(100% + 40px);
3157
+ height: 100%;
3158
+ background:#F3F4F5;
3159
+ z-index: 1;
3160
+ opacity: 0;
3161
+ }
3162
+
3163
+ .sb-control-checkbox{
3164
+ z-index: 5!important;
3165
+ }
3166
+
3167
+
3168
+ .sb-control-checkbox[data-active="true"]{
3169
+ background: var(--customizer-blue);
3170
+ border-color: var(--customizer-blue);
3171
+ color: #fff;
3172
+ }
3173
+ .sb-control-checkbox[data-active="true"]:before{
3174
+ content: '';
3175
+ position: absolute;
3176
+ width: 8px;
3177
+ height: 4px;
3178
+ top: 2px;
3179
+ left: 2px;
3180
+ border-left: 2px solid currentColor;
3181
+ border-bottom: 2px solid currentColor;
3182
+ -webkit-transform: rotate(-45deg);
3183
+ transform: rotate(-45deg);
3184
+ }
3185
+
3186
+
3187
+ /*Action Button Control*/
3188
+ .sb-control-action-button{
3189
+ height: 38px;
3190
+ cursor: pointer;
3191
+ display: flex;
3192
+ flex-direction: row;
3193
+ justify-content: center;
3194
+ align-items: center;
3195
+ background: #F3F4F5;
3196
+ border-radius: 2px;
3197
+ border: 1px solid #DCDDE1;
3198
+ position: relative;
3199
+ line-height: 1em;
3200
+ margin-top: 7px;
3201
+ }
3202
+
3203
+ .sb-control-action-button div{
3204
+ float: left;
3205
+ width: 20px;
3206
+ height: 20px;
3207
+ display: flex;
3208
+ justify-content: center;
3209
+ align-items: center;
3210
+ margin-right: 8px;
3211
+ }
3212
+ .sb-control-action-button svg{
3213
+ width: 17px;
3214
+ }
3215
+
3216
+ /* WPColorPicker Control Redesign */
3217
+ .sb-control-colorpicker-ctn .wp-picker-default{
3218
+ display: none!important;
3219
+ }
3220
+ .sb-control-colorpicker-ctn .minicolors-theme-default.minicolors{
3221
+ width: 100%;
3222
+ }
3223
+
3224
+ .sb-control-colorpicker-ctn .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
3225
+ /*
3226
+ left: auto;
3227
+ right: 6px;
3228
+ top: 6px;
3229
+ width: 26px;
3230
+ height: 26px;
3231
+ background: #F9F9FA;
3232
+ border: 0px;
3233
+ */
3234
+
3235
+ left: auto;
3236
+ right: 1px;
3237
+ top: 1px;
3238
+ width: 35px;
3239
+ height: 35px;
3240
+ background: #F9F9FA;
3241
+ border: 0px;
3242
+ }
3243
+ .minicolors-swatch-color{
3244
+ box-shadow: none;
3245
+ }
3246
+ .sb-control-colorpicker-ctn .minicolors-input,.sb-control-colorpicker-ctn .minicolors-input:focus{
3247
+ height: 37px;
3248
+ width: 100%!important;
3249
+ background: #fff;
3250
+ border: 1px solid #D0D1D7!important;
3251
+ border-radius: unset!important;
3252
+ outline: unset!important;
3253
+ box-shadow: unset!important;
3254
+ padding: 0 10px!important;
3255
+ line-height: 1em;
3256
+ margin: 0px;
3257
+ }
3258
+ .sb-control-colorpicker-ctn .minicolors-input:focus{
3259
+ border: 1px solid #0096CC!important;
3260
+ }
3261
+
3262
+ [data-type="colorpicker"] .minicolors-input{
3263
+ font-size: 13px;
3264
+ }
3265
+ [data-type="colorpicker"] .minicolors-input{
3266
+ font-style: normal;
3267
+ font-weight: normal;
3268
+ font-size: 12px;
3269
+ line-height: 150%;
3270
+ color: #434960;
3271
+ }
3272
+
3273
+ .sb-control-colorpicker-btn{
3274
+ height: 38px;
3275
+ display: flex;
3276
+ justify-content: center;
3277
+ align-items: center;
3278
+ border: 1px solid #DCDDE1;
3279
+ border-left: 0px;
3280
+ padding: 0 10px;
3281
+ background: #F3F4F5;
3282
+ font-style: normal;
3283
+ font-weight: 600;
3284
+ font-size: 12px;
3285
+ line-height: 160%;
3286
+ color: #141B38;
3287
+ cursor: pointer;
3288
+ box-sizing: border-box;
3289
+ }
3290
+ .sb-control-colorpicker-ctn[data-picker-style="reset"] .minicolors-input,
3291
+ .sb-control-coloroverride-ctn{
3292
+ background: #F3F4F5!important;
3293
+ border: 1px solid #DCDDE1!important;
3294
+ }
3295
+ .sb-control-colorpicker-ctn[data-picker-style="reset"] .minicolors-theme-default.minicolors-position-right .minicolors-swatch,
3296
+ .sb-control-coloroverride-ctn .sb-control-coloroverride-swatch{
3297
+ top: 8px;
3298
+ width: 22px;
3299
+ height: 22px;
3300
+ }
3301
+ .sb-control-coloroverride-ctn .sb-control-coloroverride-swatch{
3302
+ position: absolute;
3303
+ right: 10px;
3304
+ }
3305
+ .sb-control-coloroverride-ctn .sb-control-colorpicker-btn{
3306
+ margin-left: auto;
3307
+ border: 0px!important;
3308
+ border-left: 1px solid #DCDDE1!important;
3309
+ }
3310
+ .sb-control-coloroverride-ctn .sb-control-coloroverride-content{
3311
+ width: 100%;
3312
+ display: flex;
3313
+ align-items: center;
3314
+ position: relative;
3315
+ }
3316
+ .sb-control-coloroverride-ctn .sb-control-coloroverride-txt{
3317
+ padding-left: 9px;
3318
+ box-sizing: border-box;
3319
+ }
3320
+
3321
+ /*
3322
+ Customizer Preview
3323
+ */
3324
+ .sb-customizer-preview{
3325
+ min-height: 100px;
3326
+ width: calc(100% - 375px);
3327
+ float: right;
3328
+ box-sizing: border-box;
3329
+ padding: 0 20px;
3330
+ display: flex;
3331
+ justify-content: center;
3332
+ margin-top: 64px;
3333
+ position: relative;
3334
+ flex-wrap: wrap;
3335
+ }
3336
+ .sb-customizer-preview #cff-admin-notices{
3337
+ margin-top: 20px;
3338
+ width: 100%;
3339
+ }
3340
+ .sb-customizer-preview .license-details-modal .cff-modal-content {
3341
+ max-height: none;
3342
+ height: auto;
3343
+ }
3344
+ .sb-customizer-preview .cff-sb-modal-body .sb-why-renew-list:nth-child(3) {
3345
+ margin-bottom: 0;
3346
+ }
3347
+ .sb-customizer-preview .cff-sb-modal-body .sb-why-renew-list:last-child {
3348
+ margin-bottom: 0;
3349
+ }
3350
+ .sb-customizer-preview[data-preview-device="desktop"] .sb-preview-ctn{
3351
+ width: 100%;
3352
+ max-width: 1200px;
3353
+ }
3354
+ .sb-customizer-preview[data-preview-device="tablet"] .sb-preview-ctn{
3355
+ max-width: 100%;
3356
+ width: 800px;
3357
+ }
3358
+ .sb-customizer-preview[data-preview-device="mobile"] .sb-preview-ctn{
3359
+ max-width: 100%;
3360
+ width: 400px;
3361
+ }
3362
+ .cff-preview-ctn {
3363
+ padding: 10px;
3364
+ }
3365
+
3366
+ .sb-preview-top-chooser{
3367
+ padding: 18px 0 16px;
3368
+ display: flex;
3369
+ color: #434960;
3370
+ align-items: center;
3371
+ }
3372
+ .sb-preview-top-chooser strong{
3373
+ font-style: normal;
3374
+ font-weight: bold;
3375
+ font-size: 12px;
3376
+ line-height: 160%;
3377
+ letter-spacing: 0.05em;
3378
+ text-transform: uppercase;
3379
+ color: #434960;
3380
+ }
3381
+ .sb-preview-chooser{
3382
+ height: 36px;
3383
+ background: #E8E8EB;
3384
+ margin-left: auto;
3385
+ padding: 0 2px;
3386
+ border-radius: 1px;
3387
+ display: flex;
3388
+ justify-content: center;
3389
+ align-items: center;
3390
+ }
3391
+ .sb-preview-chooser-btn,.sb-preview-chooser-btn:focus{
3392
+ width: 40px;
3393
+ height: 32px;
3394
+ display: flex;
3395
+ justify-content: center;
3396
+ align-items: center;
3397
+ cursor: pointer;
3398
+ float: left;
3399
+ border: 0;
3400
+ background: unset;
3401
+ outline: none;
3402
+ }
3403
+
3404
+ .sb-preview-chooser-btn svg{
3405
+ width: 15px;
3406
+ fill: currentColor;
3407
+ float: left;
3408
+ }
3409
+ .sb-preview-chooser-btn.sb-mobilee svg{
3410
+ width: 9px;
3411
+ fill: currentColor;
3412
+ float: left;
3413
+ }
3414
+ .sb-preview-chooser-btn[data-active="true"],
3415
+ .sb-preview-chooser-btn:hover{
3416
+ background: #fff!important;
3417
+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
3418
+ border-radius: 1px;
3419
+ }
3420
+
3421
+ .sb-control-checkboxsection-header{
3422
+ width: 100%;
3423
+ margin-top: 25px;
3424
+ display: flex;
3425
+ align-items: center;
3426
+ text-transform: uppercase;
3427
+ font-size: 13px;
3428
+ padding-bottom: 15px;
3429
+ position: relative;
3430
+ }
3431
+ .sb-control-checkboxsection-header:before{
3432
+ content: '';
3433
+ position: absolute;
3434
+ left: -20px;
3435
+ width: calc(100% + 40px);
3436
+ height: 1px;
3437
+ background: #DCDDE1;
3438
+ bottom: 0px;
3439
+ }
3440
+ .sb-control-checkboxsection-name{
3441
+ display: flex;
3442
+ align-items: center;
3443
+ }
3444
+ .sb-control-checkboxsection-header svg{
3445
+ width: 20px;
3446
+ margin-right: 7px;
3447
+ fill: #434960;
3448
+ float: left;
3449
+ }
3450
+ .sb-control-checkboxsection-header > strong{
3451
+ margin-left: auto;
3452
+ }
3453
+ [data-type="checkboxsection"] .sb-control-checkbox-ctn{
3454
+ align-items: center;
3455
+ height: 50px;
3456
+ }
3457
+ [data-type="checkboxsection"] {
3458
+ padding: 0 20px !important;
3459
+ }
3460
+ [data-type="checkboxsection"] .sb-control-elem-label{
3461
+ display: none;
3462
+ }
3463
+ [data-type="checkboxsection"] strong{
3464
+ color: #434960
3465
+ }
3466
+ [data-type="checkboxsection"] [data-active="true"] strong{
3467
+ color: #141B38;
3468
+ }
3469
+ .sb-control-checkboxsection-btn{
3470
+ width: 21px;
3471
+ height: 21px;
3472
+ position: relative;
3473
+ cursor: pointer;
3474
+ }
3475
+ .sb-control-checkboxsection-btn:before{
3476
+ content: '';
3477
+ position: absolute;
3478
+ width: 7px;
3479
+ height: 7px;
3480
+ left: 5px;
3481
+ top: 7px;
3482
+ border-right: 2px solid #8C8F9A;
3483
+ border-bottom: 2px solid #8C8F9A;
3484
+ -webkit-transform: rotate(-45deg);
3485
+ transform: rotate(-45deg);
3486
+ }
3487
+
3488
+ /*Disabled Controls*/
3489
+ .sb-control-elem-ctn[data-disabled="true"] input[type="text"],
3490
+ .sb-control-elem-ctn[data-disabled="true"] input[type="number"],
3491
+ .sb-control-elem-ctn[data-disabled="true"] input[type="date"],
3492
+ .sb-control-elem-ctn[data-disabled="true"] textarea{
3493
+ background: #f0f0f0!important;
3494
+ border-color: #D0D1D7!important;
3495
+ }
3496
+
3497
+ .sb-control-elem-ctn[data-disabled="true"] .sb-control-colorpicker-swatch{
3498
+ background: #D0D1D7!important;
3499
+ }
3500
+ .sb-control-elem-ctn[data-disabled="true"] .sb-control-checkbox{
3501
+ background: #D0D1D7!important;
3502
+ border-color: #c1c1c1!important;
3503
+ }
3504
+ .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm{
3505
+ background: #e5e6e7!important;
3506
+ }
3507
+ .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm{
3508
+ border-color: #c1c1c1!important;
3509
+ }
3510
+ .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm[data-active="true"]{
3511
+ border-top: 0px;
3512
+ }
3513
+ .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm .sb-control-toggle-deco{
3514
+ border-color: #bbb!important;
3515
+ }
3516
+ .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm[data-active="true"] .sb-control-toggle-deco{
3517
+ border-color: #8C8F9A!important;
3518
+
3519
+ }
3520
+
3521
+ /*Source Controls*/
3522
+ .sb-control-sources-ctn .cff-fb-srcs-item{
3523
+ box-sizing: border-box;
3524
+ position: relative;
3525
+ cursor: auto;
3526
+ display: block;
3527
+ height: auto;
3528
+ border: 1px solid #E7E7E9;
3529
+ min-height: 60px;
3530
+ overflow: auto;
3531
+ margin-top: 0px;
3532
+ }
3533
+ .cff-fb-srcs-item-ins{
3534
+ cursor: pointer;
3535
+ display: flex;
3536
+ height: 62px;
3537
+ padding: 0 10px;
3538
+ position: relative;
3539
+ }
3540
+ .sb-control-src-icon{
3541
+ width: 20px;
3542
+ height: 20px;
3543
+ position: absolute;
3544
+ right: 10px;
3545
+ top: 10px;
3546
+ z-index: 2;
3547
+ cursor: pointer;
3548
+ display: flex;
3549
+ justify-content: center;
3550
+ align-items: center;
3551
+ }
3552
+ .sb-control-src-icon svg{
3553
+ width: 13px;
3554
+ float: left;
3555
+ }
3556
+ [data-expanded="true"] .sb-control-src-expand svg,.cff-fb-srcs-info {
3557
+ display: none
3558
+ }
3559
+ .sb-control-src-expand-chevron{
3560
+ width: 7px;
3561
+ height: 7px;
3562
+ border-left: 2px solid currentColor;
3563
+ border-top: 2px solid currentColor;
3564
+ -webkit-transform: rotate(45deg);
3565
+ transform: rotate(45deg);
3566
+ display: none;
3567
+ }
3568
+ [data-expanded="true"] .sb-control-src-expand-chevron,[data-expanded="true"] .cff-fb-srcs-info {
3569
+ display: block;
3570
+ }
3571
+ .sb-control-src-remove svg{
3572
+ width: 11px;
3573
+ fill: var(--error-red);
3574
+ }
3575
+ .sb-control-sources-ctn[data-multifeed="true"] .sb-control-src-expand {
3576
+ right: 30px;
3577
+ }
3578
+ .sb-control-elem-output .sb-control-src-expand:hover {
3579
+ background: #F3F4F5;
3580
+ border-radius: 3px;
3581
+ }
3582
+ .sb-control-elem-output .sb-control-src-expand:hover path{
3583
+ fill: #111;
3584
+ }
3585
+
3586
+ .sb-control-sources-ctn .cff-fb-srcs-item .cff-fb-srcs-item-name{
3587
+ font-size: 17px;
3588
+ line-height: 1em;
3589
+ margin-bottom: 3px;
3590
+ }
3591
+
3592
+ .cff-fb-srcs-info-item{
3593
+ display: flex;
3594
+ border-top: 1px solid #E7E7E9;
3595
+ box-sizing: border-box;
3596
+ width: 100%;
3597
+ float: left;
3598
+ padding: 8px 10px;
3599
+ }
3600
+ .cff-fb-srcs-info-item:first-of-type{
3601
+ align-items: center;
3602
+ }
3603
+ .cff-fb-srcs-info-item strong{
3604
+ font-size: 14px;
3605
+ width: 50px;
3606
+ }
3607
+ .cff-fb-srcs-info-item span{
3608
+ font-size: 13px;
3609
+ line-height: 1.1em;
3610
+ color: #434960;
3611
+ font-weight: 400;
3612
+ display: inline-block;
3613
+ word-break: break-all;
3614
+ width: calc(100% - 80px);
3615
+ padding: 0 15px;
3616
+ box-sizing: border-box;
3617
+ }
3618
+ .cff-fb-srcs-info-icon{
3619
+ width: 26px;
3620
+ height: 26px;
3621
+ display: flex;
3622
+ justify-content: center;
3623
+ align-items: center;
3624
+ cursor: pointer;
3625
+ margin-left: auto;
3626
+ border: 1px solid #D0D1D7;
3627
+ border-radius: 2px;
3628
+ }
3629
+ .cff-fb-srcs-info-icon svg{
3630
+ width: 15px;
3631
+ float: left;
3632
+ }
3633
+ .sb-control-sources-ctn .sb-control-action-button{
3634
+ margin-top: 8px;
3635
+ margin-bottom: 16px;
3636
+ }
3637
+ .sb-control-sources-promo-ctn{
3638
+ padding: 16px 0;
3639
+ }
3640
+ .sb-control-sources-promo-ctn:before{
3641
+ content: '';
3642
+ position: absolute;
3643
+ height: 1px;
3644
+ width: calc(100% + 40px);
3645
+ left: -20px;
3646
+ top: 0px;
3647
+ background: #E7E7E9;
3648
+ }
3649
+ .sb-control-sources-promo-top{
3650
+ width: 100%;
3651
+ box-sizing: border-box;
3652
+ padding: 30px 20px;
3653
+ border: 1px solid #E8E8EB;
3654
+ float: left;
3655
+ background: #F9F9FA;
3656
+ }
3657
+ .sb-control-sources-promo-top > div{
3658
+ width: 100%;
3659
+ float: left;
3660
+ text-align: center;
3661
+ display: flex;
3662
+ justify-content: center;
3663
+ align-items: center;
3664
+ box-sizing: border-box;
3665
+ line-height: 1.6em;
3666
+ }
3667
+ .sb-btn-chevron{
3668
+ display: inline-block;
3669
+ width: 7px;
3670
+ height: 7px;
3671
+ border-right: 2px solid currentColor;
3672
+ border-top: 2px solid currentColor;
3673
+ -webkit-transform: rotate(45deg);
3674
+ transform: rotate(45deg);
3675
+ }
3676
+ .sb-control-sources-promo-text{
3677
+ font-size: 15px;
3678
+ font-weight: 600;
3679
+ }
3680
+ .sb-control-sources-promo-btn{
3681
+ display: flex;
3682
+ align-items: center;
3683
+ justify-content: center;
3684
+ padding: 16px 20px;
3685
+ color: #fff !important;
3686
+ background: #0068A0;
3687
+ font-size: 15px;
3688
+ }
3689
+ .sb-control-sources-promo-btn div{
3690
+ margin-left: 10px;
3691
+ }
3692
+ .sb-control-sources-promo-icon{
3693
+ margin-bottom: 20px;
3694
+ }
3695
+
3696
+ /*Loading Bar*/
3697
+ .sb-loadingbar-ctn{
3698
+ position: absolute;
3699
+ height: 5px;
3700
+ width: 100%;
3701
+ left: 0px;
3702
+ bottom: 0px;
3703
+ background: rgba(227, 79, 14, 0.25);
3704
+ z-index: 999999999999999;
3705
+ }
3706
+ .sb-loadingbar-ctn:before, .sb-loadingbar-ctn:after{
3707
+ content: '';
3708
+ position: absolute;
3709
+ height: 5px;
3710
+ background: #E34F0E;
3711
+ z-index: 9;
3712
+ top: 0;
3713
+ }
3714
+
3715
+ .sb-loadingbar-ctn:before{
3716
+ -webkit-animation: cff-loading-animation 4s infinite;
3717
+ animation: cff-loading-animation 4s infinite;
3718
+ }
3719
+ .sb-loadingbar-ctn:after{
3720
+ -webkit-animation: cff-loading-animation 4s 2s infinite;
3721
+ animation: cff-loading-animation 4s 2s infinite;
3722
+ }
3723
+
3724
+ @-webkit-keyframes cff-loading-animation {
3725
+ from { left: -5%; width: 0%; }
3726
+ to { left: 130%; width: 50%;}
3727
+ }
3728
+ @keyframes cff-loading-animation {
3729
+ from { left: -5%; width: 0%; }
3730
+ to { left: 130%; width: 50%;}
3731
+ }
3732
+
3733
+ /*Notification Element*/
3734
+ .sb-notification-ctn{
3735
+ position: fixed;
3736
+ bottom: -100px;
3737
+ left: 200px;
3738
+ z-index: 99999;
3739
+ background: #fff;
3740
+ display: flex;
3741
+ justify-content: center;
3742
+ align-items: center;
3743
+ border-left: 3px solid #fff;
3744
+ line-height: 1em;
3745
+ padding: 10px 20px;
3746
+ padding-left: 0px;
3747
+ border-radius: 4px;
3748
+ box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
3749
+
3750
+ }
3751
+ .sb-notification-ctn[data-active="hidden"]{
3752
+ -webkit-animation: cff-notification-hide .5s forwards linear;
3753
+ animation: cff-notification-hide .5s forwards linear;
3754
+ }
3755
+ .sb-notification-ctn[data-active="shown"]{
3756
+ -webkit-animation: cff-notification-show .5s forwards linear;
3757
+ animation: cff-notification-show .5s forwards linear;
3758
+ }
3759
+ @-webkit-keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
3760
+ @keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
3761
+
3762
+ @-webkit-keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
3763
+ @keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
3764
+
3765
+ .sb-notification-ctn[data-type="success"]{
3766
+ border-color: #59AB46;
3767
+ }
3768
+ .sb-notification-ctn[data-type="error"]{
3769
+ border-color: #D72C2C;
3770
+ }
3771
+ .sb-notification-ctn[data-type="message"]{
3772
+ border-color: #141B38;
3773
+ }
3774
+ .sb-notification-icon{
3775
+ width: 25px;
3776
+ height: 25px;
3777
+ display: flex;
3778
+ justify-content: center;
3779
+ align-items: center;
3780
+ margin-left: 10px;
3781
+ margin-right: 15px;
3782
+ }
3783
+ .sb-notification-icon svg{
3784
+ width: 22px;
3785
+ height: 22px;
3786
+ float: left;
3787
+ fill: currentColor;
3788
+ }
3789
+
3790
+ .sb-notification-ctn[data-type="success"] .sb-notification-icon{
3791
+ color: #59AB46;
3792
+ }
3793
+ .sb-notification-ctn[data-type="error"] .sb-notification-icon{
3794
+ color: #D72C2C;
3795
+ }
3796
+ .sb-notification-ctn[data-type="message"] .sb-notification-icon{
3797
+ color: #141B38;
3798
+ }
3799
+
3800
+ .sb-notification-ctn span{
3801
+ font-size: 14px;
3802
+ color: #141B38;
3803
+ font-weight:500;
3804
+ }
3805
+
3806
+ /* Onboarding */
3807
+ .sb-onboarding-tooltip {
3808
+ display: none;
3809
+ position: absolute;
3810
+ min-height: auto;
3811
+ width: 432px;
3812
+ max-width: 100%;
3813
+ padding: 0;
3814
+ border-radius: 2px;
3815
+ }
3816
+ #sb-onboarding-tooltip-multiple-2,
3817
+ #sb-onboarding-tooltip-multiple-3{
3818
+ width: 528px;
3819
+ }
3820
+ #sb-onboarding-tooltip-single-2 {
3821
+ width: 402px;
3822
+ z-index: 99999999999999;
3823
+ }
3824
+ .sb-onboarding-active .sb-onboarding-highlight .cff-fb-btn.cff-fb-btn-new,
3825
+ .sb-onboarding-active .sb-positioning-wrap.sb-onboarding-highlight,
3826
+ .sb-onboarding-active .cff-fd-lst-bigctn .cff-table-wrap.sb-onboarding-highlight,
3827
+ .sb-onboarding-active .cff-fb-lgc-ctn.sb-onboarding-highlight,
3828
+ .sb-onboarding-active .cff-fb-lgc-ctn .cff-legacy-table-wrap.sb-onboarding-highlight{
3829
+ position: relative;
3830
+ z-index: 100000;
3831
+ }
3832
+ .sb-onboarding-active .cff-fd-legacy-feed-toggle {
3833
+ display: none;
3834
+ }
3835
+ .cff-legacy-table-wrap.sb-onboarding-highlight {
3836
+ clear: both;
3837
+ }
3838
+ .sb-onboarding-tooltip-1 {
3839
+ top: 50px;
3840
+ left: 8px;
3841
+ }
3842
+ #sb-onboarding-tooltip-single-2 {
3843
+ bottom: -179px;
3844
+ top: auto;
3845
+ left: 68%;
3846
+ margin-left: -201px;
3847
+ }
3848
+ #sb-onboarding-tooltip-multiple-2,
3849
+ #sb-onboarding-tooltip-multiple-3{
3850
+ top: -200px;
3851
+ left: 20%;
3852
+ }
3853
+ #sb-onboarding-tooltip-multiple-3 {
3854
+ top: -210px;
3855
+ }
3856
+ .sb-onboarding-tooltip .cff-fb-wrapper {
3857
+ display: flex;
3858
+ justify-content: flex-end;
3859
+ }
3860
+ .sb-positioning-wrap {
3861
+ width: 432px;
3862
+ }
3863
+ .sb-onboarding-tooltip .cff-fb-popup-cls {
3864
+ position:absolute;
3865
+ width: 12px;
3866
+ height: 12px;
3867
+ top: 12px;
3868
+ right: 12px;
3869
+ }
3870
+ .sb-onboarding-tooltip .cff-fb-popup-cls svg {
3871
+ width: 12px;
3872
+ height: 12px;
3873
+ }
3874
+ .sb-onboarding-tooltip h3 {
3875
+ font-size: 16px;
3876
+ color: #141B38;
3877
+ line-height: 160%;
3878
+ font-weight: 600;
3879
+ margin: 0;
3880
+ }
3881
+ .sb-onboarding-step {
3882
+ font-style: normal;
3883
+ font-weight: normal;
3884
+ font-size: 12px;
3885
+ line-height: 160%;
3886
+ color: #434960;
3887
+ margin: 2px 0 20px;
3888
+ display: block;
3889
+ }
3890
+ .cff-onboarding-next,
3891
+ .cff-onboarding-previous{
3892
+ color: #353A41;
3893
+ background: #F3F4F5;
3894
+ border: 1px solid #DCDDE1;
3895
+ margin-left: 10px;
3896
+ }
3897
+ .sb-onboarding-tooltip .cff-fb-hd-btn {
3898
+ margin-right: 0;
3899
+ }
3900
+ .sb-onboarding-tooltip .cff-fb-hd-btn i {
3901
+ margin: 0;
3902
+ }
3903
+ .cff-onboarding-finish{
3904
+ margin-left: 10px;
3905
+ padding: 0 32px;
3906
+ }
3907
+ .sb-onboarding-tooltip .cff-fb-hd-btn[data-active="false"] {
3908
+ background-color: #e8e8eb;
3909
+ color: #8c8f99;
3910
+ }
3911
+ .sb-onboarding-tooltip .cff-fb-hd-btn[data-active="false"]:hover {
3912
+ cursor: default;
3913
+ }
3914
+ .sb-step-counter-wrap span {
3915
+ font-style: normal;
3916
+ font-weight: bold;
3917
+ font-size: 12px;
3918
+ line-height: 160%;
3919
+ letter-spacing: 0.05em;
3920
+ text-transform: uppercase;
3921
+ color: #141B38;
3922
+ }
3923
+ .sb-onboarding-tooltip .sb-pointer {
3924
+ position: absolute;
3925
+ left: 50px;
3926
+ top: -14px;
3927
+ }
3928
+ .sb-onboarding-tooltip .sb-pointer.sb-bottom-pointer {
3929
+ top: auto;;
3930
+ bottom: -14px;
3931
+ }
3932
+ #sb-onboarding-tooltip-single-2 .sb-pointer {
3933
+ left: 193px;
3934
+ }
3935
+ #sb-onboarding-tooltip-multiple-2:before,
3936
+ #sb-onboarding-tooltip-multiple-3:before{
3937
+ bottom: -8px;
3938
+ }
3939
+ .sb-onboarding-top-row {
3940
+ padding: 20px 44px 0 24px;
3941
+ }
3942
+ .sb-onboarding-bottom-row {
3943
+ display: flex;
3944
+ flex-direction: row;
3945
+ justify-content: space-between;
3946
+ align-items: center;
3947
+ padding: 8px 16px 12px 24px;
3948
+ }
3949
+
3950
+
3951
+ /*Vue Color Picker*/
3952
+ .sb-control-colorpicker-ctn .vc-sketch{
3953
+ box-shadow: none!important;
3954
+ }
3955
+ .sb-control-colorpicker-popup{
3956
+ box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
3957
+ position: absolute;
3958
+ z-index: 99;
3959
+ top: 100%;
3960
+ background: #fff;
3961
+ right: 0px;
3962
+ }
3963
+ .sb-control-colorpicker-popup .sb-colorpicker-reset-btn{
3964
+ width: calc(100% - 20px);
3965
+ margin-left: 10px;
3966
+ margin-bottom: 15px;
3967
+ }
3968
+ .sb-control-colorpicker-swatch{
3969
+ width: 38px;
3970
+ height: 38px;
3971
+ position: absolute;
3972
+ right: 1px;
3973
+ top: 1px;
3974
+ background: #f7f7f7;
3975
+ }
3976
+ .sb-control-colorpicker-ctn .sb-control-input{
3977
+ width: 100%;
3978
+ }
3979
+
3980
+ @media (min-width: 768px) and (max-width: 1023px) {
3981
+ .cff-csz-header-insider {
3982
+ width: 100%;
3983
+ }
3984
+ .cff-csz-header-insider .sb-button-standard {
3985
+ padding: 10px 14px 10px 30px;
3986
+ }
3987
+ }
3988
+ @media (min-width: 1024px) and (max-width: 1200px) {
3989
+ .cff-fb-wlcm-inf-3 {
3990
+ padding-left: 120px;
3991
+ }
3992
+ }
3993
+ @media (max-width: 767px) {
3994
+ .cff-fd-lst-thtf th:nth-child(3),
3995
+ .cff-fd-lst-thtf th:nth-child(4),
3996
+ .cff-fd-lst-tbody tr td:nth-child(3),
3997
+ .cff-fd-lst-tbody tr td:nth-child(4),
3998
+ .cff-fd-lst-thtf tr td:nth-child(3),
3999
+ .cff-fd-lst-thtf tr td:nth-child(4) {
4000
+ display: none;
4001
+ }
4002
+ .cff-fd-lst-thtf th:last-child,
4003
+ .cff-fd-lst-thtf tr td:last-child {
4004
+ padding-right: 15px;
4005
+ text-align: right;
4006
+ }
4007
+ .cff-fd-lst-tbody tr td.cff-fd-lst-actions .sb-flex-center{
4008
+ justify-content: flex-end;
4009
+ padding-right: 8px;
4010
+ }
4011
+ .cff-fb-full-wrapper {
4012
+ padding: 70px 20px 0 20px;
4013
+ }
4014
+ .cff-fb-header {
4015
+ padding: 0px 20px;
4016
+ }
4017
+ .cff-bld-ft-content {
4018
+ flex-wrap: wrap;
4019
+ }
4020
+ #sb-footer-banner .cff-bld-ft-img {
4021
+ width: 100%;
4022
+ height: 140px;
4023
+ }
4024
+ #sb-footer-banner .cff-bld-ft-img img {
4025
+ height: 100%;
4026
+ width: auto;
4027
+ }
4028
+ #sb-footer-banner .cff-bld-ft-txt {
4029
+ justify-content: center;
4030
+ align-items: center;
4031
+ width: 100%;
4032
+ margin-right: 3%;
4033
+ padding: 20px;
4034
+ }
4035
+ .cff-bld-ft-action {
4036
+ width: 100%;
4037
+ padding: 0 20px 20px;
4038
+ }
4039
+ .cff-bld-footer > div {
4040
+ margin-bottom: 60px;
4041
+ }
4042
+
4043
+ /* single feed page */
4044
+ .cff-csz-header-insider {
4045
+ flex-wrap: wrap;
4046
+ height: auto;
4047
+ width: 100%;
4048
+ }
4049
+ .cff-fb-header.cff-csz-header {
4050
+ height: 110px;
4051
+ }
4052
+ .cff-csz-header.cff-fb-header {
4053
+ padding-bottom: 6px;
4054
+ }
4055
+ .cff-csz-header .cff-csz-hd-actions {
4056
+ margin-top: 10px;
4057
+ }
4058
+ .sb-customizer-preview {
4059
+ display: none;
4060
+ }
4061
+ .sb-customizer-ctn .sb-customizer-sidebar {
4062
+ position: initial;
4063
+ margin-top: 110px;
4064
+ width: 100%;
4065
+ }
4066
+ .sb-notification-ctn {
4067
+ left: 20px;
4068
+ }
4069
+ .cff-fb-header .sb-button-standard{
4070
+ padding: 10px 10px 10px 31px;
4071
+ }
4072
+ .cff-fb-embed-ctn.sb-fs-boss.cff-fb-center-boss .cff-fb-popup-inside {
4073
+ top: 35px;
4074
+ }
4075
+ .cff-fb-embed-btns-ctn {
4076
+ grid-template-columns: 100%;
4077
+ }
4078
+ .cff-fb-embed-btns-ctn .cff-fb-embed-btn {
4079
+ margin-bottom: 10px;
4080
+ }
4081
+ .cff-fb-embed-ctn.sb-fs-boss.cff-fb-center-boss .cff-fb-popup-inside .cff-fb-embed-step-1-top {
4082
+ margin-bottom: 10px;
4083
+ }
4084
+ .cff-fb-embed-ctn.sb-fs-boss.cff-fb-center-boss .cff-fb-popup-inside .cff-fb-embed-input-ctn {
4085
+ flex-wrap: wrap;
4086
+ }
4087
+ .cff-fb-embed-input-ctn input, .cff-fb-embed-input-ctn input[type="text"] {
4088
+ width: 100%;
4089
+ border-right: 1px solid #D0D1D7!important;
4090
+ }
4091
+ .cff-fb-embed-input-ctn .cff-fb-hd-btn {
4092
+ width: 32%;
4093
+ max-width: 120px;
4094
+ margin-top: 10px !important;
4095
+ padding: 8px;
4096
+ }
4097
+ .sb-fs-boss.cff-fb-center-boss {
4098
+ z-index: 100001 !important;
4099
+ }
4100
+ #sb-footer-banner .cff-bld-ft-txt {
4101
+ flex-wrap: wrap;
4102
+ }
4103
+ #cff-builder-app #sb-footer-banner h3,
4104
+ #cff-builder-app #sb-footer-banner .sb-small-p {
4105
+ width: 100%;
4106
+ }
4107
+ #cff-builder-app #sb-footer-banner h3 {
4108
+ margin-bottom: 10px;
4109
+ }
4110
+ .cff-fb-srcslist-ctn {
4111
+ grid-template-columns: 100%
4112
+ }
4113
+ .cff-fb-mr-fd-img {
4114
+ width: 100%;
4115
+ margin-right: 0;
4116
+ }
4117
+ .cff-fb-mr-fd-img svg {
4118
+ max-width: 100%;
4119
+ }
4120
+ .cff-fd-lst-tbody tr td:nth-child(2) {
4121
+ width: 50%;
4122
+ }
4123
+
4124
+ .cff-fb-wlcm-inf-1,
4125
+ .cff-fb-wlcm-inf-2,
4126
+ .cff-fb-wlcm-inf-3 {
4127
+ padding-left: 0;
4128
+ }
4129
+
4130
+ .cff-fb-wlcm-inf-3 .cff-fb-inf-img,
4131
+ .cff-fb-wlcm-inf-2 .cff-fb-inf-img,
4132
+ .cff-fb-wlcm-inf-1 .cff-fb-inf-svg {
4133
+ display: none;
4134
+ }
4135
+ .cff-fb-wlcm-inf-3 .cff-fb-inf-cnt {
4136
+ justify-content: flex-start;
4137
+ }
4138
+ .cff-fb-wlcm-inf-1 .cff-fb-inf-cnt {
4139
+ width: calc(100% - 53px);
4140
+ }
4141
+ .cff-fb-wlcm-inf-2 .cff-fb-inf-cnt,
4142
+ .cff-fb-wlcm-inf-3 .cff-fb-inf-cnt {
4143
+ width: 100%;
4144
+ }
4145
+
4146
+ .cff-fb-wlcm-inf-1 .cff-fb-inf-cnt .cff-fb-inf-txt{
4147
+ width: 80%;
4148
+ }
4149
+
4150
+ .cff-fb-wlcm-inf-2 .cff-fb-inf-cnt {
4151
+ margin-bottom: 24px;
4152
+ }
4153
+
4154
+ }
4155
+
4156
+ @media (min-width: 768px) and (max-width: 1023px) {
4157
+ .cff-fb-wlcm-inf-3 {
4158
+ padding-left: 7px;
4159
+ }
4160
+ .cff-fb-wlcm-inf-2 {
4161
+ padding-left: 52px;
4162
+ }
4163
+ .cff-fb-wlcm-inf-1 {
4164
+ padding-left: 85px;
4165
+ }
4166
+ .cff-fb-wlcm-inf-1 .cff-fb-inf-svg {
4167
+ display: none;
4168
+ }
4169
+ }
4170
+
4171
+ /*
4172
+ FREE
4173
+ */
4174
+
4175
+ .cff-fb-types-list-free{
4176
+ display: block;
4177
+ grid-template-columns: unset;
4178
+ grid-column-gap: unset;
4179
+ margin-bottom: 31px;
4180
+ margin-top: 25px;
4181
+ }
4182
+ .cff-fb-types-list-free .cff-fb-type-el > div{
4183
+ height: 100%;
4184
+ }
4185
+ .cff-fb-types-list-free .cff-fb-type-el{
4186
+ width: 420px;
4187
+ max-width: 100%;
4188
+ height: 165px;
4189
+ flex-direction: row;
4190
+ align-items: center;
4191
+ }
4192
+ .cff-fb-types-list-free .cff-fb-type-el .cff-fb-type-el-info{
4193
+ text-align: left;
4194
+ align-items: flex-start;
4195
+ justify-content: center;
4196
+ }
4197
+
4198
+ .cff-fb-types-list-free .cff-fb-type-el .cff-fb-type-el-info > *{
4199
+ padding: 0 20px;
4200
+ }
4201
+
4202
+ .cff-fb-types-list-pro{
4203
+ display: grid;
4204
+ grid-template-columns: 24.5% 24.5% 24.5% 24.5%;
4205
+ grid-column-gap: 0.5%;
4206
+ margin-top: 10px;
4207
+ }
4208
+ .cff-fb-type-el-pro{
4209
+ display: flex;
4210
+ flex-direction: row;
4211
+ align-items: center;
4212
+ padding: 12px 20px 12px 12px;
4213
+ background: #F9F9FA;
4214
+ border: 1px solid #D0D1D7;
4215
+ box-sizing: border-box;
4216
+ border-radius: 2px;
4217
+ color: #141B38;
4218
+ font-weight: 600;
4219
+ font-size: 14px;
4220
+ margin-bottom: 10px;
4221
+ cursor: pointer;
4222
+ }
4223
+ .cff-fb-type-el-pro:hover{
4224
+ background: #E2F5FF;
4225
+ border: 1px solid #E2F5FF;
4226
+ }
4227
+ .cff-fb-type-el-pro-img svg{
4228
+ float: left;
4229
+ }
4230
+ .cff-fb-type-el-pro-img{
4231
+ margin-right: 20px;
4232
+ }
4233
+
4234
+ /*Lite Top Banner Dismiss*/
4235
+ .cff-builder-app-lite-dismiss .cff-header-notice{
4236
+ position: fixed!important;
4237
+ top: 32px;
4238
+ width: 100%;
4239
+ z-index: 2;
4240
+ left: 0;
4241
+ }
4242
+ .cff-builder-app-lite-dismiss .cff-fb-header{
4243
+ top: 64px;
4244
+ }
4245
+ .cff-builder-app-lite-dismiss .sb-customizer-sidebar{
4246
+ top: 128px;
4247
+ }
4248
+ .cff-builder-app-lite-dismiss .sb-customizer-preview{
4249
+ margin-top: 100px;
4250
  }
admin/builder/assets/css/global.css CHANGED
@@ -1,2994 +1,2994 @@
1
- /*
2
- Global CSS styles
3
- Theses styles can be used for different screens
4
- & In different SmashBalloon Plugins
5
-
6
- * Transitions
7
- * Default, Hover & Focus Colors & Backgrounds
8
- * Social Colors
9
- * Buttons
10
- * Full Screen Boss
11
- * Add Source Popup
12
- * Confirm Dialog
13
- * Full Screen Loader
14
- * Tooltip
15
-
16
- */
17
- #cff-settings{
18
- visibility: hidden;
19
- opacity: 0;
20
- }
21
- #cff-settings[data-app-loaded="true"]{
22
- visibility: visible;
23
- opacity: 1;
24
- }
25
-
26
- #cff-builder-app {
27
- -webkit-font-smoothing: antialiased;
28
- }
29
-
30
- /*
31
- Transitions
32
- */
33
- .sb-tr-1{
34
- -webkit-transition: all .1s ease-in-out;
35
- transition: all .1s ease-in-out;
36
- }
37
- .sb-tr-2{
38
- -webkit-transition: all .2s ease-in-out;
39
- transition: all .2s ease-in-out;
40
- }
41
- .sb-tr-3{
42
- -webkit-transition: all .3s ease-in-out;
43
- transition: all .3s ease-in-out;
44
- }
45
- .sb-tr-4{
46
- -webkit-transition: all .4s ease-in-out;
47
- transition: all .4s ease-in-out;
48
- }
49
- .sb-tr-5{
50
- -webkit-transition: all .5s ease-in-out;
51
- transition: all .5s ease-in-out;
52
- }
53
- .sb-tr-6{
54
- -webkit-transition: all .6s ease-in-out;
55
- transition: all .6s ease-in-out;
56
- }
57
- .sb-tr-7{
58
- -webkit-transition: all .7s ease-in-out;
59
- transition: all .7s ease-in-out;
60
- }
61
- .sb-tr-8{
62
- -webkit-transition: all .8s ease-in-out;
63
- transition: all .8s ease-in-out;
64
- }
65
- .sb-tr-9{
66
- -webkit-transition: all .9s ease-in-out;
67
- transition: all .9s ease-in-out;
68
- }
69
- .sb-tr-10{
70
- -webkit-transition: all 1s ease-in-out;
71
- transition: all 1s ease-in-out;
72
- }
73
-
74
- /*
75
- * Default, Hover & Focus Colors & Backgrounds
76
- */
77
- .sb-small-p,
78
- .sb-standard-p{
79
- font-style: normal;
80
- font-weight: normal;
81
- font-size: 14px;
82
- line-height: 160%;
83
- color: #8C8F9A;
84
- margin: 0;
85
- }
86
- .sb-standard-p{
87
- font-size: 16px;
88
- color: #141B38;
89
- }
90
- #cff-settings h3 {
91
- font-style: normal;
92
- font-weight: 600;
93
- font-size: 24px;
94
- line-height: 120%;
95
- margin: 0 0 4px 0;
96
- letter-spacing: 0;
97
- }
98
- .sb-caption {
99
- font-style: normal;
100
- font-weight: normal;
101
- font-size: 13px;
102
- line-height: 150%;
103
- color: #141B38;
104
- }
105
- .sb-caption.sb-caption-lighter {
106
- color: #5F6368;
107
- }
108
- .sb-small-text {
109
- font-size: 12px;
110
- }
111
- .sb-bold {
112
- font-weight: 600;
113
- }
114
- .sb-dark-text {
115
- color: #141B38;
116
- }
117
- .sb-small {
118
- font-style: normal;
119
- font-weight: bold;
120
- font-size: 10px;
121
- line-height: 160%;
122
- letter-spacing: 0.08em;
123
- text-transform: uppercase;
124
- color: #141B38;
125
- }
126
- .sb-button-no-border {
127
- border-radius: 0 !important;
128
- border: none !important;
129
- }
130
- .sb-icon-small svg {
131
- height: 10px;
132
- }
133
- .sb-dark-hover:hover svg, .sb-dark-hover:hover path {
134
- fill: #141B38;
135
- }
136
- /*orange*/
137
- .sb-btn-orange{
138
- background: #E34F0E!important;
139
- color: #fff!important;
140
- }
141
- .sb-btn-orange:hover{
142
- background: #F37036!important;
143
- border-color: #F37036!important;
144
- color: #fff!important;
145
- }
146
- .sb-btn-orange:focus,
147
- .sb-btn-orange:active{
148
- background: #B8400B!important;
149
- border-color: #B8400B!important;
150
- color: #fff!important;
151
- }
152
-
153
- /*red*/
154
- .sb-btn-red{
155
- background: #D72C2C!important;
156
- color: #fff!important;
157
- }
158
- .sb-btn-red:hover{
159
- background: #DF5757!important;
160
- color: #fff!important;
161
- }
162
- .sb-btn-red:focus,
163
- .sb-btn-red:active{
164
- background: #841919!important;
165
- color: #fff!important;
166
- }
167
-
168
- /*red*/
169
- .sb-btn-blue{
170
- background: #0068A0!important;
171
- color: #fff!important;
172
- }
173
- .sb-btn-blue:hover{
174
- background: #0096CC!important;
175
- border-color: #0096CC!important;
176
- color: #fff!important;
177
- }
178
- .sb-btn-blue:focus,
179
- .sb-btn-blue:active{
180
- background: #004D77!important;
181
- border-color: #004D77!important;
182
- color: #fff!important;
183
- }
184
-
185
- /*grey*/
186
- .sb-btn-grey{
187
- background: #F3F4F5!important;
188
- color: #141B38!important;
189
- border: 1px solid #D0D1D7!important;
190
- }
191
- .sb-btn-grey:hover{
192
- background: #fff!important;
193
- color: #141B38!important;
194
- border: 1px solid #DCDDE1!important;
195
- }
196
- .sb-btn-grey:focus,
197
- .sb-btn-grey:active{
198
- background: #E8E8EB!important;
199
- color: #141B38!important;
200
- border: 1px solid #D0D1D7!important;
201
- }
202
-
203
- /*dark*/
204
- .sb-btn-dark{
205
- background: #2C324C!important;
206
- color: #fff!important;
207
- }
208
- .sb-btn-dark:hover{
209
- background: #434960!important;
210
- color: #fff!important;
211
- }
212
- .sb-btn-dark:focus,
213
- .sb-btn-dark:active{
214
- background: #141B38!important;
215
- color: #fff!important;
216
- }
217
-
218
- /*orange*/
219
- .cff-btn-orange{
220
- background: #E34F0E!important;
221
- color: #fff!important;
222
- }
223
- .cff-btn-orange:hover{
224
- background: #F37036!important;
225
- color: #fff!important;
226
- }
227
- .cff-btn-orange:focus,
228
- .cff-btn-orange:active{
229
- background: #B8400B!important;
230
- color: #fff!important;
231
- }
232
-
233
- /*red*/
234
- .cff-btn-red{
235
- background: #D72C2C!important;
236
- color: #fff!important;
237
- }
238
- .cff-btn-red:hover{
239
- background: #DF5757!important;
240
- color: #fff!important;
241
- }
242
- .cff-btn-red:focus,
243
- .cff-btn-red:active{
244
- background: #841919!important;
245
- color: #fff!important;
246
- }
247
-
248
- /*red*/
249
- .cff-btn-blue{
250
- background: #0068A0!important;
251
- color: #fff!important;
252
- }
253
- .cff-btn-blue:hover{
254
- background: #0096CC!important;
255
- color: #fff!important;
256
- }
257
- .cff-btn-blue:focus,
258
- .cff-btn-blue:active{
259
- background: #004D77!important;
260
- color: #fff!important;
261
- }
262
-
263
- /*grey*/
264
- .cff-btn-grey{
265
- background: #F3F4F5!important;
266
- color: #141B38!important;
267
- border: 1px solid #D0D1D7!important;
268
- }
269
- .cff-btn-grey:hover{
270
- background: #fff!important;
271
- color: #141B38!important;
272
- border: 1px solid #DCDDE1!important;
273
- }
274
- .cff-btn-grey:focus,
275
- .cff-btn-grey:active{
276
- background: #E8E8EB!important;
277
- color: #141B38!important;
278
- border: 1px solid #D0D1D7!important;
279
- }
280
-
281
- /*dark*/
282
- .cff-btn-dark{
283
- background: #2C324C!important;
284
- color: #fff!important;
285
- }
286
- .cff-btn-dark:hover{
287
- background: #434960!important;
288
- color: #fff!important;
289
- }
290
- .cff-btn-dark:focus,
291
- .cff-btn-dark:active{
292
- background: #141B38!important;
293
- color: #fff!important;
294
- }
295
-
296
- /*disabled*/
297
- .sb-btn-orange[data-active="false"],
298
- .sb-btn-blue[data-active="false"],
299
- .sb-btn-red[data-active="false"],
300
- .sb-btn-grey[data-active="false"],
301
- .sb-btn-dark[data-active="false"]{
302
- background: #E8E8EB !important;
303
- color: #8C8F9A !important;
304
- }
305
-
306
-
307
- /*
308
- * Social Colors
309
- */
310
-
311
- /*Facebook*/
312
- .sb-cl-facebook,
313
- .sb-clhv-facebook:hover{
314
- color: #006BFA!important;
315
- }
316
- .cff-bg-facebook,
317
- .cff-bghv-facebook:hover{
318
- background: #006BFA!important;
319
- }
320
-
321
- /*Instagram*/
322
- .sb-cl-instagram,
323
- .sb-clhv-instagram:hover{
324
- color: #BA03A7!important;
325
- }
326
- .cff-bg-instagram,
327
- .cff-bghv-instagram:hover{
328
- background: #BA03A7!important;
329
- }
330
-
331
- /*Twitter*/
332
- .sb-cl-twitter,
333
- .sb-clhv-twitter:hover{
334
- color: #1B90EF!important;
335
- }
336
- .cff-bg-twitter,
337
- .cff-bghv-twitter:hover{
338
- background: #1B90EF!important;
339
- }
340
-
341
- /*YouTube*/
342
- .sb-cl-youtube,
343
- .sb-clhv-youtube:hover{
344
- color: #EB2121!important;
345
- }
346
- .cff-bg-youtube,
347
- .cff-bghv-youtube:hover{
348
- background: #EB2121!important;
349
- }
350
-
351
- /*Linkedin*/
352
- .sb-cl-linkedin,
353
- .sb-clhv-linkedin:hover{
354
- color: #007bb6!important;
355
- }
356
- .cff-bg-linkedin,
357
- .cff-bghv-linkedin:hover{
358
- background: #007bb6!important;
359
- }
360
-
361
- /*Mail*/
362
- .sb-cl-mail,
363
- .sb-clhv-mail:hover{
364
- color: #666!important;
365
- }
366
- .cff-bg-mail,
367
- .cff-bghv-mail:hover{
368
- background: #666!important;
369
- }
370
-
371
- .sb-cursor-pointer{
372
- cursor: pointer;
373
- }
374
-
375
- /*Buttons*/
376
- .sb-btn{
377
- display: flex;
378
- flex-direction: row;
379
- justify-content: center;
380
- align-items: center;
381
- padding: 9px 38px;
382
- font-style: normal;
383
- font-weight: 500;
384
- font-size: 14px;
385
- line-height: 17px;
386
- border-radius: 2px;
387
- cursor: pointer;
388
- color: #fff;
389
- outline: none;
390
- box-shadow: none;
391
- border: none;;
392
- }
393
- .sb-btn:focus{
394
- box-shadow: none;
395
- }
396
-
397
- .cff-small-chevron svg{
398
- width: 6px;
399
- height: 8px;
400
- top: 14px;
401
- left: 18px;
402
- }
403
-
404
- /*Add Source*/
405
- /*
406
- Add new Source Popup
407
- */
408
- .cff-fb-popup-cls{
409
- height: 14px;
410
- width: 14px;
411
- position: absolute;
412
- cursor: pointer;
413
- right: 17px;
414
- top: 17px;
415
- z-index: 3;
416
- }
417
- .cff-fb-center-boss{
418
- display: flex;
419
- justify-content: center;
420
- align-items: center;
421
- }
422
- .cff-fb-popup-inside{
423
- left: 80px;
424
- width: 880px;
425
- max-width: calc(100% - 200px);
426
- background: #fff;
427
- color: #141B38;
428
- position: relative;
429
- box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
430
- border-radius: 2px;
431
- overflow-y: auto;
432
- max-height: 80vh;
433
- }
434
- .cff-fb-popup-inside.sb-onboarding-tooltip {
435
- overflow-y: visible !important;
436
- }
437
- @media all and (max-width: 960px) {
438
- .cff-fb-popup-inside {
439
- left: 20px;
440
- width: 100%;
441
- max-width: calc(100% - 100px);
442
- }
443
- }
444
- .cff-fb-feedtypes-popup{
445
- width: 1200px;
446
- max-width: calc(100% - 200px);
447
- }
448
- .cff-fb-embed-popup{
449
- width: 575px;
450
- }
451
-
452
- .cff-fb-source-pp-customizer h5,.cff-fb-embed-popup h5{
453
- font-size: 24px;
454
- padding: 0 20px;
455
- margin-top: 25px;
456
- margin-bottom: 15px;
457
- }
458
- .cff-fb-feedtypes-popup h5{
459
- font-size: 26px;
460
- padding: 0 20px;
461
- margin-top: 25px;
462
- margin-bottom: 30px;
463
- }
464
-
465
- .cff-fb-feedtypes-pp-ctn .cff-fb-adv-types .cff-fb-types-list{
466
- margin-bottom: 30px !important
467
- }
468
- .cff-fb-srcs-update{
469
- background: var(--cl-orange);
470
- font-weight: 600;
471
- font-size: 14px;
472
- line-height: 160%;
473
- height: 38px;
474
- }
475
- .cff-fb-srcs-update-footer{
476
- display: flex;
477
- align-items: center;
478
- border-top: 1px solid #DCDDE1;
479
- background: #F9F9FA;
480
- }
481
- .cff-fb-srcs-update-footer-txt{
482
- font-size: 18px;
483
- line-height: 1.7em;
484
- }
485
-
486
- .cff-fb-srcs-update-footer-image svg{
487
- width: 100%;
488
- height: auto;
489
- float: left;
490
- }
491
- .cff-fb-srcs-update-footer-txt{
492
- box-sizing: border-box;
493
- display: flex;
494
- justify-content: center;
495
- }
496
- .cff-fb-stp1-elm{
497
- margin-bottom: 30px;
498
- float: left;
499
- display: flex;
500
- }
501
- .cff-fb-source-top .cff-fb-stp1-elm:first-of-type{
502
- justify-content: center;
503
- align-items: center;
504
- padding-bottom: 30px;
505
- border-bottom: 1px solid #D0D1D7;
506
- }
507
- .cff-fb-stp1-event{
508
- padding-bottom: 0px!important;
509
- border-bottom: none!important;
510
- padding-right: 20%;
511
- align-items: flex-start!important;
512
- }
513
- .cff-fb-stp1-elm-desc > a{
514
- font-weight: 600;
515
- text-decoration: underline;
516
- color: #2A65DB;
517
- }
518
-
519
- .cff-fb-stp-src-ctn{
520
- display: flex;
521
- justify-content: center;
522
- align-content: center;
523
- }
524
- .cff-fb-stp-src-type{
525
- display: flex;
526
- justify-content: center;
527
- align-content: center;
528
- font-size: 13px;
529
- font-weight:400;
530
- cursor: pointer;
531
- margin-left: 20px;
532
- color: #434960;
533
- }
534
- .cff-fb-stp-src-type[data-active="true"]{
535
- font-weight:600;
536
- color: #141B38;
537
- }
538
- .cff-fb-stp1-elm-ic{
539
- width: 28px;
540
- height: 28px;
541
- border-radius: 35px;
542
- background: #F3F4F5;
543
- display: flex;
544
- justify-content: center;
545
- align-items: center;
546
- font-weight: 500;
547
- flex: none;
548
- }
549
- .cff-fb-stp1-elm-head{
550
- font-size: 16px;
551
- font-weight: 600;
552
- }
553
- .cff-fb-stp1-elm-desc{
554
- font-size: 15px;
555
- margin-top: 4px;
556
- line-height: 1.3em;
557
- color: #5F6368;
558
- }
559
-
560
- .cff-fb-source-btm-hd{
561
- font-size: 15px;
562
- font-weight: 500;
563
- }
564
- .cff-fb-src-back-top i{
565
- font-size: 12px;
566
- margin-right: 10px;
567
- }
568
- .cff-fb-source-account-info{
569
- background: #F3F4F5;
570
- color: #8C8F9A;
571
- display: flex;
572
- align-items: center;
573
- padding: 6px 6px 6px 12px;
574
- font-size: 15px;
575
- }
576
- .cff-fb-source-list {
577
- display: grid;
578
- grid-template-columns: 49.5% 49.5%;
579
- grid-column-gap: 1%;
580
- margin-top: 10px;
581
- max-height: calc(80vh - 360px);
582
- overflow-y: auto;
583
- min-height: 80px;
584
- }
585
-
586
- .cff-fb-source-account-info strong{
587
- color: #141B38;
588
- }
589
- .cff-fb-source-btn{
590
- margin-top: 60px;
591
- color: #fff;
592
- display: flex;
593
- justify-content: center;
594
- align-items: center;
595
- background: #0068A0;
596
- cursor: pointer;
597
- padding: 10px 20px;
598
- border-radius: 3px;
599
- font-size: 15px;
600
- font-weight: 500;
601
- border: none;
602
- }
603
- .cff-fb-icon-success{
604
- position: relative;
605
- width: 30px;
606
- height: 20px;
607
- margin-right: 10px;
608
- }
609
- .cff-fb-icon-success:before{
610
- content: '';
611
- position: absolute;
612
- width: 13px;
613
- height: 5px;
614
- top: 4px;
615
- border-left: 3px solid currentColor;
616
- border-bottom: 3px solid currentColor;
617
- -webkit-transform: rotate(-45deg);
618
- transform: rotate(-45deg);
619
- }
620
-
621
- .cff-fb-source-inp-label,.cff-fb-wh-label{
622
- font-size: 14px;
623
- color: #434960;
624
- }
625
- .cff-fb-source-mnl-type .cff-fb-stp-src-ctn{
626
- justify-content: flex-start;
627
- margin-bottom: 20px;
628
- margin-top: 10px;
629
- }
630
- .cff-fb-source-mnl-type .cff-fb-stp-src-ctn .cff-fb-stp-src-type{
631
- margin-left: 0px;
632
- margin-right: 20px
633
- }
634
- .cff-fb-source-inp,.cff-fb-wh-inp{
635
- border-radius: 0px !important;
636
- outline: none ;
637
- margin-top: 5px;
638
- border: 1px solid #D0D1D7 !important;
639
- margin-bottom: 20px;
640
- height: 35px;
641
- line-height: 35px;
642
- }
643
- .cff-fb-sec-heading span{
644
- font-size:14px;
645
- color: #434960;
646
- line-height: 1.7em;
647
- margin-top: 10px;
648
- display: block;
649
- }
650
- .cff-fb-sec-heading {
651
- margin-bottom: 10px;
652
- }
653
- .cff-fb-slctsrc-content,.cff-fb-section-wh-insd{
654
- padding: 40px;
655
- }
656
-
657
- .cff-fb-slctsrc-ctn h4,.cff-fb-section-wh-insd h4{
658
- font-size: 20px;
659
- padding: 0px;
660
- margin: 0px;
661
- }
662
- .cff-fb-srcs-item{
663
- width: 100%;
664
- cursor: pointer;
665
- height: 62px;
666
- margin-top: 10px;
667
- border-radius: 3px;
668
- border: 1px solid #E7E7E9;
669
- display: flex;
670
- position: relative;
671
- }
672
- .cff-fb-srcs-item[data-disabled="true"]{
673
- background: #F3F4F5;
674
- }
675
- .cff-fb-stp-src-type[data-disabled="true"],
676
- .cff-fb-stp-src-type[data-disabled="true"] .cff-fb-chbx-round{
677
- color: #8C8F9A !important;
678
- cursor: default;
679
- }
680
- .cff-fb-stp-src-type[data-disabled="true"] {
681
- position: relative;
682
- }
683
-
684
- .cff-fb-srcs-item[data-disabled="true"] .cff-fb-srcs-item-inf{
685
- opacity: .55;
686
- }
687
-
688
- .cff-fb-srcs-item:hover{
689
- border-color: #86D0F9;
690
- }
691
- .cff-fb-srcs-item[data-active="true"]{
692
- border-color: #0096cc;
693
- }
694
-
695
- .cff-fb-source-top .cff-fb-srcs-item{
696
- margin-bottom: 0px;
697
- }
698
- .cff-fb-srcs-new{
699
- display: flex;
700
- justify-content: center;
701
- align-items: center;
702
- font-size: 16px;
703
- color: #0096CC;
704
- background: #EBF5FF;
705
- font-weight: 600;
706
- border: 1px solid #EBF5FF;
707
- }
708
- .cff-fb-srcs-new i{
709
- font-size: 14px;
710
- padding: 0 10px;
711
- margin-left: -10px;
712
- }
713
- .cff-fb-srcs-item-chkbx{
714
- width: 40px;
715
- height: inherit;
716
- display: flex;
717
- justify-content: center;
718
- align-items: center;
719
- margin: 0px 7px;
720
- }
721
-
722
- .cff-fb-srcs-item-chkbx-ic,.cff-fb-chbx-round{
723
- width: 16px;
724
- height: 16px;
725
- box-sizing: border-box;
726
- position: relative;
727
- border-radius: 50px;
728
- border: 2px solid #8c8f9a;
729
- }
730
- [data-multifeed="active"] .cff-fb-srcs-item-chkbx-ic{
731
- border-radius: 2px;
732
- }
733
-
734
- [data-active="true"] .cff-fb-srcs-item-chkbx-ic, [data-active="true"] > .cff-fb-chbx-round, .cff-fb-source-popup [data-active="true"] > .cff-fb-chbx-round{
735
- border-color: #0096cc;
736
- background: #0096cc;
737
- }
738
- [data-multifeed="active"] [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before{
739
- content: '';
740
- position: absolute;
741
- width: 8px;
742
- height: 3px;
743
- border-left: 2px solid #fff;
744
- border-bottom: 2px solid #fff;
745
- top: 2px;
746
- right: 1px;
747
- -webkit-transform: rotate(-45deg);
748
- transform: rotate(-45deg);
749
- }
750
-
751
- [data-multifeed="inactive"] [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before, [data-active="true"] > .cff-fb-chbx-round:before,
752
- .cff-fb-source-popup .cff-fb-source-list [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before{
753
- content: '';
754
- position: absolute;
755
- height: 6px;
756
- width: 6px;
757
- background: #fff;
758
- border-radius: 25px;
759
- left: 3px;
760
- top: 3px;
761
- }
762
-
763
- .cff-fb-srcs-item-avatar{
764
- display: flex;
765
- width: 42px;
766
- height: inherit;
767
- justify-content: center;
768
- align-items: center;
769
- }
770
- .cff-fb-srcs-item-avatar img{
771
- width: 42px;
772
- height: 42px;
773
- border-radius: 50%;
774
- background: #eee;
775
- }
776
- .cff-fb-srcs-item-inf{
777
- width: 100%;
778
- height: inherit;
779
- display: flex;
780
- justify-content: center;
781
- flex-direction: column;
782
- padding-left: 10px;
783
- }
784
- .cff-fb-srcs-item-name{
785
- color: #141B38;
786
- font-weight: 600;
787
- }
788
- .cff-fb-srcs-item-name-event{
789
- font-size: 10px;
790
- font-weight: 500;
791
- color: #777;
792
- }
793
- .cff-fb-source-list .cff-fb-srcs-item-name .sb-bold {
794
- line-height: 1.1;
795
- display: block;
796
- padding-bottom: 5px;
797
- }
798
- .cff-fb-srcs-item-type{
799
- color: #434960;
800
- font-weight: 600;
801
- text-transform: uppercase;
802
- display: flex;
803
- align-items: center;
804
- }
805
- .cff-fb-srcs-item-type svg{
806
- fill: currentColor;
807
- }
808
- [data-type="page"] .cff-fb-srcs-item-type svg{
809
- width: 11px;
810
- }
811
- .cff-fb-srcs-back{
812
- margin-right: auto;
813
- }
814
-
815
- .sb-source-error-wrap {
816
- display: flex;
817
- justify-content: left;
818
- align-items: center;
819
- margin-left: 9px;
820
- }
821
-
822
- .sb-source-error-wrap span {
823
- font-weight: 600;
824
- font-size: 12px;
825
- line-height: 160%;
826
-
827
- color: #D72C2C;
828
- margin-left: 5px;
829
- }
830
- .cff-fb-source-popup .sb-source-error-wrap {
831
- margin-left: 0;
832
- }
833
- .sb-source-error-wrap a {
834
- margin-left: 8px;
835
- font-weight: 600;
836
- font-size: 12px;
837
- line-height: 160%;
838
- text-decoration-line: underline;
839
-
840
- color: #0068A0;
841
- }
842
-
843
-
844
- /*Full Screen Window*/
845
- .sb-fs-boss{
846
- position: fixed;
847
- height: 100vh;
848
- width: 100%;
849
- left: 0;
850
- top: 0;
851
- bottom: 0;
852
- right: 0;
853
- background: rgba(0,0,0,.4);
854
- z-index: 9989;
855
- }
856
-
857
- .sb-dialog-popup{
858
- width: 575px!important;
859
- }
860
- .sb-dialog-popup{
861
- min-height: 250px;
862
- }
863
- .sb-dialog-remove-source{
864
- background: #F3F4F5;
865
- padding: 40px 20px;
866
- display: flex;
867
- justify-content: center;
868
- align-items: center;
869
- }
870
- .sb-dialog-remove-source .cff-fb-srcs-item{
871
- background: #fff;
872
- width: 280px;
873
- padding-left: 20px;
874
- box-sizing: border-box;
875
- margin-top: 0px;
876
- }
877
- .sb-dialog-popup-content{
878
- display: flex;
879
- justify-content: center;
880
- align-items: center;
881
- text-align: center;
882
- flex-direction: column;
883
- padding: 38px 12%;
884
- }
885
- .sb-dialog-popup-content strong{
886
- font-size: 22px;
887
- color: #141B38;
888
- display: block;
889
- margin-bottom: 15px;
890
- line-height: 160%;
891
- }
892
- .sb-dialog-popup-content span{
893
- font-size: 16px;
894
- line-height: 1.5em;
895
- color: #434960;
896
- }
897
- .sb-dialog-popup-actions{
898
- display: flex;
899
- justify-content: center;
900
- align-items: center;
901
- margin-top: 25px;
902
- }
903
- .sb-dialog-popup-actions button{
904
- width: 100%;
905
- margin: 4px 4px;
906
- cursor: pointer;
907
- height: 42px;
908
- }
909
-
910
-
911
- .sb-full-screen-loader{
912
- position: absolute;
913
- width: 100%;
914
- height: calc(100vh - 32px);
915
- background: #f0f0f1;
916
- z-index: 999999;
917
- overflow: hidden;
918
- display: none;
919
- opacity: 0;
920
- visibility: hidden;
921
- justify-content: center;
922
- align-items: center;
923
- flex-direction: column;
924
- top: 0px;
925
- }
926
- .sb-full-screen-loader[data-show="shown"]{
927
- display: flex;
928
- opacity: 1;
929
- visibility: visible;
930
- }
931
- .sb-full-screen-loader-logo{
932
- width: 190px;
933
- height: 190px;
934
- position: relative;
935
- margin-bottom: 40px;
936
- margin-top: -55px;
937
- }
938
- .sb-full-screen-loader-border{
939
- width: inherit;
940
- height: inherit;
941
- box-sizing: border-box;
942
- border: 6px solid green;
943
- left: 0;
944
- top: 0;
945
- position: absolute;
946
- border-radius: 50%;
947
- }
948
- .sb-full-screen-loader-img{
949
- width: inherit;
950
- height: inherit;
951
- display: flex;
952
- justify-content: center;
953
- align-items: center;
954
- position: absolute;
955
- top: 0px;
956
- left: 0px;
957
- z-index: 2;
958
- }
959
- .sb-full-screen-loader-img svg{
960
- float: left;
961
- width: 60px;
962
- fill: #E34F0E;
963
- }
964
- .sb-full-screen-loader-txt{
965
- color: #434960;
966
- font-size: 24px;
967
- font-weight: 600;
968
- }
969
-
970
- .sb-full-screen-loader-spinner,
971
- .sb-full-screen-loader-spinner:before,
972
- .sb-full-screen-loader-spinner:after {
973
- border-radius: 50%;
974
- }
975
- .sb-full-screen-loader-spinner {
976
- color: #E34F0E;
977
- position: relative;
978
- width: 190px;
979
- height: 190px;
980
- box-shadow: inset 0 0 0 6px;
981
- -webkit-transform: translateZ(0);
982
- transform: translateZ(0);
983
- }
984
- .sb-full-screen-loader-spinner:before,
985
- .sb-full-screen-loader-spinner:after {
986
- position: absolute;
987
- content: '';
988
- }
989
- .sb-full-screen-loader-spinner:before {
990
- width: 100px;
991
- height: 200px;
992
- background: #f0f0f1;
993
- border-radius: 190px 0 0 190px;
994
- top: -1px;
995
- left: -8px;
996
- -webkit-transform-origin: 5.1em 5.1em;
997
- transform-origin: 100px 100px;
998
- -webkit-animation: cff-loader-spinner 2s infinite ease 1.5s;
999
- animation: cff-loader-spinner 2s infinite ease 1.5s;
1000
- }
1001
- .sb-full-screen-loader-spinner:after {
1002
- width: 97px;
1003
- height: 192px;
1004
- background: #f0f0f1;
1005
- border-radius: 0 190px 190px 0;
1006
- top: -1px;
1007
- left: 94px;
1008
- -webkit-transform-origin: 1px 95px;
1009
- transform-origin: 1px 95px;
1010
- -webkit-animation: cff-loader-spinner 2s infinite ease;
1011
- animation: cff-loader-spinner 2s infinite ease;
1012
- }
1013
- @-webkit-keyframes cff-loader-spinner {
1014
- 0% {
1015
- -webkit-transform: rotate(0deg);
1016
- transform: rotate(0deg);
1017
- }
1018
- 100% {
1019
- -webkit-transform: rotate(360deg);
1020
- transform: rotate(360deg);
1021
- }
1022
- }
1023
- @keyframes cff-loader-spinner {
1024
- 0% {
1025
- -webkit-transform: rotate(0deg);
1026
- transform: rotate(0deg);
1027
- }
1028
- 100% {
1029
- -webkit-transform: rotate(360deg);
1030
- transform: rotate(360deg);
1031
- }
1032
- }
1033
-
1034
-
1035
- /* Social Wall Popup */
1036
-
1037
- .cff-fb-extpp-social-wall-graphic {
1038
- display: flex;
1039
- flex-direction: column;
1040
- align-items: center;
1041
- padding-bottom: 78px
1042
- }
1043
- .cff-graphic-row,
1044
- .cff-fb-social-wall-between {
1045
- position: relative;
1046
- }
1047
- .cff-graphic-row-main {
1048
- display: flex;
1049
- justify-content: center;
1050
- flex-direction: row;
1051
- align-items: center;
1052
- }
1053
- .cff-fb-social-wall-group {
1054
- display: flex;
1055
- flex-direction: column;
1056
- align-items: center;
1057
- width: 13%;
1058
- margin: 1.5%;
1059
- }
1060
- .cff-fb-social-wall-group p {
1061
- margin: 0;
1062
- text-align:center;
1063
- }
1064
- .cff-fb-social-wall-between.cff-fb-social-wall-between-instagram svg {
1065
- margin-top:120%;
1066
- }
1067
- .cff-fb-social-wall-between.cff-fb-social-wall-between-facebook svg {
1068
- margin-top:40%;
1069
- }
1070
- .cff-fb-social-wall-between.cff-fb-social-wall-between-twitter svg {
1071
- margin-top:60%;
1072
- }
1073
- .cff-fb-social-wall-end {
1074
- position: absolute;
1075
- right: -1%;
1076
- top: 40%;
1077
- }
1078
- .cff-graphic-bottom {
1079
- width: 100%;
1080
- display: flex;
1081
- justify-content: center;
1082
- flex-direction: row;
1083
- align-items: center;
1084
- margin-top:3%;
1085
- }
1086
- .cff-all-in-same {
1087
- display: flex;
1088
- justify-content: center;
1089
- flex-direction: row;
1090
- align-items: center;
1091
- height: 38px;
1092
- width: 72.5%;
1093
- /*background: #FFFFFF;*/
1094
- /*box-shadow: 0px 6px 7px rgba(0, 26, 119, 0.07), 0px 3px 4px rgba(0, 26, 119, 0.06), 0px 1.80196px 2.25245px rgba(0, 26, 119, 0.05), 0px 0.749837px 0.937296px rgba(0, 26, 119, 0.1137);*/
1095
- /*border-radius: 3px;*/
1096
- border-top: 1px solid #ddd;
1097
- border-bottom: 1px solid #ddd;
1098
- }
1099
- .cff-fb-extpp-social-wall .cff-fb-extpp-bottom {
1100
- background: #F3F4F5;
1101
- }
1102
- .cff-fb-social-wall-end-arrow {
1103
- position: relative;
1104
- }
1105
- .cff-arrow-head {
1106
- position: absolute;
1107
- bottom: 1%;
1108
- left: 39%;
1109
- }
1110
-
1111
- /* To Builder */
1112
- .cff-fb-type-el[data-active="true"]:before {
1113
- content: '';
1114
- position: absolute;
1115
- width: 24px;
1116
- height: 24px;
1117
- right: 0px;
1118
- top: 0px;
1119
- z-index: 2;
1120
- border-radius: 0 0 0 2px;
1121
- background: var(--cl-orange);
1122
- }
1123
-
1124
- .cff-fb-type-el {
1125
- display: flex;
1126
- flex-direction: column;
1127
- align-items: flex-start;
1128
- padding: 0;
1129
- position: relative;
1130
- background: #fff;
1131
- border: 1px solid #D8D8D8;
1132
- border-radius: 3px;
1133
- cursor: pointer;
1134
- box-sizing: border-box;
1135
- }
1136
-
1137
- .cff-fb-slctf-back span {
1138
- font-weight: 600;
1139
- }
1140
-
1141
- .cff-fb-slctfd-action {
1142
- padding: 16px 54px;
1143
- position: fixed;
1144
- bottom: 0;
1145
- background: #f0f0f1;
1146
- width: calc(100% - 160px);
1147
- }
1148
-
1149
- .cff-fb-wrapper {
1150
- max-width: 100%;
1151
- position: relative;
1152
- margin: auto;
1153
- color: #141B38;
1154
- }
1155
-
1156
- .cff-fb-create-ctn {
1157
- float: left;
1158
- margin-top: 104px;
1159
- padding: 0 54px 65px;
1160
- }
1161
-
1162
- .cff-fb-extpp-btns a {
1163
- height: 42px;
1164
- cursor: pointer;
1165
- position: relative;
1166
- border-radius: 3px;
1167
- font-style: normal;
1168
- font-weight: 600;
1169
- font-size: 16px;
1170
- line-height: 180%;
1171
- display: flex;
1172
- justify-content: center;
1173
- align-items: center;
1174
- box-sizing: border-box;
1175
- }
1176
-
1177
- .cff-fb-extpp-lite-btn {
1178
- display: flex;
1179
- font-size: 14px;
1180
- font-weight: 600;
1181
- padding: 6px 11px;
1182
- color: #0068A0;
1183
- background: #fff;
1184
- border: 1px solid #DCDDE1;
1185
- margin-bottom: 14px;
1186
- }
1187
-
1188
- .cff-fb-extpp-lite-btn svg {
1189
- fill: currentColor;
1190
- width: 16px;
1191
- float: left;
1192
- margin-right: 10px;
1193
- }
1194
-
1195
- .cff-fb-stp-src-type .cff-fb-chbx-round {
1196
- margin-right: 8px;
1197
- margin-top: 2px;
1198
- }
1199
-
1200
- #cff-builder-app .cff-fb-stp-src-type {
1201
- display: flex;
1202
- justify-content: center;
1203
- align-content: center;
1204
- font-size: 14px;
1205
- font-weight: 400;
1206
- cursor: pointer;
1207
- margin-left: 20px;
1208
- color: #434960;
1209
- }
1210
-
1211
- .cff-csz-name-ed-btn {
1212
- width: 28px;
1213
- height: 28px;
1214
- cursor: pointer;
1215
- margin: 0 10px;
1216
- background: #E8E8EB;
1217
- border: 1px solid #E8E8EB;
1218
- outline: none;
1219
- border-radius: 2px;
1220
- }
1221
- .cff-csz-name-ed-btn svg {
1222
- width: 16px;
1223
- height: 14px;
1224
-
1225
- fill: #141B38;
1226
- float: left;
1227
- margin-left: -1px;
1228
- }
1229
-
1230
- .cff-csz-name-ed-btn:focus, .cff-csz-name-ed-btn:hover {
1231
- outline: none;
1232
- background-color: #d9d9dc;
1233
- border-color: #d9d9dc;
1234
- }
1235
-
1236
- .sb-preview-chooser-btn, .sb-preview-chooser-btn:focus {
1237
- width: 38px;
1238
- height: 32px;
1239
- display: flex;
1240
- justify-content: center;
1241
- align-items: center;
1242
- cursor: pointer;
1243
- float: left;
1244
- border: 0;
1245
- background: unset;
1246
- margin: 0 1px;
1247
- outline: none;
1248
- }
1249
-
1250
- .sb-customizer-sidebar {
1251
- position: fixed;
1252
- z-index: 100;
1253
- width: 375px;
1254
- box-shadow: 4px 0px 14px rgb(0 0 0 / 5%), 1px 0px 4px rgb(0 0 0 / 10%);
1255
- background: #fff;
1256
- left: 160px;
1257
- top: 98px;
1258
- overflow: auto;
1259
- bottom: 0px;
1260
- padding-bottom: 50px;
1261
- }
1262
-
1263
- .sb-customizer-sidebar-breadcrumb a, .sb-customizer-sidebar-breadcrumb span {
1264
- display: inline-block;
1265
- position: relative;
1266
- cursor: pointer;
1267
- color: #434960;
1268
- text-transform: uppercase;
1269
- font-size: 10px;
1270
- line-height: 160%;
1271
- letter-spacing: 0.08em;
1272
- padding: 0 5px 0 4px;
1273
- height: 20px;
1274
- font-weight: 700;
1275
- }
1276
- .sb-customizer-sidebar-breadcrumb a:hover,
1277
- .sb-customizer-sidebar-breadcrumb a:focus{
1278
- color: #000;
1279
- }
1280
- .sb-customizer-sidebar-breadcrumb a:hover path,
1281
- .sb-customizer-sidebar-breadcrumb a:focus path{
1282
- fill: #000;
1283
- }
1284
- .sb-control-elem-ctn {
1285
- display: flex;
1286
- color: #434960;
1287
- padding: 20px 20px;
1288
- }
1289
- .sb-control-toggle-icon svg {
1290
- width: 13px;
1291
- float: left;
1292
- fill: #434960;
1293
- }
1294
- .sb-control-elem-ctn .sb-control-toggle-elm[data-active="true"] {
1295
- display: flex;
1296
- color: #141B38;
1297
- padding: 0 15px;
1298
- }
1299
- .sb-control-elem-ctn .sb-control-toggle-elm[data-active="true"] svg {
1300
- fill: #141B38;
1301
- }
1302
- .sb-control-elem-ctn .sb-control-toggle-elm[data-disabled="true"] {
1303
- color: #8C8F9A;
1304
- }
1305
- .sb-control-elem-ctn .sb-control-toggle-elm[data-disabled="true"] svg {
1306
- fill: #8C8F9A;
1307
- }
1308
-
1309
- .sb-control-elem-ctn[data-layout="block"] input[type="number"] {
1310
- height: 36px;
1311
- background: #FFFFFF;
1312
- border-radius: 2px 0 0 2px !important;
1313
- }
1314
-
1315
- .sb-control-input-info {
1316
- display: flex;
1317
- justify-content: center;
1318
- align-items: center;
1319
- background: #F3F4F5;
1320
- padding: 0 8px;
1321
- font-weight: normal;
1322
- font-size: 14px;
1323
- line-height: 160%;
1324
- color: #434960;
1325
- border: 1px solid #D0D1D7;
1326
- border-left: none;
1327
- border-radius: 0 2px 2px 0 !important;
1328
- }
1329
- .sb-control-elem-output input[type="text"],
1330
- .sb-control-elem-output input[type="number"]{
1331
- border-radius: 1px !important;
1332
- }
1333
-
1334
- .sb-control-colorpicker-ctn .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
1335
- left: auto;
1336
- right: 1px;
1337
- top: 1px;
1338
- width: 35px;
1339
- height: 35px;
1340
- background: #F9F9FA;
1341
- border: 0px;
1342
- border-radius: 2px;
1343
- }
1344
- .sb-control-colorpicker-ctn[data-picker-style="reset"] .minicolors-input {
1345
- background: #F3F4F5!important;
1346
- border: 1px solid #DCDDE1!important;
1347
- height: 38px;
1348
- }
1349
-
1350
- .sb-customizer-sidebar-breadcrumb svg {
1351
- position: relative;
1352
- left: auto;
1353
- top: auto;
1354
- margin-right: 9px;
1355
- }
1356
-
1357
- .sb-customizer-sidebar-breadcrumb {
1358
- display: flex;
1359
- justify-content: flex-start;
1360
- align-items: center;
1361
- margin-bottom: 15px;
1362
- }
1363
-
1364
- .cff-fb-srcs-info-item span {
1365
- font-size: 13px;
1366
- line-height: 1.5em;
1367
- color: #434960;
1368
- font-weight: 400;
1369
- display: inline-block;
1370
- word-break: break-all;
1371
- width: calc(100% - 80px);
1372
- padding: 0 15px;
1373
- box-sizing: border-box;
1374
- }
1375
-
1376
- /* Onboarding */
1377
- #cff-builder-app .sb-onboarding-tooltip {
1378
- display: none;
1379
- position: absolute;
1380
- min-height: auto;
1381
- width: 460px;
1382
- max-width: 100%;
1383
- padding: 0;
1384
- border-radius: 2px;
1385
- }
1386
- #sb-onboarding-tooltip-multiple-2,
1387
- #sb-onboarding-tooltip-multiple-3{
1388
- width: 528px;
1389
- }
1390
- #sb-onboarding-tooltip-single-2 {
1391
- width: 402px;
1392
- }
1393
- .sb-onboarding-active .sb-onboarding-highlight .cff-fb-btn.cff-fb-btn-new,
1394
- .sb-onboarding-active .sb-positioning-wrap.sb-onboarding-highlight,
1395
- .sb-onboarding-active .cff-fd-lst-bigctn .cff-table-wrap.sb-onboarding-highlight,
1396
- .sb-onboarding-active .cff-fb-lgc-ctn.sb-onboarding-highlight,
1397
- .sb-onboarding-active .cff-fb-lgc-ctn .cff-legacy-table-wrap.sb-onboarding-highlight,
1398
- .sb-onboarding-active .sb-customizer-sidebar-tab.sb-onboarding-highlight,
1399
- .sb-onboarding-active .cff-fb-header.sb-onboarding-highlight{
1400
- position: relative;
1401
- z-index: 100000;
1402
- }
1403
- .sb-onboarding-active .cff-fd-legacy-feed-toggle {
1404
- display: none;
1405
- }
1406
- .cff-legacy-table-wrap.sb-onboarding-highlight {
1407
- clear: both;
1408
- }
1409
- #cff-builder-app .sb-onboarding-tooltip-1 {
1410
- top: 50px;
1411
- left: 8px;
1412
- }
1413
- #sb-onboarding-tooltip-single-2 {
1414
- bottom: -179px;
1415
- top: auto;
1416
- left: 68%;
1417
- margin-left: -201px;
1418
- }
1419
- #sb-onboarding-tooltip-multiple-2,
1420
- #sb-onboarding-tooltip-multiple-3{
1421
- top: -200px;
1422
- left: 20%;
1423
- }
1424
- #sb-onboarding-tooltip-multiple-3 {
1425
- top: -210px;
1426
- }
1427
- #cff-builder-app .sb-onboarding-tooltip .cff-fb-wrapper {
1428
- display: flex;
1429
- justify-content: flex-end;
1430
- }
1431
- #cff-builder-app .sb-positioning-wrap {
1432
- width: 432px;
1433
- }
1434
- #cff-builder-app .sb-onboarding-tooltip .cff-fb-popup-cls {
1435
- position:absolute;
1436
- width: 12px;
1437
- height: 12px;
1438
- top: 12px;
1439
- right: 12px;
1440
- }
1441
- #cff-builder-app .sb-onboarding-tooltip .cff-fb-popup-cls svg {
1442
- width: 12px;
1443
- height: 12px;
1444
- }
1445
- #cff-builder-app .sb-onboarding-tooltip h3 {
1446
- font-size: 16px;
1447
- color: #141B38;
1448
- line-height: 160%;
1449
- font-weight: 600;
1450
- margin: 0;
1451
- }
1452
- #cff-builder-app .sb-onboarding-step {
1453
- font-style: normal;
1454
- font-weight: normal;
1455
- font-size: 13px;
1456
- line-height: 160%;
1457
- color: #434960;
1458
- margin: 2px 0 20px;
1459
- display: block;
1460
- }
1461
- .cff-onboarding-next,
1462
- .cff-onboarding-previous{
1463
- color: #353A41;
1464
- background: #F3F4F5;
1465
- border: 1px solid #DCDDE1;
1466
- margin-left: 10px;
1467
- }
1468
- .cff-onboarding-previous[data-active=false]{
1469
- pointer-events: none;
1470
- }
1471
- #cff-builder-app .sb-onboarding-tooltip .cff-fb-hd-btn {
1472
- margin-right: 0;
1473
- }
1474
- #cff-builder-app .sb-onboarding-tooltip .cff-fb-hd-btn i {
1475
- margin: 0;
1476
- }
1477
- .cff-onboarding-finish{
1478
- margin-left: 10px;
1479
- padding: 0 32px;
1480
- }
1481
- #cff-builder-app .sb-onboarding-tooltip .cff-fb-hd-btn[data-active="false"] {
1482
- background-color: #e8e8eb;
1483
- color: #8c8f99;
1484
- }
1485
- #cff-builder-app .sb-onboarding-tooltip .cff-fb-hd-btn[data-active="false"]:hover {
1486
- cursor: default;
1487
- }
1488
- .sb-step-counter-wrap span {
1489
- font-style: normal;
1490
- font-weight: bold;
1491
- font-size: 12px;
1492
- line-height: 160%;
1493
- letter-spacing: 0.05em;
1494
- text-transform: uppercase;
1495
- color: #141B38;
1496
- }
1497
- #cff-builder-app .sb-onboarding-tooltip .sb-pointer {
1498
- position: absolute;
1499
- left: 50px;
1500
- top: -13px;
1501
- }
1502
- #cff-builder-app .sb-pointer.sb-bottom-pointer {
1503
- top: auto;
1504
- bottom: -14px;
1505
- }
1506
- #sb-onboarding-tooltip-single-2 .sb-pointer {
1507
- left: 193px;
1508
- }
1509
- #sb-onboarding-tooltip-multiple-2:before,
1510
- #sb-onboarding-tooltip-multiple-3:before{
1511
- bottom: -8px;
1512
- }
1513
- #cff-builder-app .sb-onboarding-top-row {
1514
- padding: 20px 44px 0 24px;
1515
- }
1516
- #cff-builder-app .sb-onboarding-bottom-row {
1517
- display: flex;
1518
- flex-direction: row;
1519
- justify-content: space-between;
1520
- align-items: center;
1521
- padding: 8px 16px 12px 24px;
1522
- }
1523
-
1524
-
1525
- #cff-builder-app #sb-onboarding-tooltip-customizer-1 {
1526
- position:absolute;
1527
- right: 210px;
1528
- left: auto;
1529
- top: 84px;
1530
- }
1531
-
1532
- #cff-builder-app #sb-onboarding-tooltip-customizer-1 .sb-pointer {
1533
- right: 110px;
1534
- left: auto;
1535
- }
1536
-
1537
- .sb-customizer-sidebar.sb-onboarding-highlight {
1538
- z-index: 9999;
1539
- overflow: visible;
1540
-
1541
- }
1542
- #sb-onboarding-tooltip-customizer-2,
1543
- #sb-onboarding-tooltip-customizer-3 {
1544
- z-index: 100000;
1545
- top: 80px;
1546
- }
1547
- #sb-onboarding-tooltip-customizer-3 {
1548
- left: 171px;
1549
- }
1550
- #cff-builder-app #sb-onboarding-tooltip-customizer-3 .sb-pointer{
1551
- left: 100px;
1552
- }
1553
-
1554
- .sb-onboarding-active .sb-customizer-sidebar-tab-ctn,
1555
- .sb-onboarding-active .sb-customizer-sidebar-sec-ctn,
1556
- .sb-onboarding-active .cff-csz-header .cff-csz-header-insider{
1557
- /*pointer-events: none !important;*/
1558
- }
1559
-
1560
- /* Misc Tooltip */
1561
- .cff-no-groups-tooltip {
1562
- left: -360px;
1563
- top: -110px;
1564
- }
1565
- .cff-no-groups-tooltip .sb-pointer {
1566
- bottom: -17px !important;
1567
- left: 390px;
1568
- }
1569
- .cff-no-groups-tooltip {
1570
- display: none;
1571
- }
1572
- .cff-fb-stp-src-type[data-disabled="true"]:hover .cff-no-groups-tooltip {
1573
- display: block;
1574
- padding: 12px 16px 16px;
1575
- width: 400px;
1576
- }
1577
-
1578
- /*
1579
- Add new Source Popup
1580
- */
1581
- .cff-fb-popup-cls{
1582
- height: 14px;
1583
- width: 14px;
1584
- position: absolute;
1585
- cursor: pointer;
1586
- right: 17px;
1587
- top: 17px;
1588
- z-index: 3;
1589
- }
1590
- .cff-fb-center-boss{
1591
- display: flex;
1592
- justify-content: center;
1593
- align-items: center;
1594
- }
1595
- .cff-fb-left-boss{
1596
- display: flex;
1597
- justify-content: left;
1598
- align-items: center;
1599
- }
1600
-
1601
-
1602
- .cff-fb-embed-popup,.cff-fb-dialog-popup{
1603
- width: 575px;
1604
- }
1605
- .cff-fb-dialog-popup{
1606
- min-height: 250px;
1607
- }
1608
-
1609
- .cff-fb-source-pp-customizer .cff-fb-srcslist-ctn{
1610
- grid-template-columns: 32.7% 32.7% 32.7%;
1611
- grid-column-gap: 1%;
1612
- }
1613
- .cff-fb-srcs-desc{
1614
- width: 55%;
1615
- font-style: normal;
1616
- font-weight: normal;
1617
- font-size: 14px;
1618
- line-height: 160%;
1619
- color: #434960;
1620
- box-sizing: border-box;
1621
- margin-bottom: 29px;
1622
- }
1623
- #cff-builder-app .cff-fb-source-pp-customizer h3{
1624
- margin-bottom: 6px;
1625
- }
1626
- #cff-builder-app .cff-fb-embed-popup h3 {
1627
- padding: 23px 25px 0;
1628
- margin-bottom: 0;
1629
- }
1630
- #cff-builder-app .cff-fb-embed-popup .cff-fb-embed-step-2 h3 {
1631
- padding: 0 0 0 29px;
1632
- }
1633
- .cff-fb-feedtypes-popup h5{
1634
- font-size: 26px;
1635
- padding: 0 20px;
1636
- margin-top: 25px;
1637
- margin-bottom: 30px;
1638
- }
1639
-
1640
- .cff-fb-feedtypes-pp-ctn .cff-fb-adv-types .cff-fb-types-list{
1641
- margin-bottom: 30px !important
1642
- }
1643
- .cff-fb-feedtypes-popup .cff-fb-types, .cff-fb-feedtypes-popup .cff-fb-adv-types {
1644
- padding: 0;
1645
- }
1646
- .cff-fb-source-top{
1647
- padding: 22px 19px 28px;
1648
- }
1649
- #cff-builder-app .cff-fb-source-step1 .cff-fb-source-top h3{
1650
- margin-bottom: 40px;
1651
- }
1652
- #cff-builder-app .cff-fb-source-step3 .cff-fb-source-top h3 {
1653
- margin-bottom: 30px;
1654
- }
1655
- #cff-settings .cff-fb-source-step4 .cff-fb-stp1-elm-desc {
1656
- max-width: 470px;
1657
- margin-bottom: 26px;
1658
- }
1659
- #cff-settings .sb-step-text {
1660
- color: #434960;
1661
- }
1662
- .cff-fb-srcs-update{
1663
- background: var(--cl-orange);
1664
- font-weight: 600;
1665
- font-size: 14px;
1666
- line-height: 160%;
1667
- height: 38px;
1668
- }
1669
- .cff-fb-srcs-update svg{
1670
- margin-right: 10px;
1671
- }
1672
- .cff-fb-srcs-update-footer{
1673
- display: flex;
1674
- align-items: center;
1675
- border-top: 1px solid #DCDDE1;
1676
- background: #F9F9FA;
1677
- }
1678
- .cff-fb-srcs-update-footer-txt{
1679
- font-size: 18px;
1680
- line-height: 1.7em;
1681
- }
1682
- .cff-fb-srcs-update-footer-btn{
1683
-
1684
- }
1685
- #cff-builder-app .cff-fb-srcs-update-footer-btn a{
1686
- height: 48px;
1687
- padding: 0 20px 0 24px;
1688
- }
1689
- .cff-fb-srcs-update-footer-image{
1690
- width: 26%;
1691
- margin-right: 7%;
1692
- }
1693
- #cff-builder-app .cff-fb-srcs-update-footer-btn a svg {
1694
- position: relative;
1695
- top: auto;
1696
- right: auto;
1697
- width: auto;
1698
- height: auto;
1699
- margin-left: 15px;
1700
- }
1701
- .cff-fb-srcs-update-footer-image svg{
1702
- width: 100%;
1703
- height: auto;
1704
- float: left;
1705
- }
1706
- .cff-fb-srcs-update-footer-txt{
1707
- box-sizing: border-box;
1708
- display: flex;
1709
- justify-content: center;
1710
- width: 38%;
1711
- margin-right: 7%;
1712
- }
1713
- .cff-fb-stp1-elm{
1714
- margin-bottom: 20px;
1715
- float: left;
1716
- display: flex;
1717
- }
1718
- .cff-fb-source-top .cff-fb-stp1-elm:first-of-type{
1719
- justify-content: center;
1720
- align-items: center;
1721
- padding-bottom: 24px;
1722
- border-bottom: 1px solid #D0D1D7;
1723
- }
1724
- .cff-fb-stp1-event{
1725
- padding-bottom: 0px!important;
1726
- border-bottom: none!important;
1727
- padding-right: 11%;
1728
- align-items: flex-start!important;
1729
- }
1730
- .cff-fb-stp1-elm-desc > a{
1731
- font-weight: 600;
1732
- text-decoration: underline;
1733
- color: #2A65DB;
1734
- }
1735
-
1736
- .cff-fb-stp-src-ctn{
1737
- display: flex;
1738
- justify-content: center;
1739
- align-content: center;
1740
- }
1741
- #cff-builder-app .cff-fb-stp-src-type{
1742
- display: flex;
1743
- justify-content: center;
1744
- align-content: center;
1745
- font-size: 13px;
1746
- font-weight:400;
1747
- cursor: pointer;
1748
- margin-left: 20px;
1749
- color: #434960;
1750
- }
1751
- .cff-fb-stp-src-type .cff-fb-chbx-round{
1752
- margin-right: 12px;
1753
- margin-top: 2px;
1754
- }
1755
- .cff-fb-stp-src-type[data-active="true"]{
1756
- font-weight:600;
1757
- color: #141B38;
1758
- }
1759
- .cff-fb-stp1-elm-ic{
1760
- width: 28px;
1761
- height: 28px;
1762
- border-radius: 35px;
1763
- background: #F3F4F5;
1764
- display: flex;
1765
- justify-content: center;
1766
- align-items: center;
1767
- font-weight: 500;
1768
- flex: none;
1769
- transform: translate(0, -2px);
1770
- }
1771
- .cff-fb-stp1-elm-txt{
1772
- margin-left: 16px;
1773
- margin-right: 21%;
1774
- width: 100%;
1775
- }
1776
- .cff-fb-stp1-elm-head{
1777
- font-size: 14px;
1778
- font-weight: 600;
1779
- color: #141B38;
1780
- }
1781
- .cff-fb-stp1-elm-desc{
1782
- font-size: 13px;
1783
- margin-top: 4px;
1784
- line-height: 150%;
1785
- color: #888a8e;
1786
- }
1787
- .cff-fb-stp1-event .cff-fb-stp1-elm-desc {
1788
- margin-top: 4px;
1789
- }
1790
- .cff-fb-stp1-elm-act .sb-btn.cff-fb-stp1-connect{
1791
- padding: 8px 20px 8px 40px;
1792
- background: #0068A0;
1793
- position: relative;
1794
- font-style: normal;
1795
- font-weight: 600;
1796
- font-size: 14px;
1797
- line-height: 160%;
1798
- }
1799
- .cff-fb-stp1-connect svg{
1800
- position: absolute;
1801
- top: 10px;
1802
- right: 0;
1803
- bottom: 0;
1804
- left: 13px;
1805
- width: 17px;
1806
- fill: currentColor;
1807
- }
1808
-
1809
- .cff-fb-source-bottom{
1810
- padding: 18px 20px;
1811
- background: #F3F4F5;
1812
- display: flex;
1813
- align-items: center;
1814
- margin-top: 60px;
1815
- border-radius: 0 0 2px 2px;
1816
- }
1817
- .cff-manual-question {
1818
- display: flex;
1819
- align-items: center;
1820
- }
1821
- .cff-manual-question svg{
1822
- margin-right: 23px;
1823
- float: left;
1824
- }
1825
- .cff-fb-source-btm-hd{
1826
- font-size: 14px;
1827
- font-weight: 500;
1828
- }
1829
- .cff-fb-src-add-manual{
1830
- margin-left: auto;
1831
- padding: 8px 20px 8px 40px;
1832
- }
1833
- .cff-fb-src-add-manual svg{
1834
- position: absolute;
1835
- top: 11px;
1836
- right: 0;
1837
- bottom: 0;
1838
- left: 13px;
1839
- fill: currentColor;
1840
- }
1841
- #cff-builder-app .cff-fb-source-step2 .cff-fb-source-top h3 {
1842
- margin-bottom: 35px;
1843
- }
1844
- #cff-builder-app .cff-fb-source-step4 .cff-fb-source-top h3,
1845
- #cff-builder-app .cff-fb-source-step4 .cff-fb-source-top h4{
1846
- margin-bottom: 8px;
1847
- }
1848
- #cff-builder-app .cff-fb-source-step4 .cff-fb-stp1-elm-desc {
1849
- max-width: 470px;
1850
- margin-bottom: 26px;
1851
- }
1852
- .cff-fb-src-add-manual i{
1853
- font-size: 12px;
1854
- margin-right: 10px;
1855
- }
1856
- .cff-fb-src-back-top{
1857
- float: left;
1858
- font-style: normal;
1859
- font-weight: 600;
1860
- font-size: 12px;
1861
- line-height: 160%;
1862
- letter-spacing: 0.05em;
1863
- text-transform: uppercase;
1864
- cursor: pointer;
1865
- color: #141B38;
1866
- margin-bottom: 10px;
1867
- display: flex;
1868
- justify-content: center;
1869
- align-items: center;
1870
- }
1871
- .cff-fb-src-back-top svg{
1872
- margin-left: 6px;
1873
- margin-right: 10px;
1874
- }
1875
-
1876
- .cff-fb-source-account-info{
1877
- background: #F3F4F5;
1878
- padding: 6px 6px 6px 12px;
1879
-
1880
- display: flex;
1881
- align-items: center;
1882
- }
1883
- .cff-fb-source-list{
1884
- display: grid;
1885
- grid-template-columns: 49.4% 49.4%;
1886
- grid-column-gap: 1.2%;
1887
- margin-top: 8px;
1888
- }
1889
- .cff-fb-source-popup.cff-fb-popup-inside .cff-fb-srcs-item {
1890
- box-sizing: border-box;
1891
- margin: 1.2% 0;
1892
- }
1893
-
1894
- .cff-fb-source-account-info img{
1895
- width: 23px;
1896
- height: 23px;
1897
- border-radius: 23px;
1898
- background: #fafafa;
1899
- margin-left: 10px;
1900
- margin-right: 10px;
1901
- }
1902
- .cff-fb-source-account-info strong{
1903
- color: #141B38;
1904
- }
1905
- .cff-fb-src-change{
1906
- padding: 7px 20px 7px 40px;
1907
- margin-left: auto;
1908
- }
1909
- .cff-fb-src-change svg{
1910
- position: absolute;
1911
- top: 11px;
1912
- right: 0;
1913
- bottom: 0;
1914
- left: 13px;
1915
- fill: currentColor;
1916
- }
1917
- .cff-fb-source-btn{
1918
- margin-top: 60px;
1919
- color: #fff;
1920
- display: flex;
1921
- justify-content: center;
1922
- align-items: center;
1923
- background: #0068A0;
1924
- cursor: pointer;
1925
- padding: 8px 20px;
1926
- line-height: 160%;
1927
- border-radius: 2px;
1928
- font-size: 14px;
1929
- font-weight: 500;
1930
- border: none;
1931
- text-decoration: none;
1932
- }
1933
- #cff-builder-app .cff-fb-source-step3 .cff-fb-source-btn {
1934
- margin-top: 45px;
1935
- }
1936
- #cff-builder-app .cff-fb-source-step3 .cff-fb-src-back-top {
1937
- margin-bottom: 4px;
1938
- }
1939
- .cff-fb-icon-success{
1940
- position: relative;
1941
- width: 30px;
1942
- height: 20px;
1943
- margin-right: 10px;
1944
- }
1945
- .cff-fb-icon-success:before{
1946
- content: '';
1947
- position: absolute;
1948
- width: 13px;
1949
- height: 5px;
1950
- top: 4px;
1951
- border-left: 3px solid currentColor;
1952
- border-bottom: 3px solid currentColor;
1953
- -webkit-transform: rotate(-45deg);
1954
- transform: rotate(-45deg);
1955
- }
1956
-
1957
- .cff-fb-source-inp-label,.cff-fb-wh-label{
1958
- font-size: 14px;
1959
- color: #434960;
1960
- }
1961
- .cff-fb-source-mnl-type .cff-fb-stp-src-ctn{
1962
- justify-content: flex-start;
1963
- margin-bottom: 22px;
1964
- margin-top: 8px;
1965
- }
1966
- #cff-builder-app .cff-fb-source-mnl-type .cff-fb-stp-src-ctn .cff-fb-stp-src-type{
1967
- margin-left: 0;
1968
- margin-right: 32px
1969
- }
1970
- .cff-fb-source-inp,.cff-fb-wh-inp{
1971
- border-radius: 0px !important;
1972
- outline: none ;
1973
- margin-top: 2px;
1974
- border: 1px solid #D0D1D7 !important;
1975
- margin-bottom: 20px;
1976
- height: 38px;
1977
- line-height: 38px;
1978
- }
1979
-
1980
-
1981
- .cff-fb-source-popup h1 {
1982
- font-style: normal;
1983
- font-weight: 600;
1984
- font-size: 36px;
1985
- line-height: 125%;
1986
- color: #141B38;
1987
- margin: 0;
1988
- }
1989
- .cff-fb-source-popup h2 {
1990
- font-style: normal;
1991
- font-weight: 600;
1992
- font-size: 32px;
1993
- line-height: 125%;
1994
- margin: 0;
1995
- }
1996
- .cff-fb-source-popup h3 {
1997
- font-style: normal;
1998
- font-weight: 600;
1999
- font-size: 24px;
2000
- line-height: 120%;
2001
- margin: 0 0 40px 0;
2002
- letter-spacing: 0;
2003
- }
2004
-
2005
- .cff-fb-source-popup h4 {
2006
- font-style: normal;
2007
- font-weight: 600;
2008
- font-size: 18px;
2009
- line-height: 140%;
2010
- margin: 0 0 4px 0;
2011
- }
2012
-
2013
- .cff-fb-slctf-back svg,
2014
- .cff-fb-slctf-nxt svg,
2015
- .cff-fb-source-btn-next svg{
2016
- width: 6px;
2017
- height: 10px;
2018
- }
2019
-
2020
- .cff-fb-source-btn-next span {
2021
- display: inline-block;
2022
- margin-right: 15px;
2023
- line-height: 160%;
2024
- }
2025
-
2026
- .sb-single-step {
2027
- display: flex;
2028
- align-items: center;
2029
- margin-bottom: 16px;
2030
- }
2031
- .sb-step-number {
2032
- display: flex;
2033
- align-items: center;
2034
- justify-content: center;
2035
- background: #F3F4F5;
2036
- border-radius: 30px;
2037
- width: 24px;
2038
- height: 24px;
2039
- margin-right: 16px;
2040
- }
2041
-
2042
- #cff-builder-app .sb-step-text {
2043
- color: #434960;
2044
- }
2045
-
2046
- .sb-two-buttons-wrap {
2047
- box-sizing:border-box;
2048
- float: left;
2049
- display: flex;
2050
- justify-content: center;
2051
- align-items: center;
2052
- width: 100%;
2053
- padding: 0 19px 28px;
2054
- }
2055
- .sb-two-buttons-wrap .cff-fb-source-btn {
2056
- margin-top: 0;
2057
- }
2058
- .cff-fb-source-step4 .cff-fb-source-top {
2059
- padding-bottom: 9px;
2060
- }
2061
- .sb-two-buttons-wrap > button:first-of-type {
2062
- margin-right: 12px;
2063
- }
2064
-
2065
- .sb-two-buttons-wrap .sb-question-circle {
2066
- margin-right: 9px;
2067
- }
2068
-
2069
- #cff-group-app-tooltip{
2070
- cursor: pointer;
2071
- }
2072
- .cff-group-app-screenshot{
2073
- display: none;
2074
- position: absolute;
2075
- bottom: 75px;
2076
- left: 50%;
2077
- margin-left: -325px;
2078
- z-index: 10;
2079
- border: 1px solid rgba(0,0,0,0.3);
2080
- box-shadow: 0 0 0 5000px rgb(0 0 0 / 20%);
2081
- border-radius: 5px;
2082
- }
2083
- #cff-group-app-tooltip:hover .cff-group-app-screenshot{
2084
- display: block !important;
2085
- }
2086
- .cff-fb-source-btn[data-active = false] {
2087
- pointer-events: none !important;
2088
- }
2089
- .cff-fb-source-btn[data-active = false] svg path{
2090
- fill: #8C8F9A !important;
2091
- }
2092
-
2093
- .sb-directions-p {
2094
- margin-bottom: 40px;
2095
- }
2096
-
2097
- .cff-fb-srcs-item-avatar{
2098
- display: flex;
2099
- width: 42px;
2100
- height: inherit;
2101
- justify-content: center;
2102
- align-items: center;
2103
- }
2104
- .cff-fb-srcs-item-avatar img{
2105
- width: 36px;
2106
- height: 36px;
2107
- border-radius: 50%;
2108
- background: #eee;
2109
- }
2110
- .cff-fb-srcs-item-inf{
2111
- width: 100%;
2112
- height: inherit;
2113
- display: flex;
2114
- justify-content: center;
2115
- flex-direction: column;
2116
- padding-left: 10px;
2117
- }
2118
- .cff-fb-srcs-item-name{
2119
- font-weight: 600;
2120
- }
2121
- .cff-fb-srcs-item-name-event{
2122
- font-size: 10px;
2123
- font-weight: 500;
2124
- color: #777;
2125
- }
2126
-
2127
- .cff-fb-srcs-item-type{
2128
- color: #434960;
2129
- font-weight: 600;
2130
- text-transform: uppercase;
2131
- display: flex;
2132
- align-items: center;
2133
- }
2134
- .sb-is-group .sb-details-wrap {
2135
- position: relative;
2136
- display: flex;
2137
- align-items: center;
2138
- padding: 2px 6px 2px 22px;
2139
- background: #F3F4F5;
2140
- border-radius: 2px;
2141
- }
2142
- .sb-highlight-admin .sb-details-wrap {
2143
- padding: 2px 6px 2px 17px;
2144
-
2145
- background: #E2F5FF;
2146
- color: #0068A0;
2147
- }
2148
- .sb-highlight-admin span {
2149
- color: #0068A0;
2150
- }
2151
- .cff-fb-srcs-item-type i{
2152
- margin-right: 5px;
2153
- }
2154
- .cff-fb-srcs-item-type svg{
2155
- float: left;
2156
- margin-right: 5px;
2157
- fill: currentColor;
2158
- height: 8px;
2159
- }
2160
- .sb-has-details .cff-fb-srcs-item-type svg{
2161
- position: absolute;
2162
- top: 5px;
2163
- right: 0;
2164
- bottom: 0;
2165
- left: 5px;
2166
- height: 9px;
2167
- }
2168
- .sb-has-details .cff-fb-srcs-item-type.sb-highlight-admin svg {
2169
- top: 6px;
2170
- }
2171
- [data-type="page"] .cff-fb-srcs-item-type svg{
2172
- height: 9px;
2173
- }
2174
- .cff-fb-srcs-back{
2175
- margin-right: auto;
2176
- }
2177
- .cff-groups-connect-actions {
2178
- float: left;
2179
- width: 100%;
2180
- }
2181
- .cff-groups-connect-actions .sb-alert,
2182
- .cff-error-ctn .sb-alert{
2183
- position: relative;
2184
- margin: 25px 0;
2185
- padding: 12px 12px 12px 44px;
2186
- word-break: break-word;
2187
- background: #FFEFCC
2188
- }
2189
- .cff-groups-connect-actions .cff-fb-source-btn {
2190
- margin-top: 0;
2191
- }
2192
- .cff-groups-connect-actions {
2193
- float: left;
2194
- }
2195
- .sb-alerts-wrap .sb-alert {
2196
- margin: 0;
2197
- }
2198
- .cff-groups-connect-actions .sb-alert svg,
2199
- .cff-error-ctn .sb-alert svg{
2200
- position: absolute;
2201
- top: 13px;
2202
- left: 13px;
2203
- }
2204
- #cff-builder-app .cff-groups-connect-actions .sb-alert span,
2205
- .cff-error-ctn .sb-alert span{
2206
- color: #995C00;
2207
- }
2208
- #cff-builder-app .cff-groups-connect-actions .sb-alert span a,
2209
- .cff-error-ctn .sb-alert span a{
2210
- color: #663D00;
2211
- font-weight: 600;
2212
- text-decoration: underline;
2213
- }
2214
-
2215
- .cff-groups-connect-actions .cff-fb-source-btn {
2216
- margin-top: 0;
2217
- }
2218
- /* Install Plugin Modal on Select Source Flow */
2219
- .cff-install-plugin-modal {
2220
- max-width: 580px;
2221
- }
2222
- .cff-install-plugin-body .cff-install-plugin-header {
2223
- height: 106px;
2224
- background: #F3F4F5;
2225
- padding: 20px;
2226
- display: flex;
2227
- box-sizing: border-box;
2228
- flex-wrap: wrap;
2229
- align-items: center;
2230
- }
2231
- .cff-install-plugin-body .cff-install-plugin-header .sb-plugin-image {
2232
- background-color: #fff;
2233
- box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
2234
- border-radius: 2px;
2235
- padding: 15px;
2236
- max-height: 66px;
2237
- box-sizing: border-box;
2238
- margin-right: 24px;
2239
- }
2240
- .cff-install-plugin-body .cff-install-plugin-header h3 {
2241
- font-size: 18px !important;
2242
- line-height: 25px !important;
2243
- display: flex;
2244
- align-items: center;
2245
- }
2246
- .cff-install-plugin-body .cff-install-plugin-header h3 span {
2247
- color: #fff;
2248
- background: #59AB46;
2249
- border-radius: 2px;
2250
- font-size: 10px;
2251
- line-height: 16px;
2252
- letter-spacing: 0.08em;
2253
- text-transform: uppercase;
2254
- padding: 0px 6px;
2255
- margin-left: 10px;
2256
- }
2257
- .cff-install-plugin-body .cff-install-plugin-header p {
2258
- display: flex;
2259
- font-size: 12px;
2260
- line-height: 18px;
2261
- color: #434960;
2262
- margin: 5px 0 0 0;
2263
- }
2264
- .cff-install-plugin-body .cff-install-plugin-header p .sb-author-logo {
2265
- margin-right: 8px;
2266
- }
2267
-
2268
- .cff-install-plugin-body .cff-install-plugin-content {
2269
- padding: 20px 20px 32px 107px;
2270
- }
2271
- .cff-install-plugin-body .cff-install-plugin-content p {
2272
- margin: 0px;
2273
- font-size: 14px;
2274
- line-height: 22px;
2275
- color: #434960;
2276
- padding-right: 20px;
2277
- }
2278
- .cff-install-plugin-body .cff-install-plugin-content .cff-install-plugin-btn {
2279
- display: flex;
2280
- align-items: center;
2281
- justify-content: center;
2282
- height: 38px;
2283
- padding: 8px 20px;
2284
- box-sizing: border-box;
2285
- transition: all .15s ease-in-out;
2286
- border-radius: 2px;
2287
- width: 100%;
2288
- margin-top: 28px;
2289
- border: none;
2290
- font-size: 14px;
2291
- font-weight: 600;
2292
- line-height: 160%;
2293
- cursor: pointer;
2294
- }
2295
- .cff-install-plugin-body .cff-install-plugin-content .cff-btn-orange:disabled {
2296
- color: #8C8F9A !important;
2297
- background: #E8E8EB !important;
2298
- cursor: not-allowed;
2299
- }
2300
- .cff-install-plugin-body .cff-install-plugin-content .cff-install-plugin-btn span {
2301
- height: 20px;
2302
- width: 20px;
2303
- margin-right: 5px;
2304
- }
2305
- .cff-fb-mr-fd-list button {
2306
- cursor: pointer;
2307
- }
2308
-
2309
- /* Tooltips */
2310
- .sb-control-elem-tltp{
2311
- margin-left: 10px;
2312
- position: relative;
2313
- }
2314
- .sb-control-elem-tltp-icon{
2315
- float: left;
2316
- cursor: pointer;
2317
- }
2318
- .sb-control-elem-tltp-icon svg{
2319
- width: 14px;
2320
- float: left;
2321
- }
2322
- @media (min-width: 768px) and (max-width: 1079px) {
2323
- .cff-fb-mr-fd-img {
2324
- width: 37%;
2325
- }
2326
- .cff-fb-mr-fd-list button:not(:last-child) {
2327
- margin-bottom: 8px;
2328
- }
2329
- }
2330
- @media (min-width: 768px) and (max-width: 1023px) {
2331
- .cff-fb-srcslist-ctn,
2332
- .cff-fb-source-pp-customizer .cff-fb-srcslist-ctn {
2333
- grid-template-columns: 49.2% 49.2%;
2334
- gap: 2%;
2335
- margin-top: 8px;
2336
- }
2337
- .cff-fb-slctfd-action {
2338
- width: 100%;
2339
- }
2340
- .cff-fb-srcs-item {
2341
- margin-top: 3px;
2342
- }
2343
- .cff-manual-question {
2344
- max-width: 390px;
2345
- }
2346
- .cff-fb-feedtypes-popup {
2347
- left: 0;
2348
- max-width: calc(100% - 60px);
2349
- }
2350
- .cff-fb-feedtypes-pp-ctn.cff-fb-center-boss {
2351
- top: 40px;
2352
- }
2353
- }
2354
-
2355
- @media (max-width: 767px) {
2356
- .cff-fb-feedtypes-pp-ctn.cff-fb-center-boss {
2357
- align-items: baseline;
2358
- }
2359
- .cff-fb-feedtypes-popup {
2360
- max-width: calc(100% - 40px);
2361
- top: 50px;
2362
- }
2363
- #cff-builder-app .sb-positioning-wrap {
2364
- width: 130px;
2365
- }
2366
- .cff-fb-embed-popup, .cff-fb-dialog-popup {
2367
- width: 100%;
2368
- max-width: calc(100% - 40px);
2369
- }
2370
- .cff-fb-popup-inside {
2371
- left: 0;
2372
- }
2373
- .cff-fb-extensions-pp-ctn .cff-fb-popup-inside.cff-fb-extensions-popup,
2374
- .cff-fb-source-ctn .cff-fb-popup-inside {
2375
- max-width: calc(100% - 40px);
2376
- }
2377
- .cff-fb-source-ctn.cff-fb-center-boss,
2378
- .cff-fb-extensions-pp-ctn.cff-fb-center-boss{
2379
- align-items: baseline;
2380
- }
2381
- .cff-fb-extensions-pp-ctn.cff-fb-center-boss .cff-fb-popup-inside{
2382
- top: 50px;
2383
- left: 0;
2384
- }
2385
- .cff-extension-bullet-list {
2386
- grid-template-columns: 100%;
2387
- }
2388
- .cff-fb-extpp-bottom {
2389
- padding: 20px;
2390
- }
2391
- .cff-fb-extpp-info {
2392
- width: 100%;
2393
- padding-right: 20px;
2394
- padding-left: 20px;
2395
- }
2396
- .cff-fb-extpp-img {
2397
- display: none;
2398
- }
2399
- .cff-fb-extpp-top {
2400
- height: 195px;
2401
- }
2402
- .cff-fb-source-pp-customizer .cff-fb-srcslist-ctn {
2403
- grid-template-columns: 99.2%;
2404
- gap: 2%;
2405
- margin-bottom: 50px;
2406
- }
2407
- .cff-fb-source-account-info {
2408
- flex-wrap: wrap;
2409
- }
2410
- .cff-fb-source-account-info > span {
2411
- width: 100%;
2412
- }
2413
- .cff-fb-source-account-info img {
2414
- margin-left: 0;
2415
- }
2416
- .cff-fb-source-btn {
2417
- margin-top: 25px;
2418
- }
2419
- .cff-fb-source-bottom {
2420
- flex-wrap: wrap;
2421
- margin-top: 0;
2422
- }
2423
- .cff-fb-src-add-manual {
2424
- margin-left: 0;
2425
- margin-top: 15px;
2426
- }
2427
- .cff-fb-types-list {
2428
- grid-template-columns: 100%;
2429
- }
2430
- .cff-fb-types-list .cff-fb-type-el {
2431
- margin-bottom: 10px;
2432
- }
2433
- .cff-fb-create-ctn {
2434
- margin-top: 90px;
2435
- padding: 0 20px 65px;
2436
- }
2437
- #cff-builder-app h1 {
2438
- font-size: 32px;
2439
- }
2440
- .cff-fb-social-wall-between,
2441
- .cff-fb-social-wall-end {
2442
- display: none;
2443
- }
2444
- .cff-graphic-row-main {
2445
- justify-content: space-between;
2446
- }
2447
- .cff-fb-slctfd-action {
2448
- width: 100%;
2449
- }
2450
- .cff-fb-mr-feeds {
2451
- flex-wrap: wrap;
2452
- margin-bottom: 60px;
2453
- }
2454
- .cff-fb-mr-feeds .cff-fb-mr-fd-content,
2455
- .cff-fb-slctsrc-content, .cff-fb-section-wh-insd,
2456
- .cff-fb-types, .cff-fb-adv-types {
2457
- padding: 20px;
2458
- }
2459
- .cff-fb-source-ctn .cff-fb-popup-inside.cff-install-plugin-modal {
2460
- top: 0;
2461
- }
2462
- .cff-fb-mr-fd-list button:not(:last-child) {
2463
- margin-bottom: 8px;
2464
- }
2465
- .cff-fb-srcs-item {
2466
- margin-top: 3px;
2467
- }
2468
-
2469
- #cff-builder-app h2 {
2470
- font-size: 26px;
2471
- }
2472
- .cff-fb-srcs-desc {
2473
- width: 100%;
2474
- }
2475
- .cff-fb-source-list {
2476
- grid-template-columns: 99%;
2477
- }
2478
- .sb-dialog-ctn.cff-fb-center-boss .cff-fb-popup-inside {
2479
- max-width: calc(100% - 40px);
2480
- }
2481
- }
2482
-
2483
- @media (max-width: 480px) {
2484
- .cff-fb-source-ctn .cff-fb-popup-inside {
2485
- top: 45px;
2486
- margin-bottom: 46px;
2487
- }
2488
- .cff-csz-header-insider .sb-button-standard {
2489
- font-size: 13px;
2490
- padding: 8px 15px 8px 34px;
2491
- }
2492
- .cff-csz-header-insider .sb-button-standard svg {
2493
- width: 13px;
2494
- height: 13px;
2495
- left: 14px;
2496
- top: 10px;
2497
- }
2498
- .cff-fb-header.cff-csz-header {
2499
- height: 126px;
2500
- }
2501
- .cff-csz-hd-name {
2502
- height: 30px;
2503
- margin-top: 5px;
2504
- }
2505
- .sb-customizer-ctn .sb-customizer-sidebar {
2506
- margin-top: 120px;
2507
- }
2508
- .sb-fs-boss.cff-fb-center-boss {
2509
- overflow: scroll;
2510
- }
2511
- .cff-fb-stp1-elm {
2512
- flex-wrap: wrap;
2513
- }
2514
- .cff-fb-stp1-elm-txt {
2515
- margin-right: 0%;
2516
- width: calc(100% - 50px);
2517
- }
2518
- .cff-fb-stp1-elm .cff-fb-stp-src-ctn.cff-fb-stp1-elm-act {
2519
- margin-left: 24px;
2520
- }
2521
- .cff-fb-stp1-elm .cff-fb-stp1-elm-act {
2522
- margin-top: 10px;
2523
- margin-left: 42px;
2524
- }
2525
-
2526
- }
2527
-
2528
-
2529
- .sb-control-elem-tltp-content{
2530
- position: fixed;
2531
- background: #fff;
2532
- padding: 8px 11px;
2533
- text-align: center;
2534
- line-height: 1.5em;
2535
- top: 0;
2536
- left: 0;
2537
- z-index: 999999999;
2538
- -webkit-transform: translateX(-50%) translateY(-100%);
2539
- transform: translateX(-50%) translateY(-100%);
2540
- box-shadow: 0 5px 10px rgba(0,0,0,0.3);
2541
- }
2542
-
2543
-
2544
- .sb-control-elem-tltp-content:before{
2545
- content: '';
2546
- position: absolute;
2547
- left: 50%;
2548
- bottom: -10px;
2549
- border-top: 12px solid #fff;
2550
- border-right: 12px solid transparent;
2551
- border-left: 12px solid transparent;
2552
- -webkit-transform: translateX(-50%);
2553
- transform: translateX(-50%);
2554
- z-index: 2;
2555
- }
2556
- .sb-control-elem-tltp-content:after{
2557
- content: '';
2558
- position: absolute;
2559
- left: 50%;
2560
- bottom: -12px;
2561
- margin-left: 0px;
2562
- border-top: 14px solid #eee;
2563
- border-right: 15px solid transparent;
2564
- border-left: 15px solid transparent;
2565
- -webkit-transform: translateX(-50%);
2566
- transform: translateX(-50%);
2567
- }
2568
-
2569
- .sb-control-elem-tltp:hover .sb-control-elem-tltp-content{
2570
- opacity: 1;
2571
- visibility: visible;
2572
- top: 24px;
2573
- max-width: 300px;
2574
- width: auto;
2575
- }
2576
- .sb-control-elem-tltp-txt{
2577
- position: relative;
2578
- max-width: 300px;
2579
- width: max-content;
2580
- }
2581
- .sb-control-elem-tltp-txt[data-align="left"]{
2582
- text-align: left!important;
2583
- }
2584
- .sb-tltp-black-link{
2585
- text-decoration: underline!important;
2586
- color: #000;
2587
- }
2588
- /* Social Wall Links */
2589
- .sb-social-wall-link-wrap {
2590
- display: flex;
2591
- font-size: 14px;
2592
- margin: 10px 0;
2593
- }
2594
- .sb-social-wall-link {
2595
- padding: 0 12px;
2596
- border-right: 1px solid #ccc;
2597
- color: #0068A0!important;
2598
- line-height: 1;
2599
- }
2600
- .sb-social-wall-link a {
2601
- text-decoration: none;
2602
- }
2603
- .sb-social-wall-link:first-child {
2604
- padding-left: 0;
2605
- border-right: 1px solid #ccc;
2606
- color: #0068A0!important;
2607
- line-height: 1;
2608
- }
2609
- .sb-social-wall-link:last-child {
2610
- border-right: none;
2611
- }
2612
- .sb-social-wall-link a:focus {
2613
- outline: none;
2614
- box-shadow: none;
2615
- }
2616
-
2617
-
2618
- /*** 7.0 Settings CTA ***/
2619
- .cff-settings-cta {
2620
- background-color: #fff;
2621
- padding: 24px 20px 20px;
2622
- box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
2623
- margin-top: 30px;
2624
- }
2625
- .cff-settings-cta .cff-cta-title,
2626
- .cff-settings-cta .cff-cta-head-inner {
2627
- display: flex;
2628
- }
2629
- .cff-settings-cta .cff-cta-head-inner {
2630
- justify-content: space-between;
2631
- max-width: 820px;
2632
- }
2633
- .cff-settings-cta .cff-cta-head-inner .cff-cta-btn a {
2634
- display: flex;
2635
- flex-direction: row;
2636
- justify-content: center;
2637
- align-items: center;
2638
- padding: 7px 12px 8px 20px;
2639
- font-weight: 600;
2640
- font-size: 14px;
2641
- line-height: 160%;
2642
- margin-top: 10px;
2643
- }
2644
- .cff-settings-cta .cff-cta-head-inner .cff-cta-btn a svg {
2645
- margin-left: 12px;
2646
- width: 10px;
2647
- }
2648
- .cff-settings-cta .cff-plugin-title-bt {
2649
- display: flex;
2650
- }
2651
- .cff-settings-cta .cff-plugin-title-bt .cff-cta-btn {
2652
- width: 177px;
2653
- }
2654
- .cff-settings-cta .cff-cta-title .cff-plugin-logo {
2655
- background: #FFFFFF;
2656
- box-shadow: 0px 6.05242px 7.56552px rgba(0, 26, 119, 0.0415), 0px 3.39293px 4.24117px rgba(0, 26, 119, 0.04), 0px 1.80196px 2.25245px rgba(0, 26, 119, 0.0285), 0px 0.749837px 0.937296px rgba(0, 26, 119, 0.0337);
2657
- border-radius: 2px;
2658
- min-width: 60px;
2659
- width: 65px;
2660
- height: 65px;
2661
- display: flex;
2662
- justify-content: center;
2663
- align-items: center;
2664
- margin-right: 30px;
2665
- border: 1px solid #ecebeb;
2666
- }
2667
- #cff-builder-app .cff-settings-cta .cff-cta-title .cff-plugin-logo{
2668
- width: 75px;
2669
- height: 75px;
2670
- }
2671
- .cff-settings-cta .cff-cta-title .cff-cta-discount-label {
2672
- background: #E2F5FF;
2673
- border-radius: 2px;
2674
- padding: 4px 14px 4px 12px;
2675
- font-weight: 600;
2676
- font-size: 14px;
2677
- line-height: 160%;
2678
- color: #0068A0;
2679
- display: flex;
2680
- flex-direction: row;
2681
- justify-content: space-between;
2682
- align-items: center;
2683
- max-width: 235px;
2684
- margin-top: 10px;
2685
- box-sizing: border-box;
2686
- margin-right: 10px;
2687
- }
2688
- #cff-builder-app .cff-settings-cta .cff-cta-title .cff-cta-discount-label {
2689
- max-width: 250px;
2690
- }
2691
- #cff-builder-app .cff-settings-cta .cff-cta-title .cff-cta-discount-label svg {
2692
- margin-right: 6px;
2693
- }
2694
- #cff-builder-app .cff-settings-cta .cff-cta-title .cff-cta-discount-label {
2695
- color: #663D00;
2696
- background: #FFEFCC;
2697
- }
2698
- .cff-settings-cta .cff-cta-boxes {
2699
- margin: 36px 0px 0px 7px;
2700
- display: flex;
2701
- background-color: #fff;
2702
- box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
2703
- border: 1px solid #E8E8EB;
2704
- border-bottom: 0px solid transparent;
2705
- max-width: 1170px;
2706
- }
2707
- .cff-settings-cta .cff-cta-box:not(:last-child) {
2708
- border-right: 1px solid #E8E8EB;
2709
- }
2710
- .cff-settings-cta .cff-cta-box {
2711
- padding: 16px 30px 16px 18px;
2712
- display: flex;
2713
- }
2714
- .cff-settings-cta .cff-cta-box .cff-cta-box-icon {
2715
- margin-right: 24px;
2716
- max-height: 50px;
2717
- }
2718
- .cff-settings-cta .cff-cta-box .cff-cta-box-title {
2719
- font-weight: 600;
2720
- font-size: 14px;
2721
- line-height: 160%;
2722
- }
2723
- .cff-settings-cta .cff-cta-much-more{
2724
- display: flex;
2725
- padding: 0 14px;
2726
- flex-wrap: wrap;
2727
- margin-top: 3px;
2728
- justify-content: space-between;
2729
- max-width: 1170px;
2730
- }
2731
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-left {
2732
- width: 330px;
2733
- }
2734
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-right ul {
2735
- display: grid;
2736
- grid-template-columns: 33% 33% 33%;
2737
- grid-column-gap: 2%;
2738
- padding-top: 10px;
2739
- }
2740
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-left h4 {
2741
- font-weight: 600;
2742
- font-size: 18px;
2743
- line-height: 140%;
2744
- color: #141B38;
2745
- margin: 1.33em 0 !important;
2746
- }
2747
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-right ul li {
2748
- font-size: 14px;
2749
- line-height: 160%;
2750
- color: #434960;
2751
- width: 260px;
2752
- position: relative;
2753
- }
2754
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-right ul li::before {
2755
- background: #0096CC;
2756
- width: 4px;
2757
- height: 4px;
2758
- content: '';
2759
- position: absolute;
2760
- left: -19px;
2761
- top: 10px;
2762
- }
2763
- .cff-settings-cta .cff-cta-try-demo {
2764
- margin-top: 13px;
2765
- max-width: 1180px;
2766
- }
2767
- .cff-settings-cta .cff-cta-try-demo a {
2768
- width: 100%;
2769
- justify-content: center;
2770
- display: flex;
2771
- align-items: center;
2772
- vertical-align: middle;
2773
- background: #F3F4F5;
2774
- border: 1px solid #DCDDE1;
2775
- box-sizing: border-box;
2776
- border-radius: 2px;
2777
- padding: 7px 20px;
2778
- font-weight: 600;
2779
- font-size: 14px;
2780
- line-height: 22px;
2781
- color: #141B38;
2782
- box-sizing: border-box;
2783
- letter-spacing: 0.2px;
2784
- cursor: pointer;
2785
- transition: all 0.15s ease-in-out;
2786
- text-decoration: none;
2787
- }
2788
- .cff-settings-cta .cff-cta-try-demo a span svg {
2789
- transform: translate(5px, 4px);
2790
- }
2791
- .cff-settings-cta .cff-cta-try-demo .cff-btn span {
2792
- margin-left: 9px;
2793
- transform: translateY(1px);
2794
- }
2795
-
2796
- .cff-cta-toggle-features {
2797
- background: #F3F4F5;
2798
- width: 100%;
2799
- display: flex;
2800
- justify-content: left;
2801
- padding: 5px 0 4px 15px;
2802
- box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), 0px 4px 5px rgb(0 0 0 / 5%);
2803
- box-sizing: border-box;
2804
- }
2805
- .cff-cta-toggle-features .cff-cta-toggle-btn {
2806
- font-weight: 600;
2807
- font-size: 14px;
2808
- line-height: 160%;
2809
- border: none;
2810
- background: none;
2811
- display: flex;
2812
- cursor: pointer;
2813
- }
2814
- .cff-cta-toggle-features .cff-cta-toggle-btn svg {
2815
- transform: translateY(0px);
2816
- margin-left: 4px;
2817
- }
2818
-
2819
- @media (min-width: 1170px) and (max-width: 1540px) {
2820
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-right ul li {
2821
- width: 240px;
2822
- }
2823
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-left {
2824
- width: 220px;
2825
- }
2826
- }
2827
- @media (min-width: 1170px) and (max-width: 1340px) {
2828
- .cff-settings-cta .cff-cta-box .cff-cta-box-icon {
2829
- margin-right: 15px;
2830
- }
2831
- .cff-settings-cta .cff-cta-box {
2832
- padding: 16px 15px 16px 15px;
2833
- }
2834
- }
2835
- @media (max-width: 1300px) {
2836
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-right ul {
2837
- grid-template-columns: 48% 48%;
2838
- }
2839
- }
2840
- @media (max-width: 1170px) {
2841
- .cff-settings-cta .cff-cta-boxes {
2842
- flex-wrap: wrap;
2843
- }
2844
- .cff-settings-cta .cff-cta-boxes .cff-cta-box {
2845
- width: 50%;
2846
- box-sizing: border-box;
2847
- }
2848
- .cff-settings-cta .cff-cta-box:not(:last-child) {
2849
- border-right: none;
2850
- }
2851
- .cff-settings-cta .cff-cta-box:first-child,
2852
- .cff-settings-cta .cff-cta-box:nth-child(2) {
2853
- border-bottom: 1px solid #E8E8EB;
2854
- }
2855
- .cff-settings-cta .cff-cta-box:first-child,
2856
- .cff-settings-cta .cff-cta-box:nth-child(3) {
2857
- border-right: 1px solid #E8E8EB;
2858
- }
2859
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-right {
2860
- padding-left: 20px;
2861
- }
2862
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-right ul {
2863
- margin: 0;
2864
- padding: 0;
2865
- }
2866
- }
2867
- @media (max-width: 770px) {
2868
- .cff-settings-cta .cff-cta-boxes .cff-cta-box {
2869
- width: 100%;
2870
- align-items: center;
2871
- }
2872
- .cff-settings-cta .cff-cta-box {
2873
- border: none;
2874
- }
2875
- .cff-settings-cta .cff-cta-box:not(:last-child) {
2876
- border-bottom: 1px solid #E8E8EB;
2877
- }
2878
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-right ul {
2879
- grid-template-columns: 100%;
2880
- margin-top: 0px;
2881
- }
2882
- .cff-settings-cta .cff-cta-much-more .cff-cta-mm-left h4 {
2883
- margin-bottom: 10px !important;
2884
- }
2885
- .sb-tab-content .sb-tab-box .cff-caching-pro-cta {
2886
- padding: 8px 25px;
2887
- }
2888
-
2889
- .cff-settings-cta .cff-cta-head-inner {
2890
- flex-wrap: wrap;
2891
- }
2892
-
2893
- .cff-settings-cta .cff-cta-title {
2894
- margin-bottom: 20px;
2895
- }
2896
- .cff-settings-cta .cff-cta-btn {
2897
- width: 100%;
2898
- }
2899
- .cff-settings-cta .cff-plugin-title-bt {
2900
- flex-direction: column;
2901
- }
2902
-
2903
- .cff-plugin-title {
2904
- width: 67%;
2905
- }
2906
- }
2907
-
2908
- @media (max-width: 580px) {
2909
- .cff-settings-cta .cff-cta-title .cff-plugin-logo {
2910
- margin-right: 20px;
2911
- }
2912
- }
2913
-
2914
- /*
2915
- Add Source Loading
2916
- */
2917
- .cff-fb-source-redirect-ld{
2918
- text-align: center;
2919
- }
2920
- .cff-fb-source-redirect-ld div{
2921
- display: inline-block;
2922
- width: 32px;
2923
- height: 32px;
2924
- border-radius: 50px;
2925
- margin: 0 10px;
2926
- position: relative;
2927
- background-color: #0096CC;
2928
- color: #0096CC;
2929
- -webkit-animation: sb-source-redirect 1s infinite linear alternate;
2930
- animation: sb-source-redirect 1s infinite linear alternate;
2931
- -webkit-animation-delay: .5s;
2932
- animation-delay: .5s;
2933
- }
2934
-
2935
- .cff-fb-source-redirect-ld div:before,
2936
- .cff-fb-source-redirect-ld div:after{
2937
- content: '';
2938
- display: inline-block;
2939
- position: absolute;
2940
- top: 0;
2941
- }
2942
-
2943
- .cff-fb-source-redirect-ld div:before{
2944
- left: -45px;
2945
- width: 32px;
2946
- height: 32px;
2947
- border-radius: 50px;
2948
- background-color: #0096CC;
2949
- color: #0096CC;
2950
- -webkit-animation: sb-source-redirect 1s infinite alternate;
2951
- animation: sb-source-redirect 1s infinite alternate;
2952
- -webkit-animation-delay: 0s;
2953
- animation-delay: 0s;
2954
- }
2955
-
2956
- .cff-fb-source-redirect-ld div:after{
2957
- left: 45px;
2958
- width: 32px;
2959
- height: 32px;
2960
- border-radius: 50px;
2961
- background-color: #0096CC;
2962
- color: #0096CC;
2963
- -webkit-animation: sb-source-redirect 1s infinite alternate;
2964
- animation: sb-source-redirect 1s infinite alternate;
2965
- -webkit-animation-delay: 1s;
2966
- animation-delay: 1s;
2967
- }
2968
-
2969
-
2970
-
2971
- @-webkit-keyframes sb-source-redirect {
2972
- 0% {background-color: #0096CC;}
2973
- 50%,100% {background-color: #B5E5FF;}
2974
- }
2975
- @keyframes sb-source-redirect {
2976
- 0% {background-color: #0096CC;}
2977
- 50%,100% {background-color: #B5E5FF;}
2978
- }
2979
-
2980
-
2981
- .cff-fb-source-redirect-info{
2982
- text-align: center;
2983
- margin-top: 50px;
2984
- }
2985
-
2986
- .cff-fb-source-redirect-info strong{
2987
- font-size: 18px;
2988
- }
2989
- .cff-fb-source-redirect-info p{
2990
- color: #8C8F9A;
2991
- padding: 0 24%;
2992
- font-size: 16px;
2993
- margin-bottom: 0px;
2994
- }
1
+ /*
2
+ Global CSS styles
3
+ Theses styles can be used for different screens
4
+ & In different SmashBalloon Plugins
5
+
6
+ * Transitions
7
+ * Default, Hover & Focus Colors & Backgrounds
8
+ * Social Colors
9
+ * Buttons
10
+ * Full Screen Boss
11
+ * Add Source Popup
12
+ * Confirm Dialog
13
+ * Full Screen Loader
14
+ * Tooltip
15
+
16
+ */
17
+ #cff-settings{
18
+ visibility: hidden;
19
+ opacity: 0;
20
+ }
21
+ #cff-settings[data-app-loaded="true"]{
22
+ visibility: visible;
23
+ opacity: 1;
24
+ }
25
+
26
+ #cff-builder-app {
27
+ -webkit-font-smoothing: antialiased;
28
+ }
29
+
30
+ /*
31
+ Transitions
32
+ */
33
+ .sb-tr-1{
34
+ -webkit-transition: all .1s ease-in-out;
35
+ transition: all .1s ease-in-out;
36
+ }
37
+ .sb-tr-2{
38
+ -webkit-transition: all .2s ease-in-out;
39
+ transition: all .2s ease-in-out;
40
+ }
41
+ .sb-tr-3{
42
+ -webkit-transition: all .3s ease-in-out;
43
+ transition: all .3s ease-in-out;
44
+ }
45
+ .sb-tr-4{
46
+ -webkit-transition: all .4s ease-in-out;
47
+ transition: all .4s ease-in-out;
48
+ }
49
+ .sb-tr-5{
50
+ -webkit-transition: all .5s ease-in-out;
51
+ transition: all .5s ease-in-out;
52
+ }
53
+ .sb-tr-6{
54
+ -webkit-transition: all .6s ease-in-out;
55
+ transition: all .6s ease-in-out;
56
+ }
57
+ .sb-tr-7{
58
+ -webkit-transition: all .7s ease-in-out;
59
+ transition: all .7s ease-in-out;
60
+ }
61
+ .sb-tr-8{
62
+ -webkit-transition: all .8s ease-in-out;
63
+ transition: all .8s ease-in-out;
64
+ }
65
+ .sb-tr-9{
66
+ -webkit-transition: all .9s ease-in-out;
67
+ transition: all .9s ease-in-out;
68
+ }
69
+ .sb-tr-10{
70
+ -webkit-transition: all 1s ease-in-out;
71
+ transition: all 1s ease-in-out;
72
+ }
73
+
74
+ /*
75
+ * Default, Hover & Focus Colors & Backgrounds
76
+ */
77
+ .sb-small-p,
78
+ .sb-standard-p{
79
+ font-style: normal;
80
+ font-weight: normal;
81
+ font-size: 14px;
82
+ line-height: 160%;
83
+ color: #8C8F9A;
84
+ margin: 0;
85
+ }
86
+ .sb-standard-p{
87
+ font-size: 16px;
88
+ color: #141B38;
89
+ }
90
+ #cff-settings h3 {
91
+ font-style: normal;
92
+ font-weight: 600;
93
+ font-size: 24px;
94
+ line-height: 120%;
95
+ margin: 0 0 4px 0;
96
+ letter-spacing: 0;
97
+ }
98
+ .sb-caption {
99
+ font-style: normal;
100
+ font-weight: normal;
101
+ font-size: 13px;
102
+ line-height: 150%;
103
+ color: #141B38;
104
+ }
105
+ .sb-caption.sb-caption-lighter {
106
+ color: #5F6368;
107
+ }
108
+ .sb-small-text {
109
+ font-size: 12px;
110
+ }
111
+ .sb-bold {
112
+ font-weight: 600;
113
+ }
114
+ .sb-dark-text {
115
+ color: #141B38;
116
+ }
117
+ .sb-small {
118
+ font-style: normal;
119
+ font-weight: bold;
120
+ font-size: 10px;
121
+ line-height: 160%;
122
+ letter-spacing: 0.08em;
123
+ text-transform: uppercase;
124
+ color: #141B38;
125
+ }
126
+ .sb-button-no-border {
127
+ border-radius: 0 !important;
128
+ border: none !important;
129
+ }
130
+ .sb-icon-small svg {
131
+ height: 10px;
132
+ }
133
+ .sb-dark-hover:hover svg, .sb-dark-hover:hover path {
134
+ fill: #141B38;
135
+ }
136
+ /*orange*/
137
+ .sb-btn-orange{
138
+ background: #E34F0E!important;
139
+ color: #fff!important;
140
+ }
141
+ .sb-btn-orange:hover{
142
+ background: #F37036!important;
143
+ border-color: #F37036!important;
144
+ color: #fff!important;
145
+ }
146
+ .sb-btn-orange:focus,
147
+ .sb-btn-orange:active{
148
+ background: #B8400B!important;
149
+ border-color: #B8400B!important;
150
+ color: #fff!important;
151
+ }
152
+
153
+ /*red*/
154
+ .sb-btn-red{
155
+ background: #D72C2C!important;
156
+ color: #fff!important;
157
+ }
158
+ .sb-btn-red:hover{
159
+ background: #DF5757!important;
160
+ color: #fff!important;
161
+ }
162
+ .sb-btn-red:focus,
163
+ .sb-btn-red:active{
164
+ background: #841919!important;
165
+ color: #fff!important;
166
+ }
167
+
168
+ /*red*/
169
+ .sb-btn-blue{
170
+ background: #0068A0!important;
171
+ color: #fff!important;
172
+ }
173
+ .sb-btn-blue:hover{
174
+ background: #0096CC!important;
175
+ border-color: #0096CC!important;
176
+ color: #fff!important;
177
+ }
178
+ .sb-btn-blue:focus,
179
+ .sb-btn-blue:active{
180
+ background: #004D77!important;
181
+ border-color: #004D77!important;
182
+ color: #fff!important;
183
+ }
184
+
185
+ /*grey*/
186
+ .sb-btn-grey{
187
+ background: #F3F4F5!important;
188
+ color: #141B38!important;
189
+ border: 1px solid #D0D1D7!important;
190
+ }
191
+ .sb-btn-grey:hover{
192
+ background: #fff!important;
193
+ color: #141B38!important;
194
+ border: 1px solid #DCDDE1!important;
195
+ }
196
+ .sb-btn-grey:focus,
197
+ .sb-btn-grey:active{
198
+ background: #E8E8EB!important;
199
+ color: #141B38!important;
200
+ border: 1px solid #D0D1D7!important;
201
+ }
202
+
203
+ /*dark*/
204
+ .sb-btn-dark{
205
+ background: #2C324C!important;
206
+ color: #fff!important;
207
+ }
208
+ .sb-btn-dark:hover{
209
+ background: #434960!important;
210
+ color: #fff!important;
211
+ }
212
+ .sb-btn-dark:focus,
213
+ .sb-btn-dark:active{
214
+ background: #141B38!important;
215
+ color: #fff!important;
216
+ }
217
+
218
+ /*orange*/
219
+ .cff-btn-orange{
220
+ background: #E34F0E!important;
221
+ color: #fff!important;
222
+ }
223
+ .cff-btn-orange:hover{
224
+ background: #F37036!important;
225
+ color: #fff!important;
226
+ }
227
+ .cff-btn-orange:focus,
228
+ .cff-btn-orange:active{
229
+ background: #B8400B!important;
230
+ color: #fff!important;
231
+ }
232
+
233
+ /*red*/
234
+ .cff-btn-red{
235
+ background: #D72C2C!important;
236
+ color: #fff!important;
237
+ }
238
+ .cff-btn-red:hover{
239
+ background: #DF5757!important;
240
+ color: #fff!important;
241
+ }
242
+ .cff-btn-red:focus,
243
+ .cff-btn-red:active{
244
+ background: #841919!important;
245
+ color: #fff!important;
246
+ }
247
+
248
+ /*red*/
249
+ .cff-btn-blue{
250
+ background: #0068A0!important;
251
+ color: #fff!important;
252
+ }
253
+ .cff-btn-blue:hover{
254
+ background: #0096CC!important;
255
+ color: #fff!important;
256
+ }
257
+ .cff-btn-blue:focus,
258
+ .cff-btn-blue:active{
259
+ background: #004D77!important;
260
+ color: #fff!important;
261
+ }
262
+
263
+ /*grey*/
264
+ .cff-btn-grey{
265
+ background: #F3F4F5!important;
266
+ color: #141B38!important;
267
+ border: 1px solid #D0D1D7!important;
268
+ }
269
+ .cff-btn-grey:hover{
270
+ background: #fff!important;
271
+ color: #141B38!important;
272
+ border: 1px solid #DCDDE1!important;
273
+ }
274
+ .cff-btn-grey:focus,
275
+ .cff-btn-grey:active{
276
+ background: #E8E8EB!important;
277
+ color: #141B38!important;
278
+ border: 1px solid #D0D1D7!important;
279
+ }
280
+
281
+ /*dark*/
282
+ .cff-btn-dark{
283
+ background: #2C324C!important;
284
+ color: #fff!important;
285
+ }
286
+ .cff-btn-dark:hover{
287
+ background: #434960!important;
288
+ color: #fff!important;
289
+ }
290
+ .cff-btn-dark:focus,
291
+ .cff-btn-dark:active{
292
+ background: #141B38!important;
293
+ color: #fff!important;
294
+ }
295
+
296
+ /*disabled*/
297
+ .sb-btn-orange[data-active="false"],
298
+ .sb-btn-blue[data-active="false"],
299
+ .sb-btn-red[data-active="false"],
300
+ .sb-btn-grey[data-active="false"],
301
+ .sb-btn-dark[data-active="false"]{
302
+ background: #E8E8EB !important;
303
+ color: #8C8F9A !important;
304
+ }
305
+
306
+
307
+ /*
308
+ * Social Colors
309
+ */
310
+
311
+ /*Facebook*/
312
+ .sb-cl-facebook,
313
+ .sb-clhv-facebook:hover{
314
+ color: #006BFA!important;
315
+ }
316
+ .cff-bg-facebook,
317
+ .cff-bghv-facebook:hover{
318
+ background: #006BFA!important;
319
+ }
320
+
321
+ /*Instagram*/
322
+ .sb-cl-instagram,
323
+ .sb-clhv-instagram:hover{
324
+ color: #BA03A7!important;
325
+ }
326
+ .cff-bg-instagram,
327
+ .cff-bghv-instagram:hover{
328
+ background: #BA03A7!important;
329
+ }
330
+
331
+ /*Twitter*/
332
+ .sb-cl-twitter,
333
+ .sb-clhv-twitter:hover{
334
+ color: #1B90EF!important;
335
+ }
336
+ .cff-bg-twitter,
337
+ .cff-bghv-twitter:hover{
338
+ background: #1B90EF!important;
339
+ }
340
+
341
+ /*YouTube*/
342
+ .sb-cl-youtube,
343
+ .sb-clhv-youtube:hover{
344
+ color: #EB2121!important;
345
+ }
346
+ .cff-bg-youtube,
347
+ .cff-bghv-youtube:hover{
348
+ background: #EB2121!important;
349
+ }
350
+
351
+ /*Linkedin*/
352
+ .sb-cl-linkedin,
353
+ .sb-clhv-linkedin:hover{
354
+ color: #007bb6!important;
355
+ }
356
+ .cff-bg-linkedin,
357
+ .cff-bghv-linkedin:hover{
358
+ background: #007bb6!important;
359
+ }
360
+
361
+ /*Mail*/
362
+ .sb-cl-mail,
363
+ .sb-clhv-mail:hover{
364
+ color: #666!important;
365
+ }
366
+ .cff-bg-mail,
367
+ .cff-bghv-mail:hover{
368
+ background: #666!important;
369
+ }
370
+
371
+ .sb-cursor-pointer{
372
+ cursor: pointer;
373
+ }
374
+
375
+ /*Buttons*/
376
+ .sb-btn{
377
+ display: flex;
378
+ flex-direction: row;
379
+ justify-content: center;
380
+ align-items: center;
381
+ padding: 9px 38px;
382
+ font-style: normal;
383
+ font-weight: 500;
384
+ font-size: 14px;
385
+ line-height: 17px;
386
+ border-radius: 2px;
387
+ cursor: pointer;
388
+ color: #fff;
389
+ outline: none;
390
+ box-shadow: none;
391
+ border: none;;
392
+ }
393
+ .sb-btn:focus{
394
+ box-shadow: none;
395
+ }
396
+
397
+ .cff-small-chevron svg{
398
+ width: 6px;
399
+ height: 8px;
400
+ top: 14px;
401
+ left: 18px;
402
+ }
403
+
404
+ /*Add Source*/
405
+ /*
406
+ Add new Source Popup
407
+ */
408
+ .cff-fb-popup-cls{
409
+ height: 14px;
410
+ width: 14px;
411
+ position: absolute;
412
+ cursor: pointer;
413
+ right: 17px;
414
+ top: 17px;
415
+ z-index: 3;
416
+ }
417
+ .cff-fb-center-boss{
418
+ display: flex;
419
+ justify-content: center;
420
+ align-items: center;
421
+ }
422
+ .cff-fb-popup-inside{
423
+ left: 80px;
424
+ width: 880px;
425
+ max-width: calc(100% - 200px);
426
+ background: #fff;
427
+ color: #141B38;
428
+ position: relative;
429
+ box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
430
+ border-radius: 2px;
431
+ overflow-y: auto;
432
+ max-height: 80vh;
433
+ }
434
+ .cff-fb-popup-inside.sb-onboarding-tooltip {
435
+ overflow-y: visible !important;
436
+ }
437
+ @media all and (max-width: 960px) {
438
+ .cff-fb-popup-inside {
439
+