mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-01 00:32:11 +00:00
Bug 1352364 - Share toolbar button styling code between platforms. r=dao
MozReview-Commit-ID: 54hKvMmBq22 --HG-- rename : browser/themes/osx/places/bookmarks-notification-finish.png => browser/themes/shared/places/bookmarks-notification-finish.png rename : browser/themes/osx/places/bookmarks-notification-finish@2x.png => browser/themes/shared/places/bookmarks-notification-finish@2x.png rename : browser/themes/windows/toolbarbutton-dropdown-arrow-inverted.png => browser/themes/shared/toolbarbutton-dropdown-arrow-inverted.png rename : browser/themes/windows/browser.css => browser/themes/shared/toolbarbuttons.inc.css extra : rebase_source : 3cac9d868f799cd19315b6f0756e07c1d238c314
This commit is contained in:
Johann Hofmann
parent
16df2c682c
commit
d9be18a0fe
@ -121,7 +121,6 @@ skip-if = os == "linux" # Bug 924307
|
||||
tags = audiochannel
|
||||
# DO NOT ADD MORE TESTS HERE. USE A TOPICAL DIRECTORY INSTEAD.
|
||||
[browser_backButtonFitts.js]
|
||||
skip-if = os == "mac" # The Fitt's Law back button is not supported on OS X
|
||||
# DO NOT ADD MORE TESTS HERE. USE A TOPICAL DIRECTORY INSTEAD.
|
||||
[browser_beforeunload_duplicate_dialogs.js]
|
||||
# DO NOT ADD MORE TESTS HERE. USE A TOPICAL DIRECTORY INSTEAD.
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
@import url("chrome://pocket-shared/skin/pocket.css");
|
||||
|
||||
#pocket-button[cui-areatype="toolbar"] > .toolbarbutton-icon {
|
||||
max-width: 18px;
|
||||
margin: 0;
|
||||
#nav-bar #pocket-button > .toolbarbutton-icon {
|
||||
padding: calc(var(--toolbarbutton-vertical-inner-padding)) 6px;
|
||||
}
|
||||
|
||||
#pocket-button[cui-areatype="toolbar"][open] {
|
||||
|
||||
@ -12,18 +12,22 @@
|
||||
|
||||
%include ../shared/browser.inc
|
||||
%include linuxShared.inc
|
||||
%filter substitution
|
||||
|
||||
%define forwardTransitionLength 150ms
|
||||
%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
|
||||
|
||||
%include ../shared/browser.inc.css
|
||||
|
||||
:root {
|
||||
--backbutton-urlbar-overlap: 6px;
|
||||
--backbutton-border-color: var(--urlbar-border-color-hover);
|
||||
--backbutton-background: rgba(255,255,255,.15);
|
||||
|
||||
/* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
|
||||
--forwardbutton-width: 25px;
|
||||
|
||||
--toolbarbutton-border-radius: 1px;
|
||||
|
||||
--toolbarbutton-vertical-inner-padding: 2px;
|
||||
--toolbarbutton-vertical-text-padding: var(--toolbarbutton-vertical-inner-padding);
|
||||
|
||||
--toolbarbutton-hover-background: rgba(255,255,255,.5) linear-gradient(rgba(255,255,255,.5), transparent);
|
||||
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.25);
|
||||
--toolbarbutton-hover-boxshadow: none;
|
||||
@ -193,67 +197,6 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-p
|
||||
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
|
||||
}
|
||||
|
||||
/* ----- BOOKMARK STAR ANIMATION ----- */
|
||||
|
||||
@keyframes animation-bookmarkAdded {
|
||||
from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
|
||||
60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
|
||||
80% { opacity: 1; }
|
||||
to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes animation-bookmarkPulse {
|
||||
from { transform: scale(1); }
|
||||
50% { transform: scale(1.3); }
|
||||
to { transform: scale(1); }
|
||||
}
|
||||
|
||||
#bookmarked-notification-container {
|
||||
min-height: 1px;
|
||||
min-width: 1px;
|
||||
height: 1px;
|
||||
margin-bottom: -1px;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bookmarked-notification {
|
||||
background-size: 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#bookmarked-notification-dropmarker-anchor {
|
||||
z-index: -1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bookmarked-notification-dropmarker-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
|
||||
background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
|
||||
animation: animation-bookmarkAdded 800ms;
|
||||
animation-timing-function: ease, ease, ease;
|
||||
}
|
||||
|
||||
#bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
list-style-image: none !important;
|
||||
}
|
||||
|
||||
#bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
|
||||
visibility: visible;
|
||||
animation: animation-bookmarkPulse 300ms;
|
||||
animation-delay: 600ms;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
/* Bookmark menus */
|
||||
menu.bookmark-item,
|
||||
menuitem.bookmark-item {
|
||||
@ -348,195 +291,7 @@ menuitem.bookmark-item {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Primary toolbar buttons */
|
||||
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon {
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon) > .toolbarbutton-icon,
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon,
|
||||
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
max-width: 18px;
|
||||
}
|
||||
|
||||
.findbar-button,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 {
|
||||
-moz-appearance: none;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.findbar-button > .toolbarbutton-text,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon {
|
||||
margin-inline-end: 0;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
transition-property: background-color, border-color;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
/* horizontal padding + border + actual icon width */
|
||||
max-width: 32px !important /* bug 561154 */;
|
||||
}
|
||||
|
||||
#nav-bar #PanelUI-menu-button {
|
||||
padding-inline-start: 5px;
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
|
||||
.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon {
|
||||
background: var(--toolbarbutton-hover-background);
|
||||
background-clip: padding-box;
|
||||
border-color: var(--toolbarbutton-hover-bordercolor);
|
||||
box-shadow: var(--toolbarbutton-hover-boxshadow);
|
||||
}
|
||||
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon {
|
||||
background: var(--toolbarbutton-active-background);
|
||||
background-clip: padding-box;
|
||||
box-shadow: var(--toolbarbutton-active-boxshadow);
|
||||
border-color: var(--toolbarbutton-active-bordercolor);
|
||||
transition-duration: 10ms;
|
||||
}
|
||||
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
|
||||
background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
|
||||
transition: background-color 150ms;
|
||||
}
|
||||
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbaritem-combined-buttons {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbaritem-combined-buttons > .toolbarbutton-1 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbaritem-combined-buttons:not(:hover) > separator,
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
|
||||
content: "";
|
||||
display: -moz-box;
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
margin-inline-end: -1px;
|
||||
background-image: linear-gradient(currentColor 0, currentColor 100%);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1px 18px;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator,
|
||||
:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
margin-inline-start: -4px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
:-moz-any(#back-button, #forward-button) > .toolbarbutton-icon {
|
||||
border-color: var(--urlbar-border-color) !important /* bug 561154 */;
|
||||
}
|
||||
|
||||
:-moz-any(#back-button, #forward-button):not(:hover):not(:active):not([open=true]) > .toolbarbutton-icon,
|
||||
:-moz-any(#back-button, #forward-button)[disabled=true] > .toolbarbutton-icon {
|
||||
background-color: rgba(255,255,255,.25) !important /* bug 561154 */;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
#back-button {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-inline-start: 4px;
|
||||
padding-inline-end: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 0 10000px 10000px 0;
|
||||
}
|
||||
|
||||
#back-button:-moz-locale-dir(rtl) {
|
||||
border-radius: 10000px 0 0 10000px;
|
||||
}
|
||||
|
||||
#back-button > menupopup {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon {
|
||||
border-radius: 10000px;
|
||||
padding: 6px;
|
||||
max-width: 32px; /* horizontal padding + border + icon width */
|
||||
}
|
||||
|
||||
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
#forward-button {
|
||||
-moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
padding-left: calc(var(--backbutton-urlbar-overlap) + 3px);
|
||||
padding-right: 3px;
|
||||
border-left-style: none;
|
||||
border-radius: 0;
|
||||
max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap));
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
|
||||
transition: margin-left @forwardTransitionLength@ ease-out;
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
|
||||
margin-left: calc(0px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
|
||||
/* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
|
||||
transition-delay: 100s;
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
|
||||
/* when not hovered anymore, trigger a new transition to hide the forward button immediately */
|
||||
margin-left: calc(-0.01px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||
}
|
||||
%include ../shared/bookmarked-notification.inc.css
|
||||
|
||||
.unified-nav-back[_moz-menuactive] {
|
||||
list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu") !important;
|
||||
@ -551,8 +306,7 @@ menuitem.bookmark-item {
|
||||
list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu") !important;
|
||||
}
|
||||
|
||||
/* Menu panel buttons */
|
||||
|
||||
%include ../shared/toolbarbuttons.inc.css
|
||||
%include ../shared/toolbarbutton-icons.inc.css
|
||||
%include ../shared/menupanel.inc.css
|
||||
|
||||
@ -583,6 +337,7 @@ menuitem.bookmark-item {
|
||||
/* Location bar */
|
||||
#main-window {
|
||||
--urlbar-border-color: ThreeDShadow;
|
||||
--urlbar-border-color-hover: var(--urlbar-border-color);
|
||||
}
|
||||
|
||||
#navigator-toolbox:-moz-lwtheme {
|
||||
@ -1205,43 +960,6 @@ html|span.ac-emphasize-text-url {
|
||||
max-height: 16px;
|
||||
}
|
||||
|
||||
/* bookmarks menu-button */
|
||||
|
||||
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-appearance: none !important;
|
||||
-moz-box-align: center;
|
||||
}
|
||||
|
||||
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-icon,
|
||||
#bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menu-dropmarker,
|
||||
#bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker,
|
||||
#bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled] > .toolbarbutton-icon {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
#BMB_bookmarksPopup[side="top"],
|
||||
#BMB_bookmarksPopup[side="bottom"] {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
}
|
||||
|
||||
#BMB_bookmarksPopup[side="left"],
|
||||
#BMB_bookmarksPopup[side="right"] {
|
||||
margin-top: -16px;
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > menupopup[side="top"].cui-widget-panel,
|
||||
#nav-bar .toolbarbutton-1 > menupopup[side="bottom"].cui-widget-panel {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
/* Bookmarking panel */
|
||||
#editBookmarkPanelStarIcon {
|
||||
list-style-image: url("chrome://browser/skin/places/starred48.png");
|
||||
|
||||
@ -4,10 +4,6 @@
|
||||
|
||||
%include ../shared/compacttheme.inc.css
|
||||
|
||||
:root {
|
||||
--forwardbutton-width: 29px;
|
||||
}
|
||||
|
||||
:root:-moz-lwtheme-darktext {
|
||||
--urlbar-dropmarker-url: url("chrome://browser/skin/compacttheme/urlbar-history-dropmarker.svg");
|
||||
--urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
|
||||
@ -37,40 +33,6 @@
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Allow buttons with -moz-appearance set to look normal on hover and open states */
|
||||
#navigator-toolbox .toolbarbutton-1:-moz-any(:hover, [open="true"]),
|
||||
#PlacesToolbar toolbarbutton.bookmark-item:-moz-any(:hover, [open="true"]) {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
/* Square back and forward buttons */
|
||||
#back-button > .toolbarbutton-icon,
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
margin: 0;
|
||||
border: 1px solid var(--chrome-nav-bar-controls-border-color);
|
||||
padding: 2px 5px;
|
||||
background: var(--chrome-nav-buttons-background);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
border-inline-start: none;
|
||||
}
|
||||
|
||||
/* Override a box shadow for disabled back button */
|
||||
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
|
||||
#forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
|
||||
background: var(--chrome-nav-buttons-hover-background) !important;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon {
|
||||
border-radius: 2px 0 0 2px !important;
|
||||
}
|
||||
|
||||
.urlbar-history-dropmarker {
|
||||
-moz-appearance: none;
|
||||
padding: 0 3px;
|
||||
|
||||
@ -56,7 +56,6 @@ browser.jar:
|
||||
skin/classic/browser/places/bookmarksMenu.png (places/bookmarksMenu.png)
|
||||
skin/classic/browser/places/bookmarksToolbar.png (places/bookmarksToolbar.png)
|
||||
skin/classic/browser/places/bookmarksToolbar-menuPanel.png (places/bookmarksToolbar-menuPanel.png)
|
||||
skin/classic/browser/places/bookmarks-notification-finish.png (places/bookmarks-notification-finish.png)
|
||||
skin/classic/browser/places/bookmarks-menu-arrow.png (places/bookmarks-menu-arrow.png)
|
||||
skin/classic/browser/places/calendar.png (places/calendar.png)
|
||||
* skin/classic/browser/places/editBookmarkOverlay.css (places/editBookmarkOverlay.css)
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
File diff suppressed because it is too large
Load Diff
@ -4,10 +4,6 @@
|
||||
|
||||
%include ../shared/compacttheme.inc.css
|
||||
|
||||
:root {
|
||||
--forwardbutton-width: 32px;
|
||||
}
|
||||
|
||||
/* Use only 1px separator between nav toolbox and page content */
|
||||
#navigator-toolbox::after {
|
||||
border-top-style: none;
|
||||
@ -38,60 +34,6 @@
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Square back and forward buttons. Need !important on these because there
|
||||
are a lot of more specific selectors sprinkled around elsewhere for changing
|
||||
background / shadows for different states */
|
||||
#back-button,
|
||||
#forward-button {
|
||||
height: 24px !important;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
|
||||
background: var(--chrome-nav-buttons-background) !important;
|
||||
}
|
||||
|
||||
#forward-button {
|
||||
border-inline-start: none !important;
|
||||
/* browser.css and friends set up the width of the button to be 32px.
|
||||
* They then set margin-left to -2px to ensure the button is not too wide
|
||||
* compared to the back button, and set padding-left to center the icon
|
||||
* correctly.
|
||||
* In our theme, the back and forward buttons are the same width, with the
|
||||
* back button being 32px with 1px border on both sides. To ensure the
|
||||
* forward button's content box looks like it is the same size with width
|
||||
* set to 32px and a 1px border on only 1 side, we overlap by 1px, so both
|
||||
* buttons end up with a content box that looks like it's 30px.
|
||||
*/
|
||||
margin-left: -1px;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#back-button:hover:not([disabled="true"]),
|
||||
#forward-button:hover:not([disabled="true"]) {
|
||||
background: var(--chrome-nav-buttons-hover-background) !important;
|
||||
}
|
||||
|
||||
#back-button {
|
||||
border-radius: 3px 0 0 3px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#back-button:hover:active:not([disabled="true"]) {
|
||||
-moz-image-region: rect(18px, 54px, 36px, 36px);
|
||||
}
|
||||
|
||||
/* Use smaller back button icon */
|
||||
@media (min-resolution: 2dppx) {
|
||||
#back-button:hover:active:not([disabled="true"]) {
|
||||
-moz-image-region: rect(36px, 108px, 72px, 72px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent the hover styling from on the identity icon from overlapping the
|
||||
urlbar border. */
|
||||
#identity-box {
|
||||
|
||||
@ -13,8 +13,6 @@ browser.jar:
|
||||
* skin/classic/browser/compacttheme.css
|
||||
skin/classic/browser/click-to-play-warning-stripes.png
|
||||
skin/classic/browser/Info.png
|
||||
skin/classic/browser/keyhole-circle.png
|
||||
skin/classic/browser/keyhole-circle@2x.png
|
||||
skin/classic/browser/subtle-pattern.png
|
||||
skin/classic/browser/menu-back.png
|
||||
skin/classic/browser/menu-forward.png
|
||||
@ -88,8 +86,6 @@ browser.jar:
|
||||
skin/classic/browser/places/bookmarksMenu.png (places/bookmarksMenu.png)
|
||||
skin/classic/browser/places/bookmarksToolbar.png (places/bookmarksToolbar.png)
|
||||
skin/classic/browser/places/bookmarksToolbar@2x.png (places/bookmarksToolbar@2x.png)
|
||||
skin/classic/browser/places/bookmarks-notification-finish.png (places/bookmarks-notification-finish.png)
|
||||
skin/classic/browser/places/bookmarks-notification-finish@2x.png (places/bookmarks-notification-finish@2x.png)
|
||||
skin/classic/browser/places/bookmarksToolbar-menuPanel.png (places/bookmarksToolbar-menuPanel.png)
|
||||
skin/classic/browser/places/bookmarksToolbar-menuPanel@2x.png (places/bookmarksToolbar-menuPanel@2x.png)
|
||||
skin/classic/browser/places/history.png (places/history.png)
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
67
browser/themes/shared/bookmarked-notification.inc.css
Normal file
67
browser/themes/shared/bookmarked-notification.inc.css
Normal file
@ -0,0 +1,67 @@
|
||||
/* ----- BOOKMARK STAR ANIMATION ----- */
|
||||
|
||||
@keyframes animation-bookmarkAdded {
|
||||
from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
|
||||
60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
|
||||
80% { opacity: 1; }
|
||||
to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes animation-bookmarkPulse {
|
||||
from { transform: scale(1); }
|
||||
50% { transform: scale(1.3); }
|
||||
to { transform: scale(1); }
|
||||
}
|
||||
|
||||
#bookmarked-notification-container {
|
||||
min-height: 1px;
|
||||
min-width: 1px;
|
||||
height: 1px;
|
||||
margin-bottom: -1px;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bookmarked-notification {
|
||||
background-size: 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#bookmarked-notification-dropmarker-anchor {
|
||||
z-index: -1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bookmarked-notification-dropmarker-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
|
||||
background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
|
||||
animation: animation-bookmarkAdded 800ms;
|
||||
animation-timing-function: ease, ease, ease;
|
||||
}
|
||||
|
||||
@media (min-resolution: 2dppx) {
|
||||
#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
|
||||
background-image: url("chrome://browser/skin/places/bookmarks-notification-finish@2x.png");
|
||||
}
|
||||
}
|
||||
|
||||
#bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
list-style-image: none !important;
|
||||
}
|
||||
|
||||
#bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
|
||||
visibility: visible;
|
||||
animation: animation-bookmarkPulse 300ms;
|
||||
animation-delay: 600ms;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@ -12,6 +12,8 @@
|
||||
--space-above-tabbar: 0px;
|
||||
--toolbarbutton-text-shadow: none;
|
||||
--backbutton-urlbar-overlap: 0px;
|
||||
/* 18px icon + 2 * 5px padding + 1 * 1px border */
|
||||
--forwardbutton-width: 29px;
|
||||
}
|
||||
|
||||
:root:-moz-lwtheme-brighttext {
|
||||
@ -186,6 +188,67 @@ toolbar[brighttext] #downloads-indicator-counter {
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Back and forward button */
|
||||
|
||||
#back-button > .toolbarbutton-icon,
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
background: var(--chrome-nav-buttons-background) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: var(--toolbarbutton-vertical-inner-padding) 5px !important;
|
||||
margin: 0 !important;
|
||||
border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
|
||||
box-shadow: none !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon {
|
||||
/* 18px icon + 2 * 5px padding + 2 * 1px border */
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
/* the normal theme adds box-shadow: <stuff> !important when the back-button is [open]. Fix: */
|
||||
#back-button[open="true"] > .toolbarbutton-icon {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
border-inline-start: none !important;
|
||||
}
|
||||
|
||||
/* Override a box shadow for disabled back button */
|
||||
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override !important properties for hovered back button */
|
||||
#main-window #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
|
||||
#main-window #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
|
||||
background: var(--chrome-nav-buttons-hover-background) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon {
|
||||
border-radius: 2px 0 0 2px !important;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1:not([type=menu-button]),
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
#back-button:hover:active:not([disabled="true"]) {
|
||||
-moz-image-region: rect(18px, 54px, 36px, 36px);
|
||||
}
|
||||
|
||||
/* Use smaller back button icon */
|
||||
@media (min-resolution: 2dppx) {
|
||||
#back-button:hover:active:not([disabled="true"]) {
|
||||
-moz-image-region: rect(36px, 108px, 72px, 72px);
|
||||
}
|
||||
}
|
||||
|
||||
/* URL bar and search bar*/
|
||||
#urlbar,
|
||||
#navigator-toolbox .searchbar-textbox {
|
||||
|
||||
@ -110,6 +110,7 @@
|
||||
skin/classic/browser/tabbrowser/tab-audio-small.svg (../shared/tabbrowser/tab-audio-small.svg)
|
||||
skin/classic/browser/tabbrowser/tab-overflow-indicator.png (../shared/tabbrowser/tab-overflow-indicator.png)
|
||||
skin/classic/browser/toolbarbutton-dropdown-arrow.png (../shared/toolbarbutton-dropdown-arrow.png)
|
||||
skin/classic/browser/toolbarbutton-dropdown-arrow-inverted.png (../shared/toolbarbutton-dropdown-arrow-inverted.png)
|
||||
skin/classic/browser/translating-16.png (../shared/translation/translating-16.png)
|
||||
skin/classic/browser/translating-16@2x.png (../shared/translation/translating-16@2x.png)
|
||||
skin/classic/browser/translation-16.png (../shared/translation/translation-16.png)
|
||||
@ -132,6 +133,8 @@
|
||||
skin/classic/browser/panic-panel/header-small@2x.png (../shared/panic-panel/header-small@2x.png)
|
||||
skin/classic/browser/panic-panel/icons.png (../shared/panic-panel/icons.png)
|
||||
skin/classic/browser/panic-panel/icons@2x.png (../shared/panic-panel/icons@2x.png)
|
||||
skin/classic/browser/places/bookmarks-notification-finish.png (../shared/places/bookmarks-notification-finish.png)
|
||||
skin/classic/browser/places/bookmarks-notification-finish@2x.png (../shared/places/bookmarks-notification-finish@2x.png)
|
||||
skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css)
|
||||
skin/classic/browser/privatebrowsing/check.svg (../shared/privatebrowsing/check.svg)
|
||||
skin/classic/browser/privatebrowsing/favicon.svg (../shared/privatebrowsing/favicon.svg)
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 144 B After Width: | Height: | Size: 144 B |
375
browser/themes/shared/toolbarbuttons.inc.css
Normal file
375
browser/themes/shared/toolbarbuttons.inc.css
Normal file
@ -0,0 +1,375 @@
|
||||
/* 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/. */
|
||||
|
||||
%filter substitution
|
||||
%define toolbarShadowColor hsla(209,67%,12%,0.35)
|
||||
%define forwardTransitionLength 150ms
|
||||
%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
|
||||
|
||||
toolbar:-moz-lwtheme {
|
||||
--toolbarbutton-hover-background: rgba(255,255,255,.25);
|
||||
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
|
||||
|
||||
--toolbarbutton-active-background: rgba(70%,70%,70%,.25);
|
||||
--toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
|
||||
--toolbarbutton-active-boxshadow: 0 0 2px rgba(0,0,0,.6) inset;
|
||||
|
||||
--toolbarbutton-checkedhover-backgroundcolor: rgba(85%,85%,85%,.25);
|
||||
}
|
||||
|
||||
/* ::::: primary toolbar buttons ::::: */
|
||||
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
|
||||
opacity: var(--toolbarbutton-disabled-opacity);
|
||||
}
|
||||
|
||||
.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
|
||||
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
|
||||
}
|
||||
|
||||
toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
|
||||
toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png");
|
||||
}
|
||||
|
||||
.toolbarbutton-1 > .toolbarbutton-icon,
|
||||
.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon {
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon) > .toolbarbutton-icon,
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon,
|
||||
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
max-width: 18px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
||||
-moz-appearance: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1:not([type=menu-button]),
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
padding: 0 2px;
|
||||
-moz-box-pack: center;
|
||||
}
|
||||
|
||||
#nav-bar #PanelUI-menu-button {
|
||||
padding-inline-start: 5px;
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1[type=panel],
|
||||
#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > menupopup {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-appearance: none;
|
||||
padding-inline-start: 0;
|
||||
-moz-box-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.findbar-button > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
@conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
|
||||
padding: var(--toolbarbutton-vertical-inner-padding) 6px;
|
||||
background-origin: padding-box !important;
|
||||
background-clip: padding-box !important;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--toolbarbutton-border-radius);
|
||||
transition-property: background-color, border-color, box-shadow;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
/* horizontal padding + border + actual icon width */
|
||||
max-width: 32px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(ltr),
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(rtl) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(rtl),
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(ltr) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
border-inline-end-style: none;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
|
||||
#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
|
||||
#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
|
||||
#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
|
||||
padding-inline-end: 17px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
|
||||
/* horizontal padding + border + icon width */
|
||||
max-width: 43px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
|
||||
margin-inline-start: -15px;
|
||||
}
|
||||
|
||||
#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
/* horizontal padding + border + actual icon width */
|
||||
max-width: 31px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
padding-top: calc(var(--toolbarbutton-vertical-inner-padding) + 6px);
|
||||
padding-bottom: calc(var(--toolbarbutton-vertical-inner-padding) + 6px);
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-text {
|
||||
padding: var(--toolbarbutton-vertical-text-padding) 6px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbaritem-combined-buttons {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator,
|
||||
#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
|
||||
content: "";
|
||||
display: -moz-box;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
margin-inline-end: -1px;
|
||||
background-image: linear-gradient(currentColor 0, currentColor 100%);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1px 16px;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
#nav-bar[brighttext] .toolbaritem-combined-buttons > separator,
|
||||
#nav-bar[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.findbar-button {
|
||||
-moz-appearance: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
|
||||
@conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
|
||||
background: var(--toolbarbutton-hover-background);
|
||||
border-color: var(--toolbarbutton-hover-bordercolor);
|
||||
box-shadow: var(--toolbarbutton-hover-boxshadow);
|
||||
}
|
||||
|
||||
.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
|
||||
background: var(--toolbarbutton-active-background);
|
||||
border-color: var(--toolbarbutton-active-bordercolor);
|
||||
box-shadow: var(--toolbarbutton-active-boxshadow);
|
||||
transition-duration: 10ms;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
|
||||
background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
|
||||
transition: background-color .4s;
|
||||
}
|
||||
|
||||
#TabsToolbar .toolbarbutton-1,
|
||||
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-up,
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-down {
|
||||
-moz-appearance: none;
|
||||
border-style: none;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
#TabsToolbar .toolbarbutton-1 {
|
||||
margin-bottom: var(--tab-toolbar-navbar-overlap);
|
||||
}
|
||||
|
||||
#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
|
||||
#TabsToolbar .toolbarbutton-1[open],
|
||||
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
|
||||
background-image: linear-gradient(transparent, rgba(255,255,255,.5)),
|
||||
linear-gradient(transparent, rgba(0,0,0,.25) 30%),
|
||||
linear-gradient(transparent, rgba(0,0,0,.25) 30%);
|
||||
background-position: 1px -1px, 0 -1px, 100% -1px;
|
||||
background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* unified back/forward button */
|
||||
|
||||
:-moz-any(#back-button, #forward-button) > .toolbarbutton-icon {
|
||||
border-color: var(--backbutton-border-color) !important;
|
||||
}
|
||||
|
||||
:-moz-any(#back-button, #forward-button):not(:hover):not(:active):not([open=true]) > .toolbarbutton-icon,
|
||||
:-moz-any(#back-button, #forward-button)[disabled=true] > .toolbarbutton-icon {
|
||||
background: var(--backbutton-background) !important;
|
||||
}
|
||||
|
||||
#forward-button {
|
||||
-moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#forward-button > menupopup {
|
||||
margin-top: 1px !important;
|
||||
}
|
||||
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
border-left-style: none !important;
|
||||
border-radius: 0 !important;
|
||||
padding-left: calc(var(--backbutton-urlbar-overlap) + 3px) !important;
|
||||
padding-right: 3px !important;
|
||||
max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important;
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
|
||||
transition: margin-left @forwardTransitionLength@ ease-out;
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
|
||||
margin-left: calc(0px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
|
||||
/* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
|
||||
transition-delay: 100s;
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
|
||||
/* when not hovered anymore, trigger a new transition to hide the forward button immediately */
|
||||
margin-left: calc(-0.01px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||
}
|
||||
|
||||
#back-button {
|
||||
padding-top: 3px !important;
|
||||
padding-bottom: 3px !important;
|
||||
padding-inline-start: 5px !important;
|
||||
padding-inline-end: 0 !important;
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
border-radius: 0 10000px 10000px 0 !important;
|
||||
}
|
||||
|
||||
#back-button:-moz-locale-dir(rtl) {
|
||||
border-radius: 10000px 0 0 10000px !important;
|
||||
}
|
||||
|
||||
#back-button > menupopup {
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon {
|
||||
border-radius: 10000px !important;
|
||||
padding: 6px !important;
|
||||
max-width: 32px !important; /* icon width + horizontal padding + border */
|
||||
}
|
||||
|
||||
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
/* zoom control text (reset) button special case: */
|
||||
|
||||
#nav-bar #zoom-reset-button > .toolbarbutton-text {
|
||||
/* To make this line up with the icons, it needs the same height (18px) +
|
||||
* padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
|
||||
* increase in text sizes would break things...
|
||||
*/
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
/* bookmarks menu-button */
|
||||
|
||||
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-appearance: none !important;
|
||||
}
|
||||
|
||||
#bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
padding-top: var(--toolbarbutton-vertical-inner-padding);
|
||||
padding-bottom: var(--toolbarbutton-vertical-inner-padding);
|
||||
}
|
||||
|
||||
#BMB_bookmarksPopup[side="top"],
|
||||
#BMB_bookmarksPopup[side="bottom"] {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
#BMB_bookmarksPopup[side="left"],
|
||||
#BMB_bookmarksPopup[side="right"] {
|
||||
margin-top: -20px;
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
@ -10,10 +10,7 @@
|
||||
|
||||
%include ../shared/browser.inc
|
||||
%include windowsShared.inc
|
||||
%filter substitution
|
||||
%define toolbarShadowColor hsla(209,67%,12%,0.35)
|
||||
%define forwardTransitionLength 150ms
|
||||
%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
|
||||
|
||||
%include ../shared/browser.inc.css
|
||||
|
||||
@ -26,6 +23,9 @@
|
||||
--forwardbutton-width: 25px;
|
||||
|
||||
--toolbarbutton-vertical-inner-padding: 2px;
|
||||
--toolbarbutton-vertical-text-padding: var(--toolbarbutton-vertical-inner-padding);
|
||||
|
||||
--toolbarbutton-border-radius: 1px;
|
||||
|
||||
--toolbarbutton-hover-background: rgba(0,0,0,.1);
|
||||
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
|
||||
@ -37,6 +37,11 @@
|
||||
|
||||
--toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,.1);
|
||||
|
||||
--toolbarbutton-disabled-opacity: 0.4;
|
||||
--backbutton-border-color: var(--urlbar-border-color-hover);
|
||||
|
||||
--backbutton-background: rgba(255,255,255,.15);
|
||||
|
||||
--urlbar-dropmarker-url: url("chrome://browser/skin/urlbar-history-dropmarker.png");
|
||||
--urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
|
||||
--urlbar-dropmarker-hover-region: rect(0px, 22px, 14px, 11px);
|
||||
@ -71,17 +76,6 @@ toolbar[brighttext] {
|
||||
--toolbarbutton-checkedhover-backgroundcolor: rgba(255,255,255,.3);
|
||||
}
|
||||
|
||||
toolbar:-moz-lwtheme {
|
||||
--toolbarbutton-hover-background: rgba(255,255,255,.25);
|
||||
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
|
||||
|
||||
--toolbarbutton-active-background: rgba(70%,70%,70%,.25);
|
||||
--toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
|
||||
--toolbarbutton-active-boxshadow: 0 0 2px rgba(0,0,0,.6) inset;
|
||||
|
||||
--toolbarbutton-checkedhover-backgroundcolor: rgba(85%,85%,85%,.25);
|
||||
}
|
||||
|
||||
#menubar-items {
|
||||
-moz-box-orient: vertical; /* for flex hack */
|
||||
}
|
||||
@ -390,7 +384,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton),
|
||||
padding: 2px 3px;
|
||||
-moz-appearance: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 1px;
|
||||
border-radius: var(--toolbarbutton-border-radius);
|
||||
background-origin: padding-box !important;
|
||||
background-clip: padding-box !important;
|
||||
transition-property: background-color, border-color, box-shadow;
|
||||
@ -434,67 +428,6 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-p
|
||||
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
|
||||
}
|
||||
|
||||
/* ----- BOOKMARK STAR ANIMATION ----- */
|
||||
|
||||
@keyframes animation-bookmarkAdded {
|
||||
from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
|
||||
60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
|
||||
80% { opacity: 1; }
|
||||
to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes animation-bookmarkPulse {
|
||||
from { transform: scale(1); }
|
||||
50% { transform: scale(1.3); }
|
||||
to { transform: scale(1); }
|
||||
}
|
||||
|
||||
#bookmarked-notification-container {
|
||||
min-height: 1px;
|
||||
min-width: 1px;
|
||||
height: 1px;
|
||||
margin-bottom: -1px;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bookmarked-notification {
|
||||
background-size: 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#bookmarked-notification-dropmarker-anchor {
|
||||
z-index: -1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bookmarked-notification-dropmarker-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
|
||||
background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
|
||||
animation: animation-bookmarkAdded 800ms;
|
||||
animation-timing-function: ease, ease, ease;
|
||||
}
|
||||
|
||||
#bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
list-style-image: none !important;
|
||||
}
|
||||
|
||||
#bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
|
||||
visibility: visible;
|
||||
animation: animation-bookmarkPulse 300ms;
|
||||
animation-delay: 600ms;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
/* ::::: bookmark menus ::::: */
|
||||
|
||||
menu.bookmark-item,
|
||||
@ -576,111 +509,12 @@ menuitem.bookmark-item {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ::::: primary toolbar buttons ::::: */
|
||||
|
||||
%include ../shared/bookmarked-notification.inc.css
|
||||
%include ../shared/toolbarbuttons.inc.css
|
||||
%include ../shared/toolbarbutton-icons.inc.css
|
||||
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
|
||||
#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
|
||||
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
|
||||
}
|
||||
|
||||
toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
|
||||
toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png");
|
||||
}
|
||||
|
||||
.toolbarbutton-1 > .toolbarbutton-icon,
|
||||
.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1 > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon {
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon) > .toolbarbutton-icon,
|
||||
:-moz-any(toolbar, .widget-overflow-list) .toolbarbutton-1:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon) > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon,
|
||||
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
max-width: 18px;
|
||||
}
|
||||
|
||||
%include ../shared/menupanel.inc.css
|
||||
|
||||
.findbar-button,
|
||||
#nav-bar .toolbarbutton-1,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
||||
-moz-appearance: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1:not([type=menu-button]),
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
padding: 0 2px;
|
||||
-moz-box-pack: center;
|
||||
}
|
||||
|
||||
#nav-bar #PanelUI-menu-button {
|
||||
padding-inline-start: 5px;
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1[type=panel],
|
||||
#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > menupopup {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
padding-inline-start: 0;
|
||||
-moz-box-align: center;
|
||||
}
|
||||
|
||||
.findbar-button > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
@conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
|
||||
padding: var(--toolbarbutton-vertical-inner-padding) 6px;
|
||||
background-origin: padding-box !important;
|
||||
background-clip: padding-box !important;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 1px;
|
||||
transition-property: background-color, border-color, box-shadow;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
/* horizontal padding + border + actual icon width */
|
||||
max-width: 32px;
|
||||
}
|
||||
|
||||
@media (-moz-os-version: windows-win7) {
|
||||
:root {
|
||||
--toolbarbutton-hover-background: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
|
||||
@ -701,216 +535,6 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
}
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(ltr),
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(rtl) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(rtl),
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(ltr) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
border-inline-end-style: none;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
|
||||
#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
|
||||
#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
|
||||
#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
|
||||
padding-inline-end: 17px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
|
||||
/* horizontal padding + border + icon width */
|
||||
max-width: 43px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
|
||||
margin-inline-start: -15px;
|
||||
}
|
||||
|
||||
#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
||||
/* horizontal padding + border + actual icon width */
|
||||
max-width: 31px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
padding-top: calc(var(--toolbarbutton-vertical-inner-padding) + 6px);
|
||||
padding-bottom: calc(var(--toolbarbutton-vertical-inner-padding) + 6px);
|
||||
}
|
||||
|
||||
#nav-bar .toolbaritem-combined-buttons {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator,
|
||||
#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
|
||||
content: "";
|
||||
display: -moz-box;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
margin-inline-end: -1px;
|
||||
background-image: linear-gradient(currentColor 0, currentColor 100%);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1px 16px;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
#nav-bar[brighttext] .toolbaritem-combined-buttons > separator,
|
||||
#nav-bar[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
|
||||
@conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
|
||||
background: var(--toolbarbutton-hover-background);
|
||||
border-color: var(--toolbarbutton-hover-bordercolor);
|
||||
box-shadow: var(--toolbarbutton-hover-boxshadow);
|
||||
}
|
||||
|
||||
.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
|
||||
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
|
||||
background: var(--toolbarbutton-active-background);
|
||||
border-color: var(--toolbarbutton-active-bordercolor);
|
||||
box-shadow: var(--toolbarbutton-active-boxshadow);
|
||||
transition-duration: 10ms;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
|
||||
background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
|
||||
transition: background-color .4s;
|
||||
}
|
||||
|
||||
#TabsToolbar .toolbarbutton-1,
|
||||
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-up,
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-down {
|
||||
-moz-appearance: none;
|
||||
border-style: none;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
#TabsToolbar .toolbarbutton-1 {
|
||||
margin-bottom: var(--tab-toolbar-navbar-overlap);
|
||||
}
|
||||
|
||||
#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
|
||||
#TabsToolbar .toolbarbutton-1[open],
|
||||
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
|
||||
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
|
||||
background-image: linear-gradient(transparent, rgba(255,255,255,.5)),
|
||||
linear-gradient(transparent, rgba(0,0,0,.25) 30%),
|
||||
linear-gradient(transparent, rgba(0,0,0,.25) 30%);
|
||||
background-position: 1px -1px, 0 -1px, 100% -1px;
|
||||
background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* unified back/forward button */
|
||||
|
||||
:-moz-any(#back-button, #forward-button) > .toolbarbutton-icon {
|
||||
border-color: var(--urlbar-border-color-hover) !important;
|
||||
}
|
||||
|
||||
:-moz-any(#back-button, #forward-button):not(:hover):not(:active):not([open=true]) > .toolbarbutton-icon,
|
||||
:-moz-any(#back-button, #forward-button)[disabled=true] > .toolbarbutton-icon {
|
||||
background-color: rgba(255,255,255,.15) !important;
|
||||
}
|
||||
|
||||
#forward-button {
|
||||
-moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#forward-button > menupopup {
|
||||
margin-top: 1px !important;
|
||||
}
|
||||
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
border-left-style: none !important;
|
||||
border-radius: 0 !important;
|
||||
padding-left: calc(var(--backbutton-urlbar-overlap) + 3px) !important;
|
||||
padding-right: 3px !important;
|
||||
max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important;
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
|
||||
transition: margin-left @forwardTransitionLength@ ease-out;
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
|
||||
margin-left: calc(0px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
|
||||
/* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
|
||||
transition-delay: 100s;
|
||||
}
|
||||
|
||||
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
|
||||
/* when not hovered anymore, trigger a new transition to hide the forward button immediately */
|
||||
margin-left: calc(-0.01px - var(--forwardbutton-width) - var(--backbutton-urlbar-overlap));
|
||||
}
|
||||
|
||||
#back-button {
|
||||
padding-top: 3px !important;
|
||||
padding-bottom: 3px !important;
|
||||
padding-inline-start: 5px !important;
|
||||
padding-inline-end: 0 !important;
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
border-radius: 0 10000px 10000px 0 !important;
|
||||
}
|
||||
|
||||
#back-button:-moz-locale-dir(rtl) {
|
||||
border-radius: 10000px 0 0 10000px !important;
|
||||
}
|
||||
|
||||
#back-button > menupopup {
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon {
|
||||
border-radius: 10000px !important;
|
||||
padding: 6px !important;
|
||||
max-width: 32px !important; /* icon width + horizontal padding + border */
|
||||
}
|
||||
|
||||
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
|
||||
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
|
||||
list-style-image: url("chrome://browser/skin/menu-back.png") !important;
|
||||
@ -921,16 +545,6 @@ toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
|
||||
}
|
||||
|
||||
/* zoom control text (reset) button special case: */
|
||||
|
||||
#nav-bar #zoom-reset-button > .toolbarbutton-text {
|
||||
/* To make this line up with the icons, it needs the same height (18px) +
|
||||
* padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
|
||||
* increase in text sizes would break things...
|
||||
*/
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
/* ::::: fullscreen window controls ::::: */
|
||||
|
||||
#minimize-button,
|
||||
@ -1763,25 +1377,6 @@ html|span.ac-emphasize-text-url {
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
|
||||
/* bookmarks menu-button */
|
||||
|
||||
#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
|
||||
padding-top: var(--toolbarbutton-vertical-inner-padding);
|
||||
padding-bottom: var(--toolbarbutton-vertical-inner-padding);
|
||||
}
|
||||
|
||||
#BMB_bookmarksPopup[side="top"],
|
||||
#BMB_bookmarksPopup[side="bottom"] {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
#BMB_bookmarksPopup[side="left"],
|
||||
#BMB_bookmarksPopup[side="right"] {
|
||||
margin-top: -20px;
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
/* bookmarking panel */
|
||||
|
||||
#editBookmarkPanelStarIcon {
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
%include ../shared/compacttheme.inc.css
|
||||
|
||||
:root {
|
||||
--forwardbutton-width: 29px;
|
||||
/* Matches the #browser-border-start, #browser-border-end color */
|
||||
--chrome-nav-bar-separator-color: rgba(10, 31, 51, 0.35);
|
||||
}
|
||||
@ -35,59 +34,6 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon,
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
background: var(--chrome-nav-buttons-background) !important;
|
||||
border-radius: 0 !important;
|
||||
height: auto !important;
|
||||
padding: var(--toolbarbutton-vertical-inner-padding) 5px !important;
|
||||
margin: 0 !important;
|
||||
border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon {
|
||||
/* 18px icon + 2 * 5px padding + 2 * 1px border */
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
/* 18px icon + 2 * 5px padding + 1 * 1px border */
|
||||
width: 29px !important;
|
||||
}
|
||||
|
||||
/* the normal theme adds box-shadow: <stuff> !important when the back-button is [open]. Fix: */
|
||||
#back-button[open="true"] > .toolbarbutton-icon {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#forward-button > .toolbarbutton-icon {
|
||||
border-inline-start: none !important;
|
||||
}
|
||||
|
||||
/* Override a box shadow for disabled back button */
|
||||
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override !important properties for hovered back button */
|
||||
#main-window #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
|
||||
#main-window #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
|
||||
background: var(--chrome-nav-buttons-hover-background) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#back-button > .toolbarbutton-icon {
|
||||
border-radius: 2px 0 0 2px !important;
|
||||
}
|
||||
|
||||
#nav-bar .toolbarbutton-1:not([type=menu-button]),
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
|
||||
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
background-color: var(--tab-background-color);
|
||||
}
|
||||
|
||||
@ -48,7 +48,6 @@ browser.jar:
|
||||
skin/classic/browser/Toolbar-win8.png
|
||||
skin/classic/browser/Toolbar-win8@2x.png
|
||||
skin/classic/browser/toolbarbutton-dropdown-arrow-win7.png
|
||||
skin/classic/browser/toolbarbutton-dropdown-arrow-inverted.png
|
||||
skin/classic/browser/urlbar-popup-blocked.png
|
||||
skin/classic/browser/urlbar-history-dropmarker.png
|
||||
skin/classic/browser/urlbar-history-dropmarker@2x.png
|
||||
@ -80,7 +79,6 @@ browser.jar:
|
||||
skin/classic/browser/places/bookmarksMenu.png (places/bookmarksMenu.png)
|
||||
skin/classic/browser/places/bookmarksToolbar.png (places/bookmarksToolbar.png)
|
||||
skin/classic/browser/places/bookmarksToolbar-menuPanel.png (places/bookmarksToolbar-menuPanel.png)
|
||||
skin/classic/browser/places/bookmarks-notification-finish.png (places/bookmarks-notification-finish.png)
|
||||
skin/classic/browser/places/calendar.png (places/calendar.png)
|
||||
skin/classic/browser/places/toolbarDropMarker.png (places/toolbarDropMarker.png)
|
||||
skin/classic/browser/places/editBookmarkOverlay.css (places/editBookmarkOverlay.css)
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
@ -15,7 +15,6 @@
|
||||
%define scopeBarSeparatorBorder 1px solid #888
|
||||
%define scopeBarTitleColor #6D6D6D
|
||||
|
||||
%define toolbarbuttonCornerRadius 3px
|
||||
%define toolbarbuttonBackground linear-gradient(#FFF, #ADADAD) repeat-x
|
||||
%define toolbarbuttonPressedInnerShadow inset rgba(0, 0, 0, 0.3) 0 -6px 10px, inset #000 0 1px 3px, inset rgba(0, 0, 0, 0.2) 0 1px 3px
|
||||
%define toolbarbuttonInactiveBorderColor rgba(146, 146, 146, 0.84)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user