fix shit and stuff

This commit is contained in:
2026-07-03 22:13:28 +02:00
parent 2fc8a05617
commit 36ddc8fa1c
5 changed files with 266 additions and 56 deletions
+183 -16
View File
@@ -1,5 +1,6 @@
:root {
--kp-bg: #050807;
--kp-bg-solid: #050807;
--kp-panel: #09100d;
--kp-primary: #5cff91;
--kp-primary-dim: #2f7a4d;
@@ -16,19 +17,27 @@
font-size: 16px;
}
Label,
Button {
color: var(--kp-primary);
}
.background-log-layer {
position: absolute;
left: 24px;
right: 24px;
top: 0;
bottom: -120px;
opacity: 0.07;
top: 52px;
bottom: 50px;
opacity: 0.04;
overflow: hidden;
}
.background-log {
.background-log-line {
height: 18px;
color: var(--kp-primary);
white-space: normal;
font-size: 14px;
line-height: 18px;
white-space: nowrap;
}
.boot-intro {
@@ -52,6 +61,7 @@
flex-grow: 1;
padding: 18px 24px 16px 24px;
opacity: 1;
justify-content: space-between;
transition-property: opacity;
transition-duration: 220ms;
}
@@ -83,6 +93,7 @@
border-top-width: 0;
border-bottom-width: 1px;
border-bottom-color: var(--kp-border);
background-color: var(--kp-bg-solid);
}
.footer-bar {
@@ -116,19 +127,21 @@
.main-panel {
flex-grow: 1;
justify-content: center;
}
.content-row {
flex-grow: 1;
flex-direction: row;
padding-top: 52px;
padding-bottom: 42px;
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 {
@@ -148,7 +161,7 @@
.tagline {
margin-top: 4px;
margin-bottom: 34px;
margin-bottom: 28px;
font-size: 16px;
}
@@ -157,13 +170,13 @@
}
.command-row {
min-height: 44px;
min-height: 38px;
flex-direction: row;
align-items: center;
padding-left: 10px;
padding-right: 10px;
margin-top: 4px;
margin-bottom: 4px;
margin-top: 3px;
margin-bottom: 3px;
border-left-width: 2px;
border-left-color: transparent;
}
@@ -197,7 +210,8 @@
.featured-panel {
width: 430px;
min-height: 330px;
padding: 18px;
max-height: 340px;
padding: 0;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
@@ -206,10 +220,25 @@
border-right-color: var(--kp-primary);
border-top-color: var(--kp-primary);
border-bottom-color: var(--kp-primary);
background-color: var(--kp-panel);
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-title,
.screen-title {
color: var(--kp-primary);
font-size: 24px;
@@ -219,8 +248,18 @@
.featured-empty {
flex-grow: 1;
justify-content: center;
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 {
@@ -231,31 +270,159 @@
.featured-populated {
flex-direction: row;
padding: 18px;
overflow: hidden;
}
.ascii-art {
width: 150px;
min-width: 150px;
color: var(--kp-primary);
white-space: normal;
}
.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 {
+43 -6
View File
@@ -4,9 +4,7 @@
<ui:Template name="GachaScreen" src="GachaScreen.uxml" />
<ui:Template name="SettingsScreen" src="SettingsScreen.uxml" />
<ui:VisualElement name="Root" class="terminal-root" focusable="true">
<ui:VisualElement name="BackgroundLogLayer" class="background-log-layer" pickingMode="Ignore">
<ui:Label name="BackgroundLogLabel" class="background-log" />
</ui:VisualElement>
<ui:VisualElement name="BackgroundLogLayer" class="background-log-layer" pickingMode="Ignore" />
<ui:VisualElement name="BootIntroPanel" class="boot-intro">
<ui:Label name="BootIntroLogLabel" class="boot-intro-log" />
@@ -61,10 +59,44 @@
</ui:VisualElement>
<ui:VisualElement name="FeaturedUnitPanel" class="featured-panel">
<ui:Label name="FeaturedUnitTitle" text="neofetch" class="featured-title" />
<ui:VisualElement class="featured-title-bar">
<ui:Label name="FeaturedUnitTitle" text="[ neofetch ]" class="featured-title" />
</ui:VisualElement>
<ui:VisualElement name="FeaturedUnitEmptyState" class="featured-empty">
<ui:Label name="FeaturedUnitEmptyTitle" text="no units installed" class="empty-title" />
<ui:Label name="FeaturedUnitEmptyHint" text="run: curl gacha.sh | sh" class="muted-text" />
<ui:VisualElement name="FeaturedUnitEmptyArt" class="ascii-placeholder">
<ui:VisualElement class="dash dash-top dash-01" />
<ui:VisualElement class="dash dash-top dash-02" />
<ui:VisualElement class="dash dash-top dash-03" />
<ui:VisualElement class="dash dash-top dash-04" />
<ui:VisualElement class="dash dash-top dash-05" />
<ui:VisualElement class="dash dash-top dash-06" />
<ui:VisualElement class="dash dash-top dash-07" />
<ui:VisualElement class="dash dash-top dash-08" />
<ui:VisualElement class="dash dash-bottom dash-01" />
<ui:VisualElement class="dash dash-bottom dash-02" />
<ui:VisualElement class="dash dash-bottom dash-03" />
<ui:VisualElement class="dash dash-bottom dash-04" />
<ui:VisualElement class="dash dash-bottom dash-05" />
<ui:VisualElement class="dash dash-bottom dash-06" />
<ui:VisualElement class="dash dash-bottom dash-07" />
<ui:VisualElement class="dash dash-bottom dash-08" />
<ui:VisualElement class="dash dash-left dash-v01" />
<ui:VisualElement class="dash dash-left dash-v02" />
<ui:VisualElement class="dash dash-left dash-v03" />
<ui:VisualElement class="dash dash-left dash-v04" />
<ui:VisualElement class="dash dash-left dash-v05" />
<ui:VisualElement class="dash dash-left dash-v06" />
<ui:VisualElement class="dash dash-right dash-v01" />
<ui:VisualElement class="dash dash-right dash-v02" />
<ui:VisualElement class="dash dash-right dash-v03" />
<ui:VisualElement class="dash dash-right dash-v04" />
<ui:VisualElement class="dash dash-right dash-v05" />
<ui:VisualElement class="dash dash-right dash-v06" />
</ui:VisualElement>
<ui:VisualElement class="featured-empty-copy">
<ui:Label name="FeaturedUnitEmptyTitle" text="no units installed" class="empty-title" />
<ui:Label name="FeaturedUnitEmptyHint" text="run: curl gacha.sh | sh" class="muted-text" />
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement name="FeaturedUnitPopulatedState" class="featured-populated hidden">
<ui:Label name="FeaturedUnitAscii" class="ascii-art" />
@@ -99,6 +131,11 @@
<ui:Label name="EventBannerLabel" class="event-banner-text" />
</ui:VisualElement>
<ui:VisualElement name="MotdBlock" class="motd-block">
<ui:Label text="cat /etc/motd" class="motd-header" />
<ui:Label name="MotdBodyLabel" class="motd-body" />
</ui:VisualElement>
<ui:VisualElement class="footer-bar">
<ui:VisualElement class="prompt-row">
<ui:Label text="player@mainframe:~$ " class="prompt-text" />