SimpleNotes/css/styles.css

@tailwind base;

@tailwind components;

.btn {
    @apply font-semibold py-2 px-4 rounded;

    &:focus {
        @apply outline-none shadow-outline;
    }
}

.btn-teal {
    @apply bg-teal-500 text-white;

    &:focus {
        @apply bg-teal-600;
    }

    &:hover {
        @apply bg-teal-600;
    }
}

.btn-green {
    @apply bg-green-500 text-white;

    &:focus {
        @apply bg-green-600;
    }

    &:hover {
        @apply bg-green-600;
    }
}

.nav {
    height: 64px;
}

.centered {
    min-height: calc(100vh - 64px);
}

.tag {
    @apply italic font-semibold text-sm bg-teal-500 text-gray-900 rounded-full py-1 px-2 align-middle;
}

nav.pages {
    @apply flex pl-0 list-none rounded my-2 flex justify-center;
}

nav.pages :first-child {
    @apply rounded-l;
}

nav.pages :last-child {
    @apply rounded-r;
}

nav.pages :not(:last-child) {
    @apply border-r-0;
}

nav.pages a {
    @apply relative block py-2 px-3 leading-tight border bg-gray-800 border-gray-700 text-teal-300;
}

nav.pages a:hover {
    @apply bg-gray-700;
}

nav.pages a.active {
    @apply bg-teal-800 border-gray-700 text-white;
}

nav.pages a.active:hover {
    @apply bg-gray-700;
}

#note a {
    @apply text-blue-700 underline;
}

#note p {
    @apply my-4;
}

#note blockquote,
#note figure {
    @apply my-4 mx-10;
}

#note hr {
    @apply border; }

#note h1 {
    @apply text-4xl font-bold my-2; }

#note h2 {
    @apply text-2xl font-bold my-3; }

#note h3 {
    @apply text-lg font-bold my-4; }

#note h4 {
    @apply text-base font-bold my-5; }

#note h5 {
    @apply text-sm font-bold my-6; }

#note h6 {
    @apply text-xs font-bold my-10; }

#note ul,
#note menu {
    @apply list-disc my-1 pl-10; }

#note ol {
    @apply list-decimal my-4 pl-10; }

#note ul ul,
#note ol ul {
    list-style-type: circle; }

#note ul ul ul,
#note ul ol ul,
#note ol ul ul,
#note ol ol ul {
    list-style-type: square; }

#note dd {
    @apply pl-10; }

#note dl {
    @apply my-4; }

#note ul ul,
#note ul ol,
#note ul menu,
#note ul dl,
#note ol ul,
#note ol ol,
#note ol menu,
#note ol dl,
#note menu ul,
#note menu ol,
#note menu menu,
#note menu dl,
#note dl ul,
#note dl ol,
#note dl menu,
#note dl dl {
    margin: 0; }

#note legend {
    @apply py-0 px-1; }

#note fieldset {
    @apply my-0 mx-1 pt-0 px-1 pb-2; }

#note b,
#note strong {
    font-weight: bold; }

#note pre {
    @apply my-4 rounded-md overflow-x-auto p-2 block font-mono bg-gray-700; }

@tailwind utilities;