wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-10-20 14:17:30 +09:00
Code Issues Projects Releases Packages Wiki Activity

[Pale-Moon] Issue #1872 - Part 6: Revisit styling to base it more on previous about:home

Browse source 
- Redo search box colors
- Redo newtab cell titles and hover-drag shading
This commit is contained in:
Moonchild 2021-07-02 14:56:32 +00:00 • committed by roytam1
commit 5c628bbf77
4 changed files with 126 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

123
application/palemoon/components/abouthome/aboutHome.css
View file

@ -7,7 +7,7 @@
html { html {
font: message-box; font: message-box;
font-size: 100%; font-size: 100%;
background-color: rgb(229,229,229); background-color: #e5e5e5;
color: #000; color: #000;
height: 100%; height: 100%;
} }
@ -52,10 +52,6 @@ a {
} }
/* SEARCH */ /* SEARCH */
#searchForm {
width: 470px;
}
#searchContainer { #searchContainer {
display: -moz-box; display: -moz-box;
position: relative; position: relative;
@ -63,19 +59,26 @@ a {
margin: 10px 0 15px; margin: 10px 0 15px;
} }
#searchContainer[page-disabled] {
opacity: 0;
pointer-events: none;
}
#searchForm { #searchForm {
width: 470px;
display: -moz-box; display: -moz-box;
position: relative; position: relative;
height: 36px; height: 36px; /* 32 px logo + 2*1px pad + 2*1px border */
-moz-box-flex: 1; -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 { #searchEngineLogo {
border: 1px transparent; border: 1px transparent;
padding: 2px 4px 2px 2px; padding: 2px 4px 2px 2px;
@ -89,77 +92,71 @@ a {
-moz-box-flex: 1; -moz-box-flex: 1;
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
padding-inline-start: 42px; padding-inline-start: 42px; /* room for logo */
padding-inline-end: 8px; 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: 1px solid;
border-spacing: 0; border-color: rgba(37, 46, 65, 0.15) rgba(37, 46, 65, 0.17) rgba(37, 46, 65, 0.2);
border-radius: 2px 0 0 2px; box-shadow: 0 1px 0 rgba(37, 46, 65, 0.02) inset,
border-color: hsla(228,54%,20%,.15) hsla(228,54%,20%,.17) hsla(228,54%,20%,.2); 0 0 2px rgba(37, 46, 65, 0.1) inset,
box-shadow: 0 1px 0 hsla(228,65%,9%,.02) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
0 0 2px hsla(228,65%,9%,.1) inset, border-radius: 2.5px 0 0 2.5px;
0 1px 0 hsla(0,0%,100%,.2);
color: inherit;
unicode-bidi: plaintext;
} }
#searchText:dir(rtl) { #searchText:-moz-dir(rtl) {
border-radius: 0 2px 2px 0; border-radius: 0 2.5px 2.5px 0;
} }
#searchText[aria-expanded="true"] { #searchText:focus,
border-radius: 2px 0 0 0; #searchText[autofocus] {
} border-color: rgba(92, 133, 214, 0.6) rgba(78, 114, 188, 0.6) rgba(41, 82, 163, 0.6);
#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);
} }
#searchSubmit { #searchSubmit {
margin-inline-start: -1px; margin-inline-start: -1px;
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)) padding-box;
padding: 0 9px; padding: 0 9px;
border: 1px solid; border: 1px solid;
background-color: #e0e0e0; border-color: rgba(37, 46, 65, 0.2) rgba(37, 46, 65, 0.2) rgba(37, 46, 65, 0.2);
color: black; border-inline-start: 1px solid transparent;
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; border-radius: 0 2.5px 2.5px 0;
box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset, box-shadow: 0 0 2px rgba(255, 255, 255, 0.5) inset,
0 1px 0 hsla(0,0%,100%,.2); 0 1px 0 rgba(255, 255, 255, 0.2);
cursor: pointer; cursor: pointer;
width: 50px; transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
} }
#searchSubmit:dir(rtl) { #searchSubmit:-moz-dir(rtl) {
border-radius: 2px 0 0 2px; border-radius: 2.5px 0 0 2.5px;
} }
#searchSubmit:hover { #searchText:focus + #searchSubmit,
background-color: hsl(220,54%,30%); #searchText + #searchSubmit:hover,
#searchText[autofocus] + #searchSubmit {
border-color: #8da1c8 #768bb5 #6579a2;
color: white; color: white;
} }
#searchText:focus + #searchSubmit, #searchText:focus + #searchSubmit,
#searchText + #searchSubmit:hover { #searchText[autofocus] + #searchSubmit {
border-color: #808080; 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 + #searchSubmit:hover {
#searchText:focus, background-image: linear-gradient(#85a8e0, #3d75cf);
#searchText[keepfocus] + #searchSubmit, box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
#searchText:focus + #searchSubmit 0 0 0 1px rgba(255, 255, 255, 0.1) inset,
{ 0 1px 0 rgba(23, 42, 79, 0.03),
box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset, 0 0 4px rgba(0, 34, 102, 0.2);}
0 2px 4px 0px rgba(37,37,37,.2);
}
#searchText + #searchSubmit:hover:active { #searchText + #searchSubmit:hover:active {
background-color: hsl(220,24%,10%); box-shadow: 0 1px 1px rgba(3, 11, 27, 0.1) inset,
color: #a0a0a0; 0 0 1px rgba(3, 11, 27, 0.2) inset;
transition-duration: 0ms;
} }
/* LAUNCHER */ /* LAUNCHER */
@ -168,10 +165,10 @@ a {
-moz-box-align: center; -moz-box-align: center;
-moz-box-pack: center; -moz-box-pack: center;
width: 100%; width: 100%;
background-color: rgba(0,0,0,.03); background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0,0,0,.03); border-top: 1px solid rgba(0, 0, 0, 0.03);
box-shadow: 0 1px 2px rgba(0,0,0,.02) inset, box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset,
0 -1px 0 rgba(255,255,255,.25); 0 -1px 0 rgba(255, 255, 255, 0.25);
} }
#launcher:not([session]), #launcher:not([session]),
@ -193,12 +190,12 @@ body[narrow] #launcher[session] {
white-space: normal; white-space: normal;
background: transparent padding-box; background: transparent padding-box;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 5px; border-radius: 2.5px;
color: #525c66; color: #525c66;
font-size: 75%; font-size: 75%;
cursor: pointer; cursor: pointer;
transition-property: background-color, border-color, box-shadow; transition-property: background-color, border-color, box-shadow;
transition-duration: 120ms; transition-duration: 150ms;
} }
body[narrow] #launcher[session] > .launchButton { body[narrow] #launcher[session] > .launchButton {

102
application/palemoon/components/newtab/newTab.css
View file

@ -13,7 +13,7 @@ body {
height: 100%; height: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: rgb(229,229,229); background-color: #e5e5e5;
display: -moz-box; display: -moz-box;
position: relative; position: relative;
-moz-box-flex: 1; -moz-box-flex: 1;
@ -242,13 +242,25 @@ input[type=button] {
} }
#searchForm { #searchForm {
width: 470px;
display: -moz-box; display: -moz-box;
position: relative; position: relative;
height: 36px; height: 36px; /* 32 px logo + 2*1px pad + 2*1px border */
-moz-box-flex: 1; -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 { #searchEngineLogo {
border: 1px transparent; border: 1px transparent;
padding: 2px 4px 2px 2px; padding: 2px 4px 2px 2px;
@ -262,77 +274,71 @@ input[type=button] {
-moz-box-flex: 1; -moz-box-flex: 1;
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
padding-inline-start: 42px; padding-inline-start: 42px; /* room for logo */
padding-inline-end: 8px; 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: 1px solid;
border-spacing: 0; border-color: rgba(37, 46, 65, 0.15) rgba(37, 46, 65, 0.17) rgba(37, 46, 65, 0.2);
border-radius: 2px 0 0 2px; box-shadow: 0 1px 0 rgba(37, 46, 65, 0.02) inset,
border-color: hsla(228,54%,20%,.15) hsla(228,54%,20%,.17) hsla(228,54%,20%,.2); 0 0 2px rgba(37, 46, 65, 0.1) inset,
box-shadow: 0 1px 0 hsla(228,65%,9%,.02) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
0 0 2px hsla(228,65%,9%,.1) inset, border-radius: 2.5px 0 0 2.5px;
0 1px 0 hsla(0,0%,100%,.2);
color: inherit;
unicode-bidi: plaintext;
} }
#searchText:dir(rtl) { #searchText:-moz-dir(rtl) {
border-radius: 0 2px 2px 0; border-radius: 0 2.5px 2.5px 0;
} }
#searchText[aria-expanded="true"] { #searchText:focus,
border-radius: 2px 0 0 0; #searchText[autofocus] {
} border-color: rgba(92, 133, 214, 0.6) rgba(78, 114, 188, 0.6) rgba(41, 82, 163, 0.6);
#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);
} }
#searchSubmit { #searchSubmit {
margin-inline-start: -1px; margin-inline-start: -1px;
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)) padding-box;
padding: 0 9px; padding: 0 9px;
border: 1px solid; border: 1px solid;
background-color: #e0e0e0; border-color: rgba(37, 46, 65, 0.2) rgba(37, 46, 65, 0.2) rgba(37, 46, 65, 0.2);
color: black; border-inline-start: 1px solid transparent;
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; border-radius: 0 2.5px 2.5px 0;
box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset, box-shadow: 0 0 2px rgba(255, 255, 255, 0.5) inset,
0 1px 0 hsla(0,0%,100%,.2); 0 1px 0 rgba(255, 255, 255, 0.2);
cursor: pointer; cursor: pointer;
width: 50px; transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
} }
#searchSubmit:dir(rtl) { #searchSubmit:-moz-dir(rtl) {
border-radius: 2px 0 0 2px; border-radius: 2.5px 0 0 2.5px;
} }
#searchSubmit:hover { #searchText:focus + #searchSubmit,
background-color: hsl(220,54%,30%); #searchText + #searchSubmit:hover,
#searchText[autofocus] + #searchSubmit {
border-color: #8da1c8 #768bb5 #6579a2;
color: white; color: white;
} }
#searchText:focus + #searchSubmit, #searchText:focus + #searchSubmit,
#searchText + #searchSubmit:hover { #searchText[autofocus] + #searchSubmit {
border-color: #808080; 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 + #searchSubmit:hover {
#searchText:focus, background-image: linear-gradient(#85a8e0, #3d75cf);
#searchText[keepfocus] + #searchSubmit, box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
#searchText:focus + #searchSubmit 0 0 0 1px rgba(255, 255, 255, 0.1) inset,
{ 0 1px 0 rgba(23, 42, 79, 0.03),
box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset, 0 0 4px rgba(0, 34, 102, 0.2);}
0 2px 4px 0px rgba(37,37,37,.2);
}
#searchText + #searchSubmit:hover:active { #searchText + #searchSubmit:hover:active {
background-color: hsl(220,24%,10%); box-shadow: 0 1px 1px rgba(3, 11, 27, 0.1) inset,
color: #a0a0a0; 0 0 1px rgba(3, 11, 27, 0.2) inset;
transition-duration: 0ms;
} }
.contentSearchSuggestionTable { .contentSearchSuggestionTable {

12
application/palemoon/components/newtab/page.js
View file

@ -108,14 +108,14 @@ var gPage = {
this._initialized = true; this._initialized = true;
// XXX: this comment makes no sense for what it does. There's no HC check, // 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 // and it changes the button unconditionally to a "play" button, which is
// wrong for search. Commented out for now. // wrong for a search action. Commented out for now.
//
// Set submit button label for when CSS background are disabled (e.g. // Set submit button label for when CSS background are disabled (e.g.
// high contrast mode). // high contrast mode).
// document.getElementById("searchSubmit").value = //document.getElementById("searchSubmit").value =
// document.body.getAttribute("dir") == "ltr" ? "\u25B6" : "\u25C0"; // document.body.getAttribute("dir") == "ltr" ? "\u25B6" : "\u25C0";
if (document.hidden) { if (document.hidden) {
addEventListener("visibilitychange", this); addEventListener("visibilitychange", this);

12
application/palemoon/themes/shared/newtab/newTab.css.inc
View file

@ -9,12 +9,12 @@
} }
body { body {
background: #ececec; background: #e5e5e5;
} }
/* SCROLLBOX */ /* SCROLLBOX */
#newtab-scrollbox:not([page-disabled]) { #newtab-scrollbox:not([page-disabled]) {
background-color: rgb(229,229,229); background-color: #e5e5e5;
background-image: url(chrome://browser/skin/newtab/noise.png), background-image: url(chrome://browser/skin/newtab/noise.png),
linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.2)); linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.2));
background-attachment: fixed; background-attachment: fixed;
@ -95,7 +95,7 @@ body {
} }
.newtab-cell:hover:not(:empty):not([dragged]) { .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 */ /* SITES */
@ -106,7 +106,7 @@ body {
.newtab-site:hover, .newtab-site:hover,
.newtab-site[dragged] { .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] { .newtab-site[dragged] {
@ -125,8 +125,8 @@ body {
/* TITLES */ /* TITLES */
.newtab-title { .newtab-title {
padding: 0 8px 1px; padding: 0 8px 1px;
background-color: rgba(229,229,229,.95); background: linear-gradient(to bottom, rgba(245, 245, 245, .95), rgba(225, 225, 225, .95));
color: black; color: #303030;
line-height: 24px; line-height: 24px;
} }