style new search UI

diff --git a/EarlyBlue/global/in-content/common.css b/EarlyBlue/global/in-content/common.css
index b50fb302292e62a99183f087ed5a187688c3116e..07afc667a1b822fd63742817f102817b564a88a1 100644 (file)
--- a/EarlyBlue/global/in-content/common.css
+++ b/EarlyBlue/global/in-content/common.css
@@ -176,6 +176,10 @@ xul|menulist > xul|*.menulist-label-box {
   padding-left: 10px !important;
 }
 
   padding-left: 10px !important;
 }
 

+xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon {
+  -moz-margin-end: 5px;
+}
+

 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
   -moz-appearance: none;
   margin: 1px 0;
 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
   -moz-appearance: none;
   margin: 1px 0;


@@ -447,6 +451,10 @@ xul|*.checkbox-label-box {
   }
 }
 
   }
 }
 

+xul|richlistitem > xul|*.checkbox-check {
+  margin: 3px 6px;
+}
+

 xul|*.radio-check {
   -moz-appearance: none;
   width: 23px;
 xul|*.radio-check {
   -moz-appearance: none;
   width: 23px;

diff --git a/LCARStrek/browser/badge-add-engine.png b/LCARStrek/browser/badge-add-engine.png
new file mode 100644 (file)
index 0000000..052bd44
Binary files /dev/null and b/LCARStrek/browser/badge-add-engine.png differ

diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index ed83e18b4b088f8d4fea11b1c8a3a2d6db93d41a..c43e736390aa936a9e69b8d88474e36d85e12146 100644 (file)
--- a/LCARStrek/browser/browser.css
+++ b/LCARStrek/browser/browser.css
@@ -5493,6 +5493,54 @@ toolbarpaletteitem[place="toolbar"] {
   color: #000000;
 }
 
   color: #000000;
 }
 

+.SearchHighlight {
+  -moz-margin-end: 6px;
+  font-size: 110%;
+  width: 225px;
+}
+
+.SearchHighlight label,
+.SearchHighlight description {
+  color: #008484;
+  margin: 0 0 8px 0;
+  padding: 0;
+}
+
+.SearchHighlightTitle {
+  font-weight: bold;
+}
+
+.SearchHighlight .dot {
+  width: 7px;
+  height: 7px;
+  background-image: -moz-image-rect(url("chrome://browser/skin/dots.png"), 0, 100%, 100%, 9);
+  background-size: 7px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  -moz-margin-end: 2px;
+}
+
+.SearchHighlight .dot.filled {
+  background-image: -moz-image-rect(url("chrome://browser/skin/dots.png"), 0, 7, 100%, 0);
+}
+
+.SearchHighlight button {
+  margin: 0;
+  /* On some platforms clicking the button will steal focus from the search box
+     causing the popup to close. */
+  -moz-user-focus: ignore;
+}
+
+@media not all and (max-resolution: 1dppx) {
+  .SearchHighlight .dot {
+    background-image: -moz-image-rect(url("chrome://browser/skin/dots@2x.png"), 0, 100%, 100%, 18);
+  }
+
+  .SearchHighlight .dot.filled {
+    background-image: -moz-image-rect(url("chrome://browser/skin/dots@2x.png"), 0, 14, 100%, 0);
+  }
+}
+

 /* === END UITour.inc.css === */
 
 #UITourTooltipButtons {
 /* === END UITour.inc.css === */
 
 #UITourTooltipButtons {

diff --git a/LCARStrek/browser/dots.png b/LCARStrek/browser/dots.png
new file mode 100644 (file)
index 0000000..d47b638
Binary files /dev/null and b/LCARStrek/browser/dots.png differ

diff --git a/LCARStrek/browser/dots@2x.png b/LCARStrek/browser/dots@2x.png
new file mode 100644 (file)
index 0000000..b7c1aff
Binary files /dev/null and b/LCARStrek/browser/dots@2x.png differ

diff --git a/LCARStrek/browser/magnifier.png b/LCARStrek/browser/magnifier.png
new file mode 100644 (file)
index 0000000..bcce4ad
Binary files /dev/null and b/LCARStrek/browser/magnifier.png differ

diff --git a/LCARStrek/browser/magnifier@2x.png b/LCARStrek/browser/magnifier@2x.png
new file mode 100644 (file)
index 0000000..6aef26a
Binary files /dev/null and b/LCARStrek/browser/magnifier@2x.png differ

diff --git a/LCARStrek/browser/newtab/newTab.css b/LCARStrek/browser/newtab/newTab.css
index 1e86ac889601f460846089608c0ed2f331e46c87..fad81c15f8c360fbd3c2f2f7565cf74e2d35595c 100644 (file)
--- a/LCARStrek/browser/newtab/newTab.css
+++ b/LCARStrek/browser/newtab/newTab.css
@@ -145,7 +145,7 @@
 }
 
 /* TITLES */
 }
 
 /* TITLES */

-#newtab-intro-what,
+/*#newtab-intro-what,*/

 .newtab-sponsored,
 .newtab-title {
   padding: 0 8px;
 .newtab-sponsored,
 .newtab-title {
   padding: 0 8px;

diff --git a/LCARStrek/browser/preferences/in-content/icons.png b/LCARStrek/browser/preferences/in-content/icons.png
index 51c4ac85bcf0706a3d629714dfc6979f2440e8e3..44f2b8dc232a95e713d1eb876b00e895d6162acd 100644 (file)
Binary files a/LCARStrek/browser/preferences/in-content/icons.png and b/LCARStrek/browser/preferences/in-content/icons.png differ

diff --git a/LCARStrek/browser/preferences/in-content/icons@2x.png b/LCARStrek/browser/preferences/in-content/icons@2x.png
index 1b10091ccea50cb8b7a3898315ce3857fe24a42b..9df3005028b84e1e51ec842284059e8808a2530d 100644 (file)
Binary files a/LCARStrek/browser/preferences/in-content/icons@2x.png and b/LCARStrek/browser/preferences/in-content/icons@2x.png differ

diff --git a/LCARStrek/browser/preferences/in-content/preferences.css b/LCARStrek/browser/preferences/in-content/preferences.css
index 397f8a545cd9a4c1ca815e81d0a5fc538f2b439c..816a34bdd3e417fc9ba03542604134f624fbf6af 100644 (file)
--- a/LCARStrek/browser/preferences/in-content/preferences.css
+++ b/LCARStrek/browser/preferences/in-content/preferences.css
@@ -98,6 +98,15 @@ prefpane {
   -moz-image-region: rect(24px, 24px, 48px, 0);
 }
 
   -moz-image-region: rect(24px, 24px, 48px, 0);
 }
 

+#category-search > .category-icon {
+  -moz-image-region: rect(0, 194px, 24px, 168px);
+}
+
+#category-search:hover > .category-icon,
+#category-search[selected] > .category-icon {
+  -moz-image-region: rect(24px, 194px, 48px, 168px);
+}
+

 #category-content > .category-icon {
   -moz-image-region: rect(0, 48px,  24px, 24px)
 }
 #category-content > .category-icon {
   -moz-image-region: rect(0, 48px,  24px, 24px)
 }


@@ -419,14 +428,25 @@ caption {
     -moz-image-region: rect(0, 48px, 48px, 0);
   }
 
     -moz-image-region: rect(0, 48px, 48px, 0);
   }
 

+  #category-general:hover > .category-icon,

   #category-general[selected] > .category-icon {
     -moz-image-region: rect(48px, 48px, 96px, 0);
   }
 
   #category-general[selected] > .category-icon {
     -moz-image-region: rect(48px, 48px, 96px, 0);
   }
 

+  #category-search > .category-icon {
+    -moz-image-region: rect(0, 384px, 48px, 336px);
+  }
+
+  #category-search:hover > .category-icon,
+  #category-search[selected] > .category-icon {
+    -moz-image-region: rect(48, 384px, 96px, 336px);
+  }
+

   #category-content > .category-icon {
     -moz-image-region: rect(0, 96px, 48px, 48px);
   }
 
   #category-content > .category-icon {
     -moz-image-region: rect(0, 96px, 48px, 48px);
   }
 

+  #category-content:hover > .category-icon,

   #category-content[selected] > .category-icon {
     -moz-image-region: rect(48px, 96px, 96px, 48px);
   }
   #category-content[selected] > .category-icon {
     -moz-image-region: rect(48px, 96px, 96px, 48px);
   }


@@ -435,6 +455,7 @@ caption {
     -moz-image-region: rect(0, 144px, 48px, 96px);
   }
 
     -moz-image-region: rect(0, 144px, 48px, 96px);
   }
 

+  #category-application:hover > .category-icon,

   #category-application[selected] > .category-icon {
     -moz-image-region: rect(48px, 144px, 96px, 96px);
   }
   #category-application[selected] > .category-icon {
     -moz-image-region: rect(48px, 144px, 96px, 96px);
   }


@@ -443,6 +464,7 @@ caption {
     -moz-image-region: rect(0, 192px, 48px, 144px);
   }
 
     -moz-image-region: rect(0, 192px, 48px, 144px);
   }
 

+  #category-privacy:hover > .category-icon,

   #category-privacy[selected] > .category-icon {
     -moz-image-region: rect(48px, 192px, 96px, 144px);
   }
   #category-privacy[selected] > .category-icon {
     -moz-image-region: rect(48px, 192px, 96px, 144px);
   }


@@ -451,6 +473,7 @@ caption {
     -moz-image-region: rect(0, 240px, 48px, 192px);
   }
 
     -moz-image-region: rect(0, 240px, 48px, 192px);
   }
 

+  #category-security:hover > .category-icon,

   #category-security[selected] > .category-icon {
     -moz-image-region: rect(48px, 240px, 96px, 192px);
   }
   #category-security[selected] > .category-icon {
     -moz-image-region: rect(48px, 240px, 96px, 192px);
   }


@@ -459,6 +482,7 @@ caption {
     -moz-image-region: rect(0, 288px, 48px, 240px);
   }
 
     -moz-image-region: rect(0, 288px, 48px, 240px);
   }
 

+  #category-sync:hover > .category-icon,

   #category-sync[selected] > .category-icon {
     -moz-image-region: rect(48px, 288px, 96px, 240px);
   }
   #category-sync[selected] > .category-icon {
     -moz-image-region: rect(48px, 288px, 96px, 240px);
   }


@@ -467,6 +491,7 @@ caption {
     -moz-image-region: rect(0, 336px, 48px, 288px);
   }
 
     -moz-image-region: rect(0, 336px, 48px, 288px);
   }
 

+  #category-advanced:hover > .category-icon,

   #category-advanced[selected] > .category-icon {
     -moz-image-region: rect(48px, 336px, 96px, 288px);
   }
   #category-advanced[selected] > .category-icon {
     -moz-image-region: rect(48px, 336px, 96px, 288px);
   }

diff --git a/LCARStrek/browser/preferences/preferences.css b/LCARStrek/browser/preferences/preferences.css
index b3200726171074b8d3089bf89f5a8f38ba8867fb..8e333868fdf10c7a866d6b94bb3fc95628fa12e2 100644 (file)
--- a/LCARStrek/browser/preferences/preferences.css
+++ b/LCARStrek/browser/preferences/preferences.css
@@ -27,6 +27,14 @@ radio[pane=paneTabs]:not([selected="true"]):hover {
   -moz-image-region: rect(32px, 64px, 64px, 32px);
 }
 
   -moz-image-region: rect(32px, 64px, 64px, 32px);
 }
 

+#BrowserPreferences radio[pane=paneSearch] {
+  list-style-image: url("chrome://browser/skin/search-pref.png");
+}
+
+#BrowserPreferences radio[pane=paneSearch]:not([selected="true"]):hover {
+  list-style-image: url("chrome://browser/skin/search-pref-hover.png");
+}
+

 radio[pane=paneContent] {
   -moz-image-region: rect(0, 96px,  32px, 64px);
 }
 radio[pane=paneContent] {
   -moz-image-region: rect(0, 96px,  32px, 64px);
 }

diff --git a/LCARStrek/browser/search-engine-placeholder.png b/LCARStrek/browser/search-engine-placeholder.png
new file mode 100644 (file)
index 0000000..5397a5a
Binary files /dev/null and b/LCARStrek/browser/search-engine-placeholder.png differ

diff --git a/LCARStrek/browser/search-indicator-add-engine.png b/LCARStrek/browser/search-indicator-add-engine.png
new file mode 100644 (file)
index 0000000..da98000
Binary files /dev/null and b/LCARStrek/browser/search-indicator-add-engine.png differ

diff --git a/LCARStrek/browser/search-indicator.png b/LCARStrek/browser/search-indicator.png
new file mode 100644 (file)
index 0000000..9d07fe2
Binary files /dev/null and b/LCARStrek/browser/search-indicator.png differ

diff --git a/LCARStrek/browser/search-oneoff-bg-border.png b/LCARStrek/browser/search-oneoff-bg-border.png
new file mode 100644 (file)
index 0000000..415bf15
Binary files /dev/null and b/LCARStrek/browser/search-oneoff-bg-border.png differ

diff --git a/LCARStrek/browser/search-pref-hover.png b/LCARStrek/browser/search-pref-hover.png
new file mode 100644 (file)
index 0000000..0bf5ff8
Binary files /dev/null and b/LCARStrek/browser/search-pref-hover.png differ

diff --git a/LCARStrek/browser/search-pref.png b/LCARStrek/browser/search-pref.png
new file mode 100644 (file)
index 0000000..4576fa2
Binary files /dev/null and b/LCARStrek/browser/search-pref.png differ

diff --git a/LCARStrek/browser/searchbar.css b/LCARStrek/browser/searchbar.css
index a7c3127bde6526bcf1c3415b9598a51619a81fb3..ee833eb100c0787ac76868b5a9d15c1afd81fd80 100644 (file)
--- a/LCARStrek/browser/searchbar.css
+++ b/LCARStrek/browser/searchbar.css
@@ -82,3 +82,172 @@
 .searchbar-engine-menuitem[selected="true"] > .menu-iconic-text {
   font-weight: bold;
 }
 .searchbar-engine-menuitem[selected="true"] > .menu-iconic-text {
   font-weight: bold;
 }

+
+
+.searchbar-search-button-container {
+  -moz-box-align: center;
+  padding: 3px 4px;
+  -moz-padding-end: 2px;
+}
+
+.searchbar-search-button {
+  list-style-image: url("chrome://browser/skin/search-indicator.png");
+  -moz-image-region: rect(0, 20px, 20px, 0);
+  margin: -2px -2px;
+}
+
+.searchbar-search-button:hover,
+.searchbar-search-button:hover:active {
+  -moz-image-region: rect(0, 40px, 20px, 20px);
+}
+
+searchbar[oneoffui] .search-go-button {
+  list-style-image: url("chrome://browser/skin/reload-stop-go.png");
+  -moz-image-region: rect(0, 42px, 14px, 28px);
+}
+
+searchbar[oneoffui] .search-go-button:hover {
+  -moz-image-region: rect(14px, 42px, 28px, 28px);
+}
+
+searchbar[oneoffui] .search-go-button:hover:active {
+  -moz-image-region: rect(28px, 42px, 42px, 28px);
+}
+
+searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1);
+}
+
+
+.search-panel-current-engine {
+  border-top: none !important;
+  border-bottom: 1px solid #9C9CFF;
+  -moz-box-align: center;
+}
+
+.search-panel-header {
+  font-weight: normal;
+  background-color: #A09090;
+  border-top: 1px solid #9C9CFF;
+  margin: 0;
+  padding: 3px 6px;
+  color: #000000;
+}
+
+.search-panel-current-input > label {
+  margin: 0 0 !important;
+}
+
+.search-panel-input-value {
+  color: black;
+}
+
+.search-panel-one-offs {
+  margin: 0 0 !important;
+  border-top: 1px solid #9C9CFF;
+}
+
+.searchbar-engine-one-off-item {
+  -moz-appearance: none;
+  display: inline-block;
+  border: none;
+  min-width: 48px;
+  height: 32px;
+  margin: 0 0;
+  padding: 0 0;
+  background: none;
+  background-image: url('chrome://browser/skin/search-oneoff-bg-border.png');
+  background-repeat: no-repeat;
+  background-position: right center;
+}
+
+.searchbar-engine-one-off-item:not(.last-row) {
+  box-sizing: padding-box;
+  border-bottom: 1px solid #9C9CFF;
+}
+
+.searchbar-engine-one-off-item.last-of-row {
+  background-image: none;
+}
+
+.searchbar-engine-one-off-item:hover:not(.dummy),
+.searchbar-engine-one-off-item[selected] {
+  background-color: #008484;
+  background-image: none;
+}
+
+.searchbar-engine-one-off-item > .button-box {
+  border: none;
+  padding: 0 0;
+}
+
+.searchbar-engine-one-off-item > .button-box > .button-text {
+  display: none;
+}
+
+.searchbar-engine-one-off-item > .button-box > .button-icon {
+  width: 16px;
+  height: 16px;
+}
+ 
+.addengine-item {
+  -moz-appearance: none;
+  border: none;
+  height: 32px;
+  margin: 0 0;
+  padding: 0 10px;
+}
+
+.addengine-item > .button-box {
+  -moz-box-pack: start;
+}
+
+.addengine-item:first-of-type {
+  border-top: 1px solid #9C9CFF;
+}
+
+.addengine-item:hover {
+  background-color: #FFCF00;
+  color: #000000;
+}
+
+.addengine-item > .button-box > .button-icon {
+  width: 16px;
+}
+
+.addengine-item > .button-box > .button-text {
+  -moz-box-flex: 1;
+  text-align: start;
+  -moz-padding-start: 10px;
+}
+
+.addengine-item:not([image]) {
+  list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
+}
+
+searchbar[oneoffui] .searchbar-engine-button {
+  display: none;
+}
+
+.search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
+  -moz-padding-start: 15px;
+  border-top: none !important;
+}
+
+searchbar[oneoffui] .searchbar-engine-image {
+  -moz-margin-start: -1px;
+}
+
+.search-setting-button {
+  -moz-appearance: none;
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  -moz-border-top-colors: none;
+  min-height: 32px;
+}
+
+.search-setting-button:hover {
+  background-color: #FFCF00;
+  border-top-color: #9C9CFF;
+}

diff --git a/LCARStrek/global/in-content/common.css b/LCARStrek/global/in-content/common.css
index 3cd62d97ea3e78e792f575dd9b61c40a53cdf228..9e7dc971081a7629c15ede7d03749c48b87dc865 100644 (file)
--- a/LCARStrek/global/in-content/common.css
+++ b/LCARStrek/global/in-content/common.css
@@ -179,6 +179,10 @@ xul|menulist > xul|*.menulist-label-box {
   padding-left: 10px !important;
 }
 
   padding-left: 10px !important;
 }
 

+xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon {
+  -moz-margin-end: 5px;
+}
+

 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
   -moz-appearance: none;
   margin: 1px 0;
 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
   -moz-appearance: none;
   margin: 1px 0;


@@ -450,6 +454,10 @@ xul|*.checkbox-label-box {
   }
 }
 
   }
 }
 

+xul|richlistitem > xul|*.checkbox-check {
+  margin: 3px 6px;
+}
+

 xul|*.radio-check {
   -moz-appearance: none;
   width: 23px;
 xul|*.radio-check {
   -moz-appearance: none;
   width: 23px;