www/jqwidgets/styles/jqx.light.css

changeset 733
67bf19c50fcc
parent 619
4938909df593
equal deleted inserted replaced
732:db4de4f37b65 733:67bf19c50fcc
1 .jqx-widget-light { 1 :root {
2 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; 2 --jqx-primary-rgb: 0, 92, 153;
3 font-size:14px; 3 --jqx-primary: rgb(var(--jqx-primary-rgb));
4 color: #555; 4 --jqx-primary-color: #fff;
5 } 5 --jqx-background: #fff;
6 .jqx-widget-content-light { 6 --jqx-background-color: rgba(0,0,0, .88);
7 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; 7 --jqx-background-hover-rgb: 225, 225, 225;
8 font-size:14px; 8 --jqx-background-hover: rgb(var(--jqx-background-hover-rgb));
9 color: #555; 9 --jqx-background-color-hover: rgba(0,0,0,.54);
10 } 10 --jqx-surface-rgb: 255, 255, 255;
11 .jqx-widget-header-light { 11 --jqx-surface: rgb(var(--jqx-surface-rgb));
12 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; 12 --jqx-surface-color: rgba(0,0,0, .88);
13 font-size:14px; 13 --jqx-border: #E0E0E0;
14 background: #fff; 14 --jqx-scrollbar-background: #f5f5f5;
15 color: #555; 15 --jqx-scrollbar-border: #ddd;
16 } 16 --jqx-scrollbar-thumb-background: #C1C1C1;
17 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 }
18 /*Rounded Corners*/ 69 /*Rounded Corners*/
19 /*top-left rounded Corners*/ 70 /*top-left rounded Corners*/
20 .jqx-rc-tl-light { 71 .jqx-rc-tl-light {
21 -moz-border-radius-topleft: 4px; 72 border-top-left-radius: var(--jqx-border-radius);
22 -webkit-border-top-left-radius: 4px;
23 border-top-left-radius: 4px;
24 } 73 }
25 /*top-right rounded Corners*/ 74 /*top-right rounded Corners*/
26 .jqx-rc-tr-light { 75 .jqx-rc-tr-light {
27 -moz-border-radius-topright: 4px; 76 border-top-right-radius: var(--jqx-border-radius);
28 -webkit-border-top-right-radius: 4px;
29 border-top-right-radius: 4px;
30 } 77 }
31 /*bottom-left rounded Corners*/ 78 /*bottom-left rounded Corners*/
32 .jqx-rc-bl-light { 79 .jqx-rc-bl-light {
33 -moz-border-radius-bottomleft: 4px; 80 border-bottom-left-radius: var(--jqx-border-radius);
34 -webkit-border-bottom-left-radius: 4px;
35 border-bottom-left-radius: 4px;
36 } 81 }
37 /*bottom-right rounded Corners*/ 82 /*bottom-right rounded Corners*/
38 .jqx-rc-br-light { 83 .jqx-rc-br-light {
39 -moz-border-radius-bottomright: 4px; 84 border-bottom-right-radius: var(--jqx-border-radius);
40 -webkit-border-bottom-right-radius: 4px;
41 border-bottom-right-radius: 4px;
42 } 85 }
43 /*top rounded Corners*/ 86 /*top rounded Corners*/
44 .jqx-rc-t-light { 87 .jqx-rc-t-light {
45 -moz-border-radius-topleft: 4px; 88 border-top-left-radius: var(--jqx-border-radius);
46 -webkit-border-top-left-radius: 4px; 89 border-top-right-radius: var(--jqx-border-radius);
47 border-top-left-radius: 4px;
48 -moz-border-radius-topright: 4px;
49 -webkit-border-top-right-radius: 4px;
50 border-top-right-radius: 4px;
51 } 90 }
52 /*bottom rounded Corners*/ 91 /*bottom rounded Corners*/
53 .jqx-rc-b-light { 92 .jqx-rc-b-light {
54 -moz-border-radius-bottomleft: 4px; 93 border-bottom-left-radius: var(--jqx-border-radius);
55 -webkit-border-bottom-left-radius: 4px; 94 border-bottom-right-radius:var(--jqx-border-radius);
56 border-bottom-left-radius: 4px;
57 -moz-border-radius-bottomright: 4px;
58 -webkit-border-bottom-right-radius: 4px;
59 border-bottom-right-radius: 4px;
60 } 95 }
61 /*right rounded Corners*/ 96 /*right rounded Corners*/
62 .jqx-rc-r-light { 97 .jqx-rc-r-light {
63 -moz-border-radius-topright: 4px; 98 border-top-right-radius: var(--jqx-border-radius);
64 -webkit-border-top-right-radius: 4px; 99 border-bottom-right-radius: var(--jqx-border-radius);
65 border-top-right-radius: 4px;
66 -moz-border-radius-bottomright: 4px;
67 -webkit-border-bottom-right-radius: 4px;
68 border-bottom-right-radius: 4px;
69 } 100 }
70 /*left rounded Corners*/ 101 /*left rounded Corners*/
71 .jqx-rc-l-light { 102 .jqx-rc-l-light {
72 -moz-border-radius-topleft: 4px; 103 border-top-left-radius: var(--jqx-border-radius);
73 -webkit-border-top-left-radius: 4px; 104 border-bottom-left-radius: var(--jqx-border-radius);
74 border-top-left-radius: 4px;
75 -moz-border-radius-bottomleft: 4px;
76 -webkit-border-bottom-left-radius: 4px;
77 border-bottom-left-radius: 4px;
78 } 105 }
79 /*all rounded Corners*/ 106 /*all rounded Corners*/
80 .jqx-rc-all-light { 107 .jqx-rc-all-light {
81 -moz-border-radius: 4px; 108 border-radius: var(--jqx-border-radius);
82 -webkit-border-radius: 4px;
83 border-radius: 4px;
84 } 109 }
85 110
86 .jqx-widget-light, .jqx-widget-header-light, .jqx-fill-state-normal-light, 111 .jqx-widget-light, .jqx-widget-header-light, .jqx-fill-state-normal-light,
87 .jqx-widget-content-light, .jqx-fill-state-hover-light, .jqx-fill-state-pressed-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 {
88 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; 125 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
89 font-size:14px; 126 font-size: 14px;
90 } 127 color: var(--jqx-background-color);
91 128 background-color: var(--jqx-background);
92 .jqx-widget-content-light { 129 border-color: var(--jqx-border);
93 background-color: #ffffff; 130 }
94 border-color: #dddddd; 131 .jqx-grid-table-light.jqx-grid-table-one-cell {
132 border-right-color: var(--jqx-border);
95 } 133 }
96 .jqx-widget-header-light { 134 .jqx-widget-header-light {
97 color: #555; 135 background-color: var(--jqx-surface);
98 background-color:#f8f8f8; 136 border-color: var(--jqx-border);
99 border-color:#dddddd; 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);
100 *zoom: 1; 303 *zoom: 1;
101 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 304 }
102 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 305
103 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 306 .jqx-button-light.jqx-fill-state-hover.outlined,
104 } 307 .jqx-button-light.jqx-fill-state-hover.flat {
105 .jqx-widget-light input::selection, input.jqx-input-widget-light::selection, .jqx-widget-content-light input::selection { 308 color: var(--jqx-primary);
106 background: #0077BE; 309 box-shadow: none;
107 color: #fff; 310 }
108 } 311
109 .jqx-button-light { 312 .jqx-button-light.jqx-fill-state-pressed {
110 transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out; 313 cursor: pointer;
111 } 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);
112 .jqx-button-light, .jqx-fill-state-normal-light { 315 }
113 color: #555; 316
114 background:#fafafa; 317 .jqx-button-light.jqx-fill-state-pressed.float {
115 border-color: #dddddd; 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);
116 *zoom: 1; 319 }
117 } 320
118 321 .jqx-slider-button-light.jqx-fill-state-pressed-light,
119 .jqx-fill-state-hover-light { 322 .jqx-button-light.jqx-fill-state-pressed.outlined,
120 color: #373a3c; 323 .jqx-button-light.jqx-fill-state-pressed.flat {
121 border-color: #b2b2b2; 324 background: rgba(179,229,252,0.15);
122 border-color: rgba(0, 0, 0, 0.3); 325 box-shadow: none;
123 background-color: #f0f0f0; 326 color: var(--jqx-primary);
124 } 327 }
125 .jqx-fill-state-pressed-light { 328
126 color: #fff ; 329 .jqx-button-light.jqx-fill-state-focus {
127 background-color: #0077BE; 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);
128 border-color: #0077BE; 331 }
129 *background-color: #fff; 332 .jqx-slider-button-light.jqx-fill-state-focus-light {
130 } 333 background: transparent;
131 334 border-color: transparent;
132 .jqx-fill-state-hover-light, .jqx-fill-state-focus-light { 335 box-shadow:none;
133 color: #333333; 336 }
134 text-decoration: none; 337
135 } 338 .jqx-button-light.jqx-fill-state-focus.outlined,
136 .jqx-fill-state-focus-light, .jqx-item-light.jqx-fill-state-focus { 339 .jqx-button-light.jqx-fill-state-focus.flat {
137 border-color: #0077BE; 340 box-shadow: none;
138 } 341 background: rgba(rgb(var(--jqx-primary-rgb)),0.15);
139 .jqx-fill-state-pressed-light.jqx-fill-state-hover-light, .jqx-dropdownlist-state-selected-light{ 342 color: var(--jqx-primary);
140 color: #fff ; 343 }
141 } 344
142 .jqx-datetimeinput-light .jqx-action-button-light.jqx-fill-state-hover{ 345 .jqx-dropdownlist-content-light {
143 border-color: #ddd; 346 display: flex;
144 } 347 align-items: center;
145 .jqx-datetimeinput-light.jqx-fill-state-focus .jqx-action-button-light{ 348 height: 100% !important;
146 border-color: #0077BE; 349 margin-top: 0px !important;
147 } 350 }
148 .jqx-filter-input-light:focus { 351
149 border-color: #0077BE !important; 352 .jqx-dropdownlist-content-light span {
150 } 353 top: 0px !important;
151 354 }
152 .jqx-button-light {
153 color: #555;
154 border-color: #ddd;
155 *zoom: 1;
156 }
157
158 .jqx-button-light.jqx-fill-state-hover {
159
160 *zoom: 1;
161 -webkit-transition: background-color 100ms linear;
162 -moz-transition: background-color 100ms linear;
163 -o-transition: background-color 100ms linear;
164 -ms-transition: background-color 100ms linear;
165 transition: background-color 100ms linear;
166 }
167 .jqx-button-light.jqx-fill-state-pressed {
168 color: #fff;
169 background:#0077BE;
170 border-color: #0077BE;
171 *zoom: 1;
172 -webkit-transition: background-color 100ms linear;
173 -moz-transition: background-color 100ms linear;
174 -o-transition: background-color 100ms linear;
175 -ms-transition: background-color 100ms linear;
176 transition: background-color 100ms linear;
177 }
178
179 .jqx-dropdownlist-state-normal-light, .jqx-dropdownlist-state-hover-light, .jqx-dropdownlist-state-selected-light, 355 .jqx-dropdownlist-state-normal-light, .jqx-dropdownlist-state-hover-light, .jqx-dropdownlist-state-selected-light,
180 .jqx-scrollbar-button-state-hover-light, .jqx-scrollbar-button-state-normal-light, .jqx-scrollbar-button-state-pressed-light, 356 .jqx-scrollbar-button-state-hover-light, .jqx-scrollbar-button-state-normal-light, .jqx-scrollbar-button-state-pressed-light,
181 .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-hover-horizontal-light, .jqx-scrollbar-thumb-state-pressed-horizontal-light, 357 .jqx-scrollbar-thumb-state-normal-horizontal-light, .jqx-scrollbar-thumb-state-hover-horizontal-light, .jqx-scrollbar-thumb-state-pressed-horizontal-light,
182 .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-pressed-light, .jqx-tree-item-hover-light, .jqx-tree-item-selected-light, 358 .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-pressed-light, .jqx-tree-item-hover-light, .jqx-tree-item-selected-light,
183 .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, 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,
184 .jqx-menu-item-top-selected-light, .jqx-slider-button-light, .jqx-slider-slider-light 360 .jqx-menu-item-top-selected-light, .jqx-slider-button-light, .jqx-slider-slider-light {
185 {
186 -webkit-transition: background-color 100ms linear; 361 -webkit-transition: background-color 100ms linear;
187 -moz-transition: background-color 100ms linear; 362 -moz-transition: background-color 100ms linear;
188 -o-transition: background-color 100ms linear; 363 -o-transition: background-color 100ms linear;
189 -ms-transition: background-color 100ms linear; 364 -ms-transition: background-color 100ms linear;
190 transition: background-color 100ms linear; 365 transition: background-color 100ms linear;
191 } 366 }
192 .jqx-primary-light 367
193 { 368
194 color: #0077BE !important; 369 .jqx-primary-light.jqx-input-label-light {
195 background: #fff !important; 370 color: var(--jqx-primary) !important;
196 border-color: #0077BE!important; 371 }
197 text-shadow: none !important; 372 .jqx-primary-light.jqx-input-bar-light:before {
198 } 373 background: var(--jqx-primary) !important;
199 .jqx-primary-light.jqx-dropdownlist-state-normal-light, 374 }
200 .jqx-primary-light.jqx-slider-button-light, 375 .jqx-success-light.jqx-input-label-light {
201 .jqx-primary-light.jqx-slider-slider-light, 376 color: #5cb85c !important;
202 .jqx-primary-light.jqx-combobox-arrow-normal-light, 377 }
203 .jqx-primary-light.jqx-combobox-arrow-hover-light, 378 .jqx-success-light.jqx-input-bar-light:before {
204 .jqx-primary-light.jqx-action-button-light, 379 background: #5cb85c !important;
205 .jqx-primary-light:hover, 380 }
206 .jqx-primary-light:focus, 381 .jqx-inverse-light.jqx-input-label-light {
207 .jqx-primary-light:active, 382 color: #666 !important;
208 .jqx-primary-light.active, 383 }
209 .jqx-primary-light.disabled, 384 .jqx-inverse-light.jqx-input-bar-light:before {
210 .jqx-primary-light[disabled] { 385 background: #666 !important;
211 color: #fff !important; 386 }
212 background: #0077BE !important; 387 .jqx-danger-light.jqx-input-label-light {
213 border-color: #0077BE !important; 388 color: #d9534f !important;
214 text-shadow: none !important; 389 }
215 } 390 .jqx-danger-light.jqx-input-bar-light:before {
216 391 background: #d9534f !important;
217 .jqx-fill-state-pressed-light.jqx-primary-light, 392 }
218 .jqx-primary-light:active, 393 .jqx-warning-light.jqx-input-label-light {
219 .jqx-primary-light.active { 394 color: #f0ad4e !important;
220 color: #fff !important; 395 }
221 background-color: #0077BE !important; 396 .jqx-warning-light.jqx-input-bar-light:before {
222 border-color: #0077BE!important; 397 background: #f0ad4e !important;
223 text-shadow: none !important; 398 }
224 } 399 .jqx-info-light.jqx-input-label-light {
225 400 color: #5bc0de !important;
226 .jqx-success-light 401 }
227 { 402 .jqx-info-light.jqx-input-bar-light:before {
228 color: #5cb85c !important; 403 background: #5bc0de !important;
229 background: #fff !important; 404 }
230 border-color: #5cb85c!important; 405
231 text-shadow: none !important; 406 .jqx-slider-tooltip-light.jqx-primary-slider, .jqx-slider-tooltip-light.jqx-primary-slider .jqx-fill-state-normal-light {
232 } 407 border-color: var(--jqx-primary);
233 .jqx-success-light.jqx-dropdownlist-state-normal-light, 408 background: var(--jqx-primary);
234 .jqx-success-light.jqx-slider-button-light, 409 }
235 .jqx-success-light.jqx-slider-slider-light, 410 .jqx-slider-tooltip-light.jqx-success-slider, .jqx-slider-tooltip-light.jqx-success-slider .jqx-fill-state-normal-light {
236 .jqx-success-light.jqx-combobox-arrow-normal-light, 411 border-color: #5cb85c;
237 .jqx-success-light.jqx-combobox-arrow-hover-light, 412 background: #5cb85c;
238 .jqx-success-light.jqx-action-button-light, 413 }
239 .jqx-success-light:hover, 414 .jqx-slider-tooltip-light.jqx-inverse-slider, .jqx-slider-tooltip-light.jqx-inverse-slider .jqx-fill-state-normal-light {
240 .jqx-success-light:focus, 415 border-color: #666;
241 .jqx-success-light:active, 416 background: #666;
242 .jqx-success-light.active, 417 }
243 .jqx-success-light.disabled, 418 .jqx-slider-tooltip-light.jqx-danger-slider, .jqx-slider-tooltip-light.jqx-danger-slider .jqx-fill-state-normal-light {
244 .jqx-success-light[disabled] { 419 border-color: #d9534f;
245 color: #fff !important; 420 background: #d9534f;
246 background: #5cb85c !important; 421 }
247 border-color: #5cb85c!important; 422 .jqx-slider-tooltip-light.jqx-warning-slider, .jqx-slider-tooltip-light.jqx-warning-slider .jqx-fill-state-normal-light {
248 text-shadow: none !important; 423 border-color: #f0ad4e;
249 } 424 background: #f0ad4e;
250 425 }
251 .jqx-fill-state-pressed-light.jqx-success-light, 426 .jqx-slider-tooltip-light.jqx-info-slider, .jqx-slider-tooltip-light.jqx-info-slider .jqx-fill-state-normal-light {
252 .jqx-success-light:active, 427 border-color: #5bc0de;
253 .jqx-success-light.active { 428 background: #5bc0de;
254 text-shadow: none !important; 429 }
255 color: #fff !important; 430
256 background: #5cb85c !important; 431
257 border-color: #5cb85c!important; 432 .jqx-primary-light {
258 } 433 color: var(--jqx-primary) !important;
259 434 background: #fff !important;
260 .jqx-inverse-light 435 border-color: var(--jqx-primary) !important;
261 { 436 text-shadow: none !important;
262 text-shadow: none !important; 437 }
263 color: #666 !important; 438
264 background: #fff !important; 439 .jqx-primary-light.jqx-dropdownlist-state-normal-light,
265 border-color: #cccccc!important; 440 .jqx-primary-light.jqx-slider-button-light,
266 } 441 .jqx-primary-light.jqx-slider-slider-light,
267 .jqx-inverse-light.jqx-dropdownlist-state-normal-light, 442 .jqx-primary-light.jqx-combobox-arrow-normal-light,
268 .jqx-inverse-light.jqx-slider-button-light, 443 .jqx-primary-light.jqx-combobox-arrow-hover-light,
269 .jqx-inverse-light.jqx-slider-slider-light, 444 .jqx-primary-light.jqx-action-button-light,
270 .jqx-inverse-light.jqx-combobox-arrow-hover-light, 445 .jqx-primary-light:hover,
271 .jqx-inverse-light.jqx-combobox-arrow-normal-light, 446 .jqx-primary-light:focus,
272 .jqx-inverse-light.jqx-action-button-light, 447 .jqx-primary-light:active,
273 .jqx-inverse-light:hover, 448 .jqx-primary-light.active,
274 .jqx-inverse-light:focus, 449 .jqx-primary-light.disabled,
275 .jqx-inverse-light:active, 450 .jqx-primary-light[disabled] {
276 .jqx-inverse-light.active, 451 color: #fff !important;
277 .jqx-inverse-light.disabled, 452 background: var(--jqx-primary) !important;
278 .jqx-inverse-light[disabled] { 453 border-color: var(--jqx-primary) !important;
279 text-shadow: none !important; 454 text-shadow: none !important;
280 color: #666 !important; 455 }
281 background: #cccccc !important; 456
282 border-color: #cccccc!important; 457 .jqx-fill-state-pressed-light.jqx-primary-light,
283 } 458 .jqx-primary-light:active,
284 459 .jqx-primary-light.active {
285 .jqx-fill-state-pressed-light.jqx-inverse-light, 460 color: #fff !important;
286 .jqx-inverse-light:active, 461 background-color: var(--jqx-primary) !important;
287 .jqx-inverse-light.active { 462 border-color: var(--jqx-primary) !important;
288 text-shadow: none !important; 463 text-shadow: none !important;
289 color: #666 !important; 464 }
290 background: #cccccc !important; 465
291 border-color: #cccccc!important; 466 .jqx-success-light {
292 } 467 color: #5cb85c !important;
293 468 background: #fff !important;
294 469 border-color: #5cb85c !important;
295 .jqx-danger-light 470 text-shadow: none !important;
296 { 471 }
297 text-shadow: none !important; 472
298 color: #d9534f !important; 473 .jqx-success-light.jqx-dropdownlist-state-normal-light,
299 background: #fff !important; 474 .jqx-success-light.jqx-slider-button-light,
300 border-color: #d9534f!important; 475 .jqx-success-light.jqx-slider-slider-light,
301 } 476 .jqx-success-light.jqx-combobox-arrow-normal-light,
302 .jqx-danger-light.jqx-dropdownlist-state-normal-light, 477 .jqx-success-light.jqx-combobox-arrow-hover-light,
303 .jqx-danger-light.jqx-slider-button-light, 478 .jqx-success-light.jqx-action-button-light,
304 .jqx-danger-light.jqx-slider-slider-light, 479 .jqx-success-light:hover,
305 .jqx-danger-light.jqx-combobox-arrow-hover-light, 480 .jqx-success-light:focus,
306 .jqx-danger-light.jqx-combobox-arrow-normal-light, 481 .jqx-success-light:active,
307 .jqx-danger-light.jqx-action-button-light, 482 .jqx-success-light.active,
308 .jqx-danger-light:hover, 483 .jqx-success-light.disabled,
309 .jqx-danger-light:focus, 484 .jqx-success-light[disabled] {
310 .jqx-danger-light:active, 485 color: #fff !important;
311 .jqx-danger-light.active, 486 background: #5cb85c !important;
312 .jqx-danger-light.disabled, 487 border-color: #5cb85c !important;
313 .jqx-danger-light[disabled] { 488 text-shadow: none !important;
314 text-shadow: none !important; 489 }
315 color: #fff !important; 490
316 background: #d9534f !important; 491 .jqx-fill-state-pressed-light.jqx-success-light,
317 border-color: #d9534f!important; 492 .jqx-success-light:active,
318 } 493 .jqx-success-light.active {
319 494 text-shadow: none !important;
320 .jqx-fill-state-pressed-light.jqx-danger-light, 495 color: #fff !important;
321 .jqx-danger-light:active, 496 background: #5cb85c !important;
322 .jqx-danger-light.active { 497 border-color: #5cb85c !important;
323 text-shadow: none !important; 498 }
324 color: #fff !important; 499
325 background: #d9534f !important; 500 .jqx-inverse-light {
326 border-color: #d9534f!important; 501 text-shadow: none !important;
327 } 502 color: #666 !important;
328 503 background: #fff !important;
329 504 border-color: #cccccc !important;
330 .jqx-warning-light 505 }
331 { 506
332 text-shadow: none !important; 507 .jqx-inverse-light.jqx-dropdownlist-state-normal-light,
333 color: #f0ad4e !important; 508 .jqx-inverse-light.jqx-slider-button-light,
334 background: #fff !important; 509 .jqx-inverse-light.jqx-slider-slider-light,
335 border-color: #f0ad4e!important; 510 .jqx-inverse-light.jqx-combobox-arrow-hover-light,
336 } 511 .jqx-inverse-light.jqx-combobox-arrow-normal-light,
337 .jqx-warning-light.jqx-dropdownlist-state-normal-light, 512 .jqx-inverse-light.jqx-action-button-light,
338 .jqx-warning-light.jqx-slider-button-light, 513 .jqx-inverse-light:hover,
339 .jqx-warning-light.jqx-slider-slider-light, 514 .jqx-inverse-light:focus,
340 .jqx-warning-light.jqx-combobox-arrow-hover-light, 515 .jqx-inverse-light:active,
341 .jqx-warning-light.jqx-combobox-arrow-normal-light, 516 .jqx-inverse-light.active,
342 .jqx-warning-light.jqx-action-button-light, 517 .jqx-inverse-light.disabled,
343 .jqx-warning-light:hover, 518 .jqx-inverse-light[disabled] {
344 .jqx-warning-light:focus, 519 text-shadow: none !important;
345 .jqx-warning-light:active, 520 color: #666 !important;
346 .jqx-warning-light.active, 521 background: #cccccc !important;
347 .jqx-warning-light.disabled, 522 border-color: #cccccc !important;
348 .jqx-warning-light[disabled] { 523 }
349 text-shadow: none !important; 524
350 color: #fff !important; 525 .jqx-fill-state-pressed-light.jqx-inverse-light,
351 background: #f0ad4e !important; 526 .jqx-inverse-light:active,
352 border-color: #f0ad4e!important; 527 .jqx-inverse-light.active {
353 } 528 text-shadow: none !important;
354 529 color: #666 !important;
355 .jqx-fill-state-pressed-light.jqx-warning-light, 530 background: #cccccc !important;
356 .jqx-warning-light:active, 531 border-color: #cccccc !important;
357 .jqx-warning-light.active { 532 }
358 text-shadow: none !important; 533
359 color: #fff !important; 534
360 background: #f0ad4e !important; 535 .jqx-danger-light {
361 border-color: #f0ad4e!important; 536 text-shadow: none !important;
362 } 537 color: #d9534f !important;
363 538 background: #fff !important;
364 539 border-color: #d9534f !important;
365 .jqx-info-light 540 }
366 { 541
367 text-shadow: none !important; 542 .jqx-danger-light.jqx-dropdownlist-state-normal-light,
368 color: #5bc0de !important; 543 .jqx-danger-light.jqx-slider-button-light,
369 background: #fff !important; 544 .jqx-danger-light.jqx-slider-slider-light,
370 border-color: #5bc0de!important; 545 .jqx-danger-light.jqx-combobox-arrow-hover-light,
371 } 546 .jqx-danger-light.jqx-combobox-arrow-normal-light,
372 .jqx-info-light.jqx-dropdownlist-state-normal-light, 547 .jqx-danger-light.jqx-action-button-light,
373 .jqx-info-light.jqx-slider-button-light, 548 .jqx-danger-light:hover,
374 .jqx-info-light.jqx-slider-slider-light, 549 .jqx-danger-light:focus,
375 .jqx-info-light.jqx-combobox-arrow-hover-light, 550 .jqx-danger-light:active,
376 .jqx-info-light.jqx-combobox-arrow-normal-light, 551 .jqx-danger-light.active,
377 .jqx-info-light.jqx-action-button-light, 552 .jqx-danger-light.disabled,
378 .jqx-info-light:hover, 553 .jqx-danger-light[disabled] {
379 .jqx-info-light:focus, 554 text-shadow: none !important;
380 .jqx-info-light:active, 555 color: #fff !important;
381 .jqx-info-light.active, 556 background: #d9534f !important;
382 .jqx-info-light.disabled, 557 border-color: #d9534f !important;
383 .jqx-info-light[disabled] { 558 }
384 color: #fff !important; 559
385 background: #5bc0de !important; 560 .jqx-fill-state-pressed-light.jqx-danger-light,
386 border-color: #5bc0de!important; 561 .jqx-danger-light:active,
387 text-shadow: none !important; 562 .jqx-danger-light.active {
388 } 563 text-shadow: none !important;
389 564 color: #fff !important;
390 .jqx-fill-state-pressed-light.jqx-info-light, 565 background: #d9534f !important;
391 .jqx-info-light:active, 566 border-color: #d9534f !important;
392 .jqx-info-light.active { 567 }
393 text-shadow: none !important; 568
394 color: #fff !important; 569 .jqx-validator-error-label-light {
395 background: #5bc0de !important; 570 color: #d9534f !important;
396 border-color: #5bc0de!important; 571 }
397 } 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 }
398 641
399 .jqx-fill-state-pressed-light { 642 .jqx-fill-state-pressed-light {
400 background-image: none; 643 background-image: none;
401 outline: 0; 644 outline: 0;
402 } 645 }
403 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
404 .jqx-grid-cell-light { 692 .jqx-grid-cell-light {
693 background: var(--jqx-background);
694 color: var(--jqx-background-color);
405 -webkit-box-shadow: none; 695 -webkit-box-shadow: none;
406 -moz-box-shadow: none; 696 -moz-box-shadow: none;
407 box-shadow: none; 697 box-shadow: none;
408 } 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 }
409 795
410 .jqx-grid-column-menubutton-light { 796 .jqx-grid-column-menubutton-light {
411 background-color: transparent; 797 background-color: transparent;
412 border-color: #ddd !important; 798 border-color: var(--jqx-border) !important;
413 } 799 }
800
414 .jqx-cell-light { 801 .jqx-cell-light {
415 font-size: 14px; 802 font-size: 13px;
416 } 803 }
417 804
418 .jqx-calendar-light > div { 805 .jqx-calendar-light > div {
419 padding: 10px; 806 padding: 0px;
420 box-sizing: border-box; 807 box-sizing: border-box;
421 } 808 }
422 809 .jqx-calendar-month-light {
423 .jqx-calendar-light .jqx-widget-header-light 810 width: 90%;
424 { 811 position: relative;
425 background-color: #fff; 812 left: 5%;
426 font-size:12px; 813 }
427 box-shadow:none; 814 .jqx-calendar-title-navigation-light {
815 font-size: 20px;
816 padding: 0px 20px;
428 } 817 }
429 .jqx-calendar-row-header-light, .jqx-calendar-top-left-header-light { 818 .jqx-calendar-row-header-light, .jqx-calendar-top-left-header-light {
430 background-color: #f0f0f0; 819 background-color: var(--jqx-background);
431 border-color: #f2f2f2; 820 border: 0px solid var(--jqx-background);
432 box-shadow:none; 821 }
433 } 822
434 .jqx-calendar-title-content-light {
435 font-weight:bold;
436 }
437 .jqx-calendar-column-header-light { 823 .jqx-calendar-column-header-light {
438 background-color: #FFF; 824 background-color: var(--jqx-background);
439 border-top-color: #fff; 825 border-top: 1px solid var(--jqx-background);
440 box-shadow:none; 826 border-bottom: 1px solid var(--jqx-border);
441 border-bottom-color: #e9e9e9; 827 font-size: 12px;
442 } 828 color: var(--jqx-background-color);
443 .jqx-calendar-light > div { 829 }
444 padding: 10px; 830
445 box-sizing: border-box;
446 }
447 .jqx-expander-header-light { 831 .jqx-expander-header-light {
448 padding-top: 10px; padding-bottom: 10px; 832 padding-top: 10px;
449 } 833 padding-bottom: 10px;
450 .jqx-expander-header.jqx-fill-state-hover-light,
451 .jqx-expander-header.jqx-fill-state-normal-light,
452 .jqx-expander-header.jqx-fill-state-pressed-light
453 {
454 background: #fff;
455 border-color: #e0e0e0;
456 color: #333;
457 }
458 .jqx-expander-header.jqx-fill-state-hover-light {
459 background: #f6f6f6;
460 }
461 .jqx-expander-header.jqx-fill-state-focus-light {
462 border-color: #0077BE;
463 }
464 .jqx-expander-content.jqx-fill-state-focus-light {
465 border-color: #e0e0e0;
466 background: #fdfdfd;
467 }
468 .jqx-expander-header-light {
469 padding:10px;
470 } 834 }
471 835
472 .jqx-ribbon-header-vertical-light, .jqx-widget-header-vertical-light { 836 .jqx-ribbon-header-vertical-light, .jqx-widget-header-vertical-light {
473 background:#f0f0f0; 837 background: var(--jqx-background);
474 } 838 }
475 839
476 .jqx-scrollbar-state-normal-light { 840 .jqx-scrollbar-state-normal-light {
477 background-color: #f8f8f8; 841 background-color: var(--jqx-scrollbar-background);
478 border: 1px solid #f8f8f8; 842 border: 1px solid var(--jqx-scrollbar-background);
479 border-left-color: #ddd; 843 border-left-color: var(--jqx-scrollbar-border);
480 } 844 }
481 845
482 .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light { 846 .jqx-scrollbar-thumb-state-normal-light, .jqx-scrollbar-thumb-state-normal-horizontal-light {
483 background: #f6f6f6; 847 background: var(--jqx-scrollbar-thumb-background);
484 border-color: #b3b3b3; 848 border-color: var(--jqx-scrollbar-thumb-border);
849 border-radius: 0px;
485 } 850 }
486 851
487 .jqx-scrollbar-thumb-state-hover-light, .jqx-scrollbar-thumb-state-hover-horizontal-light { 852 .jqx-scrollbar-thumb-state-hover-light, .jqx-scrollbar-thumb-state-hover-horizontal-light {
488 background: #e6e6e6; 853 background: var(--jqx-scrollbar-thumb-background-hover);
489 border-color: #b3b3b3; 854 border-color: var(--jqx-scrollbar-thumb-border-hover);
490 box-shadow: none; 855 box-shadow: none;
491 -webkit-box-shadow: none; 856 -webkit-box-shadow: none;
492 -moz-box-shadow: none; 857 -moz-box-shadow: none;
493 } 858 }
494 859
495 .jqx-progressbar-light { 860 .jqx-progressbar-light {
496 background: #f7f7f7 !important; 861 background: var(--jqx-background) !important;
497 -webkit-box-shadow: none; 862 -webkit-box-shadow: none;
498 -moz-box-shadow: none; 863 -moz-box-shadow: none;
499 box-shadow: none; 864 box-shadow: none;
500 } 865 }
501 866
502 .jqx-progressbar-value-light, .jqx-splitter-collapse-button-horizontal-light { 867 .jqx-progressbar-value-light, .jqx-splitter-collapse-button-horizontal-light {
503 background: #0077BE; 868 background: var(--jqx-primary);
504 } 869 }
505 870
506 .jqx-splitter-collapse-button-vertical-light, .jqx-progressbar-value-vertical-light { 871 .jqx-splitter-collapse-button-vertical-light, .jqx-progressbar-value-vertical-light {
507 background: #0077BE; 872 background: var(--jqx-primary);
508 } 873 }
509 874
510 875 .jqx-scrollbar-mobile-light .jqx-scrollbar-button-state-normal {
511 .jqx-scrollbar-thumb-state-pressed-light, .jqx-splitter-splitbar-vertical-light, .jqx-splitter-splitbar-horizontal-light, .jqx-scrollbar-thumb-state-pressed-horizontal-light, 876 display: none !important;
512 .jqx-scrollbar-button-state-pressed-light 877 }
513 { 878
514 background: #d9d9d9; 879 .jqx-scrollbar-button-state-hover-light {
515 border-color: #b3b3b3; 880 color: var(--jqx-scrollbar-button-color-hover);
516 box-shadow: none; 881 background: var(--jqx-scrollbar-button-background-hover);
517 -webkit-box-shadow: none; 882 border-color: var(--jqx-scrollbar-button-border-hover);
518 -moz-box-shadow: none; 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;
519 } 904 }
520 905
521 .jqx-grid-column-sortdescbutton-light, jqx-grid-column-filterbutton-light, .jqx-grid-column-sortascbutton-light { 906 .jqx-grid-column-sortdescbutton-light, jqx-grid-column-filterbutton-light, .jqx-grid-column-sortascbutton-light {
522 background-color: transparent; 907 background-color: transparent;
523 border-style: solid; 908 border-style: solid;
524 border-width: 0px 0px 0px 0px; 909 border-width: 0px 0px 0px 0px;
525 border-color: #ddd; 910 border-color: var(--jqx-border);
526 } 911 }
527 912
528 .jqx-menu-vertical-light { 913 .jqx-menu-vertical-light {
529 background: #ffffff; 914 background: var(--jqx-background);
530 filter: none; 915 filter: none;
531 } 916 }
532 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 }
533 .jqx-checkbox-check-checked-light { 1014 .jqx-checkbox-check-checked-light {
534 background: transparent url(images/material_check_black.png) center center no-repeat; 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);
535 } 1023 }
536 .jqx-checkbox-check-indeterminate-light { 1024 .jqx-checkbox-check-indeterminate-light {
537 width:14px !important; 1025 width:14px !important;
538 height:14px !important; 1026 height:14px !important;
539 position:relative; 1027 position:relative;
540 top: 1px; 1028 top: 1px;
541 left: 1px; 1029 left: 1px;
542 background: #0379BF; 1030 background: var(--jqx-background);
543 } 1031 }
544 .jqx-checkbox-hover { 1032 .jqx-tree-light .jqx-checkbox-check-indeterminate-light {
545 box-shadow: none; 1033 width:12px !important;
546 -webkit-box-shadow: none; 1034 height:12px !important;
547 -moz-box-shadow: none; 1035 top: 2px;
548 } 1036 left:2px;
549 .jqx-combobox-content-light, .jqx-input-light { 1037 }
550 } 1038
551 1039 .jqx-checkbox-hover-light,
552 .jqx-combobox-content-light { 1040 .jqx-radiobutton-hover-light {
553 border-color: #ddd; 1041 background-color: var(--jqx-primary);
554 border-color: rgba(0, 0, 0, 0.25); 1042 border-color: var(--jqx-primary);
555 } 1043 }
556 1044
557 .jqx-grid-bottomright-light, .jqx-panel-bottomright-light, .jqx-listbox-bottomright-light { 1045
558 background-color: #f8f8f8; 1046 .jqx-slider-slider-light {
559 } 1047 transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
560 1048 }
561 .jqx-window-light, .jqx-tooltip-light { 1049
562 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); 1050 .jqx-slider-slider-light:active {
563 } 1051 transform: scale(1.2);
564 1052 box-shadow: rgba(0,0,0,0.3) 0 0 10px;
565 .jqx-docking-light .jqx-window-light { 1053 }
566 box-shadow: none; 1054 .jqx-slider-light[discrete] .jqx-slider-slider-light:active
567 } 1055 {
568 1056 transform: scaleX(0);
569 .jqx-docking-panel-light .jqx-window-light { 1057
570 box-shadow: none; 1058 }
571 } 1059 .jqx-slider-slider-horizontal-light {
572 1060 background: var(--jqx-primary);
573 .jqx-radiobutton-light { 1061 }
574 box-shadow: none; 1062 .jqx-slider-slider-vertical-light {
575 -webkit-box-shadow: none; 1063 background: var(--jqx-primary);
576 -moz-box-shadow: none; 1064 }
577 background-repeat: no-repeat; 1065 .jqx-slider-tooltip-light {
578 background: none; 1066 width: 25px;
579 } 1067 height: 25px;
580 1068 transform-origin: 50% 100%;
581 .jqx-radiobutton-light-light, .jqx-radiobutton-hover-light { 1069 border-radius: 50%;
582 -moz-border-radius: 100%; 1070 transform: scale(0) rotate(45deg);
583 -webkit-border-radius: 100%; 1071 padding:0px;
584 border-radius: 100%; 1072 background: transparent !important;
585 background-repeat: no-repeat; 1073 }
586 } 1074 .jqx-slider-tooltip-light.init {
587 1075 transform: scale(1) rotate(45deg);
588 .jqx-radiobutton-check-checked-light { 1076 }
589 filter: none; 1077 .jqx-slider-tooltip-light.hide {
590 background: #0077BE; 1078 transition: transform 0.2s ease;
591 background-repeat: no-repeat; 1079 transform-origin:50% 100%;
592 -moz-border-radius: 100%; 1080 transform: scale(0) rotate(45deg);
593 -webkit-border-radius: 100%; 1081 }
594 border-radius: 100%; 1082 .jqx-slider-tooltip-light.show {
595 } 1083 transition: transform 0.2s ease;
596 1084 transform: scale(1) rotate(45deg);
597 .jqx-radiobutton-check-indeterminate-light { 1085 }
598 filter: none; 1086
599 background: #999; 1087
600 -moz-border-radius: 100%; 1088 .jqx-slider-tooltip-light .jqx-tooltip-arrow-t-b,
601 -webkit-border-radius: 100%; 1089 .jqx-slider-tooltip-light .jqx-tooltip-arrow-l-r {
602 border-radius: 100%; 1090 display:none;
603 } 1091 visibility:hidden;
604 1092 }
605 .jqx-radiobutton-check-indeterminate-disabled-light { 1093
606 filter: none; 1094 .jqx-slider-tooltip-light, .jqx-slider-tooltip-light .jqx-fill-state-normal-light {
607 background: #999; 1095 border-radius: 15px 15px 0px;
608 -moz-border-radius: 100%; 1096 display: flex;
609 -webkit-border-radius: 100%; 1097 align-items: center;
610 border-radius: 100%; 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);
611 } 1146 }
612 1147
613 .jqx-slider-track-horizontal-light, .jqx-slider-track-vertical-light { 1148 .jqx-slider-track-horizontal-light, .jqx-slider-track-vertical-light {
614 border-color: #ddd; 1149 border-color: var(--jqx-border);
615 background: #f0f0f0; 1150 background: var(--jqx-background);
616 } 1151 }
617 1152
618 .jqx-slider-button-light { 1153 .jqx-slider-button-light {
619 -moz-border-radius: 100%; 1154 -moz-border-radius: 100%;
620 -webkit-border-radius: 100%; 1155 -webkit-border-radius: 100%;
621 border-radius: 100%; 1156 border-radius: 100%;
622 background-color: transparent; 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 {
623 border-color: transparent !important; 1590 border-color: transparent !important;
624 } 1591 border-bottom: 1px solid #df2227 !important;
625 1592 }
626 .jqx-slider-slider-light { 1593 .jqx-input-light input,
627 transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; 1594 .jqx-dropdownlist-state-normal-light,
628 } 1595 .jqx-combobox-state-normal-light,
629 1596 .jqx-numberinput-light,
630 .jqx-slider-has-value-light { 1597 .jqx-maskedinput-light,
631 -moz-border-radius: 100%; 1598 .jqx-datetimeinput-light
632 -webkit-border-radius: 100%; 1599 {
633 border-radius: 100%; 1600 background: var(--jqx-surface);
634 background-color: #0077BE; 1601 border-color: var(--jqx-surface);
635 border-color: #0077BE !important; 1602 border-radius: 0;
636 } 1603 color: var(--jqx-surface-color);
637 1604 box-shadow: none;
638 .jqx-slider-slider-light:active { 1605 border-bottom: 1px solid var(--jqx-border);
639 transform: scale(1.2); 1606 outline: none;
640 box-shadow: rgba(0,0,0,0.3) 0 0 10px; 1607 }
641 } 1608 .jqx-numberinput-light .jqx-action-button-light{
642 1609 border-radius: 0;
643 .jqx-slider-tooltip-light, .jqx-slider-tooltip-light .jqx-fill-state-normal-light { 1610 font-size:12px;
644 border-radius: 4px; 1611 }
1612 .jqx-numberinput-light .jqx-action-button-light > div {
1613 width: 100%;
645 display: flex; 1614 display: flex;
646 align-items: center; 1615 align-items: center;
647 justify-content: center; 1616 justify-content: center;
648 background: #0077BE; 1617 }
649 border-color: #0077BE; 1618 .jqx-maskedinput-light,
650 color: #fff; 1619 .jqx-combobox-light,
651 font-size:11px; 1620 .jqx-datetimeinput-light {
652 } 1621 background: var(--jqx-background);
653 1622 color: var(--jqx-background-color);
654 .jqx-slider-tooltip-light .jqx-tooltip-arrow-t-b, 1623 border-color: var(--jqx-background);
655 .jqx-slider-tooltip-light .jqx-tooltip-arrow-l-r { 1624 border-bottom: 1px solid var(--jqx-border);
656 background: #0077BE; 1625 }
657 border-color: #0077BE; 1626 .jqx-combobox-light .jqx-combobox-arrow-normal-light,
658 } 1627 .jqx-datetimeinput-light .jqx-action-button-light,
659 .jqx-listitem-state-normal-light, 1628 .jqx-datetimeinput-light .jqx-action-button-rtl-light
660 .jqx-listitem-state-hover-light,
661 .jqx-listitem-state-selected-light
662 { 1629 {
663 padding-top:5px; 1630 background-color: var(--jqx-surface);
664 padding-bottom:5px; 1631 border-color: var(--jqx-surface);
665 margin:0px; 1632 color:var(--jqx-surface-color);
666 border-radius: 0px; 1633 }
667 } 1634 .jqx-datetimeinput-light, .jqx-datetimeinput-light > div,
668 1635 .jqx-numberinput-light, .jqx-numberinput-light > div,
669 .jqx-listitem-state-normal-light.checkboxes, 1636 .jqx-maskedinput-light, .jqx-maskedinput-light > div,
670 .jqx-listitem-state-hover-light.checkboxes, 1637 .jqx-dropdownlist-state-normal-light, .jqx-dropdownlist-state-normal-light > div, .jqx-dropdownlist-state-normal-light > div > div,
671 .jqx-listitem-state-selected-light.checkboxes { 1638 .jqx-combobox-state-normal-light, .jqx-combobox-state-normal-light > div, .jqx-combobox-state-normal-light > div > div {
672 border-radius: 4px; 1639 overflow: visible !important;
673 } 1640 }
674 1641
675 .jqx-listitem-element-light { 1642 .jqx-input-light input:focus {
676 1643 border-radius: 0;
677 } 1644 box-shadow: none;
678 1645 }
679 /*applied to a list item when the item is selected.*/ 1646
680 .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, 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 {
681 .jqx-menu-vertical-light .jqx-menu-item-top-hover-light, .jqx-input-popup-light .jqx-fill-state-hover-light, 1648 font-size: var(--jqx-font-size);
682 .jqx-input-popup-light .jqx-fill-state-pressed-light { 1649 font-family: var(--jqx-font-family);
683 color: #0077BE !important; 1650 resize: none;
684 border-color: #e1f5fe; 1651 background: var(--jqx-background);
685 text-decoration: none; 1652 color: var(--jqx-background-color);
686 background-color: #e1f5fe; 1653 border: none;
687 background-repeat: repeat-x; 1654 border-radius: 0;
688 outline: 0; 1655 box-sizing:border-box;
689 background: #e1f5fe; /* Old browsers */
690 -webkit-box-shadow: none;
691 -moz-box-shadow: none;
692 box-shadow: none; 1656 box-shadow: none;
693 background-position: 0 0; 1657 border-bottom: 1px solid var(--jqx-border);
694 } 1658 }
695 .jqx-scheduler-cell-hover-light { 1659
696 border-color: #e3f5fb !important; 1660 input[type="text"].jqx-widget-content-light,
697 background: #e3f5fb !important; 1661 input[type="textarea"].jqx-widget-content-light {
698 } 1662 height: 100%;
699 .jqx-grid-table-dark { 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);
700 font-size: 14px; 1715 font-size: 14px;
701 } 1716 font-weight: normal;
702 1717 position: absolute;
703 1718 pointer-events: none;
704 .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, 1719 left: 2px;
705 .jqx-menu-vertical-light .jqx-menu-item-top-selected-light, .jqx-grid-selectionarea-light, .jqx-input-button-header-light, .jqx-input-button-innerHeader-light { 1720 top:10px;
706 color: #ffffff !important; 1721 opacity: 0;
707 background-color: #0077BE; 1722 top: calc(50% - 7px);
708 *background-color: #0077BE; 1723 transition: 300ms ease all;
709 background-repeat: repeat-x; 1724 }
710 border-color: #0077BE !important; 1725 .jqx-input-label.initial {
711 background: #0077BE; /* Old browsers */
712 -webkit-box-shadow: none;
713 -moz-box-shadow: none;
714 box-shadow: none;
715 }
716 .jqx-scheduler-cell-selected-light {
717 border-color: #0077BE !important;
718 background: #0077BE !important;
719 }
720 .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 {
721 -webkit-box-shadow: none;
722 -moz-box-shadow: none;
723 box-shadow: none;
724 -webkit-transition: none;
725 -moz-transition: none;
726 -o-transition: none;
727 transition: none; 1726 transition: none;
728 } 1727 }
729 1728 .jqx-input-bar-light {
730 .jqx-popup-light { 1729 position: relative;
731 border: 1px solid #ddd; 1730 display: block;
732 *border-right-width: 2px; 1731 z-index:1;
733 *border-bottom-width: 2px; 1732 }
734 -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); 1733
735 -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); 1734 .jqx-input-bar-light:before {
736 } 1735 content: '';
737 .jqx-grid-column-sortascbutton-light, .jqx-expander-arrow-bottom-light, .jqx-window-collapse-button-light, .jqx-menu-item-arrow-up-light, .jqx-menu-item-arrow-up-selected-light, .jqx-menu-item-arrow-top-up-light, .jqx-icon-arrow-up-light, .jqx-icon-arrow-up-hover-light, .jqx-icon-arrow-up-selected-light { 1736 height: 2px;
738 background-image: url('images/metro-icon-up.png'); 1737 width: 0;
739 background-repeat: no-repeat; 1738 bottom: 0px;
740 background-position: center; 1739 position: absolute;
741 } 1740 background: var(--jqx-primary);
742 1741 transition: 300ms ease all;
743 .jqx-widget-light .jqx-grid-group-expand-light, .jqx-grid-group-expand-light, .jqx-grid-column-menubutton-light, .jqx-grid-column-sortdescbutton-light, .jqx-expander-arrow-top-light, .jqx-window-collapse-button-collapsed-light, .jqx-menu-item-arrow-down-light, .jqx-menu-item-arrow-down-selected-light, .jqx-menu-item-arrow-down-light, .jqx-icon-arrow-down-light, .jqx-icon-arrow-down-hover-light, .jqx-icon-arrow-down-selected-light { 1742 left: 0%;
744 background-image: url('images/metro-icon-down.png'); 1743 }
745 background-repeat: no-repeat; 1744 .jqx-formatted-input-spin-button-light, .jqx-input-group-addon-light {
746 background-position: center; 1745 border-color: var(--jqx-background);
747 } 1746 color: var(--jqx-background-color);
748 1747 background: var(--jqx-background);
749 .jqx-tabs-arrow-left-light, .jqx-menu-item-arrow-left-selected-light, .jqx-menu-item-arrow-top-left, .jqx-icon-arrow-left-light, .jqx-icon-arrow-down-left-light, .jqx-icon-arrow-left-selected-light { 1748 }
750 background-image: url('images/metro-icon-left.png'); 1749 .jqx-dropdownlist-state-selected-light,
751 background-repeat: no-repeat; 1750 .jqx-combobox-state-selected-light {
752 background-position: center; 1751 color: var(--jqx-primary);
753 } 1752 background: var(--jqx-primary-color);
754 1753 border-color: var(--jqx-primary-color);
755 .jqx-widget-light .jqx-grid-group-collapse-light, .jqx-grid-group-collapse-light, .jqx-tabs-arrow-right-light, .jqx-menu-item-arrow-right-selected-light, .jqx-menu-item-arrow-top-right-light, .jqx-icon-arrow-right-light, .jqx-icon-arrow-right-hover-light, .jqx-icon-arrow-right-selected-light { 1754 }
756 background-image: url('images/metro-icon-right.png'); 1755
757 background-repeat: no-repeat;
758 background-position: center;
759 }
760
761 .jqx-tree-item-arrow-collapse-rtl-light, .jqx-tree-item-arrow-collapse-hover-rtl-light {
762 background-image: url(images/metro-icon-left.png);
763 }
764
765 .jqx-menu-item-arrow-left-selected-light {
766 background-image: url('images/metro-icon-left-white.png');
767 background-repeat: no-repeat;
768 background-position: center;
769 }
770
771 .jqx-menu-item-arrow-right-selected-light {
772 background-image: url('images/metro-icon-right-white.png');
773 background-repeat: no-repeat;
774 background-position: center;
775 }
776
777 .jqx-input-button-content-light {
778 font-size: 10px;
779 }
780 .jqx-widget .jqx-grid-cell, .jqx-widget .jqx-grid-column-header, .jqx-widget .jqx-grid-group-cell {border-color: #ddd;}
781 .jqx-grid-groups-row-light > span {
782 padding-left: 4px;
783 }
784 .jqx-combobox-content-light, .jqx-input-light {
785 border-color: #ddd;
786 color: #555555;
787 background-color: #ffffff;
788 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
789 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
790 }
791
792 .jqx-combobox-content-light, .jqx-combobox-light, .jqx-combobox-state-normal-light {
793 border-color: #ddd;
794 }
795
796 .jqx-combobox-content-focus-light, .jqx-combobox-state-focus-light, .jqx-fill-state-focus-light,
797 .jqx-numberinput-focus-light {
798 outline: none;
799 border-color: #959595;
800 }
801
802
803 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 {
804 font-size: 14px;
805 padding-left:3px;
806 padding-right: 3px;
807 resize: none;
808 }
809
810 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 {
811 color: #999999;
812 }
813
814 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 {
815 color: #999999;
816 }
817
818 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 {
819 color: #999999;
820 }
821
822 .jqx-combobox-content-light, .jqx-input-light {
823 border-color: #ddd;
824 color: #555555;
825 background-color: #ffffff;
826 }
827
828 .jqx-combobox-content-light, .jqx-combobox-light, .jqx-combobox-state-normal-light {
829 border-color: #ddd;
830 }
831
832 .jqx-combobox-content-focus-light, .jqx-combobox-state-focus-light, .jqx-fill-state-focus-light,
833 .jqx-numberinput-focus-light {
834 outline: none;
835 border-color: #0077BE;
836 }
837 .jqx-popup-light.jqx-fill-state-focus-light
838 {
839 outline: none;
840 border-color: #ddd !important;
841 }
842
843 .jqx-datetimeinput-content, .jqx-datetimeinput-container {
844 overflow: visible !important;
845 }
846 .jqx-slider-rangebar-light {
847 border-color: #0077BE;
848 background: #0077BE;
849 }
850 .jqx-switchbutton-light{
851 border-radius: 15px;
852 }
853 .jqx-switchbutton-light .jqx-fill-state-normal-light,
854 .jqx-switchbutton-light .jqx-fill-state-hover-light,
855 .jqx-switchbutton-light .jqx-fill-state-pressed-light {
856 border-color: #0077BE;
857 background: #0077BE;
858 }
859
860 .jqx-grid-cell-light.jqx-grid-cell-selected-light>.jqx-grid-group-expand-light {
861 background-image: url('images/metro-icon-down-white.png');
862 background-repeat: no-repeat;
863 background-position: center;
864 }
865 .jqx-grid-cell-light.jqx-grid-cell-selected-light>.jqx-grid-group-collapse-light{
866 background-image: url('images/metro-icon-right-white.png');
867 background-repeat: no-repeat;
868 background-position: center;
869 }
870 .jqx-grid-cell-light.jqx-grid-cell-selected-light>.jqx-grid-group-collapse-rtl-light{
871 background-image: url('images/metro-icon-left-white.png');
872 background-repeat: no-repeat;
873 background-position: center;
874 }
875 .jqx-grid-cell-light.jqx-grid-cell-selected-light>.jqx-grid-group-expand-rtl-light {
876 background-image: url('images/metro-icon-down-white.png');
877 background-repeat: no-repeat;
878 background-position: center;
879 }
880 .jqx-tabs-title-selected-top-light, .jqx-tabs-selection-tracker-top-light {
881 border-color: transparent;
882 filter: none;
883 background: #fff;
884 color: #333;
885 -webkit-box-shadow: none;
886 -moz-box-shadow: none;
887 box-shadow: none;
888 }
889 .jqx-tabs-arrow-background-light{
890 background: #fff;
891 border:none;
892 box-shadow:none;
893 }
894 .jqx-tabs-title-light, .jqx-ribbon-item-light {
895 color: #333;
896 }
897 .jqx-tabs-title-selected-bottom-light,
898 .jqx-tabs-title-selected-top-light
899 {
900 padding-top:5px;
901 padding-bottom:5px;
902 color: #1997C6;
903 font-weight:500;
904 }
905 .jqx-tabs-title.jqx-fill-state-hover-light {
906 border-color: transparent;
907 }
908 .jqx-ribbon-item-light {
909 cursor: pointer;
910 }
911 .jqx-ribbon-item-selected-light {
912 color: #1997C6;
913 font-weight:500;
914 border-color: transparent;
915 }
916
917 .jqx-ribbon-item-hover-light {
918 background: transparent;
919 border-color: transparent;
920 }
921
922 .jqx-ribbon-header-top-light {
923 border-color: transparent;
924 border-bottom-color: #E0E0E0;
925 }
926
927 .jqx-ribbon-header-bottom-light {
928 border-color: transparent;
929 border-top-color: #E0E0E0;
930 }
931
932 .jqx-ribbon-header-right-light {
933 border-color: transparent;
934 border-left-color:#E0E0E0;
935 }
936
937 .jqx-ribbon-header-left-light {
938 border-color: transparent;
939 border-right-color:#E0E0E0;
940 }
941
942 .jqx-tabs-title-selected-bottom-light, .jqx-tabs-selection-tracker-bottom-light {
943 border-color: transparent;
944 border-top: 1px solid #fff;
945 filter: none;
946 background: #fff;
947 -webkit-box-shadow: none;
948 -moz-box-shadow: none;
949 box-shadow: none;
950 }
951
952 .jqx-tabs-light, .jqx-ribbon-light {
953 border-color: transparent;
954 }
955
956 .jqx-tabs-header-light, .jqx-ribbon-header-light {
957 background: transparent;
958 }
959 .jqx-tabs-position-bottom .jqx-tabs-header-light {
960 border-color: transparent;
961 }
962 .jqx-layout-light .jqx-tabs-header-light, .jqx-layout-light .jqx-ribbon-header-light {
963 background: #fff;
964 border-color: #E0E0E0;
965 }
966 .jqx-tabs-title-bottom {
967 border-color: transparent;
968 }
969 .jqx-tabs-title-hover-top-light, .jqx-tabs-title-hover-bottom-light, .jqx-tabs-header-light {
970 -webkit-box-shadow: none !important;
971 -moz-box-shadow: none !important;
972 box-shadow: none !important;
973 background: transparent;
974 }
975
976 .jqx-tabs-content-light {
977 box-sizing: border-box;
978 border: 1px solid #E0E0E0;
979 border-top-color: transparent;
980 padding:5px;
981 }
982
983 .jqx-tabs-bar-light {
984 position: absolute;
985 bottom: 0;
986 background: #1997C6;
987 height: 2px;
988 z-index:20;
989 transition: .5s cubic-bezier(.35,0,.25,1);
990 }
991 .jqx-tabs-bar-light.vertical {
992 width: 2px;
993 }
994 .jqx-tabs-position-bottom .jqx-tabs-bar-light {
995 top: 0;
996 }
997
998 .jqx-window-content-light {
999 box-sizing:border-box;
1000 }
1001
1002 .jqx-layout-light
1003 {
1004 background-color: #cccccc;
1005 }
1006 .jqx-kanban-column-header-collapsed-light {
1007 background: -moz-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* ff3.6+ */
1008 background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(248,248,248,1)), color-stop(100%, rgba(234,234,234,1))); /* safari4+,chrome */
1009 background: -webkit-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* safari5.1+,chrome10+ */
1010 background: -o-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* opera 11.10+ */
1011 background: -ms-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* ie10+ */
1012 background: linear-gradient(90deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* w3c */
1013 }
1014
1015 .jqx-calendar-light td {
1016 font-size: 12px;
1017 }
1018 .jqx-grid-column-menubutton-light {
1019 background-image: url('images/metro-icon-down.png');
1020 }
1021 .jqx-grid-pager-top-light .jqx-grid-pager-number-light,
1022 .jqx-grid-pager-light .jqx-grid-pager-number-light {
1023
1024 background-color: transparent;
1025 border-color: transparent;
1026 color: rgba(0,0,0,.54) !important;
1027 font-size:12px;
1028 }
1029
1030 .jqx-grid-pager-top-light .jqx-grid-pager-number-light:hover,
1031 .jqx-grid-pager-light .jqx-grid-pager-number-light:hover {
1032 font-size:12px;
1033 }
1034
1035 .jqx-grid-pager-top-light .jqx-grid-pager-number-light.jqx-fill-state-pressed-light ,
1036 .jqx-grid-pager-light .jqx-grid-pager-number-light.jqx-fill-state-pressed-light {
1037 color: #0077BE !important;
1038 font-weight: bold !important;
1039 }
1040 .jqx-menu-item-arrow-up-selected-light, .jqx-icon-arrow-up-selected-light{background-image:url('images/metro-icon-up-white.png');background-repeat:no-repeat;background-position:center;}
1041 .jqx-menu-item-arrow-down-selected-light, .jqx-icon-arrow-down-selected-light{background-image:url('images/metro-icon-down-white.png');background-repeat:no-repeat;background-position:center;}
1042 .jqx-menu-item-arrow-left-selected-light, .jqx-icon-arrow-left-selected-light{background-image:url('images/metro-icon-left-white.png');background-repeat:no-repeat;background-position:center;}
1043 .jqx-menu-item-arrow-right-selected-light, .jqx-icon-arrow-right-selected-light{background-image:url('images/metro-icon-right-white.png');background-repeat:no-repeat;background-position:center;}
1044 .jqx-tabs-close-button-light{background-image:url(images/close.png); background-repeat:no-repeat; background-position:center;}
1045 .jqx-tabs-close-button-selected-light{background-image:url(images/close.png); background-repeat:no-repeat; background-position:center;}
1046 .jqx-tabs-close-button-hover-light{background-image:url(images/close.png); background-repeat:no-repeat; background-position:center;}
1047 .jqx-scrollbar-button-state-pressed-light .jqx-icon-arrow-up-selected-light{background-image:url('images/metro-icon-up.png');background-repeat:no-repeat;background-position:center;}
1048 .jqx-scrollbar-button-state-pressed-light .jqx-icon-arrow-down-selected-light{background-image:url('images/metro-icon-down.png');background-repeat:no-repeat;background-position:center;}
1049 .jqx-scrollbar-button-state-pressed-light .jqx-icon-arrow-left-selected-light{background-image:url('images/metro-icon-left.png');background-repeat:no-repeat;background-position:center;}
1050 .jqx-scrollbar-button-state-pressed-light .jqx-icon-arrow-right-selected-light{background-image:url('images/metro-icon-right.png');background-repeat:no-repeat;background-position:center;}
1051
1052 .jqx-grid-cell-light.jqx-grid-cell-selected-light>.jqx-grid-group-expand-light {
1053 background-image: url('images/metro-icon-down-white.png');
1054 background-repeat: no-repeat;
1055 background-position: center;
1056 }
1057 .jqx-grid-cell-light.jqx-grid-cell-selected-light>.jqx-grid-group-collapse-light{
1058 background-image: url('images/metro-icon-right-white.png');
1059 background-repeat: no-repeat;
1060 background-position: center;
1061 }
1062 .jqx-grid-cell-light.jqx-grid-cell-selected-light>.jqx-grid-group-collapse-rtl-light {
1063 background-image: url('images/metro-icon-left-white.png');
1064 background-repeat: no-repeat;
1065 background-position: center;
1066 }
1067 .jqx-grid-cell-light.jqx-grid-cell-selected-light>.jqx-grid-group-expand-rtl-light{
1068 background-image: url('images/metro-icon-down-white.png');
1069 background-repeat: no-repeat;
1070 background-position: center;
1071 }
1072 .jqx-grid-group-collapse-light {
1073 background-image: url(images/metro-icon-right.png);
1074 background-position: 50% 50%;
1075 background-repeat: no-repeat;
1076 }
1077 .jqx-grid-group-collapse-rtl-light
1078 {
1079 padding-right: 0px;
1080 background-image: url(images/metro-icon-left.png);
1081 background-position: 50% 50%;
1082 background-repeat: no-repeat;
1083 }
1084 .jqx-grid-group-expand-light, .jqx-grid-group-expand-rtl-light
1085 {
1086 padding-right: 0px;
1087 background-image: url(images/metro-icon-down.png);
1088 background-position: 50% 50%;
1089 background-repeat: no-repeat;
1090 }
1091 .jqx-icon-arrow-first-light
1092 {
1093 background-image: url('images/metro-icon-first.png');
1094 background-repeat: no-repeat;
1095 background-position: center;
1096 }
1097 .jqx-icon-arrow-last-light
1098 {
1099 background-image: url('images/metro-icon-last.png');
1100 background-repeat: no-repeat;
1101 background-position: center;
1102 }
1103 .jqx-icon-arrow-first-hover-light
1104 {
1105 background-image: url('images/metro-icon-first.png');
1106 background-repeat: no-repeat;
1107 background-position: center;
1108 }
1109 .jqx-icon-arrow-last-hover-light
1110 {
1111 background-image: url('images/metro-icon-last.png');
1112 background-repeat: no-repeat;
1113 background-position: center;
1114 }
1115 .jqx-icon-arrow-first-selected-light
1116 {
1117 background-image: url('images/metro-icon-first-white.png');
1118 background-repeat: no-repeat;
1119 background-position: center;
1120 }
1121 .jqx-icon-arrow-last-selected-light
1122 {
1123 background-image: url('images/metro-icon-last-white.png');
1124 background-repeat: no-repeat;
1125 background-position: center;
1126 }
1127
1128 .jqx-icon-calendar-pressed-light {
1129 background-image: url('images/icon-calendar-white.png');
1130 }
1131 .jqx-icon-time-pressed-light {
1132 background-image: url('images/icon-time-white.png');
1133 }
1134 .jqx-icon-time-light{
1135 margin-left:1px;
1136 }
1137
1138
1139 .sorticon, .filtericon {
1140 box-shadow:none;
1141 }
1142 .sorticon.descending .jqx-grid-column-sorticon-light {
1143 margin-top:-1px;
1144 }
1145 .sorticon.ascending .jqx-grid-column-sorticon-light {
1146 margin-top:1px;
1147 }
1148 1756
1149 .jqx-dropdownlist-state-normal-light .jqx-icon-arrow-down-light, 1757 .jqx-dropdownlist-state-normal-light .jqx-icon-arrow-down-light,
1150 .jqx-combobox-state-normal-light .jqx-icon-arrow-down-light, 1758 .jqx-combobox-state-normal-light .jqx-icon-arrow-down-light,
1151 .sorticon.descending .jqx-grid-column-sorticon-light, 1759 .sorticon.descending .jqx-grid-column-sorticon-light,
1152 .jqx-tree-item-arrow-expand-light, 1760 .jqx-tree-item-arrow-expand-light,
1153 .jqx-expander-header-light .jqx-icon-arrow-down 1761 .jqx-expander-header-light .jqx-icon-arrow-down
1154 { 1762 {
1155 transform: rotate(0deg); 1763 transform: rotate(0deg);
1764 display: flex;
1765 align-items: center;
1156 transition: transform 0.2s ease-out; 1766 transition: transform 0.2s ease-out;
1157 } 1767 }
1158 .jqx-expander-header-light .jqx-icon-arrow-up { 1768 .jqx-expander-header-light .jqx-icon-arrow-up {
1159 transform: rotate(180deg); 1769 transform: rotate(180deg);
1160 transition: transform 0.2s ease-out; 1770 transition: transform 0.2s ease-out;
1161 background-image: url('images/metro-icon-down.png'); 1771 font-family: jqx-icons;
1162 } 1772 background-image: none;
1163 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 }
1164 .jqx-tree-item-arrow-collapse-light 1790 .jqx-tree-item-arrow-collapse-light
1165 { 1791 {
1166 transform: rotate(-90deg); 1792 transform: rotate(0deg);
1167 background-image: url('images/metro-icon-down.png'); 1793 background-image: none;
1168 background-repeat: no-repeat; 1794 background-repeat: no-repeat;
1169 background-position: center; 1795 background-position: center;
1170 transition: transform 0.2s ease-out; 1796 transition: transform 0.2s ease-out;
1171 } 1797 }
1172 .jqx-dropdownlist-state-selected-light .jqx-icon-arrow-down-light, 1798 .jqx-dropdownlist-state-selected-light .jqx-icon-arrow-down-light,
1173 .jqx-combobox-state-selected-light .jqx-icon-arrow-down-light, 1799 .jqx-combobox-state-selected-light .jqx-icon-arrow-down-light,
1174 .sorticon.ascending .jqx-grid-column-sorticon-light 1800 .sorticon.ascending .jqx-grid-column-sorticon-light
1175 { 1801 {
1802 display: flex;
1803 align-items: center;
1176 transform: rotate(180deg); 1804 transform: rotate(180deg);
1177 transition: transform 0.2s ease-out; 1805 transition: transform 0.2s ease-out;
1806 left: -1px;
1178 } 1807 }
1179 .jqx-combobox-state-selected-light .jqx-icon-arrow-down-light{ 1808 .jqx-combobox-state-selected-light .jqx-icon-arrow-down-light{
1180 left:0px; 1809 left:-1px;
1181 } 1810 }
1182 1811 .jqx-listbox-container {
1183 .jqx-primary .jqx-icon-arrow-down-light, .jqx-warning .jqx-icon-arrow-down-light, .jqx-danger .jqx-icon-arrow-down-light, .jqx-success .jqx-icon-arrow-down-light, .jqx-info .jqx-icon-arrow-down-light { 1812 margin-top: 1px;
1184 background-image: url('images/metro-icon-down-white.png'); 1813 }
1185 } 1814
1186 .jqx-primary .jqx-icon-arrow-down-selected-light, .jqx-warning .jqx-icon-arrow-down-selected-light, .jqx-danger .jqx-icon-arrow-down-selected-light, .jqx-success .jqx-icon-arrow-down-selected-light, .jqx-info .jqx-icon-arrow-down-selected-light { 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 {
1187 background-image: url('images/metro-icon-down-white.png'); 1816 color: #999999;
1188 } 1817 }
1189 .jqx-primary .jqx-icon-arrow-down-hover-light, .jqx-warning .jqx-icon-arrow-down-hover-light, .jqx-danger .jqx-icon-arrow-down-hover-light, .jqx-success .jqx-icon-arrow-down-hover-light, .jqx-info .jqx-icon-arrow-down-hover-light { 1818
1190 background-image: url('images/metro-icon-down-white.png'); 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 {
1191 } 1820 color: #999999;
1192 .jqx-primary .jqx-icon-arrow-up-light, .jqx-warning .jqx-icon-arrow-up-light, .jqx-danger .jqx-icon-arrow-up-light, .jqx-success .jqx-icon-arrow-up-light, .jqx-info .jqx-icon-arrow-up-light { 1821 }
1193 background-image: url('images/metro-icon-up-white.png'); 1822
1194 } 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 {
1195 .jqx-primary .jqx-icon-arrow-up-selected-light, .jqx-warning .jqx-icon-arrow-up-selected-light, .jqx-danger .jqx-icon-arrow-up-selected-light, .jqx-success .jqx-icon-arrow-up-selected-light, .jqx-info .jqx-icon-arrow-up-selected-light { 1824 color: #999999;
1196 background-image: url('images/metro-icon-up-white.png'); 1825 }
1197 } 1826
1198 .jqx-primary .jqx-icon-arrow-up-hover-light, .jqx-warning .jqx-icon-arrow-up-hover-light, .jqx-danger .jqx-icon-arrow-up-hover-light, .jqx-success .jqx-icon-arrow-up-hover-light, .jqx-info .jqx-icon-arrow-up-hover-light { 1827 .jqx-combobox-content-focus-light, .jqx-combobox-state-focus-light, .jqx-fill-state-focus-light,
1199 background-image: url('images/metro-icon-up-white.png'); 1828 .jqx-numberinput-focus-light {
1200 } 1829 outline: none;
1201 1830 }
1202 1831
1203 .jqx-primary .jqx-icon-arrow-left-light, .jqx-warning .jqx-icon-arrow-left-light, .jqx-danger .jqx-icon-arrow-left-light, .jqx-success .jqx-icon-arrow-left-light, .jqx-info .jqx-icon-arrow-left-light { 1832 .jqx-popup-light.jqx-fill-state-focus-light {
1204 background-image: url('images/metro-icon-left-white.png'); 1833 outline: none;
1205 } 1834 border-color: var(--jqx-border) !important;
1206 .jqx-primary .jqx-icon-arrow-left-selected-light, .jqx-warning .jqx-icon-arrow-left-selected-light, .jqx-danger .jqx-icon-arrow-left-selected-light, .jqx-success .jqx-icon-arrow-left-selected-light, .jqx-info .jqx-icon-arrow-left-selected-light { 1835 }
1207 background-image: url('images/metro-icon-left-white.png'); 1836
1208 } 1837 .jqx-datetimeinput-content, .jqx-datetimeinput-container {
1209 .jqx-primary .jqx-icon-arrow-left-hover-light, .jqx-warning .jqx-icon-arrow-left-hover-light, .jqx-danger .jqx-icon-arrow-left-hover-light, .jqx-success .jqx-icon-arrow-left-hover-light, .jqx-info .jqx-icon-arrow-left-hover-light { 1838 overflow: visible !important;
1210 background-image: url('images/metro-icon-left-white.png'); 1839 }
1211 } 1840 .jqx-text-area-light, .jqx-text-area-light > div {
1212 .jqx-primary .jqx-icon-arrow-right-light, .jqx-warning .jqx-icon-arrow-right-light, .jqx-danger .jqx-icon-arrow-right-light, .jqx-success .jqx-icon-arrow-right-light, .jqx-info .jqx-icon-arrow-right-light { 1841 overflow:visible !important;
1213 background-image: url('images/metro-icon-right-white.png'); 1842 }
1214 } 1843 .jqx-text-area-element-light {
1215 .jqx-primary .jqx-icon-arrow-right-selected-light, .jqx-warning .jqx-icon-arrow-right-selected-light, .jqx-danger .jqx-icon-arrow-right-selected-light, .jqx-success .jqx-icon-arrow-right-selected-light, .jqx-info .jqx-icon-arrow-right-selected-light { 1844 box-sizing: border-box;
1216 background-image: url('images/metro-icon-right-white.png'); 1845 }
1217 } 1846 .jqx-pivotgrid-content-wrapper.jqx-fill-state-normal-light {
1218 .jqx-primary .jqx-icon-arrow-right-hover-light, .jqx-warning .jqx-icon-arrow-right-hover-light, .jqx-danger .jqx-icon-arrow-right-hover-light, .jqx-success .jqx-icon-arrow-right-hover-light, .jqx-info .jqx-icon-arrow-right-hover-light { 1847 border-color: var(--jqx-border);
1219 background-image: url('images/metro-icon-right-white.png'); 1848 }
1220 } 1849
1221 1850 .jqx-grid-cell-light.jqx-grid-cell-selected-light > .jqx-grid-group-expand-light {
1222 .jqx-slider-tooltip-light.jqx-primary-slider, .jqx-slider-tooltip-light.jqx-primary-slider .jqx-fill-state-normal-light { 1851 background-image: none;
1223 border-color: #1ca8dd; 1852 }
1224 background: #1ca8dd; 1853
1225 } 1854 .jqx-grid-cell-light.jqx-grid-cell-selected-light > .jqx-grid-group-collapse-light {
1226 .jqx-slider-tooltip-light.jqx-success-slider, .jqx-slider-tooltip-light.jqx-success-slider .jqx-fill-state-normal-light { 1855 background-image: none;
1227 border-color: #5cb85c; 1856 }
1228 background: #5cb85c; 1857
1229 } 1858 .jqx-grid-cell-light.jqx-grid-cell-selected-light > .jqx-grid-group-collapse-rtl-light {
1230 .jqx-slider-tooltip-light.jqx-inverse-slider, .jqx-slider-tooltip-light.jqx-inverse-slider .jqx-fill-state-normal-light { 1859 background-image: none;
1231 border-color: #666; 1860 }
1232 background: #666; 1861
1233 } 1862 .jqx-grid-cell-light.jqx-grid-cell-selected-light > .jqx-grid-group-expand-rtl-light {
1234 .jqx-slider-tooltip-light.jqx-danger-slider, .jqx-slider-tooltip-light.jqx-danger-slider .jqx-fill-state-normal-light { 1863 background-image: none;
1235 border-color: #d9534f; 1864 }
1236 background: #d9534f; 1865 .jqx-tabs-title-selected-top-light, .jqx-tabs-selection-tracker-top-light {
1237 } 1866 border-color: transparent;
1238 .jqx-slider-tooltip-light.jqx-warning-slider, .jqx-slider-tooltip-light.jqx-warning-slider .jqx-fill-state-normal-light { 1867 filter: none;
1239 border-color: #f0ad4e; 1868 background: inherit;
1240 background: #f0ad4e; 1869 color: inherit;
1241 } 1870 -webkit-box-shadow: none;
1242 .jqx-slider-tooltip-light.jqx-info-slider, .jqx-slider-tooltip-light.jqx-info-slider .jqx-fill-state-normal-light { 1871 -moz-box-shadow: none;
1243 border-color: #5bc0de; 1872 box-shadow: none;
1244 background: #5bc0de; 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 }
1245 } 2256 }
1246 2257
1247 .jqx-fill-state-pressed-light .jqx-icon-delete-light 2258 .jqx-fill-state-pressed-light .jqx-icon-delete-light
1248 { 2259 {
1249 background-image: url('images/icon-delete-white.png'); 2260 background-image: url('images/icon-delete-white.png');
1260 { 2271 {
1261 background-image: url('images/icon-cancel-white.png'); 2272 background-image: url('images/icon-cancel-white.png');
1262 } 2273 }
1263 .jqx-fill-state-pressed-light .jqx-icon-search-light 2274 .jqx-fill-state-pressed-light .jqx-icon-search-light
1264 { 2275 {
1265 background-image: url(images/search_white.png); 2276 background-image: url('images/search_white.png');
1266 } 2277 }
1267 .jqx-fill-state-pressed-light .jqx-icon-plus-light 2278 .jqx-fill-state-pressed-light .jqx-icon-plus-light
1268 { 2279 {
1269 background-image: url(images/plus_white.png); 2280 background-image: url('images/plus_white.png');
2281 }
2282 .jqx-menu-minimized-button-light {
2283 padding: 0px !important;
1270 } 2284 }
1271 .jqx-fill-state-pressed-light .jqx-menu-minimized-button-light { 2285 .jqx-fill-state-pressed-light .jqx-menu-minimized-button-light {
1272 background-image: url('images/icon-menu-minimized-white.png'); 2286 background-image: url('images/icon-menu-minimized-white.png');
1273 } 2287 }
1274 .jqx-fill-state-pressed-light .jqx-editor-toolbar-icon-light { 2288
1275 background: url('images/html_editor_white.png') no-repeat; 2289
1276 } 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
1277 .jqx-editor-toolbar-button-light{ 2302 .jqx-editor-toolbar-button-light{
1278 border-color: #ddd; 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);
1279 } 2310 }
1280 2311
1281 /*applied to the timepicker*/ 2312 /*applied to the timepicker*/
1282 .jqx-needle-central-circle-light { 2313 .jqx-needle-central-circle-light {
1283 fill: rgb(0, 119, 190); 2314 fill: var(--jqx-primary);
2315 }
2316 .jqx-time-picker-light .jqx-label-light {
2317 fill: var(--jqx-background-color);
1284 } 2318 }
1285 .jqx-needle-light { 2319 .jqx-needle-light {
1286 fill: rgb(0, 119, 190); 2320 fill: var(--jqx-primary);
1287 } 2321 }
1288 .jqx-time-picker .jqx-header .jqx-selected-light:focus { 2322 .jqx-time-picker .jqx-header .jqx-selected-light:focus {
1289 outline: 2px solid rgba(0, 119, 190, 0.5); 2323 outline: 2px solid var(--jqx-primary);
1290 box-shadow: 0px 0px 4px 2px rgba(0, 119, 190, 0.125); 2324 box-shadow: 0px 0px 4px 2px rgba(0, 119, 190, 0.125);
1291 } 2325 }
1292 .jqx-svg-picker-light:focus { 2326 .jqx-svg-picker-light:focus {
1293 border: 1px solid rgb(0, 119, 190) !important; 2327 border: 1px solid var(--jqx-primary) !important;
1294 } 2328 }
1295 .jqx-time-picker[view="portrait"] .jqx-header-light { 2329 .jqx-validator-hint-light {
1296 border-top-left-radius: inherit; 2330 background: #D94F43;
1297 border-top-right-radius: inherit; 2331 border-color: #D94F43;
1298 } 2332 padding: 10px;
1299 .jqx-time-picker[view="landscape"] .jqx-header-light { 2333 }
1300 border-top-left-radius: inherit; 2334 .jqx-validator-hint-light img {
1301 border-bottom-left-radius: inherit; 2335 display: none;
1302 } 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