/* ==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.0
@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 {
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 {
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;
}
.sbdd_b, .sbsb_a {
background: var(--yt-dialog-background);
}
.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);
}
}
}
