hackatime/app/assets/tailwind/main.css

@font-face {
  font-family: "clockicons";
  src:
    url("/fonts/clockicons.woff2") format("woff2"),
    url("/fonts/clockicons.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
}

@keyframes flash {
  0% {
    background-color: oklch(90.92% 0.125 92.56);
  }
  100% {
    background-color: transparent;
  }
}

@keyframes blink-anim {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

body,
html {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
    sans-serif;
  overflow-x: hidden;
  color-scheme: var(--app-color-scheme, dark);
}

*,
*::before,
*::after {
  font-family: inherit;
}

.clockicons {
  font-family: "clockicons", monospace;
}

.blink {
  animation: blink-anim 1s infinite;
}

code,
pre,
kbd,
samp {
  @apply font-mono;
}

.monospace {
  @apply font-mono;
}

/* Ensure forms and inputs respect dark mode */
input,
textarea,
select {
  color-scheme: var(--app-color-scheme, dark);
}

select {
  @apply mx-0 my-0.5 px-2 py-0.5;
}

.superadmin-tool {
  @apply rounded-md border border-[rgb(251,44,54)] border-dashed bg-[rgba(255,255,255,0.02)];
}

.admin-tool {
  @apply rounded-md border border-[rgb(240,177,0)] border-dashed bg-[rgba(255,255,255,0.02)];
}

.viewer-tool {
  @apply rounded-md border border-[rgb(43,127,255)] border-dashed bg-[rgba(255,255,255,0.02)];
}

.dev-tool {
  @apply rounded-md border border-dashed bg-[rgba(255,255,255,0.02)];
  border-color: var(--color-green);
}

.flash-message {
  @apply rounded-md text-center text-sm border px-4 py-3;
  will-change: opacity, transform;
}

.flash-message--success {
  color: var(--color-success);
  border-color: var(--color-success);
  background-color: rgba(51, 214, 166, 0.2);
  background-color: color-mix(in oklab, var(--color-success) 20%, transparent);
}

.flash-message--error {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background-color: rgba(200, 57, 79, 0.2);
  background-color: color-mix(in oklab, var(--color-danger) 20%, transparent);
}

.flash-message--enter {
  animation: flash-enter 180ms ease-out;
}

.flash-message--leaving {
  animation: flash-exit 240ms ease-in forwards;
}

@keyframes flash-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes flash-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

.loading {
  @apply grayscale;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bits-modal-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bits-modal-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes bits-modal-content-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bits-modal-content-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}

@keyframes dashboard-select-content-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboard-select-content-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

.bits-modal-overlay[data-state="open"] {
  animation: bits-modal-overlay-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bits-modal-overlay[data-state="closed"] {
  animation: bits-modal-overlay-out 180ms cubic-bezier(0.22, 1, 0.5, 1) both;
}

.bits-modal-content {
  will-change: transform, opacity;
}

.bits-modal-content[data-state="open"] {
  animation: bits-modal-content-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bits-modal-content[data-state="closed"] {
  animation: bits-modal-content-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}

.dashboard-select-popover {
  transform-origin: top left;
  will-change: opacity, transform;
}

.dashboard-select-popover[data-state="open"] {
  animation: dashboard-select-content-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dashboard-select-popover[data-state="closed"] {
  animation: dashboard-select-content-out 130ms cubic-bezier(0.32, 0, 0.67, 0) both;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.super {
  @apply italic text-sm text-[#ccc] mt-0 mb-0.5 mx-0;
}

.super a {
  @apply text-[#ccc];
}

turbo-frame#mini_leaderboard[aria-busy="true"]::before {
  @apply hidden;
}

#currently_hacking {
  @apply hidden;
}

.clock-display {
  @apply w-full h-[1.5em] text-[15vmin] mx-auto my-8 relative perspective-[62.5rem];
}

.clock-display-inner {
  @apply w-full h-full flex justify-center items-center rounded-[4rem] transform-3d transition-transform duration-300 ease-in-out relative;
  border: 12px solid var(--color-primary);
}

.clock-display:hover .clock-display-inner {
  @apply rotate-x-180;
}

.clock-display-front,
.clock-display-back {
  @apply absolute w-full h-full flex justify-center items-center backface-hidden;
}

.clock-display-front {
  @apply rotate-x-0;
}

.clock-display-back {
  @apply rotate-x-180;
}

.clock-display * {
  @apply leading-normal;
}

@media (max-width: 87.5rem) {
  .clock-display {
    @apply text-[10vmin];
  }
}

.no-scrollbar::-webkit-scrollbar {
  @apply hidden;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.project-desc {
  @apply relative bg-[linear-gradient(145deg,#f6dbba_0%,#e6d4be_100%)] rounded-[clamp(6px,1.5vw,10px)] shadow-[0_4px_15px_rgba(0,0,0,0.15),inset_0_1px_0_rgba(255,255,255,0.6),inset_3px_0_5px_rgba(0,0,0,0.05)] transition-all duration-300 ease-in-out border-[2px] border-[rgba(89,47,49,0.3)] overflow-hidden text-black h-full cursor-pointer flex flex-col z-2 mx-5;
}