2026-05-16 00:18:22 +08:00
|
|
|
@tailwind base;
|
|
|
|
|
@tailwind components;
|
|
|
|
|
@tailwind utilities;
|
|
|
|
|
|
|
|
|
|
html,
|
|
|
|
|
body,
|
|
|
|
|
#root {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-29 13:30:44 +08:00
|
|
|
/* Only clip horizontal overflow on <html>; this propagates to the viewport
|
|
|
|
|
and keeps the window as the vertical scroller. Adding overflow-x to <body>
|
|
|
|
|
(which has height:100%) would force its computed overflow-y to `auto`,
|
|
|
|
|
turning body into its own scroll box so window.scrollY never moves — which
|
|
|
|
|
breaks scroll-position features like the back-to-top button. */
|
|
|
|
|
html {
|
2026-05-27 15:18:27 +08:00
|
|
|
overflow-x: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-16 00:18:22 +08:00
|
|
|
body {
|
|
|
|
|
@apply bg-ark-bg text-neutral-100 antialiased;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Match theme: avoid default blue accent on controls */
|
|
|
|
|
:root {
|
|
|
|
|
accent-color: #eeb726;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header a,
|
|
|
|
|
header button {
|
|
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-28 22:57:05 +08:00
|
|
|
.ark-header-menu-enter,
|
|
|
|
|
.ark-header-popover-enter {
|
|
|
|
|
animation: ark-header-menu-enter 180ms ease-out both;
|
2026-05-28 22:01:17 +08:00
|
|
|
transform-origin: top center;
|
2026-05-28 22:57:05 +08:00
|
|
|
will-change: clip-path, opacity;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes ark-header-menu-enter {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
clip-path: inset(0 0 100% 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
clip-path: inset(0 0 0 0);
|
|
|
|
|
}
|
2026-05-28 22:01:17 +08:00
|
|
|
}
|
|
|
|
|
|
2026-05-16 00:18:22 +08:00
|
|
|
/* Desktop header nav: thin scrollbar when links overflow (still 單列) */
|
|
|
|
|
.header-nav-scroll {
|
|
|
|
|
scrollbar-width: thin;
|
|
|
|
|
scrollbar-color: rgba(238, 183, 38, 0.45) transparent;
|
|
|
|
|
}
|
|
|
|
|
.header-nav-scroll::-webkit-scrollbar {
|
|
|
|
|
height: 4px;
|
|
|
|
|
}
|
|
|
|
|
.header-nav-scroll::-webkit-scrollbar-thumb {
|
|
|
|
|
background-color: rgba(238, 183, 38, 0.45);
|
|
|
|
|
border-radius: 9999px;
|
|
|
|
|
}
|
|
|
|
|
.header-nav-scroll::-webkit-scrollbar-track {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.gold-underline {
|
|
|
|
|
box-shadow: inset 0 -2px 0 #eeb726;
|
|
|
|
|
}
|
2026-05-26 18:03:07 +08:00
|
|
|
|
2026-05-29 11:50:27 +08:00
|
|
|
/* Reusable skeleton placeholder with a soft shimmer sweep. */
|
|
|
|
|
.ark-skeleton {
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background-color: #1d1e23;
|
|
|
|
|
}
|
|
|
|
|
.ark-skeleton::after {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
transform: translateX(-100%);
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
90deg,
|
|
|
|
|
transparent,
|
|
|
|
|
rgba(255, 255, 255, 0.05),
|
|
|
|
|
transparent
|
|
|
|
|
);
|
|
|
|
|
animation: ark-shimmer 1.5s infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes ark-shimmer {
|
|
|
|
|
100% {
|
|
|
|
|
transform: translateX(100%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Image fade-in: add .is-loaded on the img's onLoad handler. */
|
|
|
|
|
.ark-img-fade {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transition: opacity 0.4s ease-out;
|
|
|
|
|
}
|
|
|
|
|
.ark-img-fade.is-loaded {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
.ark-skeleton::after {
|
|
|
|
|
animation: none;
|
|
|
|
|
}
|
|
|
|
|
.ark-img-fade {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Brief gold ring pulse when a bubble is targeted via a #post-<id> deep link. */
|
|
|
|
|
.ark-bubble-highlight {
|
|
|
|
|
border-radius: 1rem;
|
|
|
|
|
animation: ark-bubble-highlight 2s ease-out both;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes ark-bubble-highlight {
|
|
|
|
|
0%,
|
|
|
|
|
35% {
|
|
|
|
|
box-shadow: 0 0 0 2px rgba(238, 183, 38, 0.9);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
box-shadow: 0 0 0 2px rgba(238, 183, 38, 0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
.ark-bubble-highlight {
|
|
|
|
|
animation: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-26 18:03:07 +08:00
|
|
|
.message-stream-copyable-text,
|
|
|
|
|
.message-stream-copyable-text * {
|
|
|
|
|
-webkit-user-select: text;
|
|
|
|
|
user-select: text;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message-stream-copyable-text {
|
|
|
|
|
-webkit-touch-callout: default;
|
|
|
|
|
cursor: text;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message-stream-copyable-text::selection,
|
|
|
|
|
.message-stream-copyable-text *::selection {
|
|
|
|
|
background: rgba(238, 183, 38, 0.35);
|
|
|
|
|
}
|
