mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-28 03:27:10 +00:00
work in progress: UI overhaul updates, new logo, and localization translations
This commit is contained in:
KoalaDev
@@ -2964,3 +2964,695 @@ header[id] {
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Hero Live Demo Scene (two synced tabs + extension popup) --- */
|
||||
.hero-mockup-wrapper {
|
||||
flex-direction: column;
|
||||
gap: 0.9rem;
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
/* The scene is sized for the two cascading tab cards; opening the popup
|
||||
grows it. (Without JS the popup-open class is set in the markup, so the
|
||||
static fallback always has room for the popup.) */
|
||||
.hero-demo-scene {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 370px;
|
||||
height: calc(63cqw + 84px);
|
||||
transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.hero-demo-scene.popup-open {
|
||||
height: 590px;
|
||||
}
|
||||
|
||||
/* While initializing, suppress all transitions so the popup can start closed
|
||||
without a visible open->closed animation on page load. */
|
||||
.hero-demo-scene.demo-no-anim,
|
||||
.hero-demo-scene.demo-no-anim * {
|
||||
transition-duration: 0s !important;
|
||||
}
|
||||
|
||||
/* Sync status chip: green "in sync" at rest, flashes the broadcast event */
|
||||
.demo-sync-chip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 2px;
|
||||
z-index: 8;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 99px;
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
border: 1px solid rgba(34, 197, 94, 0.35);
|
||||
color: #86efac;
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
cursor: default;
|
||||
transition: background 0.3s, border-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.demo-chip-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 8px #22c55e;
|
||||
transition: background 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.demo-sync-chip .demo-chip-event { display: none; }
|
||||
|
||||
.demo-sync-chip.event {
|
||||
background: rgba(99, 102, 241, 0.14);
|
||||
border-color: rgba(99, 102, 241, 0.45);
|
||||
color: #c7d2fe;
|
||||
}
|
||||
|
||||
.demo-sync-chip.event .demo-chip-dot {
|
||||
background: #818cf8;
|
||||
box-shadow: 0 0 8px #818cf8;
|
||||
}
|
||||
|
||||
.demo-sync-chip.event .demo-chip-label-sync { display: none; }
|
||||
.demo-sync-chip.event .demo-chip-event { display: inline; }
|
||||
|
||||
@keyframes demoBlink {
|
||||
50% { opacity: 0.35; }
|
||||
}
|
||||
|
||||
/* Video tab cards: a clean window cascade — the right one is in front */
|
||||
.demo-tab-card {
|
||||
position: absolute;
|
||||
width: 274px;
|
||||
width: 62cqw;
|
||||
background: #131c31;
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s;
|
||||
}
|
||||
|
||||
.demo-tab-card:hover,
|
||||
.demo-tab-card:focus-visible {
|
||||
border-color: rgba(99, 102, 241, 0.55);
|
||||
}
|
||||
|
||||
/* Card A = the foreground window at the top right ("your" browser,
|
||||
hosts the extension icon in its toolbar) */
|
||||
.demo-tab-a {
|
||||
top: 30px;
|
||||
right: 0;
|
||||
transform: rotate(1.2deg);
|
||||
transform-origin: top right;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* Card B = the friend's window, lower left, tucked behind */
|
||||
.demo-tab-b {
|
||||
top: 168px;
|
||||
top: calc(28cqw + 44px);
|
||||
left: 0;
|
||||
transform: rotate(-1.5deg);
|
||||
transform-origin: top left;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* When the popup slides in from the right edge, the tabs step aside */
|
||||
.hero-demo-scene.popup-open .demo-tab-a {
|
||||
transform: rotate(1deg) translate(-55%, 2%) scale(0.9);
|
||||
}
|
||||
|
||||
.hero-demo-scene.popup-open .demo-tab-b {
|
||||
transform: rotate(-1.5deg) scale(0.95);
|
||||
}
|
||||
|
||||
.demo-tab-titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px 6px 10px;
|
||||
background: #0b1222;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
font-size: 10.5px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.demo-tab-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.demo-tab-dots i {
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #334155;
|
||||
}
|
||||
|
||||
.demo-tab-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.demo-tab-title svg { flex-shrink: 0; }
|
||||
|
||||
.demo-tab-user {
|
||||
flex-shrink: 0;
|
||||
font-size: 9.5px;
|
||||
font-weight: 700;
|
||||
padding: 2px 7px;
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
||||
.demo-user-a {
|
||||
color: #a5b4fc;
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
.demo-user-b {
|
||||
color: #86efac;
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
}
|
||||
|
||||
/* Extension launcher pinned in the foreground window's toolbar */
|
||||
.demo-ext-launcher {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 7px;
|
||||
background: #273449;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
|
||||
}
|
||||
|
||||
.demo-ext-launcher img {
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.demo-ext-launcher:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.demo-ext-launcher:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
.hero-demo-scene.popup-open .demo-ext-launcher {
|
||||
border-color: rgba(99, 102, 241, 0.7);
|
||||
box-shadow: 0 0 10px rgba(99, 102, 241, 0.45);
|
||||
}
|
||||
|
||||
.demo-ext-launcher::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #6366f1;
|
||||
box-shadow: 0 0 8px #6366f1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.hero-demo-scene:not(.popup-open) .demo-ext-launcher::after {
|
||||
opacity: 1;
|
||||
animation: demoBlink 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Abstract "video" artwork with a slow cinematic pan/zoom while playing */
|
||||
.demo-video {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
background: #020617;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo-video-art {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 78% 22%, rgba(248, 250, 252, 0.28) 0 4%, transparent 5.5%),
|
||||
radial-gradient(120% 90% at 70% 115%, #312e81 0%, transparent 60%),
|
||||
radial-gradient(100% 80% at 12% 112%, #1e1b4b 0%, transparent 55%),
|
||||
linear-gradient(160deg, #1e293b 0%, #0b1024 55%, #020617 100%);
|
||||
transform-origin: 60% 40%;
|
||||
animation:
|
||||
demoKenBurns 9s ease-in-out infinite alternate,
|
||||
demoArtShift 7s ease-in-out infinite alternate;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Soft light drifting through the scene */
|
||||
.demo-video-art::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -25%;
|
||||
left: -12%;
|
||||
width: 70%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(129, 140, 248, 0.32), transparent 65%);
|
||||
animation: demoGlowDrift 7s ease-in-out infinite alternate;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.demo-video-art::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(105deg, transparent 30%, rgba(129, 140, 248, 0.14) 45%, rgba(56, 189, 248, 0.1) 55%, transparent 70%);
|
||||
transform: translateX(-100%);
|
||||
animation: demoSheen 2.8s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Playing runs the animations; pausing freezes them mid-frame, so a synced
|
||||
pause is visible at a glance */
|
||||
.demo-tab-card.playing .demo-video-art,
|
||||
.demo-tab-card.playing .demo-video-art::before,
|
||||
.demo-tab-card.playing .demo-video-art::after {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes demoKenBurns {
|
||||
from { transform: scale(1) translate(0, 0); }
|
||||
to { transform: scale(1.18) translate(-3%, 2%); }
|
||||
}
|
||||
|
||||
@keyframes demoArtShift {
|
||||
from { filter: hue-rotate(0deg) brightness(1); }
|
||||
to { filter: hue-rotate(40deg) brightness(1.15); }
|
||||
}
|
||||
|
||||
@keyframes demoGlowDrift {
|
||||
from { transform: translate(0, 0); }
|
||||
to { transform: translate(65%, 30%); }
|
||||
}
|
||||
|
||||
@keyframes demoSheen {
|
||||
to { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* Play / pause overlay */
|
||||
.demo-play-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(2, 6, 23, 0.35);
|
||||
transition: opacity 0.25s, background 0.25s;
|
||||
}
|
||||
|
||||
.demo-icon-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 50%;
|
||||
background: rgba(15, 23, 42, 0.75);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
color: white;
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.demo-tab-card:hover .demo-icon-wrap { transform: scale(1.1); }
|
||||
|
||||
.demo-play-overlay .icon-pause { display: none; }
|
||||
.demo-tab-card.playing .icon-play { display: none; }
|
||||
.demo-tab-card.playing .icon-pause { display: block; }
|
||||
|
||||
.demo-tab-card.playing .demo-play-overlay {
|
||||
opacity: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.demo-tab-card.playing:hover .demo-play-overlay,
|
||||
.demo-tab-card.playing:focus-visible .demo-play-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Timestamp + seekable progress bar */
|
||||
.demo-video-controls {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 10px 8px;
|
||||
background: linear-gradient(transparent, rgba(2, 6, 23, 0.85));
|
||||
font-size: 9.5px;
|
||||
color: #e2e8f0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.demo-time {
|
||||
flex-shrink: 0;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.demo-progress {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 5px;
|
||||
border-radius: 99px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Generous invisible hit area for seeking */
|
||||
.demo-progress::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -8px 0;
|
||||
}
|
||||
|
||||
.demo-progress-fill {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
border-radius: 99px;
|
||||
background: linear-gradient(90deg, #6366f1, #a855f7);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Scrub thumb, revealed on hover */
|
||||
.demo-progress-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
top: 50%;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-top: -5.5px;
|
||||
border-radius: 50%;
|
||||
background: #e2e8f0;
|
||||
box-shadow: 0 0 6px rgba(99, 102, 241, 0.8);
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.demo-tab-card:hover .demo-progress-fill::after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Sync pulse ring on both cards */
|
||||
.demo-tab-card.sync-pulse {
|
||||
animation: demoCardPulse 0.9s ease-out;
|
||||
}
|
||||
|
||||
@keyframes demoCardPulse {
|
||||
0% { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(99, 102, 241, 0.65); }
|
||||
100% { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), 0 0 0 22px rgba(99, 102, 241, 0); }
|
||||
}
|
||||
|
||||
/* The existing popup mockup slides in at the right edge, dropping out of
|
||||
the toolbar icon of the foreground window */
|
||||
.hero-demo-scene .extension-mockup {
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
width: 292px;
|
||||
width: min(320px, 66cqw);
|
||||
margin: 0;
|
||||
transform-origin: top right;
|
||||
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s, visibility 0.45s;
|
||||
}
|
||||
|
||||
.hero-demo-scene:not(.popup-open) .extension-mockup {
|
||||
transform: translate(2%, -3%) scale(0.5);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Ghost cursor for the automated walkthrough */
|
||||
.demo-cursor {
|
||||
position: absolute;
|
||||
top: 52%;
|
||||
left: 46%;
|
||||
z-index: 20;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
|
||||
transition: top 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), left 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.35s;
|
||||
}
|
||||
|
||||
.demo-cursor.visible { opacity: 1; }
|
||||
|
||||
.demo-cursor svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.demo-cursor::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: -8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #818cf8;
|
||||
opacity: 0;
|
||||
transform: scale(0.35);
|
||||
}
|
||||
|
||||
.demo-cursor.clicking::before {
|
||||
animation: demoClickRipple 0.45s ease-out;
|
||||
}
|
||||
|
||||
@keyframes demoClickRipple {
|
||||
0% { opacity: 0.9; transform: scale(0.35); }
|
||||
100% { opacity: 0; transform: scale(1.25); }
|
||||
}
|
||||
|
||||
/* Caption below the scene */
|
||||
.demo-hint {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted);
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.demo-hint.show { opacity: 0.75; }
|
||||
|
||||
/* Mobile: fall back to the classic static popup mockup */
|
||||
@media (max-width: 768px) {
|
||||
.hero-demo-scene,
|
||||
.hero-demo-scene.popup-open {
|
||||
height: auto;
|
||||
max-width: 320px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-tab-card,
|
||||
.demo-sync-chip,
|
||||
.demo-cursor,
|
||||
.demo-hint {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hero-demo-scene .extension-mockup,
|
||||
.hero-demo-scene:not(.popup-open) .extension-mockup {
|
||||
position: static;
|
||||
width: 100%;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-demo-scene:not(.popup-open) .demo-ext-launcher::after {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Story walkthrough additions: room creation, invite flight, film --- */
|
||||
|
||||
/* The stick-figure film carries the motion now — keep only the color drift
|
||||
on the backdrop (the animation shorthand resets play-state, so re-pause) */
|
||||
.demo-video-art {
|
||||
animation: demoArtShift 7s ease-in-out infinite alternate;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Tiny abstract "movie": a walker strolls across, a ball bounces ahead.
|
||||
Pausing freezes every element mid-frame — on both tabs at once. */
|
||||
.demo-film {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.film-limb {
|
||||
stroke: #e2e8f0;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.film-walker {
|
||||
transform: translate(-15px, 74px);
|
||||
animation: filmWalk 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes filmWalk {
|
||||
to { transform: translate(175px, 74px); }
|
||||
}
|
||||
|
||||
.film-bob {
|
||||
animation: filmBob 0.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes filmBob {
|
||||
to { transform: translateY(-1.8px); }
|
||||
}
|
||||
|
||||
.film-swing-1,
|
||||
.film-swing-2 {
|
||||
transform-box: fill-box;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.film-swing-1 { animation: filmSwing 0.5s ease-in-out infinite alternate; }
|
||||
.film-swing-2 { animation: filmSwing 0.5s ease-in-out infinite alternate-reverse; }
|
||||
|
||||
@keyframes filmSwing {
|
||||
from { transform: rotate(30deg); }
|
||||
to { transform: rotate(-30deg); }
|
||||
}
|
||||
|
||||
.film-ball-x {
|
||||
animation: filmBallX 6.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes filmBallX {
|
||||
to { transform: translateX(175px); }
|
||||
}
|
||||
|
||||
.film-ball {
|
||||
animation: filmBallY 0.55s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes filmBallY {
|
||||
to { transform: translateY(-16px); }
|
||||
}
|
||||
|
||||
.demo-film * { animation-play-state: paused; }
|
||||
.demo-tab-card.playing .demo-film * { animation-play-state: running; }
|
||||
|
||||
/* The sync chip only appears once the room is connected (story progression) */
|
||||
.demo-sync-chip {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
pointer-events: none;
|
||||
transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.4s, transform 0.4s;
|
||||
}
|
||||
|
||||
.hero-demo-scene.connected .demo-sync-chip {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Toast on the friend's window ("Room joined", "Tab selected") */
|
||||
.demo-tab-toast {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -6px);
|
||||
z-index: 2;
|
||||
padding: 4px 10px;
|
||||
border-radius: 99px;
|
||||
background: rgba(15, 23, 42, 0.92);
|
||||
border: 1px solid rgba(99, 102, 241, 0.5);
|
||||
color: #c7d2fe;
|
||||
font-size: 9.5px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.demo-tab-toast.show {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
/* Invite link pill flying from the popup to the friend's window */
|
||||
.demo-invite-fly {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 99px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
font-size: 9.5px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: left 0.75s cubic-bezier(0.3, 0.7, 0.4, 1), top 0.75s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.3s;
|
||||
}
|
||||
|
||||
/* Attention flash (e.g. on the video select while "choosing the tab") */
|
||||
.demo-attn {
|
||||
animation: demoAttn 0.7s ease-in-out 2;
|
||||
}
|
||||
|
||||
@keyframes demoAttn {
|
||||
50% { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.75); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user