Przeglądaj źródła

feat: Flutter-style UI beautification

- Gradient background (#E8EDF2 → #F5F7FA)
- Glass-morphism header with backdrop-filter blur
- Result cards: 12px radius, shadow, spring-animated cardIn
- Pill-shaped input area (28px radius, floating shadow, lift on focus)
- Pill shortcut buttons (17px radius, blue on hover with shadow)
- Tabular-nums for aligned result digits
- Updated error/info boxes to rounded cards
- Transparent terminal container

Co-Authored-By: Claude <noreply@anthropic.com>
nonvioce 3 miesięcy temu
rodzic
commit
c2b9082c3f
1 zmienionych plików z 53 dodań i 48 usunięć
  1. 53 48
      app/src/main/assets/console.css

+ 53 - 48
app/src/main/assets/console.css

@@ -57,7 +57,7 @@
 
 
 body {
 body {
     font-family: var(--font-sans);
     font-family: var(--font-sans);
-    background: var(--terminal-bg);
+    background: linear-gradient(180deg, #E8EDF2 0%, #F5F7FA 100%);
     color: var(--terminal-fg);
     color: var(--terminal-fg);
     height: 100vh;
     height: 100vh;
     overflow: hidden;
     overflow: hidden;
@@ -71,14 +71,16 @@ body {
     background: var(--terminal-bg);
     background: var(--terminal-bg);
 }
 }
 
 
-/* 顶部导航栏 */
+/* 顶部导航栏 — 毛玻璃 */
 .top-nav {
 .top-nav {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: space-between;
     justify-content: space-between;
     padding: 12px 20px;
     padding: 12px 20px;
-    background: #FFFFFF;
-    border-bottom: 1px solid var(--terminal-border);
+    background: rgba(255,255,255,0.85);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(0,0,0,0.06);
     min-height: 56px;
     min-height: 56px;
 }
 }
 
 
@@ -162,8 +164,8 @@ body {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     overflow: hidden;
     overflow: hidden;
-    background: var(--terminal-bg);
-    padding: 16px 20px;
+    background: transparent;
+    padding: 12px 16px;
     position: relative;
     position: relative;
 }
 }
 
 
@@ -233,18 +235,23 @@ body {
     flex: 1;
     flex: 1;
 }
 }
 
 
-/* 结果输出 */
+/* 结果输出 — 卡片化 */
 .result-line {
 .result-line {
     display: flex;
     display: flex;
     gap: 8px;
     gap: 8px;
-    padding: 12px 16px;
-    margin: 8px 0 8px 0;
+    padding: 14px 18px;
+    margin: 10px 0;
     background: #FFFFFF;
     background: #FFFFFF;
-    border-left: 3px solid var(--success-color);
-    border-radius: 4px;
+    border-left: 4px solid var(--success-color);
+    border-radius: 12px;
     color: var(--terminal-fg);
     color: var(--terminal-fg);
     word-break: break-word;
     word-break: break-word;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
+    animation: cardIn 0.25s cubic-bezier(0.16,1,0.3,1);
+}
+@keyframes cardIn {
+    from { opacity: 0; transform: translateY(8px) scale(0.98); }
+    to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 }
 
 
 .result-prompt {
 .result-prompt {
@@ -256,15 +263,17 @@ body {
 
 
 .result-text {
 .result-text {
     flex: 1;
     flex: 1;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.01em;
 }
 }
 
 
 /* 错误输出 */
 /* 错误输出 */
 .error-line {
 .error-line {
     padding: 12px 16px;
     padding: 12px 16px;
-    margin: 8px 0 8px 0;
+    margin: 10px 0;
     background: var(--error-light);
     background: var(--error-light);
-    border-left: 3px solid var(--error-color);
-    border-radius: 4px;
+    border-left: 4px solid var(--error-color);
+    border-radius: 12px;
     color: var(--error-color);
     color: var(--error-color);
     word-break: break-word;
     word-break: break-word;
 }
 }
@@ -272,10 +281,10 @@ body {
 /* 信息输出 */
 /* 信息输出 */
 .info-line {
 .info-line {
     padding: 12px 16px;
     padding: 12px 16px;
-    margin: 8px 0 8px 0;
+    margin: 10px 0;
     background: var(--primary-light);
     background: var(--primary-light);
-    border-left: 3px solid var(--primary-color);
-    border-radius: 4px;
+    border-left: 4px solid var(--primary-color);
+    border-radius: 12px;
     color: var(--primary-dark);
     color: var(--primary-dark);
     word-break: break-word;
     word-break: break-word;
     white-space: pre-wrap;
     white-space: pre-wrap;
@@ -359,22 +368,23 @@ body {
     background: #2E7D32;
     background: #2E7D32;
 }
 }
 
 
-/* 终端输入行 */
+/* 终端输入行 — 胶囊形 */
 .terminal-input-line {
 .terminal-input-line {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 12px;
     gap: 12px;
-    padding: 12px 16px;
+    padding: 10px 10px 10px 18px;
     background: #FFFFFF;
     background: #FFFFFF;
-    border: 2px solid var(--terminal-border);
-    border-radius: 8px;
-    margin-top: 16px;
-    transition: border-color 0.2s;
+    border: 1.5px solid rgba(0,0,0,0.08);
+    border-radius: 28px;
+    margin-top: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
+    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
 }
 }
-
 .terminal-input-line:focus-within {
 .terminal-input-line:focus-within {
     border-color: var(--primary-color);
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
+    box-shadow: 0 4px 24px rgba(25,118,210,0.15), 0 1px 3px rgba(25,118,210,0.08);
+    transform: translateY(-1px);
 }
 }
 
 
 .terminal-prompt {
 .terminal-prompt {
@@ -495,22 +505,18 @@ body {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: flex-start;
     justify-content: flex-start;
-    padding: 12px 20px;
-    background: #FFFFFF;
-    border-top: 1px solid var(--terminal-border);
+    padding: 10px 20px;
+    background: rgba(255,255,255,0.85);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-top: 1px solid rgba(0,0,0,0.04);
     gap: 8px;
     gap: 8px;
     overflow-x: auto;
     overflow-x: auto;
 }
 }
 
 
-.mdc-elevation--z2 {
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 
-                0 2px 2px 0 rgba(0, 0, 0, 0.14), 
-                0 1px 5px 0 rgba(0, 0, 0, 0.12);
-}
-
 .shortcuts-group {
 .shortcuts-group {
     display: flex;
     display: flex;
-    gap: 8px;
+    gap: 6px;
     flex-shrink: 0;
     flex-shrink: 0;
 }
 }
 
 
@@ -519,25 +525,24 @@ body {
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     min-width: 36px;
     min-width: 36px;
-    height: 36px;
-    padding: 0 12px;
-    border: 1px solid var(--terminal-border);
-    border-radius: 6px;
-    background: #FAFAFA;
-    color: var(--terminal-fg);
+    height: 34px;
+    padding: 0 14px;
+    border: none;
+    border-radius: 17px;
+    background: rgba(0,0,0,0.04);
+    color: #546E7A;
     font-family: var(--font-mono);
     font-family: var(--font-mono);
     font-size: 14px;
     font-size: 14px;
     font-weight: 500;
     font-weight: 500;
     cursor: pointer;
     cursor: pointer;
-    transition: all 0.2s;
+    transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
 }
 }
-
 .shortcut-btn:hover {
 .shortcut-btn:hover {
-    background: var(--primary-light);
-    border-color: var(--primary-color);
-    color: var(--primary-dark);
+    background: var(--primary-color);
+    color: #FFFFFF;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(25,118,210,0.25);
 }
 }
-
 .shortcut-btn:active {
 .shortcut-btn:active {
     transform: scale(0.95);
     transform: scale(0.95);
 }
 }