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 bg-red-500/8 p-2;
35 p {
36 @apply text-base text-wrap wrap-break-word text-red-500;
37 }
38}
39
40:root {
41 scrollbar-width: thin;
42 scrollbar-color: var(--nucleus-accent) var(--nucleus-bg);
43}
44
45button {
46 @apply hover:cursor-pointer;
47}
48
49.grain:before {
50 content: '';
51 background-color: transparent;
52 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");
53 background-repeat: repeat;
54 background-size: 40vmax;
55 opacity: 0.08;
56 top: 0;
57 left: 0;
58 position: fixed;
59 width: 100%;
60 height: 100%;
61 pointer-events: none;
62}
63
64.color-picker {
65 --cp-bg-color: var(--nucleus-bg);
66 --cp-border-color: var(--nucleus-accent);
67 --cp-text-color: var(--nucleus-fg);
68 --cp-input-color: color-mix(in srgb, var(--nucleus-accent) 10%, transparent);
69 --cp-button-hover-color: color-mix(in srgb, var(--nucleus-accent) 30%, transparent);
70 --picker-height: 8rem;
71 --picker-width: 8rem;
72}