bknd/app/src/ui/styles.css

@import "./main.css";
@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;
}

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 {
   min-width: auto !important;
   display: block !important;
}

/* 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;
   max-width: 100%;
}

.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;
}