Add custom CSS for lemonlink.eu dark theme

2026-02-03 11:15:49 +01:00 · 2026-02-03 11:15:49 +01:00 · 8e1af7abb9
parent 6d555fe56e
commit 8e1af7abb9
1 changed files with 439 additions and 0 deletions
--- a/config/custom-boards.css
+++ b/config/custom-boards.css
@ -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
+======================================================================*/