MJ-IT/gdm-Servo-model
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine responsive product detail specs

Browse Source
This commit is contained in:
Jacky Ser
2026-08-12 18:30:50 +08:00
parent 62a3d6ed14
commit 511dbcd0e8
2 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/globals.css
View File

@@ -499,12 +499,12 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
.catalog-modal-inline-info small { color: #96a0af; font-size: 8px; }
.catalog-modal-image { min-height: min(56vh, 520px); display: flex; align-items: center; justify-content: center; border: 1px solid #e1e7f0; border-radius: 13px; overflow: hidden; background: #f5f7fb; }
.catalog-modal-image img { display: block; max-width: 100%; max-height: min(56vh, 510px); width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.catalog-spec-table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #e0e5ed; border-radius: 11px; background: #e0e5ed; }
.catalog-spec-table div { min-width: 0; min-height: 58px; padding: 10px 12px; display: grid; align-content: center; gap: 4px; background: white; }
.catalog-spec-table { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #e0e5ed; border-radius: 11px; background: white; }
.catalog-spec-table div { min-width: 0; min-height: 43px; padding: 5px 7px; display: grid; align-content: center; gap: 1px; background: white; box-shadow: inset 0 0 0 1px #e0e5ed; }
.catalog-spec-table span,
.catalog-spec-table strong { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.catalog-spec-table span { color: #8b96a7; font-size: 8px; line-height: 1.35; }
.catalog-spec-table strong { font-size: 10px; line-height: 1.4; }
.catalog-spec-table span { color: #8b96a7; font-size: 8.5px; line-height: 1.15; }
.catalog-spec-table strong { font-size: 10.5px; line-height: 1.2; }
.catalog-modal-actions { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.catalog-modal-actions .panel-primary { flex: 0 0 auto; }
.catalog-modal-actions .modal-save-button { width: auto; min-width: 124px; margin-top: 0; flex: 0 0 auto; }
@@ -534,7 +534,7 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.catalog-grid { grid-template-columns: repeat(2, 1fr); }
.precision-gear-panel { grid-template-columns: 1fr; }
.precision-gear-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-spec-table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-spec-table { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
@@ -614,10 +614,10 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.catalog-modal-inline-info h2 { font-size: 18px; }
.catalog-modal-image { min-height: 290px; }
.catalog-modal-image img { max-height: 290px; }
.catalog-spec-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-spec-table div { min-height: 52px; padding: 8px 9px; gap: 3px; }
.catalog-spec-table span { font-size: 8px; }
.catalog-spec-table strong { font-size: 9px; }
.catalog-spec-table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-spec-table div { min-height: 39px; padding: 4px 5px; gap: 1px; }
.catalog-spec-table span { font-size: 7.5px; }
.catalog-spec-table strong { font-size: 8.5px; line-height: 1.15; }
.catalog-modal-actions { align-items: stretch; flex-direction: column; }
.catalog-modal-actions .modal-save-button { width: 100%; }
.products-section { padding: 75px 16px; }
@@ -626,6 +626,10 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.footer-brand { justify-self: center; }
}
@media (max-width: 380px) {
.catalog-spec-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
.site-header, .hero-copy, .capability-strip, .products-section, .how-section, footer, .selector-topbar, .result-actions, .restart-button { display: none !important; }
.hero { display: block; min-height: auto; padding: 0; background: white; }