Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-24 05:11:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1365195 - [Photon] Implement new back button appearance. r=dao

Browse Source 
MozReview-Commit-ID: LaRZ69EwsjM

--HG--
extra : rebase_source : 7a143ffddfcdbc4e471b65eb04a7569a77b99bff
This commit is contained in:
Nihanth Subramanya 2017-05-17 17:22:14 +05:30
parent b1c8de4969
commit 8596da092a
4 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
browser/themes/linux/browser.css
View File

@ -16,13 +16,13 @@
%include ../shared/browser.inc.css
:root {
--backbutton-border-color: var(--urlbar-border-color-hover);
--backbutton-background: rgba(255,255,255,.15);
%ifdef MOZ_PHOTON_THEME
--toolbarbutton-border-radius: 2px;
%else
--toolbarbutton-border-radius: 1px;
--backbutton-background: rgba(255,255,255,.15);
--backbutton-border-color: var(--urlbar-border-color-hover);
%endif
--toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);

10
browser/themes/osx/browser.css
View File

@ -18,10 +18,6 @@
--space-above-tabbar: 9px;
--tabs-toolbar-color: #333;
--backbutton-border-color: rgba(0,0,0,0.2);
--backbutton-background: linear-gradient(rgba(255,255,255,0.9),
rgba(255,255,255,0.7)) repeat-x;
--toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
%ifdef MOZ_PHOTON_THEME
@ -31,6 +27,10 @@
--toolbarbutton-hover-background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
--toolbarbutton-active-background: hsla(0,0%,0%,.02) linear-gradient(hsla(0,0%,0%,.12), transparent) border-box;
--backbutton-border-color: rgba(0,0,0,0.2);
--backbutton-background: linear-gradient(rgba(255,255,255,0.9),
rgba(255,255,255,0.7)) repeat-x;
%endif
--toolbarbutton-hover-bordercolor: hsla(0,0%,0%,.2);
@ -59,12 +59,14 @@
--urlbar-separator-color: hsla(0,0%,16%,.2);
}
%ifndef MOZ_PHOTON_THEME
toolbar:-moz-lwtheme {
--backbutton-background: linear-gradient(rgba(255,255,255,0.5),
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.1) 50%,
rgba(255,255,255,0.2)) repeat-x;
}
%endif
#urlbar:-moz-lwtheme:not([focused="true"]),
.searchbar-textbox:-moz-lwtheme:not([focused="true"]) {

23
browser/themes/shared/toolbarbuttons.inc.css
View File

@ -15,6 +15,10 @@
--toolbarbutton-active-background: hsla(240,5%,5%,.15);
--toolbarbutton-inner-padding: 6px;
--backbutton-background: hsla(0,100%,100%,.8);
--backbutton-border-color: hsla(240,5%,5%,.3);
%else
--backbutton-urlbar-overlap: 6px;
@ -39,6 +43,12 @@ toolbar:-moz-lwtheme {
--toolbarbutton-checkedhover-backgroundcolor: rgba(85%,85%,85%,.25);
}
%ifdef MOZ_PHOTON_THEME
toolbar[brighttext] {
--backbutton-background: hsla(240,5%,5%,.1);
}
%endif
/* ::::: primary toolbar buttons ::::: */
.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled=true],
@ -361,6 +371,19 @@ toolbarbutton.bookmark-item[open="true"],
padding: 7px !important;
}
%ifdef MOZ_PHOTON_THEME
#back-button:not([disabled]):hover > .toolbarbutton-icon {
background: var(--backbutton-background) !important;
box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
border-color: hsla(240,5%,5%,.35);
}
#back-button:not([disabled]):hover:active > .toolbarbutton-icon {
background: var(--toolbarbutton-active-background) !important;
border-color: hsla(240,5%,5%,.40);
}
%endif
/* bookmarks menu-button */
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {

7
browser/themes/windows/browser.css
View File

@ -26,6 +26,9 @@
--toolbarbutton-hover-background: rgba(0,0,0,.1);
--toolbarbutton-active-background: rgba(0,0,0,.15);
--backbutton-border-color: var(--urlbar-border-color-hover);
--backbutton-background: rgba(255,255,255,.15);
%endif
--toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
@ -36,10 +39,6 @@
--toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,.1);
--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);