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

fix(ui): style wells outside a layer card

Browse Source 
- Define the well colors on the well too, so standalone tables keep a background and border
- In dark mode, standalone wells use the card surface instead of the black well fill
- Empty states inside a well show only their centered text

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai
2026-10-21 13:52:01 +02:00
co-authored by Claude Opus 5.5
parent 58b7f85e1e
commit 141d2c67c8
2 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+14 -4
View File
@@ -1790,6 +1790,7 @@ html[data-theme="custom"] textarea:disabled {
overflow stays visible so floating panels (listbox, tooltips) can escape
the card. */
.application-settings-section,
.application-settings-section-body,
.empty-state {
--card-bg: rgb(0 0 0 / 0.75%);
--card-border: rgb(0 0 0 / 9%);
@@ -1814,6 +1815,7 @@ html[data-theme="custom"] textarea:disabled {
}
.dark .application-settings-section,
.dark .application-settings-section-body,
.dark .empty-state {
--card-bg: rgb(255 255 255 / 6%);
--card-border: rgb(255 255 255 / 8%);
@@ -1930,6 +1932,14 @@ html[data-theme="custom"] textarea:disabled {
--coollabs-line: rgb(255 255 255 / 8%);
}
/* A well without a card around it sits straight on the canvas. In dark mode its
black fill would make it darker than the page, so it takes the card surface. */
.dark .application-settings-section-body:not(.application-settings-section *) {
--well-bg: var(--card-bg);
--well-border: var(--card-border);
--well-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}
/* Floating panels in the well must stay opaque: restore the global dark values. */
.dark .application-settings-section-body :is(.listbox-panel, .searchable-listbox-panel, [role="listbox"], [role="menu"]) {
--coollabs-recessed: oklch(25.2% 0.018 300);
@@ -2703,9 +2713,9 @@ input[type="search"]::-webkit-search-results-decoration {
color: var(--coollabs-subtle);
}
/* Inside a layer card, the card is the frame: show only the centered text. */
.application-settings-section .empty-state,
.application-settings-section .empty-state-well {
/* Inside a layer card or a well, that box is the frame: show only the centered text. */
:is(.application-settings-section, .application-settings-section-body) .empty-state,
:is(.application-settings-section, .application-settings-section-body) .empty-state-well {
border: 0;
border-radius: 0;
padding-inline: 0;
@@ -2713,7 +2723,7 @@ input[type="search"]::-webkit-search-results-decoration {
box-shadow: none;
}
.application-settings-section .empty-state {
:is(.application-settings-section, .application-settings-section-body) .empty-state {
padding: 0;
}