vol_west/saiti-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлено переключение темы и улучшено оформление ссылок в боковой панели

Browse Source
This commit is contained in:
tolst
2026-04-19 01:26:08 +03:00
parent f8d217465a
commit 195add8230
2 changed files with 171 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/styles/wiki-egames.css
View File

@@ -143,26 +143,39 @@ body {
}
.sidebar-content a {
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 50%, transparent);
border-radius: 0.2rem;
transition: border-color 170ms ease, background 170ms ease, color 170ms ease;
position: relative;
border: 0;
border-radius: 0.16rem;
padding-inline-start: 0.72rem;
transition: background 170ms ease, color 170ms ease;
}
.sidebar-content a:hover {
border-color: color-mix(in srgb, var(--sl-color-accent) 34%, transparent);
background: color-mix(in srgb, var(--sl-color-accent-low) 70%, transparent);
background: color-mix(in srgb, var(--sl-color-accent-low) 32%, transparent);
}
.sidebar-content :is(a[aria-current='page'], a[aria-current='page']:hover) {
border-color: color-mix(in srgb, var(--sl-color-accent) 52%, transparent);
background: linear-gradient(
130deg,
color-mix(in srgb, var(--wiki-purple-3) 14%, transparent),
color-mix(in srgb, var(--wiki-blue-2) 12%, transparent)
);
background: color-mix(in srgb, var(--sl-color-gray-6) 62%, transparent);
color: var(--sl-color-white);
}
.sidebar-content ul ul li {
border-inline-start-width: 2px;
border-inline-start-color: color-mix(in srgb, var(--sl-color-hairline-light) 86%, transparent);
transition: border-inline-start-color 180ms ease, border-inline-start-width 180ms ease;
}
.sidebar-content ul ul li:has(> a:hover) {
border-inline-start-width: 4px;
border-inline-start-color: color-mix(in srgb, var(--wiki-purple-2) 72%, #ffffff);
}
/* Делаем подсветку активного пункта частью общей левой линии группы. */
.sidebar-content li:has(> a[aria-current='page']) {
border-inline-start-width: 4px;
border-inline-start-color: color-mix(in srgb, var(--wiki-purple-2) 85%, #ffffff);
}
.content-panel > .sl-container {
border-radius: 0.2rem;
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 100%, transparent);
@@ -322,9 +335,60 @@ starlight-toc ul ul {
}
starlight-toc a {
position: relative;
display: block;
padding: 0.16rem 0;
padding: 0.2rem 0.42rem;
line-height: 1.38;
border-radius: 0.12rem;
transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
starlight-toc a::before {
content: '';
position: absolute;
inset-inline-start: 0.12rem;
inset-block: 0.2rem;
width: 2px;
border-radius: 99px;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wiki-purple-1) 92%, #ffffff),
color-mix(in srgb, var(--wiki-purple-3) 88%, #ffffff)
);
opacity: 0;
transform: scaleY(0.65);
transform-origin: center;
transition: opacity 180ms ease, transform 180ms ease;
}
starlight-toc a:hover {
transform: translateX(2px);
background: linear-gradient(
90deg,
color-mix(in srgb, var(--wiki-purple-2) 20%, transparent),
color-mix(in srgb, var(--wiki-blue-2) 10%, transparent)
);
color: var(--sl-color-white);
}
starlight-toc a:hover::before {
opacity: 1;
transform: scaleY(1);
}
starlight-toc a[aria-current='true'] {
background: linear-gradient(
90deg,
color-mix(in srgb, var(--wiki-purple-2) 34%, transparent),
color-mix(in srgb, var(--wiki-purple-3) 18%, transparent)
);
color: var(--sl-color-white);
transform: translateX(2px);
}
starlight-toc a[aria-current='true']::before {
opacity: 1;
transform: scaleY(1);
}
.starlight-aside {