mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-06-02 07:11:49 +00:00
5971a4e092
The Skills Hub at /skills had cards that, when expanded, showed only the
one-line description, tags, author, version, and an install command. For
the 163 bundled and optional skills shipped with the repo, this was thinner
than the data we already have on disk.
Three changes, all under website/:
1. extract-skills.py now pulls four extra fields per local skill:
- 'overview' — first non-heading body paragraph from SKILL.md (stripped
of admonitions/code fences, capped at ~500 chars at a sentence boundary)
- 'envVars' / 'commands' — from the prerequisites: block in frontmatter
- 'license' — from the top-level frontmatter
- 'docsPath' — slug to the per-skill /docs/user-guide/skills/.../* page,
computed with the same logic as generate-skill-docs.py
162 of 163 local skills get a non-empty overview automatically. The
remaining one (media/heartmula) has only headings/code in its body and
falls through to the description.
2. Skill TS interface + SkillCard expanded-panel render the new fields:
- Overview paragraph at the top of the panel
- Prerequisites box (env vars + required commands) when frontmatter
declares them
- License row alongside author/version
- 'View full documentation →' link to the per-skill docs page
Search now covers the overview text too, so users can find skills by
matching content from inside SKILL.md, not just the one-line description.
3. styles.module.css gains six new classes (overviewBlock, detailLabel,
overviewText, prereqBlock/Row/Kind/List/Item, docsLink) styled to match
the existing dark panel aesthetic.
External / community skills (Anthropic, LobeHub, Claude Marketplace cached
indexes) keep the old behavior — overview is empty, no prereqs, no docsPath.
Validation: 'npm run build' clean (exit 0); broken-link count unchanged at
155 baseline; all 163 generated docsPath values resolve to existing pages
under website/docs/user-guide/skills/.
910 lines
16 KiB
CSS
910 lines
16 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
|
|
|
|
.page {
|
|
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 4rem 2rem 2.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.heroGlow {
|
|
position: absolute;
|
|
top: -120px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 600px;
|
|
height: 400px;
|
|
background: radial-gradient(
|
|
ellipse at center,
|
|
rgba(255, 215, 0, 0.07) 0%,
|
|
transparent 70%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.heroContent {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.heroEyebrow {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 215, 0, 0.5);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.heroTitle {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1.1;
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
|
|
[data-theme="dark"] .heroTitle {
|
|
color: #fafaf6;
|
|
}
|
|
|
|
.heroSub {
|
|
font-size: 1.05rem;
|
|
color: var(--ifm-font-color-secondary, #9a968e);
|
|
line-height: 1.5;
|
|
margin: 0 0 2rem;
|
|
}
|
|
|
|
.heroAccent {
|
|
color: #ffd700;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.statsRow {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.statValue {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.statLabel {
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--ifm-font-color-secondary, #9a968e);
|
|
}
|
|
|
|
|
|
.controlsBar {
|
|
position: sticky;
|
|
top: 60px; /* below Docusaurus navbar */
|
|
z-index: 50;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
padding: 1rem 2rem;
|
|
backdrop-filter: blur(16px) saturate(1.4);
|
|
border-bottom: 1px solid rgba(255, 215, 0, 0.06);
|
|
}
|
|
|
|
[data-theme="dark"] .controlsBar {
|
|
background: rgba(7, 7, 13, 0.85);
|
|
}
|
|
|
|
.searchWrap {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
}
|
|
|
|
.searchIcon {
|
|
position: absolute;
|
|
left: 0.85rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: rgba(255, 215, 0, 0.35);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.searchInput {
|
|
width: 100%;
|
|
padding: 0.7rem 2.5rem 0.7rem 2.6rem;
|
|
font-size: 0.95rem;
|
|
font-family: "DM Sans", sans-serif;
|
|
border: 1px solid rgba(255, 215, 0, 0.12);
|
|
border-radius: 10px;
|
|
background: rgba(15, 15, 24, 0.6);
|
|
color: var(--ifm-font-color-base, #e8e4dc);
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.searchInput:focus {
|
|
border-color: rgba(255, 215, 0, 0.4);
|
|
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.06);
|
|
}
|
|
|
|
.searchInput::placeholder {
|
|
color: var(--ifm-font-color-secondary, #9a968e);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.clearBtn {
|
|
position: absolute;
|
|
right: 0.6rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: var(--ifm-font-color-secondary);
|
|
cursor: pointer;
|
|
padding: 0.15rem;
|
|
display: flex;
|
|
opacity: 0.6;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.clearBtn:hover {
|
|
opacity: 1;
|
|
color: #ffd700;
|
|
}
|
|
|
|
.sourcePills {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.srcPill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.35rem 0.75rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
border-radius: 20px;
|
|
background: transparent;
|
|
color: var(--ifm-font-color-secondary, #9a968e);
|
|
font-family: "DM Sans", sans-serif;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.srcPill:hover {
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
color: var(--ifm-font-color-base);
|
|
}
|
|
|
|
.srcPillActive {
|
|
border-color: var(--pill-border, rgba(255, 215, 0, 0.3));
|
|
background: var(--pill-bg, rgba(255, 215, 0, 0.06));
|
|
color: var(--pill-color, #ffd700);
|
|
}
|
|
|
|
.srcCount {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 0.68rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 0.05rem 0.35rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.srcPillActive .srcCount {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 260px 1fr;
|
|
gap: 0;
|
|
max-width: 1440px;
|
|
margin: 0 auto;
|
|
min-height: 60vh;
|
|
}
|
|
|
|
|
|
.sidebar {
|
|
position: sticky;
|
|
top: 160px;
|
|
height: calc(100vh - 160px);
|
|
overflow-y: auto;
|
|
padding: 1.25rem 1rem 2rem 1.5rem;
|
|
border-right: 1px solid rgba(255, 215, 0, 0.05);
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.sidebar::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 215, 0, 0.1);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.sidebarHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.sidebarTitle {
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--ifm-font-color-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebarClear {
|
|
font-family: "DM Sans", sans-serif;
|
|
font-size: 0.72rem;
|
|
color: rgba(255, 215, 0, 0.6);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.sidebarClear:hover {
|
|
color: #ffd700;
|
|
}
|
|
|
|
.catList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
.catItem {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.45rem 0.6rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--ifm-font-color-secondary, #9a968e);
|
|
font-family: "DM Sans", sans-serif;
|
|
font-size: 0.82rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.catItem:hover {
|
|
background: rgba(255, 215, 0, 0.04);
|
|
color: var(--ifm-font-color-base);
|
|
}
|
|
|
|
.catItemActive {
|
|
background: rgba(255, 215, 0, 0.08);
|
|
color: #ffd700;
|
|
}
|
|
|
|
.catItemIcon {
|
|
font-size: 0.9rem;
|
|
width: 1.3rem;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.catItemLabel {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.catItemCount {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 0.68rem;
|
|
color: rgba(255, 215, 0, 0.3);
|
|
min-width: 1.5rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.catItemActive .catItemCount {
|
|
color: rgba(255, 215, 0, 0.6);
|
|
}
|
|
|
|
.sidebarToggle {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.main {
|
|
padding: 1.25rem 1.5rem 3rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.filterSummary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid rgba(255, 215, 0, 0.05);
|
|
}
|
|
|
|
.filterCount {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
color: var(--ifm-font-color-base);
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.filterChip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
padding: 0.2rem 0.5rem;
|
|
border: 1px solid rgba(255, 215, 0, 0.15);
|
|
border-radius: 4px;
|
|
background: rgba(255, 215, 0, 0.04);
|
|
color: rgba(255, 215, 0, 0.8);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.filterChip button {
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
font-size: 0.85rem;
|
|
line-height: 1;
|
|
opacity: 0.6;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.filterChip button:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.clearAllBtn {
|
|
font-family: "DM Sans", sans-serif;
|
|
font-size: 0.75rem;
|
|
color: var(--ifm-font-color-secondary);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin-left: auto;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.clearAllBtn:hover {
|
|
color: #ffd700;
|
|
}
|
|
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
|
|
@keyframes cardIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
|
|
animation: cardIn 0.35s ease both;
|
|
}
|
|
|
|
[data-theme="dark"] .card {
|
|
background: #0c0c16;
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: rgba(255, 215, 0, 0.15);
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 215, 0, 0.05);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.cardExpanded {
|
|
border-color: rgba(255, 215, 0, 0.2);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 215, 0, 0.08);
|
|
}
|
|
|
|
.cardAccent {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 3px;
|
|
height: 100%;
|
|
opacity: 0.5;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.card:hover .cardAccent {
|
|
opacity: 1;
|
|
}
|
|
|
|
.cardInner {
|
|
padding: 1rem 1rem 0.85rem 1.15rem;
|
|
}
|
|
|
|
.cardTop {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.6rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.cardIcon {
|
|
font-size: 1.15rem;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
margin-top: 0.1rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.cardTitleGroup {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.cardTitle {
|
|
font-size: 0.92rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
word-break: break-word;
|
|
color: var(--ifm-font-color-base);
|
|
}
|
|
|
|
.sourcePill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 0.62rem;
|
|
font-weight: 500;
|
|
padding: 0.15rem 0.45rem;
|
|
border-radius: 4px;
|
|
border: 1px solid;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.cardDesc {
|
|
font-size: 0.82rem;
|
|
line-height: 1.55;
|
|
color: var(--ifm-font-color-secondary, #9a968e);
|
|
margin: 0 0 0.6rem;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cardDescFull {
|
|
-webkit-line-clamp: unset;
|
|
}
|
|
|
|
.cardMeta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.catButton {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 0.66rem;
|
|
padding: 0.15rem 0.45rem;
|
|
border: 1px solid rgba(255, 215, 0, 0.12);
|
|
border-radius: 3px;
|
|
background: rgba(255, 215, 0, 0.04);
|
|
color: rgba(255, 215, 0, 0.7);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.catButton:hover {
|
|
background: rgba(255, 215, 0, 0.1);
|
|
color: #ffd700;
|
|
border-color: rgba(255, 215, 0, 0.25);
|
|
}
|
|
|
|
.platformPill {
|
|
font-size: 0.66rem;
|
|
padding: 0.12rem 0.4rem;
|
|
border-radius: 3px;
|
|
background: rgba(96, 165, 250, 0.06);
|
|
color: rgba(96, 165, 250, 0.8);
|
|
border: 1px solid rgba(96, 165, 250, 0.1);
|
|
}
|
|
|
|
|
|
.cardDetail {
|
|
margin-top: 0.75rem;
|
|
padding-top: 0.7rem;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
|
animation: cardIn 0.2s ease both;
|
|
}
|
|
|
|
.tagRow {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
margin-bottom: 0.65rem;
|
|
}
|
|
|
|
.tagPill {
|
|
font-family: "DM Sans", sans-serif;
|
|
font-size: 0.68rem;
|
|
padding: 0.12rem 0.4rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 3px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
color: var(--ifm-font-color-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.tagPill:hover {
|
|
background: rgba(255, 215, 0, 0.06);
|
|
color: rgba(255, 215, 0, 0.8);
|
|
border-color: rgba(255, 215, 0, 0.15);
|
|
}
|
|
|
|
.authorRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.authorLabel {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 0.62rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--ifm-font-color-secondary);
|
|
opacity: 0.5;
|
|
min-width: 3.5rem;
|
|
}
|
|
|
|
.authorValue {
|
|
font-size: 0.78rem;
|
|
color: var(--ifm-font-color-base);
|
|
}
|
|
|
|
.installHint {
|
|
margin-top: 0.65rem;
|
|
padding: 0.45rem 0.65rem;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
border: 1px solid rgba(255, 215, 0, 0.06);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.installHint code {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 0.72rem;
|
|
color: rgba(255, 215, 0, 0.7);
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.overviewBlock {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.detailLabel {
|
|
display: block;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 0.6rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--ifm-font-color-secondary);
|
|
opacity: 0.55;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.overviewText {
|
|
font-size: 0.82rem;
|
|
line-height: 1.5;
|
|
color: var(--ifm-font-color-base);
|
|
opacity: 0.92;
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.prereqBlock {
|
|
margin-bottom: 0.75rem;
|
|
padding: 0.5rem 0.65rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
border-radius: 5px;
|
|
background: rgba(255, 255, 255, 0.015);
|
|
}
|
|
|
|
.prereqRow {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.prereqRow:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.prereqKind {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 0.6rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--ifm-font-color-secondary);
|
|
opacity: 0.55;
|
|
min-width: 2.5rem;
|
|
padding-top: 0.15rem;
|
|
}
|
|
|
|
.prereqList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.prereqItem {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 0.7rem;
|
|
padding: 0.1rem 0.4rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 3px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
color: rgba(255, 215, 0, 0.6);
|
|
}
|
|
|
|
.docsLink {
|
|
display: block;
|
|
margin-top: 0.65rem;
|
|
padding: 0.45rem 0.65rem;
|
|
border: 1px solid rgba(96, 165, 250, 0.2);
|
|
border-radius: 5px;
|
|
background: rgba(96, 165, 250, 0.06);
|
|
color: rgba(96, 165, 250, 0.9);
|
|
font-size: 0.78rem;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.docsLink:hover {
|
|
background: rgba(96, 165, 250, 0.12);
|
|
color: rgba(96, 165, 250, 1);
|
|
border-color: rgba(96, 165, 250, 0.35);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.highlight {
|
|
background: rgba(255, 215, 0, 0.2);
|
|
color: #ffd700;
|
|
border-radius: 2px;
|
|
padding: 0 1px;
|
|
}
|
|
|
|
|
|
.loadMoreWrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.loadMoreBtn {
|
|
font-family: "DM Sans", sans-serif;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
padding: 0.6rem 1.5rem;
|
|
border: 1px solid rgba(255, 215, 0, 0.2);
|
|
border-radius: 8px;
|
|
background: rgba(255, 215, 0, 0.04);
|
|
color: rgba(255, 215, 0, 0.8);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.loadMoreBtn:hover {
|
|
background: rgba(255, 215, 0, 0.08);
|
|
border-color: rgba(255, 215, 0, 0.35);
|
|
color: #ffd700;
|
|
}
|
|
|
|
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.emptyIcon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.emptyTitle {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin: 0 0 0.5rem;
|
|
color: var(--ifm-font-color-base);
|
|
}
|
|
|
|
.emptyDesc {
|
|
font-size: 0.85rem;
|
|
color: var(--ifm-font-color-secondary);
|
|
margin: 0 0 1.25rem;
|
|
}
|
|
|
|
.emptyReset {
|
|
font-family: "DM Sans", sans-serif;
|
|
font-size: 0.85rem;
|
|
padding: 0.5rem 1.25rem;
|
|
border: 1px solid rgba(255, 215, 0, 0.25);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: #ffd700;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.emptyReset:hover {
|
|
background: rgba(255, 215, 0, 0.08);
|
|
}
|
|
|
|
|
|
.backdrop {
|
|
display: none;
|
|
}
|
|
|
|
.activeCatBadge {
|
|
font-size: 0.72rem;
|
|
padding: 0.1rem 0.4rem;
|
|
border-radius: 3px;
|
|
background: rgba(255, 215, 0, 0.1);
|
|
color: rgba(255, 215, 0, 0.8);
|
|
}
|
|
|
|
|
|
@media (max-width: 900px) {
|
|
.layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sidebar {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 280px;
|
|
z-index: 200;
|
|
background: #0a0a14;
|
|
border-right: 1px solid rgba(255, 215, 0, 0.1);
|
|
padding-top: 1.5rem;
|
|
height: 100vh;
|
|
}
|
|
|
|
.sidebarOpen {
|
|
display: block;
|
|
}
|
|
|
|
.backdrop {
|
|
display: block;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 190;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.sidebarToggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.5rem 0.85rem;
|
|
margin: 0 1rem 0.75rem;
|
|
border: 1px solid rgba(255, 215, 0, 0.1);
|
|
border-radius: 6px;
|
|
background: rgba(255, 215, 0, 0.03);
|
|
color: var(--ifm-font-color-secondary);
|
|
font-family: "DM Sans", sans-serif;
|
|
font-size: 0.82rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.sidebarToggle:hover {
|
|
border-color: rgba(255, 215, 0, 0.2);
|
|
color: var(--ifm-font-color-base);
|
|
}
|
|
|
|
.hero {
|
|
padding: 2.5rem 1.25rem 1.75rem;
|
|
}
|
|
|
|
.heroTitle {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.statsRow {
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.statValue {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.controlsBar {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.main {
|
|
padding: 0.75rem 1rem 2rem;
|
|
}
|
|
|
|
.grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 901px) and (max-width: 1100px) {
|
|
.grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
}
|
|
}
|