commit b347ab435c66ed0f0a9fe6b5ddb77d42eb9684b3
parent bbf4367a90b49c1c12398c5bc7009f7759d8693d
Author: Lootyhoof <lootyhoofer@gmail.com>
Date: Mon, 27 Jun 2016 21:22:41 +0100
Add v26 styling to main browser
Diffstat:
1 file changed, 230 insertions(+), 1 deletion(-)
diff --git a/src/chrome/ostarget/aero/browser.css b/src/chrome/ostarget/aero/browser.css
@@ -1,5 +1,4 @@
@import url("chrome://global/skin/");
-@import url("chrome://appver/skin/browser.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@@ -245,6 +244,236 @@ menuitem.bookmark-item {
}
@media all and (-moz-windows-compositor) {
+ #main-window {
+ -moz-appearance: -moz-win-glass;
+ }
+
+ /* On win 10, if we don't set this on the entire browser container, including
+ * the sidebar, then the accent color bleeds through in the titlebar
+ * if the sidebar is open. */
+ #browser {
+ -moz-appearance: -moz-win-exclude-glass;
+ }
+
+/* ==== Windows 10 styling ==== */
+
+ @media (-moz-os-version: windows-win10) {
+ /* Draw XUL caption buttons on Win10 */
+ #appmenu-button {
+ margin-top: -1px !important;
+ margin-bottom: 5px !important;
+ }
+
+ #tabbrowser-tabs {
+ min-height: 28px;
+ }
+
+ #titlebar-buttonbox,
+ .titlebar-button {
+ -moz-appearance: none !important;
+ }
+
+ .titlebar-button {
+ border: none;
+ margin: 0 !important;
+ padding: 8px 17px;
+ }
+
+ #main-window[sizemode=maximized] .titlebar-button {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ }
+
+ .titlebar-button > .toolbarbutton-icon {
+ width: 12px;
+ height: 12px;
+ }
+
+ #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox {
+ margin-top: -4px;
+ }
+
+ #titlebar-min {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highlight);
+ }
+
+ #titlebar-max {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highlight);
+ }
+
+ #main-window[sizemode="maximized"] #titlebar-max {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highlight);
+ }
+
+ #titlebar-close {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight);
+ }
+ #titlebar-close:hover {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight);
+ }
+
+ /* light persona */
+ #titlebar-min:-moz-lwtheme-darktext {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline);
+ }
+ #titlebar-max:-moz-lwtheme-darktext {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline);
+ }
+ #main-window[sizemode="maximized"]:-moz-lwtheme-darktext #titlebar-max:-moz-lwtheme-darktext {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline);
+ }
+ #titlebar-close:-moz-lwtheme-darktext {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline);
+ }
+ #titlebar-close:hover:-moz-lwtheme-darktext {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline);
+ }
+
+ /* dark persona */
+ #titlebar-min:-moz-lwtheme-brighttext {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline-inverted);
+ }
+ #titlebar-max:-moz-lwtheme-brighttext {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline-inverted);
+ }
+ #main-window[sizemode="maximized"]:-moz-lwtheme-brighttext #titlebar-max:-moz-lwtheme-brighttext {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline-inverted);
+ }
+ #titlebar-close:-moz-lwtheme-brighttext {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted);
+ }
+ #titlebar-close:hover:-moz-lwtheme-brighttext {
+ list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted);
+ }
+
+ /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
+ * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
+ @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
+ .titlebar-button > .toolbarbutton-icon {
+ width: 11.5px;
+ height: 11.5px;
+ }
+ }
+
+ /* 175% dpi should result in the same device pixel sizes as 150% dpi. */
+ @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
+ .titlebar-button {
+ padding-left: 14.1px;
+ padding-right: 14.1px;
+ }
+
+ .titlebar-button > .toolbarbutton-icon {
+ width: 10.8px;
+ height: 10.8px;
+ }
+ }
+
+ /* 225% dpi should result in the same device pixel sizes as 200% dpi. */
+ @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
+ .titlebar-button {
+ padding-left: 15.3333px;
+ padding-right: 15.3333px;
+ }
+
+ .titlebar-button > .toolbarbutton-icon {
+ width: 10.8px;
+ height: 10.8px;
+ }
+ }
+
+ /* 275% dpi should result in the same device pixel sizes as 250% dpi. */
+ @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
+ .titlebar-button > .toolbarbutton-icon {
+ width: 10.8px;
+ height: 10.8px;
+ }
+ }
+
+ .titlebar-button:hover {
+ background-color: hsla(0, 0%, 255%, .22);
+ }
+
+ .titlebar-button:hover:active {
+ background-color: hsla(0, 0%, 255%, .32);
+ }
+
+ .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
+ opacity: 0.5;
+ }
+
+ #titlebar-close:hover {
+ background-color: hsl(355, 86%, 49%);
+ }
+
+ #titlebar-close:hover:active {
+ background-color: hsl(355, 82%, 69%);
+ }
+
+ /* light persona */
+ .titlebar-button:-moz-lwtheme-darktext:hover {
+ background-color: hsla(0, 0%, 0%, .12);
+ }
+
+ .titlebar-button:-moz-lwtheme-darktext:hover:active {
+ background-color: hsla(0, 0%, 100%, .22);
+ }
+ }
+
+/* ==== Windows Vista/7/8 styling ==== */
+
+ @media (-moz-os-version: windows-vista),
+ (-moz-os-version: windows-win7),
+ (-moz-os-version: windows-win8) {
+ /* Make sure the native margins are correct on Win Vista/7/8.
+ * We can't use -moz-win-glass there because the border sizing would
+ * not be correct. */
+ #main-window {
+ -moz-appearance: -moz-win-borderless-glass;
+ }
+
+ /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
+ .titlebar-button {
+ display: none;
+ }
+
+ /* The borders on the glass frame are ours, and inside #browser, and on
+ * vista and win7 we want to make sure they are "glassy", so we can't use
+ * #browser as the exclude-glass container. We use #appcontent instead. */
+ #browser {
+ -moz-appearance: none;
+ }
+
+ #appcontent {
+ -moz-appearance: -moz-win-exclude-glass;
+ }
+
+ #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox {
+ margin-top: -7px;
+ }
+
+ /* Artificially draw window borders that are covered by lwtheme, see bug 591930. */
+ #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme {
+ border-top: 2px solid;
+ -moz-border-top-colors: rgb(37, 44, 51) rgba(255,255,255,.6);
+ }
+
+ #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme:-moz-window-inactive {
+ -moz-border-top-colors: rgb(102, 102, 102) rgba(255,255,255,.6);
+ }
+
+ #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container:-moz-lwtheme {
+ margin-top: -1px;
+ }
+
+ #main-window[sizemode="normal"] #titlebar-buttonbox:-moz-lwtheme {
+ margin-top: -2px;
+ }
+
+ #appmenu-button {
+ margin-bottom: -1px;
+ }
+ }
+
@media (-moz-os-version: windows-vista),
(-moz-os-version: windows-win7),
(-moz-os-version: windows-win8) {
