From eefbd6b0611a33142e16afb3230af89bc1374de9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A3o=20Gottwald?= Date: Tue, 21 Dec 2010 00:02:09 +0100 Subject: [PATCH] Bug 590073 - Classic specific styling of arrow panels. r=neil a=b --HG-- extra : rebase_source : 839d3bbda55d4fe2b06d99f9a06d6b4effad46e6 --- .../themes/gnomestripe/browser/browser.css | 6 - .../global/icons/panelarrow-horizontal.svg | 7 + .../global/icons/panelarrow-vertical.svg | 7 + toolkit/themes/gnomestripe/global/jar.mn | 2 + toolkit/themes/gnomestripe/global/popup.css | 55 ++++- .../global/arrow/panelarrow-horizontal.svg | 9 + .../global/arrow/panelarrow-vertical.svg | 9 + toolkit/themes/winstripe/global/jar.mn | 4 + toolkit/themes/winstripe/global/popup.css | 212 ++++++++++++------ 9 files changed, 228 insertions(+), 83 deletions(-) create mode 100644 toolkit/themes/gnomestripe/global/icons/panelarrow-horizontal.svg create mode 100644 toolkit/themes/gnomestripe/global/icons/panelarrow-vertical.svg create mode 100644 toolkit/themes/winstripe/global/arrow/panelarrow-horizontal.svg create mode 100644 toolkit/themes/winstripe/global/arrow/panelarrow-vertical.svg diff --git a/browser/themes/gnomestripe/browser/browser.css b/browser/themes/gnomestripe/browser/browser.css index def88b19b88c..e2e84205c8c7 100644 --- a/browser/themes/gnomestripe/browser/browser.css +++ b/browser/themes/gnomestripe/browser/browser.css @@ -1121,9 +1121,7 @@ toolbar[iconsize="small"] #feed-button { /* Notification popup */ #notification-popup { - margin: 4px 0; min-width: 280px; - padding: 10px; } .popup-notification-icon { @@ -1330,10 +1328,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } /* Bookmarking panel */ -#editBookmarkPanel { - padding: 4px; -} - #editBookmarkPanelStarIcon { list-style-image: url("chrome://browser/skin/places/starred48.png"); width: 48px; diff --git a/toolkit/themes/gnomestripe/global/icons/panelarrow-horizontal.svg b/toolkit/themes/gnomestripe/global/icons/panelarrow-horizontal.svg new file mode 100644 index 000000000000..c99cfb7521c3 --- /dev/null +++ b/toolkit/themes/gnomestripe/global/icons/panelarrow-horizontal.svg @@ -0,0 +1,7 @@ + + + + diff --git a/toolkit/themes/gnomestripe/global/icons/panelarrow-vertical.svg b/toolkit/themes/gnomestripe/global/icons/panelarrow-vertical.svg new file mode 100644 index 000000000000..111b51bfc59d --- /dev/null +++ b/toolkit/themes/gnomestripe/global/icons/panelarrow-vertical.svg @@ -0,0 +1,7 @@ + + + + diff --git a/toolkit/themes/gnomestripe/global/jar.mn b/toolkit/themes/gnomestripe/global/jar.mn index 6d2478184430..e6dce7543c7d 100644 --- a/toolkit/themes/gnomestripe/global/jar.mn +++ b/toolkit/themes/gnomestripe/global/jar.mn @@ -43,6 +43,8 @@ toolkit.jar: + skin/classic/global/icons/folder-item.png (icons/folder-item.png) + skin/classic/global/icons/loading_16.png (icons/loading_16.png) + skin/classic/global/icons/notloading_16.png (icons/notloading_16.png) ++ skin/classic/global/icons/panelarrow-horizontal.svg (icons/panelarrow-horizontal.svg) ++ skin/classic/global/icons/panelarrow-vertical.svg (icons/panelarrow-vertical.svg) + skin/classic/global/icons/resizer.png (icons/resizer.png) + skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) + skin/classic/global/icons/webconsole.png (icons/webconsole.png) diff --git a/toolkit/themes/gnomestripe/global/popup.css b/toolkit/themes/gnomestripe/global/popup.css index d93e1e4e5690..81b074204c74 100644 --- a/toolkit/themes/gnomestripe/global/popup.css +++ b/toolkit/themes/gnomestripe/global/popup.css @@ -49,11 +49,60 @@ panel { panel[type="arrow"] { -moz-transition: opacity 300ms; + -moz-appearance: none; } -.panel-arrowbox { - /* the arrows don't display properly on Linux so disable for now */ - display: none; +panel[type="arrow"][side="top"], +panel[type="arrow"][side="bottom"] { + margin-left: -23px; + margin-right: -23px; +} + +panel[type="arrow"][side="left"], +panel[type="arrow"][side="right"] { + margin-top: -23px; + margin-bottom: -23px; +} + +.panel-arrowcontent { + padding: 10px; + color: -moz-DialogText; + background: -moz-Dialog; + border: 1px solid ThreeDShadow; +} + +.panel-arrow[side="top"], +.panel-arrow[side="bottom"] { + list-style-image: url("chrome://global/skin/icons/panelarrow-vertical.svg"); + position: relative; + margin-left: 6px; + margin-right: 6px; +} + +.panel-arrow[side="top"] { + margin-bottom: -1px; +} + +.panel-arrow[side="bottom"] { + -moz-transform: scaleY(-1); + margin-top: -1px; +} + +.panel-arrow[side="left"], +.panel-arrow[side="right"] { + list-style-image: url("chrome://global/skin/icons/panelarrow-horizontal.svg"); + position: relative; + margin-top: 6px; + margin-bottom: 6px; +} + +.panel-arrow[side="left"] { + margin-right: -1px; +} + +.panel-arrow[side="right"] { + -moz-transform: scaleX(-1); + margin-left: -1px; } /* ::::: tooltip ::::: */ diff --git a/toolkit/themes/winstripe/global/arrow/panelarrow-horizontal.svg b/toolkit/themes/winstripe/global/arrow/panelarrow-horizontal.svg new file mode 100644 index 000000000000..bee242b1452f --- /dev/null +++ b/toolkit/themes/winstripe/global/arrow/panelarrow-horizontal.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/toolkit/themes/winstripe/global/arrow/panelarrow-vertical.svg b/toolkit/themes/winstripe/global/arrow/panelarrow-vertical.svg new file mode 100644 index 000000000000..9ccadd34577e --- /dev/null +++ b/toolkit/themes/winstripe/global/arrow/panelarrow-vertical.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/toolkit/themes/winstripe/global/jar.mn b/toolkit/themes/winstripe/global/jar.mn index 8b34f055d824..901e776d1353 100644 --- a/toolkit/themes/winstripe/global/jar.mn +++ b/toolkit/themes/winstripe/global/jar.mn @@ -80,6 +80,8 @@ toolkit.jar: skin/classic/global/arrow/panelarrow-up.png (arrow/panelarrow-up.png) skin/classic/global/arrow/panelarrow-down.png (arrow/panelarrow-down.png) skin/classic/global/arrow/panelarrow-horiz.png (arrow/panelarrow-horiz.png) + skin/classic/global/arrow/panelarrow-horizontal.svg (arrow/panelarrow-horizontal.svg) + skin/classic/global/arrow/panelarrow-vertical.svg (arrow/panelarrow-vertical.svg) skin/classic/global/checkbox/cbox-check.gif (checkbox/cbox-check.gif) skin/classic/global/checkbox/cbox-check-dis.gif (checkbox/cbox-check-dis.gif) skin/classic/global/console/console.css (console/console.css) @@ -257,6 +259,8 @@ toolkit.jar: skin/classic/aero/global/arrow/panelarrow-up.png (arrow/panelarrow-up-aero.png) skin/classic/aero/global/arrow/panelarrow-down.png (arrow/panelarrow-down-aero.png) skin/classic/aero/global/arrow/panelarrow-horiz.png (arrow/panelarrow-horiz-aero.png) + skin/classic/aero/global/arrow/panelarrow-horizontal.svg (arrow/panelarrow-horizontal.svg) + skin/classic/aero/global/arrow/panelarrow-vertical.svg (arrow/panelarrow-vertical.svg) skin/classic/aero/global/checkbox/cbox-check.gif (checkbox/cbox-check.gif) skin/classic/aero/global/checkbox/cbox-check-dis.gif (checkbox/cbox-check-dis.gif) * skin/classic/aero/global/console/console.css (console/console-aero.css) diff --git a/toolkit/themes/winstripe/global/popup.css b/toolkit/themes/winstripe/global/popup.css index c59a7ab81ed5..190ed57d5255 100644 --- a/toolkit/themes/winstripe/global/popup.css +++ b/toolkit/themes/winstripe/global/popup.css @@ -70,105 +70,169 @@ panel[type="arrow"] { -moz-transition: opacity 300ms; } -panel[type="arrow"][side="top"], -panel[type="arrow"][side="bottom"] { - margin-left: -25px; - margin-right: -25px; -} +%ifdef XP_WIN +@media not all and (-moz-windows-default-theme) { +%endif + panel[type="arrow"][side="top"], + panel[type="arrow"][side="bottom"] { + margin-left: -23px; + margin-right: -23px; + } -panel[type="arrow"][side="left"], -panel[type="arrow"][side="right"] { - margin-top: -25px; - margin-bottom: -25px; -} + panel[type="arrow"][side="left"], + panel[type="arrow"][side="right"] { + margin-top: -23px; + margin-bottom: -23px; + } -.panel-arrowcontent { - border-radius: 6px; + .panel-arrowcontent { + border-radius: 6px; + padding: 10px; + color: -moz-DialogText; + background: -moz-Dialog; + border: 1px solid ThreeDShadow; + } + + .panel-arrow[side="top"], + .panel-arrow[side="bottom"] { + list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg"); + position: relative; + margin-left: 6px; + margin-right: 6px; + } + + .panel-arrow[side="top"] { + margin-bottom: -1px; + } + + .panel-arrow[side="bottom"] { + -moz-transform: scaleY(-1); + margin-top: -1px; + } + + .panel-arrow[side="left"], + .panel-arrow[side="right"] { + list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg"); + position: relative; + margin-top: 6px; + margin-bottom: 6px; + } + + .panel-arrow[side="left"] { + margin-right: -1px; + } + + .panel-arrow[side="right"] { + -moz-transform: scaleX(-1); + margin-left: -1px; + } +%ifdef XP_WIN +} +%endif + +%ifdef XP_WIN +@media all and (-moz-windows-default-theme) { + panel[type="arrow"][side="top"], + panel[type="arrow"][side="bottom"] { + margin-left: -25px; + margin-right: -25px; + } + + panel[type="arrow"][side="left"], + panel[type="arrow"][side="right"] { + margin-top: -25px; + margin-bottom: -25px; + } + + .panel-arrowcontent { + border-radius: 6px; %ifdef WINSTRIPE_AERO - background-color: rgba(179,230,255,.35); - background-image: -moz-linear-gradient(rgba(250,253,255,.9), rgba(250,253,255,.75) 20px, rgba(250,253,255,.70) 39px, rgba(250,253,255,0) 41px, rgba(250,253,255,0)); - margin: 5px; - box-shadow: 0 0 0 1px rgba(255,255,255,.65) inset, - 0 1px 0 rgba(255,255,255,.3) inset, - 0 0 0 1px rgba(0,0,0,.75), - 0 1px 3px 2px rgba(0,0,0,.65); + background-color: rgba(179,230,255,.35); + background-image: -moz-linear-gradient(rgba(250,253,255,.9), rgba(250,253,255,.75) 20px, rgba(250,253,255,.70) 39px, rgba(250,253,255,0) 41px, rgba(250,253,255,0)); + margin: 5px; + box-shadow: 0 0 0 1px rgba(255,255,255,.65) inset, + 0 1px 0 rgba(255,255,255,.3) inset, + 0 0 0 1px rgba(0,0,0,.75), + 0 1px 3px 2px rgba(0,0,0,.65); %else - background: -moz-linear-gradient(rgba(250,251,253,.95), rgba(250,251,253,.95) 20px, rgba(250,251,253,.95)); - padding: 16px; - margin: 3px; - box-shadow: 0 0 5px 1px rgba(184,205,232,1) inset, - 0 0 0 1px rgba(0,0,0,.25), - 0 1px 5px rgba(0,0,0,.5); + background: -moz-linear-gradient(rgba(250,251,253,.95), rgba(250,251,253,.95) 20px, rgba(250,251,253,.95)); + padding: 16px; + margin: 3px; + box-shadow: 0 0 5px 1px rgba(184,205,232,1) inset, + 0 0 0 1px rgba(0,0,0,.25), + 0 1px 5px rgba(0,0,0,.5); %endif -} + } %ifdef WINSTRIPE_AERO -.panel-inner-arrowcontent { - background-color: rgba(250,250,250,.95); - background-clip: padding-box; - margin: 4px; - border: 2px solid; - -moz-border-radius: 2px; - -moz-border-top-colors: rgba(255,255,255,.6) rgba(0,0,0,.7); - -moz-border-left-colors: rgba(255,255,255,.6) rgba(0,0,0,.7); - -moz-border-bottom-colors: rgba(255,255,255,.6) rgba(0,0,0,.7); - -moz-border-right-colors: rgba(255,255,255,.6) rgba(0,0,0,.7); - padding: 16px; -} + .panel-inner-arrowcontent { + background-color: rgba(250,250,250,.95); + background-clip: padding-box; + margin: 4px; + border: 2px solid; + -moz-border-radius: 2px; + -moz-border-top-colors: rgba(255,255,255,.6) rgba(0,0,0,.7); + -moz-border-left-colors: rgba(255,255,255,.6) rgba(0,0,0,.7); + -moz-border-bottom-colors: rgba(255,255,255,.6) rgba(0,0,0,.7); + -moz-border-right-colors: rgba(255,255,255,.6) rgba(0,0,0,.7); + padding: 16px; + } %endif -.panel-arrow[side="top"] { - list-style-image: url("chrome://global/skin/arrow/panelarrow-up.png"); + .panel-arrow[side="top"] { + list-style-image: url("chrome://global/skin/arrow/panelarrow-up.png"); %ifdef WINSTRIPE_AERO - margin-bottom: -5px; - margin-top: -5px; + margin-bottom: -5px; + margin-top: -5px; %else - margin-left: 6px; - margin-right: 6px; - margin-bottom: -13px; - margin-top: -4px; + margin-left: 6px; + margin-right: 6px; + margin-bottom: -13px; + margin-top: -4px; %endif -} + } -.panel-arrow[side="bottom"] { - list-style-image: url("chrome://global/skin/arrow/panelarrow-down.png"); + .panel-arrow[side="bottom"] { + list-style-image: url("chrome://global/skin/arrow/panelarrow-down.png"); %ifdef WINSTRIPE_AERO - margin-top: -5px; - margin-bottom: -5px; + margin-top: -5px; + margin-bottom: -5px; %else - margin-left: 6px; - margin-right: 6px; - margin-top: -12px; - margin-bottom: -4px; + margin-left: 6px; + margin-right: 6px; + margin-top: -12px; + margin-bottom: -4px; %endif -} + } -.panel-arrow[side="left"] { - list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png"); + .panel-arrow[side="left"] { + list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png"); %ifdef WINSTRIPE_AERO - margin-right: -5px; - margin-left: -5px; + margin-right: -5px; + margin-left: -5px; %else - margin-top: 6px; - margin-bottom: 6px; - margin-right: -12px; - margin-left: -4px; + margin-top: 6px; + margin-bottom: 6px; + margin-right: -12px; + margin-left: -4px; %endif -} + } -.panel-arrow[side="right"] { - list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png"); - -moz-transform: scaleX(-1); + .panel-arrow[side="right"] { + list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png"); + -moz-transform: scaleX(-1); %ifdef WINSTRIPE_AERO - margin-left: -5px; - margin-right: -5px; + margin-left: -5px; + margin-right: -5px; %else - margin-top: 6px; - margin-bottom: 6px; - margin-left: -12px; - margin-right: -4px; + margin-top: 6px; + margin-bottom: 6px; + margin-left: -12px; + margin-right: -4px; %endif + } } +%endif /* ::::: tooltip ::::: */