56abe2228c
Implementación de ajustes visuales finos para que el tema coincida exactamente con el template RDash (style.css líneas 145-700).
**Archivos Modificados:**
1. **toc.css** - Ajustes finos TOC
- **Container:**
- Border-radius: 8px → 12px (template línea 150)
- Border: #dee2e6 → #e9ecef (template línea 149)
- Box-shadow: 0 2px 4px → 0 4px 16px (template línea 151)
- Agregado hover: box-shadow 0 8px 24px (template línea 157)
- Agregado transition: all 0.3s ease (template línea 152)
- **Title:**
- Font-weight: 600 → 700 (template línea 165)
- Color: #212529 → #2c3e50 (template línea 161)
- Agregado text-align: center (template línea 166)
- Agregado flex: 1 para centrado correcto
- Agregado font-style: normal (template línea 167)
- **Header:**
- Border-bottom: 2px → 3px solid #0d6efd (template línea 163)
- **Links:**
- Color: #212529 → #495057 (template línea 183)
- Padding: 0.25rem 0 0.25rem 1rem → 0.375rem 1rem (template línea 182)
- Font-size: inherit → 0.95rem (template línea 188)
- Agregado border-radius: 4px (template línea 187)
- Transition: múltiples → all 0.3s ease (template línea 186)
- **Links Hover:**
- Agregado background: linear-gradient(90deg, rgba(13, 110, 253, 0.08), transparent) (template línea 193)
- Padding-left: sin cambio → 1.5rem (template línea 196)
- Removido transform: translateX(4px)
- **Links Active:**
- Agregado background: linear-gradient(90deg, rgba(13, 110, 253, 0.12), transparent) (template línea 201-202)
**Template ref:** css/style.css líneas 145-206
2. **cta-box-sidebar.css** - Ajustes finos CTA Box
- **Container:**
- Border-radius: 12px → 10px (template línea 603)
- Padding: 1.5rem → 1.25rem (template línea 604)
- Box-shadow: 0 4px 12px → 0 6px 20px (template línea 606)
- Position: sticky → relative (template línea 608)
- Agregado overflow: hidden (template línea 609)
- Agregado text-align: center (template línea 605)
- **Pseudo-element Pulse Animation:**
- Agregado .cta-box-sidebar::before (template líneas 612-621)
- Radial gradient con opacity animation
- Keyframes cta-pulse: 4s ease-in-out infinite (template líneas 623-632)
- Scale 1 → 1.05, opacity 0.4 → 0.6
- **Hover:**
- Agregado transform: translateY(-3px) (template línea 635)
- Box-shadow hover: 0 10px 28px (template línea 636)
- **Title:**
- Font-size: 1.1rem → 1rem (template línea 642)
- Margin-bottom: 0.75rem → 0.65rem (template línea 643)
- Line-height: inherit → 1.3 (template línea 646)
- Agregado position: relative, z-index: 1 (template líneas 644-645)
- **Text:**
- Font-size: 0.9rem → 0.85rem (template línea 651)
- Line-height: 1.5 → 1.4 (template línea 653)
- Agregado position: relative, z-index: 1 (template líneas 654-655)
- **Button:**
- Padding: 0.75rem → 0.65rem 1.5rem (template línea 662)
- Agregado box-shadow: 0 4px 12px (template línea 666)
- Agregado position: relative, z-index: 1 (template líneas 667-668)
- **Button Hover:**
- Background: rgba(255,255,255,0.95) → #f8f9fa (template línea 672)
- Transform: translateY(-2px) → scale(1.05) (template línea 674)
- Color: #FF8600 → #FF6B35 (template línea 673)
- Box-shadow: 0 4px 8px → 0 6px 16px (template línea 675)
**Template ref:** css/style.css líneas 600-680
**Verificaciones:**
- ✅ **Dropdown styles:** Verificados en custom-style.css - Ya correctos según template (líneas 82-118)
- ✅ **Modal styles:** Verificados en modal-contact.css - Ya correctos según template (líneas 682-699)
**Estadísticas:**
| Métrica | Valor |
|---------|-------|
| **Archivos CSS modificados** | 2 |
| **Líneas modificadas toc.css** | 25 |
| **Líneas modificadas cta-box-sidebar.css** | 35 |
| **Pseudo-elements nuevos** | 1 (::before con pulse) |
| **Keyframes nuevos** | 1 (@keyframes cta-pulse) |
| **Gradientes agregados** | 2 (TOC links) |
**Resultado:**
Tema ahora coincide exactamente con template RDash en todos los detalles visuales:
- TOC con gradientes hover/active, border 3px, border-radius 12px
- CTA Box con pulse animation, hover translateY, z-index layers
- Todos los espaciados, colores y transiciones coinciden con template
**Próximo Paso:**
Validación visual del usuario para confirmar que tema replica perfectamente el template RDash antes de cerrar Issue #57.
Relacionado con: #57 (Issue principal)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
369 lines
7.6 KiB
CSS
369 lines
7.6 KiB
CSS
/**
|
|
* 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;
|
|
}
|