optimize elements by reducing the bundle size required

2026-03-19 05:46:04 +00:00 · 2025-01-14 14:10:19 +01:00
parent c7bd0a636b
commit 4ee0f74cdb
30 changed files with 373 additions and 281 deletions
--- a/app/src/ui/styles.css
+++ b/app/src/ui/styles.css
@@ -0,0 +1,133 @@
+@import "./components/form/json-schema/styles.css";
+@import "@xyflow/react/dist/style.css";
+@import "@mantine/core/styles.css";
+@import "@mantine/notifications/styles.css";
+
+html.fixed,
+html.fixed body {
+   top: 0;
+   left: 0;
+   height: 100%;
+   width: 100%;
+   position: fixed;
+   overflow: hidden;
+   overscroll-behavior-x: contain;
+   touch-action: none;
+}
+
+#bknd-admin,
+.bknd-admin {
+   --color-primary: 9 9 11; /* zinc-950 */
+   --color-background: 250 250 250; /* zinc-50 */
+   --color-muted: 228 228 231; /* ? */
+   --color-darkest: 0 0 0; /* black */
+   --color-lightest: 255 255 255; /* white */
+
+   &.dark {
+      --color-primary: 250 250 250; /* zinc-50 */
+      --color-background: 30 31 34;
+      --color-muted: 47 47 52;
+      --color-darkest: 255 255 255; /* white */
+      --color-lightest: 24 24 27; /* black */
+   }
+
+   @mixin light {
+      --mantine-color-body: rgb(250 250 250);
+   }
+   @mixin dark {
+      --mantine-color-body: rgb(9 9 11);
+   }
+
+   table {
+      font-size: inherit;
+   }
+}
+
+html,
+body {
+   font-size: 14px;
+   -webkit-font-smoothing: antialiased;
+   -moz-osx-font-smoothing: grayscale;
+   overscroll-behavior-y: none;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.app-scrollbar::-webkit-scrollbar {
+   display: none;
+}
+/* Hide scrollbar for IE, Edge and Firefox */
+.app-scrollbar {
+   -ms-overflow-style: none; /* IE and Edge */
+   scrollbar-width: none; /* Firefox */
+}
+
+div[data-radix-scroll-area-viewport] > div:first-child {
+   display: block !important;
+   min-width: 100% !important;
+   max-width: 100%;
+}
+
+/* hide calendar icon on inputs */
+input[type="datetime-local"]::-webkit-calendar-picker-indicator,
+input[type="date"]::-webkit-calendar-picker-indicator {
+   display: none;
+}
+
+/* cm */
+.cm-editor {
+   display: flex;
+   flex: 1;
+}
+
+.animate-fade-in {
+   animation: fadeInAnimation 200ms ease;
+}
+@keyframes fadeInAnimation {
+   0% {
+      opacity: 0;
+   }
+   100% {
+      opacity: 1;
+   }
+}
+
+input[readonly]::placeholder,
+input[disabled]::placeholder {
+   opacity: 0.1;
+}
+
+.react-flow__pane,
+.react-flow__renderer,
+.react-flow__node,
+.react-flow__edge {
+   cursor: inherit !important;
+   .drag-handle {
+      cursor: grab;
+   }
+}
+.react-flow .react-flow__edge path,
+.react-flow__connectionline path {
+   stroke-width: 2;
+}
+
+.mantine-TextInput-wrapper input {
+   font-family: inherit;
+   line-height: 1;
+}
+
+.cm-editor {
+   background: transparent;
+}
+.cm-editor.cm-focused {
+   outline: none;
+}
+
+.flex-animate {
+   transition: flex-grow 0.2s ease, background-color 0.2s ease;
+}
+.flex-initial {
+   flex: 0 1 auto;
+}
+.flex-open {
+   flex: 1 1 0;
+}