appview-less bluesky client
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
12 100% {
13 opacity: 1;
14 transform: scale(1);
15 }
16 }
17}
18
19@utility animate-fade-in-scale {
20 animation: fade-in-scale 0.2s ease-out forwards;
21}
22
23@utility animate-fade-in-scale-fast {
24 animation: fade-in-scale 0.1s ease-out forwards;
25}
26
27@utility single-line-input {
28 @apply w-full rounded-sm border-2 border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3 px-3 py-2 font-medium transition-all;
29
30 &:focus {
31 @apply scale-[1.02] border-(--nucleus-accent)/80 bg-(--nucleus-accent)/10 [box-shadow:none] outline-none;
32 }
33}
34
35@utility action-button {
36 @apply rounded-sm border-2 border-(--nucleus-accent) px-3 py-2 font-semibold text-(--nucleus-accent) transition-all;
37
38 &:enabled {
39 @apply hover:scale-105 hover:bg-(--nucleus-accent)/20;
40 }
41
42 &:disabled {
43 @apply opacity-60 hover:scale-100;
44 }
45}
46
47@utility error-disclaimer {
48 @apply rounded-sm border-2 border-red-500 p-2;
49 background-color: color-mix(in srgb, var(--color-red-500) 15%, var(--nucleus-bg));
50
51 p {
52 @apply text-base text-wrap wrap-break-word text-red-500;
53 }
54}
55
56:root {
57 scrollbar-width: thin;
58 scrollbar-color: var(--nucleus-accent) var(--nucleus-bg);
59}
60
61html,
62body {
63 background-color: var(--nucleus-bg);
64 color: var(--nucleus-fg);
65}
66
67button {
68 @apply hover:cursor-pointer;
69
70 &:disabled {
71 @apply cursor-not-allowed;
72 }
73}
74
75a {
76 &:hover {
77 @apply cursor-pointer underline;
78 }
79}
80
81.grain:before {
82 content: '';
83 background-color: transparent;
84 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");
85 background-repeat: repeat;
86 background-size: 40vmax;
87 opacity: 0.08;
88 top: 0;
89 left: 0;
90 position: fixed;
91 width: 100%;
92 height: 100%;
93 pointer-events: none;
94}
95
96.color-picker {
97 --cp-bg-color: var(--nucleus-bg);
98 --cp-border-color: var(--nucleus-accent);
99 --cp-text-color: var(--nucleus-fg);
100 --cp-input-color: color-mix(in srgb, var(--nucleus-accent) 10%, transparent);
101 --cp-button-hover-color: color-mix(in srgb, var(--nucleus-accent) 30%, transparent);
102 --picker-height: 8rem;
103 --picker-width: 8rem;
104}
105
106.animate-pulse-highlight {
107 animation: pulse-highlight 0.6s ease-in-out 3;
108}
109
110@keyframes pulse-highlight {
111
112 0%,
113 100% {
114 box-shadow: 0 0 0 0 var(--nucleus-selected-post);
115 }
116
117 50% {
118 box-shadow: 0 0 20px 5px var(--nucleus-selected-post);
119 }
120}
121
122@keyframes slide-in-from-right {
123 from {
124 transform: translateX(144px);
125 opacity: 0;
126 }
127
128 to {
129 transform: translateX(0);
130 opacity: 1;
131 }
132}
133
134@keyframes slide-in-from-left {
135 from {
136 transform: translateX(-144px);
137 opacity: 0;
138 }
139
140 to {
141 transform: translateX(0);
142 opacity: 1;
143 }
144}
145
146.animate-slide-in-right {
147 animation: slide-in-from-right 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
148}
149
150.animate-slide-in-left {
151 animation: slide-in-from-left 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
152}
153
154.post-dropdown {
155 @apply flex min-w-54 flex-col gap-1 rounded-sm border-2 p-1 shadow-2xl backdrop-blur-xl backdrop-brightness-60;
156}
157
158.settings-box {
159 @apply rounded-sm border-2 border-dashed border-(--nucleus-fg)/10 p-4;
160}
161
162.settings-header {
163 @apply mb-2 text-lg font-bold;
164}
165
166.settings-desc {
167 @apply mb-2 text-sm text-(--nucleus-fg)/80;
168}