main.css 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. @config './tailwind.desktop.js';
  2. @tailwind base;
  3. @tailwind components;
  4. @tailwind utilities;
  5. @layer base {
  6. /* Override autofill styles in Firefox. */
  7. :-moz-autofill {
  8. background: transparent;
  9. }
  10. /* Override autofill styles in Webkit-based browsers. */
  11. :-webkit-autofill {
  12. -webkit-text-fill-color: theme('colors.black');
  13. -webkit-background-clip: text;
  14. caret-color: theme('colors.black');
  15. }
  16. [data-theme='dark'] :-webkit-autofill {
  17. -webkit-text-fill-color: theme('colors.white');
  18. caret-color: theme('colors.white');
  19. }
  20. /* No-op animation for hooking into autofill mechanism in Webkit-based browsers. */
  21. :-webkit-autofill {
  22. animation-name: onAutoFillStart;
  23. }
  24. :not(:-webkit-autofill) {
  25. animation-name: onAutoFillEnd;
  26. }
  27. @keyframes onAutoFillStart {
  28. from {
  29. }
  30. to {
  31. }
  32. }
  33. @keyframes onAutoFillEnd {
  34. from {
  35. }
  36. to {
  37. }
  38. }
  39. }
  40. @layer components {
  41. input::placeholder,
  42. textarea::placeholder {
  43. @apply text-stone-200 dark:text-neutral-500;
  44. }
  45. .required::after {
  46. @apply inline-block font-extrabold content-['•'] ltr:ml-1 rtl:mr-1 text-yellow-600;
  47. }
  48. /* Compatibility layer for object attributes and form columns. */
  49. .form-group .formkit-outer {
  50. @apply col-span-2;
  51. &.form-group-single-column {
  52. @apply col-span-1;
  53. }
  54. }
  55. /*
  56. TODO: Dirty mark styling within the field.
  57. .form-group.form-group-mark-dirty .formkit-outer[data-dirty]::before {}
  58. */
  59. }
  60. @layer utilities {
  61. .group-block {
  62. @apply p-5 bg-white dark:bg-gray-500 text-black dark:text-white rounded-3xl;
  63. }
  64. }