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

fix(ui): apply the flat style to buttons, not only the sidebar

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai
2026-10-24 12:54:36 +02:00
co-authored by Claude Opus 5.5
parent 6f8d51008e
commit 860b815fbb
3 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+20 -3
View File
@@ -214,6 +214,22 @@
box-shadow: none;
}
/* Appearance → Style → Flat (data-nav-items="flat") removes the raised edge
everywhere, not only in the sidebar: the depth color goes transparent (the
!important beats the theme overrides of the variable) and the press uses
the scale feedback of .icon-button instead of the lift and sink. */
html[data-nav-items="flat"] :is(.button, .split-action-main, .split-action-caret, .toast-icon) {
--button-depth-color: transparent !important;
}
html[data-nav-items="flat"] :is(.button, .split-action-main, .split-action-caret):not(:disabled):hover {
transform: none;
}
html[data-nav-items="flat"] :is(.button, .split-action-main, .split-action-caret):not(:disabled):active {
transform: scale(0.97);
}
/* Focus border/ring on any form control should ease, not snap. The accent
focus indicator is a border-color and/or box-shadow (ring) change, which the
utilities' `transition-colors` did not fully animate. Target the elements
@@ -5806,8 +5822,8 @@ a.command-palette-item:focus-visible {
/* Navigation items: each sidebar icon sits in a framed 30px tile with the 3D
depth of .button, like the canvas tool rail. Only the tile reacts; the row
has no background. Applies to both navigation styles. Appearance →
Navigation items → Flat sets data-nav-items="flat" on <html> and turns these
rules off, which brings back the plain rows. */
Style → Flat sets data-nav-items="flat" on <html> and turns these
rules off, which brings back the plain rows (see also the .button rules). */
html:where(:not([data-nav-items="flat"])) .menu-item:not(.sidebar-toggle) {
height: 2.25rem;
padding-left: 0.25rem;
@@ -6602,8 +6618,9 @@ html.dark .toast-card {
/* Toast icon tile: the 3D depth of the sidebar tiles, tinted with the icon color of the toast type. */
.toast-icon {
--button-depth-color: color-mix(in oklab, currentColor 30%, transparent);
border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
box-shadow: 0 2px 0 color-mix(in oklab, currentColor 30%, transparent);
box-shadow: 0 2px 0 var(--button-depth-color);
}
/* Command palette: the purple brand tint of the dark shell. */
resources/js/canvas/deploy/styles.js
+2
View File
@@ -95,6 +95,8 @@ const CSS = `
.cv-item:focus-visible { outline: none; }
.cv-item:focus-visible i { outline: 1px solid var(--color-accent, currentColor); outline-offset: 2px; }
.cv-item:active i { transform: translateY(2px); box-shadow: none; }
/* Appearance → Style → Flat: no ledge, lift, or press, like app.css .button. */
html[data-nav-items="flat"] .cv-item i { --cv-depth: transparent; transform: none; }
.cv-item b { display: block; font-size: 13px; font-weight: 500; }
.cv-item small { display: block; color: var(--cv-subtle); font-size: 11.5px; }
resources/views/components/theme-controls.blade.php
+4 -4
View File
@@ -163,14 +163,14 @@
<section class="application-settings-section">
<div class="application-settings-section-header">
<div>
<h2>Navigation items</h2>
<p>Choose how the main sidebar shows its items.</p>
<h2>Style</h2>
<p>Choose how buttons and sidebar items look.</p>
</div>
</div>
<div class="application-settings-section-body grid gap-3 sm:grid-cols-2">
@foreach ([
['value' => '3d', 'label' => '3D', 'description' => 'Each icon sits in a raised tile that lifts on hover.'],
['value' => 'flat', 'label' => 'Flat', 'description' => 'Plain rows with a highlight for the current page.'],
['value' => '3d', 'label' => '3D', 'description' => 'Buttons and sidebar icons sit on a raised edge that lifts on hover.'],
['value' => 'flat', 'label' => 'Flat', 'description' => 'No raised edges. Sidebar items are plain rows with a highlight for the current page.'],
] as $option)
<button type="button" @click="setNavItems('{{ $option['value'] }}')"
class="group overflow-hidden rounded-[10px] border border-neutral-200 bg-white text-left transition-[border-color,box-shadow] hover:border-neutral-300 hover:shadow-sm dark:border-white/[0.07] dark:bg-white/[0.05] dark:hover:border-white/[0.12]"