|
1 |
|
2 /** |
|
3 * @file |
|
4 * Generic theme-independent base styles. |
|
5 */ |
|
6 |
|
7 /** |
|
8 * Autocomplete. |
|
9 * |
|
10 * @see autocomplete.js |
|
11 */ |
|
12 /* Suggestion list */ |
|
13 #autocomplete { |
|
14 border: 1px solid; |
|
15 overflow: hidden; |
|
16 position: absolute; |
|
17 z-index: 100; |
|
18 } |
|
19 #autocomplete ul { |
|
20 list-style: none; |
|
21 list-style-image: none; |
|
22 margin: 0; |
|
23 padding: 0; |
|
24 } |
|
25 #autocomplete li { |
|
26 background: #fff; |
|
27 color: #000; |
|
28 cursor: default; |
|
29 white-space: pre; |
|
30 zoom: 1; /* IE7 */ |
|
31 } |
|
32 /* Animated throbber */ |
|
33 html.js input.form-autocomplete { |
|
34 background-image: url(../../misc/throbber-inactive.png); |
|
35 background-position: 100% center; /* LTR */ |
|
36 background-repeat: no-repeat; |
|
37 } |
|
38 html.js input.throbbing { |
|
39 background-image: url(../../misc/throbber-active.gif); |
|
40 background-position: 100% center; /* LTR */ |
|
41 } |
|
42 |
|
43 /** |
|
44 * Collapsible fieldsets. |
|
45 * |
|
46 * @see collapse.js |
|
47 */ |
|
48 html.js fieldset.collapsed { |
|
49 border-bottom-width: 0; |
|
50 border-left-width: 0; |
|
51 border-right-width: 0; |
|
52 height: 1em; |
|
53 } |
|
54 html.js fieldset.collapsed .fieldset-wrapper { |
|
55 display: none; |
|
56 } |
|
57 fieldset.collapsible { |
|
58 position: relative; |
|
59 } |
|
60 fieldset.collapsible .fieldset-legend { |
|
61 display: block; |
|
62 } |
|
63 |
|
64 /** |
|
65 * Resizable textareas. |
|
66 * |
|
67 * @see textarea.js |
|
68 */ |
|
69 .form-textarea-wrapper textarea { |
|
70 display: block; |
|
71 margin: 0; |
|
72 width: 100%; |
|
73 -moz-box-sizing: border-box; |
|
74 -webkit-box-sizing: border-box; |
|
75 box-sizing: border-box; |
|
76 } |
|
77 .resizable-textarea .grippie { |
|
78 background: #eee url(../../misc/grippie.png) no-repeat center 2px; |
|
79 border: 1px solid #ddd; |
|
80 border-top-width: 0; |
|
81 cursor: s-resize; |
|
82 height: 9px; |
|
83 overflow: hidden; |
|
84 } |
|
85 |
|
86 /** |
|
87 * TableDrag behavior. |
|
88 * |
|
89 * @see tabledrag.js |
|
90 */ |
|
91 body.drag { |
|
92 cursor: move; |
|
93 } |
|
94 .draggable a.tabledrag-handle { |
|
95 cursor: move; |
|
96 float: left; /* LTR */ |
|
97 height: 1.7em; |
|
98 margin-left: -1em; /* LTR */ |
|
99 overflow: hidden; |
|
100 text-decoration: none; |
|
101 } |
|
102 a.tabledrag-handle:hover { |
|
103 text-decoration: none; |
|
104 } |
|
105 a.tabledrag-handle .handle { |
|
106 background: url(../../misc/draggable.png) no-repeat 6px 9px; |
|
107 height: 13px; |
|
108 margin: -0.4em 0.5em; /* LTR */ |
|
109 padding: 0.42em 0.5em; /* LTR */ |
|
110 width: 13px; |
|
111 } |
|
112 a.tabledrag-handle-hover .handle { |
|
113 background-position: 6px -11px; |
|
114 } |
|
115 div.indentation { |
|
116 float: left; /* LTR */ |
|
117 height: 1.7em; |
|
118 margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */ |
|
119 padding: 0.42em 0 0.42em 0.6em; /* LTR */ |
|
120 width: 20px; |
|
121 } |
|
122 div.tree-child { |
|
123 background: url(../../misc/tree.png) no-repeat 11px center; /* LTR */ |
|
124 } |
|
125 div.tree-child-last { |
|
126 background: url(../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */ |
|
127 } |
|
128 div.tree-child-horizontal { |
|
129 background: url(../../misc/tree.png) no-repeat -11px center; |
|
130 } |
|
131 .tabledrag-toggle-weight-wrapper { |
|
132 text-align: right; /* LTR */ |
|
133 } |
|
134 |
|
135 /** |
|
136 * TableHeader behavior. |
|
137 * |
|
138 * @see tableheader.js |
|
139 */ |
|
140 table.sticky-header { |
|
141 background-color: #fff; |
|
142 margin-top: 0; |
|
143 } |
|
144 |
|
145 /** |
|
146 * Progress behavior. |
|
147 * |
|
148 * @see progress.js |
|
149 */ |
|
150 /* Bar */ |
|
151 .progress .bar { |
|
152 background-color: #fff; |
|
153 border: 1px solid; |
|
154 } |
|
155 .progress .filled { |
|
156 background-color: #000; |
|
157 height: 1.5em; |
|
158 width: 5px; |
|
159 } |
|
160 .progress .percentage { |
|
161 float: right; /* LTR */ |
|
162 } |
|
163 /* Throbber */ |
|
164 .ajax-progress { |
|
165 display: inline-block; |
|
166 } |
|
167 .ajax-progress .throbber { |
|
168 background: transparent url(../../misc/throbber-active.gif) no-repeat 0px center; |
|
169 float: left; /* LTR */ |
|
170 height: 15px; |
|
171 margin: 2px; |
|
172 width: 15px; |
|
173 } |
|
174 .ajax-progress .message { |
|
175 padding-left: 20px; |
|
176 } |
|
177 tr .ajax-progress .throbber { |
|
178 margin: 0 2px; |
|
179 } |
|
180 .ajax-progress-bar { |
|
181 width: 16em; |
|
182 } |
|
183 |
|
184 /** |
|
185 * Inline items. |
|
186 */ |
|
187 .container-inline div, |
|
188 .container-inline label { |
|
189 display: inline; |
|
190 } |
|
191 /* Fieldset contents always need to be rendered as block. */ |
|
192 .container-inline .fieldset-wrapper { |
|
193 display: block; |
|
194 } |
|
195 |
|
196 /** |
|
197 * Prevent text wrapping. |
|
198 */ |
|
199 .nowrap { |
|
200 white-space: nowrap; |
|
201 } |
|
202 |
|
203 /** |
|
204 * For anything you want to hide on page load when JS is enabled, so |
|
205 * that you can use the JS to control visibility and avoid flicker. |
|
206 */ |
|
207 html.js .js-hide { |
|
208 display: none; |
|
209 } |
|
210 |
|
211 /** |
|
212 * Hide elements from all users. |
|
213 * |
|
214 * Used for elements which should not be immediately displayed to any user. An |
|
215 * example would be a collapsible fieldset that will be expanded with a click |
|
216 * from a user. The effect of this class can be toggled with the jQuery show() |
|
217 * and hide() functions. |
|
218 */ |
|
219 .element-hidden { |
|
220 display: none; |
|
221 } |
|
222 |
|
223 /** |
|
224 * Hide elements visually, but keep them available for screen-readers. |
|
225 * |
|
226 * Used for information required for screen-reader users to understand and use |
|
227 * the site where visual display is undesirable. Information provided in this |
|
228 * manner should be kept concise, to avoid unnecessary burden on the user. |
|
229 * "!important" is used to prevent unintentional overrides. |
|
230 */ |
|
231 .element-invisible { |
|
232 position: absolute !important; |
|
233 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ |
|
234 clip: rect(1px, 1px, 1px, 1px); |
|
235 overflow: hidden; |
|
236 height: 1px; |
|
237 } |
|
238 |
|
239 /** |
|
240 * The .element-focusable class extends the .element-invisible class to allow |
|
241 * the element to be focusable when navigated to via the keyboard. |
|
242 */ |
|
243 .element-invisible.element-focusable:active, |
|
244 .element-invisible.element-focusable:focus { |
|
245 position: static !important; |
|
246 clip: auto; |
|
247 overflow: visible; |
|
248 height: auto; |
|
249 } |
|
250 |
|
251 /** |
|
252 * Markup free clearing. |
|
253 * |
|
254 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack |
|
255 */ |
|
256 .clearfix:after { |
|
257 content: "."; |
|
258 display: block; |
|
259 height: 0; |
|
260 clear: both; |
|
261 visibility: hidden; |
|
262 } |
|
263 /* IE6 */ |
|
264 * html .clearfix { |
|
265 height: 1%; |
|
266 } |
|
267 /* IE7 */ |
|
268 *:first-child + html .clearfix { |
|
269 min-height: 1%; |
|
270 } |
|
271 |