zcode/dusuniot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.10.9 首页 H8 标题条 + H9 tabs 切换器 1:1:TabsWidget 忠实 DOM/React 切换;widget-tabs 基础块+生成规则+custom_css 三层;section margin/gap 渲染支持;全局 body 行高改无单位 1.5、kit 链接字体 Roboto;H1~H7 全量回归无差异

Browse Source
This commit is contained in:
bigcode
2026-11-01 10:34:54 +08:00
parent 2cbfc82a08
commit f66f4775d6
5 changed files with 148 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/app.css
+76 -3
View File
@@ -64,10 +64,11 @@
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
/* 基准取原站实测（2026-10-31 headless）：16px / #333 / 行高 24px（hello-elementor 默认） */
/* 基准取原站实测（2026-10-31 headless）：16px / #333；行高为无单位 1.5
* （原站 action 按钮 fs14 → 21px 随字号缩放，绝对 24px 会固定不变） */
font-family: var(--font-sans);
font-size: 16px;
line-height: 24px;
line-height: 1.5;
color: #333333;
background: #fff;
}
@@ -296,6 +297,12 @@
/* ===== Elementor hover 动画（e-animation-shrink.min.css）：hover 缩至 90%，0.3s 过渡 */
/* heading 标题链接颜色继承（原站不受全局品牌橙影响，实测 #333/#000） */
.el-heading-title a { color: inherit; }
/* kit 全局链接排版（post-15.css .elementor-kit-15 a）：链接默认 Roboto 400。
* 取证：tab 卡片 .card 为 <a>，kit 字体使其内部 ul/li 用 Roboto 渲染（文字 273.6px），
* 否则被卡片内嵌样式的 Arial 截住（261.9px），第 4 条规格多折一行（H9 body 高 +21.6）。
* 颜色不在此外加：各 widget 链接色已由自身规则（.el-heading-title a 等）与原站一致。
*/
.content-html a { font-family: "Roboto", sans-serif; font-weight: 400; }
.el-anim-shrink { transition-duration: 0.3s; transition-property: transform; }
.el-anim-shrink:hover, .el-anim-shrink:focus, .el-anim-shrink:active { transform: scale(0.9); }
@@ -404,8 +411,74 @@
border-right: 0;
border-bottom: 1px dashed #E0E5F9;
}
[data-el="338fb86"] { padding-inline: 1rem; }
/* 338fb86 移动端 padding 由 padding_mobile(collectResponsiveCss)在根上生效 */
}
/* ===== Elementor 原生 tabs widget（widget-tabs.min.css 对应块；H9 热门硬件切换器）
* 原站为水平视图 + alignment-center；竖排/其余档位规则随源码保留（无实例不生效）。
* 源文件的 border:1px #d5d8dc 简写缺 style，按规范整条无效——与原站一致不产生边框，未移植。
* active 下边框 4px #ed6c00 与内容 wrapper 顶部 1px #C7CBDA 由节点 custom_css
* （.ele-soms-chip-dif …，collectCustomCss 注入）提供。
*/
.elementor-widget-tabs .elementor-tabs { text-align: start; }
/* 源文件的 border:1px #d5d8dc 简写（实测原站伪元素 color=#d5d8dc 生效）——按可解析移植，
* 仅取颜色；宽度随后被 fd97340 的生成规则(border_width=0, 含伪元素)归零 */
.elementor-widget-tabs .elementor-tab-content,
.elementor-widget-tabs .elementor-tab-title,
.elementor-widget-tabs .elementor-tab-title:after,
.elementor-widget-tabs .elementor-tab-title:before,
.elementor-widget-tabs .elementor-tabs-content-wrapper { border-color: #d5d8dc; }
.elementor-widget-tabs .elementor-tabs-wrapper { overflow: hidden; }
.elementor-widget-tabs .elementor-tab-title { cursor: pointer; outline: var(--focus-outline, none); }
.elementor-widget-tabs .elementor-tab-desktop-title {
border: solid transparent;
font-weight: 700;
line-height: 1;
padding: 20px 25px;
position: relative;
}
.elementor-widget-tabs .elementor-tab-desktop-title.elementor-active { border-color: #d5d8dc; }
.elementor-widget-tabs .elementor-tab-desktop-title.elementor-active:after,
.elementor-widget-tabs .elementor-tab-desktop-title.elementor-active:before {
content: ""; display: block; position: absolute;
}
.elementor-widget-tabs .elementor-tab-desktop-title:focus-visible { border: 1px solid #000; }
.elementor-widget-tabs .elementor-tab-mobile-title { cursor: pointer; padding: 10px; }
.elementor-widget-tabs .elementor-tab-content { display: none; padding: 20px; }
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title { display: table-cell; }
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active { border-block-end-style: none; }
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active:after,
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active:before {
border-block-end-style: solid; height: 0; inset-block-end: 0; width: 999em;
}
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active:before { inset-inline-end: 100%; }
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active:after { inset-inline-start: 100%; }
@media (min-width: 768px) {
.elementor-widget-tabs.elementor-tabs-alignment-center .elementor-tabs-wrapper,
.elementor-widget-tabs.elementor-tabs-alignment-end .elementor-tabs-wrapper,
.elementor-widget-tabs.elementor-tabs-alignment-stretch .elementor-tabs-wrapper { display: flex; }
.elementor-widget-tabs.elementor-tabs-alignment-center .elementor-tabs-wrapper { justify-content: center; }
.elementor-widget-tabs.elementor-tabs-alignment-end .elementor-tabs-wrapper { justify-content: flex-end; }
.elementor-widget-tabs.elementor-tabs-alignment-stretch.elementor-tabs-view-horizontal .elementor-tab-title { width: 100%; }
.elementor-tabs .elementor-tab-mobile-title { display: none; }
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-content { border-style: solid; border-block-start-style: none; }
}
@media (max-width: 767px) {
.elementor-tabs .elementor-tab-content, .elementor-tabs .elementor-tab-title { border-style: solid; border-block-end-style: none; }
.elementor-tabs .elementor-tabs-wrapper { display: none; }
.elementor-tabs .elementor-tabs-content-wrapper { border-block-end-style: solid; }
.elementor-tabs .elementor-tab-content { padding: 10px; }
}
.elementor-clearfix:after { clear: both; content: ""; display: block; height: 0; width: 0; }
/* fd97340 生成规则：border_width=0 → 标题/伪元素/内容面板 border-width 0（原站实测 content 无边框、
* active 伪元素 0px solid #d5d8dc，而移植的 view-horizontal 规则给了 border-style:solid，
* 宽度须归零，否则 medium 3px 挤窄内容 6px / 画出通栏橙线）；
* active 下边框 4px 与颜色由 custom_css !important / 生成规则覆盖 */
[data-el="fd97340"] .elementor-tab-title,
[data-el="fd97340"] .elementor-tab-title:before,
[data-el="fd97340"] .elementor-tab-title:after,
[data-el="fd97340"] .elementor-tab-content { border-width: 0; }
[data-el="fd97340"] .elementor-tab-title.elementor-active { color: #ED6C00; }
}
@media (max-width: 900px) {