vibe-action 0.2.2

Command router — execute shell commands and LLM prompts via simple YAML actions.
/* ==================== Variables ==================== */
html.navy {
  --bg: #0c0f11;
  --fg: #dedad2;

  --sidebar-bg: #12161a;
  --sidebar-fg: #a9a8a0;
  --sidebar-non-existant: #505050;
  --sidebar-active: #2ec4b6;
  --sidebar-spacer: #252a2e;

  --scrollbar: #8a8a82;

  --icons: #707068;
  --icons-hover: #c0c0b0;

  --links: #2ec4b6;

  --inline-code-color: #e79a6e;

  --theme-popup-bg: #12161a;
  --theme-popup-border: #252a2e;
  --theme-hover: #1a1e22;

  --quote-bg: #14181c;
  --quote-border: #252a2e;

  --table-border-color: #1e2327;
  --table-header-bg: #14181c;
  --table-alternate-bg: #12161a;

  --searchbar-border-color: #252a2e;
  --searchbar-bg: #14181c;
  --searchbar-fg: #dedad2;
  --searchbar-shadow-color: #0c0f11;
  --searchresults-header-fg: #a9a8a0;
  --searchresults-border-color: #252a2e;
  --searchresults-li-bg: #14181c;
  --search-mark-bg: #2ec4b6;

  --color-scheme: dark;

  --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%)
    contrast(87%);
  --copy-button-filter-hover: invert(51%) sepia(55%) saturate(531%) hue-rotate(160deg)
    brightness(104%) contrast(101%);

  --footnote-highlight: #2ec4b6;

  --overlay-bg: rgba(12, 15, 17, 0.6);

  --blockquote-note-color: #4493f8;
  --blockquote-tip-color: #2ec4b6;
  --blockquote-important-color: #1a9e93;
  --blockquote-warning-color: #d29922;
  --blockquote-caution-color: #f21424;

  --sidebar-header-border-color: #2ec4b6;

  --warning-border: #d06b38;

  --content-max-width: 1100px;
}

/* ==================== Background ==================== */
html.navy body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(222, 218, 210, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(46, 196, 182, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(198, 93, 44, 0.015) 0%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    60px 60px,
    60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ==================== Menu Bar ==================== */
html.navy #menu-bar {
  background: rgba(12, 15, 17, 0.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid #252a2e;
}

html.navy .menu-title {
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
  font-weight: 700;
  color: #dedad2;
}

/* ==================== Content ==================== */
html.navy .content {
  padding-top: 36px;
  padding-bottom: 36px;
}

html.navy .content main {
  background: rgb(18 22 26 / 92%);
  border-radius: 12px;
  padding: 32px;
}

/* ==================== Headings ==================== */
html.navy .content h1 {
  font-family: var(--font-mono);
  font-weight: 800;
  background: linear-gradient(135deg, #2ec4b6, #1a9e93);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.navy .content h2,
html.navy .content h3 {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #dedad2;
}

html.navy .content main > h1:first-child,
html.navy .content main > h2:first-child,
html.navy .content main > h3:first-child {
  margin-top: 0;
}

/* ==================== Code Blocks ==================== */
html.navy .content pre {
  background: #14181c !important;
  border: 1px solid #252a2e;
  border-radius: 12px;
  margin: 1.5em 0;
  position: relative;
  overflow-x: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  padding: 0;
}

html.navy .content pre::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(135deg, rgba(46, 196, 182, 0.5), rgba(198, 93, 44, 0.3));
  border-radius: 12px 12px 0 0;
}

html.navy .content pre code {
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
  background: #14181c;
  display: block;
  padding: 24px;
}

/* ==================== Copy Button ==================== */
html.navy .content pre > .buttons button {
  padding: 1px 3px;
  font-size: 13px;
  position: relative;
  left: -1px;
}

html.navy .content pre > .buttons button.clip-button::before {
  content: url('data:image/svg+xml,<svg width="16" height="15" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard"><path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/></svg>');
  filter: var(--copy-button-filter);
}

/* ==================== Tables ==================== */
html.navy .content table {
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
  overflow: hidden;
  border: 1px solid #252a2e;
  border-radius: 8px;
  width: 100%;
  background: #252a2e;
  backdrop-filter: none;
  isolation: isolate;
  position: relative;
}

html.navy .content table::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(135deg, rgba(46, 196, 182, 0.5), rgba(198, 93, 44, 0.3));
  z-index: 1;
}

html.navy .content table thead {
  background: #14181c;
}

html.navy .content table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #dedad2;
  border-bottom: 2px solid #252a2e;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

html.navy .content table td {
  padding: 10px 16px;
  border-bottom: 1px solid #252a2e;
  color: #a9a8a0;
  background: #14181c;
}

html.navy .content table tr:hover td {
  background: rgba(46, 196, 182, 0.06);
}

html.navy .content table tbody tr:nth-child(2n) {
  background: #14181c;
}

html.navy .content table {
  backdrop-filter: none;
  isolation: isolate;
}

html.navy .hljs-variable,
html.navy .hljs-attribute,
html.navy .hljs-attr,
html.navy .hljs-tag,
html.navy .hljs-regexp {
  color: #d06b38;
}

html.navy .hljs {
  background: #111213;
}

html.navy .hljs-comment {
  color: #6d7578;
}