Add custom CSS for lemonlink.eu dark theme
This commit is contained in:
parent
6d555fe56e
commit
8e1af7abb9
|
|
@ -0,0 +1,439 @@
|
||||||
|
/*======================================================================
|
||||||
|
Homarr Custom CSS - lemonlink.eu Style
|
||||||
|
Dark Theme with Glassmorphism Effects
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
1. GLOBAL STYLES & ANIMATED BACKGROUND
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Animated gradient background */
|
||||||
|
[data-dash-component="dashboard"] {
|
||||||
|
background: linear-gradient(-45deg, #0a0a0f, #1a1a2e, #0f172a, #1e1b4b, #0d1117);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: gradientBG 15s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradientBG {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
100% { background-position: 0% 50%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: linear-gradient(180deg, #6366f1, #8b5cf6);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: linear-gradient(180deg, #818cf8, #a78bfa);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
2. CARD/ITEM STYLES - Glassmorphism
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Main card container */
|
||||||
|
[data-dash-component="item-wrapper"] {
|
||||||
|
background: rgba(255, 255, 255, 0.03) !important;
|
||||||
|
backdrop-filter: blur(20px) saturate(180%) !important;
|
||||||
|
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
box-shadow:
|
||||||
|
0 8px 32px 0 rgba(0, 0, 0, 0.37),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card hover effect - lift and glow */
|
||||||
|
[data-dash-component="item-wrapper"]:hover {
|
||||||
|
transform: translateY(-6px) scale(1.01) !important;
|
||||||
|
background: rgba(255, 255, 255, 0.06) !important;
|
||||||
|
border-color: rgba(99, 102, 241, 0.3) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 20px 60px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 30px rgba(99, 102, 241, 0.15),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card active/click effect */
|
||||||
|
[data-dash-component="item-wrapper"]:active {
|
||||||
|
transform: translateY(-2px) scale(0.99) !important;
|
||||||
|
transition: all 0.1s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
3. APP ICONS & IMAGES
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* App icon container */
|
||||||
|
[data-dash-component="app-icon"] {
|
||||||
|
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-dash-component="item-wrapper"]:hover [data-dash-component="app-icon"] {
|
||||||
|
transform: scale(1.1);
|
||||||
|
filter: drop-shadow(0 6px 20px rgba(99, 102, 241, 0.4));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ping indicator (online status dot) */
|
||||||
|
[data-dash-component="ping-dot"] {
|
||||||
|
box-shadow: 0 0 10px currentColor !important;
|
||||||
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.7; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
4. TEXT & TYPOGRAPHY
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Main text color */
|
||||||
|
[data-dash-component="dashboard"],
|
||||||
|
[data-dash-component="item-wrapper"] {
|
||||||
|
color: #e2e8f0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headings with gradient text */
|
||||||
|
h1, h2, h3, [data-dash-component="board-title"] {
|
||||||
|
background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* App names */
|
||||||
|
[data-dash-component="app-name"] {
|
||||||
|
font-weight: 600 !important;
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Muted/secondary text */
|
||||||
|
[data-dash-component="item-description"],
|
||||||
|
.mantine-Text-root[data-size="sm"] {
|
||||||
|
color: #94a3b8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
5. CLOCK WIDGET
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Clock container */
|
||||||
|
[data-dash-component="widget-clock"] {
|
||||||
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)) !important;
|
||||||
|
border: 1px solid rgba(99, 102, 241, 0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clock time */
|
||||||
|
[data-dash-component="widget-clock"] .mantine-Text-root {
|
||||||
|
background: linear-gradient(135deg, #fff 0%, #c7d2fe 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
text-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
6. WEATHER WIDGET
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Weather widget */
|
||||||
|
[data-dash-component="widget-weather"] {
|
||||||
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.1)) !important;
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Temperature */
|
||||||
|
[data-dash-component="widget-weather"] .mantine-Text-root {
|
||||||
|
color: #60a5fa !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
7. RSS FEED WIDGET
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* RSS widget container */
|
||||||
|
[data-dash-component="widget-rss"] {
|
||||||
|
background: rgba(15, 23, 42, 0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* RSS feed item */
|
||||||
|
[data-dash-component="widget-rss"] .mantine-Paper-root {
|
||||||
|
background: rgba(255, 255, 255, 0.02) !important;
|
||||||
|
border-left: 3px solid #6366f1 !important;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-dash-component="widget-rss"] .mantine-Paper-root:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
border-left-color: #8b5cf6 !important;
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* RSS feed title */
|
||||||
|
[data-dash-component="widget-rss"] .mantine-Text-root {
|
||||||
|
color: #e2e8f0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-dash-component="widget-rss"] .mantine-Text-root:hover {
|
||||||
|
color: #818cf8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
8. IFRAME WIDGET (for Dash.)
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* iFrame container */
|
||||||
|
[data-dash-component="widget-iframe"] {
|
||||||
|
border-radius: 20px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
box-shadow:
|
||||||
|
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 0 1px rgba(255, 255, 255, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-dash-component="widget-iframe"] iframe {
|
||||||
|
border-radius: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
9. SEARCH BAR
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Search container */
|
||||||
|
[data-dash-component="search-bar"] {
|
||||||
|
background: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
backdrop-filter: blur(20px) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-dash-component="search-bar"]:focus-within {
|
||||||
|
background: rgba(255, 255, 255, 0.08) !important;
|
||||||
|
border-color: rgba(99, 102, 241, 0.4) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||||
|
0 0 20px rgba(99, 102, 241, 0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search input */
|
||||||
|
[data-dash-component="search-bar"] input {
|
||||||
|
color: #e2e8f0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-dash-component="search-bar"] input::placeholder {
|
||||||
|
color: #64748b !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search results */
|
||||||
|
[data-dash-component="search-results"] {
|
||||||
|
background: rgba(15, 23, 42, 0.95) !important;
|
||||||
|
backdrop-filter: blur(20px) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
10. HEADER & NAVIGATION
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Top navigation bar */
|
||||||
|
[data-dash-component="header"] {
|
||||||
|
background: rgba(10, 10, 15, 0.8) !important;
|
||||||
|
backdrop-filter: blur(20px) !important;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Board selector dropdown */
|
||||||
|
.mantine-Menu-dropdown {
|
||||||
|
background: rgba(15, 23, 42, 0.95) !important;
|
||||||
|
backdrop-filter: blur(20px) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Edit mode toolbar */
|
||||||
|
[data-dash-component="edit-mode-bar"] {
|
||||||
|
background: rgba(99, 102, 241, 0.1) !important;
|
||||||
|
backdrop-filter: blur(20px) !important;
|
||||||
|
border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
11. BUTTONS & CONTROLS
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Primary buttons */
|
||||||
|
.mantine-Button-root[data-variant="filled"] {
|
||||||
|
background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mantine-Button-root[data-variant="filled"]:hover {
|
||||||
|
transform: translateY(-2px) !important;
|
||||||
|
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mantine-Button-root[data-variant="filled"]:active {
|
||||||
|
transform: translateY(0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Secondary/outline buttons */
|
||||||
|
.mantine-Button-root[data-variant="outline"] {
|
||||||
|
background: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||||
|
color: #e2e8f0 !important;
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mantine-Button-root[data-variant="outline"]:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1) !important;
|
||||||
|
border-color: rgba(99, 102, 241, 0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon buttons */
|
||||||
|
.mantine-ActionIcon-root {
|
||||||
|
background: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||||
|
transition: all 0.2s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mantine-ActionIcon-root:hover {
|
||||||
|
background: rgba(99, 102, 241, 0.2) !important;
|
||||||
|
border-color: rgba(99, 102, 241, 0.4) !important;
|
||||||
|
transform: scale(1.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
12. MODALS & OVERLAYS
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Modal overlay */
|
||||||
|
.mantine-Overlay-root {
|
||||||
|
background: rgba(0, 0, 0, 0.7) !important;
|
||||||
|
backdrop-filter: blur(8px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal content */
|
||||||
|
.mantine-Modal-content {
|
||||||
|
background: rgba(15, 23, 42, 0.95) !important;
|
||||||
|
backdrop-filter: blur(20px) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal header */
|
||||||
|
.mantine-Modal-header {
|
||||||
|
background: transparent !important;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
13. FORM INPUTS
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Text inputs */
|
||||||
|
.mantine-Input-wrapper input,
|
||||||
|
.mantine-TextInput-input {
|
||||||
|
background: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
color: #e2e8f0 !important;
|
||||||
|
transition: all 0.2s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mantine-Input-wrapper input:focus,
|
||||||
|
.mantine-TextInput-input:focus {
|
||||||
|
background: rgba(255, 255, 255, 0.08) !important;
|
||||||
|
border-color: rgba(99, 102, 241, 0.5) !important;
|
||||||
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Select dropdowns */
|
||||||
|
.mantine-Select-dropdown {
|
||||||
|
background: rgba(15, 23, 42, 0.95) !important;
|
||||||
|
backdrop-filter: blur(20px) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
14. SPECIAL EFFECTS
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Loading spinner */
|
||||||
|
.mantine-LoadingOverlay-overlay {
|
||||||
|
background: rgba(10, 10, 15, 0.8) !important;
|
||||||
|
backdrop-filter: blur(8px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Drag ghost (when dragging items) */
|
||||||
|
[data-dash-dragging="true"] {
|
||||||
|
opacity: 0.8 !important;
|
||||||
|
transform: scale(1.05) !important;
|
||||||
|
box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid lines in edit mode (subtle) */
|
||||||
|
[data-dash-component="grid"] {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px) !important;
|
||||||
|
background-size: 40px 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
15. RESPONSIVE ADJUSTMENTS
|
||||||
|
======================================================================*/
|
||||||
|
|
||||||
|
/* Mobile adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
[data-dash-component="item-wrapper"] {
|
||||||
|
border-radius: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-dash-component="item-wrapper"]:hover {
|
||||||
|
transform: translateY(-3px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================================================================
|
||||||
|
HOW TO USE THIS CSS
|
||||||
|
|
||||||
|
1. Go to your Homarr board
|
||||||
|
2. Click Settings (gear icon)
|
||||||
|
3. Go to "Appearance" tab
|
||||||
|
4. Find "Custom CSS" text box
|
||||||
|
5. Paste this entire CSS
|
||||||
|
6. Click Save
|
||||||
|
7. Enjoy your new look!
|
||||||
|
|
||||||
|
Note: This CSS works for all boards globally
|
||||||
|
======================================================================*/
|
||||||
Loading…
Reference in New Issue