WIP

resources/css/app.css

@@ -37,7 +37,7 @@
 }
 
 .pswp__top-bar {
-    @apply fixed bottom-2 top-auto w-auto left-1/2 -translate-x-1/2 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800;
+    @apply fixed bottom-2 top-auto w-auto left-1/2 -translate-x-1/2 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 border border-gray-200 dark:border-gray-600;
 }
 
 .pswp__button {
@@ -47,3 +47,51 @@
 .pswp--zoomed-in .pswp__zoom-icn-bar-b {
     display: block;
 }
+
+.pswp__preloader {
+    display: none;
+}
+
+.pswp__counter {
+    @apply text-base text-gray-900 dark:text-white content-center px-2;
+    text-shadow: none;
+}
+
+#toaster {
+    z-index: 100001;
+}
+
+#toaster[data-expanded="true"] {
+    height: var(--full-height);
+}
+
+#toaster>div {
+    --scale: var(--index) * 0.05 + 1;
+    transform: translate(var(--swipe-amount, 0px), calc(14px * var(--index) + var(--front-toast-height) - 100%)) scale(calc(-1 * var(--scale)));
+    touch-action: none;
+    will-change: transform, opacity;
+    cursor: grab;
+}
+
+#toaster>div[data-swiping="true"] {
+    cursor: grabbing;
+}
+
+#toaster>div[data-removed="true"],
+#toaster>div[data-hidden="true"] {
+    opacity: 0;
+}
+
+#toaster[data-expanded="true"]>div[data-hidden="true"] {
+    opacity: 100;
+}
+
+#toaster[data-expanded="true"]>div[data-front="true"],
+#toaster:hover>div[data-front="true"] {
+    transform: translate(var(--swipe-amount, 0px), 0);
+}
+
+#toaster[data-expanded="true"]>div,
+#toaster:hover>div {
+    transform: translate(var(--swipe-amount, 0px), calc(var(--index) * 14px + var(--offset))) scale(1);
+}