webpack.js.org/src/styles/tailwind.css at 05ff231f8da831c0d19cf764d04dbaa6ca2e9b47 · shivam1608/webpack.js.org · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
@import "tailwindcss";
@layer base {
  @import "../styles/reset.css";
}

@theme {
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --text-14: 14px;
  --color-white: #fff;
  --color-black: #000;
  --color-transparent: transparent;
  --color-blue-200: #8dd6f9;
  --color-blue-400: #1d78c1;
  --color-blue-600: #465e69;
  --color-blue-800: #2b3a42;
  --color-gray-100: #f2f2f2;
  --color-gray-200: #dedede;
  --color-gray-300: #999;
  --color-gray-500: #666;
  --color-gray-600: #535353;
  --color-gray-700: #333;
  --color-gray-800: #222;
  --color-gray-900: #101619;
  --spacing-5: 5px;
  --spacing-10: 10px;
  --spacing-20: 20px;
  --grid-template-columns-contributors: repeat(auto-fit, 36px);
}

@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
@variant hover (&:hover);

/* doc search */
:root {
  --docsearch-primary-color: #1d78c1 !important;
}
.DocSearch-Button {
  @apply bg-transparent! lg:bg-gray-500! transition! duration-200! lg:rounded-full!;
}
.DocSearch-Button-Placeholder {
  @apply hidden! lg:font-light! lg:text-sm! lg:block! lg:text-gray-200! lg:dark:text-gray-300! transition! duration-200!;
}
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
  @apply lg:text-gray-100!;
}
.DocSearch-Button-Keys {
  @apply hidden! lg:flex!;
}
.DocSearch-Button .DocSearch-Search-Icon {
  @apply text-white! lg:text-gray-100!;
}

/* Reading Progress – keyframes for scroll-driven animation */
@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes fade-in-progress {
  to {
    opacity: 1;
  }
}

/* Custom utility: scroll-driven animation timeline */
.animation-timeline-scroll {
  animation-timeline: scroll(root block);
}

/* splash layout */
.splash__wrap {
  @apply block md:-mx-7.5 before:content-[''] before:table after:content-[''] after:table after:clear-both;
}
.splash__install {
  @apply max-w-100 m-auto;
}
.splash__left {
  @apply w-full float-left md:w-1/2 md:px-3.75;
}
.splash__left p {
  @apply text-left;
}
.splash__right {
  @apply w-full float-left md:w-1/2 md:px-3.75 mb-[1em];
}
.splash__right p {
  @apply text-left;
}