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