tailwind.css 38 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210
  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. /* Global: HTML tags */
  15. ol, ul {
  16. @apply pl-10 list-outside;
  17. }
  18. ul {
  19. @apply list-disc;
  20. }
  21. ol {
  22. @apply list-decimal;
  23. }
  24. /* Defaults */
  25. .bx-def-vanilla-html {
  26. @apply prose dark:prose-invert;
  27. @apply prose-a:text-blue-500 prose-a:font-medium prose-a:no-underline hover:prose-a:underline visited:prose-a:text-purple-500;
  28. }
  29. .bx-def-vanilla-html.bx-def-vh-sm {
  30. @apply prose-sm;
  31. }
  32. .bx-artificer .bx-menthion-link {
  33. @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
  34. }
  35. .bx-artificer .bx-def-box-sizing {
  36. @apply box-border;
  37. }
  38. .bx-artificer .bx-def-align-center {
  39. @apply flex items-center justify-center !important;
  40. }
  41. .bx-artificer .bx-def-valign-center {
  42. @apply flex items-center !important;
  43. }
  44. /* Color Palette */
  45. .bx-artificer .bx-def-color-bg-hl,
  46. .bx-artificer .bx-def-color-bg-hl-even:nth-child(even),
  47. .bx-artificer .bx-def-color-bg-hl-hover:hover {
  48. @apply bg-gray-100/50 dark:bg-gray-700/50;
  49. }
  50. .bx-artificer .col-red1 {
  51. @apply text-red-500;
  52. }
  53. .bx-artificer .bg-col-red1 {
  54. @apply bg-red-400;
  55. }
  56. .bx-artificer .col-red1-dark {
  57. @apply text-red-800;
  58. }
  59. .bx-artificer .bg-col-red1-dark {
  60. @apply bg-red-700;
  61. }
  62. .bx-artificer .col-red2 {
  63. @apply text-rose-500;
  64. }
  65. .bx-artificer .bg-col-red2 {
  66. @apply bg-rose-400;
  67. }
  68. .bx-artificer .col-red2-dark {
  69. @apply text-rose-800;
  70. }
  71. .bx-artificer .bg-col-red2-dark {
  72. @apply bg-rose-700;
  73. }
  74. .bx-artificer .col-red3 {
  75. @apply text-orange-500;
  76. }
  77. .bx-artificer .bg-col-red3 {
  78. @apply bg-orange-400;
  79. }
  80. .bx-artificer .col-red3-dark {
  81. @apply text-orange-800;
  82. }
  83. .bx-artificer .bg-col-red3-dark {
  84. @apply bg-orange-700;
  85. }
  86. .bx-artificer .col-green1 {
  87. @apply text-green-500;
  88. }
  89. .bx-artificer .bg-col-green1 {
  90. @apply bg-green-400;
  91. }
  92. .bx-artificer .col-green1-dark {
  93. @apply text-green-800;
  94. }
  95. .bx-artificer .bg-col-green1-dark {
  96. @apply bg-green-700;
  97. }
  98. .bx-artificer .col-green2 {
  99. @apply text-teal-500;
  100. }
  101. .bx-artificer .bg-col-green2 {
  102. @apply bg-teal-400;
  103. }
  104. .bx-artificer .col-green2-dark {
  105. @apply text-teal-800;
  106. }
  107. .bx-artificer .bg-col-green2-dark {
  108. @apply bg-teal-700;
  109. }
  110. .bx-artificer .col-green3 {
  111. @apply text-emerald-500;
  112. }
  113. .bx-artificer .bg-col-green3 {
  114. @apply bg-emerald-400;
  115. }
  116. .bx-artificer .col-green3-dark {
  117. @apply text-emerald-800;
  118. }
  119. .bx-artificer .bg-col-green3-dark {
  120. @apply bg-emerald-700;
  121. }
  122. .bx-artificer .col-blue1 {
  123. @apply text-blue-500;
  124. }
  125. .bx-artificer .bg-col-blue1 {
  126. @apply bg-blue-400;
  127. }
  128. .bx-artificer .col-blue1-dark {
  129. @apply text-blue-800;
  130. }
  131. .bx-artificer .bg-col-blue1-dark {
  132. @apply bg-blue-700;
  133. }
  134. .bx-artificer .col-blue2 {
  135. @apply text-purple-500;
  136. }
  137. .bx-artificer .bg-col-blue2 {
  138. @apply bg-purple-400;
  139. }
  140. .bx-artificer .col-blue2-dark {
  141. @apply text-purple-800;
  142. }
  143. .bx-artificer .bg-col-blue2-dark {
  144. @apply bg-purple-700;
  145. }
  146. .bx-artificer .col-blue3 {
  147. @apply text-sky-500;
  148. }
  149. .bx-artificer .bg-col-blue3 {
  150. @apply bg-sky-400;
  151. }
  152. .bx-artificer .col-blue3-dark {
  153. @apply text-sky-800;
  154. }
  155. .bx-artificer .bg-col-blue3-dark {
  156. @apply bg-sky-700;
  157. }
  158. .bx-artificer .col-gray {
  159. @apply text-gray-500;
  160. }
  161. .bx-artificer .bg-col-gray {
  162. @apply bg-gray-400;
  163. }
  164. .bx-artificer .col-gray-dark {
  165. @apply text-gray-800;
  166. }
  167. .bx-artificer .bg-col-gray-dark {
  168. @apply bg-gray-700;
  169. }
  170. /* Margins and Paddings */
  171. .bx-artificer .bx-def-centered {
  172. @apply mx-auto;
  173. }
  174. .bx-artificer .bx-def-margin {
  175. @apply m-4;
  176. }
  177. .bx-artificer .bx-def-margin-neg {
  178. @apply -m-4;
  179. }
  180. .bx-artificer .bx-def-margin-left {
  181. @apply ml-4;
  182. }
  183. .bx-artificer .bx-def-margin-left-auto {
  184. @apply ml-4 first:ml-0;
  185. }
  186. .bx-artificer .bx-def-margin-right {
  187. @apply mr-4;
  188. }
  189. .bx-artificer .bx-def-margin-top {
  190. @apply mt-4;
  191. }
  192. .bx-artificer .bx-def-margin-top-auto {
  193. @apply mt-4 first:mt-0;
  194. }
  195. .bx-artificer .bx-def-margin-bottom {
  196. @apply mb-4;
  197. }
  198. .bx-artificer .bx-def-margin-leftright {
  199. @apply mx-4;
  200. }
  201. .bx-artificer .bx-def-margin-leftright-neg {
  202. @apply -mx-4;
  203. }
  204. .bx-artificer .bx-def-margin-topbottom {
  205. @apply my-4;
  206. }
  207. .bx-artificer .bx-def-margin-topbottom-neg {
  208. @apply -my-4;
  209. }
  210. .bx-artificer .bx-def-margin-lefttopright {
  211. @apply mx-4 mt-4;
  212. }
  213. .bx-artificer .bx-def-margin-rightbottomleft {
  214. @apply mx-4 mb-4;
  215. }
  216. .bx-artificer .bx-def-margin-sec {
  217. @apply m-2;
  218. }
  219. .bx-artificer .bx-def-margin-sec-neg {
  220. @apply -m-2;
  221. }
  222. .bx-artificer .bx-def-margin-sec-left {
  223. @apply ml-2;
  224. }
  225. .bx-artificer .bx-def-margin-sec-left-auto {
  226. @apply ml-2 first:ml-0;
  227. }
  228. .bx-artificer .bx-def-margin-sec-right {
  229. @apply mr-2;
  230. }
  231. .bx-artificer .bx-def-margin-sec-top {
  232. @apply mt-2;
  233. }
  234. .bx-artificer .bx-def-margin-sec-top-auto {
  235. @apply mt-2 first:mt-0;
  236. }
  237. .bx-artificer .bx-def-margin-sec-bottom {
  238. @apply mb-2;
  239. }
  240. .bx-artificer .bx-def-margin-sec-bottom-neg {
  241. @apply -mb-2;
  242. }
  243. .bx-artificer .bx-def-margin-sec-leftright {
  244. @apply mx-2;
  245. }
  246. .bx-artificer .bx-def-margin-sec-leftright-neg {
  247. @apply -mx-2;
  248. }
  249. .bx-artificer .bx-def-margin-sec-lefttopright-neg {
  250. @apply -mx-2 -mt-2;
  251. }
  252. .bx-artificer .bx-def-margin-sec-topbottom {
  253. @apply my-2;
  254. }
  255. .bx-artificer .bx-def-margin-sec-topbottom-neg {
  256. @apply -my-2;
  257. }
  258. .bx-artificer .bx-def-margin-sec-lefttopright {
  259. @apply mx-2 mt-2;
  260. }
  261. .bx-artificer .bx-def-margin-sec-rightbottomleft {
  262. @apply mx-2 mb-2;
  263. }
  264. .bx-artificer .bx-def-margin-thd {
  265. @apply m-1;
  266. }
  267. .bx-artificer .bx-def-margin-thd-neg {
  268. @apply -m-1;
  269. }
  270. .bx-artificer .bx-def-margin-thd-left {
  271. @apply ml-1;
  272. }
  273. .bx-artificer .bx-def-margin-thd-left-auto {
  274. @apply ml-1 first:ml-0;
  275. }
  276. .bx-artificer .bx-def-margin-thd-right {
  277. @apply mr-1;
  278. }
  279. .bx-artificer .bx-def-margin-thd-top {
  280. @apply mt-1;
  281. }
  282. .bx-artificer .bx-def-margin-thd-top-auto {
  283. @apply mt-1 first:mt-0;
  284. }
  285. .bx-artificer .bx-def-margin-thd-bottom {
  286. @apply mb-1;
  287. }
  288. .bx-artificer .bx-def-margin-thd-leftright {
  289. @apply mx-1;
  290. }
  291. .bx-artificer .bx-def-margin-thd-leftright-neg {
  292. @apply -mx-1;
  293. }
  294. .bx-artificer .bx-def-margin-thd-topbottom {
  295. @apply my-1;
  296. }
  297. .bx-artificer .bx-def-margin-thd-topbottom-neg {
  298. @apply -my-1;
  299. }
  300. .bx-artificer .bx-def-margin-thd-lefttopright {
  301. @apply mx-1 mt-1;
  302. }
  303. .bx-artificer .bx-def-margin-thd-rightbottomleft {
  304. @apply mx-1 mb-1;
  305. }
  306. .bx-artificer .bx-def-padding {
  307. @apply p-4;
  308. }
  309. .bx-artificer .bx-def-padding-left {
  310. @apply pl-4;
  311. }
  312. .bx-artificer .bx-def-padding-left-auto {
  313. @apply pl-4 first:pl-0;
  314. }
  315. .bx-artificer .bx-def-padding-right {
  316. @apply pr-4;
  317. }
  318. .bx-artificer .bx-def-padding-top {
  319. @apply pt-4;
  320. }
  321. .bx-artificer .bx-def-padding-top-auto {
  322. @apply pt-4 first:pt-0;
  323. }
  324. .bx-artificer .bx-def-padding-bottom {
  325. @apply pb-4;
  326. }
  327. .bx-artificer .bx-def-padding-leftright {
  328. @apply px-4;
  329. }
  330. .bx-artificer .bx-def-padding-topbottom {
  331. @apply py-4;
  332. }
  333. .bx-artificer .bx-def-padding-lefttopright {
  334. @apply px-4 pt-4;
  335. }
  336. .bx-artificer .bx-def-padding-rightbottomleft {
  337. @apply px-4 pb-4;
  338. }
  339. .bx-artificer .bx-def-padding-sec {
  340. @apply p-2;
  341. }
  342. .bx-artificer .bx-def-padding-sec-left {
  343. @apply pl-2;
  344. }
  345. .bx-artificer .bx-def-padding-sec-left-auto {
  346. @apply pl-2 first:pl-0;
  347. }
  348. .bx-artificer .bx-def-padding-sec-right {
  349. @apply pr-2;
  350. }
  351. .bx-artificer .bx-def-padding-sec-top {
  352. @apply pt-2;
  353. }
  354. .bx-artificer .bx-def-padding-sec-top-auto {
  355. @apply pt-2 first:pt-0;
  356. }
  357. .bx-artificer .bx-def-padding-sec-bottom {
  358. @apply pb-2;
  359. }
  360. .bx-artificer .bx-def-padding-sec-leftright {
  361. @apply px-2;
  362. }
  363. .bx-artificer .bx-def-padding-sec-topbottom {
  364. @apply py-2;
  365. }
  366. .bx-artificer .bx-def-padding-sec-lefttopright {
  367. @apply px-2 pt-2;
  368. }
  369. .bx-artificer .bx-def-padding-sec-rightbottomleft {
  370. @apply px-2 pb-2;
  371. }
  372. .bx-artificer .bx-def-padding-thd {
  373. @apply p-1;
  374. }
  375. .bx-artificer .bx-def-padding-thd-left {
  376. @apply pl-1;
  377. }
  378. .bx-artificer .bx-def-padding-thd-left-auto {
  379. @apply pl-1 first:pl-0;
  380. }
  381. .bx-artificer .bx-def-padding-thd-right {
  382. @apply pr-1;
  383. }
  384. .bx-artificer .bx-def-padding-thd-top {
  385. @apply pt-1;
  386. }
  387. .bx-artificer .bx-def-padding-thd-top-auto {
  388. @apply pt-1 first:pt-0;
  389. }
  390. .bx-artificer .bx-def-padding-thd-bottom {
  391. @apply pb-1;
  392. }
  393. .bx-artificer .bx-def-padding-thd-leftright {
  394. @apply px-1;
  395. }
  396. .bx-artificer .bx-def-padding-thd-topbottom {
  397. @apply py-1;
  398. }
  399. .bx-artificer .bx-def-padding-thd-lefttopright {
  400. @apply px-1 pt-1;
  401. }
  402. .bx-artificer .bx-def-padding-thd-rightbottomleft {
  403. @apply px-1 pb-1;
  404. }
  405. /* Borders */
  406. .bx-artificer .bx-def-border {
  407. @apply border border-gray-200 dark:border-gray-700;
  408. }
  409. .bx-artificer .bx-def-round-corners {
  410. @apply rounded-md;
  411. }
  412. /* Fonts */
  413. .bx-def-font,
  414. .bx-artificer .bx-def-font-inputs:not(.bx-btn) {
  415. @apply font-inter text-gray-500 dark:text-gray-400;
  416. }
  417. .bx-def-font-grayed {
  418. @apply text-gray-700 dark:text-gray-500 text-opacity-60;
  419. }
  420. .bx-def-font-author,
  421. .bx-def-font-author.bx-def-font-meta {
  422. @apply text-sm text-gray-800 hover:text-black dark:text-gray-300 dark:hover:text-white font-semibold;
  423. }
  424. .bx-def-font-meta {
  425. @apply text-sm;
  426. }
  427. .bx-def-font-meta:not(a) {
  428. @apply text-gray-700 dark:text-gray-400 text-opacity-60;
  429. }
  430. a.bx-def-font-meta {
  431. @apply hover:underline;
  432. }
  433. .bx-artificer .bx-def-a-colored {
  434. @apply text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
  435. }
  436. .bx-artificer a.bx-def-font-meta,
  437. .bx-artificer a.bx-def-font-meta.bx-def-a-colored {
  438. @apply text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50;
  439. }
  440. .bx-artificer .bx-def-font-meta:not(a) {
  441. @apply text-opacity-100;
  442. }
  443. .bx-artificer .bx-def-font-small {
  444. @apply text-xs;
  445. }
  446. .bx-artificer .bx-def-font-middle {
  447. @apply text-sm;
  448. }
  449. .bx-artificer .bx-def-font-large {
  450. @apply text-lg;
  451. }
  452. .bx-artificer h3,
  453. .bx-artificer .bx-def-font-h3 {
  454. @apply text-xl;
  455. }
  456. .bx-artificer h2,
  457. .bx-artificer .bx-def-font-h2 {
  458. @apply text-2xl;
  459. }
  460. .bx-artificer h1,
  461. .bx-artificer .bx-def-font-h1 {
  462. @apply text-3xl leading-10;
  463. }
  464. /* Common elements: Pages. */
  465. .bx-def-color-bg-page{
  466. @apply bg-gray-100 dark:bg-gray-900;
  467. }
  468. /* Common elements: Blocks, Boxes, etc. */
  469. .bx-def-box {
  470. @apply flex flex-col;
  471. }
  472. .bx-def-box.bx-def-box-hor {
  473. @apply flex-row;
  474. }
  475. .bx-def-color-bg-block,
  476. .bx-def-color-bg-box,
  477. .bx-popup-color-bg {
  478. @apply bg-white dark:bg-gray-800 shadow;
  479. }
  480. .bx-def-border-block,
  481. .bx-def-box,
  482. .bx-popup-border {
  483. @apply ring-1 ring-gray-300 dark:ring-gray-700;
  484. }
  485. .bx-def-border-radius-block,
  486. .bx-def-box-round-corners,
  487. .bx-popup-border {
  488. @apply rounded-md;
  489. }
  490. .bx-content-padding-block {
  491. @apply p-3 md:p-4;
  492. }
  493. .bx-def-color-bg-box-hover {
  494. @apply hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-800 dark:hover:text-gray-200;
  495. }
  496. .bx-def-color-bg-box-active {
  497. @apply bg-gray-100 dark:bg-gray-700;
  498. }
  499. .bx-db-title {
  500. @apply leading-8 text-lg lg:text-xl text-gray-800 dark:text-gray-100 font-semibold align-middle;
  501. }
  502. /* Common Elements: HR */
  503. .bx-artificer .bx-def-hr {
  504. @apply mx-0 p-0 border-t border-gray-200 dark:border-gray-700;
  505. }
  506. /* Common Elements: Labels */
  507. .bx-artificer .bx-def-label {
  508. @apply inline-block min-w-6 px-4 py-1 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 text-sm font-normal rounded-full box-border;
  509. }
  510. /* Common Elements: Alerts */
  511. .bx-def-unit-alert,
  512. .bx-def-unit-alert-small,
  513. .bx-def-unit-alert-middle {
  514. @apply block absolute top-0 -right-0.5 text-center text-white;
  515. }
  516. .bx-def-unit-alert {
  517. @apply h-4 p-1 leading-4 rounded-full text-xs;
  518. min-width: 1rem;
  519. }
  520. /* Common elements: Buttons */
  521. .bx-btn-shadow {
  522. @apply shadow-sm hover:shadow active:shadow-none;
  523. }
  524. .bx-btn-border {
  525. @apply border border-gray-300 dark:border-gray-600 rounded-md;
  526. }
  527. .bx-btn-bg {
  528. @apply bg-gray-100 dark:bg-gray-700;
  529. }
  530. .bx-btn-text {
  531. @apply text-sm text-gray-700 dark:text-gray-100 font-medium ;
  532. }
  533. .bx-btn-hover {
  534. @apply hover:bg-white dark:hover:bg-gray-600;
  535. @apply hover:border-gray-300 dark:hover:border-gray-500;
  536. @apply hover:text-gray-800 dark:hover:text-white;
  537. @apply hover:no-underline;
  538. @apply hover:-translate-y-px;
  539. }
  540. .bx-btn-active {
  541. @apply active:bg-gray-300 dark:active:bg-gray-800;
  542. @apply active:border-gray-400 dark:active:border-gray-700;
  543. @apply active:text-gray-900 dark:active:text-gray-200;
  544. @apply active:translate-y-px;
  545. }
  546. .bx-btn {
  547. @apply relative inline-flex items-center px-4 py-2;
  548. @apply bx-btn-shadow;
  549. @apply bx-btn-bg;
  550. @apply bx-btn-border;
  551. @apply bx-btn-text;
  552. @apply transform-gpu transition-all duration-150;
  553. @apply bx-btn-hover bx-btn-active;
  554. }
  555. .bx-btn i,
  556. .bx-btn u {
  557. @apply inline-block align-middle;
  558. }
  559. .bx-btn i,
  560. .bx-btn img {
  561. @apply w-5 h-5 leading-5;
  562. }
  563. .bx-btn i:not(.sys-colored),
  564. .bx-btn img {
  565. @apply text-gray-600 dark:text-gray-300;
  566. }
  567. .bx-btn:hover i:not(.sys-colored),
  568. .bx-btn:hover img {
  569. @apply text-gray-800 dark:text-gray-100;
  570. }
  571. .bx-btn i {
  572. @apply text-center;
  573. }
  574. .bx-btn u {
  575. @apply ml-2 first:ml-0 no-underline;
  576. }
  577. .bx-btn.bx-btn-primary {
  578. @apply bg-blue-600 hover:bg-blue-500 active:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 dark:active:bg-blue-800;
  579. @apply border border-blue-600 hover:border-blue-500 active:border-blue-800 dark:border-blue-600 dark:hover:border-blue-500 dark:active:border-blue-700;
  580. @apply text-white hover:text-white active:text-white dark:text-white dark:hover:text-white dark:active:text-white;
  581. }
  582. .bx-btn.bx-btn-primary i,
  583. .bx-btn.bx-btn-primary img {
  584. @apply text-gray-300;
  585. }
  586. .bx-btn.bx-btn-primary:hover i,
  587. .bx-btn.bx-btn-primary:hover img {
  588. @apply text-gray-100;
  589. }
  590. .bx-btn.bx-btn-disabled {
  591. @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 focus:ring-0 focus:ring-offset-0 shadow-none cursor-default !important;
  592. }
  593. .bx-btn.bx-btn-small {
  594. @apply py-1 text-xs;
  595. }
  596. .bx-btn.bx-btn-small i,
  597. .bx-btn.bx-btn-small img {
  598. @apply w-4 h-4 leading-4;
  599. }
  600. /* Common elements: Forms */
  601. .bx-artificer form {
  602. @apply text-sm font-normal text-gray-700 dark:text-gray-300;
  603. }
  604. .bx-artificer form a:not(.bx-btn),
  605. .bx-artificer .sys-jf-agreement a:not(.bx-btn),
  606. .bx-artificer .sys-lf-agreement a:not(.bx-btn) {
  607. @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
  608. }
  609. .bx-artificer .bx-form-caption,
  610. .bx-artificer .bx-form-row-view-caption {
  611. @apply text-gray-700 dark:text-gray-300 text-sm font-medium;
  612. }
  613. .bx-artificer .bx-form-value {
  614. @apply mt-1 first:mt-0;
  615. }
  616. .bx-artificer .bx-form-required,
  617. .bx-artificer .bx-form-warn {
  618. @apply text-red-400;
  619. }
  620. /* Common elements: Forms: Text Input */
  621. .bx-artificer .bx-form-input-slider,
  622. .bx-artificer .bx-form-input-doublerange,
  623. .bx-artificer .bx-form-input-select_multiple,
  624. .bx-artificer .bx-form-input-select,
  625. .bx-artificer .bx-form-input-number,
  626. .bx-artificer .bx-form-input-time,
  627. .bx-artificer .bx-form-input-datepicker,
  628. .bx-artificer .bx-form-input-datetime,
  629. .bx-artificer .bx-form-input-textarea,
  630. .bx-artificer .bx-form-input-text,
  631. .bx-artificer .bx-form-input-price,
  632. .bx-artificer .bx-form-input-wrapper-price span {
  633. @apply block w-full px-3 py-2;
  634. @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
  635. @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
  636. @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
  637. @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
  638. @apply rounded-md;
  639. }
  640. /* Common elements: Forms: Password Input */
  641. .bx-artificer .bx-form-input-wrapper-password {
  642. @apply relative block w-full pl-3 pr-8;
  643. @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
  644. @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
  645. @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
  646. @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
  647. @apply rounded-md;
  648. }
  649. /* Common elements: Forms: Checkbox/Radio Set Input */
  650. .bx-artificer .bx-form-input-wrapper-checkbox_set,
  651. .bx-artificer .bx-form-input-wrapper-radio_set {
  652. @apply relative block w-full py-2 px-3;
  653. @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
  654. @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
  655. @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
  656. @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
  657. @apply rounded-md;
  658. }
  659. /* Common elements: Forms: Checkbox Input */
  660. .bx-artificer .bx-form-input-checkbox,
  661. .bx-artificer .bx-form-input-radio {
  662. @apply block w-4 h-4;
  663. @apply bg-gray-50 dark:bg-gray-900/50 bg-origin-border;
  664. @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70;
  665. @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
  666. @apply rounded;
  667. @apply appearance-none select-none;
  668. }
  669. .bx-artificer .bx-def-font-inputs.bx-form-input-checkbox,
  670. .bx-artificer .bx-def-font-inputs.bx-form-input-radio {
  671. @apply leading-6 text-base font-medium text-blue-600 dark:text-blue-600;
  672. }
  673. .bx-artificer .bx-form-input-checkbox:checked,
  674. .bx-artificer .bx-form-input-radio:checked {
  675. background-color: currentColor;
  676. border-color: transparent;
  677. }
  678. .bx-artificer .bx-form-input-checkbox:checked {
  679. background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTYgMTYnIGZpbGw9JyNmZmYnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTEyLjIwNyA0Ljc5M2ExIDEgMCAwIDEgMCAxLjQxNGwtNSA1YTEgMSAwIDAgMS0xLjQxNCAwbC0yLTJhMSAxIDAgMCAxIDEuNDE0LTEuNDE0TDYuNSA5LjA4Nmw0LjI5My00LjI5M2ExIDEgMCAwIDEgMS40MTQgMHonLz48L3N2Zz4=)
  680. }
  681. .bx-artificer .bx-form-input-radio:checked {
  682. background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTYgMTYnIGZpbGw9JyNmZmYnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzMnLz48L3N2Zz4=)
  683. }
  684. /* Common elements: Forms: Switcher Input */
  685. .bx-switcher-cont.on button {
  686. @apply bg-white dark:bg-gray-800;
  687. }
  688. .bx-switcher-cont.on button span {
  689. @apply bg-green-500 dark:bg-green-500 translate-x-5;
  690. }
  691. .bx-switcher-cont.off button {
  692. @apply bg-gray-200 dark:bg-gray-900;
  693. }
  694. .bx-switcher-cont.off button span {
  695. @apply bg-white dark:bg-gray-500 translate-x-0;
  696. }
  697. /* Common elements: Forms: Autosuggestion Input */
  698. .bx-artificer .bx-form-input-text.bx-form-input-autotoken {
  699. @apply flex flex-wrap items-stretch w-full py-2 px-3 ;
  700. @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
  701. @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
  702. @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
  703. @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
  704. @apply rounded-md;
  705. }
  706. .bx-artificer .bx-form-input-autotoken b.val {
  707. @apply bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600;
  708. }
  709. /* Common elements: Popups */
  710. .bx-artificer .bx-popup-wrapper {
  711. @apply overflow-visible;
  712. }
  713. .bx-artificer .bx-popup-applied {
  714. @apply rounded-lg;
  715. }
  716. .bx-artificer .bx-popup-responsive:not(.bx-popup-full-screen):not(.bx-popup-menu) {
  717. @apply w-full md:w-auto;
  718. }
  719. .bx-artificer .bx-popup-full-screen {
  720. @apply w-full;
  721. }
  722. .bx-artificer .bx-popup {
  723. @apply relative;
  724. }
  725. .bx-artificer .bx-popup-color-bg {
  726. @apply bg-white dark:bg-gray-800 shadow;
  727. }
  728. .bx-artificer .bx-popup-border {
  729. @apply ring-1 ring-gray-300 dark:ring-gray-700 rounded-md;
  730. }
  731. .bx-artificer .bx-popup-width {
  732. @apply w-full md:w-128;
  733. }
  734. .bx-artificer .bx-popup-width-small,
  735. .bx-artificer .bx-popup-menu .bx-popup-content {
  736. @apply w-56;
  737. }
  738. .bx-artificer .bx-popup-full-screen .bx-popup-width {
  739. @apply w-full md:w-full;
  740. }
  741. .bx-artificer .bx-popup-fog {
  742. @apply bg-gray-600 opacity-75;
  743. }
  744. /* Common elements: Menus */
  745. .bx-stl-mil-gaps {
  746. @apply px-3 py-2;
  747. }
  748. .bx-stl-mil-gaps-sm {
  749. @apply px-2 py-1.5;
  750. }
  751. .bx-stl-mil-hover-text {
  752. @apply hover:text-gray-800 dark:hover:text-gray-200;
  753. }
  754. .bx-stl-mil-hover-bg {
  755. @apply hover:border-gray-200/50 dark:hover:border-gray-700/50;
  756. @apply hover:bg-gray-200/50 dark:hover:bg-gray-700/50;
  757. }
  758. .bx-stl-mil-hover {
  759. @apply bx-stl-mil-hover-text;
  760. @apply bx-stl-mil-hover-bg;
  761. }
  762. .bx-stl-mil-active-bg {
  763. @apply active:border-gray-300 dark:active:border-gray-700;
  764. @apply active:bg-gray-300 dark:active:bg-black/50;
  765. }
  766. .bx-stl-mil-active {
  767. @apply bx-stl-mil-active-bg;
  768. }
  769. .bx-stl-mil,
  770. .bx-stl-mil-sm,
  771. .bx-stl-mil-wo-bg,
  772. .bx-stl-mil-wo-bg-gaps,
  773. .bx-stl-mil-wo-gaps,
  774. .bx-stl-mil-wo-gaps-sm {
  775. @apply flex items-center;
  776. @apply text-base text-gray-600 dark:text-gray-400 font-medium;
  777. @apply bx-stl-mil-hover-text;
  778. }
  779. .bx-stl-mil,
  780. .bx-stl-mil-sm,
  781. .bx-stl-mil-wo-bg {
  782. @apply bx-stl-mil-gaps;
  783. }
  784. .bx-stl-mil,
  785. .bx-stl-mil-sm,
  786. .bx-stl-mil-wo-gaps,
  787. .bx-stl-mil-wo-gaps-sm {
  788. @apply border border-transparent;
  789. @apply rounded-md;
  790. @apply bx-stl-mil-hover-bg bx-stl-mil-active-bg;
  791. }
  792. .bx-stl-mil.bx-stl-mib,
  793. .bx-stl-mil-sm.bx-stl-mib,
  794. .bx-stl-mil-wo-gaps.bx-stl-mib,
  795. .bx-stl-mil-wo-gaps-sm.bx-stl-mib {
  796. @apply border border-gray-300 dark:border-gray-700;
  797. }
  798. .bx-stl-mil-sm,
  799. .bx-stl-mil-wo-gaps-sm {
  800. @apply text-sm;
  801. }
  802. .bx-stl-mil-sm {
  803. @apply px-2 py-1.5;
  804. }
  805. .bx-popup .bx-stl-mil-sm,
  806. .bx-popup .bx-stl-mil-gaps-sm {
  807. @apply px-4;
  808. }
  809. .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil,
  810. .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm,
  811. .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps,
  812. .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm {
  813. @apply rounded-none;
  814. }
  815. .bx-menu-tab-active.bx-stl-mil,
  816. .bx-menu-tab-active.bx-stl-mil-sm,
  817. .bx-menu-tab-active.bx-stl-mil-wo-gaps,
  818. .bx-menu-tab-active.bx-stl-mil-wo-gaps-sm,
  819. .bx-menu-tab-active .bx-stl-mil,
  820. .bx-menu-tab-active .bx-stl-mil-sm,
  821. .bx-menu-tab-active .bx-stl-mil-wo-gaps,
  822. .bx-menu-tab-active .bx-stl-mil-wo-gaps-sm,
  823. .bx-menu-item-active .bx-stl-mil,
  824. .bx-menu-item-active .bx-stl-mil-sm,
  825. .bx-menu-item-active .bx-stl-mil-wo-gaps,
  826. .bx-menu-item-active .bx-stl-mil-wo-gaps-sm {
  827. @apply text-gray-900 dark:text-white;
  828. @apply bg-gray-200 dark:bg-gray-900;
  829. @apply ring-1 ring-white/50 dark:ring-gray-800/50;
  830. }
  831. .bx-popup .bx-menu-tab-active.bx-stl-mil,
  832. .bx-popup .bx-menu-tab-active.bx-stl-mil-sm,
  833. .bx-popup .bx-menu-tab-active.bx-stl-mil-wo-gaps,
  834. .bx-popup .bx-menu-tab-active.bx-stl-mil-wo-gaps-sm,
  835. .bx-popup .bx-menu-tab-active .bx-stl-mil,
  836. .bx-popup .bx-menu-tab-active .bx-stl-mil-sm,
  837. .bx-popup .bx-menu-tab-active .bx-stl-mil-wo-gaps,
  838. .bx-popup .bx-menu-tab-active .bx-stl-mil-wo-gaps-sm {
  839. @apply ring-0;
  840. }
  841. .bx-stl-mii,
  842. .bx-stl-mii-sm,
  843. .bx-stl-mil .sys-action-do-icon,
  844. .bx-stl-mil-sm .sys-action-do-icon,
  845. .bx-stl-mil-wo-gaps .sys-action-do-icon,
  846. .bx-stl-mil-wo-gaps-sm .sys-action-do-icon {
  847. @apply flex items-center justify-center text-gray-500 text-lg;
  848. }
  849. .bx-stl-mii > *,
  850. .bx-stl-mii-sm > *,
  851. .bx-stl-mil .sys-action-do-icon > *,
  852. .bx-stl-mil-sm .sys-action-do-icon > *,
  853. .bx-stl-mil-wo-gaps .sys-action-do-icon > *,
  854. .bx-stl-mil-wo-gaps-sm .sys-action-do-icon > * {
  855. @apply flex items-center justify-center h-6 w-6 mr-3;
  856. }
  857. .bx-stl-mii:last-child > *,
  858. .bx-stl-mii-sm:last-child > *,
  859. .bx-stl-mil .sys-action-do-icon:last-child > *,
  860. .bx-stl-mil-sm .sys-action-do-icon:last-child > *,
  861. .bx-stl-mil-wo-gaps .sys-action-do-icon:last-child > *,
  862. .bx-stl-mil-wo-gaps-sm .sys-action-do-icon:last-child > * {
  863. @apply mr-0;
  864. }
  865. .bx-stl-mil .sys-action-do-icon ~ .sys-action-do-text,
  866. .bx-stl-mil-sm .sys-action-do-icon ~ .sys-action-do-text,
  867. .bx-stl-mil-wo-gaps .sys-action-do-icon ~ .sys-action-do-text,
  868. .bx-stl-mil-wo-gaps-sm .sys-action-do-icon ~ .sys-action-do-text {
  869. @apply ml-0;
  870. }
  871. .bx-stl-mii-sm > *,
  872. .bx-stl-mil-sm .sys-action-do-icon > *,
  873. .bx-stl-mil-wo-gaps-sm .sys-action-do-icon > * {
  874. @apply h-5 w-5 mr-1.5 text-sm;
  875. }
  876. .bx-stl-mit {
  877. @apply truncate;
  878. }
  879. .bx-stl-mia {
  880. @apply inline-block py-0.5 px-2 bg-gray-200/50 dark:bg-gray-800/50 text-gray-600 dark:text-gray-300 text-xs rounded-full;
  881. }
  882. /* Horizontal menu */
  883. .bx-artificer .bx-menu-hor li.bx-menu-tab-active a,
  884. .bx-artificer .bx-menu-custom-hor li.bx-menu-tab-active a {
  885. @apply text-gray-700 dark:text-gray-200 font-medium;
  886. }
  887. /* Vertical menu */
  888. .bx-artificer .bx-menu-ver li.bx-menu-tab-active .bx-mi-highlight,
  889. .bx-artificer .bx-menu-verlit li.bx-menu-tab-active .bx-mi-highlight,
  890. .bx-artificer .bx-menu-custom-ver li.bx-menu-tab-active .bx-mi-highlight {
  891. @apply bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white font-medium;
  892. }
  893. /* Vertical menu in Popup */
  894. .bx-artificer .bx-popup .bx-menu-ver > li:hover {
  895. @apply hover:text-gray-900 dark:hover:text-gray-100;
  896. }
  897. .bx-artificer .bx-popup .bx-menu-ver > li.bx-def-color-bg-active {
  898. @apply bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white;
  899. }
  900. /* Toolbar menu */
  901. .bx-artificer .bx-menu-toolbar .bx-menu-toolbar-item .bx-menu-toolbar-item-unit {
  902. @apply border-4 border-transparent;
  903. }
  904. .bx-artificer .bx-menu-toolbar .bx-menu-toolbar-item .bx-menu-toolbar-item-unit .bx-def-icon-size {
  905. @apply h-6 w-6 md:h-8 md:w-8;
  906. }
  907. /* Page Submenu */
  908. .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active a {
  909. @apply text-gray-900 dark:text-gray-100;
  910. }
  911. .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active .bx-mi-underline {
  912. @apply bg-blue-500 group-hover:bg-blue-500;
  913. }
  914. /* Profile Stats menu */
  915. .bx-artificer .bx-menu-profile-stats.bx-menu-ver li.bx-menu-tab-active {
  916. @apply bg-slate-900/[.08] dark:bg-slate-900 ring-1 ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white;
  917. }
  918. .bx-artificer .bx-menu-profile-stats.bx-menu-ver li.bx-psmi-show-more,
  919. .bx-artificer .bx-menu-profile-stats.bx-menu-ver li.bx-psmi-show-less {
  920. @apply text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300
  921. }
  922. /* Profile Cover */
  923. .bx-artificer .bx-base-pofile-cover-thumb + .bx-base-pofile-cover-user {
  924. @apply lg:pl-52;
  925. }
  926. .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 {
  927. @apply border-transparent text-gray-200 hover:text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
  928. }
  929. /* Common elements: Informers */
  930. .bx-informer-msg a {
  931. @apply text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
  932. }
  933. .bx-informer-msg-info {
  934. @apply bg-blue-50 text-blue-700;
  935. }
  936. .bx-informer-msg-alert {
  937. @apply bg-yellow-50 text-yellow-700;
  938. }
  939. .bx-informer-msg-error {
  940. @apply bg-red-50 text-red-700;
  941. }
  942. /* Common elements: All Actions */
  943. .sys-action-counter.sys-ac-link,
  944. .sys-action-counter .sys-ac-link {
  945. @apply flex items-center;
  946. @apply border-none;
  947. @apply text-gray-500 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300;
  948. @apply rounded-full;
  949. }
  950. .sys-action-counter.sys-ac-only.sys-ac-link,
  951. .sys-action-counter.sys-ac-only .sys-ac-link {
  952. @apply hover:bg-gray-100 dark:hover:bg-gray-600;
  953. }
  954. /* Common elements: Comments */
  955. .bx-artificer .cmt .bx-base-general-unit-meta-username {
  956. @apply text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white;
  957. }
  958. /* Common elements: Units */
  959. .bx-artificer .bx-def-icon-size,
  960. .bx-artificer .bx-profile-avatar .bx-def-thumb-size,
  961. .bx-artificer .bx-profile-stats .bx-ps-user .bx-def-thumb-size {
  962. @apply h-8 w-8;
  963. }
  964. .bx-artificer .bx-def-thumb-size {
  965. @apply h-10 w-10;
  966. }
  967. .bx-artificer .bx-def-ava-size {
  968. @apply h-24 w-24;
  969. }
  970. .bx-artificer .bx-def-ava-big-size {
  971. @apply w-48 h-48;
  972. }
  973. .bx-base-text-unit-title a,
  974. .bx-tl-title a {
  975. @apply text-gray-800 hover:text-blue-500 dark:text-gray-100 dark:hover:text-blue-400 hover:no-underline;
  976. }
  977. .bx-base-text-unit-title a {
  978. @apply text-lg lg:text-xl font-semibold;
  979. }
  980. .bx-artificer .bx-base-pofile-unit-online {
  981. @apply absolute w-2.5 h-2.5 right-0.5 bottom-0.5 ring-1 ring-inset ring-white dark:ring-gray-800 bg-green-500 rounded-full;
  982. }
  983. .bx-artificer .bx-base-general-unit-meta .bx-base-profile-unit-meta-item > a:not(.bx-btn),
  984. .bx-artificer .bx-base-general-unit-meta ul.bx-menu-custom.bx-menu-custom-hor .bx-base-pofile-unit {
  985. @apply p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700;
  986. }
  987. /* Common elements: Auth */
  988. .sys-auth-block {
  989. @apply grid-cols-2;
  990. }
  991. .sys-auth-block.sys-auth-compact-container {
  992. @apply grid-cols-4;
  993. }
  994. /* Common elements: Votes */
  995. .bx-vote-likes .bx-vote-element-holder .bx-vote-do-vote.bx-vote-disabled,
  996. .bx-vote-likes .bx-vote-element-holder .bx-vote-do-vote.bx-vote-disabled .sys-icon {
  997. @apply text-gray-300 dark:text-gray-700;
  998. }
  999. /* Modules: Timeline */
  1000. .bx-artificer .bx-tl-item-text .bx-tl-content.bx-tl-overflow:before {
  1001. @apply bg-gradient-to-b from-transparent to-white dark:to-gray-800;
  1002. }
  1003. .bx-artificer .bx-tl-item-activity .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a,
  1004. .bx-artificer .bx-menu-object-bx_timeline_menu_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a {
  1005. @apply relative flex;
  1006. @apply bx-stl-mil-gaps-sm;
  1007. }
  1008. .bx-artificer .bx-popup .bx-menu-object-bx_timeline_menu_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a {
  1009. @apply px-4;
  1010. }
  1011. /* 3d Party: Flickity */
  1012. .bx-artificer .flickity-button {
  1013. @apply text-gray-700 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 opacity-75 hover:opacity-100;
  1014. }
  1015. /* 3d Party: Quill */
  1016. .bx-artificer div.ql-editor {
  1017. @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
  1018. }
  1019. .bx-artificer div.ql-editor:focus{
  1020. @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
  1021. }
  1022. .bx-artificer .ql-mention-list li {
  1023. @apply flex items-center px-4 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 text-sm font-normal;
  1024. }
  1025. /* Modules: Editor */
  1026. .editor_toolbar button.selected{
  1027. @apply bg-gray-300 dark:bg-black/50 dark:text-gray-200 text-gray-800;
  1028. }
  1029. /* Modules: Forum. Units - new view, for UNA14 need to migrate in general */
  1030. .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
  1031. {
  1032. grid-auto-rows: 0;
  1033. grid-template-rows: repeat(1, 1fr);
  1034. overflow-y: hidden;
  1035. }
  1036. .bx-artificer .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
  1037. .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
  1038. {
  1039. @apply max-w-full mx-auto grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 md:max-w-none;
  1040. }
  1041. .bx-artificer .bx-layout-column-wide .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
  1042. .bx-artificer .bx-layout-column-wide .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
  1043. {
  1044. @apply max-w-full mx-auto grid sm:grid-cols-2 md:grid-cols-3 gap-4 md:max-w-none;
  1045. }
  1046. .bx-artificer .bx-layout-column-half .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
  1047. .bx-artificer .bx-layout-column-half .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
  1048. {
  1049. @apply max-w-full mx-auto grid sm:grid-cols-1 md:grid-cols-2 gap-4 md:max-w-none;
  1050. }
  1051. .bx-artificer .bx-layout-column-thin .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
  1052. .bx-artificer .bx-layout-column-thin .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
  1053. {
  1054. @apply max-w-full mx-auto grid sm:grid-cols-1 gap-4 md:max-w-none;
  1055. }
  1056. .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper.flickity-enabled
  1057. {
  1058. @apply block;
  1059. }
  1060. .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper .flickity-slider{
  1061. @apply space-x-4 ;
  1062. }
  1063. .bx-artificer .bx-search-result-block.bx-clearfix:before{
  1064. @apply hidden;
  1065. }
  1066. /* badges */
  1067. .bx-badges-list{
  1068. @apply inline-flex grow-0 space-x-1 w-min
  1069. }
  1070. .bx-badge{
  1071. @apply inline-flex items-center w-min space-x-1 px-1.5 py-0.5 rounded-full;
  1072. @apply text-white text-xs font-medium whitespace-nowrap;
  1073. @apply opacity-90 hover:opacity-100 active:translate-y-0.5
  1074. }
  1075. .sys-icon-image.bx-badge-icon,
  1076. .sys-icon-svg.bx-badge-icon{
  1077. @apply w-4 h-4
  1078. }
  1079. }