:root { --kp-bg: #050807; --kp-bg-solid: #050807; --kp-panel: #09100d; --kp-primary: #5cff91; --kp-primary-dim: #2f7a4d; --kp-muted: #7f9b8a; --kp-border: #1d3b2a; --kp-hover: #102018; --kp-amber: #ffbf5c; --kp-scroll-track: var(--kp-panel); --kp-scroll-thumb: var(--kp-muted); --kp-scroll-thumb-hover: var(--kp-primary-dim); } .terminal-root { flex-grow: 1; background-color: var(--kp-bg); color: var(--kp-primary); font-size: 16px; } Label, Button { color: var(--kp-primary); } .background-log-layer { position: absolute; left: 24px; right: 24px; top: 52px; bottom: 50px; opacity: 0.04; overflow: hidden; } .background-log-line { height: 18px; color: var(--kp-primary); font-size: 14px; line-height: 18px; white-space: nowrap; } .boot-intro { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 48px; background-color: var(--kp-bg); justify-content: flex-end; } .boot-intro-log { color: var(--kp-primary); font-size: 15px; white-space: normal; } .shell-root { flex-grow: 1; padding: 18px 24px 16px 24px; opacity: 1; justify-content: space-between; transition-property: opacity; transition-duration: 220ms; } .boot-hidden { opacity: 0; } .boot-visible { opacity: 1; } .reduced-motion { transition-duration: 0ms; } .hidden { display: none; } .status-bar, .footer-bar { min-height: 34px; flex-direction: row; align-items: center; justify-content: space-between; border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 1px; border-bottom-color: var(--kp-border); background-color: var(--kp-bg-solid); } .footer-bar { border-top-width: 1px; border-top-color: var(--kp-border); border-bottom-width: 0; } .status-right, .prompt-row, .title-row { flex-direction: row; align-items: center; } .status-right { justify-content: flex-end; } .status-text, .footer-muted, .tagline, .muted-text { color: var(--kp-muted); } .currency-text { color: var(--kp-amber); margin-right: 18px; } .currency-plus-button { width: 24px; height: 22px; margin-right: 12px; padding-left: 0; padding-right: 0; 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); background-color: var(--kp-bg-solid); color: var(--kp-amber); transition-property: background-color, color; transition-duration: 120ms; } .currency-plus-button:hover { background-color: var(--kp-amber); color: var(--kp-bg); } .main-panel { flex-grow: 1; justify-content: center; } .content-row { flex-direction: row; align-items: center; padding-top: 32px; padding-bottom: 28px; } .command-column { flex-grow: 1; min-width: 470px; padding-right: 40px; background-color: var(--kp-bg-solid); } .terminal-title { color: var(--kp-primary); font-size: 54px; -unity-font-style: bold; } .blink-cursor { color: transparent; margin-left: 4px; } .cursor-on { color: var(--kp-primary); } .tagline { margin-top: 4px; margin-bottom: 28px; font-size: 16px; } .command-list { max-width: 720px; } .command-row { min-height: 38px; flex-direction: row; align-items: center; padding-left: 10px; padding-right: 10px; margin-top: 3px; margin-bottom: 3px; border-left-width: 2px; border-left-color: transparent; transition-property: background-color, border-left-color; transition-duration: 120ms; } .command-row:hover, .command-row.selected { background-color: var(--kp-hover); } .command-row.selected { border-left-color: var(--kp-primary); } .command-cursor { width: 22px; color: var(--kp-primary); } .command-text { color: var(--kp-primary); font-size: 19px; flex-grow: 1; } .command-description { color: var(--kp-muted); -unity-text-align: middle-right; width: 150px; } .featured-panel { width: 430px; min-height: 330px; max-height: 340px; padding: 0; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-left-color: var(--kp-primary); border-right-color: var(--kp-primary); border-top-color: var(--kp-primary); border-bottom-color: var(--kp-primary); background-color: var(--kp-bg-solid); } .featured-title-bar { height: 32px; flex-direction: row; align-items: center; padding-left: 12px; padding-right: 12px; border-bottom-width: 1px; border-bottom-color: var(--kp-border); background-color: var(--kp-bg-solid); } .featured-title { color: var(--kp-muted); font-size: 12px; } .featured-empty { flex-grow: 1; flex-direction: row; align-items: center; justify-content: center; padding: 18px; } .featured-empty-copy { flex-grow: 1; align-items: center; justify-content: center; min-height: 150px; padding-left: 20px; } .empty-title { color: var(--kp-primary); font-size: 20px; margin-bottom: 8px; } .featured-populated { flex-direction: row; padding: 18px; overflow: hidden; } .ascii-art { width: 150px; min-width: 150px; height: 150px; color: var(--kp-primary); font-size: 14px; line-height: 105%; white-space: nowrap; overflow: hidden; -unity-paragraph-spacing: 0; } .ascii-placeholder { width: 140px; height: 150px; position: relative; } .dash { position: absolute; background-color: var(--kp-primary); opacity: 0.25; } .dash-top, .dash-bottom { width: 10px; height: 1px; } .dash-left, .dash-right { width: 1px; height: 10px; } .dash-top { top: 0; } .dash-bottom { bottom: 0; } .dash-left { left: 0; } .dash-right { right: 0; } .dash-01 { left: 0; } .dash-02 { left: 19px; } .dash-03 { left: 38px; } .dash-04 { left: 57px; } .dash-05 { left: 76px; } .dash-06 { left: 95px; } .dash-07 { left: 114px; } .dash-08 { left: 130px; } .dash-v01 { top: 0; } .dash-v02 { top: 27px; } .dash-v03 { top: 54px; } .dash-v04 { top: 81px; } .dash-v05 { top: 108px; } .dash-v06 { top: 140px; } .unit-readout { flex-grow: 1; min-width: 0; max-width: 226px; overflow: hidden; } .kv-row { flex-direction: row; margin-bottom: 8px; overflow: hidden; } .kv-key { width: 88px; min-width: 88px; color: var(--kp-muted); } .kv-value { flex-grow: 1; min-width: 0; max-width: 138px; color: var(--kp-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .motd-block { max-width: 55%; align-self: flex-start; margin-bottom: 14px; } .motd-header { color: var(--kp-muted); font-size: 13px; margin-bottom: 4px; } .motd-body { color: var(--kp-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-banner { min-height: 34px; justify-content: center; padding-left: 12px; padding-right: 12px; 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); } .event-banner-text { color: var(--kp-amber); } .screen-panel { flex-grow: 1; min-height: 0; background-color: var(--kp-bg-solid); } .screen-frame { flex-grow: 1; min-height: 0; background-color: var(--kp-bg-solid); padding: 30px 0 18px 0; } .screen-frame-header { min-height: 34px; justify-content: center; border-bottom-width: 1px; border-bottom-color: var(--kp-border); } .screen-frame-title { color: var(--kp-muted); font-size: 17px; } .screen-frame-content { flex-grow: 1; min-height: 0; padding-top: 18px; padding-bottom: 14px; } .screen-frame-footer { min-height: 32px; justify-content: center; border-top-width: 1px; border-top-color: var(--kp-border); } .screen-frame-hint { color: var(--kp-muted); } .stub-scroll, .stub-box { flex-grow: 1; min-height: 0; 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); } .gacha-shell { flex-grow: 1; min-height: 0; flex-direction: row; } .gacha-banner-list { width: 270px; min-width: 270px; margin-right: 16px; padding-top: 4px; 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); } .gacha-banner-detail-scroll { flex-grow: 1; min-width: 0; min-height: 0; 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); } .gacha-banner-detail-scroll .unity-scroll-view__content-container { min-width: 0; } .gacha-banner-detail { min-width: 0; padding: 16px; } .gacha-banner-detail .kv-value { max-width: none; min-width: 0; } .gacha-banner-detail .kv-key { width: 170px; min-width: 170px; } .gacha-banner-row { min-height: 42px; flex-direction: row; align-items: center; padding-left: 10px; padding-right: 10px; margin-top: 3px; margin-bottom: 3px; border-left-width: 2px; border-left-color: transparent; transition-property: background-color, border-left-color; transition-duration: 120ms; } .gacha-banner-row:hover, .gacha-banner-row.selected { background-color: var(--kp-hover); } .gacha-banner-row.selected { border-left-color: var(--kp-primary); } .gacha-detail-title { color: var(--kp-primary); font-size: 20px; -unity-font-style: bold; margin-bottom: 8px; } .gacha-hero { height: 230px; margin-bottom: 12px; padding: 10px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-left-color: var(--kp-primary-dim); border-right-color: var(--kp-primary-dim); border-top-color: var(--kp-primary-dim); border-bottom-color: var(--kp-primary-dim); background-color: var(--kp-bg-solid); } .gacha-hero-art-row { flex-grow: 1; min-height: 0; flex-direction: row; } .gacha-art-card { flex-grow: 1; min-width: 0; margin-right: 10px; align-items: center; } .gacha-art-shell { flex-grow: 1; min-height: 0; height: 165px; width: 100%; align-items: center; justify-content: center; overflow: hidden; } .gacha-art-card .ascii-art, .gacha-ascii-art { width: 100%; min-width: 0; height: 165px; font-size: 14px; } .gacha-art-card .ascii-placeholder, .gacha-ascii-placeholder { width: 150px; height: 155px; } .gacha-art-name { min-height: 20px; font-size: 14px; -unity-font-style: bold; -unity-text-align: middle-center; } .gacha-hero-title { color: var(--kp-muted); font-size: 14px; margin-top: 4px; -unity-text-align: middle-center; } .gacha-rules { color: var(--kp-muted); white-space: normal; margin-top: 6px; margin-bottom: 10px; } .gacha-actions { flex-direction: row; flex-wrap: wrap; margin-top: 6px; margin-bottom: 4px; } .gacha-action-button { width: 220px; min-height: 48px; margin-top: 0; margin-bottom: 8px; margin-right: 12px; white-space: normal; -unity-text-align: middle-center; } .gacha-result { color: var(--kp-amber); white-space: normal; margin-top: 8px; } .collection-content { min-height: 280px; } .collection-shell { flex-grow: 1; min-height: 0; flex-direction: row; } #RunSetupContent { flex-grow: 1; min-height: 0; } .run-setup-shell { flex-grow: 1; min-height: 0; flex-direction: row; } .collection-actions { flex-direction: row; justify-content: flex-start; margin-bottom: 10px; } .collection-tab { min-width: 92px; height: 30px; margin-right: 10px; padding-left: 10px; padding-right: 10px; border-bottom-width: 2px; border-bottom-color: transparent; background-color: transparent; color: var(--kp-muted); transition-property: color, border-bottom-color; transition-duration: 120ms; } .collection-tab.selected { color: var(--kp-primary); border-bottom-color: var(--kp-primary); } .collection-tab:hover { color: var(--kp-primary); } .run-setup-hint { margin-top: 0; margin-bottom: 12px; } .collection-list { width: 38%; min-width: 330px; margin-right: 16px; 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); } .collection-detail { flex-grow: 1; min-width: 0; min-height: 0; padding: 0; 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); } .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; margin-top: 12px; margin-bottom: 12px; padding-top: 10px; padding-bottom: 10px; border-top-width: 1px; border-bottom-width: 1px; border-top-color: var(--kp-border); border-bottom-color: var(--kp-border); overflow: hidden; } .version-upgrade-panel { flex-shrink: 0; margin-top: 4px; margin-bottom: 10px; padding: 10px 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); } .version-upgrade-summary { flex-direction: row; align-items: center; margin-bottom: 4px; } .version-upgrade-current { flex-grow: 1; min-width: 0; color: var(--kp-primary); -unity-font-style: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .version-upgrade-wallet { color: var(--kp-muted); min-width: 110px; -unity-text-align: middle-right; } .version-upgrade-wallet-affordable { color: var(--kp-primary); } .version-upgrade-wallet-warning { color: var(--kp-amber); } .version-upgrade-next { color: var(--kp-muted); font-size: 13px; white-space: normal; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; } .version-upgrade-command { min-height: 26px; flex-direction: row; align-items: center; padding-left: 8px; padding-right: 8px; border-left-width: 2px; border-left-color: var(--kp-primary); background-color: var(--kp-hover); transition-property: background-color; transition-duration: 120ms; } .version-upgrade-command:hover { background-color: var(--kp-panel); } .version-upgrade-command-text { flex-grow: 1; min-width: 0; color: var(--kp-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .version-upgrade-command-state { color: var(--kp-muted); min-width: 120px; -unity-text-align: middle-right; } .version-path { flex-direction: row; flex-wrap: wrap; margin-top: 8px; } .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); } .version-path-next { color: var(--kp-amber); -unity-font-style: bold; } .version-path-locked { color: var(--kp-muted); opacity: 0.65; } .collection-detail-values { flex-grow: 1; min-width: 0; padding-left: 12px; } .collection-detail .kv-value { max-width: none; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .collection-row { min-height: 44px; padding: 8px 10px; border-left-width: 2px; border-left-color: transparent; transition-property: background-color, border-left-color; transition-duration: 120ms; } .collection-row.selected { background-color: var(--kp-hover); border-left-color: var(--kp-primary); } .collection-row.locked { opacity: 0.55; } .collection-row-name { font-size: 16px; -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); } .packages-master-detail { flex-grow: 1; min-height: 0; flex-direction: row; } .packages-slot-list { width: 46%; min-width: 0; margin-right: 14px; } .packages-detail-panel { flex-grow: 1; min-width: 0; 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); } .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-row.selected { border-left-color: var(--kp-primary); background-color: var(--kp-hover); } .package-slot-label { width: 76px; min-width: 76px; color: var(--kp-muted); font-size: 12px; } .package-slot-name { width: 128px; min-width: 95px; color: var(--kp-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .package-slot-rarity { width: 40px; min-width: 40px; -unity-text-align: middle-center; } .package-slot-level { width: 58px; min-width: 58px; 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); } .collection-detail-name { font-size: 22px; -unity-font-style: bold; margin-bottom: 8px; } .collection-detail-description { color: var(--kp-primary); white-space: normal; margin-top: 4px; margin-bottom: 12px; } .collection-command-row { margin-top: 18px; } .collection-command-row .command-description { width: 190px; } .collection-card-row { margin-top: 6px; } .detail-section-title { color: var(--kp-primary); -unity-font-style: bold; margin-top: 8px; margin-bottom: 4px; white-space: normal; } .flavor-text, .package-flavor { color: var(--kp-muted); -unity-font-style: italic; white-space: normal; margin-bottom: 10px; } .package-list { min-width: 0; flex-grow: 1; } .package-scroll { flex-grow: 1; min-height: 0; margin-top: 18px; } .package-header { color: var(--kp-muted); margin-bottom: 6px; } .run-language-header { margin-top: 14px; } .package-notice { color: var(--kp-amber); margin-bottom: 8px; white-space: normal; } .package-empty { color: var(--kp-muted); margin-top: 6px; } .package-row { min-width: 0; padding: 7px 10px; margin-top: 4px; border-left-width: 2px; border-left-color: transparent; transition-property: background-color, border-left-color; transition-duration: 120ms; } .package-row.selected, .package-row.equipped { border-left-color: var(--kp-primary); } .package-row.selected { background-color: var(--kp-hover); } .package-row.dimmed { opacity: 0.45; } .package-summary { min-width: 0; flex-direction: row; } .package-marker { width: 34px; min-width: 34px; } .package-name { flex-grow: 1; min-width: 0; color: var(--kp-primary); white-space: normal; } .package-meta { width: 92px; min-width: 92px; color: var(--kp-muted); -unity-text-align: upper-right; } .loadout-card-row .package-name { flex-grow: 1; } .loadout-card-row .package-meta { width: 104px; min-width: 104px; } .package-description { min-width: 0; color: var(--kp-muted); white-space: normal; margin-left: 34px; margin-top: 2px; } .package-flavor { margin-left: 34px; margin-top: 2px; } .run-readout { min-height: 112px; max-height: 122px; flex-direction: row; overflow: hidden; } .run-readout .ascii-art, .run-readout .ascii-placeholder { width: 100px; min-width: 100px; height: 100px; } .run-readout-copy { flex-grow: 1; min-width: 0; padding-left: 14px; } .run-readout .collection-detail-name { margin-bottom: 4px; } .run-readout .collection-detail-description { margin-top: 0; margin-bottom: 6px; } .run-stat-line { margin-top: 0; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .run-passive-block { flex-shrink: 0; margin-top: 10px; margin-bottom: 8px; } .run-passive-rules { color: var(--kp-primary); white-space: normal; } .run-passive-flavor { color: var(--kp-muted); -unity-font-style: italic; white-space: normal; margin-top: 4px; } .boot-command-row { min-height: 42px; margin-top: 12px; border-left-color: var(--kp-primary); } .boot-command-row.disabled-row { opacity: 0.45; } .collection-equip-row { margin-top: 18px; } .modal-overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; align-items: center; justify-content: center; background-color: rgba(5, 8, 7, 0.88); opacity: 0; transition-property: opacity; transition-duration: 160ms; } .modal-overlay.modal-open { opacity: 1; } .modal-overlay > .starter-dialog, .modal-overlay > .root-credit-dialog { scale: 0.94 0.94; transition-property: scale; transition-duration: 160ms; } .modal-overlay.modal-open > .starter-dialog, .modal-overlay.modal-open > .root-credit-dialog { scale: 1 1; } .starter-dialog { width: 900px; padding: 22px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-left-color: var(--kp-primary); border-right-color: var(--kp-primary); border-top-color: var(--kp-primary); border-bottom-color: var(--kp-primary); background-color: var(--kp-bg-solid); } .root-credit-dialog { position: relative; width: 82%; height: 72%; padding: 28px; justify-content: center; 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); background-color: var(--kp-bg-solid); } .modal-close-button { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding-left: 0; padding-right: 0; 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); background-color: transparent; color: var(--kp-amber); -unity-text-align: middle-center; transition-property: color, border-left-color, border-right-color, border-top-color, border-bottom-color; transition-duration: 120ms; } .modal-close-button:hover { color: var(--kp-primary); border-left-color: var(--kp-primary); border-right-color: var(--kp-primary); border-top-color: var(--kp-primary); border-bottom-color: var(--kp-primary); } .exchange-summary { margin-top: 8px; margin-bottom: 18px; } .exchange-summary .kv-key { width: 150px; min-width: 150px; } .exchange-summary .kv-value { max-width: none; color: var(--kp-amber); } .exchange-input { margin-bottom: 18px; } .exchange-input Label { color: var(--kp-muted); } .exchange-input TextInput { color: var(--kp-primary); background-color: var(--kp-panel); } .exchange-step-row, .exchange-confirm-row { flex-direction: row; margin-top: 10px; } .exchange-step-button { width: 120px; margin-right: 12px; } .exchange-confirm-button { width: 320px; min-height: 46px; margin-right: 12px; white-space: normal; -unity-text-align: middle-center; } .starter-title { color: var(--kp-primary); font-size: 24px; -unity-font-style: bold; margin-bottom: 8px; } .starter-instruction { color: var(--kp-muted); margin-bottom: 18px; } .starter-options { flex-direction: row; } .starter-card { width: 270px; min-height: 190px; margin-right: 14px; padding: 14px; 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); transition-property: background-color, border-left-color, border-right-color, border-top-color, border-bottom-color, scale; transition-duration: 140ms; } .starter-card:hover { scale: 1.015 1.015; } .starter-card.selected { background-color: var(--kp-hover); } .starter-name { font-size: 20px; -unity-font-style: bold; margin-bottom: 8px; } .starter-languages { color: var(--kp-muted); margin-bottom: 12px; } .starter-description { color: var(--kp-primary); white-space: normal; } .starter-confirm { margin-top: 18px; color: var(--kp-amber); } .starter-error { margin-bottom: 18px; color: var(--kp-amber); white-space: normal; } .terminal-button { height: 42px; margin-top: 24px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-left-color: var(--kp-primary); border-right-color: var(--kp-primary); border-top-color: var(--kp-primary); border-bottom-color: var(--kp-primary); background-color: var(--kp-panel); color: var(--kp-primary); font-size: 16px; transition-property: background-color, color; transition-duration: 120ms; } .terminal-button:hover { background-color: var(--kp-primary); color: var(--kp-bg); } .settings-row { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding: 16px; 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); } .disabled-row { opacity: 0.55; } .settings-label, .settings-toggle, .prompt-text { color: var(--kp-primary); } .scene-fade-curtain { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgb(0, 0, 0); opacity: 0; transition-property: opacity; transition-duration: 200ms; } .scene-fade-curtain.scene-fade-visible { opacity: 1; } .gacha-result-block { margin-top: 8px; } .gacha-result-list { flex-direction: column; margin-top: 8px; } .gacha-result-card { flex-direction: row; align-items: center; min-height: 26px; padding-left: 8px; padding-right: 8px; margin-bottom: 4px; border-left-width: 2px; border-left-color: var(--kp-primary-dim); background-color: var(--kp-hover); color: var(--kp-primary); opacity: 1; translate: 0 0; scale: 1 1; transition-property: opacity, translate, scale, border-left-color, background-color; transition-duration: 220ms; } .gacha-result-card-hidden { opacity: 0; translate: -12px 0; scale: 0.96 0.96; } .gacha-result-card-shown { opacity: 1; translate: 0 0; scale: 1 1; } .gacha-result-card-rare { border-left-color: var(--kp-primary); } .gacha-result-card-legendary { border-left-color: var(--kp-amber); color: var(--kp-amber); } .gacha-result-card-flash { background-color: var(--kp-amber); color: var(--kp-bg); transition-property: background-color, color; transition-duration: 90ms; } .reduced-motion .scene-fade-curtain, .reduced-motion .modal-overlay, .reduced-motion .modal-overlay > .starter-dialog, .reduced-motion .modal-overlay > .root-credit-dialog, .reduced-motion .command-row, .reduced-motion .gacha-banner-row, .reduced-motion .collection-tab, .reduced-motion .collection-row, .reduced-motion .package-row, .reduced-motion .starter-card, .reduced-motion .terminal-button, .reduced-motion .currency-plus-button, .reduced-motion .modal-close-button, .reduced-motion .version-upgrade-command, .reduced-motion .gacha-result-card { transition-duration: 0ms; }