m4xx1m/convert
1
0 Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 4 Wiki Activity

style(ui): professional rectangular grayscale theme (Premiere/Resolve style without rounded corners)
Build Windows Installer / build (push) Successful in 24m16s
Details

Browse Source
This commit is contained in:
m4xx1m committed 2026-11-12 20:45:52 +03:00
1 parent 99d8e97f83
commit b68a63ee48
2 files changed
+302 -234
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/style.css
+297 -229
View File
@@ -1,18 +1,38 @@
:root { :root {
--bg: #0b0f17; /* Premiere / Pro-NLE Grayscale Palette */
--panel: #111827; --bg: #1c1c1c;
--panel-2: #161f30; --panel: #252525;
--border: #243044; --panel-2: #2b2b2b;
--text: #f1f5f9; --panel-hover: #343434;
--muted: #94a3b8; --panel-active: #3e3e3e;
--cyan: #06b6d4; --border: #383838;
--cyan-glow: rgba(6, 182, 212, 0.25); --border-light: #484848;
--violet: #8b5cf6; --border-focus: #6e6e6e;
--green: #10b981;
--red: #ef4444; --text: #cccccc;
--amber: #f59e0b; --text-bright: #f0f0f0;
--radius: 10px; --muted: #858585;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --dim: #5c5c5c;
/* Restrained Professional Accents */
--accent: #4a82c2;
--accent-hover: #5d93d4;
--accent-active: #3c6ea5;
--accent-glow: rgba(74, 130, 194, 0.22);
--trim-in: #4a82c2;
--trim-out: #8ba7c7;
--trim-band: rgba(74, 130, 194, 0.28);
--green: #4e8e5d;
--green-bg: rgba(78, 142, 93, 0.16);
--red: #a84646;
--red-bg: rgba(168, 70, 70, 0.16);
--amber: #a87d3e;
--amber-bg: rgba(168, 125, 62, 0.16);
--radius: 0px;
--mono: 'Cascadia Mono', 'Consolas', 'Segoe UI Mono', ui-monospace, Menlo, Monaco, monospace;
} }
* { * {
@@ -26,33 +46,32 @@ body {
height: 100%; height: 100%;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px; font-size: 12px;
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
-webkit-font-smoothing: antialiased;
} }
/* Custom sleek dark scrollbars (eliminates default white Windows scrollbars) */ /* Professional Flat Dark Scrollbars */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 7px; width: 8px;
height: 7px; height: 8px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; background: #181818;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15); background: #3c3c3c;
border-radius: 999px; border-radius: 0;
border: 1px solid transparent; border: 1px solid #181818;
background-clip: padding-box;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3); background: #505050;
background-clip: padding-box;
} }
* { * {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.18) transparent; scrollbar-color: #3c3c3c #181818;
} }
#app { #app {
@@ -61,27 +80,26 @@ body {
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
background: var(--bg); background: var(--bg);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid var(--border);
border-radius: 8px; border-radius: 0;
overflow: hidden; overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
transition: border-radius 0.15s ease, border 0.15s ease;
} }
body.maximized #app { body.maximized #app {
border: none; border: none;
border-radius: 0;
box-shadow: none; box-shadow: none;
} }
/* Top Bar */ /* Top Bar / Titlebar */
.topbar { .topbar {
--wails-draggable: drag; --wails-draggable: drag;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 10px;
padding: 6px 0 6px 14px; padding: 0 0 0 12px;
height: 34px;
background: var(--panel); background: var(--panel);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
flex-shrink: 0; flex-shrink: 0;
@@ -96,11 +114,11 @@ body.maximized #app {
--wails-draggable: no-drag; --wails-draggable: no-drag;
} }
/* Window Control Buttons (Minimize, Maximize, Close) */ /* Window Controls (Minimize, Maximize, Close) */
.win-controls { .win-controls {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
height: 36px; height: 100%;
margin-left: 4px; margin-left: 4px;
--wails-draggable: no-drag; --wails-draggable: no-drag;
} }
@@ -117,56 +135,60 @@ body.maximized #app {
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
padding: 0 !important; padding: 0 !important;
transition: background 0.12s ease, color 0.12s ease; transition: background 0.1s ease, color 0.1s ease;
} }
.win-btn:hover { .win-btn:hover {
background: rgba(255, 255, 255, 0.08) !important; background: #333333 !important;
color: var(--text) !important; color: var(--text-bright) !important;
} }
.win-btn.close:hover { .win-btn.close:hover {
background: #e81123 !important; background: #c42b1c !important;
color: #fff !important; color: #ffffff !important;
} }
.brand { .brand {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
} }
.brand-icon { .brand-icon {
width: 28px; width: 20px;
height: 28px; height: 20px;
border-radius: 7px; border-radius: 0;
background: linear-gradient(135deg, var(--cyan), var(--violet)); background: #333333;
border: 1px solid var(--border-light);
display: grid; display: grid;
place-items: center; place-items: center;
font-weight: 800; font-weight: 700;
color: #fff; color: var(--accent);
font-size: 14px; font-size: 11px;
} }
.brand-title { .brand-title {
font-weight: 700; font-weight: 700;
font-size: 15px; font-size: 12px;
letter-spacing: 0.2px; letter-spacing: 0.5px;
color: var(--text-bright);
text-transform: uppercase;
} }
.badge { .badge {
font-size: 11px; font-size: 10px;
padding: 2px 7px; padding: 1px 5px;
border-radius: 999px; border-radius: 0;
background: var(--panel-2); background: #202020;
border: 1px solid var(--border); border: 1px solid var(--border);
color: var(--muted); color: var(--muted);
font-family: var(--mono);
} }
.topbar-center { .topbar-center {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
min-width: 0; min-width: 0;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
@@ -176,18 +198,19 @@ body.maximized #app {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
background: var(--panel-2); background: #202020;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 5px 12px; padding: 3px 10px;
border-radius: 999px; border-radius: 0;
max-width: 520px; max-width: 520px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 11px;
} }
.file-pill strong { .file-pill strong {
color: var(--text); color: var(--text-bright);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@@ -201,82 +224,98 @@ body.maximized #app {
.topbar-right { .topbar-right {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 6px;
height: 100%;
} }
/* Buttons */ /* Professional Flat Buttons */
button { button {
font-family: inherit; font-family: inherit;
font-size: 12px; font-size: 11px;
font-weight: 600; font-weight: 600;
border: 1px solid var(--border); border: 1px solid var(--border-light);
background: var(--panel-2); background: var(--panel-2);
color: var(--text); color: var(--text);
padding: 6px 12px; padding: 5px 10px;
border-radius: 7px; border-radius: 0;
cursor: pointer; cursor: pointer;
transition: all 0.14s ease; transition: all 0.1s ease;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 5px;
line-height: 1.2;
} }
button:hover:not(:disabled) { button:hover:not(:disabled) {
border-color: var(--cyan); border-color: var(--border-focus);
background: #1c283d; background: var(--panel-hover);
color: var(--text-bright);
}
button:active:not(:disabled) {
background: var(--panel-active);
} }
button:disabled { button:disabled {
opacity: 0.45; opacity: 0.35;
cursor: not-allowed; cursor: not-allowed;
border-color: var(--border);
} }
button.primary { button.primary {
background: linear-gradient(135deg, #0891b2, #4f46e5); background: var(--accent-active);
border-color: transparent; border-color: var(--accent);
color: #fff; color: #ffffff;
} }
button.primary:hover:not(:disabled) { button.primary:hover:not(:disabled) {
filter: brightness(1.1); background: var(--accent);
border-color: var(--accent-hover);
color: #ffffff;
} }
button.danger { button.danger {
background: rgba(239, 68, 68, 0.16); background: var(--red-bg);
border-color: rgba(239, 68, 68, 0.5); border-color: var(--red);
color: #fca5a5; color: #e57373;
}
button.danger:hover:not(:disabled) {
background: rgba(168, 70, 70, 0.28);
} }
button.pill-active { button.pill-active {
background: var(--cyan-glow); background: #383838;
border-color: var(--cyan); border-color: var(--accent);
color: #cffafe; color: var(--text-bright);
} }
.status-pill { .status-pill {
font-size: 11px; font-size: 10px;
padding: 5px 10px; padding: 3px 8px;
border-radius: 999px; border-radius: 0;
font-family: var(--mono);
} }
.status-pill.ok { .status-pill.ok {
background: rgba(16, 185, 129, 0.14); background: var(--green-bg);
border-color: rgba(16, 185, 129, 0.4); border-color: var(--green);
color: #6ee7b7; color: #98c998;
} }
.status-pill.warn { .status-pill.warn {
background: rgba(245, 158, 11, 0.16); background: var(--amber-bg);
border-color: rgba(245, 158, 11, 0.5); border-color: var(--amber);
color: #fcd34d; color: #e0b06b;
} }
/* Main Layout */ /* Main Workspace Grid */
.workspace { .workspace {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) 390px; grid-template-columns: minmax(0, 1fr) 390px;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
background: var(--bg);
} }
/* Left Stage */ /* Left Stage */
@@ -285,17 +324,17 @@ button.pill-active {
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
padding: 14px; padding: 10px;
gap: 12px; gap: 10px;
} }
.player-wrap { .player-wrap {
position: relative; position: relative;
flex: 1; flex: 1;
min-height: 240px; min-height: 240px;
background: #05070b; background: #141414;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -315,47 +354,49 @@ video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
background: #000; background: #000000;
} }
.drop-overlay { .drop-overlay {
position: absolute; position: absolute;
inset: 14px; inset: 10px;
border: 2px dashed var(--border); border: 1px dashed var(--border-light);
border-radius: var(--radius); border-radius: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 8px;
text-align: center; text-align: center;
color: var(--muted); color: var(--muted);
background: rgba(11, 15, 23, 0.85); background: rgba(20, 20, 20, 0.92);
cursor: pointer; cursor: pointer;
} }
.drop-overlay.drag-over { .drop-overlay.drag-over {
border-color: var(--cyan); border-color: var(--accent);
background: rgba(6, 182, 212, 0.08); background: rgba(74, 130, 194, 0.08);
color: var(--text); color: var(--text-bright);
} }
.drop-overlay h2 { .drop-overlay h2 {
margin: 0; margin: 0;
font-size: 18px; font-size: 16px;
color: var(--text); color: var(--text-bright);
font-weight: 600;
} }
.proxy-banner { .proxy-banner {
position: absolute; position: absolute;
top: 10px; top: 8px;
left: 10px; left: 8px;
background: rgba(15, 23, 42, 0.85); background: rgba(28, 28, 28, 0.92);
border: 1px solid var(--cyan); border: 1px solid var(--border-focus);
color: #cffafe; color: var(--text-bright);
padding: 5px 10px; padding: 4px 8px;
border-radius: 6px; border-radius: 0;
font-size: 11px; font-size: 10px;
font-family: var(--mono);
z-index: 5; z-index: 5;
} }
@@ -368,51 +409,51 @@ video {
.crop-box { .crop-box {
position: absolute; position: absolute;
border: 2px solid var(--cyan); border: 1px solid #ffffff;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.58); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
cursor: move; cursor: move;
pointer-events: auto; pointer-events: auto;
} }
.crop-handle { .crop-handle {
position: absolute; position: absolute;
width: 11px; width: 9px;
height: 11px; height: 9px;
background: #fff; background: #ffffff;
border: 2px solid var(--cyan); border: 1px solid #000000;
border-radius: 2px; border-radius: 0;
} }
.crop-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; } .crop-handle.nw { top: -5px; left: -5px; cursor: nwse-resize; }
.crop-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; } .crop-handle.ne { top: -5px; right: -5px; cursor: nesw-resize; }
.crop-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; } .crop-handle.sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.crop-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; } .crop-handle.se { bottom: -5px; right: -5px; cursor: nwse-resize; }
/* Transport Bar */ /* Transport Bar */
.transport { .transport {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 8px; gap: 6px;
flex-wrap: wrap; flex-wrap: wrap;
background: var(--panel); background: var(--panel);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: 0;
padding: 8px 12px; padding: 6px 10px;
} }
.transport-group { .transport-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 5px;
} }
.time-readout { .time-readout {
font-family: var(--mono); font-family: var(--mono);
font-size: 12px; font-size: 11px;
color: var(--text); color: var(--text-bright);
background: var(--bg); background: #181818;
padding: 4px 8px; padding: 4px 8px;
border-radius: 6px; border-radius: 0;
border: 1px solid var(--border); border: 1px solid var(--border);
} }
@@ -420,19 +461,19 @@ video {
.timeline-card { .timeline-card {
background: var(--panel); background: var(--panel);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: 0;
padding: 10px 12px; padding: 8px 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 8px;
} }
.timeline-track { .timeline-track {
position: relative; position: relative;
height: 54px; height: 52px;
background: #070a10; background: #121212;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 7px; border-radius: 0;
overflow: visible; overflow: visible;
cursor: pointer; cursor: pointer;
} }
@@ -443,14 +484,14 @@ video {
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
overflow: hidden; overflow: hidden;
border-radius: 6px; border-radius: 0;
} }
.filmstrip img { .filmstrip img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
opacity: 0.72; opacity: 0.7;
pointer-events: none; pointer-events: none;
} }
@@ -459,27 +500,29 @@ video {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
background: rgba(5, 7, 11, 0.72); background: rgba(0, 0, 0, 0.75);
pointer-events: none; pointer-events: none;
border-radius: 0;
} }
.trim-dim-left { left: 0; }
.trim-dim-left { left: 0; border-radius: 6px 0 0 6px; } .trim-dim-right { right: 0; }
.trim-dim-right { right: 0; border-radius: 0 6px 6px 0; }
.trim-selection { .trim-selection {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
border-top: 2px solid var(--cyan); background: var(--trim-band);
border-bottom: 2px solid var(--cyan); border-top: 2px solid var(--trim-in);
border-bottom: 2px solid var(--trim-in);
border-radius: 0;
pointer-events: none; pointer-events: none;
} }
.trim-handle { .trim-handle {
position: absolute; position: absolute;
top: -3px; top: -2px;
bottom: -3px; bottom: -2px;
width: 12px; width: 10px;
transform: translateX(-50%); transform: translateX(-50%);
cursor: ew-resize; cursor: ew-resize;
z-index: 4; z-index: 4;
@@ -490,31 +533,30 @@ video {
.trim-handle::before { .trim-handle::before {
content: ''; content: '';
width: 6px; width: 5px;
height: 100%; height: 100%;
border-radius: 3px; border-radius: 0;
} }
.trim-handle.start::before { .trim-handle.start::before {
background: var(--cyan); background: var(--trim-in);
box-shadow: 0 0 8px var(--cyan); box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
} }
.trim-handle.end::before { .trim-handle.end::before {
background: var(--violet); background: var(--trim-out);
box-shadow: 0 0 8px var(--violet); box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
} }
.playhead { .playhead {
position: absolute; position: absolute;
top: -5px; top: -4px;
bottom: -5px; bottom: -4px;
width: 2px; width: 1px;
background: #fff; background: #ffffff;
transform: translateX(-50%); transform: translateX(-50%);
pointer-events: none; pointer-events: none;
z-index: 5; z-index: 5;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
} }
.playhead::before { .playhead::before {
@@ -524,35 +566,38 @@ video {
left: -4px; left: -4px;
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-top: 6px solid #fff; border-top: 6px solid #4a82c2;
} }
.trim-inputs { .trim-inputs {
display: grid; display: grid;
grid-template-columns: 1fr 1fr auto auto auto; grid-template-columns: 1fr 1fr auto auto auto;
gap: 8px; gap: 6px;
align-items: end; align-items: end;
} }
.field-mini { .field-mini {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 2px;
} }
.field-mini label { .field-mini label {
font-size: 11px; font-size: 10px;
color: var(--muted); color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.4px;
} }
.stat-chip { .stat-chip {
background: var(--bg); background: #1a1a1a;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: 0;
padding: 5px 9px; padding: 4px 8px;
font-family: var(--mono); font-family: var(--mono);
font-size: 12px; font-size: 11px;
white-space: nowrap; white-space: nowrap;
color: var(--text);
} }
/* Right Settings Panel */ /* Right Settings Panel */
@@ -567,119 +612,141 @@ video {
.settings-scroll { .settings-scroll {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 14px; padding: 10px;
display: flex;
flex-direction: column;
gap: 14px;
}
.card {
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
.card {
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 0;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.card-title { .card-title {
font-size: 12px; font-size: 11px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.6px;
color: var(--muted); color: var(--muted);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #353535;
padding-bottom: 4px;
} }
.grid-2 { .grid-2 {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 6px;
} }
.grid-4 { .grid-4 {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 6px; gap: 5px;
} }
.field { .field {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 3px;
} }
.field label { .field label {
font-size: 11px; font-size: 10px;
color: var(--muted); color: var(--muted);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
letter-spacing: 0.3px;
} }
input[type='text'], input[type='text'],
input[type='number'], input[type='number'],
select { select {
width: 100%; width: 100%;
background: var(--bg); background: #1c1c1c;
border: 1px solid var(--border); border: 1px solid var(--border-light);
color: var(--text); color: var(--text-bright);
padding: 6px 8px; padding: 5px 7px;
border-radius: 6px; border-radius: 0;
font-family: inherit; font-family: inherit;
font-size: 12px; font-size: 11px;
outline: none; outline: none;
transition: border-color 0.1s ease;
} }
input[type='text']:focus, input[type='text']:focus,
input[type='number']:focus, input[type='number']:focus,
select:focus { select:focus {
border-color: var(--cyan); border-color: var(--border-focus);
} }
input.mono { input.mono {
font-family: var(--mono); font-family: var(--mono);
} }
/* Premiere-Style Rectangular Slider */
input[type='range'] { input[type='range'] {
width: 100%; width: 100%;
accent-color: var(--cyan); accent-color: var(--accent);
background: transparent;
cursor: pointer;
height: 16px;
} }
.pill-row { .pill-row {
display: flex; display: flex;
gap: 5px; gap: 4px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.pill-btn { .pill-btn {
padding: 4px 8px; padding: 4px 8px;
font-size: 11px; font-size: 10px;
border-radius: 6px; border-radius: 0;
background: #242424;
border: 1px solid var(--border-light);
color: var(--text);
}
.pill-btn:hover {
background: #333333;
color: var(--text-bright);
}
.pill-btn.pill-active {
background: #3c3c3c;
border-color: var(--border-focus);
color: #ffffff;
} }
.track-list { .track-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 4px;
} }
.track-item { .track-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 7px;
font-size: 12px; font-size: 11px;
background: var(--bg); background: #202020;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 5px 8px; padding: 4px 7px;
border-radius: 6px; border-radius: 0;
} }
.input-row { .input-row {
display: flex; display: flex;
gap: 6px; gap: 5px;
} }
.input-row input { .input-row input {
@@ -687,39 +754,39 @@ input[type='range'] {
} }
.cli-box { .cli-box {
background: var(--bg); background: #141414;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: 0;
padding: 8px; padding: 6px 8px;
font-family: var(--mono); font-family: var(--mono);
font-size: 11px; font-size: 10px;
color: #a5f3fc; color: #9e9e9e;
word-break: break-all; word-break: break-all;
max-height: 90px; max-height: 80px;
overflow-y: auto; overflow-y: auto;
user-select: text; user-select: text;
} }
/* Sticky Bottom Action */ /* Sticky Bottom Action */
.action-footer { .action-footer {
padding: 12px 14px; padding: 10px;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
background: var(--panel); background: var(--panel);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 6px;
} }
.progress-wrap { .progress-wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 4px;
} }
.progress-bar-bg { .progress-bar-bg {
height: 8px; height: 6px;
background: var(--bg); background: #141414;
border-radius: 999px; border-radius: 0;
overflow: hidden; overflow: hidden;
border: 1px solid var(--border); border: 1px solid var(--border);
} }
@@ -727,7 +794,8 @@ input[type='range'] {
.progress-bar-fill { .progress-bar-fill {
height: 100%; height: 100%;
width: 0%; width: 0%;
background: linear-gradient(90deg, var(--cyan), var(--violet)); background: var(--accent);
border-radius: 0;
transition: width 0.15s linear; transition: width 0.15s linear;
} }
@@ -735,26 +803,26 @@ input[type='range'] {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-family: var(--mono); font-family: var(--mono);
font-size: 11px; font-size: 10px;
color: var(--muted); color: var(--muted);
} }
.done-banner { .done-banner {
background: rgba(16, 185, 129, 0.12); background: #1c261e;
border: 1px solid rgba(16, 185, 129, 0.45); border: 1px solid var(--green);
border-radius: 8px; border-radius: 0;
padding: 9px 10px; padding: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 7px; gap: 6px;
} }
.error-banner { .error-banner {
background: rgba(239, 68, 68, 0.12); background: #2b1d1d;
border: 1px solid rgba(239, 68, 68, 0.45); border: 1px solid var(--red);
border-radius: 8px; border-radius: 0;
padding: 8px 10px; padding: 7px 8px;
color: #fca5a5; color: #e57373;
font-size: 11px; font-size: 11px;
word-break: break-word; word-break: break-word;
user-select: text; user-select: text;
main.go
+5 -5
View File
@@ -46,7 +46,7 @@ func main() {
AssetServer: &assetserver.Options{ AssetServer: &assetserver.Options{
Assets: assets, Assets: assets,
}, },
BackgroundColour: &options.RGBA{R: 11, G: 15, B: 23, A: 1}, BackgroundColour: &options.RGBA{R: 28, G: 28, B: 28, A: 1},
Frameless: true, Frameless: true,
OnStartup: app.startup, OnStartup: app.startup,
OnShutdown: app.shutdown, OnShutdown: app.shutdown,
@@ -57,12 +57,12 @@ func main() {
Windows: &windows.Options{ Windows: &windows.Options{
WebviewIsTransparent: false, WebviewIsTransparent: false,
WindowIsTranslucent: false, WindowIsTranslucent: false,
DisableFramelessWindowDecorations: false, DisableFramelessWindowDecorations: true,
Theme: windows.Dark, Theme: windows.Dark,
CustomTheme: &windows.ThemeSettings{ CustomTheme: &windows.ThemeSettings{
DarkModeTitleBar: windows.RGB(17, 24, 39), DarkModeTitleBar: windows.RGB(37, 37, 37),
DarkModeTitleText: windows.RGB(241, 245, 249), DarkModeTitleText: windows.RGB(212, 212, 212),
DarkModeBorder: windows.RGB(36, 48, 68), DarkModeBorder: windows.RGB(56, 56, 56),
}, },
}, },
Bind: []interface{}{ Bind: []interface{}{