Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

Remove custom CSS from main user templates

Browse Source 
Remove <style> tags from analytics, bookshelf, conflicts, and dashboard
templates. Convert custom CSS classes (.stat-card, .shelf, .book-item,
.conflict-card, etc.) to TailwindCSS utility classes. Rely on
centralized theme CSS variables in input.css.
This commit is contained in:
john-okeefe
2026-02-02 10:27:53 -05:00
parent 605beb31e5
commit fa16a3d78a
4 changed files with 36 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/conflicts.templ
+23 -55
View File
@@ -13,38 +13,6 @@ templ Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total in
<script src="/static/toast.js"></script>
<link href="/static/style.css" rel="stylesheet">
<script src="/static/theme.js"></script>
<style>
.conflict-card {
border-left: 4px solid #f59e0b;
}
.conflict-resolved {
border-left-color: #10b981;
opacity: 0.7;
}
.progress-bar {
height: 8px;
border-radius: 4px;
background-color: var(--border);
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: var(--accent);
transition: width 0.3s ease;
}
.device-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.device-koreader { background-color: #3b82f6; color: white; }
.device-kobo { background-color: #8b5cf6; color: white; }
.device-web { background-color: #10b981; color: white; }
.device-mobile { background-color: #f59e0b; color: white; }
</style>
</head>
<body class="theme-{ user.Theme }">
@Header(user, "/conflicts")
@@ -127,30 +95,30 @@ templ Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total in
</div>
}
for _, conflict := range conflicts {
<div class="conflict-item card p-6 rounded-lg border" data-conflict-id="{ conflict.ID }" style="background-color: var(--bg-secondary); border-color: var(--border); border-left: 4px solid #f59e0b;">
<div class="flex justify-between items-start mb-4">
<div class="flex items-start space-x-4">
<input type="checkbox" class="conflict-checkbox w-5 h-5 rounded mt-1"
data-conflict-id="{ conflict.ID }"
onchange="updateBulkActions()">
<div>
<h3 class="text-lg font-semibold" style="color: var(--text-primary)">{ conflict.MediaItemTitle }</h3>
<p class="text-sm" style="color: var(--text-secondary)">Type: { conflict.ConflictType }</p>
</div>
</div>
<button onclick="showConflictModal('{ conflict.ID }')" class="btn-primary px-4 py-2 rounded-lg">
Resolve
</button>
</div>
<div class="text-sm" style="color: var(--text-secondary)">
Created: { conflict.CreatedAt.Format("2006-01-02 15:04:05") }
if conflict.ResolvedBy != "" {
| Resolved by: { conflict.ResolvedBy }
}
for _, conflict := range conflicts {
<div class="conflict-item card p-6 rounded-lg border" data-conflict-id="{ conflict.ID }" style="background-color: var(--bg-secondary); border-color: var(--border); border-left-width: 4px; border-left-style: solid; border-left-color: rgb(245, 158, 11);">
<div class="flex justify-between items-start mb-4">
<div class="flex items-start space-x-4">
<input type="checkbox" class="conflict-checkbox w-5 h-5 rounded mt-1"
data-conflict-id="{ conflict.ID }"
onchange="updateBulkActions()">
<div>
<h3 class="text-lg font-semibold" style="color: var(--text-primary)">{ conflict.MediaItemTitle }</h3>
<p class="text-sm" style="color: var(--text-secondary)">Type: { conflict.ConflictType }</p>
</div>
</div>
</div>
}
<button onclick="showConflictModal('{ conflict.ID }')" class="btn-primary px-4 py-2 rounded-lg">
Resolve
</button>
</div>
<div class="text-sm" style="color: var(--text-secondary)">
Created: { conflict.CreatedAt.Format("2006-01-02 15:04:05") }
if conflict.ResolvedBy != "" {
| Resolved by: { conflict.ResolvedBy }
}
</div>
</div>
}
</div>
<div id="conflict-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto" style="background-color: rgba(0, 0, 0, 0.7);">