8b168888 |
1 | /* NEW WIDGET ANDING: <button> */ |
2 | |
3 | /** Default Button Styles (apply to usage of <button> without |
4 | * any applied class). |
5 | **/ |
6 | |
7 | /* outer frame */ |
8 | button |
9 | { |
10 | -moz-border-radius : 3px; |
11 | border : none; |
12 | margin : 1px 5px 2px 5px; |
13 | background-color : #000000; |
14 | color : #FFCF00; |
15 | } |
16 | |
17 | button:hover, |
18 | button:hover:active |
19 | { |
20 | border : none; |
21 | background-color : #FFCF00; |
22 | color : #000000; |
23 | } |
24 | |
25 | button[disabled="true"], |
26 | button[disabled="true"]:hover, |
27 | button[disabled="true"]:hover:active |
28 | { |
29 | border : none; |
30 | background-color : #000000; |
31 | color : #8050B0; |
32 | } |
33 | |
34 | /* internal frame */ |
35 | button > .button-internal-box |
36 | { |
37 | -moz-border-radius : 3px; |
7ff5b526 |
38 | -moz-box-align : center; |
39 | -moz-box-pack : center; |
8b168888 |
40 | border : none; |
41 | padding : 1px; |
42 | } |
43 | |
44 | button:hover:active > .button-internal-box |
45 | { |
46 | border : none; |
47 | padding : 2px 0px 0px 2px; |
48 | } |
49 | |
50 | button[disabled="true"] > .button-internal-box, |
51 | button[disabled="true"]:hover > .button-internal-box, |
52 | button[disabled="true"]:hover:active > .button-internal-box |
53 | { |
54 | border : none; |
55 | padding : 1px; |
56 | } |
57 | |
58 | /* text wrapping frame (hack because <text> does not support alignment) */ |
59 | .button-text-container |
60 | { |
7ff5b526 |
61 | -moz-box-align : center; |
62 | -moz-box-pack : center; |
8b168888 |
63 | } |
64 | |
65 | /* text frame */ |
66 | .button-text |
67 | { |
68 | padding : 1px 2px 1px 2px; |
69 | } |
70 | |
71 | button[orient="vertical"] > .button-internal-box > .button-text-container > .button-text |
72 | { |
73 | padding : 2px 2px 1px 2px; |
74 | } |
75 | |
76 | /** Styles for "DEFAULT" buttons (usually 'OK' or equivalent in dialogs. |
77 | * To activate, set 'default' attribute on button. |
78 | **/ |
79 | |
80 | /* outer frame */ |
81 | button[default] |
82 | { |
83 | list-style-image : url("chrome://global/skin/return.gif"); |
84 | } |
85 | |
86 | button[default]:hover |
87 | { |
88 | list-style-image : url("chrome://global/skin/return-hover.gif"); |
89 | } |
90 | |
91 | button[default][disabled="true"] |
92 | { |
93 | list-style-image : url("chrome://global/skin/return-disabled.gif"); |
94 | } |
95 | |
96 | /** Styles for 'dialog' buttons (usually any command button in a dialog) |
97 | * This class gives buttons 10px of padding on each side to increase the |
98 | * strike area and make buttons with small amounts of text (e.g. 'OK') |
99 | * look less silly. |
100 | **/ |
101 | |
102 | /* internal frame */ |
103 | .button-dialog > .button-internal-box, |
104 | .button-dialog:hover > .button-internal-box |
105 | { |
106 | padding : 2px 10px 2px 10px; |
107 | } |
108 | |
109 | .button-dialog:hover:hover:active > .button-internal-box |
110 | { |
111 | padding : 3px 9px 1px 11px; |
112 | } |
113 | |
114 | /** Styles for grey toolbar buttons. These buttons are used in places like |
115 | * editor's formatting toolbar or toolbars wanting a button similar to a command |
116 | * button but without an initial outset frame. |
117 | **/ |
118 | .button-borderless |
119 | { |
120 | border : none; |
121 | } |
122 | |
123 | .button-borderless:hover |
124 | { |
125 | border : none; |
126 | } |
127 | |
128 | .button-borderless > .button-internal-box |
129 | { |
130 | border : none; |
131 | } |
132 | |
133 | .button-borderless:hover > .button-internal-box |
134 | { |
135 | border : none; |
136 | } |
137 | |
138 | .button-borderless:hover:active > .button-internal-box |
139 | { |
140 | border : none; |
141 | } |
142 | |
143 | /** plain (raw) buttons, class="plain" **/ |
144 | |
145 | button.plain, button.plain:hover, button.plain:hover:active, |
146 | button.plain > .button-internal-box, |
147 | button.plain:hover:active > .button-internal-box, |
148 | button.plain > .button-internal-box:hover:active, |
149 | button.plain > .button-internal-box > .button-text-container, |
150 | button.plain > .button-internal-box > .button-text-container:hover:active, |
151 | button.plain > .button-internal-box > .button-text-container > .button-text, |
152 | button.plain > .button-internal-box > .button-text-container > .button.text:hover:active, |
153 | button-plain > .button-internal-box > .button-icon, |
154 | button.plain > .button-internal-box > .button.icon:hover:active |
155 | { |
156 | border : 0px; |
157 | margin : 0px; |
158 | padding : 0px; |
159 | } |
160 | |
161 | |
162 | /** |
163 | * utility class for buttons with associated popup |
164 | **/ |
165 | .button-popup |
166 | { |
167 | list-style-image : url(chrome://global/skin/taskbar-popup-arrow.gif); |
168 | } |