WordPress.org

Make WordPress Core

Ticket #28267: 28267.customizer.diff

File 28267.customizer.diff, 2.4 KB (added by celloexpressions, 6 years ago)

Proposed improved focus styling for Customizer sections and panel headings. It's bold, colorful, and similar to things that have been both proposed an in core in the past. Does work reasonably well with color schemes, could be a bit better.

  • src/wp-admin/css/colors/_admin.scss

     
    490490        color: $menu-highlight-text;
    491491}
    492492
     493#customize-info.open .accordion-section-title:after,
     494#customize-info .accordion-section-title:hover:after,
     495#customize-info .accordion-section-title:focus:after {
     496        color: $menu-highlight-text;
     497}
     498
     499#customize-info.open .accordion-section-title,
     500#customize-info .accordion-section-title:hover,
     501#customize-info .accordion-section-title:focus,
     502#customize-theme-controls .control-section:hover > .accordion-section-title,
     503#customize-theme-controls .control-section .accordion-section-title:hover,
     504#customize-theme-controls .control-section.open .accordion-section-title,
     505#customize-theme-controls .control-section .accordion-section-title:focus {
     506        background: $menu-highlight-background;
     507        color: $menu-highlight-text;
     508}
     509
    493510/* jQuery UI Slider */
    494511
    495512.wp-slider .ui-slider-handle,
  • src/wp-admin/css/customize-controls.css

     
    5353#customize-info.open .accordion-section-title:after,
    5454#customize-info .accordion-section-title:hover:after,
    5555#customize-info .accordion-section-title:focus:after {
    56         color: #555555;
     56        color: #fff;
    5757}
    5858
    5959#customize-info .preview-notice {
     
    9090
    9191#customize-theme-controls .accordion-section-content {
    9292        color: #555555;
    93         background: white;
     93        background: #fff;
    9494}
    9595
    9696#customize-info.open .accordion-section-title,
     
    100100#customize-theme-controls .control-section .accordion-section-title:hover,
    101101#customize-theme-controls .control-section.open .accordion-section-title,
    102102#customize-theme-controls .control-section .accordion-section-title:focus {
    103         color: #555555;
    104         background: #f5f5f5;
     103        color: #fff;
     104        background: #0074a2;
    105105}
    106106
    107107.js .control-section:hover .accordion-section-title,
     
    115115#customize-theme-controls .control-section .accordion-section-title:hover::after,
    116116#customize-theme-controls .control-section.open .accordion-section-title::after,
    117117#customize-theme-controls .control-section .accordion-section-title:focus::after {
    118         color: #555555;
     118        color: #fff;
    119119}
    120120
    121121#customize-info.open,