www/jqwidgets/styles/jqx.dark.css

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

mercurial