75dc0e5722
PROBLEMA CRÍTICO: - custom-style.css (843 líneas) tenía 95% código DUPLICADO con style.css y otros componentes - utilities.css (528 líneas) duplicaba 92% de Bootstrap 5 utilities - Código redundante causaba conflictos CSS y dificulta mantenimiento - Tablas APU no se veían correctas por conflictos de especificidad SOLUCIÓN IMPLEMENTADA: 1. ✅ ELIMINADO custom-style.css completamente (843 líneas) - Código duplicado de 11 componentes que YA tienen archivos individuales - Variables duplicadas (ya en style.css y variables.css) - Componentes duplicados (TOC, CTA, Related Posts, Pagination, Footer) 2. ✅ CREADO generic-tables.css (263 líneas) - Código único de custom-style.css líneas 165-394 - Estilos para tablas genéricas en post-content (10 estilos diferentes) - NO afecta tablas APU (.analisis table) 3. ✅ CREADO video.css (28 líneas) - Código único de custom-style.css líneas 540-560 - Estilos para videos embebidos (YouTube, Vimeo) en post-content 4. ✅ REDUCIDO utilities.css de 528 → 90 líneas (83% reducción) - Eliminadas 438 líneas que duplicaban Bootstrap 5 - Mantenidas SOLO utilities únicas: * Cursor utilities (cursor-pointer, cursor-default, etc.) * User select (user-select-none, user-select-all) * Pointer events (pointer-events-none) * Object fit (object-fit-contain, object-fit-cover) * Transition helpers (transition-all, transition-none) 5. ✅ ACTUALIZADO enqueue-scripts.php - Eliminada función apus_enqueue_custom_assets (custom-style.css) - Agregada función apus_enqueue_generic_tables (priority 11, solo single posts) - Agregada función apus_enqueue_video_styles (priority 11, solo single posts) - Renombrada función apus_enqueue_main_javascript (solo JavaScript) RESULTADO: - De 2454 líneas totales (843+1083+528) a 1464 líneas (1083+263+28+90) - Eliminadas 990 líneas de código duplicado (40% reducción) - CSS limpio: cero duplicación entre archivos - Orden de carga correcto: Bootstrap → style.css → componentes individuales - Tablas APU ahora deben funcionar correctamente (sin conflictos) ARQUITECTURA CORRECTA: ✅ style.css → Estilos globales del tema ✅ [componente].css → Un archivo CSS por cada componente individual ✅ utilities.css → SOLO utilities NO incluidas en Bootstrap 5 ✅ generic-tables.css → Tablas genéricas post-content ✅ video.css → Videos embebidos post-content ✅ tables-apu.css → Tablas APU específicas (.analisis) ARCHIVOS AFECTADOS: - ELIMINADO: wp-content/themes/apus-theme/assets/css/custom-style.css (843 líneas) - CREADO: wp-content/themes/apus-theme/assets/css/generic-tables.css (263 líneas) - CREADO: wp-content/themes/apus-theme/assets/css/video.css (28 líneas) - MODIFICADO: wp-content/themes/apus-theme/assets/css/utilities.css (528 → 90 líneas) - MODIFICADO: wp-content/themes/apus-theme/inc/enqueue-scripts.php 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
277 lines
9.8 KiB
CSS
277 lines
9.8 KiB
CSS
/**
|
|
* Generic Tables Styles
|
|
*
|
|
* Estilos para tablas genéricas en post-content (NO tablas APU)
|
|
* Aplica 10 estilos diferentes automáticamente a las primeras 11 tablas
|
|
*
|
|
* @package Apus_Theme
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* ========================================
|
|
BASE STYLES - Todas las tablas genéricas
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table) {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 2rem auto;
|
|
font-size: 0.95rem;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Header styles - VERY OBVIOUS */
|
|
.post-content table:not(.analisis table) thead tr:first-child th,
|
|
.post-content table:not(.analisis table) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table) tr:first-child td {
|
|
font-weight: 700;
|
|
text-align: center;
|
|
padding: 1.25rem 1rem;
|
|
font-size: 1.05rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Body cells */
|
|
.post-content table:not(.analisis table) tbody tr:not(:first-child) td {
|
|
padding: 0.875rem 1rem;
|
|
border: 1px solid var(--color-neutral-100);
|
|
text-align: left;
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 1: Navy Header with Orange Accent
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(2) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(2) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(2) tr:first-child td {
|
|
background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(2) tbody tr:nth-child(even) {
|
|
background-color: var(--color-neutral-50);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(2) tbody tr:hover {
|
|
background-color: rgba(255, 133, 0, 0.05);
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 2: Orange Header with Light Background
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(3) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(3) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(3) tr:first-child td {
|
|
background: var(--color-orange-primary);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
box-shadow: 0 2px 8px rgba(255, 133, 0, 0.3);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(3) tbody tr:nth-child(odd) {
|
|
background-color: rgba(255, 133, 0, 0.05);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(3) tbody tr:hover {
|
|
background-color: rgba(255, 133, 0, 0.1);
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 3: Minimal with Left Orange Border
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(4) {
|
|
border-left: 5px solid var(--color-orange-primary);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(4) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(4) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(4) tr:first-child td {
|
|
background: var(--color-navy-primary);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
border-bottom: 3px solid var(--color-orange-primary) !important;
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(4) tbody tr:hover {
|
|
background-color: var(--color-neutral-50);
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 4: Dark Navy with Striped Rows
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(5) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(5) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(5) tr:first-child td {
|
|
background: var(--color-navy-dark);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
box-shadow: 0 2px 8px rgba(14, 35, 55, 0.4);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(5) tbody tr:nth-child(even) {
|
|
background-color: rgba(30, 58, 95, 0.05);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(5) tbody tr:hover {
|
|
background-color: rgba(30, 58, 95, 0.1);
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 5: Orange Gradient Header
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(6) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(6) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(6) tr:first-child td {
|
|
background: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
box-shadow: 0 2px 8px rgba(255, 133, 0, 0.35);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(6) tbody tr {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(6) tbody tr:hover {
|
|
background-color: rgba(255, 133, 0, 0.08);
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 6: Bordered with Navy Accents
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(7) {
|
|
border: 3px solid var(--color-navy-primary);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(7) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(7) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(7) tr:first-child td {
|
|
background: var(--color-navy-primary);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
border-bottom: 4px solid var(--color-orange-primary) !important;
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(7) tbody tr:nth-child(odd) {
|
|
background-color: rgba(30, 58, 95, 0.03);
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 7: Light Orange Background
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(8) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(8) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(8) tr:first-child td {
|
|
background: var(--color-orange-primary);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
border-bottom: 3px solid var(--color-navy-primary) !important;
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(8) tbody tr:nth-child(even) {
|
|
background-color: rgba(255, 133, 0, 0.03);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(8) tbody tr:hover {
|
|
background-color: rgba(255, 133, 0, 0.08);
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 8: Modern Flat with Top Border
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(9) {
|
|
border-top: 6px solid var(--color-orange-primary);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(9) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(9) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(9) tr:first-child td {
|
|
background: var(--color-navy-light);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
box-shadow: 0 2px 6px rgba(44, 82, 130, 0.3);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(9) tbody tr {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(9) tbody tr:hover {
|
|
background-color: var(--color-neutral-50);
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 9: Compact with Subtle Colors
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(10) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(10) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(10) tr:first-child td {
|
|
background: var(--color-navy-dark);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
border-left: 5px solid var(--color-orange-primary) !important;
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(10) tbody tr:nth-child(odd) {
|
|
background-color: var(--color-neutral-50);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(10) tbody tr:hover {
|
|
background-color: rgba(255, 133, 0, 0.05);
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 10: Bold Orange Border
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(11) {
|
|
border: 4px solid var(--color-orange-primary);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(11) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(11) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(11) tr:first-child td {
|
|
background: linear-gradient(135deg, var(--color-orange-hover) 0%, var(--color-orange-primary) 100%);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(11) tbody tr:nth-child(even) {
|
|
background-color: rgba(255, 133, 0, 0.05);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(11) tbody tr:hover {
|
|
background-color: rgba(255, 133, 0, 0.12);
|
|
}
|
|
|
|
/* ========================================
|
|
STYLE 11+: Cycle back to Style 1
|
|
======================================== */
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(n+12) thead tr:first-child th,
|
|
.post-content table:not(.analisis table):nth-of-type(n+12) tbody tr:first-child td,
|
|
.post-content table:not(.analisis table):nth-of-type(n+12) tr:first-child td {
|
|
background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%);
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3);
|
|
}
|
|
|
|
.post-content table:not(.analisis table):nth-of-type(n+12) tbody tr:nth-child(even) {
|
|
background-color: var(--color-neutral-50);
|
|
}
|