2
0

dashboard.css 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. body {
  2. font-size: .875rem;
  3. }
  4. .feather {
  5. width: 16px;
  6. height: 16px;
  7. vertical-align: text-bottom;
  8. }
  9. /*
  10. * Sidebar
  11. */
  12. .sidebar {
  13. position: fixed;
  14. top: 0;
  15. /* rtl:raw:
  16. right: 0;
  17. */
  18. bottom: 0;
  19. /* rtl:remove */
  20. left: 0;
  21. z-index: 100; /* Behind the navbar */
  22. padding: 48px 0 0; /* Height of navbar */
  23. box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  24. }
  25. @media (max-width: 767.98px) {
  26. .sidebar {
  27. top: 5rem;
  28. }
  29. }
  30. .sidebar-sticky {
  31. position: relative;
  32. top: 0;
  33. height: calc(100vh - 48px);
  34. padding-top: .5rem;
  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 .feather,
  50. .sidebar .nav-link.active .feather {
  51. color: inherit;
  52. }
  53. .sidebar-heading {
  54. font-size: .75rem;
  55. text-transform: uppercase;
  56. }
  57. /*
  58. * Navbar
  59. */
  60. .navbar-brand {
  61. padding-top: .75rem;
  62. padding-bottom: .75rem;
  63. font-size: 1rem;
  64. background-color: rgba(0, 0, 0, .25);
  65. box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
  66. }
  67. .navbar .navbar-toggler {
  68. top: .25rem;
  69. right: 1rem;
  70. }
  71. .navbar .form-control {
  72. padding: .75rem 1rem;
  73. border-width: 0;
  74. border-radius: 0;
  75. }
  76. .form-control-dark {
  77. color: #fff;
  78. background-color: rgba(255, 255, 255, .1);
  79. border-color: rgba(255, 255, 255, .1);
  80. }
  81. .form-control-dark:focus {
  82. border-color: transparent;
  83. box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
  84. }
  85. .toast {
  86. --bs-toast-max-width: 500px;
  87. }
  88. /* Absolute Center Spinner */
  89. #loading {
  90. position: fixed;
  91. z-index: 9999;
  92. height: 2em;
  93. width: 2em;
  94. overflow: show;
  95. margin: auto;
  96. top: 0;
  97. left: 0;
  98. bottom: 0;
  99. right: 0;
  100. }
  101. /* Transparent Overlay */
  102. #loading:before {
  103. content: '';
  104. display: block;
  105. position: fixed;
  106. top: 0;
  107. left: 0;
  108. width: 100%;
  109. height: 100%;
  110. background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
  111. background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
  112. }
  113. /* :not(:required) hides these rules from IE9 and below */
  114. #loading:not(:required) {
  115. /* hide "loading..." text */
  116. font: 0/0 a;
  117. color: transparent;
  118. text-shadow: none;
  119. background-color: transparent;
  120. border: 0;
  121. }
  122. #loading:not(:required):after {
  123. content: '';
  124. display: block;
  125. font-size: 30px;
  126. width: 1em;
  127. height: 1em;
  128. margin-top: -0.5em;
  129. -webkit-animation: spinner 150ms infinite linear;
  130. -moz-animation: spinner 150ms infinite linear;
  131. -ms-animation: spinner 150ms infinite linear;
  132. -o-animation: spinner 150ms infinite linear;
  133. animation: spinner 150ms infinite linear;
  134. border-radius: 0.5em;
  135. -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
  136. box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
  137. }
  138. /* Animation */
  139. @-webkit-keyframes spinner {
  140. 0% {
  141. -webkit-transform: rotate(0deg);
  142. -moz-transform: rotate(0deg);
  143. -ms-transform: rotate(0deg);
  144. -o-transform: rotate(0deg);
  145. transform: rotate(0deg);
  146. }
  147. 100% {
  148. -webkit-transform: rotate(360deg);
  149. -moz-transform: rotate(360deg);
  150. -ms-transform: rotate(360deg);
  151. -o-transform: rotate(360deg);
  152. transform: rotate(360deg);
  153. }
  154. }
  155. @-moz-keyframes spinner {
  156. 0% {
  157. -webkit-transform: rotate(0deg);
  158. -moz-transform: rotate(0deg);
  159. -ms-transform: rotate(0deg);
  160. -o-transform: rotate(0deg);
  161. transform: rotate(0deg);
  162. }
  163. 100% {
  164. -webkit-transform: rotate(360deg);
  165. -moz-transform: rotate(360deg);
  166. -ms-transform: rotate(360deg);
  167. -o-transform: rotate(360deg);
  168. transform: rotate(360deg);
  169. }
  170. }
  171. @-o-keyframes spinner {
  172. 0% {
  173. -webkit-transform: rotate(0deg);
  174. -moz-transform: rotate(0deg);
  175. -ms-transform: rotate(0deg);
  176. -o-transform: rotate(0deg);
  177. transform: rotate(0deg);
  178. }
  179. 100% {
  180. -webkit-transform: rotate(360deg);
  181. -moz-transform: rotate(360deg);
  182. -ms-transform: rotate(360deg);
  183. -o-transform: rotate(360deg);
  184. transform: rotate(360deg);
  185. }
  186. }
  187. @keyframes spinner {
  188. 0% {
  189. -webkit-transform: rotate(0deg);
  190. -moz-transform: rotate(0deg);
  191. -ms-transform: rotate(0deg);
  192. -o-transform: rotate(0deg);
  193. transform: rotate(0deg);
  194. }
  195. 100% {
  196. -webkit-transform: rotate(360deg);
  197. -moz-transform: rotate(360deg);
  198. -ms-transform: rotate(360deg);
  199. -o-transform: rotate(360deg);
  200. transform: rotate(360deg);
  201. }
  202. }