till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-20 01:01:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

fix(shared-ui): fix theme mode selector styling in dropdown

Browse source 
- Use solid background instead of backdrop-filter blur (not working in dropdown context)
- Add global glass-pill styles for elements in fan-container
- Light mode: solid light gray background
- Dark mode: solid dark gray background

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-11-29 22:29:04 +01:00
parent 2dc289c595
commit a32c4f0a16
2 changed files with 19 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/shared-ui/src/navigation/PillDropdown.svelte
View file

@ -250,7 +250,8 @@
cursor: pointer;
}
.glass-pill {
.glass-pill,
:global(.fan-container .glass-pill) {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
@ -261,7 +262,8 @@
color: #374151;
}
:global(.dark) .glass-pill {
:global(.dark) .glass-pill,
:global(.dark .fan-container .glass-pill) {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #f3f4f6;

17
packages/shared-ui/src/navigation/PillNavigation.svelte
View file

@ -351,7 +351,7 @@
icon="palette"
>
{#snippet header()}
<div class="theme-mode-selector pill glass-pill">
<div class="theme-mode-selector glass-pill">
<button
type="button"
onclick={() => onThemeModeChange?.('light')}
@ -908,10 +908,23 @@
transition: all 0.3s ease;
}
/* Theme mode selector in dropdown header - extends .pill.glass-pill */
/* Theme mode selector in dropdown header */
:global(.theme-mode-selector) {
display: flex !important;
align-items: center !important;
gap: 0.25rem !important;
padding: 0.25rem !important;
border-radius: 9999px !important;
background: rgba(245, 245, 245, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
color: #374151 !important;
}
:global(.dark .theme-mode-selector) {
background: rgba(40, 40, 40, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #f3f4f6 !important;
}
:global(.mode-btn) {