FIX: Top Notification Bar no se veía - Corregir notification-bar.css - Issue #121
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 <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -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);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ if (!defined('ABSPATH')) {
|
||||
/**
|
||||
* Theme Version
|
||||
*/
|
||||
define('APUS_VERSION', '1.0.7');
|
||||
define('APUS_VERSION', '1.0.8');
|
||||
|
||||
/**
|
||||
* Theme Setup
|
||||
|
||||
Reference in New Issue
Block a user