appdark.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. // Fonts
  2. @import "fonts";
  3. @import "lib/fontawesome";
  4. // Variables
  5. @import "dark";
  6. // Bootstrap
  7. @import '~bootstrap/scss/bootstrap';
  8. @import "custom";
  9. .text-dark {
  10. color: #ADAFAE !important;
  11. }
  12. .border-left {
  13. background: #ADAFAE !important;
  14. }
  15. .border-top {
  16. border-top: 1px solid #282828 !important;
  17. }
  18. .border-bottom {
  19. border-bottom: 1px solid #282828 !important;
  20. }
  21. .btn-outline-light {
  22. border-color: #E2E8F0 !important;
  23. color: #E2E8F0 !important;
  24. }
  25. .modal-content,
  26. .card,
  27. .dropdown-menu,
  28. .bg-white,
  29. .list-group-item,
  30. .autocomplete-result-list,
  31. .postPresenterContainer,
  32. .postComponent .card-body.flex-grow-0.py-1,
  33. .postComponent .reactions,
  34. .postComponent .status-comments,
  35. .navbar-laravel {
  36. background: #000 !important;
  37. }
  38. .autocomplete-result-list {
  39. z-index: 99999;
  40. }
  41. .pill-to {
  42. background: #282828 !important;
  43. }
  44. .dropdown-item:hover,
  45. .tt-suggestion:hover,
  46. .dropdown-item:focus,
  47. .tt-suggestion:focus,
  48. .chat-msg:hover,
  49. .result-card .media:hover {
  50. background: #181818 !important;
  51. }
  52. .notification-card .contents {
  53. scrollbar-color: dark;
  54. }
  55. body, html {
  56. scrollbar-color: dark;
  57. }
  58. .modal-content,
  59. .form-control,
  60. .img-thumbnail {
  61. border: 1px solid #282828 !important;
  62. }
  63. .navbar.border-bottom {
  64. border-color: #282828 !important;
  65. }
  66. .postComponent .border-left {
  67. border-left: 0 !important;
  68. }
  69. .postComponent .card-header {
  70. border-radius: 0;
  71. }
  72. input,
  73. textarea {
  74. color: #E2E8F0 !important;
  75. background: #000 !important;
  76. }
  77. .far, .fas,
  78. .navbar-laravel .navbar-brand span,
  79. .navbar-laravel .nav-link .d-md-block,
  80. .navbar-laravel .nav-link.dropdown-toggle .far,
  81. .navbar-laravel .nav-link.dropdown-toggle::after {
  82. color: #ADAFAE !important;
  83. }
  84. .btn-outline-primary {
  85. border-color: #4A5568 !important;
  86. }
  87. .postComponent .status-comments {
  88. border-top: 1px solid #282828 !important;
  89. border-bottom: 1px solid #282828 !important;
  90. }
  91. .messages-page .card-header {
  92. border-bottom: 1px solid #282828;
  93. }
  94. hr {
  95. border-color: #282828 !important;
  96. }
  97. ::-webkit-scrollbar {
  98. width: 15px;
  99. }
  100. ::-webkit-scrollbar-track {
  101. background: #202020;
  102. border-left: 1px solid #2c2c2c;
  103. }
  104. ::-webkit-scrollbar-thumb {
  105. background: #3e3e3e;
  106. border: solid 3px #202020;
  107. border-radius: 7px;
  108. }
  109. ::-webkit-scrollbar-thumb:hover {
  110. background: white;
  111. }
  112. @import "components/filters";
  113. @import "components/typeahead";
  114. @import "components/notifications";
  115. @import '~bootstrap-vue/dist/bootstrap-vue.css';
  116. @import "moment";
  117. @import '~animate.css/animate.min.css';
  118. .border {
  119. border-color: #282828 !important;
  120. }