Migración completa a Clean Architecture con componentes funcionales
- Reorganización de estructura: Admin/, Public/, Shared/, Schemas/ - 12 componentes migrados: TopNotificationBar, Navbar, CtaLetsTalk, Hero, FeaturedImage, TableOfContents, CtaBoxSidebar, SocialShare, CtaPost, RelatedPost, ContactForm, Footer - Panel de administración con tabs Bootstrap 5 funcionales - Schemas JSON para configuración de componentes - Renderers dinámicos con CSSGeneratorService (cero CSS hardcodeado) - FormBuilders para UI admin con Design System consistente - Fix: Bootstrap JS cargado en header para tabs funcionales - Fix: buildTextInput maneja valores mixed (bool/string) - Eliminación de estructura legacy (src/, admin/, assets/css/componente-*) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -1,36 +0,0 @@
|
||||
/**
|
||||
* Buttons Styles
|
||||
*
|
||||
* RESPONSABILIDAD: Estilos de botones personalizados del tema
|
||||
* - Botón Let's Talk (navbar)
|
||||
* - Otros botones custom del tema
|
||||
*
|
||||
* REACTIVADO: Issue #121 - Arquitectura de separación de componentes
|
||||
* El CSS NO debe estar en style.css sino en archivos individuales
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.7
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
Botón Let's Talk (Navbar)
|
||||
======================================== */
|
||||
|
||||
.btn-lets-talk {
|
||||
background-color: var(--color-orange-primary) !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-lets-talk:hover {
|
||||
background-color: var(--color-orange-hover) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.btn-lets-talk i {
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
/**
|
||||
* CTA A/B Testing Styles
|
||||
*
|
||||
* CSS EXACTO copiado del template style.css (líneas 835-865)
|
||||
* Sin extras, sin !important innecesario, sin media queries complicadas
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.2
|
||||
*/
|
||||
|
||||
.cta-section {
|
||||
background: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%);
|
||||
box-shadow: 0 8px 24px rgba(255, 133, 0, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.cta-section h3 {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.cta-section p {
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background-color: var(--color-orange-primary);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: var(--color-orange-hover);
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Responsive Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.cta-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
/**
|
||||
* CTA Box Sidebar Styles
|
||||
*
|
||||
* Styles for the CTA box component that appears in the sidebar
|
||||
* below the Table of Contents on single posts.
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
CTA Box Container
|
||||
======================================== */
|
||||
|
||||
.cta-box-sidebar {
|
||||
background: var(--color-orange-primary);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(255, 133, 0, 0.2);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
CTA Box Content
|
||||
======================================== */
|
||||
|
||||
.cta-box-title {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta-box-text {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
CTA Button
|
||||
======================================== */
|
||||
|
||||
.btn-cta-box {
|
||||
background-color: #ffffff;
|
||||
color: var(--color-orange-primary);
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-cta-box:hover {
|
||||
background-color: var(--color-navy-primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Icon Spacing
|
||||
======================================== */
|
||||
|
||||
.btn-cta-box i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Responsive Design
|
||||
======================================== */
|
||||
|
||||
/* Hide on tablets and mobile */
|
||||
@media (max-width: 991px) {
|
||||
.cta-box-sidebar {
|
||||
display: none; /* Ocultar en móviles */
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Print Styles
|
||||
======================================== */
|
||||
|
||||
@media print {
|
||||
.cta-box-sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
/**
|
||||
* Footer Contact Form Styles
|
||||
*
|
||||
* Styles for the footer section including the contact form
|
||||
* and contact information.
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
Contact Form Styles
|
||||
======================================== */
|
||||
|
||||
.form-control {
|
||||
border: 2px solid var(--color-neutral-100);
|
||||
border-radius: 6px;
|
||||
padding: 0.625rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--color-orange-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-contact-submit {
|
||||
background-color: var(--color-orange-primary);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 2rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-contact-submit:hover {
|
||||
background-color: var(--color-orange-hover);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-submit-form {
|
||||
background-color: var(--color-orange-primary);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-submit-form:hover {
|
||||
background-color: var(--color-orange-hover);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Contact Info Styles
|
||||
======================================== */
|
||||
|
||||
.contact-info i {
|
||||
color: var(--color-orange-primary);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Contact Section - Text Colors Override
|
||||
======================================== */
|
||||
|
||||
/*
|
||||
* Fix Issue #128: Textos demasiado oscuros en sección de contacto
|
||||
* Template usa #495057 (gris medio) en lugar de #212529 (gris oscuro)
|
||||
* Aplicar solo a sección bg-secondary (sección de contacto arriba del footer)
|
||||
*/
|
||||
|
||||
section.bg-secondary h2,
|
||||
section.bg-secondary h3,
|
||||
section.bg-secondary p {
|
||||
color: #495057 !important; /* Bootstrap --bs-gray-700 - Gris medio */
|
||||
}
|
||||
|
||||
section.bg-secondary h6 {
|
||||
color: #495057 !important; /* Bootstrap --bs-gray-700 - Gris medio */
|
||||
}
|
||||
|
||||
/* NOTA: NO sobrescribir estilos Bootstrap h6 - Template usa defaults */
|
||||
@@ -1,50 +0,0 @@
|
||||
/**
|
||||
* Footer Principal Styles
|
||||
*
|
||||
* RESPONSABILIDAD: Estilos del footer principal del sitio
|
||||
* - Background navy dark
|
||||
* - Títulos y enlaces
|
||||
* - Botón de newsletter
|
||||
* - Hover states
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.19
|
||||
* @source roi-theme-template/css/style.css (líneas 987-1021)
|
||||
* @reference CSS-ESPECIFICO.md
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
FOOTER
|
||||
======================================== */
|
||||
|
||||
footer {
|
||||
background-color: var(--color-navy-dark);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
footer h5 {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: var(--color-orange-primary);
|
||||
}
|
||||
|
||||
footer .btn-primary {
|
||||
background-color: var(--color-orange-primary);
|
||||
border-color: var(--color-orange-primary);
|
||||
}
|
||||
|
||||
footer .btn-primary:hover {
|
||||
background-color: var(--color-orange-hover);
|
||||
border-color: var(--color-orange-hover);
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
/**
|
||||
* Hero Section Styles
|
||||
*
|
||||
* RESPONSABILIDAD: Estilos del componente Hero Section
|
||||
* - Contenedor principal con gradiente navy
|
||||
* - Título H1 del post
|
||||
* - Category badges con efecto glassmorphism
|
||||
*
|
||||
* CORRECCIÓN Issue #121: Este archivo estaba vacío (solo comentarios)
|
||||
* diciendo que los estilos estaban en style.css
|
||||
*
|
||||
* Ahora contiene el CSS correcto del template según:
|
||||
* _planeacion/_desarrollo-tema-roi/theme-documentation/08-componente-hero-section/CSS-ESPECIFICO.md
|
||||
*
|
||||
* ELIMINADO: hero-section.css (duplicado con CSS incorrecto)
|
||||
* - hero-section.css usaba clases .hero-section y .hero-category-badge
|
||||
* - El HTML real usa .hero-title y .category-badge
|
||||
* - Se consolidó todo en este archivo con las clases correctas
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.9
|
||||
* @source roi-theme-template/css/style.css líneas 186-222
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
Hero Section
|
||||
======================================== */
|
||||
|
||||
.hero-title {
|
||||
background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%);
|
||||
box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25);
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.hero-title h1 {
|
||||
color: #ffffff !important;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Category Badges (Glassmorphism Effect)
|
||||
======================================== */
|
||||
|
||||
.category-badge {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.813rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.category-badge:hover {
|
||||
background: rgba(255, 133, 0, 0.2);
|
||||
border-color: rgba(255, 133, 0, 0.4);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.category-badge i {
|
||||
color: var(--color-orange-light);
|
||||
}
|
||||
@@ -1,419 +0,0 @@
|
||||
/**
|
||||
* Modal de Contacto - Estilos
|
||||
*
|
||||
* Estilos para el modal de contacto con webhook
|
||||
* Compatible con Bootstrap 5.3.2
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. ESTRUCTURA DEL MODAL
|
||||
========================================================================== */
|
||||
|
||||
.modal-content {
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.5rem 1.5rem 1rem 1.5rem;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.5rem;
|
||||
color: #2c3e50;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-close:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 133, 0, 0.25);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. FORMULARIO
|
||||
========================================================================== */
|
||||
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-label .text-danger {
|
||||
font-weight: 700;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 0.65rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-control:hover {
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #FF8600;
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 133, 0, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: #dc3545;
|
||||
padding-right: calc(1.5em + 0.75rem);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
}
|
||||
|
||||
.form-control.is-invalid:focus {
|
||||
border-color: #dc3545;
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
|
||||
}
|
||||
|
||||
.form-control.is-valid {
|
||||
border-color: #28a745;
|
||||
padding-right: calc(1.5em + 0.75rem);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
}
|
||||
|
||||
.form-control.is-valid:focus {
|
||||
border-color: #28a745;
|
||||
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.form-control.is-invalid ~ .invalid-feedback {
|
||||
display: block;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. BOTÓN DE ENVÍO
|
||||
========================================================================== */
|
||||
|
||||
.btn-submit-form {
|
||||
background: linear-gradient(135deg, #FF5722 0%, #FF6B35 100%);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-submit-form::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.btn-submit-form:hover {
|
||||
background: linear-gradient(135deg, #E64A19 0%, #FF5722 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(255, 87, 34, 0.4);
|
||||
}
|
||||
|
||||
.btn-submit-form:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-submit-form:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(255, 87, 34, 0.3);
|
||||
}
|
||||
|
||||
.btn-submit-form:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 133, 0, 0.5), 0 4px 12px rgba(255, 87, 34, 0.3);
|
||||
}
|
||||
|
||||
.btn-submit-form:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Spinner en botón */
|
||||
.spinner-border-sm {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 0.15em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. MENSAJES DE FEEDBACK
|
||||
========================================================================== */
|
||||
|
||||
#formMessage {
|
||||
animation: slideDown 0.3s ease-out;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border-left: 4px solid #28a745;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border-left: 4px solid #dc3545;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
border-left: 4px solid #ffc107;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border-left: 4px solid #17a2b8;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. ANIMACIONES DEL MODAL
|
||||
========================================================================== */
|
||||
|
||||
.modal.fade .modal-dialog {
|
||||
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
||||
transform: translate(0, -50px);
|
||||
}
|
||||
|
||||
.modal.show .modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Backdrop personalizado */
|
||||
.modal-backdrop.show {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6. RESPONSIVE
|
||||
========================================================================== */
|
||||
|
||||
/* Tablets y dispositivos pequeños */
|
||||
@media (max-width: 768px) {
|
||||
.modal-dialog {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0.75rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
font-size: 16px; /* Previene zoom en iOS */
|
||||
}
|
||||
}
|
||||
|
||||
/* Móviles pequeños */
|
||||
@media (max-width: 576px) {
|
||||
.modal-dialog {
|
||||
margin: 0.5rem;
|
||||
max-width: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0.5rem 0.75rem 0.75rem 0.75rem;
|
||||
}
|
||||
|
||||
.btn-submit-form {
|
||||
padding: 0.65rem 1.25rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
7. ACCESIBILIDAD
|
||||
========================================================================== */
|
||||
|
||||
/* Indicador de foco visible para navegación por teclado */
|
||||
.modal-content *:focus-visible {
|
||||
outline: 2px solid #FF8600;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Mejora de contraste para lectores de pantalla */
|
||||
.screen-reader-text {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
.form-control {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.btn-submit-form {
|
||||
border: 2px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modal.fade .modal-dialog,
|
||||
.btn-submit-form,
|
||||
.form-control,
|
||||
.btn-close {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.btn-submit-form::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#formMessage {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
8. DARK MODE (OPCIONAL)
|
||||
========================================================================== */
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.modal-content {
|
||||
background-color: #2c3e50;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: #bdc3c7;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: #34495e;
|
||||
border-color: #4a5f7f;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: #34495e;
|
||||
border-color: #FF8600;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
9. PRINT STYLES
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
.modal,
|
||||
.modal-backdrop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
/**
|
||||
* Navbar Styles
|
||||
*
|
||||
* RESPONSABILIDAD: Estilos del componente de navegación principal
|
||||
* - Navbar sticky
|
||||
* - Navbar brand
|
||||
* - Nav links y efectos hover
|
||||
* - Dropdown menu
|
||||
* - Dropdown items
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.7
|
||||
* @source roi-theme-template/css/style.css
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
Navbar Principal
|
||||
======================================== */
|
||||
|
||||
.navbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1030;
|
||||
background-color: var(--color-navy-primary) !important;
|
||||
box-shadow: 0 4px 12px rgba(30, 58, 95, 0.15);
|
||||
padding: 0.75rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar.scrolled {
|
||||
box-shadow: 0 6px 20px rgba(30, 58, 95, 0.25);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Navbar Brand
|
||||
======================================== */
|
||||
|
||||
.navbar-brand {
|
||||
color: #ffffff !important;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
color: var(--color-orange-primary) !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Nav Links
|
||||
======================================== */
|
||||
|
||||
.nav-link {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
padding: 0.5rem 0.65rem !important;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleX(0);
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background: var(--color-orange-primary);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--color-orange-primary) !important;
|
||||
background-color: rgba(255, 133, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
transform: translateX(-50%) scaleX(1);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Dropdown Menu
|
||||
======================================== */
|
||||
|
||||
.dropdown-menu {
|
||||
background: #ffffff;
|
||||
border: none;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-gray-400) transparent;
|
||||
}
|
||||
|
||||
/* Webkit browsers (Chrome, Safari, Edge) scrollbar */
|
||||
.dropdown-menu::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.dropdown-menu::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dropdown-menu::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-gray-400);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.dropdown-menu::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Dropdown Items
|
||||
======================================== */
|
||||
|
||||
.dropdown-item {
|
||||
color: var(--color-neutral-600);
|
||||
padding: 0.5rem 1.25rem;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: rgba(255, 133, 0, 0.1);
|
||||
color: var(--color-orange-primary);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Dropdown Hover (Desktop Only)
|
||||
======================================== */
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.nav-item:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
/**
|
||||
* Post Content Component
|
||||
*
|
||||
* Estilos para el contenedor y contenido de posts
|
||||
* Source: roi-theme-template/css/style.css líneas 245-298
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
POST CONTENT CONTAINER
|
||||
============================================ */
|
||||
|
||||
.post-content {
|
||||
background: #ffffff;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
POST CONTENT TYPOGRAPHY
|
||||
============================================ */
|
||||
|
||||
.post-content h2 {
|
||||
color: var(--color-navy-primary);
|
||||
font-weight: 700;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 3px solid var(--color-orange-primary);
|
||||
}
|
||||
|
||||
.post-content h3 {
|
||||
color: var(--color-navy-light);
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-content h4 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.post-content p {
|
||||
color: var(--color-neutral-600);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.post-content ul,
|
||||
.post-content ol {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.post-content li {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-neutral-600);
|
||||
}
|
||||
|
||||
.post-content strong {
|
||||
color: var(--color-navy-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.post-content a {
|
||||
color: var(--color-orange-primary);
|
||||
text-decoration: underline;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.post-content a:hover {
|
||||
color: var(--color-orange-hover);
|
||||
}
|
||||
|
||||
.post-content blockquote {
|
||||
border-left: 4px solid #0d6efd;
|
||||
padding-left: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
font-style: italic;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.post-content code {
|
||||
background: #f8f9fa;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.95rem;
|
||||
color: #e83e8c;
|
||||
}
|
||||
|
||||
.post-content pre {
|
||||
background: #f8f9fa;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.post-content pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.post-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.post-content h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.post-content h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.post-content p,
|
||||
.post-content li {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
/**
|
||||
* Related Posts Component
|
||||
*
|
||||
* RESPONSABILIDAD: Estilos para las cards de posts relacionados
|
||||
* - Cards con borde izquierdo navy de 4px
|
||||
* - Hover effect con borde naranja
|
||||
* - Cursor pointer
|
||||
* - Integración con Bootstrap 5 cards
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.17
|
||||
* @source roi-theme-template/css/style.css (líneas del template)
|
||||
* @reference CSS-ESPECIFICO.md líneas 62-132
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
Related Posts Section
|
||||
======================================== */
|
||||
|
||||
.related-posts {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.related-posts h2 {
|
||||
color: var(--color-navy-primary);
|
||||
font-weight: 700;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Related Posts Cards
|
||||
======================================== */
|
||||
|
||||
.related-posts .card {
|
||||
cursor: pointer;
|
||||
background: #ffffff !important;
|
||||
border: 1px solid var(--color-neutral-100) !important;
|
||||
border-left: 4px solid var(--color-neutral-600) !important;
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.related-posts .card:hover {
|
||||
background: var(--color-neutral-50) !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
||||
border-left-color: var(--color-orange-primary) !important;
|
||||
}
|
||||
|
||||
.related-posts .card-body {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
|
||||
.related-posts .card-title {
|
||||
color: var(--color-navy-primary) !important;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.related-posts a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.related-posts a:hover .card-title {
|
||||
color: var(--color-orange-primary) !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Pagination (si existe)
|
||||
======================================== */
|
||||
|
||||
.pagination .page-link {
|
||||
color: var(--color-neutral-600);
|
||||
border: 1px solid var(--color-neutral-100);
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0 0.25rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
background-color: rgba(255, 133, 0, 0.1);
|
||||
border-color: var(--color-orange-primary);
|
||||
color: var(--color-orange-primary);
|
||||
}
|
||||
|
||||
.pagination .page-item.active .page-link {
|
||||
background-color: var(--color-orange-primary);
|
||||
border-color: var(--color-orange-primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
/**
|
||||
* Social Share Buttons - Estilos Mínimos
|
||||
*
|
||||
* Según CSS-ESPECIFICO.md de la documentación:
|
||||
* Solo 2 reglas CSS simples. Bootstrap maneja el resto.
|
||||
*
|
||||
* Fuente: roi-theme-template/css/style.css líneas 795-806
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
/* === SHARE BUTTONS === */
|
||||
|
||||
.share-buttons .btn {
|
||||
transition: all 0.3s ease;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.share-buttons .btn:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
/**
|
||||
* 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 ROI_Theme
|
||||
* @since 1.0.5
|
||||
* @source roi-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);
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
/**
|
||||
* Top Notification Bar Styles
|
||||
*
|
||||
* 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-roi/theme-documentation/05-componente-top-bar/CSS-ESPECIFICO.md
|
||||
*
|
||||
* @package ROI_Theme
|
||||
* @since 1.0.8
|
||||
* @source roi-theme-template/css/style.css líneas 57-80
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
Top Notification Bar
|
||||
======================================== */
|
||||
|
||||
.top-notification-bar {
|
||||
background-color: var(--color-navy-dark);
|
||||
color: #ffffff;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-notification-bar strong {
|
||||
color: var(--color-orange-primary);
|
||||
}
|
||||
|
||||
.top-notification-bar i {
|
||||
color: var(--color-orange-primary);
|
||||
}
|
||||
|
||||
.top-notification-bar a {
|
||||
color: #ffffff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.top-notification-bar a:hover {
|
||||
color: var(--color-orange-primary);
|
||||
}
|
||||
@@ -37,9 +37,7 @@
|
||||
color: var(--color-orange-primary);
|
||||
background-color: rgba(255, 133, 0, 0.1);
|
||||
border-color: var(--color-orange-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(255, 133, 0, 0.15);
|
||||
z-index: 2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-link:focus {
|
||||
@@ -53,17 +51,8 @@
|
||||
/* Active page */
|
||||
.page-item.active .page-link {
|
||||
color: #ffffff;
|
||||
background: var(--color-orange-primary);
|
||||
background-color: var(--color-orange-primary);
|
||||
border-color: var(--color-orange-primary);
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(255, 133, 0, 0.3);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.page-item.active .page-link:hover {
|
||||
background: var(--color-orange-light);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(255, 133, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
|
||||
Reference in New Issue
Block a user