From 072b81e0a5d4ea4dedc9ae98632a49b7cb4c24ef Mon Sep 17 00:00:00 2001 From: wolfbeast Date: Thu, 21 Jun 2018 11:32:13 +0200 Subject: Issue #517 Part 6: Restyle for Pale Moon. This splits out common rules for different OSes to themes/shared and applies new styling to the newtab page. --- application/palemoon/app/profile/palemoon.js | 6 + .../palemoon/base/content/newtab/newTab.css | 11 +- application/palemoon/themes/linux/jar.mn | 2 +- .../palemoon/themes/linux/newtab/newTab.css | 194 +------------------- application/palemoon/themes/osx/jar.mn | 2 +- application/palemoon/themes/osx/newtab/newTab.css | 194 +------------------- .../palemoon/themes/shared/newtab/newTab.css.inc | 204 +++++++++++++++++++++ application/palemoon/themes/windows/jar.mn | 2 +- .../palemoon/themes/windows/newtab/newTab.css | 195 +------------------- 9 files changed, 221 insertions(+), 589 deletions(-) create mode 100644 application/palemoon/themes/shared/newtab/newTab.css.inc (limited to 'application') diff --git a/application/palemoon/app/profile/palemoon.js b/application/palemoon/app/profile/palemoon.js index dc4d79ac4..1894a30f2 100644 --- a/application/palemoon/app/profile/palemoon.js +++ b/application/palemoon/app/profile/palemoon.js @@ -1122,6 +1122,12 @@ pref("browser.padlock.urlbar_background", 2); //Pale Moon standalone image background color pref("browser.display.standalone_images.background_color", "#2E3B41"); +// These are the thumbnail width/height set in about:newtab. +// If you change this, ENSURE IT IS THE SAME SIZE SET +// by about:newtab. These values are in CSS pixels. +pref("toolkit.pageThumbs.minWidth", 250); +pref("toolkit.pageThumbs.minHeight", 180); + // ****************** domain-specific UAs ****************** // AMO needs "Firefox", obviously - pass on the OS (determined at build time) diff --git a/application/palemoon/base/content/newtab/newTab.css b/application/palemoon/base/content/newtab/newTab.css index 18467e36b..4551dc007 100644 --- a/application/palemoon/base/content/newtab/newTab.css +++ b/application/palemoon/base/content/newtab/newTab.css @@ -95,8 +95,7 @@ input[type=button] { #newtab-grid { -moz-box-flex: 5; overflow: hidden; - text-align: center; - transition: 100ms ease-out; + transition: 300ms ease-out; transition-property: opacity; } @@ -118,16 +117,16 @@ input[type=button] { /* CELLS */ .newtab-cell { display: -moz-box; - height: 210px; - margin: 20px 10px 35px; - width: 290px; + height: 180px; + margin: 15px 10px 30px; + width: 250px; } /* SITES */ .newtab-site { position: relative; -moz-box-flex: 1; - transition: 100ms ease-out; + transition: 200ms ease-out; transition-property: top, left, opacity; } diff --git a/application/palemoon/themes/linux/jar.mn b/application/palemoon/themes/linux/jar.mn index ec638f54c..843c31abb 100644 --- a/application/palemoon/themes/linux/jar.mn +++ b/application/palemoon/themes/linux/jar.mn @@ -76,7 +76,7 @@ browser.jar: skin/classic/browser/feeds/audioFeedIcon16.png (feeds/feedIcon16.png) skin/classic/browser/feeds/subscribe.css (feeds/subscribe.css) skin/classic/browser/feeds/subscribe-ui.css (feeds/subscribe-ui.css) - skin/classic/browser/newtab/newTab.css (newtab/newTab.css) +* skin/classic/browser/newtab/newTab.css (newtab/newTab.css) skin/classic/browser/newtab/controls.png (newtab/controls.png) skin/classic/browser/newtab/noise.png (newtab/noise.png) skin/classic/browser/places/bookmarksMenu.png (places/bookmarksMenu.png) diff --git a/application/palemoon/themes/linux/newtab/newTab.css b/application/palemoon/themes/linux/newtab/newTab.css index 794f25a4e..357b3139b 100644 --- a/application/palemoon/themes/linux/newtab/newTab.css +++ b/application/palemoon/themes/linux/newtab/newTab.css @@ -2,33 +2,7 @@ * 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:not([page-disabled]) { - background-color: rgb(229,229,229); - background-image: url(chrome://browser/skin/newtab/noise.png), - linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.2)); - background-attachment: fixed; -} - -/* UNDO */ -#newtab-undo-container { - padding: 4px 3px; - border: 1px solid; - border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16); - background-color: rgba(255,255,255,.4); - color: #525e69; -} - -#newtab-undo-label { - margin-top: 0; - margin-bottom: 0; -} +%include ../../shared/newtab/newTab.css.inc .newtab-undo-button { -moz-appearance: none; @@ -42,14 +16,6 @@ min-width: 0; } -.newtab-undo-button:hover { - text-decoration: underline; -} - -.newtab-undo-button:-moz-focusring { - outline: 1px dotted; -} - #newtab-undo-close-button { padding: 0; border: none; @@ -59,161 +25,3 @@ #newtab-undo-close-button > .toolbarbutton-icon { margin: -4px; } - -#newtab-undo-close-button > .toolbarbutton-text { - display: none; -} - -#newtab-undo-close-button:-moz-focusring { - outline: 1px dotted; -} - -/* TOGGLE */ -#newtab-toggle { - width: 16px; - height: 16px; - padding: 0; - border: none; - background: -216px 0 transparent url(chrome://browser/skin/newtab/controls.png); -} - -#newtab-toggle[page-disabled] { - background-position: -232px 0; -} - -/* ROWS */ -.newtab-row { - margin-bottom: 20px; -} - -.newtab-row:last-child { - margin-bottom: 0; -} - -/* CELLS */ -.newtab-cell { - -moz-margin-end: 20px; - background-color: rgba(255,255,255,.2); - border: 1px solid; - border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16); - border-radius: 1px; - transition: border-color 100ms ease-out; -} - -.newtab-cell:empty { - border: 1px dashed; - border-color: rgba(8,22,37,.15) rgba(8,22,37,.17) rgba(8,22,37,.19); -} - -.newtab-cell:last-child { - -moz-margin-end: 0; -} - -.newtab-cell:hover:not(:empty):not([dragged]) { - border-color: rgba(8,22,37,.25) rgba(8,22,37,.27) rgba(8,22,37,.3); -} - -/* SITES */ -.newtab-site { - text-decoration: none; - transition-property: top, left, opacity, box-shadow, background-color; -} - -.newtab-site:hover, -.newtab-site[dragged] { - box-shadow: 0 0 10px rgba(8,22,37,.3); -} - -.newtab-site[dragged] { - transition-property: box-shadow, background-color; - background-color: rgb(242,242,242); -} - -/* THUMBNAILS */ -.newtab-thumbnail { - background-origin: padding-box; - background-clip: padding-box; - background-repeat: no-repeat; - background-size: cover; -} - -/* TITLES */ -.newtab-title { - padding: 0 8px; - background-color: rgba(248,249,251,.95); - color: #1f364c; - line-height: 24px; -} - -.newtab-site[pinned] .newtab-title { - padding-inline-start: 24px; -} - -.newtab-site[pinned] .newtab-title::before { - background-image: url(chrome://browser/skin/newtab/controls.png); - background-position: -74px -1px; - content: ""; - left: 2px; - top: 2px; - position: absolute; - width: 20px; - height: 20px; -} - -.newtab-site[pinned] .newtab-title:dir(rtl)::before { - left: auto; - right: 2px; -} - -/* CONTROLS */ -.newtab-control { - background-color: transparent; - background-size: 24px; - border: none; - height: 24px; - width: 24px; - top: 4px; - background: transparent url(chrome://browser/skin/newtab/controls.png); -} - -.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:hover { - background-position: -24px 0; -} - -.newtab-control-pin:active { - background-position: -48px 0; -} - -.newtab-site[pinned] .newtab-control-pin { - background-position: -72px 0; -} - -.newtab-site[pinned] .newtab-control-pin:hover { - background-position: -96px 0; -} - -.newtab-site[pinned] .newtab-control-pin:active { - background-position: -120px 0; -} - -.newtab-control-block { - background-position: -144px 0; -} - -.newtab-control-block:hover { - background-position: -168px 0; -} - -.newtab-control-block:active { - background-position: -192px 0; -} diff --git a/application/palemoon/themes/osx/jar.mn b/application/palemoon/themes/osx/jar.mn index 17d0637f7..4cc54c4b1 100644 --- a/application/palemoon/themes/osx/jar.mn +++ b/application/palemoon/themes/osx/jar.mn @@ -93,7 +93,7 @@ browser.jar: skin/classic/browser/feeds/videoFeedIcon16.png (feeds/feedIcon16.png) skin/classic/browser/feeds/subscribe.css (feeds/subscribe.css) skin/classic/browser/feeds/subscribe-ui.css (feeds/subscribe-ui.css) - skin/classic/browser/newtab/newTab.css (newtab/newTab.css) +* skin/classic/browser/newtab/newTab.css (newtab/newTab.css) skin/classic/browser/newtab/controls.png (newtab/controls.png) skin/classic/browser/newtab/noise.png (newtab/noise.png) skin/classic/browser/places/places.css (places/places.css) diff --git a/application/palemoon/themes/osx/newtab/newTab.css b/application/palemoon/themes/osx/newtab/newTab.css index 83fb0a767..b8b0fd699 100644 --- a/application/palemoon/themes/osx/newtab/newTab.css +++ b/application/palemoon/themes/osx/newtab/newTab.css @@ -2,33 +2,7 @@ * 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:not([page-disabled]) { - background-color: rgb(229,229,229); - background-image: url(chrome://browser/skin/newtab/noise.png), - linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.2)); - background-attachment: fixed; -} - -/* UNDO */ -#newtab-undo-container { - padding: 4px 3px; - border: 1px solid; - border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16); - background-color: rgba(255,255,255,.4); - color: #525e69; -} - -#newtab-undo-label { - margin-top: 0; - margin-bottom: 0; -} +%include ../../shared/newtab/newTab.css.inc .newtab-undo-button { -moz-appearance: none; @@ -43,14 +17,6 @@ min-width: 0; } -.newtab-undo-button:hover { - text-decoration: underline; -} - -.newtab-undo-button:-moz-focusring { - outline: 1px dotted; -} - .newtab-undo-button > .button-box { padding: 0; } @@ -61,161 +27,3 @@ border: none; -moz-user-focus: normal; } - -#newtab-undo-close-button > .toolbarbutton-text { - display: none; -} - -#newtab-undo-close-button:-moz-focusring { - outline: 1px dotted; -} - -/* TOGGLE */ -#newtab-toggle { - width: 16px; - height: 16px; - padding: 0; - border: none; - background: -216px 0 transparent url(chrome://browser/skin/newtab/controls.png); -} - -#newtab-toggle[page-disabled] { - background-position: -232px 0; -} - -/* ROWS */ -.newtab-row { - margin-bottom: 20px; -} - -.newtab-row:last-child { - margin-bottom: 0; -} - -/* CELLS */ -.newtab-cell { - -moz-margin-end: 20px; - background-color: rgba(255,255,255,.2); - border: 1px solid; - border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16); - border-radius: 1px; - transition: border-color 100ms ease-out; -} - -.newtab-cell:empty { - border: 1px dashed; - border-color: rgba(8,22,37,.15) rgba(8,22,37,.17) rgba(8,22,37,.19); -} - -.newtab-cell:last-child { - -moz-margin-end: 0; -} - -.newtab-cell:hover:not(:empty):not([dragged]) { - border-color: rgba(8,22,37,.25) rgba(8,22,37,.27) rgba(8,22,37,.3); -} - -/* SITES */ -.newtab-site { - text-decoration: none; - transition-property: top, left, opacity, box-shadow, background-color; -} - -.newtab-site:hover, -.newtab-site[dragged] { - box-shadow: 0 0 10px rgba(8,22,37,.3); -} - -.newtab-site[dragged] { - transition-property: box-shadow, background-color; - background-color: rgb(242,242,242); -} - -/* THUMBNAILS */ -.newtab-thumbnail { - background-origin: padding-box; - background-clip: padding-box; - background-repeat: no-repeat; - background-size: cover; -} - -/* TITLES */ -.newtab-title { - padding: 0 8px; - background-color: rgba(248,249,251,.95); - color: #1f364c; - line-height: 24px; -} - -.newtab-site[pinned] .newtab-title { - padding-inline-start: 24px; -} - -.newtab-site[pinned] .newtab-title::before { - background-image: url(chrome://browser/skin/newtab/controls.png); - background-position: -74px -1px; - content: ""; - left: 2px; - top: 2px; - position: absolute; - width: 20px; - height: 20px; -} - -.newtab-site[pinned] .newtab-title:dir(rtl)::before { - left: auto; - right: 2px; -} - -/* CONTROLS */ -.newtab-control { - background-color: transparent; - background-size: 24px; - border: none; - height: 24px; - width: 24px; - top: 4px; - background: transparent url(chrome://browser/skin/newtab/controls.png); -} - -.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:hover { - background-position: -24px 0; -} - -.newtab-control-pin:active { - background-position: -48px 0; -} - -.newtab-site[pinned] .newtab-control-pin { - background-position: -72px 0; -} - -.newtab-site[pinned] .newtab-control-pin:hover { - background-position: -96px 0; -} - -.newtab-site[pinned] .newtab-control-pin:active { - background-position: -120px 0; -} - -.newtab-control-block { - background-position: -144px 0; -} - -.newtab-control-block:hover { - background-position: -168px 0; -} - -.newtab-control-block:active { - background-position: -192px 0; -} diff --git a/application/palemoon/themes/shared/newtab/newTab.css.inc b/application/palemoon/themes/shared/newtab/newTab.css.inc new file mode 100644 index 000000000..e2ed988c5 --- /dev/null +++ b/application/palemoon/themes/shared/newtab/newTab.css.inc @@ -0,0 +1,204 @@ +/* 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; +} + +body { + background: linear-gradient(to top,#DFF3FF,#F9F9F9) fixed; +} + +/* SCROLLBOX */ +#newtab-scrollbox:not([page-disabled]) { + background-color: rgb(229,229,229); + background-image: url(chrome://browser/skin/newtab/noise.png), + linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.2)); + background-attachment: fixed; +} + +/* UNDO */ +#newtab-undo-container { + padding: 4px 3px; + border: 1px solid; + border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16); + background-color: rgba(255,255,255,.4); + color: #525e69; +} + +#newtab-undo-label { + margin-top: 0; + margin-bottom: 0; +} + + +.newtab-undo-button:hover { + text-decoration: underline; +} + +.newtab-undo-button:-moz-focusring { + outline: 1px dotted; +} + + +#newtab-undo-close-button > .toolbarbutton-text { + display: none; +} + +#newtab-undo-close-button:-moz-focusring { + outline: 1px dotted; +} + +/* TOGGLE */ +#newtab-toggle { + width: 16px; + height: 16px; + padding: 0; + border: none; + background: -216px 0 transparent url(chrome://browser/skin/newtab/controls.png); +} + +#newtab-toggle[page-disabled] { + background-position: -232px 0; +} + +/* ROWS */ +.newtab-row { + margin-bottom: 20px; +} + +.newtab-row:last-child { + margin-bottom: 0; +} + +/* CELLS */ +.newtab-cell { + -moz-margin-end: 20px; + background-color: rgba(255,255,255,.2); + border: 1px solid; + border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16); + border-radius: 1px; + transition: border-color 100ms ease-out; +} + +.newtab-cell:empty { + border: 1px dashed; + border-color: rgba(8,22,37,.15) rgba(8,22,37,.17) rgba(8,22,37,.19); +} + +.newtab-cell:last-child { + -moz-margin-end: 0; +} + +.newtab-cell:hover:not(:empty):not([dragged]) { + border-color: rgba(8,22,37,.25) rgba(8,22,37,.27) rgba(8,22,37,.3); +} + +/* SITES */ +.newtab-site { + text-decoration: none; + transition-property: top, left, opacity, box-shadow, background-color; +} + +.newtab-site:hover, +.newtab-site[dragged] { + box-shadow: 0 3px 10px rgba(8,20,37,.6); +} + +.newtab-site[dragged] { + transition-property: box-shadow, background-color; + background-color: rgb(242,242,242); +} + +/* THUMBNAILS */ +.newtab-thumbnail { + background-origin: padding-box; + background-clip: padding-box; + background-repeat: no-repeat; + background-size: cover; +} + +/* TITLES */ +.newtab-title { + padding: 0 8px; + background-color: rgba(248,249,251,.95); + color: #1f364c; + line-height: 24px; +} + +.newtab-site[pinned] .newtab-title { + padding-inline-start: 24px; +} + +.newtab-site[pinned] .newtab-title::before { + background-image: url(chrome://browser/skin/newtab/controls.png); + background-position: -74px -1px; + content: ""; + left: 2px; + top: 2px; + position: absolute; + width: 20px; + height: 20px; +} + +.newtab-site[pinned] .newtab-title:dir(rtl)::before { + left: auto; + right: 2px; +} + +/* CONTROLS */ +.newtab-control { + background-color: transparent; + background-size: 24px; + border: none; + height: 24px; + width: 24px; + top: 4px; + background: transparent url(chrome://browser/skin/newtab/controls.png); +} + +.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:hover { + background-position: -24px 0; +} + +.newtab-control-pin:active { + background-position: -48px 0; +} + +.newtab-site[pinned] .newtab-control-pin { + background-position: -72px 0; +} + +.newtab-site[pinned] .newtab-control-pin:hover { + background-position: -96px 0; +} + +.newtab-site[pinned] .newtab-control-pin:active { + background-position: -120px 0; +} + +.newtab-control-block { + background-position: -144px 0; +} + +.newtab-control-block:hover { + background-position: -168px 0; +} + +.newtab-control-block:active { + background-position: -192px 0; +} + diff --git a/application/palemoon/themes/windows/jar.mn b/application/palemoon/themes/windows/jar.mn index b660ba296..25e40f742 100644 --- a/application/palemoon/themes/windows/jar.mn +++ b/application/palemoon/themes/windows/jar.mn @@ -95,7 +95,7 @@ browser.jar: skin/classic/browser/feeds/feed-icons-16.png (feeds/feed-icons-16.png) skin/classic/browser/feeds/subscribe.css (feeds/subscribe.css) skin/classic/browser/feeds/subscribe-ui.css (feeds/subscribe-ui.css) - skin/classic/browser/newtab/newTab.css (newtab/newTab.css) +* skin/classic/browser/newtab/newTab.css (newtab/newTab.css) skin/classic/browser/newtab/controls.png (newtab/controls.png) skin/classic/browser/newtab/noise.png (newtab/noise.png) skin/classic/browser/places/places.css (places/places.css) diff --git a/application/palemoon/themes/windows/newtab/newTab.css b/application/palemoon/themes/windows/newtab/newTab.css index ec1112c9b..b8b0fd699 100644 --- a/application/palemoon/themes/windows/newtab/newTab.css +++ b/application/palemoon/themes/windows/newtab/newTab.css @@ -2,33 +2,7 @@ * 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:not([page-disabled]) { - background-color: rgb(229,229,229); - background-image: url(chrome://browser/skin/newtab/noise.png), - linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.2)); - background-attachment: fixed; -} - -/* UNDO */ -#newtab-undo-container { - padding: 4px 3px; - border: 1px solid; - border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16); - background-color: rgba(255,255,255,.4); - color: #525e69; -} - -#newtab-undo-label { - margin-top: 0; - margin-bottom: 0; -} +%include ../../shared/newtab/newTab.css.inc .newtab-undo-button { -moz-appearance: none; @@ -43,14 +17,6 @@ min-width: 0; } -.newtab-undo-button:hover { - text-decoration: underline; -} - -.newtab-undo-button:-moz-focusring { - outline: 1px dotted; -} - .newtab-undo-button > .button-box { padding: 0; } @@ -61,162 +27,3 @@ border: none; -moz-user-focus: normal; } - -#newtab-undo-close-button > .toolbarbutton-text { - display: none; -} - -#newtab-undo-close-button:-moz-focusring { - outline: 1px dotted; -} - -/* TOGGLE */ -#newtab-toggle { - width: 16px; - height: 16px; - padding: 0; - border: none; - background: -216px 0 transparent url(chrome://browser/skin/newtab/controls.png); -} - -#newtab-toggle[page-disabled] { - background-position: -232px 0; -} - -/* ROWS */ -.newtab-row { - margin-bottom: 20px; -} - -.newtab-row:last-child { - margin-bottom: 0; -} - -/* CELLS */ -.newtab-cell { - -moz-margin-end: 20px; - background-color: rgba(255,255,255,.2); - border: 1px solid; - border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16); - border-radius: 1px; - transition: border-color 100ms ease-out; -} - -.newtab-cell:empty { - border: 1px dashed; - border-color: rgba(8,22,37,.15) rgba(8,22,37,.17) rgba(8,22,37,.19); -} - -.newtab-cell:last-child { - -moz-margin-end: 0; -} - -.newtab-cell:hover:not(:empty):not([dragged]) { - border-color: rgba(8,22,37,.25) rgba(8,22,37,.27) rgba(8,22,37,.3); -} - -/* SITES */ -.newtab-site { - text-decoration: none; - transition-property: top, left, opacity, box-shadow, background-color; -} - -.newtab-site:hover, -.newtab-site[dragged] { - box-shadow: 0 0 10px rgba(8,22,37,.3); -} - -.newtab-site[dragged] { - transition-property: box-shadow, background-color; - background-color: rgb(242,242,242); -} - -/* THUMBNAILS */ -.newtab-thumbnail { - background-origin: padding-box; - background-clip: padding-box; - background-repeat: no-repeat; - background-size: cover; -} - -/* TITLES */ -.newtab-title { - padding: 0 8px; - background-color: rgba(248,249,251,.95); - color: #1f364c; - line-height: 24px; -} - -.newtab-site[pinned] .newtab-title { - padding-inline-start: 24px; -} - -.newtab-site[pinned] .newtab-title::before { - background-image: url(chrome://browser/skin/newtab/controls.png); - background-position: -74px -1px; - content: ""; - left: 2px; - top: 2px; - position: absolute; - width: 20px; - height: 20px; -} - -.newtab-site[pinned] .newtab-title:dir(rtl)::before { - left: auto; - right: 2px; -} - -/* CONTROLS */ -.newtab-control { - background-color: transparent; - background-size: 24px; - border: none; - height: 24px; - width: 24px; - top: 4px; - background: transparent url(chrome://browser/skin/newtab/controls.png); -} - -.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:hover { - background-position: -24px 0; -} - -.newtab-control-pin:active { - background-position: -48px 0; -} - -.newtab-site[pinned] .newtab-control-pin { - background-position: -72px 0; -} - -.newtab-site[pinned] .newtab-control-pin:hover { - background-position: -96px 0; -} - -.newtab-site[pinned] .newtab-control-pin:active { - background-position: -120px 0; -} - -.newtab-control-block { - background-position: -144px 0; -} - -.newtab-control-block:hover { - background-position: -168px 0; -} - -.newtab-control-block:active { - background-position: -192px 0; -} - -- cgit v1.2.3