Ticket #38697: 38697.2.diff

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

@@ -236 +236 @@
         color: #ddd;
 }
 
+.colors-dark #wp-custom-header-video-button {
+        background-color: rgba( 221, 221, 221, 0.3 ); /* Equivilant to #ddd */
+}
+
+.colors-dark #wp-custom-header-video-button:hover,
+.colors-dark #wp-custom-header-video-button:focus {
+        background-color: rgba( 221, 221, 221, 0.8 ); /* Equivilant to #ddd */
+}
+
 .colors-dark h2,
 .colors-dark blockquote,
 .colors-dark input[type="text"],
@@ -480 +489 @@
         box-shadow: 0 0 0 8px #222;
 }
 
-.colors-dark .entry-footer .edit-link a.post-edit-link {
+.colors-dark .entry-footer .edit-link a.post-edit-link,
+.colors-dark #wp-custom-header-video-button:hover,
+.colors-dark #wp-custom-header-video-button:focus {
         color: #000;
 }
 
+.colors-dark #wp-custom-header-video-button {
+        color: rgba( 0, 0, 0, 0.5 ); /* Equivalent to #000 */
+}
+
 .colors-dark .menu-toggle,
 .colors-dark .menu-toggle:hover,
 .colors-dark .menu-toggle:focus,

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

@@ -138 +138 @@
 <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>

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

@@ -148 +148 @@
                 return 'http://www.w3.org/2000/svg' === ( 'undefined' !== typeof SVGRect && div.firstChild && div.firstChild.namespaceURI );
         }
 
+        // Add play/pause SVGs to video button.
+        $( document ).on( 'wp-custom-header-video-loaded', function( event ) {
+
+                // Add slight delay before swapping in play/pause icons, to make sure button is loaded.
+                function iconLoad() {
+                        $( '#wp-custom-header-video-button' ).append( twentyseventeenScreenReaderText.playpause );
+                        }
+                setTimeout( iconLoad, 1000 );
+
+        } );
+
         // Fire on document ready.
         $( document ).ready( function() {
 

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

@@ -374 +374 @@
 
         $twentyseventeen_l10n = array(
                 'quote'          => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ),
+                'playpause'     => twentyseventeen_get_svg( array( 'icon' => 'play' ) ) . twentyseventeen_get_svg( array( 'icon' => 'pause' ) ),
+
         );
 
         if ( has_nav_menu( 'top' ) ) {

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

@@ -148 +148 @@
         color: hsl( ' . $hue . ', ' . $saturation . ', 13% ); /* base: #222; */
 }
 
+.colors-custom #wp-custom-header-video-button {
+        background-color: hsla( ' . $hue . ', ' . $saturation . ', 15%, 0.3 ); /* base: #222; */
+}
+
+.colors-custom #wp-custom-header-video-button:hover,
+.colors-custom #wp-custom-header-video-button:focus {
+        background-color: hsla( ' . $hue . ', ' . $saturation . ', 15%, 0.8 ); /* base: #222; */
+}
+
 .colors-custom .entry-content a:focus,
 .colors-custom .entry-content a:hover,
 .colors-custom .entry-summary a:focus,

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

@@ -95 +95 @@
 
 /* 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,

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

@@ -1680 +1680 @@
         transform: translateX(-50%) translateY(-50%);
 }
 
+#wp-custom-header-video-button {
+        background-color: rgba( 34, 34, 34, 0.3 );
+        -webkit-border-radius: 2px;
+        border-radius: 2px;
+        color: rgba( 255, 255, 255, 0.5 );
+        height: 45px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        right: 30px;
+        top: 30px;
+        -webkit-transition: background-color 0.2s ease-in-out, color 0.3s ease-in-out;
+        transition: background-color 0.2s ease-in-out, color 0.3s ease-in-out;
+        width: 45px;
+        z-index: 2;
+}
+
+#wp-custom-header-video-button:hover,
+#wp-custom-header-video-button:focus {
+        background-color: rgba( 34, 34, 34, 0.8 );
+        color: #fff;
+}
+
+.wp-custom-header-video-button-text,
+.wp-custom-header-video-play .icon-play,
+.wp-custom-header-video-pause .icon-pause {
+        display: none;
+}
+
 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img {
         bottom: 0;
         position: absolute;