From 2b7ba24ada8ae194d2964f9b2d004a68fc4d8ce9 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Sat, 8 Nov 2025 17:05:52 -0600 Subject: [PATCH] =?UTF-8?q?FIX:=20Top=20Notification=20Bar=20no=20se=20ve?= =?UTF-8?q?=C3=ADa=20-=20Corregir=20notification-bar.css=20-=20Issue=20#12?= =?UTF-8?q?1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Problema: Después del commit ba5d7 (limpieza masiva), el Top Notification Bar dejó de verse porque: 1. Eliminé CSS simple del template de style.css (líneas 779-802) 2. notification-bar.css contenía CSS DIFERENTE del Issue #39 (versión avanzada) 3. HTML en header.php usa versión SIMPLE del template 4. CSS avanzado (position fixed, botón cerrar) NO coincidía con HTML simple Análisis: - HTML actual: Versión simple sin botón cerrar, sin position fixed - CSS eliminado: background navy-dark, padding 0.5rem, text-align center - CSS en archivo: background slate-gray, position fixed, height 40px (INCORRECTO) - Resultado: Barra invisible por estilos incompatibles Solución: Sobrescrito notification-bar.css con CSS correcto del template según: _planeacion/_desarrollo-tema-apus/theme-documentation/05-componente-top-bar/CSS-ESPECIFICO.md Nuevo contenido: - background-color: var(--color-navy-dark) - color: #ffffff - padding: 0.5rem 0 - font-size: 0.9rem - text-align: center - + estilos para strong, i, a, a:hover Archivos modificados: - assets/css/notification-bar.css - Sobrescrito con CSS simple correcto - functions.php - Version bump 1.0.7 → 1.0.8 🎯 Resultado: - Top Notification Bar visible con estilos correctos del template - HTML y CSS alineados correctamente - CSS ya registrado en enqueue-scripts.php línea 171 🤖 Generated with Claude Code Co-Authored-By: Claude --- .../assets/css/notification-bar.css | 262 ++---------------- wp-content/themes/apus-theme/functions.php | 2 +- 2 files changed, 30 insertions(+), 234 deletions(-) diff --git a/wp-content/themes/apus-theme/assets/css/notification-bar.css b/wp-content/themes/apus-theme/assets/css/notification-bar.css index b5291937..4d91bae4 100644 --- a/wp-content/themes/apus-theme/assets/css/notification-bar.css +++ b/wp-content/themes/apus-theme/assets/css/notification-bar.css @@ -1,252 +1,48 @@ /** * Top Notification Bar Styles - * Issue #39 * - * Barra de notificación fija en la parte superior del sitio - * para anunciar actualizaciones importantes o promociones. + * RESPONSABILIDAD: Estilos de la barra de notificación superior + * - Contenedor principal + * - Palabras destacadas (strong) + * - Iconos + * - Enlaces + * + * CORRECCIÓN Issue #121: Este archivo contenía CSS avanzado (position fixed, botón cerrar) + * que NO coincidía con el HTML simple del template en header.php + * + * Ahora contiene el CSS correcto del template según: + * _planeacion/_desarrollo-tema-apus/theme-documentation/05-componente-top-bar/CSS-ESPECIFICO.md * * @package Apus_Theme - * @since 1.0.0 + * @since 1.0.8 + * @source apus-theme-template/css/style.css líneas 57-80 */ -/* ============================================ - NOTIFICATION BAR BASE STYLES - ============================================ */ +/* ======================================== + Top Notification Bar + ======================================== */ .top-notification-bar { - background-color: var(--color-slate-gray); - height: 40px; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: var(--z-navbar); - color: var(--color-white); - font-size: var(--font-size-sm); - animation: slideDown var(--transition-base) ease; - display: flex; - align-items: center; - box-shadow: var(--shadow-sm); -} - -/* ============================================ - ANIMATION - ============================================ */ - -@keyframes slideDown { - from { - transform: translateY(-100%); - opacity: 0; - } - to { - transform: translateY(0); - opacity: 1; - } -} - -/* ============================================ - TEXT STYLES - ============================================ */ - -.notification-text { - font-size: 0.875rem; - line-height: 1.2; -} - -.text-highlight { - color: #61c7cd; - font-weight: 600; - margin-right: 0.25rem; -} - -/* ============================================ - LINK STYLES - ============================================ */ - -.notification-link { - color: #61c7cd; - text-decoration: none; - font-weight: 500; - transition: all 0.2s ease; - white-space: nowrap; -} - -.notification-link:hover { - text-decoration: underline; - color: #4db8c4; -} - -.notification-link:focus { - outline: 2px solid #61c7cd; - outline-offset: 2px; -} - -/* ============================================ - ICON STYLES - ============================================ */ - -.top-notification-bar .bi-megaphone-fill { - color: #61c7cd; - font-size: 1rem; -} - -/* ============================================ - CLOSE BUTTON - ============================================ */ - -.btn-close-notification { - background: transparent; - border: none; - color: rgba(255, 255, 255, 0.8); - cursor: pointer; - padding: 0.5rem; - font-size: 0.75rem; - position: absolute; - right: 1rem; - transition: all 0.2s ease; - line-height: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.btn-close-notification:hover { + background-color: var(--color-navy-dark); color: #ffffff; - transform: scale(1.1); + padding: 0.5rem 0; + font-size: 0.9rem; + text-align: center; } -.btn-close-notification:focus { - outline: 2px solid #61c7cd; - outline-offset: 2px; +.top-notification-bar strong { + color: var(--color-orange-primary); } -.btn-close-notification .bi-x-lg { - font-size: 0.875rem; +.top-notification-bar i { + color: var(--color-orange-primary); } -/* ============================================ - NAVBAR ADJUSTMENT - ============================================ */ - -/* Ajustar navbar cuando notification bar está visible */ -body:not(.notification-dismissed) .navbar { - top: 40px; - position: sticky; +.top-notification-bar a { + color: #ffffff; + transition: color 0.3s ease; } -/* Asegurar que el navbar no se solape cuando la barra está cerrada */ -body.notification-dismissed .navbar { - top: 0; -} - -/* ============================================ - RESPONSIVE STYLES - ============================================ */ - -/* Tablets y pantallas pequeñas */ -@media (max-width: 991px) { - .top-notification-bar { - font-size: 0.8125rem; - height: 36px; - } - - .notification-text { - font-size: 0.8125rem; - } - - .btn-close-notification { - right: 0.75rem; - } - - body:not(.notification-dismissed) .navbar { - top: 36px; - } -} - -/* Móviles */ -@media (max-width: 767px) { - .top-notification-bar { - font-size: 0.8rem; - height: 40px; - padding: 0 0.5rem; - } - - .top-notification-bar .container-fluid { - padding: 0 0.5rem; - } - - .notification-text { - font-size: 0.8rem; - } - - .top-notification-bar .bi-megaphone-fill { - font-size: 0.875rem; - } - - .btn-close-notification { - right: 0.5rem; - padding: 0.25rem; - } - - .notification-link { - font-size: 0.8rem; - } -} - -/* Pantallas muy pequeñas */ -@media (max-width: 480px) { - .top-notification-bar { - font-size: 0.75rem; - } - - .notification-text { - font-size: 0.75rem; - } - - .text-highlight { - margin-right: 0.15rem; - } - - .notification-link { - font-size: 0.75rem; - margin-left: 0.25rem !important; - } -} - -/* ============================================ - ACCESSIBILITY - ============================================ */ - -/* Modo de alto contraste */ -@media (prefers-contrast: high) { - .top-notification-bar { - border-bottom: 2px solid #ffffff; - } - - .text-highlight, - .notification-link { - color: #ffffff; - font-weight: 700; - } -} - -/* Reducción de movimiento */ -@media (prefers-reduced-motion: reduce) { - .top-notification-bar { - animation: none; - } - - .btn-close-notification:hover { - transform: none; - } -} - -/* ============================================ - PRINT STYLES - ============================================ */ - -@media print { - .top-notification-bar { - display: none; - } +.top-notification-bar a:hover { + color: var(--color-orange-primary); } diff --git a/wp-content/themes/apus-theme/functions.php b/wp-content/themes/apus-theme/functions.php index 8cd88df2..23e2fec9 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.7'); +define('APUS_VERSION', '1.0.8'); /** * Theme Setup