/* ============================================================ docs-polish.css — orientation & polish layer for any /docs/* page ============================================================ Loaded from layouts/docs.blade.php so every docs page (UI Kit catalog, monitoring docs, future docs) gets the same set of reading-affordances: 1. .uk-doc-section-indicator sticky chip "Section N / Total — Title" floating top-right under nav. Updates from docs.js IntersectionObserver. 2. .uk-doc-back-to-top floating round button bottom-right. Shown after 800px scroll. Smooth-scrolls to top. 3. h2 anchor on hover the .section-anchor "#" prefix becomes visible on h2:hover so a reader can copy the deep-link from address bar after clicking it. The IntersectionObserver in docs.js writes data-active-section + data- active-num + data-active-total on ; this file picks them up via attr() to render the indicator content. ============================================================ */ /* ============================================================ 1. Section indicator — sticky context chip ============================================================ */ .uk-doc-section-indicator { position: fixed; top: calc(var(--layout-nav-height, 64px) + var(--space-md)); right: var(--space-lg); z-index: 900; display: inline-flex; align-items: center; gap: var(--space-sm); padding: 6px 14px 6px 8px; background: rgba(var(--color-bg-card-rgb, 25, 39, 52), 0.85); border: 1px solid rgba(var(--color-primary-rgb), 0.25); border-radius: var(--radius-full); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--color-primary-rgb), 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--color-text); font-size: var(--font-xs); font-weight: 500; letter-spacing: 0.02em; pointer-events: auto; /* Hidden until the observer assigns the first active section */ opacity: 0; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } body[data-active-section] .uk-doc-section-indicator { opacity: 1; transform: translateY(0); } .uk-doc-section-indicator-counter { display: inline-flex; align-items: baseline; gap: 1px; padding: 2px 8px; background: var(--gradient-primary); color: #000; font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 700; border-radius: var(--radius-full); line-height: 1; } .uk-doc-section-indicator-counter::before { content: attr(data-num); } .uk-doc-section-indicator-counter::after { content: " / " attr(data-total); opacity: 0.65; font-weight: 600; margin-left: 2px; } .uk-doc-section-indicator-name { color: var(--color-text); font-weight: 600; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uk-doc-section-indicator { color: inherit; text-decoration: none; } .uk-doc-section-indicator:hover .uk-doc-section-indicator-name { color: var(--color-primary-light); } .uk-doc-section-indicator:hover { border-color: rgba(var(--color-primary-rgb), 0.45); } .uk-doc-section-indicator:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* On narrow viewports the indicator competes with the sidebar drawer toggle and the back-to-top — hide it on mobile. The active highlight in the sidebar still does the orientation work. */ @media (max-width: 768px) { .uk-doc-section-indicator { display: none; } } /* ============================================================ 2. Back-to-top — floating round button ============================================================ */ .uk-doc-back-to-top { position: fixed; bottom: var(--space-lg); right: var(--space-lg); z-index: 900; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-card); border: 1px solid rgba(var(--color-primary-rgb), 0.3); border-radius: 50%; color: var(--color-primary-light); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--color-primary-rgb), 0.05); cursor: pointer; opacity: 0; transform: translateY(8px) scale(0.92); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .uk-doc-back-to-top svg { width: 18px; height: 18px; } body[data-scrolled-deep] .uk-doc-back-to-top { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .uk-doc-back-to-top:hover { background: rgba(var(--color-primary-rgb), 0.12); border-color: var(--color-primary); color: #fff; transform: translateY(-2px) scale(1); } .uk-doc-back-to-top:active { transform: translateY(0) scale(0.96); } .uk-doc-back-to-top:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ============================================================ 3. Heading anchor on hover — copy-link affordance ============================================================ */ .uk-doc-section h2, .uk-doc-section > h2 { position: relative; } .uk-doc-section h2 .section-anchor, .uk-doc-section > h2 .section-anchor { /* Override the existing display: none — show on hover */ display: inline-block; position: absolute; left: -1.4em; top: 0.05em; color: var(--color-primary); font-weight: 400; opacity: 0; transform: translateX(4px); transition: opacity var(--transition-fast), transform var(--transition-fast); pointer-events: none; } .uk-doc-section h2:hover .section-anchor, .uk-doc-section h2 .section-anchor:focus, .uk-doc-section > h2:hover .section-anchor, .uk-doc-section > h2 .section-anchor:focus { opacity: 0.7; transform: translateX(0); } /* The h2 itself becomes the click target for copy-link via the wrapping . JS in docs.js wires it: clicking on the # writes the URL with the section's hash to clipboard and flashes a brief tooltip. */ .uk-doc-section h2 .section-anchor[data-copy-state="copied"], .uk-doc-section > h2 .section-anchor[data-copy-state="copied"] { color: var(--color-success); opacity: 1; } /* ============================================================ 4. Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .uk-doc-section-indicator, .uk-doc-back-to-top { transition: opacity 0.2s ease; } .uk-doc-back-to-top:hover { transform: none; } }