/* 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; }