git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d52814c81d19e921ca6da0ee1b30fbb10d9d843f
roi-theme/wp-content/themes/apus-theme/assets/css/css-global-generic-tables.css
FrankZamora d52814c81d ARQUITECTURA: Completar renombramientos CSS - Carpetas 10-20 - Issue #133 
RENOMBRAMIENTOS COMPLETADOS (19 archivos adicionales):

COMPONENTES (carpetas 10, 12, 14, 15, 17, 18, 19):
✅ post-content.css → componente-post-content.css (10)
✅ cta-box-sidebar.css → componente-cta-box-sidebar.css (12)
✅ cta.css → componente-cta-ab-testing.css (14)
✅ related-posts.css → componente-related-posts.css (15)
✅ header.css → componente-footer-principal.css (17)
✅ modal-contact.css → componente-modal-contacto.css (18)
✅ tables-apu.css → css-tablas-apu.css (19)

CSS GLOBALES (carpeta 20):
✅ variables.css → css-global-variables.css
✅ fonts.css → css-global-fonts.css
✅ utilities.css → css-global-utilities.css
✅ animations.css → css-global-animations.css
✅ responsive.css → css-global-responsive.css
✅ accessibility.css → css-global-accessibility.css
✅ print.css → css-global-print.css
✅ badges.css → css-global-badges.css
✅ pagination.css → css-global-pagination.css
✅ toc.css → css-global-toc.css
✅ generic-tables.css → css-global-generic-tables.css
✅ video.css → css-global-video.css

ACTUALIZACIONES:
- enqueue-scripts.php: Todas las referencias actualizadas (48 cambios)
- functions.php: Version bump 1.0.9 → 1.0.10

TOTAL RENOMBRAMIENTOS:
- Commit 8d876: 7 archivos (carpetas 05, 06, 07, 08, 11, 13, 16)
- Este commit: 19 archivos (carpetas 10, 12, 14, 15, 17, 18, 19 + globales 20)
- TOTAL: 26 archivos renombrados

CORRESPONDENCIA 1-A-1 COMPLETADA:
✅ Cada componente tiene su archivo CSS con nombre de carpeta
✅ Archivos globales con prefijo css-global-
✅ Sin duplicaciones
✅ Nomenclatura consistente

Issue: #133

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 17:27:08 -06:00

277 lines
9.8 KiB
CSS
Raw Blame History

/**
* 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);
}
Reference in New Issue View Git Blame Copy Permalink