| |
| |
| :root { |
| |
| --primary-color: #667eea; |
| --primary-dark: #764ba2; |
| --secondary-color: #f093fb; |
| --accent-color: #4f46e5; |
| |
| |
| --bg-primary: #f0f2f5; |
| --bg-secondary: #ffffff; |
| --bg-tertiary: #f8fafc; |
| --text-primary: #1c1e21; |
| --text-secondary: #65676b; |
| --text-muted: #8e9297; |
| --border-color: #ddd; |
| --shadow-light: rgba(0, 0, 0, 0.1); |
| --shadow-medium: rgba(0, 0, 0, 0.15); |
| --shadow-heavy: rgba(0, 0, 0, 0.25); |
| |
| |
| --border-radius: 12px; |
| --border-radius-large: 20px; |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| --transition-fast: all 0.15s ease; |
| |
| |
| --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| --font-size-xs: 0.75rem; |
| --font-size-sm: 0.875rem; |
| --font-size-base: 1rem; |
| --font-size-lg: 1.125rem; |
| --font-size-xl: 1.25rem; |
| --font-size-2xl: 1.5rem; |
| --font-size-3xl: 1.875rem; |
| |
| |
| --spacing-xs: 0.25rem; |
| --spacing-sm: 0.5rem; |
| --spacing-md: 1rem; |
| --spacing-lg: 1.5rem; |
| --spacing-xl: 2rem; |
| --spacing-2xl: 3rem; |
| } |
|
|
| |
| body.dark-mode { |
| --bg-primary: #0f1419; |
| --bg-secondary: #1a1f2e; |
| --bg-tertiary: #242936; |
| --text-primary: #ffffff; |
| --text-secondary: #b7bcc7; |
| --text-muted: #8b93a7; |
| --border-color: #2d3748; |
| --shadow-light: rgba(0, 0, 0, 0.2); |
| --shadow-medium: rgba(0, 0, 0, 0.3); |
| --shadow-heavy: rgba(0, 0, 0, 0.4); |
| } |
|
|
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| font-family: var(--font-family); |
| background-color: var(--bg-primary); |
| color: var(--text-primary); |
| transition: var(--transition); |
| line-height: 1.6; |
| font-size: var(--font-size-base); |
| overflow-x: hidden; |
| } |
|
|
| |
| body.rtl { |
| direction: rtl; |
| text-align: right; |
| } |
|
|
| body.ltr { |
| direction: ltr; |
| text-align: left; |
| } |
|
|
| |
| *:focus { |
| outline: 2px solid var(--primary-color); |
| outline-offset: 2px; |
| transition: var(--transition-fast); |
| } |
|
|
| *:focus:not(:focus-visible) { |
| outline: none; |
| } |
|
|
| *:focus-visible { |
| outline: 2px solid var(--primary-color); |
| outline-offset: 2px; |
| } |
|
|
| |
| @media (prefers-contrast: high) { |
| :root { |
| --shadow-light: rgba(0, 0, 0, 0.3); |
| --shadow-medium: rgba(0, 0, 0, 0.4); |
| --shadow-heavy: rgba(0, 0, 0, 0.5); |
| } |
| |
| body { |
| background-color: #ffffff; |
| color: #000000; |
| } |
| |
| .login-box, |
| .signup-box, |
| .post-card, |
| .friend-card { |
| border: 2px solid #000000 !important; |
| background: #ffffff !important; |
| color: #000000 !important; |
| } |
| } |
|
|
| |
| @media (prefers-reduced-motion: reduce) { |
| * { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| } |
| } |
|
|
| |
| .login-container { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--secondary-color) 100%); |
| position: relative; |
| overflow: hidden; |
| padding: var(--spacing-md); |
| } |
|
|
| .login-container::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>'); |
| animation: backgroundMove 20s linear infinite; |
| } |
|
|
| @keyframes backgroundMove { |
| 0% { background-position: 0 0; } |
| 100% { background-position: 100px 100px; } |
| } |
|
|
| .login-box { |
| background: rgba(255, 255, 255, 0.95); |
| backdrop-filter: blur(10px); |
| border-radius: var(--border-radius-large); |
| padding: var(--spacing-2xl); |
| width: 100%; |
| max-width: 450px; |
| box-shadow: 0 20px 60px var(--shadow-medium), 0 8px 32px var(--shadow-light); |
| text-align: center; |
| position: relative; |
| z-index: 1; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| transition: var(--transition); |
| } |
|
|
| .login-box:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 25px 70px var(--shadow-medium), 0 12px 40px var(--shadow-light); |
| } |
|
|
| body.dark-mode .login-box { |
| background: rgba(26, 31, 46, 0.95); |
| border-color: var(--border-color); |
| } |
|
|
| |
| .logo-container { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: var(--spacing-md); |
| margin-bottom: var(--spacing-lg); |
| } |
|
|
| .logo-icon { |
| font-size: 3.75rem; |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| color: transparent; |
| animation: pulse 2s ease-in-out infinite alternate; |
| } |
|
|
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 100% { transform: scale(1.05); } |
| } |
|
|
| .login-header h1 { |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| color: transparent; |
| font-size: var(--font-size-3xl); |
| font-weight: 700; |
| margin-bottom: var(--spacing-md); |
| } |
|
|
| .login-header p { |
| color: var(--text-secondary); |
| font-size: var(--font-size-sm); |
| line-height: 1.5; |
| margin-bottom: var(--spacing-xl); |
| } |
|
|
| |
| .login-form input, |
| .signup-form input { |
| width: 100%; |
| padding: var(--spacing-md) var(--spacing-lg); |
| margin-bottom: var(--spacing-md); |
| border: 2px solid var(--border-color); |
| border-radius: var(--border-radius); |
| font-size: var(--font-size-base); |
| background: var(--bg-secondary); |
| color: var(--text-primary); |
| transition: var(--transition); |
| outline: none; |
| } |
|
|
| .login-form input:focus, |
| .signup-form input:focus { |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| transform: translateY(-1px); |
| } |
|
|
| .login-form input::placeholder, |
| .signup-form input::placeholder { |
| color: var(--text-muted); |
| transition: var(--transition-fast); |
| } |
|
|
| .login-form input:focus::placeholder, |
| .signup-form input:focus::placeholder { |
| opacity: 0.7; |
| } |
|
|
| |
| .login-btn, |
| .signup-btn, |
| .create-account-btn, |
| .back-login-btn { |
| width: 100%; |
| padding: var(--spacing-md) var(--spacing-lg); |
| border: none; |
| border-radius: var(--border-radius); |
| font-size: var(--font-size-base); |
| font-weight: 600; |
| cursor: pointer; |
| transition: var(--transition); |
| position: relative; |
| overflow: hidden; |
| margin-bottom: var(--spacing-md); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: var(--spacing-sm); |
| } |
|
|
| .login-btn { |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); |
| color: white; |
| } |
|
|
| .login-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); |
| } |
|
|
| .signup-btn { |
| background: linear-gradient(135deg, var(--accent-color), var(--primary-color)); |
| color: white; |
| } |
|
|
| .signup-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3); |
| } |
|
|
| .create-account-btn, |
| .back-login-btn { |
| background: transparent; |
| color: var(--primary-color); |
| border: 2px solid var(--primary-color); |
| } |
|
|
| .create-account-btn:hover, |
| .back-login-btn:hover { |
| background: var(--primary-color); |
| color: white; |
| transform: translateY(-2px); |
| } |
|
|
| |
| .btn-loading { |
| position: relative; |
| color: transparent !important; |
| } |
|
|
| .btn-loading::after { |
| content: ''; |
| position: absolute; |
| width: 16px; |
| height: 16px; |
| border: 2px solid transparent; |
| border-top: 2px solid currentColor; |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| } |
|
|
| @keyframes spin { |
| 0% { transform: translate(-50%, -50%) rotate(0deg); } |
| 100% { transform: translate(-50%, -50%) rotate(360deg); } |
| } |
|
|
| |
| .language-switcher { |
| display: flex; |
| gap: var(--spacing-sm); |
| margin-top: var(--spacing-lg); |
| justify-content: center; |
| } |
|
|
| .lang-btn { |
| padding: var(--spacing-sm) var(--spacing-lg); |
| border: 2px solid var(--border-color); |
| border-radius: var(--border-radius); |
| background: var(--bg-secondary); |
| color: var(--text-secondary); |
| cursor: pointer; |
| transition: var(--transition); |
| font-size: var(--font-size-sm); |
| font-weight: 500; |
| } |
|
|
| .lang-btn:hover { |
| border-color: var(--primary-color); |
| color: var(--primary-color); |
| transform: translateY(-1px); |
| } |
|
|
| .lang-btn.active { |
| background: var(--primary-color); |
| border-color: var(--primary-color); |
| color: white; |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); |
| } |
|
|
| |
| .signup-container { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--secondary-color) 100%); |
| position: relative; |
| overflow: hidden; |
| padding: var(--spacing-md); |
| } |
|
|
| .signup-box { |
| background: rgba(255, 255, 255, 0.95); |
| backdrop-filter: blur(10px); |
| border-radius: var(--border-radius-large); |
| padding: var(--spacing-2xl); |
| width: 100%; |
| max-width: 500px; |
| box-shadow: 0 20px 60px var(--shadow-medium), 0 8px 32px var(--shadow-light); |
| text-align: center; |
| position: relative; |
| z-index: 1; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| transition: var(--transition); |
| } |
|
|
| .signup-box:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 25px 70px var(--shadow-medium), 0 12px 40px var(--shadow-light); |
| } |
|
|
| body.dark-mode .signup-box { |
| background: rgba(26, 31, 46, 0.95); |
| border-color: var(--border-color); |
| } |
|
|
| .signup-box h2 { |
| color: var(--primary-color); |
| font-size: var(--font-size-2xl); |
| font-weight: 700; |
| margin-bottom: var(--spacing-sm); |
| } |
|
|
| .signup-box p { |
| color: var(--text-secondary); |
| font-size: var(--font-size-sm); |
| margin-bottom: var(--spacing-xl); |
| } |
|
|
| .name-fields { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: var(--spacing-md); |
| } |
|
|
| .name-fields input { |
| margin-bottom: var(--spacing-md); |
| } |
|
|
| |
| .navbar { |
| background: var(--bg-secondary); |
| border-bottom: 1px solid var(--border-color); |
| padding: var(--spacing-md) var(--spacing-lg); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| position: sticky; |
| top: 0; |
| z-index: 1000; |
| backdrop-filter: blur(10px); |
| transition: var(--transition); |
| } |
|
|
| .nav-left, |
| .nav-center, |
| .nav-right { |
| display: flex; |
| align-items: center; |
| gap: var(--spacing-md); |
| } |
|
|
| .logo { |
| display: flex; |
| align-items: center; |
| gap: var(--spacing-sm); |
| font-size: var(--font-size-xl); |
| font-weight: 700; |
| color: var(--primary-color); |
| } |
|
|
| .logo-icon { |
| font-size: var(--font-size-2xl); |
| } |
|
|
| .search-box { |
| position: relative; |
| display: flex; |
| align-items: center; |
| background: var(--bg-primary); |
| border-radius: var(--border-radius-large); |
| padding: var(--spacing-sm) var(--spacing-md); |
| border: 1px solid var(--border-color); |
| transition: var(--transition); |
| min-width: 250px; |
| } |
|
|
| .search-box:focus-within { |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| } |
|
|
| .search-box i { |
| color: var(--text-muted); |
| margin-right: var(--spacing-sm); |
| } |
|
|
| body.rtl .search-box i { |
| margin-right: 0; |
| margin-left: var(--spacing-sm); |
| } |
|
|
| .search-box input { |
| border: none; |
| background: transparent; |
| outline: none; |
| color: var(--text-primary); |
| flex: 1; |
| font-size: var(--font-size-sm); |
| } |
|
|
| .search-box input::placeholder { |
| color: var(--text-muted); |
| } |
|
|
| .nav-icon { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 48px; |
| height: 48px; |
| border-radius: 50%; |
| cursor: pointer; |
| transition: var(--transition); |
| color: var(--text-secondary); |
| position: relative; |
| font-size: var(--font-size-lg); |
| } |
|
|
| .nav-icon:hover { |
| background: var(--bg-primary); |
| color: var(--primary-color); |
| transform: scale(1.05); |
| } |
|
|
| .nav-icon.active { |
| background: var(--primary-color); |
| color: white; |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); |
| } |
|
|
| .nav-icon.active:hover { |
| transform: scale(1.1); |
| } |
|
|
| |
| .notification-badge { |
| position: absolute; |
| top: -5px; |
| right: -5px; |
| background: #ef4444; |
| color: white; |
| border-radius: 50%; |
| width: 20px; |
| height: 20px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: var(--font-size-xs); |
| font-weight: 600; |
| animation: bounce 2s infinite; |
| } |
|
|
| @keyframes bounce { |
| 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } |
| 40% { transform: translateY(-10px); } |
| 60% { transform: translateY(-5px); } |
| } |
|
|
| |
| .profile-menu { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| overflow: hidden; |
| cursor: pointer; |
| transition: var(--transition); |
| border: 2px solid var(--border-color); |
| } |
|
|
| .profile-menu:hover { |
| border-color: var(--primary-color); |
| transform: scale(1.05); |
| } |
|
|
| .profile-menu img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
|
|
| |
| .dark-mode-toggle { |
| cursor: pointer !important; |
| } |
|
|
| .dark-mode-toggle:hover { |
| background: var(--bg-primary) !important; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .navbar { |
| padding: var(--spacing-sm) var(--spacing-md); |
| } |
| |
| .nav-left .search-box { |
| display: none; |
| } |
| |
| .nav-center { |
| gap: var(--spacing-sm); |
| } |
| |
| .nav-icon { |
| width: 40px; |
| height: 40px; |
| font-size: var(--font-size-base); |
| } |
| |
| .login-box, |
| .signup-box { |
| padding: var(--spacing-xl); |
| margin: var(--spacing-md); |
| } |
| |
| .name-fields { |
| grid-template-columns: 1fr; |
| } |
| |
| .logo-text { |
| display: none; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .navbar { |
| padding: var(--spacing-sm); |
| } |
| |
| .nav-icon { |
| width: 36px; |
| height: 36px; |
| font-size: var(--font-size-sm); |
| } |
| |
| .login-box, |
| .signup-box { |
| padding: var(--spacing-lg); |
| } |
| |
| .logo-icon { |
| font-size: 2.5rem; |
| } |
| |
| .login-header h1 { |
| font-size: var(--font-size-2xl); |
| } |
| } |
|
|
| |
| @media print { |
| .navbar, |
| .login-container, |
| .signup-container { |
| display: none !important; |
| } |
| |
| body { |
| background: white !important; |
| color: black !important; |
| } |
| } |
|
|
| |
| @media (hover: none) and (pointer: coarse) { |
| .nav-icon { |
| width: 44px; |
| height: 44px; |
| } |
| |
| .login-btn, |
| .signup-btn { |
| min-height: 48px; |
| } |
| |
| input { |
| min-height: 48px; |
| font-size: 16px; |
| } |
| } |
|
|
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes slideInRight { |
| from { |
| opacity: 0; |
| transform: translateX(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
|
|
| @keyframes slideInLeft { |
| from { |
| opacity: 0; |
| transform: translateX(-30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
|
|
| .fade-in { |
| animation: fadeIn 0.6s ease-out; |
| } |
|
|
| .slide-in-right { |
| animation: slideInRight 0.6s ease-out; |
| } |
|
|
| .slide-in-left { |
| animation: slideInLeft 0.6s ease-out; |
| } |
|
|
| |
| * { |
| will-change: auto; |
| } |
|
|
| .will-change-transform { |
| will-change: transform; |
| } |
|
|
| .will-change-opacity { |
| will-change: opacity; |
| } |
|
|
| |
| .sr-only { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| white-space: nowrap; |
| border: 0; |
| } |
|
|
| |
| .clearfix::after { |
| content: ''; |
| display: table; |
| clear: both; |
| } |
|
|
| |
| .transition-all { |
| transition: var(--transition); |
| } |
|
|
| .transition-fast { |
| transition: var(--transition-fast); |
| } |
|
|
| |
| .grid { |
| display: grid; |
| } |
|
|
| .flex { |
| display: flex; |
| } |
|
|
| .flex-col { |
| flex-direction: column; |
| } |
|
|
| .items-center { |
| align-items: center; |
| } |
|
|
| .justify-center { |
| justify-content: center; |
| } |
|
|
| .justify-between { |
| justify-content: space-between; |
| } |
|
|
| |
| .p-0 { padding: 0; } |
| .p-1 { padding: var(--spacing-xs); } |
| .p-2 { padding: var(--spacing-sm); } |
| .p-3 { padding: var(--spacing-md); } |
| .p-4 { padding: var(--spacing-lg); } |
| .p-5 { padding: var(--spacing-xl); } |
|
|
| .m-0 { margin: 0; } |
| .m-1 { margin: var(--spacing-xs); } |
| .m-2 { margin: var(--spacing-sm); } |
| .m-3 { margin: var(--spacing-md); } |
| .m-4 { margin: var(--spacing-lg); } |
| .m-5 { margin: var(--spacing-xl); } |
|
|
| |
| .text-primary { color: var(--primary-color); } |
| .text-secondary { color: var(--text-secondary); } |
| .text-muted { color: var(--text-muted); } |
|
|
| .bg-primary { background-color: var(--bg-primary); } |
| .bg-secondary { background-color: var(--bg-secondary); } |
| .bg-tertiary { background-color: var(--bg-tertiary); } |
|
|
| |
| .border { border: 1px solid var(--border-color); } |
| .border-2 { border: 2px solid var(--border-color); } |
| .border-primary { border-color: var(--primary-color); } |
|
|
| |
| .shadow-sm { box-shadow: 0 1px 2px var(--shadow-light); } |
| .shadow { box-shadow: 0 4px 6px var(--shadow-light); } |
| .shadow-md { box-shadow: 0 8px 16px var(--shadow-medium); } |
| .shadow-lg { box-shadow: 0 16px 32px var(--shadow-medium); } |
| .shadow-xl { box-shadow: 0 24px 48px var(--shadow-heavy); } |
|
|
| |
| .container { |
| width: 100%; |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 var(--spacing-md); |
| } |
|
|
| @media (max-width: 768px) { |
| .container { |
| padding: 0 var(--spacing-sm); |
| } |
| } |
