/* 🎨 Color & Layout Variables */ :root { /* Primary Palette */ --color-primary: #1d3557; --color-secondary: #457b9d; --color-accent: #e63946; /* Semantic Colors */ --color-light: #f1faee; --color-success: #2a9d8f; --color-warning: #e9c46a; --color-danger: #e63946; --color-info: #457b9d; --color-dark: #1d3557; /* Base */ --body-bg: #f8f9fa; --text-color: #333; --heading-color: var(--color-dark); /* Layout */ --header-height: 60px; --sidebar-width: 280px; /* Effects */ --border-radius: 0.5rem; --card-radius: 0.75rem; --card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); --transition-fast: 0.2s; --transition-normal: 0.3s; --transition-ease: ease-in-out; } /* Dark Theme Toggle via .dark-theme on */ :root.dark-theme { --body-bg: #121212; --color-light: #1f1f1f; --text-color: #e0e0e0; } /* Global Resets & Base Styles */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: 'Tajawal', 'Roboto', sans-serif; background-color: var(--body-bg); color: var(--text-color); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; transition: background-color var(--transition-normal) var(--transition-ease); } a { text-decoration: none; color: inherit; } /* Typography */ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 700; margin-bottom: 1rem; } /* Layout Utilities */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0, 0, 0, 0); } :focus { outline: 3px solid rgba(69, 123, 157, 0.5); outline-offset: 2px; } /* Navbar */ .navbar { background-color: var(--color-primary) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .navbar-brand { font-weight: 700; font-size: 1.5rem; } .nav-link { padding: 0 .75rem !important; } /* Buttons */ .btn { border-radius: var(--border-radius); padding: .75rem 1.25rem; font-weight: 600; transition: background-color var(--transition-fast) var(--transition-ease), border-color var(--transition-fast) var(--transition-ease); } .btn-sm { padding: .4rem .75rem; font-size: .875rem; } .btn-action { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } /* Button Variants */ .btn-primary { background: var(--color-primary); border: 1px solid var(--color-primary); } .btn-primary:hover { background: #152a45; border-color: #152a45; } .btn-success { background: var(--color-success); border: 1px solid var(--color-success); } .btn-success:hover { background: #268880; border-color: #268880; } .btn-danger { background: var(--color-danger); border: 1px solid var(--color-danger); } .btn-danger:hover { background: #d62b39; border-color: #d62b39; } .btn-outline-secondary { color: var(--color-secondary); border: 1px solid var(--color-secondary); } .btn-outline-secondary:hover { background: var(--color-secondary); color: #fff; } /* Forms */ .form-control { border-radius: var(--border-radius); padding: .75rem; border: 1px solid #ced4da; font-size: 1rem; transition: border-color var(--transition-fast) var(--transition-ease), box-shadow var(--transition-fast) var(--transition-ease); } .form-control:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 .25rem rgba(69, 123, 157, 0.25); } .form-label { font-weight: 600; margin-bottom: .5rem; } /* Cards */ .card { border: none; border-radius: var(--card-radius); box-shadow: var(--card-shadow); margin-bottom: 1.5rem; overflow: hidden; transition: transform var(--transition-fast) var(--transition-ease), box-shadow var(--transition-fast) var(--transition-ease); } .card-header { background: var(--color-light); border-bottom: 1px solid rgba(0, 0, 0, .05); font-weight: 600; padding: 1rem; } .card-body { padding: 1.5rem; } /* Alerts */ .alert { border-radius: var(--border-radius); padding: 1rem 1.5rem; margin-bottom: 1.5rem; } .alert-success { background: rgba(42, 157, 143, 0.1); color: var(--color-success); } .alert-danger { background: rgba(230, 57, 70, 0.1); color: var(--color-danger); } .alert-warning { background: rgba(233, 196, 106, 0.1); color: var(--color-warning); } .alert-info { background: rgba(69, 123, 157, 0.1); color: var(--color-info); } /* Tables */ .table { width: 100%; vertical-align: middle; border-color: #dee2e6; } .table th, .table td { padding: 1rem; color: #212529; } .table thead th { background: var(--color-light); font-weight: 600; } .table-responsive { border-radius: var(--border-radius); box-shadow: var(--card-shadow); overflow: hidden; margin-bottom: 2rem; } /* Progress bar container */ .progress { height: 1rem; background-color: #e9ecef; /* Light gray background for the container */ border-radius: 0.5rem; overflow: hidden; position: relative; } /* Progress bar line */ .progress-bar-custom { background-color: #007bff; /* Blue color for the progress bar */ height: 100%; width: 0%; /* Default width is 0% */ transition: width 0.3s ease; /* Smooth transition for width changes */ } /* Striped effect */ .progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; } /* Animated effect */ .progress-bar-animated { animation: progress-bar-stripes 1s linear infinite; } @keyframes progress-bar-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn var(--transition-normal) var(--transition-ease); } @keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .slide-in-up { animation: slideInUp var(--transition-normal) var(--transition-ease); } /* Utility Cards */ .feature-card { background: #fff; border-radius: 1rem; box-shadow: var(--card-shadow); padding: 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .3s var(--transition-ease), box-shadow .3s var(--transition-ease); } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1); } .feature-card i { font-size: 2.5rem; margin-bottom: 1rem; color: var(--color-primary); } .feature-card.twitter { background: var(--color-primary); color: #fff; } .feature-card.youtube { background: var(--color-accent); color: #fff; } .feature-card.settings { background: var(--color-secondary); color: #fff; } /* Responsive Adjustments */ @media (max-width: 768px) { .container { padding: 0 1rem; } .card-body { padding: 1rem; } .btn { padding: .625rem 1rem; } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } .table th, .table td { padding: .75rem; font-size: .9rem; } .feature-card { padding: 1.25rem; } .feature-card i { font-size: 2rem; } } /* ======== Login page styling ======== */ /* اجعل الـ body حاوية فلكس لتوسيط البطاقة */ body.login { display: flex; align-items: center; justify-content: center; background-color: var(--color-light) !important; min-height: 100vh; } /* أعد البادينغ والظلال لبطاقة تسجيل الدخول */ body.login .login-card { background: #fff; border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 2rem; /* هنا البادينغ الذي اختفى */ max-width: 400px; width: 100%; }