Folo/src/renderer/src/styles/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 {
  .drag-region {
    -webkit-app-region: drag;
  }

  .no-drag-region {
    -webkit-app-region: no-drag;
  }
  .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-800;
  }
  /* 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.accent.foreground);
    --fallback-bc: var(--bc);
    --chkbg: var(--bc);
    --fallback-b1: theme(colors.background);
  }

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

  .radio-primary {
    --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-[12px] px-1 rounded-[0.5rem];
    @apply font-mono border border-border border-b-2;
    @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.theme.inactive);
    --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;
  }
}