mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-03 14:28:39 +09:00
[Pale-Moon] Issue #1872 - Part 6: Revisit styling to base it more on previous about:home
- Redo search box colors - Redo newtab cell titles and hover-drag shading
This commit is contained in:
Moonchild
roytam1
parent
b33cc1faa8
commit
5c628bbf77
4 changed files with 126 additions and 123 deletions
|
|
@ -7,7 +7,7 @@
|
|||
html {
|
||||
font: message-box;
|
||||
font-size: 100%;
|
||||
background-color: rgb(229,229,229);
|
||||
background-color: #e5e5e5;
|
||||
color: #000;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -52,10 +52,6 @@ a {
|
|||
}
|
||||
|
||||
/* SEARCH */
|
||||
#searchForm {
|
||||
width: 470px;
|
||||
}
|
||||
|
||||
#searchContainer {
|
||||
display: -moz-box;
|
||||
position: relative;
|
||||
|
|
@ -63,19 +59,26 @@ a {
|
|||
margin: 10px 0 15px;
|
||||
}
|
||||
|
||||
#searchContainer[page-disabled] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#searchForm {
|
||||
width: 470px;
|
||||
display: -moz-box;
|
||||
position: relative;
|
||||
height: 36px;
|
||||
height: 36px; /* 32 px logo + 2*1px pad + 2*1px border */
|
||||
-moz-box-flex: 1;
|
||||
max-width: 600px; /* 2 * (290 cell width + 10 cell margin) */
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* #searchLogoContainer {
|
||||
display: -moz-box;
|
||||
-moz-box-align: center;
|
||||
padding-top: 2px;
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
|
||||
#searchLogoContainer[hidden] {
|
||||
display: none;
|
||||
}*/
|
||||
|
||||
#searchEngineLogo {
|
||||
border: 1px transparent;
|
||||
padding: 2px 4px 2px 2px;
|
||||
|
|
@ -89,77 +92,71 @@ a {
|
|||
-moz-box-flex: 1;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-inline-start: 42px;
|
||||
padding-inline-start: 42px; /* room for logo */
|
||||
padding-inline-end: 8px;
|
||||
background: hsla(0,0%,100%,.9) padding-box;
|
||||
background: rgba(255, 255, 255, 0.9) padding-box;
|
||||
border: 1px solid;
|
||||
border-spacing: 0;
|
||||
border-radius: 2px 0 0 2px;
|
||||
border-color: hsla(228,54%,20%,.15) hsla(228,54%,20%,.17) hsla(228,54%,20%,.2);
|
||||
box-shadow: 0 1px 0 hsla(228,65%,9%,.02) inset,
|
||||
0 0 2px hsla(228,65%,9%,.1) inset,
|
||||
0 1px 0 hsla(0,0%,100%,.2);
|
||||
color: inherit;
|
||||
unicode-bidi: plaintext;
|
||||
border-color: rgba(37, 46, 65, 0.15) rgba(37, 46, 65, 0.17) rgba(37, 46, 65, 0.2);
|
||||
box-shadow: 0 1px 0 rgba(37, 46, 65, 0.02) inset,
|
||||
0 0 2px rgba(37, 46, 65, 0.1) inset,
|
||||
0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2.5px 0 0 2.5px;
|
||||
}
|
||||
|
||||
#searchText:dir(rtl) {
|
||||
border-radius: 0 2px 2px 0;
|
||||
#searchText:-moz-dir(rtl) {
|
||||
border-radius: 0 2.5px 2.5px 0;
|
||||
}
|
||||
|
||||
#searchText[aria-expanded="true"] {
|
||||
border-radius: 2px 0 0 0;
|
||||
}
|
||||
|
||||
#searchText[aria-expanded="true"]:dir(rtl) {
|
||||
border-radius: 0 2px 0 0;
|
||||
}
|
||||
|
||||
#searchText[keepfocus],
|
||||
#searchText:focus {
|
||||
border-color: hsla(234,0%,60%,.6) hsla(234,0%,52%,.6) hsla(234,0%,40%,.6);
|
||||
#searchText:focus,
|
||||
#searchText[autofocus] {
|
||||
border-color: rgba(92, 133, 214, 0.6) rgba(78, 114, 188, 0.6) rgba(41, 82, 163, 0.6);
|
||||
}
|
||||
|
||||
#searchSubmit {
|
||||
margin-inline-start: -1px;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)) padding-box;
|
||||
padding: 0 9px;
|
||||
border: 1px solid;
|
||||
background-color: #e0e0e0;
|
||||
color: black;
|
||||
border-color: hsla(234,0%,20%,.15) hsla(234,0%,20%,.17) hsla(234,0%,20%,.2);
|
||||
border-color: rgba(37, 46, 65, 0.2) rgba(37, 46, 65, 0.2) rgba(37, 46, 65, 0.2);
|
||||
border-inline-start: 1px solid transparent;
|
||||
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);
|
||||
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5) inset,
|
||||
0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
transition-property: background-color, border-color, box-shadow;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
#searchSubmit:dir(rtl) {
|
||||
border-radius: 2px 0 0 2px;
|
||||
#searchSubmit:-moz-dir(rtl) {
|
||||
border-radius: 2.5px 0 0 2.5px;
|
||||
}
|
||||
|
||||
#searchSubmit:hover {
|
||||
background-color: hsl(220,54%,30%);
|
||||
#searchText:focus + #searchSubmit,
|
||||
#searchText + #searchSubmit:hover,
|
||||
#searchText[autofocus] + #searchSubmit {
|
||||
border-color: #8da1c8 #768bb5 #6579a2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#searchText:focus + #searchSubmit,
|
||||
#searchText + #searchSubmit:hover {
|
||||
border-color: #808080;
|
||||
#searchText[autofocus] + #searchSubmit {
|
||||
background-image: linear-gradient(#85a8e0, #3d75cf);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
|
||||
0 1px 0 rgba(23, 46, 67, 0.03);
|
||||
}
|
||||
|
||||
#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 {
|
||||
background-image: linear-gradient(#85a8e0, #3d75cf);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
|
||||
0 1px 0 rgba(23, 42, 79, 0.03),
|
||||
0 0 4px rgba(0, 34, 102, 0.2);}
|
||||
|
||||
#searchText + #searchSubmit:hover:active {
|
||||
background-color: hsl(220,24%,10%);
|
||||
color: #a0a0a0;
|
||||
box-shadow: 0 1px 1px rgba(3, 11, 27, 0.1) inset,
|
||||
0 0 1px rgba(3, 11, 27, 0.2) inset;
|
||||
transition-duration: 0ms;
|
||||
}
|
||||
|
||||
/* LAUNCHER */
|
||||
|
|
@ -168,10 +165,10 @@ a {
|
|||
-moz-box-align: center;
|
||||
-moz-box-pack: center;
|
||||
width: 100%;
|
||||
background-color: rgba(0,0,0,.03);
|
||||
border-top: 1px solid rgba(0,0,0,.03);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.02) inset,
|
||||
0 -1px 0 rgba(255,255,255,.25);
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.03);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset,
|
||||
0 -1px 0 rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
#launcher:not([session]),
|
||||
|
|
@ -193,12 +190,12 @@ body[narrow] #launcher[session] {
|
|||
white-space: normal;
|
||||
background: transparent padding-box;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
border-radius: 2.5px;
|
||||
color: #525c66;
|
||||
font-size: 75%;
|
||||
cursor: pointer;
|
||||
transition-property: background-color, border-color, box-shadow;
|
||||
transition-duration: 120ms;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
body[narrow] #launcher[session] > .launchButton {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ body {
|
|||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: rgb(229,229,229);
|
||||
background-color: #e5e5e5;
|
||||
display: -moz-box;
|
||||
position: relative;
|
||||
-moz-box-flex: 1;
|
||||
|
|
@ -242,13 +242,25 @@ input[type=button] {
|
|||
}
|
||||
|
||||
#searchForm {
|
||||
width: 470px;
|
||||
display: -moz-box;
|
||||
position: relative;
|
||||
height: 36px;
|
||||
height: 36px; /* 32 px logo + 2*1px pad + 2*1px border */
|
||||
-moz-box-flex: 1;
|
||||
max-width: 600px; /* 2 * (290 cell width + 10 cell margin) */
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* #searchLogoContainer {
|
||||
display: -moz-box;
|
||||
-moz-box-align: center;
|
||||
padding-top: 2px;
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
|
||||
#searchLogoContainer[hidden] {
|
||||
display: none;
|
||||
}*/
|
||||
|
||||
#searchEngineLogo {
|
||||
border: 1px transparent;
|
||||
padding: 2px 4px 2px 2px;
|
||||
|
|
@ -262,77 +274,71 @@ input[type=button] {
|
|||
-moz-box-flex: 1;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-inline-start: 42px;
|
||||
padding-inline-start: 42px; /* room for logo */
|
||||
padding-inline-end: 8px;
|
||||
background: hsla(0,0%,100%,.9) padding-box;
|
||||
background: rgba(255, 255, 255, 0.9) padding-box;
|
||||
border: 1px solid;
|
||||
border-spacing: 0;
|
||||
border-radius: 2px 0 0 2px;
|
||||
border-color: hsla(228,54%,20%,.15) hsla(228,54%,20%,.17) hsla(228,54%,20%,.2);
|
||||
box-shadow: 0 1px 0 hsla(228,65%,9%,.02) inset,
|
||||
0 0 2px hsla(228,65%,9%,.1) inset,
|
||||
0 1px 0 hsla(0,0%,100%,.2);
|
||||
color: inherit;
|
||||
unicode-bidi: plaintext;
|
||||
border-color: rgba(37, 46, 65, 0.15) rgba(37, 46, 65, 0.17) rgba(37, 46, 65, 0.2);
|
||||
box-shadow: 0 1px 0 rgba(37, 46, 65, 0.02) inset,
|
||||
0 0 2px rgba(37, 46, 65, 0.1) inset,
|
||||
0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2.5px 0 0 2.5px;
|
||||
}
|
||||
|
||||
#searchText:dir(rtl) {
|
||||
border-radius: 0 2px 2px 0;
|
||||
#searchText:-moz-dir(rtl) {
|
||||
border-radius: 0 2.5px 2.5px 0;
|
||||
}
|
||||
|
||||
#searchText[aria-expanded="true"] {
|
||||
border-radius: 2px 0 0 0;
|
||||
}
|
||||
|
||||
#searchText[aria-expanded="true"]:dir(rtl) {
|
||||
border-radius: 0 2px 0 0;
|
||||
}
|
||||
|
||||
#searchText[keepfocus],
|
||||
#searchText:focus {
|
||||
border-color: hsla(234,0%,60%,.6) hsla(234,0%,52%,.6) hsla(234,0%,40%,.6);
|
||||
#searchText:focus,
|
||||
#searchText[autofocus] {
|
||||
border-color: rgba(92, 133, 214, 0.6) rgba(78, 114, 188, 0.6) rgba(41, 82, 163, 0.6);
|
||||
}
|
||||
|
||||
#searchSubmit {
|
||||
margin-inline-start: -1px;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)) padding-box;
|
||||
padding: 0 9px;
|
||||
border: 1px solid;
|
||||
background-color: #e0e0e0;
|
||||
color: black;
|
||||
border-color: hsla(234,0%,20%,.15) hsla(234,0%,20%,.17) hsla(234,0%,20%,.2);
|
||||
border-color: rgba(37, 46, 65, 0.2) rgba(37, 46, 65, 0.2) rgba(37, 46, 65, 0.2);
|
||||
border-inline-start: 1px solid transparent;
|
||||
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);
|
||||
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5) inset,
|
||||
0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
transition-property: background-color, border-color, box-shadow;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
#searchSubmit:dir(rtl) {
|
||||
border-radius: 2px 0 0 2px;
|
||||
#searchSubmit:-moz-dir(rtl) {
|
||||
border-radius: 2.5px 0 0 2.5px;
|
||||
}
|
||||
|
||||
#searchSubmit:hover {
|
||||
background-color: hsl(220,54%,30%);
|
||||
#searchText:focus + #searchSubmit,
|
||||
#searchText + #searchSubmit:hover,
|
||||
#searchText[autofocus] + #searchSubmit {
|
||||
border-color: #8da1c8 #768bb5 #6579a2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#searchText:focus + #searchSubmit,
|
||||
#searchText + #searchSubmit:hover {
|
||||
border-color: #808080;
|
||||
#searchText[autofocus] + #searchSubmit {
|
||||
background-image: linear-gradient(#85a8e0, #3d75cf);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
|
||||
0 1px 0 rgba(23, 46, 67, 0.03);
|
||||
}
|
||||
|
||||
#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 {
|
||||
background-image: linear-gradient(#85a8e0, #3d75cf);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
|
||||
0 1px 0 rgba(23, 42, 79, 0.03),
|
||||
0 0 4px rgba(0, 34, 102, 0.2);}
|
||||
|
||||
#searchText + #searchSubmit:hover:active {
|
||||
background-color: hsl(220,24%,10%);
|
||||
color: #a0a0a0;
|
||||
box-shadow: 0 1px 1px rgba(3, 11, 27, 0.1) inset,
|
||||
0 0 1px rgba(3, 11, 27, 0.2) inset;
|
||||
transition-duration: 0ms;
|
||||
}
|
||||
|
||||
.contentSearchSuggestionTable {
|
||||
|
|
|
|||
|
|
@ -108,14 +108,14 @@ var gPage = {
|
|||
|
||||
this._initialized = true;
|
||||
|
||||
// XXX: this comment makes no sense for what it does. There's no HC check,
|
||||
// and it changes the button unconditionally to a "play" button. Which is
|
||||
// wrong for search. Commented out for now.
|
||||
//
|
||||
// XXX: This comment makes no sense for what it does. There is no HC check,
|
||||
// and it changes the button unconditionally to a "play" button, which is
|
||||
// wrong for a search action. Commented out for now.
|
||||
|
||||
// Set submit button label for when CSS background are disabled (e.g.
|
||||
// high contrast mode).
|
||||
// document.getElementById("searchSubmit").value =
|
||||
// document.body.getAttribute("dir") == "ltr" ? "\u25B6" : "\u25C0";
|
||||
//document.getElementById("searchSubmit").value =
|
||||
// document.body.getAttribute("dir") == "ltr" ? "\u25B6" : "\u25C0";
|
||||
|
||||
if (document.hidden) {
|
||||
addEventListener("visibilitychange", this);
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
}
|
||||
|
||||
body {
|
||||
background: #ececec;
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
/* SCROLLBOX */
|
||||
#newtab-scrollbox:not([page-disabled]) {
|
||||
background-color: rgb(229,229,229);
|
||||
background-color: #e5e5e5;
|
||||
background-image: url(chrome://browser/skin/newtab/noise.png),
|
||||
linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.2));
|
||||
background-attachment: fixed;
|
||||
|
|
@ -95,7 +95,7 @@ body {
|
|||
}
|
||||
|
||||
.newtab-cell:hover:not(:empty):not([dragged]) {
|
||||
border-color: rgba(8,22,37,.25) rgba(8,22,37,.27) rgba(8,22,37,.3);
|
||||
border-color: rgba(8,16,37,.25) rgba(8,16,37,.27) rgba(8,16,37,.3);
|
||||
}
|
||||
|
||||
/* SITES */
|
||||
|
|
@ -106,7 +106,7 @@ body {
|
|||
|
||||
.newtab-site:hover,
|
||||
.newtab-site[dragged] {
|
||||
box-shadow: 0 2px 4px 0px rgba(37,37,37,.2);
|
||||
box-shadow: 0 3px 6px 0px rgba(75,80,89,.6);
|
||||
}
|
||||
|
||||
.newtab-site[dragged] {
|
||||
|
|
@ -125,8 +125,8 @@ body {
|
|||
/* TITLES */
|
||||
.newtab-title {
|
||||
padding: 0 8px 1px;
|
||||
background-color: rgba(229,229,229,.95);
|
||||
color: black;
|
||||
background: linear-gradient(to bottom, rgba(245, 245, 245, .95), rgba(225, 225, 225, .95));
|
||||
color: #303030;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue