108 lines
1.9 KiB
CSS
108 lines
1.9 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Orbitron:wght@400;500;600;700;800;900&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-bastille text-white
|
|
}
|
|
|
|
input,
|
|
select {
|
|
@apply p-1
|
|
}
|
|
|
|
option {
|
|
@apply text-cinder-500
|
|
}
|
|
|
|
input:not(.no-default),
|
|
select:not(.no-default) {
|
|
@apply rounded-lg text-cinder-500 interactive
|
|
}
|
|
|
|
* {
|
|
font-family: 'Open Sans', sans-serif;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.panel {
|
|
@apply bg-cinder shadow-xl p-8 rounded-xl
|
|
}
|
|
|
|
.header {
|
|
@apply text-2xl font-bold
|
|
}
|
|
|
|
.subheader {
|
|
@apply text-xl font-bold
|
|
}
|
|
|
|
button:not(.no-default) {
|
|
@apply interactive p-1
|
|
}
|
|
|
|
button:not([class*="bg-"]):not(.no-default) {
|
|
@apply bg-olive-drab
|
|
}
|
|
|
|
.interactive {
|
|
@apply border-2 rounded-lg border-falcon cursor-pointer
|
|
}
|
|
|
|
.interactive svg {
|
|
@apply fill-falcon
|
|
}
|
|
|
|
.interactive:disabled {
|
|
@apply border-falcon-300 brightness-50 cursor-default
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fade 300ms forwards ease-in;
|
|
animation-delay: 300ms;
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fade 300ms forwards ease-in reverse;
|
|
}
|
|
|
|
.trash-can,
|
|
.anvil {
|
|
overflow: visible;
|
|
}
|
|
|
|
.trash-can path.trash-lid,
|
|
.anvil .anvil-base,
|
|
.anvil .anvil-body {
|
|
transition: 300ms transform, 300ms rotate, 300ms fill, 300ms stroke;
|
|
}
|
|
|
|
.trash-can:hover path.trash-lid {
|
|
transform: translate(-5%, -10%);
|
|
rotate: -10deg;
|
|
}
|
|
|
|
.anvil:hover .anvil-base {
|
|
transform: translate(0px, 5%);
|
|
}
|
|
|
|
.anvil:hover .anvil-body {
|
|
transform: translate(0px, -5%);
|
|
}
|
|
}
|
|
|
|
@layer utilities {}
|
|
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
} |