Something went wrong. Try again.
appview-less bluesky client
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@theme { @keyframes fade-in-scale { 0% { opacity: 0; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); } }}
@utility animate-fade-in-scale { animation: fade-in-scale 0.2s ease-out forwards;}
@utility animate-fade-in-scale-fast { animation: fade-in-scale 0.1s ease-out forwards;}
@utility single-line-input { @apply w-full rounded-sm border-2 border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3 px-3 py-2 font-medium transition-all;
&:focus { @apply scale-[1.02] border-(--nucleus-accent)/80 bg-(--nucleus-accent)/10 [box-shadow:none] outline-none; }}
@utility action-button { @apply rounded-sm border-2 border-(--nucleus-accent) px-3 py-2 font-semibold text-(--nucleus-accent) transition-all;
&:enabled { @apply hover:scale-105 hover:bg-(--nucleus-accent)/20; }
&:disabled { @apply opacity-60 hover:scale-100; }}
@utility error-disclaimer { @apply rounded-sm border-2 border-red-500 p-2; background-color: color-mix(in srgb, var(--color-red-500) 15%, var(--nucleus-bg));
p { @apply text-base text-wrap wrap-break-word text-red-500; }}
:root { scrollbar-width: thin; scrollbar-color: var(--nucleus-accent) var(--nucleus-bg);}
html,body { background-color: var(--nucleus-bg); color: var(--nucleus-fg);}
button { @apply hover:cursor-pointer;
&:disabled { @apply cursor-not-allowed; }}
a { &:hover { @apply cursor-pointer underline; }}
.grain:before { content: ''; background-color: transparent; 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"); background-repeat: repeat; background-size: 40vmax; opacity: 0.08; top: 0; left: 0; position: fixed; width: 100%; height: 100%; pointer-events: none;}
.color-picker { --cp-bg-color: var(--nucleus-bg); --cp-border-color: var(--nucleus-accent); --cp-text-color: var(--nucleus-fg); --cp-input-color: color-mix(in srgb, var(--nucleus-accent) 10%, transparent); --cp-button-hover-color: color-mix(in srgb, var(--nucleus-accent) 30%, transparent); --picker-height: 8rem; --picker-width: 8rem;}
.animate-pulse-highlight { animation: pulse-highlight 0.6s ease-in-out 3;}
@keyframes pulse-highlight { 0%, 100% { box-shadow: 0 0 0 0 var(--nucleus-selected-post); }
50% { box-shadow: 0 0 20px 5px var(--nucleus-selected-post); }}
@keyframes slide-in-from-right { from { transform: translateX(144px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }}
@keyframes slide-in-from-left { from { transform: translateX(-144px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }}
.animate-slide-in-right { animation: slide-in-from-right 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
.animate-slide-in-left { animation: slide-in-from-left 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
.post-dropdown { @apply flex min-w-54 flex-col gap-1 rounded-sm border-2 p-1 shadow-2xl backdrop-blur-xl backdrop-brightness-60;}
.settings-box { @apply rounded-sm border-2 border-dashed border-(--nucleus-fg)/10 p-4;}
.settings-header { @apply mb-2 text-lg font-bold;}
.settings-desc { @apply mb-2 text-sm text-(--nucleus-fg)/80;}