www-thermferm/jqwidgets/styles/jqx.dark.css

changeset 709
5b6d7b640e52
parent 708
13555c27b592
child 710
abe60578d695
equal deleted inserted replaced
708:13555c27b592 709:5b6d7b640e52
1 
2 :root {
3 --jqx-primary-rgb: 51, 173, 255;
4 --jqx-primary: rgb(var(--jqx-primary-rgb));
5 --jqx-background: #252526;
6 --jqx-background-color: #E7E7E7;
7 --jqx-surface:#252526;
8 --jqx-surface-color: #969690;
9 --jqx-border: #414141;
10 --jqx-background-hover-rgb: 60, 60, 60;
11 --jqx-background-hover: rgb(var(--jqx-background-hover-rgb));
12 --jqx-background-color-hover: rgba(255,255,255,.54);
13 --jqx-scrollbar-background: #3E3E42;
14 --jqx-scrollbar-border: #1E1E1E;
15 --jqx-scrollbar-thumb-background: #686868;
16 --jqx-scrollbar-thumb-border: #3E3E42;
17 --jqx-scrollbar-thumb-background-hover: #9E9E9E;
18 --jqx-scrollbar-thumb-border-hover: #9E9E9E;
19 --jqx-scrollbar-thumb-background-pressed: #f5f5f5;
20 --jqx-scrollbar-thumb-border-pressed: #f5f5f5;
21 --jqx-scrollbar-button-color-hover: #333;
22 --jqx-scrollbar-button-background-hover: #9E9E9E;
23 --jqx-scrollbar-button-border-hover: #9E9E9E;
24 --jqx-scrollbar-button-color-pressed: #333;
25 --jqx-scrollbar-button-background-pressed: #f5f5f5;
26 --jqx-scrollbar-button-border-pressed: #f5f5f5;
27
28 }
29
30 .jqx-icon-search-dark,
31 .jqx-icon-close-dark {
32 background-image: none;
33 font-family: jqx-icons;
34 }
35 .jqx-icon-close-dark:after {
36 content: var(--jqx-icon-close);
37 }
38 .jqx-icon-search-dark:after {
39 content: var(--jqx-icon-search);
40 color:
41
42 }
43 .jqx-calendar-dark {
44 width: 280px !important;
45 height: 280px !important;
46 }
47 .jqx-fill-state-normal-dark {
48 background: var(--jqx-background);
49 color: var(--jqx-background-color);
50 border-color: var(--jqx-border);
51 }
52 .jqx-fill-state-hover-dark {
53 background: var(--jqx-background-hover);
54 color: var(--jqx-background-color-hover);
55 border-color: var(--jqx-background-hover);
56 }
57 .jqx-fill-state-pressed-dark {
58 background: var(--jqx-primary);
59 color: var(--jqx-primary-color);
60 border-color: var(--jqx-primary);
61 }
62
63 @font-face {
64 font-family: jqx-icons;
65 src: local('./font/jqx-icons'), url('./font/jqx-icons.woff2') format('woff2'), url('./font/jqx-icons.woff') format('woff'), url('./font/jqx-icons.ttf') format('truetype'), url('./font/jqx-icons.eot') format('embedded-opentype');
66 font-weight: normal;
67 font-style: normal;
68 }
69 /*Rounded Corners*/
70 /*top-left rounded Corners*/
71 .jqx-rc-tl-dark {
72 border-top-left-radius: var(--jqx-border-radius);
73 }
74 /*top-right rounded Corners*/
75 .jqx-rc-tr-dark {
76 border-top-right-radius: var(--jqx-border-radius);
77 }
78 /*bottom-left rounded Corners*/
79 .jqx-rc-bl-dark {
80 border-bottom-left-radius: var(--jqx-border-radius);
81 }
82 /*bottom-right rounded Corners*/
83 .jqx-rc-br-dark {
84 border-bottom-right-radius: var(--jqx-border-radius);
85 }
86 /*top rounded Corners*/
87 .jqx-rc-t-dark {
88 border-top-left-radius: var(--jqx-border-radius);
89 border-top-right-radius: var(--jqx-border-radius);
90 }
91 /*bottom rounded Corners*/
92 .jqx-rc-b-dark {
93 border-bottom-left-radius: var(--jqx-border-radius);
94 border-bottom-right-radius:var(--jqx-border-radius);
95 }
96 /*right rounded Corners*/
97 .jqx-rc-r-dark {
98 border-top-right-radius: var(--jqx-border-radius);
99 border-bottom-right-radius: var(--jqx-border-radius);
100 }
101 /*left rounded Corners*/
102 .jqx-rc-l-dark {
103 border-top-left-radius: var(--jqx-border-radius);
104 border-bottom-left-radius: var(--jqx-border-radius);
105 }
106 /*all rounded Corners*/
107 .jqx-rc-all-dark {
108 border-radius: var(--jqx-border-radius);
109 }
110
111 .jqx-widget-dark, .jqx-widget-header-dark, .jqx-fill-state-normal-dark,
112 .jqx-widget-content-dark, .jqx-fill-state-hover-dark, .jqx-fill-state-pressed-dark {
113 font-family: var(--jqx-font-family);
114 font-size: var(--jqx-font-size);
115 }
116
117 .jqx-widget-dark {
118 font-family: var(--jqx-font-family);
119 font-size: var(--jqx-font-size);
120 color: inherit;
121 border-color:var(--jqx-border);
122 }
123
124 .jqx-widget-content-dark {
125 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
126 font-size: 14px;
127 color: var(--jqx-background-color);
128 background-color: var(--jqx-background);
129 border-color: var(--jqx-border);
130 }
131 .jqx-grid-table-dark.jqx-grid-table-one-cell {
132 border-right-color: var(--jqx-border);
133 }
134 .jqx-widget-header-dark {
135 background-color: var(--jqx-surface);
136 border-color: var(--jqx-border);
137 font-weight: 500;
138 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
139 font-size: 14px;
140 background: var(--jqx-surface);
141 color: var(--jqx-surface-color);
142 }
143
144 .jqx-calendar-title-header-dark {
145 text-transform: uppercase;
146 }
147 .jqx-window-header-dark {
148 padding: 10px;
149 text-transform: uppercase;
150 color: var(--jqx-surface-color);
151 background: var(--jqx-surface);
152 }
153 .jqx-calendar tr {
154 border-bottom-color: var(--jqx-border);
155 }
156
157
158 .jqx-widget-dark input::selection, input.jqx-input-widget-dark::selection, .jqx-widget-content-dark input::selection {
159 background: var(--jqx-primary);
160 color: var(--jqx-primary-color);
161 }
162 .jqx-toolbar-dark{
163 border-color: var(--jqx-border);
164 }
165
166 .jqx-toolbar-dark {
167 height: auto !important;
168 display: flex;
169 align-items: center;
170 }
171
172 .jqx-button-dark, .jqx-button-dark.jqx-fill-state-normal-dark {
173 color: var(--jqx-background-color);
174 background-color: var(--jqx-background);
175 border-color: var(--jqx-border);
176 text-transform: uppercase;
177 text-overflow: ellipsis;
178 overflow: hidden;
179 white-space: nowrap;
180 outline: none;
181 transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
182 border-radius: 4px;
183 box-shadow: 0 0 0 0 rgba(0,0,0,.2), 0 0 0 0 rgba(0,0,0,.14), 0 0 0 0 var(--jqx-border);
184 }
185 .jqx-button-dark.jqx-fill-state-hover-dark,
186 .jqx-button-dark.jqx-fill-state-pressed-dark {
187 background-color: var(--jqx-background-hover);
188 border-color: var(--jqx-border);
189 color: var(--jqx-background-color-hover);
190 }
191
192 .jqx-button-dark.primary {
193 color: var(--jqx-primary-color);
194 background-color: var(--jqx-primary);
195 border-color: var(--jqx-primary);
196 }
197 .jqx-button-dark.jqx-fill-state-hover-dark.primary,
198 .jqx-button-dark.jqx-fill-state-pressed-dark.primary {
199 color: var(--jqx-primary-color);
200 background-color: var(--jqx-primary);
201 border-color: var(--jqx-primary);
202 }
203 .jqx-button-dark.secondary,
204 .jqx-button-dark.jqx-toolbar-tool {
205 background-color: var(--jqx-surface);
206 border-color: var(--jqx-border);
207 color: var(--jqx-surface-color) !important;
208 }
209 .jqx-button-dark.secondary:hover,
210 .jqx-button-dark.jqx-toolbar-tool:hover {
211 background-color: var(--jqx-background-hover);
212 border-color: var(--jqx-border);
213 color: var(--jqx-background-color-hover) !important;
214 }
215 .jqx-button-dark.secondary:active,
216 .jqx-button-dark.jqx-toolbar-tool:active {
217 background-color: var(--jqx-surface);
218 border-color: var(--jqx-border);
219 color: var(--jqx-surface-color) !important;
220 }
221 .jqx-scheduler-edit-dialog-field .jqx-button-dark {
222 padding: 6px 16px;
223 text-transform: uppercase;
224 }
225
226 .jqx-button-dark button, jqx-button-dark input {
227 background: transparent;
228 color: inherit;
229 border:none;
230 outline: none;
231 }
232 .jqx-group-button-normal-dark{
233 box-shadow: none;
234 background: var(--jqx-background);
235 border-color: var(--jqx-border);
236 color: var(--jqx-background-color) !important;
237 border-radius:0px;
238 }
239 .jqx-group-button-normal.jqx-fill-state-hover {
240 box-shadow: none !important;
241 }
242 .jqx-group-button-normal.jqx-fill-state-pressed {
243 box-shadow: none !important;
244 background: var(--jqx-primary) !important;
245 border-color: var(--jqx-primary) !important;
246 color: var(--jqx-primary-color)!important;
247 border-radius:0px;
248 }
249
250
251 .jqx-slider-button-dark {
252 padding:3px;
253 background: transparent;
254 border:transparent;
255 }
256 .jqx-button-dark.float {
257 border-radius: 100%;
258 min-height: 48px;
259 min-width: 48px;
260 width: 48px;
261 height: 48px;
262 max-height: 48px;
263 max-width:48px;
264 }
265
266 .jqx-button-dark.outlined {
267 background: transparent;
268 color: var(--jqx-primary);
269 border-width: 2px;
270 }
271
272 .jqx-button-dark.flat {
273 background: transparent;
274 color: var(--jqx-primary);
275 border: none;
276 }
277
278 .jqx-fill-state-hover-dark, .jqx-fill-state-focus-dark {
279 text-decoration: none;
280 }
281
282 .jqx-expander-header.jqx-fill-state-hover-dark,
283 .jqx-expander-header.jqx-fill-state-normal-dark,
284 .jqx-expander-header.jqx-fill-state-pressed-dark
285 {
286 background: var(--jqx-background-hover);
287 border-color: var(--jqx-border);
288 color:var(--jqx-background-color-hover);
289 }
290 .jqx-expander-header.jqx-fill-state-hover-dark {
291 background: var(--jqx-background-hover);
292 }
293
294 .jqx-expander-header-dark {
295 padding:10px;
296 }
297 .jqx-button-dark.jqx-fill-state-hover {
298 opacity: 0.9;
299 cursor: pointer;
300 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
301 *zoom: 1;
302 }
303 .jqx-expander-content-dark{
304 padding:0px;
305 }
306
307 .jqx-button-dark.jqx-fill-state-hover.outlined,
308 .jqx-button-dark.jqx-fill-state-hover.flat {
309 color: var(--jqx-primary);
310 box-shadow: none;
311 }
312
313 .jqx-button-dark.jqx-fill-state-pressed {
314 cursor: pointer;
315 box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
316 }
317
318 .jqx-button-dark.jqx-fill-state-pressed.float {
319 box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
320 }
321
322 .jqx-slider-button-dark.jqx-fill-state-pressed-dark,
323 .jqx-button-dark.jqx-fill-state-pressed.outlined,
324 .jqx-button-dark.jqx-fill-state-pressed.flat {
325 background: rgba(179,229,252,0.15);
326 box-shadow: none;
327 color: var(--jqx-primary);
328 }
329
330 .jqx-button-dark.jqx-fill-state-focus {
331 box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
332 }
333 .jqx-slider-button-dark.jqx-fill-state-focus-dark {
334 background: transparent;
335 border-color: transparent;
336 box-shadow:none;
337 }
338
339 .jqx-button-dark.jqx-fill-state-focus.outlined,
340 .jqx-button-dark.jqx-fill-state-focus.flat {
341 box-shadow: none;
342 background: rgba(rgb(var(--jqx-primary-rgb)),0.15);
343 color: var(--jqx-primary);
344 }
345
346 .jqx-dropdownlist-content-dark {
347 display: flex;
348 align-items: center;
349 height: 100% !important;
350 margin-top: 0px !important;
351 }
352
353 .jqx-dropdownlist-content-dark span {
354 top: 0px !important;
355 }
356 .jqx-dropdownlist-state-normal-dark, .jqx-dropdownlist-state-hover-dark, .jqx-dropdownlist-state-selected-dark,
357 .jqx-scrollbar-button-state-hover-dark, .jqx-scrollbar-button-state-normal-dark, .jqx-scrollbar-button-state-pressed-dark,
358 .jqx-scrollbar-thumb-state-normal-horizontal-dark, .jqx-scrollbar-thumb-state-hover-horizontal-dark, .jqx-scrollbar-thumb-state-pressed-horizontal-dark,
359 .jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-pressed-dark, .jqx-tree-item-hover-dark, .jqx-tree-item-selected-dark,
360 .jqx-tree-item-dark, .jqx-menu-item-dark, .jqx-menu-item-hover-dark, .jqx-menu-item-selected-dark, .jqx-menu-item-top-dark, .jqx-menu-item-top-hover-dark,
361 .jqx-menu-item-top-selected-dark, .jqx-slider-button-dark, .jqx-slider-slider-dark {
362 -webkit-transition: background-color 100ms linear;
363 -moz-transition: background-color 100ms linear;
364 -o-transition: background-color 100ms linear;
365 -ms-transition: background-color 100ms linear;
366 transition: background-color 100ms linear;
367 }
368
369
370 .jqx-primary-dark.jqx-input-label-dark {
371 color: var(--jqx-primary) !important;
372 }
373 .jqx-primary-dark.jqx-input-bar-dark:before {
374 background: var(--jqx-primary) !important;
375 }
376 .jqx-success-dark.jqx-input-label-dark {
377 color: #5cb85c !important;
378 }
379 .jqx-success-dark.jqx-input-bar-dark:before {
380 background: #5cb85c !important;
381 }
382 .jqx-inverse-dark.jqx-input-label-dark {
383 color: #666 !important;
384 }
385 .jqx-inverse-dark.jqx-input-bar-dark:before {
386 background: #666 !important;
387 }
388 .jqx-danger-dark.jqx-input-label-dark {
389 color: #d9534f !important;
390 }
391 .jqx-danger-dark.jqx-input-bar-dark:before {
392 background: #d9534f !important;
393 }
394 .jqx-warning-dark.jqx-input-label-dark {
395 color: #f0ad4e !important;
396 }
397 .jqx-warning-dark.jqx-input-bar-dark:before {
398 background: #f0ad4e !important;
399 }
400 .jqx-info-dark.jqx-input-label-dark {
401 color: #5bc0de !important;
402 }
403 .jqx-info-dark.jqx-input-bar-dark:before {
404 background: #5bc0de !important;
405 }
406
407 .jqx-slider-tooltip-dark.jqx-primary-slider, .jqx-slider-tooltip-dark.jqx-primary-slider .jqx-fill-state-normal-dark {
408 border-color: var(--jqx-primary);
409 background: var(--jqx-primary);
410 }
411 .jqx-slider-tooltip-dark.jqx-success-slider, .jqx-slider-tooltip-dark.jqx-success-slider .jqx-fill-state-normal-dark {
412 border-color: #5cb85c;
413 background: #5cb85c;
414 }
415 .jqx-slider-tooltip-dark.jqx-inverse-slider, .jqx-slider-tooltip-dark.jqx-inverse-slider .jqx-fill-state-normal-dark {
416 border-color: #666;
417 background: #666;
418 }
419 .jqx-slider-tooltip-dark.jqx-danger-slider, .jqx-slider-tooltip-dark.jqx-danger-slider .jqx-fill-state-normal-dark {
420 border-color: #d9534f;
421 background: #d9534f;
422 }
423 .jqx-slider-tooltip-dark.jqx-warning-slider, .jqx-slider-tooltip-dark.jqx-warning-slider .jqx-fill-state-normal-dark {
424 border-color: #f0ad4e;
425 background: #f0ad4e;
426 }
427 .jqx-slider-tooltip-dark.jqx-info-slider, .jqx-slider-tooltip-dark.jqx-info-slider .jqx-fill-state-normal-dark {
428 border-color: #5bc0de;
429 background: #5bc0de;
430 }
431
432
433 .jqx-primary-dark {
434 color: var(--jqx-primary) !important;
435 background: #fff !important;
436 border-color: var(--jqx-primary) !important;
437 text-shadow: none !important;
438 }
439
440 .jqx-primary-dark.jqx-dropdownlist-state-normal-dark,
441 .jqx-primary-dark.jqx-slider-button-dark,
442 .jqx-primary-dark.jqx-slider-slider-dark,
443 .jqx-primary-dark.jqx-combobox-arrow-normal-dark,
444 .jqx-primary-dark.jqx-combobox-arrow-hover-dark,
445 .jqx-primary-dark.jqx-action-button-dark,
446 .jqx-primary-dark:hover,
447 .jqx-primary-dark:focus,
448 .jqx-primary-dark:active,
449 .jqx-primary-dark.active,
450 .jqx-primary-dark.disabled,
451 .jqx-primary-dark[disabled] {
452 color: #fff !important;
453 background: var(--jqx-primary) !important;
454 border-color: var(--jqx-primary) !important;
455 text-shadow: none !important;
456 }
457
458 .jqx-fill-state-pressed-dark.jqx-primary-dark,
459 .jqx-primary-dark:active,
460 .jqx-primary-dark.active {
461 color: #fff !important;
462 background-color: var(--jqx-primary) !important;
463 border-color: var(--jqx-primary) !important;
464 text-shadow: none !important;
465 }
466
467 .jqx-success-dark {
468 color: #5cb85c !important;
469 background: #fff !important;
470 border-color: #5cb85c !important;
471 text-shadow: none !important;
472 }
473
474 .jqx-success-dark.jqx-dropdownlist-state-normal-dark,
475 .jqx-success-dark.jqx-slider-button-dark,
476 .jqx-success-dark.jqx-slider-slider-dark,
477 .jqx-success-dark.jqx-combobox-arrow-normal-dark,
478 .jqx-success-dark.jqx-combobox-arrow-hover-dark,
479 .jqx-success-dark.jqx-action-button-dark,
480 .jqx-success-dark:hover,
481 .jqx-success-dark:focus,
482 .jqx-success-dark:active,
483 .jqx-success-dark.active,
484 .jqx-success-dark.disabled,
485 .jqx-success-dark[disabled] {
486 color: #fff !important;
487 background: #5cb85c !important;
488 border-color: #5cb85c !important;
489 text-shadow: none !important;
490 }
491
492 .jqx-fill-state-pressed-dark.jqx-success-dark,
493 .jqx-success-dark:active,
494 .jqx-success-dark.active {
495 text-shadow: none !important;
496 color: #fff !important;
497 background: #5cb85c !important;
498 border-color: #5cb85c !important;
499 }
500
501 .jqx-inverse-dark {
502 text-shadow: none !important;
503 color: #666 !important;
504 background: #fff !important;
505 border-color: #cccccc !important;
506 }
507
508 .jqx-inverse-dark.jqx-dropdownlist-state-normal-dark,
509 .jqx-inverse-dark.jqx-slider-button-dark,
510 .jqx-inverse-dark.jqx-slider-slider-dark,
511 .jqx-inverse-dark.jqx-combobox-arrow-hover-dark,
512 .jqx-inverse-dark.jqx-combobox-arrow-normal-dark,
513 .jqx-inverse-dark.jqx-action-button-dark,
514 .jqx-inverse-dark:hover,
515 .jqx-inverse-dark:focus,
516 .jqx-inverse-dark:active,
517 .jqx-inverse-dark.active,
518 .jqx-inverse-dark.disabled,
519 .jqx-inverse-dark[disabled] {
520 text-shadow: none !important;
521 color: #666 !important;
522 background: #cccccc !important;
523 border-color: #cccccc !important;
524 }
525
526 .jqx-fill-state-pressed-dark.jqx-inverse-dark,
527 .jqx-inverse-dark:active,
528 .jqx-inverse-dark.active {
529 text-shadow: none !important;
530 color: #666 !important;
531 background: #cccccc !important;
532 border-color: #cccccc !important;
533 }
534
535
536 .jqx-danger-dark {
537 text-shadow: none !important;
538 color: #d9534f !important;
539 background: #fff !important;
540 border-color: #d9534f !important;
541 }
542
543 .jqx-danger-dark.jqx-dropdownlist-state-normal-dark,
544 .jqx-danger-dark.jqx-slider-button-dark,
545 .jqx-danger-dark.jqx-slider-slider-dark,
546 .jqx-danger-dark.jqx-combobox-arrow-hover-dark,
547 .jqx-danger-dark.jqx-combobox-arrow-normal-dark,
548 .jqx-danger-dark.jqx-action-button-dark,
549 .jqx-danger-dark:hover,
550 .jqx-danger-dark:focus,
551 .jqx-danger-dark:active,
552 .jqx-danger-dark.active,
553 .jqx-danger-dark.disabled,
554 .jqx-danger-dark[disabled] {
555 text-shadow: none !important;
556 color: #fff !important;
557 background: #d9534f !important;
558 border-color: #d9534f !important;
559 }
560
561 .jqx-fill-state-pressed-dark.jqx-danger-dark,
562 .jqx-danger-dark:active,
563 .jqx-danger-dark.active {
564 text-shadow: none !important;
565 color: #fff !important;
566 background: #d9534f !important;
567 border-color: #d9534f !important;
568 }
569
570 .jqx-validator-error-label-dark {
571 color: #d9534f !important;
572 }
573
574 .jqx-warning-dark {
575 text-shadow: none !important;
576 color: #f0ad4e !important;
577 background: #fff !important;
578 border-color: #f0ad4e !important;
579 }
580
581 .jqx-warning-dark.jqx-dropdownlist-state-normal-dark,
582 .jqx-warning-dark.jqx-slider-button-dark,
583 .jqx-warning-dark.jqx-slider-slider-dark,
584 .jqx-warning-dark.jqx-combobox-arrow-hover-dark,
585 .jqx-warning-dark.jqx-combobox-arrow-normal-dark,
586 .jqx-warning-dark.jqx-action-button-dark,
587 .jqx-warning-dark:hover,
588 .jqx-warning-dark:focus,
589 .jqx-warning-dark:active,
590 .jqx-warning-dark.active,
591 .jqx-warning-dark.disabled,
592 .jqx-warning-dark[disabled] {
593 text-shadow: none !important;
594 color: #fff !important;
595 background: #f0ad4e !important;
596 border-color: #f0ad4e !important;
597 }
598
599 .jqx-fill-state-pressed-dark.jqx-warning-dark,
600 .jqx-warning-dark:active,
601 .jqx-warning-dark.active {
602 text-shadow: none !important;
603 color: #fff !important;
604 background: #f0ad4e !important;
605 border-color: #f0ad4e !important;
606 }
607
608
609 .jqx-info-dark {
610 text-shadow: none !important;
611 color: #5bc0de !important;
612 background: #fff !important;
613 border-color: #5bc0de !important;
614 }
615
616 .jqx-info-dark.jqx-dropdownlist-state-normal-dark,
617 .jqx-info-dark.jqx-slider-button-dark,
618 .jqx-info-dark.jqx-slider-slider-dark,
619 .jqx-info-dark.jqx-combobox-arrow-hover-dark,
620 .jqx-info-dark.jqx-combobox-arrow-normal-dark,
621 .jqx-info-dark.jqx-action-button-dark,
622 .jqx-info-dark:hover,
623 .jqx-info-dark:focus,
624 .jqx-info-dark:active,
625 .jqx-info-dark.active,
626 .jqx-info-dark.disabled,
627 .jqx-info-dark[disabled] {
628 color: #fff !important;
629 background: #5bc0de !important;
630 border-color: #5bc0de !important;
631 text-shadow: none !important;
632 }
633
634 .jqx-fill-state-pressed-dark.jqx-info-dark,
635 .jqx-info-dark:active,
636 .jqx-info-dark.active {
637 text-shadow: none !important;
638 color: #fff !important;
639 background: #5bc0de !important;
640 border-color: #5bc0de !important;
641 }
642
643 .jqx-fill-state-pressed-dark {
644 background-image: none;
645 outline: 0;
646 }
647
648 .jqx-grid-group-column-dark {
649 border-color: transparent;
650 }
651 .jqx-grid-column-menubutton-dark {
652 border-width: 0px;
653 }
654 .jqx-grid-groups-row-dark > span {
655 padding-left: 4px;
656 }
657 .jqx-grid-column-filterbutton-dark,
658 .jqx-grid-column-menubutton-dark{
659 background-image: none;
660 font-family: 'jqx-icons';
661 display: flex;
662 justify-content: center;
663 align-items: center;
664 margin-top: 0px;
665 }
666
667 .jqx-grid-column-filterbutton-dark:after {
668 content: var(--jqx-icon-filter);
669 background: var(--jqx-surface);
670 color: var(--jqx-surface-color);
671 }
672 .jqx-grid-column-menubutton-dark:after {
673 content: var(--jqx-icon-menu) !important;
674 background: var(--jqx-surface);
675 color: var(--jqx-surface-color);
676 }
677
678 .jqx-datatable-dark .jqx-widget-header-dark .jqx-grid-column-header-dark {
679 border-right-color: var(--jqx-border);
680 }
681 .jqx-datatable-dark .jqx-widget-header-dark:not(:hover) .jqx-grid-column-header-dark {
682 border-right-color: transparent !important;
683 }
684
685 .jqx-datatable-dark td.jqx-grid-cell-dark,
686 .jqx-treegrid-dark .jqx-grid-cell-dark{
687 padding-top: 10px;
688 padding-bottom: 9px;
689 font-size: 14px;
690 border-left: none !important;
691 }
692
693 .jqx-grid-cell-dark {
694 background: var(--jqx-background);
695 color: var(--jqx-background-color);
696 -webkit-box-shadow: none;
697 -moz-box-shadow: none;
698 box-shadow: none;
699 }
700 .jqx-grid-cell-alt-dark {
701 background: #333;
702 color: var(--jqx-surface-color);
703 }
704
705 .jqx-grid-pager-top-dark .jqx-button-dark,
706 .jqx-grid-pager-dark .jqx-button-dark {
707 color: inherit !important;
708 background-color: transparent !important;
709 border-color: transparent !important;
710 position: relative;
711 top: 0px;
712 border-radius: 4px;
713 display: flex;
714 font-size: 16px;
715 justify-content: center;
716 align-content: center;
717 }
718
719 .jqx-grid-pager-input-dark {
720 padding:0px !important;
721 }
722
723 .jqx-grid-pager-top-dark .jqx-button-dark > div,
724 .jqx-grid-pager-dark .jqx-button-dark > div {
725 top: 0px;
726 position: relative;
727 left: 0px;
728 display: flex;
729 align-items: center;
730 margin-left: 0px !important;
731 }
732
733 .jqx-grid-pager-top-dark .jqx-button-dark.jqx-fill-state-hover,
734 .jqx-grid-pager-dark .jqx-button-dark.jqx-fill-state-hover
735 {
736 color: var(--jqx-background-color-hover);
737 background: var(--jqx-background-hover);
738 border-color: var(--jqx-background-hover);
739 box-shadow: none;
740 }
741 .jqx-grid-pager-top-dark .jqx-button-dark.jqx-fill-state-pressed,
742 .jqx-grid-pager-dark .jqx-button-dark.jqx-fill-state-pressed
743 {
744 background: var(--jqx-primary);
745 }
746 .jqx-grid-pager-dark .jqx-button-dark:hover:after,
747 .jqx-grid-pager-top-dark .jqx-button-dark:hover:after,
748 .jqx-grid-pager-top-dark .jqx-button-dark.jqx-fill-state-pressed-dark:after,
749 .jqx-grid-pager-dark .jqx-button-dark.jqx-fill-state-pressed-dark:after {
750 content: '';
751 position: absolute;
752 width: calc(100% - 4px);
753 height: calc(100% - 4px);
754 border: 2px solid var(--jqx-background);
755 border-radius: 4px;
756 left:0px;
757 top:0px;
758 }
759 .jqx-grid-pager-top-dark .jqx-grid-pager-number-dark,
760 .jqx-grid-pager-dark .jqx-grid-pager-number-dark {
761 background-color: transparent;
762 border-color: transparent;
763 color: inherit;
764 font-size:14px;
765 padding: 6px 10px;
766 border-radius: 4px;
767
768 position: relative;
769 }
770
771 .jqx-grid-pager-top-dark .jqx-grid-pager-number-dark:hover,
772 .jqx-grid-pager-dark .jqx-grid-pager-number-dark:hover {
773 background: var(--jqx-background-hover);
774 color:var(--jqx-background-color-hover) !important;
775 font-size: var(--jqx-font-size);
776 }
777 .jqx-grid-pager-dark .jqx-grid-pager-number-dark:hover:after,
778 .jqx-grid-pager-top-dark .jqx-grid-pager-number-dark:hover:after,
779 .jqx-grid-pager-top-dark .jqx-grid-pager-number-dark.jqx-fill-state-pressed-dark:after,
780 .jqx-grid-pager-dark .jqx-grid-pager-number-dark.jqx-fill-state-pressed-dark:after {
781 content: '';
782 position: absolute;
783 width: calc(100% - 4px);
784 height: calc(100% - 4px);
785 border: 2px solid var(--jqx-background);
786 border-radius: var(--jqx-border-radius);
787 left:0px;
788 top:0px;
789 }
790 .jqx-grid-pager-top-dark .jqx-grid-pager-number-dark.jqx-fill-state-pressed-dark ,
791 .jqx-grid-pager-dark .jqx-grid-pager-number-dark.jqx-fill-state-pressed-dark {
792 font-weight: bold !important;
793 background: var(--jqx-primary);
794 color:var(--jqx-background) !important;
795 }
796
797 .jqx-grid-column-menubutton-dark {
798 background-color: transparent;
799 border-color: var(--jqx-border) !important;
800 }
801
802 .jqx-cell-dark {
803 font-size: 13px;
804 }
805
806 .jqx-calendar-dark > div {
807 padding: 0px;
808 box-sizing: border-box;
809 }
810 .jqx-calendar-month-dark {
811 width: 90%;
812 position: relative;
813 left: 5%;
814 }
815 .jqx-calendar-title-navigation-dark {
816 font-size: 20px;
817 padding: 0px 20px;
818 }
819 .jqx-calendar-row-header-dark, .jqx-calendar-top-left-header-dark {
820 background-color: var(--jqx-background);
821 border: 0px solid var(--jqx-background);
822 }
823
824 .jqx-calendar-column-header-dark {
825 background-color: var(--jqx-background);
826 border-top: 1px solid var(--jqx-background);
827 border-bottom: 1px solid var(--jqx-border);
828 font-size: 12px;
829 color: var(--jqx-background-color);
830 }
831
832 .jqx-expander-header-dark {
833 padding-top: 10px;
834 padding-bottom: 10px;
835 }
836
837 .jqx-ribbon-header-vertical-dark, .jqx-widget-header-vertical-dark {
838 background: var(--jqx-background);
839 }
840
841 .jqx-scrollbar-state-normal-dark {
842 background-color: var(--jqx-scrollbar-background);
843 border: 1px solid var(--jqx-scrollbar-background);
844 border-left-color: var(--jqx-scrollbar-border);
845 }
846
847 .jqx-scrollbar-thumb-state-normal-dark, .jqx-scrollbar-thumb-state-normal-horizontal-dark {
848 background: var(--jqx-scrollbar-thumb-background);
849 border-color: var(--jqx-scrollbar-thumb-border);
850 border-radius: 0px;
851 }
852
853 .jqx-scrollbar-thumb-state-hover-dark, .jqx-scrollbar-thumb-state-hover-horizontal-dark {
854 background: var(--jqx-scrollbar-thumb-background-hover);
855 border-color: var(--jqx-scrollbar-thumb-border-hover);
856 box-shadow: none;
857 -webkit-box-shadow: none;
858 -moz-box-shadow: none;
859 }
860
861 .jqx-progressbar-dark {
862 background: var(--jqx-background) !important;
863 -webkit-box-shadow: none;
864 -moz-box-shadow: none;
865 box-shadow: none;
866 }
867
868 .jqx-progressbar-value-dark, .jqx-splitter-collapse-button-horizontal-dark {
869 background: var(--jqx-primary);
870 }
871
872 .jqx-splitter-collapse-button-vertical-dark, .jqx-progressbar-value-vertical-dark {
873 background: var(--jqx-primary);
874 }
875 .jqx-scrollbar-mobile-dark .jqx-scrollbar-button-state-normal {
876 display: none !important;
877 }
878 .jqx-scrollbar-button-state-hover-dark {
879 color: var(--jqx-scrollbar-button-color-hover);
880 background: var(--jqx-scrollbar-button-background-hover);
881 border-color: var(--jqx-scrollbar-button-border-hover);
882 }
883
884
885 .jqx-scrollbar-button-state-pressed-dark {
886 color: var(--jqx-scrollbar-button-color-pressed);
887 background: var(--jqx-scrollbar-button-background-pressed);
888 border-color: var(--jqx-scrollbar-button-border-pressed);
889 }
890
891 .jqx-splitter-splitbar-vertical-dark,
892 .jqx-splitter-splitbar-horizontal-dark {
893 background: var(--jqx-scrollbar-thumb-background);
894 border-color: var(--jqx-scrollbar-thumb-border);
895 }
896
897 .jqx-scrollbar-thumb-state-pressed-dark,
898 .jqx-scrollbar-thumb-state-pressed-horizontal-dark,
899 .jqx-scrollbar-button-state-pressed-dark {
900 background: var(--jqx-scrollbar-thumb-background-pressed);
901 border-color: var(--jqx-scrollbar-thumb-border-pressed);
902 box-shadow: none;
903 }
904
905 .jqx-grid-column-sortdescbutton-dark, jqx-grid-column-filterbutton-dark, .jqx-grid-column-sortascbutton-dark {
906 background-color: transparent;
907 border-style: solid;
908 border-width: 0px 0px 0px 0px;
909 border-color: var(--jqx-border);
910 }
911
912 .jqx-menu-vertical-dark {
913 background: var(--jqx-background);
914 filter: none;
915 }
916
917 .jqx-grid-bottomright-dark, .jqx-panel-bottomright-dark, .jqx-listbox-bottomright-dark {
918 background-color: var(--jqx-scrollbar-background);
919 }
920
921 .jqx-window-dark, .jqx-tooltip-dark {
922 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
923 }
924 .jqx-tooltip-dark, .jqx-tooltip-dark.jqx-popup-dark, .jqx-tooltip-dark .jqx-fill-state-normal-dark {
925 background: var(--jqx-primary);
926 border-color: var(--jqx-primary);
927 box-shadow:none;
928 color: var(--jqx-primary-color);
929 }
930 .jqx-docking-dark .jqx-window-dark {
931 box-shadow: none;
932 }
933
934 .jqx-docking-panel-dark .jqx-window-dark {
935 box-shadow: none;
936 }
937
938 .jqx-checkbox-dark {
939 line-height:20px;
940 overflow: visible;
941 }
942 .jqx-radiobutton-dark {
943 overflow: visible;
944 box-shadow: none;
945 -webkit-box-shadow: none;
946 -moz-box-shadow: none;
947 background-repeat: no-repeat;
948 background: none;
949 line-height:20px;
950 }
951
952 .jqx-radiobutton-dark-dark, .jqx-radiobutton-hover-dark {
953 border-radius: 100%;
954 background-repeat: no-repeat;
955 transition: background-color ease-in .3s;
956 }
957
958 .jqx-radiobutton-check-checked-dark {
959 filter: none;
960 background: var(--jqx-background);
961 background-repeat: no-repeat;
962 border-radius: 100%;
963 }
964
965 .jqx-radiobutton-check-indeterminate-dark {
966 filter: none;
967 background: var(--jqx-background);
968 border-radius: 100%;
969 }
970
971 .jqx-radiobutton-check-indeterminate-disabled-dark {
972 filter: none;
973 background: var(--jqx-background);
974 opacity: 0.7;
975 border-radius: 100%;
976 }
977
978 .jqx-checkbox-default-dark,
979 .jqx-radiobutton-default-dark
980 {
981 border-width: 1px;
982 border-color: var(--jqx-border);
983 background-color: var(--jqx-background);
984 overflow: visible;
985 }
986
987 .jqx-tree-grid-expand-button-dark,
988 .jqx-tree-grid-collapse-button-dark {
989 font-size: 16px;
990 }
991 .jqx-grid-table-dark .jqx-grid-cell:first-child {
992 padding-left: 10px;
993 }
994 .jqx-tree-grid-title-dark {
995 margin-left: 5px;
996 }
997 .jqx-tree-dark .jqx-checkbox-dark .jqx-checkbox-default-dark,
998 .jqx-checkbox-dark[checked] .jqx-checkbox-default-dark,
999 .jqx-tree-grid-checkbox[checked].jqx-checkbox-default-dark,
1000 .jqx-radiobutton-dark[checked] .jqx-radiobutton-default-dark
1001 {
1002 color: var(--jqx-primary-color);
1003 background-color: var(--jqx-primary);
1004 border-color: var(--jqx-primary);
1005 }
1006 .jqx-menu-item-disabled-dark {
1007 color: inherit;
1008 }
1009
1010 .jqx-grid-dark .jqx-checkbox-default-dark {
1011 border-radius: 0px;
1012 }
1013 .jqx-checkbox-check-checked-dark {
1014 background: none;
1015 font-family: jqx-icons;
1016 display: flex;
1017 justify-content: center;
1018 }
1019
1020 .jqx-checkbox-check-checked-dark:after {
1021 content: var(--jqx-icon-check);
1022 }
1023 .jqx-checkbox-check-indeterminate-dark {
1024 width:14px !important;
1025 height:14px !important;
1026 position:relative;
1027 top: 1px;
1028 left: 1px;
1029 background: var(--jqx-background);
1030 }
1031 .jqx-tree-dark .jqx-checkbox-check-indeterminate-dark {
1032 width:12px !important;
1033 height:12px !important;
1034 top: 2px;
1035 left:2px;
1036 }
1037
1038 .jqx-checkbox-hover-dark,
1039 .jqx-radiobutton-hover-dark {
1040 background-color: var(--jqx-primary);
1041 border-color: var(--jqx-primary);
1042 }
1043
1044
1045 .jqx-slider-slider-dark {
1046 transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
1047 }
1048
1049 .jqx-slider-slider-dark:active {
1050 transform: scale(1.2);
1051 box-shadow: rgba(0,0,0,0.3) 0 0 10px;
1052 }
1053 .jqx-slider-dark[discrete] .jqx-slider-slider-dark:active
1054 {
1055 transform: scaleX(0);
1056
1057 }
1058 .jqx-slider-slider-horizontal-dark {
1059 background: var(--jqx-primary);
1060 }
1061 .jqx-slider-slider-vertical-dark {
1062 background: var(--jqx-primary);
1063 }
1064 .jqx-slider-tooltip-dark {
1065 width: 25px;
1066 height: 25px;
1067 transform-origin: 50% 100%;
1068 border-radius: 50%;
1069 transform: scale(0) rotate(45deg);
1070 padding:0px;
1071 background: transparent !important;
1072 }
1073 .jqx-slider-tooltip-dark.init {
1074 transform: scale(1) rotate(45deg);
1075 }
1076 .jqx-slider-tooltip-dark.hide {
1077 transition: transform 0.2s ease;
1078 transform-origin:50% 100%;
1079 transform: scale(0) rotate(45deg);
1080 }
1081 .jqx-slider-tooltip-dark.show {
1082 transition: transform 0.2s ease;
1083 transform: scale(1) rotate(45deg);
1084 }
1085
1086
1087 .jqx-slider-tooltip-dark .jqx-tooltip-arrow-t-b,
1088 .jqx-slider-tooltip-dark .jqx-tooltip-arrow-l-r {
1089 display:none;
1090 visibility:hidden;
1091 }
1092
1093 .jqx-slider-tooltip-dark, .jqx-slider-tooltip-dark .jqx-fill-state-normal-dark {
1094 border-radius: 15px 15px 0px;
1095 display: flex;
1096 align-items: center;
1097 justify-content: center;
1098 background: var(--jqx-primary);
1099 color: var(--jqx-primary-color);
1100 font-size:11px;
1101 }
1102 .jqx-slider-tooltip-dark.far, .jqx-slider-tooltip-dark.far .jqx-fill-state-normal-dark {
1103 border-radius: 0px 15px 15px 15px;
1104 }
1105 .jqx-slider-tooltip-dark.vertical, .jqx-slider-tooltip-dark.vertical .jqx-fill-state-normal-dark {
1106 border-radius: 15px 0px 15px 15px;
1107 }
1108 .jqx-slider-tooltip-dark.vertical.far, .jqx-slider-tooltip-dark.vertical.far .jqx-fill-state-normal-dark {
1109 border-radius: 15px 15px 15px 0px;
1110 }
1111 .jqx-slider-tooltip-dark {
1112 background:transparent;
1113 border:none !important;
1114 box-shadow:none;
1115 }
1116 .jqx-slider-tooltip-dark .jqx-tooltip-main-dark {
1117 top: -7px;
1118 right: 11px;
1119 }
1120 .jqx-slider-tooltip-dark.far .jqx-tooltip-main-dark {
1121 top: 3px;
1122 right: 4px;
1123 }
1124 .jqx-slider-tooltip-dark.vertical .jqx-tooltip-main-dark {
1125 top: -3px;
1126 right: 3px;
1127 }
1128 .jqx-slider-tooltip-dark .jqx-tooltip-text {
1129 background: transparent;
1130 border:none;
1131 padding: 0px;
1132 overflow:visible;
1133 }
1134 .jqx-slider-tooltip-dark .jqx-tooltip-text>span {
1135 transform: rotate(-45deg);
1136 }
1137 .jqx-slider-tooltip-dark.range {
1138 width: 35px;
1139 height:35px;
1140 }
1141
1142 .jqx-slider-rangebar-dark {
1143 border-color: var(--jqx-primary);
1144 background: var(--jqx-primary);
1145 }
1146
1147 .jqx-slider-track-horizontal-dark, .jqx-slider-track-vertical-dark {
1148 border-color: var(--jqx-border);
1149 background: var(--jqx-background);
1150 }
1151
1152 .jqx-slider-button-dark {
1153 -moz-border-radius: 100%;
1154 -webkit-border-radius: 100%;
1155 border-radius: 100%;
1156 }
1157 .jqx-slider-button-dark.jqx-fill-state-normal-dark,
1158 .jqx-slider-button-dark.jqx-fill-state-hover-dark,
1159 .jqx-slider-button-dark.jqx-fill-state-pressed-dark
1160 {
1161 background: transparent !important;
1162 }
1163
1164 .jqx-tree-item-dark,
1165 .jqx-tree-item-selected {
1166 padding: 6px;
1167 border-radius: 4px;
1168 }
1169 .jqx-listitem-element-dark .jqx-checkbox-default-dark {
1170 border-radius: 0px;
1171 }
1172 .jqx-listitem-state-hover-dark,
1173 .jqx-listitem-state-selected-dark,
1174 .jqx-listitem-state-normal-dark {
1175 border-radius: 0;
1176 margin:0px;
1177 }
1178
1179 .jqx-scheduler-edit-dialog-label-dark {
1180 font-size: 12px;
1181 text-transform: uppercase;
1182 padding-top: 6px;
1183 padding-bottom: 6px;
1184
1185 }
1186 .jqx-scheduler-edit-dialog-field-dark {
1187 padding-top: 6px;
1188 padding-bottom: 6px;
1189 }
1190 .jqx-scheduler-edit-dialog-label-rtl-dark {
1191 line-height: 35px;
1192 padding-top: 6px;
1193 padding-bottom: 6px;
1194 }
1195 .jqx-scheduler-edit-dialog-field-rtl-dark {
1196 line-height: 35px;
1197 padding-top: 6px;
1198 padding-bottom: 6px;
1199 }
1200 .jqx-menu-horizontal-dark {
1201 height: auto !important;
1202 }
1203 .jqx-menu-horizontal-dark .jqx-menu-item-top-dark {
1204 padding: 8px;
1205 }
1206 .jqx-menu-item-top-dark,
1207 .jqx-menu-item-dark {
1208 padding: 8px;
1209 }
1210 /*applied to a list item when the item is selected.*/
1211 .jqx-listitem-state-hover-dark, .jqx-menu-item-hover-dark, .jqx-tree-item-hover-dark, .jqx-calendar-cell-hover-dark, .jqx-grid-cell-hover-dark,
1212 .jqx-input-popup-dark .jqx-fill-state-hover-dark,
1213 .jqx-input-popup-dark .jqx-fill-state-pressed-dark {
1214 color: var(--jqx-background-color-hover) !important;
1215 border-color: var(--jqx-background-hover);
1216 text-decoration: none;
1217 background-color: var(--jqx-background-hover);
1218 background-repeat: repeat-x;
1219 outline: 0;
1220 background: var(--jqx-background-hover);
1221 box-shadow: none;
1222 background-position: 0 0;
1223 }
1224
1225 .jqx-scheduler-cell-hover-dark {
1226 border-color: var(--jqx-primary) !important;
1227 background: var(--jqx-primary) !important;
1228 color: var(--jqx-background) !important;
1229 }
1230
1231 .jqx-listitem-state-selected-dark, .jqx-menu-item-selected-dark, .jqx-tree-item-selected-dark, .jqx-calendar-cell-selected-dark, .jqx-grid-cell-selected-dark,
1232 .jqx-menu-item-top-selected-dark, .jqx-grid-selectionarea-dark, .jqx-input-button-header-dark, .jqx-input-button-innerHeader-dark {
1233 color: var(--jqx-primary-color) !important;
1234 border-color: var(--jqx-primary) !important;
1235 background: var(--jqx-primary) !important; /* Old browsers */
1236 box-shadow: none;
1237 }
1238
1239 .jqx-grid-cell-dark .jqx-button-dark, .jqx-grid-cell-dark .jqx-button-dark.jqx-fill-state-hover-dark, .jqx-grid-cell-dark .jqx-button-dark.jqx-fill-state-pressed-dark {
1240 box-shadow: none;
1241 transition: none;
1242 }
1243
1244 .jqx-menu-popup-dark{
1245 opacity: 0;
1246 transform-origin: top left;
1247 box-shadow: 0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 3px rgba(0,0,0,.12),0 4px 15px 0 rgba(0,0,0,.2);
1248 background: var(--jqx-background) !important;
1249 }
1250 .jqx-menu-popup-dark.top {
1251 transform: scaleY(0);
1252 transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
1253 }
1254
1255 .jqx-menu-popup-dark.horizontal {
1256 transform: scaleX(0);
1257 transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
1258 }
1259
1260 .jqx-menu-popup-dark.show {
1261 transform: scale(1);
1262 opacity: 1;
1263 }
1264 .jqx-popup-dark {
1265 border: 1px solid var(--jqx-border);
1266 background: var(--jqx-background);
1267 box-shadow: 0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 3px rgba(0,0,0,.12),0 4px 15px 0 rgba(0,0,0,.2);
1268 }
1269 .jqx-menu-popup-dark .jqx-popup-dark {
1270 box-shadow: none;
1271 border: none;
1272 }
1273
1274 .jqx-datatable-dark .jqx-grid-column-sortdescbutton-dark,
1275 .jqx-datatable-dark .jqx-grid-column-sortascbutton-dark {
1276 display: flex;
1277 align-items: center;
1278 }
1279
1280 .jqx-grid-column-sortascbutton-dark,
1281 .jqx-expander-arrow-bottom-dark,
1282 .jqx-window-collapse-button-dark,
1283 .jqx-menu-item-arrow-up-dark,
1284 .jqx-menu-item-arrow-up-selected-dark,
1285 .jqx-menu-item-arrow-top-up-dark,
1286 .jqx-icon-arrow-up-dark,
1287 .jqx-icon-arrow-up-hover-dark,
1288 .jqx-icon-arrow-up-selected-dark {
1289 background-image: none;
1290 }
1291
1292 .jqx-grid-column-sortascbutton-dark,
1293 .jqx-expander-arrow-bottom-dark,
1294 .jqx-window-collapse-button-dark,
1295 .jqx-menu-item-arrow-up-dark,
1296 .jqx-menu-item-arrow-up-selected-dark,
1297 .jqx-menu-item-arrow-top-up-dark,
1298 .jqx-icon-arrow-up-dark,
1299 .jqx-icon-arrow-up-hover-dark,
1300 .jqx-icon-arrow-up-selected-dark {
1301 background-image: none;
1302 font-family: jqx-icons;
1303 }
1304 .jqx-grid-column-sortascbutton-dark:after,
1305 .jqx-expander-arrow-bottom-dark:after,
1306 .jqx-window-collapse-button-dark:after,
1307 .jqx-menu-item-arrow-up-dark:after,
1308 .jqx-menu-item-arrow-up-selected-dark:after,
1309 .jqx-menu-item-arrow-top-up-dark:after,
1310 .jqx-icon-arrow-up-dark:after,
1311 .jqx-icon-arrow-up-hover-dark:after,
1312 .jqx-icon-arrow-up-selected-dark:after {
1313 content: var(--jqx-icon-arrow-up);
1314 }
1315
1316 .jqx-widget-dark .jqx-grid-group-expand-dark,
1317 .jqx-grid-group-expand-dark,
1318 .jqx-grid-column-sortdescbutton-dark,
1319 .jqx-expander-arrow-top-dark,
1320 .jqx-window-collapse-button-collapsed-dark,
1321 .jqx-menu-item-arrow-down-dark,
1322 .jqx-menu-item-arrow-down-selected-dark,
1323 .jqx-menu-item-arrow-down-dark,
1324 .jqx-icon-arrow-down-dark,
1325 .jqx-icon-arrow-down-hover-dark,
1326 .jqx-icon-arrow-down-selected-dark {
1327 background-image: none;
1328 font-family: jqx-icons;
1329 }
1330 .jqx-widget-dark .jqx-grid-group-expand-dark:after,
1331 .jqx-grid-group-expand-dark:after,
1332 .jqx-grid-column-sortdescbutton-dark:after,
1333 .jqx-expander-arrow-top-dark:after,
1334 .jqx-window-collapse-button-collapsed-dark:after,
1335 .jqx-menu-item-arrow-down-dark:after,
1336 .jqx-menu-item-arrow-down-selected-dark:after,
1337 .jqx-menu-item-arrow-down-dark:after,
1338 .jqx-icon-arrow-down-dark:after,
1339 .jqx-icon-arrow-down-hover-dark:after,
1340 .jqx-icon-arrow-down-selected-dark:after {
1341 content: var(--jqx-icon-arrow-down);
1342 }
1343
1344 .jqx-tabs-arrow-left-dark,
1345 .jqx-menu-item-arrow-left-selected-dark,
1346 .jqx-menu-item-arrow-top-left,
1347 .jqx-icon-arrow-left-dark,
1348 .jqx-icon-arrow-down-left-dark,
1349 .jqx-icon-arrow-left-selected-dark {
1350 background-image: none;
1351 font-family: jqx-icons;
1352 background-repeat: no-repeat;
1353 background-position: center;
1354 }
1355 .jqx-tabs-arrow-left-dark:after,
1356 .jqx-menu-item-arrow-left-selected-dark:after,
1357 .jqx-menu-item-arrow-top-left:after,
1358 .jqx-icon-arrow-left-dark:after,
1359 .jqx-icon-arrow-down-left-dark:after,
1360 .jqx-icon-arrow-left-selected-dark:after {
1361 content: var(--jqx-icon-arrow-left);
1362 }
1363
1364 .jqx-widget-dark .jqx-grid-group-collapse-dark,
1365 .jqx-grid-group-collapse-dark,
1366 .jqx-tabs-arrow-right-dark,
1367 .jqx-menu-item-arrow-right-selected-dark,
1368 .jqx-menu-item-arrow-top-right-dark,
1369 .jqx-icon-arrow-right-dark,
1370 .jqx-icon-arrow-right-hover-dark,
1371 .jqx-icon-arrow-right-selected-dark {
1372 background-image: none;
1373 font-family: jqx-icons;
1374 background-repeat: no-repeat;
1375 background-position: center;
1376 }
1377 .jqx-widget-dark .jqx-grid-group-collapse-dark:after,
1378 .jqx-grid-group-collapse-dark:after,
1379 .jqx-tabs-arrow-right-dark:after,
1380 .jqx-menu-item-arrow-right-selected-dark:after,
1381 .jqx-menu-item-arrow-top-right-dark:after,
1382 .jqx-icon-arrow-right-dark:after,
1383 .jqx-icon-arrow-right-hover-dark:after,
1384 .jqx-icon-arrow-right-selected-dark:after {
1385 content: var(--jqx-icon-arrow-right);
1386 }
1387
1388 .jqx-tree-item-arrow-collapse-rtl-dark,
1389 .jqx-tree-item-arrow-collapse-hover-rtl-dark {
1390 background-image: none;
1391 }
1392
1393 .jqx-tree-item-arrow-collapse-rtl-dark:after,
1394 .jqx-tree-item-arrow-collapse-hover-rtl-dark:after {
1395 content: var(--jqx-icon-arrow-left);
1396 }
1397
1398 .jqx-menu-item-arrow-left-selected-dark {
1399 background-image: none;
1400 }
1401
1402 .jqx-menu-item-arrow-right-selected-dark {
1403 background-image: none;
1404 }
1405
1406 .jqx-input-button-content-dark {
1407 font-size: 10px;
1408 }
1409
1410 .jqx-widget .jqx-grid-column-header-cell-dark {
1411 padding-top: 8px;
1412 padding-bottom: 8px;
1413 height:30px;
1414 }
1415
1416 .jqx-widget .jqx-grid-row-cell-dark {
1417 padding-top: 8px;
1418 padding-bottom: 8px;
1419 height:30px;
1420 }
1421
1422 .jqx-listbox-container-dark,
1423 .jqx-calendar-container-dark {
1424 margin-left: -10px;
1425 }
1426 .jqx-calendar-container-dark .jqx-popup,
1427 .jqx-calendar-dark.jqx-popup,
1428 .jqx-listbox-dark.jqx-popup {
1429 margin-left: 9px;
1430 }
1431
1432 .jqx-dropdownbutton-popup,
1433 .jqx-calendar-dark.jqx-popup,
1434 .jqx-listbox-dark.jqx-popup,
1435 .jqx-grid-menu.jqx-popup {
1436 transition: transform 0.25s ease-in-out, opacity 0.35s ease-in-out;
1437 transform: scaleY(0);
1438 opacity: 0;
1439 transform-origin: top left;
1440 display: block !important;
1441 }
1442
1443 .jqx-dropdownbutton-popup.jqx-popup-show,
1444 .jqx-calendar-dark.jqx-popup-show,
1445 .jqx-listbox-dark.jqx-popup-show,
1446 .jqx-grid-menu.jqx-popup-show {
1447 transform: scaleY(1);
1448 opacity: 1;
1449 }
1450
1451 .jqx-widget-dark .jqx-grid-cell {
1452 border-color: var(--jqx-border);
1453 color: var(--jqx-background-color);
1454 }
1455
1456 .jqx-widget-dark .jqx-grid-column-header, .jqx-widget-dark .jqx-grid-group-cell {
1457 border-color: var(--jqx-border);
1458 color: var(--jqx-surface-color);
1459 background: var(--jqx-surface);
1460 }
1461
1462 .jqx-widget-dark .jqx-grid-column-header-dark {
1463 border-color: var(--jqx-border);
1464 font-size: 12px;
1465 color: var(--jqx-surface-color);
1466 font-weight: 500;
1467 }
1468 .jqx-widget-dark .jqx-grid-cell-dark {
1469 border-color: var(--jqx-border);
1470 }
1471
1472 .jqx-widget-dark .jqx-widget-header-dark:hover .jqx-grid-column-header-dark {
1473 border-right-color: var(--jqx-border) !important;
1474 border-bottom-color: var(--jqx-border) !important;
1475 }
1476
1477 .jqx-widgets-dark .jqx-scheduler-cell-selected span{
1478 color: var(--jqx-background) !important;
1479 }
1480 .jqx-scheduler-time-column-dark,
1481 .jqx-scheduler-toolbar-dark {
1482 background: var(--jqx-surface) !important;
1483 color: var(--jqx-surface-color) !important;
1484 border-color: var(--jqx-border) !important;
1485 }
1486
1487 .jqx-widget-dark.jqx-scheduler-dark .jqx-grid-cell-dark,
1488 .jqx-widget-dark.jqx-scheduler-dark .jqx-grid-column-header-dark {
1489 border-color: transparent;
1490 border-bottom-color: var(--jqx-border);
1491 }
1492
1493 .jqx-widget-dark.jqx-scheduler-dark td.jqx-grid-cell-dark span{
1494 font-size: 10px;
1495 color: var(--jqx-background-color);
1496 }
1497 .jqx-widget-dark.jqx-scheduler-dark td.jqx-grid-cell-dark.jqx-scheduler-cell-hover span,
1498 .jqx-widget-dark.jqx-scheduler-dark td.jqx-grid-cell-dark.jqx-scheduler-cell-selected span{
1499 color:var(--jqx-primary-color);
1500 }
1501
1502 .jqx-passwordinput-password-icon-dark,
1503 .jqx-passwordinput-password-icon-rtl-dark {
1504 background-image: none;
1505 font-family: jqx-icons;
1506 color:var(--jqx-background-color);
1507 }
1508 .jqx-passwordinput-password-icon-dark:after,
1509 .jqx-passwordinput-password-icon-rtl-dark:after {
1510 content: var(--jqx-icon-visibility);
1511 }
1512
1513 .jqx-combobox-dark .jqx-icon-close-dark {
1514 background-image: none;
1515 font-family: jqx-icons;
1516 }
1517 .jqx-combobox-multi-item-dark {
1518 height: 30px;
1519 display: flex;
1520 justify-content: center;
1521 align-items: center;
1522 }
1523 .jqx-combobox-multi-item-dark a {
1524 margin-right: 10px;
1525 }
1526 .jqx-combobox-dark .jqx-icon-close-dark:after {
1527 content: var(--jqx-icon-close);
1528 }
1529 .jqx-combobox-dark, .jqx-input-dark {
1530 border-color: var(--jqx-border);
1531 color: var(--jqx-background-color);
1532 background-color: var(--jqx-background);
1533 }
1534
1535 .jqx-combobox-content-dark,
1536 .jqx-datetimeinput-content-dark
1537 {
1538 border-color: transparent;
1539 }
1540
1541
1542 .jqx-combobox-content-focus-dark,
1543 .jqx-combobox-state-focus-dark,
1544 .jqx-numberinput-focus-dark {
1545 outline: none;
1546 }
1547
1548 .jqx-input-group-dark {
1549 position: relative;
1550 display: inline-block;
1551 overflow: visible;
1552 border: none;
1553 box-shadow: none;
1554 }
1555
1556 .jqx-input-group-dark input {
1557 width: 100%;
1558 height: 100%;
1559 box-sizing: border-box;
1560 }
1561 .jqx-input-group-dark textarea {
1562 width: 100%;
1563 height: 100%;
1564 outline: none;
1565 resize: none;
1566 border-left: none;
1567 border-right: none;
1568 border-top: none;
1569 border-bottom-color: var(--jqx-border);
1570 }
1571 .jqx-numberinput-dark,
1572 .jqx-maskedinput-dark
1573 {
1574 position:relative;
1575 }
1576 .jqx-numberinput-dark input {
1577 height:100% !important;
1578 }
1579
1580 .jqx-input-dark.jqx-validator-error-element {
1581 border-color: transparent !important;
1582 border-bottom: 1px solid #df2227 !important;
1583 }
1584 .jqx-input-dark input,
1585 .jqx-dropdownlist-state-normal-dark,
1586 .jqx-combobox-state-normal-dark,
1587 .jqx-numberinput-dark,
1588 .jqx-maskedinput-dark,
1589 .jqx-datetimeinput-dark
1590 {
1591 background: var(--jqx-surface);
1592 border-color: var(--jqx-surface);
1593 border-radius: 0;
1594 color: var(--jqx-surface-color);
1595 box-shadow: none;
1596 border-bottom: 1px solid var(--jqx-border);
1597 outline: none;
1598 }
1599 .jqx-numberinput-dark .jqx-action-button-dark{
1600 border-radius: 0;
1601 font-size:12px;
1602 }
1603 .jqx-numberinput-dark .jqx-action-button-dark > div {
1604 width: 100%;
1605 display: flex;
1606 align-items: center;
1607 justify-content: center;
1608 }
1609 .jqx-maskedinput-dark,
1610 .jqx-combobox-dark,
1611 .jqx-datetimeinput-dark {
1612 background: var(--jqx-background);
1613 color: var(--jqx-background-color);
1614 border-color: var(--jqx-background);
1615 border-bottom: 1px solid var(--jqx-border);
1616 }
1617 .jqx-combobox-dark .jqx-combobox-arrow-normal-dark,
1618 .jqx-datetimeinput-dark .jqx-action-button-dark,
1619 .jqx-datetimeinput-dark .jqx-action-button-rtl-dark
1620 {
1621 background-color: var(--jqx-surface);
1622 border-color: var(--jqx-surface);
1623 color:var(--jqx-surface-color);
1624 }
1625 .jqx-datetimeinput-dark, .jqx-datetimeinput-dark > div,
1626 .jqx-numberinput-dark, .jqx-numberinput-dark > div,
1627 .jqx-maskedinput-dark, .jqx-maskedinput-dark > div,
1628 .jqx-dropdownlist-state-normal-dark, .jqx-dropdownlist-state-normal-dark > div, .jqx-dropdownlist-state-normal-dark > div > div,
1629 .jqx-combobox-state-normal-dark, .jqx-combobox-state-normal-dark > div, .jqx-combobox-state-normal-dark > div > div {
1630 overflow: visible !important;
1631 }
1632
1633 .jqx-input-dark input:focus {
1634 border-radius: 0;
1635 box-shadow: none;
1636 }
1637
1638 .jqx-input-dark input, input[type="text"].jqx-input-dark, input[type="password"].jqx-input-dark, input[type="text"].jqx-widget-content-dark, input[type="textarea"].jqx-widget-content-dark, textarea.jqx-input-dark {
1639 font-size: var(--jqx-font-size);
1640 font-family: var(--jqx-font-family);
1641 resize: none;
1642 background: var(--jqx-background);
1643 color: var(--jqx-background-color);
1644 border: none;
1645 border-radius: 0;
1646 box-sizing:border-box;
1647 box-shadow: none;
1648 border-bottom: 1px solid var(--jqx-border);
1649 }
1650
1651 input[type="text"].jqx-widget-content-dark,
1652 input[type="textarea"].jqx-widget-content-dark {
1653 height: 100%;
1654 }
1655
1656
1657 .jqx-input-label {
1658 visibility:inherit;
1659 }
1660 .jqx-input-bar{
1661 visibility:inherit;
1662 }
1663 input:focus ~ .jqx-input-label-dark,
1664 textarea:focus ~ .jqx-input-label-dark,
1665 .jqx-input-widget-dark[hint=true] .jqx-input-label,
1666 .jqx-text-area-dark[hint=true] .jqx-input-label,
1667 .jqx-dropdownlist-state-selected-dark .jqx-input-label,
1668 .jqx-dropdownlist-state-normal-dark[hint=true] .jqx-input-label,
1669 .jqx-combobox-state-normal-dark[hint=true] .jqx-input-label,
1670 .jqx-combobox-dark .jqx-input-label.focused,
1671 .jqx-dropdownlist-dark .jqx-input-label.focused,
1672 .jqx-datetimeinput-dark[hint=true] .jqx-input-label,
1673 .jqx-maskedinput-dark[hint=true] .jqx-input-label,
1674 .jqx-numberinput-dark[hint=true] .jqx-input-label,
1675 .jqx-formattedinput-dark[hint=true] .jqx-input-label
1676 {
1677 top: -15px;
1678 font-size: 12px;
1679 color: var(--jqx-primary);
1680 opacity: 1;
1681 }
1682 .jqx-dropdownlist-dark[default-placeholder="true"] .jqx-input-label {
1683 visibility: hidden;
1684 }
1685
1686
1687 input:focus ~ .jqx-input-bar:before,
1688 textarea:focus ~ .jqx-input-bar:before,
1689 .jqx-dropdownlist-state-selected-dark .jqx-input-bar:before,
1690 .jqx-dropdownlist-dark .jqx-input-bar.focused:before,
1691 .jqx-combobox-dark .jqx-input-bar.focused:before,
1692 .jqx-complex-input-group-dark .jqx-input-bar.focused::before,
1693 .jqx-combobox-state-selected-dark .jqx-input-bar:before {
1694 width: 100%;
1695 }
1696 .jqx-complex-input-group-dark .jqx-fill-state-normal-dark {
1697 border-color: var(--jqx-border);
1698 }
1699
1700
1701 .jqx-input-widget-dark.jqx-rtl > input {
1702 direction: rtl
1703 }
1704
1705 .jqx-input-label-dark {
1706 color: var(--jqx-background-color);
1707 font-size: 14px;
1708 font-weight: normal;
1709 position: absolute;
1710 pointer-events: none;
1711 left: 2px;
1712 top:10px;
1713 opacity: 0;
1714 top: calc(50% - 7px);
1715 transition: 300ms ease all;
1716 }
1717 .jqx-input-label.initial {
1718 transition: none;
1719 }
1720 .jqx-input-bar-dark {
1721 position: relative;
1722 display: block;
1723 z-index:1;
1724 }
1725
1726 .jqx-input-bar-dark:before {
1727 content: '';
1728 height: 2px;
1729 width: 0;
1730 bottom: 0px;
1731 position: absolute;
1732 background: var(--jqx-primary);
1733 transition: 300ms ease all;
1734 left: 0%;
1735 }
1736 .jqx-formatted-input-spin-button-dark, .jqx-input-group-addon-dark {
1737 border-color: var(--jqx-background);
1738 color: var(--jqx-background-color);
1739 background: var(--jqx-background);
1740 }
1741 .jqx-dropdownlist-state-selected-dark,
1742 .jqx-combobox-state-selected-dark {
1743 color: var(--jqx-primary);
1744 background: var(--jqx-primary-color);
1745 border-color: var(--jqx-primary-color);
1746 }
1747
1748
1749 .jqx-window-collapse-button-dark {
1750 position: relative;
1751 right: 10px;
1752 font-weight: bold;
1753 font-size: 18px;
1754 margin-top:0px;
1755 }
1756
1757 .jqx-dropdownlist-state-normal-dark .jqx-icon-arrow-down-dark,
1758 .jqx-combobox-state-normal-dark .jqx-icon-arrow-down-dark,
1759 .sorticon.descending .jqx-grid-column-sorticon-dark,
1760 .jqx-tree-item-arrow-expand-dark,
1761 .jqx-expander-header-dark .jqx-icon-arrow-down
1762 {
1763 transform: rotate(0deg);
1764 display: flex;
1765 align-items: center;
1766 transition: transform 0.2s ease-out;
1767 }
1768 .jqx-expander-header-dark .jqx-icon-arrow-up {
1769 transform: rotate(180deg);
1770 transition: transform 0.2s ease-out;
1771 font-family: jqx-icons;
1772 background-image: none;
1773 }
1774 .jqx-expander-header-dark .jqx-icon-arrow-up:after {
1775 content: var(--jqx-icon-arrow-down);
1776 }
1777 .jqx-tree-item-arrow-expand-dark,
1778 .jqx-tree-item-arrow-collapse-dark
1779 {
1780 font-size: 16px;
1781 }
1782 .jqx-tree-item-arrow-expand-dark {
1783 transform: rotate(180deg);
1784 }
1785
1786 .jqx-tree-item-arrow-expand-dark:after {
1787 content: var(--jqx-icon-arrow-up);
1788 margin-left: 2px;
1789 }
1790 .jqx-tree-item-arrow-collapse-dark
1791 {
1792 transform: rotate(0deg);
1793 background-image: none;
1794 background-repeat: no-repeat;
1795 background-position: center;
1796 transition: transform 0.2s ease-out;
1797 }
1798 .jqx-dropdownlist-state-selected-dark .jqx-icon-arrow-down-dark,
1799 .jqx-combobox-state-selected-dark .jqx-icon-arrow-down-dark,
1800 .sorticon.ascending .jqx-grid-column-sorticon-dark
1801 {
1802 display: flex;
1803 align-items: center;
1804 transform: rotate(180deg);
1805 transition: transform 0.2s ease-out;
1806 left: -1px;
1807 }
1808 .jqx-combobox-state-selected-dark .jqx-icon-arrow-down-dark{
1809 left:-1px;
1810 }
1811 .jqx-listbox-container {
1812 margin-top: 1px;
1813 }
1814
1815 input[type="text"].jqx-input-dark:-moz-placeholder, input[type="text"].jqx-widget-content-dark:-moz-placeholder, input[type="textarea"].jqx-widget-content-dark:-moz-placeholder, textarea.jqx-input-dark:-moz-placeholder {
1816 color: #999999;
1817 }
1818
1819 input[type="text"].jqx-input-dark:-webkit-input-placeholder, input[type="text"].jqx-widget-content-dark:-webkit-input-placeholder, input[type="textarea"].jqx-widget-content-dark:-webkit-input-placeholder, textarea.jqx-input-dark:-webkit-input-placeholder {
1820 color: #999999;
1821 }
1822
1823 input[type="text"].jqx-input-dark:-ms-input-placeholder, input[type="text"].jqx-widget-content-dark:-ms-input-placeholder, input[type="textarea"].jqx-widget-content-dark:-ms-input-placeholder, textarea.jqx-input-dark:-ms-input-placeholder {
1824 color: #999999;
1825 }
1826
1827 .jqx-combobox-content-focus-dark, .jqx-combobox-state-focus-dark, .jqx-fill-state-focus-dark,
1828 .jqx-numberinput-focus-dark {
1829 outline: none;
1830 }
1831
1832 .jqx-popup-dark.jqx-fill-state-focus-dark {
1833 outline: none;
1834 border-color: var(--jqx-border) !important;
1835 }
1836
1837 .jqx-datetimeinput-content, .jqx-datetimeinput-container {
1838 overflow: visible !important;
1839 }
1840 .jqx-text-area-dark, .jqx-text-area-dark > div {
1841 overflow:visible !important;
1842 }
1843 .jqx-text-area-element-dark {
1844 box-sizing: border-box;
1845 }
1846 .jqx-pivotgrid-content-wrapper.jqx-fill-state-normal-dark {
1847 border-color: var(--jqx-border);
1848 }
1849
1850 .jqx-grid-cell-dark.jqx-grid-cell-selected-dark > .jqx-grid-group-expand-dark {
1851 background-image: none;
1852 }
1853
1854 .jqx-grid-cell-dark.jqx-grid-cell-selected-dark > .jqx-grid-group-collapse-dark {
1855 background-image: none;
1856 }
1857
1858 .jqx-grid-cell-dark.jqx-grid-cell-selected-dark > .jqx-grid-group-collapse-rtl-dark {
1859 background-image: none;
1860 }
1861
1862 .jqx-grid-cell-dark.jqx-grid-cell-selected-dark > .jqx-grid-group-expand-rtl-dark {
1863 background-image: none;
1864 }
1865 .jqx-tabs-title-selected-top-dark, .jqx-tabs-selection-tracker-top-dark {
1866 border-color: transparent;
1867 filter: none;
1868 background: inherit;
1869 color: inherit;
1870 -webkit-box-shadow: none;
1871 -moz-box-shadow: none;
1872 box-shadow: none;
1873 }
1874 .jqx-grid-cell-filter-row-dark {
1875 background-color: var(--jqx-surface);
1876 }
1877
1878 .jqx-tabs-title-dark, .jqx-ribbon-item-dark {
1879 color: inherit;
1880 }
1881 .jqx-ribbon-item-selected-dark {
1882 background: inherit;
1883 }
1884 .jqx-tabs-title-selected-bottom-dark,
1885 .jqx-tabs-title-selected-top-dark
1886 {
1887 color: var(--jqx-primary);
1888 font-weight:500;
1889 padding-top:5px;
1890 padding-bottom:5px;
1891 }
1892 .jqx-tabs-title.jqx-fill-state-hover-dark {
1893 border-color: transparent;
1894 }
1895 .jqx-ribbon-item-dark {
1896 cursor: pointer;
1897 }
1898 .jqx-ribbon-item-selected-dark {
1899 color: var(--jqx-primary);
1900 font-weight:500;
1901 border-color: transparent;
1902 }
1903
1904 .jqx-ribbon-item-hover-dark {
1905 background: transparent;
1906 }
1907
1908 .jqx-ribbon-header-top-dark {
1909 border-color: transparent;
1910 border-bottom-color: var(--jqx-border);
1911 }
1912
1913 .jqx-ribbon-header-bottom-dark {
1914 border-color: transparent;
1915 border-top-color: var(--jqx-border);
1916 }
1917
1918 .jqx-ribbon-header-right-dark {
1919 border-color: transparent;
1920 border-left-color:var(--jqx-border);
1921 }
1922
1923 .jqx-ribbon-header-left-dark {
1924 border-color: transparent;
1925 border-right-color:var(--jqx-border);
1926 }
1927
1928 .jqx-tabs-title-selected-bottom-dark, .jqx-tabs-selection-tracker-bottom-dark {
1929 border-color: transparent;
1930 border-top: 1px solid var(--jqx-background);
1931 filter: none;
1932 background: var(--jqx-background);
1933 -webkit-box-shadow: none;
1934 -moz-box-shadow: none;
1935 box-shadow: none;
1936 }
1937
1938 .jqx-tabs-dark, .jqx-ribbon-dark {
1939 border-color: transparent;
1940 }
1941
1942 .jqx-tabs-header-dark {
1943 background: transparent;
1944 }
1945 .jqx-ribbon-header-dark {
1946 background: var(--jqx-surface);
1947 color: var(--jqx-surface-color);
1948 }
1949 .jqx-tabs-position-bottom .jqx-tabs-header-dark {
1950 border-color: transparent;
1951 }
1952 .jqx-layout-dark .jqx-tabs-header-dark, .jqx-layout-dark .jqx-ribbon-header-dark {
1953 background: var(--jqx-background);
1954 border-color: var(--jqx-border);
1955 }
1956 .jqx-tabs-title-bottom {
1957 border-color: transparent;
1958 }
1959 .jqx-tabs-title-hover-top-dark, .jqx-tabs-title-hover-bottom-dark, .jqx-tabs-header-dark {
1960 -webkit-box-shadow: none !important;
1961 -moz-box-shadow: none !important;
1962 box-shadow: none !important;
1963 background: var(--jqx-surface);
1964 color: var(--jqx-surface-color);
1965 }
1966
1967 .jqx-tabs-content-dark {
1968 box-sizing: border-box;
1969 border: 1px solid var(--jqx-border);
1970 border-top-color: transparent;
1971 padding:5px;
1972 }
1973 .jqx-tabs-bar-dark {
1974 position: absolute;
1975 bottom: 0;
1976 background: var(--jqx-primary);
1977 height: 2px;
1978 z-index:10;
1979 transition: .5s cubic-bezier(.35,0,.25,1);
1980 }
1981 .jqx-tabs-bar-dark.vertical {
1982 width: 2px;
1983 }
1984 .jqx-tabs-position-bottom .jqx-tabs-bar-dark {
1985 top: 0;
1986 }
1987
1988
1989 .jqx-layout-dark {
1990 background-color: var(--jqx-background);
1991 }
1992
1993 .jqx-kanban-column-header-collapsed-dark {
1994 background: var(--jqx-surface);
1995 color: var(--jqx-surface-color);
1996 }
1997
1998 .jqx-calendar-cell-dark {
1999 border-radius: 0px;
2000 font-size:12px;
2001 }
2002 .jqx-calendar-cell-dark.jqx-fill-state-pressed-dark {
2003 outline: 2px var(--jqx-primary);
2004 overflow: hidden;
2005 position: relative;
2006 }
2007 .jqx-calendar-cell-dark.jqx-fill-state-pressed-dark:after {
2008 content: '';
2009 width: calc(100% - 4px);
2010 position: absolute;
2011 left: 0px;
2012 top: 0px;
2013 height: calc(100% - 4px);
2014 border: 2px solid var(--jqx-background);
2015 }
2016 .jqx-calendar-cell-year-dark,
2017 .jqx-calendar-cell-decade-dark {
2018 border-radius: 0x;
2019 }
2020 .jqx-calendar-title-content-dark {
2021 font-weight:bold;
2022 }
2023 .jqx-calendar-column-cell-dark {
2024 color: var(--jqx-background-color);
2025 font-size:12px;
2026 }
2027
2028 .jqx-icon-time-dark,
2029 .jqx-icon-time-hover-dark,
2030 .jqx-icon-time-pressed-dark {
2031 background-image: none !important;
2032 font-family: 'jqx-icons';
2033 display: flex;
2034 font-family: 'jqx-icons';
2035 font-size: 16px;
2036 align-content: center;
2037 justify-content: center;
2038 left: initial !important;
2039 margin-top: 0px;
2040 top: 0px;
2041 left: 0px;
2042 margin: 0;
2043 align-items: center;
2044 width: 100%;
2045 height: 100%;
2046 }
2047
2048 .jqx-icon-time-dark:after,
2049 .jqx-icon-time-hover-dark:after,
2050 .jqx-icon-time-pressed-dark:after {
2051 content: var(--jqx-icon-arrow-down);
2052 }
2053
2054 .jqx-icon-calendar-dark,
2055 .jqx-icon-calendar-hover-dark,
2056 .jqx-icon-calendar-pressed-dark {
2057 background-image: none !important;
2058 font-family: 'jqx-icons';
2059 left: 0;
2060 top: 0 !important;
2061 margin: 0 !important;
2062 display: flex;
2063 justify-content: center;
2064 align-items: center;
2065 width: 100% !important;
2066 height: 100% !important;
2067 }
2068 .jqx-icon-calendar-dark:after,
2069 .jqx-icon-calendar-hover-dark:after,
2070 .jqx-icon-calendar-pressed-dark:after {
2071 content: var(--jqx-icon-calendar);
2072 }
2073
2074 .jqx-tabs-close-button-dark,
2075 .jqx-tabs-close-button-selected-dark,
2076 .jqx-tabs-close-button-hover-dark {
2077 background-image: none;
2078 }
2079
2080 .jqx-tabs-close-button-dark:after {
2081 content: var(--jqx-icon-close);
2082 }
2083
2084 .jqx-scrollbar-button-state-pressed-dark .jqx-icon-arrow-up-selected-dark {
2085 background-image: none;
2086 }
2087
2088 .jqx-scrollbar-button-state-pressed-dark .jqx-icon-arrow-down-selected-dark {
2089 background-image: none;
2090 }
2091
2092 .jqx-scrollbar-button-state-pressed-dark .jqx-icon-arrow-left-selected-dark {
2093 background-image: none;
2094 }
2095
2096 .jqx-scrollbar-button-state-pressed-dark .jqx-icon-arrow-right-selected-dark {
2097 background-image: none;
2098 }
2099
2100 .jqx-grid-cell-dark.jqx-grid-cell-selected-dark > .jqx-grid-group-expand-dark {
2101 background-image: none;
2102 }
2103
2104 .jqx-grid-cell-dark.jqx-grid-cell-selected-dark > .jqx-grid-group-collapse-dark {
2105 background-image: none;
2106 }
2107
2108 .jqx-grid-cell-dark.jqx-grid-cell-selected-dark > .jqx-grid-group-collapse-rtl-dark {
2109 background-image: none;
2110 }
2111
2112 .jqx-grid-cell-dark.jqx-grid-cell-selected-dark > .jqx-grid-group-expand-rtl-dark {
2113 background-image: none;
2114 }
2115
2116 .jqx-grid-group-collapse-dark {
2117 background-image: none;
2118 }
2119
2120 .jqx-grid-group-collapse-rtl-dark {
2121 background-image: none;
2122 }
2123
2124 .jqx-grid-group-expand-dark, .jqx-grid-group-expand-rtl-dark {
2125 background-image: none;
2126 }
2127
2128 .jqx-icon-arrow-first-dark,
2129 .jqx-icon-arrow-last-dark {
2130 background-image: none;
2131 font-family: jqx-icons;
2132 }
2133 .jqx-icon-arrow-first-dark:after {
2134 content: var(--jqx-icon-first-page);
2135 }
2136 .jqx-icon-arrow-last-dark:after {
2137 content: var(--jqx-icon-last-page);
2138 }
2139
2140 /* Ripple effect */
2141 .ripple {
2142 position: relative;
2143 transform: translate3d(0, 0, 0);
2144 overflow:hidden;
2145 }
2146
2147 .ink {
2148 display: block;
2149 position: absolute;
2150 pointer-events: none;
2151 border-radius: 0%;
2152 transform: scaleX(0);
2153 background: rgba(var(--jqx-primary-rgb),0.5);
2154 opacity: 0.25;
2155 }
2156
2157
2158 .jqx-scrollbar-dark .jqx-icon-arrow-up,
2159 .jqx-scrollbar-dark .jqx-icon-arrow-down,
2160 .jqx-scrollbar-dark .jqx-icon-arrow-right,
2161 .jqx-scrollbar-dark .jqx-icon-arrow-left {
2162 display: flex;
2163 justify-content: center;
2164 align-items: center;
2165 }
2166
2167 .outlined .ink, .flat .ink {
2168 background: rgba(var(--jqx-primary-rgb),0.5);
2169 overflow:hidden;
2170 }
2171
2172 .ink.animate {
2173 animation: ripple .7s ease;
2174 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2175 }
2176
2177 .jqx-tree-dark .jqx-checkbox-dark {
2178 margin-top: 6px !important;
2179 border-radius: 0px !important;
2180 }
2181 .jqx-tree-item-arrow-expand-dark,
2182 .jqx-tree-item-arrow-collapse-dark {
2183 margin-top: 6px !important;
2184 }
2185
2186 .jqx-checkbox-dark .ripple,
2187 .jqx-radiobutton-dark .ripple
2188 {
2189 overflow:visible;
2190 }
2191 .jqx-checkbox-dark .ink,
2192 .jqx-radiobutton-dark .ink
2193 {
2194 transform: scale(0);
2195 background: var(--jqx-primary);
2196 border-radius: 50%;
2197 }
2198 .jqx-checkbox-dark .ink.animate,
2199 .jqx-radiobutton-dark .ink.animate
2200 {
2201 animation: checkRipple 0.3s ease;
2202 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2203 }
2204 .jqx-checkbox-dark .ink.active,
2205 .jqx-radiobutton-dark .ink.active
2206 {
2207 opacity: 0.2;
2208 transform: scale(2);
2209 }
2210 .jqx-checkbox-default-dark.active .ink,
2211 .jqx-radiobutton-default-dark.active .ink
2212 {
2213 opacity: 0.2;
2214 transform: scale(2);
2215 }
2216
2217 /* Ripple effect */
2218 /* Ripple effect */
2219 .buttonRipple {
2220 background-position: center;
2221 transition: background 0.8s;
2222 }
2223 .buttonRipple.jqx-button-dark.jqx-fill-state-hover {
2224 color: var(--jqx-background-color-hover);
2225 background: var(--jqx-background-hover) radial-gradient(circle, transparent 1%, var(--jqx-background-hover) 1%) center/15000%;
2226 }
2227 .buttonRipple.jqx-button-dark.jqx-fill-state-pressed {
2228 color: var(--jqx-background-color-hover);
2229 background-color: rgba(var(--jqx-background-hover-rgb), 0.5);
2230 background-size: 100%;
2231 transition: background 0s;
2232 }
2233 .buttonRipple.jqx-button-dark.jqx-fill-state-hover.primary {
2234 color: var(--jqx-primary-color);
2235 background: var(--jqx-primary) radial-gradient(circle, transparent 1%, var(--jqx-primary) 1%) center/15000%;
2236 }
2237 .buttonRipple.jqx-button-dark.jqx-fill-state-pressed.primary {
2238 color: var(--jqx-primary-color);
2239 background-color: rgba(var(--jqx-primary-rgb), 0.8);
2240 background-size: 100%;
2241 transition: background 0s;
2242 }
2243
2244 @keyframes ripple {
2245 100% {
2246 opacity: 0;
2247 transform: scale(5);
2248 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2249 }
2250 }
2251 @keyframes checkRipple {
2252 100% {
2253 opacity: 0.2;
2254 transform: scale(2);
2255 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2256 }
2257 }
2258
2259 .jqx-fill-state-pressed-dark .jqx-icon-delete-dark
2260 {
2261 background-image: url('images/icon-delete-white.png');
2262 }
2263 .jqx-fill-state-pressed-dark .jqx-icon-edit-dark
2264 {
2265 background-image: url('images/icon-edit-white.png');
2266 }
2267 .jqx-fill-state-pressed-dark .jqx-icon-save-dark
2268 {
2269 background-image: url('images/icon-save-white.png');
2270 }
2271 .jqx-fill-state-pressed-dark .jqx-icon-cancel-dark
2272 {
2273 background-image: url('images/icon-cancel-white.png');
2274 }
2275 .jqx-fill-state-pressed-dark .jqx-icon-search-dark
2276 {
2277 background-image: url('images/search_white.png');
2278 }
2279 .jqx-fill-state-pressed-dark .jqx-icon-plus-dark
2280 {
2281 background-image: url('images/plus_white.png');
2282 }
2283 .jqx-menu-minimized-button-dark {
2284 padding: 0px !important;
2285 }
2286 .jqx-fill-state-pressed-dark .jqx-menu-minimized-button-dark {
2287 background-image: url('images/icon-menu-minimized-white.png');
2288 }
2289
2290
2291 .jqx-editor-toolbar-icon-dark {
2292 background: url('images/html_editor_white.png') no-repeat;
2293 }
2294
2295 .jqx-fill-state-hover-dark .jqx-editor-toolbar-icon-fontsize-dark,
2296 .jqx-fill-state-pressed-dark .jqx-editor-toolbar-icon-fontsize-dark,
2297 .jqx-fill-state-hover-dark .jqx-editor-toolbar-icon-forecolor-dark,
2298 .jqx-fill-state-pressed-dark .jqx-editor-toolbar-icon-forecolor-dark
2299 {
2300 background: url('images/html_editor.png') no-repeat;
2301 }
2302
2303 .jqx-editor-toolbar-button-dark{
2304 border-color: var(--jqx-border);
2305 box-shadow: none !important;
2306 color: var(--jqx-background-color);
2307 }
2308
2309 .jqx-time-picker .jqx-main-container {
2310 background: var(--jqx-background);
2311 }
2312
2313 /*applied to the timepicker*/
2314 .jqx-needle-central-circle-dark {
2315 fill: var(--jqx-primary);
2316 }
2317 .jqx-time-picker-dark .jqx-label-dark {
2318 fill: var(--jqx-background-color);
2319 }
2320 .jqx-needle-dark {
2321 fill: var(--jqx-primary);
2322 }
2323 .jqx-time-picker .jqx-header .jqx-selected-dark:focus {
2324 outline: 2px solid var(--jqx-primary);
2325 box-shadow: 0px 0px 4px 2px rgba(0, 119, 190, 0.125);
2326 }
2327 .jqx-svg-picker-dark:focus {
2328 border: 1px solid var(--jqx-primary) !important;
2329 }
2330 .jqx-validator-hint-dark {
2331 background: #D94F43;
2332 border-color: #D94F43;
2333 padding: 10px;
2334 }
2335 .jqx-validator-hint-dark img {
2336 display: none;
2337 }
2338
2339 .jqx-grid-group-expand-dark:after,
2340 .jqx-grid-group-collapse-dark:after {
2341 display: flex;
2342 justify-content: center;
2343 align-content: center;
2344 align-items: center;
2345 height: 100%;
2346 }

mercurial