safari blur background and viewpager button theme

lightningkite · Jun 4, 2024 · 0fe6a61 · 0fe6a61
1 parent 5196a73
commit 0fe6a61
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/library/src/jsMain/kotlin/com/lightningkite/kiteui/views/DynamicCSS.kt b/library/src/jsMain/kotlin/com/lightningkite/kiteui/views/DynamicCSS.kt
@@ -1321,6 +1321,7 @@ object DynamicCSS {
                     "border-radius" to "0",
                     "outline-width" to "0",
                     "backdrop-filter" to "blur(5px)",
+                    "-webkit-backdrop-filter" to "blur(5px)",
                 ) + when (val it = theme.background.applyAlpha(0.5f)) {
                     is Color -> mapOf("background-color" to it.toCss())
                     is LinearGradient -> mapOf(

diff --git a/library/src/jsMain/kotlin/com/lightningkite/kiteui/views/direct/ViewPager.js.kt b/library/src/jsMain/kotlin/com/lightningkite/kiteui/views/direct/ViewPager.js.kt
@@ -32,14 +32,15 @@ actual inline fun ViewWriter.viewPagerActual(crossinline setup: ViewPager.() ->
         rc.forceCentering = true
         this.asDynamic().__ROCK__controller = rc
 
-        button {
+        buttonTheme - button {
             native.addClass("touchscreenOnly")
             native.style.run {
                 position = "absolute"
                 zIndex = "2"
                 left = "0"
                 top = "50%"
                 transform = "translateY(-50%)"
+                margin = "0.5rem"
             }
             icon {
                 source = Icon.chevronLeft
@@ -48,14 +49,17 @@ actual inline fun ViewWriter.viewPagerActual(crossinline setup: ViewPager.() ->
                 rc.jump(rc.centerVisible.value - 1, Align.Center, true)
             }
         }
-        button {
+
+
+        buttonTheme - button {
             native.addClass("touchscreenOnly")
             native.style.run {
                 position = "absolute"
                 zIndex = "2"
                 right = "0"
                 top = "50%"
                 transform = "translateY(-50%)"
+                margin = "0.5rem"
             }
             icon {
                 source = Icon.chevronRight