custom.css 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. ul.standard-list {
  2. margin-left: 2em;
  3. }
  4. ul.standard-list li {
  5. list-style: disc;
  6. }
  7. /* Form */
  8. .form-control {
  9. padding: 6px 14px;
  10. font-size: 14px;
  11. font-weight: 300;
  12. color: var(--black);
  13. line-height: 1em;
  14. }
  15. .form-control:focus {
  16. color: var(--black);
  17. }
  18. .form-control::placeholder {
  19. color: var(--black);
  20. opacity: 0.75;
  21. }
  22. .theme-form input[type="text"].form-control.input-white,
  23. .theme-form input[type="email"].form-control.input-white,
  24. .theme-form input[type="search"].form-control.input-white,
  25. .theme-form input[type="password"].form-control.input-white,
  26. .theme-form input[type="number"].form-control.input-white,
  27. .theme-form input[type="tel"].form-control.input-white,
  28. .theme-form input[type="date"].form-control.input-white,
  29. .theme-form input[type="datetime-local"].form-control.input-white,
  30. .theme-form input[type="time"].form-control.input-white,
  31. .theme-form input[type="datetime-local"].form-control.input-white,
  32. .theme-form input[type="month"].form-control.input-white,
  33. .theme-form input[type="week"].form-control.input-white,
  34. .theme-form input[type="url"].form-control.input-white,
  35. .theme-form input[type="file"].form-control.input-white,
  36. .theme-form textarea.form-control.input-white,
  37. .theme-form select.form-control.input-white {
  38. color: var(--white);
  39. background-color: transparent;
  40. border-color: var(--white);
  41. box-shadow: none;
  42. }
  43. .theme-form .form-control.input-white::placeholder {
  44. color: var(--white);
  45. opacity: 0.75;
  46. }
  47. .form-control::placeholder {
  48. color: currentColor;
  49. opacity: 1;
  50. }
  51. .form-control::file-selector-button {
  52. padding-right: 30px;
  53. border-radius: var(--bs-border-radius);
  54. border: 1px solid;
  55. border-radius: var(--bs-border-radius);
  56. display: inline-block;
  57. margin-left: -0.74rem;
  58. scale: 1.06;
  59. height: 33px;
  60. }
  61. .form-check-input:checked {
  62. background-color: var(--theme-default);
  63. border-color: var(--white);
  64. }
  65. .form-wizard .step {
  66. height: 8px;
  67. width: 8px;
  68. background-color: var(--theme-tertiary);
  69. border-radius: 8px;
  70. will-change: width;
  71. transition: width 0.5s ease;
  72. }
  73. .form-wizard .step.active {
  74. width: 24px;
  75. }
  76. .form-wizard .step.finish {
  77. background-color: var(--theme-tertiary);
  78. }
  79. a#prevBtn {
  80. position: absolute;
  81. font-size: 25px;
  82. }
  83. /* END - Form */
  84. /* Buttons */
  85. .btn {
  86. text-transform: uppercase;
  87. font-size: 16px;
  88. }
  89. .btn:focus {
  90. color: var(--bs-btn-hover-color);
  91. }
  92. .btn-secondary {
  93. background-color: var(--theme-secondary);
  94. border: 1px solid var(--theme-secondary);
  95. color: var(--theme-default);
  96. }
  97. .btn-secondary:hover,
  98. .btn-secondary:focus,
  99. .btn-secondary.active,
  100. .btn-secondary:active:focus,
  101. .btn-secondary.show {
  102. background-color: var(--theme-primary);
  103. }
  104. .btn-medium {
  105. width: 110px;
  106. max-width: 100%;
  107. }
  108. .btn-large {
  109. width: 200px;
  110. max-width: 100%;
  111. }
  112. /* END - Buttons */
  113. .badge {
  114. pointer-events: none;
  115. }
  116. .text-underline {
  117. text-decoration: underline !important;
  118. }
  119. /* Frontend */
  120. .login-card,
  121. .registration-card,
  122. .onboarding-card {
  123. min-height: 100vh;
  124. display: flex;
  125. align-items: center;
  126. justify-content: center;
  127. margin: 0 auto;
  128. padding: 30px 12px;
  129. background: none;
  130. background-color: var(--bs-body-bg);
  131. }
  132. .registration-card,
  133. .onboarding-card {
  134. background-color: var(--primary-color);
  135. }
  136. .login-card .login-main,
  137. .registration-card .registration-main,
  138. .onboarding-card .onboarding-main {
  139. max-width: 650px;
  140. width: calc(100dvw - 15px);
  141. padding: 80px 40px;
  142. border-radius: 40px;
  143. box-shadow: 0 0 37px rgba(0, 0, 0, 0.05);
  144. margin: 0 auto;
  145. background-color: var(--bs-body-bg);
  146. min-height: 700px;
  147. }
  148. .registration-card .registration-main,
  149. .onboarding-card .onboarding-main {
  150. max-width: 1075px;
  151. background-color: var(--bs-body-bg);
  152. }
  153. .login-card .login-main .login-inner {
  154. max-width: 422px;
  155. }
  156. .registration-card .registration-main .registration-inner {
  157. max-width: 860px;
  158. }
  159. .onboarding-card .onboarding-main .onboarding-inner {
  160. max-width: 690px;
  161. }
  162. .login-card .login-main .login-inner .form-logo,
  163. .registration-card .registration-main .registration-inner .form-logo,
  164. .onboarding-card .onboarding-main .onboarding-inner .form-logo {
  165. max-width: min(330px, 100%);
  166. }
  167. .login-card .login-main .theme-form label,
  168. .registration-card .registration-main .theme-form label {
  169. font-size: 16px;
  170. font-weight: 600;
  171. }
  172. .onboarding-card .onboarding-main .theme-form label {
  173. font-size: 16px;
  174. font-weight: 400;
  175. }
  176. .login-card .login-main .theme-form input::-webkit-input-placeholder {
  177. color: inherit;
  178. }
  179. .login-card .login-main .theme-form .form-group {
  180. margin-bottom: 0;
  181. }
  182. .show-hide span {
  183. cursor: pointer;
  184. font-size: 18px;
  185. color: var(--theme-default);
  186. font-family: "iconly" !important;
  187. speak: never;
  188. font-style: normal;
  189. font-variant: normal;
  190. text-transform: none;
  191. font-weight: normal;
  192. -webkit-font-smoothing: antialiased;
  193. -moz-osx-font-smoothing: grayscale;
  194. font-weight: 300;
  195. }
  196. .show-hide span.show:before {
  197. content: "\e950";
  198. }
  199. .show-hide span:before {
  200. content: "\e932";
  201. }
  202. .login-card .login-main .theme-form .show-hide,
  203. .registration-card .registration-main .theme-form .show-hide,
  204. .onboarding-card .onboarding-main .theme-form .show-hide {
  205. /* top: 50%; */
  206. top: 20px;
  207. }
  208. .login-card input[type="password"] {
  209. padding: 6px 60px 6px 14px !important;
  210. }
  211. .theme-form input[type="text"],
  212. .theme-form input[type="email"],
  213. .theme-form input[type="search"],
  214. .theme-form input[type="password"],
  215. .theme-form input[type="number"],
  216. .theme-form input[type="tel"],
  217. .theme-form input[type="date"],
  218. .theme-form input[type="datetime-local"],
  219. .theme-form input[type="time"],
  220. .theme-form input[type="datetime-local"],
  221. .theme-form input[type="month"],
  222. .theme-form input[type="week"],
  223. .theme-form input[type="url"],
  224. .theme-form input[type="file"],
  225. .theme-form textarea,
  226. .theme-form select {
  227. border-color: var(--border-color);
  228. background-color: transparent;
  229. font-size: 14px;
  230. padding: 6px 14px;
  231. box-shadow: none;
  232. font-weight: 300;
  233. height: 35px;
  234. }
  235. @media (max-width: 991.98px) {
  236. .login-card .login-main {
  237. width: 550px;
  238. }
  239. }
  240. @media (max-width: 575.98px) {
  241. .login-card .login-main .theme-form .form-group {
  242. margin-bottom: 0;
  243. }
  244. }
  245. /* END - Frontend */
  246. /* sidebar */
  247. .page-sidebar {
  248. margin-top: 83px;
  249. background: var(--theme-default);
  250. }
  251. .page-sidebar .sidebar-menu::-webkit-scrollbar {
  252. width: 5px;
  253. height: 7px;
  254. border-color: var(--theme-default);
  255. }
  256. .page-sidebar .sidebar-menu::-webkit-scrollbar-thumb {
  257. background-color: var(--white);
  258. border-radius: 10px;
  259. }
  260. .page-sidebar .sidebar-menu::-webkit-scrollbar-track {
  261. background: var(--theme-default);
  262. border-color: var(--theme-default);
  263. }
  264. .simplebar-wrapper {
  265. width: 100%;
  266. }
  267. .page-wrapper.compact-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .simplebar-wrapper .simplebar-content {
  268. gap: 10px;
  269. }
  270. .sidebar-menu {
  271. padding: 15px;
  272. }
  273. .page-sidebar .sidebar-menu .sidebar-list {
  274. border: none;
  275. }
  276. .page-sidebar .sidebar-submenu {
  277. margin-left: 55px;
  278. margin-bottom: 20px;
  279. border-left: 1px solid var(--white);
  280. }
  281. .page-sidebar .sidebar-submenu li {
  282. list-style-type: none;
  283. }
  284. .page-sidebar .sidebar-submenu a {
  285. padding-left: 4px;
  286. color: var(--white);
  287. font-size: 14px;
  288. font-weight: 300;
  289. }
  290. .page-sidebar .sidebar-submenu a::before {
  291. display: none;
  292. }
  293. .sidebar-menu .sidebar-list:hover .sidebar-link,
  294. .sidebar-menu .sidebar-list .sidebar-link.active {
  295. background: transparent;
  296. color: var(--white);
  297. border: none;
  298. }
  299. .page-sidebar .sidebar-menu .sidebar-list:has(.active) {
  300. background-color: var(--color-lilla);
  301. border-radius: 10px;
  302. color: var(--white);
  303. }
  304. .page-sidebar .sidebar-submenu:has(.active) {
  305. display: block;
  306. }
  307. .sidebar-menu .sidebar-list:hover .sidebar-link i,
  308. .sidebar-menu .sidebar-list:hover .sidebar-link a,
  309. .sidebar-menu .sidebar-list:hover .sidebar-link span{
  310. color: var(--white);
  311. }
  312. .sidebar-menu .sidebar-list .sidebar-link {
  313. color: var(--white);
  314. font-size: 16px;
  315. font-weight: 400;
  316. }
  317. .sidebar-menu .sidebar-list .sidebar-link .main-icon {
  318. margin-left: 0;
  319. margin-right: 15px;
  320. }
  321. .sidebar-menu .sidebar-list .sidebar-link {
  322. background-color: transparent;
  323. color: var(--white);
  324. border-radius: unset;
  325. font-size: 16px;
  326. font-weight: 300;
  327. }
  328. /* END - sidebar */
  329. .row.w-100 {
  330. width: calc(100% + var(--bs-gutter-x)) !important;
  331. }
  332. .notification-icon {
  333. display: flex;
  334. width: 36px;
  335. height: 36px;
  336. justify-content: center;
  337. align-items: center;
  338. border: 1px solid;
  339. border-radius: 100%;
  340. cursor: pointer;
  341. color: var(--theme-default);
  342. }
  343. /* Content */
  344. .page-wrapper .page-body-wrapper .page-body {
  345. min-height: calc(100dvh - 83px);
  346. }