From 3459a6ed0bb0092401bd50832d524f8d1124bf72 Mon Sep 17 00:00:00 2001 From: Vladislav Panin Date: Wed, 14 Oct 2026 03:24:28 +0300 Subject: [PATCH 1/2] feat(editor): redesign the FastTools window tabs and settings Make the window lighter and consistent across tabs: - TabWindow keeps one view per tab, drives tabs from one table, hides key hints that do not fit and animates the dots only while watched. - Asset References: object headings with icons, empty optional fields as one-line rows in place, Orphaned as a plain section with a Clear band, a dot marker for shared references, namespaced Smart Fix and Migrate targets, Open Source Prefab inside the prefab notice. - Project References: Broken / Required / Prefab instance overrides / Renamed sections instead of the legend, one card per file for required and override entries, "rid N" or "N rids" per file, status coloured Fix all, ellipsis instead of mid-word wraps when narrow. - Settings: Project / Per-user stripes, one 200 px control column for fields and buttons, tooltips instead of description rows, a framed excluded-folders list. - The empty-tab icon is pinned to the middle of the tab. Co-Authored-By: Claude Opus 5.5 --- .../UI/Aspid-FastTools-Default-Dark.uss | 124 ++++++++- .../UI/Aspid-FastTools-Default-Light.uss | 31 ++- .../Aspid-FastTools-ReferenceGraph.uss | 175 ++++++------- ...ols-SerializeReference-ExcludedFolders.uss | 27 +- .../Aspid-FastTools-SerializeReference.uss | 176 +++++++++---- .../UI/Windows/Aspid-FastTools-Settings.uss | 87 ++++--- .../Aspid-FastTools-TabWindow.uss} | 102 +++++--- .../Aspid-FastTools-TabWindow.uss.meta} | 0 .../Welcome/Aspid-FastTools-Welcome-Style.uss | 2 +- .../Welcome/Aspid-FastTools-Welcome.uxml | 2 +- .../Extensions/ReferenceGraphDocument.cs | 4 + .../SerializeReferenceGraphScanner.cs | 20 +- .../SerializeReferenceExcludedFoldersField.cs | 13 +- .../Settings/SerializeReferenceSettingsUI.cs | 10 +- .../Scripts/Settings/AspidSettingsUI.cs | 46 ++-- .../Settings/TypeSelectorSettingsView.cs | 3 +- .../AspidAnimatedDotsBackground.cs | 39 ++- .../Components/AspidSwitches/AspidSwitch.cs | 34 ++- .../Internal/Styles/AspidStyles.cs | 5 + .../Styles/Theme/AspidThemeSettingsUI.cs | 6 +- .../Asset/SerializeReferenceGraphAnalysis.cs | 12 - .../Asset/SerializeReferenceGraphSummary.cs | 35 +-- .../SerializeReferenceGraphView.Cards.cs | 91 ++++--- .../SerializeReferenceGraphView.Nodes.cs | 125 ++++++--- .../Asset/SerializeReferenceGraphView.cs | 56 ++-- .../SerializeReferenceProjectSummary.cs | 93 +++++-- .../SerializeReferenceProjectView.Cards.cs | 214 ++++++++------- .../Project/SerializeReferenceProjectView.cs | 152 +++++++---- .../Shared/ReferenceEmptyStateLayout.cs | 38 +++ .../Shared/ReferenceEmptyStateLayout.cs.meta | 11 + .../Shared/ReferenceSectionHeading.cs | 94 +++++++ .../Shared/ReferenceSectionHeading.cs.meta | 11 + .../Shared/SerializeReferenceAuditUI.cs | 69 +++++ .../Editor/Scripts/Windows/TabWindow.cs | 243 +++++++++++++----- .../Scripts/Windows/TabWindowShortcuts.cs | 59 ++--- .../SerializeReferenceAuditUITests.cs | 53 ++++ .../SerializeReferenceAuditUITests.cs.meta | 11 + .../SerializeReferenceProjectSummaryTests.cs | 102 +++++--- .../Editor/Welcome/WelcomeViewStyleTests.cs | 4 +- .../Editor/Windows/EditorWindowSmokeTests.cs | 29 ++- CHANGELOG.md | 7 + CHANGELOG.ru.md | 7 + .../docs/06-serialize-reference-tooling.md | 16 +- .../docs/07-serialize-reference-validation.md | 10 +- .../current/06-serialize-reference-tooling.md | 16 +- .../07-serialize-reference-validation.md | 10 +- scripts/check-contrast.mjs | 5 + 47 files changed, 1668 insertions(+), 811 deletions(-) rename Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/{SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss => Windows/Aspid-FastTools-TabWindow.uss} (57%) rename Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/{SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss.meta => Windows/Aspid-FastTools-TabWindow.uss.meta} (100%) create mode 100644 Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Scripts/Windows/References/Shared/ReferenceEmptyStateLayout.cs create mode 100644 Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Scripts/Windows/References/Shared/ReferenceEmptyStateLayout.cs.meta create mode 100644 Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Scripts/Windows/References/Shared/ReferenceSectionHeading.cs create mode 100644 Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Scripts/Windows/References/Shared/ReferenceSectionHeading.cs.meta create mode 100644 Aspid.FastTools/Packages/tech.aspid.fasttools/Tests/Editor/SerializeReferences/SerializeReferenceAuditUITests.cs create mode 100644 Aspid.FastTools/Packages/tech.aspid.fasttools/Tests/Editor/SerializeReferences/SerializeReferenceAuditUITests.cs.meta diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Aspid-FastTools-Default-Dark.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Aspid-FastTools-Default-Dark.uss index 2440b625a..7cba1f744 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Aspid-FastTools-Default-Dark.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Aspid-FastTools-Default-Dark.uss @@ -23,8 +23,8 @@ --aspid-colors-shade-lightness: rgb(100, 100, 100); --aspid-colors-surface-canvas: rgb(0, 0, 0); - --aspid-colors-surface-card: rgba(20, 20, 20, 0.55); - --aspid-colors-surface-card-dim: rgba(20, 20, 20, 0.35); + --aspid-colors-surface-card: rgb(11, 11, 11); + --aspid-colors-surface-card-dim: rgb(7, 7, 7); --aspid-colors-overlay-hover: rgba(255, 255, 255, 0.05); --aspid-colors-overlay-control: rgba(255, 255, 255, 0.06); @@ -34,6 +34,10 @@ --aspid-colors-slider-handle: rgba(189, 189, 196, 0.85); --aspid-colors-control-border: rgb(110, 110, 110); + /* Where a setting is stored. No status uses these hues, so a stripe never reads as a state of the row. */ + --aspid-colors-scope-project: rgb(180, 140, 230); + --aspid-colors-scope-user: rgb(120, 120, 120); + --aspid-colors-status-success-darkness: rgb(8, 40, 20); --aspid-colors-status-success-dark: rgb(12, 65, 30); --aspid-colors-status-success-light: rgb(20, 90, 45); @@ -55,23 +59,23 @@ --aspid-colors-status-info-lightness: rgb(35, 105, 180); --aspid-colors-status-success-text-darkness: rgb(55, 110, 65); - --aspid-colors-status-success-text-dark: rgb(85, 175, 100); - --aspid-colors-status-success-text-light: rgb(120, 235, 145); - --aspid-colors-status-success-text-lightness: rgb(180, 255, 200); + --aspid-colors-status-success-text-dark: rgb(92, 180, 107); + --aspid-colors-status-success-text-light: rgb(124, 194, 136); + --aspid-colors-status-success-text-lightness: rgb(169, 219, 178); --aspid-colors-status-warning-text-darkness: rgb(120, 85, 35); - --aspid-colors-status-warning-text-dark: rgb(185, 135, 60); - --aspid-colors-status-warning-text-light: rgb(245, 185, 85); + --aspid-colors-status-warning-text-dark: rgb(232, 176, 74); + --aspid-colors-status-warning-text-light: rgb(245, 196, 110); --aspid-colors-status-warning-text-lightness: rgb(255, 235, 175); --aspid-colors-status-error-text-darkness: rgb(125, 45, 45); - --aspid-colors-status-error-text-dark: rgb(185, 65, 65); - --aspid-colors-status-error-text-light: rgb(235, 95, 95); + --aspid-colors-status-error-text-dark: rgb(226, 80, 106); + --aspid-colors-status-error-text-light: rgb(236, 114, 136); --aspid-colors-status-error-text-lightness: rgb(255, 175, 175); --aspid-colors-status-info-text-darkness: rgb(40, 80, 125); - --aspid-colors-status-info-text-dark: rgb(65, 130, 185); - --aspid-colors-status-info-text-light: rgb(90, 185, 240); + --aspid-colors-status-info-text-dark: rgb(74, 144, 208); + --aspid-colors-status-info-text-light: rgb(112, 170, 228); --aspid-colors-status-info-text-lightness: rgb(190, 240, 255); --aspid-colors-status-success-shade-darkness: rgb(25, 55, 30); @@ -298,3 +302,101 @@ Label.aspid-fasttools-theme--light.aspid-fasttools-status--info { Label.aspid-fasttools-theme--lightness.aspid-fasttools-status--info { color: var(--aspid-colors-status-info-text-lightness); } + +/* A short action inside a card (AspidStyles.ActionButtonClass): a plain outlined button, the same as the actions of the + Settings tab. The element-qualified selectors outrank Unity's own button rules. */ +Button.aspid-fasttools-action-button { + height: 22px; + margin: 0; + padding: 0 10px; + background-color: rgba(0, 0, 0, 0); + border-width: 1px; + border-color: var(--aspid-colors-shade-dark); + border-radius: 6px; + color: var(--aspid-colors-text-light); + font-size: 12px; + -unity-font-style: normal; + -unity-text-align: middle-center; + + transition-property: background-color, border-color, color; + transition-duration: 0.25s; + transition-timing-function: ease-out; +} + +Button.aspid-fasttools-action-button:hover { + border-color: var(--aspid-colors-status-success-shade-light); + color: var(--aspid-colors-status-success-text-light); + background-color: var(--aspid-colors-status-success-tint); +} + +/* An action that deletes data without Undo turns red on hover. */ +Button.aspid-fasttools-action-button--danger:hover { + border-color: var(--aspid-colors-status-error-text-dark); + color: var(--aspid-colors-status-error-text-light); + background-color: var(--aspid-colors-status-error-tint); +} + +/* ReferenceSectionHeading: the heading of a group of cards in the reference views. */ +/* As far from its first card as the cards are from each other, so the line does not crowd the card under it. */ +.aspid-fasttools-section-heading { + margin-bottom: 10px; +} + +.aspid-fasttools-section-heading__row { + flex-direction: row; + align-items: center; +} + +/* In a narrow window the name gives way with an ellipsis instead of wrapping. */ +.aspid-fasttools-section-heading__title { + flex-shrink: 1; + min-width: 0; + overflow: hidden; +} + +/* The type selector of the label's own sheet lets its text wrap; this keeps the heading on one line. */ +.aspid-fasttools-section-heading__title Label { + flex-shrink: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Takes the rest of the row so a chevron sits at its right end. */ +.aspid-fasttools-section-heading__trailing { + flex-grow: 1; + flex-shrink: 0; + margin: 0; + padding: 0 0 0 8px; + color: var(--aspid-colors-text-dark); + font-size: 11px; + -unity-text-align: middle-right; +} + +.aspid-fasttools-section-heading__line { + margin-top: 2px; +} + +.aspid-fasttools-section-heading--clickable { + padding: 2px 4px 0 4px; + margin-left: -4px; + margin-right: -4px; + border-radius: 6px; +} + +.aspid-fasttools-section-heading--clickable:hover { + background-color: var(--aspid-colors-overlay-hover); +} + +.aspid-fasttools-section-heading--clickable:hover .aspid-fasttools-section-heading__trailing { + color: var(--aspid-colors-text-light); +} + +/* An object heading: a level above the status sections inside it. */ +.aspid-fasttools-section-heading__icon { + flex-shrink: 0; + width: 16px; + height: 16px; + margin-right: 6px; +} diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Aspid-FastTools-Default-Light.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Aspid-FastTools-Default-Light.uss index dfabed852..323b3c45f 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Aspid-FastTools-Default-Light.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Aspid-FastTools-Default-Light.uss @@ -19,8 +19,8 @@ --aspid-colors-shade-lightness: rgb(160, 160, 160); --aspid-colors-surface-canvas: rgb(240, 240, 240); - --aspid-colors-surface-card: rgba(255, 255, 255, 0.72); - --aspid-colors-surface-card-dim: rgba(255, 255, 255, 0.45); + --aspid-colors-surface-card: rgb(251, 251, 251); + --aspid-colors-surface-card-dim: rgb(247, 247, 247); --aspid-colors-overlay-hover: rgba(0, 0, 0, 0.04); --aspid-colors-overlay-control: rgba(0, 0, 0, 0.05); @@ -30,6 +30,9 @@ --aspid-colors-slider-handle: rgba(92, 92, 100, 0.85); --aspid-colors-control-border: rgb(136, 136, 136); + --aspid-colors-scope-project: rgb(122, 79, 208); + --aspid-colors-scope-user: rgb(140, 140, 140); + --aspid-colors-status-success-darkness: rgb(232, 245, 236); --aspid-colors-status-success-dark: rgb(214, 237, 221); --aspid-colors-status-success-light: rgb(190, 226, 201); @@ -51,24 +54,24 @@ --aspid-colors-status-info-lightness: rgb(150, 186, 230); --aspid-colors-status-success-text-darkness: rgb(120, 170, 132); - --aspid-colors-status-success-text-dark: rgb(40, 116, 63); - --aspid-colors-status-success-text-light: rgb(24, 107, 50); - --aspid-colors-status-success-text-lightness: rgb(16, 88, 40); + --aspid-colors-status-success-text-dark: rgb(29, 132, 62); + --aspid-colors-status-success-text-light: rgb(23, 112, 53); + --aspid-colors-status-success-text-lightness: rgb(20, 95, 45); --aspid-colors-status-warning-text-darkness: rgb(212, 170, 110); - --aspid-colors-status-warning-text-dark: rgb(142, 92, 19); - --aspid-colors-status-warning-text-light: rgb(130, 78, 0); - --aspid-colors-status-warning-text-lightness: rgb(105, 62, 0); + --aspid-colors-status-warning-text-dark: rgb(155, 106, 0); + --aspid-colors-status-warning-text-light: rgb(128, 88, 0); + --aspid-colors-status-warning-text-lightness: rgb(105, 72, 0); --aspid-colors-status-error-text-darkness: rgb(225, 140, 140); - --aspid-colors-status-error-text-dark: rgb(171, 70, 70); - --aspid-colors-status-error-text-light: rgb(175, 42, 42); - --aspid-colors-status-error-text-lightness: rgb(150, 30, 30); + --aspid-colors-status-error-text-dark: rgb(204, 72, 96); + --aspid-colors-status-error-text-light: rgb(175, 52, 75); + --aspid-colors-status-error-text-lightness: rgb(150, 40, 60); --aspid-colors-status-info-text-darkness: rgb(130, 170, 215); - --aspid-colors-status-info-text-dark: rgb(46, 106, 162); - --aspid-colors-status-info-text-light: rgb(19, 94, 165); - --aspid-colors-status-info-text-lightness: rgb(16, 78, 140); + --aspid-colors-status-info-text-dark: rgb(39, 119, 188); + --aspid-colors-status-info-text-light: rgb(28, 100, 165); + --aspid-colors-status-info-text-lightness: rgb(20, 82, 140); --aspid-colors-status-success-shade-darkness: rgb(212, 234, 218); --aspid-colors-status-success-shade-dark: rgb(186, 220, 196); diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-ReferenceGraph.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-ReferenceGraph.uss index 13b18fa83..6fa2641c2 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-ReferenceGraph.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-ReferenceGraph.uss @@ -10,7 +10,7 @@ flex-grow: 0; margin-bottom: 12px; padding: 10px; - border-radius: 8px; + border-radius: 6px; border-width: 1px; border-color: var(--aspid-colors-shade-darkness); background-color: var(--aspid-colors-surface-card); @@ -45,13 +45,24 @@ .aspid-fasttools-reference-graph__rescan .aspid-fasttools-gradient-button__label { margin-right: 8px; -unity-text-align: middle-left; + color: var(--aspid-colors-status-success-text-dark); +} + +.aspid-fasttools-reference-graph__rescan-icon { + flex-shrink: 0; + width: 14px; + height: 14px; + margin: 0 6px 0 4px; + -unity-background-image-tint-color: var(--aspid-colors-status-success-text-dark); } +/* Stacked from the top: ReferenceEmptyStateLayout sets the top padding that puts the icon at the middle of the + viewport, so the icon does not move with the text under it. */ .aspid-fasttools-reference-graph__empty { flex-grow: 1; padding: 20px; align-items: center; - justify-content: center; + justify-content: flex-start; } .aspid-fasttools-reference-graph__empty--hidden { @@ -106,13 +117,7 @@ } .aspid-fasttools-reference-graph__overview-title { - margin-bottom: 6px; -} - -.aspid-fasttools-reference-graph__overview-hint { margin-bottom: 10px; - color: var(--aspid-colors-text-dark); - white-space: normal; } .aspid-fasttools-reference-graph__legend { @@ -148,58 +153,14 @@ color: var(--aspid-colors-text-dark); } -/* The document scope outranks the gradient button's :root layout rules. */ -.aspid-fasttools-reference-graph__document - .aspid-fasttools-reference-graph__document-header { - flex-direction: row; - align-items: center; - height: auto; - padding: 5px 8px; - margin-bottom: 6px; - border-radius: 6px; - border-width: 1px; - border-color: var(--aspid-colors-shade-darkness); - --aspid-fasttools-colors-gradient_button-bg: var(--aspid-colors-surface-card); - --aspid-fasttools-colors-gradient_button-accent: var(--aspid-colors-text-lightness); -} - -.aspid-fasttools-reference-graph__document - .aspid-fasttools-reference-graph__document-header--issues { - --aspid-fasttools-colors-gradient_button-accent: var(--aspid-colors-status-warning-text-light); -} - -.aspid-fasttools-reference-graph__document-header .aspid-fasttools-gradient-button__label { - flex-grow: 1; - font-size: 11px; - -unity-text-align: middle-right; -} - -.aspid-fasttools-reference-graph__document-header-row { - flex-direction: row; - align-items: center; - flex-shrink: 1; +/* With the 5px under the last card, the gap before the next object matches the gap before a section. */ +.aspid-fasttools-reference-graph__document { + margin-bottom: 9px; } -.aspid-fasttools-reference-graph__document-title { - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: var(--aspid-colors-text-lightness); - -unity-font-style: bold; - font-size: 13px; -} - -.aspid-fasttools-reference-graph__document-header--issues .aspid-fasttools-reference-graph__document-title { - color: var(--aspid-colors-status-warning-text-light); -} - -.aspid-fasttools-reference-graph__document-count { - margin-left: 10px; - flex-shrink: 0; - color: var(--aspid-colors-text-dark); - -unity-font-style: normal; - font-size: 11px; +/* The object that holds the fields: a folding ReferenceSectionHeading over its cards. */ +.aspid-fasttools-reference-graph__document-header { + margin-bottom: 10px; } /* The compound selector outranks AspidBox's theme and :root layout rules. */ @@ -207,7 +168,7 @@ flex-grow: 0; margin-bottom: 5px; padding: 8px 10px; - border-radius: 8px; + border-radius: 6px; border-width: 1px; border-color: var(--aspid-colors-shade-darkness); background-color: var(--aspid-colors-surface-card); @@ -226,6 +187,19 @@ background-color: var(--aspid-colors-surface-card-dim); } +/* A one-band card of an optional empty field. */ +.aspid-fasttools-reference-graph__node--compact.aspid-fasttools-background { + padding: 4px 10px; +} + +.aspid-fasttools-reference-graph__unassigned-field { + margin: 0; + padding: 0; + color: var(--aspid-colors-text-light); + -unity-font-style: italic; + font-size: 13px; +} + .aspid-fasttools-reference-graph__node--empty .aspid-fasttools-reference-graph__node-type { color: var(--aspid-colors-text-darkness); -unity-font-style: italic; @@ -305,8 +279,13 @@ display: none; } +/* A long target type is cut in the middle, so both the action and the class name stay readable. */ .aspid-fasttools-reference-graph__node-action { padding: 2px 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + -unity-text-overflow-position: middle; border-radius: 3px; cursor: link; -unity-font-style: bold; @@ -341,6 +320,19 @@ color: var(--aspid-colors-status-info-text-light); } +/* The keyboard focus on a plain action button looks like its hover, with the stronger border. */ +Button.aspid-fasttools-action-button.aspid-fasttools-reference-graph__nav-target--focused { + border-color: var(--aspid-colors-status-success-text-light); + color: var(--aspid-colors-status-success-text-light); + background-color: var(--aspid-colors-status-success-tint); +} + +Button.aspid-fasttools-action-button--danger.aspid-fasttools-reference-graph__nav-target--focused { + border-color: var(--aspid-colors-status-error-text-light); + color: var(--aspid-colors-status-error-text-light); + background-color: var(--aspid-colors-status-error-tint); +} + .aspid-fasttools-reference-graph__node-band-row { flex-direction: row; align-items: center; @@ -395,58 +387,51 @@ margin-left: 8px; } -.aspid-fasttools-reference-graph__badge { - margin-left: 4px; - padding: 1px 5px; - border-radius: 3px; - font-size: 9px; - -unity-font-style: bold; +.aspid-fasttools-reference-graph__shared { flex-direction: row; align-items: center; + margin-left: 4px; } -.aspid-fasttools-reference-graph__badge--shared { - color: var(--aspid-colors-status-info-text-lightness); - background-color: var(--aspid-colors-status-info-dark); -} - -.aspid-fasttools-reference-graph__badge-text { +.aspid-fasttools-reference-graph__shared-text { margin: 0; padding: 0; + color: var(--aspid-colors-text-dark); + -unity-font-style: normal; } .aspid-fasttools-reference-graph__chip { width: 8px; height: 8px; - margin-left: 4px; + margin-right: 6px; border-radius: 4px; } -.aspid-fasttools-reference-graph__orphan-group.aspid-fasttools-background { - flex-grow: 0; - margin-top: 6px; - padding: 8px 10px; - border-radius: 8px; - border-width: 1px; - border-color: var(--aspid-colors-status-warning-shade-darkness); - background-color: var(--aspid-colors-status-warning-tint-darkness); +/* Orphaned: the entries no field points at, after the cards of the tree under a ReferenceSectionHeading. */ +.aspid-fasttools-reference-graph__section { + margin-top: 14px; } -.aspid-fasttools-reference-graph__orphan-group-header { - margin-bottom: 4px; +.aspid-fasttools-reference-graph__clear-orphan { + flex-shrink: 0; + margin-left: 8px; } -.aspid-fasttools-reference-graph__clear-orphan { - margin: 0 0 0 8px; - padding: 2px 6px; - --aspid-fasttools-colors-gradient_button-bg: var(--aspid-colors-status-warning-darkness); - --aspid-fasttools-colors-gradient_button-accent: var(--aspid-colors-status-warning-text-light); +/* The prefab instance notice reads like the repair summaries of Project References: a tint, a status border and a + small button in its top-right corner. The list scope outranks the help box's own info rule. */ +.aspid-fasttools-reference-graph__list .aspid-fasttools-reference-graph__notice.aspid-fasttools-status--info { + background-color: var(--aspid-colors-status-info-tint); + border-color: var(--aspid-colors-status-info-shade-dark); } -.aspid-fasttools-reference-graph__clear-orphan .aspid-fasttools-gradient-button__label { - flex-grow: 0; - font-size: 11px; - -unity-text-align: middle-center; +.aspid-fasttools-reference-graph__notice + .aspid-fasttools-reference-graph__open-source { + position: absolute; + top: 6px; + right: 12px; + height: 20px; + padding: 0 12px; + border-color: var(--aspid-colors-status-info-shade-dark); } /* The fixed height gives ListView the bounds required for virtualization. */ @@ -456,7 +441,7 @@ padding: 0; overflow: hidden; margin: 0 -2px 8px -2px; - border-radius: 8px; + border-radius: 6px; border-width: 1px; border-color: var(--aspid-colors-shade-dark); background-color: var(--aspid-colors-surface-card); @@ -475,7 +460,7 @@ } .aspid-fasttools-reference-graph__picker--attached .aspid-fasttools-type-selector__header { - border-radius: 8px; + border-radius: 6px; } .aspid-fasttools-reference-graph__picker .aspid-fasttools-type-selector__footer { @@ -485,11 +470,11 @@ .aspid-fasttools-reference-graph__picker--attached .aspid-fasttools-type-selector__footer { margin: 5px 0 0 0; border-top-width: 0; - border-radius: 8px; + border-radius: 6px; } .aspid-fasttools-reference-graph__picker .aspid-fasttools-type-selector__item-content { - border-radius: 8px; + border-radius: 6px; padding-left: 8px; } diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-ExcludedFolders.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-ExcludedFolders.uss index 13816a2cc..ac6cb94b0 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-ExcludedFolders.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-ExcludedFolders.uss @@ -12,7 +12,7 @@ padding: 1px 3px 1px 7px; border-width: 1px; border-color: rgba(0, 0, 0, 0); - border-radius: 8px; + border-radius: 6px; transition-property: background-color; transition-duration: 0.25s; transition-timing-function: ease-out; @@ -28,10 +28,22 @@ -unity-text-align: middle-left; } -.aspid-fasttools-excluded-folders__hint { - margin-right: 6px; - color: var(--aspid-colors-text-darkness); - -unity-text-align: middle-right; +/* The folders sit in a framed box under the caption, bordered like the drop-downs and object fields, so they read as + a list. It starts where the caption's text starts and ends where the control column ends. */ +.aspid-fasttools-excluded-folders__list { + margin: 2px 4px 4px 19px; + padding: 2px; + border-width: 1px; + border-color: var(--aspid-colors-control-border); + border-radius: 6px; + background-color: var(--aspid-colors-surface-card-dim); +} + +.aspid-fasttools-excluded-folders__empty { + min-height: 22px; + padding: 1px 8px; + color: var(--aspid-colors-text-dark); + -unity-text-align: middle-left; } .aspid-fasttools-excluded-folders__add { @@ -55,14 +67,13 @@ /* Code mirrors child hover onto the row because USS cannot select a parent from child hover. */ .aspid-fasttools-excluded-folders__entry { - margin-left: 9px; flex-direction: row; align-items: center; min-height: 22px; - padding: 1px 3px 1px 19px; + padding: 1px 3px 1px 8px; border-width: 1px; border-color: rgba(0, 0, 0, 0); - border-radius: 8px; + border-radius: 6px; transition-property: background-color; transition-duration: 0.25s; transition-timing-function: ease-out; diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference.uss index 7e44eb27b..844bd9cdb 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference.uss @@ -131,7 +131,7 @@ Button.aspid-fasttools-serialize-reference__open-button { flex-shrink: 0; margin-bottom: 12px; padding: 10px; - border-radius: 8px; + border-radius: 6px; border-width: 1px; border-color: var(--aspid-colors-shade-darkness); background-color: var(--aspid-colors-surface-card); @@ -155,13 +155,28 @@ Button.aspid-fasttools-serialize-reference__open-button { .aspid-fasttools-repair-references__scan-project { margin: 0; padding-left: 4px; + align-items: center; } +.aspid-fasttools-repair-references__scan-project .aspid-fasttools-gradient-button__label { + color: var(--aspid-colors-status-success-text-dark); +} + +.aspid-fasttools-repair-references__scan-project-icon { + flex-shrink: 0; + width: 14px; + height: 14px; + margin: 0 6px 0 2px; + -unity-background-image-tint-color: var(--aspid-colors-status-success-text-dark); +} + +/* Stacked from the top: ReferenceEmptyStateLayout sets the top padding that puts the icon at the middle of the + viewport, so the icon does not move with the text under it. */ .aspid-fasttools-repair-references__empty { flex-grow: 1; padding: 20px; align-items: center; - justify-content: center; + justify-content: flex-start; } .aspid-fasttools-repair-references__empty--hidden { @@ -206,46 +221,29 @@ Button.aspid-fasttools-serialize-reference__open-button { } .aspid-fasttools-repair-references__results-header { - margin-bottom: 6px; + margin-bottom: 10px; } .aspid-fasttools-repair-references__results-hint { + margin-top: -4px; margin-bottom: 10px; color: var(--aspid-colors-text-dark); white-space: normal; } -.aspid-fasttools-repair-references__legend { - flex-direction: row; - align-items: center; - margin-top: -4px; - margin-bottom: 10px; -} - -.aspid-fasttools-repair-references__legend--hidden { +/* With nothing that needs attention the hint takes no line; how to act on the results is the header's tooltip. */ +.aspid-fasttools-repair-references__results-hint--hidden { display: none; } -.aspid-fasttools-repair-references__legend-item { - flex-direction: row; - align-items: center; - margin-right: 16px; -} - -.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); +/* Broken and Renamed sections, shown when both kinds are on screen. */ +.aspid-fasttools-repair-references__section-heading { + margin-top: 14px; + margin-bottom: 10px; } -.aspid-fasttools-repair-references__legend-text { - color: var(--aspid-colors-text-dark); +.aspid-fasttools-repair-references__section-heading--first { + margin-top: 0; } .aspid-fasttools-repair-references__summary { @@ -259,30 +257,15 @@ Button.aspid-fasttools-serialize-reference__open-button { border-color: var(--aspid-colors-status-warning-shade-dark); } -/* The summary scope outranks the gradient button's :root dimensions and text rules. */ +/* The undo of a repair sits in the corner of its summary box. */ .aspid-fasttools-repair-references__summary .aspid-fasttools-repair-references__summary-undo { position: absolute; top: 6px; right: 12px; height: 20px; - margin: 0; padding: 0 12px; - font-size: 12px; - border-radius: 6px; - border-width: 1px; border-color: var(--aspid-colors-status-warning-shade-dark); - --aspid-fasttools-colors-gradient_button-bg: var( - --aspid-colors-status-warning-darkness - ); - --aspid-fasttools-colors-gradient_button-accent: var( - --aspid-colors-status-warning-text-light - ); -} - -.aspid-fasttools-repair-references__summary-undo - .aspid-fasttools-gradient-button__label { - -unity-text-align: middle-center; } /* Growing the content container centers short content while taller content remains scrollable. */ @@ -302,7 +285,7 @@ Button.aspid-fasttools-serialize-reference__open-button { padding: 0; overflow: hidden; margin: 0 -2px 8px -2px; - border-radius: 8px; + border-radius: 6px; border-width: 1px; border-color: var(--aspid-colors-shade-dark); background-color: var(--aspid-colors-surface-card); @@ -323,7 +306,7 @@ Button.aspid-fasttools-serialize-reference__open-button { .aspid-fasttools-repair-references__picker--attached .aspid-fasttools-type-selector__header { - border-radius: 8px; + border-radius: 6px; } .aspid-fasttools-repair-references__picker @@ -335,7 +318,7 @@ Button.aspid-fasttools-serialize-reference__open-button { .aspid-fasttools-type-selector__footer { margin: 5px 0 0 0; border-top-width: 0; - border-radius: 8px; + border-radius: 6px; } .aspid-fasttools-type-selector .aspid-fasttools-type-selector__item-content { @@ -347,7 +330,7 @@ Button.aspid-fasttools-serialize-reference__open-button { flex-grow: 0; margin-bottom: 10px; padding: 8px 10px; - border-radius: 8px; + border-radius: 6px; border-width: 1px; border-color: var(--aspid-colors-shade-darkness); background-color: var(--aspid-colors-surface-card); @@ -433,9 +416,13 @@ Button.aspid-fasttools-serialize-reference__open-button { margin-bottom: 0; } +/* The action takes its card's status colour, as the bands of Asset References do: amber to fix, blue to migrate. */ .aspid-fasttools-repair-references__group-fix-all .aspid-fasttools-gradient-button__label { + flex-shrink: 0; + margin-left: 8px; -unity-text-align: middle-right; + color: var(--aspid-colors-status-warning-text-light); } .aspid-fasttools-repair-references__group @@ -445,6 +432,11 @@ Button.aspid-fasttools-serialize-reference__open-button { ); } +.aspid-fasttools-repair-references__group-fix-all--migrate + .aspid-fasttools-gradient-button__label { + color: var(--aspid-colors-status-info-text-light); +} + /* USS cannot select the sibling sweep from button hover; code mirrors hover onto the card modifier. */ .aspid-fasttools-repair-references__group-divider { @@ -480,28 +472,48 @@ Button.aspid-fasttools-serialize-reference__open-button { display: none; } +/* In a narrow window the count gives way first and the title after it, both with an ellipsis; Fix all keeps its width. */ .aspid-fasttools-repair-references__group-header-row { flex-direction: row; + flex-shrink: 1; align-items: center; + min-width: 0; + overflow: hidden; } -.aspid-fasttools-repair-references__group-header-row--static { - padding: 4px 4px; - margin-bottom: 6px; +.aspid-fasttools-repair-references__group-header { + flex-shrink: 1; + min-width: 0; + overflow: hidden; } -.aspid-fasttools-repair-references__group-header { +/* The type selector of the label's own sheet lets its text wrap; this keeps the title on one line. */ +.aspid-fasttools-repair-references__group-header Label { flex-shrink: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .aspid-fasttools-repair-references__group-count { + flex-shrink: 100; + min-width: 0; margin-left: 10px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; color: var(--aspid-colors-text-dark); -unity-font-style: normal; } +/* A long target type is cut in the middle, so both the action and the class name stay readable. */ .aspid-fasttools-repair-references__group-action { padding: 2px 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + -unity-text-overflow-position: middle; border-radius: 3px; cursor: link; -unity-font-style: bold; @@ -556,17 +568,73 @@ Button.aspid-fasttools-serialize-reference__open-button { } .aspid-fasttools-repair-references__group-entry-path { + flex-direction: row; flex-grow: 1; flex-shrink: 1; min-width: 0; - color: var(--aspid-colors-text-light); + overflow: hidden; +} + +/* The folder gives way long before the file name (flex-shrink 100 to 1) and loses its start first. */ +.aspid-fasttools-repair-references__group-entry-folder { + flex-shrink: 100; + min-width: 0; + margin: 0; + padding: 0; overflow: hidden; text-overflow: ellipsis; -unity-text-overflow-position: start; + white-space: nowrap; + color: var(--aspid-colors-text-dark); + cursor: text; +} +.aspid-fasttools-repair-references__group-entry-file { + flex-shrink: 1; + min-width: 0; + margin: 0; + padding: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--aspid-colors-text-lightness); + cursor: text; +} + +/* A row of a file card: what differs between the entries of that file, a field or a type. */ +.aspid-fasttools-repair-references__group-entry-name { + flex-grow: 1; + flex-shrink: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--aspid-colors-text-light); cursor: text; } +/* The path that heads a file card of the Required and Prefab instance overrides sections, with the entry count right + after it, as a group card's count follows its title. */ +/* Spaced like a group card's Fix all band (padding 4px, margin-bottom 6px), so the divider under it keeps the same + distance from the text in both kinds of cards. */ +.aspid-fasttools-repair-references__file-header { + padding-top: 4px; + padding-bottom: 4px; + margin-bottom: 6px; +} + +.aspid-fasttools-repair-references__file-header .aspid-fasttools-repair-references__group-entry-file { + -unity-font-style: bold; +} + +.aspid-fasttools-repair-references__file-header .aspid-fasttools-repair-references__group-entry-path { + flex-grow: 0; +} + +.aspid-fasttools-repair-references__file-header .aspid-fasttools-repair-references__group-count { + flex-shrink: 0; +} + .aspid-fasttools-repair-references__group-entry-rid { flex-shrink: 0; margin-left: 10px; diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Aspid-FastTools-Settings.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Aspid-FastTools-Settings.uss index 8f1eaa179..567ba848a 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Aspid-FastTools-Settings.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Aspid-FastTools-Settings.uss @@ -1,4 +1,8 @@ +/* Every input that is not a switch takes this width at the right edge of its row, so the controls of a section form one + column with the switches instead of each field splitting its row in half. */ .aspid-fasttools-settings { + --aspid-fasttools-settings-control-width: 200px; + padding: 12px 12px 0 12px; flex-grow: 1; } @@ -11,16 +15,11 @@ margin-bottom: 6px; } -.aspid-fasttools-settings__header-description { - color: var(--aspid-colors-text-dark); - white-space: normal; -} - .aspid-fasttools-settings__section { margin-bottom: 10px; padding: 8px 10px; border-width: 1px; - border-radius: 8px; + border-radius: 6px; border-color: var(--aspid-colors-shade-darkness); background-color: var(--aspid-colors-surface-card); } @@ -59,7 +58,7 @@ right: 0; top: 0; bottom: 0; - border-radius: 8px; + border-radius: 6px; transition-property: background-color; transition-duration: 0.25s; @@ -74,7 +73,7 @@ .aspid-fasttools-settings__footer .aspid-fasttools-settings__row { margin-left: -4px; padding-left: 4px; - border-radius: 8px; + border-radius: 6px; transition-property: background-color; transition-duration: 0.25s; transition-timing-function: ease-out; @@ -84,23 +83,20 @@ background-color: var(--aspid-colors-bg-dark); } -.aspid-fasttools-settings__row-note { - margin-top: -1px; - margin-bottom: 6px; - - padding-left: 17px; - font-size: 11px; - color: var(--aspid-colors-text-dark); - white-space: normal; -} - .aspid-fasttools-settings__row { flex-direction: row; min-height: 32px; } +/* Shrinks like a field's label, so a narrow window cuts the caption, not the control column. */ .aspid-fasttools-settings__row-caption { flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; + min-width: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; color: var(--aspid-colors-text-light); -unity-text-align: middle-left; } @@ -117,11 +113,11 @@ } .aspid-fasttools-settings__scope-stripe.aspid-fasttools-settings-scope--shared { - background-color: var(--aspid-colors-status-success-lightness); + background-color: var(--aspid-colors-scope-project); } .aspid-fasttools-settings__scope-stripe.aspid-fasttools-settings-scope--user { - background-color: var(--aspid-colors-status-info-lightness); + background-color: var(--aspid-colors-scope-user); } .aspid-fasttools-settings__legend { @@ -145,11 +141,11 @@ } .aspid-fasttools-settings__legend-swatch.aspid-fasttools-settings-scope--shared { - background-color: var(--aspid-colors-status-success-lightness); + background-color: var(--aspid-colors-scope-project); } .aspid-fasttools-settings__legend-swatch.aspid-fasttools-settings-scope--user { - background-color: var(--aspid-colors-status-info-lightness); + background-color: var(--aspid-colors-scope-user); } .aspid-fasttools-settings__legend-text { @@ -157,6 +153,29 @@ color: var(--aspid-colors-text-dark); } +/* Buttons share the control column with the drop-downs, sliders and object fields: the same width at the right edge, + split evenly, with a gap element between them, so their outer edges meet the column's. */ +.aspid-fasttools-settings__controls { + flex-direction: row; + flex-grow: 0; + flex-shrink: 1; + flex-basis: var(--aspid-fasttools-settings-control-width); + min-width: 120px; +} + +.aspid-fasttools-settings__controls > .aspid-fasttools-settings__action { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; + min-width: 0; + margin: 0; +} + +.aspid-fasttools-settings__controls-gap { + flex-shrink: 0; + width: 6px; +} + .aspid-fasttools-settings__action { height: 22px; margin: 0 0 0 6px; @@ -164,7 +183,7 @@ background-color: var(--aspid-colors-surface-card); border-width: 1px; border-color: var(--aspid-colors-shade-dark); - border-radius: 8px; + border-radius: 6px; color: var(--aspid-colors-text-light); transition-property: background-color, border-color, color; @@ -207,10 +226,12 @@ min-width: auto; } -.aspid-fasttools-settings__section-content .unity-base-slider .unity-base-field__input { - flex-grow: 1; +/* A child selector: the value box of the slider is a field too, and its input must keep its own width. */ +.aspid-fasttools-settings__section-content .unity-base-slider > .unity-base-field__input { + flex-grow: 0; flex-shrink: 1; - flex-basis: 0; + flex-basis: var(--aspid-fasttools-settings-control-width); + min-width: 120px; } /* BaseSlider partly controls the handle offset; remeasure the compensating margin when track or handle height changes. */ @@ -284,7 +305,7 @@ background-color: var(--aspid-colors-surface-card); border-width: 1px; border-color: var(--aspid-colors-control-border); - border-radius: 8px; + border-radius: 6px; } .aspid-fasttools-settings .unity-enum-field__text { @@ -298,9 +319,10 @@ } .aspid-fasttools-settings .unity-enum-field__input { - flex-grow: 1; + flex-grow: 0; flex-shrink: 1; - flex-basis: 0; + flex-basis: var(--aspid-fasttools-settings-control-width); + min-width: 120px; } .aspid-fasttools-settings .unity-enum-field__arrow, @@ -330,15 +352,16 @@ } .aspid-fasttools-settings .unity-object-field__input { - flex-grow: 1; + flex-grow: 0; flex-shrink: 1; - flex-basis: 0; + flex-basis: var(--aspid-fasttools-settings-control-width); + min-width: 120px; min-height: 24px; padding: 1px 2px 1px 6px; background-color: var(--aspid-colors-surface-card); border-width: 1px; border-color: var(--aspid-colors-control-border); - border-radius: 8px; + border-radius: 6px; } .aspid-fasttools-settings .unity-object-field-display__label { diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Aspid-FastTools-TabWindow.uss similarity index 57% rename from Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss rename to Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Aspid-FastTools-TabWindow.uss index 2da6156cf..a13d9f503 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Aspid-FastTools-TabWindow.uss @@ -1,54 +1,71 @@ -.aspid-fasttools-serialize-reference-window { +.aspid-fasttools-tab-window { flex-grow: 1; } /* EditorWindow.minSize does not constrain docked windows; this width floor prevents the mode content collapsing. */ -.aspid-fasttools-serialize-reference-window__container { +.aspid-fasttools-tab-window__container { + flex-grow: 1; min-width: 340px; } -.aspid-fasttools-serialize-reference-window__background { +.aspid-fasttools-tab-window__background { background-color: var(--aspid-colors-surface-canvas); } -.aspid-fasttools-serialize-reference-window__toolbar { +.aspid-fasttools-tab-window__toolbar { flex-direction: row; flex-shrink: 0; padding-top: 6px; background-color: rgba(0, 0, 0, 0); } -/* The element-qualified selector outranks Unity's built-in button chrome. */ -Button.aspid-fasttools-serialize-reference-window__toolbar-button { +/* The element-qualified selector outranks Unity's built-in button chrome. The text tabs share the width equally + (flex-basis 0), so a tab is as wide with its hint as without it: TabWindow.UpdateCompactTabs relies on that. + The padding and the 14px title make the 30px tab the square tabs stretch to. */ +Button.aspid-fasttools-tab-window__toolbar-button { flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; + min-width: 0; + flex-direction: row; + justify-content: center; + align-items: center; margin: 0 4px; - padding: 15px 16px; + padding: 6px 16px; background-color: rgba(0, 0, 0, 0); border-width: 0; border-radius: 0; +} + +Button.aspid-fasttools-tab-window__toolbar-button:hover { + background-color: var(--aspid-colors-overlay-hover); +} + +.aspid-fasttools-tab-window__tab-title { + flex-shrink: 1; + min-width: 0; + margin: 0; + padding: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; color: var(--aspid-colors-text-dark); font-size: 14px; -unity-font-style: normal; -unity-text-align: middle-center; } -Button.aspid-fasttools-serialize-reference-window__toolbar-button:hover { - background-color: var(--aspid-colors-overlay-hover); +Button.aspid-fasttools-tab-window__toolbar-button:hover .aspid-fasttools-tab-window__tab-title { color: var(--aspid-colors-text-light); } -Button.aspid-fasttools-serialize-reference-window__toolbar-button--active { +Button.aspid-fasttools-tab-window__toolbar-button--active .aspid-fasttools-tab-window__tab-title { color: var(--aspid-colors-text-lightness); -unity-font-style: bold; } -Button.aspid-fasttools-serialize-reference-window__toolbar-button--active:hover { - background-color: var(--aspid-colors-overlay-hover); - color: var(--aspid-colors-text-lightness); -} - /* A child background repaints on tab changes; border-bottom-color changes can remain stale until relayout. */ -.aspid-fasttools-serialize-reference-window__tab-underline { +.aspid-fasttools-tab-window__tab-underline { position: absolute; left: 0; right: 0; @@ -57,27 +74,32 @@ Button.aspid-fasttools-serialize-reference-window__toolbar-button--active:hover background-color: var(--aspid-colors-shade-darkness); } -Button.aspid-fasttools-serialize-reference-window__toolbar-button--active .aspid-fasttools-serialize-reference-window__tab-underline { +Button.aspid-fasttools-tab-window__toolbar-button--active .aspid-fasttools-tab-window__tab-underline { background-color: var(--aspid-colors-status-success-text-light); } -.aspid-fasttools-serialize-reference-window__tab-hint { - position: absolute; - right: 8px; - top: 50%; - translate: 0 -50%; +/* The hint follows the title, so the two read as one group at any tab width. TabWindow.TabHintGap is this margin. */ +.aspid-fasttools-tab-window__tab-hint { + flex-shrink: 0; + margin: 0 0 0 8px; + padding: 0; color: var(--aspid-colors-text-dark); font-size: 10px; -unity-text-align: middle-center; } -Button.aspid-fasttools-serialize-reference-window__toolbar-button--active .aspid-fasttools-serialize-reference-window__tab-hint { +Button.aspid-fasttools-tab-window__toolbar-button--active .aspid-fasttools-tab-window__tab-hint { color: var(--aspid-colors-text-light); } -Button.aspid-fasttools-serialize-reference-window__toolbar-button--square { +Button.aspid-fasttools-tab-window__toolbar-button--compact .aspid-fasttools-tab-window__tab-hint { + display: none; +} + +Button.aspid-fasttools-tab-window__toolbar-button--square { flex-grow: 0; flex-shrink: 0; + flex-basis: 30px; width: 30px; padding: 0; align-self: stretch; @@ -85,43 +107,43 @@ Button.aspid-fasttools-serialize-reference-window__toolbar-button--square { justify-content: center; } -.aspid-fasttools-serialize-reference-window__tab-icon { +.aspid-fasttools-tab-window__tab-icon { width: 24px; height: 24px; -unity-background-image-tint-color: var(--aspid-colors-text-dark); } -.aspid-fasttools-serialize-reference-window__tab-icon--home { +.aspid-fasttools-tab-window__tab-icon--home { background-image: var(--aspid-icons-home); } -.aspid-fasttools-serialize-reference-window__tab-icon--settings { +.aspid-fasttools-tab-window__tab-icon--settings { background-image: var(--aspid-icons-settings); } -Button.aspid-fasttools-serialize-reference-window__toolbar-button--square:hover .aspid-fasttools-serialize-reference-window__tab-icon { +Button.aspid-fasttools-tab-window__toolbar-button--square:hover .aspid-fasttools-tab-window__tab-icon { -unity-background-image-tint-color: var(--aspid-colors-text-light); } -Button.aspid-fasttools-serialize-reference-window__toolbar-button--square.aspid-fasttools-serialize-reference-window__toolbar-button--active .aspid-fasttools-serialize-reference-window__tab-icon { +Button.aspid-fasttools-tab-window__toolbar-button--square.aspid-fasttools-tab-window__toolbar-button--active .aspid-fasttools-tab-window__tab-icon { -unity-background-image-tint-color: var(--aspid-colors-status-success-text-light); } /* Scope base-slider rules to the scroller so ordinary sliders keep their geometry. */ -.aspid-fasttools-serialize-reference-window .unity-scroller--vertical { +.aspid-fasttools-tab-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 { +.aspid-fasttools-tab-window .unity-scroller--vertical > .unity-scroller__low-button, +.aspid-fasttools-tab-window .unity-scroller--vertical > .unity-scroller__high-button { display: none; } /* Reset offsets reserved for the removed scroller step buttons. */ -.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-scroller__slider { +.aspid-fasttools-tab-window .unity-scroller--vertical .unity-scroller__slider { margin: 0; padding: 0; width: 12px; @@ -130,12 +152,12 @@ Button.aspid-fasttools-serialize-reference-window__toolbar-button--square.aspid- bottom: 0; } -.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-base-slider__tracker { +.aspid-fasttools-tab-window .unity-scroller--vertical .unity-base-slider__tracker { border-width: 0; background-color: rgba(0, 0, 0, 0); } -.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-base-slider__dragger { +.aspid-fasttools-tab-window .unity-scroller--vertical .unity-base-slider__dragger { left: 3px; width: 6px; border-width: 0; @@ -146,10 +168,16 @@ Button.aspid-fasttools-serialize-reference-window__toolbar-button--square.aspid- transition-timing-function: ease-out; } -.aspid-fasttools-serialize-reference-window .unity-scroller--vertical:hover .unity-base-slider__dragger { +.aspid-fasttools-tab-window .unity-scroller--vertical:hover .unity-base-slider__dragger { background-color: var(--aspid-colors-overlay-scrollbar-hover); } -.aspid-fasttools-serialize-reference-window .unity-scroller--vertical .unity-base-slider__dragger-border { +.aspid-fasttools-tab-window .unity-scroller--vertical .unity-base-slider__dragger-border { display: none; } + +/* Cards and bands take the 6px corners of the documentation site; outside this window the components keep their own. */ +.aspid-fasttools-tab-window .aspid-fasttools-background--rounded, +.aspid-fasttools-tab-window .aspid-fasttools-gradient-button { + border-radius: 6px; +} diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss.meta b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Aspid-FastTools-TabWindow.uss.meta similarity index 100% rename from Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/SerializeReferences/Aspid-FastTools-SerializeReference-Window.uss.meta rename to Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Aspid-FastTools-TabWindow.uss.meta diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome-Style.uss b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome-Style.uss index d285582cf..1f9ae52b1 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome-Style.uss +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome-Style.uss @@ -96,7 +96,7 @@ AspidAnimatedTitle { flex-grow: 0; margin-bottom: 10px; padding: 8px 10px; - border-radius: 8px; + border-radius: 6px; border-width: 1px; border-color: var(--aspid-colors-shade-darkness); background-color: var(--aspid-colors-surface-card); diff --git a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uxml b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uxml index eb6c4ac08..001e22e06 100644 --- a/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uxml +++ b/Aspid.FastTools/Packages/tech.aspid.fasttools/Editor/Resources/UI/Windows/Welcome/Aspid-FastTools-Welcome.uxml @@ -5,7 +5,7 @@