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:
92 Share Tech Mono,
93 monospace;
94 }
95}
96
97.ticket {
98 font-family: F25_Bank_Printer, monospace;
99 @apply bg-white dark:bg-gray-800 p-8 relative overflow-hidden;
100 position: relative;
101 /* Angled corners */
102 clip-path: polygon(
103 20px 0,
104 /* Top left corner */ calc(100% - 20px) 0,
105 /* Top right corner */ 100% 20px,
106 /* Top right */ 100% calc(100% - 20px),
107 /* Bottom right */ calc(100% - 20px) 100%,
108 /* Bottom right corner */ 20px 100%,
109 /* Bottom left corner */ 0 calc(100% - 20px),
110 /* Bottom left */ 0 20px /* Back to top left */
111 );
112}
113
114/* Create side perforations using pseudo-elements */
115.ticket::before,
116.ticket::after {
117 content: "";
118 position: absolute;
119 top: 30px;
120 bottom: 30px;
121 width: 1px;
122 background-image: linear-gradient(
123 to bottom,
124 transparent 0%,
125 transparent 40%,
126 currentColor 40%,
127 currentColor 60%,
128 transparent 60%,
129 transparent 100%
130 );
131 background-size: 100% 20px;
132 background-repeat: repeat-y;
133 opacity: 0.2;
134}
135
136.ticket::before {
137 left: 8px;
138}
139
140.ticket::after {
141 right: 8px;
142}
143
144.dark .ticket {
145 background-image:
146 radial-gradient(
147 circle at 10px center,
148 rgb(17 24 39) 4px,
149 transparent 4px
150 ),
151 radial-gradient(
152 circle at calc(100% - 10px) center,
153 rgb(17 24 39) 4px,
154 transparent 4px
155 );
156}
157
158/* Remove the previous background images and corner cuts */
159.ticket::before,
160.ticket::after {
161 display: none;
162}
163
164.boarding-label {
165 @apply absolute top-2 right-2 bg-blue-100 dark:bg-blue-900 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider;
166 transform: rotate(2deg);
167}
168
169.flight-info {
170 @apply flex justify-between items-center mt-4 pt-4 border-t border-dashed;
171}
172
173.passenger-info {
174 @apply text-sm text-gray-600 dark:text-gray-400 mt-2;
175}
176
177/* Modern Airport Sign Styles */
178.airport-sign {
179 position: relative;
180 transform-origin: top;
181 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
182 border-radius: 0.5rem;
183 backdrop-filter: blur(8px);
184}
185
186/* Dropdown panel styles */
187.airport-sign + div {
188 border-radius: 0.5rem;
189 backdrop-filter: blur(8px);
190}
191
192/* Remove old texture styles */
193.airport-sign,
194.airport-sign + div {
195 background-blend-mode: overlay;
196}
197
198@keyframes popin {
199 0% { opacity: 0; transform: scale(0.95); }
200 100% { opacity: 1; transform: scale(1); }
201}
202.animate-popin {
203 animation: popin 0.25s cubic-bezier(0.4,0,0.2,1);
204}
205@keyframes bounce-short {
206 0%, 100% { transform: translateY(0); }
207 50% { transform: translateY(-8px); }
208}
209.animate-bounce-short {
210 animation: bounce-short 0.5s;
211}