jekyll-sticky-toc 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE +21 -0
- data/README.md +178 -0
- data/assets/jekyll-sticky-toc.css +474 -0
- data/assets/jekyll-sticky-toc.js +768 -0
- data/lib/jekyll/sticky_toc/config.rb +282 -0
- data/lib/jekyll/sticky_toc/heading_extractor.rb +51 -0
- data/lib/jekyll/sticky_toc/heading_sync.rb +39 -0
- data/lib/jekyll/sticky_toc/hook_injector.rb +113 -0
- data/lib/jekyll/sticky_toc/root_style_builder.rb +20 -0
- data/lib/jekyll/sticky_toc/source_heading_extractor.rb +79 -0
- data/lib/jekyll/sticky_toc/templates/toc.html +26 -0
- data/lib/jekyll/sticky_toc/toc_builder.rb +76 -0
- data/lib/jekyll/sticky_toc/toc_list_renderer.rb +149 -0
- data/lib/jekyll/sticky_toc/version.rb +7 -0
- data/lib/jekyll/sticky_toc.rb +12 -0
- data/lib/jekyll-sticky-toc.rb +3 -0
- metadata +103 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: 256b4ad57c90424868f93f18927fef49f2f92ed9a22558e605119871057819ee
|
|
4
|
+
data.tar.gz: fc87e0081a2868e7997d63080c97ab5d0c7d02930f8900ee0a6e81ea4fdb6461
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: ac0d4d5d16341e38d1b2f70712790d6d364d502ad6be6e0a422a9b5bd1e55a8197a2bd74367bc41c266607617a2a231eedbe09e3649b82793748f3a13be77519
|
|
7
|
+
data.tar.gz: 26fecc33ab59d26a40f6f68ea6d43c90c213c99fd1860f9d132285084973f535254b4889aded354f4dcb3166537dea9182369b70a4d567bea5f057abc2a8f126
|
data/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
data/README.md
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
# Jekyll Sticky TOC
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
[](https://badge.fury.io/rb/jekyll-sticky-toc)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
**Jekyll Sticky TOC** is a lightweight, open-source [Jekyll](https://jekyllrb.com) plugin that automatically generates a sticky table of contents from your page headings.
|
|
9
|
+
|
|
10
|
+
It works flawlessly across mobile and desktop out-of-the-box, with flexible styling options available through simple configuration.
|
|
11
|
+
|
|
12
|
+
<br>
|
|
13
|
+
|
|
14
|
+
* [Installation](#installation)
|
|
15
|
+
* [Getting Started](#getting-started)
|
|
16
|
+
* [Configuration](#configuration)
|
|
17
|
+
* [Contributions](#contributions)
|
|
18
|
+
|
|
19
|
+
<br>
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
### With Bundler
|
|
24
|
+
|
|
25
|
+
Add `jekyll-sticky-toc` gem to your `Gemfile`:
|
|
26
|
+
|
|
27
|
+
```ruby
|
|
28
|
+
gem "jekyll-sticky-toc"
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
or use GitHub repository link:
|
|
32
|
+
|
|
33
|
+
```ruby
|
|
34
|
+
gem "jekyll-sticky-toc", git: "https://github.com/developerlee79/jekyll-sticky-toc.git"
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Manual
|
|
38
|
+
|
|
39
|
+
Or install the gem manually and specify the plugin in your `_config.yml`:
|
|
40
|
+
|
|
41
|
+
```shell
|
|
42
|
+
gem install jekyll-sticky-toc
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
```yaml
|
|
46
|
+
plugins:
|
|
47
|
+
- jekyll-sticky-toc
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
<br>
|
|
51
|
+
|
|
52
|
+
## Getting Started
|
|
53
|
+
|
|
54
|
+
Add `toc: true` to a page where you want TOC to appear:
|
|
55
|
+
|
|
56
|
+
```markdown
|
|
57
|
+
---
|
|
58
|
+
layout: default
|
|
59
|
+
title: My Project
|
|
60
|
+
toc: true
|
|
61
|
+
---
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
To enable TOC for collections by default, see the `target_collection` option in the Configuration section.
|
|
65
|
+
|
|
66
|
+
Build and run your site:
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
bundle exec jekyll serve
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
<br>
|
|
73
|
+
|
|
74
|
+
## Configuration
|
|
75
|
+
|
|
76
|
+
Add or adjust these options in `_config.yml`:
|
|
77
|
+
|
|
78
|
+
```yaml
|
|
79
|
+
sticky_toc:
|
|
80
|
+
min_depth: 1
|
|
81
|
+
max_depth: 6
|
|
82
|
+
target_collection: []
|
|
83
|
+
side: right
|
|
84
|
+
fold: false
|
|
85
|
+
marker: none
|
|
86
|
+
scroll_behavior:
|
|
87
|
+
hide_at_top: false
|
|
88
|
+
hide_at_bottom: true
|
|
89
|
+
style:
|
|
90
|
+
background_color: "#ffffff"
|
|
91
|
+
text_color: "#111827"
|
|
92
|
+
highlight_color: "#2563eb"
|
|
93
|
+
border_style:
|
|
94
|
+
type: solid
|
|
95
|
+
color: "#e5e7eb"
|
|
96
|
+
radius: 8
|
|
97
|
+
width: 15
|
|
98
|
+
height: 50
|
|
99
|
+
vertical_start: 30
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
| Key | Default | Description |
|
|
103
|
+
|-------------------------------|-----------|-------------|
|
|
104
|
+
| `min_depth` | `1` | Minimum heading depth included (`1` = `h1`) |
|
|
105
|
+
| `max_depth` | `6` | Maximum heading depth included |
|
|
106
|
+
| `target_collection` | `[]` | List of collections to enable TOC by default. Individual `toc: false` in Front Matter will override this. |
|
|
107
|
+
| `side` | `right` | TOC panel side (`left` or `right`) |
|
|
108
|
+
| `fold` | `false` | Enables collapsible nested sections |
|
|
109
|
+
| `marker` | `none` | Marker style when `fold` is `false` (`dash`, `dot`, `none`) |
|
|
110
|
+
| `scroll_behavior.hide_at_top` | `false` | Hides TOC at page top when enabled (No effect in mobile layout) |
|
|
111
|
+
| `scroll_behavior.hide_at_bottom` | `true` | Hides TOC at page bottom when enabled (No effect in mobile layout) |
|
|
112
|
+
| `style.background_color` | `#ffffff` | Panel base background color |
|
|
113
|
+
| `style.text_color` | `#111827` | Panel text color |
|
|
114
|
+
| `style.highlight_color` | `#2563eb` | Active and hover highlight color |
|
|
115
|
+
| `style.border_style.type` | `solid` | Border type (`solid`, `dot`, `none`) |
|
|
116
|
+
| `style.border_style.color` | `#e5e7eb` | Border color |
|
|
117
|
+
| `style.border_style.radius` | `8` | Border radius in px |
|
|
118
|
+
| `style.width` | `15` | Desktop: % of `100vw`, then CSS clamps 160–640px. Mobile layout uses fixed sizing. Allowed `8`-`40`. |
|
|
119
|
+
| `style.height` | `50` | Desktop: % of `(100vh − 120px)` for panel `max-height`. Mobile uses separate rules. Allowed `20`–`90`. |
|
|
120
|
+
| `style.vertical_start` | `30` | Desktop: panel `top` as % of `100vh`. At ≤900px, CSS uses `top: auto` and bottom anchoring instead. Allowed `0`–`100`. |
|
|
121
|
+
|
|
122
|
+
<br>
|
|
123
|
+
|
|
124
|
+
### Theming and CSS variables
|
|
125
|
+
|
|
126
|
+
The TOC panel reads appearance from CSS custom properties on `.jtoc-root`, which inherit from ancestor elements.
|
|
127
|
+
|
|
128
|
+
You can match multiple themes(e.light / dark) by scoping those variables under selectors such as `html[data-theme="…"]`, classes on `html` or `body`, or `prefers-color-scheme`, so the panel follows your site chrome without another Jekyll build.
|
|
129
|
+
|
|
130
|
+
Precedence is as follows:
|
|
131
|
+
|
|
132
|
+
| Priority | Source |
|
|
133
|
+
|---------:|--------|
|
|
134
|
+
| 1 | Site CSS on `.jtoc-root` or an ancestor (for example `--jtoc-bg`) |
|
|
135
|
+
| 2 | `_config.yml` under `sticky_toc.style` |
|
|
136
|
+
| 3 | Bundled plugin defaults |
|
|
137
|
+
|
|
138
|
+
For each property, if your CSS sets a value that differs from the plugin default, that CSS wins. Otherwise the config value applies when present; otherwise the bundled default is used.
|
|
139
|
+
|
|
140
|
+
Set the variables on `.jtoc-root` or any ancestor. Example with theme-scoped selectors:
|
|
141
|
+
|
|
142
|
+
```css
|
|
143
|
+
html[data-theme="light"] .jtoc-root {
|
|
144
|
+
--jtoc-bg: #ffffff;
|
|
145
|
+
--jtoc-text: #111827;
|
|
146
|
+
--jtoc-highlight: #2563eb;
|
|
147
|
+
--jtoc-border-color: #e5e7eb;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
html[data-theme="dark"] .jtoc-root {
|
|
151
|
+
--jtoc-bg: #111827;
|
|
152
|
+
--jtoc-text: #f3f4f6;
|
|
153
|
+
--jtoc-highlight: #60a5fa;
|
|
154
|
+
--jtoc-border-color: #374151;
|
|
155
|
+
}
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
| Variable | Role | Plugin default |
|
|
159
|
+
|----------|------|----------------|
|
|
160
|
+
| `--jtoc-bg` | Base background for panel tint | `#ffffff` |
|
|
161
|
+
| `--jtoc-text` | Root text color | `#111827` |
|
|
162
|
+
| `--jtoc-muted` | TOC link default color | `#6b7280` |
|
|
163
|
+
| `--jtoc-highlight` | Active and hover accent | `#2563eb` |
|
|
164
|
+
| `--jtoc-highlight-bg-hover` | Row hover background | Derived from highlight |
|
|
165
|
+
| `--jtoc-highlight-bg-active` | Active row background | Derived from highlight |
|
|
166
|
+
| `--jtoc-border-color` | Panel border color | `#e5e7eb` |
|
|
167
|
+
| `--jtoc-border-style` | Border style | `solid` |
|
|
168
|
+
| `--jtoc-radius` | Panel corner radius in px | `8px` |
|
|
169
|
+
| `--jtoc-width-ratio` | Same as `style.width`: % of `100vw`, 160–640px clamp (desktop; mobile overrides) | `15` |
|
|
170
|
+
| `--jtoc-height-ratio` | Same as `style.height`: % of `(100vh − 120px)` for `max-height` base (desktop; mobile overrides) | `50` |
|
|
171
|
+
| `--jtoc-panel-vertical-start` | Same as `style.vertical_start`: % of `100vh` for `top` (desktop; overridden ≤900px) | `30` |
|
|
172
|
+
| `--jtoc-scroll-margin-top` | Heading anchor scroll margin | `88px` |
|
|
173
|
+
|
|
174
|
+
<br>
|
|
175
|
+
|
|
176
|
+
## Contributions
|
|
177
|
+
|
|
178
|
+
Contributions are welcome. If you have an improvement or idea, feel free to open a pull request.
|
|
@@ -0,0 +1,474 @@
|
|
|
1
|
+
.jtoc-root {
|
|
2
|
+
--jtoc-bg: #ffffff;
|
|
3
|
+
--jtoc-text: #111827;
|
|
4
|
+
--jtoc-border-color: #e5e7eb;
|
|
5
|
+
--jtoc-border-style: solid;
|
|
6
|
+
--jtoc-muted: #6b7280;
|
|
7
|
+
--jtoc-highlight: #2563eb;
|
|
8
|
+
--jtoc-highlight-bg-hover: color-mix(in srgb, var(--jtoc-highlight) 12%, transparent);
|
|
9
|
+
--jtoc-highlight-bg-active: color-mix(in srgb, var(--jtoc-highlight) 16%, transparent);
|
|
10
|
+
--jtoc-radius: 8px;
|
|
11
|
+
--jtoc-width-ratio: 15;
|
|
12
|
+
--jtoc-width: min(640px, max(160px, calc(100vw * (var(--jtoc-width-ratio) / 100))));
|
|
13
|
+
--jtoc-height-ratio: 50;
|
|
14
|
+
--jtoc-max-height-base: calc((100vh - 120px) * (var(--jtoc-height-ratio) / 100));
|
|
15
|
+
--jtoc-panel-max-height: var(--jtoc-max-height-base);
|
|
16
|
+
--jtoc-panel-vertical-start: 30;
|
|
17
|
+
--jtoc-offset-x: -15px;
|
|
18
|
+
--jtoc-edge-extra-left: 0px;
|
|
19
|
+
--jtoc-edge-extra-right: 0px;
|
|
20
|
+
--jtoc-z-index: 2147483000;
|
|
21
|
+
--jtoc-mobile-size: 52px;
|
|
22
|
+
--jtoc-scroll-margin-top: 88px;
|
|
23
|
+
color: var(--jtoc-text);
|
|
24
|
+
font-size: 14px;
|
|
25
|
+
line-height: 1.5;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h1[id],
|
|
29
|
+
h2[id],
|
|
30
|
+
h3[id],
|
|
31
|
+
h4[id],
|
|
32
|
+
h5[id],
|
|
33
|
+
h6[id] {
|
|
34
|
+
scroll-margin-top: var(--jtoc-scroll-margin-top);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.jtoc-panel {
|
|
38
|
+
position: relative;
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
background: color-mix(in srgb, var(--jtoc-bg) 94%, #ffffff 6%);
|
|
42
|
+
border: 1px var(--jtoc-border-style) var(--jtoc-border-color);
|
|
43
|
+
border-radius: var(--jtoc-radius);
|
|
44
|
+
box-shadow: none;
|
|
45
|
+
opacity: 1;
|
|
46
|
+
width: var(--jtoc-width);
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
max-height: var(--jtoc-panel-max-height);
|
|
49
|
+
z-index: var(--jtoc-z-index);
|
|
50
|
+
overscroll-behavior-y: contain;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.jtoc-root .jtoc-panel {
|
|
54
|
+
position: fixed;
|
|
55
|
+
top: calc(100vh * (var(--jtoc-panel-vertical-start) / 100));
|
|
56
|
+
transform: translate3d(var(--jtoc-offset-x), 0, 0);
|
|
57
|
+
max-height: var(--jtoc-panel-max-height);
|
|
58
|
+
min-height: 0;
|
|
59
|
+
transition: transform 0.78s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.78s cubic-bezier(0.19, 1, 0.22, 1), top 0.72s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.72s cubic-bezier(0.22, 1, 0.36, 1);
|
|
60
|
+
will-change: transform, opacity, top, max-height;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.jtoc-root.jtoc-panel-layout-init .jtoc-panel {
|
|
64
|
+
transition: transform 0.78s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.78s cubic-bezier(0.19, 1, 0.22, 1), top 0.72s cubic-bezier(0.22, 1, 0.36, 1);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.jtoc-root[data-side="left"] .jtoc-panel {
|
|
68
|
+
left: calc(24px + var(--jtoc-edge-extra-left));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.jtoc-root[data-side="right"] .jtoc-panel {
|
|
72
|
+
right: calc(24px + var(--jtoc-edge-extra-right));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.jtoc-root.is-scroll-hidden .jtoc-panel {
|
|
76
|
+
opacity: 0;
|
|
77
|
+
pointer-events: none;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.jtoc-root[data-side="left"].is-scroll-hidden .jtoc-panel {
|
|
81
|
+
transform: translate3d(calc(-100% - 10px + var(--jtoc-offset-x)), 0, 0) scale(0.985);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.jtoc-root[data-side="right"].is-scroll-hidden .jtoc-panel {
|
|
85
|
+
transform: translate3d(calc(100% + 10px + var(--jtoc-offset-x)), 0, 0) scale(0.985);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.jtoc-root.is-scroll-hidden .jtoc-mobile-toggle {
|
|
89
|
+
opacity: 0;
|
|
90
|
+
pointer-events: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.jtoc-nav {
|
|
94
|
+
flex: 1 1 auto;
|
|
95
|
+
min-height: 0;
|
|
96
|
+
overflow-x: hidden;
|
|
97
|
+
overflow-y: auto;
|
|
98
|
+
padding: 10px 8px 12px;
|
|
99
|
+
-ms-overflow-style: none;
|
|
100
|
+
scrollbar-width: none;
|
|
101
|
+
overscroll-behavior-y: contain;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.jtoc-nav::-webkit-scrollbar {
|
|
105
|
+
display: none;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.jtoc-list {
|
|
109
|
+
list-style: none;
|
|
110
|
+
margin: 0;
|
|
111
|
+
padding-left: 0;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.jtoc-item[data-jtoc-display-level="0"] > .jtoc-link-row {
|
|
115
|
+
padding-left: 0;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.jtoc-root[data-fold="true"] .jtoc-item[data-jtoc-display-level="0"] > .jtoc-link-row {
|
|
119
|
+
padding-left: 8px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.jtoc-root[data-fold="true"] {
|
|
123
|
+
--jtoc-fold-indent-base: 8px;
|
|
124
|
+
--jtoc-fold-indent-step: 14px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.jtoc-root[data-fold="true"] .jtoc-item[data-jtoc-display-level="1"] > .jtoc-link-row {
|
|
128
|
+
padding-left: calc(
|
|
129
|
+
var(--jtoc-fold-indent-base) + var(--jtoc-fold-indent-step) * 1
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.jtoc-root[data-fold="true"] .jtoc-item[data-jtoc-display-level="2"] > .jtoc-link-row {
|
|
134
|
+
padding-left: calc(
|
|
135
|
+
var(--jtoc-fold-indent-base) + var(--jtoc-fold-indent-step) * 2
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.jtoc-root[data-fold="true"] .jtoc-item[data-jtoc-display-level="3"] > .jtoc-link-row {
|
|
140
|
+
padding-left: calc(
|
|
141
|
+
var(--jtoc-fold-indent-base) + var(--jtoc-fold-indent-step) * 3
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.jtoc-root[data-fold="true"] .jtoc-item[data-jtoc-display-level="4"] > .jtoc-link-row {
|
|
146
|
+
padding-left: calc(
|
|
147
|
+
var(--jtoc-fold-indent-base) + var(--jtoc-fold-indent-step) * 4
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.jtoc-root[data-fold="true"] .jtoc-item[data-jtoc-display-level="5"] > .jtoc-link-row {
|
|
152
|
+
padding-left: calc(
|
|
153
|
+
var(--jtoc-fold-indent-base) + var(--jtoc-fold-indent-step) * 5
|
|
154
|
+
);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.jtoc-root:not([data-fold="true"]) {
|
|
158
|
+
--jtoc-nofold-indent-base: 10px;
|
|
159
|
+
--jtoc-nofold-indent-step: 14px;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.jtoc-root:not([data-fold="true"]) .jtoc-item[data-jtoc-display-level="0"] > .jtoc-link-row {
|
|
163
|
+
padding-left: var(--jtoc-nofold-indent-base);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.jtoc-root:not([data-fold="true"]) .jtoc-item[data-jtoc-display-level="1"] > .jtoc-link-row {
|
|
167
|
+
padding-left: calc(
|
|
168
|
+
var(--jtoc-nofold-indent-base) + var(--jtoc-nofold-indent-step) * 1
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.jtoc-root:not([data-fold="true"]) .jtoc-item[data-jtoc-display-level="2"] > .jtoc-link-row {
|
|
173
|
+
padding-left: calc(
|
|
174
|
+
var(--jtoc-nofold-indent-base) + var(--jtoc-nofold-indent-step) * 2
|
|
175
|
+
);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.jtoc-root:not([data-fold="true"]) .jtoc-item[data-jtoc-display-level="3"] > .jtoc-link-row {
|
|
179
|
+
padding-left: calc(
|
|
180
|
+
var(--jtoc-nofold-indent-base) + var(--jtoc-nofold-indent-step) * 3
|
|
181
|
+
);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.jtoc-root:not([data-fold="true"]) .jtoc-item[data-jtoc-display-level="4"] > .jtoc-link-row {
|
|
185
|
+
padding-left: calc(
|
|
186
|
+
var(--jtoc-nofold-indent-base) + var(--jtoc-nofold-indent-step) * 4
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.jtoc-root:not([data-fold="true"]) .jtoc-item[data-jtoc-display-level="5"] > .jtoc-link-row {
|
|
191
|
+
padding-left: calc(
|
|
192
|
+
var(--jtoc-nofold-indent-base) + var(--jtoc-nofold-indent-step) * 5
|
|
193
|
+
);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.jtoc-item[data-jtoc-display-level="1"] > .jtoc-link-row {
|
|
197
|
+
padding-left: 10px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.jtoc-item[data-jtoc-display-level="2"] > .jtoc-link-row {
|
|
201
|
+
padding-left: 20px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.jtoc-item[data-jtoc-display-level="3"] > .jtoc-link-row {
|
|
205
|
+
padding-left: 30px;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.jtoc-item[data-jtoc-display-level="4"] > .jtoc-link-row {
|
|
209
|
+
padding-left: 40px;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.jtoc-item[data-jtoc-display-level="5"] > .jtoc-link-row {
|
|
213
|
+
padding-left: 50px;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.jtoc-item {
|
|
217
|
+
margin: 0;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.jtoc-link-row {
|
|
221
|
+
display: flex;
|
|
222
|
+
align-items: center;
|
|
223
|
+
border-radius: 6px;
|
|
224
|
+
transition: background 0.15s ease, color 0.15s ease;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.jtoc-link-row:hover {
|
|
228
|
+
background: var(--jtoc-highlight-bg-hover);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.jtoc-link-row.is-active {
|
|
232
|
+
background: var(--jtoc-highlight-bg-active);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.jtoc-fold-toggle,
|
|
236
|
+
.jtoc-fold-spacer {
|
|
237
|
+
width: 12px;
|
|
238
|
+
height: 1.5em;
|
|
239
|
+
margin-left: 0;
|
|
240
|
+
margin-right: 4px;
|
|
241
|
+
margin-top: 4px;
|
|
242
|
+
flex: 0 0 12px;
|
|
243
|
+
display: inline-flex;
|
|
244
|
+
align-self: flex-start;
|
|
245
|
+
align-items: center;
|
|
246
|
+
justify-content: center;
|
|
247
|
+
color: color-mix(in srgb, var(--jtoc-muted) 72%, var(--jtoc-bg) 28%);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.jtoc-marker {
|
|
251
|
+
width: 12px;
|
|
252
|
+
height: 1.5em;
|
|
253
|
+
margin-left: 0;
|
|
254
|
+
margin-right: 4px;
|
|
255
|
+
margin-top: 4px;
|
|
256
|
+
flex: 0 0 12px;
|
|
257
|
+
display: inline-flex;
|
|
258
|
+
align-self: flex-start;
|
|
259
|
+
align-items: center;
|
|
260
|
+
justify-content: center;
|
|
261
|
+
color: color-mix(in srgb, var(--jtoc-muted) 72%, var(--jtoc-bg) 28%);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.jtoc-marker-dot::before {
|
|
265
|
+
content: "";
|
|
266
|
+
width: 5.4px;
|
|
267
|
+
height: 5.4px;
|
|
268
|
+
border-radius: 999px;
|
|
269
|
+
background: currentColor;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.jtoc-marker-dash::before {
|
|
273
|
+
content: "";
|
|
274
|
+
width: 6px;
|
|
275
|
+
height: 2.5px;
|
|
276
|
+
border-radius: 999px;
|
|
277
|
+
background: currentColor;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.jtoc-link-row:hover .jtoc-marker,
|
|
281
|
+
.jtoc-link-row.is-active .jtoc-marker {
|
|
282
|
+
color: color-mix(in srgb, var(--jtoc-highlight) 72%, var(--jtoc-bg) 28%);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.jtoc-fold-toggle {
|
|
286
|
+
border: none;
|
|
287
|
+
background: transparent;
|
|
288
|
+
padding: 0;
|
|
289
|
+
cursor: pointer;
|
|
290
|
+
display: inline-flex;
|
|
291
|
+
align-items: center;
|
|
292
|
+
justify-content: center;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.jtoc-fold-toggle::before {
|
|
296
|
+
content: "";
|
|
297
|
+
width: 0;
|
|
298
|
+
height: 0;
|
|
299
|
+
border-left: 3.5px solid transparent;
|
|
300
|
+
border-right: 3.5px solid transparent;
|
|
301
|
+
border-top: 5px solid currentColor;
|
|
302
|
+
transform: rotate(0deg);
|
|
303
|
+
transform-origin: 50% 40%;
|
|
304
|
+
transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.jtoc-link-row:hover .jtoc-fold-toggle,
|
|
308
|
+
.jtoc-link-row.is-active .jtoc-fold-toggle {
|
|
309
|
+
color: color-mix(in srgb, var(--jtoc-highlight) 72%, var(--jtoc-bg) 28%);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.jtoc-item.has-children.is-open > .jtoc-link-row .jtoc-fold-toggle::before {
|
|
313
|
+
transform: rotate(180deg);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.jtoc-link {
|
|
317
|
+
display: block;
|
|
318
|
+
color: var(--jtoc-muted);
|
|
319
|
+
text-decoration: none;
|
|
320
|
+
padding: 4px 8px 4px 0.5px;
|
|
321
|
+
border-radius: 8px;
|
|
322
|
+
flex: 1 1 auto;
|
|
323
|
+
transition: background 0.15s ease, color 0.15s ease;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.jtoc-link-row:hover .jtoc-link {
|
|
327
|
+
color: var(--jtoc-highlight);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.jtoc-link.is-active {
|
|
331
|
+
color: var(--jtoc-highlight);
|
|
332
|
+
font-weight: 600;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.jtoc-root[data-fold="true"] .jtoc-item > .jtoc-list {
|
|
336
|
+
display: block;
|
|
337
|
+
overflow: hidden;
|
|
338
|
+
max-height: 0;
|
|
339
|
+
opacity: 0;
|
|
340
|
+
transform: translateY(-4px);
|
|
341
|
+
pointer-events: none;
|
|
342
|
+
transition: opacity 0.28s ease, transform 0.28s ease;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.jtoc-root[data-fold="true"] .jtoc-item.is-open > .jtoc-list {
|
|
346
|
+
max-height: var(--jtoc-fold-height, 1200px);
|
|
347
|
+
opacity: 1;
|
|
348
|
+
transform: translateY(0);
|
|
349
|
+
pointer-events: auto;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.jtoc-root.jtoc-fold-init[data-fold="true"] .jtoc-item > .jtoc-list {
|
|
353
|
+
transition: none;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.jtoc-mobile-toggle {
|
|
357
|
+
display: none;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.jtoc-mobile-backdrop {
|
|
361
|
+
display: none;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
@media (max-width: 900px) {
|
|
365
|
+
.jtoc-root .jtoc-panel {
|
|
366
|
+
position: fixed;
|
|
367
|
+
bottom: 88px;
|
|
368
|
+
top: auto;
|
|
369
|
+
transform: translateY(20px) scale(0.985);
|
|
370
|
+
width: min(calc(75vw * 1.1), calc(306px * 1.1));
|
|
371
|
+
max-height: calc(29vh * 1.2);
|
|
372
|
+
min-height: 0;
|
|
373
|
+
opacity: 0;
|
|
374
|
+
pointer-events: none;
|
|
375
|
+
transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1);
|
|
376
|
+
overflow: hidden;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.jtoc-root .jtoc-nav {
|
|
380
|
+
-webkit-overflow-scrolling: touch;
|
|
381
|
+
touch-action: pan-y;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.jtoc-root[data-side="left"] .jtoc-panel {
|
|
385
|
+
left: calc(16px + var(--jtoc-edge-extra-left));
|
|
386
|
+
right: auto;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.jtoc-root[data-side="right"] .jtoc-panel {
|
|
390
|
+
right: calc(16px + var(--jtoc-edge-extra-right));
|
|
391
|
+
left: auto;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.jtoc-root.is-mobile-open .jtoc-panel {
|
|
395
|
+
opacity: 1;
|
|
396
|
+
pointer-events: auto;
|
|
397
|
+
transform: translateY(0) scale(1);
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.jtoc-root .jtoc-mobile-backdrop {
|
|
401
|
+
display: block;
|
|
402
|
+
position: fixed;
|
|
403
|
+
inset: 0;
|
|
404
|
+
margin: 0;
|
|
405
|
+
padding: 0;
|
|
406
|
+
border: 0;
|
|
407
|
+
background: rgba(15, 23, 42, 0.48);
|
|
408
|
+
z-index: calc(var(--jtoc-z-index) - 1);
|
|
409
|
+
opacity: 0;
|
|
410
|
+
visibility: hidden;
|
|
411
|
+
pointer-events: none;
|
|
412
|
+
transition: opacity 0.32s ease, visibility 0.32s ease;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.jtoc-root.is-mobile-open .jtoc-mobile-backdrop {
|
|
416
|
+
opacity: 1;
|
|
417
|
+
visibility: visible;
|
|
418
|
+
pointer-events: auto;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.jtoc-root .jtoc-mobile-toggle {
|
|
422
|
+
position: fixed;
|
|
423
|
+
bottom: 16px;
|
|
424
|
+
width: var(--jtoc-mobile-size);
|
|
425
|
+
height: var(--jtoc-mobile-size);
|
|
426
|
+
border: none;
|
|
427
|
+
border-radius: 999px;
|
|
428
|
+
background: var(--jtoc-highlight);
|
|
429
|
+
box-shadow: none;
|
|
430
|
+
display: inline-flex;
|
|
431
|
+
align-items: center;
|
|
432
|
+
justify-content: center;
|
|
433
|
+
flex-direction: column;
|
|
434
|
+
gap: 4px;
|
|
435
|
+
z-index: var(--jtoc-z-index);
|
|
436
|
+
transition: box-shadow 0.32s ease, filter 0.32s ease;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.jtoc-root.is-mobile-open .jtoc-mobile-toggle {
|
|
440
|
+
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.35);
|
|
441
|
+
filter: brightness(0.88);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.jtoc-root[data-side="left"] .jtoc-mobile-toggle {
|
|
445
|
+
left: 16px;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.jtoc-root[data-side="right"] .jtoc-mobile-toggle {
|
|
449
|
+
right: 16px;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.jtoc-mobile-toggle-bar {
|
|
453
|
+
display: block;
|
|
454
|
+
width: 20px;
|
|
455
|
+
height: 2px;
|
|
456
|
+
background: #ffffff;
|
|
457
|
+
border-radius: 1px;
|
|
458
|
+
transform-origin: center;
|
|
459
|
+
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.jtoc-root.is-mobile-open .jtoc-mobile-toggle-bar:nth-child(1) {
|
|
463
|
+
transform: translateY(6px) rotate(45deg);
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.jtoc-root.is-mobile-open .jtoc-mobile-toggle-bar:nth-child(2) {
|
|
467
|
+
opacity: 0;
|
|
468
|
+
transform: scaleX(0);
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
.jtoc-root.is-mobile-open .jtoc-mobile-toggle-bar:nth-child(3) {
|
|
472
|
+
transform: translateY(-6px) rotate(-45deg);
|
|
473
|
+
}
|
|
474
|
+
}
|