/* === vir.group translation visual feedback === */
/* Stored in Mastodon Setting key `custom_css` (DB row, served at /custom.css). */
/* ------------------------------------------------------------------
* 1. While the translation request is in flight.
*
* Mastodon doesn't toggle a class on the button during the fetch, so we
* piggyback on `:focus`, which sticks from click until the user clicks
* elsewhere or the button is replaced by the translated content. We run
* a long-duration pulse (≈30 s of iterations) so it covers any realistic
* AI translation latency. When translation lands the button is unmounted
* and the animation simply stops.
* ------------------------------------------------------------------ */
/* Give the button breathing room so the pulse + expanding ring don't get
clipped by neighbouring layout. We deliberately do NOT set overflow on
.status__content / .status__content__text — that breaks Mastodon's
native long-post collapse ("Read more"), which relies on overflow:hidden
+ max-height. Action bars are siblings of .status__content, so visible
overflow there is safe. The button itself is small and mid-content, so
its ::after ring at inset:-5px stays well within .status__content's
padding and never crosses the clip boundary. */
.status__content__translate-button {
margin: 6px 8px 6px 0;
overflow: visible;
}
.detailed-status__action-bar,
.status__action-bar {
overflow: visible;
}
.status__content__translate-button:focus,
.status__content__translate-button:active {
position: relative;
outline: none;
color: #6364ff !important;
animation: virgPulseBtn 1.2s ease-in-out 25;
}
.status__content__translate-button:focus::after,
.status__content__translate-button:active::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 6px;
pointer-events: none;
border: 2px solid #6364ff;
animation: virgRingExpand 1.4s ease-out 22;
opacity: 0;
}
@keyframes virgPulseBtn {
0% { box-shadow: 0 0 0 0 rgba(99, 100, 255, 0.55); }
70% { box-shadow: 0 0 0 10px rgba(99, 100, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(99, 100, 255, 0); }
}
@keyframes virgRingExpand {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.15); opacity: 0; }
}
/* ------------------------------------------------------------------
* 2. When the translation arrives.
*
* The `.translate-button` wrapper appears in place of the click button.
* Fade + soft blur reveal makes the swap feel intentional rather than
* a sudden DOM change.
* ------------------------------------------------------------------ */
.translate-button {
animation: virgReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes virgReveal {
0% { opacity: 0; transform: translateY(-3px); filter: blur(2px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* ------------------------------------------------------------------
* 3. The "Translated using vir.group" attribution.
*
* Subtle accent so the user always sees that the translation is fresh
* and which provider produced it.
* ------------------------------------------------------------------ */
/* Wrapper around the attribution — let the shimmer gradient breathe. */
.translate-button {
margin: 5px;
overflow: visible;
}
.translate-button__meta {
position: relative;
display: inline-block;
padding: 5px 10px 5px 26px;
margin: 5px;
border-radius: 6px;
background: linear-gradient(
90deg,
rgba(99, 100, 255, 0.12) 0%,
rgba(99, 100, 255, 0.03) 60%,
transparent 100%
);
background-size: 220% 100%;
border-left: 3px solid #6364ff;
font-size: 0.82em;
font-weight: 500;
line-height: 1.35;
cursor: pointer;
transition: background-color 0.2s, transform 0.12s;
animation: virgShimmer 3s linear infinite;
}
.translate-button__meta:hover {
background-color: rgba(99, 100, 255, 0.18);
transform: translateY(-1px);
}
.translate-button__meta:focus-visible {
outline: 2px solid #6364ff;
outline-offset: 2px;
}
.translate-button__meta::before {
content: "✨";
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
font-size: 0.9em;
animation: virgSpark 2.2s ease-in-out infinite;
}
@keyframes virgShimmer {
0% { background-position: -180% 0; }
100% { background-position: 180% 0; }
}
@keyframes virgSpark {
0%, 100% { opacity: 0.55; transform: translateY(-50%) rotate(0deg); }
50% { opacity: 1; transform: translateY(-50%) rotate(180deg); }
}
/* ==================================================================
* VIR Group — Mastodon launcher + branding overrides
* Appended to Setting.custom_css (served at /custom.css on every page).
* ================================================================== */
/* --- 1. Apps launcher (9-cubes) widget ---------------------------- */
.vir-launcher {
position: relative;
display: inline-block;
margin: 6px 0 12px;
font-family: inherit;
}
.vir-launcher--floating {
position: fixed;
bottom: 16px;
left: 16px;
z-index: 9999;
}
.vir-launcher__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(99, 100, 255, 0.15);
color: #6364ff;
cursor: pointer;
transition: background-color 0.15s, transform 0.12s, color 0.15s;
}
.vir-launcher__btn svg {
width: 26px;
height: 26px;
}
.vir-launcher__btn:hover {
background-color: rgba(99, 100, 255, 0.28);
color: #8b8cff;
transform: scale(1.05);
}
.vir-launcher__btn:focus-visible {
outline: 2px solid #6364ff;
outline-offset: 2px;
}
.vir-launcher.is-open .vir-launcher__btn {
background-color: rgba(99, 100, 255, 0.35);
color: #fff;
}
.vir-launcher__panel {
position: absolute;
bottom: calc(100% + 10px);
left: 0;
width: 312px;
padding: 14px;
background: #313543;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
z-index: 10000;
opacity: 0;
transform: translateY(8px) scale(0.97);
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.vir-launcher.is-open .vir-launcher__panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.vir-launcher__header {
font-size: 0.7em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 10px;
padding: 0 4px;
}
.vir-launcher__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.vir-launcher__tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 10px 6px;
border-radius: 10px;
text-decoration: none;
color: #d9e1e8 !important;
transition: background-color 0.12s, transform 0.12s;
}
.vir-launcher__tile:hover {
background-color: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
text-decoration: none !important;
}
.vir-launcher__tile:focus-visible {
outline: 2px solid #6364ff;
outline-offset: 1px;
}
.vir-launcher__icon-wrap {
position: relative;
width: 44px;
height: 44px;
}
.vir-launcher__icon {
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover;
background: rgba(255, 255, 255, 0.06);
display: block;
}
.vir-launcher__label {
display: block;
margin-top: 6px;
font-size: 0.7em;
line-height: 1.2;
text-align: center;
max-width: 90px;
word-break: break-word;
color: #d9e1e8;
}
.vir-launcher__badge {
position: absolute;
bottom: -3px;
right: -3px;
width: 16px;
height: 16px;
border-radius: 50%;
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.vir-launcher__badge--play {
background-image: url("data:image/svg+xml;utf8,");
}
.vir-launcher__badge--apple {
background-image: url("data:image/svg+xml;utf8,");
}
/* Mobile: open as fixed bottom sheet, full width. Also lift the launcher
* button itself above Mastodon's bottom auth bar ("Створити обліковий
* запис / Увійти") which otherwise covers the in-footer launcher. */
@media (max-width: 600px) {
.vir-launcher {
position: fixed !important;
bottom: 88px !important; /* clear of the auth/login bar (~70 px) */
left: 14px !important;
z-index: 9997 !important;
margin: 0 !important;
}
.vir-launcher__btn {
width: 56px;
height: 56px;
background: rgba(99, 100, 255, 0.95); /* solid so it stays visible */
color: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.vir-launcher__btn svg { width: 28px; height: 28px; }
.vir-launcher__panel {
position: fixed;
bottom: 152px; /* above the button (88 + 56 + gap) */
left: 12px;
right: 12px;
width: auto;
max-height: calc(100vh - 180px);
overflow-y: auto;
}
.vir-launcher--floating {
bottom: 88px;
left: 14px;
}
}
/* --- 2. Logo replacement (CSS fallback if JS hasn't run yet) ------- */
/* JS in vir-enhance.js does the real swap; this fallback just hides the
* upstream Mastodon SVG so there's no flash of foreign logo on first paint. */
svg.logo:not([data-vir-replaced]) {
visibility: hidden;
}
/* --- VIR SOCIAL gradient wordmark (replaces Mastodon logo) ------- */
/* Mastodon's column header normally hosts a 28 px svg.logo. We need room
* for a ~160 px-tall text logo, so let the wrapper grow. */
.column-link--logo,
.navigation-panel__logo,
.navigation-bar__logo {
height: auto !important;
min-height: 180px !important;
padding: 10px 12px !important;
overflow: visible !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.vir-text-logo {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
height: 160px;
padding: 0 4px;
text-decoration: none !important;
cursor: pointer;
transition: filter 0.15s ease, transform 0.15s ease;
box-sizing: border-box;
}
.vir-text-logo:hover { filter: brightness(1.18); transform: translateY(-1px); }
.vir-text-logo:focus-visible { outline: 2px solid #6f3ff5; outline-offset: 4px; border-radius: 6px; }
.vir-text-logo__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
font-weight: 900;
/* Two-line stacked wordmark — scales with the sidebar width so it always
* fits. At 257 px sidebar (default desktop) ~60 px, capped at 60 px so
* "SOCIAL" stays comfortably inside the sidebar (was clipping at 70). */
font-size: clamp(28px, 5vw, 60px);
line-height: 0.95;
letter-spacing: -0.02em;
white-space: nowrap;
background-image: linear-gradient(135deg, #4f46e5 0%, #6366f1 35%, #8b5cf6 65%, #06b6d4 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.vir-text-logo__line {
display: block;
line-height: 0.95;
}
/* Hidden by default — the floating mobile logo only shows on phones. */
.vir-mobile-logo { display: none !important; }
/* On phones Mastodon hides the right sidebar, so the in-sidebar logo
* goes off-screen. Reveal the dedicated floating clone instead. */
@media (max-width: 600px) {
/* Main sidebar logo doesn't apply (sidebar is off-screen on mobile) — no
* adjustments needed there. */
.vir-mobile-logo {
display: flex !important;
position: fixed !important;
top: 6px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 9998 !important;
height: auto !important;
padding: 4px 10px !important;
background: rgba(20, 22, 30, 0.85) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
pointer-events: auto !important;
}
.vir-mobile-logo .vir-text-logo__inner {
flex-direction: row !important; /* compact single-line on phones */
gap: 8px;
font-size: clamp(20px, 6vw, 28px);
line-height: 1;
}
/* Make room under the floating logo so it doesn't cover instance content */
body { padding-top: 56px; }
}
/* --- "S.V." gradient text tile inside the apps launcher ---------- */
.vir-launcher__icon--text {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 10px;
background-image: linear-gradient(135deg, #4f46e5 0%, #6366f1 35%, #8b5cf6 65%, #06b6d4 100%);
color: #fff;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.04em;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}