/* min-height: 24px; */
}
+#PersonalToolbar > #home-button {
+ -moz-box-orient: horizontal;
+}
+
+#PersonalToolbar > #home-button > .toolbarbutton-text {
+ display: block;
+}
+
#print-preview-toolbar:not(:-moz-lwtheme) {
/* -moz-appearance: toolbox; */
}
height: 16px;
-moz-margin-start: 1px;
-moz-margin-end: 2px;
+ margin-top: 1px;
+ margin-bottom: 1px;
}
/* Force the display of the label for bookmarks */
:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
#new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
#social-share-button, #open-file-button, #find-button, #developer-button,
- #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
+ #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
#history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
#email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
- #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button),
-
+ #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
+ #pocket-button),
#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
list-style-image: url("chrome://browser/skin/ToolbarFx.png");
}
-moz-image-region: rect(0, 288px, 18px, 270px);
}
+#feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
#feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
-moz-image-region: rect(18px, 288px, 36px, 270px);
}
-moz-image-region: rect(18px, 720px, 36px, 702px);
}
-#loop-button-throttled > .toolbarbutton-badge-container,
+#loop-button,
#loop-button > .toolbarbutton-badge-container {
list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
-moz-image-region: rect(0, 18px, 18px, 0);
}
-#loop-button-throttled:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container,
+#loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
#loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 90px, 18px, 72px);
}
-#loop-button-throttled[state="disabled"] > .toolbarbutton-badge-container,
-#loop-button-throttled[disabled="true"] > .toolbarbutton-badge-container,
+#loop-button[state="disabled"],
+#loop-button[disabled="true"],
#loop-button[state="disabled"] > .toolbarbutton-badge-container,
#loop-button[disabled="true"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 36px, 18px, 18px);
}
-#loop-button-throttled[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container,
+#loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
#loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 126px, 18px, 108px);
}
-#loop-button-throttled:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container,
+#loop-button:not([disabled="true"])[state="error"],
#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 54px, 18px, 36px);
}
-#loop-button-throttled:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container,
+#loop-button:not([disabled="true"])[state="action"],
#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 72px, 18px, 54px);
}
-#loop-button-throttled:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container,
+#loop-button:not([disabled="true"])[state="active"],
#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 108px, 18px, 90px);
}
-moz-image-region: rect(18px, 738px, 36px, 720px);
}
+#pocket-button[cui-areatype="toolbar"] {
+ -moz-image-region: rect(0, 774px, 18px, 756px);
+}
+
+#pocket-button[cui-areatype="toolbar"]:hover,
+#pocket-button[cui-areatype="toolbar"][open] {
+ -moz-image-region: rect(18px, 774px, 36px, 756px);
+}
+
/* === END toolbarbuttons.inc.css === */
/* === BEGIN menupanel.inc.css === */
:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
#new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
#social-share-button, #open-file-button, #find-button, #developer-button,
- #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
+ #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
#history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
#email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
- #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button)[cui-areatype="menu-panel"],
+ #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
+ #pocket-button)[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
#new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
#social-share-button, #open-file-button, #find-button, #developer-button,
- #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
+ #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
#history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
#email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
- #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button) {
+ #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
+ #pocket-button) {
list-style-image: var(--menupanel-list-style-image);
}
-moz-image-region: rect(32px, 960px, 64px, 928px);
}
+#pocket-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #pocket-button {
+ -moz-image-region: rect(0px, 992px, 32px, 960px);
+}
+
+#pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
+ -moz-image-region: rect(32px, 992px, 64px, 960px);
+}
+
toolbaritem[sdkstylewidget="true"] > toolbarbutton {
-moz-image-region: rect(0, 832px, 32px, 800px);
}
-#loop-button-throttled[cui-areatype="menu-panel"] > .toolbarbutton-badge-container,
-toolbarpaletteitem[place="palette"] > #loop-button-throttled > .toolbarbutton-badge-container,
+#loop-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #loop-button,
#loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container,
toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container {
list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
}
/* Make sure that the state icons are not shown in the customization palette. */
-toolbarpaletteitem[place="palette"] > #loop-button-throttled > .toolbarbutton-badge-container,
+toolbarpaletteitem[place="palette"] > #loop-button,
toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 32px, 32px, 0) !important;
}
-#loop-button-throttled[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container,
+#loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 160px, 32px, 128px);
}
-#loop-button-throttled[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container,
-#loop-button-throttled[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container,
+#loop-button[cui-areatype="menu-panel"][state="disabled"],
+#loop-button[cui-areatype="menu-panel"][disabled="true"],
#loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container,
#loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 64px, 32px, 32px);
}
-#loop-button-throttled[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container,
+#loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]),
#loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 224px, 32px, 192px);
}
-#loop-button-throttled[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container,
+#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"],
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 96px, 32px, 64px);
}
-#loop-button-throttled[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container,
+#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"],
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 128px, 32px, 96px);
}
-#loop-button-throttled[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container,
+#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"],
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 192px, 32px, 160px);
}
*/
/* Help SDK icons fit: */
-toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
+toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
+toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon {
width: 16px;
}
-#nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
+#nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
/* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
width: 32px;
}
max-height: 16px;
}
-toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
- width: auto;
- height: auto;
- max-width: 32px;
- max-height: 24px;
-}
-
/* fixup corners for share panel */
.social-panel > .social-panel-frame {
border-radius: inherit;
background-color: #C09070;
}
-.tabbrowser-tab[remote] {
- text-decoration: underline;
-}
-
/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
-.tabbrowser-tab[selected=true] {
+.tabbrowser-tab[visuallyselected=true] {
/* position: relative;
z-index: 2;*/
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
}
-.tab-background-start[selected=true]::after,
-.tab-background-start[selected=true]::before,
+.tab-background-start[visuallyselected=true]::after,
+.tab-background-start[visuallyselected=true]::before,
.tab-background-start,
.tab-background-end,
-.tab-background-end[selected=true]::after,
-.tab-background-end[selected=true]::before {
+.tab-background-end[visuallyselected=true]::after,
+.tab-background-end[visuallyselected=true]::before {
}
-.tabbrowser-tab:not([selected=true]),
+.tabbrowser-tab:not([visuallyselected=true]),
.tabbrowser-tab:-moz-lwtheme {
}
/* Selected tab */
-.tabbrowser-tab[selected="true"] {
+.tabbrowser-tab[visuallyselected="true"] {
}
/* End selected tab */
* of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
* the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
*/
-#main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([selected=true]) {
+#main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
/* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
}
margin-top: 5px;
}
+/* === BEGIN notification-icons.inc.css === */
+
.popup-notification-icon {
width: 64px;
height: 64px;
list-style-image: url("chrome://browser/skin/Geolocation-64.png");
}
+.popup-notification-icon[popupid="push"] {
+ list-style-image: url(chrome://browser/skin/Push-64.png);
+}
+
.popup-notification-icon[popupid="xpinstall-disabled"],
.popup-notification-icon[popupid="addon-progress"],
-.popup-notification-icon[popupid="addon-install-cancelled"],
.popup-notification-icon[popupid="addon-install-blocked"],
.popup-notification-icon[popupid="addon-install-failed"],
+.popup-notification-icon[popupid="addon-install-confirmation"],
.popup-notification-icon[popupid="addon-install-complete"] {
list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
width: 32px;
list-style-image: url("chrome://browser/skin/notification-64.png");
}
-.addon-progress-description {
- width: 350px;
- max-width: 350px;
-}
-
-.popup-progress-label,
-.popup-progress-meter {
- -moz-margin-start: 0;
- -moz-margin-end: 0;
-}
-
-.popup-progress-cancel {
- -moz-appearance: none;
- background: transparent;
- border: none;
- padding: 0;
- margin: 0;
- min-height: 0;
- min-width: 0;
- list-style-image: url("chrome://mozapps/skin/downloads/downloadButtons.png");
- -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-.popup-progress-cancel:hover {
- -moz-image-region: rect(16px, 32px, 32px, 16px);
-}
-
-.popup-progress-cancel:active {
- -moz-image-region: rect(32px, 32px, 48px, 16px);
-}
-
.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
.popup-notification-icon[popupid*="offline-app-requested"],
.popup-notification-icon[popupid="offline-app-usage"] {
list-style-image: url("chrome://global/skin/icons/alert-question.gif");
}
-.popup-notification-icon[popupid="password-save"],
-.popup-notification-icon[popupid="password-change"] {
+.popup-notification-icon[popupid="password"] {
list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
}
list-style-image: url("chrome://browser/skin/Geolocation-16.png");
}
+#push-notification-icon {
+ list-style-image: url(chrome://browser/skin/Push-16.png);
+}
+
#addons-notification-icon {
list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
}
margin: 0px;
}
+.translate-notification-icon,
+#translate-notification-icon {
+ list-style-image: url("chrome://browser/skin/translation-16.png");
+ -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+.translated-notification-icon,
+#translated-notification-icon {
+ list-style-image: url("chrome://browser/skin/translation-16.png");
+ -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+.popup-notification-icon[popupid="servicesInstall"] {
+ list-style-image: url("chrome://browser/skin/social/services-64.png");
+}
+#servicesInstall-notification-icon {
+ list-style-image: url("chrome://browser/skin/social/services-16.png");
+}
+
+/* EME notifications */
+
+.popup-notification-icon[popupid="drmContentPlaying"],
+#eme-notification-icon {
+ list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
+}
+
+#eme-notification-icon:hover:active {
+ list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
+}
+
+#eme-notification-icon[firstplay=true] {
+ animation: emeTeachingMoment 0.2s linear 0s 5 normal;
+}
+
+@keyframes emeTeachingMoment {
+ 0% {transform: translateX(0); }
+ 25% {transform: translateX(3px) }
+ 75% {transform: translateX(-3px) }
+ 100% { transform: translateX(0); }
+}
+
+/* === END notification-icons.inc.css === */
+
/* Translation infobar */
/* === BEGIN infobar.inc.css === */
}
}
+notification[value="translation"] hbox[anonid="details"] {
+ overflow: hidden;
+}
+
notification[value="translation"] button,
notification[value="translation"] menulist {
min-width: 0;
min-height: 40px;
}
-.translate-notification-icon,
-#translate-notification-icon {
- list-style-image: url("chrome://browser/skin/translation-16.png");
- -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-
-.translated-notification-icon,
-#translated-notification-icon {
- list-style-image: url("chrome://browser/skin/translation-16.png");
- -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
.translation-menupopup {
-moz-appearance: none;
}
-moz-image-region: auto;
}
+#panelMenu_pocket,
+#menu_pocket,
+#BMB_pocket {
+ list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
+}
+
/* ::::: Keyboard UI Panel ::::: */
.KUI-panel {
/* === BEGIN commandline.inc.css === */
+/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
+ We are copy/pasting variables from light-theme and dark-theme,
+ since they aren't loaded in this context (within browser.css). */
+:root #developer-toolbar {
+ --gcli-background-color: #000000; /* --theme-toolbar-background */
+ --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
+ --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
+ --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
+ --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
+ --selection-background: #008484; /* --theme-selection-background */
+ --selection-color: #000000; /* --theme-selection-color */
+}
+
/* Developer toolbar */
#developer-toolbar {
- border-top: 3px solid #000000;
+ border-top: 3px solid var(--gcli-background-color);
border-bottom: none;
}
/* line-height: 32px;
outline-style: none; */
background-repeat: no-repeat;
- background-color: rgba(0, 0, 0, .75);
+ background-color: var(--gcli-input-background);
}
.gclitoolbar-input-node[focused="true"] {
- background-color: #000000;
+ background-color: var(--gcli-input-focused-background);
}
.gclitoolbar-input-node::before {
}
.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
- background-color: #008484;
- color: #000000;
- text-shadow: none;
+ background-color: var(--selection-background);
+ color: var(--selection-color);
}
.gclitoolbar-complete-node {
border: 0;
}
-.popup-notification-icon[popupid="servicesInstall"] {
- list-style-image: url("chrome://browser/skin/social/services-64.png");
-}
-#servicesInstall-notification-icon {
- list-style-image: url("chrome://browser/skin/social/services-16.png");
-}
#social-undoactivation-button {
-moz-margin-start: 0; /* override default label margin to match description margin */
}
/* === END badcontent-doorhanger.inc.css === */
-/* EME notifications */
-
-.popup-notification-icon[popupid="drmContentPlaying"],
-#eme-notification-icon {
- list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
-}
-
-#eme-notification-icon:hover:active {
- list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
-}
-
-#eme-notification-icon[firstplay=true] {
- animation: emeTeachingMoment 0.2s linear 0s 5 normal;
-}
-
-@keyframes emeTeachingMoment {
- 0% {transform: translateX(0); }
- 25% {transform: translateX(3px) }
- 75% {transform: translateX(-3px) }
- 100% { transform: translateX(0); }
-}
-
/* === BEGIN customizeMode.inc.css === */
/* Customization mode */
#customization-titlebar-visibility-button {
list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
-moz-image-region: rect(0, 16px, 16px, 0);
- padding: 0px 5px;
}
#customization-titlebar-visibility-button:hover {
-moz-image-region: rect(16px, 16px, 32px, 0);
}
+#customization-lwtheme-button,
+#customization-titlebar-visibility-button {
+ padding: 0px 5px;
+}
+
#customization-titlebar-visibility-button > .button-box {
padding-top: 0;
padding-bottom: 1px;
padding-bottom: 0;
}
+#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
#customization-titlebar-visibility-button > .button-box > .button-text {
/* Sadly, button.css thinks its margins are perfect for everyone. */
-moz-margin-start: 5px !important;
}
+#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
+ width: 20px;
+ height: 20px;
+ border-radius: 2px;
+ background-size: contain;
+}
+
#customization-titlebar-visibility-button > .button-box > .button-icon {
vertical-align: middle;
}