mirrors/coolify
0
0 Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-10-28 17:44:36 +08:00
Code 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 BacsaiandClaude Opus 5.5 committed 2026-10-21 13:52:01 +02:00
1 parent 58b7f85e1e
commit 141d2c67c8
2 files changed
+23 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

DESIGN.md
+9
View File
@@ -799,6 +799,15 @@ header actions sit 10px from the top and 14px from the right edge.
The card keeps `overflow: visible` so listbox panels and tooltips can escape
it. Do not add `overflow: hidden` to the card or the well.
Some pages put a well (`.application-settings-section-body`) directly on the
page without a card, for example the domains and environment variable tables.
The well colors are defined on the well itself as well as on the card, so a
standalone well keeps its background and border. In dark mode a standalone well
uses the card outer-box surface (`--card-bg`, `--card-border`) instead of the
black well fill, because the black fill directly on the canvas is darker than
the page. An `x-empty` inside a
standalone well shows only its centered text, as it does inside a card.
Inside the dark well, controls use a darker translucent fill and border
(`--coollabs-recessed: rgb(255 255 255 / 3%)`, `--coollabs-line:
rgb(255 255 255 / 8%)`), set on `.dark .application-settings-section-body`.
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;
}