commit fead6fe405d143db38f9e2e273c68e59f38afd48
parent e71796ee95059901c0bfc745d4832135ed02f254
Author: Lootyhoof <lootyhoofer@gmail.com>
Date: Fri, 13 Jul 2018 23:14:39 +0100
Add PM28 newtab styling
Diffstat:
4 files changed, 286 insertions(+), 203 deletions(-)
diff --git a/src/chrome.manifest b/src/chrome.manifest
@@ -6,8 +6,8 @@ skin os darkmoon chrome/os/darwin/ os=Darwin
skin os darkmoon chrome/os/linux/ os=Linux
skin os darkmoon chrome/os/winnt/ os=WINNT
-skin appver darkmoon chrome/appver/27/ appversion<28.0.0a1
-skin appver darkmoon chrome/appver/28/ appversion>=28.0.0a1
+skin appver darkmoon chrome/appver/27/ appversion<28.0.0b1
+skin appver darkmoon chrome/appver/28/ appversion>=28.0.0b1
override chrome://browser/skin/autocomplete.css chrome://global/skin/autocomplete.css
override chrome://browser/skin/page-livemarks.png chrome://browser/skin/feeds/feedIcon16.svg
diff --git a/src/chrome/browser/newtab/newTab.css b/src/chrome/appver/27/newTab.css
diff --git a/src/chrome/appver/28/newTab.css b/src/chrome/appver/28/newTab.css
@@ -0,0 +1,282 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root {
+ -moz-appearance: none;
+ font-size: 75%;
+ background-color: transparent;
+}
+
+/* SCROLLBOX */
+#newtab-vertical-margin {
+ background-color: rgb(43,43,43);
+ background-attachment: fixed;
+}
+
+/* UNDO */
+#newtab-undo-container {
+ padding: 4px 3px;
+ border: 1px solid;
+ border-color: rgb(75,75,75);
+ background-color: rgb(50,50,50);
+ color: #fff;
+}
+
+#newtab-undo-label {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.newtab-undo-button {
+ -moz-appearance: none;
+ color: #fff;
+ cursor: pointer;
+ padding: 0;
+ margin: 0 4px;
+ border: 0;
+ background: transparent;
+ text-decoration: underline;
+ min-width: 0;
+}
+
+.newtab-undo-button:hover {
+ color: rgb(219,219,219);
+}
+
+.newtab-undo-button:-moz-focusring {
+ outline: 1px dotted rgb(75,75,75);
+}
+
+#newtab-undo-close-button > .toolbarbutton-text {
+ display: none;
+}
+
+#newtab-undo-close-button:-moz-focusring {
+ outline: 1px dotted;
+}
+
+/* TOGGLE */
+#newtab-toggle {
+ background-color: transparent;
+ background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0);
+ background-size: 32px;
+ border: none;
+ height: 28px;
+ width: 28px;
+}
+
+#newtab-toggle:-moz-any(:hover, :active, [active]) {
+ background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32);
+}
+
+/* ROWS */
+.newtab-row {
+ margin-bottom: 20px;
+}
+
+.newtab-row:last-child {
+ margin-bottom: 0;
+}
+
+/* CELLS */
+.newtab-cell {
+ -moz-margin-end: 20px;
+ background-color: rgb(50,50,50);
+ border: 1px solid rgb(75,75,75);
+ transition: border-color 100ms ease-out;
+}
+
+.newtab-cell:empty {
+ border: 1px dashed rgb(75,75,75);
+}
+
+.newtab-cell:last-child {
+ -moz-margin-end: 0;
+}
+
+.newtab-cell:hover:not(:empty) {
+ border-color: rgb(62,62,62);
+}
+
+/* SITES */
+.newtab-site {
+ text-decoration: none;
+ transition-property: top, left, opacity, box-shadow, background-color;
+ box-shadow: 0 4px 6px rgba(255,255,255,.2);
+}
+
+.newtab-site:hover {
+ box-shadow: 0 4px 8px rgba(255,255,255,.5);
+}
+
+.newtab-site[dragged] {
+ transition-property: box-shadow, background-color;
+ background-color: rgb(75,75,75);
+ box-shadow: 0 18px 24px rgba(255,255,255,.5);
+}
+
+/* THUMBNAILS */
+.newtab-thumbnail {
+ background-origin: padding-box;
+ background-clip: padding-box;
+ background-repeat: no-repeat;
+ background-size: cover;
+ opacity: 1;
+}
+
+/* TITLES */
+.newtab-title {
+ padding: 0 8px;
+ background-color: rgb(50,50,50);
+ color: #fff;
+ line-height: 24px;
+}
+
+.newtab-site[pinned] .newtab-title {
+ padding-inline-start: 24px;
+}
+
+.newtab-site[pinned] .newtab-title::before {
+ background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
+ background-size: 10px;
+ content: "";
+ height: 17px;
+ left: 0;
+ position: absolute;
+ width: 10px;
+ margin-left: 8px;
+ margin-top: 6px;
+}
+
+.newtab-site[pinned] .newtab-title:dir(rtl)::before {
+ left: auto;
+ right: 0;
+}
+
+/* CONTROLS */
+.newtab-control {
+ background-color: transparent;
+ background-size: 24px;
+ border: none;
+ height: 26px;
+ width: 24px;
+}
+
+.newtab-control-pin:dir(ltr),
+.newtab-control-block:dir(rtl) {
+ left: 4px;
+}
+
+.newtab-control-block:dir(ltr),
+.newtab-control-pin:dir(rtl) {
+ right: 4px;
+}
+
+.newtab-control-pin,
+.newtab-site[pinned] .newtab-control-pin:hover {
+ background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 96, 33, 64);
+}
+
+.newtab-control-pin:hover:active,
+.newtab-site[pinned] .newtab-control-pin:hover:active {
+ background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 160, 33, 128);
+}
+
+.newtab-control-pin:hover,
+.newtab-site[pinned] .newtab-control-pin {
+ background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 128, 33, 96);
+}
+
+.newtab-control-block {
+ background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 192, 33, 160);
+}
+
+.newtab-control-block:hover {
+ background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 224, 33, 192);
+}
+
+.newtab-control-block:hover:active {
+ background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 256, 33, 224);
+}
+
+.newtab-undo-button {
+ -moz-appearance: none;
+ color: -moz-nativehyperlinktext;
+ color: rgb(0,102,204);
+ cursor: pointer;
+ padding: 0;
+ margin: 0 4px;
+ border: 0;
+ background: transparent;
+ text-decoration: none;
+ min-width: 0;
+}
+
+.newtab-undo-button > .button-box {
+ padding: 0;
+}
+
+#newtab-undo-close-button {
+ -moz-appearance: none;
+ padding: 0;
+ border: none;
+ -moz-user-focus: normal;
+}
+
+
+/* SEARCH */
+#searchEngineLogo {
+ /* remove the default DDG image - it looks really bad on our dark b/g */
+ opacity: 0;
+}
+
+#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;
+ box-shadow: none;
+}
+
+#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;
+ box-shadow: none;
+}
+
+#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);
+}
diff --git a/src/chrome/browser/newtab/newTab.css b/src/chrome/browser/newtab/newTab.css
@@ -1,201 +1 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-:root {
- -moz-appearance: none;
- font-size: 75%;
- background-color: transparent;
-}
-
-/* SCROLLBOX */
-#newtab-scrollbox {
- background-color: rgb(43,43,43);
- background-attachment: fixed;
-}
-
-/* UNDO */
-#newtab-undo-container {
- padding: 4px 3px;
- border: 1px solid;
- border-color: rgb(75,75,75);
- background-color: rgb(50,50,50);
- color: #fff;
-}
-
-#newtab-undo-label {
- margin-top: 0;
- margin-bottom: 0;
-}
-
-.newtab-undo-button {
- -moz-appearance: none;
- color: #fff;
- cursor: pointer;
- padding: 0;
- margin: 0 4px;
- border: 0;
- background: transparent;
- text-decoration: underline;
- min-width: 0;
-}
-
-.newtab-undo-button:hover {
- color: rgb(219,219,219);
-}
-
-.newtab-undo-button:-moz-focusring {
- outline: 1px dotted rgb(75,75,75);
-}
-
-.newtab-undo-button > .button-box {
- padding: 0;
-}
-
-#newtab-undo-close-button {
- -moz-appearance: none;
- padding: 0;
- border: none;
- list-style-image: url("chrome://global/skin/icons/close.png");
- -moz-image-region: rect(0, 16px, 16px, 0);
- -moz-user-focus: normal;
-}
-
-#newtab-undo-close-button:hover {
- -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
-#newtab-undo-close-button:hover:active {
- -moz-image-region: rect(0, 48px, 16px, 32px);
-}
-
-#newtab-undo-close-button > .toolbarbutton-text {
- display: none;
-}
-
-#newtab-undo-close-button:-moz-focusring {
- outline: 1px dotted;
-}
-
-/* TOGGLE */
-#newtab-toggle {
- background-color: transparent;
- background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0);
- background-size: 32px;
- border: none;
- height: 28px;
- width: 28px;
-}
-
-#newtab-toggle:-moz-any(:hover, :active, [active]) {
- background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32);
-}
-
-/* ROWS */
-.newtab-row {
- margin-bottom: 20px;
-}
-
-.newtab-row:last-child {
- margin-bottom: 0;
-}
-
-/* CELLS */
-.newtab-cell {
- -moz-margin-end: 20px;
- background-color: rgb(50,50,50);
- border: 1px solid rgb(75,75,75);
- transition: border-color 100ms ease-out;
-}
-
-.newtab-cell:empty {
- border: 1px dashed rgb(75,75,75);
-}
-
-.newtab-cell:last-child {
- -moz-margin-end: 0;
-}
-
-.newtab-cell:hover:not(:empty) {
- border-color: rgb(62,62,62);
-}
-
-/* SITES */
-.newtab-site {
- text-decoration: none;
- transition-property: top, left, opacity, box-shadow, background-color;
- box-shadow: 0 4px 6px rgba(255,255,255,.2);
-}
-
-.newtab-site:hover {
- box-shadow: 0 4px 8px rgba(255,255,255,.5);
-}
-
-.newtab-site[dragged] {
- transition-property: box-shadow, background-color;
- background-color: rgb(75,75,75);
- box-shadow: 0 18px 24px rgba(255,255,255,.5);
-}
-
-/* THUMBNAILS */
-.newtab-thumbnail {
- background-origin: padding-box;
- background-clip: padding-box;
- background-repeat: no-repeat;
- background-size: cover;
- opacity: 1;
-}
-
-/* TITLES */
-.newtab-title {
- padding: 0 8px;
- background-color: rgb(50,50,50);
- color: #fff;
- line-height: 24px;
-}
-
-/* CONTROLS */
-.newtab-control {
- background-color: transparent;
- background-size: 24px;
- border: none;
- height: 26px;
- width: 24px;
-}
-
-.newtab-control-pin,
-.newtab-site[pinned] .newtab-control-pin:hover {
- background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 96, 33, 64);
-}
-
-.newtab-control-pin:hover:active,
-.newtab-site[pinned] .newtab-control-pin:hover:active {
- background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 160, 33, 128);
-}
-
-.newtab-control-pin:hover,
-.newtab-site[pinned] .newtab-control-pin {
- background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 128, 33, 96);
-}
-
-.newtab-control-block {
- background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 192, 33, 160);
-}
-
-.newtab-control-block:hover {
- background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 224, 33, 192);
-}
-
-.newtab-control-block:hover:active {
- background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 256, 33, 224);
-}
-
-/* MARGINS */
-#newtab-margin-top,
-#newtab-margin-bottom {
- min-height: 30px;
-}
-
-.newtab-side-margin {
- min-width: 50px;
-}
+@import url("chrome://appver/skin/newTab.css");
+\ No newline at end of file
