/* CoreTech frontend edit bar — standalone (bypasses web.assets_frontend cache) */ .o_frontend_to_backend_nav.ct-frontend-ribbon { top: 0 !important; left: 0 !important; z-index: 1055 !important; min-width: calc(var(--ct-ribbon-leg, 24px) + 12px); min-height: calc(var(--ct-ribbon-leg, 24px) + 12px); padding: 0 12px 12px 0; margin: 0; overflow: visible; border: none !important; outline: none !important; background: transparent !important; line-height: 1; cursor: pointer; --ct-ribbon-speed: 180ms; --ct-ribbon-ease: cubic-bezier(0.25, 0.8, 0.25, 1); } header#top { border-top: 0 !important; } .o_frontend_to_backend_nav.ct-frontend-ribbon svg.o_frontend_to_backend_icon { display: none !important; } /* Corner triangle — decorative only; never intercept clicks */ .o_frontend_to_backend_nav.ct-frontend-ribbon::before { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important; border-top: var(--ct-ribbon-leg, 24px) solid #3989dc !important; border-left: var(--ct-ribbon-leg, 24px) solid #2575cc !important; border-bottom: var(--ct-ribbon-leg, 24px) solid transparent !important; border-right: var(--ct-ribbon-leg, 24px) solid transparent !important; cursor: default !important; opacity: 1; z-index: 1; pointer-events: none !important; transition: opacity var(--ct-ribbon-speed) var(--ct-ribbon-ease); } .o_frontend_to_backend_nav.ct-frontend-ribbon::after { content: "" !important; display: block !important; position: absolute !important; top: calc(var(--ct-ribbon-leg, 24px) * 0.14) !important; left: calc(var(--ct-ribbon-leg, 24px) * 0.14) !important; width: calc(var(--ct-ribbon-leg, 24px) * 0.40) !important; height: calc(var(--ct-ribbon-leg, 24px) * 0.40) !important; pointer-events: none !important; z-index: 1 !important; background: url("/website_enterprise/static/src/img/ribbon_corner.svg") center / contain no-repeat !important; opacity: 1; transition: opacity var(--ct-ribbon-speed) var(--ct-ribbon-ease); } .o_frontend_to_backend_nav.ct-frontend-ribbon:hover::before, .o_frontend_to_backend_nav.ct-frontend-ribbon:focus-within::before, .o_frontend_to_backend_nav.ct-frontend-ribbon.ct-ribbon-open::before, .o_frontend_to_backend_nav.ct-frontend-ribbon:hover::after, .o_frontend_to_backend_nav.ct-frontend-ribbon:focus-within::after, .o_frontend_to_backend_nav.ct-frontend-ribbon.ct-ribbon-open::after { opacity: 0 !important; } /* Override stock website.ui.scss slide transform */ .o_frontend_to_backend_nav.ct-frontend-ribbon .o_frontend_to_backend_buttons { position: absolute !important; top: 0 !important; left: 0 !important; z-index: 10 !important; display: inline-flex !important; flex-wrap: nowrap !important; align-items: stretch !important; transform: translate3d(-110%, 0, 0) !important; opacity: 0; visibility: hidden; pointer-events: none; transition: transform var(--ct-ribbon-speed) var(--ct-ribbon-ease), opacity 120ms linear, visibility 0s linear var(--ct-ribbon-speed); } .o_frontend_to_backend_nav.ct-frontend-ribbon:hover .o_frontend_to_backend_buttons, .o_frontend_to_backend_nav.ct-frontend-ribbon:focus-within .o_frontend_to_backend_buttons, .o_frontend_to_backend_nav.ct-frontend-ribbon.ct-ribbon-open .o_frontend_to_backend_buttons { transform: translate3d(0, 0, 0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition-delay: 0ms !important; } .o_frontend_to_backend_nav .o_frontend_to_backend_buttons { background: #262a32 !important; border: 1px solid rgba(0, 0, 0, 0.40) !important; border-radius: 0 !important; padding: 0 !important; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.35), 0 6px 14px rgba(0, 0, 0, 0.30), 0 12px 28px rgba(0, 0, 0, 0.22) !important; } .o_frontend_to_backend_nav .o_frontend_to_backend_buttons > a { flex: 0 0 auto !important; height: 40px !important; position: relative; z-index: 12; pointer-events: auto !important; cursor: pointer !important; } .o_frontend_to_backend_nav .o_frontend_to_backend_edit_btn { background-color: transparent !important; color: rgba(255, 255, 255, 0.72) !important; border-radius: 0 !important; border-left: 1px solid rgba(255, 255, 255, 0.14) !important; min-width: 40px !important; padding: 0 0.75em !important; } .o_frontend_to_backend_nav .o_frontend_to_backend_edit_btn:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.92) !important; } .o_frontend_to_backend_nav .o_frontend_to_backend_edit_btn > img { height: 1.8em; margin-right: 0.5em; border-radius: 4px; } /* Home button — expand via hover OR .ct-home-expanded (JS fallback) */ .o_frontend_to_backend_nav.ct-frontend-ribbon .o_frontend_to_backend_apps_btn.ct-apps-home-btn { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; padding: 0 0 0 2.35em !important; overflow: hidden !important; white-space: nowrap !important; background-color: #2575cc !important; background-image: url("/web_enterprise/static/src/coretech_web/src/webclient/navbar/img/home.png"), linear-gradient(180deg, #3989dc 0%, #2575cc 50%, #1f6abd 100%) !important; background-repeat: no-repeat, no-repeat !important; background-position: 0.45em center, center !important; background-size: 1.75em 1.75em, auto !important; color: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-top-color: rgba(255, 255, 255, 0.12) !important; border-radius: 0 !important; text-decoration: none !important; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.08) inset, 0 -1px 0 0 rgba(0, 0, 0, 0.12) inset, 0 2px 5px rgba(0, 0, 0, 0.18) !important; transition: width 200ms var(--ct-ribbon-ease), max-width 200ms var(--ct-ribbon-ease), flex-basis 200ms var(--ct-ribbon-ease), padding 200ms var(--ct-ribbon-ease), background-image 120ms ease !important; } .o_frontend_to_backend_nav.ct-frontend-ribbon .ct-apps-home-label { display: inline-block !important; overflow: hidden; max-width: 0; opacity: 0; margin-left: 0.15em; font-size: 0.875rem; font-weight: 600; line-height: 1; color: #ffffff !important; transition: max-width 200ms var(--ct-ribbon-ease), opacity 160ms ease 40ms; } .o_frontend_to_backend_nav.ct-frontend-ribbon .o_frontend_to_backend_apps_btn.ct-apps-home-btn:hover, .o_frontend_to_backend_nav.ct-frontend-ribbon .o_frontend_to_backend_apps_btn.ct-apps-home-btn:focus-visible, .o_frontend_to_backend_nav.ct-frontend-ribbon .o_frontend_to_backend_apps_btn.ct-apps-home-btn.ct-home-expanded { width: 92px !important; max-width: 92px !important; flex: 0 0 92px !important; padding-right: 0.55em !important; background-image: url("/web_enterprise/static/src/coretech_web/src/webclient/navbar/img/home.png"), linear-gradient(180deg, #4d97e0 0%, #3989dc 50%, #2575cc 100%) !important; } .o_frontend_to_backend_nav.ct-frontend-ribbon .o_frontend_to_backend_apps_btn.ct-apps-home-btn:hover .ct-apps-home-label, .o_frontend_to_backend_nav.ct-frontend-ribbon .o_frontend_to_backend_apps_btn.ct-apps-home-btn:focus-visible .ct-apps-home-label, .o_frontend_to_backend_nav.ct-frontend-ribbon .o_frontend_to_backend_apps_btn.ct-apps-home-btn.ct-home-expanded .ct-apps-home-label { max-width: 2.75rem !important; opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { .o_frontend_to_backend_nav.ct-frontend-ribbon::before, .o_frontend_to_backend_nav.ct-frontend-ribbon::after, .o_frontend_to_backend_nav.ct-frontend-ribbon .o_frontend_to_backend_buttons, .o_frontend_to_backend_nav.ct-frontend-ribbon .o_frontend_to_backend_apps_btn, .o_frontend_to_backend_nav.ct-frontend-ribbon .ct-apps-home-label { transition: none !important; } }