mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
SnapOtterandGitHub
51022628dc
Fixes #557. Vivid fill, ink label: brand #E07832 stays on fills while primary-foreground flips to #1A1814 (5.83:1); new theme-aware ink tokens carry orange, destructive, and success text roles; opacity-modified text purged; landing, demo, and the docs fund button retuned. Guarded by a CSS-parsing unit contrast test, rebuilt axe baselines with zero contrast entries, a new landing axe smoke, and fully regenerated darwin visual baselines.
142 lines
3.6 KiB
CSS
142 lines
3.6 KiB
CSS
/* Right-side custom nav cluster: our own appearance toggle + Fund + GitHub Star.
|
|
VitePress's default theme collapses appearance/social/translations into a
|
|
compact three-dots flyout below 1280px and shows them inline at >=1280px, so
|
|
the stock nav never overflows. Our cluster is wider than that native inline
|
|
set, so forcing it inline at every width pushed the nav past the viewport: a
|
|
horizontal page scrollbar in the 768-959px band (the nav is in normal flow
|
|
there) and off-screen clipping of the buttons on 1280-1366px laptops (the nav
|
|
is position:fixed at >=960px, so it clips instead of scrolling). Fix: show our
|
|
cluster only once the layout reaches its max width (1440px), where it fits, and
|
|
defer to VitePress's native responsive nav below that (three-dots flyout under
|
|
1280px, inline appearance + social from 1280-1439px). */
|
|
.nav-bar-right {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 1440px) {
|
|
.nav-bar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
/* Our cluster carries the appearance toggle at this width, so hide VitePress's
|
|
own inline toggle to avoid a duplicate. */
|
|
.VPNavBarAppearance {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* VitePress anchors flyout dropdowns with a physical `right: 0`, which does not
|
|
flip for RTL. In RTL the three-dots menu then opens off-screen to the left and
|
|
adds horizontal overflow even while closed (it is position:absolute). Anchor it
|
|
to the start edge so it opens inward instead. */
|
|
:root[dir="rtl"] .VPNavBarExtra .menu {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
|
|
/* GitHub button group */
|
|
.github-btn-wrapper {
|
|
display: flex;
|
|
align-items: stretch;
|
|
height: 30px;
|
|
}
|
|
|
|
.github-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 10px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 30px;
|
|
color: var(--vp-c-text-1);
|
|
background: var(--vp-c-bg-soft);
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
transition: border-color 0.25s, background 0.25s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.github-btn:hover {
|
|
background: var(--vp-c-bg-mute);
|
|
border-color: var(--vp-c-text-3);
|
|
}
|
|
|
|
.github-icon {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.github-btn-label {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
/* Star count badge - attached to right side of button */
|
|
.github-btn-count {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 8px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 30px;
|
|
color: var(--vp-c-text-2);
|
|
background: var(--vp-c-bg);
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-left: none;
|
|
border-radius: 0 6px 6px 0;
|
|
text-decoration: none;
|
|
transition: color 0.25s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.github-btn-count:hover {
|
|
color: var(--vp-c-brand-1);
|
|
}
|
|
|
|
/* When count is present, left-button gets flat right edge */
|
|
.github-btn-wrapper .github-btn:first-child:not(:last-child) {
|
|
border-radius: 6px 0 0 6px;
|
|
}
|
|
|
|
/* Fund Development button */
|
|
.fund-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 10px;
|
|
height: 30px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 30px;
|
|
color: #cf236f;
|
|
background: rgba(219, 39, 119, 0.08);
|
|
border: 1px solid rgba(219, 39, 119, 0.3);
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
transition: border-color 0.25s, background 0.25s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fund-btn:hover {
|
|
background: rgba(219, 39, 119, 0.15);
|
|
border-color: rgba(219, 39, 119, 0.5);
|
|
}
|
|
|
|
.fund-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dark .fund-btn {
|
|
color: #f472b6;
|
|
background: rgba(244, 114, 182, 0.08);
|
|
border-color: rgba(244, 114, 182, 0.25);
|
|
}
|
|
|
|
.dark .fund-btn:hover {
|
|
background: rgba(244, 114, 182, 0.15);
|
|
border-color: rgba(244, 114, 182, 0.4);
|
|
}
|