Implement many UX improvements, packages and their assets and a UI overhaul in collection
This commit is contained in:
+256
-1
@@ -798,11 +798,20 @@ Button {
|
||||
background-color: var(--kp-panel);
|
||||
}
|
||||
|
||||
.collection-detail-full {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.collection-detail .unity-scroll-view__content-container {
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.collection-detail-full .unity-scroll-view__content-container {
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.collection-detail-readout {
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
@@ -910,13 +919,25 @@ Button {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.version-path-step {
|
||||
.version-roadmap {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.version-path-step,
|
||||
.version-roadmap-step {
|
||||
color: var(--kp-muted);
|
||||
font-size: 12px;
|
||||
margin-right: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.version-roadmap-step {
|
||||
min-height: 22px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.version-path-owned {
|
||||
color: var(--kp-primary);
|
||||
}
|
||||
@@ -968,6 +989,240 @@ Button {
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
.unit-overview-roster {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.unit-overview-row {
|
||||
width: 31%;
|
||||
min-width: 280px;
|
||||
min-height: 118px;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 10px 12px;
|
||||
border-left-width: 2px;
|
||||
border-right-width: 1px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-right-color: var(--kp-border);
|
||||
border-top-color: var(--kp-border);
|
||||
border-bottom-color: var(--kp-border);
|
||||
background-color: var(--kp-bg-solid);
|
||||
}
|
||||
|
||||
.unit-overview-top,
|
||||
.unit-overview-meta,
|
||||
.unit-overview-slots,
|
||||
.unit-detail-header,
|
||||
.unit-detail-action-grid {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unit-overview-rarity {
|
||||
min-width: 52px;
|
||||
margin-left: 10px;
|
||||
-unity-text-align: middle-right;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.unit-overview-upgrade {
|
||||
margin-left: 10px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
min-height: 18px;
|
||||
color: var(--kp-amber);
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-color: var(--kp-amber);
|
||||
border-right-color: var(--kp-amber);
|
||||
border-top-color: var(--kp-amber);
|
||||
border-bottom-color: var(--kp-amber);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.unit-overview-meta {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.unit-language-tag {
|
||||
margin-right: 8px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
min-height: 20px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-color: var(--kp-border);
|
||||
border-right-color: var(--kp-border);
|
||||
border-top-color: var(--kp-border);
|
||||
border-bottom-color: var(--kp-border);
|
||||
background-color: var(--kp-panel);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.unit-overview-release {
|
||||
color: var(--kp-muted);
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.unit-overview-slots {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.unit-package-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-color: var(--kp-border);
|
||||
border-right-color: var(--kp-border);
|
||||
border-top-color: var(--kp-border);
|
||||
border-bottom-color: var(--kp-border);
|
||||
background-color: var(--kp-primary-dim);
|
||||
}
|
||||
|
||||
.unit-package-dot.empty {
|
||||
background-color: transparent;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.unit-detail-header {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.unit-detail-header-copy {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.unit-detail-tabs {
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 12px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--kp-border);
|
||||
}
|
||||
|
||||
.unit-detail-tab-body {
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.unit-detail-tab-body .unity-scroll-view__content-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.unit-detail-action-grid {
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.unit-detail-block {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
margin-right: 12px;
|
||||
padding: 10px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-color: var(--kp-border);
|
||||
border-right-color: var(--kp-border);
|
||||
border-top-color: var(--kp-border);
|
||||
border-bottom-color: var(--kp-border);
|
||||
background-color: var(--kp-bg-solid);
|
||||
}
|
||||
|
||||
.unit-detail-cards {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.unit-detail-identity {
|
||||
padding-top: 10px;
|
||||
border-top-width: 1px;
|
||||
border-top-color: var(--kp-border);
|
||||
}
|
||||
|
||||
.package-slot-block {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top-width: 1px;
|
||||
border-top-color: var(--kp-border);
|
||||
}
|
||||
|
||||
.package-slot-row {
|
||||
min-height: 42px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 6px;
|
||||
padding: 8px 10px;
|
||||
border-left-width: 2px;
|
||||
border-left-color: transparent;
|
||||
background-color: var(--kp-bg-solid);
|
||||
transition-property: background-color, border-left-color;
|
||||
transition-duration: 120ms;
|
||||
}
|
||||
|
||||
.package-slot-row:hover {
|
||||
border-left-color: var(--kp-primary);
|
||||
background-color: var(--kp-hover);
|
||||
}
|
||||
|
||||
.package-slot-label {
|
||||
width: 92px;
|
||||
min-width: 92px;
|
||||
color: var(--kp-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.package-slot-name {
|
||||
width: 190px;
|
||||
min-width: 150px;
|
||||
color: var(--kp-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.package-slot-rarity {
|
||||
width: 52px;
|
||||
min-width: 52px;
|
||||
-unity-text-align: middle-center;
|
||||
}
|
||||
|
||||
.package-slot-level {
|
||||
width: 70px;
|
||||
min-width: 70px;
|
||||
color: var(--kp-amber);
|
||||
font-size: 12px;
|
||||
-unity-text-align: middle-center;
|
||||
}
|
||||
|
||||
.package-slot-effect {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
color: var(--kp-muted);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.collection-row-languages,
|
||||
.collection-detail-muted {
|
||||
color: var(--kp-muted);
|
||||
|
||||
@@ -192,11 +192,11 @@
|
||||
<ui:VisualElement name="RootCreditExchangeModal" class="modal-overlay hidden">
|
||||
<ui:VisualElement class="root-credit-dialog">
|
||||
<ui:Button name="RootCreditExchangeCloseButton" text="X" class="modal-close-button" focusable="false" />
|
||||
<ui:Label text="exchange root-credits" class="starter-title" />
|
||||
<ui:Label text="convert root-credits into entropy at 1:1. entropy cannot be converted back." class="starter-instruction" />
|
||||
<ui:Label text="exchange Root Credits" class="starter-title" />
|
||||
<ui:Label text="convert Root Credits into Entropy at 1:1. Entropy cannot be converted back." class="starter-instruction" />
|
||||
<ui:VisualElement class="exchange-summary">
|
||||
<ui:VisualElement class="kv-row">
|
||||
<ui:Label text="root-credits" class="kv-key" />
|
||||
<ui:Label text="Root Credits" class="kv-key" />
|
||||
<ui:Label name="RootCreditExchangeBalanceLabel" class="kv-value" />
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement class="kv-row">
|
||||
@@ -216,7 +216,7 @@
|
||||
<ui:Label name="RootCreditExchangeMessageLabel" class="starter-confirm hidden" />
|
||||
<ui:VisualElement class="exchange-confirm-row">
|
||||
<ui:Button name="RootCreditExchangeCancelButton" text="git merge --abort" class="terminal-button exchange-confirm-button" />
|
||||
<ui:Button name="RootCreditExchangeConfirmButton" text="git merge root-credits --into entropy" class="terminal-button exchange-confirm-button" />
|
||||
<ui:Button name="RootCreditExchangeConfirmButton" text="git merge Root-Credits --into Entropy" class="terminal-button exchange-confirm-button" />
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
|
||||
Reference in New Issue
Block a user