1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /* ===== toolbarbutton.css =====================================================
6 == Styles used by the XUL button element.
7 ======================================================================= */
9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
11 /* ::::: toolbarbutton ::::: */
15 -moz-box-align: center;
16 -moz-box-pack: center;
18 -moz-margin-start: 2px;
21 background-color: #000000;
25 .toolbarbutton-icon[label]:not([label=""]),
26 .toolbarbutton-icon[type="menu"] {
27 -moz-margin-start: 1px;
32 margin: 0px !important; /* !important for overriding global.css */
37 toolbarbutton.tabbable {
38 -moz-user-focus: normal !important;
41 toolbarbutton:-moz-focusring {
42 -moz-outline-radius: 3px;
43 outline: 1px dotted #008484;
48 background-color: #FFCF00;
52 toolbarbutton:hover:active,
53 toolbarbutton[open="true"],
54 toolbarbutton.toolbarbutton-menubutton-button[open="true"] {
55 background-color: #FF9F00;
59 toolbarbutton:hover:active,
60 toolbarbutton[open="true"] {
63 -moz-padding-start: 3px;
64 -moz-padding-end: 1px;
67 toolbarbutton[disabled="true"],
68 toolbarbutton[disabled="true"]:hover,
69 toolbarbutton[disabled="true"]:hover:active,
70 toolbarbutton[disabled="true"][open="true"],
71 toolbarbutton[disabled="true"][checked="true"] {
73 background-color: #000000;
77 toolbarbutton:-moz-lwtheme {
82 /* ..... checked state ..... */
84 toolbarbutton[checked="true"] {
85 padding-top: 2px !important;
86 padding-bottom: 0px !important;
87 -moz-padding-start: 3px !important;
88 -moz-padding-end: 1px !important;
89 background-color: #008484;
93 toolbarbutton[checked="true"]:hover,
94 toolbarbutton[checked="true"]:hover:active {
95 background-color: #FFCF00;
99 /* ::::: toolbarbutton menu ::::: */
101 .toolbarbutton-menu-dropmarker {
103 border: none !important;
104 background-color: transparent !important;
107 /* ::::: toolbarbutton menu-button ::::: */
109 toolbarbutton[type="menu-button"] {
110 -moz-box-align: stretch;
113 toolbarbutton[type="menu-button"],
114 toolbarbutton[type="menu-button"]:hover,
115 toolbarbutton[type="menu-button"]:hover:active,
116 toolbarbutton[type="menu-button"][open="true"],
117 toolbarbutton[type="menu-button"][disabled="true"],
118 toolbarbutton[type="menu-button"][disabled="true"]:hover,
119 toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
120 padding: 0px !important;
123 .toolbarbutton-menubutton-button {
125 -moz-box-align: center;
126 -moz-box-pack: center;
127 -moz-box-orient: vertical;
130 .toolbarbutton-menubutton-button,
131 .toolbarbutton-menubutton-dropmarker {
132 background-color: #000000;
135 toolbarbutton[type="menu-button"][checked="true"] > .toolbarbutton-menubutton-button,
136 toolbarbutton[type="menu-button"][checked="true"] > .toolbarbutton-menubutton-dropmarker {
137 background-color: #008484;
141 .toolbarbutton-menubutton-button[disabled="true"],
142 .toolbarbutton-menubutton-dropmarker[disabled="true"] {
143 background-color: #000000 !important;
144 color: #8050B0 !important;
147 toolbarbutton[type="menu-button"]:hover > .toolbarbutton-menubutton-button,
148 toolbarbutton[type="menu-button"]:hover > .toolbarbutton-menubutton-dropmarker,
149 toolbarbutton[type="menu-button"][checked="true"]:hover > .toolbarbutton-menubutton-button,
150 toolbarbutton[type="menu-button"][checked="true"]:hover > .toolbarbutton-menubutton-dropmarker {
151 background-color: #FFCF00;
155 toolbarbutton[type="menu-button"]:hover:active > .toolbarbutton-menubutton-button,
156 toolbarbutton[type="menu-button"]:hover:active > .toolbarbutton-menubutton-dropmarker,
157 toolbarbutton[type="menu-button"][open="true"] > .toolbarbutton-menubutton-button,
158 toolbarbutton[type="menu-button"][open="true"] > .toolbarbutton-menubutton-dropmarker,
159 toolbarbutton[type="menu-button"][checked="true"]:hover:active > .toolbarbutton-menubutton-button,
160 toolbarbutton[type="menu-button"][checked="true"]:hover:active > .toolbarbutton-menubutton-dropmarker {
161 background-color: #FF9F00;
165 toolbarbutton[type="menu-button"]:hover:active > toolbarbutton.toolbarbutton-menubutton-button,
166 toolbarbutton[type="menu-button"][open="true"] > toolbarbutton.toolbarbutton-menubutton-button {
167 padding-top: 2px !important;
168 padding-bottom: 0px !important;
169 -moz-padding-start: 3px !important;
170 -moz-padding-end: 1px !important;
173 toolbarbutton[disabled="true"] > toolbarbutton.toolbarbutton-menubutton-button,
174 toolbarbutton[disabled="true"]:hover:active > toolbarbutton.toolbarbutton-menubutton-button {
175 padding: 1px 2px !important;
178 /* ::::: toolbarbutton badged ::::: */
180 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
184 .toolbarbutton-badge[badge=""] {
188 .toolbarbutton-badge {
189 background-color: #000000;
192 .toolbarbutton-badge::after {
193 /* The |content| property is set in the content stylesheet. */
196 padding: 1px 2px 2px;
198 background-color: inherit;
200 box-shadow: 0 1px 0 #9C9CFF inset,
201 0 -1px 0 #9C9CFF inset,
211 .toolbarbutton-badge:-moz-locale-dir(rtl)::after {
216 .toolbarbutton-badge-container {
220 /* .......... dropmarker .......... */
222 .toolbarbutton-menubutton-dropmarker {
224 -moz-box-align: start;
225 padding: 3px 1px 1px;
227 background-color: transparent;
230 toolbarbutton[type="menu-button"]:hover:active > .toolbarbutton-menubutton-dropmarker,
231 toolbarbutton[type="menu-button"][open="true"] > .toolbarbutton-menubutton-dropmarker {
234 -moz-padding-start: 2px;
235 -moz-padding-end: 0px;
238 toolbarbutton[type="menu-button"]:not([disabled="true"]):hover > .toolbarbutton-menubutton-dropmarker,
239 toolbarbutton[type="menu-button"]:not([disabled="true"]):hover:active > .toolbarbutton-menubutton-dropmarker,
240 toolbarbutton[type="menu-button"][open="true"]:not([disabled="true"]) > .toolbarbutton-menubutton-dropmarker,
241 toolbarbutton[type="menu"]:not([disabled="true"]):hover .toolbarbutton-menu-dropmarker,
242 toolbarbutton[type="menu"]:not([disabled="true"]):hover:active .toolbarbutton-menu-dropmarker,
243 toolbarbutton[type="menu"][open="true"]:not([disabled="true"]) .toolbarbutton-menu-dropmarker {
244 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
245 -moz-image-region: auto;
249 .toolbarbutton-menubutton-dropmarker[disabled="true"] {
250 padding: 3px 1px 1px !important;
251 border: none !important;