tailwind.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. /* tailwind source */
  2. @tailwind base;
  3. @tailwind components;
  4. @tailwind utilities;
  5. @layer utilities {
  6. .animation-delay-2000 {
  7. animation-delay: 2s;
  8. }
  9. .animation-delay-4000 {
  10. animation-delay: 4s;
  11. }
  12. }
  13. @layer components {
  14. /* Defaults */
  15. .bx-artificer .bx-def-box-sizing {
  16. @apply box-border;
  17. }
  18. .bx-artificer .bx-def-align-center {
  19. @apply flex items-center justify-center !important;
  20. }
  21. .bx-artificer .bx-def-valign-center {
  22. @apply flex items-center !important;
  23. }
  24. /* Margins and Paddings */
  25. .bx-artificer .bx-def-centered {
  26. @apply mx-auto;
  27. }
  28. .bx-artificer .bx-def-margin {
  29. @apply m-4;
  30. }
  31. .bx-artificer .bx-def-margin-left {
  32. @apply ml-4;
  33. }
  34. .bx-artificer .bx-def-margin-left-auto {
  35. @apply ml-4 first:ml-0;
  36. }
  37. .bx-artificer .bx-def-margin-right {
  38. @apply mr-4;
  39. }
  40. .bx-artificer .bx-def-margin-top {
  41. @apply mt-4;
  42. }
  43. .bx-artificer .bx-def-margin-top-auto {
  44. @apply mt-4 first:mt-0;
  45. }
  46. .bx-artificer .bx-def-margin-bottom {
  47. @apply mb-4;
  48. }
  49. .bx-artificer .bx-def-margin-sec {
  50. @apply m-2;
  51. }
  52. .bx-artificer .bx-def-margin-sec-left {
  53. @apply ml-2;
  54. }
  55. .bx-artificer .bx-def-margin-sec-left-auto {
  56. @apply ml-2 first:ml-0;
  57. }
  58. .bx-artificer .bx-def-margin-sec-right {
  59. @apply mr-2;
  60. }
  61. .bx-artificer .bx-def-margin-sec-top {
  62. @apply mt-2;
  63. }
  64. .bx-artificer .bx-def-margin-sec-top-auto {
  65. @apply mt-2 first:mt-0;
  66. }
  67. .bx-artificer .bx-def-margin-sec-bottom {
  68. @apply mb-2;
  69. }
  70. .bx-artificer .bx-def-margin-thd {
  71. @apply m-1;
  72. }
  73. .bx-artificer .bx-def-margin-thd-left {
  74. @apply ml-1;
  75. }
  76. .bx-artificer .bx-def-margin-thd-left-auto {
  77. @apply ml-1 first:ml-0;
  78. }
  79. .bx-artificer .bx-def-margin-thd-right {
  80. @apply mr-1;
  81. }
  82. .bx-artificer .bx-def-margin-thd-top {
  83. @apply mt-1;
  84. }
  85. .bx-artificer .bx-def-margin-thd-top-auto {
  86. @apply mt-1 first:mt-0;
  87. }
  88. .bx-artificer .bx-def-margin-thd-bottom {
  89. @apply mb-1;
  90. }
  91. .bx-artificer .bx-def-padding {
  92. @apply p-4;
  93. }
  94. .bx-artificer .bx-def-padding-left {
  95. @apply pl-4;
  96. }
  97. .bx-artificer .bx-def-padding-left-auto {
  98. @apply pl-4 first:pl-0;
  99. }
  100. .bx-artificer .bx-def-padding-right {
  101. @apply pr-4;
  102. }
  103. .bx-artificer .bx-def-padding-top {
  104. @apply pt-4;
  105. }
  106. .bx-artificer .bx-def-padding-top-auto {
  107. @apply pt-4 first:pt-0;
  108. }
  109. .bx-artificer .bx-def-padding-bottom {
  110. @apply pb-4;
  111. }
  112. .bx-artificer .bx-def-padding-sec {
  113. @apply p-2;
  114. }
  115. .bx-artificer .bx-def-padding-sec-left {
  116. @apply pl-2;
  117. }
  118. .bx-artificer .bx-def-padding-sec-left-auto {
  119. @apply pl-2 first:pl-0;
  120. }
  121. .bx-artificer .bx-def-padding-sec-right {
  122. @apply pr-2;
  123. }
  124. .bx-artificer .bx-def-padding-sec-top {
  125. @apply pt-2;
  126. }
  127. .bx-artificer .bx-def-padding-sec-top-auto {
  128. @apply pt-2 first:pt-0;
  129. }
  130. .bx-artificer .bx-def-padding-sec-bottom {
  131. @apply pb-2;
  132. }
  133. .bx-artificer .bx-def-padding-thd {
  134. @apply p-1;
  135. }
  136. .bx-artificer .bx-def-padding-thd-left {
  137. @apply pl-1;
  138. }
  139. .bx-artificer .bx-def-padding-thd-left-auto {
  140. @apply pl-1 first:pl-0;
  141. }
  142. .bx-artificer .bx-def-padding-thd-right {
  143. @apply pr-1;
  144. }
  145. .bx-artificer .bx-def-padding-thd-top {
  146. @apply pt-1;
  147. }
  148. .bx-artificer .bx-def-padding-thd-top-auto {
  149. @apply pt-1 first:pt-0;
  150. }
  151. .bx-artificer .bx-def-padding-thd-bottom {
  152. @apply pb-1;
  153. }
  154. /* Fonts */
  155. .bx-artificer .bx-def-font,
  156. .bx-artificer .bx-def-font-inputs {
  157. @apply font-inter;
  158. }
  159. .bx-artificer .bx-def-font-grayed {
  160. @apply text-gray-700 dark:text-gray-500 text-opacity-60;
  161. }
  162. .bx-artificer .bx-def-a-colored {
  163. @apply no-underline text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
  164. }
  165. .bx-artificer .bx-def-font-small {
  166. @apply text-sm;
  167. }
  168. .bx-artificer .bx-def-font-middle {
  169. @apply text-lg;
  170. }
  171. .bx-artificer .bx-def-font-large {
  172. @apply text-xl;
  173. }
  174. .bx-artificer h3,
  175. .bx-artificer .bx-def-font-h3 {
  176. @apply text-2xl;
  177. }
  178. .bx-artificer h2,
  179. .bx-artificer .bx-def-font-h2 {
  180. @apply text-3xl;
  181. }
  182. .bx-artificer h1,
  183. .bx-artificer .bx-def-font-h1 {
  184. @apply text-4xl;
  185. }
  186. /* Common elements: Blocks, Boxes, etc. */
  187. .bx-artificer .bx-def-color-bg-block {
  188. @apply bg-gray-50 dark:bg-gray-900;
  189. }
  190. .bx-artificer .bx-def-color-bg-box {
  191. @apply bg-white dark:bg-gray-800;
  192. }
  193. /* Common Elements: HR */
  194. .bx-artificer .bx-def-hr {
  195. @apply m-0 p-0 border-t border-gray-200 dark:border-gray-700;
  196. }
  197. /* Common Elements: Labels */
  198. .bx-artificer .bx-def-label {
  199. @apply min-w-6 px-4 py-1 bg-gray-500 hover:bg-gray-600 dark:hover:bg-gray-400 text-gray-800 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 text-sm font-normal rounded-full box-border;
  200. }
  201. /* Common Elements: Alerts */
  202. .bx-def-unit-alert,
  203. .bx-def-unit-alert-small,
  204. .bx-def-unit-alert-middle {
  205. @apply block absolute top-0 -right-0.5 text-center text-white;
  206. }
  207. .bx-def-unit-alert {
  208. @apply h-4 p-1 leading-4 rounded-full text-xs;
  209. min-width: 1rem;
  210. }
  211. /* Common elements: Buttons */
  212. .bx-artificer .bx-btn {
  213. @apply relative inline-flex justify-center items-center px-4 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 dark:hover:text-white hover:text-gray-800 whitespace-nowrap bg-white dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-md shadow-sm hover:shadow-md cursor-pointer;
  214. }
  215. .bx-artificer .bx-btn i,
  216. .bx-artificer .bx-btn u {
  217. @apply inline-block align-middle;
  218. }
  219. .bx-artificer .bx-btn i,
  220. .bx-artificer .bx-btn img {
  221. @apply w-5 h-5 leading-5 text-gray-600 dark:text-gray-300;
  222. }
  223. .bx-artificer .bx-btn:hover i,
  224. .bx-artificer .bx-btn:hover img {
  225. @apply text-gray-800 dark:text-gray-100;
  226. }
  227. .bx-artificer .bx-btn i {
  228. @apply text-center;
  229. }
  230. .bx-artificer .bx-btn u {
  231. @apply ml-2 first:ml-0 no-underline;
  232. }
  233. .bx-artificer .bx-btn.bx-btn-primary {
  234. @apply border-transparent text-white hover:text-white dark:hover:text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
  235. }
  236. .bx-artificer .bx-btn.bx-btn-primary i,
  237. .bx-artificer .bx-btn.bx-btn-primary img {
  238. @apply text-gray-300;
  239. }
  240. .bx-artificer .bx-btn.bx-btn-primary:hover i,
  241. .bx-artificer .bx-btn.bx-btn-primary:hover img {
  242. @apply text-gray-100;
  243. }
  244. .bx-artificer .bx-btn.bx-btn-disabled {
  245. @apply bg-gray-50 dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-400 dark:hover:text-gray-400 !important;
  246. }
  247. .bx-artificer .bx-btn.bx-btn-small {
  248. @apply py-1 text-xs;
  249. }
  250. .bx-artificer .bx-btn.bx-btn-small i,
  251. .bx-artificer .bx-btn.bx-btn-small img {
  252. @apply w-4 h-4 leading-4;
  253. }
  254. /* Common elements: Forms */
  255. .bx-artificer form {
  256. @apply text-sm font-normal text-gray-700 dark:text-gray-300;
  257. }
  258. .bx-artificer form a {
  259. @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
  260. }
  261. .bx-artificer .bx-form-value {
  262. @apply mt-1 first:mt-0;
  263. }
  264. .bx-artificer .bx-form-required,
  265. .bx-artificer .bx-form-warn {
  266. @apply text-red-400;
  267. }
  268. /* Common elements: Popups */
  269. .bx-artificer .bx-popup-wrapper {
  270. @apply overflow-visible;
  271. }
  272. .bx-artificer .bx-popup-applied {
  273. @apply rounded-lg;
  274. }
  275. .bx-artificer .bx-popup-responsive:not(.bx-popup-full-screen):not(.bx-popup-menu) {
  276. @apply w-full md:w-auto;
  277. }
  278. .bx-artificer .bx-popup-full-screen {
  279. @apply w-full;
  280. }
  281. .bx-artificer .bx-popup-width {
  282. @apply w-full md:w-128;
  283. }
  284. .bx-artificer .bx-popup-full-screen .bx-popup-width {
  285. @apply w-full md:w-full;
  286. }
  287. .bx-artificer .bx-popup-fog {
  288. @apply bg-gray-600 opacity-75;
  289. }
  290. /* Common elements: Menus */
  291. /* Horizontal menu */
  292. .bx-artificer .bx-menu-hor li.bx-menu-tab-active a,
  293. .bx-artificer .bx-menu-custom-hor li.bx-menu-tab-active a {
  294. @apply text-gray-700 dark:text-gray-200 font-medium;
  295. }
  296. .bx-artificer .bx-db-header .bx-menu-custom-hor li.bx-menu-tab-active a {
  297. @apply bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white;
  298. }
  299. /* Vertical menu in Popup */
  300. .bx-artificer .bx-popup .bx-menu-ver > li:hover {
  301. @apply hover:text-gray-900 dark:hover:text-gray-100;
  302. }
  303. .bx-artificer .bx-popup .bx-menu-ver > li.bx-def-color-bg-active {
  304. @apply bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white;
  305. }
  306. /* Main menu */
  307. .bx-artificer .bx-toolbar-item.bx-ti-menu .bx-menu-main .bx-menu-item.bx-menu-tab-active {
  308. @apply opacity-100 ring-1 ring-gray-200 dark:ring-gray-600 bg-gray-50 dark:bg-gray-700 shadow;
  309. }
  310. .bx-artificer .bx-toolbar-item.bx-ti-menu .bx-menu-main .bx-menu-item.bx-menu-tab-active a {
  311. @apply text-gray-900 dark:text-white;
  312. }
  313. .bx-artificer .bx-toolbar-item.bx-ti-menu .bx-menu-main .bx-popup .bx-menu-item.bx-menu-tab-active {
  314. @apply opacity-100 ring-0 bg-gray-50 dark:bg-gray-700 shadow-none;
  315. }
  316. /* Page Submenu */
  317. .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active a {
  318. @apply text-gray-900 dark:text-gray-100;
  319. }
  320. .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active .bx-mi-underline {
  321. @apply bg-blue-500 group-hover:bg-blue-500;
  322. }
  323. /* Profile Cover Actions */
  324. .bx-artificer .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline li.bx-mi-primary {
  325. @apply border-transparent text-gray-200 hover:text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
  326. }
  327. /* Common elements: Informers */
  328. .bx-artificer .bx-informer-msg a {
  329. @apply text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
  330. }
  331. .bx-artificer .bx-informer-msg-info {
  332. @apply bg-blue-50 text-blue-700;
  333. }
  334. .bx-artificer .bx-informer-msg-alert {
  335. @apply bg-yellow-50 text-yellow-700;
  336. }
  337. .bx-artificer .bx-informer-msg-error {
  338. @apply bg-red-50 text-red-700;
  339. }
  340. /* Common elements: Comments */
  341. .bx-artificer .cmt .bx-base-general-unit-meta-username {
  342. @apply text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white;
  343. }
  344. /* Modules: Timeline */
  345. .bx-artificer .bx-menu-custom-hor.bx-menu-object-bx_timeline_menu_view li.bx-menu-tab-active a {
  346. @apply bg-gray-50 dark:bg-gray-700 ring-1 ring-gray-200 dark:ring-gray-600 text-gray-900 dark:text-white shadow;
  347. }
  348. .bx-artificer .bx-tl-view.bx-tl-view-timeline .bx-tl-cnt .bx-tl-items:before {
  349. @apply bg-gray-200 dark:bg-gray-700;
  350. }
  351. }