ptr.pet
1@import 'tailwindcss';
2
3@plugin '@tailwindcss/forms';
4
5@theme {
6 @keyframes fade-in-scale {
7 0% {
8 opacity: 0;
9 transform: scale(0.95);
10 }
11 100% {
12 opacity: 1;
13 transform: scale(1);
14 }
15 }
16}
17
18@utility animate-fade-in-scale {
19 animation: fade-in-scale 0.2s ease-out forwards;
20}
21
22@utility animate-fade-in-scale-fast {
23 animation: fade-in-scale 0.1s ease-out forwards;
24}
25
26@utility single-line-input {
27 @apply w-full rounded-sm border-2 px-3 py-2 font-medium transition-all focus:scale-[1.02] focus:shadow-lg focus:outline-none;
28}
29
30@utility action-button {
31 @apply rounded-sm border-2 border-(--nucleus-accent) px-3 py-2 font-semibold text-(--nucleus-accent) transition-all hover:scale-105 hover:bg-(--nucleus-accent)/20;
32}
33
34@utility error-disclaimer {
35 @apply rounded-sm border-2 border-red-500 p-2;
36 background-color: color-mix(in srgb, var(--color-red-500) 15%, var(--nucleus-bg));
37 p {
38 @apply text-base text-wrap wrap-break-word text-red-500;
39 }
40}
41
42:root {
43 scrollbar-width: thin;
44 scrollbar-color: var(--nucleus-accent) var(--nucleus-bg);
45}
46
47button {
48 @apply hover:cursor-pointer;
49}
50
51.grain:before {
52 content: '';
53 background-color: transparent;
54 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch' /%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2' intercept='-0.5' /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' /%3E%3C/svg%3E");
55 background-repeat: repeat;
56 background-size: 40vmax;
57 opacity: 0.08;
58 top: 0;
59 left: 0;
60 position: fixed;
61 width: 100%;
62 height: 100%;
63 pointer-events: none;
64}
65
66.color-picker {
67 --cp-bg-color: var(--nucleus-bg);
68 --cp-border-color: var(--nucleus-accent);
69 --cp-text-color: var(--nucleus-fg);
70 --cp-input-color: color-mix(in srgb, var(--nucleus-accent) 10%, transparent);
71 --cp-button-hover-color: color-mix(in srgb, var(--nucleus-accent) 30%, transparent);
72 --picker-height: 8rem;
73 --picker-width: 8rem;
74}
75
76.animate-pulse-highlight {
77 animation: pulse-highlight 0.6s ease-in-out 3;
78}
79
80@keyframes pulse-highlight {
81 0%,
82 100% {
83 box-shadow: 0 0 0 0 var(--nucleus-selected-post);
84 }
85 50% {
86 box-shadow: 0 0 20px 5px var(--nucleus-selected-post);
87 }
88}