feat: Better ez-toc

This commit is contained in:
kbe
2025-08-19 12:14:29 +02:00
parent e662c7cda4
commit 8ac4c6b675
4 changed files with 269 additions and 1 deletions

View File

@@ -8372,6 +8372,128 @@ body.loaded:after {
height: 100%;
}
/* Styles for ez-toc-container */
#ez-toc-container {
background-color: transparent;
border: none;
border-radius: 0;
padding: 16px 0;
box-shadow: none;
max-width: 100%;
margin: 16px 0;
width: 100%;
/* Responsive styles */
}
#ez-toc-container .ez-toc-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 10px;
border-bottom: 2px solid #ddd;
padding-bottom: 5px;
}
#ez-toc-container .ez-toc-cssicon-toggle-label {
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 10px;
}
#ez-toc-container .ez-toc-cssicon-toggle-label .ez-toc-icon-toggle-span {
margin-left: 8px;
}
#ez-toc-container .ez-toc-list {
list-style-type: none;
padding-left: 0;
/* Base styles for all list items */
/* Hierarchy-based alignment */
/* Add more levels if needed */
}
#ez-toc-container .ez-toc-list .ez-toc-link {
display: block;
padding: 8px 0;
color: #333;
text-decoration: none;
border-bottom: 1px solid #f0f0f0;
}
#ez-toc-container .ez-toc-list .ez-toc-link:hover {
background-color: #f9f9f9;
border-radius: 4px;
}
#ez-toc-container .ez-toc-list .ez-toc-list-level-1 {
padding-left: 0;
}
#ez-toc-container .ez-toc-list .ez-toc-list-level-1 .ez-toc-link {
font-size: 1em;
font-weight: 600;
}
#ez-toc-container .ez-toc-list .ez-toc-list-level-2 {
padding-left: 20px;
}
#ez-toc-container .ez-toc-list .ez-toc-list-level-2 .ez-toc-link {
font-size: 0.95em;
font-weight: 500;
padding-left: 10px;
}
#ez-toc-container .ez-toc-list .ez-toc-list-level-3 {
padding-left: 40px;
}
#ez-toc-container .ez-toc-list .ez-toc-list-level-3 .ez-toc-link {
font-size: 0.9em;
font-weight: 400;
padding-left: 10px;
}
#ez-toc-container .ez-toc-list .ez-toc-list-level-4 {
padding-left: 60px;
}
#ez-toc-container .ez-toc-list .ez-toc-list-level-4 .ez-toc-link {
font-size: 0.85em;
font-weight: 400;
padding-left: 10px;
}
@media (max-width: 768px) {
#ez-toc-container {
padding: 12px 0;
/* Adjust hierarchy padding for tablets */
}
#ez-toc-container .ez-toc-title {
font-size: 1.125rem;
}
#ez-toc-container .ez-toc-link {
padding: 6px 0;
font-size: 0.9em;
}
#ez-toc-container .ez-toc-list-level-2 {
padding-left: 15px;
}
#ez-toc-container .ez-toc-list-level-3 {
padding-left: 30px;
}
#ez-toc-container .ez-toc-list-level-4 {
padding-left: 45px;
}
}
@media (max-width: 480px) {
#ez-toc-container {
padding: 10px 0;
/* Adjust hierarchy padding for mobile */
}
#ez-toc-container .ez-toc-title {
font-size: 1rem;
}
#ez-toc-container .ez-toc-link {
padding: 4px 0;
font-size: 0.85em;
}
#ez-toc-container .ez-toc-list-level-2 {
padding-left: 10px;
}
#ez-toc-container .ez-toc-list-level-3 {
padding-left: 20px;
}
#ez-toc-container .ez-toc-list-level-4 {
padding-left: 30px;
}
}
:root {
--bs-dark-rgb: 24, 28, 32;
--bs-border-color: get-color("dark", 0.1);