WordPress.org

Make WordPress Core

Changeset 39273


Ignore:
Timestamp:
11/16/16 23:37:42 (11 months ago)
Author:
joemcgill
Message:

Twenty Seventeen: Add styles for custom header video controls.

Following [39272], this uses the header_video_settings filter to modify
the default video header control markup and adds theme specific styles
for the play/pause button.

Props melchoyce, laurelfulford, joemcgill, davidakennedy, bradyvercher.
Fixes #38697.

Location:
trunk/src/wp-content/themes/twentyseventeen
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg

    r39072 r39273  
    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> 
  • trunk/src/wp-content/themes/twentyseventeen/inc/custom-header.php

    r39224 r39273  
    9595} 
    9696endif; // End of twentyseventeen_header_style. 
     97 
     98/** 
     99 * Customize video play/pause button in the custom header. 
     100 */ 
     101function twentyseventeen_video_controls( $settings ) { 
     102    $settings['l10n']['play'] = '<span class="screen-reader-text">' . __( 'Play background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'play' ) ); 
     103    $settings['l10n']['pause'] = '<span class="screen-reader-text">' . __( 'Pause background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'pause' ) ); 
     104    return $settings; 
     105} 
     106add_filter( 'header_video_settings', 'twentyseventeen_video_controls' ); 
  • trunk/src/wp-content/themes/twentyseventeen/rtl.css

    r39198 r39273  
    9696/* Front Page */ 
    9797 
     98.wp-custom-header-video-button { 
     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} 
    102  
    103107 
    104108/* Blog, Archive, Search */ 
  • trunk/src/wp-content/themes/twentyseventeen/style.css

    r39233 r39273  
    16811681} 
    16821682 
     1683.wp-custom-header .wp-custom-header-video-button { /* Speficity prevents .color-dark button overrides */ 
     1684    background-color: rgba( 34, 34, 34, 0.5 ); 
     1685    border: 1px solid rgba( 255, 255, 255, 0.6 ); 
     1686    color: rgba( 255, 255, 255, 0.6 ); 
     1687    height: 45px; 
     1688    overflow: hidden; 
     1689    padding: 0; 
     1690    position: fixed; 
     1691    right: 30px; 
     1692    top: 30px; 
     1693    -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; 
     1694    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; 
     1695    width: 45px; 
     1696} 
     1697 
     1698.wp-custom-header .wp-custom-header-video-button:hover, 
     1699.wp-custom-header .wp-custom-header-video-button:focus { /* SSpeficity prevents .color-dark button overrides */ 
     1700    border-color: rgba( 255, 255, 255, 0.8 ); 
     1701    background-color: rgba( 34, 34, 34, 0.8 ); 
     1702    color: #fff; 
     1703} 
     1704 
     1705.admin-bar .wp-custom-header-video-button { 
     1706    top: 62px; 
     1707} 
     1708 
    16831709.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img { 
    16841710    bottom: 0; 
Note: See TracChangeset for help on using the changeset viewer.