diff --git a/input.css b/input.css --- a/input.css +++ b/input.css @@ -74,25 +74,28 @@ @layer components { .btn { - @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center - justify-center bg-transparent px-2 pb-[0.2rem] text-base - text-gray-900 before:absolute before:inset-0 before:-z-10 - before:block before:rounded before:border before:border-gray-200 - before:bg-white before:drop-shadow-sm - before:content-[''] hover:before:border-gray-300 - hover:before:bg-gray-50 - hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5] - focus:outline-none focus-visible:before:outline - focus-visible:before:outline-4 focus-visible:before:outline-gray-500 - active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)] - disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:before:border-gray-200 - disabled:hover:before:bg-white disabled:hover:before:shadow-none - dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700 - dark:hover:before:border-gray-600 dark:hover:before:bg-gray-700 - dark:hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.2),inset_0_-2px_0_0_#2d3748] - dark:focus-visible:before:outline-gray-400 - dark:active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.3)] - dark:disabled:hover:before:bg-gray-800 dark:disabled:hover:before:border-gray-700; + @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center + bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900 + before:absolute before:inset-0 before:-z-10 before:block before:rounded + before:border before:border-gray-200 before:bg-white + before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)] + before:content-[''] before:transition-all before:duration-150 before:ease-in-out + hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)] + hover:before:bg-gray-50 + dark:hover:before:bg-gray-700 + active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)] + focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400 + disabled:cursor-not-allowed disabled:opacity-50 + dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700; + } + + .btn-create { + @apply btn text-white + before:bg-green-600 hover:before:bg-green-700 + dark:before:bg-green-700 dark:hover:before:bg-green-800 + before:border before:border-green-700 hover:before:border-green-800 + focus-visible:before:outline-green-500 + disabled:before:bg-green-400 dark:disabled:before:bg-green-600; } .prose img { diff --git a/appview/pages/templates/layouts/topbar.html b/appview/pages/templates/layouts/topbar.html --- a/appview/pages/templates/layouts/topbar.html +++ b/appview/pages/templates/layouts/topbar.html @@ -1,6 +1,6 @@ {{ define "layouts/topbar" }}