optimized css

This commit is contained in:
2026-01-23 11:33:10 +01:00
parent ce3a591f4e
commit e371ced1db
+208 -359
View File
@@ -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: <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 cant 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 its "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
---
---