@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;
}