ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Updated headless browser (Should be as fast as it was before)

Browse Source 
Added in Book Boards! (NEW!)
Updated rendering logic
Updated search logic
Updated extension loading logic
Updated image handling logic
This commit is contained in:
itsskaiya
2025-11-22 10:55:27 -05:00
parent dca07a26f8
commit 652db0586b
13 changed files with 975 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
views/books.html Normal file
View File

@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data: blob:; connect-src 'self' https:;" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Waifu Board - Books</title>
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/books.css">
</head>
<body>
<aside class="sidebar">
<br>
<nav style="display: flex; flex-direction: column; gap: 0.5rem;">
<a href="index.html" class="nav-button" title="Image Boards">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
<span>Image Boards</span>
</a>
<a href="books.html" class="nav-button active" title="Book Boards">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<span>Book Boards</span>
</a>
<a href="favorites.html" class="nav-button" title="Favorites">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
<span>Favorites</span>
</a>
</nav>
<nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
<a href="settings.html" class="nav-button" title="Settings">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
<span>Settings</span>
</a>
</nav>
</aside>
<div class="main-wrapper">
<header class="top-header">
<div style="position: relative;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary);">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="text" id="search-input" placeholder="Search across books..." style="padding-left: 2.5rem;" />
</div>
<button id="search-button" class="hidden"></button>
<button id="search-icon-button" class="hidden"></button>
<button id="search-close-button" class="hidden"></button>
<div id="header-context" class="hidden"></div>
<h1 id="page-title" class="hidden">Book Boards</h1>
</header>
<div class="content-view">
<div id="browse-page" class="page">
<h3 style="color: var(--text-tertiary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem;">Book Sources</h3>
<div id="source-list"></div>
<h3 style="color: var(--text-tertiary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin: 2rem 0 1rem 0;">Library</h3>
<main id="content-gallery" class="gallery-masonry">
<div id="gallery-placeholder" class="loading-state" style="width: 100%; grid-column: 1 / -1;">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="1">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<p>Select a book source above to load content</p>
</div>
<div id="loading-spinner" class="hidden loading-state" style="width: 100%; grid-column: 1 / -1;">
<svg style="width:32px; height:32px; color: var(--accent); animation: spin 1s linear infinite;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"></path>
</svg>
<p>Fetching books...</p>
</div>
<div id="infinite-loading-spinner" class="hidden loading-state" style="width: 100%; grid-column: 1 / -1;">
<p>Loading more...</p>
</div>
</main>
</div>
<div id="book-details-view" class="page hidden">
</div>
<div id="reader-view" class="hidden">
<div id="reader-content" style="width: 100%; display: flex; flex-direction: column; align-items: center;">
</div>
</div>
</div>
</div>
<div id="message-bar" class="toast hidden">Message</div>
<div id="updateToast" class="toast hidden" style="border-left-color: #eab308;">
<p>Update Available: <span id="latestVersionDisplay">v1.x</span></p>
</div>
<script type="module" src="../src/renderer.js"></script>
<script type="module" src="../scripts/main.js"></script>
<script src="../src/updateNotification.js"></script>
<script>
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
if(searchInput && searchBtn) {
searchInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') searchBtn.click();
});
}
</script>
</body>
</html>

8
views/favorites.html
View File

@@ -22,6 +22,14 @@
<span>Image Boards</span>
</a>
<a href="books.html" class="nav-button" title="Book Boards">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<span>Book Boards</span>
</a>
<a href="favorites.html" class="nav-button active" title="Favorites">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>

47
views/index.html
View File

@@ -1,8 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; connect-src 'self' https:;" />
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; connect-src 'self' https:;" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Waifu Board</title>
<link rel="stylesheet" href="styles/home.css">
@@ -22,9 +24,19 @@
<span>Image Boards</span>
</a>
<a href="books.html" class="nav-button" title="Book Boards">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<span>Book Boards</span>
</a>
<a href="favorites.html" class="nav-button" title="Favorites">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
</path>
</svg>
<span>Favorites</span>
</a>
@@ -34,7 +46,9 @@
<a href="settings.html" class="nav-button" title="Settings">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
</path>
</svg>
<span>Settings</span>
</a>
@@ -44,11 +58,13 @@
<div class="main-wrapper">
<header class="top-header">
<div style="position: relative;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary);">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary);">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="text" id="search-input" placeholder="Search across sources..." style="padding-left: 2.5rem;" />
<input type="text" id="search-input" placeholder="Search across sources..."
style="padding-left: 2.5rem;" />
</div>
<button id="search-button" class="hidden"></button>
<button id="search-icon-button" class="hidden"></button>
@@ -59,10 +75,14 @@
<div class="content-view">
<div id="browse-page" class="page">
<h3 style="color: var(--text-tertiary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem;">Sources</h3>
<h3
style="color: var(--text-tertiary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem;">
Sources</h3>
<div id="source-list"></div>
<h3 style="color: var(--text-tertiary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin: 2rem 0 1rem 0;">Library</h3>
<h3
style="color: var(--text-tertiary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin: 2rem 0 1rem 0;">
Library</h3>
<main id="content-gallery" class="gallery-masonry">
<div id="gallery-placeholder" class="loading-state" style="width: 100%; grid-column: 1 / -1;">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="1">
@@ -73,12 +93,16 @@
<p>Select a source above to load content</p>
</div>
<div id="loading-spinner" class="hidden loading-state" style="width: 100%; grid-column: 1 / -1;">
<svg style="width:32px; height:32px; color: var(--accent); animation: spin 1s linear infinite;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"></path>
<svg style="width:32px; height:32px; color: var(--accent); animation: spin 1s linear infinite;"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path
d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83">
</path>
</svg>
<p>Fetching images...</p>
</div>
<div id="infinite-loading-spinner" class="hidden loading-state" style="width: 100%; grid-column: 1 / -1;">
<div id="infinite-loading-spinner" class="hidden loading-state"
style="width: 100%; grid-column: 1 / -1;">
<p>Loading more...</p>
</div>
</main>
@@ -106,11 +130,12 @@
<script>
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
if(searchInput && searchBtn) {
if (searchInput && searchBtn) {
searchInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') searchBtn.click();
});
}
</script>
</body>
</html>

8
views/settings.html
View File

@@ -22,6 +22,14 @@
<span>Image Boards</span>
</a>
<a href="books.html" class="nav-button" title="Book Boards">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<span>Book Boards</span>
</a>
<a href="favorites.html" class="nav-button" title="Favorites">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>

214
views/styles/books.css Normal file
View File

@@ -0,0 +1,214 @@
#book-details-view {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding-bottom: 4rem;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
.book-top-nav {
display: flex;
align-items: center;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.back-btn-large {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: 0.2s;
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
}
.back-btn-large:hover {
color: var(--text-primary);
background: var(--bg-surface-hover);
}
.book-layout-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
align-items: start;
}
.book-left-col {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: sticky;
top: 20px;
}
.book-poster-large {
width: 100%;
border-radius: var(--radius-lg);
box-shadow: 0 15px 40px rgba(0,0,0,0.6);
aspect-ratio: 2/3;
object-fit: cover;
border: 1px solid var(--border);
background: #111;
}
.book-title-sidebar {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
margin: 0;
color: var(--text-primary);
text-align: center;
word-wrap: break-word;
}
.book-chapters-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
min-width: 0;
}
.chapter-table-container {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.chapter-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.2s;
}
.chapter-row:last-child { border-bottom: none; }
.chapter-row:hover { background: var(--bg-surface-hover); }
.chapter-main-text { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
.chapter-sub-text { font-size: 0.9rem; color: var(--text-tertiary); }
.pagination-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin-top: 1rem;
padding-top: 1rem;
}
.page-btn {
background: var(--bg-surface);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 0.5rem 1.5rem;
border-radius: var(--radius-md);
cursor: pointer;
font-weight: 500;
transition: 0.2s;
}
.page-btn:hover:not(:disabled) { background: var(--bg-surface-hover); border-color: var(--accent); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#reader-view {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
z-index: 200; background: #0d0d0d; overflow-y: auto;
display: flex; flex-direction: column; align-items: center; padding-top: 60px;
}
.reader-page-img { max-width: 100%; width: auto; display: block; margin-bottom: 0; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.reader-text-content {
max-width: 900px;
width: 95%;
color: #e4e4e7;
font-size: 1.1rem;
line-height: 1.8;
padding: 2rem;
background: #18181b;
margin-bottom: 4rem;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.reader-text-content p {
margin-bottom: 1.5rem;
}
.reader-close-btn {
position: fixed; top: 20px; left: 20px; z-index: 210;
background: rgba(0,0,0,0.8); color: white; border: 1px solid rgba(255,255,255,0.2);
padding: 10px 20px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; backdrop-filter: blur(4px);
}
.reader-close-btn:hover { background: var(--accent); border-color: var(--accent); }
.loading-state { text-align: center; padding: 4rem; color: var(--text-tertiary); }
.image-entry[data-type="book"] {
aspect-ratio: 2/3;
background: #1a1a1a;
display: block;
position: relative;
cursor: pointer;
overflow: hidden;
}
.image-entry[data-type="book"] img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: filter 0.3s ease, transform 0.3s ease;
}
.image-entry[data-type="book"]:hover img {
filter: blur(4px) brightness(0.7);
transform: scale(1.05);
}
.book-read-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
color: white;
z-index: 10;
}
.image-entry[data-type="book"]:hover .book-read-overlay {
opacity: 1;
}
.book-read-overlay span {
font-weight: 700;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.book-read-overlay svg {
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
color: var(--accent);
}
.image-entry[data-type="book"]::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(255,255,255,0.1);
border-radius: inherit;
pointer-events: none;
}