diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts index 8fadb7ad..b8c5cc60 100644 --- a/apps/readest-app/src/utils/style.ts +++ b/apps/readest-app/src/utils/style.ts @@ -86,7 +86,7 @@ const getFontStyles = ( body * { ${overrideFont ? 'font-family: revert !important;' : ''} } - a:any-link, a:any-link * { + a:any-link { ${overrideFont ? `color: ${primary};` : isDarkMode ? `color: lightblue;` : ''} text-decoration: none; } @@ -248,9 +248,9 @@ const getLayoutStyles = ( hanging-punctuation: allow-end last; widows: 2; } - p:has(> img:only-child) { + p:has(> img:only-child), p:has(> span:only-child > img:only-child), + div[style*="text-align"] { text-indent: unset !important; - text-align: unset !important; } p, div { ${vertical ? `margin-left: ${paragraphMargin}em ${overrideLayout ? '!important' : ''};` : ''} @@ -300,6 +300,9 @@ const getLayoutStyles = ( height: 1em; mix-blend-mode: ${isDarkMode ? 'screen' : 'multiply'}; } + p:has(> img:only-child) img, span:has(> img:only-child) img { + height: auto; + } p:has(img), span:has(img) { background-color: ${bg}; } @@ -485,15 +488,16 @@ export const transformStylesheet = ( const h = height - viewSettings.marginPx * 2; const ruleRegex = /([^{]+)({[^}]+})/g; css = css.replace(ruleRegex, (match, selector, block) => { - const hasTextAlignCenter = - /text-align\s*:\s*center\s*;/.test(block) || /text-align\s*:\s*center\s*$/.test(block); - const hasTextIndentZero = - /text-indent\s*:\s*0\s*;/.test(block) || /text-indent\s*:\s*0\s*$/.test(block); + const hasTextAlignCenter = /text-align\s*:\s*center\s*[;$]/.test(block); + const hasTextIndentZero = /text-indent\s*:\s*0(?:\.0+)?(?:px|em|rem|%)?\s*[;$]/.test(block); if (hasTextAlignCenter) { block = block.replace(/(text-align\s*:\s*center)(\s*;|\s*$)/g, '$1 !important$2'); if (hasTextIndentZero) { - block = block.replace(/(text-indent\s*:\s*0)(\s*;|\s*$)/g, '$1 !important$2'); + block = block.replace( + /(text-indent\s*:\s*0(?:\.0+)?(?:px|em|rem|%)?)(\s*;|\s*$)/g, + '$1 !important$2', + ); } return selector + block; }