kui-shell/packages/core/web/css/kui-tables.css

This is the monorepo for Kui, the hybrid command-line/GUI electron-based Kubernetes tool

/* carbon overrides */

[kui-theme-style] .repl .result-as-table .result-table:not([kui-table-style="Light"]) {
  font-family: var(--font-sans-serif);
}

[kui-theme-style] .result-as-table .result-table {
  display: table;
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid var(--color-ui-04);
  /* this causes odd flickering on chrome: transition: border-color 300ms ease-in-out; */
  background: transparent;
}

.result-as-table .result-table[kui-table-style="None"] {
  border: none;
}

[kui-theme-style] .bx--data-table thead,
[kui-theme-style] .bx--data-table tbody {
  background: transparent;
  font-weight: unset;
  letter-spacing: unset;
  width: unset;
}
[kui-theme-style] .bx--data-table th {
  color: unset;
  font-weight: unset;
}

[kui-theme-style] .bx--data-table td {
  color: var(--color-text-01);
}
[kui-theme-style] .bx--data-table[kui-table-style="Light"] .bx--table-header-label {
  /* for Light tables, there is no th background color, thus no need for extra space */
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 400;
  color: var(--color-text-02);
  text-transform: uppercase;
  opacity: 0.75;
}
[kui-theme-style] sidecar .bx--data-table[kui-table-style="Light"] .bx--table-header-label {
  color: var(--color-text-inverted02);
}
[kui-theme-style] .bx--data-table:not([kui-table-style="Light"]) th.header-cell {
  border-bottom: none;
}
[kui-theme-style] .bx--data-table:not([kui-table-style="Light"]) td,
[kui-theme-style] .bx--data-table:not([kui-table-style="Light"]) th {
  border-top: none;
}

/* base stylings? */
.result-as-fixed-tables.result-as-table .result-table-outer {
  /* if these are fixed tables, then they will occupy the full width of
       the container, so we don't need a margin-right */
  margin-right: 0;
}
.result-as-table .result-table-outer .result-table {
  margin-top: 0;
}
[kui-theme-style] .result-table-title-outer {
  background-color: transparent;
  color: var(--color-name);
}
.result-as-multi-table .result-table-outer-wrapper:first-child .result-table-title-outer {
  padding-top: 0;
}
.result-table-title {
  flex: 1;
  text-transform: uppercase;
}
.bx--data-table.result-table[kui-table-style] th.header-cell {
  font-weight: bold;
  background-color: var(--color-ui-06);
  letter-spacing: 0.16px;
}
.header-cell svg path {
  fill: var(--color-text-against-dark-bg);
}
.result-table:not([kui-table-style="Light"]) .header-cell .cell-inner {
  padding: 0 0.6875em;
}
.header-cell:not(:first-child) .cell-inner {
  border-left: 1px solid var(--color-table-border3);
}
.log-lines .header-cell {
  border-bottom: 1px solid var(--color-content-divider);
}

.sidecar-visible .result-table .entity {
  /* in either one-column mode, or if the sidecar is visible, have list entries occupy a full row */
  padding-right: 0;
}

.result-table .entity {
  display: table-row-group;
}
.entity-attributes {
  display: table-row;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 2.5em;
}

.entity:first-child .entity-attributes > td {
  border-top: none;
}
.bx--data-table.result-table .entity-attributes > td,
.bx--data-table.result-table .entity-attributes > th {
  display: table-cell;
  vertical-align: middle;
  padding: 0.6875em;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.subwindow .bx--data-table.result-table .entity-attributes > td,
body.subwindow .bx--data-table.result-table .entity-attributes > th {
  padding: 0 1.25vw;
}
.bx--data-table.result-table .entity-attributes > th.header-cell {
  padding-left: 0;
  padding-right: 0;
}
.bx--data-table.result-table .entity-attributes > td {
  border-top: 1px solid var(--color-table-border3);
  border-bottom: 1px solid var(--color-table-border3);
  background: transparent;
}
[kui-theme-style] .bx--data-table tbody tr:hover,
[kui-theme-style] .bx--data-table tbody tr:hover {
  /* no row-hover effects for kui-tables */
  background-color: unset;
}
[kui-theme-style] .bx--data-table tbody tr:hover td {
  /* no row-hover effects for kui-tables */
  color: unset;
}
.bx--data-table.result-table[kui-table-style="Light"] .entity-attributes > td,
.bx--data-table.result-table[kui-table-style="Light"] .entity-attributes > th {
  padding-left: 0.375em;
  padding-right: 0.375em;
}
.header-cell {
  text-align: left; /* th defaults to text-align: center */
}
sidecar
  .repl-result:not(.result-table-with-custom-entity-colors)
  .entity-name-group:not(.header-cell)
  .entity-name[data-key="NAME"] {
  color: var(--color-map-key);
}
.repl-result:not(.result-table-with-custom-entity-colors)
  .entity-name-group:not(.header-cell)
  .entity-name[data-key="NAME"],
.repl-result:not(.result-table-with-custom-entity-colors) .bold {
  /* emphasize the entity name, unless
   (.result-table-with-custom-entity-colors) the client has requested
   control over entity colors */
  color: var(--color-name);
}
.repl-result:not(.result-table-with-custom-entity-colors)
  .entity-name-group:not(.header-cell)
  .entity-name[data-key="NAME"]
  svg
  path {
  /* same as the previous rule, but for svg icons */
  fill: var(--color-name);
}
.log-field .entity-name {
  direction: rtl;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15em;
}
.repl-result .entity.activations .entity-name {
  margin-left: 2em;
  order: 2;
  font-size: 80%;
  opacity: 0.6;
  flex: 1;
}

.result-table .entity:nth-child(2n + 1) td,
.result-table .entity:nth-child(2n + 1) .entity-attributes {
  /* table row striping */
  background-color: var(--color-ui-02);
}
body sidecar .result-table .entity:nth-child(2n) td,
body sidecar .result-table .entity:nth-child(2n) .entity-attributes {
  /* table row striping in sidecar (when not full screen) */
  background: var(--color-ui-03);
}

.bx--data-table.result-table .entity-attributes > th,
.bx--data-table.result-table .entity-attributes > td {
  padding-top: 0;
  padding-bottom: 0;
}

.bx--data-table.result-table:not([kui-table-style="Light"]) .entity-attributes > td.not-too-compact {
  padding-top: 0.375em;
  padding-bottom: 0.375em;
}
.result-as-table .bx--data-table.result-table[kui-table-style="Light"],
.result-as-table .bx--data-table.result-table[kui-table-style="Medium"] {
  border: none;
}
.result-as-table .bx--data-table.result-table[kui-table-style="Light"] .header-row .header-cell,
.result-as-table .bx--data-table.result-table[kui-table-style="Light"] .header-row .header-cell {
  background: none;
}
.result-as-table .bx--data-table.log-lines[kui-table-style="Light"] .log-line .log-line-bar-field,
.log-lines[kui-table-style="Light"] .log-line .log-field {
  border: none;
}
.bx--data-table.result-table[kui-table-style="Light"] .entity th,
.bx--data-table.result-table[kui-table-style="Light"] .entity td,
sidecar .bx--data-table.result-table[kui-table-style="Light"] .entity td,
.bx--data-table.result-table[kui-table-style="Medium"] .entity td {
  background: none;
}
.bx--data-table.result-table[kui-table-style="Light"] .entity .entity-attributes {
  height: 1.25em;
}
.bx--data-table.result-table[kui-table-style="Light"] .entity .entity-attributes,
.bx--data-table.result-table[kui-table-style="Medium"] .entity .entity-attributes {
  background: none !important;
}
.bx--data-table.result-table .entity tr.entity-attributes,
sidecar .log-lines[kui-table-style="Light"] .log-line,
.log-lines[kui-table-style="Medium"] .log-line {
  height: 2em;
}
.bx--data-table[kui-table-style="Light"] .entity-attributes > th,
.bx--data-table[kui-table-style="Light"] .entity-attributes > td,
.bx--data-table[kui-table-style="Light"] .entity-attributes > th .cell-inner,
.bx--data-table[kui-table-style="Light"] .entity-attributes > td .cell-inner {
  border: none;
}
.result-as-table .result-table-outer[kui-table-style="Light"] .result-table-title,
.result-as-table .result-table-outer[kui-table-style="Medium"] .result-table-title {
  padding-left: 0.75em;
}