diff --git a/wp-content/themes/apus-theme/assets/css/style.css b/wp-content/themes/apus-theme/assets/css/style.css index f5808008..f61c9da1 100644 --- a/wp-content/themes/apus-theme/assets/css/style.css +++ b/wp-content/themes/apus-theme/assets/css/style.css @@ -953,93 +953,6 @@ img { color: var(--color-orange-hover); } -/* === SIDEBAR TOC === */ - -.sidebar-sticky { - position: sticky; - top: 85px; - display: flex; - flex-direction: column; -} - -.toc-container { - margin-bottom: 13px; - background: #ffffff; - border: 1px solid var(--color-neutral-100); - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - padding: 12px 16px; - max-height: calc(100vh - 71px - 10px - 250px - 15px - 15px); - display: flex; - flex-direction: column; -} - -.toc-container h4 { - color: var(--color-navy-primary); - padding-bottom: 8px; - border-bottom: 2px solid var(--color-neutral-100); - margin-bottom: 0.75rem; - font-weight: 600; - text-align: left; - font-size: 1rem; - font-style: normal; -} - -.toc-list { - overflow-y: auto; - padding-right: 0.5rem; - list-style: none; - flex: 1; - min-height: 0; -} - -.toc-container li { - margin-bottom: 0.15rem; -} - -.toc-container a { - display: block; - padding: 0.3rem 0.85rem; - color: var(--color-neutral-600); - text-decoration: none; - border-left: 3px solid transparent; - transition: all 0.3s ease; - border-radius: 4px; - font-size: 0.9rem; - line-height: 1.3; -} - -.toc-container a:hover { - background: var(--color-neutral-50); - border-left-color: var(--color-navy-primary); - color: var(--color-navy-primary); -} - -.toc-container a.active { - background: var(--color-neutral-50); - border-left-color: var(--color-navy-primary); - color: var(--color-navy-primary); - font-weight: 600; -} - -.toc-list::-webkit-scrollbar { - width: 6px; -} - -.toc-list::-webkit-scrollbar-track { - background: var(--color-neutral-50); - border-radius: 3px; -} - -.toc-list::-webkit-scrollbar-thumb { - background: var(--color-neutral-600); - border-radius: 3px; -} - -.toc-list::-webkit-scrollbar-thumb:hover { - background: var(--color-neutral-700); -} - /* ======================================== ❌ NO AGREGAR CSS DE COMPONENTES AQUÍ ======================================== diff --git a/wp-content/themes/apus-theme/assets/css/toc-sidebar.css b/wp-content/themes/apus-theme/assets/css/toc-sidebar.css new file mode 100644 index 00000000..676fed1f --- /dev/null +++ b/wp-content/themes/apus-theme/assets/css/toc-sidebar.css @@ -0,0 +1,124 @@ +/** + * Sidebar TOC (Table of Contents) Styles + * + * RESPONSABILIDAD: Estilos del componente TOC Sidebar + * - Contenedor sticky (.sidebar-sticky) + * - Contenedor TOC (.toc-container) + * - Título del TOC (.toc-container h4) + * - Lista de enlaces (.toc-list) + * - Items y enlaces del TOC + * - Scrollbar personalizado + * + * @package Apus_Theme + * @since 1.0.5 + * @source apus-theme-template/css/style.css líneas 663-746 + */ + +/* ======================================== + Contenedor Sticky del Sidebar + ======================================== */ + +.sidebar-sticky { + position: sticky; + top: 85px; + display: flex; + flex-direction: column; +} + +/* ======================================== + Contenedor del TOC + ======================================== */ + +.toc-container { + margin-bottom: 13px; + background: #ffffff; + border: 1px solid var(--color-neutral-100); + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + padding: 12px 16px; + max-height: calc(100vh - 71px - 10px - 250px - 15px - 15px); + display: flex; + flex-direction: column; +} + +/* ======================================== + Título del TOC + ======================================== */ + +.toc-container h4 { + color: var(--color-navy-primary); + padding-bottom: 8px; + border-bottom: 2px solid var(--color-neutral-100); + margin-bottom: 0.75rem; + font-weight: 600; + text-align: left; + font-size: 1rem; + font-style: normal; +} + +/* ======================================== + Lista de Enlaces del TOC + ======================================== */ + +.toc-list { + overflow-y: auto; + padding-right: 0.5rem; + list-style: none; + flex: 1; + min-height: 0; +} + +.toc-container li { + margin-bottom: 0.15rem; +} + +/* ======================================== + Enlaces del TOC + ======================================== */ + +.toc-container a { + display: block; + padding: 0.3rem 0.85rem; + color: var(--color-neutral-600); + text-decoration: none; + border-left: 3px solid transparent; + transition: all 0.3s ease; + border-radius: 4px; + font-size: 0.9rem; + line-height: 1.3; +} + +.toc-container a:hover { + background: var(--color-neutral-50); + border-left-color: var(--color-navy-primary); + color: var(--color-navy-primary); +} + +.toc-container a.active { + background: var(--color-neutral-50); + border-left-color: var(--color-navy-primary); + color: var(--color-navy-primary); + font-weight: 600; +} + +/* ======================================== + Scrollbar Personalizado (Webkit) + ======================================== */ + +.toc-list::-webkit-scrollbar { + width: 6px; +} + +.toc-list::-webkit-scrollbar-track { + background: var(--color-neutral-50); + border-radius: 3px; +} + +.toc-list::-webkit-scrollbar-thumb { + background: var(--color-neutral-600); + border-radius: 3px; +} + +.toc-list::-webkit-scrollbar-thumb:hover { + background: var(--color-neutral-700); +} diff --git a/wp-content/themes/apus-theme/functions.php b/wp-content/themes/apus-theme/functions.php index a0d9b39a..aa2f0e04 100644 --- a/wp-content/themes/apus-theme/functions.php +++ b/wp-content/themes/apus-theme/functions.php @@ -14,7 +14,7 @@ if (!defined('ABSPATH')) { /** * Theme Version */ -define('APUS_VERSION', '1.0.5'); +define('APUS_VERSION', '1.0.6'); /** * Theme Setup diff --git a/wp-content/themes/apus-theme/inc/enqueue-scripts.php b/wp-content/themes/apus-theme/inc/enqueue-scripts.php index e4d85cca..6482e086 100644 --- a/wp-content/themes/apus-theme/inc/enqueue-scripts.php +++ b/wp-content/themes/apus-theme/inc/enqueue-scripts.php @@ -563,6 +563,32 @@ function apus_enqueue_cta_box_sidebar_assets() { add_action('wp_enqueue_scripts', 'apus_enqueue_cta_box_sidebar_assets', 17); +/** + * Enqueue TOC Sidebar styles (only on single posts) + * + * ARQUITECTURA: Cada componente debe tener su propio archivo CSS + * Issue #121 - Separación de responsabilidades CSS + * + * @since 1.0.5 + */ +function apus_enqueue_toc_sidebar_assets() { + // Only load on single posts + if (!is_single()) { + return; + } + + // TOC Sidebar CSS + wp_enqueue_style( + 'apus-toc-sidebar', + get_template_directory_uri() . '/assets/css/toc-sidebar.css', + array('apus-bootstrap'), + filemtime(get_template_directory() . '/assets/css/toc-sidebar.css'), + 'all' + ); +} + +add_action('wp_enqueue_scripts', 'apus_enqueue_toc_sidebar_assets', 18); + /** * Enqueue Footer Contact Form styles *