@peaske7/readit 0.1.4 → 0.1.5

package/src/index.css

@@ -0,0 +1,823 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Font family system */
+.font-serif {
+  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+}
+
+.font-sans {
+  font-family:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+}
+
+/* Selection highlight */
+::selection {
+  background: var(--selection-bg);
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* ========================================
+   Theme Variables
+   ======================================== */
+
+:root {
+  /* Page / chrome */
+  --page-bg: #ffffff;
+  --selection-bg: rgba(59, 130, 246, 0.3);
+
+  /* Scrollbar */
+  --scrollbar-track: #f4f4f5;
+  --scrollbar-thumb: #cccccc;
+  --scrollbar-thumb-hover: #aaaaaa;
+
+  /* Prose */
+  --prose-body: #3f3f46;
+  --prose-headings: #18181b;
+  --prose-links: #2563eb;
+  --prose-links-hover: #1d4ed8;
+  --prose-bold: #18181b;
+  --prose-code-bg: #f4f4f5;
+  --prose-border: #e4e4e7;
+  --prose-table-header-bg: #fafafa;
+  --prose-table-even-bg: #fafafa;
+  --prose-blockquote: #71717a;
+  --prose-summary-marker: #a1a1aa;
+
+  /* TOC */
+  --toc-text: rgba(26, 26, 26, 0.5);
+  --toc-text-l2: rgba(26, 26, 26, 0.45);
+  --toc-text-l3: rgba(26, 26, 26, 0.4);
+  --toc-text-deep: rgba(26, 26, 26, 0.35);
+  --toc-hover: rgba(26, 26, 26, 0.75);
+  --toc-active: rgba(26, 26, 26, 0.85);
+
+  /* Mermaid */
+  --mermaid-grid: #e4e4e7;
+
+  /* Comment highlight colors */
+  /* Amber (default) - warm, paper-like */
+  --comment-color-0-bg: rgba(245, 222, 160, 0.5);
+  --comment-color-0-bg-focused: rgba(228, 195, 110, 0.65);
+  --comment-color-0-border: #c9a84a;
+
+  /* Blue - muted slate-blue */
+  --comment-color-1-bg: rgba(168, 196, 228, 0.5);
+  --comment-color-1-bg-focused: rgba(130, 168, 210, 0.65);
+  --comment-color-1-border: #5b7fa8;
+
+  /* Green - sage */
+  --comment-color-2-bg: rgba(170, 210, 170, 0.5);
+  --comment-color-2-bg-focused: rgba(130, 185, 135, 0.65);
+  --comment-color-2-border: #5a9a62;
+
+  /* Rose - dusty rose */
+  --comment-color-3-bg: rgba(225, 180, 185, 0.5);
+  --comment-color-3-bg-focused: rgba(205, 145, 155, 0.65);
+  --comment-color-3-border: #b86b78;
+
+  /* Pending - neutral gray */
+  --pending-bg: rgba(180, 180, 180, 0.3);
+}
+
+.dark {
+  --page-bg: #18181b;
+  --selection-bg: rgba(96, 165, 250, 0.35);
+
+  --scrollbar-track: #27272a;
+  --scrollbar-thumb: #52525b;
+  --scrollbar-thumb-hover: #71717a;
+
+  --prose-body: #d4d4d8;
+  --prose-headings: #fafafa;
+  --prose-links: #60a5fa;
+  --prose-links-hover: #93c5fd;
+  --prose-bold: #fafafa;
+  --prose-code-bg: #27272a;
+  --prose-border: #3f3f46;
+  --prose-table-header-bg: #27272a;
+  --prose-table-even-bg: #1f1f23;
+  --prose-blockquote: #a1a1aa;
+  --prose-summary-marker: #71717a;
+
+  --toc-text: rgba(228, 228, 231, 0.5);
+  --toc-text-l2: rgba(228, 228, 231, 0.45);
+  --toc-text-l3: rgba(228, 228, 231, 0.4);
+  --toc-text-deep: rgba(228, 228, 231, 0.35);
+  --toc-hover: rgba(228, 228, 231, 0.75);
+  --toc-active: rgba(228, 228, 231, 0.85);
+
+  --mermaid-grid: #3f3f46;
+
+  --comment-color-0-bg: rgba(202, 168, 74, 0.35);
+  --comment-color-0-bg-focused: rgba(202, 168, 74, 0.55);
+  --comment-color-0-border: #d4b548;
+
+  --comment-color-1-bg: rgba(91, 127, 168, 0.35);
+  --comment-color-1-bg-focused: rgba(91, 127, 168, 0.55);
+  --comment-color-1-border: #7da3c8;
+
+  --comment-color-2-bg: rgba(90, 154, 98, 0.35);
+  --comment-color-2-bg-focused: rgba(90, 154, 98, 0.55);
+  --comment-color-2-border: #7ab882;
+
+  --comment-color-3-bg: rgba(184, 107, 120, 0.35);
+  --comment-color-3-bg-focused: rgba(184, 107, 120, 0.55);
+  --comment-color-3-border: #d08a98;
+
+  --pending-bg: rgba(100, 100, 100, 0.3);
+}
+
+/* ========================================
+   Comment Highlight Styles
+   ======================================== */
+
+/* Base highlight - subtle by default */
+mark[data-comment-id] {
+  background-color: var(--highlight-bg, var(--comment-color-0-bg));
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    opacity 150ms ease;
+}
+
+/* Color variants based on data-color-index */
+mark[data-comment-id][data-color-index="0"] {
+  --highlight-bg: var(--comment-color-0-bg);
+  --highlight-bg-focused: var(--comment-color-0-bg-focused);
+  --highlight-border: var(--comment-color-0-border);
+}
+
+mark[data-comment-id][data-color-index="1"] {
+  --highlight-bg: var(--comment-color-1-bg);
+  --highlight-bg-focused: var(--comment-color-1-bg-focused);
+  --highlight-border: var(--comment-color-1-border);
+}
+
+mark[data-comment-id][data-color-index="2"] {
+  --highlight-bg: var(--comment-color-2-bg);
+  --highlight-bg-focused: var(--comment-color-2-bg-focused);
+  --highlight-border: var(--comment-color-2-border);
+}
+
+mark[data-comment-id][data-color-index="3"] {
+  --highlight-bg: var(--comment-color-3-bg);
+  --highlight-bg-focused: var(--comment-color-3-bg-focused);
+  --highlight-border: var(--comment-color-3-border);
+}
+
+/* Focused state - this highlight is hovered */
+mark[data-comment-id][data-focused="true"] {
+  background-color: var(
+    --highlight-bg-focused,
+    var(--comment-color-0-bg-focused)
+  );
+}
+
+/* Hover on highlight itself */
+mark[data-comment-id]:hover {
+  background-color: var(
+    --highlight-bg-focused,
+    var(--comment-color-0-bg-focused)
+  );
+}
+
+/* ========================================
+   Bracket Mode for Long Selections
+   ======================================== */
+
+/* Container for bracket-mode highlights */
+mark[data-comment-id][data-bracket-mode="true"] {
+  background-color: transparent;
+  position: relative;
+}
+
+/* Only show background on first segment in bracket mode */
+mark[data-comment-id][data-bracket-start="true"] {
+  background-color: var(--highlight-bg, var(--comment-color-0-bg));
+  border-radius: 2px 2px 0 0;
+}
+
+/* Focused bracket mode shows full highlight */
+mark[data-comment-id][data-bracket-mode="true"][data-focused="true"],
+mark[data-comment-id][data-bracket-mode="true"]:hover {
+  background-color: var(
+    --highlight-bg-focused,
+    var(--comment-color-0-bg-focused)
+  );
+}
+
+/* Gutter line for bracket mode */
+.bracket-gutter-line {
+  position: absolute;
+  left: -20px;
+  width: 2px;
+  background-color: var(--bracket-color, var(--comment-color-0-border));
+  border-radius: 1px;
+  opacity: 0.6;
+  transition: opacity 150ms ease;
+  pointer-events: none;
+}
+
+.bracket-gutter-line[data-focused="true"],
+.bracket-gutter-line:hover {
+  opacity: 1;
+}
+
+/* Bracket markers */
+.bracket-marker {
+  position: absolute;
+  left: -24px;
+  font-family: monospace;
+  font-size: 10px;
+  color: var(--bracket-color, var(--comment-color-0-border));
+  opacity: 0.6;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+}
+
+.bracket-marker-start {
+  top: -2px;
+}
+
+.bracket-marker-end {
+  bottom: -2px;
+}
+
+.bracket-marker[data-focused="true"] {
+  opacity: 1;
+}
+
+/* ========================================
+   Anchor Lines
+   ======================================== */
+
+.anchor-line {
+  fill: none;
+  stroke: var(--anchor-color, var(--comment-color-0-border));
+  stroke-width: 1.5;
+  opacity: 0;
+  transition: opacity 150ms ease;
+  pointer-events: none;
+}
+
+.anchor-line[data-visible="true"] {
+  opacity: 0.5;
+}
+
+.anchor-line-dot {
+  fill: var(--anchor-color, var(--comment-color-0-border));
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.anchor-line-dot[data-visible="true"] {
+  opacity: 0.7;
+}
+
+/* Pending selection highlight - neutral gray */
+mark[data-pending] {
+  background-color: var(--pending-bg);
+  cursor: text;
+}
+
+/* Ensure highlights are visible in all contexts including headings */
+.prose mark[data-pending],
+.prose h1 mark[data-pending],
+.prose h2 mark[data-pending],
+.prose h3 mark[data-pending],
+.prose h4 mark[data-pending],
+.prose h5 mark[data-pending],
+.prose h6 mark[data-pending] {
+  background-color: var(--pending-bg) !important;
+  display: inline !important;
+}
+
+/* Ensure comment highlights are visible inside headings (prose overrides) */
+.prose h1 mark[data-comment-id],
+.prose h2 mark[data-comment-id],
+.prose h3 mark[data-comment-id],
+.prose h4 mark[data-comment-id],
+.prose h5 mark[data-comment-id],
+.prose h6 mark[data-comment-id] {
+  background-color: var(--highlight-bg, var(--comment-color-0-bg)) !important;
+  display: inline !important;
+}
+
+/* Bracket mode in headings - override transparent background */
+.prose h1 mark[data-comment-id][data-bracket-mode="true"],
+.prose h2 mark[data-comment-id][data-bracket-mode="true"],
+.prose h3 mark[data-comment-id][data-bracket-mode="true"],
+.prose h4 mark[data-comment-id][data-bracket-mode="true"],
+.prose h5 mark[data-comment-id][data-bracket-mode="true"],
+.prose h6 mark[data-comment-id][data-bracket-mode="true"] {
+  background-color: var(--highlight-bg, var(--comment-color-0-bg)) !important;
+}
+
+/* Hover state for comment highlights in headings */
+.prose h1 mark[data-comment-id]:hover,
+.prose h2 mark[data-comment-id]:hover,
+.prose h3 mark[data-comment-id]:hover,
+.prose h4 mark[data-comment-id]:hover,
+.prose h5 mark[data-comment-id]:hover,
+.prose h6 mark[data-comment-id]:hover,
+.prose h1 mark[data-comment-id][data-focused="true"],
+.prose h2 mark[data-comment-id][data-focused="true"],
+.prose h3 mark[data-comment-id][data-focused="true"],
+.prose h4 mark[data-comment-id][data-focused="true"],
+.prose h5 mark[data-comment-id][data-focused="true"],
+.prose h6 mark[data-comment-id][data-focused="true"] {
+  background-color: var(
+    --highlight-bg-focused,
+    var(--comment-color-0-bg-focused)
+  ) !important;
+}
+
+/* Toast animation */
+[data-sonner-toast] {
+  animation: toast-in 0.2s ease-out;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Dropdown menu animation */
+.animate-in {
+  animation: menu-in 0.15s ease-out;
+}
+
+@keyframes menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Table of Contents - Whisper aesthetic */
+.toc {
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.toc-item {
+  display: block;
+  color: var(--toc-text);
+  text-decoration: none;
+  padding: 3px 0;
+  transition: color 0.2s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 180px;
+}
+
+/* Hierarchy via indentation + size */
+.toc-level-1 {
+  padding-left: 0;
+  font-size: 14px;
+}
+
+.toc-level-2 {
+  padding-left: 12px;
+  font-size: 13px;
+  color: var(--toc-text-l2);
+}
+
+.toc-level-3 {
+  padding-left: 24px;
+  font-size: 12px;
+  color: var(--toc-text-l3);
+}
+
+.toc-level-4,
+.toc-level-5,
+.toc-level-6 {
+  padding-left: 36px;
+  font-size: 11px;
+  color: var(--toc-text-deep);
+}
+
+/* Hover - slightly more visible */
+.toc-item:hover {
+  color: var(--toc-hover);
+}
+
+/* Active - clearly readable */
+.toc-active {
+  color: var(--toc-active);
+  font-weight: 500;
+}
+
+/* Toggle indicator for collapsible sections */
+.toc-toggle {
+  font-size: 10px;
+  vertical-align: middle;
+  transition: opacity 0.15s ease;
+}
+
+.toc-item:hover .toc-toggle {
+  opacity: 0.7;
+}
+
+/* ========================================
+   Prose Typography - Optimal Reading
+   ======================================== */
+
+.prose {
+  max-width: 65ch;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.75;
+  color: var(--prose-body);
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+/* Headings */
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  margin-top: 2em;
+  margin-bottom: 0.75em;
+  color: var(--prose-headings);
+}
+
+.prose h1 {
+  font-size: 2.25em;
+  margin-top: 0;
+}
+
+.prose h2 {
+  font-size: 1.5em;
+}
+
+.prose h3 {
+  font-size: 1.25em;
+}
+
+.prose h4 {
+  font-size: 1.125em;
+}
+
+/* Paragraphs and spacing */
+.prose p {
+  margin: 1.25em 0;
+}
+
+.prose > :first-child {
+  margin-top: 0;
+}
+
+.prose > :last-child {
+  margin-bottom: 0;
+}
+
+/* Lists */
+.prose ul,
+.prose ol {
+  padding-left: 1.5em;
+  margin: 1.25em 0;
+}
+
+.prose li {
+  margin: 0.5em 0;
+}
+
+.prose ul {
+  list-style-type: disc;
+}
+
+.prose ol {
+  list-style-type: decimal;
+}
+
+/* Nested lists */
+.prose li > ul,
+.prose li > ol {
+  margin: 0.5em 0;
+}
+
+/* Code */
+.prose code {
+  background: var(--prose-code-bg);
+  padding: 0.2em 0.4em;
+  border-radius: 0.25em;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  margin: 1.5em 0;
+}
+
+.prose pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 0.875em;
+  color: inherit;
+}
+
+/* Tables */
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5em 0;
+  font-size: 0.9em;
+}
+
+.prose th,
+.prose td {
+  border: 1px solid var(--prose-border);
+  padding: 0.75em 1em;
+  text-align: left;
+}
+
+.prose th {
+  background: var(--prose-table-header-bg);
+  font-weight: 600;
+}
+
+.prose tr:nth-child(even) {
+  background: var(--prose-table-even-bg);
+}
+
+/* Blockquotes */
+.prose blockquote {
+  border-left: 4px solid var(--prose-border);
+  padding-left: 1em;
+  margin: 1.5em 0;
+  color: var(--prose-blockquote);
+  font-style: italic;
+}
+
+.prose blockquote p {
+  margin: 0.5em 0;
+}
+
+/* Links */
+.prose a {
+  color: var(--prose-links);
+  text-decoration: underline;
+}
+
+.prose a:hover {
+  color: var(--prose-links-hover);
+}
+
+/* Horizontal rules */
+.prose hr {
+  border: none;
+  border-top: 1px solid var(--prose-border);
+  margin: 2em 0;
+}
+
+/* Task lists (checkboxes) */
+.prose input[type="checkbox"] {
+  margin-right: 0.5em;
+}
+
+/* Images */
+.prose img {
+  max-width: 100%;
+  height: auto;
+  margin: 1.5em 0;
+  border-radius: 0.5em;
+}
+
+/* Strong and emphasis */
+.prose strong {
+  font-weight: 600;
+  color: var(--prose-bold);
+}
+
+.prose em {
+  font-style: italic;
+}
+
+/* Fullscreen prose - left-aligned, full width */
+.prose-fullscreen {
+  max-width: none;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/* Prose font family variants */
+.prose.prose-serif,
+.prose.prose-serif h1,
+.prose.prose-serif h2,
+.prose.prose-serif h3,
+.prose.prose-serif h4,
+.prose.prose-serif h5,
+.prose.prose-serif h6 {
+  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+}
+
+.prose.prose-sans,
+.prose.prose-sans h1,
+.prose.prose-sans h2,
+.prose.prose-sans h3,
+.prose.prose-sans h4,
+.prose.prose-sans h5,
+.prose.prose-sans h6 {
+  font-family:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+}
+
+/* Collapsible details/summary */
+.prose details {
+  margin: 1.25em 0;
+  border: 1px solid var(--prose-border);
+  border-radius: 0.5em;
+  padding: 0 1em;
+}
+
+.prose summary {
+  cursor: pointer;
+  font-weight: 500;
+  padding: 0.75em 0;
+  list-style: none;
+}
+
+.prose summary::-webkit-details-marker {
+  display: none;
+}
+
+.prose summary::before {
+  content: "▸";
+  margin-right: 0.5em;
+  color: var(--prose-summary-marker);
+  transition: transform 0.15s ease;
+  display: inline-block;
+}
+
+.prose details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.prose details[open] summary {
+  border-bottom: 1px solid var(--prose-border);
+  margin-bottom: 0.75em;
+}
+
+.prose details > *:not(summary) {
+  margin-left: 0;
+}
+
+/* ========================================
+   Mermaid Diagram Styles
+   ======================================== */
+
+/* Container - break out of prose width for larger diagrams */
+.mermaid-container {
+  margin-left: -3rem;
+  margin-right: -3rem;
+  padding: 1rem 0;
+}
+
+.mermaid-container > svg {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Typography overrides - make text more readable */
+.mermaid-container text {
+  font-size: 14px !important;
+}
+
+.mermaid-container .section {
+  font-size: 13px !important;
+  font-weight: 500;
+}
+
+.mermaid-container .taskText {
+  font-size: 13px !important;
+}
+
+.mermaid-container .taskTextOutsideRight,
+.mermaid-container .taskTextOutsideLeft {
+  font-size: 12px !important;
+}
+
+.mermaid-container .titleText {
+  font-size: 18px !important;
+  font-weight: 600;
+}
+
+/* Flowchart specific */
+.mermaid-container .nodeLabel {
+  font-size: 14px !important;
+}
+
+.mermaid-container .edgeLabel {
+  font-size: 12px !important;
+}
+
+.mermaid-container .cluster-label {
+  font-size: 14px !important;
+  font-weight: 500;
+}
+
+/* Sequence diagram specific */
+.mermaid-container .actor {
+  font-size: 14px !important;
+}
+
+.mermaid-container .messageText {
+  font-size: 13px !important;
+}
+
+.mermaid-container .noteText {
+  font-size: 12px !important;
+}
+
+/* Grid lines - subtle */
+.mermaid-container .grid path {
+  stroke: var(--mermaid-grid) !important;
+  stroke-width: 1px;
+}
+
+/* Today line in Gantt - distinct */
+.mermaid-container .today {
+  stroke: #b86b78 !important;
+  stroke-width: 2px;
+}
+
+/* Improve stroke contrast */
+.mermaid-container path.path {
+  stroke-width: 1.5px;
+}
+
+/* Responsive breakout margins */
+@media (max-width: 768px) {
+  .mermaid-container {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .mermaid-container {
+    margin-left: -4rem;
+    margin-right: -4rem;
+  }
+}
+
+/* ========================================
+   Floating TOC Panel
+   ======================================== */
+
+.floating-toc-panel {
+  animation: floating-toc-in 0.2s ease-out;
+}
+
+@keyframes floating-toc-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}