From c4aa39c88ae69955f02360e1d2dfc405f3f07674 Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Wed, 3 Sep 2025 18:54:45 -0700 Subject: [PATCH 001/116] Enhanced liquid blue theme for dashboard background with multi-layered animated gradients --- .env.development | 2 +- index.css | 3572 +++++++++++++++++ liquid-glass.css | 450 +++ public/index.html | 29 +- src/App.tsx | 7 +- .../charts/LineRaceChart/LineRaceChart.tsx | 417 +- .../relay-dashboard/Balance/Balance.tsx | 183 +- .../totalEarning/TotalEarning.tsx | 34 +- .../transactions/Transactions.tsx | 125 +- src/hooks/useAutoNightMode.ts | 80 +- src/hooks/useThemeWatcher.ts | 20 +- src/index.tsx | 48 +- src/interfaces/interfaces.ts | 5 +- .../DashboardPages/DashboardPage.styles.ts | 234 +- src/pages/DashboardPages/NftDashboardPage.tsx | 250 +- src/store/slices/themeSlice.ts | 7 +- src/styles/GlobalStyle.ts | 267 +- src/styles/liquid-glass.css | 50 + .../themes/liquidBlue/liquidBlueTheme.ts | 130 + src/styles/themes/themeVariables.ts | 181 +- 20 files changed, 5072 insertions(+), 1019 deletions(-) create mode 100644 index.css create mode 100644 liquid-glass.css create mode 100644 src/styles/liquid-glass.css create mode 100644 src/styles/themes/liquidBlue/liquidBlueTheme.ts diff --git a/.env.development b/.env.development index 5d22305c..72eef81b 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1,4 @@ -REACT_APP_BASE_URL=http://localhost:9002 +REACT_APP_BASE_URL=http://localhost:8002 REACT_APP_WALLET_BASE_URL=http://localhost:9003 REACT_APP_ASSETS_BUCKET=http://localhost REACT_APP_DEMO_MODE=false diff --git a/index.css b/index.css new file mode 100644 index 00000000..b67352e5 --- /dev/null +++ b/index.css @@ -0,0 +1,3572 @@ +/* Import KaTeX CSS for LaTeX math rendering */ +@import 'katex/dist/katex.min.css'; +@import "./liquid-glass.css"; + +/* Import Fira Code and Tiempos fonts from Google Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Tiempos+Text:ital,wght@0,400;0,500;1,400&display=swap'); +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --middle-header-height: 4.5em; + --titlebar-height: 2em; + /* Default value */ +} + +html { + font-size: 15px; +} + +.btn, +.input { + @apply rounded-md; +} + +/*Mui Switch*/ + +/* Constant style */ +.MuiSwitch-root .MuiSwitch-track { + @apply !bg-base-100; +} + +/* Online*/ +.MuiSwitch-switchBase.Mui-checked { + @apply !text-success brightness-90; +} + +.MuiSwitch-root.switch-checked-online .MuiSwitch-track { + @apply !bg-success; +} +/* Connecting */ + .MuiSwitch-root.connecting .MuiSwitch-switchBase { + @apply !text-warning/85 brightness-75 +} + +.MuiSwitch-root.connecting .MuiSwitch-track { + @apply !bg-warning/70; +} + +/* Offline*/ + .MuiSwitch-root.offline .MuiSwitch-switchBase { + @apply !text-error/85 brightness-75 +} + +.MuiSwitch-root.offline .MuiSwitch-track { + @apply !bg-error/70; +} + +/* Default theme */ +.btn-primary { + @apply text-base-content bg-gradient-to-t from-secondary to-primary; + border-width: 0px; + transition: background 0.3s ease; +} + +.btn-neutral { + @apply bg-neutral border-none; +} + +.btn-neutral:hover { + @apply bg-neutral opacity-90; +} + +[data-theme="light"] .btn-neutral { + @apply bg-neutral border-none text-white; +} + +.btn-code-blame { + text-transform: none !important; + font-weight: 600 !important; + font-size: 1rem !important; + border-color: rgba(255, 255, 255, 0.15) !important; + border-width: 1px !important; +} + +.btn-settings-upload { + min-height: 2rem; + height: 2.5rem; + max-height: 2.5rem; +} + +[data-theme="dark"] .btn-code-blame { + border-color: rgba(255, 255, 255, 0.15) !important; +} + +[data-theme="light"] .btn-code-blame { + border-color: rgba(0, 0, 0, 0.15) !important; +} + +[data-theme="light"] .btn-code-blame.unselected { + border-color: rgba(0, 0, 0, 0.15) !important; + color: black !important; +} + +.btn-file-content { + opacity: 60% !important; +} + +[data-theme="light"] .btn-file-content { + opacity: 60% !important; + color: black !important; +} + +[data-theme="dark"] .btn-file-content { + @apply !fill-text-primary; + opacity: 60% !important; +} + +.btn-primary:hover { + @apply bg-gradient-to-t from-secondary to-primary opacity-90; +} + +/* Dark theme */ +[data-theme="dark"] .btn-primary { + @apply bg-gradient-to-t from-secondary to-primary; +} + +[data-theme="dark"] .btn-primary:hover { + @apply bg-gradient-to-t from-secondary to-primary opacity-90; +} + +/* Light theme */ +[data-theme="light"] .btn-primary { + @apply bg-gradient-to-t from-secondary to-primary text-white; +} + +[data-theme="light"] .btn-primary:hover { + @apply bg-gradient-to-t from-secondary to-primary opacity-90; +} + +/* Iris theme */ +[data-theme="iris"] .btn-primary { + @apply bg-gradient-to-t from-secondary to-primary; +} + +[data-theme="iris"] .btn-primary:hover { + @apply bg-gradient-to-t from-secondary to-primary; + box-shadow: 0 0 10px var(--tw-gradient-from); +} + +iframe { + @apply max-w-full; +} + +/* Webkit scrollbar (Chrome, Safari, Edge) */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: #34216c; +} + +::-webkit-scrollbar-thumb { + background-color: #0c1021; + border-radius: 4px; +} + +/* Firefox scrollbar */ +* { + scrollbar-width: thin; +} + +/* Universal scrollbar hiding for clean appearance - cross-browser */ +*::-webkit-scrollbar { + width: 0px; + height: 0px; + display: none; +} + +*:not(.allow-scrollbar) { + -ms-overflow-style: none; /* IE/Edge */ + scrollbar-width: none; /* Firefox */ +} + +/* Custom scrollbar for FileContent component */ +.custom-scrollbar::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +.custom-scrollbar { + scrollbar-width: thin; +} + +/* Utility class to prevent text selection and highlighting */ +.no-highlight { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: transparent; +} + +/* Apply no-highlight to all UI chrome by default */ +nav, header, aside, .btn, .menu, .navbar, .sidebar, .dropdown, +.modal-box, .badge, .tabs, .form-control, .input, .select, +.toggle, .checkbox, .radio, .range, .file-input, .breadcrumbs, +.pagination, .steps, .alert, .toast, .loading, .progress, .radial-progress, +.countdown, .stat, .divider, .mask, .skeleton, .collapse, +.carousel, .indicator, .swap, .tooltip, .drawer, .rating, +.artboard, .phone-mockup, .window-mockup, .browser-mockup, +.code-mockup, .kbd, .link-hover, .link-primary, .link-secondary, +.btn-group, .join, .stack, .avatar-group, +/* Profile-specific UI elements */ +.followers-info, .follower-count, .follow-button, .profile-stats, +.tab-navigation, .user-actions, .profile-badges, .social-links { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: transparent; +} + +/* Allow text selection only in content areas */ +.highlight-allowed, .prose, [role="main"] article, .post-content { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} + +/* Force no selection on UI elements even within highlight-allowed areas */ +.highlight-allowed .no-highlight, +.highlight-allowed .btn, +.highlight-allowed .badge, +.highlight-allowed .tabs, +.highlight-allowed button, +.highlight-allowed .avatar-group, +.highlight-allowed [class*="btn-"], +.highlight-allowed [class*="flex"][class*="gap-"], +.highlight-allowed .cursor-pointer { + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; + -webkit-touch-callout: none !important; + -webkit-tap-highlight-color: transparent !important; +} + +/* src/shared/styles/scrollbar.css */ +.scrollbar-hide { + -ms-overflow-style: none; + /* Internet Explorer 10+ */ + scrollbar-width: none; + /* Firefox */ +} + +.scrollbar-hide::-webkit-scrollbar { + display: none; + /* Safari and Chrome */ +} + +/* Fix modal scrollbar compensation issue */ +/* Reserve space for scrollbar to prevent layout shift without showing it */ +html { + scrollbar-gutter: stable; +} + +/* Prevent layout shift when dialog opens by maintaining overflow */ +dialog[open] { + /* Ensure the dialog doesn't affect body scrollbar */ + overflow: auto; +} + +/* Prevent body from losing scrollbar space when modal opens */ +body:has(dialog[open]) { + /* Maintain normal overflow behavior */ + overflow: auto !important; + /* Prevent any margin adjustments */ + margin-right: 0 !important; +} + +/* Hide scrollbars completely when modals are open - cross-browser */ +html:has(dialog[open])::-webkit-scrollbar { + display: none !important; +} + +html:has(dialog[open]) { + /* Reserve space but hide scrollbar completely */ + overflow-y: scroll !important; + scrollbar-width: none !important; /* Firefox */ + -ms-overflow-style: none !important; /* IE/Edge */ +} + +/* Ensure body doesn't get overflow hidden when modal opens */ +body:has(dialog[open]) { + overflow-y: visible !important; +} + + +/* modals */ + +.modal-box { + max-width: fit-content !important; +} + +/* mui tabs */ + +.MuiTab-root.Mui-selected { + color: #c6c8d3 !important; +} + +/* Electron window controls */ +.app-drag-region { + -webkit-app-region: drag; + -webkit-user-select: none; +} + +.app-no-drag { + -webkit-app-region: no-drag; +} + +.safeContentBrowser { + height: calc(100vh - var(--middle-header-height)); +} + +.safeContentElectron { + height: calc(100vh - var(--middle-header-height) - var(--titlebar-height)); +} + +.searchBox { + @apply border-[--border-color] border-[2px] !rounded-md !bg-base-100 +} + +/* ============================================= */ +/* SELECTIVE SEARCHBOX BEVEL REMOVAL */ +/* ============================================= */ + +/* Only remove bevel effect from UserToolbar search inputs (top-right search) */ +.fixed.z-50.right-5 input.bg-base-300, +.fixed.z-50.right-5 input[class*="bg-base-300"], +.fixed.z-50.right-5 .bg-base-300 input { + box-shadow: none !important; +} + +/* Remove bevel effect from search page UserToolbar */ +body:has(header:contains("Search")) .fixed.z-50.right-5 input.bg-base-300, +body:has(header:contains("Search")) .fixed.z-50.right-5 input[class*="bg-base-300"], +body:has(header:contains("Search")) .fixed.z-50.right-5 .bg-base-300 input { + box-shadow: none !important; +} + +/* Enhanced focus state for UserToolbar search inputs */ +.fixed.z-50.right-5 input:focus, +.fixed.z-50.right-5 input:focus-visible { + --tw-ring-color: var(--primary) !important; + --tw-ring-offset-color: transparent !important; + box-shadow: + 0 0 0 2px var(--primary, #007AFF), + 0 0 15px rgba(0, 122, 255, 0.3) !important; + outline: 2px solid var(--primary, #007AFF) !important; + outline-offset: 0 !important; + border-color: var(--primary, #007AFF) !important; + transition: all 0.2s ease !important; +} + +/* Theme-specific focus glow colors */ +[data-theme="liquid-glass"] .fixed.z-50.right-5 input:focus { + box-shadow: + 0 0 0 2px rgba(255, 255, 255, 0.5), + 0 0 20px rgba(255, 255, 255, 0.3) !important; + outline-color: rgba(255, 255, 255, 0.5) !important; + border-color: rgba(255, 255, 255, 0.5) !important; +} + +[data-theme="liquid-blue"] .fixed.z-50.right-5 input:focus { + box-shadow: + 0 0 0 2px rgba(0, 255, 255, 0.6), + 0 0 20px rgba(0, 255, 255, 0.4) !important; + outline-color: rgba(0, 255, 255, 0.6) !important; + border-color: rgba(0, 255, 255, 0.6) !important; +} + +/* Fix for FollowList search input (thread viewer) - use internal glow to prevent clipping */ +.sticky.top-0.z-9 input[placeholder="Search profiles..."]:focus, +.sticky.top-0.z-9 input[placeholder="Search profiles..."]:focus-visible { + /* Remove external outline and ring */ + outline: none !important; + --tw-ring-color: transparent !important; + --tw-ring-offset-color: transparent !important; + + /* Use internal box-shadow for glow effect */ + box-shadow: + inset 0 0 0 2px var(--primary, #007AFF), + inset 0 0 12px rgba(0, 122, 255, 0.25) !important; + border-color: var(--primary, #007AFF) !important; + transition: all 0.2s ease !important; +} + +/* Theme-specific internal glow for FollowList search */ +[data-theme="liquid-glass"] .sticky.top-0.z-9 input[placeholder="Search profiles..."]:focus { + box-shadow: + inset 0 0 0 2px rgba(255, 255, 255, 0.5), + inset 0 0 15px rgba(255, 255, 255, 0.25) !important; + border-color: rgba(255, 255, 255, 0.5) !important; +} + +[data-theme="liquid-blue"] .sticky.top-0.z-9 input[placeholder="Search profiles..."]:focus { + box-shadow: + inset 0 0 0 2px rgba(0, 255, 255, 0.6), + inset 0 0 15px rgba(0, 255, 255, 0.35) !important; + border-color: rgba(0, 255, 255, 0.6) !important; +} + +[data-theme="dark"] .sticky.top-0.z-9 input[placeholder="Search profiles..."]:focus { + box-shadow: + inset 0 0 0 2px rgba(255, 255, 255, 0.4), + inset 0 0 12px rgba(255, 255, 255, 0.2) !important; + border-color: rgba(255, 255, 255, 0.4) !important; +} + +[data-theme="dim"] .sticky.top-0.z-9 input[placeholder="Search profiles..."]:focus { + box-shadow: + inset 0 0 0 2px rgba(255, 255, 255, 0.35), + inset 0 0 12px rgba(255, 255, 255, 0.15) !important; + border-color: rgba(255, 255, 255, 0.35) !important; +} + +[data-theme="light"] .sticky.top-0.z-9 input[placeholder="Search profiles..."]:focus { + box-shadow: + inset 0 0 0 2px rgba(0, 122, 255, 0.8), + inset 0 0 12px rgba(0, 122, 255, 0.2) !important; + border-color: rgba(0, 122, 255, 0.8) !important; +} + +/* Liquid Glass Theme Definition */ +[data-theme="liquid-glass"] { + /* Override base colors for liquid glass theme */ + --base-100: rgba(255, 255, 255, 0.02); + --base-200: rgba(255, 255, 255, 0.04); + --base-300: rgba(255, 255, 255, 0.06); + --base-content: rgba(255, 255, 255, 0.95); + --neutral: rgba(255, 255, 255, 0.05); + --neutral-content: rgba(255, 255, 255, 0.95); + --primary: #007AFF; + --secondary: #AF52DE; + --accent: #32D2FF; + --info: #30B0C7; + --success: #34C759; + --warning: #FFCC00; + --error: #FF3B30; + --border-color: rgba(255, 255, 255, 0.1); + --text-primary: rgba(255, 255, 255, 0.95); + --text-secondary: rgba(255, 255, 255, 0.75); + --text-tertiary: rgba(255, 255, 255, 0.55); +} + +/* Liquid Blue Theme Definition - Tony Stark/Jarvis AI Futuristic Blue */ +[data-theme="liquid-blue"] { + /* Bright Neon Turquoise/Teal Color Palette */ + --primary: #00FFFF; /* Electric cyan - bright neon */ + --secondary: #00FFAA; /* Neon turquoise */ + --accent: #00DDFF; /* Bright neon teal */ + --info: #14B8A6; /* Teal */ + --success: #06B6D4; /* Cyan */ + --warning: #F59E0B; /* Amber warnings */ + --error: #EF4444; /* Red for errors */ + + /* Base colors with bright turquoise/teal tint */ + --base-100: rgba(20, 184, 166, 0.08); + --base-200: rgba(94, 234, 212, 0.12); + --base-300: rgba(153, 246, 228, 0.16); + --base-content: rgba(255, 255, 255, 0.95); + --neutral: rgba(20, 184, 166, 0.1); + --neutral-content: rgba(255, 255, 255, 0.95); + + /* Border and text colors with bright turquoise glow */ + --border-color: rgba(20, 184, 166, 0.15); + --text-primary: rgba(255, 255, 255, 0.95); /* Keep text white */ + --text-secondary: rgba(255, 255, 255, 0.9); /* Keep text white */ + --text-tertiary: rgba(255, 255, 255, 0.8); /* Keep text white */ + + /* Futuristic tab colors - neon turquoise */ + --tab-primary-rgb: 0, 255, 255; /* Electric cyan */ + --tab-secondary-rgb: 0, 255, 170; /* Neon turquoise */ +} + +/* Beautiful gradient background */ +[data-theme="liquid-glass"] html { + background: linear-gradient(135deg, var(--lg-gradient-start, #1e0033) 0%, var(--lg-gradient-end, #01579b) 100%) fixed !important; + min-height: 100vh; + color: rgba(255, 255, 255, 0.95); +} + +/* Liquid Blue Futuristic Background - Neon Turquoise */ +[data-theme="liquid-blue"] html { + background: linear-gradient(135deg, + #0d9488 0%, /* Bright teal start */ + #14b8a6 25%, /* Turquoise */ + #00FFFF 50%, /* Electric cyan core */ + #5eead4 75%, /* Light turquoise */ + #99f6e4 100% /* Very light teal */ + ) fixed !important; + min-height: 100vh; + color: rgba(255, 255, 255, 0.95); + position: relative; +} + +/* Enhanced floating orbs for Arc Reactor Energy */ +[data-theme="liquid-blue"] html::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + /* Bright neon turquoise core */ + radial-gradient(circle at 30% 70%, rgba(0, 255, 255, 1) 0%, transparent 30%), + /* Energy nodes - bright turquoise/teal */ + radial-gradient(circle at 70% 30%, rgba(0, 255, 170, 0.9) 0%, transparent 35%), + radial-gradient(circle at 50% 10%, rgba(20, 184, 166, 0.8) 0%, transparent 40%), + radial-gradient(circle at 20% 40%, rgba(94, 234, 212, 0.7) 0%, transparent 45%), + radial-gradient(circle at 80% 80%, rgba(153, 246, 228, 0.6) 0%, transparent 50%), + /* Energy streams - neon turquoise */ + linear-gradient(45deg, transparent 45%, rgba(0, 255, 255, 0.2) 50%, transparent 55%), + linear-gradient(-45deg, transparent 40%, rgba(0, 255, 170, 0.15) 50%, transparent 60%); + z-index: -1; + pointer-events: none; + animation: arc-reactor-glow 15s ease-in-out infinite; +} + +/* Disable animation when motion setting is enabled */ +[data-theme="liquid-blue"][data-disable-motion="true"] html::before { + animation: none; +} + +@keyframes arc-reactor-glow { + 0%, 100% { + opacity: 0.7; + filter: brightness(1.2) contrast(1.1); + } + 25% { + opacity: 0.9; + filter: brightness(1.4) contrast(1.2); + } + 50% { + opacity: 1; + filter: brightness(1.6) contrast(1.3); + } + 75% { + opacity: 0.9; + filter: brightness(1.4) contrast(1.2); + } +} + +/* Floating orbs effect overlay */ +[data-theme="liquid-glass"] body { + position: relative; + min-height: 100vh; + background: transparent !important; +} + +[data-theme="liquid-glass"] body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 15% 50%, rgba(138, 43, 226, 0.4) 0%, transparent 35%), + radial-gradient(circle at 85% 30%, rgba(33, 150, 243, 0.35) 0%, transparent 40%), + radial-gradient(circle at 50% 90%, rgba(124, 77, 255, 0.3) 0%, transparent 45%), + radial-gradient(circle at 20% 20%, rgba(100, 181, 246, 0.25) 0%, transparent 50%), + radial-gradient(circle at 75% 75%, rgba(94, 53, 177, 0.3) 0%, transparent 50%); + z-index: -1; + pointer-events: none; +} + +/* Make backgrounds transparent to show gradient */ +[data-theme="liquid-glass"] .bg-base-100, +[data-theme="liquid-glass"] .bg-base-200, +[data-theme="liquid-glass"] .bg-base-300 { + background-color: transparent !important; +} + +[data-theme="liquid-glass"] main, +[data-theme="liquid-glass"] section { + background: transparent !important; +} + +/* Liquid Blue Theme - Transparent Backgrounds */ +[data-theme="liquid-blue"] .bg-base-100, +[data-theme="liquid-blue"] .bg-base-200, +[data-theme="liquid-blue"] .bg-base-300 { + background-color: transparent !important; +} + +/* Fix ProfileHeader dark box in liquid blue theme */ +[data-theme="liquid-blue"] .flex.flex-col.w-full.bg-base-200 { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +/* Remove animated background effects from profile pages in liquid themes */ +[data-theme="liquid-blue"] section.h-min-content html::before, +[data-theme="liquid-glass"] section.h-min-content html::before { + display: none !important; +} + +[data-theme="liquid-blue"] section.h-min-content main::before, +[data-theme="liquid-blue"] section.h-min-content main::after, +[data-theme="liquid-glass"] section.h-min-content main::before, +[data-theme="liquid-glass"] section.h-min-content main::after { + display: none !important; +} + +[data-theme="liquid-blue"] main, +[data-theme="liquid-blue"] section { + background: transparent !important; +} + +/* Create glass effect for left sidebar WITHOUT affecting width */ +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end { + position: relative; + isolation: isolate; + /* NO WIDTH DECLARATIONS - let children determine width */ +} + +/* Glass background effect - visual only */ +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end::before { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-radius: 0 16px 0 0; + z-index: -1; + box-shadow: + 0 0 20px rgba(138, 43, 226, 0.15), + 0 0 40px rgba(33, 150, 243, 0.1), + inset 0 2px 3px rgba(255, 255, 255, 0.2), + inset 0 -2px 3px rgba(0, 0, 0, 0.15), + 0 12px 40px rgba(0, 0, 0, 0.2); + pointer-events: none; +} + +/* Animated jelly border - visual only */ +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end::after { + content: ''; + position: absolute; + top: -3px; + left: -3px; + bottom: -3px; + right: -3px; + background: linear-gradient( + 45deg, + rgba(138, 43, 226, 0.25), + rgba(33, 150, 243, 0.25), + rgba(124, 77, 255, 0.25), + rgba(138, 43, 226, 0.25) + ); + background-size: 300% 300%; + border-radius: 0 19px 0 0; + z-index: -2; + filter: blur(6px); + opacity: 0.7; + animation: subtle-jelly-border 10s ease-in-out infinite; + pointer-events: none; +} + +/* Disable animation when motion setting is enabled */ +[data-theme="liquid-glass"][data-disable-motion="true"] .flex.flex-col.h-full.self-end::after { + animation: none; +} + +@keyframes subtle-jelly-border { + 0%, 100% { + background-position: 0% 50%; + } + 25% { + background-position: 50% 25%; + } + 50% { + background-position: 100% 50%; + } + 75% { + background-position: 50% 75%; + } +} + +/* Glass highlight - visual only */ +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end > div:first-child::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 120px; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.12) 0%, + rgba(255, 255, 255, 0.05) 30%, + transparent 100% + ); + border-radius: 0 16px 0 0; + pointer-events: none; + z-index: 2; +} + +/* Make sidebars transparent to show glass effect */ +[data-theme="liquid-glass"] .w-20.overflow-x-hidden.border-r, +[data-theme="liquid-glass"] .bg-base-100.sticky.h-full.left-0.top-0 { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +/* Ensure content is above glass effects */ +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end > * { + position: relative; + z-index: 1; +} + +/* Fix overflow issues and height for left sidebar glass effects */ +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end { + overflow: hidden; + contain: layout style paint; + /* Make sidebar fill full viewport height to eliminate black gap */ + min-height: 100vh; + height: 100vh; +} + +/* Prevent glass pseudo-elements from extending beyond sidebar bounds */ +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end::before, +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end::after { + contain: layout style paint; + overflow: hidden; +} + +/* Reduce opacity of glass background to prevent dark areas */ +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end::before { + background: rgba(255, 255, 255, 0.02) !important; /* Much lighter background */ +} + +/* Prevent glass effects from causing scrollbars by ensuring they don't extend beyond viewport */ +[data-theme="liquid-glass"] *::before, +[data-theme="liquid-glass"] *::after { + box-sizing: border-box; + max-width: 100%; + max-height: 100%; +} + +/* Ensure glass effects don't affect document flow */ +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end::before, +[data-theme="liquid-glass"] .flex.flex-col.h-full.self-end::after { + position: absolute; + pointer-events: none; +} + +/* Make SideBarToolBar background transparent */ +[data-theme="liquid-glass"] .flex.items-center.justify-center.h-1\/6 { + background: transparent !important; +} + +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 { + background: transparent !important; +} + +/* Style SideBarToolBar buttons - transparent with no borders */ +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 button, +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 a, +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button, +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 a { + background: transparent !important; + border: none !important; + box-shadow: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + color: rgba(255, 255, 255, 0.8) !important; + transition: box-shadow 0.2s ease !important; +} + +/* SideBarToolBar glass effect on icons */ +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 svg, +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 a svg, +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 svg, +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 a svg { + opacity: 0.95; + filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)) blur(0.5px); + transition: all 0.3s ease; +} + +/* SideBarToolBar hover effects - enhanced icon glow */ +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 button:hover svg, +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 a:hover svg, +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:hover svg, +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 a:hover svg { + opacity: 1; + filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.5)) drop-shadow(0 0 12px rgba(33, 150, 243, 0.4)) blur(0.5px) !important; +} + +/* FEEDS BUTTON ONLY (3rd position in 2x2 grid) - conjoined glow system */ +/* When hovering over Feeds icon - glow both icon and text */ +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 button:nth-child(3):has(svg:hover) svg, +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 button:nth-child(3):has(svg:hover) span, +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:nth-child(3):has(svg:hover) svg, +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:nth-child(3):has(svg:hover) span { + filter: drop-shadow(0 0 12px rgba(138, 43, 226, 0.8)) drop-shadow(0 0 18px rgba(33, 150, 243, 0.7)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.6)) !important; +} + +/* When hovering over Feeds text - glow both text and icon */ +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 button:nth-child(3):has(span:hover) svg, +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 button:nth-child(3):has(span:hover) span, +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:nth-child(3):has(span:hover) svg, +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:nth-child(3):has(span:hover) span { + filter: drop-shadow(0 0 12px rgba(138, 43, 226, 0.8)) drop-shadow(0 0 18px rgba(33, 150, 243, 0.7)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.6)) !important; +} + +/* NEW POST BUTTON ONLY - conjoined glow system */ +/* When hovering over new post icon - glow both icon and text */ +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 button:has(div[class*="rounded-md"]:hover) div[class*="rounded-md"], +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:has(div[class*="rounded-md"]:hover) div[class*="rounded-md"] { + box-shadow: 0 0 8px rgba(138, 43, 226, 0.6), 0 0 12px rgba(33, 150, 243, 0.5), 0 0 16px rgba(255, 255, 255, 0.4) !important; +} + +/* When hovering over new post text - glow both text and icon */ +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-2.p-2 button:has(span:hover) div[class*="rounded-md"], +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:has(span:hover) div[class*="rounded-md"] { + box-shadow: 0 0 8px rgba(138, 43, 226, 0.6), 0 0 12px rgba(33, 150, 243, 0.5), 0 0 16px rgba(255, 255, 255, 0.4) !important; +} + +/* Hover and active states removed */ + +/* Active/selected state highlight removed */ + +/* Style the New Post button gradient background - remove borders */ +[data-theme="liquid-glass"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 .bg-gradient-to-t { + background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; + border-radius: 0.5rem !important; /* Slightly rounder for softer look */ + border: none !important; +} + +/* Remove inner glow pseudo-elements - keep buttons clean */ + +/* Create unified jelly glass container for feed + right nav */ +[data-theme="liquid-glass"] main { + position: relative; + background: transparent !important; + overflow: visible; + isolation: isolate; + align-self: stretch !important; + margin-top: 0 !important; + border-left: 1px solid rgba(255, 255, 255, 0.03); +} + +/* Liquid Blue Main Container - Futuristic AI Interface */ +[data-theme="liquid-blue"] main { + position: relative; + background: transparent !important; + overflow: visible; + isolation: isolate; + align-self: stretch !important; + margin-top: 0 !important; + border-left: 1px solid rgba(0, 255, 255, 0.2); +} + +/* Unified glass background spanning feed and right nav */ +[data-theme="liquid-glass"] main::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-radius: 0; /* Removed rounded edges */ + z-index: 0; + box-shadow: + 0 0 20px rgba(33, 150, 243, 0.15), + 0 0 40px rgba(138, 43, 226, 0.1), + inset 0 2px 3px rgba(255, 255, 255, 0.2), + inset 0 -2px 3px rgba(0, 0, 0, 0.15), + 0 12px 40px rgba(0, 0, 0, 0.2); +} + +/* Animated jelly border for unified feed + right nav */ +[data-theme="liquid-glass"] main::after { + content: ''; + position: absolute; + top: -3px; + left: -3px; + right: -3px; + bottom: -3px; + background: linear-gradient( + 45deg, + rgba(33, 150, 243, 0.25), + rgba(124, 77, 255, 0.25), + rgba(138, 43, 226, 0.25), + rgba(33, 150, 243, 0.25) + ); + background-size: 300% 300%; + border-radius: 0; /* Removed rounded edges */ + z-index: -1; + filter: blur(6px); + opacity: 0.7; + animation: subtle-jelly-border 10s ease-in-out infinite; +} + +/* Disable animation when motion setting is enabled */ +[data-theme="liquid-glass"][data-disable-motion="true"] main::after { + animation: none; +} + +/* Ensure MainFeed and RightColumn fill available height */ +[data-theme="liquid-glass"] main > div { + height: 100%; +} + +/* Make all main content children position relative for proper stacking */ +[data-theme="liquid-glass"] main > * { + position: relative; + z-index: 1; +} + +/* Top glass highlight for feed/right nav */ +[data-theme="liquid-glass"] main::before { + border-radius: 0; /* Removed rounded edges */ +} + +/* Remove borders between feed and right nav to unify them */ +[data-theme="liquid-glass"] .w-1\/3.block .bg-base-200, +[data-theme="liquid-glass"] .w-full.sticky .bg-base-200 { + background: transparent !important; + border: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +/* Make feed area transparent to show unified glass */ +[data-theme="liquid-glass"] main > div:first-child { + background: transparent !important; +} + +/* Make right column transparent */ +[data-theme="liquid-glass"] .w-1\/3.block { + background: transparent !important; +} + +/* Additional glass highlight for top of feed/right nav area */ +[data-theme="liquid-glass"] main > div:first-child::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 120px; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0.04) 30%, + transparent 100% + ); + pointer-events: none; + z-index: 2; + border-radius: 0; /* Square corners to prevent visible rounded edge */ +} + +/* Glass styles for components */ +[data-theme="liquid-glass"] .lg-glass { + background: rgba(255, 255, 255, var(--lg-glass-opacity, 0.03)) !important; + backdrop-filter: blur(var(--lg-blur-amount, 20px)) !important; + -webkit-backdrop-filter: blur(var(--lg-blur-amount, 20px)) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +/* ============================================= */ +/* LIQUID BLUE THEME - FUTURISTIC AI STYLING */ +/* ============================================= */ + +/* Main glass container with blue tint */ +[data-theme="liquid-blue"] main::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 255, 255, 0.08); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-radius: 0; + z-index: 0; + box-shadow: + 0 0 20px rgba(0, 255, 255, 0.2), + 0 0 40px rgba(0, 255, 170, 0.15), + inset 0 2px 3px rgba(0, 255, 255, 0.15), + inset 0 -2px 3px rgba(0, 0, 0, 0.1), + 0 12px 40px rgba(0, 0, 0, 0.15); +} + +/* Animated blue jelly border */ +[data-theme="liquid-blue"] main::after { + content: ''; + position: absolute; + top: -3px; + left: -3px; + right: -3px; + bottom: -3px; + background: linear-gradient( + 45deg, + rgba(0, 122, 255, 0.25), + rgba(6, 182, 212, 0.25), + rgba(0, 212, 255, 0.25), + rgba(0, 122, 255, 0.25) + ); + background-size: 300% 300%; + border-radius: 0; + z-index: -1; + filter: blur(6px); + opacity: 0.7; + animation: liquid-blue-jelly 12s ease-in-out infinite; +} + +/* Disable animation when motion setting is enabled */ +[data-theme="liquid-blue"][data-disable-motion="true"] main::after { + animation: none; +} + +@keyframes liquid-blue-jelly { + 0%, 100% { + background-position: 0% 50%; + } + 25% { + background-position: 50% 25%; + } + 50% { + background-position: 100% 50%; + } + 75% { + background-position: 50% 75%; + } +} + +/* Ensure main content is above glass effects */ +[data-theme="liquid-blue"] main > * { + position: relative; + z-index: 1; +} + +/* Liquid Blue Theme - Navigation Sidebar */ +[data-theme="liquid-blue"] .menu a[class*="bg-base-300"] { + background: rgba(0, 255, 255, 0.15) !important; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(0, 255, 255, 0.2); + color: white !important; + box-shadow: + inset 0 1px 2px rgba(0, 255, 255, 0.2), + 0 2px 8px rgba(0, 0, 0, 0.1); +} + +[data-theme="liquid-blue"] .menu a[class*="bg-base-300"]:hover { + background: rgba(0, 255, 255, 0.2) !important; + border-color: rgba(0, 255, 255, 0.3); +} + +[data-theme="liquid-blue"] .menu a:not([class*="bg-base-300"]):hover { + background: rgba(0, 255, 255, 0.08); + border: 1px solid rgba(0, 255, 255, 0.15); + color: rgba(255, 255, 255, 0.9); +} + +[data-theme="liquid-blue"] .menu a svg, +[data-theme="liquid-blue"] .menu a .w-6.h-6 { + color: currentColor !important; +} + +[data-theme="liquid-blue"] .menu a[class*="bg-base-300"] svg, +[data-theme="liquid-blue"] .menu a[class*="bg-base-300"] .w-6.h-6 { + color: white !important; +} + +[data-theme="liquid-blue"] .menu a:not([class*="bg-base-300"]) svg, +[data-theme="liquid-blue"] .menu a:not([class*="bg-base-300"]) .w-6.h-6 { + color: rgba(255, 255, 255, 0.75) !important; +} + +[data-theme="liquid-blue"] .menu a:not([class*="bg-base-300"]):hover svg, +[data-theme="liquid-blue"] .menu a:not([class*="bg-base-300"]):hover .w-6.h-6 { + color: rgba(255, 255, 255, 0.9) !important; +} + +[data-theme="liquid-blue"] .menu a span[class*="text-white"] { + color: white !important; +} + +[data-theme="liquid-blue"] .menu a span[class*="text-base-content/75"] { + color: rgba(255, 255, 255, 0.75) !important; +} + +[data-theme="liquid-blue"] .menu a:hover span[class*="text-base-content"] { + color: rgba(255, 255, 255, 0.9) !important; +} + +/* Top blue highlight */ +[data-theme="liquid-blue"] main > div:first-child::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 120px; + background: linear-gradient( + to bottom, + rgba(0, 255, 255, 0.15) 0%, + rgba(0, 255, 170, 0.08) 30%, + transparent 100% + ); + pointer-events: none; + z-index: 2; + border-radius: 0; +} + +/* Remove borders between feed and right nav */ +[data-theme="liquid-blue"] .w-1\/3.block .bg-base-200, +[data-theme="liquid-blue"] .w-full.sticky .bg-base-200 { + background: transparent !important; + border: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +/* Make feed area transparent */ +[data-theme="liquid-blue"] main > div:first-child { + background: transparent !important; +} + +/* Make right column transparent */ +[data-theme="liquid-blue"] .w-1\/3.block { + background: transparent !important; +} + +/* Add bevel effect to right column in liquid glass theme */ +[data-theme="liquid-glass"] .w-1\/3.block { + position: sticky !important; + top: 0 !important; + background: transparent !important; + backdrop-filter: blur(16px) !important; + -webkit-backdrop-filter: blur(16px) !important; + border-left: 0.5px solid rgba(255, 255, 255, 0.08) !important; + border-radius: 16px 0 0 0 !important; + box-shadow: + inset 0 2px 3px rgba(255, 255, 255, 0.2) !important; +} + +/* Add bevel effect to right column in liquid blue theme */ +[data-theme="liquid-blue"] .w-1\/3.block { + position: sticky !important; + top: 0 !important; + background: transparent !important; + backdrop-filter: blur(16px) !important; + -webkit-backdrop-filter: blur(16px) !important; + border-left: 1px solid rgba(0, 255, 255, 0.2) !important; + border-radius: 16px 0 0 0 !important; + box-shadow: + inset 0 2px 3px rgba(0, 255, 255, 0.15) !important; +} + +/* Liquid Blue Button Styles */ +[data-theme="liquid-blue"] .btn { + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(0, 255, 255, 0.2); + background: rgba(0, 255, 255, 0.08); + color: white; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); +} + +[data-theme="liquid-blue"] .btn:hover { + border-color: rgba(0, 255, 255, 0.4); + background: rgba(0, 255, 255, 0.12); + transform: translateY(-1px); +} + +[data-theme="liquid-blue"] .btn-primary { + background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; + border: none !important; + color: white !important; + box-shadow: 0 8px 24px rgba(0, 255, 255, 0.3); +} + +[data-theme="liquid-blue"] .btn-primary:hover { + box-shadow: 0 12px 32px rgba(0, 255, 255, 0.4); + opacity: 1 !important; +} + +/* Liquid Blue Theme - Home Feed Textarea Icons Hover Effects */ +[data-theme="liquid-blue"] .HomeFeedTextarea-container [class*="hover:text-primary"]:hover { + color: rgba(0, 255, 255, 0.9) !important; +} + +[data-theme="liquid-blue"] .HomeFeedTextarea-container svg:hover { + color: rgba(0, 255, 255, 0.9) !important; +} + +[data-theme="liquid-blue"] .HomeFeedTextarea-container button:hover svg { + color: rgba(0, 255, 255, 0.9) !important; +} + +/* Liquid Blue Input Styles */ +[data-theme="liquid-blue"] .input, +[data-theme="liquid-blue"] .select, +[data-theme="liquid-blue"] .textarea { + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(0, 122, 255, 0.2); + background: rgba(0, 122, 255, 0.06) !important; + color: white; +} + +[data-theme="liquid-blue"] .input:focus, +[data-theme="liquid-blue"] .select:focus, +[data-theme="liquid-blue"] .textarea:focus { + border-color: rgba(0, 255, 255, 0.6); + background: rgba(0, 122, 255, 0.08) !important; + outline: none; + box-shadow: 0 0 20px rgba(0, 122, 255, 0.3); +} + +/* Liquid Blue Modal Styles */ +[data-theme="liquid-blue"] .modal-box { + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid rgba(0, 255, 255, 0.2); + background: rgba(0, 122, 255, 0.08) !important; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); +} + +/* Liquid Blue Card Styles */ +[data-theme="liquid-blue"] .card { + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(0, 122, 255, 0.2); + background: rgba(0, 122, 255, 0.03) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); +} + +[data-theme="liquid-blue"] .card:hover { + border-color: rgba(0, 122, 255, 0.4); + transform: translateY(-4px); + box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2); +} + +/* Liquid Blue Tab Styles */ +[data-theme="liquid-blue"] .tab { + color: rgba(255, 255, 255, 0.7); + transition: all 0.3s ease; +} + +[data-theme="liquid-blue"] .tab.tab-active { + color: white; + background: rgba(0, 122, 255, 0.1); + border-radius: 8px; +} + +/* Feed item glass effect */ +[data-theme="liquid-blue"] .feed-item, +[data-theme="liquid-blue"] article:not(.profile-bio-article) { + background: rgba(0, 122, 255, 0.02); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(0, 122, 255, 0.08); + transition: all 0.3s ease; +} + +[data-theme="liquid-blue"] .feed-item:hover, +[data-theme="liquid-blue"] article:not(.profile-bio-article):hover { + background: rgba(0, 122, 255, 0.04); + border-color: rgba(0, 122, 255, 0.15); + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); +} + +/* Liquid Blue Sidebar Glass Effects */ +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end { + position: relative; + isolation: isolate; +} + +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end::before { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(0, 255, 255, 0.08); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-radius: 0 16px 0 0; + z-index: -1; + box-shadow: + 0 0 20px rgba(0, 255, 255, 0.2), + 0 0 40px rgba(0, 255, 170, 0.15), + inset 0 2px 3px rgba(0, 255, 255, 0.15), + inset 0 -2px 3px rgba(0, 0, 0, 0.1), + 0 12px 40px rgba(0, 0, 0, 0.15); + pointer-events: none; +} + +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end::after { + content: ''; + position: absolute; + top: -3px; + left: -3px; + bottom: -3px; + right: -3px; + background: linear-gradient( + 45deg, + rgba(0, 122, 255, 0.25), + rgba(0, 165, 255, 0.25), + rgba(0, 136, 255, 0.25), + rgba(0, 122, 255, 0.25) + ); + background-size: 300% 300%; + border-radius: 0 19px 0 0; + z-index: -2; + filter: blur(6px); + opacity: 0.7; + animation: liquid-blue-jelly 12s ease-in-out infinite; + pointer-events: none; +} + +/* Disable animation when motion setting is enabled */ +[data-theme="liquid-blue"][data-disable-motion="true"] .flex.flex-col.h-full.self-end::after { + animation: none; +} + +/* Sidebar glass highlight */ +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end > div:first-child::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 120px; + background: linear-gradient( + to bottom, + rgba(0, 255, 255, 0.12) 0%, + rgba(0, 255, 170, 0.05) 30%, + transparent 100% + ); + border-radius: 0 16px 0 0; + pointer-events: none; + z-index: 2; +} + +/* Ensure content is above glass effects */ +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end > * { + position: relative; + z-index: 1; +} + +/* Fix left sidebar positioning - prevent overflow issues */ +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end { + overflow: hidden; + contain: layout style paint; + /* Make sidebar fill full viewport height to eliminate black gap */ + min-height: 100vh; + height: 100vh; +} + +/* Prevent glass pseudo-elements from extending beyond sidebar bounds */ +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end::before, +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end::after { + contain: layout style paint; + overflow: hidden; +} + +/* Adjust opacity of glass background for better visibility */ +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end::before { + background: rgba(0, 255, 255, 0.10) !important; /* Enhanced transparency */ +} + +/* Ensure glass effects don't affect document flow */ +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end::before, +[data-theme="liquid-blue"] .flex.flex-col.h-full.self-end::after { + position: absolute; + pointer-events: none; +} + +/* Ensure glass effects don't cause scrollbars */ +[data-theme="liquid-blue"] *::before, +[data-theme="liquid-blue"] *::after { + box-sizing: border-box; + max-width: 100%; + max-height: 100%; +} + +/* Style SideBarToolBar buttons */ +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 button, +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 a, +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button, +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 a { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: none !important; + color: rgba(255, 255, 255, 0.8) !important; + transition: box-shadow 0.2s ease !important; +} + +/* SideBarToolBar glass effect on icons */ +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 svg, +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 a svg, +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 svg, +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 a svg { + opacity: 0.95; + filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.4)) blur(0.5px); + transition: all 0.3s ease; +} + +/* SideBarToolBar hover effects - cyan icon glow */ +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 button:hover svg, +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 a:hover svg, +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:hover svg, +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 a:hover svg { + opacity: 1; + filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6)) drop-shadow(0 0 12px rgba(0, 255, 170, 0.5)) blur(0.5px) !important; +} + +/* FEEDS BUTTON ONLY (3rd position in 2x2 grid) - conjoined cyan glow system */ +/* When hovering over Feeds icon - glow both icon and text */ +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 button:nth-child(3):has(svg:hover) svg, +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 button:nth-child(3):has(svg:hover) span, +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:nth-child(3):has(svg:hover) svg, +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:nth-child(3):has(svg:hover) span { + filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 18px rgba(0, 255, 170, 0.7)) drop-shadow(0 0 24px rgba(0, 255, 255, 0.6)) !important; +} + +/* When hovering over Feeds text - glow both text and icon */ +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 button:nth-child(3):has(span:hover) svg, +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 button:nth-child(3):has(span:hover) span, +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:nth-child(3):has(span:hover) svg, +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:nth-child(3):has(span:hover) span { + filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 18px rgba(0, 255, 170, 0.7)) drop-shadow(0 0 24px rgba(0, 255, 255, 0.6)) !important; +} + +/* NEW POST BUTTON ONLY - conjoined cyan glow system */ +/* When hovering over new post icon - glow both icon and text */ +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 button:has(div[class*="rounded-md"]:hover) div[class*="rounded-md"], +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:has(div[class*="rounded-md"]:hover) div[class*="rounded-md"] { + box-shadow: 0 0 8px rgba(0, 255, 255, 0.6), 0 0 12px rgba(0, 255, 170, 0.5), 0 0 16px rgba(0, 255, 255, 0.4) !important; +} + +/* When hovering over new post text - glow both text and icon */ +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 button:has(span:hover) div[class*="rounded-md"], +[data-theme="liquid-blue"] .grid.grid-flow-col.grid-rows-2.grid-cols-2 button:has(span:hover) div[class*="rounded-md"] { + box-shadow: 0 0 8px rgba(0, 255, 255, 0.6), 0 0 12px rgba(0, 255, 170, 0.5), 0 0 16px rgba(0, 255, 255, 0.4) !important; +} + +/* Hover and active states removed */ + +/* Active/selected state highlight removed */ + +/* Make SideBarToolBar background transparent */ +[data-theme="liquid-blue"] .flex.items-center.justify-center.h-1\/6 { + background: transparent !important; +} + +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-2.p-2 { + background: transparent !important; +} + +/* Ensure proper vertical alignment of containers */ +[data-theme="liquid-blue"] .flex.relative.min-h-\[calc\(100vh-6em\)\] { + align-items: stretch !important; +} + +/* Align both containers to start at the same position */ +[data-theme="liquid-blue"] .flex.relative.min-h-\[calc\(100vh-6em\)\] > * { + align-self: stretch !important; +} + +/* Fix right column spacing */ +[data-theme="liquid-blue"] .border-l.border-\[var\(--border-color\)\].mt-\[4em\] { + margin-top: 4em !important; + background: transparent !important; + border-color: rgba(0, 255, 255, 0.08) !important; +} + +/* Enhanced HomeFeedTextarea glow for liquid blue theme */ +[data-theme="liquid-blue"] .HomeFeedTextarea-container:focus-within { + ring-color: rgba(0, 255, 255, 0.4) !important; + box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.4), 0 0 20px rgba(0, 255, 255, 0.3) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +/* Enhanced SearchBox effects for liquid blue theme */ +[data-theme="liquid-blue"] .dropdown-content.menu { + background: linear-gradient(135deg, rgba(0, 255, 255, 0.12) 0%, rgba(0, 255, 255, 0.08) 100%) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; + border: 1px solid rgba(0, 255, 255, 0.3) !important; + box-shadow: + 0 8px 32px rgba(0, 255, 255, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; +} + +[data-theme="liquid-blue"] input:focus { + ring-color: rgba(0, 255, 255, 0.6) !important; + box-shadow: + 0 0 0 2px rgba(0, 255, 255, 0.6), + 0 0 25px rgba(0, 255, 255, 0.4), + 0 0 50px rgba(0, 255, 255, 0.2) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +/* Enhanced search mode buttons for liquid blue theme */ +[data-theme="liquid-blue"] .dropdown-content.menu button { + background: rgba(0, 255, 255, 0.08) !important; + border: 1px solid rgba(0, 255, 255, 0.25) !important; + color: rgba(0, 255, 255, 0.9) !important; + backdrop-filter: blur(10px) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +[data-theme="liquid-blue"] .dropdown-content.menu button:hover { + background: rgba(0, 255, 255, 0.15) !important; + border-color: rgba(0, 255, 255, 0.4) !important; + color: rgba(0, 255, 255, 1) !important; + box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important; + transform: translateY(-1px) !important; +} + +/* Liquid Blue Theme - Search dropdown item hover effects */ +[data-theme="liquid-blue"] .dropdown-content.menu [class*="cursor-pointer"]:hover, +[data-theme="liquid-blue"] .dropdown-content.menu div[class*="flex"][class*="items-center"]:hover { + background: rgba(0, 255, 255, 0.08) !important; +} + +/* Liquid Blue Theme - Search mode button hover effects */ +[data-theme="liquid-blue"] .dropdown-content.menu button[class*="thread-dropdown-btn"]:hover { + background: rgba(0, 255, 255, 0.08) !important; + border-color: rgba(0, 255, 255, 0.15) !important; +} + + +/* Enhanced dropdown caret for liquid blue theme - only in MiddleHeader context */ +[data-theme="liquid-blue"] header div[class*="justify-center"] svg.MuiSvgIcon-root { + color: rgba(255, 255, 255, 0.7) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +/* Blue on hover over the specific clickable area (title + caret container) */ +[data-theme="liquid-blue"] header div[class*="justify-center"]:hover svg.MuiSvgIcon-root { + color: rgba(0, 255, 255, 0.9) !important; + filter: drop-shadow(0 0 3px rgba(0, 255, 255, 0.4)) !important; +} + +/* Enhanced feed tabs dropdown for liquid blue theme */ +[data-theme="liquid-blue"] header div.absolute.top-full.left-1\/2.transform.-translate-x-1\/2.mt-1.py-2.bg-base-200.rounded-lg.shadow-lg.min-w-\[120px\].z-50 { + background: linear-gradient(135deg, rgba(0, 255, 255, 0.18) 0%, rgba(0, 255, 255, 0.12) 100%) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; + border: 1px solid rgba(0, 255, 255, 0.35) !important; + box-shadow: + 0 8px 32px rgba(0, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; +} + +[data-theme="liquid-blue"] header div.absolute.top-full.left-1\/2.transform.-translate-x-1\/2.mt-1.py-2.bg-base-200.rounded-lg.shadow-lg.min-w-\[120px\].z-50 button { + color: rgba(255, 255, 255, 1) !important; + backdrop-filter: blur(10px) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +[data-theme="liquid-blue"] header div.absolute.top-full.left-1\/2.transform.-translate-x-1\/2.mt-1.py-2.bg-base-200.rounded-lg.shadow-lg.min-w-\[120px\].z-50 button:hover { + background: rgba(0, 255, 255, 0.2) !important; + color: white !important; + box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important; + transform: translateY(-1px) !important; +} + +/* Liquid Glass Theme - Enhanced Glass Effects */ +/* Enhanced SearchBox effects for liquid glass theme */ +[data-theme="liquid-glass"] .dropdown-content.menu { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%) !important; + backdrop-filter: blur(25px) !important; + -webkit-backdrop-filter: blur(25px) !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; +} + +/* Liquid Glass Theme - Search dropdown item hover effects */ +[data-theme="liquid-glass"] .dropdown-content.menu [class*="cursor-pointer"]:hover, +[data-theme="liquid-glass"] .dropdown-content.menu div[class*="flex"][class*="items-center"]:hover { + background: rgba(255, 255, 255, 0.08) !important; +} + +/* Liquid Glass Theme - Search mode button hover effects */ +[data-theme="liquid-glass"] .dropdown-content.menu button[class*="px-3 py-1"]:hover, +[data-theme="liquid-glass"] .dropdown-content.menu button[class*="thread-dropdown-btn"]:hover { + background: rgba(255, 255, 255, 0.08) !important; + border-color: rgba(255, 255, 255, 0.1) !important; +} + +[data-theme="liquid-glass"] input:focus { + ring-color: rgba(255, 255, 255, 0.5) !important; + box-shadow: + 0 0 0 2px rgba(255, 255, 255, 0.5), + 0 0 25px rgba(255, 255, 255, 0.4), + 0 0 50px rgba(255, 255, 255, 0.3) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +/* Enhanced search mode buttons for liquid glass theme */ +[data-theme="liquid-glass"] .dropdown-content.menu button { + background: rgba(255, 255, 255, 0.08) !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + color: rgba(255, 255, 255, 0.9) !important; + backdrop-filter: blur(10px) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +[data-theme="liquid-glass"] .dropdown-content.menu button:hover { + background: rgba(255, 255, 255, 0.15) !important; + border-color: rgba(255, 255, 255, 0.3) !important; + color: rgba(255, 255, 255, 1) !important; + box-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important; + transform: translateY(-1px) !important; +} + +[data-theme="liquid-glass"] .dropdown-content.menu button.bg-primary { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%) !important; + border-color: rgba(255, 255, 255, 1) !important; + color: rgba(0, 0, 0, 0.8) !important; + box-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important; +} + +/* Enhanced dropdown caret for liquid glass theme */ +[data-theme="liquid-glass"] header div[class*="justify-center"] svg.MuiSvgIcon-root { + color: rgba(255, 255, 255, 0.7) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +/* Remove any glow effects from SubPageSearchBar dropdown */ +.absolute.mt-2.w-full.bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border input, +.absolute.mt-2.w-full.bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border, +.absolute.mt-2.w-full.bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border * { + box-shadow: none !important; + filter: none !important; + text-shadow: none !important; +} + +/* SubPageSearchBar dropdown glass effects */ +[data-theme="liquid-glass"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; +} + +[data-theme="liquid-blue"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] { + background: linear-gradient(135deg, rgba(0, 255, 255, 0.12) 0%, rgba(0, 255, 255, 0.08) 100%) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; + border: 1px solid rgba(0, 255, 255, 0.3) !important; + box-shadow: + 0 8px 32px rgba(0, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.15), + inset 0 1px 0 rgba(0, 255, 255, 0.2) !important; +} + +/* Dark theme SubPageSearchBar dropdown */ +[data-theme="dark"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%) !important; + backdrop-filter: blur(15px) !important; + -webkit-backdrop-filter: blur(15px) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + box-shadow: + 0 6px 24px rgba(0, 0, 0, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; +} + +/* Dim theme SubPageSearchBar dropdown */ +[data-theme="dim"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%) !important; + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; + border: 1px solid rgba(255, 255, 255, 0.08) !important; + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; +} + +/* Blue theme SubPageSearchBar dropdown */ +[data-theme="light"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] { + background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.04) 100%) !important; + backdrop-filter: blur(15px) !important; + -webkit-backdrop-filter: blur(15px) !important; + border: 1px solid rgba(0, 0, 0, 0.12) !important; + box-shadow: + 0 6px 24px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; +} + +/* Enhanced clickable time frame buttons in search dropdown */ +.bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="px-3 py-1 rounded-full text-sm"] { + border: 1px solid rgba(0, 0, 0, 0.12) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; + cursor: pointer !important; + font-weight: 500 !important; +} + +/* Hover state for time frame buttons */ +.bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="px-3 py-1 rounded-full text-sm"]:hover { + border-color: rgba(0, 0, 0, 0.25) !important; + transform: translateY(-1px) !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; +} + +/* Selected state for time frame buttons */ +.bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="bg-[#00FFFF]"] { + border-color: rgba(0, 255, 255, 0.6) !important; + box-shadow: 0 0 10px rgba(0, 255, 255, 0.2) !important; +} + +/* Theme-specific time frame button styling */ +[data-theme="liquid-glass"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="px-3 py-1 rounded-full text-sm"] { + border-color: rgba(255, 255, 255, 0.15) !important; +} + +[data-theme="liquid-glass"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="px-3 py-1 rounded-full text-sm"]:hover { + border-color: rgba(255, 255, 255, 0.25) !important; + box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1) !important; +} + +[data-theme="liquid-glass"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="bg-[#00FFFF]"] { + border-color: rgba(255, 255, 255, 0.3) !important; + box-shadow: 0 0 8px rgba(255, 255, 255, 0.15) !important; +} + +[data-theme="liquid-blue"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="px-3 py-1 rounded-full text-sm"] { + border-color: rgba(0, 255, 255, 0.15) !important; +} + +[data-theme="liquid-blue"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="px-3 py-1 rounded-full text-sm"]:hover { + border-color: rgba(0, 255, 255, 0.25) !important; + box-shadow: 0 2px 8px rgba(0, 255, 255, 0.1) !important; +} + +[data-theme="dark"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="px-3 py-1 rounded-full text-sm"] { + border-color: rgba(255, 255, 255, 0.15) !important; +} + +[data-theme="dark"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="px-3 py-1 rounded-full text-sm"]:hover { + border-color: rgba(255, 255, 255, 0.25) !important; + box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08) !important; +} + +[data-theme="dim"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="px-3 py-1 rounded-full text-sm"] { + border-color: rgba(255, 255, 255, 0.12) !important; +} + +[data-theme="dim"] .bg-base-300.rounded-lg.shadow-lg.z-10.p-3.border.border-\[var\(--border-color\)\] button[class*="px-3 py-1 rounded-full text-sm"]:hover { + border-color: rgba(255, 255, 255, 0.2) !important; + box-shadow: 0 2px 8px rgba(255, 255, 255, 0.06) !important; +} + +[data-theme="liquid-glass"] header div[class*="justify-center"]:hover svg.MuiSvgIcon-root { + color: rgba(255, 255, 255, 0.9) !important; + filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)) !important; +} + +/* Enhanced feed tabs dropdown for liquid glass theme - Purple Glass Effect */ +[data-theme="liquid-glass"] header div.absolute.top-full.left-1\/2.transform.-translate-x-1\/2.mt-1.py-2.bg-base-200.rounded-lg.shadow-lg.min-w-\[120px\].z-50 { + background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(147, 51, 234, 0.2) 100%) !important; + backdrop-filter: blur(25px) !important; + -webkit-backdrop-filter: blur(25px) !important; + border: 1px solid rgba(168, 85, 247, 0.4) !important; + box-shadow: + 0 12px 40px rgba(147, 51, 234, 0.25), + 0 0 0 1px rgba(255, 255, 255, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; + border-radius: 12px !important; +} + +[data-theme="liquid-glass"] header div.absolute.top-full.left-1\/2.transform.-translate-x-1\/2.mt-1.py-2.bg-base-200.rounded-lg.shadow-lg.min-w-\[120px\].z-50 button { + color: rgba(255, 255, 255, 1) !important; + backdrop-filter: blur(10px) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; + border-radius: 8px !important; + font-weight: 600 !important; + letter-spacing: 0.025em !important; +} + +[data-theme="liquid-glass"] header div.absolute.top-full.left-1\/2.transform.-translate-x-1\/2.mt-1.py-2.bg-base-200.rounded-lg.shadow-lg.min-w-\[120px\].z-50 button:hover { + background: rgba(168, 85, 247, 0.3) !important; + color: white !important; + box-shadow: 0 0 20px rgba(168, 85, 247, 0.5) !important; + transform: translateY(-2px) !important; + border: 1px solid rgba(168, 85, 247, 0.5) !important; +} + +/* Active/selected button state for liquid glass theme */ +[data-theme="liquid-glass"] header div.absolute.top-full.left-1\/2.transform.-translate-x-1\/2.mt-1.py-2.bg-base-200.rounded-lg.shadow-lg.min-w-\[120px\].z-50 button.active { + background: linear-gradient(135deg, rgba(168, 85, 247, 0.5) 0%, rgba(147, 51, 234, 0.4) 100%) !important; + color: white !important; + box-shadow: 0 0 25px rgba(168, 85, 247, 0.6) !important; + border: 1px solid rgba(168, 85, 247, 0.6) !important; +} + +/* Enhanced feed tabs dropdown for liquid blue theme */ +[data-theme="liquid-blue"] header div.absolute.top-full { + background: linear-gradient(135deg, rgba(0, 255, 255, 0.18) 0%, rgba(0, 255, 255, 0.12) 100%) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; + border: 1px solid rgba(0, 255, 255, 0.35) !important; + box-shadow: + 0 8px 32px rgba(0, 255, 255, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; +} + +[data-theme="liquid-blue"] header div.absolute.top-full button { + color: rgba(255, 255, 255, 1) !important; + backdrop-filter: blur(10px) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +[data-theme="liquid-blue"] header div.absolute.top-full button:hover { + background: rgba(0, 255, 255, 0.2) !important; + color: white !important; + box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important; + transform: translateY(-1px) !important; +} + + +/* ============================================= */ +/* LIQUID BLUE - COMPONENT-BASED STYLING */ +/* ============================================= */ + +/* + * Color consistency is now handled directly in NavSideBar component + * using explicit RGBA values that match the liquid blue theme. + * These CSS overrides have been removed to prevent conflicts. + */ + +/* Button styles */ +[data-theme="liquid-glass"] .btn { + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.08); + color: white; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); +} + +[data-theme="liquid-glass"] .btn:hover { + border-color: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.12); + transform: translateY(-2px); +} + +[data-theme="liquid-glass"] .btn-primary { + background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; + border: none !important; + color: white !important; + box-shadow: 0 8px 24px rgba(0, 122, 255, 0.3); +} + +[data-theme="liquid-glass"] .btn-primary:hover { + box-shadow: 0 12px 32px rgba(0, 122, 255, 0.4); + opacity: 1 !important; +} + +[data-theme="liquid-glass"] .btn-neutral { + background: rgba(255, 255, 255, 0.06) !important; + color: white !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +[data-theme="liquid-glass"] .btn-neutral:hover { + background: rgba(255, 255, 255, 0.1) !important; + border-color: rgba(255, 255, 255, 0.2) !important; +} + +/* Input styles */ +[data-theme="liquid-glass"] .input, +[data-theme="liquid-glass"] .select, +[data-theme="liquid-glass"] .textarea { + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.06) !important; + color: white; +} + +[data-theme="liquid-glass"] .input:focus, +[data-theme="liquid-glass"] .select:focus, +[data-theme="liquid-glass"] .textarea:focus { + border-color: rgba(0, 122, 255, 0.5); + background: rgba(255, 255, 255, 0.08) !important; + outline: none; +} + +/* Modal styles */ +[data-theme="liquid-glass"] .modal-box { + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.2) !important; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); +} + +/* Card styles */ +[data-theme="liquid-glass"] .card { + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.03) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); +} + +[data-theme="liquid-glass"] .card:hover { + border-color: rgba(255, 255, 255, 0.2); + transform: translateY(-4px); + box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2); +} + +/* Dropdown styles */ +[data-theme="liquid-glass"] .dropdown-content { + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + background: rgba(255, 255, 255, 0.08) !important; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); +} + +/* Tab styles */ +[data-theme="liquid-glass"] .tab { + color: rgba(255, 255, 255, 0.7); + transition: all 0.3s ease; +} + +[data-theme="liquid-glass"] .tab.tab-active { + color: white; + background: rgba(255, 255, 255, 0.1); + border-radius: 8px; +} + +/* Badge styles */ +[data-theme="liquid-glass"] .badge { + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + background: rgba(255, 255, 255, 0.1) !important; + border: 1px solid rgba(255, 255, 255, 0.2); + color: white; +} + +/* Menu item styles */ +[data-theme="liquid-glass"] .menu li > a:hover, +[data-theme="liquid-glass"] .menu li > button:hover { + background: rgba(255, 255, 255, 0.08); + color: white; +} + +[data-theme="liquid-glass"] .menu li > a.active, +[data-theme="liquid-glass"] .menu li > button.active { + background: rgba(255, 255, 255, 0.12); + color: white; +} + +/* Avatar styles */ +[data-theme="liquid-glass"] .avatar { + border: 2px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +/* Scrollbar styles for liquid glass theme */ +[data-theme="liquid-glass"] ::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +[data-theme="liquid-glass"] ::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 5px; +} + +[data-theme="liquid-glass"] ::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); + border-radius: 5px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +[data-theme="liquid-glass"] ::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.3); +} + +/* Feed item glass effect */ +[data-theme="liquid-glass"] .feed-item, +[data-theme="liquid-glass"] article:not(.profile-bio-article) { + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.08); + transition: all 0.3s ease; +} + +[data-theme="liquid-glass"] .feed-item:hover, +[data-theme="liquid-glass"] article:not(.profile-bio-article):hover { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.12); + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); +} + +/* Remove article styling from profile bio */ +[data-theme="liquid-glass"] .flex.flex-col.gap-2.no-highlight article, +[data-theme="liquid-glass"] .profile-bio-article { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: none !important; + box-shadow: none !important; + transition: none !important; +} + +[data-theme="liquid-glass"] .flex.flex-col.gap-2.no-highlight article:hover, +[data-theme="liquid-glass"] .profile-bio-article:hover { + background: transparent !important; + transform: none !important; + box-shadow: none !important; + border: none !important; +} + +/* Tooltip styles */ +[data-theme="liquid-glass"] .tooltip::before { + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + background: rgba(255, 255, 255, 0.12) !important; + border: 1px solid rgba(255, 255, 255, 0.2); + color: white !important; +} + +/* Progress bar styles */ +[data-theme="liquid-glass"] .progress { + background: rgba(255, 255, 255, 0.1) !important; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +[data-theme="liquid-glass"] .progress::-webkit-progress-value { + background: linear-gradient(135deg, var(--primary), var(--secondary)); +} + +/* Toggle styles */ +[data-theme="liquid-glass"] .toggle { + background: rgba(255, 255, 255, 0.1) !important; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +[data-theme="liquid-glass"] .toggle:checked { + background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; + border-color: transparent; +} + +/* Divider styles */ +[data-theme="liquid-glass"] .divider { + color: rgba(255, 255, 255, 0.3); +} + +[data-theme="liquid-glass"] .divider::before, +[data-theme="liquid-glass"] .divider::after { + background: rgba(255, 255, 255, 0.1); +} + +/* NavSideBar item styling for liquid glass theme */ +[data-theme="liquid-glass"] .menu a[class*="bg-base-300"] { + background: rgba(255, 255, 255, 0.12) !important; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.15); + color: white !important; + box-shadow: + inset 0 1px 2px rgba(255, 255, 255, 0.2), + 0 2px 8px rgba(0, 0, 0, 0.1); +} + +[data-theme="liquid-glass"] .menu a:not([class*="bg-base-300"]):hover { + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.9); +} + +/* Ensure proper icon colors in nav items */ +[data-theme="liquid-glass"] .menu a svg, +[data-theme="liquid-glass"] .menu a .w-6.h-6 { + color: currentColor !important; +} + +/* Style RightColumn sections for liquid glass */ +[data-theme="liquid-glass"] .section, +[data-theme="liquid-glass"] [class*="Section"] { + background: rgba(255, 255, 255, 0.03) !important; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 12px; +} + +/* Ensure proper vertical alignment of containers */ +[data-theme="liquid-glass"] .flex.relative.min-h-\[calc\(100vh-6em\)\] { + align-items: stretch !important; +} + +/* Align both containers to start at the same position */ +[data-theme="liquid-glass"] .flex.relative.min-h-\[calc\(100vh-6em\)\] > * { + align-self: stretch !important; +} + +/* ============================================= */ +/* NOTIFICATION PAGE - MATCH MAIN FEED STYLE */ +/* ============================================= */ + +/* Remove special glass effects from notification page - let it be clean like main feed */ +[data-theme="liquid-glass"] section.flex.flex-1.w-full.justify-center { + background: transparent !important; +} + +/* Keep MiddleHeader's original frost effect */ +[data-theme="liquid-glass"] .hidden.cursor-pointer.md\:flex.sticky.top-\[2em\].h-\[4em\].z-40.w-full.bg-base-100.bg-opacity-80.backdrop-blur-sm { + border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; +} + +/* ============================================= */ +/* MAINFEED TOP HEADER STRIP (White Frost Effect) */ +/* ============================================= */ +/* This creates a frosted white strip at the top of the MainFeed area only, + not affecting the sidebars or their content (Relay icons, Nestr logo) */ + +/* Apply frosted white strip only to MainFeed's top section */ +[data-theme="liquid-glass"] main::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2rem; /* 32px - matches TitleBar height */ + + /* Frosted white glass effect matching Search page MiddleHeader */ + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + + /* Visual definition */ + border-bottom: none; /* Removed border for seamless transition */ + box-shadow: + 0 2px 4px rgba(0, 0, 0, 0.05); /* Removed inset shadow to eliminate line */ + + /* Proper layering */ + z-index: 1; /* Above main background but below content */ + pointer-events: none; + border-radius: 16px 0 0 0; /* Top-left corner rounded for header strip */ +} + +/* Remove pseudo-elements that were adding extra glass effects */ + +/* Keep notification page content simple and clean */ +[data-theme="liquid-glass"] section.flex.flex-1.w-full.justify-center .flex.flex-col > div { + background: transparent !important; +} + +/* Make notification feed container transparent to avoid double blur */ +[data-theme="liquid-glass"] section.flex.flex-1.w-full.justify-center .overflow-y-scroll { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border-color: rgba(255, 255, 255, 0.08) !important; + box-shadow: none !important; +} + +/* Style individual notification items with subtle effect to avoid excessive blur */ +[data-theme="liquid-glass"] .border-b.border-\[--border-color\].p-4 { + background: rgba(255, 255, 255, 0.01); + backdrop-filter: none; + -webkit-backdrop-filter: none; + border: 1px solid rgba(255, 255, 255, 0.05); + transition: all 0.3s ease; + margin-bottom: 8px; + border-radius: 8px; +} + +[data-theme="liquid-glass"] .border-b.border-\[--border-color\].p-4:hover { + background: rgba(255, 255, 255, 0.03); + border-color: rgba(255, 255, 255, 0.08); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +/* Remove glass effect from notification filters section - keep it clean */ +[data-theme="liquid-glass"] .h-\[50vh\].min-h-\[300px\] { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: none !important; + box-shadow: none !important; +} + +/* Make notification RightColumn container transparent to avoid double blur */ +[data-theme="liquid-glass"] section.flex.flex-1.w-full.justify-center + div { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border-left-color: rgba(255, 255, 255, 0.08) !important; +} + +/* Remove extra highlights to match main feed simplicity */ + +/* ============================================= */ +/* TITLEBAR STYLING FOR LIQUID GLASS THEME */ +/* ============================================= */ + +/* Make TitleBar completely transparent */ +[data-theme="liquid-glass"] .w-full.h-8.flex.items-center.bg-base-100.select-none.z-10.fixed.top-0.left-0.right-0 { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border-bottom: none !important; + box-shadow: none !important; +} + +/* Style window control buttons with subtle glass effect */ +[data-theme="liquid-glass"] .w-full.h-8.flex.items-center.bg-base-100.select-none.z-10.fixed.top-0.left-0.right-0 button { + color: rgba(255, 255, 255, 0.9) !important; + transition: all 0.2s ease; + position: relative; + z-index: 1; +} + +/* Ensure draggable region and logo text stay above pseudo-elements */ +[data-theme="liquid-glass"] .w-full.h-8.flex.items-center.bg-base-100.select-none.z-10.fixed.top-0.left-0.right-0 > div { + position: relative; + z-index: 1; +} + +/* Hover states for window controls */ +[data-theme="liquid-glass"] .w-full.h-8.flex.items-center.bg-base-100.select-none.z-10.fixed.top-0.left-0.right-0 button:hover { + color: white !important; +} + +/* Minimize and Maximize button hover */ +[data-theme="liquid-glass"] .w-full.h-8.flex.items-center.bg-base-100.select-none.z-10.fixed.top-0.left-0.right-0 button.hover\:bg-base-300:hover { + background: rgba(255, 255, 255, 0.15) !important; +} + +/* Close button hover maintains red */ +[data-theme="liquid-glass"] .w-full.h-8.flex.items-center.bg-base-100.select-none.z-10.fixed.top-0.left-0.right-0 button.hover\:bg-red-500:hover { + background: rgba(239, 68, 68, 0.8) !important; + color: white !important; +} + +/* ============================================= */ +/* USER TOOLBAR LIQUID GLASS STYLING */ +/* ============================================= */ + +/* Apply consistent liquid glass styling to UserToolbar across all pages */ +[data-theme="liquid-glass"] .fixed.z-50.right-5 { + /* Ensure consistent positioning and appearance */ + background: transparent !important; +} + +/* Glass effect for UserToolbar on AI Assistant page */ +[data-theme="liquid-glass"] body:has(.ai-assistant-container) .fixed.z-50.right-5 input, +[data-theme="liquid-glass"] body:has(.ai-assistant-container) .fixed.z-50.right-5 .searchBox { + background: rgba(255, 255, 255, 0.06) !important; + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +/* Style the UserToolbar buttons on AI Assistant page */ +[data-theme="liquid-glass"] body:has(.ai-assistant-container) .fixed.z-50.right-5 button.border { + background: rgba(255, 255, 255, 0.06) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + border-color: rgba(255, 255, 255, 0.1) !important; +} + +[data-theme="liquid-glass"] body:has(.ai-assistant-container) .fixed.z-50.right-5 button.border:hover { + background: rgba(255, 255, 255, 0.1) !important; + border-color: rgba(255, 255, 255, 0.2) !important; +} + +/* Style AIAssistantHeader buttons for liquid glass theme - more subtle, less frosty */ +[data-theme="liquid-glass"] body:has(.ai-assistant-container) header .btn { + /* Reduce glass effect, increase opacity for better visibility */ + opacity: 0.9 !important; + /* Only add subtle glass, don't override backgrounds */ + backdrop-filter: blur(2px) !important; + -webkit-backdrop-filter: blur(2px) !important; +} + +/* Ensure non-gradient buttons keep their original backgrounds */ +[data-theme="liquid-glass"] body:has(.ai-assistant-container) header .btn:not(.bg-gradient-to-r) { + background: inherit !important; +} + +[data-theme="liquid-glass"] body:has(.ai-assistant-container) header .btn:hover { + /* Keep original hover effects, just add subtle glass */ + backdrop-filter: blur(3px) !important; + -webkit-backdrop-filter: blur(3px) !important; + opacity: 1 !important; +} + +/* Ensure hover effects are preserved for all button types */ +[data-theme="liquid-glass"] body:has(.ai-assistant-container) header .btn:hover { + background: inherit !important; + border-color: inherit !important; +} + +[data-theme="liquid-glass"] body:has(.ai-assistant-container) header .btn.bg-gradient-to-r { + /* Remove all glass effects from gradient buttons to preserve original look */ + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + opacity: 1 !important; +} + +/* Restore rounded corners for AI Assistant header buttons */ +[data-theme="liquid-glass"] body:has(.ai-assistant-container) header .btn { + border-radius: 0.5rem !important; /* Restore rounded corners */ +} + +/* Ensure gradient buttons keep their rounded styling */ +[data-theme="liquid-glass"] body:has(.ai-assistant-container) header .btn.bg-gradient-to-r { + border-radius: 0.5rem !important; +} + +[data-theme="liquid-glass"] body:has(.ai-assistant-container) header .btn.bg-gradient-to-r:hover { + opacity: 0.9 !important; + box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important; + transform: translateY(-1px) !important; +} + +/* Style the UserToolbar search box for liquid glass theme */ +[data-theme="liquid-glass"] .fixed.z-50.right-5 .searchBox, +[data-theme="liquid-glass"] .fixed.z-50.right-5 input { + background: rgba(255, 255, 255, 0.06) !important; + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +/* Style the UserToolbar buttons (wallet, notifications) */ +[data-theme="liquid-glass"] .fixed.z-50.right-5 button.border { + background: rgba(255, 255, 255, 0.06) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + border-color: rgba(255, 255, 255, 0.1) !important; +} + +[data-theme="liquid-glass"] .fixed.z-50.right-5 button.border:hover { + background: rgba(255, 255, 255, 0.1) !important; + border-color: rgba(255, 255, 255, 0.2) !important; +} + +/* Fix UserToolbar positioning and appearance on AI Assistant page */ +/* The UserToolbar is rendered before ai-assistant-container, not after */ +[data-theme="liquid-glass"] body:has(.ai-assistant-container) .fixed.z-50.right-5 { + /* Ensure the UserToolbar maintains consistent positioning */ + position: fixed !important; + z-index: 50 !important; + right: 1.25rem !important; + background: transparent !important; +} + +/* Ensure UserToolbar components have proper glass effect on AI Assistant page */ +[data-theme="liquid-glass"] body:has(.ai-assistant-container) .fixed.z-50.right-5 input, +[data-theme="liquid-glass"] body:has(.ai-assistant-container) .fixed.z-50.right-5 .searchBox { + background: rgba(255, 255, 255, 0.06) !important; + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +/* Style the UserToolbar buttons on AI Assistant page */ +[data-theme="liquid-glass"] body:has(.ai-assistant-container) .fixed.z-50.right-5 button.border { + background: rgba(255, 255, 255, 0.06) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + border-color: rgba(255, 255, 255, 0.1) !important; +} + +[data-theme="liquid-glass"] body:has(.ai-assistant-container) .fixed.z-50.right-5 button.border:hover { + background: rgba(255, 255, 255, 0.1) !important; + border-color: rgba(255, 255, 255, 0.2) !important; +} + +/* ============================================= */ +/* FEED SWITCHER WITH MODAL-STYLE GLASS EFFECT */ +/* ============================================= */ +/* Main dropdown container with EXTREME saturation */ +[data-theme="liquid-glass"] .bg-base-200.rounded-lg.shadow-lg.min-w-\[120px\] { + /* Extreme glass blur with MAXIMUM saturation */ + backdrop-filter: blur(24px) saturate(600%) brightness(1.2) contrast(1.1) !important; + -webkit-backdrop-filter: blur(24px) saturate(600%) brightness(1.2) contrast(1.1) !important; + background: linear-gradient( + 135deg, + rgba(138, 43, 226, 0.9), + rgba(33, 150, 243, 0.85), + rgba(124, 77, 255, 0.8), + rgba(255, 255, 255, 0.75) + ) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3) !important; + will-change: backdrop-filter !important; +} + +/* Thread dropdown now properly centered */ +[data-theme="liquid-glass"] .absolute.top-full.left-1\/2.transform.-translate-x-1\/2, +[data-theme="liquid-blue"] .absolute.top-full.left-1\/2.transform.-translate-x-1\/2 { + left: 50% !important; + transform: translateX(-50%) !important; + margin-left: 0 !important; +} + +/* Individual dropdown items with enhanced readability */ +[data-theme="liquid-glass"] .bg-base-200.rounded-lg.shadow-lg button { + color: white !important; + text-shadow: + 0 3px 10px rgba(0, 0, 0, 0.9), + 0 2px 5px rgba(0, 0, 0, 0.8), + 0 1px 2px rgba(0, 0, 0, 0.7), + 0 0 25px rgba(255, 255, 255, 0.4) !important; + font-weight: 700 !important; + letter-spacing: 0.5px !important; + background: transparent !important; /* Removed dark background */ +} + +/* Hover state with enhanced saturation and readability */ +[data-theme="liquid-glass"] .bg-base-200.rounded-lg.shadow-lg button:hover { + background: linear-gradient( + 135deg, + rgba(138, 43, 226, 0.45), + rgba(33, 150, 243, 0.4), + rgba(124, 77, 255, 0.35) + ) !important; + color: white !important; + transform: translateY(-1px) !important; + text-shadow: + 0 5px 15px rgba(0, 0, 0, 1), + 0 3px 8px rgba(0, 0, 0, 0.9), + 0 1px 3px rgba(0, 0, 0, 0.8), + 0 0 40px rgba(255, 255, 255, 0.6) !important; + filter: saturate(150%) !important; +} + +/* COMPREHENSIVE FIX FOR SEARCH DROPDOWN PROFILE HOVER RECTANGLE */ +/* Override ALL backgrounds on hover in search dropdown for profile elements */ +[data-theme="liquid-glass"] .dropdown-content a[data-npub]:hover *, +[data-theme="liquid-blue"] .dropdown-content a[data-npub]:hover *, +[data-theme="liquid-glass"] .dropdown-content [data-npub]:hover, +[data-theme="liquid-blue"] .dropdown-content [data-npub]:hover, +[data-theme="liquid-glass"] .dropdown-content .flex.flex-row.items-center.gap-2:has(span.hover\:underline):hover, +[data-theme="liquid-blue"] .dropdown-content .flex.flex-row.items-center.gap-2:has(span.hover\:underline):hover { + background: none !important; + background-color: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +/* Remove hover backgrounds from specific elements harboring the rectangle */ +[data-theme="liquid-glass"] .dropdown-content span:hover, +[data-theme="liquid-blue"] .dropdown-content span:hover, +[data-theme="liquid-glass"] .dropdown-content div:hover, +[data-theme="liquid-blue"] .dropdown-content div:hover, +[data-theme="liquid-glass"] .dropdown-content a:hover, +[data-theme="liquid-blue"] .dropdown-content a:hover { + background: none !important; + background-color: transparent !important; + box-shadow: none !important; + outline: none !important; + border: none !important; +} + +/* Force transparent backgrounds on hover for ANY child of profile rows in dropdown */ +[data-theme="liquid-glass"] .dropdown-content .flex.flex-row.items-center.gap-2:hover > *, +[data-theme="liquid-glass"] .dropdown-content .flex.flex-row.items-center.gap-2:hover > * > *, +[data-theme="liquid-blue"] .dropdown-content .flex.flex-row.items-center.gap-2:hover > *, +[data-theme="liquid-blue"] .dropdown-content .flex.flex-row.items-center.gap-2:hover > * > * { + background: none !important; + background-color: transparent !important; +} + +/* Fix name hover effects in search dropdown - remove background rectangle but keep underline */ +/* This targets the Name component's hover styling without affecting the section hover */ +[data-theme="liquid-glass"] .dropdown-content span.hover\:underline:hover, +[data-theme="liquid-blue"] .dropdown-content span.hover\:underline:hover { + background: none !important; + background-color: transparent !important; + box-shadow: none !important; + outline: none !important; + border: none !important; +} + +/* Comprehensive fix for any remaining background blocks on underlined hover text */ +/* Target all possible background sources including pseudo-elements and parent containers */ +[data-theme="liquid-glass"] .dropdown-content span:hover, +[data-theme="liquid-glass"] .dropdown-content span:hover *, +[data-theme="liquid-glass"] .dropdown-content div:hover, +[data-theme="liquid-glass"] .dropdown-content div:hover *, +[data-theme="liquid-blue"] .dropdown-content span:hover, +[data-theme="liquid-blue"] .dropdown-content span:hover *, +[data-theme="liquid-blue"] .dropdown-content div:hover, +[data-theme="liquid-blue"] .dropdown-content div:hover * { + background: none !important; + background-color: transparent !important; + background-image: none !important; + box-shadow: none !important; + border: none !important; + outline: none !important; + text-decoration: underline !important; /* Force underline to remain */ +} + +/* Additional specificity for profile hover highlights */ +[data-theme="liquid-glass"] .dropdown-content .flex.flex-row.items-center.gap-2:hover, +[data-theme="liquid-glass"] .dropdown-content .flex.flex-row.items-center.gap-2:hover *, +[data-theme="liquid-blue"] .dropdown-content .flex.flex-row.items-center.gap-2:hover, +[data-theme="liquid-blue"] .dropdown-content .flex.flex-row.items-center.gap-2:hover * { + background: transparent !important; + box-shadow: none !important; + border: none !important; + outline: none !important; +} + +/* Remove any highlight effects from text selection or focus rings */ +[data-theme="liquid-glass"] .dropdown-content .flex.flex-row.items-center.gap-2 span:focus, +[data-theme="liquid-blue"] .dropdown-content .flex.flex-row.items-center.gap-2 span:focus { + outline: none !important; + background: transparent !important; + box-shadow: none !important; +} + +/* Remove unwanted background styling from hover cursor pointer effects */ +[data-theme="liquid-glass"] .dropdown-content span.hover\:cursor-pointer:hover, +[data-theme="liquid-blue"] .dropdown-content span.hover\:cursor-pointer:hover { + background: none !important; + background-color: transparent !important; + box-shadow: none !important; + outline: none !important; + border: none !important; +} + +/* Theme selector - dark dropdown for readability in liquid glass theme */ +[data-theme="liquid-glass"] .select.select-primary option { + background: rgba(20, 20, 30, 0.95) !important; /* Light black background */ + color: white !important; /* White text */ + font-weight: 600 !important; +} + +/* Selected/highlighted option */ +[data-theme="liquid-glass"] .select.select-primary option:checked, +[data-theme="liquid-glass"] .select.select-primary option:hover { + background: rgba(40, 40, 60, 0.95) !important; /* Slightly lighter when selected */ + color: white !important; +} + + +/* Ensure proper margins and spacing for notification page */ +[data-theme="liquid-glass"] .mt-\[4em\] { + margin-top: 4em !important; +} + +/* Style notification filter grid items - keep subtle but remove glass container effect */ +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-3 button { + background: rgba(255, 255, 255, 0.08) !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: 1px solid rgba(255, 255, 255, 0.12) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); +} + +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-3 button:hover { + background: rgba(255, 255, 255, 0.12) !important; + border-color: rgba(255, 255, 255, 0.2); + transform: translateY(-1px); +} + +/* Style enabled filter buttons */ +[data-theme="liquid-glass"] .grid.grid-cols-2.gap-3 button.bg-base-300 { + background: rgba(255, 255, 255, 0.15) !important; + border-color: rgba(255, 255, 255, 0.25); +} + +/* ============================================= */ +/* REPOSITORY AND BOOKMARKS PAGES GLASS EFFECT */ +/* ============================================= */ + +/* Apply glass effect to repository/bookmarks page structure */ +[data-theme="liquid-glass"] .flex:has(> div:has(> .border-t.border-l.border-b.border-\[var\(--border-color\)\].rounded-bl-lg.rounded-tl-lg)) { + position: relative; + background: transparent !important; + overflow: visible; + isolation: isolate; +} + +/* Glass background for repository/bookmarks pages */ +[data-theme="liquid-glass"] .flex:has(> div:has(> .border-t.border-l.border-b.border-\[var\(--border-color\)\].rounded-bl-lg.rounded-tl-lg))::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-radius: 0; /* Removed rounded edges */ + z-index: 0; + box-shadow: + 0 0 20px rgba(33, 150, 243, 0.15), + 0 0 40px rgba(138, 43, 226, 0.1), + inset 0 2px 3px rgba(255, 255, 255, 0.2), + inset 0 -2px 3px rgba(0, 0, 0, 0.15), + 0 12px 40px rgba(0, 0, 0, 0.2); +} + +/* Animated jelly border for repository/bookmarks pages */ +[data-theme="liquid-glass"] .flex:has(> div:has(> .border-t.border-l.border-b.border-\[var\(--border-color\)\].rounded-bl-lg.rounded-tl-lg))::after { + content: ''; + position: absolute; + top: -3px; + left: -3px; + right: -3px; + bottom: -3px; + background: linear-gradient( + 45deg, + rgba(33, 150, 243, 0.25), + rgba(124, 77, 255, 0.25), + rgba(138, 43, 226, 0.25), + rgba(33, 150, 243, 0.25) + ); + background-size: 300% 300%; + border-radius: 0; /* Removed rounded edges */ + z-index: -1; + filter: blur(6px); + opacity: 0.7; + animation: subtle-jelly-border 10s ease-in-out infinite; +} + +/* Make children relative for proper stacking */ +[data-theme="liquid-glass"] .flex:has(> div:has(> .border-t.border-l.border-b.border-\[var\(--border-color\)\].rounded-bl-lg.rounded-tl-lg)) > * { + position: relative; + z-index: 1; +} + +/* Style the content area for repositories/bookmarks */ +[data-theme="liquid-glass"] .border-t.border-l.border-b.border-\[var\(--border-color\)\].rounded-bl-lg.rounded-tl-lg { + background: transparent !important; + border-color: rgba(255, 255, 255, 0.08) !important; +} + +/* Style individual repo/bookmark cards */ +[data-theme="liquid-glass"] .border-t.border-l.border-b.border-\[var\(--border-color\)\].rounded-bl-lg.rounded-tl-lg > * { + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.05); + transition: all 0.3s ease; +} + +[data-theme="liquid-glass"] .border-t.border-l.border-b.border-\[var\(--border-color\)\].rounded-bl-lg.rounded-tl-lg > *:hover { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.08); + transform: translateY(-2px); +} + +/* ============================================= */ +/* MIDDLEHEADER GLASS EFFECT WITHOUT ROUNDED CORNERS */ +/* ============================================= */ + +/* MiddleHeader - match Header Strip styling with square corners */ +[data-theme="liquid-glass"] header.sticky { + /* Match the Header Strip frost effect */ + background: rgba(255, 255, 255, 0.08) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + border-bottom: none; /* No border for seamless transition */ + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Match Header Strip */ + /* Force square corners */ + border-radius: 0 !important; + /* Ensure proper layout */ + position: sticky; + width: 100%; + pointer-events: auto; +} + +/* Ensure the inner content is properly layered */ +[data-theme="liquid-glass"] header.sticky > div { + background: transparent; + position: relative; + z-index: 1; + border-radius: 0 !important; +} + +/* Remove any pseudo-element borders */ +[data-theme="liquid-glass"] header.sticky::before { + display: none; /* Remove pseudo-element entirely */ +} + +/* Override any child element rounded corners */ +[data-theme="liquid-glass"] header.sticky * { + border-radius: 0 !important; +} + +/* Top glass highlight for repository/bookmarks pages */ +[data-theme="liquid-glass"] .flex:has(> div:has(> .border-t.border-l.border-b.border-\[var\(--border-color\)\].rounded-bl-lg.rounded-tl-lg)) > div:first-child::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 120px; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0.04) 30%, + transparent 100% + ); + pointer-events: none; + z-index: 2; + border-radius: 0; /* Removed rounded edges */ +} + +/* Fix right column spacing */ +[data-theme="liquid-glass"] .border-l.border-\[var\(--border-color\)\].mt-\[4em\] { + margin-top: 4em !important; + background: transparent !important; + border-color: rgba(255, 255, 255, 0.08) !important; +} + +/* Custom scrollbar for organization members list */ +.custom-organization-scrollbar { + scrollbar-width: thin; + scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05); +} + +.custom-organization-scrollbar::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +.custom-organization-scrollbar::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.05); + border-radius: 4px; + margin: 2px; +} + +.custom-organization-scrollbar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.08) 100%); + border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.custom-organization-scrollbar::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%); + border-color: rgba(0, 0, 0, 0.15); +} + +.custom-organization-scrollbar::-webkit-scrollbar-corner { + background: transparent; +} + +/* Dark theme scrollbar for organization members */ +[data-theme="dark"] .custom-organization-scrollbar { + scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.08); +} + +[data-theme="dark"] .custom-organization-scrollbar::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.08); +} + +[data-theme="dark"] .custom-organization-scrollbar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%); + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); +} + +[data-theme="dark"] .custom-organization-scrollbar::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100%); + border-color: rgba(255, 255, 255, 0.2); +} + +/* Blue theme scrollbar for organization members (formerly Light) */ +[data-theme="light"] .custom-organization-scrollbar { + scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.08); +} + +[data-theme="light"] .custom-organization-scrollbar::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.08); +} + +[data-theme="light"] .custom-organization-scrollbar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%); + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); +} + +[data-theme="light"] .custom-organization-scrollbar::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100%); + border-color: rgba(255, 255, 255, 0.2); +} + +/* Dark Blue theme scrollbar for organization members (formerly Dim) */ +[data-theme="dim"] .custom-organization-scrollbar { + scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.06); +} + +[data-theme="dim"] .custom-organization-scrollbar::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.06); +} + +[data-theme="dim"] .custom-organization-scrollbar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); +} + +[data-theme="dim"] .custom-organization-scrollbar::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%); + border-color: rgba(255, 255, 255, 0.15); +} + +/* Liquid Glass theme scrollbar for organization members */ +[data-theme="liquid-glass"] .custom-organization-scrollbar { + scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.08); +} + +[data-theme="liquid-glass"] .custom-organization-scrollbar::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.08); +} + +[data-theme="liquid-glass"] .custom-organization-scrollbar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15); +} + +[data-theme="liquid-glass"] .custom-organization-scrollbar::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%); + border-color: rgba(255, 255, 255, 0.2); +} + +/* Liquid Blue theme scrollbar for organization members */ +[data-theme="liquid-blue"] .custom-organization-scrollbar { + scrollbar-color: rgba(0, 255, 255, 0.25) rgba(0, 255, 255, 0.1); +} + +[data-theme="liquid-blue"] .custom-organization-scrollbar::-webkit-scrollbar-track { + background: rgba(0, 255, 255, 0.1); +} + +[data-theme="liquid-blue"] .custom-organization-scrollbar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, rgba(0, 255, 255, 0.25) 0%, rgba(0, 255, 255, 0.15) 100%); + border: 1px solid rgba(0, 255, 255, 0.18); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); +} + +[data-theme="liquid-blue"] .custom-organization-scrollbar::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, rgba(0, 255, 255, 0.35) 0%, rgba(0, 255, 255, 0.25) 100%); + border-color: rgba(0, 255, 255, 0.25); +} + +/* Liquid Glass Theme - Purple selector with lighter background */ +[data-theme="liquid-glass"] .theme-selector { + background: rgba(30, 30, 45, 0.85) !important; + color: white !important; + border: 1px solid rgba(168, 85, 247, 0.4) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} + +[data-theme="liquid-glass"] .theme-selector:focus { + background: rgba(35, 35, 50, 0.85) !important; + border-color: rgba(168, 85, 247, 0.6) !important; + box-shadow: 0 0 15px rgba(168, 85, 247, 0.4) !important; +} + +[data-theme="liquid-glass"] .theme-selector option { + background: rgba(30, 30, 45, 0.85) !important; + color: white !important; + border: none !important; +} + +[data-theme="liquid-glass"] .theme-selector option:hover, +[data-theme="liquid-glass"] .theme-selector option:focus { + background: rgba(45, 45, 65, 0.85) !important; + color: white !important; +} + +/* Liquid Blue Theme - Cyan selector with lighter background */ +[data-theme="liquid-blue"] .theme-selector { + background: rgba(30, 30, 45, 0.85) !important; + color: white !important; + border: 1px solid rgba(0, 255, 255, 0.4) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; +} + +[data-theme="liquid-blue"] .theme-selector:focus { + background: rgba(35, 35, 50, 0.85) !important; + border-color: rgba(0, 255, 255, 0.6) !important; + box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important; +} + +/* Theme-dependent focus styles for theme selector */ +[data-theme="liquid-glass"] .theme-selector:focus { + border-color: rgba(168, 85, 247, 0.6) !important; + box-shadow: 0 0 15px rgba(168, 85, 247, 0.4) !important; +} + +[data-theme="dark"] .theme-selector:focus { + border-color: rgba(255, 255, 255, 0.6) !important; + box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important; +} + +[data-theme="dim"] .theme-selector:focus { + border-color: rgba(255, 255, 255, 0.5) !important; + box-shadow: 0 0 12px rgba(255, 255, 255, 0.25) !important; +} + +[data-theme="light"] .theme-selector:focus { + border-color: rgba(0, 0, 0, 0.6) !important; + box-shadow: 0 0 12px rgba(0, 0, 0, 0.2) !important; +} + +[data-theme="liquid-blue"] .theme-selector option { + background: rgba(30, 30, 45, 0.85) !important; + color: white !important; + border: none !important; +} + +[data-theme="liquid-blue"] .theme-selector option:hover, +[data-theme="liquid-blue"] .theme-selector option:focus { + background: rgba(45, 45, 65, 0.85) !important; + color: white !important; +} + +/* Liquid Blue Theme - UserToolbar button hover glow effects */ +[data-theme="liquid-blue"] .border.border-1.rounded-md.border-\[--border-color\].p-2.flex.items-center.justify-center.cursor-pointer.hover\:bg-base-300.border-2:hover { + background: rgba(0, 255, 255, 0.08) !important; + border-color: rgba(0, 255, 255, 0.2) !important; + box-shadow: + inset 0 1px 3px rgba(0, 255, 255, 0.1), + 0 0 2px rgba(0, 255, 255, 0.15) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; + border-radius: 8px !important; +} + +[data-theme="liquid-blue"] .border.border-1.rounded-md.border-\[--border-color\].p-2.flex.items-center.justify-center.cursor-pointer.hover\:bg-base-300.border-2:hover svg, +[data-theme="liquid-blue"] .border.border-1.rounded-md.border-\[--border-color\].p-2.flex.items-center.justify-center.cursor-pointer.hover\:bg-base-300.border-2:hover .text-gray-300 { + color: rgba(0, 255, 255, 0.9) !important; + filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5)) !important; +} + +[data-theme="liquid-blue"] .border.border-1.rounded-md.border-\[--border-color\].p-2.flex.items-center.justify-center.cursor-pointer.hover\:bg-base-300.border-2:hover .indicator-item { + background: rgba(0, 255, 255, 0.8) !important; + box-shadow: 0 0 10px rgba(0, 255, 255, 0.6) !important; +} + +/* Liquid Blue Theme - Bell icon specific styling */ +[data-theme="liquid-blue"] .text-gray-300.opacity-75:hover { + color: rgba(0, 255, 255, 0.9) !important; + filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5)) !important; +} + +/* Feed item animation for consistency - used by both feed items and notification items */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Liquid Blue Theme - Wallet icon specific styling */ +[data-theme="liquid-blue"] button:hover .text-gray-300.opacity-75 { + color: rgba(0, 255, 255, 0.9) !important; + filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.4)) !important; +} + +/* Liquid Blue Theme - Wallet button specific hover effects */ +[data-theme="liquid-blue"] button[class*="wallet"]:hover { + background: rgba(0, 255, 255, 0.08) !important; + border-color: rgba(0, 255, 255, 0.25) !important; + box-shadow: + inset 0 1px 2px rgba(0, 255, 255, 0.12), + 0 0 4px rgba(0, 255, 255, 0.2) !important; +} + +/* Liquid Blue Theme - Remove unwanted hover effects from bio section */ +[data-theme="liquid-blue"] .flex.flex-col.gap-2.no-highlight article:hover, +[data-theme="liquid-blue"] .profile-bio-article:hover { + background: transparent !important; + border: none !important; + transform: none !important; + box-shadow: none !important; + border-radius: 0 !important; +} + +[data-theme="liquid-blue"] .flex.flex-col.gap-2.no-highlight article, +[data-theme="liquid-blue"] .profile-bio-article { + border: none !important; + transition: none !important; + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +/* Fix Liquid Blue theme tab underline color */ +[data-theme="liquid-blue"] .tab[class*="border-b-2"][class*="border-[var(--border-primary)]"] { + border-color: rgba(0, 255, 255, 0.6) !important; +} + +/* Fix tab transitions to use same color as final state - no flicker */ +[data-theme="liquid-glass"] .tab { + transition: border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +[data-theme="liquid-glass"] .tab[class*="border-b-2"] { + border-color: rgba(168, 85, 247, 0.6) !important; +} + +[data-theme="liquid-glass"] .tab:not([class*="border-b-2"]) { + border-color: transparent !important; +} + +[data-theme="liquid-blue"] .tab { + transition: border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +[data-theme="liquid-blue"] .tab[class*="border-b-2"] { + border-color: rgba(0, 255, 255, 0.6) !important; +} + +[data-theme="liquid-blue"] .tab:not([class*="border-b-2"]) { + border-color: transparent !important; +} + +/* Improve badge styling in liquid blue theme */ +[data-theme="liquid-blue"] .badge { + background: rgba(0, 255, 255, 0.15) !important; + border: 1px solid rgba(0, 255, 255, 0.3) !important; + color: rgba(255, 255, 255, 0.95) !important; + box-shadow: 0 0 8px rgba(0, 255, 255, 0.2) !important; +} + +/* Improve following/repos/relays button backgrounds in liquid blue theme */ +[data-theme="liquid-blue"] .btn-neutral { + background: rgba(0, 255, 255, 0.08) !important; + border: 1px solid rgba(0, 255, 255, 0.2) !important; + color: rgba(255, 255, 255, 0.9) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; + transform: none !important; +} + +[data-theme="liquid-blue"] .btn-neutral:hover { + background: rgba(0, 255, 255, 0.12) !important; + border-color: rgba(0, 255, 255, 0.35) !important; + color: white !important; + box-shadow: 0 0 8px rgba(0, 255, 255, 0.25) !important; + transform: none !important; +} + +/* Replace lifting animation with glow in Liquid Glass theme */ +[data-theme="liquid-glass"] .btn-neutral { + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; + transform: none !important; +} + +[data-theme="liquid-glass"] .btn-neutral:hover { + transform: none !important; + box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2), 0 0 8px rgba(255, 255, 255, 0.15) !important; +} + +/* Use mention color for links in all themes - consistent with @ names */ +.text-primary { + color: rgb(59 130 246) !important; /* Classic hyperlink blue */ +} + +.text-primary:hover { + color: rgb(37 99 235) !important; /* Darker blue on hover */ +} + +/* Note: Animation disabling is now handled directly in the animation definitions above */ + +/* ============================================= */ +/* RECENT REPOSITORIES THEME-SPECIFIC HOVER EFFECTS */ +/* ============================================= */ + +/* Liquid Glass Theme - Recent Repositories Hover */ +[data-theme="liquid-glass"] .recent-repo-item:hover { + background: rgba(255, 255, 255, 0.08) !important; + border-color: rgba(255, 255, 255, 0.2) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + box-shadow: + 0 0 15px rgba(138, 43, 226, 0.2), + 0 0 30px rgba(33, 150, 243, 0.1), + inset 0 1px 3px rgba(255, 255, 255, 0.1), + inset 0 -1px 3px rgba(0, 0, 0, 0.05) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; +} + +/* Liquid Blue Theme - Recent Repositories Hover */ +[data-theme="liquid-blue"] .recent-repo-item:hover { + background: rgba(0, 255, 255, 0.08) !important; + border-color: rgba(0, 255, 255, 0.2) !important; + border: 1px solid rgba(0, 255, 255, 0.15) !important; + box-shadow: + 0 0 15px rgba(0, 255, 255, 0.2), + 0 0 30px rgba(0, 255, 170, 0.15), + inset 0 1px 3px rgba(0, 255, 255, 0.1), + inset 0 -1px 3px rgba(0, 0, 0, 0.05) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; +} + +/* Theme-specific remove button hover states */ +[data-theme="liquid-glass"] .recent-repo-item .remove-button:hover { + background: rgba(255, 255, 255, 0.1) !important; + box-shadow: 0 0 8px rgba(244, 63, 94, 0.3) !important; + color: rgba(244, 63, 94, 0.9) !important; +} + +[data-theme="liquid-blue"] .recent-repo-item .remove-button:hover { + background: rgba(0, 255, 255, 0.1) !important; + box-shadow: 0 0 8px rgba(244, 63, 94, 0.5) !important; + color: rgba(244, 63, 94, 0.9) !important; +} + +/* Theme-specific repository name hover colors */ +[data-theme="liquid-glass"] .recent-repo-item .repo-name-link:hover { + color: rgba(168, 85, 247, 0.9) !important; /* Purple-500 for liquid glass */ +} + +[data-theme="liquid-blue"] .recent-repo-item .repo-name-link:hover { + color: rgba(0, 255, 255, 0.9) !important; /* Cyan-300 for liquid blue */ +} + +/* Theme-specific repository owner name hover colors */ +[data-theme="liquid-glass"] .recent-repo-item .repo-owner-name:hover { + color: rgba(168, 85, 247, 0.9) !important; /* Purple-500 for liquid glass */ +} + +[data-theme="liquid-blue"] .recent-repo-item .repo-owner-name:hover { + color: rgba(0, 255, 255, 0.9) !important; /* Cyan-300 for liquid blue */ +} + +/* File Explorer Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.file-explorer-item { + animation: fadeInUp 0.3s ease-out forwards; +} + +/* Theme-specific File Explorer hover states */ +[data-theme="liquid-glass"] .file-explorer-item:hover { + background: linear-gradient( + to right, + rgba(255, 255, 255, 0.08), + rgba(255, 255, 255, 0.04) + ) !important; + box-shadow: + 0 4px 12px rgba(168, 85, 247, 0.15), + 0 2px 4px rgba(168, 85, 247, 0.1) !important; + backdrop-filter: blur(10px); +} + +[data-theme="liquid-blue"] .file-explorer-item:hover { + background: linear-gradient( + to right, + rgba(0, 255, 255, 0.08), + rgba(0, 255, 255, 0.04) + ) !important; + box-shadow: + 0 4px 12px rgba(0, 255, 255, 0.15), + 0 2px 4px rgba(0, 255, 255, 0.1) !important; + backdrop-filter: blur(10px); +} + +/* Default theme File Explorer hover */ +.file-explorer-item:hover { + background: linear-gradient( + to right, + rgba(var(--base-200), 0.8), + rgba(var(--base-200), 0.4) + ); +} + +/* File name hover colors for themes */ +[data-theme="liquid-glass"] .file-explorer-item:hover .group-hover\:text-primary { + color: rgba(168, 85, 247, 0.9) !important; +} + +[data-theme="liquid-blue"] .file-explorer-item:hover .group-hover\:text-primary { + color: rgba(0, 255, 255, 0.9) !important; +} + +[data-theme="liquid-glass"] .file-explorer-item:hover .group-hover\:text-accent { + color: rgba(236, 72, 153, 0.9) !important; +} + +[data-theme="liquid-blue"] .file-explorer-item:hover .group-hover\:text-accent { + color: rgba(34, 211, 238, 0.9) !important; +} + +/* ============================================= */ +/* LIQUID BLUE THEME - FIX SETTINGS PAGE HOVER COLORS */ +/* ============================================= */ + +/* Fix settings page navigation button hover colors in liquid blue theme */ +[data-theme="liquid-blue"] .px-2\.5.py-1\.5.flex.justify-between.items-center.border.border-custom:hover { + background: rgba(0, 255, 255, 0.08) !important; + border-color: rgba(0, 255, 255, 0.2) !important; +} + +/* Fix notification filter button hover colors in liquid blue theme */ +[data-theme="liquid-blue"] .grid.grid-cols-2.gap-3 button:hover { + background: rgba(0, 255, 255, 0.08) !important; + border-color: rgba(0, 255, 255, 0.2) !important; +} + +/* Fix notification items hover colors in liquid blue theme */ +[data-theme="liquid-blue"] .flex.flex-col.p-4.md\:px-8.border-b.border-\[var\(--border-color\)\].transition-colors.duration-300.cursor-pointer:hover { + background: rgba(0, 255, 255, 0.08) !important; + border-color: rgba(0, 255, 255, 0.2) !important; +} + +/* Fix recent search items hover colors in liquid blue theme */ +[data-theme="liquid-blue"] .grid.grid-cols-\[1fr\,auto\].items-center.w-full.p-2.hover\:bg-base-200.rounded-lg.gap-2:hover { + background: rgba(0, 255, 255, 0.08) !important; + border-color: rgba(0, 255, 255, 0.2) !important; +} + +/* Fix recent repository items hover colors in liquid blue theme */ +[data-theme="liquid-blue"] .flex.justify-between.items-center.w-full.p-2.hover\:bg-base-200.rounded-lg:hover { + background: rgba(0, 255, 255, 0.08) !important; + border-color: rgba(0, 255, 255, 0.2) !important; +} + +/* ============================================= */ +/* LIQUID BLUE THEME - REDUCE BRIGHTNESS OF PRIMARY BUTTONS */ +/* ============================================= */ + +/* Reduce brightness of Create Repository button */ +[data-theme="liquid-blue"] .btn.btn-primary:has(.text-base-content) { + filter: brightness(0.7) !important; +} + +[data-theme="liquid-blue"] .btn.btn-primary:has(.text-base-content):hover { + filter: brightness(0.8) !important; +} + +/* Reduce brightness of Create Organization button */ +[data-theme="liquid-blue"] .btn.btn-primary.min-h-\[2\.3rem\].h-\[1\.5rem\] { + filter: brightness(0.7) !important; +} + +[data-theme="liquid-blue"] .btn.btn-primary.min-h-\[2\.3rem\].h-\[1\.5rem\]:hover { + filter: brightness(0.8) !important; +} + +/* Reduce brightness of Post button */ +[data-theme="liquid-blue"] .flex.items-center.justify-center.xl\:justify-start.py-2.w-full.gap-4.cursor-pointer.rounded-md.group:has(.bg-gradient-to-t) { + filter: brightness(0.7) !important; +} + +[data-theme="liquid-blue"] .flex.items-center.justify-center.xl\:justify-start.py-2.w-full.gap-4.cursor-pointer.rounded-md.group:has(.bg-gradient-to-t):hover { + filter: brightness(0.8) !important; +} + +/* ============================================= */ +/* EMOJI PICKER STYLING AND ANIMATIONS */ +/* ============================================= */ + +/* Enhanced emoji picker animations */ +.emoji-picker-container { + filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15)); + border-radius: 12px; + overflow: hidden; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +/* Animation keyframes for smooth emoji picker entrance */ +@keyframes emojiPickerFadeIn { + 0% { + opacity: 0; + transform: scale(0.9) translateY(-10px); + } + 100% { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +/* Apply animation when opening */ +.emoji-picker-container[style*="opacity: 1"] { + animation: emojiPickerFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; +} + +/* Theme-specific emoji picker styling */ +[data-theme="liquid-blue"] .emoji-picker-container { + background: rgba(0, 255, 255, 0.05); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(0, 255, 255, 0.2); +} + +[data-theme="liquid-glass"] .emoji-picker-container { + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +[data-theme="dark"] .emoji-picker-container { + background: rgba(0, 0, 0, 0.8); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +[data-theme="light"] .emoji-picker-container { + background: rgba(255, 255, 255, 0.95); + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); +} + +/* Emoji hover animations */ +.emoji-picker-container button { + transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +.emoji-picker-container button:hover { + transform: scale(1.15) !important; +} + +/* Category tabs hover effects */ +.emoji-picker-container .epr-emoji-category-label { + transition: opacity 0.2s ease !important; +} + +.emoji-picker-container .epr-emoji-category-label:hover { + opacity: 0.8 !important; +} + +/* Search input styling */ +.emoji-picker-container .epr-search-container input { + transition: all 0.2s ease !important; +} + +.emoji-picker-container .epr-search-container input:focus { + transform: scale(1.02) !important; + box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important; +} + +/* ============================================= */ +/* SEARCHBOX THEME OVERRIDES */ +/* ============================================= */ + +/* Universal selected search mode button styling for all themes */ +.dropdown-content.menu button.bg-primary { + background: linear-gradient(135deg, rgba(20, 184, 166, 0.8) 0%, rgba(34, 197, 94, 0.7) 100%) !important; /* Turquoise to green-blue gradient */ + color: white !important; + border: 1px solid rgba(20, 184, 166, 0.6) !important; /* Turquoise border */ + box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.4) !important; /* Subtle turquoise glow */ + font-weight: 600 !important; /* Slightly bolder text */ +} + +.dropdown-content.menu button.bg-primary:hover { + background: linear-gradient(135deg, rgba(20, 184, 166, 0.9) 0%, rgba(34, 197, 94, 0.8) 100%) !important; /* Enhanced gradient on hover */ + box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.5) !important; /* Enhanced turquoise glow on hover */ + color: white !important; /* Keep text white on hover */ +} + +/* Make unselected search mode buttons inherit theme-appropriate colors */ +.dropdown-content.menu button:not(.bg-primary) { + color: inherit !important; + font-weight: 500 !important; +} + +/* ============================================= */ +/* THREAD DROPDOWN BUTTONS - MAXIMUM SPECIFICITY OVERRIDE */ +/* ============================================= */ + +/* -------------------------------- */ +/* SOLID FILLED THEME BUTTONS - No Glass/Translucency */ +/* -------------------------------- */ + +/* Liquid Glass: Muted unselected buttons - feel "unselected" not bright */ +[data-theme="liquid-glass"] .dropdown-content.menu .thread-dropdown-btn:not(.bg-primary), +[data-theme="liquid-glass"] .menu li > .thread-dropdown-btn:not(.bg-primary) { + background: #374151 !important; /* MUTED dark gray - feels unselected */ + color: white !important; /* White text */ + border: 1px solid #6B7280 !important; /* Muted border */ + backdrop-filter: none !important; /* Solid, no glass */ + -webkit-backdrop-filter: none !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important; +} + +[data-theme="liquid-glass"] .dropdown-content.menu .thread-dropdown-btn:not(.bg-primary):hover, +[data-theme="liquid-glass"] .menu li > .thread-dropdown-btn:not(.bg-primary):hover { + background: #4B5563 !important; /* Slightly brighter gray on hover */ + border-color: #9CA3AF !important; + transform: translateY(-1px) !important; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; +} + +/* Liquid Blue: Muted unselected buttons - feel "unselected" with subtle hint */ +[data-theme="liquid-blue"] .dropdown-content.menu .thread-dropdown-btn:not(.bg-primary), +[data-theme="liquid-blue"] .menu li > .thread-dropdown-btn:not(.bg-primary) { + background: #475569 !important; /* MUTED slate - feels unselected */ + color: white !important; /* White text */ + border: 1px solid #64748B !important; /* Muted slate border */ + backdrop-filter: none !important; /* Solid, no glass */ + -webkit-backdrop-filter: none !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important; +} + +[data-theme="liquid-blue"] .dropdown-content.menu .thread-dropdown-btn:not(.bg-primary):hover, +[data-theme="liquid-blue"] .menu li > .thread-dropdown-btn:not(.bg-primary):hover { + background: #5B6470 !important; /* Slightly brighter slate on hover */ + border-color: #94A3B8 !important; + transform: translateY(-1px) !important; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; +} + +/* Override selected buttons using theme primary/secondary gradients - same as .btn-primary */ +[data-theme="liquid-glass"] .dropdown-content.menu .thread-dropdown-btn.bg-primary, +[data-theme="liquid-glass"] .menu li > .thread-dropdown-btn.bg-primary { + background: linear-gradient(135deg, var(--secondary), var(--primary)) !important; /* Purple gradient: secondary first (AF52DE → 007AFF) */ + color: white !important; /* White text */ + border: none !important; /* No border like liquid blue .btn-primary */ + box-shadow: 0 6px 20px rgba(127, 61, 255, 0.3) !important; /* Purple shadow */ +} + +[data-theme="liquid-glass"] .dropdown-content.menu .thread-dropdown-btn.bg-primary:hover, +[data-theme="liquid-glass"] .menu li > .thread-dropdown-btn.bg-primary:hover { + background: linear-gradient(135deg, var(--secondary), var(--primary)) !important; /* Same purple gradient */ + opacity: 0.9 !important; /* Same as liquid blue hover */ + box-shadow: 0 8px 24px rgba(127, 61, 255, 0.4) !important; /* Enhanced purple shadow */ + transform: translateY(-1px) !important; /* Subtle lift */ +} + +[data-theme="liquid-blue"] .dropdown-content.menu .thread-dropdown-btn.bg-primary, +[data-theme="liquid-blue"] .menu li > .thread-dropdown-btn.bg-primary { + background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; /* Cyan gradient: primary first (00FFFF → 00FFAA) */ + color: white !important; /* White text */ + border: none !important; /* No border like liquid blue .btn-primary */ + box-shadow: 0 8px 24px rgba(0, 255, 255, 0.3) !important; /* Cyan shadow exactly like .btn-primary */ +} + +[data-theme="liquid-blue"] .dropdown-content.menu .thread-dropdown-btn.bg-primary:hover, +[data-theme="liquid-blue"] .menu li > .thread-dropdown-btn.bg-primary:hover { + background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; /* Same cyan gradient */ + opacity: 0.9 !important; /* Same as liquid blue hover */ + box-shadow: 0 12px 32px rgba(0, 255, 255, 0.4) !important; /* Enhanced cyan shadow like .btn-primary:hover */ + transform: translateY(-2px) !important; /* Same lift as .btn-primary:hover */ +} + +/* ============================================= */ +/* THREAD DROPDOWN BUTTON POSITIONING - MOVE LEFT */ +/* ============================================= */ + +/* Reduce thread dropdown width for better proportion - moderate size */ +[data-theme="liquid-glass"] .dropdown-content.menu.shadow-2xl.bg-black\/80.rounded-box.p-3.w-full.border, +[data-theme="liquid-blue"] .dropdown-content.menu.shadow-2xl.bg-black\/80.rounded-box.p-3.w-full.border { + width: 341px !important; /* 341px width */ + max-width: 95vw !important; /* Prevent overflow on small screens */ +} + +/* Reduce space to the right of people and strangers icons */ +[data-theme="liquid-glass"] .people-btn, +[data-theme="liquid-glass"] .strangers-btn, +[data-theme="liquid-blue"] .people-btn, +[data-theme="liquid-blue"] .strangers-btn { + gap: 0.125rem !important; /* Much tighter gap between icon and text */ +} + +/* Move thread dropdown buttons slightly left for better alignment */ +[data-theme="liquid-glass"] .dropdown-content.menu .thread-dropdown-btn, +[data-theme="liquid-glass"] .menu li > .thread-dropdown-btn { + padding-left: 0.5rem !important; /* Reduce left padding */ + margin-left: -0.3rem !important; /* Add negative left margin */ +} + +[data-theme="liquid-blue"] .dropdown-content.menu .thread-dropdown-btn, +[data-theme="liquid-blue"] .menu li > .thread-dropdown-btn { + padding-left: 0.5rem !important; /* Reduce left padding */ + margin-left: -0.3rem !important; /* Add negative left margin */ +} + +/* Ensure container accommodates the adjusted positioning */ +[data-theme="liquid-glass"] .dropdown-content.menu li:has(.thread-dropdown-btn), +[data-theme="liquid-blue"] .dropdown-content.menu li:has(.thread-dropdown-btn) { + padding-left: 0.3rem !important; /* Reduce container left padding */ +} + +/* Ensure emoji and image buttons use teal hover color in liquid-blue theme */ +[data-theme="liquid-blue"] .HomeFeedTextarea-container button:hover svg, +[data-theme="liquid-blue"] .HomeFeedTextarea-container svg:hover, +[data-theme="liquid-blue"] button:hover svg[class*="text-secondary"], +[data-theme="liquid-blue"] svg[class*="text-secondary"]:hover { + color: rgb(20, 184, 166) !important; /* teal-400 */ +} + +/* ============================================= */ +/* THINKING INDICATOR ANIMATIONS */ +/* ============================================= */ + +/* Sleek professional pulse animation for both themes */ +@keyframes sleekPulse { + 0%, 60%, 100% { + opacity: 0.4; + transform: scale(0.9); + } + 30% { + opacity: 0.8; + transform: scale(1.1); + } +} \ No newline at end of file diff --git a/liquid-glass.css b/liquid-glass.css new file mode 100644 index 00000000..fe8b9c73 --- /dev/null +++ b/liquid-glass.css @@ -0,0 +1,450 @@ +/* Liquid Blue Glass Theme - Futuristic AI Interface */ +/* Inspired by Tony Stark's Jarvis and modern sci-fi interfaces */ + +:root { + /* Primary Liquid Blue Colors */ + --liquid-cyan: #00FFFF; + --liquid-turquoise: #00FFAA; + --liquid-teal: #14B8A6; + --liquid-bright-teal: #00DDFF; + --liquid-light-turquoise: #5EEAD4; + + /* Glass Effects */ + --glass-bg: rgba(0, 255, 255, 0.03); + --glass-border: rgba(0, 255, 255, 0.15); + --glass-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.1); + --glass-blur: blur(10px); + + /* Glow Effects */ + --glow-sm: 0 0 10px rgba(0, 255, 255, 0.3); + --glow-md: 0 0 20px rgba(0, 255, 255, 0.4); + --glow-lg: 0 0 30px rgba(0, 255, 255, 0.5); + --text-glow: 0 0 10px rgba(0, 255, 255, 0.6); +} + +/* Animated Background Gradients */ +@keyframes liquidFlow { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.8; + } +} + +@keyframes borderGlow { + 0%, 100% { + border-color: rgba(0, 255, 255, 0.2); + box-shadow: 0 0 5px rgba(0, 255, 255, 0.2); + } + 50% { + border-color: rgba(0, 255, 255, 0.4); + box-shadow: 0 0 15px rgba(0, 255, 255, 0.4); + } +} + +/* Glass Morphism Base */ +.glass-panel { + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + border: 1px solid var(--glass-border); + box-shadow: var(--glass-shadow); + border-radius: 8px; + transition: all 0.3s ease; +} + +.glass-panel:hover { + box-shadow: var(--glow-md); + border-color: rgba(0, 255, 255, 0.3); + transform: translateY(-2px); +} + +/* Liquid Blue Buttons */ +.liquid-button { + background: linear-gradient(135deg, var(--liquid-cyan) 0%, var(--liquid-turquoise) 100%); + color: #000000; + border: none; + padding: 10px 20px; + border-radius: 4px; + font-weight: 600; + position: relative; + overflow: hidden; + transition: all 0.3s ease; + cursor: pointer; +} + +.liquid-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s ease; +} + +.liquid-button:hover::before { + left: 100%; +} + +.liquid-button:hover { + box-shadow: var(--glow-lg); + transform: scale(1.05); +} + +/* Neon Text Effects */ +.neon-text { + color: var(--liquid-cyan); + text-shadow: var(--text-glow); + animation: pulse 2s ease-in-out infinite; +} + +/* Animated Borders */ +.animated-border { + position: relative; + border: 1px solid transparent; + background: linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box, + linear-gradient(135deg, var(--liquid-cyan), var(--liquid-turquoise)) border-box; + border-radius: 8px; + animation: borderGlow 2s ease-in-out infinite; +} + +/* Holographic Cards */ +.holographic-card { + background: linear-gradient(135deg, + rgba(0, 255, 255, 0.05) 0%, + rgba(0, 255, 170, 0.05) 25%, + rgba(20, 184, 166, 0.05) 50%, + rgba(0, 221, 255, 0.05) 75%, + rgba(0, 255, 255, 0.05) 100%); + background-size: 400% 400%; + animation: liquidFlow 15s ease infinite; + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border: 1px solid var(--glass-border); + border-radius: 12px; + box-shadow: var(--glass-shadow); + overflow: hidden; + position: relative; +} + +.holographic-card::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%); + animation: rotate 10s linear infinite; + pointer-events: none; +} + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +/* Liquid Input Fields */ +.liquid-input { + background: rgba(0, 255, 255, 0.05); + border: 1px solid rgba(0, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.9); + padding: 8px 12px; + border-radius: 4px; + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + transition: all 0.3s ease; + outline: none; +} + +.liquid-input:focus { + border-color: var(--liquid-cyan); + box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1), var(--glow-sm); + background: rgba(0, 255, 255, 0.08); +} + +.liquid-input::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +/* Liquid Dropdown */ +.liquid-dropdown { + background: rgba(0, 255, 255, 0.08); + border: 1px solid rgba(0, 255, 255, 0.2); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-radius: 8px; + box-shadow: var(--glass-shadow); + overflow: hidden; +} + +.liquid-dropdown-item { + padding: 10px 15px; + color: rgba(255, 255, 255, 0.9); + transition: all 0.2s ease; + border-left: 3px solid transparent; +} + +.liquid-dropdown-item:hover { + background: rgba(0, 255, 255, 0.1); + border-left-color: var(--liquid-cyan); + padding-left: 20px; + color: var(--liquid-cyan); +} + +/* Data Grid Enhancement */ +.liquid-table { + background: var(--glass-bg); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid var(--glass-border); + border-radius: 8px; + overflow: hidden; +} + +.liquid-table th { + background: rgba(0, 255, 255, 0.08); + color: var(--liquid-cyan); + font-weight: 600; + text-transform: uppercase; + font-size: 0.85em; + letter-spacing: 1px; + padding: 12px; + border-bottom: 1px solid rgba(0, 255, 255, 0.2); +} + +.liquid-table td { + padding: 10px 12px; + color: rgba(255, 255, 255, 0.9); + border-bottom: 1px solid rgba(0, 255, 255, 0.05); +} + +.liquid-table tr:hover { + background: rgba(0, 255, 255, 0.05); +} + +/* Loading Animation */ +@keyframes liquidLoad { + 0% { + transform: rotate(0deg); + box-shadow: 0 0 10px var(--liquid-cyan); + } + 50% { + box-shadow: 0 0 20px var(--liquid-cyan), 0 0 40px var(--liquid-turquoise); + } + 100% { + transform: rotate(360deg); + box-shadow: 0 0 10px var(--liquid-cyan); + } +} + +.liquid-loader { + width: 40px; + height: 40px; + border: 3px solid rgba(0, 255, 255, 0.1); + border-top: 3px solid var(--liquid-cyan); + border-radius: 50%; + animation: liquidLoad 1s linear infinite; +} + +/* Notification Styles */ +.liquid-notification { + background: rgba(0, 255, 255, 0.08); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid var(--liquid-cyan); + border-radius: 8px; + padding: 15px 20px; + color: rgba(255, 255, 255, 0.9); + box-shadow: var(--glow-md); + position: relative; + overflow: hidden; +} + +.liquid-notification::before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 3px; + background: var(--liquid-cyan); + box-shadow: 0 0 10px var(--liquid-cyan); +} + +/* Sidebar Enhancement */ +.liquid-sidebar { + background: rgba(0, 255, 255, 0.06); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-right: 1px solid rgba(0, 255, 255, 0.15); + position: relative; +} + +.liquid-sidebar::before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 1px; + height: 100%; + background: linear-gradient(to bottom, + transparent, + var(--liquid-cyan) 50%, + transparent); + animation: pulse 3s ease-in-out infinite; +} + +/* Modal Enhancement */ +.liquid-modal { + background: rgba(0, 0, 0, 0.9); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid var(--glass-border); + border-radius: 12px; + box-shadow: 0 0 50px rgba(0, 255, 255, 0.3); + position: relative; + overflow: hidden; +} + +.liquid-modal::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle at center, + rgba(0, 255, 255, 0.05) 0%, + transparent 70%); + animation: rotate 20s linear infinite; + pointer-events: none; +} + +/* Progress Bar */ +.liquid-progress { + background: rgba(0, 255, 255, 0.1); + border-radius: 10px; + overflow: hidden; + height: 10px; + position: relative; +} + +.liquid-progress-bar { + height: 100%; + background: linear-gradient(90deg, var(--liquid-cyan), var(--liquid-turquoise)); + border-radius: 10px; + position: relative; + overflow: hidden; + animation: pulse 2s ease-in-out infinite; +} + +.liquid-progress-bar::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, + transparent, + rgba(255, 255, 255, 0.3), + transparent); + animation: shimmer 2s infinite; +} + +@keyframes shimmer { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} + +/* Badge Enhancement */ +.liquid-badge { + background: linear-gradient(135deg, var(--liquid-cyan), var(--liquid-turquoise)); + color: #000000; + padding: 2px 8px; + border-radius: 12px; + font-size: 0.75em; + font-weight: 600; + display: inline-flex; + align-items: center; + box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); + animation: pulse 2s ease-in-out infinite; +} + +/* Tooltip Enhancement */ +.liquid-tooltip { + background: rgba(0, 0, 0, 0.95); + border: 1px solid var(--liquid-cyan); + color: rgba(255, 255, 255, 0.95); + padding: 8px 12px; + border-radius: 4px; + box-shadow: var(--glow-md); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + font-size: 0.9em; +} + +.liquid-tooltip::before { + content: ''; + position: absolute; + border-style: solid; + border-width: 5px; + border-color: transparent transparent var(--liquid-cyan) transparent; +} + +/* Scrollbar Styling */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: rgba(0, 255, 255, 0.05); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, var(--liquid-cyan), var(--liquid-turquoise)); + border-radius: 4px; + box-shadow: 0 0 5px rgba(0, 255, 255, 0.3); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--liquid-cyan); + box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); +} + +/* Selection Highlight */ +::selection { + background: rgba(0, 255, 255, 0.3); + color: #ffffff; +} + +::-moz-selection { + background: rgba(0, 255, 255, 0.3); + color: #ffffff; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 7721364e..6f8bd9ed 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,7 @@ H.O.R.N.E.T Storage @@ -48,4 +73,4 @@ - + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 684d63eb..08aa7bc5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,13 +11,10 @@ import { useLanguage } from './hooks/useLanguage'; import { useAutoNightMode } from './hooks/useAutoNightMode'; import { usePWA } from './hooks/usePWA'; import { useThemeWatcher } from './hooks/useThemeWatcher'; -import { useAppSelector } from './hooks/reduxHooks'; -import { themeObject } from './styles/themes/themeVariables'; // NDK removed - login uses window.nostr directly, profile API uses panel API const App: React.FC = () => { const { language } = useLanguage(); - const theme = useAppSelector((state) => state.theme.theme); usePWA(); @@ -27,7 +24,7 @@ const App: React.FC = () => { return ( <> - + @@ -38,4 +35,4 @@ const App: React.FC = () => { ); }; -export default App; +export default App; \ No newline at end of file diff --git a/src/components/charts/LineRaceChart/LineRaceChart.tsx b/src/components/charts/LineRaceChart/LineRaceChart.tsx index 47f24c95..80bfdb57 100644 --- a/src/components/charts/LineRaceChart/LineRaceChart.tsx +++ b/src/components/charts/LineRaceChart/LineRaceChart.tsx @@ -3,17 +3,26 @@ import { useTranslation } from 'react-i18next'; import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { BaseChart } from '@app/components/common/charts/BaseChart'; import { useAppSelector } from '@app/hooks/reduxHooks'; -import { themeObject } from '@app/styles/themes/themeVariables'; +import { liquidBlueTheme } from '@app/styles/themes/liquidBlue/liquidBlueTheme'; import useLineChartData from '@app/hooks/useLineChartData'; export const LineRaceChart: React.FC = () => { const { data, isLoading } = useLineChartData(); const { t } = useTranslation(); - const theme = useAppSelector((state) => state.theme.theme); - if (isLoading) { - return
Loading...
; + return ( + +
+
+

{t('common.loading')}

+
+ + ); } const noData = !data || data.length === 0; @@ -25,18 +34,27 @@ export const LineRaceChart: React.FC = () => { data: noData ? [] : data.map((item) => [item.month, item.profiles]), showSymbol: false, lineStyle: { - color: getComputedStyle(document.documentElement).getPropertyValue('--chart-color1'), // Set color for profiles line + color: liquidBlueTheme.chartColor1, // Use liquid blue theme colors + width: 3, }, endLabel: { show: !noData, formatter: (params: { value: string[] }) => `${t('categories.npubs')}: ${params.value[1]}`, - color: themeObject[theme].textMain, + color: liquidBlueTheme.textMain, + fontSize: 12, + fontWeight: 'bold', }, labelLayout: { moveOverlap: 'shiftY', }, emphasis: { focus: 'series', + lineStyle: { + color: liquidBlueTheme.chartColor1, + width: 4, + shadowColor: liquidBlueTheme.chartColor1, + shadowBlur: 8, + }, }, encode: { x: 'month', @@ -52,18 +70,27 @@ export const LineRaceChart: React.FC = () => { data: noData ? [] : data.map((item) => [item.month, item.lightning_addr]), showSymbol: false, lineStyle: { - color: getComputedStyle(document.documentElement).getPropertyValue('--chart-color3'), // Use dht_key color for lightning_addr line + color: liquidBlueTheme.chartColor2, // Use liquid blue theme colors + width: 3, }, endLabel: { show: !noData, formatter: (params: { value: string[] }) => `${t('categories.lightningABV')}: ${params.value[1]}`, - color: themeObject[theme].textMain, + color: liquidBlueTheme.textMain, + fontSize: 12, + fontWeight: 'bold', }, labelLayout: { moveOverlap: 'shiftY', }, emphasis: { focus: 'series', + lineStyle: { + color: liquidBlueTheme.chartColor2, + width: 4, + shadowColor: liquidBlueTheme.chartColor2, + shadowBlur: 8, + }, }, encode: { x: 'month', @@ -79,19 +106,27 @@ export const LineRaceChart: React.FC = () => { data: noData ? [] : data.map((item) => [item.month, item.dht_key]), showSymbol: false, lineStyle: { - color: getComputedStyle(document.documentElement).getPropertyValue('--chart-color2'), // Use lightning_addr color for dht_key line + color: liquidBlueTheme.chartColor3, // Use liquid blue theme colors + width: 3, }, endLabel: { show: !noData, - // formatter: (params: { value: string[] }) => `${t('categories.dhtKey')}: ${params.value[1]}`, formatter: (params: { value: string[] }) => `${t('categories.bolt')}: ${params.value[1]}`, - color: themeObject[theme].textMain, + color: liquidBlueTheme.textMain, + fontSize: 12, + fontWeight: 'bold', }, labelLayout: { moveOverlap: 'shiftY', }, emphasis: { focus: 'series', + lineStyle: { + color: liquidBlueTheme.chartColor3, + width: 4, + shadowColor: liquidBlueTheme.chartColor3, + shadowBlur: 8, + }, }, encode: { x: 'month', @@ -107,18 +142,27 @@ export const LineRaceChart: React.FC = () => { data: noData ? [] : data.map((item) => [item.month, item.lightning_and_dht]), showSymbol: false, lineStyle: { - color: getComputedStyle(document.documentElement).getPropertyValue('--chart-color4'), // Set color for lightning_and_dht line + color: liquidBlueTheme.chartColor4, // Use liquid blue theme colors + width: 3, }, endLabel: { show: !noData, formatter: (params: { value: string[] }) => `${t('categories.lightningAndDHT')}: ${params.value[1]}`, - color: themeObject[theme].textMain, + color: liquidBlueTheme.textMain, + fontSize: 12, + fontWeight: 'bold', }, labelLayout: { moveOverlap: 'shiftY', }, emphasis: { focus: 'series', + lineStyle: { + color: liquidBlueTheme.chartColor4, + width: 4, + shadowColor: liquidBlueTheme.chartColor4, + shadowBlur: 8, + }, }, encode: { x: 'month', @@ -131,7 +175,8 @@ export const LineRaceChart: React.FC = () => { ]; const option = { - animationDuration: 5000, + animationDuration: 3000, + animationEasing: 'cubicOut', dataset: [ { id: 'dataset_raw', @@ -141,6 +186,13 @@ export const LineRaceChart: React.FC = () => { tooltip: { order: 'valueDesc', trigger: 'axis', + backgroundColor: 'rgba(0, 0, 0, 0.8)', + borderColor: liquidBlueTheme.primary, + textStyle: { + color: liquidBlueTheme.textMain, + }, + shadowColor: liquidBlueTheme.shadow, + shadowBlur: 8, }, xAxis: { type: 'category', @@ -150,16 +202,33 @@ export const LineRaceChart: React.FC = () => { interval: 0, rotate: 45, margin: 16, - color: themeObject[theme].textLight, - fontSize: 14, + color: liquidBlueTheme.textLight, + fontSize: 12, + }, + axisLine: { + lineStyle: { + color: liquidBlueTheme.border, + }, }, }, yAxis: { type: 'value', minInterval: 1, - // name: 'Count', axisLabel: { formatter: '{value}', + color: liquidBlueTheme.textLight, + fontSize: 11, + }, + axisLine: { + lineStyle: { + color: liquidBlueTheme.border, + }, + }, + splitLine: { + lineStyle: { + color: liquidBlueTheme.borderBase, + opacity: 0.3, + }, }, }, grid: { @@ -177,314 +246,22 @@ export const LineRaceChart: React.FC = () => { style: { text: t('charts.noData'), fontSize: 16, - fill: themeObject[theme].textMain, + fill: liquidBlueTheme.textMain, + fontWeight: 'bold', }, } : null, }; return ( - - + {t('charts.protocols')}} + className="liquid-glass-card liquid-dashboard-element" + > +
+ +
); -}; - -// import React from 'react'; -// import { useTranslation } from 'react-i18next'; -// import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; -// import { BaseChart } from '@app/components/common/charts/BaseChart'; -// import { useAppSelector } from '@app/hooks/reduxHooks'; -// import { themeObject } from '@app/styles/themes/themeVariables'; -// import useLineChartData from '@app/hooks/useLineChartData'; - -// export const LineRaceChart: React.FC = () => { -// const { data, isLoading } = useLineChartData(); -// const { t } = useTranslation(); - -// const theme = useAppSelector((state) => state.theme.theme); - -// if (isLoading || !data) { -// return
Loading...
; -// } - -// const seriesList = [ -// { -// name: t('categories.profiles'), -// type: 'line', -// data: data.map((item) => [item.month, item.profiles]), -// showSymbol: false, -// endLabel: { -// show: true, -// formatter: (params: { value: string[] }) => `${t('categories.profiles')}: ${params.value[1]}`, -// color: themeObject[theme].textMain, -// }, -// labelLayout: { -// moveOverlap: 'shiftY', -// }, -// emphasis: { -// focus: 'series', -// }, -// encode: { -// x: 'month', -// y: 'profiles', -// label: ['month', 'profiles'], -// itemName: 'month', -// tooltip: ['profiles'], -// }, -// }, -// { -// name: t('categories.lightningAddr'), -// type: 'line', -// data: data.map((item) => [item.month, item.lightning_addr]), -// showSymbol: false, -// endLabel: { -// show: true, -// formatter: (params: { value: string[] }) => `${t('categories.lightningAddr')}: ${params.value[1]}`, -// color: themeObject[theme].textMain, -// }, -// labelLayout: { -// moveOverlap: 'shiftY', -// }, -// emphasis: { -// focus: 'series', -// }, -// encode: { -// x: 'month', -// y: 'lightning_addr', -// label: ['month', 'lightning_addr'], -// itemName: 'month', -// tooltip: ['lightning_addr'], -// }, -// }, -// { -// name: t('categories.dhtKey'), -// type: 'line', -// data: data.map((item) => [item.month, item.dht_key]), -// showSymbol: false, -// endLabel: { -// show: true, -// formatter: (params: { value: string[] }) => `${t('categories.dhtKey')}: ${params.value[1]}`, -// color: themeObject[theme].textMain, -// }, -// labelLayout: { -// moveOverlap: 'shiftY', -// }, -// emphasis: { -// focus: 'series', -// }, -// encode: { -// x: 'month', -// y: 'dht_key', -// label: ['month', 'dht_key'], -// itemName: 'month', -// tooltip: ['dht_key'], -// }, -// }, -// { -// name: t('categories.lightningAndDHT'), -// type: 'line', -// data: data.map((item) => [item.month, item.lightning_and_dht]), -// showSymbol: false, -// endLabel: { -// show: true, -// formatter: (params: { value: string[] }) => `${t('categories.lightningAndDHT')}: ${params.value[1]}`, -// color: themeObject[theme].textMain, -// }, -// labelLayout: { -// moveOverlap: 'shiftY', -// }, -// emphasis: { -// focus: 'series', -// }, -// encode: { -// x: 'month', -// y: 'lightning_and_dht', -// label: ['month', 'lightning_and_dht'], -// itemName: 'month', -// tooltip: ['lightning_and_dht'], -// }, -// }, -// ]; - -// const option = { -// animationDuration: 5000, -// dataset: [ -// { -// id: 'dataset_raw', -// source: data, -// }, -// ], -// tooltip: { -// order: 'valueDesc', -// trigger: 'axis', -// }, -// xAxis: { -// type: 'category', -// nameLocation: 'middle', -// data: data.map((item) => item.month), -// }, -// yAxis: { -// type: 'value', -// minInterval: 1, -// // name: 'Count', -// axisLabel: { -// formatter: '{value}', -// }, -// }, -// grid: { -// left: 65, -// right: 150, -// top: 20, -// bottom: 30, -// }, -// series: seriesList, -// }; - -// return ( -// -// -// -// ); -// }; - -// import React, { useState, useEffect, useCallback } from 'react'; -// import { useTranslation } from 'react-i18next'; -// import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; -// import { BaseChart } from '@app/components/common/charts/BaseChart'; -// import Data from './data.json'; -// import { useAppSelector } from '@app/hooks/reduxHooks'; -// import { themeObject } from '@app/styles/themes/themeVariables'; - -// interface DataRow { -// id: string; -// fromDatasetId: string; -// transform: { -// type: string; -// config: { and: [{ dimension: string; gte: number }, { dimension: string; '=': string }] }; -// }; -// } - -// interface SeriesRow { -// type: string; -// datasetId: string; -// showSymbol: boolean; -// name: string; -// endLabel: { -// show: boolean; -// formatter: (params: { value: string }) => string; -// color?: string; -// }; -// labelLayout: { -// moveOverlap: string; -// }; -// emphasis: { -// focus: string; -// }; -// encode: { -// x: string; -// y: string; -// label: [string, string]; -// itemName: string; -// tooltip: [string]; -// }; -// } - -// export const LineRaceChart: React.FC = () => { -// const [data, setData] = useState([]); -// const [series, setSeries] = useState([]); -// const rawData = JSON.parse(JSON.stringify(Data)); -// const { t } = useTranslation(); - -// const theme = useAppSelector((state) => state.theme.theme); - -// const runAnimation = useCallback(() => { -// const countries = ['Finland', 'Germany', 'Iceland', 'Norway', 'United Kingdom']; -// const datasetWithFilters: DataRow[] = []; -// const seriesList: SeriesRow[] = []; - -// countries.forEach((country) => { -// const datasetId = `dataset_${country}`; -// datasetWithFilters.push({ -// id: datasetId, -// fromDatasetId: 'dataset_raw', -// transform: { -// type: 'filter', -// config: { -// and: [ -// { dimension: 'Year', gte: 1950 }, -// { dimension: 'Country', '=': country }, -// ], -// }, -// }, -// }); -// seriesList.push({ -// type: 'line', -// datasetId: datasetId, -// showSymbol: false, -// name: country, -// endLabel: { -// show: true, -// formatter: (params) => `${params.value[3]}: ${params.value[0]}`, -// color: themeObject[theme].textMain, -// }, -// labelLayout: { -// moveOverlap: 'shiftY', -// }, -// emphasis: { -// focus: 'series', -// }, -// encode: { -// x: 'Year', -// y: 'Income', -// label: ['Country', 'Income'], -// itemName: 'Year', -// tooltip: ['Income'], -// }, -// }); -// }); -// setData(datasetWithFilters); -// setSeries(seriesList); -// }, [theme]); - -// useEffect(() => { -// setTimeout(() => { -// runAnimation(); -// }, 200); -// }, [runAnimation]); - -// const option = { -// animationDuration: 10000, -// dataset: [ -// { -// id: 'dataset_raw', -// source: rawData, -// }, -// ...data, -// ], -// tooltip: { -// order: 'valueDesc', -// trigger: 'axis', -// }, -// xAxis: { -// type: 'category', -// nameLocation: 'middle', -// }, -// yAxis: { -// name: '', -// }, -// grid: { -// left: 65, -// right: 150, -// top: 20, -// bottom: 30, -// }, -// series: series, -// }; - -// return ( -// -// -// -// ); -// }; +}; \ No newline at end of file diff --git a/src/components/relay-dashboard/Balance/Balance.tsx b/src/components/relay-dashboard/Balance/Balance.tsx index 685a9fb7..5d092493 100644 --- a/src/components/relay-dashboard/Balance/Balance.tsx +++ b/src/components/relay-dashboard/Balance/Balance.tsx @@ -10,19 +10,24 @@ import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; import useBalanceData from '@app/hooks/useBalanceData'; import { formatBalance } from '@app/utils/balanceFormatter'; -import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch'; // Import BaseSwitch +import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch'; import SendButton from './components/SendButton/SendButton'; export const Balance: React.FC = () => { const { balanceData, transactions, isLoading } = useBalanceData(); - const [displayUSD, setDisplayUSD] = useState(true); // State to toggle between USD and SATs + const [displayUSD, setDisplayUSD] = useState(true); const userId = useAppSelector((state) => state.user.user?.id); const { t } = useTranslation(); if (isLoading) { - return
Loading...
; + return ( +
+
+

Loading Balance...

+
+ ); } const handleSwitchChange = () => { @@ -30,129 +35,59 @@ export const Balance: React.FC = () => { }; return ( - - - {t('nft.yourBalance')} - - - - - - - - {displayUSD - ? balanceData && - getCurrencyPrice(formatNumberWithCommas(balanceData.balance_usd), CurrencyTypeEnum.USD, false) - : balanceData && formatBalance(balanceData.latest_balance ?? 0)} - - - - - - {displayUSD ? 'USD' : 'Sats'} - - +
+ + + {t('nft.yourBalance')} + + + + + + + + {displayUSD + ? balanceData && + getCurrencyPrice(formatNumberWithCommas(balanceData.balance_usd), CurrencyTypeEnum.USD, false) + : balanceData && formatBalance(balanceData.latest_balance ?? 0)} + + - - - - - - {displayUSD - ? balanceData && formatBalance(balanceData.latest_balance ?? 0) - : balanceData && - getCurrencyPrice(formatNumberWithCommas(balanceData.balance_usd), CurrencyTypeEnum.USD, false)} - - - - - - - + + + {displayUSD ? 'USD' : 'Sats'} + + + - + + + + {displayUSD + ? balanceData && formatBalance(balanceData.latest_balance ?? 0) + : balanceData && + getCurrencyPrice(formatNumberWithCommas(balanceData.balance_usd), CurrencyTypeEnum.USD, false)} + + + - - - - - + + + + + + + + + + + + +
); -}; - -// import React, { useEffect, useState } from 'react'; -// import { useTranslation } from 'react-i18next'; -// import { NFTCard } from '@app/components/relay-dashboard/common/NFTCard/NFTCard'; -// import { TopUpBalanceButton } from './components/TopUpBalanceButton/TopUpBalanceButton'; -// import { useAppSelector } from '@app/hooks/reduxHooks'; -// import { formatNumberWithCommas, getCurrencyPrice } from '@app/utils/utils'; -// import { CurrencyTypeEnum } from '@app/interfaces/interfaces'; -// import * as S from './Balance.styles'; -// import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; -// import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -// import useBalanceData from '@app/hooks/useBalanceData'; -// import { formatBalance } from '@app/utils/balanceFormatter'; -// import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch'; // Import BaseSwitch - -// export const Balance: React.FC = () => { -// const { balanceData, transactions, isLoading } = useBalanceData(); -// const [displayUSD, setDisplayUSD] = useState(true); // State to toggle between USD and SATs - -// const userId = useAppSelector((state) => state.user.user?.id); - -// const { t } = useTranslation(); - -// if (isLoading) { -// return
Loading...
; -// } - -// const handleSwitchChange = () => { -// setDisplayUSD(!displayUSD); -// }; - -// return ( -// -// -// {t('nft.yourBalance')} -// - -// -// -// -// -// -// {displayUSD -// ? balanceData && getCurrencyPrice(formatNumberWithCommas(balanceData.balance_usd), CurrencyTypeEnum.USD) -// : balanceData && formatBalance(balanceData.latest_balance ?? 0)} -// -// - -// -// -// {displayUSD ? 'USD' : 'Sats'} -// -// - -// -// -// -// -// -// {displayUSD -// ? balanceData && formatBalance(balanceData.latest_balance ?? 0) -// : balanceData && getCurrencyPrice(formatNumberWithCommas(balanceData.balance_usd), CurrencyTypeEnum.USD)} -// -// -// -// - -// -// -// -// -// -// -// -// ); -// }; +}; \ No newline at end of file diff --git a/src/components/relay-dashboard/totalEarning/TotalEarning.tsx b/src/components/relay-dashboard/totalEarning/TotalEarning.tsx index 8ddd0876..db393c48 100644 --- a/src/components/relay-dashboard/totalEarning/TotalEarning.tsx +++ b/src/components/relay-dashboard/totalEarning/TotalEarning.tsx @@ -35,46 +35,58 @@ export const TotalEarning: React.FC = () => { if (isLoading) { - return
{t('common.loading')}
; + return ( +
+
+

{t('common.loading')}

+
+ ); } if (error) { return ( -
- {t('common.error')}: {error} +
+

{t('common.error')}:

+ {error}
); } const formattedLatestRate = latestRate !== undefined && !isNaN(latestRate) ? Math.round(latestRate) : 0; return ( - + - {t('nft.bitcoinPrice')} + {t('nft.bitcoinPrice')} - - {isIncreased ? : } {rateDifference.toFixed(2)}% - +
+ {isIncreased ? : } + {rateDifference.toFixed(2)} + % +
- {getCurrencyPrice(`${formatNumberWithCommas(formattedLatestRate)}`, CurrencyTypeEnum.USD)} + + {getCurrencyPrice(`${formatNumberWithCommas(formattedLatestRate)}`, CurrencyTypeEnum.USD)} + - +
+ +
); -}; +}; \ No newline at end of file diff --git a/src/components/relay-dashboard/transactions/Transactions.tsx b/src/components/relay-dashboard/transactions/Transactions.tsx index 660e80bf..c74eb25f 100644 --- a/src/components/relay-dashboard/transactions/Transactions.tsx +++ b/src/components/relay-dashboard/transactions/Transactions.tsx @@ -10,6 +10,7 @@ import styled from 'styled-components'; import { Line } from 'react-chartjs-2'; import { BaseSkeleton } from '@app/components/common/BaseSkeleton/BaseSkeleton'; import { ChartOptions } from 'chart.js'; +import { liquidBlueTheme } from '@app/styles/themes/liquidBlue/liquidBlueTheme'; import { Chart as ChartJS, CategoryScale, @@ -32,6 +33,30 @@ const TitleContainer = styled.div` align-items: center; justify-content: space-between; width: 100%; + margin-bottom: 1rem; +`; + +const LiquidWrapper = styled.div` + background: rgba(0, 255, 255, 0.03); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(0, 255, 255, 0.12); + border-radius: 8px; + padding: 1rem; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: -50%; + right: -50%; + width: 100%; + height: 100%; + background: radial-gradient(circle, rgba(0, 255, 255, 0.05) 0%, transparent 70%); + animation: rotate 10s linear infinite; + pointer-events: none; + } `; export const ActivityStory: React.FC = () => { @@ -62,7 +87,10 @@ export const ActivityStory: React.FC = () => { )) ) : ( - {t('No transaction data')} +
+ {t('No transaction data')} +
📊
+
); const showModal = () => { @@ -75,32 +103,25 @@ export const ActivityStory: React.FC = () => { const TransactionSkeletons = () => { return ( - <> - - - - - - - - - - - +
+
+

{t('common.loading')}

+
); }; + const prepareChartData = () => { const sortedStory = [...story].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()); - + // Filter out negative values and their corresponding labels const positiveStory = sortedStory.filter((item) => parseFloat(item.value) > 0); - + const labels = positiveStory.map((item) => new Date(item.date).toLocaleDateString()); const amounts = positiveStory.map((item) => { const amount = parseFloat(item.value); return isNaN(amount) ? 0 : amount; }); - + return { labels, datasets: [ @@ -111,21 +132,22 @@ export const ActivityStory: React.FC = () => { backgroundColor: (context: any) => { const ctx = context.chart.ctx; const gradient = ctx.createLinearGradient(0, 0, 0, 400); - gradient.addColorStop(0, 'rgba(75, 192, 192, 0.6)'); - gradient.addColorStop(1, 'rgba(75, 192, 192, 0.1)'); + gradient.addColorStop(0, `${liquidBlueTheme.chartPrimaryGradient}`); + gradient.addColorStop(1, 'rgba(0, 255, 255, 0.05)'); return gradient; }, - borderColor: 'rgba(75, 192, 192, 1)', - pointBackgroundColor: 'rgba(75, 192, 192, 1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(75, 192, 192, 1)', + borderColor: liquidBlueTheme.primary, + pointBackgroundColor: liquidBlueTheme.primary, + pointBorderColor: liquidBlueTheme.textMain, + pointHoverBackgroundColor: liquidBlueTheme.textMain, + pointHoverBorderColor: liquidBlueTheme.primary, tension: 0.4, + pointRadius: 4, + pointHoverRadius: 6, }, ], }; }; - const chartOptions: ChartOptions<'line'> = { responsive: true, @@ -140,16 +162,16 @@ export const ActivityStory: React.FC = () => { size: 14, weight: 'bold', }, - color: 'rgba(255, 255, 255, 0.8)', // Lighter color for y-axis title + color: liquidBlueTheme.textMain, }, ticks: { font: { size: 12, }, - color: 'rgba(255, 255, 255, 0.6)', // Lighter color for y-axis ticks + color: liquidBlueTheme.textLight, }, grid: { - color: 'rgba(255, 255, 255, 0.1)', // Lighter color for y-axis grid lines + color: liquidBlueTheme.borderBase, }, }, x: { @@ -160,16 +182,16 @@ export const ActivityStory: React.FC = () => { size: 14, weight: 'bold', }, - color: 'rgba(255, 255, 255, 0.8)', // Lighter color for x-axis title + color: liquidBlueTheme.textMain, }, ticks: { font: { - size: 12, + size: 11, }, - color: 'rgba(255, 255, 255, 0.6)', // Lighter color for x-axis ticks + color: liquidBlueTheme.textLight, }, grid: { - color: 'rgba(255, 255, 255, 0.1)', // Lighter color for x-axis grid lines + color: liquidBlueTheme.borderBase, }, }, }, @@ -178,13 +200,17 @@ export const ActivityStory: React.FC = () => { position: 'top' as const, labels: { font: { - size: 14, + size: 12, }, - color: 'rgba(255, 255, 255, 0.8)', // Lighter color for legend labels + color: liquidBlueTheme.textMain, }, }, tooltip: { - // ... (keep the existing tooltip configuration) + backgroundColor: 'rgba(0, 0, 0, 0.8)', + titleColor: liquidBlueTheme.primary, + bodyColor: liquidBlueTheme.textMain, + borderColor: liquidBlueTheme.primary, + borderWidth: 1, }, }, animation: { @@ -198,21 +224,38 @@ export const ActivityStory: React.FC = () => { }; return ( - + - {t('nft.yourTransactions')} - + {t('nft.yourTransactions')} + {t('nft.viewTransactions')} + - + + {t('nft.yourTransactions')}} + open={isModalVisible} + onCancel={handleCancel} + footer={null} + width={900} + className="liquid-modal" + >
- {isLoading ? : {activityContent}} +
+ {isLoading ? : {activityContent}} +
+ {isLoading ? : {activityContent}} - + ); -}; +}; \ No newline at end of file diff --git a/src/hooks/useAutoNightMode.ts b/src/hooks/useAutoNightMode.ts index 61464db2..9d9d1893 100644 --- a/src/hooks/useAutoNightMode.ts +++ b/src/hooks/useAutoNightMode.ts @@ -1,78 +1,4 @@ -import { useEffect } from 'react'; -import { setTheme } from '@app/store/slices/themeSlice'; -import { useAppDispatch, useAppSelector } from '@app/hooks/reduxHooks'; -import { Dates } from '@app/constants/Dates'; -import { msToH } from '@app/utils/utils'; - -const getNextTime = (ms: number) => { - const now = Date.now(); - const clearDate = Dates.getClearDate(); - const nextTime = clearDate.add(ms, 'ms'); - - const delta = +nextTime - now; - - return delta < 0 ? delta + 24 * 3600 * 1000 : delta; -}; - -const isNight = (nightTime: number[]) => { - const clearDate = Dates.getClearDate(); - - let now = Dates.getToday(); - - if (nightTime[0] < nightTime[1]) { - return now.isBetween(clearDate.add(nightTime[0], 'ms'), clearDate.add(nightTime[1], 'ms'), null, '[)'); - } else { - now = now.hour() < msToH(nightTime[0]) ? now.add(24 * 3600 * 1000, 'ms') : now; - return now.isBetween( - clearDate.add(nightTime[0], 'ms'), - clearDate.add(nightTime[1] + 24 * 3600 * 1000, 'ms'), - null, - '[)', - ); - } -}; - -let timeoutNightStarts: null | ReturnType = null; -let timeoutNightEnds: null | ReturnType = null; - +// Auto night mode is disabled - using liquid blue theme only export const useAutoNightMode = (): void => { - const dispatch = useAppDispatch(); - const { isNightMode, nightTime } = useAppSelector((state) => state.nightMode); - - useEffect(() => { - timeoutNightStarts && clearTimeout(timeoutNightStarts); - timeoutNightEnds && clearTimeout(timeoutNightEnds); - - if (isNightMode) { - if (isNight(nightTime)) { - dispatch(setTheme('dark')); - } else { - dispatch(setTheme('light')); - } - - const runTimeoutStart = () => { - dispatch(setTheme('dark')); - timeoutNightStarts = setTimeout(runTimeoutStart, 24 * 3600 * 1000); - }; - - const nextStartTime = getNextTime(nightTime[0]); - - timeoutNightStarts = setTimeout(runTimeoutStart, nextStartTime); - - const runTimeoutEnd = () => { - dispatch(setTheme('light')); - timeoutNightEnds = setTimeout(runTimeoutEnd, 24 * 3600 * 1000); - }; - - let nextEndTime = getNextTime(nightTime[1]); - nextEndTime = nextStartTime > nextEndTime ? nextEndTime + 24 * 3600 * 1000 : nextEndTime; - - timeoutNightEnds = setTimeout(runTimeoutEnd, nextEndTime); - } - - return () => { - timeoutNightStarts && clearTimeout(timeoutNightStarts); - timeoutNightEnds && clearTimeout(timeoutNightEnds); - }; - }, [dispatch, isNightMode, nightTime]); -}; + // No-op - liquid blue theme is always active +}; \ No newline at end of file diff --git a/src/hooks/useThemeWatcher.ts b/src/hooks/useThemeWatcher.ts index a1cc5998..963c3412 100644 --- a/src/hooks/useThemeWatcher.ts +++ b/src/hooks/useThemeWatcher.ts @@ -1,17 +1,15 @@ import { useEffect, useRef } from 'react'; -import { useAppSelector } from './reduxHooks'; import { ConfigProvider } from 'antd'; -import { themeObject } from '@app/styles/themes/themeVariables'; +import { liquidBlueTheme } from '@app/styles/themes/liquidBlue/liquidBlueTheme'; export const useThemeWatcher = (): void => { - const theme = useAppSelector((state) => state.theme.theme); const root = useRef(document.querySelector(':root')); useEffect(() => { const html = root.current; if (html) { html.setAttribute('data-no-transition', ''); - html.setAttribute('data-theme', theme); + html.setAttribute('data-theme', 'liquid-blue'); // remove transition after layout update requestAnimationFrame(() => { html.removeAttribute('data-no-transition'); @@ -20,12 +18,12 @@ export const useThemeWatcher = (): void => { ConfigProvider.config({ theme: { - primaryColor: themeObject[theme].primary, - infoColor: themeObject[theme].primary, - successColor: themeObject[theme].success, - errorColor: themeObject[theme].error, - warningColor: themeObject[theme].warning, + primaryColor: liquidBlueTheme.primary, + infoColor: liquidBlueTheme.primary, + successColor: liquidBlueTheme.success, + errorColor: liquidBlueTheme.error, + warningColor: liquidBlueTheme.warning, }, }); - }, [theme]); -}; + }, []); +}; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 3e2cf8e0..f66e9b15 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,7 +7,8 @@ import './i18n'; import * as serviceWorkerRegistration from './serviceWorkerRegistration'; import 'config/config'; import { store } from '@app/store/store'; -import PwaSupportChecker from '@app/components/PwaSupportChecker'; // Import the new component +import PwaSupportChecker from '@app/components/PwaSupportChecker'; +import './styles/liquid-glass.css'; // Import liquid glass theme CSS interface EventTarget { state?: 'activated'; @@ -46,47 +47,4 @@ if (window.location.hostname !== 'localhost') { serviceWorkerRegistration.unregister(); } -reportWebVitals(); - -// import App from './App'; -// import reportWebVitals from './reportWebVitals'; -// import './i18n'; -// import * as serviceWorkerRegistration from './serviceWorkerRegistration'; -// import 'config/config'; -// import { Provider } from 'react-redux'; -// import { store } from '@app/store/store'; -// import { createRoot } from 'react-dom/client'; -// import React from 'react'; - -// interface EventTarget { -// state?: 'activated'; -// } - -// const container = document.getElementById('root') as HTMLElement; -// const root = createRoot(container); - -// root.render( -// -// -// -// -// , -// ); - -// serviceWorkerRegistration.register({ -// onUpdate: (registration) => { -// const waitingServiceWorker = registration.waiting; - -// if (waitingServiceWorker) { -// waitingServiceWorker.addEventListener('statechange', (event) => { -// if ((event.target as EventTarget).state === 'activated') window.location.reload(); -// }); -// waitingServiceWorker.postMessage({ type: 'SKIP_WAITING' }); -// } -// }, -// }); // app will reload if new version of app is available - -// // If you want to start measuring performance in your app, pass a function -// // to log results (for example: reportWebVitals(console.log)) -// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -// reportWebVitals(); +reportWebVitals(); \ No newline at end of file diff --git a/src/interfaces/interfaces.ts b/src/interfaces/interfaces.ts index 965c6221..a26c33e2 100644 --- a/src/interfaces/interfaces.ts +++ b/src/interfaces/interfaces.ts @@ -8,7 +8,8 @@ export type xData = number[] | string[]; export type LanguageType = 'de' | 'en'; -export type ThemeType = 'light' | 'dark'; +// Only liquid-blue theme is supported +export type ThemeType = 'liquid-blue'; export interface ChartSeries { seriesName: string; @@ -49,4 +50,4 @@ export interface PaymentCard { export interface Earning { date: number; usd_value: number; -} +} \ No newline at end of file diff --git a/src/pages/DashboardPages/DashboardPage.styles.ts b/src/pages/DashboardPages/DashboardPage.styles.ts index 012c21d1..9b730f32 100644 --- a/src/pages/DashboardPages/DashboardPage.styles.ts +++ b/src/pages/DashboardPages/DashboardPage.styles.ts @@ -9,12 +9,20 @@ export const RightSideCol = styled(BaseCol)` display: flex; flex-direction: column; height: calc(100vh - ${LAYOUT.desktop.headerHeight}); - background-color: var(--sider-background-color); + background: rgba(0, 255, 255, 0.08); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-left: 1px solid rgba(0, 255, 255, 0.15); overflow-y: auto; z-index: 5; + &::-webkit-scrollbar { width: 6px; - display: none; // Hide scrollbar by default + display: none; + } + + .liquid-element { + animation: fadeInUp 0.6s ease-out; } `; @@ -23,40 +31,116 @@ export const LeftSideCol = styled(BaseCol)` padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; height: calc(100vh - ${LAYOUT.desktop.headerHeight}); overflow: auto; + background: transparent; + &::-webkit-scrollbar { width: 6px; - display: none; // Hide scrollbar by default + display: none; + } + } + + .glass-panel { + background: rgba(0, 255, 255, 0.03); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(0, 255, 255, 0.15); + box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.1); + border-radius: 8px; + transition: all 0.3s ease; + animation: fadeInUp 0.6s ease-out; + + &:hover { + box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); + border-color: rgba(0, 255, 255, 0.4); + transform: translateY(-2px); + } + } + + .holographic-card { + background: linear-gradient(135deg, + rgba(0, 255, 255, 0.05) 0%, + rgba(0, 255, 170, 0.05) 25%, + rgba(20, 184, 166, 0.05) 50%, + rgba(0, 221, 255, 0.05) 75%, + rgba(0, 255, 255, 0.05) 100%); + background-size: 400% 400%; + animation: liquidFlow 15s ease infinite; + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border: 1px solid rgba(0, 255, 255, 0.2); + border-radius: 12px; + box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.1); + overflow: hidden; + position: relative; + margin-bottom: 2rem; + animation: fadeInUp 0.8s ease-out; + + &::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%); + animation: rotate 10s linear infinite; + pointer-events: none; } } `; -// export const LeftSideCol = styled(BaseCol)` -// padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; -// position: sticky; -// top: 0; -// display: flex; -// flex-direction: column; -// height: calc(100vh - ${LAYOUT.desktop.headerHeight}); -// background-color: var(--sider-background-color); -// overflow-y: auto; -// overflow-x: hidden; +// Animation keyframes for liquid blue effects +export const LiquidAnimations = styled.div` + @keyframes liquidFlow { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } + } -// &::-webkit-scrollbar { -// width: 6px; -// display: none; // Hide scrollbar by default -// } + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } -// -ms-overflow-style: none; // IE and Edge -// scrollbar-width: none; // Firefox + @keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } + } + + @keyframes pulseGlow { + 0%, 100% { + box-shadow: 0 0 5px rgba(0, 255, 255, 0.2); + } + 50% { + box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 170, 0.2); + } + } -// // &.scrolling { -// // &::-webkit-scrollbar { -// // display: block; -// // } -// // scrollbar-width: thin; // Enable scrollbar for Firefox -// // -ms-overflow-style: auto; // Enable scrollbar for IE and Edge -// // } -// `; + @keyframes shimmer { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } + } +`; export const Space = styled.div` margin: 1rem 0; @@ -79,7 +163,7 @@ export const ScrollWrapper = styled.div` } // Hide scrollbars for Firefox - scrollbar-width: none; // Firefox + scrollbar-width: none; // Hide scrollbars for IE, Edge -ms-overflow-style: none; @@ -97,6 +181,98 @@ export const BlockWrapper = styled.div` overflow-y: auto; `; +// Dashboard wrapper with liquid blue background +export const DashboardWrapper = styled.div` + position: relative; + min-height: calc(100vh - 80px); + background: #000000; + overflow: hidden; + + /* Multi-layer liquid blue gradient background */ + &::before { + content: ''; + position: fixed; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: + radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.15) 0%, transparent 40%), + radial-gradient(circle at 80% 20%, rgba(0, 255, 170, 0.12) 0%, transparent 45%), + radial-gradient(circle at 60% 80%, rgba(20, 184, 166, 0.12) 0%, transparent 45%), + radial-gradient(circle at 40% 40%, rgba(0, 221, 255, 0.08) 0%, transparent 50%); + pointer-events: none; + z-index: 0; + animation: liquidBackground 30s ease infinite, rotate 60s linear infinite; + } + + /* Additional animated gradient layer */ + &::after { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, + rgba(0, 255, 255, 0.03) 0%, + rgba(0, 255, 170, 0.03) 25%, + rgba(20, 184, 166, 0.03) 50%, + rgba(0, 221, 255, 0.03) 75%, + rgba(0, 255, 255, 0.03) 100%); + background-size: 400% 400%; + animation: liquidFlow 20s ease infinite; + pointer-events: none; + z-index: 0; + } + + /* Ensure content is above background layers */ + > * { + position: relative; + z-index: 1; + } + + @keyframes liquidBackground { + 0%, 100% { + opacity: 0.6; + transform: scale(1) rotate(0deg); + } + 25% { + opacity: 0.8; + transform: scale(1.1) rotate(90deg); + } + 50% { + opacity: 1; + transform: scale(1.2) rotate(180deg); + } + 75% { + opacity: 0.8; + transform: scale(1.1) rotate(270deg); + } + } + + @keyframes liquidFlow { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } + } + + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +`; + export const Item = styled.div` background: red; height: 150px; @@ -124,4 +300,4 @@ export const Item = styled.div` // -ms-overflow-style: none; // IE and Edge // scrollbar-width: none; // Firefox -// `; +// `; \ No newline at end of file diff --git a/src/pages/DashboardPages/NftDashboardPage.tsx b/src/pages/DashboardPages/NftDashboardPage.tsx index 14c7cf6f..5aedd13f 100644 --- a/src/pages/DashboardPages/NftDashboardPage.tsx +++ b/src/pages/DashboardPages/NftDashboardPage.tsx @@ -24,70 +24,94 @@ const MedicalDashboardPage: React.FC = () => { // }; const desktopLayout = ( - - - - + + + + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + +
+ +
+ + +
+ +
+ + + + + + +
+ +
+ +
+ +
+ +
+ +
+ + + + ); + + const mobileAndTabletLayout = ( + + + +
- +
+ - + +
- +
+ - + +
- - +
+ + +
- - +
+ + +
- - - - - - -
- -
- -
- -
+
+ -
- -
- - - ); - - const mobileAndTabletLayout = ( - - - - - - - - - - - - - - - - - - - - {/* - - */} - + {/* + + */} + + ); return ( @@ -98,116 +122,4 @@ const MedicalDashboardPage: React.FC = () => { ); }; -export default MedicalDashboardPage; - -// import React from 'react'; -// import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; -// import { References } from '@app/components/common/References/References'; -// import { useResponsive } from '@app/hooks/useResponsive'; -// import { PaidSubscribers } from '@app/components/relay-dashboard/paid-subscribers/PaidSubscribers'; -// import { RecentlyAddedNft } from '@app/components/relay-dashboard/recently-added/RecentlyAddedNft'; -// import { TrendingCollections } from '@app/components/relay-dashboard/trending-collections/TrendingCollections'; -// import { VisitorsPieChart } from '@app/components/charts/VisitorsPieChart'; -// import { LineRaceChart } from '@app/components/charts/LineRaceChart/LineRaceChart'; -// import { BarAnimationDelayChart } from '@app/components/charts/BarAnimationDelayChart/BarAnimationDelayChart'; -// import { ActivityCard } from '@app/components/medical-dashboard/activityCard/ActivityCard'; -// import { Balance } from '@app/components/relay-dashboard/Balance/Balance'; -// import { TotalEarning } from '@app/components/relay-dashboard/totalEarning/TotalEarning'; -// import { ActivityStory } from '@app/components/relay-dashboard/activityStory/ActivityStory'; -// import { RecentActivity } from '@app/components/relay-dashboard/recentActivity/RecentActivity'; -// import * as S from './DashboardPage.styles'; -// import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; -// import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; - -// const MedicalDashboardPage: React.FC = () => { -// const { isDesktop } = useResponsive(); - -// const desktopLayout = ( -// -// -// -// -// -// - -// -// -// - -// -// -// -// -// -// -// -// -// -// -// -// - -// -//
-// -//
-// -//
-// -//
-// -// -// -// -// -// -// ); - -// const mobileAndTabletLayout = ( -// -// -// -// - -// -// -// - -// -// -// -// -// -// -// -// -// -// -// -//
-// -//
-// -// -// -//
-// -//
-// - -// -// -// -// -// -// ); - -// return ( -// <> -// NFT Dashboard -// {isDesktop ? desktopLayout : mobileAndTabletLayout} -// -// ); -// }; - -// export default MedicalDashboardPage; +export default MedicalDashboardPage; \ No newline at end of file diff --git a/src/store/slices/themeSlice.ts b/src/store/slices/themeSlice.ts index 2756a356..e8e09737 100644 --- a/src/store/slices/themeSlice.ts +++ b/src/store/slices/themeSlice.ts @@ -5,9 +5,8 @@ interface ThemeState { theme: ThemeType; } -//const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; - -export const defaultTheme = 'dark';// Removing Support for preferred theme detection for launch +// Liquid Blue is the only theme +export const defaultTheme: ThemeType = 'liquid-blue'; localStorage.setItem('theme', defaultTheme); @@ -33,4 +32,4 @@ export const themeSlice = createSlice({ }, }); -export default themeSlice.reducer; +export default themeSlice.reducer; \ No newline at end of file diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index 2b972d4c..c6aea561 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -2,8 +2,7 @@ import { createGlobalStyle } from 'styled-components'; import { resetCss } from './resetCss'; import { BREAKPOINTS, FONT_SIZE, FONT_WEIGHT, media } from './themes/constants'; import { - lightThemeVariables, - darkThemeVariables, + liquidBlueThemeVariables, commonThemeVariables, antOverrideCssVariables, } from './themes/themeVariables'; @@ -11,38 +10,123 @@ import { export default createGlobalStyle` ${resetCss} - [data-theme='light'], - :root { - ${lightThemeVariables} + // Always use liquid blue theme + :root, + [data-theme='liquid-blue'] { + ${liquidBlueThemeVariables} + ${commonThemeVariables} + ${antOverrideCssVariables} } - [data-theme='dark'] { - ${darkThemeVariables} + // Apply liquid glass effect globally + body { + position: relative; + min-height: 100vh; + background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%); + + &::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(0, 255, 170, 0.08) 0%, transparent 50%), + radial-gradient(circle at 40% 20%, rgba(20, 184, 166, 0.06) 0%, transparent 50%); + pointer-events: none; + z-index: -1; + } + } + + // Glass morphism effect for cards and panels + .ant-card, + .ant-modal-content, + .ant-collapse-item, + .ant-table, + .ant-form { + background: rgba(0, 255, 255, 0.03) !important; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(0, 255, 255, 0.15) !important; + box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.1) !important; } - :root { - ${commonThemeVariables}; - ${antOverrideCssVariables}; - } + // Hover effects with cyan glow + .ant-btn:hover, + .ant-menu-item:hover, + .ant-card:hover { + box-shadow: 0 0 20px rgba(0, 255, 255, 0.3) !important; + border-color: rgba(0, 255, 255, 0.4) !important; + } + + // Input fields with glass effect + .ant-input, + .ant-input-affix-wrapper, + .ant-select-selector, + .ant-picker { + background: rgba(0, 255, 255, 0.05) !important; + border: 1px solid rgba(0, 255, 255, 0.2) !important; + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + color: rgba(255, 255, 255, 0.9) !important; + + &:hover, &:focus { + border-color: rgba(0, 255, 255, 0.5) !important; + box-shadow: 0 0 10px rgba(0, 255, 255, 0.2) !important; + } + } + + // Sidebar with glass effect + .ant-layout-sider { + background: rgba(0, 255, 255, 0.06) !important; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-right: 1px solid rgba(0, 255, 255, 0.15); + } + + // Header with glass effect + .ant-layout-header { + background: rgba(0, 255, 255, 0.08) !important; + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border-bottom: 1px solid rgba(0, 255, 255, 0.15); + } [data-no-transition] * { transition: none !important; } * { - scrollbar-width: none; - -ms-overflow-style: none; + scrollbar-width: thin; + scrollbar-color: rgba(0, 255, 255, 0.3) rgba(0, 255, 255, 0.05); &::-webkit-scrollbar { - display: none; + width: 8px; + height: 8px; + } + + &::-webkit-scrollbar-track { + background: rgba(0, 255, 255, 0.05); + } + + &::-webkit-scrollbar-thumb { + background: rgba(0, 255, 255, 0.3); + border-radius: 4px; + } + + &::-webkit-scrollbar-thumb:hover { + background: rgba(0, 255, 255, 0.5); } } - body.no-scroll { - overflow: hidden; -} + + body.no-scroll { + overflow: hidden; + } + html, body, :root { - background-color: var(--layout-body-bg-color); -} + background-color: #000000; + } .range-picker { & .ant-picker-panels { @@ -69,7 +153,8 @@ export default createGlobalStyle` a { color: var(--primary-color); &:hover,:active { - color: var(--ant-primary-color-hover); + color: var(--primary-color); + text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); } } @@ -89,6 +174,10 @@ export default createGlobalStyle` width: 36rem; padding: 2rem; min-height: 6rem; + background: rgba(0, 255, 255, 0.05) !important; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(0, 255, 255, 0.2) !important; .ant-notification-notice-with-icon .ant-notification-notice-message { margin-bottom: 0; @@ -143,15 +232,15 @@ export default createGlobalStyle` } .description { - color: #404040; + color: rgba(255, 255, 255, 0.8); font-size: ${FONT_SIZE.md}; font-weight: ${FONT_WEIGHT.semibold}; line-height: 1.375rem; } &.ant-notification-notice-success { - border: 1px solid var(--success-color); - background: var(--notification-success-color); + border: 1px solid var(--success-color) !important; + background: rgba(6, 182, 212, 0.1) !important; .title { color: var(--success-color); @@ -159,8 +248,8 @@ export default createGlobalStyle` } &.ant-notification-notice-info { - border: 1px solid var(--primary-color); - background: var(--notification-primary-color); + border: 1px solid var(--primary-color) !important; + background: rgba(0, 255, 255, 0.1) !important; .title { color: var(--primary-color); @@ -168,8 +257,8 @@ export default createGlobalStyle` } &.ant-notification-notice-warning { - border: 1px solid var(--warning-color); - background: var(--notification-warning-color); + border: 1px solid var(--warning-color) !important; + background: rgba(245, 158, 11, 0.1) !important; .title { color: var(--warning-color); @@ -177,8 +266,8 @@ export default createGlobalStyle` } &.ant-notification-notice-error { - border: 1px solid var(--error-color); - background: var(--notification-error-color); + border: 1px solid var(--error-color) !important; + background: rgba(239, 68, 68, 0.1) !important; .title { color: var(--error-color); @@ -207,30 +296,31 @@ export default createGlobalStyle` } .custom-checkbox-group .ant-checkbox-inner, .protocol-checkbox-group .ant-checkbox-inner { - background-color: white; - border-color: themeObject[theme].textMain; -} - .ant-alert-message{ - color: black - } - - .custom-checkbox-group .ant-checkbox-checked .ant-checkbox-inner { - background-color: #1890ff; - border-color: #1890ff; - } - .custom-checkbox-group.blacklist-mode-active .ant-checkbox-checked .ant-checkbox-inner{ - border-color: red; - background-color: red; - - } + background-color: rgba(0, 255, 255, 0.05); + border-color: rgba(0, 255, 255, 0.3); + } + + .ant-alert-message { + color: var(--text-main-color); + } + + .custom-checkbox-group .ant-checkbox-checked .ant-checkbox-inner { + background-color: var(--primary-color); + border-color: var(--primary-color); + } + + .custom-checkbox-group.blacklist-mode-active .ant-checkbox-checked .ant-checkbox-inner{ + border-color: var(--error-color); + background-color: var(--error-color); + } .blacklist-mode-active .ant-checkbox .ant-checkbox-inner::after { - content: "X"; /* Replace checkmark with X */ - background-color:red; + content: "X"; + background-color: var(--error-color); font-weight: bold; - color: white; /* Example color for the X */ + color: white; position: absolute; - top: 50%; + top: 50%; left: 50%; transform: translate(-50%, -50%); border: none; @@ -240,24 +330,27 @@ export default createGlobalStyle` width: 100%; height: 100%; text-align: center; -} - .custom-checkbox-group .blacklist-mode-active .ant-checkbox-checked .ant-checkbox-inner{ - background-color: red; - border-color:red; - - } + } + + .custom-checkbox-group .blacklist-mode-active .ant-checkbox-checked .ant-checkbox-inner{ + background-color: var(--error-color); + border-color: var(--error-color); + } .custom-checkbox-group .ant-checkbox-group-item span label { font-size: .95rem; } + .ant-checkbox-disabled .ant-checkbox-inner { - background-color:gray; - opacity:.75; + background-color: rgba(255, 255, 255, 0.1); + opacity: .5; } - .antcheckbox-disabled{ - opacity:.75; + + .antcheckbox-disabled { + opacity: .5; } - .checkboxHeader{ + + .checkboxHeader { padding: 0rem 0 .5rem 0; } @@ -268,36 +361,38 @@ export default createGlobalStyle` column-gap: 1rem; row-gap: 1.6rem; } - .grid-mobile-checkbox-group{ - display: grid; - width:100%; - grid-template-columns: repeat(auto-fill, minmax(7.3rem, 1fr)); - gap: 1.2rem; + .grid-mobile-checkbox-group { + display: grid; + width: 100%; + grid-template-columns: repeat(auto-fill, minmax(7.3rem, 1fr)); + gap: 1.2rem; } - .checkbox-container{ + + .checkbox-container { display: flex; - align-items: center; - } - .checkbox-container{ + align-items: center; white-space: nowrap; } - .dynamic-group{ + + .dynamic-group { padding-top: 1rem; padding-bottom: 0rem; - } + } + .grid-checkbox-group.large-label { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } - .switch-container{ + + .switch-container { padding-bottom: 1rem; } - .w-full{ - width:100%; + .w-full { + width: 100%; } - .flex-col{ + .flex-col { display: flex; flex-direction: column; } @@ -306,15 +401,19 @@ export default createGlobalStyle` justify-content: center; padding-top: 10px; } - .custom-dropdown .ant-select-arrow{ - color: var(--text-nft-light-color) - } + + .custom-dropdown .ant-select-arrow { + color: var(--text-nft-light-color); + } + .custom-tooltip-class .ant-tooltip-content .ant-tooltip-inner { - background-color: rgba(0, 0, 0, 1); + background-color: rgba(0, 0, 0, 0.9); + border: 1px solid rgba(0, 255, 255, 0.2); } - @media only screen and ${media.xs} { - .ant-menu-inline-collapsed-tooltip{ - display: none !important; + + @media only screen and ${media.xs} { + .ant-menu-inline-collapsed-tooltip{ + display: none !important; + } } -} -`; +`; \ No newline at end of file diff --git a/src/styles/liquid-glass.css b/src/styles/liquid-glass.css new file mode 100644 index 00000000..03347190 --- /dev/null +++ b/src/styles/liquid-glass.css @@ -0,0 +1,50 @@ +/* Empty State Styling */ +.liquid-empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 40px 20px; + color: var(--liquid-cyan); + text-align: center; + gap: 1rem; +} + +.liquid-empty-state .liquid-icon { + font-size: 3rem; + opacity: 0.6; + animation: pulse 2s ease-in-out infinite; +} + +/* Transaction List Container */ +.liquid-transactions-list { + max-height: 400px; + overflow-y: auto; + padding: 0.5rem; +} + +.liquid-transactions-list::-webkit-scrollbar { + width: 6px; +} + +.liquid-transactions-list::-webkit-scrollbar-track { + background: rgba(0, 255, 255, 0.05); + border-radius: 3px; +} + +.liquid-transactions-list::-webkit-scrollbar-thumb { + background: var(--liquid-cyan); + border-radius: 3px; +} + +/* Button Text Effects */ +.liquid-button-text { + transition: all 0.3s ease !important; + font-weight: 600 !important; +} + +.liquid-button-text:hover { + color: var(--liquid-turquoise) !important; + text-shadow: 0 0 8px rgba(0, 255, 255, 0.4) !important; + transform: scale(1.02) !important; +} \ No newline at end of file diff --git a/src/styles/themes/liquidBlue/liquidBlueTheme.ts b/src/styles/themes/liquidBlue/liquidBlueTheme.ts new file mode 100644 index 00000000..7ca5aeb5 --- /dev/null +++ b/src/styles/themes/liquidBlue/liquidBlueTheme.ts @@ -0,0 +1,130 @@ +import { shadeColor } from '@app/utils/utils'; +import { graphic } from 'echarts'; +import { BASE_COLORS } from '../constants'; +import { ITheme } from '../types'; + +// Liquid Blue Theme - Futuristic AI Interface inspired by Tony Stark/Jarvis +const chartColors = { + chartTooltipLabel: '#00FFFF', + chartAxisLabel: '#ffffff', + chartColor1: '#00FFFF', // Electric cyan + chartColor1Tint: '#00DDFF', + chartColor2: '#00FFAA', // Neon turquoise + chartColor2Tint: '#00FF88', + chartColor3: '#14B8A6', // Teal + chartColor3Tint: '#06B6D4', + chartColor4: '#5EEAD4', // Light turquoise + chartColor4Tint: '#99F6E4', + chartColor5: '#00DDFF', // Bright teal + chartColor5Tint: '#67E8F9', + chartPrimaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(0, 255, 255, 0.35)', + }, + { + offset: 1, + color: 'rgba(0, 255, 255, 0)', + }, + ]), + chartSecondaryGradient: new graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(0, 255, 170, 0.35)', + }, + { + offset: 1, + color: 'rgba(0, 255, 170, 0)', + }, + ]), + chartSecondaryGradientSpecular: new graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(255, 255, 255, 0)', + }, + { + offset: 1, + color: 'rgba(0, 255, 255, 0.5)', + }, + ]), +}; + +export const liquidBlueTheme: ITheme = { + // Primary colors - Bright neon cyan/turquoise + primary: '#00FFFF', // Electric cyan + primary1: '#00FFAA', // Neon turquoise + primaryGradient: 'linear-gradient(135deg, #00FFFF 0%, #00FFAA 100%)', + light: '#5EEAD4', + secondary: '#00DDFF', // Bright teal + error: '#EF4444', // Red for errors + warning: '#F59E0B', // Amber warnings + success: '#06B6D4', // Cyan success + + // Backgrounds with turquoise/teal tint + background: 'rgba(20, 184, 166, 0.08)', + secondaryBackground: 'rgba(94, 234, 212, 0.12)', + secondaryBackgroundSelected: 'rgba(153, 246, 228, 0.16)', + additionalBackground: 'rgba(20, 184, 166, 0.1)', + collapseBackground: 'rgba(20, 184, 166, 0.08)', + timelineBackground: 'rgba(0, 255, 255, 0.05)', + siderBackground: 'rgba(0, 255, 255, 0.06)', + spinnerBase: '#00FFFF', + scroll: 'rgba(0, 255, 255, 0.3)', + + // Borders with turquoise glow + border: 'rgba(20, 184, 166, 0.15)', + borderNft: 'rgba(0, 255, 255, 0.2)', + + // Text colors - keep white for visibility + textMain: 'rgba(255, 255, 255, 0.95)', + textLight: 'rgba(255, 255, 255, 0.9)', + textSuperLight: 'rgba(255, 255, 255, 0.8)', + textSecondary: 'rgba(255, 255, 255, 0.85)', + textDark: 'rgba(255, 255, 255, 0.7)', + textNftLight: 'rgba(255, 255, 255, 0.75)', + textSiderPrimary: '#00FFFF', + textSiderSecondary: 'rgba(255, 255, 255, 0.75)', + subText: 'rgba(255, 255, 255, 0.7)', + + // Shadows with cyan glow + shadow: 'rgba(0, 255, 255, 0.1)', + boxShadow: '0 0 20px rgba(0, 255, 255, 0.15)', + boxShadowHover: '0 0 30px rgba(0, 255, 255, 0.25)', + boxShadowNft: '0px 16px 24px rgba(0, 255, 255, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.04)', + boxShadowNftSecondary: '0px 10px 20px rgba(0, 255, 255, 0.08), 0px 2px 6px rgba(0, 0, 0, 0.04)', + + // Dashboard specific + dashboardMapBackground: 'rgba(20, 184, 166, 0.1)', + dashboardMapCircleColor: '#00FFFF', + dashboardMapControlDisabledBackground: 'rgba(0, 255, 255, 0.2)', + + // Notifications with cyan tint + notificationSuccess: 'rgba(6, 182, 212, 0.1)', + notificationPrimary: 'rgba(0, 255, 255, 0.1)', + notificationWarning: 'rgba(245, 158, 11, 0.1)', + notificationError: 'rgba(239, 68, 68, 0.1)', + + // Additional properties + heading: '#ffffff', + borderBase: 'rgba(0, 255, 255, 0.15)', + disable: 'rgba(255, 255, 255, 0.3)', + disabledBg: 'rgba(0, 255, 255, 0.05)', + layoutBodyBg: 'transparent', + layoutHeaderBg: 'rgba(0, 255, 255, 0.08)', + layoutSiderBg: 'rgba(0, 255, 255, 0.06)', + inputPlaceholder: 'rgba(255, 255, 255, 0.5)', + inputBg: 'rgba(0, 255, 255, 0.06)', + itemHoverBg: 'rgba(0, 255, 255, 0.08)', + backgroundColorBase: 'rgba(0, 255, 255, 0.05)', + avatarBg: 'rgba(0, 255, 255, 0.1)', + alertTextColor: '#ffffff', + breadcrumb: 'rgba(255, 255, 255, 0.7)', + icon: 'rgba(255, 255, 255, 0.75)', + iconHover: '#00FFFF', + ...chartColors, +}; + +export const antLiquidBlueTheme = { + successBg: 'rgba(6, 182, 212, 0.1)', + successBorder: 'rgba(6, 182, 212, 0.3)', +}; \ No newline at end of file diff --git a/src/styles/themes/themeVariables.ts b/src/styles/themes/themeVariables.ts index ee009e36..fc571d70 100644 --- a/src/styles/themes/themeVariables.ts +++ b/src/styles/themes/themeVariables.ts @@ -2,119 +2,112 @@ import { ThemeType } from '@app/interfaces/interfaces'; import { hexToRGB } from '@app/utils/utils'; import { css } from 'styled-components'; import { BASE_COLORS } from './constants'; -import { darkColorsTheme, antDarkColorsTheme } from './dark/darkTheme'; -import { lightColorsTheme } from './light/lightTheme'; +import { liquidBlueTheme, antLiquidBlueTheme } from './liquidBlue/liquidBlueTheme'; export const themeObject = { - light: lightColorsTheme, - dark: darkColorsTheme, + 'liquid-blue': liquidBlueTheme, }; export const antThemeObject = { - light: {}, - dark: antDarkColorsTheme, + 'liquid-blue': antLiquidBlueTheme, }; -const getThemeVariables = (theme: ThemeType) => css` - color-scheme: ${theme}; - --primary-color: ${themeObject[theme].primary}; - --primary1-color: ${themeObject[theme].primary1}; - --primary-gradient-color: ${themeObject[theme].primaryGradient}; +const getThemeVariables = () => css` + color-scheme: dark; + --primary-color: ${liquidBlueTheme.primary}; + --primary1-color: ${liquidBlueTheme.primary1}; + --primary-gradient-color: ${liquidBlueTheme.primaryGradient}; --info-color: var(--primary-color); - --secondary-color: ${themeObject[theme].secondary}; - --error-color: ${themeObject[theme].error}; - --warning-color: ${themeObject[theme].warning}; - --success-color: ${themeObject[theme].success}; - --background-color: ${themeObject[theme].background}; - --secondary-background-color: ${themeObject[theme].secondaryBackground}; - --secondary-background-selected-color: ${themeObject[theme].secondaryBackgroundSelected}; - --additional-background-color: ${themeObject[theme].additionalBackground}; - --collapse-background-color: ${themeObject[theme].collapseBackground}; - --timeline-background-color: ${themeObject[theme].timelineBackground}; - --spinner-base-color: ${themeObject[theme].spinnerBase}; - --sider-background-color: ${themeObject[theme].siderBackground}; - --shadow-color: ${themeObject[theme].shadow}; - --border-color: ${themeObject[theme].border}; - --border-nft-color: ${themeObject[theme].borderNft}; - --scroll-color: ${themeObject[theme].scroll}; + --secondary-color: ${liquidBlueTheme.secondary}; + --error-color: ${liquidBlueTheme.error}; + --warning-color: ${liquidBlueTheme.warning}; + --success-color: ${liquidBlueTheme.success}; + --background-color: ${liquidBlueTheme.background}; + --secondary-background-color: ${liquidBlueTheme.secondaryBackground}; + --secondary-background-selected-color: ${liquidBlueTheme.secondaryBackgroundSelected}; + --additional-background-color: ${liquidBlueTheme.additionalBackground}; + --collapse-background-color: ${liquidBlueTheme.collapseBackground}; + --timeline-background-color: ${liquidBlueTheme.timelineBackground}; + --spinner-base-color: ${liquidBlueTheme.spinnerBase}; + --sider-background-color: ${liquidBlueTheme.siderBackground}; + --shadow-color: ${liquidBlueTheme.shadow}; + --border-color: ${liquidBlueTheme.border}; + --border-nft-color: ${liquidBlueTheme.borderNft}; + --scroll-color: ${liquidBlueTheme.scroll}; - --primary-rgb-color: ${hexToRGB(themeObject[theme].primary)}; - --info-rgb-color: ${hexToRGB(themeObject[theme].primary)}; - --secondary-rgb-color: ${hexToRGB(themeObject[theme].secondary)}; - --error-rgb-color: ${hexToRGB(themeObject[theme].error)}; - --warning-rgb-color: ${hexToRGB(themeObject[theme].warning)}; - --success-rgb-color: ${hexToRGB(themeObject[theme].success)}; - --background-rgb-color: ${hexToRGB(themeObject[theme].background)}; + --primary-rgb-color: 0, 255, 255; + --info-rgb-color: 0, 255, 255; + --secondary-rgb-color: 0, 221, 255; + --error-rgb-color: 239, 68, 68; + --warning-rgb-color: 245, 158, 11; + --success-rgb-color: 6, 182, 212; + --background-rgb-color: 20, 184, 166; - --text-main-color: ${themeObject[theme].textMain}; - --text-light-color: ${themeObject[theme].textLight}; - --text-superLight-color: ${themeObject[theme].textSuperLight}; - --text-secondary-color: ${themeObject[theme].textSecondary}; - --text-dark-color: ${themeObject[theme].textDark}; - --text-nft-light-color: ${themeObject[theme].textNftLight}; - --text-sider-primary-color: ${themeObject[theme].textSiderPrimary}; - --text-sider-secondary-color: ${themeObject[theme].textSiderSecondary}; - --subtext-color: ${themeObject[theme].subText}; + --text-main-color: ${liquidBlueTheme.textMain}; + --text-light-color: ${liquidBlueTheme.textLight}; + --text-superLight-color: ${liquidBlueTheme.textSuperLight}; + --text-secondary-color: ${liquidBlueTheme.textSecondary}; + --text-dark-color: ${liquidBlueTheme.textDark}; + --text-nft-light-color: ${liquidBlueTheme.textNftLight}; + --text-sider-primary-color: ${liquidBlueTheme.textSiderPrimary}; + --text-sider-secondary-color: ${liquidBlueTheme.textSiderSecondary}; + --subtext-color: ${liquidBlueTheme.subText}; - --dashboard-map-background-color: ${themeObject[theme].dashboardMapBackground}; - --dashboard-map-circle-color: ${themeObject[theme].dashboardMapCircleColor}; - --dashboard-map-control-disabled-background-color: ${themeObject[theme].dashboardMapControlDisabledBackground}; + --dashboard-map-background-color: ${liquidBlueTheme.dashboardMapBackground}; + --dashboard-map-circle-color: ${liquidBlueTheme.dashboardMapCircleColor}; + --dashboard-map-control-disabled-background-color: ${liquidBlueTheme.dashboardMapControlDisabledBackground}; - --chart-tooltip-label-color: ${themeObject[theme].chartTooltipLabel}; - --chart-color1: ${themeObject[theme].chartColor1}; - --chart-rgb-color1: ${hexToRGB(themeObject[theme].chartColor1)}; - --chart-color1-tint: ${themeObject[theme].chartColor1Tint}; - --chart-color2: ${themeObject[theme].chartColor2}; - --chart-color2-tint: ${themeObject[theme].chartColor2Tint}; - --chart-color3: ${themeObject[theme].chartColor3}; - --chart-color3-tint: ${themeObject[theme].chartColor3Tint}; - --chart-color4: ${themeObject[theme].chartColor4}; - --chart-color4-tint: ${themeObject[theme].chartColor4Tint}; - --chart-color5: ${themeObject[theme].chartColor5}; - --chart-rgb-color5: ${hexToRGB(themeObject[theme].chartColor5)}; - --chart-color5-tint: ${themeObject[theme].chartColor5Tint}; - --chart-axis-label-color: ${themeObject[theme].chartAxisLabel}; + --chart-tooltip-label-color: ${liquidBlueTheme.chartTooltipLabel}; + --chart-color1: ${liquidBlueTheme.chartColor1}; + --chart-rgb-color1: 0, 255, 255; + --chart-color1-tint: ${liquidBlueTheme.chartColor1Tint}; + --chart-color2: ${liquidBlueTheme.chartColor2}; + --chart-color2-tint: ${liquidBlueTheme.chartColor2Tint}; + --chart-color3: ${liquidBlueTheme.chartColor3}; + --chart-color3-tint: ${liquidBlueTheme.chartColor3Tint}; + --chart-color4: ${liquidBlueTheme.chartColor4}; + --chart-color4-tint: ${liquidBlueTheme.chartColor4Tint}; + --chart-color5: ${liquidBlueTheme.chartColor5}; + --chart-rgb-color5: 0, 221, 255; + --chart-color5-tint: ${liquidBlueTheme.chartColor5Tint}; + --chart-axis-label-color: ${liquidBlueTheme.chartAxisLabel}; - --notification-success-color: ${themeObject[theme].notificationSuccess}; - --notification-primary-color: ${themeObject[theme].notificationPrimary}; - --notification-warning-color: ${themeObject[theme].notificationWarning}; - --notification-error-color: ${themeObject[theme].notificationError}; + --notification-success-color: ${liquidBlueTheme.notificationSuccess}; + --notification-primary-color: ${liquidBlueTheme.notificationPrimary}; + --notification-warning-color: ${liquidBlueTheme.notificationWarning}; + --notification-error-color: ${liquidBlueTheme.notificationError}; - --icon-color: ${themeObject[theme].icon}; - --icon-hover-color: ${themeObject[theme].iconHover}; - --box-shadow: ${themeObject[theme].boxShadow}; - --box-shadow-hover: ${themeObject[theme].boxShadowHover}; - --box-shadow-nft-color: ${themeObject[theme].boxShadowNft}; - --box-shadow-nft-secondary-color: ${themeObject[theme].boxShadowNftSecondary}; + --icon-color: ${liquidBlueTheme.icon}; + --icon-hover-color: ${liquidBlueTheme.iconHover}; + --box-shadow: ${liquidBlueTheme.boxShadow}; + --box-shadow-hover: ${liquidBlueTheme.boxShadowHover}; + --box-shadow-nft-color: ${liquidBlueTheme.boxShadowNft}; + --box-shadow-nft-secondary-color: ${liquidBlueTheme.boxShadowNftSecondary}; - --heading-color: ${themeObject[theme].heading}; - --item-hover-bg: ${themeObject[theme].itemHoverBg}; - --background-base-color: ${themeObject[theme].backgroundColorBase}; - --border-base-color: ${themeObject[theme].borderBase}; - --disabled-color: ${themeObject[theme].disable}; - --disabled-bg-color: ${themeObject[theme].disabledBg}; - --layout-body-bg-color: ${themeObject[theme].layoutBodyBg}; - --layout-header-bg-color: ${themeObject[theme].layoutHeaderBg}; - --layout-sider-bg-color: ${themeObject[theme].layoutSiderBg}; - --input-placeholder-color: ${themeObject[theme].inputPlaceholder}; - --input-bg-color: ${themeObject[theme].inputBg}; - --avatar-bg: ${themeObject[theme].avatarBg}; - --alert-text-color: ${themeObject[theme].alertTextColor}; - --breadcrumb-color: ${themeObject[theme].breadcrumb}; + --heading-color: ${liquidBlueTheme.heading}; + --item-hover-bg: ${liquidBlueTheme.itemHoverBg}; + --background-base-color: ${liquidBlueTheme.backgroundColorBase}; + --border-base-color: ${liquidBlueTheme.borderBase}; + --disabled-color: ${liquidBlueTheme.disable}; + --disabled-bg-color: ${liquidBlueTheme.disabledBg}; + --layout-body-bg-color: ${liquidBlueTheme.layoutBodyBg}; + --layout-header-bg-color: ${liquidBlueTheme.layoutHeaderBg}; + --layout-sider-bg-color: ${liquidBlueTheme.layoutSiderBg}; + --input-placeholder-color: ${liquidBlueTheme.inputPlaceholder}; + --input-bg-color: ${liquidBlueTheme.inputBg}; + --avatar-bg: ${liquidBlueTheme.avatarBg}; + --alert-text-color: ${liquidBlueTheme.alertTextColor}; + --breadcrumb-color: ${liquidBlueTheme.breadcrumb}; `; -export const lightThemeVariables = css` - ${getThemeVariables('light')} -`; - -export const darkThemeVariables = css` - ${getThemeVariables('dark')} - --ant-success-color-deprecated-bg: ${antThemeObject['dark'].successBg} !important; - --ant-success-color-deprecated-border: ${antThemeObject['dark'].successBorder} !important; +export const liquidBlueThemeVariables = css` + ${getThemeVariables()} + --ant-success-color-deprecated-bg: ${antLiquidBlueTheme.successBg} !important; + --ant-success-color-deprecated-border: ${antLiquidBlueTheme.successBorder} !important; `; export const commonThemeVariables = css` - color-scheme: light dark; + color-scheme: dark; --white: ${BASE_COLORS.white}; --black: ${BASE_COLORS.black}; --green: ${BASE_COLORS.green}; @@ -131,4 +124,4 @@ export const commonThemeVariables = css` export const antOverrideCssVariables = css` --ant-primary-1: var(--primary1-color) !important; -`; +`; \ No newline at end of file From 6daca20b6b58562aabbb5cf4598e9919c64ef356 Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Wed, 3 Sep 2025 20:34:52 -0700 Subject: [PATCH 002/116] polish: comprehensive UI improvements and styling fixes - fix: remove internal boxes from search components (HeaderSearch, UserToolbar) - style: add liquid-glow-text effects for dashboard component titles - fix: remove background box behind header buttons in ProfileColumn - style: reposition header buttons (expand, notifications, settings) to far right - style: restore rounded corners to HeaderSearch component - clean: remove unwanted backgrounds and outlines throughout header area - polish: improve header button spacing and alignment --- index.css | 65 +++++++++- .../inputs/SearchInput/SearchInput.styles.ts | 115 ++++++++++++++++-- src/components/header/Header.styles.ts | 69 ++++++++++- .../header/layouts/DesktopHeader.tsx | 20 ++- 4 files changed, 242 insertions(+), 27 deletions(-) diff --git a/index.css b/index.css index b67352e5..907d5aaa 100644 --- a/index.css +++ b/index.css @@ -2368,13 +2368,72 @@ body:has(header:contains("Search")) .fixed.z-50.right-5 .bg-base-300 input { transform: translateY(-1px) !important; } -/* Style the UserToolbar search box for liquid glass theme */ -[data-theme="liquid-glass"] .fixed.z-50.right-5 .searchBox, -[data-theme="liquid-glass"] .fixed.z-50.right-5 input { +/* Remove any internal boxes or backgrounds from search inputs */ +.fixed.z-50.right-5 input, +.fixed.z-50.right-5 .searchBox, +.fixed.z-50.right-5 textarea, +.fixed.z-50.right-5 select { + /* Remove any internal pseudo-elements that might create boxes */ + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + box-shadow: none !important; + border: none !important; + outline: none !important; + /* Remove any padding that might create spacing for internal boxes */ + padding: 0 !important; + /* Remove any borders or spacing issues */ + margin: 0 !important; + /* Ensure the input itself is not creating the box effect */ + position: relative; +} + +/* Remove ALL background styling from UserToolbar search inputs - including focus states */ +.fixed.z-50.right-5 input, +.fixed.z-50.right-5 textarea, +.fixed.z-50.right-5 select, +.fixed.z-50.right-5 .searchBox input { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; +} + +/* Override ALL input focus states that might show background color */ +.fixed.z-50.right-5 input:focus, +.fixed.z-50.right-5 input:focus-visible, +.fixed.z-50.right-5 input:active, +.fixed.z-50.right-5 input:hover, +.fixed.z-50.right-5 textarea:focus, +.fixed.z-50.right-5 textarea:focus-visible, +.fixed.z-50.right-5 select:focus, +.fixed.z-50.right-5 select:focus-visible, +.fixed.z-50.right-5 .searchBox input:focus, +.fixed.z-50.right-5 .searchBox input:focus-visible { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + outline: none !important; + box-shadow: none !important; +} + +/* Style the UserToolbar search box for liquid glass theme - only apply to the container */ +[data-theme="liquid-glass"] .fixed.z-50.right-5 .searchBox { background: rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; + padding: 0.5rem 1rem !important; /* Restore appropriate padding */ +} + +/* Ensure the input itself inside the searchBox has no background */ +[data-theme="liquid-glass"] .fixed.z-50.right-5 .searchBox input { + background: transparent !important; + background-color: transparent !important; + border: none !important; + outline: none !important; + box-shadow: none !important; } /* Style the UserToolbar buttons (wallet, notifications) */ diff --git a/src/components/common/inputs/SearchInput/SearchInput.styles.ts b/src/components/common/inputs/SearchInput/SearchInput.styles.ts index 553c9544..63412a99 100644 --- a/src/components/common/inputs/SearchInput/SearchInput.styles.ts +++ b/src/components/common/inputs/SearchInput/SearchInput.styles.ts @@ -17,35 +17,130 @@ export const SearchInput = styled(BaseInput.Search)` height: 4.36125rem; } - & input { - font-weight: 600; - background-color: var(--background-color); + /* Remove ALL internal backgrounds, borders, outlines, and boxes */ + && .ant-input-group, + && .ant-input-group-addon, + && .ant-input-group-addon .ant-btn, + && .ant-input-suffix, + && .ant-input-affix-wrapper { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + box-shadow: none !important; + border: none !important; + outline: none !important; + border-style: none !important; + border-width: 0 !important; + border-color: transparent !important; + /* Restore rounded corners for visual appeal */ @media only screen and ${media.md} { - font-size: 1rem; + border-radius: 3.125rem !important; } - &::placeholder { - font-weight: 500; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + } + + /* Remove any pseudo-elements that might create outlines */ + && .ant-input-group::before, + && .ant-input-group::after, + && .ant-input-affix-wrapper::before, + && .ant-input-affix-wrapper::after { + display: none !important; + } + + /* Override ALL input and wrapper backgrounds - restore rounded corners */ + &.ant-input-group-wrapper, + &.ant-input-affix-wrapper, + &.ant-input-affix-wrapper-focused { + background: transparent !important; + border: none !important; + box-shadow: none !important; + + @media only screen and ${media.md} { + border-radius: 3.125rem !important; + padding: 0.5625rem 1.25rem !important; } } - .ant-input-group-addon { + /* Remove background from input group wrapper */ + && .ant-input-group-addon { min-width: 5.5rem; color: var(--primary-color); font-weight: ${FONT_WEIGHT.semibold}; font-size: ${FONT_SIZE.lg}; + background: transparent !important; + border: none !important; } - .ant-input-search-button { + /* Remove background from search button */ + && .ant-input-search-button { &.ant-btn .anticon { color: var(--primary-color); } width: 100%; - background-color: rgba(1, 80, 154, 0.05); - border: 1px solid var(--border-color); + background: transparent !important; + border: none !important; + box-shadow: none !important; color: var(--primary-color); } + + /* Remove background from main input - restore rounded corners */ + && input { + font-weight: 600; + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + box-shadow: none !important; + outline: none !important; + + /* Restore rounded corners */ + @media only screen and ${media.md} { + border-radius: 3.125rem !important; + font-size: 1rem; + } + + &::placeholder { + font-weight: 500; + } + } + + /* Remove background from wrapper state - maintain rounded corners */ + && .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover, + && .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-error):hover, + && .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper-focused, + && .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper-focused.ant-input-affix-wrapper-focused { + border: none !important; + box-shadow: none !important; + background: transparent !important; + outline: none !important; + border-style: none !important; + border-width: 0 !important; + + /* Maintain rounded appearance */ + @media only screen and ${media.md} { + border-radius: 3.125rem !important; + } + } + + /* Override Ant Design default classes complètement */ + && *[class*="ant-input-"] { + border: none !important; + outline: none !important; + box-shadow: none !important; + } + + /* Specifically target Ant Design input wrapper classes */ + && .ant-input-wrapper:has(.ant-input), + && .ant-input-wrapper input, + && .ant-input-affix-wrapper .ant-input[type="text"], + && .ant-input-affix-wrapper .ant-input { + border: none !important; + outline: none !important; + box-shadow: none !important; + background: transparent !important; + } `; export const Space = styled(BaseSpace)` diff --git a/src/components/header/Header.styles.ts b/src/components/header/Header.styles.ts index 12fd4e57..14fa6f05 100644 --- a/src/components/header/Header.styles.ts +++ b/src/components/header/Header.styles.ts @@ -9,6 +9,14 @@ export const HeaderActionWrapper = styled.div` cursor: pointer; position: relative; + /* Remove any potential background or box behind header buttons */ + background: transparent !important; + background-color: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + box-shadow: none !important; + border: none !important; + & > .ant-btn > span[role='img'], .ant-badge { font-size: 1.25rem; @@ -88,10 +96,36 @@ export const ProfileColumn = styled(BaseCol)` ${(props) => props?.$isTwoColumnsLayout && css` - background-color: var(--sider-background-color); - padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal}; + /* Remove background and padding that creates unwanted box behind buttons */ + background-color: transparent !important; + /* Remove padding to prevent spacing issues */ + padding: 0 !important; + /* Ensure the buttons are not affected */ + display: flex; + align-items: center; + justify-content: flex-end; /* Push buttons to the far right */ + width: 100%; `} + + /* Always prevent background in header column regardless of layout */ + background-color: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + /* Ensure full width and right alignment */ + width: 100% !important; + display: flex !important; + justify-content: flex-end !important; } + + /* Additional override for all screen sizes - remove any possible background */ + background: transparent !important; + background-color: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + box-shadow: none !important; + border: none !important; + /* Ensure right alignment */ + margin-left: auto !important; `; export const GHButton = styled(GitHubButton)` @@ -122,3 +156,34 @@ export const MenuItem = styled.div` color: #333; } `; + +/* Global header background removal overrides */ +export const HeaderBackgroundOverride = ` + /* Override any background styling in the header area */ + .ant-layout-header, + [class*="layout-header"], + [class*="ant-layout-header"], + .header-area, + .header-wrapper, + .header-container, + .header-buttons, + .header-controls, + .header-actions, + .flex.items-center.justify-between[class*="text-white"], + [class*="flex"][class*="items-center"][class*="justify-end"] { + background: transparent !important; + background-color: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + box-shadow: none !important; + border: none !important; + } + + /* Ensure header section containers have no background */ + section:has(.ant-layout-header), + div:has(.ant-layout-header), + .relative:has([class*="justify-end"]) { + background: transparent !important; + background-color: transparent !important; + } +`; diff --git a/src/components/header/layouts/DesktopHeader.tsx b/src/components/header/layouts/DesktopHeader.tsx index ec799bc1..ad35ddfc 100644 --- a/src/components/header/layouts/DesktopHeader.tsx +++ b/src/components/header/layouts/DesktopHeader.tsx @@ -36,21 +36,17 @@ export const DesktopHeader: React.FC = ({ isTwoColumnsLayout {leftSide} - + - - - - + + - - - + + + - - - - + + From 066461bcaebf72880f8953091f03e7b581470d9c Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Wed, 3 Sep 2025 21:31:54 -0700 Subject: [PATCH 003/116] feat: apply liquid blue dashboard background to relay settings page --- index.css | 235 ++++++++++++++++++ .../inputs/SearchInput/SearchInput.styles.ts | 48 +++- .../NetworkSection/NetworkSection.tsx | 6 +- .../CollapsibleSection.styles.ts | 68 ++++- .../shared/SectionCard/SectionCard.styles.ts | 49 +++- src/pages/RelaySettingsPage.tsx | 5 +- 6 files changed, 397 insertions(+), 14 deletions(-) diff --git a/index.css b/index.css index 907d5aaa..b51af631 100644 --- a/index.css +++ b/index.css @@ -496,6 +496,47 @@ body:has(header:contains("Search")) .fixed.z-50.right-5 .bg-base-300 input { color: rgba(255, 255, 255, 0.95); } +/* LIQUID BLUE BACKGROUND ANIMATIONS - MATCHING DASHBOARD */ +@keyframes liquidBackground { + 0%, 100% { + opacity: 0.6; + transform: scale(1) rotate(0deg); + } + 25% { + opacity: 0.8; + transform: scale(1.1) rotate(90deg); + } + 50% { + opacity: 1; + transform: scale(1.2) rotate(180deg); + } + 75% { + opacity: 0.8; + transform: scale(1.1) rotate(270deg); + } +} + +@keyframes liquidFlow { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + /* Liquid Blue Futuristic Background - Neon Turquoise */ [data-theme="liquid-blue"] html { background: linear-gradient(135deg, @@ -1862,6 +1903,114 @@ body:has(header:contains("Search")) .fixed.z-50.right-5 .bg-base-300 input { } +/* ============================================= */ +/* RELAY SETTINGS - LIQUID GLASS THEME APPLICATION */ +/* ============================================= */ + +/* Apply liquid glass theme to all relay settings buttons */ +[data-theme="liquid-glass"] .relay-settings-button, +[data-theme="liquid-glass"] button.btn, +[data-theme="liquid-glass"] .ant-btn { + background: rgba(255, 255, 255, 0.08) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border: 1px solid rgba(255, 255, 255, 0.15) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + + &:hover { + background: rgba(255, 255, 255, 0.12) !important; + border-color: rgba(255, 255, 255, 0.2) !important; + transform: translateY(-1px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); + } +} + +/* Liquid Glass Theme - Switch/Toggle Components in Relay Settings */ +[data-theme="liquid-glass"] .ant-switch, +[data-theme="liquid-glass"] .ant-switch-checked { + background: rgba(138, 43, 226, 0.2) !important; /* Purple tint */ + + &.ant-switch-checked { + background: linear-gradient(135deg, rgba(138, 43, 226, 0.6), rgba(33, 150, 243, 0.5)) !important; + box-shadow: 0 0 8px rgba(138, 43, 226, 0.4); + } +} + +/* Liquid Glass Theme - Input fields and selects in relay settings */ +[data-theme="liquid-glass"] .ant-input, +[data-theme="liquid-glass"] .ant-select-selector, +[data-theme="liquid-glass"] .ant-select-selection-item, +[data-theme="liquid-glass"] textarea.ant-input { + background: rgba(255, 255, 255, 0.06) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + color: rgba(255, 255, 255, 0.95) !important; + + &:hover { + background: rgba(255, 255, 255, 0.08) !important; + border-color: rgba(255, 255, 255, 0.15) !important; + } + + &:focus, + &:focus-visible { + background: rgba(255, 255, 255, 0.12) !important; + border-color: rgba(255, 255, 255, 0.2) !important; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important; + outline: none !important; + } +} + +/* Liquid Glass Theme - Dropdown/Select items in relay settings */ +[data-theme="liquid-glass"] .ant-select-dropdown, +[data-theme="liquid-glass"] .ant-dropdown-content { + background: rgba(255, 255, 255, 0.08) !important; + backdrop-filter: blur(16px) !important; + -webkit-backdrop-filter: blur(16px) !important; + border: 1px solid rgba(255, 255, 255, 0.15) !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); +} + +[data-theme="liquid-glass"] .ant-select-dropdown .ant-select-item, +[data-theme="liquid-glass"] .ant-dropdown-menu-item { + color: rgba(255, 255, 255, 0.9) !important; + + &:hover { + background: rgba(255, 255, 255, 0.1) !important; + } + + &.ant-select-item-option-selected, + &.ant-select-item-option-active { + background: rgba(138, 43, 226, 0.2) !important; + color: white !important; + } +} + +/* Liquid Glass Theme - Warning/Error elements in relay settings */ +[data-theme="liquid-glass"] .warning-container, +[data-theme="liquid-glass"] .error-message { + background: rgba(255, 77, 79, 0.05) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + border: 1px solid rgba(255, 77, 79, 0.15) !important; + border-radius: 8px; + color: rgba(255, 77, 79, 0.9) !important; +} + +/* Liquid Glass Theme - Labels and text in relay settings */ +[data-theme="liquid-glass"] .relay-settings-label, +[data-theme="liquid-glass"] .setting-description, +[data-theme="liquid-glass"] h4, +[data-theme="liquid-glass"] p { + color: rgba(255, 255, 255, 0.9) !important; +} + +[data-theme="liquid-glass"] .setting-description, +[data-theme="liquid-glass"] p { + color: rgba(255, 255, 255, 0.75) !important; +} + /* ============================================= */ /* LIQUID BLUE - COMPONENT-BASED STYLING */ /* ============================================= */ @@ -3619,6 +3768,92 @@ body:has(header:contains("Search")) .fixed.z-50.right-5 .bg-base-300 input { /* ============================================= */ /* Sleek professional pulse animation for both themes */ +/* ============================================= */ +/* RELAY SETTINGS PAGE - LIQUID BLUE BACKDROP */ +/* ============================================= */ + +/* Apply Liquid Blue gradient to Relay Settings page - MATCHING DASHBOARD STYLE */ +[class*="relay-settings"], +[class*="RelaySettings"], +[data-*="relay-settings"], +[data-*="relaysettings"], +.h-screen.w-full.flex.relative:has(.bg-base-100.overflow-y-auto), +.h-screen.w-full.flex:has(.bg-base-100.overflow-y-auto) { + /* Match the relay dashboard background pattern - start with dark base */ + background: #000000 !important; + min-height: 100vh; + position: relative; + overflow: hidden; + + /* Multi-layer liquid blue gradient background - MATCHING DASHBOARD */ + &::before { + content: ''; + position: fixed; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: + radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.15) 0%, transparent 40%), + radial-gradient(circle at 80% 20%, rgba(0, 255, 170, 0.12) 0%, transparent 45%), + radial-gradient(circle at 60% 80%, rgba(20, 184, 166, 0.12) 0%, transparent 45%), + radial-gradient(circle at 40% 40%, rgba(0, 221, 255, 0.08) 0%, transparent 50%); + pointer-events: none; + z-index: 0; + animation: liquidBackground 30s ease infinite, rotate 60s linear infinite; + } + + /* Additional animated gradient layer - MATCHING DASHBOARD */ + &::after { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, + rgba(0, 255, 255, 0.03) 0%, + rgba(0, 255, 170, 0.03) 25%, + rgba(20, 184, 166, 0.03) 50%, + rgba(0, 221, 255, 0.03) 75%, + rgba(0, 255, 255, 0.03) 100%); + background-size: 400% 400%; + animation: liquidFlow 20s ease infinite; + pointer-events: none; + z-index: 0; + } + + /* Ensure content is above background layers */ + > * { + position: relative; + z-index: 1; + } + + color: rgba(255, 255, 255, 0.95); +} + +/* Make all relay settings content areas transparent to show the gradient */ +[class*="relay-settings"] .bg-base-100, +[class*="RelaySettings"] .bg-base-100, +[data-*="relay-settings"] .bg-base-100, +[data-*="relaysettings"] .bg-base-100, +.h-screen.w-full.flex.relative .bg-base-100.overflow-y-auto, +.h-screen.w-full.flex .bg-base-100.overflow-y-auto { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +/* Ensure glass components still look great against the gradient */ +[class*="relay-settings"] [data-theme*="liquid"], +[class*="RelaySettings"] [data-theme*="liquid"], +[data-*="relay-settings"] [data-theme*="liquid"], +[data-*="relaysettings"] [data-theme*="liquid"] { + background: transparent !important; +} + +/* The existing relay settings theme overrides are already comprehensive */ + @keyframes sleekPulse { 0%, 60%, 100% { opacity: 0.4; diff --git a/src/components/common/inputs/SearchInput/SearchInput.styles.ts b/src/components/common/inputs/SearchInput/SearchInput.styles.ts index 63412a99..81dd71e5 100644 --- a/src/components/common/inputs/SearchInput/SearchInput.styles.ts +++ b/src/components/common/inputs/SearchInput/SearchInput.styles.ts @@ -4,8 +4,31 @@ import { BaseInput } from '../BaseInput/BaseInput'; import { BaseSpace } from '../../BaseSpace/BaseSpace'; export const SearchInput = styled(BaseInput.Search)` + /* LIQUID BLUE THEME ROUNDED GLASS CONTAINER - VISIBLE AND PROMINENT */ + background: rgba(0, 255, 255, 0.10) !important; + backdrop-filter: blur(16px) !important; + -webkit-backdrop-filter: blur(16px) !important; + border: 1.5px solid rgba(0, 255, 255, 0.25) !important; + border-radius: 3.125rem !important; + padding: 0.5rem !important; + /* Ensure visibility */ + box-shadow: 0 4px 12px rgba(0, 255, 255, 0.1) !important; + + /* Mobile adjustments */ + @media only screen and (max-width: ${media.md}) { + border-radius: 2.5rem !important; + } + + /* Desktop specific settings */ + @media only screen and ${media.md} { + padding: 0.75rem !important; + border-radius: 3.125rem !important; + } + + /* Liquid Blue Theme - Search prefix icon */ & .ant-input-prefix { margin: 0.5rem; + color: #00DDFF !important; /* Bright neon teal for search icon */ } & .ant-input-search-button { @@ -50,13 +73,15 @@ export const SearchInput = styled(BaseInput.Search)` display: none !important; } - /* Override ALL input and wrapper backgrounds - restore rounded corners */ + /* ALL INTERACTION STATES - NO INTERNAL HIGHLIGHTING BOX */ &.ant-input-group-wrapper, &.ant-input-affix-wrapper, &.ant-input-affix-wrapper-focused { background: transparent !important; + background-color: transparent !important; border: none !important; box-shadow: none !important; + outline: none !important; @media only screen and ${media.md} { border-radius: 3.125rem !important; @@ -64,26 +89,31 @@ export const SearchInput = styled(BaseInput.Search)` } } - /* Remove background from input group wrapper */ + /* Liquid Blue Theme - Input group wrapper - NO internal highlighting */ && .ant-input-group-addon { min-width: 5.5rem; - color: var(--primary-color); + color: #00FFFF !important; /* Electric cyan */ font-weight: ${FONT_WEIGHT.semibold}; font-size: ${FONT_SIZE.lg}; background: transparent !important; + background-color: transparent !important; border: none !important; + box-shadow: none !important; + outline: none !important; } - /* Remove background from search button */ + /* Liquid Blue Theme - Search button with electric cyan */ && .ant-input-search-button { &.ant-btn .anticon { - color: var(--primary-color); + color: #00FFFF !important; /* Electric cyan */ } width: 100%; background: transparent !important; + background-color: transparent !important; border: none !important; box-shadow: none !important; - color: var(--primary-color); + outline: none !important; + color: #00FFFF !important; /* Electric cyan */ } /* Remove background from main input - restore rounded corners */ @@ -106,19 +136,21 @@ export const SearchInput = styled(BaseInput.Search)` } } - /* Remove background from wrapper state - maintain rounded corners */ + /* ALL HOVER AND FOCUS STATES - COMPLETELY CLEAN, NO INTERNAL HIGHLIGHT BOXES */ && .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover, && .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-error):hover, && .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper-focused, && .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper-focused.ant-input-affix-wrapper-focused { + /* ABSOLUTELY NO internal highlighting or boxes */ border: none !important; box-shadow: none !important; background: transparent !important; + background-color: transparent !important; outline: none !important; border-style: none !important; border-width: 0 !important; - /* Maintain rounded appearance */ + /* Maintain rounded appearance ONLY on container */ @media only screen and ${media.md} { border-radius: 3.125rem !important; } diff --git a/src/components/relay-settings/sections/NetworkSection/NetworkSection.tsx b/src/components/relay-settings/sections/NetworkSection/NetworkSection.tsx index c9982778..4f712e2e 100644 --- a/src/components/relay-settings/sections/NetworkSection/NetworkSection.tsx +++ b/src/components/relay-settings/sections/NetworkSection/NetworkSection.tsx @@ -29,7 +29,11 @@ export const NetworkSection: React.FC = ({ onChange={onProtocolsChange} /> -
+
{ const { t } = useTranslation(); @@ -216,10 +217,10 @@ const RelaySettingsPage: React.FC = () => { }; return ( - <> + {t('common.customizeRelaySettings')} {isDesktop ? : } - + ); }; From 4e81d0cebb58b94e317b3ed0b50ce79ebc45baba Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Wed, 3 Sep 2025 21:39:42 -0700 Subject: [PATCH 004/116] feat: apply liquid blue dashboard background to relay settings and advanced settings pages --- src/components/settings/SettingsPage.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx index 9e8ebd04..43308955 100644 --- a/src/components/settings/SettingsPage.tsx +++ b/src/components/settings/SettingsPage.tsx @@ -18,6 +18,7 @@ import OllamaSettings from './OllamaSettings'; import WalletSettings from './WalletSettings'; import GeneralSettings from './GeneralSettings'; import RelayInfoSettings from './RelayInfoSettings'; +import { DashboardWrapper } from '@app/pages/DashboardPages/DashboardPage.styles'; const SettingsContainer = styled.div` width: 100%; @@ -209,13 +210,13 @@ const SettingsPage: React.FC = () => { }; return ( - <> + Advanced Settings {settingItems.map(item => ( - handleSectionClick(item)} > @@ -232,7 +233,7 @@ const SettingsPage: React.FC = () => { ))} - + ); }; From 71b2151d069701e0822f13066e72837adbc5fecf Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Wed, 3 Sep 2025 21:52:24 -0700 Subject: [PATCH 005/116] feat: apply liquid blue dashboard background to relay settings, advanced settings, and allowed users pages --- .../layouts/AllowedUsersLayout.tsx | 161 +++++++++--------- 1 file changed, 82 insertions(+), 79 deletions(-) diff --git a/src/components/allowed-users/layouts/AllowedUsersLayout.tsx b/src/components/allowed-users/layouts/AllowedUsersLayout.tsx index 76fdfc95..8faf72e2 100644 --- a/src/components/allowed-users/layouts/AllowedUsersLayout.tsx +++ b/src/components/allowed-users/layouts/AllowedUsersLayout.tsx @@ -9,6 +9,7 @@ import { NPubManagement } from '../components/NPubManagement/NPubManagement'; import { RelayOwnerConfig } from '../components/RelayOwnerConfig/RelayOwnerConfig'; import { AllowedUsersMode, MODE_CONFIGURATIONS, AllowedUsersSettings, DEFAULT_TIERS } from '@app/types/allowedUsers.types'; import { getRelayOwner } from '@app/api/allowedUsers.api'; +import { DashboardWrapper } from '@app/pages/DashboardPages/DashboardPage.styles'; import * as S from './AllowedUsersLayout.styles'; export const AllowedUsersLayout: React.FC = () => { @@ -147,100 +148,102 @@ export const AllowedUsersLayout: React.FC = () => { const showRelayOwnerConfig = currentMode === 'only-me'; return ( - - - H.O.R.N.E.T Allowed Users - Centralized user permission management - - - - - - - - - - - - - - - - {showRelayOwnerConfig && ( + + + + H.O.R.N.E.T Allowed Users + Centralized user permission management + + + - - + - )} - {showTiers && ( - - + - )} - {showNpubManagement && ( + {showRelayOwnerConfig && ( + + + + + + )} + + {showTiers && ( + + + + + + )} + + {showNpubManagement && ( + + + + + + )} + - - - + + + + + {hasChanges && ( + + You have unsaved changes + + )} + + - )} - - - - - - - {hasChanges && ( - - You have unsaved changes - - )} - - - - - + + + ); }; From dbd6fdea7ad4b336d1317e86f5715b0801091a8d Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Wed, 3 Sep 2025 22:07:55 -0700 Subject: [PATCH 006/116] feat: apply liquid blue dashboard background to all major pages - Added DashboardWrapper to Relay Settings, Advanced Settings, Allowed Users, Access Control, and Nostr Statistics pages --- .../blocked-pubkeys/BlockedPubkeys.tsx | 67 ++++++++++--------- src/pages/DataTablesPage.tsx | 5 +- 2 files changed, 38 insertions(+), 34 deletions(-) diff --git a/src/components/blocked-pubkeys/BlockedPubkeys.tsx b/src/components/blocked-pubkeys/BlockedPubkeys.tsx index 70ddbb2e..7bfb3cc2 100644 --- a/src/components/blocked-pubkeys/BlockedPubkeys.tsx +++ b/src/components/blocked-pubkeys/BlockedPubkeys.tsx @@ -9,6 +9,7 @@ import { BlockPubkeyForm } from './components/BlockPubkeyForm'; import { useModerationStats } from '@app/hooks/useModerationStats'; import { LockFilled } from '@ant-design/icons'; import styled from 'styled-components'; +import { DashboardWrapper } from '@app/pages/DashboardPages/DashboardPage.styles'; import * as S from './BlockedPubkeys.styles'; const { Title, Text } = Typography; @@ -49,41 +50,43 @@ export const BlockedPubkeys: React.FC = () => { }; return ( - - - -
-
- - Access Control <LockFilled /> - - - Control access to your relay and manage flagged pubkeys - + + + + +
+
+ + Access Control <LockFilled /> + + + Control access to your relay and manage flagged pubkeys + +
+ } onClick={handleRefresh} loading={loading || statsLoading}> + Refresh +
- } onClick={handleRefresh} loading={loading || statsLoading}> - Refresh - -
- {activeView === 'blocked' && } + {activeView === 'blocked' && } - - setActiveView('blocked')}> - Blocked Access - - setActiveView('flagged')}> - Flagged Access - - + + setActiveView('blocked')}> + Blocked Access + + setActiveView('flagged')}> + Flagged Access + + - {activeView === 'blocked' ? ( - - ) : ( - - )} - - - + {activeView === 'blocked' ? ( + + ) : ( + + )} + + + + ); }; diff --git a/src/pages/DataTablesPage.tsx b/src/pages/DataTablesPage.tsx index 692bfb8d..50fec694 100644 --- a/src/pages/DataTablesPage.tsx +++ b/src/pages/DataTablesPage.tsx @@ -8,6 +8,7 @@ import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles'; import { Balance } from '@app/components/relay-dashboard/Balance/Balance'; import { TotalEarning } from '@app/components/relay-dashboard/totalEarning/TotalEarning'; import { ActivityStory } from '@app/components/relay-dashboard/transactions/Transactions'; +import { DashboardWrapper } from '@app/pages/DashboardPages/DashboardPage.styles'; const DataTablesPage: React.FC = () => { const { t } = useTranslation(); const { isDesktop } = useResponsive(); @@ -34,7 +35,7 @@ const DataTablesPage: React.FC = () => { ); return ( - <> + {t('Nostr Statistics')} {isDesktop ? ( desktopLayout @@ -43,7 +44,7 @@ const DataTablesPage: React.FC = () => { )} - + ); }; From bf1864eb4992865578aeb526229d2aaffa9770db Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Wed, 3 Sep 2025 22:26:01 -0700 Subject: [PATCH 007/116] style: reduce spacing between collapsible sections on relay settings page - Reduced container padding and margins by 50% for tighter layout --- .../CollapsibleSection/CollapsibleSection.styles.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/relay-settings/shared/CollapsibleSection/CollapsibleSection.styles.ts b/src/components/relay-settings/shared/CollapsibleSection/CollapsibleSection.styles.ts index f3b7960e..7bffec34 100644 --- a/src/components/relay-settings/shared/CollapsibleSection/CollapsibleSection.styles.ts +++ b/src/components/relay-settings/shared/CollapsibleSection/CollapsibleSection.styles.ts @@ -6,8 +6,8 @@ import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants'; export const StyledCollapse = styled(Collapse)` /* Liquid Glass Theme Background */ - padding: 1rem 0; - margin: 0 0 1rem 0; + padding: 0.5rem 0; + margin: 0 0 0.5rem 0; background: transparent; border: none; @@ -63,13 +63,13 @@ export const StyledCollapse = styled(Collapse)` } .ant-collapse-content-box { - padding: 1rem 0 0 0; + padding: 0.75rem 0 0 0; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; - margin-top: 0.5rem; + margin-top: 0.25rem; } &.centered-header { From 22f10e1265771a7747178c2f3ec289cec8029bf5 Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Wed, 3 Sep 2025 23:34:07 -0700 Subject: [PATCH 008/116] feat: update Advanced Settings page to use CollapsibleSection component for consistent styling with Relay Settings page --- src/components/settings/SettingsPage.tsx | 265 +++--------------- .../layouts/AdvancedSettingsLayout.styles.ts | 2 + .../layouts/AdvancedSettingsLayout.tsx | 139 ++++----- 3 files changed, 103 insertions(+), 303 deletions(-) create mode 100644 src/components/settings/layouts/AdvancedSettingsLayout.styles.ts diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx index 43308955..651e5ee1 100644 --- a/src/components/settings/SettingsPage.tsx +++ b/src/components/settings/SettingsPage.tsx @@ -1,17 +1,7 @@ -import React, { useState, useEffect, useMemo } from 'react'; -import { useLocation, useNavigate } from 'react-router-dom'; +import React from 'react'; import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; -import styled from 'styled-components'; -import { - FilterOutlined, - PictureOutlined, - RobotOutlined, - InfoCircleOutlined, - WalletOutlined, - GlobalOutlined, - DownOutlined, - RightOutlined -} from '@ant-design/icons'; +import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; +import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; import ImageModerationSettings from './ImageModerationSettings'; import ContentFilterSettings from './ContentFilterSettings'; import OllamaSettings from './OllamaSettings'; @@ -19,220 +9,53 @@ import WalletSettings from './WalletSettings'; import GeneralSettings from './GeneralSettings'; import RelayInfoSettings from './RelayInfoSettings'; import { DashboardWrapper } from '@app/pages/DashboardPages/DashboardPage.styles'; - -const SettingsContainer = styled.div` - width: 100%; - max-height: calc(100vh - 150px); - overflow-y: auto; - padding-right: 16px; -`; - -const SettingSection = styled.div` - margin-bottom: 1px; - overflow: hidden; - background-color: transparent; -`; - -const SectionHeader = styled.div<{ $isActive: boolean }>` - display: flex; - align-items: center; - padding: 16px; - cursor: pointer; - background-color: rgba(0, 0, 0, 0.2); - transition: all 0.2s ease; - - &:hover { - background-color: rgba(0, 0, 0, 0.3); - } - - ${props => props.$isActive && ` - background-color: rgba(0, 0, 0, 0.3); - `} -`; - -const SectionIcon = styled.span` - margin-right: 12px; - font-size: 16px; - display: flex; - align-items: center; - color: #fff; -`; - -const SectionTitle = styled.span` - flex: 1; - font-size: 16px; - font-weight: 500; -`; - -const SectionContent = styled.div<{ $isVisible: boolean }>` - max-height: ${props => props.$isVisible ? '2000px' : '0'}; - opacity: ${props => props.$isVisible ? '1' : '0'}; - overflow: hidden; - transition: max-height 0.3s ease, opacity 0.2s ease; - padding: ${props => props.$isVisible ? '20px' : '0'}; - background-color: rgba(0, 0, 0, 0.15); - border-bottom: ${props => props.$isVisible ? '1px solid rgba(255, 255, 255, 0.05)' : 'none'}; -`; - -// Custom wrapper to hide the title and style components -const SettingsWrapper = styled.div` - .ant-card-head { - display: none; - } - - .ant-card { - background-color: transparent; - border: none; - box-shadow: none; - } - - .ant-card-body { - padding: 0 10px; - } - - .ant-alert { - background-color: rgba(0, 0, 0, 0.2); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 4px; - } - - /* Style for notes */ - p, div { - &[class*="note"], &:has(em:first-child:contains("Note")), &:contains("Note:") { - color: rgba(255, 255, 255, 0.8); - font-size: 0.9em; - margin-top: 1rem; - padding: 0.75rem; - background-color: rgba(0, 0, 0, 0.1); - border-left: 3px solid rgba(82, 196, 255, 0.8); - border-radius: 0 4px 4px 0; - - &::first-line { - color: rgba(82, 196, 255, 1); - } - - strong, em, b { - color: rgba(82, 196, 255, 1); - } - } - } - - .ant-form-item-label > label { - color: rgba(255, 255, 255, 0.85); - } - - .ant-input, .ant-input-number, .ant-select-selector { - background-color: var(--input-bg-color) !important; - } -`; - -interface SettingItem { - key: string; - path: string; - label: string; - icon: React.ReactNode; - component: React.ReactNode; -} +import { CollapsibleSection } from '@app/components/relay-settings/shared/CollapsibleSection/CollapsibleSection'; +import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles'; const SettingsPage: React.FC = () => { - const location = useLocation(); - const navigate = useNavigate(); - const [activeKey, setActiveKey] = useState(undefined); - - const settingItems: SettingItem[] = useMemo(() => [ - { - key: 'image_moderation', - path: '/settings/image-moderation', - label: 'Image Moderation', - icon: , - component: - }, - { - key: 'content_filter', - path: '/settings/content-filter', - label: 'Content Filter', - icon: , - component: - }, - { - key: 'ollama', - path: '/settings/ollama', - label: 'Ollama', - icon: , - component: - }, - { - key: 'relay_info', - path: '/settings/relay-info', - label: 'Relay Info', - icon: , - component: - }, - { - key: 'wallet', - path: '/settings/wallet', - label: 'Wallet', - icon: , - component: - }, - { - key: 'general', - path: '/settings/general', - label: 'General', - icon: , - component: - }, - ], []); - - // Set active key based on current path - useEffect(() => { - const path = location.pathname; - const item = settingItems.find(item => item.path === path); - - if (item) { - setActiveKey(item.key); - } else if (path === '/settings' || path === '/settings/') { - // Don't navigate to any settings by default - setActiveKey(undefined); - } - }, [location.pathname, navigate, settingItems]); - - const handleSectionClick = (item: SettingItem) => { - if (activeKey === item.key) { - // If clicking the active section, close it - setActiveKey(undefined); - navigate('/settings'); - } else { - // Otherwise, open the clicked section - setActiveKey(item.key); - navigate(item.path); - } - }; - return ( Advanced Settings - - {settingItems.map(item => ( - - handleSectionClick(item)} - > - {item.icon} - {item.label} - {activeKey === item.key ? : } - - - - - {item.component} - - - - ))} - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/src/components/settings/layouts/AdvancedSettingsLayout.styles.ts b/src/components/settings/layouts/AdvancedSettingsLayout.styles.ts new file mode 100644 index 00000000..cfb3f26c --- /dev/null +++ b/src/components/settings/layouts/AdvancedSettingsLayout.styles.ts @@ -0,0 +1,2 @@ +// This file is no longer needed as we're using CollapsibleSection from relay-settings +// Keeping this file empty for backward compatibility in case other components import it \ No newline at end of file diff --git a/src/components/settings/layouts/AdvancedSettingsLayout.tsx b/src/components/settings/layouts/AdvancedSettingsLayout.tsx index 128d8fe6..fc583cb5 100644 --- a/src/components/settings/layouts/AdvancedSettingsLayout.tsx +++ b/src/components/settings/layouts/AdvancedSettingsLayout.tsx @@ -1,27 +1,16 @@ -import React, { useState, useEffect } from 'react'; -import { Collapse, Button, Space, Spin } from 'antd'; +import React, { useState } from 'react'; +import { Button, Space, Spin } from 'antd'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; -import styled from 'styled-components'; import GeneralSettingsPanel from '../panels/GeneralSettingsPanel'; import ImageModerationPanel from '../panels/ImageModerationPanel'; import ContentFilterPanel from '../panels/ContentFilterPanel'; import OllamaPanel from '../panels/OllamaPanel'; import WalletPanel from '../panels/WalletPanel'; import useGenericSettings from '@app/hooks/useGenericSettings'; - -const { Panel } = Collapse; - -const SettingsContainer = styled.div` - margin-bottom: 2rem; -`; - -const SaveButtonContainer = styled.div` - margin-top: 2rem; - margin-bottom: 2rem; - display: flex; - justify-content: center; -`; +import { CollapsibleSection } from '@app/components/relay-settings/shared/CollapsibleSection/CollapsibleSection'; +import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles'; +import { DashboardWrapper } from '@app/pages/DashboardPages/DashboardPage.styles'; interface AdvancedSettingsLayoutProps { loading?: boolean; @@ -34,11 +23,10 @@ const AdvancedSettingsLayout: React.FC = ({ }) => { const [saveLoading, setSaveLoading] = useState(false); const [resetLoading, setResetLoading] = useState(false); - const [activeKeys, setActiveKeys] = useState(['general', 'image-moderation']); // Use the generic settings hook to handle saving all settings - const { - loading: hookLoading, + const { + loading: hookLoading, error: hookError, saveSettings, fetchSettings @@ -47,20 +35,6 @@ const AdvancedSettingsLayout: React.FC = ({ const loading = propLoading || hookLoading; const error = propError || (hookError ? hookError.toString() : null); - // Ensure image-moderation panel is expanded when needed - useEffect(() => { - // Check URL for any parameters indicating we should expand image moderation - const urlParams = new URLSearchParams(window.location.search); - if (urlParams.has('section') && urlParams.get('section') === 'image-moderation') { - if (!activeKeys.includes('image-moderation')) { - setActiveKeys([...activeKeys, 'image-moderation']); - } - } - - // Log for debugging - console.log('AdvancedSettingsLayout - Active panels:', activeKeys); - }, [activeKeys]); - const handleSave = async () => { console.log('Saving all settings...'); setSaveLoading(true); @@ -119,60 +93,61 @@ const AdvancedSettingsLayout: React.FC = ({ } return ( - - - - { - console.log('Collapse panels changed:', keys); - setActiveKeys(keys as string[]); - }} - > - + + + + + - - - + + + + + - - - + + + + + - - - + + + + + - - - + + + + + - - - - - - - - - - - - + + + +
+ + + + +
+ + + ); }; From d17ee8ae7220498f2cca200da48ec11e38d5421e Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Wed, 3 Sep 2025 23:52:26 -0700 Subject: [PATCH 009/116] style: reduce spacing between collapsible sections on relay settings page - Reduced container padding and margins by 50% for tighter layout --- .../inputs/SearchInput/SearchInput.styles.ts | 61 ++++++++++--------- .../themes/liquidBlue/liquidBlueTheme.ts | 10 +-- 2 files changed, 36 insertions(+), 35 deletions(-) diff --git a/src/components/common/inputs/SearchInput/SearchInput.styles.ts b/src/components/common/inputs/SearchInput/SearchInput.styles.ts index 81dd71e5..23d1227e 100644 --- a/src/components/common/inputs/SearchInput/SearchInput.styles.ts +++ b/src/components/common/inputs/SearchInput/SearchInput.styles.ts @@ -4,40 +4,41 @@ import { BaseInput } from '../BaseInput/BaseInput'; import { BaseSpace } from '../../BaseSpace/BaseSpace'; export const SearchInput = styled(BaseInput.Search)` - /* LIQUID BLUE THEME ROUNDED GLASS CONTAINER - VISIBLE AND PROMINENT */ - background: rgba(0, 255, 255, 0.10) !important; - backdrop-filter: blur(16px) !important; - -webkit-backdrop-filter: blur(16px) !important; - border: 1.5px solid rgba(0, 255, 255, 0.25) !important; - border-radius: 3.125rem !important; - padding: 0.5rem !important; - /* Ensure visibility */ - box-shadow: 0 4px 12px rgba(0, 255, 255, 0.1) !important; + /* LIQUID BLUE THEME ROUNDED GLASS CONTAINER - MINIMAL SIZE */ + background: rgba(0, 255, 255, 0.03) !important; + backdrop-filter: blur(6px) !important; + -webkit-backdrop-filter: blur(6px) !important; + border: 1px solid rgba(0, 255, 255, 0.12) !important; + border-radius: 1.25rem !important; + padding: 0.125rem !important; + /* Very subtle shadow */ + box-shadow: 0 1px 4px rgba(0, 255, 255, 0.03) !important; /* Mobile adjustments */ @media only screen and (max-width: ${media.md}) { - border-radius: 2.5rem !important; + border-radius: 1rem !important; + padding: 0.1rem !important; } /* Desktop specific settings */ @media only screen and ${media.md} { - padding: 0.75rem !important; - border-radius: 3.125rem !important; + padding: 0.15rem !important; + border-radius: 1.25rem !important; } /* Liquid Blue Theme - Search prefix icon */ & .ant-input-prefix { - margin: 0.5rem; - color: #00DDFF !important; /* Bright neon teal for search icon */ + margin: 0.2rem; + color: #06B6D4 !important; /* Muted cyan for search icon */ } & .ant-input-search-button { - height: 3.54875rem; + height: 2.5rem; box-shadow: none; } &.ant-input-search-large .ant-input-search-button { - height: 4.36125rem; + height: 3rem; } /* Remove ALL internal backgrounds, borders, outlines, and boxes */ @@ -84,17 +85,17 @@ export const SearchInput = styled(BaseInput.Search)` outline: none !important; @media only screen and ${media.md} { - border-radius: 3.125rem !important; - padding: 0.5625rem 1.25rem !important; + border-radius: 1.25rem !important; + padding: 0.15rem 0.5rem !important; } } /* Liquid Blue Theme - Input group wrapper - NO internal highlighting */ && .ant-input-group-addon { - min-width: 5.5rem; - color: #00FFFF !important; /* Electric cyan */ - font-weight: ${FONT_WEIGHT.semibold}; - font-size: ${FONT_SIZE.lg}; + min-width: 4rem; + color: #06B6D4 !important; /* Muted cyan */ + font-weight: ${FONT_WEIGHT.medium}; + font-size: ${FONT_SIZE.md}; background: transparent !important; background-color: transparent !important; border: none !important; @@ -102,10 +103,10 @@ export const SearchInput = styled(BaseInput.Search)` outline: none !important; } - /* Liquid Blue Theme - Search button with electric cyan */ + /* Liquid Blue Theme - Search button with muted cyan */ && .ant-input-search-button { &.ant-btn .anticon { - color: #00FFFF !important; /* Electric cyan */ + color: #06B6D4 !important; /* Muted cyan */ } width: 100%; background: transparent !important; @@ -113,12 +114,12 @@ export const SearchInput = styled(BaseInput.Search)` border: none !important; box-shadow: none !important; outline: none !important; - color: #00FFFF !important; /* Electric cyan */ + color: #06B6D4 !important; /* Muted cyan */ } /* Remove background from main input - restore rounded corners */ && input { - font-weight: 600; + font-weight: 500; background: transparent !important; background-color: transparent !important; background-image: none !important; @@ -127,12 +128,12 @@ export const SearchInput = styled(BaseInput.Search)` /* Restore rounded corners */ @media only screen and ${media.md} { - border-radius: 3.125rem !important; - font-size: 1rem; + border-radius: 1.25rem !important; + font-size: 0.9rem; } &::placeholder { - font-weight: 500; + font-weight: 400; } } @@ -152,7 +153,7 @@ export const SearchInput = styled(BaseInput.Search)` /* Maintain rounded appearance ONLY on container */ @media only screen and ${media.md} { - border-radius: 3.125rem !important; + border-radius: 1.25rem !important; } } diff --git a/src/styles/themes/liquidBlue/liquidBlueTheme.ts b/src/styles/themes/liquidBlue/liquidBlueTheme.ts index 7ca5aeb5..c38a889d 100644 --- a/src/styles/themes/liquidBlue/liquidBlueTheme.ts +++ b/src/styles/themes/liquidBlue/liquidBlueTheme.ts @@ -50,12 +50,12 @@ const chartColors = { }; export const liquidBlueTheme: ITheme = { - // Primary colors - Bright neon cyan/turquoise - primary: '#00FFFF', // Electric cyan - primary1: '#00FFAA', // Neon turquoise - primaryGradient: 'linear-gradient(135deg, #00FFFF 0%, #00FFAA 100%)', + // Primary colors - Subdued cyan/turquoise + primary: '#06B6D4', // Muted cyan (less bright) + primary1: '#14B8A6', // Muted turquoise + primaryGradient: 'linear-gradient(135deg, #06B6D4 0%, #14B8A6 100%)', light: '#5EEAD4', - secondary: '#00DDFF', // Bright teal + secondary: '#0891B2', // Subdued teal error: '#EF4444', // Red for errors warning: '#F59E0B', // Amber warnings success: '#06B6D4', // Cyan success From 85eaf7735db7286611b46aa439279fd1f50bd169 Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Thu, 4 Sep 2025 00:28:51 -0700 Subject: [PATCH 010/116] style: apply liquid blue theme to Allowed Users page - Remove purple backgrounds and replace with transparent cyan glass effect --- .../PermissionsConfig.styles.ts | 26 ++++++--- .../PermissionsConfig/PermissionsConfig.tsx | 8 ++- .../RelayOwnerConfig/RelayOwnerConfig.tsx | 8 ++- .../components/TiersConfig/TiersConfig.tsx | 58 ++++++++++++------- .../layouts/AllowedUsersLayout.styles.ts | 36 ++++++++++-- 5 files changed, 97 insertions(+), 39 deletions(-) diff --git a/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.styles.ts b/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.styles.ts index 779e4eea..111ed19c 100644 --- a/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.styles.ts +++ b/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.styles.ts @@ -101,26 +101,36 @@ export const ForcedSelectWrapper = styled.div<{ $isForced: boolean }>` .ant-select { width: 100%; .ant-select-arrow{ - color: ${(props) => (!props.$isForced ? `var(--text-main-color)` : `var(--text-light-color)`)}; + color: ${(props) => (!props.$isForced ? `rgba(0, 255, 255, 0.7)` : `rgba(0, 255, 255, 0.4)`)}; } .ant-select-selector { - background-color: ${(props) => (props.$isForced ? '#1a1d35' : '#25284B')} !important; - border: ${(props) => (props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9')} !important; - color: ${(props) => (props.$isForced ? '#8c8c8c' : '#d9d9d9')} !important; + background-color: ${(props) => (props.$isForced ? 'rgba(0, 255, 255, 0.02)' : 'rgba(0, 255, 255, 0.04)')} !important; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: ${(props) => (props.$isForced ? '1px solid rgba(0, 255, 255, 0.1)' : '1px solid rgba(0, 255, 255, 0.2)')} !important; + color: ${(props) => (props.$isForced ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0.9)')} !important; + transition: all 0.3s ease; } .ant-select-selection-item { - color: ${(props) => (props.$isForced ? '#8c8c8c' : '#d9d9d9')} !important; + color: ${(props) => (props.$isForced ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0.9)')} !important; + } + + &:not(.ant-select-disabled):hover .ant-select-selector { + border-color: rgba(0, 255, 255, 0.4) !important; + box-shadow: 0 0 10px rgba(0, 255, 255, 0.2); } &.ant-select-disabled { .ant-select-selector { - background-color: ${(props) => (props.$isForced ? '#1a1d35' : '#25284B')} !important; - border: ${(props) => (props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9')} !important; + background-color: ${(props) => (props.$isForced ? 'rgba(0, 255, 255, 0.02)' : 'rgba(0, 255, 255, 0.04)')} !important; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: ${(props) => (props.$isForced ? '1px solid rgba(0, 255, 255, 0.1)' : '1px solid rgba(0, 255, 255, 0.2)')} !important; } .ant-select-selection-item { - color: ${(props) => (props.$isForced ? '#8c8c8c' : '#d9d9d9')} !important; + color: ${(props) => (props.$isForced ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0.9)')} !important; } } } diff --git a/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.tsx b/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.tsx index 708c2e7c..1ba51d11 100644 --- a/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.tsx +++ b/src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.tsx @@ -69,9 +69,11 @@ export const PermissionsConfig: React.FC = ({ description={modeConfig.description} type="info" showIcon - style={{ - backgroundColor: '#25284B', - border: '1px solid #d9d9d9', + style={{ + backgroundColor: 'rgba(0, 255, 255, 0.03)', + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + border: '1px solid rgba(0, 255, 255, 0.15)', color: '#d9d9d9' }} /> diff --git a/src/components/allowed-users/components/RelayOwnerConfig/RelayOwnerConfig.tsx b/src/components/allowed-users/components/RelayOwnerConfig/RelayOwnerConfig.tsx index 75bff3af..4c0f27dc 100644 --- a/src/components/allowed-users/components/RelayOwnerConfig/RelayOwnerConfig.tsx +++ b/src/components/allowed-users/components/RelayOwnerConfig/RelayOwnerConfig.tsx @@ -132,10 +132,12 @@ export const RelayOwnerConfig: React.FC = ({ description="In only-me mode, only the relay owner can write to this relay. Set your NPUB below to identify yourself as the owner." type="info" showIcon - style={{ + style={{ marginBottom: '1.5rem', - backgroundColor: '#25284B', - border: '1px solid #d9d9d9', + backgroundColor: 'rgba(0, 255, 255, 0.03)', + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + border: '1px solid rgba(0, 255, 255, 0.15)', color: '#d9d9d9' }} /> diff --git a/src/components/allowed-users/components/TiersConfig/TiersConfig.tsx b/src/components/allowed-users/components/TiersConfig/TiersConfig.tsx index de7c922a..c66aa467 100644 --- a/src/components/allowed-users/components/TiersConfig/TiersConfig.tsx +++ b/src/components/allowed-users/components/TiersConfig/TiersConfig.tsx @@ -193,10 +193,12 @@ export const TiersConfig: React.FC = ({ description="All tiers must have a price greater than 0. Free tiers are not allowed in subscription mode." type="warning" showIcon - style={{ + style={{ marginBottom: '1rem', - backgroundColor: '#25284B', - border: '1px solid #d9d9d9', + backgroundColor: 'rgba(0, 255, 255, 0.03)', + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + border: '1px solid rgba(0, 255, 255, 0.15)', color: '#d9d9d9' }} /> @@ -208,10 +210,12 @@ export const TiersConfig: React.FC = ({ description="Configure free tier storage limits. All tiers will be free (price = 0) in public mode." type="success" showIcon - style={{ + style={{ marginBottom: '1rem', - backgroundColor: '#25284B', - border: '1px solid #d9d9d9', + backgroundColor: 'rgba(0, 255, 255, 0.03)', + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + border: '1px solid rgba(0, 255, 255, 0.15)', color: '#d9d9d9' }} /> @@ -223,10 +227,12 @@ export const TiersConfig: React.FC = ({ description="Tiers can have any price. Users must be manually added to access lists." type="info" showIcon - style={{ + style={{ marginBottom: '1rem', - backgroundColor: '#25284B', - border: '1px solid #d9d9d9', + backgroundColor: 'rgba(0, 255, 255, 0.03)', + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + border: '1px solid rgba(0, 255, 255, 0.15)', color: '#d9d9d9' }} /> @@ -238,10 +244,12 @@ export const TiersConfig: React.FC = ({ description="Personal relay configuration. Only your npub can write to this relay." type="info" showIcon - style={{ + style={{ marginBottom: '1rem', - backgroundColor: '#25284B', - border: '1px solid #d9d9d9', + backgroundColor: 'rgba(0, 255, 255, 0.03)', + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + border: '1px solid rgba(0, 255, 255, 0.15)', color: '#d9d9d9' }} /> @@ -272,10 +280,12 @@ export const TiersConfig: React.FC = ({ description="Choose one tier that will be applied to all free users on your public relay." type="info" showIcon - style={{ + style={{ marginBottom: '1rem', - backgroundColor: '#25284B', - border: '1px solid #d9d9d9', + backgroundColor: 'rgba(0, 255, 255, 0.03)', + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + border: '1px solid rgba(0, 255, 255, 0.15)', color: '#d9d9d9' }} /> @@ -381,8 +391,10 @@ export const TiersConfig: React.FC = ({ showIcon style={{ marginTop: 16, - backgroundColor: '#25284B', - border: '1px solid #d9d9d9', + backgroundColor: 'rgba(0, 255, 255, 0.03)', + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + border: '1px solid rgba(0, 255, 255, 0.15)', color: '#d9d9d9' }} /> @@ -395,8 +407,10 @@ export const TiersConfig: React.FC = ({ showIcon style={{ marginTop: 16, - backgroundColor: '#25284B', - border: '1px solid #d9d9d9', + backgroundColor: 'rgba(0, 255, 255, 0.03)', + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + border: '1px solid rgba(0, 255, 255, 0.15)', color: '#d9d9d9' }} /> @@ -409,8 +423,10 @@ export const TiersConfig: React.FC = ({ showIcon style={{ marginTop: 16, - backgroundColor: '#25284B', - border: '1px solid #d9d9d9', + backgroundColor: 'rgba(0, 255, 255, 0.03)', + backdropFilter: 'blur(10px)', + WebkitBackdropFilter: 'blur(10px)', + border: '1px solid rgba(0, 255, 255, 0.15)', color: '#d9d9d9' }} /> diff --git a/src/components/allowed-users/layouts/AllowedUsersLayout.styles.ts b/src/components/allowed-users/layouts/AllowedUsersLayout.styles.ts index ae683fb0..beddc862 100644 --- a/src/components/allowed-users/layouts/AllowedUsersLayout.styles.ts +++ b/src/components/allowed-users/layouts/AllowedUsersLayout.styles.ts @@ -53,12 +53,21 @@ export const ErrorContainer = styled.div` export const SaveSection = styled.div` padding: 1.5rem; - background: var(--background-color-secondary); + background: rgba(0, 255, 255, 0.03); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); border-radius: 8px; - border: 1px solid var(--border-color-base); + border: 1px solid rgba(0, 255, 255, 0.15); + box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.1); display: flex; justify-content: center; align-items: center; + transition: all 0.3s ease; + + &:hover { + box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); + border-color: rgba(0, 255, 255, 0.4); + } `; export const ChangesIndicator = styled.span` @@ -67,7 +76,26 @@ export const ChangesIndicator = styled.span` font-style: italic; `; export const ContentCard = styled(Card)` - background: var(--secondary-background-color); - border-color: var(--border-base-color); + background: rgba(0, 255, 255, 0.03); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(0, 255, 255, 0.15); + box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.1); + border-radius: 8px; + transition: all 0.3s ease; + + &:hover { + box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); + border-color: rgba(0, 255, 255, 0.4); + transform: translateY(-2px); + } + + .ant-card-head { + background: transparent; + border-bottom: 1px solid rgba(0, 255, 255, 0.1); + } + .ant-card-body { + background: transparent; + } `; \ No newline at end of file From 7a07671181dd832f59797f9dd6e8783a03adada2 Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Thu, 4 Sep 2025 00:40:40 -0700 Subject: [PATCH 011/116] style: apply consistent blue theme to all mode selector buttons - Use uniform blue (#1890ff) for all relay modes --- .../ModeSelector/ModeSelector.styles.ts | 27 ++++++++++++++++--- .../components/ModeSelector/ModeSelector.tsx | 6 ++--- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/components/allowed-users/components/ModeSelector/ModeSelector.styles.ts b/src/components/allowed-users/components/ModeSelector/ModeSelector.styles.ts index f686bfea..889da69b 100644 --- a/src/components/allowed-users/components/ModeSelector/ModeSelector.styles.ts +++ b/src/components/allowed-users/components/ModeSelector/ModeSelector.styles.ts @@ -34,16 +34,27 @@ export const ModeButton = styled(Button)` align-items: center; justify-content: center; padding: 8px 16px; + background: ${({ $isActive }) => $isActive ? '' : 'rgba(0, 255, 255, 0.02)'}; + backdrop-filter: ${({ $isActive }) => $isActive ? 'none' : 'blur(10px)'}; + -webkit-backdrop-filter: ${({ $isActive }) => $isActive ? 'none' : 'blur(10px)'}; + border: ${({ $isActive }) => $isActive ? '' : '1px solid rgba(0, 255, 255, 0.15)'} !important; ${({ $isActive, $color }) => $isActive && ` background-color: ${$color} !important; border-color: ${$color} !important; - box-shadow: 0 4px 12px ${$color}33; + box-shadow: 0 4px 12px ${$color}33, 0 0 20px ${$color}22; `} &:hover:not(:disabled) { transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); + box-shadow: ${({ $isActive, $color }) => + $isActive + ? `0 6px 16px ${$color}44, 0 0 30px ${$color}33` + : '0 6px 16px rgba(0, 255, 255, 0.2), 0 0 20px rgba(0, 255, 255, 0.1)' + }; + border-color: ${({ $isActive, $color }) => + $isActive ? $color : 'rgba(0, 255, 255, 0.3)' + } !important; } ${media.md} { @@ -53,9 +64,17 @@ export const ModeButton = styled(Button)` export const ModeDescription = styled.div` padding: 1rem; - background: var(--background-color-secondary); + background: rgba(0, 255, 255, 0.03); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); border-radius: 8px; - border: 1px solid var(--border-color-base); + border: 1px solid rgba(0, 255, 255, 0.15); + transition: all 0.3s ease; + + &:hover { + border-color: rgba(0, 255, 255, 0.25); + box-shadow: 0 0 10px rgba(0, 255, 255, 0.1); + } `; export const DescriptionText = styled.p` diff --git a/src/components/allowed-users/components/ModeSelector/ModeSelector.tsx b/src/components/allowed-users/components/ModeSelector/ModeSelector.tsx index d16e6004..e1250846 100644 --- a/src/components/allowed-users/components/ModeSelector/ModeSelector.tsx +++ b/src/components/allowed-users/components/ModeSelector/ModeSelector.tsx @@ -14,13 +14,13 @@ const MODE_INFO = { label: 'Only Me', subtitle: '[Free]', description: 'Personal relay for single user with unlimited access', - color: '#fa541c' + color: '#1890ff' }, 'invite-only': { label: 'Invite Only', subtitle: '[Free]', description: 'Invite-only access with manual NPUB management', - color: '#722ed1' + color: '#1890ff' }, 'public': { label: 'Public Relay', @@ -32,7 +32,7 @@ const MODE_INFO = { label: 'Subscription', subtitle: '[Paid]', description: 'Subscription-based access control', - color: '#52c41a' + color: '#1890ff' } }; From 48609a7721313282c6b1ba28d3b1d5d5e7b17047 Mon Sep 17 00:00:00 2001 From: npub1e25g555wlm8w0t853hf2zkmsa8zesndrf60g8d4n3yxh6mpzd2gsgx4jfe Date: Thu, 4 Sep 2025 01:19:47 -0700 Subject: [PATCH 012/116] fix: clean up overlapping background containers on Access Control page - remove unnecessary wrapper containers and simplify form structure --- .../components/BlockPubkeyForm.tsx | 58 +++++++++++-------- 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx b/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx index 5fcabead..1bb21113 100644 --- a/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx +++ b/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx @@ -17,7 +17,12 @@ const CardRoot = styled(Card)` & .ant-card-head { border-bottom-color: var(--border-base-color) !important; } -} + + /* Remove the card body padding and background */ + & .ant-card-body { + padding: 0 !important; + background: transparent !important; + } `; const TextArea = styled(Input.TextArea)` background-color: var(--layout-sider-bg-color) !important; @@ -25,12 +30,6 @@ const TextArea = styled(Input.TextArea)` const InputArea = styled(Input)` background-color: var(--layout-sider-bg-color) !important; `; -export const FormItemContainer = styled.div` - width: 100%; - @media screen and (min-width: ${BREAKPOINTS.md}px) { - padding-right: 1.5rem; - } -`; export const BlockPubkeyForm: React.FC = ({ onSubmit, disabled }) => { const [form] = Form.useForm(); @@ -59,25 +58,36 @@ export const BlockPubkeyForm: React.FC = ({ onSubmit, disa return ( -
- - - - - +
+
+ + form.setFieldsValue({ pubkey: e.target.value })} + /> +
- - -