mirror of
https://github.com/moltbot/moltbot.git
synced 2026-03-07 22:44:16 +00:00
1b886e7378
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content.
35 lines
703 B
CSS
35 lines
703 B
CSS
#content > h1:first-of-type {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-tabs {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-tabs-item > div {
|
|
opacity: 0;
|
|
}
|
|
|
|
.nav-tabs-underline {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 1.5px;
|
|
width: var(--nav-tab-underline-width, 0);
|
|
transform: translateX(var(--nav-tab-underline-x, 0));
|
|
background-color: rgb(var(--primary));
|
|
border-radius: 999px;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: transform 260ms ease-in-out, width 260ms ease-in-out, opacity 160ms ease-in-out;
|
|
will-change: transform, width;
|
|
}
|
|
|
|
html.dark .nav-tabs-underline {
|
|
background-color: rgb(var(--primary-light));
|
|
}
|
|
|
|
.nav-tabs-underline-ready .nav-tabs-underline {
|
|
opacity: 1;
|
|
}
|