style: 优化页脚图片尺寸及垂直居中排版对齐
This commit is contained in:
User
@@ -2150,15 +2150,60 @@ $(document).on('click', '.comment-upvote', function () {
|
||||
function lazyloadStickers() {
|
||||
// 原生懒加载无需额外处理
|
||||
}
|
||||
$(document).on("click", "#comment_emotion_btn", function () {
|
||||
$("#comment_emotion_btn").toggleClass("comment-emotion-keyboard-open");
|
||||
|
||||
function positionEmotionKeyboard() {
|
||||
var btn = document.getElementById("comment_emotion_btn");
|
||||
var keyboard = document.getElementById("emotion_keyboard");
|
||||
if (!btn || !keyboard) return;
|
||||
|
||||
// Ensure keyboard is a child of body to avoid stacking context & clipping issues
|
||||
if (keyboard.parentElement !== document.body) {
|
||||
document.body.appendChild(keyboard);
|
||||
}
|
||||
|
||||
var btnRect = btn.getBoundingClientRect();
|
||||
var keyboardHeight = 300;
|
||||
var keyboardWidth = Math.min(500, window.innerWidth - 40);
|
||||
|
||||
var top = btnRect.top + window.scrollY - keyboardHeight - 10;
|
||||
var left = btnRect.right + window.scrollX - keyboardWidth;
|
||||
|
||||
if (top < window.scrollY + 10) {
|
||||
top = btnRect.bottom + window.scrollY + 10;
|
||||
}
|
||||
if (left < window.scrollX + 10) {
|
||||
left = window.scrollX + 10;
|
||||
}
|
||||
if (left + keyboardWidth > window.scrollX + window.innerWidth - 10) {
|
||||
left = window.scrollX + window.innerWidth - keyboardWidth - 10;
|
||||
}
|
||||
|
||||
keyboard.style.top = top + "px";
|
||||
keyboard.style.left = left + "px";
|
||||
}
|
||||
|
||||
$(document).on("click", "#comment_emotion_btn", function (e) {
|
||||
e.stopPropagation();
|
||||
var isOpen = $("#comment_emotion_btn").hasClass("comment-emotion-keyboard-open");
|
||||
if (!isOpen) {
|
||||
$("#comment_emotion_btn").addClass("comment-emotion-keyboard-open");
|
||||
$("#emotion_keyboard").addClass("comment-emotion-keyboard-open");
|
||||
setTimeout(function() {
|
||||
positionEmotionKeyboard();
|
||||
}, 10);
|
||||
} else {
|
||||
$("#comment_emotion_btn").removeClass("comment-emotion-keyboard-open");
|
||||
$("#emotion_keyboard").removeClass("comment-emotion-keyboard-open");
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("click", ".emotion-keyboard .emotion-group-name", function () {
|
||||
$(".emotion-keyboard .emotion-group-name.active").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(".emotion-keyboard .emotion-group:not(d-none)").addClass("d-none");
|
||||
$(".emotion-keyboard .emotion-group[index='" + $(this).attr("index") + "']").removeClass("d-none");
|
||||
});
|
||||
|
||||
function inputInsertText(text, input) {
|
||||
$(input).focus();
|
||||
let isSuccess = document.execCommand("insertText", false, text);
|
||||
@@ -2180,25 +2225,36 @@ function inputInsertText(text, input) {
|
||||
}
|
||||
$(input).focus();
|
||||
}
|
||||
|
||||
$(document).on("click", ".emotion-keyboard .emotion-item", function () {
|
||||
$("#comment_emotion_btn").removeClass("comment-emotion-keyboard-open");
|
||||
$("#emotion_keyboard").removeClass("comment-emotion-keyboard-open");
|
||||
if ($(this).hasClass("emotion-item-sticker")) {
|
||||
inputInsertText(" :" + $(this).attr("code") + ": ", document.getElementById("post_comment_content"));
|
||||
} else {
|
||||
inputInsertText($(this).attr("text"), document.getElementById("post_comment_content"));
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("dragstart", ".emotion-keyboard .emotion-item > img, .comment-sticker", function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (document.getElementById("comment_emotion_btn") == null) {
|
||||
if (document.getElementById("comment_emotion_btn") == null || document.getElementById("emotion_keyboard") == null) {
|
||||
return;
|
||||
}
|
||||
if (e.target.id != "comment_emotion_btn" && e.target.id != "emotion_keyboard" && !document.getElementById("comment_emotion_btn").contains(e.target) && !document.getElementById("emotion_keyboard").contains(e.target)) {
|
||||
$("#comment_emotion_btn").removeClass("comment-emotion-keyboard-open");
|
||||
$("#emotion_keyboard").removeClass("comment-emotion-keyboard-open");
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
if ($("#emotion_keyboard").hasClass("comment-emotion-keyboard-open")) {
|
||||
positionEmotionKeyboard();
|
||||
}
|
||||
});
|
||||
/*查看评论编辑记录*/
|
||||
function showCommentEditHistory(id) {
|
||||
let requestID = parseInt(new Date().getTime());
|
||||
|
||||
@@ -489,13 +489,15 @@ function resetGeetestCaptcha() {
|
||||
<button id="comment_emotion_btn" class="btn btn-icon btn-primary pull-right" type="button" title="<?php _e('表情', 'argon');?>">
|
||||
<i class="fa fa-smile-o" aria-hidden="true"></i>
|
||||
</button>
|
||||
<?php get_template_part( 'template-parts/emotion-keyboard' ); ?>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
<input id="post_comment_captcha_seed" value="<?php echo $commentCaptchaSeed;?>" style="display: none;"></input>
|
||||
<input id="post_comment_post_id" value="<?php echo get_the_ID();?>" style="display: none;"></input>
|
||||
</form>
|
||||
<?php if (get_option("argon_comment_emotion_keyboard", "true") != "false"){ ?>
|
||||
<?php get_template_part( 'template-parts/emotion-keyboard' ); ?>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
<div id="comment_edit_history" class="modal fade" tabindex="-1" role="dialog" aria-modal="true">
|
||||
|
||||
279
footer.html
Normal file
279
footer.html
Normal file
@@ -0,0 +1,279 @@
|
||||
<style>
|
||||
.footer-badges {
|
||||
--footer-font-size: 12px;
|
||||
font-family: "Open Sans", "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
font-size: var(--footer-font-size);
|
||||
line-height: 1.35;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.footer-badges * {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.badge-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.badge-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.badge-item {
|
||||
display: inline-flex;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.badge-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.badge-subject {
|
||||
background: linear-gradient(135deg, #5a5a5a, #4a4a4a);
|
||||
color: #fff;
|
||||
padding: 4px 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
font-size: inherit;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.badge-value {
|
||||
padding: 4px 12px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background: linear-gradient(135deg, #4caf50, #388e3c);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-green::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-badges a {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.footer-badges a:hover {
|
||||
text-decoration: none;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.badge-value a {
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.badge-value img,
|
||||
.footer-badges a img {
|
||||
height: 1.4em;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
filter: brightness(1.1);
|
||||
border-radius: 2px;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.footer-badges img[alt="又拍云"] {
|
||||
height: 1.8em;
|
||||
}
|
||||
|
||||
.footer-badges img[alt^="CC"] {
|
||||
height: 1.6em;
|
||||
}
|
||||
|
||||
.badge-subject i {
|
||||
font-size: 1.1em;
|
||||
vertical-align: -0.1em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.plain-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.plain-row > span {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.plain-row .separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plain-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.runtime-row {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.beian-row {
|
||||
font-size: inherit;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.report-row {
|
||||
font-size: inherit;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer-badges {
|
||||
font-size: var(--footer-font-size);
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.badge-row {
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.badge-item {
|
||||
flex-direction: column;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.badge-subject,
|
||||
.badge-value {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.plain-row {
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) and (orientation: portrait) {
|
||||
.footer-badges {
|
||||
font-size: var(--footer-font-size);
|
||||
}
|
||||
|
||||
.badge-item {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-badges .copyright-row .heimu a {
|
||||
color: #252525 !important;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
.footer-badges .copyright-row .heimu:hover a,
|
||||
.footer-badges .copyright-row .heimu:active a {
|
||||
color: #fff !important;
|
||||
transition: inherit;
|
||||
}
|
||||
</style>
|
||||
<div class="footer-badges">
|
||||
<span class="huhua" title="博君一笑，不必照单全收XD">“既没有编程，也没有小记，什么神人网站”</span>
|
||||
<div class="badge-row runtime-row">
|
||||
<div class="badge-item" title="懒狗说是，建站这么久屁都没几个">
|
||||
<div class="badge-subject">
|
||||
<i class="fa fa-clock-o"></i>这个BYD网站历经迁移、数据丢失，已经运行了
|
||||
</div>
|
||||
<div class="badge-value bg-green">
|
||||
<span id="blog_running_days">1145</span>天
|
||||
<span id="blog_running_hours">14</span>小时
|
||||
<span id="blog_running_mins">19</span>分钟
|
||||
<span id="blog_running_secs">19</span>秒
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="plain-row beian-row">
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">粤ICP备2025392543号-1</a>
|
||||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=44180202000805" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://blog.cartol.top/images/beian.png" alt="公安备案">粤公网安备44180202000805号
|
||||
</a>
|
||||
<a href="https://icp.gov.moe/?keyword=20250727" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://blog.cartol.top/images/moeicp.png" alt="萌ICP备案">萌ICP备20250727号
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="plain-row report-row">
|
||||
<a href="https://www.12377.cn" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://blog.cartol.top/images/12377.png" alt="举报中心">违法和不良信息举报
|
||||
</a>
|
||||
<a href="https://blog.cartol.top/privacy/" target="_blank" rel="noopener noreferrer">隐私政策</a>
|
||||
<a href="https://blog.cartol.top/disclaimer/" target="_blank" rel="noopener noreferrer">免责声明</a>
|
||||
</div>
|
||||
|
||||
<div class="badge-row">
|
||||
<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" rel="noopener noreferrer">
|
||||
本网站由<img src="/images/upyun.png" alt="又拍云">提供 CDN 加速/云存储服务
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="plain-row copyright-row">
|
||||
<span>
|
||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" alt="CC BY-NC-SA 4.0">
|
||||
</a>
|
||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener noreferrer">
|
||||
文章内容采用 CC BY-NC-SA 4.0 许可
|
||||
</a>
|
||||
<span class="heimu" title="你知道的太多了">
|
||||
黑幕样式抄自<a href="http://zh.moegirl.org/MediaWiki:Common.css" target="_blank" rel="noopener noreferrer">萌娘百科</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="plain-row copyright-row">
|
||||
<span>© <span id="copyright-years">2022-2025</span>.
|
||||
<a href="https://blog.cartol.top/" target="_blank" rel="noopener noreferrer">编程小记</a> All Rights Reserved.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -716,8 +716,8 @@ $author_desc = get_option('argon_sidebar_author_description');
|
||||
|
||||
<?php if (get_option('argon_show_rss_link', 'false') == 'true') : ?>
|
||||
<div class="site-rss">
|
||||
<a href="<?php bloginfo('rss2_url'); ?>" target="_blank" class="btn btn-primary btn-sm btn-icon-only rounded-circle" data-toggle="tooltip" data-placement="bottom" title="<?php _e('RSS 订阅', 'argon'); ?>">
|
||||
<i class="fa fa-rss"></i>
|
||||
<a href="<?php bloginfo('rss2_url'); ?>" target="_blank" class="site-rss-btn" data-toggle="tooltip" data-placement="bottom" title="<?php _e('RSS 订阅', 'argon'); ?>">
|
||||
<i class="fa fa-rss"></i> <?php _e('RSS 订阅', 'argon'); ?>
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
62
style.css
62
style.css
@@ -5965,7 +5965,7 @@ html.darkmode .comment-edit-history-item {
|
||||
/* 发送评论卡片优化 */
|
||||
#post_comment.card {
|
||||
border-radius: 16px;
|
||||
padding: 20px 20px 8px 20px;
|
||||
padding: 20px;
|
||||
background: var(--color-foreground);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.04),
|
||||
@@ -5973,10 +5973,12 @@ html.darkmode .comment-edit-history-item {
|
||||
transition:
|
||||
box-shadow var(--animation-normal) var(--ease-standard),
|
||||
transform var(--animation-normal) var(--ease-standard);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#post_comment.card .card-body {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#post_comment.card .row {
|
||||
@@ -5989,6 +5991,10 @@ html.darkmode .comment-edit-history-item {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#post_comment.card .row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#post_comment.card:hover {
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0, 0, 0, 0.06),
|
||||
@@ -6572,8 +6578,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri
|
||||
|
||||
min-width: min(300px, calc(100vw - 40px));
|
||||
|
||||
display: flex;
|
||||
|
||||
height: 300px;
|
||||
|
||||
flex-direction: column;
|
||||
@@ -6582,34 +6586,60 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri
|
||||
|
||||
position: absolute;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
right: 0;
|
||||
|
||||
bottom: -10px;
|
||||
|
||||
transform: translateY(100%) scale(0.9);
|
||||
|
||||
transform-origin: top;
|
||||
z-index: 1050;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
|
||||
opacity: 0;
|
||||
display: none;
|
||||
|
||||
pointer-events: none;
|
||||
border-radius: 12px;
|
||||
|
||||
background: var(--color-foreground);
|
||||
|
||||
-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
|
||||
|
||||
backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
|
||||
|
||||
box-shadow:
|
||||
|
||||
0 4px 12px rgba(0, 0, 0, 0.06),
|
||||
|
||||
0 12px 32px rgba(0, 0, 0, 0.08);
|
||||
|
||||
}
|
||||
|
||||
#comment_emotion_btn.comment-emotion-keyboard-open+.emotion-keyboard {
|
||||
.emotion-keyboard.comment-emotion-keyboard-open {
|
||||
|
||||
display: flex;
|
||||
|
||||
opacity: 1;
|
||||
|
||||
transform: translateY(100%);
|
||||
transform: scale(1);
|
||||
|
||||
pointer-events: all;
|
||||
|
||||
}
|
||||
|
||||
#emotion_keyboard {
|
||||
|
||||
margin: 0 !important;
|
||||
|
||||
padding: 0 !important;
|
||||
|
||||
border: none !important;
|
||||
|
||||
}
|
||||
|
||||
html.darkmode .emotion-keyboard {
|
||||
|
||||
box-shadow:
|
||||
|
||||
0 4px 12px rgba(0, 0, 0, 0.25),
|
||||
|
||||
0 12px 32px rgba(0, 0, 0, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.emotion-keyboard-content {
|
||||
|
||||
flex: 1;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
global $emotionListDefault;
|
||||
$emotionList = apply_filters("argon_emotion_list", $emotionListDefault);
|
||||
?>
|
||||
<div id="emotion_keyboard" class="emotion-keyboard card shadow-sm bg-white">
|
||||
<div id="emotion_keyboard" class="emotion-keyboard">
|
||||
<div class="emotion-keyboard-content">
|
||||
<?php
|
||||
foreach ($emotionList as $groupIndex => $group){
|
||||
|
||||
Reference in New Issue
Block a user