mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
@@ -0,0 +1,213 @@
|
||||
/**
|
||||
* typeset.css
|
||||
*
|
||||
* Shared typography for rendered lesson content. Every rich-text surface —
|
||||
* the WYSIWYG block (editor + read-only render) and the Markdown block
|
||||
* (editor preview + read-only render) — wraps its output in `.typeset` so
|
||||
* both produce identical headings/lists/tables/code regardless of which
|
||||
* editor authored the content. Loaded once globally (see index.css) instead
|
||||
* of being re-injected per block instance.
|
||||
*
|
||||
* Reuses the app's existing theme tokens (--foreground, --primary, --muted,
|
||||
* --border, --ring) so light/dark theming stays automatic.
|
||||
*/
|
||||
|
||||
.typeset {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.typeset h1 { font-size: 1.375rem; font-weight: 700; margin: 1rem 0 0.4rem; line-height: 1.2; }
|
||||
.typeset h2 { font-size: 1.125rem; font-weight: 600; margin: 1rem 0 0.4rem; line-height: 1.3; }
|
||||
.typeset h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.4rem; line-height: 1.4; }
|
||||
.typeset h4 { font-size: 1rem; font-weight: 600; margin: 0.9rem 0 0.35rem; }
|
||||
|
||||
.typeset p {
|
||||
margin: 0 0 0.75rem 0;
|
||||
text-align: left;
|
||||
line-height: 1.65;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.typeset ul { list-style: disc; padding-left: 1.1rem; margin: 0.4rem 0 0.75rem; }
|
||||
.typeset ol { list-style: decimal; padding-left: 1.1rem; margin: 0.4rem 0 0.75rem; }
|
||||
.typeset li { margin-bottom: 0.3rem; line-height: 1.65; font-size: 0.9375rem; }
|
||||
|
||||
.typeset a { color: hsl(var(--primary)); text-decoration: underline; }
|
||||
|
||||
.typeset strong, .typeset b { font-weight: 700; }
|
||||
.typeset em, .typeset i { font-style: italic; }
|
||||
.typeset del { text-decoration: line-through; opacity: 0.7; }
|
||||
|
||||
/* Task-list checkboxes (GFM) */
|
||||
.typeset input[type="checkbox"] { margin-right: 0.4rem; accent-color: hsl(var(--primary)); }
|
||||
|
||||
/* Inline code */
|
||||
.typeset :not(pre) > code {
|
||||
font-family: 'Fira Code', 'Cascadia Code', 'Courier New', Courier, monospace;
|
||||
font-size: 0.875em;
|
||||
background: hsl(var(--muted));
|
||||
color: hsl(var(--foreground));
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Code block */
|
||||
.typeset pre {
|
||||
background: hsl(220 13% 12%);
|
||||
color: hsl(220 14% 88%);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.875rem 1rem;
|
||||
overflow-x: auto;
|
||||
margin: 0.75rem 0;
|
||||
border: 1px solid hsl(220 13% 22%);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.typeset pre code {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: 0.875rem;
|
||||
color: inherit;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
font-family: 'Fira Code', 'Cascadia Code', 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
/* Blockquote */
|
||||
.typeset blockquote {
|
||||
border-left: 3px solid hsl(var(--primary));
|
||||
margin: 0.75rem 0;
|
||||
padding: 0.4rem 0 0.4rem 1rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
font-style: italic;
|
||||
}
|
||||
.typeset blockquote p { margin-bottom: 0; }
|
||||
|
||||
/* Horizontal rule */
|
||||
.typeset hr {
|
||||
border: none;
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
/* Document-link badge — inserted by the WYSIWYG editor's "embed document" tool */
|
||||
.typeset a.doc-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 0.375rem;
|
||||
background: hsl(var(--muted));
|
||||
color: hsl(var(--foreground));
|
||||
font-size: 0.75rem;
|
||||
text-decoration: none;
|
||||
border: 1px solid hsl(var(--border));
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.typeset a.doc-link::before {
|
||||
content: "📄";
|
||||
font-size: 0.7rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Table — scrollable on mobile */
|
||||
.typeset table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
margin: 0.6rem 0;
|
||||
font-size: 0.75rem;
|
||||
table-layout: auto;
|
||||
border: 1.5px solid #cbd5e1;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.typeset th {
|
||||
background: #f1f5f9;
|
||||
color: #1e293b;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
padding: 0.35rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
|
||||
}
|
||||
|
||||
.typeset td {
|
||||
padding: 0.35rem 0.5rem;
|
||||
vertical-align: top;
|
||||
word-break: break-word;
|
||||
min-width: 4rem;
|
||||
box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
|
||||
}
|
||||
|
||||
/* Zebra-striping only on read-only renders, not while a table is being edited */
|
||||
.typeset:not([contenteditable]) tbody tr:nth-child(even) td { background: #f8fafc; }
|
||||
|
||||
/* Table-cell focus ring, only relevant inside the contentEditable surface */
|
||||
.typeset[contenteditable] td:focus,
|
||||
.typeset[contenteditable] th:focus {
|
||||
outline: 2px solid hsl(var(--ring));
|
||||
outline-offset: -2px;
|
||||
background: hsl(var(--accent) / 0.2);
|
||||
}
|
||||
|
||||
/* ── ≥320px ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
@media (min-width: 320px) {
|
||||
.typeset h1 { font-size: 1.625rem; margin: 1.1rem 0 0.45rem; }
|
||||
.typeset h2 { font-size: 1.3rem; margin: 1.1rem 0 0.45rem; }
|
||||
.typeset h3 { font-size: 1.125rem; margin: 1.1rem 0 0.45rem; }
|
||||
|
||||
.typeset p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
text-align: justify;
|
||||
margin: 0 0 0.8rem 0;
|
||||
}
|
||||
|
||||
.typeset ul { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
|
||||
.typeset ol { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
|
||||
.typeset li { font-size: 1rem; line-height: 1.7; margin-bottom: 0.35rem; }
|
||||
|
||||
.typeset a.doc-link { font-size: 0.8rem; padding: 0.1rem 0.45rem; gap: 0.28rem; }
|
||||
|
||||
.typeset table { font-size: 0.8125rem; margin: 0.7rem 0; }
|
||||
.typeset th { padding: 0.45rem 0.65rem; }
|
||||
.typeset td { padding: 0.4rem 0.65rem; min-width: 5rem; }
|
||||
}
|
||||
|
||||
/* ── Desktop (≥1024px) ──────────────────────────────────────────────────── */
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.typeset h1 { font-size: 1.875rem; margin: 1.25rem 0 0.5rem; }
|
||||
.typeset h2 { font-size: 1.5rem; margin: 1.25rem 0 0.5rem; }
|
||||
.typeset h3 { font-size: 1.25rem; margin: 1.25rem 0 0.5rem; }
|
||||
|
||||
.typeset p { font-size: 1.08rem; line-height: 1.75; margin: 0 0 0.85rem 0; }
|
||||
|
||||
.typeset ul { padding-left: 1.5rem; margin: 0.5rem 0 0.85rem; }
|
||||
.typeset ol { padding-left: 1.5rem; margin: 0.5rem 0 0.85rem; }
|
||||
.typeset li { font-size: 1.08em; line-height: 1.75; margin-bottom: 0.4rem; }
|
||||
|
||||
.typeset a.doc-link { font-size: 0.8125rem; padding: 0.1rem 0.5rem; gap: 0.3rem; }
|
||||
|
||||
.typeset table {
|
||||
display: table;
|
||||
font-size: 0.875rem;
|
||||
margin: 0.75rem 0;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.typeset th { padding: 0.5rem 0.75rem; }
|
||||
.typeset td { padding: 0.45rem 0.75rem; min-width: 2rem; }
|
||||
}
|
||||
Reference in New Issue
Block a user