Style change and refactor

fe/src/assets/style/_content.css

@@ -0,0 +1,43 @@
+body {
+  @apply font-sans font-light tracking-wide bg-slate-900 text-slate-50;
+}
+
+h1,
+h2 {
+  @apply font-mono font-bold;
+}
+
+h3,
+h4,
+h5,
+h6 {
+  @apply font-semibold;
+}
+
+h1 {
+  @apply text-4xl;
+}
+
+h2 {
+  @apply text-3xl;
+}
+
+h3 {
+  @apply text-2xl;
+}
+
+h4 {
+  @apply text-xl;
+}
+
+h5 {
+  @apply text-lg;
+}
+
+ul {
+  @apply list-disc list-inside;
+}
+
+strong {
+  @apply font-bold;
+}

fe/src/assets/style/_form.css

@@ -0,0 +1,28 @@
+.input-group {
+  @apply grid gap-2;
+}
+
+input,
+select {
+  @apply w-full px-2 py-1 text-white border rounded-md border-slate-400 bg-black/20;
+}
+
+:has(> input + span) {
+  @apply flex;
+
+  input {
+    @apply rounded-r-none;
+  }
+
+  span {
+    @apply flex items-center px-2 text-white rounded-r-md bg-slate-400;
+  }
+}
+
+select option {
+  @apply bg-slate-700;
+
+  &:not([disabled]) {
+    @apply cursor-pointer;
+  }
+}

fe/src/assets/style/_mcrm-block.css

@@ -1,11 +1,5 @@
 .mcrm-block {
-  @apply relative
-  p-6
-  gap-x-6
-  gap-y-2
-  backdrop-blur-lg
-  rounded-2xl
-  overflow-hidden;
+  @apply relative p-6 overflow-hidden gap-x-6 gap-y-2 backdrop-blur-lg rounded-2xl;
 
   &::before {
     @apply content-['']
@@ -16,7 +10,8 @@
     size-full
     bg-gradient-to-br
     to-transparent
-    z-[-1];
+    z-[10]
+    pointer-events-none;
 
     mask:
       linear-gradient(#000 0 0) exclude,

fe/src/assets/style/_panel.css

@@ -22,19 +22,12 @@
   }
 
   .panel__title {
-    @apply bg-gradient-to-r
-    w-fit
-    from-amber-300
-    to-white/50
-    pt-3
-    pl-16 sm:pl-4
-    bg-clip-text
-    text-transparent;
+    @apply pt-3 pl-16 text-transparent bg-gradient-to-r w-fit from-amber-300 to-white/50 sm:pl-4 bg-clip-text;
   }
 
   .panel__content {
     @apply grid
-    h-full
+    h-[calc(100%-1rem)]
     pt-4 sm:pt-0
     pl-0 sm:pl-4
     overflow-auto;

fe/src/assets/style/_scrollbar.css

@@ -0,0 +1,23 @@
+::-webkit-scrollbar {
+  @apply w-2;
+}
+
+::-moz-scrollbar {
+  @apply w-2;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply rounded bg-slate-400/80;
+}
+
+::-moz-scrollbar-thumb {
+  @apply rounded bg-slate-400/80;
+}
+
+::-webkit-scrollbar-track {
+  @apply mr-1 rounded bg-slate-100/10;
+}
+
+::-moz-scrollbar-track {
+  @apply mr-1 rounded bg-slate-100/10;
+}