tailwind-extend.css

/* This CSS File do not import anywhere, just write atom class for tailwindcss. The tailwindcss intellisense will be work. */

@tailwind components;

@layer components {
  .mask-squircle {
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
  }
  .mask {
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .center {
    @apply flex items-center justify-center;
  }

  .shadow-perfect {
    /* https://codepen.io/jh3y/pen/yLWgjpd */
    --tint: 214;
    --alpha: 3;
    --base: hsl(var(--tint, 214) 80% 27% / calc(var(--alpha, 4) * 1%));
    /**
      * Use relative syntax to get to: hsl(221 25% 22% / 40%)
    */
    --shade: hsl(from var(--base) calc(h + 8) 25 calc(l - 5));
    --perfect-shadow: 0 0 0 1px var(--base), 0 1px 1px -0.5px var(--shade),
      0 3px 3px -1.5px var(--shade), 0 6px 6px -3px var(--shade),
      0 12px 12px -6px var(--base), 0 24px 24px -12px var(--base);
    box-shadow: var(--perfect-shadow);
  }

  .perfect-sm {
    --alpha: 1;
  }

  .perfect-md {
    --alpha: 2;
  }

  [theme='dark'] .shadow-perfect {
    --tint: 221;
  }

  .shadow-modal {
    @apply shadow-2xl shadow-stone-300 dark:shadow-stone-900;
  }
  /* Utils */
  .no-animation {
    --btn-focus-scale: 1;
    --animation-btn: 0;
    --animation-input: 0;
  }
}

/* Radio styling */
@layer components {
  .radio {
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 9999px;
    border-width: 1px;
    border-color: var(--fallback-bc, theme(colors.theme.accent.DEFAULT));

    --bc: theme(colors.background);
    --fallback-bc: var(--bc);
    --chkbg: var(--bc);
    --fallback-b1: theme(colors.background);
  }

  .radio-current {
    --chkbg: currentColor;
    --fallback-bc: currentColor;
  }

  .radio-accent {
    --chkbg: theme(colors.theme.accent.DEFAULT);
    --fallback-bc: theme(colors.theme.accent.DEFAULT);
    --fallback-b1: theme(colors.background);
  }

  .radio-sm {
    @apply size-[0.9rem];
  }

  .radio-md {
    @apply size-[1.2rem];
  }

  .radio:checked,
  .radio[aria-checked='true'] {
    --tw-bg-opacity: 1;
    background-color: var(
      --fallback-bc,
      oklch(theme(colors.theme.accent.DEFAULT) / var(--tw-bg-opacity))
    );
    background-image: none;
    animation: radiomark var(--animation-input, 0.2s) ease-out;
    box-shadow: 0 0 0 4px var(--fallback-b1, oklch(var(--b1) / 1)) inset,
      0 0 0 4px var(--fallback-b1, oklch(var(--b1) / 1)) inset;
  }

  @keyframes radiomark {
    0% {
      box-shadow: 0 0 0 12px var(--fallback-b1, oklch(var(--b1) / 1)) inset,
        0 0 0 12px var(--fallback-b1, oklch(var(--b1) / 1)) inset;
    }

    50% {
      box-shadow: 0 0 0 3px var(--fallback-b1, oklch(var(--b1) / 1)) inset,
        0 0 0 3px var(--fallback-b1, oklch(var(--b1) / 1)) inset;
    }

    to {
      box-shadow: 0 0 0 4px var(--fallback-b1, oklch(var(--b1) / 1)) inset,
        0 0 0 4px var(--fallback-b1, oklch(var(--b1) / 1)) inset;
    }
  }
}

/* KBD */
@layer components {
  .kbd {
    background-color: oklch(0.984625 0.001706 247.839);
    /* @apply shadow-[0px_2px_0px_0px_rgba(255,255,255,0.5)] dark:shadow-[0px_2px_0px_0px_rgba(0,0,0,0.6)]; */
    @apply text-[0.5em] px-1 rounded-[4px];
    @apply font-mono border dark:border-neutral-700 border-zinc-300;
    @apply inline-flex items-center justify-center;
  }

  [data-theme='dark'] .kbd {
    background-color: oklch(0.232607 0.013807 253.101);
  }
}

/* Checkbox */
@layer components {
  .checkbox {
    --chkbg: theme(colors.theme.accent.DEFAULT);
    --chkfg: theme(colors.zinc.100);

    flex-shrink: 0;
    height: 0.9em;
    width: 0.9em;
    cursor: pointer;
    appearance: none;
    border-radius: 5px;
    border-width: 1px;
    border-color: theme(colors.border);
    --tw-border-opacity: 0.2;
  }

  .checkbox:focus {
    box-shadow: none;
  }

  .checkbox:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: theme(colors.theme.accent.DEFAULT);
    border-color: theme(colors.theme.accent.DEFAULT);
  }

  .checkbox:disabled {
    border-width: 0;
    cursor: not-allowed;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: var(--chkbg);
    opacity: 0.2;
  }

  .checkbox:checked,
  .checkbox[aria-checked='true'] {
    background-repeat: no-repeat;
    animation: checkmark var(--animation-input, 0.2s) ease-out;
    border-color: theme(colors.theme.accent.DEFAULT);
    background-color: var(--chkbg);
    background-image: linear-gradient(
        -45deg,
        transparent 65%,
        var(--chkbg) 65.99%
      ),
      linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
      linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),
      linear-gradient(
        45deg,
        var(--chkbg) 30%,
        var(--chkfg) 30.99%,
        var(--chkfg) 40%,
        transparent 40.99%
      ),
      linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%);
  }

  @keyframes checkmark {
    0% {
      background-position-y: 5px;
    }

    50% {
      background-position-y: -2px;
    }

    to {
      background-position-y: 0;
    }
  }
}

/* Context menu */
@layer components {
  .shadow-context-menu {
    box-shadow: rgba(0, 0, 0, 0.067) 0px 3px 8px,
      rgba(0, 0, 0, 0.067) 0px 2px 5px, rgba(0, 0, 0, 0.067) 0px 1px 1px;
  }
}

/* Link */
@layer components {
  .follow-link--underline {
    color: currentColor;
    background-image: linear-gradient(
      theme(colors.theme.accent.DEFAULT),
      theme(colors.theme.accent.DEFAULT)
    );
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    /* NOTE: this won't work with background images   */

    transition: all 500ms ease;

    @apply border-0 no-underline;

    background-position: left 1.1em;

    &::selection {
      text-shadow: none !important;
    }

    &:hover {
      background-size: 100% 1.5px;
      text-shadow: 0.05em 0 theme(colors.background),
        -0.05em 0 theme(colors.background);

      transition: all 250ms ease;
    }

    &.no-shadow {
      text-shadow: none;
    }
  }
}

@layer utilities {
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
}

@layer components {
  .shadow-drawer-left {
    box-shadow: -12px 0px 20px -6px rgba(41, 41, 41, 0.1);
  }
  [data-theme='dark'] .shadow-drawer-left {
    box-shadow: -12px 0px 20px -6px rgba(0, 0, 0, 0.653);
  }

  .shadow-drawer-right {
    box-shadow: 12px 0px 20px -6px rgba(41, 41, 41, 0.1);
  }
  [data-theme='dark'] .shadow-drawer-right {
    box-shadow: 12px 0px 20px -6px rgba(0, 0, 0, 0.653);
  }
}

@layer components {
  .animate-mask-in {
    animation: mask-in 0.5s ease-in-out forwards;
  }
  @keyframes mask-in {
    0% {
      mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 150% 0 /
        400% no-repeat;
      opacity: 0.2;
    }
    100% {
      mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 0 / 400%
        no-repeat;
      opacity: 1;
    }
  }
}

@layer components {
  .follow-timeline a {
    @apply !no-underline;
  }
  .follow-link--underline,
  .follow-timeline a {
    color: currentColor;
    text-decoration: underline;
    text-underline-offset: 3px;

    @apply decoration-zinc-900/20 dark:decoration-zinc-100/20 hover:no-underline;

    background-image: linear-gradient(
      theme(colors.accent),
      theme(colors.accent)
    );
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    /* NOTE: this won't work with background images   */

    transition: all 500ms ease;

    @apply border-0;

    background-position: left 1.2em;

    &:hover {
      background-size: 100% 1.5px;
      text-shadow: 0.05em 0 theme(colors.background),
        -0.05em 0 theme(colors.background);

      transition: all 250ms ease;
    }

    &::selection {
      text-shadow: none;
    }

    &.no-shadow {
      text-shadow: none;
    }
  }

  .follow-timeline {
    position: relative;

    & a {
      line-height: 1.6;
    }

    @apply min-w-0 flex-1 list-inside justify-between;

    & > li::before {
      content: '';
      position: absolute;
      left: -19px;
      bottom: 0;
      border-left: 2px solid theme(colors.accent);
    }

    & > li:first-child:last-child::before {
      border-left: 0;
    }

    & > li:not(:first-child):not(:last-child)::before {
      top: 0;
    }

    & > li:first-child::before {
      top: 50%;
    }

    & > li:last-child::before {
      bottom: 50%;
      top: 0;
    }

    & > li {
      position: relative;
      list-style-type: none;

      line-height: 1.6;
      padding: 3px 0;
      margin: 0 0 0 1rem;
    }

    & > li::after {
      content: '';
      left: calc(-1rem - 6px);
      top: 50%;
      transform: translateY(-50%);
      height: 8px;
      width: 8px;
      border-radius: 50%;
      position: absolute;
      background-color: theme(colors.accent);
    }
  }
}