diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Components/Aspid-FastTools-WindowFooter.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Components/Aspid-FastTools-WindowFooter.uss index 398722fc..8236794e 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Components/Aspid-FastTools-WindowFooter.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Components/Aspid-FastTools-WindowFooter.uss @@ -30,6 +30,20 @@ color: var(--aspid-colors-text-light); } +/* The keyboard-ring key, absolutely centred over the whole row (independent of the side links' widths) in the + quietest text tone — present for discoverability, but quieter than the version so it never competes. Click- + transparent from code so the links keep their hits. */ +.aspid-fasttools-window-footer__keys { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + font-size: 11px; + color: var(--aspid-colors-text-darkness); + -unity-text-align: middle-center; +} + /* GitHub link: the signature green, brightening on hover. */ .aspid-fasttools-window-footer__link { color: var(--aspid-colors-status-success-text-dark); diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-ReferenceGraph.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-ReferenceGraph.uss index f1992cb3..65d13b8a 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-ReferenceGraph.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-ReferenceGraph.uss @@ -153,6 +153,45 @@ white-space: normal; } +/* Accent legend under the hint — decodes the two card tones (amber = broken/orphaned/required, blue = pending + migration). Rendered only when both bands are on screen at once (see ShowOverview), matching the Project + References legend. Tucked into the hint's 10px gap: its own 10px bottom margin replaces the spacing to the + cards below. */ +.aspid-fasttools-reference-graph__legend { + flex-direction: row; + align-items: center; + margin-top: -4px; + margin-bottom: 10px; +} + +.aspid-fasttools-reference-graph__legend--hidden { + display: none; +} + +.aspid-fasttools-reference-graph__legend-item { + flex-direction: row; + align-items: center; + margin-right: 16px; +} + +/* Same 6px dot idiom as the Welcome sample-state markers; the muted -text-dark swatches match the card sweeps + rather than the bright title text, keeping the key quieter than the cards it explains. */ +.aspid-fasttools-reference-graph__legend-dot { + width: 6px; + height: 6px; + border-radius: 3px; + margin-right: 6px; + background-color: var(--aspid-colors-status-warning-text-dark); +} + +.aspid-fasttools-reference-graph__legend-dot--info { + background-color: var(--aspid-colors-status-info-text-dark); +} + +.aspid-fasttools-reference-graph__legend-text { + color: var(--aspid-colors-text-dark); +} + /* --- Per-document group --- */ /*.aspid-fasttools-reference-graph__document {*/ /* margin-bottom: 0px;*/ @@ -250,6 +289,12 @@ border-color: var(--aspid-colors-status-warning-shade-light); } +/* A migration card's active frame follows its own accent — the calm info blue, not the broken-card amber + (mirrors the Project References __group--migrate --picking frame). */ +.aspid-fasttools-reference-graph__node--migrate.aspid-fasttools-reference-graph__node--picking.aspid-fasttools-background { + border-color: var(--aspid-colors-status-info-shade-light); +} + /* A back-edge leaf (a cycle) is a single dim line, no bottom row — a fainter fill and a dimmer border sink it behind the live nodes. */ .aspid-fasttools-reference-graph__node--back-edge.aspid-fasttools-background { @@ -316,38 +361,101 @@ color: var(--aspid-colors-status-info-text-light); } -/* [MovedFrom] one-click migrate: the pending-migration card's full-width action under its band, info-tinted — an - authoritative rename is a calm migration, never an amber alarm (mirrors the Project Audit __group-migrate row). */ -.aspid-fasttools-reference-graph__node-migrate { - margin: 2px 0 4px 0; - --aspid-fasttools-colors-gradient_button-bg: var( - --aspid-colors-status-info-dark - ); - --aspid-fasttools-colors-gradient_button-accent: var( - --aspid-colors-status-info-text-light - ); +/* --- Band divider + underline sweep --- + The Project References group cards' idiom carried over: a dim hairline separates the band from the card body, + and an accent sweep riding exactly ON that line scales in from the left while the band is hovered. The sweep is + the band's sibling, so :hover can't reach it — code mirrors the band's hover onto the card's --header-hover + modifier, which the sweep rule listens to. The band carries no bottom margin, so the divider's own top margin + holds the band-to-line gap. */ +.aspid-fasttools-reference-graph__node-divider { + flex-grow: 0; + margin-top: 4px; + margin-bottom: 4px; + opacity: 0.5; } -.aspid-fasttools-reference-graph__node-migrate - .aspid-fasttools-gradient-button__label { - -unity-text-align: middle-center; +/* Pulled up past the divider's 4px bottom margin plus its 1px line so the sweep sits exactly ON the line; the 4px + bottom margin gives the swallowed gap back, keeping the body rhythm intact. Neutral by default (a healthy / + empty card's quiet dropdown); the modifiers repaint it in the card's accent. */ +.aspid-fasttools-reference-graph__node-sweep { + height: 1px; + margin-top: -5px; + margin-bottom: 4px; + background-color: var(--aspid-colors-text-dark); + transform-origin: left; + scale: 0 1; + transition-property: scale; + transition-duration: 0.25s; + transition-timing-function: ease-out; } -/* Smart Fix quick-apply on a missing card: success-tinted one-click suggestion, mirroring the Project Audit - __group-suggest row — the heuristic guess stays green-with-a-question while the authoritative migrate is blue. */ -.aspid-fasttools-reference-graph__node-suggest { - margin: 2px 0 4px 0; - --aspid-fasttools-colors-gradient_button-bg: var( - --aspid-colors-status-success-darkness - ); - --aspid-fasttools-colors-gradient_button-accent: var( - --aspid-colors-status-success-text-light - ); +/* A missing / required band sweeps amber — the same "fix this" accent its band and type pill wear. */ +.aspid-fasttools-reference-graph__node-sweep--missing { + background-color: var(--aspid-colors-status-warning-text-dark); } -.aspid-fasttools-reference-graph__node-suggest - .aspid-fasttools-gradient-button__label { - -unity-text-align: middle-center; +/* A migration card sweeps in its calm info tone — nothing on it is broken. */ +.aspid-fasttools-reference-graph__node-sweep--migrate { + background-color: var(--aspid-colors-status-info-text-dark); +} + +.aspid-fasttools-reference-graph__node--header-hover .aspid-fasttools-reference-graph__node-sweep { + scale: 1 1; +} + +/* Picker open: the dropdown is inserted between the band and the divider, which would strand the line and its + sweep under the whole selector — drop both while the card is picking. */ +.aspid-fasttools-reference-graph__node--picking .aspid-fasttools-reference-graph__node-divider, +.aspid-fasttools-reference-graph__node--picking .aspid-fasttools-reference-graph__node-sweep { + display: none; +} + +/* Smart Fix / Migrate as a member of the row family: a bold, left-aligned accent verb over the same flat hover + fill as the Project References action rows, instead of a filled gradient pill floating over the glass card. + Each card keeps ONE accent: the Smart Fix verb stays in the broken card's warning amber (matching the inspector + notice's amber suggestion), and the --info modifier swaps in the migration card's calm info tone. Text lightens + with the fill on hover, both on the shared 0.25s ease-out beat. */ +.aspid-fasttools-reference-graph__node-action { + padding: 2px 4px; + border-radius: 3px; + cursor: link; + -unity-font-style: bold; + color: var(--aspid-colors-status-warning-text-dark); + transition-property: background-color, color; + transition-duration: 0.25s; + transition-timing-function: ease-out; +} + +.aspid-fasttools-reference-graph__node-action:hover { + background-color: var(--aspid-colors-bg-dark); + color: var(--aspid-colors-status-warning-text-light); +} + +.aspid-fasttools-reference-graph__node-action--info { + color: var(--aspid-colors-status-info-text-dark); +} + +.aspid-fasttools-reference-graph__node-action--info:hover { + color: var(--aspid-colors-status-info-text-light); +} + +/* --- Keyboard navigation --- + Arrow keys walk one flat focus ring over every actionable element in the graph (Rescan, each document header, + node band, action row and orphan Clear); Enter activates the highlighted one, Escape drops the highlight. The + highlight mirrors each element's own hover treatment so keyboard focus and mouse hover read as one state: the + plain action rows take the flat hover fill below; the gradient-button ring members never carry the focused + class at all — SetNavFocus drives their hover in code through AspidGradientButton.Highlighted. */ +.aspid-fasttools-reference-graph__nav-target--focused { + background-color: var(--aspid-colors-bg-dark); +} + +/* The action rows also lighten their accent text on hover — mirror that for the keyboard highlight too. */ +.aspid-fasttools-reference-graph__node-action.aspid-fasttools-reference-graph__nav-target--focused { + color: var(--aspid-colors-status-warning-text-light); +} + +.aspid-fasttools-reference-graph__node-action--info.aspid-fasttools-reference-graph__nav-target--focused { + color: var(--aspid-colors-status-info-text-light); } /* The band's leading content (and the non-missing top row): the type pill + badges hugging the left, shrinkable so a @@ -376,32 +484,38 @@ -unity-font-style: italic; } -/* Bottom line: the field path, then the rid (+ an orphan's Clear), a touch below the band. Horizontal padding matches - the band's 4px so the path lines up under the type pill. */ +/* Bottom line: the field path, then the rid (+ an orphan's Clear), below the band's divider (which carries the + vertical gap). Horizontal padding matches the band's 4px so the path lines up under the type pill. */ .aspid-fasttools-reference-graph__node-footer { flex-direction: row; align-items: center; - margin-top: 4px; padding: 0 4px; } -/* The field/element path the reference sits under — a dim italic lead-in that grows so the rid pins to the right. */ +/* The field/element path the reference sits under — a dim italic lead-in that grows so the rid pins to the right. + min-width:0 lets it shrink below its content's intrinsic width; a long path stays on one line with its START + elided, so the leaf field — the part that identifies the slot — survives the cut (matches the Project References + entry paths). Footer text is selectable for copying; the I-beam signals that. */ .aspid-fasttools-reference-graph__node-root-label { flex-grow: 1; flex-shrink: 1; + min-width: 0; overflow: hidden; text-overflow: ellipsis; + -unity-text-overflow-position: start; white-space: nowrap; color: var(--aspid-colors-text-dark); -unity-font-style: italic; + cursor: text; } -/* The rid: a dim, small subtitle on the right of the bottom line. */ +/* The rid: a dim, small subtitle on the right of the bottom line. Selectable for copying, like the path. */ .aspid-fasttools-reference-graph__node-rid { flex-shrink: 0; color: var(--aspid-colors-text-dark); -unity-font-style: normal; font-size: 10px; + cursor: text; } /* --- Badges --- @@ -526,21 +640,72 @@ border-radius: 8px; } -/* Match the Project Audit selector's item insets so the rows line up identically. The global type-selector item rule - that does this lives in the Project Audit stylesheet, which this window does not load, so it is restated here. */ -.aspid-fasttools-reference-graph__picker - .unity-collection-view__item.aspid-fasttools-type-selector__item { +/* Match the Project Audit selector's row insets so the rows line up identically. The rows' visual body (the + fill-carrying content wrapper inside each transparent row shell) rounds and insets to match the window's card + idiom; the equivalent rule lives in the Project Audit stylesheet, which this window does not load. */ +.aspid-fasttools-reference-graph__picker .aspid-fasttools-type-selector__item-content { border-radius: 8px; padding-left: 8px; - margin-bottom: 2px; } -/* Re-tint the selector list's default editor-blue hover/selection to the window's palette. */ -.aspid-fasttools-reference-graph__picker .unity-collection-view__item:hover { - background-color: var(--aspid-colors-bg-dark); +/* The picker chrome follows the host card's accent, so the whole active card speaks one hue: the focused-search + frame, the hover cues (magnifier, navigable breadcrumbs) and the keyboard-selected row go warning amber on a + broken / required card, and the --migrate rules below swap all of them to the migration card's calm info tone + (the picker's own default). Selection is recoloured via the picker's row_bg VARIABLE, never background-color: + the divider row routes its fill through an inset backplate that reads that variable, so painting the property + directly would flood its divider zone. The compound selectors mirror the Project References rules verbatim — + they exist purely for specificity over the base stylesheet's own variable-setting selection rule. */ +.aspid-fasttools-reference-graph__node--picking .aspid-fasttools-type-selector__header--search-focused { + border-color: var(--aspid-colors-status-warning-text-light); +} + +.aspid-fasttools-reference-graph__node--picking .aspid-fasttools-type-selector__search-button:hover { + -unity-background-image-tint-color: var(--aspid-colors-status-warning-text-light); +} + +.aspid-fasttools-reference-graph__node--picking .aspid-fasttools-type-selector__breadcrumb--link:hover { + color: var(--aspid-colors-status-warning-text-lightness); +} + +/* Hover rides the same accent one tone darker than selection, mirroring the base picker's hover/selection pair. */ +.aspid-fasttools-reference-graph__node--picking .aspid-fasttools-type-selector + .unity-collection-view__item.aspid-fasttools-type-selector__item:hover { + --aspid-fasttools-colors-type_selector-row_bg: var(--aspid-colors-status-warning-shade-darkness); +} + +.aspid-fasttools-reference-graph__node--picking .aspid-fasttools-type-selector + .unity-collection-view__item--selected.aspid-fasttools-type-selector__item, +.aspid-fasttools-reference-graph__node--picking .aspid-fasttools-type-selector + .unity-collection-view__item--selected.aspid-fasttools-type-selector__item:hover, +.aspid-fasttools-reference-graph__node--picking .aspid-fasttools-type-selector + .unity-collection-view:focus .unity-collection-view__item--selected.aspid-fasttools-type-selector__item { + --aspid-fasttools-colors-type_selector-row_bg: var(--aspid-colors-status-warning-shade-dark); +} + +/* A migration card also wears --picking while its picker is open, so these sit after the amber cues above and + swap them back to the card's info accent. */ +.aspid-fasttools-reference-graph__node--migrate .aspid-fasttools-type-selector__header--search-focused { + border-color: var(--aspid-colors-status-info-text-light); +} + +.aspid-fasttools-reference-graph__node--migrate .aspid-fasttools-type-selector__search-button:hover { + -unity-background-image-tint-color: var(--aspid-colors-status-info-text-light); +} + +.aspid-fasttools-reference-graph__node--migrate .aspid-fasttools-type-selector__breadcrumb--link:hover { + color: var(--aspid-colors-status-info-text-lightness); +} + +.aspid-fasttools-reference-graph__node--migrate .aspid-fasttools-type-selector + .unity-collection-view__item.aspid-fasttools-type-selector__item:hover { + --aspid-fasttools-colors-type_selector-row_bg: var(--aspid-colors-status-info-shade-darkness); } -.aspid-fasttools-reference-graph__picker .unity-collection-view__item--selected, -.aspid-fasttools-reference-graph__picker .unity-collection-view__item--selected:hover { - background-color: var(--aspid-colors-status-success-dark); +.aspid-fasttools-reference-graph__node--migrate .aspid-fasttools-type-selector + .unity-collection-view__item--selected.aspid-fasttools-type-selector__item, +.aspid-fasttools-reference-graph__node--migrate .aspid-fasttools-type-selector + .unity-collection-view__item--selected.aspid-fasttools-type-selector__item:hover, +.aspid-fasttools-reference-graph__node--migrate .aspid-fasttools-type-selector + .unity-collection-view:focus .unity-collection-view__item--selected.aspid-fasttools-type-selector__item { + --aspid-fasttools-colors-type_selector-row_bg: var(--aspid-colors-status-info-shade-dark); } diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-ExcludedFolders.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-ExcludedFolders.uss index 310e7b5e..35e5a95b 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-ExcludedFolders.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-ExcludedFolders.uss @@ -1,73 +1,98 @@ /* --- Excluded scan folders list --- - Replaces the multiline "one path per line" TextField with a compact add/remove list. The whole control is a - translucent dark panel (the window's dotted canvas reads through it): folder rows stack over a single add row whose - "+" is pinned to the right edge; while empty the add row carries a dim "No excluded folders" hint instead. Self- - styled from the Aspid palette so it reads the same on the in-window Settings tab and the bare Project Settings page. */ - -/* The panel: a translucent dark surface framed like the other settings inputs, sized to its content (the folder rows - plus the one add row) rather than a tall fixed box. No inner padding, so the zebra entries fill the frame edge to - edge; overflow:hidden clips their square corners to the panel's rounded frame. */ + Replaces the multiline "one path per line" TextField with a compact add/remove list. A flat member of its settings + section card — no frame or fill of its own (the old panel read as a box-in-box inside the glass card): a header row + (caption + dim status hint + a "+" pinned right) over one indented flat row per excluded folder. The header is the + add target and washes green on hover; folder rows lift neutrally and wash red over their ✕ (delete intent). Self- + styled from the Aspid palette so it reads the same on the in-window Settings tab and the Preferences page; on the + branded surfaces the settings sheet adds the storage-scope stripe down the whole control's left edge. */ .aspid-fasttools-excluded-folders { - padding: 0; - overflow: hidden; - border-width: 1px; + margin-bottom: 2px; +} + +/* The header row — the flat action-row idiom (the settings rows' geometry): caption left, dim hint and the "+" glyph + pinned right. The whole row is the add click target; its add state (--add, code-toggled so the keyboard ring can + mirror it) lifts the row with the same neutral fill as every other settings row — the green add intent lives on + the "+" glyph alone. */ +.aspid-fasttools-excluded-folders__header { + /* Starts 9px in — past the control's scope stripe (3px at the root's edge) plus 6px of clear air — so the + header's lit fill never touches the line; matches the settings rows' backplate inset. */ + margin-left: 9px; + flex-direction: row; + align-items: center; + min-height: 26px; + padding: 2px 4px 2px 8px; border-radius: 8px; - border-color: var(--aspid-colors-shade-dark); - background-color: rgba(20, 20, 20, 0.55); + transition-property: background-color; + transition-duration: 0.25s; + transition-timing-function: ease-out; +} + +.aspid-fasttools-excluded-folders__header--add { + background-color: var(--aspid-colors-bg-dark); } -/* The panel's own header, pulled inside the frame so the caption rides with the list instead of floating above it. A - bold light caption over a hairline divider so it reads as the panel title rather than another list row; its left - inset lines up with the folder paths below. A fixed band height plus middle-left alignment centres the caption - vertically, so the gap above the text matches the gap below it (relying on padding alone leaves the text top-aligned - in its line box and the divider drifts low). */ -.aspid-fasttools-excluded-folders__title { - height: 24px; - padding: 0 6px; +/* The caption mirrors the settings rows' captions (same tone, filling the row so the hint and "+" pin right). */ +.aspid-fasttools-excluded-folders__header-caption { + flex-grow: 1; color: var(--aspid-colors-text-light); - -unity-font-style: bold; -unity-text-align: middle-left; - border-bottom-width: 1px; - border-bottom-color: var(--aspid-colors-shade-darkness); } -/* Every list entry — each folder row and the persistent add row — is the same shell: a flat full-width element with a - min-height so short and tall entries line up and a left inset matching the header caption. Entries sit flush (no - margin / radius) so their alternating light / dark wash (zebra, applied per-index in code) fills the panel edge to - edge as one continuous stripe block over the dotted canvas. */ -.aspid-fasttools-excluded-folders__entry { - flex-direction: row; - align-items: center; - min-height: 24px; - padding: 2px 6px; +/* Dim status hint beside the "+" while no folder is excluded; empty otherwise. */ +.aspid-fasttools-excluded-folders__hint { + margin-right: 6px; + color: var(--aspid-colors-text-darkness); + -unity-text-align: middle-right; } -.aspid-fasttools-excluded-folders__entry--even { - background-color: rgba(255, 255, 255, 0.05); +/* The "+" add glyph, pinned to the right of the header row: a small flat square that leads the row's green wash. */ +.aspid-fasttools-excluded-folders__add { + flex-shrink: 0; + width: 18px; + height: 18px; + margin: 0 2px 0 4px; + padding: 0; + border-width: 0; + border-radius: 3px; + background-color: rgba(0, 0, 0, 0); + color: var(--aspid-colors-text-light); + font-size: 16px; + -unity-text-align: middle-center; } -.aspid-fasttools-excluded-folders__entry--odd { - background-color: rgba(0, 0, 0, 0.18); +/* While the header is in its add state (hovered or keyboard-focused), the "+" brightens to the signature green so + the glyph leads the green wash. */ +.aspid-fasttools-excluded-folders__header--add .aspid-fasttools-excluded-folders__add { + color: var(--aspid-colors-status-success-text-light); } -/* Full-row hover tints, toggled from code (USS can't repaint a row from a child's hover state). Exactly one is ever - set at a time, so single-class selectors suffice — no specificity juggling against a :hover. Neutral lift signals a - folder row is editable; the whole row turns red when its ✕ is hovered (delete intent) and green over the add row - (add intent). */ -.aspid-fasttools-excluded-folders__entry--hover { - background-color: var(--aspid-colors-bg-lightness); +/* Each folder row: a flat indented member under the header (the indent tucks the paths under the caption), the same + radius and 0.25s hover beat as the settings rows. The full-row tints are toggled from code (USS can't repaint a row + from a child's hover state); exactly one is ever set at a time. Neutral lift signals the row is editable; the row + washes red while its ✕ is hovered (delete intent) — the quarter-alpha wash of the settings danger hovers. */ +.aspid-fasttools-excluded-folders__entry { + /* The same 9px stripe inset as the header, so a lit folder row stays clear of the line too. */ + margin-left: 9px; + flex-direction: row; + align-items: center; + min-height: 22px; + padding: 2px 4px 2px 20px; + border-radius: 8px; + transition-property: background-color; + transition-duration: 0.25s; + transition-timing-function: ease-out; } -.aspid-fasttools-excluded-folders__entry--danger { - background-color: var(--aspid-colors-status-error-dark); +.aspid-fasttools-excluded-folders__entry--hover { + background-color: var(--aspid-colors-bg-dark); } -.aspid-fasttools-excluded-folders__entry--add { - background-color: var(--aspid-colors-status-success-dark); +.aspid-fasttools-excluded-folders__entry--danger { + background-color: rgba(125, 35, 35, 0.25); } -/* min-width:0 lets a long path shrink and ellipsize instead of shoving the remove button off the row; stretching it to - the full row height (with the text kept vertically centred) makes the whole left of the row a click target for +/* min-width:0 lets a long path shrink and ellipsize instead of shoving the remove button off the row; stretching it + to the full row height (with the text kept vertically centred) makes the whole left of the row a click target for editing, with no dead band above or below the caption. */ .aspid-fasttools-excluded-folders__path { flex-grow: 1; @@ -81,8 +106,8 @@ -unity-text-align: middle-left; } -/* The ✕ remove: a small flat square, dim at rest; it brightens to the error tone while its row is in the delete state - (see the --danger descendant rule below). */ +/* The ✕ remove: a small flat square, dim at rest; it brightens to the error tone while its row is in the delete + state (see the --danger descendant rule below). */ .aspid-fasttools-excluded-folders__remove { flex-shrink: 0; width: 18px; @@ -103,38 +128,3 @@ background-color: var(--aspid-colors-status-error-light); color: var(--aspid-colors-status-error-text-light); } - -/* Dim hint shown in the add row while no folder is excluded; it grows to fill the row left of the "+". */ -.aspid-fasttools-excluded-folders__hint { - flex-grow: 1; - color: var(--aspid-colors-text-darkness); - -unity-text-align: middle-center; -} - -/* The "+" add button, pinned to the right of the add row: a small flat square (just the plus glyph) that picks up the - signature green on hover. Same box size and right margin as the ✕ remove so the "+" lines up directly under the - column of remove crosses above it. */ -.aspid-fasttools-excluded-folders__add { - flex-shrink: 0; - width: 18px; - height: 18px; - margin: 0 2px 0 4px; - padding: 0; - border-width: 0; - border-radius: 3px; - background-color: rgba(0, 0, 0, 0); - color: var(--aspid-colors-text-light); - font-size: 16px; - -unity-text-align: middle-center; -} - -/* Hovering the "+" directly boxes it in a brighter green than the row wash — the add-side mirror of the ✕'s red box. */ -.aspid-fasttools-excluded-folders__add:hover { - background-color: var(--aspid-colors-status-success-light); -} - -/* While the add row is in its add state (hovered anywhere), the "+" brightens to the signature green so the glyph leads - the row's green wash. */ -.aspid-fasttools-excluded-folders__entry--add .aspid-fasttools-excluded-folders__add { - color: var(--aspid-colors-status-success-text-light); -} diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss index 486e62c3..407c976e 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss @@ -71,15 +71,15 @@ Button.aspid-fasttools-serialize-reference-window__toolbar-button--active:hover /* Underline accent: a 2px child bar pinned to the tab's bottom edge. Toggling a child's background-color via the parent's --active class repaints reliably, whereas flipping a border-bottom-color did not redraw until the next - relayout (the underline only appeared after a window resize). A grey baseline marks every (inactive) tab; the - active tab swaps it for the signature green. */ + relayout (the underline only appeared after a window resize). Inactive tabs keep only a near-invisible + baseline (the card-border tone) so the active tab's signature green owns the hierarchy. */ .aspid-fasttools-serialize-reference-window__tab-underline { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; - background-color: var(--aspid-colors-shade-light); + background-color: var(--aspid-colors-shade-darkness); } Button.aspid-fasttools-serialize-reference-window__toolbar-button--active .aspid-fasttools-serialize-reference-window__tab-underline { @@ -147,3 +147,57 @@ Button.aspid-fasttools-serialize-reference-window__toolbar-button--square:hover Button.aspid-fasttools-serialize-reference-window__toolbar-button--square.aspid-fasttools-serialize-reference-window__toolbar-button--active .aspid-fasttools-serialize-reference-window__tab-icon { -unity-background-image-tint-color: var(--aspid-colors-status-success-text-light); } + +/* --- Scrollbar --- + Every vertical scroller in the window re-dressed from Unity's bright default into the window's quiet family: no + step buttons, no track — just a slim translucent thumb that brightens while the scroller is hovered. The settings + sheet mirrors these rules for the Preferences page, which lives outside this window. Scoped to the scroller so no + real slider (a base-slider too) is touched. */ +.aspid-fasttools-serialize-reference-window .unity-scroller--vertical { + width: 12px; + margin: 0; + border-width: 0; + background-color: rgba(0, 0, 0, 0); +} + +.aspid-fasttools-serialize-reference-window .unity-scroller--vertical > .unity-scroller__low-button, +.aspid-fasttools-serialize-reference-window .unity-scroller--vertical > .unity-scroller__high-button { + display: none; +} + +/* With the step buttons gone, the slider re-pins to the scroller's full height (the default offsets reserve room + for them). */ +.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-scroller__slider { + margin: 0; + padding: 0; + width: 12px; + min-width: 12px; + top: 0; + bottom: 0; +} + +.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-base-slider__tracker { + border-width: 0; + background-color: rgba(0, 0, 0, 0); +} + +/* The thumb: slim, rounded, translucent white so it reads over both the bare canvas and the glass cards; hover + brightens it on the shared 0.25s beat. The default focus halo is dropped with the rest of the chrome. */ +.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-base-slider__dragger { + left: 3px; + width: 6px; + border-width: 0; + border-radius: 3px; + background-color: rgba(255, 255, 255, 0.12); + transition-property: background-color; + transition-duration: 0.25s; + transition-timing-function: ease-out; +} + +.aspid-fasttools-serialize-reference-window .unity-scroller--vertical:hover .unity-base-slider__dragger { + background-color: rgba(255, 255, 255, 0.28); +} + +.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-base-slider__dragger-border { + display: none; +} diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference.uss index 24f9438c..0006513a 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference.uss @@ -368,6 +368,45 @@ white-space: normal; } +/* Accent legend under the hint — decodes the two card tones (amber = broken/required, blue = pending migration). + Rendered only when both bands are on screen at once (see RenderGroups), so an all-amber or all-blue result list + never carries a key explaining a color it doesn't show. Tucked into the hint's 10px gap: its own 10px bottom + margin replaces the spacing to the cards below. */ +.aspid-fasttools-repair-references__legend { + flex-direction: row; + align-items: center; + margin-top: -4px; + margin-bottom: 10px; +} + +.aspid-fasttools-repair-references__legend--hidden { + display: none; +} + +.aspid-fasttools-repair-references__legend-item { + flex-direction: row; + align-items: center; + margin-right: 16px; +} + +/* Same 6px dot idiom as the Welcome sample-state markers; the muted -text-dark swatches match the header sweeps + rather than the bright title text, keeping the key quieter than the cards it explains. */ +.aspid-fasttools-repair-references__legend-dot { + width: 6px; + height: 6px; + border-radius: 3px; + margin-right: 6px; + background-color: var(--aspid-colors-status-warning-text-dark); +} + +.aspid-fasttools-repair-references__legend-dot--info { + background-color: var(--aspid-colors-status-info-text-dark); +} + +.aspid-fasttools-repair-references__legend-text { + color: var(--aspid-colors-text-dark); +} + /* One receipt per bulk Fix all, stacked in the summary list (newest at the bottom); the margin both spaces stacked receipts apart and holds the gap from the last one to the group list / empty area below. The list container itself has no styling — empty until the first fix, so it leaves no footprint then. */ @@ -496,7 +535,8 @@ full-bleed it reads as a square strip welded across the rounded card. Pull it level with the header pill and list panel instead: a rounded plate at the same 8px radius, inset to the list's width with a 5px gap above (the selector's own 5px bottom padding holds the matching gap below) and no top divider — so header, list and footer read as one - rounded stack rather than a bar pasted onto the bottom edge. The base footer's opaque dark fill is kept. */ + rounded stack rather than a bar pasted onto the bottom edge. The base footer's opaque dark fill is kept: a + frame-only variant read too faint, an accent-tinted fill fought the list's accent states. */ .aspid-fasttools-repair-references__picker--attached .aspid-fasttools-type-selector__footer { margin: 5px 0 0 0; @@ -504,11 +544,11 @@ border-radius: 8px; } -.aspid-fasttools-type-selector - .unity-collection-view__item.aspid-fasttools-type-selector__item { +/* The rows' visual body (the fill-carrying content wrapper inside each transparent row shell) rounds and insets + to match the window's card idiom. */ +.aspid-fasttools-type-selector .aspid-fasttools-type-selector__item-content { border-radius: 8px; padding-left: 8px; - margin-bottom: 2px; } /* --- Project-mode group cards --- @@ -517,7 +557,8 @@ darkness fill and its 10px --rounded). The warning read comes from the amber type header and the amber-tinted dotted canvas behind it, not a warm border — so the cards belong to the same family as the Scan panel above them. Layout: the whole header is one flat clickable row (the type name + entry/file counts on the left, the bulk - "Fix all (N) ▼" action on the right), an optional Smart Fix button below it, then a list of ping-only entry rows. */ + "Fix all (N) ▼" action on the right), a dim divider carrying the hover sweep, an optional Smart Fix / Migrate + action row, then a list of ping-only entry rows. */ .aspid-fasttools-repair-references__group.aspid-fasttools-background { flex-grow: 0; margin-bottom: 10px; @@ -536,6 +577,77 @@ /*background-color: rgba(20, 20, 20, 0.72);*/ } +/* A migration card's active frame follows its own header accent — the calm info blue, not the broken-card amber. */ +.aspid-fasttools-repair-references__group--migrate.aspid-fasttools-repair-references__group--picking.aspid-fasttools-background { + border-color: var(--aspid-colors-status-info-shade-light); +} + +/* The picker chrome follows the host card's header accent too, so the whole active card speaks one hue: the + focused-search frame (no fill — just the border) and the keyboard-selected row go warning amber on a broken-type + card, and the --migrate rules below swap both to the migration card's calm info tone (the picker's own default). + Selection is recoloured via the picker's row_bg VARIABLE, never background-color: the divider row routes its + fill through an inset backplate that reads that variable, so painting the property directly would flood its + divider zone again. The rules carry the .aspid-fasttools-type-selector block class (and a :focus variant) + purely for specificity over the base stylesheet's own variable-setting selection rule, which loads deeper in + the hierarchy and would otherwise win the tie and keep the picker's default info blue. */ +.aspid-fasttools-repair-references__group--picking .aspid-fasttools-type-selector__header--search-focused { + border-color: var(--aspid-colors-status-warning-text-light); +} + +/* The header's hover cues (the magnifier, the navigable breadcrumbs) light up in the card's accent too, instead + of the picker's default info blue. */ +.aspid-fasttools-repair-references__group--picking .aspid-fasttools-type-selector__search-button:hover { + -unity-background-image-tint-color: var(--aspid-colors-status-warning-text-light); +} + +.aspid-fasttools-repair-references__group--picking .aspid-fasttools-type-selector__breadcrumb--link:hover { + color: var(--aspid-colors-status-warning-text-lightness); +} +/* Hover rides the same accent one tone darker than selection, mirroring the base picker's hover/selection pair. + The extra __item compound (the class sits on the same shell) pushes each rule above every base-stylesheet + state rule; within the host, hover stays before the selected rules so a hovered selected row keeps the + stronger selection tone. */ +.aspid-fasttools-repair-references__group--picking .aspid-fasttools-type-selector + .unity-collection-view__item.aspid-fasttools-type-selector__item:hover { + --aspid-fasttools-colors-type_selector-row_bg: var(--aspid-colors-status-warning-shade-darkness); +} + +.aspid-fasttools-repair-references__group--picking .aspid-fasttools-type-selector + .unity-collection-view__item--selected.aspid-fasttools-type-selector__item, +.aspid-fasttools-repair-references__group--picking .aspid-fasttools-type-selector + .unity-collection-view__item--selected.aspid-fasttools-type-selector__item:hover, +.aspid-fasttools-repair-references__group--picking .aspid-fasttools-type-selector + .unity-collection-view:focus .unity-collection-view__item--selected.aspid-fasttools-type-selector__item { + --aspid-fasttools-colors-type_selector-row_bg: var(--aspid-colors-status-warning-shade-dark); +} + +.aspid-fasttools-repair-references__group--migrate .aspid-fasttools-type-selector__header--search-focused { + border-color: var(--aspid-colors-status-info-text-light); +} + +/* A migration card also wears --picking while its picker is open, so these sit after the amber hover cues above + and swap them back to the card's info accent. */ +.aspid-fasttools-repair-references__group--migrate .aspid-fasttools-type-selector__search-button:hover { + -unity-background-image-tint-color: var(--aspid-colors-status-info-text-light); +} + +.aspid-fasttools-repair-references__group--migrate .aspid-fasttools-type-selector__breadcrumb--link:hover { + color: var(--aspid-colors-status-info-text-lightness); +} +.aspid-fasttools-repair-references__group--migrate .aspid-fasttools-type-selector + .unity-collection-view__item.aspid-fasttools-type-selector__item:hover { + --aspid-fasttools-colors-type_selector-row_bg: var(--aspid-colors-status-info-shade-darkness); +} + +.aspid-fasttools-repair-references__group--migrate .aspid-fasttools-type-selector + .unity-collection-view__item--selected.aspid-fasttools-type-selector__item, +.aspid-fasttools-repair-references__group--migrate .aspid-fasttools-type-selector + .unity-collection-view__item--selected.aspid-fasttools-type-selector__item:hover, +.aspid-fasttools-repair-references__group--migrate .aspid-fasttools-type-selector + .unity-collection-view:focus .unity-collection-view__item--selected.aspid-fasttools-type-selector__item { + --aspid-fasttools-colors-type_selector-row_bg: var(--aspid-colors-status-info-shade-dark); +} + /* The header IS one clickable row, but flat — the gradient fill is set transparent so it matches the card surface instead of reading as a pill. Its info line (type name + count) hugs the left and the "Fix all (N) ▼" action label pins to the right. Horizontal padding matches the entry rows below (4px) so the type name lines up with the entry @@ -580,6 +692,50 @@ ); } +/* --- Header divider + underline sweep --- + The Welcome sample cards' idiom carried over: a dim hairline separates the header row from the card body, and an + accent sweep riding exactly ON that line scales in from the left while the header button is hovered. The sweep is + the button's sibling, so :hover can't reach it — code mirrors the button's hover onto the card's --header-hover + modifier, which the sweep rule listens to. */ +/* Pulled 2px into the Fix all row's 6px bottom margin, so the header-to-line gap lands on Welcome's 4px. */ +.aspid-fasttools-repair-references__group-divider { + flex-grow: 0; + margin-top: -2px; + margin-bottom: 4px; + opacity: 0.5; +} + +/* Pulled up past the divider's 4px bottom margin plus its 1px line so the sweep sits exactly ON the line; the 4px + bottom margin gives the swallowed gap back, keeping the body rhythm intact. Amber — the broken-type alarm, + matching the header's hover accent. */ +.aspid-fasttools-repair-references__group-sweep { + height: 1px; + margin-top: -5px; + margin-bottom: 4px; + background-color: var(--aspid-colors-status-warning-text-dark); + transform-origin: left; + scale: 0 1; + transition-property: scale; + transition-duration: 0.25s; + transition-timing-function: ease-out; +} + +/* A migration card sweeps in its calm info tone — nothing on it is broken (matches its header/migrate accents). */ +.aspid-fasttools-repair-references__group-sweep--migrate { + background-color: var(--aspid-colors-status-info-text-dark); +} + +.aspid-fasttools-repair-references__group--header-hover .aspid-fasttools-repair-references__group-sweep { + scale: 1 1; +} + +/* Picker open: the dropdown is inserted between the header and the divider, which would strand the line and its + sweep under the whole selector — drop both while the card is picking. */ +.aspid-fasttools-repair-references__group--picking .aspid-fasttools-repair-references__group-divider, +.aspid-fasttools-repair-references__group--picking .aspid-fasttools-repair-references__group-sweep { + display: none; +} + /* The info line: the broken type name with the dimmed count beside it, hugging the left of the header row. */ .aspid-fasttools-repair-references__group-header-row { flex-direction: row; @@ -605,63 +761,67 @@ -unity-font-style: normal; } -/* Smart Fix quick-apply: a success-tinted one-click suggestion, full-width below the header button. */ -.aspid-fasttools-repair-references__group-suggest { - margin-bottom: 8px; - --aspid-fasttools-colors-gradient_button-bg: var( - --aspid-colors-status-success-darkness - ); - --aspid-fasttools-colors-gradient_button-accent: var( - --aspid-colors-status-success-text-light - ); +/* Smart Fix / Migrate all as a member of the entry-row family: a bold, left-aligned accent verb over the same + flat hover fill as the ping rows below it, instead of a filled gradient pill floating over the glass card. + Each card keeps ONE accent: the Smart Fix verb stays in the broken card's warning amber (matching the inspector + notice's amber suggestion), and the --info modifier swaps in the migration card's calm info tone — an + authoritative [MovedFrom] rename is a pending migration, not an alarm (and never an error: nothing is actually + broken for Unity). Text lightens with the fill on hover, both on the shared 0.25s ease-out beat. */ +.aspid-fasttools-repair-references__group-action { + padding: 2px 4px; + border-radius: 3px; + cursor: link; + -unity-font-style: bold; + color: var(--aspid-colors-status-warning-text-dark); + transition-property: background-color, color; + transition-duration: 0.25s; + transition-timing-function: ease-out; } -.aspid-fasttools-repair-references__group-suggest - .aspid-fasttools-gradient-button__label { - -unity-text-align: middle-center; +.aspid-fasttools-repair-references__group-action:hover { + background-color: var(--aspid-colors-bg-dark); + color: var(--aspid-colors-status-warning-text-light); } -/* [MovedFrom] bulk migrate: same one-click slot as Smart Fix, but info-tinted — an authoritative rename is a calm - pending migration, not a success-coloured guess (and never an error: nothing is actually broken for Unity). */ -.aspid-fasttools-repair-references__group-migrate { - margin-bottom: 8px; - --aspid-fasttools-colors-gradient_button-bg: var( - --aspid-colors-status-info-dark - ); - --aspid-fasttools-colors-gradient_button-accent: var( - --aspid-colors-status-info-text-light - ); +.aspid-fasttools-repair-references__group-action--info { + color: var(--aspid-colors-status-info-text-dark); } -.aspid-fasttools-repair-references__group-migrate - .aspid-fasttools-gradient-button__label { - -unity-text-align: middle-center; +.aspid-fasttools-repair-references__group-action--info:hover { + color: var(--aspid-colors-status-info-text-light); } -/* A single broken reference inside a group: asset path on the left, dim rid on the right; the whole row pings. The - path wraps to as many lines as it needs while the rid stays pinned to the right, so align-items sits at the top to - anchor the rid to the path's first line rather than floating it against the middle of a multi-line block. */ +/* A single broken reference inside a group: asset path on the left, dim rid on the right; the whole row pings. + The path is start-elided to one line (see __group-entry-path), so the row is always single-line. */ .aspid-fasttools-repair-references__group-entry { flex-direction: row; - align-items: flex-start; + align-items: center; padding: 2px 4px; border-radius: 3px; cursor: link; + /* The hover fill fades in and out on the window's shared 0.25s ease-out beat instead of snapping. */ + transition-property: background-color; + transition-duration: 0.25s; + transition-timing-function: ease-out; } .aspid-fasttools-repair-references__group-entry:hover { background-color: var(--aspid-colors-bg-dark); } -/* min-width:0 lets the path shrink below its content's intrinsic width so a long path wraps to multiple lines within - the row instead of overrunning it and shoving the rid off the right edge (default min-width:auto would refuse to - shrink). white-space:normal does the wrapping; the rid keeps its full width beside it. */ +/* min-width:0 lets the path shrink below its content's intrinsic width (default min-width:auto would refuse), and a + long path stays on one line: the START is elided so the filename — the part that identifies the asset — survives + the cut. The full path lives in the tooltip and in selection-copy. */ .aspid-fasttools-repair-references__group-entry-path { flex-grow: 1; flex-shrink: 1; min-width: 0; color: var(--aspid-colors-text-light); - white-space: normal; + overflow: hidden; + text-overflow: ellipsis; + -unity-text-overflow-position: start; + /* Entry text is selectable for copying (paths are the payload); the I-beam signals that over the row's link cursor. */ + cursor: text; } /* flex-shrink:0 keeps the rid at its natural width and pinned to the right however many lines the path wraps to. */ @@ -670,6 +830,7 @@ margin-left: 10px; color: var(--aspid-colors-text-dark); -unity-text-align: middle-right; + cursor: text; } /* A required-violation row's "Component.field" column — same dim, right-pinned treatment as __group-entry-rid, one @@ -679,6 +840,28 @@ margin-left: 10px; color: var(--aspid-colors-text-dark); -unity-text-align: middle-right; + cursor: text; +} + +/* --- Keyboard navigation --- + Arrow keys walk one flat focus ring over every actionable element in the audit (Rescan, each card's Fix all, + Smart Fix / Migrate rows, entry rows); Enter activates the highlighted one, Escape drops the highlight. The + highlight mirrors each element's own hover treatment so keyboard focus and mouse hover read as one state: + rows take the flat hover fill from the class below; the gradient-button ring members (Rescan, Fix all) never + carry the focused class at all — their hover is painted in code, and SetNavFocus drives it through + AspidGradientButton.Highlighted (the same accent overlay + label tint as a real mouse hover), because this + flat fill would show through their fading gradient as a gray pill. */ +.aspid-fasttools-repair-references__nav-target--focused { + background-color: var(--aspid-colors-bg-dark); +} + +/* The action rows also lighten their accent text on hover — mirror that for the keyboard highlight too. */ +.aspid-fasttools-repair-references__group-action.aspid-fasttools-repair-references__nav-target--focused { + color: var(--aspid-colors-status-warning-text-light); +} + +.aspid-fasttools-repair-references__group-action--info.aspid-fasttools-repair-references__nav-target--focused { + color: var(--aspid-colors-status-info-text-light); } /* A compatible MonoScript dragged over the field highlights the header as a valid drop target. */ diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Types/Aspid-FastTools-TypeSelector.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Types/Aspid-FastTools-TypeSelector.uss index e68fc131..d94a94fa 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Types/Aspid-FastTools-TypeSelector.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Types/Aspid-FastTools-TypeSelector.uss @@ -1,4 +1,8 @@ +/* row_bg: the per-row state fill (transparent at rest, hover grey, selection accent) — set by the state rules in + the Item section and painted by the row root / the divider row's backplate. Declared here so every row resolves + a value even at rest. */ .aspid-fasttools-type-selector { + --aspid-fasttools-colors-type_selector-row_bg: rgba(0, 0, 0, 0); padding: 5px 2px; flex-grow: 1; flex-direction: column; @@ -214,46 +218,87 @@ ToolbarSearchField TextElement { } /* ------------------------------------------------------ Item ------------------------------------------------------ */ -/* The padding-left is kept tight so the rows sit close to the picker's left edge. Hover lifts the surface a small grey - step; the selected row lifts to a clearly lighter neutral grey, far enough above the hover tone to read as the picked - row without leaning on a colour accent. */ +/* Each row is a transparent SHELL (the collection-view item, which doubles as the makeItem root) holding one + __item-content wrapper that carries everything visual: the horizontal layout, the tight edge padding and the + state fill. The fill is carried by the --aspid-fasttools-colors-type_selector-row_bg variable — the hover and + selected rules SET it on the shell, the content wrapper PAINTS it (hosts recolour selection by overriding the + variable, never background-color). The split exists for the divider row: the ListView owns its items' box + (DynamicHeight slots rows by measured height, ignores their margins, and interferes with their padding), so + the divider zone is made of shell height alone — the shell grows and the content wrapper, pinned to its + bottom, stays an ordinary 22px row that hover/selection light up without ever flooding the divider's air. */ .aspid-fasttools-type-selector .unity-collection-view__item { height: 22px; + padding: 0; + align-items: stretch; + justify-content: flex-end; + flex-direction: column; +} + +/* The shell never paints — these mirror every state selector Unity's default theme fills at, so the stock grey + and selection blue can't leak through the transparent shell in any hover/selected/focused combination. */ +.aspid-fasttools-type-selector .unity-collection-view__item:hover, +.aspid-fasttools-type-selector .unity-collection-view__item--selected, +.aspid-fasttools-type-selector .unity-collection-view__item--selected:hover, +.aspid-fasttools-type-selector .unity-collection-view:focus .unity-collection-view__item--selected { + background-color: rgba(0, 0, 0, 0); +} + +/* The row's visual body. The padding-left is kept tight so the rows sit close to the picker's left edge. */ +.aspid-fasttools-type-selector__item-content { + height: 22px; + flex-shrink: 0; align-items: center; flex-direction: row; padding-left: 1px; padding-right: 5px; + background-color: var(--aspid-fasttools-colors-type_selector-row_bg); } +/* Hover lifts the surface a dim step of the picker's interactive accent — the same hue as the selection fill + below, one tone darker, so hovered and selected read as two strengths of one accent instead of grey vs colour. */ .aspid-fasttools-type-selector .unity-collection-view__item:hover { - background-color: var(--aspid-colors-bg-light); + --aspid-fasttools-colors-type_selector-row_bg: var(--aspid-colors-status-info-shade-darkness); } -/* The old selected grey sat only one step above hover and washed out against it; this lifts the selected row to a - clearly lighter neutral grey so the pick stands apart from a merely-hovered row by tone alone, no colour accent - needed. */ +/* The selected row wears the picker's interactive accent (the same info blue as the focused-search frame and the + link hovers) as a dark fill, so keyboard selection reads as "active" in the picker's own hue instead of a grey + step that washed out against hover. */ .aspid-fasttools-type-selector .unity-collection-view__item--selected, -.aspid-fasttools-type-selector .unity-collection-view__item--selected:hover { - background-color: var(--aspid-colors-shade-light); +.aspid-fasttools-type-selector .unity-collection-view__item--selected:hover, +.aspid-fasttools-type-selector .unity-collection-view:focus .unity-collection-view__item--selected { + --aspid-fasttools-colors-type_selector-row_bg: var(--aspid-colors-status-info-shade-dark); } -/* The first ordinary root category after the pinned block (, Favorites, Recent) draws the divider - line that separates the pinned rows from the namespace hierarchy (toggled in code on the row root, which - doubles as the collection-view item): 1px line flush under the pinned block, 4px of air, then the usual - 22px row — the height covers exactly border + padding + content so the row grid below is undisturbed. - The wrapper class rides along in the selector to outweigh the 22px height in the base row rule above. */ +/* The first ordinary root category after the pinned block (, Favorites, Recent) carries the divider zone + as extra shell height above its bottom-pinned content: 4px of air, the 1px line, 4px of air, then the usual + 22px row. The modifier is toggled in code on the shell. */ .aspid-fasttools-type-selector .unity-collection-view__item.aspid-fasttools-type-selector__item--after-pinned { - height: 27px; - padding-top: 4px; - border-top-width: 1px; - border-top-color: var(--aspid-colors-shade-darkness); + height: 31px; +} + +/* The divider hairline: present in every row template, shown only on the row wearing --after-pinned. Absolutely + positioned in the divider zone (line at 4px: 4px of air to the pinned block above and to the content below), + so it takes no part in the row layout, ignores the content's border-radius and sits outside every fill. */ +.aspid-fasttools-type-selector__item-divider { + display: none; + position: absolute; + top: 4px; + left: 0; + right: 0; + height: 1px; + background-color: var(--aspid-colors-shade-darkness); +} + +.aspid-fasttools-type-selector__item--after-pinned > .aspid-fasttools-type-selector__item-divider { + display: flex; } +/* The block class on the shell exists for the modifier grammar (--after-pinned, --in-section, --current) and + descendant hooks; the shell's own layout lives in the collection-view__item rules above, the horizontal row + layout in __item-content. */ .aspid-fasttools-type-selector__item { flex-grow: 1; - align-items: center; - flex-direction: row; } .aspid-fasttools-type-selector__item-icon { @@ -365,8 +410,6 @@ ToolbarSearchField TextElement { the list — set apart only by its leading collapse chevron, a bold weight and a slightly dimmer caption. No caps, no shrunken font, no special fill, so the list stays visually uniform. */ .aspid-fasttools-type-selector__section-title { - align-items: center; - flex-direction: row; background-color: rgba(0, 0, 0, 0); cursor: link; } diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Aspid-FastTools-Settings.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Aspid-FastTools-Settings.uss index b046c95d..2cfbd5dc 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Aspid-FastTools-Settings.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Aspid-FastTools-Settings.uss @@ -4,57 +4,136 @@ on AspidSettingsUI, which both surfaces compose from. The per-area controls are the branded AspidSwitch and excluded-folders list (both self-styled) plus plain Unity fields — the Build / CI gate EnumField, the recents SliderInt, the theme-override ObjectField — whose native bright fills would float oddly over the dark canvas, so - this sheet repaints them into the dark palette, backs each row with a card, and stripes every row by its storage - scope. Every rule is scoped under the block class; the SerializeReference Project Settings page never adds it and - keeps its native Unity look. */ + this sheet repaints them into the dark palette, groups each package area into a glass section card of flat rows, + and stripes every row by its storage scope. Every rule is scoped under the block class; the SerializeReference + Project Settings page never adds it and keeps its native Unity look. */ .aspid-fasttools-settings { padding: 12px 12px 0 12px; flex-grow: 1; } -/* Section title — groups the tab's controls under a named heading (the first is "References"). The tab is meant to grow - more sections (TypeSelector and other package areas); each is introduced by one of these. A bold bright caption over a - hairline divider, with no side margin so its left edge and the full-width divider line up with the control cards. */ +/* --- Surface header --- + The audit tabs' results-header idiom: an underlined heading sitting on the bare canvas (no card of its own — the + line under the AspidLabel carries the header weight), a dim one-line description under it, then the scope legend. */ +.aspid-fasttools-settings__header { + margin-bottom: 12px; +} + +.aspid-fasttools-settings__header-title { + margin-bottom: 6px; +} + +.aspid-fasttools-settings__header-description { + color: var(--aspid-colors-text-dark); + white-space: normal; +} + +/* Section card — each package area (the first is "References") is one glass group card: the same translucent dark + fill, neutral hairline frame and 8px radius as the Project References group cards and the Scan panel, so the + window's dotted canvas reads through every card on every tab alike. The controls inside are flat rows, not nested + boxes. */ +.aspid-fasttools-settings__section { + margin-bottom: 10px; + padding: 8px 10px; + border-width: 1px; + border-radius: 8px; + border-color: var(--aspid-colors-shade-darkness); + background-color: rgba(20, 20, 20, 0.55); +} + +/* Section title — the card's static header row: a bold bright caption whose 4px side padding lines it up with the + flat rows' content below (the group cards' static-header geometry). The dividing line under it is its own element + (__section-divider), not a border. */ .aspid-fasttools-settings__section-title { - margin-top: 2px; - margin-bottom: 8px; - padding-bottom: 5px; + padding: 4px 4px; + margin-bottom: 6px; font-size: 13px; color: var(--aspid-colors-text-lightness); -unity-font-style: bold; - border-bottom-width: 1px; - border-bottom-color: var(--aspid-colors-shade-dark); } -/* Section body — wraps one section's controls; the bottom margin spaces it from the next section's title. */ -.aspid-fasttools-settings__section-content { - margin-bottom: 10px; +/* The dim hairline between the card's header and its rows — the group cards' header-divider geometry (pulled 2px + into the title's 6px bottom margin so the header-to-line gap lands on the shared 4px). No sweep rides it: a + settings header is static, there is nothing to hover. */ +.aspid-fasttools-settings__section-divider { + flex-grow: 0; + margin-top: -2px; + margin-bottom: 4px; + opacity: 0.5; } -/* Each control row (caption + switch / dropdown / slider — plus the custom __row cards for non-field rows like the - clear-saved-lists actions) gets a faint rounded backing so the eye can trace a wide row from its caption on the left - to its control pinned on the right; the inset keeps the content off the row's edges and the margin spaces the rows - apart. Hover lifts the row a touch more. Only a section's direct children are cards — a field nested inside another - control (the slider's inline value box is itself a TextField, i.e. a .unity-base-field) must not pick up the card - chrome. */ +/* The section body (__section-content) is a bare hook with no rules of its own — the card's padding and the title's + margin carry the spacing; it exists so the row selectors below can scope to a section's direct children. */ + +/* Each control row (caption + switch / dropdown / slider — plus the custom __row rows like the clear-saved-lists + actions) is a flat member of its section card — no box of its own, just the scope stripe on its left edge and a + flat hover fill (the entry-row idiom of the other tabs) so the eye can trace a wide row from its caption to its + control pinned on the right. Only a section's direct children are rows — a field nested inside another control + (the slider's inline value box is itself a TextField, i.e. a .unity-base-field) must not pick up the row chrome. */ .aspid-fasttools-settings__section-content > .unity-base-field, .aspid-fasttools-settings__row { margin-left: 0; margin-right: 0; - margin-bottom: 4px; - padding: 4px 4px 4px 8px; - border-width: 1px; - border-radius: 8px; - border-color: var(--aspid-colors-shade-darkness); - background-color: rgba(20, 20, 20, 0.55); + margin-bottom: 2px; + /* The 17px left inset = 3px stripe + 6px clear air + the backplate's 8px content inset, so captions sit 8px + inside the fill edge like any card content. */ + padding: 4px 4px 4px 17px; /* Centre every row's caption against its control so the captions sit at one height across all rows. The switches already centre via inline styles; this brings the EnumField row (which has none) onto the same baseline. */ align-items: center; } -.aspid-fasttools-settings__section-content > .unity-base-field:hover, -.aspid-fasttools-settings__row:hover { - background-color: rgba(255, 255, 255, 0.14); +/* The backplate carrying a scoped row's hover / keyboard-focus fill (mounted by WithScopeStripe behind the row's + content): inset 9px past the stripe so a lit row never touches the line, rounded at the cards' full 8px. The fill + cannot live on the row itself — its box starts at the stripe — and the stripe cannot move out into a margin + gutter: some field types (AspidSwitch, EnumField) clip children to their bounds. */ +.aspid-fasttools-settings__row-backplate { + position: absolute; + left: 9px; + right: 0; + top: 0; + bottom: 0; + border-radius: 8px; + /* The hover lift fades in and out on the window's shared 0.25s ease-out beat instead of snapping. */ + transition-property: background-color; + transition-duration: 0.25s; + transition-timing-function: ease-out; +} + +.aspid-fasttools-settings__section-content > .unity-base-field:hover > .aspid-fasttools-settings__row-backplate, +.aspid-fasttools-settings__row:hover > .aspid-fasttools-settings__row-backplate { + background-color: var(--aspid-colors-bg-dark); +} + +/* The footer's reset row has no scope stripe (its two buttons act on different scopes), so no backplate is mounted — + its hover fill stays on the row itself — and the rows' 17px stripe gutter collapses away: the -4px margin cancels + the 4px text padding, landing the caption exactly on the header/card left grid while the hover fill keeps 4px of + air around the text. */ +.aspid-fasttools-settings__footer .aspid-fasttools-settings__row { + margin-left: -4px; + padding-left: 4px; + border-radius: 8px; + transition-property: background-color; + transition-duration: 0.25s; + transition-timing-function: ease-out; +} + +.aspid-fasttools-settings__footer .aspid-fasttools-settings__row:hover { + background-color: var(--aspid-colors-bg-dark); +} + +/* A row note — one dim line under a row surfacing what its tooltip would otherwise hide (the gate values' meaning, + what a team-wide toggle really does). The left padding lands the text on the rows' caption edge (3px scope stripe + + 8px inset); the negative top margin tucks it under its row, and the bottom margin re-opens the rhythm to the + next row. */ +.aspid-fasttools-settings__row-note { + margin-top: -1px; + margin-bottom: 6px; + /* 17px = the rows' 9px stripe gutter + their 8px content inset, so the note sits on its row's caption edge. */ + padding-left: 17px; + font-size: 11px; + color: var(--aspid-colors-text-dark); + white-space: normal; } /* Custom (non-BaseField) rows lay out like the field rows: caption left, controls pinned right. */ @@ -74,24 +153,39 @@ /* --- Storage-scope marking --- The tab mixes settings persisted in the committed ProjectSettings asset (team-wide) with per-user EditorPrefs ones, so every row wears a scope stripe on its left edge: green = shared with the team, blue = just this machine. The - utility classes are applied by the section builders; the stripes only paint inside this window — the Project - Settings page never loads this sheet. The legend at the top of the tab decodes the two colours. */ -.aspid-fasttools-settings .aspid-fasttools-settings-scope--shared { - border-left-width: 3px; - border-left-color: var(--aspid-colors-status-success-lightness); + stripe is a separate element mounted by WithScopeStripe — not a border-left, which would bend around the row's + corner radius — absolutely pinned to the row's left edge with a small vertical inset, so it stays a straight line + whatever the row's rounding, and the rows' left padding keeps a clear gap between the line and the content. The + scope utility classes are applied by the section builders; the stripes only paint inside this window — the Project + Settings page never loads this sheet. The legend in the surface header decodes the two colours. */ +.aspid-fasttools-settings__scope-stripe { + position: absolute; + /* Pinned inside the row's box (some field types clip children to their bounds, so it cannot hang outside); + the fill-carrying backplate starts 9px in, leaving 6px of clear air between the line and a lit row. */ + left: 0; + top: 3px; + bottom: 3px; + width: 3px; + border-radius: 1px; +} + +.aspid-fasttools-settings__scope-stripe.aspid-fasttools-settings-scope--shared { + background-color: var(--aspid-colors-status-success-lightness); } -.aspid-fasttools-settings .aspid-fasttools-settings-scope--user { - border-left-width: 3px; - border-left-color: var(--aspid-colors-status-info-lightness); +.aspid-fasttools-settings__scope-stripe.aspid-fasttools-settings-scope--user { + background-color: var(--aspid-colors-status-info-lightness); } -/* The scope legend: one dim line above the sections pairing each stripe colour with what it means for persistence. - Items flow in a row and wrap on narrow windows. */ +/* The scope legend: one dim line pairing each stripe colour with what it means for persistence. Lives in the surface + header, under the description — the reader meets the key before the first striped row. The 6px-dot idiom of the + window's other legends (the audit's amber/blue key, the Welcome sample markers), so every legend in the window + reads as one family. Items flow in a row and wrap on narrow windows. */ .aspid-fasttools-settings__legend { flex-direction: row; flex-wrap: wrap; - margin-bottom: 8px; + /* The 1px left margin optically lands the dots on the header text edge (the text has no side padding). */ + margin: 6px 0 0 1px; } .aspid-fasttools-settings__legend-item { @@ -100,13 +194,21 @@ margin-right: 16px; } -/* Each legend swatch is a miniature of the rows' left stripe (same width, painted by the same scope class via - border-left) so the key and the marking read as one system. */ +/* Each legend dot is painted by the same scope class the rows' stripes wear (the fill rules below), so the key and + the marking stay one system. */ .aspid-fasttools-settings__legend-swatch { - width: 0; - height: 12px; + width: 6px; + height: 6px; margin-right: 6px; - border-radius: 1px; + border-radius: 3px; +} + +.aspid-fasttools-settings__legend-swatch.aspid-fasttools-settings-scope--shared { + background-color: var(--aspid-colors-status-success-lightness); +} + +.aspid-fasttools-settings__legend-swatch.aspid-fasttools-settings-scope--user { + background-color: var(--aspid-colors-status-info-lightness); } .aspid-fasttools-settings__legend-text { @@ -126,6 +228,10 @@ border-color: var(--aspid-colors-shade-dark); border-radius: 8px; color: var(--aspid-colors-text-light); + /* The status wash (fill, frame and text together) fades on the same 0.25s ease-out beat as the row cards. */ + transition-property: background-color, border-color, color; + transition-duration: 0.25s; + transition-timing-function: ease-out; } .aspid-fasttools-settings__action:hover { @@ -165,14 +271,18 @@ /* --- Recent-items slider --- The SliderInt row joins the family: caption and control split 50/50 like the EnumField row, a slim dark track with - a muted round handle (the switch handle's palette), and the drag-value text box framed like the other inputs. */ -.aspid-fasttools-settings .unity-base-slider .unity-base-field__label { + a muted round handle (the switch handle's palette), and the drag-value text box framed like the other inputs. + Every slider rule is scoped under __section-content — NOT the surface root — because a ScrollView's scrollbar is + internally a .unity-base-slider too: root-scoped rules would repaint the tab's own vertical scroller into a stray + bright pill (the dragger fill + re-pinned geometry below). The scroller lives outside the section cards, so the + tighter scope reaches only the real settings slider. */ +.aspid-fasttools-settings__section-content .unity-base-slider .unity-base-field__label { flex-grow: 1; flex-basis: 0; min-width: auto; } -.aspid-fasttools-settings .unity-base-slider .unity-base-field__input { +.aspid-fasttools-settings__section-content .unity-base-slider .unity-base-field__input { flex-grow: 1; flex-shrink: 1; flex-basis: 0; @@ -183,7 +293,7 @@ cleanly with top:50% + a minus-half-height margin; the handle's top offset is partly forced by BaseSlider itself, so its margin carries an extra -4px measured against the 22px input row to land the handle's centre exactly on the track's (change either height and this needs re-measuring). */ -.aspid-fasttools-settings .unity-base-slider__tracker { +.aspid-fasttools-settings__section-content .unity-base-slider__tracker { top: 50%; height: 4px; margin-top: -2px; @@ -192,7 +302,7 @@ background-color: var(--aspid-colors-shade-darkness); } -.aspid-fasttools-settings .unity-base-slider__dragger { +.aspid-fasttools-settings__section-content .unity-base-slider__dragger { top: 50%; width: 12px; height: 12px; @@ -205,18 +315,18 @@ /* Unity's separate focus halo (the dragger-border element) is sized for the default handle and pokes out from under the smaller one as a stray blue disc — hide it; the handle carries the focus tint itself below. */ -.aspid-fasttools-settings .unity-base-slider__dragger-border { +.aspid-fasttools-settings__section-content .unity-base-slider__dragger-border { display: none; } /* Hovering the slider washes the handle's border in the muted signature green — the same accent family as the switches, the dropdown and the folder list; keyboard focus pulls in the bright accent, replacing the hidden default halo. */ -.aspid-fasttools-settings .unity-base-slider:hover .unity-base-slider__dragger { +.aspid-fasttools-settings__section-content .unity-base-slider:hover .unity-base-slider__dragger { border-color: var(--aspid-colors-status-success-shade-light); } -.aspid-fasttools-settings .unity-base-slider:focus .unity-base-slider__dragger { +.aspid-fasttools-settings__section-content .unity-base-slider:focus .unity-base-slider__dragger { border-color: var(--aspid-colors-status-success-text-light); } @@ -224,7 +334,7 @@ settings inputs instead of Unity's bright default field. The height is set on the TextField itself and mirrored on its input — Unity sizes the slider's inline field shorter than our input, which otherwise clips the digit's bottom against the frame. */ -.aspid-fasttools-settings .unity-base-slider__text-field { +.aspid-fasttools-settings__section-content .unity-base-slider__text-field { flex-grow: 0; flex-shrink: 0; width: 34px; @@ -232,7 +342,7 @@ margin: 0 0 0 8px; } -.aspid-fasttools-settings .unity-base-slider__text-field .unity-base-text-field__input { +.aspid-fasttools-settings__section-content .unity-base-slider__text-field .unity-base-text-field__input { height: 22px; padding: 0 4px; -unity-text-align: middle-center; @@ -243,7 +353,7 @@ color: var(--aspid-colors-text-lightness); } -.aspid-fasttools-settings .unity-base-slider__text-field .unity-base-text-field__input:focus { +.aspid-fasttools-settings__section-content .unity-base-slider__text-field .unity-base-text-field__input:focus { border-color: var(--aspid-colors-status-success-text-light); } @@ -350,6 +460,111 @@ background-color: rgba(255, 255, 255, 0.16); } +/* --- Keyboard navigation --- + Arrow keys walk one flat focus ring over every actionable element on the tab (switch rows, the gate dropdown, the + excluded-folders panel, the slider row, the action buttons); Enter activates the highlighted one, ←/→ nudge the + highlighted slider, Escape drops the highlight. The highlight mirrors each element's own hover treatment so + keyboard focus and mouse hover read as one state (the other tabs' nav idiom). Rows take the flat hover fill: */ +.aspid-fasttools-settings__nav-target--focused > .aspid-fasttools-settings__row-backplate { + background-color: var(--aspid-colors-bg-dark); +} + +/* The footer's reset row would take the flat fill directly if it ever joins the ring (it has no backplate). */ +.aspid-fasttools-settings__footer .aspid-fasttools-settings__row.aspid-fasttools-settings__nav-target--focused { + background-color: var(--aspid-colors-bg-dark); +} + +/* Action buttons mirror their own hover families — signature green, red for destructive, blue for per-user scope. */ +.aspid-fasttools-settings__action.aspid-fasttools-settings__nav-target--focused { + border-color: var(--aspid-colors-status-success-shade-light); + color: var(--aspid-colors-status-success-text-light); + background-color: rgba(20, 90, 45, 0.25); +} + +.aspid-fasttools-settings__action--danger.aspid-fasttools-settings__nav-target--focused { + border-color: var(--aspid-colors-status-error-text-dark); + color: var(--aspid-colors-status-error-text-light); + background-color: rgba(125, 35, 35, 0.25); +} + +.aspid-fasttools-settings__action--info.aspid-fasttools-settings__nav-target--focused { + border-color: var(--aspid-colors-status-info-text-dark); + color: var(--aspid-colors-status-info-text-light); + background-color: rgba(25, 75, 130, 0.25); +} + +/* The excluded-folders control joins the ring per element: its add header highlights via the same neutral fill it + shows on mouse hover (Enter opens the add-folder picker) with the "+" brightening to green alongside, and each + folder row takes the flat neutral fill of its own hover (Enter re-picks the folder, Delete/Backspace removes it). + Two classes per rule outrank the control's self-styled base rules, whose sheet loads deeper. */ +.aspid-fasttools-excluded-folders__header.aspid-fasttools-settings__nav-target--focused { + background-color: var(--aspid-colors-bg-dark); +} + +.aspid-fasttools-excluded-folders__header.aspid-fasttools-settings__nav-target--focused + .aspid-fasttools-excluded-folders__add { + color: var(--aspid-colors-status-success-text-light); +} + +.aspid-fasttools-excluded-folders__entry.aspid-fasttools-settings__nav-target--focused { + background-color: var(--aspid-colors-bg-dark); +} + +/* --- Scrollbar --- + The surface's vertical scroller re-dressed from Unity's bright default into the window's quiet family: no + step buttons, no track — just a slim translucent thumb that brightens while the scroller is hovered. Mirrors the + window sheet's scroller rules (which cover the window's other tabs) so the Preferences page — which loads only + this sheet — scrolls in the same chrome. Scoped to the scroller so the Recent-items slider (a base-slider too, + scoped under __section-content) is untouched. */ +.aspid-fasttools-settings .unity-scroller--vertical { + width: 12px; + margin: 0; + border-width: 0; + background-color: rgba(0, 0, 0, 0); +} + +.aspid-fasttools-settings .unity-scroller--vertical > .unity-scroller__low-button, +.aspid-fasttools-settings .unity-scroller--vertical > .unity-scroller__high-button { + display: none; +} + +/* With the step buttons gone, the slider re-pins to the scroller's full height (the default offsets reserve room + for them). */ +.aspid-fasttools-settings .unity-scroller--vertical .unity-scroller__slider { + margin: 0; + padding: 0; + width: 12px; + min-width: 12px; + top: 0; + bottom: 0; +} + +.aspid-fasttools-settings .unity-scroller--vertical .unity-base-slider__tracker { + border-width: 0; + background-color: rgba(0, 0, 0, 0); +} + +/* The thumb: slim, rounded, translucent white so it reads over both the bare canvas and the glass cards; hover + brightens it on the shared 0.25s beat. The default focus halo is dropped with the rest of the chrome. */ +.aspid-fasttools-settings .unity-scroller--vertical .unity-base-slider__dragger { + left: 3px; + width: 6px; + border-width: 0; + border-radius: 3px; + background-color: rgba(255, 255, 255, 0.12); + transition-property: background-color; + transition-duration: 0.25s; + transition-timing-function: ease-out; +} + +.aspid-fasttools-settings .unity-scroller--vertical:hover .unity-base-slider__dragger { + background-color: rgba(255, 255, 255, 0.28); +} + +.aspid-fasttools-settings .unity-scroller--vertical .unity-base-slider__dragger-border { + display: none; +} + /* --- Standalone canvas --- The SerializeReference window owns its dotted canvas and the Settings tab floats over it; a surface hosted anywhere else (the Preferences page) brings its own via this pair: the host fills the page and stacks the dots diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uss index 55804607..e58f9269 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uss @@ -1,23 +1,17 @@ -:root { - --aspid-fasttools-colors-bg: rgb(0, 0, 0); -} - -AspidAnimatedDotsBackground { - background-color: var(--aspid-fasttools-colors-bg); -} - .aspid-fasttools-welcome__scroll { flex-grow: 1; } +/* 12px matches the References tabs' content padding; inner sections keep vertical padding only so the + cards' side inset stays this single value across tabs. */ .aspid-fasttools-welcome__content { - padding: 10px; + padding: 12px; flex-grow: 1; align-items: stretch; } .aspid-fasttools-welcome__hero { - padding: 10px; + padding: 10px 0; align-items: center; flex-direction: row; } @@ -39,59 +33,173 @@ AspidAnimatedTitle { -unity-font-style: bold; } +/* Keep the animated gradient inside the brand green family: the red/amber stops read as status colors + everywhere else in the window, so the title cycles dark → light green instead of the logo's traffic-light + triplet. Scoped under __hero to outrank the component's own :root defaults on specificity. */ +.aspid-fasttools-welcome__hero AspidAnimatedTitle { + --aspid-fasttools-colors-animated_title-color_1: var(--aspid-colors-status-success-text-darkness); + --aspid-fasttools-colors-animated_title-color_2: var(--aspid-colors-status-success-text-dark); + --aspid-fasttools-colors-animated_title-color_3: var(--aspid-colors-status-success-text-light); +} + +/* The hero blurb reads directly over the dotted canvas — no plate behind it. */ .aspid-fasttools-welcome__description { white-space: normal; - border-radius: 10px; - background-color: var(--aspid-fasttools-colors-bg); +} + +/* Quick links under the blurb, styled like the footer's GitHub link: signature green, brighter on hover. */ +.aspid-fasttools-welcome__hero-links { + margin-top: 6px; + flex-direction: row; + align-items: center; +} + +.aspid-fasttools-welcome__hero-link { + padding: 0; + cursor: link; + font-size: 13px; + -unity-font-style: bold; + color: var(--aspid-colors-status-success-text-dark); +} + +.aspid-fasttools-welcome__hero-link:hover { + color: var(--aspid-colors-status-success-text-light); +} + +.aspid-fasttools-welcome__hero-link-separator { + margin: 0 6px; + padding: 0; + font-size: 13px; + color: var(--aspid-colors-text-darkness); } .aspid-fasttools-welcome__card { - padding: 10px; - border-radius: 10px; + padding: 10px 0; } -/* Scoped under __card so it outranks the gradient button's own :root height/padding on the class tie, - letting a sample row grow past one line to fit its wrapped description. */ -.aspid-fasttools-welcome__card .aspid-fasttools-welcome__sample { - height: auto; - min-height: 36px; +/* Sample cards share the References group-card surface: translucent dark fill, neutral border, 8px radius — + overriding AspidBox's opaque darkness fill and its 10px --rounded (the double class outranks the box's own rules). */ +.aspid-fasttools-welcome__sample.aspid-fasttools-background { + flex-grow: 0; + margin-bottom: 10px; padding: 8px 10px; + border-radius: 8px; + border-width: 1px; + border-color: var(--aspid-colors-shade-darkness); + background-color: rgba(20, 20, 20, 0.55); +} + +.aspid-fasttools-welcome__sample-header-row { + flex-direction: row; align-items: center; } -.aspid-fasttools-welcome__sample-body { +/* The whole header line is one flat clickable button, mirroring the References "Fix all" row: the gradient + fill is set transparent so it matches the card surface and the accent only drives the soft full-width hover + glow. Scoped under __sample because the button's own stylesheet sets height/padding/margin on :root, which + ties with a lone class — the descendant selector raises specificity to override them. */ +.aspid-fasttools-welcome__sample .aspid-fasttools-welcome__sample-header { flex-grow: 1; + flex-direction: row; + align-items: center; + height: auto; + margin: 0; + padding: 4px 4px; + --aspid-fasttools-colors-gradient_button-bg: rgba(0, 0, 0, 0); +} + +/* The action verb ("Import ▼") right-aligns inside the header button's flex-grow label. */ +.aspid-fasttools-welcome__sample-header .aspid-fasttools-gradient-button__label { + -unity-text-align: middle-right; +} + +/* An imported sample's header verb is "Remove" — a destructive direct action, so its hover glow goes error + instead of the default success accent. */ +.aspid-fasttools-welcome__sample .aspid-fasttools-welcome__sample-header--remove { + --aspid-fasttools-colors-gradient_button-accent: var(--aspid-colors-status-error-text-light); } -.aspid-fasttools-welcome__sample-header { +/* The title + status badge line living as the header button's leading content. */ +.aspid-fasttools-welcome__sample-info { flex-direction: row; align-items: center; } .aspid-fasttools-welcome__sample-title { - flex-grow: 1; font-size: 14px; -unity-font-style: bold; color: var(--aspid-colors-text-light); } -.aspid-fasttools-welcome__sample-action { +/* State marker ahead of the title: a single dot quoting the dotted canvas — the unread-marker idiom, brand + blue while the sample is still waiting to be imported, so fresh samples catch the eye. */ +.aspid-fasttools-welcome__sample-state-dot { + width: 6px; + height: 6px; flex-shrink: 0; - margin-left: 10px; - font-size: 14px; - -unity-font-style: bold; - -unity-text-align: middle-right; - color: var(--aspid-colors-text-light); + margin-right: 8px; + border-radius: 3px; + background-color: var(--aspid-colors-status-info-text-dark); + transition-property: background-color; + transition-duration: 0.25s; + transition-timing-function: ease-out; } +/* Hovering the header verb turns the dot the Import accent green — "about to become imported". */ +.aspid-fasttools-welcome__sample--header-hover .aspid-fasttools-welcome__sample-state-dot { + background-color: var(--aspid-colors-status-success-text-dark); +} + +/* Once imported the dot stays green — the sample is in the project. */ +.aspid-fasttools-welcome__sample-state-dot--imported { + background-color: var(--aspid-colors-status-success-text-dark); +} + +/* An imported card's verb is Remove, so hovering it previews the destructive tone instead of the green + (equal specificity with the hover rule above — this one wins by coming later). */ +.aspid-fasttools-welcome__sample--header-hover .aspid-fasttools-welcome__sample-state-dot--imported { + background-color: var(--aspid-colors-status-error-text-dark); +} + + .aspid-fasttools-welcome__sample-divider { flex-grow: 0; margin-top: 4px; margin-bottom: 2px; } +/* The hover sweep: an accent hairline lying exactly on the divider line (pulled up over it by the negative + margin), scaling in from the left edge while the header button is hovered — the cards' echo of the tab + strip's active underline. Triggered by the --header-hover card modifier (mirrored from the button in code), + since the sweep is the button's sibling and :hover can't reach across. */ +.aspid-fasttools-welcome__sample-sweep { + height: 1px; + /* Pulled up past the divider's 2px bottom margin plus its 1px line so the sweep sits exactly ON the + line; the 2px bottom margin gives the swallowed gap back, keeping the description rhythm intact. */ + margin-top: -3px; + margin-bottom: 2px; + background-color: var(--aspid-colors-status-success-text-dark); + transform-origin: left; + scale: 0 1; + transition-property: scale; + transition-duration: 0.25s; + transition-timing-function: ease-out; +} + +.aspid-fasttools-welcome__sample--header-hover .aspid-fasttools-welcome__sample-sweep { + scale: 1 1; +} + +/* A Remove card sweeps in the destructive tone, matching its header accent. */ +.aspid-fasttools-welcome__sample-sweep--remove { + background-color: var(--aspid-colors-status-error-text-dark); +} + +/* Shares the header's 4px horizontal inset so the description's left edge lines up with the title above; + the 6px top margin (+2px divider margin) mirrors the 8px of air above the line. */ .aspid-fasttools-welcome__sample-description { - margin-top: 2px; + margin-top: 6px; + padding: 0 4px; font-size: 12px; white-space: normal; -unity-font-style: normal; diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uxml b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uxml index 65d05f13..f9ea12d3 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uxml +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Unity/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uxml @@ -1,7 +1,6 @@