WordPress.org
Get WordPress

Make WordPress Core

Ticket #38697: 38697.1.diff

File 38697.1.diff, 8.2 KB (added by laurelfulford, 8 years ago)

  • src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css

     
    1515
    1616.colors-dark a:hover,
    1717.colors-dark a:active,
     18.colors-dark .video-button-contain:hover,
    1819.colors-dark .entry-content a:focus,
    1920.colors-dark .entry-content a:hover,
    2021.colors-dark .entry-summary a:focus,
    … …  
    236237        color: #ddd;
    237238}
    238239
     240.colors-dark .video-button-contain {
     241        background-color: rgba( 221, 221, 221, 0.3 ); /* Equivilant to #ddd */
     242}
     243
     244.colors-dark .video-button-contain:hover {
     245        background-color: rgba( 221, 221, 221, 0.8 ); /* Equivilant to #ddd */
     246}
     247
    239248.colors-dark h2,
    240249.colors-dark blockquote,
    241250.colors-dark input[type="text"],
    … …  
    480489        box-shadow: 0 0 0 8px #222;
    481490}
    482491
    483 .colors-dark .entry-footer .edit-link a.post-edit-link {
     492.colors-dark .entry-footer .edit-link a.post-edit-link,
     493.colors-dark .video-button-contain:hover {
    484494        color: #000;
    485495}
    486496
     497.colors-dark .video-button-contain {
     498        color: rgba( 0, 0, 0, 0.5 ); /* Equivalent to #000 */
     499}
     500
    487501.colors-dark .menu-toggle,
    488502.colors-dark .menu-toggle:hover,
    489503.colors-dark .menu-toggle:focus,
    … …  
    492506.colors-dark .dropdown-toggle:focus,
    493507.colors-dark .menu-scroll-down,
    494508.colors-dark .menu-scroll-down:hover,
    495 .colors-dark .menu-scroll-down:focus {
     509.colors-dark .menu-scroll-down:focus,
     510.colors-dark .wp-custom-header-video-button,
     511.colors-dark .wp-custom-header-video-button:hover,
     512.colors-dark .wp-custom-header-video-button:focus {
    496513        background-color: transparent;
    497514}
    498515
     516.colors-dark .wp-custom-header-video-button,
     517.colors-dark .wp-custom-header-video-button:hover,
     518.colors-dark .wp-custom-header-video-button:focus {
     519        color: transparent;
     520}
     521
    499522.colors-dark .widget .tagcloud a,
    500523.colors-dark .widget .tagcloud a:focus,
    501524.colors-dark .widget .tagcloud a:hover,

  • src/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg

     
    138138<symbol id="icon-arrow-right" viewBox="0 0 43 32">
    139139<path class="path1" d="M0.356 17.956c0.178 0.178 0.533 0.356 0.711 0.356h33.778l-10.311 10.489c-0.178 0.178-0.356 0.533-0.356 0.711 0 0.356 0.178 0.533 0.356 0.711l1.6 1.6c0.178 0.178 0.533 0.356 0.711 0.356s0.533-0.178 0.711-0.356l14.756-14.933c0.178-0.356 0.356-0.711 0.356-0.889s-0.178-0.533-0.356-0.711l-14.756-14.933c0-0.178-0.356-0.356-0.533-0.356s-0.533 0.178-0.711 0.356l-1.6 1.6c-0.178 0.178-0.356 0.533-0.356 0.711s0.178 0.533 0.356 0.711l10.311 10.489h-33.778c-0.178 0-0.533 0.178-0.711 0.356-0.356 0.178-0.533 0.356-0.533 0.711v2.311c0 0.178 0.178 0.533 0.356 0.711z"></path>
    140140</symbol>
     141<symbol id="icon-play" viewBox="0 0 22 28">
     142<path d="M21.625 14.484l-20.75 11.531c-0.484 0.266-0.875 0.031-0.875-0.516v-23c0-0.547 0.391-0.781 0.875-0.516l20.75 11.531c0.484 0.266 0.484 0.703 0 0.969z"></path>
     143</symbol>
     144<symbol id="icon-pause" viewBox="0 0 24 28">
     145<path d="M24 3v22c0 0.547-0.453 1-1 1h-8c-0.547 0-1-0.453-1-1v-22c0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1zM10 3v22c0 0.547-0.453 1-1 1h-8c-0.547 0-1-0.453-1-1v-22c0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
     146</symbol>
    141147</defs>
    142148</svg>

  • src/wp-content/themes/twentyseventeen/assets/js/global.js

     
    160160                return 'http://www.w3.org/2000/svg' === ( 'undefined' !== typeof SVGRect && div.firstChild && div.firstChild.namespaceURI );
    161161        }
    162162
     163        // Add play/pause SVGs to video button
     164        $( document ).on( 'wp-custom-header-video-loaded', function() {
     165                $( '#wp-custom-header-video-button' ).wrap( '<div class="video-button-contain"></div>' ).after( twentyseventeenScreenReaderText.playpause );
     166        } );
     167
    163168        // Fires on document ready
    164169        $( document ).ready( function() {
    165170

  • src/wp-content/themes/twentyseventeen/functions.php

     
    374374
    375375        $twentyseventeen_l10n = array(
    376376                'quote'          => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ),
     377                'playpause'     => twentyseventeen_get_svg( array( 'icon' => 'play' ) ) . twentyseventeen_get_svg( array( 'icon' => 'pause' ) ),
    377378        );
    378379
    379380        if ( has_nav_menu( 'top' ) ) {

  • src/wp-content/themes/twentyseventeen/inc/color-patterns.php

     
    148148        color: hsl( ' . $hue . ', ' . $saturation . ', 13% ); /* base: #222; */
    149149}
    150150
     151.colors-custom .video-button-contain {
     152        background-color: hsla( ' . $hue . ', ' . $saturation . ', 15%, 0.3 ); /* base: #222; */
     153}
     154
     155.colors-custom .video-button-contain:hover {
     156        background-color: hsla( ' . $hue . ', ' . $saturation . ', 15%, 0.8 ); /* base: #222; */
     157}
     158
    151159.colors-custom .entry-content a:focus,
    152160.colors-custom .entry-content a:hover,
    153161.colors-custom .entry-summary a:focus,
    … …  
    467475.colors-custom .menu .dropdown-toggle,
    468476.colors-custom .menu-scroll-down,
    469477.colors-custom .menu-scroll-down:hover,
    470 .colors-custom .menu-scroll-down:focus {
     478.colors-custom .menu-scroll-down:focus,
     479.colors-custom .wp-custom-header-video-button,
     480.colors-custom .wp-custom-header-video-button:hover,
     481.colors-custom .wp-custom-header-video-button:focus {
    471482        background-color: transparent;
    472483}
    473484
     485.colors-custom .wp-custom-header-video-button,
     486.colors-custom .wp-custom-header-video-button:hover,
     487.colors-custom .wp-custom-header-video-button:focus {
     488        color: transparent;
     489}
     490
    474491.colors-custom .widget .tagcloud a,
    475492.colors-custom .widget .tagcloud a:focus,
    476493.colors-custom .widget .tagcloud a:hover,

  • src/wp-content/themes/twentyseventeen/rtl.css

     
    9595
    9696/* Front Page */
    9797
     98.video-button-contain {
     99        left: 30px;
     100        right: auto;
     101}
     102
    98103.twentyseventeen-panel .recent-posts .entry-header .edit-link {
    99104        margin-left: 0;
    100105        margin-right: 1em;
    101106}
    102107
    103 
    104108/* Blog, Archive, Search */
    105109
    106110.blog .entry-meta a.post-edit-link,

  • src/wp-content/themes/twentyseventeen/style.css

     
    16801680        transform: translateX(-50%) translateY(-50%);
    16811681}
    16821682
     1683.wp-custom-header-video-button {
     1684        height: 45px;
     1685        left: 0;
     1686        overflow: hidden;
     1687        padding: 0;
     1688        position: absolute;
     1689        width: 45px;
     1690        z-index: 2;
     1691}
     1692
     1693.wp-custom-header-video-button,
     1694.wp-custom-header-video-button:hover,
     1695.wp-custom-header-video-button:focus {
     1696        background: transparent;
     1697        color: transparent;
     1698}
     1699
     1700.video-button-contain {
     1701        background-color: rgba( 34, 34, 34, 0.3 );
     1702        -webkit-border-radius: 2px;
     1703        border-radius: 2px;
     1704        color: rgba( 255, 255, 255, 0.5 );
     1705        height: 45px;
     1706        line-height: 45px;
     1707        position: absolute;
     1708        right: 30px;
     1709        text-align: center;
     1710        top: 30px;
     1711        -webkit-transition: background-color 0.2s ease-in-out, color 0.3s ease-in-out;
     1712        transition: background-color 0.2s ease-in-out, color 0.3s ease-in-out;
     1713        width: 45px;
     1714}
     1715
     1716.video-button-contain:hover {
     1717        background-color: rgba( 34, 34, 34, 0.8 );
     1718        color: #fff;
     1719}
     1720
     1721.wp-custom-header-video-play ~ .icon-play,
     1722.wp-custom-header-video-pause ~ .icon-pause {
     1723        display: none;
     1724}
     1725
    16831726.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img {
    16841727        bottom: 0;
    16851728        position: absolute;