diff --git a/glance-system/glance.yaml b/glance-system/glance.yaml index 391cc2f..67c9de1 100644 --- a/glance-system/glance.yaml +++ b/glance-system/glance.yaml @@ -61,7 +61,7 @@ data: negative-color: 0 70 60 contrast-multiplier: 1.2 text-saturation-multiplier: 0.8 - custom-css-file: /app/config/assets/custom.css + custom-css-file: /assets/custom.css pages: # ==================== HOME PAGE ==================== @@ -312,28 +312,25 @@ data: /* Custom CSS for Orsi's Glance Dashboard */ /* Purple theme with background image matching Homepage */ - /* --- Force wallpaper to actually show --- */ - html, body { - height: 100%; - } + /* ===== Wallpaper visible ===== */ + html, body { height: 100%; } html { background: url("https://web.dooplex.hu/static/wallpaper-orsi.jpg") center / cover no-repeat fixed !important; } - /* Kill any opaque backgrounds that sit above */ + /* Glance containers that tend to paint over the wallpaper */ body, - #app, - .app, .page, - main, + #page-content, .page-content, - .layout, - .container { + .content-bounds, + .page-columns, + .page-column { background: transparent !important; } - /* Optional: add a subtle dark veil so text stays readable */ + /* Optional readability veil (Homepage-like) */ body::before { content: ""; position: fixed; @@ -342,27 +339,64 @@ data: pointer-events: none; z-index: 0; } + body > * { position: relative; z-index: 1; } - /* Make sure actual UI sits above the veil */ - #app, .app, .page { position: relative; z-index: 1; } - - - /* Background image */ - body { - background-image: url('https://web.dooplex.hu/static/wallpaper-orsi.jpg') !important; - background-size: cover !important; - background-attachment: fixed !important; - background-position: center !important; - background-repeat: no-repeat !important; - } - - /* Semi-transparent widgets to show background */ + /* ===== Glassy widgets like Homepage ===== */ .widget { - background-color: rgba(45, 31, 61, 0.85) !important; + background: rgba(45, 31, 61, 0.78) !important; + border: 1px solid rgba(255,255,255,0.10) !important; + border-radius: 14px !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; + } + + /* ===== Header + bigger logo ===== */ + .header-container { + background: rgba(45, 31, 61, 0.55) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-bottom: 1px solid rgba(255,255,255,0.08) !important; + } + + .header { + min-height: 150px !important; + align-items: center !important; + padding: 16px 18px !important; + } + + /* This matches your DOM: