Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-26 22:32:52 +02:00
Code Issues Projects Releases Wiki Activity

Twenty Seventeen: Add styles for custom header video controls.

Browse Source 
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.
Built from https://develop.svn.wordpress.org/trunk@39273


git-svn-id: http://core.svn.wordpress.org/trunk@39213 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Joe McGill 2016-11-16 23:38:29 +00:00
parent 5ef714db18
commit 72606bed34
5 changed files with 48 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
wp-content/themes/twentyseventeen/assets/images/svg-icons.svg
View File

@ -138,5 +138,11 @@
<symbol id="icon-arrow-right" viewBox="0 0 43 32">
<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>
</symbol>
<symbol id="icon-play" viewBox="0 0 22 28">
<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>
</symbol>
<symbol id="icon-pause" viewBox="0 0 24 28">
<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>
</symbol>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

10
wp-content/themes/twentyseventeen/inc/custom-header.php
View File

@ -94,3 +94,13 @@ function twentyseventeen_header_style() {
<?php
}
endif; // End of twentyseventeen_header_style.
/**
* Customize video play/pause button in the custom header.
*/
function twentyseventeen_video_controls( $settings ) {
$settings['l10n']['play'] = '<span class="screen-reader-text">' . __( 'Play background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'play' ) );
$settings['l10n']['pause'] = '<span class="screen-reader-text">' . __( 'Pause background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'pause' ) );
return $settings;
}
add_filter( 'header_video_settings', 'twentyseventeen_video_controls' );

6
wp-content/themes/twentyseventeen/rtl.css
View File

@ -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,

26
wp-content/themes/twentyseventeen/style.css
View File

@ -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;

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.7-beta4-39272';
$wp_version = '4.7-beta4-39273';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.