/* * RD-2597 — initial-extraction progress, platform-wide. * * A system strip pinned above EVERYTHING — above the organization name in the * header — spanning the full width except the sidebar. ONE line tall, collapsed * by default. * * ## Why it is `position: fixed` and pushes the layout * * The header is itself `position: fixed; top: 0; z-index: 100` (Metronic, * `data-kt-app-header-fixed`), so a strip placed before it in the DOM just ends * up underneath it, and `.app-wrapper` clears the header with a static * `margin-top: var(--bs-app-header-height)`. So the strip fixes itself at the top * and shifts the two things below it by its own measured height, published by the * JS as `--lm-ep-height` on `` together with the `lm-extraction-banner-on` * class. Measured rather than hard-coded because the strip changes height when * the detail is expanded and when the copy wraps on narrow screens. * * It starts at the sidebar's right edge (`--bs-app-sidebar-width`, so it tracks * the minimized state) instead of at 0, because the sidebar is fixed at `top: 0` * with a higher z-index and would cover the strip's left end. * * ## Why it looks like this * * Colour is a scarce resource here: white surface against the near-white page, * separated by a hairline and an ultra-diffuse shadow; text in the Metronic grays * the rest of the app uses (#4b5675 / #99a1b7). The ONLY accents are the celeste * progress fill and its spinner — the one thing the component exists to show. A * tinted full-bleed version read as an alert on every screen; a rounded card * inside the page container was quiet but got lost among the cards. * * Motion: transform/opacity only, ease-out, everything under 300ms. The fill * moves linearly (constant progress, not an entrance). All of it degrades to * opacity-only under prefers-reduced-motion. */ .ct-extraction-progress { --ct-ep-ink: #4b5675; /* Metronic gray-700, body copy */ --ct-ep-ink-strong: #071437; /* gray-900, the one bold bit */ --ct-ep-muted: #99a1b7; /* gray-500, secondary numbers */ --ct-ep-border: #f1f1f4; /* hairline, same as the integration tiles */ --ct-ep-track: #f1f1f4; --ct-ep-fill: #1b84ff; /* Leanmote celeste — the only colour here */ --ct-ep-ok: #17c653; --ct-ep-ease: cubic-bezier(0.23, 1, 0.32, 1); /* Above the fixed header (z-index 100), below the sidebar (105) and the Leanmote Bot rail (108) — the same stacking the header itself lives with. */ position: fixed; top: 0; left: 0; right: 0; z-index: 101; margin: 0; /* White on the #fcfcfc content background is only a hair of contrast, so the hairline plus an ultra-diffuse shadow (opacity < 0.05, no colour) is what lifts the strip off the page instead of a tint. */ background: #fff; border: 0; border-bottom: 1px solid var(--ct-ep-border); border-radius: 0; box-shadow: 0 1px 2px rgba(15, 20, 55, 0.03); color: var(--ct-ep-ink); font-size: 0.875rem; line-height: 1.4; opacity: 1; transform: translateY(0); transition: opacity 200ms var(--ct-ep-ease), transform 200ms var(--ct-ep-ease), left 300ms ease; } /* * Clear the fixed sidebar. Mirrors Metronic's own `.app-wrapper` offset — same * attribute, same breakpoint, same vars — so collapsing the sidebar (which only * changes `--bs-app-sidebar-width`) moves the strip with it, and mobile, where the * sidebar is a drawer, keeps the strip full width. */ @media (min-width: 992px) { [data-kt-app-sidebar-fixed="true"] .ct-extraction-progress { left: calc( var(--bs-app-sidebar-width) + var(--bs-app-sidebar-gap-start, 0px) + var(--bs-app-sidebar-gap-end, 0px) ); } } /* * Make room for the strip: shift the fixed header down and give the content * wrapper the same extra clearance. `--lm-ep-height` is written by the JS from the * strip's real height, and the class is only present while it is visible, so a * page with nothing importing keeps Metronic's own geometry untouched. * * Both offsets are ADDITIVE, on properties Metronic does not set on these two * elements — `margin-top` on the fixed header (it positions with `top`) and * `padding-top` on the wrapper (it clears the header with `margin-top`). That * matters: the header is `h-auto py-5`, so its real height is content-driven and * not necessarily `--bs-app-header-height`. Restating the wrapper's margin with * that variable would quietly re-derive a number the theme owns; adding to * whatever it already computed cannot. */ body.lm-extraction-banner-on .app-header { margin-top: var(--lm-ep-height, 0px); } body.lm-extraction-banner-on .app-wrapper { padding-top: var(--lm-ep-height, 0px); } /* Pre-reveal state (set by JS the frame before showing, so it animates in). */ .ct-extraction-progress.is-entering, .ct-extraction-progress.is-hiding { opacity: 0; transform: translateY(-4px); } /* * The gutters live on the ROWS, not on a padded wrapper. Two reasons: the summary * row is a click target, so its hover tint has to fill the strip edge to edge * without negative-margin compensation; and the detail's top divider then spans * the full width instead of stopping short of it. * * The values reproduce `.app-container`'s own gutters (30px desktop / 20px mobile) * so the text lines up with the organization name above and the cards below. */ .ct-extraction-progress__inner { /* Intentionally unpadded — see above. */ padding: 0; } /* ------------------------------------------------------------------ summary */ .ct-extraction-progress__summary { display: flex; align-items: center; gap: 10px; min-height: 24px; padding: 11px 30px; transition: background-color 150ms ease; } /* * The whole row opens the detail, not just the "See detail" button: a one-line * strip is a small target and nothing else on the row is interactive. So the row * has to LOOK clickable — pointer cursor plus a hover that tints the strip and * lights up the toggle, so the affordance is not hiding in the button alone. * * Excluded from both: the `--notice` variant (no detail to open) and the finished * state (the detail is gone, only the close button is left). */ .ct-extraction-progress:not(.ct-extraction-progress--notice):not(.is-complete) .ct-extraction-progress__summary { cursor: pointer; } .ct-extraction-progress:not(.ct-extraction-progress--notice):not(.is-complete) .ct-extraction-progress__summary:hover { background: #f9f9fa; } .ct-extraction-progress:not(.ct-extraction-progress--notice):not(.is-complete) .ct-extraction-progress__summary:hover .ct-extraction-progress__toggle { color: #056ee9; text-decoration: underline; } .ct-extraction-progress__spinner { flex: 0 0 auto; width: 13px; height: 13px; border: 2px solid var(--ct-ep-track); border-top-color: var(--ct-ep-fill); border-radius: 50%; animation: ct-extraction-progress-spin 0.8s linear infinite; } @keyframes ct-extraction-progress-spin { to { transform: rotate(360deg); } } .ct-extraction-progress__check { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--ct-ep-ok); } /* * Finished: the one moment the strip is allowed to carry colour. It lives for a * few seconds before fading out (or until the user closes it), so a light green * wash is a reward rather than something to live with. Tokens are Metronic's own * success scale — `--bs-success-light` / `--bs-success-border-subtle` / `#0e7732` * for the text — so it matches every other success surface in the product. */ .ct-extraction-progress.is-complete { /* Re-point the accents too, so the full bar does not stay celeste on green. */ --ct-ep-fill: var(--ct-ep-ok); --ct-ep-ink: #0e7732; --ct-ep-ink-strong: #0e7732; --ct-ep-muted: rgba(14, 119, 50, 0.7); --ct-ep-track: rgba(14, 119, 50, 0.15); background: #dfffea; border-bottom-color: #a2e8ba; } .ct-extraction-progress__headline { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; } .ct-extraction-progress__title { font-size: 0.9375rem; font-weight: 600; color: var(--ct-ep-ink-strong); /* One line: the summary must never grow into a paragraph. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * The non-admin variant has no count, no bar and no toggle — its title IS the * whole message, and it is a sentence rather than a label, so let it wrap and * drop the bold (nothing next to it needs out-competing). */ .ct-extraction-progress--notice .ct-extraction-progress__title { overflow: visible; text-overflow: clip; white-space: normal; font-weight: 500; color: var(--ct-ep-ink); } .ct-extraction-progress__count { color: var(--ct-ep-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ct-extraction-progress__count:empty { display: none; } /* ---------------------------------------------------------------------- bar */ .ct-extraction-progress__bar { flex: 0 0 auto; width: 140px; height: 4px; border-radius: 999px; background: var(--ct-ep-track); overflow: hidden; } .ct-extraction-progress__bar-fill { height: 100%; width: 0; border-radius: inherit; background: var(--ct-ep-fill); transition: width 280ms linear; } /* * Indeterminate tools (Slack, Discord, Google Calendar, ClickUp): a sliver that * travels, so the bar never implies a position it cannot know. */ .ct-extraction-progress__bar--indeterminate .ct-extraction-progress__bar-fill { width: 35%; transition: none; animation: ct-extraction-progress-slide 1.4s ease-in-out infinite; } @keyframes ct-extraction-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(285%); } } /* ------------------------------------------------------------- toggle / close */ .ct-extraction-progress__toggle, .ct-extraction-progress__dismiss { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 2px 4px; color: var(--ct-ep-fill); font-size: 0.8125rem; font-weight: 600; cursor: pointer; border-radius: 4px; transition: color 150ms ease, transform 120ms var(--ct-ep-ease); } .ct-extraction-progress__toggle:hover, .ct-extraction-progress__dismiss:hover { color: #056ee9; text-decoration: underline; } .ct-extraction-progress__toggle:active, .ct-extraction-progress__dismiss:active { transform: scale(0.97); } .ct-extraction-progress__toggle:focus-visible, .ct-extraction-progress__dismiss:focus-visible { outline: 2px solid var(--ct-ep-fill); outline-offset: 1px; } .ct-extraction-progress__dismiss { color: var(--ct-ep-muted); } .ct-extraction-progress__dismiss:hover { color: var(--ct-ep-ink); text-decoration: none; } .ct-extraction-progress__chevron { transition: transform 180ms var(--ct-ep-ease); } .ct-extraction-progress__toggle[aria-expanded="true"] .ct-extraction-progress__chevron { transform: rotate(180deg); } /* ------------------------------------------------------------------- detail */ .ct-extraction-progress__detail { padding: 10px 30px 12px; border-top: 1px solid var(--ct-ep-border); } .ct-extraction-progress__tools { display: flex; flex-direction: column; gap: 7px; } .ct-extraction-progress__tool { display: flex; align-items: center; gap: 10px; /* Staggered so the rows cascade in instead of landing all at once. */ animation: ct-extraction-progress-row-in 200ms var(--ct-ep-ease) both; animation-delay: calc(var(--ct-ep-index, 0) * 50ms); } @keyframes ct-extraction-progress-row-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } .ct-extraction-progress__tool-logo { flex: 0 0 auto; width: 16px; height: 16px; object-fit: contain; } .ct-extraction-progress__tool-name { flex: 0 0 auto; min-width: 96px; font-weight: 600; color: var(--ct-ep-ink-strong); } .ct-extraction-progress__tool-resources { flex: 0 0 auto; min-width: 88px; color: var(--ct-ep-muted); } .ct-extraction-progress__tool-count { flex: 0 0 auto; min-width: 96px; color: var(--ct-ep-muted); font-variant-numeric: tabular-nums; } .ct-extraction-progress__hint { /* margin-bottom: 0 — the detail's own padding-bottom closes the block. */ margin: 9px 0 0; font-size: 0.8125rem; color: var(--ct-ep-muted); } /* --------------------------------------------------------------- responsive */ @media (max-width: 991.98px) { /* Matches `.app-container`'s mobile gutter. */ .ct-extraction-progress__summary { padding: 11px 20px; } .ct-extraction-progress__detail { padding: 10px 20px 12px; } } @media (max-width: 767.98px) { .ct-extraction-progress__title { white-space: normal; } /* The overall bar is the first thing to go: the count already says it. */ .ct-extraction-progress__bar--overall { display: none; } .ct-extraction-progress__tool { flex-wrap: wrap; row-gap: 4px; } .ct-extraction-progress__tool-name, .ct-extraction-progress__tool-resources, .ct-extraction-progress__tool-count { min-width: 0; } } @media (prefers-reduced-motion: reduce) { .ct-extraction-progress, .ct-extraction-progress.is-entering, .ct-extraction-progress.is-hiding { transform: none; transition: opacity 200ms ease; } .ct-extraction-progress__spinner { animation: none; } .ct-extraction-progress__bar-fill { transition: none; } .ct-extraction-progress__bar--indeterminate .ct-extraction-progress__bar-fill { animation: none; width: 100%; opacity: 0.4; } .ct-extraction-progress__tool { animation: none; } .ct-extraction-progress__chevron, .ct-extraction-progress__toggle, .ct-extraction-progress__dismiss { transition: none; } }