chore: adjust style

1 files changed, 16 insertions, 17 deletions

diff --git a/src/components/Rule.module.scss b/src/components/Rule.module.scss
index efee1f4..845fa5e 100644
--- a/src/components/Rule.module.scss
+++ b/src/components/Rule.module.scss
@@ -3,16 +3,12 @@
 .rule {
   display: flex;
   align-items: center;
-  padding: 8px 15px;
+  padding: 12px 20px;
   transition: background-color 0.2s ease;
-  border-bottom: 1px solid var(--color-bg-card-border, rgba(0, 0, 0, 0.05));
+  border-bottom: 1px solid var(--color-separator);
 
   &:hover {
-    background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.02));
-  }
-
-  @media (--breakpoint-not-small) {
-    padding: 12px 40px;
+    background-color: var(--bg-near-transparent);
   }
 }
 
@@ -20,9 +16,9 @@
   width: 40px;
   flex-shrink: 0;
   color: var(--color-text-secondary);
-  font-size: 0.8rem;
-  opacity: 0.5;
-  font-family: 'Roboto Mono', monospace;
+  font-size: 11px;
+  opacity: 0.4;
+  font-family: var(--font-mono);
 }
 
 .right {
@@ -38,8 +34,8 @@
 }
 
 .payload {
-  font-family: 'Roboto Mono', Menlo, monospace;
-  font-size: 0.95rem;
+  font-family: var(--font-mono);
+  font-size: 13px;
   color: var(--color-text);
   word-break: break-all;
   line-height: 1.4;
@@ -47,19 +43,20 @@
 
 .size {
   margin-left: 12px;
-  font-size: 0.75rem;
+  font-size: 10px;
   color: var(--color-text-secondary);
-  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.05));
+  background: var(--bg-near-transparent);
   padding: 1px 6px;
-  border-radius: 4px;
+  border-radius: 3px;
   white-space: nowrap;
+  text-transform: uppercase;
 }
 
 .metaRow {
   display: flex;
   align-items: center;
   gap: 12px;
-  font-size: 0.8rem;
+  font-size: 11px;
 }
 
 .typeTag {
@@ -67,12 +64,14 @@
   align-items: center;
   gap: 4px;
   color: var(--color-text-secondary);
-  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.05));
+  background: var(--bg-near-transparent);
   padding: 2px 8px;
   border-radius: 4px;
 
   span {
     font-weight: 500;
+    text-transform: uppercase;
+    font-size: 10px;
   }
 }