tiennm99/coolify
1
0 Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-10-15 00:17:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): use solid surfaces for deployment indicator states

Browse Source 
Remove deployment opacity fading and translucent dark-theme surfaces, and drop the global listbox hover background rule.
This commit is contained in:
Andras Bacsai committed 2026-08-17 21:38:44 +02:00
1 parent 9d64b30612
commit 92d6fe9d4e
5 files changed
+23 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/css/app.css
-4
View File
@@ -1903,10 +1903,6 @@ html[data-theme="custom"] textarea:disabled {
color: var(--color-fg);
}
.listbox-trigger:hover {
background: var(--coollabs-fill);
}
.listbox-trigger:disabled {
cursor: not-allowed;
opacity: 0.5;
resources/views/livewire/deployments-indicator.blade.php
+9 -11
View File
@@ -1,18 +1,16 @@
<div wire:poll.3000ms x-on:livewire:navigated.window="
$wire.updateShouldShowFromPath(window.location.pathname || '/')
" x-data="{
expanded: @entangle('expanded'),
reduceOpacity: @js($this->shouldReduceOpacity)
expanded: @entangle('expanded')
}" class="fixed bottom-0 left-0 z-60 mb-4 ml-4 transition-[left] duration-200"
:class="collapsed ? 'lg:left-16' : 'lg:left-56'">
@if ($this->shouldShow && $this->deploymentCount > 0)
<div class="relative transition-opacity duration-200"
:class="{ 'opacity-100': expanded || !reduceOpacity, 'opacity-60 hover:opacity-100': reduceOpacity && !expanded }">
<div class="relative">
{{-- Expanded deployment list (above the pill) --}}
<div x-show="expanded" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-2" x-cloak
x-transition:enter-start="translate-y-2" x-transition:enter-end="translate-y-0"
x-transition:leave="transition ease-in duration-150" x-transition:leave-start="translate-y-0"
x-transition:leave-end="translate-y-2" x-cloak
class="absolute bottom-full mb-2 w-[min(22rem,calc(100vw-2rem))] overflow-hidden rounded-xl"
style="background: var(--coollabs-elevated); box-shadow: 0 0 0 1px var(--coollabs-line), var(--shadow-modal);">
<div class="max-h-96 space-y-1 overflow-y-auto p-2 scrollbar">
@@ -26,9 +24,9 @@
@endphp
<a wire:key="indicator-deployment-{{ $deployment->id }}"
href="{{ $deployment->deployment_url }}" {{ wireNavigate() }}
class="flex items-start gap-3 rounded-lg border border-transparent p-3 transition-colors hover:border-neutral-200 hover:bg-neutral-50 hover:no-underline dark:hover:border-white/[0.08] dark:hover:bg-white/[0.04]">
class="flex items-start gap-3 rounded-lg border border-transparent p-3 transition-colors hover:border-neutral-200 hover:bg-neutral-50 hover:no-underline dark:border-coolgray-300 dark:hover:border-coolgray-400 dark:hover:bg-raised">
<div
class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-coollabs dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-warning">
class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-coollabs dark:border-coolgray-300 dark:bg-raised dark:text-warning">
@if ($deployment->status === 'in_progress')
<svg class="size-3.5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" aria-hidden="true">
@@ -61,7 +59,7 @@
<p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
{{ $deployment->server_name ?: '-' }}
@if ($deployment->pull_request_id)
<span class="px-1 text-neutral-300 dark:text-white/15">·</span>
<span class="px-1 text-neutral-300 dark:text-fg-faint">·</span>
PR #{{ $deployment->pull_request_id }}
@endif
</p>
@@ -73,7 +71,7 @@
{{-- Collapsed pill --}}
<button type="button" @click="expanded = !expanded"
class="flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-3.5 py-2 text-sm font-medium text-neutral-800 transition-colors hover:bg-neutral-50 dark:border-white/[0.08] dark:bg-surface dark:text-fg dark:hover:bg-white/[0.04]"
class="flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-3.5 py-2 text-sm font-medium text-neutral-800 transition-colors hover:bg-neutral-50 dark:border-coolgray-300 dark:bg-surface dark:text-fg dark:hover:bg-raised"
style="box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal);"
:aria-expanded="expanded.toString()" aria-label="Active deployments">
<svg class="loading-indicator size-3.5 shrink-0 animate-spin"