74 lines
2.2 KiB
CSS
74 lines
2.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--animate-like: like 0.5s ease;
|
|
|
|
@keyframes like {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
30% {
|
|
transform: scale(1.25);
|
|
}
|
|
60% {
|
|
transform: scale(0.95);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
body {
|
|
@apply bg-amber-50;
|
|
|
|
--color1: var(--color-amber-50);
|
|
--color2: var(--color-amber-100);
|
|
|
|
background-image: repeating-linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),
|
|
repeating-linear-gradient(45deg, var(--color1) 25%, var(--color2) 25%, var(--color2) 75%, var(--color1) 75%, var(--color1));
|
|
background-position: 0 0, 10px 10px;
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
.pill {
|
|
@apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-4xl shadow-md;
|
|
}
|
|
|
|
.button {
|
|
@apply hover:bg-orange-400 transition cursor-pointer;
|
|
}
|
|
|
|
.input {
|
|
@apply !bg-orange-200 outline-0 focus:ring-[3px] ring-orange-400/50 transition placeholder:text-black/40;
|
|
}
|
|
|
|
.checkbox {
|
|
@apply flex items-center justify-center appearance-none size-5 bg-orange-300 border-2 border-orange-400 rounded-md cursor-pointer checked:bg-orange-400;
|
|
}
|
|
|
|
.checkbox::after {
|
|
@apply hidden size-4 bg-cover bg-no-repeat content-[''];
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
|
|
}
|
|
|
|
.checkbox:checked::after {
|
|
@apply block;
|
|
}
|
|
|
|
[data-tooltip] {
|
|
@apply relative z-10;
|
|
}
|
|
|
|
[data-tooltip]::before {
|
|
@apply content-[''] absolute left-1/2 -translate-x-1/2 top-full size-0 border-4 border-transparent border-b-orange-400 opacity-0 scale-75 transition-all duration-200 ease-out origin-bottom;
|
|
}
|
|
|
|
[data-tooltip]::after {
|
|
@apply content-[attr(data-tooltip)] absolute left-1/2 -translate-x-1/2 top-full mt-2 px-2 py-1 bg-orange-400 border border-orange-400 rounded-md text-sm text-white opacity-0 scale-75 transition-all duration-200 ease-out origin-top shadow-md whitespace-nowrap select-none pointer-events-none;
|
|
}
|
|
|
|
[data-tooltip]:hover::before,
|
|
[data-tooltip]:hover::after {
|
|
@apply opacity-100 scale-100;
|
|
}
|