1511 lines
36 KiB
CSS
1511 lines
36 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════
|
||
ANIMEXE — ULTRA PREMIUM COSMETICS SYSTEM v2
|
||
Ultra detailed premium anime streaming UI cosmetics
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
PERFORMANCE + ACCESSIBILITY
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
:root {
|
||
|
||
--ease-premium: cubic-bezier(.22,.61,.36,1);
|
||
|
||
--glow-fire: rgba(255,107,53,.35);
|
||
--glow-neon: rgba(0,245,255,.35);
|
||
--glow-galaxy: rgba(124,58,237,.35);
|
||
--glow-sakura: rgba(255,158,196,.35);
|
||
--glow-ice: rgba(168,237,255,.35);
|
||
|
||
--premium-shadow:
|
||
0 10px 25px rgba(0,0,0,.28),
|
||
0 2px 8px rgba(0,0,0,.22);
|
||
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: .001ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition: none !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
GLOBAL PREMIUM NOISE OVERLAY
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
body::before {
|
||
|
||
content: '';
|
||
|
||
position: fixed;
|
||
inset: 0;
|
||
|
||
pointer-events: none;
|
||
|
||
z-index: 9999;
|
||
|
||
opacity: .018;
|
||
|
||
background-image:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='white' fill-opacity='1'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E");
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
PREMIUM COMMENT SYSTEM
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-bg] {
|
||
|
||
position: relative;
|
||
|
||
overflow: hidden;
|
||
|
||
border-radius: 14px;
|
||
|
||
padding: 12px 16px;
|
||
|
||
isolation: isolate;
|
||
|
||
transition:
|
||
transform .22s var(--ease-premium),
|
||
border-color .22s var(--ease-premium),
|
||
box-shadow .22s var(--ease-premium),
|
||
background .22s var(--ease-premium);
|
||
|
||
will-change:
|
||
transform,
|
||
box-shadow,
|
||
opacity;
|
||
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg]:hover {
|
||
|
||
transform:
|
||
translateY(-2px)
|
||
scale(1.005);
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg] > * {
|
||
|
||
position: relative;
|
||
z-index: 4;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
PREMIUM BACKGROUND LAYER
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-bg]::before {
|
||
|
||
content: '';
|
||
|
||
position: absolute;
|
||
inset: 0;
|
||
|
||
z-index: 0;
|
||
|
||
border-radius: inherit;
|
||
|
||
opacity: .20;
|
||
|
||
pointer-events: none;
|
||
|
||
background-size: 300% 300%;
|
||
|
||
will-change:
|
||
background-position,
|
||
transform,
|
||
opacity;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
PREMIUM PARTICLE LAYER
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-bg]::after {
|
||
|
||
content: '';
|
||
|
||
position: absolute;
|
||
inset: 0;
|
||
|
||
z-index: 1;
|
||
|
||
pointer-events: none;
|
||
|
||
opacity: .30;
|
||
|
||
mix-blend-mode: screen;
|
||
|
||
background-size: 220px 220px;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
FIRE
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-bg="fire"] {
|
||
|
||
border: 1px solid rgba(255,107,53,.32);
|
||
|
||
box-shadow:
|
||
0 0 20px rgba(255,107,53,.08);
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="fire"]:hover {
|
||
|
||
box-shadow:
|
||
0 0 18px rgba(255,107,53,.22),
|
||
0 0 42px rgba(255,45,125,.10);
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="fire"]::before {
|
||
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
#ff6b35,
|
||
#ff2d7d,
|
||
#ff8c00,
|
||
#ff4500
|
||
);
|
||
|
||
animation: bg-fire 3s ease infinite;
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="fire"]::after {
|
||
|
||
background-image:
|
||
radial-gradient(circle at 20% 30%, rgba(255,180,120,.7) 1px, transparent 1px),
|
||
radial-gradient(circle at 80% 60%, rgba(255,80,80,.6) 1px, transparent 1px);
|
||
|
||
animation: particleFloat 10s linear infinite;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
AURORA
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-bg="aurora"] {
|
||
|
||
border: 1px solid rgba(0,245,255,.28);
|
||
|
||
animation: premiumPulse 5s ease-in-out infinite;
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="aurora"]::before {
|
||
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
#00f5b4,
|
||
#00f5ff,
|
||
#7c3aed,
|
||
#00f5b4
|
||
);
|
||
|
||
animation: bg-aurora 6s ease infinite;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
GALAXY
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-bg="galaxy"] {
|
||
|
||
border: 1px solid rgba(124,58,237,.35);
|
||
|
||
overflow: visible;
|
||
|
||
box-shadow:
|
||
0 0 24px rgba(124,58,237,.10);
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="galaxy"]::before {
|
||
|
||
background:
|
||
radial-gradient(
|
||
ellipse at 30% 40%,
|
||
rgba(76,29,149,.7) 0%,
|
||
transparent 60%
|
||
),
|
||
radial-gradient(
|
||
ellipse at 70% 60%,
|
||
rgba(109,40,217,.6) 0%,
|
||
transparent 60%
|
||
),
|
||
#0d0d2e;
|
||
|
||
filter: blur(14px);
|
||
|
||
animation: bg-galaxy 8s ease infinite;
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="galaxy"]::after {
|
||
|
||
background-image:
|
||
radial-gradient(circle at 20% 20%, rgba(255,255,255,.9) 1px, transparent 1px),
|
||
radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) 1px, transparent 1px),
|
||
radial-gradient(circle at 40% 80%, rgba(255,255,255,.8) 1px, transparent 1px);
|
||
|
||
animation: starsMove 16s linear infinite;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
STARS
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-bg="stars"] {
|
||
|
||
border: 1px solid rgba(124,58,237,.25);
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="stars"]::before {
|
||
|
||
background:
|
||
radial-gradient(
|
||
ellipse at 20% 20%,
|
||
rgba(124,58,237,.35) 0%,
|
||
transparent 50%
|
||
),
|
||
radial-gradient(
|
||
ellipse at 80% 80%,
|
||
rgba(0,245,255,.25) 0%,
|
||
transparent 50%
|
||
),
|
||
#0a0a2e;
|
||
|
||
animation: bg-stars 7s ease infinite;
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="stars"]::after {
|
||
|
||
background-image:
|
||
radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 1px, transparent 1px),
|
||
radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) 1px, transparent 1px),
|
||
radial-gradient(circle at 40% 80%, rgba(255,255,255,.8) 1px, transparent 1px);
|
||
|
||
animation: starsMove 20s linear infinite;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
NEON
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-bg="neon"] {
|
||
|
||
border: 1px solid rgba(0,245,255,.32);
|
||
|
||
box-shadow:
|
||
0 0 14px rgba(0,245,255,.10);
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="neon"]:hover {
|
||
|
||
box-shadow:
|
||
0 0 22px rgba(0,245,255,.22),
|
||
0 0 40px rgba(184,77,255,.14);
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="neon"]::before {
|
||
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
rgba(0,245,255,.6),
|
||
rgba(184,77,255,.5),
|
||
rgba(0,245,255,.35)
|
||
);
|
||
|
||
box-shadow:
|
||
inset 0 0 60px rgba(0,245,255,.10);
|
||
|
||
animation: bg-neon 2.5s ease infinite;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
ICE
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-bg="ice"] {
|
||
|
||
border: 1px solid rgba(168,237,255,.35);
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="ice"]::before {
|
||
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
rgba(168,237,255,.55),
|
||
rgba(96,207,255,.45),
|
||
rgba(224,247,255,.55)
|
||
);
|
||
|
||
animation: bg-ice 5s ease infinite;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
SAKURA
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-bg="sakura"] {
|
||
|
||
border: 1px solid rgba(255,158,196,.35);
|
||
|
||
}
|
||
|
||
.comment-wrap[data-bg="sakura"]::before {
|
||
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
rgba(255,158,196,.7),
|
||
rgba(255,214,231,.45),
|
||
rgba(255,158,196,.6)
|
||
);
|
||
|
||
animation: bg-sakura 4s ease infinite;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
ULTRA RARE / LEGENDARY SYSTEM
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-rarity="legendary"] {
|
||
|
||
position: relative;
|
||
|
||
}
|
||
|
||
[data-rarity="legendary"]::before {
|
||
|
||
content: '';
|
||
|
||
position: absolute;
|
||
inset: -1px;
|
||
|
||
border-radius: inherit;
|
||
|
||
padding: 1px;
|
||
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
#ffd700,
|
||
#ff6b00,
|
||
#ff0080,
|
||
#ffd700
|
||
);
|
||
|
||
background-size: 300% 300%;
|
||
|
||
animation: legendaryBorder 4s linear infinite;
|
||
|
||
-webkit-mask:
|
||
linear-gradient(#fff 0 0) content-box,
|
||
linear-gradient(#fff 0 0);
|
||
|
||
-webkit-mask-composite: xor;
|
||
|
||
pointer-events: none;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
USERNAME COLORS
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
[class*="username-color-"] {
|
||
|
||
display: inline;
|
||
|
||
background-size: 200% auto;
|
||
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
|
||
/* color:transparent yerine -webkit-text-fill-color kullanmıyoruz —
|
||
flex item içinde compositing layer oluşturursa background-clip bozulur.
|
||
will-change da kaldırıldı aynı sebepten. */
|
||
color: transparent;
|
||
|
||
font-weight: 800;
|
||
|
||
animation: usernameFlow 5s linear infinite;
|
||
|
||
}
|
||
|
||
.username-color-fire {
|
||
background-image: linear-gradient(90deg,#ff6b35,#ff2d7d);
|
||
}
|
||
|
||
.username-color-aurora {
|
||
background-image: linear-gradient(90deg,#00f5b4,#00f5ff);
|
||
}
|
||
|
||
.username-color-sakura {
|
||
background-image: linear-gradient(90deg,#ff9ec4,#ff2d7d);
|
||
}
|
||
|
||
.username-color-neon {
|
||
background-image: linear-gradient(90deg,#00f5ff,#b84dff);
|
||
}
|
||
|
||
.username-color-galaxy {
|
||
background-image: linear-gradient(90deg,#7c3aed,#b84dff);
|
||
}
|
||
|
||
.username-color-gold {
|
||
background-image: linear-gradient(90deg,#ffd700,#ff8c00);
|
||
}
|
||
|
||
.username-color-ice {
|
||
background-image: linear-gradient(90deg,#a8edff,#60cfff);
|
||
}
|
||
|
||
.username-color-blood {
|
||
background-image: linear-gradient(90deg,#8b0000,#dc143c);
|
||
}
|
||
|
||
.username-color-rainbow {
|
||
background-image:
|
||
linear-gradient(
|
||
90deg,
|
||
#ff0000,
|
||
#ff8c00,
|
||
#ffd700,
|
||
#00c800,
|
||
#0088ff,
|
||
#8b00ff,
|
||
#ff0080
|
||
);
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
PREMIUM AVATAR FRAMES
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.avatar-wrap {
|
||
|
||
position: relative;
|
||
|
||
display: inline-block;
|
||
|
||
}
|
||
|
||
.avatar-wrap .avatar-frame {
|
||
|
||
position: absolute;
|
||
|
||
inset: -4px;
|
||
|
||
border-radius: 50%;
|
||
|
||
animation: frame-spin 4s linear infinite;
|
||
|
||
pointer-events: none;
|
||
|
||
z-index: 2;
|
||
|
||
filter:
|
||
drop-shadow(0 0 6px rgba(255,255,255,.08))
|
||
drop-shadow(0 0 16px rgba(255,255,255,.12));
|
||
|
||
will-change:
|
||
transform;
|
||
|
||
}
|
||
|
||
.avatar-wrap .avatar-frame::after {
|
||
|
||
content: '';
|
||
|
||
position: absolute;
|
||
|
||
inset: 3px;
|
||
|
||
border-radius: 50%;
|
||
|
||
background:
|
||
var(--body-bg,#09090f);
|
||
|
||
}
|
||
|
||
.avatar-wrap img {
|
||
|
||
position: relative;
|
||
|
||
z-index: 3;
|
||
|
||
}
|
||
|
||
|
||
/* FRAME THEMES */
|
||
|
||
.frame-fire {
|
||
|
||
background:
|
||
conic-gradient(
|
||
#ff6b35,
|
||
#ff2d7d,
|
||
#ff8c00,
|
||
#ff6b35
|
||
);
|
||
|
||
box-shadow:
|
||
0 0 14px rgba(255,107,53,.30),
|
||
0 0 30px rgba(255,45,125,.14);
|
||
|
||
}
|
||
|
||
.frame-neon {
|
||
|
||
background:
|
||
conic-gradient(
|
||
#00f5ff,
|
||
#b84dff,
|
||
#00f5ff
|
||
);
|
||
|
||
}
|
||
|
||
.frame-galaxy {
|
||
|
||
background:
|
||
conic-gradient(
|
||
#7c3aed,
|
||
#b84dff,
|
||
#4a1d96,
|
||
#7c3aed
|
||
);
|
||
|
||
box-shadow:
|
||
0 0 16px rgba(124,58,237,.22),
|
||
0 0 32px rgba(184,77,255,.10);
|
||
|
||
}
|
||
|
||
.frame-rainbow {
|
||
|
||
background:
|
||
conic-gradient(
|
||
#ff0000,
|
||
#ff8c00,
|
||
#ffd700,
|
||
#00c800,
|
||
#0088ff,
|
||
#8b00ff,
|
||
#ff0080,
|
||
#ff0000
|
||
);
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
PREMIUM BADGES
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.premium-badge {
|
||
|
||
display: inline-flex;
|
||
|
||
align-items: center;
|
||
|
||
gap: 4px;
|
||
|
||
font-size: .68rem;
|
||
|
||
font-weight: 800;
|
||
|
||
padding: 3px 8px;
|
||
|
||
border-radius: 999px;
|
||
|
||
letter-spacing: .03em;
|
||
|
||
position: relative;
|
||
|
||
overflow: hidden;
|
||
|
||
backdrop-filter: blur(10px);
|
||
|
||
-webkit-backdrop-filter: blur(10px);
|
||
|
||
}
|
||
|
||
.premium-badge::before {
|
||
|
||
content: '';
|
||
|
||
position: absolute;
|
||
inset: 0;
|
||
|
||
background:
|
||
linear-gradient(
|
||
180deg,
|
||
rgba(255,255,255,.10),
|
||
transparent
|
||
);
|
||
|
||
}
|
||
|
||
.premium-badge-default {
|
||
|
||
background:
|
||
linear-gradient(
|
||
90deg,
|
||
rgba(0,245,255,.12),
|
||
rgba(184,77,255,.12)
|
||
);
|
||
|
||
border:
|
||
1px solid rgba(0,245,255,.30);
|
||
|
||
color:
|
||
#00f5ff;
|
||
|
||
}
|
||
|
||
/* Custom user badge (profile_badge) shown in comments */
|
||
.user-badge-custom {
|
||
|
||
background:
|
||
linear-gradient(
|
||
90deg,
|
||
rgba(255,215,0,.14),
|
||
rgba(255,140,0,.10)
|
||
);
|
||
|
||
border:
|
||
1px solid rgba(255,215,0,.28);
|
||
|
||
color:
|
||
#ffd700;
|
||
|
||
font-size: .62rem;
|
||
|
||
animation: badgeGlow 3s ease-in-out infinite;
|
||
|
||
}
|
||
|
||
@keyframes badgeGlow {
|
||
|
||
0%,100% { box-shadow: none; }
|
||
50% { box-shadow: 0 0 8px rgba(255,215,0,.25); }
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
PREMIUM PICKER
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.prem-picker {
|
||
|
||
display: grid;
|
||
|
||
gap: 10px;
|
||
|
||
margin-top: 12px;
|
||
|
||
}
|
||
|
||
.prem-pick-item {
|
||
|
||
position: relative;
|
||
|
||
display: flex;
|
||
|
||
flex-direction: column;
|
||
|
||
align-items: center;
|
||
|
||
justify-content: center;
|
||
|
||
gap: 8px;
|
||
|
||
padding: 14px 10px;
|
||
|
||
border-radius: 16px;
|
||
|
||
cursor: pointer;
|
||
|
||
overflow: hidden;
|
||
|
||
border:
|
||
1px solid rgba(255,255,255,.08);
|
||
|
||
background:
|
||
rgba(255,255,255,.03);
|
||
|
||
transition:
|
||
border-color .18s ease,
|
||
background .18s ease,
|
||
transform .18s ease;
|
||
|
||
backdrop-filter: blur(14px);
|
||
|
||
-webkit-backdrop-filter: blur(14px);
|
||
|
||
}
|
||
|
||
.prem-pick-item::before {
|
||
|
||
content: '';
|
||
|
||
position: absolute;
|
||
|
||
inset: 0;
|
||
|
||
border-radius: inherit;
|
||
|
||
background:
|
||
linear-gradient(
|
||
180deg,
|
||
rgba(255,255,255,.08),
|
||
transparent
|
||
);
|
||
|
||
}
|
||
|
||
.prem-pick-item:hover {
|
||
|
||
transform:
|
||
translateY(-2px);
|
||
|
||
border-color:
|
||
rgba(255,255,255,.20);
|
||
|
||
background:
|
||
rgba(255,255,255,.06);
|
||
|
||
}
|
||
|
||
.prem-pick-item.active {
|
||
|
||
border-color:
|
||
rgba(0,245,255,.55) !important;
|
||
|
||
background:
|
||
rgba(0,245,255,.08) !important;
|
||
|
||
box-shadow:
|
||
0 0 24px rgba(0,245,255,.12);
|
||
|
||
}
|
||
|
||
.prem-pick-item input[type="radio"] {
|
||
|
||
display: none;
|
||
|
||
}
|
||
|
||
.prem-pick-preview {
|
||
|
||
font-size: .92rem;
|
||
|
||
font-weight: 800;
|
||
|
||
}
|
||
|
||
.prem-pick-lbl {
|
||
|
||
font-size: .66rem;
|
||
|
||
color: rgba(255,255,255,.42);
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
PROFILE BACKGROUNDS
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.profile-bg-fire {
|
||
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
#0d0409,
|
||
#1a0510,
|
||
#0d0409
|
||
) !important;
|
||
|
||
}
|
||
|
||
.profile-bg-galaxy {
|
||
|
||
background:
|
||
radial-gradient(
|
||
ellipse at top,
|
||
#0d0520 0%,
|
||
#050510 60%
|
||
) !important;
|
||
|
||
}
|
||
|
||
.profile-bg-aurora {
|
||
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
#040e0e,
|
||
#071a1a,
|
||
#040e0e
|
||
) !important;
|
||
|
||
}
|
||
|
||
.profile-bg-ice {
|
||
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
#040d11,
|
||
#071420,
|
||
#040d11
|
||
) !important;
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
THEMES
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-theme="fire"] {
|
||
--accent:#ff6b35;
|
||
--accent2:#ff2d7d;
|
||
}
|
||
|
||
[data-theme="galaxy"] {
|
||
--accent:#b84dff;
|
||
--accent2:#7c3aed;
|
||
}
|
||
|
||
[data-theme="aurora"] {
|
||
--accent:#00f5b4;
|
||
--accent2:#00f5ff;
|
||
}
|
||
|
||
[data-theme="ice"] {
|
||
--accent:#60cfff;
|
||
--accent2:#a8edff;
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
ANIMATIONS
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
@keyframes bg-fire {
|
||
|
||
0% {
|
||
background-position: 0% 50%;
|
||
opacity: .18;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
opacity: .30;
|
||
}
|
||
|
||
100% {
|
||
background-position: 0% 50%;
|
||
opacity: .18;
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes bg-aurora {
|
||
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes bg-neon {
|
||
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes bg-stars {
|
||
|
||
0%,100% {
|
||
opacity: .22;
|
||
}
|
||
|
||
50% {
|
||
opacity: .34;
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes bg-galaxy {
|
||
|
||
0% {
|
||
transform: rotate(0deg) scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: rotate(3deg) scale(1.02);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(0deg) scale(1);
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes bg-sakura {
|
||
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes bg-ice {
|
||
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes frame-spin {
|
||
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes usernameFlow {
|
||
|
||
from {
|
||
background-position: 0% center;
|
||
}
|
||
|
||
to {
|
||
background-position: 220% center;
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes premiumPulse {
|
||
|
||
0%,100% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.01);
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes particleFloat {
|
||
|
||
from {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
to {
|
||
transform: translateY(-35px);
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes starsMove {
|
||
|
||
from {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
to {
|
||
transform: translateY(-28px);
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes legendaryBorder {
|
||
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
100% {
|
||
background-position: 300% 50%;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
COMMENT GLOW AURAS
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-wrap[data-glow] {
|
||
transition:
|
||
box-shadow .3s var(--ease-premium),
|
||
transform .22s var(--ease-premium);
|
||
}
|
||
|
||
.comment-wrap[data-glow="cyan"] {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(0,245,255,.30),
|
||
0 0 18px rgba(0,245,255,.14),
|
||
0 0 36px rgba(0,245,255,.06);
|
||
}
|
||
|
||
.comment-wrap[data-glow="cyan"]:hover {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(0,245,255,.55),
|
||
0 0 28px rgba(0,245,255,.25),
|
||
0 0 56px rgba(0,245,255,.10);
|
||
}
|
||
|
||
.comment-wrap[data-glow="pink"] {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(255,45,125,.30),
|
||
0 0 18px rgba(255,45,125,.14),
|
||
0 0 36px rgba(255,45,125,.06);
|
||
}
|
||
|
||
.comment-wrap[data-glow="pink"]:hover {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(255,45,125,.55),
|
||
0 0 28px rgba(255,45,125,.25),
|
||
0 0 56px rgba(255,45,125,.10);
|
||
}
|
||
|
||
.comment-wrap[data-glow="gold"] {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(255,215,0,.30),
|
||
0 0 18px rgba(255,215,0,.14),
|
||
0 0 36px rgba(255,215,0,.06);
|
||
}
|
||
|
||
.comment-wrap[data-glow="gold"]:hover {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(255,215,0,.55),
|
||
0 0 28px rgba(255,215,0,.25),
|
||
0 0 56px rgba(255,215,0,.10);
|
||
}
|
||
|
||
.comment-wrap[data-glow="green"] {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(0,245,100,.30),
|
||
0 0 18px rgba(0,245,100,.14),
|
||
0 0 36px rgba(0,245,100,.06);
|
||
}
|
||
|
||
.comment-wrap[data-glow="green"]:hover {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(0,245,100,.55),
|
||
0 0 28px rgba(0,245,100,.25),
|
||
0 0 56px rgba(0,245,100,.10);
|
||
}
|
||
|
||
.comment-wrap[data-glow="purple"] {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(184,77,255,.30),
|
||
0 0 18px rgba(184,77,255,.14),
|
||
0 0 36px rgba(184,77,255,.06);
|
||
}
|
||
|
||
.comment-wrap[data-glow="purple"]:hover {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(184,77,255,.55),
|
||
0 0 28px rgba(184,77,255,.25),
|
||
0 0 56px rgba(184,77,255,.10);
|
||
}
|
||
|
||
.comment-wrap[data-glow="fire"] {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(255,107,53,.30),
|
||
0 0 18px rgba(255,107,53,.14),
|
||
0 0 36px rgba(255,107,53,.06);
|
||
}
|
||
|
||
.comment-wrap[data-glow="fire"]:hover {
|
||
box-shadow:
|
||
0 0 0 1.5px rgba(255,107,53,.55),
|
||
0 0 28px rgba(255,107,53,.25),
|
||
0 0 56px rgba(255,107,53,.10);
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
USERNAME ANIMATION EFFECTS
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.username-effect-shimmer {
|
||
background:
|
||
linear-gradient(
|
||
90deg,
|
||
rgba(255,255,255,.55) 0%,
|
||
rgba(255,255,255,1) 30%,
|
||
rgba(255,255,255,.55) 60%,
|
||
rgba(255,255,255,1) 85%,
|
||
rgba(255,255,255,.55) 100%
|
||
);
|
||
background-size: 250% auto;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent !important;
|
||
font-weight: 800;
|
||
animation: shimmerFlow 2.2s linear infinite;
|
||
}
|
||
|
||
.username-effect-wave {
|
||
display: inline-block;
|
||
background:
|
||
linear-gradient(
|
||
90deg,
|
||
#00f5ff,
|
||
#b84dff,
|
||
#ff2d7d,
|
||
#00f5ff
|
||
);
|
||
background-size: 300% auto;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent !important;
|
||
font-weight: 800;
|
||
animation: waveColorFlow 4s ease-in-out infinite;
|
||
}
|
||
|
||
.username-effect-pulse {
|
||
display: inline-block;
|
||
font-weight: 800;
|
||
animation: usernamePulseGlow 2s ease-in-out infinite;
|
||
}
|
||
|
||
.username-effect-glitch {
|
||
display: inline-block;
|
||
font-weight: 800;
|
||
position: relative;
|
||
animation: usernameGlitchShake 5s ease-in-out infinite;
|
||
}
|
||
|
||
.username-effect-glitch::before {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
left: 2px;
|
||
top: 0;
|
||
color: #00f5ff;
|
||
opacity: .7;
|
||
clip-path: inset(0 0 60% 0);
|
||
animation: glitchClipTop 5s ease-in-out infinite;
|
||
}
|
||
|
||
.username-effect-glitch::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
left: -2px;
|
||
top: 0;
|
||
color: #ff2d7d;
|
||
opacity: .7;
|
||
clip-path: inset(60% 0 0 0);
|
||
animation: glitchClipBot 5s ease-in-out infinite;
|
||
}
|
||
|
||
.username-effect-bounce {
|
||
display: inline-block;
|
||
font-weight: 800;
|
||
animation: usernameBounce 1.8s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes shimmerFlow {
|
||
from { background-position: 0% center; }
|
||
to { background-position: 250% center; }
|
||
}
|
||
|
||
@keyframes waveColorFlow {
|
||
0%,100% { background-position: 0% center; }
|
||
50% { background-position: 150% center; }
|
||
}
|
||
|
||
@keyframes usernamePulseGlow {
|
||
0%,100% { text-shadow: 0 0 6px rgba(0,245,255,.5), 0 0 16px rgba(0,245,255,.3); }
|
||
50% { text-shadow: 0 0 14px rgba(184,77,255,.8), 0 0 32px rgba(184,77,255,.4); }
|
||
}
|
||
|
||
@keyframes usernameGlitchShake {
|
||
0%,90%,100% { transform: translateX(0); }
|
||
92% { transform: translateX(-3px); }
|
||
94% { transform: translateX(3px); }
|
||
96% { transform: translateX(-2px); }
|
||
98% { transform: translateX(2px); }
|
||
}
|
||
|
||
@keyframes glitchClipTop {
|
||
0%,88%,100% { clip-path: inset(0 0 60% 0); transform: translateX(0); }
|
||
90% { clip-path: inset(10% 0 50% 0); transform: translateX(4px); }
|
||
92% { clip-path: inset(0 0 65% 0); transform: translateX(-4px); }
|
||
}
|
||
|
||
@keyframes glitchClipBot {
|
||
0%,88%,100% { clip-path: inset(60% 0 0 0); transform: translateX(0); }
|
||
90% { clip-path: inset(55% 0 5% 0); transform: translateX(-4px); }
|
||
92% { clip-path: inset(65% 0 0 0); transform: translateX(4px); }
|
||
}
|
||
|
||
@keyframes usernameBounce {
|
||
0%,100% { transform: translateY(0); }
|
||
30% { transform: translateY(-5px); }
|
||
60% { transform: translateY(-2px); }
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
COMMENT SIGNATURE
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.comment-signature {
|
||
display: block;
|
||
margin-top: 7px;
|
||
padding-top: 7px;
|
||
border-top: 1px solid rgba(255,255,255,.06);
|
||
font-size: .68rem;
|
||
color: rgba(255,255,255,.32);
|
||
font-style: italic;
|
||
letter-spacing: .03em;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.comment-wrap[data-glow="cyan"] .comment-signature { color: rgba(0,245,255,.45); }
|
||
.comment-wrap[data-glow="pink"] .comment-signature { color: rgba(255,45,125,.45); }
|
||
.comment-wrap[data-glow="gold"] .comment-signature { color: rgba(255,215,0,.45); }
|
||
.comment-wrap[data-glow="green"] .comment-signature { color: rgba(0,245,100,.45); }
|
||
.comment-wrap[data-glow="purple"] .comment-signature{ color: rgba(184,77,255,.45); }
|
||
.comment-wrap[data-glow="fire"] .comment-signature { color: rgba(255,107,53,.45); }
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
PAGE ENTRY EFFECTS — applied as body.entry-{name}
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
body.entry-fade > #page-content,
|
||
body.entry-slide > #page-content,
|
||
body.entry-zoom > #page-content,
|
||
body.entry-glitch > #page-content,
|
||
body.entry-wave > #page-content {
|
||
animation-duration: .65s;
|
||
animation-fill-mode: both;
|
||
animation-timing-function: var(--ease-premium);
|
||
}
|
||
|
||
body.entry-fade > #page-content { animation-name: entryFadeIn; }
|
||
body.entry-slide > #page-content { animation-name: entrySlideUp; }
|
||
body.entry-zoom > #page-content { animation-name: entryZoomIn; }
|
||
body.entry-glitch > #page-content{ animation-name: entryGlitchIn; }
|
||
body.entry-wave > #page-content { animation-name: entryWaveIn; }
|
||
|
||
@keyframes entryFadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes entrySlideUp {
|
||
from { opacity: 0; transform: translateY(24px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@keyframes entryZoomIn {
|
||
from { opacity: 0; transform: scale(.96); }
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
@keyframes entryGlitchIn {
|
||
0% { opacity: 0; clip-path: inset(0 100% 0 0); }
|
||
40% { opacity: 1; clip-path: inset(0 8% 0 0); }
|
||
55% { clip-path: inset(0 0 0 5%); }
|
||
70% { clip-path: inset(0 4% 0 0); }
|
||
100%{ clip-path: none; }
|
||
}
|
||
|
||
@keyframes entryWaveIn {
|
||
0% { opacity: 0; transform: translateY(32px) scaleX(.95); }
|
||
60% { opacity: 1; transform: translateY(-4px) scaleX(1.01); }
|
||
100%{ opacity: 1; transform: translateY(0) scaleX(1); }
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
ANIMATED BANNER
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.ps-banner-area.animated-banner,
|
||
.profile-banner-wrap.animated-banner {
|
||
isolation: isolate;
|
||
}
|
||
|
||
.ps-banner-area.animated-banner::before,
|
||
.profile-banner-wrap.animated-banner::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
background:
|
||
radial-gradient(circle at 20% 50%, rgba(0,245,255,.14) 0%, transparent 45%),
|
||
radial-gradient(circle at 80% 50%, rgba(184,77,255,.14) 0%, transparent 45%);
|
||
animation: bannerOrbs 6s ease-in-out infinite;
|
||
}
|
||
|
||
.ps-banner-area.animated-banner::after,
|
||
.profile-banner-wrap.animated-banner::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 3;
|
||
pointer-events: none;
|
||
background:
|
||
linear-gradient(
|
||
90deg,
|
||
transparent 0%,
|
||
rgba(0,245,255,.06) 40%,
|
||
rgba(184,77,255,.06) 60%,
|
||
transparent 100%
|
||
);
|
||
background-size: 300% 100%;
|
||
animation: bannerShimmer 5s linear infinite;
|
||
}
|
||
|
||
@keyframes bannerOrbs {
|
||
0%,100% { opacity: .6; transform: scale(1); }
|
||
50% { opacity: 1; transform: scale(1.05); }
|
||
}
|
||
|
||
@keyframes bannerShimmer {
|
||
from { background-position: 200% center; }
|
||
to { background-position: -200% center; }
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════
|
||
PROFILE BACKGROUND EXTRAS (sakura, neon, stars)
|
||
═══════════════════════════════════════════════════════════════════ */
|
||
|
||
.profile-bg-sakura {
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
#180810,
|
||
#28101c,
|
||
#180810
|
||
) !important;
|
||
}
|
||
|
||
.profile-bg-neon {
|
||
background:
|
||
linear-gradient(
|
||
135deg,
|
||
#030d14,
|
||
#071820,
|
||
#030d14
|
||
) !important;
|
||
}
|
||
|
||
.profile-bg-stars {
|
||
background:
|
||
radial-gradient(
|
||
ellipse at 30% 20%,
|
||
#0e0530 0%,
|
||
#050518 60%
|
||
) !important;
|
||
} |