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

Refine catalog modal gallery layout

Browse Source
This commit is contained in:
Jacky Ser
2026-08-11 16:40:46 +08:00
parent a608faa298
commit b7e32000bf
2 changed files with 58 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/globals.css
View File

@@ -467,9 +467,9 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
}
.catalog-modal {
position: relative;
width: min(900px, 100%);
width: min(1120px, 100%);
max-height: min(820px, 92vh);
padding: 28px;
padding: 30px;
overflow-y: auto;
border-radius: 18px;
background: white;
@@ -489,27 +489,24 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
cursor: pointer;
font-size: 20px;
}
.catalog-modal-product { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(245px, .75fr); align-items: stretch; gap: 25px; }
.catalog-modal-visuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.catalog-modal-visual-card { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 7px; }
.catalog-modal-product { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr); align-items: stretch; gap: 28px; }
.catalog-modal-visual-card { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; }
.catalog-modal-visual-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catalog-modal-visual-label { color: #687791; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.catalog-modal-image, .catalog-modal-size-image { min-height: 250px; display: flex; align-items: center; justify-content: center; border: 1px solid #e1e7f0; border-radius: 13px; overflow: hidden; background: #f5f7fb; }
.catalog-modal-image img, .catalog-modal-size-image img { display: block; max-width: 100%; max-height: min(43vh, 390px); width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.catalog-modal-size-image { background: #fbfcfe; }
.catalog-modal-size-empty { display: grid; gap: 8px; padding: 18px; text-align: center; }
.catalog-modal-size-empty strong { color: #6b7890; font-size: 14px; line-height: 1.5; }
.catalog-modal-size-empty small { color: #9aa5b5; font-size: 9px; line-height: 1.5; }
.catalog-modal-product-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 10px 3px; }
.catalog-modal-gallery-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #dce5f2; border-radius: 8px; background: #f5f8fd; }
.catalog-modal-gallery-switch button { padding: 6px 9px; border: 0; border-radius: 6px; color: #7c899c; background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }
.catalog-modal-gallery-switch button.active { color: var(--blue); background: white; box-shadow: 0 2px 7px rgba(31,71,139,.09); }
.catalog-modal-gallery-switch button:disabled { cursor: not-allowed; opacity: .4; }
.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-modal-product-info { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 25px 4px 8px; }
.catalog-modal-product h2 { margin: 4px 0 10px; font-size: 27px; line-height: 1.3; letter-spacing: -.025em; }
.catalog-modal-product code { color: #5d6b81; font-size: 11px; }
.catalog-source-note { color: #96a0af; font-size: 9px; }
.catalog-modal-highlight { display: grid; gap: 5px; margin-top: 26px; padding: 13px 14px; border: 1px solid #dbe5f5; border-radius: 11px; background: #f5f8fd; }
.catalog-modal-highlight span { color: #8a96a9; font-size: 9px; }
.catalog-modal-highlight strong { color: var(--ink); font-size: 12px; line-height: 1.55; }
.catalog-spec-table { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 25px; overflow: hidden; border: 1px solid #e0e5ed; border-radius: 11px; background: #e0e5ed; }
.catalog-spec-table div { min-height: 48px; padding: 10px 12px; display: grid; align-content: center; gap: 4px; background: white; }
.catalog-spec-table span { color: #8b96a7; font-size: 9px; }
.catalog-spec-table strong { font-size: 11px; }
.catalog-spec-table { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid #e0e5ed; border-radius: 11px; background: #e0e5ed; }
.catalog-spec-table div { min-height: 38px; padding: 7px 10px; display: grid; align-content: center; gap: 3px; background: white; }
.catalog-spec-table span { color: #8b96a7; font-size: 8px; }
.catalog-spec-table strong { font-size: 10px; }
.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 p { margin: 0; color: #8b95a5; font-size: 9px; line-height: 1.6; }
@@ -574,6 +571,9 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.catalog-modal-backdrop { padding: 10px; }
.catalog-modal { padding: 22px 16px; }
.catalog-modal-product { grid-template-columns: 1fr; gap: 16px; }
.catalog-modal-product-info { padding: 0 3px; }
.catalog-modal-image { min-height: 290px; }
.catalog-modal-image img { max-height: 290px; }
.catalog-spec-table { grid-template-columns: 1fr; }
.catalog-modal-actions { align-items: stretch; flex-direction: column; }
.products-section { padding: 75px 16px; }