css: named container classes for easier css customization, closes #1598 (#1600)

apps/readest-app/src/app/reader/components/BooksGrid.tsx

@@ -70,7 +70,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
 
   return (
     <div
-      className={clsx('relative grid h-full flex-grow')}
+      className={clsx('books-grid bg-base-100 relative grid h-full flex-grow')}
       style={{
         gridTemplateColumns: gridTemplate.columns,
         gridTemplateRows: gridTemplate.rows,

apps/readest-app/src/app/reader/components/Reader.tsx

@@ -111,7 +111,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
     settings.globalReadSettings && (
       <div
         className={clsx(
-          `reader-page bg-base-100 text-base-content select-none overflow-hidden`,
+          `reader-page text-base-content select-none overflow-hidden`,
           appService?.isLinuxApp && 'window-border',
           appService?.hasRoundedWindow && 'rounded-window',
         )}

apps/readest-app/src/app/reader/components/ReaderContent.tsx

@@ -177,7 +177,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
   }
 
   return (
-    <div className={clsx('flex', appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh')}>
+    <div className={clsx('reader-content flex', appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh')}>
       <SideBar onGoToLibrary={handleCloseBooksToLibrary} />
       <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
       <Notebook />