tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-09-03 04:18:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(terminal): lazy-load targets and polish theme UI

Browse Source 
Defer container loading with wire:init and a containersLoaded gate,
add autoStart/starting session state, extract a shared theme selector,
and restyle terminal headers, pickers, and fullscreen chrome. Cover the
new packaging and header behavior in feature tests.
This commit is contained in:
Andras Bacsai
2026-08-07 14:14:26 +02:00
parent 7c6d00c8de
commit 8ae9c03209
10 changed files with 651 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+105 -25
View File
@@ -500,11 +500,6 @@ html:not(.dark) .application-console-shell[data-console-theme="system"] .applica
backdrop-filter: none;
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .application-console-block::before {
background: transparent;
backdrop-filter: none;
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .application-console-header [class*="text-white"] {
color: #52525b !important;
}
@@ -678,7 +673,7 @@ body.terminal-is-fullscreen .terminal-fullscreen-shell {
inset: 0 !important;
z-index: 100000 !important;
width: 100vw !important;
height: 100dvh !important;
height: auto !important;
max-width: none !important;
margin: 0 !important;
overflow: hidden !important;
@@ -707,25 +702,111 @@ body.terminal-is-fullscreen .terminal-fullscreen-shell [data-terminal-mobile-too
backdrop-filter: blur(20px);
}
.terminal-loading-label {
font-size: 0.875rem;
font-weight: 500;
color: rgb(255 255 255 / 0.75);
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-loading-label {
color: #52525b;
}
.terminal-session-expiry {
font-size: 0.75rem;
font-weight: 500;
color: rgb(255 255 255 / 0.6);
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-session-expiry,
html:not(.dark) .terminal-fullscreen-shell[data-console-theme="system"] .terminal-session-expiry {
color: #52525b;
}
.terminal-target-picker {
color: rgb(255 255 255 / 0.75);
background: rgb(0 0 0 / 0.18);
border-color: rgb(255 255 255 / 0.1);
backdrop-filter: blur(16px);
}
.terminal-session-panel {
border: 0;
border-radius: 0.75rem;
background: transparent;
box-shadow: none;
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-session-panel {
background: transparent;
}
.terminal-target-list {
scrollbar-width: thin;
scrollbar-color: var(--terminal-scrollbar, rgb(255 255 255 / 0.3)) transparent;
}
.terminal-target-list::-webkit-scrollbar {
width: 8px;
}
.terminal-target-list::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 9999px;
background: var(--terminal-scrollbar, rgb(255 255 255 / 0.3));
background-clip: padding-box;
}
.terminal-target-list::-webkit-scrollbar-track {
background: transparent;
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-target-picker {
color: #52525b;
background: #fff;
border-color: #d4d4d8;
box-shadow: 0 18px 50px rgb(0 0 0 / 0.18);
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-target-picker [class*="text-white"] {
color: #52525b !important;
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-target-picker input {
color: #27272a !important;
background: #f4f4f5 !important;
border-color: #d4d4d8 !important;
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-target-picker input::placeholder {
color: #71717a !important;
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-target-picker button:hover {
color: #18181b !important;
background: #f4f4f5;
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-theme-trigger {
color: #52525b;
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-session-target-trigger {
color: #52525b;
}
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-theme-trigger:hover,
html:not(.dark) .application-console-shell[data-console-theme="system"] .terminal-session-target-trigger:hover {
color: #18181b;
background: rgb(0 0 0 / 0.06);
}
.application-console-block {
/* Keep backdrop blur on a pseudo-element so position:fixed descendants
(terminal fullscreen) are not trapped by a backdrop-filter containing block. */
position: relative;
z-index: 1;
isolation: isolate;
}
.application-console-block::before {
position: absolute;
z-index: -1;
inset: 0;
border-radius: inherit;
background: rgb(0 0 0 / 0.56);
backdrop-filter: blur(10px);
content: "";
pointer-events: none;
}
.terminal-fullscreen-btn {
display: flex;
width: 1.75rem;
@@ -733,10 +814,9 @@ body.terminal-is-fullscreen .terminal-fullscreen-shell [data-terminal-mobile-too
align-items: center;
justify-content: center;
border-radius: 0.375rem;
border: 1px solid rgb(255 255 255 / 0.08);
background: rgb(0 0 0 / 0.55);
color: rgb(255 255 255 / 0.65);
backdrop-filter: blur(8px);
border: 0;
background: transparent;
color: var(--terminal-scrollbar, rgb(255 255 255 / 0.65));
transition:
background-color 150ms ease,
color 150ms ease,
@@ -744,8 +824,8 @@ body.terminal-is-fullscreen .terminal-fullscreen-shell [data-terminal-mobile-too
}
.terminal-fullscreen-btn:hover {
background: rgb(255 255 255 / 0.08);
color: rgb(255 255 255 / 0.95);
background: color-mix(in srgb, var(--terminal-scrollbar, #fff) 18%, transparent);
color: var(--terminal-scrollbar, #fff);
}
/*