Bug 1244473 - Part 3 - Restructure some rules for the panel and the outer controls. r=jaws
--- a/browser/themes/linux/downloads/downloads.css
+++ b/browser/themes/linux/downloads/downloads.css
@@ -1,55 +1,49 @@
/* 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/. */
%include ../../shared/downloads/downloads.inc.css
/*** Panel and outer controls ***/
-#downloadsHistory {
- background: transparent;
- color: -moz-nativehyperlinktext;
- cursor: pointer;
-}
-
#downloadsFooter {
border-top: 1px solid ThreeDShadow;
background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px);
}
-#downloadsHistory > .button-box {
- margin: 1em;
+#downloadsHistory {
+ color: -moz-nativehyperlinktext;
}
-#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus > .button-box {
+@keyfocus@ #downloadsSummary:focus,
+@keyfocus@ #downloadsHistory:focus > .button-box {
outline: 1px -moz-dialogtext dotted;
}
+@keyfocus@ #downloadsSummary:focus {
+ outline-offset: -5px;
+}
+
/*** Downloads Summary and List items ***/
#downloadsSummary,
richlistitem[type="download"] {
height: 6em;
-moz-padding-end: 0;
color: inherit;
}
#downloadsSummary {
padding: 8px 38px 8px 12px;
cursor: pointer;
-moz-user-focus: normal;
}
-#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus {
- outline: 1px -moz-dialogtext dotted;
- outline-offset: -5px;
-}
-
#downloadsSummary > .downloadTypeIcon {
list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
}
#downloadsSummaryDescription {
color: -moz-nativehyperlinktext;
}
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -6,39 +6,29 @@
/*** Panel and outer controls ***/
#downloadsPanel {
margin-top: -1px;
}
#downloadsFooter {
+ background: #e5e5e5;
+ border-top: 1px solid hsla(0,0%,0%,.1);
+ box-shadow: 0 -1px hsla(0,0%,100%,.5) inset, 0 1px 1px hsla(0,0%,0%,.03) inset;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
#downloadsHistory {
- background: transparent;
- color: hsl(210,100%,75%);
- cursor: pointer;
+ color: #808080;
}
-#downloadsFooter {
- background: #e5e5e5;
- border-top: 1px solid hsla(0,0%,0%,.1);
- box-shadow: 0 -1px hsla(0,0%,100%,.5) inset, 0 1px 1px hsla(0,0%,0%,.03) inset;
-}
-
-#downloadsHistory > .button-box {
- color: #808080;
- margin: 1em;
-}
-
-#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus,
-#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus {
+@keyfocus@ #downloadsSummary:focus,
+@keyfocus@ #downloadsHistory:focus {
outline: 2px -moz-mac-focusring solid;
outline-offset: -2px;
-moz-outline-radius-bottomleft: 4px;
-moz-outline-radius-bottomright: 4px;
}
/*** Downloads Summary and List items ***/
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -1,12 +1,16 @@
/* 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 keyfocus #downloadsPanel[keyfocus]
+
/*** Panel and outer controls ***/
#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
padding: 0;
}
#downloadsListBox {
background: transparent;
@@ -21,8 +25,17 @@
#downloadsPanel[hasdownloads] > #emptyDownloads {
display: none;
}
#emptyDownloads {
padding: 10px 20px;
max-width: 40ch;
}
+
+#downloadsHistory {
+ background: transparent;
+ cursor: pointer;
+}
+
+#downloadsHistory > .button-box {
+ margin: 1em;
+}
--- a/browser/themes/windows/downloads/downloads.css
+++ b/browser/themes/windows/downloads/downloads.css
@@ -1,39 +1,16 @@
/* 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/. */
%include ../../shared/downloads/downloads.inc.css
/*** Panel and outer controls ***/
-#downloadsHistory {
- background: transparent;
- cursor: pointer;
-}
-
-@media (-moz-os-version: windows-xp),
- (-moz-os-version: windows-vista),
- (-moz-os-version: windows-win7) {
- #downloadsHistory {
- color: -moz-nativehyperlinktext;
- }
-}
-
-#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus {
- outline: 1px -moz-dialogtext dotted;
- outline-offset: -1px;
-}
-
-#downloadsHistory > .button-box {
- border: none;
- margin: 1em;
-}
-
#downloadsFooter {
background-color: hsla(210,4%,10%,.04);
box-shadow: 0 1px 0 hsla(210,4%,10%,.08) inset;
transition-duration: 150ms;
transition-property: background-color;
}
#downloadsFooter:hover {
@@ -43,16 +20,20 @@
#downloadsFooter:hover:active {
background-color: hsla(210,4%,10%,.1);
box-shadow: 0 2px 0 0 hsla(210,4%,10%,.1) inset;
}
@media (-moz-os-version: windows-xp),
(-moz-os-version: windows-vista),
(-moz-os-version: windows-win7) {
+ #downloadsHistory {
+ color: -moz-nativehyperlinktext;
+ }
+
@media (-moz-windows-default-theme) {
#downloadsFooter {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
transition-duration: 0s;
}
#downloadsFooter,
@@ -67,36 +48,46 @@
#downloadsFooter:hover,
#downloadsFooter:hover:active {
background-color: hsla(216,45%,88%,.98);
}
}
}
}
+@keyfocus@ #downloadsSummary:focus,
+@keyfocus@ #downloadsHistory:focus {
+ outline: 1px -moz-dialogtext dotted;
+ outline-offset: -1px;
+}
+
+@keyfocus@ #downloadsSummary:focus {
+ outline-offset: -5px;
+}
+
+#downloadsHistory > .button-box {
+ /* Hide the border so we don't display an inner focus ring. */
+ border: none;
+}
+
/*** Downloads Summary and List items ***/
#downloadsSummary,
richlistitem[type="download"] {
height: 7em;
-moz-padding-end: 0;
color: inherit;
}
#downloadsSummary {
padding: 8px 38px 8px 12px;
cursor: pointer;
-moz-user-focus: normal;
}
-#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus {
- outline: 1px -moz-dialogtext dotted;
- outline-offset: -5px;
-}
-
#downloadsSummary > .downloadTypeIcon {
list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
}
#downloadsSummaryDescription {
color: -moz-nativehyperlinktext;
}