Bug 623199 - Add-ons manager buttons should be contextually styled. r=mossop

--HG--
extra : rebase_source : 271ea999816306633a669199ec72090cf4feb10c
This commit is contained in:
Dão Gottwald 2011-03-29 20:38:02 +02:00
parent 141fc835b6
commit c537024a6a
2 changed files with 47 additions and 76 deletions

View File

@ -469,7 +469,6 @@
} }
.description-container { .description-container {
margin-top: 8px;
-moz-margin-start: 6px; -moz-margin-start: 6px;
-moz-box-align: center; -moz-box-align: center;
} }
@ -494,11 +493,11 @@
-moz-box-align: stretch; -moz-box-align: stretch;
} }
.advancedinfo-container,
.update-info-container { .update-info-container {
-moz-box-align: center; -moz-box-align: center;
} }
.advancedinfo-container,
.update-available { .update-available {
-moz-box-align: end; -moz-box-align: end;
} }

View File

@ -35,6 +35,8 @@
* *
* ***** END LICENSE BLOCK ***** */ * ***** END LICENSE BLOCK ***** */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#addons-page { #addons-page {
-moz-appearance: none; -moz-appearance: none;
padding: 18px; padding: 18px;
@ -103,7 +105,6 @@
.nav-button { .nav-button {
list-style-image: url(chrome://mozapps/skin/extensions/navigation.png); list-style-image: url(chrome://mozapps/skin/extensions/navigation.png);
min-width: 0;
} }
#forward-btn { #forward-btn {
@ -368,30 +369,33 @@
} }
#header-search { #header-search {
-moz-appearance: none;
color: black;
border: 1px solid;
border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.37);
border-radius: 4px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset,
0 1px 0 rgba(255, 255, 255, 0.4);
padding: 3px;
background-color: rgba(255, 255, 255, 0.8);
margin: 0; margin: 0;
} }
#header-search .textbox-input:-moz-placeholder { @media all and (-moz-windows-default-theme) {
color: grey; #header-search {
} -moz-appearance: none;
border: 1px solid;
border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.37);
border-radius: 4px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset,
0 1px 0 rgba(255, 255, 255, 0.4);
padding-bottom: 2px;
background-color: rgba(255, 255, 255, 0.4);
}
#header-search[focused="true"] { #header-search:hover {
background-color: white; background-color: rgba(255, 255, 255, .75);
}
#header-search[focused] {
background-color: white;
}
} }
#header-utils-btn { #header-utils-btn {
min-width: 4.5em;
list-style-image: url("chrome://mozapps/skin/extensions/utilities.png"); list-style-image: url("chrome://mozapps/skin/extensions/utilities.png");
-moz-margin-end: 18px; -moz-margin-end: 16px;
} }
.view-header { .view-header {
@ -565,7 +569,6 @@
} }
.description-container { .description-container {
margin-top: 8px;
-moz-margin-start: 6px; -moz-margin-start: 6px;
-moz-box-align: center; -moz-box-align: center;
} }
@ -591,11 +594,11 @@
-moz-box-align: stretch; -moz-box-align: stretch;
} }
.advancedinfo-container,
.update-info-container { .update-info-container {
-moz-box-align: center; -moz-box-align: center;
} }
.advancedinfo-container,
.update-available { .update-available {
-moz-box-align: end; -moz-box-align: end;
} }
@ -1122,38 +1125,23 @@
-moz-appearance: none; -moz-appearance: none;
color: black; color: black;
padding: 0 5px; padding: 0 5px;
background-color: rgba(151,152,153,.05); background: -moz-linear-gradient(rgba(251, 252, 253, 0.95), rgba(246, 247, 248, 0) 49%,
background-image: -moz-linear-gradient(rgba(251, 252, 253, 0.95), rgba(246, 247, 248, 0.47) 49%, rgba(211, 212, 213, 0.45) 51%, rgba(225, 226, 229, 0.3));
rgba(231, 232, 233, 0.45) 51%, rgba(225, 226, 229, 0.3));
background-clip: padding-box; background-clip: padding-box;
border-radius: 3px; border-radius: 3px;
border: 1px solid; border: 1px solid rgba(31, 64, 100, 0.4);
border-color: rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.19) rgba(0, 0, 0, 0.38); border-top-color: rgba(31, 64, 100, 0.3);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset, box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset,
0 0 0 2px rgba(255, 255, 255, 0.1) inset; 0 0 2px 1px rgba(255, 255, 255, 0.25) inset;
}
.addon-control:not(:active):hover {
background-color: hsla(190, 60%, 70%, 0.5);
border-color: hsla(190, 50%, 65%, 0.8) hsla(190, 50%, 50%, 0.8) hsla(190, 50%, 40%, 0.8);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset,
0 0 0 1.5px rgba(255, 255, 255, 0.1) inset,
0 1px 0 rgba(0, 0, 0, 0.1),
0 0 3.5px hsl(190, 90%, 80%);
-moz-transition: background-color .4s ease-in,
border-color .3s ease-in,
box-shadow .3s ease-in
} }
.addon-control:active:hover { .addon-control:active:hover {
background-color: transparent; background-color: rgba(61, 76, 92, 0.2);
border-color: rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.55) rgba(0, 0, 0, 0.5); border-color: rgba(39, 53, 68, 0.5);
box-shadow: 0 0 6.5px rgba(0, 0, 0, 0.4) inset, box-shadow: 0 0 3px 1px rgba(39, 53, 68, 0.2) inset;
0 0 2px rgba(0, 0, 0, 0.4) inset,
0 1px 0 rgba(255, 255, 255, 0.4);
} }
.addon-control .button-box { .addon-control > .button-box {
padding: 1px; padding: 1px;
} }
@ -1183,50 +1171,34 @@
.header-button { .header-button {
-moz-appearance: none; -moz-appearance: none;
margin: 0; padding: 1px 3px;
background: rgba(151,152,153,.05) color: #444;
-moz-linear-gradient(rgba(251, 252, 253, 0.95), rgba(246, 247, 248, 0.47) 49%, text-shadow: 0 0 3px white;
rgba(231, 232, 233, 0.45) 51%, rgba(225, 226, 229, 0.3)); background: -moz-linear-gradient(rgba(251, 252, 253, 0.95), rgba(246, 247, 248, 0) 49%,
rgba(211, 212, 213, 0.45) 51%, rgba(225, 226, 229, 0.3));
background-clip: padding-box; background-clip: padding-box;
border-radius: 4.5px; border-radius: 4.5px;
border: 1px solid; border: 1px solid rgba(31, 64, 100, 0.4);
border-color: rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.19) rgba(0, 0, 0, 0.38); border-top-color: rgba(31, 64, 100, 0.3);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset, box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset,
0 0 0 2px rgba(255, 255, 255, 0.1) inset; 0 0 2px 1px rgba(255, 255, 255, 0.25) inset;
} }
.header-button[disabled="true"] { .header-button[disabled="true"] {
-moz-border-top-colors: rgba(0, 0, 0, 0.12) !important;
-moz-border-left-colors: rgba(0, 0, 0, 0.19) !important;
-moz-border-right-colors: rgba(0, 0, 0, 0.19) !important;
-moz-border-bottom-colors: rgba(0, 0, 0, 0.38) !important;
opacity: 0.8; opacity: 0.8;
} }
.nav-button[disabled="true"] .toolbarbutton-icon { .header-button[disabled="true"] > .toolbarbutton-icon {
opacity: 0.4; opacity: 0.4;
} }
.header-button:not([open="true"]):not([disabled="true"]):not(:active):hover {
background-color: hsla(190, 60%, 70%, 0.5);
border-color: hsla(190, 50%, 65%, 0.8) hsla(190, 50%, 50%, 0.8) hsla(190, 50%, 40%, 0.8);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset,
0 0 0 1.5px rgba(255, 255, 255, 0.1) inset,
0 1px 0 rgba(0, 0, 0, 0.1),
0 0 3.5px hsl(190, 90%, 80%);
-moz-transition: background-color .4s ease-in,
border-color .3s ease-in,
box-shadow .3s ease-in
}
.header-button:not([disabled="true"]):active:hover, .header-button:not([disabled="true"]):active:hover,
.header-button[open="true"] { .header-button[open="true"] {
background-color: transparent; background-color: rgba(61, 76, 92, 0.2);
border-color: rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.55) rgba(0, 0, 0, 0.5); border-color: rgba(39, 53, 68, 0.5);
box-shadow: 0 0 6.5px rgba(0, 0, 0, 0.4) inset, box-shadow: 0 0 3px 1px rgba(39, 53, 68, 0.2) inset;
0 0 2px rgba(0, 0, 0, 0.4) inset;
} }
.header-button .toolbarbutton-text { .header-button > .toolbarbutton-text {
display: none; display: none;
} }