starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-11-06 21:18:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

style(ui): align floating navigation and canvas radii to 8px

Browse Source
This commit is contained in:
Andras Bacsai
2026-10-14 11:29:35 +02:00
parent e95df9f135
commit b31a458a51
5 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+2 -1
View File
@@ -5438,7 +5438,8 @@ html.dark .canvas-zoom-max {
@media (min-width: 1024px) {
html[data-nav-style="floating"] {
--floating-gap: 0.5rem;
--floating-radius: 12px;
/* Same radius as the content cards (.application-settings-section). */
--floating-radius: 8px;
--floating-line: oklch(0% 0 0 / 0.09);
/* Bottom edge of the top bar panel plus one gap. */
--floating-top: calc(3rem + var(--floating-gap) * 2);
resources/js/canvas/deploy/state.svelte.js
+1 -1
View File
@@ -103,7 +103,7 @@ export function dock(top) {
const topbar = document.querySelector('.app-topbar');
top.removeAttribute('style');
if (desktop && topbar && document.documentElement.dataset.navStyle === 'floating') {
top.className = 'fixed z-40 flex items-center gap-3 rounded-xl border border-neutral-200 bg-white px-2 py-1.5 dark:border-white/[0.08] dark:bg-panel';
top.className = 'fixed z-40 flex items-center gap-3 rounded-lg border border-neutral-200 bg-white px-2 py-1.5 dark:border-white/[0.08] dark:bg-panel';
root.append(top);
const gap = 8;
const head = topbar.getBoundingClientRect();
resources/js/canvas/deploy/styles.js
+2 -2
View File
@@ -28,7 +28,7 @@ const CSS = `
.cv-root.cv-dark { color-scheme: dark; }
.cv-root *, .cv-root *::before, .cv-root *::after { box-sizing: border-box; }
/* Rounded boxes on the backdrop: the top bar and the step list. */
.cv-island { border: 1px solid var(--cv-line); border-radius: 12px; background: var(--cv-island); }
.cv-island { border: 1px solid var(--cv-line); border-radius: 8px; background: var(--cv-island); }
.cv-root svg { width: 1rem; height: 1rem; flex: none; }
.cv-root button:not(.button) { font: inherit; }
@@ -260,7 +260,7 @@ const CSS = `
@media (prefers-reduced-motion: reduce) { .cv-node.blank .cv-port.out::after, .cv-hint::before, .cv-hint span { animation: none; } }
/* Run panel: an island with the steps as status lights, then the logs. */
.cv-run { position: absolute; top: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 10; display: flex; flex-direction: column; width: min(26rem, 45%); overflow: hidden; border: 1px solid var(--cv-line); border-radius: 12px; background: var(--cv-island); box-shadow: 0 20px 48px -20px rgb(0 0 0 / 0.4); }
.cv-run { position: absolute; top: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 10; display: flex; flex-direction: column; width: min(26rem, 45%); overflow: hidden; border: 1px solid var(--cv-line); border-radius: 8px; background: var(--cv-island); box-shadow: 0 20px 48px -20px rgb(0 0 0 / 0.4); }
.cv-run[hidden] { display: none; }
.cv-run header { display: flex; align-items: flex-start; gap: 0.5rem; padding: 1rem 0.75rem 0.875rem 1.25rem; border-bottom: 1px solid var(--cv-line); }
.cv-run header div { display: grid; gap: 0.0625rem; margin-right: auto; }
resources/js/canvas/environment/EnvironmentCanvas.svelte
+2 -2
View File
@@ -236,14 +236,14 @@
const slot = desktop.matches && !floatingBar() && !('toolbarInline' in ds) && document.getElementById('page-toolbar-slot');
bar.removeAttribute('style');
if (floatingBar()) {
bar.className = 'fixed z-40 flex flex-wrap items-center justify-center gap-3 rounded-xl border border-neutral-200 bg-white px-2 py-1.5 dark:border-white/[0.08] dark:bg-panel';
bar.className = 'fixed z-40 flex flex-wrap items-center justify-center gap-3 rounded-lg border border-neutral-200 bg-white px-2 py-1.5 dark:border-white/[0.08] dark:bg-panel';
bodyEl.append(bar);
alignFloatingBar();
} else if (slot) {
bar.className = 'flex items-center gap-3 pl-3';
slot.append(bar);
} else {
bar.className = 'flex shrink-0 flex-wrap items-center gap-3 rounded-xl border border-neutral-200 bg-white px-3 py-2.5 dark:border-white/[0.08] dark:bg-panel';
bar.className = 'flex shrink-0 flex-wrap items-center gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 dark:border-white/[0.08] dark:bg-panel';
barSlot.append(bar);
panelTop = '';
}
resources/js/canvas/environment/Panel.svelte
+1 -1
View File
@@ -72,7 +72,7 @@
{/snippet}
{#snippet shell(title, iconSource, body, footer)}
<aside class="absolute top-3 right-3 bottom-3 z-20 flex w-80 max-w-[calc(100%-1.5rem)] flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-lg dark:border-white/[0.08] dark:bg-panel" style:top={top || null} data-ec-panel>
<aside class="absolute top-3 right-3 bottom-3 z-20 flex w-80 max-w-[calc(100%-1.5rem)] flex-col overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-lg dark:border-white/[0.08] dark:bg-panel" style:top={top || null} data-ec-panel>
<div class="flex items-center gap-2.5 px-4 py-3">
<div class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-fg-dim">
{#if typeof iconSource === 'string'}<Icon name={iconSource} class="size-4" />{:else}<NodeIcon node={iconSource} />{/if}