diff --git a/apps/android/app/src/main/java/com/steipete/clawdis/node/node/CanvasController.kt b/apps/android/app/src/main/java/com/steipete/clawdis/node/node/CanvasController.kt index 3f6dfabb5..dc6cd5483 100644 --- a/apps/android/app/src/main/java/com/steipete/clawdis/node/node/CanvasController.kt +++ b/apps/android/app/src/main/java/com/steipete/clawdis/node/node/CanvasController.kt @@ -158,9 +158,9 @@ private val canvasHtml = position: fixed; inset: -20%; background: - repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, + repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 48px), - repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, + repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 48px); transform: translate3d(0,0,0) rotate(-7deg); will-change: transform, opacity; @@ -180,7 +180,6 @@ private val canvasHtml = radial-gradient(900px 800px at 55% 75%, rgba(0,209,255,0.10), rgba(0,0,0,0) 62%); filter: blur(28px); opacity: 0.52; - mix-blend-mode: screen; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; @@ -188,6 +187,12 @@ private val canvasHtml = pointer-events: none; animation: clawdis-glow-drift 110s ease-in-out infinite alternate; } + @supports (mix-blend-mode: screen) { + body::after { mix-blend-mode: screen; } + } + @supports not (mix-blend-mode: screen) { + body::after { opacity: 0.70; } + } @keyframes clawdis-grid-drift { 0% { transform: translate3d(-12px, 8px, 0) rotate(-7deg); opacity: 0.40; } 50% { transform: translate3d( 10px,-7px, 0) rotate(-6.6deg); opacity: 0.56; } diff --git a/apps/ios/Sources/Screen/ScreenController.swift b/apps/ios/Sources/Screen/ScreenController.swift index 7f201e739..ac37e8c3b 100644 --- a/apps/ios/Sources/Screen/ScreenController.swift +++ b/apps/ios/Sources/Screen/ScreenController.swift @@ -125,9 +125,9 @@ final class ScreenController { position: fixed; inset: -20%; background: - repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, + repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 48px), - repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, + repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 48px); transform: translate3d(0,0,0) rotate(-7deg); will-change: transform, opacity; @@ -147,7 +147,6 @@ final class ScreenController { radial-gradient(900px 800px at 55% 75%, rgba(0,209,255,0.10), rgba(0,0,0,0) 62%); filter: blur(28px); opacity: 0.52; - mix-blend-mode: screen; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; @@ -155,6 +154,12 @@ final class ScreenController { pointer-events: none; animation: clawdis-glow-drift 110s ease-in-out infinite alternate; } + @supports (mix-blend-mode: screen) { + body::after { mix-blend-mode: screen; } + } + @supports not (mix-blend-mode: screen) { + body::after { opacity: 0.70; } + } @keyframes clawdis-grid-drift { 0% { transform: translate3d(-12px, 8px, 0) rotate(-7deg); opacity: 0.40; } 50% { transform: translate3d( 10px,-7px, 0) rotate(-6.6deg); opacity: 0.56; }