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

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

mercurial