diff --git a/src/style.css b/src/style.css index cdc2bf0..0c35e49 100644 --- a/src/style.css +++ b/src/style.css @@ -3,26 +3,30 @@ @tailwind utilities; :root { - --c-bg: #fafafa; + --c-bg: #f5f5f7; --c-surface: #ffffff; - --c-border: #ebebeb; - --c-border-hover: #d4d4d4; + --c-border: #d8d8e0; + --c-border-hover: #c0c0cc; --c-text: #1a1a2e; - --c-text-secondary: #6b6b7b; - --c-text-tertiary: #9999a8; + --c-text-secondary: #505065; + --c-text-tertiary: #7a7a8e; --c-accent: #1a1a2e; - --c-accent-hover: #2a2a3e; - --c-focus: rgba(26, 26, 46, 0.08); + --c-accent-hover: #353550; + --c-focus: rgba(26, 26, 46, 0.12); --c-progress: #1a1a2e; --c-error: #dc2626; + --c-success: #2d6a4f; --c-log-bg: #1a1a2e; --c-log-text: #d4d4d4; + --c-accent-gradient: linear-gradient(135deg, #1a1a2e, #2d2d4a); + --c-surface-gradient: linear-gradient(135deg, #ffffff, #f8f8fc); + --c-progress-gradient: linear-gradient(90deg, #1a1a2e, #4a4a6e); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px; - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); - --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); color: var(--c-text); background: var(--c-bg); @@ -91,15 +95,16 @@ textarea { } .panel { - background: var(--c-surface); + background: var(--c-surface-gradient); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); - transition: box-shadow var(--transition); + transition: box-shadow var(--transition), border-color var(--transition); } .panel:hover { box-shadow: var(--shadow-md); + border-color: var(--c-border-hover); } .topbar { @@ -241,7 +246,7 @@ textarea { .editor-input:focus { outline: none; border-color: var(--c-accent); - box-shadow: 0 0 0 3px var(--c-focus); + box-shadow: 0 0 0 3px var(--c-focus), 0 1px 4px rgba(26, 26, 46, 0.06); } .check { @@ -283,16 +288,17 @@ textarea { padding: 0 16px; border: 1px solid var(--c-accent); border-radius: var(--radius-sm); - background: var(--c-accent); + background: var(--c-accent-gradient); color: #fff; cursor: pointer; - font-weight: 400; + font-weight: 500; letter-spacing: 0.01em; - transition: background var(--transition), border-color var(--transition), transform 0.1s ease; + transition: background var(--transition), border-color var(--transition), transform 0.1s ease, box-shadow var(--transition); } .button:hover { background: var(--c-accent-hover); + box-shadow: 0 2px 8px rgba(26, 26, 46, 0.15); } .button:active { @@ -355,15 +361,16 @@ textarea { display: inline-flex; align-items: center; justify-content: center; - min-width: 24px; - height: 24px; - padding: 0 8px; + min-width: 26px; + height: 26px; + padding: 0 10px; border-radius: var(--radius-full); - background: var(--c-bg); - color: var(--c-text-secondary); + background: var(--c-accent-gradient); + color: #fff; font-size: 11px; - font-weight: 500; - border: 1px solid var(--c-border); + font-weight: 600; + letter-spacing: 0.02em; + box-shadow: 0 1px 4px rgba(26, 26, 46, 0.15); } .empty-state { @@ -408,18 +415,36 @@ textarea { box-shadow: var(--shadow-sm); } +.task-item:hover { + background: rgba(26, 26, 46, 0.02); +} + .task-item.active { border-color: var(--c-accent); - background: rgba(26, 26, 46, 0.03); - box-shadow: inset 0 0 0 1px var(--c-accent); + background: rgba(26, 26, 46, 0.04); + border-left-color: var(--c-accent); + box-shadow: inset 0 0 0 1px var(--c-accent), 0 2px 8px rgba(26, 26, 46, 0.06); } .task-item.completed { opacity: 0.85; } +.task-item.completed::after { + content: ''; + position: absolute; + top: 12px; + right: 12px; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--c-success); + box-shadow: 0 0 6px rgba(45, 106, 79, 0.4); +} + .task-item.failed { border-color: var(--c-error); + background: rgba(220, 38, 38, 0.03); opacity: 0.9; } @@ -458,19 +483,9 @@ textarea { color: #fff; } -.task-item.completed::after { - content: ''; - position: absolute; - top: 12px; - right: 12px; - width: 6px; - height: 6px; - border-radius: 50%; - background: var(--c-success, #2d6a4f); -} - .task-item { position: relative; + border-left: 3px solid transparent; } .truncate { @@ -480,7 +495,7 @@ textarea { } .progress { - height: 2px; + height: 3px; margin-top: 8px; background: var(--c-border); border-radius: var(--radius-full); @@ -489,8 +504,9 @@ textarea { .progress-bar { height: 100%; - background: var(--c-progress); - transition: width 0.3s ease; + background: var(--c-progress-gradient); + border-radius: var(--radius-full); + transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .error-text { @@ -508,11 +524,15 @@ textarea { .source-text { margin: 10px 0; + padding: 10px 12px; white-space: pre-wrap; word-break: break-word; font-size: 13px; color: var(--c-text); line-height: 1.6; + background: var(--c-bg); + border-radius: var(--radius-sm); + border-left: 3px solid var(--c-border); } .editor-input { @@ -543,15 +563,17 @@ textarea { padding: 0 14px; border: 1px solid var(--c-border); border-radius: var(--radius-md); - background: var(--c-surface); + background: var(--c-surface-gradient); color: var(--c-text); cursor: pointer; - transition: border-color var(--transition), background var(--transition); + font-weight: 500; + transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .log-toggle:hover { border-color: var(--c-border-hover); background: var(--c-bg); + box-shadow: var(--shadow-sm); } .log-panel { @@ -619,16 +641,26 @@ textarea { .task-item .status-active { color: var(--c-accent); - font-weight: 500; + font-weight: 600; + position: relative; } .segment-item { border-left: 3px solid transparent; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); + position: relative; } .segment-item:hover { - border-left-color: var(--c-border-hover); + border-left-color: var(--c-accent); + background: rgba(26, 26, 46, 0.02); + box-shadow: var(--shadow-sm); +} + +.segment-item:focus-within { + border-left-color: var(--c-accent); + background: rgba(26, 26, 46, 0.03); + box-shadow: 0 0 0 1px rgba(26, 26, 46, 0.08); } .segment-item .task-row {