# HG changeset patch # Parent b75328c6f66146106a54bcfbd55101e3fa31db6b diff --git a/mobile/chrome/content/browser-ui.js b/mobile/chrome/content/browser-ui.js --- a/mobile/chrome/content/browser-ui.js +++ b/mobile/chrome/content/browser-ui.js @@ -122,22 +122,26 @@ var BrowserUI = { let url = this.getDisplayURI(browser); let caption = browser.contentTitle || url; if (browser.contentTitle == "" && !Util.isURLEmpty(browser.userTypedValue)) caption = browser.userTypedValue; else if (Util.isURLEmpty(url)) caption = ""; + let tab = Browser.getTabForBrowser(aBrowser); + if (caption) { this._title.value = caption; this._title.classList.remove("placeholder"); + tab.chromeTab.setAttribute("label", caption); } else { this._title.value = this._title.getAttribute("placeholder"); this._title.classList.add("placeholder"); + tab.chromeTab.removeAttribute("label"); } }, /* * Dispatched by window.close() to allow us to turn window closes into tabs * closes. */ _domWindowClose: function(aBrowser) { diff --git a/mobile/chrome/content/browser.js b/mobile/chrome/content/browser.js --- a/mobile/chrome/content/browser.js +++ b/mobile/chrome/content/browser.js @@ -707,30 +707,36 @@ var Browser = { this.selectedTab = newTab; let getAttention = ("getAttention" in params ? params.getAttention : !aBringFront); let event = document.createEvent("UIEvents"); event.initUIEvent("TabOpen", true, false, window, getAttention); newTab.chromeTab.dispatchEvent(event); newTab.browser.messageManager.sendAsyncMessage("Browser:TabOpen"); + let cmd = document.getElementById("cmd_showTabs"); + cmd.setAttribute("label", Browser.tabs.length-1); + return newTab; }, closeTab: function closeTab(aTab, aOptions) { let tab = aTab instanceof XULElement ? this.getTabFromChrome(aTab) : aTab; if (!tab || !this._getNextTab(tab)) return; if (aOptions && "forceClose" in aOptions && aOptions.forceClose) { this._doCloseTab(aTab); return; } tab.browser.messageManager.sendAsyncMessage("Browser:CanUnload", {}); + + let cmd = document.getElementById("cmd_showTabs"); + cmd.setAttribute("label", Browser.tabs.length-1); }, _doCloseTab: function _doCloseTab(aTab) { let nextTab = this._getNextTab(aTab); if (!nextTab) return; // Make sure we leave the toolbar in an unlocked state diff --git a/mobile/chrome/content/browser.xul b/mobile/chrome/content/browser.xul --- a/mobile/chrome/content/browser.xul +++ b/mobile/chrome/content/browser.xul @@ -97,17 +97,17 @@ - + #ifdef MOZ_SERVICES_SYNC #endif @@ -217,16 +217,17 @@ + #ifdef MOZ_PLATFORM_MAEMO #if MOZ_PLATFORM_MAEMO != 6 #endif #endif - #ifndef ANDROID #endif diff --git a/mobile/chrome/content/tabs.xml b/mobile/chrome/content/tabs.xml --- a/mobile/chrome/content/tabs.xml +++ b/mobile/chrome/content/tabs.xml @@ -2,25 +2,26 @@ - + + false document.getAnonymousElementByAttribute(this, "anonid", "thumbnail"); this.parentNode.parentNode; diff --git a/mobile/themes/core/honeycomb/browser.css b/mobile/themes/core/honeycomb/browser.css new file mode 100644 --- /dev/null +++ b/mobile/themes/core/honeycomb/browser.css @@ -0,0 +1,1658 @@ +/* ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is Mozilla Mobile Browser. + * + * The Initial Developer of the Original Code is + * Mozilla Corporation. + * Portions created by the Initial Developer are Copyright (C) 2008 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * Mark Finkle + * + * Alternatively, the contents of this file may be used under the terms of + * either the GNU General Public License Version 2 or later (the "GPL"), or + * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), + * in which case the provisions of the GPL or the LGPL are applicable instead + * of those above. If you wish to allow use of your version of this file only + * under the terms of either the GPL or the LGPL, and not to allow others to + * use your version of this file under the terms of the MPL, indicate your + * decision by deleting the provisions above and replace them with the notice + * and other provisions required by the GPL or the LGPL. If you do not delete + * the provisions above, a recipient may use your version of this file under + * the terms of any one of the MPL, the GPL or the LGPL. + * + * ***** END LICENSE BLOCK ***** */ + +%filter substitution +%include defines.inc + +/* main toolbar (URL bar) -------------------------------------------------- */ +#toolbar-container { + background-color: transparent !important; +} + +#toolbar-main { + -moz-appearance: none; + -moz-box-align: center; + padding: 0; + border: none; + color: @color_text_default@; + background-color: @color_background_default@; + min-height: @touch_button_large@; + max-height: @touch_button_large@; +} + +#toolbar-moveable-container[mode="discovery"], +#toolbar-moveable-container[top="0"] { + position: fixed; + left: 0; + z-index: 1000; +} + +/* main toolbar buttons */ +toolbarbutton.urlbar-button { + /* space out the buttons a bit horizontally */ + -moz-margin-start: @margin_normal@; /* core spacing */ +} + +%ifndef ANDROID +/* MAEMO (and desktop) only */ +#tool-app-switch { + margin-top: -@margin_normal@; /* force the button to go to the edge */ + -moz-margin-start: 0; /* force the button to go to the edge */ + min-width: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */ + min-height: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */ + visibility: collapse; + -moz-margin-end: @margin_normal@; /* core spacing */ + list-style-image: url("chrome://browser/skin/images/task-switch-hdpi.png"); + background-color: transparent !important; + border: none !important; +} + +#tool-app-switch:hover:active { + background-color: @color_background_highlight@ !important; + -moz-border-radius-bottomright: @border_radius_small@; +} + +#toolbar-main[fullscreen="true"] #tool-app-switch:not(:-moz-system-metric(maemo-classic)) { + visibility: visible; +} + +/* MAEMO (and desktop) only */ +#tool-app-close { + margin-top: -@margin_normal@; /* force the button to go to the edge */ + -moz-margin-end: 0 !important; /* force the button to go to the edge */ + min-width: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */ + min-height: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */ + visibility: collapse; + list-style-image: url("chrome://browser/skin/images/task-close-hdpi.png"); + background-color: transparent !important; + border: none !important; +} + +#tool-app-close:hover:active { + background-color: @color_background_highlight@ !important; +} + +#tool-app-close:hover:active:-moz-locale-dir(ltr) { + -moz-border-radius-bottomleft: @border_radius_small@; +} + +#tool-app-close:hover:active:-moz-locale-dir(rtl) { + -moz-border-radius-bottomright: @border_radius_small@; +} + +%if MOZ_PLATFORM_MAEMO != 6 +#toolbar-main[fullscreen="true"] #tool-app-close { + visibility: visible; +} +%endif + +#toolbar-main[dialog="true"] #tool-app-close { + visibility: visible; + list-style-image: url("chrome://browser/skin/images/task-back-hdpi.png"); +} + +#toolbar-main[dialog="true"] #tool-app-close:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/images/task-back-rtl-hdpi.png"); +} +%endif + +/* URL bar ----------------------------------------------------------------- */ +#urlbar-container { + color: @color_text_default@; + background-color: transparent; + max-width: @urlbar_max_width@; + font: "Droid Sans"; + font-size: @font_snormal@; + -moz-box-align: center; + height: @touch_button_large@; + padding: 0 0 @padding_tiny@ 0; +} + +#urlbar-container[mode="edit"] > #identity-box { + visibility: collapse; +} + +/* URL bar cap buttons */ +.urlbar-cap-button { + margin: 0 !important; + min-width: @touch_button_small@ !important; + min-height: @urlbar_edit_height@ !important; + max-height: @urlbar_edit_height@ !important; + -moz-box-align: center; + -moz-box-pack: center; +} + +/* left cap button --------------------------------------------------------- */ +#identity-box { + background-image: url("chrome://browser/skin/images/urlbar-border-left.png"), + url("chrome://browser/skin/images/urlbar-border-bottom.png"); + background-position: bottom left; + background-repeat: no-repeat, + repeat-x; + padding: 0px @padding_tiny@; +} + +#identity-box:-moz-locale-dir(rtl) { + background-image: url("chrome://browser/skin/images/urlbar-border-right.png"), + url("chrome://browser/skin/images/urlbar-border-bottom.png"); + background-position: bottom right; + background-repeat: no-repeat, + repeat-x; +} + +/* add special color */ +#identity-box[mode="verifiedIdentity"] { + background-color: #89d715; +} + +#identity-box[mode="verifiedDomain"] { + background-color: #6579e3; +} + +#urlbar-throbber[loading] { + list-style-image: url("chrome://browser/skin/images/throbber.png"); +} + +#urlbar-throbber, +#urlbar-favicon { + width: 32px; + height: 32px; + image-rendering: -moz-crisp-edges; +} + +#urlbar-favicon[src=""] { + list-style-image: url("chrome://browser/skin/images/favicon-default-32.png"); +} + +/* Main urlbar textbox */ +#urlbar-title.placeholder { + color: @color_text_placeholder@; +} + +#urlbar-edit, +#urlbar-title { + padding: @padding_normal@ 0px @padding_small@ 0px; + margin: 0px !important; + min-height: @urlbar_edit_height@ !important; + max-height: @urlbar_edit_height@; +} + +#urlbar-title { + background-image: url("chrome://browser/skin/images/urlbar-border-right.png"), + url("chrome://browser/skin/images/urlbar-border-bottom.png"); + background-position: bottom right; + background-repeat: no-repeat, + repeat-x; +} + +#urlbar-title:-moz-locale-dir(rtl) { + background-image: url("chrome://browser/skin/images/urlbar-border-left.png"), + url("chrome://browser/skin/images/urlbar-border-bottom.png"); + background-position: bottom left; + background-repeat: no-repeat, + repeat-x; +} + +#urlbar-title:hover:active { + background: #a7c54f; +} + +#urlbar-edit { + -moz-appearance: none !important; + background-image: url("chrome://browser/skin/images/urlbar-border-left.png"), + url("chrome://browser/skin/images/urlbar-border-right.png"), + url("chrome://browser/skin/images/urlbar-border-bottom.png"); + background-position: bottom left, bottom right; + background-repeat: no-repeat, + no-repeat, + repeat-x; + border: none; +} + +#urlbar-edit > hbox > .textbox-input-box { + margin: 0px !important; +} + +:invalid { + box-shadow: none; +} + +#urlbar-edit > hbox > hbox > .textbox-input { + text-indent: @urlbar_edit_indent@; +} + +/* Right cap button --------------------------------------------------------- */ +#urlbar-icons { + background-image: url("chrome://browser/skin/images/urlbar-border-right.png"), + url("chrome://browser/skin/images/urlbar-border-bottom.png"); + background-position: bottom right; + background-repeat: no-repeat, + repeat-x; +} + +#urlbar-icons:-moz-locale-dir(rtl) { + background-image: url("chrome://browser/skin/images/urlbar-border-left.png"), + url("chrome://browser/skin/images/urlbar-border-bottom.png"); + background-position: bottom left; +} + +#urlbar-icons toolbarbutton { + padding: 0px @padding_small@ 0px @padding_xsmall@; + margin: 0px !important; +} + +#urlbar-icons[disabled="true"] { + pointer-events: none; +} + +#urlbar-icons[disabled="true"] > toolbarbutton { + opacity: 0.5; +} + +#tool-reload { + list-style-image: url("chrome://browser/skin/images/reload-hdpi.png"); +} + +#tool-stop { + list-style-image: url("chrome://browser/skin/images/stop-hdpi.png"); +} + +#tool-search { + list-style-image: url("chrome://browser/skin/images/navigation-magnifier-30.png"); +} + +#urlbar-icons[mode="loading"] > #tool-search, +#urlbar-icons[mode="loading"] > #tool-reload { + visibility: collapse; +} + +#urlbar-icons[mode="view"] > #tool-search, +#urlbar-icons[mode="view"] > #tool-stop { + visibility: collapse; +} + +#urlbar-icons[mode="edit"] > #tool-reload, +#urlbar-icons[mode="edit"] > #tool-stop { + visibility: collapse; +} + +/* right toolbar (browser controls) ---------------------------------------- */ +#browser-controls { + -moz-box-align: start; + padding: 0; + -moz-border-start: @border_width_large@ solid #262629; + min-width: @sidebar_width_minimum@ !important; + background: @color_background_default@; +} + +.button-control { + min-width: @sidebar_width_minimum@ !important; + border-top: @border_width_tiny@ solid @color_divider_border@ !important; + border-bottom: @border_width_tiny@ solid @color_divider_border@ !important; + background-color: transparent !important; + -moz-box-align: center; + -moz-box-pack: center; + height: @sidebar_button_height@; +} + +.button-control:last-child { + border-bottom: 0 solid @color_divider_border@ !important; +} + +.button-control[disabled="true"] { + opacity: 0.5; +} + +.button-control:not([disabled="true"]):hover:active { + background-color: @color_background_active@ !important; + border-top: none; +} + +#tool-tabs { + -moz-box-orient: vertical; + list-style-image: url("chrome://browser/skin/images/tabs-hdpi.png"); +} + +#tool-tabs .toolbarbutton-icon { + -moz-transform: translateY(0.5em); +} + +#tool-tabs .toolbarbutton-text { + display: -moz-box; + font-weight: bolder; + font-size: @font_small@ !important; + -moz-transform: translateY(-1.25em); +} + +.tool-star { + list-style-image: url("chrome://browser/skin/images/bookmark-default-hdpi.png"); +} + +.tool-star[starred="true"] { + list-style-image: url("chrome://browser/skin/images/bookmark-starred-hdpi.png"); +} + +.tool-back, +.tool-forward:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/images/back-default-hdpi.png"); +} + +#tool-back2 { + -moz-margin-end: 1px; +} + +.tool-back:-moz-locale-dir(rtl), +.tool-forward { + list-style-image: url("chrome://browser/skin/images/forward-default-hdpi.png"); +} + +#tool-panel-open { + list-style-image: url("chrome://browser/skin/images/settings-default-hdpi.png"); +} + +%ifndef ANDROID +/* MAEMO (and desktop) only */ +.panel-close { + min-width: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */ + max-width: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */ + min-height: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */ + list-style-image: url("chrome://browser/skin/images/task-back-hdpi.png"); + background: transparent !important; + border: none !important; +} + +.panel-close:hover:active { + background-color: @color_background_highlight@ !important; +} + +.panel-close:hover:active:-moz-locale-dir(ltr) { + -moz-border-radius-bottomleft: @border_radius_small@; +} + +.panel-close:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/images/task-back-rtl-hdpi.png"); +} + +.panel-close:hover:active:-moz-locale-dir(rtl) { + -moz-border-radius-bottomright: @border_radius_small@; +} +%endif + +/* awesomescreen buttons --------------------------------------------------- */ +toolbarbutton.choice-all { + list-style-image: url(chrome://browser/skin/images/allpages-48.png); +} + +toolbarbutton.choice-bookmarks { + list-style-image: url(chrome://browser/skin/images/bookmarks-48.png); +} + +toolbarbutton.choice-history { + list-style-image: url(chrome://browser/skin/images/history-48.png); +} + +toolbarbutton.choice-remotetabs { + list-style-image: url(chrome://browser/skin/images/remotetabs-48.png); +} + +/* awesomescreen panels ---------------------------------------------------- */ +historylist > hbox.history-throbber-box, +remotetabslist > hbox.remotetabs-throbber-box { + display: none; +} + +.history-throbber-box > image, +.remotetabs-throbber-box > image { + list-style-image: url("chrome://browser/skin/images/throbber.png"); +} + +historylist[loading="true"] > hbox.history-throbber-box, +remotetabslist[loading="true"] > hbox.remotetabs-throbber-box { + background-color: white; /* force */ + display: -moz-box; +} + +historylist[loading="true"] > richlistbox.history-list-children, +remotetabslist[loading="true"] > richlistbox.remotetabs-list-children { + visibility: collapse; +} + +/* browsers ---------------------------------------------------------------- */ +.input-overlay:-moz-focusring { + outline: 0 !important; +} + +/* + * These rules prevent browser to steal the focus while touching the screen + * to allow panning/zooming of the browser view without closing the VKB + */ +#browsers > notificationbox { + -moz-user-focus: ignore; +} + +/* browser tools panel UI ------------------------------------------------ */ +.panel-header { + margin: 0; + padding: @padding_small@ @padding_normal@ @padding_normal@ @padding_normal@; + font-weight: bold; + color: @color_text_default@ !important; + background-image: url(images/row-header-bg.png); + background-repeat: repeat-x; + background-size: auto 100%; +} + +#tool-addons { + list-style-image: url("chrome://browser/skin/images/addons-default-hdpi.png"); +} + +#tool-downloads { + list-style-image: url("chrome://browser/skin/images/downloads-default-hdpi.png"); +} + +#tool-preferences { + list-style-image: url("chrome://browser/skin/images/preferences-default-hdpi.png"); +} + +#tool-console { + list-style-image: url("chrome://browser/skin/images/console-default-hdpi.png"); +} + +/* preferences panel UI -----------------------------------------------------*/ +#menulist-container[for="prefs-homepage-options"] .options-command.selected { + pointer-events: none; +} + +/* bug 597296 - The language.properties file is LTR and never translated */ +#prefs-languages .menulist-label { + direction: ltr !important; +} + +/* addons panel UI ------------------------------------------------------- */ +#addons-repo { + -moz-box-orient: horizontal; + -moz-box-align: center; +} + +@media (@orientation@: portrait) { + #addons-repo { + -moz-box-orient: vertical; + -moz-box-align: stretch; + } +} + +.addon-image, +.searchplugin-image { + list-style-image: url("chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png"); + width: 32px; + height: 32px; + -moz-margin-start: @margin_normal@; + -moz-margin-end: @margin_normal@; +} + +.addon-rating[rating] { + width: 78px; + height: 18px; + list-style-image: url("chrome://browser/skin/images/ratings-18.png"); +} + +.addon-rating[rating="0"] { + -moz-image-region: rect(0px 78px 18px 0px); +} + +.addon-rating[rating="1"] { + -moz-image-region: rect(18px 78px 36px 0px); +} + +.addon-rating[rating="2"] { + -moz-image-region: rect(36px 78px 54px 0px); +} + +.addon-rating[rating="3"] { + -moz-image-region: rect(54px 78px 72px 0px); +} + +.addon-rating[rating="4"] { + -moz-image-region: rect(72px 78px 90px 0px); +} + +.addon-rating[rating="5"] { + -moz-image-region: rect(90px 78px 108px 0px); +} + +.addon-showmore-image, +.addon-banner-image { + width: 32px; + height: 32px; + list-style-image: url("chrome://browser/skin/images/addons-32.png"); + -moz-margin-start: @margin_normal@; + -moz-margin-end: @margin_normal@; +} + +richlistitem[isDisabled="true"] .title, +richlistitem[isDisabled="true"] .normal { + color: @color_text_disabled@; +} + +richlistitem[isDisabled="true"] image { + opacity: 0.25; +} + +/* downloads panel UI ---------------------------------------------------- */ +.download-retry-failed { + color: red !important; + display: none; +} + +.download-retry-failed[state="2"] { + display: -moz-box; +} + +/* special "no downloads" items */ +#dl-empty-message { + margin-top: -moz-calc(2 * @touch_row@); /* 2 times row height */ + font-style: italic; + border-bottom: none; +} + +#dl-empty-message:active { + background-color: @color_background_default@; +} + +#dl-empty-message > label { + text-align: center; + color: @color_text_placeholder@; +} + +/* console panel UI ------------------------------------------------------ */ +#console-filter-warnings, +#console-filter-messages { + visibility: visible; +} + +@media (max-width: 499px) { + #console-filter-warnings, + #console-filter-messages { + visibility: collapse; + } +} + +.console-error-msg, +.console-msg-text { + white-space: pre-wrap; +} + +/* folders navigation row */ +.place-list-parents placelabel { + visibility: collapse; +} + +.place-list-parents placelabel:last-child:not(:only-child) { + visibility: visible; +} + +/* be consistent with the size of placeitem */ +placelabel { + -moz-box-align: center; + -moz-padding-end: @placelabel_padding@; + background-image: url(images/arrowup-16.png), url("images/row-header-bg.png"); + background-repeat: no-repeat, repeat-x; + background-position: 98% 50%, top left; + background-size: auto auto, auto 100%; + color: black; /* force */ + min-height: @touch_row@; /* row size */ +} + +placelabel:-moz-locale-dir(rtl) { + background-position: 2% 50%, top left; +} + +placelabel:hover:active { + background-image: url(images/arrowup-16.png); + background-color: @color_background_highlight@; + color: @color_text_highlight@; +} + +/* folder bookmarks row */ +placeitem[type="folder"] { + -moz-box-pack: center; + -moz-padding-end: @placeitem_padding@; + background-image: url(images/arrowright-16.png); + background-repeat: no-repeat; + background-position: 98% 50%; +} + +placeitem[type="folder"]:-moz-locale-dir(rtl) { + background-image: url(images/arrowleft-16.png); + background-position: 2% 50%; +} + +placelist[ui="manage"] placeitem[type="folder"] { + background-image: none; +} + +placeitem[type="folder"] > .bookmark-item-container > image, +placeitem[type="folder"] > .bookmark-manage > image { + list-style-image: url(images/folder-32.png); + margin-top: 0; +} + +placeitem[type="folder"] .bookmark-item-url { + display: none; +} + +/* bookmark manage controls */ +placeitem > .bookmark-manage .bookmark-controls { + padding-top: @padding_normal@; +} + +/* bookmark popup for star button */ +placeitem[ui="manage"] { + border-bottom: 0; +} + +placeitem[ui="manage"] > .bookmark-manage > image { + visibility: collapse; +} + +/* making the url textbox right-aligned for rtl locales */ +placeitem[ui="manage"] > .bookmark-manage textbox[anonid="uri"]:-moz-locale-dir(rtl) { + text-align: right; +} + +/* force the richlistboxes to have a white background */ +.autocomplete-items, +.place-list-children, +.history-list-children, +.remotetabs-list-children { + background-color: white; /* force */ +} + +autocompleteresult, +placeitem { + -moz-user-focus: ignore; + color: black; /* force */ + background-color: white; /* force */ + padding: @padding_xsmall@ @padding_small@; + border-bottom: @border_width_tiny@ solid rgb(207,207,207); + min-height: @touch_row@; /* row size */ +} + +#popup_autocomplete autocompleteresult:hover:active, +placelist placeitem:hover:active:not([selected="true"]), +historylist autocompleteresult:hover:active:not([selected="true"]):not([class="history-item-title"]), +remotetabslist autocompleteresult:hover:active:not([selected="true"]):not([class="remotetabs-item-title"]), +.autocompleteresult-selected { + background-color: @color_background_highlight@; + color: @color_text_highlight@; +} + +.autocomplete-item-container, +.bookmark-item-container { + margin: 0; + padding: 0; +} + +.autocomplete-item-label, +.bookmark-item-label { + font-size: @font_normal@ !important; + font-weight: normal; + -moz-margin-end: @margin_normal@; +} + +.autocomplete-item-container > image, +.bookmark-item-container > image, +placeitem > .bookmark-manage > image { + width: 32px; + height: 32px; + max-height: 32px; + image-rendering: -moz-crisp-edges; + /* margin-top = (1 - title's line-height) * title's font-size */ + margin-top: @autocomplete_item_container_image_padding@; + margin-bottom: 0; + -moz-margin-end: @margin_xxxnormal@; + -moz-margin-start: @margin_normal@; +} + +.autocomplete-item-container > image[src=""], +placeitem[src=""] .bookmark-item-container > image { + list-style-image: url("chrome://browser/skin/images/favicon-default-32.png"); +} + +.autocomplete-item-container > vbox > label, +.bookmark-item-container > vbox > label { + -moz-margin-start: @margin_xtiny@; +} + +.autocomplete-item-container[favorite="true"], +.autocomplete-item-container[remote="true"], +.autocomplete-item-container[search="true"] { + background-repeat: no-repeat; + background-position: 100% @autocomplete_item_container_position@; + background-size: @autocomplete_item_container_size@ @autocomplete_item_container_size@; +} + +.autocomplete-item-container[favorite="true"] { + background-image: url("chrome://browser/skin/images/autocomplete-bookmarked-hdpi.png"); +} + +.autocomplete-item-container[remote="true"] { + background-image: url("chrome://browser/skin/images/autocomplete-desktop-hdpi.png"); +} + +.autocomplete-item-container[search="true"] { + background-image: url("chrome://browser/skin/images/autocomplete-search-hdpi.png"); +} + +.autocomplete-item-container[favorite="true"][remote="true"] { + background-image: url("chrome://browser/skin/images/autocomplete-bookmarked-hdpi.png"), + url("chrome://browser/skin/images/autocomplete-desktop-hdpi.png"); + background-position: 100% @autocomplete_item_container_position@, + 94% @autocomplete_item_container_position@; + -moz-padding-end: @autocomplete_item_container_padding@; +} + +.autocomplete-item-container[favorite="true"]:-moz-locale-dir(rtl), +.autocomplete-item-container[remote="true"]:-moz-locale-dir(rtl) { + background-position: left @autocomplete_item_container_position@; +} + +.autocomplete-item-container[favorite="true"][remote="true"]:-moz-locale-dir(rtl) { + background-position: left @autocomplete_item_container_position@, + 6% @autocomplete_item_container_position@; +} + +.autocomplete-item-subtitle, +.bookmark-item-url { + color: blue; /* force */ + font-size: @font_small@ !important; + -moz-margin-end: @autocomplete_item_subtitle_margin@; +} + +.autocomplete-item-container[favorite="true"] .autocomplete-item-label, +.autocomplete-item-container[remote="true"] .autocomplete-item-label, +.autocomplete-item-container[search="true"] .autocomplete-item-label { + -moz-padding-end: @autocomplete_item_label_margin@; +} + +.autocomplete-item-container[search="true"] .autocomplete-item-subtitle { + color: black; /* force */ +} + +.autocomplete-item-tags, +.bookmark-item-tags { + content: attr(tags); + font-size: @font_small@ !important; + font-weight: lighter; + margin: @margin_tiny@ 0 @margin_small@ 0; + -moz-margin-start: @margin_normal@; + -moz-padding-end: @autocomplete_item_tags_margin@; +} + +.autocomplete-item-tags[value=""] { + visibility: hidden; +} + +.autocomplete-item-badge { + opacity: 1; + -moz-transition: opacity 1s ease; + background-color: #c90707; + border: @border_width_tiny@ solid #951919; + -moz-border-radius: @border_radius_tiny@; + content: attr(badge); + font-size: @font_xtiny@ !important; + font-weight: bolder; + margin: @margin_small@ 0 0 0; + padding: @padding_small@ @padding_snormal@; + color: white; +} + +autocompleteresult:not([badge]) .autocomplete-item-badge, +.autocomplete-item-badge[value=""] { + opacity: 0; + -moz-transition: none; +} + +/* special "no results", "awesome header row" and "title rows" items */ +autocompleteresult[class="history-item-title"], +autocompleteresult[class="remotetabs-item-title"] { + min-height: 0; + color: @color_text_default@; + font-size: smaller; + font-weight: bold; + background-color: transparent; + margin: 0; + padding: @autocompleteresult_padding@ @padding_xnormal@; + background-image: url(images/row-header-bg.png); + background-repeat: repeat-x; + background-size: auto 100%; +} + +autocompleteresult[class="history-item-title"] .autocomplete-item-label, +autocompleteresult[class="remotetabs-item-title"] .autocomplete-item-label { + font-size: @font_small@ !important; + font-weight: bold !important; +} + +autocompleteresult[class="history-item-title"] .autocomplete-item-subtitle, +autocompleteresult[class="history-item-title"] .autocomplete-item-tags, +autocompleteresult[class="history-item-title"] .autocomplete-item-badge, +autocompleteresult[class="remotetabs-item-title"] .autocomplete-item-subtitle, +autocompleteresult[class="remotetabs-item-title"] .autocomplete-item-tags, +autocompleteresult[class="remotetabs-item-title"] .autocomplete-item-badge { + margin: 0; + padding: 0; +} + +autocompleteresult[class="history-item-title"] .bookmark-item-subtitle, +autocompleteresult[class="history-item-title"] .autocomplete-item-tags, +autocompleteresult[class="history-item-title"] .autocomplete-item-badge, +autocompleteresult[class="remotetabs-item-title"] .bookmark-item-subtitle, +autocompleteresult[class="remotetabs-item-title"] .autocomplete-item-tags, +autocompleteresult[class="remotetabs-item-title"] .autocomplete-item-badge { + display: none; +} + +autocompleteresult[class="history-item-title"] .bookmark-item-container, +autocompleteresult[class="remotetabs-item-title"] .bookmark-item-container { + font-size: @font_normal@ !important; +} + +autocompleteresult[class="history-item-title"] image, +autocompleteresult[class="remotetabs-item-title"] image { + display: none; +} + +autocompleteresult.noresults { + font-style: italic; + border-bottom: none; +} + +autocompleteresult.noresults:hover:active { + background-color: white !important; /* force */ +} + +autocompleteresult.noresults > .autocomplete-item-container { + text-align: center; + color: @color_text_placeholder@; +} + +/* Left sidebar (tabs) ---------------------------------------------------- */ +#tabs-container { + -moz-border-end: @border_width_large@ solid #262629; + background: @color_background_default@; +} + +#tabs:-moz-locale-dir(rtl) { + -moz-box-align: start; +} + +#tabs > scrollbox { + max-width: 350px; +} + +#tabs .tabs-list { + display: block; + -moz-column-width: 121px; + -moz-column-gap: 0; + -moz-user-focus: ignore; + padding: 0; + background-color: transparent; + margin: 0; + -moz-padding-end: @padding_normal@; /* core spacing */ + -moz-padding-start: @padding_small@; /* allow the thumbnails to get close to the edge */ +} + +#tabs-controls { + margin-top: @margin_normal@; /* core spacing */ + -moz-box-pack: center; +} + +documenttab { + -moz-margin-start: @margin_xnormal@; + width: 121px; + background-clip: padding-box; + border: @border_width_tiny@ solid rgba(0,0,0,0.1); + border-bottom-width: @border_width_small@; + line-height: 0; +} + +documenttab[selected="true"] .documenttab-container { + border-bottom-color: rgba(0,0,0,0.2); + background: url("chrome://browser/skin/images/tab-active-hdpi.png") bottom repeat-x; +} + +.documenttab-container { + padding: @padding_normal@; + padding-button: @documenttab_margin_bottom@; + background: url("chrome://browser/skin/images/tab-inactive-hdpi.png") bottom repeat-x; + background-size: 100% 100%; +} + +.documenttab-label { + min-height: 1.5em; + font-size: @font_xsmall@; +} + +.documenttab-thumbnail { + background-color: white; + opacity: 0.5; + + /* if there is no border, blank thumbnail are invisible */ + border: 1px solid white; + margin: -1px; +} + +documenttab:hover:active > stack > .documenttab-thumbnail, +documenttab[selected="true"] > stack > .documenttab-thumbnail { + opacity: 1.0; +} + +.documenttab-close-container { + position: relative; + left: -16px; + -moz-margin-end: 49px; +} + +.documenttab-close { + width: 40px; + height: 40px; + list-style-image: url("chrome://browser/skin/images/close-inactive-tab-hdpi.png"); +} + +documenttab[selected="true"] > stack > hbox > .documenttab-close { + list-style-image: url("chrome://browser/skin/images/close-default-hdpi.png"); +} + +.documenttab-close-container:hover:active > .documenttab-close { + list-style-image: url("chrome://browser/skin/images/close-active-hdpi.png"); +} + +documenttab:only-child > stack > hbox > .documenttab-close { + display: none; +} + +documenttab[reload="true"] { + background: url("chrome://browser/skin/images/tab-closed-hdpi.png") bottom repeat-x; +} + +.documenttab-reload { + background: url("chrome://browser/skin/images/tab-reopen-hdpi.png"); + display: none; +} + +documenttab[reload="true"] > stack > .documenttab-close-container { + display: none; +} + +documenttab[reload="true"] > stack > .documenttab-reload { + display: -moz-box; +} + +#newtab-button { + -moz-box-flex: 1; + list-style-image: url("images/newtab-default-hdpi.png"); + height: @sidebar_button_height@; +} + +/* bookmark editor ------------------------------------------------------- */ +#bookmark-form .bookmark-controls { + display: none; +} + +#bookmark-popup-title { + background-color: @color_background_default@; +} + +/* Identity popup -------------------------------------------------------- */ +#identity-popup-container { + background-color: @color_background_panel@; + padding: @padding_normal@; /* core spacing */ + padding-bottom: @padding_xxxnormal@; + color: @color_text_panel@; +} + +/* Popup Icons */ +#identity-popup-icon { + padding: 0; + padding-top: @padding_snormal@; /* align to top of text */ + list-style-image: url("chrome://browser/skin/images/identity-default-hdpi.png"); +} + +#identity-container[mode="verifiedIdentity"] > hbox > #identity-popup-icon { + list-style-image: url("chrome://browser/skin/images/identity-ev-hdpi.png"); +} + +#identity-container[mode="verifiedDomain"] > hbox > #identity-popup-icon { + list-style-image: url("chrome://browser/skin/images/identity-ssl-hdpi.png"); +} + +/* Popup Body Text */ +#identity-popup-content-box { + -moz-padding-start: @padding_normal@; /* core spacing */ + font-size: @font_small@ !important; + white-space: pre-wrap; +} + +/* let the text flow into a second row, if needed */ +#identity-popup-runBy-box { + display: block; +} + +#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-popup-encryption-label, +#identity-popup-content-verifier { + font-size: @font_tiny@ !important; +} + +#identity-popup-content-host, +#identity-popup-content-owner { + font-weight: bold; +} + +#identity-popup-encryption-icon { + padding-top: @padding_snormal@; /* align to top of text */ + list-style-image: url("chrome://browser/skin/images/unlocked-hdpi.png"); +} + +#identity-container[mode="verifiedIdentity"] > hbox > vbox > #identity-popup-encryption-icon , +#identity-container[mode="verifiedDomain"] > hbox > vbox > #identity-popup-encryption-icon { + list-style-image: url("chrome://browser/skin/images/locked-hdpi.png"); +} + +/* Page Actions, Prompt, and Context Menu popups --------------------------- */ +.action-buttons, +#context-commands, +#pageactions-container { + background: transparent; + border-top: @border_width_tiny@ solid rgb(205,205,205); + padding: 0; + -moz-user-focus: ignore; +} + +.action-buttons, +#pageactions-container { + display: inline-block; +} + +#context-commands { + display: -moz-box; +} + +.action-button, +.context-command, +pageaction { + -moz-border-top-colors: white; + -moz-border-right-colors: rgb(175,175,175); + -moz-border-bottom-colors: rgb(175,175,175); + -moz-border-left-colors: white; + border-style: solid; + border-width: @border_width_tiny@ !important; + height: @touch_button_xlarge@; + min-height: @touch_button_xlarge@; + width: 100%; + min-width: @touch_action_minwidth@; /* keep the button from being too narrow */ +} + +/* Override richlistbox and richlistitem styles */ +#context-commands > scrollbox { + width: 100%; +} + +.action-button, +.context-command { + -moz-box-align: center; +} + +.action-button[disabled="true"], +.context-command[disabled="true"] { + pointer-events: none; + color: @color_text_disabled@ !important; +} + +.action-button[selected="true"], +.context-command[selected="true"] { + color: black; /* force */ + background: transparent; +} + +/* Override button styles */ +.action-button { + margin: 0; + -moz-border-image: none !important; + margin: 0; + background: transparent; +} + +.action-button > .button-box { + padding: 0 @padding_small@ @padding_tiny@ @padding_xsmall@ !important; +} + +.action-button > .button-box > .button-icon { + -moz-margin-end: @margin_normal@; +} + +@media (min-width: 500px) { + .action-button, + pageaction { + width: 50%; + } + + .action-button:last-child:nth-child(odd), + pageaction.odd-last-child { + width: 100%; + } +} + +.action-button:not([disabled]):hover:active, +.context-command:not([disabled]):hover:active, +pageaction:not([disabled]):hover:active { + color: @color_text_highlight@; + background-color: @color_background_highlight@; + background-image: none !important; + background-origin: border-box !important; + background-clip: border-box !important; + -moz-border-top-colors: transparent; + -moz-border-left-colors: transparent; +} + +pageaction > hbox > .pageaction-image { + width: 32px; + height: 32px; + -moz-margin-end: @margin_normal@; +} + +pageaction:not([image]) > hbox >.pageaction-image { + width: 0; +} + +.action-button, +.context-command, +.pageaction-title { + font-size: @font_normal@ !important; + color: black; /* force */ +} + +.pageaction-desc { + font-size: @font_tiny@ !important; + color: @color_subtext_inverse@; +} + +.pageaction-desc[value=""] { + display: none; +} + +#context-header { + background-color: @color_background_default@; +} + +#share-title, +#bookmark-popup-title, +#context-hint { + color: @color_text_default@; + font-size: @font_small@; + padding: @padding_small@; +} + +#context-hint[value=""] { + visibility: collapse; +} + +#search-engines-list > .action-button > .button-box > .button-text { + text-align: start; + -moz-box-flex: 1; /* Needed for the crop attribute to have an effect */ +} + +#search-engines-list > .action-button > .button-box > .button-icon { + width: 32px; + height: 32px; +} + +#search-engines-list > .action-button[image=""] > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/images/favicon-default-32.png"); +} + +/* Preferences window ---------------------------------------------------- */ +.settings-title { + min-height: 0; + color: @color_text_header@; + background-color: @color_background_header@; + font-size: smaller; + font-weight: bold; + margin: 0; + padding: @autocompleteresult_padding@ @padding_xnormal@; + border-bottom: @border_width_tiny@ solid @color_divider_border@; +} + +.setting { + padding-left: @padding_xnormal@; + border-bottom: @border_width_tiny@ solid #cacdd5; +} + +setting { + padding: @padding_xsmall@; + border-bottom: @border_width_tiny@ solid @color_divider_border@; + min-height: @touch_row@; /* row size */ + -moz-box-align: center; + -moz-box-orient: horizontal; +} + +.setting-label { + -moz-box-flex: 1; +} + +.setting-group > setting { + border-bottom: none; +} + +.setting-subgroup > setting { + border-bottom: none; + -moz-margin-start: @margin_xxxnormal@; +} + +.setting-subgroup + :not(.setting-subgroup) > setting { + border-top: @border_width_tiny@ solid rgb(207,207,207); +} + +/* Put setting textboxes on a separate row in portrait */ +@media (@orientation@: portrait) { + setting[type="integer"], + setting[type="string"] { + -moz-box-align: start; + -moz-box-orient: vertical; + } + + setting[type="integer"] > .setting-input > textbox, + setting[type="string"] > .setting-input > textbox { + width: 499px; /* textboxes seem to need a width in order to flex */ + -moz-box-flex: 1; + } +} + +.options-box { + -moz-margin-start: 28px; /* sized based on the 32px addon image */ +} + +.options-box > setting:last-child { + border-bottom: 0; +} + +/* XXX should be a richlistitem description.title */ +.preferences-title { + font-size: @font_normal@ !important; +} + +/* XXX should be a richlistitem description.normal */ +.preferences-description { + font-size: @font_small@ !important; + color: @color_subtext_default@; +} + +/* alerts popup ----------------------------------------------------------- */ +#alerts-container { + color: @color_text_default@; + background-color: #5e6166; + border: @border_width_small@ solid #767973; + border-radius: @border_radius_normal@; + box-shadow: black 0 @border_radius_tiny@ @border_radius_tiny@; + padding: @padding_normal@; /* core spacing on top/bottom */ + margin-bottom: @margin_large@; + -moz-transition-property: opacity; + -moz-transition-duration: 0.5s; + opacity: 0; +} + +#alerts-container.showing { + opacity: 1; +} + +#alerts-title { + font-size: @font_small@ !important; +} + +#alerts-text { + font-size: @font_xsmall@ !important; + white-space: pre; +} + +%ifndef ANDROID +#alerts-container { + -moz-margin-end: @margin_large@; +} +%endif + +/* helperapp (save-as) popup ----------------------------------------------- */ +#helperapp-target { + font-size: @font_small@ !important; +} + +/* full-screen video ------------------------------------------------------- */ +.full-screen { + position: absolute; + z-index: 500; +} + +/* openwebapps capabilities ------------------------------------------------------------ */ +.webapps-noperm description.webapps-perm-requested-hint { + display: block; +} + +.webapps-perm description.webapps-perm-requested-hint { + display: none; +} + +#webapps-icon { + width: 32px; + height: 32px; + margin: @margin_normal@; +} + +#webapps-title { + -moz-margin-end: @margin_normal@; +} + +/* Android menu ------------------------------------------------------------ */ +#appmenu { + background: @color_background_default@; + border-style: solid; + border-color: #6d6d6d; + border-width: @border_width_small@ @border_width_small@ 0 @border_width_small@; +} + +#appmenu > .appmenu-button { + -moz-box-flex: 1; + -moz-box-orient: vertical; + color: @color_text_default@; + border-style: solid; + border-color: @color_divider_border@ !important; + border-width: 0 @border_width_tiny@ @border_width_tiny@ 0; + height: @appmenu_button_height@; + width: 0; + display: none; +} + +#appmenu > .appmenu-button[show] { + display: inline-block; +} + +#appmenu > .appmenu-button:hover:active { + background-image: url("chrome://browser/skin/images/appmenu-active-hdpi.png"); + background-size: 100% 100%; +} + +#appmenu > .appmenu-button .toolbarbutton-text { + display: block !important; + font-size: @font_snormal@ !important; +} + +#appmenu > .appmenu-button .toolbarbutton-icon { + margin-top: @margin_normal@ !important; + margin-bottom: @margin_small@ !important; +} + +.appmenu-site-button { + list-style-image: url("chrome://browser/skin/images/appmenu-site-hdpi.png"); +} + +.appmenu-addons-button { + list-style-image: url("chrome://browser/skin/images/appmenu-addons-hdpi.png"); +} + +.appmenu-preferences-button { + list-style-image: url("chrome://browser/skin/images/appmenu-preferences-hdpi.png"); +} + +.appmenu-downloads-button { + list-style-image: url("chrome://browser/skin/images/appmenu-downloads-hdpi.png"); +} + +.appmenu-findinpage-button { + list-style-image: url("chrome://browser/skin/images/appmenu-findinpage-hdpi.png"); +} + +.appmenu-saveas-button { + list-style-image: url("chrome://browser/skin/images/appmenu-downloads-hdpi.png"); +} + +.appmenu-share-button { + list-style-image: url("chrome://browser/skin/images/appmenu-share-hdpi.png"); +} + +#appmenu-more-button { + list-style-image: url("chrome://browser/skin/images/appmenu-more-hdpi.png"); + display: none; +} + +@media (@orientation@: portrait) { + #appmenu:not([hidden])[count="4"], + #appmenu:not([hidden])[count="5"], + #appmenu:not([hidden])[count="6"] { + height: @appmenu_portrait_height@; + display: inline-block; + } + + #appmenu[count="4"] > .appmenu-button, + #appmenu[count="5"] > .appmenu-button { + width: 50%; + } + + #appmenu[count="5"] > .appmenu-button[show="2"], + #appmenu[count="5"] > .appmenu-button[show="3"], + #appmenu[count="5"] > .appmenu-button[show="4"], + #appmenu[count="6"] > .appmenu-button { + width: 33.33%; + } +} + +#appmenu-overflow { + background: @color_background_default@; + border-style: solid; + border-color: @color_dialog_border@; + border-width: @border_width_small@ @border_width_small@ 0 @border_width_small@; + margin: @margin_xxxnormal@ @margin_xxxnormal@ 0 @margin_xxxnormal@; +} + +#appmenu-overflow-commands > .appmenu-button { + color: @color_text_default@; + background: transparent; + font-size: @font_normal@ !important; + height: @touch_button_xlarge@; + min-height: @touch_button_xlarge@; + width: 100%; + -moz-box-align: center; +} + +#appmenu-overflow-commands > .appmenu-button:hover:active { + background-image: url("chrome://browser/skin/images/appmenu-active-hdpi.png"); + background-size: 100% 100%; +} + +/* Sync setup ------------------------------------------------------------- */ +.syncsetup-center { + /* TODO: remove this dummy when we no longer use it in other themes */ +} + +.syncsetup-code { + color: @color_text_inverse@; + background-color: @color_background_inverse@; + font-size: @font_xlarge@ !important; + padding: 0.2em 0.4em; + -moz-padding-end: 0.2em; + letter-spacing: 0.2em; + text-align: center; + min-width: 5.5em; +} + +.syncsetup-label { + color: @color_text_default@; +} + +#syncsetup-customserver { + -moz-margin-start: @margin_xnormal@; +} + +#sync-message { + padding-bottom: 2em; +} + +/* content scrollbars */ +.scroller { + opacity: 0; + background-color: @color_background_scroller@ !important; + -moz-border-top-colors: none !important; + -moz-border-bottom-colors: none !important; + -moz-border-right-colors: none !important; + -moz-border-left-colors: none !important; + border: @border_width_tiny@ solid rgba(0, 0, 0, 0.4) !important; +} + +.scroller[panning="true"] { + opacity: 1; +} + +.scroller[orient="vertical"] { + min-width: @scroller_thickness@; + width: @scroller_thickness@; + min-height: @scroller_minimum@; +} + +.scroller[orient="horizontal"] { + min-height: @scroller_thickness@; + height: @scroller_thickness@; + min-width: @scroller_minimum@; +} + +/* Sidebar peeking */ +:-moz-any(.sidebar, #browsers)[mode="discovery"] { + -moz-animation-delay: 1s; + -moz-animation-duration: 5s; + -moz-animation-name: sidebardiscovery; +} + +:-moz-any(.sidebar, #browsers)[mode="discovery"]:-moz-locale-dir(rtl) { + -moz-animation-name: sidebardiscoveryrtl; +} + +@-moz-keyframes sidebardiscovery { + from { -moz-transform: translateX(0); } + 10% { -moz-transform: translateX(-moz-calc(121px + @border_width_large@ + 2*@padding_normal@)); } + 45% { -moz-transform: translateX(-moz-calc(121px + @border_width_large@ + 2*@padding_normal@)); } + 55% { -moz-transform: translateX(-@sidebar_width_minimum@); } + 90% { -moz-transform: translateX(-@sidebar_width_minimum@); } + to { -moz-transform: translateX(0); } +} + +@-moz-keyframes sidebardiscoveryrtl { + from { -moz-transform: translateX(0); } + 10% { -moz-transform: translateX(-moz-calc(-121px - @border_width_large@ - 2*@padding_normal@)); } + 45% { -moz-transform: translateX(-moz-calc(-121px - @border_width_large@ - 2*@padding_normal@)); } + 55% { -moz-transform: translateX(@sidebar_width_minimum@); } + 90% { -moz-transform: translateX(@sidebar_width_minimum@); } + to { -moz-transform: translateX(0); } +} + +/* Tablet mode */ + +.button-actionbar { + visibility: collapse; +} + +.button-actionbar[disabled="true"] { + opacity: 0.5; +} + +.button-actionbar:hover:active { + background-color: #8db8d8; +} + +#toolbar-main[tablet="true"] > .button-actionbar { + visibility: visible; +} +#toolbar-main[tablet="true"][mode="edit"] > .button-actionbar { + visibility: collapse; +} + +#controls-scrollbox[tablet="true"] > #controls-sidebar { + visibility: collapse; +} + +#controls-scrollbox[tablet="true"] > #tabs-sidebar { + border: none; + position: fixed; + top: @touch_button_xlarge@; + visibility: collapse; +} +#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(ltr) { + left: 0; +} +#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(rtl) { + left: 0; +} +#controls-scrollbox[tablet="true"] > #tabs-sidebar[open] { + visibility: visible; +} + +/* Text selection handles */ + +#selectionhandle-start, +#selectionhandle-end { + min-width: 35px !important; + width: 35px !important; + padding: 0 !important; + margin: 0 !important; +} + +#selectionhandle-start { + list-style-image: url("chrome://browser/skin/images/handle-start.png"); +} + +#selectionhandle-end { + list-style-image: url("chrome://browser/skin/images/handle-end.png"); +} + +@media (min-width: @tablet_panel_minwidth@) { + #toolbar-main { + -moz-padding-start: 15px; + } +} diff --git a/mobile/themes/core/honeycomb/defines.inc b/mobile/themes/core/honeycomb/defines.inc new file mode 100644 --- /dev/null +++ b/mobile/themes/core/honeycomb/defines.inc @@ -0,0 +1,220 @@ +%filter substitution + +%define color_background_active #aaa +%define color_background_default rgba(255,255,255,0.95) +%define color_text_default #222222 +%define color_divider_border #333333 +%define color_button_border #5a5a5a +%define color_dialog_border #5a5a5a +%define color_background_dlgbuttons #9a9a9a +%define color_background_panel #d6d6d6 +%define color_text_panel #000 +%define color_background_header #292929 +%define color_text_header #999999 +%define color_background_scroller #9a9a9a +%define color_background_inverse #fff +%define color_text_inverse #000 +%define color_text_button #000 +%define color_text_disabled #808080 +%define color_text_placeholder #808080 +%define color_text_as_link #febc2b + +%define color_background_highlight #febc2b +%define color_background_highlight_overlay rgba(254, 188, 43, 0.8) +%define color_text_highlight #000 + +%define color_subtext_default #aaaaaa +%define color_subtext_inverse #414141 + +%ifdef ANDROID +%define font_xlarge 6.08mozmm +%define font_xnormal 3.75mozmm +%define font_normal 3.54mozmm +%define font_snormal 3.33mozmm +%define font_small 2.91mozmm +%define font_xsmall 2.69mozmm +%define font_tiny 2.48mozmm +%define font_xtiny 2.27mozmm + +%define touch_row 10.41mozmm +%define touch_button_xlarge 10.62mozmm +%define touch_button_large 9.77mozmm +%define touch_button_small 8.93mozmm +%define touch_button_minwidth 11.86mozmm +%define touch_action_minwidth 21.17mozmm +%define touch_normal 6.77mozmm + +%define margin_context_popup 3.39mozmm +%define margin_large 2.54mozmm +%define margin_xxxnormal 1.69mozmm +%define margin_xnormal 1.06mozmm +%define margin_normal 0.85mozmm +%define margin_snormal 0.64mozmm +%define margin_small 0.42mozmm +%define margin_tiny 0.21mozmm +%define margin_xtiny 0.11mozmm + +%define padding_xlarge 3.39mozmm +%define padding_large 2.54mozmm +%define padding_xxxnormal 1.69mozmm +%define padding_xxnormal 1.27mozmm +%define padding_xnormal 1.06mozmm +%define padding_normal 0.85mozmm +%define padding_snormal 0.64mozmm +%define padding_small 0.42mozmm +%define padding_xsmall 0.21mozmm +%define padding_tiny 0.11mozmm + +%define border_width_xxlarge 0.64mozmm +%define border_width_xlarge 0.42mozmm +%define border_width_large 0.32mozmm +%define border_width_small 0.21mozmm +%define border_width_tiny 0.11mozmm + +%define border_radius_normal 0.85mozmm +%define border_radius_small 0.64mozmm +%define border_radius_tiny 0.21mozmm + +%define shadow_width_xlarge 1.06mozmm +%define shadow_width_large 0.64mozmm +%define shadow_width_small 0.21mozmm + +%define textbox_height 5.08mozmm + +%define dropmarker_padding 0.53mozmm + +%define progressmeter_height 3.39mozmm + +%define urlbar_edit_height 6.15mozmm +%define urlbar_edit_indent 0.85mozmm +%define urlbar_max_width 96mozmm + +%define scroller_thickness 0.64mozmm +%define scroller_minimum 1.27mozmm + +%define sidebar_width_minimum 121px +%define sidebar_button_height 7.41mozmm +%define documenttab_margin_bottom 0.85mozmm + +%define placelabel_padding 8.47mozmm +%define placeitem_padding 4.23mozmm + +%define autocomplete_item_container_image_padding 0.53mozmm +%define autocomplete_item_container_position 0.21mozmm +%define autocomplete_item_container_size 2.75mozmm +%define autocomplete_item_container_padding 5.08mozmm + +%define autocomplete_item_subtitle_margin 2.75mozmm +%define autocomplete_item_label_margin 3.18mozmm +%define autocomplete_item_tags_margin 3.39mozmm + +%define autocompleteresult_padding 0.53mozmm + +%define dialog_width 76.2mozmm + +%define appmenu_portrait_height 21.17mozmm +%define appmenu_button_height 10.48mozmm + +%define tablet_panel_controls 40mozmm +%define tablet_panel_minwidth 124mozmm +%else +%define font_xlarge 48px +%define font_xnormal 26px +%define font_normal 24px +%define font_snormal 22px +%define font_small 18px +%define font_xsmall 16px +%define font_tiny 14px +%define font_xtiny 12px +%define font_xxtiny 8px + +%define touch_row 70px +%define touch_button_xlarge 72px +%define touch_button_large 64px +%define touch_button_small 56px +%define touch_button_minwidth 112px +%define touch_action_minwidth 200px +%define touch_normal 64px + +%define margin_context_popup 32px +%define margin_large 24px +%define margin_xxxnormal 16px +%define margin_xnormal 10px +%define margin_normal 8px +%define margin_snormal 6px +%define margin_small 4px +%define margin_tiny 2px +%define margin_xtiny 1px + +%define padding_xlarge 32px +%define padding_large 24px +%define padding_xxxnormal 16px +%define padding_xxnormal 12px +%define padding_xnormal 10px +%define padding_normal 8px +%define padding_snormal 6px +%define padding_small 4px +%define padding_xsmall 2px +%define padding_tiny 1px + +%define border_width_xxlarge 6px +%define border_width_xlarge 4px +%define border_width_large 3px +%define border_width_small 2px +%define border_width_tiny 1px + +%define border_radius_normal 8px +%define border_radius_small 6px +%define border_radius_tiny 2px + +%define shadow_width_xlarge 10px +%define shadow_width_large 6px +%define shadow_width_small 2px + +%define textbox_height 48px + +%define dropmarker_margin 5px + +%define progressmeter_height 32px + +%define urlbar_edit_height 34px +%define urlbar_edit_indent 8px +%define urlbar_max_width 596px + +%define scroller_thickness 6px +%define scroller_minimum 12px + +%define sidebar_width_minimum 122px +%define sidebar_button_height 70px +%define documenttab_margin_bottom 8px + +%define placelabel_padding 80px +%define placeitem_padding 40px + +%define autocomplete_item_container_image_padding 5px +%define autocomplete_item_container_position 2px +%define autocomplete_item_container_size 26px +%define autocomplete_item_container_padding 48px + +%define autocomplete_item_subtitle_margin 26px +%define autocomplete_item_label_margin 30px +%define autocomplete_item_tags_margin 32px + +%define autocompleteresult_padding 5px + +%define dialog_width 500px + +%define appmenu_portrait_height 200px +%define appmenu_button_height 99px + +%define tablet_panel_controls 270px +%define tablet_panel_minwidth 801px +%endif + +%ifdef MOZ_PLATFORM_MAEMO +%define orientation -moz-device-orientation +%elifdef ANDROID +%define orientation -moz-device-orientation +%else +%define orientation orientation +%endif diff --git a/mobile/themes/core/honeycomb/images/actionbar_more.png b/mobile/themes/core/honeycomb/images/actionbar_more.png new file mode 100644 index 0000000000000000000000000000000000000000..45939f6522bf24a047c6db192387a1aa8600cd9c GIT binary patch literal 419 zc%17D@N?(olHy`uVBq!ia0vp^K0s{7!3HFA_3C?olw^r(L`iUdT1k0gQ7VIDN`6wR zf@f}GdTLN=VoGJ<$y6H#21Zv;7srr_TW@aIavgFIXiHR9y5%CEz4dgYP4k503IYFw zx!x5`GD>r!mR>y6;X9|5gG-F-_u)0~4cljSUTeD~coZQpU0v<=fPt!%E2-*rFOCm}6$Y2>uGx%YRhS~Yd?RPVN% ztBxF=`R~rhX*Nf;slJ}R_NCUB#Z}%yzgp~EUkC%qh5j#s!KCo7gHH8#{-%c|F6Pv6 zkzCXI#pRby?Uq)t8mk4p4zMkmdKI;Vst E07$;G%m4rY diff --git a/mobile/themes/core/honeycomb/images/bookmarks-48.png b/mobile/themes/core/honeycomb/images/bookmarks-48.png index 2660b4755f6b6ca4da591af9bfa8f79d41803d6c..550122357b7e9c847bbdd449f3cddb1623d04597 GIT binary patch literal 1799 zc$@(T2l)7jP)Px*!AV3xRA}DqnD0+p=M~4l_qmsA2w-d%60l8-os@-jzAPBlY+0SUvbwa5G^NX4 zO_Ta6q5UiNIxjY9>Xvj`HBFPI{ZKa2Ws%koDZt_e3 zI9+Z+DRqsHpM4zwh6UlzyhQN#Q1 zjGuEq{Cw0gGGrI*2i1rIQQP|)_Rjb@w;E9(YI|SpD3GV&eKn&%o`(0;jKZ!OnPco2 zF`CRr>b2U7cELXK_PMifJZX=~WYS*w=hb|l(cCba%#6`wUXRB_s@f>w7&}G)d;>rS zfUTZmUOV{%i&m>O{P@g|P7MrLOxt?o!?U~;+b>QfCzH9l(Pv834&FPP$3yXeQuh;3*woEol z|9jU%fBuVK{!ww}_Pzn9%gwa#Jd;c&?NpZAtyb$nsZ?Thx-Jl+$~f~S%jR;3M56Hd zeE#3Q|NiX0_VzzpthQ1(6r@iCuvl#bfPv#UjelurC=dwb?82~7l1i+us|yT6)E6&C z;qiFHci;Wh9LsSFgpg$bg>Wd?*bczP^LCEoq*OB59|#1}f*=?rNm3xxxklu2c|=4J z9*+A07_0KjtG>L!FRY?LI4?fM$i zX+yl%`z7%U0Ac{jkMjOw8(BCMlr2_US*gpL5W!$DZ5IS%Q7W+pgC0~V;yYcdg*7~g zMBw#$#fuj%ZWSK|AWctRlXujKzX~D{2&C_q&whq>v=YjprA06qXdUZeSNad9zEDaCGA zJRU1hpu}<9znc}`)HM1qM6FgUfAfVGT4hSH+hsd+s1uYH0Qj2~-}E@GKxE`bgZB6L zYh;;Xx65cWbvFUEcT&h( z7>41kwnO^IrA9WFgYW)*EQdmW9{>Pi(P-wz^^g4bymJ}CvT)B@rS3+ z430QP2kNPG3(JyrZI@0f71z6!J?i``VX@j;8}+)&{p!h=)(WfT%M+L8uKZ)dpH8Qu zJkQS(LY4pom5%KPAOc7N$O0$=Xs|4sWC&UJ-Scv@pUp&go|k)i_G=R>@nkF(3mtlX z&>s#3Rf_;m2+3XfVB&5tuvBFT$?_V_Jb*laIDiMr?<#=GMpJUS-0MoCiUKebLd?8I zlP*^(2QL5pQtkRj{|W*qv~XNZsf-P^00^(q+zp48dw7i|s|ZafH>Qo0DR1qjN(Wzc zy4*!28Y=+$6_8Y=T73?bCRmOus|`>AkYYLRGXQl(bX*Z$nx4GYc+x21bh%fR$#yd$ z48t4%!xR9l15kC8C;P000>X1^@s6#OZ}&00001b5ch_0Itp) z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iph` z7cU1vRYEBM00ZGkL_t(Y$F-GDNF!Gq$G>hft7hATlu_H%u4Sf8Y(}U}3fVvl6};%Q z6c(2f*6)E>l3vmg{HR4*1G7je$pf`?Kj;2x|kOG3ozB}tp5&!t?L^&i zeZBl<8M853%0766d3o>m`Muwt?`z_m<9Uw@&&g(sbHR1agDwDqp)9G|@e0=V$r|8zWy!%NRsrsBuV!*P0JIY0>G>5`ju2FH692AasY0TgC`-3 zF&6+4KpOzh=;-LDnM~%B-QC^G&V9LD4gfGSGqcmv)AM68nY@`!r-SqJ^EWKZas$XU z%1Ju_f1yygoJb@lx3{<7Zj>m~G{sylcP$=|_nD?CHcF^{3lTt@uIpE(rl!6ok01y_ zH53Xh$6~SDgM))5MNulcu6JiLnaIk@%15SYij4qHNGm1IlS-w=Z9qpy$FFm9b2k)4 z`4fOi)pV?B+QVoxdOwj!M9%^^AzlF9;o;#CJN{i=UB4_XEqzW&eMkv@2|%Y|7|O)N z#Fw?XI;$C50C?8c)>J!0v$L~b0Vo65lx2B~%GP5ThB7ubmO3xMzDWxJ_w@91)DBZ9 z6k4Vb{VmJ#F7?q7W2~a8YC%=ij}60ky;v;z0l+Tpa=F}5E|=RxQQV?FI)CFfF_6B*lPy_vh2lU0LN~(+pGh5;j}mt@Q6P58Dk9-e+b|(7!2OA7qi*y`v5Lc zHU00=MDNKP0Hp5j?jJ16atne`U07K7Oi`2)RoC7r8rMppayf+Z)Dk`bPzi^_1^`%= zmSr= zS2!Ft`uqET)->%m05A;WwZ+B7$nx@X+?Exe&v$Qib@e)cyY^#Mn-j>g491urfd9YB zh9C&lp`oE~CMPGq1@M=npXx&F_oRc~lWR_I>lqJ+!$vZhys0S4Jpc~~^5j%VjqJY& z;APUQu530N+}PN7697a}-0JP^y`yPbkpy&)Dr?8lJI_MuIZE>1Lh~X?5XjIWRpkLe n_Rs2*^9X4(ft--X=Q;c@KAzT>-v?)A00000NkvXXu0mjfxVrvE diff --git a/mobile/themes/core/honeycomb/images/tabs-hdpi.png b/mobile/themes/core/honeycomb/images/tabs-hdpi.png new file mode 100644 index 0000000000000000000000000000000000000000..1d06449729d457b5dfa7a940ec6637b9beee58a8 GIT binary patch literal 802 zc$@(u1Ks?IP)&m7^z48jf(#hBOu`CJ-PI!I+R5SANCd%=%uk zHX0UvEQ`z}leY{T_U(u7%$t3%F`Z6rWWTpfLO^f`4#6Qf1c%@d9D+k|$OsO>Avgqw z;8@SL1bxOnxMNAMhu|vsxfS8uV7|8`I0)toJ3hA(94A6ar_+xznas1vWOCVTGG4Fu zxKJoOfx|1J;r#12jj7};m&?&*fI(}uT1WYO{x%$56_g48S3xe7N_Sw`2H&w-&H2S# zF4tMHSbVx@AmMO0r>ZJ01h#6mdLM=tEX`HR!eKT5|F}Rl2X42!TC3F_;)`~>eV3)U z!_vyp1M>U*!U5Im^<5Zt1A)K^htu!(J(Wu3AQTGW^)7*bU)P#5LXSiu@Abi4E*BH6 zo|S_GY8+$ZmrN$BcDwx>k2e~P04vDb>%LlHS3Hnq`HTme%_grq&UJ@_1%Ie0%3B`j z^?HX4jDwT|fa3A^u|5c$`U8>bSxGohcd#grq3*oX$FWlvsh(BtkTvyS)5!zfZdVc6 zDX%gdt?u}IzEd9PbUKHm9G!Ba(P)_m@ZmR`%?25q9W&ub;4-+Pb7_fnM^jEJm3pm@ z!*kscQ_rmnbCu_v@75e(+_s+^T22e82OGkXBuQ<2gka6!Js7SrznF%6Q>-r%j<%@< zOXqXePgp6nh8~aSl*7UO9Z=QFKkODfX7|z;nO0iwU@*_CtUH02&b4P0_Pip#T5?07*qoM6N<$f<;Deod5s; diff --git a/mobile/themes/core/honeycomb/images/urlbar-border-left.png b/mobile/themes/core/honeycomb/images/urlbar-border-left.png new file mode 100644 index 0000000000000000000000000000000000000000..068e02b04edc39b8237271524cd66e4b7e8a6a8f GIT binary patch literal 188 zc%17D@N?(olHy`uVBq!ia0vp^%s|Y^!3HG1Z=QA&NHG=%xjQkeJ16rJ$YD$Jc6VX; z4}uH!E}sliTi_8{%)r1c48n{Iv*t(u1=&kHeO=jaa|jEnY3SC8rvil}OI#yLobz*Y zQ}ap~oQqNuOHxx5$}>wc6x=<11Hv2m#DR*$JzX3_IIbrr9AN)iU0~pmbgZgIOpf) zrskC}I2WZRmZYXAlxLP?D7bt2281{AiGvh*x;Tb#Tu)9=VEdEq^lakc#FT`DAN-FQ Z7@~}rxRe&!_5u|#c)I$ztaD0e0ss?&GH3t* diff --git a/mobile/themes/core/honeycomb/platform.css b/mobile/themes/core/honeycomb/platform.css new file mode 100644 --- /dev/null +++ b/mobile/themes/core/honeycomb/platform.css @@ -0,0 +1,765 @@ +/* ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is Mozilla Mobile Browser. + * + * The Initial Developer of the Original Code is + * Mozilla Corporation. + * Portions created by the Initial Developer are Copyright (C) 2008 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * Mark Finkle + * + * Alternatively, the contents of this file may be used under the terms of + * either the GNU General Public License Version 2 or later (the "GPL"), or + * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), + * in which case the provisions of the GPL or the LGPL are applicable instead + * of those above. If you wish to allow use of your version of this file only + * under the terms of either the GPL or the LGPL, and not to allow others to + * use your version of this file under the terms of the MPL, indicate your + * decision by deleting the provisions above and replace them with the notice + * and other provisions required by the GPL or the LGPL. If you do not delete + * the provisions above, a recipient may use your version of this file under + * the terms of any one of the MPL, the GPL or the LGPL. + * + * ***** END LICENSE BLOCK ***** */ + +/* global skin ------------------------------------------------------------- */ +@import url(chrome://global/skin/); + +%filter substitution +%include defines.inc + +/* general stuff ------------------------------------------------------------ */ +:root { + font-family: "Nokia Sans", Tahoma, sans-serif !important; + font-size: @font_normal@ !important; + background-color: @color_background_default@; /* force */ + color: @color_text_default@; /* force */ +} + +::-moz-selection { + background-color: @color_background_highlight@; + color: @color_text_highlight@; +} + +menu, +menuitem { + padding: 0 !important; + margin: 0 !important; +} + +description, +label { + /* force mac to use the same margins as windows and linux */ + -moz-margin-start: @margin_snormal@; + -moz-margin-end: @margin_snormal@; +} + +/* Override any OS inverse themes */ +textbox { + color: @color_text_inverse@; + background-color: @color_background_inverse@; +} + +/* textboxes --------------------------------------------------------------- */ +textbox:not([type="number"]) { + min-height: @textbox_height@; + border: @border_width_small@ solid @color_button_border@; + -moz-border-top-colors: -moz-initial; + -moz-border-right-colors: -moz-initial; + -moz-border-bottom-colors: -moz-initial; + -moz-border-left-colors: -moz-initial; +} + +textbox[isempty="true"] { + color: @color_text_placeholder@; +} + +textbox.search-bar { + border: @border_width_small@ solid rgba(0,0,0,0.4); + background-color: #f9f9f9; + background: url("chrome://browser/skin/images/textbox-bg.png") top left repeat-x; + background-size: 100% 100%; +} + +textbox[disabled="true"] { + background-color: lightgray; +} + +.link { + color: @color_text_as_link@; + text-decoration: underline; +} + +/* sidebars spacer --------------------------------------------------------- */ +.sidebar-spacer { + background-color: #767973; +} + +/* prompt dialogs ---------------------------------------------------------- */ +.context-block, +.modal-block, +.perm-modal-block { + -moz-box-align: center; + -moz-box-pack: center; + background-color: rgba(0,0,0,.6); +} + +.context-block { + padding: @margin_context_popup@; +} + +.dialog-dark, +.panel-arrowcontent { + background-color: @color_background_inverse@; + box-shadow: black 0 @border_radius_tiny@ @border_radius_tiny@, black 0 -@border_radius_tiny@ @border_radius_tiny@; + padding: 0; +} + +@media (max-width: 499px) { + .context-block { + padding: @padding_xlarge@; + } +} + +dialog > .prompt-header > .prompt-message { + white-space: pre-wrap; +} + +dialog > .prompt-header > .button-checkbox { + margin-left: @margin_large@; +} + +/* buttons ----------------------------------------------------------------- */ +.button-text, +.toolbarbutton-text { + font-weight: normal; + font-size: @font_snormal@ !important; +} + +button { + -moz-appearance: none; + min-width: @touch_button_minwidth@ !important; + min-height: @touch_button_small@ !important; /* button size */ + color: @color_text_button@; + margin: @margin_normal@; + padding: @padding_xnormal@; + background-image: url("chrome://browser/skin/images/button-bg.png"); + background-size: auto 100%; + border: @border_width_tiny@ solid @color_button_border@; +} + +button[disabled="true"] { + color: @color_text_disabled@ !important; + border: @border_width_tiny@ solid @color_button_border@ !important; +} + +button:focus > .button-box { + border: @border_width_tiny@ solid transparent; +} + +button:not([disabled]):hover:active, +button:not([disabled])[checked="true"] { + background-image: url("chrome://browser/skin/images/toggle-off.png"); +} + +/* Override GTK2 system setting */ +.button-icon { + display: -moz-initial !important; +} + +/* spinbuttons ------------------------------------------------------------- */ +spinbuttons { + border: none !important; +} + +.numberbox-input-box { + border: @border_width_small@ solid @color_button_border@; + border-right: 0 solid transparent; + -moz-border-top-colors: -moz-initial; + -moz-border-bottom-colors: -moz-initial; + -moz-border-left-colors: -moz-initial; +} + +.numberbox-input-box:-moz-locale-dir(rtl) { + border-right: @border_width_small@ solid @color_button_border@; + border-left: 0 solid transparent; +} + +.spinbuttons-box { + border: none !important; + -moz-box-orient: horizontal !important; + -moz-box-direction: reverse !important; +} + +.spinbuttons-up .button-icon, +.spinbuttons-down .button-icon { + display: block; +} + +.spinbuttons-up, +.spinbuttons-down { + -moz-appearance: none !important; + min-width: @touch_button_small@ !important; /* button size */ + min-height: @touch_button_small@ !important; /* button size */ + color: @color_text_button@; + margin: @margin_normal@; + padding: @padding_xnormal@; + background-image: url("chrome://browser/skin/images/button-bg.png"); + background-size: auto 100%; + border: @border_width_tiny@ solid @color_button_border@; + list-style-image: url("chrome://browser/skin/images/arrowdown-16.png"); +} + +.spinbuttons-up:hover:active:not([disabled=true]), +.spinbuttons-down:hover:active:not([disabled=true]) { + background-image: url("chrome://browser/skin/images/toggle-on.png"); +} + +.spinbuttons-up { + list-style-image: url("chrome://browser/skin/images/arrowup-16.png"); +} + +/* toolbar buttons --------------------------------------------------------- */ +toolbar { + -moz-appearance: none; + background-color: rgba(255,255,255,0.5); +} + +toolbarbutton { + min-width: @touch_button_large@ !important; /* primary button size */ + min-height: @touch_button_large@ !important; /* primary button size */ + -moz-appearance: none !important; + margin: 0; + padding: @padding_xsmall@; +} + +toolbarbutton:not(.show-text) .toolbarbutton-text { + display: none; +} + +.toolbarbutton-icon[label]:not([label=""]), +.toolbarbutton-icon[type="menu"] { + -moz-margin-end: @margin_tiny@; +} + +toolbarbutton:not(.show-text) .toolbarbutton-icon, +toolbarbutton:not([image]) .toolbarbutton-icon, +toolbarbutton[image=''] .toolbarbutton-icon { + -moz-margin-end: 0; +} + +toolbarbutton:hover, +toolbarbutton:hover:active, +toolbarbutton[open="true"] { + border-color: transparent; +} + +/* checkbox buttons ----------------------------------------------------------- */ +.button-checkbox { + padding: 0 !important; + background: none !important; + border: none !important; + -moz-border-image: none !important; + color: @color_text_default@; + -moz-box-align: center; + font-size: @font_small@; + -moz-box-align: center; +} + +.prompt-checkbox-label { + text-align: left; +} + +.button-checkbox > .button-image-icon { + -moz-margin-end: @margin_normal@; + list-style-image: url("chrome://browser/skin/images/check-unselected-hdpi.png"); +} + +.button-checkbox[checked="true"] > .button-image-icon { + list-style-image: url("chrome://browser/skin/images/check-selected-hdpi.png"); +} + +.button-checkbox > .button-box, +.button-checkbox:hover:active > .button-box, +.button-checkbox[checked="true"] > .button-box { + padding-top: @padding_tiny@; + padding-bottom: @padding_xsmall@; + -moz-padding-start: @padding_small@; + -moz-padding-end: @padding_small@; +} + +/* radio buttons ----------------------------------------------------------- */ +radiogroup { + -moz-box-orient: horizontal; +} + +.radio-label { + font-weight: normal; + font-size: @font_snormal@ !important; +} + +radio { + -moz-appearance: none; + min-width: @touch_button_small@ !important; /* button size */ + min-height: @touch_button_small@ !important; /* button size */ + color: @color_text_button@; + padding: @padding_xnormal@; + margin: 0; + background-image: url("chrome://browser/skin/images/button-bg.png"); + background-size: auto 100%; + border-top: @border_width_tiny@ solid @color_button_border@; + border-bottom: @border_width_tiny@ solid @color_button_border@; +} + +radio .radio-icon, radio .radio-check { + display: none; +} + +radio:not([disabled=true]):hover:active, +radio[selected] { + color: white; + background-image: url("chrome://browser/skin/images/toggle-on.png"); +} + +radio:first-child { + border-left: @border_width_tiny@ solid @color_button_border@; +} + +radio:first-child:-moz-locale-dir(rtl) { + border-left: none; + border-right: @border_width_tiny@ solid @color_button_border@; +} + +radio:last-child { + border-right: @border_width_tiny@ solid @color_button_border@; +} + +radio:last-child:-moz-locale-dir(rtl) { + border-right: none; + border-left: @border_width_tiny@ solid @color_button_border@; +} + +radio[focused="true"] > .radio-label-box { + border: @border_width_tiny@ solid transparent; +} + +/* checkbox --------------------------------------------------------------- */ +checkbox { + margin: @margin_tiny@ @margin_small@ @margin_tiny@ @margin_small@; /* match platform style for buttons */ + -moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox-with-spacing") !important; +} + +/* stop the focus from moving/showing the border around the label, which we don't use */ +checkbox:focus > .checkbox-label-center-box > .checkbox-label-box { + border: 1px solid transparent; +} + +.checkbox-check { + border: 2px transparent; + -moz-border-top-colors: -moz-initial; + -moz-border-right-colors: -moz-initial; + -moz-border-bottom-colors: -moz-initial; + -moz-border-left-colors: -moz-initial; + width: 46px; + height: 46px; + background: url("chrome://browser/skin/images/check-unselected-hdpi.png") no-repeat 50% 50%; +} + +checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check { + background-image: url("chrome://browser/skin/images/check-selected-hdpi.png"); +} + +checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > .checkbox-check { + background-image: url("chrome://browser/skin/images/check-selected-hdpi.png"); +} + +/* richlistbox ------------------------------------------------------------- */ +richlistbox { + color: @color_text_default@; + background-color: @color_background_default@; + -moz-user-focus: ignore; + margin: 0; +} + +richlistitem { + -moz-user-focus: ignore; + min-height: @touch_row@; /* row size */ + padding: @padding_small@; + border-bottom: @border_width_tiny@ solid @color_divider_border@; +} + +richlistitem label.title, +richlistitem description.title { + font-size: @font_normal@ !important; +} + +richlistitem label.normal, +richlistitem description.normal { + color: @color_subtext_default@; + font-size: @font_small@ !important; + white-space: pre-wrap; + word-wrap: break-word; +} + +richlistitem label.normal-black, +richlistitem description.normal-black { + font-size: @font_small@ !important; + white-space: pre-wrap; + word-wrap: break-word; +} + +richlistitem label.normal-bold, +richlistitem description.normal-bold { + font-weight: bold; + font-size: @font_small@ !important; + white-space: pre-wrap; + word-wrap: break-word; +} + +richlistitem[selected="true"] { + color: @color_text_default@; + background-color: @color_background_default@; +} + +richlistitem:hover:active:not([selected="true"]):not([nohighlight="true"]), +richlistitem:hover:active:not([selected="true"]):not([nohighlight="true"]) label.normal, +richlistitem:hover:active:not([selected="true"]):not([nohighlight="true"]) description.normal { + background-color: @color_background_highlight@; + color: @color_text_highlight@; +} + +richlistitem.section-header, +richlistitem[selected="true"].section-header { + font-weight: bold; + color: @color_text_header@; + background-color: @color_background_header@; +} + +richlistitem .show-on-select { + visibility: collapse; +} + +richlistitem[selected="true"] .show-on-select { + visibility: visible; +} + +richlistitem .hide-on-select { + visibility: visible; +} + +richlistitem[selected="true"] .hide-on-select { + visibility: collapse; +} + +richlistitem[typeName="message"] { + border-bottom: 0; +} + +/* colorpicker ------------------------------------------------------------- */ +colorpicker > panel { + background-color: #767973; +} + +colorpicker > vbox { + background-color: #767973; +} + +/* textbox ----------------------------------------------------------------- */ +.textbox-search-icon { + list-style-image: url("chrome://browser/skin/images/search-glass-30.png"); + -moz-image-region: auto; +} + +.textbox-search-clear { + list-style-image: url("chrome://browser/skin/images/search-clear-30.png"); + -moz-image-region: auto; +} + +/* menulist ---------------------------------------------------------------- */ +.menulist-label { + font-family: "Nokia Sans", Tahoma, sans-serif !important; + font-weight: normal; + font-size: @font_snormal@ !important; + background-color: transparent !important; +} + +menulist { + -moz-appearance: none !important; + -moz-user-focus: ignore; + min-width: @touch_button_minwidth@ !important; + min-height: @touch_button_small@ !important; /* button size */ + color: @color_text_button@ !important; + margin: @margin_normal@; + padding: @padding_small@ @padding_xnormal@; + background-image: url("chrome://browser/skin/images/button-bg.png"); + background-size: auto 100%; + border: @border_width_tiny@ solid @color_button_border@; +} + +menulist[disabled="true"] { + color: @color_text_disabled@ !important; + border: @border_width_tiny@ solid @color_button_border@ !important; +} + +menulist:not([disabled="true"]):hover:active { + background-image: url("chrome://browser/skin/images/toggle-off.png"); +} + +menulist > dropmarker { + height: 32px; + width: 32px; + margin-left: @margin_snormal@; + background-color: transparent; /* for windows */ + border: none; /* for windows */ + -moz-box-align: center; + -moz-box-pack: center; + list-style-image: url("chrome://browser/skin/images/dropmarker-hdpi.png"); + -moz-image-region: auto; + display: block; +} + +menulist[disabled="true"] > dropmarker { + opacity: 0.5; +} + +/* progressmeter ----------------------------------------------------------- */ +progressmeter { + background-color: #fff; + padding: @padding_small@; + height: @textbox_height@; + border: @border_width_large@ solid #aaa; + -moz-border-top-colors: -moz-initial; + -moz-border-right-colors: -moz-initial; + -moz-border-bottom-colors: -moz-initial; + -moz-border-left-colors: -moz-initial; +} + +.progress-bar { + background-color: @color_background_highlight@; +} + +/* panels / arrowboxes------------------------------------------------------ */ +arrowbox { + -moz-appearance: none; + background: transparent !important; + border: none; +} + +.arrowbox-dark .panel-arrowcontent { + padding: @padding_normal@; /* core spacing */ +} + +dialog, +.arrowbox-dark .panel-arrowcontent, +.panel-dark { + color: @color_text_default@; + background: @color_background_default@; +} + +dialog, +.arrowbox-dark .panel-arrowcontent { + border: @border_width_small@ solid @color_dialog_border@; + box-shadow: black 0 @shadow_width_small@ @shadow_width_small@; +} + +dialog { + margin: @margin_xxxnormal@ !important; + max-width: @dialog_width@; +} + +.prompt-message { + -moz-box-pack: center; + font-size: @font_snormal@; + margin: @padding_normal@; +} + +.prompt-title { + font-size: @font_xnormal@; + padding-top: @padding_xnormal@; + padding-left: @padding_normal@; +} + +/* Authentication dialogs do not have a title */ +.prompt-title:empty, +.prompt-title:empty + .prompt-line { + display: none; +} + +.prompt-line { + border-bottom: @border_width_tiny@ solid @color_divider_border@; + margin: @margin_small@ 0 0 0; + height: @padding_normal@ !important; +} + +.prompt-buttons { + font-size: @font_snormal@; + background-color: @color_background_dlgbuttons@; + display: inline-block; + text-align: center; +} + +.prompt-edit { + margin: @margin_xnormal@; + font-size: @font_normal@; + text-align: start; +} + +.panel-arrow[side="top"] { + list-style-image: url("chrome://browser/skin/images/arrowbox-up.png"); + margin-bottom: -@margin_snormal@; +} + +.panel-arrow[side="bottom"] { + list-style-image: url("chrome://browser/skin/images/arrowbox-down.png"); + margin-top: -@margin_snormal@; +} + +.panel-arrow[side="left"] { + list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png"); + margin-right: -@margin_snormal@; + -moz-transform: scaleX(-1); +} + +.panel-arrow[side="right"] { + list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png"); + margin-left: -@margin_snormal@; +} + +/*.panel-row-header ------------------------------------------------------------ */ +.panel-row-header { + border-bottom: @border_width_xxlarge@ solid @color_background_active@; + background-color: @color_background_active@ !important; + padding: 0 !important; +} + +.panel-row-button { + -moz-appearance: none; + background-size: 100% 100%; + color: @color_text_inverse@; + border: 0 solid transparent !important; + -moz-border-start: @border_width_tiny@ solid rgba(255,255,255,0.2) !important; + -moz-border-end: @border_width_tiny@ solid rgba(0,0,0,0.2) !important; + padding-top: @padding_xsmall@ !important; + padding-bottom: @padding_xsmall@ !important; + -moz-padding-start: @padding_xsmall@ !important; + -moz-padding-end: @padding_xsmall@ !important; + -moz-box-flex: 1; + -moz-user-focus: ignore; + -moz-user-select: none; +} + +.panel-row-button:hover:active { + background: @color_background_default@; + color: @color_text_default@; + background-size: 100% 100%; +} + +.panel-row-button:first-child { + -moz-border-start-width: 0 !important; +} + +.panel-row-button:last-child { + -moz-border-end-width: 0 !important; +} + +@media (@orientation@: portrait) { + .panel-row-button { + -moz-box-orient: vertical; + } + + .panel-row-button .toolbarbutton-text { + font-size: @font_xsmall@ !important; + } +} + +.panel-row-button .toolbarbutton-text { + text-align: left; +} + +.panel-row-button .toolbarbutton-text:-moz-locale-dir(rtl) { + text-align: right; +} + +.panel-row-button[disabled="true"] { + pointer-events: none; +} + +.panel-row-button[disabled="true"] .toolbarbutton-icon { + opacity: 0.5; +} + +.panel-row-button[disabled="true"] .toolbarbutton-text { + color: @color_text_disabled@; +} + +.panel-row-button[checked="true"] { + background: @color_background_default@; + color: @color_text_default@; + background-size: 100% 100% !important; +} + +.panel-row-button[checked="true"], +.panel-row-button[disabled="true"] { + pointer-events: none; +} + +#panel-container-inner { + -moz-box-orient: vertical; +} + +#panel-controls { + -moz-box-orient: horizontal; +} + +@media (min-width: @tablet_panel_minwidth@) { + #panel-container-inner { + -moz-box-orient: horizontal; + -moz-box-pack: center; + } + + #panel-items { + max-width: @tablet_panel_minwidth@; + min-width: 0px !important; + } + + /* This will affect the prefs screen, but not the awesome screen */ + #panel-controls { + -moz-box-orient: vertical !important; + -moz-box-align: start; + } + + #panel-controls > .panel-row-button { + -moz-box-orient: horizontal; + -moz-box-flex: 0; + min-width: @tablet_panel_controls@ !important; + } + + #panel-controls .toolbarbutton-text { + display: -moz-box !important; + -moz-box-flex: 1; + } + + #panel-container { + -moz-box-pack: center; + padding: @padding_xlarge@ 0px; + } +} + +/* because the buttons can wrap, we need to use the margin to create inter-button + spacing and a bottom margin for the notification */ +notification > button { + margin-bottom: @margin_normal@; +} diff --git a/mobile/themes/core/jar.mn b/mobile/themes/core/jar.mn --- a/mobile/themes/core/jar.mn +++ b/mobile/themes/core/jar.mn @@ -261,17 +261,17 @@ chrome.jar: skin/gingerbread/images/homescreen-default-hdpi.png (images/homescreen-default-hdpi.png) chrome.jar: % skin browser classic/1.0 %skin/honeycomb/ os=Android osversion>=3.0 % skin browser honeycomb/1.0 %skin/honeycomb/ skin/honeycomb/aboutPage.css (aboutPage.css) skin/honeycomb/about.css (about.css) skin/honeycomb/aboutHome.css (aboutHome.css) -* skin/honeycomb/browser.css (browser.css) +* skin/honeycomb/browser.css (honeycomb/browser.css) * skin/honeycomb/content.css (content.css) skin/honeycomb/config.css (config.css) * skin/honeycomb/forms.css (forms.css) skin/honeycomb/header.css (header.css) * skin/honeycomb/notification.css (notification.css) * skin/honeycomb/platform.css (honeycomb/platform.css) skin/honeycomb/touchcontrols.css (touchcontrols.css) * skin/honeycomb/localePicker.css (localePicker.css) @@ -383,8 +383,11 @@ chrome.jar: skin/honeycomb/images/handle-start.png (images/handle-start.png) skin/honeycomb/images/handle-end.png (images/handle-end.png) skin/honeycomb/images/tabs-hdpi.png (honeycomb/images/tabs-hdpi.png) skin/honeycomb/images/errorpage-warning.png (images/errorpage-warning.png) skin/honeycomb/images/errorpage-larry-white.png (images/errorpage-larry-white.png) skin/honeycomb/images/errorpage-larry-black.png (images/errorpage-larry-black.png) skin/honeycomb/images/homescreen-blank-hdpi.png (images/homescreen-blank-hdpi.png) skin/honeycomb/images/homescreen-default-hdpi.png (images/homescreen-default-hdpi.png) + skin/honeycomb/images/urlbar-border-left.png (honeycomb/images/urlbar-border-left.png) + skin/honeycomb/images/urlbar-border-right.png (honeycomb/images/urlbar-border-right.png) + skin/honeycomb/images/urlbar-border-bottom.png (honeycomb/images/urlbar-border-bottom.png)