kui-shell/packages/core/web/css/left-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 {
  flex-basis: 78px; /* this seems to align things well with macOS */
  min-width: 0;
  padding: 1.5em 0 0.5em;
  background: var(--color-stripe-01);
  display: flex;
  flex-direction: column;
  -webkit-app-region: drag;
  transition: background-color 300ms ease-in-out;
}
body.os-darwin .left-tab-stripe {
  padding-top: 2em;
}

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

.left-tab-stripe-button {
  position: relative;
  display: flex;
  margin: 1em 0;
  flex-direction: column;
  color: var(--color-text-01);
  opacity: 1;
  transition: color 600ms ease-in-out;
  opacity: 300ms ease-in-out;
}
.left-tab-stripe-button:only-child {
  opacity: 0;
}

.left-tab-stripe-bottom-buttons .left-tab-stripe-button {
  margin: 1.375em 0;
}
.left-tab-stripe-button:not([data-tab-button-index]):hover i {
  color: rgba(255, 255, 255, 0.5) !important;
}
.left-tab-stripe-button:not([data-tab-button-index]) i {
  color: rgba(255, 255, 255, 0.25) !important;
}
.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) {
  filter: blur(0.5px) grayscale(0.75) brightness(0.75);
}
.left-tab-stripe-button i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  transition: filter 300ms ease-in-out, color 300ms ease-in-out;
  /* border-radius: 3px / 6px;
    border: 9px solid transparent; */
}
.left-tab-stripe-button:nth-child(8n + 1) i {
  color: var(--color-tab-01);
}
.left-tab-stripe-button:nth-child(8n + 2) i {
  color: var(--color-tab-02);
}
.left-tab-stripe-button:nth-child(8n + 3) i {
  color: var(--color-tab-03);
}
.left-tab-stripe-button:nth-child(8n + 4) i {
  color: var(--color-tab-04);
}
.left-tab-stripe-button:nth-child(8n + 5) i {
  color: var(--color-tab-05);
}
.left-tab-stripe-button:nth-child(8n + 6) i {
  color: var(--color-tab-06);
}
.left-tab-stripe-button:nth-child(8n + 7) i {
  color: var(--color-tab-07);
}
.left-tab-stripe-button:nth-child(8n + 8) i {
  color: var(--color-tab-08);
}

/* 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:after {
  content: counter(tab-index);
  position: absolute;
  top: calc(0.6875 / 3 * 100%); /* matching 0.6875em here, and 3em for `fas fa-square` */
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-base06);
  font-weight: bold;
  font-size: 0.6875em;
  transition: font-size 150ms ease-in-out;
}

.left-tab-stripe-button.smaller-button i {
  font-size: 2em;
}
.left-tab-stripe-button.left-tab-stripe-button-selected:after {
  font-size: 0.875em;
}
body[kui-theme-style="light"] .left-tab-stripe-buttons .left-tab-stripe-button i {
  filter: grayscale(0.5) opacity(0.5);
}
.left-tab-stripe-buttons .left-tab-stripe-button i {
  filter: grayscale(0.5) opacity(0.25);
}
.left-tab-stripe-bottom-buttons i {
  filter: grayscale(0.5);
}
.left-tab-stripe-button:not(.left-tab-stripe-button-selected):hover i {
  filter: none;
}
.left-tab-stripe-button-selected {
  color: var(--color-text-01);
}
.left-tab-stripe-button:not(.left-tab-stripe-button-selected):hover {
  color: var(--color-text-01);
  cursor: pointer;
}
.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-02);
  font-size: 0.6875em;
  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;
}

.sidecar-header span {
  -webkit-app-region: no-drag;
}
.sidecar-header div,
.sidecar-bottom-stripe {
  -webkit-app-region: drag;
}
sidecar .sidecar-header-name-content {
  -webkit-app-region: unset;
}

.repl {
  padding-top: 0;
}
.repl-input,
.repl-output {
  padding: 0 0 0 0.375rem;
  transition: padding 150ms ease-in-out;
}
.repl-result > div,
.repl:not(.sidecar-visible) .repl-result .result-table-outer {
  padding-right: 0.375rem;
}
.repl-prompt-right-elements {
  padding-right: 0.375rem;
}
.repl.sidecar-visible .repl-input,
.repl.sidecar-visible .repl-output {
  padding-left: 0.375rem;
}
.repl.sidecar-visible .repl-output {
  padding-right: 0.375rem;
}

#help-button.left-tab-stripe-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
#help-button.left-tab-stripe-button i {
  color: var(--color-base0D) !important;
}
#help-button.left-tab-stripe-button:hover i {
  color: var(--color-brand-02) !important;
}