www/jqwidgets/styles/jqx.metrodark.css

changeset 1
37f1a08315f3
child 451
259c97782bf8
equal deleted inserted replaced
0:033898178630 1:37f1a08315f3
1 .jqx-rc-tl-metrodark
2 {
3 -moz-border-radius-topleft: 0px;
4 -webkit-border-top-left-radius: 0px;
5 border-top-left-radius: 0px;
6 }
7 .jqx-rc-tr-metrodark
8 {
9 -moz-border-radius-topright: 0px;
10 -webkit-border-top-right-radius: 0px;
11 border-top-right-radius: 0px;
12 }
13 .jqx-rc-bl-metrodark
14 {
15 -moz-border-radius-bottomleft: 0px;
16 -webkit-border-bottom-left-radius: 0px;
17 border-bottom-left-radius: 0px;
18 }
19 .jqx-rc-br-metrodark
20 {
21 -moz-border-radius-bottomright: 0px;
22 -webkit-border-bottom-right-radius: 0px;
23 border-bottom-right-radius: 0px;
24 }
25 /*top rounded Corners*/
26 .jqx-rc-t-metrodark
27 {
28 -moz-border-radius-topleft: 0px;
29 -webkit-border-top-left-radius: 0px;
30 border-top-left-radius: 0px;
31 -moz-border-radius-topright: 0px;
32 -webkit-border-top-right-radius: 0px;
33 border-top-right-radius: 0px;
34 }
35 /*bottom rounded Corners*/
36 .jqx-rc-b-metrodark
37 {
38 -moz-border-radius-bottomleft: 0px;
39 -webkit-border-bottom-left-radius: 0px;
40 border-bottom-left-radius: 0px;
41 -moz-border-radius-bottomright: 0px;
42 -webkit-border-bottom-right-radius: 0px;
43 border-bottom-right-radius: 0px;
44 }
45 /*right rounded Corners*/
46 .jqx-rc-r-metrodark
47 {
48 -moz-border-radius-topright: 0px;
49 -webkit-border-top-right-radius: 0px;
50 border-top-right-radius: 0px;
51 -moz-border-radius-bottomright: 0px;
52 -webkit-border-bottom-right-radius: 0px;
53 border-bottom-right-radius: 0px;
54 }
55 /*left rounded Corners*/
56 .jqx-rc-l-metrodark
57 {
58 -moz-border-radius-topleft: 0px;
59 -webkit-border-top-left-radius: 0px;
60 border-top-left-radius: 0px;
61 -moz-border-radius-bottomleft: 0px;
62 -webkit-border-bottom-left-radius: 0px;
63 border-bottom-left-radius: 0px;
64 }
65 /*all rounded Corners*/
66 .jqx-rc-all-metrodark
67 {
68 -moz-border-radius: 0px;
69 -webkit-border-radius: 0px;
70 border-radius: 0px;
71 }
72 .jqx-widget-metrodark {
73 font-size: 12px; line-height: 17px;
74 font-family: 'segoe ui', arial, sans-serif;
75 color: inherit;
76 }
77 .jqx-widget-content-metrodark{font-size: 12px; line-height: 17px; font-family: 'segoe ui', arial, sans-serif; border-color: #35353A; color: #ffffff; background-color: #252526;}
78 .jqx-widget-header-metrodark{font-size: 12px; line-height: 17px; font-family: 'segoe ui', arial, sans-serif; color: #ffffff; border-color:#35353A; background-color:#3E3E42;}
79 .jqx-fill-state-normal-metrodark{font-size: 12px; line-height: 17px; font-family: 'segoe ui', arial, sans-serif; border-color: #35353A; color: #ffffff; background: #3E3E42;}
80 .jqx-fill-state-hover-metrodark{font-size: 12px; line-height: 17px; font-family: 'segoe ui', arial, sans-serif; border-color:#1C97EA; color: #fff; background-color:#1C97EA;
81
82 }
83 .jqx-fill-state-focus-metrodark { border-color: #000; }
84 .jqx-fill-state-pressed-metrodark{border-color:#007ACC; color: #fff; background-color:#007ACC;
85
86 }
87 .jqx-fill-state-disabled-metrodark {
88 color: #898989;
89 }
90 .jqx-input-metrodark {
91 border-color: #35353A;
92 }
93 .jqx-scrollbar-state-normal-metrodark, .jqx-grid-bottomright-metrodark, .jqx-panel-bottomright-metrodark, .jqx-listbox-bottomright-metrodark{background-color:#3E3E42;}
94 .jqx-widget-metrodark .jqx-grid-column-header-metrodark, .jqx-grid-cell-metrodark, .jqx-widget-metrodark .jqx-grid-cell-metrodark, .jqx-widget-metrodark .jqx-grid-group-cell-metrodark, .jqx-grid-group-cell-metrodark{font-size: 12px; line-height: 17px; font-family: 'segoe ui', arial, sans-serif; border-color: #1C1C1E; background-color: #2A2A2C; color: #fff;}
95 .jqx-tabs-title-selected-bottom-metrodark, .jqx-tabs-selection-tracker-bottom-metrodark, .jqx-tabs-title-selected-top-metrodark, .jqx-tabs-selection-tracker-top-metrodark{color: #ffffff; border-color:#35353A; border-bottom:1px solid #252526; background:#007ACC}
96 .jqx-widget-metrodark .jqx-grid-cell-alt-metrodark, .jqx-widget-metrodark .jqx-grid-cell-sort-metrodark, .jqx-widget-metrodark .jqx-grid-cell-pinned-metrodark, .jqx-widget-metrodark .jqx-grid-cell-filter-metrodark, .jqx-grid-cell-sort-alt-metrodark, .jqx-grid-cell-filter-alt-metrodark, .jqx-grid-cell-pinned-metrodark, .jqx-grid-cell-alt-metrodark, .jqx-grid-cell-sort-metrodark{ background-color:#3E3E42; color: #fff;}
97 .jqx-menu-vertical-metrodark{background: #3E3E42; border-color: #3E3E42;}
98 .jqx-widget-metrodark .jqx-grid-cell-metrodark, .jqx-widget-metrodark .jqx-grid-column-header-metrodark, .jqx-widget-metrodark .jqx-grid-group-cell-metrodark { border-color: #35353A;}
99
100 .jqx-widget-metrodark .jqx-grid-column-menubutton-metrodark, .jqx-widget-metrodark .jqx-grid-column-sortascbutton-metrodark, .jqx-widget-metrodark .jqx-grid-column-sortdescbutton-metrodark, .jqx-widget-metrodark .jqx-grid-column-filterbutton-metrodark {
101 background-color: transparent;
102 border-color: #35353A;
103 }
104 .jqx-window-header-metrodark, .jqx-input-button-header-metrodark, .jqx-calendar-title-header-metrodark, .jqx-grid-metrodark .jqx-widget-header-metrodark, .jqx-grid-header-metrodark, .jqx-grid-column-header-metrodark {font-size: 12px; line-height: 17px; font-family: 'segoe ui', arial, sans-serif; border-color: #35353A; color: #ffffff; background: #3E3E42;}
105 .jqx-grid-column-menubutton-metrodark {
106 background-image: url('images/metro-icon-down-white.png');
107 }
108 .jqx-calendar-cell-today-metrodark {
109 color: #35353A;
110 }
111
112 .jqx-widget-metrodark .jqx-grid-cell-selected-metrodark, .jqx-grid-cell-selected-metrodark{ background-color:#007ACC; border-color: #007ACC; font-size: 12px; color:#fff;}
113 .jqx-widget-metrodark .jqx-grid-cell-hover-metrodark, .jqx-grid-cell-hover-metrodark{ background-color:#1C97EA; border-color: #1C97EA;}
114 /*applied to the column's sort button when the sort order is ascending.*/
115 .jqx-grid-column-sortascbutton-metrodark {
116 background-image: url('images/metro-icon-up-white.png');
117 }
118 .jqx-grid-column-sortdescbutton-metrodark {
119 background-image: url('images/metro-icon-down-white.png');
120 }
121 .jqx-checkbox-check-checked-metrodark{background:transparent url(images/check_white.png) center center no-repeat}
122 .jqx-checkbox-check-indeterminate-metrodark{background:transparent url(images/check_indeterminate_white.png) center center no-repeat}
123 .jqx-checkbox-hover-metrodark, .jqx-radiobutton-hover-metrodark {
124 background-color: #3E3E42;
125 border-color: #3E3E42;
126 }
127 .jqx-radiobutton-check-checked-metrodark {
128 background: #fff;
129 border-color: #fff;
130 }
131 .jqx-grid-column-menubutton-metrodark {
132 border-style: solid;
133 border-width: 0px 0px 0px 1px;
134 border-color: transparent;
135 background-image: url('images/icon-menu-small-white.png') !important;
136 background-repeat: no-repeat;
137 background-position: center;
138 cursor: pointer;
139 }
140 .jqx-item-metrodark .jqx-grid-sortasc-icon
141 {
142 background-image: url('images/icon-sort-asc-white.png');
143 background-repeat: no-repeat;
144 background-position: left center;
145 width: 16px;
146 height: 16px;
147 float: left;
148 margin-left: -4px;
149 margin-right: 4px;
150 }
151 /*applied to the sort ascending menu item in the Grid's Context Menu*/
152 .jqx-item-metrodark .jqx-grid-sortdesc-icon
153 {
154 background-image: url('images/icon-sort-desc-white.png');
155 background-repeat: no-repeat;
156 background-position: left center;
157 width: 16px;
158 height: 16px;
159 float: left;
160 margin-left: -4px;
161 margin-right: 4px;
162 }
163 /*applied to the grid menu's sort remove item/*/
164 .jqx-item-metrodark .jqx-grid-sortremove-icon
165 {
166 background-image: url('images/icon-sort-remove-white.png');
167 background-repeat: no-repeat;
168 background-position: left center;
169 width: 16px;
170 height: 16px;
171 float: left;
172 margin-left: -4px;
173 margin-right: 4px;
174 }
175
176 .jqx-scrollbar-thumb-state-normal-horizontal-metrodark, .jqx-scrollbar-thumb-state-normal-metrodark {
177 background: #686868; border-color: #686868;
178 }
179 .jqx-scrollbar-thumb-state-hover-horizontal-metrodark, .jqx-scrollbar-thumb-state-hover-metrodark {
180 background: #9E9E9E; border-color: #9E9E9E;
181 }
182 .jqx-scrollbar-thumb-state-pressed-horizontal-metrodark, .jqx-scrollbar-thumb-state-pressed-metrodark {
183 background: #ffffff; border-color: #ffffff;
184 }
185 .jqx-scrollbar-button-state-normal-metrodark
186 {
187 border: 1px solid #3E3E42;
188 background: #3E3E42;
189 }
190 /*applied to the scrollbar buttons in hovered state.*/
191 .jqx-scrollbar-button-state-hover-metrodark
192 {
193 border: 1px solid #3E3E42;
194 background: #3E3E42;
195 }
196 /*applied to the scrollbar buttons in pressed state.*/
197 .jqx-scrollbar-button-state-pressed-metrodark
198 {
199 border: 1px solid #3E3E42;
200 background: #3E3E42;
201 }
202
203 /*icons*/
204 .jqx-window-collapse-button-metrodark
205 {
206 background-image: url(images/metro-icon-up-white.png);
207 }
208 .jqx-window-collapse-button-collapsed-metrodark {
209 background-image: url(images/metro-icon-down-white.png);
210 }
211 .jqx-icon-arrow-up-metrodark, .jqx-expander-arrow-bottom-metrodark, .jqx-menu-item-arrow-up-metrodark
212 {
213 background-image: url('images/metro-icon-up-white.png');
214 }
215 .jqx-icon-arrow-down-metrodark, .jqx-expander-arrow-top-metrodark, .jqx-tree-item-arrow-expand-metrodark, .jqx-tree-item-arrow-expand-hover-metrodark, .jqx-menu-item-arrow-down-metrodark
216 {
217 background-image: url('images/metro-icon-down-white.png');
218 }
219 .jqx-icon-arrow-left-metrodark, .jqx-menu-item-arrow-left-metrodark
220 {
221 background-image: url('images/metro-icon-left-white.png');
222 }
223 .jqx-icon-arrow-right-metrodark, .jqx-menu-item-arrow-right-metrodark, .jqx-tree-item-arrow-collapse-metrodark, .jqx-tree-item-arrow-collapse-hover-metrodark
224 {
225 background-image: url('images/metro-icon-right-white.png');
226 }
227 .jqx-tabs-arrow-left-metrodark, .jqx-tree-item-arrow-collapse-rtl-metrodark, .jqx-tree-item-arrow-collapse-hover-rtl-metrodark
228 {
229 background-image: url('images/metro-icon-left-white.png');
230 }
231 .jqx-tabs-arrow-right-metrodark
232 {
233 background-image: url('images/metro-icon-right-white.png');
234 }
235 .jqx-menu-item-arrow-up-selected-metrodark, .jqx-icon-arrow-up-selected-metrodark{background-image:url('images/metro-icon-up-white.png');background-repeat:no-repeat;background-position:center;}
236 .jqx-menu-item-arrow-down-selected-metrodark, .jqx-icon-arrow-down-selected-metrodark{background-image:url('images/metro-icon-down-white.png');background-repeat:no-repeat;background-position:center;}
237 .jqx-menu-item-arrow-left-selected-metrodark, .jqx-icon-arrow-left-selected-metrodark{background-image:url('images/metro-icon-left-white.png');background-repeat:no-repeat;background-position:center;}
238 .jqx-menu-item-arrow-right-selected-metrodark, .jqx-icon-arrow-right-selected-metrodark{background-image:url('images/metro-icon-right-white.png');background-repeat:no-repeat;background-position:center;}
239 .jqx-window-close-button-metrodark, .jqx-icon-close-metrodark, .jqx-tabs-close-button-metrodark, .jqx-tabs-close-button-hover-metrodark, .jqx-tabs-close-button-selected-metrodark{background-image:url(images/close_white.png); background-repeat:no-repeat; background-position:center}
240 .jqx-listbox-feedback-metrodark {
241 border-top: 1px dashed #fff;
242 }
243
244 .jqx-scrollbar-metrodark .jqx-icon-arrow-up-selected-metrodark{background-image:url('images/metro-icon-up-white.png'); background-repeat:no-repeat; background-position:center;}
245 .jqx-scrollbar-metrodark .jqx-icon-arrow-down-selected-metrodark{background-image:url('images/metro-icon-down-white.png'); background-repeat:no-repeat; background-position:center;}
246 .jqx-scrollbar-metrodark .jqx-icon-arrow-left-selected-metrodark{background-image:url('images/metro-icon-left-white.png'); background-repeat:no-repeat; background-position:center;}
247 .jqx-scrollbar-metrodark .jqx-icon-arrow-right-selected-metrodark{background-image:url('images/metro-icon-right-white.png');background-repeat:no-repeat; background-position:center;}
248 .jqx-slider-button-metrodark
249 {
250 border-radius: 100%;
251 -moz-border-radius: 100%;
252 -webkit-border-radius: 100%;
253 }
254 .jqx-input-button-content-metrodark
255 {
256 font-size: 10px;
257 }
258 .jqx-dropdownlist-state-normal-metrodark, .jqx-dropdownlist-state-hover-metrodark, .jqx-dropdownlist-state-selected-metrodark,
259 .jqx-scrollbar-button-state-hover-metrodark, .jqx-scrollbar-button-state-normal-metrodark, .jqx-scrollbar-button-state-pressed-metrodark,
260 .jqx-scrollbar-thumb-state-normal-horizontal-metrodark, .jqx-scrollbar-thumb-state-hover-horizontal-metrodark, .jqx-scrollbar-thumb-state-pressed-horizontal-metrodark,
261 .jqx-scrollbar-thumb-state-normal-metrodark, .jqx-scrollbar-thumb-state-pressed-metrodark, .jqx-button-metrodark, .jqx-tree-item-hover-metrodark, .jqx-tree-item-selected-metrodark,
262 .jqx-tree-item-metrodark, .jqx-menu-item-metrodark, .jqx-menu-item-hover-metrodark, .jqx-menu-item-selected-metrodark, .jqx-menu-item-top-metrodark, .jqx-menu-item-top-hover-metrodark,
263 .jqx-menu-item-top-selected-metrodark, .jqx-slider-button-metrodark, .jqx-slider-slider-metrodark
264 {
265 -webkit-transition: background-color 100ms linear;
266 -moz-transition: background-color 100ms linear;
267 -o-transition: background-color 100ms linear;
268 -ms-transition: background-color 100ms linear;
269 transition: background-color 100ms linear;
270 }
271 .jqx-switchbutton-metrodark {
272 -moz-border-radius: 0px;
273 -webkit-border-radius: 0px;
274 border-radius: 0px;
275 border: 2px solid #35353A;
276 }
277 .jqx-switchbutton-thumb-metrodark {
278 width: 12px;
279 background: #000;
280 border: 1px solid #000;
281 }
282 .jqx-switchbutton-label-on-metrodark {
283 background: #007ACC;
284 color: #007ACC;
285 }
286 .jqx-switchbutton-label-off-metrodark {
287 background: #a6a6a6;
288 color: #a6a6a6;
289 }
290
291 .jqx-switchbutton-wrapper-metrodark {
292 }
293 .jqx-grid-group-collapse-metrodark {
294 background-image: url(images/metro-icon-right-white.png);
295 background-position: 50% 50%;
296 background-repeat: no-repeat;
297 }
298 .jqx-grid-group-collapse-rtl-metrodark
299 {
300 padding-right: 0px;
301 background-image: url(images/metro-icon-left-white.png);
302 background-position: 50% 50%;
303 background-repeat: no-repeat;
304 }
305 .jqx-grid-group-expand-metrodark, .jqx-grid-group-expand-rtl-metrodark
306 {
307 padding-right: 0px;
308 background-image: url(images/metro-icon-down-white.png);
309 background-position: 50% 50%;
310 background-repeat: no-repeat;
311 }
312 .jqx-icon-arrow-first-metrodark, .jqx-icon-arrow-first-hover-metrodark, .jqx-icon-arrow-first-selected-metrodark
313 {
314 background-image: url('images/metro-icon-first-white.png');
315 background-repeat: no-repeat;
316 background-position: center;
317 }
318 .jqx-icon-arrow-last-metrodark, .jqx-icon-arrow-last-hover-metrodark, .jqx-icon-arrow-last-selected-metrodark
319 {
320 background-image: url('images/metro-icon-last-white.png');
321 background-repeat: no-repeat;
322 background-position: center;
323 }
324 .jqx-grid-cell-metrodark.jqx-grid-cell-selected-metrodark>.jqx-grid-group-expand-metrodark,
325 .jqx-grid-cell-metrodark.jqx-grid-cell-hover-metrodark>.jqx-grid-group-expand-metrodark {
326 background-image: url('images/metro-icon-down-white.png');
327 background-repeat: no-repeat;
328 background-position: center;
329 }
330 .jqx-grid-cell-metrodark.jqx-grid-cell-selected-metrodark>.jqx-grid-group-collapse-metrodark,
331 .jqx-grid-cell-metrodark.jqx-grid-cell-hover-metrodark>.jqx-grid-group-collapse-metrodark {
332 background-image: url('images/metro-icon-right-white.png');
333 background-repeat: no-repeat;
334 background-position: center;
335 }
336 .jqx-grid-cell-metrodark.jqx-grid-cell-selected-metrodark>.jqx-grid-group-collapse-rtl-metrodark,
337 .jqx-grid-cell-metrodark.jqx-grid-cell-hover-metrodark>.jqx-grid-group-collapse-rtl-metrodark {
338 background-image: url('images/metro-icon-left-white.png');
339 background-repeat: no-repeat;
340 background-position: center;
341 }
342 .jqx-grid-cell-metrodark.jqx-grid-cell-selected-metrodark>.jqx-grid-group-expand-rtl-metrodark,
343 .jqx-grid-cell-metrodark.jqx-grid-cell-hover-metrodark>.jqx-grid-group-expand-rtl-metrodark {
344 background-image: url('images/metro-icon-down-white.png');
345 background-repeat: no-repeat;
346 background-position: center;
347 }
348 .jqx-tree-grid-expand-button-metrodark {
349 margin-top: 3px;
350 }
351 .jqx-icon-search-metrodark
352 {
353 background-image: url(images/search_white.png);
354 background-repeat: no-repeat;
355 background-position: center;
356 }
357 .jqx-passwordinput-password-icon-metrodark, .jqx-passwordinput-password-icon-rtl-metrodark
358 {
359 background-image: url(images/icon-showpassword-white.png) !important;
360 background-repeat: no-repeat !important;
361 }
362 .jqx-icon-calendar-metrodark, .jqx-icon-calendar-hover-metrodark, .jqx-icon-calendar-pressed-metrodark {
363 background-image: url('images/icon-calendar-white.png');
364 }
365 .jqx-icon-time-metrodark, .jqx-icon-time-hover-metrodark, .jqx-icon-time-pressed-metrodark {
366 background-image: url('images/icon-time-white.png');
367 }
368 .jqx-icon-delete-metrodark
369 {
370 background-image: url('images/icon-delete-white.png');
371 }
372 .jqx-icon-edit-metrodark
373 {
374 background-image: url('images/icon-edit-white.png');
375 }
376 .jqx-icon-save-metrodark
377 {
378 background-image: url('images/icon-save-white.png');
379 }
380 .jqx-icon-cancel-metrodark
381 {
382 background-image: url('images/icon-cancel-white.png');
383 }
384 .jqx-icon-search-metrodark
385 {
386 background-image: url(images/search_white.png);
387 }
388 .jqx-icon-plus-metrodark
389 {
390 background-image: url(images/plus_white.png);
391 }
392 .jqx-menu-minimized-button-metrodark {
393 background-image: url('images/icon-menu-minimized-white.png');
394 }
395 .jqx-editor-toolbar-icon-metrodark {
396 background: url('images/html_editor_white.png') no-repeat;
397 }
398 .jqx-layout-metrodark
399 {
400 background-color: #35353A;
401 }
402 .jqx-layout-pseudo-window-pin-icon-metrodark
403 {
404 background-image: url("images/pin-white.png");
405 }
406 .jqx-layout-pseudo-window-pinned-icon-metrodark
407 {
408 background-image: url("images/pinned-white.png");
409 }
410 .jqx-scheduler-month-cell-metrodark, .jqx-scheduler-time-column-metrodark, .jqx-scheduler-toolbar-metrodark
411 {
412 background: #35353A !important;
413 color: #fff !important;
414 }
415 .jqx-widget-metrodark .jqx-scheduler-middle-cell-metrodark, .jqx-scheduler-middle-cell-metrodark {
416 border-bottom-color: #35353A !important;
417 }
418 .jqx-kanban-item-metrodark {
419 box-shadow:none;
420 }
421
422 .jqx-input-metrodark {
423 color: #fff;
424 }

mercurial