From 3c4bb8ba5a0d8a2032acb675522fa3f0c461cc39 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Wed, 12 Nov 2025 16:01:12 -0600 Subject: [PATCH] fix(admin-panel): Create component-navbar.css with #navbarTab rules MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Created component-navbar.css based on component-top-bar.css structure - Applied #navbarTab selector to match Top Bar design patterns - Fixed card styles: padding: 0, margin: 0 0 16px, border-radius: 6px - Fixed card-body padding: 1rem (16px) - Fixed box-shadow to match Top Bar: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px - Includes responsive rules and form controls styling Resolves #179 (Phase 1: Create CSS file) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../admin/assets/css/component-navbar.css | 292 ++++++++++++++++++ 1 file changed, 292 insertions(+) create mode 100644 admin-panel/admin/assets/css/component-navbar.css diff --git a/admin-panel/admin/assets/css/component-navbar.css b/admin-panel/admin/assets/css/component-navbar.css new file mode 100644 index 00000000..a788fae1 --- /dev/null +++ b/admin-panel/admin/assets/css/component-navbar.css @@ -0,0 +1,292 @@ +/* ======================================== + ADMIN PANEL - NAVBAR COMPONENT STYLES + Estilos compactos para el panel de administración +======================================== */ + +/* Sobrescribir estilos del contenedor tab-content */ +.tab-content { + padding: 24px 12px !important; + background-color: transparent !important; +} + +/* Títulos de sección compactos */ +.section-title-compact { + font-size: 1rem; + font-weight: 700; + color: var(--color-navy-primary); + margin-bottom: 0.75rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--color-neutral-100); +} + +.section-title-compact i { + margin-right: 0.5rem; +} + +/* Fix conflicto con WordPress: Sobreescribir max-width de .card */ +body .card, +.apus-admin .card { + max-width: none !important; +} + +/* Fix conflicto con WordPress: Sobreescribir estilos de checkbox para que funcionen los switches de Bootstrap */ +.form-switch .form-check-input[type="checkbox"] { + width: 2em !important; + height: 1em !important; + border-radius: 2em !important; + background-color: var(--bs-form-check-bg) !important; + background-image: var(--bs-form-switch-bg) !important; + background-position: left center !important; + background-size: contain !important; + background-repeat: no-repeat !important; + margin-left: -2.5em !important; + box-shadow: none !important; +} + +.form-switch .form-check-input[type="checkbox"]:checked { + background-color: #0d6efd !important; + border-color: #0d6efd !important; + background-position: right center !important; + background-size: contain !important; + background-repeat: no-repeat !important; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important; +} + +body .form-switch .form-check-input[type="checkbox"]::before, +.apus-admin .form-switch .form-check-input[type="checkbox"]::before { + content: none !important; + display: none !important; + background-image: none !important; + width: 0 !important; + height: 0 !important; +} + +body .form-switch .form-check-input[type="checkbox"]::after, +.apus-admin .form-switch .form-check-input[type="checkbox"]::after { + content: none !important; + display: none !important; +} + +/* Cards compactos */ +#navbarTab .card { + border: 1px solid #dee2e6 !important; + border-left: 4px solid #1e3a5f !important; + border-radius: 6px !important; + box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px !important; + transition: all 0.3s ease !important; + background-color: #ffffff !important; + padding: 0 !important; + margin: 0 0 16px !important; +} + +.form-section.card { + border: 2px solid #d1d5db !important; + border-radius: 12px !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; + transition: all 0.3s ease; +} + +.form-section.card:hover { + border-color: #FF8600 !important; + box-shadow: 0 4px 16px rgba(255, 134, 0, 0.15) !important; +} + +.form-section.card .card-body.p-3 { + padding: 1.25rem !important; +} + +/* Color pickers compactos */ +.form-control-color-compact { + width: 100%; + height: 40px; + border-radius: 0.375rem; + border: 1px solid var(--color-neutral-100); + cursor: pointer; + transition: border-color 0.3s ease; +} + +.form-control-color-compact:hover { + border-color: var(--color-orange-primary); +} + +/* Form controls pequeños con mejor UX */ +#navbarTab .form-control-sm, +#navbarTab .form-select-sm { + font-size: 14px !important; + padding: 6px 12px !important; + border: 1px solid rgb(222, 226, 230) !important; + border-radius: 4px !important; + color: rgb(33, 37, 41) !important; +} + +.form-control-sm, +.form-select-sm { + font-size: 0.875rem; + padding: 0.375rem 0.75rem; +} + +/* Labels compactos */ +.form-label.small { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-neutral-700); + margin-bottom: 0.25rem; +} + +/* Fix alineación vertical de labels en switches */ +#navbarTab .form-check.form-switch { + display: flex !important; + align-items: center !important; +} + +#navbarTab .form-switch .form-check-input { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +#navbarTab .form-switch .form-check-label, +.form-switch .form-check-label.small { + line-height: 16px !important; + padding-top: 0 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +/* Switches más compactos */ +.form-check-switch .form-check-input { + width: 2.5rem; + height: 1.25rem; +} + +/* Reducir gaps globales */ +.row.g-3 { + --bs-gutter-x: 1rem; + --bs-gutter-y: 1rem; +} + +.row.g-2 { + --bs-gutter-x: 0.5rem; + --bs-gutter-y: 0.5rem; +} + +/* Badges pequeños */ +.badge { + font-size: 0.7rem; + padding: 0.2em 0.5em; + vertical-align: middle; +} + +/* Tab header compacto */ +.tab-header { + background: linear-gradient(135deg, #0E2337 0%, #1a3a5c 100%); + border-radius: 12px; + padding: 1.5rem; + border: 2px solid #FF8600; + box-shadow: 0 4px 12px rgba(14, 35, 55, 0.15); +} + +.tab-header h3 { + font-size: 1.4rem; + margin-bottom: 0.25rem; + color: #ffffff; + font-weight: 700; +} + +.tab-header p { + color: rgba(255, 255, 255, 0.85); +} + +/* Header específico del Navbar Tab */ +#navbarTab > .rounded { + background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%) !important; + border-left: 4px solid #FF8600 !important; + border-radius: 6px !important; + padding: 24px !important; + margin-bottom: 24px !important; + box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px !important; +} + +#navbarTab > .rounded h3 { + font-size: 1.5rem !important; + margin-bottom: 0.25rem !important; + color: #ffffff !important; + font-weight: 700 !important; +} + +#navbarTab > .rounded p { + color: rgba(255, 255, 255, 0.85) !important; + margin-bottom: 0 !important; +} + +/* Card body padding */ +#navbarTab .card-body { + padding: 1rem !important; +} + +/* Progress bar pequeña */ +.progress[style*="height: 3px"] { + border-radius: 2px; + background-color: var(--color-neutral-100); +} + +/* Botones pequeños */ +.btn-sm { + font-size: 0.875rem; + padding: 0.375rem 0.75rem; +} + +/* Botón primario con estilo de marca */ +.btn-primary { + background-color: var(--color-orange-primary); + border-color: var(--color-orange-primary); + font-weight: 600; +} + +.btn-primary:hover { + background-color: var(--color-orange-hover); + border-color: var(--color-orange-hover); +} + +/* Clases de utilidad de colores */ +.text-navy-primary { + color: var(--color-navy-primary); +} + +.text-orange-primary { + color: var(--color-orange-primary); +} + +.text-neutral-600 { + color: var(--color-neutral-600); +} + +.border-neutral-200 { + border-color: #dee2e6 !important; +} + +/* Responsive: Mobile First */ +@media (max-width: 991px) { + .tab-header { + padding: 0.75rem; + } + + .tab-header h3 { + font-size: 1.1rem; + } + + .form-section.card .card-body.p-3 { + padding: 0.75rem !important; + } +} + +@media (max-width: 576px) { + .tab-header .d-flex { + flex-direction: column; + align-items: flex-start !important; + } + + .tab-header button { + width: 100%; + margin-top: 0.5rem; + } +}