fix(frontend): remove duplicate select arrow and show the WordPress brand icon
This commit is contained in:
kate522 committed
1 parent
962ab5c290
commit
fe57022550
5 files changed
+38
-4
No files matched your search
@@ -2676,6 +2676,13 @@ select.form-control {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* .form-select::before 已经画了 FA5 箭头，隐藏原生箭头避免出现两个。 */
|
||||||
|
.form-select select {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
.form-select::before {
|
.form-select::before {
|
||||||
font: normal normal 900 14px/1 "Font Awesome 5 Free";
|
font: normal normal 900 14px/1 "Font Awesome 5 Free";
|
||||||
content: '\f107';
|
content: '\f107';
|
||||||
|
|||||||
Vendored
+1
-1
@@ -1 +1 @@
|
|||||||
body{--mian-max-width: 1200px;--posts-card-scale: 70%;--posts-list-scale: 70%;--theme-color: #f04494;--focus-color: var(--theme-color);--focus-shadow-color: rgba(253, 83, 161, .4);--key-color: #333;--main-color: #4e5358;--main-shadow: rgba(116, 116, 116, .08);--muted-color: #777;--muted-2-color: #999;--muted-3-color: #b1b1b1;--muted-4-color: #d2d2d2;--body-bg-color: #f5f6f7;--main-bg-color: #fff;--muted-bg-color: #eee;--muted-bg-2-color: #f6f7f8;--main-border-color: rgba(50, 50, 50, .06);--muted-border-color: rgba(0, 0, 0, .03);--main-radius: 8px;--mini-radius: calc(var(--main-radius) / 1.4);--blur-bg: rgba(255, 255, 255, .8);--float-btn-bg: rgba(200, 200, 200, .4);--header-bg: var(--blur-bg);--header-color: var(--main-color);--footer-bg: var(--main-bg-color);--footer-color: var(--muted-2-color)}.dark-theme{--key-color: #f8fafc;--main-color: #e5eef7;--main-shadow: rgba(24, 24, 24, .1);--muted-color: #b4b6bb;--muted-2-color: #888a8f;--muted-3-color: #636469;--muted-4-color: #43454a;--body-bg-color: #292a2d;--main-bg-color: #323335;--muted-bg-color: #2d2e31;--muted-bg-2-color: #37383a;--main-border-color: rgba(114, 114, 114, .1);--muted-border-color: rgba(184, 184, 184, .02);--blur-bg: rgba(50, 51, 53, .8);--float-btn-bg: rgba(70, 70, 70, .4);--header-bg: var(--blur-bg);--header-color: var(--main-color);--footer-bg: var(--main-bg-color);--footer-color: var(--muted-2-color)}::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}.dark::view-transition-old(root){z-index:1}.dark::view-transition-new(root){z-index:2147483646}::view-transition-old(root){z-index:2147483646}::view-transition-new(root){z-index:1}@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))){body{--blur-bg: #ffffff}body.dark-theme{--blur-bg: #37383a}}body:has(.modal.in),body.modal-open{--blur-bg: #ffffff}body.dark-theme:has(.modal.in),body.dark-theme.modal-open{--blur-bg: #37383a}body.fps-accelerat{--blur-bg: #ffffff}body.fps-accelerat.dark-theme{--blur-bg: #37383a}body.fps-accelerat *{-webkit-backdrop-filter:unset!important;backdrop-filter:unset!important}a[href],.relates-thumb li a>.post-info,.more-posts a>span{transition:color .2s,background .3s,opacity .3s,box-shadow .3s,transform .3s}.main-shadow{transition:box-shadow .3s}.but:focus,.but:hover,.progress,.navbar-nav>li:before{transition:.3s}.navbar-top .sub-menu,.theme-popover,.hover-show .hover-show-con{opacity:0;transform:translateY(6px);transition:.4s}.navbar-top li:hover>.sub-menu,.hover-show:hover .hover-show-con,.hover-show:hover~.hover-show-con,.hover-show:hover~.sub-menu{opacity:1;transform:translateY(0)}.hover-show{position:relative;cursor:pointer;z-index:10}.hover-show .hover-show-con{position:absolute;visibility:hidden}.hover-show:hover .hover-show-con,.hover-show:hover~.hover-show-con,.hover-show:hover~.sub-menu{visibility:unset}.match-ok,.navbar-top .sub-menu li>a,.ic-close{transition:.3s}.ic-close:hover{transform:rotate(270deg);color:inherit}.social_loginbar a,.item-thumbnail img,.dosc-nav .fa{transition:.2s ease-out}.hover-zoom:hover,.hover-zoom-img:hover img,.social_loginbar .xh-social-item:hover,.social_loginbar .social-login-item:hover{transform:scale(1.05)}.hover-zoom-sm:hover,.hover-zoom-img-sm:hover img,.posts-mini:hover img,.posts-item:hover .item-thumbnail img,.posts-item.mult-thumb .thumb-items>span>img:hover{transform:scale(1.02)}.main-min-height{min-height:calc(100vh - 280px)}.main-shadow{box-shadow:0 0 10px var(--main-shadow)}.key-color{color:var(--key-color)}.focus-color{--this-color: var(--focus-color);color:var(--focus-color)}.muted-color{color:var(--muted-color)}.muted-2-color{color:var(--muted-2-color)}.muted-3-color{color:var(--muted-3-color)}.main-bg{background:var(--main-bg-color)}.placeholder{background:linear-gradient(118deg,#7979791a 25%,#79797933 37%,#7979791a 63%);opacity:1;border-radius:4px;-webkit-animation:placeholder 1.5s ease infinite!important;animation:placeholder 1.5s ease infinite!important;background-size:400% 100%!important}.placeholder.img{height:119px}.placeholder.t1{height:24px;width:80%}.placeholder.k1{height:20px;width:60%}.placeholder.k2{height:20px}.placeholder.k3{height:15px}.placeholder.s1{width:70px;height:15px;display:inline-block}@-webkit-keyframes placeholder{0%{background-position:100% 50%}to{background-position:0 50%}}@keyframes placeholder{0%{background-position:100% 50%}to{background-position:0 50%}}@-webkit-keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes fade{0%{opacity:0}to{opacity:1}}.ani.shake{-webkit-animation:shake .3s ease-in!important;animation:shake .3s ease-in!important}@-webkit-keyframes shake{20%{transform:translate(2px)}40%{transform:translate(-4px)}60%{transform:translate(5px)}80%{transform:translate(3px)}to{transform:translate(0)}}@keyframes shake{20%{transform:translate(2px)}40%{transform:translate(-4px)}60%{transform:translate(5px)}80%{transform:translate(3px)}to{transform:translate(0)}}.obs-animate{opacity:0;transition:opacity .6sLine truncated
|
body{--mian-max-width: 1200px;--posts-card-scale: 70%;--posts-list-scale: 70%;--theme-color: #f04494;--focus-color: var(--theme-color);--focus-shadow-color: rgba(253, 83, 161, .4);--key-color: #333;--main-color: #4e5358;--main-shadow: rgba(116, 116, 116, .08);--muted-color: #777;--muted-2-color: #999;--muted-3-color: #b1b1b1;--muted-4-color: #d2d2d2;--body-bg-color: #f5f6f7;--main-bg-color: #fff;--muted-bg-color: #eee;--muted-bg-2-color: #f6f7f8;--main-border-color: rgba(50, 50, 50, .06);--muted-border-color: rgba(0, 0, 0, .03);--main-radius: 8px;--mini-radius: calc(var(--main-radius) / 1.4);--blur-bg: rgba(255, 255, 255, .8);--float-btn-bg: rgba(200, 200, 200, .4);--header-bg: var(--blur-bg);--header-color: var(--main-color);--footer-bg: var(--main-bg-color);--footer-color: var(--muted-2-color)}.dark-theme{--key-color: #f8fafc;--main-color: #e5eef7;--main-shadow: rgba(24, 24, 24, .1);--muted-color: #b4b6bb;--muted-2-color: #888a8f;--muted-3-color: #636469;--muted-4-color: #43454a;--body-bg-color: #292a2d;--main-bg-color: #323335;--muted-bg-color: #2d2e31;--muted-bg-2-color: #37383a;--main-border-color: rgba(114, 114, 114, .1);--muted-border-color: rgba(184, 184, 184, .02);--blur-bg: rgba(50, 51, 53, .8);--float-btn-bg: rgba(70, 70, 70, .4);--header-bg: var(--blur-bg);--header-color: var(--main-color);--footer-bg: var(--main-bg-color);--footer-color: var(--muted-2-color)}::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}.dark::view-transition-old(root){z-index:1}.dark::view-transition-new(root){z-index:2147483646}::view-transition-old(root){z-index:2147483646}::view-transition-new(root){z-index:1}@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))){body{--blur-bg: #ffffff}body.dark-theme{--blur-bg: #37383a}}body:has(.modal.in),body.modal-open{--blur-bg: #ffffff}body.dark-theme:has(.modal.in),body.dark-theme.modal-open{--blur-bg: #37383a}body.fps-accelerat{--blur-bg: #ffffff}body.fps-accelerat.dark-theme{--blur-bg: #37383a}body.fps-accelerat *{-webkit-backdrop-filter:unset!important;backdrop-filter:unset!important}a[href],.relates-thumb li a>.post-info,.more-posts a>span{transition:color .2s,background .3s,opacity .3s,box-shadow .3s,transform .3s}.main-shadow{transition:box-shadow .3s}.but:focus,.but:hover,.progress,.navbar-nav>li:before{transition:.3s}.navbar-top .sub-menu,.theme-popover,.hover-show .hover-show-con{opacity:0;transform:translateY(6px);transition:.4s}.navbar-top li:hover>.sub-menu,.hover-show:hover .hover-show-con,.hover-show:hover~.hover-show-con,.hover-show:hover~.sub-menu{opacity:1;transform:translateY(0)}.hover-show{position:relative;cursor:pointer;z-index:10}.hover-show .hover-show-con{position:absolute;visibility:hidden}.hover-show:hover .hover-show-con,.hover-show:hover~.hover-show-con,.hover-show:hover~.sub-menu{visibility:unset}.match-ok,.navbar-top .sub-menu li>a,.ic-close{transition:.3s}.ic-close:hover{transform:rotate(270deg);color:inherit}.social_loginbar a,.item-thumbnail img,.dosc-nav .fa{transition:.2s ease-out}.hover-zoom:hover,.hover-zoom-img:hover img,.social_loginbar .xh-social-item:hover,.social_loginbar .social-login-item:hover{transform:scale(1.05)}.hover-zoom-sm:hover,.hover-zoom-img-sm:hover img,.posts-mini:hover img,.posts-item:hover .item-thumbnail img,.posts-item.mult-thumb .thumb-items>span>img:hover{transform:scale(1.02)}.main-min-height{min-height:calc(100vh - 280px)}.main-shadow{box-shadow:0 0 10px var(--main-shadow)}.key-color{color:var(--key-color)}.focus-color{--this-color: var(--focus-color);color:var(--focus-color)}.muted-color{color:var(--muted-color)}.muted-2-color{color:var(--muted-2-color)}.muted-3-color{color:var(--muted-3-color)}.main-bg{background:var(--main-bg-color)}.placeholder{background:linear-gradient(118deg,#7979791a 25%,#79797933 37%,#7979791a 63%);opacity:1;border-radius:4px;-webkit-animation:placeholder 1.5s ease infinite!important;animation:placeholder 1.5s ease infinite!important;background-size:400% 100%!important}.placeholder.img{height:119px}.placeholder.t1{height:24px;width:80%}.placeholder.k1{height:20px;width:60%}.placeholder.k2{height:20px}.placeholder.k3{height:15px}.placeholder.s1{width:70px;height:15px;display:inline-block}@-webkit-keyframes placeholder{0%{background-position:100% 50%}to{background-position:0 50%}}@keyframes placeholder{0%{background-position:100% 50%}to{background-position:0 50%}}@-webkit-keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes fade{0%{opacity:0}to{opacity:1}}.ani.shake{-webkit-animation:shake .3s ease-in!important;animation:shake .3s ease-in!important}@-webkit-keyframes shake{20%{transform:translate(2px)}40%{transform:translate(-4px)}60%{transform:translate(5px)}80%{transform:translate(3px)}to{transform:translate(0)}}@keyframes shake{20%{transform:translate(2px)}40%{transform:translate(-4px)}60%{transform:translate(5px)}80%{transform:translate(3px)}to{transform:translate(0)}}.obs-animate{opacity:0;transition:opacity .6sLine truncated
|
||||||
@@ -125,7 +125,7 @@ class PageAdminSet {
|
|||||||
|
|
||||||
$footer = '<div class="modal-footer">'
|
$footer = '<div class="modal-footer">'
|
||||||
. '<a target="_blank" title="' . esc_attr__('使用可视化布局配置此页面', 'aksrt') . '" data-toggle="tooltip" href="' . esc_url($widgets_url) . '" class="but c-yellow-2 padding-lg"><i class="fa fas fa-chart-pie" aria-hidden="true"></i>' . esc_html__('模块布局', 'aksrt') . '</a>'
|
. '<a target="_blank" title="' . esc_attr__('使用可视化布局配置此页面', 'aksrt') . '" data-toggle="tooltip" href="' . esc_url($widgets_url) . '" class="but c-yellow-2 padding-lg"><i class="fa fas fa-chart-pie" aria-hidden="true"></i>' . esc_html__('模块布局', 'aksrt') . '</a>'
|
||||||
. ($edit_link ? '<a target="_blank" href="' . esc_url($edit_link) . '" class="but c-yellow padding-lg"><i class="fa fas fa-wordpress" aria-hidden="true"></i>' . esc_html__('后台编辑', 'aksrt') . '</a>' : '')
|
. ($edit_link ? '<a target="_blank" href="' . esc_url($edit_link) . '" class="but c-yellow padding-lg"><i class="fa fab fa-wordpress" aria-hidden="true"></i>' . esc_html__('后台编辑', 'aksrt') . '</a>' : '')
|
||||||
. '<button class="but jb-blue padding-lg wp-ajax-submit"><i class="fa fas fa-check" aria-hidden="true"></i>' . esc_html__('确认修改', 'aksrt') . '</button>'
|
. '<button class="but jb-blue padding-lg wp-ajax-submit"><i class="fa fas fa-check" aria-hidden="true"></i>' . esc_html__('确认修改', 'aksrt') . '</button>'
|
||||||
. '</div>';
|
. '</div>';
|
||||||
|
|
||||||
|
|||||||
@@ -286,10 +286,13 @@ namespace {
|
|||||||
ob_start();
|
ob_start();
|
||||||
(new PageAdminSet())->render_modal();
|
(new PageAdminSet())->render_modal();
|
||||||
$modal_icons = (string) ob_get_clean();
|
$modal_icons = (string) ob_get_clean();
|
||||||
foreach (['fa fas fa-sliders-h', 'fa fas fa-times', 'fa fas fa-chart-pie', 'fa fas fa-wordpress', 'fa fas fa-check'] as $icon) {
|
// fa-wordpress 属于 FA5 的 Brands 字体族，需要 `fa fab` 前缀；
|
||||||
|
// 误用 `fa fas` 会让它解析到 Solid 族，字符盒为空、图标不显示。
|
||||||
|
foreach (['fa fas fa-sliders-h', 'fa fas fa-times', 'fa fas fa-chart-pie', 'fa fab fa-wordpress', 'fa fas fa-check'] as $icon) {
|
||||||
set_check(strpos($modal_icons, $icon) !== false, "modal must use the FA5 icon {$icon}");
|
set_check(strpos($modal_icons, $icon) !== false, "modal must use the FA5 icon {$icon}");
|
||||||
}
|
}
|
||||||
set_check(strpos($modal_icons, 'class="fa fa-') === false, 'modal must not use bare FA4 icon classes');
|
set_check(strpos($modal_icons, 'class="fa fa-') === false, 'modal must not use bare FA4 icon classes');
|
||||||
|
set_check(strpos($modal_icons, 'fa fas fa-wordpress') === false, 'fa-wordpress must not use the Solid family');
|
||||||
|
|
||||||
// 文章格式：参考主题固定 standard/图像/画廊/视频 四项，不读主题注册集。
|
// 文章格式：参考主题固定 standard/图像/画廊/视频 四项，不读主题注册集。
|
||||||
// 无格式时 WP 的 selected() 不选中任何项，浏览器默认落到第一项 standard。
|
// 无格式时 WP 的 selected() 不选中任何项，浏览器默认落到第一项 standard。
|
||||||
|
|||||||
@@ -236,7 +236,8 @@ test('frontend page edit icons follow the FA5 convention and the hint bar fades
|
|||||||
assert.match(pageAdminSet, /<i class="fa fas fa-cog fa-spin" aria-hidden="true"><\/i>/);
|
assert.match(pageAdminSet, /<i class="fa fas fa-cog fa-spin" aria-hidden="true"><\/i>/);
|
||||||
assert.match(pageAdminSet, /<i class="fa fas fa-sliders-h mr10" aria-hidden="true"><\/i>/);
|
assert.match(pageAdminSet, /<i class="fa fas fa-sliders-h mr10" aria-hidden="true"><\/i>/);
|
||||||
assert.match(pageAdminSet, /<i class="fa fas fa-chart-pie" aria-hidden="true"><\/i>/);
|
assert.match(pageAdminSet, /<i class="fa fas fa-chart-pie" aria-hidden="true"><\/i>/);
|
||||||
assert.match(pageAdminSet, /<i class="fa fas fa-wordpress" aria-hidden="true"><\/i>/);
|
// fa-wordpress lives in FA5's Brands family, so it needs `fa fab`, not `fa fas`.
|
||||||
|
assert.match(pageAdminSet, /<i class="fa fab fa-wordpress" aria-hidden="true"><\/i>/);
|
||||||
assert.match(pageAdminSet, /<i class="fa fas fa-check" aria-hidden="true"><\/i>/);
|
assert.match(pageAdminSet, /<i class="fa fas fa-check" aria-hidden="true"><\/i>/);
|
||||||
assert.match(pageAdminSet, /<i class="fa fas fa-times" aria-hidden="true"><\/i>/);
|
assert.match(pageAdminSet, /<i class="fa fas fa-times" aria-hidden="true"><\/i>/);
|
||||||
// No bare FA4 prefixes survive inside the feature markup.
|
// No bare FA4 prefixes survive inside the feature markup.
|
||||||
@@ -246,6 +247,12 @@ test('frontend page edit icons follow the FA5 convention and the hint bar fades
|
|||||||
for (const token of ['fa-cog', 'fa-sliders-h', 'fa-chart-pie', 'fa-wordpress', 'fa-check', 'fa-times']) {
|
for (const token of ['fa-cog', 'fa-sliders-h', 'fa-chart-pie', 'fa-wordpress', 'fa-check', 'fa-times']) {
|
||||||
assert.ok(fa5.includes(`.${token}:before`), `${token} is missing from Font Awesome 5.15.4`);
|
assert.ok(fa5.includes(`.${token}:before`), `${token} is missing from Font Awesome 5.15.4`);
|
||||||
}
|
}
|
||||||
|
// Brand icons resolve through the Brands family: .fab must set that font-family,
|
||||||
|
// and fa-wordpress must sit in it, otherwise the glyph box renders empty.
|
||||||
|
const fabRule = fa5.match(/\.fab\s*\{[^}]*\}/);
|
||||||
|
assert.ok(fabRule, '.fab is missing from Font Awesome 5.15.4');
|
||||||
|
assert.match(fabRule[0], /Font Awesome 5 Brands/);
|
||||||
|
assert.match(fa5, /\.fa-wordpress::?before\s*\{[^}]*content:\s*"\\f[0-9a-f]+"/i, 'fa-wordpress has no glyph content in FA5');
|
||||||
|
|
||||||
// The transient label fades 2s after load over 1s (reference js/page-edit.js).
|
// The transient label fades 2s after load over 1s (reference js/page-edit.js).
|
||||||
assert.match(pageAdminSet, /add_action\('wp_footer', \[self::class, 'enqueue_hint_script'\], 9\)/);
|
assert.match(pageAdminSet, /add_action\('wp_footer', \[self::class, 'enqueue_hint_script'\], 9\)/);
|
||||||
@@ -269,6 +276,23 @@ test('frontend page edit icons follow the FA5 convention and the hint bar fades
|
|||||||
assert.match(rule, /right:\s*0?\.7em/);
|
assert.match(rule, /right:\s*0?\.7em/);
|
||||||
assert.match(rule, /transform:\s*translateY\(-50%\)/);
|
assert.match(rule, /transform:\s*translateY\(-50%\)/);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Select arrow: .form-select::before already paints the FA5 chevron, so the
|
||||||
|
// wrapper's <select> must reset appearance or Chrome draws the native arrow
|
||||||
|
// beside it. main.min.css is the runtime file PHP enqueues.
|
||||||
|
const mainCss = read('assets/css/main.css');
|
||||||
|
const mainMinCss = read('assets/css/main.min.css');
|
||||||
|
const arrowRule = /\.form-select select\s*\{[^}]*\}/s;
|
||||||
|
assert.match(mainCss, arrowRule);
|
||||||
|
assert.match(mainMinCss, arrowRule);
|
||||||
|
for (const css of [mainCss, mainMinCss]) {
|
||||||
|
const rule = css.match(arrowRule)[0];
|
||||||
|
assert.match(rule, /-webkit-appearance:\s*none/);
|
||||||
|
assert.match(rule, /-moz-appearance:\s*none/);
|
||||||
|
assert.match(rule, /(^|[^-])appearance:\s*none/);
|
||||||
|
}
|
||||||
|
// The chevron itself stays co-located so the pair is reviewed together.
|
||||||
|
assert.match(mainCss, /\.form-select::before\s*\{[^}]*content:\s*'\\f107'/s);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('float toolbar config reaches the tinymce plugin with reference-context buttons', () => {
|
test('float toolbar config reaches the tinymce plugin with reference-context buttons', () => {
|
||||||
|
|||||||
Reference in new issue
Block a user