kui-shell/packages/core/web/css/top-tab-stripe.css

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

/* tabs */
.tab-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* inner scrolling */
}
tab {
  flex: 1;
  display: none;
  overflow: hidden; /* inner scrolling */
}
tab.visible {
  display: flex;
}
tab.split-tab:not(:first-child).visible {
  /* split screen separator */
  border-top: 2px solid var(--color-base03);
}

body.not-electron .application-name {
  display: flex;
}
body.not-electron > .page > .header {
  flex-basis: 0;
  padding: 0;
}

body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe {
  display: none;
}
.left-tab-stripe {
  display: flex;
  flex-basis: 36px;
  height: 36px;
  padding-left: 1ex;
  min-width: 0;
  background-color: var(--color-stripe-01);
  transition-property: background-color;
}

.left-tab-stripe-buttons {
  overflow: auto;
}

.left-tab-stripe-button:not([data-tab-button-index]):not([data-balloon]):after {
  content: "";
}
.left-tab-stripe-buttons .left-tab-stripe-button:not(.left-tab-stripe-button-selected) {
  background: transparent;
}
.left-tab-stripe-button i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  transition-property: filter, color, background-color;
}

/* these two rules give us the tab index label that appears inside of the tabs */
.left-tab-stripe-buttons .left-tab-stripe-button {
  counter-increment: tab-index;
}
.left-tab-stripe-buttons .left-tab-stripe-button-closer {
  position: absolute;
  top: 50%;
  right: 0.25em;
  transform: translateY(-50%);
  font-size: 1em;
  transition-property: background-color;
  padding: 1px;
  display: flex;
}
.left-tab-stripe-buttons .left-tab-stripe-button-closer svg path {
  fill: transparent;
  transition-property: fill;
}
.left-tab-stripe-buttons .left-tab-stripe-button:hover .left-tab-stripe-button-closer {
  cursor: pointer;
}
.left-tab-stripe-buttons .left-tab-stripe-button:hover .left-tab-stripe-button-closer svg path {
  fill: var(--color-text-02);
}
.left-tab-stripe-buttons .left-tab-stripe-button:hover .left-tab-stripe-button-closer:hover svg path {
  fill: var(--color-base01);
}
.left-tab-stripe-buttons .left-tab-stripe-button .left-tab-stripe-button-closer:hover {
  background: var(--color-base05);
}

.left-tab-stripe-button:not([data-tab-button-index]):not(.left-tab-stripe-button-selected) > svg:hover {
  cursor: pointer;
}
.left-tab-stripe-button:not([data-tab-button-index]):not(.left-tab-stripe-button-selected) > svg:hover path {
  fill: var(--color-support-04) !important;
}
.left-tab-stripe-button-selected .left-tab-stripe-button-label {
  /* reduce the visibility of the tab label, for the visible tab */
  opacity: 0.75;
}
.left-tab-stripe-button-label {
  color: var(--color-text-01);
  font-size: 0.75em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 1ex;

  /* this is an attempt to get the text ellipsis to ellide at the front
   rather than the end; we should be treat this as an experiment, and
   back it out if it causes problems @starpit 20181204 */
  direction: rtl;
}

.repl {
  padding-top: 0;
}
body.not-electron .repl-input {
  padding-left: 0.375rem;
}
body:not(.subwindow) .repl-prompt-right-elements {
  padding-right: 0.375rem;
}

.left-tab-stripe-button svg circle,
.left-tab-stripe-button svg path {
  fill: var(--color-text-02);
  transition-property: fill;
}

#help-button.left-tab-stripe-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  flex-direction: column;
}

.left-tab-stripe-buttons {
  display: flex;
}

.left-tab-stripe-button {
  position: relative;
  display: flex;
  color: var(--color-text-01);
  opacity: 1;
  align-items: center;
  justify-content: center;
  background: var(--color-base02);
  min-width: 10em;
  margin: 0;
  border: 1px solid transparent;
  border-bottom: none;
  border-top-left-radius: 3px 6px;
  border-top-right-radius: 3px 6px;
  transition-property: all;
}

.left-tab-stripe-button:not(.left-tab-stripe-button-selected) .left-tab-stripe-button-label {
  /* make not-selected tabs a bit more visible */
  color: var(--color-base02);

  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  transition-property: color;
}
body[kui-theme-style="dark"]
  .left-tab-stripe-button:not(.left-tab-stripe-button-selected)
  .left-tab-stripe-button-label {
  color: var(--color-text-02);
}

.left-tab-stripe-button:not(.left-tab-stripe-button-selected)
  + .left-tab-stripe-button:not(.left-tab-stripe-button-selected)
  .left-tab-stripe-button-label {
  border-left-color: var(--color-table-border1);
}
.left-tab-stripe-button:not(.left-tab-stripe-button-selected):last-child .left-tab-stripe-button-label {
  border-right-color: var(--color-table-border1);
}

.kui-tab.left-tab-stripe-button-selected {
  background: var(--color-ui-01);
  border-color: var(--color-base03);
  margin-top: 3px;
}

.left-tab-stripe-buttons .left-tab-stripe-button > i {
  display: none;
}

.left-tab-stripe-button-label {
  flex: 1;
  padding: 0.125em 1.875em 0.125em 1em;
  font-weight: 500;
  direction: unset;
  max-width: 25em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* processing... */
.left-tab-stripe-button.processing .left-tab-stripe-button-label {
  color: var(--color-base0C);
}
.left-tab-stripe-button:not(.left-tab-stripe-button-selected).processing .left-tab-stripe-button-label {
  /* for background tabs... we need more contrast */
  color: var(--color-base03);
}
.left-tab-stripe-button:not(.left-tab-stripe-button-selected).processing .left-tab-stripe-button-label:after {
  content: " \2731";
}

.left-tab-stripe-bottom-buttons {
  flex: 1;
  display: flex;
}

.left-tab-stripe-bottom-buttons .left-tab-stripe-button {
  margin: 0;
  min-width: unset;
  padding: 0;
  padding: 0 0.375em;
  background: none;
  justify-content: center;
}

.left-tab-stripe-button-selected .left-tab-stripe-button-label {
  opacity: 1;
}

.left-tab-stripe-button.smaller-button i {
  font-size: 1.25em;
}
.left-tab-stripe-button.smaller-button i.fas {
  font-size: 0.75em;
}

.kui-header {
  border-bottom: 0.5px solid var(--color-content-divider);
  box-shadow: 0 1px 10px 0 rgba(21, 41, 53, 0.1);
}
[kui-theme-style] .kui-header__title {
  /* by default, don't show tool name in top tab */
  display: none;
}

.kui-tab:hover:after,
.kui-tab--active:after {
  display: none;
}