FIX: Eliminar duplicidad TOC - css-global-toc.css obsoleto - Issue #133
PROBLEMA DETECTADO: Duplicación de sistemas TOC: - componente-sidebar-toc.css (✅ EN USO - TOC en sidebar) - css-global-toc.css (❌ OBSOLETO - TOC en contenido, no usado) ANÁLISIS: - template-parts/content-toc.php usa clases .toc-container (sidebar) - inc/toc.php genera TOC con funciones apus_generate_toc() - sidebar.php llama a funciones de inc/toc.php - css-global-toc.css tenía clases .apus-toc que NO se usan - toc.js estaba enqueueado pero NO se usa ELIMINACIONES: ❌ css-global-toc.css (369 líneas, clases .apus-toc no usadas) ❌ assets/js/toc.js (7583 bytes, no usado) ❌ Función apus_enqueue_toc_assets() en enqueue-scripts.php MANTENER: ✅ componente-sidebar-toc.css (125 líneas, clases .toc-container) ✅ inc/toc.php (funciones usadas por sidebar.php) ✅ template-parts/content-toc.php (genera HTML del TOC) RESULTADO: - Sistema TOC unificado: solo sidebar TOC - Sin duplicaciones - Sin código obsoleto - Reducción: 369 líneas CSS + 7583 bytes JS eliminados Version: 1.0.10 → 1.0.11 Issue: #133 (seguimiento) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -1,368 +0,0 @@
|
||||
/**
|
||||
* Table of Contents Styles
|
||||
*
|
||||
* Styles for the automatic table of contents component.
|
||||
* Includes responsive design and smooth animations.
|
||||
*
|
||||
* @package Apus_Theme
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
Table of Contents Container
|
||||
======================================== */
|
||||
|
||||
.apus-toc {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 12px; /* Template: 12px */
|
||||
padding: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Template shadow */
|
||||
position: sticky;
|
||||
top: 5.5rem;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease; /* Template: hover effect */
|
||||
}
|
||||
|
||||
.apus-toc:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* Template hover shadow */
|
||||
}
|
||||
|
||||
.apus-toc-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 3px solid #0d6efd; /* Template: 3px solid #0d6efd */
|
||||
}
|
||||
|
||||
.apus-toc-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700; /* Template: 700 */
|
||||
color: #2c3e50; /* Template color */
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
text-align: center; /* Template: center */
|
||||
flex: 1; /* Para que ocupe todo el espacio disponible */
|
||||
font-style: normal; /* Template: normal */
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Toggle Button
|
||||
======================================== */
|
||||
|
||||
.apus-toc-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6c757d;
|
||||
transition: color 0.2s ease;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.apus-toc-toggle:hover {
|
||||
color: #212529;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.apus-toc-toggle:focus {
|
||||
outline: 2px solid #0d6efd;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toggle-icon::before,
|
||||
.toggle-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: currentColor;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-icon::before {
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
top: 7px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.toggle-icon::after {
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
top: 0;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.apus-toc-toggle[aria-expanded="false"] .toggle-icon::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Table of Contents List
|
||||
======================================== */
|
||||
|
||||
.apus-toc-list {
|
||||
list-style: none;
|
||||
counter-reset: toc-counter;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
transition: max-height 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.apus-toc-toggle[aria-expanded="false"] + .apus-toc-list,
|
||||
.apus-toc-toggle[aria-expanded="false"] ~ .apus-toc-list {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.apus-toc-item {
|
||||
position: relative;
|
||||
margin-bottom: 0.5rem;
|
||||
counter-increment: toc-counter;
|
||||
}
|
||||
|
||||
.apus-toc-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Numbering System
|
||||
======================================== */
|
||||
|
||||
/* H2 Level (Primary) */
|
||||
.apus-toc-item.apus-toc-level-2::before {
|
||||
content: counter(toc-counter) ". ";
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* H3 Level (Secondary) - Nested */
|
||||
.apus-toc-sublist {
|
||||
list-style: none;
|
||||
counter-reset: toc-subcounter;
|
||||
margin: 0.5rem 0 0.5rem 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.apus-toc-sublist .apus-toc-item {
|
||||
counter-increment: toc-subcounter;
|
||||
}
|
||||
|
||||
.apus-toc-sublist .apus-toc-item.apus-toc-level-3::before {
|
||||
content: counter(toc-counter) "." counter(toc-subcounter) " ";
|
||||
font-weight: 500;
|
||||
color: #6c757d;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Links
|
||||
======================================== */
|
||||
|
||||
.apus-toc-link {
|
||||
color: #495057; /* Template color */
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
transition: all 0.3s ease; /* Template: all 0.3s ease */
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
padding: 0.375rem 1rem; /* Template: 0.375rem 1rem */
|
||||
border-left: 3px solid transparent;
|
||||
border-radius: 4px; /* Template: 4px */
|
||||
font-size: 0.95rem; /* Template: 0.95rem */
|
||||
}
|
||||
|
||||
.apus-toc-link:hover {
|
||||
background: linear-gradient(90deg, rgba(13, 110, 253, 0.08), transparent); /* Template gradient */
|
||||
border-left-color: #0d6efd;
|
||||
color: #0d6efd;
|
||||
padding-left: 1.5rem; /* Template: 1.5rem */
|
||||
}
|
||||
|
||||
.apus-toc-link:focus {
|
||||
outline: 2px solid #0d6efd;
|
||||
outline-offset: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Active link highlighting - Template styles */
|
||||
.apus-toc-link.active {
|
||||
background: linear-gradient(90deg, rgba(13, 110, 253, 0.12), transparent); /* Template gradient */
|
||||
border-left-color: #0d6efd;
|
||||
color: #0d6efd;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Responsive Design
|
||||
======================================== */
|
||||
|
||||
/* Tablets and smaller */
|
||||
@media (max-width: 768px) {
|
||||
.apus-toc {
|
||||
padding: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.apus-toc-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.apus-toc-list {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.apus-toc-sublist {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 480px) {
|
||||
.apus-toc {
|
||||
padding: 0.875rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.apus-toc-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.apus-toc-link {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.apus-toc-list {
|
||||
max-height: 300px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.apus-toc-sublist {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Print Styles
|
||||
======================================== */
|
||||
|
||||
@media print {
|
||||
.apus-toc-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apus-toc-list {
|
||||
max-height: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.apus-toc-link {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.apus-toc {
|
||||
box-shadow: none;
|
||||
border: 1px solid #000;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Accessibility
|
||||
======================================== */
|
||||
|
||||
.screen-reader-text {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
.screen-reader-text:focus {
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
color: #21759b;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
height: auto;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
top: 5px;
|
||||
width: auto;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Smooth Scroll Offset
|
||||
======================================== */
|
||||
|
||||
/* Add scroll margin to headings to account for fixed headers */
|
||||
h2[id],
|
||||
h3[id] {
|
||||
scroll-margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h2[id],
|
||||
h3[id] {
|
||||
scroll-margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Custom Scrollbar for TOC List
|
||||
======================================== */
|
||||
|
||||
.apus-toc-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.apus-toc-list::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.apus-toc-list::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.apus-toc-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #a0aec0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.apus-toc-list {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #cbd5e0 #f1f1f1;
|
||||
}
|
||||
Reference in New Issue
Block a user