Skip to content

design: reduce visual noise, drop dead CSS, align Terminal with design system #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rdtect merged 2 commits into from
Mar 14, 2026
Merged

design: reduce visual noise, drop dead CSS, align Terminal with design system #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff72dda
Initial plan
Copilot Mar 12, 2026
c4affc5
design: clean background layers, reduce aurora, align terminal colors…
Copilot Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/desktop/plugins/terminal/src/Terminal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', 'Consolas', monospace;
font-size: 14px;
line-height: 1.4;
color: #33ff33;
color: #f8fafc;
padding: 8px;
overflow: hidden;
cursor: text;
Expand Down Expand Up @@ -384,7 +384,7 @@
}

.prompt {
color: #33ff33;
color: #6366f1;
white-space: nowrap;
margin-right: 8px;
}
Expand All @@ -397,7 +397,7 @@
color: #f8fafc;
font-family: inherit;
font-size: inherit;
caret-color: #33ff33;
caret-color: #6366f1;
}

.input::selection {
Expand Down
125 changes: 4 additions & 121 deletions apps/desktop/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,22 +64,6 @@ body {
100% { background-position: 0% 50%; }
}

/* Radial gradient overlays */
.bg-desktop-overlay {
background:
radial-gradient(ellipse 80% 50% at 20% 20%, rgba(var(--desktop-accent-rgb), 0.12) 0%, transparent 50%),
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
radial-gradient(ellipse 50% 30% at 50% 10%, rgba(59, 130, 246, 0.06) 0%, transparent 40%),
radial-gradient(ellipse 40% 60% at 90% 40%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
}

/* Noise texture overlay */
.bg-desktop-noise {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.03;
pointer-events: none;
}

/* Aurora-like animated glow */
.bg-desktop-aurora {
position: absolute;
Expand All @@ -99,15 +83,15 @@ body {

.bg-desktop-aurora::before {
background:
radial-gradient(circle at 30% 20%, rgba(var(--desktop-accent-rgb), 0.18) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.12) 0%, transparent 40%);
radial-gradient(circle at 30% 20%, rgba(var(--desktop-accent-rgb), 0.10) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.06) 0%, transparent 40%);
animation: aurora-move-1 15s ease-in-out infinite;
}

.bg-desktop-aurora::after {
background:
radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
radial-gradient(circle at 20% 70%, rgba(168, 85, 247, 0.08) 0%, transparent 40%);
radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
radial-gradient(circle at 20% 70%, rgba(168, 85, 247, 0.04) 0%, transparent 40%);
animation: aurora-move-2 18s ease-in-out infinite;
}

Expand Down Expand Up @@ -181,107 +165,6 @@ body {
outline-offset: 2px;
}

/* ====================================
Boot Screen Animations
==================================== */

/* Shimmer effect for glass panels */
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}

.animate-shimmer {
animation: shimmer 2s ease-in-out infinite;
}

/* Progress bar shimmer */
@keyframes progress-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(300%); }
}

.animate-progress-shimmer {
animation: progress-shimmer 1.5s ease-in-out infinite;
}

/* Slow spinning for orbital elements */
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.animate-spin-slow {
animation: spin-slow 4s linear infinite;
}

/* Reverse spin */
@keyframes spin-reverse {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}

.animate-spin-reverse {
animation: spin-reverse 6s linear infinite;
}

/* Even slower spin for outer orbit */
@keyframes spin-slower {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.animate-spin-slower {
animation: spin-slower 8s linear infinite;
}

/* Logo pulse animation */
@keyframes logo-pulse {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 20px rgba(var(--desktop-accent-rgb), 0.5));
}
50% {
transform: scale(1.05);
filter: drop-shadow(0 0 30px rgba(var(--desktop-accent-rgb), 0.8));
}
}

.animate-logo-pulse {
animation: logo-pulse 2s ease-in-out infinite;
}

/* Pulsing glow for logo background */
@keyframes pulse-glow-bg {
0%, 100% {
transform: scale(1);
opacity: 0.2;
}
50% {
transform: scale(1.3);
opacity: 0.4;
}
}

/* Text glow animation */
@keyframes text-glow {
0%, 100% {
text-shadow: 0 0 10px rgba(var(--desktop-accent-rgb), 0.3);
}
50% {
text-shadow: 0 0 20px rgba(var(--desktop-accent-rgb), 0.6), 0 0 30px rgba(var(--desktop-accent-rgb), 0.4);
}
}

.animate-text-glow {
animation: text-glow 2s ease-in-out infinite;
}

/* Duration utility for fade transitions */
.duration-600 {
transition-duration: 600ms;
}

/* ====================================
Window Snap Preview
==================================== */
Expand Down
7 changes: 1 addition & 6 deletions apps/desktop/src/lib/shell/Desktop.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -544,14 +544,9 @@

<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="fixed inset-0 overflow-hidden font-sans" oncontextmenu={showDesktopContextMenu}>
<!-- Desktop background: 3 layers (gradient, aurora, noise) -->
<!-- Desktop background: gradient + aurora -->
<div class="absolute inset-0 bg-desktop-gradient">
<!-- Layer 1: Base gradient (via bg-desktop-gradient class) -->
<!-- Layer 2: Aurora glow effect -->
<div class="bg-desktop-aurora"></div>
<div class="absolute inset-0 bg-desktop-overlay"></div>
<!-- Layer 3: Noise texture for depth -->
<div class="absolute inset-0 bg-desktop-noise"></div>
</div>

<!-- Desktop area with icons and widgets -->
Expand Down
Loading