Bug 494551: Use images for buttons in main chrome UI (wince part), r=stuart

mobile/themes/wince/browser.css

@@ -44,62 +44,42 @@
 #toolbar-main {
   -moz-appearance: none;
   -moz-box-align: center;
-  padding: 0px 10px;
+  padding: 2.2mm; /* core spacing */
   border: none;
 }
 
-toolbarbutton {
-  -moz-appearance: none !important;
-  -moz-box-orient: vertical;
-  min-width: 48px;
-  min-height: 48px;
-  /* override default toolbarbutton padding/margin */
-  margin: 0;
-  padding: 5px;
-}
-
-toolbarbutton:not(.show-text) .toolbarbutton-text {
-  display: none !important;
-}
-
-toolbarbutton:not(.show-text) .toolbarbutton-icon {
-  -moz-margin-end: 0px;
-}
-
-toolbarbutton:hover,
-toolbarbutton:hover:active,
-toolbarbutton[open="true"] {
-  border-color: transparent;
-}
-
 /* main toolbar buttons */
 toolbarbutton.urlbar-button {
   /* space out the buttons a bit horizontally */
-  margin-left: 8px
+  margin-left: 2.2mm; /* core spacing */
 }
 
 #tool-bookmarks {
-  list-style-image: url("chrome://browser/skin/images/bookmarks-24.png");
+  list-style-image: url("chrome://browser/skin/images/bookmarks-default-64.png");
+}
+
+#tool-bookmarks:hover:active {
+  list-style-image: url("chrome://browser/skin/images/bookmarks-active-64.png");
 }
 
 /* URL bar cap buttons */
 toolbarbutton.urlbar-cap-button {
-  margin: 2px;
-  padding: 0px;
-  min-width: 0px;
-  min-height: 0px;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
 }
 
 #tool-go {
-  list-style-image: url("chrome://browser/skin/images/go-16.png");
+  list-style-image: url("chrome://browser/skin/images/go-default-30.png");
 }
 
 #tool-reload {
-  list-style-image: url("chrome://browser/skin/images/reload-16.png");
+  list-style-image: url("chrome://browser/skin/images/reload-default-30.png");
 }
 
 #tool-stop {
-  list-style-image: url("chrome://browser/skin/images/stop-16.png");
+  list-style-image: url("chrome://browser/skin/images/stop-default-30.png");
 }
 
 #urlbar-icons[mode="loading"] > #tool-go,
@@ -121,43 +101,37 @@ toolbarbutton.urlbar-cap-button {
 #urlbar-container {
   color: #000;
   -moz-box-align: center;
-  min-height: 60px;
 }
 
 /* creates the left endcap */
 #identity-box {
-  color: #fff;
-  padding: 9px 4px;
-  -moz-border-radius-topleft: 0.5em;
-  -moz-border-radius-bottomleft: 0.5em;
-  border: 1px solid #777;
-  background: #525252;
+  min-height: 64px;
+  min-width: 64px;
+  background: url("images/leftcap-default-64.png") top left no-repeat;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 #identity-box:hover:active {
-  border: 1px solid #202020;
-  background: #303030;
+  background: url("images/leftcap-active-64.png");
 }
 
-/* add special color and extra width */
+/* add special color */
 #identity-box[mode="verifiedIdentity"] {
-  min-width: 50px;
-  background-color: #77c494;
+  background: url("images/leftcapEV-default-64.png");
 }
 
-/* add special color and extra width */
+#identity-box[mode="verifiedIdentity"]:hover:active {
+  background: url("images/leftcapEV-active-64.png");
+}
+
+/* add special color */
 #identity-box[mode="verifiedDomain"] {
-  min-width: 50px;
-  background-color: #6ca0c9;
+  background: url("images/leftcapSSL-default-64.png");
 }
 
-/* favicon images are 16x16 */
-#urlbar-image-box {
-  max-width: 24px;
-  max-height: 24px;
-  min-width: 24px;
-  min-height: 24px;
-  margin: 2px;
+#identity-box[mode="verifiedDomain"]:hover:active {
+  background: url("images/leftcapSSL-active-64.png");
 }
 
 #urlbar-throbber[loading] {
@@ -165,15 +139,16 @@ toolbarbutton.urlbar-cap-button {
 }
 
 #urlbar-favicon {
-  width: 24px;
-  height: 24px;
+  width: 30px;
+  height: 30px;
 }
 
 #urlbar-editarea {
+  min-height: 64px;
   -moz-box-align: center;
-  padding: 7px 4px 8px 4px;
-  border-top: 1px solid #777;
-  border-bottom: 1px solid #777;
+  padding: 0;
+  border-top: 1px solid #262629; /* keep pixels */
+  border-bottom: 3px solid #262629; /* keep pixels */
   background: #fff;
 }
 
@@ -181,137 +156,175 @@ toolbarbutton.urlbar-cap-button {
   -moz-appearance: none !important;
   padding: 0px !important;
   border: none !important;
+  color: #000;
   background-color: #fff;
 }
 
 /* make sure this endcap matches the other endcap */
 #urlbar-icons {
-  color: #fff;
-  padding: 12px 4px;
-  -moz-border-radius-topright: 0.5em;
-  -moz-border-radius-bottomright: 0.5em;
-  border: 1px solid #777;
-  background: #525252;
+  min-height: 64px;
+  min-width: 64px;
+  background: url("images/rightcap-default-64.png") top right no-repeat;
+  -moz-box-pack: center;
 }
 
 #urlbar-icons:hover:active {
-  border: 1px solid #202020;
-  background: #303030;
+  background: url("images/rightcap-active-64.png");
 }
 
 /* right toolbar (browser controls) ---------------------------------------- */
 #browser-controls {
-  -moz-box-align: end;
-  padding: 0px 10px;
+  -moz-box-align: start;
+  padding: 0 2.2mm; /* core spacing + tiny bit for a rounding issue? */
+  border-left: 3px solid #262629; /* keep pixels */
 }
 
 toolbarbutton.browser-control-button,
 toolbarbutton.panel-button,
 toolbarbutton.page-button {
   /* space out the buttons a bit vertically */
-  margin-bottom: 8px;
+  margin-bottom: 2.2mm; /* core spacing */
 }
 
 #tool-star {
-  list-style-image: url("chrome://browser/skin/images/bookmarkpage-24.png");
+  list-style-image: url("chrome://browser/skin/images/bookmark-default-64.png");
+}
+
+#tool-star:hover:active {
+  list-style-image: url("chrome://browser/skin/images/bookmark-active-64.png");
 }
 
 #tool-star[starred="true"] {
-  list-style-image: url("chrome://browser/skin/images/bookmarkpage-on-24.png");
+  list-style-image: url("chrome://browser/skin/images/bookmarked-default-64.png");
+}
+
+#tool-star[starred="true"]:hover:active {
+  list-style-image: url("chrome://browser/skin/images/bookmarked-active-64.png");
 }
 
 #tool-back {
-  list-style-image: url("chrome://browser/skin/images/back-24.png");
+  list-style-image: url("chrome://browser/skin/images/back-default-64.png");
 }
 
-#tool-back[disabled="true"] {
-  list-style-image: url("chrome://browser/skin/images/back-disabled-24.png");
+#tool-back:hover:active {
+  list-style-image: url("chrome://browser/skin/images/back-active-64.png");
+}
+
+#tool-back[disabled="true"],
+#tool-back[disabled="true"]:hover:active {
+  list-style-image: url("chrome://browser/skin/images/back-disabled-64.png");
 }
 
 #tool-forward {
-  list-style-image: url("chrome://browser/skin/images/forward-24.png");
+  list-style-image: url("chrome://browser/skin/images/forward-default-64.png");
 }
 
-#tool-forward[disabled="true"] {
-  list-style-image: url("chrome://browser/skin/images/forward-disabled-24.png");
+#tool-forward:hover:active {
+  list-style-image: url("chrome://browser/skin/images/forward-active-64.png");
 }
 
-/* button is moved off the right edge */
+#tool-forward[disabled="true"],
+#tool-forward[disabled="true"]:hover:active {
+  list-style-image: url("chrome://browser/skin/images/forward-disabled-64.png");
+}
+
+/* button overflows off the right edge */
 #tool-panel-open {
-  list-style-image: url("chrome://browser/skin/images/settings-24.png");
-  margin-right: -14px;
-  /* XXX not sure why we need the padding here, but not in #tool-panel-close */
-  padding-right: 26px;
+  list-style-image: url("chrome://browser/skin/images/settings-default-64.png");
+  margin-right: -40px; /* big number just to make sure the image overflows the edge */
 }
 
-/* button is moved off the left edge */
+/* button overflows off the left edge */
 #tool-panel-close {
-  list-style-image: url("chrome://browser/skin/images/back-24.png");
-  margin-left: -14px;
+  list-style-image: url("chrome://browser/skin/images/settings-active-64.png");
+  margin-left: -40px; /* big number just to make sure the image overflows the edge */
 }
 
 /* "extras" panel UI   ----------------------------------------------------- */
 #panel-controls {
   /* match #browser-controls end padding */
-  padding: 0px 10px;
+  padding: 0 2.2mm; /* core spacing */
+  -moz-box-align: end;
 }
 
 .panel-header {
-  padding: 5px;
+  padding: 2.2mm; /* core spacing */
 }
 
 #tool-addons {
-  list-style-image: url("chrome://browser/skin/images/addons-24.png");
+  list-style-image: url("chrome://browser/skin/images/addons-default-64.png");
+}
+
+#tool-addons:hover:active,
+#tool-addons[checked="true"] {
+  list-style-image: url("chrome://browser/skin/images/addons-active-64.png");
 }
 
 #tool-downloads {
-  list-style-image: url("chrome://browser/skin/images/downloads-24.png");
+  list-style-image: url("chrome://browser/skin/images/downloads-default-64.png");
+}
+
+#tool-downloads:hover:active,
+#tool-downloads[checked="true"] {
+  list-style-image: url("chrome://browser/skin/images/downloads-active-64.png");
 }
 
 #tool-preferences {
-  list-style-image: url("chrome://browser/skin/images/preferences-24.png");
+  list-style-image: url("chrome://browser/skin/images/preferences-default-64.png");
+}
+
+#tool-preferences:hover:active,
+#tool-preferences[checked="true"] {
+  list-style-image: url("chrome://browser/skin/images/preferences-active-64.png");
 }
 
 #tool-console {
-  list-style-image: url("chrome://browser/skin/images/console-24.png");
+  list-style-image: url("chrome://browser/skin/images/console-default-64.png");
+}
+
+#tool-console:hover:active,
+#tool-console[checked="true"] {
+  list-style-image: url("chrome://browser/skin/images/console-active-64.png");
 }
 
 /* URL List and autocomplete navigation popup ------------------------------ */
 #tool-bookmarks-close,
 #tool-folders-close {
-  list-style-image: url("chrome://browser/skin/images/bookmarks-24.png");
+  list-style-image: url("chrome://browser/skin/images/bookmarks-active-64.png");
 }
 
 #bookmarklist-container {
-  padding: 0px;
+  padding: 0;
 }
 
 #bookmarklist-header, #folder-header {
   color: rgb(255,255,255);
   -moz-box-align: center;
-  padding: 0px 10px;
+  padding: 2.2mm; /* core spacing */
 }
 
 #bookmark-items, #folder-items {
   -moz-appearance: none !important;
   background-color: rgb(255,255,255);
-  padding: 0px;
+  padding: 0;
 }
 
 .place-list-parents {
   background-color: rgb(207,207,207);
-  padding: 4px;
+  padding: 0.5mm;
 }
 
 .place-list-children {
   -moz-appearance: none;
   border: none !important;
-  padding: 0px;
+  padding: 0;
 }
 
 .bookmark-folder, .bookmark-item {
-  padding: 5px 2px;
-  border-bottom: 1px solid rgb(207,207,207);
+  padding: 0.5mm 0.2mm;
+  border-bottom: 0.1mm solid rgb(207,207,207);
+  min-height: 14.4mm; /* row size */
+  -moz-box-align: center;
 }
 
 .bookmark-folder textbox[readonly="true"], .bookmark-item textbox[readonly="true"] {
@@ -322,7 +335,7 @@ toolbarbutton.page-button {
 }
 
 placelabel.bookmark-folder {
-  border-bottom: 1px solid rgb(255,255,255);
+  border-bottom: 0.1mm solid rgb(255,255,255);
 }
 
 .bookmark-item-image, .bookmark-folder-image {
@@ -330,11 +343,6 @@ placelabel.bookmark-folder {
   height: 24px;
 }
 
-/* hack to align with 1st grid/row */
-.bookmark-item-image {
-  margin-top: 8px;
-}
-
 /* folders have a fixed image */
 .bookmark-folder-image {
   list-style-image: url("chrome://browser/skin/images/folder.png");
@@ -357,7 +365,8 @@ placeitem[ui="manage"] .bookmark-item-image {
 
 /* be consistent with the size of placeitem */
 placelabel {
-  height: 34px;
+  min-height: 14.4mm; /* row size */
+  -moz-box-align: center;
 }
 
 /* use a smaller font size for the manage buttons */
@@ -382,8 +391,8 @@ placeitem .button-text {
 }
 
 #autocomplete_navbuttons {
-  margin: 10px;
-  min-height: 50px;
+  margin: 2.2mm; /* core spacing */
+  min-height: 14.4mm; /* row size */
 }
 
 .autocomplete-items {
@@ -393,8 +402,10 @@ placeitem .button-text {
 
 .autocomplete-item,
 .autocomplete-item-selected {
-  padding: 5px 2px;
-  border-bottom: 1px solid rgb(207,207,207);
+  padding: 0.5mm 0.2mm;
+  border-bottom: 0.1mm solid rgb(207,207,207);
+  min-height: 14.4mm; /* row size */
+  -moz-box-pack: center;
 }
 
 .autocomplete-item-selected {
@@ -411,47 +422,56 @@ placeitem .button-text {
 }
 
 .ac-result-type-bookmark {
-  list-style-image: url("chrome://browser/skin/images/page-starred.png");
-  width: 16px;
-  height: 16px;
+  list-style-image: url("chrome://browser/skin/images/star-default-30.png");
 }
 
 .ac-result-type-tag {
-  list-style-image: url("chrome://browser/skin/images/tag.png");
-  width: 16px;
-  height: 16px;
+  list-style-image: url("chrome://browser/skin/images/tag-default-30.png");
 }
 
 /* Left sidebar (tabs)  ---------------------------------------------------- */
 #tabs-container {
-  padding-left: 10px;
-  min-width: 132px;
+  -moz-padding-start: 1.2mm; /* allow the thumbnails to get close to the edge */
+  -moz-padding-end: 2.2mm; /* core spacing */
+  border-right: 3px solid #262629; /* keep pixels */
 }
 
 #tabs {
   -moz-appearance: none;
   margin: 0;
-  padding: 4px;
-  -moz-padding-end: 12px;
+  padding: 0;
   background-color: transparent;
 }
 
+#tabs-controls {
+  margin-top: 2.2mm; /* core spacing */
+  -moz-box-pack: center;
+}
+
 richlistitem[type="documenttab"] {
   -moz-appearance: none;
-  border: 1px solid transparent;
-  -moz-border-radius: 5px;
-  background: none;
-  padding: 4px;
+  padding: 0;
+  border: none;
+}
+
+richlistitem[type="documenttab"] .documenttab-canvas {
+  /* keep the unselected thumbnails aligned with the selected one */
+  border: 2mm solid transparent;
 }
 
 richlistitem[type="documenttab"][selected="true"] {
-  border: 1px solid white !important;
+  background-color: transparent;
+}
+
+richlistitem[type="documenttab"][selected="true"] .documenttab-canvas {
+  border: 2mm solid #262629;
+  -moz-border-radius: 4px;
 }
 
 .documenttab-close {
-  width: 24px;
-  height: 24px;
-  list-style-image: url(chrome://browser/skin/images/tab_close.png);
+  width: 28px;
+  height: 30px;
+  list-style-image: url("chrome://browser/skin/images/tab-close.png");
 }
 
 vbox:first-child richlistitem[type="documenttab"]:only-child .documenttab-close {
@@ -459,7 +479,11 @@ vbox:first-child richlistitem[type="documenttab"]:only-child .documenttab-close
 }
 
 #newtab-button {
-  list-style-image: url("images/newtab-24.png");
+  list-style-image: url("images/newtab-default-64.png");
+}
+
+#newtab-button:hover:active {
+  list-style-image: url("images/newtab-active-64.png");
 }
 
 /* findbar   --------------------------------------------------------------- */
@@ -469,73 +493,70 @@ findbar {
 
 /* bookmark editor   ------------------------------------------------------- */
 #bookmark-container {
-  padding: 8px;
+  padding: 2.2mm; /* core spacing */
 }
 
 #bookmark-form {
   background-color: #fff;
-  padding: 8px;
+  padding: 2.2mm; /* core spacing */
 }
 
 /* Identity popup   -------------------------------------------------------- */
 #identity-container {
-  padding: 8px;
+  padding: 2.2mm; /* core spacing */
 }
 
 /* Popup Icons */
-#identity-icon {
-  height: 48px;
-  width: 48px;
+#identity-popup-icon {
   padding: 0;
-  list-style-image: url("chrome://browser/skin/images/identity.png");
-  -moz-image-region: rect(0px, 64px, 64px, 0px);
+  list-style-image: url("chrome://browser/skin/images/identity-64.png");
 }
 
-#identity-container[mode="verifiedDomain"] > #identity-icon {
-  -moz-image-region: rect(64px, 64px, 128px, 0px);
+#identity-container[mode="verifiedDomain"] > #identity-popup-icon {
+  list-style-image: url("chrome://browser/skin/images/identitySSL-64.png");
 }
 
-#identity-container[mode="verifiedIdentity"] > #identity-icon {
-  -moz-image-region: rect(128px, 64px, 192px, 0px);
+#identity-container[mode="verifiedIdentity"] > #identity-popup-icon {
+  list-style-image: url("chrome://browser/skin/images/identityEV-64.png");
 }
 
 /* Popup Body Text */
-#identity-content-box {
-  -moz-padding-start: 8px;
+#identity-popup-content-box {
+  -moz-padding-start: 2.2mm; /* core spacing */
 }
 
-#identity-content-box.unknownIdentity > hbox > #identity-connectedToLabel,
-#identity-content-box.unknownIdentity > hbox > #identity-runByLabel,
-#identity-content-box.unknownIdentity > hbox > #identity-content-host,
-#identity-content-box.unknownIdentity > hbox > #identity-content-owner,
-#identity-content-box.verifiedIdentity > hbox > #identity-connectedToLabel2,
-#identity-content-box.verifiedDomain > hbox > #identity-connectedToLabel2 {
+#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-connectedToLabel,
+#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-runByLabel,
+#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-content-host,
+#identity-popup-content-box.unknownIdentity > hbox > #identity-popup-content-owner,
+#identity-popup-content-box.verifiedIdentity > hbox > #identity-popup-connectedToLabel2,
+#identity-popup-content-box.verifiedDomain > hbox > #identity-popup-connectedToLabel2 {
   display: none;
 }
 
-#identity-content-box > hbox > description,
-#identity-content-box > hbox > label {
+#identity-popup-content-box > hbox > description,
+#identity-popup-content-box > hbox > label {
   font-size: 11pt !important;
   white-space: pre-wrap;
 }
 
-#identity-encryption-label,
-#identity-content-verifier {
+#identity-popup-encryption-label,
+#identity-popup-content-verifier {
   font-size: 8pt !important;
 }
 
-#identity-content-host,
-#identity-content-owner {
+#identity-popup-content-host,
+#identity-popup-content-owner {
   font-weight: bold;
 }
 
-#identity-encryption-icon {
-  list-style-image: url("chrome://browser/skin/images/downloads-24.png");
+#identity-popup-encryption-icon {
+  list-style-image: url("chrome://browser/skin/images/unlock-40.png");
 }
 
-#identity-container.verifiedIdentity > vbox > #identity-encryption-icon ,
-#identity-container.verifiedDomain > vbox > #identity-encryption-icon {
-  list-style-image: url("chrome://browser/skin/images/addons-24.png");
+#identity-container[mode="verifiedIdentity"] > vbox > #identity-popup-encryption-icon ,
+#identity-container[mode="verifiedDomain"] > vbox > #identity-popup-encryption-icon {
+  list-style-image: url("chrome://browser/skin/images/lock-40.png");
 }
 
 /* Preferences window   ---------------------------------------------------- */
@@ -550,13 +571,14 @@ richpref {
   font-weight: bold;
   color: #000;
   background-color: lightgray;
-  padding: 5px;
+  padding: 0.5mm;
 }
 
 /* XXX should be a richlistitem */
 .prefbox {
-  padding: 5px;
-  border-bottom: 1px solid rgb(207,207,207);
+  padding: 0.5mm;
+  border-bottom: 0.1mm solid rgb(207,207,207);
+  min-height: 14.4mm; /* row size */
   -moz-box-align: center;
 }
 
@@ -576,10 +598,10 @@ richpref {
 #alerts-container {
   color: #000;
   background-color: #fff;
-  border: 4px solid gray;
-  -moz-border-radius: 8px;
-  padding: 8px;
-  -moz-box-shadow: black 4px 4px 10px;
+  border: 0.5mm solid gray;
+  -moz-border-radius: 2mm;
+  padding: 2.2mm; /* core spacing */
+  -moz-box-shadow: black 0.5mm 0.5mm 1mm;
 }
 
 #alerts-text {

mobile/themes/wince/jar.mn

@@ -12,29 +12,53 @@ classic.jar:
   platform.css                         (platform.css)
   browser.css                          (browser.css)
   notification.css                     (notification.css)
-  images/tab_close.png                 (images/tab_close.png)
   images/default-favicon.png           (images/default-favicon.png)
-  images/identity.png                  (images/identity.png)
   images/starred48.png                 (images/starred48.png)
-  images/tag.png                       (images/tag.png)
   images/throbber.png                  (images/throbber.png)
   images/navigation_magnifier.gif      (images/navigation_magnifier.gif)
   images/folder.png                    (images/folder.png)
   images/folder_close.png              (images/folder_close.png)
-  images/addons-24.png                 (images/addons-24.png)
-  images/downloads-24.png              (images/downloads-24.png)
-  images/preferences-24.png            (images/preferences-24.png)
-  images/console-24.png                (images/console-24.png)
-  images/settings-24.png               (images/settings-24.png)
-  images/back-24.png                   (images/back-24.png)
-  images/back-disabled-24.png          (images/back-disabled-24.png)
-  images/forward-24.png                (images/forward-24.png)
-  images/forward-disabled-24.png       (images/forward-disabled-24.png)
-  images/bookmarkpage-24.png           (images/bookmarkpage-24.png)
-  images/bookmarkpage-on-24.png        (images/bookmarkpage-on-24.png)
-  images/bookmarks-24.png              (images/bookmarks-24.png)
-  images/stop-16.png                   (images/stop-16.png)
-  images/reload-16.png                 (images/reload-16.png)
-  images/go-16.png                     (images/go-16.png)
-  images/newtab-24.png                 (images/newtab-24.png)
+  images/stop-default-30.png           (images/stop-default-30.png)
+  images/reload-default-30.png         (images/reload-default-30.png)
+  images/go-default-30.png             (images/go-default-30.png)
+  images/addons-default-64.png         (images/addons-default-64.png)
+  images/addons-active-64.png          (images/addons-active-64.png)
+  images/back-default-64.png           (images/back-default-64.png)
+  images/back-active-64.png            (images/back-active-64.png)
+  images/back-disabled-64.png          (images/back-disabled-64.png)
+  images/bookmark-default-64.png       (images/bookmark-default-64.png)
+  images/bookmark-active-64.png        (images/bookmark-active-64.png)
+  images/bookmarked-default-64.png     (images/bookmarked-default-64.png)
+  images/bookmarked-active-64.png      (images/bookmarked-active-64.png)
+  images/bookmarks-default-64.png      (images/bookmarks-default-64.png)
+  images/bookmarks-active-64.png       (images/bookmarks-active-64.png)
+  images/forward-default-64.png        (images/forward-default-64.png)
+  images/forward-active-64.png         (images/forward-active-64.png)
+  images/forward-disabled-64.png       (images/forward-disabled-64.png)
+  images/downloads-default-64.png      (images/downloads-default-64.png)
+  images/downloads-active-64.png       (images/downloads-active-64.png)
+  images/settings-default-64.png       (images/settings-default-64.png)
+  images/settings-active-64.png        (images/settings-active-64.png)
+  images/preferences-default-64.png    (images/preferences-default-64.png)
+  images/preferences-active-64.png     (images/preferences-active-64.png)
+  images/console-default-64.png        (images/console-default-64.png)
+  images/console-active-64.png         (images/console-active-64.png)  
+  images/newtab-default-64.png         (images/newtab-default-64.png)
+  images/newtab-active-64.png          (images/newtab-active-64.png)
+  images/leftcap-default-64.png        (images/leftcap-default-64.png)
+  images/leftcap-active-64.png         (images/leftcap-active-64.png)
+  images/leftcapEV-default-64.png      (images/leftcapEV-default-64.png)
+  images/leftcapEV-active-64.png       (images/leftcapEV-active-64.png)
+  images/leftcapSSL-default-64.png     (images/leftcapSSL-default-64.png)
+  images/leftcapSSL-active-64.png      (images/leftcapSSL-active-64.png)
+  images/rightcap-default-64.png       (images/rightcap-default-64.png)
+  images/rightcap-active-64.png        (images/rightcap-active-64.png)
+  images/identity-64.png               (images/identity-64.png)
+  images/identityEV-64.png             (images/identityEV-64.png)
+  images/identitySSL-64.png            (images/identitySSL-64.png)
+  images/lock-40.png                   (images/lock-40.png)
+  images/unlock-40.png                 (images/unlock-40.png)
+  images/tab-close.png                 (images/tab-close.png)
+  images/tag-default-30.png            (images/tag-default-30.png)
+  images/star-default-30.png           (images/star-default-30.png)
   images/geo-16.png                    (images/geo-16.png)

mobile/themes/wince/platform.css

@@ -41,16 +41,16 @@
 /* panels ------------------------------------------------------------------ */
 .panel-dark {
   color: white;
-  background-color: #414141;
+  background-color: #36373b;
 }
 
 /* dialog popups ----------------------------------------------------------- */
 .dialog-dark {
   color: #fff;
-  background-color: #414141;
-  -moz-border-radius: 0px 0px 8px 8px;
+  background-color: #36373b;
+  -moz-border-radius: 0 0 2mm 2mm;
   padding: 8px;
-  -moz-box-shadow: black 0px 4px 4px;
+  -moz-box-shadow: black 0 0.5mm 0.5mm;
 }
 
 /* buttons ----------------------------------------------------------------- */
@@ -61,15 +61,16 @@
 }
 
 button {
-  min-width: 0;
-  color: #414141;
-  padding: 4px 8px;
-  -moz-border-radius: 0.5em;
+  min-width: 12mm !important; /* button size */
+  min-height: 12mm !important; /* button size */
+  color: #36373b;
+  padding: 0.5mm 1mm;
+  -moz-border-radius: 2mm;
   -moz-border-top-colors: -moz-initial;
   -moz-border-right-colors: -moz-initial;
   -moz-border-left-colors: -moz-initial;
   -moz-border-bottom-colors: -moz-initial;
-  border: 1px solid #414141;
+  border: 0.1mm solid #36373b;
   background: #efefef;
 }
 
@@ -79,7 +80,7 @@ button[disabled="true"] {
   -moz-border-right-colors: -moz-initial !important;
   -moz-border-left-colors: -moz-initial !important;
   -moz-border-bottom-colors: -moz-initial !important;
-  border: 1px solid #ccc;
+  border: 0.1mm solid #ccc;
   background: #fff;
 }
 
@@ -89,15 +90,37 @@ button:active {
   -moz-border-right-colors: -moz-initial;
   -moz-border-left-colors: -moz-initial;
   -moz-border-bottom-colors: -moz-initial;
-  border: 1px solid #aaa;
+  border: 0.1mm solid #aaa;
   background: #ddd;
 }
 
+toolbarbutton {
+  min-width: 14.4mm !important; /* primary button size */
+  min-height: 14.4mm !important; /* primary button size */
+  -moz-appearance: none !important;
+  margin: 0;
+  padding: 0.5mm;
+}
+
+toolbarbutton:not(.show-text) .toolbarbutton-text {
+  display: none !important;
+}
+
+toolbarbutton:not(.show-text) .toolbarbutton-icon {
+  -moz-margin-end: 0;
+}
+
+toolbarbutton:hover,
+toolbarbutton:hover:active,
+toolbarbutton[open="true"] {
+  border-color: transparent;
+}
+
 /* dark buttons ------------------------------------------------------------ */
 .button-dark {
   color: #fff;
-  padding: 4px 8px;
-  -moz-border-radius: 0.5em;
+  padding: 0.5mm 1mm;
+  -moz-border-radius: 2mm;
   border: 1px solid #777 !important;
   background: #525252;
 }
@@ -110,17 +133,24 @@ button:active {
 .button-dark[disabled="true"],
 .button-dark[disabled="true"]:active {
   border: 1px solid #515151;
-  background: #414141;
+  background: #36373b;
 }
 
 .button-dark[checked="true"] {
   /* checked overrides */
-  border: 1px solid #202020 !important;
+  border: 0.1mm solid #202020 !important;
   background: #303030 !important;
-  padding: 4px 8px !important;
+  padding: 0.5mm 1mm !important;
 }
 
-/* re-theme radio buttons */
+/* image buttons ----------------------------------------------------------- */
+.button-image {
+  padding: 0 !important;
+  background: #36373b !important;
+  border: none !important;
+}
+
+/* radio buttons ----------------------------------------------------------- */
 radiogroup {
   -moz-box-orient: horizontal;
 }
@@ -131,44 +161,54 @@ radiogroup {
 }
 
 radio {
-  color: #414141;
-  padding: 2px 12px 2px 8px;
-  margin: 0px;
-  border: 1px solid #414141;
+  min-width: 12mm !important; /* button size */
+  min-height: 12mm !important; /* button size */
+  color: #36373b;
+  padding: 0.2mm 2.2mm 0.2mm 1mm !important;
+  margin: 0;
+  border: 0.1mm solid #36373b;
   -moz-box-align: center;
   -moz-appearance: none;
   background: #fff;
 }
 
 radio[selected] {
-  padding: 2px 8px 2px 12px;
   color: #fff;
-  border: 1px solid #91875a;
+  border: 0.1mm solid #91875a;
   background-color: #DDC763;
 }
 
-radio .radio-check-box1, .radio-check {
+radio .radio-check-box1, radio .radio-icon, radio .radio-check {
   display: none;
 }
 
 radio:first-child {
-  -moz-border-radius-topleft: 0.5em;
-  -moz-border-radius-bottomleft: 0.5em;
+  -moz-border-radius-topleft: 2mm;
+  -moz-border-radius-bottomleft: 2mm;
 }
 
 radio:last-child {
-  -moz-border-radius-topright: 0.5em;
-  -moz-border-radius-bottomright: 0.5em;
+  -moz-border-radius-topright: 2mm;
+  -moz-border-radius-bottomright: 2mm;
 }
 
 /* dark radios ------------------------------------------------------------- */
 .toggle-dark radio {
   color: #fff;
-  border: 1px solid #777;
+  border: 0.1mm solid #777;
   background-color: #525252;
 }
 
 .toggle-dark radio[selected] {
-  border: 1px solid #202020;
+  border: 0.1mm solid #202020;
   background-color: #303030;
 }
+
+/* richlistbox ------------------------------------------------------------- */
+richlistbox {
+  margin: 0;
+}
+
+richlistitem {
+  min-height: 14.4mm; /* row size */
+}