Greasy Fork is available in English.

YouTube - Search Box and Virtual Keyboard style to Material Design

Changes the search box and virtual keyboard style on YouTube to Material Design.

/* ==UserStyle==
@name         YouTube - Search Box and Virtual Keyboard style to Material Design
@namespace    https://greasyfork.org/en/users/734163-anonygold
@homepageURL  https://greasyfork.org/en/users/734163-anonygold
@version      1.0.1
@license      MIT
@description  Changes the search box and virtual keyboard style on YouTube to Material Design.
@author       Anonygold
==/UserStyle== */

@-moz-document domain("youtube.com") {
     ytd-searchbox[mode=legacy-centered] #search-form.ytd-searchbox, #search-icon-legacy.ytd-searchbox, #masthead-search, #masthead-search .search-btn-component, #search-form.ytd-searchbox {
         border-top-right-radius: 8px;
    }
     ytd-searchbox[mode=legacy-centered] #search-form.ytd-searchbox, #search-icon-legacy.ytd-searchbox, #masthead-search, #masthead-search .search-btn-component, #search-form.ytd-searchbox {
         border-top-left-radius: 8px;
    }
     ytd-searchbox[mode=legacy-centered] #search-form.ytd-searchbox, #search-icon-legacy.ytd-searchbox, .sbdd_b, .sbsb_a, #masthead-search, #masthead-search .search-btn-component, #search-form.ytd-searchbox, [dark] .gstl_50.sbdd_a > div {
         border-bottom-right-radius: 8px;
    }
     ytd-searchbox[mode=legacy-centered] #search-form.ytd-searchbox, #search-icon-legacy.ytd-searchbox, .sbdd_b, .sbsb_a, #masthead-search, #masthead-search .search-btn-component, #search-form.ytd-searchbox, [dark] .gstl_50.sbdd_a > div {
         border-bottom-left-radius: 8px;
    }
     ytd-searchbox[mode=legacy-centered][has-focus][style*="yt-swatch-primary:rgb(255,255,255"] #search-form.ytd-searchbox, ytd-searchbox[mode=legacy][has-focus][style*="yt-swatch-primary:rgb(255,255,255"] #search-form.ytd-searchbox, ytd-searchbox[mode=legacy-centered][style*="yt-swatch-primary:rgb(255,255,255"] #search-form.ytd-searchbox:hover, ytd-searchbox[mode][style*="yt-swatch-primary:rgb(255,255,255"] #search-form.ytd-searchbox:hover, .sbdd_b {
         border-color: rgb(223, 225, 229);
    }
     ytd-masthead:not([dark]) #search-form.ytd-searchbox:hover, ytd-masthead:not([dark]) ytd-searchbox.ytd-masthead[has-focus] #search-form.ytd-searchbox {
         border-color: rgb(242, 244, 247);
    }
     ytd-searchbox[mode=legacy-centered][style*="yt-swatch-primary:rgb(35,35,35"] #search-form.ytd-searchbox, html[dark] .sbdd_b, ytd-masthead[dark] #search-form.ytd-searchbox {
         border-color: #15171a;
    }
     ytd-masthead[dark] #search-form.ytd-searchbox:hover, ytd-masthead[dark] ytd-searchbox.ytd-masthead[has-focus] #search-form.ytd-searchbox {
         border-color: #1a1d20;
    }
     #search-form.ytd-searchbox, #masthead-search {
         border: 1px solid #dfe1e5;
    }
     ytd-searchbox[mode=legacy-centered] #container.ytd-searchbox, ytd-searchbox[mode=legacy][has-focus] #container.ytd-searchbox, ytd-searchbox[mode=legacy-centered][has-focus] #container.ytd-searchbox, #search-icon-legacy.ytd-searchbox, ytd-searchbox[mode=legacy] #search-icon-legacy.ytd-searchbox:hover, ytd-searchbox[mode=legacy-centered] #search-icon-legacy.ytd-searchbox:hover, ytd-searchbox[mode=legacy] #search-icon-legacy.ytd-searchbox:focus, ytd-searchbox[mode=legacy-centered] #search-icon-legacy.ytd-searchbox:focus, .sbfl_b, #masthead-search .search-btn-component, #container.ytd-searchbox, #search-icon-legacy.ytd-searchbox:hover, #search-icon-legacy.ytd-searchbox:focus {
         background: none;
    }
     ytd-searchbox[mode=legacy-centered] #container.ytd-searchbox, ytd-searchbox[mode=legacy][has-focus] #container.ytd-searchbox, ytd-searchbox[mode=legacy-centered][has-focus] #container.ytd-searchbox, #search-icon-legacy.ytd-searchbox, ytd-searchbox[mode=legacy] #search-icon-legacy.ytd-searchbox:hover, ytd-searchbox[mode=legacy-centered] #search-icon-legacy.ytd-searchbox:hover, ytd-searchbox[mode=legacy] #search-icon-legacy.ytd-searchbox:focus, ytd-searchbox[mode=legacy-centered] #search-icon-legacy.ytd-searchbox:focus, .vk-btn, .vk-btn:hover, .vk-btn:active, .vk-btn:focus, .vk-btn.vk-sf-s, #masthead-search-terms, #masthead-search .search-btn-component, #search-icon-legacy.ytd-searchbox:hover, ytd-searchbox[has-focus] #container.ytd-searchbox, #container.ytd-searchbox {
         box-shadow: none;
         -moz-box-shadow: none;
         -o-box-shadow: none;
         -webkit-box-shadow: none;
    }
     ytd-searchbox[mode=legacy-centered] #container.ytd-searchbox, ytd-searchbox[mode=legacy][has-focus] #container.ytd-searchbox, ytd-searchbox[mode=legacy-centered][has-focus] #container.ytd-searchbox, #search-icon-legacy.ytd-searchbox, ytd-searchbox[mode=legacy] #search-icon-legacy.ytd-searchbox:hover, ytd-searchbox[mode=legacy-centered] #search-icon-legacy.ytd-searchbox:hover, ytd-searchbox[mode=legacy] #search-icon-legacy.ytd-searchbox:focus, ytd-searchbox[mode=legacy-centered] #search-icon-legacy.ytd-searchbox:focus, .vk-btn, .vk-btn:hover, .vk-btn:active, .vk-btn:focus, .vk-box, .vk-btn.vk-sf-s, #masthead-search-terms, #masthead-search .search-btn-component, #search-icon-legacy.ytd-searchbox:hover, ytd-searchbox[has-focus] #container.ytd-searchbox, #container.ytd-searchbox {
         border: 0;
    }
     ytd-searchbox[mode=legacy] #container.ytd-searchbox, ytd-searchbox[mode=legacy-centered] #container.ytd-searchbox, #container.ytd-searchbox {
         padding: 0 8px 0 19px;
    }
     ytd-searchbox[mode=legacy-centered][has-focus] #search-form.ytd-searchbox, ytd-searchbox[mode=legacy][has-focus] #search-form.ytd-searchbox, ytd-searchbox[mode=legacy-centered] #search-form.ytd-searchbox:hover, ytd-searchbox[mode=legacy] #search-form.ytd-searchbox:hover, .sbdd_b, #masthead-search:hover, ytd-searchbox.ytd-masthead[has-focus] #search-form.ytd-searchbox, #search-form.ytd-searchbox:hover {
         box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .23);
    }
     ytd-searchbox[mode=legacy-centered][has-focus] #search-form.ytd-searchbox, ytd-searchbox[mode=legacy][has-focus] #search-form.ytd-searchbox, ytd-searchbox[mode=legacy-centered] #search-form.ytd-searchbox:hover, ytd-searchbox[mode=legacy] #search-form.ytd-searchbox:hover, .sbdd_b, #masthead-search:hover, ytd-searchbox.ytd-masthead[has-focus] #search-form.ytd-searchbox, #search-form.ytd-searchbox:hover {
         -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .23);
    }
     ytd-searchbox[mode=legacy-centered][has-focus] #search-form.ytd-searchbox, ytd-searchbox[mode=legacy][has-focus] #search-form.ytd-searchbox, ytd-searchbox[mode=legacy-centered] #search-form.ytd-searchbox:hover, ytd-searchbox[mode=legacy] #search-form.ytd-searchbox:hover, .sbdd_b, #masthead-search:hover, ytd-searchbox.ytd-masthead[has-focus] #search-form.ytd-searchbox, #search-form.ytd-searchbox:hover {
         -o-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .23);
    }
     ytd-searchbox[mode=legacy-centered][has-focus] #search-form.ytd-searchbox, ytd-searchbox[mode=legacy][has-focus] #search-form.ytd-searchbox, ytd-searchbox[mode=legacy-centered] #search-form.ytd-searchbox:hover, ytd-searchbox[mode=legacy] #search-form.ytd-searchbox:hover, .sbdd_b, #masthead-search:hover, ytd-searchbox.ytd-masthead[has-focus] #search-form.ytd-searchbox, #search-form.ytd-searchbox:hover {
         -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .23);
    }
     #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {
         color: #5f5f5f;
    }
     ytd-masthead[dark] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {
         color: #fdfdfd;
    }
     #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox, .vk-t-btn {
         opacity: 1;
    }
     #search-icon-legacy.ytd-searchbox {
         width: 50px;
    }
     .gsst_b {
         padding: 0;
    }
     #search-input.ytd-searchbox-spt input {
         margin-left: 0;
    }
     #search-input.ytd-searchbox-spt input, .gsst_b {
         line-height: 34px !important;
    }
     ytd-searchbox[mode=legacy-centered] #search-form.ytd-searchbox, .sbib_a {
         height: 34px !important;
    }
     .sbdd_a, .sbdd_c {
         -o-transform: translateY(-6px);
         -moz-transform: translateY(-6px);
         -webkit-transform: translateY(-6px);
         transform: translateY(-6px);
    }
     .sbfl_b {
         padding-right: 20px;
    }
     #search-icon-legacy.ytd-searchbox:before, .vk-t-btn-o:before, .vk-btn:before {
         content: "";
    }
     #search-icon-legacy.ytd-searchbox:before, .vk-t-btn-o:before, .vk-btn:before, #masthead-search {
         position: absolute;
    }
     #search-icon-legacy.ytd-searchbox:hover:active:before, .vk-t-btn-o:hover:active:before {
         -o-transition: transform .1s cubic-bezier(0.16, 0.71, 0.64, 0.97);
         -moz-transition: transform .1s cubic-bezier(0.16, 0.71, 0.64, 0.97);
         -webkit-transition: transform .1s cubic-bezier(0.16, 0.71, 0.64, 0.97);
         transition: transform .1s cubic-bezier(0.16, 0.71, 0.64, 0.97);
    }
     #search-icon-legacy.ytd-searchbox:before, .vk-t-btn-o:before {
         width: 29px;
         height: 29px;
    }
     #search-icon-legacy.ytd-searchbox:hover:active:before, .vk-t-btn-o:hover:active:before {
         opacity: 0.3;
    }
     #search-icon-legacy.ytd-searchbox:before, .vk-btn:before, .vk-t-btn-o:before {
         opacity: 0;
    }
     #search-icon-legacy.ytd-searchbox:before, .vk-t-btn-o:before {
         background: rgba(17, 17, 17, 0.4);
    }
     ytd-masthead[dark] #search-icon-legacy.ytd-searchbox:before {
         background: rgba(245, 245, 245, 0.9);
    }
     #search-icon-legacy.ytd-searchbox:hover:active:before, .vk-t-btn-o:hover:active:before {
         -webkit-transform: translate(-5px, -4px) scale(1);
         -moz-transform: translate(-5px, -4px) scale(1);
         -o-transform: translate(-5px, -4px) scale(1);
         transform: translate(-5px, -4px) scale(1);
    }
     #search-icon-legacy.ytd-searchbox:before, .vk-t-btn-o:before {
         -webkit-transform: translate(-5px, -4px) scale(0);
         -o-transform: translate(-5px, -4px) scale(0);
         -moz-transform: translate(-5px, -4px) scale(0);
         transform: translate(-5px, -4px) scale(0);
    }
     #search-icon-legacy.ytd-searchbox:before, .vk-btn:before, .vk-t-btn-o:before {
         border-radius: 50%;
    }
     #search-icon-legacy.ytd-searchbox:before, .vk-t-btn-o:before {
         animation-name: afterclickingeffect;
         -webkit-animation-name: afterclickingeffect;
         -moz-animation-name: afterclickingeffect;
    }
     .vk-btn:hover:active:before {
         -webkit-animation-name: keybtn-click;
         -moz-animation-name: keybtn-click;
         animation-name: keybtn-click;
    }
     .vk-btn:before {
         -webkit-animation-name: keybtn-afterclicking;
         -moz-animation-name: keybtn-afterclicking;
         animation-name: keybtn-afterclicking;
    }
     .vk-btn:hover:active:before {
         animation-fill-mode: forwards;
         -webkit-animation-fill-mode: forwards;
         -moz-animation-fill-mode: forwards;
    }
     #search-icon-legacy.ytd-searchbox:before, .vk-t-btn-o:before {
         animation-duration: .5s;
         -moz-animation-duration: .5s;
         -webkit-animation-duration: .5s;
    }
     #search-icon-legacy.ytd-searchbox:hover:active:before, .vk-t-btn-o:hover:active:before {
         -webkit-animation-name: none;
         -moz-animation-name: none;
         animation-name: none;
    }
     .vk-btn:hover:active:before, .vk-btn:before {
         animation-duration: .7s;
         -webkit-animation-duration: .7s;
         -moz-animation-duration: .7s;
    }
     .gsfs {
         color: var(--yt-primary-text-color);
    }
     [dark] .gstl_50.sbdd_a .sbsb_d, .sbsb_d {
         background: var(--yt-newsearch-suggestions-hover) !important;
    }
     [dark] .gstl_50.sbdd_a .sbsb_d * {
         background: none !important;
    }
     [dark="true"] .sbfl_a:hover {
         color: #888;
    }
     .sbsb_a {
         padding: 10px 0 7px;
    }
     .sbsb_d {
         -webkit-transition: background .09s ease-in-out;
         -moz-transition: background .09s ease-in-out;
         -o-transition: background .09s ease-in-out;
         transition: background .09s ease-in-out;
    }
     [dark="true"] .sbpqs_a {
         color: #976cc1;
    }
     .gsst_e, .gsst_a:hover .gsst_e, .gsst_a:hover .gsst_e, .gsst_a:focus .gsst_e, .gsst_a:active .gsst_e {
         opacity: .998;
    }
     [dark="true"] .vk-box {
         background: #232323;
    }
     [dark="true"] .vk-t {
         color: #fff;
    }
     [dark="true"] .vk-t-btn-o.vk-sf-cl, [dark="true"] .vk-btn span {
         -webkit-filter: invert(100%);
         -moz-filter: invert(100%);
         filter: invert(100%);
    }
     .vk-btn {
         -webkit-transition: background .2s ease-in-out 0s;
         -moz-transition: background .2s ease-in-out 0s;
         -o-transition: background .2s ease-in-out 0s;
         transition: background .2s ease-in-out 0s;
    }
     .vk-btn, .vk-btn:before {
         background: rgba(155, 155, 155, .15);
    }
     .vk-btn.vk-sf-h, .vk-btn.vk-sf-a, .vk-btn.vk-sf-s {
         background: rgba(155, 155, 155, .25);
    }
     .vk-btn:before {
         left: 50%;
         margin-left: -15px;
         top: 0;
         width: 30px;
         height: 30px;
         display: block;
         position: absolute;
         transform: scale(15);
         -webkit-transition: transform .3s ease-in-out 0s, opacity .5s ease-in-out 0s;
         -moz-transition: transform .3s ease-in-out 0s, opacity .5s ease-in-out 0s;
         -o-transition: transform .3s ease-in-out 0s, opacity .5s ease-in-out 0s;
         transition: transform .3s ease-in-out 0s, opacity .5s ease-in-out 0s;
    }
     .vk-btn {
         overflow: hidden;
    }
     .vk-cap {
         -webkit-transition: opacity .2s ease-in-out 0s, color .2s ease-in-out 0s;
         -moz-transition: opacity .2s ease-in-out 0s, color .2s ease-in-out 0s;
         -o-transition: opacity .2s ease-in-out 0s, color .2s ease-in-out 0s;
         transition: opacity .2s ease-in-out 0s, color .2s ease-in-out 0s;
    }
     #yt-masthead .search-btn-component .yt-uix-button-content {
         margin: 0 15px;
    }
     #masthead-search .search-btn-component {
         margin-left: 6px;
    }
     #masthead-search {
         margin-top: 0;
    }
     #masthead-search .search-btn-component, #masthead-search-terms, #masthead-search .sbib_a {
         height: 32px !important;
    }
     #masthead-search .gsst_b {
         line-height: 32px !important;
    }
     #masthead-search-terms {
         margin-bottom: 0;
    }
     #masthead-search-terms .sbib_b, #masthead-search-terms input {
         padding: 0 12px;
    }
     #masthead-search .search-btn-component .yt-uix-button-content {
         opacity: .97;
    }
     #body .sbdd_a .sbdd_b {
         background: #fff;
    }
     #body .sbdd_a, #body .sbdd_c {
         -webkit-transform: translateY(11px);
         -moz-transform: translateY(11px);
         -o-transform: translateY(11px);
         transform: translateY(11px);
         z-index: 8000;
    }
     #masthead-search {
         width: 50vw;
    }
     #body .sbsb_d {
         background: #eee;
    }
     #body .sbsb_d, .sbsb_c {
         padding: 3px 6px;
    }
     .vk-t {
         margin-bottom: 8px;
    }
     .vk-t-btn-o {
         cursor: pointer;
         top: 7px;
         padding-top: 4px;
         padding-left: 6px;
         margin-right: 10px;
         height: 25px;
         padding-right: 9px !important;
    }
     .vk-t-btn {
         margin-top: 4px;
         margin-left: 2px;
    }
     .vk-t {
         font-size: 15px;
    }
     [dark="true"] .sbsb_d {
         background: #3a3a3a;
    }
     :not(.style-scope)[dark] *:not(.style-scope) {
         --yt-newsearch-suggestions-hover: #3a3a3a;
    }
     :not(.style-scope) *:not(.style-scope) {
         --yt-newsearch-suggestions-hover: #e6e6e6;
    }
     #container.ytd-searchbox {
         outline: 0;
    }
     @keyframes afterclickingeffect {
         from {
             opacity: .3;
             transform: translate(-5px, -4px) scale(1);
        }
         to {
             opacity: 0;
             transform: translate(-5px, -4px) scale(1);
        }
    }
     @keyframes keybtn-click {
         from {
             opacity: 1;
             transform: scale(0);
        }
         to {
             opacity: 1;
             transform: scale(15);
        }
    }
     @keyframes keybtn-afterclicking {
         from {
             opacity: 1;
             transform: scale(15);
        }
         to {
             opacity: 0;
             transform: scale(15);
        }
    }
}