/* ========================================================= PROFILE HEADER ========================================================= */ .profile-header { background:#fff; border:1px solid #ddd; border-radius:4px; } /* ========================================================= COVER ========================================================= */ .profile-header .profile-cover-wrapper { background:#eee; } .profile-header .profile-cover-wrapper img { display:block; } /* ========================================================= AVATAR Classic white framed avatar ========================================================= */ .profile-header .profile-avatar-wrapper { background:#fff; } .profile-header .profile-avatar-wrapper img { border:4px solid #fff; background:#fff; } /* ========================================================= PROFILE NAME ========================================================= */ .profile-header .profile-name-wrapper { min-width:0; } .profile-header .profile-name-wrapper a { text-decoration:none; } .profile-header .profile-name-wrapper a:first-child { font-weight:700; } /* ========================================================= PROFILE BUTTONS Classic Sngine appearance ========================================================= */ .profile-header .profile-buttons-wrapper { white-space:nowrap; } .profile-header .profile-buttons-wrapper .btn { border-radius:4px !important; box-shadow:none !important; font-weight:600; } /* ========================================================= PRIMARY ========================================================= */ .profile-header .profile-buttons-wrapper .btn-primary, .profile-header .profile-buttons-wrapper .btn-success { background:#00c853; border-color:#00b84d; color:#fff; } .profile-header .profile-buttons-wrapper .btn-primary:hover, .profile-header .profile-buttons-wrapper .btn-success:hover { background:#00b84d; border-color:#009e42; } /* ========================================================= LIGHT BUTTON ========================================================= */ .profile-header .profile-buttons-wrapper .btn-light { background:#f5f5f5; border-color:#ccc; color:#333; } .profile-header .profile-buttons-wrapper .btn-light:hover { background:#e9e9e9; } /* ========================================================= COVER ACTION ICONS Keep original Sngine appearance ========================================================= */ .profile-header .profile-cover-buttons i { background:rgba(255,255,255,.95); color:#333; } .profile-header .profile-cover-buttons i:hover { background:#fff; } /* ========================================================= DROPDOWN DO NOT CHANGE SNGINE DROPDOWN FUNCTIONALITY ========================================================= */ .profile-header .dropdown-menu { border:1px solid #ccc; border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.15); } /* ========================================================= PROFILE TABS ========================================================= */ .profile-tabs-wrapper { background:#fff; border:1px solid #ddd; border-radius:4px; overflow-x:auto; box-shadow:none !important; } .profile-tabs-wrapper > a { text-decoration:none; color:#555; font-weight:600; } .profile-tabs-wrapper > a:hover { color:#222; background:#f5f5f5; } .profile-tabs-wrapper > a.active { color:#00a844; } .profile-tabs-wrapper > a.active:after { background:#00c853; } /* ========================================================= SNGINE ICONS ========================================================= */ .profile-header i, .profile-header svg, .profile-tabs-wrapper i, .profile-tabs-wrapper svg { vertical-align:middle; } /* ========================================================= MAIN CONTENT ========================================================= */ .sg-offcanvas-mainbar { background:#f3f3f3; } /* ========================================================= CARDS ========================================================= */ .sg-offcanvas-mainbar .card { background:#fff; border:1px solid #ddd; border-radius:4px; box-shadow:none !important; } /* ========================================================= CARD HEADER ========================================================= */ .sg-offcanvas-mainbar .card-header { background:#f8f8f8; border-bottom:1px solid #ddd; } /* ========================================================= CARD BODY ========================================================= */ .sg-offcanvas-mainbar .card-body { background:#fff; } /* ========================================================= FEED POSTS ========================================================= */ .sg-offcanvas-mainbar .post { background:#fff; border-radius:4px; } /* ========================================================= ABOUT ========================================================= */ .sg-offcanvas-mainbar .about-list { list-style:none; } .sg-offcanvas-mainbar .about-list-item { color:#444; } /* ========================================================= PROFILE LINKS ========================================================= */ .sg-offcanvas-mainbar a.text-info { color:#00a844 !important; } /* ========================================================= INPUTS ========================================================= */ .sg-offcanvas-mainbar .form-control, .sg-offcanvas-mainbar .form-select { border-color:#ccc; border-radius:4px; box-shadow:none !important; } .sg-offcanvas-mainbar .form-control:focus, .sg-offcanvas-mainbar .form-select:focus { border-color:#00c853; box-shadow:none !important; } /* ========================================================= GENERAL BUTTONS ========================================================= */ .sg-offcanvas-mainbar .btn { border-radius:4px; box-shadow:none !important; } .sg-offcanvas-mainbar .btn-primary { background:#00c853; border-color:#00b84d; } .sg-offcanvas-mainbar .btn-primary:hover { background:#00b84d; border-color:#009e42; } /* ========================================================= PHOTOS ========================================================= */ .sg-offcanvas-mainbar img { max-width:100%; } /* ========================================================= FRIEND / FOLLOWER AVATARS ========================================================= */ .circled-user-box img { border-radius:50%; } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .profile-header { border-radius:3px; } .profile-tabs-wrapper { border-radius:3px; } .sg-offcanvas-mainbar .card { border-radius:3px; } .profile-tabs-wrapper > a { font-size:13px; } .profile-header .profile-buttons-wrapper { white-space:normal; } .profile-header .profile-buttons-wrapper .btn { font-size:13px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px) { .profile-header { border-radius:2px; } .profile-tabs-wrapper { border-radius:2px; } .sg-offcanvas-mainbar .card { border-radius:2px; } } /* ========================================================= DARK MODE ========================================================= */ body.dark-mode .sg-offcanvas-mainbar { background:#111; } /* ========================================================= PROFILE ========================================================= */ body.dark-mode .profile-header { background:#181818; border-color:#333; } /* ========================================================= COVER ========================================================= */ body.dark-mode .profile-header .profile-cover-wrapper { background:#222; } /* ========================================================= AVATAR ========================================================= */ body.dark-mode .profile-header .profile-avatar-wrapper { background:#181818; } body.dark-mode .profile-header .profile-avatar-wrapper img { border-color:#181818; background:#181818; } /* ========================================================= NAME ========================================================= */ body.dark-mode .profile-header .profile-name-wrapper { color:#fff; } body.dark-mode .profile-header .profile-name-wrapper a { color:#fff; } /* ========================================================= LIGHT BUTTON ========================================================= */ body.dark-mode .profile-header .profile-buttons-wrapper .btn-light { background:#292929; border-color:#444; color:#fff; } body.dark-mode .profile-header .profile-buttons-wrapper .btn-light:hover { background:#333; } /* ========================================================= COVER BUTTONS ========================================================= */ body.dark-mode .profile-header .profile-cover-buttons i { background:#292929; color:#fff; } /* ========================================================= DROPDOWN ========================================================= */ body.dark-mode .profile-header .dropdown-menu { background:#1c1c1c; border-color:#444; } body.dark-mode .profile-header .dropdown-menu .dropdown-item { color:#eee; } body.dark-mode .profile-header .dropdown-menu .dropdown-item:hover { background:#292929; color:#fff; } /* ========================================================= TABS ========================================================= */ body.dark-mode .profile-tabs-wrapper { background:#181818; border-color:#333; } body.dark-mode .profile-tabs-wrapper > a { color:#aaa; } body.dark-mode .profile-tabs-wrapper > a:hover { color:#fff; background:#222; } body.dark-mode .profile-tabs-wrapper > a.active { color:#00c853; } /* ========================================================= CARDS ========================================================= */ body.dark-mode .sg-offcanvas-mainbar .card { background:#181818; border-color:#333; } /* ========================================================= CARD HEADER ========================================================= */ body.dark-mode .sg-offcanvas-mainbar .card-header { background:#202020; border-color:#333; color:#fff; } /* ========================================================= CARD BODY ========================================================= */ body.dark-mode .sg-offcanvas-mainbar .card-body { background:#181818; color:#eee; } /* ========================================================= FEED ========================================================= */ body.dark-mode .sg-offcanvas-mainbar .post { background:#181818; } /* ========================================================= ABOUT ========================================================= */ body.dark-mode .sg-offcanvas-mainbar .about-list-item { color:#ddd; } /* ========================================================= INPUTS ========================================================= */ body.dark-mode .sg-offcanvas-mainbar .form-control, body.dark-mode .sg-offcanvas-mainbar .form-select { background:#222; border-color:#444; color:#fff; } body.dark-mode .sg-offcanvas-mainbar .form-control::placeholder { color:#888; } /* ========================================================= DARK BUTTONS ========================================================= */ body.dark-mode .sg-offcanvas-mainbar .btn-light { background:#292929; border-color:#444; color:#fff; } /* ========================================================= DARK LINKS ========================================================= */ body.dark-mode .sg-offcanvas-mainbar a.text-info { color:#00c853 !important; }