diff --git a/glance-system/glance-orsi.yaml b/glance-system/glance-orsi.yaml
index c2f51f0..fa72387 100644
--- a/glance-system/glance-orsi.yaml
+++ b/glance-system/glance-orsi.yaml
@@ -471,7 +471,7 @@ data:
widgets:
# Weather Widget (Időkép)
- type: custom-api
- title: "Időkép – Budapest VII."
+ title: "Időkép — Budapest VII."
url: "http://idokep-scraper.glance-system.svc.cluster.local:8000/api?v=2"
cache: 30s
template: |
@@ -776,28 +776,34 @@ data:
title: NextCloud
custom.css: |
- /* Custom CSS for Orsi's Glance Dashboard */
- /* Purple theme with background image matching Homepage */
+ /* =============================================================================
+ Custom CSS for Orsi's Glance Dashboard
+ Purple theme with background image matching Homepage
+ OPTIMIZED: Duplicates removed, styles consolidated
+ ============================================================================= */
- /* ===== Wallpaper visible ===== */
+ /* =============================================================================
+ 1. BACKGROUND & BASE TRANSPARENCY
+ ============================================================================= */
html, body { height: 100%; }
html {
background: url("https://web.dooplex.hu/static/wallpaper-orsi.jpg") center / cover no-repeat fixed !important;
}
- /* Glance containers that tend to paint over the wallpaper */
+ /* Make all Glance containers transparent to show wallpaper */
body,
.page,
#page-content,
.page-content,
.content-bounds,
+ .body-content,
.page-columns,
.page-column {
background: transparent !important;
}
- /* Optional readability veil (Homepage-like) */
+ /* Readability veil overlay */
body::before {
content: "";
position: fixed;
@@ -808,30 +814,30 @@ data:
}
body > * { position: relative; z-index: 1; }
- /* ===== Glassy widgets like Homepage ===== */
- .widget {
- background: rgba(45, 31, 61, 0.55) !important;
- border: 1px solid rgba(255,255,255,0.08) !important;
- border-radius: 10px !important;
- backdrop-filter: blur(6px) !important;
- -webkit-backdrop-filter: blur(6px) !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;
+ /* =============================================================================
+ 2. HEADER & NAVIGATION
+ ============================================================================= */
+ .header-container,
+ .header,
+ .page-header,
+ .nav,
+ .navigation {
+ background: transparent !important;
+ backdrop-filter: none !important;
+ -webkit-backdrop-filter: none !important;
+ box-shadow: none !important;
+ border: 0 !important;
}
.header {
min-height: 150px !important;
+ display: flex !important;
align-items: flex-end !important;
+ gap: 18px !important;
padding: 16px 18px !important;
}
- /* This matches your DOM:
![]()
*/
+ /* Logo sizing */
.logo img {
max-height: 170px !important;
height: auto !important;
@@ -839,7 +845,119 @@ data:
object-fit: contain !important;
}
- /* ===== iFrame purple tint + visible overlay ===== */
+ /* Nav alignment and styling (consolidated) */
+ .header.flex > .nav.flex {
+ height: 100% !important;
+ align-items: flex-end !important;
+ padding-bottom: 14px !important;
+ }
+
+ .header.flex > .nav.flex > .nav-item {
+ display: flex !important;
+ align-items: flex-end !important;
+ height: 100% !important;
+ padding: 0 14px 18px 14px !important;
+ font-size: 20px !important;
+ line-height: 1 !important;
+ }
+
+ /* Current tab underline */
+ .header .nav .nav-item-current::after,
+ .header .nav .nav-item[aria-current="page"]::after {
+ bottom: -6px !important;
+ }
+
+ /* =============================================================================
+ 3. WIDGETS - BASE STYLING
+ ============================================================================= */
+ .widget {
+ background: rgba(45, 31, 61, 0.55) !important;
+ border: 1px solid rgba(226, 146, 255, 0.3) !important;
+ border-radius: 10px !important;
+ backdrop-filter: blur(6px) !important;
+ -webkit-backdrop-filter: blur(6px) !important;
+ }
+
+ .widget-content {
+ background: transparent !important;
+ }
+
+ /* Widget headers */
+ .widget-header {
+ display: flex !important;
+ align-items: center !important;
+ border-bottom-color: rgba(226, 146, 255, 0.25) !important;
+ }
+
+ .widget-header,
+ .widget-title {
+ color: #e292ff !important;
+ font-weight: 600 !important;
+ }
+
+ .widget-header .widget-title {
+ display: flex !important;
+ align-items: center !important;
+ line-height: 1.2 !important;
+ }
+
+ /* =============================================================================
+ 4. SPLIT-COLUMN WIDGET
+ ============================================================================= */
+ /* Container keeps glassy effect */
+ .widget.widget-type-split-column {
+ background: rgba(45, 31, 61, 0.55) !important;
+ border: 1px solid rgba(226, 146, 255, 0.15) !important;
+ backdrop-filter: blur(6px) !important;
+ -webkit-backdrop-filter: blur(6px) !important;
+ }
+
+ /* Content area - NO TOP PADDING to align headers with other widgets */
+ .widget.widget-type-split-column > .widget-content {
+ padding: 0 3px 8px 3px !important;
+ }
+
+ /* Inner widgets should be transparent */
+ .widget-type-split-column .masonry-column .widget,
+ .widget-type-split-column .widget-content .widget {
+ background: transparent !important;
+ border: none !important;
+ backdrop-filter: none !important;
+ -webkit-backdrop-filter: none !important;
+ box-shadow: none !important;
+ }
+
+ /* Masonry layout */
+ .widget-type-split-column .masonry-column {
+ background: transparent !important;
+ overflow: visible !important;
+ }
+
+ .widget-type-split-column .masonry {
+ gap: 16px !important;
+ }
+
+ /* Inner widget headers - compact styling */
+ .widget-type-split-column .widget .widget-header {
+ display: flex !important;
+ align-items: center !important;
+ justify-content: flex-start !important;
+ min-height: unset !important;
+ height: auto !important;
+ padding: 0 0 8px 0 !important;
+ margin: 0 !important;
+ }
+
+ .widget-type-split-column .widget .widget-header .widget-title {
+ font-size: 0.9rem !important;
+ line-height: 1 !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+
+ /* =============================================================================
+ 5. IFRAME WIDGETS
+ ============================================================================= */
.widget.widget-type-iframe {
position: relative !important;
overflow: hidden !important;
@@ -855,76 +973,46 @@ data:
z-index: 1 !important;
}
- /* Overlay ON TOP of iframe (you can’t style inside cross-origin iframes) */
+ /* Header above overlay */
+ .widget.widget-type-iframe > .widget-header {
+ position: relative;
+ z-index: 3;
+ }
+
+ /* Purple overlay - positioned below header */
.widget.widget-type-iframe::after {
content: "";
position: absolute;
- inset: 0;
+ top: 45px;
+ left: 0;
+ right: 0;
+ bottom: 0;
z-index: 2;
pointer-events: none;
- border-radius: 12px;
+ border-radius: 0 0 12px 12px;
background: rgba(226, 146, 255, 0.16);
}
- /* Widget content area */
- .widget-content {
- background-color: transparent !important;
+ /* Frameless iframes - overlay covers everything */
+ .widget.widget-type-iframe.widget-content-frameless::after {
+ top: 0;
+ border-radius: 12px;
}
- /* Header fully transparent */
- .header-container,
- .header,
- .page-header,
- .nav,
- .navigation {
- background-color: transparent !important;
- background: transparent !important;
- backdrop-filter: none !important;
- -webkit-backdrop-filter: none !important;
- box-shadow: none !important;
- border: 0 !important;
- }
-
- /* --- Header: align tabs to bottom + larger font --- */
- .header {
- display: flex !important;
- align-items: flex-end !important; /* bottom-align children */
- gap: 18px !important;
- }
-
- /* Push the nav to the bottom edge */
- .header .nav {
- align-self: flex-end !important;
- padding-bottom: 10px !important; /* tweak this value if you want it lower/higher */
- }
-
- /* Bigger, cleaner tab text */
- .header .nav .nav-item {
- font-size: 18px !important; /* increase */
- line-height: 1.1 !important;
- padding: 10px 14px !important; /* makes it feel less “floaty” */
- letter-spacing: 0.2px !important;
- }
-
- /* Optional: make current tab underline sit nicely at the bottom */
- .header .nav .nav-item-current::after,
- .header .nav .nav-item[aria-current="page"]::after {
- bottom: -6px !important;
- }
-
- .content-bounds,
- .body-content,
- .page,
- #page-content {
+ /* No-tint iframes (disable filter and overlay) */
+ .widget.iframe-no-tint iframe {
+ filter: none !important;
background: transparent !important;
}
- /* Column containers */
- .page-column, .page-columns {
- background-color: transparent !important;
+ .widget.iframe-no-tint::after {
+ content: none !important;
+ display: none !important;
}
- /* Links styling - purple accent */
+ /* =============================================================================
+ 6. LINKS & INTERACTIVE ELEMENTS
+ ============================================================================= */
a {
color: #e292ff !important;
}
@@ -957,13 +1045,37 @@ data:
border-radius: 8px !important;
}
- /* Widget titles */
- .widget-header, .widget-title {
- color: #e292ff !important;
- font-weight: 600 !important;
+ /* =============================================================================
+ 7. EXPAND/COLLAPSE BUTTONS
+ ============================================================================= */
+ .expand-toggle-button,
+ .expand-toggle-button.container-expanded {
+ background: transparent !important;
+ box-shadow: none !important;
+ border: 0 !important;
+ backdrop-filter: none !important;
+ -webkit-backdrop-filter: none !important;
+ margin-top: 8px !important;
+ padding: 10px 12px !important;
+ border-top: 1px solid rgba(255,255,255,0.08) !important;
+ color: rgba(255,255,255,0.75) !important;
}
- /* Scrollbar styling */
+ .expand-toggle-button:hover {
+ color: rgba(255,255,255,0.95) !important;
+ }
+
+ .expand-toggle-button::before,
+ .expand-toggle-button::after,
+ .expand-toggle-button-icon::before,
+ .expand-toggle-button-icon::after {
+ background: transparent !important;
+ box-shadow: none !important;
+ }
+
+ /* =============================================================================
+ 8. SCROLLBAR STYLING
+ ============================================================================= */
::-webkit-scrollbar {
width: 8px;
}
@@ -981,112 +1093,9 @@ data:
background: rgba(226, 146, 255, 0.7);
}
- /* Fix "Show more" bar background in RSS widget */
- .widget-type-rss .expand-toggle-button {
- background: transparent !important;
- box-shadow: none !important;
- border: 0 !important;
- }
-
- /* Glance often draws that ugly bar via a pseudo-element */
- .widget-type-rss .expand-toggle-button::before,
- .widget-type-rss .expand-toggle-button::after,
- .widget-type-rss .expand-toggle-button-icon::before,
- .widget-type-rss .expand-toggle-button-icon::after {
- background: transparent !important;
- box-shadow: none !important;
- border: 0 !important;
- }
-
- /* Optional: make it feel "intentional" instead of floating */
- .widget-type-rss .expand-toggle-button {
- margin-top: 8px !important;
- padding: 10px 12px !important;
- border-top: 1px solid rgba(255,255,255,0.08) !important;
- color: rgba(255,255,255,0.75) !important;
- }
- .widget-type-rss .expand-toggle-button:hover {
- color: rgba(255,255,255,0.95) !important;
- }
-
- /* --- Force header nav to sit at the bottom (override utility classes) --- */
- .header.flex {
- align-items: flex-end !important;
- }
-
- /* Make the nav fill the header height and align its items to the bottom */
- .header.flex > .nav.flex {
- height: 100% !important;
- align-items: flex-end !important;
- padding-bottom: 14px !important; /* increase/decrease to taste */
- }
-
- /* Bigger tab text */
- .header.flex > .nav.flex > .nav-item {
- font-size: 20px !important;
- line-height: 1.1 !important;
- padding: 10px 14px !important;
- }
-
- /* Tabs: bottom-align text inside full-height .nav-item */
- .header.flex > .nav.flex > .nav-item {
- display: flex !important;
- align-items: flex-end !important;
-
- /* keep them full-height, but move the text down */
- height: 100% !important;
- padding: 0 14px 18px 14px !important; /* bottom padding controls “how low” */
-
- /* kill Glance's vertical centering */
- line-height: 1 !important;
-
- font-size: 20px !important;
- }
-
- /* Expand buttons: force transparent everywhere (RSS, Reddit, etc) */
- .expand-toggle-button,
- .expand-toggle-button.container-expanded {
- background: transparent !important;
- background-color: transparent !important;
- box-shadow: none !important;
- border: 0 !important;
- }
-
- /* Some themes draw the bar via pseudo elements */
- .expand-toggle-button::before,
- .expand-toggle-button::after,
- .expand-toggle-button-icon::before,
- .expand-toggle-button-icon::after {
- background: transparent !important;
- background-color: transparent !important;
- box-shadow: none !important;
- }
-
- /* If the purple comes from a wrapper around the button, kill that too */
- .widget-content > button.expand-toggle-button,
- .widget-content > .expand-toggle-button,
- .widget-content .expand-toggle-button {
- background: transparent !important;
- background-color: transparent !important;
- }
-
- /* If it’s "sticking" to bottom and picking up background from parent */
- .expand-toggle-button.container-expanded {
- backdrop-filter: none !important;
- -webkit-backdrop-filter: none !important;
- }
-
- .widget.iframe-no-tint iframe {
- filter: none !important;
- }
-
- .widget.iframe-no-tint::after {
- content: none !important;
- display: none !important;
- }
- /* =========================================================================
- Időkép custom-api widget
- ========================================================================= */
+ /* =============================================================================
+ 9. IDŐKÉP WEATHER WIDGET
+ ============================================================================= */
.idokep { display: flex; flex-direction: column; gap: 10px; }
.idokep-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@@ -1099,8 +1108,8 @@ data:
.idokep-src { opacity: 0.6; font-size: 12px; margin-top: 2px; }
.idokep-src a { opacity: 0.9; }
- .idokep-hourly { display: flex; gap: 10px; padding-top: 4px; }
- .idokep-hour { width: 54px; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.9; }
+ .idokep-hourly { display: flex; gap: 6px; padding-top: 4px; }
+ .idokep-hour { width: 48px; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.9; }
.idokep-hour-time { font-size: 12px; opacity: 0.65; }
.idokep-hour-icon { width: 26px; height: 26px; }
.idokep-hour-temp { font-weight: 700; }
@@ -1110,16 +1119,13 @@ data:
.idokep-daily { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.idokep-row {
display: grid;
- grid-template-columns: 44px 26px 36px 1fr 36px; /* day+date, icon, min, bar, max */
+ grid-template-columns: 44px 26px 36px 1fr 36px;
gap: 10px;
align-items: center;
- }
- .idokep-dow { opacity: 0.7; font-weight: 700; }
- .idokep-dayicon img { width: 22px; height: 22px; opacity: 0.95; }
- .idokep-min, .idokep-max { text-align: right; font-weight: 700; opacity: 0.8; }
+ }
.idokep-dow {
display: grid;
- grid-template-columns: 22px 1fr; /* dow then daynum */
+ grid-template-columns: 22px 1fr;
column-gap: 6px;
align-items: center;
opacity: 0.8;
@@ -1130,6 +1136,10 @@ data:
opacity: 0.75;
font-variant-numeric: tabular-nums;
}
+ .idokep-dayicon img { width: 22px; height: 22px; opacity: 0.95; }
+ .idokep-min, .idokep-max { text-align: right; font-weight: 700; opacity: 0.8; }
+
+ /* Temperature bar */
.idokep-bar {
position: relative;
height: 10px;
@@ -1147,22 +1157,15 @@ data:
border-radius: 999px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
-
- /* Position controlled by Python variables */
left: var(--l, 0%);
width: var(--w, 0%);
}
- /* This element holds the gradient */
.idokep-bar-gradient {
position: absolute;
top: 0;
bottom: 0;
-
- /* Compensation geometry controlled by Python variables */
width: var(--gw, 100%);
margin-left: var(--ml, 0%);
-
- /* The Dynamic Gradient */
background: linear-gradient(90deg,
#ffffff var(--s-wht),
#60a5fa var(--s-blu),
@@ -1171,160 +1174,6 @@ data:
#ef4444 var(--s-red)
);
}
-
- /* =========================================================================
- Fix split-column inner widgets - make them transparent
- ========================================================================= */
-
- /* Widgets inside split-column/masonry should be fully transparent */
- .widget-type-split-column .masonry-column .widget,
- .widget-type-split-column .widget-content .widget {
- background: transparent !important;
- background-color: transparent !important;
- border: none !important;
- backdrop-filter: none !important;
- -webkit-backdrop-filter: none !important;
- box-shadow: none !important;
- }
-
- /* Keep the split-column container itself glassy */
- .widget.widget-type-split-column {
- background: rgba(45, 31, 61, 0.55) !important;
- border: 1px solid rgba(226, 146, 255, 0.15) !important;
- backdrop-filter: blur(6px) !important;
- -webkit-backdrop-filter: blur(6px) !important;
- }
-
- /* Masonry columns inside split-column */
- .widget-type-split-column .masonry-column {
- background: transparent !important;
- }
-
- /* Widget content areas inside split-column */
- .widget-type-split-column .widget-content {
- background: transparent !important;
- }
-
- /* =========================================================================
- Fix borders - make them more visible purple
- ========================================================================= */
-
- .widget {
- border: 1px solid rgba(226, 146, 255, 0.3) !important;
- }
-
- /* Widget headers border */
- .widget-header {
- border-bottom-color: rgba(226, 146, 255, 0.25) !important;
- }
-
- /* =========================================================================
- Fix iframe widget - overlay should not cover the header
- ========================================================================= */
-
- /* Make the iframe widget header appear above the overlay */
- .widget.widget-type-iframe > .widget-header {
- position: relative;
- z-index: 3;
- }
-
- /* Alternative: adjust overlay to only cover the content area */
- .widget.widget-type-iframe::after {
- content: "";
- position: absolute;
- top: 45px; /* Skip the header area - adjust if header height differs */
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 2;
- pointer-events: none;
- border-radius: 0 0 12px 12px;
- background: rgba(226, 146, 255, 0.16);
- }
-
- /* If iframe has no header (frameless), cover the whole thing */
- .widget.widget-type-iframe.widget-content-frameless::after {
- top: 0;
- border-radius: 12px;
- }
- /* =========================================================================
- Fix widget header vertical alignment - center titles (without changing size)
- ========================================================================= */
-
- /* Remove the previous fix and use a simpler approach */
- .widget-header {
- display: flex !important;
- align-items: center !important;
- /* Remove min-height and extra padding that made it too wide */
- }
-
- .widget-header .widget-title {
- display: flex !important;
- align-items: center !important;
- line-height: 1.2 !important;
- }
-
- /* For split-column inner widget headers specifically */
- .widget-type-split-column .widget-header {
- display: flex !important;
- align-items: center !important;
- justify-content: flex-start !important;
- padding-top: 0 !important;
- padding-bottom: 0 !important;
- }
-
- /* =========================================================================
- Fix split-column padding and overflow - allow shadows to show
- ========================================================================= */
-
- .widget.widget-type-split-column > .widget-content {
- padding: 12px !important;
- }
-
- /* Don't hide overflow - let shadows show */
- .widget-type-split-column .masonry-column {
- overflow: visible !important;
- }
-
- .widget-type-split-column .masonry {
- gap: 16px !important; /* Increase gap to give room for shadows */
- }
-
- /* Shrink hourly items to fit better */
- .idokep-hourly {
- gap: 6px !important;
- }
- .idokep-hour {
- width: 48px !important;
- }
- /* =========================================================================
- Fix split-column inner widget headers - make them compact
- ========================================================================= */
-
- /* Target headers inside split-column specifically */
- .widget-type-split-column .widget .widget-header {
- display: flex !important;
- align-items: center !important;
- min-height: unset !important;
- height: auto !important;
- padding: 0 0 8px 0 !important;
- margin: 0 !important;
- }
-
- .widget-type-split-column .widget .widget-header .widget-title {
- font-size: 0.9rem !important;
- line-height: 1 !important;
- padding: 0 !important;
- margin: 0 !important;
- }
- /* =========================================================================
- Forcing transparency on no-tint iframes
- ========================================================================= */
-
- /* Force notes iframe to be transparent */
- .widget.iframe-no-tint iframe {
- background: transparent !important;
- }
---
apiVersion: apps/v1
kind: Deployment
@@ -1515,4 +1364,4 @@ spec:
- hosts:
- orsi.dooplex.hu
secretName: glance-orsi-tls
----
+---
\ No newline at end of file