// ============================================================ // M22 TECH CONSULTING - THEME STYLES // Futurismo Cálido + Glassmorphism // ============================================================ // // CONTEXTOS VISUALES: // 1. Login/Auth: 100% Dark + Glassmorphism intenso // 2. Sidebar: Dark + Glassmorphism sutil // 3. Contenido Principal: Light + Glassmorphism elegante // // ============================================================ // ------------------------------------------------------- // VARIABLES // ------------------------------------------------------- $m22-midnight: #0F111A; $m22-sidebar-dark: #1C1633; $m22-orange: #FF7C00; $m22-magenta: #E0407B; $m22-content-light: #F8F8F8; $m22-white: #FFFFFF; $m22-text-dark: #1A1A1A; $m22-text-muted: #6B7280; $m22-text-light: #A0A0A0; // ------------------------------------------------------- // 0. EARLY INIT - Prevent sidebar flash on page load // ------------------------------------------------------- // This class is applied to by an inline script in // before the page renders, preventing the visual flash when // restoring collapsed state from localStorage. html.m22-sidebar-collapsed-init { // Sidebar VISIBLE but in collapsed state - NO transitions .m22-sidebar { width: 72px !important; // Kill ALL transitions during init &, *, *::before, *::after { transition: none !important; animation: none !important; } // CRITICAL: Fix icon positions to prevent movement .nav-link { position: relative !important; justify-content: center !important; padding: 0.75rem !important; // Apply to both icon selectors to cover all cases i.sidebar-icon, .fa:first-child { position: relative !important; flex-shrink: 0 !important; width: 20px !important; min-width: 20px !important; text-align: center !important; margin: 0 !important; } } // Also fix nav container padding to match collapsed state .sidebar-nav { padding: 1rem 0.5rem !important; } // Fix header padding and alignment .sidebar-header { padding: 0.75rem !important; justify-content: center !important; } // Hide logo when collapsed (same as normal collapsed state) .sidebar-logo { display: none !important; } // Center collapse button .sidebar-collapse-btn { margin: 0 auto !important; } // Fix footer padding .sidebar-footer { padding: 0.5rem !important; } // Fix user info when collapsed .sidebar-user-info { justify-content: center !important; padding: 0.5rem !important; } // Fix logout button when collapsed .sidebar-logout { padding: 0.625rem !important; } // Hide text elements - use absolute to remove from flow .sidebar-text, .sidebar-title, .sidebar-logo-text { opacity: 0 !important; visibility: hidden !important; width: 0 !important; position: absolute !important; left: -9999px !important; // Move off-screen to prevent layout shift } // SMART: Hide the original icon, show correct one via CSS .sidebar-collapse-btn { position: relative !important; i { // Hide original icon content visibility: hidden !important; position: relative; // Show chevron-right via ::after &::after { content: "\f054"; // fa-chevron-right font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome; font-weight: 900; visibility: visible !important; position: absolute; left: 0; top: 0; } } } } // Main content with correct margin - NO transitions #wrapwrap.o_has_m22_sidebar main.o_main_with_sidebar { margin-left: 72px !important; transition: none !important; } // When expanded (remove init class), allow normal behavior &:not(.m22-sidebar-collapsed-init) { .m22-sidebar { width: 260px !important; .sidebar-text, .sidebar-title, .sidebar-logo-text { opacity: 1 !important; visibility: visible !important; width: auto !important; position: static !important; left: auto !important; } } #wrapwrap.o_has_m22_sidebar main.o_main_with_sidebar { margin-left: 260px !important; } } // After JS initializes, enable transitions &.m22-sidebar-initialized { .m22-sidebar { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; // Show original icon (JS already set the correct class) .sidebar-collapse-btn i { visibility: visible !important; &::after { display: none; } } // Enable transitions for children .sidebar-text, .sidebar-title, .sidebar-logo-text, .nav-link, .sidebar-footer { transition: opacity 0.2s ease, visibility 0.2s ease !important; } } #wrapwrap.o_has_m22_sidebar main.o_main_with_sidebar { transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } } } // ------------------------------------------------------- // 1. BASE STYLES (When M22 Theme is Active) // ------------------------------------------------------- // Body base - Light background for content area // Note: Login pages have their own dark background via login_custom.xml #wrapwrap.o_has_m22_sidebar { background-color: $m22-content-light; // Subtle gradient texture for glassmorphism effect background-image: radial-gradient(ellipse 80% 50% at 10% 20%, rgba($m22-orange, 0.04), transparent 50%), radial-gradient(ellipse 80% 50% at 90% 80%, rgba($m22-magenta, 0.04), transparent 50%); background-attachment: fixed; min-height: 100vh; } // ------------------------------------------------------- // 2. SIDEBAR - DARK GLASSMORPHISM // ------------------------------------------------------- $sidebar-width-expanded: 260px; $sidebar-width-collapsed: 72px; $sidebar-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); .m22-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: $sidebar-width-expanded; height: 100vh; z-index: 100; // Dark Glassmorphism background: rgba($m22-midnight, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); // Smooth width transition transition: width $sidebar-transition; // Prevent horizontal scroll - critical fix overflow: hidden; // Sidebar Header .sidebar-header { flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); min-height: 64px; display: flex; align-items: center; overflow: hidden; } // Logo area .sidebar-logo { display: flex; align-items: center; overflow: hidden; flex-shrink: 0; img { max-height: 32px; width: auto; flex-shrink: 0; transition: opacity $sidebar-transition; } } // Navigation container .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem 0.75rem; // Hide scrollbar when collapsed &::-webkit-scrollbar { width: 4px; } } // Nav Links - Base state .nav-link { display: flex; align-items: center; color: $m22-text-light; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 4px; text-decoration: none; position: relative; overflow: hidden; transition: background $sidebar-transition, color 0.2s ease, padding $sidebar-transition; // Icon styling i.sidebar-icon, .fa:first-child { width: 20px; min-width: 20px; text-align: center; font-size: 1.1rem; flex-shrink: 0; transition: margin $sidebar-transition; } // Text styling .sidebar-text { margin-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.15s ease, visibility 0.15s ease, margin $sidebar-transition; } &:hover { color: $m22-white; background: rgba(255, 255, 255, 0.08); } &.active { background: linear-gradient(90deg, rgba($m22-orange, 0.15), rgba($m22-magenta, 0.1)); color: $m22-orange; // Active indicator bar &::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: $m22-orange; border-radius: 0 2px 2px 0; } } } // Sidebar Footer .sidebar-footer { flex-shrink: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 0.75rem; overflow: hidden; } // User info section .sidebar-user-info { display: flex; align-items: center; padding: 0.5rem; border-radius: 8px; margin-bottom: 0.5rem; overflow: hidden; transition: background 0.2s ease; &:hover { background: rgba(255, 255, 255, 0.05); } } // User Avatar .user-avatar { width: 36px; height: 36px; min-width: 36px; background: linear-gradient(135deg, $m22-orange, $m22-magenta); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: $m22-white; font-size: 0.875rem; flex-shrink: 0; } // Collapse Button - Modern design .sidebar-collapse-btn { width: 32px; height: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: $m22-text-light; cursor: pointer; transition: all 0.2s ease; padding: 0; flex-shrink: 0; i { font-size: 0.875rem; transition: transform 0.3s ease; } &:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: $m22-white; } &:active { transform: scale(0.95); } } // Logout Button .sidebar-logout { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.625rem 1rem; color: $m22-text-light; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; background: transparent; text-decoration: none; font-size: 0.875rem; transition: all 0.2s ease; overflow: hidden; i { flex-shrink: 0; } &:hover { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); color: #EF4444; } } // ========================================= // COLLAPSED STATE - Desktop Only // ========================================= &[data-collapsed="true"] { width: $sidebar-width-collapsed; // Header adjustments .sidebar-header { padding: 0.75rem !important; justify-content: center; } // Hide logo when collapsed .sidebar-logo { display: none; } // Center collapse button .sidebar-collapse-btn { margin: 0 auto; } // Nav adjustments .sidebar-nav { padding: 1rem 0.5rem; } // Nav link adjustments .nav-link { justify-content: center; padding: 0.75rem; // Hide text .sidebar-text { opacity: 0; visibility: hidden; width: 0; margin-left: 0; position: absolute; } // Center icon i.sidebar-icon, .fa:first-child { margin: 0; } // Adjust active indicator for collapsed &.active::before { height: 40%; } // Tooltip on hover when collapsed &::after { content: attr(title); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: rgba($m22-midnight, 0.95); backdrop-filter: blur(10px); color: $m22-white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.8125rem; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); } &:hover::after { opacity: 1; visibility: visible; } } // Footer adjustments .sidebar-footer { padding: 0.5rem; } // User info when collapsed .sidebar-user-info { justify-content: center; padding: 0.5rem; .sidebar-text { display: none; } } // Logout button when collapsed .sidebar-logout { padding: 0.625rem; .sidebar-text { display: none; } } } } // ------------------------------------------------------- // 3. MAIN CONTENT AREA - LIGHT GLASSMORPHISM // ------------------------------------------------------- #wrapwrap.o_has_m22_sidebar { main.o_main_with_sidebar { margin-left: $sidebar-width-expanded !important; min-height: 100vh; padding: 1.5rem 2rem; transition: margin-left $sidebar-transition; @media (max-width: 991px) { margin-left: 0 !important; padding: 1rem; padding-bottom: 80px; // Space for bottom nav } } } // Glassmorphism Cards (Light Mode) .m22-card, .card, #wrapwrap.o_has_m22_sidebar .card { background: rgba($m22-white, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; &:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); border-color: rgba($m22-orange, 0.15); } } // ------------------------------------------------------- // 4. TYPOGRAPHY - CONTEXT AWARE // ------------------------------------------------------- // Light Context (Content Area) #wrapwrap.o_has_m22_sidebar { color: $m22-text-dark; h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: $m22-text-dark !important; font-family: 'Inter', sans-serif; font-weight: 700; } p, .text-muted { color: $m22-text-muted; } // Links a:not(.nav-link):not(.btn) { color: $m22-orange; text-decoration: none; transition: color 0.2s ease; &:hover { color: darken($m22-orange, 10%); } } } // Dark Context (Sidebar) - Already handled in .m22-sidebar // ------------------------------------------------------- // 5. TABLES - LIGHT MODE GLASSMORPHISM // ------------------------------------------------------- #wrapwrap.o_has_m22_sidebar { .table, .o_portal_my_doc_table, table { background: rgba($m22-white, 0.8); backdrop-filter: blur(8px); border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0; thead { background: rgba($m22-content-light, 0.9); th { color: $m22-text-dark; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } } tbody { tr { transition: background 0.2s ease; &:hover { background: rgba($m22-orange, 0.04); } td { padding: 1rem 1.5rem; color: $m22-text-dark; border-bottom: 1px solid rgba(0, 0, 0, 0.05); vertical-align: middle; } &:last-child td { border-bottom: none; } } } // Links in tables a { color: $m22-orange; font-weight: 500; &:hover { text-decoration: underline; } } } } // ------------------------------------------------------- // 6. BADGES & STATUS INDICATORS // ------------------------------------------------------- // Universal badge styling for light content backgrounds // Ensures all Bootstrap badges are visible with proper contrast .badge { font-weight: 500; padding: 0.35em 0.75em; border-radius: 9999px; font-size: 0.75rem; letter-spacing: 0.01em; } // Primary - Orange M22 style .badge-primary, .text-bg-primary { background: rgba($m22-orange, 0.15) !important; color: darken($m22-orange, 5%) !important; } // Secondary - Gray .badge-secondary, .text-bg-secondary { background: rgba(107, 114, 128, 0.15) !important; color: #4B5563 !important; } // Success - Green .badge-paid, .badge-success, .text-bg-success { background: rgba(34, 197, 94, 0.15) !important; color: #16A34A !important; } // Warning - Yellow/Amber .badge-pending, .badge-warning, .text-bg-warning { background: rgba(234, 179, 8, 0.15) !important; color: #CA8A04 !important; } // Danger - Red .badge-overdue, .badge-danger, .text-bg-danger { background: rgba(239, 68, 68, 0.15) !important; color: #DC2626 !important; } // Info - Cyan/Blue .badge-info, .text-bg-info { background: rgba(59, 130, 246, 0.15) !important; color: #2563EB !important; } // Light - Gray with dark text (CRITICAL for helpdesk stages) .badge-light, .text-bg-light, .bg-200 { background: rgba(0, 0, 0, 0.06) !important; color: $m22-text-dark !important; } // Dark - Dark bg with light text .badge-dark, .text-bg-dark { background: rgba($m22-midnight, 0.85) !important; color: $m22-white !important; } // ------------------------------------------------------- // 7. BUTTONS - M22 STYLE // ------------------------------------------------------- .btn-m22-primary, .btn-primary { background: linear-gradient(90deg, $m22-orange, $m22-magenta) !important; border: none !important; color: $m22-white !important; font-weight: 600; padding: 0.625rem 1.25rem; border-radius: 8px; box-shadow: 0 4px 12px rgba($m22-orange, 0.25); transition: all 0.3s ease; &:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba($m22-orange, 0.35); opacity: 0.95; } &:active { transform: translateY(0); } } .btn-outline-primary { color: $m22-orange !important; border-color: $m22-orange !important; background: transparent !important; &:hover { background: rgba($m22-orange, 0.1) !important; } } // ------------------------------------------------------- // 8. FORM INPUTS - LIGHT GLASSMORPHISM // ------------------------------------------------------- #wrapwrap.o_has_m22_sidebar { .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { background: rgba($m22-white, 0.9); backdrop-filter: blur(4px); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; color: $m22-text-dark; padding: 0.625rem 1rem; transition: all 0.2s ease; &:focus { border-color: $m22-orange; box-shadow: 0 0 0 3px rgba($m22-orange, 0.15); outline: none; } &::placeholder { color: $m22-text-muted; } } label { color: $m22-text-dark; font-weight: 500; font-size: 0.875rem; } } // ------------------------------------------------------- // 9. BREADCRUMBS // ------------------------------------------------------- #wrapwrap.o_has_m22_sidebar { .breadcrumb { background: transparent; padding: 0; margin-bottom: 1.5rem; .breadcrumb-item { color: $m22-text-muted; font-size: 0.875rem; a { color: $m22-text-muted; &:hover { color: $m22-orange; } } &.active { color: $m22-text-dark; font-weight: 500; } + .breadcrumb-item::before { color: $m22-text-muted; } } } } // ------------------------------------------------------- // 10. MOBILE SIDEBAR & BOTTOM NAV // ------------------------------------------------------- @media (max-width: 991px) { .m22-sidebar { width: 280px; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1050; &.m22-sidebar-open { transform: translateX(0); } } } // Sidebar Backdrop (Mobile) .m22-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 1040; opacity: 0; visibility: hidden; transition: all 0.3s ease; &.visible { opacity: 1; visibility: visible; } } // Bottom Navigation (Mobile) .m22-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: rgba($m22-midnight, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.1); z-index: 1030; padding: 0.5rem 0; .bottom-nav-item { color: $m22-text-light; text-decoration: none; transition: all 0.2s ease; padding: 0.5rem; flex: 1; text-align: center; i, .fa { font-size: 1.25rem; display: block; margin-bottom: 0.25rem; } .bottom-nav-label { font-size: 0.7rem; display: block; } &:hover, &.active { color: $m22-orange; } // More button styling &#m22_more_btn { color: $m22-text-light; &:hover, &:focus { color: $m22-orange; outline: none; } } } } // ------------------------------------------------------- // 10.1. BOTTOM SHEET (iOS Style with Tailwind) // ------------------------------------------------------- // Override Tailwind classes to match theme colors #m22_bottom_sheet { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1050; // Above bottom nav (1030) // Hidden by default (CSS fallback if Tailwind doesn't work) display: none; pointer-events: none; &.visible { display: block; pointer-events: auto; } // Backdrop with theme colors #m22_bottom_sheet_backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba($m22-midnight, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s ease; &.show { opacity: 1; } } // Sheet content - Theme integration #m22_bottom_sheet_content { position: absolute; bottom: 0; left: 0; right: 0; background: rgba($m22-white, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15); border-radius: 24px 24px 0 0; max-height: 85vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); &.show { transform: translateY(0); } // Handle indicator .rounded-full { background: rgba($m22-text-muted, 0.3); } // Header h3 { color: $m22-text-dark; } // Sheet items with theme colors .m22-sheet-item { color: $m22-text-dark; &:hover { background: rgba($m22-orange, 0.08); i { color: $m22-orange; } } i.fa:first-child { color: $m22-text-muted; transition: color 0.2s ease; } } // Close button button#m22_bottom_sheet_close { background: rgba($m22-content-light, 0.9); color: $m22-text-dark; &:hover { background: rgba($m22-content-light, 1); color: $m22-orange; } } // Scrollbar styling for sheet content .overflow-y-auto { &::-webkit-scrollbar { width: 4px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: rgba($m22-orange, 0.3); border-radius: 2px; &:hover { background: rgba($m22-orange, 0.5); } } } } } // Dark mode support (if implemented later) @media (prefers-color-scheme: dark) { #m22_bottom_sheet { #m22_bottom_sheet_content { background: rgba($m22-midnight, 0.98); h3 { color: $m22-white; } .m22-sheet-item { color: $m22-white; &:hover { background: rgba($m22-orange, 0.15); } } button#m22_bottom_sheet_close { background: rgba($m22-sidebar-dark, 0.9); color: $m22-white; &:hover { background: rgba($m22-sidebar-dark, 1); } } } } } // ------------------------------------------------------- // 11. GRADIENT TEXT UTILITY // ------------------------------------------------------- .text-gradient { background: linear-gradient(90deg, $m22-orange, $m22-magenta); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } // ------------------------------------------------------- // 12. SCROLLBAR STYLING // ------------------------------------------------------- .m22-sidebar .sidebar-nav, #wrapwrap.o_has_m22_sidebar main { scroll-behavior: smooth; &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: rgba($m22-orange, 0.3); border-radius: 3px; &:hover { background: rgba($m22-orange, 0.5); } } } // Dark scrollbar for sidebar .m22-sidebar .sidebar-nav { &::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } } // ------------------------------------------------------- // 13. PORTAL-SPECIFIC OVERRIDES // ------------------------------------------------------- #wrapwrap.o_has_m22_sidebar { // Hide duplicate sidebar elements in "My Account" page only .o_portal_wrap { // Hide the offcanvas sidebar (mobile duplicate) #accountOffCanvas { display: none !important; } } // Portal container .o_portal { background: transparent; } // Card styling in portal - Glassmorphism Light .o_portal_wrap .card, .o_portal_sidebar .card { background: rgba($m22-white, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; } // Ensure main portal sidebar container is visible .o_portal_sidebar { display: block !important; } // ========================================= // Native Odoo Record Sidebar Styling // (Actions panel: total, buttons, contact) // ========================================= .o_portal_sidebar_content { // Glassmorphism container background: rgba($m22-white, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); // Total amount - Prominent display > .position-relative { h2, .h2 { color: $m22-orange !important; font-weight: 700; font-size: 2rem; } } // All headings in sidebar h2, .h2, h4, .h4, h5, .h5, h6, .h6 { color: $m22-text-dark !important; } // Muted text - Make it visible .text-muted, small { color: $m22-text-muted !important; } // ---- BUTTONS ---- // Primary buttons (Accept, Sign, Pay) .btn-primary { background: linear-gradient(90deg, $m22-orange, $m22-magenta) !important; border: none !important; color: $m22-white !important; font-weight: 600; padding: 0.75rem 1.25rem; border-radius: 8px; box-shadow: 0 4px 12px rgba($m22-orange, 0.25); &:hover { opacity: 0.9; transform: translateY(-1px); } } // Light buttons (View Details, Download PDF) .btn-light { background: rgba($m22-content-light, 0.9) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; color: $m22-text-dark !important; font-weight: 500; padding: 0.625rem 1rem; border-radius: 8px; &:hover { background: rgba($m22-content-light, 1) !important; border-color: $m22-orange !important; color: $m22-orange !important; } i, .fa { color: $m22-text-muted; } } // Outline buttons .btn-outline-primary { color: $m22-orange !important; border-color: $m22-orange !important; background: transparent !important; &:hover { background: rgba($m22-orange, 0.1) !important; } } // ---- NAVIGATION (navspy and general nav links) ---- // Generic nav-link styling for sidebar navigation .nav.flex-column, .navspy, .bs-sidenav, [role="complementary"] { .nav-link { color: $m22-text-muted !important; padding: 0.5rem 0; font-size: 0.875rem; border-left: 2px solid transparent; padding-left: 0.75rem; transition: all 0.2s ease; &:hover { color: $m22-orange !important; border-left-color: rgba($m22-orange, 0.3); } &.active { color: $m22-orange !important; font-weight: 600; border-left-color: $m22-orange; } } // Nav items without explicit nav-link class .nav-item > a:not(.btn) { color: $m22-text-muted !important; text-decoration: none; display: block; padding: 0.5rem 0; font-size: 0.875rem; transition: color 0.2s ease; &:hover { color: $m22-orange !important; } } } // Specific fix for helpdesk ticket sidebar links #ticket-nav, #ticket-links { .nav-link { color: $m22-text-dark !important; font-weight: 500; &:hover { color: $m22-orange !important; } } } // ---- CONTACT SECTION ---- .o_portal_contact_details, [class*="contact"] { h5, h6, .h5, .h6 { color: $m22-text-muted !important; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } // Contact name .fw-bold, strong, b { color: $m22-text-dark !important; } // Contact link a { color: $m22-orange !important; text-decoration: none; font-weight: 500; &:hover { text-decoration: underline; } } } // ---- LIST GROUP ITEMS ---- .list-group-item { background: rgba($m22-white, 0.5); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 8px; padding: 1rem; .text-success { color: #16A34A !important; } } // ---- DIVIDER ---- hr { border-color: rgba(0, 0, 0, 0.08); } // Hide "Powered by Odoo" in our theme > .d-none.d-lg-block.mt-5.small.text-center.text-muted { display: none !important; } } // Vertical divider between sidebar and content .o_portal_sale_sidebar > .vr, .o_portal_invoice_sidebar > .vr { background-color: rgba(0, 0, 0, 0.08) !important; } // ========================================= // ADAPTIVE CONTENT WIDTH // Different widths for list vs detail pages // ========================================= main.o_main_with_sidebar { // Default: Centered content for detail pages .container, .o_m22_portal_container { @media (min-width: 992px) { max-width: 1200px; margin-left: auto; margin-right: auto; } } } // LISTADO PAGES: Full width for list tables // Target containers that contain portal document tables #wrapwrap.o_has_m22_sidebar { // When container has list table, make it full width .container:has(.o_portal_my_doc_table), .o_m22_portal_container:has(.o_portal_my_doc_table) { max-width: 100% !important; padding-left: 2rem; padding-right: 2rem; @media (max-width: 991px) { padding-left: 1rem; padding-right: 1rem; } } // DETAIL WITH NATIVE SIDEBAR: Wider layout for 2 columns // Pages with native Odoo sidebar (tickets detail, invoices detail) .container:has(.o_portal_sidebar):not(:has(.o_portal_my_doc_table)), .o_m22_portal_container:has(.o_portal_sidebar):not(:has(.o_portal_my_doc_table)), .container:has(#ticket-nav), .o_m22_portal_container:has(#ticket-nav) { max-width: 1400px !important; margin-left: auto; margin-right: auto; } } // Utility classes for manual control (if needed) .m22-full-width { max-width: 100% !important; padding-left: 2rem; padding-right: 2rem; @media (max-width: 991px) { padding-left: 1rem; padding-right: 1rem; } } .m22-content-centered { max-width: 1200px; margin-left: auto; margin-right: auto; } .m22-content-wide { max-width: 1400px; margin-left: auto; margin-right: auto; } } // ------------------------------------------------------- // 14. ANIMATIONS & TRANSITIONS // ------------------------------------------------------- @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .m22-card, #wrapwrap.o_has_m22_sidebar .card { animation: fadeIn 0.3s ease-out; } // ------------------------------------------------------- // 15. COLLAPSED SIDEBAR STATE - Main Content Adjustment // ------------------------------------------------------- body.sidebar-collapsed { #wrapwrap.o_has_m22_sidebar main.o_main_with_sidebar { @media (min-width: 992px) { margin-left: $sidebar-width-collapsed !important; } } } // ------------------------------------------------------- // 16. HIDE HEADER & FOOTER (Theme-specific) // Note: This is conditional via templates, but CSS backup // ------------------------------------------------------- #wrapwrap.o_has_m22_sidebar { header#top, #top_menu_container, .o_header_standard, footer.o_footer, #footer, .o_footer_copyright { display: none !important; } } // ------------------------------------------------------- // 17. PORTAL LAYOUT ADJUSTMENTS // Ocultar sidebar nativo del portal (solo en my/account) // Expandir contenido a ancho completo // Asegurar que filtros del portal se muestren en desktop // ------------------------------------------------------- #wrapwrap.o_has_m22_sidebar { // Ocultar el sidebar nativo de "My Account" (col-lg-4) .o_portal_wrap .container { .row.justify-content-between { .d-none.d-lg-flex.justify-content-end.col-lg-4 { display: none !important; } // Ocultar offcanvas también #accountOffCanvas { display: none !important; } // Expandir contenido a ancho completo .o_portal_content { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } } } // Asegurar que el navbar de filtros del portal siempre se muestre en desktop // IMPORTANTE: Los filtros usan clases de Bootstrap (.collapse) que pueden estar rotas si Tailwind reemplaza Bootstrap // Forzamos display con máxima especificidad .o_portal_wrap { nav.o_portal_navbar { // En desktop, siempre mostrar los filtros @media (min-width: 992px) { .collapse { display: flex !important; visibility: visible !important; height: auto !important; } .navbar-collapse { display: flex !important; flex-basis: auto !important; visibility: visible !important; } #o_portal_navbar_content { display: flex !important; visibility: visible !important; } } // ========================================= // PORTAL NAVBAR - Estilos específicos // Corrección de inputs, dropdowns y posicionamiento // ========================================= // Contenedor principal del navbar - Ajuste de alineación .navbar-nav, #o_portal_navbar_content { align-items: center; gap: 0.75rem; } // Input de búsqueda - Fondo claro glassmorphism input[type="text"], input[type="search"], .form-control, input.form-control { background: rgba($m22-white, 0.9) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 8px !important; color: $m22-text-dark !important; padding: 0.5rem 1rem !important; transition: all 0.2s ease; &::placeholder { color: $m22-text-muted !important; } &:focus { background: rgba($m22-white, 0.95) !important; border-color: $m22-orange !important; box-shadow: 0 0 0 3px rgba($m22-orange, 0.15) !important; outline: none !important; } } // Botones dropdown - Estilo claro glassmorphism .btn, .btn-group > .btn, button[data-bs-toggle="dropdown"], button.dropdown-toggle { background: rgba($m22-white, 0.9) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 8px !important; color: $m22-text-dark !important; padding: 0.5rem 1rem !important; font-weight: 500; transition: all 0.2s ease; &:hover, &:focus { background: rgba($m22-white, 0.95) !important; border-color: rgba($m22-orange, 0.3) !important; color: $m22-text-dark !important; } &:active, &.active, &[aria-expanded="true"] { background: rgba($m22-content-light, 0.95) !important; border-color: rgba($m22-orange, 0.2) !important; color: $m22-text-dark !important; box-shadow: 0 0 0 2px rgba($m22-orange, 0.1) !important; } } // Menú dropdown - Estilo claro .dropdown-menu { background: rgba($m22-white, 0.98) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 12px !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important; padding: 0.5rem 0 !important; margin-top: 0.5rem !important; .dropdown-item { color: $m22-text-dark !important; padding: 0.625rem 1.25rem !important; transition: all 0.15s ease; &:hover { background: rgba($m22-orange, 0.08) !important; color: $m22-text-dark !important; } &:active, &.active { background: rgba($m22-orange, 0.12) !important; color: $m22-text-dark !important; font-weight: 500; } } } // Labels de los dropdowns (Ordenar por, Filtrar por, etc.) label, .form-label { color: $m22-text-dark !important; font-weight: 500; font-size: 0.875rem; margin-bottom: 0.25rem; margin-right: 0.5rem; } // Botón de búsqueda (icono) button[type="submit"], .btn-search, button:has(.fa-search) { background: rgba($m22-white, 0.9) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 8px !important; color: $m22-text-muted !important; padding: 0.5rem 0.75rem !important; transition: all 0.2s ease; &:hover { background: rgba($m22-white, 0.95) !important; border-color: $m22-orange !important; color: $m22-orange !important; } } // Ajuste de espaciado y alineación vertical .form-group, .input-group { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; } // Asegurar que los elementos estén alineados verticalmente .d-flex, .navbar-nav { align-items: center; } } } // ------------------------------------------------------- // 18. HELPDESK TICKETS DASHBOARD // ------------------------------------------------------- // Dashboard Cards - Glassmorphism Light .m22-dashboard-card { background: rgba($m22-white, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; &:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); border-color: rgba($m22-orange, 0.15); transform: translateY(-2px); } .card-body { padding: 1.5rem; } .card-title { color: $m22-text-dark; font-weight: 600; font-size: 1.125rem; } h3 { color: $m22-text-dark; font-weight: 700; font-size: 2rem; } h6 { color: $m22-text-muted; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.05em; } } // Dashboard Icon Container .m22-dashboard-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba($m22-content-light, 0.8); } // Stage Cards (mini cards in summary) .m22-stage-card { background: rgba($m22-white, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.2s ease; &:hover { background: rgba($m22-white, 0.8); border-color: rgba($m22-orange, 0.2); transform: translateY(-2px); } } // Progress Bar Customization .progress { background: rgba($m22-content-light, 0.8); border-radius: 4px; overflow: hidden; } // Table in Dashboard .m22-dashboard-card { .table { margin-bottom: 0; thead th { background: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.08); color: $m22-text-muted; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.75rem 1rem; } tbody tr { transition: background 0.2s ease; &:hover { background: rgba($m22-orange, 0.04); } td { padding: 1rem; color: $m22-text-dark; border-bottom: 1px solid rgba(0, 0, 0, 0.05); vertical-align: middle; a { color: $m22-orange; font-weight: 500; text-decoration: none; &:hover { text-decoration: underline; } } } } } } // List Group Items (Waiting Response) .list-group-item { background: rgba($m22-white, 0.7); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; margin-bottom: 0.5rem; transition: all 0.2s ease; &:hover { background: rgba($m22-orange, 0.08); border-color: rgba($m22-orange, 0.2); transform: translateX(4px); } h6 { color: $m22-text-dark; font-weight: 600; } .text-muted { color: $m22-text-muted; } } // Border Warning for Waiting Response Card .border-warning { border-color: rgba(234, 179, 8, 0.3) !important; border-width: 2px; } // ------------------------------------------------------- // 19. HELPDESK TICKET APPROVAL BANNER // ------------------------------------------------------- .m22-approval-banner { background: rgba($m22-white, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 2px solid rgba($m22-orange, 0.3); border-radius: 16px; box-shadow: 0 4px 24px rgba($m22-orange, 0.1); padding: 1.5rem; .alert-heading { color: $m22-text-dark; font-weight: 600; font-size: 1.125rem; i { color: $m22-orange; } } p { color: $m22-text-muted; } .btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); border: none; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3); transition: all 0.3s ease; &:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4); } } .btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706); border: none; color: white; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); transition: all 0.3s ease; &:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); color: white; } } } }