Created
February 22, 2021 10:49
-
-
Save lisandi/07dcc913bc7f2ed451c5aae224222ca3 to your computer and use it in GitHub Desktop.
Sngine - downloaded User Information Example - links got replaced
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> <html lang="en_us" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <title>My Information</title> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style type="text/css">/** | |
| * Index: | |
| * | |
| * 01. BASIC | |
| * 02. MAIN | |
| * 03. HEADER | |
| * 04. COMMON | |
| * 05. PUBLISHER | |
| * 06. POST | |
| * 07. COMMENT | |
| * 08. BLOG | |
| * 09. AUTO-COMPLETE | |
| * 10. LIGHTBOX | |
| * 11. STORIES | |
| * 12. CHAT | |
| * 13. EMOJI | |
| * 14. REACTIONS | |
| * 15. PAGE = [BASIC] | |
| * 16. PAGE = [404] | |
| * 17. PAGE = [OAUTH] | |
| * 18. PAGE = [INDEX] | |
| * 19. PAGE = [FORUMS] | |
| * 20. PAGE = [DIRECTORY] | |
| * 21. PAGE = [MESSAGES] | |
| * 22. PAGE = [LIVE] | |
| * 23. PAGE = [PROFILE] | |
| * 24. PAGE = [ADMIN] | |
| * 25. PAGE = [MARKET] | |
| * 26. PAGE = [MOVIES] | |
| * 27. NOTY NOTIFICATION | |
| * 28. TRANSLATOR | |
| * 29. BIG ICON | |
| * 30. LOADER | |
| * 31. POST LOADER | |
| * 32. ON/OFF TOGGLE | |
| * 33. CUSTOM RADIO/CHECKBOX TEMPLATES | |
| * 34. SOCIAL BUTTONS | |
| * 35. EXTRAS | |
| * 36. OFFCANVAS | |
| */ | |
| /* BASIC */ | |
| /* ------------------------------- */ | |
| :root { | |
| --body-font-family: Roboto,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; | |
| --body-bg-color: #f0f2f5; | |
| --body-bg-color-dark: #131313; | |
| --body-color: #555; | |
| --body-color-dark: #dfdfdf; | |
| --link-color: #3367d6; | |
| --header-bg-color: #3367d6; | |
| --header-bg-color-dark: #212121; | |
| } | |
| body { | |
| font-family: var(--body-font-family); | |
| padding-top: 50px; /* 50px for header */ | |
| font-size: 13px; | |
| color: var(--body-color); | |
| background-color: var(--body-bg-color); | |
| } | |
| body.night-mode { | |
| color: var(--body-color-dark); | |
| background-color: var(--body-bg-color-dark); | |
| } | |
| body.n_activated, body.n_live { | |
| padding-top: 100px; /* 50px for header + 50px for top bar */ | |
| } | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| a { | |
| color: var(--link-color); | |
| } | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| pre { | |
| padding: 15px; | |
| font-size: 13px; | |
| word-break: break-all; | |
| word-wrap: break-word; | |
| background-color: #f7f7f7; | |
| border: 1px solid #dbdbdb; | |
| border-radius: 4px; | |
| } | |
| body.night-mode pre { | |
| color: var(--body-color-dark); | |
| background-color: #363636; | |
| border-color: #121212; | |
| } | |
| /* -- */ | |
| /* MAIN */ | |
| /* ------------------------------- */ | |
| /* == SVG == */ | |
| .svg-container { | |
| display: inline-block; | |
| } | |
| .svg-container svg { | |
| width: inherit!important; | |
| height: inherit!important; | |
| } | |
| /* == */ | |
| /* == Scrollbar == */ | |
| .custom-scrollbar ::-webkit-scrollbar { | |
| visibility: hidden; | |
| height: 8px; | |
| width: 8px; | |
| } | |
| .custom-scrollbar ::-webkit-scrollbar-thumb { | |
| visibility: hidden; | |
| border-radius: 4px; | |
| background: #808080; | |
| } | |
| .custom-scrollbar:hover ::-webkit-scrollbar, | |
| .custom-scrollbar:hover ::-webkit-scrollbar-thumb { | |
| visibility: visible; | |
| } | |
| /* == */ | |
| /* == Grid == */ | |
| @media (max-width: 576px) { | |
| .container, | |
| .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { | |
| padding-right: 5px; | |
| padding-left: 5px; | |
| } | |
| .row { | |
| margin-right: -5px; | |
| margin-left: -5px; | |
| } | |
| } | |
| /* == */ | |
| /* == Tooltip == */ | |
| .tooltip-inner { | |
| font-family: var(--body-font-family); | |
| font-size: 13px; | |
| white-space: nowrap; | |
| max-width: none; | |
| border-radius: 2px; | |
| } | |
| /* == */ | |
| /* == Badge == */ | |
| .badge.badge-lg { | |
| font-size: 100%; | |
| } | |
| /* == */ | |
| /* == Img-thumbnail == */ | |
| body.night-mode .img-thumbnail { | |
| background: #212121; | |
| border-color: #424242; | |
| } | |
| /* == */ | |
| /* == List-group == */ | |
| body.night-mode .list-group-item { | |
| background: #212121; | |
| border-color: #424242; | |
| } | |
| /* == */ | |
| /* == Nav-pills == */ | |
| /* -- Custom Nav */ | |
| .nav-pills.nav-search .nav-item, | |
| .nav-pills.nav-started .nav-item { | |
| margin-right: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .nav-pills.nav-search .nav-item:last-child, | |
| .nav-pills.nav-started .nav-item:last-child { | |
| margin-right: 0; | |
| } | |
| .nav-pills.nav-search .nav-link:not(.active) { | |
| background: #fff; | |
| } | |
| .nav-pills.nav-started .nav-link { | |
| padding-top: 15px; | |
| padding-bottom: 15px; | |
| } | |
| .nav-pills.nav-started .nav-link:not(.active) { | |
| background: #f3f3f3; | |
| } | |
| body.night-mode .nav-pills.nav-search .nav-link:not(.active), | |
| body.night-mode .nav-pills.nav-started .nav-link:not(.active) { | |
| background: #414141; | |
| color: #fff; | |
| } | |
| body.night-mode .nav-pills.nav-search .nav-link:not(.active):hover, | |
| body.night-mode .nav-pills.nav-started .nav-link:not(.active):hover { | |
| background: #555; | |
| } | |
| /* == */ | |
| /* == Nav-tabs == */ | |
| body.night-mode .nav-tabs { | |
| border-bottom-color: #363636; | |
| } | |
| body.night-mode .nav-tabs .nav-item.show .nav-link, | |
| body.night-mode .nav-tabs .nav-link.active { | |
| color: #fff; | |
| border-color: #363636 #363636 #212121; | |
| background-color: #212121; | |
| } | |
| body.night-mode .nav-tabs .nav-link:not(.active):hover { | |
| border-color: #363636; | |
| } | |
| /* == */ | |
| /* == Dropdown == */ | |
| .dropdown-menu { | |
| min-width: 200px; | |
| box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1); | |
| } | |
| body.night-mode .dropdown-menu { | |
| color: #e5e5e5; | |
| background: var(--header-bg-color-dark); | |
| box-shadow: 0 6px 12px rgba(0,0,0,.175); | |
| } | |
| .dropdown-menu .dropdown-item { | |
| font-size: 14px; | |
| padding: 8px 16px; | |
| } | |
| .night-mode .dropdown-item { | |
| color: #e5e5e5; | |
| } | |
| body.night-mode .dropdown-item:focus, | |
| body.night-mode .dropdown-item:hover { | |
| color: #e5e5e5; | |
| background-color: #333; | |
| } | |
| body.night-mode .dropdown-divider { | |
| border-top-color: #424242; | |
| } | |
| /* == */ | |
| /* == Modal == */ | |
| .modal { | |
| z-index: 999999; | |
| } | |
| body.night-mode .modal-content { | |
| background-color: #212121; | |
| } | |
| body.night-mode .modal-header, | |
| body.night-mode .modal-footer { | |
| border-color: #424242; | |
| } | |
| .modal-header.with-nav { | |
| padding-bottom: 0; | |
| border-bottom: 0; | |
| } | |
| /* == */ | |
| /* == Alert == */ | |
| .alert { | |
| padding: 16px 24px; | |
| } | |
| .alert-link:hover { | |
| text-decoration: underline; | |
| } | |
| .alert-dismissible { | |
| padding-right: 72px; | |
| } | |
| .alert-primary { | |
| color: #fff; | |
| border-color: #7889e8; | |
| background-color: #7889e8; | |
| } | |
| .alert-primary hr { | |
| border-top-color: #6276e4; | |
| } | |
| .alert-secondary { | |
| color: #212529; | |
| border-color: #f6f7f8; | |
| background-color: #f6f7f8; | |
| } | |
| .alert-secondary hr { | |
| border-top-color: #e8eaed; | |
| } | |
| .alert-success { | |
| color: #fff; | |
| border-color: #4fd69c; | |
| background-color: #4fd69c; | |
| } | |
| .alert-success hr { | |
| border-top-color: #3ad190; | |
| } | |
| .alert-info { | |
| color: #fff; | |
| border-color: #37d5f2; | |
| background-color: #37d5f2; | |
| } | |
| .alert-info hr { | |
| border-top-color: #1fd0f0; | |
| } | |
| .alert-warning { | |
| color: #fff; | |
| border-color: #fc7c5f; | |
| background-color: #fc7c5f; | |
| } | |
| .alert-warning hr { | |
| border-top-color: #fc6846; | |
| } | |
| .alert-danger { | |
| color: #fff; | |
| border-color: #f75676; | |
| background-color: #f75676; | |
| } | |
| .alert-danger hr { | |
| border-top-color: #f63e62; | |
| } | |
| .alert-light { | |
| color: #fff; | |
| border-color: #bac1c8; | |
| background-color: #bac1c8; | |
| } | |
| .alert-light hr { | |
| border-top-color: #acb4bd; | |
| } | |
| .alert-dark { | |
| color: #fff; | |
| border-color: #45484b; | |
| background-color: #45484b; | |
| } | |
| .alert-dark hr { | |
| border-top-color: #393b3e; | |
| } | |
| /* -- Custom Alerts */ | |
| .alert-post { | |
| background: #f8f9fa; | |
| color: var(--link-color); | |
| font-weight: 600; | |
| box-shadow: 0 1px 1px rgba(0,0,0,.05); | |
| } | |
| .night-mode .alert-post { | |
| background: #212121; | |
| } | |
| .alert-chat { | |
| background: #8d8d8d; | |
| width: 75%; | |
| padding: 5px 10px!important; | |
| margin: 0 auto!important; | |
| color: #fff; | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| } | |
| body.night-mode .alert-chat { | |
| background: #000; | |
| } | |
| .alert .title { | |
| padding-bottom: 8px; | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| border-bottom-width: 1px; | |
| border-bottom-style: solid; | |
| } | |
| .alert .icon { | |
| display: table-cell; | |
| vertical-align: middle; | |
| padding-right: 10px; | |
| } | |
| .alert .text { | |
| display: table-cell; | |
| vertical-align: top; | |
| text-align: left; | |
| } | |
| /* == */ | |
| /* == Buttons == */ | |
| .btn { | |
| font-size: 12px; | |
| font-weight: 600; | |
| padding: 12px 34px; | |
| white-space: nowrap; | |
| border-radius: 2px; | |
| } | |
| .btn.focus, .btn:focus { | |
| outline: 0; | |
| box-shadow: none; | |
| } | |
| .btn.disabled, .btn:disabled { | |
| box-shadow: none; | |
| } | |
| .btn-lg, .btn-group-lg>.btn { | |
| font-size: 14px; | |
| padding: 16px 96px; | |
| } | |
| .btn-md, .btn-group-md>.btn { | |
| font-size: 12px; | |
| padding: 16px 56px; | |
| } | |
| .btn-sm, .btn-group-sm>.btn { | |
| font-size: 11px; | |
| padding: 8px 26px; | |
| } | |
| .btn-icon { | |
| padding: 12px 14px; | |
| } | |
| .btn-lg.btn-icon { | |
| padding: 19px 22px; | |
| } | |
| .btn-md.btn-icon { | |
| padding: 17px 20px; | |
| } | |
| .btn-sm.btn-icon { | |
| padding: 5px 8px; | |
| } | |
| .btn-primary, | |
| .btn-primary.disabled,.btn-primary:disabled, | |
| .btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle { | |
| color: #fff; | |
| border-color: #5e72e4; | |
| background-color: #5e72e4; | |
| } | |
| .btn-primary { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); | |
| } | |
| .btn-primary:hover { | |
| color: #fff; | |
| border-color: #4d61cf; | |
| background-color: #4d61cf; | |
| } | |
| .btn-primary.focus,.btn-primary:focus { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0 rgba(94,114,228,.5) | |
| } | |
| .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus { | |
| box-shadow: none; | |
| } | |
| .btn-secondary, | |
| .btn-secondary.disabled,.btn-secondary:disabled, | |
| .btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle { | |
| color: #212529; | |
| border-color: #f7fafc; | |
| background-color: #f7fafc; | |
| } | |
| .btn-secondary { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); | |
| } | |
| .btn-secondary:hover { | |
| color: #212529; | |
| border-color: #f1f4f6; | |
| background-color: #f1f4f6; | |
| } | |
| .btn-secondary.focus,.btn-secondary:focus { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0 rgba(247,250,252,.5); | |
| } | |
| .btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus { | |
| box-shadow: none; | |
| } | |
| .btn-success, | |
| .btn-success.disabled,.btn-success:disabled, | |
| .btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle { | |
| color: #fff; | |
| border-color: #2dce89; | |
| background-color: #2dce89; | |
| } | |
| .btn-success { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); | |
| } | |
| .btn-success:hover { | |
| color: #fff; | |
| border-color: #2bc080; | |
| background-color: #2bc080; | |
| } | |
| .btn-success.focus,.btn-success:focus { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0 rgba(45,206,137,.5); | |
| } | |
| .btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus { | |
| box-shadow: none; | |
| } | |
| .btn-info, | |
| .btn-info.disabled,.btn-info:disabled, | |
| .btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle { | |
| color: #fff; | |
| border-color: #11cdef; | |
| background-color: #11cdef; | |
| } | |
| .btn-info { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); | |
| } | |
| .btn-info:hover { | |
| color: #fff; | |
| border-color: #10bede; | |
| background-color: #10bede; | |
| } | |
| .btn-info.focus,.btn-info:focus { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0 rgba(17,205,239,.5); | |
| } | |
| .btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus { | |
| box-shadow: none; | |
| } | |
| .btn-warning, | |
| .btn-warning.disabled,.btn-warning:disabled, | |
| .btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle { | |
| color: #fff; | |
| border-color: #fb6340; | |
| background-color: #fb6340; | |
| } | |
| .btn-warning { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); | |
| } | |
| .btn-warning:hover { | |
| color: #fff; | |
| border-color: #f0603f; | |
| background-color: #f0603f; | |
| } | |
| .btn-warning.focus,.btn-warning:focus { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0 rgba(251,99,64,.5); | |
| } | |
| .btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus { | |
| box-shadow: none; | |
| } | |
| .btn-danger, | |
| .btn-danger.disabled,.btn-danger:disabled, | |
| .btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle { | |
| color: #fff; | |
| border-color: #f5365c; | |
| background-color: #f5365c; | |
| } | |
| .btn-danger { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); | |
| } | |
| .btn-danger:hover { | |
| color: #fff; | |
| border-color: #eb3357; | |
| background-color: #eb3357; | |
| } | |
| .btn-danger.focus,.btn-danger:focus { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0 rgba(245,54,92,.5); | |
| } | |
| .btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus { | |
| box-shadow: none; | |
| } | |
| .btn-light, | |
| .btn-light.disabled,.btn-light:disabled, | |
| .btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle { | |
| color: #fff; | |
| border-color: #adb5bd; | |
| background-color: #adb5bd; | |
| } | |
| .btn-light { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); | |
| } | |
| .btn-light:hover { | |
| color: #fff; | |
| border-color: #a5adb4; | |
| background-color: #a5adb4 | |
| } | |
| .btn-light.focus,.btn-light:focus { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0 rgba(173,181,189,.5); | |
| } | |
| .btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus { | |
| box-shadow: none; | |
| } | |
| .btn-dark, | |
| .btn-dark.disabled,.btn-dark:disabled, | |
| .btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle { | |
| color: #fff; | |
| border-color: #212529; | |
| background-color: #212529; | |
| } | |
| .btn-dark { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); | |
| } | |
| .btn-dark:hover { | |
| color: #fff; | |
| border-color: #212529; | |
| background-color: #212529 | |
| } | |
| .btn-dark.focus,.btn-dark:focus { | |
| box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0 rgba(33,37,41,.5); | |
| } | |
| .btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus { | |
| box-shadow: none; | |
| } | |
| .btn-link { | |
| font-weight: 400; | |
| color: #5e72e4; | |
| background-color: transparent | |
| } | |
| .btn-link:hover { | |
| text-decoration: none; | |
| color: #233dd2; | |
| border-color: transparent; | |
| background-color: transparent | |
| } | |
| .btn-link.focus,.btn-link:focus { | |
| text-decoration: none; | |
| border-color: transparent; | |
| box-shadow: none | |
| } | |
| .btn-link.disabled,.btn-link:disabled { | |
| pointer-events: none; | |
| color: #8898aa | |
| } | |
| .btn-outline-primary { | |
| color: #5e72e4; | |
| border-color: #5e72e4; | |
| background-color: transparent; | |
| background-image: none | |
| } | |
| .btn-outline-primary:hover { | |
| color: #fff; | |
| border-color: #5e72e4; | |
| background-color: #5e72e4 | |
| } | |
| .btn-outline-primary.focus,.btn-outline-primary:focus { | |
| box-shadow: 0 0 0 0 rgba(94,114,228,.5); | |
| } | |
| .btn-outline-primary.disabled,.btn-outline-primary:disabled { | |
| color: #5e72e4; | |
| background-color: transparent | |
| } | |
| .btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle { | |
| color: #fff; | |
| border-color: #5e72e4; | |
| background-color: #5e72e4 | |
| } | |
| .btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus { | |
| box-shadow: 0 0 0 0 rgba(94,114,228,.5) | |
| } | |
| .btn-outline-secondary { | |
| color: #f7fafc; | |
| border-color: #f7fafc; | |
| background-color: transparent; | |
| background-image: none | |
| } | |
| .btn-outline-secondary:hover { | |
| color: #212529; | |
| border-color: #f7fafc; | |
| background-color: #f7fafc | |
| } | |
| .btn-outline-secondary.focus,.btn-outline-secondary:focus { | |
| box-shadow: 0 0 0 0 rgba(247,250,252,.5) | |
| } | |
| .btn-outline-secondary.disabled,.btn-outline-secondary:disabled { | |
| color: #f7fafc; | |
| background-color: transparent | |
| } | |
| .btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle { | |
| color: #212529; | |
| border-color: #f7fafc; | |
| background-color: #f7fafc | |
| } | |
| .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus { | |
| box-shadow: 0 0 0 0 rgba(247,250,252,.5) | |
| } | |
| .btn-outline-success { | |
| color: #2dce89; | |
| border-color: #2dce89; | |
| background-color: transparent; | |
| background-image: none | |
| } | |
| .btn-outline-success:hover { | |
| color: #fff; | |
| border-color: #2dce89; | |
| background-color: #2dce89 | |
| } | |
| .btn-outline-success.focus,.btn-outline-success:focus { | |
| box-shadow: 0 0 0 0 rgba(45,206,137,.5) | |
| } | |
| .btn-outline-success.disabled,.btn-outline-success:disabled { | |
| color: #2dce89; | |
| background-color: transparent | |
| } | |
| .btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle { | |
| color: #fff; | |
| border-color: #2dce89; | |
| background-color: #2dce89 | |
| } | |
| .btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus { | |
| box-shadow: 0 0 0 0 rgba(45,206,137,.5) | |
| } | |
| .btn-outline-info { | |
| color: #11cdef; | |
| border-color: #11cdef; | |
| background-color: transparent; | |
| background-image: none | |
| } | |
| .btn-outline-info:hover { | |
| color: #fff; | |
| border-color: #11cdef; | |
| background-color: #11cdef | |
| } | |
| .btn-outline-info.focus,.btn-outline-info:focus { | |
| box-shadow: 0 0 0 0 rgba(17,205,239,.5) | |
| } | |
| .btn-outline-info.disabled,.btn-outline-info:disabled { | |
| color: #11cdef; | |
| background-color: transparent | |
| } | |
| .btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle { | |
| color: #fff; | |
| border-color: #11cdef; | |
| background-color: #11cdef | |
| } | |
| .btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus { | |
| box-shadow: 0 0 0 0 rgba(17,205,239,.5) | |
| } | |
| .btn-outline-warning { | |
| color: #fb6340; | |
| border-color: #fb6340; | |
| background-color: transparent; | |
| background-image: none | |
| } | |
| .btn-outline-warning:hover { | |
| color: #fff; | |
| border-color: #fb6340; | |
| background-color: #fb6340 | |
| } | |
| .btn-outline-warning.focus,.btn-outline-warning:focus { | |
| box-shadow: 0 0 0 0 rgba(251,99,64,.5) | |
| } | |
| .btn-outline-warning.disabled,.btn-outline-warning:disabled { | |
| color: #fb6340; | |
| background-color: transparent | |
| } | |
| .btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle { | |
| color: #fff; | |
| border-color: #fb6340; | |
| background-color: #fb6340 | |
| } | |
| .btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus { | |
| box-shadow: 0 0 0 0 rgba(251,99,64,.5) | |
| } | |
| .btn-outline-danger { | |
| color: #f5365c; | |
| border-color: #f5365c; | |
| background-color: transparent; | |
| background-image: none | |
| } | |
| .btn-outline-danger:hover { | |
| color: #fff; | |
| border-color: #f5365c; | |
| background-color: #f5365c | |
| } | |
| .btn-outline-danger.focus,.btn-outline-danger:focus { | |
| box-shadow: 0 0 0 0 rgba(245,54,92,.5) | |
| } | |
| .btn-outline-danger.disabled,.btn-outline-danger:disabled { | |
| color: #f5365c; | |
| background-color: transparent | |
| } | |
| .btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle { | |
| color: #fff; | |
| border-color: #f5365c; | |
| background-color: #f5365c | |
| } | |
| .btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus { | |
| box-shadow: 0 0 0 0 rgba(245,54,92,.5) | |
| } | |
| .btn-outline-light { | |
| color: #adb5bd; | |
| border-color: #adb5bd; | |
| background-color: transparent; | |
| background-image: none | |
| } | |
| .btn-outline-light:hover { | |
| color: #fff; | |
| border-color: #adb5bd; | |
| background-color: #adb5bd | |
| } | |
| .btn-outline-light.focus,.btn-outline-light:focus { | |
| box-shadow: 0 0 0 0 rgba(173,181,189,.5) | |
| } | |
| .btn-outline-light.disabled,.btn-outline-light:disabled { | |
| color: #adb5bd; | |
| background-color: transparent | |
| } | |
| .btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle { | |
| color: #fff; | |
| border-color: #adb5bd; | |
| background-color: #adb5bd | |
| } | |
| .btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus { | |
| box-shadow: 0 0 0 0 rgba(173,181,189,.5) | |
| } | |
| .btn-outline-dark { | |
| color: #212529; | |
| border-color: #212529; | |
| background-color: transparent; | |
| background-image: none | |
| } | |
| .btn-outline-dark:hover { | |
| color: #fff; | |
| border-color: #212529; | |
| background-color: #212529 | |
| } | |
| .btn-outline-dark.focus,.btn-outline-dark:focus { | |
| box-shadow: 0 0 0 0 rgba(33,37,41,.5) | |
| } | |
| .btn-outline-dark.disabled,.btn-outline-dark:disabled { | |
| color: #212529; | |
| background-color: transparent | |
| } | |
| .btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle { | |
| color: #fff; | |
| border-color: #212529; | |
| background-color: #212529 | |
| } | |
| .btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus { | |
| box-shadow: 0 0 0 0 rgba(33,37,41,.5) | |
| } | |
| /* -- Custom Buttons */ | |
| .btn-rounded { | |
| border: 0!important; | |
| border-radius: 50%; | |
| } | |
| .btn-delete:hover { | |
| color: #fff; | |
| border-color: #eb3357; | |
| background-color: #eb3357; | |
| } | |
| .btn-delete:hover .fa:before { | |
| content: "\f1f8"; | |
| } | |
| .btn-payment { | |
| background: #f7f7f7; | |
| } | |
| .btn-payment:hover { | |
| background: #f1f1f1; | |
| } | |
| .btn-voice-start, | |
| .btn-voice-stop { | |
| display: inline-block; | |
| padding: 4px 14px; | |
| background: #007bff; | |
| color: #fff; | |
| cursor: pointer; | |
| border-radius: 18px; | |
| } | |
| .btn-voice-stop { | |
| background: red; | |
| } | |
| /* == */ | |
| /* == Inputs == */ | |
| .form-control, .input-group-text { | |
| border-color: #ddd; | |
| border-radius: 2px; | |
| } | |
| body.night-mode .form-control, | |
| body.night-mode .input-group-text { | |
| background-color: #232323; | |
| border-color: #363636; | |
| color: #dfdfdf; | |
| } | |
| .form-control:focus { | |
| box-shadow: none; | |
| } | |
| .form-control-label { | |
| font-weight: 600; | |
| color: #525f7f; | |
| margin-bottom: 0; | |
| } | |
| body.night-mode .form-control-label { | |
| color: #a3afce; | |
| } | |
| body.night-mode .form-control-plaintext { | |
| color: #eee; | |
| } | |
| .input-group .btn { | |
| padding-top: 9px; | |
| padding-bottom: 9px; | |
| } | |
| .custom-control-label { | |
| padding-top: 2px; | |
| } | |
| /* -- Custom Inputs */ | |
| .form-table-row { | |
| display: flex; | |
| margin-bottom: 30px; | |
| } | |
| .form-table-row > div { | |
| flex: 1; | |
| } | |
| .form-table-row > div:last-child { | |
| flex-basis: auto; | |
| flex-grow: 0; | |
| margin-left: 10px; | |
| } | |
| .form-table-row > div.avatar { | |
| flex-basis: auto; | |
| flex-grow: 0; | |
| margin-right: 10px; | |
| } | |
| .input-money { | |
| position: relative; | |
| } | |
| .input-money span { | |
| font-size: 20px; | |
| position: absolute; | |
| top: 15px; | |
| left: 0; | |
| width: 45px; | |
| text-align: center; | |
| } | |
| .input-money input { | |
| font-size: 40px; | |
| line-height: 40px; | |
| font-family: opensanslight; | |
| margin: 0; | |
| padding: 10px; | |
| padding-left: 45px; | |
| height: 60px; | |
| outline: 0; | |
| } | |
| /* == */ | |
| /* == Card == */ | |
| .card { | |
| border: 1px solid #e6ecf5; | |
| margin-bottom: 20px; | |
| } | |
| body.night-mode .card { | |
| background: #212121; | |
| border-color: #212121; | |
| } | |
| .card-header { | |
| background-color: #f6f9fc; | |
| border-color: #e6ecf5; | |
| } | |
| body.night-mode .card-header { | |
| background: #212121; | |
| border-color: #363636; | |
| } | |
| /* -- Custom Cards */ | |
| .card-header.with-icon { | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| .card-header.with-nav { | |
| padding-bottom: 0; | |
| border-bottom: 0; | |
| } | |
| @media (min-width: 768px) { | |
| .card-header.with-icon { | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| } | |
| .card-header.block-title { | |
| font-size: 9px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| padding: 10px 35px; | |
| background: transparent; | |
| } | |
| .card-body.with-nav, | |
| .card-body.with-list, | |
| .card-body.with-form { | |
| padding: 10px; | |
| } | |
| .card-body .divider, | |
| .modal-body .divider { | |
| border-top: 1px solid #e6ecf5; | |
| margin: 25px 0; | |
| } | |
| .card-body .divider.dashed, | |
| .modal-body .divider.dashed { | |
| border-top-style: dashed; | |
| } | |
| body.night-mode .card-body .divider, | |
| body.night-mode .modal-body .divider { | |
| border-color: #131313; | |
| } | |
| @media (min-width: 768px) { | |
| .card-body.page-content { | |
| padding: 50px; | |
| } | |
| } | |
| body.night-mode .card-pricing, | |
| body.night-mode .card-pricing .list-group-item { | |
| background: #292929; | |
| } | |
| /* == */ | |
| /* == Bg-gradient == */ | |
| .bg-gradient-primary { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#5e72e4 0,#825ee4 100%)!important; | |
| } | |
| .bg-gradient-secondary { | |
| background: linear-gradient(87deg,#f7fafc 0,#f7f8fc 100%)!important; | |
| } | |
| .bg-gradient-success { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#2dce89 0,#2dcecc 100%)!important; | |
| } | |
| .bg-gradient-info { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#11cdef 0,#1171ef 100%)!important; | |
| } | |
| .bg-gradient-warning { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#fb6340 0,#fbb140 100%)!important; | |
| } | |
| .bg-gradient-danger { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#f5365c 0,#f56036 100%)!important; | |
| } | |
| .bg-gradient-light { | |
| background: linear-gradient(87deg,#adb5bd 0,#adaebd 100%)!important; | |
| } | |
| .bg-gradient-dark { | |
| color: #eee; | |
| background: linear-gradient(87deg,#212529 0,#212229 100%)!important; | |
| } | |
| .bg-gradient-default { | |
| color: #eee; | |
| background: linear-gradient(87deg,#172b4d 0,#1a174d 100%)!important; | |
| } | |
| .bg-gradient-white { | |
| background: linear-gradient(87deg,#fff 0,#fff 100%)!important; | |
| } | |
| .bg-gradient-neutral { | |
| background: linear-gradient(87deg,#fff 0,#fff 100%)!important; | |
| } | |
| .bg-gradient-darker { | |
| color: #eee; | |
| background: linear-gradient(87deg,#000 0,#000 100%)!important; | |
| } | |
| .bg-gradient-blue { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#5e72e4 0,#825ee4 100%)!important; | |
| } | |
| .bg-gradient-indigo { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#5603ad 0,#9d03ad 100%)!important; | |
| } | |
| .bg-gradient-purple { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#8965e0 0,#bc65e0 100%)!important; | |
| } | |
| .bg-gradient-pink { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#f3a4b5 0,#f3b4a4 100%)!important; | |
| } | |
| .bg-gradient-red { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#f5365c 0,#f56036 100%)!important; | |
| } | |
| .bg-gradient-orange { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#fb6340 0,#fbb140 100%)!important; | |
| } | |
| .bg-gradient-yellow { | |
| color: #666; | |
| background: linear-gradient(87deg,#ffd600 0,#beff00 100%)!important; | |
| } | |
| .bg-gradient-green { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#2dce89 0,#2dcecc 100%)!important; | |
| } | |
| .bg-gradient-teal { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#11cdef 0,#1171ef 100%)!important; | |
| } | |
| .bg-gradient-cyan { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#2bffc6 0,#2be0ff 100%)!important; | |
| } | |
| .bg-gradient-white { | |
| background: linear-gradient(87deg,#fff 0,#fff 100%)!important; | |
| } | |
| .bg-gradient-gray { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#8898aa 0,#888aaa 100%)!important; | |
| } | |
| .bg-gradient-gray-dark { | |
| color: #fff!important; | |
| background: linear-gradient(87deg,#32325d 0,#44325d 100%)!important; | |
| } | |
| .bg-gradient-light { | |
| background: linear-gradient(87deg,#ced4da 0,#cecfda 100%)!important; | |
| } | |
| .bg-gradient-lighter { | |
| background: linear-gradient(87deg,#e9ecef 0,#e9eaef 100%)!important; | |
| } | |
| /* == */ | |
| /* == Callout == */ | |
| .bs-callout { | |
| background: #fff; | |
| padding: 20px; | |
| margin: 20px 0; | |
| border-left: 5px solid #eee; | |
| border-radius: 3px; | |
| } | |
| body.night-mode .bs-callout { | |
| background: #212121; | |
| } | |
| .bs-callout h4 { | |
| margin-top: 0; | |
| margin-bottom: 5px; | |
| } | |
| .bs-callout p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .bs-callout code { | |
| border-radius: 3px; | |
| } | |
| .bs-callout+.bs-callout { | |
| margin-top: -5px; | |
| } | |
| .bs-callout-default { | |
| border-left-color: #777; | |
| } | |
| .bs-callout-default h4 { | |
| color: #777; | |
| } | |
| .bs-callout-primary { | |
| border-left-color: #428bca; | |
| } | |
| .bs-callout-primary h4 { | |
| color: #428bca; | |
| } | |
| .bs-callout-success { | |
| border-left-color: #5cb85c; | |
| } | |
| .bs-callout-success h4 { | |
| color: #5cb85c; | |
| } | |
| .bs-callout-danger { | |
| border-left-color: #d9534f; | |
| } | |
| .bs-callout-danger h4 { | |
| color: #d9534f; | |
| } | |
| .bs-callout-warning { | |
| border-left-color: #f0ad4e; | |
| } | |
| .bs-callout-warning h4 { | |
| color: #f0ad4e; | |
| } | |
| .bs-callout-info { | |
| border-left-color: #5bc0de; | |
| } | |
| .bs-callout-info h4 { | |
| color: #5bc0de; | |
| } | |
| /* == */ | |
| /* == [JS Plugin] Bootstrap-Select == */ | |
| .bootstrap-select:not(.input-group-btn) { | |
| height: 100%; | |
| } | |
| .bootstrap-select .dropdown-toggle .filter-option { | |
| display: inline-block!important; | |
| position: static!important; | |
| padding: 0!important; | |
| } | |
| .bootstrap-select .btn-outline-light { | |
| color: #495057; | |
| border-color: #ddd; | |
| } | |
| .bootstrap-select .option .icon { | |
| display: table-cell; | |
| vertical-align: middle; | |
| padding-right: 10px | |
| } | |
| .bootstrap-select .option .text { | |
| display: table-cell; | |
| vertical-align: top; | |
| text-align: left | |
| } | |
| /* == */ | |
| /* == [JS Plugin] MCE Editor == */ | |
| div.mce-fullscreen { | |
| z-index: 99999; | |
| } | |
| /* == */ | |
| /* == [JS Plugin] jQuery-UI (autocomplete) == */ | |
| .ui-autocomplete { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| cursor: default; | |
| z-index: 9999; | |
| } | |
| .ui-widget-content { | |
| background: #fff; | |
| color: #444; | |
| z-index: 99999; | |
| padding: 10px; | |
| border-radius: 0 0 3px 3px; | |
| box-shadow: 0 3px 4px rgba(0,0,0,.15); | |
| } | |
| body.night-mode .ui-widget-content { | |
| background: var(--header-bg-color-dark); | |
| box-shadow: 0 6px 12px rgba(0,0,0,.175); | |
| } | |
| .ui-menu-item { | |
| position: relative; | |
| margin: 0; | |
| padding: 5px 0; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| } | |
| .ui-menu-item:hover { | |
| background: #efefef; | |
| } | |
| body.night-mode .ui-menu-item:hover { | |
| background: #424242; | |
| } | |
| .ui-menu-item a { | |
| color: #444; | |
| } | |
| body.night-mode .ui-menu-item a { | |
| color: #e5e5e5; | |
| } | |
| .ui-menu-item img { | |
| width: 30px; | |
| margin: 5px; | |
| border-radius: 50%; | |
| } | |
| .ui-menu-item span { | |
| font-size: 13px; | |
| } | |
| .ui-helper-hidden-accessible { | |
| display: none; | |
| } | |
| /* -- */ | |
| /* == [JS Plugin] Tagify == */ | |
| body.night-mode .tagify { | |
| border-color: #363636; | |
| } | |
| body.night-mode .tagify__dropdown { | |
| border-color: #363636; | |
| background-color: #424242; | |
| } | |
| body.night-mode .tagify__dropdown__item--active { | |
| background-color: #212121; | |
| } | |
| /* == */ | |
| /* == [JS Plugin] VideoJS == */ | |
| .video-js:hover { | |
| cursor: pointer; | |
| } | |
| .video-js .vjs-big-play-button { | |
| border-radius: 50%!important; | |
| width: 1.6em!important; | |
| height: 1.6em!important; | |
| background: #3367d6!important; | |
| border-color: #3367d6!important; | |
| top: 50%!important; | |
| left: 50%!important; | |
| transform: translate(-50%, -50%)!important; | |
| } | |
| .video-js:hover .vjs-big-play-button, | |
| .video-js .vjs-big-play-button:focus { | |
| background: #2850a7!important; | |
| border-color: #2850a7!important; | |
| } | |
| /* == */ | |
| /* == [JS Plugin] Datetimepicker == */ | |
| body.night-mode .bootstrap-datetimepicker-widget * { | |
| color: #fff!important; | |
| } | |
| body.night-mode .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, | |
| body.night-mode .bootstrap-datetimepicker-widget table td.day:hover, | |
| body.night-mode .bootstrap-datetimepicker-widget table td.hour:hover, | |
| body.night-mode .bootstrap-datetimepicker-widget table td.minute:hover, | |
| body.night-mode .bootstrap-datetimepicker-widget table td.second:hover, | |
| body.night-mode .bootstrap-datetimepicker-widget table td span:hover { | |
| background: #313131; | |
| } | |
| body.night-mode .bootstrap-datetimepicker-widget table td.old, | |
| body.night-mode .bootstrap-datetimepicker-widget table td.new { | |
| color: #999!important; | |
| } | |
| /* == */ | |
| /* HEADER */ | |
| /* ------------------------------- */ | |
| /* main-wrapper */ | |
| .main-wrapper { | |
| width: 100%; | |
| min-width: 260px; /* to show scroll for small size browsers ;) */ | |
| } | |
| /* -- */ | |
| /* top-bar */ | |
| .top-bar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 50px; | |
| font-size: 12px; | |
| line-height: 50px; | |
| background: #fff2cc; | |
| color: #333; | |
| z-index: 1001; | |
| } | |
| @media (min-width: 768px) { | |
| .top-bar { | |
| font-size: 13px; | |
| } | |
| .top-bar .col-sm-5 { | |
| text-align: right; | |
| } | |
| } | |
| .top-bar.danger { | |
| background: #ce3426; | |
| color: #fff; | |
| } | |
| .top-bar.danger a { | |
| color: #fff200; | |
| } | |
| .top-bar.danger a:hover { | |
| text-decoration: underline; | |
| } | |
| /* -- */ | |
| /* main-header */ | |
| .main-header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 50px; | |
| background: var(--header-bg-color); | |
| z-index: 1001; | |
| } | |
| body.night-mode:not(.visitor) .main-header { | |
| background: var(--header-bg-color-dark); | |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| /* ** fix bootstrap modal padding-right for hiding scroll */ | |
| body.modal-open .main-header, | |
| body.modal-open .top-bar { | |
| padding-right: 17px !important; | |
| } | |
| @media (min-width: 768px) { | |
| body.modal-open:not(.n_chat) .main-header, | |
| body.modal-open:not(.n_chat) .top-bar { | |
| padding-right: 227px !important; | |
| } | |
| } | |
| /* -- */ | |
| @media (min-width: 1200px) { | |
| .main-wrapper, | |
| .top-bar, | |
| .main-header { | |
| padding-right: 210px; | |
| } | |
| body.n_chat .main-wrapper, | |
| body.n_chat .top-bar, | |
| body.n_chat .main-header{ | |
| padding-right: 0; | |
| } | |
| } | |
| body.n_activated .main-header, | |
| body.n_live .main-header { | |
| top: 50px; /* for top bar */ | |
| } | |
| /* -- */ | |
| /* logo-wrapper */ | |
| .main-header .logo-wrapper { | |
| padding-left: 15px; | |
| padding-right: 20px; | |
| height: 50px; | |
| overflow: hidden; | |
| word-break: break-all; | |
| } | |
| .main-header .logo { | |
| display: block; | |
| font-size: 11px; | |
| font-weight: 600; | |
| line-height: 50px; | |
| color: #fff; | |
| opacity: 1; | |
| text-transform: uppercase; | |
| } | |
| .main-header .logo:hover { | |
| opacity: 0.8; | |
| text-decoration: none; | |
| } | |
| .main-header .logo img { | |
| max-height: 50px; | |
| } | |
| .main-header .home-icon { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| display: block; | |
| text-align: center; | |
| color: #fff; | |
| height: 50px; | |
| padding: 18px 8px; | |
| line-height: 100%; | |
| } | |
| .main-header .home-icon:hover { | |
| opacity: 0.8; | |
| } | |
| /* -- */ | |
| /* search-wrapper */ | |
| .main-header .search-wrapper { | |
| position: relative; | |
| } | |
| .main-header .search-input-icon { | |
| position: absolute; | |
| top: 8px; | |
| left: 12px; | |
| color: #96aad4; | |
| } | |
| .main-header .search-wrapper .form-control { | |
| height: 34px; | |
| margin-top: 8px; | |
| margin-bottom: 8px; | |
| padding-left: 34px; | |
| box-shadow: none; | |
| background: #2850a7; | |
| border: 0 none; | |
| border-radius: 18px; | |
| color: #fff; | |
| } | |
| body.night-mode:not(.visitor) .main-header .search-wrapper .form-control { | |
| background: var(--body-bg-color-dark); | |
| } | |
| .main-header .search-wrapper .form-control::-webkit-input-placeholder { | |
| color: #96aad4; | |
| } | |
| .main-header .search-wrapper .form-control:-moz-placeholder { | |
| color: #96aad4; | |
| opacity: 1; | |
| } | |
| .main-header .search-wrapper .form-control:-ms-input-placeholder { | |
| color: #96aad4; | |
| } | |
| /* -- */ | |
| /* navbar-wrapper */ | |
| @media (min-width: 768px) { | |
| .navbar-wrapper { | |
| float: right; | |
| } | |
| } | |
| .navbar-wrapper > ul > li { | |
| float: left; | |
| display: block; | |
| width: 14.28571428571429%; | |
| } | |
| @media (min-width: 768px) { | |
| .navbar-wrapper > ul > li { | |
| width: auto!important; | |
| margin-right: 2px; | |
| } | |
| .navbar-wrapper > ul > li:last-child { | |
| margin-right: 0; | |
| } | |
| } | |
| body.visitor .navbar-wrapper > ul > li { | |
| width: auto; | |
| } | |
| .navbar-wrapper > ul > li > a { | |
| position: relative; | |
| display: block; | |
| text-align: center; | |
| color: #fff; | |
| height: 50px; | |
| padding: 18px 8px; | |
| line-height: 100%; | |
| } | |
| .navbar-wrapper > ul > li > a:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| body.night-mode .navbar-wrapper > ul > li > a:hover { | |
| background-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .navbar-wrapper > ul > li.dropdown.show > a { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| body.night-mode .navbar-wrapper > ul > li.dropdown.show > a { | |
| background-color: #494c62; | |
| } | |
| @media (min-width: 992px) { | |
| .navbar-wrapper > ul > li > a { | |
| padding: 18px 10px; | |
| } | |
| } | |
| .navbar-wrapper .counter { | |
| position: absolute; | |
| top: 5px; | |
| right: 0; | |
| padding: 2px 4px; | |
| color: #fff; | |
| font-size: 10px; | |
| font-weight: 600; | |
| border-radius: 3px; | |
| } | |
| .navbar-wrapper .counter.red { | |
| background: #ff5e3a; | |
| } | |
| .navbar-wrapper .counter.blue { | |
| background: #38a9ff; | |
| } | |
| .navbar-wrapper .counter.purple { | |
| background: #7c5ac2; | |
| } | |
| /* -- user-menu */ | |
| .navbar-wrapper .user-menu > img { | |
| display: inline-block; | |
| margin-top: -5px; | |
| height: 20px; | |
| width: 20px; | |
| border-radius: 50%; | |
| } | |
| @media (min-width: 768px) { | |
| .navbar-wrapper .user-menu > img { | |
| height: 25px; | |
| width: 25px; | |
| } | |
| } | |
| @media (min-width: 1400px) { | |
| .navbar-wrapper .user-menu > span { | |
| display: inline-block!important; | |
| max-width: 70px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| } | |
| /* -- dropdown-menu */ | |
| .navbar-wrapper .dropdown-menu:not(.dropdown-widget) { | |
| margin-top: 0; | |
| border-top: 0; | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; | |
| } | |
| .navbar-wrapper > ul > li.dropdown { | |
| position: static; | |
| } | |
| @media (min-width: 768px) { | |
| .navbar-wrapper > ul > li.dropdown { | |
| position: relative; | |
| } | |
| } | |
| /* -- dropdown-widget */ | |
| .dropdown-widget { | |
| width: 100%; | |
| padding-bottom: 0; | |
| padding-top: 0; | |
| border: 0; | |
| } | |
| .dropdown-widget-header { | |
| padding: 10px; | |
| font-size: 11px; | |
| border-bottom: 1px solid #e4e4e4; | |
| } | |
| body.night-mode .dropdown-widget-header { | |
| border-color: #424242; | |
| } | |
| .dropdown-widget-header .title { | |
| text-transform: uppercase; | |
| color: #9a9fbf; | |
| font-size: 9px; | |
| font-weight: 700; | |
| } | |
| .dropdown-widget-header a:hover { | |
| text-decoration: underline; | |
| } | |
| .dropdown-widget-body { | |
| padding: 0; | |
| font-size: 12px | |
| } | |
| .dropdown-widget-body .title { | |
| border-top: 1px solid #e4e4e4; | |
| border-bottom: 1px solid #e4e4e4; | |
| color: #9a9fbf; | |
| padding: 8px; | |
| display: block; | |
| font-size: 11px; | |
| font-weight: 600; | |
| line-height: 16px; | |
| } | |
| body.night-mode .dropdown-widget-body .title { | |
| border-color: #424242; | |
| } | |
| .dropdown-widget-footer { | |
| background: #f6f9fc; | |
| display: block; | |
| padding: 10px 0; | |
| border-top: 1px solid #e5e5e5; | |
| border-bottom: 0 none; | |
| text-align: center; | |
| font-size: 11px; | |
| border-radius: 0 0 4px 4px; | |
| } | |
| body.night-mode .dropdown-widget-footer { | |
| background: #1b1b1b; | |
| border-color: #424242; | |
| } | |
| .dropdown-widget-footer:hover { | |
| text-decoration: underline; | |
| } | |
| @media (min-width: 768px) { | |
| .dropdown-widget { | |
| min-width: 380px!important; | |
| } | |
| .dropdown-widget.with-arrow:before { | |
| position: absolute; | |
| display: inline-block; | |
| content: ''; | |
| top: -7px; | |
| right: 10px; | |
| border-right: 7px solid transparent; | |
| border-left: 7px solid transparent; | |
| border-bottom: 7px solid #fff; | |
| } | |
| body.night-mode .dropdown-widget.with-arrow:before { | |
| border-bottom-color: var(--header-bg-color-dark); | |
| } | |
| .dropdown-widget.dropdown-search { | |
| border-radius: 2px 2px 0 0; | |
| } | |
| } | |
| /* -- */ | |
| /* COMMON */ | |
| /* ------------------------------- */ | |
| /* section-title */ | |
| .section-title { | |
| background: #f5f5f5; | |
| padding: 10px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| text-align: center; | |
| border-radius: 2px; | |
| } | |
| body.night-mode .section-title { | |
| color: #5e72e4; | |
| background-color: #111111; | |
| } | |
| /* -- */ | |
| /* heading */ | |
| .heading-small { | |
| font-size: 12px; | |
| padding: 4px 0; | |
| letter-spacing: .04em; | |
| text-transform: uppercase | |
| } | |
| /* -- */ | |
| /* hr-heading */ | |
| .hr-heading { | |
| display: block; | |
| overflow: hidden; | |
| text-align: center; | |
| white-space: nowrap; | |
| } | |
| .hr-heading-text { | |
| position: relative; | |
| display: inline-block; | |
| color: #999; | |
| } | |
| .hr-heading-text:before, | |
| .hr-heading-text:after { | |
| position: absolute; | |
| top: 50%; | |
| width: 9999px; | |
| height: 1px; | |
| background: #ddd; | |
| content: ''; | |
| } | |
| body.night-mode .hr-heading-text:before, | |
| body.night-mode .hr-heading-text:after { | |
| background: #323232; | |
| } | |
| .hr-heading-text:before { | |
| right: 100%; | |
| margin-right: 15px; | |
| } | |
| .hr-heading-text:after { | |
| left: 100%; | |
| margin-left: 15px; | |
| } | |
| /* -- */ | |
| /* user-box */ | |
| .user-box { | |
| display: block; | |
| margin: 5px; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| .circled-user-box { | |
| margin: 5px; | |
| } | |
| .circled-user-box .user-box { | |
| position: relative; | |
| padding-top: 100%; | |
| margin: 0; | |
| margin-bottom: 20px; | |
| } | |
| .pro-box-wrapper .user-box { | |
| width: 71px; | |
| float: left; | |
| opacity: .55; | |
| } | |
| .pro-box-wrapper.full-opacity .user-box { | |
| opacity: 1; | |
| } | |
| .pro-box-wrapper .user-box.slick-center { | |
| opacity: 1; | |
| transform: scale(1.1); | |
| font-weight: 600; | |
| } | |
| .user-box img { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0 auto; | |
| border-radius: 50%; | |
| } | |
| .circled-user-box .user-box img { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| object-fit: cover; | |
| } | |
| .pro-box-wrapper .user-box img { | |
| width: 60px; | |
| height: 60px; | |
| box-shadow: 0 1px 2px rgba(0,0,0,.2); | |
| } | |
| .user-box .name { | |
| margin-top: 5px; | |
| font-size: 11px; | |
| word-break: break-word; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .circled-user-box .user-box .name { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| } | |
| /* -- */ | |
| /* ui-box */ | |
| .ui-box { | |
| position: relative; | |
| background: #f6f9fc; | |
| padding: 50px 15px 15px; | |
| margin-top: 50px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| border-radius: 4px; | |
| } | |
| body.night-mode .ui-box { | |
| background: #292929; | |
| } | |
| .ui-box .img { | |
| position: absolute; | |
| top: -50px; | |
| left: 50%; | |
| transform: translate(-50%); | |
| background: #fff; | |
| padding: 4px; | |
| margin: 0 auto; | |
| border-radius: 50%; | |
| } | |
| body.night-mode .ui-box .img { | |
| background: #212121; | |
| } | |
| .ui-box img { | |
| height: 92px; | |
| width: 92px; | |
| border-radius: 50%; | |
| } | |
| .ui-box .btn { | |
| box-shadow: none; | |
| } | |
| /* -- */ | |
| /* stat-panel */ | |
| .stat-panel { | |
| border-radius: 4px; | |
| margin-bottom: 20px; | |
| overflow: hidden; | |
| } | |
| .stat-panel.border { | |
| border: 1px solid #e6ecf5; | |
| } | |
| body.night-mode .stat-panel.border { | |
| border-color: #363636!important; | |
| } | |
| .stat-cell { | |
| position: relative; | |
| padding: 20px; | |
| } | |
| .stat-cell .icon { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background: #fff; | |
| font-size: 20px; | |
| width: 48px; | |
| height: 48px; | |
| padding: 14px; | |
| border-radius: 50%; | |
| } | |
| .stat-cell .bg-icon { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| font-size: 100px; | |
| opacity: 0.25; | |
| } | |
| .stat-cell a { | |
| font-size: 12px; | |
| color: #fff; | |
| } | |
| .stat-cell a:hover { | |
| text-decoration: underline; | |
| } | |
| /* -- */ | |
| /* main-side-nav */ | |
| .main-side-nav-card { | |
| background: transparent!important; | |
| border: 0; | |
| } | |
| .main-side-nav { | |
| z-index: 2; | |
| } | |
| .main-side-nav img { | |
| width: 24px; | |
| height: 24px; | |
| margin-right: 10px; | |
| } | |
| .main-side-nav a, .main-side-nav .static { | |
| display: block; | |
| font-weight: 500; | |
| padding: 8px 16px; | |
| color: #5a5a5a; | |
| } | |
| .night-mode .main-side-nav a, .night-mode .main-side-nav .static { | |
| color: #bfbfbf; | |
| } | |
| .main-side-nav a[data-toggle=collapse]:after { | |
| font-family: 'Font Awesome 5 Free'; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-variant: normal; | |
| display: inline-block; | |
| float: right; | |
| content: '\f107'; | |
| transition: all .15s ease; | |
| color: #5e72e4; | |
| text-rendering: auto; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .main-side-nav a[data-toggle=collapse][aria-expanded=true]:after { | |
| /*transform: rotate(180deg);*/ | |
| content: '\f106'; | |
| /*color: #5e72e4;*/ | |
| } | |
| .main-side-nav a:hover { | |
| color: #5e72e4; | |
| } | |
| .main-side-nav a.no-border { | |
| border-bottom: 0; | |
| } | |
| .main-side-nav > li.active > a { | |
| background-color: #e5eaef; | |
| color: #5e72e4; | |
| border-radius: 5px; | |
| } | |
| body.night-mode .main-side-nav > li.active > a { | |
| background-color: #2b2b2b; | |
| } | |
| .main-side-nav ul > li.active > a { | |
| color: #5e72e4; | |
| } | |
| .main-side-nav ul a { | |
| margin-left: 32px; | |
| padding: 10px 20px; | |
| font-size: 11px; | |
| color: #5a5a5a; | |
| border-left: 1px solid #e4e4e4; | |
| } | |
| body.night-mode .main-side-nav ul a { | |
| color: #bfbfbf; | |
| border-left-color: #363636; | |
| } | |
| /* side-nav */ | |
| .side-nav a, .side-nav .static { | |
| display: block; | |
| font-weight: 500; | |
| padding: 15px 25px; | |
| color: #919191; | |
| } | |
| .side-nav a:hover { | |
| color: #5e72e4; | |
| } | |
| .side-nav a[data-toggle=collapse]:after { | |
| font-family: 'Font Awesome 5 Free'; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-variant: normal; | |
| display: inline-block; | |
| float: right; | |
| content: '\f105'; | |
| transition: all .15s ease; | |
| color: #ced4da; | |
| text-rendering: auto; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .side-nav a[data-toggle=collapse][aria-expanded=true]:after { | |
| transform: rotate(90deg); | |
| color: #5e72e4; | |
| } | |
| .side-nav > li.active > a { | |
| background-color: #f6f9fc; | |
| color: #5e72e4; | |
| border-radius: 5px; | |
| } | |
| body.night-mode .side-nav > li.active > a { | |
| background-color: #111111; | |
| } | |
| .side-nav ul > li.active > a { | |
| color: #5e72e4; | |
| } | |
| .side-nav ul a { | |
| margin-left: 32px; | |
| padding: 10px 20px; | |
| font-size: 11px; | |
| color: #888da8; | |
| border-left: 1px solid #eee; | |
| } | |
| body.night-mode .side-nav ul a { | |
| border-left-color: #363636; | |
| } | |
| /* -- */ | |
| /* content-tabs */ | |
| .content-tabs { | |
| background: #fff; | |
| margin-bottom: 20px; | |
| padding: 0 5px; | |
| } | |
| body.night-mode .content-tabs { | |
| background: #212121; | |
| } | |
| @media (min-width: 768px) { | |
| .content-tabs { | |
| padding: 0 10px; | |
| } | |
| } | |
| .content-tabs > ul > li { | |
| float: left; | |
| } | |
| .content-tabs > ul > li > a { | |
| display: block; | |
| padding: 12px 14px; | |
| font-size: 12px; | |
| line-height: 20px; | |
| color: #666; | |
| transition: all .2s ease; | |
| } | |
| body.night-mode .content-tabs > ul > li > a { | |
| color: #eee; | |
| } | |
| @media (min-width: 768px) { | |
| .content-tabs > ul > li > a { | |
| padding: 14px 24px; | |
| font-size: 13px; | |
| } | |
| } | |
| .content-tabs > ul > li.active > a { | |
| color: var(--link-color); | |
| font-weight: 600; | |
| border-bottom: 2px solid var(--link-color); | |
| } | |
| /* -- */ | |
| /* see-more */ | |
| .see-more { | |
| text-align: center; | |
| margin: 10px 0 0; | |
| padding: 10px; | |
| } | |
| .see-more:hover { | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| .see-more.loading:hover { | |
| text-decoration: none; | |
| cursor: default; | |
| } | |
| .see-more.done:hover { | |
| text-decoration: underline; | |
| cursor: text; | |
| } | |
| /* --*/ | |
| /* feeds-item */ | |
| .feeds-item { | |
| border-bottom: 1px solid #e6ecf5; | |
| } | |
| body.night-mode .feeds-item { | |
| border-color: #323232; | |
| } | |
| .feeds-item:last-child { | |
| border-bottom: 0 none; | |
| } | |
| .feeds-item.unread { | |
| background: #e9eaed; | |
| } | |
| body.night-mode .feeds-item.unread { | |
| background: #2b2b2b; | |
| } | |
| /* -- */ | |
| /* data-container */ | |
| .data-container { | |
| display: block; | |
| width: 100%; | |
| padding: 8px; | |
| min-height: 56px; /* 40px avatar + 16px padding */ | |
| } | |
| .data-container.small { | |
| min-height: 46px; /* 30px avatar + 16px padding */ | |
| } | |
| a.data-container:hover, | |
| .data-container.clickable:hover { | |
| background: #f6f7f8; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| body.night-mode a.data-container:hover, | |
| body.night-mode .data-container.clickable:hover { | |
| background: #424242; | |
| } | |
| .data-avatar { | |
| display: block; | |
| position: relative; /* relative for .data-reaction to be absolute */ | |
| float: left; | |
| } | |
| .data-avatar img { | |
| width: 30px; | |
| height: 30px; | |
| text-align: center; | |
| border-radius: 50%; | |
| } | |
| @media (min-width: 768px) { | |
| .data-avatar img { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| } | |
| .data-container.small .data-avatar img { | |
| width: 30px; /* override the previous */ | |
| height: 30px; | |
| } | |
| } | |
| .data-avatar .left-avatar, | |
| .data-avatar .right-avatar { | |
| background-size: cover; | |
| background-position: center center; | |
| float: left; | |
| overflow: hidden; | |
| width: 14px; | |
| height: 30px; | |
| margin-right: 1px; | |
| border-radius: 20px 0 0 20px; | |
| } | |
| .data-avatar .right-avatar { | |
| width: 15px; | |
| margin-right: 0; | |
| border-radius: 0 20px 20px 0; | |
| } | |
| @media (min-width: 768px) { | |
| .data-avatar .left-avatar, | |
| .data-avatar .right-avatar { | |
| width: 19px; | |
| height: 40px; | |
| border-radius: 20px 0 0 20px; | |
| } | |
| .data-avatar .right-avatar { | |
| width: 20px; | |
| border-radius: 0 20px 20px 0; | |
| } | |
| .data-container.small .data-avatar .left-avatar, | |
| .data-container.small .data-avatar .right-avatar { | |
| width: 14px; | |
| height: 30px; | |
| } | |
| .data-container.small .data-avatar .right-avatar { | |
| width: 15px; | |
| } | |
| } | |
| .data-reaction { | |
| position: absolute; | |
| bottom: -4px; | |
| right: -6px; | |
| } | |
| .data-content { | |
| padding-left: 38px; | |
| color: #818181; | |
| font-size: 11px; | |
| } | |
| @media (min-width: 768px) { | |
| .data-content { | |
| padding-left: 48px; | |
| word-wrap: break-word; | |
| } | |
| .data-container.small .data-content { | |
| padding-left: 38px; /* override the previous */ | |
| } | |
| } | |
| .data-content .data-img { | |
| background-color: #fff; | |
| border: 1px solid #ddd; | |
| padding: 1px; | |
| width: 48px; | |
| height: 48px; | |
| object-fit: cover; | |
| } | |
| .data-content .btn { | |
| padding: 2px 6px; | |
| font-size: 10px; | |
| } | |
| @media (min-width: 576px) { | |
| .data-content .btn { | |
| padding: 4px 12px; | |
| font-size: 12px; | |
| } | |
| } | |
| .data-content .name { | |
| font-weight: bold; | |
| } | |
| .data-content .time { | |
| font-size: 10px; | |
| color: #bbb; | |
| } | |
| .data-content .text { | |
| word-break: break-all; | |
| } | |
| /* -- */ | |
| /* x-form */ | |
| .x-form { | |
| position: relative; /* for x-form-tools */ | |
| } | |
| .x-form-tools { | |
| position: absolute; | |
| color: #afafaf; | |
| } | |
| .x-form-tools > li { | |
| float: left; | |
| margin-left: 4px; | |
| padding: 4px 2px; | |
| border-radius: 50%; | |
| } | |
| .x-form-tools > li:first-child { | |
| margin-left: 0; | |
| } | |
| .x-form-tools > li:hover { | |
| background: #f3f3f3; | |
| cursor: pointer; | |
| } | |
| body.night-mode .x-form-tools > li:hover { | |
| background: #333; | |
| } | |
| .x-form-tools-post, | |
| .x-form-tools-attach, | |
| .x-form-tools-voice, | |
| .x-form-tools-emoji { | |
| position: relative; /* for input & menus */ | |
| overflow: hidden; | |
| display: inline-block; | |
| cursor: pointer; | |
| } | |
| @media (min-width: 992px) { | |
| .x-form-tools-post { | |
| display: none; | |
| } | |
| } | |
| .x-form-tools-attach input[type=file] { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| min-width: 100%; | |
| min-height: 100%; | |
| font-size: 100px; | |
| text-align: right; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| outline: none; | |
| background: white; | |
| cursor: inherit; | |
| display: block; | |
| } | |
| /* -- */ | |
| /* attachments */ | |
| .attachments li { | |
| float: left; | |
| width: 64px; | |
| height: 64px; | |
| margin-right: 5px; | |
| margin-bottom: 5px; | |
| transition: padding .5s; | |
| } | |
| @media (min-width: 768px) { | |
| .attachments li { | |
| width: 96px; | |
| height: 96px; | |
| } | |
| } | |
| .attachments li.item { | |
| position: relative; /* for :before & button */ | |
| border: 1px solid #eee; | |
| cursor: pointer; | |
| } | |
| body.night-mode .attachments li.item { | |
| border-color: #424242; | |
| } | |
| .attachments li.item img { | |
| width: 64px; | |
| height: 64px; | |
| } | |
| @media (min-width: 768px) { | |
| .attachments li.item img { | |
| width: 94px; | |
| height: 94px; | |
| } | |
| } | |
| .attachments li.item .name { | |
| background: #fafafa; | |
| height: 100%; | |
| width: 100%; | |
| padding: 10px; | |
| color: #999; | |
| font-size: 10px; | |
| word-break: break-all; | |
| } | |
| .attachments li.item.deletable:before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| background: rgba(0, 0, 0, 0.6); | |
| width: 64px; | |
| height: 64px; | |
| content: ""; | |
| display: none; | |
| } | |
| @media (min-width: 768px) { | |
| .attachments li.item.deletable:before { | |
| width: 94px; | |
| height: 94px; | |
| } | |
| } | |
| .attachments li.item.deletable:hover:before { | |
| display: block; | |
| } | |
| .attachments li.item button { | |
| position: absolute; | |
| top: 0; | |
| right: 5px; | |
| color: #fff; | |
| text-shadow: 0 1px 0 #000; | |
| filter: alpha(opacity=40); | |
| opacity: 0.4; | |
| display: none; | |
| } | |
| .attachments li.item.deletable:hover button { | |
| display: block; | |
| } | |
| .attachments li.item.deletable button:hover { | |
| filter: alpha(opacity=80); | |
| opacity: 0.8; | |
| } | |
| .attachments li.loading { | |
| padding-top: 22px; /* 64px-20px(loader) / 2 */ | |
| background: #f3f3f3; | |
| border: 1px solid #eee; | |
| display: none; | |
| } | |
| @media (min-width: 768px) { | |
| .attachments li.loading { | |
| padding-top: 45px; /* 96px-5px(loader) / 2 */ | |
| } | |
| } | |
| body.night-mode .attachments li.loading { | |
| background: #212121; | |
| border-color: #424242; | |
| } | |
| .attachments li.add { | |
| position: relative; | |
| overflow: hidden; | |
| padding: 20px 0 0 25px; | |
| color: #ddd; | |
| font-size: 16px; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| border: 2px dashed #cecece; | |
| } | |
| @media (min-width: 768px) { | |
| .attachments li.add { | |
| padding: 30px 0 0 35px; | |
| font-size: 24px; | |
| } | |
| } | |
| /* -- */ | |
| /* x-uploader */ | |
| .x-uploader { | |
| overflow: hidden; | |
| } | |
| .x-uploader input[type=file] { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| min-width: 100%; | |
| min-height: 100%; | |
| font-size: 100px; | |
| text-align: right; | |
| opacity: 0; | |
| outline: none; | |
| background: white; | |
| cursor: pointer; | |
| display: block; | |
| } | |
| .x-uploader .fa { | |
| cursor: pointer; | |
| } | |
| /* -- */ | |
| /* x-image */ | |
| .x-image { | |
| position: relative; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-color: #eee; | |
| width: 96px; | |
| height: 96px; | |
| overflow: hidden; | |
| display: block; | |
| border-radius: 2px; | |
| } | |
| body.night-mode .x-image { | |
| background-color: #333; | |
| } | |
| .x-image.full { | |
| width: 100%; | |
| } | |
| .x-image.sm { | |
| width: 48px; | |
| height: 48px; | |
| } | |
| .x-image:before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #000; | |
| content: ''; | |
| opacity: 0; | |
| } | |
| .x-image:hover.x-image:before { | |
| opacity: 0.2; | |
| } | |
| .x-image-success { | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| opacity: 0.5; | |
| background: #000; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 30%; | |
| text-align: center; | |
| color: #fff; | |
| font-size: 12px; | |
| transition: all .5s; | |
| } | |
| .x-image-loader { | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| opacity: 0.5; | |
| background: #000; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 50%; | |
| transition: all .5s; | |
| } | |
| .x-image.full .x-image-loader { | |
| padding-top: 20%; | |
| } | |
| .x-image .x-uploader { | |
| position: absolute; | |
| bottom: 5px; | |
| right: 5px; | |
| } | |
| .x-image button { | |
| position: absolute; | |
| top: 0; | |
| right: 5px; | |
| } | |
| /* -- */ | |
| /* x-progress (uploading progress) */ | |
| .x-progress { | |
| height: 5px; | |
| margin: 0 1.5rem; | |
| border-radius: 25px; | |
| } | |
| /* -- */ | |
| /* tbl-image */ | |
| .tbl-image { | |
| width: 24px; | |
| height: 24px; | |
| float: left; | |
| margin-right: 5px; | |
| border-radius: 50%; | |
| } | |
| .tbl-image.app-icon { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 4px; | |
| } | |
| /* -- */ | |
| /* badges */ | |
| .verified-badge { | |
| color: #55acee; | |
| } | |
| .pro-badge { | |
| color: #e13c4c; | |
| } | |
| .privacy-badge { | |
| color: #fff; | |
| font-size: 16px; | |
| } | |
| .verified-badge:hover, | |
| .pro-badge:hover, | |
| .privacy-badge:hover { | |
| cursor: pointer; | |
| } | |
| /* -- */ | |
| /* ads */ | |
| .ads-title { | |
| font-size: 14px; | |
| padding: 5px 0; | |
| margin: 0; | |
| word-break: break-all; | |
| } | |
| .ads-descrition { | |
| font-size: 12px; | |
| word-break: break-word; | |
| } | |
| .adblock-warning-message { | |
| display: none; | |
| padding: 20px; | |
| background: #D30000; | |
| text-align: center; | |
| color: #fff; | |
| border-radius: 2px; | |
| } | |
| .adblock-detector { | |
| position: fixed; | |
| top: 46px; | |
| left: 0; | |
| right: 0; | |
| display: none; | |
| margin-bottom: 30px; | |
| padding: 20px 10px; | |
| background: #D30000; | |
| text-align: center; | |
| font-weight: bold; | |
| color: #fff; | |
| } | |
| /* -- */ | |
| /* user-popover */ | |
| @media (min-width: 768px) { | |
| .user-popover { | |
| position: relative; | |
| } | |
| .user-popover-wrapper { | |
| width: 400px; | |
| min-height: 180px; | |
| z-index: 99999; | |
| } | |
| .user-popover-content { | |
| width: 400px; | |
| position: absolute; | |
| top: 5px; | |
| left: 0; | |
| border-radius: 6px; | |
| background-color: #fff; | |
| box-shadow: 0 1px 12px rgba(0,0,0,.2); | |
| z-index: 999999; | |
| } | |
| body.night-mode .user-popover-content { | |
| background: #212121; | |
| } | |
| .user-card { | |
| position: relative; | |
| } | |
| .user-card-cover { | |
| width: 100%; | |
| height: 120px; | |
| background-color: #424242; | |
| background-size: cover; | |
| background-position: center center; | |
| border-radius: 6px 6px 0 0; | |
| } | |
| body.night-mode .user-card-cover { | |
| } | |
| .user-card-avatar { | |
| position: absolute; | |
| left: 15px; | |
| bottom: -15px; | |
| padding: 2px; | |
| border-radius: 50%; | |
| background: #fff; | |
| box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); | |
| } | |
| body.night-mode .user-card-avatar { | |
| background: #212121; | |
| } | |
| .user-card-avatar img { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| } | |
| .user-card-info { | |
| position: absolute; | |
| left: 96px; | |
| bottom: 10px; | |
| color: #fff; | |
| } | |
| .user-card-info a { | |
| color: #fff; | |
| text-shadow: 0 0 3px rgba(0, 0, 0, 0.9); | |
| } | |
| .user-card-info a:hover { | |
| text-decoration: underline; | |
| } | |
| .user-card-info a.name { | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .user-card-info .info { | |
| font-size: 12px; | |
| line-height: 15px; | |
| text-shadow: 0 0 3px rgba(0, 0, 0, 0.9); | |
| } | |
| .user-card-meta { | |
| padding-left: 96px; | |
| padding-top: 10px; | |
| font-size: 14px; | |
| color: #000; | |
| } | |
| body.night-mode .user-card-meta { | |
| color: #fff; | |
| } | |
| .user-card-meta .fa { | |
| color: #666; | |
| } | |
| .user-popover-content .popover-footer { | |
| padding: 8px; | |
| text-align: center; | |
| border-radius: 0 0 6px 6px; | |
| } | |
| .user-popover-content .popover-footer .btn { | |
| padding: 6px 12px; | |
| margin-right: 5px; | |
| margin-bottom: 5px; | |
| } | |
| /* -- */ | |
| } | |
| /* -- */ | |
| /* trending */ | |
| .trending-item { | |
| word-break: break-word; | |
| display: block; | |
| padding: 5px 0; | |
| font-size: 13px; | |
| } | |
| .trending-item .hash { | |
| display: block; | |
| color: #ffffff; | |
| font-weight: bold; | |
| font-size: 14px; | |
| } | |
| .trending-item .frequency { | |
| font-size: 12px; | |
| color: #ffeb00; | |
| } | |
| .trending-item:hover .hash { | |
| text-decoration: underline; | |
| } | |
| /* -- */ | |
| /* PUBLISHER */ | |
| /* ------------------------------- */ | |
| .publisher-overlay { | |
| background: #000; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| opacity: 0; | |
| transition: opacity .5s; | |
| z-index: 1002; | |
| } | |
| body.publisher-focus .publisher-overlay { | |
| bottom: 0; | |
| opacity: .6; | |
| transition: opacity .5s; | |
| } | |
| .publisher { | |
| margin-bottom: 20px; | |
| background: #fff; | |
| border-radius: 3px; | |
| box-shadow: 0 1px 1px rgba(0,0,0,.05); | |
| } | |
| body.night-mode .publisher { | |
| background: #212121; | |
| } | |
| body.publisher-focus .publisher { | |
| z-index: 1003; | |
| } | |
| .publisher.mini { | |
| margin-bottom: 0; | |
| border-radius: 0; | |
| } | |
| .publisher-loader { | |
| display: none; | |
| position: absolute; | |
| top: 5px; | |
| right: 10px; | |
| z-index: 1; | |
| } | |
| .publisher-close { | |
| position: absolute; | |
| top: 5px; | |
| right: 10px; | |
| z-index: 1; | |
| } | |
| .publisher-message { | |
| position: relative; | |
| padding: 15px 15px 20px 65px; | |
| } | |
| .publisher-message.colored, | |
| .post-colored, | |
| .post-colored-preview { | |
| height: 300px; | |
| padding: 30px; | |
| background-repeat: no-repeat!important; | |
| background-size: cover!important; | |
| } | |
| .publisher-message.colored { | |
| border-radius: 2px 2px 0 0; | |
| } | |
| .post-colored-preview { | |
| border-radius: 2px; | |
| } | |
| .post-colored-preview.small { | |
| height: 180px; | |
| } | |
| .post-colored-preview h2 { | |
| text-align: center; | |
| padding-top: 100px; | |
| } | |
| .post-colored-preview h4 { | |
| text-align: center; | |
| padding-top: 50px; | |
| } | |
| .publisher-message.colored .colored-text-wrapper, | |
| .post-colored-text-wrapper { | |
| height: 240px; | |
| display: flex; | |
| text-align: center; | |
| } | |
| .publisher-message.colored .colored-text-wrapper { | |
| overflow-x: auto; | |
| } | |
| /* publisher-avatar */ | |
| .publisher-avatar { | |
| position: absolute; | |
| left: 15px; | |
| top: 15px; | |
| width: 40px; | |
| height: 40px; | |
| padding: 2px; | |
| border: 1px solid #efefef; | |
| border-radius: 50%; | |
| } | |
| body.night-mode .publisher-avatar { | |
| border-color: #424242; | |
| } | |
| .publisher-message.colored .publisher-avatar { | |
| display: none; | |
| } | |
| /* -- */ | |
| /* publisher textarea */ | |
| .publisher textarea { | |
| background: transparent; | |
| direction: ltr; | |
| resize: none; | |
| outline: none; | |
| width: 100%; | |
| margin-top: 5px; | |
| padding: 0; | |
| font-size: 15px; | |
| line-height: 24px; | |
| height: 20px; | |
| border: 0 none; | |
| } | |
| body.night-mode .publisher textarea { | |
| color: #eee; | |
| } | |
| .publisher textarea::placeholder { | |
| color: inherit; | |
| opacity: 0.65; | |
| } | |
| .publisher textarea:-ms-input-placeholder { | |
| color: inherit; | |
| opacity: 0.65; | |
| } | |
| .publisher textarea::-ms-input-placeholder { | |
| color: inherit; | |
| opacity: 0.65; | |
| } | |
| .publisher-message.colored textarea, | |
| .post-colored .post-text { | |
| text-align: center; | |
| font-size: 25px; | |
| line-height: 30px; | |
| font-weight: 600; | |
| margin: auto; | |
| } | |
| .publisher-message.colored textarea { | |
| min-height: 60px; | |
| } | |
| .post-colored .post-text a { | |
| color: inherit!important; | |
| text-decoration: underline!important; | |
| } | |
| .post-colored .post-text a:hover { | |
| text-decoration: none!important; | |
| } | |
| /* -- */ | |
| /* publisher-emojis */ | |
| .publisher-emojis { | |
| display: none; | |
| position: absolute; | |
| bottom: 5px; | |
| right: 10px; | |
| } | |
| .publisher-emojis .far { | |
| cursor: pointer; | |
| color: #999; | |
| } | |
| /* -- */ | |
| /* publisher-slider */ | |
| .publisher-slider { | |
| display: none; | |
| } | |
| /* -- */ | |
| /* publisher-scraper */ | |
| .publisher-scraper { | |
| display: none; | |
| position: relative; | |
| padding: 10px; | |
| } | |
| .publisher-scraper-remover { | |
| position: absolute; | |
| top: 15px; | |
| right: 20px; | |
| width: 26px; | |
| height: 26px; | |
| padding-right: 6px; | |
| background: #fbfbfb; | |
| border: 1px solid #eaeaea; | |
| border-radius: 50%; | |
| z-index: 1; | |
| } | |
| .publisher-scraper-remover:hover { | |
| background: #fff; | |
| } | |
| .publisher-scraper-remover button.close { | |
| opacity: 0.5 | |
| } | |
| /* -- */ | |
| /* publisher-attachments */ | |
| .publisher-attachments { | |
| padding: 10px 10px 5px; | |
| } | |
| /* -- */ | |
| /* publisher-meta */ | |
| .publisher-meta { | |
| position: relative; /* for fa icon */ | |
| border-top: 1px dashed #eee; | |
| font-weight: 600; | |
| margin: 0 15px; | |
| padding: 8px 0; | |
| display: none; | |
| } | |
| body.night-mode .publisher-meta { | |
| border-color: #424242; | |
| } | |
| .publisher-meta.top { | |
| border-top: 0; | |
| border-bottom: 1px dashed #eee; | |
| } | |
| .publisher-meta .svg-container { | |
| position: absolute; | |
| top: 15px; | |
| left: 15px; | |
| } | |
| .publisher-meta .svg-container.static { | |
| position: static; | |
| } | |
| .publisher-meta input, | |
| .publisher-meta select { | |
| background: #f3f3f3; | |
| width: 100%; | |
| color: #5e72e4; | |
| font-weight: 600; | |
| font-size: 14px; | |
| line-height: 20px; | |
| padding: 8px 16px 8px 40px; | |
| outline: 0 none; | |
| border: 0 none; | |
| border-radius: 18px; | |
| } | |
| .publisher-meta input.no-icon { | |
| padding: 8px 16px; | |
| } | |
| body.night-mode .publisher-meta input, | |
| body.night-mode .publisher-meta select { | |
| color: #b6c1ff; | |
| background: #121212; | |
| } | |
| .publisher-meta select { | |
| color: #9c9c9c; | |
| } | |
| .publisher-meta select:focus { | |
| color: #4e5665; | |
| } | |
| .publisher-meta input::-webkit-input-placeholder { | |
| color: #9c9c9c; | |
| } | |
| .publisher-meta input:-moz-placeholder { | |
| color: #9c9c9c; | |
| opacity: 1; | |
| } | |
| .publisher-meta input:-ms-input-placeholder { | |
| color: #9c9c9c; | |
| } | |
| /* -- */ | |
| /* publisher-custom-thumbnail */ | |
| .publisher-custom-thumbnail { | |
| display: none; | |
| position: relative; | |
| margin: 10px 15px; | |
| padding: 8px 0; | |
| border-top: 1px dashed #eee; | |
| overflow: hidden; | |
| } | |
| body.night-mode .publisher-custom-thumbnail { | |
| border-color: #424242; | |
| } | |
| .publisher-custom-thumbnail .x-image { | |
| width: 100%; | |
| height: 160px; | |
| margin-top: 5px; | |
| } | |
| .publisher-custom-thumbnail .x-image-loader { | |
| padding-top: 80px; | |
| } | |
| /* -- */ | |
| /* feelings */ | |
| #feelings-menu-toggle { | |
| white-space: nowrap; | |
| padding: 5px; | |
| cursor: pointer; | |
| padding: 8px 18px; | |
| background: #f3f3f3; | |
| color: #6f6f6f; | |
| font-weight: 600; | |
| border-radius: 18px; | |
| } | |
| body.night-mode #feelings-menu-toggle { | |
| background: #121212; | |
| } | |
| #feelings-menu-toggle.active { | |
| display: table-cell; | |
| background: #e2e8f6; | |
| } | |
| body.night-mode #feelings-menu-toggle.active { | |
| background: #121212; | |
| } | |
| #feelings-data { | |
| display: table-cell; | |
| width: 100%; | |
| padding-left: 5px; | |
| } | |
| #feelings-data span { | |
| white-space: nowrap; | |
| padding: 10px 14px; | |
| background: #5e72e4; | |
| color: #ffffff; | |
| font-weight: 600; | |
| border-radius: 18px; | |
| cursor: pointer; | |
| } | |
| #feelings-data span .twa { | |
| vertical-align: middle; | |
| } | |
| .feeling-item { | |
| padding: 5px; | |
| cursor: pointer; | |
| color: #666; | |
| } | |
| body.night-mode .feeling-item { | |
| color: #cacaca; | |
| } | |
| .feeling-item:hover { | |
| background: var(--header-bg-color); | |
| color: #fff!important; | |
| } | |
| .feeling-item .icon { | |
| display: table-cell; | |
| vertical-align: top; | |
| padding-right: 5px; | |
| } | |
| .feeling-item .data { | |
| display: table-cell; | |
| vertical-align: middle; | |
| width: 100%; | |
| font-size: 1.2em; | |
| font-weight: 600; | |
| } | |
| /* -- */ | |
| /* colored-pattern-item */ | |
| .colored-pattern-item { | |
| display: inline-block; | |
| height: 36px; | |
| width: 36px; | |
| padding: 0; | |
| border: 2px solid #fff; | |
| border-radius: 50%; | |
| background-size: cover; | |
| cursor: pointer; | |
| } | |
| body.night-mode .colored-pattern-item { | |
| border-color: #212121; | |
| } | |
| .colored-pattern-item.active { | |
| box-shadow: 0px 0px 0px 2px rgba(51, 103, 214, 0.65); | |
| } | |
| /* -- */ | |
| /* gif-search */ | |
| .dropdown-menu.gif-search { | |
| display: none; | |
| left: 0; | |
| padding: 5px; | |
| margin-top: 0; | |
| border: 1px solid #efefef; | |
| border-radius: 2px; | |
| box-shadow: none; | |
| } | |
| body.night-mode .dropdown-menu.gif-search { | |
| border-color: #424242; | |
| } | |
| .gif-search .item { | |
| width: 33%; | |
| float: left; | |
| margin-right: 1px; | |
| margin-bottom: 1px; | |
| } | |
| .gif-search .item > img { | |
| width: 100%; | |
| height: fit-content; | |
| cursor: pointer; | |
| } | |
| /* -- */ | |
| /* publisher-tools-tabs */ | |
| .publisher-tools-tabs { | |
| margin: 0 15px; | |
| padding-top: 15px; | |
| border-top: 1px solid #e6ecf5; | |
| border-bottom: 1px solid #e6ecf5; | |
| } | |
| body.night-mode .publisher-tools-tabs { | |
| border-color: #424242; | |
| } | |
| .publisher-tools-tabs .divider { | |
| border-top: 1px solid #e6ecf5; | |
| margin-bottom: 15px; | |
| } | |
| body.night-mode .publisher-tools-tabs .divider { | |
| border-top-color: #424242; | |
| } | |
| .publisher-tools-tab { | |
| display: block; | |
| background: #f7f7f7; | |
| padding: 7px 14px; | |
| color: #7f838a; | |
| font-size: 13px; | |
| font-weight: 700; | |
| border-radius: 25px; | |
| margin-bottom: 15px; | |
| } | |
| body.night-mode .publisher-tools-tab { | |
| background: #424242; | |
| color: #d5d5d5; | |
| } | |
| .publisher-tools-tab:hover { | |
| background: #f3f3f3; | |
| color: #7f838a; | |
| cursor: pointer; | |
| } | |
| body.night-mode .publisher-tools-tab:hover { | |
| background: #525252; | |
| color: #d5d5d5; | |
| } | |
| .publisher-tools-tab.active, | |
| body.night-mode .publisher-tools-tab.active { | |
| color: #5e72e4; | |
| } | |
| .publisher-tools-tab.activated { | |
| background: #d2e0ff; | |
| } | |
| body.night-mode .publisher-tools-tab.activated { | |
| background: #111111; | |
| } | |
| .publisher-tools-tab[data-tab='video'].activated:after, | |
| .publisher-tools-tab[data-tab='audio'].activated:after, | |
| .publisher-tools-tab[data-tab='file'].activated:after { | |
| content: ""; | |
| background: transparent; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| cursor: initial; | |
| } | |
| .publisher-tools-tab.disabled { | |
| position: relative; | |
| } | |
| .publisher-tools-tab.disabled:hover { | |
| background: #f7f7f7; | |
| color: #7f838a; | |
| cursor: initial; | |
| } | |
| body.night-mode .publisher-tools-tab.disabled:hover { | |
| background: #424242; | |
| color: #d5d5d5; | |
| } | |
| .publisher-tools-tab.disabled:after { | |
| content: ""; | |
| background: #fff; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| opacity: 0.6; | |
| border-radius: 25px; | |
| } | |
| body.night-mode .publisher-tools-tab.disabled:after { | |
| background: #000; | |
| } | |
| .publisher-tools-tab.attach { | |
| position: relative; /* for input file */ | |
| overflow: hidden; | |
| } | |
| .publisher-tools-tab.attach form { | |
| display: initial; | |
| } | |
| .publisher-tools-tab img { | |
| width: 24px; | |
| height: 24px; | |
| margin-right: 5px; | |
| } | |
| /* -- */ | |
| /* publisher-footer */ | |
| .publisher-footer { | |
| text-align: right; | |
| padding: 15px; | |
| } | |
| .publisher-anonymous-lable { | |
| padding: 8px 10px; | |
| background: #f7f7f7; | |
| border-radius: 4px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| } | |
| body.night-mode .publisher-anonymous-lable { | |
| background: #121212; | |
| } | |
| /* -- */ | |
| /* posts-filter */ | |
| .posts-filter { | |
| margin-bottom: 20px; | |
| padding-bottom: 5px; | |
| border-bottom: 1px solid #dfdfdf; | |
| line-height: 34px; | |
| font-weight: 600; | |
| } | |
| body.night-mode .posts-filter { | |
| border-bottom-color: #212121; | |
| } | |
| .posts-filter .btn-group .btn, | |
| .posts-filter .btn-group .open .btn.dropdown-toggle, | |
| .posts-filter .btn-group .btn-default.active, | |
| .posts-filter .btn-group .btn-default:active, | |
| .posts-filter .btn-group .open .btn-default.dropdown-toggle { | |
| background: transparent!important; | |
| box-shadow: none!important; | |
| border: 0 none!important; | |
| padding-left: 0!important; | |
| padding-right: 0!important; | |
| } | |
| body.night-mode .posts-filter .btn-group .btn, | |
| body.night-mode .posts-filter .btn-group .open .btn.dropdown-toggle, | |
| body.night-mode .posts-filter .btn-group .btn-default.active, | |
| body.night-mode .posts-filter .btn-group .btn-default:active, | |
| body.night-mode .posts-filter .btn-group .open .btn-default.dropdown-toggle { | |
| color: var(--body-color-dark); | |
| } | |
| .posts-filter .dropdown-menu { | |
| min-width: 100%; | |
| } | |
| .posts-filter .dropdown-menu .dropdown-item { | |
| padding: 2px 16px; | |
| } | |
| /* -- */ | |
| /* jobs publisher */ | |
| .add-job-question { | |
| background: #f7f7f7; | |
| margin: 10px 0; | |
| padding: 10px; | |
| font-weight: 600; | |
| text-align: center; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .add-job-question:hover { | |
| background: #f3f3f3; | |
| } | |
| body.night-mode .add-job-question { | |
| background: #333; | |
| border-color: #555; | |
| } | |
| body.night-mode .add-job-question:hover { | |
| background: #212121; | |
| } | |
| .job-question { | |
| background: #f7f7f7; | |
| margin: 10px 0; | |
| padding: 10px; | |
| border-radius: 4px; | |
| } | |
| body.night-mode .job-question { | |
| background: #121212; | |
| } | |
| .job-question .question { | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| .job-question .answer { | |
| font-size: 14px; | |
| } | |
| .job-candidate-wrapper { | |
| padding: 15px; | |
| border: 1px solid #f1f1f1; | |
| border-radius: 4px; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |
| margin-bottom: 20px; | |
| } | |
| body.night-mode .job-candidate-wrapper { | |
| border-color: #000; | |
| } | |
| .job-candidate-header { | |
| } | |
| .job-candidate-avatar { | |
| position: relative; | |
| display: table-cell; | |
| vertical-align: top; | |
| padding-right: 10px; | |
| } | |
| .job-candidate-info { | |
| display: table-cell; | |
| vertical-align: top; | |
| width: 100%; | |
| font-size: 14px; | |
| word-break: break-word; | |
| } | |
| .job-candidate-info .name { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| /* -- */ | |
| /* POST */ | |
| /* ------------------------------- */ | |
| .post { | |
| position: relative; | |
| margin-bottom: 20px; | |
| background: #fff; | |
| border-radius: 4px; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| body.night-mode .post { | |
| background: #212121; | |
| border-color: #000000; | |
| } | |
| .post.flagged { | |
| padding: 15px; | |
| background: #f6f7f8; | |
| } | |
| .post .pin-icon { | |
| position: absolute; | |
| right: 18px; | |
| top: -10px; | |
| width: auto; | |
| font-size: 25px; | |
| color: #f9b340; | |
| } | |
| .post.boosted, | |
| body.night-mode .post.boosted { | |
| border: 2px solid #ffa412; | |
| } | |
| .post .boosted-icon { | |
| position: absolute; | |
| left: -5px; | |
| top: -15px; | |
| width: auto; | |
| padding: 3px 6px; | |
| font-size: 16px; | |
| background: #ffa412; | |
| color: #ffffff; | |
| border-radius: 50%; | |
| -ms-transform: rotate(-20deg); /* IE 9 */ | |
| -webkit-transform: rotate(-20deg); /* Safari */ | |
| transform: rotate(-20deg); /* Standard syntax */ | |
| } | |
| .post.pending, | |
| body.night-mode .post.pending { | |
| border: 1px dashed #9b9b9b; | |
| } | |
| .post .pending-icon { | |
| position: absolute; | |
| right: 18px; | |
| top: -18px; | |
| width: auto; | |
| font-size: 25px; | |
| color: #f9b340; | |
| } | |
| .post.highlighted { | |
| border: 1px solid #4083a9; | |
| box-shadow: inset 0 0 0 1px #4083a9; | |
| } | |
| .post.is_hidden, | |
| body.night-mode .post.is_hidden { | |
| border: 2px dashed #aeaeae; | |
| filter: grayscale(1); | |
| z-index: 1; | |
| } | |
| .post a:not(.dropdown-item):hover { | |
| text-decoration: underline; | |
| } | |
| .post-memory-header { | |
| padding: 10px 20px; | |
| border-bottom: 1px solid #f4f4f4; | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-transform: capitalize; | |
| } | |
| body.night-mode .post-memory-header { | |
| border-color: #424242; | |
| } | |
| .post-body.with-loader { | |
| padding: 16px; | |
| } | |
| .post-top-alert { | |
| padding: 10px 0; | |
| background: repeating-linear-gradient( | |
| 45deg, | |
| #606dbc, | |
| #606dbc 10px, | |
| #465298 10px, | |
| #465298 20px | |
| ); | |
| border-radius: 8px 8px 0 0; | |
| color: #fff; | |
| font-weight: 500; | |
| text-align: center; | |
| } | |
| .post-header { | |
| padding: 16px 16px 0; | |
| margin-bottom: 10px; | |
| } | |
| .post-avatar { | |
| position: relative; | |
| display: table-cell; | |
| vertical-align: top; | |
| padding-right: 10px; | |
| } | |
| .post-avatar-anonymous { | |
| background: #17a2b8; | |
| padding: 5px; | |
| border-radius: 50%; | |
| overflow: hidden; | |
| } | |
| .post-avatar-picture { | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-color: #eee; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 100%; | |
| overflow: hidden; | |
| min-width: 40px; | |
| min-height: 40px; | |
| display: block; | |
| border-radius: 50%; | |
| } | |
| .post-avatar-picture.small { | |
| min-width: 25px; | |
| min-height: 25px; | |
| } | |
| .post-avatar-picture.large { | |
| min-width: 60px; | |
| min-height: 60px; | |
| } | |
| .post-avatar-picture.rounded { | |
| border-radius: 50%; | |
| } | |
| .post-avatar .online-dot { | |
| font-size: 9px; | |
| margin-right: 3px; | |
| position: absolute; | |
| top: 25px; | |
| right: 2px; | |
| border: 2px solid #fff; | |
| border-radius: 50%; | |
| color: #65a830; | |
| } | |
| .night-mode .post-avatar .online-dot { | |
| border-color: #212121; | |
| } | |
| /* -- */ | |
| .post-meta { | |
| display: table-cell; | |
| vertical-align: top; | |
| width: 100%; | |
| word-break: break-word; | |
| word-wrap: break-word; | |
| } | |
| .post-meta .dropdown .dropdown-toggle { | |
| color: #d3d3d3; | |
| padding: 5px; | |
| border-radius: 50%; | |
| } | |
| .post-meta .dropdown .dropdown-toggle:hover { | |
| background: #e9eaee; | |
| color: #b3b3b3; | |
| cursor: pointer; | |
| } | |
| body.night-mode .post-meta .dropdown .dropdown-toggle:hover { | |
| background: #333; | |
| } | |
| .post-meta .dropdown-toggle:after { | |
| display: none!important; | |
| } | |
| .post-author { | |
| font-size: 14px; | |
| line-height: 20px; | |
| font-weight: bold; | |
| } | |
| .post-time { | |
| color: #999; | |
| font-size: 11px; | |
| line-height: 16px; | |
| } | |
| .post-time a { | |
| color: #999; | |
| } | |
| .post-time .fa:hover { | |
| cursor: pointer; | |
| } | |
| .post-time .btn-group { | |
| } | |
| .post-time .btn-group, | |
| .post-time .btn-group .btn { | |
| background: transparent!important; | |
| box-shadow: none!important; | |
| border: 0 none!important; | |
| padding: 2px 4px!important; | |
| color: #999!important; | |
| } | |
| .post-time .btn-group .btn:hover { | |
| background: #f3f3f3!important; | |
| } | |
| .post-text { | |
| padding: 0 16px; | |
| text-align: initial; | |
| word-break: initial; | |
| word-wrap: break-word; | |
| overflow: hidden; | |
| margin-bottom: 5px; | |
| transition: height .2s; | |
| } | |
| .post-product-container .post-text, | |
| .post-media-meta .post-text { | |
| padding: 0; | |
| } | |
| .post-replace { | |
| font-size: 15px; | |
| line-height: 22px; | |
| } | |
| .post-replace > a[data-readmore-toggle] { | |
| margin-left: 16px; | |
| } | |
| .post-product-container .post-replace > a[data-readmore-toggle] { | |
| margin-left: 0; | |
| } | |
| .post-text-translation { | |
| border-left: 2px solid #e9eaee; | |
| padding-left: 10px; | |
| margin-top: 10px; | |
| } | |
| .post-text .twa { | |
| height: 1.6em!important; | |
| width: 1.6em!important; | |
| margin: 0 0.0665em 0 0.15em!important; | |
| vertical-align: -0.15em!important; | |
| background-size: 1.6em 1.6em!important; | |
| } | |
| .post-snippet { | |
| padding: 0 16px; | |
| } | |
| .post-edit { | |
| padding: 0 16px; | |
| } | |
| .post-stats { | |
| margin-top: 15px; | |
| padding: 0 16px; | |
| font-size: 11px; | |
| color: #999; | |
| } | |
| .post-actions { | |
| margin-top: 10px; | |
| padding: 6px 16px 6px 16px; | |
| border-top: 1px solid #f4f4f4; | |
| } | |
| body.night-mode .post-actions { | |
| border-color: #424242; | |
| } | |
| .post-actions .action-btn { | |
| float: left; | |
| width: 33.3%; | |
| padding: 10px; | |
| color: #555; | |
| font-size: 13px; | |
| font-weight: 700; | |
| line-height: 14px; | |
| text-align: center; | |
| border-radius: 2px; | |
| transition: all .1s ease-in-out; | |
| } | |
| body.night-mode .post-actions .action-btn { | |
| color: #bfbfbf; | |
| } | |
| .post-actions .action-btn:hover { | |
| background: #f7f7f7; | |
| cursor: pointer; | |
| } | |
| body.night-mode .post-actions .action-btn:hover { | |
| background: #333; | |
| } | |
| .post-actions .action-btn svg { | |
| fill: #555; | |
| } | |
| body.night-mode .post-actions .action-btn svg { | |
| fill: #bfbfbf; | |
| } | |
| .post-footer { | |
| background: #f9f9f9; | |
| border-top: 1px solid #eee; | |
| border-radius: 0 0 4px 4px; | |
| padding: 0 15px; | |
| } | |
| .night-mode .post-footer { | |
| background: #212121; | |
| border-top-color: #363636; | |
| } | |
| .post-approval { | |
| background: #f9f9f9; | |
| border-top: 1px solid #eee; | |
| padding: 15px; | |
| text-align: right; | |
| } | |
| .night-mode .post-approval { | |
| background: #212121; | |
| border-top-color: #363636; | |
| } | |
| .post-social-share { | |
| padding-bottom: 15px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| border-bottom: 1px solid #f4f4f4; | |
| } | |
| body.night-mode .post-social-share { | |
| border-color: #424242; | |
| } | |
| .post-comments { | |
| padding-top: 10px; | |
| } | |
| /* comments-filter */ | |
| .comments-filter { | |
| margin-bottom: 10px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid #e6ecf5; | |
| } | |
| body.night-mode .comments-filter { | |
| border-bottom-color: #363636; | |
| } | |
| .comments-filter .btn-group .btn, | |
| .comments-filter .btn-group .open .btn.dropdown-toggle, | |
| .comments-filter .btn-group .btn-default.active, | |
| .comments-filter .btn-group .btn-default:active, | |
| .comments-filter .btn-group .open .btn-default.dropdown-toggle { | |
| background: transparent!important; | |
| box-shadow: none!important; | |
| border: 0 none!important; | |
| padding-left: 0!important; | |
| padding-right: 0!important; | |
| color: var(--link-color)!important; | |
| } | |
| .comments-filter .dropdown-menu { | |
| min-width: 100%; | |
| } | |
| .comments-filter .dropdown-menu .dropdown-item { | |
| padding: 4px 16px; | |
| } | |
| /* -- */ | |
| /* post images */ | |
| .pg_wrapper a { | |
| display: block; | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| background-size: cover; | |
| background-position: center center; | |
| background-color: #f5f5f5; | |
| } | |
| body.night-mode .pg_wrapper a { | |
| background-color: #414141; | |
| } | |
| .pg_wrapper .more { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| left: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.3); | |
| color: #fff; | |
| font-size: 2em; | |
| font-weight: 600; | |
| line-height: 100%; | |
| text-align: center; | |
| padding-top: 40%; | |
| } | |
| .pg_1x { | |
| text-align: center; | |
| } | |
| .pg_1x img { | |
| max-width: 100%; | |
| } | |
| .pg_2x { | |
| width: 50%; | |
| float: left; | |
| padding-right: 1px; | |
| } | |
| .pg_2x > a { | |
| padding-bottom: 100%; | |
| } | |
| .pg_2o3, .pg_1o3 { | |
| float: left; | |
| margin-right: 1px; | |
| } | |
| .pg_1o3 { | |
| margin-right: -1px; | |
| } | |
| .pg_2o3 .pg_2o3_in { | |
| margin-bottom: 1px; | |
| } | |
| .pg_2o3 .pg_2o3_in:last-child { | |
| margin-bottom: 0; | |
| } | |
| .pg_1o3 .pg_1o3_in { | |
| margin-bottom: 1px; | |
| } | |
| .pg_1o3 .pg_1o3_in:last-child { | |
| margin-bottom: 0; | |
| } | |
| /* -- */ | |
| /* post media */ | |
| .post-media { | |
| background: #f3f3f3; | |
| } | |
| body.night-mode .post-media { | |
| background: #2f2f2f; | |
| } | |
| .post-media.list { | |
| background: #fff; | |
| box-shadow: none; | |
| margin-bottom: 15px; | |
| border: 0; | |
| } | |
| body.night-mode .post-media.list { | |
| background: #212121; | |
| } | |
| .post-media img.img-fluid { | |
| width: 100%; | |
| max-height: 350px; | |
| } | |
| .post-media-image-wrapper { | |
| position: relative; | |
| } | |
| .post-media-image-meta { | |
| position: absolute; | |
| bottom: 15px; | |
| left: 15px; | |
| } | |
| .post-media-image { | |
| display: block; | |
| position: relative; | |
| } | |
| .post-media-image .image { | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center center; | |
| background-color: #eee; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 50%; | |
| overflow: hidden; | |
| min-width: 100px; | |
| min-height: 100px; | |
| } | |
| body.night-mode .post-media-image .image { | |
| background-color: transparent; | |
| } | |
| .post-media-image .source { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10px; | |
| padding: 6px; | |
| background: rgba(0, 0, 0, 0.65); | |
| color: #fff; | |
| font-size: 13px; | |
| border-radius: 3px; | |
| text-transform: uppercase; | |
| } | |
| .post-media-image .icon { | |
| position: absolute; | |
| bottom: -31px; | |
| left: 50%; | |
| margin-left: -31px; | |
| padding: 15px; | |
| background: #fff; | |
| border-radius: 50%; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| body.night-mode .post-media-image .icon { | |
| background: #131313; | |
| } | |
| .post-media-embed-responsive iframe { | |
| width: 100%!important; | |
| } | |
| .embed-ifram-wrapper * { | |
| width: 100%!important; | |
| } | |
| .embed-ifram-wrapper iframe { | |
| min-height: 400px; | |
| } | |
| .embed-ifram-wrapper .wp-embedded-content { | |
| padding: 0 16px; | |
| } | |
| .post-media-meta { | |
| padding: 15px; | |
| width: 100%; | |
| transition: all .2s; | |
| } | |
| .post-media-meta .title { | |
| display: block; | |
| font-size: 16px; | |
| font-weight: 600; | |
| line-height: 22px; | |
| word-break: break-word; | |
| } | |
| .post-media-meta .title:hover { | |
| text-decoration: none; | |
| } | |
| .post-media-meta .text { | |
| max-height: 100px; | |
| overflow: hidden; | |
| } | |
| .post-media-meta .info { | |
| color: #999; | |
| font-size: 11px; | |
| } | |
| .post-job-meta { | |
| padding: 15px; | |
| padding-bottom: 0; | |
| text-align: center; | |
| } | |
| .post-job-meta .job-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| line-height: 26px; | |
| word-break: break-word; | |
| } | |
| .post-job-meta .job-description { | |
| background: #f7f7f7; | |
| padding: 10px; | |
| border: 1px solid #e5e5e5; | |
| margin-top: 10px; | |
| border-radius: 6px; | |
| } | |
| body.night-mode .job-description { | |
| border-color: #424242; | |
| background: #1d1d1d; | |
| } | |
| /* -- */ | |
| /* post-downloader */ | |
| .post-downloader { | |
| border-top: 1px solid #eee; | |
| border-bottom: 1px solid #eee; | |
| padding: 10px 16px; | |
| margin-top: 10px; | |
| } | |
| body.night-mode .post-downloader { | |
| border-color: #323232; | |
| } | |
| .post-downloader .icon { | |
| display: table-cell; | |
| vertical-align: middle; | |
| background-color: #f9f9f9; | |
| padding: 10px 20px; | |
| border-radius: 2px; | |
| } | |
| .night-mode .post-downloader .icon { | |
| background-color: #131313; | |
| } | |
| .post-downloader .info { | |
| display: table-cell; | |
| vertical-align: top; | |
| padding-left: 10px; | |
| width: 100%; | |
| } | |
| /* -- */ | |
| /* post product */ | |
| .post-product-container { | |
| padding: 0 16px; | |
| } | |
| .post-product-wrapper { | |
| display: flex; | |
| background: #f7f7f7; | |
| padding: 10px 5px; | |
| border: 1px solid #e5e5e5; | |
| font-size: 14px; | |
| border-radius: 6px; | |
| } | |
| body.night-mode .post-product-wrapper { | |
| border-color: #424242; | |
| background: #1d1d1d; | |
| } | |
| .post-product-details { | |
| flex: 1; | |
| border-right: 1px solid #e5e5e5; | |
| text-align: center; | |
| vertical-align: middle; | |
| } | |
| body.night-mode .post-product-details { | |
| border-color: #424242; | |
| } | |
| .post-product-details:last-child { | |
| border-right: 0; | |
| } | |
| .post-product-details .title { | |
| font-weight: 600; | |
| margin-bottom: 3px; | |
| } | |
| .post-product-details .description { | |
| color: #555; | |
| } | |
| .post-product-details .description .badge { | |
| font-size: 13px; | |
| padding: 4px 12px; | |
| } | |
| body.night-mode .post-product-details .description { | |
| color: #adadad; | |
| } | |
| /* -- */ | |
| /* post-dropdown-menu */ | |
| .post-dropdown-menu { | |
| width: 240px; | |
| } | |
| .post-dropdown-menu .fa { | |
| margin-right: 10px; | |
| color: #8b8b8b; | |
| } | |
| .post-dropdown-menu .action { | |
| font-size: 14px; | |
| line-height: 18px; | |
| font-weight: 600; | |
| } | |
| .post-dropdown-menu .action.no-icon { | |
| padding-left: 22px; | |
| font-weight: normal; | |
| } | |
| .post-dropdown-menu .action.no-desc { | |
| font-weight: normal; | |
| } | |
| .post-dropdown-menu .action-desc { | |
| padding-left: 30px; | |
| color: #999; | |
| font-size: 11px; | |
| line-height: 16px; | |
| } | |
| /* -- */ | |
| /* post-map*/ | |
| .post-map img { | |
| } | |
| body.night-mode .post-map img { | |
| } | |
| /* -- */ | |
| /* polls */ | |
| .poll-options { | |
| padding: 0 16px; | |
| } | |
| .poll-option { | |
| display: table-cell; | |
| vertical-align: top; | |
| position: relative; | |
| width: 100%; | |
| padding: 8px 12px; | |
| background-color: #ebebeb; | |
| font-weight: 600; | |
| border-radius: 12px; | |
| } | |
| body.night-mode .poll-option { | |
| background-color: #323232; | |
| } | |
| .poll-option:hover { | |
| cursor: pointer; | |
| background: #d4d4d4; | |
| } | |
| .poll-option .percentage-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| background-color: #89a8e8; | |
| border-radius: 12px; | |
| } | |
| body.night-mode .poll-option .percentage-bg { | |
| background-color: #121212; | |
| } | |
| .poll-option .custom-control-input:checked + .custom-control-label { | |
| color: #fff; | |
| } | |
| .poll-voters { | |
| display: table-cell; | |
| vertical-align: top; | |
| padding-left: 5px; | |
| } | |
| .poll-voters .more { | |
| width: 35px; | |
| height: 35px; | |
| background-color: #ebebeb; | |
| padding: 8px 0; | |
| border-radius: 50%; | |
| font-size: 13px; | |
| font-weight: 600; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| body.night-mode .poll-voters .more { | |
| background-color: #323232; | |
| } | |
| /* -- */ | |
| /* youtube-player */ | |
| .youtube-player { | |
| position: relative; | |
| padding-top: 56%; | |
| height: 0; | |
| overflow: hidden; | |
| max-width: 100%; | |
| background: #000; | |
| } | |
| .youtube-player iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: transparent; | |
| } | |
| .youtube-player img { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| display: block; | |
| margin: auto; | |
| max-width: 100%; | |
| width: 100%; | |
| height: auto; | |
| cursor: pointer; | |
| transition: .4s all; | |
| } | |
| .youtube-player img:hover { | |
| filter: brightness(75%); | |
| } | |
| .youtube-player .play { | |
| width: 72px; | |
| height: 72px; | |
| left: 50%; | |
| top: 50%; | |
| margin-left: -36px; | |
| margin-top: -36px; | |
| position: absolute; | |
| background-image: url(../images/youtube.png); | |
| background-size: contain; | |
| cursor: pointer; | |
| } | |
| .youtube-player.with-live .play { | |
| width: 52px; | |
| height: 52px; | |
| left: 50%; | |
| top: 50%; | |
| margin-left: -26px; | |
| margin-top: -26px; | |
| position: absolute; | |
| background-image: url(../images/play-button.png); | |
| background-size: contain; | |
| cursor: pointer; | |
| } | |
| /* -- */ | |
| /* COMMENT */ | |
| /* ------------------------------- */ | |
| .comment { | |
| padding-bottom: 10px; | |
| } | |
| .comment-avatar { | |
| float: left; | |
| } | |
| .comment-avatar-picture { | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-color: #eee; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 100%; | |
| overflow: hidden; | |
| min-width: 36px; | |
| min-height: 36px; | |
| display: block; | |
| border-radius: 50%; | |
| } | |
| .comment-data, .comment-edit { | |
| margin-left: 46px; | |
| } | |
| .comment-data .img-fluid { | |
| max-width: 30%; | |
| max-height: 100px; | |
| margin: 5px 0; | |
| } | |
| .comment-inner-wrapper { | |
| display: flex; | |
| margin-bottom: 5px; | |
| } | |
| .comment-inner { | |
| position: relative; /* :before */ | |
| padding: 8px 12px; | |
| background-color: #fff; | |
| border-radius: 18px; | |
| box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); | |
| } | |
| body.night-mode .comment-inner { | |
| background-color: #121212; | |
| } | |
| .comment-inner:before { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| left: -6px; | |
| top: 9px; | |
| width: 0; | |
| height: 0; | |
| border: 8px solid transparent; | |
| border-left-width: 0; | |
| border-right-color: #ffffff; | |
| cursor: default; | |
| z-index: 1; | |
| filter: drop-shadow(-1px 1px 0px rgba(0, 0, 0, 0.02)); | |
| } | |
| body.night-mode .comment-inner:before { | |
| border-right-color: #121212; | |
| } | |
| .comment-author { | |
| font-weight: 500; | |
| } | |
| .comment-text { | |
| text-align: initial; | |
| word-break: break-word; | |
| word-wrap: break-word; | |
| overflow: hidden; | |
| margin-bottom: 5px; | |
| } | |
| .comment-text .twa { | |
| font-size: 1.4em; | |
| } | |
| .comment-actions > li { | |
| float: left; | |
| margin-right: 8px; | |
| } | |
| .comment-replies { | |
| padding-top: 10px; | |
| } | |
| .comment-replies > ul { | |
| width: 100%; | |
| } | |
| /* comment-form */ | |
| .comment-form textarea { | |
| background: #fff; | |
| direction: ltr; | |
| display: block; | |
| border: 0; | |
| resize: none; | |
| outline: none; | |
| width: 100%; | |
| padding: 8px 16px; | |
| padding-right: 128px; | |
| margin: 0; | |
| font-size: 13px; | |
| line-height: 18px; | |
| height: 36px; | |
| border: 1px solid #ededed; | |
| border-radius: 18px | |
| } | |
| body.night-mode .comment-form textarea { | |
| color: #eee; | |
| background: #121212; | |
| border-color: #424242; | |
| } | |
| @media (min-width: 992px) { | |
| .comment-form textarea { | |
| padding-right: 100px; | |
| } | |
| } | |
| .comment-form .x-form-tools { | |
| bottom: 4px; | |
| right: 14px; | |
| } | |
| /* -- */ | |
| .comment-voice-notes, | |
| .comment-attachments { | |
| background: #fff; | |
| padding: 10px 14px 4px 14px; | |
| margin-top: 5px; | |
| border: 1px solid #eee; | |
| border-radius: 18px; | |
| } | |
| .comment-voice-notes { | |
| display: none; | |
| padding: 10px; | |
| } | |
| body.night-mode .comment-voice-notes, | |
| body.night-mode .comment-attachments { | |
| background: transparent; | |
| border-color: #424242; | |
| } | |
| .comment .comment-btn { | |
| display: none; | |
| float: right; | |
| } | |
| .comment:hover .comment-btn { | |
| display: block; | |
| } | |
| .live-comments .comment:hover .comment-btn { | |
| display: none; | |
| } | |
| .comment-btn button.close { | |
| font-size: 1.4em; | |
| } | |
| .comment .dropdown-toggle-icon { | |
| color: #999; | |
| padding: 5px; | |
| border-radius: 50%; | |
| } | |
| .comment .dropdown-toggle-icon:hover { | |
| background: #e9eaee; | |
| cursor: pointer; | |
| } | |
| body.night-mode .comment .dropdown-toggle-icon:hover { | |
| background: #333; | |
| } | |
| /* BLOG */ | |
| /* ------------------------------- */ | |
| /* blog-container */ | |
| .blog-container { | |
| background: #ffffff; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-bottom: 20px; | |
| display: block; | |
| color: inherit; | |
| text-decoration: none; | |
| position: relative; | |
| } | |
| .night-mode .blog-container { | |
| background: #212121; | |
| } | |
| @media (min-width: 768px) { | |
| .blog-container { | |
| height: 410px; | |
| } | |
| .blog-container.primary { | |
| background: var(--header-bg-color); | |
| } | |
| } | |
| .blog-image { | |
| min-height: 150px; | |
| } | |
| @media (min-width: 576px) { | |
| .blog-image { | |
| overflow: hidden; | |
| height: 150px; | |
| } | |
| } | |
| .blog-image img { | |
| height: 100%; | |
| width: 100%; | |
| object-fit: cover; | |
| } | |
| @media (min-width: 768px) { | |
| .blog-container.primary .blog-image { | |
| display: inline-block; | |
| width: 50%; | |
| height: 100%; | |
| max-height: 100%; | |
| } | |
| .blog-container.primary .blog-image img { | |
| width: auto; | |
| max-width: inherit; | |
| } | |
| } | |
| .blog-content { | |
| padding: 10px; | |
| } | |
| @media (min-width: 768px) { | |
| .blog-container.primary .blog-content { | |
| display: inline-block; | |
| vertical-align: top; | |
| width: 49%; | |
| color: #ffffff; | |
| } | |
| } | |
| .blog-content h3 { | |
| margin: 0; | |
| font-weight: 900; | |
| font-size: 20px; | |
| text-transform: uppercase; | |
| } | |
| @media (min-width: 576px) { | |
| .blog-container .blog-content h3 { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| line-height: 24px; | |
| max-height: 72px; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .blog-container.primary .blog-content h3 { | |
| font-size: 26px; | |
| line-height: 30px; | |
| max-height: 180px; | |
| -webkit-line-clamp: 6; | |
| } | |
| } | |
| .blog-content .text { | |
| margin: 12px 0; | |
| font-size: 13px; | |
| } | |
| @media (min-width: 576px) { | |
| .blog-container .blog-content .text { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| line-height: 18px; | |
| max-height: 108px; | |
| -webkit-line-clamp: 6; | |
| -webkit-box-orient: vertical; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .blog-container.primary .blog-content .text { | |
| margin: 13px 0; | |
| font-size: 16px; | |
| font-weight: 300; | |
| line-height: 20px; | |
| max-height: 140px; | |
| -webkit-line-clamp: 7; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .blog-container.primary .text-link { | |
| color: #eee; | |
| } | |
| } | |
| .blog-content .post-avatar { | |
| padding-right: 5px; | |
| padding-top: 3px; | |
| } | |
| .blog-more { | |
| width: 0%; | |
| height: 100%; | |
| color: #aaa; | |
| background-color: var(--header-bg-color); | |
| position: absolute; | |
| top: 0; | |
| opacity: 0.0; | |
| text-align: center; | |
| -o-transition: all 0.4s ease-out 0s; | |
| transition: all 0.4s ease-out 0s; | |
| } | |
| .blog-more span { | |
| position: absolute; | |
| top: calc(50% - 22px); | |
| left: calc(50% - 45px); | |
| border: 1px solid #fff; | |
| display: inline-block; | |
| padding: 10px 30px; | |
| border-radius: 3px; | |
| color: #fff; | |
| font-size: 16px; | |
| } | |
| .blog-container:hover .blog-more { | |
| width: 100%; | |
| opacity: 0.95; | |
| } | |
| /* -- */ | |
| /* article */ | |
| .article-wrapper { | |
| background: #fff; | |
| padding: 25px; | |
| border-radius: 3px 3px 0 0; | |
| } | |
| .night-mode .article-wrapper { | |
| background: #212121; | |
| } | |
| .article-wrapper h3 { | |
| margin-top: 0; | |
| margin-bottom: 20px; | |
| } | |
| .article-meta-counter { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| margin-bottom: 5px; | |
| font-size: 14px; | |
| line-height: 24px; | |
| color: #999; | |
| background: #f5f5f5; | |
| border-radius: 2px; | |
| } | |
| .article-meta-counter:hover { | |
| color: #999; | |
| background: #e1e1e1; | |
| cursor: pointer; | |
| } | |
| .article-text { | |
| font-size: 1.2em; | |
| line-height: 1.6em; | |
| word-wrap: break-word; | |
| } | |
| .article-text img { | |
| max-width: 100%!important; | |
| } | |
| .article-text iframe { | |
| width: 100%!important; | |
| } | |
| .article-tags { | |
| margin-top: 20px | |
| } | |
| .article-tags ul > li { | |
| display: inline-block; | |
| margin-right: 4px; | |
| margin-top: 4px; | |
| } | |
| .article-tags ul > li > a { | |
| border-radius: 2px; | |
| background: #f5f5f5; | |
| padding: 0 12px; | |
| line-height: 24px; | |
| color: #999; | |
| font-weight: 600; | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| text-align: center; | |
| white-space: nowrap; | |
| display: inline-block; | |
| } | |
| .article-tags ul > li > a:hover { | |
| background: var(--header-bg-color); | |
| color: #fff; | |
| } | |
| /* -- */ | |
| /* articles-widget */ | |
| .articles-widget-header { | |
| margin-bottom: 20px; | |
| border-bottom: 1px solid #e1e1e1; | |
| } | |
| .night-mode .articles-widget-header { | |
| border-color: #212121; | |
| } | |
| .articles-widget-title { | |
| display: inline-block; | |
| margin: 0; | |
| margin-bottom: -1px; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| font-weight: 300; | |
| font-size: 18px; | |
| line-height: 40px; | |
| color: #999; | |
| border-bottom: 1px solid #aaa; | |
| } | |
| /* -- */ | |
| /* .article-categories */ | |
| .article-categories { | |
| margin-bottom: 15px; | |
| } | |
| .article-categories li { | |
| float: left; | |
| margin-right: 5px; | |
| margin-bottom: 5px; | |
| } | |
| .article-category { | |
| border-radius: 12px; | |
| background: #777; | |
| padding: 0 12px; | |
| line-height: 24px; | |
| color: #fff; | |
| font-weight: 600; | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| text-align: center; | |
| white-space: nowrap; | |
| display: inline-block; | |
| } | |
| .article-category.small { | |
| font-size: 9px; | |
| } | |
| .article-category:hover { | |
| background: var(--header-bg-color); | |
| color: #fff; | |
| } | |
| /* -- */ | |
| /* AUTO-COMPLETE */ | |
| /* ------------------------------- */ | |
| .dropdown-menu.auto-complete { | |
| display: none; | |
| left: 0; | |
| margin-top: 0; | |
| border-radius: 0; | |
| box-shadow: none; | |
| } | |
| .typeahead { | |
| position: relative; /* for dropdown-menu */ | |
| float: left; | |
| } | |
| .typeahead input { | |
| background: transparent; | |
| width: 100%; | |
| color: #4e5665; | |
| font-size: 13px; | |
| line-height: 20px; | |
| outline: 0 none; | |
| border: 0 none; | |
| } | |
| body.night-mode .typeahead input { | |
| color: #fff; | |
| } | |
| .tags li { | |
| float: left; | |
| padding: 2px 4px; | |
| margin: 0 3px 3px 0; | |
| background: #EEF2F5; | |
| color: #245774; | |
| font-size: 11px; | |
| line-height: 16px; | |
| border-radius: 3px; | |
| } | |
| .tags button { | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| font-size: 16px; | |
| margin-left: 4px; | |
| } | |
| .tags button:hover { | |
| filter: alpha(opacity=80); | |
| opacity: 0.8; | |
| } | |
| /* Google Geo-Autocomplete */ | |
| .pac-container { | |
| z-index: 999999; | |
| } | |
| /* -- */ | |
| /* LIGHTBOX */ | |
| /* ------------------------------- */ | |
| .lightbox-open { | |
| overflow: hidden; /* hide the page scroll */ | |
| padding-right: 17px !important; | |
| } | |
| .lightbox-open .main-header { | |
| padding-right: 17px !important; | |
| } | |
| .lightbox { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.75); | |
| z-index: 99999; | |
| overflow-y: scroll; | |
| } | |
| @media (min-width: 768px) { | |
| .lightbox { | |
| overflow-y: none; | |
| } | |
| } | |
| .lightbox-container { | |
| display: table; | |
| width: 100%; | |
| box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.6); | |
| padding-right: 0; | |
| padding-left: 0; | |
| } | |
| @media (min-width: 768px) { | |
| .lightbox-container { | |
| margin-top: 46px; | |
| width: inherit; | |
| } | |
| } | |
| .lightbox-preview { | |
| position: relative; | |
| display: block; | |
| width: 100%; | |
| vertical-align: middle; | |
| background: #000; | |
| text-align: center; | |
| } | |
| @media (min-width: 768px) { | |
| .lightbox-preview { | |
| display: table-cell; | |
| width: 65%; | |
| max-width: 800px; | |
| } | |
| } | |
| .lightbox-preview.nodata { | |
| width: 100%; | |
| } | |
| .lightbox-preview.with-live { | |
| padding: 25px; | |
| } | |
| .lightbox-preview.with-live video { | |
| top: 0!important; | |
| left: 0!important; | |
| } | |
| .lightbox-next, | |
| .lightbox-prev { | |
| position: absolute; | |
| top: 50%; | |
| right: 2%; | |
| opacity: 0.5; | |
| } | |
| .lightbox-prev { | |
| left: 2%; | |
| right: auto; | |
| } | |
| .lightbox-next:hover, | |
| .lightbox-prev:hover { | |
| opacity: 1; | |
| cursor: pointer; | |
| } | |
| .lightbox-next .fa, | |
| .lightbox-prev .fa { | |
| color: #fff; | |
| text-shadow: 0 2px 2px rgba(0,0,0,.5); | |
| } | |
| .lightbox-preview img { | |
| margin: 0 auto; | |
| max-width: 100%; | |
| max-height: calc(100vh - 92px); /* 92px = 46*2 (header) */ | |
| } | |
| .lightbox-data { | |
| display: block; | |
| width: 100%; | |
| vertical-align: top; | |
| background: #fff; | |
| } | |
| @media (min-width: 768px) { | |
| .lightbox-data { | |
| display: table-cell; | |
| width: 35%; | |
| } | |
| } | |
| body.night-mode .lightbox-data { | |
| background: #212121; | |
| } | |
| .lightbox-data .lightbox-close { | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| } | |
| .lightbox-data .lightbox-close:hover { | |
| background: #e9eaee; | |
| color: #666; | |
| cursor: pointer; | |
| } | |
| .lightbox-post { | |
| padding: 0 8px; | |
| height: calc(100vh - 113px); /* 113px = 46*2 (header) + 21px (close btn) */ | |
| } | |
| /* -- */ | |
| /* STORIES */ | |
| /* ------------------------------- */ | |
| .stories-wrapper { | |
| overflow: auto; | |
| padding-bottom: 0; | |
| margin-bottom: 5px; | |
| } | |
| .stories.carousel { | |
| overflow: unset!important; | |
| } | |
| .add-story { | |
| position: relative; | |
| display: inline-block; | |
| width: 12vw; | |
| max-width: 60px; | |
| height: 12vw; | |
| max-height: 60px; | |
| margin-bottom: 22px; | |
| cursor: pointer; | |
| } | |
| .add-story .img { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| background-size: cover; | |
| background-position: center; | |
| border-radius: 50%; | |
| } | |
| .add-story .add { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| padding: 1px 3px 0px 3px; | |
| border-radius: 50%; | |
| background: #fff; | |
| font-size: 14px; | |
| color: #2795e9; | |
| } | |
| body.night-mode .add-story .add { | |
| background: #212121; | |
| } | |
| .stories.sngine .story > a { | |
| text-decoration:none; | |
| } | |
| .stories.sngine .story > a > .img { | |
| border-radius:50%; | |
| padding:2px; | |
| background: #d6249f; | |
| background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); | |
| } | |
| .stories.sngine .story > a > .img > * { | |
| border-radius: 50%; | |
| border:3px solid #fff; | |
| } | |
| .stories.sngine .story.seen{ | |
| opacity:.5; | |
| } | |
| .stories.sngine .story.seen > a > .img { | |
| background:#999; | |
| } | |
| /* -- */ | |
| /* CHAT */ | |
| /* ------------------------------- */ | |
| /* chat-sidebar */ | |
| .chat-sidebar { | |
| background: #fefefe; | |
| display: none; | |
| position: fixed; | |
| right: 0; | |
| top: 50px; | |
| bottom: 0; | |
| width: 210px; | |
| box-shadow: 0 0 4px rgba(0,0,0,.1); | |
| } | |
| body.night-mode .chat-sidebar { | |
| background: #212121; | |
| box-shadow: -6px 0 20px rgba(0, 0, 0, 0.04); | |
| } | |
| @media (min-width: 1200px) { | |
| .chat-sidebar { | |
| display: block; | |
| } | |
| } | |
| /* chat-sidebar-header */ | |
| .chat-sidebar-header { | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| padding: 10px; | |
| line-height: 20px; | |
| } | |
| .chat-sidebar-header .fa { | |
| color: #c2c2c2; | |
| } | |
| .chat-sidebar-header .fa:hover { | |
| color: #999; | |
| cursor: pointer; | |
| } | |
| /* -- */ | |
| /* chat-sidebar-content */ | |
| .chat-sidebar-content { | |
| position: absolute; | |
| top: 40px; | |
| bottom: 34px; | |
| width: 100%; | |
| border-top: 1px solid #ededed; | |
| } | |
| body.night-mode .chat-sidebar-content { | |
| border-color: #363636; | |
| } | |
| .chat-sidebar-content .online, | |
| .chat-sidebar-content .offline { | |
| font-size: 9px; | |
| margin-right: 3px; | |
| } | |
| .chat-sidebar .online { | |
| color: #65a830; | |
| } | |
| .chat-sidebar.disabled .chat-sidebar-content { | |
| opacity: 0.3; | |
| } | |
| .chat-sidebar.disabled .chat-sidebar-content .online, | |
| .chat-sidebar.disabled .chat-sidebar-content .offline { | |
| display: none; | |
| } | |
| /* -- */ | |
| /* chat-sidebar-footer */ | |
| .chat-sidebar-footer { | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| padding: 10px; | |
| } | |
| .chat-sidebar-footer .form-control { | |
| border: 0; | |
| box-shadow: none; | |
| background: #ebebeb; | |
| border-radius: 4px; | |
| } | |
| body.night-mode .chat-sidebar-footer .form-control { | |
| background: #010101; | |
| } | |
| /* -- */ | |
| /* chat-widget */ | |
| .chat-widget { | |
| display: none; | |
| position: fixed; | |
| bottom: 0; | |
| right: 10px; | |
| width: 260px; | |
| z-index: 1000; | |
| box-shadow: 0 0 4px rgba(0,0,0,.1); | |
| } | |
| @media (min-width: 992px) { | |
| .chat-widget { | |
| display: block; | |
| } | |
| } | |
| /* -- */ | |
| /* chat-head-title */ | |
| .chat-widget-head { | |
| background: var(--header-bg-color); | |
| position: relative; /* for close button */ | |
| color: #fff; | |
| width: 100%; | |
| font-size: 12px; | |
| padding: 10px 8px; | |
| border-radius: 2px 2px 0 0; | |
| cursor: pointer; | |
| } | |
| .chat-widget-head .fa-circle { | |
| color: #65a830; | |
| font-size: 9px; | |
| } | |
| .chat-widget-head a { | |
| color: #fff; | |
| } | |
| .chat-widget-head a:hover { | |
| text-decoration: underline; | |
| } | |
| .chat-head-label { | |
| display: none; | |
| position: absolute; | |
| top: -15px; | |
| right: 5px; | |
| } | |
| .chat-widget.chat-box.new .chat-head-label { | |
| display: block; | |
| } | |
| /* -- */ | |
| /* chat-widget-content */ | |
| .chat-widget-content { | |
| position: relative; /* for chat-to */ | |
| display: none; | |
| background: var(--body-bg-color); | |
| padding: 0; | |
| } | |
| body.night-mode .chat-widget-content { | |
| background: #212121; | |
| box-shadow: 0 1px 1px rgb(0, 0, 0); | |
| } | |
| /* -- */ | |
| /* chat-to */ | |
| .chat-to { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| background: #fff; | |
| border-bottom: 1px solid #e6ecf5; | |
| color: #cdcdcd; | |
| padding: 5px 10px 5px 38px; | |
| } | |
| body.night-mode .chat-to { | |
| background: #212121; | |
| border-color: #121212; | |
| } | |
| .chat-to .to { | |
| position: absolute; | |
| top: 5px; | |
| left: 10px; | |
| } | |
| .panel-messages .chat-to { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| } | |
| .panel-messages .chat-to .to { | |
| top: 10px; | |
| } | |
| /* -- */ | |
| /* chat-conversations */ | |
| .chat-conversations { | |
| padding: 0 7px; | |
| } | |
| /* -- */ | |
| /* chat-typing */ | |
| .chat-typing { | |
| display: none; | |
| padding: 10px; | |
| } | |
| body.night-mode .chat-typing { | |
| background: #212121; | |
| border-color: #121212; | |
| } | |
| .loading-dots:after { | |
| content: ' .'; | |
| animation: dots 1s steps(5, end) infinite;} | |
| @keyframes dots { | |
| 0%, 20% { | |
| color: rgba(0,0,0,0); | |
| text-shadow: | |
| .25em 0 0 rgba(0,0,0,0), | |
| .5em 0 0 rgba(0,0,0,0);} | |
| 40% { | |
| color: var(--body-color); | |
| text-shadow: | |
| .25em 0 0 rgba(0,0,0,0), | |
| .5em 0 0 rgba(0,0,0,0);} | |
| 60% { | |
| text-shadow: | |
| .25em 0 0 var(--body-color), | |
| .5em 0 0 rgba(0,0,0,0);} | |
| 80%, 100% { | |
| text-shadow: | |
| .25em 0 0 var(--body-color), | |
| .5em 0 0 var(--body-color);}} | |
| /* -- */ | |
| /* chat-voice-notes & chat-attachments */ | |
| .chat-voice-notes { | |
| display: none; | |
| } | |
| .chat-voice-notes, | |
| .chat-attachments { | |
| background: #fff; | |
| padding: 10px; | |
| border-top: 1px solid #dfe8f5; | |
| } | |
| body.night-mode .chat-voice-notes, | |
| body.night-mode .chat-attachments { | |
| background: #212121; | |
| border-color: #121212; | |
| } | |
| /* -- */ | |
| /* chat-form */ | |
| .chat-form { | |
| background: #fff; | |
| } | |
| body.night-mode .chat-form { | |
| background: #212121; | |
| } | |
| .chat-form-message { | |
| background: transparent; | |
| padding: 7px; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| max-height: 69px; /* 14px*4 (lines) + 14px (padding) + 1px (top-border) */ | |
| border-top: 1px solid #dfe8f5; | |
| } | |
| body.night-mode .chat-form-message { | |
| border-color: #121212; | |
| } | |
| .chat-form-message textarea, | |
| .chat-form-message input[type="text"] { | |
| background: transparent; | |
| direction: ltr; | |
| display: block; | |
| border: 0 none; | |
| resize: none; | |
| outline: none; | |
| box-shadow: none; | |
| width: 100%; | |
| padding: 0; | |
| margin: 0; | |
| font-size: 13px; | |
| line-height: 18px; | |
| height: 18px; | |
| overflow: hidden; | |
| } | |
| body.night-mode .chat-form-message textarea, | |
| body.night-mode .chat-form-message input[type="text"] { | |
| color: #fff; | |
| } | |
| .chat-form .x-form-tools { | |
| position: static; | |
| padding: 0 7px 7px 7px; | |
| } | |
| .chat-form ul.x-form-tools > li.x-form-tools-colors { | |
| color: #597ba5; | |
| } | |
| .chat-form .emoji-menu { | |
| bottom: 40px; | |
| right: 100%; | |
| left: 2px; | |
| } | |
| .chat-form .emoji-menu:before { | |
| right: auto; | |
| left: 38px; | |
| } | |
| .chat-form .emoji-menu:after{ | |
| right: auto; | |
| left: 39px; | |
| } | |
| /* -- */ | |
| /* chat-colors-menu */ | |
| .chat-colors-menu { | |
| display: none; | |
| position: absolute; | |
| bottom: 40px; | |
| left: 28px; | |
| width: 189px; | |
| margin: 0; | |
| padding: 6px; | |
| font-size: 13px; | |
| line-height: 100%; | |
| background-color: #fff; | |
| border: 1px solid #d4d5d6; | |
| border-radius: 2px; | |
| box-shadow: 0 1px 1px rgba(0,0,0,.05); | |
| z-index: 99999; | |
| } | |
| .chat-colors-menu:before { | |
| position: absolute; | |
| top: 100%; | |
| left: 42px; | |
| content: ""; | |
| border-color: #d4d5d6 transparent transparent transparent; | |
| border-style: solid; | |
| border-width: 8px; | |
| } | |
| .chat-colors-menu:after { | |
| position: absolute; | |
| top: 100%; | |
| left: 43px; | |
| content: ""; | |
| border-color: #fff transparent transparent transparent; | |
| border-style: solid; | |
| border-width: 7px; | |
| } | |
| .chat-colors-menu .item { | |
| float: left; | |
| padding: 4px; | |
| margin-right: 1px; | |
| margin-bottom: 1px; | |
| } | |
| .chat-colors-menu .item:hover { | |
| cursor: pointer; | |
| background: #f3f3f3; | |
| border-radius: 4px; | |
| } | |
| /* -- */ | |
| /* conversation */ | |
| .conversation { | |
| padding-top: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .conversation-user { | |
| width: 30px; | |
| height: 30px; | |
| float: left; | |
| border-radius: 50%; | |
| overflow: hidden; | |
| margin-right: 10px; | |
| } | |
| .conversation-user img { | |
| width: 30px; | |
| height: 30px; | |
| } | |
| .conversation-body { | |
| position: relative; /* for arrow */ | |
| float: left; | |
| max-width: -moz-calc(100% - 40px); /* 40px = (30px+10px) (avatar + margin) */ | |
| max-width: -webkit-calc(100% - 40px); | |
| max-width: -o-calc(100% - 40px); | |
| max-width: calc(100% - 40px); | |
| } | |
| .conversation.right .conversation-user, | |
| .conversation.right .conversation-body { | |
| float: right; | |
| } | |
| .conversation-body .text { | |
| background: #fff; | |
| padding: 6px 8px; | |
| font-size: 13px; | |
| border-radius: 12px; | |
| border-bottom-left-radius: 0; | |
| word-break: initial; | |
| word-wrap: break-word; | |
| } | |
| body.night-mode .conversation-body .text { | |
| background: #121212; | |
| } | |
| .conversation.right .conversation-body .text { | |
| background: #3367d6; | |
| color: #fff; | |
| border-radius: 12px; | |
| border-bottom-right-radius: 0; | |
| } | |
| .conversation.right .conversation-body .text a { | |
| color: #fff; | |
| } | |
| .conversation-body .text a { | |
| text-decoration: underline; | |
| } | |
| .conversation-body .text a:hover { | |
| text-decoration: none; | |
| } | |
| .conversation-body .text .twa { | |
| font-size: 2em; | |
| } | |
| /* -- */ | |
| /* attachments */ | |
| .conversation-body .attachments li { | |
| float: left; | |
| width: 64px; | |
| height: 64px; | |
| margin-right: 5px; | |
| margin-bottom: 5px; | |
| } | |
| .conversation-body .attachments li.item { | |
| border: 1px solid #eee; | |
| cursor: pointer; | |
| } | |
| .conversation-body .attachments li.item img { | |
| width: 64px; | |
| height: 64px; | |
| } | |
| .conversation-body .attachments li.loading { | |
| padding-top: 22px; /* 64px-20px(loader) / 2 */ | |
| background: #f3f3f3; | |
| border: 1px solid #eee; | |
| } | |
| /* -- */ | |
| /* time */ | |
| .conversation-body .time { | |
| position: absolute; | |
| top: 100%; | |
| left: 0px; | |
| width: 204px; | |
| margin-top: 2px; | |
| color: #605f5f; | |
| font-size: 10px; | |
| } | |
| body.night-mode .conversation-body .time { | |
| color: #999; | |
| } | |
| .conversation.right .conversation-body .time { | |
| right: 0; | |
| left: auto; | |
| text-align: right; | |
| } | |
| .conversation-body .time:before { | |
| content: "\f017"; | |
| font-family: 'Font Awesome\ 5 Free'; | |
| font-style: normal; | |
| font-weight: normal; | |
| text-decoration: inherit; | |
| margin-top: 4px; | |
| padding-right: 2px; | |
| font-size: 0.875em; | |
| } | |
| /* -- */ | |
| /* seen */ | |
| .conversation-body .seen { | |
| position: absolute; | |
| top: 100%; | |
| right: 0px; | |
| width: 204px; | |
| margin-top: 18px; | |
| margin-bottom: 4px; | |
| color: var(--header-bg-color); | |
| font-size: 10px; | |
| text-align: right; | |
| } | |
| .conversation-body .seen:before { | |
| content: "\f00c"; | |
| font-family: 'Font Awesome\ 5 Free'; | |
| font-style: normal; | |
| font-weight: 900; | |
| text-decoration: inherit; | |
| margin-top: 4px; | |
| padding-right: 4px; | |
| font-size: 0.875em; | |
| } | |
| /* -- */ | |
| /* twilio-stream (video/audio chat) */ | |
| .twilio-stream-wrapper { | |
| position: relative; | |
| background: #222; | |
| } | |
| .twilio-stream-local { | |
| display: none; | |
| width: 180px; | |
| height: 240px; | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background: #000; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
| border: 1px solid #fff; | |
| } | |
| /* -- */ | |
| /* EMOJI */ | |
| /* ------------------------------- */ | |
| .emoji-menu { | |
| display: none; | |
| position: absolute; | |
| bottom: 30px; | |
| right: 0; | |
| min-width: 228px; | |
| margin: 0; | |
| padding: 6px 2px 0 6px; | |
| font-size: 13px; | |
| line-height: 100%; | |
| background-color: #fff; | |
| border: 1px solid #d4d5d6; | |
| border-radius: 2px; | |
| box-shadow: 0 1px 1px rgba(0,0,0,.05); | |
| z-index: 99999; | |
| } | |
| body.night-mode .emoji-menu { | |
| background-color: #212121; | |
| border-color: #424242; | |
| } | |
| .emoji-menu:before { | |
| position: absolute; | |
| top: 100%; | |
| right: 3px; | |
| content: ""; | |
| border-color: #d4d5d6 transparent transparent transparent; | |
| border-style: solid; | |
| border-width: 8px; | |
| } | |
| body.night-mode .emoji-menu:before { | |
| border-color: #424242 transparent transparent transparent; | |
| } | |
| .emoji-menu:after { | |
| position: absolute; | |
| top: 100%; | |
| right: 4px; | |
| content: ""; | |
| border-color: #f6f7f9 transparent transparent transparent; | |
| border-style: solid; | |
| border-width: 7px; | |
| } | |
| body.night-mode .emoji-menu:after { | |
| border-color: #212121 transparent transparent transparent; | |
| } | |
| .publisher .emoji-menu { | |
| bottom: auto; | |
| top: 25px; | |
| right: -4px; | |
| } | |
| .publisher .emoji-menu:before { | |
| top: auto; | |
| bottom: 100%; | |
| border-color: transparent transparent #d4d5d6 transparent; | |
| } | |
| body.night-mode .publisher .emoji-menu:before { | |
| border-color: transparent transparent #424242 transparent; | |
| } | |
| .publisher .emoji-menu:after { | |
| top: auto; | |
| bottom: 100%; | |
| border-color: transparent transparent #fff transparent; | |
| } | |
| body.night-mode .publisher .emoji-menu:after { | |
| border-color: transparent transparent #212121 transparent; | |
| } | |
| .lightbox .emoji-menu { | |
| bottom: auto; | |
| top: 27px; | |
| right: -7px; | |
| } | |
| .lightbox .emoji-menu:before { | |
| top: auto; | |
| bottom: 100%; | |
| border-color: transparent transparent #d4d5d6 transparent; | |
| } | |
| body.night-mode .lightbox .emoji-menu:before { | |
| border-color: transparent transparent #424242 transparent; | |
| } | |
| .lightbox .emoji-menu:after { | |
| top: auto; | |
| bottom: 100%; | |
| border-color: transparent transparent #fff transparent; | |
| } | |
| body.night-mode .lightbox .emoji-menu:after { | |
| border-color: transparent transparent #212121 transparent; | |
| } | |
| .emoji-menu .item { | |
| float: left; | |
| padding: 2px; | |
| margin-right: 1px; | |
| margin-bottom: 1px; | |
| } | |
| .emoji-menu .item:hover { | |
| cursor: pointer; | |
| background: #f3f3f3; | |
| border-radius: 4px; | |
| } | |
| body.night-mode .emoji-menu .item:hover { | |
| background: #111111; | |
| } | |
| .emoji-menu .item > img { | |
| width: 65px; | |
| height: 65px; | |
| } | |
| .emoji-menu .nav-tabs { | |
| border-top: 1px #dddfe2 solid; | |
| border-bottom: 0; | |
| margin: 0 -2px 0px -6px; | |
| padding: 0 10px; | |
| } | |
| body.night-mode .emoji-menu .nav-tabs { | |
| border-color: #424242; | |
| } | |
| .emoji-menu .nav-tabs > li > .nav-link { | |
| color: #555; | |
| padding: 12px 16px; | |
| margin: 0; | |
| border: 0; | |
| border-radius: 0; | |
| border-top: 2px solid transparent; | |
| } | |
| .emoji-menu .nav-tabs > li > .nav-link:hover { | |
| background: transparent; | |
| color: var(--link-color); | |
| border-color: transparent; | |
| border-bottom: 0; | |
| } | |
| .emoji-menu .nav-tabs > li > .nav-link.active, | |
| .emoji-menu .nav-tabs > li > .nav-link.active:hover, | |
| .emoji-menu .nav-tabs > li > .nav-link.active:focus { | |
| border: 0; | |
| color: var(--link-color); | |
| background: transparent; | |
| border-top: 2px solid var(--link-color); | |
| } | |
| /* -- */ | |
| /* REACTIONS */ | |
| /* ------------------------------- */ | |
| /* reactions-stats */ | |
| .reactions-stats { | |
| display: flex; | |
| cursor: pointer; | |
| line-height: 24px; | |
| } | |
| .reactions-stats > .reactions-stats-item { | |
| background: #fff; | |
| margin: 0 0 0 -6px; | |
| padding: 3px; | |
| border-radius: 50%; | |
| } | |
| body.night-mode .reactions-stats > .reactions-stats-item { | |
| background: #212121; | |
| } | |
| .reactions-stats > .reactions-stats-item:nth-child(1) { | |
| z-index: 3; | |
| } | |
| .reactions-stats > .reactions-stats-item:nth-child(2) { | |
| z-index: 2; | |
| } | |
| .reactions-stats > .reactions-stats-item:nth-child(3) { | |
| z-index: 1; | |
| } | |
| /* -- */ | |
| .reactions-wrapper { | |
| position: relative; | |
| } | |
| /* reaction-btn */ | |
| .reaction-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center | |
| } | |
| .reaction-btn .reaction-btn-icon { | |
| display: inline-block; | |
| } | |
| .reaction-btn .reaction-btn-name { | |
| text-transform: capitalize; | |
| margin-left: 5px; | |
| } | |
| .reaction-btn .reaction-btn-name.blue { | |
| color: #1e8bd2; | |
| } | |
| .reaction-btn .reaction-btn-name.red { | |
| color: #f25268; | |
| } | |
| .reaction-btn .reaction-btn-name.yellow { | |
| color: #f3b715; | |
| } | |
| .reaction-btn .reaction-btn-name.orange { | |
| color: #f7806c; | |
| } | |
| /* -- */ | |
| .reactions-container { | |
| display: none; | |
| position: fixed; | |
| width: 336px; /* (48px * 7) reatcions */ | |
| background: #fff; | |
| box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); | |
| border-radius: 40px; | |
| z-index: 4; /* reactions-stats-item z-index = 3 */ | |
| } | |
| body.night-mode .reactions-container { | |
| background: #424242; | |
| } | |
| @media (max-width: 480px) { | |
| .reactions-container { | |
| width: 144px; | |
| border-radius: 20px; | |
| } | |
| } | |
| .reactions_item { | |
| width: 48px; | |
| height: 48px; | |
| float: left; | |
| transform: scale(1); | |
| transition: transform .25s ease; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation: slideUp cubic-bezier(0.49, 0, 0.46, 1); | |
| animation: slideUp cubic-bezier(0.49, 0, 0.46, 1); | |
| } | |
| .reactions_item.duration-1 { | |
| -webkit-animation-duration: 0.1s; | |
| animation-duration: 0.1s; | |
| } | |
| .reactions_item.duration-2 { | |
| -webkit-animation-duration: 0.2s; | |
| animation-duration: 0.2s; | |
| } | |
| .reactions_item.duration-3 { | |
| -webkit-animation-duration: 0.3s; | |
| animation-duration: 0.3s; | |
| } | |
| .reactions_item.duration-4 { | |
| -webkit-animation-duration: 0.4s; | |
| animation-duration: 0.4s; | |
| } | |
| .reactions_item.duration-5 { | |
| -webkit-animation-duration: 0.5s; | |
| animation-duration: 0.5s; | |
| } | |
| .reactions_item.duration-6 { | |
| -webkit-animation-duration: 0.6s; | |
| animation-duration: 0.6s; | |
| } | |
| .reactions_item.duration-7 { | |
| -webkit-animation-duration: 0.7s; | |
| animation-duration: 0.7s; | |
| } | |
| .reactions_item:hover { | |
| transform: scale(1.25) translate(0, -3px); | |
| } | |
| .reactions_item:after { | |
| content: attr(data-title); | |
| position: absolute; | |
| background-color: rgba(0, 0, 0, .75); | |
| border-radius: 16px; | |
| box-sizing: border-box; | |
| color: #fff; | |
| display: inline-block; | |
| font-size: 10px; | |
| font-weight: bold; | |
| font-style: normal; | |
| line-height: 16px; | |
| opacity: 0; | |
| overflow: hidden; | |
| padding: 0 8px; | |
| text-decoration: none; | |
| text-overflow: ellipsis; | |
| transition: opacity 50ms ease; | |
| -webkit-user-select: none; | |
| text-transform: capitalize; | |
| visibility: hidden; | |
| top: 0; | |
| left: 50%; | |
| -webkit-transform: translate(-50%, -100%); | |
| transform: translate(-50%, -100%); | |
| } | |
| .reactions_item:hover:after { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| @-webkit-keyframes slideUp { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0px); | |
| } | |
| } | |
| @keyframes slideUp { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0px); | |
| } | |
| } | |
| /* -- Reaction Emoji */ | |
| .inline-emoji { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| .inline-emoji .emoji { | |
| transform: scale(0.15); | |
| top: -285%; | |
| right: 285%; | |
| } | |
| .no_animation *, | |
| .no_animation *:after, | |
| .no_animation *:before { | |
| animation: none!important; | |
| } | |
| .emoji { | |
| width: 120px; | |
| height: 120px; | |
| background: #FFDA6A; | |
| display: inline-block; | |
| border-radius: 50%; | |
| position: relative; | |
| transform: scale(0.325); | |
| top: -76%; | |
| right: 76%; | |
| } | |
| /* DON'T CONVERT TO RTL */ | |
| .emoji__face, .emoji__eyebrows, .emoji__eyes, .emoji__mouth, .emoji__tongue, .emoji__heart, .emoji__hand, .emoji__thumb { | |
| position: absolute; | |
| } | |
| .emoji__face:before, .emoji__face:after, .emoji__eyebrows:before, .emoji__eyebrows:after, .emoji__eyes:before, .emoji__eyes:after, .emoji__mouth:before, .emoji__mouth:after, .emoji__tongue:before, .emoji__tongue:after, .emoji__heart:before, .emoji__heart:after, .emoji__hand:before, .emoji__hand:after, .emoji__thumb:before, .emoji__thumb:after { | |
| position: absolute; | |
| content: ''; | |
| } | |
| .emoji__face { | |
| width: inherit; | |
| height: inherit; | |
| } | |
| .emoji--like { | |
| background: #548DFF; | |
| } | |
| .emoji--like .emoji__hand { | |
| left: 25px; | |
| bottom: 30px; | |
| width: 20px; | |
| height: 40px; | |
| background: #FFFFFF; | |
| border-radius: 5px; | |
| z-index: 0; | |
| -webkit-animation: hands-up 2s linear infinite; | |
| animation: hands-up 2s linear infinite; | |
| } | |
| .emoji--like .emoji__hand:before { | |
| left: 25px; | |
| bottom: 5px; | |
| width: 40px; | |
| background: inherit; | |
| height: 10px; | |
| border-radius: 2px 10px 10px 2px; | |
| box-shadow: 1px -9px 0 1px #FFFFFF, 2px -19px 0 2px #FFFFFF, 3px -29px 0 3px #FFFFFF; | |
| } | |
| .emoji--like .emoji__thumb { | |
| border-bottom: 20px solid #FFFFFF; | |
| border-left: 20px solid transparent; | |
| top: -25px; | |
| right: -25px; | |
| z-index: 2; | |
| -webkit-transform: rotate(5deg); | |
| transform: rotate(5deg); | |
| -webkit-transform-origin: 0% 100%; | |
| transform-origin: 0% 100%; | |
| -webkit-animation: thumbs-up 2s linear infinite; | |
| animation: thumbs-up 2s linear infinite; | |
| } | |
| .emoji--like .emoji__thumb:before { | |
| border-radius: 50% 50% 0 0; | |
| background: #FFFFFF; | |
| width: 10px; | |
| height: 12px; | |
| left: -10px; | |
| top: -8px; | |
| -webkit-transform: rotate(-15deg); | |
| transform: rotate(-15deg); | |
| -webkit-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| box-shadow: -1px 4px 0 -1px #FFFFFF; | |
| } | |
| .emoji--love { | |
| background: #F55064; | |
| } | |
| .emoji--love .emoji__heart { | |
| left: calc(50% - 40px); | |
| top: calc(50% - 40px); | |
| width: 80px; | |
| height: 80px; | |
| -webkit-animation: heart-beat 1s linear infinite alternate; | |
| animation: heart-beat 1s linear infinite alternate; | |
| } | |
| .emoji--love .emoji__heart:before, .emoji--love .emoji__heart:after { | |
| left: calc(50% - 20px); | |
| top: calc(50% - 32px); | |
| width: 40px; | |
| height: 64px; | |
| background: #FFFFFF; | |
| border-radius: 20px 20px 0 0; | |
| } | |
| .emoji--love .emoji__heart:before { | |
| -webkit-transform: translate(20px) rotate(-45deg); | |
| transform: translate(20px) rotate(-45deg); | |
| -webkit-transform-origin: 0 100%; | |
| transform-origin: 0 100%; | |
| } | |
| .emoji--love .emoji__heart:after { | |
| -webkit-transform: translate(-20px) rotate(45deg); | |
| transform: translate(-20px) rotate(45deg); | |
| -webkit-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| } | |
| .emoji--haha .emoji__face { | |
| -webkit-animation: haha-face 2s linear infinite; | |
| animation: haha-face 2s linear infinite; | |
| } | |
| .emoji--haha .emoji__eyes { | |
| width: 26px; | |
| height: 6px; | |
| border-radius: 2px; | |
| left: calc(50% - 13px); | |
| top: 35px; | |
| -webkit-transform: rotate(20deg); | |
| transform: rotate(20deg); | |
| background: transparent; | |
| box-shadow: -25px 5px 0 0 #000000, 25px -5px 0 0 #000000; | |
| } | |
| .emoji--haha .emoji__eyes:after { | |
| left: 0; | |
| top: 0; | |
| width: 26px; | |
| height: 6px; | |
| border-radius: 2px; | |
| -webkit-transform: rotate(-40deg); | |
| transform: rotate(-40deg); | |
| background: transparent; | |
| box-shadow: -25px -5px 0 0 #000000, 25px 5px 0 0 #000000; | |
| } | |
| .emoji--haha .emoji__mouth { | |
| width: 80px; | |
| height: 40px; | |
| left: calc(50% - 40px); | |
| top: 50%; | |
| background: #000000; | |
| border-radius: 0 0 40px 40px; | |
| overflow: hidden; | |
| z-index: 1; | |
| -webkit-animation: haha-mouth 2s linear infinite; | |
| animation: haha-mouth 2s linear infinite; | |
| } | |
| .emoji--haha .emoji__tongue { | |
| width: 70px; | |
| height: 30px; | |
| background: #F55064; | |
| left: calc(50% - 35px); | |
| bottom: -10px; | |
| border-radius: 50%; | |
| } | |
| .emoji--yay .emoji__face { | |
| -webkit-animation: yay 1s linear infinite alternate; | |
| animation: yay 1s linear infinite alternate; | |
| } | |
| .emoji--yay .emoji__eyebrows { | |
| left: calc(50% - 3px); | |
| top: 30px; | |
| height: 6px; | |
| width: 6px; | |
| border-radius: 50%; | |
| background: transparent; | |
| box-shadow: -6px 0 0 0 #000000, -36px 0 0 0px #000000, 6px 0 0 0 #000000, 36px 0 0 0px #000000; | |
| } | |
| .emoji--yay .emoji__eyebrows:before, .emoji--yay .emoji__eyebrows:after { | |
| width: 36px; | |
| height: 18px; | |
| border-radius: 60px 60px 0 0; | |
| background: transparent; | |
| border: 6px solid black; | |
| box-sizing: border-box; | |
| border-bottom: 0; | |
| bottom: 3px; | |
| left: calc(50% - 18px); | |
| } | |
| .emoji--yay .emoji__eyebrows:before { | |
| margin-left: -21px; | |
| } | |
| .emoji--yay .emoji__eyebrows:after { | |
| margin-left: 21px; | |
| } | |
| .emoji--yay .emoji__mouth { | |
| top: 60px; | |
| background: transparent; | |
| left: 50%; | |
| } | |
| .emoji--yay .emoji__mouth:after { | |
| width: 80px; | |
| height: 80px; | |
| left: calc(50% - 40px); | |
| top: -75px; | |
| border-radius: 50%; | |
| background: transparent; | |
| border: 6px solid #000000; | |
| box-sizing: border-box; | |
| border-top-color: transparent; | |
| border-left-color: transparent; | |
| border-right-color: transparent; | |
| z-index: 1; | |
| } | |
| .emoji--yay .emoji__mouth:before { | |
| width: 6px; | |
| height: 6px; | |
| background: transparent; | |
| border-radius: 50%; | |
| bottom: 5px; | |
| left: calc(50% - 3px); | |
| box-shadow: -25px 0 0 0 #000000, 25px 0 0 0 #000000, -35px -2px 30px 10px #D5234C, 35px -2px 30px 10px #D5234C; | |
| } | |
| .emoji--wow .emoji__face { | |
| -webkit-animation: wow-face 3s linear infinite; | |
| animation: wow-face 3s linear infinite; | |
| } | |
| .emoji--wow .emoji__eyebrows { | |
| left: calc(50% - 3px); | |
| height: 6px; | |
| width: 6px; | |
| border-radius: 50%; | |
| background: transparent; | |
| box-shadow: -18px 0 0 0 #000000, -33px 0 0 0 #000000, 18px 0 0 0 #000000, 33px 0 0 0 #000000; | |
| -webkit-animation: wow-brow 3s linear infinite; | |
| animation: wow-brow 3s linear infinite; | |
| } | |
| .emoji--wow .emoji__eyebrows:before, .emoji--wow .emoji__eyebrows:after { | |
| width: 24px; | |
| height: 20px; | |
| border: 6px solid #000000; | |
| box-sizing: border-box; | |
| border-radius: 50%; | |
| border-bottom-color: transparent; | |
| border-left-color: transparent; | |
| border-right-color: transparent; | |
| top: -3px; | |
| left: calc(50% - 12px); | |
| } | |
| .emoji--wow .emoji__eyebrows:before { | |
| margin-left: -25px; | |
| } | |
| .emoji--wow .emoji__eyebrows:after { | |
| margin-left: 25px; | |
| } | |
| .emoji--wow .emoji__eyes { | |
| width: 16px; | |
| height: 24px; | |
| left: calc(50% - 8px); | |
| top: 35px; | |
| border-radius: 50%; | |
| background: transparent; | |
| box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000; | |
| } | |
| .emoji--wow .emoji__mouth { | |
| width: 30px; | |
| height: 45px; | |
| left: calc(50% - 15px); | |
| top: 50%; | |
| border-radius: 50%; | |
| background: #000000; | |
| -webkit-animation: wow-mouth 3s linear infinite; | |
| animation: wow-mouth 3s linear infinite; | |
| } | |
| .emoji--sad .emoji__face { | |
| -webkit-animation: sad-face 2s ease-in infinite; | |
| animation: sad-face 2s ease-in infinite; | |
| } | |
| .emoji--sad .emoji__eyebrows { | |
| left: calc(50% - 3px); | |
| top: 35px; | |
| height: 6px; | |
| width: 6px; | |
| border-radius: 50%; | |
| background: transparent; | |
| box-shadow: -40px 9px 0 0 #000000, -25px 0 0 0 #000000, 25px 0 0 0 #000000, 40px 9px 0 0 #000000; | |
| } | |
| .emoji--sad .emoji__eyebrows:before, .emoji--sad .emoji__eyebrows:after { | |
| width: 30px; | |
| height: 20px; | |
| border: 6px solid #000000; | |
| box-sizing: border-box; | |
| border-radius: 50%; | |
| border-bottom-color: transparent; | |
| border-left-color: transparent; | |
| border-right-color: transparent; | |
| top: 2px; | |
| left: calc(50% - 15px); | |
| } | |
| .emoji--sad .emoji__eyebrows:before { | |
| margin-left: -30px; | |
| -webkit-transform: rotate(-30deg); | |
| transform: rotate(-30deg); | |
| } | |
| .emoji--sad .emoji__eyebrows:after { | |
| margin-left: 30px; | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| .emoji--sad .emoji__eyes { | |
| width: 14px; | |
| height: 16px; | |
| left: calc(50% - 7px); | |
| top: 50px; | |
| border-radius: 50%; | |
| background: transparent; | |
| box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000; | |
| } | |
| .emoji--sad .emoji__eyes:after { | |
| background: #548DFF; | |
| width: 12px; | |
| height: 12px; | |
| margin-left: 6px; | |
| border-radius: 0 100% 40% 50% / 0 50% 40% 100%; | |
| -webkit-transform-origin: 0% 0%; | |
| transform-origin: 0% 0%; | |
| -webkit-animation: tear-drop 2s ease-in infinite; | |
| animation: tear-drop 2s ease-in infinite; | |
| } | |
| .emoji--sad .emoji__mouth { | |
| width: 60px; | |
| height: 80px; | |
| left: calc(50% - 30px); | |
| top: 80px; | |
| box-sizing: border-box; | |
| border: 6px solid #000000; | |
| border-radius: 50%; | |
| border-bottom-color: transparent; | |
| border-left-color: transparent; | |
| border-right-color: transparent; | |
| background: transparent; | |
| -webkit-animation: sad-mouth 2s ease-in infinite; | |
| animation: sad-mouth 2s ease-in infinite; | |
| } | |
| .emoji--sad .emoji__mouth:after { | |
| width: 6px; | |
| height: 6px; | |
| background: transparent; | |
| border-radius: 50%; | |
| top: 4px; | |
| left: calc(50% - 3px); | |
| box-shadow: -18px 0 0 0 #000000, 18px 0 0 0 #000000; | |
| } | |
| .emoji--angry { | |
| background: linear-gradient(#D5234C -10%, #FFDA6A); | |
| background-size: 100%; | |
| -webkit-animation: angry-color 2s ease-in infinite; | |
| animation: angry-color 2s ease-in infinite; | |
| } | |
| .emoji--angry .emoji__face { | |
| -webkit-animation: angry-face 2s ease-in infinite; | |
| animation: angry-face 2s ease-in infinite; | |
| } | |
| .emoji--angry .emoji__eyebrows { | |
| left: calc(50% - 3px); | |
| top: 55px; | |
| height: 6px; | |
| width: 6px; | |
| border-radius: 50%; | |
| background: transparent; | |
| box-shadow: -44px 5px 0 0 #000000, -7px 16px 0 0 #000000, 7px 16px 0 0 #000000, 44px 5px 0 0 #000000; | |
| } | |
| .emoji--angry .emoji__eyebrows:before, .emoji--angry .emoji__eyebrows:after { | |
| width: 50px; | |
| height: 20px; | |
| border: 6px solid #000000; | |
| box-sizing: border-box; | |
| border-radius: 50%; | |
| border-top-color: transparent; | |
| border-left-color: transparent; | |
| border-right-color: transparent; | |
| top: 0; | |
| left: calc(50% - 25px); | |
| } | |
| .emoji--angry .emoji__eyebrows:before { | |
| margin-left: -25px; | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| .emoji--angry .emoji__eyebrows:after { | |
| margin-left: 25px; | |
| -webkit-transform: rotate(-15deg); | |
| transform: rotate(-15deg); | |
| } | |
| .emoji--angry .emoji__eyes { | |
| width: 12px; | |
| height: 12px; | |
| left: calc(50% - 6px); | |
| top: 70px; | |
| border-radius: 50%; | |
| background: transparent; | |
| box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000; | |
| } | |
| .emoji--angry .emoji__mouth { | |
| width: 36px; | |
| height: 18px; | |
| left: calc(50% - 18px); | |
| bottom: 15px; | |
| background: #000000; | |
| border-radius: 50%; | |
| -webkit-animation: angry-mouth 2s ease-in infinite; | |
| animation: angry-mouth 2s ease-in infinite; | |
| } | |
| @-webkit-keyframes heart-beat { | |
| 25% { | |
| -webkit-transform: scale(1.1); | |
| transform: scale(1.1); | |
| } | |
| 75% { | |
| -webkit-transform: scale(0.6); | |
| transform: scale(0.6); | |
| } | |
| } | |
| @keyframes heart-beat { | |
| 25% { | |
| -webkit-transform: scale(1.1); | |
| transform: scale(1.1); | |
| } | |
| 75% { | |
| -webkit-transform: scale(0.6); | |
| transform: scale(0.6); | |
| } | |
| } | |
| @-webkit-keyframes haha-face { | |
| 10%, 30%, 50% { | |
| -webkit-transform: translateY(25px); | |
| transform: translateY(25px); | |
| } | |
| 20%, 40% { | |
| -webkit-transform: translateY(15px); | |
| transform: translateY(15px); | |
| } | |
| 60%, 80% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| 70%, 90% { | |
| -webkit-transform: translateY(-10px); | |
| transform: translateY(-10px); | |
| } | |
| } | |
| @keyframes haha-face { | |
| 10%, 30%, 50% { | |
| -webkit-transform: translateY(25px); | |
| transform: translateY(25px); | |
| } | |
| 20%, 40% { | |
| -webkit-transform: translateY(15px); | |
| transform: translateY(15px); | |
| } | |
| 60%, 80% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| 70%, 90% { | |
| -webkit-transform: translateY(-10px); | |
| transform: translateY(-10px); | |
| } | |
| } | |
| @-webkit-keyframes haha-mouth { | |
| 10%, 30%, 50% { | |
| -webkit-transform: scale(0.6); | |
| transform: scale(0.6); | |
| top: 45%; | |
| } | |
| 20%, 40% { | |
| -webkit-transform: scale(0.8); | |
| transform: scale(0.8); | |
| top: 45%; | |
| } | |
| 60%, 80% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| top: 50%; | |
| } | |
| 70% { | |
| -webkit-transform: scale(1.2); | |
| transform: scale(1.2); | |
| top: 50%; | |
| } | |
| 90% { | |
| -webkit-transform: scale(1.1); | |
| transform: scale(1.1); | |
| top: 50%; | |
| } | |
| } | |
| @keyframes haha-mouth { | |
| 10%, 30%, 50% { | |
| -webkit-transform: scale(0.6); | |
| transform: scale(0.6); | |
| top: 45%; | |
| } | |
| 20%, 40% { | |
| -webkit-transform: scale(0.8); | |
| transform: scale(0.8); | |
| top: 45%; | |
| } | |
| 60%, 80% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| top: 50%; | |
| } | |
| 70% { | |
| -webkit-transform: scale(1.2); | |
| transform: scale(1.2); | |
| top: 50%; | |
| } | |
| 90% { | |
| -webkit-transform: scale(1.1); | |
| transform: scale(1.1); | |
| top: 50%; | |
| } | |
| } | |
| @-webkit-keyframes yay { | |
| 25% { | |
| -webkit-transform: rotate(-15deg); | |
| transform: rotate(-15deg); | |
| } | |
| 75% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| } | |
| @keyframes yay { | |
| 25% { | |
| -webkit-transform: rotate(-15deg); | |
| transform: rotate(-15deg); | |
| } | |
| 75% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| } | |
| @-webkit-keyframes wow-face { | |
| 15%, 25% { | |
| -webkit-transform: rotate(20deg) translateX(-25px); | |
| transform: rotate(20deg) translateX(-25px); | |
| } | |
| 45%, 65% { | |
| -webkit-transform: rotate(-20deg) translateX(25px); | |
| transform: rotate(-20deg) translateX(25px); | |
| } | |
| 75%, 100% { | |
| -webkit-transform: rotate(0deg) translateX(0); | |
| transform: rotate(0deg) translateX(0); | |
| } | |
| } | |
| @keyframes wow-face { | |
| 15%, 25% { | |
| -webkit-transform: rotate(20deg) translateX(-25px); | |
| transform: rotate(20deg) translateX(-25px); | |
| } | |
| 45%, 65% { | |
| -webkit-transform: rotate(-20deg) translateX(25px); | |
| transform: rotate(-20deg) translateX(25px); | |
| } | |
| 75%, 100% { | |
| -webkit-transform: rotate(0deg) translateX(0); | |
| transform: rotate(0deg) translateX(0); | |
| } | |
| } | |
| @-webkit-keyframes wow-brow { | |
| 15%, 65% { | |
| top: 25px; | |
| } | |
| 75%, 100%, 0% { | |
| top: 15px; | |
| } | |
| } | |
| @keyframes wow-brow { | |
| 15%, 65% { | |
| top: 25px; | |
| } | |
| 75%, 100%, 0% { | |
| top: 15px; | |
| } | |
| } | |
| @-webkit-keyframes wow-mouth { | |
| 10%, 30% { | |
| width: 20px; | |
| height: 20px; | |
| left: calc(50% - 10px); | |
| } | |
| 50%, 70% { | |
| width: 30px; | |
| height: 40px; | |
| left: calc(50% - 15px); | |
| } | |
| 75%, 100% { | |
| height: 50px; | |
| } | |
| } | |
| @keyframes wow-mouth { | |
| 10%, 30% { | |
| width: 20px; | |
| height: 20px; | |
| left: calc(50% - 10px); | |
| } | |
| 50%, 70% { | |
| width: 30px; | |
| height: 40px; | |
| left: calc(50% - 15px); | |
| } | |
| 75%, 100% { | |
| height: 50px; | |
| } | |
| } | |
| @-webkit-keyframes sad-face { | |
| 25%, 35% { | |
| top: -15px; | |
| } | |
| 55%, 95% { | |
| top: 10px; | |
| } | |
| 100%, 0% { | |
| top: 0; | |
| } | |
| } | |
| @keyframes sad-face { | |
| 25%, 35% { | |
| top: -15px; | |
| } | |
| 55%, 95% { | |
| top: 10px; | |
| } | |
| 100%, 0% { | |
| top: 0; | |
| } | |
| } | |
| @-webkit-keyframes sad-mouth { | |
| 25%, 35% { | |
| -webkit-transform: scale(0.85); | |
| transform: scale(0.85); | |
| top: 70px; | |
| } | |
| 55%, 100%, 0% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| top: 80px; | |
| } | |
| } | |
| @keyframes sad-mouth { | |
| 25%, 35% { | |
| -webkit-transform: scale(0.85); | |
| transform: scale(0.85); | |
| top: 70px; | |
| } | |
| 55%, 100%, 0% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| top: 80px; | |
| } | |
| } | |
| @-webkit-keyframes tear-drop { | |
| 0%, 100% { | |
| display: block; | |
| left: 35px; | |
| top: 15px; | |
| -webkit-transform: rotate(45deg) scale(0); | |
| transform: rotate(45deg) scale(0); | |
| } | |
| 25% { | |
| display: block; | |
| left: 35px; | |
| -webkit-transform: rotate(45deg) scale(2); | |
| transform: rotate(45deg) scale(2); | |
| } | |
| 49.9% { | |
| display: block; | |
| left: 35px; | |
| top: 65px; | |
| -webkit-transform: rotate(45deg) scale(0); | |
| transform: rotate(45deg) scale(0); | |
| } | |
| 50% { | |
| display: block; | |
| left: -35px; | |
| top: 15px; | |
| -webkit-transform: rotate(45deg) scale(0); | |
| transform: rotate(45deg) scale(0); | |
| } | |
| 75% { | |
| display: block; | |
| left: -35px; | |
| -webkit-transform: rotate(45deg) scale(2); | |
| transform: rotate(45deg) scale(2); | |
| } | |
| 99.9% { | |
| display: block; | |
| left: -35px; | |
| top: 65px; | |
| -webkit-transform: rotate(45deg) scale(0); | |
| transform: rotate(45deg) scale(0); | |
| } | |
| } | |
| @keyframes tear-drop { | |
| 0%, 100% { | |
| display: block; | |
| left: 35px; | |
| top: 15px; | |
| -webkit-transform: rotate(45deg) scale(0); | |
| transform: rotate(45deg) scale(0); | |
| } | |
| 25% { | |
| display: block; | |
| left: 35px; | |
| -webkit-transform: rotate(45deg) scale(2); | |
| transform: rotate(45deg) scale(2); | |
| } | |
| 49.9% { | |
| display: block; | |
| left: 35px; | |
| top: 65px; | |
| -webkit-transform: rotate(45deg) scale(0); | |
| transform: rotate(45deg) scale(0); | |
| } | |
| 50% { | |
| display: block; | |
| left: -35px; | |
| top: 15px; | |
| -webkit-transform: rotate(45deg) scale(0); | |
| transform: rotate(45deg) scale(0); | |
| } | |
| 75% { | |
| display: block; | |
| left: -35px; | |
| -webkit-transform: rotate(45deg) scale(2); | |
| transform: rotate(45deg) scale(2); | |
| } | |
| 99.9% { | |
| display: block; | |
| left: -35px; | |
| top: 65px; | |
| -webkit-transform: rotate(45deg) scale(0); | |
| transform: rotate(45deg) scale(0); | |
| } | |
| } | |
| @-webkit-keyframes hands-up { | |
| 25% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(-15deg) translateY(-10px); | |
| transform: rotate(-15deg) translateY(-10px); | |
| } | |
| 75%, 100% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| } | |
| @keyframes hands-up { | |
| 25% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(-15deg) translateY(-10px); | |
| transform: rotate(-15deg) translateY(-10px); | |
| } | |
| 75%, 100% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| } | |
| @-webkit-keyframes thumbs-up { | |
| 25% { | |
| -webkit-transform: rotate(20deg); | |
| transform: rotate(20deg); | |
| } | |
| 50%, 100% { | |
| -webkit-transform: rotate(5deg); | |
| transform: rotate(5deg); | |
| } | |
| } | |
| @keyframes thumbs-up { | |
| 25% { | |
| -webkit-transform: rotate(20deg); | |
| transform: rotate(20deg); | |
| } | |
| 50%, 100% { | |
| -webkit-transform: rotate(5deg); | |
| transform: rotate(5deg); | |
| } | |
| } | |
| @-webkit-keyframes angry-color { | |
| 45%, 60% { | |
| background-size: 250%; | |
| } | |
| 85%, 100%, 0% { | |
| background-size: 100%; | |
| } | |
| } | |
| @keyframes angry-color { | |
| 45%, 60% { | |
| background-size: 250%; | |
| } | |
| 85%, 100%, 0% { | |
| background-size: 100%; | |
| } | |
| } | |
| @-webkit-keyframes angry-face { | |
| 35%, 60% { | |
| -webkit-transform: translateX(0) translateY(10px) scale(0.9); | |
| transform: translateX(0) translateY(10px) scale(0.9); | |
| } | |
| 40%, 50% { | |
| -webkit-transform: translateX(-5px) translateY(10px) scale(0.9); | |
| transform: translateX(-5px) translateY(10px) scale(0.9); | |
| } | |
| 45%, 55% { | |
| -webkit-transform: translateX(5px) translateY(10px) scale(0.9); | |
| transform: translateX(5px) translateY(10px) scale(0.9); | |
| } | |
| } | |
| @keyframes angry-face { | |
| 35%, 60% { | |
| -webkit-transform: translateX(0) translateY(10px) scale(0.9); | |
| transform: translateX(0) translateY(10px) scale(0.9); | |
| } | |
| 40%, 50% { | |
| -webkit-transform: translateX(-5px) translateY(10px) scale(0.9); | |
| transform: translateX(-5px) translateY(10px) scale(0.9); | |
| } | |
| 45%, 55% { | |
| -webkit-transform: translateX(5px) translateY(10px) scale(0.9); | |
| transform: translateX(5px) translateY(10px) scale(0.9); | |
| } | |
| } | |
| @-webkit-keyframes angry-mouth { | |
| 25%, 50% { | |
| height: 6px; | |
| bottom: 25px; | |
| } | |
| } | |
| @keyframes angry-mouth { | |
| 25%, 50% { | |
| height: 6px; | |
| bottom: 25px; | |
| } | |
| } | |
| /* DON'T CONVERT TO RTL */ | |
| /* -- */ | |
| /* PAGE = [BASIC] */ | |
| /* ------------------------------- */ | |
| /* page-header */ | |
| .page-header { | |
| background: #667db6; | |
| background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6); | |
| position: relative; | |
| text-align: center; | |
| padding: 70px 15px; | |
| overflow: hidden; | |
| color: #fff; | |
| z-index: auto; | |
| } | |
| .page-header.mini { | |
| padding: 35px 15px; | |
| } | |
| @media (min-width: 768px) { | |
| .page-header { | |
| padding: 90px 15px; | |
| } | |
| .page-header.mini { | |
| padding: 45px 15px; | |
| } | |
| } | |
| .page-header.bank-transfer { | |
| z-index: 1; | |
| padding: 20px; | |
| background-color: #2196f3; | |
| background: linear-gradient(90deg, #03A9F4 0%, #2196f3 35%, #3F51B5 100%); | |
| } | |
| .page-header .floating-img { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10%; | |
| width: 300px; | |
| opacity: 0.5; | |
| /*z-index: -997;*/ | |
| } | |
| .page-header .circle-1 { | |
| position: absolute; | |
| top: 60px; | |
| left: -180px; | |
| width: 290px; | |
| height: 290px; | |
| background-image: radial-gradient(circle 800px at 75% -25%,#000000 0,rgba(255, 255, 255, 0) 100%); | |
| border-radius: 50%; | |
| opacity: .05; | |
| } | |
| .page-header .circle-2 { | |
| position: absolute; | |
| top: 17px; | |
| right: -242px; | |
| width: 500px; | |
| height: 500px; | |
| background-image: radial-gradient(circle 800px at 10% -25%,#000000 0,rgba(255, 255, 255, 0) 100%); | |
| border-radius: 50%; | |
| opacity: .03; | |
| } | |
| .page-header .circle-3 { | |
| position: absolute; | |
| top: -73px; | |
| right: 78px; | |
| width: 200px; | |
| height: 200px; | |
| background-image: radial-gradient(circle 800px at 10% -25%,#000000 0,rgba(255, 255, 255, 0) 100%); | |
| border-radius: 50%; | |
| opacity: .04; | |
| } | |
| .page-header h2 { | |
| font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| font-weight: normal; | |
| } | |
| .page-header .inner { | |
| z-index: 999; | |
| } | |
| .page-header.bank-transfer .inner { | |
| border: 6px solid rgba(255, 255, 255, 0.3); | |
| padding: 20px; | |
| border-radius: 5px; | |
| } | |
| .page-header.bank-transfer .bank-info-meta { | |
| font-size: 18px; | |
| } | |
| .page-header.bank-transfer .bank-info-help { | |
| font-size: 12px; | |
| color: #eee; | |
| text-transform: uppercase; | |
| } | |
| /* -- */ | |
| /* footer */ | |
| .footer { | |
| border-top: 1px solid #e6ecf5; | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| margin-top: 25px; | |
| margin-bottom: 25px; | |
| } | |
| .night-mode .footer { | |
| border-top: 1px solid #212121; | |
| } | |
| @media (min-width: 768px) { | |
| .footer .links { | |
| text-align: right; | |
| } | |
| } | |
| /* -- */ | |
| /* mini-footer */ | |
| .mini-footer { | |
| font-size: 12px; | |
| } | |
| .mini-footer .copyrights { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding-bottom: 5px; | |
| margin-bottom: 5px; | |
| color: #858585; | |
| font-weight: 500; | |
| border-bottom: 1px solid #e9e9e9; | |
| } | |
| .night-mode .mini-footer .copyrights { | |
| border-bottom-color: #212121; | |
| } | |
| .mini-footer .links { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| margin: 0 -5px 0; | |
| } | |
| .mini-footer .links li { | |
| display: inline-block; | |
| padding-right: 5px; | |
| padding-left: 5px; | |
| } | |
| /* -- */ | |
| /* PAGE = [404] */ | |
| /* ------------------------------- */ | |
| .notfound-wrapper { | |
| position: relative; | |
| min-height: 560px; | |
| } | |
| .notfound { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| -ms-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| max-width: 560px; | |
| width: 100%; | |
| padding-left: 160px; | |
| line-height: 1.1; | |
| } | |
| .notfound .notfound-circle { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 140px; | |
| height: 140px; | |
| font-size: 140px; | |
| } | |
| .notfound .notfound-circle:before { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| -webkit-transform: scale(2.4); | |
| -ms-transform: scale(2.4); | |
| transform: scale(2.4); | |
| border-radius: 50%; | |
| background-color: #f2f5f8; | |
| z-index: -1; | |
| } | |
| body.night-mode .notfound .notfound-circle:before { | |
| background-color: #212121; | |
| } | |
| @media only screen and (max-width: 767px) { | |
| .notfound { | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| padding-top: 110px; | |
| } | |
| .notfound .notfound-circle { | |
| width: 110px; | |
| height: 110px; | |
| font-size: 110px; | |
| } | |
| } | |
| .notfound h1 { | |
| font-family: 'Nunito', sans-serif; | |
| font-size: 65px; | |
| font-weight: 700; | |
| margin-top: 0px; | |
| margin-bottom: 10px; | |
| color: #151723; | |
| text-transform: uppercase; | |
| } | |
| .notfound h2 { | |
| font-family: 'Nunito', sans-serif; | |
| font-size: 21px; | |
| font-weight: 400; | |
| margin: 0; | |
| text-transform: uppercase; | |
| color: #151723; | |
| } | |
| body.night-mode .notfound h1, | |
| body.night-mode .notfound h2 { | |
| color: #fff; | |
| } | |
| /* -- */ | |
| /* PAGE = [OAUTH] */ | |
| /* ------------------------------- */ | |
| /* ouath-card */ | |
| .card-ouath-overlay { | |
| background: #000; | |
| position: fixed; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| opacity: .6; | |
| transition: opacity .5s; | |
| z-index: 1002; | |
| } | |
| .card-ouath { | |
| background: #fff; | |
| border: 0; | |
| box-shadow: 0 1px 1px rgba(0,0,0,.05); | |
| z-index: 1003; | |
| } | |
| /* -- */ | |
| /* PAGE = [INDEX] */ | |
| /* ------------------------------- */ | |
| /* index-body */ | |
| body.index-body { | |
| background-image: url('../images/home/dots.png'); | |
| background-size: contain; | |
| background-color: #f9f9f9; | |
| } | |
| body.night-mode.index-body { | |
| background-image: url('../images/home/dots-night.png'); | |
| background-color: var(--body-bg-color-dark); | |
| } | |
| /* -- */ | |
| /* card-register */ | |
| .card-register { | |
| background: #fff; | |
| border: 0; | |
| box-shadow: 0 1px 20px 0 rgba(0,0,0,.1); | |
| overflow: hidden; | |
| } | |
| .card-register .card-header { | |
| border: 0; | |
| padding: 0 0 15px; | |
| background: transparent; | |
| } | |
| .card-register .card-header img { | |
| position: absolute; | |
| left: 0; | |
| top: -135px; | |
| margin-left: -50px; | |
| margin-top: -150px; | |
| border-radius: 20%; | |
| width: 350px; | |
| } | |
| .card-register .card-header .card-title { | |
| position: relative; | |
| font-size: 4em; | |
| font-weight: 900; | |
| color: #eee; | |
| text-transform: lowercase; | |
| margin-left: -5px; | |
| } | |
| body.night-mode .card-register .card-header .card-title { | |
| color: #222a42; | |
| } | |
| .card-register .form-control { | |
| border-radius: 18px; | |
| background: #f7f7f7; | |
| } | |
| .card-register .input-group>.input-group-prepend>.input-group-text { | |
| background: #f7f7f7; | |
| border-radius: 18px 0 0 18px; | |
| } | |
| body.night-mode .card-register .form-control { | |
| background: #232323; | |
| border-color: #363636; | |
| } | |
| body.night-mode .card-register .input-group>.input-group-prepend>.input-group-text { | |
| background: #232323; | |
| border-color: #363636; | |
| color: #dfdfdf; | |
| } | |
| /* -- */ | |
| /* index-intro */ | |
| .index-intro { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .index-intro h1 { | |
| font-size: 34px; | |
| font-weight: 100; | |
| color: #4d4d4d; | |
| } | |
| @media (min-width: 768px) { | |
| .index-intro h1 { | |
| font-size: 48px; | |
| } | |
| } | |
| body.night-mode .index-intro h1 { | |
| color: #fff; | |
| } | |
| .index-intro p { | |
| font-weight: 100; | |
| font-size: 18px; | |
| line-height: 24px; | |
| color: #6a6a6a; | |
| } | |
| body.night-mode .index-intro p { | |
| color: #ccc; | |
| } | |
| /* -- */ | |
| /* daytime_message */ | |
| .daytime_message { | |
| display: none; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| border-left: 2px solid #fba540!important; | |
| } | |
| .daytime_message button { | |
| margin-top: 4px; | |
| font-size: 18px; | |
| } | |
| /* -- */ | |
| /* PAGE = [FORUMS] */ | |
| /* ------------------------------- */ | |
| /* forum-breadcrumb */ | |
| .forum-breadcrumb { | |
| padding: 16px 20px; | |
| margin-top: 20px; | |
| margin-bottom: 0; | |
| word-wrap: break-word; | |
| word-break: break-all; | |
| } | |
| /* -- */ | |
| /* forum-title */ | |
| .forum-title { | |
| margin-top: 20px; | |
| margin-bottom: 20px; | |
| word-wrap: break-word; | |
| } | |
| .forum-title h1 { | |
| font-size: 18px; | |
| margin-top: 0; | |
| margin-bottom: 5px; | |
| } | |
| .forum-title p { | |
| margin-bottom: 0; | |
| } | |
| /* -- */ | |
| /* forum-category */ | |
| .forum-category { | |
| padding: 15px 20px; | |
| margin-top: 20px; | |
| background-color: var(--header-bg-color); | |
| color: #fff; | |
| font-weight: 600; | |
| font-size: 13px; | |
| border-radius: 2px 2px 0 0; | |
| } | |
| .forum-category a { | |
| color: #fff | |
| } | |
| .forum-category a:hover { | |
| text-decoration: underline; | |
| } | |
| /* -- */ | |
| /* forum-head */ | |
| .forum-head { | |
| margin-right: 0; | |
| margin-left: 0; | |
| } | |
| .forum-head > .column { | |
| padding: 20px; | |
| background-color: #16232d; | |
| color: #fff; | |
| font-weight: 300; | |
| font-size: 12px; | |
| text-align: center; | |
| border-right: 1px solid #192534; | |
| border-left: 1px solid #161e27; | |
| } | |
| body.night-mode .forum-head > .column { | |
| background: #000; | |
| border-right-color: #151515; | |
| border-left-color: #121212; | |
| } | |
| .forum-head.threads > .column { | |
| background-color: #576c7c; | |
| border-right: 1px solid #374855; | |
| border-left: 1px solid #6d8292; | |
| } | |
| body.night-mode .forum-head.threads > .column { | |
| background: #121212; | |
| } | |
| .forum-head > .column:first-child { | |
| text-align: left; | |
| border-left: none; | |
| } | |
| .forum-head > .column:last-child { | |
| border-right: none; | |
| } | |
| /* -- */ | |
| /* forum-row */ | |
| .forum-row { | |
| display: flex; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| flex-wrap: wrap; | |
| margin-right: 0; | |
| margin-left: 0; | |
| } | |
| .forum-row > .column { | |
| display: flex; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| flex-direction: column; | |
| padding: 20px; | |
| background-color: #ffffff; | |
| border-bottom: 1px solid #e6e6e6; | |
| color: #808080; | |
| font-size: 12px; | |
| word-wrap: break-word; | |
| } | |
| body.night-mode .forum-row > .column { | |
| background: #212121; | |
| border-color: #323232; | |
| } | |
| .forum-row > .column.icon { | |
| color: #999999; | |
| text-align: center; | |
| } | |
| .forum-row .sub-forums li { | |
| float: left; | |
| margin-right: 10px; | |
| } | |
| /* -- */ | |
| /* forum-meta */ | |
| .forum-meta-head { | |
| padding: 15px 20px 15px 20px; | |
| background-color: #16232d; | |
| color: #fff; | |
| font-size: 12px; | |
| font-weight: 300; | |
| } | |
| body.night-mode .forum-meta-head { | |
| background: #000; | |
| } | |
| .forum-meta-conent { | |
| padding: 15px 20px 15px 20px; | |
| background-color: #fff; | |
| color: #808080; | |
| font-size: 12px; | |
| } | |
| body.night-mode .forum-meta-conent { | |
| background-color: #212121; | |
| } | |
| /* -- */ | |
| /* forum-thread */ | |
| .forum-thread { | |
| padding: 20px 10px; | |
| margin-top: 10px; | |
| background: #fff; | |
| border: 1px solid #ddd; | |
| border-radius: 3px; | |
| box-shadow: 0 1px 1px rgba(0,0,0,.05); | |
| } | |
| body.night-mode .forum-thread { | |
| background: #212121; | |
| border-color: #323232; | |
| } | |
| .forum-thread .row { | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| .forum-thread .avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| } | |
| .forum-thread .time { | |
| padding-bottom: 5px; | |
| margin-bottom: 10px; | |
| border-bottom: 1px solid #f4f4f4; | |
| } | |
| body.night-mode .forum-thread .time { | |
| border-color: #323232; | |
| } | |
| .forum-thread .text { | |
| word-wrap: break-word; | |
| } | |
| .forum-thread .text img, | |
| .forum-thread .text iframe { | |
| max-width: 100%; | |
| } | |
| .forum-thread ul { | |
| margin: initial; | |
| padding-inline-start: 40px; | |
| list-style: initial; | |
| } | |
| /* -- */ | |
| /* forum-result */ | |
| .forum-result { | |
| margin-top: 20px; | |
| } | |
| .forum-result .head { | |
| padding: 10px 20px; | |
| background-color: #576c7c; | |
| color: #fff; | |
| font-weight: 300; | |
| font-size: 12px; | |
| } | |
| body.night-mode .forum-result .head { | |
| background-color: #000; | |
| } | |
| .forum-result .head a { | |
| color: #fff | |
| } | |
| .forum-result .head a:hover { | |
| text-decoration: underline; | |
| } | |
| .forum-result .content { | |
| padding: 10px 20px; | |
| background-color: #f5f5f5; | |
| color: #808080; | |
| font-size: 12px; | |
| } | |
| body.night-mode .forum-result .content { | |
| background-color: #212121; | |
| } | |
| .forum-result .title { | |
| font-size: 14px; | |
| } | |
| .forum-result .snippet { | |
| background: #fff; | |
| border: solid 1px #e6e6e6; | |
| padding: 8px 10px; | |
| word-wrap: break-word; | |
| } | |
| body.night-mode .forum-result .snippet { | |
| background: #121212; | |
| border-color: #323232; | |
| } | |
| /* -- */ | |
| /* PAGE = [DIRECTORY] */ | |
| /* ------------------------------- */ | |
| .directory-card { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| background: #f6f7f9; | |
| padding: 25px; | |
| font-size: 14px; | |
| line-height: 20px; | |
| text-align: center; | |
| color: #898f9c; | |
| border-radius: 4px; | |
| } | |
| body.night-mode .directory-card { | |
| background: #292929; | |
| } | |
| .directory-card:hover { | |
| background: #eee; | |
| color: #898f9c; | |
| } | |
| body.night-mode .directory-card:hover { | |
| background: #333333; | |
| } | |
| .directory-card .title { | |
| margin-top: 15px; | |
| color: #4b4f56; | |
| } | |
| body.night-mode .directory-card .title { | |
| color: #9a9fbf; | |
| } | |
| .directory-card p { | |
| margin-bottom: 0; | |
| } | |
| /* -- */ | |
| /* PAGE = [MESSAGES] */ | |
| /* ------------------------------- */ | |
| /* panel-messages */ | |
| .panel-messages .card-header .fa-circle { | |
| color: #65a830; | |
| font-size: 9px; | |
| } | |
| .panel-messages .card-body { | |
| padding: 0; | |
| } | |
| .panel-messages.fresh .card-body { | |
| position: relative; | |
| } | |
| .panel-messages .conversation-user { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .panel-messages .conversation-user img { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .panel-messages .conversation-body { | |
| max-width: -moz-calc(100% - 120px); /* 120px = (50px+10px)*2 (avatars + margins) */ | |
| max-width: -webkit-calc(100% - 120px); | |
| max-width: -o-calc(100% - 120px); | |
| max-width: calc(100% - 120px); | |
| } | |
| .panel-messages .conversation-body .text { | |
| background: #e9eaee; | |
| } | |
| /* -- */ | |
| /* PAGE = [LIVE] */ | |
| /* ------------------------------- */ | |
| .live-stream-wrapper { | |
| background: #323232; | |
| padding: 20px; | |
| border-radius: 4px; | |
| } | |
| @media (min-width: 992px) { | |
| .live-stream-wrapper { | |
| padding: 50px; | |
| } | |
| } | |
| .live-stream-title { | |
| color: #fff; | |
| font-size: 34px; | |
| line-height: 50px; | |
| margin-bottom: 10px; | |
| } | |
| .live-stream-video { | |
| position: relative; | |
| height: 500px; | |
| } | |
| .live-stream-video .live-counter { | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| z-index: 2; | |
| } | |
| .live-stream-video .live-counter .status { | |
| background: #dc3545; | |
| padding: 5px 15px; | |
| color: #fff; | |
| text-transform: uppercase; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| } | |
| .live-stream-video .live-counter .status.offline { | |
| background: #383838; | |
| } | |
| .live-stream-video .live-counter .number { | |
| background: #383838; | |
| padding: 5px 10px; | |
| margin-left: 4px; | |
| color: #fff; | |
| text-transform: uppercase; | |
| border-radius: 4px; | |
| } | |
| .live-stream-video .live-status { | |
| position: absolute; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 10px 25px; | |
| background: #383838; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 4px; | |
| z-index: 4; | |
| } | |
| .live-stream-video .live-status.info { | |
| background: #17a2b8; | |
| } | |
| .live-stream-video .live-status.success { | |
| background: #28a745; | |
| } | |
| .live-stream-video .live-status.error { | |
| background: #dc3545; | |
| } | |
| .live-stream-video .live-recording { | |
| display: none; | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| color: #ff0000; | |
| font-weight: 600; | |
| background: #383838; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| } | |
| .live-stream-video .live-comments { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| padding: 20px; | |
| height: 200px; | |
| z-index: 3; | |
| background-image: linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%); | |
| } | |
| .live-stream-video video { | |
| border-radius: 4px; | |
| background: #000; | |
| } | |
| .live-stream-buttons { | |
| display: none; | |
| text-align: center; | |
| margin-top: 20px; | |
| } | |
| /* -- */ | |
| /* PAGE = [PROFILE] */ | |
| /* ------------------------------- */ | |
| /* profile-header */ | |
| .profile-header { | |
| position: relative; | |
| margin-bottom: 20px; | |
| border: 1px solid #e6ecf5; | |
| border-top: 0; | |
| } | |
| body.night-mode .profile-header { | |
| border-color: #424242; | |
| } | |
| @media (min-width: 992px) { | |
| .profile-header { | |
| margin-bottom: 40px; | |
| } | |
| } | |
| /* -- */ | |
| /* profile-cover-wrapper */ | |
| .profile-cover-wrapper { | |
| background: #424242; | |
| position: relative; | |
| height: 180px; | |
| overflow: hidden; | |
| border-radius: 0 0 2px 2px; | |
| } | |
| @media (min-width: 576px) { | |
| .profile-cover-wrapper { | |
| height: 240px; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .profile-cover-wrapper { | |
| height: 300px; | |
| } | |
| } | |
| @media (min-width: 992px) { | |
| .profile-cover-wrapper { | |
| height: 360px; | |
| } | |
| } | |
| /* -- */ | |
| /* profile-cover-wrapper -> img */ | |
| .profile-cover-wrapper img.js_position-cover-cropped { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .profile-cover-wrapper img.js_lightbox:hover { | |
| cursor: pointer; | |
| } | |
| .profile-cover-wrapper img.js_position-cover-full { | |
| width: 100%; | |
| height: auto; | |
| cursor: move; | |
| } | |
| /* -- */ | |
| /* profile-cover-wrapper -> buttons */ | |
| .profile-cover-buttons { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| color: #fff; | |
| font-size: 12px; | |
| opacity: 0.4; | |
| transition: all .5s; | |
| } | |
| @media (min-width: 768px) { | |
| .profile-cover-buttons { | |
| top: 15px; | |
| left: 15px; | |
| font-size: 16px; | |
| } | |
| } | |
| .profile-cover-buttons > div { | |
| float: left; | |
| margin-right: 5px; | |
| padding: 4px 8px; | |
| border-radius: 50%; | |
| text-align: center; | |
| background: rgba(0, 0, 0, 0.10); | |
| transition: all .5s; | |
| } | |
| .profile-cover-buttons > div:hover { | |
| cursor: pointer; | |
| background: rgba(0, 0, 0, 0.25); | |
| } | |
| .profile-cover-wrapper:hover .profile-cover-buttons { | |
| opacity: 1; | |
| } | |
| .profile-cover-buttons form.x-uploader { | |
| position: relative; | |
| } | |
| .profile-cover-buttons > div.profile-cover-position-buttons { | |
| display: none; | |
| padding: 4px 6px; | |
| } | |
| /* -- */ | |
| /* profile-cover-wrapper -> loaders */ | |
| .profile-cover-change-loader { | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| opacity: 0.5; | |
| background: #000; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 20%; | |
| transition: all .5s; | |
| } | |
| @media (min-width: 768px) { | |
| .profile-cover-change-loader { | |
| padding-top: 15%; | |
| } | |
| } | |
| .profile-cover-position-loader { | |
| display: none; | |
| position: absolute; | |
| top: 15px; | |
| left: 50%; | |
| padding: 8px 10px; | |
| background: rgba(0,0,0,0.45); | |
| color: #fff; | |
| font-size: 11px; | |
| border-radius: 2px; | |
| transform: translate(-50%); | |
| } | |
| @media (min-width: 768px) { | |
| .profile-cover-position-loader { | |
| padding: 8px 24px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| } | |
| /* -- */ | |
| /* profile-avatar-wrapper */ | |
| .profile-avatar-wrapper { | |
| position: absolute; | |
| top: 112px; | |
| left: 50%; | |
| transform: translate(-50%); | |
| padding: 2px; | |
| background: #fff; | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); | |
| } | |
| @media (min-width: 576px) { | |
| .profile-avatar-wrapper { | |
| top: 140px; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .profile-avatar-wrapper { | |
| top: 170px; | |
| } | |
| } | |
| body.night-mode .profile-avatar-wrapper { | |
| background: #121212; | |
| } | |
| .profile-avatar-wrapper.static { | |
| top: 0; | |
| } | |
| @media (min-width: 992px) { | |
| .profile-avatar-wrapper { | |
| padding: 4px; | |
| } | |
| .profile-avatar-wrapper:not(.static) { | |
| top: auto; | |
| bottom: -25px; | |
| left: 55px; | |
| transform: none; | |
| } | |
| } | |
| /* profile-avatar-wrapper -> img */ | |
| .profile-avatar-wrapper img { | |
| width: 90px; | |
| height: 90px; | |
| border-radius: 50%; | |
| transition: all .5s; | |
| } | |
| .profile-avatar-wrapper img.js_lightbox:hover { | |
| cursor: pointer; | |
| } | |
| @media (min-width: 576px) { | |
| .profile-avatar-wrapper img { | |
| width: 120px; | |
| height: 120px; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .profile-avatar-wrapper img { | |
| width: 150px; | |
| height: 150px; | |
| } | |
| } | |
| @media (min-width: 992px) { | |
| .profile-avatar-wrapper img { | |
| width: 160px; | |
| height: 160px; | |
| } | |
| } | |
| /* -- */ | |
| /* profile-avatar-wrapper -> buttons */ | |
| .profile-avatar-change, | |
| .profile-avatar-crop, | |
| .profile-avatar-delete { | |
| display: block; | |
| position: absolute; | |
| bottom: 5px; | |
| right: 5px; | |
| opacity: 0.4; | |
| color: #fff; | |
| font-size: 12px; | |
| padding: 4px 8px; | |
| border-radius: 50%; | |
| text-align: center; | |
| background: rgba(0, 0, 0, 0.10); | |
| transition: all .5s; | |
| } | |
| .profile-avatar-change:hover, | |
| .profile-avatar-crop:hover, | |
| .profile-avatar-delete:hover { | |
| cursor: pointer; | |
| background: rgba(0, 0, 0, 0.25); | |
| } | |
| .profile-avatar-crop { | |
| bottom: 35px; | |
| right: -15px; | |
| } | |
| .profile-avatar-delete { | |
| bottom: 75px; | |
| right: 5px; | |
| } | |
| .profile-avatar-change form.x-uploader { | |
| position: relative; | |
| } | |
| @media (min-width: 576px) { | |
| .profile-avatar-delete { | |
| bottom: 75px; | |
| right: -15px; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .profile-avatar-change, | |
| .profile-avatar-crop, | |
| .profile-avatar-delete { | |
| bottom: 10px; | |
| right: 10px; | |
| font-size: 16px; | |
| } | |
| .profile-avatar-crop { | |
| bottom: 45px; | |
| right: -10px; | |
| } | |
| .profile-avatar-delete { | |
| bottom: 85px; | |
| right: -15px; | |
| } | |
| } | |
| .profile-avatar-wrapper:hover .profile-avatar-change, | |
| .profile-avatar-wrapper:hover .profile-avatar-delete, | |
| .profile-avatar-wrapper:hover .profile-avatar-crop { | |
| opacity: 1; | |
| } | |
| /* -- */ | |
| /* profile-avatar-wrapper -> loaders */ | |
| .profile-avatar-change-loader { | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| opacity: 0.5; | |
| background: #000; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| padding-top: 50%; | |
| transition: all .5s; | |
| } | |
| /* -- */ | |
| /* profile-name-wrapper */ | |
| .profile-name-wrapper { | |
| background: #fff; | |
| padding-top: 30px; | |
| padding-bottom: 10px; | |
| text-align: center; | |
| font-size: 1.2em; | |
| font-weight: 600; | |
| } | |
| body.night-mode .profile-name-wrapper { | |
| background: #212121; | |
| } | |
| @media (min-width: 992px) { | |
| .profile-name-wrapper { | |
| position: absolute; | |
| bottom: 50px; | |
| left: 285px; | |
| right: auto; | |
| background: transparent!important; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| text-align: left; | |
| font-size: 1.9em; | |
| text-shadow: 0 0 3px rgba(0, 0, 0, 0.9); | |
| } | |
| .no-avatar .profile-name-wrapper { | |
| left: 85px; | |
| bottom: 70px; | |
| } | |
| } | |
| .profile-name-wrapper a { | |
| color: #333; | |
| } | |
| body.night-mode .profile-name-wrapper a { | |
| color: #fff; | |
| } | |
| .profile-name-wrapper a.badge { | |
| color: #fff; | |
| } | |
| @media (min-width: 992px) { | |
| .profile-name-wrapper a { | |
| color: #fff; | |
| } | |
| .profile-name-wrapper a.badge { | |
| font-size: 14px; | |
| } | |
| } | |
| /* -- */ | |
| /* profle-date-wrapper */ | |
| .profle-date-wrapper { | |
| position: absolute; | |
| width: 45px; | |
| left: 10px; | |
| top: 120px; | |
| padding: 6px; | |
| border-radius: 6px; | |
| border: 2px solid white; | |
| background: rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| font-size: 12px; | |
| color: #fff; | |
| transition: all .5s; | |
| } | |
| @media (min-width: 576px) { | |
| .profle-date-wrapper { | |
| top: 180px; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .profle-date-wrapper { | |
| top: 240px; | |
| } | |
| } | |
| @media (min-width: 992px) { | |
| .profle-date-wrapper { | |
| width: 55px; | |
| left: 15px; | |
| top: auto; | |
| bottom: 50px; | |
| font-size: 14px; | |
| } | |
| } | |
| /* -- */ | |
| /* profle-meta-wrapper */ | |
| .profle-meta-wrapper { | |
| position: absolute; | |
| left: 65px; | |
| top: 140px; | |
| color: #e9e9e9; | |
| font-size: 12px; | |
| text-shadow: 0 0 3px rgba(0, 0, 0, 0.9); | |
| } | |
| @media (min-width: 576px) { | |
| .profle-meta-wrapper { | |
| top: 200px; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .profle-meta-wrapper { | |
| top: 260px; | |
| } | |
| } | |
| @media (min-width: 992px) { | |
| .profle-meta-wrapper { | |
| left: 85px; | |
| top: auto; | |
| bottom: 50px; | |
| font-size: 14px; | |
| } | |
| } | |
| /* -- */ | |
| /* profile-buttons-wrapper */ | |
| .profile-buttons-wrapper { | |
| background: #fff; | |
| padding-bottom: 20px; | |
| text-align: center; | |
| } | |
| body.night-mode .profile-buttons-wrapper { | |
| background: #212121; | |
| } | |
| @media (min-width: 992px) { | |
| .profile-buttons-wrapper { | |
| background: transparent!important; | |
| position: absolute; | |
| bottom: 50px; | |
| right: 15px; | |
| padding-bottom: 0; | |
| text-align: left; | |
| } | |
| } | |
| @media (max-width: 992px) { | |
| .profile-buttons-wrapper .btn { | |
| box-shadow: none; | |
| } | |
| } | |
| /* -- */ | |
| /* profile-tabs-wrapper */ | |
| .profile-tabs-wrapper { | |
| padding: 0 5px; | |
| background: #fff; | |
| box-shadow: 0 1px 13px rgba(0, 0, 0, 0.08); | |
| border-top: 1px solid #e6ecf5; | |
| border-radius: 0 0 2px 2px; | |
| } | |
| body.night-mode .profile-tabs-wrapper { | |
| background: #212121; | |
| border-color: #323232; | |
| } | |
| @media (min-width: 992px) { | |
| .profile-tabs-wrapper { | |
| position: absolute; | |
| bottom: -25px; | |
| left: 285px; | |
| right: 15px; | |
| padding: 0; | |
| box-shadow: none; | |
| border-radius: 2px; | |
| } | |
| .no-avatar .profile-tabs-wrapper { | |
| left: 15px; | |
| } | |
| } | |
| .profile-tabs-wrapper > ul { | |
| overflow: hidden; | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| } | |
| .profile-tabs-wrapper > ul > li { | |
| display: inline-block; | |
| } | |
| .profile-tabs-wrapper > ul > li > a { | |
| display: block; | |
| padding: 18px 25px; | |
| line-height: 20px; | |
| font-weight: 600; | |
| color: #666; | |
| transition: all .2s ease; | |
| } | |
| .profile-tabs-wrapper.narrow > ul > li > a { | |
| padding: 18px 28px; | |
| } | |
| body.night-mode .profile-tabs-wrapper > ul > li > a { | |
| color: #eee; | |
| } | |
| .profile-tabs-wrapper > ul > li > a:hover, | |
| body.night-mode .profile-tabs-wrapper > ul > li > a:hover { | |
| color: var(--link-color); | |
| } | |
| .profile-tabs-wrapper > ul > li > a.active, | |
| body.night-mode .profile-tabs-wrapper > ul > li > a.active { | |
| color: var(--link-color); | |
| border-bottom: 2px solid var(--link-color); | |
| } | |
| /* -- */ | |
| /* panel-mutual-friends */ | |
| @media (max-width: 559px) { | |
| .panel-mutual-friends { | |
| display: none; | |
| } | |
| } | |
| .panel-mutual-friends li { | |
| float: left; | |
| width: 40px; | |
| height: 40px; | |
| margin-right: -8px; | |
| } | |
| /* -- */ | |
| /* panel [about] */ | |
| .about-bio { | |
| word-wrap: break-word; | |
| text-align: center; | |
| border-bottom: 1px solid #eee; | |
| margin-bottom: 10px; | |
| padding-bottom: 10px; | |
| } | |
| body.night-mode .about-bio { | |
| border-color: #424242; | |
| } | |
| .about-bio a { | |
| display: inline-block; | |
| margin-top: 10px; | |
| } | |
| .about-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .about-list li { | |
| position: relative; | |
| padding-bottom: 5px; | |
| margin-bottom: 8px; | |
| font-size: 12px; | |
| line-height: 18px; | |
| font-weight: 500; | |
| } | |
| .about-list li.package { | |
| background: #597ba5; | |
| color: #fff; | |
| padding: 10px 15px; | |
| margin-left: -20px; | |
| margin-right: -20px; | |
| margin-bottom: 15px; | |
| text-align: center; | |
| } | |
| .about-list li:last-child { | |
| border-bottom: 0 none; | |
| padding-bottom: 0; | |
| margin-bottom: 0; | |
| } | |
| .about-list-item { | |
| padding-left: 30px; | |
| word-break: break-word; | |
| } | |
| .about-list-item a:hover { | |
| text-decoration: underline; | |
| } | |
| .about-list-item .fa { | |
| position: absolute; | |
| top: 4px; | |
| left: 0; | |
| color: #a5a9b3; | |
| } | |
| .about-list-item .details { | |
| padding-top: 2px; | |
| color: #b2b2b2; | |
| font-size: 11px; | |
| line-height: 16px; | |
| font-weight: normal; | |
| } | |
| /* -- */ | |
| /* panel [photos] */ | |
| .panel-photos div[class^="col-"], .panel-photos div[class*=" col-"] { | |
| padding: 1px; | |
| padding-bottom: 0; | |
| } | |
| .pg_photo { | |
| position: relative; | |
| display: block; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-color: #eee; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 100%; | |
| min-width: 40px; | |
| min-height: 40px; | |
| border-radius: 1px; | |
| margin-bottom: 2px; | |
| } | |
| .pg_photo.large { | |
| min-width: 100px; | |
| min-height: 100px; | |
| } | |
| .pg_photo-btn { | |
| position: absolute; | |
| right: 5px; | |
| top: 5px; | |
| } | |
| /* -- */ | |
| /* panel [videos] */ | |
| .panel-videos div[class^="col-"], .panel-videos div[class*=" col-"] { | |
| padding: 1px; | |
| padding-bottom: 0; | |
| } | |
| .pg_video { | |
| position: relative; | |
| background: #eee; | |
| display: block; | |
| padding-bottom: 100%; | |
| overflow: hidden; | |
| } | |
| .pg_video video { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| object-fit: cover; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .pg_video .play-button { | |
| position: absolute; | |
| top: calc(50% - 25px); | |
| left: calc(50% - 25px); | |
| display: block; | |
| width: 50px; | |
| height: 50px; | |
| padding-top: 11px; | |
| padding-left: 6px; | |
| border-radius: 50%; | |
| color: #f5f5f5; | |
| text-align: center; | |
| background-color: rgba(0,0,0,0.5); | |
| transition: all 0.3s ease; | |
| } | |
| .pg_video:hover .play-button { | |
| background-color: rgba(0,0,0,0.8); | |
| box-shadow: 0px 0px 10px rgba(255,255,100,1); | |
| } | |
| /* -- */ | |
| /* album-card */ | |
| .album-card { | |
| border: 1px solid #ededed; | |
| border-radius: 1px; | |
| margin-bottom: 10px; | |
| } | |
| body.night-mode .album-card { | |
| border-color: #121212; | |
| } | |
| .album-cover { | |
| display: block; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-color: #eee; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 100%; | |
| overflow: hidden; | |
| min-width: 40px; | |
| min-height: 40px; | |
| } | |
| .album-details { | |
| padding: 10px; | |
| font-size: 11px; | |
| } | |
| .album-details .fa { | |
| cursor: pointer; | |
| } | |
| .album-details .tooltip { | |
| width: auto; | |
| min-width: 110px; | |
| font-size: 11px; | |
| } | |
| /* -- */ | |
| /* album */ | |
| .album-title { | |
| text-align: center; | |
| font-size: 1.5em; | |
| font-weight: 600; | |
| margin-top: 20px; | |
| } | |
| .album-meta { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| /* -- */ | |
| /* PAGE = [ADMIN] */ | |
| /* ------------------------------- */ | |
| /* admin-chart */ | |
| .admin-chart { | |
| min-width: 100%; | |
| height: 400px; | |
| margin: 0 auto; | |
| border: 1px solid #e6ecf5; | |
| } | |
| body.night-mode .admin-chart { | |
| border-color: #424242; | |
| } | |
| /* -- */ | |
| /* table-img-thumbnail */ | |
| .table-img-thumbnail { | |
| max-width: 100px; | |
| } | |
| /* -- */ | |
| /* change-log-list */ | |
| .change-log-list { | |
| margin-left: 30px; | |
| } | |
| .change-log-list > li { | |
| margin-left: 30px; | |
| list-style-type: disc; | |
| } | |
| /* -- */ | |
| /* PAGE = [MARKET] */ | |
| /* ------------------------------- */ | |
| .product { | |
| position: relative; | |
| border-radius: 4px; | |
| } | |
| .product:hover{ | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| .product.boosted { | |
| border: 2px solid #f9b340; | |
| } | |
| .product .boosted-icon { | |
| position: absolute; | |
| left: -15px; | |
| top: -15px; | |
| width: auto; | |
| padding: 3px 6px; | |
| font-size: 16px; | |
| background: #f9b340; | |
| color: #ffffff; | |
| border-radius: 50%; | |
| -ms-transform: rotate(-20deg); /* IE 9 */ | |
| -webkit-transform: rotate(-20deg); /* Safari */ | |
| transform: rotate(-20deg); /* Standard syntax */ | |
| z-index: 2; | |
| } | |
| .product-image { | |
| position: relative; | |
| width: 100%; | |
| height: 250px; | |
| overflow: hidden; | |
| border-radius: 4px 4px 0 0; | |
| } | |
| .product-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .product-price { | |
| position: absolute; | |
| left: 10px; | |
| bottom: 10px; | |
| background: rgba(0, 0, 0, 0.65); | |
| color: #fff; | |
| font-size: 16px; | |
| font-weight: bold; | |
| line-height: 1; | |
| padding: 6px 10px; | |
| border-radius: 6px; | |
| } | |
| .product-price.with-offer { | |
| font-size: 14px; | |
| font-weight: normal; | |
| } | |
| .product-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 100px; | |
| background: rgba(0, 0, 0, 0.5); | |
| color: #fff; | |
| text-align: center; | |
| opacity: 0; | |
| transition: all 300ms; | |
| } | |
| .product:hover .product-overlay { | |
| opacity: 1; | |
| } | |
| .product-info { | |
| padding: 10px; | |
| } | |
| .product-meta { | |
| overflow: hidden; | |
| word-break: break-all; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| margin-bottom: 10px; | |
| } | |
| .product-meta .title { | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| /* -- */ | |
| /* PAGE = [MOVIES] */ | |
| /* ------------------------------- */ | |
| .movie-card { | |
| margin-bottom: 20px; | |
| } | |
| .movie-card-top { | |
| position: relative; | |
| display: block; | |
| border: 5px solid #fff; | |
| border-radius: 4px; | |
| margin-bottom: 10px; | |
| } | |
| body.night-mode .movie-card-top { | |
| border-color: #212121; | |
| } | |
| .movie-picture { | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: top center; | |
| background-color: #fff; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 330px; | |
| } | |
| .movie-info { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 100%; | |
| padding-top: 70px; | |
| background: rgba(0, 0, 0, 0.5); | |
| color: #fff; | |
| text-align: center; | |
| opacity: 0; | |
| transition: all 300ms; | |
| transition-delay: 100ms; | |
| } | |
| .movie-info .meta { | |
| font-size: 20px; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| } | |
| .movie-card-top:hover .movie-info { | |
| opacity: 1; | |
| } | |
| .movie-card-bottom { | |
| margin: 0 auto; | |
| padding: 0 5px; | |
| text-align: left; | |
| } | |
| .movie-title { | |
| display: block; | |
| font-size: 14px; | |
| font-weight: 700; | |
| transition: color .15s ease-in-out; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| .movie-year { | |
| font-size: 14px; | |
| } | |
| /* -- */ | |
| /* NOTY NOTIFICATION */ | |
| /* ------------------------------- */ | |
| .noty_theme__mint.noty_type__info, | |
| .noty_theme__mint.noty_type__information { | |
| background-color: rgba(51, 103, 214, 0.8)!important; | |
| border-bottom: 1px solid #3367d6!important | |
| } | |
| .noty_bar { | |
| margin-bottom: 5px!important; | |
| } | |
| .noty_body { | |
| color: #fff!important; | |
| padding: 5px!important; | |
| } | |
| .noty_body .data-content, | |
| .noty_close_button { | |
| color: #fff!important; | |
| } | |
| /* -- */ | |
| /* TRANSLATOR */ | |
| /* ------------------------------- */ | |
| .translator-language { | |
| display: block; | |
| font-size: 15px; | |
| line-height: 100%; | |
| padding: 15px; | |
| margin-bottom: 5px; | |
| border: 1px solid #eee; | |
| border-radius: 1px; | |
| } | |
| .translator-language:hover { | |
| background: #f3f3f3; | |
| cursor: pointer; | |
| } | |
| /* -- */ | |
| /* BIG ICON */ | |
| /* ------------------------------- */ | |
| .big-icon { | |
| width: 80px; | |
| height: 80px; | |
| border: 4px solid rgba(128, 128, 128, 0.15); | |
| border-radius: 50%; | |
| margin: 20px auto; | |
| position: relative; | |
| } | |
| .big-icon.success { | |
| border-color: rgba(76, 174, 76, 0.15); | |
| } | |
| .big-icon.error { | |
| border-color: rgba(217, 83, 79, 0.15); | |
| } | |
| .big-icon.warning { | |
| border-color: rgba(255, 153, 0, 0.21); | |
| } | |
| .big-icon .fa { | |
| padding-top: 17px; | |
| padding-left: 3px; | |
| } | |
| .big-icon.success .fa { | |
| color: #4cae4c; | |
| } | |
| .big-icon.error .fa { | |
| color: #d9534f; | |
| } | |
| .big-icon.warning .fa { | |
| color: #d9954f; | |
| } | |
| /* -- */ | |
| /* LOADER */ | |
| /* ------------------------------- */ | |
| .x-loader { | |
| text-align: center; | |
| } | |
| .loader { | |
| width: 100%; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -moz-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -moz-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -moz-box-pack: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| padding: 5px 0; | |
| } | |
| .loader:after { | |
| display: block; | |
| position: relative; | |
| width: 20px; | |
| height: 20px; | |
| -webkit-animation: rotate 0.6s linear infinite; | |
| -moz-animation: rotate 0.6s linear infinite; | |
| -ms-animation: rotate 0.6s linear infinite; | |
| -o-animation: rotate 0.6s linear infinite; | |
| animation: rotate 0.6s linear infinite; | |
| -webkit-border-radius: 100%; | |
| -moz-border-radius: 100%; | |
| border-radius: 100%; | |
| border-top: 1px solid #545a6a; | |
| border-bottom: 1px solid #d4d4db; | |
| border-left: 1px solid #545a6a; | |
| border-right: 1px solid #d4d4db; | |
| content: ''; | |
| opacity: .5; | |
| } | |
| .loader.loader_large:after { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .loader.loader_medium:after { | |
| width: 25px; | |
| height: 25px; | |
| } | |
| .loader.loader_small:after { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| .loader.loader_green:after { | |
| opacity: 1; | |
| border-top: 1px solid #42a26e; | |
| border-bottom: 1px solid #fff; | |
| border-left: 1px solid #42a26e; | |
| border-right: 1px solid #fff; | |
| } | |
| @keyframes rotate { | |
| 0% { | |
| transform: rotateZ(-360deg); | |
| -webkit-transform: rotateZ(-360deg); | |
| -moz-transform: rotateZ(-360deg); | |
| -o-transform: rotateZ(-360deg); | |
| } | |
| 100% { | |
| transform: rotateZ(0deg); | |
| -webkit-transform: rotateZ(0deg); | |
| -moz-transform: rotateZ(0deg); | |
| -o-transform: rotateZ(0deg); | |
| } | |
| } | |
| @-webkit-keyframes rotate { | |
| 0% { | |
| transform: rotateZ(-360deg); | |
| -webkit-transform: rotateZ(-360deg); | |
| -moz-transform: rotateZ(-360deg); | |
| -o-transform: rotateZ(-360deg); | |
| } | |
| 100% { | |
| transform: rotateZ(0deg); | |
| -webkit-transform: rotateZ(0deg); | |
| -moz-transform: rotateZ(0deg); | |
| -o-transform: rotateZ(0deg); | |
| } | |
| } | |
| @-moz-keyframes rotate { | |
| 0% { | |
| transform: rotateZ(-360deg); | |
| -webkit-transform: rotateZ(-360deg); | |
| -moz-transform: rotateZ(-360deg); | |
| -o-transform: rotateZ(-360deg); | |
| } | |
| 100% { | |
| transform: rotateZ(0deg); | |
| -webkit-transform: rotateZ(0deg); | |
| -moz-transform: rotateZ(0deg); | |
| -o-transform: rotateZ(0deg); | |
| } | |
| } | |
| @-o-keyframes rotate { | |
| 0% { | |
| transform: rotateZ(-360deg); | |
| -webkit-transform: rotateZ(-360deg); | |
| -moz-transform: rotateZ(-360deg); | |
| -o-transform: rotateZ(-360deg); | |
| } | |
| 100% { | |
| transform: rotateZ(0deg); | |
| -webkit-transform: rotateZ(0deg); | |
| -moz-transform: rotateZ(0deg); | |
| -o-transform: rotateZ(0deg); | |
| } | |
| } | |
| /* -- */ | |
| /* POST LOADER */ | |
| /* ------------------------------- */ | |
| @keyframes anim { | |
| 0% { | |
| background-position: -468px 0; | |
| } | |
| 100% { | |
| background-position: 468px 0; | |
| } | |
| } | |
| @-o-keyframes anim { | |
| 0% { | |
| background-position: -468px 0; | |
| } | |
| 100% { | |
| background-position: 468px 0; | |
| } | |
| } | |
| @-ms-keyframes anim { | |
| 0% { | |
| background-position: -468px 0; | |
| } | |
| 100% { | |
| background-position: 468px 0; | |
| } | |
| } | |
| @-moz-keyframes anim { | |
| 0% { | |
| background-position: -468px 0; | |
| } | |
| 100% { | |
| background-position: 468px 0; | |
| } | |
| } | |
| @-webkit-keyframes anim { | |
| 0% { | |
| background-position: -468px 0; | |
| } | |
| 100% { | |
| background-position: 468px 0; | |
| } | |
| } | |
| .panel-effect { | |
| position: relative; | |
| background: #f6f7f8 no-repeat 800px 104px; | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjdmOCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZWRlZWYxIi8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNmNmY3ZjgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY3ZjgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); | |
| background-size: 100%; | |
| background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #f6f7f8), color-stop(20%, #edeef1), color-stop(40%, #f6f7f8), color-stop(100%, #f6f7f8)); | |
| background-image: -moz-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); | |
| background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); | |
| background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); | |
| height: 104px; | |
| -moz-animation: anim 1s forwards infinite linear; | |
| -webkit-animation: anim 1s forwards infinite linear; | |
| animation: anim 1s forwards infinite linear; | |
| } | |
| .fake-effect { | |
| position: absolute; | |
| background: #fff; | |
| right: 0; | |
| left: 0; | |
| height: 6px; | |
| } | |
| .fe-0 { | |
| height: 40px; | |
| left: 40px; | |
| width: 8px; | |
| } | |
| .fe-1 { | |
| height: 8px; | |
| left: 48px; | |
| top: 0; | |
| right: 0; | |
| } | |
| .fe-2 { | |
| left: 136px; | |
| top: 8px; | |
| } | |
| .fe-3 { | |
| height: 12px; | |
| left: 48px; | |
| top: 14px; | |
| } | |
| .fe-4 { | |
| left: 100px; | |
| top: 26px; | |
| } | |
| .fe-5 { | |
| height: 10px; | |
| left: 48px; | |
| top: 32px; | |
| } | |
| .fe-6 { | |
| height: 20px; | |
| top: 40px; | |
| } | |
| .fe-7 { | |
| left: 410px; | |
| top: 60px; | |
| } | |
| .fe-8 { | |
| height: 13px; | |
| top: 66px; | |
| } | |
| .fe-9 { | |
| left: 440px; | |
| top: 79px; | |
| } | |
| .fe-10 { | |
| height: 13px; | |
| top: 85px; | |
| } | |
| .fe-11 { | |
| left: 178px; | |
| top: 98px; | |
| } | |
| /* -- */ | |
| /* ON/OFF TOGGLE */ | |
| /* ------------------------------- */ | |
| .switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 60px; | |
| height: 34px; | |
| margin: 0; | |
| } | |
| .switch.sm { | |
| width: 30px; | |
| height: 17px; | |
| } | |
| .switch input { | |
| display:none; | |
| } | |
| .switch .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #ccc; | |
| transition: .4s; | |
| } | |
| body.night-mode .switch .slider { | |
| background-color: #666; | |
| } | |
| .switch .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 26px; | |
| width: 26px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| } | |
| .switch.sm .slider:before { | |
| height: 13px; | |
| width: 13px; | |
| left: 2px; | |
| bottom: 2px; | |
| } | |
| .switch input:checked + .slider { | |
| background-color: var(--link-color); | |
| } | |
| .switch input:focus + .slider { | |
| box-shadow: 0 0 1px #2196F3; | |
| } | |
| .switch input:checked + .slider:before { | |
| -webkit-transform: translateX(26px); | |
| -ms-transform: translateX(26px); | |
| transform: translateX(26px); | |
| } | |
| .switch.sm input:checked + .slider:before { | |
| -webkit-transform: translateX(13px); | |
| -ms-transform: translateX(13px); | |
| transform: translateX(13px); | |
| } | |
| .switch .slider.round { | |
| border-radius: 34px; | |
| } | |
| .switch .slider.round:before { | |
| border-radius: 50%; | |
| } | |
| /* -- */ | |
| /* CUSTOM RADIO/CHECKBOX TEMPLATES */ | |
| /* ------------------------------- */ | |
| .button-label { | |
| display: inline-block; | |
| padding: 1em 2em; | |
| margin: 0.5em; | |
| cursor: pointer; | |
| color: #6c6c6c; | |
| border-radius: 6px; | |
| transition: 0.3s; | |
| box-shadow: 0 0 0 1px #e6e6e6; | |
| min-width: 115px; | |
| } | |
| body.night-mode .button-label { | |
| box-shadow: 0 0 0 1px #424242; | |
| } | |
| .button-label-image { | |
| display: block; | |
| padding: 5px; | |
| margin: 0px; | |
| width: 100%; | |
| height: 100%; | |
| box-shadow: none; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| border-radius: 2px; | |
| } | |
| .button-label .icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: #f3f3f3; | |
| height: 60px; | |
| width: 60px; | |
| margin: 0 auto; | |
| border-radius: 50%; | |
| transition: all 0.2s; | |
| opacity: .75; | |
| filter: grayscale(1); | |
| } | |
| .button-label .icon img { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .button-label-image img { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 2px; | |
| } | |
| .button-label .title { | |
| font-weight: 500; | |
| font-size: 14px; | |
| margin-top: 15px; | |
| text-transform: capitalize; | |
| text-align: center; | |
| } | |
| .button-label:hover, | |
| .button-label-image:hover { | |
| box-shadow: 0px 0px 0px 2px rgba(51, 103, 214, 0.65); | |
| } | |
| .input-label:checked + .button-label, | |
| .input-label:checked + .button-label-image { | |
| box-shadow: 0px 0px 0px 2px rgba(51, 103, 214, 0.65); | |
| } | |
| .input-label:checked + .button-label .icon { | |
| filter: grayscale(0); | |
| opacity: 1; | |
| } | |
| /* -- */ | |
| /* SOCIAL BUTTONS */ | |
| /* ------------------------------- */ | |
| .btn-social,.btn-social-icon { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis | |
| } | |
| .btn-adn.active,.btn-adn:active,.btn-bitbucket.active,.btn-bitbucket:active,.btn-dropbox.active,.btn-dropbox:active,.btn-facebook.active,.btn-facebook:active,.btn-flickr.active,.btn-flickr:active,.btn-foursquare.active,.btn-foursquare:active,.btn-github.active,.btn-github:active,.btn-google.active,.btn-google:active,.btn-instagram.active,.btn-instagram:active,.btn-microsoft.active,.btn-microsoft:active,.btn-openid.active,.btn-openid:active,.btn-pinterest.active,.btn-pinterest:active,.btn-reddit.active,.btn-reddit:active,.btn-soundcloud.active,.btn-soundcloud:active,.btn-tumblr.active,.btn-tumblr:active,.btn-twitter.active,.btn-twitter:active,.btn-vimeo.active,.btn-vimeo:active,.btn-vk.active,.btn-vk:active,.btn-yahoo.active,.btn-yahoo:active,.open>.dropdown-toggle.btn-adn,.open>.dropdown-toggle.btn-bitbucket,.open>.dropdown-toggle.btn-dropbox,.open>.dropdown-toggle.btn-facebook,.open>.dropdown-toggle.btn-flickr,.open>.dropdown-toggle.btn-foursquare,.open>.dropdown-toggle.btn-github,.open>.dropdown-toggle.btn-google,.open>.dropdown-toggle.btn-instagram,.open>.dropdown-toggle.btn-microsoft,.open>.dropdown-toggle.btn-openid,.open>.dropdown-toggle.btn-pinterest,.open>.dropdown-toggle.btn-reddit,.open>.dropdown-toggle.btn-soundcloud,.open>.dropdown-toggle.btn-tumblr,.open>.dropdown-toggle.btn-twitter,.open>.dropdown-toggle.btn-vimeo,.open>.dropdown-toggle.btn-vk,.open>.dropdown-toggle.btn-yahoo { | |
| background-image: none | |
| } | |
| .btn-social { | |
| position: relative; | |
| padding-left: 44px; | |
| text-align: left | |
| } | |
| .btn-social>:first-child { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 32px; | |
| line-height: 34px; | |
| font-size: 1.6em; | |
| text-align: center; | |
| border-right: 1px solid rgba(0,0,0,.2) | |
| } | |
| .btn-social.btn-lg { | |
| padding-left: 61px | |
| } | |
| .btn-social.btn-lg>:first-child { | |
| line-height: 45px; | |
| width: 45px; | |
| font-size: 1.8em | |
| } | |
| .btn-social.btn-sm { | |
| padding-left: 38px | |
| } | |
| .btn-social.btn-sm>:first-child { | |
| line-height: 28px; | |
| width: 28px; | |
| font-size: 1.4em | |
| } | |
| .btn-social.btn-xs { | |
| padding-left: 30px | |
| } | |
| .btn-social.btn-xs>:first-child { | |
| line-height: 20px; | |
| width: 20px; | |
| font-size: 1.2em | |
| } | |
| .btn-social-icon { | |
| position: relative; | |
| text-align: left; | |
| height: 34px; | |
| width: 34px; | |
| padding: 0 | |
| } | |
| .btn-social-icon>:first-child { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| line-height: 34px; | |
| font-size: 1.6em | |
| } | |
| .btn-social-icon.btn-lg>:first-child { | |
| line-height: 45px; | |
| width: 45px; | |
| font-size: 1.8em | |
| } | |
| .btn-social-icon.btn-sm>:first-child { | |
| line-height: 28px; | |
| width: 28px; | |
| font-size: 1.4em | |
| } | |
| .btn-social-icon.btn-xs>:first-child { | |
| line-height: 20px; | |
| width: 20px; | |
| font-size: 1.2em | |
| } | |
| .btn-social-icon>:first-child { | |
| border: none; | |
| text-align: center; | |
| width: 100%!important | |
| } | |
| .btn-social-icon.btn-lg { | |
| height: 45px; | |
| width: 45px; | |
| padding-left: 0; | |
| padding-right: 0 | |
| } | |
| .btn-social-icon.btn-sm { | |
| height: 30px; | |
| width: 30px; | |
| padding-left: 0; | |
| padding-right: 0 | |
| } | |
| .btn-social-icon.btn-xs { | |
| height: 22px; | |
| width: 22px; | |
| padding-left: 0; | |
| padding-right: 0 | |
| } | |
| .btn-adn { | |
| color: #fff; | |
| background-color: #d87a68; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-adn.active,.btn-adn:active,.btn-adn:focus,.btn-adn:hover,.open>.dropdown-toggle.btn-adn { | |
| color: #fff; | |
| background-color: #ce563f; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-adn.disabled,.btn-adn.disabled.active,.btn-adn.disabled:active,.btn-adn.disabled:focus,.btn-adn.disabled:hover,.btn-adn[disabled],.btn-adn[disabled].active,.btn-adn[disabled]:active,.btn-adn[disabled]:focus,.btn-adn[disabled]:hover,fieldset[disabled] .btn-adn,fieldset[disabled] .btn-adn.active,fieldset[disabled] .btn-adn:active,fieldset[disabled] .btn-adn:focus,fieldset[disabled] .btn-adn:hover { | |
| background-color: #d87a68; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-adn .badge { | |
| color: #d87a68; | |
| background-color: #fff | |
| } | |
| .btn-bitbucket { | |
| color: #fff; | |
| background-color: #205081; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-bitbucket.active,.btn-bitbucket:active,.btn-bitbucket:focus,.btn-bitbucket:hover,.open>.dropdown-toggle.btn-bitbucket { | |
| color: #fff; | |
| background-color: #163758; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-bitbucket.disabled,.btn-bitbucket.disabled.active,.btn-bitbucket.disabled:active,.btn-bitbucket.disabled:focus,.btn-bitbucket.disabled:hover,.btn-bitbucket[disabled],.btn-bitbucket[disabled].active,.btn-bitbucket[disabled]:active,.btn-bitbucket[disabled]:focus,.btn-bitbucket[disabled]:hover,fieldset[disabled] .btn-bitbucket,fieldset[disabled] .btn-bitbucket.active,fieldset[disabled] .btn-bitbucket:active,fieldset[disabled] .btn-bitbucket:focus,fieldset[disabled] .btn-bitbucket:hover { | |
| background-color: #205081; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-bitbucket .badge { | |
| color: #205081; | |
| background-color: #fff | |
| } | |
| .btn-dropbox { | |
| color: #fff; | |
| background-color: #1087dd; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-dropbox.active,.btn-dropbox:active,.btn-dropbox:focus,.btn-dropbox:hover,.open>.dropdown-toggle.btn-dropbox { | |
| color: #fff; | |
| background-color: #0d6aad; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-dropbox.disabled,.btn-dropbox.disabled.active,.btn-dropbox.disabled:active,.btn-dropbox.disabled:focus,.btn-dropbox.disabled:hover,.btn-dropbox[disabled],.btn-dropbox[disabled].active,.btn-dropbox[disabled]:active,.btn-dropbox[disabled]:focus,.btn-dropbox[disabled]:hover,fieldset[disabled] .btn-dropbox,fieldset[disabled] .btn-dropbox.active,fieldset[disabled] .btn-dropbox:active,fieldset[disabled] .btn-dropbox:focus,fieldset[disabled] .btn-dropbox:hover { | |
| background-color: #1087dd; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-dropbox .badge { | |
| color: #1087dd; | |
| background-color: #fff | |
| } | |
| .btn-facebook { | |
| color: #fff; | |
| background-color: #3b5998; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-facebook.active,.btn-facebook:active,.btn-facebook:focus,.btn-facebook:hover,.open>.dropdown-toggle.btn-facebook { | |
| color: #fff; | |
| background-color: #2d4373; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-facebook.disabled,.btn-facebook.disabled.active,.btn-facebook.disabled:active,.btn-facebook.disabled:focus,.btn-facebook.disabled:hover,.btn-facebook[disabled],.btn-facebook[disabled].active,.btn-facebook[disabled]:active,.btn-facebook[disabled]:focus,.btn-facebook[disabled]:hover,fieldset[disabled] .btn-facebook,fieldset[disabled] .btn-facebook.active,fieldset[disabled] .btn-facebook:active,fieldset[disabled] .btn-facebook:focus,fieldset[disabled] .btn-facebook:hover { | |
| background-color: #3b5998; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-facebook .badge { | |
| color: #3b5998; | |
| background-color: #fff | |
| } | |
| .btn-flickr { | |
| color: #fff; | |
| background-color: #ff0084; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-flickr.active,.btn-flickr:active,.btn-flickr:focus,.btn-flickr:hover,.open>.dropdown-toggle.btn-flickr { | |
| color: #fff; | |
| background-color: #cc006a; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-flickr.disabled,.btn-flickr.disabled.active,.btn-flickr.disabled:active,.btn-flickr.disabled:focus,.btn-flickr.disabled:hover,.btn-flickr[disabled],.btn-flickr[disabled].active,.btn-flickr[disabled]:active,.btn-flickr[disabled]:focus,.btn-flickr[disabled]:hover,fieldset[disabled] .btn-flickr,fieldset[disabled] .btn-flickr.active,fieldset[disabled] .btn-flickr:active,fieldset[disabled] .btn-flickr:focus,fieldset[disabled] .btn-flickr:hover { | |
| background-color: #ff0084; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-flickr .badge { | |
| color: #ff0084; | |
| background-color: #fff | |
| } | |
| .btn-foursquare { | |
| color: #fff; | |
| background-color: #f94877; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-foursquare.active,.btn-foursquare:active,.btn-foursquare:focus,.btn-foursquare:hover,.open>.dropdown-toggle.btn-foursquare { | |
| color: #fff; | |
| background-color: #f71752; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-foursquare.disabled,.btn-foursquare.disabled.active,.btn-foursquare.disabled:active,.btn-foursquare.disabled:focus,.btn-foursquare.disabled:hover,.btn-foursquare[disabled],.btn-foursquare[disabled].active,.btn-foursquare[disabled]:active,.btn-foursquare[disabled]:focus,.btn-foursquare[disabled]:hover,fieldset[disabled] .btn-foursquare,fieldset[disabled] .btn-foursquare.active,fieldset[disabled] .btn-foursquare:active,fieldset[disabled] .btn-foursquare:focus,fieldset[disabled] .btn-foursquare:hover { | |
| background-color: #f94877; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-foursquare .badge { | |
| color: #f94877; | |
| background-color: #fff | |
| } | |
| .btn-github { | |
| color: #fff; | |
| background-color: #444; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-github.active,.btn-github:active,.btn-github:focus,.btn-github:hover,.open>.dropdown-toggle.btn-github { | |
| color: #fff; | |
| background-color: #2b2b2b; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-github.disabled,.btn-github.disabled.active,.btn-github.disabled:active,.btn-github.disabled:focus,.btn-github.disabled:hover,.btn-github[disabled],.btn-github[disabled].active,.btn-github[disabled]:active,.btn-github[disabled]:focus,.btn-github[disabled]:hover,fieldset[disabled] .btn-github,fieldset[disabled] .btn-github.active,fieldset[disabled] .btn-github:active,fieldset[disabled] .btn-github:focus,fieldset[disabled] .btn-github:hover { | |
| background-color: #444; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-github .badge { | |
| color: #444; | |
| background-color: #fff | |
| } | |
| .btn-google { | |
| color: #fff; | |
| background-color: #dd4b39; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-google.active,.btn-google:active,.btn-google:focus,.btn-google:hover,.open>.dropdown-toggle.btn-google { | |
| color: #fff; | |
| background-color: #c23321; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-google.disabled,.btn-google.disabled.active,.btn-google.disabled:active,.btn-google.disabled:focus,.btn-google.disabled:hover,.btn-google[disabled],.btn-google[disabled].active,.btn-google[disabled]:active,.btn-google[disabled]:focus,.btn-google[disabled]:hover,fieldset[disabled] .btn-google,fieldset[disabled] .btn-google.active,fieldset[disabled] .btn-google:active,fieldset[disabled] .btn-google:focus,fieldset[disabled] .btn-google:hover { | |
| background-color: #dd4b39; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-google .badge { | |
| color: #dd4b39; | |
| background-color: #fff | |
| } | |
| .btn-instagram { | |
| color: #fff; | |
| background-color: #3f729b; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-instagram.active,.btn-instagram:active,.btn-instagram:focus,.btn-instagram:hover,.open>.dropdown-toggle.btn-instagram { | |
| color: #fff; | |
| background-color: #305777; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-instagram.disabled,.btn-instagram.disabled.active,.btn-instagram.disabled:active,.btn-instagram.disabled:focus,.btn-instagram.disabled:hover,.btn-instagram[disabled],.btn-instagram[disabled].active,.btn-instagram[disabled]:active,.btn-instagram[disabled]:focus,.btn-instagram[disabled]:hover,fieldset[disabled] .btn-instagram,fieldset[disabled] .btn-instagram.active,fieldset[disabled] .btn-instagram:active,fieldset[disabled] .btn-instagram:focus,fieldset[disabled] .btn-instagram:hover { | |
| background-color: #3f729b; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-instagram .badge { | |
| color: #3f729b; | |
| background-color: #fff | |
| } | |
| .btn-linkedin { | |
| color: #fff; | |
| background-color: #007bb6; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-linkedin.active,.btn-linkedin:active,.btn-linkedin:focus,.btn-linkedin:hover,.open>.dropdown-toggle.btn-linkedin { | |
| color: #fff; | |
| background-color: #005983; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-linkedin.active,.btn-linkedin:active,.open>.dropdown-toggle.btn-linkedin { | |
| background-image: none | |
| } | |
| .btn-linkedin.disabled,.btn-linkedin.disabled.active,.btn-linkedin.disabled:active,.btn-linkedin.disabled:focus,.btn-linkedin.disabled:hover,.btn-linkedin[disabled],.btn-linkedin[disabled].active,.btn-linkedin[disabled]:active,.btn-linkedin[disabled]:focus,.btn-linkedin[disabled]:hover,fieldset[disabled] .btn-linkedin,fieldset[disabled] .btn-linkedin.active,fieldset[disabled] .btn-linkedin:active,fieldset[disabled] .btn-linkedin:focus,fieldset[disabled] .btn-linkedin:hover { | |
| background-color: #007bb6; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-linkedin .badge { | |
| color: #007bb6; | |
| background-color: #fff | |
| } | |
| .btn-microsoft { | |
| color: #fff; | |
| background-color: #2672ec; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-microsoft.active,.btn-microsoft:active,.btn-microsoft:focus,.btn-microsoft:hover,.open>.dropdown-toggle.btn-microsoft { | |
| color: #fff; | |
| background-color: #125acd; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-microsoft.disabled,.btn-microsoft.disabled.active,.btn-microsoft.disabled:active,.btn-microsoft.disabled:focus,.btn-microsoft.disabled:hover,.btn-microsoft[disabled],.btn-microsoft[disabled].active,.btn-microsoft[disabled]:active,.btn-microsoft[disabled]:focus,.btn-microsoft[disabled]:hover,fieldset[disabled] .btn-microsoft,fieldset[disabled] .btn-microsoft.active,fieldset[disabled] .btn-microsoft:active,fieldset[disabled] .btn-microsoft:focus,fieldset[disabled] .btn-microsoft:hover { | |
| background-color: #2672ec; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-microsoft .badge { | |
| color: #2672ec; | |
| background-color: #fff | |
| } | |
| .btn-openid { | |
| color: #fff; | |
| background-color: #f7931e; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-openid.active,.btn-openid:active,.btn-openid:focus,.btn-openid:hover,.open>.dropdown-toggle.btn-openid { | |
| color: #fff; | |
| background-color: #da7908; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-openid.disabled,.btn-openid.disabled.active,.btn-openid.disabled:active,.btn-openid.disabled:focus,.btn-openid.disabled:hover,.btn-openid[disabled],.btn-openid[disabled].active,.btn-openid[disabled]:active,.btn-openid[disabled]:focus,.btn-openid[disabled]:hover,fieldset[disabled] .btn-openid,fieldset[disabled] .btn-openid.active,fieldset[disabled] .btn-openid:active,fieldset[disabled] .btn-openid:focus,fieldset[disabled] .btn-openid:hover { | |
| background-color: #f7931e; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-openid .badge { | |
| color: #f7931e; | |
| background-color: #fff | |
| } | |
| .btn-pinterest { | |
| color: #fff; | |
| background-color: #cb2027; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-pinterest.active,.btn-pinterest:active,.btn-pinterest:focus,.btn-pinterest:hover,.open>.dropdown-toggle.btn-pinterest { | |
| color: #fff; | |
| background-color: #9f191f; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-pinterest.disabled,.btn-pinterest.disabled.active,.btn-pinterest.disabled:active,.btn-pinterest.disabled:focus,.btn-pinterest.disabled:hover,.btn-pinterest[disabled],.btn-pinterest[disabled].active,.btn-pinterest[disabled]:active,.btn-pinterest[disabled]:focus,.btn-pinterest[disabled]:hover,fieldset[disabled] .btn-pinterest,fieldset[disabled] .btn-pinterest.active,fieldset[disabled] .btn-pinterest:active,fieldset[disabled] .btn-pinterest:focus,fieldset[disabled] .btn-pinterest:hover { | |
| background-color: #cb2027; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-pinterest .badge { | |
| color: #cb2027; | |
| background-color: #fff | |
| } | |
| .btn-reddit { | |
| color: #000; | |
| background-color: #eff7ff; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-reddit.active,.btn-reddit:active,.btn-reddit:focus,.btn-reddit:hover,.open>.dropdown-toggle.btn-reddit { | |
| color: #000; | |
| background-color: #bcddff; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-reddit.disabled,.btn-reddit.disabled.active,.btn-reddit.disabled:active,.btn-reddit.disabled:focus,.btn-reddit.disabled:hover,.btn-reddit[disabled],.btn-reddit[disabled].active,.btn-reddit[disabled]:active,.btn-reddit[disabled]:focus,.btn-reddit[disabled]:hover,fieldset[disabled] .btn-reddit,fieldset[disabled] .btn-reddit.active,fieldset[disabled] .btn-reddit:active,fieldset[disabled] .btn-reddit:focus,fieldset[disabled] .btn-reddit:hover { | |
| background-color: #eff7ff; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-reddit .badge { | |
| color: #eff7ff; | |
| background-color: #000 | |
| } | |
| .btn-soundcloud { | |
| color: #fff; | |
| background-color: #f50; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-soundcloud.active,.btn-soundcloud:active,.btn-soundcloud:focus,.btn-soundcloud:hover,.open>.dropdown-toggle.btn-soundcloud { | |
| color: #fff; | |
| background-color: #c40; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-soundcloud.disabled,.btn-soundcloud.disabled.active,.btn-soundcloud.disabled:active,.btn-soundcloud.disabled:focus,.btn-soundcloud.disabled:hover,.btn-soundcloud[disabled],.btn-soundcloud[disabled].active,.btn-soundcloud[disabled]:active,.btn-soundcloud[disabled]:focus,.btn-soundcloud[disabled]:hover,fieldset[disabled] .btn-soundcloud,fieldset[disabled] .btn-soundcloud.active,fieldset[disabled] .btn-soundcloud:active,fieldset[disabled] .btn-soundcloud:focus,fieldset[disabled] .btn-soundcloud:hover { | |
| background-color: #f50; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-soundcloud .badge { | |
| color: #f50; | |
| background-color: #fff | |
| } | |
| .btn-tumblr { | |
| color: #fff; | |
| background-color: #2c4762; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-tumblr.active,.btn-tumblr:active,.btn-tumblr:focus,.btn-tumblr:hover,.open>.dropdown-toggle.btn-tumblr { | |
| color: #fff; | |
| background-color: #1c2d3f; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-tumblr.disabled,.btn-tumblr.disabled.active,.btn-tumblr.disabled:active,.btn-tumblr.disabled:focus,.btn-tumblr.disabled:hover,.btn-tumblr[disabled],.btn-tumblr[disabled].active,.btn-tumblr[disabled]:active,.btn-tumblr[disabled]:focus,.btn-tumblr[disabled]:hover,fieldset[disabled] .btn-tumblr,fieldset[disabled] .btn-tumblr.active,fieldset[disabled] .btn-tumblr:active,fieldset[disabled] .btn-tumblr:focus,fieldset[disabled] .btn-tumblr:hover { | |
| background-color: #2c4762; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-tumblr .badge { | |
| color: #2c4762; | |
| background-color: #fff | |
| } | |
| .btn-twitter { | |
| color: #fff; | |
| background-color: #55acee; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-twitter.active,.btn-twitter:active,.btn-twitter:focus,.btn-twitter:hover,.open>.dropdown-toggle.btn-twitter { | |
| color: #fff; | |
| background-color: #2795e9; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-twitter.disabled,.btn-twitter.disabled.active,.btn-twitter.disabled:active,.btn-twitter.disabled:focus,.btn-twitter.disabled:hover,.btn-twitter[disabled],.btn-twitter[disabled].active,.btn-twitter[disabled]:active,.btn-twitter[disabled]:focus,.btn-twitter[disabled]:hover,fieldset[disabled] .btn-twitter,fieldset[disabled] .btn-twitter.active,fieldset[disabled] .btn-twitter:active,fieldset[disabled] .btn-twitter:focus,fieldset[disabled] .btn-twitter:hover { | |
| background-color: #55acee; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-twitter .badge { | |
| color: #55acee; | |
| background-color: #fff | |
| } | |
| .btn-vimeo { | |
| color: #fff; | |
| background-color: #1ab7ea; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-vimeo.active,.btn-vimeo:active,.btn-vimeo:focus,.btn-vimeo:hover,.open>.dropdown-toggle.btn-vimeo { | |
| color: #fff; | |
| background-color: #1295bf; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-vimeo.disabled,.btn-vimeo.disabled.active,.btn-vimeo.disabled:active,.btn-vimeo.disabled:focus,.btn-vimeo.disabled:hover,.btn-vimeo[disabled],.btn-vimeo[disabled].active,.btn-vimeo[disabled]:active,.btn-vimeo[disabled]:focus,.btn-vimeo[disabled]:hover,fieldset[disabled] .btn-vimeo,fieldset[disabled] .btn-vimeo.active,fieldset[disabled] .btn-vimeo:active,fieldset[disabled] .btn-vimeo:focus,fieldset[disabled] .btn-vimeo:hover { | |
| background-color: #1ab7ea; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-vimeo .badge { | |
| color: #1ab7ea; | |
| background-color: #fff | |
| } | |
| .btn-vk { | |
| color: #fff; | |
| background-color: #587ea3; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-vk.active,.btn-vk:active,.btn-vk:focus,.btn-vk:hover,.open>.dropdown-toggle.btn-vk { | |
| color: #fff; | |
| background-color: #466482; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-vk.disabled,.btn-vk.disabled.active,.btn-vk.disabled:active,.btn-vk.disabled:focus,.btn-vk.disabled:hover,.btn-vk[disabled],.btn-vk[disabled].active,.btn-vk[disabled]:active,.btn-vk[disabled]:focus,.btn-vk[disabled]:hover,fieldset[disabled] .btn-vk,fieldset[disabled] .btn-vk.active,fieldset[disabled] .btn-vk:active,fieldset[disabled] .btn-vk:focus,fieldset[disabled] .btn-vk:hover { | |
| background-color: #587ea3; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-vk .badge { | |
| color: #587ea3; | |
| background-color: #fff | |
| } | |
| .btn-whatsapp { | |
| color: #fff; | |
| background-color: #04aa24; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-whatsapp.active,.btn-whatsapp:active,.btn-whatsapp:focus,.btn-whatsapp:hover,.open>.dropdown-toggle.btn-whatsapp { | |
| color: #fff; | |
| background-color: #3c983b; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-whatsapp.disabled,.btn-whatsapp.disabled.active,.btn-whatsapp.disabled:active,.btn-whatsapp.disabled:focus,.btn-whatsapp.disabled:hover,.btn-whatsapp[disabled],.btn-whatsapp[disabled].active,.btn-whatsapp[disabled]:active,.btn-whatsapp[disabled]:focus,.btn-whatsapp[disabled]:hover,fieldset[disabled] .btn-whatsapp,fieldset[disabled] .btn-whatsapp.active,fieldset[disabled] .btn-whatsapp:active,fieldset[disabled] .btn-whatsapp:focus,fieldset[disabled] .btn-whatsapp:hover { | |
| background-color: #04aa24; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-whatsapp .badge { | |
| color: #04aa24; | |
| background-color: #fff | |
| } | |
| .btn-yahoo { | |
| color: #fff; | |
| background-color: #720e9e; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-yahoo.active,.btn-yahoo:active,.btn-yahoo:focus,.btn-yahoo:hover,.open>.dropdown-toggle.btn-yahoo { | |
| color: #fff; | |
| background-color: #500a6f; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-yahoo.disabled,.btn-yahoo.disabled.active,.btn-yahoo.disabled:active,.btn-yahoo.disabled:focus,.btn-yahoo.disabled:hover,.btn-yahoo[disabled],.btn-yahoo[disabled].active,.btn-yahoo[disabled]:active,.btn-yahoo[disabled]:focus,.btn-yahoo[disabled]:hover,fieldset[disabled] .btn-yahoo,fieldset[disabled] .btn-yahoo.active,fieldset[disabled] .btn-yahoo:active,fieldset[disabled] .btn-yahoo:focus,fieldset[disabled] .btn-yahoo:hover { | |
| background-color: #720e9e; | |
| border-color: rgba(0,0,0,.2) | |
| } | |
| .btn-yahoo .badge { | |
| color: #720e9e; | |
| background-color: #fff | |
| } | |
| /* -- */ | |
| /* EXTRAS */ | |
| /* ------------------------------- */ | |
| /* == margins == */ | |
| .ml0 { | |
| margin-left: 0!important; | |
| } | |
| .mr0 { | |
| margin-right: 0!important; | |
| } | |
| .mlr0 { | |
| margin-left: 0!important; | |
| margin-right: 0!important; | |
| } | |
| .mt0 { | |
| margin-top: 0!important; | |
| } | |
| .mb0 { | |
| margin-bottom: 0!important; | |
| } | |
| .mtb0 { | |
| margin-top: 0!important; | |
| margin-bottom: 0!important; | |
| } | |
| .ml5 { | |
| margin-left: 5px!important; | |
| } | |
| .mr5 { | |
| margin-right: 5px!important; | |
| } | |
| .mlr5 { | |
| margin-left: 5px!important; | |
| margin-right: 5px!important; | |
| } | |
| .mt5 { | |
| margin-top: 5px!important; | |
| } | |
| .mb5 { | |
| margin-bottom: 5px!important; | |
| } | |
| .mtb5 { | |
| margin-top: 5px!important; | |
| margin-bottom: 5px!important; | |
| } | |
| .ml10 { | |
| margin-left: 10px!important; | |
| } | |
| .mr10 { | |
| margin-right: 10px!important; | |
| } | |
| .mlr10 { | |
| margin-left: 10px!important; | |
| margin-right: 10px!important; | |
| } | |
| .mt10 { | |
| margin-top: 10px!important; | |
| } | |
| .mb10 { | |
| margin-bottom: 10px!important; | |
| } | |
| .mtb10 { | |
| margin-top: 10px!important; | |
| margin-bottom: 10px!important; | |
| } | |
| .ml15 { | |
| margin-left: 15px!important; | |
| } | |
| .mr15 { | |
| margin-right: 15px!important; | |
| } | |
| .mlr15 { | |
| margin-left: 15px!important; | |
| margin-right: 15px!important; | |
| } | |
| .mt15 { | |
| margin-top: 15px!important; | |
| } | |
| .mb15 { | |
| margin-bottom: 15px!important; | |
| } | |
| .mtb15 { | |
| margin-top: 15px!important; | |
| margin-bottom: 15px!important; | |
| } | |
| .ml20 { | |
| margin-left: 20px!important; | |
| } | |
| .mr20 { | |
| margin-right: 20px!important; | |
| } | |
| .mlr20 { | |
| margin-left: 20px!important; | |
| margin-right: 20px!important; | |
| } | |
| .mt20 { | |
| margin-top: 20px!important; | |
| } | |
| .mb20 { | |
| margin-bottom: 20px!important; | |
| } | |
| .mtb20 { | |
| margin-top: 20px!important; | |
| margin-bottom: 20px!important; | |
| } | |
| .ml25 { | |
| margin-left: 25px!important; | |
| } | |
| .mr25 { | |
| margin-right: 25px!important; | |
| } | |
| .mlr25 { | |
| margin-left: 25px!important; | |
| margin-right: 25px!important; | |
| } | |
| .mt25 { | |
| margin-top: 25px!important; | |
| } | |
| .mb25 { | |
| margin-bottom: 25px!important; | |
| } | |
| .mtb25 { | |
| margin-top: 25px!important; | |
| margin-bottom: 25px!important; | |
| } | |
| .ml30 { | |
| margin-left: 30px!important; | |
| } | |
| .mr30 { | |
| margin-right: 30px!important; | |
| } | |
| .mlr30 { | |
| margin-left: 30px!important; | |
| margin-right: 30px!important; | |
| } | |
| .mt30 { | |
| margin-top: 30px!important; | |
| } | |
| .mb30 { | |
| margin-bottom: 30px!important; | |
| } | |
| .mtb30 { | |
| margin-top: 30px!important; | |
| margin-bottom: 30px!important; | |
| } | |
| /* -- */ | |
| /* == paddings == */ | |
| .pl0 { | |
| padding-left: 0px!important; | |
| } | |
| .pr0 { | |
| padding-right: 0px!important; | |
| } | |
| .plr0 { | |
| padding-left: 0px!important; | |
| padding-right: 0px!important; | |
| } | |
| .pt0 { | |
| padding-top: 0px!important; | |
| } | |
| .pb0 { | |
| padding-bottom: 0px!important; | |
| } | |
| .ptb0 { | |
| padding-top: 0px!important; | |
| padding-bottom: 0px!important; | |
| } | |
| .pl5 { | |
| padding-left: 5px!important; | |
| } | |
| .pr5 { | |
| padding-right: 5px!important; | |
| } | |
| .plr5 { | |
| padding-left: 5px!important; | |
| padding-right: 5px!important; | |
| } | |
| .pt5 { | |
| padding-top: 5px!important; | |
| } | |
| .pb5 { | |
| padding-bottom: 5px!important; | |
| } | |
| .ptb5 { | |
| padding-top: 5px!important; | |
| padding-bottom: 5px!important; | |
| } | |
| .pl10 { | |
| padding-left: 10px!important; | |
| } | |
| .pr10 { | |
| padding-right: 10px!important; | |
| } | |
| .plr10 { | |
| padding-left: 10px!important; | |
| padding-right: 10px!important; | |
| } | |
| .pt10 { | |
| padding-top: 10px!important; | |
| } | |
| .pb10 { | |
| padding-bottom: 10px!important; | |
| } | |
| .ptb10 { | |
| padding-top: 10px!important; | |
| padding-bottom: 10px!important; | |
| } | |
| .pl15 { | |
| padding-left: 15px!important; | |
| } | |
| .pr15 { | |
| padding-right: 15px!important; | |
| } | |
| .plr15 { | |
| padding-left: 15px!important; | |
| padding-right: 15px!important; | |
| } | |
| .pt15 { | |
| padding-top: 15px!important; | |
| } | |
| .pb15 { | |
| padding-bottom: 15px!important; | |
| } | |
| .ptb15 { | |
| padding-top: 15px!important; | |
| padding-bottom: 15px!important; | |
| } | |
| .pl20 { | |
| padding-left: 20px!important; | |
| } | |
| .pr20 { | |
| padding-right: 20px!important; | |
| } | |
| .plr20 { | |
| padding-left: 20px!important; | |
| padding-right: 20px!important; | |
| } | |
| .pt20 { | |
| padding-top: 20px!important; | |
| } | |
| .pb20 { | |
| padding-bottom: 20px!important; | |
| } | |
| .ptb20 { | |
| padding-top: 20px!important; | |
| padding-bottom: 20px!important; | |
| } | |
| .pl25 { | |
| padding-left: 25px!important; | |
| } | |
| .pr25 { | |
| padding-right: 25px!important; | |
| } | |
| .plr25 { | |
| padding-left: 25px!important; | |
| padding-right: 25px!important; | |
| } | |
| .pt25 { | |
| padding-top: 25px!important; | |
| } | |
| .pb25 { | |
| padding-bottom: 25px!important; | |
| } | |
| .ptb25 { | |
| padding-top: 25px!important; | |
| padding-bottom: 25px!important; | |
| } | |
| .pl30 { | |
| padding-left: 30px!important; | |
| } | |
| .pr30 { | |
| padding-right: 30px!important; | |
| } | |
| .plr30 { | |
| padding-left: 30px!important; | |
| padding-right: 30px!important; | |
| } | |
| .pt30 { | |
| padding-top: 30px!important; | |
| } | |
| .pb30 { | |
| padding-bottom: 30px!important; | |
| } | |
| .ptb30 { | |
| padding-top: 30px!important; | |
| padding-bottom: 30px!important; | |
| } | |
| /* -- */ | |
| /* == text == */ | |
| .text-link { | |
| color: var(--link-color); | |
| } | |
| .text-link:hover { | |
| cursor: pointer; | |
| text-decoration: underline; | |
| } | |
| .text-underline:hover { | |
| cursor: pointer; | |
| text-decoration: underline; | |
| } | |
| .text-active { | |
| color: #1e8bd2!important; | |
| } | |
| /* text sizes */ | |
| .text-md { | |
| font-size: 1.1em; | |
| line-height: 1.6; | |
| } | |
| .text-lg { | |
| font-size: 1.2em; | |
| line-height: 1.7; | |
| } | |
| .text-xlg { | |
| font-size: 1.3em; | |
| line-height: 1.8em; | |
| } | |
| .text-xxlg { | |
| font-size: 2.3em; | |
| font-weight: 700; | |
| } | |
| /* -- */ | |
| .text-with-list ul { | |
| list-style-type: disc; | |
| padding-inline-start: 40px | |
| } | |
| .red { | |
| color: red; | |
| } | |
| .green { | |
| color: green; | |
| } | |
| .yellow { | |
| color: #ebba16; | |
| } | |
| /* -- */ | |
| /* == user-select == */ | |
| .unselectable { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| /* -- */ | |
| /* == cursor == */ | |
| .pointer { | |
| cursor: pointer; | |
| } | |
| /* -- */ | |
| /* == vertical-align == */ | |
| .vertical-align-top { | |
| vertical-align: top; | |
| } | |
| .vertical-align-middle { | |
| vertical-align: middle; | |
| } | |
| .vertical-align-bottom { | |
| vertical-align: bottom; | |
| } | |
| /* -- */ | |
| /* == x == */ | |
| .x-notifier { | |
| background: #ffffcd!important; | |
| } | |
| body.night-mode .x-notifier { | |
| background: #000000!important; | |
| } | |
| .x-hidden { | |
| display: none; | |
| } | |
| .x-blured { | |
| overflow: hidden; | |
| } | |
| .x-blured .js_lightbox, | |
| .x-blured .album-cover { | |
| filter: blur(10px); | |
| } | |
| /* -- */ | |
| /* OFFCANVAS */ | |
| /* ------------------------------- */ | |
| @media (max-width: 767px) { | |
| .offcanvas { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .offcanvas.active { | |
| transition: all 0.25s ease-out; | |
| } | |
| .offcanvas .offcanvas-sidebar { | |
| position: absolute!important; | |
| top: 0; | |
| left: -80%; | |
| width: 80%; | |
| z-index: 100; | |
| transition: all 0.25s ease-out; | |
| } | |
| .offcanvas.active .offcanvas-sidebar { | |
| left: 0; | |
| } | |
| .offcanvas .offcanvas-mainbar { | |
| left: 0; | |
| transition: all 0.25s ease-out; | |
| } | |
| .offcanvas.active .offcanvas-mainbar { | |
| left: 80%; | |
| } | |
| }</style> <style> | |
| body { | |
| padding-top: 0; | |
| } | |
| header { | |
| background: var(--header-bg-color); | |
| text-align: center; | |
| font-size: 34px; | |
| font-weight: 300; | |
| line-height: 70px; | |
| padding: 70px 0 100px; | |
| } | |
| header a, | |
| header a:hover { | |
| color: #fff; | |
| } | |
| .user-profile-picture { | |
| position: absolute; | |
| top: -50px; | |
| left: 50%; | |
| transform: translate(-50%); | |
| } | |
| </style> </head> <body > <header> <a href="https://sitedomain.tld">Site Name</a> </header> <div class="container" style="margin-top: -25px;"> <div class="card shadow"> <div class="card-body page-content"> <div class="text-center"> <img class="img-thumbnail rounded-circle user-profile-picture" src="https://avatars.githubusercontent.com/u/65714156?s=200&v=4" width="99" height="99"> </div> <h3 class="mtb20 text-center"><span class="text-primary">The Users Name</span></h3> <div class="section-title bg-gradient-primary mb20"> <i class="fa fa-coins mr10"></i>Your Information | |
| </div> <ul class="list-group mb20"> <li class="list-group-item"> <span class="float-right badge badge-lg badge-pill badge-secondary">2</span> | |
| User ID | |
| </li> <li class="list-group-item"> <span class="float-right badge badge-lg badge-pill badge-secondary">aUsername</span> | |
| User Name | |
| </li> <li class="list-group-item"> <span class="float-right badge badge-lg badge-pill badge-secondary">UserFirstName</span> | |
| User First Name | |
| </li> <li class="list-group-item"> <span class="float-right badge badge-lg badge-pill badge-secondary">UserLastName</span> | |
| User Last Name | |
| </li> <li class="list-group-item"> <span class="float-right badge badge-lg badge-pill badge-secondary">user@hisemaildomain.tld</span> | |
| User Email | |
| </li> <li class="list-group-item"> <span class="float-right badge badge-lg badge-pill badge-secondary"></span> | |
| User Phone | |
| </li> <li class="list-group-item"> <span class="float-right badge badge-lg badge-pill badge-secondary">Male</span> | |
| User Gender | |
| </li> <li class="list-group-item"> <span class="float-right badge badge-lg badge-pill badge-secondary">10 February 2021</span> | |
| Joined | |
| </li> <li class="list-group-item"> <span class="float-right badge badge-lg badge-pill badge-secondary">22 February 2021</span> | |
| Last Login | |
| </li> </ul> <div class="section-title bg-gradient-red mb20"> <i class="fa fa-shield-alt mr10"></i>Your Sessions | |
| </div> <div class="table-responsive"> <table class="table table-bordered table-hover "> <thead> <tr> <th>ID</th> <th>Browser</th> <th>OS</th> <th>Date</th> <th>IP</th> </tr> </thead> <tbody> <tr> <td>1</td> <td> | |
| Safari </td> <td>Mac OS X</td> <td> <span class="js_moment" data-time="2021-02-10 07:19:08">2021-02-10 07:19:08</span> </td> <td>123.123.123.123</td> </tr> <tr> <td>2</td> <td> | |
| Handheld Browser </td> <td>iPhone</td> <td> <span class="js_moment" data-time="2021-02-10 09:39:43">2021-02-10 09:39:43</span> </td> <td>123.123.123.89</td> </tr> <tr> <td>3</td> <td> | |
| Safari </td> <td>Mac OS X</td> <td> <span class="js_moment" data-time="2021-02-11 06:10:45">2021-02-11 06:10:45</span> </td> <td>123.123.123.567</td> </tr> <tr> <td>4</td> <td> | |
| Safari <span class="badge badge-pill badge-lg badge-success">Active Session</span> </td> <td>Mac OS X</td> <td> <span class="js_moment" data-time="2021-02-21 01:20:15">2021-02-21 01:20:15</span> </td> <td>123.123.234</td> </tr> </tbody> </table> </div> <div class="section-title bg-gradient-teal mb20"> <i class="fa fa-users mr10"></i>Your Friends <span class="badge badge-pill badge-lg badge-warning">0</span> </div> <p class="text-center text-muted mt10"> | |
| No data to show | |
| </p> <div class="section-title bg-gradient-teal mb20"> <i class="fa fa-users mr10"></i>Your Followings <span class="badge badge-pill badge-lg badge-warning">0</span> </div> <p class="text-center text-muted mt10"> | |
| No data to show | |
| </p> <div class="section-title bg-gradient-teal mb20"> <i class="fa fa-users mr10"></i>Your Followers <span class="badge badge-pill badge-lg badge-warning">0</span> </div> <p class="text-center text-muted mt10"> | |
| No data to show | |
| </p> <div class="section-title bg-gradient-warning mb20"> <i class="fa fa-flag mr10"></i>Your Likes <span class="badge badge-pill badge-lg badge-warning">0</span> </div> <p class="text-center text-muted mt10"> | |
| No data to show | |
| </p> <div class="section-title bg-gradient-warning mb20"> <i class="fa fa-users mr10"></i>Your groups <span class="badge badge-pill badge-lg badge-warning">0</span> </div> <p class="text-center text-muted mt10"> | |
| No data to show | |
| </p> <div class="section-title bg-gradient-warning mb20"> <i class="fa fa-calendar mr10"></i>Your events <span class="badge badge-pill badge-lg badge-warning">1</span> </div> <ul class="row"> <li class="col-md-6 col-lg-3"> <div class="ui-box"> <div class="img"> <a href="https://sitedomain.tld/events/1"> <img alt="A Conference in Old Town New York" src="https://avatars.githubusercontent.com/u/65714156?s=200&v=4" /> </a> </div> <div class="mt10"> <a class="h6" href="https://sitedomain.tld/events/1">A Conference in Old Town New York</a> <div>1 Interested</div> </div> <div class="mt10"> <button type="button" class="btn btn-sm btn-primary js_interest-event" data-id="1"> <i class="fa fa-star mr5"></i>Interested | |
| </button> </div> </div> </li> </ul> <div class="section-title bg-gradient-purple mb20"> <i class="fa fa-newspaper mr10"></i>Your posts | |
| </div> <ul> <li> <div class="post | |
| " data-id="79"> <div class="post-body"> <div class="post-header"> <div class="post-avatar"> <a class="post-avatar-picture" href="https://sitedomain.tld/t3social" style="background-image:url(https://avatars.githubusercontent.com/u/65714156?s=200&v=4);"> </a> <i class="fa fa-circle online-dot"></i> </div> <div class="post-meta"> <span class="js_user-popover" data-type="user" data-uid="2"> <a class="post-author" href="https://sitedomain.tld/sngine">The Users Name</a> </span> <i data-toggle="tooltip" data-placement="top" title='Verified User' class="fa fa-check-circle fa-fw verified-badge"></i> <span class="post-title"> | |
| added new article | |
| </span> <div class="post-time"> <a href="https://sitedomain.tld/posts/79" class="js_moment" data-time="2021-02-22 02:00:01">2021-02-22 02:00:01</a> | |
| - | |
| <i class="fa fa-globe" data-toggle="tooltip" data-placement="top" title='Shared with Public'></i> </div> </div> </div> <div class="post-replace"> <div class="post-text js_readmore" dir="auto"></div> <div class="post-text-translation x-hidden" dir="auto"></div> <div class="post-text-plain x-hidden"></div> </div> <div class="mt10"> <div class="post-media"> <a class="post-media-image" href="https://domain.tld/blogs/73/The-Users-Name-s-CV-My-Early-Days"> <div style="padding-top: 50%; background-size: cover; background-image:url('https://user-images.githubusercontent.com/1982011/108692792-a493e280-752f-11eb-9086-5657ee8931a1.png');"></div> </a> <div class="post-media-meta"> <a class="title mb5" href="https://domain.tld/blogs/73/The-Users-Name-s-CV-My-Early-Days">The Users Name's CV - My Early Days</a> <div class="text mb5">My Name is The Users NameI was born on 21 January 1954 in a town, Province, Country and have spend my childhood mostly in my town. | |
| My father is Fathers Name (*17 January 1934 - 21 February 2012) from Town in the Woods, Province, Country . He worked as an engineer at bestCompany which later merged with another Company. He was a major developer for a System which...</div> </div> </div> </div> <div class="post-stats clearfix"> <span class="float-right"> <span class="pointer js_comments-toggle"> <i class="fa fa-comments"></i> 0 Comments | |
| </span> <span class="pointer ml10 x-hidden" data-toggle="modal" data-url="posts/who_shares.php?post_id=79"> <i class="fa fa-share"></i> 0 Shares | |
| </span> </span> </div> </div> <div class="post-footer x-hidden"> <div class="post-comments"> <div class="comment js_comment-form " data-handle="post" data-id="79"> <div class="comment-avatar"> <a class="comment-avatar-picture" href="https://sitedomain.tld/sngine" style="background-image:url(https://user-images.githubusercontent.com/1982011/108692798-a78ed300-752f-11eb-9e54-6d2549205b0e.png);"> </a> </div> <div class="comment-data"> <div class="x-form comment-form"> <textarea dir="auto" class="js_autosize js_mention js_post-comment" rows="1" placeholder='Write a comment'></textarea> <ul class="x-form-tools clearfix"> <li class="x-form-tools-post js_post-comment"> <i class="far fa-paper-plane fa-lg fa-fw"></i> </li> <li class="x-form-tools-attach"> <i class="far fa-image fa-lg fa-fw js_x-uploader" data-handle="comment"></i> </li> <li class="x-form-tools-emoji js_emoji-menu-toggle"> <i class="far fa-smile-wink fa-lg fa-fw"></i> </li> </ul> </div> <div class="comment-voice-notes"> <div class="voice-recording-wrapper" data-handle="comment"> <div class="x-hidden js_voice-processing-message"> <div class="svg-container mr5" style="width:16px; height:16px; "> <?xml version="1.0" encoding="iso-8859-1"?> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve"> <path style="fill:#2196F3;" d="M245.333,0C109.839,0,0,109.839,0,245.333s109.839,245.333,245.333,245.333 | |
| s245.333-109.839,245.333-245.333C490.514,109.903,380.764,0.153,245.333,0z"/> <path style="fill:#FAFAFA;" d="M267.968,82.219c-12.496-12.492-32.752-12.492-45.248,0L104.533,200.533 | |
| c-18.889,18.894-18.889,49.522,0,68.416c19.139,18.289,49.277,18.289,68.416,0l19.2-19.2v123.584 | |
| c0,29.455,23.878,53.333,53.333,53.333c29.455,0,53.333-23.878,53.333-53.333V249.749l19.2,19.2 | |
| c19.139,18.289,49.277,18.289,68.416,0c18.889-18.894,18.889-49.522,0-68.416L267.968,82.219z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg> </div> Processing<span class="loading-dots"></span> </div> <div class="x-hidden js_voice-success-message"> <div class="svg-container mr5" style="width:16px; height:16px; "> <svg height="512pt" viewBox="0 -21 512.00533 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m306.582031 317.25c-12.074219 12.097656-28.160156 18.753906-45.25 18.753906-17.085937 0-33.171875-6.65625-45.246093-18.753906l-90.667969-90.664062c-12.09375-12.078126-18.75-28.160157-18.75-45.25 0-17.089844 6.65625-33.171876 18.75-45.246094 12.074219-12.097656 28.160156-18.753906 45.25-18.753906 17.085937 0 33.171875 6.65625 45.246093 18.753906l45.417969 45.394531 125.378907-125.375c-40.960938-34.921875-93.996094-56.10546875-152.042969-56.10546875-129.601563 0-234.667969 105.06640575-234.667969 234.66406275 0 129.601562 105.066406 234.667969 234.667969 234.667969 129.597656 0 234.664062-105.066407 234.664062-234.667969 0-24.253907-3.6875-47.636719-10.515625-69.652344zm0 0" fill="#4caf50"/><path d="m261.332031 293.335938c-5.460937 0-10.921875-2.089844-15.082031-6.25l-90.664062-90.667969c-8.34375-8.339844-8.34375-21.824219 0-30.164063 8.339843-8.34375 21.820312-8.34375 30.164062 0l75.582031 75.582032 214.253907-214.25c8.339843-8.339844 21.820312-8.339844 30.164062 0 8.339844 8.34375 8.339844 21.824218 0 30.167968l-229.335938 229.332032c-4.15625 4.160156-9.621093 6.25-15.082031 6.25zm0 0" fill="#2196f3"/></svg> </div> Voice note recorded successfully | |
| <div class="float-right"> <button type="button" class="close js_voice-remove"> <span>×</span> </button> </div> </div> <div class="btn-voice-start js_voice-start"> <i class="fas fa-microphone mr5"></i>Record | |
| </div> <div class="btn-voice-stop js_voice-stop" style="display: none"> <i class="far fa-stop-circle mr5"></i>Recording <span class="js_voice-timer">00:00</span> </div> </div> </div> <div class="comment-attachments attachments clearfix x-hidden"> <ul> <li class="loading"> <div class="progress x-progress"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div> </li> </ul> </div> </div> </div> <div class="pb10 text-center js_comment-disabled-msg x-hidden"> | |
| Commenting has been turned off for this post. | |
| </div> <div class="text-center x-hidden js_comments-filter-loader"> <div class="loader loader_large"></div> </div> <ul class="js_comments "> </ul> </div> </div> </div> </li> <li> <div class="post | |
| " data-id="6"> <div class="post-body"> <div class="post-header"> <div class="post-avatar"> <a class="post-avatar-picture" href="https://sitedomain.tld/sngine" style="background-image:url(https://avatars.githubusercontent.com/u/65714156?s=200&v=4);"> </a> <i class="fa fa-circle online-dot"></i> </div> <div class="post-meta"> <span class="js_user-popover" data-type="user" data-uid="2"> <a class="post-author" href="https://sitedomain.tld/sngine">The Users Name</a> </span> <i data-toggle="tooltip" data-placement="top" title='Verified User' class="fa fa-check-circle fa-fw verified-badge"></i> <span class="post-title"> | |
| updated the profile picture | |
| </span> <div class="post-time"> <a href="https://sitedomain.tld/posts/6" class="js_moment" data-time="2021-02-10 07:20:03">2021-02-10 07:20:03</a> | |
| - | |
| <div class="btn-group" data-toggle="tooltip" data-placement="top" data-value="public" title='Shared with: Public'> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" data-display="static"> <i class="btn-group-icon fa fa-globe"></i> </button> <div class="dropdown-menu dropdown-menu-left"> <div class="dropdown-item pointer js_edit-privacy" data-title='Shared with: Public' data-value="public"> <i class="fa fa-globe"></i> Public | |
| </div> <div class="dropdown-item pointer js_edit-privacy" data-title='Shared with: Friends' data-value="friends"> <i class="fa fa-users"></i> Friends | |
| </div> <div class="dropdown-item pointer js_edit-privacy" data-title='Shared with: Only Me' data-value="me"> <i class="fa fa-lock"></i> Only Me | |
| </div> </div> </div> </div> </div> </div> <div class="post-replace"> <div class="post-text js_readmore" dir="auto"></div> <div class="post-text-translation x-hidden" dir="auto"></div> <div class="post-text-plain x-hidden"></div> </div> <div class="mt10 clearfix"> <div class="pg_wrapper"> <div class="pg_1x "> <a href="https://sitedomain.tld/photos/6" class="js_lightbox" data-id="6" data-image="https://user-images.githubusercontent.com/1982011/108692798-a78ed300-752f-11eb-9e54-6d2549205b0e.png" data-context="album"> <img src="https://user-images.githubusercontent.com/1982011/108692798-a78ed300-752f-11eb-9e54-6d2549205b0e.png"> </a> </div> </div> </div> <div class="post-stats clearfix"> <span class="float-right"> <span class="pointer js_comments-toggle"> <i class="fa fa-comments"></i> 0 Comments | |
| </span> <span class="pointer ml10 x-hidden" data-toggle="modal" data-url="posts/who_shares.php?post_id=6"> <i class="fa fa-share"></i> 0 Shares | |
| </span> </span> </div> </div> <div class="post-footer x-hidden"> <div class="post-comments"> <div class="comment js_comment-form " data-handle="post" data-id="6"> <div class="comment-avatar"> <a class="comment-avatar-picture" href="https://sitedomain.tld/sngine" style="background-image:url(https://avatars.githubusercontent.com/u/65714156?s=200&v=4);"> </a> </div> <div class="comment-data"> <div class="x-form comment-form"> <textarea dir="auto" class="js_autosize js_mention js_post-comment" rows="1" placeholder='Write a comment'></textarea> <ul class="x-form-tools clearfix"> <li class="x-form-tools-post js_post-comment"> <i class="far fa-paper-plane fa-lg fa-fw"></i> </li> <li class="x-form-tools-attach"> <i class="far fa-image fa-lg fa-fw js_x-uploader" data-handle="comment"></i> </li> <li class="x-form-tools-emoji js_emoji-menu-toggle"> <i class="far fa-smile-wink fa-lg fa-fw"></i> </li> </ul> </div> <div class="comment-voice-notes"> <div class="voice-recording-wrapper" data-handle="comment"> <div class="x-hidden js_voice-processing-message"> <div class="svg-container mr5" style="width:16px; height:16px; "> <?xml version="1.0" encoding="iso-8859-1"?> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve"> <path style="fill:#2196F3;" d="M245.333,0C109.839,0,0,109.839,0,245.333s109.839,245.333,245.333,245.333 | |
| s245.333-109.839,245.333-245.333C490.514,109.903,380.764,0.153,245.333,0z"/> <path style="fill:#FAFAFA;" d="M267.968,82.219c-12.496-12.492-32.752-12.492-45.248,0L104.533,200.533 | |
| c-18.889,18.894-18.889,49.522,0,68.416c19.139,18.289,49.277,18.289,68.416,0l19.2-19.2v123.584 | |
| c0,29.455,23.878,53.333,53.333,53.333c29.455,0,53.333-23.878,53.333-53.333V249.749l19.2,19.2 | |
| c19.139,18.289,49.277,18.289,68.416,0c18.889-18.894,18.889-49.522,0-68.416L267.968,82.219z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg> </div> Processing<span class="loading-dots"></span> </div> <div class="x-hidden js_voice-success-message"> <div class="svg-container mr5" style="width:16px; height:16px; "> <svg height="512pt" viewBox="0 -21 512.00533 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m306.582031 317.25c-12.074219 12.097656-28.160156 18.753906-45.25 18.753906-17.085937 0-33.171875-6.65625-45.246093-18.753906l-90.667969-90.664062c-12.09375-12.078126-18.75-28.160157-18.75-45.25 0-17.089844 6.65625-33.171876 18.75-45.246094 12.074219-12.097656 28.160156-18.753906 45.25-18.753906 17.085937 0 33.171875 6.65625 45.246093 18.753906l45.417969 45.394531 125.378907-125.375c-40.960938-34.921875-93.996094-56.10546875-152.042969-56.10546875-129.601563 0-234.667969 105.06640575-234.667969 234.66406275 0 129.601562 105.066406 234.667969 234.667969 234.667969 129.597656 0 234.664062-105.066407 234.664062-234.667969 0-24.253907-3.6875-47.636719-10.515625-69.652344zm0 0" fill="#4caf50"/><path d="m261.332031 293.335938c-5.460937 0-10.921875-2.089844-15.082031-6.25l-90.664062-90.667969c-8.34375-8.339844-8.34375-21.824219 0-30.164063 8.339843-8.34375 21.820312-8.34375 30.164062 0l75.582031 75.582032 214.253907-214.25c8.339843-8.339844 21.820312-8.339844 30.164062 0 8.339844 8.34375 8.339844 21.824218 0 30.167968l-229.335938 229.332032c-4.15625 4.160156-9.621093 6.25-15.082031 6.25zm0 0" fill="#2196f3"/></svg> </div> Voice note recorded successfully | |
| <div class="float-right"> <button type="button" class="close js_voice-remove"> <span>×</span> </button> </div> </div> <div class="btn-voice-start js_voice-start"> <i class="fas fa-microphone mr5"></i>Record | |
| </div> <div class="btn-voice-stop js_voice-stop" style="display: none"> <i class="far fa-stop-circle mr5"></i>Recording <span class="js_voice-timer">00:00</span> </div> </div> </div> <div class="comment-attachments attachments clearfix x-hidden"> <ul> <li class="loading"> <div class="progress x-progress"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div> </li> </ul> </div> </div> </div> <div class="pb10 text-center js_comment-disabled-msg x-hidden"> | |
| Commenting has been turned off for this post. | |
| </div> <div class="text-center x-hidden js_comments-filter-loader"> <div class="loader loader_large"></div> </div> <ul class="js_comments "> </ul> </div> </div> </div> </li> <li> <div class="post | |
| " data-id="5"> <div class="post-body"> <div class="post-header"> <div class="post-avatar"> <a class="post-avatar-picture" href="https://sitedomain.tld/sngine" style="background-image:url(https://avatars.githubusercontent.com/u/65714156?s=200&v=4);"> </a> <i class="fa fa-circle online-dot"></i> </div> <div class="post-meta"> <span class="js_user-popover" data-type="user" data-uid="2"> <a class="post-author" href="https://sitedomain.tld/sngine">The Users Name</a> </span> <i data-toggle="tooltip" data-placement="top" title='Verified User' class="fa fa-check-circle fa-fw verified-badge"></i> <span class="post-title"> | |
| updated the cover photo | |
| </span> <div class="post-time"> <a href="https://sitedomain.tld/posts/5" class="js_moment" data-time="2021-02-10 07:19:36">2021-02-10 07:19:36</a> | |
| - | |
| <div class="btn-group" data-toggle="tooltip" data-placement="top" data-value="public" title='Shared with: Public'> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" data-display="static"> <i class="btn-group-icon fa fa-globe"></i> </button> <div class="dropdown-menu dropdown-menu-left"> <div class="dropdown-item pointer js_edit-privacy" data-title='Shared with: Public' data-value="public"> <i class="fa fa-globe"></i> Public | |
| </div> <div class="dropdown-item pointer js_edit-privacy" data-title='Shared with: Friends' data-value="friends"> <i class="fa fa-users"></i> Friends | |
| </div> <div class="dropdown-item pointer js_edit-privacy" data-title='Shared with: Only Me' data-value="me"> <i class="fa fa-lock"></i> Only Me | |
| </div> </div> </div> </div> </div> </div> <div class="post-replace"> <div class="post-text js_readmore" dir="auto"></div> <div class="post-text-translation x-hidden" dir="auto"></div> <div class="post-text-plain x-hidden"></div> </div> <div class="mt10 clearfix"> <div class="pg_wrapper"> <div class="pg_1x "> <a href="https://sitedomain.tld/photos/5" class="js_lightbox" data-id="5" data-image="https://user-images.githubusercontent.com/1982011/108692803-a8276980-752f-11eb-9381-c12d1fad0823.png" data-context="album"> <img src="https://user-images.githubusercontent.com/1982011/108692803-a8276980-752f-11eb-9381-c12d1fad0823.png"> </a> </div> </div> </div> <div class="post-stats clearfix"> <span class="float-right"> <span class="pointer js_comments-toggle"> <i class="fa fa-comments"></i> 0 Comments | |
| </span> <span class="pointer ml10 x-hidden" data-toggle="modal" data-url="posts/who_shares.php?post_id=5"> <i class="fa fa-share"></i> 0 Shares | |
| </span> </span> </div> </div> <div class="post-footer x-hidden"> <div class="post-comments"> <div class="comment js_comment-form " data-handle="post" data-id="5"> <div class="comment-avatar"> <a class="comment-avatar-picture" href="https://sitedomain.tld/sngine" style="background-image:url(https://avatars.githubusercontent.com/u/65714156?s=200&v=4);"> </a> </div> <div class="comment-data"> <div class="x-form comment-form"> <textarea dir="auto" class="js_autosize js_mention js_post-comment" rows="1" placeholder='Write a comment'></textarea> <ul class="x-form-tools clearfix"> <li class="x-form-tools-post js_post-comment"> <i class="far fa-paper-plane fa-lg fa-fw"></i> </li> <li class="x-form-tools-attach"> <i class="far fa-image fa-lg fa-fw js_x-uploader" data-handle="comment"></i> </li> <li class="x-form-tools-emoji js_emoji-menu-toggle"> <i class="far fa-smile-wink fa-lg fa-fw"></i> </li> </ul> </div> <div class="comment-voice-notes"> <div class="voice-recording-wrapper" data-handle="comment"> <div class="x-hidden js_voice-processing-message"> <div class="svg-container mr5" style="width:16px; height:16px; "> <?xml version="1.0" encoding="iso-8859-1"?> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve"> <path style="fill:#2196F3;" d="M245.333,0C109.839,0,0,109.839,0,245.333s109.839,245.333,245.333,245.333 | |
| s245.333-109.839,245.333-245.333C490.514,109.903,380.764,0.153,245.333,0z"/> <path style="fill:#FAFAFA;" d="M267.968,82.219c-12.496-12.492-32.752-12.492-45.248,0L104.533,200.533 | |
| c-18.889,18.894-18.889,49.522,0,68.416c19.139,18.289,49.277,18.289,68.416,0l19.2-19.2v123.584 | |
| c0,29.455,23.878,53.333,53.333,53.333c29.455,0,53.333-23.878,53.333-53.333V249.749l19.2,19.2 | |
| c19.139,18.289,49.277,18.289,68.416,0c18.889-18.894,18.889-49.522,0-68.416L267.968,82.219z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg> </div> Processing<span class="loading-dots"></span> </div> <div class="x-hidden js_voice-success-message"> <div class="svg-container mr5" style="width:16px; height:16px; "> <svg height="512pt" viewBox="0 -21 512.00533 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m306.582031 317.25c-12.074219 12.097656-28.160156 18.753906-45.25 18.753906-17.085937 0-33.171875-6.65625-45.246093-18.753906l-90.667969-90.664062c-12.09375-12.078126-18.75-28.160157-18.75-45.25 0-17.089844 6.65625-33.171876 18.75-45.246094 12.074219-12.097656 28.160156-18.753906 45.25-18.753906 17.085937 0 33.171875 6.65625 45.246093 18.753906l45.417969 45.394531 125.378907-125.375c-40.960938-34.921875-93.996094-56.10546875-152.042969-56.10546875-129.601563 0-234.667969 105.06640575-234.667969 234.66406275 0 129.601562 105.066406 234.667969 234.667969 234.667969 129.597656 0 234.664062-105.066407 234.664062-234.667969 0-24.253907-3.6875-47.636719-10.515625-69.652344zm0 0" fill="#4caf50"/><path d="m261.332031 293.335938c-5.460937 0-10.921875-2.089844-15.082031-6.25l-90.664062-90.667969c-8.34375-8.339844-8.34375-21.824219 0-30.164063 8.339843-8.34375 21.820312-8.34375 30.164062 0l75.582031 75.582032 214.253907-214.25c8.339843-8.339844 21.820312-8.339844 30.164062 0 8.339844 8.34375 8.339844 21.824218 0 30.167968l-229.335938 229.332032c-4.15625 4.160156-9.621093 6.25-15.082031 6.25zm0 0" fill="#2196f3"/></svg> </div> Voice note recorded successfully | |
| <div class="float-right"> <button type="button" class="close js_voice-remove"> <span>×</span> </button> </div> </div> <div class="btn-voice-start js_voice-start"> <i class="fas fa-microphone mr5"></i>Record | |
| </div> <div class="btn-voice-stop js_voice-stop" style="display: none"> <i class="far fa-stop-circle mr5"></i>Recording <span class="js_voice-timer">00:00</span> </div> </div> </div> <div class="comment-attachments attachments clearfix x-hidden"> <ul> <li class="loading"> <div class="progress x-progress"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div> </li> </ul> </div> </div> </div> <div class="pb10 text-center js_comment-disabled-msg x-hidden"> | |
| Commenting has been turned off for this post. | |
| </div> <div class="text-center x-hidden js_comments-filter-loader"> <div class="loader loader_large"></div> </div> <ul class="js_comments "> </ul> </div> </div> </div> </li> </ul> </div> </div> </div> <div class="container"> <div class="footer text-center"> | |
| © 2021 Site Name | |
| </div> </div> </body> </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment