Collect color definitions

This commit is contained in:
Piro / YUKI Hiroshi 2016-05-03 13:21:07 +09:00
parent 0b02f1ba35
commit 90e13a567e
6 changed files with 65 additions and 49 deletions

View File

@ -4,13 +4,13 @@
tabbrowser[treestyletab-tabbar-position="left"]:not([treestyletab-tabbar-fixed="true"])
.treestyletab-splitter {
border-right: 1px solid ThreeDShadow !important;
-moz-border-right-colors: ThreeDShadow !important;
border-right: 1px solid var(--tst-tab-border) !important;
-moz-border-right-colors: var(--tst-tab-border) !important;
}
tabbrowser[treestyletab-tabbar-position="right"]:not([treestyletab-tabbar-fixed="true"])
.treestyletab-splitter {
border-left: 1px solid ThreeDShadow !important;
-moz-border-left-colors: ThreeDShadow !important;
border-left: 1px solid var(--tst-tab-border) !important;
-moz-border-left-colors: var(--tst-tab-border) !important;
}
tabbrowser:not([treestyletab-style="vertigo"])[treestyletab-mode="vertical"]

View File

@ -4,11 +4,11 @@
.tabbrowser-strip[treestyletab-tabbar-position="left"]:not([treestyletab-tabbar-transparent="full"]),
.treestyletab-tabbar-toolbar[treestyletab-tabbar-position="left"]:not([treestyletab-tabbar-transparent="full"]) {
border-right: 1px solid ThreeDShadow !important;
border-right: 1px solid var(--tst-tab-border) !important;
-moz-border-right-colors: none !important;
}
.tabbrowser-strip[treestyletab-tabbar-position="right"]:not([treestyletab-tabbar-transparent="full"]),
.treestyletab-tabbar-toolbar[treestyletab-tabbar-position="right"]:not([treestyletab-tabbar-transparent="full"]) {
border-left: 1px solid ThreeDShadow !important;
border-left: 1px solid var(--tst-tab-border) !important;
-moz-border-right-colors: none !important;
}

View File

@ -2,6 +2,20 @@
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* color scheme: see also ../base-colors.css */
:root {
--tst-tab-highlighted-base: ThreeDHighlight;
--tst-tab-highlighted-highlight: Highlight;
--tst-tab-side-border: ThreeDLightShadow;
--tst-tab-surface-hover: #e0e8f6;
--tst-tab-surface-selected: #c1d2ee;
--tst-tab-surface-selected-hover: #d1e2fe;
--tst-tabbar-bg: darkgray;
}
/* Default style */
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]),
@ -15,7 +29,7 @@
.tabbrowser-strip[treestyletab-style~="border"]:not([treestyletab-tabbar-position="top"]) {
appearance: none;
-moz-appearance: none;
background: darkgray !important;
background: var(--tst-tabbar-bg) !important;
}
.tabbrowser-strip[treestyletab-mode="vertical"],
@ -42,12 +56,12 @@
.tabbrowser-strip[treestyletab-tabbar-position="left"][treestyletab-tabbar-fixed="true"],
.treestyletab-tabbar-toolbar[treestyletab-tabbar-position="left"][treestyletab-tabbar-fixed="true"] {
border-right: 1px solid ThreeDShadow !important;
border-right: 1px solid var(--tst-tab-border) !important;
-moz-border-right-colors: none !important;
}
.tabbrowser-strip[treestyletab-tabbar-position="right"][treestyletab-tabbar-fixed="true"],
.treestyletab-tabbar-toolbar[treestyletab-tabbar-position="right"][treestyletab-tabbar-fixed="true"] {
border-left: 1px solid ThreeDShadow !important;
border-left: 1px solid var(--tst-tab-border) !important;
-moz-border-left-colors: none !important;
}
@ -94,14 +108,14 @@
min-height: 2em;
margin: 0 !important;
/*padding: 0 0.2em !important;*/
color: -moz-dialogtext !important;
color: var(--tst-tab-text) !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
background-position: 0 0 !important;
border-top: 2px solid !important;
-moz-border-top-colors: transparent transparent !important;
border-bottom: 2px solid !important;
-moz-border-bottom-colors: ThreeDShadow transparent !important;
-moz-border-bottom-colors: var(--tst-tab-border) transparent !important;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-moz-border-image: none !important;
@ -113,7 +127,7 @@
#TabsToolbar:not(:-moz-lwtheme):not([treestyletab-tabbar-position="top"])
#tabbrowser-tabs
.tabbrowser-tab:not([visuallyselected]) {
color: -moz-dialogtext !important;
color: var(--tst-tab-text) !important;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:not([pinned]),
@ -121,21 +135,22 @@
.tabbrowser-tab:not([pinned])[visuallyselected="true"],
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:not([pinned]):not([visuallyselected="true"]) {
background: -moz-dialog repeat-x !important;
background: noone repeat-x !important;
background-color: var(--tst-tab-surface) !important;
}
/* highlighted pinned tabs */
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]) {
background-image: radial-gradient(circle farthest-corner at 50% 3px,
ThreeDHighlight 3%,
Highlight 80%);
var(--tst-tab-highlighted-base) 3%,
var(--tst-tab-highlighted-highlight) 80%);
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
background-image: radial-gradient(circle farthest-corner at 50% 3px,
ThreeDHighlight 3%,
Highlight 100%);
var(--tst-tab-highlighted-base) 3%,
var(--tst-tab-highlighted-highlight) 100%);
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
@ -149,11 +164,12 @@
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
:-moz-any(.tabbrowser-tab[pinned],
.tabbrowser-tab[pinned][titlechanged]) {
background: -moz-dialog repeat-x !important;
background: none repeat-x !important;
background-color: var(--tst-tab-surface) !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-firsttab-border="true"]
.tabbrowser-tab:not([pinned="true"]):not([visuallyselected="true"]):first-child {
-moz-border-top-colors: ThreeDShadow transparent !important;
-moz-border-top-colors: var(--tst-tab-border) transparent !important;
}
@ -210,8 +226,8 @@
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab[visuallyselected="true"] {
margin: 0 !important;
-moz-border-top-colors: ThreeDHighlight transparent !important;
-moz-border-bottom-colors: ThreeDShadow transparent !important;
-moz-border-top-colors: var(--tst-tab-surface-hover) transparent !important;
-moz-border-bottom-colors: var(--tst-tab-border) transparent !important;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab[visuallyselected="true"]:not([pinned]) {
@ -221,7 +237,7 @@
.tabbrowser-tab:not([pinned])[visuallyselected="true"],
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab[pinned][visuallyselected="true"] {
background-color: ThreeDHighlight !important;
background-color: var(--tst-tab-surface-hover) !important;
}
@ -239,14 +255,14 @@
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not([visuallyselected="true"]) {
border-left: 2px solid !important;
-moz-border-left-colors: ThreeDLightShadow transparent !important;
-moz-border-left-colors: var(--tst-tab-side-border) transparent !important;
border-right: 2px solid !important;
-moz-border-right-colors: ThreeDLightShadow transparent !important;
-moz-border-right-colors: var(--tst-tab-side-border) transparent !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[visuallyselected="true"] {
-moz-border-left-colors: ThreeDLightShadow transparent !important;
-moz-border-right-colors: ThreeDLightShadow transparent !important;
-moz-border-left-colors: var(--tst-tab-side-border) transparent !important;
-moz-border-right-colors: var(--tst-tab-side-border) transparent !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
@ -262,9 +278,9 @@
.tabbrowser-tabs[treestyletab-tabbar-position="bottom"]
.tabbrowser-tab:not([visuallyselected="true"]) {
border-right: 2px solid !important;
-moz-border-right-colors: ThreeDShadow transparent !important;
-moz-border-right-colors: var(--tst-tab-border) transparent !important;
border-left: 2px solid !important;
-moz-border-left-colors: ThreeDShadow transparent !important;
-moz-border-left-colors: var(--tst-tab-border) transparent !important;
}
/* Mac OS X */

View File

@ -8,56 +8,56 @@
.tabbrowser-tabs[treestyletab-style~="color"]:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:not([visuallyselected="true"]):hover {
-moz-border-top-colors: #e0e8f6 transparent !important;
-moz-border-left-colors: #e0e8f6 transparent !important;
-moz-border-top-colors: var(--tst-tab-surface-hover) transparent !important;
-moz-border-left-colors: var(--tst-tab-surface-hover) transparent !important;
}
.tabbrowser-tabs[treestyletab-style~="color"]:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:not([visuallyselected="true"]):not([pinned]):hover,
.tabbrowser-tabs[treestyletab-style~="color"]:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:not([visuallyselected="true"])[pinned]:not([titlechanged]):hover {
background-color: #e0e8f6 !important;
background-color: var(--tst-tab-surface-hover) !important;
}
.tabbrowser-tabs[treestyletab-style~="color"][treestyletab-mode="vertical"][treestyletab-firsttab-border="true"]
.tabbrowser-tab:first-child:not([visuallyselected="true"]):hover {
-moz-border-top-colors: ThreeDShadow #e0e8f6 !important;
-moz-border-top-colors: var(--tst-tab-border) var(--tst-tab-surface-hover) !important;
}
.tabbrowser-tabs[treestyletab-style~="color"][treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]
.tabbrowser-tab:not([visuallyselected="true"]):hover {
-moz-border-right-colors: #e0e8f6 transparent !important;
-moz-border-right-colors: var(--tst-tab-surface-hover) transparent !important;
}
.tabbrowser-tabs[treestyletab-style~="color"]:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab[visuallyselected="true"] {
-moz-border-top-colors: #c1d2ee transparent !important;
-moz-border-left-colors: #c1d2ee transparent !important;
-moz-border-top-colors: var(--tst-tab-surface-selected) transparent !important;
-moz-border-left-colors: var(--tst-tab-surface-selected) transparent !important;
}
.tabbrowser-tabs[treestyletab-style~="color"]:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab[visuallyselected="true"] {
background-color: #c1d2ee !important;
background-color: var(--tst-tab-surface-selected) !important;
}
.tabbrowser-tabs[treestyletab-style~="color"][treestyletab-mode="vertical"][treestyletab-firsttab-border="true"]
.tabbrowser-tab:first-child[visuallyselected="true"] {
-moz-border-top-colors: ThreeDShadow #c1d2ee !important;
-moz-border-top-colors: var(--tst-tab-border) var(--tst-tab-surface-selected) !important;
}
.tabbrowser-tabs[treestyletab-style~="color"][treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]
.tabbrowser-tab[visuallyselected="true"] {
-moz-border-right-colors: #c1d2ee transparent !important;
-moz-border-right-colors: var(--tst-tab-surface-selected) transparent !important;
}
.tabbrowser-tabs[treestyletab-style~="color"]:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab[visuallyselected="true"]:hover {
-moz-border-top-colors: #d1e2fe transparent !important;
-moz-border-left-colors: #d1e2fe transparent !important;
-moz-border-top-colors: var(--tst-tab-surface-selected-hover) transparent !important;
-moz-border-left-colors: var(--tst-tab-surface-selected-hover) transparent !important;
}
.tabbrowser-tabs[treestyletab-style~="color"]:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab[visuallyselected="true"]:hover {
background-color: #d1e2fe !important;
background-color: var(--tst-tab-surface-selected-hover) !important;
}
.tabbrowser-tabs[treestyletab-style~="color"][treestyletab-mode="vertical"][treestyletab-firsttab-border="true"]
.tabbrowser-tab:first-child[visuallyselected="true"]:hover {
-moz-border-top-colors: ThreeDShadow #d1e2fe !important;
-moz-border-top-colors: var(--tst-tab-border) var(--tst-tab-surface-selected-hover) !important;
}
.tabbrowser-tabs[treestyletab-style~="color"][treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]
.tabbrowser-tab[visuallyselected="true"]:hover {
-moz-border-right-colors: #d1e2fe transparent !important;
-moz-border-right-colors: var(--tst-tab-surface-selected-hover) transparent !important;
}

View File

@ -13,7 +13,7 @@
.tabbrowser-tab:not([titlechanged])
:-moz-any(.tab-background:not([pinned]),
.tab-background[pinned]) {
background-color: -moz-dialog !important;
background-color: var(--tst-tab-surface) !important;
background-image: -moz-linear-gradient(
top,
rgba(0, 0, 0, 0.02) 0,
@ -25,7 +25,7 @@
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab
.tab-background[visuallyselected="true"] {
background-color: #c1d2ee !important;
background-color: var(--tst-tab-surface-selected) !important;
background-image: -moz-linear-gradient(
top,
rgba(4, 83, 227, 0.04) 0,
@ -40,7 +40,7 @@
.tabbrowser-tab:hover
:-moz-any(.tab-background:not([pinned]),
.tab-background[pinned]:not([titlechanged])) {
background-color: #e0e8f6 !important;
background-color: var(--tst-tab-surface-hover) !important;
background-image: -moz-linear-gradient(
top,
rgba(213, 224, 245, 1) 0,
@ -51,7 +51,7 @@
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
.tabbrowser-tab:hover
.tab-background[visuallyselected="true"] {
background-color: #d1e2fe !important;
background-color: var(--tst-tab-surface-selected-hover) !important;
background-image: -moz-linear-gradient(
top,
rgba(199, 219, 252, 1) 0,
@ -64,5 +64,5 @@
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab[pinned]:not([treestyletab-drop-position]) {
-moz-border-right-colors: ThreeDShadow transparent !important;
-moz-border-right-colors: var(--tst-tab-border) transparent !important;
}

View File

@ -90,6 +90,6 @@
/* autohide */
.treestyletab-tabbar-toolbar[treestyletab-tabbar-autohide][treestyletab-mode="vertical"]
#treestyletab-tabbar-resizer-box {
background: -moz-dialog;
background: var(--tst-tab-surface);
opacity: 0.75;
}