improve devtools styles, support some new trunk changes

diff --git a/LCARStrek/browser/FxToolbar.png b/LCARStrek/browser/FxToolbar.png
deleted file mode 100644 (file)
index 928aeb7..0000000
Binary files a/LCARStrek/browser/FxToolbar.png and /dev/null differ

diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index 1ec8b87ca275875dc20af19898c526698d02b3c0..ce3c42fed13e43e012cfc6f4b39d1c36fdf128bc 100644 (file)
--- a/LCARStrek/browser/browser.css
+++ b/LCARStrek/browser/browser.css
@@ -1388,15 +1388,18 @@ window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([o
   border-radius: 10000px 0 0 10000px;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button {
+window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
   transition: opacity 150ms ease-out;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true] {
+window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true],
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled=true] {
   opacity: 0;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar] {
+window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar],
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[occluded-by-urlbar] {
   visibility: hidden;
 }
 
@@ -1584,53 +1587,64 @@ window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occlud
 /*  background-color: white;*/
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper {
+window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
   padding-left: 22px;
   -moz-margin-start: -22px;
   position: relative;
   pointer-events: none;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar {
+window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
 /*  -moz-border-start: none;
   margin-left: 0; */
   pointer-events: all;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
+window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar {
   transition: margin-left 150ms ease-out;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
+window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr),
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
 /*  border-top-left-radius: 0;
   border-bottom-left-radius: 0; */
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
+window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl),
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
 /*  border-top-right-radius: 0;
   border-bottom-right-radius: 0; */
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper {
+window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] {
 /*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar {
+window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar {
   margin-left: -22px;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
+window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not([switchingtabs]) > #urlbar {
   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
   transition-delay: 100s;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
+window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar {
   /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
   margin-left: -22.01px;
 }
 
 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl),
-window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
+window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl),
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
   /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
   transform: scaleX(-1);
 }
@@ -1727,7 +1741,8 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
   border-radius: 0;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box {
+window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
 /*   border-radius: 0; */
   -moz-padding-start: 2px;
   -moz-padding-end: 2px;
@@ -1735,30 +1750,40 @@ window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #url
 }
 
 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
+    #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar >
     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
   padding-left: 2px;
   transition: padding-left;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > 
+window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
+    #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl),
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar >
     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
   padding-right: 2px;
   transition: padding-right;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar > 
+window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar >
+    #notification-popup-box[hidden] + #identity-box,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not([switchingtabs]) > #urlbar >
     #notification-popup-box[hidden] + #identity-box {
   /* forward button hiding is delayed when hovered */
   transition-delay: 100s;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar > 
+window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
+    #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar >
     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
   padding-left: 2.01px;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar > 
+window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
+    #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl),
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar >
     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
   padding-right: 2.01px;
@@ -1899,7 +1924,8 @@ window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:ho
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
+window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
 /*  -moz-margin-end: 1px;*/
 }
 
@@ -2063,7 +2089,7 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
   -moz-image-region: rect(0, 42px, 14px, 28px);
 }
 
-#urlbar-go-button:hover,
+#urlbar-go-button:hover {
   -moz-image-region: rect(14px, 42px, 28px, 28px);
 }
 
@@ -2914,7 +2940,8 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   border-right-width: 8px;
 }
 
-window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box {
+window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box,
+window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar > #notification-popup-box {
 /*  padding-left: 5px; */
 }
 
@@ -4723,3 +4750,108 @@ toolbarpaletteitem[place="toolbar"] {
 #UITourTooltipButtons {
   margin: 24px -4px -4px;
 }
+
+/* === BEGIN contextmenu.inc.css === */
+
+menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
+}
+
+#context-navigation > .menuitem-iconic {
+  -moz-box-flex: 1;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+}
+
+#context-navigation > .menuitem-iconic[disabled="true"] {
+  background-color: transparent;
+}
+
+#context-navigation > .menuitem-iconic > .menu-iconic-left {
+  -moz-appearance: none;
+}
+
+#context-navigation > #context-back > .menu-iconic-left {
+  list-style-image: url("chrome://browser/skin/ToolbarFx.png");
+  -moz-image-region: rect(0, 54px, 18px, 36px);
+}
+
+#context-navigation > #context-back:not([disabled="true"]):hover > .menu-iconic-left {
+  -moz-image-region: rect(18px, 54px, 36px, 36px);
+}
+
+#context-navigation > #context-back[disabled="true"] > .menu-iconic-left {
+  -moz-image-region: rect(36px, 54px, 54px, 36px);
+}
+
+#context-navigation > #context-forward > .menu-iconic-left {
+  list-style-image: url("chrome://browser/skin/ToolbarFx.png");
+  -moz-image-region: rect(0, 72px, 18px, 54px);
+}
+
+#context-navigation > #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
+  -moz-image-region: rect(18px, 72px, 36px, 54px);
+}
+
+#context-navigation > #context-forward[disabled="true"] > .menu-iconic-left {
+  -moz-image-region: rect(36px, 72px, 54px, 54px);
+}
+
+#context-navigation > #context-reload > .menu-iconic-left {
+  list-style-image: url("chrome://browser/skin/reload-stop-go.png");
+  -moz-image-region: rect(0, 14px, 14px, 0);
+}
+
+#context-navigation > #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
+  -moz-image-region: rect(14px, 14px, 28px, 0);
+}
+
+#context-navigation > #context-reload[disabled="true"] > .menu-iconic-left {
+  -moz-image-region: rect(28px, 14px, 42px, 0);
+}
+
+#context-navigation > #context-stop > .menu-iconic-left {
+  list-style-image: url("chrome://browser/skin/reload-stop-go.png");
+  -moz-image-region: rect(0, 28px, 14px, 14px);
+}
+
+#context-navigation > #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
+  -moz-image-region: rect(14px, 28px, 28px, 14px);
+}
+
+#context-navigation > #context-stop[disabled="true"] > .menu-iconic-left {
+  -moz-image-region: rect(28px, 28px, 42px, 14px);
+}
+
+#context-navigation > #context-bookmarkpage > .menu-iconic-left {
+  list-style-image: url("chrome://browser/skin/ToolbarFx.png");
+  -moz-image-region: rect(0, 144px, 18px, 126px);
+}
+
+#context-navigation > #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
+  -moz-image-region: rect(18px, 144px, 36px, 126px);
+}
+
+#context-navigation > #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
+  -moz-image-region: rect(36px, 144px, 54px, 126px);
+}
+
+#context-back:-moz-locale-dir(rtl),
+#context-forward:-moz-locale-dir(rtl),
+#context-reload:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
+  width: 18px;
+  height: 18px;
+  margin: 7px;
+}
+
+#context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
+#context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
+  width: 14px;
+  height: 14px;
+  margin: 9px;
+}
+
+/* === END contextmenu.inc.css === */

diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css
index 59585b3cd8c3862f49f297dcec21f32e7675cd7d..2c26d8ecac9425cde5cd9c10d843d82a159b39c7 100644 (file)
--- a/LCARStrek/browser/devtools/dark-theme.css
+++ b/LCARStrek/browser/devtools/dark-theme.css
@@ -710,7 +710,8 @@ devtools-menulist:-moz-focusring,
 }
 
 #toolbox-tabs {
-  margin: 0;
+  margin: 0 2px;
+  -moz-padding-start: 3px;
   background-color: #000000;
   color: #FFCF00;
 }
@@ -772,6 +773,11 @@ devtools-menulist:-moz-focusring,
   -moz-margin-start: 0;
 }
 
+#toolbox-option-container {
+  background-color: #000000;
+  -moz-padding-start: 3px;
+}
+
 #toolbox-tab-options {
   min-width: 20px;
 }

diff --git a/LCARStrek/browser/devtools/layoutview.css b/LCARStrek/browser/devtools/layoutview.css
index ea37a917903e6198f13d799d24c73fc524804e9d..794637950e1b77da634e35a09a7f6d7e807d4992 100644 (file)
--- a/LCARStrek/browser/devtools/layoutview.css
+++ b/LCARStrek/browser/devtools/layoutview.css
@@ -2,11 +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/. */
 
-.theme-dark .theme-body {
-  background: url("layout-background-grid.png"), radial-gradient(50% 70%, circle cover, #000000 0%, #000000 100%);
-}
-
-.theme-light .theme-body {
+.theme-body {
   background: url("layout-background-grid.png"), radial-gradient(50% 70%, circle cover, #000000 0%, #000000 100%);
 }
 
@@ -16,31 +12,28 @@
 }
 
 #main {
-  border-color: #FF9F00;
+  border-color: #A09090;
   border-style: dotted;
 }
 
-#main > .border {
+#main > .margin,
+#main > .padding {
   color: #000000;
 }
 
+#main > .border {
+}
+
 .border > span {
-  background-color: #9C9CFF;
-  border-radius: 2px;
-  padding: 0 4px;
 }
 
 #content {
-  border-color: #FF9F00;
-  border-style: dotted 
 }
 
 #padding {
-  border-color: hsla(240,100%,85%,0.1);
+  border-color: #9C9CFF;
   border-style: solid;
 }
 
 #borders {
-  border-style: solid;
-  border-color: #9C9CFF;
 }

diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css
index f6e9199548e0239d824313c9f133c580c27860d0..81300be26394f7f61c11668f2c7bc0de9b7f3786 100644 (file)
--- a/LCARStrek/browser/devtools/widgets.css
+++ b/LCARStrek/browser/devtools/widgets.css
@@ -21,7 +21,8 @@
 /* BreacrumbsWidget */
 
 .breadcrumbs-widget-container {
-  -moz-margin-end: 3px;
+  -moz-margin-start: 2px;
+  -moz-margin-start: 2px;
   max-height: 25px; /* Set max-height for proper sizing on linux */
   height: 25px; /* Set height to prevent starting small waiting for content */
   /* A fake 1px-shadow is included in the border-images of the
@@ -129,12 +130,12 @@
 
 #breadcrumb-separator-before,
 #breadcrumb-separator-after:after {
-  background: #9C9CFF; /* Select Highlight Blue */
+  background: #008484; /* Select Highlight Blue */
 }
 
 #breadcrumb-separator-after,
 #breadcrumb-separator-before:after {
-  background: #9C9CFF; /* Toolbars */
+  background: #000000; /* Toolbars */
 }
 
 /* This chevron arrow cannot be replicated easily in CSS, so we are using
@@ -164,6 +165,7 @@
   margin: 0;
   padding: 0 8px 0 20px;
   border: none;
+  border-radius: 0;
   outline: none;
   color: #FF9F00;
 }
@@ -185,15 +187,21 @@
 }
 
 .breadcrumbs-widget-item:not([checked]) {
-  background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
- }
- 
+  background-image: -moz-element(#breadcrumb-separator-normal);
+  background-repeat: no-repeat;
+  background-position: center left;
+}
+
 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
-  background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
+  background-image: -moz-element(#breadcrumb-separator-after);
+  background-repeat: no-repeat;
+  background-position: 0 0;
 }
 
 .breadcrumbs-widget-item[checked] {
-  background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
+  background-image: -moz-element(#breadcrumb-separator-before);
+  background-repeat: no-repeat;
+  background-position: 0 0;
   background-color: #008484; /* Select Highlight Blue */
 }
 
@@ -231,8 +239,15 @@
   color: #FF9F00; /* Foreground (Text) - Light */
 }
 
+.breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-id,
+.breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-tag,
+.breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-pseudo-classes,
+.breadcrumbs-widget-item:not([checked]):hover .breadcrumbs-widget-item-classes {
+  color: #000000 !important;
+}
+
 .breadcrumbs-widget-item {
-  color: #FF9F00; /* Foreground (Text) - Light */
+  color: #FFCF00; /* Foreground (Text) - Light */
 }
 
 .breadcrumbs-widget-item-id {

diff --git a/LCARStrek/browser/downloads/indicator.css b/LCARStrek/browser/downloads/indicator.css
index 8d05f22fbbe6b7b389b89af6490e5747efafc243..99585bc3f3084aa27960eb5228a8fabc5031dfb6 100644 (file)
--- a/LCARStrek/browser/downloads/indicator.css
+++ b/LCARStrek/browser/downloads/indicator.css
@@ -20,8 +20,8 @@
 /*** Main indicator icon ***/
 
 #downloads-indicator-icon {
-  background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
-                              0, 108, 18, 90) center no-repeat;
+  background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"),
+                              0, 198, 18, 180) center no-repeat;
   min-width: 18px;
   min-height: 18px;
 }
@@ -29,8 +29,8 @@
 #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
 #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
 #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
-                              18, 108, 36, 90) center no-repeat;
+  background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"),
+                              18, 198, 36, 180) center no-repeat;
   color: #000000;
 }
 
@@ -52,8 +52,8 @@
    equivalent to -moz-any([progress], [paused]). */
 
 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
-                              0, 108, 18, 90) center no-repeat;
+  background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"),
+                              0, 198, 18, 180) center no-repeat;
   background-size: 12px;
 }
 
@@ -64,8 +64,8 @@
 #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
 #downloads-button:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
-                              18, 108, 36, 90) center no-repeat;
+  background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"),
+                              18, 198, 36, 180) center no-repeat;
   background-size: 12px;
 }
 

diff --git a/LCARStrek/browser/newtab/controls.png b/LCARStrek/browser/newtab/controls.png
index 0041c1519887ea0854cd19fa6512d9f5f721c767..c1d52d951458e4f3da87e78fff1a8dbd5e2f82da 100644 (file)
Binary files a/LCARStrek/browser/newtab/controls.png and b/LCARStrek/browser/newtab/controls.png differ

diff --git a/LCARStrek/browser/newtab/newTab.css b/LCARStrek/browser/newtab/newTab.css
index 8b61d5e23d684cba951bbd22a8bb709fd8104f1e..b9d018fdf21b7fd10ff6a9d58a23bf837b3e910b 100644 (file)
--- a/LCARStrek/browser/newtab/newTab.css
+++ b/LCARStrek/browser/newtab/newTab.css
@@ -1,3 +1,7 @@
+/* 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%;
@@ -6,7 +10,8 @@
 }
 
 /* SCROLLBOX */
-#newtab-scrollbox:not([page-disabled]) {
+#newtab-scrollbox:not([page-disabled]),
+#newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
   color: #FF9F00;
   background-color: #000000;
 }
@@ -89,9 +94,13 @@
   margin-bottom: 0;
 }
 
+.newtab-row > .newtab-cell {
+  /* this only applies before Directory Tiles work, row is gone afterwards. */
+  -moz-margin-end: 20px;
+}
+
 /* CELLS */
 .newtab-cell {
-  -moz-margin-end: 20px;
   background-color: rgba(255,159,0,.2);
   border: 1px solid;
   border-color: #9C9CFF;
@@ -103,11 +112,11 @@
   border: 1px dashed;
 }
 
-.newtab-cell:last-child {
+.newtab-row > .newtab-cell:last-child {
   -moz-margin-end: 0;
 }
 
-.newtab-cell:hover:not(:empty):not([dragged]) {
+.newtab-cell:hover:not(:empty):not([dragged]):not([ignorehover]) {
   border-color: #FFCF00;
 }
 
@@ -117,7 +126,7 @@
   transition-property: top, left, opacity, box-shadow, background-color;
 }
 
-.newtab-site:hover,
+.newtab-cell:not([ignorehover]) > .newtab-site:hover,
 .newtab-site[dragged] {
   box-shadow: 0 0 10px rgba(0,132,132,.3);
 }
@@ -135,12 +144,24 @@
   background-size: cover;
 }
 
+.newtab-site[type=affiliate] .newtab-thumbnail,
+.newtab-site[type=organic] .newtab-thumbnail,
+.newtab-site[type=sponsored] .newtab-thumbnail {
+  background-position: center center;
+  background-size: auto;
+}
+
 /* TITLES */
 .newtab-title {
   padding: 0 8px;
   background-color: rgba(255,159,0,.8);
   color: #000000;
   line-height: 24px;
+  bottom: 0 !important;
+}
+
+.newtab-site[type=sponsored] .newtab-title {
+  -moz-padding-end: 24px;
 }
 
 /* CONTROLS */
@@ -183,3 +204,15 @@
 .newtab-control-block:active {
   background-position: -192px 0;
 }
+
+.newtab-control-sponsored {
+  background-position: -249px -1px;
+}
+
+.newtab-control-sponsored:hover {
+  background-position: -265px -1px;
+}
+
+.newtab-control-sponsored[panelShown] {
+  background-position: -281px -1px;
+}