dashboard.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. html, body {
  2. height: 100%;
  3. }
  4. body {
  5. font-size: .875rem;
  6. }
  7. body.login-page {
  8. display: flex;
  9. align-items: center;
  10. background-color: #f5f5f5;
  11. }
  12. .feather {
  13. width: 16px;
  14. height: 16px;
  15. }
  16. /*
  17. * Sidebar
  18. */
  19. .sidebar {
  20. position: fixed;
  21. top: 0;
  22. bottom: 0;
  23. left: 0;
  24. z-index: 100; /* Behind the navbar */
  25. padding: 0; /* Height of navbar */
  26. box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  27. }
  28. @media (max-width: 767.98px) {
  29. .sidebar {
  30. /* top: 5rem; */
  31. }
  32. }
  33. .sidebar-sticky {
  34. height: calc(100vh - 48px);
  35. overflow-x: hidden;
  36. overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  37. }
  38. .sidebar .nav-link {
  39. font-weight: 500;
  40. color: #333;
  41. }
  42. .sidebar .nav-link .feather {
  43. margin-right: 4px;
  44. color: #727272;
  45. }
  46. .sidebar .nav-link.active {
  47. color: #2470dc;
  48. }
  49. .sidebar .nav-link:hover {
  50. color: #000000;
  51. }
  52. .sidebar .nav-link:hover .feather,
  53. .sidebar .nav-link.active .feather {
  54. color: inherit;
  55. }
  56. .sidebar-heading {
  57. font-size: .75rem;
  58. }
  59. /*
  60. * Navbar
  61. */
  62. .navbar-brand {
  63. padding-top: .75rem;
  64. padding-bottom: .75rem;
  65. background-color: rgba(0, 0, 0, .25);
  66. box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
  67. }
  68. .navbar .navbar-toggler {
  69. top: .25rem;
  70. right: 1rem;
  71. }
  72. .navbar .form-control {
  73. padding: .75rem 1rem;
  74. }
  75. .form-control-dark {
  76. color: #fff;
  77. background-color: rgba(255, 255, 255, .1);
  78. border-color: rgba(255, 255, 255, .1);
  79. }
  80. .form-control-dark:focus {
  81. border-color: transparent;
  82. box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
  83. }
  84. .bd-placeholder-img {
  85. font-size: 1.125rem;
  86. text-anchor: middle;
  87. -webkit-user-select: none;
  88. -moz-user-select: none;
  89. user-select: none;
  90. }
  91. @media (min-width: 768px) {
  92. .bd-placeholder-img-lg {
  93. font-size: 3.5rem;
  94. }
  95. }
  96. .b-example-divider {
  97. height: 3rem;
  98. background-color: rgba(0, 0, 0, .1);
  99. border: solid rgba(0, 0, 0, .15);
  100. border-width: 1px 0;
  101. box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  102. }
  103. .b-example-vr {
  104. flex-shrink: 0;
  105. width: 1.5rem;
  106. height: 100vh;
  107. }
  108. .bi {
  109. vertical-align: -.125em;
  110. fill: currentColor;
  111. }
  112. .nav-scroller {
  113. position: relative;
  114. z-index: 2;
  115. height: 2.75rem;
  116. overflow-y: hidden;
  117. }
  118. .nav-scroller .nav {
  119. display: flex;
  120. flex-wrap: nowrap;
  121. padding-bottom: 1rem;
  122. margin-top: -1px;
  123. overflow-x: auto;
  124. text-align: center;
  125. white-space: nowrap;
  126. -webkit-overflow-scrolling: touch;
  127. }
  128. /* Login page */
  129. .login-form {
  130. width: 100%;
  131. max-width: 330px;
  132. padding: 15px 15px 50px 15px;
  133. margin: auto;
  134. }
  135. .login-form .form-floating:focus-within {
  136. z-index: 2;
  137. }
  138. .login-form input[type="text"] {
  139. border-bottom-right-radius: 0;
  140. border-bottom-left-radius: 0;
  141. }
  142. .login-form input[type="password"] {
  143. margin-bottom: 10px;
  144. border-top-left-radius: 0;
  145. border-top-right-radius: 0;
  146. }