WordPress.org

Make WordPress Core

Changeset 39249


Ignore:
Timestamp:
11/15/2016 06:10:16 PM (19 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.