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

feat(ui): unify brand accents and polish shared controls

Browse Source 
Standardize highlighted buttons, selected controls, and loading
indicators on coollabs accent colors; improve light-mode log toolbar
styling; enhance small popups with compact/icon modes; and align
navbars, helpers, and related layouts with matching tests.
This commit is contained in:
Andras Bacsai committed 2026-08-05 22:34:56 +02:00
1 parent 8e57a9ab6b
commit bdb367555d
81 files changed
+423 -149
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/css/app.css
+28 -8
View File
@@ -268,7 +268,7 @@ button[isError]:not(:disabled) {
}
button[isHighlighted]:not(:disabled) {
@apply text-coollabs-200 bg-coollabs-50 border-coollabs hover:bg-coollabs hover:text-white dark:bg-warning/15 dark:text-warning dark:border-warning/25 dark:hover:bg-warning/20 dark:hover:text-warning;
@apply button-highlighted;
}
h1 {
@@ -2427,11 +2427,16 @@ input[type="search"]::-webkit-search-results-decoration {
Mobile stacks: search → meta → full-width actions (no side-by-side overlap). */
.logs-viewer-toolbar {
flex-shrink: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.035);
border-bottom: 1px solid var(--color-neutral-200);
background: var(--color-neutral-50);
padding: 0.5rem 0.75rem;
}
.dark .logs-viewer-toolbar {
border-bottom-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.035);
}
.logs-viewer-toolbar-controls {
display: flex;
min-width: 0;
@@ -2503,11 +2508,17 @@ input[type="search"]::-webkit-search-results-decoration {
.logs-viewer-status-badge {
height: 1.5rem !important;
flex-shrink: 0;
border-color: rgba(255, 255, 255, 0.1) !important;
background: rgba(255, 255, 255, 0.05) !important;
border-color: var(--color-neutral-200) !important;
background: white !important;
padding-inline: 0.5rem !important;
font-size: 0.6875rem !important;
font-weight: 500 !important;
color: var(--color-neutral-700) !important;
}
.dark .logs-viewer-status-badge {
border-color: rgba(255, 255, 255, 0.1) !important;
background: rgba(255, 255, 255, 0.05) !important;
color: #d4d4d4 !important;
}
@@ -2615,18 +2626,27 @@ input[type="search"]::-webkit-search-results-decoration {
align-items: center;
justify-content: center;
border-radius: 0.5rem;
color: #a3a3a3;
color: var(--color-neutral-500);
transition: color 0.15s, background-color 0.15s;
}
.logs-viewer-btn:hover {
background: var(--color-neutral-100);
color: var(--color-neutral-900);
}
.dark .logs-viewer-btn {
color: #a3a3a3;
}
.dark .logs-viewer-btn:hover {
background: rgba(255, 255, 255, 0.06);
color: #f5f5f5;
}
.logs-viewer-btn-active {
background: color-mix(in oklab, var(--color-warning) 14%, transparent);
color: var(--color-warning);
background: var(--color-coollabs);
color: #fff;
}
.logs-viewer-viewport {
resources/css/utilities.css
+12
View File
@@ -130,6 +130,18 @@
@apply inline-flex shrink-0 gap-1.5 justify-center items-center whitespace-nowrap px-2.5 h-9 min-h-9 text-[13px] text-black normal-case rounded-md border outline-0 cursor-pointer font-medium transition-colors bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-white/[0.06] dark:text-fg dark:hover:text-fg dark:hover:bg-white/[0.1] dark:border-white/[0.08] hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-fg-faint disabled:border-neutral-200 dark:disabled:border-white/[0.06] disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent;
}
@utility button-highlighted {
@apply border-2 text-coollabs-200 dark:text-white bg-coollabs-50 dark:bg-coollabs/20 border-coollabs dark:border-coollabs-100 hover:bg-coollabs hover:text-white dark:hover:bg-coollabs-100 dark:hover:text-white;
}
@utility control-selected {
@apply bg-coollabs text-white dark:bg-coollabs dark:text-white;
}
@utility loading-indicator {
@apply text-coollabs dark:text-coollabs-100;
}
/* Compact icon-only control (gear, chevrons, etc.) */
@utility icon-button {
@apply inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-transparent text-neutral-400 outline-0 transition-colors hover:bg-neutral-100 hover:text-black focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-35 dark:text-fg-faint dark:hover:bg-white/[0.07] dark:hover:text-fg;