| /* These file is a start point for who wants to create a fully custom |
| * theme for jTable. jtable_theme_base.less (or css) file is needed |
| * for functionality of jTable. This file does not add any color or shape |
| * modifications. It just shows how to set icons. You can change them too. |
| * Halil ibrahim Kalkan / http://www.jtable.org |
| */ |
| div.jtable-main-container { |
| position: relative; |
| } |
| div.jtable-main-container div.jtable-title { |
| position: relative; |
| text-align: left; |
| } |
| div.jtable-main-container div.jtable-title .jtable-close-button { |
| right: 0px; |
| top: 0px; |
| bottom: 0px; |
| position: absolute; |
| } |
| div.jtable-main-container div.jtable-title div.jtable-toolbar { |
| bottom: 0px; |
| right: 0px; |
| position: absolute; |
| display: inline-block; |
| margin-right: 5px; |
| } |
| div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item { |
| position: relative; |
| display: inline-block; |
| margin: 0px 0px 0px 5px; |
| cursor: pointer; |
| font-size: 0.9em; |
| padding: 2px; |
| vertical-align: bottom; |
| } |
| div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item span.jtable-toolbar-item-icon { |
| display: inline-block; |
| margin: 2px; |
| vertical-align: middle; |
| width: 16px; |
| height: 16px; |
| } |
| div.jtable-main-container div.jtable-title div.jtable-toolbar span.jtable-toolbar-item span.jtable-toolbar-item-text { |
| display: inline-block; |
| margin: 2px; |
| vertical-align: middle; |
| } |
| div.jtable-main-container div.jtable-title .jtable-close-button + div.jtable-toolbar { |
| margin-right: 30px; |
| } |
| div.jtable-main-container table.jtable { |
| width: 100%; |
| } |
| div.jtable-main-container table.jtable thead th { |
| vertical-align: middle; |
| text-align: left; |
| } |
| div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container { |
| position: relative; |
| } |
| div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container span.jtable-column-header-text { |
| display: inline-block; |
| } |
| div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container div.jtable-column-resize-handler { |
| position: absolute; |
| height: 24px; |
| width: 8px; |
| right: -8px; |
| top: -2px; |
| z-index: 2; |
| cursor: col-resize; |
| } |
| div.jtable-main-container table.jtable thead th.jtable-command-column-header { |
| text-align: center; |
| } |
| div.jtable-main-container table.jtable thead th.jtable-column-header-selecting { |
| text-align: center; |
| width: 1%; |
| } |
| div.jtable-main-container table.jtable thead th.jtable-column-header-selecting input { |
| cursor: pointer; |
| } |
| div.jtable-main-container table.jtable thead th.jtable-column-header-sortable { |
| cursor: pointer; |
| } |
| div.jtable-main-container table.jtable tbody tr > td .jtable-command-button { |
| margin: 0px; |
| padding: 0px; |
| cursor: pointer; |
| border: none; |
| display: inline; |
| } |
| div.jtable-main-container table.jtable tbody tr > td .jtable-command-button span { |
| display: none; |
| } |
| div.jtable-main-container table.jtable tbody tr > td.jtable-command-column { |
| text-align: center; |
| vertical-align: middle; |
| } |
| div.jtable-main-container table.jtable tbody tr > td.jtable-selecting-column { |
| text-align: center; |
| vertical-align: middle; |
| } |
| div.jtable-main-container table.jtable tbody tr > td.jtable-selecting-column input { |
| cursor: pointer; |
| } |
| div.jtable-main-container table.jtable tbody tr.jtable-no-data-row { |
| text-align: center; |
| } |
| div.jtable-main-container > div.jtable-bottom-panel { |
| position: relative; |
| min-height: 24px; |
| text-align: left; |
| } |
| div.jtable-main-container > div.jtable-bottom-panel div.jtable-right-area { |
| right: 0px; |
| top: 0px; |
| bottom: 0px; |
| position: absolute; |
| } |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list { |
| display: inline-block; |
| } |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number, |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space, |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first, |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last, |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous, |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next, |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active { |
| padding: 2px 5px; |
| display: inline-block; |
| cursor: pointer; |
| } |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space, |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active, |
| div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-disabled { |
| cursor: default; |
| } |
| div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-size-change { |
| margin-left: 5px; |
| } |
| div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page { |
| margin-left: 5px; |
| } |
| div.jtable-main-container > div.jtable-bottom-panel span.jtable-goto-page input[type=text] { |
| width: 22px; |
| } |
| div.jtable-main-container > div.jtable-bottom-panel span.jtable-page-info { |
| vertical-align: middle; |
| } |
| div.jtable-main-container div.jtable-column-resize-bar { |
| opacity: 0.5; |
| filter: alpha(opacity=50); |
| position: absolute; |
| display: none; |
| width: 1px; |
| background-color: #000; |
| } |
| div.jtable-main-container div.jtable-column-selection-container { |
| position: absolute; |
| display: none; |
| border: 1px solid #C8C8C8; |
| background: #fff; |
| color: #000; |
| z-index: 101; |
| padding: 5px; |
| } |
| div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list { |
| margin: 0px; |
| padding: 0px; |
| list-style: none; |
| } |
| div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li { |
| margin: 0px; |
| padding: 2px 0px; |
| } |
| div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li label span { |
| position: relative; |
| top: -1px; |
| margin-left: 4px; |
| } |
| div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"] { |
| cursor: pointer; |
| } |
| form.jtable-dialog-form div.jtable-input-field-container { |
| padding: 2px 0px 3px 0px; |
| border-bottom: 1px solid #ddd; |
| } |
| form.jtable-dialog-form div.jtable-input-field-container:last-child { |
| border: none; |
| } |
| form.jtable-dialog-form div.jtable-input-label { |
| padding: 2px 3px; |
| font-size: 1.1em; |
| color: #666; |
| } |
| form.jtable-dialog-form div.jtable-input { |
| padding: 2px; |
| } |
| form.jtable-dialog-form div.jtable-date-input { |
| /* No additional style */ |
| |
| } |
| form.jtable-dialog-form div.jtable-text-input { |
| /* No additional style */ |
| |
| } |
| form.jtable-dialog-form span.jtable-option-text-clickable { |
| position: relative; |
| top: -2px; |
| } |
| form.jtable-dialog-form div.jtable-textarea-input textarea { |
| width: 300px; |
| min-height: 60px; |
| } |
| form.jtable-dialog-form div.jtable-checkbox-input span, |
| form.jtable-dialog-form div.jtable-radio-input span { |
| padding-left: 4px; |
| } |
| form.jtable-dialog-form div.jtable-radio-input input, |
| form.jtable-dialog-form div.jtable-checkbox-input input, |
| form.jtable-dialog-form span.jtable-option-text-clickable { |
| cursor: pointer; |
| } |
| div.jtable-busy-panel-background { |
| opacity: 0.1; |
| filter: alpha(opacity=50); |
| z-index: 998; |
| position: absolute; |
| background-color: #000; |
| } |
| div.jtable-busy-panel-background.jtable-busy-panel-background-invisible { |
| background-color: transparent; |
| } |
| div.jtable-busy-message { |
| cursor: wait; |
| z-index: 999; |
| position: absolute; |
| margin: 5px; |
| } |
| div.jtable-contextmenu-overlay { |
| position: fixed; |
| left: 0px; |
| top: 0px; |
| width: 100%; |
| height: 100%; |
| z-index: 100; |
| } |
| div.jtable-main-container div.jtable-title div.jtable-title-text { |
| font-size: 16px; |
| font-weight: bold; |
| } |
| div.jtable-main-container div.jtable-title .jtable-close-button { |
| background: url('close.png') no-repeat; |
| width: 16px; |
| height: 16px; |
| } |
| div.jtable-main-container table.jtable thead th.jtable-column-header-sortable div.jtable-column-header-container { |
| background: url('column-sortable.png') no-repeat right; |
| } |
| div.jtable-main-container table.jtable thead th.jtable-column-header-sorted-asc div.jtable-column-header-container { |
| background: url('column-asc.png') no-repeat right; |
| } |
| div.jtable-main-container table.jtable thead th.jtable-column-header-sorted-desc div.jtable-column-header-container { |
| background: url('column-desc.png') no-repeat right; |
| } |
| div.jtable-main-container table.jtable tbody > tr > td .jtable-edit-command-button { |
| background: url('edit.png') no-repeat; |
| width: 16px; |
| height: 16px; |
| } |
| div.jtable-main-container table.jtable tbody > tr > td .jtable-delete-command-button { |
| background: url('delete.png') no-repeat; |
| width: 16px; |
| height: 16px; |
| } |
| div.jtable-busy-message { |
| color: #000; |
| background-color: #ddd; |
| font-size: 1.25em; |
| } |