overhauled CSS
This commit is contained in:
+262
-187
@@ -562,10 +562,26 @@ data:
|
||||
title: NextCloud
|
||||
|
||||
custom.css: |
|
||||
/* Custom CSS for Kisfenyo's Glance Dashboard */
|
||||
/* Dark Blue theme */
|
||||
# =============================================================================
|
||||
# GLANCE CUSTOM CSS - BLUE/TECH THEME
|
||||
# =============================================================================
|
||||
#
|
||||
# Replace your entire custom.css section in the ConfigMap with this content.
|
||||
#
|
||||
# COLOR REFERENCE (adjust these to change the entire theme):
|
||||
# - Cyan accent: #5ac8d8 (primary links, headers, active elements)
|
||||
# - Cyan hover: #7ed9e6 (hover states)
|
||||
# - Cyan dark: #2d7e88 (widget titles, subtle accents)
|
||||
# - Blue background: rgba(30, 60, 90, X) (widget backgrounds, X = opacity)
|
||||
# - Blue accent bg: rgba(45, 126, 136, X) (highlight backgrounds)
|
||||
#
|
||||
# HSL equivalent: hsl(190, 55%, 60%) for cyan accent
|
||||
# =============================================================================
|
||||
|
||||
/* =========================================================================
|
||||
WALLPAPER VISIBLE
|
||||
========================================================================= */
|
||||
|
||||
/* ===== Wallpaper visible ===== */
|
||||
html, body { height: 100%; }
|
||||
|
||||
html {
|
||||
@@ -594,38 +610,127 @@ data:
|
||||
}
|
||||
body > * { position: relative; z-index: 1; }
|
||||
|
||||
/* ===== Glassy widgets like Homepage ===== */
|
||||
.widget {
|
||||
background: rgba(45, 126, 136, 0.32) !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;
|
||||
/* =========================================================================
|
||||
ROOT VARIABLES OVERRIDE
|
||||
These override Glance's default theme colors at the CSS variable level
|
||||
========================================================================= */
|
||||
:root {
|
||||
/* Primary color - affects many built-in elements */
|
||||
--color-primary: hsl(190, 70%, 60%) !important;
|
||||
|
||||
/* These control various UI elements */
|
||||
--color-text-highlight: #5ac8d8 !important;
|
||||
--color-text-accent: #5ac8d8 !important;
|
||||
}
|
||||
|
||||
/* ===== Header + bigger logo ===== */
|
||||
.header-container {
|
||||
background: rgba(45, 126, 136, 0.32) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
|
||||
/* =========================================================================
|
||||
GLOBAL LINK COLORS
|
||||
Affects all <a> tags site-wide (bookmarks, reddit links, video titles, etc.)
|
||||
========================================================================= */
|
||||
a {
|
||||
color: #5ac8d8 !important; /* CYAN - main link color */
|
||||
}
|
||||
|
||||
.header {
|
||||
min-height: 80px !important;
|
||||
a:hover {
|
||||
color: #7ed9e6 !important; /* LIGHTER CYAN - hover state */
|
||||
}
|
||||
|
||||
/* Visited links - slightly muted */
|
||||
a:visited {
|
||||
color: #4ab8c8 !important; /* SLIGHTLY DARKER CYAN */
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
HEADER / NAVIGATION
|
||||
The top bar with Home, Media, NextCloud tabs
|
||||
========================================================================= */
|
||||
|
||||
/* Push nav items to bottom of header and align properly */
|
||||
.header.flex {
|
||||
align-items: flex-end !important;
|
||||
padding: 16px 18px !important;
|
||||
}
|
||||
|
||||
/* This matches your DOM: <div class="logo"> <img ...> */
|
||||
.logo img {
|
||||
max-height: 100px !important;
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
object-fit: contain !important;
|
||||
.header.flex > .nav.flex {
|
||||
height: 100% !important;
|
||||
align-items: flex-end !important;
|
||||
padding-bottom: 0 !important; /* Remove extra padding */
|
||||
}
|
||||
|
||||
/* ===== iFrame purple tint + visible overlay ===== */
|
||||
/* Nav item text styling */
|
||||
.header .nav .nav-item,
|
||||
.header.flex > .nav.flex > .nav-item {
|
||||
color: #5ac8d8 !important; /* CYAN - nav text color */
|
||||
font-size: 20px !important;
|
||||
line-height: 1 !important;
|
||||
padding: 8px 14px 12px 14px !important; /* top right bottom left */
|
||||
letter-spacing: 0.3px !important;
|
||||
text-transform: uppercase !important;
|
||||
font-weight: 500 !important;
|
||||
display: flex !important;
|
||||
align-items: flex-end !important;
|
||||
height: auto !important; /* Let it size naturally */
|
||||
}
|
||||
|
||||
/* Nav item hover */
|
||||
.header .nav .nav-item:hover {
|
||||
color: #7ed9e6 !important; /* LIGHTER CYAN on hover */
|
||||
}
|
||||
|
||||
/* Active tab underline - position closer to text */
|
||||
.header .nav .nav-item-current::after,
|
||||
.header .nav .nav-item[aria-current="page"]::after {
|
||||
bottom: 4px !important; /* Closer to text */
|
||||
background-color: #5ac8d8 !important; /* CYAN underline */
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
WIDGET TITLES
|
||||
The "WEATHER", "NEWS & FEEDS", etc. headers on each widget
|
||||
========================================================================= */
|
||||
.widget-header,
|
||||
.widget-title,
|
||||
.widget-header *,
|
||||
.widget-title * {
|
||||
color: #5ac8d8 !important; /* CYAN - widget headers */
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
WIDGET BACKGROUNDS
|
||||
Semi-transparent backgrounds for widget containers
|
||||
========================================================================= */
|
||||
|
||||
/* Standard widgets (calendar, weather, to-do, RSS, etc.) */
|
||||
.widget,
|
||||
.widget-type-calendar,
|
||||
.widget-type-weather,
|
||||
.widget-type-to-do,
|
||||
.widget-type-rss,
|
||||
.widget-type-videos,
|
||||
.widget-type-reddit,
|
||||
.widget-type-bookmarks {
|
||||
background-color: rgba(20, 50, 70, 0.5) !important; /* DARK BLUE, semi-transparent */
|
||||
}
|
||||
|
||||
/* RSS feed items */
|
||||
.rss-item,
|
||||
.feed-item {
|
||||
background-color: rgba(45, 126, 136, 0.25) !important; /* TEAL tint */
|
||||
border-radius: 6px !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
/* Video items */
|
||||
.video-item,
|
||||
.videos-item {
|
||||
background-color: rgba(45, 126, 136, 0.25) !important; /* TEAL tint */
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
WIDGET OVERLAYS
|
||||
========================================================================= */
|
||||
|
||||
.widget.widget-type-iframe {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
@@ -652,222 +757,141 @@ data:
|
||||
background: rgba(45, 126, 136, 0.16);
|
||||
}
|
||||
|
||||
/* Widget content area */
|
||||
.widget-content {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Column containers */
|
||||
.page-column, .page-columns {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Links styling - purple accent */
|
||||
a {
|
||||
color: #e292ff !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f0b8ff !important;
|
||||
}
|
||||
|
||||
/* Bookmark items */
|
||||
/* =========================================================================
|
||||
BOOKMARK STYLING
|
||||
The link cards in bookmark widgets
|
||||
========================================================================= */
|
||||
.bookmark-link {
|
||||
background-color: rgba(60, 40, 80, 0.6) !important;
|
||||
background-color: rgba(30, 70, 90, 0.6) !important; /* DARK BLUE-TEAL */
|
||||
border-radius: 8px !important;
|
||||
transition: background-color 0.2s ease !important;
|
||||
}
|
||||
|
||||
.bookmark-link:hover {
|
||||
background-color: rgba(80, 50, 110, 0.8) !important;
|
||||
background-color: rgba(45, 100, 120, 0.8) !important; /* LIGHTER on hover */
|
||||
}
|
||||
|
||||
.widget-type-calendar,
|
||||
.widget-type-weather,
|
||||
.widget-type-to-do {
|
||||
background-color: rgba(45, 126, 136, 0.32) !important;
|
||||
/* =========================================================================
|
||||
REDDIT WIDGET SPECIFIC
|
||||
Subreddit tabs and content
|
||||
========================================================================= */
|
||||
|
||||
/* Subreddit tabs (R/HUNGARY, R/SELFHOSTED, etc.) */
|
||||
.reddit-subreddit-tabs .tab,
|
||||
.subreddit-tabs button,
|
||||
.subreddit-tab,
|
||||
[class*="subreddit"] button,
|
||||
.widget-type-reddit button {
|
||||
color: #5ac8d8 !important; /* CYAN */
|
||||
}
|
||||
|
||||
/* RSS feed items */
|
||||
.rss-item, .feed-item {
|
||||
background-color: rgba(45, 126, 136, 0.32) !important;
|
||||
border-radius: 6px !important;
|
||||
margin-bottom: 4px !important;
|
||||
.reddit-subreddit-tabs .tab:hover,
|
||||
.subreddit-tabs button:hover,
|
||||
[class*="subreddit"] button:hover {
|
||||
color: #7ed9e6 !important; /* LIGHTER CYAN on hover */
|
||||
}
|
||||
|
||||
/* Video thumbnails */
|
||||
.video-item, .videos-item {
|
||||
background-color: rgba(45, 126, 136, 0.32) !important;
|
||||
border-radius: 8px !important;
|
||||
/* Active subreddit tab */
|
||||
.reddit-subreddit-tabs .tab.active,
|
||||
.subreddit-tabs button.active,
|
||||
.subreddit-tab.active,
|
||||
[class*="subreddit"] button[aria-selected="true"] {
|
||||
color: #7ed9e6 !important;
|
||||
border-color: #5ac8d8 !important;
|
||||
}
|
||||
|
||||
/* Widget titles */
|
||||
.widget-header, .widget-title {
|
||||
color: #2d7e88 !important;
|
||||
font-weight: 600 !important;
|
||||
/* =========================================================================
|
||||
VIDEO WIDGET SPECIFIC
|
||||
YouTube video titles and channel names
|
||||
========================================================================= */
|
||||
.video-title,
|
||||
.videos-item-title,
|
||||
.video-channel,
|
||||
.videos-item-channel {
|
||||
color: #5ac8d8 !important;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
/* =========================================================================
|
||||
BACKGROUNDS - TRANSPARENT
|
||||
Keep page backgrounds transparent to show the space background
|
||||
========================================================================= */
|
||||
.content-bounds,
|
||||
.body-content,
|
||||
.page,
|
||||
#page-content,
|
||||
.page-column,
|
||||
.page-columns {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
SCROLLBAR STYLING
|
||||
Custom scrollbar colors
|
||||
========================================================================= */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(45, 126, 136, 0.32);
|
||||
background: rgba(30, 60, 90, 0.4); /* DARK BLUE track */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(45, 150, 136, 0.57);
|
||||
background: rgba(90, 200, 216, 0.5); /* CYAN thumb */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(226, 146, 255, 0.7);
|
||||
background: rgba(90, 200, 216, 0.7); /* BRIGHTER CYAN on hover */
|
||||
}
|
||||
|
||||
/* Fix "Show more" bar background in RSS widget */
|
||||
/* =========================================================================
|
||||
EXPAND/COLLAPSE BUTTONS
|
||||
"Show more" buttons in RSS, Reddit widgets
|
||||
========================================================================= */
|
||||
.expand-toggle-button,
|
||||
.expand-toggle-button.container-expanded,
|
||||
.widget-type-rss .expand-toggle-button {
|
||||
background: transparent !important;
|
||||
background-color: 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;
|
||||
border-top: 1px solid rgba(90, 200, 216, 0.2) !important; /* CYAN tinted border */
|
||||
color: rgba(255,255,255,0.75) !important;
|
||||
}
|
||||
|
||||
.expand-toggle-button:hover,
|
||||
.widget-type-rss .expand-toggle-button:hover {
|
||||
color: rgba(255,255,255,0.95) !important;
|
||||
color: #5ac8d8 !important; /* CYAN on hover */
|
||||
}
|
||||
|
||||
/* --- 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 !important;
|
||||
padding: 10px 6px !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 8px !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 {
|
||||
/* Remove pseudo-element backgrounds */
|
||||
.expand-toggle-button::before,
|
||||
.expand-toggle-button::after,
|
||||
.expand-toggle-button-icon::before,
|
||||
.expand-toggle-button-icon::after,
|
||||
.widget-type-rss .expand-toggle-button::before,
|
||||
.widget-type-rss .expand-toggle-button::after {
|
||||
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;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
IFRAME STYLING
|
||||
Remove tint/overlay from embedded iframes
|
||||
========================================================================= */
|
||||
.widget.iframe-no-tint iframe {
|
||||
filter: none !important;
|
||||
}
|
||||
@@ -877,6 +901,57 @@ data:
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
ADDITIONAL ELEMENTS
|
||||
Various UI elements that might need color overrides
|
||||
========================================================================= */
|
||||
|
||||
/* Monitor widget status indicators */
|
||||
.monitor-site-status {
|
||||
color: #5ac8d8 !important;
|
||||
}
|
||||
|
||||
/* Group widget tabs */
|
||||
.group-tabs button,
|
||||
.tabs button {
|
||||
color: #5ac8d8 !important;
|
||||
}
|
||||
|
||||
.group-tabs button:hover,
|
||||
.tabs button:hover {
|
||||
color: #7ed9e6 !important;
|
||||
}
|
||||
|
||||
.group-tabs button.active,
|
||||
.tabs button.active,
|
||||
.group-tabs button[aria-selected="true"],
|
||||
.tabs button[aria-selected="true"] {
|
||||
color: #7ed9e6 !important;
|
||||
border-color: #5ac8d8 !important;
|
||||
}
|
||||
|
||||
|
||||
# =============================================================================
|
||||
# QUICK COLOR REFERENCE FOR EXPERIMENTING
|
||||
# =============================================================================
|
||||
#
|
||||
# To change the entire theme, search and replace these colors:
|
||||
#
|
||||
# PRIMARY CYAN: #5ac8d8 → Your new accent color
|
||||
# HOVER CYAN: #7ed9e6 → Slightly lighter version
|
||||
# VISITED CYAN: #4ab8c8 → Slightly darker version
|
||||
# BG BLUE DARK: rgba(20, 50, 70, X) → Widget backgrounds
|
||||
# BG BLUE LIGHT: rgba(30, 70, 90, X) → Bookmark backgrounds
|
||||
# BG TEAL ACCENT: rgba(45, 126, 136, X) → Item highlights
|
||||
#
|
||||
# Alternative color palettes to try:
|
||||
#
|
||||
# TEAL/MINT: Primary: #4fd1c5 Hover: #6ee7db
|
||||
# ELECTRIC BLUE: Primary: #3b82f6 Hover: #60a5fa
|
||||
# PURPLE-BLUE: Primary: #8b5cf6 Hover: #a78bfa
|
||||
# GREEN-CYAN: Primary: #10b981 Hover: #34d399
|
||||
#
|
||||
# =============================================================================
|
||||
---
|
||||
apiVersion: apps/v1
|
||||
kind: Deployment
|
||||
|
||||
Reference in New Issue
Block a user