145 lines
2.7 KiB
CSS
145 lines
2.7 KiB
CSS
@import 'tailwindcss/base';
|
|
@import 'tailwindcss/components';
|
|
@import 'tailwindcss/utilities';
|
|
|
|
@import 'variables.css';
|
|
@import 'utilities.css';
|
|
@import 'animations.css';
|
|
|
|
@import 'extends/grid.css';
|
|
|
|
@import 'typography/font-faces.css';
|
|
@import 'typography/text-shadows.css';
|
|
|
|
@import 'elements/buttons.css';
|
|
@import 'elements/forms.css';
|
|
@import 'elements/links.css';
|
|
@import 'elements/pre-codes.css';
|
|
@import 'elements/progress-bars.css';
|
|
@import 'elements/tables.css';
|
|
|
|
@import 'components/accordian-menus.css';
|
|
@import 'components/alerts.css';
|
|
@import 'components/breadcrumbs.css';
|
|
@import 'components/cards.css';
|
|
@import 'components/modals.css';
|
|
@import 'components/navbars.css';
|
|
@import 'components/pagination.css';
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
overflow: auto;
|
|
scrollbar-gutter: stable both-edges;
|
|
}
|
|
|
|
html, body {
|
|
transition-duration: 0.05s;
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
|
|
html, body {
|
|
transition-property: background, color;
|
|
}
|
|
|
|
button, a {
|
|
transition-property: all;
|
|
}
|
|
|
|
nav {
|
|
user-select: none;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.grid-container {
|
|
@apply grid-cols-1;
|
|
gap: 2em 0em;
|
|
grid-template-cols: minmax(80px, 1fr);
|
|
grid-template-areas:
|
|
"nav"
|
|
"main";
|
|
}
|
|
|
|
.nav {
|
|
@apply grid;
|
|
grid-template-rows: minmax(80px, 1fr);
|
|
grid-template-areas:
|
|
"navh"
|
|
"navc";
|
|
grid-area: nav;
|
|
}
|
|
|
|
.navh {
|
|
grid-area: navh;
|
|
}
|
|
|
|
.navc {
|
|
@apply flex flex-col;
|
|
grid-area: navc;
|
|
}
|
|
|
|
.main {
|
|
@apply grid pb-8;
|
|
grid-template-areas:
|
|
"mainc";
|
|
grid-area: main;
|
|
}
|
|
|
|
.mainh {
|
|
@apply hidden;
|
|
grid-area: mainh;
|
|
}
|
|
|
|
.mainc {
|
|
grid-area: mainc;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.grid-container {
|
|
@apply grid-cols-2;
|
|
gap: 0em 3em;
|
|
grid-template-columns: 300px 1fr;
|
|
grid-template-areas:
|
|
"nav main";
|
|
}
|
|
|
|
.nav {
|
|
@apply grid grid-cols-1 grid-flow-row;
|
|
gap: 2em 0em;
|
|
grid-template-rows: 80px 1fr;
|
|
grid-template-areas:
|
|
"navh"
|
|
"navc";
|
|
grid-area: nav;
|
|
}
|
|
|
|
.navh {
|
|
grid-area: navh;
|
|
}
|
|
|
|
.navc {
|
|
grid-area: navc;
|
|
}
|
|
|
|
.main {
|
|
@apply grid grid-cols-1 grid-flow-row pb-8;
|
|
gap: 2em 0em;
|
|
grid-template-rows: 80px 1fr;
|
|
grid-template-areas:
|
|
"mainh"
|
|
"mainc";
|
|
grid-area: main;
|
|
}
|
|
|
|
.mainh {
|
|
@apply flex flex-row items-stretch justify-between;
|
|
grid-area: mainh;
|
|
}
|
|
|
|
.mainc {
|
|
@apply grid grid-cols-6 gap-8;
|
|
grid-template-rows: min-content 1fr;
|
|
grid-area: mainc;
|
|
}
|
|
}
|