[Pale-Moon] Issue #1872 - Part 4: Tweak search box styling some more.

This commit is contained in:
Moonchild 2021-07-01 17:18:44 +00:00 committed by roytam1
commit ae5e18f518
3 changed files with 31 additions and 41 deletions

View file

@ -51,11 +51,11 @@ a {
background-repeat: no-repeat;
}
/* SEARCH */
#searchForm {
width: 470px;
}
/* SEARCH */
#searchContainer {
display: -moz-box;
position: relative;
@ -117,7 +117,7 @@ a {
#searchText[keepfocus],
#searchText:focus {
border-color: hsla(234,50%,60%,.6) hsla(234,38%,52%,.6) hsla(234,50%,40%,.6);
border-color: hsla(234,0%,60%,.6) hsla(234,0%,52%,.6) hsla(234,0%,40%,.6);
}
#searchSubmit {
@ -126,7 +126,7 @@ a {
border: 1px solid;
background-color: #e0e0e0;
color: black;
border-color: hsla(238,45%,20%,.15) hsla(238,45%,20%,.17) hsla(238,45%,20%,.2);
border-color: hsla(234,0%,20%,.15) hsla(234,0%,20%,.17) hsla(234,0%,20%,.2);
border-radius: 0 2.5px 2.5px 0;
box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
0 1px 0 hsla(0,0%,100%,.2);
@ -139,32 +139,27 @@ a {
}
#searchSubmit:hover {
background-color: hsl(220,54%,20%);
background-color: hsl(220,54%,30%);
color: white;
}
#searchText:focus + #searchSubmit,
#searchText + #searchSubmit:hover {
border-color: #5985fc #4573e7 #3264d5;
border-color: #808080;
}
#searchText:focus + #searchSubmit,
#searchText[keepfocus] + #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(238,45%,20%,.03);
}
#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(238,45%,20%,.03),
0 0 4px hsla(236,60%,20%,.2);
#searchText[keepfocus],
#searchText:focus,
#searchText[keepfocus] + #searchSubmit,
#searchText:focus + #searchSubmit
{
box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
0 2px 4px 0px rgba(37,37,37,.2);
}
#searchText + #searchSubmit:hover:active {
box-shadow: 0 1px 1px hsla(239,40%,6%,.1) inset,
0 0 1px hsla(239,40%,6%,.2) inset;
background-color: hsl(220,24%,10%);
color: #a0a0a0;
}
/* LAUNCHER */

View file

@ -13,7 +13,7 @@ body {
height: 100%;
padding: 0;
margin: 0;
background-color: #ececec;
background-color: rgb(229,229,229);
display: -moz-box;
position: relative;
-moz-box-flex: 1;
@ -290,7 +290,7 @@ input[type=button] {
#searchText[keepfocus],
#searchText:focus {
border-color: hsla(234,50%,60%,.6) hsla(234,38%,52%,.6) hsla(234,50%,40%,.6);
border-color: hsla(234,0%,60%,.6) hsla(234,0%,52%,.6) hsla(234,0%,40%,.6);
}
#searchSubmit {
@ -299,7 +299,7 @@ input[type=button] {
border: 1px solid;
background-color: #e0e0e0;
color: black;
border-color: hsla(238,45%,20%,.15) hsla(238,45%,20%,.17) hsla(238,45%,20%,.2);
border-color: hsla(234,0%,20%,.15) hsla(234,0%,20%,.17) hsla(234,0%,20%,.2);
border-radius: 0 2.5px 2.5px 0;
box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
0 1px 0 hsla(0,0%,100%,.2);
@ -312,32 +312,27 @@ input[type=button] {
}
#searchSubmit:hover {
background-color: hsl(220,54%,20%);
background-color: hsl(220,54%,30%);
color: white;
}
#searchText:focus + #searchSubmit,
#searchText + #searchSubmit:hover {
border-color: #5985fc #4573e7 #3264d5;
border-color: #808080;
}
#searchText:focus + #searchSubmit,
#searchText[keepfocus] + #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(238,45%,20%,.03);
}
#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(238,45%,20%,.03),
0 0 4px hsla(236,60%,20%,.2);
#searchText[keepfocus],
#searchText:focus,
#searchText[keepfocus] + #searchSubmit,
#searchText:focus + #searchSubmit
{
box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
0 2px 4px 0px rgba(37,37,37,.2);
}
#searchText + #searchSubmit:hover:active {
box-shadow: 0 1px 1px hsla(239,40%,6%,.1) inset,
0 0 1px hsla(239,40%,6%,.2) inset;
background-color: hsl(220,24%,10%);
color: #a0a0a0;
}
.contentSearchSuggestionTable {

View file

@ -106,7 +106,7 @@ body {
.newtab-site:hover,
.newtab-site[dragged] {
box-shadow: 0 3px 6px 1px rgba(8,20,37,.6);
box-shadow: 0 2px 4px 0px rgba(37,37,37,.2);
}
.newtab-site[dragged] {
@ -125,8 +125,8 @@ body {
/* TITLES */
.newtab-title {
padding: 0 8px 1px;
background-color: rgba(248,249,251,.95);
color: #1f364c;
background-color: rgba(229,229,229,.95);
color: black;
line-height: 24px;
}