xLog/src/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply text-zinc-800;
    @apply fill-zinc-800;
  }
}

*,
*:after,
*:before {
  border-color: var(--border-color);
}

body {
  @apply break-words;
}

.container {
  @apply max-w-screen-xl;
  @apply mx-auto;
}

.button {
  @apply inline-flex;
  @apply items-center;
  @apply justify-center;
  @apply h-8;
  @apply px-3;
  @apply min-w-[100px];
  @apply shadow-button;
  @apply whitespace-nowrap;
  @apply font-medium;
  @apply transition-colors;
}

.button.is-auto-width {
  @apply min-w-[auto];
}

.button.is-loading {
  @apply opacity-50;
}

.button[disabled] {
  @apply opacity-50;
  @apply cursor-not-allowed;
}

.button.is-loading:before {
  margin-right: 0.5rem;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  border-width: 2px;
  content: "";
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: currentColor;
  border-right-color: currentColor;
  @apply animate-spin;
}

.button.is-block {
  @apply w-full;
}

.button.is-primary {
  --shadow-color-button: theme("colors.indigo.700");
  @apply bg-indigo-500 hover:bg-indigo-600 focus:bg-indigo-700;
  @apply text-white;
  @apply fill-indigo-500;
}

.button.is-secondary {
  @apply bg-gray-50 hover:bg-gray-100;
  @apply text-gray-500;
  @apply fill-gray-500;
}

.button.is-text {
  @apply shadow-none p-0;
  @apply text-gray-500 fill-gray-500;
  @apply hover:text-gray-600 hover:fill-gray-600;
}

.button.is-like {
  @apply shadow-none p-0;
  @apply text-gray-500 fill-gray-500;
}
.button.is-like:hover {
  color: #f91880;
  fill: #f91880;
}
.button.is-like.active {
  color: #f91880;
  fill: #f91880;
}

.button.is-collect {
  @apply shadow-none p-0;
  @apply text-gray-500 fill-gray-500;
}
.button.is-collect:hover {
  color: #ffcf55;
  fill: #ffcf55;
}
.button.is-collect.active {
  color: #ffcf55;
  fill: #ffcf55;
}

.button.is-crossbell {
  background-color: #fff5e1;
  fill: #e5b65a;
  color: #e5b65a;
}

.button.is-green {
  --shadow-color-button: theme("colors.green.700");
  @apply bg-green-500 hover:bg-green-600 focus:bg-green-700;
}

.button.is-red {
  --shadow-color-button: theme("colors.red.700");
  @apply bg-red-500 hover:bg-red-600 focus:bg-red-700;
}

.button.is-gray {
  --shadow-color-button: theme("colors.gray.700");
  @apply bg-gray-500 hover:bg-gray-600 focus:bg-gray-700;
}

.button.is-sm {
  @apply h-7;
  @apply px-2;
  @apply text-xs;
  @apply min-w-[auto];
}

.button.is-xl {
  @apply h-10;
  @apply px-6;
  @apply text-xl;
  @apply min-w-[auto];
}

.button-group {
  @apply flex items-center;
}

.button-group .button:not(:first-child) {
  @apply rounded-l-none;
}

.button-group .button:not(:last-child) {
  @apply rounded-r-none;
}

.input {
  @apply border;
  @apply outline-none;
  @apply rounded-lg;
  @apply px-3;
  @apply h-10;
  @apply inline-flex;
  @apply items-center;
  @apply focus:ring-1;
  @apply focus:ring-indigo-400;
  @apply focus:border-indigo-400;
}

.input.is-block {
  @apply w-full;
}

.input.has-addon {
  @apply rounded-r-none;
}

textarea.input {
  @apply h-auto;
  @apply py-3;
  @apply px-3;
}

.form-label {
  @apply block;
  @apply mb-2;
  @apply text-sm;
  @apply font-bold;
  @apply text-gray-700;
}

.post-status-circle {
  @apply h-[15px] w-[15px];
  @apply bg-green-500;
  @apply inline-block;
  @apply rounded-full;
  @apply relative;
}

.post-status-circle:before {
  content: "";
  @apply absolute;
  @apply left-1/2;
  @apply top-1/2;
  @apply bg-white;
  @apply h-[10px] w-[10px];
  @apply rounded-full;
  @apply -translate-x-1/2;
  @apply -translate-y-1/2;
}

.post-status-circle.is-draft {
  @apply bg-gray-300;
}

.post-status-circle.is-scheduled {
  @apply bg-yellow-500;
}

.page-title {
  @apply relative;
  @apply text-3xl;
  @apply font-extrabold;
}