/* FileExplorer — unscoped stylesheet (lib consumers apply once). */ /* ⚠⚠ This block belongs at the TOP of the file, not the bottom. Component rules of the same specificity (`.fe *` = 0,1,0) win the cascade when they sit BELOW it; while it sat at the bottom it overrode the tab strip's own "hide the bar" rule and dropped a scrollbar under the tabs (2026-08-12, reported). The general default comes first, the component writes its own exception afterwards. */ /* === ui-fix — scrollbars ============================================== The platform scrollbar ignores the theme completely: on Terminal Green or any dark variant it paints a wide light-grey slab down the edge of the panel. Chromium/WebKit honour the -webkit pseudo-elements and Firefox the two standard properties, so both are declared — the standard pair first, so the rules survive an engine that drops the prefixed set. ⚠ SCOPED TO `.fe`, never to `*`. base.css is loaded by embedders (work, fishapp, the admin SPA), and a bare `*` rule would repaint the HOST page's scrollbars from inside an embedded file browser. The two teleported surfaces are listed explicitly because they are children of , not of the explorer root. Colours come from the existing tokens rather than from new ones, so every theme — including ones added later — gets a matching bar for free. */ .fe, .fe *, .fe-ctx-backdrop, .fe-ctx-backdrop *, .fe-tour, .fe-tour * { scrollbar-width: thin; scrollbar-color: var(--fe-border-strong) transparent; } .fe ::-webkit-scrollbar, .fe-ctx-backdrop ::-webkit-scrollbar, .fe-tour ::-webkit-scrollbar { width: 10px; height: 10px; } .fe ::-webkit-scrollbar-track, .fe-ctx-backdrop ::-webkit-scrollbar-track, .fe-tour ::-webkit-scrollbar-track { background: transparent; } .fe ::-webkit-scrollbar-thumb, .fe-ctx-backdrop ::-webkit-scrollbar-thumb, .fe-tour ::-webkit-scrollbar-thumb { background: var(--fe-border-strong); /* Inset with a transparent border instead of a narrower width: a thin thumb inside a wide gutter drifts away from the content edge. */ border: 2px solid transparent; background-clip: padding-box; border-radius: 8px; } .fe ::-webkit-scrollbar-thumb:hover, .fe-ctx-backdrop ::-webkit-scrollbar-thumb:hover, .fe-tour ::-webkit-scrollbar-thumb:hover { background: var(--fe-text-muted); background-clip: padding-box; } /* Unstyled, the meeting point of a vertical and a horizontal bar paints as a white square in the corner of a dark panel. */ .fe ::-webkit-scrollbar-corner, .fe-ctx-backdrop ::-webkit-scrollbar-corner, .fe-tour ::-webkit-scrollbar-corner { background: transparent; } .fe { position: relative; display: flex; flex-direction: column; box-sizing: border-box; min-height: 420px; height: 100%; background: var(--fe-bg); color: var(--fe-text); font-family: var(--fe-font); /* gorunum:v1 — 13px, not 14. A row carries a filename, a size, a date and a * menu; at 14 that wraps to two lines at any realistic column width, which * is why every dense file manager sits at 13. */ font-size: var(--fe-text-md); border: 1px solid var(--fe-border); border-radius: var(--fe-radius); overflow: hidden; outline: none; } .fe * { box-sizing: border-box; } .fe__body { flex: 1 1 auto; overflow: auto; /* Flexbox's default min-height:auto stops a flex item shrinking below its content height — in a height-constrained embed the body would stay at content height, its overflow:auto never engages and everything past the fold is clipped (unreachable) by .fe's overflow:hidden. min-height:0 caps the body to the remaining space so internal (touch) scroll works. */ min-height: 0; background: var(--fe-bg); } /* Web-component host default: custom elements are display:inline, which collapses the height chain. Declared here so embedders don't need inline styles on — an inline style on the host falls through to the .fe root (Vue attr fallthrough) where display:block would kill the flex column and with it the internal scroll. */ filex-explorer { display: block; height: 100%; /* ⚠⚠ The host is almost always a FLEX ITEM (the desktop shell, work, the * admin SPA all put it in a flex column/row). A flex item's default * `min-width: auto` floors it at its content's min-content width, so a wide * row of tabs pushed the host — and the whole page — sideways instead of * letting the tab strip scroll: 63 tabs made a 3256px host inside a 1264px * window (2026-08-12). Every embedder would otherwise have to know to write * this themselves, which is the opposite of what shipping one component is * for. Same reason for the width: a block that cannot exceed its box. */ min-width: 0; max-width: 100%; } /* Live-presence strip (who else is in this folder) — shown under the breadcrumb. */ .fe__presence { flex: 0 0 auto; padding: 0.25rem 0.75rem; border-bottom: 1px solid var(--fe-border, rgba(0, 0, 0, 0.06)); } /* Initial-load spinner (shown until the first listing arrives). */ .fe__loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 240px; height: 100%; color: var(--fe-text-muted); } .fe__spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--fe-text-muted) 30%, transparent); border-top-color: var(--fe-primary); animation: fe-spin 0.7s linear infinite; } .fe__loading-text { margin: 0; font-size: 13px; } @keyframes fe-spin { to { transform: rotate(360deg); } } /* Dead deep-link state (404 / RBAC-hidden 403). */ .fe__notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 240px; height: 100%; color: var(--fe-text-muted); text-align: center; padding: 24px; } .fe__notfound-icon { font-size: 40px; filter: grayscale(1); opacity: 0.6; } .fe__notfound-title { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--fe-text); } .fe__notfound-path { margin: 0; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; max-width: 480px; } .fe__notfound-desc { margin: 0 0 10px; font-size: 13px; } .fe__file-input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* ---------- Buttons ---------- */ .fe-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--fe-bg-elev); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-sm); color: var(--fe-text); font: inherit; cursor: pointer; transition: background 0.12s, border-color 0.12s; white-space: nowrap; } .fe-btn:hover:not(:disabled) { background: var(--fe-bg-hover); border-color: var(--fe-border-strong); } .fe-btn:disabled { opacity: 0.5; cursor: not-allowed; } .fe-btn--primary { background: var(--fe-primary); border-color: var(--fe-primary); color: var(--fe-text-on-primary); } .fe-btn--primary:hover:not(:disabled) { background: var(--fe-primary-hover); border-color: var(--fe-primary-hover); } .fe-btn--danger { background: var(--fe-danger); border-color: var(--fe-danger); color: var(--fe-text-on-primary); } .fe-btn--danger:hover:not(:disabled) { background: var(--fe-danger-hover); border-color: var(--fe-danger-hover); } .fe-btn--icon-only { padding: 6px 8px; } .fe-btn.is-active { background: var(--fe-bg-selected); border-color: var(--fe-primary); } .fe-btn__label { line-height: 1; } .fe-icon { font-size: 1.05em; line-height: 1; } /* ---------- Toolbar ---------- */ .fe-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--fe-bg-elev); border-bottom: 1px solid var(--fe-border); flex-wrap: wrap; } .fe-toolbar__primary { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .fe-toolbar__spacer { flex: 1 1 auto; } /* Search + Upload + Refresh pinned together so the cluster doesn't get * orphaned by the wrap point on narrow widths. */ .fe-toolbar__search-group { display: inline-flex; align-items: center; gap: 4px; background: var(--fe-bg); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-sm); padding: 2px; } .fe-toolbar__search-group .fe-search__input { border: 0; background: transparent; padding: 4px 8px; } .fe-toolbar__search-group .fe-btn { border: 0; background: transparent; padding: 4px 6px; } .fe-toolbar__search-group .fe-btn:hover:not(:disabled) { background: var(--fe-bg-hover); } .fe-toolbar__view { display: inline-flex; gap: 2px; padding: 2px; background: var(--fe-bg); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-sm); } .fe-toolbar__view .fe-btn { border: 0; background: transparent; } .fe-toolbar__view .fe-btn.is-active { background: var(--fe-bg-selected); } /* ---------- Search ---------- */ .fe-search { position: relative; } .fe-search__input { background: var(--fe-bg); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-sm); padding: 6px 10px; font: inherit; color: var(--fe-text); min-width: 200px; } .fe-search__input:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: 1px; } /* ---------- Breadcrumb ---------- */ .fe-breadcrumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px 12px; /* ui-fix — same height as the side pane's .fe-split__crumbs in split mode (so both rows start at the same y even without the main pane's "Yola Git" ✏ button). */ min-height: 37px; background: var(--fe-bg); border-bottom: 1px solid var(--fe-border); font-size: 13px; color: var(--fe-text-muted); } .fe-breadcrumb__crumb { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; color: inherit; padding: 2px 6px; border-radius: var(--fe-radius-sm); cursor: pointer; font: inherit; } .fe-breadcrumb__crumb:hover { background: var(--fe-bg-hover); color: var(--fe-text); } .fe-breadcrumb__crumb.is-last { color: var(--fe-text); font-weight: 600; } .fe-breadcrumb__sep { color: var(--fe-text-muted); } /* Edit pencil button — V1.5, verbatim (translated): "let me type a path and go" */ .fe-breadcrumb__edit { margin-left: auto; background: none; border: 1px solid transparent; color: var(--fe-text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 8px; border-radius: 4px; } .fe-breadcrumb__edit:hover { background: var(--fe-bg-hover); color: var(--fe-text); border-color: var(--fe-border); } /* Inline path input — replaces the crumbs while editing */ .fe-breadcrumb__input { flex: 1; background: var(--fe-bg); color: var(--fe-text); border: 1px solid var(--fe-primary); border-radius: 4px; padding: 4px 8px; font-family: var(--fe-font-mono); font-size: 13px; outline: none; } /* ---------- List view ---------- */ .fe-list { display: flex; flex-direction: column; } .fe-list__head { display: grid; grid-template-columns: 32px minmax(0, 1fr) 120px 180px; gap: 8px; padding: 8px 12px; font-weight: 600; color: var(--fe-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--fe-bg-elev); border-bottom: 1px solid var(--fe-border); } .fe-list__body { display: flex; flex-direction: column; } .fe-list__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 120px 180px; gap: 8px; padding: 8px 12px; align-items: center; cursor: pointer; border-bottom: 1px solid var(--fe-border); transition: background 0.08s; user-select: none; } .fe-list__row:hover { background: var(--fe-bg-hover); } .fe-list__row.is-selected { background: var(--fe-bg-selected); } .fe-list__row.is-trash { opacity: 0.7; } .fe-list__row.is-clipped, .fe-grid__card.is-clipped { opacity: 0.45; font-style: italic; } .fe-list__row:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: -2px; } .fe-list__col--star { display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.12s; } /* issue #26, third round — a reveal ON HOVER only where hovering exists. iOS WebKit treats a tap whose :hover styles reveal content (an opacity transition from 0 counts) as "the user wanted to see the hover state": it applies the hover and swallows the click, so the first tap on a row or card only highlighted it and a second tap was needed to open. `(hover: hover)` keeps these reveals off touch screens, where they could never be hovered on purpose anyway. `:focus-within` and a starred item stay visible everywhere. */ .fe-list__row:focus-within .fe-list__col--star, .fe-list__col--star:has(.is-starred) { opacity: 1; } @media (hover: hover) { .fe-list__row:hover .fe-list__col--star { opacity: 1; } } .fe-list__col--star .filex-star-btn.is-starred { color: var(--fe-warning, #f59e0b); } .fe-list__col--name { display: flex; align-items: center; gap: 8px; min-width: 0; } .fe-list__icon { flex-shrink: 0; font-size: 16px; } .fe-list__name-wrap { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .fe-list__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-list__parent { font-size: 11px; color: var(--fe-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .fe-list__col--size, .fe-list__col--mod { color: var(--fe-text-muted); font-size: 13px; } .fe-list__empty { padding: 40px 20px; text-align: center; color: var(--fe-text-muted); } /* ---------- Grid view ---------- */ .fe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--fe-gap); padding: var(--fe-gap); } .fe-grid__card { display: flex; flex-direction: column; align-items: stretch; padding: 8px; border: 1px solid var(--fe-border); border-radius: var(--fe-radius); background: var(--fe-bg-elev); cursor: pointer; transition: background 0.08s, border-color 0.08s; user-select: none; } .fe-grid__card:hover { background: var(--fe-bg-hover); border-color: var(--fe-border-strong); } .fe-grid__card.is-selected { background: var(--fe-bg-selected); border-color: var(--fe-primary); } .fe-grid__card.is-trash { opacity: 0.7; } .fe-grid__thumb { /* yildiz:s1 — positioning context for the star chip in the corner. The gallery's thumb already had one; this one did not, so an absolutely placed chip would have resolved against whatever ancestor happened to be positioned (the grid, or the explorer root) and landed in the wrong tile. */ position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--fe-bg); border-radius: var(--fe-radius-sm); margin-bottom: 8px; overflow: hidden; } .fe-grid__thumb img { width: 100%; height: 100%; object-fit: cover; } .fe-grid__icon { font-size: 32px; } .fe-grid__label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-grid__meta { font-size: 11px; color: var(--fe-text-muted); margin-top: 2px; } .fe-grid__parent { font-size: 11px; color: var(--fe-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; font-style: italic; } /* bul:s3 — search-result content snippet on grid cards (clamped to two * lines; the full plain text lives in the title attribute). */ .fe-grid__snippet { margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--fe-text-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-align: left; } .fe-grid__empty { grid-column: 1 / -1; padding: 40px 20px; text-align: center; color: var(--fe-text-muted); } /* ---------- Drag overlay ---------- */ .fe__dragover { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(59, 130, 246, 0.12); border: 3px dashed var(--fe-primary); pointer-events: none; } .fe__dragover-card { background: var(--fe-bg); border-radius: var(--fe-radius-lg); padding: 24px 40px; box-shadow: var(--fe-shadow); text-align: center; } .fe__dragover-card .fe-icon { font-size: 32px; display: block; margin-bottom: 8px; } /* ---------- Upload progress ---------- */ .fe-upload { position: absolute; right: 16px; bottom: 16px; width: min(360px, calc(100% - 32px)); background: var(--fe-bg); border: 1px solid var(--fe-border); border-radius: var(--fe-radius); box-shadow: var(--fe-shadow); z-index: 40; max-height: 40vh; display: flex; flex-direction: column; overflow: hidden; } .fe-upload__header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--fe-bg-elev); border-bottom: 1px solid var(--fe-border); font-size: 13px; } .fe-upload__count { background: var(--fe-primary); color: var(--fe-text-on-primary); font-size: 12px; padding: 1px 7px; border-radius: 999px; } .fe-upload__list { list-style: none; padding: 0; margin: 0; overflow: auto; } .fe-upload__item { padding: 10px 14px; border-bottom: 1px solid var(--fe-border); } .fe-upload__item:last-child { border-bottom: 0; } .fe-upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; margin-bottom: 4px; } .fe-upload__bar { background: var(--fe-bg-elev); border-radius: 99px; height: 6px; overflow: hidden; margin-bottom: 4px; } .fe-upload__bar-fill { background: var(--fe-primary); height: 100%; transition: width 0.2s; } .fe-upload__item.is-error .fe-upload__bar-fill, .fe-upload__item.is-aborted .fe-upload__bar-fill { background: var(--fe-danger); } .fe-upload__item.is-done .fe-upload__bar-fill { background: #16a34a; } .fe-upload__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--fe-text-muted); } .fe-upload__cancel { background: transparent; border: 0; color: var(--fe-primary); cursor: pointer; font: inherit; } .fe-upload-slide-enter-active, .fe-upload-slide-leave-active { transition: transform 0.2s, opacity 0.2s; } .fe-upload-slide-enter-from, .fe-upload-slide-leave-to { opacity: 0; transform: translateY(10px); } /* ---------- Pending ops tray ---------- */ /* Sits to the left of UploadProgress (which uses right: 16px) so the * two stacks don't overlap when both are active. */ .fe-ops { position: absolute; left: 16px; bottom: 16px; width: min(320px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; z-index: 40; } .fe-ops__item { background: var(--fe-bg); border: 1px solid var(--fe-border); border-radius: var(--fe-radius); box-shadow: var(--fe-shadow); padding: 10px 14px; font-size: 13px; } .fe-ops__item.is-done { border-color: #16a34a; } .fe-ops__item.is-error { border-color: var(--fe-danger); } .fe-ops__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .fe-ops__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } .fe-ops__dismiss { background: transparent; border: 0; color: var(--fe-text-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; } .fe-ops__bar { background: var(--fe-bg-elev); border-radius: 99px; height: 6px; overflow: hidden; } .fe-ops__bar-fill { background: var(--fe-primary); height: 100%; transition: width 0.25s; } .fe-ops__item.is-done .fe-ops__bar-fill { background: #16a34a; } .fe-ops__item.is-error .fe-ops__bar-fill { background: var(--fe-danger); } .fe-ops__error { margin-top: 6px; font-size: 11px; color: var(--fe-danger); } .fe-ops-slide-enter-active, .fe-ops-slide-leave-active { transition: transform 0.2s, opacity 0.2s; } .fe-ops-slide-enter-from, .fe-ops-slide-leave-to { opacity: 0; transform: translateY(10px); } /* ---------- Context menu ---------- */ .fe-ctx-backdrop { position: fixed; inset: 0; z-index: 80; /* Make the backdrop itself the variable scope. After teleporting under * we lose the `.fe` parent, so without explicit `color` here * the menu inherits Filament's body color (white on dark) and the * labels disappear against `--fe-bg` (white). V1.1 bug list update. */ color: var(--fe-text); font-family: var(--fe-font); font-size: 14px; } .fe-ctx { position: absolute; min-width: 180px; background: var(--fe-bg); border: 1px solid var(--fe-border); border-radius: var(--fe-radius); box-shadow: var(--fe-shadow); padding: 4px; z-index: 90; color: var(--fe-text); } .fe-ctx__item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--fe-radius-sm); border: 0; background: transparent; color: var(--fe-text); font: inherit; width: 100%; text-align: left; cursor: pointer; } .fe-ctx__item:hover:not(.is-disabled) { background: var(--fe-bg-hover); } .fe-ctx__item.is-danger { color: var(--fe-danger); } .fe-ctx__item.is-disabled { opacity: 0.45; cursor: not-allowed; } .fe-ctx__icon { width: 1.2em; text-align: center; } /* tus:t1 — the key that runs this row, pushed to the trailing edge. Muted and * smaller: it is a reminder, not a second label, and it must never win the * row's width from the label (hence auto margin + no shrink on the label). */ .fe-ctx__label { flex: 1 1 auto; min-width: 0; } .fe-ctx__key { flex: 0 0 auto; margin-left: auto; padding-left: 16px; color: var(--fe-text-muted); font-size: 11px; font-family: var(--fe-font-mono); white-space: nowrap; } .fe-ctx__sep { height: 1px; background: var(--fe-border); margin: 4px 0; } .fe-ctx-enter-active, .fe-ctx-leave-active { transition: opacity 0.1s; } .fe-ctx-enter-from, .fe-ctx-leave-to { opacity: 0; } /* ---------- Modal ---------- */ .fe-modal__backdrop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(13, 19, 27, 0.48); padding: 16px; } .fe-modal__card { background: var(--fe-bg); border-radius: var(--fe-radius); box-shadow: var(--fe-shadow); width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; } .fe-modal__card--sm { max-width: 420px; } .fe-modal__card--md { max-width: 560px; } .fe-modal__card--lg { max-width: 800px; } .fe-modal__card--xl { max-width: 1080px; height: calc(100vh - 64px); } /* Recently-opened tray — anchored modal that drops down from the * toolbar. Re-uses fe-modal__backdrop, just pins the panel to the top. */ .fe-recents__backdrop { align-items: flex-start !important; padding-top: 60px; } .fe-recents__panel { background: var(--fe-bg, #fff); border-radius: var(--fe-radius, 8px); box-shadow: var(--fe-shadow, 0 6px 24px rgba(0, 0, 0, 0.18)); width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 96px); display: flex; flex-direction: column; overflow: hidden; } .fe-recents__header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--fe-border, #e2e6ed); } .fe-recents__close { appearance: none; background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--fe-text-muted, #6b7280); padding: 0 4px; } .fe-recents__close:hover { color: var(--fe-text, #111); } /* Markdown split editor — textarea (raw) | rendered HTML preview. * The chromeless modal's full viewport makes the side-by-side feasible; * on narrower screens it collapses to a vertical stack. */ .fe-preview__md-split { display: flex; flex-direction: column; height: 100%; width: 100%; min-height: 0; } .fe-preview__md-split-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: var(--fe-bg-elev, #f6f7f9); border-bottom: 1px solid var(--fe-border, #e2e6ed); flex: 0 0 auto; } .fe-preview__md-split-label { font-family: var(--fe-font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--fe-text-muted, #6b7280); } .fe-preview__md-split-error { flex: 1 1 auto; font-size: 12px; color: var(--fe-danger, #dc2626); text-align: center; } .fe-preview__md-split-body { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; } .fe-preview__md-split-input { resize: none; border: 0; outline: 0; padding: 16px 20px; font-family: var(--fe-font-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.6; background: var(--fe-bg, #fff); color: var(--fe-text, #111); border-right: 1px solid var(--fe-border, #e2e6ed); overflow: auto; tab-size: 2; } .fe-preview__md-split-output { overflow: auto; padding: 16px 24px; background: var(--fe-bg, #fff); } /* The split-output element carries BOTH `fe-preview__md-split-output` and * `fe-preview__md`. The shared `.fe-preview__md` rule caps height at 70vh * (right for the standalone modal preview, wrong here) and — being later in * source order at equal specificity — wins over a plain * `.fe-preview__md-split-output { max-height: none }`. The compound selector * below raises specificity so the cap is dropped regardless of order, letting * the rendered pane fill the grid row (tall docs scroll inside it) instead of * leaving a dead gap below the content. */ .fe-preview__md-split-output.fe-preview__md { max-height: none; min-height: 0; height: 100%; } @media (max-width: 900px) { .fe-preview__md-split-body { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .fe-preview__md-split-input { border-right: 0; border-bottom: 1px solid var(--fe-border, #e2e6ed); } } /* Chromeless — used by the standalone /files/edit route. Drops the * dialog frame entirely so the viewport belongs to the viewer. */ .fe-modal__backdrop--chromeless { background: transparent; padding: 0; } .fe-modal__card--chromeless { max-width: none; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; box-shadow: none; } .fe-modal__card--chromeless .fe-modal__body { flex: 1 1 auto; min-height: 0; padding: 0; } .fe-modal__card--chromeless .fe-preview { /* Override center-alignment so split editors + iframes fill the * full chromeless viewport instead of floating in the middle. */ align-items: stretch; justify-content: stretch; min-height: 0; flex: 1 1 auto; } .fe-modal__card--chromeless .fe-preview > * { width: 100%; height: 100%; } .fe-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--fe-border); } .fe-modal__title { font-size: 16px; font-weight: 600; margin: 0; } .fe-modal__close { background: transparent; border: 0; color: var(--fe-text-muted); font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; } .fe-modal__body { padding: 16px; overflow: auto; flex: 1 1 auto; } .fe-modal__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--fe-border); background: var(--fe-bg-elev); } .fe-modal-enter-active, .fe-modal-leave-active { transition: opacity 0.15s; } .fe-modal-enter-from, .fe-modal-leave-to { opacity: 0; } /* ---------- Form ---------- */ .fe-input { width: 100%; padding: 8px 10px; background: var(--fe-bg); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-sm); font: inherit; color: var(--fe-text); } .fe-input:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: 1px; } .fe-input--mono { font-family: var(--fe-font-mono); letter-spacing: 0.1em; } .fe-form { display: flex; flex-direction: column; gap: 12px; } .fe-form__row { display: flex; align-items: center; gap: 8px; } .fe-form__row--stack { flex-direction: column; align-items: stretch; } .fe-form__hint { font-size: 12px; color: var(--fe-text-muted); } .fe-share-result__row--note small { color: var(--fe-text-muted); } .fe-form__error { color: var(--fe-danger); font-size: 12px; margin: 6px 0 0; } /* Share result */ .fe-share-result { display: flex; flex-direction: column; gap: 12px; } .fe-share-result__row label { display: block; font-size: 12px; font-weight: 600; color: var(--fe-text-muted); margin-bottom: 4px; } .fe-share-result__copy { display: flex; gap: 6px; } /* ---------- Preview ---------- */ .fe-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 50vh; background: var(--fe-bg-elev); } .fe-preview__image { max-width: 100%; max-height: 70vh; object-fit: contain; } .fe-preview__video, .fe-preview__audio { max-width: 100%; max-height: 70vh; } .fe-preview__iframe { width: 100%; height: 70vh; border: 0; background: #fff; } .fe-preview__office { width: 100%; height: 78vh; background: var(--fe-bg); } /* CodeMirror 6 editor surface — V1.5 follow-up #4: the Monaco editor did not work, so CodeMirror replaced it. */ .fe-preview__code-wrap { display: flex; flex-direction: column; width: 100%; height: 78vh; } .fe-preview__code-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--fe-bg-hover, #f3f4f6); border-bottom: 1px solid var(--fe-border, #e5e7eb); font-size: 12px; } .fe-preview__code-lang { font-family: var(--fe-font-mono, ui-monospace, monospace); color: var(--fe-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .fe-preview__code-toolbar > .fe-btn { margin-left: auto; } .fe-preview__code-status { font-size: 12px; font-weight: 500; } .fe-preview__code-status--ok { color: #059669; } .fe-preview__code-status--err { color: #dc2626; cursor: help; } .fe-preview__code-editor { flex: 1; min-height: 0; overflow: hidden; } .fe-preview__code-editor .cm-editor { height: 100%; font-size: 13px; } .fe-preview__code-editor .cm-scroller { font-family: var(--fe-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); } .fe-preview__fallback { text-align: center; color: var(--fe-text-muted); padding: 40px 20px; } .fe-preview__fallback-icon { font-size: 48px; display: block; margin-bottom: 12px; } .fe-preview__pre { margin: 0; padding: 16px; width: 100%; max-height: 70vh; overflow: auto; background: var(--fe-bg); color: var(--fe-text); font-family: var(--fe-font-mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } .fe-preview__code { white-space: pre; word-wrap: normal; } /* Minimal highlight.js theme — host can override by importing one of * highlight.js's stylesheets ahead of file-explorer.css. We ship * something usable so the unstyled colour-class spans don't render as * raw text in the wild. */ .hljs { background: var(--fe-bg); color: var(--fe-text); } .hljs-comment, .hljs-quote { color: var(--fe-text-muted); font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-section, .hljs-meta { color: #c678dd; } .hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition, .hljs-link { color: #98c379; } .hljs-number, .hljs-literal, .hljs-deletion { color: #d19a66; } .hljs-title, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-template-tag, .hljs-template-variable { color: #61aeee; } .hljs-type, .hljs-tag { color: #e06c75; } .hljs-variable, .hljs-attribute { color: #d19a66; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } .fe-preview__md { width: 100%; max-height: 70vh; overflow: auto; padding: 24px 32px; background: var(--fe-bg); color: var(--fe-text); line-height: 1.6; font-size: 15px; } .fe-preview__md h1, .fe-preview__md h2, .fe-preview__md h3, .fe-preview__md h4 { margin: 1.2em 0 0.6em; font-weight: 600; } .fe-preview__md h1 { font-size: 1.8em; border-bottom: 1px solid var(--fe-border); padding-bottom: 0.3em; } .fe-preview__md h2 { font-size: 1.4em; border-bottom: 1px solid var(--fe-border); padding-bottom: 0.3em; } .fe-preview__md h3 { font-size: 1.2em; } .fe-preview__md p { margin: 0.8em 0; } .fe-preview__md a { color: var(--fe-primary); text-decoration: underline; } .fe-preview__md code { font-family: var(--fe-font-mono); background: var(--fe-bg-elev); padding: 1px 5px; border-radius: 3px; font-size: 0.92em; } .fe-preview__md pre { background: var(--fe-bg-elev); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-sm); padding: 12px 16px; overflow: auto; font-size: 0.9em; } .fe-preview__md pre code { background: transparent; padding: 0; } .fe-preview__md ul, .fe-preview__md ol { padding-left: 2em; margin: 0.8em 0; } .fe-preview__md li { margin: 0.3em 0; } .fe-preview__md blockquote { border-left: 3px solid var(--fe-border-strong); padding: 0 1em; color: var(--fe-text-muted); margin: 0.8em 0; } .fe-preview__md table { border-collapse: collapse; margin: 1em 0; width: 100%; } .fe-preview__md th, .fe-preview__md td { border: 1px solid var(--fe-border); padding: 6px 10px; text-align: left; } .fe-preview__md th { background: var(--fe-bg-elev); } .fe-preview__md img { max-width: 100%; } /* ---------- Toast ---------- */ .fe-toast { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--fe-text); color: var(--fe-bg); padding: 8px 14px; border-radius: var(--fe-radius); font-size: 13px; box-shadow: var(--fe-shadow-sm); z-index: 95; } .fe-toast-enter-active, .fe-toast-leave-active { transition: opacity 0.2s, transform 0.2s; } .fe-toast-enter-from, .fe-toast-leave-to { opacity: 0; transform: translate(-50%, 10px); } /* ---------- Responsive ---------- */ @media (max-width: 640px) { .fe-list__head, .fe-list__row { grid-template-columns: 28px minmax(0, 1fr) 90px; } .fe-list__col--mod { display: none; } .fe-toolbar { padding: 8px; } .fe-search__input { min-width: 120px; } } /* === cila:a — file-type SVG icons + date group headers + density mode === */ /* SVG icon set (lib/fileIcons) — sized by the wrapper's font-size so the * existing 32px grid / 16px list scales keep working. */ .fe-ficon { width: 1em; height: 1em; display: block; flex-shrink: 0; } .fe-ficon--folder { color: var(--fe-icon-folder); } .fe-ficon--image { color: var(--fe-icon-image); } .fe-ficon--video { color: var(--fe-icon-video); } .fe-ficon--audio { color: var(--fe-icon-audio); } .fe-ficon--pdf { color: var(--fe-icon-pdf); } .fe-ficon--doc { color: var(--fe-icon-doc); } .fe-ficon--sheet { color: var(--fe-icon-sheet); } .fe-ficon--slides { color: var(--fe-icon-slides); } .fe-ficon--archive { color: var(--fe-icon-archive); } .fe-ficon--code { color: var(--fe-icon-code); } .fe-ficon--text { color: var(--fe-icon-text); } .fe-ficon--unknown { color: var(--fe-icon-unknown); } /* gorunum:v1 — the listing badge: a filled rounded square in the family's * colour with the glyph knocked out in white. Sized from the wrapper's * font-size like .fe-ficon, so the existing 32px grid / 16px list scales keep * working: the chip is the full em box and the glyph sits at 60% of it. * The folder keeps its own colour and no chip — see lib/fileIcons.iconTile. */ .fe-ftile { width: 1em; height: 1em; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.25em; background: var(--fe-icon-unknown); color: #ffffff; } .fe-ftile .fe-ficon { width: 0.6em; height: 0.6em; color: inherit; } .fe-ftile--folder { background: none; border-radius: 0; color: var(--fe-icon-folder); } .fe-ftile--folder .fe-ficon { width: 1em; height: 1em; } .fe-ftile--image { background: var(--fe-icon-image); } .fe-ftile--video { background: var(--fe-icon-video); } .fe-ftile--audio { background: var(--fe-icon-audio); } .fe-ftile--pdf { background: var(--fe-icon-pdf); } .fe-ftile--doc { background: var(--fe-icon-doc); } .fe-ftile--sheet { background: var(--fe-icon-sheet); } .fe-ftile--slides { background: var(--fe-icon-slides); } .fe-ftile--archive { background: var(--fe-icon-archive); } .fe-ftile--code { background: var(--fe-icon-code); } .fe-ftile--text { background: var(--fe-icon-text); } .fe-ftile--unknown { background: var(--fe-icon-unknown); } .fe-grid__icon--svg { display: flex; align-items: center; justify-content: center; } .fe-list__icon--svg { display: inline-flex; align-items: center; } /* Sortable list column headers — plain-looking buttons, arrow only when * the column drives the order. */ .fe-list__sort { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; } .fe-list__sort:hover { color: var(--fe-text); } .fe-list__sort:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: 2px; border-radius: 2px; } .fe-list__sort-arrow { font-size: 11px; color: var(--fe-primary); } /* Date group headers (only while sorted by modified date) — thin, muted, * non-interactive. */ .fe-list__group { padding: 12px 12px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fe-text-muted); user-select: none; } /* Density: compact — tighter rows/cards, smaller grid tiles. Toggled from * the toolbar; class lives on the `.fe` root. */ .fe--density-compact .fe-toolbar { padding: 6px 8px; gap: 6px; } .fe--density-compact .fe-breadcrumb { padding: 4px 12px; } .fe--density-compact .fe-list__head { padding: 4px 12px; } .fe--density-compact .fe-list__row { padding: 3px 12px; } .fe--density-compact .fe-list__icon { font-size: 14px; } .fe--density-compact .fe-list__group { padding: 8px 12px 2px; } .fe--density-compact .fe-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 8px; } .fe--density-compact .fe-grid__card { padding: 6px; } .fe--density-compact .fe-grid__icon { font-size: 24px; } /* === cila:c — command palette + shortcuts help + breadcrumb overflow === */ /* Command palette (Ctrl/Cmd+K) — top-anchored launcher card. */ .fe-cmdp__backdrop { align-items: flex-start; padding-top: min(18vh, 160px); } .fe-cmdp { background: var(--fe-bg); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-lg); box-shadow: var(--fe-shadow); width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden; } .fe-cmdp__inputwrap { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--fe-border); color: var(--fe-text-muted); } .fe-cmdp__glyph { flex: 0 0 auto; } .fe-cmdp__input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; color: var(--fe-text); font: inherit; font-size: 15px; } .fe-cmdp__input::placeholder { color: var(--fe-text-muted); } .fe-cmdp__list { max-height: min(48vh, 380px); overflow-y: auto; padding: 6px; } .fe-cmdp__group { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fe-text-muted); } .fe-cmdp__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: var(--fe-radius-sm); padding: 8px 10px; color: var(--fe-text); font: inherit; font-size: 14px; cursor: pointer; } .fe-cmdp__item.is-active { background: var(--fe-bg-selected); } .fe-cmdp__item:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: -2px; } .fe-cmdp__icon { flex: 0 0 auto; width: 20px; text-align: center; } .fe-cmdp__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-cmdp__empty { padding: 20px 12px; text-align: center; color: var(--fe-text-muted); font-size: 13px; } .fe-cmdp__hint { padding: 8px 14px; border-top: 1px solid var(--fe-border); background: var(--fe-bg-elev); font-size: 11px; color: var(--fe-text-muted); } /* Shortcuts help ("?") — grouped cheat-sheet inside the standard modal. */ .fe-shortcuts { display: flex; flex-direction: column; gap: 16px; } .fe-shortcuts__heading { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fe-text-muted); } .fe-shortcuts__table { display: flex; flex-direction: column; } .fe-shortcuts__row { display: flex; align-items: center; gap: 12px; padding: 4px 0; } .fe-shortcuts__keys { flex: 0 0 40%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .fe-shortcuts__desc { flex: 1 1 auto; font-size: 13px; color: var(--fe-text); } .fe-shortcuts__or { color: var(--fe-text-muted); font-size: 11px; } .fe-kbd { display: inline-block; padding: 2px 7px; border: 1px solid var(--fe-border-strong); border-bottom-width: 2px; border-radius: var(--fe-radius-sm); background: var(--fe-bg-elev); color: var(--fe-text); font-family: var(--fe-font-mono); font-size: 11.5px; line-height: 1.4; } /* Breadcrumb overflow — "…" trigger + dropdown for the collapsed middle. */ .fe-breadcrumb__more-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; } .fe-breadcrumb__more { background: transparent; border: 0; color: inherit; padding: 2px 8px; border-radius: var(--fe-radius-sm); cursor: pointer; font: inherit; line-height: 1.2; } .fe-breadcrumb__more:hover, .fe-breadcrumb__more[aria-expanded='true'] { background: var(--fe-bg-hover); color: var(--fe-text); } .fe-breadcrumb__more:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: 1px; } .fe-breadcrumb__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 80; min-width: 160px; max-width: 280px; max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; padding: 4px; background: var(--fe-bg); border: 1px solid var(--fe-border); border-radius: var(--fe-radius); box-shadow: var(--fe-shadow); } .fe-breadcrumb__menu-item { text-align: left; background: transparent; border: 0; padding: 6px 10px; border-radius: var(--fe-radius-sm); color: var(--fe-text); font: inherit; font-size: 13px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-breadcrumb__menu-item:hover, .fe-breadcrumb__menu-item:focus-visible { background: var(--fe-bg-hover); } /* Long folder names shouldn't blow up the crumb row — ellipsize labels. */ .fe-breadcrumb__crumb > span:first-child { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 640px) { .fe-breadcrumb__crumb > span:first-child { max-width: 110px; } } @media (prefers-reduced-motion: reduce) { .fe-modal-enter-active, .fe-modal-leave-active { transition: none !important; } } /* === cila:b — skeleton loading, state screens, undo snackbar, connection badge === */ /* Screen-reader-only helper (skeleton announces "loading" without visuals). */ .fe-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Skeleton (initial load) ---------- */ .fe__skeleton { min-height: 240px; } .fe-skel { position: relative; overflow: hidden; border-radius: var(--fe-radius-sm); background: color-mix(in srgb, var(--fe-text-muted) 14%, transparent); } .fe-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--fe-text-muted) 12%, transparent), transparent ); animation: fe-skel-shimmer 1.4s ease-in-out infinite; } @keyframes fe-skel-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { /* Static faint blocks — no sweep. */ .fe-skel::after { animation: none; content: none; } } /* List-mode ghosts mirror .fe-list__row's grid so the swap to real rows doesn't shift the layout. */ .fe-skel-list { padding-top: 2px; } .fe-skel-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 120px 180px; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--fe-border); } .fe-skel-row .fe-skel { height: 12px; } .fe-skel-row .fe-skel--icon { width: 20px; height: 20px; border-radius: 6px; } .fe-skel-row .fe-skel--name { width: 55%; } .fe-skel-row:nth-child(2n) .fe-skel--name { width: 38%; } .fe-skel-row:nth-child(3n) .fe-skel--name { width: 70%; } .fe-skel-row .fe-skel--size { width: 56px; justify-self: start; } .fe-skel-row .fe-skel--date { width: 110px; justify-self: start; } /* Grid-mode ghosts mirror .fe-grid / .fe-grid__card. */ .fe-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--fe-gap); padding: var(--fe-gap); } .fe-skel-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--fe-border); border-radius: var(--fe-radius); background: var(--fe-bg-elev); } .fe-skel-card .fe-skel--thumb { aspect-ratio: 1 / 1; } .fe-skel-card .fe-skel--label { height: 12px; width: 70%; } .fe-skel-card:nth-child(2n) .fe-skel--label { width: 50%; } .fe-skel-card:nth-child(3n) .fe-skel--label { width: 85%; } /* ---------- State screens (empty / search-empty / not-found / error) ---------- */ .fe-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 240px; height: 100%; padding: 24px; text-align: center; color: var(--fe-text-muted); } .fe-state__art { color: var(--fe-text-muted); opacity: 0.7; margin-bottom: 4px; flex: 0 0 auto; } .fe-state__title { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--fe-text); } .fe-state__hint { margin: 0; font-size: 13px; max-width: 420px; } .fe-state__path { margin: 0; font-size: 12px; font-family: var(--fe-font-mono); word-break: break-all; max-width: 480px; } .fe-state__actions { margin-top: 12px; display: flex; gap: 8px; } /* ---------- Undo snackbar (action-capable toast) ---------- */ .fe-toast--action { display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 14px; cursor: pointer; max-width: min(480px, calc(100% - 32px)); } .fe-toast__msg { min-width: 0; } .fe-toast__action { flex: 0 0 auto; background: transparent; border: 0; padding: 4px 8px; border-radius: var(--fe-radius-sm); font: inherit; font-weight: 600; color: color-mix(in srgb, var(--fe-primary) 70%, var(--fe-bg)); cursor: pointer; } .fe-toast__action:hover { background: color-mix(in srgb, var(--fe-bg) 14%, transparent); } .fe-toast__action:focus-visible { outline: 2px solid var(--fe-bg); outline-offset: 1px; } /* ---------- Connection badge (degraded realtime only) ---------- */ .fe-connbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--fe-text-muted); background: var(--fe-bg-elev); border: 1px solid var(--fe-border); border-radius: 999px; padding: 2px 10px; cursor: help; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .fe-connbadge__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--fe-warning, #f59e0b); } /* === bul:s3 === */ /* Palette — "Everywhere" hit rows (name + crumb + snippet stack). */ .fe-cmdp__item--hit { align-items: flex-start; } .fe-cmdp__item--hit .fe-cmdp__icon { margin-top: 1px; } .fe-cmdp__hitbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fe-cmdp__hitline { display: flex; align-items: center; gap: 8px; min-width: 0; } .fe-cmdp__badge, .fe-list__badge { flex: 0 0 auto; display: inline-block; padding: 1px 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fe-primary) 35%, transparent); background: color-mix(in srgb, var(--fe-primary) 12%, transparent); color: var(--fe-primary); font-size: 10px; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle; } .fe-cmdp__crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--fe-text-muted); } .fe-cmdp__snippet, .fe-list__snippet { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--fe-text-muted); } .fe-cmdp__mark, .fe-list__mark, .fe-grid__mark { background: color-mix(in srgb, var(--fe-primary) 22%, transparent); color: var(--fe-text); border-radius: 2px; padding: 0 1px; font-weight: 600; } .fe-cmdp__loading { padding: 8px 12px; font-size: 13px; color: var(--fe-text-muted); } /* Palette — saved-search rows (div-based so the delete button nests legally). */ .fe-cmdp__item--saved { user-select: none; } .fe-cmdp__del { flex: 0 0 auto; background: transparent; border: 0; border-radius: var(--fe-radius-sm); padding: 2px 6px; font: inherit; font-size: 13px; color: var(--fe-text-muted); cursor: pointer; opacity: 0.55; } .fe-cmdp__item--saved:hover .fe-cmdp__del, .fe-cmdp__item--saved.is-active .fe-cmdp__del { opacity: 1; } .fe-cmdp__del:hover { background: var(--fe-bg-elev); color: var(--fe-danger, #dc2626); } .fe-cmdp__del:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: -2px; } /* List view — search-result snippet line under the filename. */ .fe-list__snippet { max-width: 100%; } /* === bag:b4 — narrow/embed mini mode === */ /* Everything below is scoped to `.fe--narrow`, `.fe-toolbar--narrow`, * `.fe-fab` or `.fe-sheet` — none of which exist in the wide desktop * layout, so the classic look is untouched when the mode is off. */ /* Narrow toolbar: a single non-wrapping row of icon buttons. */ .fe-toolbar--narrow { flex-wrap: nowrap; gap: 6px; } .fe-toolbar--narrow .fe-btn.is-active { background: var(--fe-bg-selected); } /* Expanded search: the input takes the whole row. */ .fe-toolbar--narrow .fe-search--full { flex: 1 1 auto; min-width: 0; } .fe-toolbar--narrow .fe-search--full .fe-search__input { width: 100%; min-width: 0; } /* Upload FAB — bottom-right corner of the explorer (narrow mode only). */ .fe-fab { position: absolute; right: 16px; bottom: 16px; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--fe-primary); color: var(--fe-text-on-primary); font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: var(--fe-shadow); cursor: pointer; z-index: 45; transition: background 0.15s, transform 0.15s; } .fe-fab:hover { background: var(--fe-primary-hover); } .fe-fab:active { transform: scale(0.94); } .fe-fab:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: 3px; } /* Keep the corner trays clear of the FAB while narrow. */ .fe--narrow .fe-upload, .fe--narrow .fe-ops { bottom: 84px; } /* Bottom sheet (ContextMenu sheet variant, coarse-pointer devices). */ .fe-ctx-backdrop--sheet { background: rgba(13, 19, 27, 0.42); } .fe-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 70vh; display: flex; flex-direction: column; background: var(--fe-bg); color: var(--fe-text); border: 1px solid var(--fe-border); border-bottom: 0; border-top-left-radius: var(--fe-radius-lg); border-top-right-radius: var(--fe-radius-lg); box-shadow: 0 -10px 32px rgba(15, 23, 42, 0.28); padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); outline: none; z-index: 90; } .fe-sheet__handle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 12px 0 8px; cursor: grab; touch-action: none; } .fe-sheet__handle::before { content: ''; width: 40px; height: 4px; border-radius: 99px; background: var(--fe-border-strong); } .fe-sheet__items { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Big touch targets (≥44px) on sheet entries. */ .fe-sheet__item { min-height: 44px; padding: 10px 14px; font-size: 15px; gap: 12px; } /* Sheet transitions: backdrop fades, panel slides up from the bottom. */ .fe-sheet-enter-active, .fe-sheet-leave-active { transition: opacity 0.18s ease; } .fe-sheet-enter-active .fe-sheet, .fe-sheet-leave-active .fe-sheet { transition: transform 0.22s ease; } .fe-sheet-enter-from, .fe-sheet-leave-to { opacity: 0; } .fe-sheet-enter-from .fe-sheet, .fe-sheet-leave-to .fe-sheet { transform: translateY(100%); } @media (prefers-reduced-motion: reduce) { .fe-sheet-enter-active, .fe-sheet-leave-active, .fe-sheet-enter-active .fe-sheet, .fe-sheet-leave-active .fe-sheet, .fe-fab { transition: none; } } /* === koru:k1 — inspector (details) panel === */ /* fe__main — horizontal flex wrapper: listing body + inspector side panel. Takes over fe__body's old role as .fe's flexible middle region; fe__body keeps its own rules (flex:1 1 auto now distributes WIDTH inside the row). */ .fe__main { display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; } .fe__main > .fe__body { min-width: 0; height: 100%; } .fe-inspector { flex: 0 0 300px; width: 300px; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--fe-border); background: var(--fe-bg); color: var(--fe-text); } /* Narrow embeds: full-size overlay on top of the explorer (below modals and context menus, above the listing + FAB). */ .fe-inspector--overlay { position: absolute; inset: 0; z-index: 60; width: auto; border-left: none; } .fe-inspector__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--fe-border); flex: 0 0 auto; } .fe-inspector__title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; } .fe-inspector__close { border: none; background: none; color: var(--fe-text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; } .fe-inspector__close:hover { background: var(--fe-bg-hover); color: var(--fe-text); } .fe-inspector__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; } .fe-inspector__section { margin-bottom: 18px; } .fe-inspector__section:last-child { margin-bottom: 0; } .fe-inspector__heading { margin: 0 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fe-text-muted); } .fe-inspector__hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 6px 0 4px; } .fe-inspector__bigicon { display: inline-flex; } .fe-inspector__bigicon .fe-ficon { width: 56px; height: 56px; } .fe-inspector__thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--fe-radius); border: 1px solid var(--fe-border); } .fe-inspector__name { margin: 0; font-size: 13px; font-weight: 600; word-break: break-word; max-width: 100%; } .fe-inspector__sub { margin: 0; font-size: 12px; color: var(--fe-text-muted); } .fe-inspector__meta { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; } .fe-inspector__row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; } .fe-inspector__row dt { flex: 0 0 84px; color: var(--fe-text-muted); } .fe-inspector__row dd { margin: 0; min-width: 0; flex: 1 1 auto; word-break: break-word; } .fe-inspector__pathcell { display: flex; align-items: center; gap: 4px; } .fe-inspector__path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; /* keep the tail (basename) visible when truncated */ text-align: left; } .fe-inspector__mime { font-family: var(--fe-font-mono); font-size: 11px; } .fe-inspector__copy { flex: 0 0 auto; border: none; background: none; color: var(--fe-text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 4px; } .fe-inspector__copy:hover { background: var(--fe-bg-hover); color: var(--fe-text); } .fe-inspector__empty { margin: 0; font-size: 12px; color: var(--fe-text-muted); } /* Small buttons used inside the panel rows. */ .fe-btn--sm { padding: 3px 8px; font-size: 12px; } .fe-inspector__versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .fe-inspector__version { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--fe-border); border-radius: var(--fe-radius); } .fe-inspector__version-main { display: flex; flex-direction: column; gap: 2px; } .fe-inspector__version-n { font-size: 12px; font-weight: 600; } .fe-inspector__version-meta { font-size: 11px; color: var(--fe-text-muted); } .fe-inspector__confirm { display: flex; flex-direction: column; gap: 6px; } .fe-inspector__confirm-q { margin: 0; font-size: 12px; } .fe-inspector__check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fe-text-muted); cursor: pointer; } .fe-inspector__confirm-actions { display: flex; gap: 6px; } .fe-inspector__snapshot { margin-top: 8px; width: 100%; } .fe-inspector__permrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fe-inspector__badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; border: 1px solid var(--fe-border-strong); color: var(--fe-text); background: var(--fe-bg-hover); } .fe-inspector__badge--owner { border-color: var(--fe-primary); color: var(--fe-primary); background: transparent; } .fe-inspector__badge--none { color: var(--fe-text-muted); } .fe-inspector__badge--pin { border-color: var(--fe-warning, #f59e0b); color: var(--fe-warning, #f59e0b); background: transparent; } .fe-inspector__shares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .fe-inspector__share { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; } .fe-inspector__share-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-inspector__share-exp { flex: 0 0 auto; font-size: 11px; color: var(--fe-text-muted); } /* Slide-in is subtle and honors prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .fe-inspector { animation: fe-inspector-in 0.16s ease; } @keyframes fe-inspector-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } } /* wiring:c2 — shortcut settings modal + quick-look hint bar */ .fe-shortcuts__unbound { font-size: 12px; font-style: italic; color: var(--fe-text-muted); } .fe-shortcuts__custom { margin-left: 4px; font-size: 9px; vertical-align: 2px; color: var(--fe-primary); } .fe-shortset { display: flex; flex-direction: column; gap: 14px; } .fe-shortset__topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .fe-shortset__hint { margin: 0; font-size: 12px; color: var(--fe-text-muted); flex: 1 1 auto; } .fe-shortset__reset-all { flex: 0 0 auto; } .fe-shortset__group { display: flex; flex-direction: column; } .fe-shortset__item { border-radius: var(--fe-radius-sm); padding: 2px 6px; margin: 0 -6px; } .fe-shortset__item.is-capturing { background: var(--fe-bg-hover); outline: 1px dashed var(--fe-primary); outline-offset: -1px; } .fe-shortset__item.is-conflict { background: color-mix(in srgb, var(--fe-danger) 8%, transparent); outline: 1px solid var(--fe-danger); outline-offset: -1px; } .fe-shortset__row { display: flex; align-items: center; gap: 12px; padding: 4px 0; min-height: 34px; } .fe-shortset__label { flex: 1 1 auto; font-size: 13px; color: var(--fe-text); } .fe-shortset__keys { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .fe-shortset__capture { font-size: 12px; color: var(--fe-primary); animation: fe-shortset-blink 1.1s ease-in-out infinite; } @keyframes fe-shortset-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .fe-shortset__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-width: 118px; justify-content: flex-end; } .fe-shortset__btn { padding: 3px 9px; font-size: 12px; } /* tus:t1 — "Desktop app only" on a combo the browser keeps for itself. */ .fe-shortset__reserved { margin-left: 6px; font-size: 10.5px; color: var(--fe-text-muted); border: 1px dashed var(--fe-border); border-radius: var(--fe-radius-sm); padding: 1px 6px; white-space: nowrap; } .fe-shortset__fixed { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fe-text-muted); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-sm); padding: 2px 7px; } .fe-shortset__conflict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 2px 8px; font-size: 12.5px; color: var(--fe-danger); } .fe-shortset__conflict-msg { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 200px; } .fe-shortset__conflict-actions { flex: 0 0 auto; display: flex; gap: 6px; } /* Quick-look hint bar — floats above the PreviewModal backdrop (z 70). * Carries the `.fe` class for the theme-variable cascade, so the `.fe` * root layout defaults (column flex, min-height 420px, 100% height) * must be explicitly neutralised here. * * Written as `.fe.fe-ql-hint` on purpose: a single class ties with the * `.fe` root rule and would be decided by source order alone, which is * not something a host embed can be trusted to preserve. The hint is * also Teleported under (QuickLook.vue) so a host container's * own `.fe` override cannot reach it by descendant — issue #22, where * the pill grew to the full viewport height inside the admin UI. */ .fe.fe-ql-hint { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 72; display: inline-flex; flex-direction: row; align-items: center; width: auto; height: auto; min-height: 0; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--fe-border); background: var(--fe-bg-elev); color: var(--fe-text-muted); font-size: 12px; box-shadow: var(--fe-shadow); pointer-events: none; white-space: nowrap; } .fe-ql-hint .fe-kbd { font-size: 10.5px; padding: 1px 5px; } .fe-ql-hint__sep { opacity: 0.5; } /* One key-cap group plus its label, kept together so the pill can only * break between segments. */ .fe-ql-hint__seg { display: inline-flex; align-items: center; gap: 4px; } /* /wiring:c2 */ /* ========================================================= * wiring:c3 — Operations center (unified upload + ops-queue surface) * Badge bottom-right (count + aggregate progress ring), expanding * panel with active ops + session history. Replaces the old * .fe-upload / .fe-ops corner trays (those components are now * renderless publishers — their CSS above is retained but unused). * ================================================================ */ .fe-opc { position: absolute; right: 16px; bottom: 16px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: calc(100% - 32px); } .fe-opc__badge { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--fe-border); background: var(--fe-bg); color: var(--fe-text); box-shadow: var(--fe-shadow); cursor: pointer; font: inherit; font-size: 13px; line-height: 1; } .fe-opc__badge:hover { background: var(--fe-bg-hover); } .fe-opc__badge:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: 2px; } .fe-opc__badge.is-error { border-color: var(--fe-danger); } .fe-opc__badge.is-error .fe-opc__count { color: var(--fe-danger); } .fe-opc__ring { width: 22px; height: 22px; flex: 0 0 auto; } .fe-opc__ring-track { stroke: var(--fe-border-strong); } .fe-opc__ring-fill { stroke: var(--fe-primary); transition: stroke-dashoffset 0.25s; } .fe-opc__badge.is-error .fe-opc__ring-fill { stroke: var(--fe-danger); } .fe-opc__ring--spin { animation: fe-opc-spin 1s linear infinite; } @keyframes fe-opc-spin { to { transform: rotate(360deg); } } .fe-opc__count { font-weight: 600; } .fe-opc__pct { color: var(--fe-text-muted); font-size: 12px; } .fe-opc__panel { width: min(380px, calc(100vw - 32px)); max-width: 100%; max-height: min(420px, 60vh); display: flex; flex-direction: column; overflow: hidden; background: var(--fe-bg); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-lg); box-shadow: var(--fe-shadow); } .fe-opc__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--fe-bg-elev); border-bottom: 1px solid var(--fe-border); font-size: 13px; } .fe-opc__body { overflow: auto; padding: 6px 0 8px; } .fe-opc__section + .fe-opc__section { border-top: 1px solid var(--fe-border); margin-top: 6px; } .fe-opc__section-title { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 8px 14px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fe-text-muted); } .fe-opc__list { list-style: none; margin: 0; padding: 0; } .fe-opc__item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; } .fe-opc__item + .fe-opc__item { border-top: 1px solid var(--fe-border); } .fe-opc__item.is-error { background: color-mix(in srgb, var(--fe-danger) 7%, transparent); } .fe-opc__kicon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--fe-text-muted); } .fe-opc__item.is-error .fe-opc__kicon { color: var(--fe-danger); } .fe-opc__mid { flex: 1 1 auto; min-width: 0; } .fe-opc__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .fe-opc__sub { display: flex; align-items: baseline; gap: 5px; font-size: 11px; color: var(--fe-text-muted); margin-top: 1px; min-width: 0; } .fe-opc__sub--err, .fe-opc__item.is-error .fe-opc__state { color: var(--fe-danger); } .fe-opc__state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-opc__bar { background: var(--fe-bg-elev); border-radius: 99px; height: 5px; overflow: hidden; margin-top: 5px; } .fe-opc__bar-fill { background: var(--fe-primary); height: 100%; transition: width 0.2s; } .fe-opc__spin { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--fe-border-strong); border-top-color: var(--fe-primary); animation: fe-opc-spin 0.8s linear infinite; } .fe-opc__acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .fe-opc__act { background: transparent; border: 0; color: var(--fe-primary); cursor: pointer; font: inherit; font-size: 12px; padding: 2px 4px; border-radius: var(--fe-radius-sm); } .fe-opc__act:hover { background: var(--fe-bg-hover); } .fe-opc__act--retry { font-weight: 600; } .fe-opc__x { background: transparent; border: 0; color: var(--fe-text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; border-radius: var(--fe-radius-sm); } .fe-opc__x:hover { color: var(--fe-text); } .fe-opc__item--history .fe-opc__name { font-size: 12px; color: var(--fe-text-muted); } .fe-opc__chip { flex: 0 0 auto; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--fe-bg-elev); color: var(--fe-text-muted); } .fe-opc__chip.is-done { color: var(--fe-ok, #16a34a); background: color-mix(in srgb, var(--fe-ok, #16a34a) 12%, transparent); } .fe-opc__chip.is-error { color: var(--fe-danger); background: color-mix(in srgb, var(--fe-danger) 12%, transparent); } .fe-opc__item.is-done .fe-opc__bar-fill { background: var(--fe-ok, #16a34a); } .fe-opc__empty { margin: 0; padding: 16px 14px; font-size: 12px; color: var(--fe-text-muted); text-align: center; } .fe-opc-pop-enter-active, .fe-opc-pop-leave-active { transition: transform 0.16s ease, opacity 0.16s ease; } .fe-opc-pop-enter-from, .fe-opc-pop-leave-to { opacity: 0; transform: translateY(8px) scale(0.98); } /* Narrow / embedded: clear the FAB and behave like a bottom sheet — * badge stays compact at the right, panel stretches edge to edge. */ .fe--narrow .fe-opc { left: 12px; right: 12px; bottom: 84px; max-width: none; } .fe--narrow .fe-opc__panel { width: 100%; max-height: 50vh; } @media (prefers-reduced-motion: reduce) { .fe-opc__ring--spin, .fe-opc__spin { animation-duration: 3s; } .fe-opc-pop-enter-active, .fe-opc-pop-leave-active { transition: none; } } /* /wiring:c3 */ /* === wiring:c4 — onboarding tour, accessibility and interaction polish === */ /* ---------- Focus ring: grid cards (list rows already had one) ---------- */ .fe-grid__card:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: 2px; } .fe-ctx__item:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: -2px; background: var(--fe-bg-hover); } /* ---------- Drag & drop feedback ---------- */ /* The folder currently hovered by an internal drag. Dashed ring + tinted background so it reads differently from plain selection. */ .fe-list__row.is-droptarget, .fe-grid__card.is-droptarget { outline: 2px dashed var(--fe-primary); outline-offset: -2px; background: var(--fe-bg-selected); } .fe-grid__card.is-droptarget { border-color: var(--fe-primary); } /* Custom drag ghost (lib/dragGhost.ts) — appended to , themed via the :root/.dark token publication. */ .fe-dragghost { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 6px 10px; border: 1px solid var(--fe-border-strong); border-radius: var(--fe-radius); background: var(--fe-bg-elev); color: var(--fe-text); font-family: var(--fe-font); font-size: 13px; box-shadow: var(--fe-shadow-sm); pointer-events: none; z-index: 96; } .fe-dragghost__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-dragghost__badge { flex: 0 0 auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--fe-primary); color: var(--fe-text-on-primary); font-size: 12px; font-weight: 600; text-align: center; } /* ---------- Error state: technical detail disclosure ---------- */ .fe-state__details { margin-top: 10px; max-width: 480px; font-size: 12px; text-align: left; } .fe-state__details-summary { cursor: pointer; text-align: center; color: var(--fe-text-muted); user-select: none; } .fe-state__details-summary:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: 2px; } .fe-state__details-pre { margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--fe-border); border-radius: var(--fe-radius-sm); background: var(--fe-bg-elev); font-family: var(--fe-font-mono); font-size: 11px; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; } /* ---------- Onboarding tour ---------- */ .fe-tour { position: fixed; inset: 0; z-index: 96; /* above the command palette (95) */ color: var(--fe-text); font-family: var(--fe-font); font-size: 14px; } /* Spotlight cutout: the element itself is transparent; the dim layer is the giant box-shadow around it. */ .fe-tour__spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(13, 19, 27, 0.55); border: 2px solid var(--fe-primary); pointer-events: none; } .fe-tour__dim { position: fixed; inset: 0; background: rgba(13, 19, 27, 0.55); pointer-events: none; } .fe-tour__card { position: fixed; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--fe-border-strong); border-radius: var(--fe-radius-lg); background: var(--fe-bg); color: var(--fe-text); box-shadow: var(--fe-shadow); outline: none; } .fe-tour__card--center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 24px)); } .fe-tour__progress { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--fe-text-muted); } .fe-tour__title { margin: 0; font-size: 15px; font-weight: 700; } .fe-tour__desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fe-text-muted); } .fe-tour__dots { display: flex; gap: 5px; margin-top: 4px; } .fe-tour__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fe-border-strong); transition: background 0.15s; } .fe-tour__dot.is-active { background: var(--fe-primary); } .fe-tour__actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .fe-tour__actions-spacer { flex: 1 1 auto; } .fe-tour__skip { color: var(--fe-text-muted); } .fe-tour-enter-active, .fe-tour-leave-active { transition: opacity 0.16s ease; } .fe-tour-enter-from, .fe-tour-leave-to { opacity: 0; } /* ---------- prefers-reduced-motion: quiet the remaining movers ---------- */ @media (prefers-reduced-motion: reduce) { .fe-tour-enter-active, .fe-tour-leave-active, .fe-ctx-enter-active, .fe-ctx-leave-active, .fe-sheet-enter-active, .fe-sheet-leave-active, .fe-toast-enter-active, .fe-toast-leave-active { transition: none !important; } .fe-list__row, .fe-grid__card, .fe-tour__dot, .fe-list__col--star { transition: none !important; } } /* === /wiring:c4 === */ /* === wiring:d1 — tabs (tab strip) + split pane === */ /* Tab strip — thin row ABOVE the toolbar. The host renders it only with 2+ tabs, so the default single-tab embed stays pixel-identical. */ .fe-tabs { display: flex; align-items: stretch; gap: 4px; flex: 0 0 auto; /* ⚠⚠ Without this the strip never scrolls — it GROWS. A flex item's default * `min-width: auto` floors it at its min-content width, so a row of tabs * wider than the window pushed the whole explorer sideways instead of * overflowing into `.fe-tabs__scroll`: measured 63 tabs → a 4903px strip in * a 1264px window, the layout running off the right edge with no scrollbar * anywhere (2026-08-12, reported as "it overflowed the screen and keeps sliding"). Allowing the * strip to shrink is what hands the overflow to the scroller inside it. */ min-width: 0; padding: 4px 6px 0; background: var(--fe-bg-elev); border-bottom: 1px solid var(--fe-border); user-select: none; } .fe-tabs__scroll { display: flex; align-items: stretch; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; /* ⚠ EXPLICIT `hidden`, not left to default. `overflow-x: auto` alone makes * the other axis compute to `auto` too, so the strip grew a VERTICAL * scrollbar with nothing to scroll — a bar down the side of a row of tabs * (2026-08-12, reported). */ overflow-y: hidden; /* Enough tabs and they run off the edge; a strip that scrolls without * saying so is a strip whose overflow is invisible. Thin, on its own axis, * and only when there is something to scroll. */ scrollbar-width: thin; scrollbar-color: var(--fe-border-strong) transparent; } .fe-tabs__scroll::-webkit-scrollbar { height: 6px; width: 0; } .fe-tabs__scroll::-webkit-scrollbar-track { background: transparent; } .fe-tabs__scroll::-webkit-scrollbar-thumb { background: var(--fe-border-strong); border-radius: 6px; } .fe-tabs__scroll::-webkit-scrollbar-thumb:hover { background: var(--fe-text-muted); } .fe-tabs__tab { display: flex; align-items: center; gap: 6px; max-width: 180px; min-width: 72px; padding: 4px 6px 4px 10px; font-size: 12px; color: var(--fe-text-muted); background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; position: relative; } .fe-tabs__tab:hover { background: var(--fe-bg-hover); color: var(--fe-text); } .fe-tabs__tab.is-active { background: var(--fe-bg); color: var(--fe-text); border-color: var(--fe-border); } /* Mask the strip's bottom border under the active tab (connected look). */ .fe-tabs__tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fe-bg); } .fe-tabs__tab.is-dragover { outline: 1px dashed var(--fe-primary); outline-offset: -2px; } .fe-tabs__tab:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: -2px; } .fe-tabs__label { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .fe-tabs__splitdot { width: 6px; height: 6px; border-radius: 2px; background: var(--fe-primary); flex: 0 0 auto; } .fe-tabs__close { flex: 0 0 auto; width: 16px; height: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 4px; background: transparent; color: inherit; font-size: 13px; cursor: pointer; padding: 0; } .fe-tabs__close:hover { background: var(--fe-bg-hover); } .fe-tabs__new, .fe-tabs__split { flex: 0 0 auto; align-self: center; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--fe-text-muted); font-size: 15px; cursor: pointer; padding: 0; } .fe-tabs__split .fe-ficon { width: 14px; height: 14px; } .fe-tabs__new:hover, .fe-tabs__split:hover { background: var(--fe-bg-hover); color: var(--fe-text); } .fe-tabs__split.is-active { background: var(--fe-bg-selected); color: var(--fe-primary); border-color: var(--fe-border); } /* Narrow embeds: split disabled — the host already hides the button via prop; this is belt & braces. */ .fe--narrow .fe-tabs__split { display: none; } /* ui-fix — left pane wrapper: breadcrumb + status strips + body in one flex-column. Full width without split; the left half once split (so the breadcrumb spans its own pane only, symmetric with SecondaryPane). */ .fe__primary { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; } .fe__primary > .fe__body { min-width: 0; } /* Split layout — equal halves inside fe__main; the inspector (koru:k1) keeps its fixed width to the right of both. */ .fe__main--split > .fe__primary { flex: 1 1 50%; } .fe-split { flex: 1 1 50%; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--fe-border); background: var(--fe-bg); color: var(--fe-text); } /* Active-panel accent: a thin top line on whichever pane owns the keyboard. */ .fe__main--split > .fe__primary, .fe-split { box-shadow: inset 0 2px 0 transparent; } .fe__main--split > .fe__primary.fe-pane--focus, .fe-split.fe-pane--focus { box-shadow: inset 0 2px 0 var(--fe-primary); } .fe-split__crumbs { display: flex; align-items: center; /* ui-fix — EXACTLY the same metrics as the main pane's .fe-breadcrumb (gap/padding/font) → in split mode the two breadcrumbs line up perfectly, with no hairline drift. */ gap: 4px; flex: 0 0 auto; padding: 6px 12px; min-height: 37px; /* ui-fix — same height as the main pane's .fe-breadcrumb */ border-bottom: 1px solid var(--fe-border); font-size: 13px; color: var(--fe-text-muted); overflow: hidden; white-space: nowrap; } .fe-split__crumb { border: none; background: transparent; color: inherit; font: inherit; padding: 2px 6px; /* ui-fix — same as .fe-breadcrumb__crumb */ border-radius: var(--fe-radius-sm); cursor: pointer; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-split__crumb:hover { background: var(--fe-bg-hover); color: var(--fe-text); } .fe-split__crumb.is-last { color: var(--fe-text); font-weight: 600; } .fe-split__sep { opacity: 0.6; flex: 0 0 auto; } .fe-split__spacer { flex: 1 1 auto; } .fe-split__closebtn { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 5px; background: transparent; color: var(--fe-text-muted); font-size: 14px; cursor: pointer; padding: 0; } .fe-split__closebtn:hover { background: var(--fe-bg-hover); color: var(--fe-text); } .fe-split__body { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; } .fe-split__body.is-dropover { outline: 2px dashed var(--fe-primary); outline-offset: -4px; } .fe-split__list { padding: 4px 0; } .fe-split__row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 13px; cursor: default; } .fe-split__row:hover { background: var(--fe-bg-hover); } .fe-split__row.is-selected { background: var(--fe-bg-selected); } .fe-split__row.is-droptarget { outline: 1.5px dashed var(--fe-primary); outline-offset: -2px; border-radius: 6px; } .fe-split__row:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: -2px; } .fe-split__icon { flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .fe-split__icon .fe-ficon { width: 16px; height: 16px; } .fe-split__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-split__size { flex: 0 0 auto; color: var(--fe-text-muted); font-size: 11.5px; } .fe-split__state { padding: 24px 12px; text-align: center; color: var(--fe-text-muted); font-size: 12.5px; display: flex; flex-direction: column; gap: 10px; align-items: center; } /* === /wiring:d1 === */ /* === wiring:d2 — gallery view (GalleryView.vue) === */ /* Large thumbnail grid: square cards, name below, size+date on hover. */ .fe-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--fe-gap); padding: var(--fe-gap); } .fe-gal__card { display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--fe-border); border-radius: var(--fe-radius); background: var(--fe-bg-elev); cursor: pointer; overflow: hidden; transition: background 0.08s, border-color 0.08s; user-select: none; } .fe-gal__card:hover { background: var(--fe-bg-hover); border-color: var(--fe-border-strong); } .fe-gal__card.is-selected { background: var(--fe-bg-selected); border-color: var(--fe-primary); } .fe-gal__card.is-trash { opacity: 0.7; } .fe-gal__card.is-clipped { opacity: 0.55; border-style: dashed; } .fe-gal__card:focus-visible { outline: 2px solid var(--fe-primary); outline-offset: 2px; } .fe-gal__card.is-droptarget { outline: 2px dashed var(--fe-primary); outline-offset: -2px; background: var(--fe-bg-selected); border-color: var(--fe-primary); } .fe-gal__thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--fe-bg); overflow: hidden; } .fe-gal__thumb img { width: 100%; height: 100%; object-fit: cover; } .fe-gal__icon { font-size: 44px; } .fe-gal__icon--svg svg { width: 64px; height: 64px; } /* Hover meta band — a translucent strip sitting at the bottom of the thumbnail; visible only on hover/keyboard focus (on touch the card's title is enough). */ .fe-gal__meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; font-size: 11px; line-height: 1.35; color: var(--fe-text); background: color-mix(in srgb, var(--fe-bg-elev) 88%, transparent); backdrop-filter: blur(2px); opacity: 0; transform: translateY(4px); transition: opacity 0.12s ease, transform 0.12s ease; pointer-events: none; } .fe-gal__card:focus-visible .fe-gal__meta { opacity: 1; transform: translateY(0); } /* issue #26 — see the note on .fe-list__col--star: no hover reveal on touch. A screen that cannot hover shows the caption outright instead, since it would otherwise never be seen there. */ @media (hover: hover) { .fe-gal__card:hover .fe-gal__meta { opacity: 1; transform: translateY(0); } } @media (hover: none) { .fe-gal__meta { opacity: 1; transform: none; } } .fe-gal__meta-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-gal__meta-line--path { color: var(--fe-text-muted); font-style: italic; } .fe-gal__label { padding: 7px 9px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .fe-gal__empty { grid-column: 1 / -1; padding: 40px 20px; text-align: center; color: var(--fe-text-muted); } /* Smaller tiles in narrow/embed mini mode (2-3 columns fit). */ .fe--narrow .fe-gal { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } /* Density: tiles shrink under the compact preference (same logic as grid). */ .fe--density-compact .fe-gal { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: calc(var(--fe-gap) * 0.6); } .fe--density-compact .fe-gal__label { padding: 5px 7px; font-size: 12px; } @media (prefers-reduced-motion: reduce) { .fe-gal__card, .fe-gal__meta { transition: none !important; transform: none; } } /* === /wiring:d2 === */ /* === wiring:d3 — inspector Yorumlar (node comments) === */ .fe-inspector__countbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px; border-radius: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0; background: var(--fe-bg-hover); color: var(--fe-text); vertical-align: middle; } .fe-inspector__comments { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .fe-inspector__comment { border: 1px solid var(--fe-border); border-radius: 8px; padding: 6px 8px; background: var(--fe-bg); } .fe-inspector__comment-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .fe-inspector__comment-author { font-size: 12px; font-weight: 600; color: var(--fe-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .fe-inspector__comment-time { font-size: 11px; color: var(--fe-text-muted); flex: 1 1 auto; white-space: nowrap; } .fe-inspector__comment-del { border: none; background: none; color: var(--fe-text-muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 4px; flex: 0 0 auto; } .fe-inspector__comment-del:hover { background: var(--fe-bg-hover); color: var(--fe-danger); } .fe-inspector__comment-del:disabled { opacity: 0.5; cursor: default; } .fe-inspector__comment-body { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--fe-text); overflow-wrap: anywhere; white-space: pre-wrap; } .fe-inspector__comment-form { display: flex; gap: 6px; align-items: center; } .fe-inspector__comment-input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--fe-border); border-radius: 8px; background: var(--fe-bg); color: var(--fe-text); font: inherit; font-size: 12px; padding: 6px 8px; } .fe-inspector__comment-input:focus { outline: none; border-color: var(--fe-primary); } .fe-inspector__comment-input:disabled { opacity: 0.6; } /* === /wiring:d3 === */ /* === wiring:e2 — end-to-end encrypted folders === */ /* Unlocked strip (same horizontal language as the presence strip). */ .fe-e2e-strip { display: flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: 12.5px; color: var(--fe-text-muted); border-bottom: 1px solid var(--fe-border); background: var(--fe-bg-elev); } .fe-e2e-strip__icon { font-size: 13px; line-height: 1; } .fe-e2e-strip__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-e2e-strip__btn { padding: 2px 10px; font-size: 12px; } /* Lock screen: a passphrase form on top of the fe-state language. */ .fe-e2e-lock__form { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; width: min(340px, 100%); } .fe-e2e-lock__input { flex: 1; min-width: 0; } /* Encrypted-folder creation modal. */ .fe-e2e-form { display: flex; flex-direction: column; gap: 10px; } .fe-e2e-warn { border: 1px solid var(--fe-danger); border-radius: var(--fe-radius-sm); padding: 8px 10px; font-size: 12.5px; color: var(--fe-text); background: color-mix(in srgb, var(--fe-danger) 8%, transparent); } .fe-e2e-warn strong { display: block; color: var(--fe-danger); margin-bottom: 2px; } .fe-e2e-warn p { margin: 0; color: var(--fe-text-muted); } .fe-e2e-ack { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--fe-text); cursor: pointer; } .fe-e2e-ack input { margin-top: 2px; accent-color: var(--fe-primary); } /* The "şifreli klasör" (encrypted folder) entry link inside NewFolderModal. */ .fe-e2e-optlink { margin-top: 10px; padding: 0; border: none; background: none; font: inherit; font-size: 12.5px; color: var(--fe-primary); cursor: pointer; text-align: left; } .fe-e2e-optlink:hover { text-decoration: underline; } /* --- wiring:e2 recovery --------------------------------------------- Unscoped and fe-prefixed on purpose: a scoped