mirror of
https://github.com/linkwarden/linkwarden.git
synced 2026-06-28 14:55:49 +00:00
132 lines
3.0 KiB
TypeScript
132 lines
3.0 KiB
TypeScript
export const READER_VIEW_DEFAULTS = {
|
|
fontSize: 18,
|
|
lineHeight: 1.8,
|
|
headingLineHeight: 1.4,
|
|
paragraphMargin: 16,
|
|
h1Size: 35,
|
|
h2Size: 30,
|
|
h3Size: 26,
|
|
h4Size: 21,
|
|
h5Size: 18,
|
|
} as const;
|
|
|
|
export const readerViewCSS = `
|
|
.reader-view,
|
|
.reader-view * {
|
|
text-align: inherit;
|
|
overflow-wrap: anywhere;
|
|
word-break: normal;
|
|
hyphens: manual;
|
|
}
|
|
.reader-view mark {
|
|
background-color: var(--rv-mark-bg);
|
|
color: var(--rv-mark-color);
|
|
border-radius: 5px;
|
|
padding-left: 0.25rem;
|
|
padding-right: 0.25rem;
|
|
}
|
|
.reader-view p {
|
|
font-size: var(--rv-p-font-size, ${READER_VIEW_DEFAULTS.fontSize}px);
|
|
line-height: var(--rv-p-line-height, ${READER_VIEW_DEFAULTS.lineHeight});
|
|
margin-bottom: ${READER_VIEW_DEFAULTS.paragraphMargin}px;
|
|
margin-top: ${READER_VIEW_DEFAULTS.paragraphMargin}px;
|
|
}
|
|
.reader-view h1 {
|
|
font-size: var(--rv-h1-font-size, ${READER_VIEW_DEFAULTS.h1Size}px);
|
|
line-height: ${READER_VIEW_DEFAULTS.headingLineHeight};
|
|
}
|
|
.reader-view h2 {
|
|
font-size: var(--rv-h2-font-size, ${READER_VIEW_DEFAULTS.h2Size}px);
|
|
line-height: ${READER_VIEW_DEFAULTS.headingLineHeight};
|
|
}
|
|
.reader-view h3 {
|
|
font-size: var(--rv-h3-font-size, ${READER_VIEW_DEFAULTS.h3Size}px);
|
|
line-height: ${READER_VIEW_DEFAULTS.headingLineHeight};
|
|
}
|
|
.reader-view h4 {
|
|
font-size: var(--rv-h4-font-size, ${READER_VIEW_DEFAULTS.h4Size}px);
|
|
line-height: ${READER_VIEW_DEFAULTS.headingLineHeight};
|
|
}
|
|
.reader-view h5 {
|
|
font-size: var(--rv-h5-font-size, ${READER_VIEW_DEFAULTS.h5Size}px);
|
|
line-height: ${READER_VIEW_DEFAULTS.headingLineHeight};
|
|
}
|
|
.reader-view li {
|
|
list-style: inside;
|
|
margin-left: 2rem;
|
|
}
|
|
.reader-view a {
|
|
text-decoration: underline;
|
|
}
|
|
.reader-view b {
|
|
font-weight: bolder;
|
|
}
|
|
.reader-view pre,
|
|
.reader-view code {
|
|
font-family: "Courier New", Courier, monospace;
|
|
}
|
|
.reader-view blockquote {
|
|
opacity: 50%;
|
|
padding-left: 1.5rem;
|
|
border-left: solid 3px;
|
|
}
|
|
.reader-view img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin: auto;
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
border-radius: 10px;
|
|
}
|
|
.reader-view pre {
|
|
padding: 1rem;
|
|
line-height: normal;
|
|
white-space: pre-wrap;
|
|
}
|
|
.reader-view code {
|
|
padding: 0.15rem 0.4rem 0.15rem 0.4rem;
|
|
}
|
|
.reader-view code,
|
|
.reader-view pre {
|
|
background-color: var(--rv-code-bg);
|
|
border-radius: 8px;
|
|
}
|
|
.reader-view ul[data-type="taskList"] {
|
|
list-style: none;
|
|
margin-left: 0;
|
|
padding: 0;
|
|
}
|
|
.reader-view ul[data-type="taskList"] li {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
.reader-view ul[data-type="taskList"] li > label {
|
|
flex: 0 0 auto;
|
|
margin-right: 0.5rem;
|
|
user-select: none;
|
|
}
|
|
.reader-view ul[data-type="taskList"] li > div {
|
|
flex: 1 1 auto;
|
|
}
|
|
.reader-view ul[data-type="taskList"] input[type="checkbox"] {
|
|
cursor: pointer;
|
|
}
|
|
.read-only ul[data-type="taskList"] {
|
|
pointer-events: none;
|
|
}
|
|
`;
|
|
|
|
export function readerViewThemeVars(
|
|
theme: {
|
|
primary: string;
|
|
"base-content": string;
|
|
},
|
|
isDark: boolean
|
|
): string {
|
|
return `
|
|
--rv-code-bg: ${isDark ? "rgb(49, 49, 49)" : "rgb(230, 230, 230)"};
|
|
--rv-mark-bg: ${theme.primary}80;
|
|
--rv-mark-color: ${theme["base-content"]};
|
|
`;
|
|
}
|