dunkirk.sh
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4@layer base {
5 @font-face {
6 font-family: "InterVariable";
7 src: url("/static/fonts/InterVariable.woff2") format("woff2");
8 font-weight: normal;
9 font-style: normal;
10 font-display: swap;
11 }
12
13 @font-face {
14 font-family: "InterVariable";
15 src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
16 font-weight: normal;
17 font-style: italic;
18 font-display: swap;
19 }
20
21 @font-face {
22 font-family: "IBMPlexMono";
23 src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
24 font-weight: normal;
25 font-style: italic;
26 font-display: swap;
27 }
28
29 ::selection {
30 @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
31 }
32
33 @layer base {
34 html {
35 font-size: 15px;
36 }
37 a {
38 @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
39 }
40
41 label {
42 @apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
43 }
44 input {
45 @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
46 }
47 textarea {
48 @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
49 }
50 details summary::-webkit-details-marker {
51 display: none;
52 }
53 }
54
55 @layer components {
56 .btn {
57 @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
58 justify-center bg-transparent px-2 pb-[0.2rem] text-base
59 text-gray-900 before:absolute before:inset-0 before:-z-10
60 before:block before:rounded before:border before:border-gray-200
61 before:bg-white before:drop-shadow-sm
62 before:content-[''] hover:before:border-gray-300
63 hover:before:bg-gray-50
64 hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
65 focus:outline-none focus-visible:before:outline
66 focus-visible:before:outline-4 focus-visible:before:outline-gray-500
67 active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)]
68 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:before:border-gray-200
69 disabled:hover:before:bg-white disabled:hover:before:shadow-none
70 dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700
71 dark:hover:before:border-gray-600 dark:hover:before:bg-gray-700
72 dark:hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.2),inset_0_-2px_0_0_#2d3748]
73 dark:focus-visible:before:outline-gray-400
74 dark:active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.3)]
75 dark:disabled:hover:before:bg-gray-800 dark:disabled:hover:before:border-gray-700;
76 }
77 }
78 @layer utilities {
79 .error {
80 @apply py-1 text-red-400 dark:text-red-300;
81 }
82 .success {
83 @apply py-1 text-gray-900 dark:text-gray-100;
84 }
85 }
86}