Forest/input.css at main · AdrianousDev/Forest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
@import "tailwindcss";

@theme {
  --color-verde-200: #acef75;
  --color-verde-300: #91ee77;
  --color-verde-400: #17e880;
  --color-verde-700: #2e482c;
  --color-verde-800: #16281f;
  --color-verde-900: #0f1c15;
  --color-verde-950: #030504;

  --font-sans: "DM Sans", "system-ui", "sans-serif";
  --font-serif: "DM Serif Text", "Georgia", "serif";

  --animate-slide-in: slideIn 0.4s ease-in-out forwards;
  --animate-fade-in: fadeIn 0.4s ease-in-out forwards;

  @keyframes slideIn {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}

@utility container {
  margin: 0 auto;
  padding: 0 0.5rem;
  @media (width >= 40rem) {
    padding: 0 1rem;
  }
}

@utility animate-1 {
  animation-delay: 100ms;
}
@utility animate-2 {
  animation-delay: 200ms;
}
@utility animate-3 {
  animation-delay: 300ms;
}
@utility animate-4 {
  animation-delay: 400ms;
}

@layer components {
  .neon {
    @apply rounded-full border border-verde-200 bg-linear-to-b from-verde-200 to-verde-400;
    box-shadow: 0 1px 4px 1px rgba(var(--color-verde-200), 0.25),
      inset 0px -1px 2px var(--color-verde-200);
  }

  .btn {
    @apply rounded-full border border-verde-200 bg-linear-to-b from-verde-200 to-verde-400 px-5 py-2 text-verde-900 transition hover:contrast-200;
    box-shadow: 0 1px 4px 1px rgba(var(--color-verde-200), 0.25),
      inset 0px -1px 2px var(--color-verde-200);
  }

  .input {
    @apply rounded-md border-2 border-verde-800 bg-verde-800 p-2 text-white focus:outline-none focus:ring-2 focus:ring-verde-400 focus:border-verde-900 placeholder:text-verde-900;
  }

  .radial-gradient {
    @apply bg-radial-[50%_100%_at_50%_0%] from-verde-700 to-verde-800;
  }
}