-
CHAT_E2EE
-
// end-to-end encrypted · zero knowledge · ephemeral
+
Secure Messenger
+
Simple. End-to-End Encrypted. Private.
{view === 'initial' && (
';
- opacity: 0.6;
-}
-
.input-field {
width: 100%;
- padding: 0.7rem 1rem;
- background: rgba(0, 5, 0, 0.85);
- border: 1px solid rgba(0, 255, 65, 0.2);
- border-radius: 0.2rem;
- color: var(--text);
+ padding: 0.75rem 1rem;
+ background: rgba(0, 0, 0, 0.2);
+ border: 1px solid var(--glass-border);
+ border-radius: 0.75rem;
+ color: white;
font-family: inherit;
- font-size: 0.9rem;
- transition: border-color 0.15s ease, box-shadow 0.15s ease;
- caret-color: var(--primary);
-}
-
-.input-field::placeholder {
- color: var(--text-muted);
- opacity: 0.7;
+ font-size: 1rem;
+ transition: all 0.2s;
}
.input-field:focus {
outline: none;
border-color: var(--primary);
- box-shadow: var(--glow-sm);
- background: rgba(0, 8, 0, 0.95);
+ background: rgba(0, 0, 0, 0.4);
}
.input-field:read-only {
- cursor: default;
- color: var(--text-muted);
- border-color: rgba(0, 255, 65, 0.1);
+ cursor: not-allowed;
+ opacity: 0.8;
}
/* Copy input container */
@@ -62,4 +49,4 @@
.copy-input .input-field {
flex: 1;
-}
+}
\ No newline at end of file
diff --git a/client/src/styles/global.css b/client/src/styles/global.css
index ae97e9d..5787ed4 100644
--- a/client/src/styles/global.css
+++ b/client/src/styles/global.css
@@ -1,34 +1,21 @@
/**
- * Global CSS variables – hacker / terminal dark theme
+ * Global CSS variables
*/
:root {
- /* Palette */
- --primary: #00ff41;
- --primary-hover: #33ff6a;
- --primary-dim: rgba(0, 255, 65, 0.12);
- --bg: #080808;
- --surface: #0d0d0d;
- --surface-alt: #111111;
- --text: #d4ffd4;
- --text-bright: #00ff41;
- --text-muted: #4d8c5e;
- --danger: #ff2244;
- --danger-hover: #cc1133;
- --success: #00ff41;
- --accent: #00ccff;
- --glass: rgba(0, 255, 65, 0.03);
- --glass-border: rgba(0, 255, 65, 0.18);
-
- /* Glows */
- --glow-sm: 0 0 6px rgba(0, 255, 65, 0.25);
- --glow-md: 0 0 14px rgba(0, 255, 65, 0.35);
- --glow-lg: 0 0 28px rgba(0, 255, 65, 0.4);
+ --primary: #6366f1;
+ --primary-hover: #4f46e5;
+ --bg: #0f172a;
+ --card-bg: rgba(30, 41, 59, 0.7);
+ --text: #f8fafc;
+ --text-muted: #94a3b8;
+ --danger: #ef4444;
+ --success: #10b981;
+ --glass: rgba(255, 255, 255, 0.05);
+ --glass-border: rgba(255, 255, 255, 0.1);
}
-*,
-*::before,
-*::after {
+* {
box-sizing: border-box;
margin: 0;
padding: 0;
@@ -41,34 +28,15 @@ body {
}
body {
- font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+ font-family: 'Outfit', sans-serif;
background-color: var(--bg);
color: var(--text);
height: 100vh;
height: 100dvh;
overflow: hidden;
-
- /* Subtle terminal grid */
- background-image:
- linear-gradient(rgba(0, 255, 65, 0.025) 1px, transparent 1px),
- linear-gradient(90deg, rgba(0, 255, 65, 0.025) 1px, transparent 1px);
- background-size: 40px 40px;
-}
-
-/* CRT scanline overlay */
-body::after {
- content: '';
- position: fixed;
- inset: 0;
- background: repeating-linear-gradient(
- 0deg,
- transparent,
- transparent 3px,
- rgba(0, 0, 0, 0.06) 3px,
- rgba(0, 0, 0, 0.06) 4px
- );
- pointer-events: none;
- z-index: 9999;
+ background-image: radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
+ radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%),
+ radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
}
#root,
@@ -80,37 +48,39 @@ body::after {
padding: 20px;
}
-/* Terminal surface (replaces glassmorphism) */
.glass {
- background: rgba(0, 10, 0, 0.92);
+ background: var(--glass);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
- box-shadow: var(--glow-sm), inset 0 0 40px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.hidden {
display: none !important;
}
-/* Scrollbar */
+/* Scrollbar styling */
::-webkit-scrollbar {
- width: 6px;
+ width: 8px;
}
::-webkit-scrollbar-track {
- background: rgba(0, 255, 65, 0.03);
+ background: rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
- background: rgba(0, 255, 65, 0.25);
- border-radius: 3px;
+ background: rgba(99, 102, 241, 0.4);
+ border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
- background: rgba(0, 255, 65, 0.45);
+ background: rgba(99, 102, 241, 0.6);
}
-/* Mobile */
+/* Mobile responsive */
@media (max-width: 480px) {
+
#root,
#app {
padding: 0;
@@ -121,4 +91,4 @@ body::after {
height: 100vh;
height: 100dvh;
}
-}
+}
\ No newline at end of file
diff --git a/client/style.css b/client/style.css
index b6a2b54..bdfe749 100644
--- a/client/style.css
+++ b/client/style.css
@@ -1,14 +1,14 @@
:root {
- --primary: #00ff41;
- --primary-hover: #33ff6a;
- --bg: #080808;
- --card-bg: rgba(0, 10, 0, 0.92);
- --text: #d4ffd4;
- --text-muted: #4d8c5e;
- --danger: #ff2244;
- --success: #00ff41;
- --glass: rgba(0, 255, 65, 0.03);
- --glass-border: rgba(0, 255, 65, 0.18);
+ --primary: #6366f1;
+ --primary-hover: #4f46e5;
+ --bg: #0f172a;
+ --card-bg: rgba(30, 41, 59, 0.7);
+ --text: #f8fafc;
+ --text-muted: #94a3b8;
+ --danger: #ef4444;
+ --success: #10b981;
+ --glass: rgba(255, 255, 255, 0.05);
+ --glass-border: rgba(255, 255, 255, 0.1);
}
* {