feat(ui): global style

ui/demo-pwa/index.html

@@ -20,6 +20,7 @@
     href="https://cdn.jsdelivr.net/npm/@alwatr/font@0.21.0/vazirmatn.min.css"
     onload="this.media='all';this.onload=null;"
   />
+  <link rel="stylesheet" href="src/global.css" />
 
   <meta name="color-scheme" content="light dark" />
   <meta name="theme-color" media="(prefers-color-scheme: light)" content="#673ab7" />

ui/demo-pwa/src/global.css

@@ -0,0 +1,87 @@
+:root {
+  --primary-text-color: rgb(32, 33, 36);
+  --primary-background-color: rgb(248, 249, 250);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary-text-color: rgb(232, 234, 237);
+    --primary-background-color: rgb(32, 33, 36);
+  }
+}
+
+
+@supports (padding-top: 20px) {
+  :root {
+    --ion-safe-area-top: var(--ion-statusbar-padding);
+  }
+}
+
+@supports (padding-top: constant(safe-area-inset-top)) {
+  :root {
+    --ion-safe-area-top: constant(safe-area-inset-top);
+    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
+    --ion-safe-area-left: constant(safe-area-inset-left);
+    --ion-safe-area-right: constant(safe-area-inset-right);
+  }
+}
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  :root {
+    --ion-safe-area-top: env(safe-area-inset-top);
+    --ion-safe-area-bottom: env(safe-area-inset-bottom);
+    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-right: env(safe-area-inset-right);
+  }
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+html {
+  font-size: 62.5%;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -webkit-user-drag: none;
+  -ms-content-zooming: none;
+  -ms-touch-action: pan-x pan-y pinch-zoom;
+  touch-action: pan-x pan-y pinch-zoom;
+  word-wrap: break-word;
+  transform: translateZ(0);
+  overflow: hidden;
+  overflow: clip;
+  color: var(--primary-text-color);
+  background-color: --primary-background-color;
+  overscroll-behavior-y: none;
+
+}
+
+.noscript {
+  text-align: center;
+  font-size: 2rem;
+  padding: 4rem 2rem;
+}
+
+.noscript p {
+  margin: 0.5em 0;
+}
+
+body.no-scroll {
+  overflow: hidden;
+}