WordPress.org

Make WordPress Core

Changeset 39249


Ignore:
Timestamp:
11/15/16 18:10:16 (5 months ago)
Author:
helen
Message:

Customize: More visible focus and hover states for close and back buttons.

props celloexpressions, folletto.
fixes #29158.

Location:
trunk/src/wp-admin/css
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/colors/_admin.scss

    r39141 r39249  
    468468} 
    469469 
    470 /* Customize */ 
    471  
    472 #customize-theme-controls .widget-area-select .selected { 
    473     background-color: $menu-highlight-background; 
    474     color: $menu-highlight-text; 
    475 } 
    476  
    477 #customize-footer-actions .devices button:focus { 
    478     border-bottom-color: $highlight-color; 
    479 } 
    480  
    481 #customize-controls .control-section:hover > .accordion-section-title, 
    482 #customize-controls .control-section .accordion-section-title:hover, 
    483 #customize-controls .control-section.open .accordion-section-title, 
    484 #customize-controls .control-section .accordion-section-title:focus, 
    485 #available-widgets .widget-tpl:hover, 
    486 #available-widgets .widget-tpl.selected { 
    487     border-left-color: $highlight-color; 
    488 } 
    489  
    490470/* Responsive Component */ 
    491471 
  • trunk/src/wp-admin/css/customize-controls.css

    r39229 r39249  
    2222 
    2323#customize-controls .description { 
    24     color: #555; 
     24    color: #555d66; 
    2525} 
    2626 
     
    8383#customize-controls .customize-info .accordion-section-title { 
    8484    background: #fff; 
    85     color: #555; 
     85    color: #555d66; 
    8686    border-left: none; 
    8787    border-right: none; 
     
    9393#customize-controls .customize-info .accordion-section-title:hover:after, 
    9494#customize-controls .customize-info .accordion-section-title:focus:after { 
    95     color: #333; 
     95    color: #32373c; 
    9696} 
    9797 
     
    135135    -webkit-appearance: none; 
    136136    background: transparent; 
    137     color: #555; 
     137    color: #555d66; 
    138138    border: none; 
    139139} 
     
    154154#customize-controls .customize-info .customize-section-description, 
    155155#customize-controls .no-widget-areas-rendered-notice { 
    156     color: #555; 
     156    color: #555d66; 
    157157    display: none; 
    158158    background: #fff; 
     
    188188 
    189189#customize-theme-controls .accordion-section-title { 
    190     color: #555; 
     190    color: #555d66; 
    191191    background-color: #fff; 
    192     border-bottom: 1px solid #eee; 
     192    border-bottom: 1px solid #ddd; 
    193193    border-left: 4px solid #fff; 
     194    transition: .15s color ease-in-out, 
     195                .15s background-color ease-in-out, 
     196                .15s border-color ease-in-out; 
    194197} 
    195198 
     
    206209 
    207210#customize-theme-controls .accordion-section-content { 
    208     color: #555; 
     211    color: #555d66; 
    209212    background: transparent; 
    210213} 
     
    214217#customize-controls .control-section.open .accordion-section-title, 
    215218#customize-controls .control-section .accordion-section-title:focus { 
    216     color: #191e23; 
    217     background: #f5f5f5; 
    218     border-left: 4px solid #0073aa; 
     219    color: #0073aa; 
     220    background: #f3f3f5; 
     221    border-left-color: #0073aa; 
    219222} 
    220223 
     
    227230.js .control-section.open .accordion-section-title, 
    228231.js .control-section .accordion-section-title:focus { 
    229     background: #f5f5f5; 
     232    background: #f3f3f5; 
    230233} 
    231234 
     
    234237#customize-theme-controls .control-section.open .accordion-section-title:after, 
    235238#customize-theme-controls .control-section .accordion-section-title:focus:after { 
    236     color: #23282d; 
     239    color: #0073aa; 
    237240} 
    238241 
     
    414417    margin: 0; 
    415418    line-height: 21px; 
    416     color: #555; 
     419    color: #555d66; 
    417420} 
    418421 
     
    438441    left: 0; 
    439442    width: 45px; 
    440     height: 45px; 
     443    height: 41px; 
    441444    padding: 0 2px 0 0; 
    442445    background: #eee; 
    443446    border: none; 
     447    border-top: 4px solid #eee; 
    444448    border-right: 1px solid #ddd; 
    445449    color: #444; 
    446450    text-align: left; 
    447451    cursor: pointer; 
    448     -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; 
    449     transition: color .1s ease-in-out, background .1s ease-in-out; 
     452    -webkit-transition: color .15s ease-in-out, 
     453                        border-color .15s ease-in-out, 
     454                        background .15s ease-in-out; 
     455    transition: color .1s ease-in-out, 
     456                border-color .15s ease-in-out, 
     457                background .15s ease-in-out; 
    450458    -webkit-box-sizing: content-box; 
    451459    -moz-box-sizing: content-box; 
     
    464472    border: none; 
    465473    border-right: 1px solid #ddd; 
     474    border-left: 4px solid #fff; 
    466475    -webkit-box-shadow: none; 
    467476    box-shadow: none; 
    468477    cursor: pointer; 
    469     -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; 
    470     transition: color .1s ease-in-out, background .1s ease-in-out; 
     478    -webkit-transition: color .15s ease-in-out, 
     479                        border-color .15s ease-in-out, 
     480                        background .15s ease-in-out; 
     481    transition: color .15s ease-in-out, 
     482                border-color .15s ease-in-out, 
     483                background .15s ease-in-out; 
    471484} 
    472485 
     
    491504#customize-controls .cannot-expand:hover .accordion-section-title { 
    492505    background: #fff; 
    493     color: #555; 
     506    color: #555d66; 
    494507    border-left-color: #fff; 
    495508} 
     
    499512.customize-controls-preview-toggle:focus, 
    500513.customize-controls-preview-toggle:hover { 
    501     background: #ddd; 
    502     border-color: #ccc; 
    503     color: #000; 
     514    background: #fff; 
     515    color: #0073aa; 
     516    border-top-color: #0073aa; 
    504517    outline: none; 
    505518    -webkit-box-shadow: none; 
    506519    box-shadow: none; 
    507520} 
     521 
    508522 
    509523.customize-panel-back:hover, 
     
    511525.customize-section-back:hover, 
    512526.customize-section-back:focus { 
    513     color: #23282d; 
    514     background: #f5f5f5; 
     527    color: #0073aa; 
     528    background: #f3f3f5; 
     529    border-left-color: #0073aa; 
    515530    outline: none; 
    516531    -webkit-box-shadow: none; 
     
    522537    content: "\f335"; 
    523538    position: relative; 
    524     top: 1px; 
     539    top: -3px; 
    525540    left: 13px; 
    526541} 
     
    531546    content: "\f341"; 
    532547    position: relative; 
    533     left: 13px; 
     548    left: 9px; 
    534549} 
    535550 
     
    891906 
    892907.customize-control-color .dropdown .dropdown-content { 
    893     background-color: #555; 
     908    background-color: #555d66; 
    894909    border: 1px solid rgba(0, 0, 0, 0.15); 
    895910} 
     
    975990    position: absolute; 
    976991    width: 100%; 
    977     color: #555; 
     992    color: #555d66; 
    978993    white-space: nowrap; 
    979994    text-overflow: ellipsis; 
     
    10301045    font-size: 20px; 
    10311046    color: #fff; 
    1032     background: #555; 
     1047    background: #555d66; 
    10331048    background: rgba(0, 0, 0, 0.5); 
    10341049    position: absolute; 
     
    12111226    cursor: default; 
    12121227    background: #fff; 
    1213     color: #555; 
     1228    color: #555d66; 
    12141229    border-top: 1px solid #ddd; 
    12151230    border-bottom: 1px solid #ddd; 
     
    17611776    border-bottom: 1px solid #ddd; 
    17621777    border-left: 4px solid #fff; 
     1778    transition: .15s color ease-in-out, 
     1779                .15s background-color ease-in-out, 
     1780                .15s border-color ease-in-out; 
    17631781    cursor: pointer; 
    17641782    display: none; 
     
    18361854        border: 0; 
    18371855        border-right: 1px solid #ddd; 
    1838         color: #444; 
     1856        color: #555d66; 
    18391857        cursor: pointer; 
    18401858        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; 
     
    19171935        margin: 0; 
    19181936        line-height: 24px; 
    1919         color: #555; 
     1937        color: #555d66; 
    19201938        display: block; 
    19211939        overflow: hidden; 
  • trunk/src/wp-admin/css/customize-widgets.css

    r38602 r39249  
    230230#available-widgets .widget-tpl:hover, 
    231231#available-widgets .widget-tpl.selected { 
    232     background: #f5f5f5; 
     232    background: #f3f3f5; 
    233233    border-bottom-color: #ccc; 
     234    color: #0073aa; 
    234235    border-left: 4px solid #0073aa; 
    235236} 
  • trunk/src/wp-admin/css/themes.css

    r39214 r39249  
    16421642    border-top: 1px solid transparent; 
    16431643    border-bottom: 4px solid transparent; 
    1644     -webkit-transition: background .1s ease-in-out; 
    1645     transition: background .1s ease-in-out; 
     1644    transition: .15s color ease-in-out, 
     1645                .15s background-color ease-in-out, 
     1646                .15s border-color ease-in-out; 
    16461647} 
    16471648 
     
    16711672} 
    16721673 
    1673 .wp-full-overlay-footer .devices button:focus { 
    1674     background-color: #fff; 
     1674.wp-full-overlay-footer .devices button:focus, 
     1675.wp-full-overlay-footer .devices button.active:hover { 
    16751676    border-bottom-color: #0073aa; 
    16761677} 
    16771678 
    1678 .wp-full-overlay-footer .devices button.active:before, 
     1679.wp-full-overlay-footer .devices button.active:before { 
     1680    color: #191e23; 
     1681} 
     1682 
    16791683.wp-full-overlay-footer .devices button:hover:before, 
    16801684.wp-full-overlay-footer .devices button:focus:before { 
    1681     color: #191e23; 
     1685    color: #0073aa; 
    16821686} 
    16831687 
Note: See TracChangeset for help on using the changeset viewer.