/* AQUILA_DOCK_NAME_RAIL_V1_R1_CSS_ONLY */ /* * The accepted Dock remains the only navigation owner. * * The existing Dock already exposes its real module label as: * * data-dock-tooltip="..." * * We use that attribute directly for presentation. */ /* ---------------------------------------------------------- * GLASS RAIL * ---------------------------------------------------------- */ .ubuzima-workspace-dock-v5 { width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; padding: 7px 9px !important; border-radius: 22px !important; overflow: visible !important; } .ubuzima-workspace-dock-v5__modules { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; max-width: calc(100vw - 44px) !important; gap: 5px !important; padding: 2px !important; overflow-x: auto !important; overflow-y: visible !important; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none !important; } .ubuzima-workspace-dock-v5__modules::-webkit-scrollbar { display: none !important; } /* ---------------------------------------------------------- * MAIN MODULE TABS * ---------------------------------------------------------- */ .ubuzima-workspace-dock-v5__module[data-dock-tooltip] { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 14px !important; border-radius: 13px !important; transform: none !important; scale: 1 !important; scroll-snap-align: center; transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, translate 150ms ease !important; } /* * Real module name. */ .ubuzima-workspace-dock-v5__module[data-dock-tooltip]::after { content: attr(data-dock-tooltip) !important; display: inline-flex !important; align-items: center; justify-content: center; max-width: 210px; overflow: hidden; color: #334155; font-family: inherit; font-size: 11px; font-weight: 760; line-height: 1; letter-spacing: 0.006em; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; user-select: none; } /* ---------------------------------------------------------- * REMOVE PICTURE ICON VISUAL, * BUT DO NOT DESTROY THE EXISTING DOM. * ---------------------------------------------------------- */ .ubuzima-workspace-dock-v5__module[data-dock-tooltip] .ubuzima-workspace-dock-v5__icon { display: none !important; } .ubuzima-workspace-dock-v5__module[data-dock-tooltip] .ubuzima-workspace-dock-v5__icon-shell { width: 0 !important; min-width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } /* ---------------------------------------------------------- * ACTIVE / HOVER * ---------------------------------------------------------- */ .ubuzima-workspace-dock-v5__module[data-dock-tooltip]:hover, .ubuzima-workspace-dock-v5__module[data-dock-tooltip]:focus-visible { transform: none !important; scale: 1 !important; translate: 0 -2px !important; background: rgba( 255, 255, 255, 0.78 ) !important; border-color: rgba( 71, 85, 105, 0.16 ) !important; box-shadow: 0 8px 22px rgba( 15, 23, 42, 0.08 ) !important; } .ubuzima-workspace-dock-v5__module[data-dock-tooltip].is-active { background: rgba( 255, 255, 255, 0.92 ) !important; border-color: rgba( 15, 118, 110, 0.24 ) !important; box-shadow: 0 7px 22px rgba( 15, 23, 42, 0.09 ), inset 0 0 0 1px rgba( 255, 255, 255, 0.52 ) !important; } .ubuzima-workspace-dock-v5__module[data-dock-tooltip].is-active::after { color: #0f5f59 !important; font-weight: 840; } /* * Disable old inline fish-eye transform. */ .ubuzima-workspace-dock-v5__module[data-dock-tooltip][style] { transform: none !important; scale: 1 !important; } /* ---------------------------------------------------------- * ACTIVE MARKER * ---------------------------------------------------------- */ .ubuzima-workspace-dock-v5__active-dot { left: 50% !important; right: auto !important; bottom: 3px !important; width: 16px !important; height: 2px !important; border-radius: 999px !important; transform: translateX(-50%) !important; } /* ---------------------------------------------------------- * BADGES * ---------------------------------------------------------- */ .ubuzima-workspace-dock-v5__module[data-dock-tooltip] .ubuzima-workspace-dock-v5__badge { position: absolute !important; top: -4px !important; right: -4px !important; left: auto !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 999px !important; font-size: 9px !important; font-weight: 850 !important; line-height: 18px !important; z-index: 3 !important; } /* ---------------------------------------------------------- * OLD TOOLTIP NO LONGER NEEDED FOR MODULES. * NAME IS ALWAYS VISIBLE. * ---------------------------------------------------------- */ .ubuzima-workspace-dock-v5__tooltip { display: none !important; } /* ---------------------------------------------------------- * SEPARATORS / PROFILE * ---------------------------------------------------------- */ .ubuzima-workspace-dock-v5__divider { width: 1px !important; min-width: 1px !important; margin: 0 3px !important; opacity: 0.46; } /* * Keep account/profile identity compact. * It remains an icon because it is an account control, * not a business module. */ .ubuzima-workspace-dock-v5__profile { flex: 0 0 auto !important; transform: none !important; scale: 1 !important; } /* ---------------------------------------------------------- * TABLET * ---------------------------------------------------------- */ @media (max-width: 768px) { .ubuzima-workspace-dock-v5 { max-width: calc(100vw - 14px) !important; padding: 6px 7px !important; border-radius: 18px !important; } .ubuzima-workspace-dock-v5__modules { max-width: calc(100vw - 30px) !important; gap: 4px !important; } .ubuzima-workspace-dock-v5__module[data-dock-tooltip] { height: 39px !important; min-height: 39px !important; max-height: 39px !important; padding: 0 12px !important; border-radius: 11px !important; } .ubuzima-workspace-dock-v5__module[data-dock-tooltip]::after { max-width: 185px; font-size: 10.5px; } } /* ---------------------------------------------------------- * MOBILE * ---------------------------------------------------------- */ @media (max-width: 430px) { .ubuzima-workspace-dock-v5 { max-width: calc(100vw - 10px) !important; padding: 6px !important; } .ubuzima-workspace-dock-v5__modules { max-width: calc(100vw - 22px) !important; } .ubuzima-workspace-dock-v5__module[data-dock-tooltip] { height: 37px !important; min-height: 37px !important; max-height: 37px !important; padding: 0 11px !important; } .ubuzima-workspace-dock-v5__module[data-dock-tooltip]::after { max-width: 165px; font-size: 10px; } } /* ---------------------------------------------------------- * SMALL MOBILE * ---------------------------------------------------------- */ @media (max-width: 360px) { .ubuzima-workspace-dock-v5__module[data-dock-tooltip] { padding: 0 10px !important; } .ubuzima-workspace-dock-v5__module[data-dock-tooltip]::after { max-width: 145px; font-size: 9.75px; } }