kash-shell 0.3.17__py3-none-any.whl → 0.3.20__py3-none-any.whl

kash/web_gen/templates/components/toc_styles.css.jinja

@@ -0,0 +1,284 @@
+/* Table of Contents Styles */
+:root {
+  --toc-width: max(21vw, 15rem);
+  --toc-breakpoint: {{ toc_breakpoint | default(1200) }}px;
+}
+
+@media (min-width: 1536px) {
+  :root {
+    --toc-width: min(21vw, 30rem);
+  }
+}
+
+/* Desktop: Always use grid layout, adjust TOC column width */
+@media (min-width: {{ toc_breakpoint | default(1200) }}px) {
+  .content-with-toc {
+    display: grid;
+    grid-template-columns: calc(var(--toc-width) + 4rem) 1fr;
+    max-width: none;
+    min-height: 100vh;
+  }
+  
+  .content-with-toc.has-toc {
+    grid-template-columns: calc(var(--toc-width) + 4rem) 1fr;
+  }
+  
+  /* Content goes in the second column (right side) */
+  .content-with-toc .long-text {
+    max-width: 48rem;
+    margin-left: max(1rem, calc((100vw - 48rem) / 2 - var(--toc-width)));
+    margin-right: auto;
+    order: 2;
+    grid-column: 2;
+  }
+  
+  /* TOC goes in the first column (left side) */
+  .toc-container {
+    order: 1;
+    grid-column: 1;
+    align-self: start;
+    width: var(--toc-width);
+    position: sticky;
+    top: 2rem;
+    max-height: calc(100vh - 4rem);
+    overflow-y: auto;
+    padding: 0.5rem 0.7rem 1rem 1.2rem;
+    margin: 0 0 0 2rem;
+    border: 1px solid var(--color-border-hint);
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  .content-with-toc.has-toc .toc-container {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  
+  /* Hide mobile toggle on desktop */
+  .toc-toggle {
+    display: none !important;
+  }
+  
+  /* More minimal TOC scrollbar */
+  .toc-container::-webkit-scrollbar {
+    width: 2px; 
+  }
+  .toc-container::-webkit-scrollbar-track {
+    background: transparent; /* Invisible track */
+  }
+  .toc-container::-webkit-scrollbar-thumb {
+    background: var(--color-hint-gentle);
+    border-radius: 2px;
+    opacity: 0.1;
+  }
+  .toc-container::-webkit-scrollbar-thumb:hover {
+    opacity: 0.2;
+  }
+  .toc-container {
+    /* For Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-hint-gentle) transparent;
+  }
+}
+
+/* TOC Styling */
+.toc {  
+  font-family: var(--font-sans);
+  color: var(--color-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.toc-title {
+  font-size: var(--font-size-small);
+  font-weight: 550;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  padding-left: 0.3rem;
+  border-bottom: 1px solid var(--color-border-hint);
+  border-left: none !important; /* Override toc-link border */
+}
+
+.toc-list {
+  list-style: none;
+  margin: 0.5rem 0 0 0;
+  padding: 0;
+  font-size: var(--font-size-small);
+  line-height: 1.2;
+}
+
+.toc-list li {
+  margin: 0;
+}
+
+.toc-list li::before {
+  display: none; /* Remove custom bullet points */
+}
+
+.toc-link {
+  display: block;
+  color: var(--color-tertiary);
+  text-decoration: none;
+  padding-top: 0.2rem;
+  padding-bottom: 0.2rem;
+  transition: background 0.4s ease-in-out, all 0.15s ease-in-out;
+  border-left: 2px solid transparent;
+}
+
+.toc-link:hover {
+  color: var(--color-secondary);
+  background-color: var(--color-hover-bg);
+  text-decoration: none;
+}
+
+.toc-link.active {
+  color: var(--color-secondary);
+  border-left: 2px solid var(--color-primary);
+  background-color: var(--color-bg-selected);
+}
+
+/* Hanging indent and styles for each TOC heading */
+.toc-h1 {
+  padding-left: 1.3rem;
+  text-indent: -1em;
+  font-weight: 550;
+  letter-spacing: 0.007em;
+}
+.toc-h2 {
+  padding-left: 2.0rem;
+  text-indent: -1em;
+  font-weight: 550;
+  letter-spacing: 0.007em;
+}
+.toc-h3 {
+  padding-left: 2.7rem;
+  text-indent: -1em;
+  font-weight: 370;
+}
+.toc-h4 {
+  padding-left: 3.4rem;
+  text-indent: -1em;
+  font-weight: 370;
+}
+
+/* Prevent body scroll when TOC is open */
+body.toc-open {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  /* Prevent iOS bounce scrolling on body */
+  touch-action: none;
+  -webkit-overflow-scrolling: auto;
+}
+
+/* Mobile TOC Layout */
+@media (max-width: {{ toc_breakpoint | default(1200) - 1 }}px) {
+  /* TOC backdrop - semi-transparent overlay */
+  .toc-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 199; /* Below TOC container (200) but above everything else */
+    
+    /* Hidden by default */
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    
+    /* Smooth transition */
+    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  }
+  
+  /* Specific positioning and z-index for TOC toggle */
+  .toc-toggle {
+    left: 1rem;
+    z-index: 101;
+    opacity: 0; /* Hidden by default */
+    visibility: hidden; /* Start hidden for FOUC prevention on mobile */
+    transition: opacity 0.3s ease-in-out, 
+                visibility 0.3s ease-in-out,
+                background-color 0.4s ease-in-out,
+                color 0.4s ease-in-out;
+  }
+  
+  /* Show TOC toggle when user has scrolled past top */
+  .toc-toggle.show-toggle {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  /* Show backdrop when visible */
+  .toc-backdrop.visible {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    /* Prevent any scrolling or touch interaction on backdrop */
+    touch-action: none;
+    -webkit-overflow-scrolling: auto;
+    overflow: hidden;
+  }
+  
+  /* Mobile TOC state: always rendered but hidden by default */
+  .toc-container {
+    display: block !important; /* Override base rule and any JS inline styles */
+    position: fixed;
+    top: 4rem;
+    left: 1rem;
+    width: calc(100vw - 2rem);
+    max-height: calc(100vh - 5rem);
+    /* Keep background and darker text on mobile since it's primary UI */
+    color: var(--color-text);
+    background: var(--color-bg-alt-solid);
+    border: 1px solid var(--color-border-hint);
+    padding: 1rem 0.7rem;
+    z-index: 200;
+    
+    /* Ensure TOC itself is scrollable */
+    overflow-y: auto;
+    overflow-x: hidden; /* Prevent horizontal scroll */
+    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+    overscroll-behavior: contain; /* Prevent scroll chaining */
+    
+    /* Ensure touch scrolling works properly */
+    touch-action: pan-y;
+    
+    /* Initial hidden state for mobile FOUC and animation */
+    opacity: 0;
+    transform: translateY(-0.5rem);
+    visibility: hidden;
+    pointer-events: none; /* Prevent interaction when hidden */
+    
+    transition: opacity 0.3s ease-in-out, 
+                transform 0.3s ease-in-out, 
+                visibility 0.3s ease-in-out,
+                pointer-events 0.3s ease-in-out,
+                background-color 0.4s ease-in-out, 
+                border-color 0.4s ease-in-out, 
+                box-shadow 0.4s ease-in-out;
+  }
+  
+  /* Darker text on mobile */
+  .toc {
+    color: var(--color-secondary);
+  }
+  .toc-link {
+    color: var(--color-secondary);
+  }
+  .toc-link:hover {
+    color: var(--color-text);
+  }
+
+  .toc-link.active {
+    color: var(--color-text);
+  }
+    
+  .toc-container.mobile-visible {
+    /* Visible state */
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+    pointer-events: auto; /* Re-enable interaction */
+  }
+}