/* * ========================================================= * 敏行物理 Desktop Boundary V1 * * 只负责“整个缩放母版外围”的浅边界。 * * 不修改： * - 原网站iframe * - 导航 * - 首页翻页 * - 滚轮 * - 搜索 * - 卡片 * - 动画 * - scale * - 居中算法 * * 所有元素： * pointer-events:none * ========================================================= */ /* --------------------------------------------------------- * 边界总层 * --------------------------------------------------------- */ .mx-boundary-layer{ position:fixed; inset:0; z-index:9000; pointer-events:none; user-select:none; overflow:hidden; } /* --------------------------------------------------------- * 每一条边界 * --------------------------------------------------------- */ .mx-boundary-side{ position:fixed; pointer-events:none; user-select:none; opacity:0; transition: opacity .18s ease; } /* * 边界本身不做明显的“框”。 * * 用： * 1px主线 * + * 向空白区渐隐的柔和过渡 */ /* ========================================================= * TOP * ========================================================= */ .mx-boundary-top{ height:18px; border-bottom: 1px solid rgba(82,108,104,0); background: linear-gradient( to top, rgba(70,101,97,0.000) 0%, rgba(70,101,97,0.010) 42%, rgba(70,101,97,0.000) 100% ); } /* ========================================================= * BOTTOM * ========================================================= */ .mx-boundary-bottom{ height:18px; border-top: 1px solid rgba(82,108,104,0); background: linear-gradient( to bottom, rgba(70,101,97,0.000) 0%, rgba(70,101,97,0.010) 42%, rgba(70,101,97,0.000) 100% ); } /* ========================================================= * LEFT * ========================================================= */ .mx-boundary-left{ width:18px; border-right: 1px solid rgba(82,108,104,0); background: linear-gradient( to left, rgba(70,101,97,0.000) 0%, rgba(70,101,97,0.010) 42%, rgba(70,101,97,0.000) 100% ); } /* ========================================================= * RIGHT * ========================================================= */ .mx-boundary-right{ width:18px; border-left: 1px solid rgba(82,108,104,0); background: linear-gradient( to right, rgba(70,101,97,0.000) 0%, rgba(70,101,97,0.010) 42%, rgba(70,101,97,0.000) 100% ); } /* ========================================================= * SOFT * * 单侧空白： * 32px～96px * * 极淡。 * ========================================================= */ .mx-boundary-side.is-soft{ opacity:1; } .mx-boundary-top.is-soft{ border-bottom-color: rgba(79,105,101,.060); background: linear-gradient( to top, rgba(75,102,98,.000) 0%, rgba(75,102,98,.020) 38%, rgba(75,102,98,.000) 100% ); } .mx-boundary-bottom.is-soft{ border-top-color: rgba(79,105,101,.060); background: linear-gradient( to bottom, rgba(75,102,98,.000) 0%, rgba(75,102,98,.020) 38%, rgba(75,102,98,.000) 100% ); } .mx-boundary-left.is-soft{ border-right-color: rgba(79,105,101,.060); background: linear-gradient( to left, rgba(75,102,98,.000) 0%, rgba(75,102,98,.020) 38%, rgba(75,102,98,.000) 100% ); } .mx-boundary-right.is-soft{ border-left-color: rgba(79,105,101,.060); background: linear-gradient( to right, rgba(75,102,98,.000) 0%, rgba(75,102,98,.020) 38%, rgba(75,102,98,.000) 100% ); } /* ========================================================= * FULL * * 单侧空白 >= 96px * * 仍然是浅的。 * 只是轮廓更清楚一点。 * ========================================================= */ .mx-boundary-side.is-full{ opacity:1; } .mx-boundary-top.is-full{ height:26px; border-bottom-color: rgba(72,100,96,.105); background: linear-gradient( to top, rgba(67,96,92,.000) 0%, rgba(67,96,92,.029) 34%, rgba(67,96,92,.012) 62%, rgba(67,96,92,.000) 100% ); } .mx-boundary-bottom.is-full{ height:26px; border-top-color: rgba(72,100,96,.105); background: linear-gradient( to bottom, rgba(67,96,92,.000) 0%, rgba(67,96,92,.029) 34%, rgba(67,96,92,.012) 62%, rgba(67,96,92,.000) 100% ); } .mx-boundary-left.is-full{ width:26px; border-right-color: rgba(72,100,96,.105); background: linear-gradient( to left, rgba(67,96,92,.000) 0%, rgba(67,96,92,.029) 34%, rgba(67,96,92,.012) 62%, rgba(67,96,92,.000) 100% ); } .mx-boundary-right.is-full{ width:26px; border-left-color: rgba(72,100,96,.105); background: linear-gradient( to right, rgba(67,96,92,.000) 0%, rgba(67,96,92,.029) 34%, rgba(67,96,92,.012) 62%, rgba(67,96,92,.000) 100% ); } /* * 测试控制面板如果存在， * 保持比边界更高。 */ .mx-visual-panel{ z-index:10000 !important; } @media (prefers-reduced-motion:reduce){ .mx-boundary-side{ transition:none; } } /* MX_BOUNDARY_V12_DEEPER_START */ /* * 网站与外围背景之间的视觉边界。 * * medium： * 非常轻 * * large/full： * 稍明显一些 * * none： * 仍然不显示 */ /* --------------------------------------------------------- * 边界总层 * --------------------------------------------------------- */ .mx-boundary-layer{ pointer-events:none !important; } /* --------------------------------------------------------- * 所有实际边界元素： * 稍微提高灰蓝色可见度 * --------------------------------------------------------- */ .mx-boundary-layer [class*="edge"], .mx-boundary-layer [class*="line"], .mx-boundary-layer [class*="boundary"]{ border-color: rgba(91,115,122,.34) !important; } /* --------------------------------------------------------- * 水平边界 * --------------------------------------------------------- */ .mx-boundary-layer [data-side="top"], .mx-boundary-layer [data-side="bottom"]{ background: linear-gradient( 90deg, rgba(91,115,122,.05) 0%, rgba(91,115,122,.34) 18%, rgba(91,115,122,.38) 50%, rgba(91,115,122,.34) 82%, rgba(91,115,122,.05) 100% ) !important; } /* --------------------------------------------------------- * 垂直边界 * --------------------------------------------------------- */ .mx-boundary-layer [data-side="left"], .mx-boundary-layer [data-side="right"]{ background: linear-gradient( 180deg, rgba(91,115,122,.05) 0%, rgba(91,115,122,.34) 18%, rgba(91,115,122,.38) 50%, rgba(91,115,122,.34) 82%, rgba(91,115,122,.05) 100% ) !important; } /* --------------------------------------------------------- * 网站主体本身增加极轻微悬浮感 * * 不是硬边框。 * --------------------------------------------------------- */ .mx-stage{ box-shadow: 0 0 0 1px rgba(82,104,112,.20), 0 10px 32px rgba(37,55,61,.08); } /* * 如果Boundary JS判断为“无边界”， * 不利用阴影强行制造明显边界。 */ body[data-mx-boundary="none"] .mx-stage, .mx-shell[data-boundary="none"] .mx-stage{ box-shadow: none; } /* MX_BOUNDARY_V12_DEEPER_END */