tabby cool CSS

tabby_stuff..css

/* font here - https://github.com/ahatem/IoskeleyMono */

:root {
  --ug-accent: #e8602b;              /* CS-100 amber-orange. FLX vermilion = #e5421f */
  --ug-ink:    #0d0d0e;              /* near-black ground */
  --ug-line:   rgba(255,255,255,0.08);
}

/* ---- tab bar: flat document header, hairline base ---- */
app-root > .content .tab-bar,
app-root > .content.tabs-on-top .tab-bar,
app-root > .content .tab-bar .drag-space {
  background: var(--ug-ink) !important;
  box-shadow: none !important;
}
app-root > .content .tab-bar {
  border-bottom: 1px solid var(--ug-line) !important;
}

/* ---- tabs: mono uppercase labels; size to content, shrink when crowded ---- */
app-root > .content .tab-bar > .tabs tab-header {
  position: relative !important;
  flex: 0 1 auto !important;         /* natural width, compress only as needed */
  width: auto !important;
  min-width: 50px !important;        /* never smaller than the index number */
  max-width: 240px !important;       /* cap very long names */
  padding: 0 14px !important;
  margin: 0 !important;
  border: none !important;
  border-left: 1px solid var(--ug-line) !important;   /* ledger rule between tabs */
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-family: "Ioskeley Mono Term", "Hack Nerd Font", monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.42) !important;
  opacity: 1 !important;
  transition: min-width 200ms cubic-bezier(0.2,0.7,0.2,1),
              max-width 200ms cubic-bezier(0.2,0.7,0.2,1),
              color 120ms linear !important;
}

/* hover / active: force room to reveal the full heading even when crowded */
app-root > .content .tab-bar > .tabs tab-header:hover {
  min-width: 210px !important;
  flex-shrink: 0 !important;
  color: rgba(255,255,255,0.72) !important;
  background: transparent !important;
}
app-root > .content .tab-bar > .tabs tab-header.active {
  min-width: 210px !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
}

/* active marker: one precise accent rule beneath */
app-root > .content .tab-bar > .tabs tab-header.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ug-accent);
}

/* close button: hidden until you're on the tab */
app-root > .content .tab-bar > .tabs tab-header .btn-close,
app-root > .content .tab-bar > .tabs tab-header .close {
  opacity: 0 !important;
  transition: opacity 120ms linear !important;
}
app-root > .content .tab-bar > .tabs tab-header:hover .btn-close,
app-root > .content .tab-bar > .tabs tab-header:hover .close,
app-root > .content .tab-bar > .tabs tab-header.active .btn-close,
app-root > .content .tab-bar > .tabs tab-header.active .close {
  opacity: 0.6 !important;
}

/* new-tab "+" and toolbar buttons stay flat */
app-root > .content .tab-bar .btn-tab-bar {
  background: transparent !important;
  color: rgba(255,255,255,0.5) !important;
}
app-root > .content .tab-bar .btn-tab-bar:hover {
  color: var(--ug-accent) !important;
  background: transparent !important;
}

/* ---- terminal: framed like a printed panel ---- */
.tab-content, tab-body {
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* ---- buttons: square, outlined, accent on hover ---- */
.btn {
  border-radius: 2px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: border-color 120ms linear, color 120ms linear !important;
}
.btn:hover {
  border-color: var(--ug-accent) !important;
  color: var(--ug-accent) !important;
}
.btn-primary, .btn.active {
  border-color: var(--ug-accent) !important;
  color: var(--ug-accent) !important;
}

/* ---- settings sidebar: flat, accent active item ---- */
settings-tab .nav-link.active {
  background: transparent !important;
  color: var(--ug-accent) !important;
  border-left: 2px solid var(--ug-accent) !important;
  border-radius: 0 !important;
}

/* ---- form inputs: square, hairline, accent focus ---- */
.form-control, input[type="text"], input[type="search"], select {
  border-radius: 2px !important;
  border: 1px solid var(--ug-line) !important;
  background: rgba(255,255,255,0.02) !important;
  box-shadow: none !important;
}
.form-control:focus, input:focus, select:focus {
  border-color: var(--ug-accent) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---- scrollbars: thin, monochrome, accent on grab ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ug-accent);
  background-clip: padding-box;
}