arcaneSidebarCodexStyles top-level constant

String const arcaneSidebarCodexStyles

Codex sidebar styles.

Implementation

const String arcaneSidebarCodexStyles = '''
/* ============================================
   SIDEBAR NAVIGATION - Codex
   ============================================ */

[class*="codex-"] .sidebar-header,
.codex .sidebar-header {
  padding: 0;
  gap: 0;
  border-bottom: none;
  background: transparent;
}

[class*="codex-"] .sidebar-brand,
.codex .sidebar-brand {
  padding: 1rem 1rem 0.75rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, transparent) 0%, transparent 100%);
  border-bottom: 1px solid var(--codex-accent-border);
}

[class*="codex-"] .sidebar-brand-title,
.codex .sidebar-brand-title {
  font-size: 1.125rem;
  background: linear-gradient(135deg, var(--foreground) 0%, color-mix(in srgb, var(--primary) 70%, var(--foreground)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[class*="codex-"] .sidebar-brand-subtitle,
.codex .sidebar-brand-subtitle {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.5625rem;
  color: var(--primary);
  opacity: 0.72;
  margin-top: 0.25rem;
}

[class*="codex-"] .sidebar-tabs,
.codex .sidebar-tabs {
  flex-direction: column;
  padding: 0.5rem 0;
  background: transparent;
  border-radius: 0;
  gap: 0;
  border-bottom: 1px solid var(--codex-accent-border);
}

[class*="codex-"] .sidebar-tab,
.codex .sidebar-tab {
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
  font-size: 0.6875rem;
  padding: 0.5rem 1rem;
  border-radius: 0;
  text-align: left;
  border-left: 3px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

[class*="codex-"] .sidebar-tab:hover,
.codex .sidebar-tab:hover {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-left-color: color-mix(in srgb, var(--primary) 36%, transparent);
  color: var(--primary);
}

[class*="codex-"] .sidebar-tab.active,
.codex .sidebar-tab.active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border-left-color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}

[class*="codex-"] .sidebar-controls,
.codex .sidebar-controls {
  padding: 0.625rem 0.75rem;
  background: color-mix(in srgb, var(--primary) 3%, var(--card));
  border-bottom: 1px solid var(--codex-accent-border);
}

[class*="codex-"] .sidebar-search input,
.codex .sidebar-search input {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  border: 1px solid var(--codex-accent-border);
  background: color-mix(in srgb, var(--primary) 4%, var(--muted));
}

[class*="codex-"] .sidebar-search input:focus,
.codex .sidebar-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}

[class*="codex-"] .sidebar-theme-toggle,
.codex .sidebar-theme-toggle {
  border: 1px solid var(--codex-accent-border);
  background: color-mix(in srgb, var(--primary) 4%, var(--muted));
}

[class*="codex-"] .sidebar-theme-toggle:hover,
.codex .sidebar-theme-toggle:hover {
  color: var(--primary);
  border-color: var(--primary);
}

[class*="codex-"] .sidebar-section-header,
.codex .sidebar-section-header {
  font-family: var(--font-heading);
  color: var(--primary);
  border-bottom: 1px solid var(--codex-accent-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
}

[class*="codex-"] .sidebar-summary,
.codex .sidebar-summary {
  font-family: var(--font-heading);
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border: 1px solid var(--codex-accent-border);
  border-radius: var(--radius-md);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

[class*="codex-"] .sidebar-section:hover:not(:has(.sidebar-section:hover)):not(:has(.sidebar-link:hover)) > .sidebar-details > .sidebar-summary,
.codex .sidebar-section:hover:not(:has(.sidebar-section:hover)):not(:has(.sidebar-link:hover)) > .sidebar-details > .sidebar-summary {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
}

[class*="codex-"] .sidebar-details[open] > .sidebar-summary,
.codex .sidebar-details[open] > .sidebar-summary {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

[class*="codex-"] .sidebar-section:hover:not(:has(.sidebar-section:hover)):not(:has(.sidebar-link:hover)) > .sidebar-details[open] > .sidebar-summary,
.codex .sidebar-section:hover:not(:has(.sidebar-section:hover)):not(:has(.sidebar-link:hover)) > .sidebar-details[open] > .sidebar-summary {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
}

[class*="codex-"] .sidebar-details[open] > .sidebar-tree::before,
.codex .sidebar-details[open] > .sidebar-tree::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--codex-accent-border);
  margin: 0.375rem 0 0.625rem 0;
}

[class*="codex-"] .sidebar-chevron::before,
.codex .sidebar-chevron::before {
  border-color: var(--primary);
  opacity: 0.75;
}

[class*="codex-"] .sidebar-details[open] .sidebar-chevron::before,
.codex .sidebar-details[open] .sidebar-chevron::before {
  opacity: 1;
}

[class*="codex-"] .sidebar-tree .sidebar-tree-item::before,
.codex .sidebar-tree .sidebar-tree-item::before {
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  opacity: 1;
  height: 1px !important;
  width: 0.75rem !important;
  top: 50%;
  left: -1rem;
}

[class*="codex-"] .sidebar-tree .sidebar-tree-item:not(:last-child)::after,
.codex .sidebar-tree .sidebar-tree-item:not(:last-child)::after {
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  width: 1px !important;
  left: -1rem;
  top: calc(-0.25rem - 1px);
  bottom: calc(-0.25rem - 1px);
}

[class*="codex-"] .sidebar-tree .sidebar-tree-item:last-child::after,
.codex .sidebar-tree .sidebar-tree-item:last-child::after {
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  width: 1px !important;
  left: -1rem;
  top: calc(-0.25rem - 1px);
  height: calc(50% + 0.25rem + 1px);
}

[class*="codex-"] .sidebar-tree .sidebar-section::before,
.codex .sidebar-tree .sidebar-section::before {
  content: '';
  position: absolute;
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  opacity: 1;
  height: 1px !important;
  width: calc(0.75rem + 1px) !important;
  top: 50%;
  left: calc(-1rem - 1px);
}

[class*="codex-"] .sidebar-tree .sidebar-section:not(:last-child)::after,
.codex .sidebar-tree .sidebar-section:not(:last-child)::after {
  content: '';
  position: absolute;
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  width: 1px !important;
  left: calc(-1rem - 1px);
  top: calc(-0.25rem - 1px);
  bottom: calc(-0.25rem - 1px);
}

[class*="codex-"] .sidebar-tree .sidebar-section:last-child::after,
.codex .sidebar-tree .sidebar-section:last-child::after {
  content: '';
  position: absolute;
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  width: 1px !important;
  left: calc(-1rem - 1px);
  top: calc(-0.25rem - 1px);
  height: calc(50% + 0.25rem + 1px);
}

[class*="codex-"] .sidebar-tree .sidebar-section,
.codex .sidebar-tree .sidebar-section {
  position: relative;
  margin: 0.25rem 0;
  padding: 0;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 2%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  transition: background 0.15s ease, border-color 0.15s ease;
}

[class*="codex-"] .sidebar-tree .sidebar-section:has(.sidebar-details[open]),
.codex .sidebar-tree .sidebar-section:has(.sidebar-details[open]) {
  padding-bottom: 0.375rem;
}

/* Root folder children - reduced indentation */
[class*="codex-"] .sidebar-tree-nav > .sidebar-tree > .sidebar-section > .sidebar-details > .sidebar-tree,
.codex .sidebar-tree-nav > .sidebar-tree > .sidebar-section > .sidebar-details > .sidebar-tree {
  padding-left: 0.875rem;
}

[class*="codex-"] .sidebar-tree-nav > .sidebar-tree > .sidebar-section > .sidebar-details > .sidebar-tree > .sidebar-tree-item:not(:last-child)::before,
[class*="codex-"] .sidebar-tree-nav > .sidebar-tree > .sidebar-section > .sidebar-details > .sidebar-tree > .sidebar-section:not(:last-child)::before,
.codex .sidebar-tree-nav > .sidebar-tree > .sidebar-section > .sidebar-details > .sidebar-tree > .sidebar-tree-item:not(:last-child)::before,
.codex .sidebar-tree-nav > .sidebar-tree > .sidebar-section > .sidebar-details > .sidebar-tree > .sidebar-section:not(:last-child)::before {
  display: none;
}

[class*="codex-"] .sidebar-tree .sidebar-section:hover:not(:has(.sidebar-section:hover)):not(:has(.sidebar-link:hover)),
.codex .sidebar-tree .sidebar-section:hover:not(:has(.sidebar-section:hover)):not(:has(.sidebar-link:hover)) {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

[class*="codex-"] .sidebar-tree .sidebar-tree .sidebar-section,
.codex .sidebar-tree .sidebar-tree .sidebar-section {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border-color: color-mix(in srgb, var(--primary) 12%, transparent);
}

[class*="codex-"] .sidebar-tree .sidebar-tree .sidebar-tree .sidebar-section,
.codex .sidebar-tree .sidebar-tree .sidebar-tree .sidebar-section {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border-color: color-mix(in srgb, var(--primary) 14%, transparent);
}

[class*="codex-"] .sidebar-tree .sidebar-details .sidebar-summary,
[class*="codex-"] .sidebar-tree-items .sidebar-details .sidebar-summary,
.codex .sidebar-tree .sidebar-details .sidebar-summary,
.codex .sidebar-tree-items .sidebar-details .sidebar-summary {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem !important;
  gap: 0.5rem;
}

[class*="codex-"] .sidebar-tree .sidebar-details .sidebar-summary:hover,
[class*="codex-"] .sidebar-tree-items .sidebar-details .sidebar-summary:hover,
.codex .sidebar-tree .sidebar-details .sidebar-summary:hover,
.codex .sidebar-tree-items .sidebar-details .sidebar-summary:hover {
  color: var(--primary);
}

[class*="codex-"] .sidebar-tree .sidebar-details[open] > .sidebar-summary,
[class*="codex-"] .sidebar-tree-items .sidebar-details[open] > .sidebar-summary,
.codex .sidebar-tree .sidebar-details[open] > .sidebar-summary,
.codex .sidebar-tree-items .sidebar-details[open] > .sidebar-summary {
  color: var(--foreground);
}

[class*="codex-"] .sidebar-tree .sidebar-tree,
.codex .sidebar-tree .sidebar-tree {
  padding-left: 1.5rem;
  margin-left: 0;
}

[class*="codex-"] .sidebar-section .sidebar-tree .sidebar-section .sidebar-tree .sidebar-tree-item::before,
[class*="codex-"] .sidebar-section .sidebar-tree .sidebar-section .sidebar-tree .sidebar-tree-item::after,
.codex .sidebar-section .sidebar-tree .sidebar-section .sidebar-tree .sidebar-tree-item::before,
.codex .sidebar-section .sidebar-tree .sidebar-section .sidebar-tree .sidebar-tree-item::after {
  display: none;
}

[class*="codex-"] .sidebar-section .sidebar-tree .sidebar-section .sidebar-tree .sidebar-section::before,
[class*="codex-"] .sidebar-section .sidebar-tree .sidebar-section .sidebar-tree .sidebar-section::after,
.codex .sidebar-section .sidebar-tree .sidebar-section .sidebar-tree .sidebar-section::before,
.codex .sidebar-section .sidebar-tree .sidebar-section .sidebar-tree .sidebar-section::after {
  display: none;
}

[class*="codex-"] .sidebar-tree .sidebar-link,
.codex .sidebar-tree .sidebar-link {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem !important;
  margin: 0.125rem 0;
  border-left: none !important;
}

[class*="codex-"] .sidebar-link,
.codex .sidebar-link {
  padding: 0.5rem 0.75rem;
  border-left: 3px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--primary) 2%, transparent);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

[class*="codex-"] .sidebar-link:hover,
.codex .sidebar-link:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-left-color: color-mix(in srgb, var(--primary) 60%, transparent);
}

[class*="codex-"] .sidebar-link.active,
.codex .sidebar-link.active {
  color: var(--primary);
  font-weight: 600;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-left-color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
}
''';