mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-10-07 07:47:30 +09:00
Issue #517 Part 1: Fix newtab Search
This commit is contained in:
parent
48cdeab201
commit
1f2fcc868f
7 changed files with 217 additions and 68 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue