optimized css

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 {
+       2. HEADER & NAVIGATION
-      background: rgba(45, 31, 61, 0.55) !important;
+       ============================================================================= */
-      border: 1px solid rgba(255,255,255,0.08) !important;
+    .header-container,
-      border-radius: 10px !important;
+    .header,
-      backdrop-filter: blur(6px) !important;
+    .page-header,
-      -webkit-backdrop-filter: blur(6px) !important;
+    .nav,
-    }
+    .navigation {
-
+      background: transparent !important;
-    /* ===== Header + bigger logo ===== */
+      backdrop-filter: none !important;
-    .header-container {
+      -webkit-backdrop-filter: none !important;
-      background: rgba(45, 31, 61, 0.55) !important;
+      box-shadow: none !important;
-      backdrop-filter: blur(10px) !important;
+      border: 0 !important;
-      -webkit-backdrop-filter: blur(10px) !important;
-      border-bottom: 1px solid rgba(255,255,255,0.08) !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: <div class="logo"> <img ...> */
+    /* 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 */
+    /* Frameless iframes - overlay covers everything */
-    .widget-content {
+    .widget.widget-type-iframe.widget-content-frameless::after {
-      background-color: transparent !important;
+      top: 0;
+      border-radius: 12px;
     }
 
-    /* Header fully transparent */
+    /* No-tint iframes (disable filter and overlay) */
-    .header-container,
+    .widget.iframe-no-tint iframe {
-    .header,
+      filter: none !important;
-    .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 {
       background: transparent !important;
     }
 
-    /* Column containers */
+    .widget.iframe-no-tint::after {
-    .page-column, .page-columns {
+      content: none !important;
-      background-color: transparent !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 {
+       7. EXPAND/COLLAPSE BUTTONS
-      color: #e292ff !important;
+       ============================================================================= */
-      font-weight: 600 !important;
+    .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 {
+       9. IDŐKÉP WEATHER WIDGET
-      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
-      ========================================================================= */
     .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-hourly { display: flex; gap: 6px; padding-top: 4px; }
-    .idokep-hour { width: 54px; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.9; }
+    .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