css: background color for dialogs and images, closes #1797 (#1798)

apps/readest-app/src/app/library/components/KOSyncSettings.tsx

@@ -236,7 +236,6 @@ export const KOSyncSettingsWindow: React.FC = () => {
       onClose={() => setIsOpen(false)}
       title={_('KOReader Sync Settings')}
       boxClassName='sm:!min-w-[520px] sm:h-auto'
-      bgClassName='!bg-black/60'
     >
       <div className='mb-4 mt-0 flex flex-col gap-4 p-2 sm:p-4'>
         {isConfigured ? (

apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx

@@ -163,6 +163,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
       isOpen={true}
       onClose={handleClose}
       className='modal-open'
+      bgClassName='sm:!bg-black/20'
       boxClassName={clsx('sm:min-w-[520px]', appService?.isMobile && 'sm:max-w-[90%] sm:w-3/4')}
       snapHeight={appService?.isMobile ? 0.7 : undefined}
       header={

apps/readest-app/src/components/Dialog.tsx

@@ -161,7 +161,7 @@ const Dialog: React.FC<DialogProps> = ({
     >
       <div
         className={clsx(
-          'overlay fixed inset-0 z-10 bg-black/50 sm:bg-black/20',
+          'overlay fixed inset-0 z-10 bg-black/50 sm:bg-black/50',
           appService?.hasRoundedWindow && 'rounded-window',
           bgClassName,
         )}

apps/readest-app/src/components/metadata/BookDetailModal.tsx

@@ -187,7 +187,6 @@ const BookDetailModal: React.FC<BookDetailModalProps> = ({
           title={editMode ? _('Edit Metadata') : _('Book Details')}
           isOpen={isOpen}
           onClose={handleClose}
-          bgClassName='sm:bg-black/50'
           boxClassName={clsx(
             editMode ? 'sm:min-w-[600px] sm:max-w-[600px]' : 'sm:min-w-[480px] sm:max-w-[480px]',
             'sm:h-auto sm:max-h-[90%]',

apps/readest-app/src/utils/style.ts

@@ -131,9 +131,6 @@ const getColorStyles = (
       ${overrideColor ? `color: ${primary};` : isDarkMode ? `color: lightblue;` : ''}
       text-decoration: none;
     }
-    p:has(img), span:has(img) {
-      background-color: ${bg};
-    }
     body.pbg {
       ${isDarkMode ? `background-color: ${bg} !important;` : ''}
     }
@@ -142,7 +139,7 @@ const getColorStyles = (
       ${!isDarkMode && overrideColor ? 'mix-blend-mode: multiply;' : ''}
     }
     /* horizontal rule */
-    *:has(hr) {
+    *:has(> hr[class]) {
       background-color: ${bg};
     }
     hr {
@@ -324,7 +321,7 @@ const getLayoutStyles = (
     width: auto;
     height: auto;
   }
-  .duokan-footnote img {
+  .duokan-footnote img:not([class]) {
     width: 0.8em;
     height: 0.8em;
   }