AetherDocs

1
2
3

/* 只做一件事：引入你的自定义 */

@import "../../custom/scss/index";

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function initAnchors() {
  document.querySelectorAll("h2, h3, h4").forEach(h => {
    if (h.dataset.anchorInit) return;
    h.dataset.anchorInit = "1";

    h.style.cursor = "pointer";

    h.addEventListener("click", () => {
      if (!h.id) return;

      const url = location.origin + location.pathname + "#" + h.id;
      navigator.clipboard.writeText(url);
    });
  });
}

document.addEventListener("DOMContentLoaded", initAnchors);
document.addEventListener("astro:page-load", initAnchors);
document.addEventListener("turbo:load", initAnchors);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// 阅读进度条（极轻量）

const bar = document.createElement("div");

bar.style.position = "fixed";
bar.style.top = "0";
bar.style.left = "0";
bar.style.height = "2px";
bar.style.background = "#5865f2";
bar.style.zIndex = "9999";


document.body.appendChild(bar);

window.addEventListener("scroll", () => {
  const h = document.documentElement;
  const percent = h.scrollTop / (h.scrollHeight - h.clientHeight);
  bar.style.width = percent * 100 + "%";
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

/* =========================
   文档基础排版优化
   ========================= */

/* 段落 */
p {
  line-height: 1.75;
  font-size: 1.05rem;
  color: var(--bs-body-color);
}

/* 列表 */
li {
  margin: 6px 0;
}

/* =========================
   表格优化（更稳）
   ========================= */

.table-responsive {
  border-radius: 8px;
  overflow: hidden;
}

/* =========================
   可读性增强（高级体验）
   ========================= */

/* 标题间距更自然 */
h1, h2, h3, h4 {
  line-height: 1.3;
  margin-top: 1.6em;
}

/* 段落之间呼吸感 */
p + p {
  margin-top: 0.8em;
}

/* =========================
   Inline Code（Discord风 + 优化）
   ========================= */

:not(pre) > code {
  padding: 0.15em 0.35em;
  margin: 0;

  border-radius: 4px;

  font-size: 85%;
  font-weight: 500;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  letter-spacing: 0.01em;
  font-variant-ligatures: none;
}

/* 🌙 Dark */
[data-bs-theme="dark"] :not(pre) > code {
  background: rgba(32, 34, 37, 0.95);
  color: #dcddde;
  border: 1px solid rgba(79, 84, 92, 0.3);
}

/* ☀️ Light */
[data-bs-theme="light"] :not(pre) > code {
  background: #f2f3f5;
  color: #2e3338;
  border: 1px solid #e3e5e8;
}

/* Hover 微反馈（高级感） */
:not(pre) > code:hover {
  filter: brightness(1.05);
}

1
2
3
4
5
6

/* 页面整体结构 */

main {
  max-width: 860px;
  margin: 0 auto;
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

/* =========================
   🔥 Sidebar RESET（彻底清除）
   ========================= */

.docs-sidebar a::before,
.docs-sidebar a::after,
.sidebar a::before,
.sidebar a::after {
  content: none !important;
  display: none !important;
}

.docs-sidebar a,
.sidebar a {
  position: static !important;
  transform: none !important;
}


/* =========================
   Sidebar 基础结构
   ========================= */

.docs-sidebar .sidebar a,
.docs-sidebar .docs-links a,
.sidebar a {
  display: block;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 2px 6px;
  text-decoration: none;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}


/* =========================
   🎯 ACTIVE 精准命中（关键）
   ========================= */

.docs-sidebar a.active,
.docs-sidebar a[aria-current="page"],
.docs-sidebar .active > a,
.sidebar a.active,
.sidebar a[aria-current="page"],
.sidebar .active > a {
  border-radius: 6px !important;
  font-weight: 500 !important;
}


/* =========================
   🌙 Dark Mode（Discord风）
   ========================= */

[data-bs-theme="dark"] {

  .sidebar {
    background: #2b2d31;
  }

  .docs-sidebar a,
  .sidebar a {
    color: #b5bac1;
  }

  .docs-sidebar a:hover,
  .sidebar a:hover {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    transform: translateX(2px);
  }

  .docs-sidebar a.active,
  .docs-sidebar a[aria-current="page"],
  .docs-sidebar .active > a,
  .sidebar a.active,
  .sidebar a[aria-current="page"],
  .sidebar .active > a {
    background: #5865f2 !important;
    color: #ffffff !important;
    transform: none !important;
  }
}


/* =========================
   ☀️ Light Mode（Discord风）
   ========================= */

[data-bs-theme="light"] {

  .sidebar {
    background: #f2f3f5;
  }

  .docs-sidebar a,
  .sidebar a {
    color: #2e3338;
  }

  .docs-sidebar a:hover,
  .sidebar a:hover {
    background: #e3e5e8;
    color: #000;
    transform: translateX(2px);
  }

  .docs-sidebar a.active,
  .docs-sidebar a[aria-current="page"],
  .docs-sidebar .active > a,
  .sidebar a.active,
  .sidebar a[aria-current="page"],
  .sidebar .active > a {
    background: #5865f2 !important;
    color: #ffffff !important;
    transform: none !important;
  }
}


/* =========================
   Layout
   ========================= */

.sidebar {
  position: sticky;
  top: var(--navbar-height);
  max-height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* =========================
   📚 Sidebar（安全增强版）
   ========================= */

/* 子列表默认显示（保持 Doks 原逻辑） */
.docs-sidebar ul {
  transition: all 0.2s ease;
}

/* 只给有子菜单的 li 加视觉标记 */
.docs-sidebar li > ul {
  margin-left: 10px;
}

/* 小箭头（纯视觉） */
.docs-sidebar li > a::after {
  pointer-events: none;
}

1
2
3
4
5

/* 统一变量（方便迁移） */

$accent: #5865f2;
$radius: 8px;
$text-muted: #999;