185 lines
2.9 KiB
CSS
185 lines
2.9 KiB
CSS
@import "./fonts.css";
|
|
@import 'tailwindcss/base';
|
|
@import 'tailwindcss/components';
|
|
@import 'tailwindcss/utilities';
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: Kanit;
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2.6rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
input {
|
|
@apply rounded rounded-md drop-shadow-sm px-2 py-1;
|
|
@apply bg-accent-100;
|
|
@apply w-full;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
@apply rounded rounded-lg drop-shadow-md px-4 py-2;
|
|
@apply bg-accent-600;
|
|
@apply font-semibold;
|
|
@apply hover:drop-shadow-xl;
|
|
}
|
|
|
|
select {
|
|
@apply rounded rounded-md drop-shadow-sm px-2 py-1;
|
|
@apply bg-accent-100;
|
|
@apply w-full;
|
|
}
|
|
|
|
select.error {
|
|
@apply border border-failure;
|
|
}
|
|
|
|
input.error {
|
|
@apply border border-failure;
|
|
}
|
|
|
|
fieldset {
|
|
@apply border border-accent p-4;
|
|
}
|
|
legend {
|
|
@apply text-sm text-accent-600 px-2;
|
|
}
|
|
|
|
a {
|
|
@apply underline text-primary-300;
|
|
}
|
|
|
|
.btn {
|
|
text-align: center;
|
|
@apply rounded rounded-lg drop-shadow-md px-4 py-2;
|
|
@apply bg-accent-600;
|
|
@apply font-semibold;
|
|
@apply hover:drop-shadow-xl;
|
|
}
|
|
|
|
.btn-outline {
|
|
text-align: center;
|
|
@apply rounded rounded-lg drop-shadow-md px-4 py-2;
|
|
@apply text-accent-600 bg-accent-600/10;
|
|
@apply border-2 border-accent-600;
|
|
@apply font-semibold;
|
|
@apply hover:drop-shadow-xl;
|
|
}
|
|
|
|
body.global {
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
header.global, main.global, footer.global {
|
|
width: 100%;
|
|
}
|
|
|
|
main.global {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
div.status-message {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 0.5rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
div.status-message.error {
|
|
@apply font-semibold bg-failure/50 border border-failure;
|
|
}
|
|
|
|
div.call-to-action-box {
|
|
@apply bg-gradient-to-r from-secondary-300/75 to-secondary-500/75;
|
|
@apply rounded-md py-4 px-6;
|
|
}
|
|
|
|
.loader--loading {
|
|
animation: loading 2s infinite linear;
|
|
}
|
|
.loader--finished {
|
|
animation: finished 1.5s ease-in both;
|
|
}
|
|
.loader--value {
|
|
animation: loaded 1s ease-out both;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
transform: scaleX(0%) translateX(-100%);
|
|
transform-origin: left;
|
|
}
|
|
|
|
50% {
|
|
transform: scaleX(50%);
|
|
transform-origin: center;
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(0%) translateX(100%);
|
|
transform-origin: right;
|
|
}
|
|
}
|
|
|
|
@keyframes finished {
|
|
0% {
|
|
transform: scaleX(0%);
|
|
transform-origin: center;
|
|
}
|
|
|
|
50% {
|
|
transform: scaleX(100%);
|
|
transform-origin: center;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(100%) translateX(1000%);
|
|
transform-origin: right;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes loaded {
|
|
0% {
|
|
transform: translateX(1000%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|