LeoVasanko/pagerite
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contact messages: filled accent trigger button, subtle hover

Browse Source 
The {contact:} button was a hollow outline that inverted wholesale on hover; now it is filled with the accent (--bg text, the pairing accents are chosen to contrast with), hover only nudges the fill toward the page text color, and keyboard focus gets an outline. The button also gains margins so it separates from surrounding text both standalone and inline.
This commit is contained in:
LeoVasanko committed 2026-09-28 00:45:00 +00:00
1 parent 4ad4e3bdff
commit 78b1fbc16e
1 file changed
+15 -5
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/pagerite.css
+15 -5
View File
@@ -880,21 +880,31 @@ article {
/* {contact: Label} directive: the button opening the visitor contact
panel (docs/messages.md). A standalone accent button in the article
flow; .has-unread (set by contact-main) marks a new admin reply. */
flow; .has-unread (set by contact-main) marks a new admin reply.
Filled with the accent (text in --bg, the pairing the accent is
designed to contrast with); hover nudges the fill toward the page
text color — a subtle shift that works in either color scheme — and
keyboard focus gets an outline instead of a restyle. */
.contact-trigger {
position: relative;
margin: 0.3em 0.1em;
padding: 0.35em 1.1em;
font: inherit;
color: var(--accent);
background: none;
color: var(--bg);
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 1.2em;
cursor: pointer;
}
.contact-trigger:hover {
color: var(--bg);
background: var(--accent);
background: color-mix(in srgb, var(--accent) 85%, var(--text));
border-color: color-mix(in srgb, var(--accent) 85%, var(--text));
}
.contact-trigger:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.contact-trigger.has-unread::after {