diff --git a/src/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg b/src/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg index b3fc4e62cc..eb579db1a1 100644 --- a/src/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg +++ b/src/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg @@ -138,5 +138,11 @@ + + + + + + diff --git a/src/wp-content/themes/twentyseventeen/inc/custom-header.php b/src/wp-content/themes/twentyseventeen/inc/custom-header.php index c137ccc41a..fbf38ed592 100644 --- a/src/wp-content/themes/twentyseventeen/inc/custom-header.php +++ b/src/wp-content/themes/twentyseventeen/inc/custom-header.php @@ -94,3 +94,13 @@ function twentyseventeen_header_style() { ' . __( 'Play background video', 'twentyseventeen' ) . '' . twentyseventeen_get_svg( array( 'icon' => 'play' ) ); + $settings['l10n']['pause'] = '' . __( 'Pause background video', 'twentyseventeen' ) . '' . twentyseventeen_get_svg( array( 'icon' => 'pause' ) ); + return $settings; +} +add_filter( 'header_video_settings', 'twentyseventeen_video_controls' ); diff --git a/src/wp-content/themes/twentyseventeen/rtl.css b/src/wp-content/themes/twentyseventeen/rtl.css index 84a74601c7..059355a8a0 100644 --- a/src/wp-content/themes/twentyseventeen/rtl.css +++ b/src/wp-content/themes/twentyseventeen/rtl.css @@ -95,12 +95,16 @@ input[type="checkbox"] { /* Front Page */ +.wp-custom-header-video-button { + left: 30px; + right: auto; +} + .twentyseventeen-panel .recent-posts .entry-header .edit-link { margin-left: 0; margin-right: 1em; } - /* Blog, Archive, Search */ .blog .entry-meta a.post-edit-link, diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css index 1610482a04..6e8e9984b1 100644 --- a/src/wp-content/themes/twentyseventeen/style.css +++ b/src/wp-content/themes/twentyseventeen/style.css @@ -1680,6 +1680,32 @@ body:not(.title-tagline-hidden) .site-branding-text { transform: translateX(-50%) translateY(-50%); } +.wp-custom-header .wp-custom-header-video-button { /* Speficity prevents .color-dark button overrides */ + background-color: rgba( 34, 34, 34, 0.5 ); + border: 1px solid rgba( 255, 255, 255, 0.6 ); + color: rgba( 255, 255, 255, 0.6 ); + height: 45px; + overflow: hidden; + padding: 0; + position: fixed; + right: 30px; + top: 30px; + -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; + width: 45px; +} + +.wp-custom-header .wp-custom-header-video-button:hover, +.wp-custom-header .wp-custom-header-video-button:focus { /* SSpeficity prevents .color-dark button overrides */ + border-color: rgba( 255, 255, 255, 0.8 ); + background-color: rgba( 34, 34, 34, 0.8 ); + color: #fff; +} + +.admin-bar .wp-custom-header-video-button { + top: 62px; +} + .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img { bottom: 0; position: absolute;