/* ================================================ HAT-TRICK – dark-mode.css Usage: أضيف data-theme="dark" على الـ ================================================ */ [data-theme="dark"] { /* ── Override variables ── */ --dark-bg: #0f1117; --white: #1a1d24; --light: #2a2d35; --border: #2e3240; --muted: #8b8fa8; --gray: #6b7280; --dark: #13161e; --black: #e8eaf0; /* النصوص بتتعكس */ /* Opacity channels updated */ --whiteOp: 26, 29, 36; --blackOp: 232, 234, 240; --secondaryOp: 1, 25, 18; } /* ── Body & Base ── */ [data-theme="dark"] body { background: #0f1117; color: #e8eaf0; } /* ── Navbar ── */ [data-theme="dark"] header .navbar { background: #13161e !important; border-bottom: 1px solid #2e3240; } [data-theme="dark"] .navbar-collapse { background: #13161e; } [data-theme="dark"] .navbar .navbar-nav .nav-item .nav-link.active { color: var(--black) !important; } [data-theme="dark"] .auth .navbar .navbar-nav .nav-link, [data-theme="dark"] .auth .navbar .navbar-nav .nav-link.active { color: #e8eaf0 !important; } /* ── Dropdown ── */ [data-theme="dark"] .auth .dropdown-menu.show { background: #121212 !important; border-color: #2e3240 !important; } [data-theme="dark"] .auth .dropdown-menu hr { border-color: #2e3240; } [data-theme="dark"] .auth .dropdown-menu li { color: #b0b4cc !important; } /* ── Cards / Posts ── */ [data-theme="dark"] .suggest_friends, [data-theme="dark"] .card-wrapper, [data-theme="dark"] .profile-nav, [data-theme="dark"] .post { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .profile-nav .nav-link { color: #e8eaf0; } [data-theme="dark"] .activities .activity .activity-count{ color: var(--black); } [data-theme="dark"] .card { background: transparent; } [data-theme="dark"] .features .feature .card { background: #1a1d24; border-color: #2e3240; } /* ── Review cards ── */ [data-theme="dark"] .review-card { background: #1a1d24 !important; border-color: #2e3240 !important; } [data-theme="dark"] .review-card p { color: #b0b4cc; } [data-theme="dark"] .review-info span { color: #6b7280; } [data-theme="dark"] footer .footer-img { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } /* ── Players / Friends sidebar ── */ [data-theme="dark"] .players, [data-theme="dark"] .card.active-players { background: #1a1d24 !important; border-color: #2e3240 !important; } /* ── Forms & Inputs ── */ [data-theme="dark"] .select2-container .select2-selection--single, [data-theme="dark"] .input-group-text, [data-theme="dark"] #messageInput, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.06) !important; color: #e8eaf0 !important; } [data-theme="dark"] .form-control::placeholder { color: #5a5e72; } [data-theme="dark"] input:disabled { background: #1e2130 !important; color: #5a5e72 !important; } [data-theme="dark"] .add-comment { border-color: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .add-comment input { background: transparent; color: #e8eaf0; } [data-theme="dark"] #verification-input > input { border-color: #2e3240; color: #e8eaf0; } /* ── Login ── */ [data-theme="dark"] .login { background: #0f1117; } [data-theme="dark"] .login-form { background: #0f1117; } [data-theme="dark"] .login .login-form .nav-pills { background: #13161e; border-color: #2e3240; } [data-theme="dark"] .login .login-form .nav-pills .nav-link.active { border: 1px solid var(--Linear, #00ff87); background: linear-gradient( 135deg, rgba(0, 255, 135, 0.15) 0%, rgba(96, 165, 250, 0.15) 100% ); color: var(--black) !important; } [data-theme="dark"] .login .login-option-text div { background: #0f1117; color: #6b7280; } [data-theme="dark"] .login .login-option-text::before { background: #2e3240; } [data-theme="dark"] .login .login-option { border-color: #2e3240; color: #b0b4cc; } /* ── Post Actions & Stats ── */ [data-theme="dark"] .post-stats { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .post-stats *, [data-theme="dark"] .action { color: #b3b3b3; } [data-theme="dark"] .action:hover { background: rgba(var(--mainOp), 0.1); } /* ── Comments ── */ [data-theme="dark"] .comment-text { background: #222639; color: #c9cce0; } [data-theme="dark"] .comment-content b { color: #e8eaf0; } [data-theme="dark"] .comment-content p { color: #8b8fa8; } [data-theme="dark"] .comment-data small, [data-theme="dark"] .user-meta small { color: #6b7280; } [data-theme="dark"] .comment img { border-color: #2e3240; background: #222639; } [data-theme="dark"] .shared-strip { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .shared-strip-text b { color: #e8eaf0; } [data-theme="dark"] .shared-strip-text small { color: #6b7280; } /* ── Options menu ── */ [data-theme="dark"] .options-menu { background: #1e2130; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .options-menu li button { color: #c9cce0; } [data-theme="dark"] .options-menu li button:hover { background: #2a2d3e; } /* ── ShareWith labels ── */ [data-theme="dark"] .shareWith input + label { border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.12); color: #e8eaf0; } /* ── Upload ── */ [data-theme="dark"] .upload__btn-box button { border-color: #2e3240; color: #8b8fa8; } /* ── Skeleton ── */ [data-theme="dark"] .skeleton-box, [data-theme="dark"] .skeleton-line { background: #7070704f; } /* ── Pagination ── */ [data-theme="dark"] .pagination { border-color: #2e3240; } /* ── Accordion ── */ [data-theme="dark"] .accordion-button { background: #1a1d24 !important; color: #e8eaf0 !important; } [data-theme="dark"] .accordion-body { background: #13161e; color: #b0b4cc; } [data-theme="dark"] .accordion-item { border-color: #2e3240; } /* ── Modal ── */ [data-theme="dark"] .modal-content { background: #1a1d24; color: #e8eaf0; } [data-theme="dark"] .modal-header { border-bottom-color: #2e3240; } [data-theme="dark"] .modal-footer { border-top-color: #2e3240; } [data-theme="dark"] .btn-close { filter: invert(1); } /* ── Notifications ── */ [data-theme="dark"] .notifications { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .notifications .nav-pills { background: #13161e; } [data-theme="dark"] .notifications .nav-pills .nav-item { color: #8b8fa8; } [data-theme="dark"] .notifications .nav-pills .nav-item .nav-link.active { background: rgba(var(--mainOp), 0.1) !important; color: #e8eaf0 !important; } [data-theme="dark"] .notifi_item { background: #1a1d24; border-top-color: #2e3240; } [data-theme="dark"] .notifi_item.new { background: rgba(50, 248, 189, 0.05); } [data-theme="dark"] .notifi_item p, [data-theme="dark"] .notifi_item small { color: #8b8fa8; } /* ── Like item ── */ [data-theme="dark"] .like-item { border-bottom-color: #2e3240; } [data-theme="dark"] .like-item-body b { color: #e8eaf0; } [data-theme="dark"] .like-item-body small { color: #6b7280; } /* ── Profile / Drawer ── */ [data-theme="dark"] .secTitle:not(.login .secTitle) { color: #e8eaf0; } [data-theme="dark"] .secName { color: #8b8fa8; } [data-theme="dark"] .progress { background: #1a1d24; } [data-theme="dark"] .card-wrapper .card-title + .info-wrapper > div:not(:last-child) { border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .ex_name { color: var(--main) !important; } [data-theme="dark"] .label { color: var(--black); } [data-theme="dark"] .value { color: #979797; } /* ── Select2 ── */ [data-theme="dark"] .select2-dropdown, [data-theme="dark"] .select2-container .select2-dropdown--below { background: #1e2130 !important; border-color: #2e3240 !important; } [data-theme="dark"] .select2-results__option { color: #c9cce0; } [data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background: #13161e; color: #e8eaf0; border-color: #2e3240; } /* ── About / Hero sections ── */ [data-theme="dark"] .hero-sec, [data-theme="dark"] .about { background: #0f1117; } [data-theme="dark"] .about-content p { color: #b0b4cc; } /* ── Chat ── */ [data-theme="dark"] .chats { border-color: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.12) !important; } [data-theme="dark"] .border-end, [data-theme="dark"] .border-bottom, [data-theme="dark"] .chat-wrapper, [data-theme="dark"] .msg-header { border-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] #chatMessages .bg-success { background: rgba(50, 248, 189, 0.15) !important; color: #e8eaf0 !important; } /* ── Scrollbar ── */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #13161e; } @media (max-width: 991.8px) { [data-theme="dark"] .suggest_friends { border: unset !important; background: transparent !important; } [data-theme="dark"] .friend { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.06) !important; } }