/* //////////////////////////////////////////// // Root Variables // //////////////////////////////////////////// */ :root { --bg: #0b0b0d; /* near-black */ --card: #0f1113; --card-dark: #0a0a0b; --muted: #9aa0a6; --accent: #e14b4b; --accent-dim: rgb(225, 75, 75, 0.7); /* red */ --accent-600: #c93e3e; --glass: rgba(255, 255, 255, 0.03); --success: #5eead4; /* Text / UI variables */ --text: #e6e6e6; --text-strong: #ffffff; --text-muted: #9aa0a6; --border: rgba(255, 255, 255, 0.03); --overlay: rgba(0, 0, 0, 0.5); } /* Light theme override: add `data-theme="light"` on the element to enable */ html[data-theme="light"] { --bg: #f5f7fb; --card: #ffffff; --card-dark: #f0f2f6; --muted: #6b7280; --accent: #e14b4b; --accent-dim: rgb(225, 75, 75, 0.18); --accent-600: #c93e3e; --glass: rgba(0, 0, 0, 0.03); --success: #059669; --text: #0b0b0d; --text-strong: #0b0b0d; --text-muted: #4b5563; --border: rgba(0, 0, 0, 0.06); --overlay: rgba(255, 255, 255, 0.6); } /* Sunshine theme - Yellow */ html[data-theme="sunshine"] { --bg: #18170d; --card: #221f11; --card-dark: #161409; --muted: #b8a86f; --accent: #f4d03f; --accent-dim: rgb(244, 208, 63, 0.7); --accent-600: #d4b534; --glass: rgba(244, 208, 63, 0.03); --success: #f4d03f; --text: #f5f0d9; --text-strong: #fffef5; --text-muted: #b8a86f; --border: rgba(244, 208, 63, 0.1); --overlay: rgba(24, 23, 13, 0.5); } /* Ocean theme - Blue */ html[data-theme="ocean"] { --bg: #0a0e15; --card: #0f1621; --card-dark: #080c13; --muted: #7a99b8; --accent: #3b82f6; --accent-dim: rgb(59, 130, 246, 0.7); --accent-600: #2563eb; --glass: rgba(59, 130, 246, 0.03); --success: #3b82f6; --text: #d9e7f5; --text-strong: #f0f7ff; --text-muted: #7a99b8; --border: rgba(59, 130, 246, 0.1); --overlay: rgba(10, 14, 21, 0.5); } /* Forest theme - Green */ html[data-theme="forest"] { --bg: #0a120e; --card: #0e1a14; --card-dark: #08100b; --muted: #7ab89a; --accent: #10b981; --accent-dim: rgb(16, 185, 129, 0.7); --accent-600: #059669; --glass: rgba(16, 185, 129, 0.03); --success: #10b981; --text: #d9f5e6; --text-strong: #f0fff7; --text-muted: #7ab89a; --border: rgba(16, 185, 129, 0.1); --overlay: rgba(10, 18, 14, 0.5); } /* Sunset theme - Orange (Dark) */ html[data-theme="sunset"] { --bg: #15100a; --card: #1f1710; --card-dark: #120d08; --muted: #b89177; --accent: #f97316; --accent-dim: rgb(249, 115, 22, 0.7); --accent-600: #ea580c; --glass: rgba(249, 115, 22, 0.03); --success: #f97316; --text: #f5e3d9; --text-strong: #fff5f0; --text-muted: #b89177; --border: rgba(249, 115, 22, 0.1); --overlay: rgba(21, 16, 10, 0.5); } /* Sunset theme - Orange (Light) */ html[data-theme="sunset-light"] { --bg: #fef5ed; --card: #ffffff; --card-dark: #f9ede3; --muted: #7d5f42; --accent: #f97316; --accent-dim: rgb(249, 115, 22, 0.12); --accent-600: #ea580c; --glass: rgba(249, 115, 22, 0.06); --success: #d97706; --text: #1a0f08; --text-strong: #0d0905; --text-muted: #5a4832; --border: rgba(249, 115, 22, 0.15); --overlay: rgba(21, 16, 10, 0.08); } /* Lavender theme - Purple (Dark) */ html[data-theme="lavender"] { --bg: #100d15; --card: #18131f; --card-dark: #0e0b12; --muted: #a87ab8; --accent: #a855f7; --accent-dim: rgb(168, 85, 247, 0.7); --accent-600: #9333ea; --glass: rgba(168, 85, 247, 0.03); --success: #a855f7; --text: #ead9f5; --text-strong: #f8f0ff; --text-muted: #a87ab8; --border: rgba(168, 85, 247, 0.1); --overlay: rgba(16, 13, 21, 0.5); } /* Lavender theme - Purple (Light) */ html[data-theme="lavender-light"] { --bg: #faf5ff; --card: #ffffff; --card-dark: #f3ecff; --muted: #6b4f8a; --accent: #a855f7; --accent-dim: rgb(168, 85, 247, 0.12); --accent-600: #9333ea; --glass: rgba(168, 85, 247, 0.06); --success: #9333ea; --text: #1a0d2d; --text-strong: #0f0618; --text-muted: #4a3766; --border: rgba(168, 85, 247, 0.15); --overlay: rgba(16, 13, 21, 0.08); } /* Rose theme - Pink (Dark) */ html[data-theme="rose"] { --bg: #150a11; --card: #1f1018; --card-dark: #12080e; --muted: #b8779a; --accent: #ec4899; --accent-dim: rgb(236, 72, 153, 0.7); --accent-600: #db2777; --glass: rgba(236, 72, 153, 0.03); --success: #ec4899; --text: #f5d9ea; --text-strong: #fff0f8; --text-muted: #b8779a; --border: rgba(236, 72, 153, 0.1); --overlay: rgba(21, 10, 17, 0.5); } /* Rose theme - Pink (Light) */ html[data-theme="rose-light"] { --bg: #fff5fa; --card: #ffffff; --card-dark: #ffe8f5; --muted: #7d5b70; --accent: #ec4899; --accent-dim: rgb(236, 72, 153, 0.12); --accent-600: #db2777; --glass: rgba(236, 72, 153, 0.06); --success: #d81b60; --text: #1d0f1a; --text-strong: #0f0609; --text-muted: #5a3d52; --border: rgba(236, 72, 153, 0.15); --overlay: rgba(21, 10, 17, 0.08); } /* Sunshine theme - Yellow (Light) */ html[data-theme="sunshine-light"] { --bg: #fffbf0; --card: #ffffff; --card-dark: #fff8ed; --muted: #6f6426; --accent: #f4d03f; --accent-dim: rgb(244, 208, 63, 0.12); --accent-600: #d4b534; --glass: rgba(244, 208, 63, 0.08); --success: #b8860b; --text: #2a240d; --text-strong: #1a1805; --text-muted: #4a4420; --border: rgba(244, 208, 63, 0.16); --overlay: rgba(24, 23, 13, 0.06); } /* Ocean theme - Blue (Light) */ html[data-theme="ocean-light"] { --bg: #f0f5ff; --card: #ffffff; --card-dark: #e6eff9; --muted: #3d5a7d; --accent: #3b82f6; --accent-dim: rgb(59, 130, 246, 0.12); --accent-600: #2563eb; --glass: rgba(59, 130, 246, 0.08); --success: #0369a1; --text: #051a32; --text-strong: #020c1a; --text-muted: #1e3a52; --border: rgba(59, 130, 246, 0.16); --overlay: rgba(10, 14, 21, 0.06); } /* Forest theme - Green (Light) */ html[data-theme="forest-light"] { --bg: #f0fdf6; --card: #ffffff; --card-dark: #e6f9f1; --muted: #3d6b58; --accent: #10b981; --accent-dim: rgb(16, 185, 129, 0.12); --accent-600: #059669; --glass: rgba(16, 185, 129, 0.08); --success: #047857; --text: #051f1a; --text-strong: #020f0b; --text-muted: #1e4a3a; --border: rgba(16, 185, 129, 0.16); --overlay: rgba(10, 18, 14, 0.06); } /* Crimson theme - Deep Red (Dark) */ html[data-theme="crimson"] { --bg: #0f0a0a; --card: #18100f; --card-dark: #0d0808; --muted: #9d7f7f; --accent: #dc2626; --accent-dim: rgb(220, 38, 38, 0.7); --accent-600: #b91c1c; --glass: rgba(220, 38, 38, 0.03); --success: #dc2626; --text: #f5dedd; --text-strong: #fef2f2; --text-muted: #9d7f7f; --border: rgba(220, 38, 38, 0.1); --overlay: rgba(15, 10, 10, 0.5); } /* Crimson theme - Deep Red (Light) */ html[data-theme="crimson-light"] { --bg: #fef2f2; --card: #ffffff; --card-dark: #fee2e2; --muted: #7d3c3c; --accent: #dc2626; --accent-dim: rgb(220, 38, 38, 0.12); --accent-600: #b91c1c; --glass: rgba(220, 38, 38, 0.06); --success: #991b1b; --text: #2b1212; --text-strong: #16050f; --text-muted: #5a3333; --border: rgba(220, 38, 38, 0.15); --overlay: rgba(15, 10, 10, 0.08); } /* //////////////////////////////////////////// // Base Styles // //////////////////////////////////////////// */ * { margin: 0px; padding: 0px; box-sizing: border-box; outline: none; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing: antialiased; border: none; } body { position: relative; height: 100vh; width: 100vw; background: radial-gradient(1200px 600px at 10% 10%, rgba(225, 75, 75, 0.06), transparent 10%), radial-gradient(900px 400px at 90% 90%, rgba(80, 80, 80, 0.06), transparent 12%), var(--bg); color: var(--text); overflow-x: hidden; } a { color: inherit; text-decoration: none; transition: all 0.2s ease-in-out; } a:hover { color: var(--accent-600); } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; scroll-behavior: smooth; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--muted); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--accent); } /* Offline Screen */ .offline-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg); display: none; justify-content: center; align-items: center; z-index: 1000; } .offline-content { text-align: center; } .offline-content h2 { font-size: 36px; margin-bottom: 10px; } /* Analytics */ .analytics-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 12px 0 20px 0; } .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .analytics-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 14px; } .analytics-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .analytics-card-title { margin: 0 0 10px 0; font-size: 15px; font-weight: 600; } .analytics-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #cbd5e1; } .analytics-toggle input { accent-color: var(--accent, #34d399); width: 14px; height: 14px; } .analytics-list { display: flex; flex-direction: column; gap: 10px; } .analytics-row { display: flex; flex-direction: column; gap: 6px; } .analytics-row-header { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .analytics-row-label { color: #e5e7eb; } .analytics-row-value { color: #cbd5e1; white-space: nowrap; } .analytics-bar { width: 100%; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .analytics-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #60a5fa, #34d399); } .analytics-empty { color: #94a3b8; font-size: 13px; } .analytics-filter-menu { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .analytics-filter-mode-toggle { display: flex; gap: 6px; margin-bottom: 12px; } .analytics-filter-mode-btn { flex: 1; padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); color: #cbd5e1; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .analytics-filter-mode-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); } .analytics-filter-mode-btn.active { background: var(--accent, #34d399); color: #000; border-color: var(--accent, #34d399); } .analytics-filter-section { margin-bottom: 12px; } .analytics-filter-section:last-child { margin-bottom: 0; } .analytics-filter-dimension-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #94a3b8; margin: 0 0 8px 0; padding: 0; } .analytics-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; } .analytics-filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.2s ease; } .analytics-filter-pill:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); } .analytics-filter-pill.checked { background: rgba(52, 211, 153, 0.15); border-color: var(--accent, #34d399); } .analytics-filter-pill input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent, #34d399); cursor: pointer; margin: 0; flex-shrink: 0; } .analytics-filter-pill-text { font-size: 12px; color: #e5e7eb; margin: 0; user-select: none; } .analytics-filter-pill.checked .analytics-filter-pill-text { color: var(--accent, #34d399); font-weight: 500; } .offline-content p { font-size: 18px; color: var(--muted); } /* Loading Screen */ .loading-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; } .loading-screen.hide { animation: loadingFadeOut 0.5s forwards; } .hide { display: none !important; } @keyframes loadingFadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } .loading-content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } .loading-spinner { position: relative; border: 8px solid var(--card-dark); border-top: 8px solid var(--accent); border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; /* border: 2px solid red; */ } .loading-screen h2 { position: relative; margin-top: 20px; font-size: 24px; color: var(--muted); text-align: center; /* border: 2px solid red; */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Background */ .background { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; } .background-circles { position: relative; width: 100%; height: 100%; filter: blur(100px); } #background-circles-topleft { position: absolute; top: 10%; left: 10%; width: 100px; height: 100px; background-color: var(--accent); animation: float 6s ease-in-out infinite; opacity: .5; } #background-circles-bottomright { position: absolute; bottom: 10%; right: 10%; width: 150px; height: 150px; background-color: var(--success); animation: float 8s ease-in-out infinite; animation-delay: 2s; opacity: .5; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(20px); } } /* Toast */ .toast { position: fixed; min-width: 200px; max-width: 25%; min-height: 40px; max-height: 50%; overflow-x: hidden; overflow-y: auto; display: none; justify-content: center; flex-direction: column; justify-content: center; align-content: center; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); background-color: var(--card); color: var(--muted); right: 20px; top: 20px; z-index: 9999; overflow: hidden; } .toast.show { animation: toastOpen .5s forwards; } .toast.hide { animation: toastClose .5s forwards; } .toast.success { border-left: 4px solid var(--success); } .toast.error { border-left: 4px solid var(--accent); } .toast-message { position: relative; padding-left: 8px; margin-bottom: 10px; margin-top: 5px; width: calc(100% - 25px); overflow-y: auto; overflow-x: hidden; /* border: 2px solid red */ } .toast.success .toast-timerBar { background-color: var(--success); } .toast.error .toast-timerBar { background-color: var(--accent); } .toast-close { position: absolute; height: 50%; top: 25%; right: 8px; cursor: pointer; font-size: 25px; text-align: center; display: flex; flex-direction: column; justify-content: center; /* border: 2px solid red; */ } .toast-timerBar { position: absolute; width: 100%; bottom: 0%; height: 4px; background-color: var(--muted); } @keyframes toast-timer { 0% { width: 100%; } 100% { width: 0%; } } @keyframes toastClose { 0% { opacity: 1; transform: translateX(0px); } 100% { opacity: 0; transform: translateX(+20px); } } @keyframes toastOpen { 0% { opacity: 0; transform: translateX(+20px); } 100% { opacity: 1; transform: translateX(0px); } } /* Forms */ .form { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; display: flex; flex-direction: column; justify-content: justify; align-items: center; padding: 10px; padding-top: 100px; background-color: rgba(0, 0, 0, 0.5); z-index: 11; /* border: 2px solid red; */ } .form-container { position: relative; height: min-content; width: 400px; /* left: calc(50% - 200px); */ background: var(--card); border-radius: 10px; padding: 10px; padding-top: 20px; /* top: 60px; */ padding-bottom: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0px 0px 10px 0px rgb(225, 75, 75, 0.2); } .form-title { position: relative; font-size: 30px; text-align: center; } .form-label { position: relative; display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 20px; } .form-input { position: relative; font-size: 16px; color: inherit; border: none; background: var(--glass); width: 100%; min-height: 40px; padding: 10px 10px; background: var(--glass); border: 1px solid var(--border); border-radius: 8px; outline: none; transition: all 0.2s ease-in-out; } .form-input-icon { position: relative; font-size: 16px; color: inherit; border: none; background: var(--glass); width: 60%; min-height: 40px; padding: 10px 10px; background: var(--glass); border: 1px solid var(--border); border-radius: 8px; outline: none; transition: all 0.2s ease-in-out; } .form-input:focus, .form-select:focus { border: 1px solid var(--accent); } .form-emoji-container { position: relative; display: flex; flex-direction: row; height: min-content; gap: 8px; align-items: center; /* border: 2px solid red; */ } .form-emoji-button { position: relative; height: min-content; width: 40%; top: -5px; font-size: 16px; } .emoji-picker-container { position: relative; width: 100%; max-width: 100%; box-sizing: border-box; } /* Ensure any picker inserted inside fills the container */ .emoji-picker-container>* { width: 100%; box-sizing: border-box; } /* Simple fallback picker: make it full-width and responsive */ .simple-emoji-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 8px; padding: 8px; background: var(--card-dark); border: 1px solid var(--border); border-radius: 8px; width: 100%; } .simple-emoji-btn { background: transparent; border: none; padding: 8px; font-size: 28px; cursor: pointer; } .form-button, .button2 { position: relative; /* margin-top: 10px; */ padding: 10px; background-color: rgb(225, 75, 75, 0.5); color: var(--text-strong); font-size: 18px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; white-space: nowrap; } .form-button:hover, .button2:hover { background-color: var(--accent-600); color: #ffffff; } .form-message { position: relative; font-size: 14px; text-align: center; color: var(--muted); } /* //////////////////////////////////////////// // Footer Styles // //////////////////////////////////////////// */ .footer { position: relative; width: 100%; background-color: var(--card); border-top: 1px solid var(--border); margin-top: 30px; padding: 40px 20px 20px 20px; } .footer-container { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-bottom: 30px; } .footer-section { position: relative; } .footer-section h4 { font-size: 16px; font-weight: 600; color: var(--text-strong); margin-bottom: 12px; } .footer-section p { font-size: 14px; color: var(--text-muted); line-height: 1.5; } .footer-section ul { list-style: none; padding: 0; margin: 0; } .footer-section li { margin-bottom: 8px; } .footer-section a { font-size: 14px; color: var(--text-muted); text-decoration: none; transition: all 0.2s ease-in-out; } .footer-section a:hover { color: var(--accent); } .footer-bottom { position: relative; border-top: 1px solid var(--border); padding-top: 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto; } .footer-bottom p { font-size: 13px; color: var(--text-muted); margin: 0; } @media screen and (max-width: 768px) { .footer-container { grid-template-columns: repeat(2, 1fr); gap: 20px; } .footer-bottom { flex-direction: column; text-align: center; justify-content: center; } .footer { padding: 30px 16px 16px 16px; margin-top: 30px; } } .form-select { font-size: 16px; color: inherit; border: none; background: var(--glass); background-color: var(--card-dark); width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; outline: none; transition: all 0.2s ease-in-out; } .form-close { position: absolute; top: 10px; right: 15px; font-size: 24px; color: var(--muted); cursor: pointer; transition: all 0.2s ease-in-out; } .form.show { display: flex; animation: formFadeIn 0.3s forwards; } .form.hide { display: none; animation: formFadeOut 0.3s forwards; } @keyframes formFadeIn { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes formFadeOut { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 0; transform: translateY(-20px); } } .ghost-text { color: transparent !important; user-select: none; pointer-events: none; position: relative; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%); background-size: 200% 100%; animation: shine 1.5s infinite; border-radius: 10px; } @keyframes shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .notificationAmount { background-color: var(--card-dark); color: var(--text-strong); border-radius: 12px; padding: 2px 6px; font-size: 13px; font-weight: 500; margin-left: 6px; transition: all 0.2s ease-in-out; } .notificationAmount.hide { display: none; } .header-notifications { position: absolute; top: 70px; right: 0px; width: min-content; min-width: 300px; padding: 10px; max-height: 400px; background-color: var(--card); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); flex-direction: column; overflow: hidden; z-index: 11; box-shadow: 0px 0px 10px 0px rgb(225, 75, 75, 0.2); display: none; } .header-notifications.show { display: flex; animation: showHeaderNotifications 0.2s ease-in-out; } .header-notifications.hide { display: none; animation: hideHeaderNotifications 0.2s ease-in-out; } .header-notifications-close { position: absolute; top: 10px; right: 10px; font-size: 18px; color: var(--muted); cursor: pointer; transition: all 0.2s ease-in-out; } .header-notifications-empty { position: relative; width: 100%; text-align: center; font-size: 14px; color: var(--muted); margin-top: 20px; /* border: 2px solid red; */ } .header-notifications-empty.hide { display: none; } .header-notifications-empty.show { display: flex; } .header-notifications-title { position: relative; width: 100%; text-align: center; font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--text-strong); cursor: default; /* border: 2px solid red; */ } .header-notifications-list-container { width: 100%; max-height: 340px; overflow-y: auto; } .header-notifications-list { position: relative; width: 100%; display: flex; flex-direction: column; gap: 8px; } .header-notifications-item { position: relative; width: 100%; padding: 10px; background-color: var(--glass); border-radius: 6px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; border: 1px solid transparent; } /* Color accents per notification type */ .header-notifications-item.notification-success { background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.12)); border-color: rgba(34, 197, 94, 0.55); box-shadow: 0 4px 10px rgba(34, 197, 94, 0.2); border-left: 4px solid rgba(34, 197, 94, 0.8); } .header-notifications-item.notification-warning { background: linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(234, 179, 8, 0.12)); border-color: rgba(234, 179, 8, 0.6); box-shadow: 0 4px 10px rgba(234, 179, 8, 0.25); border-left: 4px solid rgba(234, 179, 8, 0.9); } .header-notifications-item.notification-error { background: linear-gradient(135deg, rgba(239, 68, 68, 0.26), rgba(239, 68, 68, 0.12)); border-color: rgba(239, 68, 68, 0.65); box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25); border-left: 4px solid rgba(239, 68, 68, 0.95); } .header-notifications-item.notification-info { background: linear-gradient(135deg, rgba(59, 130, 246, 0.24), rgba(59, 130, 246, 0.1)); border-color: rgba(59, 130, 246, 0.55); box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2); border-left: 4px solid rgba(59, 130, 246, 0.9); } .header-notifications-item.notification-general { background: linear-gradient(135deg, rgba(148, 163, 184, 0.22), rgba(148, 163, 184, 0.1)); border-color: rgba(148, 163, 184, 0.55); box-shadow: 0 4px 10px rgba(148, 163, 184, 0.22); border-left: 4px solid rgba(148, 163, 184, 0.85); } .header-notifications-item.notification-urgent { background: linear-gradient(135deg, rgba(190, 24, 93, 0.28), rgba(190, 24, 93, 0.12)); border-color: rgba(190, 24, 93, 0.65); box-shadow: 0 4px 12px rgba(190, 24, 93, 0.28); border-left: 4px solid rgba(190, 24, 93, 0.95); } .header-notifications-item.notification-success .header-notifications-item-timer { background-color: rgba(34, 197, 94, 0.9) !important; } .header-notifications-item.notification-warning .header-notifications-item-timer { background-color: rgba(234, 179, 8, 0.9) !important; } .header-notifications-item.notification-error .header-notifications-item-timer { background-color: rgba(239, 68, 68, 0.95) !important; } .header-notifications-item.notification-info .header-notifications-item-timer { background-color: rgba(59, 130, 246, 0.9) !important; } .header-notifications-item.notification-general .header-notifications-item-timer { background-color: rgba(148, 163, 184, 0.9) !important; } .header-notifications-item.notification-urgent .header-notifications-item-timer { background-color: rgba(190, 24, 93, 0.95) !important; } .header-notifications-item-timer { position: absolute; top: 0; left: 0; height: 4px; width: 0%; background-color: var(--muted); /* animation: notification-timer-up 2s linear forwards; */ transition: all 0.2s ease-in-out; } @keyframes notification-timer-up { 0% { width: 0%; } 100% { width: 100%; display: none; } } .header-notifications-item-text { position: relative; font-size: 14px; color: var(--text); width: calc(100% - 20px); overflow: hidden; cursor: default; } .header-notifications-item-close { position: absolute; top: 10px; right: 10px; font-size: 18px; color: var(--muted); cursor: pointer; transition: all 0.2s ease-in-out; } .header-notifications-item-close.hide { display: none; } .header { position: relative; width: 95%; left: 2.5%; height: 60px; margin-top: 10px; display: flex; flex-direction: row; justify-content: right; align-items: center; gap: 15px; background-color: var(--card); padding-left: 10px; padding-right: 10px; border-radius: 10px; box-shadow: 0px 0px 10px 5px rgb(0, 0, 0, 0.2); } .header-brand { position: absolute; width: min-content; left: 10px; cursor: default; } .header-actions { /* position: relative; */ /* display: flex; */ /* flex-direction: row; */ gap: 10px; margin-right: 10px; } .header-actions-dropdown { /* position: relative; */ height: 50%; display: none; flex-direction: row; justify-content: center; align-items: center; padding: 8px 12px; background-color: var(--card-dark); gap: 5px; font-size: 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; } .header-actions-dropdown { display: flex; } .header-actions { position: absolute; display: none; flex-direction: column; height: min-content; right: 100px; top: 70px; background-color: var(--card-dark); z-index: 2; padding: 8px 12px; border-radius: 8px; box-shadow: 0px 0px 10px 0px rgb(225, 75, 75, 0.2); } /* Old with less buttons */ /* .header-actions.hide { display: flex !important; } */ .header-actions.show { display: flex; animation: showHeaderMenu 0.2s ease-in-out; } .header-actions.hide { display: none !important; animation: hideHeaderMenu 0.2s ease-in-out; } .button3, .header-actions-button { position: relative; padding: 8px 12px; background-color: var(--card-dark); color: var(--text-strong); border-radius: 8px; font-size: 12px; cursor: pointer; transition: all 0.2s ease-in-out; } .button3:hover, .header-actions-button:hover { background-color: var(--accent-600); } .header-actions-dropdown:hover { background-color: var(--accent-600); } .header-actions-caret { position: relative; height: 100%; filter: invert(67%) sepia(10%) saturate(186%) hue-rotate(169deg) brightness(92%) contrast(91%); transition: all 0.2s ease-in-out; } .header-profile { position: relative; height: 50%; display: flex; flex-direction: row; gap: 10px; align-items: center; cursor: pointer; /* border: 2px solid red; */ } .header-profile-caret { position: relative; height: 100%; filter: invert(67%) sepia(10%) saturate(186%) hue-rotate(169deg) brightness(92%) contrast(91%); transition: all 0.2s ease-in-out; } .header-menu { position: absolute; top: 70px; right: 0%; width: 200px; background-color: var(--card); border-radius: 10px; box-shadow: 0px 0px 10px 5px rgb(0, 0, 0, 0.2); flex-direction: column; gap: 10px; padding: 10px; z-index: 10; transition: all 0.2s ease-in-out; } .header-menu-button { position: relative; padding: 8px 12px; background-color: var(--card-dark); color: var(--text-strong); border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.2s ease-in-out; } .header-menu-button:hover { background-color: var(--accent-600); } .header-menu-button:hover .notificationAmount { background-color: var(--card-dark); color: var(--text-strong); } .header-menu.show { display: flex; animation: showHeaderMenu 0.2s ease-in-out; } .header-menu.hide { display: none; animation: hideHeaderMenu 0.2s ease-in-out; } @keyframes showHeaderMenu { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes hideHeaderMenu { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 0; transform: translateY(-10px); } } @media screen and (max-width: 900px) { .header-actions-dropdown { display: flex; } .header-actions { position: absolute; display: none; flex-direction: column; height: min-content; right: 100px; top: 70px; background-color: var(--card-dark); z-index: 2; padding: 8px 12px; border-radius: 8px; box-shadow: 0px 0px 10px 0px rgb(225, 75, 75, 0.2); } .header-actions.show { display: flex; animation: showHeaderMenu 0.2s ease-in-out; } .header-actions.hide { display: none !important; animation: hideHeaderMenu 0.2s ease-in-out; } } .main-content { position: relative; margin-top: 10px; left: 2.5%; width: 95%; min-height: 100%; /* height: calc(100% - 100px); */ display: flex; flex-direction: row; overflow-y: auto; /* border: 2px solid blue; */ } .title { position: relative; font-size: 30px; font-weight: 600; color: var(--text-strong); cursor: default; } /* Sidebar */ .sidebar { position: sticky; top: 0px; left: 0px; width: min-content; min-width: 15%; padding: 5px; height: calc(100% - 25px); background-color: var(--card); display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 10px; padding-bottom: 10px; box-shadow: 2px 0px 10px 0px rgb(0, 0, 0, 0.2); z-index: 1; border-radius: 10px; } .sidebar-nav { position: relative; display: flex; width: 100%; flex-direction: column; gap: 10px; } .sidebar-nav-button { position: relative; width: 100%; height: 30px; padding: 6px; color: var(--muted); background-color: var(--card-dark); border-radius: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 14px; transition: all 0.2s ease-in-out; } .sidebar-nav-button.active { background-color: var(--accent-600); color: var(--text-strong); box-shadow: 0px 0px 6px 0px var(--accent-600); } .sidebar-nav-button:hover { background-color: var(--accent-600); color: var(--text-strong); } .sidebar-nav-button:active { background-color: var(--accent); color: var(--text-strong); box-shadow: 0px 0px 6px 0px var(--accent); } .button1 { position: relative; padding: 8px 12px; background-color: var(--card-dark); color: var(--text-strong); border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.2s ease-in-out; } .button1:active { background-color: var(--accent-600); color: var(--text-strong); box-shadow: 0px 0px 6px 0px var(--accent-600); transform: translateY(1px); } .button1.active, .button1:hover { background-color: var(--accent-dim); color: var(--text-strong); box-shadow: 0px 0px 5px 0px var(--accent-dim); } .button-disabled { opacity: 0.5; cursor: not-allowed !important; } /* Light theme button text overrides for better contrast */ html[data-theme="light"] .button1, html[data-theme="light"] .button2, html[data-theme="light"] .button3, html[data-theme="light"] .form-button, html[data-theme="light"] .header-actions-button, html[data-theme="light"] .header-menu-button { color: #ffffff; background-color: #4a4a4a; } html[data-theme="light"] .header-actions-button:hover, html[data-theme="light"] .header-menu-button:hover { background-color: #626262; color: #000000; } html[data-theme="sunshine-light"] .button1, html[data-theme="sunshine-light"] .button2, html[data-theme="sunshine-light"] .button3, html[data-theme="sunshine-light"] .form-button, html[data-theme="sunshine-light"] .header-actions-button, html[data-theme="sunshine-light"] .header-menu-button { color: #ffffff; background-color: #6f6426; } html[data-theme="sunshine-light"] .header-actions-button:hover, html[data-theme="sunshine-light"] .header-menu-button:hover { background-color: #f4d03f; color: #000000; } html[data-theme="ocean-light"] .button1, html[data-theme="ocean-light"] .button2, html[data-theme="ocean-light"] .button3, html[data-theme="ocean-light"] .form-button, html[data-theme="ocean-light"] .header-actions-button, html[data-theme="ocean-light"] .header-menu-button { color: #ffffff; background-color: #3d5a7d; } html[data-theme="ocean-light"] .header-actions-button:hover, html[data-theme="ocean-light"] .header-menu-button:hover { background-color: #3b82f6; color: #ffffff; } html[data-theme="forest-light"] .button1, html[data-theme="forest-light"] .button2, html[data-theme="forest-light"] .button3, html[data-theme="forest-light"] .form-button, html[data-theme="forest-light"] .header-actions-button, html[data-theme="forest-light"] .header-menu-button { color: #ffffff; background-color: #3d6b58; } html[data-theme="forest-light"] .header-actions-button:hover, html[data-theme="forest-light"] .header-menu-button:hover { background-color: #10b981; color: #ffffff; } html[data-theme="sunset-light"] .button1, html[data-theme="sunset-light"] .button2, html[data-theme="sunset-light"] .button3, html[data-theme="sunset-light"] .form-button, html[data-theme="sunset-light"] .header-actions-button, html[data-theme="sunset-light"] .header-menu-button { color: #ffffff; background-color: #7d5f42; } html[data-theme="sunset-light"] .header-actions-button:hover, html[data-theme="sunset-light"] .header-menu-button:hover { background-color: #f97316; color: #ffffff; } html[data-theme="lavender-light"] .button1, html[data-theme="lavender-light"] .button2, html[data-theme="lavender-light"] .button3, html[data-theme="lavender-light"] .form-button, html[data-theme="lavender-light"] .header-actions-button, html[data-theme="lavender-light"] .header-menu-button { color: #ffffff; background-color: #6b4f8a; } html[data-theme="lavender-light"] .header-actions-button:hover, html[data-theme="lavender-light"] .header-menu-button:hover { background-color: #a855f7; color: #ffffff; } html[data-theme="rose-light"] .button1, html[data-theme="rose-light"] .button2, html[data-theme="rose-light"] .button3, html[data-theme="rose-light"] .form-button, html[data-theme="rose-light"] .header-actions-button, html[data-theme="rose-light"] .header-menu-button { color: #ffffff; background-color: #7d5b70; } html[data-theme="rose-light"] .header-actions-button:hover, html[data-theme="rose-light"] .header-menu-button:hover { background-color: #ec4899; color: #ffffff; } /* Button hover effects for light themes */ html[data-theme="light"] .button1:hover, html[data-theme="light"] .button2:hover, html[data-theme="light"] .button3:hover, html[data-theme="light"] .form-button:hover { background-color: #626262; color: #ffffff; } html[data-theme="sunshine-light"] .button1:hover, html[data-theme="sunshine-light"] .button2:hover, html[data-theme="sunshine-light"] .button3:hover, html[data-theme="sunshine-light"] .form-button:hover { background-color: #f4d03f; color: #000000; } html[data-theme="ocean-light"] .button1:hover, html[data-theme="ocean-light"] .button2:hover, html[data-theme="ocean-light"] .button3:hover, html[data-theme="ocean-light"] .form-button:hover { background-color: #3b82f6; color: #ffffff; } html[data-theme="forest-light"] .button1:hover, html[data-theme="forest-light"] .button2:hover, html[data-theme="forest-light"] .button3:hover, html[data-theme="forest-light"] .form-button:hover { background-color: #10b981; color: #ffffff; } html[data-theme="sunset-light"] .button1:hover, html[data-theme="sunset-light"] .button2:hover, html[data-theme="sunset-light"] .button3:hover, html[data-theme="sunset-light"] .form-button:hover { background-color: #f97316; color: #ffffff; } html[data-theme="lavender-light"] .button1:hover, html[data-theme="lavender-light"] .button2:hover, html[data-theme="lavender-light"] .button3:hover, html[data-theme="lavender-light"] .form-button:hover { background-color: #a855f7; color: #ffffff; } html[data-theme="rose-light"] .button1:hover, html[data-theme="rose-light"] .button2:hover, html[data-theme="rose-light"] .button3:hover, html[data-theme="rose-light"] .form-button:hover { background-color: #ec4899; color: #ffffff; } html[data-theme="crimson-light"] .button1:hover, html[data-theme="crimson-light"] .button2:hover, html[data-theme="crimson-light"] .button3:hover, html[data-theme="crimson-light"] .form-button:hover { background-color: #dc2626; color: #ffffff; } @media screen and (max-width: 470px) { .header-brand { font-size: 20px; } } @media screen and (max-width: 390px) { .header-brand { font-size: 18px; } } /* Responsive layout adjustments for smaller screens */ @media (max-width: 900px) { /* Make header stick to top and give main content room */ .header { /* position: fixed; */ height: 64px; padding-left: 12px; padding-right: 12px; z-index: 10; } .main-content { /* position: absolute; */ margin-top: 0px; left: 0; width: 100%; padding-left: 12px; padding-right: 12px; /* height: calc(100% - 80px); */ flex-direction: column; gap: 12px; } /* Collapse sidebar into a horizontal strip */ .sidebar { position: relative; width: 100%; min-width: auto; height: auto; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; box-shadow: none; border-radius: 0; top: 10px; border-radius: 8px; overflow: visible; /* allow button shadows to be fully visible */ } .sidebar-nav { flex-direction: row; width: 100%; overflow-x: auto; gap: 8px; padding: 4px 6px; /* give space so shadows aren't clipped */ -webkit-overflow-scrolling: touch; } .sidebar-nav-button { flex: 0 0 auto; min-width: 56px; height: auto; padding: 6px 8px; font-size: 13px; width: auto; /* ensure they don't expand to full width in horizontal mode */ margin: 0 6px; /* breathing room for box-shadows */ z-index: 3; /* render above nearby elements so shadow shows */ } /* Make form/dialogs adapt to viewport */ .form-container { width: calc(100% - 40px); max-width: 720px; } /* Header action dropdown behavior already present; ensure it's visible */ .header-actions { right: 10px; } /* Toasts become full width on smaller screens */ .toast { position: fixed; right: 12px; left: 12px; max-width: calc(100% - 24px); min-width: unset; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } } @media (max-width: 520px) { /* Slightly tighter header and title sizes */ .header { height: 56px; padding-left: 10px; padding-right: 10px; } .title { font-size: 22px; } /* Stack main content sections with comfortable spacing */ .main-content { /* top: 72px; */ /* height: calc(100% - 72px); */ padding-left: 8px; padding-right: 8px; gap: 10px; } /* Make header-brand more compact */ .header-brand { left: 8px; } /* Buttons and small UI elements should be easier to tap */ .button1, .button3, .header-actions-button, .form-button, .button2 { padding: 10px 12px; font-size: 15px; } /* Sidebar nav should show as horizontally scrollable row */ .sidebar { padding: 6px; gap: 6px; } /* Ensure notification overlays and menus fit */ .header-menu, .header-notifications { right: 8px; left: auto; width: calc(100% - 16px); max-width: 380px; } /* Make small cards and inputs easier to read */ .form-container { width: calc(100% - 24px); padding: 12px; } .toast { left: 8px; right: 8px; } } /* 2FA Choice Modal */ #twofa-choice-modal { position: fixed; inset: 0; background: var(--overlay); display: none; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(4px); } #twofa-choice-modal .modal-card { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 24px; width: 100%; max-width: 420px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); } #twofa-choice-modal h2 { margin-top: 0; margin-bottom: 8px; font-size: 1.4rem; color: var(--text-strong); } #twofa-choice-modal p { margin-top: 0; margin-bottom: 20px; color: var(--text-muted); } #twofa-choice-buttons { display: flex; flex-direction: column; gap: 12px; } .choice-btn { padding: 16px; border: 2px solid var(--border); border-radius: 10px; background: var(--card-dark); color: var(--text); cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 6px; } .choice-btn:hover { border-color: var(--accent); background: var(--glass); transform: translateY(-2px); } .method-name { font-weight: 600; font-size: 1.05rem; } .method-desc { font-size: 0.85rem; color: var(--text-muted); } /* OTP Modal */ #otp-modal { position: fixed; inset: 0; background: var(--overlay); display: none; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(4px); } #otp-modal.active { display: flex; } #otp-modal .modal-card { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 24px; width: 100%; max-width: 420px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); } #otp-modal h2 { margin-top: 0; margin-bottom: 8px; font-size: 1.4rem; color: var(--text-strong); } #otp-modal p { margin-top: 0; margin-bottom: 16px; color: var(--text-muted); } #otp-input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-dark); color: var(--text); font-size: 1rem; letter-spacing: 0.2rem; text-align: center; transition: border-color 0.2s ease; } #otp-input:focus { outline: none; border-color: var(--accent); } #otp-actions { display: flex; gap: 12px; margin-top: 16px; } .otp-btn { flex: 1; padding: 12px; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.2s ease; } .otp-confirm { background: var(--success); color: var(--bg); } .otp-confirm:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); } .otp-confirm:disabled { opacity: 0.5; cursor: not-allowed; } .otp-cancel { background: var(--card-dark); color: var(--text); border: 1px solid var(--border); } .otp-cancel:hover { background: var(--glass); } /* Authenticator Modal */ #authenticator-modal { position: fixed; inset: 0; background: var(--overlay); align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); } #authenticator-modal .modal-card { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 24px; width: 100%; max-width: 420px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); } #authenticator-modal h2 { margin-top: 0; margin-bottom: 8px; font-size: 1.4rem; color: var(--text-strong); } #authenticator-modal p { margin-top: 0; margin-bottom: 16px; color: var(--text-muted); } #authenticator-modal .alt-method { margin: 8px 0 4px 0; text-align: center; } .link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-weight: 600; text-decoration: underline; } #recovery-section { margin-top: 10px; } #recovery-section input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-dark); color: var(--text); letter-spacing: 0.15rem; text-align: center; } #recovery-actions { display: flex; gap: 10px; margin-top: 10px; } #authenticator-input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-dark); color: var(--text); font-size: 1rem; letter-spacing: 0.2rem; text-align: center; transition: border-color 0.2s ease; } #authenticator-input:focus { outline: none; border-color: var(--accent); } #authenticator-actions { display: flex; gap: 12px; margin-top: 16px; } .auth-btn { flex: 1; padding: 12px; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.2s ease; } .auth-confirm { background: var(--success); color: var(--bg); } .auth-confirm:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); } .auth-confirm:disabled { opacity: 0.5; cursor: not-allowed; } .auth-cancel { background: var(--card-dark); color: var(--text); border: 1px solid var(--border); } .auth-cancel:hover { background: var(--glass); } @media screen and (max-width: 470px) { .header-brand { font-size: 20px; } } @media screen and (max-width: 390px) { .header-brand { font-size: 18px; } }