feat: Bolder vrsjmp styles

leoshimo · Feb 22, 2024 · 831b546 · 831b546
1 parent ec6145e
commit 831b546
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/vrsjmp/src-tauri/tauri.conf.json b/vrsjmp/src-tauri/tauri.conf.json
@@ -41,8 +41,8 @@
                 "transparent": true,
                 "title": "vrsjmp",
                 "decorations": false,
-                "width": 640,
-                "height": 461,
+                "width": 800,
+                "height": 518,
                 "center": true,
                 "acceptFirstMouse": true
             }

diff --git a/vrsjmp/src/styles.css b/vrsjmp/src/styles.css
@@ -135,7 +135,7 @@ html, body {
 }
 
 .root {
-    max-width: 640px;
+    max-width: 800px;
     width: 100%;
     background: var(--app-bg);
     opacity: 0.8;
@@ -153,19 +153,21 @@ html, body {
     font-family: var(--font-sans);
     border: none;
     width: 100%;
-    font-size: 15px;
-    padding: 8px 16px;
+    font-size: 22px;
+    font-weight: 600;
+    padding: 0.4em 22px;
     outline: none;
     background: var(--bg);
     color: var(--gray12);
     user-select: none;
 }
+
 .input-field::placeholder {
     color: var(--gray9);
 }
 
 .input-field-separator {
-    width: 100%;
+    width: calc(100% - 16px);
     left: 0;
     height: 1px;
     background: var(--gray6);
@@ -195,7 +197,7 @@ html, body {
 
 .list {
     padding: 0 8px;
-    height: 393px;
+    height: 450px;
     overflow: auto;
     overscroll-behavior: contain;
     scroll-padding-block-end: 40px;
@@ -207,13 +209,14 @@ html, body {
 
 .item {
     cursor: pointer;
-    height: 40px;
+    height: 2.9em;
     border-radius: 8px;
-    font-size: 14px;
+    font-size: 18px;
+    font-weight: 600;
+    padding: 0 12px;
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 0 8px;
     color: var(--gray12);
     user-select: none;
     will-change: background, color;
@@ -231,18 +234,18 @@ html, body {
 }
 
 .item--focus {
+    text-shadow: 1px 1px 2px var(--gray3);
     transition-property: background;
-    background: var(--gray4);
+    background: linear-gradient(90deg, #3F45D0, #4147D6);
 }
 
 .item:active {
     transition-property: background;
-    background: var(--gray4);
+    background: #4D53D9;
 }
 
 .item--selected {
-    background: var(--gray3);
-    color: var(--gray12);
+    background: #4D53D9;
 }
 
 .item__meta {