mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
Fix bamboo stalk taper and align stray colors to palette
The stalks used border-radius:50%, which renders a tall ellipse whose ends taper to points, and unbounded parallax drift pushed them off the bottom of the viewport on long pages. Rounded caps + 20% overscan + a viewport-relative drift clamp keep them full-height while scrolling. Sweep the remaining off-palette colors into the nature palette: content-script overlays (slate grays), amber warnings/badges/star accents (now terracotta) in popup, background badge and website illustrations, and the support-heart red (now --danger). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
@@ -790,13 +790,13 @@ function updateBadgeStatus() {
|
||||
|
||||
if (status === 'reconnecting') {
|
||||
chrome.action.setBadgeText({ text: '...' });
|
||||
chrome.action.setBadgeBackgroundColor({ color: '#f59e0b' });
|
||||
chrome.action.setBadgeBackgroundColor({ color: '#c96736' });
|
||||
} else if (status === 'connecting') {
|
||||
chrome.action.setBadgeText({ text: '...' });
|
||||
chrome.action.setBadgeBackgroundColor({ color: '#fbbf24' });
|
||||
chrome.action.setBadgeBackgroundColor({ color: '#de7949' });
|
||||
} else if (status === 'connected' && currentRoom && currentTabId) {
|
||||
chrome.action.setBadgeText({ text: 'ON' });
|
||||
chrome.action.setBadgeBackgroundColor({ color: '#22c55e' });
|
||||
chrome.action.setBadgeBackgroundColor({ color: '#56ae6c' });
|
||||
} else {
|
||||
chrome.action.setBadgeText({ text: '' });
|
||||
}
|
||||
|
||||
@@ -424,12 +424,12 @@
|
||||
|
||||
if (video.seeking) return 'involuntary';
|
||||
|
||||
if (Date.now() < hcmBufferingUntil) return 'involuntary';
|
||||
if (Date.now() < hcmBufferingUntil) return 'involuntary';
|
||||
|
||||
if (Date.now() < visibilityGraceUntil) return 'involuntary';
|
||||
|
||||
|
||||
if (Date.now() - hcmLastUserGestureAt > HCM_USER_GESTURE_MS) return 'involuntary';
|
||||
|
||||
|
||||
return 'deliberate';
|
||||
|
||||
}
|
||||
@@ -494,7 +494,7 @@
|
||||
|
||||
if (target && target.playbackState === 'paused') {
|
||||
|
||||
tryMediaAction(EVENTS.PAUSE);
|
||||
tryMediaAction(EVENTS.PAUSE);
|
||||
|
||||
} else if (target && target.playbackState === 'playing') {
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
--success: var(--accent-green);
|
||||
--error: var(--danger);
|
||||
--radius: 12px;
|
||||
--star: #fbbf24;
|
||||
--star: oklch(0.68 0.14 45);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -289,7 +289,7 @@
|
||||
.toast-success { background: var(--success); color: var(--text-on-green); }
|
||||
.toast-error { background: var(--error); color: white; }
|
||||
.toast-info { background: var(--accent); color: var(--text-on-green); }
|
||||
.toast-warning { background: #f59e0b; color: white; }
|
||||
.toast-warning { background: var(--accent-terracotta); color: white; }
|
||||
|
||||
@keyframes toastSlideIn {
|
||||
from { opacity: 0; transform: translateY(-20px); }
|
||||
|
||||
+10
-10
@@ -725,7 +725,7 @@ function updatePeerList(peers) {
|
||||
// Host Control Mode: show "Solo" badge for peers watching on their own.
|
||||
if (typeof p === 'object' && p.desynced) {
|
||||
const solo = document.createElement('span');
|
||||
solo.style.cssText = 'font-size:10px; color:#fff; background:#b45309; padding:2px 6px; border-radius:6px; font-weight:600;';
|
||||
solo.style.cssText = 'font-size:10px; color:#fff; background:#c96736; padding:2px 6px; border-radius:6px; font-weight:600;';
|
||||
const soloText = getMessage('BADGE_DESYNCED') || 'Solo';
|
||||
solo.textContent = soloText;
|
||||
solo.title = getMessage('TOOLTIP_PEER_DESYNCED') || soloText;
|
||||
@@ -1014,14 +1014,14 @@ function applyConnectionStatus(status) {
|
||||
elements.connDot.className = 'status-dot ' + (connected ? 'status-online' : ((connecting || reconnecting) ? 'status-online' : 'status-offline'));
|
||||
|
||||
if (reconnecting) {
|
||||
elements.connDot.style.background = '#f59e0b';
|
||||
elements.connDot.style.boxShadow = '0 0 8px #f59e0b';
|
||||
elements.connDot.style.background = '#c96736';
|
||||
elements.connDot.style.boxShadow = '0 0 8px #c96736';
|
||||
} else if (connecting) {
|
||||
elements.connDot.style.background = '#fbbf24';
|
||||
elements.connDot.style.boxShadow = '0 0 8px #fbbf24';
|
||||
elements.connDot.style.background = '#de7949';
|
||||
elements.connDot.style.boxShadow = '0 0 8px #de7949';
|
||||
} else if (idle) {
|
||||
// Neutral grey — ready, not failed.
|
||||
elements.connDot.style.background = '#9ca3af';
|
||||
elements.connDot.style.background = '#bcb7a9';
|
||||
elements.connDot.style.boxShadow = 'none';
|
||||
} else if (!connected) {
|
||||
elements.connDot.style.background = '#b94642';
|
||||
@@ -1073,7 +1073,7 @@ function updatePingDisplay(pingMs) {
|
||||
if (pingMs < 50) {
|
||||
elements.connPing.style.color = '#56ae6c';
|
||||
} else if (pingMs < 150) {
|
||||
elements.connPing.style.color = '#f59e0b';
|
||||
elements.connPing.style.color = '#c96736';
|
||||
} else {
|
||||
elements.connPing.style.color = '#b94642';
|
||||
}
|
||||
@@ -2286,7 +2286,7 @@ function refreshDebugInfo() {
|
||||
}
|
||||
|
||||
const hint = document.createElement('div');
|
||||
hint.style.cssText = 'margin-top: 12px; padding: 8px; background: rgba(251,191,36,0.1); border-left: 3px solid #fbbf24; border-radius: 4px; font-size: 10px; color: var(--text-muted);';
|
||||
hint.style.cssText = 'margin-top: 12px; padding: 8px; background: rgba(222,121,73,0.12); border-left: 3px solid #de7949; border-radius: 4px; font-size: 10px; color: var(--text-muted);';
|
||||
hint.textContent = 'Is a video currently playing? The extension only detects <video> elements. Ensure media is actively loaded on the page.';
|
||||
elements.videoDebug.appendChild(hint);
|
||||
return;
|
||||
@@ -2297,7 +2297,7 @@ function refreshDebugInfo() {
|
||||
addField('State', state.paused ? 'PAUSED' : 'PLAYING', state.paused ? 'var(--text-muted)' : '#56ae6c');
|
||||
addField('Time', `${state.currentTime.toFixed(2)}s / ${(state.duration || 0).toFixed(2)}s`);
|
||||
addField('ReadyState', `${state.readyState} (${state.readyStateLabel || '?'})`,
|
||||
state.readyState >= 3 ? '#56ae6c' : '#fbbf24');
|
||||
state.readyState >= 3 ? '#56ae6c' : '#de7949');
|
||||
addField('Network', `${state.networkState} (${state.networkStateLabel || '?'})`,
|
||||
state.networkState === 1 ? '#56ae6c' : state.networkState === 3 ? '#b94642' : 'var(--text-muted)');
|
||||
addField('Buffered', state.buffered || '?');
|
||||
@@ -2326,7 +2326,7 @@ function refreshDebugInfo() {
|
||||
addField('Resolution', `${state.videoWidth}x${state.videoHeight}`, dimsOk ? '#56ae6c' : '#b94642');
|
||||
if (!dimsOk) {
|
||||
const dimHint = document.createElement('div');
|
||||
dimHint.style.cssText = 'color: #fbbf24; font-size: 9px; margin: 2px 0 6px 12px;';
|
||||
dimHint.style.cssText = 'color: #de7949; font-size: 9px; margin: 2px 0 6px 12px;';
|
||||
dimHint.textContent = '0x0 = video element hidden or not yet loaded';
|
||||
elements.videoDebug.appendChild(dimHint);
|
||||
}
|
||||
|
||||
+5
-3
@@ -217,9 +217,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const bambooNear = document.getElementById('bamboo-near');
|
||||
if (bambooFar && bambooNear && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollY = window.scrollY;
|
||||
bambooFar.style.transform = `translateY(${scrollY * 0.04}px)`;
|
||||
bambooNear.style.transform = `translateY(${-scrollY * 0.06}px)`;
|
||||
// Cap the drift at ~14% of the viewport: the stalks have 20%
|
||||
// overscan, so they always span the full height while parallaxing.
|
||||
const maxShift = window.innerHeight * 0.14;
|
||||
bambooFar.style.transform = `translateY(${Math.min(window.scrollY * 0.04, maxShift)}px)`;
|
||||
bambooNear.style.transform = `translateY(${-Math.min(window.scrollY * 0.06, maxShift)}px)`;
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -173,7 +173,7 @@
|
||||
<a href="privacy" lang="en" style="color: var(--text-muted); text-decoration: none;">Privacy Policy</a>
|
||||
<a href="de/datenschutz" lang="de" style="color: var(--text-muted); text-decoration: none;">Datenschutz</a>
|
||||
<a href="alternatives"><span lang="en">Guides & comparisons</span><span lang="de">Vergleiche & Anleitungen</span></a>
|
||||
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="Support KoalaSync" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #c9302c; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
|
||||
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="Support KoalaSync" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #b94642; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
|
||||
<span aria-hidden="true">♥</span>
|
||||
<span>Support KoalaSync</span>
|
||||
</a>
|
||||
|
||||
+23
-23
@@ -139,9 +139,9 @@ body {
|
||||
|
||||
#bamboo-far .bamboo-stalk {
|
||||
position: absolute;
|
||||
top: -6%;
|
||||
height: 112%;
|
||||
border-radius: 50%;
|
||||
top: -20%;
|
||||
height: 140%;
|
||||
border-radius: 999px;
|
||||
filter: blur(5.5px);
|
||||
background: linear-gradient(180deg, oklch(0.32 0.05 145 / 0.35), oklch(0.24 0.04 140 / 0.15));
|
||||
}
|
||||
@@ -159,9 +159,9 @@ body {
|
||||
|
||||
#bamboo-near .bamboo-stalk {
|
||||
position: absolute;
|
||||
top: -6%;
|
||||
height: 112%;
|
||||
border-radius: 50%;
|
||||
top: -20%;
|
||||
height: 140%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, oklch(0.4 0.07 145 / 0.55), oklch(0.26 0.05 140 / 0.25));
|
||||
transform-origin: bottom center;
|
||||
animation: bambooSway 10s ease-in-out infinite;
|
||||
@@ -179,9 +179,9 @@ body {
|
||||
background: oklch(0.5 0.08 145 / 0.5);
|
||||
}
|
||||
|
||||
#bamboo-near .node-1 { top: 24%; }
|
||||
#bamboo-near .node-2 { top: 49%; }
|
||||
#bamboo-near .node-3 { top: 74%; }
|
||||
#bamboo-near .node-1 { top: 28%; }
|
||||
#bamboo-near .node-2 { top: 48%; }
|
||||
#bamboo-near .node-3 { top: 68%; }
|
||||
|
||||
#bamboo-near .bamboo-leaf {
|
||||
position: absolute;
|
||||
@@ -191,9 +191,9 @@ body {
|
||||
background: oklch(0.55 0.11 145 / 0.4);
|
||||
}
|
||||
|
||||
#bamboo-near .near-1 .leaf-1 { top: 23%; left: 10px; transform: rotate(18deg); }
|
||||
#bamboo-near .near-1 .leaf-2 { top: 48.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
|
||||
#bamboo-near .near-2 .leaf-1 { top: 30%; left: -26px; transform: rotate(-155deg); }
|
||||
#bamboo-near .near-1 .leaf-1 { top: 27.5%; left: 10px; transform: rotate(18deg); }
|
||||
#bamboo-near .near-1 .leaf-2 { top: 47.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
|
||||
#bamboo-near .near-2 .leaf-1 { top: 44%; left: -26px; transform: rotate(-155deg); }
|
||||
|
||||
@keyframes bambooSway {
|
||||
0%, 100% { transform: rotate(0); }
|
||||
@@ -1409,9 +1409,9 @@ html.theme-light .koala-speech-bubble::after {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
background: rgba(234, 179, 8, 0.1);
|
||||
border: 1px solid rgba(234, 179, 8, 0.2);
|
||||
color: #facc15;
|
||||
background: oklch(0.62 0.14 45 / 0.1);
|
||||
border: 1px solid oklch(0.62 0.14 45 / 0.2);
|
||||
color: oklch(0.72 0.13 50);
|
||||
padding: 0.5rem 0.6rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
@@ -1977,7 +1977,7 @@ input:checked + .mock-slider:before {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.illus-browser-dot:nth-child(1) { background: oklch(0.55 0.15 25); }
|
||||
.illus-browser-dot:nth-child(2) { background: #fbbf24; }
|
||||
.illus-browser-dot:nth-child(2) { background: oklch(0.68 0.14 45); }
|
||||
.illus-browser-dot:nth-child(3) { background: oklch(0.68 0.13 150); }
|
||||
|
||||
.illus-browser-address-bar {
|
||||
@@ -2639,7 +2639,7 @@ input:checked + .mock-slider:before {
|
||||
}
|
||||
|
||||
.terminal-dot.red { background: oklch(0.55 0.15 25); }
|
||||
.terminal-dot.yellow { background: #f59e0b; }
|
||||
.terminal-dot.yellow { background: oklch(0.68 0.14 45); }
|
||||
.terminal-dot.green { background: oklch(0.68 0.13 150); }
|
||||
|
||||
.terminal-tabs {
|
||||
@@ -2701,7 +2701,7 @@ input:checked + .mock-slider:before {
|
||||
.t-key { color: oklch(0.72 0.12 45); }
|
||||
.t-val { color: oklch(0.75 0.10 150); }
|
||||
.t-str { color: oklch(0.80 0.12 155); }
|
||||
.t-num { color: #fbbf24; }
|
||||
.t-num { color: oklch(0.75 0.12 50); }
|
||||
|
||||
.terminal-copy-btn {
|
||||
position: absolute;
|
||||
@@ -3046,7 +3046,7 @@ html:not(.lang-de) [lang="de"] {
|
||||
.feature-card:nth-child(2) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
|
||||
.feature-card:nth-child(3) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
|
||||
.feature-card:nth-child(4) { --card-accent: oklch(0.75 0.10 150 / 0.06); }
|
||||
.feature-card:nth-child(5) { --card-accent: rgba(245, 158, 11, 0.06); }
|
||||
.feature-card:nth-child(5) { --card-accent: oklch(0.68 0.14 45 / 0.06); }
|
||||
.feature-card:nth-child(6) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
|
||||
.feature-card:nth-child(7) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
|
||||
.feature-card:nth-child(8) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
|
||||
@@ -3339,9 +3339,9 @@ html.theme-light .compat-logo img.compat-logo-disneyplus-mark {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.use-case-card:nth-child(1) { --card-accent-border: #f59e0b; }
|
||||
.use-case-card:nth-child(2) { --card-accent-border: oklch(0.75 0.10 150); }
|
||||
.use-case-card:nth-child(3) { --card-accent-border: oklch(0.62 0.14 45); }
|
||||
.use-case-card:nth-child(1) { --card-accent-border: oklch(0.68 0.13 150); }
|
||||
.use-case-card:nth-child(2) { --card-accent-border: oklch(0.62 0.14 45); }
|
||||
.use-case-card:nth-child(3) { --card-accent-border: oklch(0.75 0.10 150); }
|
||||
|
||||
|
||||
.use-case-card:hover {
|
||||
@@ -4789,7 +4789,7 @@ header[id] {
|
||||
.film-bounce-ball {
|
||||
transform-origin: bottom center;
|
||||
transform: translateY(var(--bounce-y, 0px));
|
||||
filter: drop-shadow(0 0 4px #fde047);
|
||||
filter: drop-shadow(0 0 4px oklch(0.72 0.13 50));
|
||||
}
|
||||
|
||||
/* Twinkle & Glow play state bindings */
|
||||
|
||||
@@ -425,7 +425,7 @@
|
||||
<polygon points="275,84 288,42 301,84" fill="#040903"/>
|
||||
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
|
||||
</g>
|
||||
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
|
||||
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#de7949"/>
|
||||
</svg>
|
||||
<div class="demo-play-overlay" aria-hidden="true">
|
||||
<span class="demo-icon-wrap">
|
||||
@@ -482,7 +482,7 @@
|
||||
<polygon points="275,84 288,42 301,84" fill="#040903"/>
|
||||
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
|
||||
</g>
|
||||
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
|
||||
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#de7949"/>
|
||||
</svg>
|
||||
<div class="demo-play-overlay" aria-hidden="true">
|
||||
<span class="demo-icon-wrap">
|
||||
@@ -1169,7 +1169,7 @@
|
||||
<polygon points="115,84 128,42 141,84" fill="#040903"/>
|
||||
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
|
||||
</g>
|
||||
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
|
||||
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#de7949"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="player-controls">
|
||||
@@ -1222,7 +1222,7 @@
|
||||
<polygon points="115,84 128,42 141,84" fill="#040903"/>
|
||||
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
|
||||
</g>
|
||||
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
|
||||
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#de7949"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="player-controls">
|
||||
@@ -1463,7 +1463,7 @@
|
||||
<a href="{{ASSET_PATH}}{{FOOTER_LEGAL_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
|
||||
<a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>
|
||||
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives"><span><span lang="en">Guides & comparisons</span><span lang="de">Vergleiche & Anleitungen</span></span></a>
|
||||
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #c9302c; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
|
||||
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #b94642; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
|
||||
<span aria-hidden="true">♥</span>
|
||||
<span>{{FOOTER_SUPPORT}}</span>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user