xLog/src/css/tailwind.css

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

@layer base {
  html {
    @apply text-zinc-800;
    @apply fill-zinc-800;
    font-family: var(--font-fans);
  }

  input,
  textarea {
    @apply bg-white;
  }
}

@layer utilities {
  .focus-ring {
    @apply focus-visible:outline focus-visible:outline-accent;
  }
}

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

html.dark {
  color-scheme: dark;
}

/* ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: theme("colors.white");
}

::-webkit-scrollbar-thumb {
  background: var(--theme-color);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hover-color);
}

::-webkit-scrollbar-corner {
  background: theme("colors.white");
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background-color: var(--theme-color);
  border: 3px solid theme("colors.white");
  border-radius: 5px;
} */

body {
  @apply break-words bg-white;
}

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

button,
a {
  @apply focus-visible:outline-none;
}

.text-feature {
  @apply bg-gradient-to-r bg-clip-text text-transparent;
}

.text-feature-write {
  @apply from-[#007CF0] to-[#00DFD8];
}

.text-feature-own {
  @apply from-[#7928CA] to-[#FF0080];
}

.text-feature-earn {
  @apply from-[#FF4D4D] to-[#F9CB28];
}

.button {
  @apply inline-flex;
  @apply items-center;
  @apply justify-center;
  @apply h-9;
  @apply px-5;
  @apply min-w-[100px];
  @apply whitespace-nowrap;
  @apply font-medium;
  @apply transition;
  @apply active:scale-95;
  @apply focus-ring focus-within:ring-offset-1;
}

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

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

.button.button.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;
  @apply inline-block;
  @apply align-middle;
}

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

.button.is-primary {
  @apply text-white;
  @apply fill-accent;
  @apply bg-accent;
  opacity: 0.9;
}

.button.is-primary:hover {
  opacity: 1;
  @apply bg-accent;
}

.button.is-primary:focus {
  opacity: 1;
  @apply bg-accent;
}

.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 py-0 px-3;
  @apply min-w-0;
  @apply hover:bg-hover;
  @apply transition-colors;
}

.button.is-outline {
  @apply border-black;
  @apply border;
  @apply text-black;
  @apply fill-black;
}

.button.is-like,
.button.is-collect,
.button.is-tip,
.button.is-share,
.button.is-comment {
  @apply shadow-none p-0;
  @apply text-gray-500;
}
.button.is-like.is-light,
.button.is-collect.is-light,
.button.is-tip.is-light,
.button.is-share.is-light,
.button.is-comment.is-light {
  @apply text-gray-400;
}
.button.is-like.is-light.is-loading:before,
.button.is-collect.is-light.is-loading:before,
.button.is-tip.is-light.is-loading:before,
.button.is-share.is-light.is-loading:before,
.button.is-comment.is-light.is-loading:before {
  margin-right: 0;
}

.button.is-like:hover {
  color: #f91880;
}
.button.is-like.active {
  color: #f91880;
}

.button.is-collect:hover {
  color: #ffcf55;
}
.button.is-collect.active {
  color: #ffcf55;
}

.button.is-tip:hover {
  color: #facc15;
}
.button.is-tip.active {
  color: #facc15;
}

.button.is-share:hover {
  color: #0ea5e9;
}
.button.is-share.active {
  color: #0ea5e9;
}

.button.is-comment:hover {
  @apply text-green-500;
}
.button.is-comment.active {
  @apply text-green-500;
}

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

.button.is-green {
  @apply bg-green-500 hover:bg-green-600 focus:bg-green-700;
}

.button.is-red {
  @apply bg-red-500 hover:bg-red-600 focus:bg-red-700;
}

.button.is-gray {
  @apply bg-gray-400 hover:bg-gray-500 focus:bg-gray-500;
}

.button.is-outline-gray {
  @apply text-gray-500 hover:text-gray-600 focus:text-gray-600;
  @apply border-gray-400 hover:border-gray-500 focus:border-gray-500;
}

.button.is-gradient {
  @apply hover:bg-gradient-to-br from-[#FF4D4D] to-[#F9CB28];
  @apply hover:text-white;
  @apply hover:border-none;
}

.button.is-gradient:hover > span {
  @apply mx-[1px];
}

.button.is-black {
  @apply bg-black hover:bg-white focus:bg-white;
  @apply text-white hover:text-black focus:text-black;
  @apply fill-white hover:fill-black focus:fill-black;
  @apply border-black border;
}

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

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

.button.is-2xl {
  @apply h-12;
  @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;
  --tw-ring-color: var(--theme-color);
}

.input:focus {
  @apply border-accent;
}

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

.input.has-prefix {
  @apply rounded-l-none;
}
.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 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;
}

.xlog-site-description a {
  @apply underline;
}

::selection {
  @apply bg-accent;
  color: #fff;
}

.xlog-header {
  height: var(--header-height);
}

.xlog-banner {
  background-color: var(--banner-bg-color);
}

/* Fancy blur effect */
#qprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  opacity: 1;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.qprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.qprogress-custom-parent #qprogress .bar {
  position: absolute;
}

/* Colorful effect */
#qprogress .colorful-bar {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#1890ff),
    color-stop(#13c2c2),
    color-stop(#52c41a),
    color-stop(#fa8c16),
    color-stop(#fa541c),
    color-stop(#f5222d),
    to(#1890ff)
  );
  background: -webkit-linear-gradient(
    left,
    #1890ff,
    #13c2c2,
    #52c41a,
    #fa8c16,
    #fa541c,
    #f5222d,
    #1890ff
  );
  background: linear-gradient(
    to right,
    #1890ff,
    #13c2c2,
    #52c41a,
    #fa8c16,
    #fa541c,
    #f5222d,
    #1890ff
  );

  -webkit-animation: 2s linear infinite ins;
  animation: 2s linear infinite ins;

  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;

  -webkit-transform-origin: left;
  transform-origin: left;

  background-size: 500%;
}

@-webkit-keyframes ins {
  0% {
    background-position: 0% 0;
  }
  to {
    background-position: 125% 0;
  }
}

@keyframes ins {
  0% {
    background-position: 0% 0;
  }
  to {
    background-position: 125% 0;
  }
}

.loading:before {
  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;
}

.xlog-lottie-logo path[fill="rgb(0,0,0)"] {
  @apply fill-current;
}

.xlog-post-toc .katex {
  font: unset;
  line-height: unset;
}

.xlog-site-navigation-item {
  @apply h-10 px-2 flex items-center space-x-1 transition-colors focus-ring;
  @apply hover:text-gray-700;

  /* The underline */
  @apply relative;
  @apply after:absolute after:block after:content-[''] after:h-[2px] after:transition-[left,right] after:bottom-0 after:left-1/2 after:right-1/2 after:bg-gray-700;
  @apply hover:after:left-2 hover:after:right-2;
}

/* TODO-Doma */
/* Maybe use CSS nested syntax */
.xlog-site-navigation-item-active {
  @apply text-accent hover:text-accent;

  /* The underline */
  @apply after:left-2 after:right-2 after:bg-accent;
}

/* For users to use within posts */
.center {
  @apply flex justify-center;
}

.right {
  @apply flex justify-end;
}