Replace inline note styles and share outlined button rules

[LukasWallrich]

A small CSS cleanup brought back from the closed #7 redesign. No visual change is intended.

• The 23 inline font-size/colour styles in index.html move to .note, .note-loading, .note-label, .note-detail and .top-n-select. These cover the loading and error messages, error detail, citation notes and the "Show top" controls. Elements that JavaScript shows or hides keep their inline display:none.
• Six near-identical outlined buttons share one base rule for background, border, radius, cursor, font and transition: copy citation, trend filter, refresh, mobile pager, table pagination and citation share.

Verification

• Computed styles (colour, background, border, font size, family, weight, line height, padding, radius, shadow) were dumped for the affected elements on five tabs in light and dark mode, on main and on this branch. They are identical. The only differences were randomly sampled outcome badges on the Overview examples.
• Local Python tests pass. Browser tests are left to CI here (the box's OOM killer keeps interrupting local Chromium runs).

🤖 Generated with Claude Code

---

Summary by cubic

Cleans up the stylesheet by moving inline note styles to shared CSS classes and consolidating six near-identical outlined buttons into one base rule, with no visual change intended.

• Moves 23 inline font-size and colour styles in index.html to .note, .note-loading, .note-label, .note-detail and .top-n-select; the display:none that JavaScript toggles stays inline.
• Shares background, border, radius and cursor rules across the copy citation, trend filter, refresh, mobile pager, table pagination and citation share buttons.
• Each button keeps its own transition timing: trend filter and mobile pager use 0.15s, refresh uses 0.2s, and copy, share and citation pagination stay instant as on main.

Verification

• Computed styles for the affected elements match between main and this branch on all five tabs in light and dark mode; only randomly sampled outcome badges differed.

^{Written for commit f94af3a. Summary will update on new commits.}

Summary by CodeRabbit

• Style
  • Standardized the appearance of outlined buttons used for citation actions, trend filters, refresh, and pagination.
  • Updated the presentation of FAQ and citation notes, journal-count controls, and analysis loading and error messages, including note labels and details.
  • Constrained the width of the top-N selector for a more consistent layout.

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 54 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: e2a32151-21c2-41a6-b4fc-d38f8b9dfbf3

---

📥 Commits

Reviewing files that changed from the base of the PR and between 3ca93dd and f94af3a.

---

📒 Files selected for processing (1)

• assets/styles.css

---

---

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 10cacad9-b43f-44aa-9872-a57bfa20b253

---

📥 Commits

Reviewing files that changed from the base of the PR and between 0cc1d23 and 3ca93dd.

---

📒 Files selected for processing (2)

• assets/styles.css
• index.html

---

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

---

📝 Walkthrough

Walkthrough

The stylesheet consolidates base styles for outlined buttons and adds shared note and selector classes. The HTML replaces inline presentation styles on prompts, controls, and analysis loading and error messages with those classes.

Changes

Shared interface styles

Layer / File(s)	Summary
Shared outlined-button styles assets/styles.css	Six button selectors use shared background, border, radius, cursor, font, and transition declarations while retaining component-specific styles.
Shared note and selector classes assets/styles.css, index.html	The stylesheet adds note, loading, label, detail, and selector classes. FAQ and citation prompts, journal-count controls, and analysis loading and error messages use these classes instead of inline presentation styles.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Refactor

Suggested reviewers: lukasroeseler

---

Merge Risk: ⚪ Minimal · up to 3ca93

The change centralizes existing button and note presentation without a concrete user-facing regression identified. It is ready for normal checks.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the two main changes: replacing inline note styles and sharing outlined button rules.
Linked Issues check		Issue #7 is closed and provides historical context only. No active directly linked issue remains, so no linked-issue coding requirements apply.
Out of Scope Changes check		The reported changes stay within the PR scope. They move inline note styles to CSS classes and consolidate shared outlined-button rules in the documented files. The summaries show no unrelated public …
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…

---

---

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}

[cubic-dev-ai]

1 issue found across 2 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="assets/styles.css">

<violation number="1" location="assets/styles.css:310">
P3: The shared rule hardcodes `transition: all 0.15s ease;` for all six button types, which deviates from `main` in two ways despite the PR's no-difference goal: `.refresh-btn` previously used `transition: all 0.2s ease;` (now 0.15s), and `.citation-box .copy-btn`, `.ci-share-btn`, and `.pagination button` had no transition at all on `main` — these now gain a 0.15s hover animation (see the `:hover`/`.active` background and border-color changes on each). If intent is to unify timing, this is fine, but the reshuffle button hover and the copy/share/pagination hover fade are visibly different from `main`. Restore the per-button timings: keep the shared rule but re-add `transition: all 0.2s ease;` to `.refresh-btn` and drop the transition for the buttons that didn't have one, or accept the change explicitly.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

View guided diff | Turn on auto-fix | Re-trigger cubic</sub>

[cubic-dev-ai]

P3: The shared rule hardcodes transition: all 0.15s ease; for all six button types, which deviates from main in two ways despite the PR's no-difference goal: .refresh-btn previously used transition: all 0.2s ease; (now 0.15s), and .citation-box .copy-btn, .ci-share-btn, and .pagination button had no transition at all on main — these now gain a 0.15s hover animation (see the :hover/.active background and border-color changes on each). If intent is to unify timing, this is fine, but the reshuffle button hover and the copy/share/pagination hover fade are visibly different from main. Restore the per-button timings: keep the shared rule but re-add transition: all 0.2s ease; to .refresh-btn and drop the transition for the buttons that didn't have one, or accept the change explicitly.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At assets/styles.css, line 310:

<comment>The shared rule hardcodes `transition: all 0.15s ease;` for all six button types, which deviates from `main` in two ways despite the PR's no-difference goal: `.refresh-btn` previously used `transition: all 0.2s ease;` (now 0.15s), and `.citation-box .copy-btn`, `.ci-share-btn`, and `.pagination button` had no transition at all on `main` — these now gain a 0.15s hover animation (see the `:hover`/`.active` background and border-color changes on each). If intent is to unify timing, this is fine, but the reshuffle button hover and the copy/share/pagination hover fade are visibly different from `main`. Restore the per-button timings: keep the shared rule but re-add `transition: all 0.2s ease;` to `.refresh-btn` and drop the transition for the buttons that didn't have one, or accept the change explicitly.</comment>

<file context>
@@ -304,7 +304,12 @@ h1, .serif, .card-header, .stats-card .number,
+/* Shared outlined button: card background, hairline border, page font. */
+.citation-box .copy-btn, .trend-filter-btn, .refresh-btn, .bm-page-btn, .pagination button, .ci-share-btn {
+    background: var(--flora-card-bg); border: 1px solid var(--flora-border); border-radius: 6px;
+    cursor: pointer; font-family: var(--font-sans); transition: all 0.15s ease;
+}
+.citation-box .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.3rem 0.6rem; font-size: 0.75rem; color: var(--flora-muted); }
</file context>