70 lines
2.0 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply bg-ctp-crust;
font-family: Inter,sans-serif;
font-weight: 400;
}
a {
@apply text-ctp-lavender;
}
.input {
@apply w-full pl-3 pr-3 pt-2 pb-2 rounded border bg-ctp-mantle border-ctp-overlay0 hover:border-ctp-overlay1 focus:border-ctp-lavender text-ctp-text outline-none;
}
.input-file {
@apply block w-full border rounded cursor-pointer bg-ctp-base border-ctp-surface0 text-ctp-subtext0 focus:outline-none;
@apply file:bg-ctp-mantle file:border-ctp-surface0 file:mr-5 file:py-2 file:px-3 file:h-full file:border-y-0 file:border-l-0 file:border-r file:text-ctp-blue hover:file:cursor-pointer hover:file:bg-ctp-base;
}
label {
@apply text-ctp-text;
}
.button {
@apply pt-1 pb-1 pl-3 pr-3 sm:pt-2 sm:pb-2 sm:pl-5 sm:pr-5 rounded bg-ctp-mantle border border-ctp-surface0 hover:bg-ctp-base text-ctp-blue cursor-pointer;
}
.link-button {
@apply button text-ctp-lavender cursor-pointer border-none;
}
.hline {
@apply border-t border-ctp-surface0 ml-0 mr-0;
}
h1 {
@apply text-ctp-text pt-5 pb-5 border-b border-ctp-overlay0 mb-5;
}
label {
@apply text-ctp-text;
}
.icon {
@apply inline-block select-none text-center overflow-visible w-6 h-6 stroke-ctp-text;
}
}
@layer utilities {
.bg-grid {
background:
linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(187, 65, 143, 1) 10%,
rgba(187, 65, 143, 1) 2px, rgba(0, 0, 0, 0) 0px),
linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(187, 65, 143, 1) 10%,
rgba(187, 65, 143, 1) 2px, rgba(0, 0, 0, 0) 0px);
background-size: 2em 4em, 6em 2em;
transform: perspective(500px) rotateX(60deg) scale(0.5);
transform-origin: 50% 0%;
z-index: -1;
@apply absolute w-[250%] -left-[75%] h-[200%];
}
}