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 border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3 px-3 py-2 font-medium transition-all;
28 &:focus {
29 @apply scale-[1.02] border-(--nucleus-accent)/80 bg-(--nucleus-accent)/10 [box-shadow:none] outline-none;
30 }
31}
32
33@utility action-button {
34 @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;
35}
36
37@utility error-disclaimer {
38 @apply rounded-sm border-2 border-red-500 p-2;
39 background-color: color-mix(in srgb, var(--color-red-500) 15%, var(--nucleus-bg));
40 p {
41 @apply text-base text-wrap wrap-break-word text-red-500;
42 }
43}
44
45:root {
46 scrollbar-width: thin;
47 scrollbar-color: var(--nucleus-accent) var(--nucleus-bg);
48}
49
50button {
51 @apply hover:cursor-pointer;
52}
53
54a {
55 &:hover {
56 @apply cursor-pointer underline;
57 }
58}
59
60.grain:before {
61 content: '';
62 background-color: transparent;
63 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");
64 background-repeat: repeat;
65 background-size: 40vmax;
66 opacity: 0.08;
67 top: 0;
68 left: 0;
69 position: fixed;
70 width: 100%;
71 height: 100%;
72 pointer-events: none;
73}
74
75.color-picker {
76 --cp-bg-color: var(--nucleus-bg);
77 --cp-border-color: var(--nucleus-accent);
78 --cp-text-color: var(--nucleus-fg);
79 --cp-input-color: color-mix(in srgb, var(--nucleus-accent) 10%, transparent);
80 --cp-button-hover-color: color-mix(in srgb, var(--nucleus-accent) 30%, transparent);
81 --picker-height: 8rem;
82 --picker-width: 8rem;
83}
84
85.animate-pulse-highlight {
86 animation: pulse-highlight 0.6s ease-in-out 3;
87}
88
89@keyframes pulse-highlight {
90 0%,
91 100% {
92 box-shadow: 0 0 0 0 var(--nucleus-selected-post);
93 }
94 50% {
95 box-shadow: 0 0 20px 5px var(--nucleus-selected-post);
96 }
97}