362 lines
6.7 KiB
CSS
362 lines
6.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
body {
|
|
@apply bg-neutral-100 text-neutral-800;
|
|
@apply dark:bg-gray-900 dark:text-neutral-300;
|
|
}
|
|
|
|
a {
|
|
@apply text-blue-900 dark:text-blue-200;
|
|
|
|
&:hover {
|
|
@apply text-blue-700 dark:text-blue-400;
|
|
}
|
|
}
|
|
|
|
header {
|
|
@apply bg-neutral-100 dark:bg-gray-900;
|
|
@apply text-neutral-800 dark:text-neutral-200;
|
|
@apply border-b border-gray-400 dark:border-gray-700;
|
|
@apply w-full mb-4 shadow-sm;
|
|
|
|
nav {
|
|
@apply container mx-auto;
|
|
@apply flex flex-row justify-between;
|
|
|
|
> ul {
|
|
@apply list-none flex flex-row;
|
|
|
|
li.logo {
|
|
svg {
|
|
@apply relative w-8 -top-0.5;
|
|
}
|
|
}
|
|
|
|
li a,
|
|
li span {
|
|
@apply block px-4 py-4;
|
|
@apply text-neutral-800 dark:text-neutral-200;
|
|
|
|
&:hover {
|
|
@apply bg-slate-700/25;
|
|
@apply text-neutral-800 dark:text-neutral-200;
|
|
}
|
|
}
|
|
|
|
li span {
|
|
@apply cursor-pointer select-none;
|
|
}
|
|
|
|
li.dropdown {
|
|
@apply relative;
|
|
|
|
ul {
|
|
@apply hidden absolute top-full left-0 w-full;
|
|
@apply bg-slate-900;
|
|
@apply w-max;
|
|
}
|
|
|
|
&.open {
|
|
ul {
|
|
@apply block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Move any drop-downs on the right-hand side of the navigation onto the right */
|
|
nav:last-child > ul > li.dropdown > ul {
|
|
@apply left-auto right-0;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
@apply container mx-auto mt-8 mb-4;
|
|
@apply flex flex-col items-center;
|
|
@apply text-sm text-neutral-600 dark:text-neutral-400;
|
|
|
|
a {
|
|
@apply text-neutral-500 dark:text-neutral-500;
|
|
|
|
&:hover {
|
|
@apply text-neutral-700 dark:text-neutral-300;
|
|
}
|
|
}
|
|
}
|
|
|
|
progress {
|
|
@apply rounded-md;
|
|
}
|
|
|
|
.form {
|
|
@apply flex flex-col gap-2;
|
|
}
|
|
|
|
label {
|
|
@apply block mb-2;
|
|
@apply text-sm font-medium;
|
|
@apply text-gray-900 dark:text-white;
|
|
}
|
|
|
|
input + label {
|
|
@apply mt-2;
|
|
}
|
|
|
|
.field {
|
|
@apply block w-full p-2.5;
|
|
@apply sm:text-sm;
|
|
@apply outline-none border rounded-lg;
|
|
@apply bg-gray-50 border-gray-300 text-gray-900;
|
|
@apply dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white;
|
|
@apply focus:ring-primary-600 focus:border-primary-600;
|
|
@apply dark:focus:ring-blue-500 dark:focus:border-blue-500;
|
|
|
|
&:disabled {
|
|
@apply bg-gray-100 border-gray-200 text-gray-500;
|
|
@apply dark:bg-gray-800 dark:border-gray-700 dark:text-gray-500;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
@apply w-full rounded-lg;
|
|
@apply px-5 py-2.5;
|
|
@apply text-white bg-primary-600 hover:text-white hover:bg-primary-700;
|
|
@apply focus:ring-4 focus:outline-none focus:ring-primary-300;
|
|
@apply dark:focus:ring-primary-800;
|
|
@apply text-center text-sm font-medium;
|
|
|
|
&:disabled {
|
|
@apply text-white/75 dark:text-white/50;
|
|
@apply bg-primary-400 dark:bg-primary-900;
|
|
}
|
|
|
|
&.success {
|
|
@apply bg-green-600 text-white;
|
|
@apply dark:bg-green-500 dark:text-black;
|
|
|
|
&:disabled {
|
|
@apply bg-green-600/50 text-white/50;
|
|
@apply dark:bg-green-500/25;
|
|
}
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
@apply flex flex-col md:flex-row md:items-center gap-2;
|
|
|
|
&.end {
|
|
@apply justify-end;
|
|
}
|
|
|
|
> .button {
|
|
@apply w-auto;
|
|
}
|
|
}
|
|
|
|
input + .buttons {
|
|
@apply mt-2;
|
|
}
|
|
|
|
.panel {
|
|
@apply w-full;
|
|
@apply flex flex-col;
|
|
@apply border rounded-md shadow-md;
|
|
@apply border-slate-400 dark:border-gray-700 dark:bg-gray-800;
|
|
@apply p-6 sm:p-8;
|
|
|
|
&.thin {
|
|
@apply md:w-2/3 lg:w-1/2;
|
|
}
|
|
|
|
.heading {
|
|
@apply text-xl md:text-2xl font-bold leading-tight tracking-tight;
|
|
@apply text-gray-900 dark:text-white;
|
|
}
|
|
}
|
|
|
|
div.table {
|
|
@apply bg-slate-50 dark:bg-slate-800/25;
|
|
@apply rounded-xl overflow-auto;
|
|
|
|
table {
|
|
@apply text-slate-400 dark:text-slate-200;
|
|
@apply border-collapse table-auto;
|
|
@apply w-full my-8 text-sm;
|
|
|
|
thead {
|
|
tr {
|
|
th {
|
|
@apply border-b dark:border-slate-600 font-medium p-4;
|
|
@apply pt-0;
|
|
|
|
&:first-child {
|
|
@apply pl-8;
|
|
}
|
|
|
|
&:last-child {
|
|
@apply pr-8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
@apply bg-white dark:bg-slate-800;
|
|
@apply text-slate-500 dark:text-slate-400;
|
|
|
|
tr {
|
|
td {
|
|
@apply border-b border-slate-100 dark:border-slate-700 p-4;
|
|
|
|
&:first-child {
|
|
@apply pl-8;
|
|
}
|
|
|
|
&:last-child {
|
|
@apply pr-8;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
td {
|
|
@apply border-slate-200 dark:border-slate-600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
@apply fixed top-0 bottom-0 left-0 right-0;
|
|
@apply flex flex-col items-center justify-center;
|
|
@apply bg-black/50;
|
|
@apply backdrop-filter backdrop-blur-sm;
|
|
|
|
z-index: 1000;
|
|
|
|
animation-name: fadeIn;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
|
|
> .underlay {
|
|
@apply absolute top-0 left-0 right-0 bottom-0;
|
|
z-index: -1;
|
|
}
|
|
|
|
> .content {
|
|
@apply w-full md:w-2/3 lg:w-1/2;
|
|
@apply border border-slate-200 dark:border-slate-600;
|
|
@apply bg-white dark:bg-slate-900;
|
|
@apply rounded-md shadow-md;
|
|
@apply p-4;
|
|
|
|
animation-name: zoomIn;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
&.closing {
|
|
animation-name: fadeOut;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
|
|
> .content {
|
|
animation-name: zoomOut;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lucide {
|
|
@apply inline-block w-4;
|
|
}
|
|
|
|
.big-icon {
|
|
> svg {
|
|
@apply w-40 h-40;
|
|
}
|
|
}
|
|
|
|
.clipboard-copy {
|
|
@apply cursor-pointer;
|
|
|
|
> span:first-of-type {
|
|
@apply block;
|
|
}
|
|
|
|
> span:last-of-type {
|
|
@apply hidden;
|
|
}
|
|
|
|
&.copied {
|
|
> span:first-of-type {
|
|
@apply hidden;
|
|
}
|
|
|
|
> span:last-of-type {
|
|
@apply block;
|
|
}
|
|
}
|
|
|
|
> span > svg {
|
|
@apply relative -top-0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-danger {
|
|
@apply text-red-500 dark:text-red-400;
|
|
}
|
|
|
|
.text-success {
|
|
@apply text-green-600 dark:text-green-400;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
0% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOut {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|