Issue #517 Part 1: Fix newtab Search

This commit is contained in:
wolfbeast 2018-06-20 16:27:18 +02:00 • committed by Roy Tam
commit 1f2fcc868f
7 changed files with 217 additions and 68 deletions

View file

@ -326,24 +326,24 @@ body.compact .newtab-cell {
}
/* SEARCH */
#newtab-search-container {
#searchContainer {
display: -moz-box;
position: relative;
-moz-box-pack: center;
margin: 40px 0 15px;
}
body.compact #newtab-search-container {
body.compact #searchContainer {
margin-top: 0;
margin-bottom: 80px;
}
#newtab-search-container[page-disabled] {
#searchContainer[page-disabled] {
opacity: 0;
pointer-events: none;
}
#newtab-search-form {
#searchForm {
display: -moz-box;
position: relative;
height: 36px;
@ -351,21 +351,20 @@ body.compact #newtab-search-container {
max-width: 600px; /* 2 * (290 cell width + 10 cell margin) */
}
#newtab-search-icon {
#searchEngineLogo {
border: 1px transparent;
padding: 0;
padding: 2px 4px;
margin: 0;
width: 36px;
height: 36px;
background: url("chrome://browser/skin/search-indicator-magnifying-glass.svg") center center no-repeat;
width: 32px;
height: 32px;
position: absolute;
}
#newtab-search-text {
#searchText {
-moz-box-flex: 1;
padding-top: 6px;
padding-bottom: 6px;
padding-inline-start: 34px;
padding-inline-start: 42px;
padding-inline-end: 8px;
background: hsla(0,0%,100%,.9) padding-box;
border: 1px solid;
@ -379,31 +378,31 @@ body.compact #newtab-search-container {
unicode-bidi: plaintext;
}
#newtab-search-text:dir(rtl) {
#searchText:dir(rtl) {
border-radius: 0 2px 2px 0;
}
#newtab-search-text[aria-expanded="true"] {
#searchText[aria-expanded="true"] {
border-radius: 2px 0 0 0;
}
#newtab-search-text[aria-expanded="true"]:dir(rtl) {
#searchText[aria-expanded="true"]:dir(rtl) {
border-radius: 0 2px 0 0;
}
#newtab-search-text[keepfocus],
#newtab-search-text:focus,
#newtab-search-text[autofocus] {
border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6);
#searchText[keepfocus],
#searchText:focus,
#searchText[autofocus] {
border-color: hsla(216,100%,60%,.6) hsla(216,76%,52%,.6) hsla(214,100%,40%,.6);
}
#newtab-search-submit {
#searchSubmit {
margin-inline-start: -1px;
color: transparent;
background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") center center no-repeat, linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;
padding: 0;
border: 1px solid;
border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
background color: #e0e0e0;
color: black;
border-color: hsla(220,54%,20%,.15) hsla(220,54%,20%,.17) hsla(220,54%,20%,.2);
border-radius: 0 2px 2px 0;
border-inline-start: 1px solid transparent;
box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
@ -414,47 +413,42 @@ body.compact #newtab-search-container {
width: 50px;
}
#newtab-search-submit:dir(rtl) {
#searchSubmit:dir(rtl) {
border-radius: 2px 0 0 2px;
background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl"), linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1));
}
#newtab-search-text:focus + #newtab-search-submit,
#newtab-search-text + #newtab-search-submit:hover,
#newtab-search-text[autofocus] + #newtab-search-submit {
border-color: #59b5fc #45a3e7 #3294d5;
#searchSubmit:hover {
background-color: hsl(220,54%,20%);
color: white;
}
#newtab-search-text:focus + #newtab-search-submit,
#newtab-search-text[keepfocus] + #newtab-search-submit,
#newtab-search-text[autofocus] + #newtab-search-submit {
background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#4cb1ff, #1793e5);
#searchText:focus + #searchSubmit,
#searchText + #searchSubmit:hover,
#searchText[autofocus] + #searchSubmit {
border-color: #5985fc #4573e7 #3264d5;
}
#searchText:focus + #searchSubmit,
#searchText[keepfocus] + #searchSubmit,
#searchText[autofocus] + #searchSubmit {
box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
0 0 0 1px hsla(0,0%,100%,.1) inset,
0 1px 0 hsla(210,54%,20%,.03);
0 1px 0 hsla(220,54%,20%,.03);
}
#newtab-search-text + #newtab-search-submit:hover {
background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#4cb1ff, #1793e5);
#searchText + #searchSubmit:hover {
box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
0 0 0 1px hsla(0,0%,100%,.1) inset,
0 1px 0 hsla(210,54%,20%,.03),
0 0 4px hsla(206,100%,20%,.2);
0 1px 0 hsla(220,54%,20%,.03),
0 0 4px hsla(216,100%,20%,.2);
}
#newtab-search-text + #newtab-search-submit:hover:active {
box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
0 0 1px hsla(211,79%,6%,.2) inset;
#searchText + #searchSubmit:hover:active {
box-shadow: 0 1px 1px hsla(221,79%,6%,.1) inset,
0 0 1px hsla(221,79%,6%,.2) inset;
transition-duration: 0ms;
}
#newtab-search-text:focus + #newtab-search-submit:dir(rtl),
#newtab-search-text[keepfocus] + #newtab-search-submit:dir(rtl),
#newtab-search-text[autofocus] + #newtab-search-submit:dir(rtl),
#newtab-search-text + #newtab-search-submit:dir(rtl):hover {
background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl-inverted"), linear-gradient(#4cb1ff, #1793e5);
}
/* CUSTOMIZE */
#newtab-customize-overlay {
opacity: 0;