From 890e652e371bd79cc92d88ee3b17156463944857 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Mon, 17 Apr 2017 21:27:28 +0800 Subject: [PATCH] Fixes that applies ONLY for uncomposited window Toolbar button radius no longer applies to titlebar button Improve menubar styling (no longer uses ugly text shadow) Address the titlebar -> nav toolbar overlapping when toolbarizer addon is enabled (tradeoff: larger gap when app menu is available) Titlebar border appearance improved (these changes may not apply to other platform(s)) --- src/chrome/browser/browser.css | 38 ++++++++++++++++++++--------- src/chrome/global/toolbarbutton.css | 12 ++++----- src/chrome/os/winnt/menu.css | 6 +++-- 3 files changed, 37 insertions(+), 19 deletions(-) diff --git a/src/chrome/browser/browser.css b/src/chrome/browser/browser.css index 8788814..0617992 100644 --- a/src/chrome/browser/browser.css +++ b/src/chrome/browser/browser.css @@ -353,6 +353,16 @@ margin-top: 3px !important; margin-bottom: 8px !important; } + + /* fix for small gap on tabs to top caption */ + #navigator-toolbox[tabsontop=true] #tabbrowser-tabs { + margin-top: 6px; + } + /* nav. toolbox overlaps with window buttons + (when toolbarizer is enabled, tradeoff would be larger margin when appmenu is visible) */ + #navigator-toolbox[tabsontop=false] { + padding-top: 11px; + } #appmenu-button:hover:not(:active):not([open]) { background-color: rgba(255,255,255,.3); @@ -376,6 +386,19 @@ #main-window[privatebrowsingmode=temporary] #appmenu-button[open] { background-color: rgb(158,2,255); } + + /* use diff. color for private browsing menu item */ + #main-window[privatebrowsingmode=temporary] menubar > menu { + color: white; + } + + #main-window[privatebrowsingmode=temporary] menubar > menu[_moz-menuactive="true"][open="true"] { + background: rgba(255, 255, 255, 0.2); + } + + #main-window[privatebrowsingmode=temporary] menubar > menu[_moz-menuactive="true"]:not([disabled="true"]) { + background-color: rgba(255, 255, 255, 0.1); + } } .tab-drag-preview::before { @@ -3230,6 +3253,7 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon { } #main-window[privatebrowsingmode=temporary] #navigator-toolbox[tabsontop=false] #TabsToolbar { + background-color: #505050; box-shadow: 0 -1px 0 #5D5D5D inset, 0 -2px 0 rgba(0,0,0,.28) inset; } @@ -3238,10 +3262,6 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon { background-color: #F1F1F1; } -#main-window[privatebrowsingmode=temporary] #navigator-toolbox[tabsontop=false] #TabsToolbar { - background-color: #505050; -} - .tabbrowser-tab:not(:-moz-lwtheme) { text-shadow: none; } @@ -3656,7 +3676,7 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon { #main-window[sizemode=normal] #titlebar-content:not(:-moz-lwtheme), #titlebar-content:not(:-moz-lwtheme) { padding-bottom: 0; - box-shadow: 0 -1px 0 0 #ACB7C4, 0 -2px 0 0 #3E3F3F; + box-shadow: 0 -1px 0 0 #E3E3E3, 0 -2px 0 0 #3E3F3F; } #main-window:-moz-window-inactive { @@ -3682,7 +3702,7 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon { #main-window[privatebrowsingmode=temporary][sizemode=normal] #titlebar-content:not(:-moz-lwtheme), #main-window[privatebrowsingmode=temporary] #titlebar-content:not(:-moz-lwtheme) { background-color: #282B2D; - box-shadow: 0 -1px 0 0 #8699B3, 0 -2px 0 0 #3E3F3F; + box-shadow: 0 -1px 0 0 #505050, 0 -2px 0 0 #3E3F3F; } #main-window[privatebrowsingmode=temporary]:-moz-window-inactive, @@ -3693,7 +3713,7 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon { #main-window[privatebrowsingmode=temporary][sizemode=normal]:-moz-window-inactive #titlebar-content:not(:-moz-lwtheme), #main-window[privatebrowsingmode=temporary]:-moz-window-inactive #titlebar-content:not(:-moz-lwtheme) { background-color: #383B3D; - box-shadow: 0 -1px 0 0 #ACB7C4, 0 -2px 0 0 #3E3F3F; + box-shadow: 0 -1px 0 0 #505050, 0 -2px 0 0 #3E3F3F; } #toolbar-menubar:not(:-moz-lwtheme), @@ -3715,10 +3735,6 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon { margin-top: 7px !important; margin-bottom: 0px !important; } - - #main-menubar { - text-shadow: 0px 0px 3px; - } } #toolbar-menubar:not([autohide=true]):not(:-moz-lwtheme), diff --git a/src/chrome/global/toolbarbutton.css b/src/chrome/global/toolbarbutton.css index 3f7fc0e..e89a64f 100644 --- a/src/chrome/global/toolbarbutton.css +++ b/src/chrome/global/toolbarbutton.css @@ -19,8 +19,8 @@ toolbarbutton { toolbarbutton { padding: 0 3px; - margin-top: 0px; - margin-bottom: 0px; + margin-top: 0px; + margin-bottom: 0px; background: transparent; background-clip: padding-box; border: 1px solid; @@ -31,6 +31,10 @@ toolbarbutton { transition-duration: 500ms; } +toolbarbutton:not(.titlebar-button) { + border-radius: 3px; +} + toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#PersonalToolbar):not(#addon-bar) toolbarbutton { padding: 0 1px; } @@ -68,9 +72,7 @@ toolbarbutton[type="menu-button"] > .toolbarbutton-menubutton-dropmarker { } toolbarbutton:not([open="true"]):not([checked="true"]):not([disabled="true"]):not(:active):hover { -/* border-image: url("chrome://global/skin/icons/browser_action_hot.png") 5 fill repeat stretch; */ border-image: none; - border-radius: 3px; background-color: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.1); } @@ -78,9 +80,7 @@ toolbarbutton:not([open="true"]):not([checked="true"]):not([disabled="true"]):no toolbarbutton:hover:active:not([disabled="true"]), toolbarbutton[checked="true"]:not([disabled="true"]), toolbarbutton[open="true"]:not([disabled="true"]) { -/* border-image: url("chrome://global/skin/icons/browser_action_pressed.png") 5 fill repeat stretch; */ border-image: none; - border-radius: 3px; background-color: rgba(0, 0, 0, 0.2); border-color: rgba(0, 0, 0, 0.2); } diff --git a/src/chrome/os/winnt/menu.css b/src/chrome/os/winnt/menu.css index 6823de4..3e1d9bf 100644 --- a/src/chrome/os/winnt/menu.css +++ b/src/chrome/os/winnt/menu.css @@ -104,6 +104,9 @@ menuitem.menuitem-iconic > .menu-iconic-left, /* ::::: menu/menuitems in menubar ::::: */ menubar > menu { + border-radius: 3px; + transition-property: background-color, border-color, box-shadow; + transition-duration: 500ms; border: 2px solid transparent; } @@ -113,7 +116,7 @@ menubar > menu[_moz-menuactive="true"]:not([disabled="true"]) { } menubar > menu[_moz-menuactive="true"][open="true"] { - border-width: 3px 1px 1px 3px; + background: rgba(0, 0, 0, 0.2); } menubar > menu:-moz-lwtheme { @@ -127,7 +130,6 @@ menubar > menu:-moz-lwtheme:not([disabled="true"]) { menubar > menu:-moz-lwtheme[_moz-menuactive="true"]:not([disabled="true"]) { background-color: rgba(0, 0, 0, 0.1); - color: Black !important; text-shadow: none; }