ptr.pet
1@import 'tailwindcss';
2@plugin '@tailwindcss/forms';
3
4@theme {
5 @keyframes fade-in-scale {
6 0% {
7 opacity: 0;
8 transform: scale(0.95);
9 }
10 100% {
11 opacity: 1;
12 transform: scale(1);
13 }
14 }
15}
16
17@utility animate-fade-in-scale {
18 animation: fade-in-scale 0.2s ease-out forwards;
19}
20
21@utility animate-fade-in-scale-fast {
22 animation: fade-in-scale 0.1s ease-out forwards;
23}
24
25@utility single-line-input {
26 @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;
27}
28
29@utility action-button {
30 @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;
31}
32
33@utility error-disclaimer {
34 @apply rounded-sm border-2 border-red-500 p-2;
35 background-color: color-mix(in srgb, var(--color-red-500) 15%, var(--nucleus-bg));
36 p {
37 @apply text-base text-wrap wrap-break-word text-red-500;
38 }
39}
40
41:root {
42 scrollbar-width: thin;
43 scrollbar-color: var(--nucleus-accent) var(--nucleus-bg);
44}
45
46button {
47 @apply hover:cursor-pointer;
48}
49
50.grain:before {
51 content: '';
52 background-color: transparent;
53 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");
54 background-repeat: repeat;
55 background-size: 40vmax;
56 opacity: 0.08;
57 top: 0;
58 left: 0;
59 position: fixed;
60 width: 100%;
61 height: 100%;
62 pointer-events: none;
63}
64
65.color-picker {
66 --cp-bg-color: var(--nucleus-bg);
67 --cp-border-color: var(--nucleus-accent);
68 --cp-text-color: var(--nucleus-fg);
69 --cp-input-color: color-mix(in srgb, var(--nucleus-accent) 10%, transparent);
70 --cp-button-hover-color: color-mix(in srgb, var(--nucleus-accent) 30%, transparent);
71 --picker-height: 8rem;
72 --picker-width: 8rem;
73}