Various fix for theming

This commit is contained in:
chrox
2024-11-20 14:01:28 +01:00
parent bc8ccfa9b9
commit b3c23cd1b5
7 changed files with 22 additions and 16 deletions
+8
View File
@@ -16,6 +16,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
document.documentElement.setAttribute('data-page', pathname.replace('/', '') || 'default');
}, [pathname]);
React.useEffect(() => {
if (process.env['NODE_ENV'] === 'production') {
document.oncontextmenu = (event) => {
event.preventDefault();
};
}
}, []);
return (
<html lang='en'>
<head>
@@ -97,7 +97,10 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
<div className='bookshelf'>
<div className='grid grid-cols-3 gap-0 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8'>
{bookshelfItems.map((item, index) => (
<div key={`library-item-${index}`} className='hover:bg-base-200 flex h-full flex-col p-4'>
<div
key={`library-item-${index}`}
className='hover:bg-base-300/50 flex h-full flex-col p-4'
>
<div className='flex-grow'>
{'format' in item ? (
<div
@@ -173,7 +176,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
{bookshelfItems.length > 0 && (
<div
className='border-1 bg-base-100 hover:bg-base-200 m-4 flex aspect-[28/41] items-center justify-center'
className='border-1 bg-base-100 hover:bg-base-300/50 m-4 flex aspect-[28/41] items-center justify-center'
role='button'
onClick={onImportBooks}
>
@@ -66,7 +66,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
placeholder='Search books...'
spellCheck='false'
className={clsx(
'input rounded-badge bg-base-200 h-7 w-full pl-10 pr-10',
'input rounded-badge bg-base-300/50 h-7 w-full pl-10 pr-10',
'font-sans text-sm font-light',
'border-none focus:outline-none focus:ring-0',
)}
+1 -1
View File
@@ -77,7 +77,7 @@ const LibraryPage = () => {
}
return (
<div className='library-page rounded-window bg-base-200/50 flex h-full min-h-screen select-none flex-col overflow-hidden'>
<div className='library-page rounded-window bg-base-200/50 text-base-content flex h-full min-h-screen select-none flex-col overflow-hidden'>
<div className='fixed top-0 z-40 w-full'>
<LibraryHeader
isSelectMode={isSelectMode}
@@ -90,7 +90,7 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) =>
}
return (
<div className='text-base-content flex h-screen'>
<div className='flex h-screen'>
<SideBar onGoToLibrary={handleCloseBooks} />
<BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
<Notebook />
+1 -1
View File
@@ -30,7 +30,7 @@ const ReaderPage = () => {
return (
library.length > 0 &&
settings.globalReadSettings && (
<div className='reader-page min-h-screen select-none bg-white'>
<div className='reader-page bg-base-100 text-base-content min-h-screen select-none'>
<Suspense>
<ReaderContent settings={settings} />
</Suspense>
+5 -10
View File
@@ -5,9 +5,6 @@
:root {
--background: #ffffff;
--foreground: #171717;
}
:root {
border-radius: 10px;
}
@@ -18,22 +15,22 @@
}
}
/* html[data-page="default"] {
html[data-page="default"] {
background: #ffffff;
}
html[data-page="library"] {
background: #f3f4f6;
background: theme('colors.base-200');
}
html[data-page="reader"] {
background: #f3f4f6;
} */
background: theme('colors.base-100');
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
border-radius: 10px;
background-color: transparent;
}
@@ -153,8 +150,6 @@ foliate-view {
.dropdown-content,
.settings-content {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
font-size: 14px;
font-weight: 400;
}