rmsitz/offlineu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual polish: theme-aware colors, collapsible cards, skeletons, hover consistency

Browse Source 
Templates only, no backend changes:

- Fixed the real bug: JS-generated status/loading text and a few component
  styles used hardcoded hex (#007acc, #999/#666, #28a745, #ff6b6b) instead
  of the CSS variables the theme system already provides, so they didn't
  track the user's chosen theme/accent - most visible on Light or any named
  theme other than the default. Added --success/--error to all 5 templates'
  :root blocks and replaced every non-:root occurrence. Left the
  .lesson-type badge colors and generic UI chrome grays alone (intentional,
  not theme-dependent). Verified live by switching to Nord and Light themes.
- Dashboard cards (Library Stats, Next Up, Pick Back Up, Recently Added,
  Continue Watching, Recently Viewed) are now collapsible, state remembered
  per device via localStorage - the no-course dashboard had grown to 7
  stacked cards.
- Course page's three action buttons get consistent compact sizing and
  icons instead of a plain stack.
- Library browser and transcript search show shimmering skeleton rows
  instead of bare "Loading..."/"Searching..." text while a fetch is in
  flight.
- Hover treatment made consistent: transcript results get the same lift
  .lesson-item already had, heatmap cells get a GitHub-style hover
  scale-up, and Notes Hub links get a background-chip hover.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
rmsitz
2026-08-22 19:31:31 -04:00
co-authored by Claude Sonnet 5
parent 0454834e62
commit c871d6efae
6 changed files with 236 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/notes_hub.html
+10 -2
View File
@@ -22,6 +22,8 @@
--font-size-base: 16px;
--container-max-width: 1600px;
--radius: 8px;
--success: #28a745;
--error: #ff6b6b;
}
[data-theme="light"] {
--bg-primary: #f2f2f2;
@@ -171,13 +173,19 @@
line-height: 1.5;
}
.note-card-link {
display: block;
display: inline-block;
margin-top: 12px;
font-size: 0.85em;
color: var(--accent);
text-decoration: none;
padding: 4px 10px;
border-radius: var(--radius);
transition: background 0.2s ease;
}
.note-card-link:hover {
background: var(--bg-tertiary);
text-decoration: underline;
}
.note-card-link:hover { text-decoration: underline; }
</style>
</head>
<body>