.tabulator { position: relative; border: none; /* Table line */ border-top: 1px solid var(--color_border_table_top); /* Table line */ border-bottom: 1px solid var(--color_border_table_bottom); /* Table line */ background-color: var(--color_bg_table_main); /*기본 배경색*/ font-size: 1.05em; } .tabulator .tabulator-header { font-size: 1em; font-weight: normal; background-color: var(--color_bg_table_title); } /* Title 조정 */ .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 2px; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { padding-right: 10px; padding-left: 10px; } /* Row/Cell 조정 */ .tabulator-row .tabulator-cell { display: inline-flex; padding: 0px 4px; min-height: 25px; border-right: 1px solid var(--color_border_table_rline); } .tabulator-row { min-height: inherit; border-bottom: 1px solid var(--color_border_table_bline); } /* Title Hover 처리 */ .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { cursor: pointer; background-color: initial; } /* Row even 배경색 */ .tabulator-row.tabulator-row-even { background-color: initial; } /* Row Selected 배경색 */ .tabulator-row.tabulator-selected { background-color: var(--color_bg_table_selected); border-bottom: 1px solid var(--color_border_table_selbline); } .tabulator-row.tabulator-selected:hover{ background-color: var(--color_bg_table_hselected_sub); } .tabulator-row.tabulator-selected { background-color: var(--color_bg_table_selected_sub); } /* Row Hover 배경색 */ .tabulator-row.tabulator-selectable:not(.tabulator-selected):not(.tabulator-checked):hover { background-color: var(--color_bg_table_hover); cursor: pointer; } /* Row Checked 배경색 */ .tabulator-row.tabulator-checked { background-color: var(--color_bg_table_checked); } .tabulator-row.tabulator-checked:hover { background-color: var(--color_bg_table_hchecked); } /* 고정셀 배경색 */ .tabulator-row .tabulator-cell.tabulator-frozen { background-color: #fff; } .tabulator .tabulator-header .tabulator-col { border-right: 1px solid var(--color_border_table_hright); /* Title line */ background-color: var(--color_bg_table_title); /* Title 뒷 배경색 */ display: inline-flex; justify-content: center; } .tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols { border-top: 1px solid var(--color_border_table_hright); /* Title line */ } .tabulator .tabulator-header { border-bottom: 1px solid var(--color_border_table_hbottom); /* Title line */ } .tabulator .tabulator-cell label { margin: 0; line-height: 0; } /* editor 함수 css */ .tabulator .tb_checkbox { width: 18px; height: 18px; border-radius: 3px; border: solid 2px var(--color_border_table_rline); appearance: none; } .tabulator .tb_checkbox:checked[type=checkbox] { border-color: var(--color_check_table_label); background-color: var(--color_check_table_label); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='5' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .tabulator .tb_toggle { display: inline-grid; align-items: center; height: 25px; font-size: 25px; } .tabulator .tb_toggle.bi-toggle-on { color: var(--color_check_table_label); } .tabulator .tb_toggle.bi-toggle-on.red { color: var(--btn_bg_numR); } .tabulator .tb_toggle.bi-toggle-on.green { color: var(--btn_bg_numG); } .tabulator .tb_toggle.bi-toggle-off { color: var(--color_border_table_rline); } .tabulator .tb_icon { font-size: 18px; color: var(--color_check_table_label); } /* 정렬 아이콘 */ .tabulator-col[aria-sort="none"] .tabulator-col-sorter i.bi::before{ content: ''; } .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter i.bi::before{ content: "\f57a"; color: var(--color_sort_table_asc); } .tabulator-col[aria-sort="descending"] .tabulator-col-sorter i.bi::before{ content: "\f575"; color: var(--color_sort_table_desc); } .tabulator .view-next { position: absolute; top: 0.5em; right: 10px; color: var(--color_text_table_next); } /* 기타 */ .tabulator .tabulator-cell.tabulator-editable::after, .tabulator .tabulator-cell.user-editable::after { /*content: "\f309";*/ content: "◥"; font-family: bootstrap-icons !important; color: var(--color_check_table_label); position: absolute; top: -1px; right: -1px; line-height: 7px; font-size: 7px; } .tabulator .tabulator-cell.tabulator-editable, .tabulator .tabulator-cell.user-editable { background-color: var(--color_bg_editable_column); } .tabulator .tabulator-cell.user-list::before { content: "\f107"; font-family: "Font Awesome 6 Free" !important; font-weight: 900; color: var(--color_text_dsub); position: absolute; top: 3px; right: 3px; } .tabulator .tabulator-row.user-checked { background-color: var(--color_bg_table_checked_u); } .tabulator .tabulator-row.user-checked:hover { background-color: var(--color_bg_table_checked_usub) !important; } .tabulator .warn-cell { color: red; background: var(--color_bg_del); } .tabulator .del-row * { color: var(--color_text_del); background: var(--color_bg_del); } .tabulator-row.tabulator-group { background: #c5e4ff; padding: 1px 0px 4px 10px; } .tabulator-row.tabulator-group:hover { background: #99c9f4; } .tabulator-footer { text-align: center; } .tabulator .tabulator-footer .tabulator-footer-contents { flex-direction: column; } .tabulator .tabulator-header .tabulator-col.p-0.tabulator-sortable .tabulator-col-title { padding: 0; } .tabulator .tabulator-header .tabulator-col.p-1.tabulator-sortable .tabulator-col-title { padding: 0; } .tabulator .tabulator-header .tabulator-col.p-2.tabulator-sortable .tabulator-col-title { padding: 0; } .tabulator .tabulator-header .tabulator-col.p-3.tabulator-sortable .tabulator-col-title { padding: 0; } .tabulator .tabulator-header .tabulator-col.p-4.tabulator-sortable .tabulator-col-title { padding: 0; } .tabulator .tabulator-header .tabulator-col.p-5.tabulator-sortable .tabulator-col-title { padding: 0; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { padding-right: 2px; padding-left: 2px; } .tabulator .tabulator-footer { background-color: #fff; } /* .tabulator-cell:has(>.dtime_picker) { position: relative; } .tabulator-cell:has(>.dtime_picker):before { content: ""; position: absolute; top: -1000px; right: -1000px; } */