WordPress.org

Make WordPress Core

Ticket #29158: 29158.colors.diff

File 29158.colors.diff, 9.5 KB (added by celloexpressions, 7 years ago)
  • src/wp-admin/css/colors/_admin.scss

     
    492492
    493493/* Customize */
    494494
     495.wp-customizer .wp-full-overlay-sidebar,
     496.customize-controls-close,
     497.control-panel-back {
     498        background: $customize-background;
     499        border-right-color: $customize-line-color;
     500        color: $customize-background-text;
     501}
     502
     503#customize-controls .accordion-section-content {
     504        background: $body-background;
     505}
     506
     507#customize-info .accordion-section-title,
     508#customize-theme-controls .accordion-section-title {
     509        background: $customize-nav-background;
     510        border-color: $customize-line-color;
     511        color: $customize-nav-text;
     512}
     513
     514#customize-controls .accordion-section-title:after {
     515        color: $customize-nav-text;
     516}
     517
     518#customize-info.open,
     519#customize-theme-controls .control-section.open,
     520#customize-theme-controls .control-section:last-of-type.open,
     521#customize-theme-controls .control-section:last-of-type .accordion-section-title {
     522        border-bottom-color: $customize-line-color;
     523}
     524
     525#customize-theme-controls .control-section.open .accordion-section-title {
     526        border-bottom-color: $customize-line-color !important;
     527}
     528
     529#customize-info.open .accordion-section-title,
     530#customize-info .accordion-section-title:hover,
     531#customize-info .accordion-section-title:focus,
     532#customize-theme-controls .control-section:hover > .accordion-section-title,
     533#customize-theme-controls .control-section .accordion-section-title:hover,
     534#customize-theme-controls .control-section.open .accordion-section-title,
     535#customize-theme-controls .control-section .accordion-section-title:focus {
     536        color: $customize-active-text;
     537        background: $customize-active-background;
     538}
     539
     540.js .control-section:hover .accordion-section-title,
     541.js .control-section .accordion-section-title:hover,
     542.js .control-section.open .accordion-section-title,
     543.js .control-section .accordion-section-title:focus {
     544        background: $customize-active-background;
     545}
     546
     547#customize-info.open .accordion-section-title:after,
     548#customize-info .accordion-section-title:hover:after,
     549#customize-info .accordion-section-title:focus:after,
     550#customize-theme-controls .control-section:hover > .accordion-section-title:after,
     551#customize-theme-controls .control-section .accordion-section-title:hover:after,
     552#customize-theme-controls .control-section.open .accordion-section-title:after,
     553#customize-theme-controls .control-section .accordion-section-title:focus:after {
     554        color: $customize-active-text;
     555}
     556
     557#customize-info,
     558.accordion-sub-container.control-panel-content {
     559        border-top-color: $customize-line-color;
     560}
     561
     562.control-section.control-panel > h3.accordion-section-title:hover:after,
     563.control-section.control-panel > h3.accordion-section-title:focus:after {
     564        background: $customize-active-background-alt;
     565}
     566
     567.control-section.control-panel > .accordion-section-title:after {
     568        background: $customize-background;
     569        border-left-color: $customize-line-color;
     570}
     571
    495572#customize-theme-controls .widget-area-select .selected {
    496573        background-color: $menu-highlight-background;
    497574        color: $menu-highlight-text;
     
    505582        color: $menu-highlight-text;
    506583}
    507584
     585.wp-customizer .wp-full-overlay a.collapse-sidebar {
     586        color: $customize-background-text;
     587}
     588
     589
    508590/* jQuery UI Slider */
    509591
    510592.wp-slider .ui-slider-handle,
  • src/wp-admin/css/colors/_variables.scss

     
    5656$adminbar-input-background: lighten( $menu-background, 7% ) !default;
    5757
    5858$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;
     59
     60
     61// Customizer
     62
     63$customize-nav-background: $menu-background !default;
     64$customize-nav-text: $text-color !default;
     65
     66$customize-background: $menu-submenu-background !default;
     67$customize-background-text: $menu-submenu-text !default;
     68
     69$customize-line-color: $customize-nav-background !default;
     70
     71$customize-active-background: $menu-highlight-background !default;
     72$customize-active-background-alt: darken( $menu-highlight-background, %7 ) !default;
     73$customize-active-text: $menu-highlight-text !default;
     74
  • src/wp-admin/css/customize-controls.css

     
    1818        color: #666666;
    1919}
    2020
     21#customize-controls .accordion-section-content {
     22        background: #f1f1f1;
     23}
     24
    2125#customize-header-actions .button-primary {
    2226        float: right;
    2327        margin-top: 9px;
     
    3943
    4044#customize-info {
    4145        border: none;
    42         border-top: 1px solid #ddd;
     46        border-top: 1px solid #222;
    4347}
    4448
    4549#customize-info .accordion-section-title {
    46         background-color: #fff;
    47         color: #666666;
     50        background-color: #222;
     51        color: #eee;
    4852        border-left: none;
    4953        border-right: none;
    50         border-bottom: 1px solid #eeeeee;
     54        border-bottom: 1px solid #222;
    5155}
    5256
    5357#customize-info.open .accordion-section-title:after,
    5458#customize-info .accordion-section-title:hover:after,
    5559#customize-info .accordion-section-title:focus:after {
    56         color: #555555;
     60        color: #fff;
    5761}
    5862
    5963#customize-info .preview-notice {
     
    8387}
    8488
    8589#customize-theme-controls .accordion-section-title {
    86         color: #555555;
    87         background-color: #fff;
    88         border-bottom: 1px solid #eeeeee;
     90        color: #eee;
     91        background-color: #222;
     92        border-bottom: 1px solid #222;
    8993}
    9094
     95#customize-controls .accordion-section-title:after {
     96        color: #eee;
     97}
     98
    9199#customize-theme-controls .accordion-section-content {
    92100        color: #555555;
    93         background: white;
    94101}
    95102
    96103#customize-info.open .accordion-section-title,
     
    100107#customize-theme-controls .control-section .accordion-section-title:hover,
    101108#customize-theme-controls .control-section.open .accordion-section-title,
    102109#customize-theme-controls .control-section .accordion-section-title:focus {
    103         color: #555555;
    104         background: #f5f5f5;
     110        color: #fff;
     111        background: #0074a2;
    105112}
    106113
    107114.js .control-section:hover .accordion-section-title,
     
    108115.js .control-section .accordion-section-title:hover,
    109116.js .control-section.open .accordion-section-title,
    110117.js .control-section .accordion-section-title:focus {
    111         background: #f5f5f5;
     118        background: #0074a2;
    112119}
    113120
    114121#customize-theme-controls .control-section:hover > .accordion-section-title:after,
     
    115122#customize-theme-controls .control-section .accordion-section-title:hover:after,
    116123#customize-theme-controls .control-section.open .accordion-section-title:after,
    117124#customize-theme-controls .control-section .accordion-section-title:focus:after {
    118         color: #555555;
     125        color: #fff;
    119126}
    120127
    121128#customize-info.open,
    122129#customize-theme-controls .control-section.open {
    123         border-bottom: 1px solid #eeeeee;
     130        border-bottom: 1px solid #222;
    124131}
    125132
    126133#customize-theme-controls .control-section.open .accordion-section-title {
    127         border-bottom-color: #eeeeee !important;
     134        border-bottom-color: #222 !important;
    128135}
    129136
    130137#customize-theme-controls .control-section:last-of-type.open,
    131138#customize-theme-controls .control-section:last-of-type .accordion-section-title {
    132         border-bottom-color: #ddd;
     139        border-bottom-color: #222;
    133140}
    134141
    135142#customize-theme-controls > ul,
     
    138145}
    139146
    140147.control-section.control-panel > .accordion-section-title:after {
    141         content: "\f139";
     148        content: "\f345";
     149        background: #333;
     150        width: 38px;
     151        height: 100%;
     152        margin: -11px -10px -11px 0;
     153        line-height: 45px;
     154        padding-left: 5px;
     155        border-left: 1px solid #000;
    142156}
    143157
     158.control-section.control-panel > h3.accordion-section-title:hover:after,
     159.control-section.control-panel > h3.accordion-section-title:focus:after {
     160        background: #006290;
     161        color: #fff;
     162}
     163
    144164.rtl .control-section.control-panel > .accordion-section-title:after {
    145165        content: "\f141";
    146166}
     
    151171        left: 300px;
    152172        top: 0;
    153173        width: 300px;
    154         border-top: 1px solid #ddd;
     174        border-top: 1px solid #222;
    155175        -webkit-transition: left ease-in-out .18s;
    156176        transition: left ease-in-out .18s;
    157177}
     
    172192        width: 45px;
    173193        height: 45px;
    174194        padding-right: 2px;
    175         background: #eee;
    176         border-right: 1px solid #ddd;
    177         color: #444;
     195        background: #333;
     196        border-right: 1px solid #222;
     197        color: #bbb;
    178198        cursor: pointer;
    179199        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    180200        transition: color .1s ease-in-out, background .1s ease-in-out;
     
    189209        width: 45px;
    190210        height: 45px;
    191211        padding-right: 2px;
    192         background: #eee;
    193         border-right: 1px solid #ddd;
     212        background: #333;
     213        border-right: 1px solid #222;
     214        color: #bbb;
    194215        cursor: pointer;
    195216        -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
    196217        transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     
    390411        height: 100%;
    391412}
    392413
    393 .wp-full-overlay-sidebar {
    394         background: #eeeeee;
    395         border-right: 1px solid #ddd;
     414.wp-customizer .wp-full-overlay-sidebar {
     415        background: #333;
     416        border-right: 1px solid #222;
    396417}
    397418
    398419.collapse-sidebar {
     
    404425        border-radius: 0 !important;
    405426}
    406427
     428.wp-customizer .wp-full-overlay a.collapse-sidebar {
     429        color: #aaa;
     430}
    407431
     432.wp-customizer .wp-full-overlay .collapse-sidebar-arrow:before {
     433        background: transparent;
     434}
     435
     436.wp-customizer .wp-full-overlay a.collapse-sidebar:hover,
     437.wp-customizer .wp-full-overlay a.collapse-sidebar:focus {
     438        color: #2ea2cc
     439}
     440
    408441.collapse-sidebar:active,
    409442.collapse-sidebar:active .collapse-sidebar-label,
    410443.collapse-sidebar:active .collapse-sidebar-arrow:before {