Ticket #21206: iris-picker-10.diff
| File iris-picker-10.diff, 45.8 KB (added by , 13 years ago) |
|---|
-
wp-includes/class-wp-customize-control.php
351 351 * @since 3.4.0 352 352 */ 353 353 public function enqueue() { 354 wp_enqueue_script( ' farbtastic' );355 wp_enqueue_style( ' farbtastic' );354 wp_enqueue_script( 'wp-color-picker' ); 355 wp_enqueue_style( 'wp-color-picker' ); 356 356 } 357 357 358 358 /** … … 372 372 * @since 3.4.0 373 373 */ 374 374 public function render_content() { 375 $this_default = $this->setting->default; 376 $default_attr = ''; 377 if ( ! empty( $this_default ) ) { 378 if ( strpos( $this_default, '#' ) === false ) 379 $this_default = '#' . $this_default; 380 $default_attr = 'data-default-color="' . esc_attr( $this_default ) . '" '; 381 } 382 // The input's value gets set by JS. Don't fill it. 375 383 ?> 376 384 <label> 377 385 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> 378 386 <div class="customize-control-content"> 379 <div class="dropdown"> 380 <div class="dropdown-content"> 381 <div class="dropdown-status"></div> 382 </div> 383 <div class="dropdown-arrow"></div> 384 </div> 385 <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e('Hex Value'); ?>" /> 387 <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e('Hex Value'); ?>" <?php echo $default_attr ?>/> 386 388 </div> 387 <div class="farbtastic-placeholder"></div>388 389 </label> 389 390 <?php 390 391 } -
wp-includes/script-loader.php
419 419 420 420 $scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' ); 421 421 422 $iris_deps = array( 'jquery-ui-draggable', 'jquery-ui-slider' ); 423 if ( wp_is_mobile() ) 424 $iris_deps[] = 'touch-punch'; 425 $scripts->add( 'iris', '/wp-admin/js/iris.min.js', $iris_deps, false, 1 ); 426 427 $scripts->add( 'wp-color-picker', "/wp-admin/js/wp-color-picker$suffix.js", array( 'iris' ), false, 1 ); 428 did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array( 429 'clear' => __( 'Clear' ), 430 'defaultString' => __( 'Default' ), 431 'pick' => __( 'Select Color' ), 432 'current' => __( 'Current Color' ) 433 )); 434 422 435 $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 ); 423 436 424 437 $scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" ); … … 446 459 'saveAlert' => __('The changes you made will be lost if you navigate away from this page.') 447 460 ) ); 448 461 449 $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array(' farbtastic'), false, 1 );462 $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('wp-color-picker'), false, 1 ); 450 463 $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 ); 451 464 } 452 465 } … … 499 512 $styles->add( 'install', "/wp-admin/css/install$suffix.css" ); 500 513 $styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css' ); 501 514 $styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.3u1' ); 515 $styles->add( 'wp-color-picker', '/wp-admin/css/wp-color-picker.css' ); 502 516 $styles->add( 'jcrop', "/wp-includes/js/jcrop/jquery.Jcrop.min.css", array(), '0.9.10' ); 503 517 $styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.8' ); 504 518 $styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css" ); -
wp-content/themes/twentyeleven/inc/theme-options.php
17 17 */ 18 18 function twentyeleven_admin_enqueue_scripts( $hook_suffix ) { 19 19 wp_enqueue_style( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.css', false, '2011-04-28' ); 20 wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( ' farbtastic' ), '2011-06-10' );21 wp_enqueue_style( 'farbtastic' ); 20 wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'wp-color-picker' ), '2011-06-10' ); 21 wp_enqueue_style( 'wp-color-picker' ); 22 22 } 23 23 add_action( 'admin_print_styles-appearance_page_theme_options', 'twentyeleven_admin_enqueue_scripts' ); 24 24 … … 268 268 function twentyeleven_settings_field_link_color() { 269 269 $options = twentyeleven_get_theme_options(); 270 270 ?> 271 <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" /> 272 <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a> 273 <input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" /> 274 <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div> 275 <br /> 276 <span><?php printf( __( 'Default color: %s', 'twentyeleven' ), '<span id="default-color">' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '</span>' ); ?></span> 271 <?php $default_color = 'data-default-color="' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '"'; ?> 272 <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" <?php echo $default_color ?>/> 277 273 <?php 278 274 } 279 275 -
wp-content/themes/twentyeleven/inc/theme-options.js
1 var farbtastic;2 3 1 (function($){ 4 var pickColor = function(a) {5 farbtastic.setColor(a);6 $('#link-color').val(a);7 $('#link-color-example').css('background-color', a);8 };9 10 2 $(document).ready( function() { 11 $('#default-color').wrapInner('<a href="#" />'); 12 13 farbtastic = $.farbtastic('#colorPickerDiv', pickColor); 14 15 pickColor( $('#link-color').val() ); 16 17 $('.pickcolor').click( function(e) { 18 $('#colorPickerDiv').show(); 19 e.preventDefault(); 20 }); 21 22 $('#link-color').keyup( function() { 23 var a = $('#link-color').val(), 24 b = a; 25 26 a = a.replace(/[^a-fA-F0-9]/, ''); 27 if ( '#' + a !== b ) 28 $('#link-color').val(a); 29 if ( a.length === 3 || a.length === 6 ) 30 pickColor( '#' + a ); 31 }); 32 33 $(document).mousedown( function() { 34 $('#colorPickerDiv').hide(); 35 }); 36 37 $('#default-color a').click( function(e) { 38 pickColor( '#' + this.innerHTML.replace(/[^a-fA-F0-9]/, '') ); 39 e.preventDefault(); 40 }); 41 3 $('#link-color').wpColorPicker(); 42 4 $('.image-radio-option.color-scheme input:radio').change( function() { 43 var currentDefault = $('# default-color a'),5 var currentDefault = $('#link-color').attr('data-default-color'), 44 6 newDefault = $(this).next().val(); 45 46 if ( $('#link-color').val() == currentDefault.text() ) 47 pickColor( newDefault ); 48 49 currentDefault.text( newDefault ); 7 8 if ( $('#link-color').val() == currentDefault.toString() ) 9 $("#link-color").iris("option", "color", newDefault ) 50 10 }); 51 11 }); 52 12 })(jQuery); 13 No newline at end of file -
wp-admin/js/wp-color-picker.js
1 ( function( $, undef ){ 2 3 // html stuff 4 var _before = '<a tabindex="0" class="wp-color-result" />'; 5 var _after = '<div class="wp-picker-holder" />'; 6 var _wrap = '<div class="wp-picker-container" />'; 7 var _button = '<input type="button" class="button button-tiny hidden" />'; 8 9 // jQuery UI Widget constructor 10 var ColorPicker = { 11 options: { 12 defaultColor: false, 13 change: false, 14 clear: false, 15 hide: true 16 }, 17 _create: function() { 18 // bail early for IE < 8 19 if ( $.browser.msie && parseInt( $.browser.version, 10 ) < 8 ) 20 return; 21 var self = this; 22 var el = self.element; 23 $.extend( self.options, el.data() ); 24 25 self.initialValue = el.val(); 26 27 // Set up HTML structure, hide things 28 el.addClass( 'wp-color-picker' ).hide().wrap( _wrap ); 29 self.wrap = el.parent(); 30 self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( "title", wpColorPickerL10n.pick ).attr( "data-current", wpColorPickerL10n.current ); 31 self.pickerContainer = $( _after ).insertAfter( el ); 32 self.button = $( _button ); 33 34 if ( self.options.defaultColor ) 35 self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString ); 36 else 37 self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear ); 38 39 self.button.insertAfter( el ); 40 41 el.iris( { 42 target: self.pickerContainer, 43 hide: true, 44 change: function( event, ui ) { 45 self.toggler.css( { backgroundColor: ui.color.toString() } ); 46 // check for a custom cb 47 if ( $.isFunction( self.options.change ) ) 48 self.options.change.call( this, event, ui ); 49 } 50 } ); 51 el.val( self.initialValue ); 52 self._addListeners(); 53 if ( ! self.options.hide ) 54 self.toggler.click(); 55 }, 56 _addListeners: function() { 57 var self = this; 58 59 self.toggler.click( function( event ){ 60 event.stopPropagation(); 61 self.element.toggle().iris( 'toggle' ); 62 self.button.toggleClass('hidden'); 63 self.toggler.toggleClass( 'wp-picker-open' ); 64 65 // close picker when you click outside it 66 if ( self.toggler.hasClass( 'wp-picker-open' ) ) 67 $( "body" ).on( 'click', { wrap: self.wrap, toggler: self.toggler }, self._bodyListener ); 68 else 69 $( "body" ).off( 'click', self._bodyListener ); 70 }); 71 72 self.element.change(function( event ) { 73 var me = $(this), 74 val = me.val(); 75 // Empty = clear 76 if ( val === '' || val === '#' ) { 77 self.toggler.css('backgroundColor', ''); 78 // fire clear callback if we have one 79 if ( $.isFunction( self.options.clear ) ) 80 self.options.clear.call( this, event ); 81 } 82 }); 83 84 // open a keyboard-focused closed picker with space or enter 85 $( document ).keydown( function( e ) { 86 if ( self.toggler.is( ':focus' ) && ( e.keyCode === 13 || e.keyCode === 32 ) ) { 87 e.preventDefault(); 88 self.toggler.trigger('click').next().focus(); 89 } 90 }); 91 92 self.button.click( function( event ) { 93 var me = $(this); 94 if ( me.hasClass( 'wp-picker-clear' ) ) { 95 self.element.val( '' ); 96 self.toggler.css('backgroundColor', ''); 97 if ( $.isFunction( self.options.clear ) ) 98 self.options.clear.call( this, event ); 99 } else if ( me.hasClass( 'wp-picker-default' ) ) { 100 self.element.val( self.options.defaultColor ).change(); 101 } 102 }); 103 }, 104 _bodyListener: function( event ) { 105 if ( ! event.data.wrap.find( event.target ).length ) 106 event.data.toggler.click(); 107 }, 108 // $("#input").wpColorPicker('color') returns the current color 109 // $("#input").wpColorPicker('color', '#bada55') to set 110 color: function( newColor ) { 111 if ( newColor === undef ) 112 return this.element.iris( "option", "color" ); 113 114 this.element.iris( "option", "color", newColor ); 115 } 116 } 117 118 $.widget( 'wp.wpColorPicker', ColorPicker ); 119 }( jQuery ) ); 120 No newline at end of file -
wp-admin/js/custom-background.js
1 var farbtastic, pickColor;2 3 1 (function($) { 4 2 5 var defaultColor = '';6 7 pickColor = function(color) {8 farbtastic.setColor(color);9 $('#background-color').val(color);10 $('#custom-background-image').css('background-color', color);11 // If we have a default color, and they match, then we need to hide the 'Default' link.12 // Otherwise, we hide the 'Clear' link when it is empty.13 if ( ( defaultColor && color === defaultColor ) || ( ! defaultColor && ( '' === color || '#' === color ) ) )14 $('#clearcolor').hide();15 else16 $('#clearcolor').show();17 }18 19 3 $(document).ready(function() { 4 var bgImage = $("#custom-background-image"); 20 5 21 defaultColor = $('#defaultcolor').val(); 22 23 $('#pickcolor').click(function() { 24 $('#colorPickerDiv').show(); 25 return false; 6 $('#background-color').wpColorPicker({ 7 change: function( event, ui ) { 8 bgImage.css('background-color', ui.color.toString()); 9 }, 10 clear: function() { 11 bgImage.css('background-color', ''); 12 } 26 13 }); 27 14 28 $('#clearcolor a').click( function(e) {29 pickColor( defaultColor );30 e.preventDefault();31 });32 33 $('#background-color').keyup(function() {34 var _hex = $('#background-color').val(), hex = _hex;35 if ( hex.charAt(0) != '#' )36 hex = '#' + hex;37 hex = hex.replace(/[^#a-fA-F0-9]+/, '');38 if ( hex != _hex )39 $('#background-color').val(hex);40 if ( hex.length == 4 || hex.length == 7 )41 pickColor( hex );42 });43 44 15 $('input[name="background-position-x"]').change(function() { 45 $('#custom-background-image').css('background-position', $(this).val() + ' top');16 bgImage.css('background-position', $(this).val() + ' top'); 46 17 }); 47 18 48 19 $('input[name="background-repeat"]').change(function() { 49 $('#custom-background-image').css('background-repeat', $(this).val());20 bgImage.css('background-repeat', $(this).val()); 50 21 }); 51 52 farbtastic = $.farbtastic('#colorPickerDiv', function(color) {53 pickColor(color);54 });55 pickColor($('#background-color').val());56 57 $(document).mousedown(function(){58 $('#colorPickerDiv').each(function(){59 var display = $(this).css('display');60 if ( display == 'block' )61 $(this).fadeOut(2);62 });63 });64 22 }); 65 23 66 24 })(jQuery); 67 No newline at end of file -
wp-admin/js/customize-controls.js
109 109 api.ColorControl = api.Control.extend({ 110 110 ready: function() { 111 111 var control = this, 112 rhex, spot, input, text, update;112 picker = this.container.find('.color-picker-hex'); 113 113 114 rhex = /^#([A-Fa-f0-9]{3}){0,2}$/; 115 spot = this.container.find('.dropdown-content'); 116 input = new api.Element( this.container.find('.color-picker-hex') ); 117 update = function( color ) { 118 spot.css( 'background', color ); 119 control.farbtastic.setColor( color ); 120 }; 121 122 this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), control.setting.set ); 123 124 // Only pass through values that are valid hexes/empty. 125 input.sync( this.setting ).validate = function( to ) { 126 return rhex.test( to ) ? to : null; 127 }; 128 129 this.setting.bind( update ); 130 update( this.setting() ); 131 132 this.dropdownInit(); 114 picker.val( control.setting() ).wpColorPicker({ 115 change: function( event, options ) { 116 control.setting.set( picker.wpColorPicker('color') ); 117 }, 118 clear: function() { 119 control.setting.set( false ); 120 } 121 }); 133 122 } 134 123 }); 135 124 -
wp-admin/js/iris.min.js
1 /*! Iris - v0.9.7 - 2012-09-26 2 * https://github.com/Automattic/Iris 3 * Copyright (c) 2012 Matt Wiebe; Licensed GPL */ 4 (function(a,b){function h(){if(d)e="filter";else{var b=a('<div id="iris-gradtest" />'),c="linear-gradient(top,#fff,#000)";a.each(f,function(a,d){b.css("backgroundImage",d+c);if(b.css("backgroundImage").match("gradient"))return e=a,!1}),a.browser.webkit&&e===!1&&(b.css("background","-webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#000))"),b.css("backgroundImage").match("gradient")&&(e="webkit")),b.remove()}}function i(b,c){return b=b==="top"?"top":"left",c=a.isArray(c)?c:Array.prototype.slice.call(arguments,1),e==="webkit"?k(b,c):f[e]+"linear-gradient("+b+", "+c.join(", ")+")"}function j(b,c){b=b==="top"?"top":"left",c=a.isArray(c)?c:Array.prototype.slice.call(arguments,1);var d=b==="top"?0:1,e=a(this),f=c.length-1,g=parseInt(a.browser.version,10)>=8?"-ms-filter":"filter";g="filter";var h=d===1?"left":"top",i=d===1?"right":"bottom",j=d===1?"height":"width",k='<div class="iris-ie-gradient-shim" style="position:absolute;'+j+":100%;"+h+":%start%;"+i+":%end%;"+g+':%filter%;" data-color:"%color%"></div>',m="";e.css("position")==="static"&&e.css({position:"relative"}),c=l(c),a.each(c,function(a,b){if(a===f)return!1;var e=c[a+1];if(b.stop===e.stop)return;var g=100-parseFloat(e.stop)+"%";b.octoHex=(new Color(b.color)).toIEOctoHex(),e.octoHex=(new Color(e.color)).toIEOctoHex();var h="progid:DXImageTransform.Microsoft.Gradient(GradientType="+d+", StartColorStr='"+b.octoHex+"', EndColorStr='"+e.octoHex+"')";m+=k.replace("%start%",b.stop).replace("%end%",g).replace("%filter%",h)}),e.find(".iris-ie-gradient-shim").remove(),a(m).prependTo(e)}function k(b,c){var d=[];return b=b==="top"?"0% 0%,0% 100%,":"0% 100%,100% 100%,",c=l(c),a.each(c,function(a,b){d.push("color-stop("+parseFloat(b.stop)/100+", "+b.color+")")}),"-webkit-gradient(linear,"+b+d.join(",")+")"}function l(b){var c=[],d=[],e=[],f=b.length-1;return a.each(b,function(a,b){var e=b,f=!1,g=b.match(/1?[0-9]{1,2}%$/);g&&(e=b.replace(/\s?1?[0-9]{1,2}%$/,""),f=g.shift()),c.push(e),d.push(f)}),d[0]===!1&&(d[0]="0%"),d[f]===!1&&(d[f]="100%"),d=m(d),a.each(d,function(a){e[a]={color:c[a],stop:d[a]}}),e}function m(b){var c=0,d=b.length-1,e=0,f=!1,g,h,i,j;if(b.length<=2||a.inArray(!1,b)<0)return b;while(e<b.length-1)!f&&b[e]===!1?(c=e-1,f=!0):f&&b[e]!==!1&&(d=e,e=b.length),e++;h=d-c,j=parseInt(b[c].replace("%"),10),g=(parseFloat(b[d].replace("%"))-j)/h,e=c+1,i=1;while(e<d)b[e]=j+i*g+"%",i++,e++;return m(b)}var c='<div class="iris-picker"><div class="iris-picker-inner"><div class="iris-square"><a class="iris-square-value" href="#"><span class="iris-square-handle ui-slider-handle"></span></a><div class="iris-square-slider iris-horiz-slider"></div><div class="iris-square-slider iris-vert-slider"></div><div class="iris-square-inner iris-square-horiz"></div><div class="iris-square-inner iris-square-vert"></div></div><div class="iris-slider iris-strip"><div class="iris-slider-offset"></div></div></div></div>',d=!!(a.browser.msie&&parseInt(a.browser.version,10)<10),e=!1,f=["-moz-","-webkit-","-o-","-ms-"],g='.iris-picker{display:block;position:relative}.iris-error{background-color:#ffafaf}.iris-border{border-radius:3px;border:1px solid #aaa;width:200px;background-color:#fff}.iris-picker-inner{position:absolute;top:0;right:0;left:0;bottom:0}.iris-border .iris-picker-inner{top:10px;right:10px;left:10px;bottom:10px}.iris-picker .iris-square-inner{position:absolute;left:0;right:0;top:0;bottom:0}.iris-picker .iris-square,.iris-picker .iris-slider,.iris-picker .iris-square-inner{border-radius:3px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.4);box-shadow:inset 0 0 5px rgba(0,0,0,0.4);height:100%;width:12.5%;float:left;margin-right:5%}.iris-picker .iris-square{width:76%;margin-right:10%;position:relative}.iris-picker .iris-square-inner{width:auto;margin:0}.iris-picker .iris-square .sat,.iris-ie-9 .iris-square,.iris-ie-9 .iris-slider,.iris-ie-9 .iris-square-inner{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-radius:0}.iris-picker .iris-square .sat{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.iris-ie-lt9 .iris-square,.iris-ie-lt9 .iris-slider,.iris-ie-lt9 .iris-square-inner{outline:1px solid #aaa}.iris-ie-lt9 .iris-square .ui-slider-handle{outline:1px solid #aaa;background-color:#fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"}.iris-ie-lt9 .iris-square .iris-square-handle{background:none;border:3px solid #fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}.iris-picker .iris-strip{margin-right:0}.iris-picker .iris-tooltip{position:absolute;z-index:10;font:10px/1 sans-serif;color:#222;background:#fff;border:1px solid #666;padding:3px 6px;border-radius:3px;opacity:.94;white-space:nowrap;top:-36px;left:-12px}.iris-picker .iris-tooltip:before,.iris-picker .iris-tooltip:after{content:" ";width:0;height:0;border-style:solid;border-width:6px 6px 0 6px;border-color:#666 transparent transparent transparent;position:absolute;bottom:-6px;left:6px}.iris-picker .iris-tooltip:after{bottom:-5px;border-top-color:#fff}.iris-picker .iris-strip .ui-slider-handle{position:absolute;width:100%;height:12px;background:none;border-radius:0;box-shadow:none;opacity:1;z-index:5}.iris-strip .ui-slider-handle:before,.iris-strip .ui-slider-handle:after{content:" ";width:0;height:0;border-style:solid;border-width:6px 7px 6px 0;border-color:transparent #555 transparent transparent;position:absolute;right:-4px}.iris-strip .ui-slider-handle:after{border-width:6px 0 6px 7px;border-color:transparent transparent transparent #555;right:auto;left:-4px}.iris-picker .iris-slider-offset{width:100%;height:100%;position:relative;bottom:-6px}.iris-square .iris-horiz-slider{position:absolute;top:-7px;left:-7px;height:1px;width:100%}.iris-square .iris-vert-slider{position:absolute;right:6px;top:7px;width:1px;height:100%}.iris-square .iris-square-slider a{opacity:.3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";-moz-transition:opacity 300ms;-webkit-transition:opacity 300ms;transition:opacity 300ms}.iris-square .iris-square-slider .ui-slider-handle.active{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}.iris-dragging .iris-square-slider .ui-slider-handle.active{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}.iris-picker .ui-slider-handle{background:#f5f5f5;-webkit-border-radius:10px;-moz-border-radius:50%;border-radius:50%;box-shadow:inset #fff 0 1px 1px,inset 0 -1px 1px rgba( 0,0,0,0.4 ),0px 1px 4px 0 rgba( 0,0,0,0.2 ),0 0 2px rgba( 0,0,0,0.3 );display:block;opacity:0.7;position:absolute;z-index:5;height:20px;width:20px;cursor:default;cursor:ns-resize;z-index:5}.iris-horiz-slider .ui-slider-handle{cursor:ew-resize}.iris-square-slider .ui-slider-handle{width:14px;height:14px;opacity:1;background-color:#eee}.iris-picker .iris-square-handle{background:transparent;border:5px solid #aaa;border-color:rgba(128,128,128,.5);box-shadow:none;width:12px;height:12px;position:absolute;left:-10px;top:-10px;cursor:move;opacity:1;z-index:10}.iris-picker .ui-state-focus .iris-square-handle{opacity:.8}.iris-picker .iris-square-handle:hover{border-color:#999}.iris-picker .iris-square-handle:hover::after{border-color:#fff}.iris-picker .iris-square-handle::after{position:absolute;bottom:-4px;right:-4px;left:-4px;top:-4px;border:3px solid #f9f9f9;border-color:rgba(255,255,255,.8);border-radius:50%;content:" "}.iris-picker .iris-square-value{width:8px;height:8px;position:absolute}.iris-ie-lt9 .iris-square-value,.iris-mozilla .iris-square-value{width:1px;height:1px}';if(d&&parseInt(a.browser.version,10)<=7)return a.fn.iris=a.noop;a.fn.gradient=function(b){var c=arguments;return this.each(function(){d?j.apply(this,c):a(this).css("backgroundImage",i.apply(this,c))})},a.fn.LSSquare=function(c){return c=c|0,this.each(function(){var d=a(this),e=d.data("hue")!==b;e||(d.append('<div class="sat iris-square-inner" /><div class="lum iris-square-inner" />'),d.css("position","relative"),d.children(".iris-square-inner").css({position:"absolute",top:0,left:0,bottom:0,right:0}));var f=d.find(".lum"),g=d.find(".sat");e||f.gradient("top","#fff","rgba(255,255,255,0) 50%","rgba(0,0,0,0) 50%","rgba(0,0,0,1)"),g.gradient("left","hsl("+c+",0%,50%)","hsl("+c+",100%,50%)"),d.data("hue",c)})},a.fn.raninbowGradient=function(b,c){b=b||"top";var d=a.extend({},{s:100,l:50},c),e="hsl(%h%,"+d.s+"%,"+d.l+"%)",f=0,g=[];while(f<=360)g.push(e.replace("%h%",f)),f+=30;return this.each(function(){a(this).gradient(b,g)})};var n={options:{color:!1,controls:{horiz:"s",vert:"l",strip:"h"},hide:!0,border:!0,target:!1,width:200,tooltip:!1},_inited:!1,_scale:{h:359,s:100,l:100},_create:function(){var b=this,d=b.element,f=b.options.color||d.val(),g;e===!1&&h(),d.is("input")?(b.options.target?b.picker=a(c).appendTo(b.options.target):b.picker=a(c).insertAfter(d),b._addInputListeners(d)):(d.append(c),b.picker=d.find(".iris-picker"));if(a.browser.mozilla)b.picker.addClass("iris-mozilla");else if(a.browser.msie){var i=parseInt(a.browser.version,10);i===9?b.picker.addClass("iris-ie-9"):i<=8&&b.picker.addClass("iris-ie-lt9")}b.color=new Color(f),b.options.color=b.color.toString(),b.initError=b.color.error,b.controls={square:b.picker.find(".iris-square"),horiz:b.picker.find(".iris-square-horiz"),vert:b.picker.find(".iris-square-vert"),strip:b.picker.find(".iris.strip")},g=b.hue=b.color.h(),b.options.hide&&b.picker.hide(),b.options.border&&b.picker.addClass("iris-border"),b._paint(),b.initError&&b.color.s(50).l(50),b._initControls(),b.active="external",b._dimensions(),b._change(),b.options.tooltip&&b._addTooltip()},_paint:function(){var a=this;a._paintDimension("top","strip"),a._paintDimension("top","vert"),a._paintDimension("left","horiz")},_paintDimension:function(a,b){var c=this,d=c.color.toHsl(),e={strip:".iris-strip",vert:".iris-square-vert",horiz:".iris-square-horiz"},f=c.picker.find(e[b]),g;switch(c.options.controls[b]){case"h":b==="strip"?f.raninbowGradient(a,{s:d.s,l:d.l}):f.raninbowGradient(a,{s:100,l:d.l});break;case"s":b==="vert"&&c.options.controls.horiz==="h"?g=["hsla(0, 0%, "+d.l+"%, 0)","hsla(0, 0%, "+d.l+"%, 1)"]:g=["hsl("+d.h+",0%,50%)","hsl("+d.h+",100%,50%)"],f.gradient(a,g);break;case"l":b==="strip"?g=["hsl("+d.h+",100%,0%)","hsl("+d.h+", "+d.s+"%,50%)","hsl("+d.h+",100%,100%)"]:g=["#fff","rgba(255,255,255,0) 50%","rgba(0,0,0,0) 50%","rgba(0,0,0,1)"],f.gradient(a,g);break;default:}},_dimensions:function(a){var b=this.picker.find(".iris-picker-inner"),c=this.controls,d=c.square,e=this.picker.find(".iris-strip"),f="77.5%",g="12%",h=20,i=this.options.border?this.options.width-h:this.options.width,j;a&&(d.css("width",""),e.css("width",""),this.picker.removeAttr("style")),f=i*(parseFloat(f)/100),g=i*(parseFloat(g)/100),j=this.options.border?f+h:f,d.width(f).height(f),e.height(f).width(g),this.picker.css({width:this.options.width,height:j})},_addInputListeners:function(a){var b=this;a.on("change",function(c){var d=new Color(a.val()),e=a.val().replace(/^#/,"");a.removeClass("iris-error"),d.error?e!==""&&a.addClass("iris-error"):b._setOption("color",d.toString())})},_initControls:function(){var b=this,c=b.controls.square,d=b.color.h(),e=b.options.controls,f=b._scale[e.strip];b.picker.find(".iris-strip .iris-slider-offset").slider({orientation:"vertical",max:f,min:0,value:f-d,slide:function(a,c){b.active="strip",c.value=f-c.value,b.color[e.strip](c.value),b._change.apply(b,arguments)}}),b.controls.squareDrag=b.picker.find(".iris-square-value").draggable({containment:"parent",zIndex:1e3,cursor:"move",drag:function(a,c){b._squareDrag(a,c)},start:function(){c.addClass("iris-dragging"),a(this).addClass("ui-state-focus")},stop:function(){c.removeClass("iris-dragging"),a(this).removeClass("ui-state-focus")}}).on("mousedown mouseup",function(c){c.preventDefault();var d="ui-state-focus";c.type==="mousedown"?(b.picker.find("."+d).removeClass(d).blur(),a(this).addClass(d)):a(this).removeClass("ui-state-focus")}),c.mousedown(function(c){if(c.which!==1)return;if(!a(c.target).is("div"))return;var d=b.controls.square.offset(),e={top:c.pageY-d.top,left:c.pageX-d.left};c.preventDefault(),b._squareDrag(c,{position:e}),c.target=b.controls.squareDrag.get(0),b.controls.squareDrag.css(e).trigger(c)}),c.find(".iris-horiz-slider").slider({max:b._scale[e.horiz],min:0,slide:function(a,c){b.color[e.horiz](c.value),b.active="horiz",b._change.apply(b,arguments)}}),c.find(".iris-vert-slider").slider({max:b._scale[e.vert],min:0,orientation:"vertical",slide:function(a,c){b.color[e.vert](c.value),b.active="vert",b._change.apply(b,arguments)}}),b.controls.square.mousemove(function(c){var d=a(this),e=d.offset(),f=c.pageX-e.left,g=c.pageY-e.top,h=d.find(".iris-horiz-slider .ui-slider-handle"),i=d.find(".iris-vert-slider .ui-slider-handle");f>b.controls.square.width()-20?i.addClass("active"):i.removeClass("active"),g<20?h.addClass("active"):h.removeClass("active")}),b.controls.square.mouseleave(function(){a(this).find(".iris-square-slider .ui-slider-handle").removeClass("active")})},_squareDrag:function(a,b){var c=this,d=c.options.controls,e=c._squareDimensions(),f=Math.round((e.h-b.position.top)/e.h*c._scale[d.vert]),g=c._scale[d.horiz]-Math.round((e.w-b.position.left)/e.w*c._scale[d.horiz]);c.color[d.horiz](g)[d.vert](f),c.active="square",c._change.apply(c,arguments)},_setOption:function(a,b){var c=this.options[a];if(a==="color"){b=""+b;var d=b.replace(/^#/,""),e=new Color(b);e.error||(this.color=e,this.options.color=this.color.toString(),this.active="external",this._change(),this.options[a]=this.color.toString())}},_squareDimensions:function(a){var c=this.controls.square,d,e;return a!==b&&c.data("dimensions")?c.data("dimensions"):(e=this.controls.squareDrag,d={w:c.width(),h:c.height()},c.data("dimensions",d),d)},_change:function(b,c){var d=this,e=d.controls,f=d.color.toHsl(),g=d.color.toString(),h=["vert","horiz","strip","square"],i=d.options.controls,j=i[d.active]||"external";d.active==="strip"&&(h=[]),j==="external"||j==="h"?this.hue=f.h:f.h!==this.hue&&(f.h=this.hue,d.color.h(this.hue)),g=d.color.toString(),a.each(h,function(a,b){if(b!==d.active)switch(b){case"strip":e.strip.slider("value",d._scale[j]-f[j]);break;case"vert":d.active!=="horiz"&&e.square.find(".iris-vert-slider").slider("value",f[i.vert]);break;case"horiz":d.active!=="vert"&&e.square.find(".iris-horiz-slider").slider("value",f[i.horiz]);break;case"square":var c=d._squareDimensions(),g={left:f[i.horiz]/d._scale[i.horiz]*c.w,top:c.h-f[i.vert]/d._scale[i.vert]*c.h};d.active==="horiz"?delete g.top:d.active==="vert"&&delete g.left,d.controls.squareDrag.css(g)}}),this.options.color=this.color.toString(),this._inited?this._trigger("change",{type:this.active},{color:this.color}):this.initError&&(this.color.error=!0,this.options.color=this.color.toString()),this.element.is(":input")&&!d.color.error&&this.element.val(g).removeClass("iris-error"),this._inited=!0,this.active=!1,this._paint()},_addTooltip:function(){var b=this;a("<span class='iris-tooltip' />").text(b.options.tooltip).appendTo(b.controls.squareDrag),b.controls.square.on("mousedown.iris",b,function(a){a.which===1&&b.controls.square.off("mousedown.iris").find(".iris-tooltip").remove()})},show:function(){this.picker.show()},hide:function(){this.picker.hide()},toggle:function(){this.picker.toggle()}};a.widget("a8c.iris",n),a('<style id="iris-css">'+g+"</style>").appendTo("head")})(jQuery),function(a,b){var c=function(a,b){return this instanceof c?this._init(a,b):new c(a,b)};c.prototype={_color:0,_alpha:1,error:!1,__hsl:{h:0,s:0,l:0},_init:function(a){var c="noop";switch(typeof a){case"object":return this._alpha=a.a||1,c=a.r!==b?"fromRgb":a.l!==b?"fromHsl":c,this[c](a);case"string":return this.fromCSS(a);case"number":return this.fromInt(parseInt(a,10))}return this},noop:function(){return this},fromCSS:function(a){var b,c;return this.error=!1,a.match(/^(rgb|hsl)a?/)?(c=a.replace(/(\s|%)/g,"").replace(/^(rgb|hsl)a?\(/,"").replace(/\);?$/,"").split(","),c.length===4&&(this._alpha=parseFloat(c.pop())),a.match(/^rgb/)?this.fromRgb({r:parseInt(c[0],10),g:parseInt(c[1],10),b:parseInt(c[2],10)}):this.fromHsl({h:parseInt(c[0],10),s:parseInt(c[1],10),l:parseInt(c[2],10)})):this.fromHex(a)},fromRgb:function(a,c){return typeof a!="object"||a.r===b||a.g===b||a.b===b?(this.error=!0,this):(this.error=!1,this.fromInt(parseInt((a.r<<16)+(a.g<<8)+a.b,10),c))},fromHex:function(a){return a=a.replace(/^#/,"").replace(/^0x/,""),a.length===3&&(a=a[0]+a[0]+a[1]+a[1]+a[2]+a[2]),this.error=!/^[0-9A-F]{6}$/i.test(a),this.fromInt(parseInt(a,16))},fromHsl:function(a){if(typeof a!="object"||a.h===b||a.s===b||a.l===b)return this.error=!0,this;var c,d,e,f,g,h,i,j;return this.__hsl=a,h=a.h/360,i=a.s/100,j=a.l/100,i===0?c=d=e=j:(f=j<.5?j*(1+i):j+i-j*i,g=2*j-f,c=this.hue2rgb(g,f,h+1/3),d=this.hue2rgb(g,f,h),e=this.hue2rgb(g,f,h-1/3)),this.fromRgb({r:c*255,g:d*255,b:e*255},!0)},fromInt:function(a,c){return this._color=parseInt(a,10),isNaN(this._color)&&(this._color=0),this._color>16777215?this._color=16777215:this._color<0&&(this._color=0),c===b&&(this.__hsl.h=this.__hsl.s=0),this},hue2rgb:function(a,b,c){return c<0&&(c+=1),c>1&&(c-=1),c<1/6?a+(b-a)*6*c:c<.5?b:c<2/3?a+(b-a)*(2/3-c)*6:a},toString:function(){var a=parseInt(this._color,10).toString(16);if(this.error)return"";if(a.length<6)for(var b=6-a.length-1;b>=0;b--)a="0"+a;return"#"+a},toCSS:function(a,b){a=a||"hex",b=parseFloat(b||this._alpha);switch(a){case"rgb":case"rgba":var c=this.toRgb();return b<1?"rgba( "+c.r+", "+c.g+", "+c.b+", "+b+" )":"rgb( "+c.r+", "+c.g+", "+c.b+" )";case"hsl":case"hsla":var d=this.toHsl();return b<1?"hsla( "+d.h+", "+d.s+", "+d.l+", "+b+" )":"hsl( "+d.h+", "+d.s+", "+d.l+" )";default:return this.toString()}},toRgb:function(){return{r:255&this._color>>16,g:255&this._color>>8,b:255&this._color}},toHsl:function(){var a=this.toRgb(),b=a.r/255,c=a.g/255,d=a.b/255,e=Math.max(b,c,d),f=Math.min(b,c,d),g,h,i=(e+f)/2;if(e===f)g=h=0;else{var j=e-f;h=i>.5?j/(2-e-f):j/(e+f);switch(e){case b:g=(c-d)/j+(c<d?6:0);break;case c:g=(d-b)/j+2;break;case d:g=(b-c)/j+4}g/=6}return g=Math.round(g*360),g===0&&this.__hsl.h!==g&&(g=this.__hsl.h),h=Math.round(h*100),h===0&&this.__hsl.s&&(h=this.__hsl.s),{h:g,s:h,l:Math.round(i*100)}},toInt:function(){return this._color},toIEOctoHex:function(){var a=this.toString(),b=parseInt(255*this._alpha,10).toString(16);return b.length===1&&(b="0"+b),"#"+b+a.replace(/^#/,"")},toLuminosity:function(){var a=this.toRgb();return.2126*Math.pow(a.r/255,2.2)+.7152*Math.pow(a.g/255,2.2)+.0722*Math.pow(a.b/255,2.2)},getDistanceLuminosityFrom:function(a){if(a instanceof c){var b=this.toLuminosity(),d=a.toLuminosity();return b>d?(b+.05)/(d+.05):(d+.05)/(b+.05)}throw"getDistanceLuminosityFrom requires a Color object"},getMaxContrastColor:function(){var a=this.toLuminosity(),b=a>=.5?"000000":"ffffff";return new c(b)},getGrayscaleContrastingColor:function(a){if(!a)return this.getMaxContrastColor();var b=a<5?5:a,c=this.getMaxContrastColor();a=c.getDistanceLuminosityFrom(this);if(a<=b)return c;var d=0===c.toInt()?1:-1;while(a>b)c=c.incrementLightness(d),a=c.getDistanceLuminosityFrom(this);return c},getReadableContrastingColor:function(a,d){if(!a instanceof c)return this;var e=d===b?5:d,f=a.getDistanceLuminosityFrom(this),g=a.getMaxContrastColor(),h=g.getDistanceLuminosityFrom(a);if(h<=e)return g;if(f>=e)return this;var i=0===g.toInt()?-1:1;while(f<e){this.incrementLightness(i),f=this.getDistanceLuminosityFrom(a);if(this._color===0||this._color===16777215)break}return this},h:function(a){return this._hsl("h",a)},s:function(a){return this._hsl("s",a)},l:function(a){return this._hsl("l",a)},_hsl:function(a,c){var d=this.toHsl();return c===b?d[a]:(a==="h"?d[a]=c%360:d[a]=c<0?0:c>100?100:c,this.fromHsl(d))},darken:function(a){return a=a||5,this.incrementLightness(-a)},lighten:function(a){return a=a||5,this.incrementLightness(a)},incrementLightness:function(a){return this.l(this.l()+a)},saturate:function(a){return a=a||15,this.incrementSaturation(a)},desaturate:function(a){return a=a||15,this.incrementSaturation(-a)},incrementSaturation:function(a){return this.s(this.s()+a)},toGrayscale:function(){return this.h(0)},getComplement:function(){return this.incrementHue(180)},getSplitComplement:function(a){a=a||1;var b=180+a*30;return this.incrementHue(b)},getAnalog:function(a){a=a||1;var b=a*30;return this.incrementHue(b)},getTetrad:function(a){a=a||1;var b=a*60;return this.incrementHue(b)},getTriad:function(a){a=a||1;var b=a*120;return this.incrementHue(b)},incrementHue:function(a){return this.h(this.h()+a)}},a.Color=c}(typeof exports=="object"&&exports||this); 5 No newline at end of file -
wp-admin/custom-header.php
175 175 wp_enqueue_script( 'media-upload' ); 176 176 wp_enqueue_script( 'custom-header' ); 177 177 if ( current_theme_supports( 'custom-header', 'header-text' ) ) 178 wp_enqueue_script(' farbtastic');178 wp_enqueue_script('wp-color-picker'); 179 179 } elseif ( 2 == $step ) { 180 180 wp_enqueue_script('imgareaselect'); 181 181 } … … 190 190 $step = $this->step(); 191 191 192 192 if ( ( 1 == $step || 3 == $step ) && current_theme_supports( 'custom-header', 'header-text' ) ) 193 wp_enqueue_style(' farbtastic');193 wp_enqueue_style('wp-color-picker'); 194 194 elseif ( 2 == $step ) 195 195 wp_enqueue_style('imgareaselect'); 196 196 } … … 332 332 function js_1() { ?> 333 333 <script type="text/javascript"> 334 334 /* <![CDATA[ */ 335 var farbtastic;336 335 (function($){ 337 336 var default_color = '#<?php echo get_theme_support( 'custom-header', 'default-text-color' ); ?>', 338 337 header_text_fields; … … 341 340 $('#name').css('color', color); 342 341 $('#desc').css('color', color); 343 342 $('#text-color').val(color); 344 farbtastic.setColor(color);345 343 } 346 344 347 345 function toggle_text() { … … 360 358 } 361 359 362 360 $(document).ready(function() { 361 var text_color = $("#text-color"); 363 362 header_text_fields = $('.displaying-header-text'); 364 $('#pickcolor').click(function(e) { 365 e.preventDefault(); 366 $('#color-picker').show(); 363 text_color.wpColorPicker({ 364 change: function( event, ui ) { 365 pickColor( text_color.wpColorPicker('color') ); 366 }, 367 clear: function() { 368 pickColor( '' ); 369 } 367 370 }); 368 369 371 $('#display-header-text').click( toggle_text ); 370 371 $('#defaultcolor').click(function() { 372 pickColor(default_color); 373 $('#text-color').val(default_color); 374 }); 375 376 $('#text-color').keyup(function() { 377 var _hex = $('#text-color').val(); 378 var hex = _hex; 379 if ( hex[0] != '#' ) 380 hex = '#' + hex; 381 hex = hex.replace(/[^#a-fA-F0-9]+/, ''); 382 if ( hex != _hex ) 383 $('#text-color').val(hex); 384 if ( hex.length == 4 || hex.length == 7 ) 385 pickColor( hex ); 386 }); 387 388 $(document).mousedown(function(){ 389 $('#color-picker').each( function() { 390 var display = $(this).css('display'); 391 if (display == 'block') 392 $(this).fadeOut(2); 393 }); 394 }); 395 396 farbtastic = $.farbtastic('#color-picker', function(color) { pickColor(color); }); 397 <?php if ( display_header_text() ) { ?> 398 pickColor('#<?php echo get_header_textcolor(); ?>'); 399 <?php } else { ?> 372 <?php if ( !display_header_text() ) { ?> 400 373 toggle_text(); 401 374 <?php } ?> 402 375 }); … … 647 620 <th scope="row"><?php _e( 'Text Color' ); ?></th> 648 621 <td> 649 622 <p> 650 <?php if ( display_header_text() ) : ?> 651 <input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_header_textcolor() ); ?>" /> 652 <?php else : ?> 653 <input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ); ?>" /> 654 <?php endif; ?> 655 <a href="#" class="hide-if-no-js" id="pickcolor"><?php _e( 'Select a Color' ); ?></a> 623 <?php $header_textcolor = ( display_header_text() ) ? esc_attr( get_header_textcolor() ) : esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ); 624 $default_color = current_theme_supports( 'custom-header', 'default-text-color' ) ? 'data-default-color="#' . esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ) . '" ' : ''; ?> 625 <input type="text" name="text-color" id="text-color" value="#<?php echo $header_textcolor; ?>" <?php echo $default_color; ?>/> 656 626 </p> 657 <div id="color-picker" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>658 627 </td> 659 628 </tr> 660 629 -
wp-admin/css/wp-color-picker.css
1 .wp-color-picker { 2 width: 80px; 3 } 4 .wp-picker-container .hidden { 5 display: none; 6 } 7 .wp-color-result { 8 background-color: #f9f9f9; 9 border: 1px solid #c4c4c4; 10 -moz-border-radius: 4px; 11 -webkit-border-radius: 4px; 12 border-radius: 4px; 13 box-shadow: inset 1px 1px 0 rgba(0,0,0,.05); 14 -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05); 15 -ms-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05); 16 -o-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05); 17 -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05); 18 cursor: pointer; 19 display: inline-block; 20 height: 21px; 21 margin: 0 6px 1px 0px; 22 position: relative; 23 top: 1px; 24 user-select: none; 25 -moz-user-select: none; 26 -ms-user-select: none; 27 -webkit-user-select: none; 28 vertical-align: bottom; 29 display: inline-block; 30 padding-left: 30px; 31 } 32 .wp-color-result::after { 33 background-color: #f9f9f9; 34 background-image: -moz-linear-gradient(top, #fff 0%, #eee 100%); 35 background-image: -webkit-linear-gradient(top, #fff 0%, #eee 100%); 36 background-image: -ms-linear-gradient(top, #fff 0%, #eee 100%); 37 background-image: -o-linear-gradient(top, #fff 0%, #eee 100%); 38 background-image: linear-gradient(top, #fff 0%, #eee 100%); 39 -moz-border-radius-bottomright: 3px; 40 -moz-border-radius-topright: 3px; 41 -webkit-border-radius: 0 3px 3px 0; 42 border-radius: 0 3px 3px 0; 43 border-bottom-right-radius: 3px; 44 border-left: 1px solid #c4c4c4; 45 content: attr( title ); 46 color: #555; 47 display: block; 48 font-size: 11px; 49 line-height: 21px; 50 padding: 0 6px; 51 position: relative; 52 right: 0px; 53 text-align: center; 54 top: 0px; 55 } 56 .wp-color-result:hover { 57 border-color: #aaa; 58 box-shadow: 0 1px 1px rgba(0,0,0,0.1); 59 -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1); 60 -ms-box-shadow: 0 1px 1px rgba(0,0,0,0.1); 61 -o-box-shadow: 0 1px 1px rgba(0,0,0,0.1); 62 -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1); 63 } 64 .wp-color-result:hover:after { 65 color: #222; 66 border-color: #aaa; 67 border-left: 1px solid #999; 68 } 69 .wp-color-result.wp-picker-open { 70 top: 0; 71 /*width: 5px;*/ 72 } 73 .wp-color-result.wp-picker-open:after { 74 content: attr( data-current ); 75 } 76 .wp-picker-container, .wp-picker-container:active { 77 display: inline-block; 78 outline: 0; 79 } 80 .wp-color-result:focus { 81 border-color: #888; 82 -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2); 83 -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.2); 84 -o-box-shadow: 0 1px 2px rgba(0,0,0,0.2); 85 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); 86 box-shadow: 0 1px 2px rgba(0,0,0,0.2); 87 } 88 .wp-color-result:focus:after { 89 border-color: #888; 90 } 91 .wp-picker-container .button { 92 margin-left: 6px; 93 } 94 .wp-picker-container .iris-square-slider .ui-slider-handle:focus { 95 background-color: #555 96 } 97 .wp-picker-container .iris-picker { 98 border-color: #dfdfdf; 99 margin-top: 6px; 100 } 101 input[type="text"].iris-error { 102 background-color: #ffebe8; 103 border-color: #c00; 104 color: #000; 105 } 106 No newline at end of file -
wp-admin/css/customize-controls-rtl.css
65 65 margin-left: 5px; 66 66 } 67 67 68 .customize-section input[type="text"].color-picker-hex, 69 .customize-control-color .farbtastic-placeholder { 68 .customize-section input[type="text"].color-picker-hex { 70 69 float: right; 71 70 } 72 71 -
wp-admin/css/customize-controls.css
312 312 /* 313 313 * Color Picker 314 314 */ 315 .customize-control-color .color-picker-hex, 316 .customize-control-color .farbtastic-placeholder { 315 .customize-control-color .color-picker-hex { 317 316 display: none; 318 317 } 319 318 320 .customize-control-color.open .color-picker-hex, 321 .customize-control-color.open .farbtastic-placeholder { 319 .customize-control-color.open .color-picker-hex { 322 320 display: block; 323 321 } 324 322 … … 337 335 } 338 336 339 337 .customize-section input[type="text"].color-picker-hex { 340 float: left; 341 width: 85px; 338 width: 65px; 342 339 font-family: monospace; 343 340 text-align: center; 344 341 } … … 351 348 color: #999; 352 349 } 353 350 354 .customize-control-color .farbtastic-placeholder {355 width: 100%;356 margin: 5px 0 10px;357 float: left;358 }359 360 .customize-control-color .farbtastic {361 margin: 0 auto;362 }363 364 351 /* 365 352 * Image Picker 366 353 */ -
wp-admin/custom-background.php
108 108 add_thickbox(); 109 109 wp_enqueue_script('media-upload'); 110 110 wp_enqueue_script('custom-background'); 111 wp_enqueue_style(' farbtastic');111 wp_enqueue_style('wp-color-picker'); 112 112 } 113 113 114 114 /** … … 327 327 <tr valign="top"> 328 328 <th scope="row"><?php _e( 'Background Color' ); ?></th> 329 329 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend> 330 <?php $show_clear = get_theme_mod('background_color') ? '' : ' style="display:none"'; ?> 331 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" /> 332 <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e('Select a Color'); ?></a> <span<?php echo $show_clear; ?> class="hide-if-no-js" id="clearcolor"> (<a href="#"><?php current_theme_supports( 'custom-background', 'default-color' ) ? _e( 'Default' ) : _e( 'Clear' ); ?></a>)</span> 333 <input type="hidden" id="defaultcolor" value="<?php if ( current_theme_supports( 'custom-background', 'default-color' ) ) echo '#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ); ?>" /> 334 <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div> 330 <?php $default_color = current_theme_supports( 'custom-background', 'default-color' ) ? 'data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '" ' : ''; ?> 331 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" <?php echo $default_color ?>/> 335 332 </fieldset></td> 336 333 </tr> 337 334 </tbody>