ken/muxplex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: match preview styling to xterm.js — palette, background, font, line-height

Browse Source 
ANSI_COLORS: replaced with xterm.js default GTK/Tango palette.
Background: #000000 on tile-body, sidebar-item-body, preview-popover.
Font: 'SF Mono', 'Fira Code', Consolas, monospace (same as terminal).
Line-height: 1.0 across all preview surfaces (xterm.js default).
Gradient overlays: fade to #000 instead of theme bg.
Result: previews are visually indistinguishable from the terminal.
This commit is contained in:
Brian Krabach
2026-03-29 19:19:05 -07:00
parent 85298abdcc
commit 583de6ec2d
4 changed files with 122 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
muxplex/frontend/style.css
+13 -10
View File
@@ -221,6 +221,7 @@ body {
flex: 1;
overflow: hidden;
position: relative;
background: #000000;
}
.tile-body pre {
@@ -229,8 +230,9 @@ body {
left: 0;
right: 0;
padding: 6px 8px;
font-family: var(--font-mono);
font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
font-size: 11px;
line-height: 1.0;
color: #c9d1d9; /* match xterm.js foreground */
white-space: pre;
overflow: hidden;
@@ -257,7 +259,7 @@ body {
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to bottom, transparent, var(--bg-tile));
background: linear-gradient(to bottom, transparent, #000000);
pointer-events: none;
z-index: 1;
}
@@ -518,6 +520,7 @@ body {
flex: 1;
position: relative;
overflow: hidden;
background: #000000;
}
.sidebar-item-body::before {
@@ -527,13 +530,13 @@ body {
left: 0;
right: 0;
height: 32px;
background: linear-gradient(to bottom, transparent, var(--bg-secondary));
background: linear-gradient(to bottom, transparent, #000000);
pointer-events: none;
z-index: 1;
}
.sidebar-item--active .sidebar-item-body::before {
background: linear-gradient(to bottom, transparent, var(--bg-surface));
background: linear-gradient(to bottom, transparent, #000000);
}
.sidebar-item-body pre {
@@ -541,9 +544,9 @@ body {
bottom: 0;
left: 0;
right: 0;
font-family: var(--font-mono);
font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
font-size: 10px;
line-height: 1.4;
line-height: 1.0;
color: #c9d1d9; /* match xterm.js foreground */
white-space: pre;
padding: 0 8px 6px;
@@ -966,7 +969,7 @@ body {
.preview-popover {
position: fixed;
z-index: 500;
background: var(--bg-secondary);
background: #000000;
border: 2px solid var(--accent);
border-radius: 8px;
padding: 16px 20px;
@@ -982,9 +985,9 @@ body {
.preview-popover pre {
margin: 0;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.5;
font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
font-size: 14px;
line-height: 1.0;
color: #c9d1d9; /* match xterm.js foreground exactly */
white-space: pre-wrap; /* WRAP text instead of horizontal overflow */
word-break: break-all; /* break long lines at viewport edge */