Add about:home styling

18 files changed, 321 insertions, 0 deletions

diff --git a/src/chrome.manifest b/src/chrome.manifest
index fbebced..897eebe 100644
--- a/src/chrome.manifest
+++ b/src/chrome.manifest
@@ -1,3 +1,4 @@
+skin abouthome darkmoon chrome/abouthome/
 skin browser darkmoon chrome/browser/
 skin mozapps darkmoon chrome/mozapps/
 skin global darkmoon chrome/global/
diff --git a/src/chrome/abouthome/abouthome.css b/src/chrome/abouthome/abouthome.css
new file mode 100644
index 0000000..b42d582
--- /dev/null
+++ b/src/chrome/abouthome/abouthome.css
@@ -0,0 +1,320 @@
+html {
+  font: message-box;
+  font-size: 100%;
+  background-color: rgb(43, 43, 43);
+  color: #000;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  width: 100%;
+  height: 100%;
+}
+
+input,
+button {
+  font-size: inherit;
+  font-family: inherit;
+}
+
+a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.spacer {
+  -moz-box-flex: 1;
+}
+
+#topSection {
+  text-align: center;
+}
+
+#brandLogo {
+  height: 192px;
+  width: 192px;
+  margin: 22px auto 31px;
+  background-image: url("chrome://branding/content/about-logo.png");
+  background-size: 192px auto;
+  background-position: center center;
+  background-repeat: no-repeat;
+  filter: grayscale(1);
+}
+
+#searchForm {
+  width: 470px;
+}
+
+#searchForm {
+  display: -moz-box;
+}
+
+#searchLogoContainer {
+  display: -moz-box;
+  -moz-box-align: center;
+  padding-top: 2px;
+  -moz-padding-end: 8px;
+}
+
+#searchLogoContainer[hidden] {
+  display: none;
+}
+
+#searchEngineLogo {
+  display: inline-block;
+  filter: saturate(65%);
+  height: 28px;
+  width: 70px;
+  min-width: 70px;
+}
+
+#searchText {
+  -moz-box-flex: 1;
+  color: #fff;
+  padding: 6px 8px;
+  background-color: rgb(50, 50, 50);
+  border: 1px solid;
+  border-color: rgb(75, 75, 75);
+  border-radius: 5px 0 0 5px;
+}
+
+#searchText:-moz-dir(rtl) {
+  border-radius: 0 5px 5px 0;
+}
+
+#searchText:focus,
+#searchText[autofocus] {
+  border-color: rgb(110, 110, 110);
+}
+
+#searchSubmit {
+  -moz-margin-start: -1px;
+  padding: 0 9px;
+  color: #fff;
+  background-color: rgb(60, 60, 60);
+  border: 1px solid;
+  border-color: rgb(75, 75, 75);
+  border-radius: 0 5px 5px 0;
+  cursor: pointer;
+  transition-property: background-color, border-color, box-shadow;
+  transition-duration: 150ms;
+}
+
+#searchSubmit:-moz-dir(rtl) {
+  border-radius: 5px 0 0 5px;
+}
+
+#searchText:focus + #searchSubmit,
+#searchText + #searchSubmit:hover,
+#searchText[autofocus] + #searchSubmit {
+  border-color: rgb(110, 110, 110);
+  background-color: rgb(75, 75, 75);
+}
+
+#searchText + #searchSubmit:hover:active {
+  border-color: rgb(75, 75, 75);
+  background-color: rgb(23, 23, 23);
+}
+
+#launcher {
+  display: -moz-box;
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  width: 100%;
+  background-color: rgb(50, 50, 50);
+  border-top: 1px solid rgb(75, 75, 75);
+}
+
+#launcher:not([session]),
+body[narrow] #launcher[session] {
+  display: block; /* display separator and restore button on separate lines */
+  text-align: center;
+  white-space: nowrap; /* prevent navigational buttons from wrapping */
+}
+
+.launchButton {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  margin: 16px 1px;
+  padding: 14px 6px;
+  min-width: 88px;
+  max-width: 176px;
+  max-height: 85px;
+  vertical-align: top;
+  white-space: normal;
+  background: transparent padding-box;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  color: #fff;
+  font-size: 75%;
+  cursor: pointer;
+}
+
+body[narrow] #launcher[session] > .launchButton {
+  margin: 4px 1px;
+}
+
+.launchButton:hover {
+  background-color: rgb(75, 75, 75);
+}
+
+.launchButton:hover:active {
+  background-color: rgb(23, 23, 23);
+  border-color: rgb(75, 75, 75);
+}
+
+.launchButton[hidden],
+#launcher:not([session]) > #restorePreviousSessionSeparator,
+#launcher:not([session]) > #restorePreviousSession {
+  display: none;
+}
+
+#restorePreviousSessionSeparator {
+  width: 1px;
+  height: 100px;
+  margin: 0 10px;
+  border-left: 1px solid;
+  border-left-color: rgb(75, 75, 75);
+}
+
+body[narrow] #restorePreviousSessionSeparator {
+  margin: 0 auto;
+  width: 512px;
+  height: 3px;
+}
+
+#restorePreviousSession {
+  max-width: none;
+  font-size: 90%;
+}
+
+body[narrow] #restorePreviousSession {
+  font-size: 80%;
+}
+
+.launchButton::before {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0 auto 6px;
+  line-height: 0; /* remove extra vertical space due to non-zero font-size */
+}
+
+#downloads::before {
+  content: url("chrome://abouthome/skin/downloads.png");
+}
+
+#bookmarks::before {
+  content: url("chrome://abouthome/skin/bookmarks.png");
+}
+
+#history::before {
+  content: url("chrome://abouthome/skin/history.png");
+}
+
+#apps::before {
+  content: url("chrome://abouthome/skin/apps.png");
+}
+
+#addons::before {
+  content: url("chrome://abouthome/skin/addons.png");
+}
+
+#sync::before {
+  content: url("chrome://abouthome/skin/sync.png");
+}
+
+#settings::before {
+  content: url("chrome://abouthome/skin/settings.png");
+}
+
+#restorePreviousSession::before {
+  content: url("chrome://abouthome/skin/restore.png");
+  height: 32px;
+  width: 32px;
+  display: inline-block; /* display on same line as text label */
+  vertical-align: middle;
+  margin-bottom: 0;
+  -moz-margin-end: 8px;
+}
+
+#restorePreviousSession:-moz-dir(rtl)::before {
+  transform: scaleX(-1);
+}
+
+#aboutMozilla {
+  display: block;
+  position: relative; /* pin wordmark to edge of document, not of viewport */
+  -moz-box-ordinal-group: 0;
+  opacity: .5;
+  transition: opacity 150ms;
+}
+
+#aboutMozilla:hover {
+  opacity: 1;
+}
+
+#aboutMozilla::before {
+  content: url("chrome://browser/content/abouthome/mozilla.png");
+  display: block;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 69px;
+  height: 19px;
+}
+
+/* [HiDPI]
+ * At resolutions above 1dppx, prefer downscaling the 2x Retina graphics
+ * rather than upscaling the original-size ones (bug 818940).
+ */
+@media not all and (max-resolution: 1dppx) {
+  #brandLogo {
+    background-image: url("chrome://branding/content/about-logo@2x.png");
+  }
+
+  .launchButton::before,
+  #aboutMozilla::before {
+    transform: scale(.5);
+    transform-origin: 0 0;
+  }
+
+  #downloads::before {
+    content: url("chrome://abouthome/skin/downloads@2x.png");
+  }
+
+  #bookmarks::before {
+    content: url("chrome://abouthome/skin/bookmarks@2x.png");
+  }
+
+  #history::before {
+    content: url("chrome://abouthome/skin/history@2x.png");
+  }
+
+  #apps::before {
+    content: url("chrome://abouthome/skin/apps@2x.png");
+  }
+
+  #addons::before {
+    content: url("chrome://abouthome/skin/addons@2x.png");
+  }
+
+  #sync::before {
+    content: url("chrome://abouthome/skin/sync@2x.png");
+  }
+
+  #settings::before {
+    content: url("chrome://abouthome/skin/settings@2x.png");
+  }
+
+  #restorePreviousSession::before {
+    content: url("chrome://abouthome/skin/restore@2x.png");
+  }
+
+  #aboutMozilla::before {
+    content: url("chrome://browser/content/abouthome/mozilla@2x.png");
+  }
+}
diff --git a/src/chrome/abouthome/addons.png b/src/chrome/abouthome/addons.png
new file mode 100644
index 0000000..7dcdda8
--- /dev/null
+++ b/src/chrome/abouthome/addons.png
diff --git a/src/chrome/abouthome/addons@2x.png b/src/chrome/abouthome/addons@2x.png
new file mode 100644
index 0000000..6fc29bb
--- /dev/null
+++ b/src/chrome/abouthome/addons@2x.png
diff --git a/src/chrome/abouthome/apps.png b/src/chrome/abouthome/apps.png
new file mode 100644
index 0000000..a8ca5ca
--- /dev/null
+++ b/src/chrome/abouthome/apps.png
diff --git a/src/chrome/abouthome/apps@2x.png b/src/chrome/abouthome/apps@2x.png
new file mode 100644
index 0000000..9876ba3
--- /dev/null
+++ b/src/chrome/abouthome/apps@2x.png
diff --git a/src/chrome/abouthome/bookmarks.png b/src/chrome/abouthome/bookmarks.png
new file mode 100644
index 0000000..3f898cd
--- /dev/null
+++ b/src/chrome/abouthome/bookmarks.png
diff --git a/src/chrome/abouthome/bookmarks@2x.png b/src/chrome/abouthome/bookmarks@2x.png
new file mode 100644
index 0000000..f21b281
--- /dev/null
+++ b/src/chrome/abouthome/bookmarks@2x.png
diff --git a/src/chrome/abouthome/downloads.png b/src/chrome/abouthome/downloads.png
new file mode 100644
index 0000000..22f0b71
--- /dev/null
+++ b/src/chrome/abouthome/downloads.png
diff --git a/src/chrome/abouthome/downloads@2x.png b/src/chrome/abouthome/downloads@2x.png
new file mode 100644
index 0000000..cdb32d6
--- /dev/null
+++ b/src/chrome/abouthome/downloads@2x.png
diff --git a/src/chrome/abouthome/history.png b/src/chrome/abouthome/history.png
new file mode 100644
index 0000000..1f251b1
--- /dev/null
+++ b/src/chrome/abouthome/history.png
diff --git a/src/chrome/abouthome/history@2x.png b/src/chrome/abouthome/history@2x.png
new file mode 100644
index 0000000..8450aad
--- /dev/null
+++ b/src/chrome/abouthome/history@2x.png
diff --git a/src/chrome/abouthome/restore.png b/src/chrome/abouthome/restore.png
new file mode 100644
index 0000000..23256b7
--- /dev/null
+++ b/src/chrome/abouthome/restore.png
diff --git a/src/chrome/abouthome/restore@2x.png b/src/chrome/abouthome/restore@2x.png
new file mode 100644
index 0000000..6f7e49d
--- /dev/null
+++ b/src/chrome/abouthome/restore@2x.png
diff --git a/src/chrome/abouthome/settings.png b/src/chrome/abouthome/settings.png
new file mode 100644
index 0000000..d70912b
--- /dev/null
+++ b/src/chrome/abouthome/settings.png
diff --git a/src/chrome/abouthome/settings@2x.png b/src/chrome/abouthome/settings@2x.png
new file mode 100644
index 0000000..fa2c0ae
--- /dev/null
+++ b/src/chrome/abouthome/settings@2x.png
diff --git a/src/chrome/abouthome/sync.png b/src/chrome/abouthome/sync.png
new file mode 100644
index 0000000..75375dc
--- /dev/null
+++ b/src/chrome/abouthome/sync.png
diff --git a/src/chrome/abouthome/sync@2x.png b/src/chrome/abouthome/sync@2x.png
new file mode 100644
index 0000000..6f19b13
--- /dev/null
+++ b/src/chrome/abouthome/sync@2x.png