/* __OM_METRICS_MASKDIFF_V26_CSS__ */ /* ========================================================== SUMMARY METRICS — FULL WIDTH ROW BELOW HERO ========================================================== */ #om-v26-metrics-row { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0 0 16px 0; box-sizing: border-box; } #om-v26-metrics-row > .card { width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box; } /* * Make the cards slightly more compact now that they span * the same full-width content area as the hero/timeline. */ #om-v26-metrics-row .card { min-height: 66px !important; padding: 11px 14px !important; display: flex !important; align-items: center !important; gap: 12px !important; border-radius: 12px !important; } #om-v26-metrics-row .card > span { flex: 0 0 auto; } #om-v26-metrics-row .card small { display: block; margin-bottom: 2px; font-size: 10px !important; } #om-v26-metrics-row .card b { font-size: 16px !important; } /* ========================================================== COMPARE MASK DIFFERENCE ========================================================== */ .om-v26-mask-diff { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); } .om-v26-mask-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; color: #8ba1ae; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; } .om-v26-mask-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 8px; } .om-v26-mask-legend span { display: inline-flex; align-items: center; gap: 4px; } .om-v26-dot { width: 7px; height: 7px; display: inline-block; border-radius: 2px; } .om-v26-dot.green { background: #32df89; } .om-v26-dot.red { background: #ff5b5b; } .om-v26-mask-canvas { display: block; width: 100%; height: 74px; box-sizing: border-box; border-radius: 7px; border: 1px solid rgba(255,255,255,.055); background: #030e15; image-rendering: pixelated; } .om-v26-mask-status { min-height: 13px; margin-top: 5px; color: #758d9b; font-size: 8px; line-height: 1.35; } .om-v26-mask-status.error { color: #db8b8b; } /* * Remove old generated sections if any survived in DOM. */ .om-v25-pixel-section, .om-v9-pixel-wrap { display: none !important; } /* * Clip remains removed. */ #om-download-clip-btn, .om-v25-hide-clip { display: none !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:1000px) { #om-v26-metrics-row { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(max-width:600px) { #om-v26-metrics-row { grid-template-columns:1fr; } } /* ========================================================== __OM_METRICS_TEXT_COMPARE_V29__ ========================================================== */ /* ---------------------------------------------------------- FOUR METRICS — ONE FULL WIDTH ROW BELOW TIMELINE ---------------------------------------------------------- */ #om-v26-metrics-row { width: 100% !important; max-width: none !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; gap: 12px !important; margin: 0 0 16px 0 !important; padding: 0 !important; box-sizing: border-box !important; } #om-v26-metrics-row > .card { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; min-height: 70px !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } #om-v26-metrics-row .card > span { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #om-v26-metrics-row .card > div { min-width: 0 !important; } /* ---------------------------------------------------------- COMPARE = TEXT ONLY ---------------------------------------------------------- */ #omV7CompareModal .om-v29-hide-preview-card, #omV7CompareModal .om-v29-hide-compare-media { display: none !important; } /* no old generated previews */ #omV7CompareModal .om-v26-mask-diff, #omV7CompareModal .om-v25-pixel-section, #omV7CompareModal .om-v9-pixel-wrap, #omV7CompareModal .om-v9-pixel-canvas { display: none !important; } /* * Keep raw numerical cards visible. */ #omV7CompareModal .om-v25-product-card { display: block !important; } /* * Numerical direction: * preserve existing green / red. */ #omV7CompareModal .om-v18-positive, #omV7CompareModal .om-v19-positive { color: #39df8b !important; } #omV7CompareModal .om-v18-negative, #omV7CompareModal .om-v19-negative { color: #ff6565 !important; } /* * Download clip gone. */ #om-download-clip-btn { display: none !important; } @media(max-width:900px){ #om-v26-metrics-row { grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } } @media(max-width:550px){ #om-v26-metrics-row { grid-template-columns: 1fr !important; } } /* ========================================================== __OM_COMPARE_RGB_ONLY_V32__ Restore ONLY original RGB comparison previews. ========================================================== */ /* * Undo V29 hiding of the original V7 preview cards. */ #omV7CompareModal .om-v7-preview.om-v29-hide-preview-card, #omV7CompareModal .om-v7-preview { display: block !important; visibility: visible !important; opacity: 1 !important; } /* * Restore RGB images inside: * * BASELINE * COMPARISON * VISUAL COMPARISON */ #omV7CompareModal .om-v7-preview img, #omV7CompareModal .om-v7-preview picture, #omV7CompareModal .om-v29-hide-compare-media { display: block !important; visibility: visible !important; opacity: 1 !important; } /* * Preserve original V7 preview grid. */ #omV7CompareModal .om-v7-previews { display: grid !important; visibility: visible !important; opacity: 1 !important; } /* * CUSTOM PER-INDEX PNG PREVIEWS STAY GONE. */ #omV7CompareModal .om-v26-mask-diff, #omV7CompareModal .om-v25-pixel-section, #omV7CompareModal .om-v9-pixel-wrap, #omV7CompareModal .om-v9-pixel-canvas, #omV7CompareModal .om-compare-pixel-preview, #omV7CompareModal .om-product-pixel-preview, #omV7CompareModal [data-om-pixel-preview] { display: none !important; } /* * No clip button. */ #om-download-clip-btn { display: none !important; }