ux refine

app/static/style.css

@@ -61,6 +61,13 @@ button,
     border-radius: 8px;
     cursor: pointer;
     padding: 10px 14px;
+    text-decoration: none;
+    line-height: 1.2;
+}
+
+.button-primary {
+    background: #0b57d0;
+    color: #fff;
 }
 
 .button-secondary {
@@ -69,9 +76,21 @@ button,
     border: 1px solid #cbd5e1;
 }
 
+.button-danger {
+    background: #b42318;
+    color: #fff;
+}
+
+.button-small {
+    padding: 8px 12px;
+    font-size: 0.92rem;
+}
+
 .button:hover,
-button:hover {
-    opacity: 0.92;
+button:hover,
+.button:focus-visible,
+button:focus-visible {
+    opacity: 0.94;
     text-decoration: none;
 }
 
@@ -92,6 +111,10 @@ button:hover {
     flex-wrap: wrap;
 }
 
+.page-header {
+    margin-bottom: 10px;
+}
+
 .stack {
     display: grid;
     gap: 12px;
@@ -178,9 +201,14 @@ button:hover {
     margin-bottom: 16px;
 }
 
+.detail-image-compact {
+    max-width: 180px;
+    margin-bottom: 8px;
+}
+
 .thumb-image {
     display: block;
-    width: 88px;
+    width: 64px;
     max-width: 100%;
     height: auto;
     border-radius: 8px;
@@ -189,7 +217,7 @@ button:hover {
 }
 
 .compact-thumb {
-    flex: 0 0 88px;
+    flex: 0 0 64px;
 }
 
 .dense-list {
@@ -197,21 +225,39 @@ button:hover {
     gap: 8px;
 }
 
+.overview-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 10px;
+}
+
 .compact-row {
     display: grid;
     grid-template-columns: auto 1fr auto;
-    gap: 12px;
+    gap: 10px;
     align-items: start;
-    padding: 10px 12px;
+    padding: 8px 10px;
     border: 1px solid #ddd;
     border-radius: 10px;
     background: #fafafa;
+    position: relative;
 }
 
 .compact-row-box {
     grid-template-columns: 1fr auto;
 }
 
+.overview-card {
+    grid-template-columns: 1fr;
+    gap: 8px;
+    align-content: start;
+    min-height: 150px;
+}
+
+.overview-card-box {
+    min-height: 140px;
+}
+
 .compact-row-container {
     border-left: 4px solid #d98700;
 }
@@ -227,6 +273,12 @@ button:hover {
 .compact-main h2,
 .compact-main h3 {
     margin-bottom: 4px;
+    font-size: 1rem;
+}
+
+.overview-card .compact-main h2,
+.overview-card .compact-main h3 {
+    font-size: 1.02rem;
 }
 
 .row-title-line {
@@ -240,24 +292,54 @@ button:hover {
 .row-meta-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: 4px 12px;
+    gap: 2px 10px;
     color: #555;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+}
+
+.overview-card .row-meta-grid {
+    grid-template-columns: 1fr;
+    gap: 2px;
 }
 
 .row-note {
-    margin-top: 6px;
+    margin-top: 4px;
     margin-bottom: 0;
     color: #333;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
 }
 
-.row-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    align-items: flex-end;
-    white-space: nowrap;
+.clickable-card {
+    cursor: pointer;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.clickable-card:hover,
+.clickable-card:focus-within {
+    border-color: #9fb8e8;
+    box-shadow: 0 0 0 3px rgba(11, 87, 208, 0.08);
+    background: #fcfdff;
+}
+
+.detail-card-compact {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 12px 16px;
+    align-items: start;
+}
+
+.detail-meta-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 4px 12px;
+}
+
+.detail-note {
+    grid-column: 1 / -1;
+}
+
+.section-heading h2 {
+    margin-bottom: 2px;
 }
 
 .meta,
@@ -324,18 +406,6 @@ button:hover {
     margin: 0;
 }
 
-.link-button {
-    background: none;
-    border: none;
-    color: #b42318;
-    padding: 0;
-    cursor: pointer;
-}
-
-.link-button:hover {
-    text-decoration: underline;
-}
-
 @media (max-width: 720px) {
     .container {
         margin: 0;
@@ -356,6 +426,28 @@ button:hover {
 
     .thumb-image,
     .compact-thumb {
-        width: 100px;
+        width: 72px;
+    }
+
+    .detail-card-compact {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (min-width: 900px) {
+    .overview-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+@media (min-width: 1280px) {
+    .overview-grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+}
+
+@media (min-width: 1600px) {
+    .overview-grid {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
     }
 }