jamdesk 1.0.0

package/vendored/themes/nebula/variables.css

@@ -0,0 +1,282 @@
+/**
+ * Nebula Theme - CSS Variables
+ * Airy and relaxed with subtle depth, ideal for narrative documentation
+ */
+
+:root {
+  /* Border radius - minimal/sharp style */
+  --radius-sm: 0.125rem;   /* 2px */
+  --radius-md: 0.1875rem;  /* 3px */
+  --radius-lg: 0.25rem;    /* 4px */
+  --radius-xl: 0.375rem;   /* 6px */
+  --radius-2xl: 0.5rem;    /* 8px */
+  --radius-full: 9999px;
+
+  /* Light theme colors - warm cream background */
+  --color-bg-primary: #FEFCF9;
+  --color-bg-secondary: #FAF8F5;
+  --color-bg-tertiary: #F5F3F0;
+  --color-bg-hover: #EDEBE8;
+  
+  --color-border: #E8E6E3;
+  --color-border-hover: #D8D6D3;
+  --border-width: 0.5px;
+  
+  --color-text-primary: #171717;
+  --color-text-secondary: #525252;
+  --color-text-tertiary: #737373;
+  --color-text-muted: #a3a3a3;
+  --color-marker: #a3a3a3;
+  
+  /* Orange accent */
+  --color-accent: #f97316;
+  --color-accent-hover: #ea580c;
+  --color-accent-light: #fff7ed;
+  --color-accent-text: #c2410c;
+  
+  /* Code block colors - light */
+  --color-code-bg: #FAF8F5;
+  --color-code-border: #E8E6E3;
+  --color-code-text: #171717;
+  
+  /* Note/callout colors - light */
+  --color-info-bg: #fff7ed;
+  --color-info-border: #fed7aa;
+  --color-info-text: #9a3412;
+  
+  --color-warning-bg: #fffbeb;
+  --color-warning-border: #fde68a;
+  --color-warning-text: #92400e;
+  
+  --color-error-bg: #fef2f2;
+  --color-error-border: #fecaca;
+  --color-error-text: #991b1b;
+  
+  --color-success-bg: #f0fdf4;
+  --color-success-border: #bbf7d0;
+  --color-success-text: #166534;
+
+  /* Layout constraints */
+  --layout-max-width: 1472px;  /* Match Jam theme width */
+
+  /* Code panel header font - use theme's monospace font */
+  --code-panel-header-font: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+/* ===== NEBULA THEME TYPOGRAPHY ===== */
+
+.prose {
+  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.prose code:not([class*="language-"]) {
+  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.dark {
+  /* Dark theme colors - warm dark background */
+  --color-bg-primary: #151413;
+  --color-bg-secondary: #1C1B1A;
+  --color-bg-tertiary: #252423;
+  --color-bg-hover: #3A3938;
+  
+  --color-border: #2A2928;
+  --color-border-hover: #3A3938;
+  --border-width: 0.5px;
+  
+  --color-text-primary: #fafafa;
+  --color-text-secondary: #d4d4d4;
+  --color-text-tertiary: #a3a3a3;
+  --color-text-muted: #737373;
+  --color-marker: #737373;
+  
+  /* Orange accent */
+  --color-accent: #f97316;
+  --color-accent-hover: #fb923c;
+  --color-accent-light: rgba(249, 115, 22, 0.15);
+  --color-accent-text: #fdba74;
+  
+  /* Code block colors - dark */
+  --color-code-bg: #1C1B1A;
+  --color-code-border: #2A2928;
+  --color-code-text: #e5e5e5;
+  
+  /* Note/callout colors - dark */
+  --color-info-bg: rgba(249, 115, 22, 0.1);
+  --color-info-border: rgba(249, 115, 22, 0.3);
+  --color-info-text: #fdba74;
+  
+  --color-warning-bg: rgba(251, 191, 36, 0.1);
+  --color-warning-border: rgba(251, 191, 36, 0.3);
+  --color-warning-text: #fde68a;
+  
+  --color-error-bg: rgba(239, 68, 68, 0.1);
+  --color-error-border: rgba(239, 68, 68, 0.3);
+  --color-error-text: #fca5a5;
+  
+  --color-success-bg: rgba(34, 197, 94, 0.1);
+  --color-success-border: rgba(34, 197, 94, 0.3);
+  --color-success-text: #86efac;
+}
+
+/* ===== NEBULA MOBILE RESPONSIVE STYLES ===== */
+
+/* Phase 1: Responsive Typography (more aggressive for monospace) */
+@media (max-width: 639px) {
+  :root {
+    --prose-h1-size: 22px;
+    --prose-h2-size: 18px;
+    --prose-h3-size: 16px;
+    --prose-h4-size: 14px;
+  }
+}
+
+@media (min-width: 640px) and (max-width: 1023px) {
+  :root {
+    --prose-h1-size: 26px;
+    --prose-h2-size: 20px;
+  }
+}
+
+/* Phase 2: Touch Targets for Sidebar */
+@media (max-width: 1023px) {
+  :root {
+    --sidebar-item-spacing: 6px;
+  }
+
+  .sidebar-scroll ul li a {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+    min-height: 44px;
+  }
+
+  .sidebar-scroll .nav-group-l1 {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+    min-height: 44px;
+  }
+}
+
+/* Phase 3: API Parameter Overflow */
+@media (max-width: 639px) {
+  .param-name {
+    font-size: 13px;
+    word-break: break-word;
+  }
+
+  .param-type-badge,
+  .param-required-badge {
+    font-size: 10px;
+    padding: 1px 6px;
+  }
+
+  .pl-4.border-l-2 {
+    padding-left: 12px !important;
+  }
+}
+
+/* Phase 4: Mobile Safe Area */
+@media (max-width: 1023px) {
+  .sidebar-scroll {
+    padding-top: env(safe-area-inset-top, 0);
+  }
+}
+
+/* Sidebar spacing: 16px between anchors and tabs */
+body[data-theme="nebula"] .sidebar-scroll nav > div:first-child + div {
+  margin-top: 1rem;
+}
+
+/* Hide sidebar divider */
+body[data-theme="nebula"] .sidebar-scroll nav > .border-t {
+  display: none;
+}
+
+/* Remove left sidebar border */
+body[data-theme="nebula"] .sidebar-scroll {
+  border-right: none;
+}
+
+/* Hide scrollbar on center content column for cleaner look */
+body[data-theme="nebula"] .content-scroll {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+body[data-theme="nebula"] .content-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+/* Sidebar scroll container positioning for header-logo layout */
+/* The sidebar-scroll div needs constrained height to scroll independently */
+/* When tabs exist at top, sidebar needs more top offset (header 57px + tabs 57px = 114px) */
+@media (min-width: 1024px) {
+  body[data-theme="nebula"] .sidebar-scroll {
+    position: sticky !important;
+    flex: 0 0 auto !important;
+  }
+  body[data-theme="nebula"] .sidebar-scroll[data-has-tabs="true"] {
+    top: 114px !important;
+    max-height: calc(100vh - 114px) !important;
+  }
+  body[data-theme="nebula"] .sidebar-scroll[data-has-tabs="false"] {
+    top: 57px !important;
+    max-height: calc(100vh - 57px) !important;
+  }
+}
+
+/* Align sidebar tabs with breadcrumbs/TOC vertical position */
+body[data-theme="nebula"] .sidebar-tabs {
+  padding-top: calc(1.5rem - 4px);
+}
+@media (min-width: 640px) {
+  body[data-theme="nebula"] .sidebar-tabs {
+    padding-top: calc(2.5rem - 4px);
+  }
+}
+
+/* Add bottom border to header - extends edge to edge */
+/* Allow overflow on layout wrapper so border can extend beyond max-width */
+body[data-theme="nebula"] > div {
+  overflow: visible !important;
+}
+
+body[data-theme="nebula"] > div > header {
+  position: relative;
+}
+
+body[data-theme="nebula"] > div > header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  height: 0.5px;
+  background-color: var(--color-border);
+}
+
+/* Add right padding to code panels sidebar on API pages */
+body[data-theme="nebula"] .code-panels-sidebar {
+  padding-right: 1rem;
+}
+
+/* Move hamburger menu left on mobile */
+@media (max-width: 1023px) {
+  body[data-theme="nebula"] header > div {
+    margin-left: 0 !important;
+    padding-left: 0.5rem;
+  }
+}
+
+/* Add margin to theme toggle in mobile sidebar menu */
+/* Target the inner flex container with logo and theme toggle */
+body[data-theme="nebula"] .sidebar-scroll > div:first-child > div:first-child {
+  gap: 0.75rem;
+}
+
+/* Add top padding to level 0 group names */
+body[data-theme="nebula"] .sidebar-scroll .sidebar-nav-groups > div.ml-6 {
+  padding-top: 16px;
+}
+