Skip to content

Commit 4b1e872

Browse files
ascholerChemeketaascholerChemeketa
committed
Reorg toc rules. Revise indentation logic.
1 parent d175fff commit 4b1e872

File tree

1 file changed

+118
-120
lines changed

1 file changed

+118
-120
lines changed

‎toc_default.css

Lines changed: 118 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
1+
/* -------------------toc-------------------- */
22
.ptx-toc {
33
/* IMPORTANT height must be calculated by javascript. */
44
width: 240px;
@@ -15,166 +15,171 @@
1515
background: #fff;
1616
}
1717

18-
.ptx-toc > ul:first-child > li:last-child {
18+
.ptx-toc > .toc-item-list:first-child > .toc-item:last-child {
1919
border-bottom: 8px solid #999;
2020
}
2121

22-
/* Aligns toc to the top and side of the allotted space, respectively */
23-
.ptx-toc ul {
24-
margin: 0px;
25-
padding: 0px;
26-
list-style-type: none;
27-
}
22+
/* -------------------toc-items-------------------- */
2823

24+
.ptx-toc {
25+
--codenumber-pad-left: 0.3rem;
26+
--codenumber-pad-right: 0.5rem;
2927

30-
/* Places codenumbers */
31-
.ptx-toc .codenumber {
32-
padding-left: 0.3rem;
33-
display: inline-block;
34-
}
35-
.ptx-toc .codenumber + .title {
36-
padding-left: 0.3rem;
28+
/* first level indentation set to line up with second
29+
level indentation to minimize ragged edge*/
30+
--toc-indent-first: calc(1.0rem + var(--codenumber-pad-left) + var(--codenumber-pad-right));
31+
--toc-indent-second: calc(1.7rem + var(--codenumber-pad-left) + var(--codenumber-pad-right));
32+
/* third level needs more space for numbering */
33+
--toc-indent-third: calc(2.2rem + var(--codenumber-pad-left) + var(--codenumber-pad-right));
3734
}
38-
.ptx-toc .internal > .title:first-child {
39-
padding-left: 1.0rem;
35+
36+
/* will be less indentation */
37+
.ptx-toc:is(.depth1, .parts.depth2) {
38+
--codenumber-pad-right: 0.5rem;
4039
}
41-
.ptx-toc .structural .structural .codenumber {
42-
padding-top: 0.2em;
43-
font-size: 80%;
40+
41+
.ptx-toc .toc-item-list {
42+
margin: 0px;
43+
padding: 0px;
44+
list-style-type: none;
4445
}
4546

46-
/*
47-
.ptx-toc :is(.toc-frontmatter, .toc-backmatter) > .toc-title-box > a .title {
48-
margin-left: 1.5rem;
47+
.ptx-toc .toc-item {
48+
border-top: 1px solid var(--tocborder, #d1d1d1);
4949
}
50-
*/
5150

52-
.ptx-toc .toc-part > .toc-title-box > a .codenumber {
53-
min-width: 1.5rem;
54-
padding-right: 0.3rem;
51+
/* -------------------title-box------------------- */
52+
53+
.ptx-toc .toc-title-box {
54+
display: flex;
5555
}
5656

57-
.ptx-toc .toc-chapter > .toc-title-box > a .codenumber {
58-
min-width: 1.9rem;
59-
padding-right: 0.3rem;
57+
.ptx-toc .toc-title-box > .internal {
58+
position: relative;
59+
display: flex;
60+
flex-grow: 1;
61+
padding: 0.2em;
62+
font-family: "PT Serif", "Times New Roman", Times, serif;
63+
font-weight: bold;
6064
}
6165

62-
.ptx-toc .toc-backmatter .toc-item-list .toc-item .codenumber {
63-
min-width: 1.9rem;
64-
padding-right: 0.3rem;
66+
/* at second level, switch fonts */
67+
.ptx-toc .toc-item-list .toc-item-list .toc-title-box > .internal {
68+
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
69+
font-weight: normal;
6570
}
6671

67-
.ptx-toc .toc-chapter .toc-item-list .toc-item .codenumber {
68-
min-width: 2.5rem;
69-
padding-right: 0.3rem;
72+
/* Extra border above top level items */
73+
.ptx-toc > .toc-item-list > .toc-item {
74+
border-top: 2px solid var(--tocborder, #d1d1d1);
7075
}
7176

72-
.ptx-toc .toc-chapter .toc-item-list .toc-item-list .toc-item .codenumber {
73-
min-width: 3.3rem;
74-
padding-right: 0.3rem;
77+
.ptx-toc .toc-item.active {
78+
box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px inset;
7579
}
7680

77-
.ptx-toc .toc-chapter .toc-item-list .toc-item .codenumber {
81+
82+
/* -------------------codenumbers-------------------- */
83+
.ptx-toc .codenumber {
84+
min-width: var(--toc-indent-first);
85+
padding-left: var(--codenumber-pad-left);
86+
padding-right: var(--codenumber-pad-right);
87+
display: inline-block;
88+
text-align: left;
89+
flex-grow: 0;
90+
}
91+
92+
/* second level of numbering */
93+
/* anything 1+ levels deeper than a chapter in a book */
94+
.book .ptx-toc .toc-chapter .toc-item-list .codenumber,
95+
/* anything 1+ levels deeper than a section in an article */
96+
.article .ptx-toc .toc-section .toc-item-list .codenumber,
97+
/* anything 1+ levels deeper than backmatter */
98+
.ptx-toc .toc-backmatter .toc-item-list .codenumber
99+
{
78100
font-size: 80%;
79101
padding-top: 0.16em;
80-
}
81-
82-
/* no codenumbers on subsections (anything under section) */
83-
.ptx-toc .toc-section .toc-item-list .toc-item a > .codenumber {
102+
min-width: var(--toc-indent-second);
103+
}
104+
105+
/* third level of numbering */
106+
/* anything 2+ levels deeper than a chapter in a book */
107+
.book .ptx-toc .toc-chapter .toc-item-list .toc-item-list .codenumber,
108+
/* anything 2+ levels deeper than a section in an article */
109+
.article .ptx-toc .toc-section .toc-item-list .toc-item-list .codenumber,
110+
/* anything 2+ levels deeper than backmatter */
111+
.ptx-toc .toc-backmatter .toc-item-list .toc-item-list .codenumber
112+
{
113+
min-width: var(--toc-indent-third);
84114
visibility: hidden;
85115
}
86-
.ptx-toc .toc-section .toc-item-list .toc-item a:hover > .codenumber {
116+
117+
/* reveal on interaction */
118+
.ptx-toc .toc-item-list .toc-item-list .toc-item-list a:is(:hover, :focus) > .codenumber {
87119
visibility: visible;
88120
}
89121

90-
.ptx-toc ul.structural ul.structural .title:empty::after {
91-
content: "empty heading!";
92-
font-weight: bold;
93-
}
94-
.ptx-toc ul.structural ul.structural ul.structural .title {
95-
font-size: 90%;
96-
}
97-
.ptx-toc ul.structural ul.structural ul.structural ul.structural .title {
98-
font-size: 90%;
99-
font-style: italic;
122+
/* -------------------titles-------------------- */
123+
.ptx-toc .toc-title-box .title {
124+
flex-grow: 1;
100125
}
101126

102-
.ptx-toc .part > a .codenumber {
103-
position: relative;
104-
display: block;
105-
float: left;
106-
margin-right: 0.7em;
107-
}
108-
.ptx-toc .part > a .title {
109-
display: block;
110-
margin-left: 1em;
127+
/* Any toc item without a codenumber needs indentation
128+
Can't select absence of a preceeding, so indent all titles
129+
and then clear indent if there is a codenumber */
130+
.ptx-toc .toc-item .toc-title-box .title {
131+
margin-left: var(--toc-indent-first);
111132
}
112133

113-
.ptx-toc .toc-item {
114-
border-top: 1px solid var(--tocborder, #d1d1d1);
134+
/* second level as defined by codenumber selectors */
135+
.book .ptx-toc .toc-chapter .toc-item-list .title,
136+
.article .ptx-toc .toc-section .toc-item-list .title,
137+
.ptx-toc .toc-backmatter .toc-item-list .title
138+
{
139+
margin-left: var(--toc-indent-second);
115140
}
116141

117-
.ptx-toc ul.structural li a {
118-
position: relative;
119-
display: block;
120-
padding: 2.86957px;
121-
padding: 0.2em;
122-
/* padding-left: 0.5em; */
123-
font-family: "PT Serif", "Times New Roman", Times, serif;
124-
font-weight: bold;
125-
}
126-
.ptx-toc ul.structural ul.structural li a {
127-
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
128-
font-weight: normal;
129-
display: flex;
142+
/* third level as defined by codenumber selectors */
143+
.book .ptx-toc .toc-chapter .toc-item-list .toc-item-list .title,
144+
.article .ptx-toc .toc-section .toc-item-list .toc-item-list .title,
145+
.ptx-toc .toc-backmatter .toc-item-list .toc-item-list .title
146+
{
147+
margin-left: var(--toc-indent-third);
130148
}
131149

132-
/* Removes underlines from links in toc */
133-
.ptx-toc ul.structural li a, .ptx-toc ul.structural li a:link, .ptx-toc ul.structural li a:visited, .ptx-toc ul.structural li a:hover, .ptx-toc ul.structural li a:focus, .ptx-toc ul.structural li a:active {
134-
text-decoration: none;
150+
/* unless there is a codenumber */
151+
.ptx-toc .toc-item > .toc-title-box .codenumber + .title {
152+
margin-left: 0 !important;
135153
}
136154

137-
/*
138-
.ptx-toc > ul > li a, .ptx-toc > ul > li a:link, .ptx-toc > ul > li a:visited {
155+
.ptx-toc ul.structural ul.structural .title:empty::after {
156+
content: "empty heading!";
139157
font-weight: bold;
140-
font-family: "PT Serif", "Times New Roman", Times, serif;
141-
padding-left: 0.2em;
142-
}
143-
*/
144-
145-
/* Extra border above top level items */
146-
.ptx-toc > .toc-item-list > .toc-item {
147-
border-top: 2px solid var(--tocborder, #d1d1d1);
148158
}
149159

150-
/* Allows both "top" and bottom border of a subsection to be highlighted on hover */
151-
.ptx-toc ul.structural li ul.structural a:hover {
152-
/*
153-
omitting, because it caused a "jump"
154-
border-top: 1px solid #3c110a;
155-
*/
156-
/*
157-
margin-top: -1px;
158-
*/
159-
}
160160

161-
/* Removes double border between last subsection and next section */
162-
.ptx-toc > ul.structural li ul.structural li:last-child a {
163-
border-bottom: none;
161+
.ptx-toc .toc-chapter .toc-item-list .title,
162+
.ptx-toc .toc-section .toc-item-list .title,
163+
/* 2 levels deep in back matter */
164+
.ptx-toc .toc-backmatter .toc-item-list .toc-item-list .title
165+
{
166+
font-size: 90%;
164167
}
165168

166-
167-
.ptx-toc ul.structural li a:active {
168-
box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px inset;
169+
.ptx-toc .toc-chapter .toc-item-list .toc-item-list .title,
170+
.ptx-toc .toc-section .toc-item-list .toc-item-list .title,
171+
/* 3 levels deep in back matter */
172+
.ptx-toc .toc-backmatter .toc-item-list .toc-item-list .toc-item-list .title
173+
{
174+
font-style: italic;
169175
}
170176

177+
/* ??? */
171178
.ptx-toc ul.structural li a.has-chevron {
172179
padding-right: 2em;
173180
}
174-
.ptx-toc .toc-item {
175-
position: relative;
176-
}
177181

182+
/* -------------------depth controls-------------------- */
178183
.ptx-toc.depth0 ul.structural {
179184
display: none;
180185
}
@@ -201,6 +206,8 @@ omitting, because it caused a "jump"
201206
color: var(--parttoctextactive);
202207
}
203208

209+
210+
/* -------------------focused toc-------------------- */
204211
/* Hide all but active area of book */
205212
.ptx-toc.focused ul.structural:not(.contains-active) > li {
206213
display: none;
@@ -225,15 +232,6 @@ omitting, because it caused a "jump"
225232
border: 0;
226233
}
227234

228-
.toc-title-box {
229-
display: flex;
230-
}
231-
232-
.ptx-toc ul.structural li .toc-title-box a {
233-
flex: 1 1;
234-
display: flex;
235-
}
236-
237235
.ptx-toc.focused .toc-expander {
238236
border: 0;
239237
padding: 2px 5px;

0 commit comments

Comments
 (0)