diff --git a/browser/components/translation/translation-infobar.xml b/browser/components/translation/translation-infobar.xml index 623840b735d0..82049e48b96f 100644 --- a/browser/components/translation/translation-infobar.xml +++ b/browser/components/translation/translation-infobar.xml @@ -25,7 +25,7 @@ - + @@ -43,7 +43,7 @@ - + @@ -64,7 +64,7 @@ - + diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index 16bd33f0e86a..8f4c12be1459 100644 --- a/browser/themes/linux/browser.css +++ b/browser/themes/linux/browser.css @@ -1415,6 +1415,53 @@ toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { margin: 0px; } +/* Translation infobar */ + +%include ../shared/translation/infobar.inc.css + +notification[value="translation"], +notification[value="translation"] button, +notification[value="translation"] menulist { + color: #5A5959; +} + +notification[value="translation"] { + background-color: #F2F1F0; +} + +notification[value="translation"] menulist { + border: 1px solid #C1C1C1; + background-color: #FFF; +} + +notification[value="translation"] button { + border: 1px solid #C1C1C1; + background-color: #F2F1F0; +} + +notification[value="translation"] button:hover, +notification[value="translation"] button:active, +notification[value="translation"] menulist:hover, +notification[value="translation"] menulist:active { + background-color: #E2E1E0; +} + +notification[value="translation"] button[anonid="translate"] { + color: #FFF; + background-image: linear-gradient(#9FB938, #8DA726); + box-shadow: none; + border: 1px solid #829C1C; +} + +notification[value="translation"] button[anonid="translate"]:hover, +notification[value="translation"] button[anonid="translate"]:active { + background-image: linear-gradient(#8DA726, #8DA726); +} + +notification[value="translation"] menulist > .menulist-dropmarker { + display: block; +} + .translate-notification-icon, #translate-notification-icon { list-style-image: url(chrome://browser/skin/translation-16.png); diff --git a/browser/themes/shared/translation/infobar.inc.css b/browser/themes/shared/translation/infobar.inc.css new file mode 100644 index 000000000000..b5345fc2f8a2 --- /dev/null +++ b/browser/themes/shared/translation/infobar.inc.css @@ -0,0 +1,60 @@ +%if 0 +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +%endif +notification[value="translation"] .messageImage { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +@media (min-resolution: 1.25dppx) { + notification[value="translation"] .messageImage { + list-style-image: url(chrome://browser/skin/translation-16@2x.png); + -moz-image-region: rect(0, 64px, 32px, 32px); + } +} + +notification[value="translation"] { + min-height: 40px; +} + +notification[value="translation"] button, +notification[value="translation"] menulist { + -moz-appearance: none; + border-width: 1px; + -moz-border-top-colors: none; + -moz-border-right-colors: none; + -moz-border-bottom-colors: none; + -moz-border-left-colors: none; + border-radius: 2px; + min-width: 0; + min-height: 30px; + -moz-padding-end: 1ch; + box-shadow: 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, 0.5) inset; +} + +notification[value="translation"] button > .button-box, +notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker { + padding: 0; + -moz-margin-start: 3ch; +} + +notification[value="translation"] button:not([type="menu"]) > .button-box { + -moz-margin-end: 3ch; +} + +notification[value="translation"] button, +notification[value="translation"] menulist, +notification[value="translation"] menulist > .menulist-label-box { + -moz-margin-start: 1ch; + -moz-margin-end: 1ch; +} + +notification[value="translation"] menulist > .menulist-dropmarker { + -moz-appearance: toolbarbutton-dropdown; + border: none; + background-color: transparent; + margin: auto; + padding: 5px 0; +} diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index c94678e6c8b5..7966d70be1da 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -2348,6 +2348,63 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { margin: 0px; } +/* Translation infobar */ + +%include ../shared/translation/infobar.inc.css + +@media (-moz-windows-default-theme) { + notification[value="translation"], + notification[value="translation"] button, + notification[value="translation"] menulist { + color: #545454; + } + + notification[value="translation"] { + background-color: #EEE; + } + + notification[value="translation"] menulist { + border: 1px solid #C1C1C1; + background-color: #FFF; + } + + notification[value="translation"] button { + border: 1px solid #C1C1C1; + background-color: #FBFBFB; + } + + notification[value="translation"] button:hover, + notification[value="translation"] button:active, + notification[value="translation"] menulist:hover, + notification[value="translation"] menulist:active { + background-color: #EBEBEB; + } + + notification[value="translation"] button[anonid="translate"] { + color: #FFF; + background-color: #0095DD; + box-shadow: none; + border: 1px solid #006B9D; + } + + notification[value="translation"] button[anonid="translate"]:hover, + notification[value="translation"] button[anonid="translate"]:active { + background-color: #008ACB; + } + + notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker, + notification[value="translation"] menulist > .menulist-dropmarker { + list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png"); + } + + @media (min-resolution: 1.25dppx) { + notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker, + notification[value="translation"] menulist > .menulist-dropmarker { + list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow@2x.png"); + } + } +} + .translate-notification-icon, #translate-notification-icon { list-style-image: url(chrome://browser/skin/translation-16.png);