@instincthub/react-ui 0.1.36 → 0.1.38

package/dist/src/assets/css/ui/content-viewer.css

@@ -51,85 +51,182 @@
   color: var(--DarkCyan);
 }
 
-/* Content Viewer */
+/* Content Viewer — Medium/Substack-quality reading experience */
 .ihub-content-viewer {
   background-color: var(--White);
-  line-height: 1.6;
-  font-size: 1rem;
+  line-height: 1.75;
+  font-size: 1.125rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
   hyphens: auto;
+  color: var(--Gunmetal);
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1.5rem 1rem;
+}
+
+.ihub-content-viewer > * + * {
+  margin-top: 1.25rem;
+}
+
+.ihub-content-viewer p {
+  margin: 0;
+}
+
+.ihub-content-viewer p + p {
+  margin-top: 1.25rem;
 }
 
 /* Typography */
 .ihub-content-viewer h1 {
-  font-size: 2.5rem;
-  margin-top: 1.5rem;
+  font-size: 2.25rem;
+  margin-top: 2.5rem;
   margin-bottom: 1rem;
   font-weight: 700;
   line-height: 1.2;
-  font-family: var(--Montserat);
+  font-family: var(--Nunito, -apple-system, sans-serif);
   color: var(--Gunmetal);
+  letter-spacing: -0.02em;
 }
 
 .ihub-content-viewer h2 {
-  font-size: 2rem;
-  margin-top: 1.5rem;
+  font-size: 1.75rem;
+  margin-top: 2rem;
   margin-bottom: 0.75rem;
-  font-weight: 600;
+  font-weight: 700;
   line-height: 1.3;
-  font-family: var(--Montserat);
+  font-family: var(--Nunito, -apple-system, sans-serif);
   color: var(--Gunmetal);
+  letter-spacing: -0.01em;
 }
 
 .ihub-content-viewer h3 {
-  font-size: 1.5rem;
-  margin-top: 1.25rem;
+  font-size: 1.375rem;
+  margin-top: 1.75rem;
   margin-bottom: 0.5rem;
   font-weight: 600;
   line-height: 1.4;
-  font-family: var(--Montserat);
+  font-family: var(--Nunito, -apple-system, sans-serif);
   color: var(--Gunmetal);
 }
 
-.ihub-content-viewer strong {
+.ihub-content-viewer h4 {
+  font-size: 1.125rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
   font-weight: 600;
+  line-height: 1.4;
+  font-family: var(--Nunito, -apple-system, sans-serif);
+  color: var(--Gunmetal);
+}
+
+.ihub-content-viewer strong {
+  font-weight: 700;
 }
 
 .ihub-content-viewer em {
   font-style: italic;
 }
 
+.ihub-content-viewer u {
+  text-underline-offset: 3px;
+  text-decoration-color: var(--DarkCyan, #0891b2);
+}
+
+.ihub-content-viewer s {
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+
 /* Links */
 .ihub-content-viewer a {
   color: var(--DarkCyan);
-  text-decoration: none;
-  transition: color 0.2s ease;
-  font-family: var(--Montserat);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
 }
 
 .ihub-content-viewer a:hover {
-  color: var(--ViridianGreen);
-  text-decoration: underline;
-  opacity: 0.8;
+  color: var(--DarkCyan);
+  text-decoration-thickness: 2px;
+  opacity: 1;
 }
 
 /* Lists */
-.ihub-content-viewer ul,
+.ihub-content-viewer ul:not([data-type="taskList"]),
 .ihub-content-viewer ol {
-  margin: 1rem 0;
-  padding-left: 2rem;
+  margin: 1.25rem 0;
+  padding-left: 1.75rem;
+}
+
+.ihub-content-viewer ul:not([data-type="taskList"]) > li {
+  list-style-type: disc;
+  display: list-item;
+}
+
+.ihub-content-viewer ol > li {
+  list-style-type: decimal;
+  display: list-item;
+  counter-increment: none;
+}
+
+.ihub-content-viewer ol {
+  counter-reset: none;
 }
 
 .ihub-content-viewer li {
   margin-bottom: 0.5rem;
-  font-family: var(--Nunito);
-  font-style: normal;
+  font-family: inherit;
   font-weight: 400;
-  line-height: 28px;
+  line-height: 1.75;
   color: var(--Gunmetal);
 }
 
+.ihub-content-viewer li p {
+  margin: 0;
+}
+
+.ihub-content-viewer li::marker {
+  color: var(--Gunmetal);
+}
+
+/* Override fancy list-styles.css ::before markers — use clean native markers */
+.ihub-content-viewer ul:not([data-type="taskList"]) > li::before {
+  content: none !important;
+  display: none !important;
+}
+
+.ihub-content-viewer ul:not([data-type="taskList"]) > li {
+  padding-left: 0 !important;
+  position: static !important;
+}
+
+.ihub-content-viewer ol > li::before {
+  content: none !important;
+  display: none !important;
+}
+
+.ihub-content-viewer ol > li {
+  padding-left: 0 !important;
+  position: static !important;
+}
+
+/* Nested lists */
+.ihub-content-viewer li > ul,
+.ihub-content-viewer li > ol {
+  margin: 0.375rem 0;
+}
+
+.ihub-content-viewer ul ul > li {
+  list-style-type: circle;
+}
+
+.ihub-content-viewer ul ul ul > li {
+  list-style-type: square;
+}
+
 /* Task Lists */
 .ihub-content-viewer ul[data-type="taskList"] {
   list-style-type: none;
@@ -196,43 +293,85 @@
 .ihub-content-viewer img {
   max-width: 100%;
   height: auto;
-  border-radius: 0.25rem;
-  margin: 1rem 0;
+  border-radius: 0.375rem;
+  margin: 1.5rem 0;
+}
+
+/* Image with caption (from IHubTextEditor) */
+.ihub-content-viewer figure.ihub-te-image-block {
+  margin: 2rem 0;
+  text-align: center;
+}
+
+.ihub-content-viewer figure.ihub-te-image-block img {
+  margin: 0;
+}
+
+.ihub-content-viewer figure.ihub-te-image-block figcaption,
+.ihub-content-viewer figcaption {
+  text-align: center;
+  font-size: 0.875rem;
+  color: #6c757d;
+  margin-top: 0.5rem;
+  font-style: italic;
+  font-family: var(--Nunito, sans-serif);
 }
 
 /* Code */
 .ihub-content-viewer code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 1rem;
-  background-color: var(--Gray);
-  padding: 0.2em 0.4em;
+  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.9em;
+  background-color: #f1f3f5;
+  padding: 0.15em 0.4em;
   border-radius: 0.25rem;
 }
 
 .ihub-content-viewer pre {
-  background-color: var(--Gunmetal);
-  color: var(--White);
-  padding: 1rem;
-  border-radius: 0.25rem;
+  background-color: #1e1e2e;
+  color: #cdd6f4;
+  padding: 1.25rem 1.5rem;
+  border-radius: 0.5rem;
   overflow-x: auto;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 1rem;
-  margin: 1rem 0;
+  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  margin: 1.5rem 0;
 }
 
 .ihub-content-viewer pre code {
   background-color: transparent;
   padding: 0;
   color: inherit;
+  font-size: inherit;
 }
 
 /* Blockquote */
 .ihub-content-viewer blockquote {
-  border-left: 4px solid var(--LavenderGray);
-  padding-left: 1rem;
-  margin-left: 0;
+  border-left: 3px solid var(--DarkCyan, #0891b2);
+  padding-left: 1.25rem;
+  margin: 1.5rem 0;
   margin-right: 0;
   font-style: italic;
+  color: #6c757d;
+}
+
+.ihub-content-viewer blockquote p {
+  margin: 0;
+}
+
+/* Pull Quote (from IHubTextEditor) */
+.ihub-content-viewer blockquote[data-type="pull-quote"],
+.ihub-content-viewer .ihub-te-pull-quote {
+  border-left: none;
+  border-top: 2px solid var(--Gunmetal);
+  border-bottom: 2px solid var(--Gunmetal);
+  text-align: center;
+  padding: 1.5rem 2rem;
+  margin: 2.5rem 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.5;
+  font-style: italic;
   color: var(--Gunmetal);
 }
 
@@ -240,41 +379,59 @@
 .ihub-content-viewer table {
   border-collapse: collapse;
   width: 100%;
-  margin: 1rem 0;
-  font-family: var(--Nunito);
-  margin: 25px 0;
+  margin: 1.5rem 0;
+  font-family: var(--Nunito, sans-serif);
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 .ihub-content-viewer table th,
 .ihub-content-viewer table td {
   border: var(--borderDefault);
-  padding: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  vertical-align: top;
 }
 
 .ihub-content-viewer table th {
-  background-color: var(--LavenderGray);
+  background-color: var(--opacityBackground, #f8f9fa);
   font-weight: 600;
-  text-align: left;
   color: var(--Gunmetal);
 }
 
-.ihub-content-viewer table tr:nth-child(even) {
-  background-color: var(--Gray);
-}
-
 /* Horizontal Rule */
 .ihub-content-viewer hr {
-  border: 0.5px solid rgba(44, 51, 58, 0.5);
-  margin: 40px 0;
+  border: none;
+  border-top: 2px solid #e2e8f0;
+  margin: 2.5rem 0;
 }
 
 /* Highlight */
 .ihub-content-viewer mark {
-  background-color: var(--Corn);
-  padding: 0.1em 0.4em;
-  border-radius: 0.2em;
+  background-color: #fef08a;
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+}
+
+/* YouTube / Embeds */
+.ihub-content-viewer div[data-youtube-video] {
+  margin: 1.5rem 0;
+}
+
+.ihub-content-viewer div[data-youtube-video] iframe {
+  border-radius: 0.5rem;
+  max-width: 100%;
+}
+
+.ihub-content-viewer .ihub-te-embed-wrapper {
+  margin: 1.5rem 0;
+}
+
+.ihub-content-viewer .ihub-te-embed-wrapper iframe {
+  border-radius: 0.5rem;
+  width: 100%;
+  aspect-ratio: 16/9;
+  border: none;
 }
 
 /* Notification */
@@ -363,6 +520,64 @@
   }
 }
 
+/* Dark Mode overrides for content viewer */
+.DarkMode .ihub-content-viewer code {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.DarkMode .ihub-content-viewer mark {
+  background-color: #854d0e;
+  color: #fef08a;
+}
+
+.DarkMode .ihub-content-viewer blockquote {
+  color: #94a3b8;
+}
+
+.DarkMode .ihub-content-viewer hr {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.DarkMode .ihub-content-viewer figcaption,
+.DarkMode .ihub-content-viewer figure.ihub-te-image-block figcaption {
+  color: #94a3b8;
+}
+
+/* Responsive content viewer */
+@media (max-width: 767px) {
+  .ihub-content-viewer {
+    font-size: 1rem;
+    padding: 1rem 0.5rem;
+  }
+
+  .ihub-content-viewer h1 {
+    font-size: 1.75rem;
+  }
+
+  .ihub-content-viewer h2 {
+    font-size: 1.5rem;
+  }
+
+  .ihub-content-viewer h3 {
+    font-size: 1.25rem;
+  }
+
+  .ihub-content-viewer .ihub-te-pull-quote,
+  .ihub-content-viewer blockquote[data-type="pull-quote"] {
+    font-size: 1.25rem;
+    padding: 1rem;
+  }
+
+  .ihub-content-viewer table {
+    font-size: 0.875rem;
+  }
+
+  .ihub-content-viewer table th,
+  .ihub-content-viewer table td {
+    padding: 0.375rem 0.5rem;
+  }
+}
+
 /* Print styles */
 @media print {
   .ihub-content-toolbar {