Project

General

Profile

1
/* These file is a start point for who wants to create a fully custom
2
 * theme for jTable. jtable_theme_base.less (or css) file is needed
3
 * for functionality of jTable. This file does not add any color or shape
4
 * modifications. It just shows how to set icons. You can change them too.
5
 * Halil ibrahim Kalkan / http://www.jtable.org
6
 */
7
div.jtable-main-container {
8
  position: relative;
9
}
10
div.jtable-main-container div.jtable-title {
11
  position: relative;
12
  text-align: left;
13
}
14
div.jtable-main-container div.jtable-title .jtable-close-button {
15
  right: 0px;
16
  top: 0px;
17
  bottom: 0px;
18
  position: absolute;
19
}
20
div.jtable-main-container div.jtable-title div.jtable-toolbar {
21
  bottom: 0px;
22
  right: 0px;
23
  position: absolute;
24
  display: inline-block;
25
  margin-right: 5px;
26
}
27
div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item {
28
  position: relative;
29
  display: inline-block;
30
  margin: 0px 0px 0px 5px;
31
  cursor: pointer;
32
  font-size: 0.9em;
33
  padding: 2px;
34
  vertical-align: bottom;
35
}
36
div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item span.jtable-toolbar-item-icon {
37
  display: inline-block;
38
  margin: 2px;
39
  vertical-align: middle;
40
  width: 16px;
41
  height: 16px;
42
}
43
div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item span.jtable-toolbar-item-text {
44
  display: inline-block;
45
  margin: 2px;
46
  vertical-align: middle;
47
}
48
div.jtable-main-container div.jtable-title .jtable-close-button + div.jtable-toolbar {
49
  margin-right: 30px;
50
}
51
div.jtable-main-container table.jtable {
52
  width: 100%;
53
}
54
div.jtable-main-container table.jtable thead th {
55
  vertical-align: middle;
56
  text-align: left;
57
}
58
div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container {
59
  position: relative;
60
}
61
div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container span.jtable-column-header-text {
62
  display: inline-block;
63
}
64
div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container div.jtable-column-resize-handler {
65
  position: absolute;
66
  height: 24px;
67
  width: 8px;
68
  right: -8px;
69
  top: -2px;
70
  z-index: 2;
71
  cursor: col-resize;
72
}
73
div.jtable-main-container table.jtable thead th.jtable-command-column-header {
74
  text-align: center;
75
}
76
div.jtable-main-container table.jtable thead th.jtable-column-header-selecting {
77
  text-align: center;
78
  width: 1%;
79
}
80
div.jtable-main-container table.jtable thead th.jtable-column-header-selecting input {
81
  cursor: pointer;
82
}
83
div.jtable-main-container table.jtable thead th.jtable-column-header-sortable {
84
  cursor: pointer;
85
}
86
div.jtable-main-container table.jtable tbody tr > td .jtable-command-button {
87
  margin: 0px;
88
  padding: 0px;
89
  cursor: pointer;
90
  border: none;
91
  display: inline;
92
}
93
div.jtable-main-container table.jtable tbody tr > td .jtable-command-button span {
94
  display: none;
95
}
96
div.jtable-main-container table.jtable tbody tr > td.jtable-command-column {
97
  text-align: center;
98
  vertical-align: middle;
99
}
100
div.jtable-main-container table.jtable tbody tr > td.jtable-selecting-column {
101
  text-align: center;
102
  vertical-align: middle;
103
}
104
div.jtable-main-container table.jtable tbody tr > td.jtable-selecting-column input {
105
  cursor: pointer;
106
}
107
div.jtable-main-container table.jtable tbody tr.jtable-no-data-row {
108
  text-align: center;
109
}
110
div.jtable-main-container > div.jtable-bottom-panel {
111
  position: relative;
112
  min-height: 24px;
113
  text-align: left;
114
}
115
div.jtable-main-container > div.jtable-bottom-panel div.jtable-right-area {
116
  right: 0px;
117
  top: 0px;
118
  bottom: 0px;
119
  position: absolute;
120
}
121
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list {
122
  display: inline-block;
123
}
124
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number,
125
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space,
126
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,
127
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,
128
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,
129
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next,
130
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active {
131
  padding: 2px 5px;
132
  display: inline-block;
133
  cursor: pointer;
134
}
135
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space,
136
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active,
137
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-disabled {
138
  cursor: default;
139
}
140
div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-size-change {
141
  margin-left: 5px;
142
}
143
div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page {
144
  margin-left: 5px;
145
}
146
div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page input[type=text] {
147
  width: 22px;
148
}
149
div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-info {
150
  vertical-align: middle;
151
}
152
div.jtable-main-container div.jtable-column-resize-bar {
153
  opacity: 0.5;
154
  filter: alpha(opacity=50);
155
  position: absolute;
156
  display: none;
157
  width: 1px;
158
  background-color: #000;
159
}
160
div.jtable-main-container div.jtable-column-selection-container {
161
  position: absolute;
162
  display: none;
163
  border: 1px solid #C8C8C8;
164
  background: #fff;
165
  color: #000;
166
  z-index: 101;
167
  padding: 5px;
168
}
169
div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list {
170
  margin: 0px;
171
  padding: 0px;
172
  list-style: none;
173
}
174
div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li {
175
  margin: 0px;
176
  padding: 2px 0px;
177
}
178
div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li label span {
179
  position: relative;
180
  top: -1px;
181
  margin-left: 4px;
182
}
183
div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"] {
184
  cursor: pointer;
185
}
186
form.jtable-dialog-form div.jtable-input-field-container {
187
  padding: 2px 0px 3px 0px;
188
  border-bottom: 1px solid #ddd;
189
}
190
form.jtable-dialog-form div.jtable-input-field-container:last-child {
191
  border: none;
192
}
193
form.jtable-dialog-form div.jtable-input-label {
194
  padding: 2px 3px;
195
  font-size: 1.1em;
196
  color: #666;
197
}
198
form.jtable-dialog-form div.jtable-input {
199
  padding: 2px;
200
}
201
form.jtable-dialog-form div.jtable-date-input {
202
  /* No additional style */
203

    
204
}
205
form.jtable-dialog-form div.jtable-text-input {
206
  /* No additional style */
207

    
208
}
209
form.jtable-dialog-form span.jtable-option-text-clickable {
210
  position: relative;
211
  top: -2px;
212
}
213
form.jtable-dialog-form div.jtable-textarea-input textarea {
214
  width: 300px;
215
  min-height: 60px;
216
}
217
form.jtable-dialog-form div.jtable-checkbox-input span,
218
form.jtable-dialog-form div.jtable-radio-input span {
219
  padding-left: 4px;
220
}
221
form.jtable-dialog-form div.jtable-radio-input input,
222
form.jtable-dialog-form div.jtable-checkbox-input input,
223
form.jtable-dialog-form span.jtable-option-text-clickable {
224
  cursor: pointer;
225
}
226
div.jtable-busy-panel-background {
227
  opacity: 0.1;
228
  filter: alpha(opacity=10);
229
  z-index: 998;
230
  position: absolute;
231
  background-color: #000;
232
}
233
div.jtable-busy-panel-background.jtable-busy-panel-background-invisible {
234
  background-color: transparent;
235
}
236
div.jtable-busy-message {
237
  cursor: wait;
238
  z-index: 999;
239
  position: absolute;
240
  margin: 5px;
241
}
242
div.jtable-contextmenu-overlay {
243
  position: fixed;
244
  left: 0px;
245
  top: 0px;
246
  width: 100%;
247
  height: 100%;
248
  z-index: 100;
249
}
250
div.jtable-main-container {
251
  overflow: auto;
252
}
253
div.jtable-main-container div.jtable-title div.jtable-title-text {
254
  font-size: 14px;
255
  color: #999;
256
  margin-bottom: 8px;
257
}
258
div.jtable-main-container div.jtable-title .jtable-close-button {
259
  background: url('close.png') no-repeat;
260
  width: 18px;
261
  height: 18px;
262
}
263
div.jtable-main-container table.jtable {
264
  border-collapse: collapse;
265
  border-spacing: 0;
266
  width: 100%;
267
}
268
div.jtable-main-container table.jtable thead th {
269
  border-bottom: 2px solid #d0d0d0;
270
}
271
div.jtable-main-container table.jtable thead th.jtable-column-header-sortable div.jtable-column-header-container {
272
  background: url('column-sortable.png') no-repeat right;
273
}
274
div.jtable-main-container table.jtable thead th.jtable-column-header-sorted-asc div.jtable-column-header-container {
275
  background: url('column-asc.png') no-repeat right;
276
}
277
div.jtable-main-container table.jtable thead th.jtable-column-header-sorted-desc div.jtable-column-header-container {
278
  background: url('column-desc.png') no-repeat right;
279
}
280
div.jtable-main-container table.jtable thead th.jtable-column-header-sortable div.jtable-column-header-container,
281
div.jtable-main-container table.jtable thead th.jtable-column-header-sorted-asc div.jtable-column-header-container,
282
div.jtable-main-container table.jtable thead th.jtable-column-header-sorted-desc div.jtable-column-header-container {
283
  padding-right: 22px;
284
}
285
div.jtable-main-container table.jtable thead th,
286
div.jtable-main-container table.jtable tfoot td,
287
div.jtable-main-container table.jtable tfoot th {
288
  font-style: normal;
289
  font-weight: 400;
290
  color: #727272;
291
  font-size: 14px;
292
  padding: 8px;
293
  white-space: nowrap;
294
}
295
div.jtable-main-container table.jtable thead th.jtable-column-header,
296
div.jtable-main-container table.jtable tfoot td.jtable-column-header,
297
div.jtable-main-container table.jtable tfoot th.jtable-column-header {
298
  border-right: 1px solid #e0e0e0;
299
}
300
div.jtable-main-container table.jtable tfoot td,
301
div.jtable-main-container table.jtable tfoot th {
302
  border-top: 2px solid #d0d0d0;
303
  border-bottom: none;
304
}
305
div.jtable-main-container table.jtable tbody > tr.jtable-row-even {
306
  background-color: #ededed;
307
}
308
div.jtable-main-container table.jtable tbody > tr:hover {
309
  background: #e0e0e0;
310
}
311
div.jtable-main-container table.jtable tbody > tr.jtable-row-selected {
312
  background-color: #f1f8e9;
313
}
314
div.jtable-main-container table.jtable tbody > tr.jtable-row-created,
315
div.jtable-main-container table.jtable tbody > tr.jtable-row-updated {
316
  background-color: #aed581;
317
}
318
div.jtable-main-container table.jtable tbody > tr.jtable-row-deleting {
319
  background-color: #f44336;
320
  color: #fff;
321
}
322
div.jtable-main-container table.jtable tbody td {
323
  border-bottom-color: #e0e0e0;
324
  border-left: 1px solid #e0e0e0;
325
  vertical-align: middle;
326
  padding: 8px;
327
  white-space: nowrap;
328
}
329
div.jtable-main-container table.jtable tbody td:first-child {
330
  border-left: none;
331
}
332
div.jtable-main-container table.jtable tbody td .jtable-command-button {
333
  background-position: 50% 50%;
334
  background-repeat: no-repeat;
335
  background-color: transparent;
336
  width: 24px;
337
  height: 24px;
338
  opacity: 0.6;
339
  transition: opacity 280ms ease-in;
340
  display: block !important;
341
}
342
div.jtable-main-container table.jtable tbody td .jtable-command-button:hover {
343
  opacity: 1;
344
}
345
div.jtable-main-container table.jtable tbody td .jtable-edit-command-button {
346
  background-image: url('edit.png');
347
}
348
div.jtable-main-container table.jtable tbody td .jtable-delete-command-button {
349
  background-image: url('delete.png');
350
}
351
div.jtable-main-container table.jtable .jtable-no-data-row td {
352
  padding: 48px 0;
353
  font-size: 18px;
354
}
355
div.jtable-main-container > div.jtable-bottom-panel {
356
  border-top: 1px solid #e0e0e0;
357
  padding: 16px 0 0;
358
  min-height: 28px;
359
}
360
div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page,
361
div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-size-change {
362
  margin-left: 16px;
363
}
364
div.jtable-main-container > div.jtable-bottom-panel div.jtable-left-area {
365
  float: left;
366
}
367
div.jtable-main-container > div.jtable-bottom-panel div.jtable-right-area {
368
  position: static;
369
  float: right;
370
  font-size: 12px;
371
  line-height: 28px;
372
}
373
@media only screen and (max-width: 767px) {
374
  div.jtable-main-container > div.jtable-bottom-panel div.jtable-left-area,
375
  div.jtable-main-container > div.jtable-bottom-panel div.jtable-right-area {
376
    float: none;
377
    text-align: center;
378
  }
379
  div.jtable-main-container > div.jtable-bottom-panel div.jtable-left-area > span,
380
  div.jtable-main-container > div.jtable-bottom-panel div.jtable-right-area > span {
381
    display: block;
382
    margin: 16px 0 0;
383
  }
384
}
385
div.jtable-main-container .jtable-busy-message {
386
  padding: 12px 12px 12px 56px;
387
  font-size: 20px;
388
  background: #ffffff url('spinner.gif') no-repeat 10px 50%;
389
  color: #212121;
390
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
391
  left: 50%;
392
  transform: translateX(-50%);
393
}
394
div.jtable-busy-message {
395
  color: #000;
396
  background-color: #ddd;
397
  font-size: 1.25em;
398
}
399
form.jtable-dialog-form div.jtable-input-field-container {
400
  padding: 4px 0;
401
  border: none;
402
  min-width: 320px;
403
}
404
form.jtable-dialog-form div.jtable-input-field-container + div.jtable-input-field-container {
405
  margin-top: 16px;
406
}
407
form.jtable-dialog-form div.jtable-input-label {
408
  font-size: 13px;
409
  color: #727272;
410
  padding: 0 0 4px;
411
}
412
form.jtable-dialog-form div.jtable-input {
413
  padding: 0;
414
}
415
form.jtable-dialog-form .jtable-radio-input > span {
416
  vertical-align: -3px;
417
  margin-left: 8px;
418
}
419
form.jtable-dialog-form .jtable-radio-input + .jtable-radio-input {
420
  margin-top: 8px;
421
}
422
form.jtable-dialog-form .jtable-checkbox-input > span {
423
  vertical-align: -3px;
424
  margin-left: 8px;
425
}
426
form.jtable-dialog-form .jtable-checkbox-input + .jtable-checkbox-input {
427
  margin-top: 8px;
428
}
429
.jtable-page-list > span {
430
  border: none;
431
  padding: 4px 4px;
432
  min-width: 28px;
433
  height: 28px;
434
  line-height: 24px;
435
  box-sizing: border-box;
436
  text-shadow: none;
437
  color: #1e88e5;
438
  border-radius: 4px;
439
  display: inline-block;
440
  text-align: center;
441
}
442
.jtable-page-list .jtable-page-number-disabled {
443
  color: #999;
444
}
445
.jtable-page-list .jtable-page-number-active {
446
  color: #fff;
447
  background-color: #7cb342;
448
}
449
/* jqueryui customize */
450
.ui-widget-overlay {
451
  background: rgba(0, 0, 0, 0.5);
452
  z-index: 1207;
453
}
454
.ui-dialog {
455
  border-radius: 2px;
456
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
457
  padding: 24px 24px 16px;
458
  z-index: 1208;
459
}
460
.ui-dialog .ui-dialog-titlebar {
461
  margin: -24px -24px 0;
462
  padding: 24px 32px 16px 24px;
463
  border: none;
464
}
465
.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
466
  display: block;
467
  margin: 0;
468
  font: 500 18px / 28px "Roboto", sans-serif;
469
}
470
.ui-dialog .ui-dialog-content {
471
  padding: 16px 32px 0 0;
472
  max-height: 400px !important;
473
}
474
.ui-dialog .ui-dialog-content .ui-icon {
475
  display: none;
476
}
477
.ui-dialog .ui-dialog-content > p {
478
  font-size: 15px;
479
}
480
.ui-dialog .ui-dialog-buttonpane {
481
  border: none;
482
  padding: 16px 0 0;
483
}
484
.ui-dialog .ui-dialog-buttonpane button {
485
  margin: 0 !important;
486
}
487
.ui-dialog .ui-dialog-titlebar-close {
488
  background: none;
489
  border: none;
490
  top: 16px;
491
  right: 6px;
492
  text-indent: 9999px;
493
}
(13-13/18)