Graphical PDS migrator for AT Protocol
knotbin.com
1@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
2@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
3
4@font-face {
5 font-family: "Skyfont";
6 src: url("fonts/skyfont.regular.otf") format("opentype");
7 font-weight: normal;
8 font-style: normal;
9}
10
11@font-face {
12 font-family: "F25_Bank_Printer";
13 src: url("fonts/F25_Bank_Printer.ttf") format("truetype");
14 font-weight: normal;
15 font-style: normal;
16}
17
18@tailwind base;
19@tailwind components;
20@tailwind utilities;
21
22@keyframes fadeOut {
23 0% {
24 opacity: 1;
25 }
26 75% {
27 opacity: 1;
28 } /* Hold full opacity for most of the animation */
29 100% {
30 opacity: 0;
31 }
32}
33
34.status-message-fade {
35 animation: fadeOut 2s forwards;
36}
37
38.font-spectral {
39 font-family: "Spectral", serif;
40}
41
42.grow-wrap {
43 /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
44 display: grid;
45}
46.grow-wrap::after {
47 /* Note the weird space! Needed to preventy jumpy behavior */
48 content: attr(data-replicated-value) " ";
49
50 /* This is how textarea text behaves */
51 white-space: pre-wrap;
52
53 /* Hidden from view, clicks, and screen readers */
54 visibility: hidden;
55}
56.grow-wrap > textarea {
57 /* You could leave this, but after a user resizes, then it ruins the auto sizing */
58 resize: none;
59
60 /* Firefox shows scrollbar on growth, you can hide like this. */
61 overflow: hidden;
62}
63.grow-wrap > textarea,
64.grow-wrap::after {
65 /* Identical styling required!! */
66 font: inherit;
67
68 /* Place on top of each other */
69 grid-area: 1 / 1 / 2 / 2;
70}
71
72/* Base styling */
73@layer base {
74 body {
75 @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100;
76 font-family: Space Mono;
77 }
78 button {
79 @apply rounded-xl;
80 }
81
82 input {
83 @apply px-4 py-2;
84 }
85
86 h1,
87 h2,
88 h3,
89 h4,
90 h5 {
91 font-family: Share Tech Mono, monospace;
92 }
93}
94
95.ticket {
96 font-family: F25_Bank_Printer, monospace;
97 @apply bg-white dark:bg-gray-800 p-8 relative overflow-hidden;
98 position: relative;
99 /* Angled corners */
100 clip-path: polygon(
101 20px 0,
102 /* Top left corner */ calc(100% - 20px) 0,
103 /* Top right corner */ 100% 20px,
104 /* Top right */ 100% calc(100% - 20px),
105 /* Bottom right */ calc(100% - 20px) 100%,
106 /* Bottom right corner */ 20px 100%,
107 /* Bottom left corner */ 0 calc(100% - 20px),
108 /* Bottom left */ 0 20px /* Back to top left */
109 );
110}
111
112/* Create side perforations using pseudo-elements */
113.ticket::before,
114.ticket::after {
115 content: "";
116 position: absolute;
117 top: 30px;
118 bottom: 30px;
119 width: 1px;
120 background-image: linear-gradient(
121 to bottom,
122 transparent 0%,
123 transparent 40%,
124 currentColor 40%,
125 currentColor 60%,
126 transparent 60%,
127 transparent 100%
128 );
129 background-size: 100% 20px;
130 background-repeat: repeat-y;
131 opacity: 0.2;
132}
133
134.ticket::before {
135 left: 8px;
136}
137
138.ticket::after {
139 right: 8px;
140}
141
142.dark .ticket {
143 background-image:
144 radial-gradient(
145 circle at 10px center,
146 rgb(17 24 39) 4px,
147 transparent 4px
148 ),
149 radial-gradient(
150 circle at calc(100% - 10px) center,
151 rgb(17 24 39) 4px,
152 transparent 4px
153 );
154}
155
156/* Remove the previous background images and corner cuts */
157.ticket::before,
158.ticket::after {
159 display: none;
160}
161
162.boarding-label {
163 @apply absolute top-2 right-2 bg-blue-100 dark:bg-blue-900 px-3 py-1
164 rounded-full text-xs font-bold uppercase tracking-wider;
165 transform: rotate(2deg);
166}
167
168.flight-info {
169 @apply flex justify-between items-center mt-4 pt-4 border-t border-dashed;
170}
171
172.passenger-info {
173 @apply text-sm text-gray-600 dark:text-gray-400 mt-2;
174}
175
176/* Modern Airport Sign Styles */
177.airport-sign {
178 position: relative;
179 transform-origin: top;
180 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
181 border-radius: 0.5rem;
182 backdrop-filter: blur(8px);
183}
184
185/* Dropdown panel styles */
186.airport-sign + div {
187 border-radius: 0.5rem;
188 backdrop-filter: blur(8px);
189}
190
191/* Remove old texture styles */
192.airport-sign,
193.airport-sign + div {
194 background-blend-mode: overlay;
195}
196
197@keyframes popin {
198 0% {
199 opacity: 0;
200 transform: scale(0.95);
201 }
202 100% {
203 opacity: 1;
204 transform: scale(1);
205 }
206}
207.animate-popin {
208 animation: popin 0.25s cubic-bezier(0.4, 0, 0.2, 1);
209}
210@keyframes bounce-short {
211 0%, 100% {
212 transform: translateY(0);
213 }
214 50% {
215 transform: translateY(-8px);
216 }
217}
218.animate-bounce-short {
219 animation: bounce-short 0.5s;
220}