Style change and refactor

fe/src/assets/main.css

@@ -1,89 +1,15 @@
-@import "./style/_macro.css";
+@import './style/_content.css';
-@import "./style/_mcrm-block.css";
+@import './style/_form.css';
-@import "./style/_panel.css";
+@import './style/_scrollbar.css';
+@import './style/_macro.css';
+@import './style/_mcrm-block.css';
+@import './style/_panel.css';
 
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --font-sans: "Roboto", sans-serif;
+  --font-sans: 'Roboto', sans-serif;
-  --font-mono: "Fira Code", monospace;
+  --font-mono: 'Fira Code', monospace;
-}
-
-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;
-}
-
-input {
-  @apply w-full 
-  px-2 py-1
-  border
-  border-slate-400
-  text-white
-  rounded-md
-  bg-black/20;
-}
-
-:has(> input + span) {
-  @apply flex;
-
-  input {
-    @apply rounded-r-none;
-  }
-
-  span {
-    @apply flex
-    items-center
-    px-2
-    rounded-r-md
-    text-white
-    bg-slate-400;
-  }
-}
-
-ul {
-  @apply list-disc
-  list-inside;
-}
-
-strong {
-  @apply font-bold;
 }

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
+  @apply relative p-6 overflow-hidden gap-x-6 gap-y-2 backdrop-blur-lg rounded-2xl;
-  p-6
-  gap-x-6
-  gap-y-2
-  backdrop-blur-lg
-  rounded-2xl
-  overflow-hidden;
 
   &::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
+    @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;
-    w-fit
-    from-amber-300
-    to-white/50
-    pt-3
-    pl-16 sm:pl-4
-    bg-clip-text
-    text-transparent;
   }
 
   .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;
+}