Squashed commit message

frontend/spa/src/style.css

@@ -0,0 +1,88 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@plugin "daisyui" {
+    themes: all;
+}
+
+/**
+    --color-base-100 - DaisyUI background
+ */
+
+html, body, #app {
+    overflow-x: hidden;
+    min-height: 100vh;
+}
+
+:root {
+    --swiper-pagination-bullet-horizontal-gap: 1px;
+    --swiper-pagination-bullet-size: 6px;
+    --swiper-pagination-color: #777;
+    --swiper-pagination-bottom: 0px;
+    --product_list_title_max_lines: 2;
+    --tc-navbar-min-height: 3rem;
+    --dock-height: 72px;
+}
+
+.app-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    padding-left: calc(
+            var(--tg-content-safe-area-inset-left, 0px)
+            + var(--tg-safe-area-inset-left, 0px)
+    );
+    padding-right: calc(
+            var(--tg-content-safe-area-inset-right, 0px)
+            + var(--tg-safe-area-inset-right, 0px)
+    );
+}
+
+.app-content {
+    flex: 1 1 auto;
+
+    padding-top: calc(
+            var(--tg-content-safe-area-inset-top, 0px)
+            + var(--tg-safe-area-inset-top, 0px)
+    );
+
+    padding-bottom: calc(
+            var(--dock-height)
+            + var(--tg-content-safe-area-inset-bottom, 0px)
+            + var(--tg-safe-area-inset-bottom, 0px)
+    );
+}
+
+.safe-top {
+    padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+}
+
+.app-header {
+    z-index: 60;
+    position: fixed;
+    height: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
+    min-height: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
+    max-height: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+    color: white;
+}
+
+html {
+    background-color: var(--color-base-200);
+}
+
+.radius-box {
+    border-radius: var(--radius-xl);
+}
+
+.bottom-fix {
+    bottom: calc(
+            var(--tg-content-safe-area-inset-bottom, 0px)
+            + var(--tg-safe-area-inset-bottom, 0px)
+    );
+}