Bug 1087618 - Part 1 : Introduce new tree styling. r=jaws
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -136,111 +136,32 @@ treecol {
#applicationsContent {
padding: 15px 0;
}
#filter {
-moz-margin-start: 0;
}
-#handlersView {
- -moz-appearance: none;
- -moz-margin-start: 0;
- font-size: 1.25rem;
- line-height: 22px;
- color: #333333;
- border: 1px solid #C1C1C1;
- border-radius: 2px;
- background-color: #FBFBFB;
- overflow-y: auto;
- height: 500px;
-}
-
-#handlersView > listheader {
- -moz-appearance: none;
- border: 0;
- padding: 0;
-}
-
-#typeColumn,
-#actionColumn {
- -moz-appearance: none;
- line-height: 20px;
- color: #333333;
- height: 36px;
- padding: 0 10px;
- background-color: #FBFBFB;
- border: 1px solid #C1C1C1;
- -moz-border-top-colors: none;
- -moz-border-right-colors: none;
- -moz-border-bottom-colors: none;
- -moz-border-left-colors: none;
-}
-
-#typeColumn:-moz-locale-dir(ltr),
-#actionColumn:-moz-locale-dir(rtl) {
- border-top-left-radius: 2px;
-}
-
-#typeColumn:-moz-locale-dir(rtl),
-#actionColumn:-moz-locale-dir(ltr) {
- border-top-right-radius: 2px;
-}
-
-#typeColumn:hover,
-#actionColumn:hover {
- border-color: #0095DD;
-}
-
-#typeColumn:hover:active,
-#actionColumn:hover:active {
- padding: 0 10px;
-}
-
-#typeColumn > .treecol-sortdirection[sortDirection=ascending],
-#actionColumn > .treecol-sortdirection[sortDirection=ascending],
-#typeColumn > .treecol-sortdirection[sortDirection=descending],
-#actionColumn > .treecol-sortdirection[sortDirection=descending] {
- -moz-appearance: none;
- list-style-image: url("chrome://global/skin/in-content/sorter.png");
-}
-
-#typeColumn > .treecol-sortdirection[sortDirection=descending],
-#actionColumn > .treecol-sortdirection[sortDirection=descending] {
- transform: scaleY(-1);
-}
-
-@media (min-resolution: 2dppx) {
- #typeColumn > .treecol-sortdirection[sortDirection=ascending],
- #actionColumn > .treecol-sortdirection[sortDirection=ascending],
- #typeColumn > .treecol-sortdirection[sortDirection=descending],
- #actionColumn > .treecol-sortdirection[sortDirection=descending] {
- width: 12px;
- height: 8px;
- list-style-image: url("chrome://global/skin/in-content/sorter@2x.png");
- }
-}
-
#handlersView > richlistitem {
- min-height: 40px !important;
+ min-height: 36px !important;
}
.typeIcon {
-moz-margin-start: 10px !important;
-moz-margin-end: 9px !important;
}
.actionIcon {
-moz-margin-start: 11px !important;
-moz-margin-end: 8px !important;
}
.actionsMenu {
- height: 40px;
- max-height: 40px;
+ min-height: 36px;
}
.actionsMenu > menupopup > menuitem {
-moz-padding-start: 10px !important;
}
.actionsMenu > menupopup > menuitem > .menu-iconic-left {
-moz-margin-end: 8px !important;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -161,16 +161,32 @@ xul|menulist[open="true"]:not([disabled=
html|button:disabled,
xul|button[disabled="true"],
xul|colorpicker[type="button"][disabled="true"],
xul|menulist[disabled="true"] {
cursor: not-allowed;
opacity: 0.5;
}
+*|button.primary {
+ background-color: #0095dd;
+ border-color: transparent;
+ color: #fff;
+}
+
+html|button.primary:enabled:hover,
+xul|button.primary:not([disabled="true"]):hover {
+ background-color: #008acb;
+}
+
+html|button.primary:enabled:hover:active,
+xul|button.primary:not([disabled="true"]):hover:active {
+ background-color: #006b9d;
+}
+
xul|colorpicker[type="button"] {
padding: 6px;
width: 50px;
}
xul|button > xul|*.button-box,
xul|menulist > xul|*.menulist-label-box {
padding-right: 10px !important;
@@ -556,8 +572,83 @@ xul|filefield + xul|button:-moz-locale-d
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
xul|textbox + xul|button,
xul|filefield + xul|button {
-moz-border-start: none;
}
+
+/* List boxes */
+
+xul|richlistbox,
+xul|listbox {
+ -moz-appearance: none;
+ border: 1px solid #c1c1c1;
+}
+
+xul|treechildren::-moz-tree-row,
+xul|listbox xul|listitem {
+ padding: 5px;
+ margin: 0;
+ border: none;
+ background-image: none;
+}
+
+xul|treechildren::-moz-tree-row(selected),
+xul|listbox xul|listitem[selected="true"] {
+ background-color: #f1f1f1;
+}
+
+/* Trees */
+
+xul|tree {
+ -moz-appearance: none;
+ font-size: 1em;
+ border: 1px solid #c1c1c1;
+}
+
+xul|listheader,
+xul|treecols {
+ -moz-appearance: none;
+ border: none;
+ border-bottom: 1px solid #c1c1c1;
+ padding: 0;
+}
+
+xul|treecol:not([hideheader="true"]),
+xul|treecolpicker {
+ -moz-appearance: none;
+ border: none;
+ background-color: #ebebeb;
+ color: #808080;
+ padding: 5px 10px;
+}
+
+xul|treecol:not([hideheader="true"]):hover,
+xul|treecolpicker:hover {
+ background-color: #dadada;
+ color: #333;
+}
+
+xul|treecol:not([hideheader="true"]):not(:first-child),
+xul|treecolpicker {
+ -moz-border-start-width: 1px;
+ -moz-border-start-style: solid;
+ border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
+}
+
+xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
+ list-style-image: url("chrome://global/skin/in-content/sorter.png");
+ width: 12px;
+ height: 8px;
+}
+
+xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] {
+ transform: scaleY(-1);
+}
+
+@media (min-resolution: 2dppx) {
+ xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
+ list-style-image: url("chrome://global/skin/in-content/sorter@2x.png");
+ }
+}
\ No newline at end of file