datatables.net-columncontrol-se/css/columnControl.semanticui.css

ColumnControl for DataTables with styling for [SemanticUI](https://semantic-ui.com/)

:root {
  --dtcc-button_background: transparent;
  --dtcc-button_border: none;
  --dtcc-button_border-radius: 3px;
  --dtcc-button_opacity: 0.4;
  --dtcc-button_padding: 3px;
  --dtcc-button_disabled-opacity: 0.6;
  --dtcc-button_empty-opacity: 0.8;
  --dtcc-button_hover-border: none;
  --dtcc-button_hover-background: rgba(0,0,0,.03);
  --dtcc-button_hover-opacity: 0.9;
  --dtcc-button-icon_color: var(--bs-body-color);
  --dtcc-button-icon_size: 16px;
  --dtcc-button-icon_margin: 0.75em;
  --dtcc-spacer_border: 1px solid rgba(34,36,38,.15);
  --dtcc-spacer_margin: 0.5em;
  --dtcc-title_background: rgba(0,0,0,.03);
  --dtcc-title_border-left: none;
  --dtcc-title_border-right: none;
  --dtcc-title_border-top: none;
  --dtcc-title_border-bottom: ;
  --dtcc-title_margin: 0;
  --dtcc-title_padding: 0.5em 0;
  --dtcc-title_text-align: center;
  --dtcc-search-icon_color: rgba(0, 0, 0, 0.8);
  --dtcc-search-icon_hover-background: rgba(0,0,0,.03);
  --dtcc-search-icon_opacity: 0.4;
  --dtcc-search-icon_size: 16px;
  --dtcc-search-input_border: 1px solid rgba(34,36,38,.15);
  --dtcc-search-input_background-color: #fff;
  --dtcc-search-input_background: #fff;
  --dtcc-search-input_border-radius: .28571429rem;
  --dtcc-search-input_padding: .67857143em 1em;
  --dtcc-search-input_flexCalc: 28px;
  --dtcc-search-clear_right: 15px;
  --dtcc-search-clear_bottom: 5px;
  --dtcc-search-input_margin-top: 0.5em;
  --dtcc-search-input_padding-right: 32px;
  --dtcc-list-buttons_max-height: 300px;
  --dtcc-list-buttons_background: rgba(0,0,0,.03);
  --dtcc-dropdown_background: #fff;
  --dtcc-dropdown_border: 1px solid rgba(34,36,38,.15);
  --dtcc-dropdown_border-radius: .28571429rem;
  --dtcc-dropdown_box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
  --dtcc-dropdown_margin: 3px 0 0 0;
  --dtcc-dropdown_padding: 0;
  --dtcc-dropdown_width: 250px;
  --dtcc-dropdown_z-index: 11;
  --dtcc-dropdown-button_background: transparent;
  --dtcc-dropdown-button_border: none;
  --dtcc-dropdown-button_color: rgba(0,0,0,.87);
  --dtcc-dropdown-button_padding: .78571429rem 1.14285714rem;
  --dtcc-dropdown-button_hover-background: #f2f2f2;
  --dtcc-dropdown-icon_vertical-align: top;
  --dtcc-dropdown-search_padding: 0.5em 1em;
}

table.dataTable div.dt-column-header span.dt-column-title:empty + span.dtcc {
  flex-grow: 1;
  margin-left: auto;
}
table.dataTable .dt-type-numeric div.dt-column-header span.dt-column-title:empty + span.dtcc,
table.dataTable .dt-type-date div.dt-column-header span.dt-column-title:empty + span.dtcc,
table.dataTable .dt-right div.dt-column-header span.dt-column-title:empty + span.dtcc {
  margin-right: auto;
  margin-left: 0;
}
table.dataTable > thead > tr.dtcc-row_no-bottom-border > * {
  border-bottom: none !important;
}
table.dataTable > thead > tr.dtcc-row_no-top-padding > * {
  padding-top: 0 !important;
}

table.dataTable span.dtcc {
  font-weight: normal;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
table.dataTable span.dtcc button.dtcc-button {
  display: inline-flex;
  padding: var(--dtcc-button_padding);
  border: var(--dtcc-button_border);
  border-radius: var(--dtcc-button_border-radius);
  background: var(--dtcc-button_background);
  cursor: pointer;
  opacity: var(--dtcc-button_opacity);
}
table.dataTable span.dtcc button.dtcc-button:hover {
  border: var(--dtcc-button_hover-border);
  background: var(--dtcc-button_hover-background);
  opacity: var(--dtcc-button_hover-opacity);
}
table.dataTable span.dtcc button.dtcc-button.dtcc-button_disabled {
  cursor: initial;
  opacity: var(--dtcc-button_disabled-opacity);
}
table.dataTable span.dtcc button.dtcc-button > span.dtcc-button-state {
  display: none;
}
table.dataTable span.dtcc button.dtcc-button > span.dtcc-button-extra {
  display: none;
}
table.dataTable span.dtcc button.dtcc-button_active {
  opacity: 1;
}
table.dataTable span.dtcc input {
  box-sizing: border-box;
  width: 100%;
}
table.dataTable span.dtcc span.dtcc-button-icon {
  display: inline-block;
  box-sizing: content-box;
  color: var(--dtcc-button-icon_color);
  vertical-align: middle;
  line-height: var(--dtcc-button-icon_size);
  height: var(--dtcc-button-icon_size);
}
table.dataTable span.dtcc span.dtcc-button-icon svg {
  width: var(--dtcc-button-icon_size);
  height: var(--dtcc-button-icon_size);
  vertical-align: initial;
}
table.dataTable span.dtcc span.dtcc-button-text {
  display: none;
}
table.dataTable span.dtcc div.dtcc-spacer {
  display: inline-block;
  margin: 0 var(--dtcc-spacer_margin);
  padding-left: 0.5em;
  border-left: var(--dtcc-spacer_border);
  vertical-align: middle;
  white-space: nowrap;
  cursor: initial;
}
table.dataTable span.dtcc div.dtcc-spacer:empty {
  width: 1px;
  height: 1em;
  padding-left: 0;
}
table.dataTable span.dtcc div.dtcc-search {
  flex-grow: 1;
}
table.dataTable span.dtcc div.dtcc-search div.dtcc-search-title {
  margin-bottom: 0.25em;
  text-align: left;
}
table.dataTable span.dtcc div.dtcc-search:empty {
  display: none;
}
table.dataTable span.dtcc div.dtcc-search.dtcc-search_active > div div.dtcc-search-type-icon svg {
  opacity: 1;
}
table.dataTable span.dtcc div.dtcc-search:not(.dtcc-search_active) span.dtcc-search-clear {
  display: none;
}
table.dataTable span.dtcc div.dtcc-search > div {
  position: relative;
}
table.dataTable span.dtcc div.dtcc-search > div div.dtcc-search-type-icon {
  display: flex;
  position: absolute;
  top: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 100%;
}
table.dataTable span.dtcc div.dtcc-search > div div.dtcc-search-type-icon svg {
  width: var(--dtcc-search-icon_size);
  height: var(--dtcc-search-icon_size);
  color: var(--dtcc-search-icon_color);
  opacity: var(--dtcc-search-icon_opacity);
  vertical-align: initial;
}
table.dataTable span.dtcc div.dtcc-search > div div.dtcc-search-type-icon:hover {
  background-color: var(--dtcc-search-icon_hover-background);
}
table.dataTable span.dtcc div.dtcc-search > div select {
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  background-color: var(--dtcc-search-input_background);
}
table.dataTable span.dtcc div.dtcc-search > div span.dtcc-search-clear {
  display: flex;
  position: absolute;
  top: 0;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 100%;
  cursor: pointer;
}
table.dataTable span.dtcc div.dtcc-search > div div.dtcc-search-icon {
  display: none;
}
table.dataTable span.dtcc div.dtcc-search > div input {
  padding: var(--dtcc-search-input_padding);
  border: var(--dtcc-search-input_border);
  border-radius: var(--dtcc-search-input_border-radius);
  background-color: var(--dtcc-search-input_background);
  color: inherit;
}
table.dataTable span.dtcc div.dtcc-searchText > div div.dtcc-search-type-icon {
  right: 0;
  z-index: 1;
}
table.dataTable span.dtcc div.dtcc-searchText > div select {
  right: 0;
  z-index: 2;
  padding: 0;
}
table.dataTable span.dtcc div.dtcc-searchText > div span.dtcc-search-clear {
  right: 28px;
  z-index: 1;
}
table.dataTable span.dtcc div.dtcc-searchText > div input {
  padding-right: 46px;
}
table.dataTable span.dtcc div.dtcc-searchNumber > div div.dtcc-search-type-icon,
table.dataTable span.dtcc div.dtcc-searchDateTime > div div.dtcc-search-type-icon {
  left: 0;
  z-index: 1;
}
table.dataTable span.dtcc div.dtcc-searchNumber > div select,
table.dataTable span.dtcc div.dtcc-searchDateTime > div select {
  left: 0;
  z-index: 2;
}
table.dataTable span.dtcc div.dtcc-searchNumber > div span.dtcc-search-clear,
table.dataTable span.dtcc div.dtcc-searchDateTime > div span.dtcc-search-clear {
  left: 28px;
}
table.dataTable span.dtcc div.dtcc-searchNumber > div input,
table.dataTable span.dtcc div.dtcc-searchDateTime > div input {
  padding-left: 46px;
  text-align: right;
}

div.dtcc-dropdown {
  display: block;
  box-sizing: border-box;
  z-index: var(--dtcc-dropdown_z-index);
  position: absolute;
  width: var(--dtcc-dropdown_width);
  margin: var(--dtcc-dropdown_margin);
  padding: var(--dtcc-dropdown_padding);
  overflow: hidden;
  border: var(--dtcc-dropdown_border);
  border-radius: var(--dtcc-dropdown_border-radius);
  background: var(--dtcc-dropdown_background);
  box-shadow: var(--dtcc-dropdown_box-shadow);
}
div.dtcc-dropdown button.dtcc-button {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  padding: var(--dtcc-dropdown-button_padding);
  border: var(--dtcc-dropdown-button_border);
  background: var(--dtcc-dropdown-button_background);
  color: var(--dtcc-dropdown-button_color);
  text-align: left;
  cursor: pointer;
}
div.dtcc-dropdown button.dtcc-button:focus {
  outline-offset: -2px;
}
div.dtcc-dropdown button.dtcc-button:hover {
  background: var(--dtcc-dropdown-button_hover-background);
}
div.dtcc-dropdown button.dtcc-button.dtcc-button_disabled {
  cursor: initial;
  opacity: var(--dtcc-button_disabled-opacity);
}
div.dtcc-dropdown button.dtcc-button.dtcc-button_empty span.dtcc-button-text {
  opacity: var(--dtcc-button_empty-opacity);
  font-style: italic;
}
div.dtcc-dropdown button.dtcc-button > span.dtcc-button-state {
  display: block;
  width: var(--dtcc-button-icon_size);
  height: var(--dtcc-button-icon_size);
  margin: 0 0 0 var(--dtcc-button-icon_margin);
}
div.dtcc-dropdown button.dtcc-button > span.dtcc-button-state:empty {
  display: none;
}
div.dtcc-dropdown button.dtcc-button > span.dtcc-button-state svg {
  width: var(--dtcc-button-icon_size);
  height: var(--dtcc-button-icon_size);
  vertical-align: initial;
}
div.dtcc-dropdown button.dtcc-button > span.dtcc-button-extra:empty {
  display: none;
}
div.dtcc-dropdown button.dtcc-button span.dtcc-button-icon {
  width: var(--dtcc-button-icon_size);
  height: var(--dtcc-button-icon_size);
  margin: 0 var(--dtcc-button-icon_margin) 0 0;
}
div.dtcc-dropdown button.dtcc-button span.dtcc-button-icon svg {
  width: var(--dtcc-button-icon_size);
  height: var(--dtcc-button-icon_size);
  vertical-align: var(--dtcc-dropdown-icon_vertical-align);
}
div.dtcc-dropdown button.dtcc-button span.dtcc-button-text {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
div.dtcc-dropdown div.dtcc-spacer {
  margin: var(--dtcc-spacer_margin) 0;
  padding: 0;
  border-bottom: var(--dtcc-spacer_border);
  border-left: none;
}
div.dtcc-dropdown div.dtcc-title {
  margin: var(--dtcc-title_margin);
  padding: var(--dtcc-title_padding);
  border-top: var(--dtcc-title_border-top);
  border-right: var(--dtcc-title_border-right);
  border-bottom: var(--dtcc-title_border-bottom);
  border-left: var(--dtcc-title_border-left);
  background: var(--dtcc-title_background);
  text-align: var(--dtcc-title_text-align);
}
div.dtcc-dropdown div.dtcc-search {
  padding: var(--dtcc-dropdown-search_padding);
}
div.dtcc-dropdown div.dtcc-search > div {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  border: var(--dtcc-dropdown-button_border);
  background: var(--dtcc-dropdown-button_background);
  color: var(--dtcc-dropdown-button_color);
}
div.dtcc-dropdown div.dtcc-search > div div {
  flex: 0 0 var(--dtcc-button-icon_size);
  width: var(--dtcc-button-icon_size);
  height: var(--dtcc-button-icon_size);
  margin: 0 var(--dtcc-button-icon_margin) 0 0;
}
div.dtcc-dropdown div.dtcc-search > div div svg {
  width: var(--dtcc-search-icon_size);
  height: var(--dtcc-search-icon_size);
  color: var(--dtcc-search-icon_color);
  vertical-align: var(--dtcc-dropdown-icon_vertical-align);
}
div.dtcc-dropdown div.dtcc-search > div select,
div.dtcc-dropdown div.dtcc-search > div input {
  box-sizing: border-box;
  flex: 1 1 calc(100% - var(--dtcc-search-input_flexCalc));
  width: 100%;
  min-width: 0;
  padding: var(--dtcc-search-input_padding);
  border: var(--dtcc-search-input_border);
  border-radius: var(--dtcc-search-input_border-radius);
  background-color: var(--dtcc-search-input_background-color);
}
div.dtcc-dropdown div.dtcc-search > div select option,
div.dtcc-dropdown div.dtcc-search > div input option {
  background-color: var(--dtcc-search-input_background-color);
}
div.dtcc-dropdown div.dtcc-search > div input,
div.dtcc-dropdown div.dtcc-search > div div.dtcc-search-icon {
  margin-top: var(--dtcc-search-input_margin-top);
}
div.dtcc-dropdown div.dtcc-search > div input {
  padding-right: var(--dtcc-search-input_padding-right);
}
div.dtcc-dropdown div.dtcc-search > div span.dtcc-search-clear {
  position: absolute;
  right: var(--dtcc-search-clear_right);
  bottom: var(--dtcc-search-clear_bottom);
  width: 14px;
  cursor: pointer;
}
div.dtcc-dropdown div.dtcc-search:not(.dtcc-search_active) span.dtcc-search-clear {
  display: none;
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-title {
  padding: var(--dtcc-dropdown-button_padding);
  font-style: italic;
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-title:empty {
  display: none;
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls {
  display: grid;
  padding: var(--dtcc-dropdown-button_padding);
  gap: 0.5em;
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls:empty {
  display: none;
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls button.dtcc-list-selectAll,
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls button.dtcc-list-selectNone {
  width: 100%;
  padding: 0;
  border: none;
  background-color: transparent;
  color: inherit;
  font-size: 80%;
  text-align: center;
  cursor: pointer;
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls button.dtcc-list-selectAll:hover,
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls button.dtcc-list-selectNone:hover {
  text-decoration: underline;
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls button.dtcc-list-selectAll span,
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls button.dtcc-list-selectNone span {
  display: inline-block;
  padding-left: 0.25em;
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls input.dtcc-list-search {
  box-sizing: border-box;
  grid-column: 1/3;
  width: 100%;
  padding: var(--dtcc-search-input_padding);
  border: var(--dtcc-search-input_border);
  border-radius: var(--dtcc-search-input_border-radius);
  background-color: var(--dtcc-search-input_background-color);
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-buttons {
  max-height: var(--dtcc-list-buttons_max-height);
  overflow: auto;
  background: var(--dtcc-list-buttons_background);
}
div.dtcc-dropdown div.dtcc-list span.dtcc-button-icon:empty {
  display: none;
}

div.dtcc-dropdown div.dtcc-search > div input,
div.dtcc-dropdown div.dtcc-search > div div.dtcc-search-icon {
  position: initial !important;
  margin-top: 0.5em !important;
}